Plugin

Overview of Plugins

Plugins are an important mechanism in G6 for extending functionality and enhancing the interactive experience of graphs. Plugins typically provide independent functional modules, such as thumbnails, toolbars, context menus, etc. They integrate well with the main graph while maintaining modular and maintainable code.

The plugin system is designed to follow the "plug and play" principle, allowing dynamic addition or removal as needed.

API Reference

Graph.getPluginInstance(key)

Retrieve the plugin instance specified by the key, used to access and operate the methods provided by the plugin.

getPluginInstance<T extends Plugin>(key: string): T;

Parameters

Parameter	Description	Type	Default	Required
key	Unique identifier of the plugin	string	-	✓

Return Value

Type: Plugin instance
Description: The plugin instance corresponding to the specified key

Note

Many plugins provide specific API methods, which can be directly called by obtaining the plugin instance. For example, the fullscreen plugin provides request() and exit() methods to control fullscreen status.

Example: Operate the fullscreen plugin

// Get the fullscreen plugin instance
const fullscreen = graph.getPluginInstance('fullscreen');

// Request to enter fullscreen
fullscreen.request();

// Exit fullscreen later
setTimeout(() => {
  fullscreen.exit();
}, 5000);

Graph.getPlugins()

Retrieve all configured plugins in the current graph.

getPlugins(): PluginOptions;

Return Value

Type: PluginOptions
Description: All configured plugins in the current graph

Example

// Get all plugin configurations
const plugins = graph.getPlugins();

// View currently active plugins
console.log('Current graph plugin configurations:', plugins);

Graph.setPlugins(plugins)

Set the graph's plugins, replacing all existing plugin configurations.

setPlugins(plugins: PluginOptions | ((prev: PluginOptions) => PluginOptions)): void;

Parameters

Parameter	Description	Type	Default	Required
plugins	New plugin configurations, or a function returning new configurations based on the current ones	PluginOptions \| ((prev: PluginOptions) => PluginOptions)	-	✓

Note

The set plugins will completely replace the original plugin configurations. To add new plugins based on existing ones, you can use functional updates:

graph.setPlugins((plugins) => [...plugins, { type: 'grid', key: 'grid-line' }]);

Example 1: Set basic plugins

// Set multiple basic plugins
graph.setPlugins([
  // String form (using default configuration)
  'minimap',

  // Object form (custom configuration)
  {
    type: 'grid',
    key: 'grid-line',
  },
  {
    type: 'toolbar',
    key: 'graph-toolbar',
    position: 'top-right',
  },
]);

Example 2: Use functional updates

// Add new plugins to existing configurations
graph.setPlugins((currentPlugins) => [
  ...currentPlugins,
  {
    type: 'grid',
    key: 'grid-line',
  },
]);

// Replace specific plugins
graph.setPlugins((currentPlugins) => {
  // Filter out existing grid plugins
  const filteredPlugins = currentPlugins.filter((plugin) => {
    if (typeof plugin === 'string') return plugin !== 'grid';
    if (typeof plugin === 'function') return true;
    return plugin.type !== 'grid';
  });

  // Add new grid plugin configuration
  return [
    ...filteredPlugins,
    {
      type: 'grid',
      key: 'new-grid',
      follow: true,
    },
  ];
});

Graph.updatePlugin(plugin)

Update the configuration of a specified plugin, identified by the key of the plugin to be updated.

updatePlugin(plugin: UpdatePluginOption): void;

Parameters

Parameter	Description	Type	Default	Required
plugin	Configuration of the plugin to be updated	UpdatePluginOption	-	✓

Note

To update a plugin, the key field must be specified in the original plugin configuration to accurately locate and update the plugin.

Example 1: Update plugin configuration

// Specify key when initially setting plugins
graph.setPlugins([
  {
    type: 'grid',
    key: 'main-grid',
    follow: true,
  },
]);

// Update grid plugin configuration
graph.updatePlugin({
  key: 'main-grid',
  follow: false,
});

Type Definitions

PluginOptions

Plugin configuration type, representing an array of plugin configurations.

type PluginOptions = (string | CustomPluginOption | ((this: Graph) => CustomPluginOption))[];

CustomPluginOption

Custom plugin configuration interface, used to configure plugin parameters.

type CustomPluginOption = {
  // Plugin type
  type: string;

  // Plugin key, i.e., unique identifier
  // Used to identify the plugin for further operations
  key?: string;

  // Other configuration items for different types of plugins
  [configKey: string]: any;
};

UpdatePluginOption

