diff --git a/.github/workflows/generate-website.yml b/.github/workflows/generate-website.yml index 5b8941127..052bca269 100644 --- a/.github/workflows/generate-website.yml +++ b/.github/workflows/generate-website.yml @@ -7,8 +7,9 @@ on: paths: - '.github/workflows/generate-website.yml' - '.nvmrc' - - 'packages/core/*' - - 'packages/website/*' + - 'packages/core/**/*' + - 'packages/website/**/*' + - '!packages/website/README.md' - 'package.json' jobs: diff --git a/packages/website/docs/usage/migrate-from-mxgraph.md b/packages/website/docs/usage/migrate-from-mxgraph.md index b5dbf28e2..ae5d181a7 100644 --- a/packages/website/docs/usage/migrate-from-mxgraph.md +++ b/packages/website/docs/usage/migrate-from-mxgraph.md @@ -41,7 +41,12 @@ npm uninstall mxgraph ```shell 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` @@ -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`. 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 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()`. - `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` 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()` -change types ??????? +**TODO** change types ??????? #### `format()` @@ -208,6 +225,9 @@ format:(value: number) => number The `mxGraph` class has been renamed to `Graph` in `maxGraph`. 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 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 -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 @@ -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. -ℹ️ 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` 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` @@ -296,6 +346,8 @@ Several functions from the `mxGraphDataModel` class have been moved to the `Cell - `isEdge()` - `getParent()` +Others were removed: +- `mxGraphModel.isVisible(cell)` see https://github.com/maxGraph/maxGraph/discussions/179#discussioncomment-5389942 for rationale ### 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()`. #### `InternalEvent` -- Use the `eventUtils.PAN_START` property instead of `mxEvent.PAN_START`. -- Use the `eventUtils.PAN_END` property instead of `mxEvent.PAN_END`. -- Use the `eventUtils.addMouseWheelListener()` method instead of `mxEvent.addMouseWheelListener()`. -- Use the `eventUtils.consume()` method instead of `mxEvent.consume()`. +- Use the `InternalEvent.PAN_START` property instead of `mxEvent.PAN_START`. +- Use the `InternalEvent.PAN_END` property instead of `mxEvent.PAN_END`. +- Use the `InternalEvent.addMouseWheelListener()` method instead of `mxEvent.addMouseWheelListener()`. +- Use the `InternalEvent.consume()` method instead of `mxEvent.consume()`. ### Styling