## API Report File for "@tldraw/editor" > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). ```ts /// import { Atom } from 'signia'; 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 { getIndexAbove } from '@tldraw/indices'; import { getIndexBelow } from '@tldraw/indices'; import { getIndexBetween } from '@tldraw/indices'; import { getIndices } from '@tldraw/indices'; import { getIndicesAbove } from '@tldraw/indices'; import { getIndicesBelow } from '@tldraw/indices'; import { getIndicesBetween } from '@tldraw/indices'; import { HistoryEntry } 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 { default as React_2 } from 'react'; import * as React_3 from 'react'; 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 { sortByIndex } from '@tldraw/indices'; import { StoreSnapshot } 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 { 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 { TLHighlightShape } 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 { TLSizeStyle } from '@tldraw/tlschema'; import { TLSizeType } from '@tldraw/tlschema'; import { TLStore } 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 { TLUserDocument } from '@tldraw/tlschema'; import { TLVideoAsset } from '@tldraw/tlschema'; import { TLVideoShape } from '@tldraw/tlschema'; import { UnknownRecord } from '@tldraw/tlstore'; 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 { constructor({ store, user, tools, shapes, 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; // (undocumented) get animationSpeed(): number; // @internal (undocumented) annotateError(error: unknown, { origin, willCrashApp, tags, extras, }: { origin: string; willCrashApp: boolean; tags?: Record; extras?: Record; }): 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; // @internal (undocumented) capturedPointerId: null | number; centerOnPoint(x: number, y: number, opts?: AnimationOptions): this; // @internal protected _clickManager: ClickManager; complete(): this; // @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; }; }; 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; get cullingBoundsExpanded(): Box2d; // @internal (undocumented) readonly _cullingBoundsExpanded: Atom; 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; // (undocumented) enableAnimations: boolean; get erasingIds(): TLShapeId[]; get erasingIdsSet(): Set; 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: TLShape['type']): TLPageId | TLShapeId; getParentPageId(shape?: TLShape): TLPageId | undefined; getParentShape(shape?: TLShape): TLShape | undefined; getParentsMappedToChildren(ids: TLShapeId[]): Map>; getParentTransform(shape: TLShape): Matrix2d; getPointInParentSpace(shapeId: TLShapeId, point: VecLike): Vec2d; getPointInShapeSpace(shape: TLShape, point: VecLike): Vec2d; // (undocumented) getShapeAndDescendantIds(ids: TLShapeId[]): Set; getShapeById(id: TLParentId): T | undefined; getShapeIdsInPage(pageId: TLPageId): Set; getShapesAtPoint(point: VecLike): TLShape[]; getShapeUtil; type: string; }>(util: C): InstanceType; getShapeUtil(shape: S | TLShapePartial): TLShapeUtil; 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['preserveAspectRatio']; }>): Promise; 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; // (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; buttons: Set; 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; isShapeOfType(shape: TLUnknownShape, util: { new (...args: any): TLShapeUtil; type: string; }): shape is T; isShapeOrAncestorLocked(shape?: TLShape): boolean; // (undocumented) get isSnapMode(): boolean; // (undocumented) get isToolLocked(): boolean; isWithinSelection(id: TLShapeId): boolean; get locale(): string; 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; onCreateBookmarkFromUrl(url: string): Promise<{ image: string; title: string; description: string; }>; get onlySelectedShape(): null | TLShape; 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 (undocumented) get projectName(): string; // @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; backgroundIndex: number; opacity: number; isCulled: boolean; isInViewport: boolean; maskedPageBounds: Box2d | undefined; }[]; 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; get selectedPageBounds(): Box2d | null; get selectedShapes(): TLShape[]; // (undocumented) get selectionBounds(): Box2d | undefined; // (undocumented) get selectionPageCenter(): null | Vec2d; get selectionRotation(): number; selectNone(): this; sendBackward(ids?: TLShapeId[]): this; sendToBack(ids?: TLShapeId[]): this; // (undocumented) setAnimationSpeed(animationSpeed: number): 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): 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, ephemeral?: boolean): void; setLocale(locale: string): void; // (undocumented) setPenMode(isPenMode: boolean): this; // @internal (undocumented) setProjectName(name: string): void; 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; get shapesArray(): TLShape[]; shapeUtils: { readonly [K in string]?: TLShapeUtil; }; // (undocumented) slideCamera(opts?: { speed: number; direction: Vec2d; friction: number; speedThreshold?: number | undefined; }): this | undefined; readonly snaps: SnapManager; get sortedShapesArray(): TLShape[]; stackShapes(operation: 'horizontal' | 'vertical', ids?: TLShapeId[], gap?: number): this; startFollowingUser: (userId: string) => this | undefined; stopCameraAnimation(): this; stopFollowingUser: () => this; readonly store: TLStore; stretchShapes(operation: 'horizontal' | 'vertical', ids?: TLShapeId[]): this; static styles: TLStyleCollections; textMeasure: TextManager; // (undocumented) toggleLock(ids?: TLShapeId[]): this; undo(): HistoryManager; // (undocumented) ungroupShapes(ids?: TLShapeId[]): this; updateAssets(assets: TLAssetPartial[]): this; // @internal updateCullingBounds(): this; // @internal (undocumented) updateDocumentSettings(settings: Partial): void; updateInstanceState(partial: Partial>, ephemeral?: boolean, squashing?: boolean): this; updatePage(partial: RequiredKeys, squashing?: boolean): this; updateShapes(partials: (null | TLShapePartial | undefined)[], squashing?: boolean): this; updateUserDocumentSettings(partial: Partial, ephemeral?: boolean): this; updateViewportScreenBounds(center?: boolean): this; // @internal (undocumented) readonly user: UserPreferencesManager; // (undocumented) get userDocumentSettings(): TLUserDocument; 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 { getContainer: () => HTMLElement; shapes?: Record; store: TLStore; tools?: StateNodeConstructor[]; user?: TLUser; } // @public (undocumented) export const ARROW_LABEL_FONT_SIZES: Record; // @public (undocumented) export function blobAsString(blob: Blob): Promise; // @internal (undocumented) export const BOUND_ARROW_OFFSET = 10; // @internal (undocumented) export function buildFromV1Document(app: App, document: LegacyTldrawDocument): void; // @public (undocumented) export const Canvas: React_3.MemoExoticComponent<({ onDropOverride, }: { onDropOverride?: ((defaultOnDrop: (e: React_3.DragEvent) => Promise) => (e: React_3.DragEvent) => Promise) | 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; // @public export function createBookmarkShapeAtPoint(app: App, url: string, point: Vec2dModel): Promise; // @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; // @public export function createTLStore(opts?: StoreOptions): TLStore; // @public (undocumented) export function dataTransferItemAsString(item: DataTransferItem): Promise; // @public (undocumented) export function dataUrlToFile(url: string, filename: string, mimeType: string): Promise; // @internal (undocumented) export type DebugFlag = DebugFlagDef & Atom; // @internal (undocumented) export const debugFlags: { preventDefaultLogging: DebugFlag; pointerCaptureLogging: DebugFlag; pointerCaptureTracking: DebugFlag; pointerCaptureTrackingObject: DebugFlag>; elementRemovalLogging: DebugFlag; debugSvg: DebugFlag; throwToBlob: DebugFlag; logMessages: DebugFlag; resetConnectionEveryPing: DebugFlag; debugCursors: DebugFlag; forceSrgb: DebugFlag; }; // @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 const defaultShapes: Record; // @public (undocumented) export const defaultTools: StateNodeConstructor[]; // @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_3.Component>, ErrorBoundaryState> { // (undocumented) componentDidCatch(error: unknown): void; // (undocumented) static getDerivedStateFromError(error: Error): { error: Error; }; // (undocumented) render(): React_3.ReactNode; // (undocumented) state: ErrorBoundaryState; } // @public (undocumented) export interface ErrorBoundaryProps { // (undocumented) children: React_3.ReactNode; // (undocumented) fallback: (error: unknown) => React_3.ReactNode; // (undocumented) onError?: ((error: unknown) => void) | null; } // @public (undocumented) export function ErrorScreen({ children }: { children: any; }): JSX.Element; // @public (undocumented) export const EVENT_NAME_MAP: Record, keyof TLEventHandlers>; // @internal (undocumented) export const featureFlags: { peopleMenu: DebugFlag; highlighterTool: DebugFlag; }; // @public export function fileToBase64(file: Blob): Promise; // @public (undocumented) export const FONT_ALIGNMENT: Record; // @public (undocumented) export const FONT_FAMILIES: Record; // @public (undocumented) export const FONT_SIZES: Record; // @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; export { getIndexAbove } export { getIndexBelow } export { getIndexBetween } export { getIndices } export { getIndicesAbove } export { getIndicesBelow } export { getIndicesBetween } // @public export function getMediaAssetFromFile(file: File): Promise; // @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; // @internal (undocumented) export function getRotationSnapshot({ app }: { app: App; }): { selectionPageCenter: Vec2d; initialCursorAngle: number; initialSelectionRotation: number; shapeSnapshots: { shape: TLShape; initialPagePoint: Vec2d; }[]; }; // @public (undocumented) export function getSplineForLineShape(shape: TLLineShape): NonNullable; // @public (undocumented) export function getSvgAsDataUrl(svg: SVGElement): Promise; // @public (undocumented) export function getSvgAsDataUrlSync(node: SVGElement): string; // @public (undocumented) export function getSvgAsImage(svg: SVGElement, options: { type: TLCopyType | TLExportType; quality: number; scale: number; }): Promise; // @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 function getUserPreferences(): TLUserPreferences; // @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 export function hardReset({ shouldReload }?: { shouldReload?: boolean | undefined; }): Promise; // @public (undocumented) export function hardResetApp(): void; // @internal (undocumented) export const HASH_PATERN_ZOOM_NAMES: Record; // @public (undocumented) export function HTMLContainer({ children, className, ...rest }: HTMLContainerProps): JSX.Element; // @public (undocumented) export type HTMLContainerProps = React_3.HTMLAttributes; // @public (undocumented) export const ICON_SIZES: Record; // @public (undocumented) export const INDENT = " "; // @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; // @internal (undocumented) export interface LegacyTldrawDocument { // (undocumented) assets: TDAssets; // (undocumented) id: string; // (undocumented) name: string; // (undocumented) pages: Record; // (undocumented) pageStates: Record; // (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 | WheelEvent): { x: number; y: number; z: number; }; // @public (undocumented) export type OnBeforeCreateHandler = (next: T) => T | void; // @public (undocumented) export type OnBeforeUpdateHandler = (prev: T, next: T) => T | void; // @internal (undocumented) export type OnBindingChangeHandler = (shape: T) => TLShapePartial | void; // @public (undocumented) export type OnChildrenChangeHandler = (shape: T) => TLShapePartial[] | void; // @public (undocumented) export type OnClickHandler = (shape: T) => TLShapePartial | void; // @public (undocumented) export type OnDoubleClickHandleHandler = (shape: T, handle: TLHandle) => TLShapePartial | void; // @public (undocumented) export type OnDoubleClickHandler = (shape: T) => TLShapePartial | void; // @public (undocumented) export type OnDragHandler = (shape: T, shapes: TLShape[]) => R; // @public (undocumented) export type OnEditEndHandler = (shape: T) => void; // @public (undocumented) export type OnHandleChangeHandler = (shape: T, info: { handle: TLHandle; isPrecise: boolean; }) => TLShapePartial | void; // @public (undocumented) export type OnResizeEndHandler = EventChangeHandler; // @public (undocumented) export type OnResizeHandler = (shape: T, info: TLResizeInfo) => Partial> | undefined | void; // @public (undocumented) export type OnResizeStartHandler = EventStartHandler; // @public (undocumented) export type OnRotateEndHandler = EventChangeHandler; // @public (undocumented) export type OnRotateHandler = EventChangeHandler; // @public (undocumented) export type OnRotateStartHandler = EventStartHandler; // @public (undocumented) export type OnTranslateEndHandler = EventChangeHandler; // @public (undocumented) export type OnTranslateHandler = EventChangeHandler; // @public (undocumented) export type OnTranslateStartHandler = EventStartHandler; // @public (undocumented) export function openWindow(url: string, target?: string): void; // @internal (undocumented) export function OptionalErrorBoundary({ children, fallback, ...props }: Omit & { fallback: ((error: unknown) => React_3.ReactNode) | null; }): JSX.Element; // @public export function preventDefault(event: Event | React_2.BaseSyntheticEvent): void; // @public (undocumented) export function refreshPage(): void; // @public (undocumented) export function releasePointerCapture(element: Element, event: PointerEvent | React_2.PointerEvent): void; // @internal (undocumented) export const REMOVE_SYMBOL: unique symbol; // @public (undocumented) export type RequiredKeys = Pick & Partial; // @internal (undocumented) export const RICH_TYPES: Record; // @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; // @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_2.PointerEvent): void; // @public (undocumented) export function setPropsForNextShape(previousProps: TLInstancePropsForNextShape, newProps: Partial): TLInstancePropsForNextShape; // @public (undocumented) export function setRuntimeOverrides(input: Partial): void; // @public (undocumented) export function setUserPreferences(user: TLUserPreferences): void; // @public (undocumented) export function snapToGrid(n: number, gridSize: number): number; export { sortByIndex } // @public (undocumented) export abstract class StateNode implements Partial { constructor(app: App, parent?: StateNode); // (undocumented) app: App; // (undocumented) static children?: () => StateNodeConstructor[]; // (undocumented) children?: Record; // (undocumented) current: Atom; // (undocumented) enter(info: any, from: string): void; // (undocumented) exit(info: any, from: string): void; // (undocumented) handleEvent(info: Exclude): 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; // (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 type StoreWithStatus = { readonly status: 'error'; readonly store?: undefined; readonly error: Error; } | { readonly status: 'loading'; readonly store?: undefined; readonly error?: undefined; } | { readonly status: 'not-synced'; readonly store: TLStore; readonly error?: undefined; } | { readonly status: 'synced-local'; readonly store: TLStore; readonly error?: undefined; } | { readonly status: 'synced-remote'; readonly connectionStatus: 'offline' | 'online'; readonly store: TLStore; readonly error?: undefined; }; // @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_3.HTMLAttributes; // @public (undocumented) export const TAB_ID: TLInstanceId; // @public (undocumented) export const TEXT_PROPS: { lineHeight: number; fontWeight: string; fontVariant: string; fontStyle: string; padding: string; maxWidth: string; }; // @public (undocumented) export class TLArrowUtil extends TLShapeUtil { // (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; // (undocumented) hideRotateHandle: TLShapeUtilFlag; // (undocumented) hideSelectionBoundsBg: TLShapeUtilFlag; // (undocumented) hideSelectionBoundsFg: TLShapeUtilFlag; // (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; // (undocumented) onDoubleClickHandle: (shape: TLArrowShape, handle: TLHandle) => TLShapePartial | void; // (undocumented) onEditEnd: OnEditEndHandler; // (undocumented) onHandleChange: OnHandleChangeHandler; // (undocumented) onResize: OnResizeHandler; // (undocumented) onTranslateStart: OnTranslateStartHandler; // (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 class TLBookmarkUtil extends TLBoxUtil { // (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; // (undocumented) onBeforeUpdate?: OnBeforeUpdateHandler; // (undocumented) render(shape: TLBookmarkShape): JSX.Element; // (undocumented) static type: string; // (undocumented) protected updateBookmarkAsset: { (shape: TLBookmarkShape): Promise; cancel(): void; }; } // @public (undocumented) export type TLBoxLike = TLBaseShape; // @public (undocumented) export abstract class TLBoxTool extends StateNode { // (undocumented) static children: () => (typeof Idle_4 | typeof Pointing_2)[]; // (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" | "verticalAlign")[]; } // @public (undocumented) export abstract class TLBoxUtil extends TLShapeUtil { // (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; } // @public (undocumented) export type TLCancelEvent = (info: TLCancelEventInfo) => void; // @public (undocumented) export type TLCancelEventInfo = { type: 'misc'; name: 'cancel'; }; // @public (undocumented) export type TLChange = HistoryEntry; // @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 = { type: 'command'; id: string; data: Data; name: Name; preservesRedoStack?: boolean; }; // @public (undocumented) export type TLCommandHandler = { 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 const TldrawEditor: React_2.NamedExoticComponent; // @public (undocumented) export type TldrawEditorProps = { children?: any; shapes?: Record; tools?: StateNodeConstructor[]; assetUrls?: EditorAssetUrls; autoFocus?: boolean; components?: Partial; onMount?: (app: App) => void; onCreateAssetFromFile?: (file: File) => Promise; onCreateBookmarkFromUrl?: (url: string) => Promise<{ image: string; title: string; description: string; }>; } & ({ store: StoreWithStatus | TLStore; } | { store?: undefined; initialData?: StoreSnapshot; instanceId?: TLInstanceId; persistenceKey?: string; defaultName?: string; }); // @public (undocumented) export class TLDrawUtil extends TLShapeUtil { // (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; // (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 class TLEmbedUtil extends TLBoxUtil { // (undocumented) canEdit: TLShapeUtilFlag; // (undocumented) canResize: (shape: TLEmbedShape) => boolean; // (undocumented) canUnmount: TLShapeUtilFlag; // (undocumented) defaultProps(): TLEmbedShape['props']; // (undocumented) hideSelectionBoundsBg: TLShapeUtilFlag; // (undocumented) hideSelectionBoundsFg: TLShapeUtilFlag; // (undocumented) indicator(shape: TLEmbedShape): JSX.Element; // (undocumented) isAspectRatioLocked: TLShapeUtilFlag; // (undocumented) onResize: OnResizeHandler; // (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]; // (undocumented) crash: [{ error: unknown; }]; // (undocumented) event: [TLEventInfo]; // (undocumented) frame: [number]; // (undocumented) mount: []; // (undocumented) tick: [number]; // (undocumented) update: []; } // @public (undocumented) export type TLEventMapHandler = (...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 class TLFrameUtil extends TLBoxUtil { // (undocumented) canBind: () => boolean; // (undocumented) canDropShapes: (shape: TLFrameShape, _shapes: TLShape[]) => boolean; // (undocumented) canEdit: () => boolean; // (undocumented) canReceiveNewChildrenOfType: (shape: TLShape, _type: TLShape['type']) => 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; // (undocumented) providesBackgroundForChildren(): boolean; // (undocumented) render(shape: TLFrameShape): JSX.Element; // (undocumented) toSvg(shape: TLFrameShape, font: string, colors: TLExportColors): Promise | SVGElement; // (undocumented) static type: string; } // @public (undocumented) export class TLGeoUtil extends TLBoxUtil { // (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"; verticalAlign: "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: TLShapeId; 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"; verticalAlign: "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: TLShapeId; 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: TLShapeId; typeName: "shape"; } | { props: { geo: "rectangle"; }; type: "geo"; x: number; y: number; rotation: number; index: string; parentId: TLParentId; isLocked: boolean; id: TLShapeId; typeName: "shape"; } | undefined; // (undocumented) onEditEnd: OnEditEndHandler; // (undocumented) onResize: OnResizeHandler; // (undocumented) render(shape: TLGeoShape): JSX.Element; // (undocumented) toSvg(shape: TLGeoShape, font: string, colors: TLExportColors): SVGElement; // (undocumented) static type: string; } // @public (undocumented) export class TLGroupUtil extends TLShapeUtil { // (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; // (undocumented) render(shape: TLGroupShape): JSX.Element | null; // (undocumented) static type: string; // (undocumented) type: "group"; } // @public (undocumented) export class TLHighlightUtil extends TLShapeUtil { // (undocumented) defaultProps(): TLHighlightShape['props']; // (undocumented) expandSelectionOutlinePx(shape: TLHighlightShape): number; // (undocumented) getBounds(shape: TLHighlightShape): Box2d; // (undocumented) getCenter(shape: TLHighlightShape): Vec2d; // (undocumented) getOutline(shape: TLHighlightShape): Vec2d[]; // (undocumented) hideResizeHandles: (shape: TLHighlightShape) => boolean; // (undocumented) hideRotateHandle: (shape: TLHighlightShape) => boolean; // (undocumented) hideSelectionBoundsBg: (shape: TLHighlightShape) => boolean; // (undocumented) hideSelectionBoundsFg: (shape: TLHighlightShape) => boolean; // (undocumented) hitTestLineSegment(shape: TLHighlightShape, A: VecLike, B: VecLike): boolean; // (undocumented) hitTestPoint(shape: TLHighlightShape, point: VecLike): boolean; // (undocumented) indicator(shape: TLHighlightShape): JSX.Element; // (undocumented) onResize: OnResizeHandler; // (undocumented) render(shape: TLHighlightShape): JSX.Element; // (undocumented) renderBackground(shape: TLHighlightShape): JSX.Element; // (undocumented) toBackgroundSvg(shape: TLHighlightShape, font: string | undefined, colors: TLExportColors): SVGPathElement; // (undocumented) toSvg(shape: TLHighlightShape, _font: string | undefined, colors: TLExportColors): SVGPathElement; // (undocumented) static type: string; } // @public (undocumented) export type TLHistoryEntry = TLCommand | TLMark; // @public (undocumented) export class TLImageUtil extends TLBoxUtil { // (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; // (undocumented) render(shape: TLImageShape): JSX.Element; // (undocumented) toSvg(shape: TLImageShape): Promise; // (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 class TLLineUtil extends TLShapeUtil { // (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; // (undocumented) onResize: OnResizeHandler; // (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 class TLNoteUtil extends TLShapeUtil { // (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: TLShapeId; 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: TLShapeId; typeName: "shape"; } | undefined; // (undocumented) onEditEnd: OnEditEndHandler; // (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 = { 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 abstract class TLShapeUtil { constructor(app: App, type: T['type']); // (undocumented) app: App; bounds(shape: T): Box2d; canBind: (_shape: T, _otherShape?: K | undefined) => boolean; canCrop: TLShapeUtilFlag; canDropShapes(shape: T, shapes: TLShape[]): boolean; canEdit: TLShapeUtilFlag; canReceiveNewChildrenOfType(shape: T, type: TLShape['type']): boolean; canResize: TLShapeUtilFlag; canScroll: TLShapeUtilFlag; canUnmount: TLShapeUtilFlag; 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; hideRotateHandle: TLShapeUtilFlag; hideSelectionBoundsBg: TLShapeUtilFlag; hideSelectionBoundsFg: TLShapeUtilFlag; hitTestLineSegment(shape: T, A: VecLike, B: VecLike): boolean; hitTestPoint(shape: T, point: VecLike): boolean; abstract indicator(shape: T): any; is(shape: TLBaseShape): shape is T; isAspectRatioLocked: TLShapeUtilFlag; isClosed: TLShapeUtilFlag; onBeforeCreate?: OnBeforeCreateHandler; onBeforeUpdate?: OnBeforeUpdateHandler; // @internal onBindingChange?: OnBindingChangeHandler; onChildrenChange?: OnChildrenChangeHandler; onClick?: OnClickHandler; onDoubleClick?: OnDoubleClickHandler; onDoubleClickEdge?: OnDoubleClickHandler; onDoubleClickHandle?: OnDoubleClickHandleHandler; onDragShapesOut?: OnDragHandler; onDragShapesOver?: OnDragHandler; onDropShapesOver?: OnDragHandler; onEditEnd?: OnEditEndHandler; onHandleChange?: OnHandleChangeHandler; onResize?: OnResizeHandler; onResizeEnd?: OnResizeEndHandler; onResizeStart?: OnResizeStartHandler; onRotate?: OnRotateHandler; onRotateEnd?: OnRotateEndHandler; onRotateStart?: OnRotateStartHandler; onTranslate?: OnTranslateHandler; onTranslateEnd?: OnTranslateEndHandler; onTranslateStart?: OnTranslateStartHandler; outline(shape: T): Vec2dModel[]; point(shape: T): Vec2dModel; // @internal providesBackgroundForChildren(shape: T): boolean; abstract render(shape: T): any; // @internal renderBackground?(shape: T): any; snapPoints(shape: T): Vec2d[]; toBackgroundSvg?(shape: T, font: string | undefined, colors: TLExportColors): null | Promise | SVGElement; toSvg?(shape: T, font: string | undefined, colors: TLExportColors): Promise | SVGElement; transform(shape: T): Matrix2d; // (undocumented) readonly type: T['type']; // (undocumented) static type: string; } // @public (undocumented) export interface TLShapeUtilConstructor = TLShapeUtil> { // (undocumented) new (app: App, type: T['type']): ShapeUtil; // (undocumented) type: T['type']; } // @public (undocumented) export type TLShapeUtilFlag = (shape: T) => boolean; // @public (undocumented) export class TLTextUtil extends TLShapeUtil { // (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; // (undocumented) onBeforeCreate: (shape: TLTextShape) => { x: number; y: number; type: "text"; rotation: number; index: string; parentId: TLParentId; isLocked: boolean; props: TLTextShapeProps; id: TLShapeId; 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: TLShapeId; typeName: "shape"; } | undefined; // (undocumented) onDoubleClickEdge: (shape: TLTextShape) => { id: TLShapeId; type: "text"; props: { autoSize: boolean; scale?: undefined; }; } | { id: TLShapeId; type: "text"; props: { scale: number; autoSize?: undefined; }; } | undefined; // (undocumented) onEditEnd: OnEditEndHandler; // (undocumented) onResize: OnResizeHandler; // (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 export interface TLUserPreferences { // (undocumented) animationSpeed: number; // (undocumented) color: string; // (undocumented) id: string; // (undocumented) isDarkMode: boolean; // (undocumented) locale: string; // (undocumented) name: string; } // @public (undocumented) export class TLVideoUtil extends TLBoxUtil { // (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 useLocalStore(opts?: { persistenceKey?: string | undefined; } & StoreOptions): StoreWithStatus; // @internal (undocumented) export function usePeerIds(): string[]; // @public (undocumented) export function usePrefersReducedMotion(): boolean; // @internal (undocumented) export function usePresence(userId: string): null | TLInstancePresence; // @public (undocumented) export function useQuickReactor(name: string, reactFn: () => void, deps?: any[]): void; // @internal (undocumented) export const USER_COLORS: readonly ["#FF802B", "#EC5E41", "#F2555A", "#F04F88", "#E34BA9", "#BD54C6", "#9D5BD2", "#7B66DC", "#02B1CC", "#11B3A3", "#39B178", "#55B467"]; // @public (undocumented) export function useReactor(name: string, reactFn: () => void, deps?: any[] | undefined): void; // @public (undocumented) export function useTLStore(opts: StoreOptions): TLStore; // @internal (undocumented) export const WAY_TOO_BIG_ARROW_BEND_FACTOR = 10; // @public (undocumented) export class WeakMapCache { // (undocumented) access(item: T): K | undefined; // (undocumented) bust(): void; // (undocumented) get

(item: P, cb: (item: P) => K): NonNullable; // (undocumented) has(item: T): boolean; // (undocumented) invalidate(item: T): void; // (undocumented) items: WeakMap; // (undocumented) set(item: T, value: K): void; } // @internal (undocumented) export const ZOOMS: number[]; export * from "@tldraw/tlschema"; // (No @packageDocumentation comment for this package) ```