This commit is contained in:
戚辰先生 2024-12-05 14:05:37 +08:00
parent e8c9a4c539
commit 65c659c809

View File

@ -223,42 +223,53 @@ const FlowDesigner: React.FC<FlowDesignerProps> = ({
if (value) {
try {
const graphData = JSON.parse(value);
console.log('原始数据:', graphData);
const cells: Cell[] = [];
// 添加节点
const nodesMap = new Map<string, Cell>();
if (graphData.nodes) {
console.log('处理节点数据:', graphData.nodes);
graphData.nodes.forEach((node: any) => {
// 将 TASK 类型映射到 SHELL
const nodeShape = NODE_TYPE_MAP[node.type] || node.type;
const cell = graph.createNode({
id: node.nodeId,
id: node.id, // 使用 id 而不是 nodeId
shape: nodeShape,
x: node.x || 100,
y: node.y || 100,
label: node.name || '未命名节点',
data: {
...node,
config: node.config ? JSON.parse(node.config) : {},
},
label: node.name || node.type,
data: node,
});
cells.push(cell);
nodesMap.set(node.nodeId, cell);
nodesMap.set(node.id, cell); // 使用 id 作为 key
});
}
// 从 transitionConfig 中获取边的信息
if (graphData.transitionConfig) {
try {
const transitionConfig = JSON.parse(graphData.transitionConfig);
if (transitionConfig.transitions) {
transitionConfig.transitions.forEach((transition: any) => {
const sourceNode = nodesMap.get(transition.from);
const targetNode = nodesMap.get(transition.to);
// 添加边
if (graphData.edges) {
console.log('处理边数据:', graphData.edges);
graphData.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);
if (sourceNode && targetNode) {
cells.push(graph.createEdge({
const edgeCell = graph.createEdge({
source: { cell: sourceNode.id, port: 'out' },
target: { cell: targetNode.id, port: 'in' },
router: {
name: 'manhattan',
args: {
padding: 20,
startDirections: ['right'],
endDirections: ['left'],
},
},
connector: {
name: 'rounded',
args: { radius: 8 },
},
attrs: {
line: {
stroke: '#1890ff',
@ -270,17 +281,28 @@ const FlowDesigner: React.FC<FlowDesignerProps> = ({
},
},
},
data: transition,
}));
});
cells.push(edgeCell);
}
});
}
} catch (error) {
console.error('解析 transitionConfig 失败:', error);
}
}
// 重置画布并应用布局
console.log('重置前的 cells:', cells);
console.log('重置前的 cells 内容:', cells.map(cell => ({
id: cell.id,
isNode: cell.isNode(),
isEdge: cell.isEdge(),
source: cell.isEdge() ? cell.getSourceCellId() : undefined,
target: cell.isEdge() ? cell.getTargetCellId() : undefined
})));
graph.resetCells(cells);
console.log('重置后的节点:', graph.getNodes().map(node => node.id));
console.log('重置后的边:', graph.getEdges().map(edge => ({
source: edge.getSourceCellId(),
target: edge.getTargetCellId()
})));
graph.centerContent();
} catch (error) {
console.error('加载流程数据失败:', error);