增加了右键拖动和鼠标滚轮实现画布大小。

frontend/src/pages/Workflow/Definition/Designer/utils/graphUtils.ts

@@ -41,9 +41,20 @@ export const initGraph = ({
         },
         mousewheel: {
             enabled: true,
-            modifiers: ['ctrl', 'meta'],
+            modifiers: [], 
-            minScale: 0.5,
+            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;
 };