From 6d6b502d7fb0f17f667962d4a70ddf01746c1189 Mon Sep 17 00:00:00 2001
From: "xuying.xu" <xuying.xu@alibaba-inc.com>
Date: Wed, 30 Apr 2025 16:40:53 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/f2/src/components/index.ts           |   2 +
 packages/f2/src/components/layout/index.tsx   | 134 +++++++++++++++
 ...3-grid\345\270\203\345\261\200-1-snap.png" | Bin 0 -> 10273 bytes
 ...75\242\345\270\203\345\261\200-1-snap.png" | Bin 0 -> 1921 bytes
 ...20\221\345\270\203\345\261\200-1-snap.png" | Bin 0 -> 1008 bytes
 ...70\252\345\233\276\350\241\250-1-snap.png" | Bin 0 -> 4511 bytes
 ...70\252\345\233\276\350\241\250-1-snap.png" | Bin 0 -> 7284 bytes
 .../f2/test/components/layout/index.test.tsx  | 162 ++++++++++++++++++
 8 files changed, 298 insertions(+)
 create mode 100644 packages/f2/src/components/layout/index.tsx
 create mode 100644 "packages/f2/test/components/layout/__image_snapshots__/index-test-tsx-\345\270\203\345\261\200\347\273\204\344\273\266-\345\270\203\345\261\200\347\261\273\345\236\213-grid\345\270\203\345\261\200-1-snap.png"
 create mode 100644 "packages/f2/test/components/layout/__image_snapshots__/index-test-tsx-\345\270\203\345\261\200\347\273\204\344\273\266-\345\270\203\345\261\200\347\261\273\345\236\213-\345\234\206\345\275\242\345\270\203\345\261\200-1-snap.png"
 create mode 100644 "packages/f2/test/components/layout/__image_snapshots__/index-test-tsx-\345\270\203\345\261\200\347\273\204\344\273\266-\345\270\203\345\261\200\347\261\273\345\236\213-\346\250\252\345\220\221\345\270\203\345\261\200-1-snap.png"
 create mode 100644 "packages/f2/test/components/layout/__image_snapshots__/index-test-tsx-\345\270\203\345\261\200\347\273\204\344\273\266-\345\270\203\345\261\200\347\261\273\345\236\213-\346\250\252\345\220\221\345\270\203\345\261\200\345\214\205\345\220\253\344\270\244\344\270\252\345\233\276\350\241\250-1-snap.png"
 create mode 100644 "packages/f2/test/components/layout/__image_snapshots__/index-test-tsx-\345\270\203\345\261\200\347\273\204\344\273\266-\345\270\203\345\261\200\347\261\273\345\236\213-\347\272\265\345\220\221\345\270\203\345\261\200\345\214\205\345\220\253\344\270\244\344\270\252\345\233\276\350\241\250-1-snap.png"
 create mode 100644 packages/f2/test/components/layout/index.test.tsx

diff --git a/packages/f2/src/components/index.ts b/packages/f2/src/components/index.ts
index 92fb5361a..943375408 100644
--- a/packages/f2/src/components/index.ts
+++ b/packages/f2/src/components/index.ts
@@ -32,4 +32,6 @@ export {
   withCandlestick,
   CandlestickView,
 } from './candlestick';
+
+export { default as Layout, ChartLayoutProps } from './layout';
 export { default as Pictorial, PictorialProps } from './pictorial';
