From a2f86154ce4720af5149053ca6908e1bfdcf6776 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Mon, 18 Mar 2013 11:38:01 -0700
Subject: [PATCH] Also show vertices on hover in draw modes

---
 css/map.css           | 13 ++++++++++
 js/id/renderer/map.js | 10 ++++++++
 js/id/svg/vertices.js | 57 +++++++++++++++++++++++++++++++------------
 3 files changed, 65 insertions(+), 15 deletions(-)

diff --git a/css/map.css b/css/map.css
index 170d44628..a65a08198 100644
--- a/css/map.css
+++ b/css/map.css
@@ -103,6 +103,19 @@ g.midpoint .shadow {
     fill-opacity: 0;
 }
 
+g.vertex.vertex-hover {
+    display: none;
+}
+
+.mode-draw-area .behavior-hover g.vertex.vertex-hover,
+.mode-draw-line .behavior-hover g.vertex.vertex-hover,
+.mode-add-area  .behavior-hover g.vertex.vertex-hover,
+.mode-add-line  .behavior-hover g.vertex.vertex-hover,
+.mode-add-point .behavior-hover g.vertex.vertex-hover,
+.mode-drag-node .behavior-hover g.vertex.vertex-hover {
+    display: block;
+}
+
 .behavior-hover g.vertex.hover:not(.selected) .shadow,
 .behavior-hover g.midpoint.hover:not(.selected) .shadow {
     fill-opacity: 0.3;
diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js
index 87746c1c6..72a389bfa 100644
--- a/js/id/renderer/map.js
+++ b/js/id/renderer/map.js
@@ -54,6 +54,16 @@ iD.Map = function(context) {
             .attr('id', 'surface')
             .call(iD.svg.Surface(context));
 
+        surface.on('mouseover.vertices', function() {
+            vertices.hover(d3.event.target.__data__);
+            surface.call(vertices, context.graph(), map.zoom());
+        });
+
+        surface.on('mouseout.vertices', function() {
+            vertices.hover(d3.event.relatedTarget && d3.event.relatedTarget.__data__);
+            surface.call(vertices, context.graph(), map.zoom());
+        });
+
         map.size(selection.size());
         map.surface = surface;
         map.layersurface = layergroup;
diff --git a/js/id/svg/vertices.js b/js/id/svg/vertices.js
index 8990b34bd..c16c76fd2 100644
--- a/js/id/svg/vertices.js
+++ b/js/id/svg/vertices.js
@@ -6,38 +6,55 @@ iD.svg.Vertices = function(projection, context) {
         fill:   [1,    1.5,   1.5,  1.5]
     };
 
-    return function drawVertices(surface, graph, zoom) {
-        var extent = context.map().extent(),
-            visible = {};
+    var hover;
 
-        function addVisible(entity) {
+    function visibleVertices() {
+        var visible = {};
+
+        function addChildVertices(entity, klass) {
             var i;
             if (entity.type === 'way') {
                 for (i = 0; i < entity.nodes.length; i++) {
-                    visible[entity.nodes[i]] = true;
+                    visible[entity.nodes[i]] = klass;
                 }
             } else if (entity.type === 'relation') {
                 for (i = 0; i < entity.members.length; i++) {
                     var member = context.entity(entity.members[i].id);
                     if (member) {
-                        addVisible(member);
+                        addChildVertices(member, klass);
                     }
                 }
             } else {
-                visible[entity.id] = true;
+                visible[entity.id] = klass;
             }
         }
 
-        context.selection().forEach(function(id) {
-            var entity = graph.entity(id);
-            if (entity.type === 'vertex') {
-                visible[id] = true;
-                context.parentWays(entity).forEach(addVisible);
-            } else {
-                addVisible(entity);
+        function addSiblingAndChildVertices(id, klass) {
+            var entity = context.entity(id);
+            if (entity && entity.type === 'vertex') {
+                visible[hover.id] = klass;
+                context.parentWays(entity).forEach(function(entity) {
+                    addChildVertices(entity, klass);
+                });
+            } else if (entity) {
+                addChildVertices(entity, klass);
             }
+        }
+
+        if (hover) {
+            addSiblingAndChildVertices(hover.id, 'vertex-hover');
+        }
+
+        context.selection().forEach(function(id) {
+            addSiblingAndChildVertices(id, 'vertex-selected');
         });
 
+        return visible;
+    }
+
+    function drawVertices(surface, graph, zoom) {
+        var visible = visibleVertices();
+
         function rendered(entity) {
             if (entity.geometry(graph) !== 'vertex')
                 return false;
@@ -47,7 +64,7 @@ iD.svg.Vertices = function(projection, context) {
                 return true;
         }
 
-        var entities = context.intersects(extent),
+        var entities = context.intersects(context.map().extent()),
             vertices = [];
 
         for (var i = 0; i < entities.length; i++) {
@@ -81,6 +98,8 @@ iD.svg.Vertices = function(projection, context) {
         groups.attr('transform', iD.svg.PointTransform(projection))
             .call(iD.svg.TagClasses())
             .call(iD.svg.MemberClasses(graph))
+            .classed('vertex-hover', function(entity) { return visible[entity.id] === 'vertex-hover'; })
+            .classed('vertex-selected', function(entity) { return visible[entity.id] === 'vertex-selected'; })
             .classed('tagged', function(entity) { return entity.hasInterestingTags(); })
             .classed('shared', function(entity) { return graph.isShared(entity); });
 
@@ -148,5 +167,13 @@ iD.svg.Vertices = function(projection, context) {
 
         groups.exit()
             .remove();
+    }
+
+    drawVertices.hover = function(_) {
+        if (!arguments.length) return hover;
+        hover = _;
+        return drawVertices;
     };
+
+    return drawVertices;
 };