DeviceInputSystem: Pull browser specific code into WebDeviceInputSyst…

…em (#12865) * WIP * Fixed ref to srcElement * Remove commented code * Prettier * Changed wheel event check to inputIndex check * PR feedback * formatting * PR Feedback * prettier
BabylonJS · Sep 6, 2022 · 505c0b2 · 505c0b2
1 parent a76bcd1
commit 505c0b2
Show file tree

Hide file tree

Showing 11 changed files with 55 additions and 58 deletions.
diff --git a/packages/dev/core/src/Cameras/Inputs/BaseCameraMouseWheelInput.ts b/packages/dev/core/src/Cameras/Inputs/BaseCameraMouseWheelInput.ts
@@ -69,26 +69,9 @@ export abstract class BaseCameraMouseWheelInput implements ICameraInput<Camera>
 
             const platformScale = event.deltaMode === EventConstants.DOM_DELTA_LINE ? this._ffMultiplier : 1; // If this happens to be set to DOM_DELTA_LINE, adjust accordingly
 
-            if (event.deltaY !== undefined) {
-                // Most recent browsers versions have delta properties.
-                // Firefox >= v17  (Has WebGL >= v4)
-                // Chrome >=  v31  (Has WebGL >= v8)
-                // Edge >=    v12  (Has WebGl >= v12)
-                // https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent
-                this._wheelDeltaX += (this.wheelPrecisionX * platformScale * event.deltaX) / this._normalize;
-                this._wheelDeltaY -= (this.wheelPrecisionY * platformScale * event.deltaY) / this._normalize;
-                this._wheelDeltaZ += (this.wheelPrecisionZ * platformScale * event.deltaZ) / this._normalize;
-            } else if ((<any>event).wheelDeltaY !== undefined) {
-                // Unsure whether these catch anything more. Documentation
-                // online is contradictory.
-                this._wheelDeltaX += (this.wheelPrecisionX * platformScale * (<any>event).wheelDeltaX) / this._normalize;
-                this._wheelDeltaY -= (this.wheelPrecisionY * platformScale * (<any>event).wheelDeltaY) / this._normalize;
-                this._wheelDeltaZ += (this.wheelPrecisionZ * platformScale * (<any>event).wheelDeltaZ) / this._normalize;
-            } else if ((<any>event).wheelDelta) {
-                // IE >= v9   (Has WebGL >= v11)
-                // Maybe others?
-                this._wheelDeltaY -= (this.wheelPrecisionY * (<any>event).wheelDelta) / this._normalize;
-            }
+            this._wheelDeltaX += (this.wheelPrecisionX * platformScale * event.deltaX) / this._normalize;
+            this._wheelDeltaY -= (this.wheelPrecisionY * platformScale * event.deltaY) / this._normalize;
+            this._wheelDeltaZ += (this.wheelPrecisionZ * platformScale * event.deltaZ) / this._normalize;
 
             if (event.preventDefault) {
                 if (!noPreventDefault) {

diff --git a/packages/dev/core/src/Cameras/Inputs/BaseCameraPointersInput.ts b/packages/dev/core/src/Cameras/Inputs/BaseCameraPointersInput.ts
@@ -76,7 +76,7 @@ export abstract class BaseCameraPointersInput implements ICameraInput<Camera> {
                 return;
             }
 
-            const srcElement = <HTMLElement>(evt.srcElement || evt.target);
+            const srcElement = <HTMLElement>evt.target;
 
             this._altKey = evt.altKey;
             this._ctrlKey = evt.ctrlKey;
@@ -85,8 +85,8 @@ export abstract class BaseCameraPointersInput implements ICameraInput<Camera> {
             this._buttonsPressed = evt.buttons;
 
             if (engine.isPointerLock) {
-                const offsetX = evt.movementX || evt.mozMovementX || evt.webkitMovementX || evt.msMovementX || 0;
-                const offsetY = evt.movementY || evt.mozMovementY || evt.webkitMovementY || evt.msMovementY || 0;
+                const offsetX = evt.movementX;
+                const offsetY = evt.movementY;
 
                 this.onTouch(null, offsetX, offsetY);
                 this._pointA = null;

diff --git a/packages/dev/core/src/Cameras/Inputs/arcRotateCameraMouseWheelInput.ts b/packages/dev/core/src/Cameras/Inputs/arcRotateCameraMouseWheelInput.ts
@@ -86,18 +86,9 @@ export class ArcRotateCameraMouseWheelInput implements ICameraInput<ArcRotateCam
             }
             const event = <IWheelEvent>p.event;
             let delta = 0;
-
-            const mouseWheelLegacyEvent = event as any;
-            let wheelDelta = 0;
-
             const platformScale = event.deltaMode === EventConstants.DOM_DELTA_LINE ? ffMultiplier : 1; // If this happens to be set to DOM_DELTA_LINE, adjust accordingly
-            if (event.deltaY !== undefined) {
-                wheelDelta = -(event.deltaY * platformScale);
-            } else if ((<any>event).wheelDeltaY !== undefined) {
-                wheelDelta = -((<any>event).wheelDeltaY * platformScale);
-            } else {
-                wheelDelta = mouseWheelLegacyEvent.wheelDelta;
-            }
+
+            const wheelDelta = -(event.deltaY * platformScale);
 
             if (this.customComputeDeltaFromMouseWheel) {
                 delta = this.customComputeDeltaFromMouseWheel(wheelDelta, this, event);

diff --git a/packages/dev/core/src/Cameras/Inputs/flyCameraMouseInput.ts b/packages/dev/core/src/Cameras/Inputs/flyCameraMouseInput.ts
@@ -148,7 +148,7 @@ export class FlyCameraMouseInput implements ICameraInput<FlyCamera> {
             return;
         }
 
-        const srcElement = <HTMLElement>(e.srcElement || e.target);
+        const srcElement = <HTMLElement>e.target;
 
         // Mouse down.
         if (p.type === PointerEventTypes.POINTERDOWN) {
@@ -225,8 +225,8 @@ export class FlyCameraMouseInput implements ICameraInput<FlyCamera> {
             return;
         }
 
-        const offsetX = e.movementX || e.mozMovementX || e.webkitMovementX || e.msMovementX || 0;
-        const offsetY = e.movementY || e.mozMovementY || e.webkitMovementY || e.msMovementY || 0;
+        const offsetX = e.movementX;
+        const offsetY = e.movementY;
 
         this._rotateCamera(offsetX, offsetY);
 

diff --git a/packages/dev/core/src/Cameras/Inputs/followCameraMouseWheelInput.ts b/packages/dev/core/src/Cameras/Inputs/followCameraMouseWheelInput.ts
@@ -68,10 +68,7 @@ export class FollowCameraMouseWheelInput implements ICameraInput<FollowCamera> {
             const event = <IWheelEvent>p.event;
             let delta = 0;
 
-            // Chrome, Safari: event.deltaY
-            // IE: event.wheelDelta
-            // Firefox: event.detail (inverted)
-            const wheelDelta = Math.max(-1, Math.min(1, event.deltaY || (<any>event).wheelDelta || -(<any>event).detail));
+            const wheelDelta = Math.max(-1, Math.min(1, event.deltaY));
             if (this.wheelDeltaPercentage) {
                 console.assert(
                     <number>(<unknown>this.axisControlRadius) + <number>(<unknown>this.axisControlHeight) + <number>(<unknown>this.axisControlRotation) <= 1,

diff --git a/packages/dev/core/src/Cameras/Inputs/freeCameraMouseInput.ts b/packages/dev/core/src/Cameras/Inputs/freeCameraMouseInput.ts
@@ -89,7 +89,7 @@ export class FreeCameraMouseInput implements ICameraInput<FreeCamera> {
                     return;
                 }
 
-                const srcElement = <HTMLElement>(evt.srcElement || evt.target);
+                const srcElement = <HTMLElement>evt.target;
 
                 if (p.type === PointerEventTypes.POINTERDOWN && (this._currentActiveButton === -1 || isTouch)) {
                     try {
@@ -169,7 +169,7 @@ export class FreeCameraMouseInput implements ICameraInput<FreeCamera> {
                 return;
             }
 
-            let offsetX = evt.movementX || evt.mozMovementX || evt.webkitMovementX || evt.msMovementX || 0;
+            let offsetX = evt.movementX;
             if (this.camera.getScene().useRightHandedSystem) {
                 offsetX *= -1;
             }
@@ -178,7 +178,7 @@ export class FreeCameraMouseInput implements ICameraInput<FreeCamera> {
             }
             this.camera.cameraRotation.y += offsetX / this.angularSensibility;
 
-            const offsetY = evt.movementY || evt.mozMovementY || evt.webkitMovementY || evt.msMovementY || 0;
+            const offsetY = evt.movementY;
             this.camera.cameraRotation.x += offsetY / this.angularSensibility;
 
             this._previousPosition = null;

diff --git a/packages/dev/core/src/DeviceInput/webDeviceInputSystem.ts b/packages/dev/core/src/DeviceInput/webDeviceInputSystem.ts
@@ -1,5 +1,5 @@
 import type { Engine } from "../Engines/engine";
-import type { IUIEvent } from "../Events/deviceInputEvents";
+import type { IPointerEvent, IUIEvent } from "../Events/deviceInputEvents";
 import { DomManagement } from "../Misc/domManagement";
 import type { Observer } from "../Misc/observable";
 import { Tools } from "../Misc/tools";
@@ -420,12 +420,19 @@ export class WebDeviceInputSystem implements IDeviceInputSystem {
 
             const pointer = this._inputs[deviceType][deviceSlot];
             if (pointer) {
+                const deviceEvent = evt as IPointerEvent;
+                deviceEvent.inputIndex = PointerInput.Move;
+
+                if (evt.movementX === undefined) {
+                    evt.movementX = evt.mozMovementX || evt.webkitMovementX || evt.msMovementX || evt.clientX - pointer[PointerInput.Horizontal];
+                }
+                if (evt.movementY === undefined) {
+                    evt.movementY = evt.mozMovementY || evt.webkitMovementY || evt.msMovementY || evt.clientY - pointer[PointerInput.Vertical];
+                }
+
                 pointer[PointerInput.Horizontal] = evt.clientX;
                 pointer[PointerInput.Vertical] = evt.clientY;
 
-                const deviceEvent = evt as IUIEvent;
-                deviceEvent.inputIndex = PointerInput.Move;
-
                 this._onInputChanged(deviceType, deviceSlot, deviceEvent);
 
                 // Lets Propagate the event for move with same position.
@@ -513,6 +520,12 @@ export class WebDeviceInputSystem implements IDeviceInputSystem {
 
                 if (previousHorizontal !== evt.clientX || previousVertical !== evt.clientY) {
                     deviceEvent.inputIndex = PointerInput.Move;
+                    if (evt.movementX === undefined) {
+                        evt.movementX = evt.mozMovementX || evt.webkitMovementX || evt.msMovementX || evt.clientX - pointer[PointerInput.Horizontal];
+                    }
+                    if (evt.movementY === undefined) {
+                        evt.movementY = evt.mozMovementY || evt.webkitMovementY || evt.msMovementY || evt.clientY - pointer[PointerInput.Vertical];
+                    }
                     this._onInputChanged(deviceType, deviceSlot, deviceEvent);
                 }
             }
@@ -543,6 +556,12 @@ export class WebDeviceInputSystem implements IDeviceInputSystem {
 
                 if (previousHorizontal !== evt.clientX || previousVertical !== evt.clientY) {
                     deviceEvent.inputIndex = PointerInput.Move;
+                    if (evt.movementX === undefined) {
+                        evt.movementX = evt.mozMovementX || evt.webkitMovementX || evt.msMovementX || evt.clientX - pointer[PointerInput.Horizontal];
+                    }
+                    if (evt.movementY === undefined) {
+                        evt.movementY = evt.mozMovementY || evt.webkitMovementY || evt.msMovementY || evt.clientY - pointer[PointerInput.Vertical];
+                    }
                     this._onInputChanged(deviceType, deviceSlot, deviceEvent);
                 }
 

diff --git a/packages/dev/core/src/Events/deviceInputEvents.ts b/packages/dev/core/src/Events/deviceInputEvents.ts
@@ -156,23 +156,27 @@ export interface IMouseEvent extends IUIEvent {
 
     /**
      * Delta of movement on X axis
+     * @deprecated Use 'movementX' instead
      */
     mozMovementX?: number;
 
     /**
      * Delta of movement on Y axis
+     * @deprecated Use 'movementY' instead
      */
     mozMovementY?: number;
 
     /**
      * Delta of movement on X axis
+     * @deprecated Use 'movementX' instead
      */
-    msMovementX?: any;
+    msMovementX?: number;
 
     /**
      * Delta of movement on Y axis
+     * @deprecated Use 'movementY' instead
      */
-    msMovementY?: any;
+    msMovementY?: number;
 
     /**
      * Current coordinate of X within container
@@ -201,13 +205,15 @@ export interface IMouseEvent extends IUIEvent {
 
     /**
      * Delta of movement on X axis
+     * @deprecated Use 'movementX' instead
      */
-    webkitMovementX?: any;
+    webkitMovementX?: number;
 
     /**
      * Delta of movement on Y axis
+     * @deprecated Use 'movementY' instead
      */
-    webkitMovementY?: any;
+    webkitMovementY?: number;
 
     /**
      * Alias of clientX
@@ -271,6 +277,7 @@ export interface IWheelEvent extends IMouseEvent {
 
     /**
      * WheelDelta (From MouseWheel Event)
+     * @deprecated
      */
     wheelDelta?: number;
 }

diff --git a/packages/dev/core/src/Inputs/scene.inputManager.ts b/packages/dev/core/src/Inputs/scene.inputManager.ts
@@ -220,7 +220,7 @@ export class InputManager {
         }
 
         if (pickResult) {
-            const type = evt.type === "wheel" || evt.type === "mousewheel" || evt.type === "DOMMouseScroll" ? PointerEventTypes.POINTERWHEEL : PointerEventTypes.POINTERMOVE;
+            const type = evt.inputIndex >= PointerInput.MouseWheelX && evt.inputIndex <= PointerInput.MouseWheelZ ? PointerEventTypes.POINTERWHEEL : PointerEventTypes.POINTERMOVE;
 
             if (scene.onPointerMove) {
                 scene.onPointerMove(evt, pickResult, type);
@@ -660,7 +660,7 @@ export class InputManager {
                 this._checkPrePointerObservable(
                     null,
                     evt as IPointerEvent,
-                    evt.type === "wheel" || evt.type === "mousewheel" || evt.type === "DOMMouseScroll" ? PointerEventTypes.POINTERWHEEL : PointerEventTypes.POINTERMOVE
+                    evt.inputIndex >= PointerInput.MouseWheelX && evt.inputIndex <= PointerInput.MouseWheelZ ? PointerEventTypes.POINTERWHEEL : PointerEventTypes.POINTERMOVE
                 )
             ) {
                 return;

diff --git a/packages/dev/core/src/Offline/database.ts b/packages/dev/core/src/Offline/database.ts
@@ -357,7 +357,7 @@ export class Database implements IOfflineProvider {
                             transaction.onabort = (event) => {
                                 try {
                                     //backwards compatibility with ts 1.0, srcElement doesn't have an "error" according to ts 1.3
-                                    const srcElement = <any>(event.srcElement || event.target);
+                                    const srcElement = <any>event.target;
                                     const error = srcElement.error;
                                     if (error && error.name === "QuotaExceededError") {
                                         this._hasReachedQuota = true;
@@ -477,7 +477,7 @@ export class Database implements IOfflineProvider {
                 transaction.onabort = (event) => {
                     try {
                         //backwards compatibility with ts 1.0, srcElement doesn't have an "error" according to ts 1.3
-                        const error = (<any>event.srcElement)["error"];
+                        const error = (<any>event.target)["error"];
                         if (error && error.name === "QuotaExceededError") {
                             this._hasReachedQuota = true;
                         }
@@ -621,7 +621,7 @@ export class Database implements IOfflineProvider {
                             transaction.onabort = (event) => {
                                 try {
                                     //backwards compatibility with ts 1.0, srcElement doesn't have an "error" according to ts 1.3
-                                    const error = (<any>event.srcElement)["error"];
+                                    const error = (<any>event.target)["error"];
                                     if (error && error.name === "QuotaExceededError") {
                                         this._hasReachedQuota = true;
                                     }

diff --git a/packages/dev/sharedUiComponents/src/nodeGraphSystem/graphNode.ts b/packages/dev/sharedUiComponents/src/nodeGraphSystem/graphNode.ts
@@ -342,7 +342,7 @@ export class GraphNode {
 
     private _onDown(evt: PointerEvent) {
         // Check if this is coming from the port
-        if (evt.srcElement && (evt.srcElement as HTMLElement).nodeName === "IMG") {
+        if (evt.target && (evt.target as HTMLElement).nodeName === "IMG") {
             return;
         }