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'
};
// 记录已注册的节点类型
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();
}
};
}, []);