DeviceInputSystem: Made mousewheel passive option set to false when s…

…upported (#12761)

* Revert cam code

* Fixed import issue and verified noop code works

packages/dev/core/src/Cameras/Inputs/BaseCameraMouseWheelInput.ts

@@ -8,6 +8,7 @@ import type { PointerInfo } from "../../Events/pointerEvents";
 import { PointerEventTypes } from "../../Events/pointerEvents";
 import type { IWheelEvent } from "../../Events/deviceInputEvents";
 import { EventConstants } from "../../Events/deviceInputEvents";
+import { Tools } from "../../Misc/tools";
 
 /**
  * Base class for mouse wheel input..
@@ -52,11 +53,12 @@ export abstract class BaseCameraMouseWheelInput implements ICameraInput<Camera>
     /**
      * Attach the input controls to a specific dom element to get the input from.
      * @param noPreventDefault Defines whether event caught by the controls
-     *   should call preventdefault().  This param is no longer used because wheel events should be treated as passive.
+     *   should call preventdefault().
      *   (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
      */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     public attachControl(noPreventDefault?: boolean): void {
+        noPreventDefault = Tools.BackCompatCameraNoPreventDefault(arguments);
+
         this._wheel = (pointer) => {
             // sanity check - this should be a PointerWheel event.
             if (pointer.type !== PointerEventTypes.POINTERWHEEL) {
@@ -87,6 +89,12 @@ export abstract class BaseCameraMouseWheelInput implements ICameraInput<Camera>
                 // Maybe others?
                 this._wheelDeltaY -= (this.wheelPrecisionY * (<any>event).wheelDelta) / this._normalize;
             }
+
+            if (event.preventDefault) {
+                if (!noPreventDefault) {
+                    event.preventDefault();
+                }
+            }
         };
 
         this._observer = this.camera.getScene().onPointerObservable.add(this._wheel, PointerEventTypes.POINTERWHEEL);

packages/dev/core/src/Cameras/Inputs/arcRotateCameraMouseWheelInput.ts

@@ -12,6 +12,7 @@ import { Epsilon } from "../../Maths/math.constants";
 import type { IWheelEvent } from "../../Events/deviceInputEvents";
 import { EventConstants } from "../../Events/deviceInputEvents";
 import { Scalar } from "../../Maths/math.scalar";
+import { Tools } from "../../Misc/tools";
 
 /**
  * Firefox uses a different scheme to report scroll distances to other
@@ -75,10 +76,9 @@ export class ArcRotateCameraMouseWheelInput implements ICameraInput<ArcRotateCam
     /**
      * Attach the input controls to a specific dom element to get the input from.
      * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
-     * This param is no longer used because wheel events should be treated as passive.
      */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     public attachControl(noPreventDefault?: boolean): void {
+        noPreventDefault = Tools.BackCompatCameraNoPreventDefault(arguments);
         this._wheel = (p) => {
             //sanity check - this should be a PointerWheel event.
             if (p.type !== PointerEventTypes.POINTERWHEEL) {
@@ -129,6 +129,12 @@ export class ArcRotateCameraMouseWheelInput implements ICameraInput<ArcRotateCam
                     this.camera.inertialRadiusOffset += delta;
                 }
             }
+
+            if (event.preventDefault) {
+                if (!noPreventDefault) {
+                    event.preventDefault();
+                }
+            }
         };
 
         this._observer = this.camera.getScene().onPointerObservable.add(this._wheel, PointerEventTypes.POINTERWHEEL);

packages/dev/core/src/Cameras/Inputs/followCameraMouseWheelInput.ts

@@ -7,6 +7,7 @@ import { CameraInputTypes } from "../../Cameras/cameraInputsManager";
 import type { PointerInfo } from "../../Events/pointerEvents";
 import { PointerEventTypes } from "../../Events/pointerEvents";
 import type { IWheelEvent } from "../../Events/deviceInputEvents";
+import { Tools } from "../../Misc/tools";
 
 /**
  * Manage the mouse wheel inputs to control a follow camera.
@@ -56,10 +57,9 @@ export class FollowCameraMouseWheelInput implements ICameraInput<FollowCamera> {
     /**
      * Attach the input controls to a specific dom element to get the input from.
      * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
-     * This param is no longer used because wheel events should be treated as passive.
      */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     public attachControl(noPreventDefault?: boolean): void {
+        noPreventDefault = Tools.BackCompatCameraNoPreventDefault(arguments);
         this._wheel = (p) => {
             // sanity check - this should be a PointerWheel event.
             if (p.type !== PointerEventTypes.POINTERWHEEL) {
@@ -106,6 +106,12 @@ export class FollowCameraMouseWheelInput implements ICameraInput<FollowCamera> {
                     this.camera.rotationOffset -= delta;
                 }
             }
+
+            if (event.preventDefault) {
+                if (!noPreventDefault) {
+                    event.preventDefault();
+                }
+            }
         };
 
         this._observer = this.camera.getScene().onPointerObservable.add(this._wheel, PointerEventTypes.POINTERWHEEL);

packages/dev/core/src/DeviceInput/InputDevices/webDeviceInputSystem.ts

@@ -714,7 +714,7 @@ export class WebDeviceInputSystem implements IDeviceInputSystem {
         this._elementToAttachTo.addEventListener(this._eventPrefix + "up", this._pointerUpEvent);
         this._elementToAttachTo.addEventListener(this._eventPrefix + "cancel", this._pointerCancelEvent);
         this._elementToAttachTo.addEventListener("blur", this._pointerBlurEvent);
-        this._elementToAttachTo.addEventListener(this._wheelEventName, this._pointerWheelEvent, passiveSupported ? { passive: true } : false);
+        this._elementToAttachTo.addEventListener(this._wheelEventName, this._pointerWheelEvent, passiveSupported ? { passive: false } : false);
 
         // Since there's no up or down event for mouse wheel or delta x/y, clear mouse values at end of frame
         this._pointerInputClearObserver = this._engine.onEndFrameObservable.add(() => {