mxGraphModel

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

var enc = new mxCodec();
var node = enc.encode(graph.getModel());

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.

model.addListener(mxEvent.CHANGE, function(sender, evt)
{
  var changes = evt.getProperty('edit').changes;
  var nodes = [];
  var codec = new mxCodec();

  for (var i = 0; i < changes.length; i++)
  {
    nodes.push(codec.encode(changes[i]));
  }
  // do something with the nodes
});

For the decoding and execution of changes, the codec needs a lookup function that allows it to resolve cell IDs as follows:

var codec = new mxCodec();
codec.lookup = function(id)
{
  return model.getCell(id);
}

For each encoded change (represented by a node), the following code can be used to carry out the decoding and create a change object.

var changes = [];
var change = codec.decode(node);
change.model = model;
change.execute();
changes.push(change);

The changes can then be dispatched using the model as follows.

var edit = new mxUndoableEdit(model, false);
edit.changes = changes;

edit.notify = function()
{
  edit.source.fireEvent(new mxEventObject(mxEvent.CHANGE,
     'edit', edit, 'changes', edit.changes));
  edit.source.fireEvent(new mxEventObject(mxEvent.NOTIFY,
     'edit', edit, 'changes', edit.changes));
}

model.fireEvent(new mxEventObject(mxEvent.UNDO, 'edit', edit));
model.fireEvent(new mxEventObject(mxEvent.CHANGE,
     'edit', edit, 'changes', changes));

Summary

