Model

13 min read

配置

model

画布对应的模型,默认创建一个新模型。

方法

isNode(...)

isNode(cell: Cell): cell is Node

返回指定的 Cell 是否是节点。

参数

名称类型必选默认值描述
cellCell指定的 Cell。

isEdge(...)

isEdge(cell: Cell): cell is Edge

返回指定的 Cell 是否是边。

参数

名称类型必选默认值描述
cellCell指定的 Cell。

createNode(...)

createNode(metadata: Node.Metadata): Node

创建节点。

参数

名称类型必选默认值描述
metadataNode.Metadata节点元数据

addNode(...)

addNode(metadata: Node.Metadata, options?: AddOptions): Node
addNode(node: Node, options?: AddOptions): Node

添加节点到画布,返回添加的节点。

参数

名称类型必选默认值描述
nodeNode.Metadata | Node节点元数据节点实例
options.silentbooleanfalsetrue 时不触发 'node:added''cell:added' 事件和画布重绘。
options.sortbooleantrue是否按照 zIndex 排序。
options...othersobject其他自定义键值对,可以在事件回调中使用。

addNodes(...)

addNodes(nodes: (Node.Metadata | Node)[], options?: AddOptions): Graph

添加多个节点到画布,返回该画布。批量添加节点的时候,推荐使用这个方法,相比多次 addNode,它具备更好的性能。

参数

名称类型必选默认值描述
nodes(Node.Metadata | Node)[]节点元数据节点实例数组。
options.silentbooleanfalsetrue 时不触发 'node:added''cell:added' 事件和画布重绘。
options.sortbooleantrue是否按照 zIndex 排序。
options...othersobject其他自定义键值对,可以在事件回调中使用。

removeNode(...)

removeNode(nodeId: string, options?: RemoveOptions): Node | null
removeNode(node: Node, options?: RemoveOptions): Node | null

删除节点,返回删除的节点。

参数

名称类型必选默认值描述
nodestring | Node节点 ID 或节点实例
options.silentbooleanfalsetrue 时不触发 'node:removed''cell:removed' 事件和画布重绘。
options...othersobject其他自定义键值对,可以在事件回调中使用。

createEdge(...)

createEdge(metadata: Edge.Metadata): Edge

创建边。

参数

名称类型必选默认值描述
metadataEdge.Metadata节点元数据

addEdge(...)

addEdge(metadata: Edge.Metadata, options?: AddOptions): Edge
addEdge(edge:Edge, options?: AddOptions): Edge

添加边到画布,返回添加的边。

参数

名称类型必选默认值描述
edgeEdge.Metadata | Edge边元数据边实例
options.silentbooleanfalsetrue 时不触发 'edge:added''cell:added' 事件和画布重绘。
options.sortbooleantrue是否按照 zIndex 排序。
options...othersobject其他自定义键值对,可以在事件回调中使用。

addEdges(...)

addEdges(edges: (Edge.Metadata | Edge)[], options?: AddOptions): Graph

添加多条边到画布,返回该画布。

参数

名称类型必选默认值描述
edges(Edge.Metadata | Edge)[]边元数据边实例数组。
options.silentbooleanfalsetrue 时不触发 'edge:added''cell:added' 事件和画布重绘。
options.sortbooleantrue是否按照 zIndex 排序。
options...othersobject其他自定义键值对,可以在事件回调中使用。

removeEdge(...)

removeEdge(edgeId: string, options?: RemoveOptions): Edge | null
removeEdge(edge: Edge, options?: RemoveOptions): Edge | null

删除边,返回删除的边。

参数

名称类型必选默认值描述
edgestring | Edge边 ID 或边实例
options.silentbooleanfalsetrue 时不触发 'edge:removed''cell:removed' 事件和画布重绘。
options...othersobject其他自定义键值对,可以在事件回调中使用。

addCell(...)

addCell(cell: Cell | Cell[], options?: AddOptions): this

添加节点或边到画布。

参数

