fix: LEAP-148: Fix MagicWand in MIG scenario with image preloading

web/libs/editor/src/components/ImageView/Image.js

@@ -30,6 +30,7 @@ export const Image = observer(forwardRef(({
   updateImageSize,
   usedValue,
   size,
+  overlay,
 }, ref) => {
   const imageSize = useMemo(() => {
     return {
@@ -45,6 +46,7 @@ export const Image = observer(forwardRef(({
 
   return (
     <Block name="image" style={imageSize}>
+      {overlay}
       <ImageProgress
         downloading={imageEntity.downloading}
         progress={imageEntity.progress}
@@ -76,7 +78,7 @@ const ImageProgress = observer(({
   return downloading ? (
     <Block name="image-progress">
       <Elem name="message">Downloading image</Elem>
-      <Elem tag="progress" name="bar" value={progress} min="0" max={1} step={0.0001}/>
+      <Elem tag="progress" name="bar" value={progress} min="0" max={1} step={0.0001} />
     </Block>
   ) : error ? (
     <ImageLoadingError src={src} value={usedValue} />
@@ -121,6 +123,6 @@ const ImageLoadingError = ({ src, value }) => {
   }, [src]);
 
   return (
-    <ErrorMessage error={error}/>
+    <ErrorMessage error={error} />
   );
 };

web/libs/editor/src/components/ImageView/ImageView.js

@@ -490,6 +490,22 @@ const Crosshair = memo(forwardRef(({ width, height }, ref) => {
   );
 }));
 
+/**
+ * Component that creates an overlay on top
+ * of the image to support Magic Wand tool
+ */
+const CanvasOverlay = observer(({ item }) => {
+  return isFF(FF_DEV_4081) ? (
+    <canvas
+      className={styles.overlay}
+      ref={ref => {
+        item.setOverlayRef(ref);
+      }}
+      style={item.imageTransform}
+    />
+  ) : null;
+});
+
 export default observer(
   class ImageView extends Component {
     // stored position of canvas before creating region
@@ -506,9 +522,7 @@ export default observer(
     crosshairRef = createRef();
     handleDeferredMouseDown = null;
     deferredClickTimeout = [];
-    skipNextMouseDown = false;
-    skipNextClick = false;
-    skipNextMouseUp = false;
+    skipMouseUp = false;
     mouseDownPoint = null;
 
     constructor(props) {
@@ -522,10 +536,10 @@ export default observer(
       const { item } = this.props;
 
       if (isFF(FF_DEV_1442)) {
-        this.handleDeferredMouseDown?.(true);
+        this.handleDeferredMouseDown?.();
       }
-      if (this.skipNextClick) {
-        this.skipNextClick = false;
+      if (this.skipMouseUp) {
+        this.skipMouseUp = false;
         return;
       }
 
@@ -558,8 +572,8 @@ export default observer(
     };
 
     handleDeferredClick = (handleDeferredMouseDownCallback, handleDeselection, eligibleToDeselect = false) => {
-      this.handleDeferredMouseDown = (wasClicked) => {
-        if (wasClicked && eligibleToDeselect) {
+      this.handleDeferredMouseDown = () => {
+        if (eligibleToDeselect) {
           handleDeselection();
         }
         handleDeferredMouseDownCallback();
@@ -568,7 +582,7 @@ export default observer(
       };
       this.resetDeferredClickTimeout();
       this.deferredClickTimeout.push(setTimeout(() => {
-        this.handleDeferredMouseDown?.(false);
+        this.handleDeferredMouseDown?.();
       }, this.props.item.annotation.isDrawing ? 0 : 100));
     };
 
@@ -577,7 +591,6 @@ 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 };
       }
@@ -629,10 +642,6 @@ 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;
@@ -659,9 +668,7 @@ export default observer(
 
         const handleDeselection = () => {
           item.annotation.unselectAll();
-          this.skipNextMouseDown = true;
-          this.skipNextMouseUp = true;
-          this.skipNextClick = true;
+          this.skipMouseUp = true;
         };
 
         this.handleDeferredClick(handleMouseDown, handleDeselection, eligibleToDeselect);
@@ -689,7 +696,7 @@ export default observer(
 
       item.freezeHistory();
 
-      return this.triggerMouseUp(e, x - this.canvasX, y - this.canvasY);
+      return item.event('mouseup', e, x - this.canvasX, y - this.canvasY);
     };
 
     handleGlobalMouseMove = e => {
@@ -714,17 +721,7 @@ export default observer(
       item.freezeHistory();
       item.setSkipInteractions(false);
 
-      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);
+      return item.event('mouseup', e, e.evt.offsetX, e.evt.offsetY);
     };
 
     handleMouseMove = e => {
@@ -740,7 +737,7 @@ export default observer(
 
       if (isFF(FF_DEV_1442) && isDragging) {
         this.resetDeferredClickTimeout();
-        this.handleDeferredMouseDown?.(false);
+        this.handleDeferredMouseDown?.();
       }
 
       if ((isMouseWheelClick || isShiftDrag) && item.zoomScale > 1) {
@@ -1020,6 +1017,7 @@ export default observer(
                 imageTransform={item.imageTransform}
                 updateImageSize={item.updateImageSize}
                 size={item.canvasSize}
+                overlay={<CanvasOverlay item={item} />}
               />
             ) : (
               <div
@@ -1045,15 +1043,7 @@ export default observer(
                   crossOrigin={item.imageCrossOrigin}
                   alt="LS"
                 />
-                {isFF(FF_DEV_4081) ? (
-                  <canvas
-                    className={styles.overlay}
-                    ref={ref => {
-                      item.setOverlayRef(ref);
-                    }}
-                    style={item.imageTransform}
-                  />
-                ) : null}
+                <CanvasOverlay item={item} />
               </div>
             )}
             {/* @todo this is dirty hack; rewrite to proper async waiting for data to load */}

web/libs/editor/src/tools/MagicWand.js

@@ -252,7 +252,7 @@ const _Tool = types
           msg = 'The Magic Wand is not supported on rotated images';
         } else {
           msg = 'The Magic Wand is not supported if the crosshair is turned on';
-        } 
+        }
 
         alert(msg);
         throw msg;