Use rect behind text instead of text2 for collision check

Author: Daniel Gröger

Diff for: src/components/fx/hover.js

@@ -1538,6 +1538,9 @@ function hoverAvoidOverlaps(hoverLabels, rotateLabels, fullLayout, commonLabel)
         });
     }
 
+    var pX = function(x) { return x * fullLayout._invScaleX; };
+    var pY = function(y) { return y * fullLayout._invScaleY; };
+
     hoverLabels.each(function(d) {
         var ax = d[axKey];
         var crossAx = d[crossAxKey];
@@ -1551,15 +1554,29 @@ function hoverAvoidOverlaps(hoverLabels, rotateLabels, fullLayout, commonLabel)
         var pmax = (axIsX ? fullLayout.width : fullLayout.height);
         // in hovermode avoid overlap between hover labels and axis label
         if(fullLayout.hovermode === 'x' || fullLayout.hovermode === 'y') {
-            // extent of rect behind hover label on cross axis (without arrow):
+            // extent of rect behind hover label on cross axis:
             var offsets = getHoverLabelOffsets(d, rotateLabels);
-            var shiftX = getTextShiftX(d);
-            // calculation based on alignHoverText function
-            var offsetRectX = (shiftX.text2ShiftX + (shiftX.alignShift - 1) * d.tx2width / 2 + offsets.x) * fullLayout._invScaleX;
-            var offsetRectY = (offsets.y - d.by / 2 - 1) * fullLayout._invScaleY;
+            var anchor = d.anchor;
+            var horzSign = anchor === 'end' ? -1 : 1;
+            var labelMin;
+            var labelMax;
+            if(anchor === 'middle') {
+                // use extent of centered rect either on x or y axis depending on current axis
+                labelMin = d.crossPos + (axIsX ? pY(offsets.y - d.by / 2) : pX(d.bx / 2 + d.tx2width / 2));
+                labelMax = labelMin + (axIsX ? pY(d.by) : pX(d.bx));
+            } else {
+                // use extend of path (see alignHoverText function) without arrow
+                if(axIsX) {
+                    labelMin = d.crossPos + pY(HOVERARROWSIZE + offsets.y) - pY(d.by / 2 - HOVERARROWSIZE);
+                    labelMax = labelMin + pY(d.by);
+                } else {
+                    var startX = pX(horzSign * HOVERARROWSIZE + offsets.x);
+                    var endX = startX + pX(horzSign * d.bx);
+                    labelMin = d.crossPos + Math.min(startX, endX);
+                    labelMax = d.crossPos + Math.max(startX, endX);
+                }
+            }
 
-            var labelMin = d.crossPos + (axIsX ? offsetRectY : offsetRectX);
-            var labelMax = labelMin + (axIsX ? d.tx2width * fullLayout._invScaleX : (d.by + 2) * fullLayout._invScaleY);
             if(axIsX) {
                 if(axisLabelMinY !== undefined && axisLabelMaxY !== undefined && Math.min(labelMax, axisLabelMaxY) - Math.max(labelMin, axisLabelMinY) > 1) {
                     // has at least 1 pixel overlap with axis label

Diff for: test/jasmine/tests/hover_label_test.js

@@ -1582,6 +1582,39 @@ describe('hover info', function() {
             .then(done, done.fail);
         });
     });
+    describe('overlapping hover labels of different lengths', function() {
+        var data = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20].map(v=>({x:[100,200,300],y:[v,v+1,v+2]}));
+        var layout = {
+            width: 500, height: 400, showlegend: false,
+            margin: {l: 100, r: 100, t: 100, b: 100},
+            hovermode: 'x'
+        };
+
+        var gd;
+
+        beforeEach(function(done) {
+            gd = createGraphDiv();
+            Plotly.newPlot(gd, data, layout).then(done);
+        });
+
+        function labelCount() {
+            return d3Select(gd).selectAll('g.hovertext').size();
+        }
+
+        it('does not show labels that would overlap the axis hover label', function(done) {
+            _hoverNatural(gd, 130, 100);
+
+            expect(labelCount()).toBe(14);
+
+            Plotly.relayout(gd, {'yaxis.domain': [0.2, 0.8]})
+            .then(function() {
+                _hoverNatural(gd, 130, 100);
+
+                expect(labelCount()).toBe(12);
+            })
+            .then(done, done.fail);
+        });
+    });
 
     describe('alignment while avoiding overlaps:', function() {
         var gd;