Merge pull request #1753 from plotly/gl2d-mouseout

fix bug with unhover in gl2d
plotly · Jun 2, 2017 · c654063 · c654063
2 parents 8a253d2 + 0d8964a
commit c654063
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 4 deletions.
diff --git a/src/plots/gl2d/scene2d.js b/src/plots/gl2d/scene2d.js
@@ -67,6 +67,11 @@ function Scene2D(options, fullLayout) {
     // last pick result
     this.pickResult = null;
 
+    // is the mouse over the plot?
+    // it's OK if this says true when it's not, so long as
+    // when we get a mouseout we set it to false before handling
+    this.isMouseOver = true;
+
     this.bounds = [Infinity, Infinity, -Infinity, -Infinity];
 
     // flag to stop render loop
@@ -153,6 +158,15 @@ proto.makeFramework = function() {
     container.appendChild(canvas);
     container.appendChild(svgContainer);
     container.appendChild(mouseContainer);
+
+    var self = this;
+    mouseContainer.addEventListener('mouseout', function() {
+        self.isMouseOver = false;
+        self.unhover();
+    });
+    mouseContainer.addEventListener('mouseover', function() {
+        self.isMouseOver = true;
+    });
 };
 
 proto.toImage = function(format) {
@@ -574,7 +588,7 @@ proto.draw = function() {
 
         glplot.setDirty();
     }
-    else if(!camera.panning) {
+    else if(!camera.panning && this.isMouseOver) {
         this.selectBox.enabled = false;
 
         var size = fullLayout._size,
@@ -658,14 +672,20 @@ proto.draw = function() {
 
     // Remove hover effects if we're not over a point OR
     // if we're zooming or panning (in which case result is not set)
-    if(!result && this.lastPickResult) {
+    if(!result) {
+        this.unhover();
+    }
+
+    glplot.draw();
+};
+
+proto.unhover = function() {
+    if(this.lastPickResult) {
         this.spikes.update({});
         this.lastPickResult = null;
         this.graphDiv.emit('plotly_unhover');
         Fx.loneUnhover(this.svgContainer);
     }
-
-    glplot.draw();
 };
 
 proto.hoverFormatter = function(axisName, val) {

diff --git a/test/jasmine/tests/gl2d_click_test.js b/test/jasmine/tests/gl2d_click_test.js
@@ -13,6 +13,7 @@ var fail = require('../assets/fail_test.js');
 var click = require('../assets/timed_click');
 var hover = require('../assets/hover');
 var delay = require('../assets/delay');
+var mouseEvent = require('../assets/mouse_event');
 
 // contourgl is not part of the dist plotly.js bundle initially
 Plotly.register([
@@ -84,11 +85,17 @@ describe('Test hover and click interactions', function() {
     function makeUnhoverFn(gd, x0, y0) {
         return function() {
             return new Promise(function(resolve) {
+                var initialElement = document.elementFromPoint(x0, y0);
                 // fairly realistic simulation of moving with the cursor
                 var canceler = setInterval(function() {
                     x0 -= 2;
                     y0 -= 2;
                     hover(x0, y0);
+
+                    var nowElement = document.elementFromPoint(x0, y0);
+                    if(nowElement !== initialElement) {
+                        mouseEvent('mouseout', x0, y0, {element: initialElement});
+                    }
                 }, 10);
 
                 gd.on('plotly_unhover', function() {