Editor

Public class

class Editor extends EventEmitter<TLEventMap> {}

TLEventMap

packages/editor/src/lib/editor/Editor.ts

Constructor

Public constructor

Constructs a new instance of the Editor class

TLEditorOptions

TLEditorOptions

Properties

dispatch

Public property

Dispatch an event to the editor.

editor.dispatch(myPointerEvent)

dispatch: (info: TLEventInfo) => this

TLEventInfo

disposables

Public readonly property

A set of functions to call when the app is disposed.

readonly disposables: Set<() => void>

environment

Public readonly property

A manager for the editor's environment.

readonly environment: EnvironmentManager

getContainer

Public property

The current HTML element containing the editor.

const container = editor.getContainer()

getContainer: () => HTMLElement

history

Public readonly property

A manager for the app's history.

readonly history: HistoryManager<this>

inputs

Public property

The app's current input state.

inputs: {
  buttons: Set<number>
  keys: Set<string>
  originScreenPoint: Vec
  originPagePoint: Vec
  currentScreenPoint: Vec
  currentPagePoint: Vec
  previousScreenPoint: Vec
  previousPagePoint: Vec
  pointerVelocity: Vec
  altKey: boolean
  ctrlKey: boolean
  isPen: boolean
  shiftKey: boolean
  isDragging: boolean
  isEditing: boolean
  isPanning: boolean
  isPinching: boolean
  isPointing: boolean
}

Vec

renderingBoundsMargin

Public property

The distance to expand the viewport when measuring culling. A larger distance will mean that shapes near to the viewport (but still outside of it) will not be culled.

renderingBoundsMargin: number

root

Public readonly property

The root state of the statechart.

readonly root: RootState

scribbles

Public readonly property

A manager for the editor's scribbles.

readonly scribbles: ScribbleManager

setCursor

Public property

Set the cursor.

setCursor: (cursor: Partial<TLCursor>) => this

TLCursor

shapeUtils

Public property

A map of shape utility classes (TLShapeUtils) by shape type.

shapeUtils: {
  readonly [K in string]?: ShapeUtil<TLUnknownShape>
}

ShapeUtil, TLUnknownShape

sideEffects

Public readonly property

A manager for side effects and correct state enforcement. See SideEffectManager for details.

readonly sideEffects: SideEffectManager<this>

SideEffectManager

snaps

Public readonly property

A manager for the app's snapping feature.

readonly snaps: SnapManager

SnapManager

store

Public readonly property

The editor's store

readonly store: TLStore

TLStore

styleProps

Public property

styleProps: {
  [key: string]: Map<StyleProp<any>, string>
}

StyleProp

textMeasure

Public readonly property

A helper for measuring text.

readonly textMeasure: TextManager

user

Public readonly property

A manager for the user and their preferences.

readonly user: UserPreferencesManager

Methods

addOpenMenu()

Public method

Add an open menu.

editor.addOpenMenu('menu-id')

addOpenMenu(id: string): this

string

this

alignShapes()

Public method

Align shape positions.

editor.alignShapes([box1, box2], 'left')
editor.alignShapes(editor.getSelectedShapeIds(), 'left')

alignShapes(
  shapes: TLShape[] | TLShapeId[],
  operation:
    | 'bottom'
    | 'center-horizontal'
    | 'center-vertical'
    | 'left'
    | 'right'
    | 'top'
): this

TLShape[] | TLShapeId[]

  | 'bottom'
  | 'center-horizontal'
  | 'center-vertical'
  | 'left'
  | 'right'
  | 'top'

this

TLShape, TLShapeId

animateShape()

Public method

Animate a shape.

editor.animateShape({ id: 'box1', type: 'box', x: 100, y: 100 })
editor.animateShape(
  { id: 'box1', type: 'box', x: 100, y: 100 },
  { duration: 100, ease: (t) => t * t }
)

animateShape(
  partial: null | TLShapePartial | undefined,
  animationOptions?: TLAnimationOptions
): this

null | TLShapePartial | undefined

TLAnimationOptions

this

TLShapePartial, TLAnimationOptions

animateShapes()

Public method

Animate shapes.

editor.animateShapes([{ id: 'box1', type: 'box', x: 100, y: 100 }])
editor.animateShapes([{ id: 'box1', type: 'box', x: 100, y: 100 }], {
  duration: 100,
  ease: (t) => t * t,
})

animateShapes(
  partials: (null | TLShapePartial | undefined)[],
  animationOptions?: Partial<{
    duration: number
    easing: (t: number) => number
  }>
): this

(null | TLShapePartial | undefined)[]

Partial<{
  duration: number
  easing: (t: number) => number
}>

this

TLShapePartial

animateToShape()

Public method

Animate the camera to a shape.

animateToShape(shapeId: TLShapeId, opts?: TLAnimationOptions): this

TLShapeId

TLAnimationOptions

this

TLShapeId, TLAnimationOptions

animateToUser()

Public method

Animate the camera to a user's cursor position. This also briefly show the user's cursor if it's not currently visible.

animateToUser(userId: string): this

string

this

bail()

Public method

Clear all marks in the undo stack back to the next mark.

editor.bail()

bail(): this

bailToMark()

Public method

Clear all marks in the undo stack back to the mark with the provided mark id.

editor.bailToMark('dragging')

bailToMark(id: string): this

string

this

batch()

Public method

Run a function in a batch.

batch(fn: () => void): this

() => void

this

bringForward()

Public method

Bring shapes forward in the page's object list.

editor.bringForward(['id1', 'id2'])
editor.bringForward(box1, box2)

bringForward(shapes: TLShape[] | TLShapeId[]): this

TLShape[] | TLShapeId[]

this

TLShape, TLShapeId

bringToFront()

Public method

Bring shapes to the front of the page's object list.

editor.bringToFront(['id1', 'id2'])
editor.bringToFront([box1, box2])

bringToFront(shapes: TLShape[] | TLShapeId[]): this

TLShape[] | TLShapeId[]

this

TLShape, TLShapeId

cancel()

Public method

Dispatch a cancel event.

editor.cancel()

cancel(): this

cancelDoubleClick()

Public method

Prevent a double click event from firing the next time the user clicks

cancelDoubleClick(): void

centerOnPoint()

Public method

Center the camera on a point (in the current page space).

editor.centerOnPoint({ x: 100, y: 100 })
editor.centerOnPoint({ x: 100, y: 100 }, { duration: 200 })

centerOnPoint(point: VecLike, animation?: TLAnimationOptions): this

