用于展示查看的画布构件。
Examples
Basic
Force layout
Dagre layout
Degraded diagram
Properties
| Name | Description | Type | Default | Required |
|---|
cells | 用于查看的画布可以更新 cells 属性。 | InitialCell[] | | |
layout | | LayoutType | | |
layoutOptions | | LayoutOptions | | |
defaultNodeSize | | SizeTuple | [DEFAULT_NODE_SIZE, DEFAULT_NODE_SIZE] | |
defaultNodeBricks | | NodeBrickConf[] | | |
degradedThreshold | 当节点数量达到或超过 degradedThreshold 时，节点将被降级展示。 | number | 500 | |
degradedNodeLabel | 设置节点将降级展示时显示的名称。 | string | "<% DATA.node.id %>" | |
defaultEdgeLines | 使用条件判断设置默认的边对应的连线。在 if 表达式中 DATA 为 { edge }，例如：
defaultEdgeLines:
- if: <% DATA.edge.data?.virtual %>
dashed: true
| EdgeLineConf[] | | |
activeTarget | | ActiveTarget | null | | |
fadeUnrelatedCells | 当鼠标悬浮到某节点上时，隐藏其他跟该节点无关的元素。 | boolean | | |
zoomable | | boolean | true | |
scrollable | | boolean | true | |
pannable | | boolean | true | |
scaleRange | | RangeTuple | | |
hideZoomBar | 隐藏右下角放大缩小的控制栏 | boolean | | |
autoCenterWhenCellsChange | 每当 cells 改变时，重新自动居中 | boolean | | |
doNotResetActiveTargetForSelector | 选择器，点击该选择器对应的元素时不重置 activeTarget。 | string | | |
doNotResetActiveTargetOutsideCanvas | 在画布外点击时不重置 activeTarget。 | boolean | | |
Events
Type references
BaseBrickCell
extends BaseCell
| Name | Type | Required | Description |
|---|
tag | "brick" | | |
useBrick | UseSingleBrickConf | | |
BaseCell
| Name | Type | Required | Description |
|---|
type | "node" | "edge" | "decorator" | ✅ | |
data | unknown | | |
BaseNodeCell
extends BaseCell
NodeView
extends InitialNodeView
| Name | Type | Required | Description |
|---|
width | number | ✅ | |
height | number | ✅ | |
InitialNodeView
| Name | Type | Required | Description |
|---|
x | number | ✅ | |
y | number | ✅ | |
width | number | | |
height | number | | |
BaseEdgeCell
extends BaseCell
EdgeView
extends LineSettings
| Name | Type | Required | Description |
|---|
exitPosition | NodePosition | null | | |
entryPosition | NodePosition | null | | |
vertices | NodePosition[] | null | | |
LineSettings
| Name | Type | Required | Description |
|---|
type | LineType | | |
curveType | CurveType | | |
DecoratorCell
extends BaseCell
DecoratorView
extends NodeView
| Name | Type | Required | Description |
|---|
text | string | | |
direction | Direction | | |
LayoutOptionsManual
extends LayoutSnapOptions
| Name | Type | Required | Description |
|---|
LayoutSnapOptions
| Name | Type | Required | Description |
|---|
snap | boolean | SnapOptions | | Snap options. Setting to true means enable all snap options |
SnapOptions
SnapToGridOptions
| Name | Type | Required | Description |
|---|
size | number | | |
SnapToObjectOptions
| Name | Type | Required | Description |
|---|
distance | number | | |
LayoutOptionsDagre
extends BaseLayoutOptions
| Name | Type | Required | Description |
|---|
rankdir | "TB" | "BT" | "LR" | "RL" | | |
ranksep | number | | |
edgesep | number | | |
nodesep | number | | |
align | "UL" | "UR" | "DL" | "DR" | | |
BaseLayoutOptions
extends LayoutSnapOptions
| Name | Type | Required | Description |
|---|
nodePadding | PartialRectTuple | | |
alignOrigin | AlignOrigin | | 根据节点什么位置进行对齐，支持关键字、百分比和比例值。
第一个值为 x 轴，第二个值为 y 轴。
使用数字时，表示相对于节点的宽高的比例。
注意，节点宽高将包含 nodePadding 的值。 |
LayoutOptionsForce
extends BaseLayoutOptions
ForceCollideOptions
| Name | Type | Required | Description |
|---|
radiusDiff | number | | |
strength | number | | |
iterations | number | | |
NodeBrickConf
| Name | Type | Required | Description |
|---|
useBrick | UseSingleBrickConf | ✅ | |
if | string | boolean | null | | |
EdgeLineConf
extends BaseEdgeLineConf
| Name | Type | Required | Description |
|---|
if | string | boolean | null | | |
BaseEdgeLineConf
| Name | Type | Required | Description |
|---|
type | LineType | | |
curveType | CurveType | | |
dashed | boolean | | |
dotted | boolean | | |
strokeWidth | number | | |
strokeColor | string | | |
interactStrokeWidth | number | | |
parallelGap | number | | |
markers | LineMarkerConf[] | | |
callLabelOnDoubleClick | string | | |
text | TextOptions | | |
label | LineLabelConf | | |
showStartArrow | boolean | | |
showEndArrow | boolean | | |
animate | LineAnimate | | |
LineAnimate
| Name | Type | Required | Description |
|---|
useAnimate | boolean | ✅ | |
duration | number | ✅ | |
ActiveTargetOfNode
| Name | Type | Required | Description |
|---|
type | "node" | ✅ | |
id | NodeId | ✅ | |
ActiveTargetOfEdge
| Name | Type | Required | Description |
|---|
type | "edge" | ✅ | |
source | NodeId | ✅ | |
target | NodeId | ✅ | |
ActiveTargetOfDecorator
| Name | Type | Required | Description |
|---|
type | "decorator" | ✅ | |
id | NodeId | ✅ | |
ActiveTargetOfMulti
| Name | Type | Required | Description |
|---|
cell | Cell | ✅ | |
clientX | number | ✅ | |
clientY | number | ✅ | |
InitialCell
InitialNodeCell | EdgeCell | DecoratorCell
InitialNodeCell
Omit<NodeCell, "view"> & { view?: InitialNodeView }
NodeCell
NodeBrickCell
NodeBrickCell
BaseBrickCell & BaseNodeCell
NodeId
string
EdgeCell
BaseEdgeCell
LineType
"straight" | "curve" | "polyline"
DecoratorType
"text" | "area" | "container"
Direction
"top" | "right" | "bottom" | "left"
LayoutType
"manual" | "force" | "dagre" | undefined
LayoutOptions
LayoutOptionsManual | LayoutOptionsDagre | LayoutOptionsForce
AlignOrigin
[x: string | number, y: string | number]
SizeTuple
[width: number, height: number]
ActiveTarget
ActiveTargetOfSingular | ActiveTargetOfMulti
ActiveTargetOfSingular
ActiveTargetOfNode | ActiveTargetOfEdge | ActiveTargetOfDecorator
RangeTuple
[min: number, max: number]
Cell
NodeCell | EdgeCell | DecoratorCell