Class Editor

Extends EventSource to implement an application wrapper for a graph that adds actions, I/O using Codec, auto-layout using LayoutManager, command history using undoManager, and standard dialogs and widgets, eg. properties, help, outline, toolbar, and popupmenu. It also adds templates to be used as cells in toolbars, auto-validation using the validation flag, attribute cycling using cycleAttributeValues, higher-level events such as root, and backend integration using and urlImage.

Actions:

Actions are functions stored in the array under their names. The functions take the as the first, and an optional as the second argument and are invoked using . Any additional arguments passed to execute are passed on to the action as-is.

A list of built-in actions is available in the description.

Read/write Diagrams:

To read a diagram from an XML string, for example from a textfield within the page, the following code is used:

var doc = mxUtils.parseXML(xmlString);
var node = doc.documentElement;
editor.readGraphModel(node);

For reading a diagram from a remote location, use the open method.

To save diagrams in XML on a server, you can set the urlPost variable. This variable will be used in getUrlPost to construct a URL for the post request that is issued in the save method. The post request contains the XML representation of the diagram as returned by writeGraphModel in the xml parameter.

On the server side, the post request is processed using standard technologies such as Java Servlets, CGI, .NET or ASP.

Here are some examples of processing a post request in various languages.

Java: URLDecoder.decode(request.getParameter("xml"), "UTF-8").replace(" ", " ")

Note that the linefeeds should only be replaced if the XML is processed in Java, for example when creating an image, but not if the XML is passed back to the client-side.

.NET: HttpUtility.UrlDecode(context.Request.Params["xml"])
PHP: urldecode($_POST["xml"])

Creating images:

A backend (Java, PHP or C#) is required for creating images. The distribution contains an example for each backend (ImageHandler.java, ImageHandler.cs and graph.php). More information about using a backend to create images can be found in the readme.html files. Note that the preview is implemented using VML/SVG in the browser and does not require a backend. The backend is only required to creates images (bitmaps).

Special characters:

Note There are five characters that should always appear in XML content as escapes, so that they do not interact with the syntax of the markup. These are part of the language for all documents based on XML and for HTML.

< (<)
> (>)
& (&)
" (")
' (')

Although it is part of the XML language, ' is not defined in HTML. For this reason the XHTML specification recommends instead the use of ' if text may be passed to a HTML user agent.

If you are having problems with special characters on the server-side then you may want to try the escapePostData flag.

For converting decimal escape sequences inside strings, a user has provided us with the following function:

function html2js(text)
{
  var entitySearch = /&#[0-9]+;/;
  var entity;

  while (entity = entitySearch.exec(text))
  {
    var charCode = entity[0].substring(2, entity[0].length -1);
    text = text.substring(0, entity.index)
           + String.fromCharCode(charCode)
           + text.substring(entity.index + entity[0].length);
  }

  return text;
}

Otherwise try using hex escape sequences and the built-in unescape function for converting such strings.

Local Files:

For saving and opening local files, no standardized method exists that works across all browsers. The recommended way of dealing with local files is to create a backend that streams the XML data back to the browser (echo) as an attachment so that a Save-dialog is displayed on the client-side and the file can be saved to the local disk.

For example, in PHP the code that does this looks as follows.

$xml = stripslashes($_POST["xml"]);
header("Content-Disposition: attachment; filename=\"diagram.xml\"");
echo($xml);

To open a local file, the file should be uploaded via a form in the browser and then opened from the server in the editor.

Cell Properties:

The properties displayed in the properties dialog are the attributes and values of the cell's user object, which is an XML node. The XML node is defined in the templates section of the config file.

The templates are stored in Editor.templates and contain cells which are cloned at insertion time to create new vertices by use of drag and drop from the toolbar. Each entry in the toolbar for adding a new vertex must refer to an existing template.

In the following example, the task node is a business object and only the mxCell node and its mxGeometry child contain graph information:

<Task label="Task" description="">
  <Cell vertex="true">
    <Geometry as="geometry" width="72" height="32"/>
  </Cell>
</Task>

The idea is that the XML representation is inverse from the in-memory representation: The outer XML node is the user object and the inner node is the cell. This means the user object of the cell is the Task node with no children for the above example:

<Task label="Task" description=""/>

The Task node can have any tag name, attributes and child nodes. The Codec will use the XML hierarchy as the user object, while removing the "known annotations", such as the mxCell node. At save-time the cell data will be "merged" back into the user object. The user object is only modified via the properties dialog during the lifecycle of the cell.

In the default implementation of createProperties, the user object's attributes are put into a form for editing. Attributes are changed using the CellAttributeChange action in the model. The dialog can be replaced by overriding the createProperties hook or by replacing the showProperties action in action. Alternatively, the entry in the config file's popupmenu section can be modified to invoke a different action.

