eo-draw-canvas
<eo-draw-canvas>
用于手工绘图的画布。
注意:将配套另外一个用于展示的画布构件。
Examples
Basic
Line labels
设置连线文字。
Line settings
设置属性 lineSettings
来调整新的连线的样式,例如使用折线或直线。注意,该设置不影响已有的 edge 的连线样式。
Force layout
Dagre layout
Properties
Name | Description | Type | Default | Required |
---|---|---|---|---|
cells | 仅当初始化时使用,渲染后重新设置 | InitialCell[] | ||
layout | LayoutType | |||
layoutOptions | LayoutOptions | |||
defaultNodeSize | SizeTuple | [100,20] | ||
defaultNodeBricks | NodeBrickConf[] | |||
degradedThreshold | 当节点数量达到或超过 | number | 500 | |
degradedNodeLabel | 设置节点将降级展示时显示的名称。 | string | "<% DATA.node.id %>" | |
defaultEdgeLines | 使用条件判断设置默认的边对应的连线。在
| EdgeLineConf[] | ||
activeTarget | ActiveTarget | null | |||
fadeUnrelatedCells | 当 | boolean | ||
zoomable | boolean | true | ||
scrollable | boolean | true | ||
pannable | boolean | true | ||
allowEdgeToArea | boolean | false | ||
dragBehavior | 按住鼠标拖动时的行为:
| DragBehavior | "none" | |
ctrlDragBehavior | 按住 ctrl 键并按住鼠标拖动时的行为:
| CtrlDragBehavior | "none" | |
scaleRange | RangeTuple | |||
lineSettings | LineSettings | |||
lineConnector | LineConnecterConf | boolean | |||
doNotResetActiveTargetForSelector | 选择器,点击该选择器对应的元素时不重置 | string | ||
doNotResetActiveTargetOutsideCanvas | 在画布外点击时不重置 | boolean |
Events
Name | Description | Event Detail |
---|---|---|
activeTarget.change | ActiveTarget | null | |
| MoveCellPayload | |
cell.move | MoveCellPayload | |
cells.move | MoveCellPayload[] | |
cell.resize | ResizeCellPayload | |
| Cell | |
cell.delete | Cell | |
cells.delete | Cell[] | |
cell.contextmenu | CellContextMenuDetail | |
edge.add | 通过画布绘图的方式添加边(手动调用 | ConnectNodesDetail |
edge.view.change | EdgeViewChangePayload | |
decorator.view.change | DecoratorViewChangePayload | |
decorator.text.change | DecoratorTextChangeDetail | |
node.container.change | node节点跟容器组关系改变事件,有containerCell是新增关系,否则删除关系 | MoveCellPayload[] |
scale.change | 缩放变化后,从素材库拖拽元素进画布时,拖拽图像应设置对应的缩放比例。 | number |
Methods
Name | Description | Params | Returns |
---|---|---|---|
dropNode | param_1: DropNodeInfo | Promise<NodeCell | null> | |
dropDecorator | param_1: DropDecoratorInfo | Promise<DecoratorCell | null> | |
addNodes | nodes: AddNodeInfo[] | Promise<NodeCell[]> | |
addEdge | param_1: AddEdgeInfo | Promise<EdgeCell> | |
manuallyConnectNodes | source: NodeId | Promise<ConnectNodesDetail> | |
updateCells | cells: InitialCell[] , ctx: UpdateCellsContext | Promise<{ updated: Cell[] }> | |
reCenter | |||
toggleLock | 切换锁定状态。 如果目标中包含未锁定且可以锁定的元素,则将这些元素锁定; 否则,如果目标中包含已锁定且可以解锁的元素,则将这些元素解锁; 否则,不执行任何操作。 另,如果容器当前处于锁定状态,其子节点不可执行锁定或解锁操作。 | target: ActiveTarget | Promise<Cell[] | null> - 有更新的元素列表,其中仅 view 信息有变更 |
lock | 锁定选中的目标。规则类似 | target: ActiveTarget | Promise<Cell[] | null> - 有更新的元素列表,其中仅 view 信息有变更 |
unlock | 解锁选中的目标。规则类似 | target: ActiveTarget | Promise<Cell[] | null> - 有更新的元素列表,其中仅 view 信息有变更 |
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
Name | Description | Type | Default | Required |
---|---|---|---|---|
type | "node" | ✅ | ||
id | NodeId | ✅ | ||
containerId | NodeId | |||
view | NodeView | ✅ |
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
Name | Description | Type | Default | Required |
---|---|---|---|---|
type | "edge" | ✅ | ||
source | NodeId | ✅ | ||
target | NodeId | ✅ | ||
view | EdgeView |
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
Name | Description | Type | Default | Required |
---|---|---|---|---|
type | "decorator" | ✅ | ||
decorator | DecoratorType | ✅ | ||
id | NodeId | ✅ | ||
view | DecoratorView | ✅ |
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
Name | Description | Type | Default | Required |
---|---|---|---|---|
grid | Snap to grid | boolean | SnapToGridOptions | ||
object | Snap to object | boolean | SnapToObjectOptions |
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
Name | Description | Type | Default | Required |
---|---|---|---|---|
collide | 设置碰撞参数 | boolean | ForceCollideOptions |
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
Name | Description | Type | Default | Required |
---|---|---|---|---|
active | EdgeLineConfOverridable | |||
activeRelated | EdgeLineConfOverridable |
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
Name | Description | Type | Default | Required |
---|---|---|---|---|
type | "multi" | ✅ | ||
targets | ActiveTargetOfSingular[] | ✅ |
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 | ✅ |
CellContextMenuDetail
Name | Description | Type | Default | Required |
---|---|---|---|---|
cell | Cell | ✅ | ||
clientX | number | ✅ | ||
clientY | number | ✅ | ||
locked | 该元素或其容器是否处于锁定状态 | boolean |
ConnectNodesDetail
Name | Description | Type | Default | Required |
---|---|---|---|---|
source | NodeCell | DecoratorCell | ✅ | ||
target | NodeCell | DecoratorCell | ✅ | ||
view | EdgeView |
DecoratorViewChangePayload
Name | Description | Type | Default | Required |
---|---|---|---|---|
id | NodeId | ✅ | ||
view | DecoratorView | DecoratorLineView | ✅ |
DecoratorTextChangeDetail
Name | Description | Type | Default | Required |
---|---|---|---|---|
id | string | ✅ | ||
view | DecoratorView | DecoratorLineView | ✅ |
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">