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

View File

@ -223,64 +223,86 @@ const FlowDesigner: React.FC<FlowDesignerProps> = ({
if (value) { if (value) {
try { try {
const graphData = JSON.parse(value); const graphData = JSON.parse(value);
console.log('原始数据:', graphData);
const cells: Cell[] = []; const cells: Cell[] = [];
// 添加节点 // 添加节点
const nodesMap = new Map<string, Cell>(); const nodesMap = new Map<string, Cell>();
if (graphData.nodes) { if (graphData.nodes) {
console.log('处理节点数据:', graphData.nodes);
graphData.nodes.forEach((node: any) => { graphData.nodes.forEach((node: any) => {
// 将 TASK 类型映射到 SHELL // 将 TASK 类型映射到 SHELL
const nodeShape = NODE_TYPE_MAP[node.type] || node.type; const nodeShape = NODE_TYPE_MAP[node.type] || node.type;
const cell = graph.createNode({ const cell = graph.createNode({
id: node.nodeId, id: node.id, // 使用 id 而不是 nodeId
shape: nodeShape, shape: nodeShape,
x: node.x || 100, x: node.x || 100,
y: node.y || 100, y: node.y || 100,
label: node.name || '未命名节点', label: node.name || node.type,
data: { data: node,
...node,
config: node.config ? JSON.parse(node.config) : {},
},
}); });
cells.push(cell); cells.push(cell);
nodesMap.set(node.nodeId, cell); nodesMap.set(node.id, cell); // 使用 id 作为 key
}); });
} }
// 从 transitionConfig 中获取边的信息 // 添加边
if (graphData.transitionConfig) { if (graphData.edges) {
try { console.log('处理边数据:', graphData.edges);
const transitionConfig = JSON.parse(graphData.transitionConfig); graphData.edges.forEach((edge: any) => {
if (transitionConfig.transitions) { const sourceNode = nodesMap.get(edge.source);
transitionConfig.transitions.forEach((transition: any) => { const targetNode = nodesMap.get(edge.target);
const sourceNode = nodesMap.get(transition.from); console.log('连线:', edge.source, '->', edge.target, '节点:', sourceNode?.id, targetNode?.id);
const targetNode = nodesMap.get(transition.to);
if (sourceNode && targetNode) { if (sourceNode && targetNode) {
cells.push(graph.createEdge({ const edgeCell = graph.createEdge({
source: { cell: sourceNode.id, port: 'out' }, source: { cell: sourceNode.id, port: 'out' },
target: { cell: targetNode.id, port: 'in' }, target: { cell: targetNode.id, port: 'in' },
attrs: { router: {
line: { name: 'manhattan',
stroke: '#1890ff', args: {
strokeWidth: 2, padding: 20,
targetMarker: { startDirections: ['right'],
name: 'block', endDirections: ['left'],
width: 12, },
height: 8, },
}, connector: {
}, name: 'rounded',
args: { radius: 8 },
},
attrs: {
line: {
stroke: '#1890ff',
strokeWidth: 2,
targetMarker: {
name: 'block',
width: 12,
height: 8,
}, },
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); 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(); graph.centerContent();
} catch (error) { } catch (error) {
console.error('加载流程数据失败:', error); console.error('加载流程数据失败:', error);