diff --git a/packages/f2/src/components/layout/index.tsx b/packages/f2/src/components/layout/index.tsx
new file mode 100644
index 000000000..12831583a
--- /dev/null
+++ b/packages/f2/src/components/layout/index.tsx
@@ -0,0 +1,134 @@
+import { Component, jsx } from '@antv/f-engine';
+import { isString } from '@antv/util';
+
+export interface ChartLayoutProps {
+  type?: 'horizontal' | 'vertical' | 'grid' | 'circular';
+  children?: any;
+  style?: any;
+  columns?: number; // 列数
+  gap?: number | [number, number]; // 间距
+  itemStyle?: any; // 子组件容器的样式
+}
+
+export const FunctionComponent = 0;
+export const ClassComponent = 1;
+export const Shape = 2;
+
+export default class Layout extends Component<ChartLayoutProps> {
+  getWorkTag(type) {
+    if (isString(type)) {
+      return Shape;
+    }
+    if (type.prototype && type.prototype.isF2Component) {
+      return ClassComponent;
+    }
+    return FunctionComponent;
+  }
+  getLayoutStyle() {
+    const { type, style } = this.props;
+    const baseStyle = {
+      display: 'flex',
+      ...style,
+    };
+
+    switch (type) {
+      case 'horizontal':
+        return {
+          ...baseStyle,
+          flexDirection: 'row',
+          alignItems: 'center',
+        };
+      case 'vertical':
+        return {
+          ...baseStyle,
+          flexDirection: 'column',
+          alignItems: 'center',
+        };
+      case 'grid':
+        return {
+          ...baseStyle,
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          justifyContent: 'flex-start',
+          alignItems: 'flex-start',
+        };
+      case 'circular':
+        return {
+          // ...baseStyle,
+        };
+      default:
+        return baseStyle;
+    }
+  }
+
+  calculateChildrenLayout() {
+    const { type, children, columns = 3, gap = 0, itemStyle } = this.props;
+    const { width: containerWidth, height: containerHeight } = this.layout;
+    const childArray = Array.isArray(children) ? children : [children];
+    const [verticalGap, horizontalGap] = Array.isArray(gap) ? gap : [gap, gap];
+
+    return childArray.map((child, index) => {
+      const childStyle = this.context.px2hd(child.props?.style);
+      let width = childStyle?.width || containerWidth;
+      let height = childStyle?.height || containerHeight;
+      let top = 0;
+      let left = 0;
+
+      if (type === 'horizontal') {
+        // 水平布局：子元素平均分配容器宽度
+        const totalGapWidth = (childArray.length - 1) * horizontalGap;
+        const itemWidth = (containerWidth - totalGapWidth) / childArray.length;
+        width = itemWidth;
+        left = index * (itemWidth + horizontalGap);
+      } else if (type === 'vertical') {
+        // 垂直布局：子元素平均分配容器高度
+        const totalGapHeight = (childArray.length - 1) * verticalGap;
+        const itemHeight = (containerHeight - totalGapHeight) / childArray.length;
+        height = itemHeight;
+        top = index * (itemHeight + verticalGap);
+      } else if (type === 'grid') {
+        // 双向布局：根据列数计算每个子元素的宽度和位置
+        const row = Math.floor(index / columns);
+        const col = index % columns;
+        const totalGapWidth = (columns - 1) * horizontalGap;
+        const itemWidth = (containerWidth - totalGapWidth) / columns;
+        width = itemWidth;
+        left = col * (itemWidth + horizontalGap);
+        top = row * (height + verticalGap);
+      } else if (type === 'circular') {
+        // 圆形布局：将子元素均匀分布在圆周上
+        const radius = Math.min(containerWidth, containerHeight) / 2;
+        const angle = (index * 2 * Math.PI) / childArray.length;
+        left = containerWidth / 2 + radius * Math.cos(angle);
+        top = containerHeight / 2 + radius * Math.sin(angle);
+      }
+      const tag = this.getWorkTag(child.type);
+
+      if (tag === Shape) {
+        if (type === 'circular') {
+          return <group style={{ x: left, y: top, ...itemStyle }}>{child}</group>;
+        }
+        return child;
+      }
+
+      return (
+        <group
+          style={{
+            width,
+            height,
+            ...itemStyle,
+          }}
+        >
+          {child}
+        </group>
+      );
+    });
+  }
+
+  render() {
+    const layoutStyle = this.getLayoutStyle();
+    const childrenWithLayout = this.calculateChildrenLayout();
+
+    return <group style={layoutStyle}>{childrenWithLayout}</group>;
+  }
+}
diff --git "a/packages/f2/test/components/layout/__image_snapshots__/index-test-tsx-\345\270\203\345\261\200\347\273\204\344\273\266-\345\270\203\345\261\200\347\261\273\345\236\213-grid\345\270\203\345\261\200-1-snap.png" "b/packages/f2/test/components/layout/__image_snapshots__/index-test-tsx-\345\270\203\345\261\200\347\273\204\344\273\266-\345\270\203\345\261\200\347\261\273\345\236\213-grid\345\270\203\345\261\200-1-snap.png"
new file mode 100644
index 0000000000000000000000000000000000000000..63b578c2022cb7960ee54c2c2bf7cf47f0cbf740
GIT binary patch
literal 10273
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

