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	Type	Required	Description
id	DiagramNodeId	✅
type	string
[key: string]	unknown

DiagramEdge

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

NodeBrickConf

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

LineConf

extends LineConfOverridable

Name	Type	Required	Description
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	Type	Required	Description
content	string	✅
style	CSSProperties
placement	LineLabelPlacement

LineLabelConf

Name	Type	Required	Description
if	string | boolean | null
useBrick	UseSingleBrickConf	✅
placement	LineLabelPlacement

LineConfOverrides

Name	Type	Required	Description
active	LineConfOverridable
activeRelated	LineConfOverridable

LineConfOverridable

Name	Type	Required	Description
strokeColor	string
strokeWidth	number
interactStrokeWidth	number

LineMarkerConf

Name	Type	Required	Description
placement	LineMarkerPlacement
type	LineMarkerType

LayoutOptionsDagre

extends BaseLayoutOptions

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

BaseLayoutOptions

Name	Type	Required	Description
nodePadding	PartialRectTuple

LayoutOptionsForce

extends BaseLayoutOptions

Name	Type	Required	Description
dummyNodesOnEdges	number
collide	boolean | ForceCollideOptions

ForceCollideOptions

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

ActiveTargetOfNode

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

ActiveTargetOfEdge

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

ConnectNodesOptions

extends NodesFilterOptions

Name	Type	Required	Description
strokeColor	string
strokeWidth	number
arrow	boolean

NodesFilterOptions

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

DragNodesOptions

extends NodesFilterOptions

Name	Type	Required	Description
save	UserViewQuery

UserViewQuery

Name	Type	Required	Description
namespace	string	✅
key	string	✅

LineTarget

Name	Type	Required	Description
id	string	✅
edge	DiagramEdge	✅

ConnectLineDetail

Name	Type	Required	Description
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]