Also show vertices on hover in draw modes

This commit is contained in:
John Firebaugh
2013-03-18 11:38:01 -07:00
parent 66551ba903
commit a2f86154ce
3 changed files with 65 additions and 15 deletions

View File

@@ -103,6 +103,19 @@ g.midpoint .shadow {
fill-opacity: 0;
}
g.vertex.vertex-hover {
display: none;
}
.mode-draw-area .behavior-hover g.vertex.vertex-hover,
.mode-draw-line .behavior-hover g.vertex.vertex-hover,
.mode-add-area .behavior-hover g.vertex.vertex-hover,
.mode-add-line .behavior-hover g.vertex.vertex-hover,
.mode-add-point .behavior-hover g.vertex.vertex-hover,
.mode-drag-node .behavior-hover g.vertex.vertex-hover {
display: block;
}
.behavior-hover g.vertex.hover:not(.selected) .shadow,
.behavior-hover g.midpoint.hover:not(.selected) .shadow {
fill-opacity: 0.3;

View File

@@ -54,6 +54,16 @@ iD.Map = function(context) {
.attr('id', 'surface')
.call(iD.svg.Surface(context));
surface.on('mouseover.vertices', function() {
vertices.hover(d3.event.target.__data__);
surface.call(vertices, context.graph(), map.zoom());
});
surface.on('mouseout.vertices', function() {
vertices.hover(d3.event.relatedTarget && d3.event.relatedTarget.__data__);
surface.call(vertices, context.graph(), map.zoom());
});
map.size(selection.size());
map.surface = surface;
map.layersurface = layergroup;

View File

@@ -6,38 +6,55 @@ iD.svg.Vertices = function(projection, context) {
fill: [1, 1.5, 1.5, 1.5]
};
return function drawVertices(surface, graph, zoom) {
var extent = context.map().extent(),
visible = {};
var hover;
function addVisible(entity) {
function visibleVertices() {
var visible = {};
function addChildVertices(entity, klass) {
var i;
if (entity.type === 'way') {
for (i = 0; i < entity.nodes.length; i++) {
visible[entity.nodes[i]] = true;
visible[entity.nodes[i]] = klass;
}
} else if (entity.type === 'relation') {
for (i = 0; i < entity.members.length; i++) {
var member = context.entity(entity.members[i].id);
if (member) {
addVisible(member);
addChildVertices(member, klass);
}
}
} else {
visible[entity.id] = true;
visible[entity.id] = klass;
}
}
context.selection().forEach(function(id) {
var entity = graph.entity(id);
if (entity.type === 'vertex') {
visible[id] = true;
context.parentWays(entity).forEach(addVisible);
} else {
addVisible(entity);
function addSiblingAndChildVertices(id, klass) {
var entity = context.entity(id);
if (entity && entity.type === 'vertex') {
visible[hover.id] = klass;
context.parentWays(entity).forEach(function(entity) {
addChildVertices(entity, klass);
});
} else if (entity) {
addChildVertices(entity, klass);
}
}
if (hover) {
addSiblingAndChildVertices(hover.id, 'vertex-hover');
}
context.selection().forEach(function(id) {
addSiblingAndChildVertices(id, 'vertex-selected');
});
return visible;
}
function drawVertices(surface, graph, zoom) {
var visible = visibleVertices();
function rendered(entity) {
if (entity.geometry(graph) !== 'vertex')
return false;
@@ -47,7 +64,7 @@ iD.svg.Vertices = function(projection, context) {
return true;
}
var entities = context.intersects(extent),
var entities = context.intersects(context.map().extent()),
vertices = [];
for (var i = 0; i < entities.length; i++) {
@@ -81,6 +98,8 @@ iD.svg.Vertices = function(projection, context) {
groups.attr('transform', iD.svg.PointTransform(projection))
.call(iD.svg.TagClasses())
.call(iD.svg.MemberClasses(graph))
.classed('vertex-hover', function(entity) { return visible[entity.id] === 'vertex-hover'; })
.classed('vertex-selected', function(entity) { return visible[entity.id] === 'vertex-selected'; })
.classed('tagged', function(entity) { return entity.hasInterestingTags(); })
.classed('shared', function(entity) { return graph.isShared(entity); });
@@ -148,5 +167,13 @@ iD.svg.Vertices = function(projection, context) {
groups.exit()
.remove();
}
drawVertices.hover = function(_) {
if (!arguments.length) return hover;
hover = _;
return drawVertices;
};
return drawVertices;
};