Skip to content

Commit 700a2ff

Browse files
pashidlospashidlos
committed
TestDetailsModal refactored
1 parent 556421a commit 700a2ff

File tree

2 files changed

+194
-222
lines changed

2 files changed

+194
-222
lines changed

‎src/components/DrawArea.tsx‎

Lines changed: 137 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,31 @@ 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";
8+
import useImage from "use-image";
9+
import { staticService } from "../services";
10+
import { NoImagePlaceholder } from "./NoImageAvailable";
11+
import ImageDetails from "./ImageDetails";
12+
13+
const useStyles = makeStyles((theme) => ({
14+
imageContainer: {
15+
overflow: "hidden",
16+
},
17+
canvasBackground: {
18+
width: "100%",
19+
backgroundColor: "#f5f5f5",
20+
},
21+
canvasContainer: {
22+
overflow: "hidden",
23+
backgroundColor: "white",
24+
padding: theme.spacing(1),
25+
margin: theme.spacing(0.5),
26+
},
27+
}));
728

829
interface IDrawArea {
9-
image: HTMLImageElement | undefined;
30+
type: "Baseline" | "Image" | "Diff";
31+
imageName: string;
1032
ignoreAreas: IgnoreArea[];
1133
setIgnoreAreas: (ignoreAreas: IgnoreArea[]) => void;
1234
selectedRectId: string | undefined;
@@ -27,8 +49,9 @@ interface IDrawArea {
2749
stageScaleState: [number, React.Dispatch<React.SetStateAction<number>>];
2850
drawModeState: [boolean, React.Dispatch<React.SetStateAction<boolean>>];
2951
}
30-
const DrawArea: FunctionComponent<IDrawArea> = ({
31-
image,
52+
export const DrawArea: FunctionComponent<IDrawArea> = ({
53+
type,
54+
imageName,
3255
ignoreAreas,
3356
setIgnoreAreas,
3457
selectedRectId,
@@ -40,6 +63,7 @@ const DrawArea: FunctionComponent<IDrawArea> = ({
4063
stagePosState,
4164
drawModeState,
4265
}) => {
66+
const classes = useStyles();
4367
const [stageInitPos, setStageInitPos] = stageInitPosState;
4468
const [stageOffset, setStageOffset] = stageOffsetState;
4569
const [stagePos, setStagePos] = stagePosState;
@@ -48,6 +72,7 @@ const DrawArea: FunctionComponent<IDrawArea> = ({
4872

4973
const [isDrawMode, setIsDrawMode] = drawModeState;
5074
const [isDrawing, setIsDrawing] = React.useState(isDrawMode);
75+
const [image] = useImage(staticService.getImage(imageName));
5176

5277
const handleContentMousedown = (e: any) => {
5378
if (!isDrawMode) return;
@@ -93,97 +118,117 @@ const DrawArea: FunctionComponent<IDrawArea> = ({
93118
};
94119

95120
return (
96-
<div
97-
style={{
98-
transform: `translate3d(${stagePos.x}px, ${stagePos.y}px, 0px)`,
99-
}}
100-
onMouseMove={(event) => {
101-
if (!isDrawMode && isDrag && !selectedRectId) {
102-
event.preventDefault();
103-
setStagePos({
104-
x: event.clientX - stageInitPos.x,
105-
y: event.clientY - stageInitPos.y,
106-
});
107-
setStageOffset(stagePos);
108-
}
109-
}}
110-
onMouseUp={(event) => {
111-
setIsDrag(false);
112-
setStageInitPos(stagePos);
113-
}}
114-
onMouseLeave={(event) => {
115-
setIsDrag(false);
116-
setStageInitPos(stagePos);
117-
}}
118-
onMouseDown={(event) => {
119-
setIsDrag(true);
120-
setStageInitPos({
121-
x: event.clientX - stageOffset.x,
122-
y: event.clientY - stageOffset.y,
123-
});
124-
}}
125-
>
126-
<Stage
127-
width={image && image.width}
128-
height={image && image.height}
129-
onMouseDown={onStageClick}
130-
style={{
131-
transform: `scale(${stageScale})`,
132-
transformOrigin: "top left",
133-
}}
134-
onContentMousedown={handleContentMousedown}
135-
onContentMouseup={handleContentMouseup}
136-
onContentMouseMove={handleContentMouseMove}
137-
>
138-
<Layer>
139-
<Image
140-
image={image}
141-
onMouseOver={(event) => {
142-
document.body.style.cursor = isDrawMode ? "crosshair" : "grab";
143-
}}
144-
onMouseDown={(event) => {
145-
document.body.style.cursor = "grabbing";
146-
}}
147-
onMouseUp={(event) => {
148-
document.body.style.cursor = "grab";
149-
}}
150-
onMouseLeave={(event) => {
151-
document.body.style.cursor = "default";
152-
}}
153-
/>
154-
{ignoreAreas.map((rect, i) => {
155-
return (
156-
<Rectangle
157-
key={rect.id}
158-
shapeProps={{
159-
x: rect.x,
160-
y: rect.y,
161-
width: rect.width,
162-
height: rect.height,
121+
<React.Fragment>
122+
<Grid container direction="column">
123+
<Grid item>
124+
<ImageDetails type={type} imageName={imageName} />
125+
</Grid>
126+
{imageName ? (
127+
<Grid item className={classes.canvasBackground}>
128+
<div
129+
className={classes.canvasContainer}
130+
style={{
131+
height: image && image?.height * stageScale,
132+
}}
133+
>
134+
<div
135+
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);
163151
}}
164-
isSelected={rect.id === selectedRectId}
165-
onSelect={() => setSelectedRectId(rect.id)}
166-
onChange={(newAttrs: RectConfig) => {
167-
const rects = ignoreAreas.slice();
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+
});
162+
}}
163+
>
164+
<Stage
165+
width={image && image.width}
166+
height={image && image.height}
167+
onMouseDown={onStageClick}
168+
style={{
169+
transform: `scale(${stageScale})`,
170+
transformOrigin: "top left",
171+
}}
172+
onContentMousedown={handleContentMousedown}
173+
onContentMouseup={handleContentMouseup}
174+
onContentMouseMove={handleContentMouseMove}
175+
>
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();
168208

169-
rects[i].x = Math.round(newAttrs.x || 0);
170-
rects[i].y = Math.round(newAttrs.y || 0);
171-
rects[i].width = Math.round(
172-
newAttrs.width || MIN_RECT_SIDE_PIXEL
173-
);
174-
rects[i].height = Math.round(
175-
newAttrs.height || MIN_RECT_SIDE_PIXEL
176-
);
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+
);
177217

178-
setIgnoreAreas(rects);
179-
}}
180-
/>
181-
);
182-
})}
183-
</Layer>
184-
</Stage>
185-
</div>
218+
setIgnoreAreas(rects);
219+
}}
220+
/>
221+
);
222+
})}
223+
</Layer>
224+
</Stage>
225+
</div>
226+
</div>
227+
</Grid>
228+
) : (
229+
<NoImagePlaceholder />
230+
)}
231+
</Grid>
232+
</React.Fragment>
186233
);
187234
};
188-
189-
export default DrawArea;

0 commit comments

Comments
 (0)