Cell is the base class for Node and Edge, containing common property and method definitions for nodes and edges, such as attribute styles, visibility, business data, etc. It also exhibits the same behavior in terms of instantiation, style customization, default options, and custom options.

Properties

id

id is the unique identifier for the node/edge. It's recommended to use an ID with business meaning. By default, a UUID is automatically generated.

markup

markup specifies the SVG/HTML fragment used to render the node/edge, described in JSON format. For example, the markup definition for the built-in node Shape.Rect is as follows:

{
  markup: [
    {
      tagName: 'rect',
      selector: 'body',
    },
    {
      tagName: 'text',
      selector: 'label',
    },
  ],
}

This indicates that the node internally contains two SVG elements: <rect> and <text>. After rendering to the page, the SVG element corresponding to the node looks like this:

<g
  data-cell-id="c2e1dd06-15c6-43a4-987a-712a664b8f85"
  class="x6-cell x6-node"
  transform="translate(40,40)"
>
  <rect
    fill="#fff"
    stroke="#000"
    stroke-width="2"
    fill-opacity="0.5"
    width="100"
    height="40"
  ></rect>
  <text
    font-size="14"
    xml:space="preserve"
    fill="#333"
    text-anchor="middle"
    font-family="Arial, helvetica, sans-serif"
    transform="matrix(1,0,0,1,50,20)"
  >
    <tspan dy="0.3em" class="v-line">rect</tspan>
  </text>
</g>

From the above introduction, we have a general understanding of the Markup structure. Now, let's detail the Markup definition.

interface Markup {
  tagName: string
  ns?: string
  selector?: string
  groupSelector?: string | string[]
  attrs?: { [key: string]: string | number }
  style?: { [key: string]: string | number }
  className?: string | string[]
  textContent?: string
  children?: Markup[]
}

tagName

Specifies which type of SVG/HTML element to create through tagName.

ns

The namespace of the element. It should correspond to the element type specified by tagName. By default, it uses the SVG element namespace "http://www.w3.org/2000/svg".

• SVG element namespace is "http://www.w3.org/2000/svg"
• HTML element namespace is "http://www.w3.org/1999/xhtml"

selector

The unique selector for the element, used to specify attribute styles for the element. For example, to specify attribute styles for <rect> and <text> elements of the built-in node Shape.Rect:

const rect = new Shape.Rect({
  x: 40,
  y: 40,
  width: 100,
  height: 40,
  attrs: {
    // Specify styles for the rect element
    body: {
      stroke: '#000', // Border color
      fill: '#fff', // Fill color
    },
    // Specify styles for the text element
    label: {
      text: 'rect', // Text content
      fill: '#333', // Text color
    },
  },
})

groupSelector

The group selector for the element. Through the group selector, styles can be specified for multiple elements associated with the group. For example, in the following Markup, two <rect> elements have the same groupSelector value group1:

{
  markup: [
    {
      tagName: 'rect',
      selector: 'body',
      groupSelector: 'group1',
    },
    {
      tagName: 'rect',
      selector: 'wrap',
      groupSelector: 'group1',
    },
    {
      tagName: 'text',
      selector: 'label',
    },
  ],
}

When creating a node, we can specify group styles like this:

new SomeNode({
  attrs: {
    group1: {
      fill: '#2ECC71',
    },
  },
})

attrs

Default attribute key-value pairs for the element, typically used to define unchanging common attributes. These default attributes can also be overridden when instantiating the node. Note that the attrs property in markup only supports native SVG attributes, meaning X6's are not available here.

For example, we specified the following default attributes for the <rect> and <text> elements of the built-in node Shape.Rect:

{
  markup: [
    {
      tagName: 'rect',
      selector: 'body',
      attrs: {
        fill: '#fff',
        stroke: '#000',
        strokeWidth: 2,
      }
    },
    {
      tagName: 'text',
      selector: 'label',
      attrs: {
        fill: '#333',
        textAnchor: 'middle',
        textVerticalAnchor: 'middle',
      }
    },
  ],
}

style

Inline style key-value pairs for the element.

