⚡ This new version introduces BaseGraph for better control over loaded features, adds new utilities to register default style elements, and significantly reduces bundle size! ⚡

Resources

• npm package: @maxgraph/core 0.18.0
• Fixed issues: milestone 0.18.0
• Documentation: maxgraph_0.18.0_website.zip
• Examples: maxgraph_0.18.0_examples.zip
• Changelog (only includes a summary and breaking changes): changelog

Highlights

🚀 Introducing BaseGraph

Historically, the Graph class has been the main entry point in maxGraph, just like it was in mxGraph.
It automatically loads default plugins and style elements, making it convenient for prototyping but less ideal for production use - it increases the bundle size by including features you might not even use.

With v0.18.0, you now have a better option:

• BaseGraph: an alternative to Graph that loads nothing by default. You choose what to include.
• AbstractGraph: a new abstract class with all the common logic, shared by both Graph and BaseGraph.
• Graph remains fully functional, but it's now built on top of AbstractGraph.

This is a big step toward full tree-shaking support!
More improvements are coming soon. Stay tuned! 📻

• Related PR: Introduce BaseGraph in #776

🛠 Usage of BaseGraph

BaseGraph also simplifies constructor usage:
Instead of many parameters (and sometimes lots of null), you now pass a single configuration object.

Example - Basic setup:

const graph = new BaseGraph({
  container: document.getElementById('graphContainer')!,
});

Example - Full configuration:

const graph = new BaseGraph({
  container: document.getElementById('graphContainer')!,
  model: new MyGraphDataModel(),
  stylesheet: new MyStylesheet(),
  plugins: [Plugin1, Plugin2],
  cellRenderer: new MyCellRenderer(),
  view: (graph: AbstractGraph) => new MyGraphView(graph),
  selectionModel: (graph: AbstractGraph) => new MyGraphSelectionModel(graph),
});

Compared to Graph, it's much cleaner - no need to extend classes just to customize internals!

⚡ Comparison: Graph Usage

When using the traditional Graph class, customization often requires class extension and overriding internal methods (createXXX) which makes the code heavier and less readable.

Example - Basic setup:

const graph = new Graph(document.getElementById('graphContainer')!);

Example - Full customization:

class MyCustomGraph extends Graph {
  override createCellRenderer(): CellRenderer {
    return new MyCellRenderer();
  }

  override createGraphView(): GraphView {
    return new MyGraphView(this);
  }

  override createSelectionModel(): GraphSelectionModel {
    return new MyGraphSelectionModel(this);
  }
}

const graph = new MyCustomGraph(
  document.getElementById('graphContainer')!,
  new MyGraphDataModel(),
  new MyStylesheet(),
  [Plugin1, Plugin2],
);


// If you want to override only some elements and not others, you might end up passing `undefined` explicitly:
// In case of the GraphDataModel and Stylesheet are managed by overriding `createGraphDataModel` and `createStylesheet` respectively
const graph = new MyCustomGraph(
  document.getElementById('graphContainer')!,
  undefined,
  undefined, 
  [Plugin1, Plugin2],
);

🎨 Easier Ways to Register Style Elements

Want to manually register default styles? New helper functions are available:

registerDefaultEdgeMarkers();
registerDefaultEdgeStyles();
registerDefaultPerimeters();
registerDefaultShapes();

Use them to selectively register only what your app actually needs!
If you need all built-in elements for a category, these helpers make it super easy.

• Related PR: #757

📦 Impact of BaseGraph on Bundle Size

Using BaseGraph with only the styles and plugins you need can drastically shrink your app's bundle size.
Tree-shaking now works better and smarter!

In our examples, switching to BaseGraph with a minimal setup gave measurable improvements, even with default bundler configs!
The "without-defaults" examples showed a decrease 105 kB!

🔬 Examples from the maxGraph repository

• the JS and TS examples doesn't cover the same use case
• the size mentioned here is the one of the whole application in the JS examples and the one of the maxGraph chunk in the TS examples

📖 See documentation for full example details.

• Related PRs: #774, #776, #779

🔬 Examples from the maxgraph-integration-examples repository

Integration projects also switched to BaseGraph, showing similar gains:

Fun fact:

• Removing the optional CellEditorHandler plugin in vite drops another ~12.5 kB!

• Related PRs: #214, #215

What's Changed

🎉 New Features

• feat: simplify types used to register shapes by @tbouffard in feat: simplify types used to register shapes #768
• feat(core): explicitly support undefined container in Graph constructor by @tbouffard in feat(core): explicitly support undefined container in Graph constructor #769
• feat: let register and unregister default style elements by @tbouffard in feat: let register and unregister default style elements #757
• feat: introduce examples that not rely on default plugins and styles by @tbouffard in feat: introduce examples that not rely on default plugins and styles #774
• feat: let efficiently not load default plugins and style builtins by @tbouffard in feat: let efficiently not load default plugins and style builtins #776
• feat: let serialize BaseGraph with Codecs by @tbouffard in feat: let serialize BaseGraph with Codecs #778

🐛 Bug Fixes

• fix: use the right list of excluded fields in GraphCodec by @tbouffard in fix: use the right list of excluded fields in GraphCodec #777

📝 Documentation

• docs: explain that the mxGraph migration guide is no longer updated by @tbouffard in docs: explain that the mxGraph migration guide is no longer updated #783

⚙️ Refactor

• refactor(type): explicitly declare the MouseListenerSet interface by @tbouffard in refactor(type): explicitly declare the MouseListenerSet interface #770
• refactor: reorganize builtin style elements by @tbouffard in refactor: reorganize builtin style elements #775
• refactor: use CellEditorHandler plugin in selected-features examples by @tbouffard in refactor: use CellEditorHandler plugin in selected-features examples #779

Full Changelog: v0.17.0...v0.18.0