react-easy-diagram

Classes

• Callbacks
• CommandExecutor
• DiagramSettings
• DiagramState
• DragState
• HtmlElementRefState
• LinkCreationState
• LinkPointEndpointState
• LinkPortEndpointState
• LinkState
• LinksSettings
• LinksStore
• NodeState
• NodesSettings
• NodesStore
• PortState
• PortsSettings
• RootStore
• SelectionState
• UserInteractionSettings
• VisualComponentState
• VisualComponentWithDefault
• VisualComponents

Interfaces

• Dictionary
• DragAndDropContainerProps
• DragAndDropEvent
• DragAndDropItemProps
• DragAndDropStartEvent
• IBackgroundComponentProps
• ICallbacks
• ICommand
• IComponentDefinition
• ICurvedLinkPathConstructorSettings
• IDiagramInitState
• IDiagramInnerProps
• IDiagramSettings
• IDiagramState
• IDragHandlers
• IHtmlElementRect
• ILineStyling
• ILinkDefaultSettings
• ILinkInteractionState
• ILinkPath
• ILinkPathConstructorEndpointInfo
• ILinkPortEndpoint
• ILinkSegment
• ILinkState
• ILinkStateWithId
• ILinkStateWithoutId
• ILinkVisualComponentProps
• ILinksSettings
• IMiniControlComponentProps
• IMiniControlDefaultSettings
• INodeComponentSettings
• INodeDefaultSettings
• INodeExport
• INodeState
• INodeStateDiff
• INodeStateWithId
• INodeStateWithoutId
• INodeVisualComponentProps
• INodesSettings
• IPortExport
• IPortFinalState
• IPortInnerDefaultSettings
• IPortProps
• IPortState
• IPortStateWithoutIds
• IPortVisualComponentProps
• IPortsContainerProps
• IPortsContainerSettings
• IPortsSettings
• ISettings
• ISvgArrowMarkerSettings
• ISvgBackgroundSettings
• ISvgCircleMarkerSettings
• ISvgMarkerSettings
• ITransformation
• IUseLinkUserInteractionResult
• IUsePortUserInteractionResult
• IUseStylingOptions
• IUserInteraction
• IUserInteractionTranslate
• IUserInteractionTranslateAndZoom
• IVisualComponentProps
• IVisualComponentsObject
• IZoomToFitSettings
• OnDrag
• OnDragEnded
• OnDragStarted
• OnLinkValidation
• OnLinkingEnded
• OnLinkingStarted
• OnLinksAddResult
• OnLinksRemoveResult
• OnNodeDataChanged
• OnNodeIsDragEnabledChanged
• OnNodeIsSelectionEnabledChanged
• OnNodeLabelChanged
• OnNodePositionChanged
• OnNodePropertyChanged
• OnNodeTypeChanged
• OnNodesAddResult
• OnNodesRemoveResult

Type Aliases

BackgroundSvgImageGenerator

Ƭ BackgroundSvgImageGenerator: (width: number, height: number) => string

Type declaration

▸ (width, height): string

Parameters

Name	Type
width	number
height	number

Returns

string

---

BoundingBox

Ƭ BoundingBox: Object

Type declaration

Name	Type
bottomRightCorner	Point
size	Point
topLeftCorner	Point

---

CornerPosition

Ƭ CornerPosition: "left-top" | "right-top" | "right-bottom" | "left-bottom"

---

Direction

Ƭ Direction: "left" | "right" | "up" | "down"

---

DirectionWithDiagonals

Ƭ DirectionWithDiagonals: Direction | "left-down" | "left-up" | "right-down" | "right-up"

---

ErrorResult

Ƭ ErrorResult<TValue>: TValue extends undefined ? { error?: string ; success: false } : { error?: string ; success: false ; value: TValue }

Type parameters

Name	Type
TValue	undefined

---

GestureHandlers

Ƭ GestureHandlers: Partial<UserHandlers<EventTypes> & NativeHandlers<EventTypes>>

---

IDiagramContextProps

Ƭ IDiagramContextProps: React.PropsWithChildren<{ initState?: IDiagramInitState ; settings?: ISettings ; storeRef?: React.MutableRefObject<RootStore | null> }>

---

IDiagramProps

Ƭ IDiagramProps: IDiagramInnerProps & IDiagramContextProps

---

ILinkPathConstructor

