X6

https://x6.antv.antgroup.com/en/api
Admin
X6 is a graph visualization and interaction engine for building interactive diagramming applications...
Tokens:37,837
Snippets:381
Trust Score:9.8
Update:4 months ago
Show doc for...
Tokens:
Raw
### Manhattan Routing with Direction Constraints

Source: https://x6.antv.antgroup.com/en/api/registry/router

Shows how to configure the 'manhattan' router with specific start and end directions to guide the pathfinding around obstacles.

```typescript
graph.addEdge({
  source,
  target,
  router: {
    name: 'manhattan',
    args: {
      startDirections: ['top'],
      endDirections: ['bottom'],
    },
  },
})
```

--------------------------------

### Using the ER Router

Source: https://x6.antv.antgroup.com/en/api/registry/router

Example of how to apply the 'er' router to an edge with custom offset arguments.

```javascript
graph.addEdge({
  source,
  target,
  router: {
    name: 'er',
    args: {
      offset: 24,
    },
  },
})
```

--------------------------------

### Example Custom Port Label Layout: Bottom Right

Source: https://x6.antv.antgroup.com/en/api/registry/port-label-layout

An example implementation of a custom port label layout function that positions the label at the bottom right of the port, with optional offset adjustments via `dx` and `dy` arguments.

```javascript
function bottomRight(portPosition, elemBBox, args) {
  const dx = args.dx || 10
  const dy = args.dy || 10


  return {
    position: {
      x: portPosition.x + dx,
      y: portPosition.y + dy,
    }
  }
}
```

--------------------------------

### Custom Sine Distribution Layout Algorithm

Source: https://x6.antv.antgroup.com/en/api/registry/port-layout

An example implementation of a custom port layout algorithm that distributes ports in a sine wave pattern.

```typescript
function sin(portsPositionArgs, elemBBox) {
  return portsPositionArgs.map((_, index) => {
    const step = -Math.PI / 8
    const y = Math.sin(index * step) * 50
    return {
      position: {
        x: index * 12,
        y: y + elemBBox.height,
      },
      angle: 0,
    }
  })
}
```

--------------------------------

### Add Node with Multiple Tools

Source: https://x6.antv.antgroup.com/en/api/model/cell

Illustrates adding a node with multiple tools simultaneously. This example includes the 'button-remove' tool and the 'boundary' tool with specific padding arguments.

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

--------------------------------

### get view

Source: https://x6.antv.antgroup.com/en/api/model/cell

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

```APIDOC
## get view

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

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

--------------------------------

### Using ellipseSpread for Port Layout

Source: https://x6.antv.antgroup.com/en/api/registry/port-layout

Demonstrates how to configure a node to use the 'ellipseSpread' layout for its ports, specifying a starting angle.

```typescript
const node = graph.addNode({
  ports: {
    groups: {
      group1: {
        position: {
          name: 'ellipseSpread',
          args: {
            start: 45,
          },
        },
      },
    },
  },
})


Array.from({ length: 36 }).forEach(function (_, index) {
  ellipse.addPort({
    group: 'group1',
    id: `${index}`,
    attrs: { text: { text: index } },
  })
})
```

--------------------------------

### Add Node with Tool and Arguments

Source: https://x6.antv.antgroup.com/en/api/model/cell

Shows how to add a node with a specific tool and configure its behavior using arguments. This example configures the 'button-remove' tool with custom x and y coordinates relative to the node.

```javascript
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
    },
  },
})
```

--------------------------------

### Applying Group Styles to Node

Source: https://x6.antv.antgroup.com/en/api/model/cell

Shows how to apply styles to elements identified by a 'groupSelector' when instantiating a node. This example sets the 'fill' for all elements belonging to 'group1'.

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

--------------------------------

### Configuring Outside Port Label Layout

Source: https://x6.antv.antgroup.com/en/api/registry/port-label-layout

Example of setting the 'outside' port label layout. The default offset from the node center is used.

```typescript
label: {
  position: {
    name : 'outside',
  },
}
```

--------------------------------

### Configuring Radial Port Label Layout

Source: https://x6.antv.antgroup.com/en/api/registry/port-label-layout

Example of setting the 'radial' port label layout. The default offset from the node center is used.

```typescript
label: {
  position: {
    name : 'radial',
  },
}
```

--------------------------------

### Configuring Side Port Label Layout with Custom Args

Source: https://x6.antv.antgroup.com/en/api/registry/port-label-layout

Example of configuring the 'right' side label layout with custom 'y' offset and text attributes, forcing the y-coordinate and setting the label color to red.

```typescript
label: {
  position: {
    name : 'right',
    args: {
      y: 10, // Force the y-coordinate to be 10, replacing the calculated y-coordinate
      attrs: {
        text: {
          fill: 'red', // Set the label color to red
        },
      },
    },
  },
}
```

--------------------------------

### attr

Source: https://x6.antv.antgroup.com/en/api/model/cell

A versatile method for getting and setting cell attributes. It supports getting all attributes, getting a specific attribute by path, setting a specific attribute by path, and setting multiple attributes with deep merging.

```APIDOC
## attr

### Description
Manages cell attributes, allowing retrieval and modification of attribute values.

