Maps from Ids to cells.
Specifies if the model should automatically create Ids for new cells. Default is true.
Holds the changes for the current transaction. If the transaction is closed then a new object is created for this variable using createUndoableEdit.
True if the program flow is currently inside endUpdate.
Variable: eventListeners
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.
Variable: eventSource
Optional source for events. Default is null.
Variable: eventsEnabled
Specifies if events can be fired. Default is true.
Specifies if relative edge parents should be ignored for finding the nearest common ancestors of an edge's terminals. Default is true.
Specifies if edges should automatically be moved into the nearest common ancestor of their terminals. Default is true.
Specifies the next Id to be created. Initial value is 0.
Defines the postfix of new Ids. Default is an empty string.
Defines the prefix of new Ids. Default is an empty string.
Holds the root cell, which in turn contains the cells that represent the layers of the diagram as child cells. That is, the actual elements of the diagram are supposed to live in the third generation of cells and below.
Counter for the depth of nested transactions. Each call to beginUpdate will increment this number and each call to endUpdate will decrement it. When the counter reaches 0, the transaction is closed and the respective events are fired. Initial value is 0.
Adds the specified child to the parent at the given index using mxChildChange and adds the change to the current transaction. If no index is specified then the child is appended to the parent's array of children. Returns the inserted child.
that specifies the parent to contain the child.
that specifies the child to be inserted.
Optional integer that specifies the index of the child.
Function: addListener
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
Increments the updateLevel by one. The event notification is queued until updateLevel reaches 0 by use of endUpdate.
All changes on mxGraphModel are transactional, that is, they are executed in a single undoable change on the model (without transaction isolation). Therefore, if you want to combine any number of changes into a single undoable change, you should group any two or more API calls that modify the graph model between beginUpdate and endUpdate calls as shown here:
var model = graph.getModel();
var parent = graph.getDefaultParent();
var index = model.getChildCount(parent);
model.beginUpdate();
try
{
model.add(parent, v1, index);
model.add(parent, v2, index+1);
}
finally
{
model.endUpdate();
}
Of course there is a shortcut for appending a sequence of cells into the default parent:
graph.addCells([v1, v2]).
Inner callback to update cells when a cell has been added. This implementation resolves collisions by creating new Ids. To change the ID of a cell after it was inserted into the model, use the following code:
(code delete model.cells[cell.getId()]; cell.setId(newId); model.cells[cell.getId()] = cell;
If the change of the ID should be part of the command history, then the
cell should be removed from the model and a clone with the new ID should
be reinserted into the model instead.
@param {mxCell} cell that specifies the cell that has been added.
Sets a new root using createRoot.
Returns an array of clones for the given array of mxCell`. Depending on the value of includeChildren, a deep clone is created for each cell. Connections are restored based if the corresponding cell is contained in the passed in array.
Array of mxCell` to be cloned.
Boolean indicating if the cells should be cloned with all descendants.
Optional mapping for existing clones.
to create the Id for.
Creates a new root cell with a default layer (child 0).
Creates a new mxUndoableEdit that implements the notify function to fire a {@link change} and notify event through the mxUndoableEdit's source.
Optional boolean that specifies if the edit to be created is significant. Default is true.
Decrements the updateLevel by one and fires an undo event if the updateLevel reaches 0. This function indirectly fires a {@link change} event by invoking the notify function on the currentEdit und then creates a new currentEdit using createUndoableEdit.
The undo event is fired only once per edit, whereas the {@link change} event is fired whenever the notify function is invoked, that is, on undo and redo of the edit.
Executes the given edit and fires events if required. The edit object requires an execute function which is invoked. The edit is added to the currentEdit between beginUpdate and endUpdate calls, so that events will be fired if this execute is an individual transaction, that is, if no previous beginUpdate calls have been made without calling endUpdate. This implementation fires an execute event before executing the given change.
Object that described the change.
Visits all cells recursively and applies the specified filter function to each cell. If the function returns true then the cell is added to the resulting array. The parent and result paramters are optional. If parent is not specified then the recursion starts at root.
Example: The following example extracts all vertices from a given model:
var filter(cell)
{
return model.isVertex(cell);
}
var vertices = model.filterDescendants(filter);
JavaScript function that takes an mxCell as an argument and returns a boolean.
Optional mxCell that is used as the root of the recursion.
Function: fireEvent
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 <mxUtils.bind>).
Example:
(code) fireEvent(new mxEventObject("eventName", key1, val1, .., keyN, valN)) (end)
Parameters:
evt -
Inner callback to update the mxGeometry of the given mxCell using <mxCell.setGeometry> and return the previous mxGeometry.
Returns the children of the given cell that are vertices and/or edges depending on the arguments.
Boolean indicating if child vertices should be returned. Default is false.
Boolean indicating if child edges should be returned. Default is false.
Returns the number of children in the given cell.
whose number of children should be returned.
Returns the number of incoming or outgoing edges, ignoring the given edge.
whose edge count should be returned.
Boolean that specifies if the number of outgoing or incoming edges should be returned.
that represents an edge to be ignored.
Returns the number of distinct edges connected to the given cell.
that represents the vertex.
Returns all distinct edges connected to this cell as a new array of mxCell. If at least one of incoming or outgoing is true, then loops are ignored, otherwise if both are false, then all edges connected to the given cell are returned including loops.
that specifies the cell.
Optional boolean that specifies if incoming edges should be returned. Default is true.
Optional boolean that specifies if outgoing edges should be returned. Default is true.
Optional boolean that specifies if loops should be returned. Default is true.
Returns all edges between the given source and target pair. If directed is true, then only edges from the source to the target are returned, otherwise, all edges between the two cells are returned.
that defines the source terminal of the edge to be returned.
that defines the target terminal of the edge to be returned.
Optional boolean that specifies if the direction of the edge should be taken into account. Default is false.
Function: getEventSource
Returns
Returns the mxGeometry of the given mxCell.
whose geometry should be returned.
Returns all opposite vertices wrt terminal for the given edges, only returning sources and/or targets as specified. The result is returned as an array of mxCell.
Array of mxCell that contain the edges to be examined.
that specifies the known end of the edges.
Boolean that specifies if source terminals should be contained in the result. Default is true.
Boolean that specifies if target terminals should be contained in the result. Default is true.
Returns createIds.
Returns true if the given cell is an edge.
that represents the possible edge.
Function: isEventsEnabled
Returns
Returns true if the given cell is the root of the model and a non-null value.
that represents the possible root.
Returns true if the given cell is a vertex.
that represents the possible vertex.
Merges the children of the given cell into the given target cell inside this model. All cells are cloned unless there is a corresponding cell in the model with the same id, in which case the source cell is ignored and all edges are connected to the corresponding cell in this model. Edges are considered to have no identity and are always cloned unless the cloneAllEdges flag is set to false, in which case edges with the same id in the target model are reconnected to reflect the terminals of the source edges.
Clones the children of the source cell into the given target cell in this model and adds an entry to the mapping that maps from the source cell to the target cell with the same id or the clone of the source cell that was inserted into this model.
Inner callback to update the parent of a cell using <mxCell.insert> on the parent and return the previous parent.
to update the parent for.
that specifies the new parent of the cell.
Optional integer that defines the index of the child in the parent's child array.
Removes the specified cell from the model using mxChildChange and adds the change to the current transaction. This operation will remove the cell and all of its children from the model. Returns the removed cell.
that should be removed.
Function: removeListener
Removes all occurrences of the given listener from
Sets the collapsed state of the given mxCell using mxCollapseChange and adds the change to the current transaction.
whose collapsed state should be changed.
Boolean that specifies the new collpased state.
Sets createIds.
Function: setEventSource
Sets
Function: setEventsEnabled
Sets
Sets the mxGeometry of the given mxCell. The actual update of the cell is carried out in geometryForCellChanged. The mxGeometryChange action is used to encapsulate the change.
whose geometry should be changed.
that defines the new geometry.
Sets the root of the model using mxRootChange and adds the change to the current transaction. This resets all datastructures in the model and is the preferred way of clearing an existing model. Returns the new root.
Example:
var root = new mxCell();
root.insert(new mxCell());
model.setRoot(root);
that specifies the new root.
Sets the style of the given mxCell using mxStyleChange and adds the change to the current transaction.
whose style should be changed.
String of the form [stylename;|key=value;] to specify the new cell style.
Sets the source or target terminal of the given mxCell using mxTerminalChange and adds the change to the current transaction. This implementation updates the parent of the edge using updateEdgeParent if required.
that specifies the edge.
that specifies the new terminal.
Boolean indicating if the terminal is the new source or target terminal of the edge.
Sets the user object of then given mxCell using mxValueChange and adds the change to the current transaction.
whose user object should be changed.
Object that defines the new user object.
Sets the visible state of the given mxCell using mxVisibleChange and adds the change to the current transaction.
whose visible state should be changed.
Boolean that specifies the new visible state.
Inner helper function to update the terminal of the edge using <mxCell.insertEdge> and return the previous terminal.
that specifies the edge to be updated.
that specifies the new terminal.
Boolean indicating if the terminal is the new source or target terminal of the edge.
Updates the parent for all edges that are connected to cell or one of its descendants using updateEdgeParent.
Inner callback to update the user object of the given mxCell using <mxCell.valueChanged> and return the previous value, that is, the return value of <mxCell.valueChanged>.
To change a specific attribute in an XML node, the following code can be used.
graph.getModel().valueForCellChanged(cell, value)
{
var previous = cell.value.getAttribute('label');
cell.value.setAttribute('label', value);
return previous;
};
Generated using TypeDoc
Extends mxEventSource to implement a graph model. The graph model acts as a wrapper around the cells which are in charge of storing the actual graph datastructure. The model acts as a transactional wrapper with event notification for all changes, whereas the cells contain the atomic operations for updating the actual datastructure.
Layers
The cell hierarchy in the model must have a top-level root cell which contains the layers (typically one default layer), which in turn contain the top-level cells of the layers. This means each cell is contained in a layer. If no layers are required, then all new cells should be added to the default layer.
Layers are useful for hiding and showing groups of cells, or for placing groups of cells on top of other cells in the display. To identify a layer, the isLayer function is used. It returns true if the parent of the given cell is the root of the model.
Events
See events section for more details. There is a new set of events for tracking transactional changes as they happen. The events are called startEdit for the initial beginUpdate, executed for each executed change and endEdit for the terminal endUpdate. The executed event contains a property called change which represents the change after execution.
Encoding the model
To encode a graph model, use the following code:
This will create an XML node that contains all the model information.
Encoding and decoding changes:
For the encoding of changes, a graph model listener is required that encodes each change from the given array of changes.
For the decoding and execution of changes, the codec needs a lookup function that allows it to resolve cell IDs as follows:
For each encoded change (represented by a node), the following code can be used to carry out the decoding and create a change object.
The changes can then be dispatched using the model as follows.
Event: mxEvent.CHANGE
Fires when an undoable edit is dispatched. The
editproperty contains the mxUndoableEdit. Thechangesproperty contains the array of atomic changes inside the undoable edit. The changes property is deprecated, please use edit.changes instead.Example
For finding newly inserted cells, the following code can be used:
Event: mxEvent.NOTIFY
Same as <mxEvent.CHANGE>, this event can be used for classes that need to implement a sync mechanism between this model and, say, a remote model. In such a setup, only local changes should trigger a notify event and all changes should trigger a change event.
Event: mxEvent.EXECUTE
Fires between begin- and endUpdate and after an atomic change was executed in the model. The
changeproperty contains the atomic change that was executed.Event: mxEvent.EXECUTED
Fires between START_EDIT and END_EDIT after an atomic change was executed. The
changeproperty contains the change that was executed.Event: mxEvent.BEGIN_UPDATE
Fires after the updateLevel was incremented in beginUpdate. This event contains no properties.
Event: mxEvent.START_EDIT
Fires after the updateLevel was changed from 0 to 1. This event contains no properties.
Event: mxEvent.END_UPDATE
Fires after the updateLevel was decreased in endUpdate but before any notification or change dispatching. The
editproperty contains the currentEdit.Event: mxEvent.END_EDIT
Fires after the updateLevel was changed from 1 to 0. This event contains no properties.
Event: mxEvent.BEFORE_UNDO
Fires before the change is dispatched after the update level has reached 0 in endUpdate. The
editproperty contains the {@link curreneEdit}.Event: mxEvent.UNDO
Fires after the change was dispatched in endUpdate. The
editproperty contains the currentEdit.