literal 0
HcmV?d00001

diff --git "a/packages/f2/test/components/layout/__image_snapshots__/index-test-tsx-\345\270\203\345\261\200\347\273\204\344\273\266-\345\270\203\345\261\200\347\261\273\345\236\213-\345\234\206\345\275\242\345\270\203\345\261\200-1-snap.png" "b/packages/f2/test/components/layout/__image_snapshots__/index-test-tsx-\345\270\203\345\261\200\347\273\204\344\273\266-\345\270\203\345\261\200\347\261\273\345\236\213-\345\234\206\345\275\242\345\270\203\345\261\200-1-snap.png"
new file mode 100644
index 0000000000000000000000000000000000000000..aebb84cebca761f6a99473689d65125fc4d027e2
GIT binary patch
literal 1921
zcmd^A`#Tc~7@qsiI+*KHVWSg;+-fq)i4DvBGEGDn(<)@tvg972X&z!*E}<Qlxhy&^
znUiaVToPir)HzHpxfHo~=C|{lf1zLA_xs^}zUO<M@BQBIfup^ZB<K(b002m$t&z?E
zfRMJJ#sS3zXeuQ63ILF>MkCL=lDrn_b`BYM`TKoJn(VfRV?i5Yb~^-15E=!s)1wR9
z1wsd$)U`bD?jwh=^P$BR(DFj=qjdSeQ|Vzs)&=coh1~-|m%{y6?A|BhHOJrk9L%ZY
zHxlc^C;0V!;d!1kSS9EO6d(jV1IxD$m8}*QT}aF06-_UVmsxRkuDF}+%{hrt$~R?3
zuZ@gdTHPEnru(s{9VjZ{##V2dQB&se3Nf-qhnrRGYP%A3U3^0c<9JNRbmilsKiAGp
zE~J9@qCT%q59@f;GLaK>3*1h7HJ-aZ_{ZfQ8DX1BCGg{snF(0!S=tjhwn&2Nz@71l
zsAXkJ8P7`9i-W+sk)$v=lXn)fQ;g@t^@JhnEMNxqx+vMySew94rd&l7m~8bWrhaP9
z)M_ng;2wcLpWj%?=L2c%#OuIr3mbo2jfR=~@wEB%%D9OHiO*qZ;=+ZavAKmACpUUJ
zL^X{*@nWjfyh7q0CJN|GOERfh60RbkkLzIu>H#9C*RDDJH+JJ-g`{kIylv6!krM`N
zLn<(W@<@r?dB4iE#?{ht+i(!ZX7W&JoqWVvVY7+9r^}j^YSEywn)6*LYVYL-$bO=$
zvTK{}?^qdKlE0~7dMJSwTS%9hqwM`6eNcrtD00j>L`p&F1I@ZFyH#Y~(NK-$$S4V^
z7^?li2(|Ft+?X3U)P14iY7dY1MJu>ISpRSrt-N=jh#vVAp~%1S9TaSv{Tjy7Bf}I#
zp^njj7GE8~PK`vtj~S&vkPr~6eG4EA4zU3E)R!dZgZBjzKZO8vMWU&1FSMntNru`t
z+2-y#U^ChA*N%QPNfOeW&XrSJ^;Qi?DTqM39N#Mb3Wu@~kVjp;o{rQdP`e&Ag-hxi
zMOa-gp4Xu@LJxm~sX<O>7NjA9L|aPLcZ?=k_cRsHqa0T4%HY3oHUls<(lW+eqw=wD
zPP2;f7_)T)dQSa|8T^zbTCuN<ygs5I(CT@Ei$g~So<OOFkAdPb8p~QElmI*{V_qPb
zEs=Nhzt@q@P2cKwO+MF!+igk{*^A_2ri|k;LP-jy!af*qKqkc;ixKwdV(%Q)PH<j4
z=knIUyc(sfJgwogNN~R`*HS9Ck$G*ikgWU>Qb#vyNF0)g3X`sq_PPcvli!E5+QDT>
zt>}BCo2Q~>hmlk5165mChPY1xPm&7-#MBDh;wJo4y5;{z!4e;h`N9~5S2JO6Jns7A
zQm(q4HiDBi_d4Zbn-<I&bSYY6t_7-^35P2zg`Q5-n1T7Du&@_S&$P!!mZX!g%;got
z88WU9nORXW%Z{}9DpGKXBvsv9vMzFRrdTsW+~ijuRO7NPGioW2FwAT3=;1u?^(LEf
z<P4H?Cub18Z0vyX>gHX34_+cJR~^@(@*Jiut&>S*Z*T3UCP~VhnQH{3EhuUKO)oVY
z%i?6p@NiN?4@x%n^7+Mx;w10r{dD`jMt18;s<v7e=NyQ<4Y@$~BY0ozCuY1A%NxxG
zOk3VH0lT#w2&!7yCo4fn)irlm2&i$pW7kLD<YJiZ5OuVb+?$wMVDwUtbqvMV%cOoL
z30lPWytjbIPd|NTV5rh?Gq~4QN*-Z}nF&^zAXoKh5mrf);|a#p7GhH8&by|Q5aK&g
zH>B=)tc=dBMJ#8~rd*fKa8ZjO?AF1XriaS@2@BpPN*|2KVtV*B==iJ6&p1+78qeC<
z*M4vKPb``XVsV_P^YS8Pn3>f*F%kL$!kw=j_bVf2&t%={=773oXQ@D~e%~Z9A>dBl
ZE3>a)Mi>*S-YR&l05r-TSz&%9_FvCzD5U@Z

literal 0
HcmV?d00001

diff --git "a/packages/f2/test/components/layout/__image_snapshots__/index-test-tsx-\345\270\203\345\261\200\347\273\204\344\273\266-\345\270\203\345\261\200\347\261\273\345\236\213-\346\250\252\345\220\221\345\270\203\345\261\200-1-snap.png" "b/packages/f2/test/components/layout/__image_snapshots__/index-test-tsx-\345\270\203\345\261\200\347\273\204\344\273\266-\345\270\203\345\261\200\347\261\273\345\236\213-\346\250\252\345\220\221\345\270\203\345\261\200-1-snap.png"
new file mode 100644
index 0000000000000000000000000000000000000000..a90c9292da36a374e834b9bcdebe1000a6d59a2b
GIT binary patch
literal 1008
zcmeAS@N?(olHy`uVBq!ia0y~yVAKJ!Q#jawqzxnQ0R{%<?Vc`<Ar*0N?{4Hh6d=Ol
zxLe$+A#Q<-M%%0fOe%UeaysU}^H$!n^8ER~zbqf!e_PoZZ_)So<C*&v`_CEIA7N(U
z_#<M$`ucx;d&1xRr;{8M6(X8fCGbZ0ak4NqnJ(bE*6?(SgMvZ?^Y9h4<B?i0OT}S<
zpun1ASG5?K8XFQ=SEz9cWU#QTF5K$X0P;TLDo-XBDaM0YF>8es1UNXt8nPxaG`cx#
qkP2VT!T}5_(NQBt!-9l#v9E3EwA4G+Iyu0c%;4$j=d#Wzp$Pz>{XM$?

literal 0
HcmV?d00001

diff --git "a/packages/f2/test/components/layout/__image_snapshots__/index-test-tsx-\345\270\203\345\261\200\347\273\204\344\273\266-\345\270\203\345\261\200\347\261\273\345\236\213-\346\250\252\345\220\221\345\270\203\345\261\200\345\214\205\345\220\253\344\270\244\344\270\252\345\233\276\350\241\250-1-snap.png" "b/packages/f2/test/components/layout/__image_snapshots__/index-test-tsx-\345\270\203\345\261\200\347\273\204\344\273\266-\345\270\203\345\261\200\347\261\273\345\236\213-\346\250\252\345\220\221\345\270\203\345\261\200\345\214\205\345\220\253\344\270\244\344\270\252\345\233\276\350\241\250-1-snap.png"
new file mode 100644
index 0000000000000000000000000000000000000000..b310378ef20018cef219c4ae47d18b79a9ba5a0a
GIT binary patch
literal 4511
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
V@%SP@JAwfKGh-`wg%K+1e*jcCU|9eF

literal 0
HcmV?d00001

diff --git "a/packages/f2/test/components/layout/__image_snapshots__/index-test-tsx-\345\270\203\345\261\200\347\273\204\344\273\266-\345\270\203\345\261\200\347\261\273\345\236\213-\347\272\265\345\220\221\345\270\203\345\261\200\345\214\205\345\220\253\344\270\244\344\270\252\345\233\276\350\241\250-1-snap.png" "b/packages/f2/test/components/layout/__image_snapshots__/index-test-tsx-\345\270\203\345\261\200\347\273\204\344\273\266-\345\270\203\345\261\200\347\261\273\345\236\213-\347\272\265\345\220\221\345\270\203\345\261\200\345\214\205\345\220\253\344\270\244\344\270\252\345\233\276\350\241\250-1-snap.png"
new file mode 100644
index 0000000000000000000000000000000000000000..bc5a6e5e0a70e2ba2e2260258526bc2f5ea74805
GIT binary patch
literal 7284
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

literal 0
HcmV?d00001

diff --git a/packages/f2/test/components/layout/index.test.tsx b/packages/f2/test/components/layout/index.test.tsx
new file mode 100644
index 000000000..b01621134
--- /dev/null
+++ b/packages/f2/test/components/layout/index.test.tsx
@@ -0,0 +1,162 @@
+import { jsx, Component, Canvas, Chart, Line, Legend, Tooltip, TextGuide } from '../../../src';
+import { Layout } from '../../../src/components';
+import { createContext, delay } from '../../util';
+const data1 = [
+  { x: 0, y: 1, name: 'A' },
+  { x: 1, y: 2, name: 'B' },
+  { x: 2, y: 3, name: 'C' },
+  { x: 3, y: 4, name: 'D' },
+];
+
+const data2 = [
+  { x: 0, y: 4, name: 'E' },
+  { x: 1, y: 3, name: 'F' },
+  { x: 2, y: 2, name: 'G' },
+  { x: 3, y: 1, name: 'H' },
+];
+
+const ChartA = (props) => {
+  const { data, color, style } = props;
+  return (
+    <Chart data={data} color={color} style={style}>
+      <Line x="x" y="y" color={color} />
+      <Legend />
+      <Tooltip />
+      <TextGuide content={`textGuide`} records={[data[1]]} />
+    </Chart>
+  );
+};
+
+describe('布局组件', () => {
+  describe('布局类型', () => {
+    it('横向布局', async () => {
+      const context = createContext('横向布局', {
+        width: '300px',
+        height: '100px',
+      });
+      const { props } = (
+        <Canvas context={context} pixelRatio={1}>
+          <Layout type="horizontal">
+            <rect style={{ width: '50px', height: '50px', fill: '#FF5733' }} />
+            <rect style={{ width: '50px', height: '50px', fill: '#33FF57' }} />
+            <rect style={{ width: '50px', height: '50px', fill: '#3357FF' }} />
+          </Layout>
+        </Canvas>
+      );
+      const canvas = new Canvas(props);
+      await canvas.render();
+
+      await delay(1000);
+      expect(context).toMatchImageSnapshot();
+    });
+
+    it('圆形布局', async () => {
+      const context = createContext('圆形布局', {
+        width: '300px',
+        height: '100px',
+      });
+      const { props } = (
+        <Canvas context={context} pixelRatio={1}>
+          <Layout type="circular">
+            <circle style={{ r: '10px', fill: '#FF6B6B' }} />
+            <circle style={{ r: '10px', fill: '#4ECDC4' }} />
+            <circle style={{ r: '10px', fill: '#45B7D1' }} />
+            <circle style={{ r: '10px', fill: '#96CEB4' }} />
+            <circle style={{ r: '10px', fill: '#FFEEAD' }} />
+            <circle style={{ r: '10px', fill: '#D4A5A5' }} />
+          </Layout>
+        </Canvas>
+      );
+      const canvas = new Canvas(props);
+      await canvas.render();
+
+      await delay(1000);
+      expect(context).toMatchImageSnapshot();
+    });
+
+    it('横向布局包含两个图表', async () => {
+      const context = createContext('横向布局', {
+        width: '300px',
+        height: '100px',
+      });
+      const { props } = (
+        <Canvas context={context}>
+          <Layout
+            type="horizontal"
+            itemStyle={{
+              stroke: '#333333',
+              lineWidth: 1,
+            }}
+          >
+            <ChartA data={data1} color="#4ECDC4" style={{ height: '120px' }} />
+            <ChartA data={data2} color="#FF6B6B" style={{ height: '80px' }} />
+          </Layout>
+        </Canvas>
+      );
+      const canvas = new Canvas(props);
+      await canvas.render();
+
+      await delay(1000);
+      expect(context).toMatchImageSnapshot();
+    });
+
+    it('纵向布局包含两个图表', async () => {
+      const context = createContext('纵向布局包含两个图表', {
+        width: '200px',
+        height: '200px',
+      });
+
+      const { props } = (
+        <Canvas context={context}>
+          <Layout
+            type="vertical"
+            itemStyle={{
+              stroke: '#333333',
+              lineWidth: 1,
+            }}
+          >
+            <ChartA data={data1} color="#4ECDC4" />
+            <ChartA data={data2} color="#FF6B6B" />
+          </Layout>
+        </Canvas>
+      );
+      const canvas = new Canvas(props);
+      await canvas.render();
+
+      await delay(1000);
+      expect(context).toMatchImageSnapshot();
+    });
+
+    it('Grid布局', async () => {
+      const context = createContext('Grid布局', {
+        width: '300px',
+        height: '300px',
+      });
+
+      const { props } = (
+        <Canvas context={context}>
+          <Layout
+            type="grid"
+            columns={2}
+            itemStyle={{
+              stroke: '#333333',
+              lineWidth: 1,
+            }}
+          >
+            {/* 第一行 */}
+            <ChartA data={data1} color="#4ECDC4" style={{ height: '120px' }} />
+            <ChartA data={data2} color="#FF6B6B" style={{ height: '120px' }} />
+            {/* 第二行 */}
+            <ChartA data={data1} color="#96CEB4" style={{ height: '120px' }} />
+            <ChartA data={data2} color="#FFEEAD" style={{ height: '120px' }} />
+          </Layout>
+        </Canvas>
+      );
+      const canvas = new Canvas(props);
+      await canvas.render();
+
+      await delay(1000);
+      expect(context).toMatchImageSnapshot();
+    });
+  });
+});