docs: improve the migration guide from mxGraph (#271)
Provide various improvements - fix `InternalEvent` - improve `Client` - improve explanations about plugins - removed `mxUtils` methods - removed `isVisible` methods Also use more admonitions.development
parent
17f31fcc5c
commit
d46e99a114
|
@ -7,8 +7,9 @@ on:
|
||||||
paths:
|
paths:
|
||||||
- '.github/workflows/generate-website.yml'
|
- '.github/workflows/generate-website.yml'
|
||||||
- '.nvmrc'
|
- '.nvmrc'
|
||||||
- 'packages/core/*'
|
- 'packages/core/**/*'
|
||||||
- 'packages/website/*'
|
- 'packages/website/**/*'
|
||||||
|
- '!packages/website/README.md'
|
||||||
- 'package.json'
|
- 'package.json'
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
|
|
|
@ -41,7 +41,12 @@ npm uninstall mxgraph
|
||||||
```shell
|
```shell
|
||||||
npm install maxgraph@core
|
npm install maxgraph@core
|
||||||
```
|
```
|
||||||
ℹ️ The `maxgraph@core` package contains the core functionality of `maxGraph`.
|
|
||||||
|
:::info
|
||||||
|
|
||||||
|
The `maxgraph@core` package contains the core functionality of `maxGraph`.
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
### Initialize `maxGraph`
|
### Initialize `maxGraph`
|
||||||
|
|
||||||
|
@ -107,7 +112,11 @@ Here are some general guidelines to keep in mind when migrating from `mxGraph` t
|
||||||
This section outlines specific code changes required when migrating from `mxGraph` to `maxGraph`.
|
This section outlines specific code changes required when migrating from `mxGraph` to `maxGraph`.
|
||||||
Please update your code accordingly.
|
Please update your code accordingly.
|
||||||
|
|
||||||
> **Note:** Much information is available at https://github.com/maxGraph/maxGraph/pull/70.
|
:::note
|
||||||
|
|
||||||
|
A wide range of information is available at https://github.com/maxGraph/maxGraph/pull/70.
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
### Overlay
|
### Overlay
|
||||||
The `strokewidth` property has been renamed to `strokeWidth` in `maxGraph`.
|
The `strokewidth` property has been renamed to `strokeWidth` in `maxGraph`.
|
||||||
|
@ -144,6 +153,14 @@ Several functions in `mxUtils` have been moved to their own namespaces in `maxGr
|
||||||
- `getXml`(): Update your code to use `xmlUtils.getXml()` instead of `mxUtils.getXml()`.
|
- `getXml`(): Update your code to use `xmlUtils.getXml()` instead of `mxUtils.getXml()`.
|
||||||
- `createXmlDocument()`: Update your code to use `xmlUtils.createXmlDocument()` instead of `mxUtils.createXmlDocument()`.
|
- `createXmlDocument()`: Update your code to use `xmlUtils.createXmlDocument()` instead of `mxUtils.createXmlDocument()`.
|
||||||
|
|
||||||
|
|
||||||
|
### Removed methods from `mxUtils`
|
||||||
|
|
||||||
|
The following methods of `mxUtils` have been removed without replacements in `maxGraph`. Use your own implementation or 3rd party libraries instead:
|
||||||
|
- `mxUtils.button`
|
||||||
|
- `mxUtils.error`
|
||||||
|
|
||||||
|
|
||||||
### `mxAbstractCanvas2D`
|
### `mxAbstractCanvas2D`
|
||||||
|
|
||||||
The `mxAbstractCanvas2D` class has been renamed to `AbstractCanvas2D` in `maxGraph`, and there is a parameter type change in one of its methods.
|
The `mxAbstractCanvas2D` class has been renamed to `AbstractCanvas2D` in `maxGraph`, and there is a parameter type change in one of its methods.
|
||||||
|
@ -186,7 +203,7 @@ const canvas = new SvgCanvas2D(svgElement, oneBoolean);
|
||||||
|
|
||||||
#### `getAlternateText()`
|
#### `getAlternateText()`
|
||||||
|
|
||||||
change types ???????
|
**TODO** change types ???????
|
||||||
|
|
||||||
#### `format()`
|
#### `format()`
|
||||||
|
|
||||||
|
@ -208,6 +225,9 @@ format:(value: number) => number
|
||||||
The `mxGraph` class has been renamed to `Graph` in `maxGraph`.
|
The `mxGraph` class has been renamed to `Graph` in `maxGraph`.
|
||||||
There have also been some changes related to properties and methods.
|
There have also been some changes related to properties and methods.
|
||||||
|
|
||||||
|
Some properties have been removed in favor of the usage of plugins. Plugins are registered at the Graph initialization by passing
|
||||||
|
an array of plugins to the constructor.
|
||||||
|
|
||||||
#### `panningHandler` property
|
#### `panningHandler` property
|
||||||
|
|
||||||
The `panningHandler` property has been removed and replaced by a plugin. Instead of accessing `panningHandler` directly, you can use the `getPlugin()` method to get the `PanningHandler` plugin instance. Here's an example:
|
The `panningHandler` property has been removed and replaced by a plugin. Instead of accessing `panningHandler` directly, you can use the `getPlugin()` method to get the `PanningHandler` plugin instance. Here's an example:
|
||||||
|
@ -269,7 +289,25 @@ graph.insertEdge({ parent, id, value, source, target, style });
|
||||||
|
|
||||||
|
|
||||||
### Client
|
### Client
|
||||||
renamed properties: TODO which
|
|
||||||
|
The `mxClient` class has been removed into `Client`.
|
||||||
|
|
||||||
|
Removed properties
|
||||||
|
- `defaultBundles`
|
||||||
|
- `mxForceIncludes`: it was used to force loading the JavaScript files in development mode in mxGraph. We are not
|
||||||
|
managing development mode in that way anymore.
|
||||||
|
- `mxLoadResources`: not used anymore
|
||||||
|
- `mxLoadStylesheets`: not used anymore
|
||||||
|
- `mxResourceExtension`: it was only used in `Translations`, so only keep the property in `Translations`
|
||||||
|
|
||||||
|
Removed methods
|
||||||
|
- `setForceIncludes`: the `mxForceIncludes` property has been removed
|
||||||
|
- `setLoadResources`: the `mxLoadResources` property has been removed
|
||||||
|
- `setLoadStylesheets`: the `mxLoadStylesheets` property has been removed
|
||||||
|
- `setResourceExtension`: the `mxResourceExtension` property has been removed
|
||||||
|
|
||||||
|
Moved methods
|
||||||
|
- `link` method moved and renamed `domUtils.addLinkToHead`
|
||||||
|
|
||||||
|
|
||||||
### Cell manipulation
|
### Cell manipulation
|
||||||
|
@ -278,13 +316,25 @@ Only the functions for mxCell/Cell remain. See https://github.com/maxGraph/maxGr
|
||||||
|
|
||||||
|
|
||||||
Some functions previously available in `mxGraph` and `mxGraphModel` have been removed. These functions allowed for customizing the behavior of `mxGraphModel` and `mxCell`. However, now only the functions specific to `mxCell`/`Cell` remain.
|
Some functions previously available in `mxGraph` and `mxGraphModel` have been removed. These functions allowed for customizing the behavior of `mxGraphModel` and `mxCell`. However, now only the functions specific to `mxCell`/`Cell` remain.
|
||||||
ℹ️ You can find more information about these changes in the following GitHub pull request: https://github.com/maxGraph/maxGraph/pull/24.
|
|
||||||
|
:::note
|
||||||
|
|
||||||
|
You can find more information about these changes in the following GitHub pull request: https://github.com/maxGraph/maxGraph/pull/24.
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
#### `mxCell`
|
#### `mxCell`
|
||||||
|
|
||||||
The `mxCell` class has been renamed to `Cell` for simplicity.
|
The `mxCell` class has been renamed to `Cell` for simplicity.
|
||||||
|
|
||||||
The `style` property of `Cell` has undergone a type change from `string` to `CellStyle`.
|
The `style` property of `Cell` has undergone a type change from `string` to `CellStyle`. See the paragraph about "Migration of specific style properties applied to dedicated cells"
|
||||||
|
for more details about how to migrate the style property.
|
||||||
|
|
||||||
|
|
||||||
|
#### `mxGraph`
|
||||||
|
|
||||||
|
Some methods were removed:
|
||||||
|
- `mxGraph.isCellVisible(cell)` see https://github.com/maxGraph/maxGraph/discussions/179#discussioncomment-5389942 for rationale
|
||||||
|
|
||||||
|
|
||||||
#### `mxGraphDataModel`
|
#### `mxGraphDataModel`
|
||||||
|
@ -296,6 +346,8 @@ Several functions from the `mxGraphDataModel` class have been moved to the `Cell
|
||||||
- `isEdge()`
|
- `isEdge()`
|
||||||
- `getParent()`
|
- `getParent()`
|
||||||
|
|
||||||
|
Others were removed:
|
||||||
|
- `mxGraphModel.isVisible(cell)` see https://github.com/maxGraph/maxGraph/discussions/179#discussioncomment-5389942 for rationale
|
||||||
|
|
||||||
### Misc
|
### Misc
|
||||||
|
|
||||||
|
@ -315,10 +367,10 @@ The event handling mechanism in `maxGraph` has been updated. Use the following g
|
||||||
- Use the `eventUtils.isLeftMouseButton()` method, to detect mouse events, instead of `mxEvent.isLeftMouseButton()`.
|
- Use the `eventUtils.isLeftMouseButton()` method, to detect mouse events, instead of `mxEvent.isLeftMouseButton()`.
|
||||||
|
|
||||||
#### `InternalEvent`
|
#### `InternalEvent`
|
||||||
- Use the `eventUtils.PAN_START` property instead of `mxEvent.PAN_START`.
|
- Use the `InternalEvent.PAN_START` property instead of `mxEvent.PAN_START`.
|
||||||
- Use the `eventUtils.PAN_END` property instead of `mxEvent.PAN_END`.
|
- Use the `InternalEvent.PAN_END` property instead of `mxEvent.PAN_END`.
|
||||||
- Use the `eventUtils.addMouseWheelListener()` method instead of `mxEvent.addMouseWheelListener()`.
|
- Use the `InternalEvent.addMouseWheelListener()` method instead of `mxEvent.addMouseWheelListener()`.
|
||||||
- Use the `eventUtils.consume()` method instead of `mxEvent.consume()`.
|
- Use the `InternalEvent.consume()` method instead of `mxEvent.consume()`.
|
||||||
|
|
||||||
|
|
||||||
### Styling
|
### Styling
|
||||||
|
|
Loading…
Reference in New Issue