名称类型必选默认值描述
cellCell | Cell[]节点实例边实例,支持传入数组同时添加多个节点或边。
options.silentbooleanfalsetrue 时不触发 'cell:added''node:added''edge:added' 事件和画布重绘。
options.sortbooleantrue是否按照 zIndex 排序。
options...othersobject其他自定义键值对,可以在事件回调中使用。

addCells(...)

addCells(cells: Cell[], options?: AddOptions): this

添加多个节点或边到画布。

参数

名称类型必选默认值描述
cellsCell[]节点实例边实例的数组。
options.silentbooleanfalsetrue 时不触发 'cell:added''node:added''edge:added' 事件和画布重绘。
options.sortbooleantrue是否按照 zIndex 排序。
options...othersobject其他自定义键值对,可以在事件回调中使用。

removeCell(...)

removeCell(cellId: string, options?: RemoveOptions): Cell | null
removeCell(cell: Cell, options?: RemoveOptions): Cell | null

删除节点或边,返回删除的节点或边。

参数

名称类型必选默认值描述
cellstring | Cell节点/边 ID 或节点/边的实例。
options.silentbooleanfalsetrue 时不触发 'cell:removed''node:removed''edge:removed' 事件和画布重绘。
options...othersobject其他自定义键值对,可以在事件回调中使用。

removeCells(...)

removeCells(cells: (Cell | string)[], options?: RemoveOptions): Cell[]

删除多个节点/边,返回删除的节点或边的数组。

参数

名称类型必选默认值描述
cell(string | Cell)[]节点/边 ID 或节点/边数组。
options.silentbooleanfalsetrue 时不触发 'cell:removed''node:removed''edge:removed' 事件和画布重绘。
options...othersobject其他自定义键值对,可以在事件回调中使用。

removeConnectedEdges(...)

removeConnectedEdges(cell: Cell | string, options?: RemoveOptions): Edge[]

删除连接到节点/边的边,返回被删除边的数组。

参数

名称类型必选默认值描述
cellstring | Cell节点/边 ID 或节点/边。
options.silentbooleanfalsetrue 时不触发 'cell:removed''edge:removed' 事件和画布重绘。
options...othersobject其他自定义键值对,可以在事件回调中使用。

disconnectConnectedEdges(...)

disconnectConnectedEdges(cell: Cell | string, options?: Edge.SetOptions): this

将链接到节点/边的边的起点和终点设置为原点 {x: 0, y: 0},即断开连接。

参数

名称类型必选默认值描述
cellstring | Cell节点/边 ID 或节点/边。
options.silentbooleanfalsetrue 时不触发 'edge:change:source''edge:change:target' 事件和画布重绘。
options...othersobject其他自定义键值对,可以在事件回调中使用。

clearCells(...)

clearCells(options?: SetOptions): this

清空画布。

参数

名称类型必选默认值描述
options.silentbooleanfalsetrue 时不触发 'cell:removed''node:removed''edge:removed' 事件和画布重绘。
options...othersobject其他自定义键值对,可以在事件回调中使用。

resetCells(...)

resetCells(cells: Cell[], options?: SetOptions): this

清空画布并添加用指定的节点/边。

参数

名称类型必选默认值描述
cellCell[]节点/边数组。
options.silentbooleanfalsetrue 时不触发 'cell:added''node:added''edge:added''cell:removed''node:removed''edge:removed' 事件和画布重绘。
options...othersobject其他自定义键值对,可以在事件回调中使用。

hasCell(...)

hasCell(cellId: string): boolean
hasCell(cell: Cell): boolean

返回画布中是否包含指定的节点/边。

参数

名称类型必选默认值描述
cellstring | Cell节点/边 ID 或节点/边。

getCellById(...)

getCellById(id: string)

根据节点/边的 ID 获取节点/边。

参数

名称类型必选默认值描述
cellstring节点/边的 ID。

updateCellId(...)

updateCellId(cell: Cell, newId: string)

更新节点或者边的 ID,会返回新创建的节点/边。

参数

名称类型必选默认值描述
cellCell节点/边。
newIdstring新的 ID。

getCells()

getCells(): Cell[]

