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.

Example

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.

Example

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

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.

readonly sideEffects: SideEffectManager<this>

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<unknown>, 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.

Example

editor.addOpenMenu('menu-id')

addOpenMenu(id: string): this

string

this

alignShapes()

Public method

Align shape positions.

Example

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.

Example

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.

Example

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.

Example

editor.bail()

bail(): this

bailToMark()

Public method

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

Example

editor.bailToMark('dragging')

bailToMark(id: string): this

string

this

batch()

Public method

Run a function in a batch, which will be undone/redone as a single action.

Example

editor.batch(() => {
  editor.selectAll()
  editor.deleteShapes(editor.getSelectedShapeIds())
  editor.createShapes(myShapes)
  editor.selectNone()
})

editor.undo() // will undo all of the above

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

() => void

this

bringForward()

Public method

Bring shapes forward in the page's object list.

Example

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.

Example

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.

Example

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).

Example

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.

Example

editor.clearOpenMenus()

clearOpenMenus(): this

complete()

Public method

Dispatch a complete event.

Example

editor.complete()

complete(): this

createAssets()

Public method

Create one or more assets.

Example

editor.createAssets([...myAssets])

createAssets(assets: TLAsset[]): this

TLAsset[]

this

TLAsset

createPage()

Public method

Create a page.

Example

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

createPage(page: Partial<TLPage>): this

Partial<TLPage>

this

TLPage

createShape()

Public method

Create a single shape.

Example

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.

Example

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.

Example

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

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

TLAsset[] | TLAssetId[]

this

TLAsset, TLAssetId

deleteOpenMenu()

Public method

Delete an open menu.

Example

editor.deleteOpenMenu('menu-id')

deleteOpenMenu(id: string): this

string

this

deletePage()

Public method

Delete a page.

Example

editor.deletePage('page1')

deletePage(page: TLPage | TLPageId): this

TLPage | TLPageId

this

TLPage, TLPageId

deleteShape()

Public method

Delete a shape.

Example

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

deleteShape(id: TLShapeId): this

TLShapeId

this

TLShapeId

deleteShape()

Public method

deleteShape(shape: TLShape): this

TLShape

this

TLShape

deleteShapes()

Public method

Delete shapes.

Example

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.

Example

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.

Example

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.

Example

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

Example

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.

Example

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.

Example

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.

Example

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.

Example

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

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

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): string

TLPage | TLParentId | TLShape

string

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.

Example

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.

Example

editor.isMenuOpen()

getIsMenuOpen(): boolean

getOnlySelectedShape()

Public method

The app's only selected shape.

getOnlySelectedShape(): null | TLShape

TLShape

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.

Example

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.

Example

const idsOnPage1 = editor.getCurrentPageShapeIds('page1')
const idsOnPage2 = editor.getCurrentPageShapeIds(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.

Example

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.

Example

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.

Example

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

getRenderingBoundsExpanded()

Public method

The current rendering bounds in the current page space, expanded slightly. Used for determining which shapes to render and which to "cull".

getRenderingBoundsExpanded(): Box

Box

getRenderingShapes()

Public method

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

getRenderingShapes(): {
  id: TLShapeId
  shape: TLShape
  util: ShapeUtil<TLUnknownShape>
  index: number
  backgroundIndex: number
  opacity: number
  isCulled: boolean
  maskedPageBounds: Box | undefined
}[]

TLShapeId, TLShape, ShapeUtil, TLUnknownShape, Box

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

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.

Example

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.

Example

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?: {
    renderingOnly?: boolean | undefined
    margin?: number | undefined
    hitInside?: boolean | undefined
    hitLabels?: boolean | undefined
    hitFrameInside?: boolean | undefined
    filter?: ((shape: TLShape) => boolean) | undefined
  }
): TLShape | undefined

VecLike

{
  renderingOnly?: boolean | undefined
  margin?: number | undefined
  hitInside?: boolean | undefined
  hitLabels?: boolean | undefined
  hitFrameInside?: boolean | undefined
  filter?: ((shape: TLShape) => 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.

Example

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.

Example

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.

Example

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.

Example

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.

Example

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.

Example

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

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

TLShape | TLShapeId

Box | undefined

TLShape, TLShapeId, Box

getShapeOutlineSegments()

Public method

Get the local outline segments of a shape.

Example

editor.getShapeOutlineSegments(myShape)
editor.getShapeOutlineSegments(myShapeId)

getShapeOutlineSegments<T extends TLShape>(shape: T | T['id']): Vec[][]

T | T['id']

Vec[][]

TLShape, Vec

getShapePageBounds()

Public method

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

Example

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.

Example

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.

Example

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.

Example

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.

Example

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

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

VecLike

{
  margin?: number | undefined
  hitInside?: boolean | 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.

Example

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.

Example

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.

Example

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.

Example

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

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

string

T | undefined

StateNode

getSvg()

Public method

Get an exported SVG of the given shapes.

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

TLShape[] | TLShapeId[]

Partial<TLSvgOptions>

Promise<SVGSVGElement | 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.

Example

editor.interrupt()

interrupt(): this

isAncestorSelected()

Public method

Determine whether or not any of a shape's ancestors are selected.

isAncestorSelected(shape: TLShape | TLShapeId): boolean

TLShape | TLShapeId

boolean

TLShape, TLShapeId

isIn()

Public method

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

Example

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.

Example

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.

Example

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

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

TLShape | TLShapeId

VecLike

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

boolean

TLShape, TLShapeId, VecLike

isShapeInPage()

Public method

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

Example

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.

Example

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.

Example

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.

Example

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.

Example

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).

Example

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.

Example

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

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

VecLike

{
  x: number
  y: number
  z: number
}

VecLike

pan()

Public method

Pan the camera.

Example

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
    select?: boolean
    preservePosition?: boolean
    preserveIds?: boolean
  }
): this

TLContent

{
  point?: VecLike
  select?: boolean
  preservePosition?: boolean
  preserveIds?: 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.

Example

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.

Example

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.

Example

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.

Example

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.

Example

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?: string
): this

TLShape[] | TLShapeId[]

TLParentId

string

this

TLShape, TLShapeId, TLParentId

resetZoom()

Public method

Set the zoom back to 100%.

Example

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.

Example

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.

Example

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.

Example

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.

Example

editor.selectAll()

selectAll(): this

selectNone()

Public method

Clear the selection.

Example

editor.selectNone()

selectNone(): this

sendBackward()

Public method

Send shapes backward in the page's object list.

Example

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.

Example

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.

Example

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.

Example

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.

Example

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.

Example

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

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

string

{}

this

setEditingShape()

Public method

Set the current editing shape.

Example

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.

Example

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.

Example

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.

Example

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.

Example

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.

Example

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.

Example

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.

Example

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.

Example

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

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

StyleProp<T>

T

TLCommandHistoryOptions

this

StyleProp, TLCommandHistoryOptions

slideCamera()

Public method

Slide the camera in a certain direction.

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

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

this

VecLike

stackShapes()

Public method

Stack shape.

Example

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

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

TLShape[] | TLShapeId[]

'horizontal' | 'vertical'

number

this

TLShape, TLShapeId

startFollowingUser()

Public method

Start viewport-following a user.

startFollowingUser(userId: string): this

string

this

stopCameraAnimation()

Public method

Stop the current camera animation, if any.

stopCameraAnimation(): this

stopFollowingUser()

Public method

Stop viewport-following a user.

stopFollowingUser(): this

stretchShapes()

Public method

Stretch shape sizes and positions to fill their common bounding box.

Example

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