g6/packages/site/docs/manual/customize/pluginExtension.en.md

title	order
Custom Plugin	7

Custom plugins by inheriting the PluginBase class.

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

class CustomPlugin extends PluginBase {
  // Override method
  // Class method
}

Override method

init

Type: () => void

Initialize the plugin, you need to call the super.init() method

getDefaultCfgs

Type: () => object

Get the default configuration item of the plugin

updateCfgs

Type: (cfgs: object) => void

Update the configuration item of the plugin, the parameter is the current configuration item

getEvents

Type: () => { [key in string]: string }

Get the event listener of the plugin

For example, when the mouse enters the node, trigger the plugin class method handleNodeMouseenter:

getEvents() {
  return {
    'node:mouseenter': this.handleNodeMouseenter,
  };
}

destroy

Type: () => void

Destroy the plugin, you need to call the super.destroy() method

Example

Here is an example of a simple plugin that creates a text label to display the number of nodes and edges in the current canvas.

import { Graph as BaseGraph, PluginBase, extend } from '@antv/g6';

class Counter extends PluginBase {
  private label = document.createElement('span');

  private get container() {
    if (typeof this.options.container === 'string') {
      return document.querySelector(this.options.container);
    }
    return this.options.container;
  }

  init(graph) {
    super.init(graph);
    // Add text label to DOM
    this.container.appendChild(this.label);
    // Set style
    Object.assign(this.label.style, this.options.fontStyle);
    this.updateCounter();
  }

  getDefaultCfgs() {
    return {
      key: 'counter' + Math.random(),
      container: 'body',
      fontStyle: {
        color: '#000',
        'font-size': '12px',
      },
    };
  }

  getEvents() {
    return {
      // Listen for node and edge add/remove events on the canvas
      afteritemchange: this.updateCounter,
    };
  }

  updateCounter() {
    const { graph } = this;
    this.label.innerHTML = `Nodes: ${graph.getAllNodesData().length}, Edges: ${graph.getAllEdgesData().length}`;
  }
}

const Graph = extend(BaseGraph, {
  plugins: {
    counter: Counter,
  },
});

const graph = new Graph({
  container: 'container',
  width: 500,
  height: 500,
  // Enable counter plugin
  plugins: [
    {
      type: 'counter',
      key: 'counter',
      fontStyle: { color: 'red', 'font-size': '16px' },
    },
  ],
});