a1e72014c6
This PR refactors our clipboard handlers. It should simplify the way that things work and better handle the difference between how the native API events are handled vs. the browser's clipboard API events.  Everything that used to be supported now also still works. In addition, we now have several useful features: ### Multiline text can be pasted into the app When pasting text that contains more than one line, the text is pasted correctly; even if the clipboard also includes HTML data. Previously, we would try to paste HTML data if we found it, because that data might contain tldraw's own content as a comment; but if that failed, we would paste the data as text instead. This led to pasting text that lost lots of information from that text, such as line breaks and indentations. ### Multiline text shapes are aligned correctly When pasting raw text that has more than one line, the text will be left aligned—or right aligned if the text is likely from a RTL language.  ### Common minimum indentation is removed from each line  This is something that absolutely every app should implement, but here we go. When multiline text has "common indentation" on each line, which is often the case when pasting text from code, then that indentation is removed from each line. ### Auto wrapping for big pastes When a line has no text breaks but a lot of text, we now set the width of the text shape.  ## How it works A `ClipboardThing` is the common interface for things that we found on the clipboard, native or otherwise. Both `handlePasteFromClipboardApi` and `handlePasteFromEventClipboardData` parse out `ClipboardThing`s and pass them to `handleClipboardThings`. <img width="905" alt="image" src="https://github.com/tldraw/tldraw/assets/23072548/fd087539-edbb-4527-b5ff-ca7d7c1726b2"> A `ClipboardResult` is the result of processing a `ClipboardThing`, and usually contains text and other information about that text. We make decisions on what to create based on which `ClipboardResult`s we find. When pasting text, we check to see whether the result would be bigger than the viewport, or if the text is multiline, or if the text is of an RTL language by testing certain common RTL characters. We make some adjustments based on those factors, ensuring that the top-left corner of the text is on screen and reasonably positioned within the viewport if possible. ### Change Type - [x] `minor` — New Feature ### Test Plan 1. Copy and paste shapes 2. Copy and paste text from elsewhere into the app 3. Copy and paste images from elsewhere into the app 4. Try on different browsers ### Release Notes - Improves clipboard logic when pasting text - Adds support for pasting multi-line text - Adds maximum widths when pasting single-line text - Adds support for RTL languages when pasting multi-line or wrapped text - Strips leading indentation when pasting text
92 KiB
92 KiB
API Report File for "@tldraw/editor"
Do not edit this file. It is a report generated by API Extractor.
/// <reference types="react" />
import { Atom } from 'signia';
import { BaseRecord } from '@tldraw/tlstore';
import { Box2d } from '@tldraw/primitives';
import { Box2dModel } from '@tldraw/tlschema';
import { Computed } from 'signia';
import { ComputedCache } from '@tldraw/tlstore';
import { CubicSpline2d } from '@tldraw/primitives';
import { EASINGS } from '@tldraw/primitives';
import { EmbedDefinition } from '@tldraw/tlschema';
import { EventEmitter } from 'eventemitter3';
import { getHashForString } from '@tldraw/utils';
import { HistoryEntry } from '@tldraw/tlstore';
import { ID } from '@tldraw/tlstore';
import { MatLike } from '@tldraw/primitives';
import { Matrix2d } from '@tldraw/primitives';
import { Matrix2dModel } from '@tldraw/primitives';
import { Migrations } from '@tldraw/tlstore';
import { Polyline2d } from '@tldraw/primitives';
import * as React_2 from 'react';
import { default as React_3 } from 'react';
import { RecordType } from '@tldraw/tlstore';
import { RotateCorner } from '@tldraw/primitives';
import { SelectionCorner } from '@tldraw/primitives';
import { SelectionEdge } from '@tldraw/primitives';
import { SelectionHandle } from '@tldraw/primitives';
import { SerializedSchema } from '@tldraw/tlstore';
import { Signal } from 'signia';
import { StoreSchema } from '@tldraw/tlstore';
import { StoreSnapshot } from '@tldraw/tlstore';
import { StoreValidator } from '@tldraw/tlstore';
import { StrokePoint } from '@tldraw/primitives';
import { TLAlignType } from '@tldraw/tlschema';
import { TLArrowheadType } from '@tldraw/tlschema';
import { TLArrowShape } from '@tldraw/tlschema';
import { TLAsset } from '@tldraw/tlschema';
import { TLAssetId } from '@tldraw/tlschema';
import { TLAssetPartial } from '@tldraw/tlschema';
import { TLBaseShape } from '@tldraw/tlschema';
import { TLBookmarkAsset } from '@tldraw/tlschema';
import { TLBookmarkShape } from '@tldraw/tlschema';
import { TLCamera } from '@tldraw/tlschema';
import { TLColorStyle } from '@tldraw/tlschema';
import { TLColorType } from '@tldraw/tlschema';
import { TLCursor } from '@tldraw/tlschema';
import { TLDocument } from '@tldraw/tlschema';
import { TLDrawShape } from '@tldraw/tlschema';
import { TLDrawShapeSegment } from '@tldraw/tlschema';
import { TLEmbedShape } from '@tldraw/tlschema';
import { TLFontType } from '@tldraw/tlschema';
import { TLFrameShape } from '@tldraw/tlschema';
import { TLGeoShape } from '@tldraw/tlschema';
import { TLGroupShape } from '@tldraw/tlschema';
import { TLHandle } from '@tldraw/tlschema';
import { TLImageAsset } from '@tldraw/tlschema';
import { TLImageShape } from '@tldraw/tlschema';
import { TLInstance } from '@tldraw/tlschema';
import { TLInstanceId } from '@tldraw/tlschema';
import { TLInstancePageState } from '@tldraw/tlschema';
import { TLInstancePresence } from '@tldraw/tlschema';
import { TLInstancePropsForNextShape } from '@tldraw/tlschema';
import { TLLineShape } from '@tldraw/tlschema';
import { TLNoteShape } from '@tldraw/tlschema';
import { TLNullableShapeProps } from '@tldraw/tlschema';
import { TLPage } from '@tldraw/tlschema';
import { TLPageId } from '@tldraw/tlschema';
import { TLParentId } from '@tldraw/tlschema';
import { TLRecord } from '@tldraw/tlschema';
import { TLScribble } from '@tldraw/tlschema';
import { TLShape } from '@tldraw/tlschema';
import { TLShapeId } from '@tldraw/tlschema';
import { TLShapePartial } from '@tldraw/tlschema';
import { TLShapeProp } from '@tldraw/tlschema';
import { TLShapeProps } from '@tldraw/tlschema';
import { TLShapeType } from '@tldraw/tlschema';
import { TLSizeStyle } from '@tldraw/tlschema';
import { TLSizeType } from '@tldraw/tlschema';
import { TLStore } from '@tldraw/tlschema';
import { TLStoreProps } from '@tldraw/tlschema';
import { TLStyleCollections } from '@tldraw/tlschema';
import { TLStyleType } from '@tldraw/tlschema';
import { TLTextShape } from '@tldraw/tlschema';
import { TLTextShapeProps } from '@tldraw/tlschema';
import { TLUnknownShape } from '@tldraw/tlschema';
import { TLUser } from '@tldraw/tlschema';
import { TLUserDocument } from '@tldraw/tlschema';
import { TLUserId } from '@tldraw/tlschema';
import { TLUserPresence } from '@tldraw/tlschema';
import { TLVideoAsset } from '@tldraw/tlschema';
import { TLVideoShape } from '@tldraw/tlschema';
import { Vec2d } from '@tldraw/primitives';
import { Vec2dModel } from '@tldraw/tlschema';
import { VecLike } from '@tldraw/primitives';
// @public (undocumented)
export const ACCEPTED_ASSET_TYPE: string;
// @public (undocumented)
export const ACCEPTED_IMG_TYPE: string[];
// @public (undocumented)
export const ACCEPTED_VID_TYPE: string[];
// @internal (undocumented)
export const ANIMATION_MEDIUM_MS = 320;
// @internal (undocumented)
export const ANIMATION_SHORT_MS = 80;
// @public (undocumented)
export type AnimationOptions = Partial<{
duration: number;
easing: typeof EASINGS.easeInOutCubic;
}>;
// @public (undocumented)
export class App extends EventEmitter<TLEventMap> {
constructor({ config, store, getContainer }: AppOptions);
addOpenMenu: (id: string) => this;
alignShapes(operation: 'bottom' | 'center-horizontal' | 'center-vertical' | 'left' | 'right' | 'top', ids?: TLShapeId[]): this;
get allShapesCommonBounds(): Box2d | null;
animateCamera(x: number, y: number, z?: number, opts?: AnimationOptions): this;
animateShapes(partials: (null | TLShapePartial | undefined)[], options?: {
duration?: number;
ease?: (t: number) => number;
}): this;
// (undocumented)
animateToShape(shapeId: TLShapeId, opts?: AnimationOptions): this;
// @internal (undocumented)
annotateError(error: unknown, { origin, willCrashApp, tags, extras, }: {
origin: string;
willCrashApp: boolean;
tags?: Record<string, boolean | number | string>;
extras?: Record<string, unknown>;
}): void;
get assets(): (TLBookmarkAsset | TLImageAsset | TLVideoAsset)[];
bail(): this;
bailToMark(id: string): this;
batch(fn: () => void): this;
blur(): this;
bringForward(ids?: TLShapeId[]): this;
bringToFront(ids?: TLShapeId[]): this;
// (undocumented)
get brush(): Box2dModel | null;
get camera(): TLCamera;
cancel(): this;
cancelDoubleClick(): void;
get canMoveCamera(): boolean;
set canMoveCamera(canMove: boolean);
get canRedo(): boolean;
get canUndo(): boolean;
centerOnPoint(x: number, y: number, opts?: AnimationOptions): this;
// @internal
protected _clickManager: ClickManager;
complete(): this;
readonly config: TldrawEditorConfig;
// @internal (undocumented)
crash(error: unknown): void;
// @internal
get crashingError(): unknown;
createAssets(assets: TLAsset[]): this;
// @internal (undocumented)
createErrorAnnotations(origin: string, willCrashApp: 'unknown' | boolean): {
tags: {
origin: string;
willCrashApp: 'unknown' | boolean;
};
extras: {
activeStateNode?: string;
selectedShapes?: TLUnknownShape[];
editingShape?: TLUnknownShape;
inputs?: Record<string, unknown>;
};
};
createPage(title: string, id?: TLPageId, belowPageIndex?: string): this;
createShapeId(id?: string): TLShapeId;
createShapes(partials: TLShapePartial[], select?: boolean): this;
get croppingId(): null | TLShapeId;
get cullingBounds(): Box2d;
// @internal (undocumented)
readonly _cullingBounds: Atom<Box2d, unknown>;
get cullingBoundsExpanded(): Box2d;
// @internal (undocumented)
readonly _cullingBoundsExpanded: Atom<Box2d, unknown>;
get currentPage(): TLPage;
get currentPageId(): TLPageId;
get currentToolId(): string;
// (undocumented)
get cursor(): TLCursor;
deleteAssets(ids: TLAssetId[]): this;
deleteOpenMenu: (id: string) => this;
deletePage(id: TLPageId): void;
deleteShapes(ids?: TLShapeId[]): this;
deselect(...ids: TLShapeId[]): this;
// (undocumented)
get devicePixelRatio(): number;
dispatch: (info: TLEventInfo) => this;
readonly disposables: Set<() => void>;
dispose(): void;
distributeShapes(operation: 'horizontal' | 'vertical', ids?: TLShapeId[]): this;
get documentSettings(): TLDocument;
// (undocumented)
duplicatePage(id?: TLPageId, createId?: TLPageId): void;
duplicateShapes(ids?: TLShapeId[], offset?: VecLike): this;
get editingId(): null | TLShapeId;
// (undocumented)
get editingShape(): null | TLUnknownShape;
get erasingIds(): TLShapeId[];
get erasingIdsSet(): Set<TLShapeId>;
findAncestor(shape: TLShape, predicate: (parent: TLShape) => boolean): TLShape | undefined;
findCommonAncestor(shapes: TLShape[], predicate?: (shape: TLShape) => boolean): TLShapeId | undefined;
flipShapes(operation: 'horizontal' | 'vertical', ids?: TLShapeId[]): this;
focus(): this;
// (undocumented)
get focusLayerId(): TLPageId | TLShapeId;
// (undocumented)
get focusLayerShape(): TLShape | undefined;
getAncestors(shape: TLShape, acc?: TLShape[]): TLShape[];
getAncestorsById(id: TLShapeId, acc?: TLShape[]): TLShape[];
getArrowsBoundTo(shapeId: TLShapeId): {
arrowId: TLShapeId;
handleId: "end" | "start";
}[];
getAssetById(id: TLAssetId): TLAsset | undefined;
getAssetBySrc(src: string): TLBookmarkAsset | TLImageAsset | TLVideoAsset | undefined;
getBounds(shape: TLShape): Box2d;
getBoundsById(id: TLShapeId): Box2d | undefined;
getClipPathById(id: TLShapeId): string | undefined;
getContainer: () => HTMLElement;
// (undocumented)
getContent(ids?: TLShapeId[]): TLClipboardModel | undefined;
getCssColor(id: TLColorStyle['id']): string;
getDeltaInParentSpace(shape: TLShape, delta: VecLike): Vec2d;
getDeltaInShapeSpace(shape: TLShape, delta: VecLike): Vec2d;
// (undocumented)
getDroppingShape(point: VecLike, droppingShapes?: TLShape[]): TLUnknownShape | undefined;
// (undocumented)
getHighestIndexForParent(parentId: TLPageId | TLShapeId): string;
getMaskedPageBounds(shape: TLShape): Box2d | undefined;
getMaskedPageBoundsById(id: TLShapeId): Box2d | undefined;
// (undocumented)
getOutermostSelectableShape(shape: TLShape, filter?: (shape: TLShape) => boolean): TLShape;
getOutline(shape: TLShape): Vec2dModel[];
getOutlineById(id: TLShapeId): Vec2dModel[];
getPageBounds(shape: TLShape): Box2d | undefined;
getPageBoundsById(id: TLShapeId): Box2d | undefined;
getPageById(id: TLPage['id']): TLPage | undefined;
getPageCenter(shape: TLShape): null | Vec2d;
getPageCenterById(id: TLShapeId): null | Vec2d;
getPageCorners(shape: TLShape): Vec2d[];
getPageInfoById(id: TLPage['id']): TLPage | undefined;
getPageMaskById(id: TLShapeId): undefined | VecLike[];
getPagePointById(id: TLShapeId): undefined | Vec2d;
getPageRotation(shape: TLShape): number;
getPageRotationById(id: TLShapeId): number;
getPageStateByPageId(id: TLPageId): TLInstancePageState | undefined;
getPageTransform(shape: TLShape): Matrix2d | undefined;
getPageTransformById(id: TLShapeId): Matrix2d | undefined;
// (undocumented)
getParentIdForNewShapeAtPoint(point: VecLike, shapeType: TLShapeType): TLPageId | TLShapeId;
getParentPageId(shape?: TLShape): TLPageId | undefined;
getParentShape(shape?: TLShape): TLShape | undefined;
getParentsMappedToChildren(ids: TLShapeId[]): Map<TLParentId, Set<TLShape>>;
getParentTransform(shape: TLShape): Matrix2d;
getPointInParentSpace(shapeId: TLShapeId, point: VecLike): Vec2d;
getPointInShapeSpace(shape: TLShape, point: VecLike): Vec2d;
getShapeById<T extends TLShape = TLShape>(id: TLParentId): T | undefined;
// (undocumented)
getShapesAndDescendantsInOrder(ids: TLShapeId[]): TLShape[];
getShapesAtPoint(point: VecLike): TLShape[];
getShapesInPage(pageId: TLPageId): TLShape[];
getShapeUtil<T extends TLShape = TLShape>(shape: T): TLShapeUtil<T>;
getShapeUtilByDef<Def extends TLShapeDef<any, any>>(def: Def): ReturnType<Def['createShapeUtils']>;
getSortedChildIds(parentId: TLParentId): TLShapeId[];
getStateDescendant(path: string): StateNode | undefined;
getStrokeWidth(id: TLSizeStyle['id']): number;
// (undocumented)
getSvg(ids?: TLShapeId[], opts?: Partial<{
scale: number;
background: boolean;
padding: number;
darkMode?: boolean | undefined;
preserveAspectRatio: React.SVGAttributes<SVGSVGElement>['preserveAspectRatio'];
}>): Promise<SVGSVGElement | undefined>;
getTransform(shape: TLShape): Matrix2d;
// (undocumented)
get gridSize(): number;
// (undocumented)
groupShapes(ids?: TLShapeId[], groupId?: TLShapeId): this;
hasAncestor(shape: TLShape | undefined, ancestorId: TLShapeId): boolean;
get hintingIds(): TLShapeId[];
readonly history: HistoryManager<this>;
// (undocumented)
get hoveredId(): null | TLShapeId;
// (undocumented)
get hoveredShape(): null | TLUnknownShape;
inputs: {
originPagePoint: Vec2d;
originScreenPoint: Vec2d;
previousPagePoint: Vec2d;
previousScreenPoint: Vec2d;
currentPagePoint: Vec2d;
currentScreenPoint: Vec2d;
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: Vec2d;
};
get instanceId(): TLInstanceId;
get instanceState(): TLInstance;
interrupt(): this;
get isChangingStyle(): boolean;
set isChangingStyle(v: boolean);
readonly isChromeForIos: boolean;
get isCoarsePointer(): boolean;
set isCoarsePointer(v: boolean);
// (undocumented)
get isDarkMode(): boolean;
get isFocused(): boolean;
// (undocumented)
get isFocusMode(): boolean;
// (undocumented)
get isGridMode(): boolean;
isIn(path: string): boolean;
isInAny(...paths: string[]): boolean;
readonly isIos: boolean;
get isMenuOpen(): boolean;
// (undocumented)
get isPenMode(): boolean;
isPointInShape(point: VecLike, shape: TLShape): boolean;
// (undocumented)
get isReadOnly(): boolean;
readonly isSafari: boolean;
isSelected(id: TLShapeId): boolean;
isShapeInPage(shape: TLShape, pageId?: TLPageId): boolean;
isShapeInViewport(id: TLShapeId): boolean;
// (undocumented)
get isSnapMode(): boolean;
// (undocumented)
get isToolLocked(): boolean;
isWithinSelection(id: TLShapeId): boolean;
// (undocumented)
lockShapes(_ids?: TLShapeId[]): this;
mark(reason?: string, onUndo?: boolean, onRedo?: boolean): string;
moveShapesToPage(ids: TLShapeId[], pageId: TLPageId): this;
nudgeShapes(ids: TLShapeId[], direction: Vec2dModel, major?: boolean, ephemeral?: boolean): this;
onCreateAssetFromFile(file: File): Promise<TLAsset>;
onCreateBookmarkFromUrl(url: string): Promise<{
image: string;
title: string;
description: string;
}>;
get onlySelectedShape(): TLBaseShape<any, any> | null;
get openMenus(): string[];
packShapes(ids?: TLShapeId[], padding?: number): this;
get pages(): TLPage[];
get pageState(): TLInstancePageState;
pageToScreen(x: number, y: number, z?: number, camera?: Vec2dModel): {
x: number;
y: number;
z: number;
};
pan(dx: number, dy: number, opts?: AnimationOptions): this;
panZoomIntoView(ids: TLShapeId[], opts?: AnimationOptions): this;
// (undocumented)
popFocusLayer(): this;
// @internal
get props(): null | TLNullableShapeProps;
// (undocumented)
putContent(content: TLClipboardModel, options?: {
point?: VecLike;
select?: boolean;
preservePosition?: boolean;
preserveIds?: boolean;
}): this;
redo(): this;
renamePage(id: TLPageId, name: string, squashing?: boolean): this;
get renderingShapes(): {
id: TLShapeId;
index: number;
opacity: number;
isCulled: boolean;
isInViewport: boolean;
}[];
reorderShapes(operation: 'backward' | 'forward' | 'toBack' | 'toFront', ids: TLShapeId[]): this;
reparentShapesById(ids: TLShapeId[], parentId: TLParentId, insertIndex?: string): this;
// (undocumented)
replaceStoreContentsWithRecordsForOtherDocument(records: TLRecord[]): void;
resetZoom(point?: Vec2d, opts?: AnimationOptions): this;
// (undocumented)
resizeShape(id: TLShapeId, scale: VecLike, options?: {
initialBounds?: Box2d;
scaleOrigin?: VecLike;
scaleAxisRotation?: number;
initialShape?: TLShape;
initialPageTransform?: MatLike;
dragHandle?: TLResizeHandle;
mode?: TLResizeMode;
}): this;
readonly root: RootState;
rotateShapesBy(ids: TLShapeId[], delta: number): this;
screenToPage(x: number, y: number, z?: number, camera?: Vec2dModel): {
x: number;
y: number;
z: number;
};
// (undocumented)
get scribble(): null | TLScribble;
select(...ids: TLShapeId[]): this;
selectAll(): this;
get selectedIds(): TLShapeId[];
get selectedIdsSet(): ReadonlySet<TLShapeId>;
get selectedPageBounds(): Box2d | null;
get selectedShapes(): TLBaseShape<any, any>[];
// (undocumented)
get selectionBounds(): Box2d | undefined;
// (undocumented)
get selectionPageCenter(): null | Vec2d;
get selectionRotation(): number;
selectNone(): this;
sendBackward(ids?: TLShapeId[]): this;
sendToBack(ids?: TLShapeId[]): this;
setBrush(brush?: Box2dModel | null): this;
setCamera(x: number, y: number, z?: number, { stopFollowing }?: ViewportOptions): this;
// (undocumented)
setCroppingId(id: null | TLShapeId): this;
setCurrentPageId(pageId: TLPageId, { stopFollowing }?: ViewportOptions): this;
setCursor(cursor: Partial<TLCursor>): this;
// (undocumented)
setDarkMode(isDarkMode: boolean): this;
setEditingId(id: null | TLShapeId): this;
setErasingIds(ids?: TLShapeId[]): this;
setFocusLayer(next: null | TLShapeId): this;
// (undocumented)
setFocusMode(isFocusMode: boolean): this;
// (undocumented)
setGridMode(isGridMode: boolean): this;
setHintingIds(ids: TLShapeId[]): this;
setHoveredId(id?: null | TLShapeId): this;
setInstancePageState(partial: Partial<TLInstancePageState>, ephemeral?: boolean): void;
// (undocumented)
setPenMode(isPenMode: boolean): this;
setProp(key: TLShapeProp, value: any, ephemeral?: boolean, squashing?: boolean): this;
// @internal (undocumented)
setReadOnly(isReadOnly: boolean): this;
setScribble(scribble?: null | TLScribble): this;
setSelectedIds(ids: TLShapeId[], squashing?: boolean): this;
setSelectedTool(id: string, info?: {}): this;
// (undocumented)
setSnapMode(isSnapMode: boolean): this;
// (undocumented)
setToolLocked(isToolLocked: boolean): this;
setZoomBrush(zoomBrush?: Box2dModel | null): this;
get shapeIds(): Set<TLShapeId>;
get shapesArray(): TLShape[];
shapeUtils: {
readonly [K in string]?: TLShapeUtil<TLUnknownShape>;
};
// (undocumented)
slideCamera(opts?: {
speed: number;
direction: Vec2d;
friction: number;
speedThreshold?: number | undefined;
}): this;
readonly snaps: SnapManager;
get sortedShapesArray(): TLShape[];
stackShapes(operation: 'horizontal' | 'vertical', ids?: TLShapeId[], gap?: number): this;
startFollowingUser: (userId: TLUserId) => this | undefined;
stopCameraAnimation(): this;
stopFollowingUser: () => this;
readonly store: TLStore;
stretchShapes(operation: 'horizontal' | 'vertical', ids?: TLShapeId[]): this;
static styles: TLStyleCollections;
textMeasure: TextManager;
undo(): HistoryManager<this>;
// (undocumented)
ungroupShapes(ids?: TLShapeId[]): this;
updateAssets(assets: TLAssetPartial[]): this;
// @internal
updateCullingBounds(): this;
updateInstanceState(partial: Partial<Omit<TLInstance, 'currentPageId' | 'documentId' | 'userId'>>, ephemeral?: boolean, squashing?: boolean): this;
updatePage(partial: RequiredKeys<TLPage, 'id'>, squashing?: boolean): this;
updateShapes(partials: (null | TLShapePartial | undefined)[], squashing?: boolean): this;
updateUser(partial: Partial<TLUser>): void;
updateUserDocumentSettings(partial: Partial<TLUserDocument>, ephemeral?: boolean): this;
// (undocumented)
updateUserPresence: ({ cursor, color, viewportPageBounds, }?: {
cursor?: undefined | Vec2dModel;
color?: string | undefined;
viewportPageBounds?: Box2dModel | undefined;
}) => void;
updateViewportScreenBounds(center?: boolean): this;
get user(): TLUser;
// (undocumented)
get userDocumentSettings(): TLUserDocument;
get userId(): TLUserId;
// (undocumented)
get userPresence(): TLUserPresence | undefined;
get userSettings(): TLUser;
get viewportPageBounds(): Box2d;
get viewportPageCenter(): Vec2d;
get viewportScreenBounds(): Box2d;
get viewportScreenCenter(): Vec2d;
visitDescendants(parentId: TLParentId, visitor: (id: TLShapeId) => false | void): void;
// (undocumented)
get zoomBrush(): Box2dModel | null;
zoomIn(point?: Vec2d, opts?: AnimationOptions): this;
get zoomLevel(): number;
zoomOut(point?: Vec2d, opts?: AnimationOptions): this;
zoomToBounds(x: number, y: number, width: number, height: number, targetZoom?: number, opts?: AnimationOptions): this;
zoomToContent(): this;
zoomToFit(opts?: AnimationOptions): this;
zoomToSelection(opts?: AnimationOptions): this;
}
// @internal (undocumented)
export function applyRotationToSnapshotShapes({ delta, app, snapshot, stage, }: {
delta: number;
snapshot: RotationSnapshot;
app: App;
stage: 'end' | 'one-off' | 'start' | 'update';
}): void;
// @public (undocumented)
export interface AppOptions {
config?: TldrawEditorConfig;
getContainer: () => HTMLElement;
store: TLStore;
}
// @public (undocumented)
export const ARROW_LABEL_FONT_SIZES: Record<TLSizeType, number>;
// @public (undocumented)
export function blobAsString(blob: Blob): Promise<string>;
// @internal (undocumented)
export const BOUND_ARROW_OFFSET = 10;
// @internal (undocumented)
export function buildFromV1Document(app: App, document: LegacyTldrawDocument): void;
// @public (undocumented)
export const Canvas: React_2.MemoExoticComponent<({ onDropOverride, }: {
onDropOverride?: ((defaultOnDrop: (e: React_2.DragEvent<Element>) => Promise<void>) => (e: React_2.DragEvent<Element>) => Promise<void>) | undefined;
}) => JSX.Element>;
// @public (undocumented)
export const checkFlag: (flag: (() => boolean) | boolean | undefined) => boolean | undefined;
// @public (undocumented)
export type ClipboardPayload = {
data: string;
kind: 'file';
type: 'application/tldraw';
} | {
data: string;
kind: 'text';
type: 'application/tldraw';
} | {
data: TLClipboardModel;
kind: 'content';
type: 'application/tldraw';
};
// @public
export function containBoxSize(originalSize: BoxWidthHeight, containBoxSize: BoxWidthHeight): BoxWidthHeight;
// @public (undocumented)
export function correctSpacesToNbsp(input: string): string;
// @public (undocumented)
export function createAssetShapeAtPoint(app: App, svgString: string, point: Vec2dModel): Promise<void>;
// @public
export function createBookmarkShapeAtPoint(app: App, url: string, point: Vec2dModel): Promise<void>;
// @public (undocumented)
export function createEmbedShapeAtPoint(app: App, url: string, point: Vec2dModel, props: {
width?: number;
height?: number;
doesResize?: boolean;
}): void;
// @public (undocumented)
export function createShapesFromFiles(app: App, files: File[], position: VecLike, _ignoreParent?: boolean): Promise<void>;
// @public (undocumented)
export function dataTransferItemAsString(item: DataTransferItem): Promise<string>;
// @public (undocumented)
export function dataUrlToFile(url: string, filename: string, mimeType: string): Promise<File>;
// @internal (undocumented)
export const debugFlags: {
preventDefaultLogging: Atom<boolean, unknown>;
pointerCaptureLogging: Atom<boolean, unknown>;
pointerCaptureTracking: Atom<boolean, unknown>;
pointerCaptureTrackingObject: Atom<Map<Element, number>, unknown>;
elementRemovalLogging: Atom<boolean, unknown>;
debugSvg: Atom<boolean, unknown>;
throwToBlob: Atom<boolean, unknown>;
peopleMenu: Atom<boolean, unknown>;
logMessages: Atom<never[], unknown>;
resetConnectionEveryPing: Atom<boolean, unknown>;
newLiveCollaborators: Atom<boolean, unknown>;
};
// @internal (undocumented)
export const DEFAULT_ANIMATION_OPTIONS: {
duration: number;
easing: (t: number) => number;
};
// @internal (undocumented)
export const DEFAULT_BOOKMARK_HEIGHT = 320;
// @internal (undocumented)
export const DEFAULT_BOOKMARK_WIDTH = 300;
// @public (undocumented)
export let defaultEditorAssetUrls: EditorAssetUrls;
// @public (undocumented)
export function defaultEmptyAs(str: string, dflt: string): string;
// @internal (undocumented)
export const DefaultErrorFallback: TLErrorFallback;
// @public (undocumented)
export function defineShape<ShapeType extends TLUnknownShape, ShapeUtil extends TLShapeUtil<ShapeType> = TLShapeUtil<ShapeType>>({ type, getShapeUtil, validator, migrations, }: {
type: ShapeType['type'];
getShapeUtil: () => TLShapeUtilConstructor<ShapeType, ShapeUtil>;
validator?: StoreValidator<ShapeType>;
migrations?: Migrations;
}): TLShapeDef<ShapeType, ShapeUtil>;
// @internal (undocumented)
export const DOUBLE_CLICK_DURATION = 450;
// @public (undocumented)
export function downloadDataURLAsFile(dataUrl: string, filename: string): void;
// @internal (undocumented)
export const DRAG_DISTANCE = 4;
// @public (undocumented)
export type EditorAssetUrls = {
fonts: {
monospace: string;
serif: string;
sansSerif: string;
draw: string;
};
};
// @public (undocumented)
export type EmbedResult = {
definition: EmbedDefinition;
url: string;
embedUrl: string;
} | undefined;
// @public (undocumented)
export class ErrorBoundary extends React_2.Component<React_2.PropsWithRef<React_2.PropsWithChildren<ErrorBoundaryProps>>, ErrorBoundaryState> {
// (undocumented)
componentDidCatch(error: unknown): void;
// (undocumented)
static getDerivedStateFromError(error: Error): {
error: Error;
};
// (undocumented)
render(): React_2.ReactNode;
// (undocumented)
state: ErrorBoundaryState;
}
// @public (undocumented)
export interface ErrorBoundaryProps {
// (undocumented)
children: React_2.ReactNode;
// (undocumented)
fallback: (error: unknown) => React_2.ReactNode;
// (undocumented)
onError?: ((error: unknown) => void) | null;
}
// @public (undocumented)
export function ErrorScreen({ children }: {
children: any;
}): JSX.Element;
// @public (undocumented)
export interface ErrorSyncedStore {
// (undocumented)
readonly error: Error;
// (undocumented)
readonly status: 'error';
// (undocumented)
readonly store?: undefined;
}
// @public (undocumented)
export const EVENT_NAME_MAP: Record<Exclude<TLEventName, TLPinchEventName>, keyof TLEventHandlers>;
// @public
export function fileToBase64(file: Blob): Promise<string>;
// @public (undocumented)
export const FONT_ALIGNMENT: Record<TLAlignType, string>;
// @public (undocumented)
export const FONT_FAMILIES: Record<TLFontType, string>;
// @public (undocumented)
export const FONT_SIZES: Record<TLSizeType, number>;
// @public
export function getEmbedInfo(inputUrl: string): EmbedResult;
// @public
export function getEmbedInfoUnsafely(inputUrl: string): EmbedResult;
// @public
export function getFileMetaData(file: File): Promise<{
isAnimated: boolean;
}>;
export { getHashForString }
// @public
export function getImageSizeFromSrc(dataURL: string): Promise<{
w: number;
h: number;
}>;
// @public
export function getIncrementedName(name: string, others: string[]): string;
// @public (undocumented)
export function getIndexAbove(below: string): string;
// @public (undocumented)
export function getIndexBelow(above: string): string;
// @public (undocumented)
export function getIndexBetween(below: string, above?: string): string;
// @public (undocumented)
export function getIndexGenerator(): () => string;
// @public (undocumented)
export function getIndices(n: number): string[];
// @public (undocumented)
export function getIndicesAbove(below: string, n: number): string[];
// @public (undocumented)
export function getIndicesBelow(above: string, n: number): string[];
// @public (undocumented)
export function getIndicesBetween(below: string | undefined, above: string | undefined, n: number): string[];
// @public (undocumented)
export function getMaxIndex(...indices: (string | undefined)[]): string;
// @public
export function getMediaAssetFromFile(file: File): Promise<TLAsset>;
// @internal (undocumented)
export function getPointerInfo(e: PointerEvent | React.PointerEvent, container: HTMLElement): {
point: {
x: number;
y: number;
z: number;
};
shiftKey: boolean;
altKey: boolean;
ctrlKey: boolean;
pointerId: number;
button: number;
isPen: boolean;
};
// @public
export function getResizedImageDataUrl(dataURLForImage: string, width: number, height: number): Promise<string>;
// @internal (undocumented)
export function getRotationSnapshot({ app }: {
app: App;
}): {
selectionPageCenter: Vec2d;
initialCursorAngle: number;
initialSelectionRotation: number;
shapeSnapshots: {
shape: TLBaseShape<any, any>;
initialPagePoint: Vec2d;
}[];
};
// @public (undocumented)
export function getSplineForLineShape(shape: TLLineShape): NonNullable<CubicSpline2d | Polyline2d>;
// @public (undocumented)
export function getSvgAsDataUrl(svg: SVGElement): Promise<string>;
// @public (undocumented)
export function getSvgAsDataUrlSync(node: SVGElement): string;
// @public (undocumented)
export function getSvgAsImage(svg: SVGElement, options: {
type: TLCopyType | TLExportType;
quality: number;
scale: number;
}): Promise<Blob | null>;
// @public (undocumented)
export function getSvgAsString(svg: SVGElement): string;
// @public
export function getSvgPathFromStroke(points: Vec2d[], closed?: boolean): string;
// @public
export function getSvgPathFromStrokePoints(points: StrokePoint[], closed?: boolean): string;
// @public (undocumented)
export function getTextBoundingBox(text: SVGTextElement): DOMRect;
// @public (undocumented)
export const getValidHttpURLList: (url: string) => string[] | undefined;
// @public
export function getVideoSizeFromSrc(src: string): Promise<{
w: number;
h: number;
}>;
// @internal (undocumented)
export const GRID_INCREMENT = 5;
// @public (undocumented)
export const GRID_STEPS: {
min: number;
mid: number;
step: number;
}[];
// @internal (undocumented)
export const HAND_TOOL_FRICTION = 0.09;
// @public (undocumented)
export function hardResetApp(): void;
// @internal (undocumented)
export const HASH_PATERN_ZOOM_NAMES: Record<string, string>;
// @public (undocumented)
export function HTMLContainer({ children, className, ...rest }: HTMLContainerProps): JSX.Element;
// @public (undocumented)
export type HTMLContainerProps = React_2.HTMLAttributes<HTMLDivElement>;
// @public (undocumented)
export const ICON_SIZES: Record<TLSizeType, number>;
// @public (undocumented)
export const INDENT = " ";
// @public (undocumented)
export function indexGenerator(n?: number): Generator<string, void, unknown>;
// @public (undocumented)
export interface InitializingSyncedStore {
// (undocumented)
readonly error?: undefined;
// (undocumented)
readonly status: 'loading';
// (undocumented)
readonly store?: undefined;
}
// @public
export function isAnimated(buffer: ArrayBuffer): boolean;
// @public (undocumented)
export function isGeoShape(shape: TLShape): shape is TLGeoShape;
// @public
export function isGIF(buffer: ArrayBuffer): boolean;
// @public (undocumented)
export const isImage: (ext: string) => boolean;
// @public (undocumented)
export function isNoteShape(shape: TLShape): shape is TLNoteShape;
// @public
export function isSerializable(value: any): boolean;
// @public (undocumented)
export function isShapeWithHandles(shape: TLShape): boolean;
// @public (undocumented)
export const isSvgText: (text: string) => boolean;
// @public (undocumented)
export const isValidHttpURL: (url: string) => boolean;
// @public (undocumented)
export const LABEL_FONT_SIZES: Record<TLSizeType, number>;
// @internal (undocumented)
export interface LegacyTldrawDocument {
// (undocumented)
assets: TDAssets;
// (undocumented)
id: string;
// (undocumented)
name: string;
// (undocumented)
pages: Record<string, TDPage>;
// (undocumented)
pageStates: Record<string, TLV1PageState>;
// (undocumented)
version: number;
}
// @public (undocumented)
export function LoadingScreen({ children }: {
children: any;
}): JSX.Element;
// @public (undocumented)
export function loopToHtmlElement(elm: Element): HTMLElement;
// @internal (undocumented)
export const MAJOR_NUDGE_FACTOR = 10;
// @public (undocumented)
export function matchEmbedUrl(url: string): {
definition: {
readonly type: "codepen";
readonly title: "Codepen";
readonly hostnames: readonly ["codepen.io"];
readonly minWidth: 300;
readonly minHeight: 300;
readonly width: 520;
readonly height: 400;
readonly doesResize: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "codesandbox";
readonly title: "CodeSandbox";
readonly hostnames: readonly ["codesandbox.io"];
readonly minWidth: 300;
readonly minHeight: 300;
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "excalidraw";
readonly title: "Excalidraw";
readonly hostnames: readonly ["excalidraw.com"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
readonly isAspectRatioLocked: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "felt";
readonly title: "Felt";
readonly hostnames: readonly ["felt.com"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "figma";
readonly title: "Figma";
readonly hostnames: readonly ["figma.com"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "github_gist";
readonly title: "GitHub Gist";
readonly hostnames: readonly ["gist.github.com"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "google_calendar";
readonly title: "Google Calendar";
readonly hostnames: readonly ["calendar.google.*"];
readonly width: 720;
readonly height: 500;
readonly minWidth: 460;
readonly minHeight: 360;
readonly doesResize: true;
readonly instructionLink: "https://support.google.com/calendar/answer/41207?hl=en";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "google_maps";
readonly title: "Google Maps";
readonly hostnames: readonly ["google.*"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "google_slides";
readonly title: "Google Slides";
readonly hostnames: readonly ["docs.google.*"];
readonly width: 720;
readonly height: 500;
readonly minWidth: 460;
readonly minHeight: 360;
readonly doesResize: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "observable";
readonly title: "Observable";
readonly hostnames: readonly ["observablehq.com"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
readonly isAspectRatioLocked: false;
readonly backgroundColor: "#fff";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "replit";
readonly title: "Replit";
readonly hostnames: readonly ["replit.com"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "scratch";
readonly title: "Scratch";
readonly hostnames: readonly ["scratch.mit.edu"];
readonly width: 520;
readonly height: 400;
readonly doesResize: false;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "spotify";
readonly title: "Spotify";
readonly hostnames: readonly ["open.spotify.com"];
readonly width: 720;
readonly height: 500;
readonly minHeight: 500;
readonly overrideOutlineRadius: 12;
readonly doesResize: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "tldraw";
readonly title: "tldraw";
readonly hostnames: readonly ["beta.tldraw.com", "lite.tldraw.com", "www.tldraw.com"];
readonly minWidth: 300;
readonly minHeight: 300;
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "vimeo";
readonly title: "Vimeo";
readonly hostnames: readonly ["vimeo.com", "player.vimeo.com"];
readonly width: 640;
readonly height: 360;
readonly doesResize: true;
readonly isAspectRatioLocked: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "youtube";
readonly title: "YouTube";
readonly hostnames: readonly ["*.youtube.com", "youtube.com", "youtu.be"];
readonly width: 800;
readonly height: 450;
readonly doesResize: true;
readonly overridePermissions: {
readonly 'allow-presentation': true;
};
readonly isAspectRatioLocked: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
};
url: string;
embedUrl: string;
} | undefined;
// @public (undocumented)
export function matchUrl(url: string): {
definition: {
readonly type: "codepen";
readonly title: "Codepen";
readonly hostnames: readonly ["codepen.io"];
readonly minWidth: 300;
readonly minHeight: 300;
readonly width: 520;
readonly height: 400;
readonly doesResize: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "codesandbox";
readonly title: "CodeSandbox";
readonly hostnames: readonly ["codesandbox.io"];
readonly minWidth: 300;
readonly minHeight: 300;
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "excalidraw";
readonly title: "Excalidraw";
readonly hostnames: readonly ["excalidraw.com"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
readonly isAspectRatioLocked: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "felt";
readonly title: "Felt";
readonly hostnames: readonly ["felt.com"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "figma";
readonly title: "Figma";
readonly hostnames: readonly ["figma.com"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "github_gist";
readonly title: "GitHub Gist";
readonly hostnames: readonly ["gist.github.com"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "google_calendar";
readonly title: "Google Calendar";
readonly hostnames: readonly ["calendar.google.*"];
readonly width: 720;
readonly height: 500;
readonly minWidth: 460;
readonly minHeight: 360;
readonly doesResize: true;
readonly instructionLink: "https://support.google.com/calendar/answer/41207?hl=en";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "google_maps";
readonly title: "Google Maps";
readonly hostnames: readonly ["google.*"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "google_slides";
readonly title: "Google Slides";
readonly hostnames: readonly ["docs.google.*"];
readonly width: 720;
readonly height: 500;
readonly minWidth: 460;
readonly minHeight: 360;
readonly doesResize: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "observable";
readonly title: "Observable";
readonly hostnames: readonly ["observablehq.com"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
readonly isAspectRatioLocked: false;
readonly backgroundColor: "#fff";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "replit";
readonly title: "Replit";
readonly hostnames: readonly ["replit.com"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "scratch";
readonly title: "Scratch";
readonly hostnames: readonly ["scratch.mit.edu"];
readonly width: 520;
readonly height: 400;
readonly doesResize: false;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "spotify";
readonly title: "Spotify";
readonly hostnames: readonly ["open.spotify.com"];
readonly width: 720;
readonly height: 500;
readonly minHeight: 500;
readonly overrideOutlineRadius: 12;
readonly doesResize: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "tldraw";
readonly title: "tldraw";
readonly hostnames: readonly ["beta.tldraw.com", "lite.tldraw.com", "www.tldraw.com"];
readonly minWidth: 300;
readonly minHeight: 300;
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "vimeo";
readonly title: "Vimeo";
readonly hostnames: readonly ["vimeo.com", "player.vimeo.com"];
readonly width: 640;
readonly height: 360;
readonly doesResize: true;
readonly isAspectRatioLocked: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "youtube";
readonly title: "YouTube";
readonly hostnames: readonly ["*.youtube.com", "youtube.com", "youtu.be"];
readonly width: 800;
readonly height: 450;
readonly doesResize: true;
readonly overridePermissions: {
readonly 'allow-presentation': true;
};
readonly isAspectRatioLocked: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
};
embedUrl: string;
url: string;
} | undefined;
// @internal (undocumented)
export const MAX_ASSET_HEIGHT = 1000;
// @internal (undocumented)
export const MAX_ASSET_WIDTH = 1000;
// @internal (undocumented)
export const MAX_PAGES = 40;
// @internal (undocumented)
export const MAX_SHAPES_PER_PAGE = 2000;
// @internal (undocumented)
export const MAX_ZOOM = 8;
// @internal (undocumented)
export const MIN_ARROW_LENGTH = 48;
// @internal (undocumented)
export const MIN_ZOOM = 0.1;
// @internal (undocumented)
export const MINOR_NUDGE_FACTOR = 1;
// @internal (undocumented)
export const MULTI_CLICK_DURATION = 200;
// @public (undocumented)
export function normalizeWheel(event: React.WheelEvent<HTMLElement> | WheelEvent): {
x: number;
y: number;
z: number;
};
// @public (undocumented)
export type OnBeforeCreateHandler<T extends TLShape> = (next: T) => T | void;
// @public (undocumented)
export type OnBeforeUpdateHandler<T extends TLShape> = (prev: T, next: T) => T | void;
// @internal (undocumented)
export type OnBindingChangeHandler<T extends TLShape> = (shape: T) => TLShapePartial<T> | void;
// @public (undocumented)
export type OnChildrenChangeHandler<T extends TLShape> = (shape: T) => TLShapePartial[] | void;
// @public (undocumented)
export type OnClickHandler<T extends TLShape> = (shape: T) => TLShapePartial<T> | void;
// @public (undocumented)
export type OnDoubleClickHandleHandler<T extends TLShape> = (shape: T, handle: TLHandle) => TLShapePartial<T> | void;
// @public (undocumented)
export type OnDoubleClickHandler<T extends TLShape> = (shape: T) => TLShapePartial<T> | void;
// @public (undocumented)
export type OnDragHandler<T extends TLShape, R = void> = (shape: T, shapes: TLShape[]) => R;
// @public (undocumented)
export type OnEditEndHandler<T extends TLShape> = (shape: T) => void;
// @public (undocumented)
export type OnHandleChangeHandler<T extends TLShape> = (shape: T, info: {
handle: TLHandle;
isPrecise: boolean;
}) => TLShapePartial<T> | void;
// @public (undocumented)
export type OnResizeEndHandler<T extends TLShape> = EventChangeHandler<T>;
// @public (undocumented)
export type OnResizeHandler<T extends TLShape> = (shape: T, info: TLResizeInfo<T>) => Partial<TLShapePartial<T>> | undefined | void;
// @public (undocumented)
export type OnResizeStartHandler<T extends TLShape> = EventStartHandler<T>;
// @public (undocumented)
export type OnRotateEndHandler<T extends TLShape> = EventChangeHandler<T>;
// @public (undocumented)
export type OnRotateHandler<T extends TLShape> = EventChangeHandler<T>;
// @public (undocumented)
export type OnRotateStartHandler<T extends TLShape> = EventStartHandler<T>;
// @public (undocumented)
export type OnTranslateEndHandler<T extends TLShape> = EventChangeHandler<T>;
// @public (undocumented)
export type OnTranslateHandler<T extends TLShape> = EventChangeHandler<T>;
// @public (undocumented)
export type OnTranslateStartHandler<T extends TLShape> = EventStartHandler<T>;
// @public (undocumented)
export function openWindow(url: string, target?: string): void;
// @internal (undocumented)
export function OptionalErrorBoundary({ children, fallback, ...props }: Omit<ErrorBoundaryProps, 'fallback'> & {
fallback: ((error: unknown) => React_2.ReactNode) | null;
}): JSX.Element;
// @public
export function preventDefault(event: Event | React_3.BaseSyntheticEvent): void;
// @public (undocumented)
export interface ReadySyncedStore {
// (undocumented)
readonly error?: undefined;
// (undocumented)
readonly status: 'synced';
// (undocumented)
readonly store: TLStore;
}
// @public (undocumented)
export function refreshPage(): void;
// @public (undocumented)
export function releasePointerCapture(element: Element, event: PointerEvent | React_3.PointerEvent<Element>): void;
// @internal (undocumented)
export const REMOVE_SYMBOL: unique symbol;
// @public (undocumented)
export type RequiredKeys<T, K extends keyof T> = Pick<T, K> & Partial<T>;
// @internal (undocumented)
export const RICH_TYPES: Record<string, boolean>;
// @public (undocumented)
export function rotateBoxShadow(rotation: number, shadows: {
offsetX: number;
offsetY: number;
blur: number;
spread: number;
color: string;
}[]): string;
// @public (undocumented)
export const ROTATING_SHADOWS: {
offsetX: number;
offsetY: number;
blur: number;
spread: number;
color: string;
}[];
// @internal (undocumented)
export type RotationSnapshot = ReturnType<typeof getRotationSnapshot>;
// @public (undocumented)
export const runtime: {
openWindow: (url: string, target: string) => void;
refreshPage: () => void;
hardReset: () => void;
};
// @internal (undocumented)
export function setDefaultEditorAssetUrls(assetUrls: EditorAssetUrls): void;
// @public (undocumented)
export function setPointerCapture(element: Element, event: PointerEvent | React_3.PointerEvent<Element>): void;
// @public (undocumented)
export function setPropsForNextShape(previousProps: TLInstancePropsForNextShape, newProps: Partial<TLShapeProps>): TLInstancePropsForNextShape;
// @public (undocumented)
export function setRuntimeOverrides(input: Partial<typeof runtime>): void;
// @public (undocumented)
export function snapToGrid(n: number, gridSize: number): number;
// @public (undocumented)
export function sortById<T extends {
id: string;
}>(a: T, b: T): -1 | 0 | 1;
// @public (undocumented)
export function sortByIndex<T extends {
index: string;
}>(a: T, b: T): -1 | 0 | 1;
// @public (undocumented)
export abstract class StateNode implements Partial<TLEventHandlers> {
constructor(app: App, parent?: StateNode);
// (undocumented)
app: App;
// (undocumented)
static children?: () => StateNodeConstructor[];
// (undocumented)
children?: Record<string, StateNode>;
// (undocumented)
current: Atom<StateNode | undefined>;
// (undocumented)
enter(info: any, from: string): void;
// (undocumented)
exit(info: any, from: string): void;
// (undocumented)
handleEvent(info: Exclude<TLEventInfo, TLPinchEventInfo>): void;
// (undocumented)
static id: string;
// (undocumented)
id: string;
// (undocumented)
static initial?: string;
// (undocumented)
initial?: string;
// (undocumented)
isActive: boolean;
// (undocumented)
onCancel?: TLEventHandlers['onCancel'];
// (undocumented)
onComplete?: TLEventHandlers['onComplete'];
// (undocumented)
onDoubleClick?: TLEventHandlers['onDoubleClick'];
// (undocumented)
onEnter?: UiEnterHandler;
// (undocumented)
onExit?: UiExitHandler;
// (undocumented)
onInterrupt?: TLEventHandlers['onInterrupt'];
// (undocumented)
onKeyDown?: TLEventHandlers['onKeyDown'];
// (undocumented)
onKeyRepeat?: TLEventHandlers['onKeyRepeat'];
// (undocumented)
onKeyUp?: TLEventHandlers['onKeyUp'];
// (undocumented)
onMiddleClick?: TLEventHandlers['onMiddleClick'];
// (undocumented)
onPointerDown?: TLEventHandlers['onPointerDown'];
// (undocumented)
onPointerEnter?: TLEventHandlers['onPointerEnter'];
// (undocumented)
onPointerLeave?: TLEventHandlers['onPointerLeave'];
// (undocumented)
onPointerMove?: TLEventHandlers['onPointerMove'];
// (undocumented)
onPointerUp?: TLEventHandlers['onPointerUp'];
// (undocumented)
onQuadrupleClick?: TLEventHandlers['onQuadrupleClick'];
// (undocumented)
onRightClick?: TLEventHandlers['onRightClick'];
// (undocumented)
onTripleClick?: TLEventHandlers['onTripleClick'];
// (undocumented)
onWheel?: TLEventHandlers['onWheel'];
// (undocumented)
parent: StateNode;
// (undocumented)
path: Computed<string>;
// (undocumented)
readonly styles: TLStyleType[];
// (undocumented)
transition(id: string, info: any): this;
// (undocumented)
type: StateNodeType;
}
// @public (undocumented)
export interface StateNodeConstructor {
// (undocumented)
new (app: App, parent?: StateNode): StateNode;
// (undocumented)
children?: () => StateNodeConstructor[];
// (undocumented)
id: string;
// (undocumented)
initial?: string;
// (undocumented)
styles?: TLStyleType[];
}
// @public (undocumented)
export const STYLES: TLStyleCollections;
// @internal (undocumented)
export const SVG_PADDING = 32;
// @public (undocumented)
export function SVGContainer({ children, className, ...rest }: SVGContainerProps): JSX.Element;
// @public (undocumented)
export type SVGContainerProps = React_2.HTMLAttributes<SVGElement>;
// @public (undocumented)
export type SyncedStore = ErrorSyncedStore | InitializingSyncedStore | ReadySyncedStore;
// @public (undocumented)
export const TEXT_PROPS: {
lineHeight: number;
fontWeight: string;
fontVariant: string;
fontStyle: string;
padding: string;
maxWidth: string;
};
// @public (undocumented)
export const TLArrowShapeDef: TLShapeDef<TLArrowShape, TLArrowUtil>;
// @public (undocumented)
export class TLArrowUtil extends TLShapeUtil<TLArrowShape> {
// (undocumented)
canBind: () => boolean;
// (undocumented)
canEdit: () => boolean;
// (undocumented)
defaultProps(): TLArrowShape['props'];
// (undocumented)
getArrowInfo(shape: TLArrowShape): ArrowInfo | undefined;
// (undocumented)
getBounds(shape: TLArrowShape): Box2d;
// (undocumented)
getCenter(shape: TLArrowShape): Vec2d;
// (undocumented)
getEditingBounds: (shape: TLArrowShape) => Box2d;
// (undocumented)
getHandles(shape: TLArrowShape): TLHandle[];
// (undocumented)
getLabelBounds(shape: TLArrowShape): Box2d | null;
// (undocumented)
getOutline(shape: TLArrowShape): Vec2dModel[];
// (undocumented)
getOutlineWithoutLabel(shape: TLArrowShape): VecLike[];
// (undocumented)
hideResizeHandles: TLShapeUtilFlag<TLArrowShape>;
// (undocumented)
hideRotateHandle: TLShapeUtilFlag<TLArrowShape>;
// (undocumented)
hideSelectionBoundsBg: TLShapeUtilFlag<TLArrowShape>;
// (undocumented)
hideSelectionBoundsFg: TLShapeUtilFlag<TLArrowShape>;
// (undocumented)
hitTestLineSegment(shape: TLArrowShape, A: VecLike, B: VecLike): boolean;
// (undocumented)
hitTestPoint(shape: TLArrowShape, point: VecLike): boolean;
// (undocumented)
indicator(shape: TLArrowShape): JSX.Element | null;
// (undocumented)
isClosed: () => boolean;
// (undocumented)
get labelBoundsCache(): ComputedCache<Box2d | null, TLArrowShape>;
// (undocumented)
onDoubleClickHandle: (shape: TLArrowShape, handle: TLHandle) => TLShapePartial<TLArrowShape> | void;
// (undocumented)
onEditEnd: OnEditEndHandler<TLArrowShape>;
// (undocumented)
onHandleChange: OnHandleChangeHandler<TLArrowShape>;
// (undocumented)
onResize: OnResizeHandler<TLArrowShape>;
// (undocumented)
onTranslateStart: OnTranslateStartHandler<TLArrowShape>;
// (undocumented)
render(shape: TLArrowShape): JSX.Element | null;
// (undocumented)
snapPoints(_shape: TLArrowShape): Vec2d[];
// (undocumented)
toSvg(shape: TLArrowShape, font: string, colors: TLExportColors): SVGGElement;
// (undocumented)
static type: string;
}
// @public (undocumented)
export interface TLBaseEventInfo {
// (undocumented)
altKey: boolean;
// (undocumented)
ctrlKey: boolean;
// (undocumented)
shiftKey: boolean;
// (undocumented)
type: UiEventType;
}
// @public (undocumented)
export const TLBookmarkShapeDef: TLShapeDef<TLBookmarkShape, TLBookmarkUtil>;
// @public (undocumented)
export class TLBookmarkUtil extends TLBoxUtil<TLBookmarkShape> {
// (undocumented)
canResize: () => boolean;
// (undocumented)
defaultProps(): TLBookmarkShape['props'];
// (undocumented)
getHumanReadableAddress(shape: TLBookmarkShape): string;
// (undocumented)
hideSelectionBoundsBg: () => boolean;
// (undocumented)
hideSelectionBoundsFg: () => boolean;
// (undocumented)
indicator(shape: TLBookmarkShape): JSX.Element;
// (undocumented)
onBeforeCreate?: OnBeforeCreateHandler<TLBookmarkShape>;
// (undocumented)
onBeforeUpdate?: OnBeforeUpdateHandler<TLBookmarkShape>;
// (undocumented)
render(shape: TLBookmarkShape): JSX.Element;
// (undocumented)
static type: string;
// (undocumented)
protected updateBookmarkAsset: {
(shape: TLBookmarkShape): Promise<void>;
cancel(): void;
};
}
// @public (undocumented)
export type TLBoxLike = TLBaseShape<string, {
w: number;
h: number;
}>;
// @public (undocumented)
export abstract class TLBoxTool extends StateNode {
// (undocumented)
static children: () => (typeof Idle_4 | typeof Pointing_3)[];
// (undocumented)
static id: string;
// (undocumented)
static initial: string;
// (undocumented)
abstract shapeType: string;
// (undocumented)
styles: ("align" | "arrowheadEnd" | "arrowheadStart" | "color" | "dash" | "fill" | "font" | "geo" | "icon" | "labelColor" | "opacity" | "size" | "spline")[];
}
// @public (undocumented)
export abstract class TLBoxUtil<Shape extends TLBoxLike> extends TLShapeUtil<Shape> {
// (undocumented)
getBounds(shape: Shape): Box2d;
// (undocumented)
getCenter(shape: Shape): Vec2d;
// (undocumented)
getOutline(shape: Shape): Vec2d[];
// (undocumented)
hitTestLineSegment(shape: Shape, A: VecLike, B: VecLike): boolean;
// (undocumented)
hitTestPoint(shape: Shape, point: VecLike): boolean;
// (undocumented)
onResize: OnResizeHandler<any>;
}
// @public (undocumented)
export type TLCancelEvent = (info: TLCancelEventInfo) => void;
// @public (undocumented)
export type TLCancelEventInfo = {
type: 'misc';
name: 'cancel';
};
// @public (undocumented)
export type TLChange<T extends BaseRecord<any> = any> = HistoryEntry<T>;
// @public (undocumented)
export type TLClickEvent = (info: TLClickEventInfo) => void;
// @public (undocumented)
export type TLClickEventInfo = TLBaseEventInfo & {
type: 'click';
name: TLCLickEventName;
point: VecLike;
pointerId: number;
button: number;
phase: 'down' | 'settle' | 'up';
} & TLPointerEventTarget;
// @public (undocumented)
export type TLCLickEventName = 'double_click' | 'quadruple_click' | 'triple_click';
// @public (undocumented)
export interface TLClipboardModel {
// (undocumented)
assets: TLAsset[];
// (undocumented)
rootShapeIds: TLShapeId[];
// (undocumented)
schema: SerializedSchema;
// (undocumented)
shapes: TLShape[];
}
// @public (undocumented)
export type TLCommand<Name extends string = any, Data = any> = {
type: 'command';
id: string;
data: Data;
name: Name;
preservesRedoStack?: boolean;
};
// @public (undocumented)
export type TLCommandHandler<Data> = {
do: (data: Data) => void;
undo: (data: Data) => void;
redo?: (data: Data) => void;
squash?: (prevData: Data, nextData: Data) => Data;
};
// @public (undocumented)
export type TLCompleteEvent = (info: TLCompleteEventInfo) => void;
// @public (undocumented)
export type TLCompleteEventInfo = {
type: 'misc';
name: 'complete';
};
// @public (undocumented)
export type TLCopyType = 'jpeg' | 'json' | 'png' | 'svg';
// @public (undocumented)
export function TldrawEditor(props: TldrawEditorProps): JSX.Element;
// @public (undocumented)
export class TldrawEditorConfig {
constructor(args: {
shapes?: readonly TLShapeDef<any, any>[];
tools?: readonly StateNodeConstructor[];
allowUnknownShapes?: boolean;
derivePresenceState?: (store: TLStore) => Signal<null | TLInstancePresence>;
});
// (undocumented)
createStore(config: {
initialData?: StoreSnapshot<TLRecord>;
userId: TLUserId;
instanceId: TLInstanceId;
}): TLStore;
// (undocumented)
static readonly default: TldrawEditorConfig;
// (undocumented)
readonly shapes: readonly TLUnknownShapeDef[];
// (undocumented)
readonly storeSchema: StoreSchema<TLRecord, TLStoreProps>;
// (undocumented)
readonly TLShape: RecordType<TLShape, 'index' | 'parentId' | 'props' | 'type'>;
// (undocumented)
readonly tools: readonly StateNodeConstructor[];
}
// @public (undocumented)
export interface TldrawEditorProps {
assetUrls?: EditorAssetUrls;
autoFocus?: boolean;
// (undocumented)
children?: any;
components?: Partial<TLEditorComponents>;
config?: TldrawEditorConfig;
instanceId?: TLInstanceId;
isDarkMode?: boolean;
onCreateAssetFromFile?: (file: File) => Promise<TLAsset>;
onCreateBookmarkFromUrl?: (url: string) => Promise<{
image: string;
title: string;
description: string;
}>;
onMount?: (app: App) => void;
store?: SyncedStore | TLStore;
userId?: TLUserId;
}
// @public (undocumented)
export const TLDrawShapeDef: TLShapeDef<TLDrawShape, TLDrawUtil>;
// @public (undocumented)
export class TLDrawUtil extends TLShapeUtil<TLDrawShape> {
// (undocumented)
defaultProps(): TLDrawShape['props'];
// (undocumented)
expandSelectionOutlinePx(shape: TLDrawShape): number;
// (undocumented)
getBounds(shape: TLDrawShape): Box2d;
// (undocumented)
getCenter(shape: TLDrawShape): Vec2d;
// (undocumented)
getOutline(shape: TLDrawShape): Vec2d[];
// (undocumented)
hideResizeHandles: (shape: TLDrawShape) => boolean;
// (undocumented)
hideRotateHandle: (shape: TLDrawShape) => boolean;
// (undocumented)
hideSelectionBoundsBg: (shape: TLDrawShape) => boolean;
// (undocumented)
hideSelectionBoundsFg: (shape: TLDrawShape) => boolean;
// (undocumented)
hitTestLineSegment(shape: TLDrawShape, A: VecLike, B: VecLike): boolean;
// (undocumented)
hitTestPoint(shape: TLDrawShape, point: VecLike): boolean;
// (undocumented)
indicator(shape: TLDrawShape): JSX.Element;
// (undocumented)
isClosed: (shape: TLDrawShape) => boolean;
// (undocumented)
onResize: OnResizeHandler<TLDrawShape>;
// (undocumented)
render(shape: TLDrawShape): JSX.Element;
// (undocumented)
toSvg(shape: TLDrawShape, _font: string | undefined, colors: TLExportColors): SVGGElement;
// (undocumented)
static type: string;
}
// @public (undocumented)
export type TLEasingType = 'easeInCubic' | 'easeInExpo' | 'easeInOutCubic' | 'easeInOutExpo' | 'easeInOutQuad' | 'easeInOutQuart' | 'easeInOutQuint' | 'easeInOutSine' | 'easeInQuad' | 'easeInQuart' | 'easeInQuint' | 'easeInSine' | 'easeOutCubic' | 'easeOutExpo' | 'easeOutQuad' | 'easeOutQuart' | 'easeOutQuint' | 'easeOutSine' | 'linear';
// @public (undocumented)
export interface TLEditorComponents {
// (undocumented)
Background: null | TLBackgroundComponent;
// (undocumented)
Brush: null | TLBrushComponent;
// (undocumented)
CollaboratorBrush: null | TLBrushComponent;
// (undocumented)
CollaboratorCursor: null | TLCursorComponent;
// (undocumented)
CollaboratorHint: null | TLCollaboratorHintComponent;
// (undocumented)
CollaboratorScribble: null | TLScribbleComponent;
// (undocumented)
CollaboratorShapeIndicator: null | TLShapeIndicatorComponent;
// (undocumented)
Cursor: null | TLCursorComponent;
// (undocumented)
ErrorFallback: null | TLErrorFallback;
// (undocumented)
Grid: null | TLGridComponent;
// (undocumented)
Handle: null | TLHandleComponent;
// (undocumented)
Scribble: null | TLScribbleComponent;
// (undocumented)
ShapeErrorFallback: null | TLShapeErrorFallback;
// (undocumented)
ShapeIndicatorErrorFallback: null | TLShapeIndicatorErrorFallback;
// (undocumented)
SnapLine: null | TLSnapLineComponent;
// (undocumented)
Spinner: null | TLSpinnerComponent;
// (undocumented)
SvgDefs: null | TLSvgDefsComponent;
// (undocumented)
ZoomBrush: null | TLBrushComponent;
}
// @public (undocumented)
export const TLEmbedShapeDef: TLShapeDef<TLEmbedShape, TLEmbedUtil>;
// @public (undocumented)
export class TLEmbedUtil extends TLBoxUtil<TLEmbedShape> {
// (undocumented)
canEdit: TLShapeUtilFlag<TLEmbedShape>;
// (undocumented)
canResize: (shape: TLEmbedShape) => boolean;
// (undocumented)
canUnmount: TLShapeUtilFlag<TLEmbedShape>;
// (undocumented)
defaultProps(): TLEmbedShape['props'];
// (undocumented)
hideSelectionBoundsBg: TLShapeUtilFlag<TLEmbedShape>;
// (undocumented)
hideSelectionBoundsFg: TLShapeUtilFlag<TLEmbedShape>;
// (undocumented)
indicator(shape: TLEmbedShape): JSX.Element;
// (undocumented)
isAspectRatioLocked: TLShapeUtilFlag<TLEmbedShape>;
// (undocumented)
onResize: OnResizeHandler<TLEmbedShape>;
// (undocumented)
render(shape: TLEmbedShape): JSX.Element;
// (undocumented)
static type: string;
}
// @public (undocumented)
export interface TLEventHandlers {
// (undocumented)
onCancel: TLCancelEvent;
// (undocumented)
onComplete: TLCompleteEvent;
// (undocumented)
onDoubleClick: TLClickEvent;
// (undocumented)
onInterrupt: TLInterruptEvent;
// (undocumented)
onKeyDown: TLKeyboardEvent;
// (undocumented)
onKeyRepeat: TLKeyboardEvent;
// (undocumented)
onKeyUp: TLKeyboardEvent;
// (undocumented)
onMiddleClick: TLPointerEvent;
// (undocumented)
onPointerDown: TLPointerEvent;
// (undocumented)
onPointerEnter: TLPointerEvent;
// (undocumented)
onPointerLeave: TLPointerEvent;
// (undocumented)
onPointerMove: TLPointerEvent;
// (undocumented)
onPointerUp: TLPointerEvent;
// (undocumented)
onQuadrupleClick: TLClickEvent;
// (undocumented)
onRightClick: TLPointerEvent;
// (undocumented)
onTripleClick: TLClickEvent;
// (undocumented)
onWheel: TLWheelEvent;
}
// @public (undocumented)
export type TLEventInfo = TLCancelEventInfo | TLClickEventInfo | TLCompleteEventInfo | TLInterruptEventInfo | TLKeyboardEventInfo | TLPinchEventInfo | TLPointerEventInfo | TLWheelEventInfo;
// @public (undocumented)
export interface TLEventMap {
// (undocumented)
'change-history': [{
reason: 'bail';
markId?: string;
} | {
reason: 'push' | 'redo' | 'undo';
}];
// (undocumented)
'mark-history': [{
id: string;
}];
// (undocumented)
'max-shapes': [{
name: string;
pageId: TLPageId;
count: number;
}];
// (undocumented)
'stop-camera-animation': [];
// (undocumented)
'stop-following': [];
// (undocumented)
change: [TLChange<TLRecord>];
// (undocumented)
crash: [{
error: unknown;
}];
// (undocumented)
event: [TLEventInfo];
// (undocumented)
mount: [];
// (undocumented)
tick: [number];
// (undocumented)
update: [];
}
// @public (undocumented)
export type TLEventMapHandler<T extends keyof TLEventMap> = (...args: TLEventMap[T]) => void;
// @public (undocumented)
export type TLEventName = 'cancel' | 'complete' | 'interrupt' | 'wheel' | TLCLickEventName | TLKeyboardEventName | TLPinchEventName | TLPointerEventName;
// @public (undocumented)
export type TLExportType = 'jpeg' | 'json' | 'png' | 'svg' | 'webp';
// @public (undocumented)
export const TLFrameShapeDef: TLShapeDef<TLFrameShape, TLFrameUtil>;
// @public (undocumented)
export class TLFrameUtil extends TLBoxUtil<TLFrameShape> {
// (undocumented)
canBind: () => boolean;
// (undocumented)
canDropShapes: (_shape: TLFrameShape, _shapes: TLShape[]) => boolean;
// (undocumented)
canEdit: () => boolean;
// (undocumented)
canReceiveNewChildrenOfType: (_type: TLShapeType) => boolean;
// (undocumented)
defaultProps(): TLFrameShape['props'];
// (undocumented)
indicator(shape: TLFrameShape): JSX.Element;
// (undocumented)
onDragShapesOut: (_shape: TLFrameShape, shapes: TLShape[]) => void;
// (undocumented)
onDragShapesOver: (frame: TLFrameShape, shapes: TLShape[]) => {
shouldHint: boolean;
};
// (undocumented)
onResizeEnd: OnResizeEndHandler<TLFrameShape>;
// (undocumented)
render(shape: TLFrameShape): JSX.Element;
// (undocumented)
toSvg(shape: TLFrameShape, font: string, colors: TLExportColors): Promise<SVGElement> | SVGElement;
// (undocumented)
static type: string;
}
// @public (undocumented)
export const TLGeoShapeDef: TLShapeDef<TLGeoShape, TLGeoUtil>;
// @public (undocumented)
export class TLGeoUtil extends TLBoxUtil<TLGeoShape> {
// (undocumented)
canEdit: () => boolean;
// (undocumented)
defaultProps(): TLGeoShape['props'];
// (undocumented)
getBounds(shape: TLGeoShape): Box2d;
// (undocumented)
getCenter(shape: TLGeoShape): Vec2d;
// (undocumented)
getOutline(shape: TLGeoShape): Vec2d[];
// (undocumented)
hitTestLineSegment(shape: TLGeoShape, A: VecLike, B: VecLike): boolean;
// (undocumented)
hitTestPoint(shape: TLGeoShape, point: VecLike): boolean;
// (undocumented)
indicator(shape: TLGeoShape): JSX.Element;
// (undocumented)
onBeforeCreate: (shape: TLGeoShape) => {
props: {
growY: number;
geo: "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "diamond" | "ellipse" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box";
labelColor: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow";
color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow";
fill: "none" | "pattern" | "semi" | "solid";
dash: "dashed" | "dotted" | "draw" | "solid";
size: "l" | "m" | "s" | "xl";
opacity: "0.1" | "0.25" | "0.5" | "0.75" | "1";
font: "draw" | "mono" | "sans" | "serif";
align: "end" | "middle" | "start";
url: string;
w: number;
h: number;
text: string;
};
type: "geo";
x: number;
y: number;
rotation: number;
index: string;
parentId: TLParentId;
isLocked: boolean;
id: ID<TLGeoShape>;
typeName: "shape";
} | undefined;
// (undocumented)
onBeforeUpdate: (prev: TLGeoShape, next: TLGeoShape) => {
props: {
growY: number;
geo: "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "diamond" | "ellipse" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box";
labelColor: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow";
color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow";
fill: "none" | "pattern" | "semi" | "solid";
dash: "dashed" | "dotted" | "draw" | "solid";
size: "l" | "m" | "s" | "xl";
opacity: "0.1" | "0.25" | "0.5" | "0.75" | "1";
font: "draw" | "mono" | "sans" | "serif";
align: "end" | "middle" | "start";
url: string;
w: number;
h: number;
text: string;
};
type: "geo";
x: number;
y: number;
rotation: number;
index: string;
parentId: TLParentId;
isLocked: boolean;
id: ID<TLGeoShape>;
typeName: "shape";
} | undefined;
// (undocumented)
onDoubleClick: (shape: TLGeoShape) => {
props: {
geo: "check-box";
};
type: "geo";
x: number;
y: number;
rotation: number;
index: string;
parentId: TLParentId;
isLocked: boolean;
id: ID<TLGeoShape>;
typeName: "shape";
} | {
props: {
geo: "rectangle";
};
type: "geo";
x: number;
y: number;
rotation: number;
index: string;
parentId: TLParentId;
isLocked: boolean;
id: ID<TLGeoShape>;
typeName: "shape";
} | undefined;
// (undocumented)
onEditEnd: OnEditEndHandler<TLGeoShape>;
// (undocumented)
onResize: OnResizeHandler<TLGeoShape>;
// (undocumented)
render(shape: TLGeoShape): JSX.Element;
// (undocumented)
toSvg(shape: TLGeoShape, font: string, colors: TLExportColors): SVGElement;
// (undocumented)
static type: string;
}
// @public (undocumented)
export const TLGroupShapeDef: TLShapeDef<TLGroupShape, TLGroupUtil>;
// @public (undocumented)
export class TLGroupUtil extends TLShapeUtil<TLGroupShape> {
// (undocumented)
canBind: () => boolean;
// (undocumented)
defaultProps(): TLGroupShape['props'];
// (undocumented)
getBounds(shape: TLGroupShape): Box2d;
// (undocumented)
getCenter(shape: TLGroupShape): Vec2dModel;
// (undocumented)
getOutline(shape: TLGroupShape): Vec2dModel[];
// (undocumented)
hideSelectionBoundsBg: () => boolean;
// (undocumented)
hideSelectionBoundsFg: () => boolean;
// (undocumented)
indicator(shape: TLGroupShape): JSX.Element;
// (undocumented)
onChildrenChange: OnChildrenChangeHandler<TLGroupShape>;
// (undocumented)
render(shape: TLGroupShape): JSX.Element | null;
// (undocumented)
static type: string;
}
// @public (undocumented)
export type TLHistoryEntry = TLCommand | TLMark;
// @public (undocumented)
export const TLImageShapeDef: TLShapeDef<TLImageShape, TLImageUtil>;
// @public (undocumented)
export class TLImageUtil extends TLBoxUtil<TLImageShape> {
// (undocumented)
canCrop: () => boolean;
// (undocumented)
defaultProps(): TLImageShape['props'];
// (undocumented)
indicator(shape: TLImageShape): JSX.Element | null;
// (undocumented)
isAspectRatioLocked: () => boolean;
// (undocumented)
onDoubleClick: (shape: TLImageShape) => void;
// (undocumented)
onDoubleClickEdge: OnDoubleClickHandler<TLImageShape>;
// (undocumented)
render(shape: TLImageShape): JSX.Element;
// (undocumented)
toSvg(shape: TLImageShape): Promise<SVGGElement>;
// (undocumented)
static type: string;
}
// @public (undocumented)
export type TLInterruptEvent = (info: TLInterruptEventInfo) => void;
// @public (undocumented)
export type TLInterruptEventInfo = {
type: 'misc';
name: 'interrupt';
};
// @public (undocumented)
export type TLKeyboardEvent = (info: TLKeyboardEventInfo) => void;
// @public (undocumented)
export type TLKeyboardEventInfo = TLBaseEventInfo & {
type: 'keyboard';
name: TLKeyboardEventName;
key: string;
code: string;
};
// @public (undocumented)
export type TLKeyboardEventName = 'key_down' | 'key_repeat' | 'key_up';
// @public (undocumented)
export const TLLineShapeDef: TLShapeDef<TLLineShape, TLLineUtil>;
// @public (undocumented)
export class TLLineUtil extends TLShapeUtil<TLLineShape> {
// (undocumented)
defaultProps(): TLLineShape['props'];
// (undocumented)
getBounds(shape: TLLineShape): Box2d;
// (undocumented)
getCenter(shape: TLLineShape): Vec2d;
// (undocumented)
getHandles(shape: TLLineShape): TLHandle[];
// (undocumented)
getOutline(shape: TLLineShape): Vec2d[];
// (undocumented)
hideResizeHandles: () => boolean;
// (undocumented)
hideRotateHandle: () => boolean;
// (undocumented)
hideSelectionBoundsBg: () => boolean;
// (undocumented)
hideSelectionBoundsFg: () => boolean;
// (undocumented)
hitTestLineSegment(shape: TLLineShape, A: VecLike, B: VecLike): boolean;
// (undocumented)
hitTestPoint(shape: TLLineShape, point: Vec2d): boolean;
// (undocumented)
indicator(shape: TLLineShape): JSX.Element;
// (undocumented)
isClosed: () => boolean;
// (undocumented)
onHandleChange: OnHandleChangeHandler<TLLineShape>;
// (undocumented)
onResize: OnResizeHandler<TLLineShape>;
// (undocumented)
render(shape: TLLineShape): JSX.Element | undefined;
// (undocumented)
toSvg(shape: TLLineShape, _font: string, colors: TLExportColors): SVGGElement;
// (undocumented)
static type: string;
}
// @public (undocumented)
export type TLMark = {
type: 'STOP';
id: string;
onUndo: boolean;
onRedo: boolean;
};
// @public (undocumented)
export const TLNoteShapeDef: TLShapeDef<TLNoteShape, TLNoteUtil>;
// @public (undocumented)
export class TLNoteUtil extends TLShapeUtil<TLNoteShape> {
// (undocumented)
canEdit: () => boolean;
// (undocumented)
defaultProps(): TLNoteShape['props'];
// (undocumented)
getBounds(shape: TLNoteShape): Box2d;
// (undocumented)
getCenter(_shape: TLNoteShape): Vec2d;
// (undocumented)
getHeight(shape: TLNoteShape): number;
// (undocumented)
getOutline(shape: TLNoteShape): Vec2d[];
// (undocumented)
hideResizeHandles: () => boolean;
// (undocumented)
hideSelectionBoundsBg: () => boolean;
// (undocumented)
hideSelectionBoundsFg: () => boolean;
// (undocumented)
indicator(shape: TLNoteShape): JSX.Element;
// (undocumented)
onBeforeCreate: (next: TLNoteShape) => {
props: {
growY: number;
color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow";
size: "l" | "m" | "s" | "xl";
font: "draw" | "mono" | "sans" | "serif";
align: "end" | "middle" | "start";
opacity: "0.1" | "0.25" | "0.5" | "0.75" | "1";
url: string;
text: string;
};
type: "note";
x: number;
y: number;
rotation: number;
index: string;
parentId: TLParentId;
isLocked: boolean;
id: ID<TLNoteShape>;
typeName: "shape";
} | undefined;
// (undocumented)
onBeforeUpdate: (prev: TLNoteShape, next: TLNoteShape) => {
props: {
growY: number;
color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow";
size: "l" | "m" | "s" | "xl";
font: "draw" | "mono" | "sans" | "serif";
align: "end" | "middle" | "start";
opacity: "0.1" | "0.25" | "0.5" | "0.75" | "1";
url: string;
text: string;
};
type: "note";
x: number;
y: number;
rotation: number;
index: string;
parentId: TLParentId;
isLocked: boolean;
id: ID<TLNoteShape>;
typeName: "shape";
} | undefined;
// (undocumented)
onEditEnd: OnEditEndHandler<TLNoteShape>;
// (undocumented)
render(shape: TLNoteShape): JSX.Element;
// (undocumented)
toSvg(shape: TLNoteShape, font: string, colors: TLExportColors): SVGGElement;
// (undocumented)
static type: string;
}
// @public (undocumented)
export type TLPinchEvent = (info: TLPinchEventInfo) => void;
// @public (undocumented)
export type TLPinchEventInfo = TLBaseEventInfo & {
type: 'pinch';
name: TLPinchEventName;
point: Vec2dModel;
delta: Vec2dModel;
};
// @public (undocumented)
export type TLPinchEventName = 'pinch_end' | 'pinch_start' | 'pinch';
// @public (undocumented)
export type TLPointerEvent = (info: TLPointerEventInfo) => void;
// @public (undocumented)
export type TLPointerEventInfo = TLBaseEventInfo & {
type: 'pointer';
name: TLPointerEventName;
point: VecLike;
pointerId: number;
button: number;
isPen: boolean;
} & TLPointerEventTarget;
// @public (undocumented)
export type TLPointerEventName = 'middle_click' | 'pointer_down' | 'pointer_enter' | 'pointer_leave' | 'pointer_move' | 'pointer_up' | 'right_click';
// @public (undocumented)
export type TLPointerEventTarget = {
target: 'canvas';
shape?: undefined;
} | {
target: 'handle';
shape: TLShape;
handle: TLHandle;
} | {
target: 'selection';
handle?: TLSelectionHandle;
shape?: undefined;
} | {
target: 'shape';
shape: TLShape;
};
// @public (undocumented)
export type TLResizeHandle = SelectionCorner | SelectionEdge;
// @public
export type TLResizeInfo<T extends TLShape> = {
newPoint: Vec2dModel;
handle: TLResizeHandle;
mode: TLResizeMode;
scaleX: number;
scaleY: number;
initialBounds: Box2d;
initialShape: T;
};
// @public
export type TLResizeMode = 'resize_bounds' | 'scale_shape';
// @public (undocumented)
export type TLSelectionHandle = RotateCorner | SelectionCorner | SelectionEdge;
// @public (undocumented)
export interface TLShapeDef<ShapeType extends TLUnknownShape, ShapeUtil extends TLShapeUtil<ShapeType> = TLShapeUtil<ShapeType>> {
// (undocumented)
readonly createShapeUtils: (app: App) => ShapeUtil;
// (undocumented)
readonly is: (shape: TLUnknownShape) => shape is ShapeType;
// (undocumented)
readonly migrations: Migrations;
// (undocumented)
readonly type: ShapeType['type'];
// (undocumented)
readonly validator?: StoreValidator<ShapeType>;
}
// @public (undocumented)
export abstract class TLShapeUtil<T extends TLUnknownShape> {
constructor(app: App, type: T['type']);
// (undocumented)
app: App;
bounds(shape: T): Box2d;
canBind: <K>(_shape: T, _otherShape?: K | undefined) => boolean;
canCrop: TLShapeUtilFlag<T>;
canDropShapes(shape: T, shapes: TLShape[]): boolean;
canEdit: TLShapeUtilFlag<T>;
canReceiveNewChildrenOfType(type: TLShapeType): boolean;
canResize: TLShapeUtilFlag<T>;
canScroll: TLShapeUtilFlag<T>;
canUnmount: TLShapeUtilFlag<T>;
center(shape: T): Vec2dModel;
abstract defaultProps(): T['props'];
// @internal (undocumented)
expandSelectionOutlinePx(shape: T): number;
protected abstract getBounds(shape: T): Box2d;
abstract getCenter(shape: T): Vec2dModel;
getEditingBounds: (shape: T) => Box2d;
protected getHandles?(shape: T): TLHandle[];
protected abstract getOutline(shape: T): Vec2dModel[];
handles(shape: T): TLHandle[];
hideResizeHandles: TLShapeUtilFlag<T>;
hideRotateHandle: TLShapeUtilFlag<T>;
hideSelectionBoundsBg: TLShapeUtilFlag<T>;
hideSelectionBoundsFg: TLShapeUtilFlag<T>;
hitTestLineSegment(shape: T, A: VecLike, B: VecLike): boolean;
hitTestPoint(shape: T, point: VecLike): boolean;
abstract indicator(shape: T): any;
is(shape: TLBaseShape<string, object>): shape is T;
isAspectRatioLocked: TLShapeUtilFlag<T>;
isClosed: TLShapeUtilFlag<T>;
onBeforeCreate?: OnBeforeCreateHandler<T>;
onBeforeUpdate?: OnBeforeUpdateHandler<T>;
// @internal
onBindingChange?: OnBindingChangeHandler<T>;
onChildrenChange?: OnChildrenChangeHandler<T>;
onClick?: OnClickHandler<T>;
onDoubleClick?: OnDoubleClickHandler<T>;
onDoubleClickEdge?: OnDoubleClickHandler<T>;
onDoubleClickHandle?: OnDoubleClickHandleHandler<T>;
onDragShapesOut?: OnDragHandler<T>;
onDragShapesOver?: OnDragHandler<T, {
shouldHint: boolean;
}>;
onDropShapesOver?: OnDragHandler<T>;
onEditEnd?: OnEditEndHandler<T>;
onHandleChange?: OnHandleChangeHandler<T>;
onResize?: OnResizeHandler<T>;
onResizeEnd?: OnResizeEndHandler<T>;
onResizeStart?: OnResizeStartHandler<T>;
onRotate?: OnRotateHandler<T>;
onRotateEnd?: OnRotateEndHandler<T>;
onRotateStart?: OnRotateStartHandler<T>;
onTranslate?: OnTranslateHandler<T>;
onTranslateEnd?: OnTranslateEndHandler<T>;
onTranslateStart?: OnTranslateStartHandler<T>;
outline(shape: T): Vec2dModel[];
point(shape: T): Vec2dModel;
abstract render(shape: T): any;
snapPoints(shape: T): Vec2d[];
toSvg?(shape: T, font: string | undefined, colors: TLExportColors): Promise<SVGElement> | SVGElement;
transform(shape: T): Matrix2d;
// (undocumented)
readonly type: T['type'];
}
// @public (undocumented)
export interface TLShapeUtilConstructor<T extends TLUnknownShape, ShapeUtil extends TLShapeUtil<T> = TLShapeUtil<T>> {
// (undocumented)
new (app: App, type: T['type']): ShapeUtil;
}
// @public (undocumented)
export type TLShapeUtilFlag<T> = (shape: T) => boolean;
// @public (undocumented)
export const TLTextShapeDef: TLShapeDef<TLTextShape, TLTextUtil>;
// @public (undocumented)
export class TLTextUtil extends TLShapeUtil<TLTextShape> {
// (undocumented)
canEdit: () => boolean;
// (undocumented)
defaultProps(): TLTextShape['props'];
// (undocumented)
getBounds(shape: TLTextShape): Box2d;
// (undocumented)
getCenter(shape: TLTextShape): Vec2d;
// (undocumented)
getMinDimensions(shape: TLTextShape): {
height: number;
width: number;
};
// (undocumented)
getOutline(shape: TLTextShape): Vec2d[];
// (undocumented)
indicator(shape: TLTextShape): JSX.Element;
// (undocumented)
isAspectRatioLocked: TLShapeUtilFlag<TLTextShape>;
// (undocumented)
onBeforeCreate: (shape: TLTextShape) => {
x: number;
y: number;
type: "text";
rotation: number;
index: string;
parentId: TLParentId;
isLocked: boolean;
props: TLTextShapeProps;
id: ID<TLTextShape>;
typeName: "shape";
} | undefined;
// (undocumented)
onBeforeUpdate: (prev: TLTextShape, next: TLTextShape) => {
x: number;
y: number;
props: {
w: number;
color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow";
size: "l" | "m" | "s" | "xl";
font: "draw" | "mono" | "sans" | "serif";
align: "end" | "middle" | "start";
opacity: "0.1" | "0.25" | "0.5" | "0.75" | "1";
text: string;
scale: number;
autoSize: boolean;
};
type: "text";
rotation: number;
index: string;
parentId: TLParentId;
isLocked: boolean;
id: ID<TLTextShape>;
typeName: "shape";
} | undefined;
// (undocumented)
onDoubleClickEdge: (shape: TLTextShape) => {
id: ID<TLTextShape>;
type: "text";
props: {
autoSize: boolean;
scale?: undefined;
};
} | {
id: ID<TLTextShape>;
type: "text";
props: {
scale: number;
autoSize?: undefined;
};
} | undefined;
// (undocumented)
onEditEnd: OnEditEndHandler<TLTextShape>;
// (undocumented)
onResize: OnResizeHandler<TLTextShape>;
// (undocumented)
render(shape: TLTextShape): JSX.Element;
// (undocumented)
toSvg(shape: TLTextShape, font: string | undefined, colors: TLExportColors): SVGGElement;
// (undocumented)
static type: string;
}
// @public (undocumented)
export type TLTickEvent = (elapsed: number) => void;
// @public (undocumented)
export type TLUnknownShapeDef = TLShapeDef<TLUnknownShape, TLShapeUtil<TLUnknownShape>>;
// @public (undocumented)
export const TLVideoShapeDef: TLShapeDef<TLVideoShape, TLVideoUtil>;
// @public (undocumented)
export class TLVideoUtil extends TLBoxUtil<TLVideoShape> {
// (undocumented)
canEdit: () => boolean;
// (undocumented)
defaultProps(): TLVideoShape['props'];
// (undocumented)
indicator(shape: TLVideoShape): JSX.Element;
// (undocumented)
isAspectRatioLocked: () => boolean;
// (undocumented)
render(shape: TLVideoShape): JSX.Element;
// (undocumented)
toSvg(shape: TLVideoShape): SVGGElement;
// (undocumented)
static type: string;
}
// @public (undocumented)
export type TLWheelEvent = (info: TLWheelEventInfo) => void;
// @public (undocumented)
export type TLWheelEventInfo = TLBaseEventInfo & {
type: 'wheel';
name: 'wheel';
delta: Vec2dModel;
};
// @public (undocumented)
export const truncateStringWithEllipsis: (str: string, maxLength: number) => string;
// @public (undocumented)
export type UiEnterHandler = (info: any, from: string) => void;
// @public (undocumented)
export type UiEvent = TLCancelEvent | TLClickEvent | TLCompleteEvent | TLKeyboardEvent | TLPinchEvent | TLPointerEvent;
// @public (undocumented)
export type UiEventType = 'click' | 'keyboard' | 'pinch' | 'pointer' | 'wheel' | 'zoom';
// @public (undocumented)
export type UiExitHandler = (info: any, to: string) => void;
// @public
export function uniqueId(): string;
// @public (undocumented)
export const useApp: () => App;
// @public (undocumented)
export function useContainer(): HTMLDivElement;
// @internal (undocumented)
export function usePeerIds(): TLUserId[];
// @public (undocumented)
export function usePrefersReducedMotion(): boolean;
// @internal (undocumented)
export function usePresence(userId: TLUserId): null | TLInstancePresence;
// @public (undocumented)
export function useQuickReactor(name: string, reactFn: () => void, deps?: any[]): void;
// @public (undocumented)
export function useReactor(name: string, reactFn: () => void, deps?: any[] | undefined): void;
// @internal (undocumented)
export const WAY_TOO_BIG_ARROW_BEND_FACTOR = 10;
// @public (undocumented)
export class WeakMapCache<T extends object, K> {
// (undocumented)
access(item: T): K | undefined;
// (undocumented)
bust(): void;
// (undocumented)
get<P extends T>(item: P, cb: (item: P) => K): NonNullable<K>;
// (undocumented)
has(item: T): boolean;
// (undocumented)
invalidate(item: T): void;
// (undocumented)
items: WeakMap<T, K>;
// (undocumented)
set(item: T, value: K): void;
}
// @internal (undocumented)
export const ZOOMS: number[];
export * from "@tldraw/tlschema";
// (No @packageDocumentation comment for this package)