返回画布中所有节点和边。

getCellCount()

getCellCount(): number

返回画布中所有节点和边的数量。

getNodes()

getNodes(): Node[]

返回画布中所有节点。

getEdges()

getEdges(): Edge[]

返回画布中所有边。

getOutgoingEdges(...)

getOutgoingEdges(cell: Cell | string): Edge[] | null

获取连接到节点/边的输出边,即边的起点为指定节点/边的边。

参数

名称类型必选默认值描述
cellstring | Cell节点/边 ID 或节点/边。

getIncomingEdges(...)

getIncomingEdges(cell: Cell | string): Edge[] | null

获取连接到节点/边的输入边,即边的终点为指定节点/边的边。

参数

名称类型必选默认值描述
cellstring | Cell节点/边 ID 或节点/边。

getConnectedEdges(...)

getConnectedEdges(cell: Cell | string, options?: GetConnectedEdgesOptions): Edge[]

获取与节点/边相连接的边。

参数

名称类型必选默认值描述
cellstring | Cell节点/边 ID 或节点/边。
options.incomingboolean-是否包含输入边,默认返回所有输入和输出边,incomingoutgoing 两个选项中,当 incomingtrue 时只返回输入边。
options.outgoingboolean-是否包含输出边,默认返回所有输入和输出边,incomingoutgoing 两个选项中,当 outgoingtrue 时只返回输出边。
options.deepbooleanfalse是否递归获取所有子节点/边,为 true 时将同时返回链接到所有子孙节点/边的边。
options.enclosedbooleanfalse是否包含子孙节点之间相连接的边。
options.indirectbooleanfalse是否包含哪些间接连接的边,即连接到输入或输出边上的边。

使用

const edges = graph.getConnectedEdges(node) // 返回输入和输出边
const edges = graph.getConnectedEdges(node, { incoming: true, outgoing: true }) // 返回输入和输出边

const edges = graph.getConnectedEdges(node, { incoming: true }) // 返回输入边
const edges = graph.getConnectedEdges(node, { incoming: true, outgoing: false }) // 返回输入边

const edges = graph.getConnectedEdges(node, { outgoing: true }) // 返回输出边
const edges = graph.getConnectedEdges(node, { incoming:false, outgoing: true }) // 返回输出边

const edges = graph.getConnectedEdges(node, { deep: true }) // 返回输入和输出边,包含链接到所有子孙节点/边的输入和输出边
const edges = graph.getConnectedEdges(node, { deep: true, incoming: true }) // 返回输入边,包含链接到所有子孙节点/边的输入边
const edges = graph.getConnectedEdges(node, { deep: true, enclosed: true }) // 返回输入和输出边,同时包含子孙节点/边之间相连的边

const edges = graph.getConnectedEdges(node, { indirect: true }) // 返回输入和输出边,包含间接连接的边

getRootNodes()

getRootNodes(): Node[]

获取所有根节点,即没有输入边的节点。

isRootNode(...)

isRootNode(cell: Cell | string): boolean

返回指定的节点是否是根节点。

参数

名称类型必选默认值描述
cellstring | Cell节点/边 ID 或节点/边。

getLeafNodes()

getLeafNodes(): Node[]

返回所有叶子节点,即没有输出边的节点。

isLeafNode(...)

isLeafNode(cell: Cell | string): boolean

返回指定的节点是否是叶子节点

参数

名称类型必选默认值描述
cellstring | Cell节点/边 ID 或节点/边。

getNeighbors(...)

getNeighbors(cell: Cell, options?: GetNeighborsOptions): Cell[]

获取邻居节点。

参数

名称类型必选默认值描述
cellCell节点/边。
options.incomingboolean-是否包含输入侧的邻居节点,默认包含输入和输出侧的节点,incomingoutgoing 两个选项中,当 incomingtrue 时只返回输入侧的节点。
options.outgoingboolean-是否包含输出侧的邻居节点,默认包含输入和输出侧的节点,incomingoutgoing 两个选项中,当 outgoingtrue 时只返回输出侧的节点。
options.deepbooleanfalse是否递归获取所有子节点/边,为 true 时将同时返回所有子孙节点/边的邻居节点。
options.indirectbooleanfalse是否包含哪些间接连接的邻居节点,即中间包含多条边(边与边连接)的邻居。

