Skip to content

Commit a10f584

Browse files
pashidlospashidlos
committed
DrawArea. Show no image in case image is deleted
1 parent 793cb74 commit a10f584

File tree

1 file changed

+106
-108
lines changed

1 file changed

+106
-108
lines changed

‎src/components/DrawArea.tsx‎

Lines changed: 106 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export const DrawArea: FunctionComponent<IDrawArea> = ({
7575

7676
const [isDrawMode, setIsDrawMode] = drawModeState;
7777
const [isDrawing, setIsDrawing] = React.useState(isDrawMode);
78-
const [image, loading] = useImage(staticService.getImage(imageName));
78+
const [image, imageStatus] = useImage(staticService.getImage(imageName));
7979

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

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-
);
226+
rects[i].x = Math.round(newAttrs.x || 0);
227+
rects[i].y = Math.round(newAttrs.y || 0);
228+
rects[i].width = Math.round(
229+
newAttrs.width || MIN_RECT_SIDE_PIXEL
230+
);
231+
rects[i].height = Math.round(
232+
newAttrs.height || MIN_RECT_SIDE_PIXEL
233+
);
233234

234-
setIgnoreAreas(rects);
235-
}}
236-
/>
237-
);
238-
})}
239-
</Layer>
240-
</Stage>
241-
</div>
235+
setIgnoreAreas(rects);
236+
}}
237+
/>
238+
);
239+
})}
240+
</Layer>
241+
</Stage>
242242
</div>
243-
</Grid>
244-
)
245-
) : (
246-
<NoImagePlaceholder />
243+
</div>
244+
</Grid>
247245
)}
248246
</Grid>
249247
</React.Fragment>

0 commit comments

Comments
 (0)