Hover / unhover events on the 2d WebGL plots

src/plots/gl2d/scene2d.js

@@ -33,6 +33,7 @@ function Scene2D(options, fullLayout) {
     this.staticPlot = !!options.staticPlot;
 
     this.fullLayout = fullLayout;
+    this.fullData = null;
     this.updateAxes(fullLayout);
 
     this.makeFramework();
@@ -49,6 +50,7 @@ function Scene2D(options, fullLayout) {
 
     // trace set
     this.traces = {};
+    this._inputs = {};
 
     // create axes spikes
     this.spikes = createSpikes(this.glplot);
@@ -58,6 +60,9 @@ function Scene2D(options, fullLayout) {
         outerFill: true
     });
 
+    // last button state
+    this.lastButtonState = 0;
+
     // last pick result
     this.pickResult = null;
 
@@ -332,6 +337,8 @@ proto.destroy = function() {
     this.container.removeChild(this.svgContainer);
     this.container.removeChild(this.mouseContainer);
 
+    this.fullData = null;
+    this._inputs = null;
     this.glplot = null;
     this.stopped = true;
 };
@@ -422,6 +429,8 @@ proto.updateTraces = function(fullData, calcData) {
     var traceIds = Object.keys(this.traces);
     var i, j, fullTrace;
 
+    this.fullData = fullData;
+
     // remove empty traces
     trace_id_loop:
     for(i = 0; i < traceIds.length; i++) {
@@ -443,7 +452,7 @@ proto.updateTraces = function(fullData, calcData) {
     // update / create trace objects
     for(i = 0; i < fullData.length; i++) {
         fullTrace = fullData[i];
-
+        this._inputs[fullTrace.uid] = fullTrace._input;
         var calcTrace = calcData[i],
             traceObj = this.traces[fullTrace.uid];
 
@@ -463,8 +472,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 +506,22 @@ 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: [{
+                    x: nextSelection.traceCoord[0],
+                    y: nextSelection.traceCoord[1],
+                    data: this._inputs[nextSelection.trace.uid],
+                    fullData: this.fullData,
+                    xaxis: this.xaxis,
+                    yaxis: this.yaxis
+                }]
+            });
+        }
+
         if(result && result.object._trace.hoverinfo !== 'skip' && fullLayout.hovermode) {
-            var nextSelection = result.object._trace.handlePick(result);
 
             if(nextSelection && (
                 !this.lastPickResult ||
@@ -522,6 +548,19 @@ 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: [{
+                        x: nextSelection.traceCoord[0],
+                        y: nextSelection.traceCoord[1],
+                        data: this._inputs[nextSelection.trace.uid],
+                        fullData: this.fullData,
+                        xaxis: this.xaxis,
+                        yaxis: this.yaxis
+                    }]
+                });
+
                 var hoverinfo = selection.hoverinfo;
                 if(hoverinfo !== 'all') {
                     var parts = hoverinfo.split('+');
@@ -549,6 +588,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/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);
+};