isNeighbor(...)

isNeighbor(cell1: Cell, cell2: Cell, options?: GetNeighborsOptions): boolean

返回 cell2 是否是 cell1 的邻居, 其中 options 选项与 getNeighbors(...) 方法的选项一致。

getPredecessors(...)

getPredecessors(cell: Cell, options?: GetPredecessorsOptions): Cell[]

返回节点的前序节点,即从根节点开始连接到指定节点的节点。

参数

名称类型必选默认值描述
cellCell节点/边。
options.breadthFirstbooleanfalse是否使用广度优先搜索算法,默认使用深度优先搜索算法。
options.deepbooleanfalse是否递归获取所有子节点/边,为 true 时将同时返回所有子孙节点/边的前序节点。
options.distancenumber | number[] | ((distance: number) => boolean)-距获取指定距离的前序节点,节点和节点之间相隔的边的数量为 1 个距离单位。

isPredecessor(...)

isPredecessor(cell1: Cell, cell2: Cell, options?: GetPredecessorsOptions): boolean

返回 cell2 是否是 cell1 的前序节点,其中 options 选项与 getPredecessors(...) 方法的选项一致。

getSuccessors(...)

getSuccessors(cell: Cell, options?: GetPredecessorsOptions): Cell[]

获取所有后续节点,即从指定节点开始连接到叶子节点的节点。其中 options 选项与 getPredecessors(...) 方法的选项一致。

isSuccessor(...)

isSuccessor(cell1: Cell, cell2: Cell, options?: GetPredecessorsOptions): boolean

返回 cell2 是否是 cell1 的后续节点,其中 options 选项与 getPredecessors(...) 方法的选项一致。

getCommonAncestor(...)

getCommonAncestor(...cells: {Cell | Cell[])[]): Cell | null

获取指定节点的共同祖先节点。

getSubGraph(...)

getSubGraph(cells: Cell[], options?: GetSubgraphOptions): Cell[]

返回指定节点和边构成的子图。通过遍历指定的 cells 数组,当遇到边时,同时包含边的起始和终止节点;当遇到节点时,如果与节点相连的边的两端的节点都在 cells 数组中,则同时包含该条边。

参数

名称类型必选默认值描述
cellsCell[]节点/边数组。
options.deepbooleanfalse是否递归获取所有子节点/边。

cloneCells(...)

cloneCells(cells: Cell[]): { [oldCellId: string]: Cell }

克隆,返回旧节点/边 ID 和克隆后节点/边的键值对。

cloneSubGraph(...)

cloneSubGraph(cells: Cell[], options?: GetSubgraphOptions): { [oldCellId: string]: Cell }

获取子图并克隆。其中 options 选项与 getSubGraph(...) 方法的选项一致。

getNodesFromPoint(...)

getNodesFromPoint(x: number, y: number): Node[]
getNodesFromPoint(p: Point.PointLike): Node[]

返回指定位置的节点,即返回节点的矩形区域包含了指定点的节点。

getNodesInArea(...)

getNodesInArea(
  x: number,
  y: number,
  w: number,
  h: number,
  options?: Model.GetCellsInAreaOptions,
): Node[]
getNodesInArea(
  rect: Rectangle.RectangleLike,
  options?: Model.GetCellsInAreaOptions,
): Node[]

返回指定矩形区域的节点,当 options.stricttrue 时,要求节点的矩形区域完全包含指定的矩形,否则只需要相交即可。

getNodesUnderNode(...)

getNodesUnderNode(
  node: Node,
  options?: {
    by?: 'bbox' | Rectangle.KeyPoint
  },
): Node[]

