feat: 🎸 Mouse wheel scrollable ref lines + pan fix (#116)

* feat: 🎸 Mouse wheel scrollable ref lines + pan fix
* Fix placement of color indicator
* Add setGet for disable scroll

Author: JamesAPetts

examples/VTKRotatableCrosshairsExample.js

@@ -207,6 +207,17 @@ class VTKRotatableCrosshairsExample extends Component {
     this.setState({ displayCrosshairs: shouldDisplayCrosshairs });
   };
 
+  resetCrosshairs = () => {
+    const apis = this.apis;
+
+    apis.forEach(api => {
+      api.resetOrientation();
+    });
+
+    // Reset the crosshairs
+    apis[0].svgWidgets.rotatableCrosshairsWidget.resetCrosshairs(apis, 0);
+  };
+
   render() {
     if (!this.state.volumes || !this.state.volumes.length) {
       return <h4>Loading...</h4>;
@@ -241,6 +252,7 @@ class VTKRotatableCrosshairsExample extends Component {
                 ? 'Switch To WL/Zoom/Pan/Scroll'
                 : 'Switch To Crosshairs'}
             </button>
+            <button onClick={this.resetCrosshairs}>reset crosshairs</button>
           </div>
         </div>
         <div className="row">

src/VTKViewport/View2D.js

@@ -217,6 +217,7 @@ export default class View2D extends Component {
     const boundUpdateVOI = this.updateVOI.bind(this);
     const boundGetOrienation = this.getOrientation.bind(this);
     const boundSetOrientation = this.setOrientation.bind(this);
+    const boundResetOrientation = this.resetOrientation.bind(this);
     const boundGetViewUp = this.getViewUp.bind(this);
     const boundGetSliceNormal = this.getSliceNormal.bind(this);
     const boundSetInteractorStyle = this.setInteractorStyle.bind(this);
@@ -261,6 +262,7 @@ export default class View2D extends Component {
         updateVOI: boundUpdateVOI,
         getOrientation: boundGetOrienation,
         setOrientation: boundSetOrientation,
+        resetOrientation: boundResetOrientation,
         getViewUp: boundGetViewUp,
         getSliceNormal: boundGetSliceNormal,
         setInteractorStyle: boundSetInteractorStyle,
@@ -307,6 +309,23 @@ export default class View2D extends Component {
     currentIStyle.setSliceOrientation(sliceNormal, viewUp);
   }
 
+  resetOrientation() {
+    const orientation = this.props.orientation || {
+      sliceNormal: [0, 0, 1],
+      viewUp: [0, -1, 0],
+    };
+
+    // Reset orientation.
+    this.setOrientation(orientation.sliceNormal, orientation.viewUp);
+
+    // Reset slice.
+    const renderWindow = this.genericRenderWindow.getRenderWindow();
+    const currentIStyle = renderWindow.getInteractor().getInteractorStyle();
+    const range = currentIStyle.getSliceRange();
+
+    currentIStyle.setSlice((range[0] + range[1]) / 2);
+  }
+
   getApiProperty(propertyName) {
     return this.apiProperties[propertyName];
   }

src/VTKViewport/vtkInteractorStyleMPRSlice.js

@@ -74,7 +74,7 @@ function vtkInteractorStyleMPRSlice(publicAPI, model) {
     sliceCenter: [],
   };
 
-  function updateScrollManipulator() {
+  publicAPI.updateScrollManipulator = () => {
     const range = publicAPI.getSliceRange();
     model.scrollManipulator.removeScrollListener();
     // The Scroll listener has min, max, step, and getValue setValue as params.
@@ -86,15 +86,15 @@ function vtkInteractorStyleMPRSlice(publicAPI, model) {
       publicAPI.getSlice,
       publicAPI.scrollToSlice
     );
-  }
+  };
 
   function setManipulators() {
     publicAPI.removeAllMouseManipulators();
     publicAPI.addMouseManipulator(model.trackballManipulator);
     publicAPI.addMouseManipulator(model.panManipulator);
     publicAPI.addMouseManipulator(model.zoomManipulator);
     publicAPI.addMouseManipulator(model.scrollManipulator);
-    updateScrollManipulator();
+    publicAPI.updateScrollManipulator();
   }
 
   function isCameraViewInitialized(camera) {
@@ -219,7 +219,7 @@ function vtkInteractorStyleMPRSlice(publicAPI, model) {
       const camera = renderer.getActiveCamera();
 
       cameraSub = camera.onModified(() => {
-        updateScrollManipulator();
+        publicAPI.updateScrollManipulator();
         publicAPI.modified();
       });
 
@@ -238,7 +238,7 @@ function vtkInteractorStyleMPRSlice(publicAPI, model) {
   // TODO -> When we want a modular framework we'll have to rethink all this.
   // TODO -> We need to think of a more generic way to do this for all widget types eventually.
   // TODO -> We certainly need to be able to register widget types on instantiation.
-  function handleButtonPress() {
+  function handleButtonPress(callData) {
     const { apis, apiIndex } = model;
 
     if (apis && apis[apiIndex] && apis[apiIndex].type === 'VIEW2D') {
@@ -250,11 +250,33 @@ function vtkInteractorStyleMPRSlice(publicAPI, model) {
         api.svgWidgets.crosshairsWidget.updateCrosshairForApi(api);
       }
       if (api.svgWidgets.rotatableCrosshairsWidget) {
-        api.svgWidgets.rotatableCrosshairsWidget.updateCrosshairForApi(api);
+        updateRotatableCrosshairs(callData);
       }
     }
   }
 
+  function updateRotatableCrosshairs(callData) {
+    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);
+  }
+
   publicAPI.handleMiddleButtonPress = macro.chain(
     publicAPI.handleMiddleButtonPress,
     handleButtonPress
@@ -280,12 +302,12 @@ function vtkInteractorStyleMPRSlice(publicAPI, model) {
         api.svgWidgets.crosshairsWidget.updateCrosshairForApi(api);
       }
       if (api.svgWidgets.rotatableCrosshairsWidget) {
-        api.svgWidgets.rotatableCrosshairsWidget.updateCrosshairForApi(api);
+        updateRotatableCrosshairs(callData);
       }
     }
   };
 
-  function handleButtonRelease(superButtonRelease) {
+  function handleButtonRelease(superButtonRelease, callData) {
     if (model.state === States.IS_PAN) {
       publicAPI.endPan();
       const { apis, apiIndex } = model;
@@ -295,7 +317,7 @@ function vtkInteractorStyleMPRSlice(publicAPI, model) {
         api.svgWidgets.crosshairsWidget.updateCrosshairForApi(api);
       }
       if (api.svgWidgets.rotatableCrosshairsWidget) {
-        api.svgWidgets.rotatableCrosshairsWidget.updateCrosshairForApi(api);
+        updateRotatableCrosshairs(callData);
       }
     }
 
@@ -304,13 +326,13 @@ function vtkInteractorStyleMPRSlice(publicAPI, model) {
 
   publicAPI.superHandleMiddleButtonRelease =
     publicAPI.handleMiddleButtonRelease;
-  publicAPI.handleMiddleButtonRelease = () => {
-    handleButtonRelease(publicAPI.superHandleMiddleButtonRelease);
+  publicAPI.handleMiddleButtonRelease = callData => {
+    handleButtonRelease(publicAPI.superHandleMiddleButtonRelease, callData);
   };
 
   publicAPI.superHandleRightButtonRelease = publicAPI.handleRightButtonRelease;
-  publicAPI.handleRightButtonRelease = () => {
-    handleButtonRelease(publicAPI.superHandleRightButtonRelease);
+  publicAPI.handleRightButtonRelease = callData => {
+    handleButtonRelease(publicAPI.superHandleRightButtonRelease, callData);
   };
 
   publicAPI.setVolumeActor = actor => {
@@ -328,7 +350,7 @@ function vtkInteractorStyleMPRSlice(publicAPI, model) {
         setViewUpInternal(viewportData.getCurrentViewUp());
       }
 
-      updateScrollManipulator();
+      publicAPI.updateScrollManipulator();
       // NOTE: Disabling this because it makes it more difficult to switch
       // interactor styles. Need to find a better way to do this!
       //publicAPI.setSliceNormal(...publicAPI.getSliceNormal());