feat: 增加组件包围盒计算

Author: tangying1027

packages/f-engine/src/canvas/render/computeComponent.ts

@@ -0,0 +1,43 @@
+import { JSX } from '../../jsx/jsx-namespace';
+import Component from '../../component';
+import { renderJSXElement, computeCSSLayout } from './computeLayout';
+import { createShape } from './createShape';
+import { VNode } from '../vnode';
+import { Group } from '@antv/g-lite';
+import Children from '../../children';
+
+function computeComponent(component: Component | VNode, newChildren?: JSX.Element) {
+  const { context, updater } = component;
+  const { canvas } = context;
+  const nodeTree = renderJSXElement(newChildren, context, updater);
+
+  computeCSSLayout(nodeTree);
+
+  const rootShape = new Group();
+  traverseNodeTreeAndCreateShapes(nodeTree, rootShape);
+
+  canvas.getRoot().appendChild(rootShape);
+  const bbox = rootShape.getBBox();
+  rootShape.remove();
+  return bbox;
+}
+
+function traverseNodeTreeAndCreateShapes(node, parentShape) {
+  if (!node) return;
+
+  const { type, style, children } = node;
+
+  // Create the shape for this node
+  const shape = createShape(type, { style });
+
+  // Add to parent
+  if (parentShape) {
+    parentShape.appendChild(shape);
+  }
+
+  Children.map(children, (child) => traverseNodeTreeAndCreateShapes(child, shape));
+
+  return shape;
+}
+
+export { computeComponent };

packages/f-engine/src/canvas/render/computeLayout.ts

@@ -4,7 +4,7 @@ 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 { Shape, FunctionComponent, getWorkTag, ClassComponent } from '../workTags';
 import computeCSSLayout from './css-layout';
 
 export interface INode {
@@ -151,6 +151,20 @@ 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.componentWillMount) {
+      instance.componentWillMount();
+    }
+
+    const newElement = instance.render();
+
+    return renderJSXElement(newElement, context, updater);
+  }
+
   const { className, style: customStyle = {}, attrs, children: newChildren } = props;
 
   const style = px2hd({
@@ -270,4 +284,11 @@ function fillComponentLayout(vNode: VNode) {
   });
 }
 
-export { computeLayout, createNodeTree, computeCSSLayout, fillElementLayout, fillComponentLayout };
+export {
+  computeLayout,
+  renderJSXElement,
+  createNodeTree,
+  computeCSSLayout,
+  fillElementLayout,
+  fillComponentLayout,
+};

packages/f-engine/test/canvas/render/computeComponent.test.tsx

@@ -0,0 +1,102 @@
+import { jsx, Canvas, Component, computeLayout } from '../../../src';
+import { computeComponent } from '../../../src/canvas/render/computeComponent';
+import { createContext, delay } from '../../util';
+
+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 ViewText extends Component {
+  willMount(): void {}
+  render() {
+    const { position } = this.props;
+    return (
+      <group
+        style={{
+          fill: 'red',
+        }}
+      >
+        <text
+          style={{
+            x: position[0],
+            y: position[1],
+            text: 'hello',
+          }}
+        />
+      </group>
+    );
+  }
+}
+
+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 = computeComponent(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);
+  });
+});

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