X6

https://x6.antv.antgroup.com/api/
Admin
X6 is a powerful graph visualization library that enables developers to create interactive diagrams,...
Tokens:52,279
Snippets:439
Trust Score:9.8
Update:2 months ago
Show doc for...
Tokens:
Raw
### Node Initialization with Specific Ports Example

Source: https://x6.antv.antgroup.com/api/model/node

Example of initializing a Node with ports, assigning specific ports to predefined groups and providing unique IDs.

```javascript
const node = new Node({
  ports: {
    group: { ... },
    items: [
      { id: 'port1', group: 'group1', ... },
      { id: 'port2', group: 'group1', ... },
      { id: 'port3', group: 'group2', ... },
    ],
  }
})
```

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

### Node Initialization with Port Groups and Items Example

Source: https://x6.antv.antgroup.com/api/model/node

Example of initializing a Node with a detailed ports configuration, including specific definitions for port groups and their properties.

```javascript
const node = new Node({
  ports: {
    group: {
      group1: {
        markup: { tagName: 'circle' },
        attrs: { },
        zIndex: 1,
        position: {
          name: 'top',
          args: {},
        },
      },
      group2: { ... },
      group3: { ... },
    },
    items: [ ... ],
  }
})
```

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

### Metro Router with Directional Constraints

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

Example of using the 'metro' router, similar to 'manhattan' but allowing diagonal segments, with specified start and end directions.

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

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

### Custom Port Label Layout Function Example

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

An example of a custom port label layout function that positions the label to the bottom-right of the port, with configurable dx and dy offsets.

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


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

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

### Configure Boundary Tool with Custom Args

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

Example of adding the 'boundary' tool to an edge with custom 'padding' and 'attrs' for the bounding rectangle.

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

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

### Configure Vertices Tool Attributes

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

Example of configuring the 'vertices' tool when creating an edge, specifically customizing the 'attrs' for the path points.

```javascript
// Create edge with tools
const edge1 = graph.addEdge({
  ...
  tools: [
    {
      name: 'vertices',
      args: {
        attrs: { fill: '#666' },
      },
    },
  ]
})
```

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

### OneSide Router Configuration

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

Example of using the 'oneSide' router with the 'side' argument to define the routing direction.

```javascript
graph.addEdge({
  source,
  target,
  router: {
    name: 'oneSide',
    args: { side: 'right' },
  },
})
```

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

### Orthogonal Router with Padding

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

Example of using the 'orth' router with specific padding arguments to control anchor point distances.

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

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

### Connecting to Cells or Ports

Source: https://x6.antv.antgroup.com/api/model/edge

Examples of creating edges by connecting to existing cells (nodes/edges) or specific ports on cells.

```APIDOC
## addEdge with Cell Connections

### Description
Adds an edge connecting to specified cells or ports.

### Method
`graph.addEdge(options)`

### Parameters
#### Source/Target Configuration
- **cell** (string) - The ID of the cell to connect to.
- **port** (string) - Optional - The ID of the port on the cell to connect to.
- **selector** (string) - Optional - A selector for a specific element within the cell to connect to.
- **anchor** (AnchorData | string) - Optional - Configuration for the anchor point on the cell.
- **connectionPoint** (ConnectionPointData | string) - Optional - Configuration for the connection point on the cell.

### Request Examples

**Connecting to cells:**
```javascript
const edge = graph.addEdge({
  source: { cell: 'source-cell-id' },
  target: { cell: 'target-cell-id' },
});
```

**Connecting to ports on cells:**
```javascript
const edge = graph.addEdge({
  source: { cell: 'source-cell-id', port: 'port-id' },
  target: { cell: 'target-cell-id', port: 'port-id' },
});
```

**Connecting to elements within cells:**
```javascript
const edge = graph.addEdge({
  source: { cell: 'source-cell-id', selector: 'some-selector' },
  target: { cell: 'target-cell-id', selector: 'some-selector' },
});
```

**Specifying anchors:**
```javascript
const edge = graph.addEdge({
  source: {
    cell: 'source-id',
    anchor: {
      name: 'midSide',
      args: { dx: 10 },
    },
  },
  target: {
    cell: 'target-id',
    anchor: 'orth', // Simplified syntax when no args
  },
});
```

**Specifying connection points:**
```javascript
const edge = graph.addEdge({
  source: {
    cell: 'source-id',
    connectionPoint: {
      name: 'boundary',
      args: { sticky: true },
    },
  },
  target: {
    cell: 'target-id',
    connectionPoint: 'boundary', // Simplified syntax when no args
  },
});
```
```

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

### Manhattan Router with Directional Constraints

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

