Skip to content

Commit e390835

Browse files
a7ula7ul
committed
Adds scalable image prop
1 parent 6997099 commit e390835

3 files changed

Lines changed: 30 additions & 255 deletions

File tree

‎src/components/Image/ImageLabel.ts‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
1-
import { QLabel, QPixmap } from "@nodegui/nodegui";
1+
import { QLabel, QPixmap, AspectRatioMode } from "@nodegui/nodegui";
22

33
export class ImageLabel extends QLabel {
44
originalPixmap?: QPixmap;
5+
aspectRatioMode?: AspectRatioMode;
56
setPixmap = (pixmap: QPixmap) => {
67
super.setPixmap(pixmap);
78
this.originalPixmap = pixmap;
89
};
10+
setAspectRatioMode = (mode: AspectRatioMode) => {
11+
this.aspectRatioMode = mode;
12+
// const size = this.size();
13+
// this.scalePixmap(size.width, size.height);
14+
};
915
scalePixmap = (width: number, height: number) => {
1016
if (this.originalPixmap) {
11-
return super.setPixmap(this.originalPixmap.scaled(width, height));
17+
return super.setPixmap(
18+
this.originalPixmap.scaled(width, height, this.aspectRatioMode)
19+
);
1220
}
1321
};
1422
}

‎src/components/Image/index.ts‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { registerComponent } from "../config";
2-
import { QPixmap } from "@nodegui/nodegui";
2+
import { QPixmap, QLabelEvents, AspectRatioMode } from "@nodegui/nodegui";
33
import { ViewProps, setProps as setViewProps } from "../View";
44
import { ImageLabel } from "./ImageLabel";
5-
65
interface ImageProps extends ViewProps {
76
src?: string;
7+
aspectRatioMode?: AspectRatioMode;
88
}
99