mxGraphModel	Extends mxEventSource to implement a graph model.
Events
mxEvent.CHANGE	Fires when an undoable edit is dispatched.
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.
mxEvent.EXECUTE	Fires between begin- and endUpdate and after an atomic change was executed in the model.
mxEvent.EXECUTED	Fires between START_EDIT and END_EDIT after an atomic change was executed.
mxEvent.BEGIN_UPDATE	Fires after the updateLevel was incremented in beginUpdate.
mxEvent.START_EDIT	Fires after the updateLevel was changed from 0 to 1.
mxEvent.END_UPDATE	Fires after the updateLevel was decreased in endUpdate but before any notification or change dispatching.
mxEvent.END_EDIT	Fires after the updateLevel was changed from 1 to 0.
mxEvent.BEFORE_UNDO	Fires before the change is dispatched after the update level has reached 0 in endUpdate.
mxEvent.UNDO	Fires after the change was dispatched in endUpdate.
Functions
mxGraphModel	Constructs a new graph model.
Variables
root	Holds the root cell, which in turn contains the cells that represent the layers of the diagram as child cells.
cells	Maps from Ids to cells.
maintainEdgeParent	Specifies if edges should automatically be moved into the nearest common ancestor of their terminals.
ignoreRelativeEdgeParent	Specifies if relative edge parents should be ignored for finding the nearest common ancestors of an edge’s terminals.
createIds	Specifies if the model should automatically create Ids for new cells.
prefix	Defines the prefix of new Ids.
postfix	Defines the postfix of new Ids.
nextId	Specifies the next Id to be created.
currentEdit	Holds the changes for the current transaction.
updateLevel	Counter for the depth of nested transactions.
endingUpdate	True if the program flow is currently inside endUpdate.
Functions
clear	Sets a new root using createRoot.
isCreateIds	Returns createIds.
setCreateIds	Sets createIds.
createRoot	Creates a new root cell with a default layer (child 0).
getCell	Returns the mxCell for the specified Id or null if no cell can be found for the given Id.
filterCells	Returns the cells from the given array where the given filter function returns true.
getDescendants	Returns all descendants of the given cell and the cell itself in an array.
filterDescendants	Visits all cells recursively and applies the specified filter function to each cell.
getRoot	Returns the root of the model or the topmost parent of the given cell.
setRoot	Sets the root of the model using mxRootChange and adds the change to the current transaction.
rootChanged	Inner callback to change the root of the model and update the internal datastructures, such as cells and nextId.
isRoot	Returns true if the given cell is the root of the model and a non-null value.
isLayer	Returns true if isRoot returns true for the parent of the given cell.
isAncestor	Returns true if the given parent is an ancestor of the given child.
contains	Returns true if the model contains the given mxCell.
getParent	Returns the parent of the given cell.
add	Adds the specified child to the parent at the given index using mxChildChange and adds the change to the current transaction.
cellAdded	Inner callback to update cells when a cell has been added.
createId	Hook method to create an Id for the specified cell.
updateEdgeParents	Updates the parent for all edges that are connected to cell or one of its descendants using updateEdgeParent.
updateEdgeParent	Inner callback to update the parent of the specified mxCell to the nearest-common-ancestor of its two terminals.
getOrigin	Returns the absolute, accumulated origin for the children inside the given parent as an mxPoint.
getNearestCommonAncestor	Returns the nearest common ancestor for the specified cells.
remove	Removes the specified cell from the model using mxChildChange and adds the change to the current transaction.
cellRemoved	Inner callback to update cells when a cell has been removed.
parentForCellChanged	Inner callback to update the parent of a cell using mxCell.insert on the parent and return the previous parent.
getChildCount	Returns the number of children in the given cell.
getChildAt	Returns the child of the given mxCell at the given index.
getChildren	Returns all children of the given mxCell as an array of mxCells.
getChildVertices	Returns the child vertices of the given parent.
getChildEdges	Returns the child edges of the given parent.
getChildCells	Returns the children of the given cell that are vertices and/or edges depending on the arguments.
getTerminal	Returns the source or target mxCell of the given edge depending on the value of the boolean parameter.
setTerminal	Sets the source or target terminal of the given mxCell using mxTerminalChange and adds the change to the current transaction.
setTerminals	Sets the source and target mxCell of the given mxCell in a single transaction using setTerminal for each end of the edge.
terminalForCellChanged	Inner helper function to update the terminal of the edge using mxCell.insertEdge and return the previous terminal.
getEdgeCount	Returns the number of distinct edges connected to the given cell.
getEdgeAt	Returns the edge of cell at the given index.
getDirectedEdgeCount	Returns the number of incoming or outgoing edges, ignoring the given edge.
getConnections	Returns all edges of the given cell without loops.
getIncomingEdges	Returns the incoming edges of the given cell without loops.
getOutgoingEdges	Returns the outgoing edges of the given cell without loops.
getEdges	Returns all distinct edges connected to this cell as a new array of mxCells.
getEdgesBetween	Returns all edges between the given source and target pair.
getOpposites	Returns all opposite vertices wrt terminal for the given edges, only returning sources and/or targets as specified.
getTopmostCells	Returns the topmost cells of the hierarchy in an array that contains no descendants for each mxCell that it contains.
isVertex	Returns true if the given cell is a vertex.
isEdge	Returns true if the given cell is an edge.
isConnectable	Returns true if the given mxCell is connectable.
getValue	Returns the user object of the given mxCell using mxCell.getValue.
setValue	Sets the user object of then given mxCell using mxValueChange and adds the change to the current transaction.
valueForCellChanged	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.
getGeometry	Returns the mxGeometry of the given mxCell.
setGeometry	Sets the mxGeometry of the given mxCell.
geometryForCellChanged	Inner callback to update the mxGeometry of the given mxCell using mxCell.setGeometry and return the previous mxGeometry.
getStyle	Returns the style of the given mxCell.
setStyle	Sets the style of the given mxCell using mxStyleChange and adds the change to the current transaction.
styleForCellChanged	Inner callback to update the style of the given mxCell using mxCell.setStyle and return the previous style.
isCollapsed	Returns true if the given mxCell is collapsed.
setCollapsed	Sets the collapsed state of the given mxCell using mxCollapseChange and adds the change to the current transaction.
collapsedStateForCellChanged	Inner callback to update the collapsed state of the given mxCell using mxCell.setCollapsed and return the previous collapsed state.
isVisible	Returns true if the given mxCell is visible.
setVisible	Sets the visible state of the given mxCell using mxVisibleChange and adds the change to the current transaction.
visibleStateForCellChanged	Inner callback to update the visible state of the given mxCell using mxCell.setCollapsed and return the previous visible state.
execute	Executes the given edit and fires events if required.
beginUpdate	Increments the updateLevel by one.
endUpdate	Decrements the updateLevel by one and fires an <undo> event if the updateLevel reaches 0.
createUndoableEdit	Creates a new mxUndoableEdit that implements the notify function to fire a <change> and <notify> event through the mxUndoableEdit’s source.
mergeChildren	Merges the children of the given cell into the given target cell inside this model.
mergeChildren	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.
getParents	Returns an array that represents the set (no duplicates) of all parents for the given array of cells.
cloneCell	Returns a deep clone of the given mxCell (including the children) which is created using cloneCells.
cloneCells	Returns an array of clones for the given array of mxCells.
cloneCellImpl	Inner helper method for cloning cells recursively.
cellCloned	Hook for cloning the cell.
restoreClone	Inner helper method for restoring the connections in a network of cloned cells.
mxRootChange	Action to change the root in a model.
Functions
mxRootChange	Constructs a change of the root in the specified model.
execute	Carries out a change of the root using mxGraphModel.rootChanged.
mxChildChange	Action to add or remove a child in a model.
Functions
mxChildChange	Constructs a change of a child in the specified model.
execute	Changes the parent of <child> using mxGraphModel.parentForCellChanged and removes or restores the cell’s connections.
disconnect	Disconnects the given cell recursively from its terminals and stores the previous terminal in the cell’s terminals.
mxTerminalChange	Action to change a terminal in a model.
Functions
mxTerminalChange	Constructs a change of a terminal in the specified model.
execute	Changes the terminal of <cell> to <previous> using mxGraphModel.terminalForCellChanged.
mxValueChange	Action to change a user object in a model.
Functions
mxValueChange	Constructs a change of a user object in the specified model.
execute	Changes the value of <cell> to <previous> using mxGraphModel.valueForCellChanged.
mxStyleChange	Action to change a cell’s style in a model.
Functions
mxStyleChange	Constructs a change of a style in the specified model.
execute	Changes the style of <cell> to <previous> using mxGraphModel.styleForCellChanged.
mxGeometryChange	Action to change a cell’s geometry in a model.
Functions
mxGeometryChange	Constructs a change of a geometry in the specified model.
execute	Changes the geometry of <cell> ro <previous> using mxGraphModel.geometryForCellChanged.
mxCollapseChange	Action to change a cell’s collapsed state in a model.
Functions
mxCollapseChange	Constructs a change of a collapsed state in the specified model.
execute	Changes the collapsed state of <cell> to <previous> using mxGraphModel.collapsedStateForCellChanged.
mxVisibleChange	Action to change a cell’s visible state in a model.
Functions
mxVisibleChange	Constructs a change of a visible state in the specified model.
execute	Changes the visible state of <cell> to <previous> using mxGraphModel.visibleStateForCellChanged.
mxCellAttributeChange	Action to change the attribute of a cell’s user object.
Functions
mxCellAttributeChange	Constructs a change of a attribute of the DOM node stored as the value of the given mxCell.
execute	Changes the attribute of the cell’s user object by using mxCell.setAttribute.

