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

1

Browse Source
This commit is contained in:
dengqichen 2024-12-24 18:05:16 +08:00
parent 27561535e0
commit 1e9fcfb993
1 changed files with 91 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
frontend/src/pages/Workflow/Definition/Design/index.tsx
View File

@ -181,6 +181,7 @@ const WorkflowDesign: React.FC = () => {
snapline: true, snapline: true,
keyboard: { keyboard: {
enabled: true, enabled: true,
global: false,
}, },
panning: { panning: {
enabled: true, enabled: true,
@ -370,6 +371,42 @@ const WorkflowDesign: React.FC = () => {
registerEventHandlers(graph); registerEventHandlers(graph);
// 在 registerEventHandlers 中添加画布的快捷键处理
// 添加画布的快捷键处理
graphContainerRef.current?.addEventListener('keydown', (e: KeyboardEvent) => {
// 只有当画布或其子元素被聚焦时才处理快捷键
if (!graphContainerRef.current?.contains(document.activeElement)) {
return;
}
// Ctrl+A 或 Command+A (Mac)
if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
e.preventDefault(); // 阻止浏览器默认的全选行为
if (!graph) return;
const cells = graph.getCells();
if (cells.length > 0) {
graph.resetSelection();
graph.select(cells);
// 为选中的元素添加高亮样式
cells.forEach(cell => {
if (cell.isNode()) {
cell.setAttrByPath('body/stroke', '#1890ff');
cell.setAttrByPath('body/strokeWidth', 3);
cell.setAttrByPath('body/strokeDasharray', '5 5');
} else if (cell.isEdge()) {
cell.setAttrByPath('line/stroke', '#1890ff');
cell.setAttrByPath('line/strokeWidth', 3);
cell.setAttrByPath('line/strokeDasharray', '5 5');
}
});
}
}
});
// 确保画布可以接收键盘事件
graphContainerRef.current?.setAttribute('tabindex', '0');
return graph; return graph;
}; };
@ -922,6 +959,35 @@ const WorkflowDesign: React.FC = () => {
graph.on('edge:unselected', ({ edge }) => { graph.on('edge:unselected', ({ edge }) => {
edge.removeTools(); edge.removeTools();
}); });
// 在 registerEventHandlers 函数中更新选择状态的视觉反馈
graph.on('selection:changed', ({ selected, removed }) => {
// 处理新选中的元素
selected.forEach(cell => {
if (cell.isNode()) {
cell.setAttrByPath('body/stroke', '#1890ff');
cell.setAttrByPath('body/strokeWidth', 3);
cell.setAttrByPath('body/strokeDasharray', '5 5');
} else if (cell.isEdge()) {
cell.setAttrByPath('line/stroke', '#1890ff');
cell.setAttrByPath('line/strokeWidth', 3);
cell.setAttrByPath('line/strokeDasharray', '5 5');
}
});
// 处理取消选中的元素
removed.forEach(cell => {
if (cell.isNode()) {
cell.setAttrByPath('body/stroke', '#5F95FF');
cell.setAttrByPath('body/strokeWidth', 1);
cell.setAttrByPath('body/strokeDasharray', null);
} else if (cell.isEdge()) {
cell.setAttrByPath('line/stroke', '#5F95FF');
cell.setAttrByPath('line/strokeWidth', 1);
cell.setAttrByPath('line/strokeDasharray', null);
}
});
});
}; };
// 处理复制操作 // 处理复制操作
@ -1037,6 +1103,7 @@ const WorkflowDesign: React.FC = () => {
cell: targetNode.id, cell: targetNode.id,
port: targetPort, port: targetPort,
}, },
vertices: edge?.vertices || [], // 恢复顶点信息
attrs: { attrs: {
line: { line: {
stroke: '#5F95FF', stroke: '#5F95FF',
@ -1055,11 +1122,10 @@ const WorkflowDesign: React.FC = () => {
} }
}] }]
}); });
console.log(response.graph)
// 设置边的条件属性 // 设置边的条件属性
if (edge.config?.condition) { if (edge.config?.condition) {
newEdge.setProp('condition', edge.config.condition); newEdge.setProp('condition', edge.config.condition);
console.log('Setting edge condition:', edge.config.condition);
} }
} }
}); });
@ -1217,6 +1283,7 @@ const WorkflowDesign: React.FC = () => {
const edges = graph.getEdges().map(edge => { const edges = graph.getEdges().map(edge => {
const sourceNode = graph.getCellById(edge.getSourceCellId()); const sourceNode = graph.getCellById(edge.getSourceCellId());
const condition = edge.getProp('condition'); const condition = edge.getProp('condition');
const vertices = edge.getVertices(); // 获取边的顶点信息
return { return {
id: edge.id, id: edge.id,
@ -1226,7 +1293,8 @@ const WorkflowDesign: React.FC = () => {
config: { config: {
type: 'sequence', type: 'sequence',
condition: condition || undefined condition: condition || undefined
} },
vertices: vertices // 保存顶点信息
}; };
}); });
@ -1370,36 +1438,28 @@ const WorkflowDesign: React.FC = () => {
<Tooltip title="全选"> <Tooltip title="全选">
<Button <Button
icon={<SelectOutlined/>} icon={<SelectOutlined/>}
onClick={() => { onClick={(e) => {
e.stopPropagation(); // 阻止事件冒泡
if (!graph) return; if (!graph) return;
const cells = graph.getCells();
// 添加小延时确保图形已完全初始化 if (cells.length === 0) {
setTimeout(() => { message.info('当前没有可选择的元素');
const cells = graph.getCells(); return;
console.log('All cells:', cells); }
graph.resetSelection();
if (cells.length === 0) { graph.select(cells);
message.info('当前没有可选择的元素'); // 为选中的元素添加高亮样式
return; cells.forEach(cell => {
if (cell.isNode()) {
cell.setAttrByPath('body/stroke', '#1890ff');
cell.setAttrByPath('body/strokeWidth', 3);
cell.setAttrByPath('body/strokeDasharray', '5 5');
} else if (cell.isEdge()) {
cell.setAttrByPath('line/stroke', '#1890ff');
cell.setAttrByPath('line/strokeWidth', 3);
cell.setAttrByPath('line/strokeDasharray', '5 5');
} }
});
// 打印当前<E5BD93><E5898D><EFBFBD>择状态
console.log('Current selection before reset:', graph.getSelectedCells());
graph.resetSelection();
console.log('Selection after reset:', graph.getSelectedCells());
// 尝试选择所有单元格
try {
graph.select(cells);
console.log('Selection after select all:', graph.getSelectedCells());
} catch (error) {
console.error('Error selecting cells:', error);
}
// 检查Selection插件是否正确初始化
const selection = graph.getPlugin('selection');
console.log('Selection plugin:', selection);
}, 100);
}} }}
/> />
</Tooltip> </Tooltip>