eo-diagram

<eo-diagram>

构件 eo-diagram

Examples

Basic

Playground

Page Architecture

Playground

Force

Playground

Properties

Name	Description	Type	Default	Required
layout		"dagre" | "force"		✅
nodes		DiagramNode[]
edges		DiagramEdge[]
nodeBricks		NodeBrickConf[]
lines		LineConf[]
layoutOptions		LayoutOptions
activeTarget		ActiveTarget | null
disableKeyboardAction		boolean
connectNodes		ConnectNodesOptions
dragNodes		DragNodesOptions
zoomable		boolean	true
scrollable		boolean	true
pannable		boolean	true
scaleRange		RangeTuple

Events

Name	Description	Event Detail
activeTarget.change		ActiveTarget | null
node.delete		DiagramNode
edge.delete		DiagramEdge
line.click		LineTarget
line.dblclick		LineTarget
nodes.connect		ConnectLineDetail

Methods

Name	Description	Params	Returns
callOnLineLabel		id: string, method: string, param_3: unknown[]

Type references

DiagramNode

Name	Description	Type	Default	Required
id		DiagramNodeId		✅
type		string
[key: string]		unknown

DiagramEdge

Name	Description	Type	Default	Required
source		string		✅
target		string		✅
type		string
[key: string]		unknown

NodeBrickConf

Name	Description	Type	Default	Required
useBrick		UseSingleBrickConf		✅
nodeType		string | string[]
if		string | boolean | null

LineConf

extends LineConfOverridable

Name	Description	Type	Default	Required
edgeType		string | string[]
if		string | boolean | null
draw		boolean
type		LineType
interactable		boolean
curveType		CurveType
arrow		boolean
text		TextOptions | TextOptions[]
label		LineLabelConf | LineLabelConf[]
cursor		React.CSSProperties["cursor"]
overrides		LineConfOverrides
markers		LineMarkerConf[]

TextOptions

Name	Description	Type	Default	Required
content		string		✅
style		CSSProperties
placement		LineLabelPlacement
offset		number

LineLabelConf

Name	Description	Type	Default	Required
if		string | boolean | null
useBrick		UseSingleBrickConf		✅
placement		LineLabelPlacement
offset	当 placement 设置为 start 或 end 时，默认情况下，文本中心点与连线起点或终点重合。 设置 offset 表示文本中心点距离起点或终点在连线上的偏移量。	number

LineConfOverrides

Name	Description	Type	Default	Required
active		LineConfOverridable
activeRelated		LineConfOverridable

LineConfOverridable

Name	Description	Type	Default	Required
strokeColor		string
strokeWidth		number
interactStrokeWidth		number

LineMarkerConf

Name	Description	Type	Default	Required
placement		LineMarkerPlacement
type		LineMarkerType

LayoutOptionsDagre

extends BaseLayoutOptions

Name	Description	Type	Default	Required
rankdir		"TB" | "BT" | "LR" | "RL"
ranksep		number
edgesep		number
nodesep		number
align		"UL" | "UR" | "DL" | "DR"

BaseLayoutOptions

Name	Description	Type	Default	Required
nodePadding		PartialRectTuple

LayoutOptionsForce

extends BaseLayoutOptions

Name	Description	Type	Default	Required
dummyNodesOnEdges		number
collide		boolean | ForceCollideOptions

ForceCollideOptions

Name	Description	Type	Default	Required
dummyRadius		number
radiusDiff		number
strength		number
iterations		number

ActiveTargetOfNode

Name	Description	Type	Default	Required
type		"node"		✅
nodeId		string		✅

ActiveTargetOfEdge

Name	Description	Type	Default	Required
type		"edge"		✅
edge		DiagramEdge		✅

ConnectNodesOptions

extends NodesFilterOptions

Name	Description	Type	Default	Required
strokeColor		string
strokeWidth		number
arrow		boolean

NodesFilterOptions

Name	Description	Type	Default	Required
sourceType		string | string[]
if		string | boolean | null

DragNodesOptions

extends NodesFilterOptions

Name	Description	Type	Default	Required
save		UserViewQuery

UserViewQuery

Name	Description	Type	Default	Required
namespace		string		✅
key		string		✅

LineTarget

Name	Description	Type	Default	Required
id		string		✅
edge		DiagramEdge		✅

ConnectLineDetail

Name	Description	Type	Default	Required
source		DiagramNode		✅
target		DiagramNode		✅

DiagramNodeId

string

LineType

"auto" | "curve" | "straight" | "polyline"

CurveType

`curve${string}`

LineLabelPlacement

"center" | "start" | "end"

LineMarkerPlacement

"start" | "end"

LineMarkerType

"arrow" | "circle" | "0..1" | "0..N"

LayoutOptions

LayoutOptionsDagre | LayoutOptionsForce

PartialRectTuple

number | [all: number] | [vertical: number, horizontal: number] | [top: number, horizontal: number, bottom: number] | [top: number, right: number, bottom: number, left: number]

ActiveTarget

ActiveTargetOfNode | ActiveTargetOfEdge

RangeTuple

[min: number, max: number]