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.
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.
Specifies if events can be fired. Default is true.
Optional source for events. Default is null.
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 ChildChange 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.
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.
Updates the model in a transaction. This is a shortcut to the usage of beginUpdate and the endUpdate methods.
const model = graph.getDataModel();
const parent = graph.getDefaultParent();
const index = model.getChildCount(parent);
model.batchUpdate(() => {
model.add(parent, v1, index);
model.add(parent, v2, index+1);
});
the update to be performed in the transaction.
Increments the updateLevel by one. The event notification is queued until updateLevel reaches 0 by use of endUpdate.
All changes on GraphDataModel 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:
const model = graph.getDataModel();
const parent = graph.getDefaultParent();
const 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 {Cell} cell that specifies the cell that has been added
Sets a new root using createRoot.
Inner callback to update the collapsed state of the given Cell using Cell#setCollapsed and return the previous collapsed state.
that specifies the cell to be updated.
Boolean that specifies the new collapsed state.
Hook method to create an Id for the specified cell. This implementation concatenates prefix, id and postfix to create the Id and increments nextId. The cell is ignored by this implementation, but can be used in overridden methods to prefix the Ids with eg. the cell type.
to create the Id for.
Creates a new UndoableEdit that implements the notify function to fire a change and notify event through the UndoableEdit'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 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 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.
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))
EventObject that represents the event.
Optional sender to be passed to the listener. Default value is
the return value of
Returns createIds.
Returns true if the given cell is the root of the model and a non-null value.
that represents the possible root.
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 Cell#insert on the parent and return the previous parent.
Removes the specified cell from the model using ChildChange 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.
Sets the collapsed state of the given Cell using CollapseChange and adds the change to the current transaction.
whose collapsed state should be changed.
Boolean that specifies the new collpased state.
Sets createIds.
Sets the Geometry of the given Cell. The actual update of the cell is carried out in geometryForCellChanged. The GeometryChange action is used to encapsulate the change.
Sets the root of the model using RootChange 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 Cell using StyleChange and adds the change to the current transaction.
IMPORTANT: Do not pass Cell.getStyle as value of the style parameter. Otherwise, no style change is performed, so the view won't be updated.
Always get a clone of the style of the cell with Cell.getClonedStyle, then update it and pass the updated style to this method.
Sets the source or target terminal of the given Cell using TerminalChange and adds the change to the current transaction. This implementation updates the parent of the edge using updateEdgeParent if required.
Sets the source and target Cell of the given Cell in a single transaction using setTerminal for each end of the edge.
Sets the user object of then given Cell using ValueChange 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 Cell using VisibleChange and adds the change to the current transaction.
whose visible state should be changed.
Boolean that specifies the new visible state.
Inner callback to update the style of the given Cell using Cell#setStyle and return the previous style.
IMPORTANT: to fully work, this method should not receive cell.getStyle as value of the style parameter. See setStyle for more information.
Inner helper function to update the terminal of the edge using Cell#insertEdge and return the previous terminal.
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 Cell using Cell#valueChanged and return the previous value, that is, the return value of Cell#valueChanged.
To change a specific attribute in an XML node, the following code can be used.
graph.getDataModel().valueForCellChanged(cell, value)
{
var previous = cell.value.getAttribute('label');
cell.value.setAttribute('label', value);
return previous;
};
Inner callback to update the visible state of the given Cell using Cell#setCollapsed and return the previous visible state.
that specifies the cell to be updated.
Boolean that specifies the new visible state.
Extends EventSource 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 UndoableEdit. 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 Event#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 currentEdit.Event: mxEvent.UNDO
Fires after the change was dispatched in endUpdate. The
editproperty contains the currentEdit.GraphDataModel