Editor API overview
Editor methods
| Name | Description |
|---|---|
| import() | Imports data from an existing diagram into the editor |
| paint() | Repaints the editor |
| parse() | Loads data into the editor from a local data source |
| serialize() | Serializes the data of the editor into an array of JSON objects |
| setViewMode() | Sets the mode of Diagram Editor |
| zoomIn() | Zooms in the diagram |
| zoomOut() | Zooms out the diagram |
Editor events
| Name | Description |
|---|---|
| afterGroupMove | Fires when a group or swimlane is moved one grid step |
| afterItemCatch | Fires after an item is caught |
| afterItemMove | Fires when an item is moved one grid step |
| afterLineTitleMove | Fires when a text element of a line is moved one grid step |
| afterShapeIconClick | Fires after clicking a control in the per-item toolbar |
| afterShapeMove | Fires when a shape is moved one grid step |
| applyButton | Fires after the Apply All button has been clicked |
| autoLayout | Fires after the Auto Layout button has been clicked |
| beforeGroupMove | Fires before a group or swimlane is moved |
| beforeItemCatch | Fires before an item is caught |
| beforeItemMove | Fires before an item is moved |
| beforeLineTitleMove | Fires before a text element of a line is moved |
| beforeShapeIconClick | Fires before clicking a control in the per-item toolbar |
| beforeShapeMove | Fires before a shape is moved |
| changeGridStep | Fires after the value of the grid step has been changed |
| exportData | Fires after the Export Data button has been clicked |
| groupMoveEnd | Fires after a group or swimlane is moved |
| importData | Fires after the Import Data button has been clicked |
| itemMoveEnd | Fires after an item is moved |
| itemTarget | Fires when the moved item is under the target item |
| lineTitleMoveEnd | Fires after a text element of a line is moved |
| resetButton | Fires after the Reset Changes button has been clicked |
| shapeMoveEnd | Fires after a shape is moved |
| shapeResize | Fires after a shape has been resized |
| visibility | Fires after the Visibility button has been clicked |
| zoomIn | Fires after the Zoom In button has been clicked |
| zoomOut | Fires after the Zoom Out button has been clicked |
In addition to the events listed above, you may also apply events of the diagram object while working in the editor. Here is an example of applying the itemClick event of the Diagram object in the editor:
editor.diagram.events.on("itemClick", (id, event) => {
console.log(id, event);
});
Editor properties
| Name | Description |
|---|---|
| autoplacement | Optional. An object with configuration settings for auto-placement of shapes |
| controls | Optional. An object with settings to define which controls should be shown/hidden in the toolbar of the editor |
| defaults | Optional. An object which sets the default configuration of a shape or line |
| editMode | Optional. Hides/shows the left/right panels of the editor |
| gapPreview | Optional. Specifies the space between the items rendered in the left panel |
| gridStep | Optional. Sets the size of a grid step that defines the step of moving an item |
| itemsDraggable | Optional. Enables/disables dragging the item from one parent item to another |
| lineConfig | Optional. An object with default configuration for the newly added connector lines |
| Deprecated! | |
| magnetic | Optional. Defines whether snap lines should be shown when moving a shape. If so, allows configuring their appearance |
| reservedWidth | Optional. Defines the left offset for the diagram |
| scale | Optional. Defines the diagram editor scale |
| scalePreview | Optional. Defines the scale of items rendered in the left panel of the editor |
| shapeBarWidth | Optional. Sets the width of the left panel of the editor |
| shapeSections | Optional. An object which specifies sections of items that will be shown in the left panel of the editor |
| shapeToolbar | Optional. Defines which controls should be shown in the personal toolbar of diagram items |
| shapeType | Optional. The type of the items |
| type | Required. Specifies the mode of the diagram editor |
HistoryManager API
HistoryManager works automatically by default. In case you need manual application of HistoryManager use the construction editor.history.
HistoryManager methods
| Name | Description |
|---|---|
| add() | Adds a new state |
| disable() | Blocks HistoryManager |
| enable() | Restarts the work of HistoryManager, saving the current state as initial state |
| isRedo() | Checks whether the current HistoryManager state is in the ending state |
| redo() | Takes a step forward in the history of changes |
| reset() | Resets previous changes and saves the current state |
| undo() | Takes a step back in the history of changes |
HistoryManager properties
| Name | Description |
|---|---|
| disabled | Enables/disables the work of HistoryManager |
| saveDelay | Sets the time interval for saving the current state in ms |