diff --git a/frontend/src/pages/Workflow/Definition/Designer/utils/graphUtils.ts b/frontend/src/pages/Workflow/Definition/Designer/utils/graphUtils.ts index c5562ba4..ce9ca42c 100644 --- a/frontend/src/pages/Workflow/Definition/Designer/utils/graphUtils.ts +++ b/frontend/src/pages/Workflow/Definition/Designer/utils/graphUtils.ts @@ -41,9 +41,20 @@ export const initGraph = ({ }, mousewheel: { enabled: true, - modifiers: ['ctrl', 'meta'], - minScale: 0.5, - maxScale: 2, + modifiers: [], + minScale: 0.2, + maxScale: 2, + factor: 1.1, + }, + scroller: { + enabled: true, + pannable: true, + autoResize: true, + padding: 50, + }, + panning: { + enabled: true, + eventTypes: ['rightMouseDown'], }, connecting: { snap: true, @@ -96,35 +107,6 @@ export const initGraph = ({ radius: 8, }, }, - labels: [ - { - attrs: { - label: { - text: '', - fill: '#333', - fontSize: 12, - }, - rect: { - fill: '#fff', - stroke: '#5F95FF', - strokeWidth: 1, - rx: 3, - ry: 3, - refWidth: 1, - refHeight: 1, - refX: 0, - refY: 0, - }, - }, - position: { - distance: 0.5, - offset: { - x: 0, - y: -10, - }, - }, - }, - ], }, highlighting: { magnetAvailable: { @@ -266,49 +248,43 @@ export const initGraph = ({ }) ); - // 监听画布变化,更新小地图视图 - const updateMinimap = () => { - if (graph.minimap) { - // 获取所有内容的边界 - const contentArea = graph.getContentArea(); - if (contentArea) { - const { width, height } = contentArea; - // 计算合适的缩放比例 - const scale = Math.min( - 180 / width, // 留出20px边距 - 130 / height // 留出20px边距 - ); - - // 更新视口 - graph.minimap.updateViewport(); - - // 调整缩放以显示完整内容 - if (scale < 1) { - graph.minimap.scaleTo(scale); - } - - // 确保视图居中 - graph.minimap.centerContent(); - } - } - }; - - // 监听节点变化 - graph.on('node:added node:removed node:moved edge:added edge:removed', () => { - // 先让画布适应内容 - graph.fitToContent({ - padding: 20, - minScale: 0.1, - maxScale: 2, - }); - - // 更新小地图 - updateMinimap(); - }); - // 监听画布缩放和平移 graph.on('scale translate', () => { - updateMinimap(); + if (graph.minimap) { + // 使用固定的缩放比例 + const scale = 0.1; // 固定缩放比例为 0.1 + + // 更新视口和缩放 + graph.minimap.updateViewport(); + graph.minimap.scaleTo(scale); + graph.minimap.centerContent(); + } + }); + + // 监听鼠标右键按下 + container.addEventListener('mousedown', (e: MouseEvent) => { + if (e.button === 2) { // 右键 + e.preventDefault(); + } + }); + + // 监听鼠标移动 + container.addEventListener('mousemove', (e: MouseEvent) => { + }); + + // 监听鼠标松开 + container.addEventListener('mouseup', (e: MouseEvent) => { + if (e.button === 2) { + } + }); + + // 监听鼠标离开容器 + container.addEventListener('mouseleave', () => { + }); + + // 禁用默认右键菜单 + container.addEventListener('contextmenu', (e: Event) => { + e.preventDefault(); }); // 绑定事件 @@ -343,8 +319,8 @@ export const initGraph = ({ onContextMenu({ visible: false, x: 0, y: 0, type: 'canvas' }); }); - // 监听节点点击事件 - graph.on('node:click', ({ node }) => { + // 监听节点双击事件 + graph.on('node:dblclick', ({ node }) => { onNodeClick(node); }); @@ -357,5 +333,17 @@ export const initGraph = ({ container.addEventListener('dragover', onDragOver); container.addEventListener('drop', onDrop); + // 如果有初始数据,加载后自动调整视图 + if (flowDetail?.graphDefinition) { + const graphData = JSON.parse(flowDetail.graphDefinition); + graph.fromJSON(graphData); + + // 等待节点渲染完成后调整视图 + requestAnimationFrame(() => { + graph.zoomToFit({ padding: 50, maxScale: 1 }); + graph.centerContent(); + }); + } + return graph; };