Ƭ ILinkPathConstructor: (source: ILinkPathConstructorEndpointInfo, target: ILinkPathConstructorEndpointInfo) => string

Type declaration

▸ (source, target): string

Parameters

Name	Type
source	ILinkPathConstructorEndpointInfo
target	ILinkPathConstructorEndpointInfo

Returns

string

---

INodeDefaultSettingsWithoutPorts

Ƭ INodeDefaultSettingsWithoutPorts: Omit<INodeDefaultSettings, "ports">

---

LinkDefaultSettingsByStates

Ƭ LinkDefaultSettingsByStates<TValue>: { [key in LinkDefaultState]?: TValue }

Type parameters

Name
TValue

---

LinkDefaultState

Ƭ LinkDefaultState: "base" | "hovered" | "selected" | "selected-hovered"

---

MultipleSelectionKey

Ƭ MultipleSelectionKey: "ctrl" | "alt" | "meta" | "shift"

---

NodeDefaultSettingsByStates

Ƭ NodeDefaultSettingsByStates<TValue>: { [key in NodeDefaultState]?: TValue }

Type parameters

Name
TValue

---

NodeDefaultState

Ƭ NodeDefaultState: "base" | "hovered" | "selected" | "selected-hovered"

---

Optional

Ƭ Optional<T, K>: Pick<Partial<T>, K> & Omit<T, K>

Type parameters

Name	Type
T	T
K	extends keyof T

---

Point

Ƭ Point: readonly [number, number]

---

PortInnerDefaultSettingsByStates

Ƭ PortInnerDefaultSettingsByStates<TValue>: { [key in PortInnerDefaultState]?: TValue }

Type parameters

Name
TValue

---

PortInnerDefaultState

Ƭ PortInnerDefaultState: "base" | "hovered" | "dragging" | "invalid" | "node-hovered" | "node-selected"

---

PortPosition

Ƭ PortPosition: typeof portPositionValues[number]

---

Position

Ƭ Position: typeof positionValues[number]

---

PropertyChange

Ƭ PropertyChange<TValue>: Object

Type parameters

Name
TValue

Type declaration

Name	Type
newValue	TValue
oldValue	TValue

---

SelectableItem

Ƭ SelectableItem: NodeState | LinkState

---

SuccessOrErrorResult

Ƭ SuccessOrErrorResult<TValue, TErrorValue>: SuccessResult<TValue> | ErrorResult<TErrorValue>

Type parameters

Name	Type
TValue	undefined
TErrorValue	undefined

---

SuccessResult

Ƭ SuccessResult<TValue>: TValue extends undefined ? { success: true } : { success: true ; value: TValue }

Type parameters

Name	Type
TValue	undefined

---

VisualComponent

Ƭ VisualComponent<TComponentProps>: React.FunctionComponent<TComponentProps>

Type parameters

Name
TComponentProps

---

check

Ƭ check<T, Key>: undefined extends T[Key] ? EventTypes[Key] : T[Key]

Type parameters

Name	Type
T	extends AnyHandlerEventTypes
Key	extends GestureKey

Variables

BackgroundWrapper

• Const BackgroundWrapper: () => Element & { displayName: string }

---

Button

• Const Button: React.FC<{ children?: React.ReactNode ; size: number ; onClick: () => any }>

---

COMPONENT_DEFAULT_TYPE

• Const COMPONENT_DEFAULT_TYPE: "default"

---

CopyIcon

• Const CopyIcon: React.FC

---

DISABLE_NODE_USER_INTERACTION_CLASS

• Const DISABLE_NODE_USER_INTERACTION_CLASS: "react_easy_diagram_disable_node_user_interaction"

---

DiagramContext

• Const DiagramContext: (props: PropsWithChildren<{ initState?: IDiagramInitState ; settings?: ISettings ; storeRef?: MutableRefObject<null | RootStore> }>) => Element & { displayName: string }

---

DigramInner

• Const DigramInner: FunctionComponent<IDiagramInnerProps>

---

ENABLE_NODE_USER_INTERACTION_CLASS

• Const ENABLE_NODE_USER_INTERACTION_CLASS: "react_easy_diagram_enable_node_user_interaction"

---

FilterCenterFocusIcon

• Const FilterCenterFocusIcon: React.FC

---

LINK_CREATION_COMPONENT_TYPE

