FocusElement

Overview

FocusElement is a built-in interaction in G6 that enables focusing elements by centering them in the viewport when clicked. This interaction helps users quickly locate and focus on specific graph elements.

Use Cases

Quickly centering nodes or edges of interest

Live Demo

createGraph(
  {
    data: {
      nodes: [
        { id: 'node-1', style: { x: 200, y: 100 } },
        { id: 'node-2', style: { x: 360, y: 100 } },
        { id: 'node-3', style: { x: 280, y: 220 } },
      ],
      edges: [
        { source: 'node-1', target: 'node-2' },
        { source: 'node-1', target: 'node-3' },
        { source: 'node-2', target: 'node-3' },
      ],
    },
    node: { style: { fill: '#7e3feb' } },
    edge: { style: { stroke: '#8b9baf' } },
    behaviors: [
      {
        type: 'focus-element',
        key: 'focus-element',
      },
    ],
    plugins: [{ type: 'grid-line', size: 30 }],
    animation: true,
  },
  { width: 600, height: 300 },
  (gui, graph) => {
    const options = {
      key: 'focus-element',
      type: 'focus-element',
      animation: true,
      enable: true,
    };
    const optionFolder = gui.addFolder('FocusElement Options');
    optionFolder.add(options, 'type').disable(true);
    optionFolder.add(options, 'animation');
    optionFolder.add(options, 'enable');

    optionFolder.onChange(({ property, value }) => {
      graph.updateBehavior({
        key: 'focus-element',
        [property]: value,
      });
      graph.render();
    });
  },
);

Basic Usage

Add this interaction to the graph configuration:

1. Quick Configuration (Static)

Use string form for direct declaration:

const graph = new Graph({
  // Other configurations...
  behaviors: ['focus-element'],
});

2. Object Configuration (Recommended)

Use object form for configuration with custom parameters:

const graph = new Graph({
  // Other configurations...
  behaviors: [
    {
      type: 'focus-element',
      animation: {
        duration: 500,
        easing: 'ease-in',
      },
    },
  ],
});

Options

Option	Description	Type	Default	Required
type	Behavior type	string	`focus-element`	✓
animation	Focus animation settings	ViewportAnimationEffectTiming	`{ duration: 500, easing: 'ease-in' }`
enable	Whether to enable the function of focusing on the element	boolean \| ((event: IElementEvent) => boolean)	true

ViewportAnimationEffectTiming

type ViewportAnimationEffectTiming =
  | boolean // true to enable default animation, false to disable animation
  | {
      easing?: string; // Animation easing function: 'ease-in-out', 'ease-in', 'ease-out', 'linear'
      duration?: number; // Animation duration (milliseconds)
    };

Code Examples

Basic Focus Functionality

const graph = new Graph({
  container: 'container',
  width: 800,
  height: 600,
  behaviors: ['focus-element'],
});

Custom Animation Effects

const graph = new Graph({
  // Other configurations...
  behaviors: [
    {
      type: 'focus-element',
      animation: {
        duration: 800,
        easing: 'ease-in-out',
      },
    },
  ],
});

Conditional Focus Enable

const graph = new Graph({
  // Other configurations...
  behaviors: [
    {
      type: 'focus-element',
      enable: (event) => {
        // Only enable focus for nodes, not edges
        return event.target.type === 'node';
      },
    },
  ],
});

Live Example

API

FocusElement.destroy()

destroy(): void;