className

CSS class name for the element.

textContent

Text content of the element.

children

Nested child elements.

attrs

The attribute option attrs is a complex object. The keys of this object are the selectors (selector) of elements defined in the node's Markup, and the corresponding values are SVG attribute values (such as fill and stroke) applied to that SVG element. If you're not familiar with SVG attributes yet, you can refer to the beginner's tutorial on Fills and Strokes provided by MDN.

For example, the Markup of the built-in node Shape.Rect defines two selectors: body (representing the <rect> element) and label (representing the <text> element). We can specify attribute styles for elements in this node like this:

const rect = new Shape.Rect({
  x: 40,
  y: 40,
  width: 100,
  height: 40,
  attrs: {
    body: {
      fill: '#2ECC71',
      stroke: '#000',
    },
    label: {
      text: 'rect',
      fill: '#333',
      fontSize: 13,
    },
  },
})

After the node is rendered to the canvas, the DOM structure looks like this:

<g
  data-cell-id="3ee1452c-6d75-478d-af22-88e03c6d513b"
  class="x6-cell x6-node"
  transform="translate(40,40)"
>
  <rect
      fill="#2ECC71"
      stroke="#000"
      stroke-width="2"
      width="100"
      height="40"
  ></rect>
  <text
      font-size="13"
      xml:space="preserve"
      fill="#333"
      text-anchor="middle"
      font-family="Arial, helvetica, sans-serif"
      transform="matrix(1,0,0,1,50,20)"
  >
    <tspan dy="0.3em" class="v-line"> rect </tspan>
  </text>
</g>

Additionally, we can use CSS selectors to specify node styles, so we don't have to remember predefined selector names. We can simply define styles based on the rendered DOM structure. When using CSS selectors, it's important to note that the specified CSS selector may match multiple elements, in which case the corresponding attribute styles will be applied to multiple elements simultaneously.

const rect = new Shape.Rect({
  x: 40,
  y: 40,
  width: 100,
  height: 40,
  attrs: {
    rect: {
      // Use the 'rect' CSS selector instead of the predefined 'body' selector
      fill: '#2ECC71',
      stroke: '#000',
    },
    text: {
      // Use the 'text' CSS selector instead of the predefined 'label' selector
      text: 'rect',
      fill: '#333',
      fontSize: 13,
    },
  },
})

It's worth mentioning that camelCase format for property names is supported, such as fontSize. This avoids the hassle of having to add quotes to property names like font-size when used as object keys.

In addition to standard SVG attributes, we have defined a series of special attributes in X6. For details, please refer to Special Attributes and Custom Attributes. Furthermore, we can use CSS to customize styles. Nodes and edges rendered on the canvas have the class names x6-node and x6-edge respectively. The default style definitions can be referenced here. For example, we can specify the style of the <rect> element in nodes like this:

.x6-node rect {
  fill: #2ecc71;
  stroke: #000;
}

After creating nodes/edges, we can call the attr() method on the instance to modify node attribute styles. In the code below, the path separated by / modifies the style. The label selector corresponds to the <text> element, text is the attribute name of that element, and hello is the new attribute value.

rect.attr('label/text', 'hello')

// Equivalent to
rect.attr('label', {
  text: 'hello',
})

// Equivalent to
rect.attr({
  label: {
    text: 'hello',
  },
})

When the attribute value passed in is null, that attribute can be removed.

rect.attr('label/text', null)

shape

The shape of the node/edge, similar to the Model in the MVC pattern, determines the structured data of the node/edge. This option is typically used when adding nodes and edges with the graph.addNode and graph.addEdge methods.

const rect = graph.addNode({
  shape: 'rect',
  x: 100,
  y: 200,
  width: 80,
  height: 40,
  label: 'rect',
})

const circle = graph.addNode({
  shape: 'circle',
  x: 280,
  y: 200,
  width: 60,
  height: 60,
  label: 'circle',
})

const edge = graph.addEdge({
  shape: 'edge',
  source: rect,
  target: circle,
})

