eo-display-canvas

<eo-display-canvas>

用于展示查看的画布构件。

Examples

Basic

Playground

Force layout

Playground

Dagre layout

Playground

Degraded diagram

Playground

Properties

Name	Description	Type	Default	Required
cells	用于查看的画布可以更新 cells 属性。	InitialCell[]
layout		LayoutType
layoutOptions		LayoutOptions
autoSize		AutoSize
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
extraStyleTexts		string[]

Events

Name	Description	Event Detail
activeTarget.change		ActiveTarget | null
cell.contextmenu		CellContextMenuDetail
cell.click		CellContextMenuDetail

Methods

Name	Description	Params	Returns
center

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

AutoSize

Name	Description	Type	Default	Required
width		"fit-content"
minWidth		number
maxWidth		number
height		"fit-content"
minHeight		number
maxHeight		number

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[]		✅

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

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

RangeTuple

[min: number, max: number]

Cell

NodeCell | EdgeCell | DecoratorCell