mxCell

Cells are the elements of the graph model.  They represent the state of the groups, vertices and edges in a graph.

Custom attributes

For custom attributes we recommend using an XML node as the value of a cell.  The following code can be used to create a cell with an XML node as the value:

var doc = mxUtils.createXmlDocument();
var node = doc.createElement('MyNode')
node.setAttribute('label', 'MyLabel');
node.setAttribute('attribute1', 'value1');
graph.insertVertex(graph.getDefaultParent(), null, node, 40, 40, 80, 30);

For the label to work, mxGraph.convertValueToString and mxGraph.cellLabelChanged should be overridden as follows:

graph.convertValueToString = function(cell)
{
  if (mxUtils.isNode(cell.value))
  {
    return cell.getAttribute('label', '')
  }
};

var cellLabelChanged = graph.cellLabelChanged;
graph.cellLabelChanged = function(cell, newValue, autoSize)
{
  if (mxUtils.isNode(cell.value))
  {
    // Clones the value for correct undo/redo
    var elt = cell.value.cloneNode(true);
    elt.setAttribute('label', newValue);
    newValue = elt;
  }

  cellLabelChanged.apply(this, arguments);
};
Summary
mxCellCells are the elements of the graph model.
Functions
onInitCalled from within the constructor.
mxCellConstructs a new cell to be used in a graph model.
Variables
idHolds the Id.
valueHolds the user object.
geometryHolds the mxGeometry.
styleHolds the style as a string of the form [(stylename|key=value);].
vertexSpecifies whether the cell is a vertex.
edgeSpecifies whether the cell is an edge.
connectableSpecifies whether the cell is connectable.
visibleSpecifies whether the cell is visible.
collapsedSpecifies whether the cell is collapsed.
parentReference to the parent cell.
sourceReference to the source terminal.
targetReference to the target terminal.
childrenHolds the child cells.
edgesHolds the edges.
mxTransientList of members that should not be cloned inside clone.
Functions
getIdReturns the Id of the cell as a string.
setIdSets the Id of the cell to the given string.
getValueReturns the user object of the cell.
setValueSets the user object of the cell.
valueChangedChanges the user object after an in-place edit and returns the previous value.
getGeometryReturns the mxGeometry that describes the geometry.
setGeometrySets the mxGeometry to be used as the geometry.
getStyleReturns a string that describes the style.
setStyleSets the string to be used as the style.
isVertexReturns true if the cell is a vertex.
setVertexSpecifies if the cell is a vertex.
isEdgeReturns true if the cell is an edge.
setEdgeSpecifies if the cell is an edge.
isConnectableReturns true if the cell is connectable.
setConnectableSets the connectable state.
isVisibleReturns true if the cell is visibile.
setVisibleSpecifies if the cell is visible.
isCollapsedReturns true if the cell is collapsed.
setCollapsedSets the collapsed state.
getParentReturns the cell’s parent.
setParentSets the parent cell.
getTerminalReturns the source or target terminal.
setTerminalSets the source or target terminal and returns the new terminal.
getChildCountReturns the number of child cells.
getIndexReturns the index of the specified child in the child array.
getChildAtReturns the child at the specified index.
insertInserts the specified child into the child array at the specified index and updates the parent reference of the child.
removeRemoves the child at the specified index from the child array and returns the child that was removed.
removeFromParentRemoves the cell from its parent.
getEdgeCountReturns the number of edges in the edge array.
getEdgeIndexReturns the index of the specified edge in edges.
getEdgeAtReturns the edge at the specified index in edges.
insertEdgeInserts the specified edge into the edge array and returns the edge.
removeEdgeRemoves the specified edge from the edge array and returns the edge.
removeFromTerminalRemoves the edge from its source or target terminal.
hasAttributeReturns true if the user object is an XML node that contains the given attribute.
getAttributeReturns the specified attribute from the user object if it is an XML node.
setAttributeSets the specified attribute on the user object if it is an XML node.
cloneReturns a clone of the cell.
cloneValueReturns a clone of the cell’s user object.

Functions

onInit

Called from within the constructor.

mxCell

function mxCell(value,
geometry,
style)

Constructs a new cell to be used in a graph model.  This method invokes onInit upon completion.

Parameters

valueOptional object that represents the cell value.
geometryOptional mxGeometry that specifies the geometry.
styleOptional formatted string that defines the style.

