Show only visible features in list

js/id/modes/select.js

@@ -144,27 +144,12 @@ iD.modes.Select = function(context, selectedIDs) {
             }
         }
 
-        function selected() {
-            var s = iD.util.entitySelector(selectedIDs);
-
-            selectedIDs.forEach(function(id) {
-                var entity = context.hasEntity(id);
-                if (entity && entity.type === 'relation') {
-                    entity.members.forEach(function(member) {
-                        s += ',.' + member.id
-                    });
-                }
-            });
-
-            return s;
-        }
-
         d3.select(document)
             .call(keybinding);
 
         function selectElements() {
             context.surface()
-                .selectAll(selected())
+                .selectAll(iD.util.entityOrMemberSelector(selectedIDs, context.graph()))
                 .classed('selected', true);
         }
 

js/id/renderer/map.js

@@ -63,7 +63,7 @@ iD.Map = function(context) {
             if (map.editable() && !transformed) {
                 var hover = d3.event.target.__data__;
                 surface.call(vertices.drawHover, context.graph(), hover, map.extent(), map.zoom());
-                dispatch.drawn(map);
+                dispatch.drawn(map, {full: false});
             }
         });
 
@@ -71,7 +71,7 @@ iD.Map = function(context) {
             if (map.editable() && !transformed) {
                 var hover = d3.event.relatedTarget && d3.event.relatedTarget.__data__;
                 surface.call(vertices.drawHover, context.graph(), hover, map.extent(), map.zoom());
-                dispatch.drawn(map);
+                dispatch.drawn(map, {full: false});
             }
         });
 
@@ -83,7 +83,7 @@ iD.Map = function(context) {
                     graph = context.graph();
                 surface.call(vertices, graph, all, filter, extent, map.zoom());
                 surface.call(midpoints, graph, all, filter, extent);
-                dispatch.drawn(map);
+                dispatch.drawn(map, {full: false});
             }
         });
 
@@ -146,12 +146,12 @@ iD.Map = function(context) {
             .call(midpoints, graph, all, filter, map.extent())
             .call(labels, graph, all, filter, dimensions, !difference && !extent);
 
-        dispatch.drawn(map);
+        dispatch.drawn(map, {full: true});
     }
 
     function editOff() {
         surface.selectAll('.layer *').remove();
-        dispatch.drawn(map);
+        dispatch.drawn(map, {full: true});
     }
 
     function zoomPan() {

js/id/ui/feature_list.js

@@ -41,7 +41,13 @@ iD.ui.FeatureList = function(context) {
             .on('change.feature-list', drawList);
 
         context.map()
-            .on('drawn', drawList);
+            .on('drawn.feature-list', mapDrawn);
+
+        function mapDrawn(e) {
+            if (e.full) {
+                drawList();
+            }
+        }
 
         function features() {
             var result = [],
@@ -59,6 +65,9 @@ iD.ui.FeatureList = function(context) {
                 if (entity.geometry(graph) === 'vertex')
                     continue;
 
+                if (context.surface().selectAll(iD.util.entityOrMemberSelector([entity.id], graph)).empty())
+                    continue;
+
                 var preset = context.presets().match(entity, context.graph()),
                     name = iD.util.displayName(entity) || '';
 
@@ -117,15 +126,7 @@ iD.ui.FeatureList = function(context) {
         }
 
         function mouseover(entity) {
-            var selector = '.' + entity.id;
-
-            if (entity.type === 'relation') {
-                entity.members.forEach(function(member) {
-                    selector += ', .' + member.id;
-                });
-            }
-
-            context.surface().selectAll(selector)
+            context.surface().selectAll(iD.util.entityOrMemberSelector([entity.id], context.graph()))
                 .classed('hover', true);
         }
 

js/id/util.js

@@ -10,6 +10,21 @@ iD.util.entitySelector = function(ids) {
     return ids.length ? '.' + ids.join(',.') : 'nothing';
 };
 
+iD.util.entityOrMemberSelector = function(ids, graph) {
+    var s = iD.util.entitySelector(ids);
+
+    ids.forEach(function(id) {
+        var entity = graph.hasEntity(id);
+        if (entity && entity.type === 'relation') {
+            entity.members.forEach(function(member) {
+                s += ',.' + member.id
+            });
+        }
+    });
+
+    return s;
+};
+
 iD.util.displayName = function(entity) {
     var localeName = 'name:' + iD.detect().locale.toLowerCase().split('-')[0];
     return entity.tags[localeName] || entity.tags.name || entity.tags.ref;