### Method Signatures
1. **Get all attributes:**
   ```typescript
   attr(): Cell.CellAttrs
   ```
2. **Get attribute by path:**
   ```typescript
   attr<T>(path: string | string[]): T
   ```
3. **Set attribute by path:**
   ```typescript
   attr(path: string | string[], value: Attr.ComplexAttrValue | null, options?: Cell.SetOptions): this
   ```
4. **Set multiple attributes (deep merge):**
   ```typescript
   attr(attrs: Attr.CellAttrs, options?: Cell.SetOptions): this
   ```

### Parameters
- **path** (string | string[]) - Required (for signatures 2 & 3) - The path to the attribute. Can be a dot-separated string or an array of keys.
- **value** (Attr.ComplexAttrValue | null) - Required (for signature 3) - The new value for the attribute.
- **attrs** (Attr.CellAttrs) - Required (for signature 4) - An object containing attributes to set, which will be deeply merged.
- **options.silent** (boolean) - Optional - If true, suppresses the `change:attrs` event and canvas redraw.
- **options...others** (object) - Optional - Other custom key-value pairs for event callbacks.

### Examples
#### Get all attribute values:
```javascript
console.log(cell.attr())
```

#### Get attribute value at the specified path:
```javascript
console.log(cell.attr('body/fill'))
```

#### Set attribute value at the specified path:
```javascript
cell.attr('body/fill', '#f5f5f5')
```

#### Set attribute values through the attribute object (deep merge):
```javascript
cell.attr({
  body: { stroke: '#000000' },
  label: { fill: 'blue', text: 'my label' },
})
```
```

--------------------------------

### Set Global Default Routing with Parameters

Source: https://x6.antv.antgroup.com/en/api/registry/router

Configure a default router with arguments for all edges created on a graph instance. This example sets the 'oneSide' router with a 'right' side argument.

```javascript
new Graph({
  connecting: {
    router: {
      name: 'oneSide',
      args: {
        side: 'right',
      },
    },
  },
})
```

--------------------------------

### get shape

Source: https://x6.antv.antgroup.com/en/api/model/cell

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

```APIDOC
## get shape

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

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

--------------------------------

### Metro Routing with Direction Constraints

Source: https://x6.antv.antgroup.com/en/api/registry/router

Demonstrates the 'metro' router, a variant of Manhattan routing, configured with specific start and end directions for pathfinding with diagonal segments.

```typescript
graph.addEdge({
  source,
  target,
  router: {
    name: 'metro',
    args: {
      startDirections: ['top'],
      endDirections: ['bottom'],
    },
  },
})
```

--------------------------------

### Set Edge Routing without Parameters

Source: https://x6.antv.antgroup.com/en/api/registry/router

Simplify edge creation by setting a router that does not require arguments. 'oneSide' is used as an example.

```javascript
const edge = graph.addEdge({
  source,
  target,
  router: 'oneSide',
})
```

--------------------------------

### Configure Highlighting Options for Graph

Source: https://x6.antv.antgroup.com/en/api/registry/highlighter

Specify highlighting styles for interactions like magnet availability when creating a Graph. This example shows a stroke highlighter for when a magnet is available for linking.

```javascript
new Graph({
  highlighting: {
    // When a magnet is available for linking, render a 2px wide red rectangle around the magnet
    magnetAvailable: {
      name: 'stroke',
      args: {
        padding: 4,
        attrs: {
          'stroke-width': 2,
          stroke: 'red',
        },
      },
    },
  },
})
```

--------------------------------

### Unified Property Management with prop()

Source: https://x6.antv.antgroup.com/en/api/model/cell

A versatile method to get, set, or batch set properties on a cell, supporting deep merging for nested properties.

```javascript
// 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,
  },
})
```

--------------------------------

### Rendered SVG for a Rect Node

Source: https://x6.antv.antgroup.com/en/api/model/cell

An example of the actual SVG output generated by X6 based on a markup definition. It shows the structure with attributes and transforms applied.

```html
<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>
```

--------------------------------

### Implement Custom Opacity Highlighter

Source: https://x6.antv.antgroup.com/en/api/registry/highlighter

An example of a custom highlighter named 'opacity' that adds and removes a specific CSS class to change element opacity. It requires an empty options interface.

```typescript
export interface OpacityHighlighterOptions {}


const className = 'highlight-opacity'


export const opacity: Highlighter.Definition<OpacityHighlighterOptions> = {
  highlight(cellView, magnet) {
    Dom.addClass(magnet, className)
  },


  unhighlight(cellView, magnetEl) {
    Dom.removeClass(magnetEl, className)
  },
}
```

--------------------------------

### Define Filter via attrs Option

Source: https://x6.antv.antgroup.com/en/api/registry/filter

Create a node and specify its filter using the 'attrs' option during node creation. This is useful for initial node setup.

```javascript
// Create a node by specifying the filter through the attrs option
const rect = graph.addNode({
  x: 40,
  y: 40,
  width: 80,
  height: 30,
  attrs: {
    body: {
      filter: {
        name: 'dropShadow',
        args: {
          dx: 2,
          dy: 2,
          blur: 3,
        },
      },
    },
  },
})

```

--------------------------------

