fix: legend resize

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();
     }
 

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();
+  });
 });