In X6's internal implementation, we use the shape specified by shape to find the corresponding constructor to initialize the node/edge and add it to the canvas.

The default values for this option are:

• The default value of shape in the graph.addNode method is rect
• The default value of shape in the graph.addEdge method is edge

At the same time, we have built-in a series of nodes and edges in X6.

view

Specifies the view used to render the node/edge. The concept of view is consistent with the View in the MVC pattern. Generally, there's no need to set the view field, as X6's built-in view is used by default.

zIndex

The layer level of the node/edge in the canvas, automatically determined by the order of node/edge addition by default. After the node/edge is rendered to the canvas, you can use cell.getZIndex() and cell.setZIndex(z: number) to get or set the zIndex value, or call cell.toFront() and cell.toBack() to move it to the top or bottom layer.

visible

Whether the node/edge is visible, visible by default.

parent

Parent node ID.

children

Array of child node/edge IDs.

tools

Tools for nodes/edges. Tools can enhance the interaction capabilities of nodes/edges. We provide the following built-in tools for nodes and edges respectively:

Nodes

• button Renders a button at the specified position, supports customizing button click interactions.
• button-remove Renders a delete button at the specified position, deletes the corresponding node when clicked.
• boundary Renders a rectangle surrounding the node based on the node's bounding box. Note that this tool only renders a rectangle without any interaction.
• node-editor Provides text editing functionality on the node.

Edges

• vertices Path point tool, renders a small dot at the path point position, drag the dot to modify the path point position, double-click the dot to delete the path point, click on the edge to add a path point.
• segments Segment tool. Renders a toolbar at the center of each edge segment, which can be dragged to adjust the positions of the path points at both ends of the segment.
• boundary Renders a rectangle surrounding the edge based on the edge's bounding box. Note that this tool only renders a rectangle without any interaction.
• button Renders a button at the specified position, supports customizing button click interactions.
• button-remove Renders a delete button at the specified position, deletes the corresponding edge when clicked.
• source-arrowhead-and-target-arrowhead Renders a shape (arrow by default) at the start or end point of the edge, drag the shape to modify the start or end point of the edge.
• edge-editor Provides text editing functionality on the edge.

You can specify a single tool:

graph.addNode({
  x: 40,
  y: 40,
  width: 100,
  height: 40,
  tools: 'button-remove', // or { name: 'button-remove' }
})

Also, you can specify the parameter options for the tool like this:

graph.addNode({
  x: 40,
  y: 40,
  width: 100,
  height: 40,
  tools: {
    name: 'button-remove',
    args: {
      x: 10, // x coordinate of the button, relative to the top-left corner of the node
      y: 10, // y coordinate of the button, relative to the top-left corner of the node
    },
  },
})

You can also specify multiple tools at the same time:

graph.addNode({
  x: 40,
  y: 40,
  width: 100,
  height: 40,
  tools: [
    'button-remove',
    {
      name: 'boundary',
      args: {
        padding: 5,
      },
    },
  ],
})

data

Business data associated with the node/edge. For example, in actual use, we usually store certain business data on the data of the node/edge.

const rect = new Shape.Rect({
  x: 40,
  y: 40,
  width: 100,
  height: 40,
  data: {
    bizID: 125,
    date: '20200630',
    price: 89.0,
  },
})

Methods

General

get shape

Get the shape of the node/edge, returns the name of the shape registered to X6.

if (node.shape === 'rect') {
  // do something if the node is a 'rect' node.
}

get view

Get the view of the node/edge, returns the name of the view registered to X6.

if (node.view === 'rect') {
  // do something if the node is a 'rect' view.
}

isNode()

isNode(): boolean

Checks if the instance is a Node instance. Returns true if it's a Node instance, otherwise returns false. All nodes inheriting from Node return true.

if (cell.isNode()) {
  // do something if the cell is a node.
}

isEdge()

isEdge(): boolean

Checks if the instance is an Edge instance. Returns true if it's an Edge instance, otherwise returns false. All edges inheriting from Edge return true.

if (cell.isEdge()) {
  // do something if the cell is an edge.
}

