Table of contents

Public class

Signature
References

TLEventMap

Source

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


Constructor

Public constructor

Constructs a new instance of the Editor class

Parameters
NameDescription

{ store, user, shapeUtils, tools, getContainer, initialState, inferDarkMode, }

References

TLEditorOptions


Properties

dispatch

Public property

Dispatch an event to the editor.

Example
Signature
Parameters
NameDescription

info

The event info.

References

TLEventInfo


disposables

Public readonly property

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

Signature

environment

Public readonly property

A manager for the editor's environment.

Signature

getContainer

Public property

The current HTML element containing the editor.

Example
Signature

history

Public readonly property

A manager for the app's history.

Signature

inputs

Public property

The app's current input state.

Signature
References

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.

Signature

root

Public readonly property

The root state of the statechart.

Signature

scribbles

Public readonly property

A manager for the editor's scribbles.

Signature

setCursor

Public property

Set the cursor.

Signature
Parameters
NameDescription

type

The cursor type.

rotation

The cursor rotation.

References

TLCursor


shapeUtils

Public property

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

Signature
References

ShapeUtil, TLUnknownShape


sideEffects

Public readonly property

A manager for side effects and correct state enforcement.

Signature

snaps

Public readonly property

A manager for the app's snapping feature.

Signature
References

SnapManager


store

Public readonly property

The editor's store

Signature
References

TLStore


styleProps

Public property

Signature
References

StyleProp


textMeasure

Public readonly property

A helper for measuring text.

Signature

user

Public readonly property

A manager for the user and their preferences.

Signature

Methods

addOpenMenu()

Public method

Add an open menu.

Example
Signature
Parameters
NameDescription

id

Returns

alignShapes()

Public method

Align shape positions.

Example
Signature
Parameters
NameDescription

shapes

The shapes (or shape ids) to align.

operation

The align operation to apply.

Returns
References

TLShape, TLShapeId


animateShape()

Public method

Animate a shape.

Example
Signature
Parameters
NameDescription

partial

The shape partial to update.

animationOptions

Returns
References

TLShapePartial, TLAnimationOptions


animateShapes()

Public method

Animate shapes.

Example
Signature
Parameters
NameDescription

partials

The shape partials to update.

animationOptions

Returns
References

TLShapePartial


animateToShape()

Public method

Animate the camera to a shape.

Signature
Parameters
NameDescription

shapeId

opts

Returns
References

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.

Signature
Parameters
NameDescription

userId

The id of the user to aniamte to.

Returns

bail()

Public method

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

Example
Signature

bailToMark()

Public method

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

Example
Signature
Parameters
NameDescription

id

Returns

batch()

Public method

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

Example
Signature
Parameters
NameDescription

fn

Returns

bringForward()

Public method

Bring shapes forward in the page's object list.

Example
Signature
Parameters
NameDescription

shapes

The shapes (or shape ids) to move.

Returns
References

TLShape, TLShapeId


bringToFront()

Public method

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

Example
Signature
Parameters
NameDescription

shapes

The shapes (or shape ids) to move.

Returns
References

TLShape, TLShapeId


cancel()

Public method

Dispatch a cancel event.

Example
Signature

cancelDoubleClick()

Public method

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

Signature

centerOnPoint()

Public method

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

Example
Signature
Parameters
NameDescription

point

The point in the current page space to center on.

animation

The options for an animation.

Returns
References

VecLike, TLAnimationOptions


clearOpenMenus()

Public method

Clear all open menus.

Example
Signature

complete()

Public method

Dispatch a complete event.

Example
Signature

createAssets()

Public method

Create one or more assets.

Example
Signature
Parameters
NameDescription

assets

The assets to create.

Returns
References

TLAsset


createPage()

Public method

Create a page.

Example
Signature
Parameters
NameDescription

page

The page (or page partial) to create.

Returns
References

TLPage


createShape()

Public method

Create a single shape.