If you want to displey the properties dialog on a doubleclick, you can set Editor.dblClickAction to showProperties as follows:

editor.dblClickAction = 'showProperties';

Popupmenu and Toolbar:

The toolbar and popupmenu are typically configured using the respective sections in the config file, that is, the popupmenu is defined as follows:

<Editor>
  <EditorPopupMenu as="popupHandler">
		<add as="cut" action="cut" icon="images/cut.gif"/>
     ...

New entries can be added to the toolbar by inserting an add-node into the above configuration. Existing entries may be removed and changed by modifying or removing the respective entries in the configuration. The configuration is read by the EditorPopupMenuCodec, the format of the configuration is explained in EditorPopupMenu.decode.

The toolbar is defined in the EditorToolbar section. Items can be added and removed in this section.

<Editor>
  <EditorToolbar>
    <add as="save" action="save" icon="images/save.gif"/>
    <add as="Swimlane" template="swimlane" icon="images/swimlane.gif"/>
    ...

The format of the configuration is described in EditorToolbarCodec.decode.

Ids:

For the IDs, there is an implicit behaviour in Codec: It moves the Id from the cell to the user object at encoding time and vice versa at decoding time. For example, if the Task node from above has an id attribute, then the Cell.id of the corresponding cell will have this value. If there is no Id collision in the model, then the cell may be retrieved using this Id with the GraphDataModel.getCell function. If there is a collision, a new Id will be created for the cell using GraphDataModel.createId. At encoding time, this new Id will replace the value previously stored under the id attribute in the Task node.

See EditorCodec, EditorToolbarCodec and EditorPopupMenuCodec for information about configuring the editor and user interface.

Programmatically inserting cells:

For inserting a new cell, say, by clicking a button in the document, the following code can be used. This requires an reference to the editor.

var userObject = new Object();
var parent = editor.graph.getDefaultParent();
var model = editor.graph.model;
model.beginUpdate();
try
{
  editor.graph.insertVertex(parent, null, userObject, 20, 20, 80, 30);
}
finally
{
  model.endUpdate();
}

If a template cell from the config file should be inserted, then a clone of the template can be created as follows. The clone is then inserted using the add function instead of addVertex.

var template = editor.templates['task'];
var clone = cloneCell(template);

Translations:

resources/editor - Language resources for Editor

Callback: onInit

Called from within the constructor. In the callback, "this" refers to the editor instance.

Cookie: mxgraph=seen

Set when the editor is started. Never expires. Use resetFirstTime to reset this cookie. This cookie only exists if onInit is implemented.

Event: mxEvent.OPEN

Fires after a file was opened in open. The filename property contains the filename that was used. The same value is also available in filename.

Event: mxEvent.SAVE

Fires after the current file was saved in save. The url property contains the URL that was used for saving.

Event: mxEvent.POST

Fires if a successful response was received in postDiagram. The request property contains the , the url and data properties contain the URL and the data that were used in the post request.

Event: mxEvent.ROOT

Fires when the current root has changed, or when the title of the current root has changed. This event has no properties.

Event: mxEvent.BEFORE_ADD_VERTEX

Fires before a vertex is added in addVertex. The vertex property contains the new vertex and the parent property contains its parent.

Event: mxEvent.ADD_VERTEX

Fires between begin- and endUpdate in . The vertex property contains the vertex that is being inserted.

Event: mxEvent.AFTER_ADD_VERTEX

Fires after a vertex was inserted and selected in . The vertex property contains the new vertex.

Example:

For starting an in-place edit after a new vertex has been added to the graph, the following code can be used.

editor.addListener(mxEvent.AFTER_ADD_VERTEX, function(sender, evt)
{
  var vertex = evt.getProperty('vertex');

  if (editor.graph.isCellEditable(vertex))
  {
  	editor.graph.startEditingAtCell(vertex);
  }
});

Event: mxEvent.ESCAPE

Fires when the escape key is pressed. The event property contains the key event.

Constructor: Editor

Constructs a new editor. This function invokes the onInit callback upon completion.

var config = mxUtils.load('config/diagrameditor.xml').getDocumentElement();
var editor = new Editor(config);

Editor

Hierarchy (view full)

EventSource
- Editor

Index

Constructors

constructor

new Editor(config): Editor
Parameters
- config: Element
Returns Editor
Overrides EventSource.constructor
- Defined in editor/Editor.ts:413

Properties

actions

actions: {
[key: string]: Function;
} = {}

Maps from actionnames to actions, which are functions taking the editor and the cell as arguments. Use addAction to add or replace an action and execute to execute an action by name, passing the cell to be operated upon as the second argument.

askZoomResource

askZoomResource: string = ...

Specifies the resource key for the zoom dialog. If the resource for this key does not exist then the value is used as the error message. Default is 'askZoom'.

Default