Configure the 'manhattan' router to specify allowed start and end directions for pathfinding.

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

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

### Add and Remove Edge Tools

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

Example of adding source-arrowhead and target-arrowhead tools on edge mouse enter, and removing them on mouse leave. The target-arrowhead can be customized with specific attributes.

```javascript
graph.on('edge:mouseenter', ({ cell }) => {
  cell.addTools([
    'source-arrowhead',
    {
      name: 'target-arrowhead',
      args: {
        attrs: {
          fill: 'red',
        },
      },
    },
  ])
})


graph.on('edge:mouseleave', ({ cell }) => {
  cell.removeTools()
})
```

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

### Ellipse Spread Port Layout Configuration

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

Defines the configuration for distributing ports evenly along an ellipse. Use 'start' to specify the initial angle.

```typescript
interface EllipseSpreadArgs {
  start?: 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: 'ellipseSpread',
          args: {
            start: 45,
          },
        },
      },
    },
  },
})


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

```

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

### Register Custom Edge Tool (Button)

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

Example of registering a custom edge tool named 'button' by extending the ToolItem class. This approach requires a deeper understanding of the ToolItem class.

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

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

### Ellipse Port Layout

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

Distributes ports evenly along an arc, starting from a specified angle with a given step.

```APIDOC
### ellipse

Ports are distributed along an arc, starting from the angle specified by `start` and distributed evenly with `step` as the interval.

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

| Name              | Type    | Required | Default | Description                                                                 |
| ----------------- | ------- | -------- | ------- | --------------------------------------------------------------------------- |
| start             | number  |          |         | Starting angle.                                                             |
| step              | number  |          | `20`    | Step size.                                                                  |
| compensateRotate  | number  |          | `false` | Whether to compensate the port's rotation angle along the arc.              |
| dr                | number  |          | `0`     | Offset along the radial direction.                                          |
| dx                | number  |          | `0`     | Offset along the X-axis.                                                    |
| dy                | number  |          | `0`     | Offset along the Y-axis.                                                    |
| angle             | number  |          | `0`     | Rotation angle of the port.                                                 |
| x                 | number  |          | -       | Overrides the calculated X-coordinate with the specified X-coordinate.      |
| y                 | number  |          | -       | Overrides the calculated Y-coordinate with the specified Y-coordinate.      |

```

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

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

### Line Segment Port Layout Configuration

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

Uses the 'line' layout algorithm to distribute ports evenly along a defined line segment. 'start' and 'end' points define the line, with optional 'dx', 'dy', and 'angle' for adjustments.

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

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

### Using 'Side' Label Layout with Customization

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

Example of configuring the 'right' side label layout to force a specific y-coordinate and set text color.

```typescript
label: {
  position: {
    name : 'right',
    args: {
      y: 10, // 强制指定 y 坐标为 10，替换计算结果中的 y 坐标
      attrs: {
        text: {
          fill: 'red', // 设置标签颜色为红色
        },
      },
    },
  },
}
```

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

### Get Edge Polyline

Source: https://x6.antv.antgroup.com/api/model/edge

Obtain the polyline representation of an edge, which includes its start point, end point, and all intermediate vertices.

```javascript
getPolyline(): Polyline
```

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

### Edge Methods

Source: https://x6.antv.antgroup.com/api/model/edge

Documentation for common methods available on Edge objects, such as checking if it's an edge, getting its bounding box, polyline, or loop status.

```APIDOC
## Edge Methods

### Description
Methods for interacting with and querying edge properties.

### Methods
- **isEdge()**: Returns `true` if the object is an edge.
  ```javascript
  isEdge(): true
  ```
- **getBBox()**: Returns the bounding box of the edge.
  ```javascript
  getBBox(): Rectangle
  ```
- **getPolyline()**: Returns the polyline representation of the edge (endpoints and vertices).
  ```javascript
  getPolyline(): Polyline
  ```
- **hasLoop(options?: { deep?: boolean })**: Checks if the edge contains a loop.
  - **options.deep** (boolean, optional, default: `false`): If `true`, checks for nested loops as well.
  ```javascript
  hasLoop({ deep: true }): boolean
  ```
```

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

### Get Edge Source Point

Source: https://x6.antv.antgroup.com/api/model/edge

Retrieve the exact point on the canvas where the edge starts. Returns `null` if the edge is connected to a cell or port.

```javascript
getSourcePoint(): Point.PointLike | null
```

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

### Ellipse Arc Port Layout Configuration

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

Applies the 'ellipse' layout algorithm to distribute ports along an arc. 'start' angle and 'step' define the distribution, with options for 'compensateRotate', 'dr', 'dx', 'dy', and 'angle'.

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

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

