Toolbar

Overview

The Toolbar is a plugin in G6 used to provide a collection of operation buttons, supporting common chart operations such as zoom in, zoom out, auto-fit, and reset. Through the toolbar, users can quickly access common functions of the chart, improving operational efficiency and user experience.

Use Cases

This plugin is mainly used for:

Quickly accessing common functions of the chart

Basic Usage

Below is a simple example of initializing the Toolbar plugin:

const graph = new Graph({
  // Other configurations...
  plugins: [
    {
      type: 'toolbar',
      getItems: () => [
        { id: 'zoom-in', value: 'zoom-in' },
        { id: 'zoom-out', value: 'zoom-out' },
        { id: 'auto-fit', value: 'auto-fit' },
      ],
      onClick: (value) => {
        // Handle button click events
        if (value === 'zoom-in') {
          graph.zoomTo(1.1);
        } else if (value === 'zoom-out') {
          graph.zoomTo(0.9);
        } else if (value === 'auto-fit') {
          graph.fitView();
        }
      },
    },
  ],
});

Configuration Options

Property	Description	Type	Default Value	Required
type	Plugin type	string	`toolbar`	✓
key	Unique identifier for the plugin, used for updates	string	-
className	Additional CSS class name for the toolbar DOM element	string	-
position	Toolbar position relative to the canvas, optional values	string	`'top-left'`
style	Custom style for the toolbar DOM element, common values	CSSStyleDeclaration	-
getItems	Returns the list of toolbar items	() => ToolbarItem[] \| Promise<ToolbarItem[]>	-	✓
onClick	Callback function after a toolbar item is clicked	(value: string, target: Element) => void	-

position

The position parameter supports the following values:

'top-left': Top left corner
'top-right': Top right corner
'bottom-left': Bottom left corner
'bottom-right': Bottom right corner
'left-top': Left side, top
'left-bottom': Left side, bottom
'right-top': Right side, top
'right-bottom': Right side, bottom

style Attributes

Attribute	Description	Type	Default Value
backgroundColor	Background color	string	`#fff`
border	Border	string	`1px solid #e8e8e8`
borderRadius	Border radius	string	`4px`
height	Height	string	`auto`
margin	Margin	string	`12px`
opacity	Opacity	number	0.9
padding	Padding	string	`8px`
width	Width	string	`auto`

ToolbarItem

Each toolbar item (ToolbarItem) includes the following attributes:

Attribute	Description	Type	Required
id	Icon ID of the item, see Built-in Icons	`string`	✓
value	Value returned when the item is clicked	`string`	✓

Built-in Icons

The Toolbar provides the following built-in icon IDs:

'zoom-in': Zoom in
'zoom-out': Zoom out
'redo': Redo
'undo': Undo
'edit': Edit
'delete': Delete
'auto-fit': Auto-fit view
'export': Export chart
'reset': Reset view
'request-fullscreen': Request fullscreen
'exit-fullscreen': Exit fullscreen

Custom Icons

In addition to using built-in icons, you can also use custom icons by introducing third-party icon libraries (such as Alibaba iconfont):

// Introduce iconfont script
const iconFont = document.createElement('script');
iconFont.src = '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js'; // Replace with your iconfont script URL
document.head.appendChild(iconFont);

// Use custom icons in the toolbar
const graph = new Graph({
  // Other configurations...
  plugins: [
    {
      type: 'toolbar',
      getItems: () => [
        { id: 'icon-xinjian', value: 'new' }, // Use icons from iconfont
        { id: 'icon-fenxiang', value: 'share' },
        { id: 'icon-chexiao', value: 'undo' },
      ],
      onClick: (value) => {
        // Handle click events
      },
    },
  ],
});

Note: Custom icon IDs usually start with icon- and need to correspond to the icon names in the introduced iconfont.

Code Examples

const graph = new Graph({
  // Other configurations...
  plugins: [
    {
      type: 'toolbar',
      position: 'top-right',
      getItems: () => [
        { id: 'zoom-in', value: 'zoom-in' },
        { id: 'zoom-out', value: 'zoom-out' },
        { id: 'undo', value: 'undo' },
        { id: 'redo', value: 'redo' },
        { id: 'auto-fit', value: 'fit' },
      ],
      onClick: (value) => {
        // redo, undo need to be used with the history plugin
        const history = graph.getPluginInstance('history');
        switch (value) {
          case 'zoom-in':
            graph.zoomTo(1.1);
            break;
          case 'zoom-out':
            graph.zoomTo(0.9);
            break;
          case 'undo':
            history?.undo();
            break;
          case 'redo':
            history?.redo();
            break;
          case 'fit':
            graph.fitView();
            break;
          default:
            break;
        }
      },
    },
  ],
});

Custom Styles

