Add '\' key to toggle related parent, add .related class (like hover)

css/map.css

@@ -37,6 +37,7 @@ g.point .shadow {
     stroke-opacity: 0;
 }
 
+g.point.related:not(.selected) .shadow,
 g.point.hover:not(.selected) .shadow {
     stroke-opacity: 0.5;
 }
@@ -104,7 +105,9 @@ g.vertex.vertex-hover {
     display: block;
 }
 
+g.vertex.related:not(.selected) .shadow,
 g.vertex.hover:not(.selected) .shadow,
+g.midpoint.related:not(.selected) .shadow,
 g.midpoint.hover:not(.selected) .shadow {
     fill-opacity: 0.5;
 }
@@ -144,6 +147,7 @@ path.shadow {
     stroke-opacity: 0;
 }
 
+path.shadow.related:not(.selected),
 path.shadow.hover:not(.selected) {
     stroke-opacity: 0.4;
 }
@@ -1600,6 +1604,7 @@ text.gpx {
     stroke-width: 8;
 }
 
+.fill-wireframe path.shadow.related:not(.selected),
 .fill-wireframe path.shadow.hover:not(.selected) {
     stroke-opacity: 0.4;
 }

modules/modes/select.js

@@ -30,10 +30,10 @@ import { modeDragNode } from './drag_node';
 import * as Operations from '../operations/index';
 import { uiRadialMenu, uiSelectionList } from '../ui/index';
 import { uiCmd } from '../ui/cmd';
-import { utilEntityOrMemberSelector } from '../util/index';
+import { utilEntityOrMemberSelector, utilEntitySelector } from '../util/index';
 
 
-var selectedLastParent;
+var relatedParent;
 
 
 export function modeSelect(context, selectedIDs) {
@@ -71,7 +71,7 @@ export function modeSelect(context, selectedIDs) {
     }
 
 
-    // find the common parent ways for nextNode, previousNode
+    // find the common parent ways for nextVertex, previousVertex
     function commonParents() {
         var graph = context.graph(),
             commonParents = [];
@@ -100,18 +100,21 @@ export function modeSelect(context, selectedIDs) {
 
     function singularParent() {
         var parents = commonParents();
-        if (!parents) return;
+        if (!parents) {
+            relatedParent = null;
+            return null;
+        }
 
-        // selectedLastParent is used when we visit a vertex with multiple
+        // relatedParent is used when we visit a vertex with multiple
         // parents, and we want to remember which parent line we started on.
 
         if (parents.length === 1) {
-            selectedLastParent = parents[0];  // remember this parent for later
-            return selectedLastParent;
+            relatedParent = parents[0];  // remember this parent for later
+            return relatedParent;
         }
 
-        if (parents.indexOf(selectedLastParent) !== -1) {
-            return selectedLastParent;   // prefer the previously seen parent
+        if (parents.indexOf(relatedParent) !== -1) {
+            return relatedParent;   // prefer the previously seen parent
         }
 
         return parents[0];
@@ -233,14 +236,24 @@ export function modeSelect(context, selectedIDs) {
 
 
         function selectElements(drawn) {
-            var entity = singular();
+            var surface = context.surface(),
+                entity = singular();
+
             if (entity && context.geometry(entity.id) === 'relation') {
                 suppressMenu = true;
                 return;
             }
 
+            var parent = singularParent();
+            if (parent) {
+                surface.selectAll('.related')
+                    .classed('related', false);
+                surface.selectAll(utilEntitySelector([relatedParent]))
+                    .classed('related', true);
+            }
+
             var selection = context.surface()
-                    .selectAll(utilEntityOrMemberSelector(selectedIDs, context.graph()));
+                .selectAll(utilEntityOrMemberSelector(selectedIDs, context.graph()));
 
             if (selection.empty()) {
                 // Return to browse mode if selected DOM elements have
@@ -263,7 +276,7 @@ export function modeSelect(context, selectedIDs) {
         }
 
 
-        function firstNode() {
+        function firstVertex() {
             d3.event.preventDefault();
             var parent = singularParent();
             if (parent) {
@@ -275,7 +288,7 @@ export function modeSelect(context, selectedIDs) {
         }
 
 
-        function lastNode() {
+        function lastVertex() {
             d3.event.preventDefault();
             var parent = singularParent();
             if (parent) {
@@ -287,7 +300,7 @@ export function modeSelect(context, selectedIDs) {
         }
 
 
-        function previousNode() {
+        function previousVertex() {
             d3.event.preventDefault();
             var parent = singularParent();
             if (!parent) return;
@@ -311,7 +324,7 @@ export function modeSelect(context, selectedIDs) {
         }
 
 
-        function nextNode() {
+        function nextVertex() {
             d3.event.preventDefault();
             var parent = singularParent();
             if (!parent) return;
@@ -335,6 +348,26 @@ export function modeSelect(context, selectedIDs) {
         }
 
 
+        function nextParent() {
+            d3.event.preventDefault();
+            var parents = _.uniq(commonParents());
+            if (!parents || parents.length < 2) return;
+
+            var index = parents.indexOf(relatedParent);
+            if (index < 0 || index > parents.length - 2) {
+                relatedParent = parents[0];
+            } else {
+                relatedParent = parents[index + 1];
+            }
+
+            var surface = context.surface();
+            surface.selectAll('.related')
+                .classed('related', false);
+            surface.selectAll(utilEntitySelector([relatedParent]))
+                .classed('related', true);
+        }
+
+
         behaviors.forEach(function(behavior) {
             context.install(behavior);
         });
@@ -346,10 +379,11 @@ export function modeSelect(context, selectedIDs) {
         operations.unshift(Operations.operationDelete(selectedIDs, context));
 
         keybinding
-            .on(['[','pgup'], previousNode)
-            .on([']', 'pgdown'], nextNode)
-            .on([uiCmd('⌘['), 'home'], firstNode)
-            .on([uiCmd('⌘]'), 'end'], lastNode)
+            .on(['[','pgup'], previousVertex)
+            .on([']', 'pgdown'], nextVertex)
+            .on([uiCmd('⌘['), 'home'], firstVertex)
+            .on([uiCmd('⌘]'), 'end'], lastVertex)
+            .on(['\\', 'pause'], nextParent)
             .on('⎋', esc, true)
             .on('space', toggleMenu);
 
@@ -432,11 +466,19 @@ export function modeSelect(context, selectedIDs) {
             .on('undone.select', null)
             .on('redone.select', null);
 
-        context.surface()
-            .on('dblclick.select', null)
+        var surface = context.surface();
+
+        surface
+            .on('dblclick.select', null);
+
+        surface
             .selectAll('.selected')
             .classed('selected', false);
 
+        surface
+            .selectAll('.related')
+            .classed('related', false);
+
         context.map().on('drawn.select', null);
         context.ui().sidebar.hide();
     };