Events

mxEvent.CHANGE

Fires when an undoable edit is dispatched. The <code>edit</code> property contains the mxUndoableEdit. The <code>changes</code> property contains the array of atomic changes inside the undoable edit. The changes property is <strong>deprecated</strong>, please use edit.changes instead.

Example

For finding newly inserted cells, the following code can be used

graph.model.addListener(mxEvent.CHANGE, function(sender, evt)
{
  var changes = evt.getProperty('edit').changes;

  for (var i = 0; i < changes.length; i++)
  {
    var change = changes[i];

    if (change instanceof mxChildChange &&
      change.change.previous == null)
    {
      graph.startEditingAtCell(change.child);
      break;
    }
  }
});

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.

mxEvent.EXECUTE

Fires between begin- and endUpdate and after an atomic change was executed in the model. The <code>change</code> property contains the atomic change that was executed.

mxEvent.EXECUTED

Fires between START_EDIT and END_EDIT after an atomic change was executed. The <code>change</code> property contains the change that was executed.

mxEvent.BEGIN_UPDATE

Fires after the updateLevel was incremented in beginUpdate. This event contains no properties.

mxEvent.START_EDIT

Fires after the updateLevel was changed from 0 to 1. This event contains no properties.

mxEvent.END_UPDATE

Fires after the updateLevel was decreased in endUpdate but before any notification or change dispatching. The <code>edit</code> property contains the currentEdit.

mxEvent.END_EDIT

Fires after the updateLevel was changed from 1 to 0. This event contains no properties.

mxEvent.BEFORE_UNDO

Fires before the change is dispatched after the update level has reached 0 in endUpdate. The <code>edit</code> property contains the <curreneEdit>.

mxEvent.UNDO

Fires after the change was dispatched in endUpdate. The <code>edit</code> property contains the currentEdit.

Functions

mxGraphModel

function mxGraphModel( root )

Constructs a new graph model. If no root is specified then a new root mxCell with a default layer is created.

Parameters

root	mxCell that represents the root cell.

Variables

root

mxGraphModel.prototype.root

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.

cells

mxGraphModel.prototype.cells

Maps from Ids to cells.

maintainEdgeParent

mxGraphModel.prototype.maintainEdgeParent

Specifies if edges should automatically be moved into the nearest common ancestor of their terminals. Default is true.

ignoreRelativeEdgeParent

mxGraphModel.prototype.ignoreRelativeEdgeParent

