ZoomTool • tldraw Docs

Table of contents

id
initial
isLockable
_currentToolIdMask
_path
children
editor
info
parent
performanceTracker
shapeType
type
useCoalescedEvents
Properties
Methods
- children
- 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

Extends StateNode.

class ZoomTool 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

isLockable

static

static isLockable: boolean

children

optional

from StateNode

children?: Record<string, StateNode>

editor

from StateNode

editor: Editor

info

info: TLPointerEventInfo & {
  onInteractionEnd?: string
}

parent

from StateNode

parent: StateNode

performanceTracker

from StateNode

performanceTracker: PerformanceTracker

shapeType

optional

from StateNode

shapeType?: string

type

from StateNode

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

useCoalescedEvents

from StateNode

useCoalescedEvents: boolean

Methods

children( )

static

static children(): TLStateNodeConstructor[]

addChild( )

from StateNode

Add a child node to this state node.

addChild(childConstructor: TLStateNodeConstructor): this

Parameters

Name	Description
`childConstructor`	`TLStateNodeConstructor`

Returns

this

enter( )

from StateNode

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

Parameters

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

Returns

void

exit( )

from StateNode

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

Parameters

Name	Description
`info`	`any`
`to`	`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

onDoubleClick( )

optional

from StateNode

onDoubleClick?(info: TLClickEventInfo): void

Parameters

Name	Description
`info`	`TLClickEventInfo`

Returns

void

onEnter( )

onEnter(
  info: TLPointerEventInfo & {
    onInteractionEnd: string
  }
): void

Parameters

Name	Description
`info`	`TLPointerEventInfo & { onInteractionEnd: string }`

Returns

void

onExit( )

onExit(): void

onInterrupt( )

onInterrupt(): void

onKeyDown( )

onKeyDown(): void

onKeyRepeat( )

optional

from StateNode

onKeyRepeat?(info: TLKeyboardEventInfo): void

Parameters

Name	Description
`info`	`TLKeyboardEventInfo`

Returns

void

onKeyUp( )

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