Add support for area diffs.

css/20_map.css

@@ -337,6 +337,12 @@ g.vertex.highlighted .shadow {
     stroke: #68f;
 }
 
+/* highlight-edited means 'visual diff activated'
+ 'graphedited' class means that a geometric (dark green) change has occurred.
+ 'tagedited' means that a tagging change has occurred. 
+ if both are true, the 'graphedited' class supersedes 'tagedited'. 
+
+ /*Vertex-related visual diffs*/ 
 .highlight-edited g.points > circle.vertex.graphedited {
     color: rgb(87, 201, 44);
     stroke: #333;
@@ -351,16 +357,18 @@ g.vertex.highlighted .shadow {
     stroke-opacity: .5;
     fill-opacity: 1;
 }
-    
+
+/*Line-related visual diffs*/ 
 /*Make the edited stroke line thin so that the original road color can show around it.*/
-.highlight-edited g.lines > path.line.graphedited {
+.highlight-edited g.lines > path.line.graphedited,
+.highlight-edited g.areas > path.line.graphedited {
     color: rgb(87, 201, 44);
     stroke-width: 3 !important;
     stroke-opacity: 1;
 }
 
 /*Make the stroke in whole-road graph edits thin and less apparent. */
-+.highlight-edited g.linegroup.line-stroke > path.way.line.stroke.graphedited {
+.highlight-edited g.linegroup.line-stroke > path.way.line.stroke.graphedited {
     stroke: rgb(87, 201, 44);
     stroke-width: 3 !important;
     stroke-opacity: 1;
@@ -377,6 +385,49 @@ g.vertex.highlighted .shadow {
     stroke-width: 10 !important;
 }
 
+/* Area-related visual diffs */ 
+.highlight-edited g.areagroup.area-fill > path.way.area.fill.graphedited {
+    stroke-width: 45px; 
+    stroke-opacity: .5; 
+}
+
+.highlight-edited g.areagroup.area-stroke > path.way.area.stroke.graphedited {
+    stroke: rgb(87, 201, 44) !important;
+    stroke-width: 5 !important; 
+}
+
+.highlight-edited g.areagroup.area-stroke > path.way.area.stroke.tagedited {
+    stroke: rgb(160, 231, 134) !important;
+    stroke-width: 3 !important; 
+}
+
+.highlight-edited g.areagroup.area-shadow > path.way.area.shadow.graphedited {
+    fill: rgb(87, 201, 44);
+    opacity: .2;  
+}
+
+.highlight-edited g.areagroup.area-shadow > path.way.area.shadow.tagedited {
+    fill: rgb(87, 201, 44);
+    opacity: .1;  
+}
+
+.highlight-edited g.areagroup.area-fill > path.way.area.fill.tagedited {
+    stroke-width: 30;   
+}
+
+.low-zoom.highlight-edited.fill-wireframe g.areagroup.area-stroke > path.way.area.stroke.tagedited {
+    stroke-dasharray: 7; 
+    stroke: rgb(87, 201, 44) !important;
+    stroke-width: 4px;
+}
+
+.low-zoom.highlight-edited g.areagroup.area-stroke > path.way.area.stroke.tagedited {
+    stroke: rgb(160, 231, 134);
+    stroke-width: 40; 
+    stroke-dasharray: 25 !important; 
+    stroke-opacity: 1 !important;
+}
+
 .highlight-edited.fill-wireframe g.linegroup.line-stroke > path.way.line.stroke.tagedited {
     stroke: rgb(160, 231, 134);
     stroke-width: 10 !important;
@@ -384,12 +435,18 @@ g.vertex.highlighted .shadow {
     stroke-opacity: 1 !important;
 }
 
+.highlight-edited.fill-wireframe g.areagroup.area-shadow > path.way.area.shadow.graphedited,
+.highlight-edited.fill-wireframe g.areagroup.area-shadow > path.way.area.shadow.tagedited {
+    fill-opacity: .05; 
+}
+
 /*for low zoom levels, make the wireframe view 'tag edit' dashed line finer.*/
 .low-zoom.highlight-edited.fill-wireframe g.linegroup.line-stroke > path.way.line.stroke.tagedited {
     stroke-dasharray: 7 !important;
 } 
 
 /*In wireframe mode, restrain the stroke width to something barely wider than normal.*/
-.fill-wireframe.highlight-edited g.lines > path.line.graphedited, .fill-wireframe.highlight-edited g.linegroup.line-stroke > path.way.line.stroke.tagedited {
+.fill-wireframe.highlight-edited g.lines > path.line.graphedited, .fill-wireframe.highlight-edited g.linegroup.line-stroke > path.way.line.stroke.tagedited,
+.fill-wireframe.highlight-edited g.areas > path.area.graphedited, .fill-wireframe.highlight-edited g.linegroup.line-stroke > path.way.area.stroke.tagedited {
     stroke-width: 2 !important;
 }

data/core.yaml

@@ -604,7 +604,7 @@ en:
     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.
+      tooltip: Highlight unsaved edits.
       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."
@@ -1865,7 +1865,7 @@ en:
         wireframe: "Toggle wireframe mode"
         osm_data: "Toggle OpenStreetMap data"
         minimap: "Toggle minimap"
-        highlight_way_edits: "Highlight way edits in current session"
+        highlight_way_edits: "Highlight unsaved edits"
       selecting:
         title: "Selecting features"
         select_one: "Select a single feature"

modules/svg/areas.js

@@ -3,7 +3,8 @@ import { bisector as d3_bisector } from 'd3-array';
 import { osmEntity, osmIsOldMultipolygonOuterMember } from '../osm';
 import { svgPath, svgSegmentWay } from './helpers';
 import { svgTagClasses } from './tag_classes';
-
+import _isEqual from 'lodash-es/isEqual';
+import _omit from 'lodash-es/omit';
 
 export function svgAreas(projection, context) {
     // Patterns only work in Firefox when set directly on element.
@@ -192,6 +193,7 @@ export function svgAreas(projection, context) {
         var path = svgPath(projection, graph, true);
         var areas = {};
         var multipolygon;
+        var base = context.history().base();
 
         for (var i = 0; i < entities.length; i++) {
             var entity = entities[i];
@@ -275,12 +277,32 @@ export function svgAreas(projection, context) {
             }
         }
 
+
+        var graphEditClass = function(d) {
+            if (d.type !== 'way'){
+                return ''; 
+            }
+            var graphEdited = d.nodes.some(function(n) {
+                if (!base.entities[n]) {
+                    return true; 
+                }                
+                var result = !_isEqual(_omit(graph.entities[n], ['tags', 'v']), _omit(base.entities[n], ['tags', 'v'])); 
+                return result; 
+            });
+
+            if (graphEdited){
+                return 'graphedited'; 
+            }
+
+            return (!_isEqual(graph.entities[d.id].tags, base.entities[d.id].tags)) ? 'tagedited' : '';
+        };
+
         paths = paths.enter()
             .insert('path', sortedByArea)
             .merge(paths)
             .each(function(entity) {
                 var layer = this.parentNode.__data__;
-                this.setAttribute('class', entity.type + ' area ' + layer + ' ' + entity.id);
+                this.setAttribute('class', entity.type + ' area ' + layer + ' ' + graphEditClass(entity) + ' ' + entity.id);
 
                 if (layer === 'fill') {
                     this.setAttribute('clip-path', 'url(#' + entity.id + '-clippath)');