### Set Global Default Routing without Parameters

Source: https://x6.antv.antgroup.com/en/api/registry/router

Set a simple default router name for the graph instance when no specific arguments are needed. 'orth' is used as an example.

```javascript
new Graph({
  connecting: {
    router: 'orth',
  },
})
```

--------------------------------

### Ellipse Port Layout

Source: https://x6.antv.antgroup.com/en/api/registry/port-layout

Distribute ports along an ellipse using 'ellipse' layout. Configure with 'start' angle, 'step' size, and optional radial or directional offsets.

```typescript
interface EllipseArgs {
  start?: number
  step?: number
  compensateRotate?: boolean
  dr?: number
  dx?: number
  dy?: number
  angle?: number
  x?: number
  y?: number
}

```

```javascript
const node = graph.addNode({
  ports: {
    groups: {
      group1: {
        position: {
          name: 'ellipse',
          args: {
            start: 45,
          },
        },
      },
    },
  },
})


Array.from({ length: 10 }).forEach((_, index) => {
  node.addPort({
    id: `${index}`,
    group: 'group1',
    attrs: { text: { text: index } },
  })
})

```

--------------------------------

### Set Edge Routing Dynamically

Source: https://x6.antv.antgroup.com/en/api/registry/router

Call the `setRouter` method on an existing edge to change its routing configuration. This example sets the 'oneSide' router with a 'right' side argument.

```javascript
edge.setRouter('oneSide', { side: 'right' })
```

--------------------------------

### Configuring Port Layout with Groups and Items

Source: https://x6.antv.antgroup.com/en/api/registry/port-layout

Demonstrates how to configure port layout in an X6 graph. It shows setting up port groups with default layout algorithm parameters and defining individual ports with specific group assignments and optional argument overrides.

```javascript
graph.addNode(
  ...,
  ports: {
    // port group
    groups: {
      group1: {
        position: {
          name: 'xxx', // layout algorithm name
          args: { },   // default parameters of the layout algorithm
        },
      },
    },


    // port definition
    items: [
      {
        groups: 'group1',
        args: { }, // override the default parameters specified in group1
      },
    ],
  },
)
```

--------------------------------

### Gaussian Blur Filter Definition

Source: https://x6.antv.antgroup.com/en/api/registry/filter

Example definition for a Gaussian blur filter. It accepts optional x and y arguments for standard deviation and returns a <feGaussianBlur> filter string.

```typescript
export interface BlurArgs {
  x?: number
  y?: number
}


export function blur(args: BlurArgs = {}) {
  const x = getNumber(args.x, 2)
  const stdDeviation = args.y != null && isFinite(args.y) ? [x, args.y] : x


  return (
    `<filter>
      <feGaussianBlur stdDeviation="${stdDeviation}"/>
    </filter>`
  ).trim()
}
```

--------------------------------

### Initialize X6 Graph with Options

Source: https://x6.antv.antgroup.com/en/api/graph/graph

Instantiate a new X6 Graph by passing a configuration object. This object allows customization of canvas dimensions, zooming, panning, grid, background, and interaction behaviors.

```javascript
new Graph(options: Options)
```

--------------------------------

### Generate Custom Cell IDs

Source: https://x6.antv.antgroup.com/en/api/model/cell

Implement custom ID generation for nodes and edges by overriding the Cell.generateId static method. This example shows how to create unique IDs based on shape and an incrementing counter.

```typescript
import { Cell } from '@antv/x6'


let sid = 0
Cell.generateId = ({ shape }) => {
  return `${shape}_${sid++}`
}
```

--------------------------------

### Graph Constructor

Source: https://x6.antv.antgroup.com/en/api/graph/graph

Initializes a new X6 Graph instance with the specified options. The `container` option is mandatory.