toJSON(...)

toJSON(options?: Cell.ToJSONOptions): Object

Converts the structured data of the node/edge to JSON data for persistent storage (usually we call graph.toJSON to export the data of the entire canvas).

• When options.diff is false, returns complete data.
• When options.diff is true, returns differential data (removes default values of properties).

clone(...)

clone(options?: Cell.CloneOptions): Cell | Node | Edge | { [id:string]: Node | Edge }

Clone the node/edge.

• When options.deep is false, returns the newly created node/edge by cloning.
• When options.deep is true, returns an object where the Key is the ID of the cloned node/edge, and the Value is the cloned node/edge.

on(...)

on(name: string, handler: Events.Handler, context?: any): this

Listen to events.

once(...)

once(name: string, handler: Events.Handler, context?: any): this

Listen to an event once, automatically remove the listener after the event is triggered.

off(...)

/**
 * Remove all event listeners.
 */
off(): this

/**
 * Remove all event listeners for the specified name.
 */
off(name: string): this

/**
 * Remove the event listener corresponding to the specified handler.
 */
off(name: null, handler: Events.Handler): this

/**
 * Remove the event listener for the specified name and handler.
 */
off(name: string, handler: Events.Handler, context?: any): this

Remove event listeners.

trigger(...)

trigger(name: string, ...args?: any[]): boolean | Promise<boolean>

Trigger an event.

• When all callback functions are synchronous, it returns false if any callback function returns false, otherwise returns true.
• When there are asynchronous functions among the callbacks, it returns Promise<boolean> based on the same logic as synchronous callbacks.

dispose()

dispose(): void

Destroy and remove the node/edge from its parent.

Element Structure markup

Specifies the SVG/HTML structure used to render nodes/edges, described in JSON format, usually set through the method when defining nodes/edges to be shared by all instances. When modifying markup, it will trigger the change:markup event and canvas redraw.

get markup

Get markup.

const markup = cell.markup

set markup

Set markup, and trigger the change:markup event and canvas redraw.

cell.markup = markup

getMarkup()

getMarkup(): Markup

Get markup.

const markup = cell.getMarkup()

setMarkup(...)

setMarkup(markup: Markup, options?: Cell.SetOptions): this

Set markup. By default, it triggers the change:markup event and canvas redraw. When options.silent is true, it does not trigger the change:markup event and canvas redraw.

removeMarkup(...)

removeMarkup(options?: Cell.SetOptions): this

Remove markup. By default, it triggers the change:markup event and canvas redraw. When options.silent is true, it does not trigger the change:markup event and canvas redraw.

Element Attributes attrs

The attrs property is a complex object. When modifying attrs, it will trigger the change:attrs event and canvas redraw.

get attrs

Get attributes.

const atts = cell.attrs

set attrs

Set attributes, and trigger the change:attrs event and canvas redraw.

cell.atts = attrs

getAttrs()

getAttrs(): Attr.CellAttrs

Get attributes.

const atts = cell.getAttrs()

setAttrs(...)

setAttrs(attrs: Attr.CellAttrs, options?: Cell.SetAttrOptions): this

Set attributes. By default, it triggers the change:attrs event and canvas redraw.

By default, the specified attributes will be deeply merged with the old attributes:

console.log(cell.getAttrs())
// {
//   body: { fill: '#ffffff' },
//   label: { fill: '#333333' },
// }

cell.setAttrs({
  body: { fill: '#f5f5f5' },
  label: { text: 'My Label' },
})

console.log(cell.getAttrs())
// {
//   body: { fill: '#f5f5f5' },
//   label: { fill: '#333333', text: 'My Label' },
// }

When options.deep is false, perform shallow merge:

console.log(cell.getAttrs())
// {
//   body: { fill: '#ffffff' },
//   label: { fill: '#333333' },
// }

cell.setAttrs({ label: { text: 'My Label' } }, { deep: false })

console.log(cell.getAttrs())
// {
//   body: { fill: '#ffffff' },
//   label: { text: 'My Label' },
// }

When options.overwrite is true, directly replace old attributes:

