fix: LEAP-240: Prevent creating region on clicking outside selected one

src/components/ImageView/ImageView.js

@@ -506,7 +506,9 @@ export default observer(
     crosshairRef = createRef();
     handleDeferredMouseDown = null;
     deferredClickTimeout = [];
-    skipMouseUp = false;
+    skipNextMouseDown = false;
+    skipNextClick = false;
+    skipNextMouseUp = false;
     mouseDownPoint = null;
 
     constructor(props) {
@@ -522,8 +524,8 @@ export default observer(
       if (isFF(FF_DEV_1442)) {
         this.handleDeferredMouseDown?.();
       }
-      if (this.skipMouseUp) {
-        this.skipMouseUp = false;
+      if (this.skipNextClick) {
+        this.skipNextClick = false;
         return;
       }
 
@@ -575,6 +577,7 @@ export default observer(
       const isPanTool = item.getToolsManager().findSelectedTool()?.fullName === 'ZoomPanTool';
       const isMoveTool = item.getToolsManager().findSelectedTool()?.fullName === 'MoveTool';
 
+      this.skipNextMouseDown = this.skipNextMouseUp = this.skipNextClick = false;
       if (isFF(FF_LSDV_4930)) {
         this.mouseDownPoint = { x: e.evt.offsetX, y: e.evt.offsetY };
       }
@@ -626,6 +629,10 @@ export default observer(
 
           this.canvasX = left;
           this.canvasY = top;
+          if (this.skipNextMouseDown) {
+            this.skipNextMouseDown = false;
+            return true;
+          }
           item.event('mousedown', e, x, y);
 
           return true;
@@ -652,7 +659,9 @@ export default observer(
 
         const handleDeselection = () => {
           item.annotation.unselectAll();
-          this.skipMouseUp = true;
+          this.skipNextMouseDown = true;
+          this.skipNextMouseUp = true;
+          this.skipNextClick = true;
         };
 
         this.handleDeferredClick(handleMouseDown, handleDeselection, eligibleToDeselect);
@@ -680,7 +689,7 @@ export default observer(
 
       item.freezeHistory();
 
-      return item.event('mouseup', e, x - this.canvasX, y - this.canvasY);
+      return this.triggerMouseUp(e, x - this.canvasX, y - this.canvasY);
     };
 
     handleGlobalMouseMove = e => {
@@ -705,7 +714,17 @@ export default observer(
       item.freezeHistory();
       item.setSkipInteractions(false);
 
-      return item.event('mouseup', e, e.evt.offsetX, e.evt.offsetY);
+      return this.triggerMouseUp(e, e.evt.offsetX, e.evt.offsetY);
+    };
+
+    triggerMouseUp = (e, x, y) => {
+      if (this.skipNextMouseUp) {
+        this.skipNextMouseUp = false;
+        return;
+      }
+      const { item } = this.props;
+
+      return item.event('mouseup', e, x, y);
     };
 
     handleMouseMove = e => {

tests/functional/data/image_segmentation/tools/rect.ts

@@ -0,0 +1,32 @@
+export const rectangleToolAndLabelsConfig = `<View>
+  <Image name="img" value="$image" />
+  <Rectangle name="rect" toName="img" />
+  <Labels name="labels" toName="img">
+    <Label value="Label 1" background="blue" />
+    <Label value="Label 2" background="red" />
+  </Labels>
+ </View>`;
+
+export const simpleImageData = {
+  image: 'https://htx-misc.s3.amazonaws.com/opensource/label-studio/examples/images/nick-owuor-astro-nic-visuals-wDifg5xc9Z4-unsplash.jpg',
+};
+
+export const simpleRectangleResult = [
+  {
+    'id': 'rect_1',
+    'original_width': 2242,
+    'original_height': 2802,
+    'image_rotation': 0,
+    'value': {
+      'x': 20,
+      'y': 20,
+      'width': 20,
+      'height': 20,
+      'rotation': 0,
+    },
+    'from_name': 'rect',
+    'to_name': 'img',
+    'type': 'rectangle',
+    'origin': 'manual',
+  },
+];

tests/functional/specs/image_segmentation/tools/rect.cy.ts

@@ -0,0 +1,51 @@
+import { ImageView, LabelStudio, Sidebar } from '@heartexlabs/ls-test/helpers/LSF';
+import {
+  rectangleToolAndLabelsConfig,
+  simpleImageData,
+  simpleRectangleResult
+} from 'data/image_segmentation/tools/rect';
+import { FF_DEV_1442 } from '../../../../../src/utils/feature-flags';
+
+describe('Rectangle tool', () => {
+  it('should not draw rectangle when clicking outside to unselect (FF_DEV_1442 = true)', () => {
+    LabelStudio.addFeatureFlagsOnPageLoad({
+      [FF_DEV_1442]: true,
+    });
+
+    LabelStudio.params()
+      .config(rectangleToolAndLabelsConfig)
+      .data(simpleImageData)
+      .withResult(simpleRectangleResult)
+      .init();
+
+    LabelStudio.waitForObjectsReady();
+
+    Sidebar.hasRegions(1);
+    Sidebar.toggleRegionSelection(0);
+
+    ImageView.clickAtRelative(0.5, 0.5);
+    ImageView.clickAtRelative(0.7, 0.7);
+    Sidebar.hasRegions(1);
+  });
+
+  it('should draw rectangle when clicking outside (FF_DEV_1442 = false)', () => {
+    LabelStudio.addFeatureFlagsOnPageLoad({
+      [FF_DEV_1442]: false,
+    });
+
+    LabelStudio.params()
+      .config(rectangleToolAndLabelsConfig)
+      .data(simpleImageData)
+      .withResult(simpleRectangleResult)
+      .init();
+
+    LabelStudio.waitForObjectsReady();
+
+    Sidebar.hasRegions(1);
+    Sidebar.toggleRegionSelection(0);
+
+    ImageView.clickAtRelative(0.5, 0.5);
+    ImageView.clickAtRelative(0.7, 0.7);
+    Sidebar.hasRegions(2);
+  });
+});