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

1111

Browse Source
This commit is contained in:
戚辰先生 2024-12-05 14:09:27 +08:00
parent 94fbce0154
commit 9a96075c30
1 changed files with 76 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -219,6 +219,50 @@ const FlowDesigner: React.FC<FlowDesignerProps> = ({
},
});
// 监听事件
if (!readOnly) {
let updateTimer: number | null = null;
const updateGraph = () => {
if (updateTimer) {
window.clearTimeout(updateTimer);
}
updateTimer = window.setTimeout(() => {
const nodes = graph.getNodes().map(node => ({
id: node.id,
type: node.data?.type || node.shape,
x: node.position().x,
y: node.position().y,
name: node.attr('label/text'),
}));
const edges = graph.getEdges().map(edge => ({
source: edge.getSourceCellId(),
target: edge.getTargetCellId(),
}));
const data = {
nodes,
edges,
transitionConfig: JSON.stringify({
transitions: edges.map(edge => ({
from: edge.source,
to: edge.target
}))
})
};
onChange?.(JSON.stringify(data));
}, 300);
};
// 监听节点变化
graph.on('node:moved', updateGraph);
graph.on('edge:connected', updateGraph);
graph.on('cell:removed', updateGraph);
}
// 加载流程数据
if (value) {
try {
@ -234,22 +278,43 @@ const FlowDesigner: React.FC<FlowDesignerProps> = ({
// 将 TASK 类型映射到 SHELL
const nodeShape = NODE_TYPE_MAP[node.type] || node.type;
const cell = graph.createNode({
id: node.id, // 使用 id 而不是 nodeId
id: node.id, // 保持原始 ID
shape: nodeShape,
x: node.x || 100,
y: node.y || 100,
label: node.name || node.type,
data: node,
data: {
...node,
type: node.type // 保存原始类型
},
});
cells.push(cell);
nodesMap.set(node.id, cell); // 使用 id 作为 key
nodesMap.set(node.id, cell);
});
}
// 添加边
// 处理边数据
let edges: any[] = [];
if (graphData.edges) {
console.log('处理边数据:', graphData.edges);
graphData.edges.forEach((edge: any) => {
edges = graphData.edges;
} else if (graphData.transitionConfig) {
try {
const transitionConfig = typeof graphData.transitionConfig === 'string'
? JSON.parse(graphData.transitionConfig)
: graphData.transitionConfig;
edges = transitionConfig.transitions.map((t: any) => ({
source: t.from,
target: t.to
}));
} catch (error) {
console.error('解析 transitionConfig 失败:', error);
}
}
// 添加边
if (edges.length > 0) {
console.log('处理边数据:', edges);
edges.forEach((edge: any) => {
const sourceNode = nodesMap.get(edge.source);
const targetNode = nodesMap.get(edge.target);
console.log('连线:', edge.source, '->', edge.target, '节点:', sourceNode?.id, targetNode?.id);
@ -298,7 +363,11 @@ const FlowDesigner: React.FC<FlowDesignerProps> = ({
})));
graph.resetCells(cells);
console.log('重置后的节点:', graph.getNodes().map(node => node.id));
console.log('重置后的节点:', graph.getNodes().map(node => ({
id: node.id,
type: node.data?.type,
shape: node.shape
})));
console.log('重置后的边:', graph.getEdges().map(edge => ({
source: edge.getSourceCellId(),
target: edge.getTargetCellId()
@ -309,46 +378,6 @@ const FlowDesigner: React.FC<FlowDesignerProps> = ({
}
}
// 监听事件
if (!readOnly) {
let updateTimer: number | null = null;
const updateGraph = () => {
if (updateTimer) {
window.clearTimeout(updateTimer);
}
updateTimer = window.setTimeout(() => {
const nodes = graph.getNodes().map(node => ({
nodeId: node.id,
name: node.attr('label/text'),
type: node.data?.type || node.shape,
x: node.position().x,
y: node.position().y,
config: JSON.stringify(node.data?.config || {}),
}));
const edges = graph.getEdges().map(edge => ({
from: edge.getSourceCellId(),
to: edge.getTargetCellId(),
}));
const data = {
nodes,
transitionConfig: JSON.stringify({
transitions: edges
})
};
onChange?.(JSON.stringify(data));
}, 300);
};
graph.on('node:moved', updateGraph);
graph.on('edge:connected', updateGraph);
graph.on('cell:removed', updateGraph);
}
graphRef.current = graph;
return () => {