Skip to main content

Plugins

warning

The plugin system is still under development and the API is subject to change.

info

The code examples provided on this page are written in TypeScript. Don't forget to adapt them if you use JavaScript.

Introduction​

The maxGraph plugins system aims to:

  • reduce coupling in the code, in particular in the Graph class
  • improve the tree-shaking
  • provide extension points

Historically, the Graph class coming from mxGraph was a monolithic class that included all the features. In particular, it contained a large number of handler instances that were gradually phased out and turned into plugins.

For more details about discussions and decisions, refer to the following discussions:

Retrieving and Using a Plugin​

Use the getPlugin method to retrieve a plugin instance from a Graph instance and then call the methods or properties it provides:

const graph = new Graph(container);
const panningHandler = graph.getPlugin<PanningHandler>('PanningHandler');
panningHandler.useLeftButtonForPanning = true;
panningHandler.ignoreCell = true;

Choosing the Plugins to Use​

The plugins to use can be specified when creating a Graph.

If no plugins are specified at the Graph instance construction, the default set of plugins available in maxGraph is used.

To use a new plugin in addition to the default set of plugins, simply add the plugin to the list of plugins passed to the Graph constructor. In the following example, the RubberBandHandler plugin is added to the default set of plugins:

const graph = new Graph(container, undefined, [
  ...getDefaultPlugins(),
  RubberBandHandler, // Enables rubber band selection
]);

It is also possible to use a dedicated set of plugins, in particular when extending some plugins provided out of the box by maxGraph.

In the following example:

  • a MyCustomConnectionHandler plugin is used instead of the default ConnectionHandler plugin
  • only a subset of the default plugins is used
const graph = new Graph(container, undefined, [
  CellEditorHandler,
  SelectionCellsHandler,
  MyCustomConnectionHandler,
  SelectionHandler,
]);

Creating a Custom Plugin​

A custom plugin is defined as a class:

  • It must implement the GraphPlugin interface.
  • Its constructor must satisfy the GraphPluginConstructor type.
  • It can provide new methods to extend existing API or introduce new behavior (using listeners for example).
class MyCustomPlugin implements GraphPlugin {
  static pluginId = 'my-custom-plugin';

  constructor(graph: Graph) {
    // Initialization and configuration code
  }
}