mxEditor

Extends mxEventSource to implement an application wrapper for a graph that adds actions, I/O using mxCodec, auto-layout using mxLayoutManager, 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 urlPost and urlImage.

Actions

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

A list of built-in actions is available in the addActions 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:

let doc = mxUtils.parseXML(xmlString);
let 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(“\n”, “&#xa;”)

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.

  • &lt; (<)
  • &gt; (>)
  • &amp; (&)
  • &quot; (“)
  • &apos; (‘)

Although it is part of the XML language, &apos; is not defined in HTML.  For this reason the XHTML specification recommends instead the use of &#39; 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)
{
  let entitySearch = /&#[0-9]+;/;
  var entity;

  while (entity = entitySearch.exec(text))
  {
    let 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 mxEditor.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="">
  <mxCell vertex="true">
    <mxGeometry as="geometry" width="72" height="32"/>
  </mxCell>
</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 mxCodec 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 mxCellAttributeChange action in the model.  The dialog can be replaced by overriding the createProperties hook or by replacing the showProperties action in actions.  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 mxEditor.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:

<mxEditor>
  <mxDefaultPopupMenu 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 mxDefaultPopupMenuCodec, the format of the configuration is explained in <mxDefaultPopupMenu.decode>.

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

<mxEditor>
  <mxDefaultToolbar>
    <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 mxDefaultToolbarCodec.decode.

Ids

For the IDs, there is an implicit behaviour in mxCodec: 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 mxCell.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 mxGraphModel.getCell function.  If there is a collision, a new Id will be created for the cell using mxGraphModel.createId.  At encoding time, this new Id will replace the value previously stored under the id attribute in the Task node.

See mxEditorCodec, mxDefaultToolbarCodec and mxDefaultPopupMenuCodec 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.

let userObject = {};
let parent = editor.graph.getDefaultParent();
let 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.

let template = editor.templates['task'];
let clone = editor.graph.model.cloneCell(template);

Resources

resources/editorLanguage resources for mxEditor
Summary
mxEditorExtends mxEventSource to implement an application wrapper for a graph that adds actions, I/O using mxCodec, auto-layout using mxLayoutManager, command history using undoManager, and standard dialogs and widgets, eg.
onInitCalled from within the constructor.
mxgraph=seenSet when the editor is started.
mxEvent.OPENFires after a file was opened in open.
mxEvent.SAVEFires after the current file was saved in save.
mxEvent.POSTFires if a successful response was received in postDiagram.
mxEvent.ROOTFires when the current root has changed, or when the title of the current root has changed.
mxEvent.BEFORE_ADD_VERTEXFires before a vertex is added in addVertex.
mxEvent.ADD_VERTEXFires between begin- and endUpdate in addVertex.
mxEvent.AFTER_ADD_VERTEXFires after a vertex was inserted and selected in addVertex.
mxEvent.ESCAPEFires when the escape key is pressed.
mxEditorConstructs a new editor.
Controls and Handlers
askZoomResourceSpecifies the resource key for the zoom dialog.
lastSavedResourceSpecifies the resource key for the last saved info.
currentFileResourceSpecifies the resource key for the current file info.
propertiesResourceSpecifies the resource key for the properties window title.
tasksResourceSpecifies the resource key for the tasks window title.
helpResourceSpecifies the resource key for the help window title.
outlineResourceSpecifies the resource key for the outline window title.
outlineReference to the mxWindow that contains the outline.
graphHolds a mxGraph for displaying the diagram.
graphRenderHintHolds the render hint used for creating the graph in setGraphContainer.
toolbarHolds a mxDefaultToolbar for displaying the toolbar.
statusDOM container that holds the statusbar.
popupHandlerHolds a mxDefaultPopupMenu for displaying popupmenus.
undoManagerHolds an mxUndoManager for the command history.
keyHandlerHolds a mxDefaultKeyHandler for handling keyboard events.
Actions and Options
actionsMaps from actionnames to actions, which are functions taking the editor and the cell as arguments.
dblClickActionSpecifies the name of the action to be executed when a cell is double clicked.
swimlaneRequiredSpecifies if new cells must be inserted into an existing swimlane.
disableContextMenuSpecifies if the context menu should be disabled in the graph container.
Templates
insertFunctionSpecifies the function to be used for inserting new cells into the graph.
forcedInsertingSpecifies 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.
templatesMaps from names to protoype cells to be used in the toolbar for inserting new cells into the diagram.
defaultEdgePrototype edge cell that is used for creating new edges.
defaultEdgeStyleSpecifies the edge style to be returned in getEdgeStyle.
defaultGroupPrototype group cell that is used for creating new groups.
groupBorderSizeDefault size for the border of new groups.
Backend Integration
filenameContains the URL of the last opened file as a string.
lineFeedCharacter to be used for encoding linefeeds in save.
postParameterNameSpecifies if the name of the post parameter that contains the diagram data in a post request to the server.
escapePostDataSpecifies if the data in the post request for saving a diagram should be converted using encodeURIComponent.
urlPostSpecifies the URL to be used for posting the diagram to a backend in save.
urlImageSpecifies the URL to be used for creating a bitmap of the graph in the image action.
Autolayout
horizontalFlowSpecifies the direction of the flow in the diagram.
layoutDiagramSpecifies if the top-level elements in the diagram should be layed out using a vertical or horizontal stack depending on the setting of horizontalFlow.
swimlaneSpacingSpecifies the spacing between swimlanes if automatic layout is turned on in layoutDiagram.
maintainSwimlanesSpecifies if the swimlanes should be kept at the same width or height depending on the setting of horizontalFlow.
layoutSwimlanesSpecifies if the children of swimlanes should be layed out, either vertically or horizontally depending on horizontalFlow.
Attribute Cycling
cycleAttributeValuesSpecifies the attribute values to be cycled when inserting new swimlanes.
cycleAttributeIndexIndex of the last consumed attribute index.
cycleAttributeNameName of the attribute to be assigned a cycleAttributeValues when inserting new swimlanes.
Windows
tasksHolds the mxWindow created in showTasks.
tasksWindowImageIcon for the tasks window.
tasksTopSpecifies the top coordinate of the tasks window in pixels.
helpHolds the mxWindow created in showHelp.
helpWindowImageIcon for the help window.
urlHelpSpecifies the URL to be used for the contents of the Online Help window.
helpWidthSpecifies the width of the help window in pixels.
helpHeightSpecifies the height of the help window in pixels.
propertiesWidthSpecifies the width of the properties window in pixels.
propertiesHeightSpecifies the height of the properties window in pixels.
movePropertiesDialogSpecifies if the properties dialog should be automatically moved near the cell it is displayed for, otherwise the dialog is not moved.
validatingSpecifies if mxGraph.validateGraph should automatically be invoked after each change.
modifiedTrue if the graph has been modified since it was last saved.
isModifiedReturns modified.
setModifiedSets modified to the specified boolean value.
addActionsAdds the built-in actions to the editor instance.
configureConfigures the editor using the specified node.
resetFirstTimeResets the cookie that is used to remember if the editor has already been used.
resetHistoryResets the command history, modified state and counters.
addActionBinds the specified actionname to the specified function.
executeExecutes the function with the given name in actions passing the editor instance and given cell as the first and second argument.
addTemplateAdds the specified template under the given name in templates.
getTemplateReturns the template for the given name.
createGraphCreates the graph for the editor.
createSwimlaneManagerSets the graph’s container using mxGraph.init.
createLayoutManagerCreates a layout manager for the swimlane and diagram layouts, that is, the locally defined inter- and intraswimlane layouts.
setGraphContainerSets the graph’s container using mxGraph.init.
installDblClickHandlerOverrides mxGraph.dblClick to invoke dblClickAction on a cell and reset the selection tool in the toolbar.
installUndoHandlerAdds the undoManager to the graph model and the view.
installDrillHandlerInstalls listeners for dispatching the <root> event.
installChangeHandlerInstalls the listeners required to automatically validate the graph.
installInsertHandlerInstalls the handler for invoking insertFunction if one is defined.
createDiagramLayoutCreates the layout instance used to layout the swimlanes in the diagram.
createSwimlaneLayoutCreates the layout instance used to layout the children of each swimlane.
createToolbarCreates the toolbar with no container.
setToolbarContainerInitializes the toolbar for the given container.
setStatusContainerCreates the status using the specified container.
setStatusDisplay the specified message in the status bar.
setTitleContainerCreates a listener to update the inner HTML of the specified DOM node with the value of getTitle.
treeLayoutExecutes a vertical or horizontal compact tree layout using the specified cell as an argument.
getTitleReturns the string value for the current root of the diagram.
getRootTitleReturns the string value of the root cell in mxGraph.model.
undoUndo the last change in graph.
redoRedo the last change in graph.
groupCellsInvokes createGroup to create a new group cell and the invokes mxGraph.groupCells, using the grid size of the graph as the spacing in the group’s content area.
createGroupCreates and returns a clone of defaultGroup to be used as a new group cell in <group>.
openOpens the specified file synchronously and parses it using readGraphModel.
readGraphModelReads the specified XML node into the existing graph model and resets the command history and modified state.
savePosts the string returned by writeGraphModel to the given URL or the URL returned by getUrlPost.
postDiagramHook for subclassers to override the posting of a diagram represented by the given node to the given URL.
writeGraphModelHook to create the string representation of the diagram.
getUrlPostReturns the URL to post the diagram to.
getUrlImageReturns the URL to create the image with.
swapStylesSwaps the styles for the given names in the graph’s stylesheet and refreshes the graph.
showPropertiesCreates and shows the properties dialog for the given cell.
isPropertiesVisibleReturns true if the properties dialog is currently visible.
createPropertiesCreates and returns the DOM node that represents the contents of the properties dialog for the given cell.
hidePropertiesHides the properties dialog.
showTasksShows the tasks window.
refreshTasksUpdates the contents of the tasks window using createTasks.
createTasksUpdates the contents of the given DOM node to display the tasks associated with the current editor state.
showHelpShows the help window.
showOutlineShows the outline window.
setModePuts the graph into the specified mode.
createPopupMenuUses popupHandler to create the menu in the graph’s panning handler.
createEdgeUses defaultEdge as the prototype for creating new edges in the connection handler of the graph.
getEdgeStyleReturns a string identifying the style of new edges.
consumeCycleAttributeReturns the next attribute in cycleAttributeValues or null, if not attribute should be used in the specified cell.
cycleAttributeUses the returned value from consumeCycleAttribute as the value for the cycleAttributeName key in the given cell’s style.
addVertexAdds the given vertex as a child of parent at the specified x and y coordinate and fires an addVertex event.
destroyRemoves the editor and all its associated resources.

onInit

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

mxgraph=seen

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

mxEvent.OPEN

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

mxEvent.SAVE

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

mxEvent.POST

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

mxEvent.ROOT

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

mxEvent.BEFORE_ADD_VERTEX

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

mxEvent.ADD_VERTEX

Fires between begin- and endUpdate in addVertex.  The <code>vertex</code> property contains the vertex that is being inserted.

mxEvent.AFTER_ADD_VERTEX

Fires after a vertex was inserted and selected in addVertex.  The <code>vertex</code> 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)
{
  let vertex = evt.getProperty('vertex');

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

mxEvent.ESCAPE

Fires when the escape key is pressed.  The <code>event</code> property contains the key event.

mxEditor

function mxEditor(config)

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

Example

let config = mxUtils.load('config/diagrameditor.xml').getDocumentElement();
let editor = new mxEditor(config);

Parameters

configOptional XML node that contains the configuration.

Controls and Handlers

askZoomResource

mxEditor.prototype.askZoomResource

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’.

lastSavedResource

mxEditor.prototype.lastSavedResource

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’.

currentFileResource

mxEditor.prototype.currentFileResource

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’.

propertiesResource

mxEditor.prototype.propertiesResource

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’.

tasksResource

mxEditor.prototype.tasksResource

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’.

helpResource

mxEditor.prototype.helpResource

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’.

outlineResource

mxEditor.prototype.outlineResource

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’.

outline

mxEditor.prototype.outline

Reference to the mxWindow that contains the outline.  The mxOutline is stored in outline.outline.

graph

mxEditor.prototype.graph

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

graphRenderHint

mxEditor.prototype.graphRenderHint

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

toolbar

mxEditor.prototype.toolbar

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

status

mxEditor.prototype.status

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

popupHandler

mxEditor.prototype.popupHandler

Holds a mxDefaultPopupMenu for displaying popupmenus.

undoManager

mxEditor.prototype.undoManager

Holds an mxUndoManager for the command history.

keyHandler

mxEditor.prototype.keyHandler

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

Actions and Options

actions

mxEditor.prototype.actions

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.

dblClickAction

mxEditor.prototype.dblClickAction

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.

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

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

swimlaneRequired

mxEditor.prototype.swimlaneRequired

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.

disableContextMenu

mxEditor.prototype.disableContextMenu

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

Templates

insertFunction

mxEditor.prototype.insertFunction

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

forcedInserting

mxEditor.prototype.forcedInserting

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.

templates

mxEditor.prototype.templates

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

defaultEdge

mxEditor.prototype.defaultEdge

Prototype edge cell that is used for creating new edges.

defaultEdgeStyle

mxEditor.prototype.defaultEdgeStyle

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

defaultGroup

mxEditor.prototype.defaultGroup

Prototype group cell that is used for creating new groups.

groupBorderSize

mxEditor.prototype.groupBorderSize

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

Backend Integration

filename

mxEditor.prototype.filename

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

lineFeed

Character to be used for encoding linefeeds in save.  Default is ‘&#xa;’.

postParameterName

mxEditor.prototype.postParameterName

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

escapePostData

mxEditor.prototype.escapePostData

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

urlPost

mxEditor.prototype.urlPost

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

urlImage

mxEditor.prototype.urlImage

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

Autolayout

horizontalFlow

mxEditor.prototype.horizontalFlow

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

layoutDiagram

mxEditor.prototype.layoutDiagram

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.

swimlaneSpacing

mxEditor.prototype.swimlaneSpacing

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

maintainSwimlanes

mxEditor.prototype.maintainSwimlanes

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.

layoutSwimlanes

mxEditor.prototype.layoutSwimlanes

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

Attribute Cycling

cycleAttributeValues

mxEditor.prototype.cycleAttributeValues

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

cycleAttributeIndex

mxEditor.prototype.cycleAttributeIndex

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.

cycleAttributeName

mxEditor.prototype.cycleAttributeName

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

Windows

tasks

mxEditor.prototype.tasks

Holds the mxWindow created in showTasks.

tasksWindowImage

mxEditor.prototype.tasksWindowImage

Icon for the tasks window.

tasksTop

mxEditor.prototype.tasksTop

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

help

mxEditor.prototype.help

Holds the mxWindow created in showHelp.

helpWindowImage

mxEditor.prototype.helpWindowImage

Icon for the help window.

urlHelp

mxEditor.prototype.urlHelp

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.

helpWidth

mxEditor.prototype.helpWidth

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

helpHeight

mxEditor.prototype.helpHeight

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

propertiesWidth

mxEditor.prototype.propertiesWidth

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

propertiesHeight

mxEditor.prototype.propertiesHeight

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.

movePropertiesDialog

mxEditor.prototype.movePropertiesDialog

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.

validating

mxEditor.prototype.validating

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

modified

mxEditor.prototype.modified

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

isModified

mxEditor.prototype.isModified = () =>

Returns modified.

setModified

mxEditor.prototype.setModified = (value) =>

Sets modified to the specified boolean value.

addActions

mxEditor.prototype.addActions = () =>

Adds the built-in actions to the editor instance.

saveSaves the graph using urlPost.
printShows the graph in a new print preview window.
showShows the graph in a new window.
exportImageShows the graph as a bitmap image using getUrlImage.
refreshRefreshes the graph’s display.
cutCopies the current selection into the clipboard and removes it from the graph.
copyCopies the current selection into the clipboard.
pastePastes the clipboard into the graph.
deleteRemoves the current selection from the graph.
groupPuts the current selection into a new group.
ungroupRemoves the selected groups and selects the children.
undoUndoes the last change on the graph model.
redoRedoes the last change on the graph model.
zoomSets the zoom via a dialog.
zoomInZooms into the graph.
zoomOutZooms out of the graph
actualSizeResets the scale and translation on the graph.
fitChanges the scale so that the graph fits into the window.
showPropertiesShows the properties dialog.
selectAllSelects all cells.
selectNoneClears the selection.
selectVerticesSelects all vertices. selectEdges = Selects all edges.
editStarts editing the current selection cell.
enterGroupDrills down into the current selection cell.
exitGroupMoves up in the drilling hierachy
homeMoves to the topmost parent in the drilling hierarchy
selectPreviousSelects the previous cell.
selectNextSelects the next cell.
selectParentSelects the parent of the selection cell.
selectChildSelects the first child of the selection cell.
collapseCollapses the currently selected cells.
expandExpands the currently selected cells.
boldToggle bold text style.
italicToggle italic text style.
underlineToggle underline text style.
alignCellsLeftAligns the selection cells at the left.
alignCellsCenterAligns the selection cells in the center.
alignCellsRightAligns the selection cells at the right.
alignCellsTopAligns the selection cells at the top.
alignCellsMiddleAligns the selection cells in the middle.
alignCellsBottomAligns the selection cells at the bottom.
alignFontLeftSets the horizontal text alignment to left.
alignFontCenterSets the horizontal text alignment to center.
alignFontRightSets the horizontal text alignment to right.
alignFontTopSets the vertical text alignment to top.
alignFontMiddleSets the vertical text alignment to middle.
alignFontBottomSets the vertical text alignment to bottom.
toggleTasksShows or hides the tasks window.
toggleHelpShows or hides the help window.
toggleOutlineShows or hides the outline window.
toggleConsoleShows or hides the console window.

configure

mxEditor.prototype.configure = (node) =>

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.

let node = mxUtils.load(url).getDocumentElement();

Parameters

nodeXML node that contains the configuration.

resetFirstTime

mxEditor.prototype.resetFirstTime = () =>

Resets the cookie that is used to remember if the editor has already been used.

resetHistory

mxEditor.prototype.resetHistory = () =>

Resets the command history, modified state and counters.

addAction

mxEditor.prototype.addAction = (actionname,
funct) =>

Binds the specified actionname to the specified function.

Parameters

actionnameString that specifies the name of the action to be added.
functFunction 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.

Example

editor.addAction('test', function(editor, cell)
{
     mxUtils.alert("test "+cell);
});

execute

mxEditor.prototype.execute = (actionname,
cell,
evt) =>

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.

Example

editor.execute("showProperties", cell);

addTemplate

mxEditor.prototype.addTemplate = (name,
template) =>

Adds the specified template under the given name in templates.

getTemplate

mxEditor.prototype.getTemplate = (name) =>

Returns the template for the given name.

createGraph

mxEditor.prototype.createGraph = () =>

Creates the graph for the editor.  The graph is created with no container and is initialized from setGraphContainer.

createSwimlaneManager

mxEditor.prototype.createSwimlaneManager = (graph) =>

Sets the graph’s container using mxGraph.init.

createLayoutManager

mxEditor.prototype.createLayoutManager = (graph) =>

Creates a layout manager for the swimlane and diagram layouts, that is, the locally defined inter- and intraswimlane layouts.

setGraphContainer

mxEditor.prototype.setGraphContainer = (container) =>

Sets the graph’s container using mxGraph.init.

installDblClickHandler

mxEditor.prototype.installDblClickHandler = (graph) =>

Overrides mxGraph.dblClick to invoke dblClickAction on a cell and reset the selection tool in the toolbar.

installUndoHandler

mxEditor.prototype.installUndoHandler = (graph) =>

Adds the undoManager to the graph model and the view.

installDrillHandler

mxEditor.prototype.installDrillHandler = (graph) =>

Installs listeners for dispatching the <root> event.

installChangeHandler

mxEditor.prototype.installChangeHandler = (graph) =>

Installs the listeners required to automatically validate the graph.  On each change of the root, this implementation fires a <root> event.

installInsertHandler

mxEditor.prototype.installInsertHandler = (graph) =>

Installs the handler for invoking insertFunction if one is defined.

createDiagramLayout

mxEditor.prototype.createDiagramLayout = () =>

Creates the layout instance used to layout the swimlanes in the diagram.

createSwimlaneLayout

mxEditor.prototype.createSwimlaneLayout = () =>

Creates the layout instance used to layout the children of each swimlane.

createToolbar

mxEditor.prototype.createToolbar = () =>

Creates the toolbar with no container.

setToolbarContainer

mxEditor.prototype.setToolbarContainer = (container) =>

Initializes the toolbar for the given container.

setStatusContainer

mxEditor.prototype.setStatusContainer = (container) =>

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

containerDOM node that will contain the statusbar.

setStatus

mxEditor.prototype.setStatus = (message) =>

Display the specified message in the status bar.

Parameters

messageString the specified the message to be displayed.

setTitleContainer

mxEditor.prototype.setTitleContainer = (container) =>

Creates a listener to update the inner HTML of the specified DOM node with the value of getTitle.

Parameters

containerDOM node that will contain the title.

treeLayout

mxEditor.prototype.treeLayout = (cell,
horizontal) =>

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

cellmxCell to use in the compact tree layout.
horizontalOptional boolean to specify the tree’s orientation.  Default is true.

getTitle

mxEditor.prototype.getTitle = () =>

Returns the string value for the current root of the diagram.

getRootTitle

mxEditor.prototype.getRootTitle = () =>

Returns the string value of the root cell in mxGraph.model.

undo

mxEditor.prototype.undo = () =>

Undo the last change in graph.

redo

mxEditor.prototype.redo = () =>

Redo the last change in graph.

groupCells

mxEditor.prototype.groupCells = () =>

Invokes createGroup to create a new group cell and the invokes mxGraph.groupCells, using the grid size of the graph as the spacing in the group’s content area.

createGroup

mxEditor.prototype.createGroup = () =>

Creates and returns a clone of defaultGroup to be used as a new group cell in <group>.

open

mxEditor.prototype.open = (filename) =>

Opens the specified file synchronously and parses it using readGraphModel.  It updates filename and fires an open-event after the file has been opened.  Exceptions should be handled as follows:

try
{
  editor.open(filename);
}
catch (e)
{
  mxUtils.error('Cannot open ' + filename +
    ': ' + e.message, 280, true);
}

Parameters

filenameURL of the file to be opened.

readGraphModel

mxEditor.prototype.readGraphModel = (node) =>

Reads the specified XML node into the existing graph model and resets the command history and modified state.

save

mxEditor.prototype.save = (url,
linefeed) =>

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 mxUtils.popup.  Exceptions should be handled as follows:

try
{
  editor.save();
}
catch (e)
{
  mxUtils.error('Cannot save : ' + e.message, 280, true);
}

postDiagram

mxEditor.prototype.postDiagram = (url,
data) =>

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.

editor.addListener(mxEvent.POST, function(sender, evt)
{
  // Process response (replace diagram)
  let req = evt.getProperty('request');
  let root = req.getDocumentElement();
  editor.graph.readGraphModel(root)
});

writeGraphModel

mxEditor.prototype.writeGraphModel = (linefeed) =>

Hook to create the string representation of the diagram.  The default implementation uses an mxCodec to encode the graph model as follows:

let enc = new mxCodec();
let node = enc.encode(this.graph.getModel());
return mxUtils.getXml(node, this.linefeed);

Parameters

linefeedOptional character to be used as the linefeed.  Default is <linefeed>.

getUrlPost

mxEditor.prototype.getUrlPost = () =>

Returns the URL to post the diagram to.  This is used in save.  The default implementation returns urlPost, adding <code>?draft=true</code>.

getUrlImage

mxEditor.prototype.getUrlImage = () =>

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.

swapStyles

mxEditor.prototype.swapStyles = (first,
second) =>

Swaps the styles for the given names in the graph’s stylesheet and refreshes the graph.

showProperties

mxEditor.prototype.showProperties = (cell) =>

Creates and shows the properties dialog for the given cell.  The content area of the dialog is created using createProperties.

isPropertiesVisible

mxEditor.prototype.isPropertiesVisible = () =>

Returns true if the properties dialog is currently visible.

createProperties

mxEditor.prototype.createProperties = (cell) =>

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.

hideProperties

mxEditor.prototype.hideProperties = () =>

Hides the properties dialog.

showTasks

mxEditor.prototype.showTasks = () =>

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:

let oldShowTasks = mxEditor.prototype.showTasks;
mxEditor.prototype.showTasks = function()
{
  oldShowTasks.apply(this, arguments); // "supercall"

  if (this.tasks != null)
  {
    this.tasks.setLocation(10, 10);
  }
};

refreshTasks

mxEditor.prototype.refreshTasks = (div) =>

Updates the contents of the tasks window using createTasks.

createTasks

mxEditor.prototype.createTasks = (div) =>

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.

showHelp

mxEditor.prototype.showHelp = (tasks) =>

Shows the help window.  If the help window does not exist then it is created using an iframe pointing to the resource for the <code>urlHelp</code> key or urlHelp if the resource is undefined.

showOutline

mxEditor.prototype.showOutline = () =>

Shows the outline window.  If the window does not exist, then it is created using an mxOutline.

setMode

mxEditor.prototype.setMode = function(modename)

Puts the graph into the specified mode.  The following modenames are supported:

selectSelects using the left mouse button, new connections are disabled.
connectSelects using the left mouse button or creates new connections if mouse over cell hotspot.  See mxConnectionHandler.
panPans using the left mouse button, new connections are disabled.

createPopupMenu

mxEditor.prototype.createPopupMenu = (menu,
cell,
evt) =>

Uses popupHandler to create the menu in the graph’s panning handler.  The redirection is setup in setToolbarContainer.

createEdge

mxEditor.prototype.createEdge = (source,
target) =>

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.

getEdgeStyle

mxEditor.prototype.getEdgeStyle = () =>

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

consumeCycleAttribute

mxEditor.prototype.consumeCycleAttribute = (cell) =>

Returns the next attribute in cycleAttributeValues or null, if not attribute should be used in the specified cell.

cycleAttribute

mxEditor.prototype.cycleAttribute = (cell) =>

Uses the returned value from consumeCycleAttribute as the value for the cycleAttributeName key in the given cell’s style.

addVertex

mxEditor.prototype.addVertex = (parent,
vertex,
x,
y) =>

Adds the given vertex as a child of parent at the specified x and y coordinate and fires an addVertex event.

destroy

mxEditor.prototype.destroy = () =>

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

Base class for objects that dispatch named events.
mxEditor.prototype.actions
Maps from actionnames to actions, which are functions taking the editor and the cell as arguments.
XML codec for JavaScript object graphs.
mxEditor.prototype.undoManager
Holds an mxUndoManager for the command history.
mxEditor.prototype.open = (filename) =>
Opens the specified file synchronously and parses it using readGraphModel.
mxEditor.prototype.save = (url,
linefeed) =>
Posts the string returned by writeGraphModel to the given URL or the URL returned by getUrlPost.
mxEditor.prototype.postDiagram = (url,
data) =>
Hook for subclassers to override the posting of a diagram represented by the given node to the given URL.
mxEditor.prototype.addVertex = (parent,
vertex,
x,
y) =>
Adds the given vertex as a child of parent at the specified x and y coordinate and fires an addVertex event.
function mxEditor(config)
Constructs a new editor.
mxEditor.prototype.askZoomResource
Specifies the resource key for the zoom dialog.
mxEditor.prototype.lastSavedResource
Specifies the resource key for the last saved info.
mxEditor.prototype.currentFileResource
Specifies the resource key for the current file info.
mxEditor.prototype.propertiesResource
Specifies the resource key for the properties window title.
mxEditor.prototype.tasksResource
Specifies the resource key for the tasks window title.
mxEditor.prototype.helpResource
Specifies the resource key for the help window title.
mxEditor.prototype.outlineResource
Specifies the resource key for the outline window title.
mxEditor.prototype.outline
Reference to the mxWindow that contains the outline.
Basic window inside a document.
mxEditor.prototype.graph
Holds a mxGraph for displaying the diagram.
Extends mxEventSource to implement a graph component for the browser.
mxEditor.prototype.graphRenderHint
Holds the render hint used for creating the graph in setGraphContainer.
mxEditor.prototype.setGraphContainer = (container) =>
Sets the graph’s container using mxGraph.init.
mxEditor.prototype.toolbar
Holds a mxDefaultToolbar for displaying the toolbar.
Toolbar for the editor.
mxEditor.prototype.status
DOM container that holds the statusbar.
mxEditor.prototype.popupHandler
Holds a mxDefaultPopupMenu for displaying popupmenus.
Creates popupmenus for mouse events.
Implements a command history.
mxEditor.prototype.keyHandler
Holds a mxDefaultKeyHandler for handling keyboard events.
Binds keycodes to actionnames in an editor.
mxEditor.prototype.dblClickAction
Specifies the name of the action to be executed when a cell is double clicked.
mxEditor.prototype.swimlaneRequired
Specifies if new cells must be inserted into an existing swimlane.
mxEditor.prototype.disableContextMenu
Specifies if the context menu should be disabled in the graph container.
mxEditor.prototype.insertFunction
Specifies the function to be used for inserting new cells into the graph.
mxEditor.prototype.forcedInserting
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.
mxEditor.prototype.templates
Maps from names to protoype cells to be used in the toolbar for inserting new cells into the diagram.
mxEditor.prototype.defaultEdge
Prototype edge cell that is used for creating new edges.
mxEditor.prototype.defaultEdgeStyle
Specifies the edge style to be returned in getEdgeStyle.
mxEditor.prototype.getEdgeStyle = () =>
Returns a string identifying the style of new edges.
mxEditor.prototype.defaultGroup
Prototype group cell that is used for creating new groups.
mxEditor.prototype.groupBorderSize
Default size for the border of new groups.
mxEditor.prototype.filename
Contains the URL of the last opened file as a string.
mxEditor.prototype.postParameterName
Specifies if the name of the post parameter that contains the diagram data in a post request to the server.
mxEditor.prototype.escapePostData
Specifies if the data in the post request for saving a diagram should be converted using encodeURIComponent.
mxEditor.prototype.urlPost
Specifies the URL to be used for posting the diagram to a backend in save.
mxEditor.prototype.urlImage
Specifies the URL to be used for creating a bitmap of the graph in the image action.
mxEditor.prototype.horizontalFlow
Specifies the direction of the flow in the diagram.
mxEditor.prototype.layoutDiagram
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.
mxEditor.prototype.swimlaneSpacing
Specifies the spacing between swimlanes if automatic layout is turned on in layoutDiagram.
mxEditor.prototype.maintainSwimlanes
Specifies if the swimlanes should be kept at the same width or height depending on the setting of horizontalFlow.
mxEditor.prototype.layoutSwimlanes
Specifies if the children of swimlanes should be layed out, either vertically or horizontally depending on horizontalFlow.
mxEditor.prototype.cycleAttributeValues
Specifies the attribute values to be cycled when inserting new swimlanes.
mxEditor.prototype.cycleAttributeIndex
Index of the last consumed attribute index.
mxEditor.prototype.cycleAttributeName
Name of the attribute to be assigned a cycleAttributeValues when inserting new swimlanes.
mxEditor.prototype.tasks
Holds the mxWindow created in showTasks.
mxEditor.prototype.showTasks = () =>
Shows the tasks window.
mxEditor.prototype.tasksWindowImage
Icon for the tasks window.
mxEditor.prototype.tasksTop
Specifies the top coordinate of the tasks window in pixels.
mxEditor.prototype.help
Holds the mxWindow created in showHelp.
mxEditor.prototype.showHelp = (tasks) =>
Shows the help window.
mxEditor.prototype.helpWindowImage
Icon for the help window.
mxEditor.prototype.urlHelp
Specifies the URL to be used for the contents of the Online Help window.
mxEditor.prototype.helpWidth
Specifies the width of the help window in pixels.
mxEditor.prototype.helpHeight
Specifies the height of the help window in pixels.
mxEditor.prototype.propertiesWidth
Specifies the width of the properties window in pixels.
mxEditor.prototype.propertiesHeight
Specifies the height of the properties window in pixels.
mxEditor.prototype.movePropertiesDialog
Specifies if the properties dialog should be automatically moved near the cell it is displayed for, otherwise the dialog is not moved.
mxEditor.prototype.validating
Specifies if mxGraph.validateGraph should automatically be invoked after each change.
mxGraph.prototype.validateGraph = function(cell,
context)
Validates the graph by validating each descendant of the given cell or the root of the model.
mxEditor.prototype.modified
True if the graph has been modified since it was last saved.
mxEditor.prototype.isModified = () =>
Returns modified.
mxEditor.prototype.setModified = (value) =>
Sets modified to the specified boolean value.
mxEditor.prototype.addActions = () =>
Adds the built-in actions to the editor instance.
mxEditor.prototype.configure = (node) =>
Configures the editor using the specified node.
mxEditor.prototype.resetFirstTime = () =>
Resets the cookie that is used to remember if the editor has already been used.
mxEditor.prototype.resetHistory = () =>
Resets the command history, modified state and counters.
mxEditor.prototype.addAction = (actionname,
funct) =>
Binds the specified actionname to the specified function.
mxEditor.prototype.execute = (actionname,
cell,
evt) =>
Executes the function with the given name in actions passing the editor instance and given cell as the first and second argument.
mxEditor.prototype.addTemplate = (name,
template) =>
Adds the specified template under the given name in templates.
mxEditor.prototype.getTemplate = (name) =>
Returns the template for the given name.
mxEditor.prototype.createGraph = () =>
Creates the graph for the editor.
mxEditor.prototype.createSwimlaneManager = (graph) =>
Sets the graph’s container using mxGraph.init.
mxGraph.prototype.init = function(container)
Initializes the container and creates the respective datastructures.
mxEditor.prototype.createLayoutManager = (graph) =>
Creates a layout manager for the swimlane and diagram layouts, that is, the locally defined inter- and intraswimlane layouts.
mxEditor.prototype.installDblClickHandler = (graph) =>
Overrides mxGraph.dblClick to invoke dblClickAction on a cell and reset the selection tool in the toolbar.
mxGraph.prototype.dblClick = function(evt,
cell)
Processes a doubleclick on an optional cell and fires a dblclick event.
mxEditor.prototype.installUndoHandler = (graph) =>
Adds the undoManager to the graph model and the view.
mxEditor.prototype.installDrillHandler = (graph) =>
Installs listeners for dispatching the root event.
mxEditor.prototype.installChangeHandler = (graph) =>
Installs the listeners required to automatically validate the graph.
mxEditor.prototype.installInsertHandler = (graph) =>
Installs the handler for invoking insertFunction if one is defined.
mxEditor.prototype.createDiagramLayout = () =>
Creates the layout instance used to layout the swimlanes in the diagram.
mxEditor.prototype.createSwimlaneLayout = () =>
Creates the layout instance used to layout the children of each swimlane.
mxEditor.prototype.createToolbar = () =>
Creates the toolbar with no container.
mxEditor.prototype.setToolbarContainer = (container) =>
Initializes the toolbar for the given container.
mxEditor.prototype.setStatusContainer = (container) =>
Creates the status using the specified container.
mxEditor.prototype.setStatus = (message) =>
Display the specified message in the status bar.
mxEditor.prototype.setTitleContainer = (container) =>
Creates a listener to update the inner HTML of the specified DOM node with the value of getTitle.
mxEditor.prototype.getTitle = () =>
Returns the string value for the current root of the diagram.
mxEditor.prototype.treeLayout = (cell,
horizontal) =>
Executes a vertical or horizontal compact tree layout using the specified cell as an argument.
mxEditor.prototype.getRootTitle = () =>
Returns the string value of the root cell in mxGraph.model.
mxGraph.prototype.model
Holds the mxGraphModel that contains the cells to be displayed.
mxEditor.prototype.undo = () =>
Undo the last change in graph.
mxEditor.prototype.redo = () =>
Redo the last change in graph.
mxEditor.prototype.groupCells = () =>
Invokes createGroup to create a new group cell and the invokes mxGraph.groupCells, using the grid size of the graph as the spacing in the group’s content area.
mxEditor.prototype.createGroup = () =>
Creates and returns a clone of defaultGroup to be used as a new group cell in group.
mxGraph.prototype.groupCells = function(group,
border,
cells)
Adds the cells into the given group.
mxEditor.prototype.readGraphModel = (node) =>
Reads the specified XML node into the existing graph model and resets the command history and modified state.
mxEditor.prototype.writeGraphModel = (linefeed) =>
Hook to create the string representation of the diagram.
mxEditor.prototype.getUrlPost = () =>
Returns the URL to post the diagram to.
mxEditor.prototype.getUrlImage = () =>
Returns the URL to create the image with.
mxEditor.prototype.swapStyles = (first,
second) =>
Swaps the styles for the given names in the graph’s stylesheet and refreshes the graph.
mxEditor.prototype.showProperties = (cell) =>
Creates and shows the properties dialog for the given cell.
mxEditor.prototype.isPropertiesVisible = () =>
Returns true if the properties dialog is currently visible.
mxEditor.prototype.createProperties = (cell) =>
Creates and returns the DOM node that represents the contents of the properties dialog for the given cell.
mxEditor.prototype.hideProperties = () =>
Hides the properties dialog.
mxEditor.prototype.refreshTasks = (div) =>
Updates the contents of the tasks window using createTasks.
mxEditor.prototype.createTasks = (div) =>
Updates the contents of the given DOM node to display the tasks associated with the current editor state.
mxEditor.prototype.showOutline = () =>
Shows the outline window.
mxEditor.prototype.setMode = function(modename)
Puts the graph into the specified mode.
mxEditor.prototype.createPopupMenu = (menu,
cell,
evt) =>
Uses popupHandler to create the menu in the graph’s panning handler.
mxEditor.prototype.createEdge = (source,
target) =>
Uses defaultEdge as the prototype for creating new edges in the connection handler of the graph.
mxEditor.prototype.consumeCycleAttribute = (cell) =>
Returns the next attribute in cycleAttributeValues or null, if not attribute should be used in the specified cell.
mxEditor.prototype.cycleAttribute = (cell) =>
Uses the returned value from consumeCycleAttribute as the value for the cycleAttributeName key in the given cell’s style.
mxEditor.prototype.destroy = () =>
Removes the editor and all its associated resources.
Cells are the elements of the graph model.
Action to change the attribute of a cell’s user object.
Custom codec for configuring mxDefaultPopupMenus.
codec.decode = function(dec,
node,
into)
Reads a sequence of the following child nodes and attributes:
mxCell.prototype.id
Holds the Id.
mxGraphModel.prototype.getCell = function(id)
Returns the mxCell for the specified Id or null if no cell can be found for the given Id.
mxGraphModel.prototype.createId = function(cell)
Hook method to create an Id for the specified cell.
Codec for mxEditors.
Custom codec for configuring mxDefaultToolbars.
Called from within the constructor.
XML HTTP request wrapper.
Implements an outline (aka overview) for a graph.
mxGraph.prototype.gridSize
Specifies the grid size.
popup: function(content,
isInternalWindow)
Shows the specified text content in a new mxWindow or a new browser window if isInternalWindow is false.
Graph event handler that creates new connections.
Close