跳到主要内容

eo-draw-canvas

<eo-draw-canvas>

用于手工绘图的画布。

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

Examples

Basic

Playground

Line labels

设置连线文字。

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.view.changeDecoratorViewChangePayload
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[] }>
reCenter
toggleLock

切换锁定状态。

如果目标中包含未锁定且可以锁定的元素,则将这些元素锁定; 否则,如果目标中包含已锁定且可以解锁的元素,则将这些元素解锁; 否则,不执行任何操作。

另,如果容器当前处于锁定状态,其子节点不可执行锁定或解锁操作。

target: ActiveTargetPromise<Cell[] | null> - 有更新的元素列表,其中仅 view 信息有变更
lock

锁定选中的目标。规则类似 toggleLock,但仅执行锁定操作。

target: ActiveTargetPromise<Cell[] | null> - 有更新的元素列表,其中仅 view 信息有变更
unlock

解锁选中的目标。规则类似 toggleLock,但仅执行解锁操作。

target: ActiveTargetPromise<Cell[] | null> - 有更新的元素列表,其中仅 view 信息有变更

Type references

BaseBrickCell

extends BaseCell
NameDescriptionTypeDefaultRequired
tag"brick"
useBrickUseSingleBrickConf

BaseCell

NameDescriptionTypeDefaultRequired
type"node" | "edge" | "decorator"
dataunknown

BaseNodeCell

extends BaseCell
NameDescriptionTypeDefaultRequired
type"node"
idNodeId
containerIdNodeId
viewNodeView

NodeView

extends InitialNodeView
NameDescriptionTypeDefaultRequired
widthnumber
heightnumber

InitialNodeView

NameDescriptionTypeDefaultRequired
xnumber
ynumber
widthnumber
heightnumber
lockedboolean

EdgeCell

extends BaseCell
NameDescriptionTypeDefaultRequired
type"edge"
sourceNodeId
targetNodeId
viewEdgeView

EdgeView

extends LineSettings
NameDescriptionTypeDefaultRequired
exitPositionNodePosition | null
entryPositionNodePosition | null
verticesNodePosition[] | null
xnumber
ynumber
widthnumber
heightnumber
lockedboolean

LineSettings

NameDescriptionTypeDefaultRequired
typeLineType
curveTypeCurveType

DecoratorCell

extends BaseCell
NameDescriptionTypeDefaultRequired
type"decorator"
decoratorDecoratorType
idNodeId
viewDecoratorView

DecoratorView

extends NodeView
NameDescriptionTypeDefaultRequired
text

用于文本装饰器和容器装饰器

string
style

设置文本/区域/方框/容器装饰器的样式

CSSProperties
titleStyle

设置容器装饰器的标题的样式

CSSProperties
direction

设置容器装饰器的文本位置

Direction
verticesNodePosition[] | null

LayoutOptionsManual

extends LayoutSnapOptions
NameDescriptionTypeDefaultRequired

LayoutSnapOptions

NameDescriptionTypeDefaultRequired
snap

Snap options. Setting to true means enable all snap options

boolean | SnapOptions

SnapOptions

NameDescriptionTypeDefaultRequired
grid

Snap to grid

boolean | SnapToGridOptions
object

Snap to object

boolean | SnapToObjectOptions

SnapToGridOptions

NameDescriptionTypeDefaultRequired
sizenumber10

SnapToObjectOptions

NameDescriptionTypeDefaultRequired
distancenumber5
positions

默认为 "all",在中心、上下左右共五个位置进行对齐。 设置为 "center" 表示只对中心进行对齐。 可以按顺序设置对齐位置,例如 "center top bottom" 表示只对中心和上下共三个位置进行对齐。

string"all"

LayoutOptionsDagre

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

BaseLayoutOptions

extends LayoutSnapOptions
NameDescriptionTypeDefaultRequired
nodePaddingPartialRectTuple
alignOrigin

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

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

AlignOrigin["center","center"]

LayoutOptionsForce

extends BaseLayoutOptions
NameDescriptionTypeDefaultRequired
collide

设置碰撞参数

boolean | ForceCollideOptions

ForceCollideOptions

NameDescriptionTypeDefaultRequired
radiusDiff

在计算节点碰撞关系时,节点半径 = 节点固有半径 + radiusDiff。