Variables

id

mxCell.prototype.id

Holds the Id.  Default is null.

value

mxCell.prototype.value

Holds the user object.  Default is null.

geometry

mxCell.prototype.geometry

Holds the mxGeometry.  Default is null.

style

mxCell.prototype.style

Holds the style as a string of the form [(stylename|key=value);].  Default is null.

vertex

mxCell.prototype.vertex

Specifies whether the cell is a vertex.  Default is false.

edge

mxCell.prototype.edge

Specifies whether the cell is an edge.  Default is false.

connectable

mxCell.prototype.connectable

Specifies whether the cell is connectable.  Default is true.

visible

mxCell.prototype.visible

Specifies whether the cell is visible.  Default is true.

collapsed

mxCell.prototype.collapsed

Specifies whether the cell is collapsed.  Default is false.

parent

mxCell.prototype.parent

Reference to the parent cell.

source

mxCell.prototype.source

Reference to the source terminal.

target

mxCell.prototype.target

Reference to the target terminal.

children

mxCell.prototype.children

Holds the child cells.

edges

mxCell.prototype.edges

Holds the edges.

mxTransient

mxCell.prototype.mxTransient

List of members that should not be cloned inside clone.  This field is passed to mxUtils.clone and is not made persistent in mxCellCodec.  This is not a convention for all classes, it is only used in this class to mark transient fields since transient modifiers are not supported by the language.

Functions

getId

mxCell.prototype.getId = function()

Returns the Id of the cell as a string.

setId

mxCell.prototype.setId = function(id)

Sets the Id of the cell to the given string.

getValue

mxCell.prototype.getValue = function()

Returns the user object of the cell.  The user object is stored in value.

setValue

mxCell.prototype.setValue = function(value)

Sets the user object of the cell.  The user object is stored in value.

valueChanged

mxCell.prototype.valueChanged = function(newValue)

Changes the user object after an in-place edit and returns the previous value.  This implementation replaces the user object with the given value and returns the old user object.

getGeometry

mxCell.prototype.getGeometry = function()

Returns the mxGeometry that describes the geometry.

setGeometry

mxCell.prototype.setGeometry = function(geometry)

Sets the mxGeometry to be used as the geometry.

getStyle

mxCell.prototype.getStyle = function()

Returns a string that describes the style.

setStyle

mxCell.prototype.setStyle = function(style)

Sets the string to be used as the style.

isVertex

mxCell.prototype.isVertex = function()

Returns true if the cell is a vertex.

setVertex

mxCell.prototype.setVertex = function(vertex)

Specifies if the cell is a vertex.  This should only be assigned at construction of the cell and not be changed during its lifecycle.

Parameters

vertexBoolean that specifies if the cell is a vertex.

isEdge

mxCell.prototype.isEdge = function()

Returns true if the cell is an edge.

setEdge

mxCell.prototype.setEdge = function(edge)

Specifies if the cell is an edge.  This should only be assigned at construction of the cell and not be changed during its lifecycle.

Parameters

edgeBoolean that specifies if the cell is an edge.

isConnectable

mxCell.prototype.isConnectable = function()

Returns true if the cell is connectable.

setConnectable

mxCell.prototype.setConnectable = function(connectable)

Sets the connectable state.

Parameters

connectableBoolean that specifies the new connectable state.

isVisible

mxCell.prototype.isVisible = function()

Returns true if the cell is visibile.

setVisible

mxCell.prototype.setVisible = function(visible)

Specifies if the cell is visible.

Parameters

visibleBoolean that specifies the new visible state.

isCollapsed

mxCell.prototype.isCollapsed = function()

Returns true if the cell is collapsed.

setCollapsed

mxCell.prototype.setCollapsed = function(collapsed)

Sets the collapsed state.

Parameters

collapsedBoolean that specifies the new collapsed state.

getParent

mxCell.prototype.getParent = function()

Returns the cell’s parent.

setParent

mxCell.prototype.setParent = function(parent)

Sets the parent cell.

Parameters

parentmxCell that represents the new parent.

getTerminal

mxCell.prototype.getTerminal = function(source)

Returns the source or target terminal.

Parameters

sourceBoolean that specifies if the source terminal should be returned.

setTerminal

