Class Cell

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:

const doc = xmlUtils.createXmlDocument();
const 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, graph.convertValueToString and graph.cellLabelChanged should be overridden as follows:

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

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

  cellLabelChanged.apply(this, arguments);
};

Hierarchy (View Summary)

Cell
- GraphAbstractHierarchyCell

Implements

IdentityObject

Index

Constructors

constructor

Properties

children collapsed connectable edge edges geometry id invalidating mxTransient onInit overlays parent source style target value vertex visible

Constructors

constructor

new Cell(value?: any, geometry?: null | Geometry, style?: CellStyle): Cell
Parameters
- value: any = null
- geometry: null | Geometry = null
- style: CellStyle = {}
Returns Cell
- Defined in view/cell/Cell.ts:67

Properties

children

children: Cell[] = []

Holds the child cells.

Default

[]

collapsed

collapsed: boolean = false

Specifies whether the cell is collapsed.

Default

false

connectable

connectable: boolean = true

Specifies whether the cell is connectable.

Default

true

edge

edge: boolean = false

Specifies whether the cell is an edge.

Default

false

edges

edges: Cell[] = []

Holds the edges.

Default

[]

geometry

geometry: null | Geometry = null

Holds the Geometry.

Default

null

id

id: null | string = null

Holds the identifier of the Cell.

Default

null

invalidating

invalidating: boolean = false

mxTransient

mxTransient: string[] = ...

List of members that should not be cloned inside clone. This field is passed to utils.clone and is not made persistent in CellCodec. 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.

onInit

onInit: null | (() => void) = null

overlays

overlays: CellOverlay[] = []

parent

parent: null | Cell = null

Reference to the parent cell.

Default

null

source

source: null | Cell = null

Reference to the source terminal.

Default

null

style

style: CellStyle = {}

Holds the style of the Cell.

Default

{}

target

target: null | Cell = null

Reference to the target terminal.

Default

null

value

value: any = null

Holds the user object.

Default

null

vertex

vertex: boolean = false

Specifies whether the cell is a vertex.

Default

false

visible

visible: boolean = true

Specifies whether the cell is visible.

Default

true

Methods

clone

clone(): Cell
Returns a clone of the cell.

Uses cloneValue to clone the user object.

All fields in mxTransient are ignored during the cloning.

Returns Cell
- Defined in view/cell/Cell.ts:614

cloneValue

cloneValue(): any
Returns a clone of the cell's user object.

Returns any
- Defined in view/cell/Cell.ts:623

filterDescendants

