Skip to content

Commit e2d2815

Browse files
pashidlospashidlos
committed
DrawArea image loading progress added
1 parent 700a2ff commit e2d2815

File tree

1 file changed

+109
-92
lines changed

1 file changed

+109
-92
lines changed

‎src/components/DrawArea.tsx‎

Lines changed: 109 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { RectConfig } from "konva/types/shapes/Rect";
44
import Rectangle, { MIN_RECT_SIDE_PIXEL } from "./Rectangle";
55
import { KonvaEventObject } from "konva/types/Node";
66
import { IgnoreArea } from "../types/ignoreArea";
7-
import { Grid, makeStyles } from "@material-ui/core";
7+
import { Grid, makeStyles, CircularProgress } from "@material-ui/core";
88
import useImage from "use-image";
99
import { staticService } from "../services";
1010
import { NoImagePlaceholder } from "./NoImageAvailable";
@@ -24,6 +24,9 @@ const useStyles = makeStyles((theme) => ({
2424
padding: theme.spacing(1),
2525
margin: theme.spacing(0.5),
2626
},
27+
progressContainer: {
28+
minHeight: "300px",
29+
},
2730
}));
2831

2932
interface IDrawArea {
@@ -72,7 +75,7 @@ export const DrawArea: FunctionComponent<IDrawArea> = ({
7275

7376
const [isDrawMode, setIsDrawMode] = drawModeState;
7477
const [isDrawing, setIsDrawing] = React.useState(isDrawMode);
75-
const [image] = useImage(staticService.getImage(imageName));
78+
const [image, loading] = useImage(staticService.getImage(imageName));
7679

7780
const handleContentMousedown = (e: any) => {
7881
if (!isDrawMode) return;
@@ -124,107 +127,121 @@ export const DrawArea: FunctionComponent<IDrawArea> = ({
124127
<ImageDetails type={type} imageName={imageName} />
125128
</Grid>
126129
{imageName ? (
127-
<Grid item className={classes.canvasBackground}>
128-
<div
129-
className={classes.canvasContainer}
130-
style={{
131-
height: image && image?.height * stageScale,
132-
}}
130+
loading === "loading" ? (
131+
<Grid
132+
container
133+
direction="column"
134+
alignItems="center"
135+
justify="center"
136+
className={classes.progressContainer}
133137
>
138+
<Grid item>
139+
<CircularProgress />
140+
</Grid>
141+
</Grid>
142+
) : (
143+
<Grid item className={classes.canvasBackground}>
134144
<div
145+
className={classes.canvasContainer}
135146
style={{
136-
transform: `translate3d(${stagePos.x}px, ${stagePos.y}px, 0px)`,
137-
}}
138-
onMouseMove={(event) => {
139-
if (!isDrawMode && isDrag && !selectedRectId) {
140-
event.preventDefault();
141-
setStagePos({
142-
x: event.clientX - stageInitPos.x,
143-
y: event.clientY - stageInitPos.y,
144-
});
145-
setStageOffset(stagePos);
146-
}
147-
}}
148-
onMouseUp={(event) => {
149-
setIsDrag(false);
150-
setStageInitPos(stagePos);
151-
}}
152-
onMouseLeave={(event) => {
153-
setIsDrag(false);
154-
setStageInitPos(stagePos);
155-
}}
156-
onMouseDown={(event) => {
157-
setIsDrag(true);
158-
setStageInitPos({
159-
x: event.clientX - stageOffset.x,
160-
y: event.clientY - stageOffset.y,
161-
});
147+
height: image && image?.height * stageScale,
162148
}}
163149
>
164-
<Stage
165-
width={image && image.width}
166-
height={image && image.height}
167-
onMouseDown={onStageClick}
150+
<div
168151
style={{
169-
transform: `scale(${stageScale})`,
170-
transformOrigin: "top left",
152+
transform: `translate3d(${stagePos.x}px, ${stagePos.y}px, 0px)`,
153+
}}
154+
onMouseMove={(event) => {
155+
if (!isDrawMode && isDrag && !selectedRectId) {
156+
event.preventDefault();
157+
setStagePos({
158+
x: event.clientX - stageInitPos.x,
159+
y: event.clientY - stageInitPos.y,
160+
});
161+
setStageOffset(stagePos);
162+
}
163+
}}
164+
onMouseUp={(event) => {
165+
setIsDrag(false);
166+
setStageInitPos(stagePos);
167+
}}
168+
onMouseLeave={(event) => {
169+
setIsDrag(false);
170+
setStageInitPos(stagePos);
171+
}}
172+
onMouseDown={(event) => {
173+
setIsDrag(true);
174+
setStageInitPos({
175+
x: event.clientX - stageOffset.x,
176+
y: event.clientY - stageOffset.y,
177+
});
171178
}}
172-
onContentMousedown={handleContentMousedown}
173-
onContentMouseup={handleContentMouseup}
174-
onContentMouseMove={handleContentMouseMove}
175179
>
176-
<Layer>
177-
<Image
178-
image={image}
179-
onMouseOver={(event) => {
180-
document.body.style.cursor = isDrawMode
181-
? "crosshair"
182-
: "grab";
183-
}}
184-
onMouseDown={(event) => {
185-
document.body.style.cursor = "grabbing";
186-
}}
187-
onMouseUp={(event) => {
188-
document.body.style.cursor = "grab";
189-
}}
190-
onMouseLeave={(event) => {
191-
document.body.style.cursor = "default";
192-
}}
193-
/>
194-
{ignoreAreas.map((rect, i) => {
195-
return (
196-
<Rectangle
197-
key={rect.id}
198-
shapeProps={{
199-
x: rect.x,
200-
y: rect.y,
201-
width: rect.width,
202-
height: rect.height,
203-
}}
204-
isSelected={rect.id === selectedRectId}
205-
onSelect={() => setSelectedRectId(rect.id)}
206-
onChange={(newAttrs: RectConfig) => {
207-
const rects = ignoreAreas.slice();
180+
<Stage
181+
width={image && image.width}
182+
height={image && image.height}
183+
onMouseDown={onStageClick}
184+
style={{
185+
transform: `scale(${stageScale})`,
186+
transformOrigin: "top left",
187+
}}
188+
onContentMousedown={handleContentMousedown}
189+
onContentMouseup={handleContentMouseup}
190+
onContentMouseMove={handleContentMouseMove}
191+
>
192+
<Layer>
193+
<Image
194+
image={image}
195+
onMouseOver={(event) => {
196+
document.body.style.cursor = isDrawMode
197+
? "crosshair"
198+
: "grab";
199+
}}
200+
onMouseDown={(event) => {
201+
document.body.style.cursor = "grabbing";
202+
}}
203+
onMouseUp={(event) => {
204+
document.body.style.cursor = "grab";
205+
}}
206+
onMouseLeave={(event) => {
207+
document.body.style.cursor = "default";
208+
}}
209+
/>
210+
{ignoreAreas.map((rect, i) => {
211+
return (
212+
<Rectangle
213+
key={rect.id}
214+
shapeProps={{
215+
x: rect.x,
216+
y: rect.y,
217+
width: rect.width,
218+
height: rect.height,
219+
}}
220+
isSelected={rect.id === selectedRectId}
221+
onSelect={() => setSelectedRectId(rect.id)}
222+
onChange={(newAttrs: RectConfig) => {
223+
const rects = ignoreAreas.slice();
208224

209-
rects[i].x = Math.round(newAttrs.x || 0);
210-
rects[i].y = Math.round(newAttrs.y || 0);
211-
rects[i].width = Math.round(
212-
newAttrs.width || MIN_RECT_SIDE_PIXEL
213-
);
214-
rects[i].height = Math.round(
215-
newAttrs.height || MIN_RECT_SIDE_PIXEL
216-
);
225+
rects[i].x = Math.round(newAttrs.x || 0);
226+
rects[i].y = Math.round(newAttrs.y || 0);
227+
rects[i].width = Math.round(
228+
newAttrs.width || MIN_RECT_SIDE_PIXEL
229+
);
230+
rects[i].height = Math.round(
231+
newAttrs.height || MIN_RECT_SIDE_PIXEL
232+
);
217233

218-
setIgnoreAreas(rects);
219-
}}
220-
/>
221-
);
222-
})}
223-
</Layer>
224-
</Stage>
234+
setIgnoreAreas(rects);
235+
}}
236+
/>
237+
);
238+
})}
239+
</Layer>
240+
</Stage>
241+
</div>
225242
</div>
226-
</div>
227-
</Grid>
243+
</Grid>
244+
)
228245
) : (
229246
<NoImagePlaceholder />
230247
)}

0 commit comments

Comments
 (0)