• Const LINK_CREATION_COMPONENT_TYPE: string = 'linkCreation'

---

LinkDefault

• Const LinkDefault: React.FC<ILinkVisualComponentProps<ILinkDefaultSettings>>

---

LinkWrapper

• Const LinkWrapper: FunctionComponent<{ link: LinkState | LinkCreationState }>

---

LinksLayer

• Const LinksLayer: FunctionComponent<{ transform: string }>

---

LockIcon

• Const LockIcon: React.FC

---

MiniControlWrapper

• Const MiniControlWrapper: () => Element & { displayName: string }

---

NodeContext

• Const NodeContext: Context<null | NodeState>

---

NodeLabel

• Const NodeLabel: React.FC<{ node: NodeState }>

---

NodeWrapper

• Const NodeWrapper: FunctionComponent<{ node: NodeState }>

---

NodesLayer

• Const NodesLayer: FunctionComponent<{ transform: string }>

---

Port

• Const Port: React.FC<IPortProps>

---

RootStoreContext

• Const RootStoreContext: Context<null | RootStore>

---

RubbishBinIcon

• Const RubbishBinIcon: React.FC

---

UnlockIcon

• Const UnlockIcon: React.FC

---

cloneSelectedNodesCommand

• Const cloneSelectedNodesCommand: Object

Type declaration

Name	Type
execute	(rootStore: RootStore) => void

---

defaultLinkMainLineClasses

• Const defaultLinkMainLineClasses: LinkDefaultSettingsByStates<string[]>

---

defaultLinkSecondaryLineClasses

• Const defaultLinkSecondaryLineClasses: LinkDefaultSettingsByStates<string[]>

---

defaultNodeClasses

• Const defaultNodeClasses: NodeDefaultSettingsByStates<string[]>

---

defaultPortInnerClasses

• Const defaultPortInnerClasses: PortInnerDefaultSettingsByStates<string[]>

---

portPositionValues

• Const portPositionValues: readonly ["left-top", "left-center", "left-bottom", "top-left", "top-center", "top-right", "right-top", "right-center", "right-bottom", "bottom-left", "bottom-center", "bottom-right", "diagonal-left-top", "diagonal-right-top", "diagonal-right-bottom", "diagonal-left-bottom"]

---

positionValues

• Const positionValues: readonly ["left", "top", "right", "bottom"]

---

removeSelectedCommand

• Const removeSelectedCommand: Object

Type declaration

Name	Type
execute	(rootStore: RootStore) => void

---

removeSelectedLinksCommand

• Const removeSelectedLinksCommand: Object

Type declaration

Name	Type
execute	(rootStore: RootStore) => void

---

removeSelectedNodesCommand

• Const removeSelectedNodesCommand: Object

Type declaration

Name	Type
execute	(rootStore: RootStore) => void

Functions

Diagram

▸ Diagram(props): Element

Parameters

Name	Type
props	IDiagramProps

Returns

Element

---

DragAndDropContainer

▸ DragAndDropContainer(props): Element

Parameters

Name	Type
props	DragAndDropContainerProps

Returns

Element

---

DragAndDropItem

▸ DragAndDropItem(props): Element

Parameters

Name	Type
props	DragAndDropItemProps

Returns

Element

---

addNodeCommand

▸ addNodeCommand(node): Object

Parameters

Name	Type
node	INodeState

Returns

Object

Name	Type
execute	(rootStore: RootStore) => void

---

addPoints

▸ addPoints(...points): Point

Parameters

Name	Type
...points	(undefined | null | Point)[]

Returns

Point

---

arePointsEqual

▸ arePointsEqual(a?, b?): boolean

Parameters

Name	Type
a?	Point
b?	Point

Returns

boolean

---

areTransformationsEqual

▸ areTransformationsEqual(a, b): boolean

Parameters

Name	Type
a	ITransformation
b	ITransformation

Returns

boolean

---

canDragGestureBeTapInstead

▸ canDragGestureBeTapInstead(movement): boolean

Does gesture can be potentially a tap/click event? Drag gesture will be tap/click gesture on mouse or touch release only when the drag displacement is inferior to 3 pixels. See useGestures documentation for more information.

Parameters

Name	Type	Description
movement	Vector2	state value of gesture, represent gesture offset

Returns

boolean

---

clampValue

