If you only configured `typeroots` to add the `typed-mxgraph` types, remove the line to restore the [TypeScript defaults](https://www.typescriptlang.org/tsconfig/#typeRoots).
## 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 with `mx`. This prefix has been dropped in `maxGraph`.
- 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`.
The `mxAbstractCanvas2D` class has been renamed to `AbstractCanvas2D` in `maxGraph`, and there is a parameter type change in one of its methods.
#### `arcTo()`
The `arcTo()` method in `AbstractCanvas2D` has updated parameter types. The `largeArcFlag` and `sweepFlag` parameters, which were previously of type `number`, are now of type `boolean`.
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:
**Before**
```typescript
// Old way to access panningHandler
const panningHandler = graph.panningHandler;
```
**Now**
```typescript
// Updated way using getPlugin()
const panningHandler = this.graph.getPlugin('PanningHandler') as PanningHandler;
The `insertVertex()` and `insertEdge()` methods in `maxGraph` now also accept one object as parameter instead of multiple parameters. Instead of passing individual parameters, you can pass an object containing all the required properties.
Functions that existed in mxGraph and mxGraphModel have been removed. They provided a way to extend/override the default behavior of mxGraphModel or mxCell.
Only the functions for mxCell/Cell remain. See https://github.com/maxGraph/maxGraph/pull/24
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.
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
- Style of a Cell: a string containing all properties and values, using a specific syntax and delimiter.
- Style of a State Cell: a `StyleMap` instance (See [StyleMap](https://github.com/typed-mxgraph/typed-mxgraph/blob/187dd4f0dc7644c0cfbc998dae5fc90879597d81/lib/view/mxStylesheet.d.ts#L2-L4) as a `typed-mxgraph` type).
`maxGraph`
- Default styles defined via `StyleSheet`.
- Style of a Cell: a dedicated `CellStyle` object that reuses the same properties as the string form used by mxGraph (see below for changes).
- Style of a State Cell: a `CellStateStyle` instance.
#### Properties
In `mxGraph`, the properties are defined as string. The property keys are defined in `mxConstants` and are prefixed by `STYLE_` like `mxConstants.STYLE_FILLCOLOR`.
In `maxGraph`, they are object properties. `mxConstants.STYLE_*` have been replaced by the object properties (see PR [#31](https://github.com/maxGraph/maxGraph/pull/31)).
Property names and values are generally the same as in `mxGraph`. The ones that change are listed below.
<aname="style-properties-change"></a>
Property renaming
-`autosize` to `autoSize` (from maxgraph@0.2.0)
Property type changed from `number` (0 or 1) to `boolean` (if not specified, from maxgraph@0.1.0):
### Migration of default styles defined with StyleSheet
**TODO: what is a StyleSheet? link to JSDoc/code**
The migration consists of converting [`StyleMap`](https://github.com/typed-mxgraph/typed-mxgraph/blob/187dd4f0dc7644c0cfbc998dae5fc90879597d81/lib/view/mxStylesheet.d.ts#L2-L4) objects to `CellStyle` objects.
If you have been using string or named properties, you can keep that syntax.
You just need to rename the property or update its value as described in (TODO anchor to properties change paragraph)
```ts
style['propertyName1'] = value1
style.propertyName2 = value2
```
If you used `mxConstants`, remove it and use named properties instead.
```ts
// mxGraphStyle is a StyleMap
mxGraphStyle[mxConstants.STYLE_STARTSIZE] = 8
// maxGraph style is a CellStyle
style['startSize'] = 8;
// or
style.startSize = 8;
```
### Migration of specific style properties applied to dedicated cells
- **TODO: what is a style? link to JSDoc/code**
#### `mxGraph` style
[mxGraph line 50](https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/view/mxGraph.js#L50-L62)
> For a named style, the the stylename must be the first element
of the cell style:
(code)
stylename;image=http://www.example.com/image.gif
(end)
A cell style can have any number of key=value pairs added, divided
by a semicolon as follows:
(code)
[stylename;|key=value;]
(end)
[mxGraph line 167](https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/view/mxGraph.js#L167-L171)
> Styles are a collection of key, value pairs and a stylesheet is a collection
of named styles. The names are referenced by the cellstyle, which is stored
Be aware of the properties that have been renamed or whose value types have changed, as described in the [style-properties-change](./migrate-from-mxgraph.md#style-properties-change) paragraph.
// Now using the insertVertex method taking a single parameter
graph.insertVertex({
...
style: {
baseStyleNames: ['style1', 'style2']
shape: 'cylinder',
strokeWidth: 2,
fillColor: '#ffffff'
}
});
```
**Special migration case**
In `mxGraph`, to not merge properties of the default style, the style string must start with a `;` (semicolon) as in `;style1;style2;prop1=value1;.....`.
> To override the default style for a cell, add a leading semicolon to the style definition, e.g. ;shadow=1
This is currently not supported in maxGraph: https://github.com/maxGraph/maxGraph/issues/154 "Add a way to not use default style properties when calculating cell styles".
From version 0.6.0 of `maxGraph`, codecs supplied by maxGraph are no longer registered by default, they ** MUST** be registered before performing an `encode` or `decode`
