feat：增加组件bbox计算方法 (#344)

tangying1027 · web-flow · commit a7527b4a4228 · 2025-08-21T17:48:08.000+08:00
* feat: 增加组件包围盒计算

* fix: 修复flex布局计算

* chore: 导出computeComponentBBox方法
diff --git a/packages/f-engine/src/canvas/render/computeLayout.ts b/packages/f-engine/src/canvas/render/computeLayout.ts
@@ -4,7 +4,9 @@ import Children from '../../children';
 import { isNumber, isArray } from '@antv/util';
 import getShapeAttrs from '../shape';
 import { VNode } from '../vnode';
-import { Shape, FunctionComponent, getWorkTag } from '../workTags';
+import { Group } from '@antv/g-lite';
+import { createShape } from './createShape';
+import { Shape, FunctionComponent, getWorkTag, ClassComponent } from '../workTags';
 import computeCSSLayout from './css-layout';
 
 export interface INode {
@@ -151,6 +153,19 @@ function renderJSXElement(element: JSX.Element, context, updater) {
     return renderJSXElement(newElement, context, updater);
   }
 
+  if (tag === ClassComponent) {
+    // 创建组件实例
+    const instance = new (type as any)(element.props, context, updater);
+
+    if (instance.WillMount) {
+      instance.WillMount();
+    }
+
+    const newElement = instance.render();
+
+    return renderJSXElement(newElement, context, updater);
+  }
+
   const { className, style: customStyle = {}, attrs, children: newChildren } = props;
 
   const style = px2hd({
@@ -170,8 +185,18 @@ function renderJSXElement(element: JSX.Element, context, updater) {
       })
     : [];
 
+  const vNode = {
+    key: undefined,
+    tag,
+    type,
+    props,
+    context,
+    updater,
+  };
+
   return {
     type,
+    vNode,
     className,
     children: nextChildren.filter(Boolean),
     style,
@@ -270,4 +295,55 @@ function fillComponentLayout(vNode: VNode) {
   });
 }
 
-export { computeLayout, createNodeTree, computeCSSLayout, fillElementLayout, fillComponentLayout };
+function computeComponentBBox(component: Component | VNode, newChildren?: JSX.Element) {
+  const { context, updater } = component;
+  const { canvas } = context;
+  const nodeTree = renderJSXElement(newChildren, context, updater);
+
+  if (nodeTree.style?.display === 'flex') {
+    computeCSSLayout(nodeTree);
+    fillElementLayout(nodeTree);
+  }
+
+  const rootShape = new Group();
+  traverseNodeTreeAndCreateShapes(nodeTree, rootShape, context);
+
+  canvas.getRoot().appendChild(rootShape);
+
+  const bbox = rootShape.getBBox();
+  rootShape.remove();
+  return bbox;
+}
+
+function traverseNodeTreeAndCreateShapes(node, parentShape, context) {
+  if (!node) return;
+
+  const { type, children, style: originStyle, vNode } = node;
+  const { style: customStyle = {}, attrs = {} } = vNode;
+
+  const style = context.px2hd({
+    ...originStyle,
+    ...customStyle,
+    ...attrs,
+  });
+
+  const shape = createShape(type, { style });
+
+  if (parentShape) {
+    parentShape.appendChild(shape);
+  }
+
+  Children.map(children, (child) => traverseNodeTreeAndCreateShapes(child, shape, context));
+
+  return shape;
+}
+
+export {
+  computeComponentBBox,
+  computeLayout,
+  renderJSXElement,
+  createNodeTree,
+  computeCSSLayout,
+  fillElementLayout,
+  fillComponentLayout,
+};
diff --git a/packages/f-engine/src/canvas/render/createShape.ts b/packages/f-engine/src/canvas/render/createShape.ts
@@ -96,6 +96,7 @@ function createShape(type: string, props) {
   const ShapeClass = getTag(type);
   if (!ShapeClass) return null;
   // const result = checkCSSRule(type, originStyle);
+
   const shape = new ShapeClass(props);
   // @ts-ignore
   shape.gesture = addEvent(shape, props);
diff --git a/packages/f-engine/src/canvas/render/index.ts b/packages/f-engine/src/canvas/render/index.ts
@@ -16,6 +16,7 @@ import {
   computeCSSLayout,
   fillElementLayout,
   fillComponentLayout,
+  computeComponentBBox,
 } from './computeLayout';
 import findClosestShapeNode from './findClosestShapeNode';
 
@@ -76,6 +77,7 @@ function createVNode(parent: VNode, vNode: VNode) {
   const { canvas, context: parentContext, updater, animate: parentAnimate } = parent;
 
   const { ref, type, props: originProps } = vNode;
+
   const { animate, transformFrom, ...props } = originProps;
 
   const tag = getWorkTag(type);
@@ -348,6 +350,7 @@ function renderChildren(
   // 计算 flex 布局
   const nodeTree = createNodeTree(parent);
   computeCSSLayout(nodeTree);
+
   fillElementLayout(nodeTree);
   fillComponentLayout(parent);
 
@@ -442,6 +445,7 @@ export {
   render,
   renderChildren,
   updateComponents,
+  computeComponentBBox,
   computeLayout,
   destroyElement,
   getUpdateAnimation,
diff --git a/packages/f-engine/src/index.ts b/packages/f-engine/src/index.ts
@@ -1,4 +1,4 @@
-import { computeLayout } from './canvas/render';
+import { computeLayout, computeComponentBBox } from './canvas/render';
 import { Renderer as CanvasRenderer } from '@antv/g-mobile-canvas';
 import { parseColor } from '@antv/g-lite';
 import * as Smooth from './shape/util/smooth';
@@ -14,8 +14,9 @@ export { default as createRef } from './createRef';
 export { default as createContext } from './createContext';
 export { default as Timeline, TimelineProps } from './timeline';
 export { default as Gesture } from './gesture';
-export { CanvasRenderer, computeLayout, Smooth, parseColor };
+export { CanvasRenderer, computeLayout, computeComponentBBox, Smooth, parseColor };
 export { default as isEqual } from './canvas/equal';
+
 export { default as Player, PlayerProps } from './player';
 
 // 导出 ts 类型
diff --git a/packages/f-engine/test/canvas/render/computeComponent.test.tsx b/packages/f-engine/test/canvas/render/computeComponent.test.tsx
@@ -0,0 +1,170 @@
+import { jsx, Canvas, Component } from '../../../src';
+import { computeComponentBBox } from '../../../src/canvas/render';
+import { createContext, delay } from '@antv/f-test-utils';
+
+class View extends Component {
+  willMount(): void {}
+  render() {
+    const { position } = this.props;
+    return (
+      <group
+        style={{
+          fill: 'red',
+        }}
+      >
+        <circle
+          style={{
+            cx: position[0],
+            cy: position[1],
+            r: 20,
+            fill: 'red',
+          }}
+        />
+      </group>
+    );
+  }
+}
+
+class ViewWithDisplayGroup extends Component {
+  willMount(): void {}
+  render() {
+    const { style, position = [20, 0] } = this.props;
+    return (
+      <group
+        style={{
+          fill: 'blue',
+          display: 'flex',
+          x: position[0],
+          y: position[1],
+          ...style,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <text
+          style={{
+            text: 'hello',
+            textAlign: 'start',
+          }}
+        />
+      </group>
+    );
+  }
+}
+
+class ViewText extends Component {
+  willMount(): void {}
+  render() {
+    const { position } = this.props;
+    return (
+      <text
+        style={{
+          x: position[0],
+          y: position[1],
+          text: 'hello',
+        }}
+      />
+    );
+  }
+}
+
+class GuideGroup extends Component {
+  bbox = [];
+
+  willMount(): void {
+    const { children } = this.props;
+    const { updater, context } = this;
+    const childArray = Array.isArray(children) ? children : [children];
+    childArray.map((child) => {
+      const component = new child.type(child.props, context, updater);
+      component.context = context;
+
+      const bbox = computeComponentBBox(this, component.render());
+      this.bbox.push(bbox);
+    });
+  }
+  render() {
+    const { children } = this.props;
+    return <group>{children}</group>;
+  }
+}
+
+describe('computeComponent', () => {
+  it('组件bbox计算', async () => {
+    const context = createContext();
+    const ref = { current: null };
+    const guideGroupRef = { current: null };
+    const { props } = (
+      <Canvas context={context}>
+        <GuideGroup ref={guideGroupRef}>
+          <ViewText position={[40, 40]} ref={ref} />
+          <View position={[70, 70]} />
+        </GuideGroup>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+
+    await delay(100);
+
+    const bbox = guideGroupRef.current.bbox;
+    expect(bbox[0].x).toEqual(40);
+    expect(bbox[0].y).toEqual(28);
+    expect(bbox[0].width).toBeGreaterThan(0);
+    expect(bbox[0].height).toBeGreaterThan(0);
+
+    expect(bbox[1].x).toEqual(50);
+    expect(bbox[1].y).toEqual(50);
+    expect(bbox[1].width).toEqual(40);
+    expect(bbox[1].height).toEqual(40);
+  });
+
+  it('View内的group带display样式', async () => {
+    const context = createContext();
+    const guideGroupRef = { current: null };
+    const { props } = (
+      <Canvas context={context}>
+        <GuideGroup ref={guideGroupRef}>
+          <ViewWithDisplayGroup />
+        </GuideGroup>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+
+    await delay(100);
+
+    const bbox = guideGroupRef.current.bbox;
+    expect(bbox[0].x).toEqual(20);
+    expect(bbox[0].y).toEqual(0);
+    expect(bbox[0].width).toBeGreaterThan(20);
+    expect(bbox[0].height).toBeGreaterThan(10);
+  });
+
+  it('View内的group带padding样式', async () => {
+    const context = createContext();
+
+    const guideGroupRef = { current: null };
+    const { props } = (
+      <Canvas context={context}>
+        <GuideGroup ref={guideGroupRef}>
+          <ViewWithDisplayGroup position={[0, 0]} style={{ padding: [20, 20, 20, 20] }} />
+        </GuideGroup>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+
+    await delay(100);
+
+    const bbox = guideGroupRef.current.bbox;
+
+    expect(bbox[0].x).toEqual(0);
+    expect(bbox[0].y).toEqual(0);
+    expect(bbox[0].width).toBeGreaterThan(40);
+    expect(bbox[0].height).toBeGreaterThan(40);
+  });
+});
diff --git a/packages/f-engine/test/g.test.tsx b/packages/f-engine/test/g.test.tsx
@@ -1,4 +1,4 @@
-import { Canvas, CanvasEvent, Circle, convertToPath, Path, Rect } from '@antv/g-lite';
+import { Canvas, CanvasEvent, Circle, Text, convertToPath, Path, Rect, Group } from '@antv/g-lite';
 import { Renderer as CanvasRenderer } from '@antv/g-mobile-canvas';
 import '@antv/g-web-animations-api';
 import { createContext, delay } from './util';
@@ -70,4 +70,38 @@ describe('G 的测试使用', () => {
 
     await delay(1000);
   });
+
+  it('getBoxx', async () => {
+    const circle = new Circle({
+      style: {
+        cx: 50,
+        cy: 50,
+        r: 20,
+        fill: 'red',
+      },
+    });
+    const circleBBox = circle.getBBox();
+
+    const group = new Group();
+    const text = new Text({
+      style: {
+        x: 50,
+        y: 50,
+        text: 'test',
+      },
+    });
+    canvas.appendChild(group);
+    group.appendChild(text);
+    const textBBox = text.getBBox();
+
+    expect(circleBBox).toBeDefined();
+    expect(circleBBox.x).toBeCloseTo(30, 1);
+    expect(circleBBox.y).toBeCloseTo(30, 1);
+    expect(circleBBox.width).toBeCloseTo(40, 1);
+    expect(circleBBox.height).toBeCloseTo(40, 1);
+
+    expect(textBBox).toBeDefined();
+    expect(textBBox.x).toBeCloseTo(50, 1);
+    expect(textBBox.y).toBeCloseTo(34, 1);
+  });
 });