'askZoom'

currentFileResource

currentFileResource: string = ...

Specifies the resource key for the current file info. If the resource for this key does not exist then the value is used as the error message. Default is 'currentFile'.

Default

'currentFile'

cycleAttributeIndex

cycleAttributeIndex: number = 0

Index of the last consumed attribute index. If a new swimlane is inserted, then the cycleAttributeValues at this index will be used as the value for cycleAttributeName. Default is 0.

Default

cycleAttributeName

cycleAttributeName: string = 'fillColor'

Name of the attribute to be assigned a cycleAttributeValues when inserting new swimlanes. Default is 'fillColor'.

Default

'fillColor'

cycleAttributeValues

cycleAttributeValues: any[] = []

Specifies the attribute values to be cycled when inserting new swimlanes. Default is an empty array.

Default

any[]

dblClickAction

dblClickAction: string = 'edit'

Specifies the name of the action to be executed when a cell is double clicked. Default is 'edit'.

To handle a singleclick, use the following code.

Example

editor.graph.addListener(mxEvent.CLICK, function(sender, evt)
{
  var e = evt.getProperty('event');
  var cell = evt.getProperty('cell');

  if (cell != null && !e.isConsumed())
  {
    // Do something useful with cell...
    e.consume();
  }
});

Default

'edit'

defaultEdge

defaultEdge: any = null

Prototype edge cell that is used for creating new edges.

defaultEdgeStyle

defaultEdgeStyle: any = null

Specifies the edge style to be returned in getEdgeStyle. Default is null.

Default

null

defaultGroup

defaultGroup: any = null

Prototype group cell that is used for creating new groups.

destroyed

destroyed: boolean = false

diagramLayout

diagramLayout: any

disableContextMenu

disableContextMenu: boolean = true

Specifies if the context menu should be disabled in the graph container. Default is true.

Default

true

escapePostData

escapePostData: boolean = true

Specifies if the data in the post request for saving a diagram should be converted using encodeURIComponent. Default is true.

Default

true

eventListeners

eventListeners: EventListenerObject[] = []

Holds the event names and associated listeners in an array. The array contains the event name followed by the respective listener for each registered listener.

eventsEnabled

eventsEnabled: boolean = true

Specifies if events can be fired. Default is true.

eventSource

eventSource: null | EventTarget = null

Optional source for events. Default is null.

filename

filename: null | string = null

Contains the URL of the last opened file as a string. Default is null.

Default

null

forcedInserting

forcedInserting: boolean = false

Specifies if a new cell should be inserted on a single click even using insertFunction if there is a cell under the mousepointer, otherwise the cell under the mousepointer is selected. Default is false.

Default

false

graph

graph: Graph

Holds a graph for displaying the diagram. The graph is created in setGraphContainer.

graphRenderHint

graphRenderHint: any = null

Holds the render hint used for creating the graph in setGraphContainer. See graph. Default is null.

Default

null

groupBorderSize

groupBorderSize: any = null

Default size for the border of new groups. If null, then then Graph#gridSize is used. Default is null.

Default

null

help

help: any = null

Holds the MaxWindow created in showHelp

helpHeight

helpHeight: number = 260

Specifies the height of the help window in pixels. Default is 260.

Default

helpResource

helpResource: string = ...

Specifies the resource key for the help window title. If the resource for this key does not exist then the value is used as the error message. Default is 'help'.

Default

'help'

helpWidth

helpWidth: number = 300

Specifies the width of the help window in pixels. Default is 300.

Default

helpWindowImage

helpWindowImage: any = null

Icon for the help window.

horizontalFlow

horizontalFlow: boolean = false

Specifies the direction of the flow in the diagram. This is used in the layout algorithms. Default is false, ie. vertical flow.

Default

false

ignoredChanges

ignoredChanges: null | number = null

insertFunction

insertFunction: null | Function = null

Specifies the function to be used for inserting new cells into the graph. This is assigned from the EditorToolbar if a vertex-tool is clicked.

isActive

isActive: null | boolean = null

keyHandler

keyHandler: null | EditorKeyHandler = null

Holds a EditorKeyHandler for handling keyboard events. The handler is created in setGraphContainer.

lastSavedResource

lastSavedResource: string = ...

Specifies the resource key for the last saved info. If the resource for this key does not exist then the value is used as the error message. Default is 'lastSaved'.

Default

'lastSaved'.

lastSnapshot

lastSnapshot: null | number = null

layoutDiagram

layoutDiagram: boolean = false

Specifies if the top-level elements in the diagram should be layed out using a vertical or horizontal stack depending on the setting of horizontalFlow. The spacing between the swimlanes is specified by swimlaneSpacing. Default is false.

If the top-level elements are swimlanes, then the intra-swimlane layout is activated by the layoutSwimlanes switch.

Default

false