其中,节点固有半径 = 节点矩形对角线长度 / 2。

number18
strength

See https://d3js.org/d3-force/collide#collide_strength

number1
iterations

See https://d3js.org/d3-force/collide#collide_iterations

number1

NodeBrickConf

NameDescriptionTypeDefaultRequired
useBrickUseSingleBrickConf
ifstring | boolean | null

EdgeLineConf

extends BaseEdgeLineConf
NameDescriptionTypeDefaultRequired
ifstring | boolean | null

BaseEdgeLineConf

NameDescriptionTypeDefaultRequired
typeLineType
curveTypeCurveType
dashedboolean
dottedboolean
strokeWidthnumber
strokeColorstring
interactStrokeWidthnumber
parallelGapnumber
markersLineMarkerConf[]
callLabelOnDoubleClickstring
textTextOptions
labelLineLabelConf
showStartArrowboolean
showEndArrowboolean
animateLineAnimate
overridesEdgeLineConfOverrides
jumpsboolean

LineAnimate

NameDescriptionTypeDefaultRequired
useAnimateboolean
durationnumber

EdgeLineConfOverrides

NameDescriptionTypeDefaultRequired
activeEdgeLineConfOverridable
activeRelatedEdgeLineConfOverridable

EdgeLineConfOverridable

NameDescriptionTypeDefaultRequired
strokeWidthnumber
strokeColorstring
motionEdgeLineMotion

EdgeLineMotion

NameDescriptionTypeDefaultRequired
shapeEdgeLineMotionShape
speed

移动速度,单位 px/s,默认为 50

number
size

尺寸,默认为当前 strokeWidth * 4

number

ActiveTargetOfNode

NameDescriptionTypeDefaultRequired
type"node"
idNodeId

ActiveTargetOfEdge

NameDescriptionTypeDefaultRequired
type"edge"
sourceNodeId
targetNodeId

ActiveTargetOfDecorator

NameDescriptionTypeDefaultRequired
type"decorator"
idNodeId

ActiveTargetOfMulti

NameDescriptionTypeDefaultRequired
type"multi"
targetsActiveTargetOfSingular[]

MoveCellPayload

NameDescriptionTypeDefaultRequired
type"node" | "decorator"
idNodeId
xnumber
ynumber
widthnumber
heightnumber
decoratorDecoratorType
containerCellDecoratorCell
guideLinesLineTuple[]
sourceNodePosition
targetNodePosition
verticesNodePosition[]

ResizeCellPayload

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

CellContextMenuDetail

NameDescriptionTypeDefaultRequired
cellCell
clientXnumber
clientYnumber
locked

该元素或其容器是否处于锁定状态

boolean

ConnectNodesDetail

NameDescriptionTypeDefaultRequired
sourceNodeCell | DecoratorCell
targetNodeCell | DecoratorCell
viewEdgeView

DecoratorViewChangePayload

NameDescriptionTypeDefaultRequired
idNodeId
viewDecoratorView | DecoratorLineView

DecoratorTextChangeDetail

NameDescriptionTypeDefaultRequired
idstring
viewDecoratorView | DecoratorLineView

DropNodeInfo

extends AddNodeInfo
NameDescriptionTypeDefaultRequired
position

[PointerEvent::clientX, PointerEvent::clientY]

PositionTuple

AddNodeInfo

NameDescriptionTypeDefaultRequired
idNodeId
useBrickUseSingleBrickConf
dataunknown
sizeSizeTuple

DropDecoratorInfo

NameDescriptionTypeDefaultRequired
decoratorDecoratorType
position

[PointerEvent::clientX, PointerEvent::clientY]

PositionTuple
textstring
directionDirection
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

NameDescriptionTypeDefaultRequired
sourceNodeId
targetNodeId
dataunknown

UpdateCellsContext

NameDescriptionTypeDefaultRequired
reason"add-related-nodes"
parentNodeId

InitialCell

InitialNodeCell | EdgeCell | DecoratorCell

InitialNodeCell

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

NodeCell

NodeBrickCell

NodeBrickCell

BaseBrickCell & BaseNodeCell

NodeId

string

LineType

"straight" | "curve" | "polyline"

DecoratorType

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

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]

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