VecLike

TLAnimationOptions

this

VecLike, TLAnimationOptions

clearOpenMenus()

Public method

Clear all open menus.

editor.clearOpenMenus()

clearOpenMenus(): this

complete()

Public method

Dispatch a complete event.

editor.complete()

complete(): this

createAssets()

Public method

Create one or more assets.

editor.createAssets([...myAssets])

createAssets(assets: TLAsset[]): this

TLAsset[]

this

TLAsset

createPage()

Public method

Create a page.

editor.createPage(myPage)
editor.createPage({ name: 'Page 2' })

createPage(page: Partial<TLPage>): this

Partial<TLPage>

this

TLPage

createShape()

Public method

Create a single shape.

editor.createShape(myShape)
editor.createShape({ id: 'box1', type: 'text', props: { text: 'ok' } })

createShape<T extends TLUnknownShape>(
  shape: OptionalKeys<TLShapePartial<T>, 'id'>
): this

OptionalKeys<TLShapePartial<T>, 'id'>

this

TLUnknownShape, TLShapePartial

createShapes()

Public method

Create shapes.

editor.createShapes([myShape])
editor.createShapes([{ id: 'box1', type: 'text', props: { text: 'ok' } }])

createShapes<T extends TLUnknownShape>(
  shapes: OptionalKeys<TLShapePartial<T>, 'id'>[]
): this

OptionalKeys<TLShapePartial<T>, 'id'>[]

this

TLUnknownShape, TLShapePartial

deleteAssets()

Public method

Delete one or more assets.

editor.deleteAssets(['asset1', 'asset2'])

deleteAssets(assets: TLAsset[] | TLAssetId[]): this

TLAsset[] | TLAssetId[]

this

TLAsset, TLAssetId

deleteOpenMenu()

Public method

Delete an open menu.

editor.deleteOpenMenu('menu-id')

deleteOpenMenu(id: string): this

string

this

deletePage()

Public method

Delete a page.

editor.deletePage('page1')

deletePage(page: TLPage | TLPageId): this

TLPage | TLPageId

this

TLPage, TLPageId

deleteShape()

Public method

Delete a shape.

editor.deleteShape(shape.id)

deleteShape(id: TLShapeId): this

TLShapeId

this

TLShapeId

deleteShape()

Public method

deleteShape(shape: TLShape): this

TLShape

this

TLShape

deleteShapes()

Public method

Delete shapes.

editor.deleteShapes(['box1', 'box2'])

deleteShapes(ids: TLShapeId[]): this

TLShapeId[]

this

TLShapeId

deleteShapes()

Public method

deleteShapes(shapes: TLShape[]): this

TLShape[]

this

TLShape

deselect()

Public method

Remove a shape from the existing set of selected shapes.

editor.deselect(shape.id)

deselect(...shapes: TLShape[] | TLShapeId[]): this

TLShape[] | TLShapeId[]

this

TLShape, TLShapeId

dispose()

Public method

Dispose the editor.

dispose(): void

distributeShapes()

Public method

Distribute shape positions.

editor.distributeShapes([box1, box2], 'horizontal')
editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')

distributeShapes(
  shapes: TLShape[] | TLShapeId[],
  operation: 'horizontal' | 'vertical'
): this

TLShape[] | TLShapeId[]

'horizontal' | 'vertical'

this

TLShape, TLShapeId

duplicatePage()

Public method

Duplicate a page.

duplicatePage(page: TLPage | TLPageId, createId?: TLPageId): this

TLPage | TLPageId

TLPageId

this

TLPage, TLPageId

duplicateShapes()

Public method

Duplicate shapes.

editor.duplicateShapes(['box1', 'box2'], { x: 8, y: 8 })
editor.duplicateShapes(editor.getSelectedShapes(), { x: 8, y: 8 })

duplicateShapes(shapes: TLShape[] | TLShapeId[], offset?: VecLike): this

TLShape[] | TLShapeId[]

VecLike

this

TLShape, TLShapeId, VecLike

findCommonAncestor()

Public method

Get the common ancestor of two or more shapes that matches a predicate.

findCommonAncestor(
  shapes: TLShape[] | TLShapeId[],
  predicate?: (shape: TLShape) => boolean
): TLShapeId | undefined

TLShape[] | TLShapeId[]

(shape: TLShape) => boolean

TLShapeId | undefined

TLShape, TLShapeId

findShapeAncestor()

Public method

Find the first ancestor matching the given predicate

const ancestor = editor.findShapeAncestor(myShape)
const ancestor = editor.findShapeAncestor(myShape.id)
const ancestor = editor.findShapeAncestor(
  myShape.id,
  (shape) => shape.type === 'frame'
)

findShapeAncestor(
  shape: TLShape | TLShapeId,
  predicate: (parent: TLShape) => boolean
): TLShape | undefined

TLShape | TLShapeId

(parent: TLShape) => boolean

TLShape | undefined

TLShape, TLShapeId

flipShapes()

Public method

Flip shape positions.

editor.flipShapes([box1, box2], 'horizontal', 32)
editor.flipShapes(editor.getSelectedShapeIds(), 'horizontal', 32)

flipShapes(
  shapes: TLShape[] | TLShapeId[],
  operation: 'horizontal' | 'vertical'
): this

TLShape[] | TLShapeId[]

'horizontal' | 'vertical'

this

TLShape, TLShapeId

getAncestorPageId()

Public method

Get the id of the containing page for a given shape.

getAncestorPageId(shape?: TLShape | TLShapeId): TLPageId | undefined

TLShape | TLShapeId

TLPageId | undefined

The id of the page that contains the shape, or undefined if the shape is undefined.

TLShape, TLShapeId, TLPageId

getArrowInfo()

Public method

Get cached info about an arrow.

const arrowInfo = editor.getArrowInfo(myArrow)

getArrowInfo(shape: TLArrowShape | TLShapeId): TLArrowInfo | undefined

TLArrowShape | TLShapeId

TLArrowInfo | undefined

TLArrowShape, TLShapeId, TLArrowInfo

getArrowsBoundTo()

Public method

Get all arrows bound to a shape.

getArrowsBoundTo(shapeId: TLShapeId): {
  arrowId: TLShapeId
  handleId: 'end' | 'start'
}[]

TLShapeId

{
  arrowId: TLShapeId
  handleId: 'end' | 'start'
}[]

TLShapeId

getAsset()

Public method

Get an asset by its id.

editor.getAsset('asset1')

