Render line and vertex visual diff on shadow instead of above everything (re: #6843)

Differentiate added lines and vertices from merely changed ones
This commit is contained in:
Quincy Morgan
2019-10-07 16:13:35 +02:00
parent 909079e454
commit f3e7bd9034
3 changed files with 90 additions and 91 deletions
+24 -26
View File
@@ -56,11 +56,17 @@ export function svgLines(projection, context) {
targets.exit()
.remove();
var graphEditClass = function(d) {
var segmentEditClass = function(d) {
var wayID = d.properties.entity.id;
// if the whole line was edited, don't draw segment changes
if (!base.entities[wayID] ||
!_isEqual(graph.entities[wayID].nodes, base.entities[wayID].nodes)) {
return '';
}
return d.properties.nodes.some(function(n) {
return !base.entities[n.id] ||
graph.entities[n.id].loc !== base.entities[n.id].loc;
}) ? ' graphedited ': '';
}) ? ' segment-edited ': '';
};
// enter/update
@@ -69,7 +75,7 @@ export function svgLines(projection, context) {
.merge(targets)
.attr('d', getPath)
.attr('class', function(d) {
return 'way line target target-allowed ' + targetClass + d.id + graphEditClass(d);
return 'way line target target-allowed ' + targetClass + d.id + segmentEditClass(d);
});
// NOPE
@@ -88,7 +94,7 @@ export function svgLines(projection, context) {
.merge(nopes)
.attr('d', getPath)
.attr('class', function(d) {
return 'way line target target-nope ' + nopeClass + d.id + graphEditClass(d);
return 'way line target target-nope ' + nopeClass + d.id + segmentEditClass(d);
});
}
@@ -107,27 +113,6 @@ export function svgLines(projection, context) {
}
// Class for styling currently tag-edited lines, not changes to geometry
var tagEditClass = function(d) {
if (graph.entities[d.id] && base.entities[d.id] &&
!_isEqual(graph.entities[d.id].tags, base.entities[d.id].tags)) {
return ' tagedited ';
}
return '';
};
// Class for styling currently geometry-edited lines
var graphEditClass = function(d) {
if (!base.entities[d.id] ||
(graph.entities[d.id] && base.entities[d.id] &&
graph.entities[d.id].nodes !== base.entities[d.id].nodes)) {
return ' graphedited ';
}
return '';
};
function drawLineGroup(selection, klass, isSelected) {
// Note: Don't add `.selected` class in draw modes
var mode = context.mode();
@@ -155,7 +140,20 @@ export function svgLines(projection, context) {
}
var oldMPClass = oldMultiPolygonOuters[d.id] ? 'old-multipolygon ' : '';
return prefix + ' ' + klass + ' ' + selectedClass + oldMPClass + graphEditClass(d) + tagEditClass(d) + d.id;
return prefix + ' ' + klass + ' ' + selectedClass + oldMPClass + d.id;
})
.classed('added', function(d) {
return !base.entities[d.id];
})
.classed('geometry-edited', function(d) {
return graph.entities[d.id] &&
base.entities[d.id] &&
!_isEqual(graph.entities[d.id].nodes, base.entities[d.id].nodes);
})
.classed('retagged', function(d) {
return graph.entities[d.id] &&
base.entities[d.id] &&
!_isEqual(graph.entities[d.id].tags, base.entities[d.id].tags);
})
.call(svgTagClasses())
.merge(lines)
+14 -16
View File
@@ -44,6 +44,7 @@ export function svgVertices(projection, context) {
var zoom = geoScaleToZoom(projection.scale());
var z = (zoom < 17 ? 0 : zoom < 18 ? 1 : 2);
var activeID = context.activeID();
var base = context.history().base();
function getIcon(d) {
@@ -129,9 +130,17 @@ export function svgVertices(projection, context) {
.classed('sibling', function(d) { return d.id in sets.selected; })
.classed('shared', function(d) { return graph.isShared(d); })
.classed('endpoint', function(d) { return d.isEndpoint(graph); })
.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(updateAttributes);
// Vertices with icons get a `use`.
var iconUse = groups
.selectAll('.icon')
@@ -224,17 +233,6 @@ export function svgVertices(projection, context) {
}
});
// Class for styling currently edited vertices
var editClass = function(d) {
if (!base.entities[d.id] || // if it doesn't exist in the base graph, it's new geometry
graph.entities[d.id].loc !== base.entities[d.id].loc) {
return 'graphedited';
} else if (!_isEqual(graph.entities[d.id].tags, base.entities[d.id].tags)) {
return 'tagedited';
}
return '';
};
// Targets allow hover and vertex snapping
var targets = selection.selectAll('.vertex.target-allowed')
.filter(function(d) { return filter(d.properties.entity); })
@@ -251,14 +249,14 @@ export function svgVertices(projection, context) {
targets.enter()
.append('circle')
.attr('r', function(d) {
return isEditedEnt(d, base, graph) && threeFourths(_radii[d.id])
return isEditedEntity(d, base, graph) && threeFourths(_radii[d.id])
|| _radii[d.id]
|| radiuses.shadow[3];
})
.merge(targets)
.attr('class', function(d) {
return 'node vertex target target-allowed '
+ targetClass + d.id + ' ' + editClass(d);
+ targetClass + d.id;
})
.attr('transform', getTransform);
@@ -293,7 +291,7 @@ export function svgVertices(projection, context) {
}
function isEditedEnt(entity, base, head) {
function isEditedEntity(entity, base, head) {
return head.entities[entity.id] !== base.entities[entity.id] ||
!_isEqual(head.entities[entity.id].tags, base.entities[entity.id].tags);
}
@@ -376,7 +374,7 @@ export function svgVertices(projection, context) {
// a vertex of some importance..
} else if (geometry === 'vertex' &&
(entity.hasInterestingTags() || entity.isEndpoint(graph) || entity.isConnected(graph)
|| isEditedEnt(entity, base, graph))) {
|| isEditedEntity(entity, base, graph))) {
_currPersistent[entity.id] = entity;
keep = true;
}