filterDescendants(filter: null | FilterFunction): Cell[]
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);
```
Parameters
- filter: null | FilterFunction
  JavaScript function that takes an Cell as an argument and returns a boolean.
Returns Cell[]
- Defined in view/cell/Cell.ts:857

getAttribute

getAttribute(name: string, defaultValue?: any): any
Returns the specified attribute from the user object if it is an XML node.
Parameters
- name: string
  Name of the attribute whose value should be returned.
- OptionaldefaultValue: any
  Optional default value to use if the attribute has no value.
Returns any
- Defined in view/cell/Cell.ts:586

getChildAt

getChildAt(index: number): Cell
Returns the child at the specified index.
Parameters
- index: number
Returns Cell
- Defined in view/cell/Cell.ts:422

getChildCells

getChildCells(vertices?: boolean, edges?: boolean): Cell[]
Returns the children of the given cell that are vertices and/or edges depending on the arguments.
Parameters
- vertices: boolean = false
  Boolean indicating if child vertices should be returned. Default is false.
- edges: boolean = false
  Boolean indicating if child edges should be returned. Default is false.
Returns Cell[]
- Defined in view/cell/Cell.ts:711

getChildCount

getChildCount(): number
Returns the number of child cells.

Returns number
- Defined in view/cell/Cell.ts:403

getChildEdges

getChildEdges(): Cell[]
Returns the child edges of the given parent.

Returns Cell[]
- Defined in view/cell/Cell.ts:698

getChildren

getChildren(): Cell[]
Returns Cell[]
- Defined in view/cell/Cell.ts:81

getChildVertices

getChildVertices(): Cell[]
Returns the child vertices of the given parent.

Returns Cell[]
- Defined in view/cell/Cell.ts:691

getClonedStyle

getClonedStyle(): CellStyle
Use this method to get the style object to later update it and propagate changes to the view.

See GraphDataModel.setStyle for more details.

Returns CellStyle
- Defined in view/cell/Cell.ts:265

getConnections

getConnections(): Cell[]
Returns all edges of the given cell without loops.

Returns Cell[]
- Defined in view/cell/Cell.ts:755

getDescendants

getDescendants(): Cell[]
Returns all descendants of the given cell and the cell itself in an array.

Returns Cell[]
- Defined in view/cell/Cell.ts:834

getDirectedEdgeCount

getDirectedEdgeCount(outgoing: boolean, ignoredEdge?: null | Cell): number
Returns the number of incoming or outgoing edges, ignoring the given edge.
Parameters
- outgoing: boolean
  Boolean that specifies if the number of outgoing or incoming edges should be returned.
- ignoredEdge: null | Cell = null
  that represents an edge to be ignored.
Returns number
- Defined in view/cell/Cell.ts:738

getEdgeAt

getEdgeAt(index: number): Cell
Returns the edge at the specified index in .
Parameters
- index: number
Returns Cell
- Defined in view/cell/Cell.ts:506

getEdgeCount

getEdgeCount(): number
Returns the number of edges in the edge array.

Returns number
- Defined in view/cell/Cell.ts:488

getEdgeIndex

getEdgeIndex(edge: Cell): number
Returns the index of the specified edge in .
Parameters
- edge: Cell
Returns number
- Defined in view/cell/Cell.ts:497

getEdges

getEdges(incoming?: boolean, outgoing?: boolean, includeLoops?: boolean): Cell[]
Returns all distinct edges connected to this cell as a new array of Cell. 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
- incoming: boolean = true
  Optional boolean that specifies if incoming edges should be returned. Default is true.
- outgoing: boolean = true
  Optional boolean that specifies if outgoing edges should be returned. Default is true.
- includeLoops: boolean = true
  Optional boolean that specifies if loops should be returned. Default is true.
Returns Cell[]
- Defined in view/cell/Cell.ts:786

getGeometry

getGeometry(): null | Geometry
Returns the Geometry that describes the .

Returns null | Geometry
- Defined in view/cell/Cell.ts:240

getId

getId(): null | string
Returns the Id of the cell as a string.

Returns null | string
- Defined in view/cell/Cell.ts:198

getIncomingEdges

getIncomingEdges(): Cell[]
Returns the incoming edges of the given cell without loops.

Returns Cell[]
- Defined in view/cell/Cell.ts:762

getIndex

getIndex(child: null | Cell): number
Returns the index of the specified child in the child array.
Parameters
- child: null | Cell
  Child whose index should be returned.
Returns number
- Defined in view/cell/Cell.ts:412

getNearestCommonAncestor

getNearestCommonAncestor(cell2: Cell): null | Cell
Returns the nearest common ancestor for the specified cells to this.
Parameters
- cell2: Cell
  that specifies the second cell in the tree.
Returns null | Cell
- Defined in view/cell/Cell.ts:640

getOrigin

getOrigin(): Point
Returns the absolute, accumulated origin for the children inside the given parent as an Point.

Returns Point
- Defined in view/cell/Cell.ts:811

getOutgoingEdges

getOutgoingEdges(): Cell[]
Returns the outgoing edges of the given cell without loops.

Returns Cell[]
- Defined in view/cell/Cell.ts:769

getParent

getParent(): null | Cell
Returns the cell's parent.

Returns null | Cell
- Defined in view/cell/Cell.ts:361

getRoot

getRoot(): Cell
Returns the root of the model or the topmost parent of the given cell.

Returns Cell
- Defined in view/cell/Cell.ts:880

getStyle

getStyle(): CellStyle
Returns a string that describes the style.

IMPORTANT: if you want to get the style object to later update it and propagate changes to the view, use getClonedStyle instead.

Returns CellStyle
- Defined in view/cell/Cell.ts:256

getTerminal

getTerminal(source?: boolean): null | Cell
Returns the source or target terminal.
Parameters
- source: boolean = false
  Boolean that specifies if the source terminal should be returned.
Returns null | Cell
- Defined in view/cell/Cell.ts:380

getValue

getValue(): any
Returns the user object of the cell. The user object is stored in .

Returns any
- Defined in view/cell/Cell.ts:213

hasAttribute

hasAttribute(name: string): boolean
Returns true if the user object is an XML node that contains the given attribute.
Parameters
- name: string
  Name nameName of the attribute.
Returns boolean
- Defined in view/cell/Cell.ts:571

insert

insert(child: Cell, index?: number): null | Cell
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
- child: Cell
- Optionalindex: number
Returns null | Cell
- Defined in view/cell/Cell.ts:436

insertEdge

insertEdge(edge: Cell, isOutgoing?: boolean): Cell
Inserts the specified edge into the edge array and returns the edge. Will update the respective terminal reference of the edge.
Parameters
- edge: Cell
  to be inserted into the edge array.
- isOutgoing: boolean = false
  Boolean that specifies if the edge is outgoing.
Returns Cell
- Defined in view/cell/Cell.ts:517

isAncestor

isAncestor(child: null | Cell): boolean
Returns true if the given parent is an ancestor of the given child. Note returns true if child == parent.
Parameters
- child: null | Cell
  that specifies the child.
Returns boolean
- Defined in view/cell/Cell.ts:680

isCollapsed

isCollapsed(): boolean
Returns true if the cell is collapsed.

Returns boolean
- Defined in view/cell/Cell.ts:345

isConnectable

isConnectable(): boolean
Returns true if the cell is connectable.

Returns boolean
- Defined in view/cell/Cell.ts:313

isEdge

isEdge(): boolean
Returns true if the cell is an edge.

Returns boolean
- Defined in view/cell/Cell.ts:296

isVertex

isVertex(): boolean
Returns true if the cell is a vertex.

Returns boolean
- Defined in view/cell/Cell.ts:279

isVisible

isVisible(): boolean
Returns true if the cell is visibile.

Returns boolean
- Defined in view/cell/Cell.ts:329

remove

remove(index: number): null | Cell
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
- index: number
Returns null | Cell
- Defined in view/cell/Cell.ts:461

removeEdge

removeEdge(edge: null | Cell, isOutgoing?: boolean): null | Cell
Removes the specified edge from the edge array and returns the edge. Will remove the respective terminal reference from the edge.
Parameters
- edge: null | Cell
- isOutgoing: boolean = false
  Boolean that specifies if the edge is outgoing.
Returns null | Cell
- Defined in view/cell/Cell.ts:539

removeFromParent

removeFromParent(): void
Removes the cell from its parent.

Returns void
- Defined in view/cell/Cell.ts:478

removeFromTerminal

removeFromTerminal(isSource: boolean): void
Removes the edge from its source or target terminal.
Parameters
- isSource: boolean
  Boolean that specifies if the edge should be removed from its source or target terminal.
Returns void
- Defined in view/cell/Cell.ts:558

setAttribute

setAttribute(name: string, value: any): void
Sets the specified attribute on the user object if it is an XML node.
Parameters
- name: string
  Name of the attribute whose value should be set.
- value: any
  New value of the attribute.
Returns void
- Defined in view/cell/Cell.ts:599

setCollapsed

setCollapsed(collapsed: boolean): void
Sets the collapsed state.
Parameters
- collapsed: boolean
  Boolean that specifies the new collapsed state.
Returns void
- Defined in view/cell/Cell.ts:354

setConnectable

setConnectable(connectable: boolean): void
Sets the connectable state.
Parameters
- connectable: boolean
  Boolean that specifies the new connectable state.
Returns void
- Defined in view/cell/Cell.ts:322

setEdge

setEdge(edge: boolean): void
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
- edge: boolean
  Boolean that specifies if the cell is an edge.
Returns void
- Defined in view/cell/Cell.ts:306

setGeometry

setGeometry(geometry: null | Geometry): void
Sets the Geometry to be used as the .
Parameters
- geometry: null | Geometry
Returns void
- Defined in view/cell/Cell.ts:247

setId

setId(id: string): void
Sets the Id of the cell to the given string.
Parameters
- id: string
Returns void
- Defined in view/cell/Cell.ts:205

setParent

setParent(parent: null | Cell): void
Sets the parent cell.
Parameters
- parent: null | Cell
Returns void
- Defined in view/cell/Cell.ts:370

setStyle

setStyle(style: CellStyle): void
Sets the string to be used as the style.
Parameters
- style: CellStyle
Returns void
- Defined in view/cell/Cell.ts:272

setTerminal

setTerminal(terminal: null | Cell, isSource: boolean): null | Cell
Sets the source or target terminal and returns the new terminal.
Parameters
- terminal: null | Cell
  Cell that represents the new source or target terminal.
- isSource: boolean
  boolean that specifies if the source or target terminal should be set.
Returns null | Cell
- Defined in view/cell/Cell.ts:390

setValue

setValue(value: any): void
Sets the user object of the cell. The user object is stored in .
Parameters
- value: any
Returns void
- Defined in view/cell/Cell.ts:221

setVertex

setVertex(vertex: boolean): void
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
- vertex: boolean
  Boolean that specifies if the cell is a vertex.
Returns void
- Defined in view/cell/Cell.ts:289

setVisible

setVisible(visible: boolean): void
Specifies if the cell is visible.
Parameters
- visible: boolean
  Boolean that specifies the new visible state.
Returns void
- Defined in view/cell/Cell.ts:338

valueChanged

valueChanged(newValue: any): any
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.
Parameters
- newValue: any
Returns any
- Defined in view/cell/Cell.ts:231

Class Cell

Custom attributes

Hierarchy (View Summary)

Implements

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

Returns Cell

Properties

children

Default

collapsed

Default

connectable

Default

edge

Default

edges

Default

geometry

Default

id

Default

invalidating

mxTransient

onInit

overlays

parent

Default

source

Default

style

Default

target

Default

value

Default

vertex

Default

visible

Default

Methods

clone

Returns Cell

cloneValue

Returns any

filterDescendants

Parameters

Returns Cell[]

getAttribute

Parameters

Returns any

getChildAt

Parameters

Returns Cell

getChildCells

Parameters

Returns Cell[]

getChildCount

Returns number

getChildEdges

Returns Cell[]

getChildren

Returns Cell[]

getChildVertices

Returns Cell[]

getClonedStyle

Returns CellStyle

getConnections

Returns Cell[]

getDescendants

Returns Cell[]

getDirectedEdgeCount

Parameters

Returns number

getEdgeAt