Edge | X6

Edge is the base class for edges, inheriting from Cell, and defines the common properties and methods for edges.

Attributes

In addition to inheriting from Cell attributes, the following attributes are also supported.

Option	Type	Description
source	TerminalData	Starting point or source node, connection point information.
target	TerminalData	End point or target node, connection point information.
vertices	Point.PointLike[]	Path points.
router	RouterData	Routing.
connector	ConnectorData	Connector.
labels	Label[] \| string[]	Labels.
defaultLabel	Label	Default label.

Source and Target

Setting the starting/ending point or source/target node of an edge can be categorized into the following situations:

Connecting to a point on the canvas

const edge = graph.addEdge({
  source: { x: 40, y: 40 },
  target: { x: 180, y: 80 },
})

Connecting to nodes/edges

const edge = graph.addEdge({
  source: { cell: 'source-cell-id' },
  target: { cell: 'target-cell-id' },
})

Connecting to connection points on nodes

const edge = graph.addEdge({
  source: { cell: 'source-cell-id', port: 'port-id' },
  target: { cell: 'target-cell-id', port: 'port-id' },
})

Connecting to specific elements on nodes

const edge = graph.addEdge({
  source: { cell: 'source-cell-id', selector: 'some-selector' },
  target: { cell: 'target-cell-id', selector: 'some-selector' },
})

Additionally, the edge's anchor points and connection points options together determine the starting and ending points of the edge.

Starting Point: A reference line is drawn from the first path point or the center of the target node (if there are no path points) to the anchor point of the source node. Then, based on the intersection calculation method specified by the connectionPoint, the intersection of the reference line and the shape is calculated, which becomes the starting point of the edge.
Ending Point: A reference line is drawn from the last path point or the center of the source node (if there are no path points) to the anchor point of the target node. Then, based on the intersection calculation method specified by the connectionPoint, the intersection of the reference line and the shape is calculated, which becomes the ending point of the edge.

When creating an edge, you can specify anchor points and connection points for source and target separately.

Specifying Anchor Points

const edge = graph.addEdge({
  source: {
    cell: 'source-id',
    anchor: {
      name: 'midSide',
      args: {
        dx: 10,
      },
    },
  },
  target: {
    cell: 'target-id',
    anchor: 'orth', // Can be simplified when there are no parameters
  },
})

Specifying Connection Points

const edge = graph.addEdge({
  source: {
    cell: 'source-id',
    connectionPoint: {
      name: 'boundary',
      args: {
        sticky: true,
      },
    },
  },
  target: {
    cell: 'target-id',
    connectionPoint: 'boundary', // Can be simplified when there are no parameters
  },
})

Vertices

The path points vertices is an array of points. The edge starts from the starting point, passes through the path points in order, and finally reaches the end point.

const edge = graph.addEdge({
  source,
  target,
  vertices: [
    { x: 100, y: 200 },
    { x: 300, y: 120 },
  ],
})

Router

The router router will further process the vertices, adding additional points if necessary, and return the processed points (excluding the starting and ending points of the edge). For example, after processing with the orth router, each link segment of the edge is either horizontal or vertical.

We provide the following default routers.

Router Name	Description
normal	Default router, returns the path points as is.
orth	Orthogonal router, consists of horizontal or vertical orthogonal segments.
oneSide	Restricted orthogonal router, consists of three restricted horizontal or vertical orthogonal segments.
manhattan	Smart orthogonal router, consists of horizontal or vertical orthogonal segments and automatically avoids other nodes (obstacles) along the path.
metro	Smart subway line router, consists of horizontal or vertical orthogonal segments and diagonal segments, similar to a subway map, and automatically avoids other nodes (obstacles) along the path.
er	Entity-relationship router, consists of `Z` shaped diagonal segments.

You can specify the router name name and router parameters args like this:

const edge = graph.addEdge({
  source,
  target,
  vertices: [
    { x: 100, y: 200 },
    { x: 300, y: 120 },
  ],
  router: {
    name: 'orth',
    args: {
      padding: 10,
    },
  },
})

When there are no router parameters args, it can also be simplified to:

const edge = graph.addEdge({
  source,
  target,
  vertices: [
    { x: 100, y: 200 },
    { x: 300, y: 120 },
  ],
  router: 'orth',
})

