From a4dc7518c4d3ec94769d6e569960838cc4f83706 Mon Sep 17 00:00:00 2001 From: Benjamin Clark Date: Tue, 7 May 2019 13:10:55 -0400 Subject: [PATCH] Add a hotkey to highlight edited ways. --- css/20_map.css | 16 ++++++++++++++++ data/core.yaml | 5 +++++ data/shortcuts.json | 4 ++++ modules/svg/lines.js | 12 ++++++++++-- modules/svg/vertices.js | 29 ++++++++++++++++++++++++++--- modules/ui/map_data.js | 10 +++++++++- 6 files changed, 70 insertions(+), 6 deletions(-) diff --git a/css/20_map.css b/css/20_map.css index 1c89fb588..53df3798f 100644 --- a/css/20_map.css +++ b/css/20_map.css @@ -336,3 +336,19 @@ g.vertex.highlighted .shadow { .surface.tr g.vertex.related.only .shadow { stroke: #68f; } + +.highlight-edited g.points > circle.vertex.edited { + color: rgb(87, 201, 44); + stroke: #fff; + stroke-width: 1; + stroke-opacity: 1; + fill-opacity: 1; +} +.highlight-edited g.lines > path.line.edited { + color: rgb(87, 201, 44); + stroke-width: 9; + stroke-opacity: 1; + } +.low-zoom.highlight-edited g.lines > path.line.edited { + stroke-width: 7; +} diff --git a/data/core.yaml b/data/core.yaml index 8ddc5e233..07aaedf44 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -602,6 +602,10 @@ en: title: Custom Map Data zoom: Zoom to data fill_area: Fill Areas + highlight_way_edits: + description: Highlight edited nodes and segments attached to those nodes in ways + tooltip: Highlight way edits in the current session. + key: G map_features: Map Features autohidden: "These features have been automatically hidden because too many would be shown on the screen. You can zoom in to edit them." osmhidden: "These features have been automatically hidden because the OpenStreetMap layer is hidden." @@ -1861,6 +1865,7 @@ en: wireframe: "Toggle wireframe mode" osm_data: "Toggle OpenStreetMap data" minimap: "Toggle minimap" + highlight_way_edits: "Highlight way edits in current session" selecting: title: "Selecting features" select_one: "Select a single feature" diff --git a/data/shortcuts.json b/data/shortcuts.json index ce189797c..5cba3f4c3 100644 --- a/data/shortcuts.json +++ b/data/shortcuts.json @@ -82,6 +82,10 @@ { "shortcuts": ["background.minimap.key"], "text": "shortcuts.browsing.display_options.minimap" + }, + { + "shortcuts": ["map_data.highlight_way_edits.key"], + "text": "shortcuts.browsing.display_options.highlight_way_edits" } ] }, diff --git a/modules/svg/lines.js b/modules/svg/lines.js index 1e1d36052..46da6e056 100644 --- a/modules/svg/lines.js +++ b/modules/svg/lines.js @@ -34,6 +34,7 @@ export function svgLines(projection, context) { var nopeClass = context.getDebug('target') ? 'red ' : 'nocolor '; var getPath = svgPath(projection).geojson; var activeID = context.activeID(); + var base = context.history().base(); // The targets and nopes will be MultiLineString sub-segments of the ways var data = { targets: [], nopes: [] }; @@ -55,13 +56,20 @@ export function svgLines(projection, context) { targets.exit() .remove(); + var editClass = function(d) { + return d.properties.nodes.some(function(n) { + return graph.entities[n.id] !== base.entities[n.id]; + }) ? ' edited ': ''; + }; + // enter/update targets.enter() .append('path') .merge(targets) .attr('d', getPath) - .attr('class', function(d) { return 'way line target target-allowed ' + targetClass + d.id; }); - + .attr('class', function(d) { + return 'way line target target-allowed ' + targetClass + d.id + editClass(d); + }); // NOPE var nopeData = data.nopes.filter(getPath); diff --git a/modules/svg/vertices.js b/modules/svg/vertices.js index 1c48a64ae..d830f3b01 100644 --- a/modules/svg/vertices.js +++ b/modules/svg/vertices.js @@ -194,6 +194,9 @@ export function svgVertices(projection, context) { var getTransform = svgPointTransform(projection).geojson; var activeID = context.activeID(); var data = { targets: [], nopes: [] }; + var base = context.history().base(); + var radius = 3; + var interestingNodeRadius = 4.5; entities.forEach(function(node) { if (activeID === node.id) return; // draw no target on the activeID @@ -223,6 +226,10 @@ export function svgVertices(projection, context) { } }); + // Class for styling currently edited vertices + var editClass = function(d) { + return (graph.entities[d.id] !== base.entities[d.id]) ? ' edited ' : ''; + }; // Targets allow hover and vertex snapping var targets = selection.selectAll('.vertex.target-allowed') @@ -236,9 +243,18 @@ export function svgVertices(projection, context) { // enter/update targets.enter() .append('circle') - .attr('r', function(d) { return (_radii[d.id] || radiuses.shadow[3]); }) + .attr('r', function(d) { + return ((graph.entities[d.id].isEndpoint(graph) + && !graph.entities[d.id].isConnected(graph) + && isEditedEnt(d, base, graph) && interestingNodeRadius) + || (isEditedEnt(d, base, graph) && radius) + || _radii[d.id] || radiuses.shadow[3]); + }) .merge(targets) - .attr('class', function(d) { return 'node vertex target target-allowed ' + targetClass + d.id; }) + .attr('class', function(d) { + return 'node vertex target target-allowed ' + + targetClass + d.id + editClass(d); + }) .attr('transform', getTransform); @@ -272,6 +288,11 @@ export function svgVertices(projection, context) { } + function isEditedEnt(entity, base, head) { + return head.entities[entity.id] !== base.entities[entity.id]; + } + + function getSiblingAndChildVertices(ids, graph, wireframe, zoom) { var results = {}; @@ -324,6 +345,7 @@ export function svgVertices(projection, context) { var zoom = geoScaleToZoom(projection.scale()); var mode = context.mode(); var isMoving = mode && /^(add|draw|drag|move|rotate)/.test(mode.id); + var base = context.history().base(); var drawLayer = selection.selectAll('.layer-osm.points .points-group.vertices'); var touchLayer = selection.selectAll('.layer-touch.points'); @@ -347,7 +369,8 @@ export function svgVertices(projection, context) { // a vertex of some importance.. } else if (geometry === 'vertex' && - (entity.hasInterestingTags() || entity.isEndpoint(graph) || entity.isConnected(graph))) { + (entity.hasInterestingTags() || entity.isEndpoint(graph) || entity.isConnected(graph) + || isEditedEnt(entity, base, graph))) { _currPersistent[entity.id] = entity; keep = true; } diff --git a/modules/ui/map_data.js b/modules/ui/map_data.js index 6abfc4d8d..156f3ad8d 100644 --- a/modules/ui/map_data.js +++ b/modules/ui/map_data.js @@ -86,6 +86,13 @@ export function uiMapData(context) { } + function toggleHighlightEdited() { + d3_event.preventDefault(); + var surface = context.surface(); + surface.classed('highlight-edited', !surface.classed('highlight-edited')); + } + + function showsLayer(which) { var layer = layers.layer(which); if (layer) { @@ -881,7 +888,8 @@ export function uiMapData(context) { d3_event.preventDefault(); d3_event.stopPropagation(); toggleLayer('osm'); - }); + }) + .on(t('map_data.highlight_way_edits.key'), toggleHighlightEdited); }; return uiMapData;