1
This commit is contained in:
dengqichen
parent
aac8069e8c
commit
c6c1c164b4
@ -1,11 +1,10 @@
|
||||
import React, {useEffect, useState, useRef} from 'react';
|
||||
import {createRoot} from 'react-dom/client';
|
||||
import {useParams, useNavigate} from 'react-router-dom';
|
||||
import {Button, Space, Card, Row, Col, message, Modal, Collapse, Tooltip, Dropdown} from 'antd';
|
||||
import {Button, Space, message, Modal, Tooltip, Dropdown} from 'antd';
|
||||
import {
|
||||
ArrowLeftOutlined,
|
||||
SaveOutlined,
|
||||
PlayCircleOutlined,
|
||||
CopyOutlined,
|
||||
DeleteOutlined,
|
||||
UndoOutlined,
|
||||
@ -32,20 +31,12 @@ import {getDefinitionDetail, saveDefinition} from '../service';
|
||||
import {getNodeDefinitionList} from './service';
|
||||
import NodePanel from './components/NodePanel';
|
||||
import NodeConfigDrawer from './components/NodeConfigModal';
|
||||
import {NodeDefinition} from './types';
|
||||
import {validateWorkflow} from './utils/validator';
|
||||
import {addNodeToGraph} from './utils/nodeUtils';
|
||||
import {applyAutoLayout} from './utils/layoutUtils';
|
||||
import {
|
||||
GRID_CONFIG,
|
||||
CONNECTING_CONFIG,
|
||||
HIGHLIGHTING_CONFIG,
|
||||
DEFAULT_STYLES,
|
||||
} from './constants';
|
||||
import './index.less';
|
||||
import {NodeDefinitionResponse, NodeDesignDataResponse} from "@/pages/Workflow/NodeDesign/types";
|
||||
import {NodeDefinitionResponse} from "@/pages/Workflow/NodeDesign/types";
|
||||
import ExpressionModal from './components/ExpressionModal';
|
||||
import { EdgeCondition } from './types';
|
||||
import {EdgeCondition} from './types';
|
||||
|
||||
const WorkflowDesign: React.FC = () => {
|
||||
const {id} = useParams<{ id: string }>();
|
||||
@ -231,7 +222,6 @@ const WorkflowDesign: React.FC = () => {
|
||||
selectNodeOnMoved: false,
|
||||
selectEdgeOnMoved: false,
|
||||
multipleSelectionModifiers: ['ctrl', 'meta'],
|
||||
showEdgeSelectionBox: false,
|
||||
showAnchorSelectionBox: false,
|
||||
pointerEvents: 'auto'
|
||||
});
|
||||
@ -383,7 +373,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
|
||||
e.preventDefault(); // 阻止浏览器默认的全选行为
|
||||
if (!graph) return;
|
||||
|
||||
|
||||
const cells = graph.getCells();
|
||||
if (cells.length > 0) {
|
||||
graph.resetSelection();
|
||||
@ -500,7 +490,6 @@ const WorkflowDesign: React.FC = () => {
|
||||
strokeWidth: 2,
|
||||
stroke: '#52c41a' // 绿色
|
||||
};
|
||||
|
||||
// 保存节点的原始样式
|
||||
const saveNodeOriginalStyle = (node: any) => {
|
||||
const data = node.getData();
|
||||
@ -521,7 +510,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
const data = node.getData();
|
||||
return data?.originalStyle || {
|
||||
stroke: '#5F95FF',
|
||||
strokeWidth: 1
|
||||
strokeWidth: 2
|
||||
};
|
||||
};
|
||||
|
||||
@ -825,7 +814,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
edge.setAttrs({
|
||||
line: {
|
||||
stroke: '#52c41a',
|
||||
strokeWidth: 3,
|
||||
strokeWidth: 2,
|
||||
},
|
||||
});
|
||||
});
|
||||
@ -929,7 +918,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
});
|
||||
|
||||
// 边选中时添加编辑工具
|
||||
graph.on('edge:selected', ({ edge }) => {
|
||||
graph.on('edge:selected', ({edge}) => {
|
||||
edge.addTools([
|
||||
{
|
||||
name: 'vertices', // 顶点工具
|
||||
@ -938,7 +927,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
attrs: {
|
||||
fill: '#fff',
|
||||
stroke: '#5F95FF',
|
||||
strokeWidth: 1,
|
||||
strokeWidth: 2,
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -948,7 +937,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
attrs: {
|
||||
fill: '#fff',
|
||||
stroke: '#5F95FF',
|
||||
strokeWidth: 1,
|
||||
strokeWidth: 2,
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -956,21 +945,22 @@ const WorkflowDesign: React.FC = () => {
|
||||
});
|
||||
|
||||
// 边取消选中时移除工具
|
||||
graph.on('edge:unselected', ({ edge }) => {
|
||||
graph.on('edge:unselected', ({edge}) => {
|
||||
edge.removeTools();
|
||||
});
|
||||
|
||||
// 在 registerEventHandlers 函数中更新选择状态的视觉反馈
|
||||
graph.on('selection:changed', ({ selected, removed }) => {
|
||||
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', 3);
|
||||
cell.setAttrByPath('body/strokeWidth', 2);
|
||||
cell.setAttrByPath('body/strokeDasharray', '5 5');
|
||||
} else if (cell.isEdge()) {
|
||||
cell.setAttrByPath('line/stroke', '#1890ff');
|
||||
cell.setAttrByPath('line/strokeWidth', 3);
|
||||
cell.setAttrByPath('line/strokeWidth', 2);
|
||||
cell.setAttrByPath('line/strokeDasharray', '5 5');
|
||||
}
|
||||
});
|
||||
@ -979,11 +969,11 @@ const WorkflowDesign: React.FC = () => {
|
||||
removed.forEach(cell => {
|
||||
if (cell.isNode()) {
|
||||
cell.setAttrByPath('body/stroke', '#5F95FF');
|
||||
cell.setAttrByPath('body/strokeWidth', 1);
|
||||
cell.setAttrByPath('body/strokeWidth', 2);
|
||||
cell.setAttrByPath('body/strokeDasharray', null);
|
||||
} else if (cell.isEdge()) {
|
||||
cell.setAttrByPath('line/stroke', '#5F95FF');
|
||||
cell.setAttrByPath('line/strokeWidth', 1);
|
||||
cell.setAttrByPath('line/strokeWidth', 2);
|
||||
cell.setAttrByPath('line/strokeDasharray', null);
|
||||
}
|
||||
});
|
||||
@ -1330,8 +1320,8 @@ const WorkflowDesign: React.FC = () => {
|
||||
selectedEdge.setProp('condition', condition);
|
||||
|
||||
// 更新边的标签显示
|
||||
const labelText = condition.type === 'EXPRESSION'
|
||||
? condition.expression
|
||||
const labelText = condition.type === 'EXPRESSION'
|
||||
? condition.expression
|
||||
: '默认路径';
|
||||
|
||||
selectedEdge.setLabels([{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user