Example
Signature
Parameters
NameDescription

shape

The shape (or shape partial) to create.

Returns
References

TLUnknownShape, TLShapePartial


createShapes()

Public method

Create shapes.

Example
Signature
Parameters
NameDescription

shapes

The shapes (or shape partials) to create.

Returns
References

TLUnknownShape, TLShapePartial


deleteAssets()

Public method

Delete one or more assets.

Example
Signature
Parameters
NameDescription

assets

Returns
References

TLAsset, TLAssetId


deleteOpenMenu()

Public method

Delete an open menu.

Example
Signature
Parameters
NameDescription

id

Returns

deletePage()

Public method

Delete a page.

Example
Signature
Parameters
NameDescription

page

Returns
References

TLPage, TLPageId


deleteShape()

Public method

Delete a shape.

Example
Signature
Parameters
NameDescription

id

The id of the shape to delete.

Returns
References

TLShapeId


deleteShape()

Public method

Signature
Parameters
NameDescription

shape

Returns
References

TLShape


deleteShapes()

Public method

Delete shapes.

Example
Signature
Parameters
NameDescription

ids

The ids of the shapes to delete.

Returns
References

TLShapeId


deleteShapes()

Public method

Signature
Parameters
NameDescription

shapes

Returns
References

TLShape


deselect()

Public method

Remove a shape from the existing set of selected shapes.

Example
Signature
Parameters
NameDescription

shapes

Returns
References

TLShape, TLShapeId


dispose()

Public method

Dispose the editor.

Signature

distributeShapes()

Public method

Distribute shape positions.

Example
Signature
Parameters
NameDescription

shapes

The shapes (or shape ids) to distribute.

operation

Whether to distribute shapes horizontally or vertically.

Returns
References

TLShape, TLShapeId


duplicatePage()

Public method

Duplicate a page.

Signature
Parameters
NameDescription

page

createId

The id of the new page. Defaults to a new id.

Returns
References

TLPage, TLPageId


duplicateShapes()

Public method

Duplicate shapes.

Example
Signature
Parameters
NameDescription

shapes

The shapes (or shape ids) to duplicate.

offset

The offset (in pixels) to apply to the duplicated shapes.

Returns
References

TLShape, TLShapeId, VecLike


findCommonAncestor()

Public method

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

Signature
Parameters
NameDescription

shapes

The shapes (or shape ids) to check.

predicate

The predicate to match.

Returns
References

TLShape, TLShapeId


findShapeAncestor()

Public method

Find the first ancestor matching the given predicate

Example
Signature
Parameters
NameDescription

shape

The shape to check the ancestors for.

predicate

Returns
References

TLShape, TLShapeId


flipShapes()

Public method

Flip shape positions.

Example
Signature
Parameters
NameDescription

shapes

The ids of the shapes to flip.

operation

Whether to flip horizontally or vertically.

Returns
References

TLShape, TLShapeId


getAncestorPageId()

Public method

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

Signature
Parameters
NameDescription

shape

The shape to get the page id for.

Returns

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

References

TLShape, TLShapeId, TLPageId


getArrowInfo()

Public method

Get cached info about an arrow.

Example
Signature
Parameters
NameDescription

shape

The shape (or shape id) of the arrow to get the info for.

Returns
References

TLArrowShape, TLShapeId, TLArrowInfo


getArrowsBoundTo()

Public method

Get all arrows bound to a shape.

Signature
Parameters
NameDescription

shapeId

The id of the shape.

Returns
References

TLShapeId


getAsset()

Public method

Get an asset by its id.

Example
Signature
Parameters
NameDescription

asset

The asset (or asset id) to get.

Returns
References

TLAsset, TLAssetId


getAssetForExternalContent()

Public method

Get an asset for an external asset content type.

Example
Signature
Parameters
NameDescription

info

Info about the external content.

Returns

The asset.

References

TLExternalAssetContent, TLAsset


getAssets()

Public method

