fix: LSDV-4930: Fix selection tool (#1331)

* fix: LSDV-4930: Fix selection tool

- stop selecting hidden regions
- fix onClick issue in Konva
- allow to interact with regions inside selection area

* test:  LSDV-4930: Add integration tests for selection tool

* fix old tests

* Fix ff applying

* Update yarn.lock

* Fix yarn lock

* Update @heartexlabs/ls-test

* Move tests data to separated file

* fix: LSDV-4930: Fix selecting area after region has been created

This is fix for ff_front_dev_1442_unselect_shape_on_click_outside_080622_short

* Update testing library version

* Add addFeatureFlagsOnPageLoad self-check test

* test: LSDV-4930: Add test for selecting area after region has been created

This is test for ff_front_dev_1442_unselect_shape_on_click_outside_080622_short

* fix: LSDV-4930: Fix deselection functionality

* Remove 'only' modifier of the test

* Update @heartexlabs/ls-test

* Update @heartexlabs/ls-test

* Update @heartexlabs/ls-test

* Fix formatting and add clarify comments

* Add test for selecting one region from group of selected regions

* Update @heartexlabs/ls-test

* Update @heartexlabs/ls-test

---------

Co-authored-by: bmartel <[email protected]>

Author: Gondragos

e2e/setup/feature-flags.js

@@ -7,4 +7,5 @@ module.exports = {
   fflag_feat_front_lsdv_4712_skipduplicates_editing_110423_short: true,
   fflag_fix_font_lsdv_1148_hotkeys_namespaces_01022023_short: true,
   fflag_fix_front_lsdv_4881_timeseries_points_missing_140423_short: true,
+  fflag_fix_front_lsdv_4930_selection_tool_fixes_240423_short: true,
 };

e2e/tests/helpers.js

@@ -363,9 +363,15 @@ const polygonKonva = async (points) => {
     const stage = window.Konva.stages[0];
 
     for (const point of points) {
+      stage.fire('mousedown', {
+        evt: { offsetX: point[0], offsetY: point[1], timeStamp: Date.now(), preventDefault: () => {} },
+      });
       stage.fire('click', {
         evt: { offsetX: point[0], offsetY: point[1], timeStamp: Date.now(), preventDefault: () => {} },
       });
+      stage.fire('mouseup', {
+        evt: { offsetX: point[0], offsetY: point[1], timeStamp: Date.now(), preventDefault: () => {} },
+      });
       await delay(50);
     }
 

src/components/ImageView/ImageView.js

@@ -20,7 +20,17 @@ import ResizeObserver from '../../utils/resize-observer';
 import { debounce } from '../../utils/debounce';
 import Constants from '../../core/Constants';
 import { fixRectToFit } from '../../utils/image';
-import { FF_DEV_1285, FF_DEV_1442, FF_DEV_3077, FF_DEV_3793, FF_DEV_4081, FF_LSDV_4583_6, FF_LSDV_4711, isFF } from '../../utils/feature-flags';
+import {
+  FF_DEV_1285,
+  FF_DEV_1442,
+  FF_DEV_3077,
+  FF_DEV_3793,
+  FF_DEV_4081,
+  FF_LSDV_4583_6,
+  FF_LSDV_4711,
+  FF_LSDV_4930,
+  isFF
+} from '../../utils/feature-flags';
 import { Pagination } from '../../common/Pagination/Pagination';
 import { Image } from './Image';
 
@@ -89,7 +99,7 @@ const Regions = memo(({ regions, useLayers = true, chunkSize = 15, suggestion =
 
 const DrawingRegion = observer(({ item }) => {
   const { drawingRegion } = item;
-  
+
   if (!drawingRegion) return null;
   if (item.multiImage && item.currentImage !== drawingRegion.item_index) return null;
 
@@ -280,7 +290,11 @@ const SelectedRegions = observer(({ item, selectedRegions }) => {
 
   return (
     <>
-      <TransformerBack item={item}/>
+      {
+        isFF(FF_LSDV_4930)
+          ? null
+          : <TransformerBack item={item} />
+      }
       {brushRegions.length > 0 && (
         <Regions
           key="brushes"
@@ -326,7 +340,7 @@ const SelectionLayer = observer(({ item, selectionArea }) => {
       window.removeEventListener('mousedown', dragHandler);
       window.removeEventListener('mouseup', dragHandler);
     };
-  },[]);
+  }, []);
 
   const disableTransform = item.zoomScale > 1 && (shift || isPanTool || isMouseWheelClick);
 
@@ -375,7 +389,7 @@ const Selection = observer(({ item, selectionArea, ...triggeredOnResize }) => {
   return (
     <>
       <SelectedRegions item={item} selectedRegions={item.selectedRegions} {...triggeredOnResize} />
-      <SelectionLayer item={item} selectionArea={selectionArea}/>
+      <SelectionLayer item={item} selectionArea={selectionArea} />
     </>
   );
 });
@@ -475,6 +489,7 @@ export default observer(
     handleDeferredMouseDown = null;
     deferredClickTimeout = [];
     skipMouseUp = false;
+    mouseDownPoint = null;
 
     constructor(props) {
       super(props);
@@ -495,8 +510,22 @@ export default observer(
       }
 
       const evt = e.evt || e;
+      const { offsetX: x, offsetY: y } = evt;
 
-      return item.event('click', evt, evt.offsetX, evt.offsetY);
+      if (isFF(FF_LSDV_4930)) {
+        // Konva can trigger click even on simple mouseup
+        // You can try drag and drop interaction here https://konvajs.org/docs/events/Stage_Events.html and check the console
+        // So here is false trigger preventing
+        if (
+          !this.mouseDownPoint
+          || Math.abs(this.mouseDownPoint.x - x) > 0.01
+          || Math.abs(this.mouseDownPoint.y - y) > 0.01
+        ) {
+          this.mouseDownPoint = null;
+          return;
+        }
+      }
+      return item.event('click', evt, x, y);
     };
 
     resetDeferredClickTimeout = () => {
@@ -514,6 +543,8 @@ export default observer(
           handleDeselection();
         }
         handleDeferredMouseDownCallback();
+        // mousedown should be called only once especially if it is called from mousemove interaction.
+        this.handleDeferredMouseDown = null;
       };
       this.resetDeferredClickTimeout();
       this.deferredClickTimeout.push(setTimeout(() => {
@@ -525,6 +556,10 @@ export default observer(
       const { item } = this.props;
       const isPanTool = item.getToolsManager().findSelectedTool()?.fullName === 'ZoomPanTool';
 
+      if (isFF(FF_LSDV_4930)) {
+        this.mouseDownPoint = { x: e.evt.offsetX, y: e.evt.offsetY };
+      }
+
       item.updateSkipInteractions(e);
 
       const p = e.target.getParent();
@@ -534,7 +569,7 @@ export default observer(
 
       const handleMouseDown = () => {
         if (
-        // create regions over another regions with Cmd/Ctrl pressed
+          // create regions over another regions with Cmd/Ctrl pressed
           item.getSkipInteractions() ||
           e.target === item.stageRef ||
           findClosestParent(
@@ -1042,6 +1077,12 @@ export default observer(
                 )}
                 {item.grid && item.sizeUpdated && <ImageGrid item={item} />}
 
+                {
+                  isFF(FF_LSDV_4930)
+                    ? <TransformerBack item={item} />
+                    : null
+                }
+
                 {renderableRegions.map(([groupName, list]) => {
                   const isBrush = groupName.match(/brush/i) !== null;
                   const isSuggestion = groupName.match('suggested') !== null;

src/mixins/AreaMixin.js

@@ -4,6 +4,7 @@ import { guidGenerator } from '../core/Helpers';
 import Result from '../regions/Result';
 import { PER_REGION_MODES } from './PerRegion';
 import { ReadOnlyRegionMixin } from './ReadOnlyMixin';
+import { FF_LSDV_4930, isFF } from '../utils/feature-flags';
 
 let ouid = 1;
 
@@ -124,7 +125,8 @@ export const AreaMixinBase = types
     },
 
     get isInSelectionArea() {
-      return self.parent?.selectionArea?.isActive ? self.parent.selectionArea.intersectsBbox(self.bboxCoords) : false;
+      return (!isFF(FF_LSDV_4930) || !self.hidden)
+        && self.parent?.selectionArea?.isActive ? self.parent.selectionArea.intersectsBbox(self.bboxCoords) : false;
     },
   }))
   .volatile(() => ({

src/mixins/DrawingTool.js

@@ -301,6 +301,8 @@ const TwoPointsDrawingTool = DrawingTool.named('TwoPointsDrawingTool')
 
       clickEv(_, [x, y]) {
         if (!self.canStartDrawing()) return;
+        // @todo: here is a potential problem with endPoint
+        // it may be incorrect due to it may be not set at this moment
         if (startPoint && endPoint && !self.comparePointsWithThreshold(startPoint, endPoint)) return;
         if (currentMode === DEFAULT_MODE) {
           modeAfterMouseMove = TWO_CLICKS_MODE;

src/tools/Selection.js

@@ -4,6 +4,7 @@ import BaseTool from './Base';
 import ToolMixin from '../mixins/Tool';
 import { AnnotationMixin } from '../mixins/AnnotationMixin';
 import { IconMoveTool } from '../assets/icons';
+import { FF_LSDV_4930, isFF } from '../utils/feature-flags';
 
 const _Tool = types.model('SelectionTool', {
   shortcut: 'V',
@@ -54,6 +55,15 @@ const _Tool = types.model('SelectionTool', {
       }
       isSelecting = false;
     },
+    clickEv(ev) {
+      if (isFF(FF_LSDV_4930)) {
+        isSelecting = false;
+        self.obj.resetSelection();
+        if (!ev.ctrlKey && !ev.metaKey) {
+          self.annotation.unselectAreas();
+        }
+      }
+    },
   };
 });
 

src/utils/feature-flags.ts

@@ -240,6 +240,13 @@ export const FF_LSDV_4832 = 'fflag_feat_front_lsdv_4832_new_ranker_tag_120423_sh
  */
 export const FF_LSDV_4881 = 'fflag_fix_front_lsdv_4881_timeseries_points_missing_140423_short';
 
+/**
+ * Fixing issues related to selection tool functional (selecting hidden regions, onClick in Konva, interaction with regions inside selection area)
+ *
+ * @link https://app.launchdarkly.com/default/production/features/fflag_fix_front_lsdv_4930_selection_tool_fixes_240423_short
+ */
+export const FF_LSDV_4930 = 'fflag_fix_front_lsdv_4930_selection_tool_fixes_240423_short';
+
 /**
  * Restore "hide all regions" button functionality in the outliner
  *