fix(pie): clear stale leader lines when outside labels move back inside

A redraw without a recalc (for example a resize through relayout or react)
reuses the calcdata points. The plot step set labelExtraX, labelExtraY and
yLabelMid only for labels that were outside on the current draw. A label
that moved back inside kept the values of the previous draw. scootLabels
then treated the label as an outside label, and plotTextLines drew its old
leader line and shifted the other labels.

Reset this state for every slice at the start of each draw.

Fixes #4979 and #5616.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: b84330808

draftlogs/0000_fix.md

@@ -0,0 +1 @@
+ - Remove stale leader lines and label offsets of pie slices when the labels move back inside after a resize [[#0000](https://github.com/plotly/plotly.js/pull/0000)]

src/traces/pie/plot.js

@@ -54,6 +54,14 @@ function plot(gd, cdModule) {
             var hasOutsideText = false;
 
             slices.each(function (pt, i) {
+                // Clear the outside-label state of the previous draw.
+                // Otherwise a label that moved back inside keeps its old leader line and offset.
+                pt.yLabelMin = undefined;
+                pt.yLabelMid = undefined;
+                pt.yLabelMax = undefined;
+                pt.labelExtraX = 0;
+                pt.labelExtraY = 0;
+
                 if (pt.hidden) {
                     d3.select(this).selectAll('path,g').remove();
                     return;
@@ -219,8 +227,6 @@ function plot(gd, cdModule) {
                         pt.yLabelMin = targetY - textBB.height / 2;
                         pt.yLabelMid = targetY;
                         pt.yLabelMax = targetY + textBB.height / 2;
-                        pt.labelExtraX = 0;
-                        pt.labelExtraY = 0;
                         hasOutsideText = true;
                     }
 

test/jasmine/tests/pie_test.js

@@ -1671,6 +1671,43 @@ describe('pie relayout', function() {
         })
         .then(done, done.fail);
     });
+
+    it('removes leader lines and label offsets that a larger size no longer needs', (done) => {
+        const labels = [];
+        const values = [];
+        for (let i = 0; i < 8; i++) {
+            labels.push(`Label ${i}`);
+            values.push(i < 4 ? 20 : 3);
+        }
+        const data = [{ type: 'pie', labels, values, textposition: 'auto', textinfo: 'label' }];
+        const largeLayout = { width: 1000, height: 1000, showlegend: false };
+        const countTextLines = () => d3SelectAll('.pielayer path.textline').size();
+        const getTextTransforms = () => {
+            const transforms = [];
+            d3SelectAll(SLICES_TEXT_SELECTOR).each(function () {
+                transforms.push(this.getAttribute('transform'));
+            });
+            return transforms;
+        };
+        let textLinesAfterRelayout;
+        let transformsAfterRelayout;
+
+        Plotly.newPlot(gd, data, { width: 300, height: 300, showlegend: false })
+            .then(() => {
+                expect(countTextLines()).toBeGreaterThan(0, 'leader lines at the small size');
+                return Plotly.relayout(gd, { width: largeLayout.width, height: largeLayout.height });
+            })
+            .then(() => {
+                textLinesAfterRelayout = countTextLines();
+                transformsAfterRelayout = getTextTransforms();
+                return Plotly.newPlot(gd, data, largeLayout);
+            })
+            .then(() => {
+                expect(textLinesAfterRelayout).toBe(countTextLines(), 'leader lines after relayout');
+                expect(transformsAfterRelayout).toEqual(getTextTransforms());
+            })
+            .then(done, done.fail);
+    });
 });
 
 describe('Test pie interactions edge cases:', function() {