feat: panning option default value set to true (#4835)

Co-authored-by: heshenglei <[email protected]>

Author: q32757468

__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
 })
 
 // 等同于