diff --git a/__tests__/plugin/__snapshots__/stencil-1.html b/__tests__/plugin/__snapshots__/stencil-1.html index 8724c2acd1e..ef9ce138447 100644 --- a/__tests__/plugin/__snapshots__/stencil-1.html +++ b/__tests__/plugin/__snapshots__/stencil-1.html @@ -19,7 +19,7 @@ class="x6-widget-stencil-group-content" >
({ sx: 1, sy: 1 }), resize: vi.fn(), diff --git a/examples/src/pages/auto-resize/index.tsx b/examples/src/pages/auto-resize/index.tsx index 23ec24d508c..8fe84bd8c15 100644 --- a/examples/src/pages/auto-resize/index.tsx +++ b/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' diff --git a/examples/src/pages/minimap/index.tsx b/examples/src/pages/minimap/index.tsx index 2528791bd21..00ea777324c 100644 --- a/examples/src/pages/minimap/index.tsx +++ b/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', }, diff --git a/examples/src/pages/plugins/scroller/index.tsx b/examples/src/pages/plugins/scroller/index.tsx index 60b48d0d4e3..46b05d6d62f 100644 --- a/examples/src/pages/plugins/scroller/index.tsx +++ b/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, diff --git a/examples/src/pages/virtual-render/index.tsx b/examples/src/pages/virtual-render/index.tsx index bda8b2bc431..39320fa9f41 100644 --- a/examples/src/pages/virtual-render/index.tsx +++ b/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, }) diff --git a/site/docs/api/graph/graph.zh.md b/site/docs/api/graph/graph.zh.md index e2b60176043..1a0a4d522c6 100644 --- a/site/docs/api/graph/graph.zh.md +++ b/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` | diff --git a/site/docs/api/graph/panning.zh.md b/site/docs/api/graph/panning.zh.md index 5dea1bf4cbf..5f8315a8694 100644 --- a/site/docs/api/graph/panning.zh.md +++ b/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 }) // 等同于 diff --git a/site/docs/tutorial/plugins/scroller.zh.md b/site/docs/tutorial/plugins/scroller.zh.md index aa2b6c7b267..c3a457f6bd5 100644 --- a/site/docs/tutorial/plugins/scroller.zh.md +++ b/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({ diff --git a/site/src/tutorial/plugins/minimap/index.tsx b/site/src/tutorial/plugins/minimap/index.tsx index fe8d7d19cd4..9a933bd44fe 100644 --- a/site/src/tutorial/plugins/minimap/index.tsx +++ b/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', }, diff --git a/site/src/tutorial/plugins/scroller/index.tsx b/site/src/tutorial/plugins/scroller/index.tsx index 4852dc9b15b..23a54af8245 100644 --- a/site/src/tutorial/plugins/scroller/index.tsx +++ b/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', }, diff --git a/src/graph/options.ts b/src/graph/options.ts index 506d44d00a8..d8d16246103 100644 --- a/src/graph/options.ts +++ b/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: { diff --git a/src/model/animation.ts b/src/model/animation.ts index 83a70c5f3ef..0982e12d72f 100644 --- a/src/model/animation.ts +++ b/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 } = {} diff --git a/src/plugin/minimap/index.ts b/src/plugin/minimap/index.ts index f2a08842618..cd5183a42ba 100644 --- a/src/plugin/minimap/index.ts +++ b/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 diff --git a/src/plugin/scroller/index.ts b/src/plugin/scroller/index.ts index ddfc138f949..86640ee17c5 100644 --- a/src/plugin/scroller/index.ts +++ b/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.', + ) + } } }