patch for improved mousedragging. We were able to test this on my eeepc

and get a very obvious speedup in performance. This adds a configurable
'interval' to the dragpan control (and an interval to the 'drag' control,
defaulting to 0px). Patch put together by tcoulter. (Closes #1509) 


git-svn-id: http://svn.openlayers.org/trunk/openlayers@7608 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

lib/OpenLayers/Control/DragPan.js

@@ -28,14 +28,27 @@ OpenLayers.Control.DragPan = OpenLayers.Class(OpenLayers.Control, {
      */
     panned: false,
     
+    /**
+     * Property: interval
+     * The number of milliseconds that should ellapse before
+     * panning the map again. Set this to increase dragging performance.
+     * Defaults to 25 milliseconds.
+     */
+    interval: 25, 
+    
     /**
      * Method: draw
      * Creates a Drag handler, using <panMap> and
      * <panMapDone> as callbacks.
      */    
     draw: function() {
-        this.handler = new OpenLayers.Handler.Drag(this,
+        this.handler = new OpenLayers.Handler.Drag(this, {
-                            {"move": this.panMap, "done": this.panMapDone});
+                "move": this.panMap,
+                "done": this.panMapDone
+            }, {
+                interval: this.interval
+            }
+        );
     },
 
     /**

lib/OpenLayers/Control/Navigation.js

@@ -30,6 +30,12 @@ OpenLayers.Control.Navigation = OpenLayers.Class(OpenLayers.Control, {
      */
     dragPan: null,
 
+    /**
+     * APIProprety: dragPanOptions
+     * Options passed to the DragPan control.
+     */
+    dragPanOptions: null,
+
     /** 
      * Property: zoomBox
      * {<OpenLayers.Control.ZoomBox>}
@@ -41,7 +47,7 @@ OpenLayers.Control.Navigation = OpenLayers.Class(OpenLayers.Control, {
      * {Boolean} Whether the mousewheel should zoom the map
      */
     zoomWheelEnabled: true, 
-
+    
     /**
      * Constructor: OpenLayers.Control.Navigation
      * Create a new navigation control
@@ -110,7 +116,9 @@ OpenLayers.Control.Navigation = OpenLayers.Class(OpenLayers.Control, {
                                           'double': true, 
                                           'stopDouble': true
                                         });
-        this.dragPan = new OpenLayers.Control.DragPan({map: this.map});
+        this.dragPan = new OpenLayers.Control.DragPan(
+            OpenLayers.Util.extend({map: this.map}, this.dragPanOptions)
+        );
         this.zoomBox = new OpenLayers.Control.ZoomBox(
                     {map: this.map, keyMask: OpenLayers.Handler.MOD_SHIFT});
         this.dragPan.draw();

lib/OpenLayers/Handler/Drag.js

@@ -66,6 +66,22 @@ OpenLayers.Handler.Drag = OpenLayers.Class(OpenLayers.Handler, {
      * {Function}
      */
     oldOnselectstart: null,
+    
+    /**
+     * Property: interval
+     * In order to increase performance, an interval (in milliseconds)
+     * can be set to reduce the number of drag events called. If set, 
+     * a new drag event will not be set until the interval has passed. 
+     * Defaults to 0, meaning no interval. 
+     */
+    interval: 0,
+    
+    /**
+     * Property: timeoutId
+     * The id of the timeout used for the mousedown interval.
+     * This is "private", and should be left alone.
+     */
+    timeoutId: null,
 
     /**
      * Constructor: OpenLayers.Handler.Drag
@@ -191,20 +207,29 @@ OpenLayers.Handler.Drag = OpenLayers.Class(OpenLayers.Handler, {
      * {Boolean} Let the event propagate.
      */
     mousemove: function (evt) {
-        if (this.started) {
+        if (this.started && !this.timeoutId && (evt.xy.x != this.last.x || evt.xy.y != this.last.y)) {
-            if(evt.xy.x != this.last.x || evt.xy.y != this.last.y) {
+            if (this.interval > 0) {
-                this.dragging = true;
+                this.timeoutId = setTimeout(OpenLayers.Function.bind(this.removeTimeout, this), this.interval);
-                this.move(evt);
-                this.callback("move", [evt.xy]);
-                if(!this.oldOnselectstart) {
-                    this.oldOnselectstart = document.onselectstart;
-                    document.onselectstart = function() {return false;};
-                }
-                this.last = evt.xy;
             }
+            this.dragging = true;
+            this.move(evt);
+            this.callback("move", [evt.xy]);
+            if(!this.oldOnselectstart) {
+                this.oldOnselectstart = document.onselectstart;
+                document.onselectstart = function() {return false;};
+            }
+            this.last = this.evt.xy;
         }
         return true;
     },
+    
+    /**
+     * Method: removeTimeout
+     * Private. Called by mousemove() to remove the drag timeout.
+     */
+    removeTimeout: function() {
+        this.timeoutId = null;
+    },
 
     /**
      * Method: mouseup