diff --git a/css/20_map.css b/css/20_map.css index e2e9113ab..c51b5d567 100644 --- a/css/20_map.css +++ b/css/20_map.css @@ -356,6 +356,22 @@ g.vertex.highlighted .shadow { fill: rgb(193, 84, 17); } +.highlight-edited g.points g.node.point.added > path.shadow, +.highlight-edited g.points g.node.point.retagged > path.shadow, +.highlight-edited g.points g.node.point.moved > path.shadow { + stroke-opacity: 0.8; + stroke-width: 7; +} +.highlight-edited g.points g.node.point.added > path.shadow { + stroke: rgb(133, 255, 103); +} +.highlight-edited g.points g.node.point.retagged > path.shadow, +.highlight-edited g.points g.node.point.moved > path.shadow { + stroke: rgb(255, 126, 46); +} +.highlight-edited g.points g.node.point.retagged:not(.moved) > path.shadow { + stroke-opacity: 0.55; +} /*Line-related visual diffs*/ /*Make the edited stroke line thin so that the original road color can show around it.*/ diff --git a/modules/svg/points.js b/modules/svg/points.js index 22e224d45..bfde1e47c 100644 --- a/modules/svg/points.js +++ b/modules/svg/points.js @@ -2,7 +2,7 @@ import { geoScaleToZoom } from '../geo'; import { osmEntity } from '../osm'; import { svgPointTransform } from './helpers'; import { svgTagClasses } from './tag_classes'; - +import _isEqual from 'lodash-es/isEqual'; export function svgPoints(projection, context) { @@ -71,6 +71,7 @@ export function svgPoints(projection, context) { function drawPoints(selection, graph, entities, filter) { var wireframe = context.surface().classed('fill-wireframe'); var zoom = geoScaleToZoom(projection.scale()); + var base = context.history().base(); // Points with a direction will render as vertices at higher zooms.. function renderAsPoint(entity) { @@ -125,6 +126,15 @@ export function svgPoints(projection, context) { groups = groups .merge(enter) .attr('transform', svgPointTransform(projection)) + .classed('added', function(d) { + return !base.entities[d.id]; // if it doesn't exist in the base graph, it's new + }) + .classed('moved', function(d) { + return base.entities[d.id] && graph.entities[d.id].loc !== base.entities[d.id].loc; + }) + .classed('retagged', function(d) { + return base.entities[d.id] && !_isEqual(graph.entities[d.id].tags, base.entities[d.id].tags); + }) .call(svgTagClasses()); groups.select('.shadow'); // propagate bound data