Highlight relation members in yellow when a relation is selected, inc…

…luding in a multi-selection (close #5766)
facebook · Jun 18, 2019 · cf29355 · cf29355
1 parent 1a113c0
commit cf29355
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 4 deletions.
diff --git a/css/20_map.css b/css/20_map.css
@@ -292,6 +292,14 @@ g.point.tag-wikidata path.stroke {
 }
 
 
+/* Selected Members */
+g.vertex.selected-member .shadow,
+g.point.selected-member .shadow,
+path.shadow.selected-member {
+    stroke-opacity: 0.95;
+    stroke: #FFDE70;
+}
+
 /* Highlighting */
 g.point.highlighted .shadow,
 path.shadow.highlighted {

diff --git a/modules/modes/select.js b/modules/modes/select.js
@@ -21,8 +21,8 @@ import * as Operations from '../operations/index';
 import { uiEditMenu } from '../ui/edit_menu';
 import { uiCmd } from '../ui/cmd';
 import {
-    utilArrayIntersection, utilEntityOrMemberSelector,
-    utilEntitySelector, utilKeybinding
+    utilArrayIntersection, utilEntityOrDeepMemberSelector,
+    utilEntitySelector, utilDeepMemberSelector, utilKeybinding
 } from '../util';
 
 
@@ -349,7 +349,6 @@ export function modeSelect(context, selectedIDs) {
 
             if (entity && context.geometry(entity.id) === 'relation') {
                 _suppressMenu = true;
-                return;
             }
 
             surface.selectAll('.related')
@@ -362,7 +361,7 @@ export function modeSelect(context, selectedIDs) {
             }
 
             var selection = context.surface()
-                .selectAll(utilEntityOrMemberSelector(selectedIDs, context.graph()));
+                .selectAll(utilEntityOrDeepMemberSelector(selectedIDs, context.graph()));
 
             if (selection.empty()) {
                 // Return to browse mode if selected DOM elements have
@@ -372,6 +371,9 @@ export function modeSelect(context, selectedIDs) {
                     context.enter(modeBrowse(context));
                 }
             } else {
+                context.surface()
+                    .selectAll(utilDeepMemberSelector(selectedIDs, context.graph()))
+                    .classed('selected-member', true);
                 selection
                     .classed('selected', true);
             }
@@ -517,6 +519,10 @@ export function modeSelect(context, selectedIDs) {
         surface
             .on('dblclick.select', null);
 
+        surface
+            .selectAll('.selected-member')
+            .classed('selected-member', false);
+
         surface
             .selectAll('.selected')
             .classed('selected', false);

diff --git a/modules/util/index.js b/modules/util/index.js
@@ -9,6 +9,7 @@ export { utilArrayUniqBy } from './array';
 
 export { utilAsyncMap } from './util';
 export { utilCleanTags } from './clean_tags';
+export { utilDeepMemberSelector } from './util';
 export { utilDetect } from './detect';
 export { utilDisplayName } from './util';
 export { utilDisplayNameForPath } from './util';

diff --git a/modules/util/util.js b/modules/util/util.js
@@ -89,6 +89,32 @@ export function utilEntityOrDeepMemberSelector(ids, graph) {
     }
 }
 
+// returns an selector to select entity ids for:
+//  - deep descendant entityIDs for any of those entities that are relations
+export function utilDeepMemberSelector(ids, graph) {
+    var idsSet = new Set(ids);
+    var seen = new Set();
+    var returners = new Set();
+    ids.forEach(collectDeepDescendants);
+    return utilEntitySelector(Array.from(returners));
+
+    function collectDeepDescendants(id) {
+        if (seen.has(id)) return;
+        seen.add(id);
+
+        if (!idsSet.has(id)) {
+            returners.add(id);
+        }
+
+        var entity = graph.hasEntity(id);
+        if (!entity || entity.type !== 'relation') return;
+
+        entity.members
+            .map(function(member) { return member.id; })
+            .forEach(collectDeepDescendants);   // recurse
+    }
+}
+
 
 // Adds or removes highlight styling for the specified entities
 export function utilHighlightEntities(ids, highlighted, context) {