mxEditor

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

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

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

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.

Parameters

Example

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

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);

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.  The graph is created with no container and is initialized from setGraphContainer.

mxEditor.prototype.createSwimlaneManager = ( graph ) =>

Sets the graph’s container using mxGraph.init.

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.setGraphContainer = ( container ) =>

Sets the graph’s container using mxGraph.init.

mxEditor.prototype.installDblClickHandler = ( graph ) =>

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

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.  On each change of the root, this implementation fires a <root> event.

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.

This implementation adds listeners in the editor to display the last saved time and the current filename in the status bar.

Parameters

mxEditor.prototype.setStatus = ( message ) =>

Display the specified message in the status bar.

Parameters

mxEditor.prototype.setTitleContainer = ( container ) =>

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

Parameters

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

mxEditor.prototype.getTitle = () =>

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

mxEditor.prototype.getRootTitle = () =>

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

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

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

mxEditor.prototype.readGraphModel = ( node ) =>

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

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);
}

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)
});

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

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

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.

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.  The content area of the dialog is created using createProperties.

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.  This implementation works for user objects that are XML nodes and display all the node attributes in a form.

mxEditor.prototype.hideProperties = () =>

Hides the properties dialog.

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);
  }
};

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.  This is invoked whenever there is a possible change of state in the editor.  Default implementation is empty.

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.

mxEditor.prototype.showOutline = () =>

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

mxEditor.prototype.setMode = function( modename )

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

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

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

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.

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.

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

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.