In addition to the built-in routers mentioned above, we can also create custom routers and register them for use. For more details, please refer to the Custom Router tutorial.

Connector

The connector processes the starting point, the points returned by the router, and the ending point into the d attribute of the <path> element, which determines the style of the edge rendered on the canvas.

We provide the following default connectors.

Connector Name	Description
normal	Simple connector, connects the starting point, routing points, and ending point with straight lines.
smooth	Smooth connector, connects the starting point, routing points, and ending point with cubic Bezier curves.
rounded	Rounded connector, connects the starting point, routing points, and ending point with straight lines and uses arcs to link at the segment connections (rounded corners).
jumpover	Jump line connector, connects the starting point, routing points, and ending point with straight lines and uses jump line symbols at the intersections of edges.

You can specify the connector name name and connector parameters args like this:

const edge = graph.addEdge({
  source,
  target,
  vertices: [
    { x: 100, y: 200 },
    { x: 300, y: 120 },
  ],
  connector: {
    name: 'rounded',
    args: {
      radius: 20,
    },
  },
})

When there are no connector parameters args, it can also be simplified to:

const edge = graph.addEdge({
  source,
  target,
  vertices: [
    { x: 100, y: 200 },
    { x: 300, y: 120 },
  ],
  connector: 'rounded',
})

In addition to the built-in connectors mentioned above, we can also create custom connectors and register them for use. For more details, please refer to the Custom Connector tutorial.

Labels and Default Label

Due to the flexibility of label configuration, we provide a separate tutorial to explain how to use labels. For details, please refer to the Using Labels tutorial.

Methods

General

isEdge()

isEdge(): true

Determines if it is an edge; this method always returns true.

getBBox()

getBBox(): Rectangle

Returns the bounding box of the edge.

getPolyline()

getPolyline(): Polyline

Returns the line segments composed of endpoints and path points.

hasLoop(...)

hasLoop(options: { deep?: boolean }): boolean

Checks if it contains a loop link.

Name	Type	Required	Default Value	Description
options.deep	boolean		`false`	Whether to perform nested checks.

When options.deep is false, it indicates that it is a loop connection only if the starting node and the ending node are the same node.
When options.deep is true, it indicates that it is a loop connection if the starting node and the ending node are the same node or if there is a parent-child nesting relationship between the starting node and the ending node.

Link Terminal

getSource()

getSource(): Edge.TerminalData

Gets the starting node/start point information of the edge.

getSourceCell()

getSourceCell(): Cell | null

Gets the starting node/edge of the edge; returns null if not connected to a node/edge.

getSourceNode()

getSourceNode(): Node | null

Gets the starting node of the edge; returns null if not connected to a node.

getSourceCellId()

getSourceCellId(): string | null

Gets the ID of the starting node/edge of the edge; returns null if not connected to a node/edge.

getSourcePortId()

getSourcePortId(): string | null

Gets the ID of the starting connection point; returns null if not connected to a connection point.

getSourcePoint()

getSourcePoint(): Point.PointLike | null

Gets the starting point linked to the canvas; returns null when the edge is connected to a node/edge.

setSource(...)

/**
 * Link to a node.
 */
setSource(
  node: Node,
  args?: Edge.SetCellTerminalArgs,
  options?: Edge.SetOptions,
): this

/**
 * Link to an edge.
 */
setSource(
  edge: Edge,
  args?: Edge.SetEdgeTerminalArgs,
  options?: Edge.SetOptions,
): this

/**
 * Link to a point on the canvas.
 */
setSource(
  point: Point | Point.PointLike,
  args?: Edge.SetTerminalCommonArgs,
  options?: Edge.SetOptions,
): this

/**
 * Set the starting point or starting node/edge of the edge.
 */
setSource(args: Edge.TerminalData, options?: Edge.SetOptions): this

getTarget()

getTarget(): Edge.TerminalData

Gets the ending node/end point information of the edge.

getTargetCell()

getTargetCell(): Cell | null

Gets the ending node/edge of the edge; returns null if not connected to a node/edge.

getTargetNode()

getTargetNode(): Node | null

Gets the ending node of the edge; returns null if not connected to a node.