Get all assets in the editor.

Signature
References

TLBookmarkAsset, TLImageAsset, TLVideoAsset


getCamera()

Public method

The current camera.

Signature
References

TLCamera


getCameraState()

Public method

Whether the camera is moving or idle.

Signature

getCanRedo()

Public method

Whether the app can redo.

Signature

getCanUndo()

Public method

Whether the app can undo.

Signature

getContentFromCurrentPage()

Public method

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

Signature
Parameters
NameDescription

shapes

The shapes (or shape ids) to get content for.

Returns

The exported content.

References

TLShape, TLShapeId, TLContent


getCroppingShapeId()

Public method

The current cropping shape's id.

Signature
References

TLShapeId


getCurrentPage()

Public method

The current page.

Signature
References

TLPage


getCurrentPageBounds()

Public method

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

Signature
References

Box


getCurrentPageId()

Public method

The current page id.

Signature
References

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.

Signature
References

TLShape


getCurrentPageShapeIds()

Public method

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

Signature
References

TLShapeId


getCurrentPageShapes()

Public method

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

Signature
References

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.

Signature
References

TLShape


getCurrentPageState()

Public method

The current page state.

Signature
References

TLInstancePageState


getCurrentTool()

Public method

The current selected tool.

Signature
References

StateNode


getCurrentToolId()

Public method

The id of the current selected tool.

Signature

getDocumentSettings()

Public method

The global document settings that apply to all users.

Signature
References

TLDocument


getDroppingOverShape()

Public method

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

Signature
Parameters
NameDescription

point

The point to find the parent for.

droppingShapes

The shapes that are being dropped.

Returns

The shape to drop on.

References

VecLike, TLShape, TLUnknownShape


getEditingShape()

Public method

The current editing shape.

Signature
References

TLShape


getEditingShapeId()

Public method

The current editing shape's id.

Signature
References

TLShapeId


getErasingShapeIds()

Public method

The editor's current erasing ids.

Signature
References

TLShapeId


getErasingShapes()

Public method

The editor's current erasing shapes.

Signature
References

TLShape


getFocusedGroup()

Public method

The current focused group.

Signature
References

TLShape


getFocusedGroupId()

Public method

The current focused group id.

Signature
References

TLPageId, TLShapeId


getHighestIndexForParent()

Public method

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

Signature
Parameters
NameDescription

parent

Returns

The index.

References

TLPage, TLParentId, TLShape


getHintingShape()

Public method

The editor's current hinting shapes.

Signature
References

TLShape


getHintingShapeIds()

Public method

The editor's current hinting shape ids.

Signature
References

TLShapeId


getHoveredShape()

Public method

The current hovered shape.

Signature
References

TLShape


getHoveredShapeId()

Public method

The current hovered shape id.

Signature
References

TLShapeId


getInitialMetaForShape()

Public method

Get the initial meta value for a shape.

Example
Signature
Parameters
NameDescription

_shape

Returns
References

TLShape


getInstanceState()

Public method

The current instance's state.

Signature
References

TLInstance


getIsMenuOpen()

Public method

Get whether any menus are open.

Example
Signature

getOnlySelectedShape()

Public method

The app's only selected shape.

Signature
References

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

Signature

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.

Signature
Parameters
NameDescription

shape

The shape to get the outermost selectable shape for.

filter

A function to filter the selectable shapes.

Returns

The outermost selectable shape.

References

TLShape, TLShapeId


getPage()

Public method

Get a page.

Example
Signature
Parameters
NameDescription

page

The page (or page id) to get.

Returns
References

TLPage, TLPageId


getPages()

Public method

Info about the project's current pages.

Signature
References

TLPage


getPageShapeIds()

Public method

Get the ids of shapes on a page.

Example
Signature
Parameters
NameDescription

page

The page (or page id) to get.

Returns
References

TLPage, TLPageId, TLShapeId


getPageStates()

Public method

Page states.

Signature
References