getAsset(asset: TLAsset | TLAssetId): TLAsset | undefined

TLAsset | TLAssetId

TLAsset | undefined

TLAsset, TLAssetId

getAssetForExternalContent()

Public method

Get an asset for an external asset content type.

const asset = await editor.getAssetForExternalContent({
  type: 'file',
  file: myFile,
})
const asset = await editor.getAssetForExternalContent({
  type: 'url',
  url: myUrl,
})

getAssetForExternalContent(
  info: TLExternalAssetContent
): Promise<TLAsset | undefined>

TLExternalAssetContent

Promise<TLAsset | undefined>

The asset.

TLExternalAssetContent, TLAsset

getAssets()

Public method

Get all assets in the editor.

getAssets(): (
  | import('@tldraw/tlschema').TLBookmarkAsset
  | TLImageAsset
  | TLVideoAsset
)[]

TLBookmarkAsset, TLImageAsset, TLVideoAsset

getCamera()

Public method

The current camera.

getCamera(): import('@tldraw/tlschema').TLCamera

TLCamera

getCameraState()

Public method

Whether the camera is moving or idle.

getCameraState(): 'idle' | 'moving'

getCanRedo()

Public method

Whether the app can redo.

getCanRedo(): boolean

getCanUndo()

Public method

Whether the app can undo.

getCanUndo(): boolean

getCollaborators()

Public method

Returns a list of presence records for all peer collaborators. This will return the latest presence record for each connected user.

getCollaborators(): import('@tldraw/tlschema').TLInstancePresence[]

TLInstancePresence

getCollaboratorsOnCurrentPage()

Public method

Returns a list of presence records for all peer collaborators on the current page. This will return the latest presence record for each connected user.

getCollaboratorsOnCurrentPage(): import('@tldraw/tlschema').TLInstancePresence[]

TLInstancePresence

getContentFromCurrentPage()

Public method

Get content that can be exported for the given shape ids.

getContentFromCurrentPage(
  shapes: TLShape[] | TLShapeId[]
): TLContent | undefined

TLShape[] | TLShapeId[]

TLContent | undefined

The exported content.

TLShape, TLShapeId, TLContent

getCroppingShapeId()

Public method

The current cropping shape's id.

getCroppingShapeId(): null | TLShapeId

TLShapeId

getCulledShapes()

Public method

Get culled shapes.

getCulledShapes(): Set<TLShapeId>

TLShapeId

getCurrentPage()

Public method

The current page.

getCurrentPage(): TLPage

TLPage

getCurrentPageBounds()

Public method

The bounds of the current page (the common bounds of all of the shapes on the page).

getCurrentPageBounds(): Box | undefined

Box

getCurrentPageId()

Public method

The current page id.

getCurrentPageId(): TLPageId

TLPageId

getCurrentPageRenderingShapesSorted()

Public method

An array containing all of the rendering shapes in the current page, sorted in z-index order (accounting for nested shapes): e.g. A, B, BA, BB, C.

getCurrentPageRenderingShapesSorted(): TLShape[]

TLShape

getCurrentPageShapeIds()

Public method

An array of all of the shapes on the current page.

getCurrentPageShapeIds(): Set<TLShapeId>

TLShapeId

getCurrentPageShapes()

Public method

An array containing all of the shapes in the current page.

getCurrentPageShapes(): TLShape[]

TLShape

getCurrentPageShapesSorted()

Public method

An array containing all of the shapes in the current page, sorted in z-index order (accounting for nested shapes): e.g. A, B, BA, BB, C.

getCurrentPageShapesSorted(): TLShape[]

TLShape

getCurrentPageState()

Public method

The current page state.

getCurrentPageState(): TLInstancePageState

TLInstancePageState

getCurrentTool()

Public method

The current selected tool.

getCurrentTool(): StateNode

StateNode

getCurrentToolId()

Public method

The id of the current selected tool.

getCurrentToolId(): string

getDocumentSettings()

Public method

The global document settings that apply to all users.

getDocumentSettings(): TLDocument

TLDocument

getDroppingOverShape()

Public method

Get the shape that some shapes should be dropped on at a given point.

getDroppingOverShape(
  point: VecLike,
  droppingShapes?: TLShape[]
): TLUnknownShape | undefined

VecLike

TLShape[]

TLUnknownShape | undefined

The shape to drop on.

VecLike, TLShape, TLUnknownShape

getEditingShape()

Public method

The current editing shape.

getEditingShape(): TLShape | undefined

TLShape

getEditingShapeId()

Public method

The current editing shape's id.

getEditingShapeId(): null | TLShapeId

TLShapeId

getErasingShapeIds()

Public method

The editor's current erasing ids.

getErasingShapeIds(): TLShapeId[]

TLShapeId

getErasingShapes()

Public method

The editor's current erasing shapes.

getErasingShapes(): NonNullable<TLShape | undefined>[]

TLShape

getFocusedGroup()

Public method

The current focused group.

getFocusedGroup(): TLShape | undefined

TLShape

getFocusedGroupId()

Public method

The current focused group id.

getFocusedGroupId(): TLPageId | TLShapeId

TLPageId, TLShapeId

getHighestIndexForParent()

Public method

Get the index above the highest child of a given parent.

getHighestIndexForParent(parent: TLPage | TLParentId | TLShape): IndexKey

TLPage | TLParentId | TLShape

IndexKey

The index.

TLPage, TLParentId, TLShape

getHintingShape()

Public method

The editor's current hinting shapes.

getHintingShape(): NonNullable<TLShape | undefined>[]

TLShape

getHintingShapeIds()

Public method

The editor's current hinting shape ids.

getHintingShapeIds(): TLShapeId[]

TLShapeId

getHoveredShape()

Public method

The current hovered shape.

getHoveredShape(): TLShape | undefined

TLShape

getHoveredShapeId()

Public method

The current hovered shape id.

getHoveredShapeId(): null | TLShapeId

TLShapeId

getInitialMetaForShape()

Public method

Get the initial meta value for a shape.

editor.getInitialMetaForShape = (shape) => {
  if (shape.type === 'note') {
    return { createdBy: myCurrentUser.id }
  }
}

getInitialMetaForShape(_shape: TLShape): JsonObject

TLShape

JsonObject

TLShape

getInstanceState()

Public method

The current instance's state.

getInstanceState(): TLInstance

TLInstance

getIsMenuOpen()

Public method

Get whether any menus are open.

editor.getIsMenuOpen()

getIsMenuOpen(): boolean

getOnlySelectedShape()

Public method

