feat: adaptive情况下的多行布局

Author: tangying1027

packages/f2/src/components/legend/withLegend.tsx

@@ -139,6 +139,14 @@ export default (View) => {
       };
     }
 
+    getItemBoxes(node) {
+      return (node.children || []).map((child) => {
+        const { layout } = child;
+        const { width, height } = layout;
+
+        return { width, height };
+      });
+    }
     // 计算 legend 的位置
     _init() {
       const { props, context } = this;
@@ -160,7 +168,17 @@ export default (View) => {
 
       let lineCount, itemWidth;
       if (layoutMode === 'adaptive') {
-        lineCount = 1; // adaptive模式先不考虑多行情况
+        const labelBBoxes = this.getItemBoxes(node);
+        let pos = 0;
+        lineCount = 1;
+        for (const { width: itemWidth } of labelBBoxes) {
+          if (pos + itemWidth > width) {
+            pos = itemWidth;
+            lineCount++;
+          } else {
+            pos += itemWidth;
+          }
+        }
         itemWidth = undefined;
       } else {
         // uniform模式
@@ -171,6 +189,7 @@ export default (View) => {
       }
 
       const autoHeight = itemMaxHeight * lineCount;
+
       const style: GroupStyleProps = {
         left,
         top,

packages/f2/test/components/legend/__image_snapshots__/legend-adaptive-test-tsx-adaptive-多行自适应布局-1-snap.png

@@ -263,4 +263,41 @@ describe('adaptive', () => {
     await delay(1000);
     expect(context).toMatchImageSnapshot();
   });
+
+  it('多行自适应布局', async () => {
+    const multiLineData = [
+      { genre: '债券基金', sold: 275, a: '1' },
+      { genre: '申万宏源固守+基金指数', sold: 115, a: '1' },
+      { genre: '基金指数', sold: 120, a: '1' },
+      { genre: '股票基金', sold: 300, a: '1' },
+      { genre: '混合基金', sold: 180, a: '1' },
+      { genre: '货币基金', sold: 90, a: '1' },
+      { genre: 'QDII基金', sold: 60, a: '1' },
+    ];
+
+    const context = createContext('多行自适应布局', {
+      height: '150px',
+      width: '300px',
+    });
+
+    const { props } = (
+      <Canvas context={context} pixelRatio={1}>
+        <Chart data={multiLineData}>
+          <Legend
+            layoutMode="adaptive"
+            itemStyle={{
+              stroke: 'red',
+            }}
+          />
+          <Interval x="genre" y="sold" adjust="stack" color="genre" />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+
+    await delay(1000);
+    expect(context).toMatchImageSnapshot();
+  });
 });