use dragElement.unhover to queued Fx.hover calls

etpinard · etpinard · commit 9bb7d91f91c9 · 2017-09-27T10:34:54.000-04:00
... when dragging off-screen

- attach handlers to bgRect (not framework), doesn't change
  any thing, but is more consistent.
diff --git a/src/plots/geo/geo.js b/src/plots/geo/geo.js
@@ -330,8 +330,8 @@ proto.updateDims = function(fullLayout, geoLayout) {
 
 proto.updateFx = function(fullLayout, geoLayout) {
     var _this = this;
-    var framework = _this.framework;
     var gd = _this.graphDiv;
+    var bgRect = _this.bgRect;
     var dragMode = fullLayout.dragmode;
 
     if(_this.isStatic) return;
@@ -356,12 +356,12 @@ proto.updateFx = function(fullLayout, geoLayout) {
     }
 
     if(dragMode === 'pan') {
-        _this.bgRect.node().onmousedown = null;
-        framework.call(createGeoZoom(_this, geoLayout));
-        framework.on('dblclick.zoom', zoomReset);
+        bgRect.node().onmousedown = null;
+        bgRect.call(createGeoZoom(_this, geoLayout));
+        bgRect.on('dblclick.zoom', zoomReset);
     }
     else if(dragMode === 'select' || dragMode === 'lasso') {
-        framework.on('.zoom', null);
+        bgRect.on('.zoom', null);
 
         var fillRangeItems;
 
@@ -406,22 +406,24 @@ proto.updateFx = function(fullLayout, geoLayout) {
         dragElement.init(dragOptions);
     }
 
-    framework.on('mousemove', function() {
+    bgRect.on('mousemove', function() {
         var lonlat = _this.projection.invert(d3.mouse(this));
 
-        if(!lonlat || isNaN(lonlat[0]) || isNaN(lonlat[1])) return;
+        if(!lonlat || isNaN(lonlat[0]) || isNaN(lonlat[1])) {
+            return dragElement.unhover(gd, d3.event);
+        }
 
         _this.xaxis.p2c = function() { return lonlat[0]; };
         _this.yaxis.p2c = function() { return lonlat[1]; };
 
         Fx.hover(gd, d3.event, _this.id);
     });
 
-    framework.on('mouseout', function() {
-        Fx.loneUnhover(fullLayout._toppaper);
+    bgRect.on('mouseout', function() {
+        dragElement.unhover(gd, d3.event);
     });
 
-    framework.on('click', function() {
+    bgRect.on('click', function() {
         Fx.click(gd, d3.event);
     });
 };
diff --git a/test/jasmine/tests/geo_test.js b/test/jasmine/tests/geo_test.js
@@ -30,8 +30,6 @@ function move(fromX, fromY, toX, toY, delay) {
 }
 
 describe('Test Geo layout defaults', function() {
-    'use strict';
-
     var layoutAttributes = Geo.layoutAttributes;
     var supplyLayoutDefaults = Geo.supplyLayoutDefaults;
 
@@ -461,8 +459,6 @@ describe('Test Geo layout defaults', function() {
 });
 
 describe('geojson / topojson utils', function() {
-    'use strict';
-
     function _locationToFeature(topojson, loc, locationmode) {
         var trace = { locationmode: locationmode };
         var features = topojsonUtils.getTopojsonFeatures(trace, topojson);
@@ -523,8 +519,6 @@ describe('geojson / topojson utils', function() {
 });
 
 describe('Test geo interactions', function() {
-    'use strict';
-
     afterEach(destroyGraphDiv);
 
     describe('mock geo_first.json', function() {
@@ -1166,8 +1160,49 @@ describe('Test geo interactions', function() {
         .catch(fail)
         .then(done);
     });
-});
 
+    it('@noCI should clear hover label when cursor slips off subplot', function(done) {
+        var gd = createGraphDiv();
+        var fig = Lib.extendDeep({}, require('@mocks/geo_orthographic.json'));
+
+        function _assert(msg, hoverLabelCnt) {
+            expect(d3.selectAll('g.hovertext').size())
+                .toBe(hoverLabelCnt, msg);
+        }
+
+        var px = 390;
+        var py = 290;
+        var cnt = 0;
+
+        Plotly.plot(gd, fig).then(function() {
+            gd.on('plotly_unhover', function() { cnt++; });
+
+            mouseEvent('mousemove', px, py);
+            _assert('base state', 1);
+
+            return new Promise(function(resolve) {
+                var interval = setInterval(function() {
+                    px += 2;
+                    mouseEvent('mousemove', px, py);
+
+                    if(px < 402) {
+                        _assert('- px ' + px, 1);
+                        expect(cnt).toBe(0, 'no plotly_unhover event so far');
+                    } else {
+                        _assert('- px ' + px, 0);
+                        expect(cnt).toBe(1, 'plotly_unhover event count');
+
+                        clearInterval(interval);
+                        resolve();
+                    }
+                }, 100);
+            });
+        })
+        .catch(fail)
+        .then(done);
+    });
+
+});
 
 describe('Test event property of interactions on a geo plot:', function() {
     var mock = require('@mocks/geo_scattergeo-locations.json');