console.log(cell.getAttrs())
// {
//   body: { fill: '#ffffff' },
//   label: { fill: '#333333' },
// }

cell.setAttrs({ label: { text: 'My Label' } }, { overwrite: true })

console.log(cell.getAttrs())
// {
//   label: { text: 'My Label' },
// }

replaceAttrs(...)

replaceAttrs(attrs: Attr.CellAttrs, options: Cell.SetOptions = {}): this

Replace original attributes with given attributes, equivalent to calling setAttrs(attrs, { ...options, overwrite: true }).

updateAttrs(...)

updateAttrs(attrs: Attr.CellAttrs, options: Cell.SetOptions = {}): this

Update attributes using shallow merge, equivalent to calling setAttrs(attrs, { ...options, deep: false }).

removeAttrs(...)

removeAttrs(options?: Cell.SetOptions): this

Remove attributes.

getAttrByPath(...)

getAttrByPath<T>(path?: string | string[]): T

Get attribute value by attribute path.

The attribute value of a certain node is as follows:

console.log(cell.getAttrs())
// {
//   body: { fill: '#ffffff' },
//   label: { fill: '#333333' },
// }

When the path is empty, it returns all attributes:

console.log(cell.getAttrByPath())
// {
//   body: { fill: '#ffffff' },
//   label: { fill: '#333333' },
// }

Get attribute value through string path:

console.log(cell.getAttrByPath('body'))
// { fill: '#ffffff' }

console.log(cell.getAttrByPath('body/fill'))
// '#ffffff'

console.log(cell.getAttrByPath('unknown'))
// undefined

console.log(cell.getAttrByPath('body/unknown'))
// undefined

Get attribute value through a path composed of an array of keys of the attribute object:

console.log(cell.getAttrByPath(['body']))
// { fill: '#ffffff' }

console.log(cell.getAttrByPath(['body', 'fill']))
// '#ffffff'

console.log(cell.getAttrByPath(['unknown']))
// undefined

console.log(cell.getAttrByPath(['body', 'unknown']))
// undefined

setAttrByPath(...)

setAttrByPath(path: string | string[], value: Attr.ComplexAttrValue, options?: Cell.SetOptions): this

Set attribute value by attribute path.

The initial attribute value of a certain node is as follows:

console.log(cell.getAttrs())
// {
//   body: { fill: '#ffffff' },
//   label: { fill: '#333333' },
// }

Set attribute value through string path:

cell.setAttrByPath('body', { stroke: '#000000' }) // Replace body attribute value
console.log(cell.getAttrs())
// {
//   body: { stroke: '#000000' },
//   label: { fill: '#333333' },
// }

cell.setAttrByPath('body/fill', '#f5f5f5') // Set body.fill attribute value
console.log(cell.getAttrs())
// {
//   body: { stroke: '#000000', fill: '#f5f5f5' },
//   label: { fill: '#333333' },
// }

Or set attribute value through a path composed of an array of keys of the attribute object:

cell.setAttrByPath(['body'], { stroke: '#000000' }) // Replace body attribute value
console.log(cell.getAttrs())
// {
//   body: { stroke: '#000000' },
//   label: { fill: '#333333' },
// }

cell.setAttrByPath(['body', 'fill'], '#f5f5f5') // Set body.fill attribute value
console.log(cell.getAttrs())
// {
//   body: { stroke: '#000000', fill: '#f5f5f5' },
//   label: { fill: '#333333' },
// }

removeAttrByPath(...)

removeAttrByPath(path: string | string[], options?: Cell.SetOption ): this

Remove attribute value at the specified path.

The initial attribute value of a certain node is as follows:

console.log(cell.getAttrs())
// {
//   body: { fill: '#ffffff' },
//   label: { fill: '#333333' },
// }

Remove attribute value through string path:

cell.removeAttrByPath('body/fill')
console.log(cell.getAttrs())
// {
//   body: { },
//   label: { fill: '#333333' },
// }

cell.removeAttrByPath('body')
console.log(cell.getAttrs())
// {
//   label: { fill: '#333333' },
// }

