Show vertices only for selected way (#1022)

js/id/id.js

@@ -17,7 +17,7 @@ window.iD = function () {
     };
 
     var history = iD.History(context),
-        dispatch = d3.dispatch('enter', 'exit', 'toggleFullscreen'),
+        dispatch = d3.dispatch('enter', 'exit', 'select', 'toggleFullscreen'),
         mode,
         container,
         ui = iD.ui(context),
@@ -83,6 +83,8 @@ window.iD = function () {
 
     /* Modes */
     context.enter = function(newMode) {
+        var s0 = context.selection();
+
         if (mode) {
             mode.exit();
             dispatch.exit(mode);
@@ -91,6 +93,9 @@ window.iD = function () {
         mode = newMode;
         mode.enter();
         dispatch.enter(mode);
+
+        var s1 = context.selection();
+        dispatch.select(s1, s0);
     };
 
     context.mode = function() {
@@ -98,7 +103,7 @@ window.iD = function () {
     };
 
     context.selection = function() {
-        if (mode.id === 'select') {
+        if (mode && mode.id === 'select') {
             return mode.selection();
         } else {
             return [];

js/id/renderer/map.js

@@ -21,7 +21,7 @@ iD.Map = function(context) {
         vertices = iD.svg.Vertices(roundedProjection, context),
         lines = iD.svg.Lines(projection),
         areas = iD.svg.Areas(roundedProjection),
-        midpoints = iD.svg.Midpoints(roundedProjection),
+        midpoints = iD.svg.Midpoints(roundedProjection, context),
         labels = iD.svg.Labels(roundedProjection, context),
         tail = iD.ui.Tail(),
         surface, layergroup;
@@ -30,6 +30,10 @@ iD.Map = function(context) {
         context.history()
             .on('change.map', redraw);
 
+        context.on('select.map', function() {
+            redraw();
+        });
+
         selection.call(zoom);
 
         layergroup = selection.append('div')
@@ -104,7 +108,7 @@ iD.Map = function(context) {
         } else {
             surface
                 .call(points, graph, all, filter)
-                .call(vertices, graph, all, filter, map.zoom())
+                .call(vertices, graph, map.zoom())
                 .call(lines, graph, all, filter, dimensions)
                 .call(areas, graph, all, filter)
                 .call(midpoints, graph, all, filter, extent)

js/id/svg/midpoints.js

@@ -1,19 +1,15 @@
-iD.svg.Midpoints = function(projection) {
+iD.svg.Midpoints = function(projection, context) {
     return function drawMidpoints(surface, graph, entities, filter, extent) {
         var midpoints = {};
 
-        var vertices = 0;
-
         for (var i = 0; i < entities.length; i++) {
+            var entity = entities[i];
 
-            if (entities[i].geometry(graph) === 'vertex' && vertices++ > 2000) {
-                return surface.selectAll('.layer-hit g.midpoint').remove();
-            }
+            if (entity.type !== 'way') continue;
+            if (context.selection().indexOf(entity.id) < 0) continue;
 
-            if (entities[i].type !== 'way') continue;
 
-            var entity = entities[i],
-                nodes = graph.childNodes(entity);
+            var nodes = graph.childNodes(entity);
 
             // skip the last node because it is always repeated
             for (var j = 0; j < nodes.length - 1; j++) {

js/id/svg/vertices.js

@@ -6,22 +6,58 @@ iD.svg.Vertices = function(projection, context) {
         fill:   [1,    1.5,   1.5,  1.5]
     };
 
-    return function drawVertices(surface, graph, entities, filter, zoom) {
-        var vertices = [];
+    return function drawVertices(surface, graph, zoom) {
+        var extent = context.map().extent(),
+            visible = {};
 
-        for (var i = 0; i < entities.length; i++) {
-            var entity = entities[i];
-            if (entity.geometry(graph) === 'vertex') {
-                vertices.push(entity);
+        function addVisible(entity) {
+            var i;
+            if (entity.type === 'way') {
+                for (i = 0; i < entity.nodes.length; i++) {
+                    visible[entity.nodes[i]] = true;
+                }
+            } 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);
+                    }
+                }
+            } else {
+                visible[entity.id] = true;
             }
         }
 
-        if (vertices.length > 2000) {
-            return surface.select('.layer-hit').selectAll('g.vertex').remove();
+        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 rendered(entity) {
+            if (entity.geometry(graph) !== 'vertex')
+                return false;
+            if (entity.id in visible)
+                return true;
+            if (entity.hasInterestingTags())
+                return true;
+        }
+
+        var entities = context.intersects(extent),
+            vertices = [];
+
+        for (var i = 0; i < entities.length; i++) {
+            var entity = entities[i];
+            if (rendered(entity)) {
+                vertices.push(entity)
+            }
         }
 
         var groups = surface.select('.layer-hit').selectAll('g.vertex')
-            .filter(filter)
             .data(vertices, iD.Entity.key);
 
         var group = groups.enter()