Enable Hover and Click Events Anywhere

draftlogs/7707_add.md

@@ -0,0 +1 @@
+ - Add `hoveranywhere` and `clickanywhere` layout attributes to emit hover and click events anywhere in the plot area, not just over traces [[#7707](https://github.com/plotly/plotly.js/pull/7707)]

src/components/fx/click.js

@@ -5,6 +5,7 @@ var hover = require('./hover').hover;
 
 module.exports = function click(gd, evt, subplot) {
     var annotationsDone = Registry.getComponentMethod('annotations', 'onClick')(gd, gd._hoverdata);
+    var fullLayout = gd._fullLayout;
 
     // fallback to fail-safe in case the plot type's hover method doesn't pass the subplot.
     // Ternary, for example, didn't, but it was caught because tested.
@@ -14,9 +15,20 @@ module.exports = function click(gd, evt, subplot) {
         hover(gd, evt, subplot, true);
     }
 
-    function emitClick() { gd.emit('plotly_click', {points: gd._hoverdata, event: evt}); }
+    function emitClick() {
+        var clickData = {points: gd._hoverdata, event: evt};
+
+        // get coordinate values from latest hover call, if available
+        clickData.xaxes ??= gd._hoverXAxes;
+        clickData.yaxes ??= gd._hoverYAxes;
+        clickData.xvals ??= gd._hoverXVals;
+        clickData.yvals ??= gd._hoverYVals;
 
-    if(gd._hoverdata && evt && evt.target) {
+        gd.emit('plotly_click', clickData);
+    }
+
+    if((gd._hoverdata || fullLayout.clickanywhere) && evt && evt.target) {
+        if(!gd._hoverdata) gd._hoverdata = [];
         if(annotationsDone && annotationsDone.then) {
             annotationsDone.then(emitClick);
         } else emitClick();

src/components/fx/hover.js

@@ -167,6 +167,11 @@ exports.loneHover = function loneHover(hoverItems, opts) {
                 y1: y1 + gTop
             };
 
+            // xPixel/yPixel are pixel coordinates of the hover point's center,
+            // relative to the top-left corner of the graph div
+            eventData.xPixel = (_x0 + _x1) / 2;
+            eventData.yPixel = (_y0 + _y1) / 2;
+
             if (opts.inOut_bbox) {
                 opts.inOut_bbox.push(eventData.bbox);
             }
@@ -473,6 +478,14 @@ function _hover(gd, evt, subplot, noHoverEvent, eventTarget) {
         }
     }
 
+    // Save coordinate values so clickanywhere can be used without hoveranywhere
+    if (fullLayout.clickanywhere) {
+        gd._hoverXVals = xvalArray;
+        gd._hoverYVals = yvalArray;
+        gd._hoverXAxes = xaArray;
+        gd._hoverYAxes = yaArray;
+    }
+
     // the pixel distance to beat as a matching point
     // in 'x' or 'y' mode this resets for each trace
     var distance = Infinity;
@@ -778,6 +791,18 @@ function _hover(gd, evt, subplot, noHoverEvent, eventTarget) {
                 createSpikelines(gd, spikePoints, spikelineOpts);
             }
         }
+
+        if (fullLayout.hoveranywhere && !noHoverEvent && eventTarget) {
+            var oldHoverData = gd._hoverdata;
+            if (oldHoverData && oldHoverData.length) {
+                gd.emit('plotly_unhover', {
+                    event: evt,
+                    points: oldHoverData
+                });
+                gd._hoverdata = [];
+            }
+            emitHover([]);
+        }
         return result;
     }
 
@@ -877,6 +902,9 @@ function _hover(gd, evt, subplot, noHoverEvent, eventTarget) {
                 y0: y0 + gTop,
                 y1: y1 + gTop
             };
+
+            eventData.xPixel = (_x0 + _x1) / 2;
+            eventData.yPixel = (_y0 + _y1) / 2;
         }
 
         pt.eventData = [eventData];
@@ -914,23 +942,28 @@ function _hover(gd, evt, subplot, noHoverEvent, eventTarget) {
     }
 
     // don't emit events if called manually
-    if (!eventTarget || noHoverEvent || !hoverChanged(gd, evt, oldhoverdata)) return;
+    var _hoverChanged = hoverChanged(gd, evt, oldhoverdata);
+    if (!eventTarget || noHoverEvent || (!_hoverChanged && !fullLayout.hoveranywhere)) return;
 
-    if (oldhoverdata) {
+    if (oldhoverdata && _hoverChanged) {
         gd.emit('plotly_unhover', {
             event: evt,
             points: oldhoverdata
         });
     }
 
-    gd.emit('plotly_hover', {
-        event: evt,
-        points: gd._hoverdata,
-        xaxes: xaArray,
-        yaxes: yaArray,
-        xvals: xvalArray,
-        yvals: yvalArray
-    });
+    emitHover(gd._hoverdata);
+
+    function emitHover(points) {
+        gd.emit('plotly_hover', {
+            event: evt,
+            points: points,
+            xaxes: xaArray,
+            yaxes: yaArray,
+            xvals: xvalArray,
+            yvals: yvalArray
+        });
+    }
 }
 
 function hoverDataKey(d) {

src/components/fx/hovermode_defaults.js

@@ -13,5 +13,7 @@ module.exports = function handleHoverModeDefaults(layoutIn, layoutOut) {
 
     coerce('clickmode');
     coerce('hoversubplots');
+    coerce('hoveranywhere');
+    coerce('clickanywhere');
     return coerce('hovermode');
 };

src/components/fx/layout_attributes.js

@@ -91,6 +91,28 @@ module.exports = {
             'when `hovermode` is set to *x*, *x unified*, *y* or *y unified*.',
         ].join(' ')
     },
+    hoveranywhere: {
+        valType: 'boolean',
+        dflt: false,
+        editType: 'none',
+        description: [
+            'If true, `plotly_hover` events will fire for any cursor position',
+            'within the plot area, not just over traces.',
+            'When the cursor is not over a trace, the event will have an empty `points` array',
+            'but will include `xvals` and `yvals` with cursor coordinates in data space.'
+        ].join(' ')
+    },
+    clickanywhere: {
+        valType: 'boolean',
+        dflt: false,
+        editType: 'none',
+        description: [
+            'If true, `plotly_click` events will fire for any click position',
+            'within the plot area, not just over traces.',
+            'When clicking where there is no trace data, the event will have an empty `points` array',
+            'but will include `xvals` and `yvals` with click coordinates in data space.'
+        ].join(' ')
+    },
     hoverdistance: {
         valType: 'integer',
         min: -1,

test/jasmine/tests/click_test.js

@@ -119,7 +119,7 @@ describe('Test click interactions:', function() {
             expect(Object.keys(pt).sort()).toEqual([
                 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex',
                 'bbox',
-                'x', 'y', 'xaxis', 'yaxis'
+                'x', 'y', 'xaxis', 'yaxis', 'xPixel', 'yPixel'
             ].sort());
             expect(pt.curveNumber).toEqual(0);
             expect(pt.pointNumber).toEqual(11);
@@ -153,7 +153,7 @@ describe('Test click interactions:', function() {
                 expect(Object.keys(pt).sort()).toEqual([
                     'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex',
                     'bbox',
-                    'x', 'y', 'xaxis', 'yaxis'
+                    'x', 'y', 'xaxis', 'yaxis', 'xPixel', 'yPixel'
                 ].sort());
                 expect(pt.curveNumber).toEqual(0);
                 expect(pt.pointNumber).toEqual(11);
@@ -225,7 +225,7 @@ describe('Test click interactions:', function() {
                 expect(Object.keys(pt).sort()).toEqual([
                     'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex',
                     'bbox',
-                    'x', 'y', 'xaxis', 'yaxis'
+                    'x', 'y', 'xaxis', 'yaxis', 'xPixel', 'yPixel'
                 ].sort());
                 expect(pt.curveNumber).toEqual(0);
                 expect(pt.pointNumber).toEqual(11);
@@ -315,7 +315,7 @@ describe('Test click interactions:', function() {
             expect(Object.keys(pt).sort()).toEqual([
                 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex',
                 'bbox',
-                'x', 'y', 'xaxis', 'yaxis'
+                'x', 'y', 'xaxis', 'yaxis', 'xPixel', 'yPixel'
             ].sort());
             expect(pt.curveNumber).toEqual(0);
             expect(pt.pointNumber).toEqual(11);
@@ -349,7 +349,7 @@ describe('Test click interactions:', function() {
             expect(Object.keys(pt).sort()).toEqual([
                 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex',
                 'bbox',
-                'x', 'y', 'xaxis', 'yaxis'
+                'x', 'y', 'xaxis', 'yaxis', 'xPixel', 'yPixel'
             ].sort());
             expect(pt.curveNumber).toEqual(0);
             expect(pt.pointNumber).toEqual(11);
@@ -387,7 +387,7 @@ describe('Test click interactions:', function() {
                 expect(Object.keys(pt).sort()).toEqual([
                     'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex',
                     'bbox',
-                    'x', 'y', 'xaxis', 'yaxis'
+                    'x', 'y', 'xaxis', 'yaxis', 'xPixel', 'yPixel'
                 ].sort());
                 expect(pt.curveNumber).toEqual(0);
                 expect(pt.pointNumber).toEqual(11);

test/jasmine/tests/geo_test.js

@@ -882,7 +882,7 @@ describe('Test geo interactions', function() {
             it('should contain the correct fields', function() {
                 expect(Object.keys(ptData).sort()).toEqual([
                     'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'bbox',
-                    'lon', 'lat', 'location', 'marker.size'
+                    'lon', 'lat', 'location', 'marker.size', 'xPixel', 'yPixel'
                 ].sort());
                 expect(cnt).toEqual(1);
             });
@@ -947,7 +947,7 @@ describe('Test geo interactions', function() {
             it('should contain the correct fields', function() {
                 expect(Object.keys(ptData).sort()).toEqual([
                     'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'bbox',
-                    'lon', 'lat', 'location', 'marker.size'
+                    'lon', 'lat', 'location', 'marker.size', 'xPixel', 'yPixel'
                 ].sort());
             });
 
@@ -979,7 +979,7 @@ describe('Test geo interactions', function() {
             it('should contain the correct fields', function() {
                 expect(Object.keys(ptData).sort()).toEqual([
                     'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'bbox',
-                    'lon', 'lat', 'location', 'marker.size'
+                    'lon', 'lat', 'location', 'marker.size', 'xPixel', 'yPixel'
                 ].sort());
             });
 
@@ -1008,7 +1008,7 @@ describe('Test geo interactions', function() {
             it('should contain the correct fields', function() {
                 expect(Object.keys(ptData).sort()).toEqual([
                     'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'bbox',
-                    'location', 'z', 'ct'
+                    'location', 'z', 'ct', 'xPixel', 'yPixel'
                 ].sort());
             });
 
@@ -1036,7 +1036,7 @@ describe('Test geo interactions', function() {
             it('should contain the correct fields', function() {
                 expect(Object.keys(ptData).sort()).toEqual([
                     'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'bbox',
-                    'location', 'z', 'ct'
+                    'location', 'z', 'ct', 'xPixel', 'yPixel'
                 ].sort());
             });
 
@@ -1068,7 +1068,7 @@ describe('Test geo interactions', function() {
             it('should contain the correct fields', function() {
                 expect(Object.keys(ptData).sort()).toEqual([
                     'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'bbox',
-                    'location', 'z', 'ct'
+                    'location', 'z', 'ct', 'xPixel', 'yPixel'
                 ].sort());
             });
 
@@ -1792,7 +1792,7 @@ describe('Test event property of interactions on a geo plot:', function() {
             expect(Object.keys(pt).sort()).toEqual([
                 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'bbox',
                 'lon', 'lat',
-                'location', 'text', 'marker.size'
+                'location', 'text', 'marker.size', 'xPixel', 'yPixel'
             ].sort());
 
             expect(pt.curveNumber).toEqual(0, 'points[0].curveNumber');
@@ -1896,7 +1896,7 @@ describe('Test event property of interactions on a geo plot:', function() {
             expect(Object.keys(pt).sort()).toEqual([
                 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'bbox',
                 'lon', 'lat',
-                'location', 'text', 'marker.size'
+                'location', 'text', 'marker.size', 'xPixel', 'yPixel'
             ].sort());
 
             expect(pt.curveNumber).toEqual(0, 'points[0].curveNumber');
@@ -1937,7 +1937,7 @@ describe('Test event property of interactions on a geo plot:', function() {
                 expect(Object.keys(pt).sort()).toEqual([
                     'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'bbox',
                     'lon', 'lat',
-                    'location', 'text', 'marker.size'
+                    'location', 'text', 'marker.size', 'xPixel', 'yPixel'
                 ].sort());
 
                 expect(pt.curveNumber).toEqual(0, 'points[0].curveNumber');