TLInstancePageState


getPath()

Public method

The editor's current path of active states.

Example
Signature

getPointInParentSpace()

Public method

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

Example
Signature
Parameters
NameDescription

shape

The shape to get the point in the local space of.

point

The page point to get in the local space of the shape.

Returns
References

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
Signature
Parameters
NameDescription

shape

The shape to get the point in the local space of.

point

The page point to get in the local space of the shape.

Returns
References

TLShape, TLShapeId, VecLike, Vec


getRenderingBounds()

Public method

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

Signature
References

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

Signature
References

Box


getRenderingShapes()

Public method

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

Signature
References

TLShapeId, TLShape, ShapeUtil, TLUnknownShape, Box


getSelectedShapeAtPoint()

Public method

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

Signature
Parameters
NameDescription

point

The point to check.

Returns

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

References

VecLike, TLShape


getSelectedShapeIds()

Public method

The current selected ids.

Signature
References

TLShapeId


getSelectedShapes()

Public method

An array containing all of the currently selected shapes.

Signature
References

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.

Signature
References

Box


getSelectionRotatedPageBounds()

Public method

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

Signature
References

Box


getSelectionRotation()

Public method

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

Signature

getShape()

Public method

Get a shape by its id.

Example
Signature
Parameters
NameDescription

shape

Returns
References

TLShape, TLParentId


getShapeAncestors()

Public method

Get the ancestors of a shape.

Example
Signature
Parameters
NameDescription

shape

The shape (or shape id) to get the ancestors for.

acc

Returns
References

TLShape, TLShapeId


getShapeAndDescendantIds()

Public method

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

Signature
Parameters
NameDescription

ids

The ids of the shapes to get descendants of.

Returns

The decscendant ids.

References

TLShapeId


getShapeAtPoint()

Public method

Get the shape at the current point.

Signature
Parameters
NameDescription

point

The point to check.

opts

Options for the check: hitInside to check if the point is inside the shape, margin to check if the point is within a margin of the shape, hitFrameInside to check if the point is inside the frame, and filter to filter the shapes to check.

Returns

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

References

VecLike, TLShape


getShapeClipPath()

Public method

Get the clip path for a shape.

Example
Signature
Parameters
NameDescription

shape

The shape (or shape id) to get the clip path for.

Returns

The clip path or undefined.

References

TLShape, TLShapeId


getShapeGeometry()

Public method

Get the geometry of a shape.

Example
Signature
Parameters
NameDescription

shape

The shape (or shape id) to get the geometry for.

Returns
References

Geometry2d, TLShape, TLShapeId


getShapeHandles()

Public method

Get the handles (if any) for a shape.

Example
Signature
Parameters
NameDescription

shape

The shape (or shape id) to get the handles for.

Returns
References

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
Signature
Parameters
NameDescription

shape

The shape to get the local transform for.

Returns
References

TLShape, TLShapeId, Mat


getShapeMask()

Public method

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

Example
Signature
Parameters
NameDescription

shape

Returns

The mask for the shape.

References

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
Signature
Parameters
NameDescription

shape

The shape to get the masked bounds for.

Returns
References

TLShape, TLShapeId, Box


getShapeOutlineSegments()

Public method

Get the local outline segments of a shape.

Example
Signature
Parameters
NameDescription

shape

The shape (or shape id) to get the outline segments for.

Returns
References

TLShape, Vec


getShapePageBounds()

Public method

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

Example
Signature
Parameters
NameDescription

shape

The shape (or shape id) to get the bounds for.

Returns
References

TLShape, TLShapeId, Box


getShapePageTransform()

Public method

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

Example
Signature
Parameters
NameDescription

shape

The shape (or shape id) to get the page transform for.

Returns
References

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
Signature
Parameters
NameDescription

shape

Returns
References

TLShape, TLShapeId


getShapeParentTransform()

Public method

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

Example
Signature
Parameters
NameDescription

shape

