ai-coding/deploy-ease-platform
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加工具栏提示。

Browse Source
This commit is contained in:
dengqichen 2024-12-06 17:51:10 +08:00
parent 88efe733fe
commit 472c9862c4
2 changed files with 87 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
frontend/src/pages/Workflow/Definition/Designer/index.tsx
View File

@ -530,66 +530,110 @@ const FlowDesigner: React.FC = () => {
// 创建节点
const node = graphRef.current.addNode({
x: position.x - 90, // 节点宽度的一半，使节点中心对准鼠标
y: position.y - 20, // 节点高度的一半，使节点中心对准鼠标
width: 180,
height: 40,
shape: 'rect',
x: position.x - (nodeType.code === 'SHELL' ? 100 : 40), // Shell节点宽度的一半，其他节点40px
y: position.y - 40,
width: nodeType.code === 'SHELL' ? 200 : 80,
height: 80,
shape: nodeType.code === 'GATEWAY' ? 'polygon' : (nodeType.code === 'SHELL' ? 'rect' : 'circle'),
attrs: {
body: {
fill: '#fff',
stroke: nodeType.color,
strokeWidth: 1,
rx: 4,
ry: 4,
fill: nodeType.code === 'START' ? '#f6ffed' :
nodeType.code === 'END' ? '#fff1f0' :
nodeType.code === 'SHELL' ? '#e6f7ff' : '#f9f0ff',
stroke: nodeType.code === 'START' ? '#52c41a' :
nodeType.code === 'END' ? '#ff4d4f' :
nodeType.code === 'SHELL' ? '#1890ff' : '#722ed1',
strokeWidth: 2,
...(nodeType.code === 'SHELL' ? { rx: 4, ry: 4 } : {}),
...(nodeType.code === 'GATEWAY' ? { refPoints: '0,10 10,0 20,10 10,20' } : {})
},
label: {
text: nodeType.name,
fill: '#333',
fill: '#000000',
fontSize: 14,
refX: 0.5,
refY: 0.5,
textAnchor: 'middle',
textVerticalAnchor: 'middle',
fontWeight: 500,
...(nodeType.code === 'SHELL' ? {
refX: 0.5, // 水平居中
refY: 0.5, // 垂直居中
textAnchor: 'middle', // 文本水平居中
textVerticalAnchor: 'middle' // 文本垂直居中
} : {})
},
...(nodeType.code === 'SHELL' ? {
image: {
'xlink:href': 'data:image/svg+xml;base64,PHN2ZyB0PSIxNzAzODQ4NTM1NDY5IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQxNjEiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNMTYwIDI1NnY1MTJoNzA0VjI1NkgxNjB6IG02NDAgNDQ4SDE5MlYyODhoNjA4djQxNnpNMjI0IDQ4MGwxMjgtMTI4IDQ1LjMgNDUuMy04Mi43IDgyLjcgODIuNyA4Mi43TDM1MiA2MDhsLTEyOC0xMjh6IG0yMzEuMSAxOTJsLTQ1LjMtNDUuMyAxNTItMTUyIDQ1LjMgNDUuM2wtMTUyIDE1MnoiIGZpbGw9IiMxODkwZmYiIHAtaWQ9IjQxNjIiPjwvcGF0aD48L3N2Zz4=',
width: 32,
height: 32,
x: 16,
y: 24
}
} : {})
},
ports: {
groups: {
in: {
position: 'left',
top: {
position: 'top',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: '#5F95FF',
strokeWidth: 1,
fill: '#fff',
stroke: nodeType.code === 'START' ? '#52c41a' :
nodeType.code === 'END' ? '#ff4d4f' :
nodeType.code === 'SHELL' ? '#1890ff' : '#722ed1',
strokeWidth: 2,
fill: '#fff'
}
}
},
},
},
out: {
right: {
position: 'right',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: '#5F95FF',
strokeWidth: 1,
fill: '#fff',
},
stroke: nodeType.code === 'START' ? '#52c41a' :
nodeType.code === 'END' ? '#ff4d4f' :
nodeType.code === 'SHELL' ? '#1890ff' : '#722ed1',
strokeWidth: 2,
fill: '#fff'
}
}
},
bottom: {
position: 'bottom',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: nodeType.code === 'START' ? '#52c41a' :
nodeType.code === 'END' ? '#ff4d4f' :
nodeType.code === 'SHELL' ? '#1890ff' : '#722ed1',
strokeWidth: 2,
fill: '#fff'
}
}
},
left: {
position: 'left',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: nodeType.code === 'START' ? '#52c41a' :
nodeType.code === 'END' ? '#ff4d4f' :
nodeType.code === 'SHELL' ? '#1890ff' : '#722ed1',
strokeWidth: 2,
fill: '#fff'
}
}
}
},
items: [
{
id: 'port-in',
group: 'in',
},
{
id: 'port-out',
group: 'out',
},
],
{ group: 'top' },
{ group: 'right' },
{ group: 'bottom' },
{ group: 'left' }
]
},
data: {
type: nodeType.code,
@ -599,10 +643,8 @@ const FlowDesigner: React.FC = () => {
});
// 选中新创建的节点
graphRef.current.getNodes().forEach(n => {
n.setAttrByPath('body/strokeWidth', 1);
});
node.setAttrByPath('body/strokeWidth', 2);
graphRef.current.cleanSelection();
graphRef.current.select(node);
// 打开配置抽屉
setCurrentNode(node);

7
frontend/src/pages/Workflow/Definition/Designer/service.ts
View File

@ -1,11 +1,12 @@
import request from '@/utils/request';
import { NodeCategory } from '../../types';
export interface NodeExecutor {
code: string;
name: string;
description: string;
configSchema: string;
defaultConfig: string | null;
defaultConfig?: string;
}
export interface JsonSchemaProperty {
@ -33,7 +34,7 @@ export interface NodeType {
id: number;
code: string;
name: string;
category: 'BASIC' | 'TASK' | 'EVENT' | 'GATEWAY';
category: NodeCategory;
description: string;
enabled: boolean;
icon: string;
@ -52,7 +53,7 @@ export interface NodeType {
export interface NodeTypeQuery {
enabled?: boolean;
category?: 'BASIC' | 'TASK' | 'EVENT' | 'GATEWAY';
category?: NodeCategory;
}
// 获取节点类型列表