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:
asp_ly 2024-12-14 12:58:49 +08:00
parent 4caae86b10
commit ae4d4edc4d
1 changed files with 137 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,22 @@
import React, {useEffect, useState, useRef} from 'react'; import React, {useEffect, useState, useRef} from 'react';
import {useParams, useNavigate} from 'react-router-dom'; import {useParams, useNavigate} from 'react-router-dom';
import {Button, Space, Card, Row, Col, message, Modal} from 'antd'; import {Button, Space, Card, Row, Col, message, Modal} from 'antd';
import {ArrowLeftOutlined, SaveOutlined, PlayCircleOutlined} from '@ant-design/icons'; import {
ArrowLeftOutlined,
SaveOutlined,
PlayCircleOutlined,
CopyOutlined,
DeleteOutlined,
UndoOutlined,
RedoOutlined,
ScissorOutlined,
SnippetsOutlined,
} from '@ant-design/icons';
import {Graph, Cell} from '@antv/x6'; import {Graph, Cell} from '@antv/x6';
import '@antv/x6-plugin-snapline'; import '@antv/x6-plugin-snapline';
import '@antv/x6-plugin-clipboard';
import '@antv/x6-plugin-history';
import { Selection } from '@antv/x6-plugin-selection';
import {getDefinitionDetail, saveDefinition} from '../service'; import {getDefinitionDetail, saveDefinition} from '../service';
import {getNodeDefinitionList} from './service'; import {getNodeDefinitionList} from './service';
import NodePanel from './components/NodePanel'; import NodePanel from './components/NodePanel';
@ -61,25 +74,47 @@ const WorkflowDesign: React.FC = () => {
snapline: true, snapline: true,
history: true, history: true,
clipboard: true, clipboard: true,
selecting: true,
keyboard: true, keyboard: true,
background: { background: {
color: '#f5f5f5', color: '#f5f5f5',
}, },
mousewheel: {
enabled: true,
modifiers: ['ctrl', 'meta'],
factor: 1.1,
maxScale: 1.5,
minScale: 0.5,
},
panning: {
enabled: true,
eventTypes: ['rightMouseDown'],
},
preventDefaultContextMenu: true,
}); });
// 注册选择插件
graph.use(
new Selection({
enabled: true,
multiple: true,
rubberband: true,
showNodeSelectionBox: true,
showEdgeSelectionBox: true,
className: 'node-selected',
pointerEvents: 'none',
})
);
// 添加选择样式
const style = document.createElement('style');
style.textContent = `
.node-selected > rect {
stroke: #1890ff;
stroke-width: 2px;
}
.node-selected > path {
stroke: #1890ff;
stroke-width: 2px;
}
.x6-node-selected rect {
stroke: #1890ff;
stroke-width: 2px;
}
.x6-edge-selected path {
stroke: #1890ff;
stroke-width: 2px !important;
}
`;
document.head.appendChild(style);
// 显示/隐藏连接桩 // 显示/隐藏连接桩
graph.on('node:mouseenter', ({node}) => { graph.on('node:mouseenter', ({node}) => {
const ports = document.querySelectorAll(`[data-cell-id="${node.id}"] .x6-port-body`); const ports = document.querySelectorAll(`[data-cell-id="${node.id}"] .x6-port-body`);
@ -307,6 +342,94 @@ const WorkflowDesign: React.FC = () => {
}} }}
extra={ extra={
<Space> <Space>
<Space.Compact>
<Button
icon={<CopyOutlined />}
onClick={() => {
if (!graph) return;
const cells = graph.getSelectedCells();
if (cells.length === 0) {
message.info('请先选择要复制的元素');
return;
}
graph.copy(cells);
}}
title="复制"
/>
<Button
icon={<ScissorOutlined />}
onClick={() => {
if (!graph) return;
const cells = graph.getSelectedCells();
if (cells.length === 0) {
message.info('请先选择要剪切的元素');
return;
}
graph.cut(cells);
}}
title="剪切"
/>
<Button
icon={<SnippetsOutlined />}
onClick={() => {
if (!graph) return;
if (!graph.isClipboardEmpty()) {
const cells = graph.paste({ offset: 32 });
graph.cleanSelection();
graph.select(cells);
} else {
message.info('剪贴板为空');
}
}}
title="粘贴"
/>
<Button
icon={<DeleteOutlined />}
onClick={() => {
if (!graph) return;
const cells = graph.getSelectedCells();
if (cells.length === 0) {
message.info('请先选择要删除的元素');
return;
}
Modal.confirm({
title: '确认删除',
content: '确定要删除选中的元素吗？',
onOk: () => {
graph.removeCells(cells);
}
});
}}
danger
title="删除"
/>
</Space.Compact>
<Space.Compact>
<Button
icon={<UndoOutlined />}
onClick={() => {
if (!graph) return;
if (graph.canUndo()) {
graph.undo();
} else {
message.info('没有可撤销的操作');
}
}}
title="撤销"
/>
<Button
icon={<RedoOutlined />}
onClick={() => {
if (!graph) return;
if (graph.canRedo()) {
graph.redo();
} else {
message.info('没有可重做的操作');
}
}}
title="重做"
/>
</Space.Compact>
<Button <Button
icon={<SaveOutlined/>} icon={<SaveOutlined/>}
type="primary" type="primary"