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

label_studio/frontend/dist/lsf/version.json

@@ -1,6 +1,6 @@
 {
-  "message": "fix: LEAP-246: Replace overlaping MIG hotkeys",
-  "commit": "309d0f9451619e3c714044ddc1ff99d91613fb6f",
-  "branch": "master",
-  "date": "2024-01-17T16:09:13Z"
+  "message": "fix: LEAP-240: Prevent creating region on clicking outside selected one",
+  "commit": "4faed9ac55d7386cbd9af8a1ade66d064a13d16e",
+  "branch": "fb-leap-240/fix-click-outside",
+  "date": "2024-01-18T04:45:00Z"
 }

web/libs/editor/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) {
@@ -520,10 +522,10 @@ export default observer(
       const { item } = this.props;
 
       if (isFF(FF_DEV_1442)) {
-        this.handleDeferredMouseDown?.();
+        this.handleDeferredMouseDown?.(true);
       }
-      if (this.skipMouseUp) {
-        this.skipMouseUp = false;
+      if (this.skipNextClick) {
+        this.skipNextClick = false;
         return;
       }
 
@@ -556,8 +558,8 @@ export default observer(
     };
 
     handleDeferredClick = (handleDeferredMouseDownCallback, handleDeselection, eligibleToDeselect = false) => {
-      this.handleDeferredMouseDown = () => {
-        if (eligibleToDeselect) {
+      this.handleDeferredMouseDown = (wasClicked) => {
+        if (wasClicked && eligibleToDeselect) {
           handleDeselection();
         }
         handleDeferredMouseDownCallback();
@@ -566,7 +568,7 @@ export default observer(
       };
       this.resetDeferredClickTimeout();
       this.deferredClickTimeout.push(setTimeout(() => {
-        this.handleDeferredMouseDown?.();
+        this.handleDeferredMouseDown?.(false);
       }, this.props.item.annotation.isDrawing ? 0 : 100));
     };
 
@@ -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 => {
@@ -721,7 +740,7 @@ export default observer(
 
       if (isFF(FF_DEV_1442) && isDragging) {
         this.resetDeferredClickTimeout();
-        this.handleDeferredMouseDown?.();
+        this.handleDeferredMouseDown?.(false);
       }
 
       if ((isMouseWheelClick || isShiftDrag) && item.zoomScale > 1) {

web/libs/editor/src/tags/object/RichText/model.js

@@ -222,7 +222,7 @@ const Model = types
         // nodes count better be the same, so replace them with stubs
         // we should not sanitize text tasks because we already have htmlEscape in view.js
         if (isFF(FF_SAFE_TEXT) && self.type === 'text') {
-          self._value = String(val);
+          self._value = val;
         } else {
           self._value = sanitizeHtml(String(val));
         }

web/libs/editor/src/utils/data.js

@@ -16,10 +16,10 @@ export const parseValue = (value, task) => {
 
   // value can refer to structures, not only texts, so just replace wouldn't be enough
   if (value.match(reVar)?.[0] === value) {
-    return get(task, value.slice(1)) ?? '';
+    return get(task, value.substr(1)) ?? '';
   }
 
-  return value.replace(reVar, (v) => get(task, v.slice(1) ?? ''));
+  return value.replace(reVar, (v) => get(task, v.substr(1) ?? ''));
 };
 
 /**