fix: 🐛 unified panning api (#1151)

* fix: 🐛 unified panning api * docs: 📚️ add doc for panning api
antvis · Jul 5, 2021 · d60e9d8 · d60e9d8
1 parent edafef2
commit d60e9d8
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 33 deletions.
diff --git a/packages/x6/src/graph/graph.ts b/packages/x6/src/graph/graph.ts
@@ -1427,6 +1427,58 @@ export class Graph extends Basecoat<EventArgs> {
 
   // #endregion
 
+  // #region panning
+
+  isPannable() {
+    const scroller = this.scroller.widget
+    if (scroller) {
+      return this.scroller.pannable
+    }
+    return this.panning.pannable
+  }
+
+  enablePanning() {
+    const scroller = this.scroller.widget
+    if (scroller) {
+      this.scroller.enablePanning()
+    } else {
+      this.panning.enablePanning()
+    }
+
+    return this
+  }
+
+  disablePanning() {
+    const scroller = this.scroller.widget
+    if (scroller) {
+      this.scroller.disablePanning()
+    } else {
+      this.panning.disablePanning()
+    }
+
+    return this
+  }
+
+  togglePanning(pannable?: boolean) {
+    if (pannable == null) {
+      if (this.isPannable()) {
+        this.disablePanning()
+      } else {
+        this.enablePanning()
+      }
+    } else if (pannable !== this.isPannable()) {
+      if (pannable) {
+        this.enablePanning()
+      } else {
+        this.disablePanning()
+      }
+    }
+
+    return this
+  }
+
+  // #endregion
+
   // #region scroller
 
   @Decorator.checkScroller()
@@ -1529,39 +1581,6 @@ export class Graph extends Basecoat<EventArgs> {
     scroller.transitionToRect(rect, options)
     return this
   }
-
-  isPannable() {
-    return this.scroller.pannable
-  }
-
-  enablePanning() {
-    this.scroller.enablePanning()
-    return this
-  }
-
-  disablePanning() {
-    this.scroller.disablePanning()
-    return this
-  }
-
-  togglePanning(pannable?: boolean) {
-    if (pannable == null) {
-      if (this.isPannable()) {
-        this.disablePanning()
-      } else {
-        this.enablePanning()
-      }
-    } else if (pannable !== this.isPannable()) {
-      if (pannable) {
-        this.enablePanning()
-      } else {
-        this.disablePanning()
-      }
-    }
-
-    return this
-  }
-
   // #endregion
 
   // #region selection

diff --git a/sites/x6-sites/docs/tutorial/basic/graph.en.md b/sites/x6-sites/docs/tutorial/basic/graph.en.md
@@ -50,6 +50,15 @@ const graph = new Graph({
 })
 ```
 
+可以通过以下 API 来启用/禁止画布平移：
+
+```ts
+graph.isPannable() // 画布是否可以平移
+graph.enablePanning() // 启用画布平移
+graph.disablePanning() // 禁止画布平移
+graph.togglePanning() // 切换画布平移状态
+```
+
 ### 画布缩放
 
 普通画布(未开启 [scroller](/en/docs/tutorial/basic/scroller) 模式)通过开启 [mousewheel](/en/docs/tutorial/basic/mousewheel) 选项来支持画布缩放。这里说明怎么通过代码来进行画布缩放：

diff --git a/sites/x6-sites/docs/tutorial/basic/graph.zh.md b/sites/x6-sites/docs/tutorial/basic/graph.zh.md
@@ -50,6 +50,15 @@ const graph = new Graph({
 })
 ```
 
+可以通过以下 API 来启用/禁止画布平移：
+
+```ts
+graph.isPannable() // 画布是否可以平移
+graph.enablePanning() // 启用画布平移
+graph.disablePanning() // 禁止画布平移
+graph.togglePanning() // 切换画布平移状态
+```
+
 ### 画布缩放
 
 普通画布(未开启 [scroller](/zh/docs/tutorial/basic/scroller) 模式)通过开启 [mousewheel](/zh/docs/tutorial/basic/mousewheel) 选项来支持画布缩放。这里说明怎么通过代码来进行画布缩放：