diff --git a/css/map.css b/css/map.css index e3e05a044..8ad55c790 100644 --- a/css/map.css +++ b/css/map.css @@ -616,6 +616,14 @@ text.pointlabel { pointer-events: none; } +.layer-halo rect, +.layer-halo path, +.layer-label text { + -webkit-transition: opacity 100ms linear; + transition: opacity 100ms linear; + -moz-transition: opacity 100ms linear; +} + .pathlabel .textpath { dominant-baseline: middle; } diff --git a/js/id/svg/labels.js b/js/id/svg/labels.js index 774fc264e..eb4297bca 100644 --- a/js/id/svg/labels.js +++ b/js/id/svg/labels.js @@ -200,12 +200,31 @@ iD.svg.Labels = function(projection) { } + function hideOnMouseover() { + var mouse = d3.mouse(this), + pad = 50, + rect = new RTree.Rectangle(mouse[0] - pad, mouse[1] - pad, 2*pad, 2*pad), + labels = _.pluck(rtree.search(rect, this), 'leaf'), + selection = d3.select(this); + + selection.selectAll('.layer-label text, .layer-halo path, .layer-halo rect') + .style('opacity', ''); + + if (!labels.length) return; + selection.selectAll('.layer-label text, .layer-halo path, .layer-halo rect') + .filter(function(d) { + return _.contains(labels, d.id); + }) + .style('opacity', 0); + } var rtree = new RTree(), rectangles = {}; return function drawLabels(surface, graph, entities, filter, dimensions, fullRedraw) { + d3.select(surface.node().parentNode) + .on('mousemove.hidelabels', hideOnMouseover); var hidePoints = !d3.select('.node.point').node();