From 273cc317a12e623de058782ca0d119a4e7d131bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=88=9A=E8=BE=B0=E5=85=88=E7=94=9F?= <qichen111@126.com>
Date: Thu, 5 Dec 2024 14:37:40 +0800
Subject: [PATCH] 1

---
 .../Edit/components/FlowDesigner/index.tsx    | 135 +++++++++---------
 1 file changed, 71 insertions(+), 64 deletions(-)

diff --git a/frontend/src/pages/Workflow/Definition/Edit/components/FlowDesigner/index.tsx b/frontend/src/pages/Workflow/Definition/Edit/components/FlowDesigner/index.tsx
index 5dcd82a2..f2eb5b08 100644
--- a/frontend/src/pages/Workflow/Definition/Edit/components/FlowDesigner/index.tsx
+++ b/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,79 +29,86 @@ 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;
             }
 
-            // 根据节点类型注册不同的节点
-            Graph.registerNode(nodeType.code, {
-                inherit: nodeType.category === 'GATEWAY' ? 'polygon' : 
-                         nodeType.category === 'BASIC' ? 'circle' : 'rect',
-                width: nodeType.category === 'BASIC' ? 60 : 120,
-                height: nodeType.category === 'BASIC' ? 60 : 60,
-                attrs: {
-                    body: {
-                        fill: nodeType.color || '#fff',
-                        stroke: nodeType.color || '#1890ff',
-                        strokeWidth: 2,
-                        ...(nodeType.category === 'GATEWAY' ? {
-                            refPoints: '0,10 10,0 20,10 10,20',
-                        } : nodeType.category === 'TASK' ? {
-                            rx: 4,
-                            ry: 4,
-                        } : {}),
+            try {
+                // 根据节点类型注册不同的节点
+                Graph.registerNode(nodeTypeCode, {
+                    inherit: nodeType.category === 'GATEWAY' ? 'polygon' : 
+                             nodeType.category === 'BASIC' ? 'circle' : 'rect',
+                    width: nodeType.category === 'BASIC' ? 60 : 120,
+                    height: nodeType.category === 'BASIC' ? 60 : 60,
+                    attrs: {
+                        body: {
+                            fill: nodeType.color || '#fff',
+                            stroke: nodeType.color || '#1890ff',
+                            strokeWidth: 2,
+                            ...(nodeType.category === 'GATEWAY' ? {
+                                refPoints: '0,10 10,0 20,10 10,20',
+                            } : nodeType.category === 'TASK' ? {
+                                rx: 4,
+                                ry: 4,
+                            } : {}),
+                        },
+                        label: {
+                            text: nodeType.name,
+                            fill: nodeType.category === 'BASIC' ? '#fff' : '#000',
+                            fontSize: 12,
+                            fontWeight: nodeType.category === 'BASIC' ? 'bold' : 'normal',
+                        },
                     },
-                    label: {
-                        text: nodeType.name,
-                        fill: nodeType.category === 'BASIC' ? '#fff' : '#000',
-                        fontSize: 12,
-                        fontWeight: nodeType.category === 'BASIC' ? 'bold' : 'normal',
-                    },
-                },
-                ports: {
-                    groups: {
-                        in: {
-                            position: 'left',
-                            attrs: {
-                                circle: {
-                                    r: 4,
-                                    magnet: true,
-                                    stroke: nodeType.color || '#1890ff',
-                                    strokeWidth: 2,
-                                    fill: '#fff',
-                                },
-                            },
-                        },
-                        out: {
-                            position: 'right',
-                            attrs: {
-                                circle: {
-                                    r: 4,
-                                    magnet: true,
-                                    stroke: nodeType.color || '#1890ff',
-                                    strokeWidth: 2,
-                                    fill: '#fff',
+                    ports: {
+                        groups: {
+                            in: {
+                                position: 'left',
+                                attrs: {
+                                    circle: {
+                                        r: 4,
+                                        magnet: true,
+                                        stroke: nodeType.color || '#1890ff',
+                                        strokeWidth: 2,
+                                        fill: '#fff',
+                                    },
+                                },
+                            },
+                            out: {
+                                position: 'right',
+                                attrs: {
+                                    circle: {
+                                        r: 4,
+                                        magnet: true,
+                                        stroke: nodeType.color || '#1890ff',
+                                        strokeWidth: 2,
+                                        fill: '#fff',
+                                    },
                                 },
                             },
                         },
+                        items: nodeTypeCode === 'START' ? [
+                            { id: 'out', group: 'out' }
+                        ] : nodeTypeCode === 'END' ? [
+                            { id: 'in', group: 'in' }
+                        ] : [
+                            { id: 'in', group: 'in' },
+                            { id: 'out', group: 'out' }
+                        ],
                     },
-                    items: nodeType.code === 'START' ? [
-                        { id: 'out', group: 'out' }
-                    ] : nodeType.code === 'END' ? [
-                        { id: 'in', group: 'in' }
-                    ] : [
-                        { id: 'in', group: 'in' },
-                        { id: 'out', group: 'out' }
-                    ],
-                },
-            });
+                });
 
-            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();
+            }
         };
     }, []);