fix: Fix rotation by applying in an iterative rather than additive fashion.

examples/VTKMPRRotateExample.js

@@ -355,7 +355,7 @@ class VTKMPRRotateExample extends Component {
 
       const viewport = istyle.getViewport();
 
-      viewport.setInitialOrientation(
+      viewport.setOrientation(
         volumeData[viewportIndex].slicePlaneNormal,
         volumeData[viewportIndex].sliceViewUp
       );
@@ -367,15 +367,14 @@ class VTKMPRRotateExample extends Component {
         .addEventListener(EVENTS.VIEWPORT_ROTATED, args => {
           const rotation = this.state.rotation;
 
-          if (
-            rotation[viewportIndex].x === args.detail.horizontalRotation &&
-            rotation[viewportIndex].y === args.detail.verticalRotation
-          ) {
+          if (args.detail.dThetaX === 0 && args.detail.dThetaY === 0) {
             return;
           }
 
-          rotation[viewportIndex].x = args.detail.horizontalRotation;
-          rotation[viewportIndex].y = args.detail.verticalRotation;
+          rotation[viewportIndex].x =
+            (rotation[viewportIndex].x + args.detail.dThetaY) % 360;
+          rotation[viewportIndex].y =
+            (rotation[viewportIndex].y + args.detail.dThetaX) % 360;
 
           this.setState({ rotation });
         });
@@ -387,8 +386,6 @@ class VTKMPRRotateExample extends Component {
   };
 
   handleChangeX = (index, event) => {
-    volumeData[index].horizontalRotation = +event.target.value;
-
     const rotation = this.state.rotation;
 
     rotation[index].x = +event.target.value;
@@ -399,8 +396,6 @@ class VTKMPRRotateExample extends Component {
   };
 
   handleChangeY = (index, event) => {
-    volumeData[index].verticalRotation = +event.target.value;
-
     const rotation = this.state.rotation;
 
     rotation[index].y = +event.target.value;
@@ -413,24 +408,22 @@ class VTKMPRRotateExample extends Component {
   updateRotate = index => {
     const api = this.apis[index];
     const renderWindow = api.genericRenderWindow.getRenderWindow();
-
+    const rotation = this.state.rotation;
     const istyle = renderWindow.getInteractor().getInteractorStyle();
+    const viewport = istyle.getViewport();
+    const dThetaY = rotation[index].x - volumeData[index].horizontalRotation;
+    const dThetaX = rotation[index].y - volumeData[index].verticalRotation;
 
-    istyle
-      .getViewport()
-      .rotate(
-        volumeData[index].horizontalRotation,
-        volumeData[index].verticalRotation
-      );
+    viewport.rotate(-dThetaX, -dThetaY);
+
+    volumeData[index].horizontalRotation = rotation[index].x;
+    volumeData[index].verticalRotation = rotation[index].y;
 
     this.apis.orientations[index].updateMarkerOrientation();
 
     renderWindow.render();
   };
 
-  getSliceXRotation = index => {
-    return volumeData[index].horizontalRotation;
-  };
   render() {
     if (!this.state.volumes || !this.state.volumes.length) {
       return <h4>Loading...</h4>;
@@ -441,7 +434,7 @@ class VTKMPRRotateExample extends Component {
     for (let index = 0; index < volumeData.length; index++) {
       columns.push(
         <div key={index.toString()} className="col-xs-12 col-sm-6">
-          <div>
+          {/* <div>
             <input
               className="rotate"
               type="range"
@@ -468,7 +461,7 @@ class VTKMPRRotateExample extends Component {
               }}
             />
             <span>{this.state.rotation[index].y}</span>
-          </div>
+          </div> */}
           <View2D
             volumes={this.state.volumes}
             onCreated={this.storeApi(index)}

src/Custom/VTKMPRViewport.js

@@ -135,7 +135,7 @@ export default class VtkMpr extends Component {
     this.renderer.addVolume(this.labelPipeline.actor);
 
     istyle.setVolumeMapper(this.pipeline.mapper);
-    istyle.setSliceNormal(0, 0, 1);
+    istyle.setSliceNormal([0, 0, 1]);
     const range = istyle.getSliceRange();
     istyle.setSlice((range[0] + range[1]) / 2);
 
@@ -239,7 +239,7 @@ export default class VtkMpr extends Component {
 
     if (prevProps.sliceNormal !== this.props.sliceNormal) {
       const istyle = this.istyle;
-      istyle.setSliceNormal(...this.props.sliceNormal);
+      istyle.setSliceNormal([...this.props.sliceNormal]);
 
       const range = istyle.getSliceRange();
       istyle.setSlice((range[0] + range[1]) / 2);

src/VTKViewport/Manipulators/vtkMouseRangeRotateManipulator.js

@@ -16,11 +16,11 @@ function vtkMouseRangeRotateManipulator(publicAPI, model) {
       -MAX_SAFE_INTEGER,
       MAX_SAFE_INTEGER,
       1,
-      model.viewportData.getHRotation,
-      horizontalRotation => {
-        let hRotation = horizontalRotation % 360;
+      () => 0,
+      dThetaY => {
+        let thetaY = dThetaY % 360;
 
-        model.viewportData.rotate(hRotation, model.viewportData.getVRotation());
+        model.viewportData.rotate(0, thetaY);
 
         // onInteractiveRotationChanged();
       }

src/VTKViewport/ViewportData.js

@@ -14,16 +14,8 @@ function validateNumber(numberValue) {
   throw `Invalid number ${numberValue}`;
 }
 
-function areInitialRotationValues(horizontalRotation, verticalRotation) {
-  return horizontalRotation === 0 && verticalRotation === 0;
-}
-
 function createNewViewportData() {
   return {
-    horizontalRotation: 0,
-    verticalRotation: 0,
-    initialViewUp: [0, 1, 0],
-    initialSliceNormal: [0, 0, 1],
     viewUp: [0, 1, 0],
     sliceNormal: [0, 0, 1],
   };
@@ -46,71 +38,41 @@ export default class {
     return this.eventWindow;
   };
 
-  getHRotation = () => {
-    return this._state.horizontalRotation;
-  };
-
-  getVRotation = () => {
-    return this._state.verticalRotation;
-  };
+  rotate = (dThetaX, dThetaY) => {
+    validateNumber(dThetaX);
+    validateNumber(dThetaY);
 
-  rotate = (horizontalRotation, verticalRotation) => {
-    validateNumber(horizontalRotation);
-    validateNumber(verticalRotation);
-
-    if (
-      !areInitialRotationValues(horizontalRotation, verticalRotation) &&
-      this._state.horizontalRotation === horizontalRotation &&
-      this._state.verticalRotation === verticalRotation
-    ) {
-      return;
-    }
+    let xAxis = [];
+    vec3.cross(xAxis, this._state.viewUp, this._state.sliceNormal);
+    vec3.normalize(xAxis, xAxis);
 
+    let yAxis = this._state.viewUp;
     // rotate around the vector of the cross product of the
     // plane and viewup as the X component
-    const sliceXRot = [];
+
     const sliceNormal = [];
     const sliceViewUp = [];
 
-    vec3.cross(
-      sliceXRot,
-      this._state.initialViewUp,
-      this._state.initialSliceNormal
-    );
-    vec3.normalize(sliceXRot, sliceXRot);
-
     const planeMat = mat4.create();
 
-    // Rotate around the vertical (slice-up) vector
-    mat4.rotate(
-      planeMat,
-      planeMat,
-      degrees2radians(-horizontalRotation),
-      this._state.initialViewUp
-    );
-
-    // Rotate around the horizontal (screen-x) vector
-    mat4.rotate(
-      planeMat,
-      planeMat,
-      degrees2radians(-verticalRotation),
-      sliceXRot
-    );
-
-    vec3.transformMat4(sliceNormal, this._state.initialSliceNormal, planeMat);
-    vec3.transformMat4(sliceViewUp, this._state.initialViewUp, planeMat);
-
-    this._state.horizontalRotation = horizontalRotation;
-    this._state.verticalRotation = verticalRotation;
+    //Rotate around the vertical (slice-up) vector
+    mat4.rotate(planeMat, planeMat, degrees2radians(dThetaY), yAxis);
+
+    //Rotate around the horizontal (screen-x) vector
+    mat4.rotate(planeMat, planeMat, degrees2radians(dThetaX), xAxis);
+
+    vec3.transformMat4(sliceNormal, this._state.sliceNormal, planeMat);
+    vec3.transformMat4(sliceViewUp, this._state.viewUp, planeMat);
+
     this._state.sliceNormal = sliceNormal;
-    this._state.sliceViewUp = sliceViewUp;
+    this._state.viewUp = sliceViewUp;
 
     var event = new CustomEvent(EVENTS.VIEWPORT_ROTATED, {
       detail: {
-        horizontalRotation,
-        verticalRotation,
         sliceNormal,
         sliceViewUp,
+        dThetaX,
+        dThetaY,
       },
       bubbles: true,
       cancelable: true,
@@ -119,32 +81,19 @@ export default class {
     this.eventWindow.dispatchEvent(event);
   };
 
-  getInitialViewUp = () => {
-    return this._state.initialViewUp;
-  };
-
-  getInitialSliceNormal = () => {
-    return this._state.initialSliceNormal;
-  };
-
-  setInitialOrientation = (initialSliceNormal, initialViewUp = [0, 1, 0]) => {
-    this._state.initialSliceNormal = initialSliceNormal;
-    this._state.initialViewUp = initialViewUp;
+  setOrientation = (sliceNormal, viewUp = [0, 1, 0]) => {
+    this._state.sliceNormal = sliceNormal;
+    this._state.viewUp = viewUp;
   };
 
-  getviewUp = () => {
+  getViewUp = () => {
     return this._state.viewUp;
   };
 
-  getsliceNormal = () => {
+  getSliceNormal = () => {
     return this._state.sliceNormal;
   };
 
-  // this.setOrientation = (viewUp, sliceNormal) => {
-  //   state.viewUp = viewUp;
-  //   state.sliceNormal = sliceNormal;
-  // };
-
   getReadOnlyViewPort = () => {
     const readOnlyState = JSON.parse(JSON.stringify(this._state));
 

src/VTKViewport/vtkInteractorStyleMPRRotate.js

@@ -3,6 +3,7 @@ import vtkInteractorStyleMPRSlice from './vtkInteractorStyleMPRSlice.js';
 import Constants from 'vtk.js/Sources/Rendering/Core/InteractorStyle/Constants';
 import { vec3, mat4 } from 'gl-matrix';
 import { degrees2radians } from '../lib/math/angles.js';
+import ViewportData from './ViewportData.js';
 
 const { States } = Constants;
 const MAX_SAFE_INTEGER = 2147483647;
@@ -43,16 +44,11 @@ function vtkInteractorStyleMPRRotate(publicAPI, model) {
     const size = rwi.getView().getViewportSize(renderer);
     const xSensitivity = 100.0 / size[0];
     const ySensitivity = 100.0 / size[1];
-    const dx = Math.round((pos[0] - model.rotateStartPos[0]) * xSensitivity);
-    const dy = Math.round((pos[1] - model.rotateStartPos[1]) * ySensitivity);
+    const dThetaX = -((pos[1] - model.rotateStartPos[1]) * ySensitivity);
+    const dThetaY = -((pos[0] - model.rotateStartPos[0]) * xSensitivity);
     const viewport = publicAPI.getViewport();
-    let horizontalRotation = viewport.getHRotation() + dx;
-    let verticalRotation = viewport.getVRotation() + dy;
 
-    horizontalRotation %= 360;
-    verticalRotation %= 360;
-
-    viewport.rotate(horizontalRotation, verticalRotation);
+    viewport.rotate(dThetaX, dThetaY);
 
     model.rotateStartPos[0] = Math.round(pos[0]);
     model.rotateStartPos[1] = Math.round(pos[1]);

src/VTKViewport/vtkInteractorStyleMPRSlice.js

@@ -6,7 +6,7 @@ import vtkMouseCameraTrackballRotateManipulator from 'vtk.js/Sources/Interaction
 import vtkMouseCameraTrackballPanManipulator from 'vtk.js/Sources/Interaction/Manipulators/MouseCameraTrackballPanManipulator';
 import vtkMouseCameraTrackballZoomManipulator from 'vtk.js/Sources/Interaction/Manipulators/MouseCameraTrackballZoomManipulator';
 import vtkMouseRangeManipulator from 'vtk.js/Sources/Interaction/Manipulators/MouseRangeManipulator';
-import vtkMouseRangeRotateManipulator from './Manipulators/vtkMouseRangeRotateManipulator';
+//import vtkMouseRangeRotateManipulator from './Manipulators/vtkMouseRangeRotateManipulator';
 import ViewportData from './ViewportData';
 import EVENTS from '../events';
 
@@ -226,8 +226,8 @@ function vtkInteractorStyleMPRSlice(publicAPI, model) {
     }
 
     if (viewportData) {
-      setSliceNormalInternal(viewportData.getInitialSliceNormal());
-      setViewUpInternal(viewportData.getInitialViewUp());
+      setSliceNormalInternal(viewportData.getSliceNormal());
+      setViewUpInternal(viewportData.getViewUp());
 
       viewportData
         .getEventWindow()
@@ -305,8 +305,8 @@ function vtkInteractorStyleMPRSlice(publicAPI, model) {
         const viewportData = publicAPI.getViewport();
 
         if (viewportData) {
-          setSliceNormalInternal(viewportData.getInitialSliceNormal());
-          setViewUpInternal(viewportData.getInitialViewUp());
+          setSliceNormalInternal(viewportData.getSliceNormal());
+          setViewUpInternal(viewportData.getViewUp());
         }
 
         updateScrollManipulator();
@@ -439,10 +439,7 @@ function vtkInteractorStyleMPRSlice(publicAPI, model) {
     const viewportData = publicAPI.getViewport();
 
     if (viewportData) {
-      viewportData.setInitialOrientation(
-        normal,
-        viewportData.getInitialViewUp()
-      );
+      viewportData.setOrientation(normal, viewportData.getViewUp());
     }
 
     setSliceNormalInternal(normal);
@@ -463,10 +460,7 @@ function vtkInteractorStyleMPRSlice(publicAPI, model) {
     const viewportData = publicAPI.getViewport();
 
     if (viewportData) {
-      viewportData.setInitialOrientation(
-        viewportData.getInitialSliceNormal(),
-        viewUp
-      );
+      viewportData.setOrientation(viewportData.getSliceNormal(), viewUp);
     }
 
     setViewUpInternal(viewUp);