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-25 11:05:18 +08:00
parent aac8069e8c
commit c6c1c164b4
1 changed files with 18 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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'
});
@ -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);
}
});