Fix various line and area drawing bugs

The way and vertex being drawn get an `active` class,
which can be used to hide the vertex and set
`pointer-events: none` on the line.

Use the correct cursors when connecting (fixes #293).

Splice into existing lines at the correct index and
location (fixes #246).

css/map.css

@@ -313,10 +313,30 @@ text.tag-oneway {
     cursor:url(../img/cursor-draw.png) 9 9, auto;
 }
 
+.mode-draw-line .way,
+.mode-add-line  .way {
+    cursor:url(../img/cursor-draw-connect-line.png) 9 9, auto;
+}
+
+.mode-draw-line .vertex,
+.mode-draw-area .vertex,
+.mode-add-line  .vertex,
+.mode-add-area  .vertex {
+    cursor:url(../img/cursor-draw-connect-vertex.png) 9 9, auto;
+}
+
 .mode-add-point #map:hover {
     cursor:url(../img/cursor-draw-point.png) 18 18, auto;
 }
 
-#map.finish-area:hover {
-    cursor:url(../img/cursor-draw-finish.png) 9 9, auto;
+/* Modes */
+
+.mode-draw-line .vertex.active,
+.mode-draw-area .vertex.active {
+    display: none;
+}
+
+.mode-draw-line .way.active,
+.mode-draw-area .way.active {
+    pointer-events: none;
 }

js/id/modes/draw_area.js

@@ -6,6 +6,7 @@ iD.modes.DrawArea = function(wayId) {
 
     mode.enter = function() {
         var map = mode.map,
+            surface = map.surface,
             history = mode.history,
             controller = mode.controller,
             way = history.graph().entity(wayId),
@@ -24,6 +25,10 @@ iD.modes.DrawArea = function(wayId) {
             iD.actions.AddNode(node),
             iD.actions.AddWayNode(way.id, node.id, -1));
 
+        surface.selectAll('.way, .node')
+            .filter(function (d) { return d.id === wayId || d.id === node.id; })
+            .classed('active', true);
+
         function mousemove() {
             history.replace(iD.actions.MoveNode(node.id, map.mouseCoordinates()));
         }
@@ -111,7 +116,7 @@ iD.modes.DrawArea = function(wayId) {
             controller.enter(iD.modes.Browse());
         }
 
-        map.surface
+        surface
             .on('mousemove.drawarea', mousemove)
             .on('mouseover.drawarea', mouseover)
             .on('click.drawarea', click);
@@ -124,10 +129,15 @@ iD.modes.DrawArea = function(wayId) {
     };
 
     mode.exit = function() {
+        var surface = mode.map.surface;
+
+        surface.selectAll('.way, .node')
+            .classed('active', false);
+
         mode.map.hint(false);
         mode.map.fastEnable(true);
 
-        mode.map.surface
+        surface
             .on('mousemove.drawarea', null)
             .on('click.drawarea', null);
 

js/id/modes/draw_line.js

@@ -6,6 +6,7 @@ iD.modes.DrawLine = function(wayId, direction) {
 
     mode.enter = function() {
         var map = mode.map,
+            surface = map.surface,
             history = mode.history,
             controller = mode.controller,
             way = history.graph().entity(wayId),
@@ -24,6 +25,10 @@ iD.modes.DrawLine = function(wayId, direction) {
             iD.actions.AddNode(node),
             iD.actions.AddWayNode(wayId, node.id, index));
 
+        surface.selectAll('.way, .node')
+            .filter(function (d) { return d.id === wayId || d.id === node.id; })
+            .classed('active', true);
+
         function mousemove() {
             history.replace(iD.actions.MoveNode(node.id, map.mouseCoordinates()));
         }
@@ -57,10 +62,11 @@ iD.modes.DrawLine = function(wayId, direction) {
 
             } else if (datum.type === 'way') {
                 // connect the way to an existing way
-                var connectedIndex = iD.util.geo.chooseIndex(datum, d3.mouse(map.surface.node()), map);
+                var choice = iD.util.geo.chooseIndex(datum, d3.mouse(surface.node()), map);
 
                 history.replace(
-                    iD.actions.AddWayNode(datum.id, node.id, connectedIndex),
+                    iD.actions.MoveNode(node.id, choice.loc),
+                    iD.actions.AddWayNode(datum.id, node.id, choice.index),
                     'added to a line');
 
                 controller.enter(iD.modes.DrawLine(wayId, direction));
@@ -108,7 +114,7 @@ iD.modes.DrawLine = function(wayId, direction) {
             controller.enter(iD.modes.Browse());
         }
 
-        map.surface
+        surface
             .on('mousemove.drawline', mousemove)
             .on('click.drawline', click);
 
@@ -120,10 +126,15 @@ iD.modes.DrawLine = function(wayId, direction) {
     };
 
     mode.exit = function() {
+        var surface = mode.map.surface;
+
+        surface.selectAll('.way, .node')
+            .classed('active', false);
+
         mode.map.hint(false);
         mode.map.fastEnable(true);
 
-        mode.map.surface
+        surface
             .on('mousemove.drawline', null)
             .on('click.drawline', null);