Add a hotkey to highlight edited ways.

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;
+}

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"

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"
             }
           ]
         },

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);

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;
             }

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;