mxCell.prototype.setTerminal = function(terminal,
isSource)

Sets the source or target terminal and returns the new terminal.

Parameters

terminalmxCell that represents the new source or target terminal.
isSourceBoolean that specifies if the source or target terminal should be set.

getChildCount

mxCell.prototype.getChildCount = function()

Returns the number of child cells.

getIndex

mxCell.prototype.getIndex = function(child)

Returns the index of the specified child in the child array.

Parameters

childChild whose index should be returned.

getChildAt

mxCell.prototype.getChildAt = function(index)

Returns the child at the specified index.

Parameters

indexInteger that specifies the child to be returned.

insert

mxCell.prototype.insert = function(child,
index)

Inserts the specified child into the child array at the specified index and updates the parent reference of the child.  If not childIndex is specified then the child is appended to the child array.  Returns the inserted child.

Parameters

childmxCell to be inserted or appended to the child array.
indexOptional integer that specifies the index at which the child should be inserted into the child array.

remove

mxCell.prototype.remove = function(index)

Removes the child at the specified index from the child array and returns the child that was removed.  Will remove the parent reference of the child.

Parameters

indexInteger that specifies the index of the child to be removed.

removeFromParent

mxCell.prototype.removeFromParent = function()

Removes the cell from its parent.

getEdgeCount

mxCell.prototype.getEdgeCount = function()

Returns the number of edges in the edge array.

getEdgeIndex

mxCell.prototype.getEdgeIndex = function(edge)

Returns the index of the specified edge in edges.

Parameters

edgemxCell whose index in edges should be returned.

getEdgeAt

mxCell.prototype.getEdgeAt = function(index)

Returns the edge at the specified index in edges.

Parameters

indexInteger that specifies the index of the edge to be returned.

insertEdge

mxCell.prototype.insertEdge = function(edge,
isOutgoing)

Inserts the specified edge into the edge array and returns the edge.  Will update the respective terminal reference of the edge.

Parameters

edgemxCell to be inserted into the edge array.
isOutgoingBoolean that specifies if the edge is outgoing.

removeEdge

mxCell.prototype.removeEdge = function(edge,
isOutgoing)

Removes the specified edge from the edge array and returns the edge.  Will remove the respective terminal reference from the edge.

Parameters

edgemxCell to be removed from the edge array.
isOutgoingBoolean that specifies if the edge is outgoing.

removeFromTerminal

mxCell.prototype.removeFromTerminal = function(isSource)

Removes the edge from its source or target terminal.

Parameters

isSourceBoolean that specifies if the edge should be removed from its source or target terminal.

hasAttribute

mxCell.prototype.hasAttribute = function(name)

Returns true if the user object is an XML node that contains the given attribute.

Parameters

nameName of the attribute.

getAttribute

mxCell.prototype.getAttribute = function(name,
defaultValue)

Returns the specified attribute from the user object if it is an XML node.

Parameters

nameName of the attribute whose value should be returned.
defaultValueOptional default value to use if the attribute has no value.

setAttribute

mxCell.prototype.setAttribute = function(name,
value)

Sets the specified attribute on the user object if it is an XML node.

Parameters

nameName of the attribute whose value should be set.
valueNew value of the attribute.

clone

mxCell.prototype.clone = function()

Returns a clone of the cell.  Uses cloneValue to clone the user object.  All fields in mxTransient are ignored during the cloning.

cloneValue

mxCell.prototype.cloneValue = function()

Returns a clone of the cell’s user object.

