Scroller

In this chapter, we mainly introduce knowledge related to the scroller plugin. By reading, you can learn about

How to enable scrolling capabilities for the canvas

Note

When using the Scroller plugin, please do not enable the canvas's panning configuration at the same time, as the two forms conflict in interaction.

Usage

We provide a standalone plugin package @antv/x6-plugin-scroller to use the scroller feature.

# npm
$ npm install @antv/x6-plugin-scroller --save

# yarn
$ yarn add @antv/x6-plugin-scroller

Then we use it in the code like this:

import { Scroller } from '@antv/x6-plugin-scroller'

const graph = new Graph({
  background: {
    color: '#F2F7FA',
  },
})
graph.use(
  new Scroller({
    enabled: true,
  }),
)

Demo

Options

Property Name	Type	Default	Description
pannable	boolean	`false`	Whether to enable canvas panning capability (dragging the canvas after pressing the mouse on a blank area)
className	string	-	Additional class name for custom styling
width	number	-	Width of the `Scroller`, defaults to the width of the canvas container
height	number	-	Height of the `Scroller`, defaults to the height of the canvas container
modifiers	ModifierKey	-	Set modifier keys that need to be pressed along with the mouse click to trigger canvas dragging
pageWidth	number	-	Width of each page, defaults to the width of the canvas container
pageHeight	number	-	Height of each page, defaults to the height of the canvas container
pageVisible	boolean	`false`	Whether to enable pagination
pageBreak	boolean	`false`	Whether to show page breaks
autoResize	boolean	`true`	Whether to automatically expand/shrink the canvas. When enabled, moving nodes/edges will automatically calculate the required canvas size, expanding it according to `pageWidth` and `pageHeight` when exceeding the current size, and shrinking it otherwise.
minVisibleWidth	number	-	Effective when `padding` is empty, sets the minimum visible width of the canvas during scrolling
minVisibleHeight	number	-	Effective when `padding` is empty, sets the minimum visible height of the canvas during scrolling
padding	`number \| Padding`	-	Sets the padding around the canvas. Defaults to being automatically calculated based on `minVisibleWidth` and `minVisibleHeight`, ensuring that at least `minVisibleWidth` and `minVisibleHeight` of the canvas is visible during scrolling.

The Padding type is defined as follows:

type Padding = { top: number; right: number; bottom: number; left: number }

The ModifierKey type is defined as follows:

type ModifierKey = string | ('alt' | 'ctrl' | 'meta' | 'shift')[] | null

Supports the following forms:

alt means pressing alt.
[alt, ctrl] means pressing either alt or ctrl.
alt|ctrl means pressing either alt or ctrl.
alt&ctrl means pressing both alt and ctrl simultaneously.
alt|ctrl&shift means pressing both alt and shift simultaneously or both ctrl and shift simultaneously.

API

graph.lockScroller()

Disables scrolling.

graph.unlockScroller()

Enables scrolling.

graph.getScrollbarPosition()

Gets the scrollbar position.

graph.setScrollbarPosition(left?: number, top?: number)

Sets the scrollbar position.

left?: number The position of the horizontal scrollbar; defaults to no horizontal scrolling.
top?: number The position of the vertical scrollbar; defaults to no vertical scrolling.

For example:

graph.setScrollbarPosition(100)
graph.setScrollbarPosition(100, null)
graph.setScrollbarPosition(null, 200)
graph.setScrollbarPosition(100, 200)