fix: 修复多层嵌套flex布局判断 (#345)

* fix: 修复flex布局计算

* chore: 导出computeComponentBBox方法

* fix: 修复多层嵌套flex布局判断

Author: tangying1027

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

@@ -253,6 +253,22 @@ function createNodeTree(vNode: VNode) {
   };
 }
 
+function hasFlexDisplay(node) {
+  if (!node) return false;
+
+  const { style, children, vNode } = node;
+
+  if (vNode?.tag === Shape && style?.display === 'flex') {
+    return true;
+  }
+
+  if (children && children.length) {
+    return children.some(hasFlexDisplay);
+  }
+
+  return false;
+}
+
 function fillElementLayout(node) {
   const { type, style, vNode, children, layout } = node;
   const attrs = getShapeAttrs(type, layout);
@@ -300,7 +316,7 @@ function computeComponentBBox(component: Component | VNode, newChildren?: JSX.El
   const { canvas } = context;
   const nodeTree = renderJSXElement(newChildren, context, updater);
 
-  if (nodeTree.style?.display === 'flex') {
+  if (hasFlexDisplay(nodeTree)) {
     computeCSSLayout(nodeTree);
     fillElementLayout(nodeTree);
   }

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

@@ -1,7 +1,11 @@
 import { jsx, Canvas, Component } from '../../../src';
+import { getWorkTag } from '../../../src/canvas/workTags';
 import { computeComponentBBox } from '../../../src/canvas/render';
 import { createContext, delay } from '@antv/f-test-utils';
 
+const FunctionComponent = 0;
+const ClassComponent = 1;
+
 class View extends Component {
   willMount(): void {}
   render() {
@@ -68,6 +72,9 @@ class ViewText extends Component {
   }
 }
 
+const ViewWithDisplay = (props) => {
+  return <ViewWithDisplayGroup {...props} />;
+};
 class GuideGroup extends Component {
   bbox = [];
 
@@ -76,10 +83,16 @@ class GuideGroup extends Component {
     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 tag = getWorkTag(child.type);
+      let element = child;
 
-      const bbox = computeComponentBBox(this, component.render());
+      if (tag === FunctionComponent) {
+        element = child.type(child.props, context, updater);
+      }
+      const component = new element.type({ ...element.props }, context, updater);
+      component.context = context;
+      const newElement = component.render();
+      const bbox = computeComponentBBox(this, newElement);
       this.bbox.push(bbox);
     });
   }
@@ -127,6 +140,7 @@ describe('computeComponent', () => {
       <Canvas context={context}>
         <GuideGroup ref={guideGroupRef}>
           <ViewWithDisplayGroup />
+          <ViewWithDisplay position={[20, 20]} />
         </GuideGroup>
       </Canvas>
     );
@@ -141,6 +155,9 @@ describe('computeComponent', () => {
     expect(bbox[0].y).toEqual(0);
     expect(bbox[0].width).toBeGreaterThan(20);
     expect(bbox[0].height).toBeGreaterThan(10);
+
+    expect(bbox[1].x).toEqual(20);
+    expect(bbox[1].y).toEqual(20);
   });
 
   it('View内的group带padding样式', async () => {