922 lines
30 KiB
TypeScript
922 lines
30 KiB
TypeScript
import React, {useEffect, useRef, useState} from 'react';
|
||
import {useNavigate, useParams} from 'react-router-dom';
|
||
import {Button, Card, Layout, message, Space, Spin, Drawer, Form, Dropdown} from 'antd';
|
||
import {ArrowLeftOutlined, SaveOutlined} from '@ant-design/icons';
|
||
import {getDefinition, updateDefinition} from '../../service';
|
||
import {WorkflowDefinition, WorkflowStatus} from '../../../Workflow/types';
|
||
import {Graph, Node, Cell, Edge, Shape} from '@antv/x6';
|
||
import '@antv/x6-react-shape';
|
||
import {Selection} from '@antv/x6-plugin-selection';
|
||
import {History} from '@antv/x6-plugin-history';
|
||
import {Clipboard} from '@antv/x6-plugin-clipboard';
|
||
import {Transform} from '@antv/x6-plugin-transform';
|
||
import {Keyboard} from '@antv/x6-plugin-keyboard';
|
||
import {Snapline} from '@antv/x6-plugin-snapline';
|
||
import {MiniMap} from '@antv/x6-plugin-minimap';
|
||
import './index.module.less';
|
||
import NodePanel from './components/NodePanel';
|
||
import NodeConfig from './components/NodeConfig';
|
||
import Toolbar from './components/Toolbar';
|
||
import {NodeType, getNodeTypes} from './service';
|
||
import {DeleteOutlined, CopyOutlined, SettingOutlined, ClearOutlined, FullscreenOutlined} from '@ant-design/icons';
|
||
import EdgeConfig from './components/EdgeConfig';
|
||
import { validateFlow, hasCycle } from './validate';
|
||
import { generateNodeStyle, generatePorts, calculateNodePosition, calculateCanvasPosition } from './utils/nodeUtils';
|
||
import { Position } from './types';
|
||
import { NODE_CONFIG } from './configs/nodeConfig';
|
||
import { isWorkflowError } from './utils/errors';
|
||
|
||
const {Sider, Content} = Layout;
|
||
|
||
interface NodeData {
|
||
type: string;
|
||
name?: string;
|
||
description?: string;
|
||
config: {
|
||
executor?: string;
|
||
retryTimes?: number;
|
||
retryInterval?: number;
|
||
script?: string;
|
||
timeout?: number;
|
||
workingDirectory?: string;
|
||
environment?: string;
|
||
successExitCode?: string;
|
||
[key: string]: any;
|
||
};
|
||
}
|
||
|
||
const FlowDesigner: React.FC = () => {
|
||
const navigate = useNavigate();
|
||
const {id} = useParams<{ id: string }>();
|
||
const [loading, setLoading] = useState(false);
|
||
const [detail, setDetail] = useState<WorkflowDefinition>();
|
||
const containerRef = useRef<HTMLDivElement>(null);
|
||
const graphRef = useRef<Graph>();
|
||
const [graph, setGraph] = useState<Graph>();
|
||
const draggedNodeRef = useRef<NodeType>();
|
||
const [configVisible, setConfigVisible] = useState(false);
|
||
const [currentNode, setCurrentNode] = useState<Node>();
|
||
const [currentNodeType, setCurrentNodeType] = useState<NodeType>();
|
||
const [nodeTypes, setNodeTypes] = useState<NodeType[]>([]);
|
||
const [form] = Form.useForm();
|
||
const [currentEdge, setCurrentEdge] = useState<Edge>();
|
||
const [edgeConfigVisible, setEdgeConfigVisible] = useState(false);
|
||
const [edgeForm] = Form.useForm();
|
||
|
||
// 右键菜单状态
|
||
const [contextMenu, setContextMenu] = useState<{
|
||
x: number;
|
||
y: number;
|
||
visible: boolean;
|
||
type: 'node' | 'edge' | 'canvas';
|
||
cell?: Cell;
|
||
}>({
|
||
x: 0,
|
||
y: 0,
|
||
visible: false,
|
||
type: 'canvas',
|
||
});
|
||
|
||
// 右键菜单项
|
||
const menuItems = {
|
||
node: [
|
||
{
|
||
key: 'delete',
|
||
label: '删除节点',
|
||
icon: <DeleteOutlined />,
|
||
onClick: () => {
|
||
if (contextMenu.cell) {
|
||
contextMenu.cell.remove();
|
||
}
|
||
setContextMenu(prev => ({ ...prev, visible: false }));
|
||
},
|
||
},
|
||
{
|
||
key: 'copy',
|
||
label: '复制节点',
|
||
icon: <CopyOutlined />,
|
||
onClick: () => {
|
||
if (contextMenu.cell && contextMenu.cell.isNode()) {
|
||
const pos = contextMenu.cell.position();
|
||
const newCell = contextMenu.cell.clone();
|
||
newCell.position(pos.x + 20, pos.y + 20);
|
||
graph?.addCell(newCell);
|
||
}
|
||
setContextMenu(prev => ({ ...prev, visible: false }));
|
||
},
|
||
},
|
||
{
|
||
key: 'config',
|
||
label: '配置节点',
|
||
icon: <SettingOutlined />,
|
||
onClick: () => {
|
||
if (contextMenu.cell && contextMenu.cell.isNode()) {
|
||
setCurrentNode(contextMenu.cell);
|
||
const data = contextMenu.cell.getData() as NodeData;
|
||
const nodeType = nodeTypes.find(type => type.code === data.type);
|
||
if (nodeType) {
|
||
setCurrentNodeType(nodeType);
|
||
const formValues = {
|
||
name: data.name || nodeType.name,
|
||
description: data.description,
|
||
...data.config
|
||
};
|
||
form.setFieldsValue(formValues);
|
||
}
|
||
setConfigVisible(true);
|
||
}
|
||
setContextMenu(prev => ({ ...prev, visible: false }));
|
||
},
|
||
},
|
||
],
|
||
edge: [
|
||
{
|
||
key: 'config',
|
||
label: '配置连线',
|
||
icon: <SettingOutlined />,
|
||
onClick: () => {
|
||
if (contextMenu.cell && contextMenu.cell.isEdge()) {
|
||
handleEdgeConfig(contextMenu.cell);
|
||
}
|
||
setContextMenu(prev => ({ ...prev, visible: false }));
|
||
},
|
||
},
|
||
{
|
||
key: 'delete',
|
||
label: '删除连线',
|
||
icon: <DeleteOutlined />,
|
||
onClick: () => {
|
||
if (contextMenu.cell) {
|
||
contextMenu.cell.remove();
|
||
}
|
||
setContextMenu(prev => ({ ...prev, visible: false }));
|
||
},
|
||
},
|
||
],
|
||
canvas: [
|
||
{
|
||
key: 'clear',
|
||
label: '清空画布',
|
||
icon: <ClearOutlined />,
|
||
onClick: () => {
|
||
graph?.clearCells();
|
||
setContextMenu(prev => ({ ...prev, visible: false }));
|
||
},
|
||
},
|
||
{
|
||
key: 'fit',
|
||
label: '适应画布',
|
||
icon: <FullscreenOutlined />,
|
||
onClick: () => {
|
||
graph?.zoomToFit({ padding: 20 });
|
||
setContextMenu(prev => ({ ...prev, visible: false }));
|
||
},
|
||
},
|
||
],
|
||
};
|
||
|
||
// 获取所有节点类型
|
||
const fetchNodeTypes = async () => {
|
||
try {
|
||
const types = await getNodeTypes({enabled: true});
|
||
setNodeTypes(types);
|
||
return types;
|
||
} catch (error) {
|
||
console.error('获取节点类型失败:', error);
|
||
message.error('获取节点类型失败');
|
||
return [];
|
||
}
|
||
};
|
||
|
||
// 首次加载获取节点类型
|
||
useEffect(() => {
|
||
fetchNodeTypes();
|
||
}, []);
|
||
|
||
// 初始化图形
|
||
const initGraph = () => {
|
||
if (!containerRef.current) return;
|
||
|
||
const graph = new Graph({
|
||
container: containerRef.current,
|
||
grid: {
|
||
visible: true,
|
||
type: 'mesh',
|
||
size: 10,
|
||
args: {
|
||
color: '#e5e5e5',
|
||
thickness: 1,
|
||
},
|
||
},
|
||
mousewheel: {
|
||
enabled: true,
|
||
modifiers: ['ctrl', 'meta'],
|
||
minScale: 0.5,
|
||
maxScale: 2,
|
||
},
|
||
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;
|
||
}
|
||
return true;
|
||
},
|
||
},
|
||
defaultEdge: {
|
||
attrs: {
|
||
line: {
|
||
stroke: '#5F95FF',
|
||
strokeWidth: 1,
|
||
targetMarker: {
|
||
name: 'classic',
|
||
size: 8,
|
||
},
|
||
},
|
||
},
|
||
router: {
|
||
name: 'manhattan',
|
||
args: {
|
||
padding: 1,
|
||
},
|
||
},
|
||
connector: {
|
||
name: 'rounded',
|
||
args: {
|
||
radius: 8,
|
||
},
|
||
},
|
||
labels: [
|
||
{
|
||
attrs: {
|
||
label: {
|
||
text: '',
|
||
fill: '#333',
|
||
fontSize: 12,
|
||
},
|
||
rect: {
|
||
fill: '#fff',
|
||
stroke: '#5F95FF',
|
||
strokeWidth: 1,
|
||
rx: 3,
|
||
ry: 3,
|
||
refWidth: 1,
|
||
refHeight: 1,
|
||
refX: 0,
|
||
refY: 0,
|
||
},
|
||
},
|
||
position: {
|
||
distance: 0.5,
|
||
offset: {
|
||
x: 0,
|
||
y: -10,
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
highlighting: {
|
||
magnetAvailable: {
|
||
name: 'stroke',
|
||
args: {
|
||
padding: 4,
|
||
attrs: {
|
||
strokeWidth: 4,
|
||
stroke: '#52c41a',
|
||
},
|
||
},
|
||
},
|
||
magnetAdsorbed: {
|
||
name: 'stroke',
|
||
args: {
|
||
padding: 4,
|
||
attrs: {
|
||
strokeWidth: 4,
|
||
stroke: '#1890ff',
|
||
},
|
||
},
|
||
},
|
||
},
|
||
keyboard: {
|
||
enabled: true,
|
||
},
|
||
clipboard: {
|
||
enabled: true,
|
||
},
|
||
history: {
|
||
enabled: true,
|
||
},
|
||
snapline: {
|
||
enabled: true,
|
||
},
|
||
translating: {
|
||
restrict: true,
|
||
},
|
||
background: {
|
||
color: '#ffffff', // 画布背景色
|
||
},
|
||
});
|
||
|
||
// 启用必要的功能
|
||
graph.use(
|
||
new Selection({
|
||
enabled: true,
|
||
multiple: true,
|
||
rubberband: true,
|
||
rubberEdge: true,
|
||
movable: true,
|
||
showNodeSelectionBox: true,
|
||
showEdgeSelectionBox: true,
|
||
selectCellOnMoved: false,
|
||
selectEdgeOnMoved: false,
|
||
selectNodeOnMoved: false,
|
||
className: 'node-selected',
|
||
strict: true,
|
||
})
|
||
);
|
||
|
||
graph.use(
|
||
new History({
|
||
enabled: true,
|
||
beforeAddCommand: (event: string, args: any) => {
|
||
if (event === 'cell:change:*') {
|
||
return true;
|
||
}
|
||
return true;
|
||
},
|
||
})
|
||
);
|
||
|
||
graph.use(
|
||
new Clipboard({
|
||
enabled: true,
|
||
})
|
||
);
|
||
|
||
graph.use(
|
||
new Transform({
|
||
resizing: {
|
||
enabled: true,
|
||
minWidth: 1,
|
||
minHeight: 1,
|
||
orthogonal: true,
|
||
restricted: true,
|
||
},
|
||
rotating: {
|
||
enabled: true,
|
||
grid: 15,
|
||
},
|
||
})
|
||
);
|
||
|
||
graph.use(
|
||
new Keyboard({
|
||
enabled: true,
|
||
})
|
||
);
|
||
|
||
graph.use(
|
||
new Snapline({
|
||
enabled: true,
|
||
})
|
||
);
|
||
|
||
// 启用小地图
|
||
graph.use(
|
||
new MiniMap({
|
||
container: document.getElementById('workflow-minimap'),
|
||
width: 200,
|
||
height: 150,
|
||
padding: 10,
|
||
scalable: false,
|
||
minScale: 0.5,
|
||
maxScale: 2,
|
||
graphOptions: {
|
||
async: true,
|
||
// 简化节点渲染
|
||
grid: false,
|
||
background: {
|
||
color: '#f5f5f5',
|
||
},
|
||
},
|
||
})
|
||
);
|
||
|
||
// 绑定右键菜单事件
|
||
graph.on('cell:contextmenu', ({ cell, e }) => {
|
||
e.preventDefault();
|
||
setContextMenu({
|
||
x: e.clientX,
|
||
y: e.clientY,
|
||
visible: true,
|
||
type: cell.isNode() ? 'node' : 'edge',
|
||
cell,
|
||
});
|
||
});
|
||
|
||
graph.on('blank:contextmenu', ({ e }) => {
|
||
e.preventDefault();
|
||
setContextMenu({
|
||
x: e.clientX,
|
||
y: e.clientY,
|
||
visible: true,
|
||
type: 'canvas',
|
||
});
|
||
});
|
||
|
||
// 点击画布时隐藏右键菜单
|
||
graph.on('blank:click', () => {
|
||
setContextMenu(prev => ({ ...prev, visible: false }));
|
||
});
|
||
|
||
// 点击节点时隐藏右键菜单
|
||
graph.on('cell:click', () => {
|
||
setContextMenu(prev => ({ ...prev, visible: false }));
|
||
});
|
||
|
||
graphRef.current = graph;
|
||
setGraph(graph);
|
||
|
||
// 加载流程图数据
|
||
if (detail) {
|
||
loadGraphData(graph, detail);
|
||
}
|
||
|
||
// 监听画布拖拽事件
|
||
containerRef.current.addEventListener('dragover', handleDragOver);
|
||
containerRef.current.addEventListener('drop', handleDrop);
|
||
|
||
// 监听节点点击事件
|
||
graph.on('node:click', ({node}: { node: Node }) => {
|
||
setCurrentNode(node);
|
||
const data = node.getData() as NodeData;
|
||
console.log('Node clicked, data:', data);
|
||
|
||
if (data) {
|
||
// 获取节点类型
|
||
const nodeType = nodeTypes.find(type => type.code === data.type);
|
||
if (nodeType) {
|
||
setCurrentNodeType(nodeType);
|
||
|
||
// 合并节点基本配置和执器配置
|
||
const formValues = {
|
||
name: data.name || nodeType.name,
|
||
description: data.description,
|
||
...data.config // 直接展开所有配置
|
||
};
|
||
|
||
console.log('Setting form values:', formValues);
|
||
form.setFieldsValue(formValues);
|
||
setConfigVisible(true);
|
||
} else {
|
||
message.error('未找到对应的节点类型');
|
||
}
|
||
}
|
||
});
|
||
|
||
// 监听选择状态变化
|
||
graph.on('selection:changed', () => {
|
||
// 强制更新工具栏状态
|
||
setGraph(graph);
|
||
});
|
||
};
|
||
|
||
// 处理拖拽移动
|
||
const handleDragOver = (e: DragEvent) => {
|
||
e.preventDefault();
|
||
e.dataTransfer!.dropEffect = 'copy';
|
||
};
|
||
|
||
// 处理拖拽放置
|
||
const handleDrop = (e: DragEvent) => {
|
||
e.preventDefault();
|
||
const nodeType = draggedNodeRef.current;
|
||
if (!nodeType || !graphRef.current || !containerRef.current) {
|
||
message.error('无效的节点类型或画布未初始化');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const rect = containerRef.current.getBoundingClientRect();
|
||
const matrix = graphRef.current.matrix();
|
||
|
||
// 使用新的工具函数计算画布位置
|
||
const dropPosition = calculateCanvasPosition(
|
||
e.clientX,
|
||
e.clientY,
|
||
rect,
|
||
{
|
||
scale: matrix.a,
|
||
offsetX: matrix.e,
|
||
offsetY: matrix.f,
|
||
}
|
||
);
|
||
|
||
// 获取节点配置
|
||
const position = calculateNodePosition(nodeType.code, dropPosition);
|
||
const nodeStyle = generateNodeStyle(nodeType.code);
|
||
const ports = generatePorts(nodeType.code);
|
||
const config = NODE_CONFIG[nodeType.code];
|
||
|
||
if (!config) {
|
||
throw new Error(`未找到节点类型 ${nodeType.code} 的配置`);
|
||
}
|
||
|
||
// 创建节点
|
||
const node = graphRef.current.addNode({
|
||
...position,
|
||
...nodeStyle,
|
||
ports,
|
||
data: {
|
||
type: nodeType.code,
|
||
name: config.label, // 使用配置中的中文名称
|
||
config: {} as any,
|
||
},
|
||
});
|
||
|
||
// 选中新创建的节点并打开配置
|
||
graphRef.current.cleanSelection();
|
||
graphRef.current.select(node);
|
||
setCurrentNode(node);
|
||
setCurrentNodeType(nodeType);
|
||
form.setFieldsValue({ name: config.label }); // 使用配置中的中文名称
|
||
setConfigVisible(true);
|
||
|
||
message.success('节点创建成功');
|
||
} catch (error) {
|
||
console.error('Error creating node:', error);
|
||
|
||
if (isWorkflowError(error)) {
|
||
message.error(`创建节点失败：${error.message}`);
|
||
} else {
|
||
message.error('创建节点失败：未知错误');
|
||
}
|
||
|
||
// 清理状态
|
||
setCurrentNode(undefined);
|
||
setCurrentNodeType(undefined);
|
||
setConfigVisible(false);
|
||
}
|
||
};
|
||
|
||
// 验证Shell节点配置
|
||
function validateShellConfig(config: any): boolean {
|
||
if (!config.script?.trim()) {
|
||
throw new Error('脚本内容不能为空');
|
||
}
|
||
if (config.timeout !== undefined && config.timeout <= 0) {
|
||
throw new Error('超时时间必须大于0');
|
||
}
|
||
if (config.retryTimes !== undefined && config.retryTimes < 0) {
|
||
throw new Error('重试次数不能为负数');
|
||
}
|
||
if (config.retryInterval !== undefined && config.retryInterval < 0) {
|
||
throw new Error('重试间不能为负数');
|
||
}
|
||
return true;
|
||
}
|
||
|
||
// 处理配置保存
|
||
const handleConfigSave = async () => {
|
||
try {
|
||
const values = await form.validateFields();
|
||
if (currentNode) {
|
||
const data = currentNode.getData() as NodeData;
|
||
const {name, description, ...config} = values;
|
||
|
||
// 如果是Shell节点，验证配置
|
||
if (data.type === 'SHELL' && config.executor === 'SHELL') {
|
||
validateShellConfig(config);
|
||
}
|
||
|
||
// 更新节点数据
|
||
currentNode.setData({
|
||
...data,
|
||
name,
|
||
description,
|
||
config,
|
||
});
|
||
|
||
// 更新节点标签
|
||
currentNode.setAttrByPath('label/text', name);
|
||
|
||
message.success('配置保存成功');
|
||
setConfigVisible(false);
|
||
}
|
||
} catch (error) {
|
||
// 表单验证失败或Shell配置验证失败
|
||
message.error((error as Error).message);
|
||
}
|
||
};
|
||
|
||
// 获取详情
|
||
const fetchDetail = async () => {
|
||
if (!id) return;
|
||
setLoading(true);
|
||
try {
|
||
const response = await getDefinition(parseInt(id));
|
||
if (response) {
|
||
setDetail(response);
|
||
}
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
// 处理保存
|
||
const handleSave = async () => {
|
||
if (!id || !detail || !graphRef.current || detail.status !== WorkflowStatus.DRAFT) return;
|
||
|
||
try {
|
||
// 验证流程
|
||
const result = validateFlow(graphRef.current);
|
||
const hasCycleResult = hasCycle(graphRef.current);
|
||
|
||
if (hasCycleResult) {
|
||
message.error('流程图中存在循环，请检查');
|
||
return;
|
||
}
|
||
|
||
if (!result.valid) {
|
||
message.error(result.errors.join('\n'));
|
||
return;
|
||
}
|
||
|
||
const graphData = graphRef.current.toJSON();
|
||
|
||
// 收集节点配置数据
|
||
const nodes = graphRef.current.getNodes().map(node => {
|
||
const data = node.getData() as NodeData;
|
||
return {
|
||
id: node.id,
|
||
type: data.type,
|
||
name: data.name || '',
|
||
description: data.description,
|
||
config: data.config || {}
|
||
};
|
||
});
|
||
|
||
// 收集连线配置数据
|
||
const transitions = graphRef.current.getEdges().map(edge => {
|
||
const data = edge.getData() || {};
|
||
return {
|
||
from: edge.getSourceCellId(),
|
||
to: edge.getTargetCellId(),
|
||
condition: data.condition || '',
|
||
description: data.description || '',
|
||
priority: data.priority || 0
|
||
};
|
||
});
|
||
|
||
// 构建更新数据
|
||
const data = {
|
||
...detail,
|
||
graphDefinition: JSON.stringify(graphData),
|
||
nodeConfig: JSON.stringify({nodes}),
|
||
transitionConfig: JSON.stringify({transitions})
|
||
};
|
||
|
||
await updateDefinition(parseInt(id), data);
|
||
message.success('保存成功');
|
||
} catch (error) {
|
||
message.error('保存失败');
|
||
console.error('保存失败:', error);
|
||
}
|
||
};
|
||
|
||
// 处理返回
|
||
const handleBack = () => {
|
||
navigate('/workflow/definition');
|
||
};
|
||
|
||
// 首次加载
|
||
useEffect(() => {
|
||
fetchDetail();
|
||
}, [id]);
|
||
|
||
// 初始化图形
|
||
useEffect(() => {
|
||
if (detail && containerRef.current) {
|
||
initGraph();
|
||
}
|
||
// 清理事件监听
|
||
return () => {
|
||
if (containerRef.current) {
|
||
containerRef.current.removeEventListener('dragover', handleDragOver);
|
||
containerRef.current.removeEventListener('drop', handleDrop);
|
||
}
|
||
if (graphRef.current) {
|
||
graphRef.current.dispose();
|
||
}
|
||
};
|
||
}, [detail, containerRef.current]);
|
||
|
||
useEffect(() => {
|
||
if (!containerRef.current) return;
|
||
|
||
const resizeObserver = new ResizeObserver(() => {
|
||
if (graphRef.current) {
|
||
const container = containerRef.current;
|
||
if (container) {
|
||
const { width, height } = container.getBoundingClientRect();
|
||
graphRef.current.resize(width, height);
|
||
}
|
||
}
|
||
});
|
||
|
||
resizeObserver.observe(containerRef.current);
|
||
|
||
return () => {
|
||
resizeObserver.disconnect();
|
||
};
|
||
}, []);
|
||
|
||
// 处理节点拖拽开始
|
||
const handleNodeDragStart = (nodeType: NodeType) => {
|
||
draggedNodeRef.current = nodeType;
|
||
};
|
||
|
||
// 加载流程图数据
|
||
const loadGraphData = (graph: Graph, detail: WorkflowDefinition) => {
|
||
try {
|
||
// 加载图数据
|
||
const graphData = JSON.parse(detail.graphDefinition);
|
||
graph.fromJSON(graphData);
|
||
|
||
// 加载节点配置数据
|
||
if (detail.nodeConfig) {
|
||
const nodeConfigData = JSON.parse(detail.nodeConfig);
|
||
// 更新节点数据和显示
|
||
graph.getNodes().forEach(node => {
|
||
const nodeConfig = nodeConfigData.nodes.find((n: any) => n.id === node.id);
|
||
if (nodeConfig) {
|
||
console.log('Node config found:', nodeConfig.config);
|
||
const nodeData = {
|
||
type: nodeConfig.type,
|
||
name: nodeConfig.name,
|
||
description: nodeConfig.description,
|
||
config: nodeConfig.config
|
||
};
|
||
console.log('Setting node data:', nodeData);
|
||
node.setData(nodeData);
|
||
node.setAttrByPath('label/text', nodeConfig.name);
|
||
}
|
||
});
|
||
}
|
||
} catch (error) {
|
||
message.error('加载流程图数据失败');
|
||
console.error('加载流程图数据失败:', error);
|
||
}
|
||
};
|
||
|
||
// 添加连线配置处理函数
|
||
const handleEdgeConfig = (edge: Edge) => {
|
||
setCurrentEdge(edge);
|
||
const data = edge.getData() || {};
|
||
edgeForm.setFieldsValue(data);
|
||
setEdgeConfigVisible(true);
|
||
};
|
||
|
||
// 添加连线配置保存函数
|
||
const handleEdgeConfigSubmit = async () => {
|
||
if (!currentEdge) return;
|
||
|
||
try {
|
||
const values = await edgeForm.validateFields();
|
||
currentEdge.setData(values);
|
||
|
||
// 更新连线标签
|
||
if (values.description) {
|
||
currentEdge.setLabelAt(0, values.description);
|
||
}
|
||
|
||
setEdgeConfigVisible(false);
|
||
} catch (error) {
|
||
// 表单验证失败
|
||
}
|
||
};
|
||
|
||
if (loading) {
|
||
return (
|
||
<div style={{textAlign: 'center', padding: 100}}>
|
||
<Spin size="large"/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<Card
|
||
title={
|
||
<div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
|
||
<Space>
|
||
<Button type="primary" icon={<SaveOutlined/>} onClick={handleSave}>保存</Button>
|
||
<Button icon={<ArrowLeftOutlined/>} onClick={() => navigate(-1)}>返回</Button>
|
||
</Space>
|
||
</div>
|
||
}
|
||
className="workflow-designer"
|
||
>
|
||
<Layout>
|
||
<Sider width={250} className="workflow-designer-sider">
|
||
<NodePanel onNodeDragStart={handleNodeDragStart}/>
|
||
</Sider>
|
||
<Layout>
|
||
<Toolbar graph={graph}/>
|
||
<Content className="workflow-designer-content">
|
||
<div ref={containerRef} className="workflow-designer-graph"/>
|
||
<div id="workflow-minimap" className="workflow-designer-minimap"/>
|
||
<Dropdown
|
||
menu={{
|
||
items: menuItems[contextMenu.type],
|
||
onClick: ({ key, domEvent }) => {
|
||
domEvent.stopPropagation();
|
||
},
|
||
}}
|
||
open={contextMenu.visible}
|
||
trigger={['contextMenu']}
|
||
>
|
||
<div
|
||
style={{
|
||
position: 'fixed',
|
||
left: contextMenu.x,
|
||
top: contextMenu.y,
|
||
width: 1,
|
||
height: 1,
|
||
}}
|
||
/>
|
||
</Dropdown>
|
||
</Content>
|
||
</Layout>
|
||
</Layout>
|
||
|
||
<Drawer
|
||
title="节点配置"
|
||
width={400}
|
||
open={configVisible}
|
||
onClose={() => setConfigVisible(false)}
|
||
extra={
|
||
<Space>
|
||
<Button onClick={() => setConfigVisible(false)}>取消</Button>
|
||
<Button type="primary" onClick={handleConfigSave}>
|
||
确定
|
||
</Button>
|
||
</Space>
|
||
}
|
||
>
|
||
{currentNodeType && (
|
||
<NodeConfig nodeType={currentNodeType} form={form}/>
|
||
)}
|
||
</Drawer>
|
||
|
||
<Drawer
|
||
title="连线配置"
|
||
placement="right"
|
||
width={400}
|
||
onClose={() => setEdgeConfigVisible(false)}
|
||
open={edgeConfigVisible}
|
||
extra={
|
||
<Space>
|
||
<Button onClick={() => setEdgeConfigVisible(false)}>取消</Button>
|
||
<Button type="primary" onClick={handleEdgeConfigSubmit}>
|
||
确定
|
||
</Button>
|
||
</Space>
|
||
}
|
||
>
|
||
{currentEdge && (
|
||
<EdgeConfig
|
||
edge={currentEdge}
|
||
form={edgeForm}
|
||
onValuesChange={(changedValues, allValues) => {
|
||
if (changedValues.description) {
|
||
currentEdge.setLabelAt(0, changedValues.description);
|
||
}
|
||
}}
|
||
/>
|
||
)}
|
||
</Drawer>
|
||
</Card>
|
||
);
|
||
};
|
||
|
||
export default FlowDesigner;
|