Skip to content
This repository was archived by the owner on Jul 26, 2025. It is now read-only.

Commit f7b46a3

Browse files
josoriomjosoriom
authored
fix: allow handling floating values in draw functions (#383)
* chore: update dependencies * fix: allow drawRectangle and drawPolygon functions to handle points with floating values * test: fix drawMarkers testcase * chore: fix eslint * refactor: remove redundant default value definition
1 parent 09621e5 commit f7b46a3

16 files changed

+319
-56
lines changed

‎package.json

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -63,37 +63,37 @@
6363
"tiff": "^5.0.3"
6464
},
6565
"devDependencies": {
66-
"@microsoft/api-extractor": "^7.36.2",
66+
"@microsoft/api-extractor": "^7.36.3",
6767
"@tailwindcss/forms": "^0.5.4",
6868
"@types/jest": "^29.5.3",
69-
"@types/jest-image-snapshot": "^6.1.0",
70-
"@types/node": "^20.4.2",
69+
"@types/jest-image-snapshot": "^6.2.0",
70+
"@types/node": "^20.4.8",
7171
"@types/picomatch": "^2.3.0",
72-
"@types/react": "^18.2.15",
72+
"@types/react": "^18.2.18",
7373
"@types/react-dom": "^18.2.7",
7474
"@types/robust-point-in-polygon": "^1.0.2",
75-
"@vitejs/plugin-react": "^4.0.3",
75+
"@vitejs/plugin-react": "^4.0.4",
7676
"autoprefixer": "^10.4.14",
7777
"clsx": "^2.0.0",
7878
"cross-env": "^7.0.3",
79-
"eslint": "^8.45.0",
79+
"eslint": "^8.46.0",
8080
"eslint-config-cheminfo-react": "^10.0.0",
81-
"eslint-config-cheminfo-typescript": "^12.0.2",
82-
"eslint-plugin-import": "^2.27.5",
81+
"eslint-config-cheminfo-typescript": "^12.0.4",
82+
"eslint-plugin-import": "^2.28.0",
8383
"eslint-plugin-jest": "^27.2.3",
8484
"immer": "^10.0.2",
85-
"jest": "^29.6.1",
86-
"jest-image-snapshot": "^6.1.0",
85+
"jest": "^29.6.2",
86+
"jest-image-snapshot": "^6.2.0",
8787
"jest-matcher-deep-close-to": "^3.0.2",
88-
"postcss": "^8.4.26",
89-
"prettier": "^3.0.0",
88+
"postcss": "^8.4.27",
89+
"prettier": "^3.0.1",
9090
"react": "^18.2.0",
9191
"react-dom": "^18.2.0",
9292
"react-router-dom": "^6.14.2",
9393
"rimraf": "^5.0.1",
9494
"tailwindcss": "^3.3.3",
9595
"ts-jest": "^29.1.1",
9696
"typescript": "~5.1.6",
97-
"vite": "^4.4.4"
97+
"vite": "^4.4.9"
9898
}
9999
}

‎src/draw/__tests__/drawCircleOnImage.test.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,29 @@ test('draw grey circle', () => {
122122
expect(expected).not.toBe(image);
123123
});
124124