layoutSwimlanes

layoutSwimlanes: boolean = false

Specifies if the children of swimlanes should be layed out, either vertically or horizontally depending on horizontalFlow. Default is false.

Default

false

linefeed

linefeed: string = '
'

Character to be used for encoding linefeeds in save. Default is ' '.

Default

'&#xa;'

maintainSwimlanes

maintainSwimlanes: boolean = false

Specifies if the swimlanes should be kept at the same width or height depending on the setting of horizontalFlow. Default is false.

For horizontal flows, all swimlanes have the same height and for vertical flows, all swimlanes have the same width. Furthermore, the swimlanes are automatically "stacked" if layoutDiagram is true.

Default

false

modified

modified: boolean = false

True if the graph has been modified since it was last saved.

movePropertiesDialog

movePropertiesDialog: boolean = false

Specifies if the properties dialog should be automatically moved near the cell it is displayed for, otherwise the dialog is not moved. This value is only taken into account if the dialog is already visible. Default is false.

Default

false

onInit

onInit: null | Function = null

outline

outline: any = null

Reference to the MaxWindow that contains the outline. The outline is stored in outline.outline.

outlineResource

outlineResource: string = ...

Specifies the resource key for the outline window title. If the resource for this key does not exist then the value is used as the error message. Default is 'outline'.

Default

'outline'

popupHandler

popupHandler: null | EditorPopupMenu = null

Holds a EditorPopupMenu for displaying popupmenus.

postParameterName

postParameterName: string = 'xml'

Specifies if the name of the post parameter that contains the diagram data in a post request to the server. Default is 'xml'.

Default

'xml'

properties

properties: any

propertiesHeight

propertiesHeight: null | number = null

Specifies the height of the properties window in pixels. If no height is specified then the window will be automatically sized to fit its contents. Default is null.

Default

null

propertiesResource

propertiesResource: string = ...

Specifies the resource key for the properties window title. If the resource for this key does not exist then the value is used as the error message. Default is 'properties'.

Default

'properties'

propertiesWidth

propertiesWidth: number = 240

Specifies the width of the properties window in pixels. Default is 240.

Default

rubberband

rubberband: null | RubberBandHandler = null

status

status: any = null

DOM container that holds the statusbar. Use setStatusContainer to set this value.

swimlaneLayout

swimlaneLayout: any

swimlaneRequired

swimlaneRequired: boolean = false

Specifies if new cells must be inserted into an existing swimlane. Otherwise, cells that are not swimlanes can be inserted as top-level cells. Default is false.

Default

false

swimlaneSpacing

swimlaneSpacing: number = 0

Specifies the spacing between swimlanes if automatic layout is turned on in layoutDiagram. Default is 0.

Default

tasks

tasks: any = null

Holds the [@link MaxWindow} created in showTasks.

tasksResource

tasksResource: string = ...

Specifies the resource key for the tasks window title. If the resource for this key does not exist then the value is used as the error message. Default is 'tasks'.

Default

'tasks'

tasksTop

tasksTop: number = 20

Specifies the top coordinate of the tasks window in pixels. Default is 20.

Default

tasksWindowImage

tasksWindowImage: any = null

Icon for the tasks window.

templates

templates: any = null

Maps from names to protoype cells to be used in the toolbar for inserting new cells into the diagram.

toolbar

toolbar: any = null

Holds a EditorToolbar for displaying the toolbar. The toolbar is created in setToolbarContainer.

undoManager

undoManager: null | UndoManager = null

Holds an UndoManager for the command history.

urlHelp

urlHelp: null | string = null

Specifies the URL to be used for the contents of the Online Help window. This is usually specified in the resources file under urlHelp for language-specific online help support.

urlImage

urlImage: null | string = null

Specifies the URL to be used for creating a bitmap of the graph in the image action.

Default

null

urlPost

urlPost: null | string = null

Specifies the URL to be used for posting the diagram to a backend in save.

Default

null

validating

validating: boolean = false

Specifies if Graph.validateGraph should automatically be invoked after each change. Default is false.

Default

false

Methods

addAction

addAction(actionname, funct): void
Binds the specified actionname to the specified function.
Parameters
- actionname: string
  String that specifies the name of the action to be added.
- funct: Function
  Function that implements the new action. The first argument of the function is the editor it is used with, the second argument is the cell it operates upon.
Returns void
Example
```
editor.addAction('test', function(editor: Editor, cell: Cell)
{
		mxUtils.alert("test "+cell);
});
```
- Defined in editor/Editor.ts:1350

addActions

