From e7f20a379ea6ec60514f099706109c9a45dcd7b3 Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Mon, 17 Oct 2016 11:55:56 -0400
Subject: [PATCH] Fix label autohiding (closes #3464)

---
 modules/renderer/map.js |  2 +-
 modules/svg/labels.js   | 59 ++++++++++++++++++++++-------------------
 2 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/modules/renderer/map.js b/modules/renderer/map.js
index 9827d1f92..70f29552d 100644
--- a/modules/renderer/map.js
+++ b/modules/renderer/map.js
@@ -96,6 +96,7 @@ export function rendererMap(context) {
             .attr('id', 'surface');
 
         surface
+            .call(drawLabels.observe)
             .on('mousedown.zoom', function() {
                 if (d3.event.button === 2) {
                     d3.event.stopPropagation();
@@ -143,7 +144,6 @@ export function rendererMap(context) {
 
         map.dimensions(utilGetDimensions(selection));
 
-        drawLabels.supersurface(supersurface);
     }
 
 
diff --git a/modules/svg/labels.js b/modules/svg/labels.js
index 523ec71b1..64a41a4a7 100644
--- a/modules/svg/labels.js
+++ b/modules/svg/labels.js
@@ -3,7 +3,11 @@ import _ from 'lodash';
 import rbush from 'rbush';
 import { geoPathLength } from '../geo/index';
 import { osmEntity } from '../osm/index';
-import { utilDisplayName, utilGetStyle } from '../util/index';
+import {
+    utilDisplayName,
+    utilEntitySelector,
+    utilGetStyle
+} from '../util/index';
 
 
 export function svgLabels(projection, context) {
@@ -250,24 +254,6 @@ export function svgLabels(projection, context) {
     }
 
 
-    function hideOnMouseover() {
-        var layers = d3.select(this)
-            .selectAll('.layer-label, .layer-halo');
-
-        layers.selectAll('.proximate')
-            .classed('proximate', false);
-
-        var mouse = context.mouse(),
-            pad = 50,
-            bbox = { minX: mouse[0] - pad, minY: mouse[1] - pad, maxX: mouse[0] + pad, maxY: mouse[1] + pad },
-            ids = _.map(rtree.search(bbox), 'id');
-
-        if (!ids.length) return;
-        layers.selectAll('.' + ids.join(', .'))
-            .classed('proximate', true);
-    }
-
-
     function drawLabels(selection, graph, entities, filter, dimensions, fullRedraw) {
         var hidePoints = !selection.selectAll('.node.point').node();
 
@@ -509,15 +495,32 @@ export function svgLabels(projection, context) {
     }
 
 
-    drawLabels.supersurface = function(supersurface) {
-        supersurface
-            .on('mousemove.hidelabels', hideOnMouseover)
-            .on('mousedown.hidelabels', function () {
-                supersurface.on('mousemove.hidelabels', null);
-            })
-            .on('mouseup.hidelabels', function () {
-                supersurface.on('mousemove.hidelabels', hideOnMouseover);
-            });
+    function hideOnMouseover() {
+        if (d3.event.buttons) return;
+
+        var layers = d3.select(this)
+            .selectAll('.layer-label, .layer-halo');
+
+        layers.selectAll('.proximate')
+            .classed('proximate', false);
+
+        var mouse = context.mouse(),
+            pad = 20,
+            bbox = { minX: mouse[0] - pad, minY: mouse[1] - pad, maxX: mouse[0] + pad, maxY: mouse[1] + pad },
+            ids = _.map(rtree.search(bbox), 'id');
+
+        layers.selectAll(utilEntitySelector(ids))
+            .classed('proximate', true);
+    }
+
+
+    drawLabels.observe = function(selection) {
+        selection.on('mousemove.hidelabels', hideOnMouseover);
+    };
+
+
+    drawLabels.off = function(selection) {
+        selection.on('mousemove.hidelabels', null);
     };