The app's only selected shape.

getOnlySelectedShape(): null | TLShape

TLShape

getOnlySelectedShapeId()

Public method

The id of the app's only selected shape.

getOnlySelectedShapeId(): null | TLShapeId

TLShapeId

getOpenMenus()

Public method

A set of strings representing any open menus. When menus are open, certain interactions will behave differently; for example, when a draw tool is selected and a menu is open, a pointer-down will not create a dot (because the user is probably trying to close the menu) however a pointer-down event followed by a drag will begin drawing a line (because the user is BOTH trying to close the menu AND start drawing a line).

getOpenMenus(): string[]

getOutermostSelectableShape()

Public method

Get the shape that should be selected when you click on a given shape, assuming there is nothing already selected. It will not return anything higher than or including the current focus layer.

getOutermostSelectableShape(
  shape: TLShape | TLShapeId,
  filter?: (shape: TLShape) => boolean
): TLShape

TLShape | TLShapeId

(shape: TLShape) => boolean

TLShape

The outermost selectable shape.

TLShape, TLShapeId

getPage()

Public method

Get a page.

editor.getPage(myPage.id)
editor.getPage(myPage)

getPage(page: TLPage | TLPageId): TLPage | undefined

TLPage | TLPageId

TLPage | undefined

TLPage, TLPageId

getPages()

Public method

Info about the project's current pages.

getPages(): TLPage[]

TLPage

getPageShapeIds()

Public method

Get the ids of shapes on a page.

const idsOnPage1 = editor.getPageShapeIds('page1')
const idsOnPage2 = editor.getPageShapeIds(myPage2)

getPageShapeIds(page: TLPage | TLPageId): Set<TLShapeId>

TLPage | TLPageId

Set<TLShapeId>

TLPage, TLPageId, TLShapeId

getPageStates()

Public method

Page states.

getPageStates(): TLInstancePageState[]

TLInstancePageState

getPath()

Public method

The editor's current path of active states.

editor.getPath() // "select.idle"

getPath(): string

getPointInParentSpace()

Public method

Convert a delta in the current page space to a point in the local space of a shape's parent.

editor.getPointInParentSpace(myShape.id, { x: 100, y: 100 })

getPointInParentSpace(shape: TLShape | TLShapeId, point: VecLike): Vec

TLShape | TLShapeId

VecLike

Vec

TLShape, TLShapeId, VecLike, Vec

getPointInShapeSpace()

Public method

Convert a point in the current page space to a point in the local space of a shape. For example, if a shape's page point were { x: 100, y: 100 }, a page point at { x: 110, y: 110 } would be at { x: 10, y: 10 } in the shape's local space.

editor.getPointInShapeSpace(myShape, { x: 100, y: 100 })

getPointInShapeSpace(shape: TLShape | TLShapeId, point: VecLike): Vec

TLShape | TLShapeId

VecLike

Vec

TLShape, TLShapeId, VecLike, Vec

getRenderingBounds()

Public method

The current rendering bounds in the current page space, used for checking which shapes are "on screen".

getRenderingBounds(): Box

Box

getRenderingShapes()

Public method

Get the shapes that should be displayed in the current viewport.

getRenderingShapes(): {
  backgroundIndex: number
  id: TLShapeId
  index: number
  opacity: number
  shape: TLShape
  util: ShapeUtil<TLUnknownShape>
}[]

TLShapeId, TLShape, ShapeUtil, TLUnknownShape

getSelectedShapeAtPoint()

Public method

Get the top-most selected shape at the given point, ignoring groups.

getSelectedShapeAtPoint(point: VecLike): TLShape | undefined

VecLike

TLShape | undefined

The top-most selected shape at the given point, or undefined if there is no shape at the point.

VecLike, TLShape

getSelectedShapeIds()

Public method

The current selected ids.

getSelectedShapeIds(): TLShapeId[]

TLShapeId

getSelectedShapes()

Public method

An array containing all of the currently selected shapes.

getSelectedShapes(): TLShape[]

TLShape

getSelectionPageBounds()

Public method

The current page bounds of all the selected shapes. If the selection is rotated, then these bounds are the axis-aligned box that the rotated bounds would fit inside of.

getSelectionPageBounds(): Box | null

Box

getSelectionRotatedPageBounds()

Public method

The bounds of the selection bounding box in the current page space.

getSelectionRotatedPageBounds(): Box | undefined

Box

getSelectionRotatedScreenBounds()

Public method

The bounds of the selection bounding box in the current page space.

getSelectionRotatedScreenBounds(): Box | undefined

Box

getSelectionRotation()

Public method

The rotation of the selection bounding box in the current page space.

getSelectionRotation(): number

getShape()

Public method

Get a shape by its id.

editor.getShape('box1')

getShape<T extends TLShape = TLShape>(
  shape: TLParentId | TLShape
): T | undefined

TLParentId | TLShape

T | undefined

TLShape, TLParentId

getShapeAncestors()

Public method

Get the ancestors of a shape.

const ancestors = editor.getShapeAncestors(myShape)
const ancestors = editor.getShapeAncestors(myShapeId)

getShapeAncestors(shape: TLShape | TLShapeId, acc?: TLShape[]): TLShape[]

TLShape | TLShapeId

TLShape[]

TLShape[]

TLShape, TLShapeId

getShapeAndDescendantIds()

Public method

Get the shape ids of all descendants of the given shapes (including the shapes themselves).

getShapeAndDescendantIds(ids: TLShapeId[]): Set<TLShapeId>

TLShapeId[]

Set<TLShapeId>

The decscendant ids.

TLShapeId

getShapeAtPoint()

Public method

Get the shape at the current point.

getShapeAtPoint(
  point: VecLike,
  opts?: {
    filter?: ((shape: TLShape) => boolean) | undefined
    hitFrameInside?: boolean | undefined
    hitInside?: boolean | undefined
    hitLabels?: boolean | undefined
    margin?: number | undefined
    renderingOnly?: boolean | undefined
  }
): TLShape | undefined

VecLike

{
  filter?: ((shape: TLShape) => boolean) | undefined
  hitFrameInside?: boolean | undefined
  hitInside?: boolean | undefined
  hitLabels?: boolean | undefined
  margin?: number | undefined
  renderingOnly?: boolean | undefined
}

TLShape | undefined

The shape at the given point, or undefined if there is no shape at the point.

VecLike, TLShape

getShapeClipPath()

Public method

Get the clip path for a shape.

const clipPath = editor.getShapeClipPath(shape)
const clipPath = editor.getShapeClipPath(shape.id)

