From 0d8964a19da952dfa3b859ddb13488a65cf0e3b1 Mon Sep 17 00:00:00 2001
From: alexcjohnson <alex@plot.ly>
Date: Fri, 2 Jun 2017 01:58:27 -0400
Subject: [PATCH] fix bug with unhover in gl2d if you mouseout of the gl2d plot
 while hovering on a point, this ensures that unhover will be triggered. prior
 to this the test "scattergl after visibility restyle" consistently failed for
 me locally

---
 src/plots/gl2d/scene2d.js             | 28 +++++++++++++++++++++++----
 test/jasmine/tests/gl2d_click_test.js |  7 +++++++
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/plots/gl2d/scene2d.js b/src/plots/gl2d/scene2d.js
index 68052f8da55..55c52183578 100644
--- 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
index e21e616aef8..0be0c45c549 100644
--- 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() {