tldraw SDK

Table of contents

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

Extends StateNode.

abstract class BaseBoxShapeTool extends StateNode {}

Constructor

from StateNode

Constructs a new instance of the StateNode class

Parameters

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

Properties

id

static

static id: string

initial

static

static initial: string

children

optional

from StateNode

children?: Record<string, StateNode>

editor

from StateNode

editor: Editor

isLockable

from StateNode

isLockable: boolean

parent

from StateNode

parent: StateNode

performanceTracker

from StateNode

performanceTracker: PerformanceTracker

shapeType

abstract shapeType: string

type

from StateNode

type: 'branch' | 'leaf' | 'root'

Methods

children()

static

static children(): TLStateNodeConstructor[]

enter()

from StateNode

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

Parameters

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

Returns

void

exit()

from StateNode

exit(info: any, from: string): void

Parameters

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

Returns

void

getCurrent()

from StateNode

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

getCurrent(): StateNode | undefined

getCurrentToolIdMask()

from StateNode

getCurrentToolIdMask(): string | undefined

getIsActive()

from StateNode

Whether this node is active.

getIsActive(): boolean

getPath()

from StateNode

This node's path of active state nodes

getPath(): string

handleEvent()

from StateNode

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

Parameters

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

Returns

void

onCancel()

optional

from StateNode

onCancel?(info: TLCancelEventInfo): void

Parameters

Name	Description
`info`	`TLCancelEventInfo`

Returns

void

onComplete()

optional

from StateNode

onComplete?(info: TLCompleteEventInfo): void

Parameters

Name	Description
`info`	`TLCompleteEventInfo`

Returns

void

onCreate()

optional

onCreate?(_shape: null | TLShape): null | void

Parameters

Name	Description
`_shape`	`null \| TLShape`

Returns

null | void

onDoubleClick()

optional

from StateNode

onDoubleClick?(info: TLClickEventInfo): void

Parameters

Name	Description
`info`	`TLClickEventInfo`

Returns

void

onEnter()

optional

from StateNode

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

Parameters

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

Returns

void

onExit()

optional

from StateNode

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

Parameters

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

Returns

void

onInterrupt()

optional

from StateNode

onInterrupt?(info: TLInterruptEventInfo): void

Parameters

Name	Description
`info`	`TLInterruptEventInfo`

Returns

void

onKeyDown()

optional

from StateNode

onKeyDown?(info: TLKeyboardEventInfo): void

Parameters

Name	Description
`info`	`TLKeyboardEventInfo`

Returns

void

onKeyRepeat()

optional

from StateNode

onKeyRepeat?(info: TLKeyboardEventInfo): void

Parameters

Name	Description
`info`	`TLKeyboardEventInfo`

Returns

void

onKeyUp()

optional

from StateNode

onKeyUp?(info: TLKeyboardEventInfo): void

Parameters

Name	Description
`info`	`TLKeyboardEventInfo`

Returns

void

onLongPress()

optional

from StateNode

onLongPress?(info: TLPointerEventInfo): void

Parameters

Name	Description
`info`	`TLPointerEventInfo`

Returns

void

onMiddleClick()

optional

from StateNode

onMiddleClick?(info: TLPointerEventInfo): void

Parameters

Name	Description
`info`	`TLPointerEventInfo`

Returns

void

onPointerDown()

optional

from StateNode

onPointerDown?(info: TLPointerEventInfo): void

Parameters

Name	Description
`info`	`TLPointerEventInfo`

Returns

void

onPointerMove()

optional

from StateNode

onPointerMove?(info: TLPointerEventInfo): void

Parameters

Name	Description
`info`	`TLPointerEventInfo`

Returns

void

onPointerUp()

optional

from StateNode

onPointerUp?(info: TLPointerEventInfo): void

Parameters

Name	Description
`info`	`TLPointerEventInfo`

Returns

void

onQuadrupleClick()

optional

from StateNode

onQuadrupleClick?(info: TLClickEventInfo): void

Parameters

Name	Description
`info`	`TLClickEventInfo`

Returns

void

onRightClick()

optional

from StateNode

onRightClick?(info: TLPointerEventInfo): void

Parameters

Name	Description
`info`	`TLPointerEventInfo`

Returns

void

onTick()

optional

from StateNode

onTick?(info: TLTickEventInfo): void

Parameters

Name	Description
`info`	`TLTickEventInfo`

Returns

void

onTripleClick()

optional

from StateNode

onTripleClick?(info: TLClickEventInfo): void

Parameters

Name	Description
`info`	`TLClickEventInfo`

Returns

void

onWheel()

optional

from StateNode

onWheel?(info: TLWheelEventInfo): void

Parameters

Name	Description
`info`	`TLWheelEventInfo`

Returns

void

setCurrentToolIdMask()

from StateNode

setCurrentToolIdMask(id: string | undefined): void

Parameters

Name	Description
`id`	`string \| undefined`

Returns

void

transition()

from StateNode

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