1

frontend/src/pages/Workflow/Definition/Edit/components/FlowDesigner/index.tsx

@@ -13,9 +13,6 @@ const NODE_TYPE_MAP: Record<string, string> = {
     'END': 'END'
 };
 
-// 记录已注册的节点类型
-const registeredNodes = new Set<string>();
-
 interface FlowDesignerProps {
     value?: string;
     onChange?: (value: string) => void;
@@ -32,17 +29,20 @@ const FlowDesigner: React.FC<FlowDesignerProps> = ({
     const containerRef = useRef<HTMLDivElement>(null);
     const graphRef = useRef<Graph>();
     const [nodeTypes, setNodeTypes] = useState<NodeTypeDTO[]>([]);
+    const registeredNodesRef = useRef(new Set<string>());
 
     // 注册节点类型
     const registerNodeTypes = (types: NodeTypeDTO[]) => {
         types.forEach(nodeType => {
+            const nodeTypeCode = nodeType.code;
             // 如果节点类型已经注册，则跳过
-            if (registeredNodes.has(nodeType.code)) {
+            if (registeredNodesRef.current.has(nodeTypeCode)) {
                 return;
             }
 
+            try {
                 // 根据节点类型注册不同的节点
-            Graph.registerNode(nodeType.code, {
+                Graph.registerNode(nodeTypeCode, {
                     inherit: nodeType.category === 'GATEWAY' ? 'polygon' : 
                              nodeType.category === 'BASIC' ? 'circle' : 'rect',
                     width: nodeType.category === 'BASIC' ? 60 : 120,
@@ -93,9 +93,9 @@ const FlowDesigner: React.FC<FlowDesignerProps> = ({
                                 },
                             },
                         },
-                    items: nodeType.code === 'START' ? [
+                        items: nodeTypeCode === 'START' ? [
                             { id: 'out', group: 'out' }
-                    ] : nodeType.code === 'END' ? [
+                        ] : nodeTypeCode === 'END' ? [
                             { id: 'in', group: 'in' }
                         ] : [
                             { id: 'in', group: 'in' },
@@ -104,7 +104,11 @@ const FlowDesigner: React.FC<FlowDesignerProps> = ({
                     },
                 });
 
-            registeredNodes.add(nodeType.code);
+                registeredNodesRef.current.add(nodeTypeCode);
+                console.log(`Node type ${nodeTypeCode} registered successfully`);
+            } catch (error) {
+                console.warn(`Node type ${nodeTypeCode} registration failed:`, error);
+            }
         });
     };
 
@@ -120,9 +124,12 @@ const FlowDesigner: React.FC<FlowDesignerProps> = ({
         };
         loadNodeTypes();
 
-        // 清理注册的节点类型
+        // 清理函数
         return () => {
-            registeredNodes.clear();
+            registeredNodesRef.current.clear();
+            if (graphRef.current) {
+                graphRef.current.dispose();
+            }
         };
     }, []);