### Graph Initialization with Options

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

Instantiate a new X6 graph with a configuration object. The options control various aspects of the graph's behavior and appearance.

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

### Description
Initializes a new X6 graph instance with the provided options.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **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 when the container size changes. Defaults to `false`.
- **panning** (`boolean | PanningManager.Options`) - Optional - Enables or disables panning of the canvas. Defaults to `true`.
- **mousewheel** (`boolean | MouseWheel.Options`) - Optional - Enables or disables zooming via mouse wheel. Defaults to `false`.
- **grid** (`boolean | number | GridManager.Options`) - Optional - Configures the grid display. Defaults to `false` (no grid background, but a 10px grid is available).
- **background** (`false | BackgroundManager.Options`) - Optional - Configures the background display. Defaults to `false` (no background).
- **translating** (`Translating.Options`) - Optional - Options for node movement and automatic offset on overlap. Defaults to `{ restrict: false, autoOffset: true }`.
- **embedding** (`boolean | Embedding.Options`) - Optional - Enables or disables node embedding. Defaults to `false`.
- **connecting** (`Connecting.Options`) - Optional - Options for edge connections. Defaults to `{ snap: false, ... }`.
- **highlighting** (`Highlighting.Options`) - Optional - Options for highlighting elements. Defaults to `{...}`.
- **interacting** (`Interacting.Options`) - Optional - Options for customizing node and edge interaction behavior. Defaults to `{ edgeLabelMovable: false }`.
- **magnetThreshold** (`number | onleave`) - Optional - The number of mouse movements before a connection is triggered, or `onleave` to trigger on mouse leave. Defaults to `0`.
- **moveThreshold** (`number`) - Optional - The number of mouse movements allowed before triggering a `mousemove` event. Defaults to `0`.
- **clickThreshold** (`number`) - Optional - The maximum mouse movement distance (in pixels) before a click event is considered invalid. Defaults to `0`.
- **preventDefaultContextMenu** (`boolean`) - Optional - Whether to prevent the default browser context menu. Defaults to `true`.
- **preventDefaultBlankAction** (`boolean`) - Optional - Whether to prevent default mouse event behavior on blank canvas areas. Defaults to `true`.
- **async** (`boolean`) - Optional - Whether to render the graph asynchronously. Defaults to `true`.
- **virtual** (`boolean | VirtualOptions`) - Optional - Enables virtual rendering for performance optimization, with options for margin and enabled state. 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 - A factory function to create custom cell views.

### Request Example
```javascript
const options = {
  container: document.getElementById('graph-container'),
  width: 800,
  height: 600,
  panning: true,
  grid: {
    size: 10,
    visible: true
  }
};

const graph = new Graph(options);
```

### Response
#### Success Response (200)
- **Graph Instance** - A new instance of the X6 Graph.

#### Response Example
(No specific response example provided for initialization, as it returns a Graph instance.)
```

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

### Configuring Highlighting in Graph Initialization

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

Demonstrates how to configure highlighting options, such as magnet availability, when creating a new Graph instance.

```APIDOC
## Configuring Highlighting

### Description
Configure highlighting options during graph initialization to define styles for interactions like connecting ports.

### Method
`new Graph(options)`

### Parameters
#### `options.highlighting`
- **`highlighting`** (object) - Optional - Configuration for various highlighting states.
  - **`magnetAvailable`** (object) - Configuration for when a magnet is available for connection.
    - **`name`** (string) - Required - The name of the highlighter to use (e.g., 'stroke').
    - **`args`** (object) - Optional - Arguments to pass to the highlighter.
      - **`padding`** (number) - Optional - Padding around the highlighted element.
      - **`attrs`** (object) - Optional - Attributes for the border element (e.g., stroke width, color).