function mxCell(value,
geometry,
style)
Constructs a new cell to be used in a graph model.
mxCell.prototype.id
Holds the Id.
mxCell.prototype.value
Holds the user object.
mxCell.prototype.geometry
Holds the mxGeometry.
Extends mxRectangle to represent the geometry of a cell.
mxCell.prototype.style
Holds the style as a string of the form [(stylename|key=value);].
mxCell.prototype.vertex
Specifies whether the cell is a vertex.
mxCell.prototype.edge
Specifies whether the cell is an edge.
mxCell.prototype.connectable
Specifies whether the cell is connectable.
mxCell.prototype.visible
Specifies whether the cell is visible.
mxCell.prototype.collapsed
Specifies whether the cell is collapsed.
mxCell.prototype.parent
Reference to the parent cell.
mxCell.prototype.source
Reference to the source terminal.
mxCell.prototype.target
Reference to the target terminal.
mxCell.prototype.children
Holds the child cells.
mxCell.prototype.edges
Holds the edges.
mxCell.prototype.mxTransient
List of members that should not be cloned inside clone.
mxCell.prototype.clone = function()
Returns a clone of the cell.
mxCell.prototype.getId = function()
Returns the Id of the cell as a string.
mxCell.prototype.setId = function(id)
Sets the Id of the cell to the given string.
mxCell.prototype.getValue = function()
Returns the user object of the cell.
mxCell.prototype.setValue = function(value)
Sets the user object of the cell.
mxCell.prototype.valueChanged = function(newValue)
Changes the user object after an in-place edit and returns the previous value.
mxCell.prototype.getGeometry = function()
Returns the mxGeometry that describes the geometry.
mxCell.prototype.setGeometry = function(geometry)
Sets the mxGeometry to be used as the geometry.
mxCell.prototype.getStyle = function()
Returns a string that describes the style.
mxCell.prototype.setStyle = function(style)
Sets the string to be used as the style.
mxCell.prototype.isVertex = function()
Returns true if the cell is a vertex.
mxCell.prototype.setVertex = function(vertex)
Specifies if the cell is a vertex.
mxCell.prototype.isEdge = function()
Returns true if the cell is an edge.
mxCell.prototype.setEdge = function(edge)
Specifies if the cell is an edge.
mxCell.prototype.isConnectable = function()
Returns true if the cell is connectable.
mxCell.prototype.setConnectable = function(connectable)
Sets the connectable state.
mxCell.prototype.isVisible = function()
Returns true if the cell is visibile.
mxCell.prototype.setVisible = function(visible)
Specifies if the cell is visible.
mxCell.prototype.isCollapsed = function()
Returns true if the cell is collapsed.
mxCell.prototype.setCollapsed = function(collapsed)
Sets the collapsed state.
mxCell.prototype.getParent = function()
Returns the cell’s parent.
mxCell.prototype.setParent = function(parent)
Sets the parent cell.
mxCell.prototype.getTerminal = function(source)
Returns the source or target terminal.
mxCell.prototype.setTerminal = function(terminal,
isSource)
Sets the source or target terminal and returns the new terminal.
mxCell.prototype.getChildCount = function()
Returns the number of child cells.
mxCell.prototype.getIndex = function(child)
Returns the index of the specified child in the child array.
mxCell.prototype.getChildAt = function(index)
Returns the child at the specified index.
mxCell.prototype.insert = function(child,
index)
Inserts the specified child into the child array at the specified index and updates the parent reference of the child.
mxCell.prototype.remove = function(index)
Removes the child at the specified index from the child array and returns the child that was removed.
mxCell.prototype.removeFromParent = function()
Removes the cell from its parent.
mxCell.prototype.getEdgeCount = function()
Returns the number of edges in the edge array.
mxCell.prototype.getEdgeIndex = function(edge)
Returns the index of the specified edge in edges.
mxCell.prototype.getEdgeAt = function(index)
Returns the edge at the specified index in edges.
mxCell.prototype.insertEdge = function(edge,
isOutgoing)
Inserts the specified edge into the edge array and returns the edge.
mxCell.prototype.removeEdge = function(edge,
isOutgoing)
Removes the specified edge from the edge array and returns the edge.
mxCell.prototype.removeFromTerminal = function(isSource)
Removes the edge from its source or target terminal.
mxCell.prototype.hasAttribute = function(name)
Returns true if the user object is an XML node that contains the given attribute.
mxCell.prototype.getAttribute = function(name,
defaultValue)
Returns the specified attribute from the user object if it is an XML node.
mxCell.prototype.setAttribute = function(name,
value)
Sets the specified attribute on the user object if it is an XML node.
mxCell.prototype.cloneValue = function()
Returns a clone of the cell’s user object.
mxGraph.prototype.convertValueToString = function(cell)
Returns the textual representation for the given cell.
mxGraph.prototype.cellLabelChanged = function(cell,
value,
autoSize)
Sets the new label for a cell.
Called from within the constructor.
clone: function(obj,
transients,
shallow)
Recursively clones the specified object ignoring all fieldnames in the given array of transient fields.
Codec for mxCells.
Close