eo-draw-canvas

<eo-draw-canvas>

用于手工绘图的画布。

注意：将配套另外一个用于展示的画布构件。

Examples

Basic

Playground

Line labels

设置连线文字。

Playground

Line settings

设置属性 lineSettings 来调整新的连线的样式，例如使用折线或直线。注意，该设置不影响已有的 edge 的连线样式。

Playground

Force layout

Playground

Dagre layout

Playground

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 键并按住鼠标拖动时的行为： none：无 grab：拖动画布	CtrlDragBehavior	"none"
scaleRange		RangeTuple
lineSettings		LineSettings
lineConnector		LineConnecterConf | boolean
doNotResetActiveTargetForSelector	选择器，点击该选择器对应的元素时不重置 activeTarget。	string
doNotResetActiveTargetOutsideCanvas	在画布外点击时不重置 activeTarget。	boolean

Events

Name	Description	Event Detail
activeTarget.change		ActiveTarget | null
node.move		MoveCellPayload
cell.move		MoveCellPayload
cells.move		MoveCellPayload[]
cell.resize		ResizeCellPayload
node.delete		Cell
cell.delete		Cell
cells.delete		Cell[]
cell.contextmenu		CellContextMenuDetail
edge.add	通过画布绘图的方式添加边（手动调用 addEdge 方法不会触发该事件）。	ConnectNodesDetail
edge.view.change		EdgeViewChangePayload
decorator.view.change		DecoratorViewChangePayload
decorator.text.change		DecoratorTextChangeDetail
node.container.change	node节点跟容器组关系改变事件，有containerCell是新增关系，否则删除关系	MoveCellPayload[]
decorator.group.plus.click	分组容器点击加号事件，传入的参数为分组容器cell	DecoratorCell
scale.change	缩放变化后，从素材库拖拽元素进画布时，拖拽图像应设置对应的缩放比例。	number
canvas.contextmenu		CanvasContextMenuDetail
canvas.copy		void
canvas.paste		void
canvas.group		void
canvas.ungroup		void

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	锁定选中的目标。规则类似 toggleLock，但仅执行锁定操作。	target: ActiveTarget	Promise<Cell[] | null> - 有更新的元素列表，其中仅 view 信息有变更
unlock	解锁选中的目标。规则类似 toggleLock，但仅执行解锁操作。	target: ActiveTarget	Promise<Cell[] | null> - 有更新的元素列表，其中仅 view 信息有变更

Type references

BaseBrickCell

extends BaseCell

Name	Description	Type	Default	Required
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
groupId		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

NodeComponentCell

extends BaseNodeCell

Name	Description	Type	Default	Required
component		NodeComponent

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		✅
containerId		NodeId
groupId		NodeId
view		DecoratorView		✅

DecoratorView

extends NodeView

Name	Description	Type	Default	Required
text	用于文本装饰器和容器装饰器	string
style	设置文本/区域/方框/容器装饰器的样式	CSSProperties
titleStyle	设置容器装饰器的标题的样式	CSSProperties
direction	设置容器装饰器的文本位置	Direction
level	设置容器层级（从小到大排序）	number
vertices		NodePosition[] | null
usePlus	分组的+号功能	boolean

LayoutOptionsManual

extends BaseLayoutOptions

Name	Description	Type	Default	Required
initialLayout		InitialLayout

BaseLayoutOptions

Name	Description	Type	Default	Required
snap	Snap options. Setting to true means enable all snap options	boolean | SnapOptions
padding	画布内间距，自动居中时将预留此间距。	PartialRectTuple

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 BaseAutoLayoutOptions

Name	Description	Type	Default	Required
rankdir		"TB" | "BT" | "LR" | "RL"	"TB"
ranksep		number	50
edgesep		number	10
nodesep		number	50
align		"UL" | "UR" | "DL" | "DR"

BaseAutoLayoutOptions

extends BaseLayoutOptions

Name	Description	Type	Default	Required
nodePadding		PartialRectTuple
alignOrigin	根据节点什么位置进行对齐，支持关键字、百分比和比例值。 第一个值为 x 轴，第二个值为 y 轴。 使用数字时，表示相对于节点的宽高的比例。 注意，节点宽高将包含 nodePadding 的值。	AlignOrigin	["center","center"]

LayoutOptionsForce

extends BaseAutoLayoutOptions

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
component		NodeComponent
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	容器装饰器单元格,用于handleNodeContainedChange事件	DecoratorCell
groupId		NodeId
containerId		NodeId
guideLines		LineTuple[]
source		NodePosition
target		NodePosition
vertices		NodePosition[]

ResizeCellPayload

Name	Description	Type	Default	Required
type		"node" | "decorator"		✅
id		NodeId		✅
width		number		✅
height		number		✅

CellContextMenuDetail

extends CellClickDetail

Name	Description	Type	Default	Required
cell		Cell		✅
target		ActiveTarget		✅

CellClickDetail

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		✅

CanvasContextMenuDetail

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
containerId		NodeId
groupId		NodeId

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
parentNode		NodeCell

InitialCell

InitialNodeCell | EdgeCell | DecoratorCell

InitialNodeCell

Omit<NodeCell, "view"> & { view?: InitialNodeView }

NodeCell

NodeBrickCell | NodeComponentCell

NodeBrickCell

BaseBrickCell & BaseNodeCell

NodeId

string

NodeComponent

FunctionComponent<{ node: { id: NodeId; data: any; locked?: boolean }; refCallback?: (element: HTMLElement | null) => void }>

LineType

"straight" | "curve" | "polyline"

DecoratorType

"text" | "area" | "container" | "rect" | "line" | "group"

Direction

"top" | "right" | "bottom" | "left"

LayoutType

"manual" | "force" | "dagre" | undefined

LayoutOptions

LayoutOptionsManual | LayoutOptionsDagre | LayoutOptionsForce

InitialLayout

"default" | "layered-architecture" | "layered-staggered"

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">