用于手工绘图的画布。
注意:将配套另外一个用于展示的画布构件。
Examples
Basic
Line labels
设置连线文字。
Line settings
设置属性 lineSettings
来调整新的连线的样式,例如使用折线或直线。注意,该设置不影响已有的 edge 的连线样式。
Force layout
Dagre layout
Properties
Name | Description | Type | Default | Required |
---|
cells | 仅当初始化时使用,渲染后重新设置 cells 将无效。 | InitialCell[] | | |
layout | | LayoutType | | |
layoutOptions | | LayoutOptions | | |
defaultNodeSize | | SizeTuple | [100,20] | |
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 | 当 activeTarget 不为 null 时,隐藏其他跟该 activeTarget 无关的元素。 | boolean | | |
zoomable | | boolean | true | |
scrollable | | boolean | true | |
pannable | | boolean | true | |
allowEdgeToArea | | boolean | false | |
dragBehavior | 按住鼠标拖动时的行为:
none :无
lasso :绘制选区
grab :拖动画布
| DragBehavior | "none" | |
ctrlDragBehavior | 按住 ctrl 键并按住鼠标拖动时的行为:
| CtrlDragBehavior | "none" | |
scaleRange | | RangeTuple | | |
lineSettings | | LineSettings | | |
lineConnector | | LineConnecterConf | boolean | | |
doNotResetActiveTargetForSelector | 选择器,点击该选择器对应的元素时不重置 activeTarget 。 | string | | |
doNotResetActiveTargetOutsideCanvas | 在画布外点击时不重置 activeTarget 。 | boolean | | |
Events
Methods
Type references
BaseBrickCell
extends BaseCell
Name | Description | Type | Default | Required |
---|
tag | | "brick" | | |
useBrick | | UseSingleBrickConf | | |
BaseCell
Name | Description | Type | Default | Required |
---|
type | | "node" | "edge" | "decorator" | | ✅ |
data | | unknown | | |
BaseNodeCell
extends BaseCell
NodeView
extends InitialNodeView
Name | Description | Type | Default | Required |
---|
width | | number | | ✅ |
height | | number | | ✅ |
InitialNodeView
Name | Description | Type | Default | Required |
---|
x | | number | | ✅ |
y | | number | | ✅ |
width | | number | | |
height | | number | | |
locked | | boolean | | |
EdgeCell
extends BaseCell
EdgeView
extends LineSettings
Name | Description | Type | Default | Required |
---|
exitPosition | | NodePosition | null | | |
entryPosition | | NodePosition | null | | |
vertices | | NodePosition[] | null | | |
x | | number | | |
y | | number | | |
width | | number | | |
height | | number | | |
locked | | boolean | | |
LineSettings
Name | Description | Type | Default | Required |
---|
type | | LineType | | |
curveType | | CurveType | | |
DecoratorCell
extends BaseCell
DecoratorView
extends NodeView
Name | Description | Type | Default | Required |
---|
text | 用于文本装饰器和容器装饰器 | string | | |
style | 设置文本/区域/方框/容器装饰器的样式 | CSSProperties | | |
titleStyle | 设置容器装饰器的标题的样式 | CSSProperties | | |
direction | 设置容器装饰器的文本位置 | Direction | | |
vertices | | NodePosition[] | null | | |
LayoutOptionsManual
extends LayoutSnapOptions
Name | Description | Type | Default | Required |
---|
LayoutSnapOptions
Name | Description | Type | Default | Required |
---|
snap | Snap options. Setting to true means enable all snap options | boolean | SnapOptions | | |
SnapOptions
SnapToGridOptions
Name | Description | Type | Default | Required |
---|
size | | number | 10 | |
SnapToObjectOptions
Name | Description | Type | Default | Required |
---|
distance | | number | 5 | |
positions | 默认为 "all",在中心、上下左右共五个位置进行对齐。
设置为 "center" 表示只对中心进行对齐。
可以按顺序设置对齐位置,例如 "center top bottom" 表示只对中心和上下共三个位置进行对齐。 | string | "all" | |
LayoutOptionsDagre
extends BaseLayoutOptions
Name | Description | Type | Default | Required |
---|
rankdir | | "TB" | "BT" | "LR" | "RL" | | |
ranksep | | number | | |
edgesep | | number | | |
nodesep | | number | | |
align | | "UL" | "UR" | "DL" | "DR" | | |
BaseLayoutOptions
extends LayoutSnapOptions
Name | Description | Type | Default | Required |
---|
nodePadding | | PartialRectTuple | | |
alignOrigin | 根据节点什么位置进行对齐,支持关键字、百分比和比例值。
第一个值为 x 轴,第二个值为 y 轴。
使用数字时,表示相对于节点的宽高的比例。
注意,节点宽高将包含 nodePadding 的值。 | AlignOrigin | ["center","center"] | |
LayoutOptionsForce
extends BaseLayoutOptions
ForceCollideOptions
Name | Description | Type | Default | Required |
---|
radiusDiff | 在计算节点碰撞关系时,节点半径 = 节点固有半径 + radiusDiff。
其中,节点固有半径 = 节点矩形对角线长度 / 2。 | number | 18 | |
strength | See https://d3js.org/d3-force/collide#collide_strength | number | 1 | |
iterations | See https://d3js.org/d3-force/collide#collide_iterations | number | 1 | |
NodeBrickConf
Name | Description | Type | Default | Required |
---|
useBrick | | UseSingleBrickConf | | ✅ |
if | | string | boolean | null | | |
EdgeLineConf
extends BaseEdgeLineConf
Name | Description | Type | Default | Required |
---|
if | | string | boolean | null | | |
BaseEdgeLineConf
Name | Description | Type | Default | Required |
---|
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 | | |
overrides | | EdgeLineConfOverrides | | |
jumps | | boolean | | |
LineAnimate
Name | Description | Type | Default | Required |
---|
useAnimate | | boolean | | ✅ |
duration | | number | | ✅ |
EdgeLineConfOverrides
EdgeLineConfOverridable
Name | Description | Type | Default | Required |
---|
strokeWidth | | number | | |
strokeColor | | string | | |
motion | | EdgeLineMotion | | |
EdgeLineMotion
Name | Description | Type | Default | Required |
---|
shape | | EdgeLineMotionShape | | |
speed | 移动速度,单位 px/s,默认为 50 | number | | |
size | 尺寸,默认为当前 strokeWidth * 4 | number | | |
ActiveTargetOfNode
Name | Description | Type | Default | Required |
---|
type | | "node" | | ✅ |
id | | NodeId | | ✅ |
ActiveTargetOfEdge
Name | Description | Type | Default | Required |
---|
type | | "edge" | | ✅ |
source | | NodeId | | ✅ |
target | | NodeId | | ✅ |
ActiveTargetOfDecorator
Name | Description | Type | Default | Required |
---|
type | | "decorator" | | ✅ |
id | | NodeId | | ✅ |
ActiveTargetOfMulti
MoveCellPayload
Name | Description | Type | Default | Required |
---|
type | | "node" | "decorator" | | ✅ |
id | | NodeId | | ✅ |
x | | number | | ✅ |
y | | number | | ✅ |
width | | number | | |
height | | number | | |
decorator | | DecoratorType | | |
containerCell | | DecoratorCell | | |
guideLines | | LineTuple[] | | |
source | | NodePosition | | |
target | | NodePosition | | |
vertices | | NodePosition[] | | |
ResizeCellPayload
Name | Description | Type | Default | Required |
---|
type | | "node" | "decorator" | | ✅ |
id | | NodeId | | ✅ |
width | | number | | ✅ |
height | | number | | ✅ |
extends CellClickDetail
CellClickDetail
Name | Description | Type | Default | Required |
---|
cell | | Cell | | ✅ |
clientX | | number | | ✅ |
clientY | | number | | ✅ |
locked | 该元素或其容器是否处于锁定状态 | boolean | | |
ConnectNodesDetail
DecoratorViewChangePayload
DecoratorTextChangeDetail
Name | Description | Type | Default | Required |
---|
id | | string | | ✅ |
view | | DecoratorView | DecoratorLineView | | ✅ |
Name | Description | Type | Default | Required |
---|
clientX | | number | | ✅ |
clientY | | number | | ✅ |
view | | { x: number; y: number } | | ✅ |
DropNodeInfo
extends AddNodeInfo
Name | Description | Type | Default | Required |
---|
position | [PointerEvent::clientX, PointerEvent::clientY] | PositionTuple | | ✅ |
AddNodeInfo
Name | Description | Type | Default | Required |
---|
id | | NodeId | | ✅ |
useBrick | | UseSingleBrickConf | | |
data | | unknown | | |
size | | SizeTuple | | |
DropDecoratorInfo
Name | Description | Type | Default | Required |
---|
decorator | | DecoratorType | | ✅ |
position | [PointerEvent::clientX, PointerEvent::clientY] | PositionTuple | | ✅ |
text | | string | | |
direction | | Direction | | |
source | Line decorator only: setting initial source position related to (0, 0) | NodePosition | {x:-30,y:30} | |
target | Line decorator only: setting initial source position related to (0, 0) | NodePosition | {x:30,y:-30} | |
view | Override decorator view settings | DecoratorView & DecoratorLineView | | |
AddEdgeInfo
Name | Description | Type | Default | Required |
---|
source | | NodeId | | ✅ |
target | | NodeId | | ✅ |
data | | unknown | | |
UpdateCellsContext
Name | Description | Type | Default | Required |
---|
reason | | "add-related-nodes" | | ✅ |
parent | | NodeId | | ✅ |
InitialCell
InitialNodeCell | EdgeCell | DecoratorCell
InitialNodeCell
Omit<NodeCell, "view"> & { view?: InitialNodeView }
NodeCell
NodeBrickCell
NodeBrickCell
BaseBrickCell & BaseNodeCell
NodeId
string
LineType
"straight" | "curve" | "polyline"
DecoratorType
"text" | "area" | "container" | "rect" | "line"
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]
EdgeLineMotionShape
"dot" | "triangle" | "none"
ActiveTarget
ActiveTargetOfSingular | ActiveTargetOfMulti
ActiveTargetOfSingular
ActiveTargetOfNode | ActiveTargetOfEdge | ActiveTargetOfDecorator
DragBehavior
"none" | "lasso" | "grab"
CtrlDragBehavior
"none" | "grab"
RangeTuple
[min: number, max: number]
LineConnecterConf
Pick<BaseEdgeLineConf, "strokeWidth" | "strokeColor" | "showStartArrow" | "showEndArrow"> & { editingStrokeColor?: string }
LineTuple
[start: PositionTuple, end: PositionTuple]
Cell
NodeCell | EdgeCell | DecoratorCell
EdgeViewChangePayload
Pick<EdgeCell, "source" | "target" | "view">