跳到主要内容

eo-draw-canvas

<eo-draw-canvas>

用于手工绘图的画布。

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

Examples

Basic

Playground

Line settings

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

Playground

Force layout

Playground

Dagre layout

Playground

Properties

NameDescriptionTypeDefaultRequired
cells

仅当初始化时使用,渲染后重新设置 cells 将无效。

InitialCell[]
layoutLayoutType
layoutOptionsLayoutOptions
defaultNodeSizeSizeTuple [100,20]
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

activeTarget 不为 null 时,隐藏其他跟该 activeTarget 无关的元素。

boolean
zoomableboolean true
scrollableboolean true
pannableboolean true
allowEdgeToAreaboolean false
dragBehavior

按住鼠标拖动时的行为:

  • none:无
  • lasso:绘制选区
  • grab:拖动画布
DragBehavior "none"
ctrlDragBehavior

按住 ctrl 键并按住鼠标拖动时的行为:

  • none:无
  • grab:拖动画布
CtrlDragBehavior "none"
scaleRangeRangeTuple
lineSettingsLineSettings
lineConnectorLineConnecterConf | boolean
doNotResetActiveTargetForSelector

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

string
doNotResetActiveTargetOutsideCanvas

在画布外点击时不重置 activeTarget

boolean

Events

NameDescriptionEvent Detail
activeTarget.changeActiveTarget | null
node.moveMoveCellPayload
cell.moveMoveCellPayload
cells.moveMoveCellPayload[]
cell.resizeResizeCellPayload
node.deleteCell
cell.deleteCell
cells.deleteCell[]
cell.contextmenuCellContextMenuDetail
edge.add

通过画布绘图的方式添加边(手动调用 addEdge 方法不会触发该事件)。

ConnectNodesDetail
edge.view.changeEdgeViewChangePayload
decorator.text.changeDecoratorTextChangeDetail
node.container.change

node节点跟容器组关系改变事件,有containerCell是新增关系,否则删除关系

MoveCellPayload[]
scale.change

缩放变化后,从素材库拖拽元素进画布时,拖拽图像应设置对应的缩放比例。

number

Methods

NameDescriptionParamsReturns
dropNodeparam_1: DropNodeInfoPromise<NodeCell | null>
dropDecoratorparam_1: DropDecoratorInfoPromise<DecoratorCell | null>
addNodesnodes: AddNodeInfo[]Promise<NodeCell[]>
addEdgeparam_1: AddEdgeInfoPromise<EdgeCell>
manuallyConnectNodessource: NodeIdPromise<ConnectNodesDetail>
updateCellscells: InitialCell[], ctx: UpdateCellsContextPromise<{ updated: Cell[] }>

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

MoveCellPayload

NameTypeRequiredDescription
type"node" | "decorator"
idNodeId
xnumber
ynumber
widthnumber
heightnumber
decoratorDecoratorType
containerCellDecoratorCell
guideLinesLineTuple[]

ResizeCellPayload

NameTypeRequiredDescription
type"node" | "decorator"
idNodeId
widthnumber
heightnumber

CellContextMenuDetail

NameTypeRequiredDescription
cellCell
clientXnumber
clientYnumber

ConnectNodesDetail

NameTypeRequiredDescription
sourceNodeCell | DecoratorCell
targetNodeCell | DecoratorCell
viewEdgeView

DecoratorTextChangeDetail

NameTypeRequiredDescription
idstring
viewDecoratorView

DropNodeInfo

extends AddNodeInfo
NameTypeRequiredDescription
positionPositionTuple

[PointerEvent::clientX, PointerEvent::clientY]

AddNodeInfo

NameTypeRequiredDescription
idNodeId
useBrickUseSingleBrickConf
dataunknown
sizeSizeTuple

DropDecoratorInfo

NameTypeRequiredDescription
decoratorDecoratorType
positionPositionTuple

[PointerEvent::clientX, PointerEvent::clientY]

textstring
directionDirection

AddEdgeInfo

NameTypeRequiredDescription
sourceNodeId
targetNodeId
dataunknown

UpdateCellsContext

NameTypeRequiredDescription
reason"add-related-nodes"
parentNodeId

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