fix: DEV-1285: Fix crosshair works with zooming and rotating of image (#433)

Author: Gondragos

src/components/ImageView/ImageView.js

@@ -19,6 +19,7 @@ import { ImageViewProvider } from "./ImageViewContext";
 import { Hotkey } from "../../core/Hotkey";
 import { useObserver } from "mobx-react-lite";
 import ResizeObserver from "../../utils/resize-observer";
+import { FF_DEV_1285, isFF } from "../../utils/feature-flags";
 
 Konva.showWarnings = false;
 
@@ -266,6 +267,11 @@ const Crosshair = memo(forwardRef(({ width, height }, ref) => {
   const [visible, setVisible] = useState(false);
   const strokeWidth = 1;
   const dashStyle = [3,3];
+  let enableStrokeScale = true;
+
+  if (isFF(FF_DEV_1285)) {
+    enableStrokeScale = false;
+  }
 
   if (ref) {
     ref.current = {
@@ -298,13 +304,15 @@ const Crosshair = memo(forwardRef(({ width, height }, ref) => {
           points={pointsH}
           stroke="#fff"
           strokeWidth={strokeWidth}
+          strokeScaleEnabled={enableStrokeScale}
         />
         <Line
           name="v-black"
           points={pointsH}
           stroke="#000"
           strokeWidth={strokeWidth}
           dash={dashStyle}
+          strokeScaleEnabled={enableStrokeScale}
         />
       </Group>
       <Group>
@@ -313,13 +321,15 @@ const Crosshair = memo(forwardRef(({ width, height }, ref) => {
           points={pointsV}
           stroke="#fff"
           strokeWidth={strokeWidth}
+          strokeScaleEnabled={enableStrokeScale}
         />
         <Line
           name="h-black"
           points={pointsV}
           stroke="#000"
           strokeWidth={strokeWidth}
           dash={dashStyle}
+          strokeScaleEnabled={enableStrokeScale}
         />
       </Group>
     </Layer>
@@ -449,7 +459,11 @@ export default observer(
       if (this.crosshairRef.current) {
         const { x, y } = e.currentTarget.getPointerPosition();
 
-        this.crosshairRef.current.updatePointer(x, y);
+        if (isFF(FF_DEV_1285)) {
+          this.crosshairRef.current.updatePointer(...this.props.item.fixZoomedCoords([x, y]));
+        } else {
+          this.crosshairRef.current.updatePointer(x, y);
+        }
       }
     }
 
@@ -816,8 +830,8 @@ export default observer(
               {item.crosshair && (
                 <Crosshair
                   ref={this.crosshairRef}
-                  width={item.stageComponentSize.width}
-                  height={item.stageComponentSize.height}
+                  width={isFF(FF_DEV_1285) ? item.stageWidth : item.stageComponentSize.width}
+                  height={isFF(FF_DEV_1285) ? item.stageHeight : item.stageComponentSize.height}
                 />
               )}
             </Stage>

src/utils/feature-flags.js

@@ -0,0 +1,8 @@
+const FEATURE_FLAGS = window.APP_SETTINGS?.feature_flags || {};
+
+// Fix crosshair working with zoom & rotation
+export const FF_DEV_1285 = "ff_front_dev_1285_crosshair_wrong_zoom_140122_short";
+
+export function isFF(id) {
+  return FEATURE_FLAGS[id] === true;
+}