G6

createGraph(
  {
    data: { nodes: [{ id: 'node-1' }] },
    layout: { type: 'force' },
    behaviors: [
      {
        type: 'zoom-canvas',
        key: 'zoom-canvas',
      },
    ],
    node: { style: { fill: '#873bf4' } },
    edge: { style: { stroke: '#8b9baf' } },
    plugins: [{ type: 'grid-line', size: 30 }],
  },
  { width: 600, height: 300 },
  (gui, graph) => {
    const options = {
      key: 'zoom-canvas',
      type: 'zoom-canvas',
      animation: true,
      enable: true,
      sensitivity: 1,
      trigger: 'Use wheel by default',
    };
    const optionFolder = gui.addFolder('ZoomCanvas Options');
    optionFolder.add(options, 'type').disable(true);
    optionFolder.add(options, 'animation');
    optionFolder.add(options, 'enable');
    optionFolder.add(options, 'sensitivity', 0, 10, 1);
    optionFolder.add(options, 'trigger', {
      'Use wheel by default': [],
      'Control+Wheel': ['Control'],
      'zoomIn:Ctrl+1 zoomOut:Ctrl+2 reset:Ctrl+0': {
        zoomIn: ['Control', '1'],
        zoomOut: ['Control', '2'],
        reset: ['Control', '0'],
      },
    });
    optionFolder.onChange(({ property, value }) => {
      graph.updateBehavior({
        key: 'zoom-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 Default: ' duration: 200 '

Whether to enable the animation of zooming

enable

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

Whether to enable the function of zooming the canvas

onFinish

() => void

Callback when zooming is completed

preventDefault

boolean Default: true

Whether to prevent the default event

sensitivity

number Default: 1

Zoom sensitivity

trigger

string[] | { zoomIn: string[]; zoomOut: string[]; reset: string[]; }

The way to trigger zoom

ShortcutKey: Combination shortcut key, **default to zoom with the mouse wheel**, ['Control'] means zooming when holding down the Control key and scrolling the mouse wheel
CombinationKey: Zoom shortcut key, such as { zoomIn: ['Control', '+'], zoomOut: ['Control', '-'], reset: ['Control', '0'] }

API

ZoomCanvas.destroy()

Destroy zoom canvas

destroy(): void;