sParentOf(...)

isParentOf(child: Cell | null): boolean

Returns whether the current node is the parent node of the specified Cell.

parameter

isChildOf(...)

isChildOf(parent: Cell | null): boolean

Returns whether the current node / edge is a child node / edge of the specified node.

parameter

eachChild(...)

eachChild(iterator: (child: Cell, index: number, children: Cell[]) => void, context?: any): this

parameter

Traverse child nodes.

filterChild(...)

filterChild(iterator: (child: Cell, index: number, children: Cell[]) => boolean, context?: any): Cell[]

Filter child nodes.

parameter

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

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

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

Return value

Returns an array of ancestor nodes.

getDescendants(...)

getDescendants(options?: Cell.GetDescendantsOptions): Cell[]

Get all descendant nodes.

parameter

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

isAncestorOf(...)

isAncestorOf(descendant: Cell | null, options?: { deep?: boolean }): boolean

Returns whether the current node is the ancestor of the specified node / edge.

parameter

getCommonAncestor(...)

getCommonAncestor(...cells: (Cell | null | undefined)[]): Cell | null

parameter

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

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

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

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

unembed(...)

unembed(child: Cell, options?: Cell.SetOptions): this

Removes the specified node / edge from the current node.

parameter

removeFromParent(...)

removeFromParent(options?: Cell.RemoveOptions): this

Removes the current node from the parent node.

parameter

removeChild(...)

removeChild(child: Cell, options?: Cell.RemoveOptions): Cell | null

Removes the specified child node / edge.

parameter

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.

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

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

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

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

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

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

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

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.

usage

if (rect.hasChanged('zIndex')) {
  const old = rect.previous('zIndex')
  // do something
}