addActions(): void
Adds the built-in actions to the editor instance. save - Saves the graph using . print - Shows the graph in a new print preview window. show - Shows the graph in a new window. exportImage - Shows the graph as a bitmap image using . refresh - Refreshes the graph's display. cut - Copies the current selection into the clipboard and removes it from the graph. copy - Copies the current selection into the clipboard. paste - Pastes the clipboard into the graph. delete - Removes the current selection from the graph. group - Puts the current selection into a new group. ungroup - Removes the selected groups and selects the children. undo - Undoes the last change on the graph model. redo - Redoes the last change on the graph model. zoom - Sets the zoom via a dialog. zoomIn - Zooms into the graph. zoomOut - Zooms out of the graph actualSize - Resets the scale and translation on the graph. fit - Changes the scale so that the graph fits into the window. showProperties - Shows the properties dialog. selectAll - Selects all cells. selectNone - Clears the selection. selectVertices - Selects all vertices. selectEdges = Selects all edges. edit - Starts editing the current selection cell. enterGroup - Drills down into the current selection cell. exitGroup - Moves up in the drilling hierachy home - Moves to the topmost parent in the drilling hierarchy selectPrevious - Selects the previous cell. selectNext - Selects the next cell. selectParent - Selects the parent of the selection cell. selectChild - Selects the first child of the selection cell. collapse - Collapses the currently selected cells. expand - Expands the currently selected cells. bold - Toggle bold text style. italic - Toggle italic text style. underline - Toggle underline text style. alignCellsLeft - Aligns the selection cells at the left. alignCellsCenter - Aligns the selection cells in the center. alignCellsRight - Aligns the selection cells at the right. alignCellsTop - Aligns the selection cells at the top. alignCellsMiddle - Aligns the selection cells in the middle. alignCellsBottom - Aligns the selection cells at the bottom. alignFontLeft - Sets the horizontal text alignment to left. alignFontCenter - Sets the horizontal text alignment to center. alignFontRight - Sets the horizontal text alignment to right. alignFontTop - Sets the vertical text alignment to top. alignFontMiddle - Sets the vertical text alignment to middle. alignFontBottom - Sets the vertical text alignment to bottom. toggleTasks - Shows or hides the tasks window. toggleHelp - Shows or hides the help window. toggleOutline - Shows or hides the outline window. toggleConsole - Shows or hides the console window.

Returns void
- Defined in editor/Editor.ts:947

addListener

addListener(name, funct): void
Binds the specified function to the given event name. If no event name is given, then the listener is registered for all events.

The parameters of the listener are the sender and an EventObject.
Parameters
- name: string
- funct: Function
Returns void
Inherited from EventSource.addListener
- Defined in view/event/EventSource.ts:102

addTemplate

addTemplate(name, template): void
Adds the specified template under the given name in templates.
Parameters
- name: string
- template: any
Returns void
- Defined in editor/Editor.ts:1396

addVertex

addVertex(parent, vertex, x, y): any
Adds the given vertex as a child of parent at the specified x and y coordinate and fires an addVertex event.
Parameters
- parent: null | Cell
- vertex: Cell
- x: number
- y: number
Returns any
- Defined in editor/Editor.ts:2541

configure

configure(node): void
Configures the editor using the specified node. To load the configuration from a given URL the following code can be used to obtain the XML node.
Parameters
- node: Element
  XML node that contains the configuration.
Returns void
Example
```
var node = mxUtils.load(url).getDocumentElement();
```
- Defined in editor/Editor.ts:1305

consumeCycleAttribute

consumeCycleAttribute(cell): any
Returns the next attribute in cycleAttributeValues or null, if not attribute should be used in the specified cell.
Parameters
- cell: Cell
Returns any
- Defined in editor/Editor.ts:2507

createDiagramLayout

createDiagramLayout(): StackLayout
Creates the layout instance used to layout the swimlanes in the diagram.

Returns StackLayout
StackLayout instance
- Defined in editor/Editor.ts:1688

createEdge

createEdge(source, target): Cell
Uses defaultEdge as the prototype for creating new edges in the connection handler of the graph. The style of the edge will be overridden with the value returned by getEdgeStyle.
Parameters
- source: null | Cell
- target: null | Cell
Returns Cell
- Defined in editor/Editor.ts:2469

createGraph

createGraph(): Graph
Creates the graph for the editor. The graph is created with no container and is initialized from setGraphContainer.

Returns Graph
graph instance
- Defined in editor/Editor.ts:1413

createGroup

createGroup(): Cell
Creates and returns a clone of defaultGroup to be used as a new group cell in group.

Returns Cell
Cell
- Defined in editor/Editor.ts:1861

createLayoutManager

createLayoutManager(graph): LayoutManager
Creates a layout manager for the swimlane and diagram layouts, that is, the locally defined inter and intraswimlane layouts.
Parameters
- graph: Graph
Returns LayoutManager
LayoutManager instance
- Defined in editor/Editor.ts:1491

createPopupMenu

