Refactor drag features into sub-control and allow dragging in selection

mode

index.html

@@ -57,6 +57,7 @@
         <script src='js/id/actions/reverse_way.js'></script>
 
         <script src='js/id/modes.js'></script>
+        <script src='js/id/modes/drag_features.js'></script>
         <script src='js/id/modes/add_area.js'></script>
         <script src='js/id/modes/add_place.js'></script>
         <script src='js/id/modes/add_road.js'></script>

js/id/modes/browse.js

@@ -6,44 +6,8 @@ iD.modes.Browse = function() {
         description: 'Pan and zoom the map'
     };
 
-    var dragging, incarnated;
-
-    var dragbehavior = d3.behavior.drag()
-        .origin(function(entity) {
-            var p = mode.map.projection(entity.loc);
-            return { x: p[0], y: p[1] };
-        })
-        .on('drag', function(entity) {
-            d3.event.sourceEvent.stopPropagation();
-            if (!dragging) {
-                if (entity.accuracy) {
-                    var node = iD.Node({ loc: entity.loc });
-                    mode.history.perform(
-                        iD.actions.AddNode(node),
-                        iD.actions.AddWayNode(entity.way, node.id, entity.index));
-                    incarnated = node.id;
-                }
-                dragging = iD.util.trueObj([entity.id].concat(
-                    _.pluck(mode.history.graph().parentWays(entity.id), 'id')));
-                mode.history.perform(iD.actions.Noop());
-            }
-            if (incarnated) entity = mode.history.graph().entity(incarnated);
-            var to = mode.map.projection.invert([d3.event.x, d3.event.y]);
-            mode.history.replace(iD.actions.Move(entity.id, to));
-        })
-        .on('dragend', function () {
-            if (!dragging) return;
-            dragging = undefined;
-            incarnated = undefined;
-        });
-
     mode.enter = function() {
-        mode.map.surface
-            .call(dragbehavior)
-            .call(d3.latedrag()
-                 .filter(function(d) {
-                     return (d.type === 'node' || d.accuracy);
-                 }));
+        iD.modes._dragFeatures(mode);
         mode.map.surface.on('click.browse', function () {
             var datum = d3.select(d3.event.target).datum();
             if (datum instanceof iD.Entity) {

js/id/modes/drag_features.js

@@ -0,0 +1,39 @@
+iD.modes._dragFeatures = function(mode) {
+    var dragging, incarnated;
+
+    var dragbehavior = d3.behavior.drag()
+        .origin(function(entity) {
+            var p = mode.map.projection(entity.loc);
+            return { x: p[0], y: p[1] };
+        })
+        .on('drag', function(entity) {
+            d3.event.sourceEvent.stopPropagation();
+            if (!dragging) {
+                if (entity.accuracy) {
+                    var node = iD.Node({ loc: entity.loc });
+                    mode.history.perform(
+                        iD.actions.AddNode(node),
+                        iD.actions.AddWayNode(entity.way, node.id, entity.index));
+                    incarnated = node.id;
+                }
+                dragging = iD.util.trueObj([entity.id].concat(
+                    _.pluck(mode.history.graph().parentWays(entity.id), 'id')));
+                mode.history.perform(iD.actions.Noop());
+            }
+            if (incarnated) entity = mode.history.graph().entity(incarnated);
+            var to = mode.map.projection.invert([d3.event.x, d3.event.y]);
+            mode.history.replace(iD.actions.Move(entity.id, to));
+        })
+        .on('dragend', function () {
+            if (!dragging) return;
+            dragging = undefined;
+            incarnated = undefined;
+        });
+
+    mode.map.surface
+        .call(dragbehavior)
+        .call(d3.latedrag()
+             .filter(function(d) {
+                 return (d.type === 'node' || d.accuracy);
+             }));
+};

js/id/modes/select.js

@@ -47,6 +47,8 @@ iD.modes.Select = function (entity) {
     }
 
     mode.enter = function () {
+        iD.modes._dragFeatures(mode);
+
         target = mode.map.surface.selectAll("*")
             .filter(function (d) { return d === entity; });
 
@@ -88,6 +90,8 @@ iD.modes.Select = function (entity) {
     };
 
     mode.exit = function () {
+        mode.map.surface.on('mousedown.latedrag', null);
+
         d3.select('.inspector-wrap')
             .style('display', 'none');
 

js/id/renderer/map.js

@@ -286,7 +286,7 @@ iD.Map = function() {
                     'translate(' + ~~(a[0] - b[0]) + 'px,' + ~~(a[1] - b[1]) + 'px)');
             }
         } else {
-            redraw();
+            redraw({ moved: true });
             translateStart = null;
         }
     }
@@ -299,14 +299,14 @@ iD.Map = function() {
         redraw();
     }
 
-    function redraw() {
-        if (!dragging) {
+    function redraw(e) {
+        if (e && e.moved) {
             dispatch.move(map);
             tilegroup.call(background);
         }
         if (map.zoom() > 16) {
             connection.loadTiles(projection);
-            drawVector(dragging);
+            drawVector();
         } else {
             hideVector();
         }
@@ -356,7 +356,7 @@ iD.Map = function() {
         t[1] += center[1] - l[1];
         projection.translate(t);
         zoom.translate(projection.translate());
-        return redraw();
+        return redraw({ moved: true });
     };
 
     map.size = function(_) {
@@ -367,7 +367,7 @@ iD.Map = function() {
             .selectAll('#clip-rect')
             .size(dimensions);
         background.size(dimensions);
-        return redraw();
+        return redraw({ moved: true });
     };
 
     map.zoomIn = function() { return map.zoom(Math.ceil(map.zoom() + 1)); };
@@ -384,7 +384,7 @@ iD.Map = function() {
                 t[0] - ll[0] + c[0],
                 t[1] - ll[1] + c[1]]);
             zoom.translate(projection.translate());
-            return redraw();
+            return redraw({ moved: true });
         }
     };