Or remove attribute value through a path composed of an array of keys of the attribute object:

cell.removeAttrByPath(['body', 'fill'])
console.log(cell.getAttrs())
// {
//   body: { },
//   label: { fill: '#333333' },
// }

cell.removeAttrByPath(['body'])
console.log(cell.getAttrs())
// {
//   label: { fill: '#333333' },
// }

attr(...)

/**
 * Get attributes.
 */
attr(): Cell.CellAttrs

/**
 * Get attribute value at the specified path.
 */
attr<T>(path: string | string[]): T

/**
 * Set attribute value at the specified path.
 */
attr(path: string | string[], value: Attr.ComplexAttrValue | null, options?: Cell.SetOptions): this

/**
 * Set attribute values, the passed attributes are deeply merged with the old attributes.
 */
attr(attrs: Attr.CellAttrs, options?: Cell.SetOptions): this

This method is an integration of getAttrByPath, setAttrByPath, and setAttrs methods, providing the above four function signatures, making it a very practical method.

Get all attribute values:

console.log(cell.attr())
// {
//   body: { fill: '#ffffff' },
//   label: { fill: '#333333' },
// }

Get attribute value at the specified path:

console.log(cell.attr('body/fill'))
// '#ffffff'

Set attribute value at the specified path:

cell.attr('body/fill', '#f5f5f5')
console.log(cell.attr())
// {
//   body: { fill: '#f5f5f5' },
//   label: { fill: '#333333' },
// }

Set attribute values through the attribute object, and perform a deep merge with the existing attribute object.

cell.attr({
  body: { stroke: '#000000' },
  label: { fill: 'blue', text: 'my label' },
})
console.log(cell.attr())
// {
//   body: { fill: '#f5f5f5', stroke: '#000000' },
//   label: { fill: 'blue', text: 'my label' },
// }

Hierarchy zIndex

zIndex is the layer level of a node/edge in the canvas, which is automatically determined based on the order of node/edge addition by default. When modifying zIndex, it will trigger the change:zIndex event and canvas redraw.

get zIndex

Get the zIndex.

const z = cell.zIndex

set zIndex

Set the zIndex, triggering the change:zIndex event and canvas redraw.

cell.zIndex = 2

getZIndex()

getZIndex(): number

Get the zIndex.

const z = cell.getZIndex()

setZIndex(...)

setZIndex(zIndex: number, options?: Cell.SetOptions): this

Set the zIndex. By default, it triggers the change:zIndex event and canvas redraw. When options.silent is true, it doesn't trigger the change:zIndex event and canvas redraw.

removeZIndex(...)

removeZIndex(options?: Cell.SetOptions): this

Remove the zIndex. By default, it triggers the change:zIndex event and canvas redraw. When options.silent is true, it doesn't trigger the change:zIndex event and canvas redraw.

toFront(...)

toFront(options?: Cell.ToFrontOptions): this

Move the node/edge to the topmost layer.

toBack(...)

toBack(options?: Cell.ToBackOptions): this

Move the node/edge to the bottommost layer.

By default, updating zIndex triggers the change:zIndex event and canvas redraw:

cell.toBack()

When options.deep is true, it also updates the hierarchy of all child nodes/edges:

cell.toBack({ deep: true })

Visibility Visible

get visible

Returns whether the node/edge is visible.

if (cell.visible) {
  // do something
}

set visible

Sets whether the node/edge is visible and triggers the change:visible event and canvas redraw.

show(...)

show(options?: Cell.SetOptions): this

Show the node/edge.

hide(...)

hide(options?: Cell.SetOptions): this

Hide the node/edge.

isVisible()

isVisible(): boolean

Returns whether the node/edge is visible.

setVisible(...)

setVisible(visible: boolean, options?: Cell.SetOptions): this

Set the visibility of the node/edge. By default, it triggers the change:visible event and canvas redraw. When options.silent is true, it doesn't trigger the change:visible event and canvas redraw.

toggleVisible(...)

toggleVisible(options?: Cell.SetOptions): this