▸ clampValue(value, interval): number

Parameters

Name	Type
value	number
interval	Point

Returns

number

---

combineArrays

▸ combineArrays<TValue>(...arrays): TValue[]

Type parameters

Name
TValue

Parameters

Name	Type
...arrays	(undefined | TValue[])[]

Returns

TValue[]

---

commandC

▸ commandC(startPoint, control1, control2, endPoint): string

Parameters

Name	Type
startPoint	Point
control1	Point
control2	Point
endPoint	Point

Returns

string

---

commandM

▸ commandM(point): string

Parameters

Name	Type
point	Point

Returns

string

---

coordinateFromPoint

▸ coordinateFromPoint(point): string

Parameters

Name	Type
point	Point

Returns

string

---

createArrowMarker

▸ createArrowMarker(settings): React.FunctionComponent

Parameters

Name	Type
settings	ISvgArrowMarkerSettings

Returns

React.FunctionComponent

---

createCircleMarker

▸ createCircleMarker(settings): React.FunctionComponent

Parameters

Name	Type
settings	ISvgCircleMarkerSettings

Returns

React.FunctionComponent

---

createCrossesImageGenerator

▸ createCrossesImageGenerator(sizeMultiplicator, color, opacity): BackgroundSvgImageGenerator

Parameters

Name	Type
sizeMultiplicator	number
color	string
opacity	number

Returns

BackgroundSvgImageGenerator

---

createCurvedLinkPathConstructor

▸ createCurvedLinkPathConstructor(settings?): ILinkPathConstructor

Parameters

Name	Type
settings?	Partial<ICurvedLinkPathConstructorSettings>

Returns

ILinkPathConstructor

---

createDefaultMiniControl

▸ createDefaultMiniControl(settings?): IComponentDefinition<IMiniControlComponentProps<any>, IMiniControlDefaultSettings>

Parameters

Name	Type
settings?	Partial<IMiniControlDefaultSettings>

Returns

IComponentDefinition<IMiniControlComponentProps<any>, IMiniControlDefaultSettings>

---

createDotsImageGenerator

▸ createDotsImageGenerator(sizeMultiplicator, dotsColor, dotsOpacity, dotsRadius): BackgroundSvgImageGenerator

Parameters

Name	Type
sizeMultiplicator	number
dotsColor	string
dotsOpacity	number
dotsRadius	number

Returns

BackgroundSvgImageGenerator

---

createFullPortId

▸ createFullPortId(nodeId, portId): string

Parameters

Name	Type
nodeId	string
portId	string

Returns

string

---

createGridImageGenerator

▸ createGridImageGenerator(sizeMultiplicator, linesColor, linesOpacity): BackgroundSvgImageGenerator

Parameters

Name	Type
sizeMultiplicator	number
linesColor	string
linesOpacity	number

Returns

BackgroundSvgImageGenerator

---

createInputHorizontalNode

▸ createInputHorizontalNode(settings?): IComponentDefinition<INodeVisualComponentProps<INodeDefaultSettings>, INodeDefaultSettings>

Parameters

Name	Type
settings?	Pick<INodeDefaultSettings, "innerNode" | "removeDefaultClasses" | "classes" | "style">

Returns

IComponentDefinition<INodeVisualComponentProps<INodeDefaultSettings>, INodeDefaultSettings>

---

createInputOutputHorizontalNode

▸ createInputOutputHorizontalNode(settings?): IComponentDefinition<INodeVisualComponentProps<INodeDefaultSettings>, INodeDefaultSettings>

Parameters

Name	Type
settings?	Pick<INodeDefaultSettings, "innerNode" | "removeDefaultClasses" | "classes" | "style">

Returns

IComponentDefinition<INodeVisualComponentProps<INodeDefaultSettings>, INodeDefaultSettings>

---

createInputOutputVerticalNode

▸ createInputOutputVerticalNode(settings?): IComponentDefinition<INodeVisualComponentProps<INodeDefaultSettings>, INodeDefaultSettings>

Parameters

Name	Type
settings?	Pick<INodeDefaultSettings, "innerNode" | "removeDefaultClasses" | "classes" | "style">

Returns

IComponentDefinition<INodeVisualComponentProps<INodeDefaultSettings>, INodeDefaultSettings>

---

createInputVerticalNode