Configuration interface for updating plugins, used to dynamically modify plugin parameters.

type UpdatePluginOption = {
  // Unique identifier of the plugin to be updated
  key: string;

  // Other configuration items to be updated
  [configKey: string]: unknown;
};

Overview of Plugins

The plugin system is designed to follow the "plug and play" principle, allowing dynamic addition or removal as needed.

API Reference

Graph.getPluginInstance(key)

Retrieve the plugin instance specified by the key, used to access and operate the methods provided by the plugin.

getPluginInstance<T extends Plugin>(key: string): T;

Parameters

Parameter	Description	Type	Default	Required
key	Unique identifier of the plugin	string	-	✓

Return Value

Type: Plugin instance
Description: The plugin instance corresponding to the specified key

Note

Example: Operate the fullscreen plugin

// Get the fullscreen plugin instance
const fullscreen = graph.getPluginInstance('fullscreen');

// Request to enter fullscreen
fullscreen.request();

// Exit fullscreen later
setTimeout(() => {
  fullscreen.exit();
}, 5000);

Graph.getPlugins()

Retrieve all configured plugins in the current graph.

getPlugins(): PluginOptions;

Return Value

Type: PluginOptions
Description: All configured plugins in the current graph

Example

// Get all plugin configurations
const plugins = graph.getPlugins();

// View currently active plugins
console.log('Current graph plugin configurations:', plugins);

Graph.setPlugins(plugins)

Set the graph's plugins, replacing all existing plugin configurations.

setPlugins(plugins: PluginOptions | ((prev: PluginOptions) => PluginOptions)): void;

Parameters

Parameter	Description	Type	Default	Required
plugins	New plugin configurations, or a function returning new configurations based on the current ones	PluginOptions \| ((prev: PluginOptions) => PluginOptions)	-	✓

Note

The set plugins will completely replace the original plugin configurations. To add new plugins based on existing ones, you can use functional updates:

graph.setPlugins((plugins) => [...plugins, { type: 'grid', key: 'grid-line' }]);

Example 1: Set basic plugins

// Set multiple basic plugins
graph.setPlugins([
  // String form (using default configuration)
  'minimap',

  // Object form (custom configuration)
  {
    type: 'grid',
    key: 'grid-line',
  },
  {
    type: 'toolbar',
    key: 'graph-toolbar',
    position: 'top-right',
  },
]);

Example 2: Use functional updates

// Add new plugins to existing configurations
graph.setPlugins((currentPlugins) => [
  ...currentPlugins,
  {
    type: 'grid',
    key: 'grid-line',
  },
]);

// Replace specific plugins
graph.setPlugins((currentPlugins) => {
  // Filter out existing grid plugins
  const filteredPlugins = currentPlugins.filter((plugin) => {
    if (typeof plugin === 'string') return plugin !== 'grid';
    if (typeof plugin === 'function') return true;
    return plugin.type !== 'grid';
  });

  // Add new grid plugin configuration
  return [
    ...filteredPlugins,
    {
      type: 'grid',
      key: 'new-grid',
      follow: true,
    },
  ];
});

Graph.updatePlugin(plugin)

Update the configuration of a specified plugin, identified by the key of the plugin to be updated.

updatePlugin(plugin: UpdatePluginOption): void;

Parameters

Parameter	Description	Type	Default	Required
plugin	Configuration of the plugin to be updated	UpdatePluginOption	-	✓

Note

To update a plugin, the key field must be specified in the original plugin configuration to accurately locate and update the plugin.

Example 1: Update plugin configuration

// Specify key when initially setting plugins
graph.setPlugins([
  {
    type: 'grid',
    key: 'main-grid',
    follow: true,
  },
]);

// Update grid plugin configuration
graph.updatePlugin({
  key: 'main-grid',
  follow: false,
});

Type Definitions

PluginOptions

Plugin configuration type, representing an array of plugin configurations.

type PluginOptions = (string | CustomPluginOption | ((this: Graph) => CustomPluginOption))[];

CustomPluginOption

Custom plugin configuration interface, used to configure plugin parameters.

type CustomPluginOption = {
  // Plugin type
  type: string;

  // Plugin key, i.e., unique identifier
  // Used to identify the plugin for further operations
  key?: string;

  // Other configuration items for different types of plugins
  [configKey: string]: any;
};

UpdatePluginOption

Configuration interface for updating plugins, used to dynamically modify plugin parameters.

type UpdatePluginOption = {
  // Unique identifier of the plugin to be updated
  key: string;

  // Other configuration items to be updated
  [configKey: string]: unknown;
};