feat(container): accessing form render

packages/plugins/free-container-plugin/src/container-node-render/components/border/index.tsx

@@ -1,7 +1,21 @@
 import React, { type FC } from 'react';
 
+import { useNodeRender } from '@flowgram.ai/free-layout-core';
+import { FlowNodeTransformData } from '@flowgram.ai/document';
+
 import { ContainerNodeBorderStyle } from './style';
 
-export const ContainerNodeBorder: FC = () => (
-  <ContainerNodeBorderStyle className="container-node-border" />
-);
+export const ContainerNodeBorder: FC = () => {
+  const { node } = useNodeRender();
+  const transformData = node.getData(FlowNodeTransformData);
+  const topWidth = Math.max(transformData.padding.top - 50, 50);
+
+  return (
+    <ContainerNodeBorderStyle
+      className="container-node-border"
+      style={{
+        borderTopWidth: topWidth,
+      }}
+    />
+  );
+};

packages/plugins/free-container-plugin/src/container-node-render/components/border/style.ts

@@ -15,7 +15,7 @@ export const ContainerNodeBorderStyle = styled.div`
   border: 1px solid var(--coz-stroke-plus, rgba(6, 7, 9, 15%));
   border-color: var(--coz-bg-plus, rgb(249, 249, 249));
   border-style: solid;
-  border-width: 48px 8px 8px;
+  border-width: 8px;
   border-radius: 8px;
   box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 4%), 0 4px 12px 0 rgba(0, 0, 0, 2%);
 

packages/plugins/free-container-plugin/src/container-node-render/components/container/index.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useState, type FC, type ReactNode } from 'react';
 
-import { useNodeRender } from '@flowgram.ai/free-layout-core';
+import { useNodeRender, WorkflowNodePortsData } from '@flowgram.ai/free-layout-core';
 import { FlowNodeTransformData } from '@flowgram.ai/document';
 
 import { useContainerNodeRenderProps } from '../../hooks';
 import { ContainerNodeContainerStyle } from './style';
 
 interface IContainerNodeContainer {
-  children: ReactNode[];
+  children: ReactNode | ReactNode[];
 }
 
 export const ContainerNodeContainer: FC<IContainerNodeContainer> = ({ children }) => {
@@ -20,6 +20,13 @@ export const ContainerNodeContainer: FC<IContainerNodeContainer> = ({ children }
   const [width, setWidth] = useState(size.width);
   const [height, setHeight] = useState(size.height);
 
+  const updatePorts = () => {
+    requestAnimationFrame(() => {
+      const portsData = node.getData<WorkflowNodePortsData>(WorkflowNodePortsData);
+      portsData.updateDynamicPorts();
+    });
+  };
+
   useEffect(() => {
     const updateSize = () => {
       // 无子节点时
@@ -39,6 +46,7 @@ export const ContainerNodeContainer: FC<IContainerNodeContainer> = ({ children }
     updateSize();
     const dispose = transform.onDataChange(() => {
       updateSize();
+      updatePorts();
     });
     return () => dispose.dispose();
   }, [transform]);

packages/plugins/free-container-plugin/src/container-node-render/components/form/index.tsx

@@ -0,0 +1,13 @@
+import React, { type FC } from 'react';
+
+import { useNodeRender } from '@flowgram.ai/free-layout-core';
+
+import { ContainerNodeFormStyle } from './style';
+
+export const ContainerNodeForm: FC = () => {
+  const { form } = useNodeRender();
+  if (!form) {
+    return null;
+  }
+  return <ContainerNodeFormStyle>{form.render()}</ContainerNodeFormStyle>;
+};

packages/plugins/free-container-plugin/src/container-node-render/components/form/style.ts

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export const ContainerNodeFormStyle = styled.div`
+  background-color: #fff;
+  border-radius: 8px 8px 0 0;
+`;

packages/plugins/free-container-plugin/src/container-node-render/components/header/index.tsx

@@ -1,14 +1,15 @@
-import React, { type FC } from 'react';
+import React, { ReactNode, type FC } from 'react';
 
 import { useNodeRender } from '@flowgram.ai/free-layout-core';
 
-import { useContainerNodeRenderProps } from '../../hooks';
 import { ContainerNodeHeaderStyle } from './style';
 
-export const ContainerNodeHeader: FC = () => {
-  const { startDrag, onFocus, onBlur } = useNodeRender();
+interface IContainerNodeHeader {
+  children?: ReactNode | ReactNode[];
+}
 
-  const { title } = useContainerNodeRenderProps();
+export const ContainerNodeHeader: FC<IContainerNodeHeader> = ({ children }) => {
+  const { startDrag, onFocus, onBlur } = useNodeRender();
 
   return (
     <ContainerNodeHeaderStyle
@@ -20,7 +21,7 @@ export const ContainerNodeHeader: FC = () => {
       onFocus={onFocus}
       onBlur={onBlur}
     >
-      <p className="container-node-title">{title}</p>
+      {children}
     </ContainerNodeHeaderStyle>
   );
 };

packages/plugins/free-container-plugin/src/container-node-render/components/header/style.ts

@@ -1,8 +1,6 @@
 import styled from 'styled-components';
 
 export const ContainerNodeHeaderStyle = styled.div`
-  cursor: move;
-
   z-index: 0;
 
   display: flex;
@@ -11,8 +9,7 @@ export const ContainerNodeHeaderStyle = styled.div`
   justify-content: flex-start;
 
   width: 100%;
-  height: 48px;
-  padding: 16px;
+  height: auto;
 
   border-radius: 8px 8px 0 0;
 

packages/plugins/free-container-plugin/src/container-node-render/components/index.ts

@@ -3,3 +3,4 @@ export { ContainerNodeBackground } from './background';
 export { ContainerNodeContainer } from './container';
 export { ContainerNodeBorder } from './border';
 export { ContainerNodePorts } from './ports';
+export { ContainerNodeForm } from './form';

packages/plugins/free-container-plugin/src/container-node-render/render.tsx

@@ -7,13 +7,16 @@ import {
   ContainerNodePorts,
   ContainerNodeBorder,
   ContainerNodeContainer,
+  ContainerNodeForm,
 } from './components';
 
-export const ContainerNodeRender: FC<ContainerNodeRenderProps> = (props) => (
+export const ContainerNodeRender: FC<ContainerNodeRenderProps> = () => (
   <ContainerNodeContainer>
-    <ContainerNodeBorder />
     <ContainerNodeBackground />
-    <ContainerNodeHeader />
+    <ContainerNodeBorder />
+    <ContainerNodeHeader>
+      <ContainerNodeForm />
+    </ContainerNodeHeader>
     <ContainerNodePorts />
   </ContainerNodeContainer>
 );