Merge pull request #812 from ahocevar/mousewheel

Better mousewheel/touchpad behavior for zooming. r=@elemoine

lib/OpenLayers/Control/Navigation.js

@@ -77,7 +77,9 @@ OpenLayers.Control.Navigation = OpenLayers.Class(OpenLayers.Control, {
     /**
      * Property: mouseWheelOptions
      * {Object} Options passed to the MouseWheel control (only useful if
-     *     <zoomWheelEnabled> is set to true)
+     *     <zoomWheelEnabled> is set to true). Default is no options for maps
+     *     with fractionalZoom set to true, otherwise
+     *     {cumulative: false, interval: 50, maxDelta: 6} 
      */
     mouseWheelOptions: null,
 
@@ -208,10 +210,15 @@ OpenLayers.Control.Navigation = OpenLayers.Class(OpenLayers.Control, {
                     {map: this.map, keyMask: this.zoomBoxKeyMask});
         this.dragPan.draw();
         this.zoomBox.draw();
+        var wheelOptions = this.map.fractionalZoom ? {} : {
+            cumulative: false,
+            interval: 50,
+            maxDelta: 6
+        };
         this.handlers.wheel = new OpenLayers.Handler.MouseWheel(
-                                    this, {"up"  : this.wheelUp,
+            this, {up : this.wheelUp, down: this.wheelDown},
-                                           "down": this.wheelDown},
+            OpenLayers.Util.extend(wheelOptions, this.mouseWheelOptions)
-                                    this.mouseWheelOptions );
+        );
         if (OpenLayers.Control.PinchZoom) {
             this.pinchZoom = new OpenLayers.Control.PinchZoom(
                 OpenLayers.Util.extend(

lib/OpenLayers/Handler/MouseWheel.js

@@ -31,6 +31,14 @@ OpenLayers.Handler.MouseWheel = OpenLayers.Class(OpenLayers.Handler, {
      */
     interval: 0,
     
+    /**
+     * Property: maxDelta
+     * {Integer} Maximum delta to collect before breaking from the current
+     *    interval. In cumulative mode, this also limits the maximum delta
+     *    returned from the handler. Default is Number.POSITIVE_INFINITY.
+     */
+    maxDelta: Number.POSITIVE_INFINITY,
+    
     /**
      * Property: delta
      * {Integer} When interval is set, delta collects the mousewheel z-deltas
@@ -176,10 +184,10 @@ OpenLayers.Handler.MouseWheel = OpenLayers.Class(OpenLayers.Handler, {
                     // so force delta 1 / -1
                     delta = - (e.detail / Math.abs(e.detail));
                 }
-                this.delta = this.delta + delta;
+                this.delta += delta;
 
-                if(this.interval) {
+                window.clearTimeout(this._timeoutId);
-                    window.clearTimeout(this._timeoutId);
+                if(this.interval && Math.abs(this.delta) < this.maxDelta) {
                     // store e because window.event might change during delay
                     var evt = OpenLayers.Util.extend({}, e);
                     this._timeoutId = window.setTimeout(
@@ -211,9 +219,11 @@ OpenLayers.Handler.MouseWheel = OpenLayers.Class(OpenLayers.Handler, {
         if (delta) {
             e.xy = this.map.events.getMousePosition(e);
             if (delta < 0) {
-                this.callback("down", [e, this.cumulative ? delta : -1]);
+                this.callback("down",
+                    [e, this.cumulative ? Math.max(-this.maxDelta, delta) : -1]);
             } else {
-                this.callback("up", [e, this.cumulative ? delta : 1]);
+                this.callback("up",
+                    [e, this.cumulative ? Math.min(this.maxDelta, delta) : 1]);
             }
         }
     },

tests/Handler/MouseWheel.html

@@ -115,12 +115,13 @@
     }
 
     function test_Handler_MouseWheel_cumulative(t) {
-        t.plan(1);
+        t.plan(2);
 
-        var deltaUp = 0;
+        var deltaUp = 0, ticks = 0;
         var callbacks = {
             up: function(evt, delta) {
                 deltaUp += delta;
+                ticks++;
             }
         };
 
@@ -131,7 +132,8 @@
         map.addControl(control);
         var handler = new OpenLayers.Handler.MouseWheel(control, callbacks, {
             interval: 150,
-            cumulative: false    
+            cumulative: false,
+            maxDelta: 6
         });
 
         var delta = 120;
@@ -140,8 +142,9 @@
             handler.onWheelEvent({'target':map.layers[0].div, wheelDelta: delta});
         }
         
-        t.delay_call(1, function() {
+        t.delay_call(2, function() {
-            t.eq(deltaUp, 1, "Non cumulative mode works");
+            t.eq(deltaUp / ticks, 1, "Cumulative mode works");
+            t.eq(ticks, 4, "up called 4x with maxDelta of 6");
         });
     }