eo-draw-canvas

<eo-draw-canvas>

用于手工绘图的画布。

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

Examples

Basic

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

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.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[] }>

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

Name	Type	Required	Description
type	"node"	✅
id	NodeId	✅
containerId	NodeId
view	NodeView	✅

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

Name	Type	Required	Description
type	"edge"	✅
source	NodeId	✅
target	NodeId	✅
view	EdgeView

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

Name	Type	Required	Description
type	"decorator"	✅
decorator	DecoratorType	✅
id	NodeId	✅
view	DecoratorView	✅

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

Name	Type	Required	Description
grid	boolean | SnapToGridOptions		Snap to grid
object	boolean | SnapToObjectOptions		Snap to object

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

Name	Type	Required	Description
collide	boolean | ForceCollideOptions

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[]
showStartArrow	boolean		已废弃，使用markers代替，配置了对应的箭头测则显示
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
type	"multi"	✅
targets	ActiveTargetOfSingular[]	✅

MoveCellPayload

Name	Type	Required	Description
type	"node" | "decorator"	✅
id	NodeId	✅
x	number	✅
y	number	✅
width	number
height	number
decorator	DecoratorType
containerCell	DecoratorCell
guideLines	LineTuple[]

ResizeCellPayload

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

CellContextMenuDetail

Name	Type	Required	Description
cell	Cell	✅
clientX	number	✅
clientY	number	✅

ConnectNodesDetail

Name	Type	Required	Description
source	NodeCell | DecoratorCell	✅
target	NodeCell | DecoratorCell	✅
view	EdgeView

DecoratorTextChangeDetail

Name	Type	Required	Description
id	string	✅
view	DecoratorView	✅

DropNodeInfo

extends AddNodeInfo

Name	Type	Required	Description
position	PositionTuple	✅	[PointerEvent::clientX, PointerEvent::clientY]

AddNodeInfo

Name	Type	Required	Description
id	NodeId	✅
useBrick	UseSingleBrickConf
data	unknown
size	SizeTuple

DropDecoratorInfo

Name	Type	Required	Description
decorator	DecoratorType	✅
position	PositionTuple	✅	[PointerEvent::clientX, PointerEvent::clientY]
text	string
direction	Direction

AddEdgeInfo

Name	Type	Required	Description
source	NodeId	✅
target	NodeId	✅
data	unknown

UpdateCellsContext

Name	Type	Required	Description
reason	"add-related-nodes"	✅
parent	NodeId	✅

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

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