1
This commit is contained in:
parent
547e5abed5
commit
63e6fbe2c3
@ -12,16 +12,6 @@ export const DEFAULT_STYLES = {
|
|||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
fill: '#000000',
|
fill: '#000000',
|
||||||
},
|
},
|
||||||
port: {
|
|
||||||
r: 4,
|
|
||||||
magnet: true,
|
|
||||||
stroke: '#5F95FF',
|
|
||||||
strokeWidth: 1,
|
|
||||||
fill: '#fff',
|
|
||||||
style: {
|
|
||||||
visibility: 'hidden',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
edge: {
|
edge: {
|
||||||
stroke: '#1890ff',
|
stroke: '#1890ff',
|
||||||
strokeWidth: 2,
|
strokeWidth: 2,
|
||||||
@ -48,26 +38,6 @@ export const NODE_SIZES = {
|
|||||||
},
|
},
|
||||||
} as const;
|
} as const;
|
||||||
|
|
||||||
// 生成端口组配置
|
|
||||||
export const generatePortGroups = () => {
|
|
||||||
const groups: Record<string, any> = {};
|
|
||||||
|
|
||||||
PORT_GROUPS.forEach(position => {
|
|
||||||
groups[position] = {
|
|
||||||
position,
|
|
||||||
attrs: {
|
|
||||||
circle: { ...DEFAULT_STYLES.port },
|
|
||||||
},
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
return groups;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 生成端口项配置
|
|
||||||
export const generatePortItems = () =>
|
|
||||||
PORT_GROUPS.map(group => ({ group }));
|
|
||||||
|
|
||||||
// 网格配置
|
// 网格配置
|
||||||
export const GRID_CONFIG = {
|
export const GRID_CONFIG = {
|
||||||
size: 10,
|
size: 10,
|
||||||
@ -118,10 +88,6 @@ export const NODE_REGISTRY_CONFIG = {
|
|||||||
body: DEFAULT_STYLES.node,
|
body: DEFAULT_STYLES.node,
|
||||||
label: DEFAULT_STYLES.label,
|
label: DEFAULT_STYLES.label,
|
||||||
},
|
},
|
||||||
ports: {
|
|
||||||
groups: generatePortGroups(),
|
|
||||||
items: generatePortItems(),
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
rectangle: {
|
rectangle: {
|
||||||
inherit: 'rect',
|
inherit: 'rect',
|
||||||
@ -131,10 +97,6 @@ export const NODE_REGISTRY_CONFIG = {
|
|||||||
body: DEFAULT_STYLES.node,
|
body: DEFAULT_STYLES.node,
|
||||||
label: DEFAULT_STYLES.label,
|
label: DEFAULT_STYLES.label,
|
||||||
},
|
},
|
||||||
ports: {
|
|
||||||
groups: generatePortGroups(),
|
|
||||||
items: generatePortItems(),
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
diamond: {
|
diamond: {
|
||||||
inherit: 'polygon',
|
inherit: 'polygon',
|
||||||
@ -147,9 +109,5 @@ export const NODE_REGISTRY_CONFIG = {
|
|||||||
},
|
},
|
||||||
label: DEFAULT_STYLES.label,
|
label: DEFAULT_STYLES.label,
|
||||||
},
|
},
|
||||||
ports: {
|
|
||||||
groups: generatePortGroups(),
|
|
||||||
items: generatePortItems(),
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
} as const;
|
} as const;
|
||||||
|
|||||||
@ -13,7 +13,7 @@ import {
|
|||||||
GRID_CONFIG,
|
GRID_CONFIG,
|
||||||
CONNECTING_CONFIG,
|
CONNECTING_CONFIG,
|
||||||
HIGHLIGHTING_CONFIG,
|
HIGHLIGHTING_CONFIG,
|
||||||
DEFAULT_STYLES, generatePortGroups, generatePortItems,
|
DEFAULT_STYLES
|
||||||
} from './constants';
|
} from './constants';
|
||||||
|
|
||||||
const WorkflowDesign: React.FC = () => {
|
const WorkflowDesign: React.FC = () => {
|
||||||
@ -96,22 +96,21 @@ const WorkflowDesign: React.FC = () => {
|
|||||||
response.graph.nodes.forEach((nodeData: any) => {
|
response.graph.nodes.forEach((nodeData: any) => {
|
||||||
// 根据节点类型动态注册
|
// 根据节点类型动态注册
|
||||||
const nodeConfig = {
|
const nodeConfig = {
|
||||||
inherit: 'rect', // 使用基础的矩形节点作为默认继承
|
inherit: nodeData.graph.shape === 'circle' ? 'circle' :
|
||||||
|
nodeData.graph.shape === 'polygon' ? 'polygon' : 'rect',
|
||||||
width: nodeData.graph.size.width,
|
width: nodeData.graph.size.width,
|
||||||
height: nodeData.graph.size.height,
|
height: nodeData.graph.size.height,
|
||||||
attrs: {
|
attrs: {
|
||||||
body: nodeData.graph.style,
|
body: nodeData.graph.style,
|
||||||
|
label: {
|
||||||
|
text: nodeData.name,
|
||||||
|
fill: '#000000',
|
||||||
|
fontSize: 12,
|
||||||
|
}
|
||||||
},
|
},
|
||||||
ports: nodeData.graph.ports
|
ports: nodeData.graph.ports
|
||||||
};
|
};
|
||||||
|
|
||||||
// 根据形状选择不同的基础节点类型
|
|
||||||
if (nodeData.graph.shape === 'circle') {
|
|
||||||
nodeConfig.inherit = 'circle';
|
|
||||||
} else if (nodeData.graph.shape === 'polygon') {
|
|
||||||
nodeConfig.inherit = 'polygon';
|
|
||||||
}
|
|
||||||
|
|
||||||
// 注册节点类型
|
// 注册节点类型
|
||||||
Graph.registerNode(nodeData.code, nodeConfig, true);
|
Graph.registerNode(nodeData.code, nodeConfig, true);
|
||||||
|
|
||||||
@ -128,6 +127,7 @@ const WorkflowDesign: React.FC = () => {
|
|||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
// 保存完整的节点信息用于后续操作
|
||||||
nodeDefinition: nodeData,
|
nodeDefinition: nodeData,
|
||||||
});
|
});
|
||||||
nodeMap.set(nodeData.id, node);
|
nodeMap.set(nodeData.id, node);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user