Trigger hover and click events on gl3d graphs

devtools/test_dashboard/test_gl3d.js

@@ -24,11 +24,11 @@ plots['projection-traces'] = require('@mocks/gl3d_projection-traces.json');
 plots['opacity-scaling-spikes'] = require('@mocks/gl3d_opacity-scaling-spikes.json');
 plots['text-weirdness'] = require('@mocks/gl3d_text-weirdness.json');
 plots['wire-surface'] = require('@mocks/gl3d_wire-surface.json');
-plots['triangle-mesh3d'] = require('@mocks/gl3d_triangle.json');
+plots['triangle'] = require('@mocks/gl3d_triangle.json');
 plots['snowden'] = require('@mocks/gl3d_snowden.json');
 plots['bunny'] = require('@mocks/gl3d_bunny.json');
 plots['ribbons'] = require('@mocks/gl3d_ribbons.json');
-plots['scatter-time'] = require('@mocks/gl3d_scatter-date.json');
+plots['scatter-date'] = require('@mocks/gl3d_scatter-date.json');
 plots['cufflinks'] = require('@mocks/gl3d_cufflinks.json');
 plots['chrisp-nan-1'] = require('@mocks/gl3d_chrisp-nan-1.json');
 plots['marker-arrays'] = require('@mocks/gl3d_marker-arrays.json');

src/plots/gl3d/index.js

