G6

createGraph(
  {
    data: { nodes: [{ id: 'node-1' }] },
    layout: { type: 'force' },
    behaviors: [
      {
        type: 'drag-canvas',
        key: 'drag-canvas',
      },
    ],
    node: { style: { fill: '#7e3feb' } },
    edge: { style: { stroke: '#8b9baf' } },
    plugins: [{ type: 'grid-line', size: 30 }],
  },
  { width: 600, height: 300 },
  (gui, graph) => {
    const options = {
      key: 'drag-canvas',
      type: 'drag-canvas',
      enable: true,
      sensitivity: 1,
      trigger: 'Use cursor by default',
    };
    const optionFolder = gui.addFolder('ZoomCanvas Options');
    optionFolder.add(options, 'type').disable(true);
    optionFolder.add(options, 'enable');
    optionFolder.add(options, 'sensitivity', 0, 10, 1);
    optionFolder.add(options, 'trigger', {
      'Use cursor by default': [],
      'Shift+Arrow Key': {
        up: ['Shift', 'ArrowUp'],
        down: ['Shift', 'ArrowDown'],
        left: ['Shift', 'ArrowLeft'],
        right: ['Shift', 'ArrowRight'],
      },
    });
    optionFolder.onChange(({ property, value }) => {
      graph.updateBehavior({
        key: 'drag-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

animation

ViewportAnimationEffectTiming

Whether to enable the animation of dragging, only valid when using key movement

direction

'x' | 'y' | 'both' Default: ``

Allowed drag direction

'x': Only allow horizontal drag
'y': Only allow vertical drag
'both': Allow horizontal and vertical drag

enable

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

Whether to enable the function of dragging the canvas

onFinish

() => void

Callback when dragging is completed

range

number | number[] Default: Infinity

The draggable viewport range allows you to drag 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: 10

The distance of a single key movement

trigger

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

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

API

DragCanvas.destroy()

destroy(): void;