feat: fix CustomOperator error

packages/flow/src/Diagrams/Nodes/Node/index.tsx

@@ -46,21 +46,12 @@ export function Node(props: NodeProps<IMetaOperatorData>) {
   }
 
   const valueSection = renderValueSection();
-
-  const headerInfo = [
-    operator?.description && (
-      <div className={css['node__operator-description']}>
-        {operator?.description}
-      </div>
-    ),
-    valueSection && <div>{valueSection}</div>,
-  ].filter(Boolean);
-
   return (
     <div
       className={classnames(css.container, {
         [css.selected]: selected,
       })}
+      key={props.id}
       style={
         {
           '--color-node-theme': operator?.nodeColor || undefined,
@@ -86,7 +77,12 @@ export function Node(props: NodeProps<IMetaOperatorData>) {
         }}
       >
         <div className={css.node__title}>
-          {headerInfo}
+          {operator?.description && (
+            <div className={css['node__operator-description']}>
+              {operator?.description}
+            </div>
+          )}
+          {valueSection && <div>{valueSection}</div>}
           {/* <div>{data.label}</div> */}
         </div>
         <NodePorts node={props} />

packages/flow/src/Diagrams/Operators/CustomOperator/AttributeControl/index.tsx

@@ -1,5 +1,8 @@
 import { type Node } from 'reactflow';
-import { useDiagramsContext } from '../../../State/DiagramsProvider';
+import {
+  useDiagramsContext,
+  useDiagramsHookOption,
+} from '../../../State/DiagramsProvider';
 import { Button, Form, Input } from 'antd';
 import { findLayer } from '../../../State/Layer';
 import { type CustomOperator } from '..';
@@ -8,7 +11,8 @@ import { getOperatorFromNode } from '../../OperatorMap';
 
 export function AttributeControl(props: { node: Node<ICustomOperatorData> }) {
   const { node } = props;
-  const { updateNode, layer, setLayer } = useDiagramsContext();
+  const { updateNode, setLayer } = useDiagramsContext();
+  const { currentStateRef, actionsRef } = useDiagramsHookOption();
 
   const operator = getOperatorFromNode<CustomOperator>(node);
 
@@ -46,9 +50,10 @@ export function AttributeControl(props: { node: Node<ICustomOperatorData> }) {
         <Button
           size="small"
           onClick={() => {
-            operator?.refreshNode(node, {
-              layer,
-              updateNode,
+            operator?.refreshNode({
+              currentState: currentStateRef.current,
+              actions: actionsRef.current,
+              node,
             });
           }}
         >

packages/flow/src/Diagrams/Operators/CustomOperator/index.tsx

@@ -13,7 +13,6 @@ import {
 import { type IGenerationOption } from '../../Compiler/graph';
 import { Layer, findLayer } from '../../State/Layer';
 import { AttributeControl } from './AttributeControl';
-import { type DiagramsContextType } from '../../State/DiagramsProvider';
 import { type InputOperator } from '../InputOperator';
 import { type OutputOperator } from '../OutputOperator';
 
@@ -190,14 +189,9 @@ export class CustomOperator
     return [];
   }
 
-  refreshNode(
-    node: Node<ICustomOperatorData>,
-    options: Pick<
-      DiagramsContextType<ICustomOperatorData>,
-      'layer' | 'updateNode'
-    >,
-  ) {
-    const { layer, updateNode } = options;
+  getFreshNodeData(options: IHookOption<Node<ICustomOperatorData>>) {
+    const { node, currentState } = options;
+    const { layer } = currentState;
 
     const targetLayer = findLayer(layer, node.data.layerId);
 
@@ -214,14 +208,17 @@ export class CustomOperator
       const inputOperator = getOperatorFromNode<InputOperator>(inputNode);
       const outputOperator = getOperatorFromNode<OutputOperator>(outputNode);
 
-      // TODO: fix
+      function getNewEndPortId(id: string) {
+        return `${id}__${node.id.slice(-5)}`;
+      }
+
       const inputStatePorts = !inputNode
         ? []
         : inputOperator?.getStatePort(inputNode)?.map(
             (item) =>
               new EndPoint({
                 ...item,
-                id: '',
+                id: getNewEndPortId(item.id),
                 type: 'target',
               }),
           );
@@ -231,7 +228,7 @@ export class CustomOperator
             (item) =>
               new EndPoint({
                 ...item,
-                id: '',
+                id: getNewEndPortId(item.id),
                 type: 'target',
               }),
           );
@@ -242,7 +239,7 @@ export class CustomOperator
             (item) =>
               new EndPoint({
                 ...item,
-                id: '',
+                id: getNewEndPortId(item.id),
                 type: 'source',
               }),
           );
@@ -253,25 +250,35 @@ export class CustomOperator
             (item) =>
               new EndPoint({
                 ...item,
-                id: '',
+                id: getNewEndPortId(item.id),
                 type: 'source',
               }),
           );
 
-      // TODO: FIX TYPE ERROR
-      updateNode(
+      return {
+        targetLayer,
+        updatedNodeData: {
+          endPointOptions: {
+            endPointList: generateEndPointList({
+              inputEventList: inputEventPorts || [],
+              inputStateList: inputStatePorts || [],
+              outputEventList: outputEventPort || [],
+              outputStateList: outputStatePort || [],
+            }),
+          },
+        },
+      };
+    }
+  }
+
+  refreshNode(options: IHookOption<Node<ICustomOperatorData>>) {
+    const { node } = options;
+    const data = this.getFreshNodeData(options);
+    if (data?.updatedNodeData) {
+      options.actions.updateNode(
         node.id,
-        (v: any) =>
-          this.updateData(v, {
-            endPointOptions: {
-              endPointList: generateEndPointList({
-                inputEventList: inputEventPorts || [],
-                inputStateList: inputStatePorts || [],
-                outputEventList: outputEventPort || [],
-                outputStateList: outputStatePort || [],
-              }),
-            },
-          }) as any,
+        (v) => this.updateData(v, data.updatedNodeData),
+        { updateInternal: true, layerId: data.targetLayer?.parentLayerId },
       );
     }
   }
@@ -282,10 +289,6 @@ export class CustomOperator
   }
 
   onNodeFocus(options: IHookOption<Node<ICustomOperatorData>>): void {
-    const { node, currentState, actions } = options;
-    this?.refreshNode(node, {
-      layer: currentState.layer,
-      updateNode: actions.updateNode as any,
-    });
+    this?.refreshNode(options);
   }
 }

packages/flow/src/Diagrams/Operators/types/index.ts

@@ -21,7 +21,7 @@ export interface IHookOption<OpNode extends Node<any>> {
   >;
   actions: Pick<
     DiagramsContextType<GetOperatorStateType<OpNode>>,
-    'updateEdge' | 'updateNode' | 'setLayer' | 'setActiveLayerId'
+    'updateEdge' | 'updateNode' | 'setLayer' | 'setActiveLayerId' | 'setEdges'
   >;
 }
 

packages/flow/src/Diagrams/Panels/CommandPanel/index.tsx

@@ -1,24 +1,52 @@
 import { Button, message } from 'antd';
-import { useDiagramsContext } from '../../State/DiagramsProvider';
-import { Layer } from '../../State/Layer';
+import {
+  useDiagramsContext,
+  useDiagramsHookOption,
+} from '../../State/DiagramsProvider';
+import { Layer, findLayer } from '../../State/Layer';
+import { getOperatorFromNode } from '../../Operators';
+import { type CustomOperator } from '../../Operators/CustomOperator';
+import { sleepMs } from '../../utils';
 
 const STORAGE_KEY = 'layer_storage';
 
 export function CommandPanel() {
   const { layer, setLayer, setActiveLayerId } = useDiagramsContext();
+  const { actionsRef, currentStateRef } = useDiagramsHookOption();
+
+  async function handleSave() {
+    try {
+      if (layer.parentLayerId) {
+        const parentLayer = findLayer(layer, layer.parentLayerId);
+        const targetNode = parentLayer?.nodes.find(
+          (item) => item.id === layer.relativeNodeId,
+        );
+
+        if (targetNode) {
+          const operator = getOperatorFromNode<CustomOperator>(targetNode);
+
+          operator?.refreshNode({
+            node: targetNode,
+            actions: actionsRef.current,
+            currentState: currentStateRef.current,
+          });
+        }
+      }
+      await sleepMs(200);
+      const layerDataJson = JSON.stringify(currentStateRef.current.layer);
+      localStorage.setItem(STORAGE_KEY, layerDataJson);
+      message.success('success');
+    } catch (error: any) {
+      message.error(error?.message);
+    }
+  }
 
   return (
     <div style={{ display: 'grid', gridAutoFlow: 'row', gap: 4 }}>
       <Button
         type="text"
         onClick={() => {
-          try {
-            const layerDataJson = JSON.stringify(layer);
-            localStorage.setItem(STORAGE_KEY, layerDataJson);
-            message.success('success');
-          } catch (error: any) {
-            message.error(error?.message);
-          }
+          handleSave();
         }}
       >
         Save
@@ -56,6 +84,15 @@ export function CommandPanel() {
       >
         Reset
       </Button>
+
+      <Button
+        type="text"
+        onClick={() => {
+          console.log(layer);
+        }}
+      >
+        Log
+      </Button>
     </div>
   );
 }