▸ createInputVerticalNode(settings?): IComponentDefinition<INodeVisualComponentProps<INodeDefaultSettings>, INodeDefaultSettings>

Parameters

Name	Type
settings?	Pick<INodeDefaultSettings, "innerNode" | "removeDefaultClasses" | "classes" | "style">

Returns

IComponentDefinition<INodeVisualComponentProps<INodeDefaultSettings>, INodeDefaultSettings>

---

createLinkDefault

▸ createLinkDefault(settings?): IComponentDefinition<ILinkVisualComponentProps, Partial<ILinkDefaultSettings>>

Parameters

Name	Type
settings?	ILinkDefaultSettings

Returns

IComponentDefinition<ILinkVisualComponentProps, Partial<ILinkDefaultSettings>>

---

createLinkPath

▸ createLinkPath(rootStore, source, target): ILinkPath | undefined

Parameters

Name	Type
rootStore	RootStore
source	LinkPortEndpointState
target	LinkPortEndpointState | LinkPointEndpointState

Returns

ILinkPath | undefined

---

createNode

▸ createNode(settings?): IComponentDefinition<INodeVisualComponentProps<INodeDefaultSettings>, INodeDefaultSettings>

Parameters

Name	Type
settings?	INodeDefaultSettings

Returns

IComponentDefinition<INodeVisualComponentProps<INodeDefaultSettings>, INodeDefaultSettings>

---

createNodeOnDrop

▸ createNodeOnDrop(node): (event: DragAndDropEvent) => void

Parameters

Name	Type
node	Pick<INodeState, "id" | "label" | "type" | "data" | "isSelectionEnabled" | "isDragEnabled" | "ports">

Returns

fn

▸ (event): void

Parameters

Name	Type
event	DragAndDropEvent

Returns

void

---

createOutputHorizontalNode

▸ createOutputHorizontalNode(settings?): IComponentDefinition<INodeVisualComponentProps<INodeDefaultSettings>, INodeDefaultSettings>

Parameters

Name	Type
settings?	Pick<INodeDefaultSettings, "innerNode" | "removeDefaultClasses" | "classes" | "style">

Returns

IComponentDefinition<INodeVisualComponentProps<INodeDefaultSettings>, INodeDefaultSettings>

---

createOutputVerticalNode

▸ createOutputVerticalNode(settings?): IComponentDefinition<INodeVisualComponentProps<INodeDefaultSettings>, INodeDefaultSettings>

Parameters

Name	Type
settings?	Pick<INodeDefaultSettings, "innerNode" | "removeDefaultClasses" | "classes" | "style">

Returns

IComponentDefinition<INodeVisualComponentProps<INodeDefaultSettings>, INodeDefaultSettings>

---

createPortInnerDefault

▸ createPortInnerDefault(settings?): IComponentDefinition<IPortVisualComponentProps, IPortInnerDefaultSettings>

Parameters

Name	Type
settings?	IPortInnerDefaultSettings

Returns

IComponentDefinition<IPortVisualComponentProps, IPortInnerDefaultSettings>

---

createPortsContainer

▸ createPortsContainer(settings?): VisualComponent<IPortsContainerProps>

Parameters

Name	Type
settings?	Partial<IPortsContainerSettings>

Returns

VisualComponent<IPortsContainerProps>

---

createStarNode

▸ createStarNode(settings?): IComponentDefinition<INodeVisualComponentProps<INodeDefaultSettings>, INodeDefaultSettings>

Parameters

Name	Type
settings?	Pick<INodeDefaultSettings, "innerNode" | "removeDefaultClasses" | "classes" | "style">

Returns

IComponentDefinition<INodeVisualComponentProps<INodeDefaultSettings>, INodeDefaultSettings>

---

createStraightLinkPathConstructor

▸ createStraightLinkPathConstructor(): ILinkPathConstructor

Returns

ILinkPathConstructor

---

createSvgBackground

▸ createSvgBackground(settings?): IComponentDefinition<IBackgroundComponentProps<any>, ISvgBackgroundSettings>

Parameters

Name	Type
settings?	Partial<ISvgBackgroundSettings>

Returns

IComponentDefinition<IBackgroundComponentProps<any>, ISvgBackgroundSettings>

---

createVector

▸ createVector(p, length, angleInRadian): Point

Parameters

Name	Type
p	Point
length	number
angleInRadian	undefined | number