```APIDOC
## new Graph(options: Options)

### Description
Constructs a new Graph instance.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Options
- **container** (`HTMLElement`) - Required - The DOM element that will serve as the canvas container.
- **width** (`number`) - Optional - The width of the canvas. Defaults to the container's width.
- **height** (`number`) - Optional - The height of the canvas. Defaults to the container's height.
- **scaling** (`{ min?: number, max?: number }`) - Optional - Defines the minimum and maximum zoom levels for the canvas. Defaults to `{ min: 0.01, max: 16 }`.
- **autoResize** (`boolean | Element | Document`) - Optional - Enables or disables automatic resizing of the canvas based on container size changes. Defaults to `false`.
- **panning** (`boolean | PanningManager.Options`) - Optional - Enables or disables canvas panning. Defaults to `false`.
- **mousewheel** (`boolean | MouseWheel.Options`) - Optional - Enables or disables zooming via mouse wheel. Defaults to `false`.
- **grid** (`boolean | number | GridManager.Options`) - Optional - Configures the grid. Defaults to a 10px grid without drawing the background. Defaults to `false`.
- **background** (`false | BackgroundManager.Options`) - Optional - Configures the background. Defaults to not drawing the background.
- **translating** (`Translating.Options`) - Optional - Restricts node movement and enables automatic offset when nodes overlap. Defaults to `{ restrict: false, autoOffset: true }`.
- **embedding** (`boolean | Embedding.Options`) - Optional - Enables or disables nested nodes. Defaults to `false`.
- **connecting** (`Connecting.Options`) - Optional - Options for configuring connections. Defaults to `{ snap: false, ... }`.
- **highlighting** (`Highlighting.Options`) - Optional - Options for highlighting nodes and edges. Defaults to `{...}`.
- **interacting** (`Interacting.Options`) - Optional - Customizes the interaction behavior of nodes and edges. Defaults to `{ edgeLabelMovable: false }`.
- **magnetThreshold** (`number | onleave`) - Optional - The number of mouse movements before triggering a connection, or `onleave` to trigger on mouse leave. Defaults to `0`.
- **moveThreshold** (`number`) - Optional - The number of mouse movements before triggering a `mousemove` event. Defaults to `0`.
- **clickThreshold** (`number`) - Optional - The maximum mouse movement distance (in pixels) before a click event is ignored. Defaults to `0`.
- **preventDefaultContextMenu** (`boolean`) - Optional - Whether to prevent the browser's default right-click menu. Defaults to `true`.
- **preventDefaultBlankAction** (`boolean`) - Optional - Whether to prevent default mouse behaviors when clicking on the canvas background. Defaults to `true`.
- **async** (`boolean`) - Optional - Whether to render the canvas asynchronously. Defaults to `true`.
- **virtual** (`boolean | VirtualOptions`) - Optional - Enables virtual rendering for performance optimization. Can be configured with a buffer margin. Defaults to `false`.
- **onPortRendered** (`(args: OnPortRenderedArgs) => void`) - Optional - Callback function triggered when a port is rendered.
- **onEdgeLabelRendered** (`(args: OnEdgeLabelRenderedArgs) => void | ((args: OnEdgeLabelRenderedArgs) => void)`) - Optional - Callback function triggered when an edge label is rendered. Can return a cleanup function.
- **createCellView** (`(cell: Cell) => CellView | null | undefined`) - Optional - Customizes the view for a specific cell.
```

--------------------------------

### Line Segment Port Layout

Source: https://x6.antv.antgroup.com/en/api/registry/port-layout

The 'line' layout distributes ports evenly along a line segment defined by 'start' and 'end' points. Offsets and angles can be adjusted with dx, dy, and angle.

```typescript
interface LineArgs {
  start?: Point.PointLike
  end?: Point.PointLike
  dx?: number
  dy?: number
  angle?: number
  x?: number
  y?: number
}

```

```javascript
graph.addNode({
  ports: {
    groups: {
      group1: {
        position: {
          name: 'line',
          args: {
            start: { x: 10, y: 10 },
            end: { x: 210, y: 10 },
          },
        },
      },
    },
    items: [
      {
        group: 'group1',
        args: {
          dx: 2,
        },
      },
    ],
  },
})

```

--------------------------------

### Defining and Registering a New Tool by Inheriting

Source: https://x6.antv.antgroup.com/en/api/registry/node-tool

This snippet demonstrates creating a new tool 'my-btn' by inheriting from an existing tool ('button') using the `define` static method. It allows modification of options like `markup` and `onClick`.

```javascript
const MyButton = Button.define<Button.Options>({
  name: 'my-btn',
  markup: ...,
  onClick({ view }) { ... },
})


Graph.registerNodeTool('my-btn', MyButton, true)
```

--------------------------------

### Using groupSelector for Multiple Elements

Source: https://x6.antv.antgroup.com/en/api/model/cell

Illustrates how 'groupSelector' can be used to apply common styles to multiple elements that share the same group identifier. This example shows two rect elements sharing 'group1'.

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

--------------------------------

### Get Cell Attributes

Source: https://x6.antv.antgroup.com/en/api/model/cell

Retrieves the current attributes of a cell element.

```javascript
const atts = cell.attrs
```

```javascript
const atts = cell.getAttrs()
```

--------------------------------

### Creating a Node with Properties

Source: https://x6.antv.antgroup.com/en/api/model/cell

Demonstrates creating a Rect shape node with various standard and custom properties.

```javascript
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,
  },
})
```

--------------------------------

### Get Previous Property Value

Source: https://x6.antv.antgroup.com/en/api/model/cell

Retrieves the value of a property before it was last changed.

```javascript
previous<T>(name: string): T | undefined
```

--------------------------------

### Get Cell Markup

Source: https://x6.antv.antgroup.com/en/api/model/cell

Retrieves the current markup definition of a cell element.

```javascript
const markup = cell.markup
```

```javascript
const markup = cell.getMarkup()
```

--------------------------------

### Configuring Port Label Layout in X6

Source: https://x6.antv.antgroup.com/en/api/registry/port-label-layout

Demonstrates how to specify label layout algorithms either in port groups or by overriding them in individual port items when adding a node.

```typescript
graph.addNode(
  ...,
  ports: {
    // port group
    groups: {
      group1: {
        label: {
          position: {      // label layout algorithm
            name: 'xxx',   // label layout algorithm name
            args: { ... }, // label layout algorithm arguments
          },
        },
      },
    },

    // port definition
    items: [
      {
        groups: 'group1',
        label: {
          position: { // override label layout algorithm specified in group1
            name: 'xxx',
            args: { ... },
          }
        },
      }
    ],
  },
)
```

