边

Edge 是边的基类，继承自 Cell，并定义了边的通用属性和方法。

属性

除了从 Cell 继承属性外，还支持以下属性。

source 和 target

设置边的起点/终点或起始节点/终止节点，可以分为一下几种情况：

• 连接到画布上的点

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

• 连接到节点/边

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

• 连接到节点上的连接桩

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

• 连接到节点上的某个元素

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

另外，边的锚点 anchor 和连接点 ConnectionPoint 选项共同确定了边的起点和终点。

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

创建边时可以分别为 source 和 target 指定锚点和连接点。

• 指定锚点

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

• 指定连接点

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

vertices

路径点 vertices 是一个点的数组。边从起点开始，按顺序经过路径点，最后到达终点。

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

router

路由 router 将对 vertices 进一步处理，并在必要时添加额外的点，然后返回处理后的点（不包含边的起点和终点）。例如，经过 orth 路由处理后，边的每一条链接线段都是水平或垂直的。

我们默认提供了以下几种路由。

可以这样指定路由名称 name 和路由参数 args：

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

当没有路由参数 args 时，也可以简化为：

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

除了上面几种内置路由，我们还可以创建自定义路由，并注册使用，更多细节请参考自定义路由教程。

connector

连接器将起点、路由返回的点、终点加工为 <path> 元素的 d 属性，决定了边渲染到画布后的样式。

我们默认提供了以下几种连接器。

可以这样指定连接器名称 name 和路由参数 args：

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

当没有连接器参数 args 时，也可以简化为：

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

除了上面几种内置连接器，我们还可以创建自定义连接器，并注册使用，更多细节请参考自定义连接器教程。

labels 和 defaultLabel

由于标签配置非常灵活，所以我们提供了单独的教程来介绍如何使用标签，详情请参考使用标签教程。

方法

通用

isEdge()

isEdge(): true

判断是不是边，该方法始终返回 true。

getBBox()

getBBox(): Rectangle

返回边的包围盒。

getPolyline()

getPolyline(): Polyline

返回由端点和路径点组成的线段。

hasLoop(…)

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

是否包含循环链接。

• 当 options.deep 为 false 时，表示仅当起始节点和终止节点为同一节点时才是循环连接。
• 当 options.deep 为 true 时，表示当起始节点和终止节点为同一节点或起始节点与终止节点有父子嵌套关系时都是循环连接。

链接 Terminal

getSource()

getSource(): Edge.TerminalData

获取边的起始节点/起始点信息。

getSourceCell()

getSourceCell(): Cell | null

获取边的起始节点/边，没有连接到节点/边时返回 null。

getSourceNode()

getSourceNode(): Node | null

获取边的起始节点，没有连接到节点时返回 null。

getSourceCellId()

getSourceCellId(): string | null

获取边的起始节点/边的 ID，没有连接到节点/边时返回 null。

getSourcePortId()

getSourcePortId(): string | null

获取边的起始连接桩 ID，没有连接到连接桩时返回 null。

getSourcePoint()

getSourcePoint(): Point.PointLike | null

获取边链接到画布的起始点，当边连接到节点/边时返回 null。

setSource(…)

/**
 * 链接到节点。
 */
setSource(
  node: Node,
  args?: Edge.SetCellTerminalArgs,
  options?: Edge.SetOptions,
): this

/**
 * 链接到边。
 */
setSource(
  edge: Edge,
  args?: Edge.SetEdgeTerminalArgs,
  options?: Edge.SetOptions,
): this

/**
 * 链接到画布上的点。
 */
setSource(
  point: Point | Point.PointLike,
  args?: Edge.SetTerminalCommonArgs,
  options?: Edge.SetOptions,
): this

/**
 * 设置边的起点或起始节点/边。
 */
setSource(args: Edge.TerminalData, options?: Edge.SetOptions): this

getTarget()

getTarget(): Edge.TerminalData

获取边的终止节点/终止点信息。

getTargetCell()

getTargetCell(): Cell | null

获取边的终止节点/边，没有连接到节点/边时返回 null。

getTargetNode()

getTargetNode(): Node | null

获取边的终止节点，没有连接到节点时返回 null。

getTargetCellId()

getTargetCellId(): string | null

获取边的终止节点/边的 ID，没有连接到节点/边时返回 null。

getTargetPortId()

getTargetPortId(): string | null

获取边的终止连接桩 ID，没有连接到连接桩时返回 null。

getTargetPoint()

getTargetPoint(): Point.PointLike | null

获取边链接到画布的终止点，当边连接到节点/边时返回 null。

setTarget()

/**
 * 链接到节点。
 */
setTarget(
  edge: Node,
  args?: Edge.SetCellTerminalArgs,
  options?: Edge.SetOptions,
): this

/**
 * 链接到边。
 */
setTarget(
  edge: Edge,
  args?: Edge.SetEdgeTerminalArgs,
  options?: Edge.SetOptions,
): this

/**
 * 链接到画布上的点。
 */
setTarget(
  point: Point | Point.PointLike,
  args?: Edge.SetTerminalCommonArgs,
  options?: Edge.SetOptions,
): this

/**
 * 设置边的终点或终止节点/边。
 */
setTarget(args: Edge.TerminalData, options?: Edge.SetOptions): this

disconnect(…)

disconnect(options?: Edge.SetOptions)

删除边的链接信息，即将边的起点和终点都设置为画布的原点 { x:0, y:0 }。

路径点 Vertice

getVertices()

getVertices(): Point.PointLike[]

获取路径点，当没有路径点时返回空数组。

setVertices(…)

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

设置路径点。

insertVertex(…)

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

在指定位置插入一个路径点。

appendVertex(…)

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

在路径点数组的末尾插入一个路径点。

getVertexAt(…)

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

获取指定索引位置的路径点。

setVertexAt(…)

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

设置指定索引位置的路径点。

removeVertexAt(…)

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

删除指定索引位置的路径点。

路由 Router

getRouter()

getRouter(): Edge.RouterData

获取路由。

setRouter(…)

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

设置路由。

removeRouter(…)

removeRouter(options?: Edge.SetOptions): this

删除路由。

连接器 Connector

getConnector()

getConnector(): Edge.ConnectorData

获取连接器。

setConnector(…)

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

设置连接器。

removeConnector(…)

removeConnector(options?: Edge.SetOptions): this

删除连接器。

标签 Label

getDefaultLabel()

getDefaultLabel(): Edge.Label

获取默认标签。

getLabels()

getLabels(): Edge.Label[]

获取所有标签。

setLabels(…)

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

设置标签。

insertLabel(…)

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

在指定位置插入标签。

appendLabel(…)

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

在标签数组末尾插入标签。

getLabelAt(…)

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

获取指定位置的标签。

setLabelAt(…)

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

设置指定位置的标签。

removeLabelAt(…)

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

删除指定位置的标签。