The shape (or shape id) to get the parent transform for.

Returns
References

TLShape, TLShapeId, Mat


getShapesAtPoint()

Public method

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

Example
Signature
Parameters
NameDescription

point

The page point to test.

opts

Returns
References

VecLike, TLShape


getShapeStyleIfExists()

Public method

Signature
Parameters
NameDescription

shape

style

Returns
References

TLShape, StyleProp


getShapeUtil()

Public method

Get a shape util from a shape itself.

Example
Signature
Parameters
NameDescription

shape

A shape, shape partial, or shape type.

Returns
References

TLUnknownShape, TLShapePartial, ShapeUtil


getShapeUtil()

Public method

Signature
Parameters
NameDescription

type

Returns
References

TLUnknownShape, ShapeUtil


getShapeUtil()

Public method

Signature
Parameters
NameDescription

type

Returns
References

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.

Signature
References

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
Signature
References

ReadonlySharedStyleMap


getSortedChildIdsForParent()

Public method

Get an array of all the children of a shape.

Example
Signature
Parameters
NameDescription

parent

Returns
References

TLPage, TLParentId, TLShape, TLShapeId


getStateDescendant()

Public method

Get a descendant by its path.

Example
Signature
Parameters
NameDescription

path

The descendant's path of state ids, separated by periods.

Returns
References

StateNode


getSvg()

Public method

Get an exported SVG of the given shapes.

Signature
Parameters
NameDescription

shapes

opts

Options for the export.

Returns

The SVG element.

References

TLShape, TLShapeId, TLSvgOptions


getViewportPageBounds()

Public method

The current viewport in the current page space.

Signature
References

Box


getViewportPageCenter()

Public method

The center of the viewport in the current page space.

Signature
References

Vec


getViewportScreenBounds()

Public method

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

Signature
References

Box


getViewportScreenCenter()

Public method

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

Signature
References

Vec


getZoomLevel()

Public method

The current camera zoom level.

Signature

groupShapes()

Public method

Create a group containing the provided shapes.

Signature
Parameters
NameDescription

shapes

The shapes (or shape ids) to group. Defaults to the selected shapes.

groupId

The id of the group to create.

Returns
References

TLShape, TLShapeId


hasAncestor()

Public method

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

Signature
Parameters
NameDescription

shape

The shape.

ancestorId

The id of the ancestor.

Returns
References

TLShape, TLShapeId


interrupt()

Public method

Dispatch an interrupt event.

Example
Signature

isAncestorSelected()

Public method

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

Signature
Parameters
NameDescription

shape

Returns
References

TLShape, TLShapeId


isIn()

Public method

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

Example
Signature
Parameters
NameDescription

path

The path of active states, separated by periods.

Returns

isInAny()

Public method

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

Example
Signature
Parameters
NameDescription

paths

Returns

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
Signature
Parameters
NameDescription

shape

The shape to test against.

point

The page point to test (in the current page space).

opts

Returns
References

TLShape, TLShapeId, VecLike


isShapeInPage()

Public method

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

Example
Signature
Parameters
NameDescription

shape

The shape to check.

pageId

The id of the page to check against. Defaults to the current page.

Returns
References

TLShape, TLShapeId, TLPageId


isShapeOfType()

Public method

Get whether a shape matches the type of a TLShapeUtil.

Example
Signature
Parameters
NameDescription

shape

the shape to test

type

Returns
References

TLUnknownShape


isShapeOfType()

Public method

Signature
Parameters
NameDescription

shapeId

type

Returns
References

TLUnknownShape


isShapeOrAncestorLocked()

Public method

Check whether a shape or its parent is locked.

Signature
Parameters
NameDescription

shape

The shape (or shape id) to check.

Returns
References

TLShape


isShapeOrAncestorLocked()

Public method

Signature
Parameters
NameDescription

id

Returns
References

TLShapeId


mark()

Public method

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

Example
Signature
Parameters
NameDescription

