maxGraph JavaScript Integration with Webpack (selected features)
+
Display a test graph loaded from an XML source. Activated behaviours:
+
+
Panning: use mouse right button
+
Cells selection with Rubberband: use mouse left button
+
+
+
+
+
+
diff --git a/packages/js-example-selected-features/package.json b/packages/js-example-selected-features/package.json
new file mode 100644
index 0000000000..a7d9499a62
--- /dev/null
+++ b/packages/js-example-selected-features/package.json
@@ -0,0 +1,20 @@
+{
+ "name": "@maxgraph/js-example-webpack-selected-features",
+ "private": true,
+ "scripts": {
+ "dev": "webpack serve --open",
+ "build": "webpack --mode=production",
+ "preview": "http-server -c-1 dist"
+ },
+ "devDependencies": {
+ "copy-webpack-plugin": "~13.0.0",
+ "css-loader": "~7.1.2",
+ "http-server": "~14.1.1",
+ "html-webpack-plugin": "~5.6.3",
+ "mini-css-extract-plugin": "~2.9.2",
+ "style-loader": "~4.0.0",
+ "webpack": "~5.99.6",
+ "webpack-cli": "~6.0.1",
+ "webpack-dev-server": "~5.2.1"
+ }
+}
diff --git a/packages/js-example-selected-features/src/index.js b/packages/js-example-selected-features/src/index.js
new file mode 100644
index 0000000000..2e3fc8fc03
--- /dev/null
+++ b/packages/js-example-selected-features/src/index.js
@@ -0,0 +1,123 @@
+/*
+Copyright 2025-present The maxGraph project Contributors
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import '@maxgraph/core/css/common.css'; // required by RubberBandHandler
+import './style.css';
+import {
+ constants,
+ DomHelpers,
+ EdgeMarker,
+ Graph,
+ InternalEvent,
+ MarkerShape,
+ ModelXmlSerializer,
+ PanningHandler,
+ Perimeter,
+ RubberBandHandler,
+ SelectionCellsHandler,
+ SelectionHandler,
+ StyleRegistry,
+} from '@maxgraph/core';
+
+/**
+ * Create a custom implementation to not load all default built-in styles. This is because Graph registers them.
+ *
+ * In the future, we expect to have an implementation of Graph that does not do it.
+ * See https://github.com/maxGraph/maxGraph/issues/760
+ */
+class CustomGraph extends Graph {
+ /**
+ * Only registers the elements required for this example. Do not let Graph load all default built-in styles.
+ */
+ registerDefaults() {
+ // Register styles
+ StyleRegistry.putValue('rectanglePerimeter', Perimeter.RectanglePerimeter); // declared in the default vertex style, so must be registered to be used
+ MarkerShape.addMarker('classic', EdgeMarker.createArrow(2));
+ }
+}
+
+const xmlWithVerticesAndEdges = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+const initializeGraph = (container) => {
+ // Disables the built-in context menu
+ InternalEvent.disableContextMenu(container);
+
+ const graph = new CustomGraph(container, undefined, [
+ PanningHandler, // Enables panning with the mouse
+ RubberBandHandler, // Enables rubber band selection
+ SelectionCellsHandler, // Enables management of selected cells
+ SelectionHandler, // Enables selection with the mouse
+ ]);
+ graph.setPanning(true); // Use mouse right button for panning
+
+ const modelXmlSerializer = new ModelXmlSerializer(graph.model);
+ modelXmlSerializer.import(xmlWithVerticesAndEdges);
+
+ return graph;
+};
+
+// display the maxGraph version in the footer
+const footer = document.querySelector('footer');
+footer.innerText = `Built with maxGraph ${constants.VERSION}`;
+
+// Creates the graph inside the given container
+const container = document.querySelector('#graph-container');
+const graph = initializeGraph(container);
+
+// poor way to display the XML
+const popup = (content) => {
+ window.alert(content);
+};
+
+container.parentElement.appendChild(
+ DomHelpers.button('View Original XML', () => {
+ popup(xmlWithVerticesAndEdges);
+ })
+);
+container.parentElement.appendChild(
+ DomHelpers.button('Export XML', () => {
+ const xml = new ModelXmlSerializer(graph.model).export();
+ popup(xml);
+ })
+);
diff --git a/packages/js-example-selected-features/src/style.css b/packages/js-example-selected-features/src/style.css
new file mode 100644
index 0000000000..fd077a38a1
--- /dev/null
+++ b/packages/js-example-selected-features/src/style.css
@@ -0,0 +1,52 @@
+/*
+Copyright 2025-present The maxGraph project Contributors
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+body {
+ font-family: Avenir, Helvetica, Arial, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ color: #2c3e50;
+}
+
+h1 {
+ text-align: center;
+ margin-top: 3rem;
+}
+
+footer {
+ position: absolute;
+ bottom: 1rem;
+ right: 1rem;
+ z-index: 1;
+ font-weight: 800;
+}
+
+#graph-container {
+ border: #B0B0B0 1px solid;
+ height: 70vh;
+ overflow: hidden;
+}
+
+button {
+ margin-top: 1.5rem;
+ margin-left: .5rem;
+}
+
+/* For rubber band selection, override maxGraph defaults */
+div.mxRubberband {
+ border-color: #b18426;
+ background: #db9b0b;
+}
diff --git a/packages/js-example-selected-features/webpack.config.js b/packages/js-example-selected-features/webpack.config.js
new file mode 100644
index 0000000000..30d9ddeddc
--- /dev/null
+++ b/packages/js-example-selected-features/webpack.config.js
@@ -0,0 +1,45 @@
+// Generated using webpack-cli http://github.com/webpack-cli
+const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+// hack to get the webpack mode
+const isDevMode = !process.argv.includes('--mode=production');
+
+module.exports = {
+ mode: 'development',
+ entry: './src/index.js',
+ output: {
+ filename: '[name].[contenthash].js',
+ path: path.resolve(__dirname, 'dist'),
+ clean: true,
+ },
+ devServer: {
+ static: './dist',
+ },
+ module: {
+ rules: [
+ {
+ test: /\.css$/i,
+ use: [isDevMode ? 'style-loader' : MiniCssExtractPlugin.loader, 'css-loader'],
+ },
+ // @maxgraph/core is a dependency of this project but don't declare imports with js extension
+ // use this workaround to make webpack happy: https://github.com/webpack/webpack/issues/11467#issuecomment-691873586
+ {
+ test: /\.m?js/,
+ resolve: {
+ fullySpecified: false,
+ },
+ },
+ ],
+ },
+ plugins: [
+ new CopyWebpackPlugin({
+ patterns: [{ from: './favicon.svg', to: 'favicon.svg' }],
+ }),
+ new HtmlWebpackPlugin({
+ template: 'index.html',
+ }),
+ ].concat(isDevMode ? [] : [new MiniCssExtractPlugin()]),
+};
diff --git a/packages/js-example-without-defaults/README.md b/packages/js-example-without-defaults/README.md
index 5690f58c63..a1027d783a 100644
--- a/packages/js-example-without-defaults/README.md
+++ b/packages/js-example-without-defaults/README.md
@@ -1,6 +1,6 @@
# Integrate `maxGraph` without defaults in a vanilla JavaScript project built with Webpack
-Demonstrate how to integrate `maxGraph` without using defaults:
+Demonstrate how to integrate `maxGraph` without loading defaults:
- plugins
- styles
- shapes
diff --git a/packages/js-example/src/index.js b/packages/js-example/src/index.js
index c0e4a3e2c8..7b30ae7764 100644
--- a/packages/js-example/src/index.js
+++ b/packages/js-example/src/index.js
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import '@maxgraph/core/css/common.css';
+import '@maxgraph/core/css/common.css'; // required by RubberBandHandler
import './style.css';
import {
constants,
diff --git a/packages/ts-example-selected-features/README.md b/packages/ts-example-selected-features/README.md
new file mode 100644
index 0000000000..3ca9487d6f
--- /dev/null
+++ b/packages/ts-example-selected-features/README.md
@@ -0,0 +1,30 @@
+# Integrate `maxGraph` in a vanilla TypeScript project built with Vite - features selection
+
+This example only loads the features and configuration required by the application for an efficient tree-shaking.
+
+So, it demonstrates how to only register Shapes, Perimeters, EdgeMarkers and EdgeStyles used by the application.
+
+It also uses the following set of features:
+- Cells selection by mouse click or with Rubberband
+- Management of selected cells
+- Fit and zoom using buttons
+- Panning with mouse drag
+
+Note: This example should be kept in sync with the [ts-example](../ts-example) example as it replicates the same use case.
+
+Initialized from https://github.com/vitejs/vite/tree/v2.9.8/packages/create-vite/template-vanilla-ts
+
+## Setup
+
+Initialize all packages
+> From the repository root, run `npm install`.
+
+Build maxgraph@core
+> From the `packages/core` directory, run `npm run build`.
+
+## Run
+
+Run `npm run dev` and go to http://localhost:5173/
+
+If you want to bundle the application, run `npm run build` and then run `npm run preview` to access to a preview of the
+bundle application.
diff --git a/packages/ts-example-selected-features/favicon.svg b/packages/ts-example-selected-features/favicon.svg
new file mode 100644
index 0000000000..de4aeddc12
--- /dev/null
+++ b/packages/ts-example-selected-features/favicon.svg
@@ -0,0 +1,15 @@
+
diff --git a/packages/ts-example-selected-features/index.html b/packages/ts-example-selected-features/index.html
new file mode 100644
index 0000000000..d5ac9e9d2c
--- /dev/null
+++ b/packages/ts-example-selected-features/index.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+ maxGraph TypeScript Integration with Vite (selected features)
+
+
+
+
+
maxGraph TypeScript Integration with Vite, using selected features
+
Display a test graph. Activated behaviors:
+
+
Panning: use mouse right button
+
Cells selection: with Rubberband (use mouse left button), Ctrl+Click to select multiple cells
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/ts-example-selected-features/package.json b/packages/ts-example-selected-features/package.json
new file mode 100644
index 0000000000..a78d0b5661
--- /dev/null
+++ b/packages/ts-example-selected-features/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "@maxgraph/ts-example-vite-with-selected-features",
+ "license": "Apache-2.0",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "tsc --version && tsc && vite build --base ./",
+ "preview": "vite preview"
+ },
+ "devDependencies": {
+ "vite": "~6.2.0"
+ }
+}
diff --git a/packages/ts-example-selected-features/src/main.ts b/packages/ts-example-selected-features/src/main.ts
new file mode 100644
index 0000000000..2074e4a5bb
--- /dev/null
+++ b/packages/ts-example-selected-features/src/main.ts
@@ -0,0 +1,158 @@
+/*
+Copyright 2025-present The maxGraph project Contributors
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import '@maxgraph/core/css/common.css'; // required by RubberBandHandler
+import './style.css';
+import {
+ CellRenderer,
+ constants,
+ EdgeMarker,
+ EdgeStyle,
+ EllipseShape,
+ FitPlugin,
+ Graph,
+ InternalEvent,
+ MarkerShape,
+ PanningHandler,
+ Perimeter,
+ RubberBandHandler,
+ SelectionCellsHandler,
+ SelectionHandler,
+ StyleRegistry,
+} from '@maxgraph/core';
+
+/**
+ * Create a custom implementation to not load all default built-in styles. This is because Graph registers them.
+ *
+ * In the future, we expect to have an implementation of Graph that does not do it.
+ * See https://github.com/maxGraph/maxGraph/issues/760
+ */
+class CustomGraph extends Graph {
+ /**
+ * Only registers the elements required for this example. Do not let Graph load all default built-in styles.
+ */
+ protected override registerDefaults() {
+ // Register shapes
+ // RectangleShape is not registered here because it is always available. It is the fallback shape for vertices when no shape is returned by the registry
+ CellRenderer.registerShape('ellipse', EllipseShape);
+
+ // Register styles
+ StyleRegistry.putValue('ellipsePerimeter', Perimeter.EllipsePerimeter);
+ StyleRegistry.putValue('rectanglePerimeter', Perimeter.RectanglePerimeter); // declared in the default vertex style, so must be registered to be used
+ StyleRegistry.putValue('orthogonalEdgeStyle', EdgeStyle.OrthConnector);
+
+ const arrowFunction = EdgeMarker.createArrow(2);
+ MarkerShape.addMarker('classic', arrowFunction);
+ MarkerShape.addMarker('block', arrowFunction);
+ }
+}
+
+const initializeGraph = (container: HTMLElement) => {
+ // Disables the built-in context menu
+ InternalEvent.disableContextMenu(container);
+
+ const graph = new CustomGraph(container, undefined, [
+ FitPlugin, // Enables the fitCenter method
+ PanningHandler, // Enables panning with the mouse
+ RubberBandHandler, // Enables rubber band selection
+ SelectionCellsHandler, // Enables management of selected cells
+ SelectionHandler, // Enables selection with the mouse
+ ]);
+ graph.setPanning(true); // Use mouse right button for panning
+
+ // create a dedicated style for "ellipse" to share properties
+ graph.getStylesheet().putCellStyle('myEllipse', {
+ perimeter: 'ellipsePerimeter',
+ shape: 'ellipse',
+ verticalAlign: 'top',
+ verticalLabelPosition: 'bottom',
+ });
+
+ // Adds cells to the model in a single step
+ graph.batchUpdate(() => {
+ const vertex01 = graph.insertVertex({
+ value: 'a regular rectangle',
+ position: [10, 10],
+ size: [100, 100],
+ });
+ const vertex02 = graph.insertVertex({
+ value: 'a regular ellipse',
+ position: [350, 90],
+ size: [50, 50],
+ style: {
+ baseStyleNames: ['myEllipse'],
+ fillColor: 'orange',
+ },
+ });
+ graph.insertEdge({
+ value: 'an orthogonal style edge',
+ source: vertex01,
+ target: vertex02,
+ style: {
+ edgeStyle: 'orthogonalEdgeStyle',
+ rounded: true,
+ },
+ });
+
+ const vertex11 = graph.insertVertex({
+ value: 'a custom rectangle',
+ position: [20, 200],
+ size: [100, 100],
+ style: {
+ fillColor: 'Chartreuse',
+ rounded: true,
+ strokeColor: 'Black',
+ strokeWidth: 3,
+ },
+ });
+ const vertex12 = graph.insertVertex({
+ value: 'a custom ellipse',
+ x: 150,
+ y: 350,
+ width: 70,
+ height: 70,
+ style: {
+ baseStyleNames: ['myEllipse'],
+ fillColor: 'Yellow',
+ strokeColor: 'Red',
+ strokeWidth: 5,
+ },
+ });
+ graph.insertEdge({
+ value: 'another edge',
+ source: vertex11,
+ target: vertex12,
+ style: { endArrow: 'block' },
+ });
+ });
+
+ return graph;
+};
+
+// display the maxGraph version in the footer
+const footer = document.querySelector('footer')!;
+footer.innerText = `Built with maxGraph ${constants.VERSION}`;
+
+// Creates the graph inside the given container
+const graph = initializeGraph(document.querySelector('#graph-container')!);
+
+// Control buttons
+document.getElementById('reset-zoom')!.addEventListener('click', () => {
+ graph.zoomActual();
+});
+document.getElementById('fit-center')!.addEventListener('click', () => {
+ graph.getPlugin('fit')?.fitCenter({ margin: 20 });
+});
diff --git a/packages/ts-example-selected-features/src/style.css b/packages/ts-example-selected-features/src/style.css
new file mode 100644
index 0000000000..fd9c02e283
--- /dev/null
+++ b/packages/ts-example-selected-features/src/style.css
@@ -0,0 +1,51 @@
+/*
+Copyright 2025-present The maxGraph project Contributors
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+body {
+ font-family: Avenir, Helvetica, Arial, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ color: #2c3e50;
+}
+
+h1 {
+ text-align: center;
+ margin-top: 3rem;
+}
+
+footer {
+ position: absolute;
+ bottom: 1rem;
+ right: 1rem;
+ z-index: 1;
+ font-weight: 800;
+}
+
+#graph-container {
+ border: #B0B0B0 1px solid;
+ height: 70vh;
+ overflow: hidden;
+}
+
+.controls {
+ margin-top: .75rem;
+}
+
+/* For rubber band selection, override maxGraph defaults */
+div.mxRubberband {
+ border-color: #b18426;
+ background: #db9b0b;
+}
diff --git a/packages/ts-example-selected-features/src/vite-env.d.ts b/packages/ts-example-selected-features/src/vite-env.d.ts
new file mode 100644
index 0000000000..11f02fe2a0
--- /dev/null
+++ b/packages/ts-example-selected-features/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/packages/ts-example-selected-features/tsconfig.json b/packages/ts-example-selected-features/tsconfig.json
new file mode 100644
index 0000000000..2aa41a6d7a
--- /dev/null
+++ b/packages/ts-example-selected-features/tsconfig.json
@@ -0,0 +1,14 @@
+{
+ "extends": "../../tsconfig.json",
+ "compilerOptions": {
+ "useDefineForClassFields": true,
+ "sourceMap": true,
+ "moduleResolution": "bundler",
+ "resolveJsonModule": true,
+ "noEmit": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noImplicitReturns": true
+ },
+ "include": ["src/*.ts"]
+}
diff --git a/packages/ts-example-selected-features/vite.config.js b/packages/ts-example-selected-features/vite.config.js
new file mode 100644
index 0000000000..1cf35ce529
--- /dev/null
+++ b/packages/ts-example-selected-features/vite.config.js
@@ -0,0 +1,33 @@
+/*
+Copyright 2022-present The maxGraph project Contributors
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { defineConfig } from 'vite';
+
+export default defineConfig(({ mode }) => {
+ return {
+ build: {
+ rollupOptions: {
+ output: {
+ manualChunks: {
+ // put the maxgraph code in a dedicated file. It lets know the size the produced bundle in an external application and if tree shaking works
+ maxgraph: ['@maxgraph/core'],
+ },
+ },
+ },
+ chunkSizeWarningLimit: 440, // @maxgraph/core
+ },
+ };
+});
diff --git a/packages/ts-example-without-defaults/README.md b/packages/ts-example-without-defaults/README.md
index 2aaaf42451..24814b0ea9 100644
--- a/packages/ts-example-without-defaults/README.md
+++ b/packages/ts-example-without-defaults/README.md
@@ -1,6 +1,6 @@
# Integrate `maxGraph` without defaults in a vanilla TypeScript project built with Vite
-Demonstrate how to integrate `maxGraph` without using defaults:
+Demonstrate how to integrate `maxGraph` without loading defaults:
- plugins
- styles
- shapes
diff --git a/packages/ts-example/README.md b/packages/ts-example/README.md
index 942f531912..cc946cfd6e 100644
--- a/packages/ts-example/README.md
+++ b/packages/ts-example/README.md
@@ -2,6 +2,13 @@
Demonstrate how to define and use custom `Shapes`.
+This example uses the following set of features:
+- Cells selection by mouse click or with Rubberband
+- Management of selected cells
+- Fit and zoom using buttons
+- Panning with mouse drag
+
+
Initialized from https://github.com/vitejs/vite/tree/v2.9.8/packages/create-vite/template-vanilla-ts
## Setup
diff --git a/packages/website/docs/demo-and-examples.md b/packages/website/docs/demo-and-examples.md
index 6e97c7804a..3068d3d2a4 100644
--- a/packages/website/docs/demo-and-examples.md
+++ b/packages/website/docs/demo-and-examples.md
@@ -26,10 +26,12 @@ Note that they are based on `maxGraph` features, which require the use of [CSS a
## TypeScript Examples
- the [ts-example](https://github.com/maxGraph/maxGraph/tree/main/packages/ts-example) project/application demonstrates how to define and use custom `Shapes` with `maxGraph`. It is a vanilla TypeScript application built by [Vite](https://vitejs.dev/).
+- the [ts-example-selected-features](https://github.com/maxGraph/maxGraph/tree/main/packages/ts-example-selected-features) project/application that demonstrates the same use case as in `ts-example` but which only loads the features and configuration required by the application for an efficient tree-shaking. It is a vanilla TypeScript application built by [Vite](https://vitejs.dev/).
- the [ts-example-without-defaults](https://github.com/maxGraph/maxGraph/tree/main/packages/ts-example-without-defaults) project/application demonstrates how to not use defaults plugins and style defaults (shapes, perimeters, ...). It is a vanilla TypeScript application built by [Vite](https://vitejs.dev/).
## JavaScript Examples
- the [js-example](https://github.com/maxGraph/maxGraph/tree/main/packages/js-example) project/application demonstrates how to import and export the `maxGraph` model with XML data. It is a vanilla JavaScript application built by [Webpack](https://webpack.js.org/).
+- the [js-example-selected-features](https://github.com/maxGraph/maxGraph/tree/main/packages/js-example-selected-features) project/application that demonstrates the same use case as in `ts-example` but which only loads the features and configuration required by the application for an efficient tree-shaking. It is a vanilla JavaScript application built by [Webpack](https://webpack.js.org/).
- the [js-example-without-defaults](https://github.com/maxGraph/maxGraph/tree/main/packages/js-example-without-defaults) project/application demonstrates how to not use defaults plugins and style defaults (shapes, perimeters, ...). It is a vanilla JavaScript application built by [Webpack](https://webpack.js.org/).
## Framework Integration and Bundlers