Returns

Point

---

deepCopy

▸ deepCopy<TValue>(value): TValue

Type parameters

Name
TValue

Parameters

Name	Type
value	TValue

Returns

TValue

---

distanceBetweenPoints

▸ distanceBetweenPoints(a, b): number

Parameters

Name	Type
a	Point
b	Point

Returns

number

---

errorResult

▸ errorResult(error?): ErrorResult

Parameters

Name	Type
error?	string

Returns

ErrorResult

---

errorValueResult

▸ errorValueResult<TErrorValue>(value, error?): ErrorResult<TErrorValue>

Type parameters

Name
TErrorValue

Parameters

Name	Type
value	TErrorValue
error?	string

Returns

ErrorResult<TErrorValue>

---

eventPathContainsClass

▸ eventPathContainsClass(event, className, exceptClassName?): boolean

Check each element starting from the first one in composedPath() (see https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath), if exceptClassName is the first class found -> return false, if className is the first class found -> return true, if neither exceptClassName nor className were found -> return false

Parameters

Name	Type
event	PointerEvent | MouseEvent | TouchEvent | KeyboardEvent
className	string
exceptClassName?	string

Returns

boolean

---

generateTransform

▸ generateTransform(translate, scale?): string

Parameters

Name	Type
translate	Point
scale?	number

Returns

string

---

getDegree

▸ getDegree(dir): number | undefined

Parameters

Name	Type
dir	undefined | "left" | "right" | "up" | "down" | "left-down" | "left-up" | "right-down" | "right-up"

Returns

number | undefined

---

getRadian

▸ getRadian(dir): number | undefined

Parameters

Name	Type
dir	undefined | "left" | "right" | "up" | "down" | "left-down" | "left-up" | "right-down" | "right-up"

Returns

number | undefined

---

guid

▸ guid(): string

Returns

string

---

guidForcedUniqueness

▸ guidForcedUniqueness(checkExistence): string

Parameters

Name	Type
checkExistence	(id: string) => boolean

Returns

string

---

isBoolean

▸ isBoolean(value): value is boolean

Parameters

Name	Type
value	any

Returns

value is boolean

---

isError

▸ isError<TValue, TErrorValue>(result): result is ErrorResult<TErrorValue>

Type parameters

Name
TValue
TErrorValue

Parameters

Name	Type
result	SuccessOrErrorResult<TValue, TErrorValue>

Returns

result is ErrorResult<TErrorValue>

---

isNumber

▸ isNumber(value): value is number

Parameters

Name	Type
value	any

Returns

value is number

---

isObject

▸ isObject(value): value is object

Parameters

Name	Type
value	any

Returns

value is object

---

isPoint

▸ isPoint(value): value is Point

Parameters

Name	Type
value	any

Returns

value is Point

---

isSuccess

▸ isSuccess<TValue, TErrorValue>(result): result is SuccessResult<TValue>

Type parameters

Name
TValue
TErrorValue

Parameters

Name	Type
result	SuccessOrErrorResult<TValue, TErrorValue>

Returns

result is SuccessResult<TValue>

---

linkPortEndpointsEquals

▸ linkPortEndpointsEquals(a, b): boolean

Parameters

Name	Type
a	ILinkPortEndpoint
b	ILinkPortEndpoint

Returns

boolean

---

multiplyPoint

▸ multiplyPoint(a, m): Point

Parameters

Name	Type
a	Point
m	number

Returns

Point

---

roundPoint

▸ roundPoint(point): Point

Parameters

Name	Type
point	Point

Returns

Point

---

subtractPoints

▸ subtractPoints(...points): Point

Parameters

Name	Type
...points	Point[]

Returns

Point

---

successResult

▸ successResult(): SuccessResult

Returns

SuccessResult

---

successValueResult

▸ successValueResult<TValue>(value): SuccessResult<TValue>

Type parameters

Name
TValue

Parameters

Name	Type
value	TValue

Returns

SuccessResult<TValue>

---

useCursor

▸ useCursor(active, cursor, ref): void

Parameters

