Skip to content
This repository was archived by the owner on Apr 18, 2024. It is now read-only.

Commit 6a8b379

Browse files
GondragosGondragos
authored
fix: LSDV-4673: Fix drawing with Rect3Point tool in relative coords (#1425)
* fix: LSDV-4673: Fix drawing with Rect3Point tool in relative coords * fix: LSDV-4673: Fix drawing with Rect3Point tool in degenerate cases * test: LSDV-4673: Add tests for Rect3Point tool * Update @heartexlabs/ls-test * Add relative stage size constants * Update @heartexlabs/ls-test * Update @heartexlabs/ls-test
1 parent 2d2d044 commit 6a8b379

File tree

18 files changed

+368
-88
lines changed

18 files changed

+368
-88
lines changed

‎src/components/ImageView/Image.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,16 @@ import messages from '../../utils/messages';
66
import { ErrorMessage } from '../ErrorMessage/ErrorMessage';
77
import './Image.styl';
88

9+
/**
10+
* Coordinates in relative mode belong to a data domain consisting of percentages in the range from 0 to 100
11+
*/
12+
export const RELATIVE_STAGE_WIDTH = 100;
13+
14+
/**
15+
* Coordinates in relative mode belong to a data domain consisting of percentages in the range from 0 to 100
16+
*/
17+
export const RELATIVE_STAGE_HEIGHT = 100;
18+
919
export const Image = observer(forwardRef(({
1020
imageEntity,
1121
imageTransform,

‎src/mixins/DrawingTool.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Utils from '../utils';
44
import throttle from 'lodash.throttle';
55
import { MIN_SIZE } from '../tools/Base';
66
import { FF_DEV_3666, FF_DEV_3793, isFF } from '../utils/feature-flags';
7+
import { RELATIVE_STAGE_HEIGHT, RELATIVE_STAGE_WIDTH } from '../components/ImageView/Image';
78

89
const DrawingTool = types
910
.model('DrawingTool', {
@@ -56,8 +57,8 @@ const DrawingTool = types
5657
get MIN_SIZE() {
5758
if (isFF(FF_DEV_3793)) {
5859
return {
59-
X: MIN_SIZE.X / self.obj.stageScale / self.obj.stageWidth * 100,
60-
Y: MIN_SIZE.Y / self.obj.stageScale / self.obj.stageHeight * 100,
60+
X: MIN_SIZE.X / self.obj.stageScale / self.obj.stageWidth * RELATIVE_STAGE_WIDTH,
61+
Y: MIN_SIZE.Y / self.obj.stageScale / self.obj.stageHeight * RELATIVE_STAGE_HEIGHT,
6162
};
6263
}
6364

@@ -231,8 +232,8 @@ const TwoPointsDrawingTool = DrawingTool.named('TwoPointsDrawingTool')
231232

232233
if (!shape) return;
233234
const isEllipse = shape.type.includes('ellipse');
234-
const maxStageWidth = isFF(FF_DEV_3793) ? 100 : self.obj.stageWidth;
235-
const maxStageHeight = isFF(FF_DEV_3793) ? 100 : self.obj.stageHeight;
235+
const maxStageWidth = isFF(FF_DEV_3793) ? RELATIVE_STAGE_WIDTH : self.obj.stageWidth;
236+
const maxStageHeight = isFF(FF_DEV_3793) ? RELATIVE_STAGE_HEIGHT : self.obj.stageHeight;
236237

237238
let { x1, y1, x2, y2 } = isEllipse ? {
238239
x1: shape.startX,
@@ -499,16 +500,17 @@ const ThreePointsDrawingTool = DrawingTool.named('ThreePointsDrawingTool')
499500
const shape = self.getCurrentArea();
500501

501502
if (!shape) return;
502-
const { stageWidth, stageHeight } = self.obj;
503+
const maxStageWidth = isFF(FF_DEV_3793) ? RELATIVE_STAGE_WIDTH : self.obj.stageWidth;
504+
const maxStageHeight = isFF(FF_DEV_3793) ? RELATIVE_STAGE_HEIGHT : self.obj.stageHeight;
503505

504506
let { x1, y1, x2, y2 } = Utils.Image.reverseCoordinates({ x: shape.startX, y: shape.startY }, { x, y });
505507

506508
x1 = Math.max(0, x1);
507509
y1 = Math.max(0, y1);
508-
x2 = Math.min(stageWidth, x2);
509-
y2 = Math.min(stageHeight, y2);
510+
x2 = Math.min(maxStageWidth, x2);
511+
y2 = Math.min(maxStageHeight, y2);
510512

511-
shape.setPosition(x1, y1, x2 - x1, y2 - y1, shape.rotation);
513+
shape.setPositionInternal(x1, y1, x2 - x1, y2 - y1, shape.rotation);
512514
},
513515

514516
finishDrawing(x, y) {

‎src/mixins/Regions.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { guidGenerator } from '../core/Helpers';
33
import { isDefined } from '../utils/utilities';
44
import { AnnotationMixin } from './AnnotationMixin';
55
import { ReadOnlyRegionMixin } from './ReadOnlyMixin';
6+
import { RELATIVE_STAGE_HEIGHT, RELATIVE_STAGE_WIDTH } from '../components/ImageView/Image';
67

78
const RegionsMixin = types
89
.model({
@@ -127,19 +128,19 @@ const RegionsMixin = types
127128

128129
// @todo this conversion methods should be removed after removing FF_DEV_3793
129130
convertXToPerc(x) {
130-
return (x * 100) / self.currentImageEntity.stageWidth;
131+
return (x * RELATIVE_STAGE_WIDTH) / self.currentImageEntity.stageWidth;
131132
},
132133

133134
convertYToPerc(y) {
134-
return (y * 100) / self.currentImageEntity.stageHeight;
135+
return (y * RELATIVE_STAGE_HEIGHT) / self.currentImageEntity.stageHeight;
135136
},
136137

137138
convertHDimensionToPerc(hd) {
138-
return (hd * (self.scaleX || 1) * 100) / self.currentImageEntity.stageWidth;
139+
return (hd * (self.scaleX || 1) * RELATIVE_STAGE_WIDTH) / self.currentImageEntity.stageWidth;
139140
},
140141

141142
convertVDimensionToPerc(vd) {
142-
return (vd * (self.scaleY || 1) * 100) / self.currentImageEntity.stageHeight;
143+
return (vd * (self.scaleY || 1) * RELATIVE_STAGE_HEIGHT) / self.currentImageEntity.stageHeight;
143144
},
144145

145146
// update region appearence based on it's current states, for

‎src/regions/EllipseRegion.js‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { FF_DEV_3793, isFF } from '../utils/feature-flags';
1919
import { createDragBoundFunc } from '../utils/image';
2020
import { AliveRegion } from './AliveRegion';
2121
import { EditableRegion } from './EditableRegion';
22+
import { RELATIVE_STAGE_HEIGHT, RELATIVE_STAGE_WIDTH } from '../components/ImageView/Image';
2223

2324
const EllipseRegionAbsoluteCoordsDEV3793 = types
2425
.model({
@@ -65,11 +66,11 @@ const EllipseRegionAbsoluteCoordsDEV3793 = types
6566
self.radiusX = radiusX;
6667
self.radiusY = radiusY;
6768

68-
self.relativeX = (x / self.parent?.stageWidth) * 100;
69-
self.relativeY = (y / self.parent?.stageHeight) * 100;
69+
self.relativeX = (x / self.parent?.stageWidth) * RELATIVE_STAGE_WIDTH;
70+
self.relativeY = (y / self.parent?.stageHeight) * RELATIVE_STAGE_HEIGHT;
7071

71-
self.relativeRadiusX = (radiusX / self.parent?.stageWidth) * 100;
72-
self.relativeRadiusY = (radiusY / self.parent?.stageHeight) * 100;
72+
self.relativeRadiusX = (radiusX / self.parent?.stageWidth) * RELATIVE_STAGE_WIDTH;
73+
self.relativeRadiusY = (radiusY / self.parent?.stageHeight) * RELATIVE_STAGE_HEIGHT;
7374

7475
self.rotation = (rotation + 360) % 360;
7576
},
@@ -81,15 +82,15 @@ const EllipseRegionAbsoluteCoordsDEV3793 = types
8182
self.sh = sh;
8283

8384
if (self.coordstype === 'px') {
84-
self.x = (sw * self.relativeX) / 100;
85-
self.y = (sh * self.relativeY) / 100;
86-
self.radiusX = (sw * self.relativeRadiusX) / 100;
87-
self.radiusY = (sh * self.relativeRadiusY) / 100;
85+
self.x = (sw * self.relativeX) / RELATIVE_STAGE_WIDTH;
86+
self.y = (sh * self.relativeY) / RELATIVE_STAGE_HEIGHT;
87+
self.radiusX = (sw * self.relativeRadiusX) / RELATIVE_STAGE_WIDTH;
88+
self.radiusY = (sh * self.relativeRadiusY) / RELATIVE_STAGE_HEIGHT;
8889
} else if (self.coordstype === 'perc') {
89-
self.x = (sw * self.x) / 100;
90-
self.y = (sh * self.y) / 100;
91-
self.radiusX = (sw * self.radiusX) / 100;
92-
self.radiusY = (sh * self.radiusY) / 100;
90+
self.x = (sw * self.x) / RELATIVE_STAGE_WIDTH;
91+
self.y = (sh * self.y) / RELATIVE_STAGE_HEIGHT;
92+
self.radiusX = (sw * self.radiusX) / RELATIVE_STAGE_WIDTH;
93+
self.radiusY = (sh * self.radiusY) / RELATIVE_STAGE_HEIGHT;
9394
self.coordstype = 'px';
9495
}
9596
},

‎src/regions/KeyPointRegion.js‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { FF_DEV_3793, isFF } from '../utils/feature-flags';
1717
import { createDragBoundFunc } from '../utils/image';
1818
import { AliveRegion } from './AliveRegion';
1919
import { EditableRegion } from './EditableRegion';
20+
import { RELATIVE_STAGE_HEIGHT, RELATIVE_STAGE_WIDTH } from '../components/ImageView/Image';
2021

2122
const KeyPointRegionAbsoluteCoordsDEV3793 = types
2223
.model({
@@ -38,8 +39,8 @@ const KeyPointRegionAbsoluteCoordsDEV3793 = types
3839
const { stageWidth: width, stageHeight: height } = self.parent;
3940

4041
if (width && height) {
41-
self.relativeX = (self.x / width) * 100;
42-
self.relativeY = (self.y / height) * 100;
42+
self.relativeX = (self.x / width) * RELATIVE_STAGE_WIDTH;
43+
self.relativeY = (self.y / height) * RELATIVE_STAGE_HEIGHT;
4344
}
4445
}
4546
},
@@ -48,20 +49,20 @@ const KeyPointRegionAbsoluteCoordsDEV3793 = types
4849
self.x = x;
4950
self.y = y;
5051

51-
self.relativeX = (x / self.parent.stageWidth) * 100;
52-
self.relativeY = (y / self.parent.stageHeight) * 100;
52+
self.relativeX = (x / self.parent.stageWidth) * RELATIVE_STAGE_WIDTH;
53+
self.relativeY = (y / self.parent.stageHeight) * RELATIVE_STAGE_HEIGHT;
5354
},
5455

5556
updateImageSize(wp, hp, sw, sh) {
5657
if (self.coordstype === 'px') {
57-
self.x = (sw * self.relativeX) / 100;
58-
self.y = (sh * self.relativeY) / 100;
58+
self.x = (sw * self.relativeX) / RELATIVE_STAGE_WIDTH;
59+
self.y = (sh * self.relativeY) / RELATIVE_STAGE_HEIGHT;
5960
}
6061

6162
if (self.coordstype === 'perc') {
62-
self.x = (sw * self.x) / 100;
63-
self.y = (sh * self.y) / 100;
64-
self.width = (sw * self.width) / 100;
63+
self.x = (sw * self.x) / RELATIVE_STAGE_WIDTH;
64+
self.y = (sh * self.y) / RELATIVE_STAGE_HEIGHT;
65+
self.width = (sw * self.width) / RELATIVE_STAGE_WIDTH;
6566
self.coordstype = 'px';
6667
}
6768
},

‎src/regions/PolygonPoint.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { getParent, getRoot, hasParent, types } from 'mobx-state-tree';
66
import { guidGenerator } from '../core/Helpers';
77
import { useRegionStyles } from '../hooks/useRegionColor';
88
import { FF_DEV_2431, FF_DEV_3793, isFF } from '../utils/feature-flags';
9+
import { RELATIVE_STAGE_HEIGHT, RELATIVE_STAGE_WIDTH } from '../components/ImageView/Image';
910

1011
const PolygonPointAbsoluteCoordsDEV3793 = types.model()
1112
.volatile(() => ({
@@ -23,8 +24,8 @@ const PolygonPointAbsoluteCoordsDEV3793 = types.model()
2324
self.relativeX = self.x;
2425
self.relativeY = self.y;
2526
} else {
26-
self.relativeX = (self.x / self.stage.stageWidth) * 100;
27-
self.relativeY = (self.y / self.stage.stageHeight) * 100;
27+
self.relativeX = (self.x / self.stage.stageWidth) * RELATIVE_STAGE_WIDTH;
28+
self.relativeY = (self.y / self.stage.stageHeight) * RELATIVE_STAGE_HEIGHT;
2829
}
2930
},
3031
movePoint(offsetX, offsetY) {
@@ -33,15 +34,15 @@ const PolygonPointAbsoluteCoordsDEV3793 = types.model()
3334
self.x = self.x + offsetX;
3435
self.y = self.y + offsetY;
3536

36-
self.relativeX = (self.x / self.stage.stageWidth) * 100;
37-
self.relativeY = (self.y / self.stage.stageHeight) * 100;
37+
self.relativeX = (self.x / self.stage.stageWidth) * RELATIVE_STAGE_WIDTH;
38+
self.relativeY = (self.y / self.stage.stageHeight) * RELATIVE_STAGE_HEIGHT;
3839
},
3940
_movePoint(x, y) {
4041
self.initX = x;
4142
self.initY = y;
4243

43-
self.relativeX = (x / self.stage.stageWidth) * 100;
44-
self.relativeY = (y / self.stage.stageHeight) * 100;
44+
self.relativeX = (x / self.stage.stageWidth) * RELATIVE_STAGE_WIDTH;
45+
self.relativeY = (y / self.stage.stageHeight) * RELATIVE_STAGE_HEIGHT;
4546

4647
self.x = x;
4748
self.y = y;

‎src/regions/PolygonRegion.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { createDragBoundFunc } from '../utils/image';
2121
import { ImageViewContext } from '../components/ImageView/ImageViewContext';
2222
import { FF_DEV_2432, FF_DEV_3793, isFF } from '../utils/feature-flags';
2323
import { fixMobxObserve } from '../utils/utilities';
24+
import { RELATIVE_STAGE_HEIGHT, RELATIVE_STAGE_WIDTH } from '../components/ImageView/Image';
2425

2526
const PolygonRegionAbsoluteCoordsDEV3793 = types
2627
.model({
@@ -30,17 +31,17 @@ const PolygonRegionAbsoluteCoordsDEV3793 = types
3031
updateImageSize(wp, hp, sw, sh) {
3132
if (self.coordstype === 'px') {
3233
self.points.forEach(p => {
33-
const x = (sw * p.relativeX) / 100;
34-
const y = (sh * p.relativeY) / 100;
34+
const x = (sw * p.relativeX) / RELATIVE_STAGE_WIDTH;
35+
const y = (sh * p.relativeY) / RELATIVE_STAGE_HEIGHT;
3536

3637
p._movePoint(x, y);
3738
});
3839
}
3940

4041
if (!self.annotation.sentUserGenerate && self.coordstype === 'perc') {
4142
self.points.forEach(p => {
42-
const x = (sw * p.x) / 100;
43-
const y = (sh * p.y) / 100;
43+
const x = (sw * p.x) / RELATIVE_STAGE_WIDTH;
44+
const y = (sh * p.y) / RELATIVE_STAGE_HEIGHT;
4445

4546
self.coordstype = 'px';
4647
p._movePoint(x, y);

0 commit comments

Comments
 (0)