Specifies if relative edge parents should be ignored for finding the nearest common ancestors of an edge’s terminals. Default is true.

createIds

mxGraphModel.prototype.createIds

Specifies if the model should automatically create Ids for new cells. Default is true.

prefix

mxGraphModel.prototype.prefix

Defines the prefix of new Ids. Default is an empty string.

postfix

mxGraphModel.prototype.postfix

Defines the postfix of new Ids. Default is an empty string.

nextId

mxGraphModel.prototype.nextId

Specifies the next Id to be created. Initial value is 0.

currentEdit

mxGraphModel.prototype.currentEdit

Holds the changes for the current transaction. If the transaction is closed then a new object is created for this variable using createUndoableEdit.

updateLevel

mxGraphModel.prototype.updateLevel

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.

endingUpdate

mxGraphModel.prototype.endingUpdate

True if the program flow is currently inside endUpdate.

Functions

clear

mxGraphModel.prototype.clear = function()

Sets a new root using createRoot.

isCreateIds

mxGraphModel.prototype.isCreateIds = function()

Returns createIds.

setCreateIds

mxGraphModel.prototype.setCreateIds = function( value )

Sets createIds.

createRoot

mxGraphModel.prototype.createRoot = function()

Creates a new root cell with a default layer (child 0).

getCell

mxGraphModel.prototype.getCell = function( id )

Returns the mxCell for the specified Id or null if no cell can be found for the given Id.

Parameters

id	A string representing the Id of the cell.

filterCells

mxGraphModel.prototype.filterCells = function( cells,
filter )

Returns the cells from the given array where the given filter function returns true.

getDescendants

mxGraphModel.prototype.getDescendants = function( parent )

Returns all descendants of the given cell and the cell itself in an array.

Parameters

parent

mxCell whose descendants should be returned.

filterDescendants

mxGraphModel.prototype.filterDescendants = function( filter,
parent )

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 = function(cell)
{
 return model.isVertex(cell);
}
var vertices = model.filterDescendants(filter);

Parameters

filter	JavaScript function that takes an mxCell as an argument and returns a boolean.
parent	Optional mxCell that is used as the root of the recursion.

getRoot

mxGraphModel.prototype.getRoot = function( cell )

Returns the root of the model or the topmost parent of the given cell.

Parameters

cell	Optional mxCell that specifies the child.

setRoot

mxGraphModel.prototype.setRoot = function( root )

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

Parameters

root	mxCell that specifies the new root.

rootChanged

mxGraphModel.prototype.rootChanged = function( root )

Inner callback to change the root of the model and update the internal datastructures, such as cells and nextId. Returns the previous root.

Parameters

root	mxCell that specifies the new root.

isRoot

mxGraphModel.prototype.isRoot = function( cell )

Returns true if the given cell is the root of the model and a non-null value.

Parameters

cell	mxCell that represents the possible root.

isLayer

mxGraphModel.prototype.isLayer = function( cell )

Returns true if isRoot returns true for the parent of the given cell.

Parameters

cell	mxCell that represents the possible layer.

isAncestor

mxGraphModel.prototype.isAncestor = function( parent,
child )

Returns true if the given parent is an ancestor of the given child. Note returns true if child == parent.

Parameters

parent	mxCell that specifies the parent.
child	mxCell that specifies the child.

contains

mxGraphModel.prototype.contains = function( cell )

Returns true if the model contains the given mxCell.

Parameters

cell	mxCell that specifies the cell.

getParent

mxGraphModel.prototype.getParent = function( cell )

Returns the parent of the given cell.

Parameters

cell	mxCell whose parent should be returned.

add

mxGraphModel.prototype.add = function( parent,
child,
index )

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.

Parameters

parent	mxCell that specifies the parent to contain the child.
child	mxCell that specifies the child to be inserted.
index	Optional integer that specifies the index of the child.

cellAdded

mxGraphModel.prototype.cellAdded = function( cell )

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

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.

Parameters

cell	mxCell that specifies the cell that has been added.

createId

mxGraphModel.prototype.createId = function( cell )

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.

Parameters

cell	mxCell to create the Id for.

updateEdgeParents

mxGraphModel.prototype.updateEdgeParents = function( cell,
root )

Updates the parent for all edges that are connected to cell or one of its descendants using updateEdgeParent.

updateEdgeParent

mxGraphModel.prototype.updateEdgeParent = function( edge,
root )

Inner callback to update the parent of the specified mxCell to the nearest-common-ancestor of its two terminals.

Parameters

edge	mxCell that specifies the edge.
root	mxCell that represents the current root of the model.