markId

The mark's id, usually the reason for adding the mark.

onUndo

Whether to stop at the mark when undoing.

onRedo

Whether to stop at the mark when redoing.

Returns

moveShapesToPage()

Public method

Move shapes to page.

Example
Signature
Parameters
NameDescription

shapes

The shapes (or shape ids) of the shapes to move.

pageId

The id of the page where the shapes will be moved.

Returns
References

TLShape, TLShapeId, TLPageId


nudgeShapes()

Public method

Move shapes by a delta.

Example
Signature
Parameters
NameDescription

shapes

The shapes (or shape ids) to move.

offset

historyOptions

The history options for the change.

Returns
References

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
Signature
Parameters
NameDescription

shapes

The shapes (or shape ids) to pack.

gap

The padding to apply to the packed shapes. Defaults to 16.

Returns
References

TLShape, TLShapeId


pageToScreen()

Public method

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

Example
Signature
Parameters
NameDescription

point

The point in screen space.

Returns
References

VecLike


pan()

Public method

Pan the camera.

Example
Signature
Parameters
NameDescription

offset

The offset in the current page space.

animation

The animation options.

Returns
References

VecLike, TLAnimationOptions


panZoomIntoView()

Public method

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

Signature
Parameters
NameDescription

ids

The ids of the shapes to pan and zoom into view.

animation

The options for an animation.

Returns
References

TLShapeId, TLAnimationOptions


popFocusedGroupId()

Public method

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

Signature

putContentOntoCurrentPage()

Public method

Place content into the editor.

Signature
Parameters
NameDescription

content

The content.

options

Options for placing the content.

Returns
References

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.

Signature
Parameters
NameDescription

info

Info about the external content.

Returns
References

TLExternalContent


redo()

Public method

Redo to the next mark.

Example
Signature

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
Signature
Parameters
NameDescription

type

The type of external content.

handler

The handler to use for this content type.

Returns
References

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
Signature
Parameters
NameDescription

type

The type of external content.

handler

The handler to use for this content type.

Returns
References

TLExternalContent


renamePage()

Public method

Rename a page.

Example
Signature
Parameters
NameDescription

page

name

The new name.

historyOptions

Returns
References

TLPage, TLPageId, TLCommandHistoryOptions


reparentShapes()

Public method

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

Example
Signature
Parameters
NameDescription

shapes

The shapes (or shape ids) of the shapes to reparent.

parentId

The id of the new parent shape.

insertIndex

The index to insert the children.

Returns
References

TLShape, TLShapeId, TLParentId


resetZoom()

Public method

Set the zoom back to 100%.

Example
Signature
Parameters
NameDescription

point

The screen point to zoom out on. Defaults to the viewport screen center.

animation

The options for an animation.

Returns
References

Vec, TLAnimationOptions


resizeShape()

Public method

Resize a shape.

Signature
Parameters
NameDescription

shape

scale

The scale factor to apply to the shape.

options

Additional options.

Returns
References

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
Signature
Parameters
NameDescription

shapes

The shapes (or shape ids) of the shapes to move.

delta

The delta in radians to apply to the selection rotation.

Returns
References

TLShape, TLShapeId


screenToPage()

Public method

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

Example
Signature
Parameters
NameDescription

point

The point in screen space.

Returns
References

VecLike


select()

Public method

Select one or more shapes.

Example
Signature
Parameters
NameDescription

shapes

Returns
References

TLShape, TLShapeId


selectAll()

Public method

Select all direct children of the current page.

Example
Signature

selectNone()

Public method

Clear the selection.

Example
Signature

sendBackward()

Public method

Send shapes backward in the page's object list.

Example
Signature
Parameters
NameDescription

shapes

The shapes (or shape ids) to move.

Returns
References

TLShape, TLShapeId


sendToBack()

Public method

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

Example
Signature
Parameters
NameDescription

shapes

The shapes (or shape ids) to move.

Returns
References