--------------------------------

### Get Cell zIndex

Source: https://x6.antv.antgroup.com/en/api/model/cell

Retrieves the current zIndex of a cell. This is a direct property access.

```javascript
const z = cell.zIndex
```

--------------------------------

### Using a Registered Custom Port Layout

Source: https://x6.antv.antgroup.com/en/api/registry/port-layout

Demonstrates configuring a node to use the custom 'sin' port layout algorithm, including port styling.

```typescript
const rect = graph.addNode({
  ports: {
    groups: {
      sin: {
        position: {
          name: 'sin',
          args: {
            start: 45,
          },
        },
        attrs: {
          rect: {
            fill: '#fe854f',
            width: 11,
          },
          text: {
            fill: '#fe854f',
          },
          circle: {
            fill: '#fe854f',
            r: 5,
            magnet: true,
          },
        },
      },
    },
  },
})


Array.from({ length: 24 }).forEach(() => {
  rect.addPort({ group: 'sin' })
})
```

--------------------------------

### Get All Cell Attributes

Source: https://x6.antv.antgroup.com/en/api/model/cell

Retrieves all attributes of a cell. Useful for inspecting the current state.

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

--------------------------------

### Add Tools When Creating a Node

Source: https://x6.antv.antgroup.com/en/api/registry/node-tool

Demonstrates how to include tools, such as a remove button, when initially creating a node.

```javascript
graph.addNode({
  ...
  tools: [
    {
      name: 'button-remove',
      args: { x: 10, y: 10 },
    },
  ],
})
```

--------------------------------

### Get Parent Cell

Source: https://x6.antv.antgroup.com/en/api/model/cell

Retrieves the parent cell of the current cell. Returns null if the cell has no parent.

```javascript
getParent(): Cell | null

```

--------------------------------

### Get Cell Attribute by Empty Path

Source: https://x6.antv.antgroup.com/en/api/model/cell

Retrieves all attributes when no path is specified. This is equivalent to calling `getAttrs()`.

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

--------------------------------

### Create a Cell with Business Data

Source: https://x6.antv.antgroup.com/en/api/model/cell

Demonstrates how to initialize a cell (e.g., a Rect shape) and attach custom business data to its 'data' property.

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

```

--------------------------------

### Add Tools After Creating a Node

Source: https://x6.antv.antgroup.com/en/api/registry/node-tool

Shows how to add tools to an existing node after it has been created.

```javascript
node.addTools([
  {
    name: 'button-remove',
    args: { x: 10, y: 10 },
  },
])
```

--------------------------------

### Get Cell Tools

Source: https://x6.antv.antgroup.com/en/api/model/cell

Retrieves the current set of tools associated with a cell. Returns null if no tools are present.

```typescript
getTools(): Cell.Tools | null
```

--------------------------------

### Get Property Value

Source: https://x6.antv.antgroup.com/en/api/model/cell

Retrieves the value of a specified property from a cell. Supports default values if the property does not exist.

```javascript
getProp<T>(key: string, defaultValue?: T): T
```

```javascript
// 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')
```

--------------------------------

### getChildIndex()

Source: https://x6.antv.antgroup.com/en/api/model/cell

Gets the index position of a specific child cell within the list of the current cell's children.

```APIDOC
## getChildIndex()

### Description
Get the index of a child node/edge.

### Method
(Implicitly a method of a Cell object)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **child** (Cell) - Required - Description: The child cell whose index is to be retrieved.

### Request Example
```javascript
const index = cell.getChildIndex(specificChild);
```

### Response
#### Success Response (200)
- **return value** (number) - Description: The index of the specified child cell.

#### Response Example
```json
{
  "example": 2
}
```
```

--------------------------------

### on(...)

Source: https://x6.antv.antgroup.com/en/api/model/cell

Listen to events.

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

### Description
Listen to events.

### Parameters
#### Path Parameters
- **name** (string) - Required - Event name.
- **handler** (Events.Handler) - Required - Callback function.
- **context** (any) - Optional - Calling context of the callback.

### Returns
- `this`: The current instance.
```

--------------------------------

### Get zIndex (Property)

Source: https://x6.antv.antgroup.com/en/api/model/cell

Retrieves the current zIndex of a cell. The zIndex represents the layer level of the cell on the canvas.

```APIDOC
## Get zIndex (Property)

### Description
Get the `zIndex` of the cell.

### Method
GET (Implicit)

### Endpoint
N/A (Property Access)

### Parameters
None

### Request Example
```javascript
const z = cell.zIndex
```

### Response
#### Success Response (200)
- **zIndex** (number) - The current layer level of the cell.
```

--------------------------------

### Get Cell Attribute by Path

Source: https://x6.antv.antgroup.com/en/api/model/cell

Retrieves the attribute value at a specified path. Supports both string and array paths.

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

--------------------------------

### Add Boundary Tool with Custom Attributes

Source: https://x6.antv.antgroup.com/en/api/registry/node-tool

Illustrates how to add a 'boundary' tool to a node, customizing its padding and appearance attributes.