getShapeClipPath(shape: TLShape | TLShapeId): string | undefined

TLShape | TLShapeId

string | undefined

The clip path or undefined.

TLShape, TLShapeId

getShapeGeometry()

Public method

Get the geometry of a shape.

editor.getShapeGeometry(myShape)
editor.getShapeGeometry(myShapeId)

getShapeGeometry<T extends Geometry2d>(shape: TLShape | TLShapeId): T

TLShape | TLShapeId

T

Geometry2d, TLShape, TLShapeId

getShapeHandles()

Public method

Get the handles (if any) for a shape.

editor.getShapeHandles(myShape)
editor.getShapeHandles(myShapeId)

getShapeHandles<T extends TLShape>(shape: T | T['id']): TLHandle[] | undefined

T | T['id']

TLHandle[] | undefined

TLShape, TLHandle

getShapeLocalTransform()

Public method

Get the local transform for a shape as a matrix model. This transform reflects both its translation (x, y) from from either its parent's top left corner, if the shape's parent is another shape, or else from the 0,0 of the page, if the shape's parent is the page; and the shape's rotation.

editor.getShapeLocalTransform(myShape)

getShapeLocalTransform(shape: TLShape | TLShapeId): Mat

TLShape | TLShapeId

Mat

TLShape, TLShapeId, Mat

getShapeMask()

Public method

Get the mask (in the current page space) for a shape.

const pageMask = editor.getShapeMask(shape.id)

getShapeMask(shape: TLShape | TLShapeId): undefined | VecLike[]

TLShape | TLShapeId

undefined | VecLike[]

The mask for the shape.

TLShape, TLShapeId, VecLike

getShapeMaskedPageBounds()

Public method

Get the bounds of a shape in the current page space, incorporating any masks. For example, if the shape were the child of a frame and was half way out of the frame, the bounds would be the half of the shape that was in the frame.

editor.getShapeMaskedPageBounds(myShape)
editor.getShapeMaskedPageBounds(myShapeId)

getShapeMaskedPageBounds(shape: TLShape | TLShapeId): Box | undefined

TLShape | TLShapeId

Box | undefined

TLShape, TLShapeId, Box

getShapePageBounds()

Public method

Get the bounds of a shape in the current page space.

editor.getShapePageBounds(myShape)
editor.getShapePageBounds(myShapeId)

getShapePageBounds(shape: TLShape | TLShapeId): Box | undefined

TLShape | TLShapeId

Box | undefined

TLShape, TLShapeId, Box

getShapePageTransform()

Public method

Get the transform of a shape in the current page space.

editor.getShapePageTransform(myShape)
editor.getShapePageTransform(myShapeId)

getShapePageTransform(shape: TLShape | TLShapeId): Mat

TLShape | TLShapeId

Mat

TLShape, TLShapeId, Mat

getShapeParent()

Public method

Get the parent shape for a given shape. Returns undefined if the shape is the direct child of the page.

editor.getShapeParent(myShape)

getShapeParent(shape?: TLShape | TLShapeId): TLShape | undefined

TLShape | TLShapeId

TLShape | undefined

TLShape, TLShapeId

getShapeParentTransform()

Public method

Get the local transform of a shape's parent as a matrix model.

editor.getShapeParentTransform(myShape)

getShapeParentTransform(shape: TLShape | TLShapeId): Mat

TLShape | TLShapeId

Mat

TLShape, TLShapeId, Mat

getShapesAtPoint()

Public method

Get the shapes, if any, at a given page point.

editor.getShapesAtPoint({ x: 100, y: 100 })
editor.getShapesAtPoint({ x: 100, y: 100 }, { hitInside: true, exact: true })

getShapesAtPoint(
  point: VecLike,
  opts?: {
    hitInside?: boolean | undefined
    margin?: number | undefined
  }
): TLShape[]

VecLike

{
  hitInside?: boolean | undefined
  margin?: number | undefined
}

TLShape[]

VecLike, TLShape

getShapeStyleIfExists()

Public method

getShapeStyleIfExists<T>(shape: TLShape, style: StyleProp<T>): T | undefined

TLShape

StyleProp<T>

T | undefined

TLShape, StyleProp

getShapeUtil()

Public method

Get a shape util from a shape itself.

const util = editor.getShapeUtil(myArrowShape)
const util = editor.getShapeUtil('arrow')
const util = editor.getShapeUtil<TLArrowShape>(myArrowShape)
const util = editor.getShapeUtil(TLArrowShape)('arrow')

getShapeUtil<S extends TLUnknownShape>(
  shape: S | TLShapePartial<S>
): ShapeUtil<S>

S | TLShapePartial<S>

ShapeUtil<S>

TLUnknownShape, TLShapePartial, ShapeUtil

getShapeUtil()

Public method

getShapeUtil<S extends TLUnknownShape>(type: S['type']): ShapeUtil<S>

S['type']

ShapeUtil<S>

TLUnknownShape, ShapeUtil

getShapeUtil()

Public method

getShapeUtil<T extends ShapeUtil>(
  type: T extends ShapeUtil<infer R> ? R['type'] : string
): T

T extends ShapeUtil<infer R>
  ? R['type']
  : string

T

ShapeUtil

getSharedOpacity()

Public method

Get the currently selected shared opacity. If any shapes are selected, this returns the shared opacity of the selected shapes. Otherwise, this returns the chosen opacity for the next shape.

getSharedOpacity(): SharedStyle<number>

SharedStyle

getSharedStyles()

Public method

A map of all the current styles either in the current selection, or that are relevant to the current tool.

const color = editor.getSharedStyles().get(DefaultColorStyle)
if (color && color.type === 'shared') {
  print('All selected shapes have the same color:', color.value)
}

getSharedStyles(): ReadonlySharedStyleMap

ReadonlySharedStyleMap

getSortedChildIdsForParent()

Public method

Get an array of all the children of a shape.

editor.getSortedChildIdsForParent('frame1')

getSortedChildIdsForParent(parent: TLPage | TLParentId | TLShape): TLShapeId[]

TLPage | TLParentId | TLShape

TLShapeId[]

TLPage, TLParentId, TLShape, TLShapeId

getStateDescendant()

Public method

Get a descendant by its path.

state.getStateDescendant('select')
state.getStateDescendant('select.brushing')

getStateDescendant<T extends StateNode>(path: string): T | undefined

string

T | undefined

StateNode

getStyleForNextShape()

Public method

Get the style for the next shape.