TLShape, TLShapeId


setCamera()

Public method

Set the current camera.

Example
Signature
Parameters
NameDescription

point

The new camera position.

animation

Options for an animation.

Returns
References

VecLike, TLAnimationOptions


setCroppingShape()

Public method

Set the current cropping shape.

Example
Signature
Parameters
NameDescription

shape

The shape (or shape id) to set as cropping.

Returns
References

TLShape, TLShapeId


setCurrentPage()

Public method

Set the current page.

Example
Signature
Parameters
NameDescription

page

The page (or page id) to set as the current page.

historyOptions

The history options for the change.

Returns
References

TLPage, TLPageId, TLCommandHistoryOptions


setCurrentTool()

Public method

Set the selected tool.

Example
Signature
Parameters
NameDescription

id

The id of the tool to select.

info

Arbitrary data to pass along into the transition.

Returns

setEditingShape()

Public method

Set the current editing shape.

Example
Signature
Parameters
NameDescription

shape

The shape (or shape id) to set as editing.

Returns
References

TLShape, TLShapeId


setErasingShapes()

Public method

Set the editor's current erasing shapes.

Example
Signature
Parameters
NameDescription

shapes

The shapes (or shape ids) to set as hinting.

Returns
References

TLShape, TLShapeId


setFocusedGroup()

Public method

Set the current focused group shape.

Signature
Parameters
NameDescription

shape

