提交1
This commit is contained in:
parent
e8c9a4c539
commit
94fbce0154
@ -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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user