feat(RenderWindowInteractor): commit mouse movement data in pointerlock

Modify RenderWindowInteractor to return mouse movement data in screen event position
Maintain InteractorStyleManipulator manipulator during pointerLock
Update MouseCameraTrackballFirstPersonManipulator

Author: Jo-Byr

Sources/Interaction/Manipulators/MouseCameraTrackballFirstPersonManipulator/index.js

@@ -15,73 +15,30 @@ function vtkMouseCameraTrackballFirstPersonManipulator(publicAPI, model) {
   const internal = {
     interactor: null,
     renderer: null,
-    previousPosition: null,
   };
 
   //--------------------------------------------------------------------------
 
   publicAPI.onButtonDown = (interactor, renderer, position) => {
-    internal.previousPosition = position;
-
     if (model.usePointerLock && !interactor.isPointerLocked()) {
       Object.assign(internal, { interactor, renderer });
       interactor.requestPointerLock();
-      publicAPI.startPointerLockInteraction();
     }
   };
 
   //--------------------------------------------------------------------------
 
-  publicAPI.startPointerLockInteraction = () => {
-    const { interactor } = internal;
-
-    // TODO: at some point, this should perhaps be done in
-    // RenderWindowInteractor instead of here.
-    // We need to hook into mousemove directly for two reasons:
-    // 1. We need to keep receiving mouse move events after the mouse button
-    //    is released. This is currently not possible with
-    //    vtkInteractorStyleManipulator.
-    // 2. Since the mouse is stationary in pointer lock mode, we need the
-    //    event.movementX and event.movementY info, which are not currently
-    //    passed via interactor.onMouseMove.
-    document.addEventListener('mousemove', publicAPI.onPointerLockMove);
-
-    let subscription = null;
-    const endInteraction = () => {
-      document.removeEventListener('mousemove', publicAPI.onPointerLockMove);
-      subscription.unsubscribe();
-    };
-    subscription = interactor.onEndPointerLock(endInteraction);
-  };
-
-  //--------------------------------------------------------------------------
-
-  publicAPI.onPointerLockMove = (e) => {
-    const sensitivity = model.sensitivity;
-    const yaw = -1 * e.movementX * sensitivity;
-    const pitch = -1 * e.movementY * sensitivity;
-
-    publicAPI.moveCamera(yaw, pitch);
-  };
-
-  //--------------------------------------------------------------------------
-
   publicAPI.onMouseMove = (interactor, renderer, position) => {
-    // This is currently only being called for non pointer lock mode
     if (!position) {
       return;
     }
 
-    const { previousPosition } = internal;
-
     const sensitivity = model.sensitivity;
-    const yaw = (previousPosition.x - position.x) * sensitivity;
-    const pitch = (position.y - previousPosition.y) * sensitivity;
+    const yaw = -position.movementX * sensitivity;
+    const pitch = -position.movementY * sensitivity;
 
     Object.assign(internal, { interactor, renderer });
     publicAPI.moveCamera(yaw, pitch);
-
-    internal.previousPosition = position;
   };
 
   //--------------------------------------------------------------------------

Sources/Interaction/Style/InteractorStyleManipulator/index.d.ts

@@ -6,6 +6,7 @@ import vtkInteractorStyle from '../../../Rendering/Core/InteractorStyle';
 import {
   Device,
   Input,
+  MouseButton,
 } from '../../../Rendering/Core/RenderWindowInteractor/Constants';
 import { Nullable, Vector3 } from '../../../types';
 
@@ -120,7 +121,7 @@ export interface vtkInteractorStyleManipulator extends vtkInteractorStyle {
    * @param alt alt enabled
    */
   findMouseManipulator(
-    button: number,
+    button: MouseButton,
     shift: boolean,
     scroll: boolean,
     alt: boolean
@@ -285,13 +286,13 @@ export interface vtkInteractorStyleManipulator extends vtkInteractorStyle {
    * @param button which button
    * @param callData event data
    */
-  onButtonDown(button: number, callData: unknown): void;
+  onButtonDown(button: MouseButton, callData: unknown): void;
 
   /**
    * Handles a button up event.
    * @param button which button
    */
-  onButtonUp(button: number): void;
+  onButtonUp(button: MouseButton): void;
 
   /**
    * Sets the rotation factor.

Sources/Interaction/Style/InteractorStyleManipulator/index.js

@@ -1,4 +1,5 @@
 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';
 
 const { vtkDebugMacro } = macro;
@@ -268,19 +269,19 @@ function vtkInteractorStyleManipulator(publicAPI, model) {
   //-------------------------------------------------------------------------
   publicAPI.handleLeftButtonPress = (callData) => {
     model.previousPosition = callData.position;
-    publicAPI.onButtonDown(1, callData);
+    publicAPI.onButtonDown(MouseButton.LeftButton, callData);
   };
 
   //-------------------------------------------------------------------------
   publicAPI.handleMiddleButtonPress = (callData) => {
     model.previousPosition = callData.position;
-    publicAPI.onButtonDown(2, callData);
+    publicAPI.onButtonDown(MouseButton.MiddleButton, callData);
   };
 
   //-------------------------------------------------------------------------
   publicAPI.handleRightButtonPress = (callData) => {
     model.previousPosition = callData.position;
-    publicAPI.onButtonDown(3, callData);
+    publicAPI.onButtonDown(MouseButton.RightButton, callData);
   };
 
   //-------------------------------------------------------------------------
@@ -397,17 +398,17 @@ function vtkInteractorStyleManipulator(publicAPI, model) {
 
   //-------------------------------------------------------------------------
   publicAPI.handleLeftButtonRelease = () => {
-    publicAPI.onButtonUp(1);
+    publicAPI.onButtonUp(MouseButton.LeftButton);
   };
 
   //-------------------------------------------------------------------------
   publicAPI.handleMiddleButtonRelease = () => {
-    publicAPI.onButtonUp(2);
+    publicAPI.onButtonUp(MouseButton.MiddleButton);
   };
 
   //-------------------------------------------------------------------------
   publicAPI.handleRightButtonRelease = () => {
-    publicAPI.onButtonUp(3);
+    publicAPI.onButtonUp(MouseButton.RightButton);
   };
 
   //-------------------------------------------------------------------------
@@ -421,12 +422,18 @@ function vtkInteractorStyleManipulator(publicAPI, model) {
     ) {
       model.currentManipulator.onButtonUp(model._interactor);
       model.currentManipulator.endInteraction();
-      model.currentManipulator = null;
-      model._interactor.cancelAnimation(publicAPI.onButtonDown);
+      if (!model._interactor.isPointerLocked()) {
+        model.currentManipulator = null;
+      }
       publicAPI.invokeEndInteractionEvent(END_INTERACTION_EVENT);
     }
   };
 
+  //-------------------------------------------------------------------------
+  publicAPI.handleEndPointerLock = () => {
+    model.currentManipulator = null;
+  };
+
   //-------------------------------------------------------------------------
   publicAPI.handleStartMouseWheel = (callData) => {
     // Must not be processing a wheel interaction to start another.

Sources/Rendering/Core/RenderWindowInteractor/Constants.d.ts

@@ -23,9 +23,16 @@ export declare enum Axis {
   ThumbstickY = 4,
 }
 
+export declare enum MouseButton {
+  LeftButton = 1,
+  MiddleButton = 2,
+  RightButton = 3,
+}
+
 declare const _default: {
   Device: typeof Device;
   Input: typeof Input;
   Axis: typeof Axis;
+  MouseButton: typeof MouseButton;
 };
 export default _default;

Sources/Rendering/Core/RenderWindowInteractor/Constants.js

@@ -23,8 +23,15 @@ export const Axis = {
   ThumbstickY: 4,
 };
 
+export const MouseButton = {
+  LeftButton: 1,
+  MiddleButton: 2,
+  RightButton: 3,
+};
+
 export default {
   Device,
   Input,
   Axis,
+  MouseButton,
 };

Sources/Rendering/Core/RenderWindowInteractor/index.d.ts

@@ -1,7 +1,7 @@
 import { vtkObject, vtkSubscription } from '../../../interfaces';
 import { Nullable } from '../../../types';
 import vtkRenderer from '../Renderer';
-import { Axis, Device, Input } from './Constants';
+import { Axis, Device, Input, MouseButton } from './Constants';
 
 declare enum handledEvents {
   'StartAnimation',
@@ -1397,5 +1397,6 @@ export declare const vtkRenderWindowInteractor: {
   Device: typeof Device;
   Input: typeof Input;
   Axis: typeof Axis;
+  MouseButton: typeof MouseButton;
 };
 export default vtkRenderWindowInteractor;

Sources/Rendering/Core/RenderWindowInteractor/index.js

@@ -184,6 +184,8 @@ function vtkRenderWindowInteractor(publicAPI, model) {
       x: scaleX * (source.clientX - bounds.left),
       y: scaleY * (bounds.height - source.clientY + bounds.top),
       z: 0,
+      movementX: scaleX * source.movementX,
+      movementY: scaleY * source.movementY,
     };
 
     // if multitouch, do not update the current renderer