feat(InteractorStyleManipulator): update center of rotation on pan

This enhances pan then rotate interaction.
After panning, move the center of rotation the
same vector that the camera position moved.

Before, if the user panned the camera, zoomed in,
then rotated, they would rotate around a point
that was not in the center of the camera.

Author: PaulHax

Sources/Interaction/Style/InteractorStyleManipulator/index.js

@@ -1,6 +1,7 @@
 import macro from 'vtk.js/Sources/macros';
 import { MouseButton } from 'vtk.js/Sources/Rendering/Core/RenderWindowInteractor/Constants';
 import vtkInteractorStyle from 'vtk.js/Sources/Rendering/Core/InteractorStyle';
+import { mat4, vec3, vec4 } from 'gl-matrix';
 
 const { vtkDebugMacro } = macro;
 const { States } = vtkInteractorStyle;
@@ -134,6 +135,47 @@ function dollyByFactor(interactor, renderer, factor) {
   }
 }
 
+function getCameraMatrix(renderer) {
+  const cam = renderer.getActiveCamera();
+  if (cam) {
+    const M = mat4.create();
+    mat4.copy(M, cam.getViewMatrix());
+    return M;
+  }
+  return null;
+}
+
+function computeNewCenterOfRotation(beforeM, renderer, oldCenterOfRotation) {
+  const cam = renderer.getActiveCamera();
+  if (!cam || !beforeM) {
+    return oldCenterOfRotation;
+  }
+
+  // The view matrix from vtk.js is row-major, but gl-matrix expects column-major.
+  // We need to transpose them before use.
+  const beforeMatrix = mat4.create();
+  mat4.transpose(beforeMatrix, beforeM);
+
+  const afterMatrixRowMajor = cam.getViewMatrix();
+  const afterMatrix = mat4.create();
+  mat4.transpose(afterMatrix, afterMatrixRowMajor);
+
+  // Now we can proceed with column-major matrices.
+  const invAfterM = mat4.create();
+  mat4.invert(invAfterM, afterMatrix);
+
+  const deltaM = mat4.create();
+  // deltaM = inv(afterM) * beforeM
+  mat4.multiply(deltaM, invAfterM, beforeMatrix);
+
+  if (!mat4.equals(deltaM, mat4.identity(mat4.create()))) {
+    const center = vec4.fromValues(...oldCenterOfRotation, 1);
+    vec4.transformMat4(center, center, deltaM);
+    return vec3.fromValues(center[0], center[1], center[2]);
+  }
+  return oldCenterOfRotation;
+}
+
 // ----------------------------------------------------------------------------
 // Static API
 // ----------------------------------------------------------------------------
@@ -504,11 +546,25 @@ function vtkInteractorStyleManipulator(publicAPI, model) {
   publicAPI.handleMouseMove = (callData) => {
     model.cachedMousePosition = callData.position;
     if (model.currentManipulator && model.currentManipulator.onMouseMove) {
+      const renderer = model.getRenderer(callData);
+      const beforeM = getCameraMatrix(renderer);
+
       model.currentManipulator.onMouseMove(
         model._interactor,
-        model.getRenderer(callData),
+        renderer,
         callData.position
       );
+
+      const newCenter = computeNewCenterOfRotation(
+        beforeM,
+        renderer,
+        model.centerOfRotation
+      );
+
+      if (!vec3.equals(model.centerOfRotation, newCenter)) {
+        publicAPI.setCenterOfRotation(newCenter);
+      }
+
       publicAPI.invokeInteractionEvent(INTERACTION_EVENT);
     }
   };
@@ -672,6 +728,9 @@ function vtkInteractorStyleManipulator(publicAPI, model) {
 
   //----------------------------------------------------------------------------
   publicAPI.handlePan = (callData) => {
+    const renderer = model.getRenderer(callData);
+    const beforeM = getCameraMatrix(renderer);
+
     let count = model.gestureManipulators.length;
     let actionCount = 0;
     while (count--) {
@@ -686,6 +745,15 @@ function vtkInteractorStyleManipulator(publicAPI, model) {
       }
     }
     if (actionCount) {
+      const newCenter = computeNewCenterOfRotation(
+        beforeM,
+        renderer,
+        model.centerOfRotation
+      );
+
+      if (!vec3.equals(model.centerOfRotation, newCenter)) {
+        publicAPI.setCenterOfRotation(newCenter);
+      }
       publicAPI.invokeInteractionEvent(INTERACTION_EVENT);
     }
   };