Introduce map wheel event

src/ui/bind_handlers.js

@@ -1,6 +1,10 @@
 // @flow
 
-const {MapMouseEvent, MapTouchEvent} = require('../ui/events');
+const {
+    MapMouseEvent,
+    MapTouchEvent,
+    MapWheelEvent
+} = require('../ui/events');
 
 import type Map from './map';
 
@@ -38,6 +42,7 @@ module.exports = function bindHandlers(map: Map, options: {}) {
     el.addEventListener('click', onClick, false);
     el.addEventListener('dblclick', onDblClick, false);
     el.addEventListener('contextmenu', onContextMenu, false);
+    el.addEventListener('wheel', onWheel, false);
 
     function onMouseDown(e: MouseEvent) {
         mouseDown = true;
@@ -158,4 +163,15 @@ module.exports = function bindHandlers(map: Map, options: {}) {
 
         e.preventDefault();
     }
+
+    function onWheel(e: WheelEvent) {
+        const mapEvent = new MapWheelEvent('wheel', map, e);
+        map.fire(mapEvent);
+
+        if (mapEvent.defaultPrevented) {
+            return;
+        }
+
+        map.scrollZoom.onWheel(e);
+    }
 };

src/ui/events.js

@@ -166,6 +166,54 @@ class MapTouchEvent extends Event {
     }
 }
 
+
+/**
+ * `MapWheelEvent` is the event type for the `wheel` map event.
+ * @extends {Object}
+ */
+class MapWheelEvent extends Event {
+    /**
+     * The event type.
+     */
+    type: 'wheel';
+
+    /**
+     * The `Map` object that fired the event.
+     */
+    map: Map;
+
+    /**
+     * The DOM event which caused the map event.
+     */
+    originalEvent: WheelEvent;
+
+    /**
+     * Prevents subsequent default processing of the event by the map.
+     *
+     * Calling this method will prevent the the behavior of {@link ScrollZoomHandler}.
+     */
+    preventDefault() {
+        this._defaultPrevented = true;
+    }
+
+    /**
+     * `true` if `preventDefault` has been called.
+     */
+    get defaultPrevented(): boolean {
+        return this._defaultPrevented;
+    }
+
+    _defaultPrevented: boolean;
+
+    /**
+     * @private
+     */
+    constructor(type: string, map: Map, originalEvent: WheelEvent) {
+        super(type, { originalEvent });
+        this._defaultPrevented = false;
+    }
+}
+
 /**
  * @typedef {Object} MapBoxZoomEvent
  * @property {MouseEvent} originalEvent
@@ -339,6 +387,16 @@ export type MapEvent =
      */
     | 'contextmenu'
 
+    /**
+     * Fired when a [`wheel`](https://developer.mozilla.org/en-US/docs/Web/Events/wheel) event occurs within the map.
+     *
+     * @event wheel
+     * @memberof Map
+     * @instance
+     * @property {MapWheelEvent} data
+     */
+    | 'wheel'
+
     /**
      * Fired when a [`touchstart`](https://developer.mozilla.org/en-US/docs/Web/Events/touchstart) event occurs within the map.
      *
@@ -729,5 +787,6 @@ export type MapEvent =
 
 module.exports = {
     MapMouseEvent,
-    MapTouchEvent
+    MapTouchEvent,
+    MapWheelEvent
 };

src/ui/handler/scroll_zoom.js

@@ -93,7 +93,6 @@ class ScrollZoomHandler {
      */
     enable(options: any) {
         if (this.isEnabled()) return;
-        this._el.addEventListener('wheel', this._onWheel, false);
         this._enabled = true;
         this._aroundCenter = options && options.around === 'center';
     }
@@ -106,11 +105,12 @@ class ScrollZoomHandler {
      */
     disable() {
         if (!this.isEnabled()) return;
-        this._el.removeEventListener('wheel', this._onWheel);
         this._enabled = false;
     }
 
-    _onWheel(e: WheelEvent) {
+    onWheel(e: WheelEvent) {
+        if (!this.isEnabled()) return;
+
         let value = e.deltaY;
 
         // Firefox doubles the values on retina screens...

test/unit/ui/handler/scroll_zoom.test.js

@@ -19,7 +19,7 @@ function createMap(options) {
     }, options));
 }
 
-test('ScrollZoomHandler zooms in response to wheel events', (t) => {
+test('ScrollZoomHandler', (t) => {
     const browserNow = t.stub(browser, 'now');
     let now = 1555555555555;
     browserNow.callsFake(() => now);
@@ -115,6 +115,22 @@ test('ScrollZoomHandler zooms in response to wheel events', (t) => {
         t.end();
     });
 
+    test('does not zoom if preventDefault is called on the wheel event', (t) => {
+        const map = createMap();
+
+        map.on('wheel', e => e.preventDefault());
+
+        simulate.wheel(map.getCanvas(), {type: 'wheel', deltaY: -simulate.magicWheelZoomDelta});
+        map._updateCamera();
+
+        now += 400;
+        map._updateCamera();
+
+        t.equal(map.getZoom(), 0);
+
+        map.remove();
+        t.end();
+    });
+
     t.end();
 });
-