The Connection Point and Anchor jointly determine the starting or ending point of an edge.

• Starting point: Draw a reference line from the center of the first path point or target node (if there is no path point) to the anchor point of the source node, and calculate the intersection point of the reference line and the shape according to the specified connection point calculation method. This intersection point is the starting point of the edge.
• Ending point: Draw a reference line from the center of the last path point or source node (if there is no path point) to the anchor point of the target node, and calculate the intersection point of the reference line and the shape according to the specified connection point calculation method. This intersection point is the ending point of the edge.

X6 provides the following built-in connection point calculation methods.

• boundary Default value, intersection with the boundary of the linked shape.
• bbox Intersection with the bounding box of the linked element.
• rect Intersection with the rotated rectangular region of the linked element.
• anchor Use the anchor point as the connection point.

You can specify the connection point when creating an edge:

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

After creation, you can modify the connection point by calling the edge.setSource and edge.setTarget methods:

edge.setSource({
  cell: 'source-id',
  connectionPoint: {
    name: 'boundary',
    args: {
      sticky: true,
    },
  },
})

When creating a canvas, you can set the global default connection point through the connecting option:

new Graph({
  connecting: {
    connectionPoint: {
      name: 'boundary',
      args: {
        sticky: true,
      },
    },
  },
})

Simplified writing when there are no parameters:

new Graph({
  connecting: {
    connectionPoint: 'boundary',
  },
})

Built-in Connection Points

boundary

Automatically recognize the boundary of the linked shape and calculate the intersection point of the reference line and the anchor point (Anchor). For example, an <ellipse> element will be recognized as an ellipse, and the intersection point of the ellipse and the reference line will be calculated. Elements that cannot be recognized (such as text or <path>) will use the bounding box of the shape as the connection point, which is the same as using 'bbox'.

Supported parameters are as follows:

anchor

Use the anchor point as the connection point, supporting the following parameters:

bbox

Intersection point of the bounding box of the linked element and the reference line, supporting the following parameters:

rect

Intersection point of the rotated rectangular region of the linked element and the reference line, supporting the following parameters:

Custom Connection Points

A connection point definition is a function with the following signature, returning the connection point.

export type Definition<T> = (
  line: Line,
  view: NodeView,
  magnet: SVGElement,
  args: T,
) => Point

After completing the connection point definition, we register the connection point:

Graph.registerConnectionPoint('custom-connection-point', ...)

After registration, we can use the connection point by name:

new Graph({
  connecting: {
    connectionPoint: 'custom-connection-point'
  },
})