createPopupMenu(menu, cell, evt): void
Uses popupHandler to create the menu in the graph's panning handler. The redirection is setup in setToolbarContainer.
Parameters
- menu: any
- cell: null | Cell
- evt: any
Returns void
- Defined in editor/Editor.ts:2458

createProperties

createProperties(cell): null | HTMLTableElement
Creates and returns the DOM node that represents the contents of the properties dialog for the given cell. This implementation works for user objects that are XML nodes and display all the node attributes in a form.
Parameters
- cell: Cell
Returns null | HTMLTableElement
- Defined in editor/Editor.ts:2107

createSwimlaneLayout

createSwimlaneLayout(): CompactTreeLayout
Creates the layout instance used to layout the children of each swimlane.

Returns CompactTreeLayout
CompactTreeLayout instance
- Defined in editor/Editor.ts:1711

createSwimlaneManager

createSwimlaneManager(graph): SwimlaneManager
Sets the graph's container using [@link mxGraph.init}.
Parameters
- graph: Graph
Returns SwimlaneManager
SwimlaneManager instance
- Defined in editor/Editor.ts:1471

createTasks

createTasks(div): void
Updates the contents of the given DOM node to display the tasks associated with the current editor state. This is invoked whenever there is a possible change of state in the editor. Default implementation is empty.
Parameters
- div: Element
Returns void
- Defined in editor/Editor.ts:2323

createToolbar

createToolbar(): EditorToolbar
Creates the toolbar with no container.

Returns EditorToolbar
EditorToolbar instance
- Defined in editor/Editor.ts:1719

cycleAttribute

cycleAttribute(cell): void
Uses the returned value from consumeCycleAttribute as the value for the cycleAttributeName key in the given cell's style.
Parameters
- cell: Cell
Returns void
- Defined in editor/Editor.ts:2522

destroy

destroy(): void
Removes the editor and all its associated resources. This does not normally need to be called, it is called automatically when the window unloads.

Returns void
- Defined in editor/Editor.ts:2631

execute

execute(actionname, cell?, evt?): void
Executes the function with the given name in actions passing the editor instance and given cell as the first and second argument. All additional arguments are passed to the action as well. This method contains a try-catch block and displays an error message if an action causes an exception. The exception is re-thrown after the error message was displayed.
Parameters
- actionname: string
- cell: null | Cell = null
- evt: null | Event = null
Returns void
Example
```
editor.execute("showProperties", cell);
```
- Defined in editor/Editor.ts:1370

fireEvent

