Move leaders with their labels when a selection changes the marker size

Author: camdecoster

src/components/drawing/index.js

@@ -1382,13 +1382,20 @@ drawing.textPointPosition = function (s, d, trace, markerRadius, dontTouchParent
     var textPosition = getTextPosition(d, trace);
 
     var offset;
+    let leaderSeg = d._tpAutoLeader;
     // Skip the box for an *auto* label that the placement did not reach yet,
     // because the placement measures every label in one pass right after this draw
     if (isAuto && textPosition && d._tpAuto !== undefined) {
         var symbol = d.mx || (trace.marker || {}).symbol;
         var bb = drawing.textPointBBox(s);
         offset = drawing.textPointBoxOffset(textPosition, markerRadius, symbol, bb, d._tpAutoGap);
 
+        // The placement set the leader for `d._tpAutoRadius`, so move each end by the change that another radius makes
+        if (leaderSeg && offset.leader && (markerRadius || 0) !== d._tpAutoRadius) {
+            const base = drawing.textPointBoxOffset(textPosition, d._tpAutoRadius, symbol, bb, d._tpAutoGap);
+            leaderSeg = leaderSeg.map((v, i) => v + offset.leader[i] - base.leader[i]);
+        }
+
         // a MathJax render is aligned to the anchor it had when it rendered
         group.select('svg.text-math').attr('x', +s.attr('x') - (bb.width * (1 - TEXTOFFSETSIGN[offset.anchor])) / 2);
     } else {
@@ -1414,9 +1421,9 @@ drawing.textPointPosition = function (s, d, trace, markerRadius, dontTouchParent
     // Skip the join when no leader is due and none is left over, because only *auto* draws leaders
     const first = group.node().firstChild;
     const hasLeader = first && first.nodeName === 'path' && first.classList.contains('textleader');
-    if (!d._tpAutoLeader && !hasLeader) return;
+    if (!leaderSeg && !hasLeader) return;
 
-    var leader = group.selectAll('path.textleader').data(d._tpAutoLeader ? [d._tpAutoLeader] : []);
+    const leader = group.selectAll('path.textleader').data(leaderSeg ? [leaderSeg] : []);
     leader.exit().remove();
     leader.enter().insert('path', ':first-child').classed('textleader', true).style('fill', 'none');
     leader.each(function (seg) {

src/traces/scatter/auto_text_position.js

@@ -20,7 +20,7 @@ const { textrank } = require('./attributes');
  * with the axes of its own subplot. The pass of the last group sees all traces,
  * and `_tpAuto` keeps the labels of the earlier passes in place where it can.
  *
- * Sets `_tpAuto`, `_tpAutoGap`, and `_tpAutoLeader` on every calcdata point
+ * Sets `_tpAuto`, `_tpAutoGap`, `_tpAutoLeader`, and `_tpAutoRadius` on every calcdata point
  * with an *auto* position and repositions its `<text>` node. Does nothing
  * when no trace of the plot area uses *auto*, or in the plot of a range slider,
  * where labels are never placed.
@@ -126,6 +126,8 @@ module.exports = function autoTextPosition(gd, plotinfo, traceGroups) {
         d._tpAutoGap = out ? out.gap : 0;
         // in the plot frame, so the leader does not depend on the `<text>` node in mid-transition
         d._tpAutoLeader = out ? out.leader : null;
+        // The marker radius of the leader, which a later draw can change with another marker size
+        d._tpAutoRadius = label.radius;
         Drawing.textPointPosition(label.tx, d, label.trace, d.mrc);
     }
 

test/jasmine/tests/scatter_test.js

@@ -784,6 +784,21 @@ describe('end-to-end scatter tests', function() {
             }).size();
         }
 
+        // Leaders whose label sits away from the end of the leader line
+        function detachedLeaders() {
+            let n = 0;
+            d3SelectAll('.textpoint').each(function () {
+                const leader = this.querySelector('path.textleader');
+                if (!leader || this.style.display === 'none') return;
+                const l = leader.getBoundingClientRect();
+                const t = this.querySelector('text').getBoundingClientRect();
+                const dx = Math.max(t.left - l.right, l.left - t.right, 0);
+                const dy = Math.max(t.top - l.bottom, l.top - t.bottom, 0);
+                if (Math.hypot(dx, dy) > 3) n++;
+            });
+            return n;
+        }
+
         function countOverlaps(boxes) {
             var n = 0;
             for(var i = 0; i < boxes.length; i++) {
@@ -1098,6 +1113,12 @@ describe('end-to-end scatter tests', function() {
             .then(function() {
                 expect(textPointTransforms()).toEqual(transforms);
                 expect(countOverlaps(visibleLabelBoxes())).toBe(0);
+                return Plotly.restyle(gd, 'selected.marker.size', 30);
+            })
+            .then(function() {
+                // The selected points draw their labels around the larger selected marker
+                expect(textPointTransforms()).not.toEqual(transforms);
+                expect(detachedLeaders()).toBe(0, 'detached leaders after a selection');
                 return Plotly.relayout(gd, 'xaxis.range', [1, 3]);
             })
             .then(function() {
@@ -1304,21 +1325,6 @@ describe('end-to-end scatter tests', function() {
                     .then(done, done.fail);
             });
 
-            // Leaders whose label sits away from the end of the leader line
-            function detachedLeaders() {
-                let n = 0;
-                d3SelectAll('.textpoint').each(function () {
-                    const leader = this.querySelector('path.textleader');
-                    if (!leader || this.style.display === 'none') return;
-                    const l = leader.getBoundingClientRect();
-                    const t = this.querySelector('text').getBoundingClientRect();
-                    const dx = Math.max(t.left - l.right, l.left - t.right, 0);
-                    const dy = Math.max(t.top - l.bottom, l.top - t.bottom, 0);
-                    if (Math.hypot(dx, dy) > 3) n++;
-                });
-                return n;
-            }
-
             it('should place the labels again after a pan and a reset of the axes', (done) => {
                 Plotly.newPlot(gd, [trace('A', 0, { zorder: 0 }), trace('B', 0.15, { zorder: 1 })], size())
                     .then(() => {