const color = editor.getStyleForNextShape(DefaultColorStyle)

getStyleForNextShape<T>(style: StyleProp<T>): T

StyleProp<T>

T

StyleProp

getSvg()

Public method

getSvg(
  shapes: TLShape[] | TLShapeId[],
  opts?: Partial<TLSvgOptions>
): Promise<SVGSVGElement | undefined>

TLShape[] | TLShapeId[]

Partial<TLSvgOptions>

Promise<SVGSVGElement | undefined>

TLShape, TLShapeId, TLSvgOptions

getSvgElement()

Public method

Get an exported SVG element of the given shapes.

getSvgElement(
  shapes: TLShape[] | TLShapeId[],
  opts?: Partial<TLSvgOptions>
): Promise<
  | {
      height: number
      svg: SVGSVGElement
      width: number
    }
  | undefined
>

TLShape[] | TLShapeId[]

Partial<TLSvgOptions>

Promise<
  | {
      height: number
      svg: SVGSVGElement
      width: number
    }
  | undefined
>

The SVG element.

TLShape, TLShapeId, TLSvgOptions

getSvgString()

Public method

Get an exported SVG string of the given shapes.

getSvgString(
  shapes: TLShape[] | TLShapeId[],
  opts?: Partial<TLSvgOptions>
): Promise<
  | {
      height: number
      svg: string
      width: number
    }
  | undefined
>

TLShape[] | TLShapeId[]

Partial<TLSvgOptions>

Promise<
  | {
      height: number
      svg: string
      width: number
    }
  | undefined
>

The SVG element.

TLShape, TLShapeId, TLSvgOptions

getViewportPageBounds()

Public method

The current viewport in the current page space.

getViewportPageBounds(): Box

Box

getViewportPageCenter()

Public method

The center of the viewport in the current page space.

getViewportPageCenter(): Vec

Vec

getViewportScreenBounds()

Public method

The bounds of the editor's viewport in screen space.

getViewportScreenBounds(): Box

Box

getViewportScreenCenter()

Public method

The center of the editor's viewport in screen space.

getViewportScreenCenter(): Vec

Vec

getZoomLevel()

Public method

The current camera zoom level.

getZoomLevel(): number

groupShapes()

Public method

Create a group containing the provided shapes.

groupShapes(shapes: TLShape[] | TLShapeId[], groupId?: TLShapeId): this

TLShape[] | TLShapeId[]

TLShapeId

this

TLShape, TLShapeId

hasAncestor()

Public method

Returns true if the the given shape has the given ancestor.

hasAncestor(
  shape: TLShape | TLShapeId | undefined,
  ancestorId: TLShapeId
): boolean

TLShape | TLShapeId | undefined

TLShapeId

boolean

TLShape, TLShapeId

interrupt()

Public method

Dispatch an interrupt event.

editor.interrupt()

interrupt(): this

isIn()

Public method

Get whether a certain tool (or other state node) is currently active.

editor.isIn('select')
editor.isIn('select.brushing')

isIn(path: string): boolean

string

boolean

isInAny()

Public method

Get whether the state node is in any of the given active paths.

state.isInAny('select', 'erase')
state.isInAny('select.brushing', 'erase.idle')

isInAny(...paths: string[]): boolean

string[]

boolean

isPointInShape()

Public method

Test whether a point (in the current page space) will will a shape. This method takes into account masks, such as when a shape is the child of a frame and is partially clipped by the frame.

editor.isPointInShape({ x: 100, y: 100 }, myShape)

isPointInShape(
  shape: TLShape | TLShapeId,
  point: VecLike,
  opts?: {
    hitInside?: boolean | undefined
    margin?: number | undefined
  }
): boolean

TLShape | TLShapeId

VecLike

{
  hitInside?: boolean | undefined
  margin?: number | undefined
}

boolean

TLShape, TLShapeId, VecLike

isShapeInPage()

Public method

Get whether the given shape is the descendant of the given page.

editor.isShapeInPage(myShape)
editor.isShapeInPage(myShape, 'page1')

isShapeInPage(shape: TLShape | TLShapeId, pageId?: TLPageId): boolean

TLShape | TLShapeId

TLPageId

boolean

TLShape, TLShapeId, TLPageId

isShapeOfType()

Public method

Get whether a shape matches the type of a TLShapeUtil.

const isArrowShape = isShapeOfType<TLArrowShape>(someShape, 'arrow')

isShapeOfType<T extends TLUnknownShape>(
  shape: TLUnknownShape,
  type: T['type']
): shape is T

TLUnknownShape

T['type']

shape is T

TLUnknownShape

isShapeOfType()

Public method

isShapeOfType<T extends TLUnknownShape>(
  shapeId: TLUnknownShape['id'],
  type: T['type']
): shapeId is T['id']

TLUnknownShape['id']

T['type']

shapeId is T['id']

TLUnknownShape

isShapeOrAncestorLocked()

Public method

Check whether a shape or its parent is locked.

isShapeOrAncestorLocked(shape?: TLShape): boolean

TLShape

boolean

TLShape

isShapeOrAncestorLocked()

Public method

isShapeOrAncestorLocked(id?: TLShapeId): boolean

TLShapeId

boolean

TLShapeId

mark()

Public method

Create a new "mark", or stopping point, in the undo redo history. Creating a mark will clear any redos.

editor.mark()
editor.mark('flip shapes')

mark(markId?: string, onUndo?: boolean, onRedo?: boolean): this

string

boolean

boolean

this

moveShapesToPage()

Public method

Move shapes to page.

editor.moveShapesToPage(['box1', 'box2'], 'page1')

moveShapesToPage(shapes: TLShape[] | TLShapeId[], pageId: TLPageId): this

TLShape[] | TLShapeId[]

TLPageId

this

TLShape, TLShapeId, TLPageId

nudgeShapes()

Public method

Move shapes by a delta.

editor.nudgeShapes(['box1', 'box2'], { x: 8, y: 8 })
editor.nudgeShapes(
  editor.getSelectedShapes(),
  { x: 8, y: 8 },
  { squashing: true }
)

nudgeShapes(
  shapes: TLShape[] | TLShapeId[],
  offset: VecLike,
  historyOptions?: TLCommandHistoryOptions
): this

TLShape[] | TLShapeId[]

VecLike

TLCommandHistoryOptions

this

TLShape, TLShapeId, VecLike, TLCommandHistoryOptions

packShapes()

Public method

