Skip to content

Commit 2a2aebc

Browse files
pashidlospashidlos
authored
fix: compare area inverted goes over image size (#201)
1 parent 6a5e949 commit 2a2aebc

File tree

4 files changed

+131
-66
lines changed

4 files changed

+131
-66
lines changed

‎package-lock.json‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@
6161
},
6262
"devDependencies": {
6363
"@types/jest": "^26.0.20",
64+
"@types/lodash": "^4.14.170",
6465
"@types/node": "^13.13.0",
6566
"@types/qs": "^6.9.5",
6667
"@types/react": "^16.9.43",

‎src/_helpers/ignoreArea.helper.ts‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { uniqueId } from "lodash";
2+
import { IgnoreArea } from "../types/ignoreArea";
3+
4+
export const invertIgnoreArea = (
5+
imageWidth: number,
6+
imageHeight: number,
7+
ignoreArea?: IgnoreArea
8+
): IgnoreArea[] => {
9+
if (!ignoreArea) {
10+
return [];
11+
}
12+
13+
const ignoreArea1 = {
14+
x: 0,
15+
y: 0,
16+
width: ignoreArea.x,
17+
height: ignoreArea.y,
18+
id: uniqueId(),
19+
};
20+
21+
const ignoreArea2 = {
22+
x: ignoreArea.x,
23+
y: 0,
24+
width: ignoreArea.width,
25+
height: ignoreArea.y,
26+
id: uniqueId(),
27+
};
28+
29+
const ignoreArea3 = {
30+
x: ignoreArea.x + ignoreArea.width,
31+
y: 0,
32+
width: imageWidth - (ignoreArea1.width + ignoreArea2.width),
33+
height: ignoreArea.y,
34+
id: uniqueId(),
35+
};
36+
37+
const ignoreArea4 = {
38+
x: ignoreArea1.x,
39+
y: ignoreArea1.y + ignoreArea1.height,
40+
width: ignoreArea1.width,
41+
height: ignoreArea.height,
42+
id: uniqueId(),
43+
};
44+
45+
const ignoreArea5 = {
46+
x: ignoreArea3.x,
47+
y: ignoreArea3.y + ignoreArea3.height,
48+
width: ignoreArea3.width,
49+
height: ignoreArea.height,
50+
id: uniqueId(),
51+
};
52+
53+
const ignoreArea6 = {
54+
x: ignoreArea4.x,
55+
y: ignoreArea4.y + ignoreArea4.height,
56+
width: ignoreArea1.width,
57+
height: imageHeight - (ignoreArea1.height + ignoreArea.height),
58+
id: uniqueId(),
59+
};
60+
61+
const ignoreArea7 = {
62+
x: ignoreArea.x,
63+
y: ignoreArea.y + ignoreArea.height,
64+
width: ignoreArea.width,
65+
height: ignoreArea6.height,
66+
id: uniqueId(),
67+
};
68+
69+
const ignoreArea8 = {
70+
x: ignoreArea5.x,
71+
y: ignoreArea5.y + ignoreArea5.height,
72+
width: ignoreArea5.width,
73+
height: ignoreArea6.height,
74+
id: uniqueId(),
75+
};
76+
77+
return [
78+
ignoreArea1,
79+
ignoreArea2,
80+
ignoreArea3,
81+
ignoreArea4,
82+
ignoreArea5,
83+
ignoreArea6,
84+
ignoreArea7,
85+
ignoreArea8,
86+
];
87+
};

‎src/components/TestDetailsModal.tsx‎

Lines changed: 37 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,14 @@ import { TestStatus } from "../types/testStatus";
2525
import { useHistory, Prompt } from "react-router-dom";
2626
import { IgnoreArea } from "../types/ignoreArea";
2727
import { KonvaEventObject } from "konva/types/Node";
28-
import { Close, Add, Delete, Save, WarningRounded, LayersClear } from "@material-ui/icons";
28+
import {
29+
Close,
30+
Add,
31+
Delete,
32+
Save,
33+
WarningRounded,
34+
LayersClear,
35+
} from "@material-ui/icons";
2936
import { TestRunDetails } from "./TestRunDetails";
3037
import useImage from "use-image";
3138
import { routes } from "../constants";
@@ -35,6 +42,8 @@ import { CommentsPopper } from "./CommentsPopper";
3542
import { useSnackbar } from "notistack";
3643
import { ScaleActionsSpeedDial } from "./ZoomSpeedDial";
3744
import { ApproveRejectButtons } from "./ApproveRejectButtons";
45+
import { head } from "lodash";
46+
import { invertIgnoreArea } from "../_helpers/ignoreArea.helper";
3847

3948
const defaultStagePos = {
4049
x: 0,
@@ -79,7 +88,9 @@ const TestDetailsModal: React.FunctionComponent<{
7988
);
8089

8190
const [isDrawMode, setIsDrawMode] = useState(false);
82-
const [valueOfIgnoreOrCompare, setValueOfIgnoreOrCompare] = useState("Ignore Areas");
91+
const [valueOfIgnoreOrCompare, setValueOfIgnoreOrCompare] = useState(
92+
"Ignore Areas"
93+
);
8394
const [isDiffShown, setIsDiffShown] = useState(false);
8495
const [selectedRectId, setSelectedRectId] = React.useState<string>();
8596

@@ -105,10 +116,7 @@ const TestDetailsModal: React.FunctionComponent<{
105116
// update in test run
106117
testRunService.setIgnoreAreas(testRun.id, ignoreAreas),
107118
// update in variation
108-
testVariationService.setIgnoreAreas(
109-
testRun.testVariationId,
110-
ignoreAreas
111-
),
119+
testVariationService.setIgnoreAreas(testRun.testVariationId, ignoreAreas),
112120
])
113121
.then(() => {
114122
enqueueSnackbar(successMessage, {
@@ -122,56 +130,21 @@ const TestDetailsModal: React.FunctionComponent<{
122130
);
123131
};
124132

125-
const isValidCompareArea = () => {
126-
if (ignoreAreas.length === 1) {
127-
return true;
128-
}
129-
enqueueSnackbar("Select one and only one area to compare.", {
130-
variant: "error",
131-
});
132-
return false;
133-
};
134-
135133
const saveIgnoreAreasOrCompareArea = () => {
136134
if (valueOfIgnoreOrCompare.includes("Ignore")) {
137135
saveTestRun(ignoreAreas, "Ignore areas are updated.");
138-
return;
139-
}
140-
if (isValidCompareArea()) {
141-
const imageHeight = image?.height ? image.height : 0;
142-
const imageWidth = image?.width ? image.width : 0;
143-
const firstIgnoreArea = ignoreAreas[0];
144-
let ignoreArea1 = Object.assign({}, firstIgnoreArea);
145-
ignoreArea1.x = 0;
146-
ignoreArea1.y = 0;
147-
ignoreArea1.width = firstIgnoreArea.x;
148-
ignoreArea1.height = imageHeight;
149-
ignoreArea1.id = firstIgnoreArea.id + 1;
150-
151-
let ignoreArea2 = Object.assign({}, firstIgnoreArea);
152-
ignoreArea2.x = firstIgnoreArea.x;
153-
ignoreArea2.y = 0;
154-
ignoreArea2.width = imageWidth;
155-
ignoreArea2.height = firstIgnoreArea.y;
156-
ignoreArea2.id = firstIgnoreArea.id + 2;
157-
158-
let ignoreArea3 = Object.assign({}, firstIgnoreArea);
159-
ignoreArea3.x = firstIgnoreArea.x + firstIgnoreArea.width;
160-
ignoreArea3.y = firstIgnoreArea.y;
161-
ignoreArea3.height = imageHeight;
162-
ignoreArea3.width = imageWidth;
163-
ignoreArea3.id = firstIgnoreArea.id + 3;
164-
165-
let ignoreArea4 = Object.assign({}, firstIgnoreArea);
166-
ignoreArea4.x = firstIgnoreArea.x;
167-
ignoreArea4.y = firstIgnoreArea.y + firstIgnoreArea.height;
168-
ignoreArea4.height = imageHeight;
169-
ignoreArea4.width = firstIgnoreArea.width;
170-
ignoreArea4.id = firstIgnoreArea.id + 4;
136+
} else {
137+
const invertedIgnoreAreas = invertIgnoreArea(
138+
image!.width,
139+
image!.height,
140+
head(ignoreAreas)
141+
);
171142

172-
const newIgnoreArea = [ignoreArea1, ignoreArea2, ignoreArea3, ignoreArea4];
173-
setIgnoreAreas(newIgnoreArea);
174-
saveTestRun(newIgnoreArea, "Selected area has been inverted to ignore areas and saved.");
143+
setIgnoreAreas(invertedIgnoreAreas);
144+
saveTestRun(
145+
invertedIgnoreAreas,
146+
"Selected area has been inverted to ignore areas and saved."
147+
);
175148
}
176149
};
177150

@@ -199,9 +172,9 @@ const TestDetailsModal: React.FunctionComponent<{
199172
const fitStageToScreen = () => {
200173
const scale = image
201174
? Math.min(
202-
stageWidth < image.width ? stageWidth / image.width : 1,
203-
stageHeigth < image.height ? stageHeigth / image.height : 1
204-
)
175+
stageWidth < image.width ? stageWidth / image.width : 1,
176+
stageHeigth < image.height ? stageHeigth / image.height : 1
177+
)
205178
: 1;
206179
setStageScale(scale);
207180
resetPositioin();
@@ -267,10 +240,10 @@ const TestDetailsModal: React.FunctionComponent<{
267240
)}
268241
{(testRun.status === TestStatus.unresolved ||
269242
testRun.status === TestStatus.new) && (
270-
<Grid item>
271-
<ApproveRejectButtons testRun={testRun} />
272-
</Grid>
273-
)}
243+
<Grid item>
244+
<ApproveRejectButtons testRun={testRun} />
245+
</Grid>
246+
)}
274247
<Grid item>
275248
<IconButton color="inherit" onClick={handleClose}>
276249
<Close />
@@ -308,7 +281,9 @@ const TestDetailsModal: React.FunctionComponent<{
308281
id="area-select"
309282
labelId="areaSelect"
310283
value={valueOfIgnoreOrCompare}
311-
onChange={(event) => onIgnoreOrCompareSelectChange(event.target.value as string)}
284+
onChange={(event) =>
285+
onIgnoreOrCompareSelectChange(event.target.value as string)
286+
}
312287
>
313288
{["Ignore Areas", "Compare Area"].map((eachItem) => (
314289
<MenuItem key={eachItem} value={eachItem}>
@@ -342,9 +317,7 @@ const TestDetailsModal: React.FunctionComponent<{
342317
<Grid item>
343318
<IconButton
344319
disabled={ignoreAreas.length === 0}
345-
onClick={() =>
346-
setIgnoreAreas([])
347-
}
320+
onClick={() => setIgnoreAreas([])}
348321
>
349322
<LayersClear />
350323
</IconButton>
@@ -353,9 +326,7 @@ const TestDetailsModal: React.FunctionComponent<{
353326
<Grid item>
354327
<IconButton
355328
disabled={isIgnoreAreasSaved()}
356-
onClick={() =>
357-
saveIgnoreAreasOrCompareArea()
358-
}
329+
onClick={() => saveIgnoreAreasOrCompareArea()}
359330
>
360331
<Save />
361332
</IconButton>

0 commit comments

Comments
 (0)