Cells are the elements of the graph model. They represent the state of the groups, vertices and edges in a graph.
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);
};| mxCell | Cells are the elements of the graph model. |
| Functions | |
| onInit | Called from within the constructor. |
| mxCell | Constructs a new cell to be used in a graph model. |
| Variables | |
| id | Holds the Id. |
| value | Holds the user object. |
| geometry | Holds the mxGeometry. |
| style | Holds the style as a string of the form [(stylename|key=value);]. |
| vertex | Specifies whether the cell is a vertex. |
| edge | Specifies whether the cell is an edge. |
| connectable | Specifies whether the cell is connectable. |
| visible | Specifies whether the cell is visible. |
| collapsed | Specifies whether the cell is collapsed. |
| parent | Reference to the parent cell. |
| source | Reference to the source terminal. |
| target | Reference to the target terminal. |
| children | Holds the child cells. |
| edges | Holds the edges. |
| mxTransient | List of members that should not be cloned inside clone. |
| Functions | |
| getId | Returns the Id of the cell as a string. |
| setId | Sets the Id of the cell to the given string. |
| getValue | Returns the user object of the cell. |
| setValue | Sets the user object of the cell. |
| valueChanged | Changes the user object after an in-place edit and returns the previous value. |
| getGeometry | Returns the mxGeometry that describes the geometry. |
| setGeometry | Sets the mxGeometry to be used as the geometry. |
| getStyle | Returns a string that describes the style. |
| setStyle | Sets the string to be used as the style. |
| isVertex | Returns true if the cell is a vertex. |
| setVertex | Specifies if the cell is a vertex. |
| isEdge | Returns true if the cell is an edge. |
| setEdge | Specifies if the cell is an edge. |
| isConnectable | Returns true if the cell is connectable. |
| setConnectable | Sets the connectable state. |
| isVisible | Returns true if the cell is visibile. |
| setVisible | Specifies if the cell is visible. |
| isCollapsed | Returns true if the cell is collapsed. |
| setCollapsed | Sets the collapsed state. |
| getParent | Returns the cell’s parent. |
| setParent | Sets the parent cell. |
| getTerminal | Returns the source or target terminal. |
| setTerminal | Sets the source or target terminal and returns the new terminal. |
| getChildCount | Returns the number of child cells. |
| getIndex | Returns the index of the specified child in the child array. |
| getChildAt | Returns the child at the specified index. |
| insert | Inserts the specified child into the child array at the specified index and updates the parent reference of the child. |
| remove | Removes the child at the specified index from the child array and returns the child that was removed. |
| removeFromParent | Removes the cell from its parent. |
| getEdgeCount | Returns the number of edges in the edge array. |
| getEdgeIndex | Returns the index of the specified edge in edges. |
| getEdgeAt | Returns the edge at the specified index in edges. |
| insertEdge | Inserts the specified edge into the edge array and returns the edge. |
| removeEdge | Removes the specified edge from the edge array and returns the edge. |
| removeFromTerminal | Removes the edge from its source or target terminal. |
| hasAttribute | Returns true if the user object is an XML node that contains the given attribute. |
| getAttribute | Returns the specified attribute from the user object if it is an XML node. |
| setAttribute | Sets the specified attribute on the user object if it is an XML node. |
| clone | Returns a clone of the cell. |
| cloneValue | 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. This method invokes onInit upon completion.
| value | Optional object that represents the cell value. |
| geometry | Optional mxGeometry that specifies the geometry. |
| style | Optional formatted string that defines the style. |
mxCell.prototype.geometry
Holds the mxGeometry. Default is null.
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.
mxCell.prototype.getValue = function()
Returns the user object of the cell. The user object is stored in value.
mxCell.prototype.setValue = function( value )
Sets the user object of the cell. The user object is stored in 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.setParent = function( parent )
Sets the parent cell.
| parent | mxCell that represents the new parent. |
mxCell.prototype.setTerminal = function( terminal, isSource )
Sets the source or target terminal and returns the new terminal.
| terminal | mxCell that represents the new source or target terminal. |
| isSource | Boolean that specifies if the source or target terminal should be set. |
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.
| child | mxCell to be inserted or appended to the child array. |
| index | Optional integer that specifies the index at which the child should be inserted into the child array. |
mxCell.prototype.getEdgeAt = function( index )
Returns the edge at the specified index in edges.
| index | Integer that specifies the index of the edge to be returned. |
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.
| edge | mxCell to be inserted into the edge array. |
| isOutgoing | Boolean that specifies if the edge is outgoing. |
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.
| edge | mxCell to be removed from the edge array. |
| isOutgoing | Boolean that specifies if the edge is outgoing. |
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.
Constructs a new cell to be used in a graph model.
function mxCell( value, geometry, style )
Holds the Id.
mxCell.prototype.id
Holds the user object.
mxCell.prototype.value
Holds the mxGeometry.
mxCell.prototype.geometry
Holds the style as a string of the form [(stylename|key=value);].
mxCell.prototype.style
Specifies whether the cell is a vertex.
mxCell.prototype.vertex
Specifies whether the cell is an edge.
mxCell.prototype.edge
Specifies whether the cell is connectable.
mxCell.prototype.connectable
Specifies whether the cell is visible.
mxCell.prototype.visible
Specifies whether the cell is collapsed.
mxCell.prototype.collapsed
Reference to the parent cell.
mxCell.prototype.parent
Reference to the source terminal.
mxCell.prototype.source
Reference to the target terminal.
mxCell.prototype.target
Holds the child cells.
mxCell.prototype.children
Holds the edges.
mxCell.prototype.edges
List of members that should not be cloned inside clone.
mxCell.prototype.mxTransient
Returns a clone of the cell.
mxCell.prototype.clone = function()
Returns the Id of the cell as a string.
mxCell.prototype.getId = function()
Sets the Id of the cell to the given string.
mxCell.prototype.setId = function( id )
Returns the user object of the cell.
mxCell.prototype.getValue = function()
Sets the user object of the cell.
mxCell.prototype.setValue = function( value )
Changes the user object after an in-place edit and returns the previous value.
mxCell.prototype.valueChanged = function( newValue )
Returns the mxGeometry that describes the geometry.
mxCell.prototype.getGeometry = function()
Sets the mxGeometry to be used as the geometry.
mxCell.prototype.setGeometry = function( geometry )
Returns a string that describes the style.
mxCell.prototype.getStyle = function()
Sets the string to be used as the style.
mxCell.prototype.setStyle = function( style )
Returns true if the cell is a vertex.
mxCell.prototype.isVertex = function()
Specifies if the cell is a vertex.
mxCell.prototype.setVertex = function( vertex )
Returns true if the cell is an edge.
mxCell.prototype.isEdge = function()
Specifies if the cell is an edge.
mxCell.prototype.setEdge = function( edge )
Returns true if the cell is connectable.
mxCell.prototype.isConnectable = function()
Sets the connectable state.
mxCell.prototype.setConnectable = function( connectable )
Returns true if the cell is visibile.
mxCell.prototype.isVisible = function()
Specifies if the cell is visible.
mxCell.prototype.setVisible = function( visible )
Returns true if the cell is collapsed.
mxCell.prototype.isCollapsed = function()
Sets the collapsed state.
mxCell.prototype.setCollapsed = function( collapsed )
Returns the cell’s parent.
mxCell.prototype.getParent = function()
Sets the parent cell.
mxCell.prototype.setParent = function( parent )
Returns the source or target terminal.
mxCell.prototype.getTerminal = function( source )
Sets the source or target terminal and returns the new terminal.
mxCell.prototype.setTerminal = function( terminal, isSource )
Returns the number of child cells.
mxCell.prototype.getChildCount = function()
Returns the index of the specified child in the child array.
mxCell.prototype.getIndex = function( child )
Returns the child at the specified index.
mxCell.prototype.getChildAt = function( index )
Inserts the specified child into the child array at the specified index and updates the parent reference of the child.
mxCell.prototype.insert = function( child, index )
Removes the child at the specified index from the child array and returns the child that was removed.
mxCell.prototype.remove = function( index )
Removes the cell from its parent.
mxCell.prototype.removeFromParent = function()
Returns the number of edges in the edge array.
mxCell.prototype.getEdgeCount = function()
Returns the index of the specified edge in edges.
mxCell.prototype.getEdgeIndex = function( edge )
Returns the edge at the specified index in edges.
mxCell.prototype.getEdgeAt = function( index )
Inserts the specified edge into the edge array and returns the edge.
mxCell.prototype.insertEdge = function( edge, isOutgoing )
Removes the specified edge from the edge array and returns the edge.
mxCell.prototype.removeEdge = function( edge, isOutgoing )
Removes the edge from its source or target terminal.
mxCell.prototype.removeFromTerminal = function( isSource )
Returns true if the user object is an XML node that contains the given attribute.
mxCell.prototype.hasAttribute = function( name )
Returns the specified attribute from the user object if it is an XML node.
mxCell.prototype.getAttribute = function( name, defaultValue )
Sets the specified attribute on the user object if it is an XML node.
mxCell.prototype.setAttribute = function( name, value )
Returns a clone of the cell’s user object.
mxCell.prototype.cloneValue = function()
Returns the textual representation for the given cell.
mxGraph.prototype.convertValueToString = function( cell )
Sets the new label for a cell.
mxGraph.prototype.cellLabelChanged = function( cell, value, autoSize )
Recursively clones the specified object ignoring all fieldnames in the given array of transient fields.
clone: function( obj, transients, shallow )