Migrate from mxGraph
This documentation provides instructions for migrating from mxGraph
to maxGraph
.
It includes information about application setup changes, code changes, styles, event handling and other relevant information.
Here's a breakdown of the proposed changes:
This page is under construction.
Comments are welcome by creating an issue or starting a discussion!.
Feel free to create a Pull Request to enrich the content or fix errors.
The maxGraph
APIs are not fully compatible with the mxGraph
APIs, but the maxGraph
APIs are close to the former mxGraph
APIs.
The concepts are the same, so experienced mxGraph
users should be able to switch from mxGraph
to maxGraph
without problems.
The main changes are the removal of support for Internet Explorer (including VML support) and Legacy Edge.
The initial description of the changes has been described in #70.
Application setup
To migrate your application setup from mxGraph
to maxGraph
, follow these steps:
Replace the mxgraph
dependency with maxgraph@core
- Remove the
mxgraph
dependency from your project:
npm uninstall mxgraph
- Install the
maxgraph@core
dependency:
npm install maxgraph@core
The maxgraph@core
package contains the core functionality of maxGraph
.
Initialize maxGraph
In your application setup code, replace the mxGraph
initialization code that uses the factory
function with direct access to maxGraph
objects.
For example, if you had code like this in mxGraph
:
import factory from 'mxgraph';
const mxgraph = factory({});
const graph = mxgraph.mxGraph(container);
const point = new mxgraph.mxPoint(10, 50);
// ... more initialization code
Replace it with the corresponding code in maxGraph
:
import { Graph } from 'maxgraph';
const graph = new Graph(container);
const point = new Point(10, 50);
// ... more initialization code
TypeScript Setup
Remove the typed-mxgraph
dependency
If you used the @typed-mxgraph/typed-mxgraph
dependency in your project, remove it from your package.json
file:
npm uninstall @typed-mxgraph/typed-mxgraph
Remove typeroots
settings
Remove any typeroots
settings related to typed-mxgraph
from your tsconfig.json
file.
For example, if you have a configuration like this:
"typeroots": ["./node_modules/@types", "./node_modules/@typed-mxgraph/typed-mxgraph", ...]
Remove "./node_modules/@typed-mxgraph/typed-mxgraph"
.
If you only configured typeroots
to add the typed-mxgraph
types, remove the line to restore the TypeScript defaults.
General Guidelines
Here are some general guidelines to keep in mind when migrating from mxGraph
to maxGraph
:
- The names of
mxGraph
objects were all prefixed withmx
. This prefix has been dropped inmaxGraph
. - Most names remain the same, but some utility functions whose implementation is natively available in modern versions of ECMAScript have been removed.
Specific code changes
This section outlines specific code changes required when migrating from mxGraph
to maxGraph
.
Please update your code accordingly.
A wide range of information is available at https://github.com/maxGraph/maxGraph/pull/70.
Overlay
The strokewidth
property has been renamed to strokeWidth
in maxGraph
.
Shape
The shape names in maxGraph
have been updated to have a consistent postfix. Please update the shape names in your code as follows:
mxConnector
should be updated toConnectorShape
.mxEllipse
should be updated toEllipseShape
.mxImageShape
should be updated toImageShape
.mxRectangleShape
should be updated toRectangleShape
.mxMarker
should be updated toMarkerShape
.mxRhombus
should be updated toRhombusShape
.mxStencil
should be updated toStencilShape
.mxText
should be updated toTextShape
.
Additionally, some shape properties have been renamed:
- The
strokewidth
property should now be replaced bystrokeWidth
.
mxStencil
to StencilShape
In maxGraph@0.11.0, the allowEval
and defaultLocalized
properties have been removed. Configure these properties using StencilShapeConfig
.
mxUtils
split
Several functions in mxUtils
have been moved to their own namespaces in maxGraph
. Some remain in utils
.
Here are a few examples of the methods that have been moved.