Native support for wheel events

Author: photonstorm

src/input/InputManager.js

@@ -756,6 +756,22 @@ var InputManager = new Class({
         this.updateInputPlugins(CONST.MOUSE_UP, this.mousePointerContainer);
     },
 
+    /**
+     * Processes a mouse wheel event, as passed in by the MouseManager.
+     *
+     * @method Phaser.Input.InputManager#onMouseWheel
+     * @private
+     * @since 3.18.0
+     *
+     * @param {WheelEvent} event - The native DOM Wheel event.
+     */
+    onMouseWheel: function (event)
+    {
+        this.mousePointer.wheel(event);
+
+        this.updateInputPlugins(CONST.MOUSE_WHEEL, this.mousePointerContainer);
+    },
+
     /**
      * Checks if the given Game Object should be considered as a candidate for input or not.
      *

src/input/InputPlugin.js

@@ -609,10 +609,7 @@ var InputPlugin = new Class({
                 }
             }
 
-            if (pointersTotal < 3 || !pointer.wasTouch)
-            {
-                total += this.processOverOutEvents(pointer);
-            }
+            total += this.processOverOutEvents(pointer);
 
             this.processDragThresholdEvent(pointer);
 
@@ -711,6 +708,10 @@ var InputPlugin = new Class({
                     total += this.processMoveEvents(pointer);
                     total += this.processOverOutEvents(pointer);
                     break;
+
+                case CONST.MOUSE_WHEEL:
+                    total += this.processWheelEvent(pointer);
+                    break;
             }
 
             if (total > 0)
@@ -1433,6 +1434,73 @@ var InputPlugin = new Class({
         return total;
     },
 
+    /**
+     * An internal method that handles a mouse wheel event.
+     *
+     * @method Phaser.Input.InputPlugin#processWheelEvent
+     * @private
+     * @fires Phaser.Input.Events#GAMEOBJECT_POINTER_WHEEL
+     * @fires Phaser.Input.Events#GAMEOBJECT_WHEEL
+     * @fires Phaser.Input.Events#POINTER_WHEEL
+     * @since 3.18.0
+     *
+     * @param {Phaser.Input.Pointer} pointer - The pointer to check for events against.
+     *
+     * @return {integer} The total number of objects interacted with.
+     */
+    processWheelEvent: function (pointer)
+    {
+        var total = 0;
+        var currentlyOver = this._temp;
+
+        var _eventData = this._eventData;
+        var _eventContainer = this._eventContainer;
+
+        _eventData.cancelled = false;
+
+        var aborted = false;
+
+        var dx = pointer.deltaX;
+        var dy = pointer.deltaY;
+        var dz = pointer.deltaZ;
+
+        //  Go through all objects the pointer was over and fire their events / callbacks
+        for (var i = 0; i < currentlyOver.length; i++)
+        {
+            var gameObject = currentlyOver[i];
+
+            if (!gameObject.input)
+            {
+                continue;
+            }
+
+            total++;
+
+            gameObject.emit(Events.GAMEOBJECT_POINTER_WHEEL, pointer, dx, dy, dz, _eventContainer);
+
+            if (_eventData.cancelled || !gameObject.input)
+            {
+                aborted = true;
+                break;
+            }
+
+            this.emit(Events.GAMEOBJECT_WHEEL, pointer, gameObject, dx, dy, dz, _eventContainer);
+
+            if (_eventData.cancelled || !gameObject.input)
+            {
+                aborted = true;
+                break;
+            }
+        }
+
+        if (!aborted)
+        {
+            this.emit(Events.POINTER_WHEEL, pointer, currentlyOver, dx, dy, dz);
+        }
+
+        return total;
+    },
+
     /**
      * An internal method that handles the Pointer over events.
      * This is called when a touch input hits the canvas, having previously been off of it.

src/input/mouse/MouseManager.js

@@ -160,6 +160,17 @@ var MouseManager = new Class({
          */
         this.onMouseOut = NOOP;
 
+        /**
+         * The Mouse Wheel Event handler.
+         * This function is sent the native DOM MouseEvent.
+         * Initially empty and bound in the `startListeners` method.
+         *
+         * @name Phaser.Input.Mouse.MouseManager#onMouseWheel
+         * @type {function}
+         * @since 3.18.0
+         */
+        this.onMouseWheel = NOOP;
+
         /**
          * Internal pointerLockChange handler.
          * This function is sent the native DOM MouseEvent.
@@ -364,6 +375,14 @@ var MouseManager = new Class({
             }
         };
 
+        this.onMouseWheel = function (event)
+        {
+            if (!event.defaultPrevented && _this.enabled && _this.manager && _this.manager.enabled)
+            {
+                _this.manager.onMouseWheel(event);
+            }
+        };
+
         var target = this.target;
 
         if (!target)
@@ -379,6 +398,7 @@ var MouseManager = new Class({
         target.addEventListener('mouseup', this.onMouseUp, (this.capture) ? nonPassive : passive);
         target.addEventListener('mouseover', this.onMouseOver, (this.capture) ? nonPassive : passive);
         target.addEventListener('mouseout', this.onMouseOut, (this.capture) ? nonPassive : passive);
+        target.addEventListener('wheel', this.onMouseWheel, (this.capture) ? nonPassive : passive);
 
         if (window && this.manager.game.config.inputWindowEvents)
         {