NiceDag
NiceDag defines a set of API which can control the DAG diagram.
Properties
| Property | Description | Type |
|---|---|---|
| id | Id of DAG diagram | string |
| config | DAG diagram configuration | NiceDagConfig |
API
setScale
(scale:number) => void
The api can set scale of the diagram. The scale range is from 0 to 1.
center
(size: Size) => NiceDag
The api can make the diagram be the center position of its parent container.
Arguments
| Name | Optional | Description | Type |
|---|---|---|---|
| size | No | Size of its parent container | Size |
Returns
| Name | Description | Type |
|---|---|---|
| NiceDag | itself | NiceDag |
scrollTo
(id: string) => void
The api make the main layer scroll to the target id element.
setDirection
(direction: NiceDagDirection) => void
The api can set the direction of the DAG diagram.
Arguments
| Name | Optional | Description | Type |
|---|---|---|---|
| direction | No | Direction of the diagram | NiceDagDirection |
getScrollPosition
() => Point
The api can get the scroll distance of the main layer.
Return
| Name | Description | Type |
|---|---|---|
| Point | Point position | Point |
getAllNodes
() => IViewNode[]
The api can get all nodes and return an array of IViewNode.
Return
| Name | Description | Type |
|---|---|---|
| IViewNode[] | An array of IViewNode | IViewNode [] |
getAllEdges
() => IEdge[]
The api can gey all edges and return an array of IEdge.
Return
| Name | Description | Type |
|---|---|---|
| IEdge | IEdge | IEdge |
withNodes
(nodes: Node[]) => NiceDag
The api deal with init nodes and generate model and view.
Arguments
| Name | Optional | Description | Type |
|---|---|---|---|
| nodes | No | Nodes array | Node[] |
Return
| Name | Description | Type |
|---|---|---|
| NiceDag | itself | NiceDag |
API (Editable DAG)
The follow APIs are only applicable for editable DAG diagram.
startEditing
() => void
The api can make a DAG diagram editable. Usually, it is used to swipe editing feature (read-only vs editable).
stopEditing
() => void
The api can disable a DAG diagram editing feature.
prettify
() => void
The api can re-layout the DAG diagram according to the nodes and nodes' dependencies. If a node is editing, the node won't be impacted by the API.
addNode
(node: Node, point: Point, targetNodeId?: string) => void
The api can add a node to the target position. If targetNodeId is set, it will add a child node of targetNodeId.
Arguments
| Name | Optional | Description | Type |
|---|---|---|---|
| node | No | Node | IViewNode |
| point | Yes | Target positon | Point |
| targetNodeId | Yes | Parent node id | string |
addJointNode
(node: Node, point: Point, targetNodeId?: string) => void
The api can add a joint node to the target position. If targetNodeId is set, it will add a joint child node of targetNodeId.
Arguments
| Name | Optional | Description | Type |
|---|---|---|---|
| node | No | Node | IViewNode |
| point | Yes | Target positon | Point |
| targetNodeId | Yes | Parent node id | string |