Skip to main content

Editor API overview

Editor methods

NameDescription
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

NameDescription
afterGroupMoveFires when a group or swimlane is moved one grid step
afterItemCatchFires after an item is caught
afterItemMoveFires when an item is moved one grid step
afterLineTitleMoveFires when a text element of a line is moved one grid step
afterShapeIconClickFires after clicking a control in the per-item toolbar
afterShapeMoveFires when a shape is moved one grid step
applyButtonFires after the Apply All button has been clicked
autoLayoutFires after the Auto Layout button has been clicked
beforeGroupMoveFires before a group or swimlane is moved
beforeItemCatchFires before an item is caught
beforeItemMoveFires before an item is moved
beforeLineTitleMoveFires before a text element of a line is moved
beforeShapeIconClickFires before clicking a control in the per-item toolbar
beforeShapeMoveFires before a shape is moved
changeGridStepFires after the value of the grid step has been changed
exportDataFires after the Export Data button has been clicked
groupMoveEndFires after a group or swimlane is moved
importDataFires after the Import Data button has been clicked
itemMoveEndFires after an item is moved
itemTargetFires when the moved item is under the target item
lineTitleMoveEndFires after a text element of a line is moved
resetButtonFires after the Reset Changes button has been clicked
shapeMoveEndFires after a shape is moved
shapeResizeFires after a shape has been resized
visibilityFires after the Visibility button has been clicked
zoomInFires after the Zoom In button has been clicked
zoomOutFires 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

NameDescription
autoplacementOptional. An object with configuration settings for auto-placement of shapes
controlsOptional. An object with settings to define which controls should be shown/hidden in the toolbar of the editor
defaultsOptional. An object which sets the default configuration of a shape or line
editModeOptional. Hides/shows the left/right panels of the editor
gapPreviewOptional. Specifies the space between the items rendered in the left panel
gridStepOptional. Sets the size of a grid step that defines the step of moving an item
itemsDraggableOptional. Enables/disables dragging the item from one parent item to another
lineConfigOptional. An object with default configuration for the newly added connector lines
lineGapOptional. Adds an offset for two connected shapes, and fills the gap with an additional line
reservedWidthOptional. Defines the left offset for the diagram
scaleOptional. Defines the diagram editor scale
scalePreviewOptional. Defines the scale of items rendered in the left panel of the editor
shapeBarWidthOptional. Sets the width of the left panel of the editor
shapeSectionsOptional. An object which specifies sections of items that will be shown in the left panel of the editor
shapeToolbarOptional. Defines which controls should be shown in the personal toolbar of diagram items
shapeTypeOptional. The type of the items
typeRequired. 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

NameDescription
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

NameDescription
disabledEnables/disables the work of HistoryManager
saveDelaySets the time interval for saving the current state in ms