```javascript
const source = graph.addNode({
  ...
  tools: [
    {
      name: 'boundary',
      args: {
        padding: 5,
        attrs: {
          fill: '#7c68fc',
          stroke: '#333',
          'stroke-width': 1,
          'fill-opacity': 0.2,
        },
      },
    },
  ],
})
```

--------------------------------

### Get All Cell Attributes

Source: https://x6.antv.antgroup.com/en/api/model/cell

Retrieves all current attribute values of the cell. Useful for inspecting the cell's state.

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

--------------------------------

### Get Parent Cell ID

Source: https://x6.antv.antgroup.com/en/api/model/cell

Retrieves the unique identifier (ID) of the parent cell. Returns undefined if no parent exists.

```javascript
getParentId(): string | undefined

```

--------------------------------

### Registering a New Tool with Default Options via Inheritance

Source: https://x6.antv.antgroup.com/en/api/registry/node-tool

This snippet shows a shortcut for registering a new tool 'my-btn' by inheriting from 'button' and specifying default options directly within the `Graph.registerNodeTool` call.

```javascript
Graph.registerNodeTool('my-btn', {
  inherit: 'button', // Base class name, using the name of the already registered tool.
  markup: ...,
  onClick: ...,
})
```

--------------------------------

### Side Port Layouts (left, right, top, bottom)

Source: https://x6.antv.antgroup.com/en/api/registry/port-layout

Utilize 'left', 'right', 'top', and 'bottom' layouts for even distribution along node edges. Configure with dx, dy, angle, x, and y arguments.

```typescript
interface SideArgs {
  dx?: number
  dy?: number
  angle?: number
  x?: number
  y?: number
}

```

```javascript
graph.addNode({
  ports: {
    groups: {
      group1: {
        position: 'left',
      },
    },
    items: [
      {
        group: 'group1',
        args: {
          dx: 2,
        },
      },
    ],
  },
})

```

--------------------------------

### Get Cell Data

Source: https://x6.antv.antgroup.com/en/api/model/cell

Retrieves the business data associated with a cell. This method is straightforward and returns the entire data object.

```javascript
getData(): any

```

--------------------------------

### Get Child Cells

Source: https://x6.antv.antgroup.com/en/api/model/cell

Retrieves an array of all direct child cells (nodes or edges) of the current cell. Returns null if there are no children.

```javascript
getChildren(): Cell[] | null

```

--------------------------------

### Get Cell zIndex using getZIndex()

Source: https://x6.antv.antgroup.com/en/api/model/cell

Retrieves the current zIndex of a cell using the getter method. This method returns a number.

```javascript
const z = cell.getZIndex()
```

--------------------------------

### Registering a Custom Port Layout

Source: https://x6.antv.antgroup.com/en/api/registry/port-layout

Shows how to register a custom layout function with the X6 Graph system, making it available for use.

```typescript
Graph.registerPortLayout('sin', sin)
```

--------------------------------

### Get Common Ancestor of Cells

Source: https://x6.antv.antgroup.com/en/api/model/cell

The `getCommonAncestor` method finds and returns the nearest common ancestor cell among a list of provided cells.

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

--------------------------------

### Get Child Count of a Cell

Source: https://x6.antv.antgroup.com/en/api/model/cell

The `getChildCount` method returns the total number of direct child nodes and edges associated with the current cell.

```typescript
getChildCount(): number
```

--------------------------------

### Registering and Using a Custom Random Router

Source: https://x6.antv.antgroup.com/en/api/registry/router

Demonstrates how to define and register a custom 'random' router and then apply it to an edge. The custom router generates random points between the source and target bounding boxes.

```javascript
// Routing parameters
interface RandomRouterArgs {
  bounces?: number
}


function randomRouter(
  vertices: Point.PointLike[],
  args: RandomRouterArgs,
  view: EdgeView,
) {
  const bounces = args.bounces || 20
  const points = vertices.map((p) => Point.create(p))


  for (var i = 0; i < bounces; i++) {
    const sourceCorner = view.sourceBBox.getCenter()
    const targetCorner = view.targetBBox.getCenter()
    const randomPoint = Point.random(
      sourceCorner.x,
      targetCorner.x,
      sourceCorner.y,
      targetCorner.y,
    )
    points.push(randomPoint)
  }


  return points
}


Graph.registerRouter('random', randomRouter)
edge.setRouter('random', { bounces: 3 })
```

--------------------------------

### Orthogonal Routing with Padding

Source: https://x6.antv.antgroup.com/en/api/registry/router

Demonstrates how to use the 'orth' router with custom padding options to control the distance from anchor points to corners.

```typescript
graph.addEdge({
  source,
  target,
  vertices: [
    { x: 100, y: 200 },
    { x: 300, y: 120 },
  ],
  router: {
    name: 'orth',
    args: {
      padding: {
        left: 50,
      },
    },
  },
})
```

--------------------------------

### Applying Styles via Selector in Markup

Source: https://x6.antv.antgroup.com/en/api/model/cell

Demonstrates how to use 'selector' within the 'markup' definition to apply specific attributes and styles to elements like 'rect' and 'text' when creating a node.

```javascript
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
    },
  },
})
```

--------------------------------

### Get Child Cell at Specific Index

Source: https://x6.antv.antgroup.com/en/api/model/cell

