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

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

@ -1,11 +1,10 @@
import React, {useEffect, useState, useRef} from 'react'; import React, {useEffect, useState, useRef} from 'react';
import {createRoot} from 'react-dom/client'; import {createRoot} from 'react-dom/client';
import {useParams, useNavigate} from 'react-router-dom'; 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 { import {
ArrowLeftOutlined, ArrowLeftOutlined,
SaveOutlined, SaveOutlined,
PlayCircleOutlined,
CopyOutlined, CopyOutlined,
DeleteOutlined, DeleteOutlined,
UndoOutlined, UndoOutlined,
@ -32,20 +31,12 @@ import {getDefinitionDetail, saveDefinition} from '../service';
import {getNodeDefinitionList} from './service'; import {getNodeDefinitionList} from './service';
import NodePanel from './components/NodePanel'; import NodePanel from './components/NodePanel';
import NodeConfigDrawer from './components/NodeConfigModal'; import NodeConfigDrawer from './components/NodeConfigModal';
import {NodeDefinition} from './types';
import {validateWorkflow} from './utils/validator'; import {validateWorkflow} from './utils/validator';
import {addNodeToGraph} from './utils/nodeUtils'; 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 './index.less';
import {NodeDefinitionResponse, NodeDesignDataResponse} from "@/pages/Workflow/NodeDesign/types"; import {NodeDefinitionResponse} from "@/pages/Workflow/NodeDesign/types";
import ExpressionModal from './components/ExpressionModal'; import ExpressionModal from './components/ExpressionModal';
import { EdgeCondition } from './types'; import {EdgeCondition} from './types';
const WorkflowDesign: React.FC = () => { const WorkflowDesign: React.FC = () => {
const {id} = useParams<{ id: string }>(); const {id} = useParams<{ id: string }>();
@ -231,7 +222,6 @@ const WorkflowDesign: React.FC = () => {
selectNodeOnMoved: false, selectNodeOnMoved: false,
selectEdgeOnMoved: false, selectEdgeOnMoved: false,
multipleSelectionModifiers: ['ctrl', 'meta'], multipleSelectionModifiers: ['ctrl', 'meta'],
showEdgeSelectionBox: false,
showAnchorSelectionBox: false, showAnchorSelectionBox: false,
pointerEvents: 'auto' pointerEvents: 'auto'
}); });
@ -383,7 +373,7 @@ const WorkflowDesign: React.FC = () => {
if ((e.ctrlKey || e.metaKey) && e.key === 'a') { if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
e.preventDefault(); // 阻止浏览器默认的全选行为 e.preventDefault(); // 阻止浏览器默认的全选行为
if (!graph) return; if (!graph) return;
const cells = graph.getCells(); const cells = graph.getCells();
if (cells.length > 0) { if (cells.length > 0) {
graph.resetSelection(); graph.resetSelection();
@ -500,7 +490,6 @@ const WorkflowDesign: React.FC = () => {
strokeWidth: 2, strokeWidth: 2,
stroke: '#52c41a' // 绿色 stroke: '#52c41a' // 绿色
}; };
// 保存节点的原始样式 // 保存节点的原始样式
const saveNodeOriginalStyle = (node: any) => { const saveNodeOriginalStyle = (node: any) => {
const data = node.getData(); const data = node.getData();
@ -521,7 +510,7 @@ const WorkflowDesign: React.FC = () => {
const data = node.getData(); const data = node.getData();
return data?.originalStyle || { return data?.originalStyle || {
stroke: '#5F95FF', stroke: '#5F95FF',
strokeWidth: 1 strokeWidth: 2
}; };
}; };
@ -825,7 +814,7 @@ const WorkflowDesign: React.FC = () => {
edge.setAttrs({ edge.setAttrs({
line: { line: {
stroke: '#52c41a', 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([ edge.addTools([
{ {
name: 'vertices', // 顶点工具 name: 'vertices', // 顶点工具
@ -938,7 +927,7 @@ const WorkflowDesign: React.FC = () => {
attrs: { attrs: {
fill: '#fff', fill: '#fff',
stroke: '#5F95FF', stroke: '#5F95FF',
strokeWidth: 1, strokeWidth: 2,
} }
} }
}, },
@ -948,7 +937,7 @@ const WorkflowDesign: React.FC = () => {
attrs: { attrs: {
fill: '#fff', fill: '#fff',
stroke: '#5F95FF', 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(); edge.removeTools();
}); });
// 在 registerEventHandlers 函数中更新选择状态的视觉反馈 // 在 registerEventHandlers 函数中更新选择状态的视觉反馈
graph.on('selection:changed', ({ selected, removed }) => { graph.on('selection:changed', ({selected, removed}) => {
console.log(selected, removed)
// 处理新选中的元素 // 处理新选中的元素
selected.forEach(cell => { selected.forEach(cell => {
if (cell.isNode()) { if (cell.isNode()) {
cell.setAttrByPath('body/stroke', '#1890ff'); cell.setAttrByPath('body/stroke', '#1890ff');
cell.setAttrByPath('body/strokeWidth', 3); cell.setAttrByPath('body/strokeWidth', 2);
cell.setAttrByPath('body/strokeDasharray', '5 5'); cell.setAttrByPath('body/strokeDasharray', '5 5');
} else if (cell.isEdge()) { } else if (cell.isEdge()) {
cell.setAttrByPath('line/stroke', '#1890ff'); cell.setAttrByPath('line/stroke', '#1890ff');
cell.setAttrByPath('line/strokeWidth', 3); cell.setAttrByPath('line/strokeWidth', 2);
cell.setAttrByPath('line/strokeDasharray', '5 5'); cell.setAttrByPath('line/strokeDasharray', '5 5');
} }
}); });
@ -979,11 +969,11 @@ const WorkflowDesign: React.FC = () => {
removed.forEach(cell => { removed.forEach(cell => {
if (cell.isNode()) { if (cell.isNode()) {
cell.setAttrByPath('body/stroke', '#5F95FF'); cell.setAttrByPath('body/stroke', '#5F95FF');
cell.setAttrByPath('body/strokeWidth', 1); cell.setAttrByPath('body/strokeWidth', 2);
cell.setAttrByPath('body/strokeDasharray', null); cell.setAttrByPath('body/strokeDasharray', null);
} else if (cell.isEdge()) { } else if (cell.isEdge()) {
cell.setAttrByPath('line/stroke', '#5F95FF'); cell.setAttrByPath('line/stroke', '#5F95FF');
cell.setAttrByPath('line/strokeWidth', 1); cell.setAttrByPath('line/strokeWidth', 2);
cell.setAttrByPath('line/strokeDasharray', null); cell.setAttrByPath('line/strokeDasharray', null);
} }
}); });
@ -1330,8 +1320,8 @@ const WorkflowDesign: React.FC = () => {
selectedEdge.setProp('condition', condition); selectedEdge.setProp('condition', condition);
// 更新边的标签显示 // 更新边的标签显示
const labelText = condition.type === 'EXPRESSION' const labelText = condition.type === 'EXPRESSION'
? condition.expression ? condition.expression
: '默认路径'; : '默认路径';
selectedEdge.setLabels([{ selectedEdge.setLabels([{