fireEvent(evt, sender?): void
Dispatches the given event to the listeners which are registered for the event. The sender argument is optional. The current execution scope ("this") is used for the listener invocation (see Utils#bind).

Example:
```
fireEvent(new mxEventObject("eventName", key1, val1, .., keyN, valN))
```
Parameters
- evt: EventObject
  EventObject that represents the event.
- sender: null | EventTarget = null
  Optional sender to be passed to the listener. Default value is the return value of .
Returns void
Inherited from EventSource.fireEvent
- Defined in view/event/EventSource.ts:136

getEdgeStyle

getEdgeStyle(): any
Returns a string identifying the style of new edges. The function is used in createEdge when new edges are created in the graph.

Returns any
- Defined in editor/Editor.ts:2498

getEventSource

getEventSource(): null | EventTarget
Returns .

Returns null | EventTarget
Inherited from EventSource.getEventSource
- Defined in view/event/EventSource.ts:85

getRootTitle

getRootTitle(): string
Returns the string value of the root cell in graph.model.

Returns string
- Defined in editor/Editor.ts:1826

getTemplate

getTemplate(name): any
Returns the template for the given name.
Parameters
- name: string
Returns any
- Defined in editor/Editor.ts:1404

getTitle

getTitle(): string
Returns the string value for the current root of the diagram.

Returns string
- Defined in editor/Editor.ts:1804

getUrlImage

getUrlImage(): null | string
Returns the URL to create the image with. This is typically the URL of a backend which accepts an XML representation of a graph view to create an image. The function is used in the image action to create an image. This implementation returns urlImage.

Returns null | string
- Defined in editor/Editor.ts:2003

getUrlPost

getUrlPost(): null | string
Returns the URL to post the diagram to. This is used in save. The default implementation returns urlPost, adding ?draft=true.

Returns null | string
- Defined in editor/Editor.ts:1992

groupCells

groupCells(): any
Invokes createGroup to create a new group cell and the invokes graph.groupCells, using the grid size of the graph as the spacing in the group's content area.

Returns any
- Defined in editor/Editor.ts:1850

hideProperties

hideProperties(): void
Hides the properties dialog.

Returns void
- Defined in editor/Editor.ts:2233

installChangeHandler

installChangeHandler(graph): void
Installs the listeners required to automatically validate the graph. On each change of the root, this implementation fires a root event.
Parameters
- graph: Graph
Returns void
- Defined in editor/Editor.ts:1613

installDblClickHandler

installDblClickHandler(graph): void
Overrides graph.dblClick to invoke dblClickAction on a cell and reset the selection tool in the toolbar.
Parameters
- graph: Graph
Returns void
- Defined in editor/Editor.ts:1559

installDrillHandler

installDrillHandler(graph): void
Installs listeners for dispatching the root event.
Parameters
- graph: Graph
Returns void
- Defined in editor/Editor.ts:1598

installInsertHandler

installInsertHandler(graph): void
Installs the handler for invoking insertFunction if one is defined.
Parameters
- graph: Graph
Returns void
- Defined in editor/Editor.ts:1648

installUndoHandler

installUndoHandler(graph): void
Adds the undoManager to the graph model and the view.
Parameters
- graph: Graph
Returns void
- Defined in editor/Editor.ts:1575

isEventsEnabled

isEventsEnabled(): boolean
Returns .

Returns boolean
Inherited from EventSource.isEventsEnabled
- Defined in view/event/EventSource.ts:71

isModified

isModified(): boolean
Returns modified.

Returns boolean
- Defined in editor/Editor.ts:879

isPropertiesVisible

isPropertiesVisible(): boolean
Returns true if the properties dialog is currently visible.

Returns boolean
- Defined in editor/Editor.ts:2097

open

open(filename): void
Opens the specified file synchronously and parses it using readGraphModel. It updates filename and fires an -event after the file has been opened. Exceptions should be handled as follows:
Parameters
- filename: string
  URL of the file to be opened.
Returns void
Example
```
try
{
  editor.open(filename);
}
catch (e)
{
  mxUtils.error('Cannot open ' + filename +
    ': ' + e.message, 280, true);
}
```
- Defined in editor/Editor.ts:1885

postDiagram

postDiagram(url, data): void
Hook for subclassers to override the posting of a diagram represented by the given node to the given URL. This fires an asynchronous post event if the diagram has been posted.

Example:
To replace the diagram with the diagram in the response, use the following code.
Parameters
- url: any
- data: any
Returns void
Example
```
editor.addListener(mxEvent.POST, function(sender, evt)
{
  // Process response (replace diagram)
  var req = evt.getProperty('request');
  var root = req.getDocumentElement();
  editor.graph.readGraphModel(root)
});
```
- Defined in editor/Editor.ts:1966

readGraphModel

readGraphModel(node): void
Reads the specified XML node into the existing graph model and resets the command history and modified state.
Parameters
- node: Element
  the XML node to be read into the graph model.
Returns void
- Defined in editor/Editor.ts:1899

redo

redo(): void
Redo the last change in graph.

Returns void
- Defined in editor/Editor.ts:1841

refreshTasks

refreshTasks(div): void
Updates the contents of the tasks window using createTasks.
Parameters
- div: Element
Returns void
- Defined in editor/Editor.ts:2306

removeListener

removeListener(funct): void
Removes all occurrences of the given listener from .
Parameters
- funct: Function
Returns void
Inherited from EventSource.removeListener
- Defined in view/event/EventSource.ts:109

resetFirstTime

resetFirstTime(): void
Resets the cookie that is used to remember if the editor has already been used.

Returns void
- Defined in editor/Editor.ts:1321

resetHistory

resetHistory(): void
Resets the command history, modified state and counters.

Returns void
- Defined in editor/Editor.ts:1328

save

save(url?, linefeed?): void
Posts the string returned by writeGraphModel to the given URL or the URL returned by getUrlPost. The actual posting is carried out by postDiagram. If the URL is null then the resulting XML will be displayed using popup. Exceptions should be handled as follows:
Parameters
- url: null | string = null
- linefeed: string = ...
Returns void
Example
```
try
{
  editor.save();
}
catch (e)
{
  mxUtils.error('Cannot save : ' + e.message, 280, true);
}
```
- Defined in editor/Editor.ts:1926

setEventsEnabled

setEventsEnabled(value): void
Sets .
Parameters
- value: boolean
Returns void
Inherited from EventSource.setEventsEnabled
- Defined in view/event/EventSource.ts:78

setEventSource

setEventSource(value): void
Sets .
Parameters
- value: null | EventTarget
Returns void
Inherited from EventSource.setEventSource
- Defined in view/event/EventSource.ts:92

setGraphContainer

setGraphContainer(container): void
Sets the graph's container using graph.init.
Parameters
- container: any
Returns void
- Defined in editor/Editor.ts:1535

setMode

setMode(modename): void
Puts the graph into the specified mode. The following mode names are supported:
- select - Selects using the left mouse button, new connections are disabled.
- connect - Selects using the left mouse button or creates new connections if mouse over cell hotspot. See ConnectionHandler.
- pan - Pans using the left mouse button, new connections are disabled.
Parameters
- modename: any
Returns void
- Defined in editor/Editor.ts:2436

setModified

setModified(value): void
Sets modified to the specified boolean value.
Parameters
- value: boolean
Returns void
- Defined in editor/Editor.ts:887

setStatus

setStatus(message): void
Display the specified message in the status bar.
Parameters
- message: string
  String the specified the message to be displayed.
Returns void
- Defined in editor/Editor.ts:1769

setStatusContainer

setStatusContainer(container): void
Creates the status using the specified container. This implementation adds listeners in the editor to display the last saved time and the current filename in the status bar.
Parameters
- container: any
  DOM node that will contain the statusbar.
Returns void
- Defined in editor/Editor.ts:1738

setTitleContainer

setTitleContainer(container): void
Creates a listener to update the inner HTML of the specified DOM node with the value of getTitle.
Parameters
- container: any
  DOM node that will contain the title.
Returns void
- Defined in editor/Editor.ts:1780

setToolbarContainer

setToolbarContainer(container): void
Initializes the toolbar for the given container.
Parameters
- container: any
Returns void
- Defined in editor/Editor.ts:1727

showHelp

showHelp(tasks?): void
Shows the help window. If the help window does not exist then it is created using an iframe pointing to the resource for the urlHelp key or urlHelp if the resource is undefined.
Parameters
- tasks: any = null
Returns void
- Defined in editor/Editor.ts:2334

showOutline

showOutline(): void
Shows the outline window. If the window does not exist, then it is created using an outline.

Returns void
- Defined in editor/Editor.ts:2387

showProperties

showProperties(cell?): void
Creates and shows the properties dialog for the given cell. The content area of the dialog is created using createProperties.
Parameters
- cell: null | Cell = null
Returns void
- Defined in editor/Editor.ts:2032

showTasks

showTasks(): void
Shows the tasks window. The tasks window is created using createTasks. The default width of the window is 200 pixels, the y-coordinate of the location can be specifies in tasksTop and the x-coordinate is right aligned with a 20 pixel offset from the right border. To change the location of the tasks window, the following code can be used:

Returns void
Example
```
var oldShowTasks = Editor.prototype.showTasks;
Editor.prototype.showTasks = function()
{
  oldShowTasks.apply(this, arguments); // "supercall"

  if (this.tasks != null)
  {
    this.tasks.setLocation(10, 10);
  }
};
```
- Defined in editor/Editor.ts:2261

swapStyles

swapStyles(first, second): void
Swaps the styles for the given names in the graph's stylesheet and refreshes the graph.
Parameters
- first: keyof CellStateStyle
- second: string
Returns void
- Defined in editor/Editor.ts:2013

treeLayout

treeLayout(cell, horizontal): void
Executes a vertical or horizontal compact tree layout using the specified cell as an argument. The cell may either be a group or the root of a tree.
Parameters
- cell: Cell
  mxCell to use in the compact tree layout.
- horizontal: boolean
  Optional boolean to specify the tree's orientation. Default is true.
Returns void
- Defined in editor/Editor.ts:1794

undo

undo(): void
Undo the last change in graph.

Returns void
- Defined in editor/Editor.ts:1834

writeGraphModel

writeGraphModel(linefeed?): string
Hook to create the string representation of the diagram.

The default implementation uses ModelXmlSerializer to encode the graph model.
Parameters
- Optionallinefeed: string
  Optional character to be used as the linefeed. Default is linefeed.
Returns string
- Defined in editor/Editor.ts:1983

Class Editor

Actions:

Read/write Diagrams:

Creating images:

Special characters:

Local Files:

Cell Properties:

Popupmenu and Toolbar:

Translations:

Callback: onInit

Cookie: mxgraph=seen

Event: mxEvent.OPEN

Event: mxEvent.SAVE

Event: mxEvent.POST

Event: mxEvent.ROOT

Event: mxEvent.BEFORE_ADD_VERTEX

Event: mxEvent.ADD_VERTEX

Event: mxEvent.AFTER_ADD_VERTEX

Example:

Event: mxEvent.ESCAPE

Constructor: Editor

Hierarchy (view full)

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

Returns Editor

Properties

actions

askZoomResource

Default

currentFileResource

Default

cycleAttributeIndex

Default

cycleAttributeName

Default

cycleAttributeValues

Default

dblClickAction

Example

Default

defaultEdge

defaultEdgeStyle

Default

defaultGroup

destroyed

diagramLayout

disableContextMenu

Default

escapePostData

Default

eventListeners

eventsEnabled

eventSource

filename

Default

forcedInserting

Default

graph

graphRenderHint

Default

groupBorderSize

Default

help

helpHeight

Default

helpResource

Default

helpWidth

Default

helpWindowImage

horizontalFlow

Default

ignoredChanges

insertFunction

isActive