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] = i;
  var calcTrace = calcData[i],
  traceObj = this.traces[fullTrace.uid];
 
@@ -455,6 +464,24 @@ proto.updateTraces = function(fullData, calcData) {
  }
 };
 
+proto.emitPointAction = function(nextSelection, eventType) {
+
+ var curveIndex = this._inputs[nextSelection.trace.uid];
+
+ this.graphDiv.emit(eventType, {
+ points: [{
+ x: nextSelection.traceCoord[0],
+ y: nextSelection.traceCoord[1],
+ curveNumber: curveIndex,
+ pointNumber: nextSelection.pointIndex,
+ data: this.fullData[curveIndex]._input,
+ fullData: this.fullData,
+ xaxis: this.xaxis,
+ yaxis: this.yaxis
+ }]
+ });
+};
+
 proto.draw = function() {
  if(this.stopped) return;
 
@@ -463,8 +490,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 +524,13 @@ 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.emitPointAction(nextSelection, 'plotly_click');
+ }
+
  if(result && result.object._trace.hoverinfo !== 'skip' && fullLayout.hovermode) {
- var nextSelection = result.object._trace.handlePick(result);
 
  if(nextSelection && (
  !this.lastPickResult ||
@@ -522,6 +557,10 @@ 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.emitPointAction(nextSelection, 'plotly_hover');
+
  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);
  }
  }

src/traces/contourgl/convert.js

@@ -60,20 +60,24 @@ function Contour(scene, uid) {
 var proto = Contour.prototype;
 
 proto.handlePick = function(pickResult) {
- var index = pickResult.pointId,
- options = this.heatmapOptions,
- shape = options.shape;
+ var options = this.heatmapOptions,
+ shape = options.shape,
+ index = pickResult.pointId,
+ xIndex = index % shape[0],
+ yIndex = Math.floor(index / shape[0]),
+ zIndex = index;
 
  return {
  trace: this,
  dataCoord: pickResult.dataCoord,
  traceCoord: [
- options.x[index % shape[0]],
- options.y[Math.floor(index / shape[0])],
- options.z[index]
+ options.x[xIndex],
+ options.y[yIndex],
+ options.z[zIndex]
  ],
  textLabel: this.textLabels[index],
  name: this.name,
+ pointIndex: [xIndex, yIndex],
  hoverinfo: this.hoverinfo
  };
 };

src/traces/heatmapgl/convert.js

@@ -46,19 +46,24 @@ function Heatmap(scene, uid) {
 var proto = Heatmap.prototype;
 
 proto.handlePick = function(pickResult) {
- var index = pickResult.pointId,
- shape = this.options.shape;
+ var options = this.options,
+ shape = options.shape,
+ index = pickResult.pointId,
+ xIndex = index % shape[0],
+ yIndex = Math.floor(index / shape[0]),
+ zIndex = index;
 
  return {
  trace: this,
  dataCoord: pickResult.dataCoord,
  traceCoord: [
-this.options.x[index % shape[0]],
-this.options.y[Math.floor(index / shape[0])],
-this.options.z[index]
+ options.x[xIndex],
+ options.y[yIndex],
+ options.z[zIndex]
  ],
  textLabel: this.textLabels[index],
  name: this.name,
+ pointIndex: [xIndex, yIndex],
  hoverinfo: this.hoverinfo
  };
 };

src/traces/pointcloud/convert.js

@@ -63,6 +63,7 @@ proto.handlePick = function(pickResult) {
  this.textLabels,
  color: this.color,
  name: this.name,
+ pointIndex: index,
  hoverinfo: this.hoverinfo
  };
 };

src/traces/scattergl/convert.js

@@ -128,6 +128,7 @@ proto.handlePick = function(pickResult) {
  this.color[index] :
  this.color,
  name: this.name,
+ pointIndex: index,
  hoverinfo: this.hoverinfo
  };
 };

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);
+};