Hover / unhover events on the 2d WebGL plots

src/plots/gl2d/scene2d.js

@@ -522,6 +522,21 @@ proto.draw = function() {
                             glplot.pixelRatio
                 ];
 
+                // this needs to happen before the next block that deletes traceCoord data
+                // also it's important to copy, otherwise data is lost by the time event data is read
+                this.graphDiv.emit('plotly_hover', {
+                    points: [{
+                        trace: nextSelection.trace,
+                        dataCoord: nextSelection.dataCoord.slice(),
+                        traceCoord: nextSelection.traceCoord.slice(),
+                        textLabel: nextSelection.textLabel,
+                        color: nextSelection.color,
+                        name: nextSelection.name,
+                        hoverinfo: nextSelection.hoverinfo,
+                        screenCoord: nextSelection.screenCoord.slice()
+                    }]
+                });
+
                 var hoverinfo = selection.hoverinfo;
                 if(hoverinfo !== 'all') {
                     var parts = hoverinfo.split('+');
@@ -549,6 +564,7 @@ proto.draw = function() {
         else if(!result && this.lastPickResult) {
             this.spikes.update({});
             this.lastPickResult = null;
+            this.graphDiv.emit('plotly_unhover');
             Fx.loneUnhover(this.svgContainer);
         }
     }

test/jasmine/assets/hover.js

@@ -0,0 +1,5 @@
+var mouseEvent = require('./mouse_event');
+
+module.exports = function hover(x, y) {
+    mouseEvent('mousemove', x, y);
+};

test/jasmine/tests/gl2d_click_test.js

@@ -0,0 +1,146 @@
+var Plotly = require('@lib/index');
+var Lib = require('@src/lib');
+
+var createGraphDiv = require('../assets/create_graph_div');
+var destroyGraphDiv = require('../assets/destroy_graph_div');
+var customMatchers = require('../assets/custom_matchers');
+
+// cartesian click events events use the hover data
+// from the mousemove events and then simulate
+// a click event on mouseup
+// var click = require('../assets/click');
+var hover = require('../assets/hover');
+
+describe('Test click interactions:', function() {
+    var mock = require('@mocks/gl2d_14.json');
+
+    var mockCopy, gd;
+
+    beforeAll(function() {
+        jasmine.addMatchers(customMatchers);
+    });
+
+    beforeEach(function() {
+        gd = createGraphDiv();
+        mockCopy = Lib.extendDeep({}, mock);
+    });
+
+    afterEach(destroyGraphDiv);
+
+    describe('hover event is fired on hover', function() {
+        var futureData;
+
+        it('in general', function(done) {
+
+            var modifiedMockCopy = Lib.extendDeep({}, mockCopy);
+
+            Plotly.plot(gd, modifiedMockCopy.data, modifiedMockCopy.layout)
+
+                .then(new Promise(function() {
+
+                    gd.on('plotly_hover', function(data) {
+                        futureData = data;
+                    });
+
+                    hover(654.7712871743302, 316.97670766680994);
+
+                    window.setTimeout(function() {
+
+                        expect(futureData.points.length).toEqual(1);
+
+                        var pt = futureData.points[0];
+
+                        expect(Object.keys(pt)).toEqual([
+                            'trace', 'dataCoord', 'traceCoord', 'textLabel', 'color',
+                            'name', 'hoverinfo', 'screenCoord'
+                        ]);
+
+                        expect(pt.traceCoord).toEqual([15.772, 0.387]);
+
+                        done();
+                    }, 250);
+                }));
+
+
+        });
+
+        it('even when hoverinfo (== plotly tooltip) is set to none', function(done) {
+
+            var modifiedMockCopy = Lib.extendDeep({}, mockCopy);
+            modifiedMockCopy.data[0].hoverinfo = 'none';
+
+            Plotly.plot(gd, modifiedMockCopy.data, modifiedMockCopy.layout)
+
+                .then(new Promise(function() {
+
+                    gd.on('plotly_hover', function(data) {
+                        futureData = data;
+                    });
+
+                    hover(654.7712871743302, 316.97670766680994);
+
+                    window.setTimeout(function() {
+
+                        expect(futureData.points.length).toEqual(1);
+
+                        var pt = futureData.points[0];
+
+                        expect(Object.keys(pt)).toEqual([
+                            'trace', 'dataCoord', 'traceCoord', 'textLabel', 'color',
+                            'name', 'hoverinfo', 'screenCoord'
+                        ]);
+
+                        expect(pt.traceCoord).toEqual([15.772, 0.387]);
+
+                        done();
+                    }, 250);
+                }));
+
+
+        });
+
+        it('unhover happens', function(done) {
+
+            var modifiedMockCopy = Lib.extendDeep({}, mockCopy);
+            modifiedMockCopy.data[0].hoverinfo = 'none';
+
+            Plotly.plot(gd, modifiedMockCopy.data, modifiedMockCopy.layout)
+
+                .then(new Promise(function() {
+
+                    futureData = undefined;
+
+                    gd.on('plotly_unhover', function() {
+                        futureData = 'emitted plotly_unhover';
+                    });
+
+                    hover(654.7712871743302, 316.97670766680994);
+
+                    // fairly realistic simulation of moving with the cursor
+                    window.setTimeout(function() {
+
+                        var x = 654, y = 316; // we start here
+                        var canceler = window.setInterval(function() {
+                            hover(x--, y++); // move the cursor
+                        }, 10);
+
+                        window.setTimeout(function() {
+                            window.clearInterval(canceler); // stop the mouse at some point
+                        }, 250);
+
+                        window.setTimeout(function() {
+
+                            expect(futureData).toEqual('emitted plotly_unhover');
+
+                            done();
+
+                        }, 250);
+
+                    }, 250);
+                }));
+
+        });
+
+
+    });
+});