feat: added custom wrapper for manual calcuation of movementX and movementY in inputs (#8057)

Author: kpal81xd

src/extras/input/sources/dual-gesture-source.js

@@ -1,5 +1,6 @@
 import { DOUBLE_TAP_THRESHOLD, DOUBLE_TAP_VARIANCE } from '../constants.js';
 import { InputSource } from '../input.js';
+import { movementState } from '../utils.js';
 import { VirtualJoystick } from './virtual-joystick.js';
 
 /**
@@ -29,6 +30,12 @@ const endsWith = (str, suffix) => str.indexOf(suffix, str.length - suffix.length
  * @augments {InputSource<DualGestureSourceDeltas>}
  */
 class DualGestureSource extends InputSource {
+    /**
+     * @type {ReturnType<typeof movementState>}
+     * @private
+     */
+    _movementState = movementState();
+
     /**
      * @type {`${'joystick' | 'touch'}-${'joystick' | 'touch'}`}
      * @private
@@ -116,6 +123,7 @@ class DualGestureSource extends InputSource {
      */
     _onPointerDown(event) {
         const { pointerType, pointerId, clientX, clientY } = event;
+        this._movementState.down(event);
 
         if (pointerType !== 'touch') {
             return;
@@ -151,7 +159,8 @@ class DualGestureSource extends InputSource {
      * @private
      */
     _onPointerMove(event) {
-        const { pointerType, pointerId, target, clientX, clientY, movementX, movementY } = event;
+        const { pointerType, pointerId, target, clientX, clientY } = event;
+        const [movementX, movementY] = this._movementState.move(event);
 
         if (pointerType !== 'touch') {
             return;
@@ -188,6 +197,7 @@ class DualGestureSource extends InputSource {
      */
     _onPointerUp(event) {
         const { pointerType, pointerId } = event;
+        this._movementState.up(event);
 
         if (pointerType !== 'touch') {
             return;

src/extras/input/sources/keyboard-mouse-source.js

@@ -1,4 +1,5 @@
 import { InputSource } from '../input.js';
+import { movementState } from '../utils.js';
 
 const PASSIVE = /** @type {AddEventListenerOptions & EventListenerOptions} */ ({ passive: false });
 const KEY_CODES = /** @type {const} */ ({
@@ -64,6 +65,12 @@ const array = Array(KEY_COUNT).fill(0);
  * @augments {InputSource<KeyboardMouseSourceDeltas>}
  */
 class KeyboardMouseSource extends InputSource {
+    /**
+     * @type {ReturnType<typeof movementState>}
+     * @private
+     */
+    _movementState = movementState();
+
     /**
      * The key codes for the keyboard keys.
      *
@@ -170,6 +177,8 @@ class KeyboardMouseSource extends InputSource {
      * @private
      */
     _onPointerDown(event) {
+        this._movementState.down(event);
+
         if (event.pointerType !== 'mouse') {
             return;
         }
@@ -196,6 +205,8 @@ class KeyboardMouseSource extends InputSource {
      * @private
      */
     _onPointerMove(event) {
+        const [movementX, movementY] = this._movementState.move(event);
+
         if (event.pointerType !== 'mouse') {
             return;
         }
@@ -211,14 +222,17 @@ class KeyboardMouseSource extends InputSource {
                 return;
             }
         }
-        this.deltas.mouse.append([event.movementX, event.movementY]);
+
+        this.deltas.mouse.append([movementX, movementY]);
     }
 
     /**
      * @param {PointerEvent} event - The pointer event.
      * @private
      */
     _onPointerUp(event) {
+        this._movementState.up(event);
+
         if (event.pointerType !== 'mouse') {
             return;
         }

src/extras/input/sources/multi-touch-source.js

@@ -1,5 +1,6 @@
 import { Vec2 } from '../../../core/math/vec2.js';
 import { InputSource } from '../input.js';
+import { movementState } from '../utils.js';
 
 const tmpVa = new Vec2();
 
@@ -16,6 +17,12 @@ const tmpVa = new Vec2();
  * @augments {InputSource<MultiTouchSourceDeltas>}
  */
 class MultiTouchSource extends InputSource {
+    /**
+     * @type {ReturnType<typeof movementState>}
+     * @private
+     */
+    _movementState = movementState();
+
     /**
      * @type {Map<number, PointerEvent>}
      * @private
@@ -53,6 +60,7 @@ class MultiTouchSource extends InputSource {
      */
     _onPointerDown(event) {
         const { pointerId, pointerType } = event;
+        this._movementState.down(event);
 
         if (pointerType !== 'touch') {
             return;
@@ -76,7 +84,8 @@ class MultiTouchSource extends InputSource {
      * @private
      */
     _onPointerMove(event) {
-        const { pointerType, target, pointerId, movementX, movementY } = event;
+        const { pointerType, target, pointerId } = event;
+        const [movementX, movementY] = this._movementState.move(event);
 
         if (pointerType !== 'touch') {
             return;
@@ -112,6 +121,7 @@ class MultiTouchSource extends InputSource {
      */
     _onPointerUp(event) {
         const { pointerType, pointerId } = event;
+        this._movementState.up(event);
 
         if (pointerType !== 'touch') {
             return;

src/extras/input/sources/single-gesture-source.js

@@ -1,5 +1,6 @@
 import { DOUBLE_TAP_THRESHOLD, DOUBLE_TAP_VARIANCE } from '../constants.js';
 import { InputSource } from '../input.js';
+import { movementState } from '../utils.js';
 import { VirtualJoystick } from './virtual-joystick.js';
 
 /**
@@ -14,6 +15,12 @@ import { VirtualJoystick } from './virtual-joystick.js';
  * @augments {InputSource<SingleGestureSourceDeltas>}
  */
 class SingleGestureSource extends InputSource {
+    /**
+     * @type {ReturnType<typeof movementState>}
+     * @private
+     */
+    _movementState = movementState();
+
     /**
      * @type {'joystick' | 'touch'}
      * @private
@@ -88,6 +95,7 @@ class SingleGestureSource extends InputSource {
      */
     _onPointerDown(event) {
         const { pointerType, pointerId, clientX, clientY } = event;
+        this._movementState.down(event);
 
         if (pointerType !== 'touch') {
             return;
@@ -118,7 +126,8 @@ class SingleGestureSource extends InputSource {
      * @private
      */
     _onPointerMove(event) {
-        const { pointerType, pointerId, target, clientX, clientY, movementX, movementY } = event;
+        const { pointerType, pointerId, target, clientX, clientY } = event;
+        const [movementX, movementY] = this._movementState.move(event);
 
         if (pointerType !== 'touch') {
             return;
@@ -146,6 +155,7 @@ class SingleGestureSource extends InputSource {
      */
     _onPointerUp(event) {
         const { pointerType, pointerId } = event;
+        this._movementState.up(event);
 
         if (pointerType !== 'touch') {
             return;

src/extras/input/utils.js

@@ -0,0 +1,23 @@
+// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX
+export const movementState = () => {
+    const state = new Map();
+    return {
+        down: (/** @type {PointerEvent} */ event) => {
+            state.set(event.pointerId, [event.screenX, event.screenY]);
+        },
+        move: (/** @type {PointerEvent} */ event) => {
+            if (!state.has(event.pointerId)) {
+                return [0, 0];
+            }
+            const prev = state.get(event.pointerId);
+            const mvX = event.screenX - prev[0];
+            const mvY = event.screenY - prev[1];
+            prev[0] = event.screenX;
+            prev[1] = event.screenY;
+            return [mvX, mvY];
+        },
+        up: (/** @type {PointerEvent} */ event) => {
+            state.delete(event.pointerId);
+        }
+    };
+};