Output bounding box to hover event data

draftlogs/5512_add.md

@@ -0,0 +1 @@
+ - Provide bounding box positions in hover event data [[#5512](https://github.com/plotly/plotly.js/pull/5512)]

src/components/fx/helpers.js

@@ -138,6 +138,11 @@ exports.makeEventData = function(pt, trace, cd) {
         if('yVal' in pt) out.y = pt.yVal;
         else if('y' in pt) out.y = pt.y;
 
+        if('x0' in pt) out.x0 = pt.x0;
+        if('x1' in pt) out.x1 = pt.x1;
+        if('y0' in pt) out.y0 = pt.y0;
+        if('y1' in pt) out.y1 = pt.y1;
+
         if(pt.xa) out.xaxis = pt.xa;
         if(pt.ya) out.yaxis = pt.ya;
         if(pt.zLabelVal !== undefined) out.z = pt.zLabelVal;

src/components/fx/hover.js

@@ -732,6 +732,12 @@ function _hover(gd, evt, subplot, noHoverEvent) {
     var oldhoverdata = gd._hoverdata;
     var newhoverdata = [];
 
+    // Top/left hover offsets relative to graph div. As long as hover content is
+    // a sibling of the graph div, it will be positioned correctly relative to
+    // the offset parent, whatever that may be.
+    var gTop = gd.offsetTop + gd.clientTop;
+    var gLeft = gd.offsetLeft + gd.clientLeft;
+
     // pull out just the data that's useful to
     // other people and send it to the event
     for(itemnum = 0; itemnum < hoverData.length; itemnum++) {
@@ -746,6 +752,13 @@ function _hover(gd, evt, subplot, noHoverEvent) {
             pt.hovertemplate = ht || pt.trace.hovertemplate || false;
         }
 
+        var bbox = {};
+        if('x0' in pt) bbox.x0 = pt.x0 + pt.xa._offset + gLeft;
+        if('x1' in pt) bbox.x1 = pt.x1 + pt.xa._offset + gLeft;
+        if('y0' in pt) bbox.y0 = pt.y0 + pt.ya._offset + gTop;
+        if('y1' in pt) bbox.y1 = pt.y1 + pt.ya._offset + gTop;
+        eventData.bbox = bbox;
+
         pt.eventData = [eventData];
         newhoverdata.push(eventData);
     }

src/traces/bar/event_data.js

@@ -7,6 +7,11 @@ module.exports = function eventData(out, pt, trace) {
     if(pt.xa) out.xaxis = pt.xa;
     if(pt.ya) out.yaxis = pt.ya;
 
+    if('x0' in pt) out.x0 = pt.x0;
+    if('x1' in pt) out.x1 = pt.x1;
+    if('y0' in pt) out.y0 = pt.y0;
+    if('y1' in pt) out.y1 = pt.y1;
+
     if(trace.orientation === 'h') {
         out.label = out.y;
         out.value = out.x;

src/traces/box/event_data.js

@@ -11,5 +11,10 @@ module.exports = function eventData(out, pt) {
     if(pt.xa) out.xaxis = pt.xa;
     if(pt.ya) out.yaxis = pt.ya;
 
+    if('x0' in pt) out.x0 = pt.x0;
+    if('x1' in pt) out.x1 = pt.x1;
+    if('y0' in pt) out.y0 = pt.y0;
+    if('y1' in pt) out.y1 = pt.y1;
+
     return out;
 };

src/traces/funnel/event_data.js

@@ -13,5 +13,10 @@ module.exports = function eventData(out, pt /* , trace, cd, pointNumber */) {
     if(pt.xa) out.xaxis = pt.xa;
     if(pt.ya) out.yaxis = pt.ya;
 
+    if('x0' in pt) out.x0 = pt.x0;
+    if('x1' in pt) out.x1 = pt.x1;
+    if('y0' in pt) out.y0 = pt.y0;
+    if('y1' in pt) out.y1 = pt.y1;
+
     return out;
 };

src/traces/histogram/event_data.js

@@ -11,6 +11,11 @@ module.exports = function eventData(out, pt, trace, cd, pointNumber) {
     if(pt.xa) out.xaxis = pt.xa;
     if(pt.ya) out.yaxis = pt.ya;
 
+    if('x0' in pt) out.x0 = pt.x0;
+    if('x1' in pt) out.x1 = pt.x1;
+    if('y0' in pt) out.y0 = pt.y0;
+    if('y1' in pt) out.y1 = pt.y1;
+
     // specific to histogram - CDFs do not have pts (yet?)
     if(!(trace.cumulative || {}).enabled) {
         var pts = Array.isArray(pointNumber) ?

src/traces/image/event_data.js

@@ -3,6 +3,12 @@
 module.exports = function eventData(out, pt) {
     if('xVal' in pt) out.x = pt.xVal;
     if('yVal' in pt) out.y = pt.yVal;
+
+    if('x0' in pt) out.x0 = pt.x0;
+    if('x1' in pt) out.x1 = pt.x1;
+    if('y0' in pt) out.y0 = pt.y0;
+    if('y1' in pt) out.y1 = pt.y1;
+
     if(pt.xa) out.xaxis = pt.xa;
     if(pt.ya) out.yaxis = pt.ya;
     out.color = pt.color;

src/traces/pie/event_data.js

@@ -18,7 +18,16 @@ module.exports = function eventData(pt, trace) {
         text: pt.text,
 
         // pt.v (and pt.i below) for backward compatibility
-        v: pt.v
+        v: pt.v,
+
+        // TODO: These coordinates aren't quite correct and don't take into account some offset
+        // I still haven't quite located (similar to xa._offset)
+        bbox: {
+            x0: pt.x0,
+            x1: pt.x1,
+            y0: pt.y0,
+            y1: pt.y1,
+        },
     };
 
     // Only include pointNumber if it's unambiguous

src/traces/pie/plot.js

@@ -379,12 +379,19 @@ function attachFxHandlers(sliceTop, gd, cd) {
 
         if(hoverinfo === 'all') hoverinfo = 'label+text+value+percent+name';
 
+        // If hoverinfo === 'none', we still want the *coordinates* of hover to be
+        // output, just not the hover to actually display
+        var rInscribed = pt.rInscribed || 0;
+        var hoverCenterX = cx + pt.pxmid[0] * (1 - rInscribed);
+        var hoverCenterY = cy + pt.pxmid[1] * (1 - rInscribed);
+        pt.x0 = hoverCenterX - rInscribed * cd0.r;
+        pt.x1 = hoverCenterX + rInscribed * cd0.r;
+        pt.y0 = hoverCenterY;
+        pt.y1 = hoverCenterY;
+
         // in case we dragged over the pie from another subplot,
         // or if hover is turned off
         if(trace2.hovertemplate || (hoverinfo !== 'none' && hoverinfo !== 'skip' && hoverinfo)) {
-            var rInscribed = pt.rInscribed || 0;
-            var hoverCenterX = cx + pt.pxmid[0] * (1 - rInscribed);
-            var hoverCenterY = cy + pt.pxmid[1] * (1 - rInscribed);
             var separators = fullLayout2.separators;
             var text = [];
 
@@ -406,9 +413,9 @@ function attachFxHandlers(sliceTop, gd, cd) {
 
             Fx.loneHover({
                 trace: trace,
-                x0: hoverCenterX - rInscribed * cd0.r,
-                x1: hoverCenterX + rInscribed * cd0.r,
-                y: hoverCenterY,
+                x0: pt.x0,
+                x1: pt.x1,
+                y: pt.y0,
                 text: text.join('<br>'),
                 name: (trace2.hovertemplate || hoverinfo.indexOf('name') !== -1) ? trace2.name : undefined,
                 idealAlign: pt.pxmid[0] < 0 ? 'left' : 'right',

src/traces/scattercarpet/event_data.js

@@ -7,5 +7,10 @@ module.exports = function eventData(out, pt, trace, cd, pointNumber) {
     out.b = cdi.b;
     out.y = cdi.y;
 
+    if('x0' in pt) out.x0 = pt.x0;
+    if('x1' in pt) out.x1 = pt.x1;
+    if('y0' in pt) out.y0 = pt.y0;
+    if('y1' in pt) out.y1 = pt.y1;
+
     return out;
 };

src/traces/scatterternary/event_data.js

@@ -4,6 +4,11 @@ module.exports = function eventData(out, pt, trace, cd, pointNumber) {
     if(pt.xa) out.xaxis = pt.xa;
     if(pt.ya) out.yaxis = pt.ya;
 
+    if('x0' in pt) out.x0 = pt.x0;
+    if('x1' in pt) out.x1 = pt.x1;
+    if('y0' in pt) out.y0 = pt.y0;
+    if('y1' in pt) out.y1 = pt.y1;
+
     if(cd[pointNumber]) {
         var cdi = cd[pointNumber];
 

src/traces/waterfall/event_data.js

@@ -13,5 +13,10 @@ module.exports = function eventData(out, pt /* , trace, cd, pointNumber */) {
     if(pt.xa) out.xaxis = pt.xa;
     if(pt.ya) out.yaxis = pt.ya;
 
+    if('x0' in pt) out.x0 = pt.x0;
+    if('x1' in pt) out.x1 = pt.x1;
+    if('y0' in pt) out.y0 = pt.y0;
+    if('y1' in pt) out.y1 = pt.y1;
+
     return out;
 };

test/jasmine/tests/click_test.js

@@ -115,10 +115,11 @@ describe('Test click interactions:', function() {
             expect(contextPassthroughs).toBe(0);
 
             var pt = futureData.points[0];
-            expect(Object.keys(pt)).toEqual([
+            expect(Object.keys(pt).sort()).toEqual([
                 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex',
+                'bbox', 'x0', 'x1', 'y0', 'y1',
                 'x', 'y', 'xaxis', 'yaxis'
-            ]);
+            ].sort());
             expect(pt.curveNumber).toEqual(0);
             expect(pt.pointNumber).toEqual(11);
             expect(pt.x).toEqual(0.125);
@@ -148,10 +149,11 @@ describe('Test click interactions:', function() {
                 expect(contextPassthroughs).toBe(0);
 
                 var pt = futureData.points[0];
-                expect(Object.keys(pt)).toEqual([
+                expect(Object.keys(pt).sort()).toEqual([
                     'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex',
+                    'bbox', 'x0', 'x1', 'y0', 'y1',
                     'x', 'y', 'xaxis', 'yaxis'
-                ]);
+                ].sort());
                 expect(pt.curveNumber).toEqual(0);
                 expect(pt.pointNumber).toEqual(11);
                 expect(pt.x).toEqual(0.125);
@@ -219,10 +221,11 @@ describe('Test click interactions:', function() {
                 expect(contextPassthroughs).toBe(0, i);
 
                 var pt = futureData.points[0];
-                expect(Object.keys(pt)).toEqual([
+                expect(Object.keys(pt).sort()).toEqual([
                     'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex',
+                    'bbox', 'x0', 'x1', 'y0', 'y1',
                     'x', 'y', 'xaxis', 'yaxis'
-                ]);
+                ].sort());
                 expect(pt.curveNumber).toEqual(0);
                 expect(pt.pointNumber).toEqual(11);
                 expect(pt.x).toEqual(0.125);
@@ -308,10 +311,11 @@ describe('Test click interactions:', function() {
             expect(futureData.points.length).toEqual(1);
 
             var pt = futureData.points[0];
-            expect(Object.keys(pt)).toEqual([
+            expect(Object.keys(pt).sort()).toEqual([
                 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex',
+                'bbox', 'x0', 'x1', 'y0', 'y1',
                 'x', 'y', 'xaxis', 'yaxis'
-            ]);
+            ].sort());
             expect(pt.curveNumber).toEqual(0);
             expect(pt.pointNumber).toEqual(11);
             expect(pt.x).toEqual(0.125);
@@ -341,10 +345,11 @@ describe('Test click interactions:', function() {
             expect(futureData.points.length).toEqual(1);
 
             var pt = futureData.points[0];
-            expect(Object.keys(pt)).toEqual([
+            expect(Object.keys(pt).sort()).toEqual([
                 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex',
+                'bbox', 'x0', 'x1', 'y0', 'y1',
                 'x', 'y', 'xaxis', 'yaxis'
-            ]);
+            ].sort());
             expect(pt.curveNumber).toEqual(0);
             expect(pt.pointNumber).toEqual(11);
             expect(pt.x).toEqual(0.125);
@@ -378,10 +383,11 @@ describe('Test click interactions:', function() {
                 expect(futureData.points.length).toEqual(1);
 
                 var pt = futureData.points[0];
-                expect(Object.keys(pt)).toEqual([
+                expect(Object.keys(pt).sort()).toEqual([
                     'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex',
+                    'bbox', 'x0', 'x1', 'y0', 'y1',
                     'x', 'y', 'xaxis', 'yaxis'
-                ]);
+                ].sort());
                 expect(pt.curveNumber).toEqual(0);
                 expect(pt.pointNumber).toEqual(11);
                 expect(pt.x).toEqual(0.125);

test/jasmine/tests/funnelarea_test.js

@@ -763,7 +763,7 @@ describe('funnelarea hovering', function() {
 
             var fields = [
                 'curveNumber', 'pointNumber', 'pointNumbers',
-                'data', 'fullData',
+                'data', 'fullData', 'bbox',
                 'label', 'color', 'value',
                 'percent', 'text'
             ];