Pack shapes into a grid centered on their current position. Based on potpack (https://github.com/mapbox/potpack).

editor.packShapes([box1, box2], 32)
editor.packShapes(editor.getSelectedShapeIds(), 32)

packShapes(shapes: TLShape[] | TLShapeId[], gap: number): this

TLShape[] | TLShapeId[]

number

this

TLShape, TLShapeId

pageToScreen()

Public method

Convert a point in the current page space to a point in current screen space.

editor.pageToScreen({ x: 100, y: 100 })

pageToScreen(point: VecLike): {
  x: number
  y: number
  z: number
}

VecLike

{
  x: number
  y: number
  z: number
}

VecLike

pageToViewport()

Public method

Convert a point in the current page space to a point in current viewport space.

editor.pageToViewport({ x: 100, y: 100 })

pageToViewport(point: VecLike): {
  x: number
  y: number
  z: number
}

VecLike

{
  x: number
  y: number
  z: number
}

VecLike

pan()

Public method

Pan the camera.

editor.pan({ x: 100, y: 100 })
editor.pan({ x: 100, y: 100 }, { duration: 1000 })

pan(offset: VecLike, animation?: TLAnimationOptions): this

VecLike

TLAnimationOptions

this

VecLike, TLAnimationOptions

panZoomIntoView()

Public method

Pan or pan/zoom the selected ids into view. This method tries to not change the zoom if possible.

panZoomIntoView(ids: TLShapeId[], animation?: TLAnimationOptions): this

TLShapeId[]

TLAnimationOptions

this

TLShapeId, TLAnimationOptions

popFocusedGroupId()

Public method

Exit the current focused group, moving up to the next parent group if there is one.

popFocusedGroupId(): this

putContentOntoCurrentPage()

Public method

Place content into the editor.

putContentOntoCurrentPage(
  content: TLContent,
  options?: {
    point?: VecLike
    preserveIds?: boolean
    preservePosition?: boolean
    select?: boolean
  }
): this

TLContent

{
  point?: VecLike
  preserveIds?: boolean
  preservePosition?: boolean
  select?: boolean
}

this

TLContent, VecLike

putExternalContent()

Public method

Handle external content, such as files, urls, embeds, or plain text which has been put into the app, for example by pasting external text or dropping external images onto canvas.

putExternalContent(info: TLExternalContent): Promise<void>

TLExternalContent

Promise<void>

TLExternalContent

redo()

Public method

Redo to the next mark.

editor.redo()

redo(): this

registerExternalAssetHandler()

Public method

Register an external content handler. This handler will be called when the editor receives external content of the provided type. For example, the 'image' type handler will be called when a user drops an image onto the canvas.

editor.registerExternalAssetHandler('text', myHandler)

registerExternalAssetHandler<T extends TLExternalAssetContent['type']>(
  type: T,
  handler:
    | ((
        info: TLExternalAssetContent & {
          type: T
        }
      ) => Promise<TLAsset>)
    | null
): this

T

  | ((
      info: TLExternalAssetContent & {
        type: T
      }
    ) => Promise<TLAsset>)
  | null

this

TLExternalAssetContent, TLAsset

registerExternalContentHandler()

Public method

Register an external content handler. This handler will be called when the editor receives external content of the provided type. For example, the 'image' type handler will be called when a user drops an image onto the canvas.

editor.registerExternalContentHandler('text', myHandler)

registerExternalContentHandler<T extends TLExternalContent['type']>(
  type: T,
  handler:
    | ((
        info: T extends TLExternalContent['type']
          ? TLExternalContent & {
              type: T
            }
          : TLExternalContent
      ) => void)
    | null
): this

T

  | ((
      info: T extends TLExternalContent['type']
        ? TLExternalContent & {
            type: T
          }
        : TLExternalContent
    ) => void)
  | null

this

TLExternalContent

renamePage()

Public method

Rename a page.

editor.renamePage('page1', 'My Page')

renamePage(
  page: TLPage | TLPageId,
  name: string,
  historyOptions?: TLCommandHistoryOptions
): this

TLPage | TLPageId

string

TLCommandHistoryOptions

this

TLPage, TLPageId, TLCommandHistoryOptions

reparentShapes()

Public method

Reparent shapes to a new parent. This operation preserves the shape's current page positions / rotations.

editor.reparentShapes([box1, box2], 'frame1')
editor.reparentShapes([box1.id, box2.id], 'frame1')
editor.reparentShapes([box1.id, box2.id], 'frame1', 4)

reparentShapes(
  shapes: TLShape[] | TLShapeId[],
  parentId: TLParentId,
  insertIndex?: IndexKey
): this

TLShape[] | TLShapeId[]

TLParentId

IndexKey

this

TLShape, TLShapeId, TLParentId

resetZoom()

Public method

Set the zoom back to 100%.

editor.resetZoom()
editor.resetZoom(editor.getViewportScreenCenter(), { duration: 200 })
editor.resetZoom(editor.getViewportScreenCenter(), { duration: 200 })

resetZoom(point?: Vec, animation?: TLAnimationOptions): this

Vec

TLAnimationOptions

this

Vec, TLAnimationOptions

resizeShape()

Public method

Resize a shape.

resizeShape(
  shape: TLShape | TLShapeId,
  scale: VecLike,
  options?: TLResizeShapeOptions
): this

TLShape | TLShapeId

VecLike

TLResizeShapeOptions

this

TLShape, TLShapeId, VecLike, TLResizeShapeOptions

rotateShapesBy()

Public method

Rotate shapes by a delta in radians. Note: Currently, this assumes that the shapes are your currently selected shapes.

editor.rotateShapesBy(editor.getSelectedShapeIds(), Math.PI)
editor.rotateShapesBy(editor.getSelectedShapeIds(), Math.PI / 2)

rotateShapesBy(shapes: TLShape[] | TLShapeId[], delta: number): this

TLShape[] | TLShapeId[]

number

this

TLShape, TLShapeId

screenToPage()

Public method

Convert a point in screen space to a point in the current page space.

editor.screenToPage({ x: 100, y: 100 })

screenToPage(point: VecLike): {
  x: number
  y: number
  z: number
}

VecLike

{
  x: number
  y: number
  z: number
}

VecLike

select()

Public method

Select one or more shapes.

editor.select('id1')
editor.select('id1', 'id2')

select(...shapes: TLShape[] | TLShapeId[]): this

TLShape[] | TLShapeId[]

this

TLShape, TLShapeId

selectAll()

Public method

Select all direct children of the current page.

editor.selectAll()

selectAll(): this

selectNone()

Public method

Clear the selection.

editor.selectNone()

selectNone(): this

sendBackward()

Public method

Send shapes backward in the page's object list.

editor.sendBackward(['id1', 'id2'])
editor.sendBackward([box1, box2])

sendBackward(shapes: TLShape[] | TLShapeId[]): this

TLShape[] | TLShapeId[]

this

TLShape, TLShapeId

sendToBack()

Public method

Send shapes to the back of the page's object list.

editor.sendToBack(['id1', 'id2'])
editor.sendToBack(box1, box2)

sendToBack(shapes: TLShape[] | TLShapeId[]): this

TLShape[] | TLShapeId[]

this

TLShape, TLShapeId

setCamera()

Public method

Set the current camera.

editor.setCamera({ x: 0, y: 0 })
editor.setCamera({ x: 0, y: 0, z: 1.5 })
editor.setCamera(
  { x: 0, y: 0, z: 1.5 },
  { duration: 1000, easing: (t) => t * t }
)

setCamera(point: VecLike, animation?: TLAnimationOptions): this

VecLike

TLAnimationOptions

this

VecLike, TLAnimationOptions

setCroppingShape()

Public method

Set the current cropping shape.

editor.setCroppingShape(myShape)
editor.setCroppingShape(myShape.id)

setCroppingShape(shape: null | TLShape | TLShapeId): this

null | TLShape | TLShapeId

this

TLShape, TLShapeId

setCurrentPage()

Public method

Set the current page.

editor.setCurrentPage('page1')
editor.setCurrentPage(myPage1)

setCurrentPage(
  page: TLPage | TLPageId,
  historyOptions?: TLCommandHistoryOptions
): this

TLPage | TLPageId

TLCommandHistoryOptions

this

TLPage, TLPageId, TLCommandHistoryOptions

setCurrentTool()

Public method

Set the selected tool.

editor.setCurrentTool('hand')
editor.setCurrentTool('hand', { date: Date.now() })

setCurrentTool(id: string, info?: {}): this

string

{}

this

setEditingShape()

Public method

Set the current editing shape.

editor.setEditingShape(myShape)
editor.setEditingShape(myShape.id)

setEditingShape(shape: null | TLShape | TLShapeId): this

null | TLShape | TLShapeId

this

TLShape, TLShapeId

setErasingShapes()

Public method

Set the editor's current erasing shapes.

editor.setErasingShapes([myShape])
editor.setErasingShapes([myShape.id])

setErasingShapes(shapes: TLShape[] | TLShapeId[]): this

TLShape[] | TLShapeId[]

this

TLShape, TLShapeId

setFocusedGroup()

Public method

Set the current focused group shape.

setFocusedGroup(shape: null | TLGroupShape | TLShapeId): this

null | TLGroupShape | TLShapeId

this

TLGroupShape, TLShapeId

setHintingShapes()

Public method

Set the editor's current hinting shapes.

editor.setHintingShapes([myShape])
editor.setHintingShapes([myShape.id])

setHintingShapes(shapes: TLShape[] | TLShapeId[]): this

TLShape[] | TLShapeId[]

this

TLShape, TLShapeId

setHoveredShape()

Public method

Set the editor's current hovered shape.

editor.setHoveredShape(myShape)
editor.setHoveredShape(myShape.id)

setHoveredShape(shape: null | TLShape | TLShapeId): this

null | TLShape | TLShapeId

this

TLShape, TLShapeId

setOpacityForNextShapes()

Public method

Set the opacity for the next shapes. This will effect subsequently created shapes.

editor.setOpacityForNextShapes(0.5)
editor.setOpacityForNextShapes(0.5, { squashing: true })

setOpacityForNextShapes(
  opacity: number,
  historyOptions?: TLCommandHistoryOptions
): this

number

TLCommandHistoryOptions

this

TLCommandHistoryOptions

setOpacityForSelectedShapes()

Public method

Set the current opacity. This will effect any selected shapes.

editor.setOpacityForSelectedShapes(0.5)
editor.setOpacityForSelectedShapes(0.5, { squashing: true })

setOpacityForSelectedShapes(
  opacity: number,
  historyOptions?: TLCommandHistoryOptions
): this

number

TLCommandHistoryOptions

this

TLCommandHistoryOptions

setSelectedShapes()

Public method

Select one or more shapes.

editor.setSelectedShapes(['id1'])
editor.setSelectedShapes(['id1', 'id2'])

setSelectedShapes(
  shapes: TLShape[] | TLShapeId[],
  historyOptions?: TLCommandHistoryOptions
): this

TLShape[] | TLShapeId[]

TLCommandHistoryOptions

this

TLShape, TLShapeId, TLCommandHistoryOptions

setStyleForNextShapes()

Public method

Set the value of a StyleProp for the next shapes. This change will be applied to subsequently created shapes.

editor.setStyleForNextShapes(DefaultColorStyle, 'red')
editor.setStyleForNextShapes(DefaultColorStyle, 'red', { ephemeral: true })

setStyleForNextShapes<T>(
  style: StyleProp<T>,
  value: T,
  historyOptions?: TLCommandHistoryOptions
): this

StyleProp<T>

T

TLCommandHistoryOptions

this

StyleProp, TLCommandHistoryOptions

setStyleForSelectedShapes()

Public method

Set the value of a StyleProp. This change will be applied to the currently selected shapes.

editor.setStyleForSelectedShapes(DefaultColorStyle, 'red')
editor.setStyleForSelectedShapes(DefaultColorStyle, 'red', { ephemeral: true })

setStyleForSelectedShapes<S extends StyleProp<any>>(
  style: S,
  value: StylePropValue<S>,
  historyOptions?: TLCommandHistoryOptions
): this

S

StylePropValue<S>

TLCommandHistoryOptions

this

StyleProp, StylePropValue, TLCommandHistoryOptions

slideCamera()

Public method

Slide the camera in a certain direction.

slideCamera(opts?: {
  direction: VecLike
  friction: number
  speed: number
  speedThreshold?: number | undefined
}): this

{
  direction: VecLike
  friction: number
  speed: number
  speedThreshold?: number | undefined
}

this

VecLike

stackShapes()

Public method

Stack shape.

editor.stackShapes([box1, box2], 'horizontal', 32)
editor.stackShapes(editor.getSelectedShapeIds(), 'horizontal', 32)

stackShapes(
  shapes: TLShape[] | TLShapeId[],
  operation: 'horizontal' | 'vertical',
  gap: number
): this