From 8d57a2ce8fb3ad67a9f6b5934021585d8ec6a85c Mon Sep 17 00:00:00 2001
From: tangying1027 <33517362+tangying1027@users.noreply.github.com>
Date: Tue, 2 Jan 2024 15:27:43 +0800
Subject: [PATCH] fix: legend resize (#1912)

Co-authored-by: xuying.xu <xuying.xu@alibaba-inc.com>
---
 .../f2/src/components/legend/withLegend.tsx   |   1 +
 ...-tsx-canvas-chart-resize-legend-1-snap.png | Bin 0 -> 5973 bytes
 .../f2/test/components/canvas/canvas.test.tsx |  45 +++++++++++++++++-
 3 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 packages/f2/test/components/canvas/__image_snapshots__/canvas-test-tsx-canvas-chart-resize-legend-1-snap.png

diff --git a/packages/f2/src/components/legend/withLegend.tsx b/packages/f2/src/components/legend/withLegend.tsx
index 61927aa37..bda0044fe 100644
--- a/packages/f2/src/components/legend/withLegend.tsx
+++ b/packages/f2/src/components/legend/withLegend.tsx
@@ -223,6 +223,7 @@ export default (View) => {
     willUpdate(): void {
       const items = this.getItems();
       if (!items || !items.length) return;
+      this._init();
       this.updateCoord();
     }
 
diff --git a/packages/f2/test/components/canvas/__image_snapshots__/canvas-test-tsx-canvas-chart-resize-legend-1-snap.png b/packages/f2/test/components/canvas/__image_snapshots__/canvas-test-tsx-canvas-chart-resize-legend-1-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..1a93a672a85aebcae714b132d3fa17271c296cfc
GIT binary patch
literal 5973
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
Tq5mJyE(ht~G)9rHJ3sy(t1{7q

literal 0
HcmV?d00001

diff --git a/packages/f2/test/components/canvas/canvas.test.tsx b/packages/f2/test/components/canvas/canvas.test.tsx
index ae7fe1725..4ef7e1d1c 100644
--- a/packages/f2/test/components/canvas/canvas.test.tsx
+++ b/packages/f2/test/components/canvas/canvas.test.tsx
@@ -1,6 +1,7 @@
 import { jsx } from '../../../src';
 import { createContext, delay } from '../../util';
-import { Canvas, Component, Chart, Interval } from '../../../src';
+import { Canvas, Component, Chart, Interval, Legend } from '../../../src';
+
 const context = createContext('', {
   width: '300px',
   height: '300px',
@@ -13,6 +14,25 @@ const data = [
   { type: 'a', genre: 'Shooter', sold: 20 },
   { type: 'a', genre: 'Other', sold: 40 },
 ];
+
+const data2 = [
+  { type: '增额终身寿', genre: 'Sports', sold: 5 },
+  { type: '增额终身寿', genre: 'Strategy', sold: 10 },
+  { type: '增额终身寿', genre: 'Action', sold: 20 },
+  { type: '增额终身寿', genre: 'Shooter', sold: 20 },
+  { type: '增额终身寿', genre: 'Other', sold: 40 },
+  { type: '增额终身寿2.0', genre: 'Sports', sold: 3 },
+  { type: '增额终身寿2.0', genre: 'Strategy', sold: 7 },
+  { type: '增额终身寿2.0', genre: 'Action', sold: 16 },
+  { type: '增额终身寿2.0', genre: 'Shooter', sold: 18 },
+  { type: '增额终身寿2.0', genre: 'Other', sold: 37 },
+  { type: '鑫相守增额寿', genre: 'Sports', sold: 2 },
+  { type: '鑫相守增额寿', genre: 'Strategy', sold: 6 },
+  { type: '鑫相守增额寿', genre: 'Action', sold: 16 },
+  { type: '鑫相守增额寿', genre: 'Shooter', sold: 18 },
+  { type: '鑫相守增额寿', genre: 'Other', sold: 32 },
+];
+
 class Test extends Component {
   render() {
     return (
@@ -76,4 +96,27 @@ describe('Canvas', () => {
     await delay(1000);
     expect(context).toMatchImageSnapshot();
   });
+
+  it('chart resize legend', async () => {
+    const chartRef = { current: null };
+    const context = createContext('chart resize legend');
+    const width = 300;
+    const height = 300;
+    const { type, props } = (
+      <Canvas context={context} pixelRatio={1} animate={false} width={width} height={height}>
+        <Chart ref={chartRef} data={data2} coord={{ transposed: true }}>
+          <Interval x="genre" y="sold" color="type" adjust="dodge" />
+          <Legend></Legend>
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+
+    await delay(1000);
+    await canvas.resize(200, 200);
+    await delay(1000);
+    expect(context).toMatchImageSnapshot();
+  });
 });