fix: 🐛 Fix scroll issues with rotatable crosshairs

examples/VTKRotatableCrosshairsExample.js

@@ -126,7 +126,10 @@ class VTKRotatableCrosshairsExample extends Component {
       // // add istyle
       api.setInteractorStyle({
         istyle,
-        configuration: { apis, apiIndex: viewportIndex },
+        configuration: {
+          apis,
+          apiIndex: viewportIndex,
+        },
       });
 
       //api.setInteractorStyle({ istyle });

src/VTKViewport/vtkInteractorStyleMPRSlice.js

@@ -255,25 +255,12 @@ function vtkInteractorStyleMPRSlice(publicAPI, model) {
     }
   }
 
-  function updateRotatableCrosshairs(callData) {
+  function updateRotatableCrosshairs() {
     const { apis, apiIndex } = model;
     const thisApi = apis[apiIndex];
     const { rotatableCrosshairsWidget } = thisApi.svgWidgets;
-    const renderer = callData.pokedRenderer;
     const worldPos = thisApi.get('cachedCrosshairWorldPosition');
 
-    const camera = renderer.getActiveCamera();
-    const directionOfProjection = camera.getDirectionOfProjection();
-
-    const halfSlabThickness = thisApi.getSlabThickness() / 2;
-
-    // Add half of the slab thickness to the world position, such that we select
-    // The center of the slice.
-
-    for (let i = 0; i < worldPos.length; i++) {
-      worldPos[i] += halfSlabThickness * directionOfProjection[i];
-    }
-
     rotatableCrosshairsWidget.moveCrosshairs(worldPos, apis, apiIndex);
   }
 

src/VTKViewport/vtkInteractorStyleRotatableMPRCrosshairs.js

@@ -31,6 +31,8 @@ function vtkInteractorStyleRotatableMPRCrosshairs(publicAPI, model) {
     const thisApi = apis[apiIndex];
     let { position } = callData;
 
+    setOtherApisInactive();
+
     const { rotatableCrosshairsWidget } = thisApi.svgWidgets;
 
     if (!rotatableCrosshairsWidget) {
@@ -81,6 +83,7 @@ function vtkInteractorStyleRotatableMPRCrosshairs(publicAPI, model) {
 
           lineRotateHandles.selected = true;
 
+          // Set this line active.
           if (lineIndex === 0) {
             lines[0].active = true;
             lines[1].active = false;
@@ -128,10 +131,35 @@ function vtkInteractorStyleRotatableMPRCrosshairs(publicAPI, model) {
       line.active = false;
     });
 
+    setOtherApisInactive();
+
     // What is the fallback? Pan? Do nothing for now.
     model.operation = { type: null };
   }
 
+  function setOtherApisInactive() {
+    // Set other apis inactive
+
+    const { apis, apiIndex } = model;
+
+    apis.forEach((api, index) => {
+      if (index !== apiIndex) {
+        const { rotatableCrosshairsWidget } = api.svgWidgets;
+
+        if (!rotatableCrosshairsWidget) {
+          throw new Error(
+            'Must use rotatable crosshair svg widget with this istyle.'
+          );
+        }
+
+        const lines = rotatableCrosshairsWidget.getReferenceLines();
+
+        lines[0].active = false;
+        lines[1].active = false;
+      }
+    });
+  }
+
   function distanceFromLine(line, point) {
     const [a, b] = line.points;
     const c = point;