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

32
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,18 +31,10 @@ 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';
@ -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'
}); });
@ -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,
}, },
}); });
}); });
@ -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,
} }
} }
} }
@ -962,15 +951,16 @@ const WorkflowDesign: React.FC = () => {
// 在 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);
} }
}); });