Merge pull request #10672 from ahocevar/mousewheel

Nicer mousewheel and trackpad zooming

src/ol/View.js

@@ -793,6 +793,13 @@ class View extends BaseObject {
     return this.constraints_;
   }
 
+  /**
+   * @return {boolean} Resolution constraint is set
+   */
+  getConstrainResolution() {
+    return this.options_.constrainResolution;
+  }
+
   /**
    * @param {Array<number>=} opt_hints Destination array.
    * @return {Array<number>} Hint.

src/ol/interaction/MouseWheelZoom.js

@@ -4,7 +4,17 @@
 import {always, focus} from '../events/condition.js';
 import EventType from '../events/EventType.js';
 import {DEVICE_PIXEL_RATIO, FIREFOX} from '../has.js';
-import Interaction from './Interaction.js';
+import Interaction, {zoomByDelta} from './Interaction.js';
+import {clamp} from '../math.js';
+
+
+/**
+ * @enum {string}
+ */
+export const Mode = {
+  TRACKPAD: 'trackpad',
+  WHEEL: 'wheel'
+};
 
 
 /**
@@ -92,16 +102,28 @@ class MouseWheelZoom extends Interaction {
     this.startTime_ = undefined;
 
     /**
-     * Events separated by this delay will be considered separate
+     * @private
+     * @type {?}
+     */
+    this.timeoutId_;
+
+    /**
+     * @private
+     * @type {Mode|undefined}
+     */
+    this.mode_ = undefined;
+
+    /**
+     * Trackpad events separated by this delay will be considered separate
      * interactions.
      * @type {number}
      */
-    this.eventGap_ = 400;
+    this.trackpadEventGap_ = 400;
 
     /**
      * @type {?}
      */
-    this.timeoutId_;
+    this.trackpadTimeoutId_;
 
     /**
      * The number of delta values per zoom level
@@ -130,7 +152,7 @@ class MouseWheelZoom extends Interaction {
    * @private
    */
   endInteraction_() {
-    this.timeoutId_ = undefined;
+    this.trackpadTimeoutId_ = undefined;
     const view = this.getMap().getView();
     view.endInteraction(undefined, this.lastDelta_ ? (this.lastDelta_ > 0 ? 1 : -1) : 0, this.lastAnchor_);
   }
@@ -184,18 +206,61 @@ class MouseWheelZoom extends Interaction {
       this.startTime_ = now;
     }
 
-    const view = map.getView();
-    if (this.timeoutId_) {
-      clearTimeout(this.timeoutId_);
-    } else {
-      view.beginInteraction();
+    if (!this.mode_ || now - this.startTime_ > this.trackpadEventGap_) {
+      this.mode_ = Math.abs(delta) < 4 ?
+        Mode.TRACKPAD :
+        Mode.WHEEL;
     }
-    this.timeoutId_ = setTimeout(this.endInteraction_.bind(this), this.eventGap_);
-    view.adjustZoom(-delta / this.deltaPerZoom_, this.lastAnchor_);
-    this.startTime_ = now;
+
+    const view = map.getView();
+    if (this.mode_ === Mode.TRACKPAD && !view.getConstrainResolution()) {
+      if (this.trackpadTimeoutId_) {
+        clearTimeout(this.trackpadTimeoutId_);
+      } else {
+        if (view.getAnimating()) {
+          view.cancelAnimations();
+        }
+        view.beginInteraction();
+      }
+      this.trackpadTimeoutId_ = setTimeout(this.endInteraction_.bind(this), this.timeoutId_);
+      view.adjustZoom(-delta / this.deltaPerZoom_, this.lastAnchor_);
+      this.startTime_ = now;
+      return false;
+    }
+
+    this.totalDelta_ += delta;
+
+    const timeLeft = Math.max(this.timeout_ - (now - this.startTime_), 0);
+
+    clearTimeout(this.timeoutId_);
+    this.timeoutId_ = setTimeout(this.handleWheelZoom_.bind(this, map), timeLeft);
+
     return false;
   }
 
+  /**
+   * @private
+   * @param {import("../PluggableMap.js").default} map Map.
+   */
+  handleWheelZoom_(map) {
+    const view = map.getView();
+    if (view.getAnimating()) {
+      view.cancelAnimations();
+    }
+    let delta = -clamp(this.totalDelta_, -this.maxDelta_ * this.deltaPerZoom_, this.maxDelta_ * this.deltaPerZoom_) / this.deltaPerZoom_;
+    if (view.getConstrainResolution()) {
+      // view has a zoom constraint, zoom by 1
+      delta = delta ? delta > 0 ? 1 : -1 : 0;
+    }
+    zoomByDelta(view, delta, this.lastAnchor_, this.duration_);
+
+    this.mode_ = undefined;
+    this.totalDelta_ = 0;
+    this.lastAnchor_ = null;
+    this.startTime_ = undefined;
+    this.timeoutId_ = undefined;
+  }
+
   /**
    * Enable or disable using the mouse's location as an anchor when zooming
    * @param {boolean} useAnchor true to zoom to the mouse's location, false