NodeAnchor

5 min read

当连接到节点时,可以通过 EdgeAnchor 来指定被连接的节点的锚点,锚点与连接点 ConnectionPoint 共同确定了边的起点和终点。

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

我们在 Registry.NodeAnchor.presets 命名空间中提供了以下几种锚点定义。

  • center 边链接的元素的中心点(默认值)。
  • top 边链接的元素的顶部中心点。
  • bottom 边链接的元素的底部中心点。
  • left 边链接的元素的左侧中心点。
  • right 边链接的元素的右侧中心点。
  • midSide 边链接的元素的最近侧中心点。
  • topLeft 边链接的元素的左上角。
  • topRight 边链接的元素的右上角。
  • bottomLeft 边链接的元素的左下角。
  • bottomRight 边链接的元素的右下角。
  • orth 正交点。
  • nodeCenter 节点的中心点。

可以在创建边时指定锚点:

const edge = graph.addEdge({
  source: { 
    cell: 'source-id', 
    anchor: { 
      name: 'midSide', 
      args: {
        dx: 10,
      },
    },
  },
  target: { 
    cell: 'target-id', 
    anchor: 'orth', // 没有参数时可以简化写法
  },
})

创建之后可以调用 edge.setSourceedge.setTarget 方法来修改锚点:

edge.setSource({
  cell: 'source-id', 
  anchor: { 
    name: 'midSide', 
    args: {
      dx: 10,
    },
  },
})

在创建画布时,可以通过 connecting 选项来设置全局默认的锚点:

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

没有参数时可以简化为:

new Graph({
  connecting: {
    anchor: 'midSide',
  },
})

presets

center

元素中心点,支持如下参数:

参数名参数类型是否必选默认值参数说明
dxnumber | string0X 轴偏移量,支持数字绝对偏移量和百分比相对偏移量。
dynumber | string0Y 轴偏移量,支持数字绝对偏移量和百分比相对偏移量。
rotatebooleanfalse是否使用元素跟随节点旋转后的包围盒,默认不考虑旋转角度。

top

元素顶部中心点,支持如下参数:

参数名参数类型是否必选默认值参数说明
dxnumber | string0X 轴偏移量,支持数字绝对偏移量和百分比相对偏移量。
dynumber | string0Y 轴偏移量,支持数字绝对偏移量和百分比相对偏移量。
rotatebooleanfalse是否使用元素跟随节点旋转后的包围盒,默认不考虑旋转角度。

bottom

元素底部中心点,支持如下参数:

参数名参数类型是否必选默认值参数说明
dxnumber | string0X 轴偏移量,支持数字绝对偏移量和百分比相对偏移量。
dynumber | string0Y 轴偏移量,支持数字绝对偏移量和百分比相对偏移量。
rotatebooleanfalse是否使用元素跟随节点旋转后的包围盒,默认不考虑旋转角度。

left

元素左侧中心点,支持如下参数:

参数名参数类型是否必选默认值参数说明
dxnumber | string0X 轴偏移量,支持数字绝对偏移量和百分比相对偏移量。
dynumber | string0Y 轴偏移量,支持数字绝对偏移量和百分比相对偏移量。
rotatebooleanfalse是否使用元素跟随节点旋转后的包围盒,默认不考虑旋转角度。

元素右侧中心点,支持如下参数:

参数名参数类型是否必选默认值参数说明
dxnumber | string0X 轴偏移量,支持数字绝对偏移量和百分比相对偏移量。
dynumber | string0Y 轴偏移量,支持数字绝对偏移量和百分比相对偏移量。
rotatebooleanfalse是否使用元素跟随节点旋转后的包围盒,默认不考虑旋转角度。

midSide

最靠近边的那一侧中心点,支持如下参数:

参数名参数类型是否必选默认值参数说明
paddingnumber0通过放大元素的包围盒 padding 像素,来偏移中心点。
rotatebooleanfalse是否使用元素跟随节点旋转后的包围盒,默认不考虑旋转角度。
direction'H' | 'V'-连接点的方向,比如如果设置为 H,只能连接到节点的左侧或者右侧的中心点,会根据位置自动判断。

topLeft

元素左上角,支持如下参数:

参数名参数类型是否必选默认值参数说明
dxnumber | string0X 轴偏移量,支持数字绝对偏移量和百分比相对偏移量。
dynumber | string0Y 轴偏移量,支持数字绝对偏移量和百分比相对偏移量。
rotatebooleanfalse是否使用元素跟随节点旋转后的包围盒,默认不考虑旋转角度。

topRight

元素右上角,支持如下参数:

参数名参数类型是否必选默认值参数说明
dxnumber | string0X 轴偏移量,支持数字绝对偏移量和百分比相对偏移量。
dynumber | string0Y 轴偏移量,支持数字绝对偏移量和百分比相对偏移量。
rotatebooleanfalse是否使用元素跟随节点旋转后的包围盒,默认不考虑旋转角度。

bottomLeft

元素左下角,支持如下参数:

参数名参数类型是否必选默认值参数说明
dxnumber | string0X 轴偏移量,支持数字绝对偏移量和百分比相对偏移量。
dynumber | string0Y 轴偏移量,支持数字绝对偏移量和百分比相对偏移量。
rotatebooleanfalse是否使用元素跟随节点旋转后的包围盒,默认不考虑旋转角度。

bottomRight

元素右下角,支持如下参数:

参数名参数类型是否必选默认值参数说明
dxnumber | string0X 轴偏移量,支持数字绝对偏移量和百分比相对偏移量。
dynumber | string0Y 轴偏移量,支持数字绝对偏移量和百分比相对偏移量。
rotatebooleanfalse是否使用元素跟随节点旋转后的包围盒,默认不考虑旋转角度。

orth

正交点,支持如下参数:

参数名参数类型是否必选默认值参数说明
paddingnumber0X 轴偏移量。

nodeCenter

节点的中心,支持如下参数:

参数名参数类型是否必选默认值参数说明
dxnumber0X 轴偏移量。
dynumber0Y 轴偏移量。

registry

锚点定义是一个具有如下签名的函数,返回锚点。

export type Definition<T> = (
  this: EdgeView,
  nodeView: NodeView,
  magnet: SVGElement,
  ref: Point.PointLike | SVGElement,
  args: T,
  type: Edge.TerminalType,
) => Point
参数名参数类型参数说明
thisEdgeView边的视图。
nodeViewNodeView连接的节点视图。
magnetSVGElement连接的节点上的元素。
refPoint.PointLike | SVGElement参照点/元素。
argsT参数。
typeEdge.TerminalType边的终端类型。

并在 Registry.NodeAnchor.registry 对象上提供了 registerunregister 两个方法来注册和取消注册锚点定义,同时也将这两个方法分别挂载为 Graph 上的两个静态方法 Graph.registerAnchorGraph.unregisterAnchor

register

register(entities: { [name: string]: Definition }, force?: boolean): void
register(name: string, entity: Definition, force?: boolean): Definition

注册连锚点定义。

unregister

unregister(name: string): Definition | null

取消注册锚点定义。