ai-coding/deploy-ease-platform
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
戚辰先生 2024-12-05 14:37:40 +08:00
parent 0e9e3e2b32
commit 273cc317a1
1 changed files with 71 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,9 +13,6 @@ const NODE_TYPE_MAP: Record<string, string> = {
'END': 'END' 'END': 'END'
}; };
// 记录已注册的节点类型
const registeredNodes = new Set<string>();
interface FlowDesignerProps { interface FlowDesignerProps {
value?: string; value?: string;
onChange?: (value: string) => void; onChange?: (value: string) => void;
@ -32,79 +29,86 @@ const FlowDesigner: React.FC<FlowDesignerProps> = ({
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const graphRef = useRef<Graph>(); const graphRef = useRef<Graph>();
const [nodeTypes, setNodeTypes] = useState<NodeTypeDTO[]>([]); const [nodeTypes, setNodeTypes] = useState<NodeTypeDTO[]>([]);
const registeredNodesRef = useRef(new Set<string>());
// 注册节点类型 // 注册节点类型
const registerNodeTypes = (types: NodeTypeDTO[]) => { const registerNodeTypes = (types: NodeTypeDTO[]) => {
types.forEach(nodeType => { types.forEach(nodeType => {
const nodeTypeCode = nodeType.code;
// 如果节点类型已经注册，则跳过 // 如果节点类型已经注册，则跳过
if (registeredNodes.has(nodeType.code)) { if (registeredNodesRef.current.has(nodeTypeCode)) {
return; return;
} }
// 根据节点类型注册不同的节点 try {
Graph.registerNode(nodeType.code, { // 根据节点类型注册不同的节点
inherit: nodeType.category === 'GATEWAY' ? 'polygon' : Graph.registerNode(nodeTypeCode, {
nodeType.category === 'BASIC' ? 'circle' : 'rect', inherit: nodeType.category === 'GATEWAY' ? 'polygon' :
width: nodeType.category === 'BASIC' ? 60 : 120, nodeType.category === 'BASIC' ? 'circle' : 'rect',
height: nodeType.category === 'BASIC' ? 60 : 60, width: nodeType.category === 'BASIC' ? 60 : 120,
attrs: { height: nodeType.category === 'BASIC' ? 60 : 60,
body: { attrs: {
fill: nodeType.color || '#fff', body: {
stroke: nodeType.color || '#1890ff', fill: nodeType.color || '#fff',
strokeWidth: 2, stroke: nodeType.color || '#1890ff',
...(nodeType.category === 'GATEWAY' ? { strokeWidth: 2,
refPoints: '0,10 10,0 20,10 10,20', ...(nodeType.category === 'GATEWAY' ? {
} : nodeType.category === 'TASK' ? { refPoints: '0,10 10,0 20,10 10,20',
rx: 4, } : nodeType.category === 'TASK' ? {
ry: 4, rx: 4,
} : {}), ry: 4,
} : {}),
},
label: {
text: nodeType.name,
fill: nodeType.category === 'BASIC' ? '#fff' : '#000',
fontSize: 12,
fontWeight: nodeType.category === 'BASIC' ? 'bold' : 'normal',
},
}, },
label: { ports: {
text: nodeType.name, groups: {
fill: nodeType.category === 'BASIC' ? '#fff' : '#000', in: {
fontSize: 12, position: 'left',
fontWeight: nodeType.category === 'BASIC' ? 'bold' : 'normal', attrs: {
}, circle: {
}, r: 4,
ports: { magnet: true,
groups: { stroke: nodeType.color || '#1890ff',
in: { strokeWidth: 2,
position: 'left', fill: '#fff',
attrs: { },
circle: { },
r: 4, },
magnet: true, out: {
stroke: nodeType.color || '#1890ff', position: 'right',
strokeWidth: 2, attrs: {
fill: '#fff', circle: {
}, r: 4,
}, magnet: true,
}, stroke: nodeType.color || '#1890ff',
out: { strokeWidth: 2,
position: 'right', fill: '#fff',
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(); loadNodeTypes();
// 清理注册的节点类型 // 清理函数
return () => { return () => {
registeredNodes.clear(); registeredNodesRef.current.clear();
if (graphRef.current) {
graphRef.current.dispose();
}
}; };
}, []); }, []);