@@ -51,8 +51,9 @@ exports.plot = function plotGl3d(gd) {
         // If Scene is not instantiated, create one!
         if(scene === undefined) {
             scene = new Scene({
-                container: gd.querySelector('.gl-container'),
                 id: sceneId,
+                graphDiv: gd,
+                container: gd.querySelector('.gl-container'),
                 staticPlot: gd._context.staticPlot,
                 plotGlPixelRatio: gd._context.plotGlPixelRatio
             },

src/plots/gl3d/scene.js

@@ -34,7 +34,7 @@ var STATIC_CANVAS, STATIC_CONTEXT;
 
 function render(scene) {
 
-    //Update size of svg container
+    // update size of svg container
     var svgContainer = scene.svgContainer;
     var clientRect = scene.container.getBoundingClientRect();
     var width = clientRect.width, height = clientRect.height;
@@ -45,7 +45,7 @@ function render(scene) {
     computeTickMarks(scene);
     scene.glplot.axes.update(scene.axesOptions);
 
-    //Check if pick has changed
+    // check if pick has changed
     var keys = Object.keys(scene.traces);
     var lastPicked = null;
     var selection = scene.glplot.selection;
@@ -59,40 +59,67 @@ function render(scene) {
     }
 
     function formatter(axisName, val) {
-        if(val === undefined) return undefined;
         if(typeof val === 'string') return val;
 
         var axis = scene.fullSceneLayout[axisName];
         return Axes.tickText(axis, axis.c2l(val), 'hover').text;
     }
 
+    function makeEventData(xVal, yVal, zVal, trace, selection) {
+        return {points: [{
+            x: xVal,
+            y: yVal,
+            z: zVal,
+            data: trace._input,
+            fullData: trace,
+            curveNumber: trace.index,
+            pointNumber: selection.data.index
+        }]};
+    }
+
+    var oldEventData;
+
     if(lastPicked !== null) {
         var pdata = project(scene.glplot.cameraParams, selection.dataCoordinate),
-            hoverinfo = lastPicked.data.hoverinfo;
+            trace = lastPicked.data,
+            hoverinfo = trace.hoverinfo;
+
+        var xVal = formatter('xaxis', selection.traceCoordinate[0]),
+            yVal = formatter('yaxis', selection.traceCoordinate[1]),
+            zVal = formatter('zaxis', selection.traceCoordinate[2]);
 
         if(hoverinfo !== 'all') {
             var hoverinfoParts = hoverinfo.split('+');
-            if(hoverinfoParts.indexOf('x') === -1) selection.traceCoordinate[0] = undefined;
-            if(hoverinfoParts.indexOf('y') === -1) selection.traceCoordinate[1] = undefined;
-            if(hoverinfoParts.indexOf('z') === -1) selection.traceCoordinate[2] = undefined;
+            if(hoverinfoParts.indexOf('x') === -1) xVal = undefined;
+            if(hoverinfoParts.indexOf('y') === -1) yVal = undefined;
+            if(hoverinfoParts.indexOf('z') === -1) zVal = undefined;
             if(hoverinfoParts.indexOf('text') === -1) selection.textLabel = undefined;
             if(hoverinfoParts.indexOf('name') === -1) lastPicked.name = undefined;
         }
 
         Fx.loneHover({
-            x: (0.5 + 0.5 * pdata[0]/pdata[3]) * width,
-            y: (0.5 - 0.5 * pdata[1]/pdata[3]) * height,
-            xLabel: formatter('xaxis', selection.traceCoordinate[0]),
-            yLabel: formatter('yaxis', selection.traceCoordinate[1]),
-            zLabel: formatter('zaxis', selection.traceCoordinate[2]),
+            x: (0.5 + 0.5 * pdata[0] / pdata[3]) * width,
+            y: (0.5 - 0.5 * pdata[1] / pdata[3]) * height,
+            xLabel: xVal,
+            yLabel: yVal,
+            zLabel: zVal,
             text: selection.textLabel,
             name: lastPicked.name,
             color: lastPicked.color
         }, {
             container: svgContainer
         });
+
+        var eventType = (selection.buttons) ? 'plotly_click' : 'plotly_hover',
+            eventData = makeEventData(xVal, yVal, zVal, trace, selection);
+
+        scene.graphDiv.emit(eventType, eventData);
+        oldEventData = eventData;
+    }
+    else {
+        Fx.loneUnhover(svgContainer);
+        scene.graphDiv.emit('plotly_unhover', oldEventData);
     }
-    else Fx.loneUnhover(svgContainer);
 }
 
 function initializeGLPlot(scene, fullLayout, canvas, gl) {
@@ -108,9 +135,9 @@ function initializeGLPlot(scene, fullLayout, canvas, gl) {
         autoBounds: false
     };
 
-      //For static plots, we reuse the WebGL context as WebKit doesn't collect them
-      //reliably
-    if (scene.staticMode) {
+    // for static plots, we reuse the WebGL context
+    //  as WebKit doesn't collect them reliably
+    if(scene.staticMode) {
         if(!STATIC_CONTEXT) {
             STATIC_CANVAS = document.createElement('canvas');
             try {
@@ -176,11 +203,14 @@ function initializeGLPlot(scene, fullLayout, canvas, gl) {
 
 function Scene(options, fullLayout) {
 
-    //Create sub container for plot
+    // create sub container for plot
     var sceneContainer = document.createElement('div');
     var plotContainer = options.container;
 
-    //Create SVG container for hover text
+    // keep a ref to the graph div to fire hover+click events
+    this.graphDiv = options.graphDiv;
+
+    // create SVG container for hover text
     var svgContainer = document.createElementNS(
         'http://www.w3.org/2000/svg',
         'svg');

src/plots/plots.js

@@ -470,11 +470,10 @@ plots.supplyDefaults = function(gd) {
 };
 
 function cleanScenes(newFullLayout, oldFullLayout) {
-    var oldSceneKey,
-        oldSceneKeys = plots.getSubplotIds(oldFullLayout, 'gl3d');
+    var oldSceneKeys = plots.getSubplotIds(oldFullLayout, 'gl3d');
 
-    for (var i = 0; i < oldSceneKeys.length; i++) {
-        oldSceneKey = oldSceneKeys[i];
+    for(var i = 0; i < oldSceneKeys.length; i++) {
+        var oldSceneKey = oldSceneKeys[i];
         if(!newFullLayout[oldSceneKey] && !!oldFullLayout[oldSceneKey]._scene) {
             oldFullLayout[oldSceneKey]._scene.destroy();
         }

test/jasmine/assets/mouse_event.js

@@ -1,11 +1,16 @@
-module.exports = function(type, x, y) {
-    var options = {
+module.exports = function(type, x, y, opts) {
+    var fullOpts = {
         bubbles: true,
         clientX: x,
         clientY: y
     };
 
+    // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
+    if(opts && opts.buttons) {
+        fullOpts.buttons = opts.buttons;
+    }
+
     var el = document.elementFromPoint(x,y);
-    var ev = new window.MouseEvent(type, options);
+    var ev = new window.MouseEvent(type, fullOpts);
     el.dispatchEvent(ev);
 };

test/jasmine/karma.conf.js

@@ -39,8 +39,20 @@ func.defaultConfig = {
         testFileGlob
     ],
 
-    // list of files to exclude
+    /*
+     * WebGL interaction test cases don't run consistently
+     * across machines. Before each release, please make sure
+     * to run these with:
+     *
+     *  npm run test-jasmine -- gl_plot_interact_test.js
+     *
+     * Or manually check their specs.
+     *
+     */
     exclude: [
+        (testFileGlob === 'tests/gl_plot_interact_test.js') ?
+            '' :
+            'tests/gl_plot_interact_test.js'
     ],
 
     // preprocess matching files before serving them to the browser

test/jasmine/tests/gl_plot_interact_test.js

@@ -4,29 +4,106 @@ var Plotly = require('@lib/index');
 
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
+var mouseEvent = require('../assets/mouse_event');
 
 /*
  * WebGL interaction test cases fail on the CircleCI
  * most likely due to a WebGL/driver issue
  *
  */
 
+var PLOT_DELAY = 100;
+var MOUSE_DELAY = 20;
 
-describe('Test plot structure', function() {
+
+describe('Test gl plot interactions', function() {
     'use strict';
 
     afterEach(destroyGraphDiv);
 
     describe('gl3d plots', function() {
         var mock = require('@mocks/gl3d_marker-arrays.json');
+        var gd;
+
+        function mouseEventScatter3d(type, opts) {
+            mouseEvent(type, 605, 271, opts);
+        }
 
         beforeEach(function(done) {
-            Plotly.plot(createGraphDiv(), mock.data, mock.layout).then(done);
+            gd = createGraphDiv();
+            Plotly.plot(gd, mock.data, mock.layout).then(done);
         });
 
-        it('has one *canvas* node', function() {
-            var nodes = d3.selectAll('canvas');
-            expect(nodes[0].length).toEqual(1);
+        describe('scatter3d hover', function() {
+            var node, ptData;
+
+            beforeEach(function(done) {
+                gd.on('plotly_hover', function(eventData) {
+                    ptData = eventData.points[0];
+                });
+
+                setTimeout(function() {
+                    mouseEventScatter3d('mouseover');
+                    setTimeout(done, MOUSE_DELAY);
+                }, PLOT_DELAY);
+            });
+
+            it('should have', function() {
+                node = d3.selectAll('canvas');
+                expect(node[0].length).toEqual(1, 'one canvas node');
+
+                node = d3.selectAll('g.hovertext');
+                expect(node.size()).toEqual(1, 'one hover text group');
+
+                node = d3.selectAll('g.hovertext').selectAll('tspan')[0];
+                expect(node[0].innerHTML).toEqual('x: 140.72', 'x val on hover');
+                expect(node[1].innerHTML).toEqual('y: −96.97', 'y val on hover');
+                expect(node[2].innerHTML).toEqual('z: −96.97', 'z val on hover');
+
+                expect(Object.keys(ptData)).toEqual([
+                    'x', 'y', 'z',
+                    'data', 'fullData', 'curveNumber', 'pointNumber'
+                ], 'correct hover data fields');
+
+                expect(ptData.x).toBe('140.72', 'x val hover data');
+                expect(ptData.y).toBe('−96.97', 'y val hover data');
+                expect(ptData.z).toEqual('−96.97', 'z val hover data');
+                expect(ptData.curveNumber).toEqual(0, 'curveNumber hover data');
+                expect(ptData.pointNumber).toEqual(2, 'pointNumber hover data');
+            });
+
+        });
+
+        describe('scatter3d click events', function() {
+            var ptData;
+
+            beforeEach(function(done) {
+                gd.on('plotly_click', function(eventData) {
+                    ptData = eventData.points[0];
+                });
+
+                setTimeout(function() {
+
+                    // N.B. gl3d click events are 'mouseover' events
+                    // with button 1 pressed
+                    mouseEventScatter3d('mouseover', {buttons: 1});
+                    setTimeout(done, MOUSE_DELAY);
+                }, PLOT_DELAY);
+            });
+
+            it('should have', function() {
+                expect(Object.keys(ptData)).toEqual([
+                    'x', 'y', 'z',
+                    'data', 'fullData', 'curveNumber', 'pointNumber'
+                ], 'correct hover data fields');
+
+
+                expect(ptData.x).toBe('140.72', 'x val click data');
+                expect(ptData.y).toBe('−96.97', 'y val click data');
+                expect(ptData.z).toEqual('−96.97', 'z val click data');
+                expect(ptData.curveNumber).toEqual(0, 'curveNumber click data');
+                expect(ptData.pointNumber).toEqual(2, 'pointNumber click data');
+            });
         });
     });