G6

createGraph(
  {
    data: { nodes: [{ id: 'node-1' }] },
    layout: { type: 'force' },
    behaviors: [
      {
        type: 'scroll-canvas',
        key: 'scroll-canvas',
      },
    ],
    node: { style: { fill: '#873bf4' } },
    edge: { style: { stroke: '#8b9baf' } },
    plugins: [{ type: 'grid-line', size: 30 }],
  },
  { width: 600, height: 300 },
  (gui, graph) => {
    const options = {
      key: 'scroll-canvas',
      type: 'scroll-canvas',
      direction: 'No limit',
      enable: true,
      sensitivity: 1,
      trigger: 'Use wheel by default',
    };
    const optionFolder = gui.addFolder('ZoomCanvas Options');
    optionFolder.add(options, 'type').disable(true);
    optionFolder.add(options, 'direction', {
      'No limit': '',
      'Only allow horizontal scrolling': 'x',
      'Only allow vertical scrolling': 'y',
    });
    optionFolder.add(options, 'enable');
    optionFolder.add(options, 'sensitivity', 0, 10, 1);
    optionFolder.add(options, 'trigger', {
      'Use wheel by default': [],
      'Shift+Arrow Key': {
        up: ['Shift', 'ArrowUp'],
        down: ['Shift', 'ArrowDown'],
        left: ['Shift', 'ArrowLeft'],
        right: ['Shift', 'ArrowRight'],
      },
    });
    optionFolder.onChange(({ property, value }) => {
      graph.updateBehavior({
        key: 'scroll-canvas',
        [property]: value,
      });
      graph.render();
    });
  },
);

Options

key

string

Behavior key, that is, the unique identifier

Used to identify the behavior for further operations

// Update behavior options
graph.updateBehavior({key: 'key', ...});

Required type

string

Behavior type

direction

'x' | 'y'

The allowed rolling direction

by default, there is no restriction
'x': only allow horizontal scrolling
'y': only allow vertical scrolling

enable

boolean | ((event: WheelEvent | KeyboardEvent) => boolean) Default: true

Whether to enable the function of scrolling the canvas

onFinish

() => void

Callback when scrolling is completed

preventDefault

boolean Default: true

Whether to prevent the default event

range

number | number[] Default: 1

The scrollable viewport range allows you to scroll up to one screen by default. You can set the range for each direction (top, right, bottom, left) individually, with each direction's range between [0, Infinity]

sensitivity

number Default: 1

Scroll sensitivity

trigger

{ up: string[]__; down: string[]__; left: string[]__; right: string[]__; }

The way to trigger scrolling, default to scrolling with the pointer pressed

API

ScrollCanvas.destroy()

Destroy the canvas scrolling

destroy(): void;