feat: panning option default value set to true

__tests__/plugin/__snapshots__/stencil-1.html

@@ -19,7 +19,7 @@
           class="x6-widget-stencil-group-content"
         >
           <div
-            class="x6-graph"
+            class="x6-graph x6-graph-pannable"
             style="width: 200px; height: 800px;"
           >
             <div
@@ -141,7 +141,7 @@
           class="x6-widget-stencil-group-content"
         >
           <div
-            class="x6-graph"
+            class="x6-graph x6-graph-pannable"
             style="width: 200px; height: 800px;"
           >
             <div

__tests__/plugin/__snapshots__/stencil-2.html

@@ -19,7 +19,7 @@
           class="x6-widget-stencil-group-content"
         >
           <div
-            class="x6-graph"
+            class="x6-graph x6-graph-pannable"
             style="width: 200px; height: 800px;"
           >
             <div
@@ -141,7 +141,7 @@
           class="x6-widget-stencil-group-content"
         >
           <div
-            class="x6-graph"
+            class="x6-graph x6-graph-pannable"
             style="width: 200px; height: 800px;"
           >
             <div

__tests__/plugin/__snapshots__/stencil-3.html

@@ -19,7 +19,7 @@
           class="x6-widget-stencil-group-content"
         >
           <div
-            class="x6-graph"
+            class="x6-graph x6-graph-pannable"
             style="width: 200px; height: 800px;"
           >
             <div
@@ -106,7 +106,7 @@
           class="x6-widget-stencil-group-content"
         >
           <div
-            class="x6-graph"
+            class="x6-graph x6-graph-pannable"
             style="width: 200px; height: 800px;"
           >
             <div

__tests__/plugin/scroller.spec.ts