1010
const setProps = (
@@ -16,7 +16,9 @@ const setProps = (
1616
set src(imageUrl: string) {
1717
const pixMap = new QPixmap(imageUrl);
1818
widget.setPixmap(pixMap);
19-
widget.scalePixmap(320, 120);
19+
},
20+
set aspectRatioMode(mode: AspectRatioMode) {
21+
widget.setAspectRatioMode(mode);
2022
}
2123
};
2224
Object.assign(setter, newProps);
@@ -34,6 +36,10 @@ export const Image = registerComponent<ImageProps>({
3436
createInstance: newProps => {
3537
const widget = new ImageLabel();
3638
setProps(widget, newProps, {});
39+
widget.addEventListener(QLabelEvents.Resize, () => {
40+
const size = widget.size();
41+
widget.scalePixmap(size.width, size.height);
42+
});
3743
return widget;
3844
},
3945
finalizeInitialChildren: () => {

‎src/demo.tsx‎

Lines changed: 11 additions & 250 deletions
Original file line numberDiff line numberDiff line change
@@ -1,224 +1,17 @@
1-
import { Renderer, View, Text, Button, Window } from "./index";
2-
import React, { useReducer, Reducer } from "react";
3-
import {
4-
QPushButtonEvents,
5-
QMainWindowEvents,
6-
QWidgetEvents,
7-
QKeyEvent,
8-
NativeEvent
9-
} from "@nodegui/nodegui";
10-
11-
interface state {
12-
display: string;
13-
total: number;
14-
pendingOp: string;
15-
valueBuffer: string;
16-
}
17-
interface action {
18-
type: "operation" | "value";
19-
value: string;
20-
}
21-
const initialState: state = {
22-
display: "",
23-
total: 0,
24-
pendingOp: "~",
25-
valueBuffer: ""
26-
};
27-
28-
const reducer: Reducer<state, action> = (state, action) => {
29-
const newState = { ...state };
30-
switch (action.type) {
31-
case "operation": {
32-
switch (newState.pendingOp) {
33-
case "+": {
34-
newState.total =
35-
newState.total + parseFloat(state.valueBuffer || "0");
36-
break;
37-
}
38-
case "-": {
39-
newState.total =
40-
newState.total - parseFloat(state.valueBuffer || "0");
41-
break;
42-
}
43-
case "*": {
44-
newState.total =
45-
newState.total * parseFloat(state.valueBuffer || "0");
46-
break;
47-
}
48-
case "/": {
49-
newState.total =
50-
newState.total / parseFloat(state.valueBuffer || "1");
51-
break;
52-
}
53-
case "=": {
54-
break;
55-
}
56-
case "~": {
57-
newState.total = parseFloat(state.valueBuffer || "0");
58-
}
59-
default:
60-
}
61-
newState.valueBuffer = "";
62-
newState.display = action.value;
63-
if (action.value === "=") {
64-
const total = newState.total;
65-
Object.assign(newState, initialState);
66-
newState.total = total;
67-
newState.display = `${total}`;
68-
}
69-
if (action.value === "~") {
70-
Object.assign(newState, initialState);
71-
}
72-
newState.pendingOp = `${action.value}`;
73-
break;
74-
}
75-
case "value": {
76-
if (state.pendingOp === "=") {
77-
newState.pendingOp = "~";
78-
}
79-
if (!state.valueBuffer) {
80-
newState.display = action.value;
81-
newState.valueBuffer = `${action.value}`;
82-
} else {
83-
newState.display = `${state.display}` + `${action.value}`;
84-
newState.valueBuffer += `${action.value}`;
85-
}
86-
break;
87-
}
88-
default:
89-
throw new Error("Invalid operation");
90-
}
91-
return newState;
92-
};
1+
import { Renderer, View, Window, Image } from "./index";
2+
import React from "react";
3+
import { AspectRatioMode } from "@nodegui/nodegui";
934

945
const App = () => {
95-
const [state, dispatch] = useReducer(reducer, initialState);
96-
const onOperator = (value: string) => () => {
97-
dispatch({ type: "operation", value });
98-
};
99-
const onValue = (value: string) => () => {
100-
dispatch({ type: "value", value });
101-
};
102-
const onKeyRelease = (evt: NativeEvent) => {
103-
const operatorKeys = ["~", "/", "*", "-", "=", "+"];
104-
const valueKeys = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "."];
105-
const keyEvt = new QKeyEvent(evt);
106-
const keyText = keyEvt.text();
107-
if (operatorKeys.includes(keyText)) {
108-
dispatch({ type: "operation", value: keyText });
109-
} else if (valueKeys.includes(keyText)) {
110-
dispatch({ type: "value", value: keyText });
111-
}
112-
};
113-
1146
return (
1157
<>
116-
<Window
117-
on={{
118-
[QMainWindowEvents.KeyRelease]: onKeyRelease
119-
}}
120-
maxSize={{ width: 500, height: 700 }}
121-
minSize={{ width: 200, height: 300 }}
122-
styleSheet={styleSheet}
123-
>
124-
<View on={{ [QWidgetEvents.KeyRelease]: onKeyRelease }} id="container">
125-
<View id="row0">
126-
<Button
127-
id="opBtn"
128-
text="AC"
129-
on={{ [QPushButtonEvents.clicked]: onOperator("~") }}
130-
/>
131-
<Text id="result">{state.display || "0"}</Text>
132-
</View>
133-
<View id="row1">
134-
<Button
135-
id="valueBtn"
136-
text="7"
137-
on={{ [QPushButtonEvents.clicked]: onValue("7") }}
138-
/>
139-
<Button
140-
id="valueBtn"
141-
text="8"
142-
on={{ [QPushButtonEvents.clicked]: onValue("8") }}
143-
/>
144-
<Button
145-
id="valueBtn"
146-
text="9"
147-
on={{ [QPushButtonEvents.clicked]: onValue("9") }}
148-
/>
149-
<Button
150-
id="opBtnY"
151-
text="/"
152-
on={{ [QPushButtonEvents.clicked]: onOperator("/") }}
153-
/>
154-
</View>
155-
<View id="row">
156-
<Button
157-
id="valueBtn"
158-
text="4"
159-
on={{ [QPushButtonEvents.clicked]: onValue("4") }}
160-
/>
161-
<Button
162-
id="valueBtn"
163-
text="5"
164-
on={{ [QPushButtonEvents.clicked]: onValue("5") }}
165-
/>
166-
<Button
167-
id="valueBtn"
168-
text="6"
169-
on={{ [QPushButtonEvents.clicked]: onValue("6") }}
170-
/>
171-
<Button
172-
id="opBtnY"
173-
text="x"
174-
on={{ [QPushButtonEvents.clicked]: onOperator("*") }}
175-
/>
176-
</View>
177-
<View id="row">
178-
<Button
179-
id="valueBtn"
180-
text="1"
181-
on={{ [QPushButtonEvents.clicked]: onValue("1") }}
182-
/>
183-
<Button
184-
id="valueBtn"
185-
text="2"
186-
on={{ [QPushButtonEvents.clicked]: onValue("2") }}
187-
/>
188-
<Button
189-
id="valueBtn"
190-
text="3"
191-
on={{ [QPushButtonEvents.clicked]: onValue("3") }}
192-
/>
193-
<Button
194-
id="opBtnY"
195-
text="-"
196-
on={{ [QPushButtonEvents.clicked]: onOperator("-") }}
197-
/>
198-
</View>
199-
<View id="row">
200-
<Button
201-
id="valueBtn"
202-
text="0"
203-
on={{ [QPushButtonEvents.clicked]: onValue("0") }}
204-
/>
205-
<Button
206-
id="valueBtn"
207-
text="."
208-
enabled={!state.valueBuffer.includes(".")}
209-
on={{ [QPushButtonEvents.clicked]: onValue(".") }}
210-
/>
211-
<Button
212-
id="opBtn"
213-
text="="
214-
on={{ [QPushButtonEvents.clicked]: onOperator("=") }}
215-
/>
216-
<Button
217-
id="opBtnY"
218-
text="+"
219-
on={{ [QPushButtonEvents.clicked]: onOperator("+") }}
220-
/>
221-
</View>
8+
<Window styleSheet={styleSheet}>
9+
<View id="container">
10+
<Image
11+
id="img"
12+
aspectRatioMode={AspectRatioMode.KeepAspectRatio}
13+
src="/Users/atulr/Downloads/demo.png"
14+
></Image>
22215
</View>
22316
</Window>
22417
</>
@@ -230,40 +23,8 @@ const styleSheet = `
23023
qproperty-flex: 1;
23124
qproperty-flexDirection: column;
23225
qproperty-minHeight: '100%';
233-
background: blue;
234-
}
235-
#row, #row0, #row1 {
236-
qproperty-flex: 1;
237-
qproperty-alignItems: stretch;
238-
qproperty-justifyContent: space-between;
239-
qproperty-flexDirection: row;
240-
background: #4B4B4B;
241-
}
242-
#row0 {
243-
background: #1E1E1E;
244-
}
245-
#row1 {
246-
background: #2E2E2E;
247-
}
248-
#valueBtn, #opBtn, #opBtnY {
249-
qproperty-minWidth: '25%';
250-
qproperty-border: 1;
251-
border: 1px solid black;
252-
font-size: 20px;
253-
color: white;
254-
}
255-
#opBtnY {
256-
background: #FD8D0E;
257-
}
258-
#valueBtn:pressed, #opBtn:pressed, #opBtnY:pressed {
259-
background: grey;
26026
}
261-
#result {
262-
qproperty-alignment: 'AlignRight|AlignVCenter';
263-
padding-right: 5px;
264-
padding-left:5px;
265-
qproperty-paddingHorizontal: 5px;
266-
font-size: 40px;
27+
#img {
26728
qproperty-flex: 1;
26829
}
26930
`;

0 commit comments

Comments
 (0)