The Editor class provides a high-level application wrapper around the Graph class, adding actions, UI components, undo/redo management, serialization, templates, and auto-layout capabilities. It is designed for building complete graph editing applications with toolbars, menus, keyboard shortcuts, and file operations.
For information about the core graph functionality being wrapped, see Graph and AbstractGraph. For details on the underlying data model, see GraphDataModel and Cell System.
The Editor class packages/core/src/editor/Editor.ts391 extends EventSource to implement an application-level wrapper that:
execute(actionName, cell)EditorToolbar, EditorPopupMenu, and EditorKeyHandler for user interactionUndoManagerreadGraphModel() and writeGraphModel()Sources: packages/core/src/editor/Editor.ts66-390
| Component | Type | Purpose | File Reference |
|---|---|---|---|
graph | AbstractGraph | The wrapped graph instance | packages/core/src/editor/Editor.ts513 |
undoManager | UndoManager | Command history management | packages/core/src/editor/Editor.ts541 |
toolbar | EditorToolbar | Toolbar UI component | packages/core/src/editor/Editor.ts525 |
popupHandler | EditorPopupMenu | Context menu handler | packages/core/src/editor/Editor.ts536 |
keyHandler | EditorKeyHandler | Keyboard event handler | packages/core/src/editor/Editor.ts547 |
actions | { [key: string]: Function } | Named action registry | packages/core/src/editor/Editor.ts556 |
templates | any | Prototype cell registry | packages/core/src/editor/Editor.ts624 |
The Editor constructor packages/core/src/editor/Editor.ts402-433 initializes these collaborators and invokes configure(config) to process XML configuration.
Sources: packages/core/src/editor/Editor.ts402-433 packages/core/src/editor/Editor.ts513-556
The actions map packages/core/src/editor/Editor.ts556 stores functions that take the Editor as the first argument and an optional Cell as the second argument:
Action Registration Diagram:
The addAction() method packages/core/src/editor/Editor.ts869-880 registers a new action:
The execute() method packages/core/src/editor/Editor.ts882-904 retrieves and invokes an action:
The addActions() method packages/core/src/editor/Editor.ts906-1228 registers numerous default actions:
| Action Name | Purpose | Implementation Reference |
|---|---|---|
save | Saves the diagram via urlPost | packages/core/src/editor/Editor.ts913-916 |
print | Opens print preview | packages/core/src/editor/Editor.ts917-923 |
show | Shows the diagram in a new window | packages/core/src/editor/Editor.ts924-927 |
exportImage | Creates an image via urlImage | packages/core/src/editor/Editor.ts928-931 |
undo | Undoes the last change | packages/core/src/editor/Editor.ts938-942 |
redo | Redoes the last undone change | packages/core/src/editor/Editor.ts943-947 |
delete | Deletes selected cells | packages/core/src/editor/Editor.ts956-961 |
group | Groups selected cells | packages/core/src/editor/Editor.ts981-1008 |
ungroup | Ungroups selected cells | packages/core/src/editor/Editor.ts1009-1026 |
selectAll | Selects all cells | packages/core/src/editor/Editor.ts1068-1072 |
zoom | Prompts for zoom level | packages/core/src/editor/Editor.ts1122-1133 |
Sources: packages/core/src/editor/Editor.ts869-904 packages/core/src/editor/Editor.ts906-1228
UI Components Creation Flow:
The EditorToolbar packages/core/src/editor/Editor.ts525 provides a toolbar for inserting cells. The setToolbarContainer() method packages/core/src/editor/Editor.ts1319-1325 initializes the toolbar:
When a vertex tool is clicked in the toolbar, it sets insertFunction packages/core/src/editor/Editor.ts604 which is used to insert cells on subsequent clicks in the graph container.
The EditorPopupMenu packages/core/src/editor/Editor.ts536 is created in the constructor packages/core/src/editor/Editor.ts413:
It manages context menu items that execute actions when clicked. The menu is configured via XML using EditorPopupMenuCodec.
The EditorKeyHandler packages/core/src/editor/EditorKeyHandler.ts48 wraps a KeyHandler and extends its escape function to hide the properties dialog and fire an ESCAPE event:
The bindAction() method packages/core/src/editor/EditorKeyHandler.ts84-96 binds keycodes to action names:
The installDblClickHandler() method packages/core/src/editor/Editor.ts1296-1306 listens for double-click events and executes the action specified by dblClickAction packages/core/src/editor/Editor.ts582 (default: 'edit'):
Sources: packages/core/src/editor/Editor.ts525-547 packages/core/src/editor/Editor.ts1296-1325 packages/core/src/editor/EditorKeyHandler.ts48-105
Serialization Flow:
The writeGraphModel() method packages/core/src/editor/Editor.ts1521-1543 serializes the graph model to XML:
By default, it uses this.linefeed packages/core/src/editor/Editor.ts662 which is set to '
' to encode linefeeds in cell values.
The readGraphModel() method packages/core/src/editor/Editor.ts1545-1563 deserializes XML into the graph model:
The save() method packages/core/src/editor/Editor.ts1565-1598 posts the XML to urlPost:
The open() method packages/core/src/editor/Editor.ts1621-1636 loads XML from a URL:
Sources: packages/core/src/editor/Editor.ts1521-1636 packages/core/__tests__/editor/Editor.test.ts23-101
The templates object packages/core/src/editor/Editor.ts624 maps names to prototype cells:
Templates are typically defined in XML configuration and decoded by EditorCodec. They store prototype cells that can be cloned for insertion.
When a toolbar item references a template, the insertFunction packages/core/src/editor/Editor.ts604 is set to clone and insert that template cell. The EditorToolbar handles this integration.
Example from documentation packages/core/src/editor/Editor.ts298-305:
Templates typically contain cells with user objects (XML nodes) that define both the cell structure and business data packages/core/src/editor/Editor.ts196-214:
Sources: packages/core/src/editor/Editor.ts196-305 packages/core/src/editor/Editor.ts604-624
The Editor provides several layout-related properties:
| Property | Type | Default | Purpose |
|---|---|---|---|
layoutDiagram | boolean | false | Enables automatic layout of top-level elements packages/core/src/editor/Editor.ts712 |
layoutSwimlanes | boolean | false | Enables automatic layout within swimlanes packages/core/src/editor/Editor.ts739 |
maintainSwimlanes | boolean | false | Keeps swimlanes at same width/height packages/core/src/editor/Editor.ts733 |
swimlaneSpacing | number | 0 | Spacing between swimlanes packages/core/src/editor/Editor.ts720 |
horizontalFlow | boolean | false | Direction of layout flow packages/core/src/editor/Editor.ts693 |
The Editor can instantiate layout managers:
diagramLayout: For top-level layout (typically StackLayout)swimlaneLayout: For swimlane content layout (typically CompactTreeLayout)These are managed by SwimlaneManager and LayoutManager instances when auto-layout is enabled.
Sources: packages/core/src/editor/Editor.ts693-739
The undoManager packages/core/src/editor/Editor.ts541 is created in the constructor packages/core/src/editor/Editor.ts414:
The installUndoHandler() method packages/core/src/editor/Editor.ts1379-1397 configures change tracking:
This listens to UNDO events from both the model and view, capturing UndoableEdit objects.
The built-in actions packages/core/src/editor/Editor.ts938-947:
The undo() and redo() methods packages/core/src/editor/Editor.ts1399-1413 delegate to the undoManager:
Sources: packages/core/src/editor/Editor.ts541 packages/core/src/editor/Editor.ts938-947 packages/core/src/editor/Editor.ts1379-1413
The configure() method packages/core/src/editor/Editor.ts1286-1294 processes XML configuration:
This uses the Codec system to decode configuration from XML. The EditorCodec, EditorToolbarCodec, and EditorPopupMenuCodec handle the decoding of editor-specific elements.
| Property | Type | Default | Purpose |
|---|---|---|---|
dblClickAction | string | 'edit' | Action to execute on double-click packages/core/src/editor/Editor.ts582 |
swimlaneRequired | boolean | false | Require new cells to be in swimlanes packages/core/src/editor/Editor.ts591 |
disableContextMenu | boolean | true | Disable browser context menu packages/core/src/editor/Editor.ts597 |
forcedInserting | boolean | false | Insert on single click even if cell exists packages/core/src/editor/Editor.ts617 |
validating | boolean | false | Auto-validate graph after changes packages/core/src/editor/Editor.ts844 |
escapePostData | boolean | true | Encode data when posting packages/core/src/editor/Editor.ts674 |
urlPost | string | null | URL for saving diagrams packages/core/src/editor/Editor.ts680 |
urlImage | string | null | URL for creating bitmap images packages/core/src/editor/Editor.ts686 |
The cycleAttribute() method packages/core/src/editor/Editor.ts1230-1242 cycles through attribute values for swimlanes:
This uses cycleAttributeValues packages/core/src/editor/Editor.ts745 cycleAttributeIndex packages/core/src/editor/Editor.ts756 and cycleAttributeName packages/core/src/editor/Editor.ts762 to assign colors or other attributes to new swimlanes.
Sources: packages/core/src/editor/Editor.ts582-686 packages/core/src/editor/Editor.ts745-763 packages/core/src/editor/Editor.ts1230-1294
The Editor class fires several events as documented in packages/core/src/editor/Editor.ts329-387:
| Event | Properties | Description |
|---|---|---|
mxEvent.OPEN | filename | Fired after a file is opened |
mxEvent.SAVE | url | Fired after the file is saved |
mxEvent.POST | request, url, data | Fired after successful post request |
mxEvent.ROOT | none | Fired when the current root changes |
mxEvent.BEFORE_ADD_VERTEX | vertex, parent | Fired before a vertex is added |
mxEvent.ADD_VERTEX | vertex | Fired during vertex insertion |
mxEvent.AFTER_ADD_VERTEX | vertex | Fired after a vertex is added |
mxEvent.ESCAPE | event | Fired when escape key is pressed |
Sources: packages/core/src/editor/Editor.ts329-387
The destroy() method packages/core/src/editor/Editor.ts1850-1892 cleans up all resources:
Refresh this wiki