@@ -33,6 +33,7 @@ function createMockGraph() {
     container,
     view: { grid: document.createElement('div'), background: null },
     grid: { update: vi.fn(), draw: vi.fn(), clear: vi.fn() }, // ✅ mock grid
+    panning: { pannable: true },
     transform: {
       getScale: () => ({ sx: 1, sy: 1 }),
       resize: vi.fn(),

examples/src/pages/auto-resize/index.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import { SplitBox } from '@antv/x6-react-components'
+import React from 'react'
 import '@antv/x6-react-components/es/split-box/style/index.css'
 import { Graph, Scroller } from '@antv/x6'
 import '../index.less'

examples/src/pages/minimap/index.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react'
-import { Radio } from 'antd'
 import { Graph, MiniMap, Scroller } from '@antv/x6'
+import { Radio } from 'antd'
+import * as React from 'react'
 import { SimpleNodeView } from './simple-view'
 import './index.less'
 
@@ -19,6 +19,7 @@ export default class Example extends React.Component {
       container: this.container,
       width: 600,
       height: 320,
+      panning: false,
       background: {
         color: '#F2F7FA',
       },

examples/src/pages/plugins/scroller/index.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import { Export, Graph, MiniMap, Scroller, Selection } from '@antv/x6'
 import { Button } from 'antd'
-import { Graph, Export, Selection, MiniMap, Scroller } from '@antv/x6'
+import React from 'react'
 import '../../index.less'
 import './index.less'
 
@@ -23,6 +23,7 @@ export class ScrollerExample extends React.Component {
       grid: {
         visible: true,
       },
+      panning: false,
       mousewheel: {
         enabled: true,
         // fixed: false,

examples/src/pages/virtual-render/index.tsx

@@ -1,5 +1,6 @@
-import React, { useEffect, useRef } from 'react'
-import { Graph, Cell, Scroller } from '@antv/x6'
+import { type Cell, Graph, Scroller } from '@antv/x6'
+import type React from 'react'
+import { useEffect, useRef } from 'react'
 import '../index.less'
 import './index.less'
 
@@ -16,6 +17,7 @@ export const VirtualRenderExample: React.FC = () => {
       height: 800,
       grid: true,
       mousewheel: true,
+      panning: false,
       virtual: true,
     })
 

site/docs/api/graph/graph.zh.md

@@ -20,7 +20,7 @@ new Graph(options: Options)
 | height | `number` |  | 画布高度，默认使用容器高度。 | - |
 | scaling | `{ min?: number, max?: number }` |  | 画布的最小最大缩放级别。 | `{ min: 0.01, max: 16 }` |
 | [autoResize](/tutorial/basic/graph#画布大小) | `boolean \| Element \| Document` |  | 是否监听容器大小改变，并自动更新画布大小。 | `false` |
-| [panning](/api/graph/panning) | `boolean \| PanningManager.Options` |  | 画布是否可以拖拽平移，默认禁用。 | `false` |
+| [panning](/api/graph/panning) | `boolean \| PanningManager.Options` |  | 画布是否可以拖拽平移，默认启用。 | `true` |
 | [mousewheel](/api/graph/mousewheel) | `boolean \| MouseWheel.Options` |  | 鼠标滚轮缩放，默认禁用。 | `false` |
 | [grid](/api/graph/grid) | `boolean \| number \| GridManager.Options` |  | 网格，默认使用 `10px` 的网格，但不绘制网格背景。 | `false` |
 | [background](/api/graph/background) | `false \| BackgroundManager.Options` |  | 背景，默认不绘制背景。 | `false` |

site/docs/api/graph/panning.zh.md

@@ -16,12 +16,12 @@ redirect_from:
 普通画布(未使用 `scroller` 插件)通过开启 `panning` 选项来支持拖拽平移。
 
 :::warning{title=注意}
-不要同时使用 `scroller` 和 `panning`，因为两种形式在交互上有冲突。 
+不要同时使用 `scroller` 和 `panning`，因为两种形式在交互上有冲突。从 2.19.0 版本开始，`panning` 配置默认值为 `true` 。
 :::
 
 ```ts
 const graph = new Graph({
-  panning: true,
+  panning: true, // 不传该选项时，默认值也为 true
 })
 
 // 等同于

site/docs/tutorial/plugins/scroller.zh.md

@@ -14,7 +14,7 @@ redirect_from:
 :::
 
 :::warning{title=注意}
-当同时使用 `Scroller` 插件的时候请不要同时开启画布的 `panning` 配置，因为两种形式在交互上有冲突。 
+当同时使用 `Scroller` 插件的时候请不要同时开启画布的 `panning` 配置，因为两种形式在交互上有冲突。从 2.19.0 版本开始，`panning` 配置默认值为 `true` 。
 :::
 
 ## 使用
@@ -28,6 +28,7 @@ const graph = new Graph({
   background: {
     color: '#F2F7FA',
   },
+  panning: false,
 })
 graph.use(
   new Scroller({

site/src/tutorial/plugins/minimap/index.tsx

@@ -19,6 +19,7 @@ export default class Example extends React.Component {
       container: this.container,
       width: 600,
       height: 320,
+      panning: false,
       background: {
         color: '#F2F7FA',
       },

site/src/tutorial/plugins/scroller/index.tsx

@@ -72,6 +72,7 @@ export default class Example extends React.Component {
 
     const graph = new Graph({
       container: this.container,
+      panning: false,
       background: {
         color: '#F2F7FA',
       },

src/graph/options.ts

@@ -1,5 +1,5 @@
-import { ObjectExt } from '../common'
 import type { Dom, Nilable } from '../common'
+import { ObjectExt } from '../common'
 import { Config } from '../config'
 import type { Rectangle } from '../geometry'
 import type { Graph } from '../graph'
@@ -417,7 +417,7 @@ export namespace Options {
     background: false,
 
     panning: {
-      enabled: false,
+      enabled: true,
       eventTypes: ['leftMouseDown'],
     },
     mousewheel: {

src/model/animation.ts

@@ -1,5 +1,5 @@
-import { ObjectExt, KeyValue, Interp, Timing } from '../common'
-import { Cell } from './cell'
+import { Interp, type KeyValue, ObjectExt, Timing } from '../common'
+import type { Cell } from './cell'
 
 export class Animation {
   protected readonly ids: { [path: string]: number } = {}

src/plugin/minimap/index.ts

@@ -110,6 +110,7 @@ export class MiniMap extends View implements Graph.Plugin {
       grid: false,
       background: false,
       embedding: false,
+      panning: false,
     }
 
     this.targetGraph = this.options.createGraph

src/plugin/scroller/index.ts

@@ -387,6 +387,12 @@ export class Scroller
       this.updateClassName(true)
       this.scrollerImpl.startPanning(e)
       this.scrollerImpl.once('pan:stop', () => this.updateClassName(false))
+
+      if (this.graph.panning.pannable) {
+        console.warn(
+          'Detected that graph.panning and scroll panning are both enabled, which may cause unexpected behavior.',
+        )
+      }
     }
   }