返回与指定节点位置的节点,通过 options.by 选项来指定获取方式,包含:

  • nullbbox:返回与指定的节点矩形区域相交的节点
  • Rectangle.KeyPoint:返回包含矩形的某个关键点的节点,其中 Rectangle.KeyPoint 的取值为:

    • "center"
    • "origin"
    • "corner"
    • "topLeft"
    • "topCenter"
    • "topRight"
    • "bottomLeft"
    • "bottomCenter"
    • "bottomRight"
    • "leftMiddle"
    • "rightMiddle"

searchCell(...)

searchCell(cell: Cell, iterator: SearchIterator, options?: SearchOptions): this

从指定的节点/边开始进行遍历。

参数

名称类型必选默认值描述
cellCell节点/边。
iterator(cell: Cell, distance: number) => any遍历方法。
options.breadthFirstbooleanfalse是否使用广度优先搜索算法,默认使用深度优先搜索算法。
options.incomingboolean-是否遍历输入侧的邻居节点,默认遍历输入和输出侧的节点,incomingoutgoing 两个选项中,当 incomingtrue 时只遍历输入侧的节点。
options.outgoingboolean-是否遍历输出侧的邻居节点,默认遍历输入和输出侧的节点,incomingoutgoing 两个选项中,当 outgoingtrue 时只遍历输出侧的节点。
options.deepbooleanfalse是否递归遍历所有子节点/边,为 true 时将同时遍历所有子孙节点/边的邻居节点。
options.indirectbooleanfalse是否遍历哪些间接连接的邻居节点,即中间包含多条边(边与边连接)的邻居。

getShortestPath(...)

getShortestPath(
  source: Cell | string,
  target: Cell | string,
  options?: GetShortestPathOptions,
): string[]

获取节点之间的最短路径,返回最短路径上的节点 ID。

参数

名称类型必选默认值描述
sourceCell | string起始节点/边。
sourceCell | string终止节点/边。
options.directedbooleanfalse是否考虑方向性,为 true 时需要路径沿开始节点到终止节点的方向。
options.weight(u: string, v: string) => number(u, v) => 1距离权重算法,uv 为相邻的两个节点,默认距离为 1

getAllCellsBBox(...)

getAllCellsBBox(): Rectangle | null

返回画布上所有节点和边的矩形区域。

getCellsBBox(...)

getCellsBBox(cells: Cell[], options?: Cell.GetCellsBBoxOptions): Rectangle | null

返回指定节点和边构成的矩形区域。

参数

名称类型必选默认值描述
cellsCell[]节点和边数组。
options.deepbooleanfalse是否包含所有子孙节点和边。

toJSON(...)

toJSON(options?: ToJSONOptions): object

导出图中的节点和边,返回一个具有 { cells: [] } 结构的对象,其中 cells 数组按渲染顺序保存节点和边。

参数

名称类型必选默认值描述
options.deepdifffalse是否导出节点和边的差异数据(与节点和边的默认配置不同的部分)。

parseJSON(...)

将指定的数据转换为节点和边。

支持节点/边元数据数组,按照数组顺序返回创建的节点和边。

parseJSON(cells: (Node.Metadata | Edge.Metadata)[]): (Node | Edge)[]

或者提供一个包含 cellsnodesedges 的对象,按照 [...cells, ...nodes, ...edges] 顺序创建节点和边并返回。

parseJSON({
  cells?: (Node.Metadata | Edge.Metadata)[],
  nodes?: Node.Metadata[],
  edges?: Edge.Metadata[],
}): (Node | Edge)[]

fromJSON(...)

按照指定的 JSON 数据渲染节点和边。

支持节点/边元数据数组,按照数组顺序渲染节点和边。

fromJSON(data: (Node.Metadata | Edge.Metadata)[], options?: FromJSONOptions): this

或者提供一个包含 cellsnodesedges 的对象,按照 [...cells, ...nodes, ...edges] 顺序渲染。

fromJSON(
  data: {
    cells?: (Node.Metadata | Edge.Metadata)[],
    nodes?: Node.Metadata[],
    edges?: Edge.Metadata[],
  }, 
  options?: FromJSONOptions,
): this

options.silenttrue 时,不触发 cell:addednode:addededge:added 事件和画布重绘。