Toggle the visibility of the node/edge. By default, it triggers the change:visible event and canvas redraw. When options.silent is true, it doesn't trigger the change:visible event and canvas redraw.

Business Data

Business data associated with nodes/edges. For example, in practical use, we often store certain business data on the data property of nodes/edges.

const rect = new Shape.Rect({
  x: 40,
  y: 40,
  width: 100,
  height: 40,
  data: {
    bizID: 125,
    date: '20200630',
    price: 89.0,
  },
})

get data

Get the associated data.

set data

Set the associated data and trigger the change:data event and canvas redraw.

getData()

getData(): any

Get the associated data.

setData(...)

setData(data: any, options?: Cell.SetDataOptions): this

Set the associated business data. By default, it triggers the change:data event and canvas redraw. When options.silent is true, it doesn't trigger the change:data event and canvas redraw.

By default, it performs a deep merge with the original data and triggers the change:data event and canvas redraw:

cell.setData(data)

When options.overwrite is true, it replaces the old data:

cell.setData(data, { overwrite: true })

When options.deep is false, it performs a shallow merge with the original data:

cell.setData(data, { deep: false })

const obj = { name: 'x6', star: true }
node.setData(obj) // This will trigger a node redraw

obj.star = false
node.setData(obj) // Note: At this point, no deep comparison is performed. The object is considered unchanged, so it won't trigger a node redraw

node.setData({
  ...obj,
  star: false,
}) // This will trigger a node redraw

replaceData(...)

replaceData(data: any, options: Cell.SetOptions = {}): this

Replace the original data with the specified data, equivalent to calling setData(data, { ...options, overwrite: true }).

updateData(...)

updateData(data: any, options: Cell.SetOptions = {}): this

Update data using shallow merge, equivalent to calling setData(data, { ...options, deep: false }).

removeData(...)

removeData(options: Cell.SetOptions): this

Remove data. By default, it triggers the change:data event and canvas redrawing. When options.silent is true, it does not trigger the change:data event and canvas redrawing.

Parent/Children Relationship

get parent

Get the parent node.

getParent()

getParent(): Cell | null

Get the parent node. Returns the parent node if it exists, otherwise returns null.

setParent(...)

setParent(parent: Cell | null, options?: Cell.SetOptions): this

Set the parent node.

getParentId()

getParentId(): string | undefined

Get the ID of the parent node. Returns the parent node's ID if it exists, otherwise returns undefined.

hasParent()

hasParent(): boolean

Check if the node/edge has a parent node.

get children

Get all child nodes/edges.

getChildren()

getChildren(): Cell[] | null

Get all child nodes/edges.

setChildren()

setChildren(children: Cell[] | null, options?: Cell.SetOptions)

Set child nodes/edges.

isParentOf(...)

isParentOf(child: Cell | null): boolean

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

isChildOf(...)

isChildOf(parent: Cell | null): boolean

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

eachChild(...)

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

Iterate through child nodes.

filterChild(...)

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

Filter child nodes.

getChildCount()

getChildCount(): number

Get the number of child nodes/edges.

getChildIndex(...)

getChildIndex(child: Cell): number

Get the index of a child node/edge.

getChildAt(...)

getChildAt(index: number): Cell | null

Get the child node/edge at the specified index.

getAncestors(...)

getAncestors(options?: { deep?: boolean }): Cell[]

Get all ancestor nodes.

getDescendants(...)

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

Get all descendant nodes.

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 of the specified node.

isAncestorOf(...)

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

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

getCommonAncestor(...)

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

Get the common ancestor nodes of the given nodes/edges.

addChild(...)

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

Adds the specified node/edge to the end of the current node's children.

removeChild(...)

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

Removes the specified child node/edge.

remove(...)

remove(options?: Cell.RemoveOptions): this

First removes the current node/edge from its parent node, then removes it from the canvas.

Node and Edge Properties

The basic options introduced above such as markup, attrs, zIndex, data, as well as node options like size, position, angle, ports, and edge options like source, target, labels, along with any 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,
  },
})