getTargetCellId()

getTargetCellId(): string | null

Gets the ID of the ending node/edge of the edge; returns null if not connected to a node/edge.

getTargetPortId()

getTargetPortId(): string | null

Gets the ID of the ending connection point; returns null if not connected to a connection point.

getTargetPoint()

getTargetPoint(): Point.PointLike | null

Gets the ending point linked to the canvas; returns null when the edge is connected to a node/edge.

setTarget()

/**
 * Link to a node.
 */
setTarget(
  edge: Node,
  args?: Edge.SetCellTerminalArgs,
  options?: Edge.SetOptions,
): this

/**
 * Link to an edge.
 */
setTarget(
  edge: Edge,
  args?: Edge.SetEdgeTerminalArgs,
  options?: Edge.SetOptions,
): this

/**
 * Link to a point on the canvas.
 */
setTarget(
  point: Point | Point.PointLike,
  args?: Edge.SetTerminalCommonArgs,
  options?: Edge.SetOptions,
): this

/**
 * Set the ending point or ending node/edge of the edge.
 */
setTarget(args: Edge.TerminalData, options?: Edge.SetOptions): this

disconnect(...)

disconnect(options?: Edge.SetOptions)

Removes the link information of the edge, setting both the starting and ending points to the origin of the canvas { x:0, y:0 }.

Name	Type	Required	Default Value	Description
options.silent	boolean		`false`	If `true`, does not trigger `'change:source'` and `'change:target'` events and canvas redraw.
options...others	object			Other custom key-value pairs that can be used in event callbacks.

Path Points Vertice

getVertices()

getVertices(): Point.PointLike[]

Gets the path points; returns an empty array if there are no path points.

setVertices(...)

setVertices(
  vertices: Point.PointLike | Point.PointLike[],
  options?: Edge.SetOptions,
): this

Sets the path points.

Name	Type	Required	Default Value	Description
vertices	Point.PointLike \| Point.PointLike[]	✓		Path points.
options.silent	boolean		`false`	If `true`, does not trigger `'change:vertices'` events and canvas redraw.
options...others	object			Other custom key-value pairs that can be used in event callbacks.

insertVertex(...)

insertVertex(
  vertice: Point.PointLike,
  index?: number,
  options?: Edge.SetOptions,
): this

Inserts a path point at the specified position.

Name	Type	Required	Default Value	Description
vertice	Point.PointLike	✓		Path point.
index	number			Insertion position, defaults to the end of the path point array.
options.silent	boolean		`false`	If `true`, does not trigger `'change:vertices'` events and canvas redraw.
options...others	object			Other custom key-value pairs that can be used in event callbacks.

appendVertex(...)

appendVertex(vertex: Point.PointLike, options?: Edge.SetOptions): this

Inserts a path point at the end of the path point array.

Name	Type	Required	Default Value	Description
vertex	Point.PointLike	✓		Path point.
options.silent	boolean		`false`	If `true`, does not trigger `'change:vertices'` events and canvas redraw.
options...others	object			Other custom key-value pairs that can be used in event callbacks.

getVertexAt(...)

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

Gets the path point at the specified index.

Name	Type	Required	Default Value	Description
index	number	✓		Index position.

setVertexAt(...)

setVertexAt(
  index: number,
  vertice: Point.PointLike,
  options?: Edge.SetOptions,
): this

Sets the path point at the specified index.

Name	Type	Required	Default Value	Description
index	number	✓		Index position.
vertice	Point.PointLike	✓		Path point.
options.silent	boolean		`false`	If `true`, does not trigger `'change:vertices'` events and canvas redraw.
options...others	object			Other custom key-value pairs that can be used in event callbacks.

removeVertexAt(...)

removeVertexAt(index: number, options?: Edge.SetOptions): this

Removes the path point at the specified index.

Name	Type	Required	Default Value	Description
index	number	✓		Index position.
options.silent	boolean		`false`	If `true`, does not trigger `'change:vertices'` events and canvas redraw.
options...others	object			Other custom key-value pairs that can be used in event callbacks.

Router

getRouter()

getRouter(): Edge.RouterData

Gets the router.

setRouter(...)

