From bc06972aea7fd6deb6cb7462520caacbfaf76db3 Mon Sep 17 00:00:00 2001 From: crschmidt Date: Wed, 30 Jul 2008 16:27:48 +0000 Subject: [PATCH] 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 | 17 +++++++++-- lib/OpenLayers/Control/Navigation.js | 12 ++++++-- lib/OpenLayers/Handler/Drag.js | 45 +++++++++++++++++++++------- 3 files changed, 60 insertions(+), 14 deletions(-) diff --git a/lib/OpenLayers/Control/DragPan.js b/lib/OpenLayers/Control/DragPan.js index 7fdbacfa7e..3f57b9264b 100644 --- a/lib/OpenLayers/Control/DragPan.js +++ b/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 and * as callbacks. */ draw: function() { - this.handler = new OpenLayers.Handler.Drag(this, - {"move": this.panMap, "done": this.panMapDone}); + this.handler = new OpenLayers.Handler.Drag(this, { + "move": this.panMap, + "done": this.panMapDone + }, { + interval: this.interval + } + ); }, /** diff --git a/lib/OpenLayers/Control/Navigation.js b/lib/OpenLayers/Control/Navigation.js index bf826ea7da..b1f4ea1d9c 100644 --- a/lib/OpenLayers/Control/Navigation.js +++ b/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 * {} @@ -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(); diff --git a/lib/OpenLayers/Handler/Drag.js b/lib/OpenLayers/Handler/Drag.js index 085d4b584d..1add503d00 100644 --- a/lib/OpenLayers/Handler/Drag.js +++ b/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(evt.xy.x != this.last.x || evt.xy.y != this.last.y) { - 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 = evt.xy; + if (this.started && !this.timeoutId && (evt.xy.x != this.last.x || evt.xy.y != this.last.y)) { + if (this.interval > 0) { + this.timeoutId = setTimeout(OpenLayers.Function.bind(this.removeTimeout, this), this.interval); } + 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