From 5a7eff8b9798b20776438d9864565cc15537b099 Mon Sep 17 00:00:00 2001 From: dengqichen Date: Wed, 11 Dec 2024 18:41:40 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=B7=A5=E5=85=B7=E6=A0=8F?= =?UTF-8?q?=E6=8F=90=E7=A4=BA=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Workflow/Definition/Designer/index.tsx | 64 +++++----- .../Definition/Designer/utils/nodeUtils.ts | 109 ++++++++++++++++++ 2 files changed, 138 insertions(+), 35 deletions(-) diff --git a/frontend/src/pages/Workflow/Definition/Designer/index.tsx b/frontend/src/pages/Workflow/Definition/Designer/index.tsx index e04b9182..9808e68c 100644 --- a/frontend/src/pages/Workflow/Definition/Designer/index.tsx +++ b/frontend/src/pages/Workflow/Definition/Designer/index.tsx @@ -12,7 +12,7 @@ import NodeConfig from './components/NodeConfig'; import Toolbar from './components/Toolbar'; import EdgeConfig from './components/EdgeConfig'; import { validateFlow, hasCycle } from './validate'; -import { generateNodeStyle, generatePorts, calculateNodePosition, calculateCanvasPosition, getNodeShape } from './utils/nodeUtils'; +import { generateNodeStyle, generatePorts, calculateNodePosition, calculateCanvasPosition, getNodeShape, getNodeSize } from './utils/nodeUtils'; import { NODE_CONFIG } from './configs/nodeConfig'; import { isWorkflowError } from './utils/errors'; import { initGraph } from './utils/graphUtils'; @@ -272,22 +272,28 @@ const FlowDesigner: React.FC = () => { } ); - // 获取节点配置 - const position = calculateNodePosition(nodeType.type, dropPosition); - const nodeStyle = generateNodeStyle(nodeType.type); - const ports = generatePorts(nodeType.type); + // 获取节点大小 + let size; + if (nodeType.type === 'start' || nodeType.type === 'end') { + size = { width: 40, height: 40 }; + } else { + size = { width: 100, height: 60 }; + } // 创建节点 const node = graphRef.current.addNode({ - ...position, - ...nodeStyle, - ports, + shape: getNodeShape(nodeType.type), + attrs: generateNodeStyle(nodeType.type, nodeType.name), data: { type: nodeType.type, - name: nodeType.name, - description: nodeType.description, - config: nodeType.flowableConfig ? JSON.parse(nodeType.flowableConfig) : {}, + config: { + type: nodeType.type, + name: nodeType.name + } }, + position: dropPosition, + size: size, + ports: generatePorts(nodeType.type), }); // 选中新创建的节点并打开配置 @@ -300,18 +306,8 @@ const FlowDesigner: React.FC = () => { message.success('节点创建成功'); } catch (error) { - console.error('Error creating node:', error); - - if (isWorkflowError(error)) { - message.error(`创建节点失败：${error.message}`); - } else { - message.error('创建节点失败：未知错误'); - } - - // 清理状态 - setCurrentNode(undefined); - setCurrentNodeType(undefined); - setConfigVisible(false); + console.error('创建节点失败:', error); + message.error('创建节点失败'); } }; @@ -435,11 +431,7 @@ const FlowDesigner: React.FC = () => { const loadGraphData = (graph: Graph, detail: WorkflowDefinition) => { try { console.log('Loading graph data:', detail); - // 加载图数据 - if (detail.bpmnJson) { - graph.fromJSON(detail.bpmnJson); - } else if (detail.graph) { - // 如果没有 bpmnJson，尝试使用新的 graph 数据结构 + if (detail.graph) { const cells = [ ...detail.graph.nodes.map(node => ({ id: node.id, @@ -450,7 +442,7 @@ const FlowDesigner: React.FC = () => { config: node.config }, position: node.position, - size: node.size || { width: 100, height: 60 } + size: node.size // 直接使用数据中的 size })), ...detail.graph.edges.map(edge => ({ id: edge.id, @@ -526,19 +518,21 @@ const FlowDesigner: React.FC = () => { .filter((cell: any) => cell.shape !== 'edge') .map((node: any) => ({ id: node.id, - type: node.shape, - name: node.data?.label || '', + type: node.data.type, + name: node.data?.name || '', position: node.position, - config: node.data?.serviceTask || {} + size: node.size, + config: node.data?.config || {} })); const edges = graphData.cells .filter((cell: any) => cell.shape === 'edge') .map((edge: any) => ({ id: edge.id, - source: edge.source, - target: edge.target, - name: edge.data?.label || '' + source: edge.source.cell, + target: edge.target.cell, + name: edge.data?.name || '', + config: edge.data?.config || {} })); return { nodes, edges }; diff --git a/frontend/src/pages/Workflow/Definition/Designer/utils/nodeUtils.ts b/frontend/src/pages/Workflow/Definition/Designer/utils/nodeUtils.ts index 4b8e6808..cf76f395 100644 --- a/frontend/src/pages/Workflow/Definition/Designer/utils/nodeUtils.ts +++ b/frontend/src/pages/Workflow/Definition/Designer/utils/nodeUtils.ts @@ -60,6 +60,106 @@ const NODE_THEMES: Record = { parallelGateway: { fill: '#f9f0ff', stroke: '#722ed1' }, }; +// 节点配置映射 +const NODE_CONFIG: Record = { + startEvent: { + size: { width: 80, height: 80 }, + shape: 'circle', + theme: NODE_THEMES.startEvent, + label: 'startEvent', + extras: { + icon: { + 'xlink:href': NODE_ICONS.startEvent, + width: 32, + height: 32, + x: 8, + y: 24, + }, + }, + }, + endEvent: { + size: { width: 80, height: 80 }, + shape: 'circle', + theme: NODE_THEMES.endEvent, + label: 'endEvent', + extras: { + icon: { + 'xlink:href': NODE_ICONS.endEvent, + width: 32, + height: 32, + x: 8, + y: 24, + }, + }, + }, + userTask: { + size: { width: 200, height: 80 }, + shape: 'rect', + theme: NODE_THEMES.userTask, + label: 'userTask', + extras: { + rx: 4, + ry: 4, + icon: { + 'xlink:href': NODE_ICONS.userTask, + width: 32, + height: 32, + x: 8, + y: 24, + }, + }, + }, + shellTask: { + size: { width: 200, height: 80 }, + shape: 'rect', + theme: NODE_THEMES.shellTask, + label: 'shellTask', + extras: { + rx: 4, + ry: 4, + icon: { + 'xlink:href': NODE_ICONS.shellTask, + width: 32, + height: 32, + x: 8, + y: 24, + }, + }, + }, + exclusiveGateway: { + size: { width: 60, height: 60 }, + shape: 'polygon', + theme: NODE_THEMES.exclusiveGateway, + label: 'exclusiveGateway', + extras: { + refPoints: '0,30 30,0 60,30 30,60', + icon: { + 'xlink:href': NODE_ICONS.exclusiveGateway, + width: 32, + height: 32, + x: 14, + y: 14, + }, + }, + }, + parallelGateway: { + size: { width: 60, height: 60 }, + shape: 'polygon', + theme: NODE_THEMES.parallelGateway, + label: 'parallelGateway', + extras: { + refPoints: '0,30 30,0 60,30 30,60', + icon: { + 'xlink:href': NODE_ICONS.parallelGateway, + width: 32, + height: 32, + x: 14, + y: 14, + }, + }, + }, +}; + // 获取节点配置 export const getNodeConfig = (nodeType: string): NodeConfig => { // 根据节点类型动态生成配置 @@ -88,6 +188,15 @@ export const getNodeConfig = (nodeType: string): NodeConfig => { return baseConfig; }; +// 获取节点默认大小 +export const getNodeSize = (nodeType: string) => { + const config = NODE_CONFIG[nodeType]; + if (!config) { + return { width: 100, height: 60 }; // 默认大小 + } + return config.size; +}; + interface NodeStyle { body: { fill: string;