#774 - drag control only calls move callback with a change in pixel position - DragPan control simplified

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

lib/OpenLayers/Control/DragPan.js

@@ -27,7 +27,7 @@ OpenLayers.Control.DragPan = OpenLayers.Class(OpenLayers.Control, {
      */    
     draw: function() {
         this.handler = new OpenLayers.Handler.Drag( this,
-                            {"move": this.panMap, "up": this.panMapDone } );
+                            {"move": this.panMap, "up": this.panMap} );
     },
 
     /**
@@ -37,35 +37,13 @@ OpenLayers.Control.DragPan = OpenLayers.Class(OpenLayers.Control, {
     * xy - {<OpenLayers.Pixel>} Pixel of the up position
     */
     panMap: function (xy) {
-        var deltaX = this.handler.start.x - xy.x;
+        var deltaX = this.handler.last.x - xy.x;
-        var deltaY = this.handler.start.y - xy.y;
+        var deltaY = this.handler.last.y - xy.y;
         var size = this.map.getSize();
         var newXY = new OpenLayers.Pixel(size.w / 2 + deltaX,
                                          size.h / 2 + deltaY);
         var newCenter = this.map.getLonLatFromViewPortPx( newXY ); 
-        this.map.setCenter(newCenter, null, true);
+        this.map.setCenter(newCenter, null, this.handler.dragging);
-        // this assumes xy won't be changed inside Handler.Drag
-        // a safe bet for now, and saves us the extra call to clone().
-        this.handler.start = xy;
-    },
-    
-    /**
-    * Method: panMapDone
-    * 
-    * Parameters:
-    * xy - {<OpenLayers.Pixel>} Pixel of the up position
-    */
-    panMapDone: function (xy) {
-        var deltaX = this.handler.start.x - xy.x;
-        var deltaY = this.handler.start.y - xy.y;
-        var size = this.map.getSize();
-        var newXY = new OpenLayers.Pixel(size.w / 2 + deltaX,
-                                         size.h / 2 + deltaY);
-        var newCenter = this.map.getLonLatFromViewPortPx( newXY ); 
-        this.map.setCenter(newCenter, null, false);
-        // this assumes xy won't be changed inside Handler.Drag
-        // a safe bet for now, and saves us the extra call to clone().
-        this.handler.start = xy;
     },
 
     CLASS_NAME: "OpenLayers.Control.DragPan"

lib/OpenLayers/Handler/Drag.js

@@ -39,10 +39,10 @@ OpenLayers.Handler.Drag = OpenLayers.Class(OpenLayers.Handler, {
     dragging: false,
 
     /** 
-     * Property: start 
+     * Property: last
      * {<OpenLayers.Pixel>} 
      */
-    start: null,
+    last: null,
 
     /**
      * Property: oldOnselectstart
@@ -90,7 +90,7 @@ OpenLayers.Handler.Drag = OpenLayers.Class(OpenLayers.Handler, {
         if (this.checkModifiers(evt) && OpenLayers.Event.isLeftClick(evt)) {
             this.started = true;
             this.dragging = false;
-            this.start = evt.xy.clone();
+            this.last = evt.xy;
             // TBD replace with CSS classes
             this.map.div.style.cursor = "move";
             this.callback("down", [evt.xy]);
@@ -112,11 +112,14 @@ OpenLayers.Handler.Drag = OpenLayers.Class(OpenLayers.Handler, {
      */
     mousemove: function (evt) {
         if (this.started) {
-            this.dragging = true;
+            if(evt.xy.x != this.last.x || evt.xy.y != this.last.y) {
-            this.callback("move", [evt.xy]);
+                this.dragging = true;
-            if(!this.oldOnselectstart) {
+                this.callback("move", [evt.xy]);
-                this.oldOnselectstart = document.onselectstart;
+                if(!this.oldOnselectstart) {
-                document.onselectstart = function() {return false;}
+                    this.oldOnselectstart = document.onselectstart;
+                    document.onselectstart = function() {return false;}
+                }
+                this.last = evt.xy;
             }
         }
         return true;
@@ -135,6 +138,7 @@ OpenLayers.Handler.Drag = OpenLayers.Class(OpenLayers.Handler, {
     mouseup: function (evt) {
         if (this.started) {
             this.started = false;
+            this.dragging = false;
             // TBD replace with CSS classes
             this.map.div.style.cursor = "";
             this.callback("up", [evt.xy]);

tests/Handler/test_Drag.html

@@ -83,7 +83,7 @@
     }
 
     function test_Handler_Drag_callbacks(t) {
-        t.plan(25);
+        t.plan(28);
         
         var map = new OpenLayers.Map('map', {controls: []});
 
@@ -141,6 +141,9 @@
         map.events.triggerEvent("mousedown", testEvents.down);
         t.ok(handler.started, "mousedown sets the started flag to true");
         t.ok(!handler.dragging, "mouse down sets the dragging flag to false");
+        t.ok(handler.last.x == testEvents.down.xy.x &&
+             handler.last.y == testEvents.down.xy.y,
+             "mouse down sets handler.last correctly");
         OpenLayers.Event.isLeftClick = oldIsLeftClick;
         OpenLayers.Event.stop = oldStop;
         handler.checkModifiers = oldCheckModifiers;
@@ -156,6 +159,19 @@
         handler.started = true;
         map.events.triggerEvent("mousemove", testEvents.move);
         t.ok(handler.dragging, "mousemove sets the dragging flag to true");
+        t.ok(handler.last.x == testEvents.move.xy.x &&
+             handler.last.y == testEvents.move.xy.y,
+             "mouse move sets handler.last correctly");
+        
+        // a second move with the same evt.xy should not trigger move callback
+        // if it does, the test page will complain about a bad plan number
+        var oldMove = handler.callbacks.move;
+        handler.callbacks.move = function() {
+            t.ok(false,
+                 "a second move with the same evt.xy should not trigger a move callback");
+        }
+        map.events.triggerEvent("mousemove", testEvents.move);
+        handler.callbacks.move = oldMove;
         
         // test mouseup
         handler.started = false;
@@ -170,6 +186,7 @@
         testEvents.done = testEvents.up;
         map.events.triggerEvent("mouseup", testEvents.up);
         t.ok(!this.started, "mouseup sets the started flag to false");
+        t.ok(!this.dragging, "mouseup sets the dragging flag to false");
         
         // test mouseout
         handler.started = false;