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

draftlogs/8146_fix.md

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

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() {