Interaction configuration

Without an explicit list, G6Lite enables zoom and canvas dragging. Passing behaviors: [] disables the defaults.

behaviors: [
  'zoom-canvas',
  'drag-canvas',
  'drag-node',
  'click-select',
  'hover-highlight',
  'tooltip',
];

Each behavior can be a string or an object with options. Picking and element event dispatch are shared, so behaviors consume one consistent interaction stream. See events.

BuiltInBehaviorOptionsMap maps each built-in name to its supported object configuration, while BuiltInBehaviorConfig is the union of all built-in configurations. Custom Behaviors should declare a literal type, a dedicated options type, and use satisfies at activation sites.

Zoom feel and bounds

zoom-canvas treats normalized wheel delta as a percentage for both mouse wheels and trackpads. The default sensitivity is 1. Same-direction events within one animation frame are combined, each frame is capped at a 15% zoom change, and the default zoom range is 0.1 to 20.

behaviors: [
  {
    type: 'zoom-canvas',
    sensitivity: 0.5,
    minZoom: 0.2,
    maxZoom: 8,
  },
  'drag-canvas',
];

sensitivity multiplies the wheel-delta percentage: with the default, deltaY = -10 zooms in by about 10%; sensitivity: 0.5 halves that response. Use a smaller value for gentler zooming. Invalid or non-positive values fall back to safe defaults.

Built-in Behaviors

• zoom-canvas: wheel zoom.
• drag-canvas: canvas panning.
• drag-node: node movement and Combo group dragging.
• drag-edge: edge endpoint reconnection.
• click-select: node and edge selection.
• hover-highlight, highlight-node, and highlight-edge: analytical highlighting.
• brush-select and lasso-select: area selection.
• tooltip: hover- or click-triggered information overlay.

Event dispatch

The internal interaction dispatcher performs one shared pick and emits normalized events in node → edge → combo → canvas priority. Click, double-click, context-menu, wheel, and hover events can be observed without enabling a separate click Behavior.

graph.on('node:click', ({ nodeId }) => {
  console.log(nodeId);
});

See Custom Behavior for the typed factory and registration pattern, and Extension system for category boundaries and lifecycle rules.