Update logic to correctly avoid bbox of fixed label when placing auto labels

Author: camdecoster

src/components/drawing/index.js

@@ -1368,6 +1368,7 @@ function textPointHash(node) {
 
 /**
  * Position a text label relative to its point, and join its leader line.
+ * Sets `d._tpOffset` for a label with a fixed position.
  *
  * @param s - d3 selection of one `<text>` element, inside its own `<g>`
  * @param d - the calcdata point
@@ -1397,6 +1398,8 @@ drawing.textPointPosition = function (s, d, trace, markerRadius, dontTouchParent
             markerRadius,
             svgTextUtils.lineCount(s)
         );
+        // The *auto* placement reads it, so it blocks with the box this draw gives the label
+        if (!isAuto) d._tpOffset = offset;
     }
 
     // fix the overall text group position

src/traces/scatter/auto_text_position.js

@@ -85,6 +85,7 @@ module.exports = function autoTextPosition(gd, plotinfo, traceGroups) {
             const rank = Lib.extractOption(d, trace, 'tR', 'textrank');
             const x = xaxis.c2p(d.x);
             const y = yaxis.c2p(d.y);
+            const bb = Drawing.textPointBBox(tx);
             const label = {
                 tx,
                 trace,
@@ -101,13 +102,14 @@ module.exports = function autoTextPosition(gd, plotinfo, traceGroups) {
                 // `_tpAuto` survives a relayout, so a pan or zoom keeps the labels in place where it can
                 prefer: d._tpAuto || undefined,
                 preferGap: d._tpAutoGap,
-                rect: labelRect(d, trace, x, y, Drawing.textPointBBox(tx))
+                rect: labelRect(d, trace, x, y, bb)
             };
 
             if (pos === 'auto') {
                 labels.push(label);
             } else {
-                const box = label.rect(pos, 0);
+                // `textPointPosition` stored the geometry that draws the fixed label
+                const box = boxAt(x, y, bb, d._tpOffset);
                 box.owner = d;
                 fixed.push(box);
             }
@@ -230,25 +232,25 @@ function hasAutoTextPosition(trace) {
     return tp === 'auto' || (Lib.isArrayOrTypedArray(tp) && tp.includes('auto'));
 }
 
-// the box of a label at a given position and gap, plus its leader line, in the plot frame
-function labelRect(d, trace, x, y, bb) {
-    const symbol = d.mx || (trace.marker || {}).symbol;
+// The box of a label at a given offset, plus its leader line, in the plot frame
+function boxAt(x, y, bb, offset) {
+    let x0 = x + offset.dx;
+    if (offset.anchor === 'end') x0 -= bb.width;
+    else if (offset.anchor === 'middle') x0 -= bb.width / 2;
+    const y0 = y + offset.dy + bb.top;
 
-    return (pos, gap) => {
-        const offset = Drawing.textPointBoxOffset(pos, d.mrc, symbol, bb, gap);
-
-        let x0 = x + offset.dx;
-        if (offset.anchor === 'end') x0 -= bb.width;
-        else if (offset.anchor === 'middle') x0 -= bb.width / 2;
-        const y0 = y + offset.dy + bb.top;
-
-        const seg = offset.leader;
-        return {
-            x0,
-            y0,
-            x1: x0 + bb.width,
-            y1: y0 + bb.height,
-            leader: seg ? [x + seg[0], y + seg[1], x + seg[2], y + seg[3]] : null
-        };
+    const seg = offset.leader;
+    return {
+        x0,
+        y0,
+        x1: x0 + bb.width,
+        y1: y0 + bb.height,
+        leader: seg ? [x + seg[0], y + seg[1], x + seg[2], y + seg[3]] : null
     };
 }
+
+// The box of an *auto* label at a given position and gap
+function labelRect(d, trace, x, y, bb) {
+    const symbol = d.mx || (trace.marker || {}).symbol;
+    return (pos, gap) => boxAt(x, y, bb, Drawing.textPointBoxOffset(pos, d.mrc, symbol, bb, gap));
+}

test/jasmine/tests/scatter_test.js

@@ -988,6 +988,28 @@ describe('end-to-end scatter tests', function() {
                 expect(cd[0]._tpAuto).toBeUndefined();
                 expect(cd[1]._tpAuto).toBe('bottom center');
                 expect(countOverlaps(visibleLabelBoxes())).toBe(0);
+
+                // A corner label sits farther from a large marker than a side label does.
+                // The second auto label has no free spot above its point, so it takes the strip over the fixed label.
+                return Plotly.newPlot(gd, [{
+                    mode: 'markers+text',
+                    x: [1],
+                    y: [1],
+                    text: ['Fixed label'],
+                    textposition: 'top right',
+                    marker: {size: 80}
+                }, {
+                    mode: 'markers+text',
+                    x: [1.61, 1.61],
+                    y: [1.67, 1.8],
+                    text: ['auto Q', 'auto B'],
+                    textposition: 'auto',
+                    marker: {size: 8}
+                }], layout);
+            })
+            .then(() => {
+                expect(visibleLabelBoxes().length).toBe(3, 'visible labels');
+                expect(countOverlaps(visibleLabelBoxes())).toBe(0, 'overlaps with a fixed corner label');
             })
             .then(done, done.fail);
         });