125+
test('should handle points with floating values', () => {
126+
const image = testUtils.createGreyImage([
127+
[0, 0, 0, 0, 0, 0],
128+
[0, 0, 0, 0, 0, 0],
129+
[0, 0, 0, 0, 0, 0],
130+
[0, 0, 0, 0, 0, 0],
131+
[0, 0, 0, 0, 0, 0],
132+
]);
133+
const center = { row: 2.1, column: 3.1 };
134+
const radius = 2.1;
135+
const expected = image.drawCircle(center, radius, {
136+
color: [1],
137+
});
138+
expect(expected).toMatchImageData([
139+
[0, 0, 1, 1, 1, 0],
140+
[0, 1, 0, 0, 0, 1],
141+
[0, 1, 0, 0, 0, 1],
142+
[0, 1, 0, 0, 0, 1],
143+
[0, 0, 1, 1, 1, 0],
144+
]);
145+
expect(expected).not.toBe(image);
146+
});
147+
125148
test('negative radius error', () => {
126149
const image = testUtils.createGreyImage([
127150
[0, 0, 0],

‎src/draw/__tests__/drawLineOnImage.test.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,25 @@ test('draw nearly vertical line', () => {
107107
expect(result).not.toBe(image);
108108
});
109109

110+
test('should handle points with floating values', () => {
111+
const image = testUtils.createGreyImage([
112+
[0, 0, 0, 0],
113+
[0, 0, 0, 0],
114+
[0, 0, 0, 0],
115+
[0, 0, 0, 0],
116+
]);
117+
const from = { row: 1.1, column: 0.1 };
118+
const to = { row: 2.1, column: 3.1 };
119+
const result = image.drawLine(from, to, { strokeColor: [1] });
120+
expect(result).toMatchImageData([
121+
[0, 0, 0, 0],
122+
[1, 1, 0, 0],
123+
[0, 0, 1, 1],
124+
[0, 0, 0, 0],
125+
]);
126+
expect(result).not.toBe(image);
127+
});
128+
110129
test('same from and to', () => {
111130
const image = testUtils.createGreyImage([
112131
[1, 0, 0, 0],

‎src/draw/__tests__/drawLineOnMask.test.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,25 @@ test('draw vertical line', () => {
162162
expect(expected).not.toBe(mask);
163163
});
164164

165+
test('should handle points with floating values', () => {
166+
const mask = testUtils.createMask([
167+
[0, 0, 0, 0],
168+
[0, 0, 0, 0],
169+
[0, 0, 0, 0],
170+
[0, 0, 0, 0],
171+
]);
172+
const from = { row: 1.1, column: 0.1 };
173+
const to = { row: 2.1, column: 3.1 };
174+
const expected = mask.drawLine(from, to);
175+
expect(expected).toMatchMaskData([
176+
[0, 0, 0, 0],
177+
[1, 1, 0, 0],
178+
[0, 0, 1, 1],
179+
[0, 0, 0, 0],
180+
]);
181+
expect(expected).not.toBe(mask);
182+
});
183+
165184
test('same from and to', () => {
166185
const mask = testUtils.createMask([
167186
[1, 0, 0, 0],

‎src/draw/__tests__/drawMarker.test.ts

Lines changed: 84 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,8 @@ test('square', () => {
7373
});
7474
expect(result).toMatchImageData([
7575
[0, 0, 0, 0],
76-
[0, 1, 0, 0],
7776
[0, 0, 0, 0],
77+
[0, 0, 1, 0],
7878
[0, 0, 0, 0],
7979
]);
8080
expect(result).not.toBe(image);
@@ -94,10 +94,10 @@ test('big square', () => {
9494
shape: 'square',
9595
});
9696
expect(result).toMatchImageData([
97-
[1, 1, 1, 0],
98-
[1, 0, 1, 0],
99-
[1, 1, 1, 0],
10097
[0, 0, 0, 0],
98+
[0, 1, 1, 1],
99+
[0, 1, 0, 1],
100+
[0, 1, 1, 1],
101101
]);
102102
expect(result).not.toBe(image);
103103
});
@@ -117,10 +117,10 @@ test('filled big square', () => {
117117
shape: 'square',
118118
});
119119
expect(result).toMatchImageData([
120-
[1, 1, 1, 0],
121-
[1, 1, 1, 0],
122-
[1, 1, 1, 0],
123120
[0, 0, 0, 0],
121+
[0, 1, 1, 1],
122+
[0, 1, 1, 1],
123+
[0, 1, 1, 1],
124124
]);
125125
expect(result).not.toBe(image);
126126
});
@@ -184,8 +184,8 @@ test('out parameter set to self', () => {
184184
});
185185
expect(result).toMatchImageData([
186186
[0, 0, 0, 0],
187-
[0, 1, 0, 0],
188187
[0, 0, 0, 0],
188+
[0, 0, 1, 0],
189189
[0, 0, 0, 0],
190190
]);
191191
expect(result).toBe(image);
@@ -206,10 +206,85 @@ test('out to other image', () => {
206206
});
207207
expect(result).toMatchImageData([
208208
[0, 0, 0, 0],
209-
[0, 1, 0, 0],
210209
[0, 0, 0, 0],
210+
[0, 0, 1, 0],
211211
[0, 0, 0, 0],
212212
]);
213213
expect(result).toBe(out);
214214
expect(result).not.toBe(image);
215215
});
216+
217+
test('should handle points with floating values', () => {
218+
const image = testUtils.createGreyImage([
219+
[0, 0, 0, 0, 0, 0],
220+
[0, 0, 0, 0, 0, 0],
221+
[0, 0, 0, 0, 0, 0],
222+
[0, 0, 0, 0, 0, 0],
223+
[0, 0, 0, 0, 0, 0],
224+
[0, 0, 0, 0, 0, 0],
225+
]);
226+
const point = { row: 3.1, column: 3.1 };
227+
228+
const square = image.drawMarker(point, {
229+
color: [1],
230+
size: 3.1,
231+
filled: true,
232+
shape: 'square',
233+
});
234+
expect(square).toMatchImageData([
235+
[0, 0, 0, 0, 0, 0],
236+
[0, 0, 0, 0, 0, 0],
237+
[0, 0, 1, 1, 1, 0],
238+
[0, 0, 1, 1, 1, 0],
239+
[0, 0, 1, 1, 1, 0],
240+
[0, 0, 0, 0, 0, 0],
241+
]);
242+
243+
const triangle = image.drawMarker(point, {
244+
color: [1],
245+
size: 2.1,
246+
filled: true,
247+
shape: 'triangle',
248+
});
249+
250+
expect(triangle).toMatchImageData([
251+
[0, 0, 0, 0, 0, 0],
252+
[0, 0, 0, 1, 0, 0],
253+
[0, 0, 1, 1, 1, 0],
254+
[0, 1, 1, 1, 1, 1],
255+
[0, 0, 0, 0, 0, 0],
256+
[0, 0, 0, 0, 0, 0],
257+
]);
258+
259+
const circle = image.drawMarker(point, {
260+
color: [1],
261+
size: 2.1,
262+
filled: true,
263+
shape: 'circle',
264+
});
265+
266+
expect(circle).toMatchImageData([
267+
[0, 0, 0, 0, 0, 0],
268+
[0, 0, 1, 1, 1, 0],
269+
[0, 1, 1, 1, 1, 1],
270+
[0, 1, 1, 1, 1, 1],
271+
[0, 1, 1, 1, 1, 1],
272+
[0, 0, 1, 1, 1, 0],
273+
]);
274+
275+
const cross = image.drawMarker(point, {
276+
color: [1],
277+
size: 2.1,
278+
filled: true,
279+
shape: 'cross',
280+
});
281+
282+
expect(cross).toMatchImageData([
283+
[0, 0, 0, 0, 0, 0],
284+
[0, 0, 0, 1, 0, 0],
285+
[0, 0, 0, 1, 0, 0],
286+
[0, 1, 1, 1, 1, 1],
287+
[0, 0, 0, 1, 0, 0],
288+
[0, 0, 0, 1, 0, 0],
289+
]);
290+
});

‎src/draw/__tests__/drawMarkers.test.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@ test('square', () => {
1818
shape: 'square',
1919
});
2020
expect(result).toMatchImageData([
21-
[1, 0, 0, 0],
22-
[0, 1, 0, 0],
23-
[0, 1, 0, 0],
2421
[0, 0, 0, 0],
22+
[0, 1, 0, 0],
23+
[0, 0, 1, 0],
24+
[0, 0, 1, 0],
2525
]);
2626
expect(result).not.toBe(image);
2727
});
@@ -64,10 +64,10 @@ test('out parameter set to self', () => {
6464
out: image,
6565
});
6666
expect(result).toMatchImageData([
67-
[1, 0, 0, 0],
68-
[0, 1, 0, 0],
69-
[0, 1, 0, 0],
7067
[0, 0, 0, 0],
68+
[0, 1, 0, 0],
69+
[0, 0, 1, 0],
70+
[0, 0, 1, 0],
7171
]);
7272
expect(result).toBe(image);
7373
});
@@ -90,10 +90,10 @@ test('out to other image', () => {
9090
out,
9191
});
9292
expect(result).toMatchImageData([
93-
[1, 0, 0, 0],
94-
[0, 1, 0, 0],
95-
[0, 1, 0, 0],
9693
[0, 0, 0, 0],
94+
[0, 1, 0, 0],
95+
[0, 0, 1, 0],
96+
[0, 0, 1, 0],
9797
]);
9898
expect(result).toBe(out);
9999
expect(result).not.toBe(image);

‎src/draw/__tests__/drawPolygonOnImage.test.ts

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,35 @@ test('grey image', () => {
110110
expect(result).not.toBe(image);
111111
});
112112

113+
test('should handle points with floating values', () => {
114+
const image = testUtils.createGreyImage([
115+
[0, 0, 0, 0, 0],
116+
[0, 0, 0, 0, 0],
117+
[0, 0, 0, 0, 0],
118+
[0, 0, 0, 0, 0],
119+
[0, 0, 0, 0, 0],
120+
]);
121+
const points = [
122+
{ row: 0, column: 0 },
123+
{ row: 3.1, column: 3.1 },
124+
{ row: 3.1, column: 0 },
125+
];
126+
const result = image.drawPolygon(points, {
127+
origin: { column: 1.1, row: 1.1 },
128+
strokeColor: [1],
129+
fillColor: [2],
130+
});
131+
132+
expect(result).toMatchImageData([
133+
[0, 0, 0, 0, 0],
134+
[0, 1, 0, 0, 0],
135+
[0, 1, 1, 0, 0],
136+
[0, 1, 2, 1, 0],
137+
[0, 1, 1, 1, 1],
138+
]);
139+
expect(result).not.toBe(image);
140+
});
141+
113142
test('grey image, no fill', () => {
114143
const image = testUtils.createGreyImage([
115144
[0, 0, 0, 0],

‎src/draw/__tests__/drawPolygonOnMask.test.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,32 @@ test('rectangle filled', () => {
154154
expect(result).not.toBe(mask);
155155
});
156156

157+
test('should handle points with floating values', () => {
158+
const mask = testUtils.createMask([
159+
[0, 0, 0, 0],
160+
[0, 0, 0, 0],
161+
[0, 0, 0, 0],
162+
[0, 0, 0, 1],
163+
]);
164+
const points = [
165+
{ row: 0.1, column: 0.1 },
166+
{ row: 3.1, column: 0.1 },
167+
{ row: 3.1, column: 2.1 },
168+
{ row: 0.1, column: 2.1 },
169+
];
170+
const result = mask.drawPolygon(points, {
171+
filled: true,
172+
});
173+
174+
expect(result).toMatchMaskData([
175+
[1, 1, 1, 0],
176+
[1, 1, 1, 0],
177+
[1, 1, 1, 0],
178+
[1, 1, 1, 1],
179+
]);
180+
expect(result).not.toBe(mask);
181+
});
182+
157183
test('3x3 mask, tilted square, filled', () => {
158184
const mask = new Mask(3, 3);
159185
const points = [

0 commit comments

Comments
 (0)