setRouter(name: string, args?: KeyValue, options?: Edge.SetOptions): this
setRouter(router: Edge.RouterData, options?: Edge.SetOptions): this

Sets the router.

Name	Type	Required	Default Value	Description
name	string	✓		Router name.
args	KeyValue			Router parameters.
router	Edge.RouterData	✓		Router.
options.silent	boolean		`false`	If `true`, does not trigger `'change:router'` events and canvas redraw.
options...others	object			Other custom key-value pairs that can be used in event callbacks.

removeRouter(...)

removeRouter(options?: Edge.SetOptions): this

Removes the router.

Name	Type	Required	Default Value	Description
options.silent	boolean		`false`	If `true`, does not trigger `'change:router'` events and canvas redraw.
options...others	object			Other custom key-value pairs that can be used in event callbacks.

Connector

getConnector()

getConnector(): Edge.ConnectorData

Gets the connector.

setConnector(...)

setConnector(name: string, args?: KeyValue, options?: Edge.SetOptions): this
setConnector(connector: Edge.ConnectorData, options?: Edge.SetOptions): this

Sets the connector.

Name	Type	Required	Default Value	Description
name	string	✓		Connector name.
args	KeyValue			Connector parameters.
connector	Edge.ConnectorData	✓		Connector.
options.silent	boolean		`false`	If `true`, does not trigger `'change:connector'` events and canvas redraw.
options...others	object			Other custom key-value pairs that can be used in event callbacks.

removeConnector(...)

removeConnector(options?: Edge.SetOptions): this

Removes the connector.

Name	Type	Required	Default Value	Description
options.silent	boolean		`false`	If `true`, does not trigger `'change:connector'` events and canvas redraw.
options...others	object			Other custom key-value pairs that can be used in event callbacks.

Label

getDefaultLabel()

getDefaultLabel(): Edge.Label

Gets the default label.

getLabels()

getLabels(): Edge.Label[]

Gets all labels.

setLabels(...)

setLabels(
  labels: Edge.Label | Edge.Label[] | string | string[],
  options?: Edge.SetOptions,
): this

Sets the labels.

Name	Type	Required	Default Value	Description
labels	Edge.Label \| Edge.Label[] \| string \| string[]	✓		Labels or array of labels.
options.silent	boolean		`false`	If `true`, does not trigger `'change:labels'` events and canvas redraw.
options...others	object			Other custom key-value pairs that can be used in event callbacks.

insertLabel(...)

insertLabel(
  label: Edge.Label | string,
  index?: number,
  options?: Edge.SetOptions,
): this

Inserts a label at the specified position.

Name	Type	Required	Default Value	Description
label	Edge.Label \| string	✓		Label.
index	number			Insertion position, defaults to the end of the label array.
options.silent	boolean		`false`	If `true`, does not trigger `'change:labels'` events and canvas redraw.
options...others	object			Other custom key-value pairs that can be used in event callbacks.

appendLabel(...)

appendLabel(label: Edge.Label | string, options?: Edge.SetOptions): this

Inserts a label at the end of the label array.

Name	Type	Required	Default Value	Description
label	Edge.Label \| string	✓		Label.
options.silent	boolean		`false`	If `true`, does not trigger `'change:labels'` events and canvas redraw.
options...others	object			Other custom key-value pairs that can be used in event callbacks.

getLabelAt(...)

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

Gets the label at the specified position.

Name	Type	Required	Default Value	Description
index	number	✓		Index position.

setLabelAt(...)

setLabelAt(
  index: number,
  label: Edge.Label | string,
  options?: Edge.SetOptions,
): this

Sets the label at the specified position.

Name	Type	Required	Default Value	Description
index	number	✓		Index position.
label	Edge.Label \| string	✓		Label.
options.silent	boolean		`false`	If `true`, does not trigger `'change:labels'` events and canvas redraw.
options...others	object			Other custom key-value pairs that can be used in event callbacks.

removeLabelAt(...)

removeLabelAt(index: number, options?: Edge.SetOptions): this

Removes the label at the specified position.

Name	Type	Required	Default Value	Description
index	number	✓		Index position.
options.silent	boolean		`false`	If `true`, does not trigger `'change:labels'` events and canvas redraw.
options...others	object			Other custom key-value pairs that can be used in event callbacks.