antv X6 Cell parent-child node problem

sParentOf(...)

isParentOf(child: Cell | null): boolean

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

parameter

nametypeMandatory Default valuedescribe
childCell | null

isChildOf(...)

isChildOf(parent: Cell | null): boolean

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

parameter

nametypeMandatory Default valuedescribe
parentCell | null

eachChild(...)

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

parameter

nametypeMandatory Default valuedescribe
iterator(child: Cell, index: number, children: Cell[]) => voidIterator function.
contextanyThe 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

nametypeMandatory Default valuedescribe
iterator(child: Cell, index: number, children: Cell[]) => booleanFilter function.
contextanyThe 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

nametypeMandatory Default valuedescribe
childCell

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

nametypeMandatory Default valuedescribe
indexnumberIndex 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

nametypeMandatory Default valuedescribe
options.deepbooleantrueBy 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

nametypeMandatory Default valuedescribe
options.deepbooleantrueBy default, all descendant nodes are obtained recursively. When set to false, only the child nodes / edges of the current node are returned.
options.breadthFirstbooleanfalseThe 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

nametypeMandatory Default valuedescribe
ancestorCell | nullSpecify the node.
options.deepbooleantrueBy 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

nametypeMandatory Default valuedescribe
descendantCell | nullSpecify nodes / edges.
options.deepbooleantrueBy 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

nametypeMandatory Default valuedescribe
...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

nametypeMandatory Default valuedescribe
parentCellParent node.
indexnumberThe index position to insert, which is inserted to the end by default.
options.silentbooleanfalseWhen it is true, 'change:parent' event and canvas redrawing will not be triggered.
options...othersobjectOther 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

nametypeMandatory Default valuedescribe
childCellSpecified node / edge.
options.silentbooleanfalseWhen , true , the 'change:children' event and canvas redrawing will not be triggered.
options...othersobjectOther 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

nametypeMandatory Default valuedescribe
childCellSpecified node / edge.
indexnumberThe index position to insert, which is inserted to the end by default.
options.silentbooleanfalseWhen , true , the 'change:children' event and canvas redrawing will not be triggered.
options...othersobjectOther 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

nametypeMandatory Default valuedescribe
childCellSpecified node / edge.
options.silentbooleanfalseWhen , true , the 'change:children' event and canvas redrawing will not be triggered.
options...othersobjectOther 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

nametypeMandatory Default valuedescribe
childCellSpecified node / edge.
options.silentbooleanfalseWhen , true , the 'change:children' event and canvas redrawing will not be triggered.
options...othersobjectOther 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

nametypeMandatory Default valuedescribe
options.deepbooleantrueBy default, all child nodes / edges are removed recursively. When set to false, only the current node / edge is removed.
options.silentbooleanfalseWhen , true , the 'change:children' event and canvas redrawing will not be triggered.
options...othersobjectOther 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

nametypeMandatory Default valuedescribe
childCellSpecified node / edge.
options.deepbooleantrueBy default, all child nodes / edges are removed recursively. When set to false, only the current node / edge is removed.
options.silentbooleanfalseWhen , true , the 'change:children' event and canvas redrawing will not be triggered.
options...othersobjectOther 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.

nametypeMandatory Default valuedescribe
indexnumberThe specified index location.
options.deepbooleantrueBy default, all child nodes / edges are removed recursively. When set to false, only the current node / edge is removed.
options.silentbooleanfalseWhen , true , the 'change:children' event and canvas redrawing will not be triggered.
options...othersobjectOther 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

nametypeMandatory Default valuedescribe
keystringProperty name.
defaultValueTundefinedDefault 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

nametypeMandatory Default valuedescribe
keystringProperty name.
valueanyProperty value.
propsPartialProperty key value pairs, which will be compared with existing properties Depth merge.
options.silentbooleanfalseWhen it is true, 'change:markup' event and canvas redrawing will not be triggered.
options...othersobjectOther 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

nametypeMandatory Default valuedescribe
pathstring | string[]Property path.
options.silentbooleanfalseWhen it is true, 'change:markup' event and canvas redrawing will not be triggered.
options...othersobjectOther 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

nametypeMandatory Default valuedescribe
pathstring | 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}.

nametypeMandatory Default valuedescribe
pathstring | 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.
valueanyProperty value.
options.rewritebooleanfalseDefaults to the existing properties on the current path Depth merge When the value of the # property on the path is set to true.
options.silentbooleanfalseWhen true, the 'change:attrs' event and canvas redrawing are not triggered.
options...othersobjectOther 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

nametypeMandatory Default valuedescribe
pathstring | 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.silentbooleanfalseWhen , true , the 'change:attrs' event and canvas redrawing will not be triggered.
options...othersobjectOther 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

nametypeMandatory Default valuedescribe
keystring | undefined | nullProperty 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.

nametypeMandatory Default valuedescribe
keystringProperty name.

usage

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


 

Tags: data structure Hash table

Posted by 2tonejoe on Wed, 25 May 2022 05:35:03 +0300