chore: 导出computeComponentBBox方法

Author: tangying1027

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

@@ -188,7 +188,7 @@ function renderJSXElement(element: JSX.Element, context, updater) {
 
   const vNode = {
     key: undefined,
-    tag: ClassComponent,
+    tag,
     type,
     props,
     context,
@@ -215,7 +215,7 @@ function computeLayout(component: Component, newChildren: JSX.Element) {
   return new NodeTree(nodeTree);
 }
 
-export function createChildNodeTree(parent: VNode, vNodeChildren: VNode | VNode[]) {
+function createChildNodeTree(parent: VNode, vNodeChildren: VNode | VNode[]) {
   const { tag } = parent;
   const children = extendMap(vNodeChildren, (child: VNode) => {
     const { tag: childTag, style: childStyle, children: childChildren } = child;
@@ -320,7 +320,7 @@ function traverseNodeTreeAndCreateShapes(node, parentShape, context) {
   if (!node) return;
 
   const { type, children, style: originStyle, vNode } = node;
-  const { style: customStyle = {}, attrs } = vNode;
+  const { style: customStyle = {}, attrs = {} } = vNode;
 
   const style = context.px2hd({
     ...originStyle,

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

@@ -16,6 +16,7 @@ import {
   computeCSSLayout,
   fillElementLayout,
   fillComponentLayout,
+  computeComponentBBox,
 } from './computeLayout';
 import findClosestShapeNode from './findClosestShapeNode';
 
@@ -28,7 +29,7 @@ function pickElement(element: JSX.Element | JSX.Element[] | null) {
   });
 }
 
-export function getStyle(tagType: WorkTag, props, context) {
+function getStyle(tagType: WorkTag, props, context) {
   const { style: customStyle = {}, attrs, zIndex } = props;
 
   if (tagType === Shape) {
@@ -444,6 +445,7 @@ export {
   render,
   renderChildren,
   updateComponents,
+  computeComponentBBox,
   computeLayout,
   destroyElement,
   getUpdateAnimation,

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

@@ -1,5 +1,4 @@
-import { computeLayout } from './canvas/render';
-import { computeComponent } from './canvas/render/computeComponent';
+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';
@@ -15,7 +14,7 @@ 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, computeComponent, Smooth, parseColor };
+export { CanvasRenderer, computeLayout, computeComponentBBox, Smooth, parseColor };
 export { default as isEqual } from './canvas/equal';
 
 export { default as Player, PlayerProps } from './player';

packages/f-engine/src/index.ts

@@ -1,5 +1,5 @@
 import { jsx, Canvas, Component } from '../../../src';
-import { computeComponent } from '../../../src/canvas/render/computeComponent';
+import { computeComponentBBox } from '../../../src/canvas/render';
 import { createContext, delay } from '@antv/f-test-utils';
 
 class View extends Component {
@@ -62,7 +62,6 @@ class ViewText extends Component {
           x: position[0],
           y: position[1],
           text: 'hello',
-          // textBaseline: 'middle',
         }}
       />
     );
@@ -80,7 +79,7 @@ class GuideGroup extends Component {
       const component = new child.type(child.props, context, updater);
       component.context = context;
 
-      const bbox = computeComponent(this, component.render());
+      const bbox = computeComponentBBox(this, component.render());
       this.bbox.push(bbox);
     });
   }

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

@@ -102,6 +102,6 @@ describe('G 的测试使用', () => {
 
     expect(textBBox).toBeDefined();
     expect(textBBox.x).toBeCloseTo(50, 1);
-    expect(textBBox.y).toBeCloseTo(35, 1);
+    expect(textBBox.y).toBeCloseTo(34, 1);
   });
 });