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

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

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