### Request Example
```javascript
new Graph({
  highlighting: {
    magnetAvailable: {
      name: 'stroke',
      args: {
        padding: 4,
        attrs: {
          'stroke-width': 2,
          stroke: 'red',
        },
      },
    },
  },
})
```
```

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

### Get Canvas Content Area

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

Get the bounding box of the canvas content in local coordinates. Options determine if cell geometry should be used for calculation.

```javascript
getContentArea(options?: Transform.GetContentAreaOptions): Rectangle
```

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

### Configuring Port Layouts in X6

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

Demonstrates how to configure port layout algorithms using the 'groups' option for layout definitions and 'items' for specific port configurations. Arguments can be passed to override group defaults.

```javascript
graph.addNode(
  ...,
  ports: {
    // 连接桩分组
    groups: {
      group1: {
        position: {
          name: 'xxx', // 布局算法名称
          args: { },   // 布局算法的默认参数
        },
      },
    },


    // 连接桩定义
    items: [
      {
        groups: 'group1',
        args: { }, // 覆盖 group1 中指定的默认参数
      },
    ],
  },
)
```

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

### Get Canvas Content Bounding Box

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

Get the bounding box of the canvas content in canvas coordinates. Options determine if cell geometry should be used for calculation.

```javascript
getContentBBox(options?: Transform.GetContentAreaOptions): Rectangle
```

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

### Node Initialization with Ports (Items Only)

Source: https://x6.antv.antgroup.com/api/model/node

Initialize a Node with a simplified ports configuration, providing only an array of port items.

```javascript
const node = new Node({
  ports: [ ... ], // 连接桩
})
```

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

### Get Node Position

Source: https://x6.antv.antgroup.com/api/model/node

Retrieves the position of a node. The `relative` option can be set to `true` to get the position relative to the parent node instead of the absolute canvas position.

```typescript
/**
 * 获取节点位置。
 */
position(options?: Node.GetPositionOptions): Point.PointLike
```

```typescript
const pos = rect.position()
console.log(pos.x, pos.y)
```

```typescript
const relativePos = child.position({ relative: true })
console.log(relativePos.x, relativePos.y)
```

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

### Creating an Edge with Connection Points

Source: https://x6.antv.antgroup.com/api/registry/connection-point

Demonstrates how to specify connection points for the source and target of an edge during creation. It shows both detailed configuration with arguments and a simplified syntax when no arguments are needed.

```APIDOC
## Creating an Edge with Connection Points

When creating an edge, you can specify the connection point for both the source and the target.

### Example with detailed configuration:
```javascript
const edge = graph.addEdge({
  source: {
    cell: 'source-id',
    connectionPoint: {
      name: 'boundary',
      args: {
        sticky: true,
      },
    },
  },
  target: {
    cell: 'target-id',
    connectionPoint: 'boundary', // Simplified syntax when no arguments are needed
  },
});
```
```

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

### Node Initialization with Ports (Group and Items)

Source: https://x6.antv.antgroup.com/api/model/node

Initialize a Node with a complex ports configuration, defining both port groups and individual port items.

```javascript
const node = new Node({
  ports: {
    group: { ... }, // 连接桩组定义
    items: [ ... ], // 连接桩
  }
})
```

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

### Using Routers with Edges

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

Demonstrates how to apply a router to an edge during its creation, with and without arguments.

```APIDOC
## Using Routers with Edges

This section shows how to configure routers for edges, either with specific arguments or as a simple string name.

### Example 1: Router with arguments
```javascript
const edge = graph.addEdge({
  source,
  target,
  router: {
    name: 'oneSide',
    args: {
      side: 'right',
    },
  },
});
```

### Example 2: Router without arguments
```javascript
const edge = graph.addEdge({
  source,
  target,
  router: 'oneSide',
});
```
```

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

### Get All Edge Labels

Source: https://x6.antv.antgroup.com/api/model/edge

Retrieves all labels currently associated with the edge.

```typescript
getLabels(): Edge.Label[]
```

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

### Adding Node Tools

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

Demonstrates how to add tools when creating a node or after a node has been created.

```APIDOC
## Adding Node Tools

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

### Adding tools to an existing node
```javascript
node.addTools([
  {
    name: 'button-remove',
    args: { x: 10, y: 10 },
  },
])
```
```

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

### Get Edge Connector

Source: https://x6.antv.antgroup.com/api/model/edge

Retrieves the current connector configuration for the edge.

```typescript
getConnector(): Edge.ConnectorData
```

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

### Get Edge Router

Source: https://x6.antv.antgroup.com/api/model/edge

Retrieves the current router configuration for the edge.

```typescript
getRouter(): Edge.RouterData
```

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

### Initialize X6 Graph with Options

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

Instantiate a new X6 graph by passing a configuration object to the Graph constructor. This object allows customization of various canvas behaviors and features.

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

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

### Get Ports by Group

Source: https://x6.antv.antgroup.com/api/model/node

Retrieves all ports that belong to a specified group.

```javascript
getPortsByGroup(groupName: string): PortMetadata[]
```

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

### Configure Segments Tool with Custom Args

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

Illustrates adding the 'segments' tool to an edge with custom arguments for 'snapRadius' and 'attrs'.

```javascript
graph.addEdge({
  ...
  tools: [{ 
    name: 'segments',
    args: {
      snapRadius: 20,
      attrs: {
        fill: '#444',
      },
    },
  }]
})
```

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

### Get All Ports

Source: https://x6.antv.antgroup.com/api/model/node

Retrieves an array containing all ports associated with the node.

```javascript
getPorts(): PortMetadata[]
```

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

### Registering a Custom Highlighter

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

Shows how to define and register a custom highlighter with X6.

```APIDOC
## Custom Highlighter Definition

