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

Author: Gondragos

src/components/ImageView/Image.js

@@ -6,6 +6,16 @@ import messages from '../../utils/messages';
 import { ErrorMessage } from '../ErrorMessage/ErrorMessage';
 import './Image.styl';
 
+/**
+ * Coordinates in relative mode belong to a data domain consisting of percentages in the range from 0 to 100
+ */
+export const RELATIVE_STAGE_WIDTH = 100;
+
+/**
+ * Coordinates in relative mode belong to a data domain consisting of percentages in the range from 0 to 100
+ */
+export const RELATIVE_STAGE_HEIGHT = 100;
+
 export const Image = observer(forwardRef(({
   imageEntity,
   imageTransform,

src/mixins/DrawingTool.js

@@ -4,6 +4,7 @@ import Utils from '../utils';
 import throttle from 'lodash.throttle';
 import { MIN_SIZE } from '../tools/Base';
 import { FF_DEV_3666, FF_DEV_3793, isFF } from '../utils/feature-flags';
+import { RELATIVE_STAGE_HEIGHT, RELATIVE_STAGE_WIDTH } from '../components/ImageView/Image';
 
 const DrawingTool = types
   .model('DrawingTool', {
@@ -56,8 +57,8 @@ const DrawingTool = types
       get MIN_SIZE() {
         if (isFF(FF_DEV_3793)) {
           return {
-            X: MIN_SIZE.X / self.obj.stageScale / self.obj.stageWidth * 100,
-            Y: MIN_SIZE.Y / self.obj.stageScale / self.obj.stageHeight * 100,
+            X: MIN_SIZE.X / self.obj.stageScale / self.obj.stageWidth * RELATIVE_STAGE_WIDTH,
+            Y: MIN_SIZE.Y / self.obj.stageScale / self.obj.stageHeight * RELATIVE_STAGE_HEIGHT,
           };
         }
 
@@ -231,8 +232,8 @@ const TwoPointsDrawingTool = DrawingTool.named('TwoPointsDrawingTool')
 
         if (!shape) return;
         const isEllipse = shape.type.includes('ellipse');
-        const maxStageWidth = isFF(FF_DEV_3793) ? 100 : self.obj.stageWidth;
-        const maxStageHeight = isFF(FF_DEV_3793) ? 100 : self.obj.stageHeight;
+        const maxStageWidth = isFF(FF_DEV_3793) ? RELATIVE_STAGE_WIDTH : self.obj.stageWidth;
+        const maxStageHeight = isFF(FF_DEV_3793) ? RELATIVE_STAGE_HEIGHT : self.obj.stageHeight;
 
         let { x1, y1, x2, y2 } = isEllipse ? {
           x1: shape.startX,
@@ -499,16 +500,17 @@ const ThreePointsDrawingTool = DrawingTool.named('ThreePointsDrawingTool')
         const shape = self.getCurrentArea();
 
         if (!shape) return;
-        const { stageWidth, stageHeight } = self.obj;
+        const maxStageWidth = isFF(FF_DEV_3793) ? RELATIVE_STAGE_WIDTH : self.obj.stageWidth;
+        const maxStageHeight = isFF(FF_DEV_3793) ? RELATIVE_STAGE_HEIGHT : self.obj.stageHeight;
 
         let { x1, y1, x2, y2 } = Utils.Image.reverseCoordinates({ x: shape.startX, y: shape.startY }, { x, y });
 
         x1 = Math.max(0, x1);
         y1 = Math.max(0, y1);
-        x2 = Math.min(stageWidth, x2);
-        y2 = Math.min(stageHeight, y2);
+        x2 = Math.min(maxStageWidth, x2);
+        y2 = Math.min(maxStageHeight, y2);
 
-        shape.setPosition(x1, y1, x2 - x1, y2 - y1, shape.rotation);
+        shape.setPositionInternal(x1, y1, x2 - x1, y2 - y1, shape.rotation);
       },
 
       finishDrawing(x, y) {

src/mixins/Regions.js

@@ -3,6 +3,7 @@ import { guidGenerator } from '../core/Helpers';
 import { isDefined } from '../utils/utilities';
 import { AnnotationMixin } from './AnnotationMixin';
 import { ReadOnlyRegionMixin } from './ReadOnlyMixin';
+import { RELATIVE_STAGE_HEIGHT, RELATIVE_STAGE_WIDTH } from '../components/ImageView/Image';
 
 const RegionsMixin = types
   .model({
@@ -127,19 +128,19 @@ const RegionsMixin = types
 
       // @todo this conversion methods should be removed after removing FF_DEV_3793
       convertXToPerc(x) {
-        return (x * 100) / self.currentImageEntity.stageWidth;
+        return (x * RELATIVE_STAGE_WIDTH) / self.currentImageEntity.stageWidth;
       },
 
       convertYToPerc(y) {
-        return (y * 100) / self.currentImageEntity.stageHeight;
+        return (y * RELATIVE_STAGE_HEIGHT) / self.currentImageEntity.stageHeight;
       },
 
       convertHDimensionToPerc(hd) {
-        return (hd * (self.scaleX || 1) * 100) / self.currentImageEntity.stageWidth;
+        return (hd * (self.scaleX || 1) * RELATIVE_STAGE_WIDTH) / self.currentImageEntity.stageWidth;
       },
 
       convertVDimensionToPerc(vd) {
-        return (vd * (self.scaleY || 1) * 100) / self.currentImageEntity.stageHeight;
+        return (vd * (self.scaleY || 1) * RELATIVE_STAGE_HEIGHT) / self.currentImageEntity.stageHeight;
       },
 
       // update region appearence based on it's current states, for

src/regions/EllipseRegion.js

@@ -19,6 +19,7 @@ import { FF_DEV_3793, isFF } from '../utils/feature-flags';
 import { createDragBoundFunc } from '../utils/image';
 import { AliveRegion } from './AliveRegion';
 import { EditableRegion } from './EditableRegion';
+import { RELATIVE_STAGE_HEIGHT, RELATIVE_STAGE_WIDTH } from '../components/ImageView/Image';
 
 const EllipseRegionAbsoluteCoordsDEV3793 = types
   .model({
@@ -65,11 +66,11 @@ const EllipseRegionAbsoluteCoordsDEV3793 = types
       self.radiusX = radiusX;
       self.radiusY = radiusY;
 
-      self.relativeX = (x / self.parent?.stageWidth) * 100;
-      self.relativeY = (y / self.parent?.stageHeight) * 100;
+      self.relativeX = (x / self.parent?.stageWidth) * RELATIVE_STAGE_WIDTH;
+      self.relativeY = (y / self.parent?.stageHeight) * RELATIVE_STAGE_HEIGHT;
 
-      self.relativeRadiusX = (radiusX / self.parent?.stageWidth) * 100;
-      self.relativeRadiusY = (radiusY / self.parent?.stageHeight) * 100;
+      self.relativeRadiusX = (radiusX / self.parent?.stageWidth) * RELATIVE_STAGE_WIDTH;
+      self.relativeRadiusY = (radiusY / self.parent?.stageHeight) * RELATIVE_STAGE_HEIGHT;
 
       self.rotation = (rotation + 360) % 360;
     },
@@ -81,15 +82,15 @@ const EllipseRegionAbsoluteCoordsDEV3793 = types
       self.sh = sh;
 
       if (self.coordstype === 'px') {
-        self.x = (sw * self.relativeX) / 100;
-        self.y = (sh * self.relativeY) / 100;
-        self.radiusX = (sw * self.relativeRadiusX) / 100;
-        self.radiusY = (sh * self.relativeRadiusY) / 100;
+        self.x = (sw * self.relativeX) / RELATIVE_STAGE_WIDTH;
+        self.y = (sh * self.relativeY) / RELATIVE_STAGE_HEIGHT;
+        self.radiusX = (sw * self.relativeRadiusX) / RELATIVE_STAGE_WIDTH;
+        self.radiusY = (sh * self.relativeRadiusY) / RELATIVE_STAGE_HEIGHT;
       } else if (self.coordstype === 'perc') {
-        self.x = (sw * self.x) / 100;
-        self.y = (sh * self.y) / 100;
-        self.radiusX = (sw * self.radiusX) / 100;
-        self.radiusY = (sh * self.radiusY) / 100;
+        self.x = (sw * self.x) / RELATIVE_STAGE_WIDTH;
+        self.y = (sh * self.y) / RELATIVE_STAGE_HEIGHT;
+        self.radiusX = (sw * self.radiusX) / RELATIVE_STAGE_WIDTH;
+        self.radiusY = (sh * self.radiusY) / RELATIVE_STAGE_HEIGHT;
         self.coordstype = 'px';
       }
     },

src/regions/KeyPointRegion.js

@@ -17,6 +17,7 @@ import { FF_DEV_3793, isFF } from '../utils/feature-flags';
 import { createDragBoundFunc } from '../utils/image';
 import { AliveRegion } from './AliveRegion';
 import { EditableRegion } from './EditableRegion';
+import { RELATIVE_STAGE_HEIGHT, RELATIVE_STAGE_WIDTH } from '../components/ImageView/Image';
 
 const KeyPointRegionAbsoluteCoordsDEV3793 = types
   .model({
@@ -38,8 +39,8 @@ const KeyPointRegionAbsoluteCoordsDEV3793 = types
         const { stageWidth: width, stageHeight: height } = self.parent;
 
         if (width && height) {
-          self.relativeX = (self.x / width) * 100;
-          self.relativeY = (self.y / height) * 100;
+          self.relativeX = (self.x / width) * RELATIVE_STAGE_WIDTH;
+          self.relativeY = (self.y / height) * RELATIVE_STAGE_HEIGHT;
         }
       }
     },
@@ -48,20 +49,20 @@ const KeyPointRegionAbsoluteCoordsDEV3793 = types
       self.x = x;
       self.y = y;
 
-      self.relativeX = (x / self.parent.stageWidth) * 100;
-      self.relativeY = (y / self.parent.stageHeight) * 100;
+      self.relativeX = (x / self.parent.stageWidth) * RELATIVE_STAGE_WIDTH;
+      self.relativeY = (y / self.parent.stageHeight) * RELATIVE_STAGE_HEIGHT;
     },
 
     updateImageSize(wp, hp, sw, sh) {
       if (self.coordstype === 'px') {
-        self.x = (sw * self.relativeX) / 100;
-        self.y = (sh * self.relativeY) / 100;
+        self.x = (sw * self.relativeX) / RELATIVE_STAGE_WIDTH;
+        self.y = (sh * self.relativeY) / RELATIVE_STAGE_HEIGHT;
       }
 
       if (self.coordstype === 'perc') {
-        self.x = (sw * self.x) / 100;
-        self.y = (sh * self.y) / 100;
-        self.width = (sw * self.width) / 100;
+        self.x = (sw * self.x) / RELATIVE_STAGE_WIDTH;
+        self.y = (sh * self.y) / RELATIVE_STAGE_HEIGHT;
+        self.width = (sw * self.width) / RELATIVE_STAGE_WIDTH;
         self.coordstype = 'px';
       }
     },

src/regions/PolygonPoint.js

@@ -6,6 +6,7 @@ import { getParent, getRoot, hasParent, types } from 'mobx-state-tree';
 import { guidGenerator } from '../core/Helpers';
 import { useRegionStyles } from '../hooks/useRegionColor';
 import { FF_DEV_2431, FF_DEV_3793, isFF } from '../utils/feature-flags';
+import { RELATIVE_STAGE_HEIGHT, RELATIVE_STAGE_WIDTH } from '../components/ImageView/Image';
 
 const PolygonPointAbsoluteCoordsDEV3793 = types.model()
   .volatile(() => ({
@@ -23,8 +24,8 @@ const PolygonPointAbsoluteCoordsDEV3793 = types.model()
         self.relativeX = self.x;
         self.relativeY = self.y;
       } else {
-        self.relativeX = (self.x / self.stage.stageWidth) * 100;
-        self.relativeY = (self.y / self.stage.stageHeight) * 100;
+        self.relativeX = (self.x / self.stage.stageWidth) * RELATIVE_STAGE_WIDTH;
+        self.relativeY = (self.y / self.stage.stageHeight) * RELATIVE_STAGE_HEIGHT;
       }
     },
     movePoint(offsetX, offsetY) {
@@ -33,15 +34,15 @@ const PolygonPointAbsoluteCoordsDEV3793 = types.model()
       self.x = self.x + offsetX;
       self.y = self.y + offsetY;
 
-      self.relativeX = (self.x / self.stage.stageWidth) * 100;
-      self.relativeY = (self.y / self.stage.stageHeight) * 100;
+      self.relativeX = (self.x / self.stage.stageWidth) * RELATIVE_STAGE_WIDTH;
+      self.relativeY = (self.y / self.stage.stageHeight) * RELATIVE_STAGE_HEIGHT;
     },
     _movePoint(x, y) {
       self.initX = x;
       self.initY = y;
 
-      self.relativeX = (x / self.stage.stageWidth) * 100;
-      self.relativeY = (y / self.stage.stageHeight) * 100;
+      self.relativeX = (x / self.stage.stageWidth) * RELATIVE_STAGE_WIDTH;
+      self.relativeY = (y / self.stage.stageHeight) * RELATIVE_STAGE_HEIGHT;
 
       self.x = x;
       self.y = y;

src/regions/PolygonRegion.js

@@ -21,6 +21,7 @@ import { createDragBoundFunc } from '../utils/image';
 import { ImageViewContext } from '../components/ImageView/ImageViewContext';
 import { FF_DEV_2432, FF_DEV_3793, isFF } from '../utils/feature-flags';
 import { fixMobxObserve } from '../utils/utilities';
+import { RELATIVE_STAGE_HEIGHT, RELATIVE_STAGE_WIDTH } from '../components/ImageView/Image';
 
 const PolygonRegionAbsoluteCoordsDEV3793 = types
   .model({
@@ -30,17 +31,17 @@ const PolygonRegionAbsoluteCoordsDEV3793 = types
     updateImageSize(wp, hp, sw, sh) {
       if (self.coordstype === 'px') {
         self.points.forEach(p => {
-          const x = (sw * p.relativeX) / 100;
-          const y = (sh * p.relativeY) / 100;
+          const x = (sw * p.relativeX) / RELATIVE_STAGE_WIDTH;
+          const y = (sh * p.relativeY) / RELATIVE_STAGE_HEIGHT;
 
           p._movePoint(x, y);
         });
       }
 
       if (!self.annotation.sentUserGenerate && self.coordstype === 'perc') {
         self.points.forEach(p => {
-          const x = (sw * p.x) / 100;
-          const y = (sh * p.y) / 100;
+          const x = (sw * p.x) / RELATIVE_STAGE_WIDTH;
+          const y = (sh * p.y) / RELATIVE_STAGE_HEIGHT;
 
           self.coordstype = 'px';
           p._movePoint(x, y);