Name	Type
active	boolean
cursor	undefined | "move" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "-moz-grab" | "-webkit-grab" | "alias" | "all-scroll" | "auto" | "cell" | "col-resize" | "context-menu" | "copy" | "crosshair" | "default" | "e-resize" | "ew-resize" | "grab" | "grabbing" | "help" | "n-resize" | "ne-resize" | "nesw-resize" | "no-drop" | "none" | "not-allowed" | "ns-resize" | "nw-resize" | "nwse-resize" | "pointer" | "progress" | "row-resize" | "s-resize" | "se-resize" | "sw-resize" | "text" | "vertical-text" | "w-resize" | "wait" | "zoom-in" | "zoom-out"
ref	null | HTMLDivElement

Returns

void

---

useDiagram

▸ useDiagram(initState?, settings?): Object

Parameters

Name	Type
initState?	IDiagramInitState
settings?	ISettings

Returns

Object

Name	Type
Diagram	() => Element
storeRef	MutableRefObject<null | RootStore>

---

useDiagramCursor

▸ useDiagramCursor(active, cursor): void

Parameters

Name	Type
active	boolean
cursor	undefined | "move" | string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "-moz-grab" | "-webkit-grab" | "alias" | "all-scroll" | "auto" | "cell" | "col-resize" | "context-menu" | "copy" | "crosshair" | "default" | "e-resize" | "ew-resize" | "grab" | "grabbing" | "help" | "n-resize" | "ne-resize" | "nesw-resize" | "no-drop" | "none" | "not-allowed" | "ns-resize" | "nw-resize" | "nwse-resize" | "pointer" | "progress" | "row-resize" | "s-resize" | "se-resize" | "sw-resize" | "text" | "vertical-text" | "w-resize" | "wait" | "zoom-in" | "zoom-out"

Returns

void

---

useDiagramDragHandlers

▸ useDiagramDragHandlers(cancelEvent): IDragHandlers

Parameters

Name	Type
cancelEvent	(event: { target: null | EventTarget }) => boolean

Returns

IDragHandlers

---

useDiagramPinchHandlers

▸ useDiagramPinchHandlers(cancel): IPinchHandlers

Parameters

Name	Type
cancel	(event: { target: null | EventTarget }) => boolean

Returns

IPinchHandlers

---

useDiagramUserInteraction

▸ useDiagramUserInteraction(): void

Returns

void

---

useDiagramWheelHandler

▸ useDiagramWheelHandler(state): IWheelHandler

Parameters

Name	Type
state	IUserInteractionTranslateAndZoom

Returns

IWheelHandler

---

useLinkUserInteraction

▸ useLinkUserInteraction(linkState): IUseLinkUserInteractionResult

Parameters

Name	Type
linkState	LinkState | LinkCreationState

Returns

IUseLinkUserInteractionResult

---

useNodeUserInteraction

▸ useNodeUserInteraction(nodeState): void

Parameters

Name	Type
nodeState	NodeState

Returns

void

---

useNotifyRef

▸ useNotifyRef<TValue>(init): MutableRefObject<TValue>

Type parameters

Name
TValue

Parameters

Name	Type
init	TValue

Returns

MutableRefObject<TValue>

---

usePortUserInteraction

▸ usePortUserInteraction(portState?): IUsePortUserInteractionResult

Parameters

Name	Type
portState?	PortState

Returns

IUsePortUserInteractionResult

---

useRelativePositionStyles

▸ useRelativePositionStyles(position?, offsetFromParentCenter?, offsetFromOrigin?, usePortCenterPivot?): Pick<Partial<CSSProperties>, "position" | "transform" | "left" | "top" | "right" | "bottom" | "width" | "height">

Parameters

Name	Type	Default value
position?	null | "left-top" | "right-top" | "right-bottom" | "left-bottom" | "left-center" | "top-left" | "top-center" | "top-right" | "right-center" | "bottom-left" | "bottom-center" | "bottom-right" | "diagonal-left-top" | "diagonal-right-top" | "diagonal-right-bottom" | "diagonal-left-bottom"	undefined
offsetFromParentCenter?	null | number	undefined
offsetFromOrigin?	null | Point	undefined
usePortCenterPivot	boolean	true

Returns

Pick<Partial<CSSProperties>, "position" | "transform" | "left" | "top" | "right" | "bottom" | "width" | "height">

---

useRootStore

▸ useRootStore(): RootStore

Returns

RootStore

---

useStyling

▸ useStyling(options, state): Object

Parameters

Name	Type
options	IUseStylingOptions
state	string

Returns

Object

Name	Type
className	string
style	CSSProperties