From 774b3a0ccd89a23da3448d38dbcf8a56f68b7779 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Mon, 7 Nov 2016 13:44:25 -0500 Subject: [PATCH] Add '\' key to toggle related parent, add .related class (like hover) --- css/map.css | 5 +++ modules/modes/select.js | 84 ++++++++++++++++++++++++++++++----------- 2 files changed, 68 insertions(+), 21 deletions(-) diff --git a/css/map.css b/css/map.css index 250f23aed..c0d5f42ec 100644 --- a/css/map.css +++ b/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; } diff --git a/modules/modes/select.js b/modules/modes/select.js index 658814d69..06d88b544 100644 --- a/modules/modes/select.js +++ b/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(); };