跳到主要内容

eo-display-canvas

<eo-display-canvas>

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

Examples

Basic

Playground

Force layout

Playground

Dagre layout

Playground

Degraded diagram

Playground

Properties

NameDescriptionTypeDefaultRequired
cells

用于查看的画布可以更新 cells 属性。

InitialCell[]
layoutLayoutType
layoutOptionsLayoutOptions
defaultNodeSizeSizeTuple [DEFAULT_NODE_SIZE, DEFAULT_NODE_SIZE]
defaultNodeBricksNodeBrickConf[]
degradedThreshold

当节点数量达到或超过 degradedThreshold 时,节点将被降级展示。

number 500
degradedNodeLabel

设置节点将降级展示时显示的名称。

string "<% DATA.node.id %>"
defaultEdgeLines

使用条件判断设置默认的边对应的连线。在 if 表达式中 DATA{ edge },例如:

defaultEdgeLines:
  - if: <% DATA.edge.data?.virtual %>
    dashed: true
EdgeLineConf[]
activeTargetActiveTarget | null
fadeUnrelatedCells

当鼠标悬浮到某节点上时,隐藏其他跟该节点无关的元素。

boolean
zoomableboolean true
scrollableboolean true
pannableboolean true
scaleRangeRangeTuple
hideZoomBar

隐藏右下角放大缩小的控制栏

boolean
autoCenterWhenCellsChange

每当 cells 改变时,重新自动居中

boolean
doNotResetActiveTargetForSelector

选择器,点击该选择器对应的元素时不重置 activeTarget

string
doNotResetActiveTargetOutsideCanvas

在画布外点击时不重置 activeTarget

boolean

Events

NameDescriptionEvent Detail
activeTarget.changeActiveTarget | null
cell.contextmenuCellContextMenuDetail
cell.clickCellContextMenuDetail

Type references

BaseBrickCell

extends BaseCell
NameTypeRequiredDescription
tag"brick"
useBrickUseSingleBrickConf

BaseCell

NameTypeRequiredDescription
type"node" | "edge" | "decorator"
dataunknown

BaseNodeCell

extends BaseCell
NameTypeRequiredDescription
type"node"
idNodeId
containerIdNodeId
viewNodeView

NodeView

extends InitialNodeView
NameTypeRequiredDescription
widthnumber
heightnumber

InitialNodeView

NameTypeRequiredDescription
xnumber
ynumber
widthnumber
heightnumber

BaseEdgeCell

extends BaseCell
NameTypeRequiredDescription
type"edge"
sourceNodeId
targetNodeId
viewEdgeView

EdgeView

extends LineSettings
NameTypeRequiredDescription
exitPositionNodePosition | null
entryPositionNodePosition | null
verticesNodePosition[] | null

LineSettings

NameTypeRequiredDescription
typeLineType
curveTypeCurveType

DecoratorCell

extends BaseCell
NameTypeRequiredDescription
type"decorator"
decoratorDecoratorType
idNodeId
viewDecoratorView

DecoratorView

extends NodeView
NameTypeRequiredDescription
textstring
directionDirection

LayoutOptionsManual

extends LayoutSnapOptions
NameTypeRequiredDescription

LayoutSnapOptions

NameTypeRequiredDescription
snapboolean | SnapOptions

Snap options. Setting to true means enable all snap options

SnapOptions

NameTypeRequiredDescription
gridboolean | SnapToGridOptions

Snap to grid

objectboolean | SnapToObjectOptions

Snap to object

SnapToGridOptions

NameTypeRequiredDescription
sizenumber

SnapToObjectOptions

NameTypeRequiredDescription
distancenumber

LayoutOptionsDagre

extends BaseLayoutOptions
NameTypeRequiredDescription
rankdir"TB" | "BT" | "LR" | "RL"
ranksepnumber
edgesepnumber
nodesepnumber
align"UL" | "UR" | "DL" | "DR"

BaseLayoutOptions

extends LayoutSnapOptions
NameTypeRequiredDescription
nodePaddingPartialRectTuple
alignOriginAlignOrigin

根据节点什么位置进行对齐,支持关键字、百分比和比例值。 第一个值为 x 轴,第二个值为 y 轴。 使用数字时,表示相对于节点的宽高的比例。

注意,节点宽高将包含 nodePadding 的值。

LayoutOptionsForce

extends BaseLayoutOptions
NameTypeRequiredDescription
collideboolean | ForceCollideOptions

ForceCollideOptions

NameTypeRequiredDescription
radiusDiffnumber
strengthnumber
iterationsnumber

NodeBrickConf

NameTypeRequiredDescription
useBrickUseSingleBrickConf
ifstring | boolean | null

EdgeLineConf

extends BaseEdgeLineConf
NameTypeRequiredDescription
ifstring | boolean | null

BaseEdgeLineConf

NameTypeRequiredDescription
typeLineType
curveTypeCurveType
dashedboolean
dottedboolean
strokeWidthnumber
strokeColorstring
interactStrokeWidthnumber
parallelGapnumber
markersLineMarkerConf[]
showStartArrowboolean

已废弃,使用markers代替,配置了对应的箭头测则显示

showEndArrowboolean

已废弃

animateLineAnimate

LineAnimate

NameTypeRequiredDescription
useAnimateboolean
durationnumber

ActiveTargetOfNode

NameTypeRequiredDescription
type"node"
idNodeId

ActiveTargetOfEdge

NameTypeRequiredDescription
type"edge"
sourceNodeId
targetNodeId

ActiveTargetOfDecorator

NameTypeRequiredDescription
type"decorator"
idNodeId

ActiveTargetOfMulti

NameTypeRequiredDescription
type"multi"
targetsActiveTargetOfSingular[]

CellContextMenuDetail

NameTypeRequiredDescription
cellCell
clientXnumber
clientYnumber

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

RangeTuple

[min: number, max: number]

Cell

NodeCell | EdgeCell | DecoratorCell