### Description
A custom highlighter is an object with `highlight` and `unhighlight` methods.

### Interface
```typescript
export interface Definition<T> {
  highlight: (cellView: CellView, magnet: Element, options: T) => void
  unhighlight: (cellView: CellView, magnet: Element, options: T) => void
}
```

### Parameters for `highlight` and `unhighlight` methods
- **`cellView`** (CellView) - The view of the cell.
- **`magnet`** (Element) - The element to be highlighted.
- **`options`** (T) - Options for the highlighter.

### Example: Opacity Highlighter
```javascript
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)
  },
}

// Register the custom highlighter
Graph.registerHighlighter('opacity', opacity, true)

// Use the custom highlighter
new Graph({
  highlighting: {
    magnetAvailable: {
      name: 'opacity',
    },
  },
})
```
```

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

### Get Node Angle

Source: https://x6.antv.antgroup.com/api/model/node

Retrieves the current rotation angle of the node.

```typescript
getAngle(): number
```

```typescript
if (node.getAngle() !== 0) {
  // do something
}
```

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

### Get Default Edge Label

Source: https://x6.antv.antgroup.com/api/model/edge

Retrieves the default label configuration for the edge.

```typescript
getDefaultLabel(): Edge.Label
```

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

### Add Tools to Edge on Creation or After

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

Demonstrates how to add predefined tools like 'vertices' and 'button-remove' when creating an edge or to an existing edge.

```javascript
// Create edge with tools
graph.addEdge({
  source,
  target,
  tools: [
    { name: 'vertices' },
    {
      name: 'button-remove',
      args: { distance: 20 },
    },
  ],
})


// Add tools to an existing edge
edge.addTools([
  { name: 'vertices' },
  {
    name: 'button-remove',
    args: { distance: 20 },
  },
])
```

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

### Configure Button Tool with onClick Handler

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

Demonstrates adding a 'button' tool to an edge with a custom 'distance' and an 'onClick' handler for interaction.

```javascript
graph.addEdge({
  ...
  tools: [
    {
      name: 'button',
      args: {
        distance: -40,
        onClick({ view }: any) {
          //
        },
      },
    },
  ],
})
```

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

### position(...)

Source: https://x6.antv.antgroup.com/api/model/node

Gets or sets the position of a node. Can be absolute or relative to its parent.

```APIDOC
## position(...)

### Description
Gets or sets the position of a node. The position can be absolute (relative to the canvas) or relative to its parent. Options allow for controlling event triggering and whether child elements should also be moved.

### Method Signature (Get)
```typescript
position(options?: Node.GetPositionOptions): Point.PointLike
```

### Method Signature (Set)
```typescript
position(x: number, y: number, options?: Node.SetPositionOptions): this
```

### Parameters (Get)
#### Path Parameters
- **options.relative** (boolean) - Optional - If true, returns the position relative to the parent node. Defaults to `false` (absolute position).

### Parameters (Set)
#### Path Parameters
- **x** (number) - Required - The x-coordinate of the node's position.
- **y** (number) - Required - The y-coordinate of the node's position.
- **options.relative** (boolean) - Optional - If true, the provided coordinates are relative to the parent node's position. Defaults to `false` (absolute coordinates).
- **options.deep** (boolean) - Optional - If true, also changes the position of child nodes and edges. Defaults to `false`.
- **options.silent** (boolean) - Optional - If true, does not trigger 'change:position' events or canvas redraw. Defaults to `false`.
- **options...others** (object) - Optional - Other custom key-value pairs that can be used in event callbacks.

### Request Example (Get)
```javascript
// Get absolute position
const pos = rect.position()
console.log(pos.x, pos.y)

// Get relative position to parent
const relativePos = child.position({ relative: true })
console.log(relativePos.x, relativePos.y)
```

### Request Example (Set)
```javascript
// Set absolute position to [30, 30]
node.position(30, 30)

// Set position relative to parent to [30, 30]
child.position(30, 30, { relative: true })

// Move children and edges along with the parent
parent.position(30, 30, { deep: true })

// Move node without triggering events or redraw
node.position(30, 30, { silent: true })

// With custom event data
node.position(30, 30, { otherKey: 'otherValue' })
```
```

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

### getContentBBox

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

Gets the rectangular area of the canvas content, represented in canvas coordinates.

```APIDOC
### getContentBBox(...)