The group shape id (or group shape's id) to set as the focused group shape.

Returns
References

TLGroupShape, TLShapeId


setHintingShapes()

Public method

Set the editor's current hinting shapes.

Example
Signature
Parameters
NameDescription

shapes

The shapes (or shape ids) to set as hinting.

Returns
References

TLShape, TLShapeId


setHoveredShape()

Public method

Set the editor's current hovered shape.

Example
Signature
Parameters
NameDescription

shape

Returns
References

TLShape, TLShapeId


setOpacityForNextShapes()

Public method

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

Example
Signature
Parameters
NameDescription

opacity

The opacity to set. Must be a number between 0 and 1 inclusive.

historyOptions

The history options for the change.

Returns
References

TLCommandHistoryOptions


setOpacityForSelectedShapes()

Public method

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

Example
Signature
Parameters
NameDescription

opacity

The opacity to set. Must be a number between 0 and 1 inclusive.

historyOptions

The history options for the change.

Returns
References

TLCommandHistoryOptions


setSelectedShapes()

Public method

Select one or more shapes.

Example
Signature
Parameters
NameDescription

shapes

historyOptions

The history options for the change.

Returns
References

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
Signature
Parameters
NameDescription

style

The style to set.

value

The value to set.

historyOptions

The history options for the change.

Returns
References

StyleProp, TLCommandHistoryOptions


setStyleForSelectedShapes()

Public method

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

Example
Signature
Parameters
NameDescription

style

The style to set.

value

The value to set.

historyOptions

The history options for the change.

Returns
References

StyleProp, TLCommandHistoryOptions


slideCamera()

Public method

Slide the camera in a certain direction.

Signature
Parameters
NameDescription

opts

Options for the slide

Returns
References

VecLike


stackShapes()

Public method

Stack shape.

Example
Signature
Parameters
NameDescription

shapes

The shapes (or shape ids) to stack.

operation

Whether to stack horizontally or vertically.

gap

The gap to leave between shapes.

Returns
References

TLShape, TLShapeId


startFollowingUser()

Public method

Start viewport-following a user.

Signature
Parameters
NameDescription

userId

The id of the user to follow.

Returns

stopCameraAnimation()

Public method

Stop the current camera animation, if any.

Signature

stopFollowingUser()

Public method

Stop viewport-following a user.

Signature

stretchShapes()

Public method

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

Example
Signature
Parameters
NameDescription

shapes

The shapes (or shape ids) to stretch.

operation

Whether to stretch shapes horizontally or vertically.

Returns
References

TLShape, TLShapeId


toggleLock()

Public method

Toggle the lock state of one or more shapes. If there is a mix of locked and unlocked shapes, all shapes will be locked.

Signature
Parameters
NameDescription

shapes

The shapes (or shape ids) to toggle.

Returns
References

TLShape, TLShapeId


undo()

Public method

Undo to the last mark.

Example
Signature

ungroupShapes()

Public method

Ungroup some shapes.

Signature
Parameters
NameDescription

ids

Ids of the shapes to ungroup. Defaults to the selected shapes.

Returns
References

TLShapeId


ungroupShapes()

Public method

Signature
Parameters
NameDescription

ids

Returns
References

TLShape


updateAssets()

Public method

Update one or more assets.

Example
Signature
Parameters
NameDescription

assets

The assets to update.

Returns
References

TLAssetPartial


updateCurrentPageState()

Public method

Update this instance's page state.

Example
Signature
Parameters
NameDescription

partial

The partial of the page state object containing the changes.

historyOptions

The history options for the change.

Returns
References

TLInstancePageState, TLCommandHistoryOptions


updateDocumentSettings()

Public method

Update the global document settings that apply to all users.

Signature
Parameters
NameDescription

settings

Returns
References

TLDocument


updateInstanceState()

Public method

Update the instance's state.

Signature
Parameters
NameDescription

partial

A partial object to update the instance state with.

historyOptions

The history options for the change.

Returns
References

TLInstance, TLCommandHistoryOptions


updatePage()

Public method

Update a page.

Example
Signature
Parameters
NameDescription

partial

The partial of the shape to update.

historyOptions

The history options for the change.

Returns
References

RequiredKeys, TLPage, TLCommandHistoryOptions


updateShape()

Public method

Update a shape using a partial of the shape.

Example
Signature
Parameters
NameDescription

partial

The shape partial to update.

historyOptions

The history options for the change.

Returns
References

TLUnknownShape, TLShapePartial, TLCommandHistoryOptions


updateShapes()

Public method

Update shapes using partials of each shape.

Example
Signature
Parameters
NameDescription

partials

The shape partials to update.

historyOptions

The history options for the change.

Returns
References

TLUnknownShape, TLShapePartial, TLCommandHistoryOptions


updateViewportScreenBounds()

Public method

Update the viewport. The viewport will measure the size and screen position of its container element. This should be done whenever the container's position on the screen changes.

Example
Signature
Parameters
NameDescription

center

Whether to preserve the viewport page center as the viewport changes.

Returns

visitDescendants()

Public method

Run a visitor function for all descendants of a shape.

Example
Signature
Parameters
NameDescription

parent

visitor

The visitor function.

Returns
References

TLPage, TLParentId, TLShape, TLShapeId


zoomIn()

Public method

Zoom the camera in.

Example
Signature
Parameters
NameDescription

point

animation

The options for an animation.

Returns
References

Vec, TLAnimationOptions


zoomOut()

Public method

Zoom the camera out.

Example
Signature
Parameters
NameDescription

point

animation

The options for an animation.

Returns
References

Vec, TLAnimationOptions


zoomToBounds()

Public method

Zoom the camera to fit a bounding box (in the current page space).

Example
Signature
Parameters
NameDescription

bounds

The bounding box.

targetZoom

The desired zoom level. Defaults to 0.1.

animation

The options for an animation.

Returns
References

Box, TLAnimationOptions


zoomToContent()

Public method

Move the camera to the nearest content.

Example
Signature

zoomToFit()

Public method

Zoom the camera to fit the current page's content in the viewport.

Example
Signature
Parameters
NameDescription

animation

The options for an animation.

Returns
References

TLAnimationOptions


zoomToSelection()

Public method

Zoom the camera to fit the current selection in the viewport.

Example
Signature
Parameters
NameDescription

animation

The options for an animation.

Returns
References

TLAnimationOptions


Edge2dEllipse2d