Move operation (fixes #536)

index.html

@@ -104,11 +104,13 @@
         <script src='js/id/modes/browse.js'></script>
         <script src='js/id/modes/draw_area.js'></script>
         <script src='js/id/modes/draw_line.js'></script>
+        <script src='js/id/modes/move_way.js'></script>
         <script src='js/id/modes/select.js'></script>
 
         <script src='js/id/operations.js'></script>
         <script src='js/id/operations/circular.js'></script>
         <script src='js/id/operations/delete.js'></script>
+        <script src='js/id/operations/move.js'></script>
         <script src='js/id/operations/reverse.js'></script>
         <script src='js/id/operations/split.js'></script>
         <script src='js/id/operations/unjoin.js'></script>

js/id/modes/move_way.js

@@ -0,0 +1,69 @@
+iD.modes.MoveWay = function(wayId) {
+    var mode = {
+        id: 'move-way'
+    };
+
+    var keybinding = d3.keybinding('move-way');
+
+    mode.enter = function() {
+        var map = mode.map,
+            history = mode.history,
+            graph = history.graph(),
+            selection = map.surface,
+            controller = mode.controller,
+            projection = map.projection;
+
+        var way = graph.entity(wayId),
+            origin = d3.mouse(selection.node());
+
+        history.perform(
+            iD.actions.Noop(),
+            'moved a way');
+
+        function move() {
+            var p = d3.mouse(selection.node()),
+                delta = [p[0] - origin[0],
+                         p[1] - origin[1]];
+
+            origin = p;
+
+            history.replace(
+                iD.actions.MoveWay(wayId, delta, projection),
+                'moved a way');
+        }
+
+        function finish() {
+            d3.event.stopPropagation();
+            controller.enter(iD.modes.Select(way, true));
+        }
+
+        function cancel() {
+            history.pop();
+            controller.enter(iD.modes.Select(way, true));
+        }
+
+        selection
+            .on('mousemove.move-way', move)
+            .on('click.move-way', finish);
+
+        keybinding
+            .on('⎋', cancel)
+            .on('↩', finish);
+
+        d3.select(document)
+            .call(keybinding);
+    };
+
+    mode.exit = function() {
+        var map = mode.map,
+            selection = map.surface;
+
+        selection
+            .on('mousemove.move-way', null)
+            .on('click.move-way', null);
+
+        keybinding.off();
+    };
+
+    return mode;
+};

js/id/modes/select.js

@@ -43,7 +43,6 @@ iD.modes.Select = function(entity, initial) {
         behaviors = [
             iD.behavior.Hover(),
             iD.behavior.DragNode(mode),
-            iD.behavior.DragWay(mode),
             iD.behavior.DragMidpoint(mode)];
 
         behaviors.forEach(function(behavior) {

js/id/operations/move.js

@@ -0,0 +1,18 @@
+iD.operations.Move = function(entityId, mode) {
+    var operation = function() {
+        mode.controller.enter(iD.modes.MoveWay(entityId));
+    };
+
+    operation.available = function(graph) {
+        return graph.entity(entityId).type === 'way';
+    };
+
+    operation.enabled = function() {
+        return true;
+    };
+
+    operation.id = "move";
+    operation.title = "Move";
+
+    return operation;
+};

js/id/ui/radial_menu.js

@@ -8,6 +8,11 @@ iD.ui.RadialMenu = function(entity, mode) {
                 .map(function (o) { return o(entity.id, mode); })
                 .filter(function (o) { return o.available(graph); });
 
+        function click(operation) {
+            d3.event.stopPropagation();
+            operation(history);
+        }
+
         var arc = d3.svg.arc()
             .outerRadius(70)
             .innerRadius(30)
@@ -28,7 +33,7 @@ iD.ui.RadialMenu = function(entity, mode) {
             .attr('class', function (d) { return 'radial-menu-item radial-menu-item-' + d.id; })
             .attr('d', arc)
             .classed('disabled', function (d) { return !d.enabled(graph); })
-            .on('click', function (d) { d(history); });
+            .on('click', click);
 
         arcs.append('text')
             .attr("transform", function(d, i) { return "translate(" + arc.centroid(d, i) + ")"; })

test/index.html

@@ -98,11 +98,13 @@
     <script src='../js/id/modes/browse.js'></script>
     <script src='../js/id/modes/draw_area.js'></script>
     <script src='../js/id/modes/draw_line.js'></script>
+    <script src='../js/id/modes/move_way.js'></script>
     <script src='../js/id/modes/select.js'></script>
 
     <script src='../js/id/operations.js'></script>
     <script src='../js/id/operations/circular.js'></script>
     <script src='../js/id/operations/delete.js'></script>
+    <script src='../js/id/operations/move.js'></script>
     <script src='../js/id/operations/reverse.js'></script>
     <script src='../js/id/operations/split.js'></script>
     <script src='../js/id/operations/unjoin.js'></script>