diff --git a/css/20_map.css b/css/20_map.css index a7cf836f6..390fb6d2e 100644 --- a/css/20_map.css +++ b/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; } diff --git a/data/core.yaml b/data/core.yaml index 07aaedf44..16c9f145b 100644 --- a/data/core.yaml +++ b/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" diff --git a/modules/svg/areas.js b/modules/svg/areas.js index 5ba0d9cd5..4df9ac0ad 100644 --- a/modules/svg/areas.js +++ b/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)');