From b289c4d345d4da782b0320a2b731ffead069df25 Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@7thposition.com>
Date: Thu, 26 Jun 2014 16:47:58 -0400
Subject: [PATCH] Set vertex attributes on update selection not enter (re:
 01ca07f)

---
 js/id/svg/vertices.js | 64 +++++++++++++++++++++++++++++--------------
 1 file changed, 44 insertions(+), 20 deletions(-)

diff --git a/js/id/svg/vertices.js b/js/id/svg/vertices.js
index 6baa2dc11..211c49721 100644
--- a/js/id/svg/vertices.js
+++ b/js/id/svg/vertices.js
@@ -44,11 +44,7 @@ iD.svg.Vertices = function(projection, context) {
         return vertices;
     }
 
-    function draw(groups, vertices, klass, graph, zoom) {
-        groups = groups.data(vertices, function(entity) {
-            return iD.Entity.key(entity) + ',' + zoom;
-        });
-
+    function draw(selection, vertices, klass, graph, zoom) {
         var icons = {},
             z;
 
@@ -60,6 +56,10 @@ iD.svg.Vertices = function(projection, context) {
             z = 2;
         }
 
+        var groups = selection.data(vertices, function(entity) {
+            return iD.Entity.key(entity);
+        });
+
         function icon(entity) {
             if (entity.id in icons) return icons[entity.id];
             icons[entity.id] =
@@ -68,27 +68,50 @@ iD.svg.Vertices = function(projection, context) {
             return icons[entity.id];
         }
 
-        function circle(klass) {
-            var rads = radiuses[klass];
+        function classCircle(klass) {
             return function(entity) {
-                var i = icon(entity),
-                    c = i ? 0.5 : 0,
-                    r = rads[i ? 3 : z];
                 this.setAttribute('class', 'node vertex ' + klass + ' ' + entity.id);
-                this.setAttribute('cx', c);
-                this.setAttribute('cy', -c);
-                this.setAttribute('r', r);
             };
         }
 
-        var enter = groups.enter().append('g')
+        function setAttributes(selection) {
+            ['shadow','stroke','fill'].forEach(function(klass) {
+                var rads = radiuses[klass];
+                selection.selectAll('.' + klass)
+                    .each(function(entity) {
+                        var i = z && icon(entity),
+                            c = i ? 0.5 : 0,
+                            r = rads[i ? 3 : z];
+                        this.setAttribute('cx', c);
+                        this.setAttribute('cy', -c);
+                        this.setAttribute('r', r);
+                        if (i && klass === 'fill') {
+                            this.setAttribute('visibility', 'hidden');
+                        } else {
+                            this.removeAttribute('visibility');
+                        }
+                    });
+            });
+
+            selection.selectAll('use')
+                .each(function() {
+                    if (z) {
+                        this.removeAttribute('visibility');
+                    } else {
+                        this.setAttribute('visibility', 'hidden');
+                    }
+                });
+        }
+
+        var enter = groups.enter()
+            .append('g')
             .attr('class', function(d) { return 'node vertex ' + klass + ' ' + d.id; });
 
         enter.append('circle')
-            .each(circle('shadow'));
+            .each(classCircle('shadow'));
 
         enter.append('circle')
-            .each(circle('stroke'));
+            .each(classCircle('stroke'));
 
         // Vertices with icons get a `use`.
         enter.filter(function(d) { return icon(d); })
@@ -97,14 +120,15 @@ iD.svg.Vertices = function(projection, context) {
             .attr('clip-path', 'url(#clip-square-12)')
             .attr('xlink:href', function(d) { return '#maki-' + icon(d) + '-12'; });
 
-        // Vertices with tags get a `circle`.
-        enter.filter(function(d) { return !icon(d) && d.hasInterestingTags(); })
+        // Vertices with tags get a fill.
+        enter.filter(function(d) { return d.hasInterestingTags(); })
             .append('circle')
-            .each(circle('fill'));
+            .each(classCircle('fill'));
 
         groups
             .attr('transform', iD.svg.PointTransform(projection))
-            .classed('shared', function(entity) { return graph.isShared(entity); });
+            .classed('shared', function(entity) { return graph.isShared(entity); })
+            .call(setAttributes);
 
         groups.exit()
             .remove();