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