adds click emission; adds test cases; uses hasWebGLSupport

Author: monfera

src/plots/gl2d/scene2d.js

@@ -58,6 +58,9 @@ function Scene2D(options, fullLayout) {
         outerFill: true
     });
 
+    // last button state
+    this.lastButtonState = 0;
+
     // last pick result
     this.pickResult = null;
 
@@ -463,8 +466,11 @@ proto.draw = function() {
     var glplot = this.glplot,
         camera = this.camera,
         mouseListener = camera.mouseListener,
+        mouseUp = this.lastButtonState === 1 && mouseListener.buttons === 0,
         fullLayout = this.fullLayout;
 
+    this.lastButtonState = mouseListener.buttons;
+
     this.cameraChanged();
 
     var x = mouseListener.x * glplot.pixelRatio;
@@ -494,8 +500,23 @@ proto.draw = function() {
             (y / glplot.pixelRatio) - (size.t + (1 - domainY[1]) * size.h)
         );
 
+        var nextSelection = result && result.object._trace.handlePick(result);
+
+        if(nextSelection && mouseUp) {
+            this.graphDiv.emit('plotly_click', {
+                points: [{
+                    trace: nextSelection.trace,
+                    dataCoord: nextSelection.dataCoord.slice(),
+                    traceCoord: nextSelection.traceCoord.slice(),
+                    textLabel: nextSelection.textLabel,
+                    color: nextSelection.color,
+                    name: nextSelection.name,
+                    hoverinfo: nextSelection.hoverinfo
+                }]
+            });
+        }
+
         if(result && result.object._trace.hoverinfo !== 'skip' && fullLayout.hovermode) {
-            var nextSelection = result.object._trace.handlePick(result);
 
             if(nextSelection && (
                 !this.lastPickResult ||

test/jasmine/assets/timed_click.js

@@ -0,0 +1,17 @@
+var mouseEvent = require('./mouse_event');
+
+module.exports = function click(x, y) {
+    mouseEvent('mousemove', x, y, {buttons: 0});
+
+    window.setTimeout(function() {
+
+        mouseEvent('mousedown', x, y, {buttons: 1});
+
+        window.setTimeout(function() {
+
+            mouseEvent('mouseup', x, y, {buttons: 0});
+
+        }, 50);
+
+    }, 150);
+};

test/jasmine/tests/gl2d_click_test.js

@@ -4,14 +4,18 @@ 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');
+var hasWebGLSupport = require('../assets/has_webgl_support');
 
 // 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 click = require('../assets/timed_click');
 var hover = require('../assets/hover');
 
 describe('Test click interactions:', function() {
+
+    if(!hasWebGLSupport('gl2d_click_test')) return;
+
     var mock = require('@mocks/gl2d_14.json');
 
     var mockCopy, gd;
@@ -97,6 +101,41 @@ describe('Test click interactions:', function() {
                 }));
 
 
+        });
+
+        it('event happens even on a click interaction', 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;
+                    });
+
+                    click(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) {
@@ -143,4 +182,110 @@ describe('Test click interactions:', function() {
 
 
     });
+
+    describe('click event is fired on click', 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_click', function(data) {
+                        futureData = data;
+                    });
+
+                    click(654.7712871743302, 316.97670766680994);
+
+                    window.setTimeout(function() {
+                        expect(futureData.points[0].traceCoord).toEqual([15.772, 0.387]);
+
+                        done();
+
+                    }, 350);
+                }));
+
+        });
+
+        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);
+                }));
+
+        });
+
+    });
 });