StateNode • tldraw Docs

Table of contents

_currentToolIdMask
_path
children
editor
id
initial
isLockable
parent
performanceTracker
shapeType
type
useCoalescedEvents
Properties
Methods
- addChild
- enter
- exit
- getCurrent
- getCurrentToolIdMask
- getIsActive
- getPath
- handleEvent
- onCancel
- onComplete
- onDoubleClick
- onEnter
- onExit
- onInterrupt
- onKeyDown
- onKeyRepeat
- onKeyUp
- onLongPress
- onMiddleClick
- onPointerDown
- onPointerMove
- onPointerUp
- onQuadrupleClick
- onRightClick
- onTick
- onTripleClick
- onWheel
- setCurrentToolIdMask
- transition

abstract class StateNode implements Partial<TLEventHandlers> {}

Constructor

Constructs a new instance of the StateNode class

Parameters

Name	Description
`editor`	`Editor;`
`parent`	`StateNode;`

Properties

children

optional

children?: Record<string, StateNode>;

editor

editor: Editor;

id

id: string;

initial

optional

initial?: string;

isLockable

isLockable: boolean;

parent

parent: StateNode;

performanceTracker

performanceTracker: PerformanceTracker;

shapeType

optional

shapeType?: string;

type

type: "branch" | "leaf" | "root";

useCoalescedEvents

useCoalescedEvents: boolean;

Methods

addChild( )

Add a child node to this state node.

addChild(childConstructor: TLStateNodeConstructor): this;

Parameters

Name	Description
`childConstructor`	`TLStateNodeConstructor;`

Returns

this;

enter( )

enter(info: any, from: string): void;

Parameters

Name	Description
`info`	`any;`
`from`	`string;`

Returns

void;

exit( )

exit(info: any, to: string): void;

Parameters

Name	Description
`info`	`any;`
`to`	`string;`

Returns

void;

getCurrent( )

This node's current active child node, if any.

getCurrent(): StateNode | undefined;

getCurrentToolIdMask( )

getCurrentToolIdMask(): string | undefined;

getIsActive( )

Whether this node is active.

getIsActive(): boolean;

getPath( )

This node's path of active state nodes

getPath(): string;

handleEvent( )

handleEvent(info: Exclude<TLEventInfo, TLPinchEventInfo>): void;

Parameters

Name	Description
`info`	`Exclude<TLEventInfo, TLPinchEventInfo>;`

Returns

void;

onCancel( )

optional

onCancel?(info: TLCancelEventInfo): void;

Parameters

Name	Description
`info`	`TLCancelEventInfo;`

Returns

void;

onComplete( )

optional

onComplete?(info: TLCompleteEventInfo): void;

Parameters

Name	Description
`info`	`TLCompleteEventInfo;`

Returns

void;

onDoubleClick( )

optional

onDoubleClick?(info: TLClickEventInfo): void;

Parameters

Name	Description
`info`	`TLClickEventInfo;`

Returns

void;

onEnter( )

optional

onEnter?(info: any, from: string): void;

Parameters

Name	Description
`info`	`any;`
`from`	`string;`

Returns

void;

onExit( )

optional

onExit?(info: any, to: string): void;

Parameters

Name	Description
`info`	`any;`
`to`	`string;`

Returns

void;

onInterrupt( )

optional

onInterrupt?(info: TLInterruptEventInfo): void;

Parameters

Name	Description
`info`	`TLInterruptEventInfo;`

Returns

void;

onKeyDown( )

optional

onKeyDown?(info: TLKeyboardEventInfo): void;

Parameters

Name	Description
`info`	`TLKeyboardEventInfo;`

Returns

void;

onKeyRepeat( )

optional

onKeyRepeat?(info: TLKeyboardEventInfo): void;

Parameters

Name	Description
`info`	`TLKeyboardEventInfo;`

Returns

void;

onKeyUp( )

optional

onKeyUp?(info: TLKeyboardEventInfo): void;

Parameters

Name	Description
`info`	`TLKeyboardEventInfo;`

Returns

void;

onLongPress( )

optional

onLongPress?(info: TLPointerEventInfo): void;

Parameters

Name	Description
`info`	`TLPointerEventInfo;`

Returns

void;

onMiddleClick( )

optional

onMiddleClick?(info: TLPointerEventInfo): void;

Parameters

Name	Description
`info`	`TLPointerEventInfo;`

Returns

void;

onPointerDown( )

optional

onPointerDown?(info: TLPointerEventInfo): void;

Parameters

Name	Description
`info`	`TLPointerEventInfo;`

Returns

void;

onPointerMove( )

optional

onPointerMove?(info: TLPointerEventInfo): void;

Parameters

Name	Description
`info`	`TLPointerEventInfo;`

Returns

void;

onPointerUp( )

optional

onPointerUp?(info: TLPointerEventInfo): void;

Parameters

Name	Description
`info`	`TLPointerEventInfo;`

Returns

void;

onQuadrupleClick( )

optional

onQuadrupleClick?(info: TLClickEventInfo): void;

Parameters

Name	Description
`info`	`TLClickEventInfo;`

Returns

void;

onRightClick( )

optional

onRightClick?(info: TLPointerEventInfo): void;

Parameters

Name	Description
`info`	`TLPointerEventInfo;`

Returns

void;

onTick( )

optional

onTick?(info: TLTickEventInfo): void;

Parameters

Name	Description
`info`	`TLTickEventInfo;`

Returns

void;

onTripleClick( )

optional

onTripleClick?(info: TLClickEventInfo): void;

Parameters

Name	Description
`info`	`TLClickEventInfo;`

Returns

void;

onWheel( )

optional

onWheel?(info: TLWheelEventInfo): void;

Parameters

Name	Description
`info`	`TLWheelEventInfo;`

Returns

void;

setCurrentToolIdMask( )

setCurrentToolIdMask(id: string | undefined): void;

Parameters

Name	Description
`id`	`string \| undefined;`

Returns

void;

transition( )

Transition to a new active child state node.

transition(id: string, info?: any): this;

Example

parentState.transition("childStateA");
parentState.transition("childStateB", { myData: 4 });

Parameters

Name	Description
`id`	`string;` The id of the child state node to transition to.
`info`	`any;` Any data to pass to the `onEnter` and `onExit` handlers.

Returns

this;