const graph = new Graph({
  // Other configurations...
  plugins: [
    {
      type: 'toolbar',
      className: 'my-custom-toolbar',
      style: {
        backgroundColor: '#f5f5f5',
        padding: '8px',
        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
        borderRadius: '8px',
        border: '1px solid #e8e8e8',
        opacity: '0.9',
        marginTop: '12px',
        marginLeft: '12px',
      },
      getItems: () => [
        { id: 'zoom-in', value: 'zoom-in' },
        { id: 'zoom-out', value: 'zoom-out' },
      ],
      onClick: (value) => {
        // Handle click events
      },
    },
  ],
});

Common style attributes include:

backgroundColor: Background color

padding: Padding

margin/marginTop/marginLeft, etc.: Margin

border: Border

borderRadius: Border radius

boxShadow: Shadow effect

opacity: Opacity

width/height: Width and height (default is content adaptive)

zIndex: Layer (default is 100)

display: Display mode (default is flex)

The toolbar container is set to display: flex by default, and child items use row layout by default (or change according to the direction configured by position). You can customize its appearance and position through style.

const graph = new Graph({
  // Other configurations...
  plugins: [
    {
      type: 'toolbar',
      getItems: async () => {
        // Toolbar configuration can be obtained from the server or other asynchronous sources
        const response = await fetch('/api/toolbar-config');
        const items = await response.json();
        return items;
      },
      onClick: (value) => {
        // Handle click events
      },
    },
  ],
});

Common Issues

Check if the correct built-in icon ID is used
Ensure CSS styles are not overridden or conflicting

2. How to use with other plugins?

The toolbar is often used in conjunction with other plugins (such as history):

const graph = new Graph({
  plugins: [
    {
      type: 'history',
      key: 'history',
    },
    {
      type: 'toolbar',
      getItems: () => [
        { id: 'undo', value: 'undo' },
        { id: 'redo', value: 'redo' },
      ],
      onClick: (value) => {
        const history = graph.getPluginInstance('history');
        if (value === 'undo') {
          history.undo();
        } else if (value === 'redo') {
          history.redo();
        }
      },
    },
  ],
});

You can use the updatePlugin method to dynamically update the toolbar:

const graph = new Graph({
  // Other configurations...
  plugins: [
    {
      type: 'toolbar',
      key: 'my-toolbar',
    },
  ],
});

// Update toolbar position
graph.updatePlugin({
  key: 'my-toolbar',
  position: 'bottom-right',
});

Real Cases


import { Graph } from '@antv/g6';

const data = {
  nodes: [{ id: 'node-0' }, { id: 'node-1' }, { id: 'node-2' }, { id: 'node-3' }, { id: 'node-4' }, { id: 'node-5' }],
  edges: [
    { source: 'node-0', target: 'node-1' },
    { source: 'node-0', target: 'node-2' },
    { source: 'node-0', target: 'node-3' },
    { source: 'node-0', target: 'node-4' },
    { source: 'node-1', target: 'node-0' },
    { source: 'node-2', target: 'node-0' },
    { source: 'node-3', target: 'node-0' },
    { source: 'node-4', target: 'node-0' },
    { source: 'node-5', target: 'node-0' },
  ],
};

const graph = new Graph({
  container: 'container',
  data,
  layout: {
    type: 'grid',
  },
  behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element'],
  plugins: [
    {
      type: 'toolbar',
      position: 'top-left',
      onClick: (item) => {
        alert('item clicked:' + item);
      },
      getItems: () => {
        // G6 内置了 9 个 icon，分别是 zoom-in、zoom-out、redo、undo、edit、delete、auto-fit、export、reset
        return [
          { id: 'zoom-in', value: 'zoom-in' },
          { id: 'zoom-out', value: 'zoom-out' },
          { id: 'redo', value: 'redo' },
          { id: 'undo', value: 'undo' },
          { id: 'edit', value: 'edit' },
          { id: 'delete', value: 'delete' },
          { id: 'auto-fit', value: 'auto-fit' },
          { id: 'export', value: 'export' },
          { id: 'reset', value: 'reset' },
        ];
      },
    },
  ],
});

graph.render();

import { Graph } from '@antv/g6';
import GUI from 'lil-gui';

export function addPanel(renderPanel: (gui: GUI) => void) {
  const gui = new GUI({ container: document.body });
  gui.title('Control');
  Object.assign(gui.domElement.style, { position: 'absolute', top: '0', right: '0', zIndex: '10' });
  renderPanel(gui);
  addEventListener('pagehide', () => gui.destroy(), { once: true });
}

export async function createGraph(
  options: ConstructorParameters<typeof Graph>[0],
  size: { width?: number; height?: number } = {},
  renderPanel?: (gui: GUI, graph: Graph) => void,
) {
  const container = document.createElement('div');
  Object.assign(container.style, {
    width: '100%',
    maxWidth: `${size.width || 600}px`,
    height: `${size.height || 400}px`,
  });
  document.getElementById('container')!.append(container);
  const graph = new Graph({ ...size, ...options, width: container.clientWidth, container, autoResize: true });
  addEventListener('pagehide', () => graph.destroy(), { once: true });
  await graph.render();
  if (renderPanel) addPanel((gui) => renderPanel(gui, graph));
  return container;
}