```javascript
getContentBBox(options?: Transform.GetContentAreaOptions): Rectangle
```

Gets the rectangular area of the canvas content, represented in canvas coordinates.

| Name | Type | Required | Default Value | Description |
|---|---|---|---|---|
| options.useCellGeometry | boolean | | `true` | Whether to use the geometry information (Model) of nodes/edges to calculate the canvas content size. |
```

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

### Using Node Anchors When Creating Edges

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

Demonstrates how to specify source and target node anchors, including arguments, when creating a new edge. It shows both named anchors with arguments and simplified anchor definitions.

```APIDOC
## Using Node Anchors When Creating Edges

This example shows how to specify anchors for the source and target of an edge during its creation. Anchors can be defined with a name and optional arguments, or as a simple string name if no arguments are needed.

### Method

```javascript
const edge = graph.addEdge({
  source: {
    cell: 'source-id',
    anchor: {
      name: 'midSide',
      args: {
        dx: 10,
      },
    },
  },
  target: {
    cell: 'target-id',
    anchor: 'orth', // Simplified syntax when no arguments are needed
  },
});
```
```

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

### Get Canvas Zoom Factor

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

Retrieve the current zoom level of the canvas.

```javascript
zoom(): number
```

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

### Add Tools to Node

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

Demonstrates how to add tools when creating a node or to an existing node. Tools can include interactive elements like remove buttons.

```javascript
// 创建节点时添加小工具
graph.addNode({
  ...,
  tools: [
    {
      name: 'button-remove',
      args: { x: 10, y: 10 },
    },
  ],
})


// 创建节点后添加小工具
node.addTools([
  {
    name: 'button-remove',
    args: { x: 10, y: 10 },
  },
])
```

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

### Get Port by ID

Source: https://x6.antv.antgroup.com/api/model/node

Retrieves a port's metadata using its unique ID.

```javascript
getPort(portId: string): PortMetadata
```

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

### Custom Node Tools - Method 2

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

Explains the second method for creating custom node tools by extending existing registered tools.

```APIDOC
## Custom Node Tools - Method 2

### Description
Inherit from an already registered tool and modify its configuration. The `ToolItem` base class provides a static method `define` for quick inheritance and configuration modification.

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

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

### Example using `Graph.registerNodeTool` with inheritance
This method allows for quick inheritance and specifying default options.

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

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

### Creating an Edge

Source: https://x6.antv.antgroup.com/api/model/edge

Demonstrates how to create an edge by connecting to points on the canvas.

```APIDOC
## addEdge

### Description
Adds an edge to the graph.

### Method
`graph.addEdge(options)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **source** (TerminalData) - Required - The starting point of the edge.
- **target** (TerminalData) - Required - The ending point of the edge.
- **vertices** (Point.PointLike[]) - Optional - The waypoints for the edge.
- **router** (RouterData | string) - Optional - The router configuration for the edge.
- **connector** (ConnectorData | string) - Optional - The connector configuration for the edge.
- **labels** (Label[]) - Optional - The labels for the edge.
- **defaultLabel** (Label) - Optional - The default label for the edge.

### Request Example
```javascript
const edge = graph.addEdge({
  source: { x: 40, y: 40 },
  target: { x: 180, y: 80 },
});
```

### Response
#### Success Response (200)
Returns the created edge object.

#### Response Example
```json
{
  "id": "edge-id",
  "source": {"x": 40, "y": 40},
  "target": {"x": 180, "y": 80}
}
```
```

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

### translate

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

Allows getting the canvas translation amounts or translating the canvas by specified amounts.

```APIDOC
### translate()

```javascript
translate(): {
  tx: number
  ty: number
}
```

Gets the canvas translation amounts.

### translate(tx: number, ty: number)

```javascript
translate(tx: number, ty: number): this
```

Translates the canvas.

| Name | Type | Required | Default Value | Description |
|---|---|---|---|---|
| tx | number | ✓| | Translation amount on the X-axis. |
| ty | number | ✓| | Translation amount on the Y-axis. |
```

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

### Adding Tools to Edges

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

Demonstrates how to add tools to edges either during creation or after the edge has been created.

```APIDOC
## Adding Tools During Edge Creation

### Description
Create an edge and specify the tools to be associated with it.

### Code
```javascript
// Create edge with specified tools
graph.addEdge({
  source,
  target,
  tools: [
    { name: 'vertices' },
    {
      name: 'button-remove',
      args: { distance: 20 },
    },
  ],
})
```

## Adding Tools After Edge Creation

### Description
Add tools to an existing edge instance.