The `getChildAt` method retrieves the child cell located at a given index. It returns `null` if the index is out of bounds.

```typescript
getChildAt(index: number): Cell | null
```

--------------------------------

### Create Node with Business Data

Source: https://x6.antv.antgroup.com/en/api/model/cell

Demonstrates how to create a Rect shape node and associate custom business data with it using the 'data' property. This data can store any relevant information for the node.

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

--------------------------------

### Get Cell Attribute by Array Path

Source: https://x6.antv.antgroup.com/en/api/model/cell

Retrieves a specific attribute value using an array of keys as the path. Useful for complex attribute structures.

```javascript
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 Index of a Child Cell

Source: https://x6.antv.antgroup.com/en/api/model/cell

Use `getChildIndex` to find the position (index) of a specific child cell within the current cell's list of children.

```typescript
getChildIndex(child: Cell): number
```

--------------------------------

### Remove All Tools on Mouse Leave

Source: https://x6.antv.antgroup.com/en/api/registry/node-tool

Demonstrates how to remove all tools associated with a node when the mouse pointer leaves the node.

```javascript
graph.on('node:mouseleave', ({ node }) => {
   node.removeTools() // Remove all tools
})
```

--------------------------------

### Registering a Custom Anchor

Source: https://x6.antv.antgroup.com/en/api/registry/node-anchor

Shows how to register a newly defined custom anchor point with a unique name using Graph.registerAnchor.

```javascript
Graph.registerAnchor('custom-anchor', ...)
```

--------------------------------

### Create Node with Custom Attributes

Source: https://x6.antv.antgroup.com/en/api/model/cell

Creates a node using custom `theme` and `label` attributes, demonstrating the application of configured `attrHooks` for advanced styling.

```javascript
const rect = graph.addNode({
  x: 100,
  y: 100,
  rx: 5,
  ry: 10,
  label: 'rect',
  attrs: {
    body: {
      theme: '#f5f5f5',
    },
    label: {
      fill: '#fff',
    },
  },
})
```

--------------------------------

### Create Node with Default Options

Source: https://x6.antv.antgroup.com/en/api/model/cell

Creates a node using the graph's `addNode` method, leveraging the default configurations set by `Shape.Rect.config`.

```javascript
const rect = graph.addNode({
  x: 100,
  y: 100,
  attrs: {
    label: {
      text: 'rect',
    },
  },
})
```

--------------------------------

### Using a Registered Custom Anchor

Source: https://x6.antv.antgroup.com/en/api/registry/node-anchor

Demonstrates how to configure the graph to use a registered custom anchor point by its name in the connecting options.

```javascript
new Graph({
  connecting: {
    anchor: {
      name: 'custom-anchor',
    },
  },
})
```

--------------------------------

### Get Cell Attribute by String Path

Source: https://x6.antv.antgroup.com/en/api/model/cell

Retrieves a specific attribute value using a string path. Handles nested properties and returns undefined if the path does not exist.

```javascript
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
```

--------------------------------

### Configure propHooks for Custom rx and ry Options

Source: https://x6.antv.antgroup.com/en/api/model/cell

Configures `propHooks` for custom `rx` and `ry` options, mapping them to `attrs/body/rx` and `attrs/body/ry` respectively. This enables easier creation of rounded rectangles.

```javascript
Shape.Rect.config({
  propHooks: {
    rx(metadata) {
      const { rx, ...others } = metadata
      if (rx != null) {
        ObjectExt.setByPath(others, 'attrs/body/rx', rx)
      }
      return others
    },
    ry(metadata) {
      const { ry, ...others } = metadata
      if (ry != null) {
        ObjectExt.setByPath(others, 'attrs/body/ry', ry)
      }
      return others
    },
  },
})
```

--------------------------------

### Modify Default Text Color

Source: https://x6.antv.antgroup.com/en/api/model/cell

Modifies the default text color of a rectangle's label by calling `Shape.Rect.config`. This example shows how to override previously set attributes.

```javascript
// Only modify the default text color
Shape.Rect.config({
  attrs: {
    label: {
      fill: 'blue',
      // Override the 'red' defined above
      stroke: '#000',
    },
  },
})
```

--------------------------------

### Create Node with Label Option

Source: https://x6.antv.antgroup.com/en/api/model/cell

Creates a node using a custom `label` option, which is then mapped to `attrs/label/text` via `propHooks`.

```javascript
const rect = graph.addNode({
  x: 100,
  y: 100,
  label: 'rect',
})
```

--------------------------------

### Using Custom Port Label Layout in Node Definition

Source: https://x6.antv.antgroup.com/en/api/registry/port-label-layout

Demonstrates how to apply a registered custom port label layout ('bottomRight') within the configuration of a graph node's ports.

```javascript
const rect = graph.addNode({
  ports: {
    groups: {
      group1: {
        position: {
          name: 'top',
        },
        label: {
          position: {
            name: 'bottomRight',
          },
        },
      },
    },


    items: [
      { id: 'port1', group: 'group1' },
      { id: 'port2', label: { position: 'bottomRight' } },
    ],
  },
})

