Editor API overview
Editor methods
| Name | Description |
|---|---|
| destructor() | Removes a diagram editor instance and releases occupied resources |
| 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 |
| 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 |
| 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 |
| groupMoveEnd | Fires after a group or swimlane is moved |
| itemMoveEnd | Fires after an item is moved |
| itemTarget | Fires when the moved item is hovering over the target item |
| lineTitleMoveEnd | Fires after a text element of a line is moved |
| shapeMoveEnd | Fires after a shape is moved |
| shapeResize | Fires after a shape has been resized |
| zoomIn | Fires after the Zoom In button is clicked or the zoomIn() method is called |
| zoomOut | Fires after the Zoom Out button is clicked or the zoomOut() method is called |
Editor properties
| Name | Description |
|---|---|
| autoplacement | Optional. An object with configuration settings for auto-placement of shapes |
| connectionPoints | Optional. Enables/disables an ability to connect shapes using connection controls |
| defaults | Optional. An object which sets the default configuration of a shape or a line |
| editMode | Optional. Hides/shows the left/right panels of the editor |
| grid | Optional. Enables/disables a grid that is displayed on the editor canvas |
| 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 |
| magnetic | Optional. Defines whether snap lines should be shown when moving a shape. If so, allows configuring their appearance |
| resizePoints | Optional. Enables/disables an ability to resize shapes using resize controls |
| scale | Optional. Defines the diagram editor scale |
| 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 |
| view | An object that configures Toolbar, Shapebar, and Editbar views of the Diagram Editor |