fix: 🐛 auto scroll graph when drag magnet (#1121)

packages/x6/src/graph/panning.ts

@@ -150,18 +150,37 @@ export class PanningManager extends Base {
     }
   }
 
+  autoPanning(x: number, y: number) {
+    const buffer = 10
+    const graphArea = this.graph.getGraphArea()
+
+    let dx = 0
+    let dy = 0
+    if (x <= graphArea.left + buffer) {
+      dx = -buffer
+    }
+
+    if (y <= graphArea.top + buffer) {
+      dy = -buffer
+    }
+
+    if (x >= graphArea.right - buffer) {
+      dx = buffer
+    }
+
+    if (y >= graphArea.bottom - buffer) {
+      dy = buffer
+    }
+
+    if (dx !== 0 || dy !== 0) {
+      this.graph.translateBy(-dx, -dy)
+    }
+  }
+
   enablePanning() {
     if (!this.pannable) {
       this.widgetOptions.enabled = true
       this.updateClassName()
-      // if (
-      //   ModifierKey.equals(
-      //     this.graph.options.panning.modifiers,
-      //     this.graph.options.selecting.modifiers,
-      //   )
-      // ) {
-      //   this.graph.selection.disableRubberband()
-      // }
     }
   }
 

packages/x6/src/view/node.ts

@@ -1022,6 +1022,7 @@ export class NodeView<
     const edgeView = data.edgeView
     if (edgeView) {
       edgeView.onMouseMove(e, x, y)
+      this.autoScrollGraph(e.clientX, e.clientY)
     } else {
       const graph = this.graph
       const magnetThreshold = graph.options.magnetThreshold as any
@@ -1133,10 +1134,7 @@ export class NodeView<
       this.notifyNodeMove('node:move', e, x, y, this.cell)
     }
 
-    const scroller = this.graph.scroller.widget
-    if (scroller) {
-      scroller.autoScroll(e.clientX, e.clientY)
-    }
+    this.autoScrollGraph(e.clientX, e.clientY)
 
     const posX = Util.snapToGrid(x + offset.x, gridSize)
     const posY = Util.snapToGrid(y + offset.y, gridSize)
@@ -1170,6 +1168,13 @@ export class NodeView<
     data.embedding = false
   }
 
+  protected autoScrollGraph(x: number, y: number) {
+    const scroller = this.graph.scroller.widget
+    if (scroller) {
+      scroller.autoScroll(x, y)
+    }
+  }
+
   // #endregion
 }