Edge

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.

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.

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.

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.

• 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 }.

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.

insertVertex(…)

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

Inserts a path point at the specified position.

appendVertex(…)

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

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

getVertexAt(…)

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

Gets the path point at the specified index.

setVertexAt(…)

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

Sets the path point at the specified index.

removeVertexAt(…)

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

Removes the path point at the specified index.

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.

removeRouter(…)

removeRouter(options?: Edge.SetOptions): this

Removes the router.

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.

removeConnector(…)

removeConnector(options?: Edge.SetOptions): this

Removes the connector.

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.

insertLabel(…)

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

Inserts a label at the specified position.

appendLabel(…)

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

Inserts a label at the end of the label array.

getLabelAt(…)

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

Gets the label at the specified position.

setLabelAt(…)

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

Sets the label at the specified position.

removeLabelAt(…)

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

Removes the label at the specified position.