连接点 | X6 图编辑引擎

连接点 ConnectionPoint 与锚点 Anchor 共同确定了边的起点或终点。

起点：从第一个路径点或目标节点的中心（没有路径点时）画一条参考线到源节点的锚点，然后根据 connectionPoint 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的起点。
终点：从最后一个路径点或源节点的中心（没有路径点时）画一条参考线到目标节点的锚点，然后根据 connectionPoint 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的终点。

X6 内置了以下几种连接点计算方法。

boundary 默认值，与链接图形的边框的交点。
bbox 与链接元素的包围盒的交点。
rect 与链接元素的旋转后的矩形区域的交点。
anchor 使用锚点作为连接点。

可以在创建边时指定连接点：

const edge = graph.addEdge({
  source: {
    cell: 'source-id',
    connectionPoint: {
      name: 'boundary',
      args: {
        sticky: true,
      },
    },
  },
  target: {
    cell: 'target-id',
    connectionPoint: 'boundary', // 没有参数时可以简化写法
  },
})

创建之后可以调用 edge.setSource 和 edge.setTarget 方法来修改连接点：

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

在创建画布时，可以通过 connecting 选项来设置全局默认的连接点：

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

没有参数时可以简化为：

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

内置连接点

boundary

自动识别链接图形的边框，并计算参照点与锚点（Anchor）形成的直线与边框的交点。如 <ellipse> 元素将被识别为椭圆，并求椭圆与直线的交点，求得的交点为边的连接点。不能识别的元素（text、<path> 等）使用图形的包围盒代替，这与使用 'bbox' 求得的连接点一样。

支持的参数如下表：

参数名	参数类型	是否必选	默认值	参数说明
offset	number \| Point.PointLike	否	`0`	连接点的偏移量。
stroked	boolean	否	`true`	是否考虑图形的边框宽度。
insideout	boolean	否	`true`	当参考线位于图形内部且没有交点时，是否延长参考线求交点，默认为 `true`。
extrapolate	boolean	否	`false`	当参考线位于图形外部且没有交点时，是否延长参考线求交点，延长后也可能没有交点，默认为 `false`。此参数的优先级高于 `sticky`。
sticky	boolean	否	`false`	当参考线位于图形外部且没有交点时，是否使用边框上离参考线最最近的点作为交点，默认为 `false`。
precision	number	否	`2`	交点计算的精度。
selector	string	否	`undefined`	选择器，用于标识一个元素，使用该元素的边框来计算交点。默认使用节点中第一个不在 `<g>` 元素内的子元素。

anchor

将锚点作为连接点，支持如下参数：

参数名	参数类型	是否必选	默认值	参数说明
offset	number \| Point.PointLike	否	`0`	连接点的偏移量。

bbox

图形的包围盒与参考线的交点，支持如下参数：

参数名	参数类型	是否必选	默认值	参数说明
offset	number \| Point.PointLike	否	`0`	连接点的偏移量。
stroked	boolean	否	`false`	是否考虑图形的边框宽度。

rect

图形旋转后的矩形区域与参考线的交点，支持如下参数：

参数名	参数类型	是否必选	默认值	参数说明
offset	number \| Point.PointLike	否	`0`	连接点的偏移量。
stroked	boolean	否	`false`	是否考虑图形的边框宽度。

自定义连接点

连接点定义是一个具有如下签名的函数，返回连接点。

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

参数名	参数类型	参数说明
line	Line	参考线。
nodeView	NodeView	连接的节点视图。
magnet	SVGElement	连接的节点上的元素。
args	T	参数。

完成连接点定义后，我们先注册连接点：

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

注册以后我们就可以通过连接点名称来使用：

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