getOrigin

mxGraphModel.prototype.getOrigin = function( cell )

Returns the absolute, accumulated origin for the children inside the given parent as an mxPoint.

getNearestCommonAncestor

mxGraphModel.prototype.getNearestCommonAncestor = function( cell1,
cell2 )

Returns the nearest common ancestor for the specified cells.

Parameters

cell1	mxCell that specifies the first cell in the tree.
cell2	mxCell that specifies the second cell in the tree.

remove

mxGraphModel.prototype.remove = function( cell )

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.

Parameters

cell	mxCell that should be removed.

cellRemoved

mxGraphModel.prototype.cellRemoved = function( cell )

Inner callback to update cells when a cell has been removed.

Parameters

cell	mxCell that specifies the cell that has been removed.

parentForCellChanged

mxGraphModel.prototype.parentForCellChanged = function( cell,
parent,
index )

Inner callback to update the parent of a cell using mxCell.insert on the parent and return the previous parent.

Parameters

cell	mxCell to update the parent for.
parent	mxCell that specifies the new parent of the cell.
index	Optional integer that defines the index of the child in the parent’s child array.

getChildCount

mxGraphModel.prototype.getChildCount = function( cell )

Returns the number of children in the given cell.

Parameters

cell	mxCell whose number of children should be returned.

getChildAt

mxGraphModel.prototype.getChildAt = function( cell,
index )

Returns the child of the given mxCell at the given index.

Parameters

cell	mxCell that represents the parent.
index	Integer that specifies the index of the child to be returned.

getChildren

mxGraphModel.prototype.getChildren = function( cell )

Returns all children of the given mxCell as an array of mxCells. The return value should be only be read.

Parameters

cell	mxCell the represents the parent.

getChildVertices

mxGraphModel.prototype.getChildVertices = function( parent )

Returns the child vertices of the given parent.

Parameters

cell	mxCell whose child vertices should be returned.

getChildEdges

mxGraphModel.prototype.getChildEdges = function( parent )

Returns the child edges of the given parent.

Parameters

cell	mxCell whose child edges should be returned.

getChildCells

mxGraphModel.prototype.getChildCells = function( parent,
vertices,
edges )

Returns the children of the given cell that are vertices and/or edges depending on the arguments.

Parameters

cell	mxCell the represents the parent.
vertices	Boolean indicating if child vertices should be returned. Default is false.
edges	Boolean indicating if child edges should be returned. Default is false.

getTerminal

mxGraphModel.prototype.getTerminal = function( edge,
isSource )

Returns the source or target mxCell of the given edge depending on the value of the boolean parameter.

Parameters

edge	mxCell that specifies the edge.
isSource	Boolean indicating which end of the edge should be returned.

setTerminal

mxGraphModel.prototype.setTerminal = function( edge,
terminal,
isSource )

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.

Parameters

edge	mxCell that specifies the edge.
terminal	mxCell that specifies the new terminal.
isSource	Boolean indicating if the terminal is the new source or target terminal of the edge.

setTerminals

mxGraphModel.prototype.setTerminals = function( edge,
source,
target )

Sets the source and target mxCell of the given mxCell in a single transaction using setTerminal for each end of the edge.

Parameters

edge	mxCell that specifies the edge.
source	mxCell that specifies the new source terminal.
target	mxCell that specifies the new target terminal.

terminalForCellChanged

mxGraphModel.prototype.terminalForCellChanged = function( edge,
terminal,
isSource )

Inner helper function to update the terminal of the edge using mxCell.insertEdge and return the previous terminal.

Parameters

edge	mxCell that specifies the edge to be updated.
terminal	mxCell that specifies the new terminal.
isSource	Boolean indicating if the terminal is the new source or target terminal of the edge.

getEdgeCount

mxGraphModel.prototype.getEdgeCount = function( cell )

Returns the number of distinct edges connected to the given cell.

Parameters

cell	mxCell that represents the vertex.

getEdgeAt

mxGraphModel.prototype.getEdgeAt = function( cell,
index )

Returns the edge of cell at the given index.

Parameters

cell	mxCell that specifies the vertex.
index	Integer that specifies the index of the edge to return.

getDirectedEdgeCount

mxGraphModel.prototype.getDirectedEdgeCount = function( cell,
outgoing,
ignoredEdge )

Returns the number of incoming or outgoing edges, ignoring the given edge.

Parameters

cell	mxCell whose edge count should be returned.
outgoing	Boolean that specifies if the number of outgoing or incoming edges should be returned.
ignoredEdge	mxCell that represents an edge to be ignored.

getConnections

