sParentOf(...)
isParentOf(child: Cell | null): boolean
Returns whether the current node is the parent node of the specified Cell.
parameter
name | type | Mandatory | Default value | describe |
---|---|---|---|---|
child | Cell | null | ✓ |
isChildOf(...)
isChildOf(parent: Cell | null): boolean
Returns whether the current node / edge is a child node / edge of the specified node.
parameter
name | type | Mandatory | Default value | describe |
---|---|---|---|---|
parent | Cell | null | ✓ |
eachChild(...)
eachChild(iterator: (child: Cell, index: number, children: Cell[]) => void, context?: any): this
parameter
name | type | Mandatory | Default value | describe |
---|---|---|---|---|
iterator | (child: Cell, index: number, children: Cell[]) => void | ✓ | Iterator function. | |
context | any | The execution context of the iterator function. |
Traverse child nodes.
filterChild(...)
filterChild(iterator: (child: Cell, index: number, children: Cell[]) => boolean, context?: any): Cell[]
Filter child nodes.
parameter
name | type | Mandatory | Default value | describe |
---|---|---|---|---|
iterator | (child: Cell, index: number, children: Cell[]) => boolean | ✓ | Filter function. | |
context | any | The execution context of the filter function. |
Return value
Returns the child nodes / edges that meet the filtering conditions, or an empty array.
getChildCount()
getChildCount(): number
Gets the number of child nodes / edges.
Return value
Returns the number of child nodes / edges. If there are no child nodes / edges, returns {0.
getChildIndex(...)
getChildIndex(child: Cell): number
Gets the index of the child node / edge.
parameter
name | type | Mandatory | Default value | describe |
---|---|---|---|---|
child | Cell | ✓ |
Return value
Returns - 1 when the child node's index / edge does not exist.
getChildAt(...)
getChildAt(index: number): Cell | null
Gets the child node / edge at the specified index location.
parameter
name | type | Mandatory | Default value | describe |
---|---|---|---|---|
index | number | ✓ | Index location. |
Return value
Returns the child node at the specified index position. When the node does not have a child node / edge, the index is out of bounds, and the child node does not exist, it returns null.
getAncestors(...)
getAncestors(options?: { deep?: boolean }): Cell[]
Get all ancestor nodes.
parameter
name | type | Mandatory | Default value | describe |
---|---|---|---|---|
options.deep | boolean | true | By default, all ancestor nodes are obtained recursively. When set to false, only the parent node of the current node / edge is returned. |
Return value
Returns an array of ancestor nodes.
getDescendants(...)
getDescendants(options?: Cell.GetDescendantsOptions): Cell[]
Get all descendant nodes.
parameter
name | type | Mandatory | Default value | describe |
---|---|---|---|---|
options.deep | boolean | true | By default, all descendant nodes are obtained recursively. When set to false, only the child nodes / edges of the current node are returned. | |
options.breadthFirst | boolean | false | The depth first algorithm is used by default. When set to true, the breadth first search algorithm is used. |
Return value
Returns an array of descendant nodes / edges.
isDescendantOf(...)
isDescendantOf(ancestor: Cell | null, options?: { deep?: boolean }): boolean
Returns whether the current node / edge is a descendant node / edge of the specified node.
parameter
name | type | Mandatory | Default value | describe |
---|---|---|---|---|
ancestor | Cell | null | ✓ | Specify the node. | |
options.deep | boolean | true | By default, all children's nodes / edges of the specified node are judged recursively. When set to false, only children's nodes / edges are judged. |
isAncestorOf(...)
isAncestorOf(descendant: Cell | null, options?: { deep?: boolean }): boolean
Returns whether the current node is the ancestor of the specified node / edge.
parameter
name | type | Mandatory | Default value | describe |
---|---|---|---|---|
descendant | Cell | null | ✓ | Specify nodes / edges. | |
options.deep | boolean | true | By default, all children's nodes / edges of the specified node are judged recursively. When set to false, only children's nodes / edges are judged. |
getCommonAncestor(...)
getCommonAncestor(...cells: (Cell | null | undefined)[]): Cell | null
parameter
name | type | Mandatory | Default value | describe |
---|---|---|---|---|
...cells | (Cell | null | undefined)[] | ✓ | Specify nodes / edges. |
Gets the common ancestor node of a given node / edge.
Return value
Returns the found common ancestor node. Otherwise, it returns null if there is no common ancestor node.
addTo(...)
addTo(model: Model, options?: Cell.SetOptions): this addTo(graph: Graph, options?: Cell.SetOptions): this addTo(parent: Cell, options?: Cell.SetOptions): this
Adds the current node / edge to the canvas or the specified parent node.
insertTo(...)
insertTo(parent: Cell, index?: number, options?: Cell.SetOptions): this
Inserts the current node / edge into the specified position of the specified parent node.
parameter
name | type | Mandatory | Default value | describe |
---|---|---|---|---|
parent | Cell | ✓ | Parent node. | |
index | number | The index position to insert, which is inserted to the end by default. | ||
options.silent | boolean | false | When it is true, 'change:parent' event and canvas redrawing will not be triggered. | |
options...others | object | Other user-defined key value pairs can be used in event callbacks. |
addChild(...)
addChild(child: Cell, options?: Cell.SetOptions): this
Adds the specified node / edge to the end of the child nodes of the current node.
parameter
name | type | Mandatory | Default value | describe |
---|---|---|---|---|
child | Cell | ✓ | Specified node / edge. | |
options.silent | boolean | false | When , true , the 'change:children' event and canvas redrawing will not be triggered. | |
options...others | object | Other user-defined key value pairs can be used in event callbacks. |
insertChild(...)
insertChild(child: Cell, index?: number, options?: Cell.SetOptions): this
Adds the specified node / edge to the specified location of the child nodes of the current node.
parameter
name | type | Mandatory | Default value | describe |
---|---|---|---|---|
child | Cell | ✓ | Specified node / edge. | |
index | number | The index position to insert, which is inserted to the end by default. | ||
options.silent | boolean | false | When , true , the 'change:children' event and canvas redrawing will not be triggered. | |
options...others | object | Other user-defined key value pairs can be used in event callbacks. |
embed(...)
embed(child: Cell, options?: Cell.SetOptions): this
Embeds the specified node / edge into the current node, that is, the specified node / edge is inserted into the end of the current node.
parameter
name | type | Mandatory | Default value | describe |
---|---|---|---|---|
child | Cell | ✓ | Specified node / edge. | |
options.silent | boolean | false | When , true , the 'change:children' event and canvas redrawing will not be triggered. | |
options...others | object | Other user-defined key value pairs can be used in event callbacks. |
unembed(...)
unembed(child: Cell, options?: Cell.SetOptions): this
Removes the specified node / edge from the current node.
parameter
name | type | Mandatory | Default value | describe |
---|---|---|---|---|
child | Cell | ✓ | Specified node / edge. | |
options.silent | boolean | false | When , true , the 'change:children' event and canvas redrawing will not be triggered. | |
options...others | object | Other user-defined key value pairs can be used in event callbacks. |
removeFromParent(...)
removeFromParent(options?: Cell.RemoveOptions): this
Removes the current node from the parent node.
parameter
name | type | Mandatory | Default value | describe |
---|---|---|---|---|
options.deep | boolean | true | By default, all child nodes / edges are removed recursively. When set to false, only the current node / edge is removed. | |
options.silent | boolean | false | When , true , the 'change:children' event and canvas redrawing will not be triggered. | |
options...others | object | Other user-defined key value pairs can be used in event callbacks. |
removeChild(...)
removeChild(child: Cell, options?: Cell.RemoveOptions): Cell | null
Removes the specified child node / edge.
parameter
name | type | Mandatory | Default value | describe |
---|---|---|---|---|
child | Cell | ✓ | Specified node / edge. | |
options.deep | boolean | true | By default, all child nodes / edges are removed recursively. When set to false, only the current node / edge is removed. | |
options.silent | boolean | false | When , true , the 'change:children' event and canvas redrawing will not be triggered. | |
options...others | object | Other user-defined key value pairs can be used in event callbacks. |
Return value
Returns the removed node / edge.
removeChildAt(...)
removeChildAt(index: number, options?: Cell.RemoveOptions): Cell | null
Removes the child node / edge at the specified index location.
name | type | Mandatory | Default value | describe |
---|---|---|---|---|
index | number | ✓ | The specified index location. | |
options.deep | boolean | true | By default, all child nodes / edges are removed recursively. When set to false, only the current node / edge is removed. | |
options.silent | boolean | false | When , true , the 'change:children' event and canvas redrawing will not be triggered. | |
options...others | object | Other user-defined key value pairs can be used in event callbacks. |
Return value
Returns the removed node / edge.
remove(...)
remove(options?: Cell.RemoveOptions): this
First remove the current node / edge from the parent node and then remove it from the canvas.
Properties of nodes and edges
The basic options such as , markup, attrs, zIndex and data , as well as , size, position, angle and ports , of nodes, as well as , source, target and labels , of edges, as well as those additional key value pairs provided when creating nodes / edges, are all called properties.
const rect = new Shape.Rect({ x: 30, y: 30, width: 100, height: 40, attrs: {...}, data: {...}, zIndex: 10, sale: {...}, product: { id: '1234', name: 'apple', price: 3.99, }, })
For example, attrs, data and zIndex in the above code are standard attributes, where x and y are a pair Custom options , the node is converted to the "position" attribute during initialization. Similarly, the "width" and "height" are also a pair Custom options , the node is converted to the "size" attribute during initialization, and the last remaining "sale" and "product" objects are non-standard attributes.
The above describes some standard attributes and methods of operating (get/set) these standard attributes, and the following introduces several more general methods, which are applicable to both standard and non-standard attributes.
getProp(...)
getProp<T>(key: string, defaultValue?: T): T
Gets the specified property value.
parameter
name | type | Mandatory | Default value | describe |
---|---|---|---|---|
key | string | ✓ | Property name. | |
defaultValue | T | undefined | Default value, which is returned when the specified property does not exist. |
usage
// Get standard properties const zIndex = rect.getProp<number>('zIndex') const position = rect.getProp<{x: number; y: number}>('position') // Get non-standard properties const product = rect.getProp('product')
setProp(...)
/** * Set the specified properties */ setProp(key: string, value: any, options?: Cell.SetOptions): this /** * Set attributes in batch, and the provided attributes are deeply merge d with the original attributes */ setProp(props: Partial<Properties>, options?: Cell.SetOptions): this
Set properties.
By default, the corresponding 'change:xxx' event and canvas redrawing are triggered when {options 'change:xxx' event and canvas redrawing will not be triggered when silent {true}.
parameter
name | type | Mandatory | Default value | describe |
---|---|---|---|---|
key | string | ✓ | Property name. | |
value | any | ✓ | Property value. | |
props | Partial | ✓ | Property key value pairs, which will be compared with existing properties Depth merge. | |
options.silent | boolean | false | When it is true, 'change:markup' event and canvas redrawing will not be triggered. | |
options...others | object | Other user-defined key value pairs can be used in event callbacks. |
usage
Set a single attribute:
rect.setProp('size', { width: 100, height: 30 }) rect.setProp('zIndex', 10)
Set multiple properties through key value pairs, and the provided key value pairs will be compared with existing properties Depth merge:
rect.setProp({ size: { width: 100, height: 30, }, zIndex: 10, })
When {options When silent is true, the corresponding 'change:xxx' event and canvas redrawing will not be triggered:
rect.setProp('zIndex', 10, { silent: true })
Other user-defined key value pairs are supported in the options, which can be used in event callback:
rect.setProp('zIndex', 10, { otherKey: 'otherValue', ... })
removeProp(...)
removeProp(path: string | string[], options?: Cell.SetOptions): this
Deletes the properties of the specified path.
By default, the corresponding 'change:xxx' event and canvas redrawing are triggered when {options 'change:xxx' event and canvas redrawing will not be triggered when silent {true}.
parameter
name | type | Mandatory | Default value | describe |
---|---|---|---|---|
path | string | string[] | ✓ | Property path. | |
options.silent | boolean | false | When it is true, 'change:markup' event and canvas redrawing will not be triggered. | |
options...others | object | Other user-defined key value pairs can be used in event callbacks. |
usage
To delete a single attribute:
rect.removeProp('zIndex')
Delete the properties of the specified path:
rect.removeProp('product/id') // or rect.removeProp(['product', 'id'])
When {options When silent is true, the corresponding 'change:xxx' event and canvas redrawing will not be triggered:
rect.removeProp('zIndex', { silent: true })
Other user-defined key value pairs are supported in the options, which can be used in event callback:
rect.removeProp('zIndex', { otherKey: 'otherValue', ... })
getPropByPath(...)
getPropByPath<T>(path: string | string[]): T
Gets the property value of the specified path.
parameter
name | type | Mandatory | Default value | describe |
---|---|---|---|---|
path | string | string[] | ✓ | Property path. When 'path' is of type 'string', the path is a '\' separated string. When # path # is of type # string [], the path is an array of keys on the path of the attribute object. |
usage
rect.getPropByPath('zIndex') // or rect.getPropByPath(['zIndex']) rect.getPropByPath('product/id') // or rect.getPropByPath(['product', 'id'])
setPropByPath(...)
setPropByPath(path: string | string[], value: any, options?: Cell.SetByPathOptions): this
Set the property value according to the property path.
By default, the corresponding 'change:xxx' event and canvas redrawing are triggered when {options 'change:xxx' event and canvas redrawing will not be triggered when silent {true}.
name | type | Mandatory | Default value | describe |
---|---|---|---|---|
path | string | string[] | ✓ | Property path. When 'path' is of type 'string', the path is a '\' separated string. When # path # is of type # string [], the path is an array of keys on the path of the attribute object. | |
value | any | ✓ | Property value. | |
options.rewrite | boolean | false | Defaults to the existing properties on the current path Depth merge When the value of the # property on the path is set to true. | |
options.silent | boolean | false | When true, the 'change:attrs' event and canvas redrawing are not triggered. | |
options...others | object | Other user-defined key value pairs can be used in event callbacks. |
usage
The corresponding 'change:xxx' event and canvas redrawing are triggered by default:
rect.setPropByPath('zIndex', 10) // or rect.setPropByPath(['zIndex'], 10) rect.setPropByPath('product/price', 5.99) // or rect.setPropByPath(['product', 'price'], 5.99)
When {options 'change:xxx' event and canvas redrawing will not be triggered when silent , is true:
rect.setPropByPath('zIndex', 10, { silent: true }) // or rect.setPropByPath(['zIndex'], 10, { silent: true }) rect.setPropByPath('product/price', 5.99, { silent: true }) // or rect.setPropByPath(['product', 'price'], 5.99, { silent: true })
Defaults to the existing properties on the current path Depth merge , when {options When rewrite is set to true, directly replace the attribute value on the path:
rect.setPropByPath( ['product'], { id: '234', name: 'banana', price: 2.99 }, { rewrite: true }, )
Other user-defined key value pairs are supported in the options, which can be used in event callback:
rect.setPropByPath('zIndex', 10, { otherKey: 'otherValue', ... })
removePropByPath(...)
removePropByPath(path: string | string[], options?: Cell.SetOptions): this
Deletes the property value of the specified path.
parameter
name | type | Mandatory | Default value | describe |
---|---|---|---|---|
path | string | string[] | ✓ | Property path. When 'path' is of type 'string', the path is a '\' separated string. When # path # is of type # string [], the path is an array of keys on the path of the attribute object. | |
options.silent | boolean | false | When , true , the 'change:attrs' event and canvas redrawing will not be triggered. | |
options...others | object | Other user-defined key value pairs can be used in event callbacks. |
usage
The corresponding 'change:xxx' event and canvas redrawing are triggered by default:
rect.removePropByPath('zIndex') // or rect.removePropByPath(['zIndex']) rect.removePropByPath('product/price') // or rect.removePropByPath(['product', 'price'])
When {options 'change:xxx' event and canvas redrawing will not be triggered when silent , is true:
rect.removePropByPath('zIndex', { silent: true }) // or rect.removePropByPath(['zIndex'], { silent: true }) rect.removePropByPath('product/price', { silent: true }) // or rect.removePropByPath(['product', 'price'], { silent: true })
Other user-defined key value pairs are supported in the options, which can be used in event callback:
rect.removePropByPath('zIndex', { otherKey: 'otherValue', ... })
prop(...)
/** * Get all properties. */ prop(): Properties /** * Gets the property value of the specified path. */ prop<T>(path: string | string[]): T /** * Set the attribute value of the specified path and merge with the existing attributes on the path. */ prop(path: string | string[], value: any, options?: Cell.SetOptions): this /** * Set the attribute and merge with the existing attribute in depth. */ prop(props: Partial<Properties>, options?: Cell.SetOptions): this
The method is getProp,setProp,getPropByPath,setPropByPath And removePropByPath The integration of several methods provides the above four function signatures, which is a very practical method.
usage
Get properties:
rect.prop() rect.prop('zIndex') rect.prop('product/price')
Set properties:
rect.prop('zIndex', 10) rect.prop('product/price', 5.99) rect.prop({ product: { id: '234', name: 'banana', price: 3.99, }, })
When {options 'change:xxx' event and canvas redrawing will not be triggered when silent , is true:
rect.prop('zIndex', 10, { silent: true }) // or rect.prop(['zIndex'], 10, { silent: true }) rect.prop('product/price', 5.99, { silent: true }) // or rect.prop(['product', 'price'], 5.99, { silent: true })
Other user-defined key value pairs are supported in the options, which can be used in event callback:
rect.prop('zIndex', 10, { otherKey: 'otherValue', ... })
hasChanged(...)
hasChanged(key: string | undefined | null): boolean
Returns whether the specified property or all properties have changed.
parameter
name | type | Mandatory | Default value | describe |
---|---|---|---|---|
key | string | undefined | null | Property name. By default, all attributes are checked. |
usage
if (rect.hasChanged()) { // do something } if (rect.hasChanged('zIndex')) { // do something }
previous(...)
previous<T>(name: string): T | undefined
When the specified attribute is changed, get the attribute value before the change.
name | type | Mandatory | Default value | describe |
---|---|---|---|---|
key | string | ✓ | Property name. |
usage
if (rect.hasChanged('zIndex')) { const old = rect.previous('zIndex') // do something }