```

--------------------------------

### Customizing Text Retrieval and Setting

Source: https://x6.antv.antgroup.com/en/api/registry/node-tool

This snippet illustrates how to configure custom 'getText' and 'setText' methods using string paths for scenarios with custom node markup. This allows for proper serialization of graph data.

```javascript
node.addTools({
  name: 'node-editor',
  args: {
    getText: 'a/b',
    setText: 'c/d',
  },
})
```

--------------------------------

### Create Rounded Rectangle with Custom Options

Source: https://x6.antv.antgroup.com/en/api/model/cell

Creates a rectangle node with custom `rx`, `ry`, and `label` options, demonstrating the use of configured `propHooks` for rounded corners and label text.

```javascript
const rect = graph.addNode({
  x: 100,
  y: 100,
  rx: 5,
  ry: 10,
  label: 'rect',
})
```

--------------------------------

### Get Ancestor Cells

Source: https://x6.antv.antgroup.com/en/api/model/cell

The `getAncestors` method retrieves all ancestor cells. By default (`deep: true`), it returns all ancestors recursively; setting `deep: false` returns only the immediate parent.

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

--------------------------------

### Registering a Custom Tool Directly

Source: https://x6.antv.antgroup.com/en/api/registry/node-tool

This snippet shows how to register a custom tool named 'button' by directly referencing a `Button` class. This method requires understanding the `ToolItem` base class.

```javascript
Graph.registerNodeTool('button', Button)
```

--------------------------------

### Register and Use Custom Highlighter

Source: https://x6.antv.antgroup.com/en/api/registry/highlighter

Registers a custom highlighter with the Graph and then uses it in the highlighting configuration. This allows for custom visual feedback during interactions.

```javascript
Graph.registerHighlighter('opacity', opacity, true)
```

```javascript
new Graph({
  highlighting: {
    magnetAvailable: {
      name: 'opacity',
    },
  },
})
```

--------------------------------

### Side Port Label Layout Arguments

Source: https://x6.antv.antgroup.com/en/api/registry/port-label-layout

Defines the arguments for the 'side' port label layout algorithm. Allows specifying custom x, y coordinates, rotation angle, and label attributes.

```typescript
interface SideArgs {
  x?: number
  y?: number
  angle?: number
  attrs?: Attr.CellAttrs
}
```

--------------------------------

### Manhattan Routing Fallback with Selection Plugin

Source: https://x6.antv.antgroup.com/en/api/registry/router

Configures the Selection plugin to use 'orth' as a fallback router during node dragging to improve performance by reducing path recalculations.

```typescript
graph.use(
  new Selection({
    // Switch router during dragging to orth
    movingRouterFallback: 'orth',
  }),
)
```

--------------------------------

### Cell Markup Management

Source: https://x6.antv.antgroup.com/en/api/model/cell

Provides methods to get, set, and remove the SVG/HTML markup structure of a cell. The markup defines how a cell is rendered and can be modified to trigger events and redraw the canvas.

```APIDOC
## get markup

### Description
Get the `markup` property of the cell.

### Method
GET

### Endpoint
N/A (Direct property access)

### Code Example
```javascript
const markup = cell.markup
```

## set markup

### Description
Set the `markup` property of the cell. This action triggers the `change:markup` event and redraws the canvas.

### Method
SET

### Endpoint
N/A (Direct property access)

### Request Body
- **markup** (Markup) - Required - The new markup structure to set.

### Code Example
```javascript
cell.markup = markup
```

## getMarkup()

### Description
Retrieves the current markup structure of the cell.

### Method
GET

### Endpoint
N/A (Method call)

### Returns
- **Markup** - The markup structure of the cell.

### Code Example
```javascript
const markup = cell.getMarkup()
```

## setMarkup(...)

### Description
Sets the markup structure for the cell. By default, it triggers the `change:markup` event and redraws the canvas. The `options.silent` parameter can be used to prevent these actions.

### Method
POST

### Endpoint
N/A (Method call)

### Parameters
#### Request Body
- **markup** (Markup) - Required - The new markup structure.
- **options.silent** (boolean) - Optional - If `true`, does not trigger the `change:markup` event and canvas redraw. Defaults to `false`.
- **options...others** (object) - Optional - Other custom key-value pairs for event callbacks.

### Code Example
```javascript
cell.setMarkup(markup, { silent: true })
```

## removeMarkup(...)

### Description
Removes the markup from the cell. By default, it triggers the `change:markup` event and redraws the canvas. The `options.silent` parameter can be used to prevent these actions.

### Method
DELETE

### Endpoint
N/A (Method call)

### Parameters
#### Request Body
- **options.silent** (boolean) - Optional - If `true`, does not trigger the `change:markup` event and canvas redraw. Defaults to `false`.
- **options...others** (object) - Optional - Other custom key-value pairs for event callbacks.

### Code Example
```javascript
cell.removeMarkup({ silent: true })
```
```

--------------------------------

### Configure Default Node/Edge Options

Source: https://x6.antv.antgroup.com/en/api/model/cell

Sets default values for node and edge options like width, height, markup, and attributes. This is useful for defining preset configurations for custom nodes and edges.

```javascript
Shape.Rect.config({
  width: 80,
  height: 40,
  markup: ...,
  attrs: ...,
})
```
Tokens:
Raw