1541 lines
56 KiB
Plaintext
1541 lines
56 KiB
Plaintext
import React, {useEffect, useState, useRef} from 'react';
|
||
import {createRoot} from 'react-dom/client';
|
||
import {useParams, useNavigate} from 'react-router-dom';
|
||
import {Button, Space, message, Modal, Tooltip, Dropdown} from 'antd';
|
||
import {
|
||
ArrowLeftOutlined,
|
||
SaveOutlined,
|
||
CopyOutlined,
|
||
DeleteOutlined,
|
||
UndoOutlined,
|
||
RedoOutlined,
|
||
ScissorOutlined,
|
||
SnippetsOutlined,
|
||
SelectOutlined,
|
||
ZoomInOutlined,
|
||
ZoomOutOutlined,
|
||
} from '@ant-design/icons';
|
||
import {Graph, Cell, Edge} from '@antv/x6';
|
||
import '@antv/x6-plugin-snapline';
|
||
import '@antv/x6-plugin-selection';
|
||
import '@antv/x6-plugin-keyboard';
|
||
import '@antv/x6-plugin-history';
|
||
import '@antv/x6-plugin-clipboard';
|
||
import '@antv/x6-plugin-transform';
|
||
import {Selection} from '@antv/x6-plugin-selection';
|
||
import {MiniMap} from '@antv/x6-plugin-minimap';
|
||
import {Clipboard} from '@antv/x6-plugin-clipboard';
|
||
import {History} from '@antv/x6-plugin-history';
|
||
import {Transform} from '@antv/x6-plugin-transform';
|
||
import {getDefinitionDetail, saveDefinition} from '../service';
|
||
import {getNodeDefinitionList} from './service';
|
||
import NodePanel from './components/NodePanel';
|
||
import NodeConfigDrawer from './components/NodeConfigModal';
|
||
import {validateWorkflow} from './utils/validator';
|
||
import {addNodeToGraph} from './utils/nodeUtils';
|
||
import './index.less';
|
||
import type {NodeDefinitionResponse} from "@/workflow/nodes/nodeService";
|
||
import ExpressionModal from './components/ExpressionModal';
|
||
import {EdgeCondition} from './types';
|
||
|
||
const WorkflowDesign: React.FC = () => {
|
||
const {id} = useParams<{ id: string }>();
|
||
const navigate = useNavigate();
|
||
const [title, setTitle] = useState<string>('工作流设计');
|
||
const graphContainerRef = useRef<HTMLDivElement>(null);
|
||
const minimapContainerRef = useRef<HTMLDivElement>(null);
|
||
const [graph, setGraph] = useState<Graph | null>(null);
|
||
const [selectedNode, setSelectedNode] = useState<Cell | null>(null);
|
||
const [selectedNodeDefinition, setSelectedNodeDefinition] = useState<NodeDefinitionResponse | null>(null);
|
||
const [configModalVisible, setConfigModalVisible] = useState(false);
|
||
const [definitionData, setDefinitionData] = useState<any>(null);
|
||
const [nodeDefinitions, setNodeDefinitions] = useState<NodeDefinitionResponse[]>([]);
|
||
const [isNodeDefinitionsLoaded, setIsNodeDefinitionsLoaded] = useState(false);
|
||
const [scale, setScale] = useState(1);
|
||
const [expressionModalVisible, setExpressionModalVisible] = useState(false);
|
||
const [selectedEdge, setSelectedEdge] = useState<Edge | null>(null);
|
||
|
||
// 初始化图形
|
||
const initGraph = () => {
|
||
if (!graphContainerRef.current) return;
|
||
|
||
// 获取主画布容器尺寸
|
||
const container = graphContainerRef.current;
|
||
const containerWidth = container.clientWidth;
|
||
const containerHeight = container.clientHeight;
|
||
|
||
// 计算主画布和小地图的尺寸比例
|
||
const MINIMAP_BASE_WIDTH = 200;
|
||
const minimapWidth = MINIMAP_BASE_WIDTH;
|
||
const minimapHeight = Math.round((MINIMAP_BASE_WIDTH * containerHeight) / containerWidth);
|
||
|
||
// 计算缩放比例
|
||
const scale = minimapWidth / containerWidth;
|
||
|
||
// 将尺寸信息保存到样式变量中
|
||
document.documentElement.style.setProperty('--minimap-width', `${minimapWidth}px`);
|
||
document.documentElement.style.setProperty('--minimap-height', `${minimapHeight}px`);
|
||
|
||
const graph = new Graph({
|
||
container: graphContainerRef.current,
|
||
grid: {
|
||
size: 10,
|
||
visible: true,
|
||
type: 'dot',
|
||
args: {
|
||
color: '#a0a0a0',
|
||
thickness: 1,
|
||
},
|
||
},
|
||
connecting: {
|
||
snap: true, // 连线时自动吸附
|
||
allowBlank: false, // 禁止连线到空白位置
|
||
allowLoop: false, // 禁止自环
|
||
allowNode: false, // 禁止连接到节点（只允许连接到连接桩）
|
||
allowEdge: false, // 禁止边连接到边
|
||
connector: {
|
||
name: 'rounded',
|
||
args: {
|
||
radius: 8
|
||
}
|
||
},
|
||
router: {
|
||
name: 'manhattan',
|
||
args: {
|
||
padding: 1
|
||
}
|
||
},
|
||
validateConnection({sourceCell, targetCell, sourceMagnet, targetMagnet}) {
|
||
if (sourceCell === targetCell) {
|
||
return false; // 禁止自连接
|
||
}
|
||
if (!sourceMagnet || !targetMagnet) {
|
||
return false; // 需要有效的连接点
|
||
}
|
||
|
||
// 获取源节点和目标节点的类型
|
||
const sourceNodeType = sourceCell.getProp('nodeType');
|
||
const targetNodeType = targetCell.getProp('nodeType');
|
||
|
||
// 如果源节点或目标节点是网关类型，允许多条连线
|
||
if (sourceNodeType === 'GATEWAY_NODE' || targetNodeType === 'GATEWAY_NODE') {
|
||
return true;
|
||
}
|
||
|
||
// 对于其他类型的节点，检查是否已存在连接
|
||
const edges = graph.getEdges();
|
||
const exists = edges.some(edge => {
|
||
const source = edge.getSource();
|
||
const target = edge.getTarget();
|
||
return (
|
||
source.cell === sourceCell.id &&
|
||
target.cell === targetCell.id &&
|
||
source.port === sourceMagnet.getAttribute('port') &&
|
||
target.port === targetMagnet.getAttribute('port')
|
||
);
|
||
});
|
||
return !exists;
|
||
},
|
||
validateMagnet({magnet}) {
|
||
return magnet.getAttribute('port-group') !== 'top';
|
||
},
|
||
validateEdge({edge}) {
|
||
return true;
|
||
}
|
||
},
|
||
highlighting: {
|
||
magnetAvailable: {
|
||
name: 'stroke',
|
||
args: {
|
||
padding: 4,
|
||
attrs: {
|
||
strokeWidth: 4,
|
||
stroke: '#52c41a',
|
||
},
|
||
},
|
||
},
|
||
},
|
||
clipboard: {
|
||
enabled: true,
|
||
},
|
||
selecting: {
|
||
enabled: true,
|
||
multiple: true,
|
||
rubberband: true,
|
||
movable: true,
|
||
showNodeSelectionBox: false, // 禁用节点选择框
|
||
showEdgeSelectionBox: false, // 禁用边选择框
|
||
selectNodeOnMoved: false,
|
||
selectEdgeOnMoved: false,
|
||
},
|
||
snapline: true,
|
||
keyboard: {
|
||
enabled: true,
|
||
global: false,
|
||
},
|
||
panning: {
|
||
enabled: true,
|
||
eventTypes: ['rightMouseDown'], // 右键按下时启用画布拖拽
|
||
},
|
||
mousewheel: {
|
||
enabled: true,
|
||
modifiers: ['ctrl', 'meta'],
|
||
minScale: 0.2,
|
||
maxScale: 2,
|
||
},
|
||
edgeMovable: true, // 允许边移动
|
||
edgeLabelMovable: true, // 允许边标签移动
|
||
vertexAddable: true, // 允许添加顶点
|
||
vertexMovable: true, // 允许顶点移动
|
||
vertexDeletable: true, // 允许删除顶点
|
||
});
|
||
|
||
// 注册插件
|
||
const history = new History({
|
||
enabled: true,
|
||
beforeAddCommand(event: any, args: any) {
|
||
return true;
|
||
},
|
||
// History 插件事件处理已移除，因为不再需要强制更新
|
||
afterExecuteCommand: () => {},
|
||
afterUndo: () => {},
|
||
afterRedo: () => {},
|
||
});
|
||
|
||
// 初始化Selection插件
|
||
const selection = new Selection({
|
||
enabled: true,
|
||
multiple: true,
|
||
rubberband: true,
|
||
movable: true,
|
||
showNodeSelectionBox: false, // 禁用节点选择框
|
||
showEdgeSelectionBox: false, // 禁用边选择框
|
||
selectNodeOnMoved: false,
|
||
selectEdgeOnMoved: false,
|
||
multipleSelectionModifiers: ['ctrl', 'meta'],
|
||
showAnchorSelectionBox: false,
|
||
pointerEvents: 'auto'
|
||
});
|
||
graph.use(selection);
|
||
graph.use(new MiniMap({
|
||
container: minimapContainerRef.current!,
|
||
width: minimapWidth,
|
||
height: minimapHeight,
|
||
padding: 5,
|
||
scalable: false,
|
||
minScale: scale * 0.8, // 稍微缩小一点以显示更多内容
|
||
maxScale: scale * 1.2,
|
||
graphOptions: {
|
||
connecting: {
|
||
connector: 'rounded',
|
||
connectionPoint: 'anchor',
|
||
router: {
|
||
name: 'manhattan',
|
||
},
|
||
},
|
||
async: true,
|
||
frozen: true,
|
||
interacting: false,
|
||
grid: false
|
||
},
|
||
viewport: {
|
||
padding: 0,
|
||
fitToContent: false, // 禁用自动适配内容
|
||
initialPosition: { // 初始位置与主画布保持一致
|
||
x: 0,
|
||
y: 0
|
||
},
|
||
initialScale: scale
|
||
}
|
||
}));
|
||
graph.use(new Clipboard());
|
||
graph.use(history);
|
||
graph.use(
|
||
new Transform({
|
||
resizing: false,
|
||
rotating: false,
|
||
})
|
||
);
|
||
|
||
// 扩展 graph 对象，添加 history 属性
|
||
(graph as any).history = history;
|
||
|
||
// 监听图形化
|
||
graph.on('cell:added', ({cell}) => {
|
||
const canUndo = history.canUndo();
|
||
const canRedo = history.canRedo();
|
||
// 强制更新组件状态已移除
|
||
});
|
||
|
||
graph.on('cell:removed', ({cell}) => {
|
||
const canUndo = history.canUndo();
|
||
const canRedo = history.canRedo();
|
||
console.log('Cell removed:', {
|
||
cell,
|
||
canUndo,
|
||
canRedo,
|
||
stackSize: history.stackSize,
|
||
});
|
||
// 强制更新组件状态已移除
|
||
});
|
||
|
||
graph.on('cell:changed', ({cell, options}) => {
|
||
const canUndo = history.canUndo();
|
||
const canRedo = history.canRedo();
|
||
// 强制更新组件状态已移除
|
||
});
|
||
|
||
// 监听主画布变化，同步更新小地图
|
||
graph.on('transform', () => {
|
||
const minimap = graph.getPlugin('minimap') as MiniMap;
|
||
if (minimap) {
|
||
const mainViewport = graph.getView().getVisibleArea();
|
||
minimap.viewport.scale = scale;
|
||
minimap.viewport.center(mainViewport.center);
|
||
}
|
||
});
|
||
|
||
// 处理连线重新连接
|
||
graph.on('edge:moved', ({edge, terminal, previous}) => {
|
||
if (!edge || !terminal) return;
|
||
|
||
const isSource = terminal.type === 'source';
|
||
const source = isSource ? terminal : edge.getSource();
|
||
const target = isSource ? edge.getTarget() : terminal;
|
||
|
||
if (source && target) {
|
||
// 移除旧的连线
|
||
edge.remove();
|
||
|
||
// 创建新的连线
|
||
graph.addEdge({
|
||
source: {
|
||
cell: source.cell,
|
||
port: source.port,
|
||
},
|
||
target: {
|
||
cell: target.cell,
|
||
port: target.port,
|
||
},
|
||
attrs: {
|
||
line: {
|
||
stroke: '#5F95FF',
|
||
strokeWidth: 2,
|
||
targetMarker: {
|
||
name: 'classic',
|
||
size: 7,
|
||
},
|
||
},
|
||
},
|
||
});
|
||
}
|
||
});
|
||
|
||
// 处理连线更改
|
||
graph.on('edge:change:source edge:change:target', ({edge, current, previous}) => {
|
||
if (edge && current) {
|
||
edge.setAttrs({
|
||
line: {
|
||
stroke: '#5F95FF',
|
||
strokeWidth: 2,
|
||
targetMarker: {
|
||
name: 'classic',
|
||
size: 7,
|
||
},
|
||
},
|
||
});
|
||
}
|
||
});
|
||
|
||
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;
|
||
};
|
||
|
||
// 处理撤销操作
|
||
const handleUndo = () => {
|
||
if (!graph) return;
|
||
const history = (graph as any).history;
|
||
if (!history) {
|
||
console.error('History plugin not initialized');
|
||
return;
|
||
}
|
||
|
||
const beforeState = {
|
||
canUndo: history.canUndo(),
|
||
canRedo: history.canRedo(),
|
||
stackSize: history.stackSize,
|
||
};
|
||
|
||
if (history.canUndo()) {
|
||
history.undo();
|
||
const afterState = {
|
||
canUndo: history.canUndo(),
|
||
canRedo: history.canRedo(),
|
||
stackSize: history.stackSize,
|
||
};
|
||
console.log('Undo operation:', {
|
||
before: beforeState,
|
||
after: afterState,
|
||
});
|
||
message.success('已撤销');
|
||
} else {
|
||
message.info('没有可撤销的操作');
|
||
}
|
||
};
|
||
|
||
// 处理重做操作
|
||
const handleRedo = () => {
|
||
if (!graph) return;
|
||
const history = (graph as any).history;
|
||
if (!history) {
|
||
console.error('History plugin not initialized');
|
||
return;
|
||
}
|
||
|
||
const beforeState = {
|
||
canUndo: history.canUndo(),
|
||
canRedo: history.canRedo(),
|
||
stackSize: history.stackSize,
|
||
};
|
||
|
||
if (history.canRedo()) {
|
||
history.redo();
|
||
const afterState = {
|
||
canUndo: history.canUndo(),
|
||
canRedo: history.canRedo(),
|
||
stackSize: history.stackSize,
|
||
};
|
||
console.log('Redo operation:', {
|
||
before: beforeState,
|
||
after: afterState,
|
||
});
|
||
message.success('已重做');
|
||
} else {
|
||
message.info('没有可重做的操作');
|
||
}
|
||
};
|
||
|
||
// 处理缩放
|
||
const handleZoom = (delta: number) => {
|
||
if (!graph) return;
|
||
const currentScale = graph.scale();
|
||
const newScale = Math.max(0.2, Math.min(2, currentScale.sx + delta));
|
||
graph.scale(newScale, newScale);
|
||
setScale(newScale);
|
||
};
|
||
|
||
// 放大
|
||
const handleZoomIn = () => {
|
||
handleZoom(0.1);
|
||
};
|
||
|
||
// 缩小
|
||
const handleZoomOut = () => {
|
||
handleZoom(-0.1);
|
||
};
|
||
|
||
// 注册事件处理器
|
||
const registerEventHandlers = (graph: Graph) => {
|
||
// 定义悬停样式
|
||
const hoverStyle = {
|
||
strokeWidth: 2,
|
||
stroke: '#52c41a' // 绿色
|
||
};
|
||
// 保存节点的原始样式
|
||
const saveNodeOriginalStyle = (node: any) => {
|
||
const data = node.getData();
|
||
if (!data?.originalStyle) {
|
||
const originalStyle = {
|
||
stroke: node.getAttrByPath('body/stroke') || '#5F95FF',
|
||
strokeWidth: node.getAttrByPath('body/strokeWidth') || 1
|
||
};
|
||
node.setData({
|
||
...data,
|
||
originalStyle
|
||
});
|
||
}
|
||
};
|
||
|
||
// 获取节点的原始样式
|
||
const getNodeOriginalStyle = (node: any) => {
|
||
const data = node.getData();
|
||
return data?.originalStyle || {
|
||
stroke: '#5F95FF',
|
||
strokeWidth: 2
|
||
};
|
||
};
|
||
|
||
// 恢复节点的原始样式
|
||
const resetNodeStyle = (node: any) => {
|
||
const originalStyle = getNodeOriginalStyle(node);
|
||
node.setAttrByPath('body/stroke', originalStyle.stroke);
|
||
node.setAttrByPath('body/strokeWidth', originalStyle.strokeWidth);
|
||
};
|
||
|
||
// 节点悬停事件
|
||
graph.on('node:mouseenter', ({node}) => {
|
||
// 保存原始样式
|
||
saveNodeOriginalStyle(node);
|
||
|
||
// 显示连接桩
|
||
const ports = document.querySelectorAll(`[data-cell-id="${node.id}"] .x6-port-body`);
|
||
ports.forEach((port) => {
|
||
port.setAttribute('style', 'visibility: visible; fill: #fff; stroke: #85ca6d;');
|
||
});
|
||
|
||
// 显示悬停样式
|
||
node.setAttrByPath('body/stroke', hoverStyle.stroke);
|
||
node.setAttrByPath('body/strokeWidth', hoverStyle.strokeWidth);
|
||
});
|
||
|
||
graph.on('node:mouseleave', ({node}) => {
|
||
// 隐藏连接桩
|
||
const ports = document.querySelectorAll(`[data-cell-id="${node.id}"] .x6-port-body`);
|
||
ports.forEach((port) => {
|
||
port.setAttribute('style', 'visibility: hidden');
|
||
});
|
||
|
||
// 恢复原始样式
|
||
resetNodeStyle(node);
|
||
});
|
||
|
||
// 节点拖动开始时记录状态
|
||
graph.on('node:drag:start', ({node}) => {
|
||
// 保存原始样式，以防还没保存过
|
||
saveNodeOriginalStyle(node);
|
||
});
|
||
|
||
// 节点拖动结束后恢复样式
|
||
graph.on('node:moved', ({node}) => {
|
||
resetNodeStyle(node);
|
||
// 隐藏连接桩
|
||
const ports = document.querySelectorAll(`[data-cell-id="${node.id}"] .x6-port-body`);
|
||
ports.forEach((port) => {
|
||
port.setAttribute('style', 'visibility: hidden');
|
||
});
|
||
});
|
||
|
||
// 节点点击事件
|
||
graph.on('node:click', ({node}) => {
|
||
// 取当前选中的节点
|
||
const selectedNode = graph.getSelectedCells()[0];
|
||
|
||
// 如果有其他节点被选中，恢复其样式
|
||
if (selectedNode && selectedNode.isNode() && selectedNode.id !== node.id) {
|
||
resetNodeStyle(selectedNode);
|
||
}
|
||
|
||
// 更新选中状态
|
||
graph.resetSelection();
|
||
graph.select(node);
|
||
});
|
||
|
||
// 点击空白处事件
|
||
graph.on('blank:click', () => {
|
||
// 获取当前选中的节点
|
||
const selectedNode = graph.getSelectedCells()[0];
|
||
|
||
// 如果有节点被选中，恢复其样式
|
||
if (selectedNode && selectedNode.isNode()) {
|
||
resetNodeStyle(selectedNode);
|
||
}
|
||
|
||
// 清除选中状态
|
||
graph.resetSelection();
|
||
});
|
||
|
||
// 节点双击事件
|
||
graph.on('node:dblclick', ({node}) => {
|
||
const nodeType = node.getProp('nodeType');
|
||
// 从节点定义列表中找到对应的定义
|
||
const nodeDefinition = nodeDefinitions.find(def => def.nodeType === nodeType);
|
||
if (nodeDefinition) {
|
||
// 获取已保存的配置
|
||
const savedConfig = node.getProp('workflowDefinitionNode');
|
||
// 合并节点定义和已保存的配置
|
||
const mergedNodeDefinition = {
|
||
...nodeDefinition, // 基础定义
|
||
...savedConfig, // 已保存的配置（从端加载的）
|
||
...node.getProp('graph') || {} // 当前会话中的修改（如果有）
|
||
};
|
||
setSelectedNode(node);
|
||
setSelectedNodeDefinition(mergedNodeDefinition);
|
||
setConfigModalVisible(true);
|
||
}
|
||
});
|
||
|
||
// 添加右键菜单
|
||
graph.on('node:contextmenu', ({cell, view, e}) => {
|
||
e.preventDefault();
|
||
graph.cleanSelection();
|
||
graph.select(cell);
|
||
|
||
const dropdownContainer = document.createElement('div');
|
||
dropdownContainer.style.position = 'absolute';
|
||
dropdownContainer.style.left = `${e.clientX}px`;
|
||
dropdownContainer.style.top = `${e.clientY}px`;
|
||
document.body.appendChild(dropdownContainer);
|
||
|
||
const root = createRoot(dropdownContainer);
|
||
let isOpen = true;
|
||
|
||
const closeMenu = () => {
|
||
isOpen = false;
|
||
root.render(
|
||
<Dropdown menu={{items}} open={false} onOpenChange={(open) => {
|
||
if (!open) {
|
||
setTimeout(() => {
|
||
root.unmount();
|
||
document.body.removeChild(dropdownContainer);
|
||
}, 100);
|
||
}
|
||
}}>
|
||
<div/>
|
||
</Dropdown>
|
||
);
|
||
};
|
||
|
||
const items = [
|
||
{
|
||
key: '1',
|
||
label: '编辑',
|
||
onClick: () => {
|
||
closeMenu();
|
||
setSelectedNode(cell);
|
||
setSelectedNodeDefinition(nodeDefinitions.find(def => def.nodeType === cell.getProp('nodeType')));
|
||
setConfigModalVisible(true);
|
||
}
|
||
},
|
||
{
|
||
key: '2',
|
||
label: '删除',
|
||
onClick: () => {
|
||
closeMenu();
|
||
Modal.confirm({
|
||
title: '确认删除',
|
||
content: '确定要删除该节点吗？',
|
||
onOk: () => {
|
||
cell.remove();
|
||
}
|
||
});
|
||
}
|
||
}
|
||
];
|
||
|
||
root.render(
|
||
<Dropdown menu={{items}} open={isOpen}>
|
||
<div/>
|
||
</Dropdown>
|
||
);
|
||
|
||
const handleClickOutside = (e: MouseEvent) => {
|
||
if (!dropdownContainer.contains(e.target as Node)) {
|
||
closeMenu();
|
||
document.removeEventListener('click', handleClickOutside);
|
||
}
|
||
};
|
||
document.addEventListener('click', handleClickOutside);
|
||
});
|
||
|
||
// 添加边的右键菜单
|
||
graph.on('edge:contextmenu', ({cell: edge, view, e}) => {
|
||
e.preventDefault();
|
||
graph.cleanSelection();
|
||
graph.select(edge);
|
||
|
||
const sourceNode = graph.getCellById(edge.getSourceCellId());
|
||
const isFromGateway = sourceNode.getProp('nodeType') === 'GATEWAY_NODE';
|
||
|
||
const dropdownContainer = document.createElement('div');
|
||
dropdownContainer.style.position = 'absolute';
|
||
dropdownContainer.style.left = `${e.clientX}px`;
|
||
dropdownContainer.style.top = `${e.clientY}px`;
|
||
document.body.appendChild(dropdownContainer);
|
||
|
||
const root = createRoot(dropdownContainer);
|
||
let isOpen = true;
|
||
|
||
const closeMenu = () => {
|
||
isOpen = false;
|
||
root.render(
|
||
<Dropdown menu={{items}} open={false} onOpenChange={(open) => {
|
||
if (!open) {
|
||
setTimeout(() => {
|
||
root.unmount();
|
||
document.body.removeChild(dropdownContainer);
|
||
}, 100);
|
||
}
|
||
}}>
|
||
<div/>
|
||
</Dropdown>
|
||
);
|
||
};
|
||
|
||
const items = [
|
||
// 只有网关节点的出线才显示编辑条件选项
|
||
...(isFromGateway ? [{
|
||
key: 'edit',
|
||
label: '编辑条件',
|
||
onClick: () => {
|
||
closeMenu();
|
||
setSelectedEdge(edge);
|
||
setExpressionModalVisible(true);
|
||
}
|
||
}] : []),
|
||
{
|
||
key: 'delete',
|
||
label: '删除',
|
||
danger: true,
|
||
onClick: () => {
|
||
closeMenu();
|
||
Modal.confirm({
|
||
title: '确认删除',
|
||
content: '确定要删除该连接线吗？',
|
||
onOk: () => {
|
||
edge.remove();
|
||
}
|
||
});
|
||
}
|
||
}
|
||
];
|
||
|
||
root.render(
|
||
<Dropdown menu={{items}} open={isOpen}>
|
||
<div/>
|
||
</Dropdown>
|
||
);
|
||
|
||
const handleClickOutside = (e: MouseEvent) => {
|
||
if (!dropdownContainer.contains(e.target as Node)) {
|
||
closeMenu();
|
||
document.removeEventListener('click', handleClickOutside);
|
||
}
|
||
};
|
||
document.addEventListener('click', handleClickOutside);
|
||
});
|
||
|
||
// 禁用默认的右键菜单
|
||
graph.on('blank:contextmenu', ({e}) => {
|
||
e.preventDefault();
|
||
});
|
||
|
||
// 禁用节点的右键菜单
|
||
graph.on('node:contextmenu', ({e}) => {
|
||
e.preventDefault();
|
||
});
|
||
|
||
// 禁用边的右键菜单
|
||
graph.on('edge:contextmenu', ({e}) => {
|
||
e.preventDefault();
|
||
});
|
||
|
||
// 连接桩显示/隐藏
|
||
graph.on('node:mouseenter', ({node}) => {
|
||
// 保存原始样式
|
||
saveNodeOriginalStyle(node);
|
||
|
||
// 显示连接桩
|
||
const ports = document.querySelectorAll(`[data-cell-id="${node.id}"] .x6-port-body`);
|
||
ports.forEach((port) => {
|
||
port.setAttribute('style', 'visibility: visible; fill: #fff; stroke: #85ca6d;');
|
||
});
|
||
|
||
// 显示悬停样式
|
||
node.setAttrByPath('body/stroke', hoverStyle.stroke);
|
||
node.setAttrByPath('body/strokeWidth', hoverStyle.strokeWidth);
|
||
});
|
||
|
||
// 连线开始时的处理
|
||
graph.on('edge:connected', ({edge}) => {
|
||
// 设置连线样式
|
||
edge.setAttrs({
|
||
line: {
|
||
stroke: '#5F95FF',
|
||
strokeWidth: 2,
|
||
targetMarker: {
|
||
name: 'classic',
|
||
size: 7,
|
||
},
|
||
},
|
||
});
|
||
});
|
||
|
||
// 连线悬停效果
|
||
graph.on('edge:mouseenter', ({edge}) => {
|
||
edge.setAttrs({
|
||
line: {
|
||
stroke: '#52c41a',
|
||
strokeWidth: 2,
|
||
},
|
||
});
|
||
});
|
||
|
||
graph.on('edge:mouseleave', ({edge}) => {
|
||
edge.setAttrs({
|
||
line: {
|
||
stroke: '#5F95FF',
|
||
strokeWidth: 2,
|
||
},
|
||
});
|
||
});
|
||
|
||
// 允许拖动连线中间的点和端点
|
||
graph.on('edge:selected', ({edge}) => {
|
||
edge.addTools([
|
||
{
|
||
name: 'source-arrowhead',
|
||
args: {
|
||
attrs: {
|
||
fill: '#fff',
|
||
stroke: '#5F95FF',
|
||
strokeWidth: 1,
|
||
d: 'M 0 -6 L -8 0 L 0 6 Z',
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: 'target-arrowhead',
|
||
args: {
|
||
attrs: {
|
||
fill: '#fff',
|
||
stroke: '#5F95FF',
|
||
strokeWidth: 1,
|
||
d: 'M 0 -6 L 8 0 L 0 6 Z',
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: 'vertices',
|
||
args: {
|
||
padding: 2,
|
||
attrs: {
|
||
fill: '#fff',
|
||
stroke: '#5F95FF',
|
||
strokeWidth: 1,
|
||
r: 4
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: 'segments',
|
||
args: {
|
||
padding: 2,
|
||
attrs: {
|
||
fill: '#fff',
|
||
stroke: '#5F95FF',
|
||
strokeWidth: 1,
|
||
r: 4
|
||
},
|
||
},
|
||
},
|
||
]);
|
||
});
|
||
|
||
// 线工具移除
|
||
graph.on('edge:unselected', ({edge}) => {
|
||
edge.removeTools();
|
||
});
|
||
|
||
// 连线移动到其他连接桩时的样式
|
||
graph.on('edge:connected', ({edge}) => {
|
||
edge.setAttrs({
|
||
line: {
|
||
stroke: '#5F95FF',
|
||
strokeWidth: 2,
|
||
targetMarker: {
|
||
name: 'classic',
|
||
size: 7,
|
||
},
|
||
},
|
||
});
|
||
});
|
||
|
||
// 连线悬停在连接桩上时的样式
|
||
graph.on('edge:mouseenter', ({edge}) => {
|
||
const ports = document.querySelectorAll('.x6-port-body');
|
||
ports.forEach((port) => {
|
||
const portGroup = port.getAttribute('port-group');
|
||
if (portGroup !== 'top') {
|
||
port.setAttribute('style', 'visibility: visible; fill: #fff; stroke: #85ca6d;');
|
||
}
|
||
});
|
||
});
|
||
|
||
graph.on('edge:mouseleave', ({edge}) => {
|
||
const ports = document.querySelectorAll('.x6-port-body');
|
||
ports.forEach((port) => {
|
||
port.setAttribute('style', 'visibility: hidden');
|
||
});
|
||
});
|
||
|
||
// 边选中时添加编辑工具
|
||
graph.on('edge:selected', ({edge}) => {
|
||
edge.addTools([
|
||
{
|
||
name: 'vertices', // 顶点工具
|
||
args: {
|
||
padding: 4,
|
||
attrs: {
|
||
fill: '#fff',
|
||
stroke: '#5F95FF',
|
||
strokeWidth: 2,
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: 'segments', // 线段工具
|
||
args: {
|
||
attrs: {
|
||
fill: '#fff',
|
||
stroke: '#5F95FF',
|
||
strokeWidth: 2,
|
||
}
|
||
}
|
||
}
|
||
]);
|
||
});
|
||
|
||
// 边取消选中时移除工具
|
||
graph.on('edge:unselected', ({edge}) => {
|
||
edge.removeTools();
|
||
});
|
||
|
||
// 在 registerEventHandlers 函数中更新选择状态的视觉反馈
|
||
graph.on('selection:changed', ({selected, removed}) => {
|
||
console.log(selected, removed)
|
||
// 处理新选中的元素
|
||
selected.forEach(cell => {
|
||
if (cell.isNode()) {
|
||
cell.setAttrByPath('body/stroke', '#1890ff');
|
||
cell.setAttrByPath('body/strokeWidth', 2);
|
||
cell.setAttrByPath('body/strokeDasharray', '5 5');
|
||
} else if (cell.isEdge()) {
|
||
cell.setAttrByPath('line/stroke', '#1890ff');
|
||
cell.setAttrByPath('line/strokeWidth', 2);
|
||
cell.setAttrByPath('line/strokeDasharray', '5 5');
|
||
}
|
||
});
|
||
|
||
// 处理取消选中的元素
|
||
removed.forEach(cell => {
|
||
if (cell.isNode()) {
|
||
cell.setAttrByPath('body/stroke', '#5F95FF');
|
||
cell.setAttrByPath('body/strokeWidth', 2);
|
||
cell.setAttrByPath('body/strokeDasharray', null);
|
||
} else if (cell.isEdge()) {
|
||
cell.setAttrByPath('line/stroke', '#5F95FF');
|
||
cell.setAttrByPath('line/strokeWidth', 2);
|
||
cell.setAttrByPath('line/strokeDasharray', null);
|
||
}
|
||
});
|
||
});
|
||
};
|
||
|
||
// 处理复制操作
|
||
const handleCopy = () => {
|
||
if (!graph) return;
|
||
const cells = graph.getSelectedCells();
|
||
if (cells.length === 0) {
|
||
message.info('请先选择要复制的节点');
|
||
return;
|
||
}
|
||
graph.copy(cells);
|
||
message.success('已复制');
|
||
};
|
||
|
||
// 处理剪切操作
|
||
const handleCut = () => {
|
||
if (!graph) return;
|
||
const cells = graph.getSelectedCells();
|
||
if (cells.length === 0) {
|
||
message.info('请先选择要剪切的节点');
|
||
return;
|
||
}
|
||
graph.cut(cells);
|
||
message.success('已剪切');
|
||
};
|
||
|
||
// 处理粘贴操作
|
||
const handlePaste = () => {
|
||
if (!graph) return;
|
||
if (graph.isClipboardEmpty()) {
|
||
message.info('剪贴板为空');
|
||
return;
|
||
}
|
||
const cells = graph.paste({offset: 32});
|
||
graph.cleanSelection();
|
||
graph.select(cells);
|
||
message.success('已粘贴');
|
||
};
|
||
|
||
// 首先加载节点定义列表
|
||
useEffect(() => {
|
||
const loadNodeDefinitions = async () => {
|
||
try {
|
||
const data = await getNodeDefinitionList();
|
||
setNodeDefinitions(data);
|
||
setIsNodeDefinitionsLoaded(true);
|
||
} catch (error) {
|
||
console.error('加载节点定义失败:', error);
|
||
message.error('加载节点定义失败');
|
||
}
|
||
};
|
||
loadNodeDefinitions();
|
||
}, []);
|
||
|
||
// 加载工作流定义详情
|
||
const loadDefinitionDetail = async (graphInstance: Graph, definitionId: string) => {
|
||
try {
|
||
const response = await getDefinitionDetail(Number(definitionId));
|
||
setTitle(`工作流设计 - ${response.name}`);
|
||
setDefinitionData(response);
|
||
|
||
if (!graphInstance) {
|
||
console.error('Graph instance is not initialized');
|
||
return;
|
||
}
|
||
|
||
// 确保节点定义已加载
|
||
if (!nodeDefinitions || nodeDefinitions.length === 0) {
|
||
console.error('节点定义未加载，无法还原工作流');
|
||
return;
|
||
}
|
||
|
||
// 清空画布
|
||
graphInstance.clearCells();
|
||
const nodeMap = new Map();
|
||
|
||
// 创建节点
|
||
response.graph?.nodes?.forEach((existingNode: any) => {
|
||
console.log('正在还原节点:', existingNode.nodeType, existingNode);
|
||
const node = addNodeToGraph(false, graphInstance, existingNode, nodeDefinitions);
|
||
|
||
if (!node) {
|
||
console.error('节点创建失败:', existingNode);
|
||
return;
|
||
}
|
||
|
||
// 只设置 graph 属性
|
||
node.setProp('graph', {
|
||
uiVariables: existingNode.uiVariables,
|
||
panelVariables: existingNode.panelVariables,
|
||
localVariables: existingNode.localVariables
|
||
});
|
||
nodeMap.set(existingNode.id, node);
|
||
console.log('节点创建成功，ID:', node.id, '映射 ID:', existingNode.id);
|
||
});
|
||
|
||
console.log('所有节点创建完成，nodeMap:', nodeMap);
|
||
console.log('准备创建边:', response.graph?.edges);
|
||
|
||
// 创建边
|
||
response.graph?.edges?.forEach((edge: any) => {
|
||
const sourceNode = nodeMap.get(edge.from);
|
||
const targetNode = nodeMap.get(edge.to);
|
||
if (sourceNode && targetNode) {
|
||
// 根据节点类型获取正确的端口组
|
||
const getPortByGroup = (node: any, group: string) => {
|
||
const ports = node.getPorts();
|
||
const port = ports.find((p: any) => p.group === group);
|
||
return port?.id;
|
||
};
|
||
|
||
// 获取源节点的输出端口（一定是out组）
|
||
const sourcePort = getPortByGroup(sourceNode, 'out');
|
||
|
||
// 获取目标节点的输入端口（一定是in组）
|
||
const targetPort = getPortByGroup(targetNode, 'in');
|
||
|
||
if (!sourcePort || !targetPort) {
|
||
console.error('无法找到正确的端口:', edge);
|
||
return;
|
||
}
|
||
|
||
const newEdge = graphInstance.addEdge({
|
||
source: {
|
||
cell: sourceNode.id,
|
||
port: sourcePort,
|
||
},
|
||
target: {
|
||
cell: targetNode.id,
|
||
port: targetPort,
|
||
},
|
||
vertices: edge?.vertices || [], // 恢复顶点信息
|
||
attrs: {
|
||
line: {
|
||
stroke: '#5F95FF',
|
||
strokeWidth: 2,
|
||
targetMarker: {
|
||
name: 'classic',
|
||
size: 7,
|
||
},
|
||
},
|
||
},
|
||
labels: [{
|
||
attrs: {
|
||
label: {
|
||
text: edge.config?.condition?.expression || edge.name || ''
|
||
}
|
||
}
|
||
}]
|
||
});
|
||
|
||
// 设置边的条件属性
|
||
if (edge.config?.condition) {
|
||
newEdge.setProp('condition', edge.config.condition);
|
||
}
|
||
}
|
||
});
|
||
|
||
// 传入节点数据，只在没有位置信息时应用自动布局
|
||
// applyAutoLayout(graphInstance, response.graph?.nodes || []);
|
||
} catch (error) {
|
||
console.error('加载工作流定义失败:', error);
|
||
message.error('加载工作流定义失败');
|
||
}
|
||
};
|
||
|
||
// 初始化图形和加载数据
|
||
useEffect(() => {
|
||
if (!graphContainerRef.current || !isNodeDefinitionsLoaded) {
|
||
return;
|
||
}
|
||
|
||
const newGraph = initGraph();
|
||
if (newGraph) {
|
||
setGraph(newGraph);
|
||
|
||
// 在图形初始化完成后加载数据
|
||
if (id) {
|
||
loadDefinitionDetail(newGraph, id);
|
||
}
|
||
}
|
||
|
||
return () => {
|
||
graph?.dispose();
|
||
};
|
||
}, [graphContainerRef, id, nodeDefinitions, isNodeDefinitionsLoaded]);
|
||
|
||
// 处理节点拖拽开始
|
||
const handleNodeDragStart = (node: NodeDefinitionResponse, e: React.DragEvent) => {
|
||
e.dataTransfer.setData('node', JSON.stringify(node));
|
||
};
|
||
|
||
// 处理节点拖拽结束
|
||
const handleDrop = (e: React.DragEvent) => {
|
||
e.preventDefault();
|
||
if (!graph) return;
|
||
|
||
try {
|
||
const nodeData = e.dataTransfer.getData('node');
|
||
if (!nodeData) return;
|
||
|
||
const node = JSON.parse(nodeData);
|
||
const {clientX, clientY} = e;
|
||
const point = graph.clientToLocal({x: clientX, y: clientY});
|
||
addNodeToGraph(true, graph, node, nodeDefinitions, point);
|
||
} catch (error) {
|
||
console.error('创建节点失败:', error);
|
||
message.error('创建节点失败');
|
||
}
|
||
};
|
||
|
||
// 处理拖拽过程中
|
||
const handleDragOver = (e: React.DragEvent) => {
|
||
e.preventDefault();
|
||
};
|
||
|
||
// 处理节点配置更新
|
||
const handleNodeConfigUpdate = (updatedNodeDefinition: any) => {
|
||
if (!selectedNode) return;
|
||
// 设置节点的 graph 属性，将所有数据统一放在 graph 下
|
||
selectedNode.setProp('graph', updatedNodeDefinition);
|
||
// 更新节点显示名称（如果存在）
|
||
if (updatedNodeDefinition.panelVariables?.name) {
|
||
selectedNode.attr('label/text', updatedNodeDefinition.panelVariables.name);
|
||
}
|
||
|
||
setConfigModalVisible(false);
|
||
message.success('节点配置已更新');
|
||
};
|
||
|
||
// 首先添加合并 schema 的工具函数
|
||
const mergeLocalVariablesSchemas = (schemas: any[]) => {
|
||
// 初始化合并后的 schema
|
||
const mergedSchema = {
|
||
type: 'object',
|
||
properties: {},
|
||
required: []
|
||
};
|
||
|
||
schemas.forEach(schema => {
|
||
if (!schema) return;
|
||
|
||
// 合并 properties
|
||
if (schema.properties) {
|
||
Object.entries(schema.properties).forEach(([key, property]) => {
|
||
// 如果属性已存在，检查是否完全相同
|
||
if (mergedSchema.properties[key]) {
|
||
if (JSON.stringify(mergedSchema.properties[key]) !== JSON.stringify(property)) {
|
||
console.warn(`属性 ${key} 在不同节点中定义不一致，使用第一个定义`);
|
||
}
|
||
} else {
|
||
mergedSchema.properties[key] = property;
|
||
}
|
||
});
|
||
}
|
||
|
||
// 合并 required 字段
|
||
if (schema.required) {
|
||
schema.required.forEach((field: string) => {
|
||
if (!mergedSchema.required.includes(field)) {
|
||
mergedSchema.required.push(field);
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
return mergedSchema;
|
||
};
|
||
// 处理保存工作流
|
||
const handleSaveWorkflow = async () => {
|
||
if (!graph || !definitionData) return;
|
||
console.log(definitionData)
|
||
try {
|
||
// 校验流程图
|
||
const validationResult = validateWorkflow(graph);
|
||
if (!validationResult.valid) {
|
||
message.error(validationResult.message);
|
||
return;
|
||
}
|
||
|
||
// 获取所有节点和边的数据
|
||
const nodes = graph.getNodes().map(node => {
|
||
const nodeType = node.getProp('nodeType');
|
||
const graphData = node.getProp('graph') || {};
|
||
const nodeDefinition = nodeDefinitions.find(def => def.nodeType === nodeType);
|
||
const position = node.getPosition();
|
||
|
||
const {
|
||
uiVariables,
|
||
panelVariables,
|
||
localVariables,
|
||
...rest
|
||
} = graphData;
|
||
|
||
return {
|
||
id: node.id,
|
||
nodeCode: nodeType,
|
||
nodeType: nodeType,
|
||
nodeName: node.attr('label/text'),
|
||
uiVariables: {
|
||
...uiVariables,
|
||
position: position
|
||
},
|
||
panelVariables,
|
||
localVariables: nodeDefinition?.localVariablesSchema || {}
|
||
};
|
||
});
|
||
|
||
const edges = graph.getEdges().map(edge => {
|
||
const condition = edge.getProp('condition');
|
||
const vertices = edge.getVertices(); // 获取边的顶点信息
|
||
|
||
return {
|
||
id: edge.id,
|
||
from: edge.getSourceCellId(),
|
||
to: edge.getTargetCellId(),
|
||
name: edge.getLabels()?.[0]?.attrs?.label?.text || '',
|
||
config: {
|
||
type: 'sequence',
|
||
condition: condition || undefined
|
||
},
|
||
vertices: vertices // 保存顶点信息
|
||
};
|
||
});
|
||
|
||
// 收集并合并所有节点的 localVariablesSchema
|
||
const allLocalSchemas = nodes
|
||
.map(node => {
|
||
const nodeDefinition = nodeDefinitions.find(def => def.nodeType === node.nodeType);
|
||
return nodeDefinition?.localVariablesSchema;
|
||
})
|
||
.filter(schema => schema); // 过滤掉空值
|
||
const mergedLocalSchema = mergeLocalVariablesSchemas(allLocalSchemas);
|
||
|
||
// 构建保存数据
|
||
const saveData = {
|
||
...definitionData,
|
||
graph: {
|
||
nodes,
|
||
edges
|
||
},
|
||
localVariablesSchema: mergedLocalSchema
|
||
};
|
||
|
||
// 调用保存接口
|
||
await saveDefinition(saveData);
|
||
|
||
message.success('保存成功');
|
||
} catch (error) {
|
||
console.error('保存流程失败:', error);
|
||
message.error('保存流程失败');
|
||
}
|
||
};
|
||
|
||
// 处理条件更新
|
||
const handleConditionUpdate = (condition: EdgeCondition) => {
|
||
if (!selectedEdge) return;
|
||
|
||
// 更新边的属性
|
||
selectedEdge.setProp('condition', condition);
|
||
|
||
// 更新边的标签显示
|
||
const labelText = condition.type === 'EXPRESSION'
|
||
? condition.expression
|
||
: '默认路径';
|
||
|
||
selectedEdge.setLabels([{
|
||
attrs: {
|
||
label: {
|
||
text: labelText,
|
||
fill: '#333',
|
||
fontSize: 12
|
||
},
|
||
rect: {
|
||
fill: '#fff',
|
||
stroke: '#ccc',
|
||
rx: 3,
|
||
ry: 3,
|
||
padding: 5
|
||
}
|
||
},
|
||
position: {
|
||
distance: 0.5,
|
||
offset: 0
|
||
}
|
||
}]);
|
||
|
||
setExpressionModalVisible(false);
|
||
setSelectedEdge(null);
|
||
};
|
||
|
||
return (
|
||
<div className="workflow-design">
|
||
<div className="header">
|
||
<Space>
|
||
<Tooltip title="返回">
|
||
<Button
|
||
className="back-button"
|
||
icon={<ArrowLeftOutlined/>}
|
||
onClick={() => navigate('/workflow/definition')}
|
||
/>
|
||
</Tooltip>
|
||
<span>{title}</span>
|
||
</Space>
|
||
<div className="actions">
|
||
<Space>
|
||
<Space.Compact>
|
||
<Tooltip title="撤销">
|
||
<Button
|
||
icon={<UndoOutlined/>}
|
||
onClick={handleUndo}
|
||
disabled={!(graph as any)?.history?.canUndo()}
|
||
>
|
||
撤销
|
||
</Button>
|
||
</Tooltip>
|
||
<Tooltip title="重做">
|
||
<Button
|
||
icon={<RedoOutlined/>}
|
||
onClick={handleRedo}
|
||
disabled={!(graph as any)?.history?.canRedo()}
|
||
>
|
||
重做
|
||
</Button>
|
||
</Tooltip>
|
||
</Space.Compact>
|
||
<Space.Compact>
|
||
<Tooltip title="剪切">
|
||
<Button
|
||
icon={<ScissorOutlined/>}
|
||
onClick={handleCut}
|
||
/>
|
||
</Tooltip>
|
||
<Tooltip title="复制">
|
||
<Button
|
||
icon={<CopyOutlined/>}
|
||
onClick={handleCopy}
|
||
/>
|
||
</Tooltip>
|
||
<Tooltip title="粘贴">
|
||
<Button
|
||
icon={<SnippetsOutlined/>}
|
||
onClick={handlePaste}
|
||
/>
|
||
</Tooltip>
|
||
</Space.Compact>
|
||
<Space.Compact>
|
||
<Tooltip title="放大">
|
||
<Button
|
||
icon={<ZoomInOutlined/>}
|
||
onClick={handleZoomIn}
|
||
disabled={scale >= 2}
|
||
>
|
||
放大
|
||
</Button>
|
||
</Tooltip>
|
||
<Tooltip title="缩小">
|
||
<Button
|
||
icon={<ZoomOutOutlined/>}
|
||
onClick={handleZoomOut}
|
||
disabled={scale <= 0.2}
|
||
>
|
||
缩小
|
||
</Button>
|
||
</Tooltip>
|
||
</Space.Compact>
|
||
<Space.Compact>
|
||
<Tooltip title="全选">
|
||
<Button
|
||
icon={<SelectOutlined/>}
|
||
onClick={(e) => {
|
||
e.stopPropagation(); // 阻止事件冒泡
|
||
if (!graph) return;
|
||
const cells = graph.getCells();
|
||
if (cells.length === 0) {
|
||
message.info('当前没有可选择的元素');
|
||
return;
|
||
}
|
||
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');
|
||
}
|
||
});
|
||
}}
|
||
/>
|
||
</Tooltip>
|
||
<Tooltip 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);
|
||
}
|
||
});
|
||
}}
|
||
/>
|
||
</Tooltip>
|
||
</Space.Compact>
|
||
<Tooltip title="保存">
|
||
<Button
|
||
type="primary"
|
||
icon={<SaveOutlined/>}
|
||
onClick={handleSaveWorkflow}
|
||
>
|
||
保存
|
||
</Button>
|
||
</Tooltip>
|
||
</Space>
|
||
</div>
|
||
</div>
|
||
<div className="content">
|
||
<div className="sidebar">
|
||
<NodePanel
|
||
nodeDefinitions={nodeDefinitions}
|
||
onNodeDragStart={handleNodeDragStart}
|
||
/>
|
||
</div>
|
||
<div className="main-area">
|
||
<div className="workflow-container">
|
||
<div
|
||
ref={graphContainerRef}
|
||
className="workflow-canvas"
|
||
onDrop={handleDrop}
|
||
onDragOver={handleDragOver}
|
||
/>
|
||
<div ref={minimapContainerRef} className="minimap-container"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{configModalVisible && selectedNode && selectedNodeDefinition && (
|
||
<NodeConfigDrawer
|
||
visible={configModalVisible}
|
||
node={selectedNode}
|
||
nodeDefinition={selectedNodeDefinition}
|
||
onCancel={() => setConfigModalVisible(false)}
|
||
onOk={handleNodeConfigUpdate}
|
||
/>
|
||
)}
|
||
{selectedEdge && (
|
||
<ExpressionModal
|
||
visible={expressionModalVisible}
|
||
edge={selectedEdge}
|
||
onOk={handleConditionUpdate}
|
||
onCancel={() => {
|
||
setExpressionModalVisible(false);
|
||
setSelectedEdge(null);
|
||
}}
|
||
/>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default WorkflowDesign;
|