* fix: 🐛 Using mpr slice tools updates crosshairs (OHIF#84)

Author: JamesAPetts

examples/VTKCrosshairsExample.js

@@ -63,6 +63,7 @@ function createStudyImageIds(baseUrl, studySearchOptions) {
 class VTKCrosshairsExample extends Component {
   state = {
     volumes: [],
+    displayCrosshairs: true,
   };
 
   async componentDidMount() {
@@ -129,6 +130,15 @@ class VTKCrosshairsExample extends Component {
       api.setSlabThickness(0.1);
 
       renderWindow.render();
+
+      // Its up to the layout manager of an app to know how many viewports are being created.
+      if (apis[0] && apis[1] && apis[2]) {
+        //const api = apis[0];
+
+        const api = apis[0];
+
+        api.svgWidgets.crosshairsWidget.resetCrosshairs(apis, 0);
+      }
     };
   };
 
@@ -145,6 +155,22 @@ class VTKCrosshairsExample extends Component {
     });
   }
 
+  toggleCrosshairs = () => {
+    const { displayCrosshairs } = this.state;
+    const apis = this.apis;
+
+    const shouldDisplayCrosshairs = !displayCrosshairs;
+
+    apis.forEach(api => {
+      const { svgWidgetManager, svgWidgets } = api;
+      svgWidgets.crosshairsWidget.setDisplay(shouldDisplayCrosshairs);
+
+      svgWidgetManager.render();
+    });
+
+    this.setState({ displayCrosshairs: shouldDisplayCrosshairs });
+  };
+
   render() {
     if (!this.state.volumes || !this.state.volumes.length) {
       return <h4>Loading...</h4>;
@@ -167,6 +193,14 @@ class VTKCrosshairsExample extends Component {
               onChange={this.handleSlabThicknessChange.bind(this)}
             />
           </div>
+          <div className="col-xs-4">
+            <p>Click bellow to toggle crosshairs on/off.</p>
+            <button onClick={this.toggleCrosshairs}>
+              {this.state.displayCrosshairs
+                ? 'Hide Crosshairs'
+                : 'Show Crosshairs'}
+            </button>
+          </div>
         </div>
         <div className="row">
           <div className="col-sm-4">

src/VTKViewport/View2D.js

@@ -59,6 +59,8 @@ export default class View2D extends Component {
     this.state = {
       voi: this.getVOI(props.volumes[0]),
     };
+
+    this.apiProperties = {};
   }
 
   updatePaintbrush() {
@@ -218,6 +220,8 @@ export default class View2D extends Component {
     const boundGetSlabThickness = this.getSlabThickness.bind(this);
     const boundSetSlabThickness = this.setSlabThickness.bind(this);
     const boundAddSVGWidget = this.addSVGWidget.bind(this);
+    const boundGetApiProperty = this.getApiProperty.bind(this);
+    const boundSetApiProperty = this.setApiProperty.bind(this);
 
     this.svgWidgets = {};
 
@@ -244,12 +248,23 @@ export default class View2D extends Component {
         setInteractorStyle: boundSetInteractorStyle,
         getSlabThickness: boundGetSlabThickness,
         setSlabThickness: boundSetSlabThickness,
+        get: boundGetApiProperty,
+        set: boundSetApiProperty,
+        type: 'VIEW2D',
       };
 
       this.props.onCreated(api);
     }
   }
 
+  getApiProperty(propertyName) {
+    return this.apiProperties[propertyName];
+  }
+
+  setApiProperty(propertyName, value) {
+    this.apiProperties[propertyName] = value;
+  }
+
   addSVGWidget(widget, name) {
     const { svgWidgetManager } = this;
 
@@ -312,15 +327,6 @@ export default class View2D extends Component {
     }
 
     const slabThickness = this.getSlabThickness();
-
-    /*
-    let currentSlabThickness;
-    if (currentIStyle.getSlabThickness && istyle.getSlabThickness) {
-      currentSlabThickness = currentIStyle.getSlabThickness();
-      this.currentSlabThickness = currentSlabThickness;
-    }
-    */
-
     const interactor = renderWindow.getInteractor();
 
     interactor.setInteractorStyle(istyle);

src/VTKViewport/View3D.js

@@ -121,7 +121,8 @@ export default class View3D extends Component {
         filters,
         actors,
         volumes,
-        _component: this,
+        type: 'VIEW3D',
+        _component: this, // Backdoor still open for now whilst the API isn't as mature as View2D.
       };
 
       this.props.onCreated(api);

src/VTKViewport/vtkInteractorStyleMPRCrosshairs.js

@@ -1,5 +1,4 @@
 import macro from 'vtk.js/Sources/macro';
-import vtkMatrixBuilder from 'vtk.js/Sources/Common/Core/MatrixBuilder';
 import vtkInteractorStyleMPRSlice from './vtkInteractorStyleMPRSlice.js';
 import Constants from 'vtk.js/Sources/Rendering/Core/InteractorStyle/Constants';
 import vtkCoordinate from 'vtk.js/Sources/Rendering/Core/Coordinate';
@@ -20,72 +19,30 @@ function vtkInteractorStyleMPRCrosshairs(publicAPI, model) {
 
   function moveCrosshairs(callData) {
     const { apis, apiIndex } = model;
-    const pos = [callData.position.x, callData.position.y];
+    const api = apis[apiIndex];
+
+    const pos = callData.position;
     const renderer = callData.pokedRenderer;
 
     const dPos = vtkCoordinate.newInstance();
     dPos.setCoordinateSystemToDisplay();
 
-    dPos.setValue(pos[0], pos[1], 0);
+    dPos.setValue(pos.x, pos.y, 0);
     let worldPos = dPos.getComputedWorldValue(renderer);
 
     const camera = renderer.getActiveCamera();
     const directionOfProjection = camera.getDirectionOfProjection();
 
-    const api = apis[apiIndex];
     const halfSlabThickness = api.getSlabThickness() / 2;
 
-    for (let i = 0; i < worldPos.length; i++) {
-      worldPos[i] += halfSlabThickness * directionOfProjection[i];
-    }
-
     // Add half of the slab thickness to the world position, such that we select
     // The center of the slice.
 
-    if (apis === undefined || apiIndex === undefined) {
-      console.error(
-        'apis and apiIndex must be set on the vtkInteractorStyleMPRCrosshairs.'
-      );
+    for (let i = 0; i < worldPos.length; i++) {
+      worldPos[i] += halfSlabThickness * directionOfProjection[i];
     }
 
-    // Set camera focal point to world coordinate for linked views
-    apis.forEach((api, viewportIndex) => {
-      if (viewportIndex !== apiIndex) {
-        // We are basically doing the same as getSlice but with the world coordinate
-        // that we want to jump to instead of the camera focal point.
-        // I would rather do the camera adjustment directly but I keep
-        // doing it wrong and so this is good enough for now.
-        const renderWindow = api.genericRenderWindow.getRenderWindow();
-
-        const istyle = renderWindow.getInteractor().getInteractorStyle();
-        const sliceNormal = istyle.getSliceNormal();
-        const transform = vtkMatrixBuilder
-          .buildFromDegree()
-          .identity()
-          .rotateFromDirections(sliceNormal, [1, 0, 0]);
-
-        const mutatedWorldPos = worldPos.slice();
-        transform.apply(mutatedWorldPos);
-        const slice = mutatedWorldPos[0];
-
-        istyle.setSlice(slice);
-
-        renderWindow.render();
-      }
-
-      const renderer = api.genericRenderWindow.getRenderer();
-      const wPos = vtkCoordinate.newInstance();
-      wPos.setCoordinateSystemToWorld();
-      wPos.setValue(worldPos);
-
-      const displayPosition = wPos.getComputedDisplayValue(renderer);
-      const { svgWidgetManager } = api;
-      api.svgWidgets.crosshairsWidget.setPoint(
-        displayPosition[0],
-        displayPosition[1]
-      );
-      svgWidgetManager.render();
-    });
+    api.svgWidgets.crosshairsWidget.moveCrosshairs(worldPos, apis, apiIndex);
 
     publicAPI.invokeInteractionEvent({ type: 'InteractionEvent' });
   }
@@ -125,13 +82,6 @@ function vtkInteractorStyleMPRCrosshairs(publicAPI, model) {
         break;
     }
   };
-
-  publicAPI.setApis = apis => {
-    model.apis = apis;
-  };
-  publicAPI.setApiIndex = apiIndex => {
-    model.apiIndex = apiIndex;
-  };
 }
 
 // ----------------------------------------------------------------------------
@@ -148,7 +98,7 @@ export function extend(publicAPI, model, initialValues = {}) {
   // Inheritance
   vtkInteractorStyleMPRSlice.extend(publicAPI, model, initialValues);
 
-  macro.setGet(publicAPI, model, ['callback']);
+  macro.setGet(publicAPI, model, ['callback', 'apis', 'apiIndex', 'onScroll']);
 
   // Object specific methods
   vtkInteractorStyleMPRCrosshairs(publicAPI, model);