mxGraphModel.prototype.getConnections = function( cell )

Returns all edges of the given cell without loops.

Parameters

cell	mxCell whose edges should be returned.

getIncomingEdges

mxGraphModel.prototype.getIncomingEdges = function( cell )

Returns the incoming edges of the given cell without loops.

Parameters

cell	mxCell whose incoming edges should be returned.

getOutgoingEdges

mxGraphModel.prototype.getOutgoingEdges = function( cell )

Returns the outgoing edges of the given cell without loops.

Parameters

cell	mxCell whose outgoing edges should be returned.

getEdges

mxGraphModel.prototype.getEdges = function( cell,
incoming,
outgoing,
includeLoops )

Returns all distinct edges connected to this cell as a new array of mxCells. 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.

Parameters

cell	mxCell that specifies the cell.
incoming	Optional boolean that specifies if incoming edges should be returned. Default is true.
outgoing	Optional boolean that specifies if outgoing edges should be returned. Default is true.
includeLoops	Optional boolean that specifies if loops should be returned. Default is true.

getEdgesBetween

mxGraphModel.prototype.getEdgesBetween = function( source,
target,
directed )

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.

Parameters

source	mxCell that defines the source terminal of the edge to be returned.
target	mxCell that defines the target terminal of the edge to be returned.
directed	Optional boolean that specifies if the direction of the edge should be taken into account. Default is false.

getOpposites

mxGraphModel.prototype.getOpposites = function( edges,
terminal,
sources,
targets )

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

Parameters

edges	Array of mxCells that contain the edges to be examined.
terminal	mxCell that specifies the known end of the edges.
sources	Boolean that specifies if source terminals should be contained in the result. Default is true.
targets	Boolean that specifies if target terminals should be contained in the result. Default is true.

getTopmostCells

mxGraphModel.prototype.getTopmostCells = function( cells )

Returns the topmost cells of the hierarchy in an array that contains no descendants for each mxCell that it contains. Duplicates should be removed in the cells array to improve performance.

Parameters

cells

Array of mxCells whose topmost ancestors should be returned.

isVertex

mxGraphModel.prototype.isVertex = function( cell )

Returns true if the given cell is a vertex.

Parameters

cell	mxCell that represents the possible vertex.

isEdge

mxGraphModel.prototype.isEdge = function( cell )

Returns true if the given cell is an edge.

Parameters

cell	mxCell that represents the possible edge.

isConnectable

mxGraphModel.prototype.isConnectable = function( cell )

Returns true if the given mxCell is connectable. If <edgesConnectable> is false, then this function returns false for all edges else it returns the return value of mxCell.isConnectable.

Parameters

cell	mxCell whose connectable state should be returned.

getValue

mxGraphModel.prototype.getValue = function( cell )

Returns the user object of the given mxCell using mxCell.getValue.

Parameters

cell	mxCell whose user object should be returned.

setValue

mxGraphModel.prototype.setValue = function( cell,
value )

Sets the user object of then given mxCell using mxValueChange and adds the change to the current transaction.

Parameters

cell	mxCell whose user object should be changed.
value	Object that defines the new user object.

valueForCellChanged

mxGraphModel.prototype.valueForCellChanged = function( cell,
value )

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 = function(cell, value)
{
  var previous = cell.value.getAttribute('label');
  cell.value.setAttribute('label', value);

  return previous;
};

getGeometry

mxGraphModel.prototype.getGeometry = function( cell )

Returns the mxGeometry of the given mxCell.

Parameters

cell	mxCell whose geometry should be returned.

setGeometry

mxGraphModel.prototype.setGeometry = function( cell,
geometry )

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.

Parameters

cell	mxCell whose geometry should be changed.
geometry	mxGeometry that defines the new geometry.

geometryForCellChanged

mxGraphModel.prototype.geometryForCellChanged = function( cell,
geometry )

Inner callback to update the mxGeometry of the given mxCell using mxCell.setGeometry and return the previous mxGeometry.

getStyle

mxGraphModel.prototype.getStyle = function( cell )

Returns the style of the given mxCell.

Parameters

cell	mxCell whose style should be returned.

setStyle

mxGraphModel.prototype.setStyle = function( cell,
style )

Sets the style of the given mxCell using mxStyleChange and adds the change to the current transaction.

Parameters

cell	mxCell whose style should be changed.
style	String of the form [stylename;\|key=value;] to specify the new cell style.

styleForCellChanged

mxGraphModel.prototype.styleForCellChanged = function( cell,
style )

Inner callback to update the style of the given mxCell using mxCell.setStyle and return the previous style.