### Code
```javascript
// Add tools to an existing edge
edge.addTools([
  { name: 'vertices' },
  {
    name: 'button-remove',
    args: { distance: 20 },
  },
])
```
```

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

### Get Canvas Translation

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

Retrieve the current translation offsets (tx, ty) of the canvas.

```javascript
translate(): {
  tx: number
  ty: number
}
```

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

### Sine Wave Port Layout Algorithm

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

Implements a custom port layout algorithm that distributes ports in a sine wave pattern. Adjust 'step' and multiplier for wave characteristics.

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

```

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

### Get Canvas Rotation

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

Retrieve the current rotation angle and center point of the canvas.

```javascript
rotate(): {
  angle: number
  cx?: number
  cy?: number
}
```

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

### Manhattan Router Fallback with Selection Plugin

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

Integrate the 'manhattan' router with the Selection plugin, using 'orth' as a fallback for moving nodes to improve performance.

```javascript
graph.use(
  new Selection({
    ...
     // 拖拽期路由降级为 orth 路由
    movingRouterFallback: 'orth',
  }),
)
```

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

### Get Port Index

Source: https://x6.antv.antgroup.com/api/model/node

Returns the numerical index of a given port, identified by its metadata or ID.

```javascript
getPortIndex(port: PortMetadata | string): number
```

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

### getContentArea

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

Gets the rectangular area of the canvas content, represented in the canvas's local coordinates.

```APIDOC
### getContentArea(...)

```javascript
getContentArea(options?: Transform.GetContentAreaOptions): Rectangle
```

Gets the rectangular area of the canvas content, represented in the canvas's local coordinates.

| Name | Type | Required | Default Value | Description |
|---|---|---|---|---|
| options.useCellGeometry | boolean | | `true` | Whether to use the geometry information (Model) of nodes/edges to calculate the canvas content size. |
```

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

### Button Tool Configuration

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

Details the 'button' tool, which renders a button at a specified position with customizable click interactions.

```APIDOC
## Button Tool

### Description
This tool renders a button at a specified location on the edge, supporting custom click interactions.

### Configuration
| Parameter | Type | Default | Description |
|---|---|---|---|
| `distance` | number | string | `undefined` | Distance or proportion from the start of the edge. |
| `offset` | number | Point.PointLike | `0` | Offset from the `distance`. |
| `rotate` | boolean | `undefined` | Whether the button should rotate with the edge. |
| `markup` | Markup.JSONMarkup | `undefined` | Markup definition for rendering the button. |
| `onClick` | `(args: {e: Dom.MouseDownEvent, cell: Cell, view: CellView }) => void` | `undefined` | Callback function executed when the button is clicked. |

### Usage Example
```javascript
graph.addEdge({
  ...,
  tools: [
    {
      name: 'button',
      args: {
        distance: -40,
        onClick({ view }: any) {
          // Custom click handler
        },
      },
    },
  ],
})
```
```

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

### rotate

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

Allows getting the canvas rotation angle and center, or rotating the canvas by a specified angle.

```APIDOC
### rotate()

```javascript
rotate(): {
  angle: number
  cx?: number
  cy?: number
}
```

Gets the canvas rotation angle and rotation center.

### rotate(angle: number, cx?: number, cy?: number)

```javascript
rotate(angle: number, cx?: number, cy?: number): this
```

Rotates the canvas.

| Name | Type | Required | Default Value | Description |
|---|---|---|---|---|
| angle | number | ✓| | Rotation angle. |
| cx | number | | - | Rotation center x-coordinate, defaults to the canvas center. |
| cy | number | | - | Rotation center y-coordinate, defaults to the canvas center. |
```

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

### Registering a Custom Port Label Layout

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

Demonstrates how to register a custom layout function with the Graph system, making it available for use by name.

```javascript
Graph.registerPortLabelLayout('bottomRight', bottomRight)
```

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

### zoom

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

Allows getting the current canvas zoom ratio or zooming the canvas by a given factor.

```APIDOC
### zoom()

```javascript
zoom(): number
```

Gets the canvas zoom ratio.

### zoom(factor: number, options?: ZoomOptions)

```javascript
zoom(factor: number, options?: ZoomOptions): this
```

Zooms the canvas.

| Name | Type | Required | Default Value | Description |
|---|---|---|---|---|
| factor | number | ✓| | Zooming ratio. |
| options.absolute | boolean | | `false` | Whether to use absolute zoom. |
| options.minScale | number | | - | Minimum zoom ratio. |
| options.maxScale | number | | - | Maximum zoom ratio. |
| options.scaleGrid | number | | - | Corrects the zoom ratio to be a multiple of `scaleGrid`. |
| options.center | Point.PointLike | | - | Zooming center. |

When `options.absolute` is `true`, it means scaling the canvas to the value represented by `factor`. Otherwise, `factor` represents the zoom in/out factor. A positive `factor` zooms in, and a negative `factor` zooms out.
```

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

