diff --git a/css/20_map.css b/css/20_map.css index a29a1c85a..371b51d5d 100644 --- a/css/20_map.css +++ b/css/20_map.css @@ -217,7 +217,7 @@ text.pointlabel { stroke-miterlimit: 1; } -text.proximate { +text.nolabel { opacity: 0; } diff --git a/modules/svg/labels.js b/modules/svg/labels.js index e6db96a05..b36895e1d 100644 --- a/modules/svg/labels.js +++ b/modules/svg/labels.js @@ -304,7 +304,7 @@ export function svgLabels(projection, context) { geometry = entity.geometry(graph); // Insert collision boxes around interesting points/vertices - if (geometry === 'point' || (geometry === 'vertex' && entity.hasInterestingTags())) { + if (geometry === 'point' || (geometry === 'vertex' && isInterestingVertex(entity))) { var hasDirections = entity.directions(graph, projection).length; var markerPadding; @@ -404,6 +404,19 @@ export function svgLabels(projection, context) { } + function isInterestingVertex(entity) { + var selectedIDs = context.selectedIDs(); + + return entity.hasInterestingTags() || + entity.isEndpoint(graph) || + entity.isConnected(graph) || + selectedIDs.indexOf(entity.id) !== -1 || + _some(graph.parentWays(entity), function(parent) { + return selectedIDs.indexOf(parent.id) !== -1; + }); + } + + function getPointLabel(entity, width, height, geometry) { var y = (geometry === 'point' ? -12 : 0); var pointOffsets = { @@ -698,8 +711,8 @@ export function svgLabels(projection, context) { var layers = selection .selectAll('.layer-label, .layer-halo'); - layers.selectAll('.proximate') - .classed('proximate', false); + layers.selectAll('.nolabel') + .classed('nolabel', false); var mouse = context.mouse(); var graph = context.graph(); @@ -714,25 +727,46 @@ export function svgLabels(projection, context) { ids.push.apply(ids, _map(_rdrawn.search(bbox), 'id')); } - // hide labels along selected ways, or near selected vertices + // hide labels on selected nodes (they look weird when dragging / haloed) for (var i = 0; i < selectedIDs.length; i++) { var entity = graph.hasEntity(selectedIDs[i]); - if (!entity) continue; - var geometry = entity.geometry(graph); - - if (geometry === 'line' || geometry === 'point' || geometry === 'vertex') { + if (entity && entity.type === 'node') { ids.push(selectedIDs[i]); } - // } else if (geometry === 'vertex') { - // var point = context.projection(entity.loc); - // pad = 20; - // bbox = { minX: point[0] - pad, minY: point[1] - pad, maxX: point[0] + pad, maxY: point[1] + pad }; - // ids.push.apply(ids, _map(_rdrawn.search(bbox), 'id')); - // } } layers.selectAll(utilEntitySelector(ids)) - .classed('proximate', true); + .classed('nolabel', true); + + + // draw the mouse bbox if debugging is on.. + if (context.getDebug('collision')) { + var gj = bbox ? [{ + type: 'Polygon', + coordinates: [[ + [bbox.minX, bbox.minY], + [bbox.maxX, bbox.minY], + [bbox.maxX, bbox.maxY], + [bbox.minX, bbox.maxY], + [bbox.minX, bbox.minY] + ]] + }] : []; + + var debug = selection.selectAll('.layer-label-debug'); + var debugMouse = debug.selectAll('.debug-mouse') + .data(gj); + + // exit + debugMouse.exit() + .remove(); + + // enter/update + debugMouse.enter() + .append('path') + .attr('class', 'debug debug-mouse yellow') + .merge(debugMouse) + .attr('d', d3_geoPath()); + } }