Parameters

cell	mxCell that specifies the cell to be updated.
style	String of the form [stylename;\|key=value;] to specify the new cell style.

isCollapsed

mxGraphModel.prototype.isCollapsed = function( cell )

Returns true if the given mxCell is collapsed.

Parameters

cell	mxCell whose collapsed state should be returned.

setCollapsed

mxGraphModel.prototype.setCollapsed = function( cell,
collapsed )

Sets the collapsed state of the given mxCell using mxCollapseChange and adds the change to the current transaction.

Parameters

cell	mxCell whose collapsed state should be changed.
collapsed	Boolean that specifies the new collpased state.

collapsedStateForCellChanged

mxGraphModel.prototype.collapsedStateForCellChanged = function( cell,
collapsed )

Inner callback to update the collapsed state of the given mxCell using mxCell.setCollapsed and return the previous collapsed state.

Parameters

cell	mxCell that specifies the cell to be updated.
collapsed	Boolean that specifies the new collpased state.

isVisible

mxGraphModel.prototype.isVisible = function( cell )

Returns true if the given mxCell is visible.

Parameters

cell	mxCell whose visible state should be returned.

setVisible

mxGraphModel.prototype.setVisible = function( cell,
visible )

Sets the visible state of the given mxCell using mxVisibleChange and adds the change to the current transaction.

Parameters

cell	mxCell whose visible state should be changed.
visible	Boolean that specifies the new visible state.

visibleStateForCellChanged

mxGraphModel.prototype.visibleStateForCellChanged = function( cell,
visible )

Inner callback to update the visible state of the given mxCell using mxCell.setCollapsed and return the previous visible state.

Parameters

cell	mxCell that specifies the cell to be updated.
visible	Boolean that specifies the new visible state.

execute

mxGraphModel.prototype.execute = function( change )

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.

Parameters

change

Object that described the change.

beginUpdate

mxGraphModel.prototype.beginUpdate = function()

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

endUpdate

mxGraphModel.prototype.endUpdate = function()

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.

createUndoableEdit

mxGraphModel.prototype.createUndoableEdit = function( significant )

Creates a new mxUndoableEdit that implements the notify function to fire a <change> and <notify> event through the mxUndoableEdit’s source.

Parameters

significant

Optional boolean that specifies if the edit to be created is significant. Default is true.

mergeChildren

mxGraphModel.prototype.mergeChildren = function( from,
to,
cloneAllEdges )

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.

mergeChildren

mxGraphModel.prototype.mergeChildrenImpl = function( from,
to,
cloneAllEdges,
mapping )

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.

getParents

mxGraphModel.prototype.getParents = function( cells )

Returns an array that represents the set (no duplicates) of all parents for the given array of cells.

Parameters

cells

Array of cells whose parents should be returned.

cloneCell

mxGraphModel.prototype.cloneCell = function( cell,
includeChildren )

Returns a deep clone of the given mxCell (including the children) which is created using cloneCells.

Parameters

cell	mxCell to be cloned.
includeChildren	Optional boolean indicating if the cells should be cloned with all descendants. Default is true.

cloneCells

mxGraphModel.prototype.cloneCells = function( cells,
includeChildren,
mapping )

Returns an array of clones for the given array of mxCells. 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.

Parameters

cells	Array of mxCell to be cloned.
includeChildren	Optional boolean indicating if the cells should be cloned with all descendants. Default is true.
mapping	Optional mapping for existing clones.

cloneCellImpl

mxGraphModel.prototype.cloneCellImpl = function( cell,
mapping,
includeChildren )

Inner helper method for cloning cells recursively.

cellCloned

mxGraphModel.prototype.cellCloned = function( cell )

Hook for cloning the cell. This returns cell.clone() or any possible exceptions.

restoreClone

mxGraphModel.prototype.restoreClone = function( clone,
cell,
mapping )

Inner helper method for restoring the connections in a network of cloned cells.

mxRootChange

Action to change the root in a model.

Summary

Functions
mxRootChange	Constructs a change of the root in the specified model.
execute	Carries out a change of the root using mxGraphModel.rootChanged.

Functions

mxRootChange

function mxRootChange( model,
root )

Constructs a change of the root in the specified model.

execute

mxRootChange.prototype.execute = function()

Carries out a change of the root using mxGraphModel.rootChanged.

mxChildChange

Action to add or remove a child in a model.

Summary

Functions
mxChildChange	Constructs a change of a child in the specified model.
execute	Changes the parent of <child> using mxGraphModel.parentForCellChanged and removes or restores the cell’s connections.
disconnect	Disconnects the given cell recursively from its terminals and stores the previous terminal in the cell’s terminals.