### Built-in Port Label Layouts

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

X6 provides several built-in algorithms for positioning port labels. These can be configured directly or extended with custom arguments.

```APIDOC
## Built-in Port Label Layouts

### Side
Labels are positioned to one side of the port.

- `'left'`
- `'right'`
- `'top'`
- `'bottom'`

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

| Name  | Type   | Required | Default | Description                                                                 |
| :---- | :----- | :------- | :------ | :-------------------------------------------------------------------------- |
| x     | number |          | -       | Overrides the calculated X coordinate.                                      |
| y     | number |          | -       | Overrides the calculated Y coordinate.                                      |
| angle | number |          | -       | Overrides the calculated rotation angle.                                    |
| attrs | Attr.CellAttrs |          | -       | Attributes for the label.                                                   |

### Inside/Outside
Labels are positioned inside or outside the node boundary.

- `'inside'`
- `'outside'`
- `'insideOriented'`
- `'outsideOriented'`

**Arguments:**
```typescript
interface InOutArgs {
  offset?: number
  x?: number
  y?: number
  angle?: number
  attrs?: Attr.CellAttrs
}
```

| Name  | Type   | Required | Default | Description                                                                 |
| :---- | :----- | :------- | :------ | :-------------------------------------------------------------------------- |
| offset| number |          | `15`    | Offset from the node center along the direction to the label position.      |
| x     | number |          | -       | Overrides the calculated X coordinate.                                      |
| y     | number |          | -       | Overrides the calculated Y coordinate.                                      |
| angle | number |          | -       | Overrides the calculated rotation angle.                                    |
| attrs | Attr.CellAttrs |          | -       | Attributes for the label.                                                   |

### Radial
Labels are positioned around circular or elliptical nodes.

- `'radial'`
- `'radialOriented'`

**Arguments:**
```typescript
interface RadialArgs {
  offset?: number
  x?: number
  y?: number
  angle?: number
  attrs?: Attr.CellAttrs
}
```

| Name  | Type   | Required | Default | Description                                                                 |
| :---- | :----- | :------- | :------ | :-------------------------------------------------------------------------- |
| offset| number |          | `20`    | Offset from the node center along the direction to the label position.      |
| x     | number |          | -       | Overrides the calculated X coordinate.                                      |
| y     | number |          | -       | Overrides the calculated Y coordinate.                                      |
| angle | number |          | -       | Overrides the calculated rotation angle.                                    |
| attrs | Attr.CellAttrs |          | -       | Attributes for the label.                                                   |

```

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

### Get Edge Label at Index

Source: https://x6.antv.antgroup.com/api/model/edge

Retrieves the label at a specific index from the edge's label array.

```typescript
getLabelAt(index: number): Edge.Label | null
```

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

### Setting Global Default Anchors

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

Explains how to configure global default anchors for all edges created within a graph instance by using the `connecting` option during graph initialization.

```APIDOC
## Setting Global Default Anchors

Global default anchors can be set during the graph initialization using the `connecting` configuration option. This ensures all edges adhere to the specified anchor settings unless overridden individually.

### Configuration

```javascript
new Graph({
  connecting: {
    anchor: {
      name: 'midSide',
      args: {
        dx: 10,
      },
    },
  },
});

// Simplified syntax when no arguments are needed for the default anchor
new Graph({
  connecting: {
    anchor: 'midSide',
  },
});
```
```

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

### Get Port at Index

Source: https://x6.antv.antgroup.com/api/model/node

Retrieves a port from the node's port list based on its numerical index.

```javascript
getPortAt(index: number): PortMetadata | null
```

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

### Custom Node Tools - Method 1

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

Describes the first method for creating custom node tools by extending the `ToolItem` class.

```APIDOC
## Custom Node Tools - Method 1

### Description
Inherit from `ToolItem` to implement a custom tool class. This method is more complex and requires a thorough understanding of the `ToolItem` class. Refer to the source code of built-in tools for examples.

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

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

### Get Vertex at Index

Source: https://x6.antv.antgroup.com/api/model/edge

Retrieves the vertex at a specific index in the edge's path. Returns `null` if the index is out of bounds.

```typescript
getVertexAt(index: number): Point.PointLike | null
```

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

### Get Edge Vertices

Source: https://x6.antv.antgroup.com/api/model/edge

Retrieves the array of points that define the edge's path. Returns an empty array if no vertices are set.

```typescript
getVertices(): Point.PointLike[]
```
Tokens:
Raw