Functions

mxChildChange

function mxChildChange( model,
parent,
child,
index )

Constructs a change of a child in the specified model.

execute

mxChildChange.prototype.execute = function()

Changes the parent of <child> using mxGraphModel.parentForCellChanged and removes or restores the cell’s connections.

disconnect

Disconnects the given cell recursively from its terminals and stores the previous terminal in the cell’s terminals.

mxTerminalChange

Action to change a terminal in a model.

Summary

Functions
mxTerminalChange	Constructs a change of a terminal in the specified model.
execute	Changes the terminal of <cell> to <previous> using mxGraphModel.terminalForCellChanged.

Functions

mxTerminalChange

function mxTerminalChange( model,
cell,
terminal,
source )

Constructs a change of a terminal in the specified model.

execute

mxTerminalChange.prototype.execute = function()

Changes the terminal of <cell> to <previous> using mxGraphModel.terminalForCellChanged.

mxValueChange

Action to change a user object in a model.

Summary

Functions
mxValueChange	Constructs a change of a user object in the specified model.
execute	Changes the value of <cell> to <previous> using mxGraphModel.valueForCellChanged.

Functions

mxValueChange

function mxValueChange( model,
cell,
value )

Constructs a change of a user object in the specified model.

execute

mxValueChange.prototype.execute = function()

Changes the value of <cell> to <previous> using mxGraphModel.valueForCellChanged.

mxStyleChange

Action to change a cell’s style in a model.

Summary

Functions
mxStyleChange	Constructs a change of a style in the specified model.
execute	Changes the style of <cell> to <previous> using mxGraphModel.styleForCellChanged.

Functions

mxStyleChange

function mxStyleChange( model,
cell,
style )

Constructs a change of a style in the specified model.

execute

mxStyleChange.prototype.execute = function()

Changes the style of <cell> to <previous> using mxGraphModel.styleForCellChanged.

mxGeometryChange

Action to change a cell’s geometry in a model.

Summary

Functions
mxGeometryChange	Constructs a change of a geometry in the specified model.
execute	Changes the geometry of <cell> ro <previous> using mxGraphModel.geometryForCellChanged.

Functions

mxGeometryChange

function mxGeometryChange( model,
cell,
geometry )

Constructs a change of a geometry in the specified model.

execute

mxGeometryChange.prototype.execute = function()

Changes the geometry of <cell> ro <previous> using mxGraphModel.geometryForCellChanged.

mxCollapseChange

Action to change a cell’s collapsed state in a model.

Summary

Functions
mxCollapseChange	Constructs a change of a collapsed state in the specified model.
execute	Changes the collapsed state of <cell> to <previous> using mxGraphModel.collapsedStateForCellChanged.

Functions

mxCollapseChange

function mxCollapseChange( model,
cell,
collapsed )

Constructs a change of a collapsed state in the specified model.

execute

mxCollapseChange.prototype.execute = function()

Changes the collapsed state of <cell> to <previous> using mxGraphModel.collapsedStateForCellChanged.

mxVisibleChange

Action to change a cell’s visible state in a model.

Summary

Functions
mxVisibleChange	Constructs a change of a visible state in the specified model.
execute	Changes the visible state of <cell> to <previous> using mxGraphModel.visibleStateForCellChanged.

Functions

mxVisibleChange

function mxVisibleChange( model,
cell,
visible )

Constructs a change of a visible state in the specified model.

execute

mxVisibleChange.prototype.execute = function()

Changes the visible state of <cell> to <previous> using mxGraphModel.visibleStateForCellChanged.

mxCellAttributeChange

Action to change the attribute of a cell’s user object. There is no method on the graph model that uses this action. To use the action, you can use the code shown in the example below.

Example

To change the attributeName in the cell’s user object to attributeValue, use the following code:

model.beginUpdate();
try
{
  var edit = new mxCellAttributeChange(
    cell, attributeName, attributeValue);
  model.execute(edit);
}
finally
{
  model.endUpdate();
}

Summary

Functions
mxCellAttributeChange	Constructs a change of a attribute of the DOM node stored as the value of the given mxCell.
execute	Changes the attribute of the cell’s user object by using mxCell.setAttribute.

Functions

mxCellAttributeChange

function mxCellAttributeChange( cell,
attribute,
value )

Constructs a change of a attribute of the DOM node stored as the value of the given mxCell.

execute

mxCellAttributeChange.prototype.execute = function()

Changes the attribute of the cell’s user object by using mxCell.setAttribute.