import { Atom } from '@tldraw/state'; import { AtomSet } from '@tldraw/store'; import { BoxModel } from '@tldraw/tlschema'; import { ComponentType } from 'react'; import { Computed } from '@tldraw/state'; import { Dispatch } from 'react'; import { Editor as Editor_2 } from '@tiptap/core'; import { EditorProviderProps as EditorProviderProps_2 } from '@tiptap/react'; import EventEmitter from 'eventemitter3'; import { ExoticComponent } from 'react'; import { ExtractShapeByProps } from '@tldraw/tlschema'; import { ForwardRefExoticComponent } from 'react'; import { FragmentProps } from 'react'; import { HistoryEntry } from '@tldraw/store'; import { IndexKey } from '@tldraw/utils'; import { JsonObject } from '@tldraw/utils'; import { JSX } from 'react/jsx-runtime'; import { LegacyMigrations } from '@tldraw/store'; import { MigrationSequence } from '@tldraw/store'; import { NamedExoticComponent } from 'react'; import { Node as Node_2 } from '@tiptap/pm/model'; import { PerformanceTracker } from '@tldraw/utils'; import { PointerEvent as PointerEvent_2 } from 'react'; import { PointerEventHandler } from 'react'; import * as React_2 from 'react'; import { default as React_3 } from 'react'; import { ReactElement } from 'react'; import { ReactNode } from 'react'; import { RecordProps } from '@tldraw/tlschema'; import { RecordsDiff } from '@tldraw/store'; import { RefAttributes } from 'react'; import { RefObject } from 'react'; import { SerializedSchema } from '@tldraw/store'; import { SerializedStore } from '@tldraw/store'; import { SetStateAction } from 'react'; import { Signal } from '@tldraw/state'; import { Store } from '@tldraw/store'; import { StoreSchema } from '@tldraw/store'; import { StoreSideEffects } from '@tldraw/store'; import { StyleProp } from '@tldraw/tlschema'; import { StylePropValue } from '@tldraw/tlschema'; import { T } from '@tldraw/validate'; import { Timers } from '@tldraw/utils'; import { TLAsset } from '@tldraw/tlschema'; import { TLAssetId } from '@tldraw/tlschema'; import { TLAssetPartial } from '@tldraw/tlschema'; import { TLAssetStore } from '@tldraw/tlschema'; import { TLBaseShape } from '@tldraw/tlschema'; import { TLBinding } from '@tldraw/tlschema'; import { TLBindingCreate } from '@tldraw/tlschema'; import { TLBindingId } from '@tldraw/tlschema'; import { TLBindingUpdate } from '@tldraw/tlschema'; import { TLBookmarkAsset } from '@tldraw/tlschema'; import { TLCamera } from '@tldraw/tlschema'; import { TLCreateShapePartial } from '@tldraw/tlschema'; import { TLCursor } from '@tldraw/tlschema'; import { TLCursorType } from '@tldraw/tlschema'; import { TLDefaultDashStyle } from '@tldraw/tlschema'; import { TLDefaultHorizontalAlignStyle } from '@tldraw/tlschema'; import { TLDocument } from '@tldraw/tlschema'; import { TLGroupShape } from '@tldraw/tlschema'; import { TLHandle } from '@tldraw/tlschema'; import { TLImageAsset } from '@tldraw/tlschema'; import { TLInstance } from '@tldraw/tlschema'; import { TLInstancePageState } from '@tldraw/tlschema'; import { TLInstancePresence } from '@tldraw/tlschema'; import { TLPage } from '@tldraw/tlschema'; import { TLPageId } from '@tldraw/tlschema'; import { TLParentId } from '@tldraw/tlschema'; import { TLPropsMigrations } from '@tldraw/tlschema'; import { TLRecord } from '@tldraw/tlschema'; import { TLRichText } from '@tldraw/tlschema'; import { TLScribble } from '@tldraw/tlschema'; import { TLShape } from '@tldraw/tlschema'; import { TLShapeCrop } from '@tldraw/tlschema'; import { TLShapeId } from '@tldraw/tlschema'; import { TLShapePartial } from '@tldraw/tlschema'; import { TLStore } from '@tldraw/tlschema'; import { TLStoreProps } from '@tldraw/tlschema'; import { TLStoreSchema } from '@tldraw/tlschema'; import { TLStoreSnapshot } from '@tldraw/tlschema'; import { TLUnknownBinding } from '@tldraw/tlschema'; import { TLUnknownShape } from '@tldraw/tlschema'; import { TLVideoAsset } from '@tldraw/tlschema'; import { UnknownRecord } from '@tldraw/store'; import { VecModel } from '@tldraw/tlschema'; /* Excluded from this release type: activeElementShouldCaptureKeys */ /** * Get the angle of a point on an arc. * @param fromAngle - The angle from center to arc's start point (A) on the circle * @param toAngle - The angle from center to arc's end point (B) on the circle * @param direction - The direction of the arc (1 = counter-clockwise, -1 = clockwise) * @returns The distance in radians between the two angles according to the direction * @public */ export declare function angleDistance(fromAngle: number, toAngle: number, direction: number): number; /* Excluded from this release type: applyRotationToSnapshotShapes */ /** * Whether two numbers numbers a and b are approximately equal. * * @param a - The first point. * @param b - The second point. * @public */ export declare function approximately(a: number, b: number, precision?: number): boolean; /** @public */ export declare class Arc2d extends Geometry2d { private _center; private _radius; private _start; private _end; private _largeArcFlag; private _sweepFlag; private _measure; private _angleStart; private _angleEnd; constructor(config: Omit & { center: Vec; end: Vec; largeArcFlag: number; start: Vec; sweepFlag: number; }); nearestPoint(point: VecLike): Vec; hitTestLineSegment(A: VecLike, B: VecLike): boolean; getVertices(): Vec[]; getSvgPathData(first?: boolean): string; getLength(): number; } /** * Checks whether two angles are approximately at right-angles or parallel to each other * * @param a - Angle a (radians) * @param b - Angle b (radians) * @returns True iff the angles are approximately at right-angles or parallel to each other * @public */ export declare function areAnglesCompatible(a: number, b: number): boolean; /** @public */ export declare function average(A: VecLike, B: VecLike): string; /** @public */ export declare abstract class BaseBoxShapeTool extends StateNode { static id: string; static initial: string; static children(): TLStateNodeConstructor[]; abstract shapeType: TLBaseBoxShape['type']; onCreate?(_shape: null | TLShape): null | void; } /** @public */ export declare abstract class BaseBoxShapeUtil extends ShapeUtil { getGeometry(shape: Shape): Geometry2d; onResize(shape: any, info: TLResizeInfo): any; getHandleSnapGeometry(shape: Shape): HandleSnapGeometry; getInterpolatedProps(startShape: Shape, endShape: Shape, t: number): Shape['props']; } /** * Options passed to {@link BindingUtil.onBeforeChange} and {@link BindingUtil.onAfterChange}, * describing the data associated with a binding being changed. * * @public */ export declare interface BindingOnChangeOptions { /** The binding record before the change is made. */ bindingBefore: Binding; /** The binding record after the change is made. */ bindingAfter: Binding; } /** * Options passed to {@link BindingUtil.onBeforeCreate} and {@link BindingUtil.onAfterCreate}, * describing a the creating a binding. * * @public */ export declare interface BindingOnCreateOptions { /** The binding being created. */ binding: Binding; } /** * Options passed to {@link BindingUtil.onBeforeDelete} and {@link BindingUtil.onAfterDelete}, * describing a binding being deleted. * * @public */ export declare interface BindingOnDeleteOptions { /** The binding being deleted. */ binding: Binding; } /** * Options passed to {@link BindingUtil.onAfterChangeFromShape} and * {@link BindingUtil.onAfterChangeToShape}, describing a bound shape being changed. * * @public */ export declare interface BindingOnShapeChangeOptions { /** The binding record linking these two shapes. */ binding: Binding; /** The shape record before the change is made. */ shapeBefore: TLShape; /** The shape record after the change is made. */ shapeAfter: TLShape; /** * Why did this shape change? * - 'self': the shape itself changed * - 'ancestry': the ancestry of the shape changed, but the shape itself may not have done */ reason: 'ancestry' | 'self'; } /** * Options passed to {@link BindingUtil.onBeforeDeleteFromShape} and * {@link BindingUtil.onBeforeDeleteToShape}, describing a bound shape that is about to be deleted. * * See {@link BindingOnShapeIsolateOptions} for discussion on when to use the delete vs. the isolate * callbacks. * * @public */ export declare interface BindingOnShapeDeleteOptions { /** The binding record that refers to the shape in question. */ binding: Binding; /** The shape that is about to be deleted. */ shape: TLShape; } /** * Options passed to {@link BindingUtil.onBeforeIsolateFromShape} and * {@link BindingUtil.onBeforeIsolateToShape}, describing a shape that is about to be isolated from * the one that it's bound to. * * Isolation happens whenever two bound shapes are separated. For example * 1. One is deleted, but the other is not. * 1. One is copied, but the other is not. * 1. One is duplicated, but the other is not. * * In each of these cases, if the remaining shape depends on the binding for its rendering, it may * now be in an inconsistent state. For example, tldraw's arrow shape depends on the binding to know * where the end of the arrow is. If we removed the binding without doing anything else, the arrow * would suddenly be pointing to the wrong location. Instead, when the shape the arrow is pointing * to is deleted, or the arrow is copied/duplicated, we use an isolation callback. The callback * updates the arrow based on the binding that's about to be removed, so it doesn't end up pointing * to the wrong place. * * For this style of consistency update, use isolation callbacks. For actions specific to deletion * (like deleting a sticker when the shape it's bound to is removed), use the delete callbacks * ({@link BindingUtil.onBeforeDeleteFromShape} and {@link BindingUtil.onBeforeDeleteToShape}) * instead. * * @public */ export declare interface BindingOnShapeIsolateOptions { /** The binding record that refers to the shape in question. */ binding: Binding; /** * The shape being removed. For deletion, this is the deleted shape. For copy/duplicate, this is * the shape that _isn't_ being copied/duplicated and is getting left behind. */ removedShape: TLShape; } /** @public */ export declare abstract class BindingUtil { editor: Editor; constructor(editor: Editor); static props?: RecordProps; static migrations?: TLPropsMigrations; /** * The type of the binding util, which should match the binding's type. * * @public */ static type: string; /** * Get the default props for a binding. * * @public */ abstract getDefaultProps(): Partial; /** * Called whenever a store operation involving this binding type has completed. This is useful * for working with networks of related bindings that may need to update together. * * @example * ```ts * class MyBindingUtil extends BindingUtil { * changedBindingIds = new Set() * * onOperationComplete() { * doSomethingWithChangedBindings(this.changedBindingIds) * this.changedBindingIds.clear() * } * * onAfterChange({ bindingAfter }: BindingOnChangeOptions) { * this.changedBindingIds.add(bindingAfter.id) * } * } * ``` * * @public */ onOperationComplete?(): void; /** * Called when a binding is about to be created. See {@link BindingOnCreateOptions} for details. * * You can optionally return a new binding to replace the one being created - for example, to * set different initial props. * * @public */ onBeforeCreate?(options: BindingOnCreateOptions): Binding | void; /** * Called after a binding has been created. See {@link BindingOnCreateOptions} for details. * * @public */ onAfterCreate?(options: BindingOnCreateOptions): void; /** * Called when a binding is about to be changed. See {@link BindingOnChangeOptions} for details. * * Note that this only fires when the binding record is changing, not when the shapes * associated change. Use {@link BindingUtil.onAfterChangeFromShape} and * {@link BindingUtil.onAfterChangeToShape} for that. * * You can optionally return a new binding to replace the one being changed - for example, to * enforce constraints on the binding's props. * * @public */ onBeforeChange?(options: BindingOnChangeOptions): Binding | void; /** * Called after a binding has been changed. See {@link BindingOnChangeOptions} for details. * * Note that this only fires when the binding record is changing, not when the shapes * associated change. Use {@link BindingUtil.onAfterChangeFromShape} and * {@link BindingUtil.onAfterChangeToShape} for that. * * @public */ onAfterChange?(options: BindingOnChangeOptions): void; /** * Called when a binding is about to be deleted. See {@link BindingOnDeleteOptions} for details. * * @public */ onBeforeDelete?(options: BindingOnDeleteOptions): void; /** * Called after a binding has been deleted. See {@link BindingOnDeleteOptions} for details. * * @public */ onAfterDelete?(options: BindingOnDeleteOptions): void; /** * Called after the shape referenced in a binding's `fromId` is changed. Use this to propagate * any changes to the binding itself or the other shape as needed. See * {@link BindingOnShapeChangeOptions} for details. * * @public */ onAfterChangeFromShape?(options: BindingOnShapeChangeOptions): void; /** * Called after the shape referenced in a binding's `toId` is changed. Use this to propagate any * changes to the binding itself or the other shape as needed. See * {@link BindingOnShapeChangeOptions} for details. * * @public */ onAfterChangeToShape?(options: BindingOnShapeChangeOptions): void; /** * Called before the shape referenced in a binding's `fromId` is about to be deleted. Use this * with care - you may want to use {@link BindingUtil.onBeforeIsolateToShape} instead. See * {@link BindingOnShapeDeleteOptions} for details. * * @public */ onBeforeDeleteFromShape?(options: BindingOnShapeDeleteOptions): void; /** * Called before the shape referenced in a binding's `toId` is about to be deleted. Use this * with care - you may want to use {@link BindingUtil.onBeforeIsolateFromShape} instead. See * {@link BindingOnShapeDeleteOptions} for details. * * @public */ onBeforeDeleteToShape?(options: BindingOnShapeDeleteOptions): void; /** * Called before the shape referenced in a binding's `fromId` is about to be isolated from the * shape referenced in `toId`. See {@link BindingOnShapeIsolateOptions} for discussion on what * isolation means, and when/how to use this callback. */ onBeforeIsolateFromShape?(options: BindingOnShapeIsolateOptions): void; /** * Called before the shape referenced in a binding's `toId` is about to be isolated from the * shape referenced in `fromId`. See {@link BindingOnShapeIsolateOptions} for discussion on what * isolation means, and when/how to use this callback. */ onBeforeIsolateToShape?(options: BindingOnShapeIsolateOptions): void; } /** * When moving or resizing shapes, the bounds of the shape can snap to key geometry on other nearby * shapes. Customize how a shape snaps to others with {@link ShapeUtil.getBoundsSnapGeometry}. * * @public */ export declare interface BoundsSnapGeometry { /** * Points that this shape will snap to. By default, this will be the corners and center of the * shapes bounding box. To disable snapping to a specific point, use an empty array. */ points?: VecModel[]; } /** @public */ export declare interface BoundsSnapPoint { id: string; x: number; y: number; handle?: SelectionCorner; } /** @public */ export declare class BoundsSnaps { readonly manager: SnapManager; readonly editor: Editor; constructor(manager: SnapManager); private getSnapPointsCache; getSnapPoints(shapeId: TLShapeId): BoundsSnapPoint[]; private getSnappablePoints; private getSnappableGapNodes; private getVisibleGaps; snapTranslateShapes({ lockedAxis, initialSelectionPageBounds, initialSelectionSnapPoints, dragDelta }: { dragDelta: Vec; initialSelectionPageBounds: Box; initialSelectionSnapPoints: BoundsSnapPoint[]; lockedAxis: 'x' | 'y' | null; }): SnapData; snapResizeShapes({ initialSelectionPageBounds, dragDelta, handle: originalHandle, isAspectRatioLocked, isResizingFromCenter }: { dragDelta: Vec; handle: SelectionCorner | SelectionEdge; initialSelectionPageBounds: Box; isAspectRatioLocked: boolean; isResizingFromCenter: boolean; }): SnapData; private collectPointSnaps; private collectGapSnaps; private getPointSnapLines; private getGapSnapLines; } /** @public */ export declare class Box { constructor(x?: number, y?: number, w?: number, h?: number); x: number; y: number; w: number; h: number; get point(): Vec; set point(val: Vec); get minX(): number; set minX(n: number); get left(): number; get midX(): number; get maxX(): number; get right(): number; get minY(): number; set minY(n: number); get top(): number; get midY(): number; get maxY(): number; get bottom(): number; get width(): number; set width(n: number); get height(): number; set height(n: number); get aspectRatio(): number; get center(): Vec; set center(v: Vec); get corners(): Vec[]; get cornersAndCenter(): Vec[]; get sides(): Array<[Vec, Vec]>; get size(): Vec; isValid(): boolean; toFixed(): this; setTo(B: Box): this; set(x?: number, y?: number, w?: number, h?: number): this; expand(A: Box): this; expandBy(n: number): this; scale(n: number): this; clone(): Box; translate(delta: VecLike): this; snapToGrid(size: number): void; collides(B: Box): boolean; contains(B: Box): boolean; includes(B: Box): boolean; containsPoint(V: VecLike, margin?: number): boolean; getHandlePoint(handle: SelectionCorner | SelectionEdge): Vec; toJson(): BoxModel; resize(handle: SelectionCorner | SelectionEdge | string, dx: number, dy: number): void; union(box: BoxModel): this; static From(box: BoxModel): Box; static FromCenter(center: VecLike, size: VecLike): Box; static FromPoints(points: VecLike[]): Box; static Expand(A: Box, B: Box): Box; static ExpandBy(A: Box, n: number): Box; static Collides(A: Box, B: Box): boolean; static Contains(A: Box, B: Box): boolean; static ContainsApproximately(A: Box, B: Box, precision?: number): boolean; static Includes(A: Box, B: Box): boolean; static ContainsPoint(A: Box, B: VecLike, margin?: number): boolean; static Common(boxes: Box[]): Box; static Sides(A: Box, inset?: number): Vec[][]; static Resize(box: Box, handle: SelectionCorner | SelectionEdge | string, dx: number, dy: number, isAspectRatioLocked?: boolean): { box: Box; scaleX: number; scaleY: number; }; equals(other: Box | BoxModel): boolean; static Equals(a: Box | BoxModel, b: Box | BoxModel): boolean; zeroFix(): this; static ZeroFix(other: Box | BoxModel): Box; } /** @public */ export declare type BoxLike = Box | BoxModel; /** * @param a - Any angle in radians * @returns A number between 0 and 2 * PI * @public */ export declare function canonicalizeRotation(a: number): number; /* Excluded from this release type: CanvasMaxSize */ /** * Get the center of a circle from three points. * * @param a - The first point * @param b - The second point * @param c - The third point * * @returns The center of the circle or null if the points are collinear * * @public */ export declare function centerOfCircleFromThreePoints(a: VecLike, b: VecLike, c: VecLike): null | Vec; /** @public */ export declare class Circle2d extends Geometry2d { config: Omit & { isFilled: boolean; radius: number; x?: number; y?: number; }; private _center; private _radius; private _x; private _y; constructor(config: Omit & { isFilled: boolean; radius: number; x?: number; y?: number; }); getBounds(): Box; getVertices(): Vec[]; nearestPoint(point: VecLike): Vec; hitTestLineSegment(A: VecLike, B: VecLike, distance?: number): boolean; getSvgPathData(): string; } /** * Clamp a value into a range. * * @example * * ```ts * const A = clamp(0, 1) // 1 * ``` * * @param n - The number to clamp. * @param min - The minimum value. * @public */ export declare function clamp(n: number, min: number): number; /** * Clamp a value into a range. * * @example * * ```ts * const A = clamp(0, 1, 10) // 1 * const B = clamp(11, 1, 10) // 10 * const C = clamp(5, 1, 10) // 5 * ``` * * @param n - The number to clamp. * @param min - The minimum value. * @param max - The maximum value. * @public */ export declare function clamp(n: number, min: number, max: number): number; /** * Clamp radians within 0 and 2PI * * @param r - The radian value. * @public */ export declare function clampRadians(r: number): number; /* Excluded from this release type: clampToBrowserMaxCanvasSize */ /** @public */ export declare class ClickManager { editor: Editor; constructor(editor: Editor); private _clickId; private _clickTimeout?; private _clickScreenPoint?; private _previousScreenPoint?; _getClickTimeout(state: TLClickState, id?: string): void; /* Excluded from this release type: _clickState */ /** * The current click state. * * @public */ get clickState(): TLClickState | undefined; lastPointerInfo: TLPointerEventInfo; handlePointerEvent(info: TLPointerEventInfo): TLClickEventInfo | TLPointerEventInfo; /* Excluded from this release type: cancelDoubleClickTimeout */ } /** * Get the clockwise angle distance between two angles. * * @param a0 - The first angle. * @param a1 - The second angle. * @public */ export declare function clockwiseAngleDist(a0: number, a1: number): number; /** * @public * @react */ export declare function ContainerProvider({ container, children }: ContainerProviderProps): JSX.Element; /** @public */ export declare interface ContainerProviderProps { container: HTMLElement; children: React.ReactNode; } /** @public */ export declare const coreShapes: readonly [typeof GroupShapeUtil]; /** * Get the counter-clockwise angle distance between two angles. * * @param a0 - The first angle. * @param a1 - The second angle. * @public */ export declare function counterClockwiseAngleDist(a0: number, a1: number): number; /** @public */ export declare function createDebugValue(name: string, { defaults, shouldStoreForSession }: { defaults: DebugFlagDefaults; shouldStoreForSession?: boolean; }): DebugFlag; /** * Converts a deep link descriptor to a url-safe string * * @example * ```ts * const url = `https://example.com?d=${createDeepLinkString({ type: 'shapes', shapeIds: ['shape:1', 'shape:2'] })}` * navigator.clipboard.writeText(url) * ``` * * @param deepLink - the deep link descriptor * @returns a url-safe string * * @public */ export declare function createDeepLinkString(deepLink: TLDeepLink): string; /** * Creates a signal of the instance state for a given store. * @public * @param store - The store to create the instance state snapshot signal for * @returns */ export declare function createSessionStateSnapshotSignal(store: TLStore): Signal; /** * A helper for creating a TLStore schema from either an object with shapeUtils, bindingUtils, and * migrations, or a schema. * * @param opts - Options for creating the schema. * * @public */ export declare function createTLSchemaFromUtils(opts: TLStoreSchemaOptions): StoreSchema; /** * A helper for creating a TLStore. * * @param opts - Options for creating the store. * * @public */ export declare function createTLStore({ initialData, defaultName, id, assets, onMount, collaboration, ...rest }?: TLStoreOptions): TLStore; /** @public */ export declare function createTLUser(opts?: { setUserPreferences?: ((userPreferences: TLUserPreferences) => void) | undefined; userPreferences?: Signal | undefined; }): TLUser; /** @public */ export declare class CubicBezier2d extends Polyline2d { private _a; private _b; private _c; private _d; private _resolution; constructor(config: Omit & { cp1: Vec; cp2: Vec; end: Vec; resolution?: number; start: Vec; }); getVertices(): Vec[]; nearestPoint(A: VecLike): Vec; getSvgPathData(first?: boolean): string; static GetAtT(segment: CubicBezier2d, t: number): Vec; getLength(_filters?: Geometry2dFilters, precision?: number): number; } /** @public */ export declare class CubicSpline2d extends Geometry2d { private _points; constructor(config: Omit & { points: Vec[]; }); private _segments?; get segments(): CubicBezier2d[]; getLength(): number; getVertices(): Vec[]; nearestPoint(A: VecLike): Vec; hitTestLineSegment(A: VecLike, B: VecLike): boolean; getSvgPathData(): string; } /** * Converts a data URL to a file. * @param url - The data URL to convert. * @param filename - The name of the file. * @param mimeType - The MIME type of the file. * @returns A promise that resolves to a file. * @public */ export declare function dataUrlToFile(url: string, filename: string, mimeType: string): Promise; /** @public */ export declare interface DebugFlag extends DebugFlagDef, Atom { reset(): void; } /** @public */ export declare interface DebugFlagDef { name: string; defaults: DebugFlagDefaults; shouldStoreForSession: boolean; } /** @public */ export declare interface DebugFlagDefaults { development?: T; staging?: T; production?: T; all: T; } /* Excluded from this release type: debugFlags */ /* Excluded from this release type: DEFAULT_ANIMATION_OPTIONS */ /* Excluded from this release type: DEFAULT_CAMERA_OPTIONS */ /** @public @react */ export declare function DefaultBackground(): JSX.Element; /** @public @react */ export declare const DefaultBrush: ({ brush, color, opacity, className }: TLBrushProps) => JSX.Element; /** @public @react */ export declare function DefaultCanvas({ className }: TLCanvasComponentProps): JSX.Element; /** @public @react */ export declare function DefaultCollaboratorHint({ className, zoom, point, color, viewport, opacity }: TLCollaboratorHintProps): JSX.Element; /** @public @react */ export declare const DefaultCursor: NamedExoticComponent; /** @public @react */ export declare const DefaultErrorFallback: TLErrorFallbackComponent; /** @public @react */ export declare function DefaultGrid({ x, y, z, size }: TLGridProps): JSX.Element; /** @public @react */ export declare function DefaultHandle({ handle, isCoarse, className, zoom }: TLHandleProps): JSX.Element; /** @public @react */ export declare const DefaultHandles: ({ children }: TLHandlesProps) => JSX.Element; /** @public @react */ export declare function DefaultScribble({ scribble, zoom, color, opacity, className }: TLScribbleProps): JSX.Element | null; /** @public @react */ export declare function DefaultSelectionBackground({ bounds, rotation }: TLSelectionBackgroundProps): JSX.Element; /** @public @react */ export declare function DefaultSelectionForeground({ bounds, rotation }: TLSelectionForegroundProps): JSX.Element; /** @public @react */ export declare const DefaultShapeIndicator: NamedExoticComponent; /** @public @react */ export declare const DefaultShapeIndicators: NamedExoticComponent; /** @public @react */ export declare const DefaultShapeWrapper: ForwardRefExoticComponent>; /** @public @react */ export declare function DefaultSnapIndicator({ className, line, zoom }: TLSnapIndicatorProps): JSX.Element; /** @public @react */ export declare function DefaultSpinner(props: React.SVGProps): JSX.Element; /** @public @react */ export declare const DefaultSvgDefs: () => null; /** @public */ export declare const defaultTldrawOptions: { readonly actionShortcutsLocation: "swap"; readonly adjacentShapeMargin: 10; readonly animationMediumMs: 320; readonly camera: TLCameraOptions; readonly cameraMovingTimeoutMs: 64; readonly cameraSlideFriction: 0.09; readonly coarseDragDistanceSquared: 36; readonly coarseHandleRadius: 20; readonly coarsePointerWidth: 12; readonly collaboratorCheckIntervalMs: 1200; readonly collaboratorIdleTimeoutMs: 3000; readonly collaboratorInactiveTimeoutMs: 60000; readonly createTextOnCanvasDoubleClick: true; readonly debouncedZoom: true; readonly debouncedZoomThreshold: 500; readonly deepLinks: undefined; readonly defaultSvgPadding: 32; readonly doubleClickDurationMs: 450; readonly dragDistanceSquared: 16; readonly edgeScrollDelay: 200; readonly edgeScrollDistance: 8; readonly edgeScrollEaseDuration: 200; readonly edgeScrollSpeed: 25; readonly enableToolbarKeyboardShortcuts: true; readonly experimental__onDropOnCanvas: undefined; readonly exportProvider: ExoticComponent; readonly flattenImageBoundsExpand: 64; readonly flattenImageBoundsPadding: 16; readonly followChaseViewportSnap: 2; readonly gridSteps: readonly [{ readonly mid: 0.15; readonly min: -1; readonly step: 64; }, { readonly mid: 0.375; readonly min: 0.05; readonly step: 16; }, { readonly mid: 1; readonly min: 0.15; readonly step: 4; }, { readonly mid: 2.5; readonly min: 0.7; readonly step: 1; }]; readonly handleRadius: 12; readonly hitTestMargin: 8; readonly laserDelayMs: 1200; readonly laserFadeoutMs: 500; readonly longPressDurationMs: 500; readonly maxExportDelayMs: 5000; readonly maxFilesAtOnce: 100; readonly maxFontsToLoadBeforeRender: number; readonly maxPages: 40; readonly maxShapesPerPage: 4000; readonly multiClickDurationMs: 200; readonly nonce: undefined; readonly quickZoomPreservesScreenBounds: true; readonly snapThreshold: 8; readonly spacebarPanning: true; readonly temporaryAssetPreviewLifetimeMs: 180000; readonly text: {}; readonly textShadowLod: 0.35; readonly tooltipDelayMs: 700; readonly uiCoarseDragDistanceSquared: 625; readonly uiDragDistanceSquared: 16; readonly zoomToFitPadding: 128; }; /** @public */ export declare const defaultUserPreferences: Readonly<{ animationSpeed: 0 | 1; areKeyboardShortcutsEnabled: true; color: "#02B1CC" | "#11B3A3" | "#39B178" | "#55B467" | "#7B66DC" | "#9D5BD2" | "#BD54C6" | "#E34BA9" | "#EC5E41" | "#F04F88" | "#F2555A" | "#FF802B"; colorScheme: "light"; edgeScrollSpeed: 1; enhancedA11yMode: false; inputMode: null; isDynamicSizeMode: false; isPasteAtCursorMode: false; isSnapMode: false; isWrapMode: false; isZoomDirectionInverted: false; locale: "ar" | "bn" | "ca" | "cs" | "da" | "de" | "el" | "en" | "es" | "fa" | "fi" | "fr" | "gl" | "gu-in" | "he" | "hi-in" | "hr" | "hu" | "id" | "it" | "ja" | "km-kh" | "kn" | "ko-kr" | "ml" | "mr" | "ms" | "ne" | "nl" | "no" | "pa" | "pl" | "pt-br" | "pt-pt" | "ro" | "ru" | "sl" | "so" | "sv" | "ta" | "te" | "th" | "tl" | "tr" | "uk" | "ur" | "vi" | "zh-cn" | "zh-tw"; name: ""; }>; /** * Convert degrees to radians. * * @param d - The degree in degrees. * @public */ export declare function degreesToRadians(d: number): number; /** @public */ export declare const EASINGS: { readonly easeInCubic: (t: number) => number; readonly easeInExpo: (t: number) => number; readonly easeInOutCubic: (t: number) => number; readonly easeInOutExpo: (t: number) => number; readonly easeInOutQuad: (t: number) => number; readonly easeInOutQuart: (t: number) => number; readonly easeInOutQuint: (t: number) => number; readonly easeInOutSine: (t: number) => number; readonly easeInQuad: (t: number) => number; readonly easeInQuart: (t: number) => number; readonly easeInQuint: (t: number) => number; readonly easeInSine: (t: number) => number; readonly easeOutCubic: (t: number) => number; readonly easeOutExpo: (t: number) => number; readonly easeOutQuad: (t: number) => number; readonly easeOutQuart: (t: number) => number; readonly easeOutQuint: (t: number) => number; readonly easeOutSine: (t: number) => number; readonly linear: (t: number) => number; }; /** @public */ export declare class Edge2d extends Geometry2d { private _start; private _end; private _d; private _u; private _ul; constructor(config: { end: Vec; start: Vec; }); getLength(): number; getVertices(): Vec[]; nearestPoint(point: VecLike): Vec; getSvgPathData(first?: boolean): string; } /** @public */ export declare class EdgeScrollManager { editor: Editor; constructor(editor: Editor); private _isEdgeScrolling; private _edgeScrollDuration; getIsEdgeScrolling(): boolean; /** * Update the camera position when the mouse is close to the edge of the screen. * Run this on every tick when in a state where edge scrolling is enabled. * * @public */ updateEdgeScrolling(elapsed: number): void; /* Excluded from this release type: getEdgeProximityFactors */ private getEdgeScroll; /** * Moves the camera when the mouse is close to the edge of the screen. * @public */ private moveCameraWhenCloseToEdge; } /** @public */ export declare class Editor extends EventEmitter { readonly id: string; constructor({ store, user, shapeUtils, bindingUtils, tools, getContainer, cameraOptions, initialState, autoFocus, inferDarkMode, options: _options, textOptions: _textOptions, getShapeVisibility, fontAssetUrls }: TLEditorOptions); private readonly _getShapeVisibility?; private getIsShapeHiddenCache; isShapeHidden(shapeOrId: TLShape | TLShapeId): boolean; readonly options: TldrawOptions; readonly contextId: string; /** * The editor's store * * @public */ readonly store: TLStore; /** * The root state of the statechart. * * @public */ readonly root: StateNode; /** * Set a tool. Useful if you need to add a tool to the state chart on demand, * after the editor has already been initialized. * * @param Tool - The tool to set. * @param parent - The parent state node to set the tool on. * * @public */ setTool(Tool: TLStateNodeConstructor, parent?: StateNode): void; /** * Remove a tool. Useful if you need to remove a tool from the state chart on demand, * after the editor has already been initialized. * * @param Tool - The tool to delete. * @param parent - The parent state node to remove the tool from. * * @public */ removeTool(Tool: TLStateNodeConstructor, parent?: StateNode): void; /** * A set of functions to call when the editor is disposed. * * @public */ readonly disposables: Set<() => void>; /** * Whether the editor is disposed. * * @public */ isDisposed: boolean; /* Excluded from this release type: _tickManager */ /** * A manager for the editor's input state. * * @public */ readonly inputs: InputsManager; /** * A manager for the editor's snapping feature. * * @public */ readonly snaps: SnapManager; private readonly _spatialIndex; /** * A manager for the any asynchronous events and making sure they're * cleaned up upon disposal. * * @public */ readonly timers: { dispose: () => void; requestAnimationFrame: (callback: FrameRequestCallback) => number; setInterval: (handler: TimerHandler, timeout?: number | undefined, ...args: any[]) => number; setTimeout: (handler: TimerHandler, timeout?: number | undefined, ...args: any[]) => number; }; /** * A manager for the user and their preferences. * * @public */ readonly user: UserPreferencesManager; /** * A helper for measuring text. * * @public */ readonly textMeasure: TextManager; /** * A utility for managing the set of fonts that should be rendered in the document. * * @public */ readonly fonts: FontManager; /** * A manager for the editor's scribbles. * * @public */ readonly scribbles: ScribbleManager; /** * A manager for side effects and correct state enforcement. See {@link @tldraw/store#StoreSideEffects} for details. * * @public */ readonly sideEffects: StoreSideEffects; /** * A manager for moving the camera when the mouse is at the edge of the screen. * * @public */ edgeScrollManager: EdgeScrollManager; /* Excluded from this release type: focusManager */ /** * The current HTML element containing the editor. * * @example * ```ts * const container = editor.getContainer() * ``` * * @public */ getContainer: () => HTMLElement; /** * Dispose the editor. * * @public */ dispose(): void; /** * A map of shape utility classes (TLShapeUtils) by shape type. * * @public */ shapeUtils: { readonly [K in string]?: ShapeUtil; }; styleProps: { [key: string]: Map, string>; }; /** * Get a shape util from a shape itself. * * @example * ```ts * const util = editor.getShapeUtil(myArrowShape) * const util = editor.getShapeUtil('arrow') * const util = editor.getShapeUtil(myArrowShape) * const util = editor.getShapeUtil(TLArrowShape)('arrow') * ``` * * @param shape - A shape, shape partial, or shape type. * * @public */ getShapeUtil(type: K): ShapeUtil>; getShapeUtil(shape: S | S['type'] | TLShapePartial): ShapeUtil; getShapeUtil(type: T extends ShapeUtil ? R['type'] : string): T; /** * Returns true if the editor has a shape util for the given shape / shape type. * * @param shape - A shape, shape partial, or shape type. */ hasShapeUtil(shape: TLShape | TLShapePartial): boolean; hasShapeUtil(type: TLShape['type']): boolean; hasShapeUtil(type: T extends ShapeUtil ? R['type'] : string): boolean; /** * A map of shape utility classes (TLShapeUtils) by shape type. * * @public */ bindingUtils: { readonly [K in string]?: BindingUtil; }; /** * Get a binding util from a binding itself. * * @example * ```ts * const util = editor.getBindingUtil(myArrowBinding) * const util = editor.getBindingUtil('arrow') * const util = editor.getBindingUtil(myArrowBinding) * const util = editor.getBindingUtil(TLArrowBinding)('arrow') * ``` * * @param binding - A binding, binding partial, or binding type. * * @public */ getBindingUtil(type: K): BindingUtil>; getBindingUtil(binding: { type: S['type']; } | S): BindingUtil; getBindingUtil(type: T extends BindingUtil ? R['type'] : string): T; /** * A manager for the editor's history. * * @readonly */ protected readonly history: HistoryManager; /** * Undo to the last mark. * * @example * ```ts * editor.undo() * ``` * * @public */ undo(): this; /** * Whether the editor can undo. * * @public */ canUndo(): boolean; getCanUndo(): boolean; /** * Redo to the next mark. * * @example * ```ts * editor.redo() * ``` * * @public */ redo(): this; /** * Whether the editor can redo. * * @public */ canRedo(): boolean; getCanRedo(): boolean; clearHistory(): this; /** * Create a new "mark", or stopping point, in the undo redo history. Creating a mark will clear * any redos. You typically want to do this just before a user interaction begins or is handled. * * @example * ```ts * editor.markHistoryStoppingPoint() * editor.flipShapes(editor.getSelectedShapes()) * ``` * @example * ```ts * const beginRotateMark = editor.markHistoryStoppingPoint() * // if the use cancels the rotation, you can bail back to this mark * editor.bailToMark(beginRotateMark) * ``` * * @public * @param name - The name of the mark, useful for debugging the undo/redo stacks * @returns a unique id for the mark that can be used with `squashToMark` or `bailToMark`. */ markHistoryStoppingPoint(name?: string): string; /* Excluded from this release type: getMarkIdMatching */ /** * Coalesces all changes since the given mark into a single change, removing any intermediate marks. * * This is useful if you need to 'compress' the recent history to simplify the undo/redo experience of a complex interaction. * * @example * ```ts * const bumpShapesMark = editor.markHistoryStoppingPoint() * // ... some changes * editor.squashToMark(bumpShapesMark) * ``` * * @param markId - The mark id to squash to. */ squashToMark(markId: string): this; /** * Undo to the closest mark, discarding the changes so they cannot be redone. * * @example * ```ts * editor.bail() * ``` * * @public */ bail(): this; /** * Undo to the given mark, discarding the changes so they cannot be redone. * * @example * ```ts * const beginDrag = editor.markHistoryStoppingPoint() * // ... some changes * editor.bailToMark(beginDrag) * ``` * * @public */ bailToMark(id: string): this; private _shouldIgnoreShapeLock; /** * Run a function in a transaction with optional options for context. * You can use the options to change the way that history is treated * or allow changes to locked shapes. * * @example * ```ts * // updating with * editor.run(() => { * editor.updateShape({ ...myShape, x: 100 }) * }, { history: "ignore" }) * * // forcing changes / deletions for locked shapes * editor.toggleLock([myShape]) * editor.run(() => { * editor.updateShape({ ...myShape, x: 100 }) * editor.deleteShape(myShape) * }, { ignoreShapeLock: true }, ) * ``` * * @param fn - The callback function to run. * @param opts - The options for the batch. * * * @public */ run(fn: () => void, opts?: TLEditorRunOptions): this; /* Excluded from this release type: annotateError */ /* Excluded from this release type: createErrorAnnotations */ /* Excluded from this release type: _crashingError */ /* Excluded from this release type: getCrashingError */ /* Excluded from this release type: crash */ /** * The editor's current path of active states. * * @example * ```ts * editor.getPath() // "select.idle" * ``` * * @public */ getPath(): string; /** * Get whether a certain tool (or other state node) is currently active. * * @example * ```ts * editor.isIn('select') * editor.isIn('select.brushing') * ``` * * @param path - The path of active states, separated by periods. * * @public */ isIn(path: string): boolean; /** * Get whether the state node is in any of the given active paths. * * @example * ```ts * state.isInAny('select', 'erase') * state.isInAny('select.brushing', 'erase.idle') * ``` * * @public */ isInAny(...paths: string[]): boolean; /** * Set the selected tool. * * @example * ```ts * editor.setCurrentTool('hand') * editor.setCurrentTool('hand', { date: Date.now() }) * ``` * * @param id - The id of the tool to select. * @param info - Arbitrary data to pass along into the transition. * * @public */ setCurrentTool(id: string, info?: {}): this; /** * The current selected tool. * * @public */ getCurrentTool(): StateNode; /** * The id of the current selected tool. * * @public */ getCurrentToolId(): string; /** * Get a descendant by its path. * * @example * ```ts * editor.getStateDescendant('select') * editor.getStateDescendant('select.brushing') * ``` * * @param path - The descendant's path of state ids, separated by periods. * * @public */ getStateDescendant(path: string): T | undefined; /** * The global document settings that apply to all users. * * @public **/ getDocumentSettings(): TLDocument; /** * Update the global document settings that apply to all users. * * @public **/ updateDocumentSettings(settings: Partial): this; /** * The current instance's state. * * @public */ getInstanceState(): TLInstance; /** * Update the instance's state. * * @param partial - A partial object to update the instance state with. * @param historyOptions - History batch options. * * @public */ updateInstanceState(partial: Partial>, historyOptions?: TLHistoryBatchOptions): this; /* Excluded from this release type: _updateInstanceState */ /* Excluded from this release type: _isChangingStyleTimeout */ menus: { addOpenMenu: (id: string) => void; clearOpenMenus: () => void; deleteOpenMenu: (id: string) => void; getOpenMenus: () => string[]; hasAnyOpenMenus: () => boolean; hasOpenMenus: () => boolean; isMenuOpen: (id: string) => boolean; }; /** * Set the cursor. * * @param cursor - The cursor to set. * @public */ setCursor(cursor: Partial): this; /** * Page states. * * @public */ getPageStates(): TLInstancePageState[]; private _getPageStatesQuery; /** * The current page state. * * @public */ getCurrentPageState(): TLInstancePageState; private _getCurrentPageStateId; /** * Update this instance's page state. * * @example * ```ts * editor.updateCurrentPageState({ id: 'page1', editingShapeId: 'shape:123' }) * ``` * * @param partial - The partial of the page state object containing the changes. * * @public */ updateCurrentPageState(partial: Partial>): this; _updateCurrentPageState(partial: Partial>): void; /** * The current selected ids. * * @public */ getSelectedShapeIds(): TLShapeId[]; /** * An array containing all of the currently selected shapes. * * @public * @readonly */ getSelectedShapes(): TLShape[]; /** * Select one or more shapes. * * @example * ```ts * editor.setSelectedShapes(['id1']) * editor.setSelectedShapes(['id1', 'id2']) * ``` * * @param shapes - The shape (or shape ids) to select. * * @public */ setSelectedShapes(shapes: TLShape[] | TLShapeId[]): this; /** * Determine whether or not any of a shape's ancestors are selected. * * @param shape - The shape (or shape id) of the shape to check. * * @public */ isAncestorSelected(shape: TLShape | TLShapeId): boolean; /** * Select one or more shapes. * * @example * ```ts * editor.select('id1') * editor.select('id1', 'id2') * ``` * * @param shapes - The shape (or the shape ids) to select. * * @public */ select(...shapes: TLShape[] | TLShapeId[]): this; /** * Remove a shape from the existing set of selected shapes. * * @example * ```ts * editor.deselect(shape.id) * ``` * * @public */ deselect(...shapes: TLShape[] | TLShapeId[]): this; /** * Select all shapes. If the user has selected shapes that share a parent, * select all shapes within that parent. If the user has not selected any shapes, * or if the shapes shapes are only on select all shapes on the current page. * * @example * ```ts * editor.selectAll() * ``` * * @public */ selectAll(): this; /** * Select the next shape in the reading order or in cardinal order. * * @example * ```ts * editor.selectAdjacentShape('next') * ``` * * @public */ selectAdjacentShape(direction: TLAdjacentDirection): void; /** * Generates a reading order for shapes based on rows grouping. * Tries to keep a natural reading order (left-to-right, top-to-bottom). * * @public */ getCurrentPageShapesInReadingOrder(): TLShape[]; private _getShapesInReadingOrder; /** * Find the nearest adjacent shape in a specific direction. * * @public */ getNearestAdjacentShape(shapes: TLShape[], currentShapeId: TLShapeId, direction: 'down' | 'left' | 'right' | 'up'): TLShapeId; selectParentShape(): void; selectFirstChildShape(): void; private _selectShapesAndZoom; /** * Clear the selection. * * @example * ```ts * editor.selectNone() * ``` * * @public */ selectNone(): this; /** * The id of the editor's only selected shape. * * @returns Null if there is no shape or more than one selected shape, otherwise the selected shape's id. * * @public * @readonly */ getOnlySelectedShapeId(): null | TLShapeId; /** * The editor's only selected shape. * * @returns Null if there is no shape or more than one selected shape, otherwise the selected shape. * * @public * @readonly */ getOnlySelectedShape(): null | TLShape; /** * Get the page bounds of all the provided shapes. * * @public */ getShapesPageBounds(shapeIds: TLShapeId[]): Box | null; /** * The current page bounds of all the selected shapes. If the * selection is rotated, then these bounds are the axis-aligned * box that the rotated bounds would fit inside of. * * @readonly * * @public */ getSelectionPageBounds(): Box | null; /** * The bounds of the selection bounding box in the current page space. * * @readonly * @public */ getSelectionScreenBounds(): Box | undefined; /* Excluded from this release type: getShapesSharedRotation */ /** * The rotation of the selection bounding box in the current page space. * * @readonly * @public */ getSelectionRotation(): number; /* Excluded from this release type: getShapesRotatedPageBounds */ /** * The bounds of the selection bounding box in the current page space. * * @readonly * @public */ getSelectionRotatedPageBounds(): Box | undefined; /** * The bounds of the selection bounding box in the current page space. * * @readonly * @public */ getSelectionRotatedScreenBounds(): Box | undefined; /** * The current focused group id. * * @public */ getFocusedGroupId(): TLPageId | TLShapeId; /** * The current focused group. * * @public */ getFocusedGroup(): TLShape | undefined; /** * Set the current focused group shape. * * @param shape - The group shape id (or group shape's id) to set as the focused group shape. * * @public */ setFocusedGroup(shape: null | TLGroupShape | TLShapeId): this; /** * Exit the current focused group, moving up to the next parent group if there is one. * * @public */ popFocusedGroupId(): this; /** * The current editing shape's id. * * @public */ getEditingShapeId(): null | TLShapeId; /** * The current editing shape. * * @public */ getEditingShape(): TLShape | undefined; /** * Whether the shape can be edited. * * @param shape - The shape (or shape id) to check if it can be edited. * @param info - The info about the edit start. * * @public * @returns true if the shape can be edited, false otherwise. */ canEditShape(shape: null | T, info?: TLEditStartInfo): shape is T; /** * Set the current editing shape. * * @example * ```ts * editor.setEditingShape(myShape) * editor.setEditingShape(myShape.id) * ``` * * @param shape - The shape (or shape id) to set as editing. * * @public */ setEditingShape(shape: null | TLShape | TLShapeId): this; private _currentRichTextEditor; /** * The current editing shape's text editor. * * @public */ getRichTextEditor(): null | TiptapEditor; /** * Set the current editing shape's rich text editor. * * @example * ```ts * editor.setRichTextEditor(richTextEditorView) * ``` * * @param textEditor - The text editor to set as the current editing shape's text editor. * * @public */ setRichTextEditor(textEditor: null | TiptapEditor): this; /** * The current hovered shape id. * * @readonly * @public */ getHoveredShapeId(): null | TLShapeId; /** * The current hovered shape. * * @public */ getHoveredShape(): TLShape | undefined; /** * Set the editor's current hovered shape. * * @example * ```ts * editor.setHoveredShape(myShape) * editor.setHoveredShape(myShape.id) * ``` * * @param shape - The shape (or shape id) to set as hovered. * * @public */ setHoveredShape(shape: null | TLShape | TLShapeId): this; /** * The editor's current hinting shape ids. * * @public */ getHintingShapeIds(): TLShapeId[]; /** * The editor's current hinting shapes. * * @public */ getHintingShape(): NonNullable[]; /** * Set the editor's current hinting shapes. * * @example * ```ts * editor.setHintingShapes([myShape]) * editor.setHintingShapes([myShape.id]) * ``` * * @param shapes - The shapes (or shape ids) to set as hinting. * * @public */ setHintingShapes(shapes: TLShape[] | TLShapeId[]): this; /** * The editor's current erasing ids. * * @public */ getErasingShapeIds(): TLShapeId[]; /** * The editor's current erasing shapes. * * @public */ getErasingShapes(): NonNullable[]; /** * Set the editor's current erasing shapes. * * @example * ```ts * editor.setErasingShapes([myShape]) * editor.setErasingShapes([myShape.id]) * ``` * * @param shapes - The shapes (or shape ids) to set as hinting. * * @public */ setErasingShapes(shapes: TLShape[] | TLShapeId[]): this; /** * The current cropping shape's id. * * @public */ getCroppingShapeId(): null | TLShapeId; /** * Whether the shape can be cropped. * * @param shape - The shape (or shape id) to check if it can be cropped. * * @public * @returns true if the shape can be cropped, false otherwise. */ canCropShape(shape: null | T): shape is T; /** * Set the current cropping shape. * * @example * ```ts * editor.setCroppingShape(myShape) * editor.setCroppingShape(myShape.id) * ``` * * * @param shape - The shape (or shape id) to set as cropping. * * @public */ setCroppingShape(shape: null | TLShape | TLShapeId): this; private _textOptions; /** * Get the current text options. * * @example * ```ts * editor.getTextOptions() * ``` * * @public */ getTextOptions(): TLTextOptions; private _unsafe_getCameraId; /** * The current camera. * * @public */ getCamera(): TLCamera; private _getFollowingPresence; private getViewportPageBoundsForFollowing; private getCameraForFollowing; /** * The current camera zoom level. * * @public */ getZoomLevel(): number; /** * Get the scale factor used when creating or resizing shapes in dynamic size mode. * * @public */ getResizeScaleFactor(): number; private _debouncedZoomLevel; /** * Get the debounced zoom level. When the camera is moving, this returns the zoom level * from when the camera started moving rather than the current zoom level. This can be * used to avoid expensive re-renders during camera movements. * * This behavior is controlled by the `useDebouncedZoom` option. When `useDebouncedZoom` * is `false`, this method always returns the current zoom level. * * @public */ getDebouncedZoomLevel(): number; private _getAboveDebouncedZoomThreshold; /** * Get the efficient zoom level. This returns the current zoom level if there are less than a certain number of shapes on the page, * otherwise it returns the debounced zoom level. This can be used to avoid expensive re-renders during camera movements. * * @public * @example * ```ts * editor.getEfficientZoomLevel() * ``` * * @public */ getEfficientZoomLevel(): number; /** * Get the camera's initial or reset zoom level. * * @example * ```ts * editor.getInitialZoom() * ``` * * @public */ getInitialZoom(): number; /** * Get the camera's base level for calculating actual zoom levels based on the zoom steps. * * @example * ```ts * editor.getBaseZoom() * ``` * * @public */ getBaseZoom(): number; private _cameraOptions; /** * Get the current camera options. * * @example * ```ts * editor.getCameraOptions() * ``` * * @public */ getCameraOptions(): TLCameraOptions; /** * Set the camera options. Changing the options won't immediately change the camera itself, so you may want to call `setCamera` after changing the options. * * @example * ```ts * editor.setCameraOptions(myCameraOptions) * editor.setCamera(editor.getCamera()) * ``` * * @param opts - The camera options to set. * * @public */ setCameraOptions(opts: Partial): this; /* Excluded from this release type: getConstrainedCamera */ /* Excluded from this release type: _setCamera */ /** * Set the current camera. * * @example * ```ts * editor.setCamera({ x: 0, y: 0}) * editor.setCamera({ x: 0, y: 0, z: 1.5}) * editor.setCamera({ x: 0, y: 0, z: 1.5}, { animation: { duration: 1000, easing: (t) => t * t } }) * ``` * * @param point - The new camera position. * @param opts - The camera move options. * * @public */ setCamera(point: VecLike, opts?: TLCameraMoveOptions): this; /** * Center the camera on a point (in the current page space). * * @example * ```ts * editor.centerOnPoint({ x: 100, y: 100 }) * editor.centerOnPoint({ x: 100, y: 100 }, { animation: { duration: 200 } }) * ``` * * @param point - The point in the current page space to center on. * @param opts - The camera move options. * * @public */ centerOnPoint(point: VecLike, opts?: TLCameraMoveOptions): this; /** * Zoom the camera to fit the current page's content in the viewport. * * @example * ```ts * editor.zoomToFit() * editor.zoomToFit({ animation: { duration: 200 } }) * ``` * * @param opts - The camera move options. * * @public */ zoomToFit(opts?: TLCameraMoveOptions): this; /** * Set the zoom back to 100%. * * @example * ```ts * editor.resetZoom() * editor.resetZoom(editor.getViewportScreenCenter(), { animation: { duration: 200 } }) * editor.resetZoom(editor.getViewportScreenCenter(), { animation: { duration: 200 } }) * ``` * * @param point - The screen point to zoom out on. Defaults to the viewport screen center. * @param opts - The camera move options. * * @public */ resetZoom(point?: Vec, opts?: TLCameraMoveOptions): this; /** * Zoom the camera in. * * @example * ```ts * editor.zoomIn() * editor.zoomIn(editor.getViewportScreenCenter(), { animation: { duration: 200 } }) * editor.zoomIn(editor.inputs.getCurrentScreenPoint(), { animation: { duration: 200 } }) * ``` * * @param point - The screen point to zoom in on. Defaults to the screen center * @param opts - The camera move options. * * @public */ zoomIn(point?: Vec, opts?: TLCameraMoveOptions): this; /** * Zoom the camera out. * * @example * ```ts * editor.zoomOut() * editor.zoomOut(editor.getViewportScreenCenter(), { animation: { duration: 120 } }) * editor.zoomOut(editor.inputs.getCurrentScreenPoint(), { animation: { duration: 120 } }) * ``` * * @param point - The point to zoom out on. Defaults to the viewport screen center. * @param opts - The camera move options. * * @public */ zoomOut(point?: Vec, opts?: TLCameraMoveOptions): this; /** * Zoom the camera to fit the current selection in the viewport. * * @example * ```ts * editor.zoomToSelection() * editor.zoomToSelection({ animation: { duration: 200 } }) * ``` * * @param opts - The camera move options. * * @public */ zoomToSelection(opts?: TLCameraMoveOptions): this; /** * Zoom the camera to the current selection if offscreen. * * @public */ zoomToSelectionIfOffscreen(padding?: number, opts?: { inset?: number; targetZoom?: number; } & TLCameraMoveOptions): void; /** * Zoom the camera to fit a bounding box (in the current page space). * * @example * ```ts * editor.zoomToBounds(myBounds) * editor.zoomToBounds(myBounds, { animation: { duration: 200 } }) * editor.zoomToBounds(myBounds, { animation: { duration: 200 }, inset: 0, targetZoom: 1 }) * ``` * * @param bounds - The bounding box. * @param opts - The camera move options, target zoom, or custom inset amount. * * @public */ zoomToBounds(bounds: BoxLike, opts?: { inset?: number; targetZoom?: number; } & TLCameraMoveOptions): this; /** * Stop the current camera animation, if any. * * @example * ```ts * editor.stopCameraAnimation() * ``` * * @public */ stopCameraAnimation(): this; /* Excluded from this release type: _viewportAnimation */ /* Excluded from this release type: _animateViewport */ /* Excluded from this release type: _animateToViewport */ /** * Slide the camera in a certain direction. * * @example * ```ts * editor.slideCamera({ speed: 1, direction: { x: 1, y: 0 }, friction: 0.1 }) * ``` * * @param opts - Options for the slide * @public */ slideCamera(opts?: { direction: VecLike; force?: boolean | undefined; friction?: number | undefined; speed: number; speedThreshold?: number | undefined; }): this; /** * Animate the camera to a user's cursor position. This also briefly show the user's cursor if it's not currently visible. * * @example * ```ts * editor.zoomToUser(myUserId) * editor.zoomToUser(myUserId, { animation: { duration: 200 } }) * ``` * * @param userId - The id of the user to animate to. * @param opts - The camera move options. * @public */ zoomToUser(userId: string, opts?: TLCameraMoveOptions): this; /* Excluded from this release type: _willSetInitialBounds */ /** * Update the viewport. The viewport will measure the size and screen position of its container * element. This should be done whenever the container's position on the screen changes. * * @example * ```ts * editor.updateViewportScreenBounds(new Box(0, 0, 1280, 1024)) * editor.updateViewportScreenBounds(new Box(0, 0, 1280, 1024), true) * ``` * * @param screenBounds - The new screen bounds of the viewport. * @param center - Whether to preserve the viewport page center as the viewport changes. * * @public */ updateViewportScreenBounds(screenBounds: Box | HTMLElement, center?: boolean): this; /** * The bounds of the editor's viewport in screen space. * * @public */ getViewportScreenBounds(): Box; /** * The center of the editor's viewport in screen space. * * @public */ getViewportScreenCenter(): Vec; /** * The current viewport in the current page space. * * @public */ getViewportPageBounds(): Box; /** * Convert a point in screen space to a point in the current page space. * * @example * ```ts * editor.screenToPage({ x: 100, y: 100 }) * ``` * * @param point - The point in screen space. * * @public */ screenToPage(point: VecLike): Vec; /** * Convert a point in the current page space to a point in current screen space. * * @example * ```ts * editor.pageToScreen({ x: 100, y: 100 }) * ``` * * @param point - The point in page space. * * @public */ pageToScreen(point: VecLike): Vec; /** * Convert a point in the current page space to a point in current viewport space. * * @example * ```ts * editor.pageToViewport({ x: 100, y: 100 }) * ``` * * @param point - The point in page space. * * @public */ pageToViewport(point: VecLike): Vec; private _getCollaboratorsQuery; /** * Returns a list of presence records for all peer collaborators. * This will return the latest presence record for each connected user. * * @public */ getCollaborators(): TLInstancePresence[]; /** * Returns a list of presence records for all peer collaborators on the current page. * This will return the latest presence record for each connected user. * * @public */ getCollaboratorsOnCurrentPage(): TLInstancePresence[]; private _isLockedOnFollowingUser; /** * Start viewport-following a user. * * @example * ```ts * editor.startFollowingUser(myUserId) * ``` * * @param userId - The id of the user to follow. * * @public */ startFollowingUser(userId: string): this; /** * Stop viewport-following a user. * * @example * ```ts * editor.stopFollowingUser() * ``` * @public */ stopFollowingUser(): this; /* Excluded from this release type: getUnorderedRenderingShapes */ private _cameraStateTimeoutRemaining; private _decayCameraStateTimeout; private _tickCameraState; private _setCameraState; /** * Whether the camera is moving or idle. * * @example * ```ts * editor.getCameraState() * ``` * * @public */ getCameraState(): "idle" | "moving"; /** * Get the shapes that should be displayed in the current viewport. * * @example * ```ts * editor.getRenderingShapes() * ``` * * @public */ getRenderingShapes(): TLRenderingShape[]; private _getAllPagesQuery; /** * Info about the project's current pages. * * @example * ```ts * editor.getPages() * ``` * * @public */ getPages(): TLPage[]; /** * The current page. * * @example * ```ts * editor.getCurrentPage() * ``` * * @public */ getCurrentPage(): TLPage; /** * The current page id. * * @example * ```ts * editor.getCurrentPageId() * ``` * * @public */ getCurrentPageId(): TLPageId; /** * Get a page. * * @example * ```ts * editor.getPage(myPage.id) * editor.getPage(myPage) * ``` * * @param page - The page (or the page id) to get. * * @public */ getPage(page: TLPage | TLPageId): TLPage | undefined; private readonly _currentPageShapeIds; /** * An array of all of the shapes on the current page. * * @example * ```ts * editor.getCurrentPageIds() * ``` * * @public */ getCurrentPageShapeIds(): Set; /* Excluded from this release type: getCurrentPageShapeIdsSorted */ /** * Get the ids of shapes on a page. * * @example * ```ts * const idsOnPage1 = editor.getPageShapeIds('page1') * const idsOnPage2 = editor.getPageShapeIds(myPage2) * ``` * * @param page - The page (or the page id) to get the shape ids for. * * @public **/ getPageShapeIds(page: TLPage | TLPageId): Set; /** * Set the current page. * * @example * ```ts * editor.setCurrentPage('page1') * editor.setCurrentPage(myPage1) * ``` * * @param page - The page (or the page id) to set as the current page. * * @public */ setCurrentPage(page: TLPage | TLPageId): this; /** * Update a page. * * @example * ```ts * editor.updatePage({ id: 'page2', name: 'Page 2' }) * ``` * * @param partial - The partial of the shape to update. * * @public */ updatePage(partial: RequiredKeys, 'id'>): this; /** * Create a page whilst ensuring that the page name is unique. * * @example * ```ts * editor.createPage(myPage) * editor.createPage({ name: 'Page 2' }) * ``` * * @param page - The page (or page partial) to create. * * @public */ createPage(page: Partial): this; /** * Delete a page. * * @example * ```ts * editor.deletePage('page1') * ``` * * @param page - The page (or the page id) to delete. * * @public */ deletePage(page: TLPage | TLPageId): this; /** * Duplicate a page. * * @param page - The page (or the page id) to duplicate. Defaults to the current page. * @param createId - The id of the new page. Defaults to a new id. * * @public */ duplicatePage(page: TLPage | TLPageId, createId?: TLPageId): this; /** * Rename a page. * * @example * ```ts * editor.renamePage('page1', 'My Page') * ``` * * @param page - The page (or the page id) to rename. * @param name - The new name. * * @public */ renamePage(page: TLPage | TLPageId, name: string): this; private _getAllAssetsQuery; /** * Get all assets in the editor. * * @public */ getAssets(): (TLBookmarkAsset | TLImageAsset | TLVideoAsset)[]; /** * Create one or more assets. * * @example * ```ts * editor.createAssets([...myAssets]) * ``` * * @param assets - The assets to create. * * @public */ createAssets(assets: TLAsset[]): this; /** * Update one or more assets. * * @example * ```ts * editor.updateAssets([{ id: 'asset1', name: 'New name' }]) * ``` * * @param assets - The assets to update. * * @public */ updateAssets(assets: TLAssetPartial[]): this; /** * Delete one or more assets. * * @example * ```ts * editor.deleteAssets(['asset1', 'asset2']) * ``` * * @param assets - The assets (or asset ids) to delete. * * @public */ deleteAssets(assets: TLAsset[] | TLAssetId[]): this; /** * Get an asset by its id. * * @example * ```ts * editor.getAsset('asset1') * ``` * * @param asset - The asset (or asset id) to get. * * @public */ getAsset(asset: T | T['id']): T | undefined; resolveAssetUrl(assetId: null | TLAssetId, context: { dpr?: number; screenScale?: number; shouldResolveToOriginal?: boolean; }): Promise; /** * Upload an asset to the store's asset service, returning a URL that can be used to resolve the * asset. */ uploadAsset(asset: TLAsset, file: File, abortSignal?: AbortSignal): Promise<{ meta?: JsonObject; src: string; }>; private _shapeGeometryCaches; /** * Get the geometry of a shape in shape-space. * * @example * ```ts * editor.getShapeGeometry(myShape) * editor.getShapeGeometry(myShapeId) * editor.getShapeGeometry(myShapeId, { context: "arrow" }) * ``` * * @param shape - The shape (or shape id) to get the geometry for. * @param opts - Additional options about the request for geometry. Passed to {@link ShapeUtil.getGeometry}. * * @public */ getShapeGeometry(shape: TLShape | TLShapeId, opts?: TLGeometryOpts): T; private _getShapeHandlesCache; /** * Get the handles (if any) for a shape. * * @example * ```ts * editor.getShapeHandles(myShape) * editor.getShapeHandles(myShapeId) * ``` * * @param shape - The shape (or shape id) to get the handles for. * @public */ getShapeHandles(shape: T | T['id']): TLHandle[] | undefined; /** * Get the local transform for a shape as a matrix model. This transform reflects both its * translation (x, y) from from either its parent's top left corner, if the shape's parent is * another shape, or else from the 0,0 of the page, if the shape's parent is the page; and the * shape's rotation. * * @example * ```ts * editor.getShapeLocalTransform(myShape) * ``` * * @param shape - The shape to get the local transform for. * * @public */ getShapeLocalTransform(shape: TLShape | TLShapeId): Mat; private _getShapePageTransformCache; /** * Get the local transform of a shape's parent as a matrix model. * * @example * ```ts * editor.getShapeParentTransform(myShape) * ``` * * @param shape - The shape (or shape id) to get the parent transform for. * * @public */ getShapeParentTransform(shape: TLShape | TLShapeId): Mat; /** * Get the transform of a shape in the current page space. * * @example * ```ts * editor.getShapePageTransform(myShape) * editor.getShapePageTransform(myShapeId) * ``` * * @param shape - The shape (or shape id) to get the page transform for. * * @public */ getShapePageTransform(shape: TLShape | TLShapeId): Mat; private _getShapePageBoundsCache; /** * Get the bounds of a shape in the current page space. * * @example * ```ts * editor.getShapePageBounds(myShape) * editor.getShapePageBounds(myShapeId) * ``` * * @param shape - The shape (or shape id) to get the bounds for. * * @public */ getShapePageBounds(shape: TLShape | TLShapeId): Box | undefined; private _getShapeClipPathCache; /** * Get the clip path for a shape. * * @example * ```ts * const clipPath = editor.getShapeClipPath(shape) * const clipPath = editor.getShapeClipPath(shape.id) * ``` * * @param shape - The shape (or shape id) to get the clip path for. * * @returns The clip path or undefined. * * @public */ getShapeClipPath(shape: TLShape | TLShapeId): string | undefined; private _getShapeMaskCache; /** * Get the mask (in the current page space) for a shape. * * @example * ```ts * const pageMask = editor.getShapeMask(shape.id) * ``` * * @param shape - The shape (or the shape id) of the shape to get the mask for. * * @returns The mask for the shape. * * @public */ getShapeMask(shape: TLShape | TLShapeId): undefined | VecLike[]; /** * Get the bounds of a shape in the current page space, incorporating any masks. For example, if the * shape were the child of a frame and was half way out of the frame, the bounds would be the half * of the shape that was in the frame. * * @example * ```ts * editor.getShapeMaskedPageBounds(myShape) * editor.getShapeMaskedPageBounds(myShapeId) * ``` * * @param shape - The shape to get the masked bounds for. * * @public */ getShapeMaskedPageBounds(shape: TLShape | TLShapeId): Box | undefined; private _getShapeMaskedPageBoundsCache; /** * Get the ancestors of a shape. * * @example * ```ts * const ancestors = editor.getShapeAncestors(myShape) * const ancestors = editor.getShapeAncestors(myShapeId) * ``` * * @param shape - The shape (or shape id) to get the ancestors for. * @param acc - The accumulator. * * @public */ getShapeAncestors(shape: TLShape | TLShapeId, acc?: TLShape[]): TLShape[]; /** * Find the first ancestor matching the given predicate * * @example * ```ts * const ancestor = editor.findShapeAncestor(myShape) * const ancestor = editor.findShapeAncestor(myShape.id) * const ancestor = editor.findShapeAncestor(myShape.id, (shape) => shape.type === 'frame') * ``` * * @param shape - The shape to check the ancestors for. * @param predicate - The predicate to match. * * @public */ findShapeAncestor(shape: TLShape | TLShapeId, predicate: (parent: TLShape) => boolean): TLShape | undefined; /** * Returns true if the the given shape has the given ancestor. * * @param shape - The shape. * @param ancestorId - The id of the ancestor. * * @public */ hasAncestor(shape: TLShape | TLShapeId | undefined, ancestorId: TLShapeId): boolean; /** * Get the common ancestor of two or more shapes that matches a predicate. * * @param shapes - The shapes (or shape ids) to check. * @param predicate - The predicate to match. */ findCommonAncestor(shapes: TLShape[] | TLShapeId[], predicate?: (shape: TLShape) => boolean): TLShapeId | undefined; /** * Check whether a shape or its parent is locked. * * @param shape - The shape (or shape id) to check. * * @public */ isShapeOrAncestorLocked(shape?: TLShape | TLShapeId): boolean; /** * Get shapes that are outside of the viewport. * * @public */ getNotVisibleShapes(): Set; private _notVisibleShapes; private _culledShapesCache; /** * Get culled shapes (those that should not render), taking into account which shapes are selected or editing. * * @public */ getCulledShapes(): Set; /** * The bounds of the current page (the common bounds of all of the shapes on the page). * * @public */ getCurrentPageBounds(): Box | undefined; /** * Get the top-most selected shape at the given point, ignoring groups. * * @param point - The point to check. * * @returns The top-most selected shape at the given point, or undefined if there is no shape at the point. */ getSelectedShapeAtPoint(point: VecLike): TLShape | undefined; /** * Get the shape at the current point. * * @param point - The point to check. * @param opts - Options for the check: `hitInside` to check if the point is inside the shape, `margin` to check if the point is within a margin of the shape, `hitFrameInside` to check if the point is inside the frame, and `filter` to filter the shapes to check. * * @returns The shape at the given point, or undefined if there is no shape at the point. */ getShapeAtPoint(point: VecLike, opts?: TLGetShapeAtPointOptions): TLShape | undefined; /** * Get the shapes, if any, at a given page point. * * @example * ```ts * editor.getShapesAtPoint({ x: 100, y: 100 }) * editor.getShapesAtPoint({ x: 100, y: 100 }, { hitInside: true, margin: 8 }) * ``` * * @param point - The page point to test. * @param opts - The options for the hit point testing. * * @returns An array of shapes at the given point, sorted in reverse order of their absolute z-index (top-most shape first). * * @public */ getShapesAtPoint(point: VecLike, opts?: { hitInside?: boolean | undefined; margin?: number | undefined; }): TLShape[]; /** * Get shape IDs within the given bounds. * * Note: Uses shape page bounds only. Frames with labels outside their bounds * may not be included even if the label is within the search bounds. * * Note: Results are unordered. If you need z-order, combine with sorted shapes: * ```ts * const candidates = editor.getShapeIdsInsideBounds(bounds) * const sorted = editor.getCurrentPageShapesSorted().filter(s => candidates.has(s.id)) * ``` * * @param bounds - The bounds to search within. * @returns Unordered set of shape IDs within the given bounds. * * @public */ getShapeIdsInsideBounds(bounds: Box): Set; /** * Test whether a point (in the current page space) will will a shape. This method takes into account masks, * such as when a shape is the child of a frame and is partially clipped by the frame. * * @example * ```ts * editor.isPointInShape({ x: 100, y: 100 }, myShape) * ``` * * @param shape - The shape to test against. * @param point - The page point to test (in the current page space). * @param opts - The options for the hit point testing. * * @public */ isPointInShape(shape: TLShape | TLShapeId, point: VecLike, opts?: { hitInside?: boolean | undefined; margin?: number | undefined; }): boolean; /** * Convert a point in the current page space to a point in the local space of a shape. For example, if a * shape's page point were `{ x: 100, y: 100 }`, a page point at `{ x: 110, y: 110 }` would be at * `{ x: 10, y: 10 }` in the shape's local space. * * @example * ```ts * editor.getPointInShapeSpace(myShape, { x: 100, y: 100 }) * ``` * * @param shape - The shape to get the point in the local space of. * @param point - The page point to get in the local space of the shape. * * @public */ getPointInShapeSpace(shape: TLShape | TLShapeId, point: VecLike): Vec; /** * Convert a delta in the current page space to a point in the local space of a shape's parent. * * @example * ```ts * editor.getPointInParentSpace(myShape.id, { x: 100, y: 100 }) * ``` * * @param shape - The shape to get the point in the local space of. * @param point - The page point to get in the local space of the shape. * * @public */ getPointInParentSpace(shape: TLShape | TLShapeId, point: VecLike): Vec; /** * An array containing all of the shapes in the current page. * * @public */ getCurrentPageShapes(): TLShape[]; /** * An array containing all of the shapes in the current page, sorted in z-index order (accounting * for nested shapes): e.g. A, B, BA, BB, C. * * @public */ getCurrentPageShapesSorted(): TLShape[]; /** * An array containing all of the rendering shapes in the current page, sorted in z-index order (accounting * for nested shapes): e.g. A, B, BA, BB, C. * * @public */ getCurrentPageRenderingShapesSorted(): TLShape[]; /** * Get whether a shape matches the type of a TLShapeUtil. * * @example * ```ts * const isArrowShape = isShapeOfType(someShape, 'arrow') * ``` * * @param util - the TLShapeUtil constructor to test against * @param shape - the shape to test * * @public */ isShapeOfType(shape: TLShape, type: K): shape is Extract; isShapeOfType(shape: TLShape, type: T['type']): shape is Extract; isShapeOfType(shapeId: TLShapeId, type: T['type']): boolean; /** * Get a shape by its id. * * @example * ```ts * editor.getShape('box1') * ``` * * @param shape - The shape (or the id of the shape) to get. * * @public */ getShape(shape: TLParentId | TLShape): T | undefined; /** * Get the parent shape for a given shape. Returns undefined if the shape is the direct child of * the page. * * @example * ```ts * editor.getShapeParent(myShape) * ``` * * @public */ getShapeParent(shape?: TLShape | TLShapeId): TLShape | undefined; /* Excluded from this release type: getShapeNearestSibling */ /** * Get whether the given shape is the descendant of the given page. * * @example * ```ts * editor.isShapeInPage(myShape) * editor.isShapeInPage(myShape, 'page1') * ``` * * @param shape - The shape to check. * @param pageId - The id of the page to check against. Defaults to the current page. * * @public */ isShapeInPage(shape: TLShape | TLShapeId, pageId?: TLPageId): boolean; /** * Get the id of the containing page for a given shape. * * @param shape - The shape to get the page id for. * * @returns The id of the page that contains the shape, or undefined if the shape is undefined. * * @public */ getAncestorPageId(shape?: TLShape | TLShapeId): TLPageId | undefined; /* Excluded from this release type: _parentIdsToChildIds */ /** * Reparent shapes to a new parent. This operation preserves the shape's current page positions / * rotations. * * @example * ```ts * editor.reparentShapes([box1, box2], 'frame1') * editor.reparentShapes([box1.id, box2.id], 'frame1') * editor.reparentShapes([box1.id, box2.id], 'frame1', 4) * ``` * * @param shapes - The shapes (or shape ids) of the shapes to reparent. * @param parentId - The id of the new parent shape. * @param insertIndex - The index to insert the children. * * @public */ reparentShapes(shapes: TLShape[] | TLShapeId[], parentId: TLParentId, insertIndex?: IndexKey): this; /** * Get the index above the highest child of a given parent. * * @param parent - The parent (or the id) of the parent. * * @returns The index. * * @public */ getHighestIndexForParent(parent: TLPage | TLParentId | TLShape): IndexKey; /** * Get an array of all the children of a shape. * * @example * ```ts * editor.getSortedChildIdsForParent('frame1') * ``` * * @param parent - The parent (or the id) of the parent shape. * * @public */ getSortedChildIdsForParent(parent: TLPage | TLParentId | TLShape): TLShapeId[]; /** * Run a visitor function for all descendants of a shape. * * @example * ```ts * editor.visitDescendants('frame1', myCallback) * ``` * * @param parent - The parent (or the id) of the parent shape. * @param visitor - The visitor function. * * @public */ visitDescendants(parent: TLPage | TLParentId | TLShape, visitor: (id: TLShapeId) => false | void): this; /** * Get the shape ids of all descendants of the given shapes (including the shapes themselves). IDs are returned in z-index order. * * @param ids - The ids of the shapes to get descendants of. * * @returns The descendant ids. * * @public */ getShapeAndDescendantIds(ids: TLShapeId[]): Set; /** * Get the shape that some shapes should be dropped on at a given point. * * @param point - The point to find the parent for. * @param droppingShapes - The shapes that are being dropped. * * @returns The shape to drop on. * * @public */ getDraggingOverShape(point: Vec, droppingShapes: TLShape[]): TLShape | undefined; /** * Get the shape that should be selected when you click on a given shape, assuming there is * nothing already selected. It will not return anything higher than or including the current * focus layer. * * @param shape - The shape to get the outermost selectable shape for. * @param filter - A function to filter the selectable shapes. * * @returns The outermost selectable shape. * * @public */ getOutermostSelectableShape(shape: TLShape | TLShapeId, filter?: (shape: TLShape) => boolean): TLShape; private _getBindingsIndexCache; /** * Get a binding from the store by its ID if it exists. */ getBinding(id: TLBindingId): TLBinding | undefined; /** * Get all bindings of a certain type _from_ a particular shape. These are the bindings whose * `fromId` matched the shape's ID. */ getBindingsFromShape(shape: TLShape | TLShapeId, type: K): Extract[]; getBindingsFromShape(shape: TLShape | TLShapeId, type: Binding['type']): Binding[]; /** * Get all bindings of a certain type _to_ a particular shape. These are the bindings whose * `toId` matches the shape's ID. */ getBindingsToShape(shape: TLShape | TLShapeId, type: K): Extract[]; getBindingsToShape(shape: TLShape | TLShapeId, type: Binding['type']): Binding[]; /** * Get all bindings involving a particular shape. This includes bindings where the shape is the * `fromId` or `toId`. If a type is provided, only bindings of that type are returned. */ getBindingsInvolvingShape(shape: TLShape | TLShapeId, type: K): Extract[]; getBindingsInvolvingShape(shape: TLShape | TLShapeId, type?: Binding['type']): Binding[]; /** * Create bindings from a list of partial bindings. You can omit the ID and most props of a * binding, but the `type`, `toId`, and `fromId` must all be provided. */ createBindings(partials: TLBindingCreate[]): this; /** * Create a single binding from a partial. You can omit the ID and most props of a binding, but * the `type`, `toId`, and `fromId` must all be provided. */ createBinding(partial: TLBindingCreate): this; /** * Update bindings from a list of partial bindings. Each partial must include an ID, which will * be used to match the binding to it's existing record. If there is no existing record, that * binding is skipped. The changes from the partial are merged into the existing record. */ updateBindings(partials: (null | TLBindingUpdate | undefined)[]): this; /** * Update a binding from a partial binding. Each partial must include an ID, which will be used * to match the binding to it's existing record. If there is no existing record, that binding is * skipped. The changes from the partial are merged into the existing record. */ updateBinding(partial: TLBindingUpdate): this; /** * Delete several bindings by their IDs. If a binding ID doesn't exist, it's ignored. */ deleteBindings(bindings: (TLBinding | TLBindingId)[], { isolateShapes }?: { isolateShapes?: boolean | undefined; }): this; /** * Delete a binding by its ID. If the binding doesn't exist, it's ignored. */ deleteBinding(binding: TLBinding | TLBindingId, opts?: Parameters[1]): this; canBindShapes({ fromShape, toShape, binding }: { binding: { type: TLBinding['type']; } | TLBinding | TLBinding['type']; fromShape: { type: TLShape['type']; } | TLShape | TLShape['type']; toShape: { type: TLShape['type']; } | TLShape | TLShape['type']; }): boolean; /** * Rotate shapes by a delta in radians. * * @example * ```ts * editor.rotateShapesBy(editor.getSelectedShapeIds(), Math.PI) * editor.rotateShapesBy(editor.getSelectedShapeIds(), Math.PI / 2) * ``` * * @param shapes - The shapes (or shape ids) of the shapes to move. * @param delta - The delta in radians to apply to the selection rotation. * @param opts - The options for the rotation. */ rotateShapesBy(shapes: TLShape[] | TLShapeId[], delta: number, opts?: { center?: VecLike; }): this; private getChangesToTranslateShape; /** * Move shapes by a delta. * * @example * ```ts * editor.nudgeShapes(['box1', 'box2'], { x: 8, y: 8 }) * ``` * * @param shapes - The shapes (or shape ids) to move. * @param offset - The offset to apply to the shapes. */ nudgeShapes(shapes: TLShape[] | TLShapeId[], offset: VecLike): this; /** * Duplicate shapes. * * @example * ```ts * editor.duplicateShapes(['box1', 'box2'], { x: 8, y: 8 }) * editor.duplicateShapes(editor.getSelectedShapes(), { x: 8, y: 8 }) * ``` * * @param shapes - The shapes (or shape ids) to duplicate. * @param offset - The offset (in pixels) to apply to the duplicated shapes. * * @public */ duplicateShapes(shapes: TLShape[] | TLShapeId[], offset?: VecLike): this; /** * Move shapes to page. * * @example * ```ts * editor.moveShapesToPage(['box1', 'box2'], 'page1') * ``` * * @param shapes - The shapes (or shape ids) of the shapes to move. * @param pageId - The id of the page where the shapes will be moved. * * @public */ moveShapesToPage(shapes: TLShape[] | TLShapeId[], pageId: TLPageId): this; /** * Toggle the lock state of one or more shapes. If there is a mix of locked and unlocked shapes, all shapes will be locked. * * @param shapes - The shapes (or shape ids) to toggle. * * @public */ toggleLock(shapes: TLShape[] | TLShapeId[]): this; /** * Send shapes to the back of the page's object list. * * @example * ```ts * editor.sendToBack(['id1', 'id2']) * editor.sendToBack(box1, box2) * ``` * * @param shapes - The shapes (or shape ids) to move. * * @public */ sendToBack(shapes: TLShape[] | TLShapeId[]): this; /** * Send shapes backward in the page's object list. * * @example * ```ts * editor.sendBackward(['id1', 'id2']) * editor.sendBackward([box1, box2]) * ``` * * By default, the operation will only consider overlapping shapes. * To consider all shapes, pass `{ considerAllShapes: true }` in the options. * * @example * ```ts * editor.sendBackward(['id1', 'id2'], { considerAllShapes: true }) * ``` * * @param shapes - The shapes (or shape ids) to move. * @param opts - The options for the backward operation. * * @public */ sendBackward(shapes: TLShape[] | TLShapeId[], opts?: { considerAllShapes?: boolean; }): this; /** * Bring shapes forward in the page's object list. * * @example * ```ts * editor.bringForward(['id1', 'id2']) * editor.bringForward(box1, box2) * ``` * * By default, the operation will only consider overlapping shapes. * To consider all shapes, pass `{ considerAllShapes: true }` in the options. * * @example * ```ts * editor.bringForward(['id1', 'id2'], { considerAllShapes: true }) * ``` * * @param shapes - The shapes (or shape ids) to move. * @param opts - The options for the forward operation. * * @public */ bringForward(shapes: TLShape[] | TLShapeId[], opts?: { considerAllShapes?: boolean; }): this; /** * Bring shapes to the front of the page's object list. * * @example * ```ts * editor.bringToFront(['id1', 'id2']) * editor.bringToFront([box1, box2]) * ``` * * @param shapes - The shapes (or shape ids) to move. * * @public */ bringToFront(shapes: TLShape[] | TLShapeId[]): this; /* Excluded from this release type: getShapeClusters */ /* Excluded from this release type: collectShapesViaArrowBindings */ /** * Flip shape positions. * * @example * ```ts * editor.flipShapes([box1, box2], 'horizontal', 32) * editor.flipShapes(editor.getSelectedShapeIds(), 'horizontal', 32) * ``` * * @param shapes - The ids of the shapes to flip. * @param operation - Whether to flip horizontally or vertically. * * @public */ flipShapes(shapes: TLShape[] | TLShapeId[], operation: 'horizontal' | 'vertical'): this; /** * Stack shape. * * @example * ```ts * editor.stackShapes([box1, box2], 'horizontal') * editor.stackShapes(editor.getSelectedShapeIds(), 'horizontal') * ``` * * @param shapes - The shapes (or shape ids) to stack. * @param operation - Whether to stack horizontally or vertically. * @param gap - The gap to leave between shapes. By default, uses the editor's `adjacentShapeMargin` option. * * @public */ stackShapes(shapes: TLShape[] | TLShapeId[], operation: 'horizontal' | 'vertical', gap?: number): this; /** * Pack shapes into a grid centered on their current position. Based on potpack (https://github.com/mapbox/potpack). * * @example * ```ts * editor.packShapes([box1, box2]) * editor.packShapes(editor.getSelectedShapeIds(), 32) * ``` * * * @param shapes - The shapes (or shape ids) to pack. * @param gap - The padding to apply to the packed shapes. Defaults to the editor's `adjacentShapeMargin` option. */ packShapes(shapes: TLShape[] | TLShapeId[], _gap?: number): this; /** * Align shape positions. * * @example * ```ts * editor.alignShapes([box1, box2], 'left') * editor.alignShapes(editor.getSelectedShapeIds(), 'left') * ``` * * @param shapes - The shapes (or shape ids) to align. * @param operation - The align operation to apply. * * @public */ alignShapes(shapes: TLShape[] | TLShapeId[], operation: 'bottom' | 'center-horizontal' | 'center-vertical' | 'left' | 'right' | 'top'): this; /** * Distribute shape positions. * * @example * ```ts * editor.distributeShapes([box1, box2], 'horizontal') * editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal') * ``` * * @param shapes - The shapes (or shape ids) to distribute. * @param operation - Whether to distribute shapes horizontally or vertically. * * @public */ distributeShapes(shapes: TLShape[] | TLShapeId[], operation: 'horizontal' | 'vertical'): this; /** * Stretch shape sizes and positions to fill their common bounding box. * * @example * ```ts * editor.stretchShapes([box1, box2], 'horizontal') * editor.stretchShapes(editor.getSelectedShapeIds(), 'horizontal') * ``` * * @param shapes - The shapes (or shape ids) to stretch. * @param operation - Whether to stretch shapes horizontally or vertically. * * @public */ stretchShapes(shapes: TLShape[] | TLShapeId[], operation: 'horizontal' | 'vertical'): this; /** * Resize and reposition a set of shapes so that their combined page bounds matches the given * target bounds. * * @example * ```ts * editor.resizeToBounds([box1, box2], { x: 0, y: 0, w: 500, h: 500 }) * editor.resizeToBounds(editor.getSelectedShapeIds(), new Box(0, 0, 500, 500)) * ``` * * @param shapes - The shapes (or shape ids) to resize. * @param bounds - The target bounding box. * * @public */ resizeToBounds(shapes: TLShape[] | TLShapeId[], bounds: BoxLike): this; /** * Resize a shape. * * @param shape - The shape (or the shape id of the shape) to resize. * @param scale - The scale factor to apply to the shape. * @param opts - Additional options. * * @public */ resizeShape(shape: TLShape | TLShapeId, scale: VecLike, opts?: TLResizeShapeOptions): this; /* Excluded from this release type: _scalePagePoint */ /* Excluded from this release type: _resizeUnalignedShape */ /** * Get the initial meta value for a shape. * * @example * ```ts * editor.getInitialMetaForShape = (shape) => { * if (shape.type === 'note') { * return { createdBy: myCurrentUser.id } * } * } * ``` * * @param shape - The shape to get the initial meta for. * * @public */ getInitialMetaForShape(_shape: TLShape): JsonObject; /** * Get whether the provided shape can be created. * * @param shape - The shape or shape IDs to check. * * @public */ canCreateShape(shape: OptionalKeys, 'id'> | TLShape['id']): boolean; /** * Get whether the provided shapes can be created. * * @param shapes - The shapes or shape IDs to create. * * @public */ canCreateShapes(shapes: (OptionalKeys, 'id'> | TLShape['id'])[]): boolean; /** * Create a single shape. * * @example * ```ts * editor.createShape(myShape) * editor.createShape({ id: 'box1', type: 'text', props: { richText: toRichText("ok") } }) * ``` * * @param shape - The shape (or shape partial) to create. * * @public */ createShape(shape: TLCreateShapePartial): this; /** * Create shapes. * * @example * ```ts * editor.createShapes([myShape]) * editor.createShapes([{ id: 'box1', type: 'text', props: { richText: toRichText("ok") } }]) * ``` * * @param shapes - The shapes (or shape partials) to create. * * @public */ createShapes(shapes: TLCreateShapePartial[]): this; private animatingShapes; /** * Animate a shape. * * @example * ```ts * editor.animateShape({ id: 'box1', type: 'box', x: 100, y: 100 }) * editor.animateShape({ id: 'box1', type: 'box', x: 100, y: 100 }, { animation: { duration: 100, ease: t => t*t } }) * ``` * * @param partial - The shape partial to update. * @param opts - The animation's options. * * @public */ animateShape(partial: null | TLShapePartial | undefined, opts?: TLCameraMoveOptions): this; /** * Animate shapes. * * @example * ```ts * editor.animateShapes([{ id: 'box1', type: 'box', x: 100, y: 100 }]) * editor.animateShapes([{ id: 'box1', type: 'box', x: 100, y: 100 }], { animation: { duration: 100, ease: t => t*t } }) * ``` * * @param partials - The shape partials to update. * @param opts - The animation's options. * * @public */ animateShapes(partials: (null | TLShapePartial | undefined)[], opts?: TLCameraMoveOptions): this; /** * Create a group containing the provided shapes. * * @example * ```ts * editor.groupShapes([myShape, myOtherShape]) * editor.groupShapes([myShape, myOtherShape], { groupId: myGroupId, select: false }) * ``` * * @param shapes - The shapes (or shape ids) to group. Defaults to the selected shapes. * @param opts - An options object. * * @public */ groupShapes(shapes: TLShape[], opts?: Partial<{ groupId: TLShapeId; select: boolean; }>): this; groupShapes(ids: TLShapeId[], opts?: Partial<{ groupId: TLShapeId; select: boolean; }>): this; /** * Ungroup some shapes. * * @example * ```ts * editor.ungroupShapes([myGroup, myOtherGroup]) * editor.ungroupShapes([myGroup], { select: false }) * ``` * * @param shapes - The group shapes (or shape ids) to ungroup. * @param opts - An options object. * * @public */ ungroupShapes(ids: TLShapeId[], opts?: Partial<{ select: boolean; }>): this; ungroupShapes(shapes: TLShape[], opts?: Partial<{ select: boolean; }>): this; /** * Update a shape using a partial of the shape. * * @example * ```ts * editor.updateShape({ id: 'box1', type: 'geo', props: { w: 100, h: 100 } }) * ``` * * @param partial - The shape partial to update. * * @public */ updateShape(partial: null | TLShapePartial | undefined): this; /** * Update shapes using partials of each shape. * * @example * ```ts * editor.updateShapes([{ id: 'box1', type: 'geo', props: { w: 100, h: 100 } }]) * ``` * * @param partials - The shape partials to update. * * @public */ updateShapes(partials: (null | TLShapePartial | undefined)[]): this; /* Excluded from this release type: _updateShapes */ /* Excluded from this release type: _getUnlockedShapeIds */ /** * Delete shapes. * * @example * ```ts * editor.deleteShapes(['box1', 'box2']) * ``` * * @param ids - The ids of the shapes to delete. * * @public */ deleteShapes(ids: TLShapeId[]): this; deleteShapes(shapes: TLShape[]): this; /** * Delete a shape. * * @example * ```ts * editor.deleteShape(shape.id) * ``` * * @param id - The id of the shape to delete. * * @public */ deleteShape(id: TLShapeId): this; deleteShape(shape: TLShape): this; /* Excluded from this release type: _extractSharedStyles */ private _getSelectionSharedStyles; /** * Get the style for the next shape. * * @example * ```ts * const color = editor.getStyleForNextShape(DefaultColorStyle) * ``` * * @param style - The style to get. * * @public */ getStyleForNextShape(style: StyleProp): T; getShapeStyleIfExists(shape: TLShape, style: StyleProp): T | undefined; /** * A map of all the current styles either in the current selection, or that are relevant to the * current tool. * * @example * ```ts * const color = editor.getSharedStyles().get(DefaultColorStyle) * if (color && color.type === 'shared') { * print('All selected shapes have the same color:', color.value) * } * ``` * * @public */ getSharedStyles(): ReadonlySharedStyleMap; /** * Get the currently selected shared opacity. * If any shapes are selected, this returns the shared opacity of the selected shapes. * Otherwise, this returns the chosen opacity for the next shape. * * @public */ getSharedOpacity(): SharedStyle; /** * Set the opacity for the next shapes. This will effect subsequently created shapes. * * @example * ```ts * editor.setOpacityForNextShapes(0.5) * ``` * * @param opacity - The opacity to set. Must be a number between 0 and 1 inclusive. * @param historyOptions - The history options for the change. */ setOpacityForNextShapes(opacity: number, historyOptions?: TLHistoryBatchOptions): this; /** * Set the current opacity. This will effect any selected shapes. * * @example * ```ts * editor.setOpacityForSelectedShapes(0.5) * ``` * * @param opacity - The opacity to set. Must be a number between 0 and 1 inclusive. */ setOpacityForSelectedShapes(opacity: number): this; /** * Set the value of a {@link @tldraw/tlschema#StyleProp} for the next shapes. This change will be applied to subsequently created shapes. * * @example * ```ts * editor.setStyleForNextShapes(DefaultColorStyle, 'red') * editor.setStyleForNextShapes(DefaultColorStyle, 'red', { ephemeral: true }) * ``` * * @param style - The style to set. * @param value - The value to set. * @param historyOptions - The history options for the change. * * @public */ setStyleForNextShapes(style: StyleProp, value: T, historyOptions?: TLHistoryBatchOptions): this; /** * Set the value of a {@link @tldraw/tlschema#StyleProp}. This change will be applied to the currently selected shapes. * * @example * ```ts * editor.setStyleForSelectedShapes(DefaultColorStyle, 'red') * ``` * * @param style - The style to set. * @param value - The value to set. * * @public */ setStyleForSelectedShapes>(style: S, value: StylePropValue): this; /* Excluded from this release type: externalAssetContentHandlers */ /* Excluded from this release type: temporaryAssetPreview */ /** * Register an external asset handler. This handler will be called when the editor needs to * create an asset for some external content, like an image/video file or a bookmark URL. For * example, the 'file' type handler will be called when a user drops an image onto the canvas. * * The handler should extract any relevant metadata for the asset, upload it to blob storage * using {@link Editor.uploadAsset} if needed, and return the asset with the metadata & uploaded * URL. * * @example * ```ts * editor.registerExternalAssetHandler('file', myHandler) * ``` * * @param type - The type of external content. * @param handler - The handler to use for this content type. * * @public */ registerExternalAssetHandler(type: T, handler: ((info: TLExternalAsset & { type: T; }) => Promise) | null): this; /** * Register a temporary preview of an asset. This is useful for showing a ghost image of * something that is being uploaded. Retrieve the placeholder with * {@link Editor.getTemporaryAssetPreview}. Placeholders last for 3 minutes by default, but this * can be configured using * * @example * ```ts * editor.createTemporaryAssetPreview(assetId, file) * ``` * * @param assetId - The asset's id. * @param file - The raw file. * * @public */ createTemporaryAssetPreview(assetId: TLAssetId, file: File): string | undefined; /** * Get temporary preview of an asset. This is useful for showing a ghost * image of something that is being uploaded. * * @example * ```ts * editor.getTemporaryAssetPreview('someId') * ``` * * @param assetId - The asset's id. * * @public */ getTemporaryAssetPreview(assetId: TLAssetId): string | undefined; /** * Get an asset for an external asset content type. * * @example * ```ts * const asset = await editor.getAssetForExternalContent({ type: 'file', file: myFile }) * const asset = await editor.getAssetForExternalContent({ type: 'url', url: myUrl }) * ``` * * @param info - Info about the external content. * @returns The asset. */ getAssetForExternalContent(info: TLExternalAsset): Promise; hasExternalAssetHandler(type: TLExternalAsset['type']): boolean; /* Excluded from this release type: externalContentHandlers */ /** * Register an external content handler. This handler will be called when the editor receives * external content of the provided type. For example, the 'image' type handler will be called * when a user drops an image onto the canvas. * * @example * ```ts * editor.registerExternalContentHandler('text', myHandler) * ``` * @example * ```ts * editor.registerExternalContentHandler<'embed', MyEmbedType>('embed', myHandler) * ``` * * @param type - The type of external content. * @param handler - The handler to use for this content type. * * @public */ registerExternalContentHandler['type'], E>(type: T, handler: ((info: T extends TLExternalContent['type'] ? Extract, { type: T; }> : TLExternalContent) => void) | null): this; /** * Handle external content, such as files, urls, embeds, or plain text which has been put into the app, for example by pasting external text or dropping external images onto canvas. * * @param info - Info about the external content. * @param opts - Options for handling external content, including force flag to bypass readonly checks. */ putExternalContent(info: TLExternalContent, opts?: { force?: boolean | undefined; }): Promise; /** * Handle replacing external content. * * @param info - Info about the external content. * @param opts - Options for handling external content, including force flag to bypass readonly checks. */ replaceExternalContent(info: TLExternalContent, opts?: { force?: boolean | undefined; }): Promise; /** * Get content that can be exported for the given shape ids. * * @param shapes - The shapes (or shape ids) to get content for. * * @returns The exported content. * * @public */ getContentFromCurrentPage(shapes: TLShape[] | TLShapeId[]): TLContent | undefined; resolveAssetsInContent(content: TLContent | undefined): Promise; /** * Place content into the editor. * * @param content - The content. * @param opts - Options for placing the content. * * @public */ putContentOntoCurrentPage(content: TLContent, opts?: { point?: VecLike; preserveIds?: boolean; preservePosition?: boolean; select?: boolean; }): this; /** * Get an exported SVG element of the given shapes. * * @param shapes - The shapes (or shape ids) to export. * @param opts - Options for the export. * * @returns The SVG element. * * @public */ getSvgElement(shapes: TLShape[] | TLShapeId[], opts?: TLSvgExportOptions): Promise<{ height: number; svg: SVGSVGElement; width: number; } | undefined>; /** * Get an exported SVG string of the given shapes. * * @param shapes - The shapes (or shape ids) to export. * @param opts - Options for the export. * * @returns The SVG element. * * @public */ getSvgString(shapes: TLShape[] | TLShapeId[], opts?: TLSvgExportOptions): Promise<{ height: number; svg: string; width: number; } | undefined>; /** * Get an exported image of the given shapes. * * @param shapes - The shapes (or shape ids) to export. * @param opts - Options for the export. * * @returns A blob of the image. * @public */ toImage(shapes: TLShape[] | TLShapeId[], opts?: TLImageExportOptions): Promise<{ blob: Blob; height: number; width: number; }>; /** * Get an exported image of the given shapes as a data URL. * * @param shapes - The shapes (or shape ids) to export. * @param opts - Options for the export. * * @returns A data URL of the image. * @public */ toImageDataUrl(shapes: TLShape[] | TLShapeId[], opts?: TLImageExportOptions): Promise<{ height: number; url: string; width: number; }>; /** * Dispatch a cancel event. * * @example * ```ts * editor.cancel() * ``` * * @public */ cancel(): this; /** * Dispatch an interrupt event. * * @example * ```ts * editor.interrupt() * ``` * * @public */ interrupt(): this; /** * Dispatch a complete event. * * @example * ```ts * editor.complete() * ``` * * @public */ complete(): this; /** * Dispatch a pointer move event in the current position of the pointer. This is useful when * external circumstances have changed (e.g. the camera moved or a shape was moved) and you want * the current interaction to respond to that change. * * @example * ```ts * editor.updatePointer() * ``` * * @param options - The options for updating the pointer. * @returns The editor instance. * @public */ updatePointer(options?: TLUpdatePointerOptions): this; /** * Puts the editor into focused mode. * * This makes the editor eligible to receive keyboard events and some pointer events (move, wheel). * * @example * ```ts * editor.focus() * ``` * * By default this also dispatches a 'focus' event to the container element. To prevent this, pass `focusContainer: false`. * * @example * ```ts * editor.focus({ focusContainer: false }) * ``` * * @public */ focus({ focusContainer }?: { focusContainer?: boolean | undefined; }): this; /** * Switches off the editor's focused mode. * * This makes the editor ignore keyboard events and some pointer events (move, wheel). * * @example * ```ts * editor.blur() * ``` * By default this also dispatches a 'blur' event to the container element. To prevent this, pass `blurContainer: false`. * * @example * ```ts * editor.blur({ blurContainer: false }) * ``` * * @public */ blur({ blurContainer }?: { blurContainer?: boolean | undefined; }): this; /** * @public * @returns true if the editor is focused */ getIsFocused(): boolean; /** * @public * @returns true if the editor is in readonly mode */ getIsReadonly(): boolean; /** * @public * @returns a snapshot of the store's UI and document state */ getSnapshot(): TLEditorSnapshot; /** * Loads a snapshot into the editor. * @param snapshot - The snapshot to load. * @param opts - The options for loading the snapshot. * @returns */ loadSnapshot(snapshot: Partial | TLStoreSnapshot, opts?: TLLoadSnapshotOptions): this; private _zoomToFitPageContentAt100Percent; private _navigateToDeepLink; /** * Handles navigating to the content specified by the query param in the given URL. * * Use {@link Editor.createDeepLink} to create a URL with a deep link query param. * * If no URL is provided, it will look for the param in the current `window.location.href`. * * @example * ```ts * editor.navigateToDeepLink() * ``` * * The default parameter name is 'd'. You can override this by providing the `param` option. * * @example * ```ts * // disable page parameter and change viewport parameter to 'c' * editor.navigateToDeepLink({ * param: 'x', * url: 'https://my-app.com/my-document?x=200.12.454.23.xyz123', * }) * ``` * * @param opts - Options for loading the state from the URL. */ navigateToDeepLink(opts?: { param?: string; url?: string | URL; } | TLDeepLink): Editor; /** * Turns the given URL into a deep link by adding a query parameter. * * e.g. `https://my-app.com/my-document?d=100.100.200.200.xyz123` * * If no URL is provided, it will use the current `window.location.href`. * * @example * ```ts * // create a deep link to the current page + viewport * navigator.clipboard.writeText(editor.createDeepLink()) * ``` * * You can link to a particular set of shapes by providing a `to` parameter. * * @example * ```ts * // create a deep link to the set of currently selected shapes * navigator.clipboard.writeText(editor.createDeepLink({ * to: { type: 'selection', shapeIds: editor.getSelectedShapeIds() } * })) * ``` * * The default query param is 'd'. You can override this by providing a `param` parameter. * * @example * ```ts * // Use `x` as the param name instead * editor.createDeepLink({ param: 'x' }) * ``` * * @param opts - Options for adding the state to the URL. * @returns the updated URL */ createDeepLink(opts?: { param?: string; to?: TLDeepLink; url?: string | URL; }): URL; /** * Register a listener for changes to a deep link for the current document. * * You'll typically want to use this indirectly via the {@link TldrawEditorBaseProps.deepLinks} prop on the `` component. * * By default this will update `window.location` in place, but you can provide a custom callback * to handle state changes on your own. * * @example * ```ts * editor.registerDeepLinkListener({ * onChange(url) { * window.history.replaceState({}, document.title, url.toString()) * } * }) * ``` * * You can also provide a custom URL to update, in which case you must also provide `onChange`. * * @example * ```ts * editor.registerDeepLinkListener({ * getUrl: () => `https://my-app.com/my-document`, * onChange(url) { * setShareUrl(url.toString()) * } * }) * ``` * * By default this will update with a debounce interval of 500ms, but you can provide a custom interval. * * @example * ```ts * editor.registerDeepLinkListener({ debounceMs: 1000 }) * ``` * The default parameter name is `d`. You can override this by providing a `param` option. * * @example * ```ts * editor.registerDeepLinkListener({ param: 'x' }) * ``` * @param opts - Options for setting up the listener. * @returns a function that will stop the listener. */ registerDeepLinkListener(opts?: TLDeepLinkOptions): () => void; /* Excluded from this release type: _clickManager */ /** * Prevent a double click event from firing the next time the user clicks * * @public */ cancelDoubleClick(): void; /* Excluded from this release type: _prevCursor */ /* Excluded from this release type: _shiftKeyTimeout */ /* Excluded from this release type: _setShiftKeyTimeout */ /* Excluded from this release type: _altKeyTimeout */ /* Excluded from this release type: _setAltKeyTimeout */ /* Excluded from this release type: _ctrlKeyTimeout */ /* Excluded from this release type: _setCtrlKeyTimeout */ /* Excluded from this release type: _metaKeyTimeout */ /* Excluded from this release type: _setMetaKeyTimeout */ /* Excluded from this release type: _restoreToolId */ /* Excluded from this release type: _didPinch */ /* Excluded from this release type: _selectedShapeIdsAtPointerDown */ /* Excluded from this release type: _longPressTimeout */ /* Excluded from this release type: capturedPointerId */ /* Excluded from this release type: performanceTracker */ /* Excluded from this release type: performanceTrackerTimeout */ /* Excluded from this release type: handledEvents */ /** * In tldraw, events are sometimes handled by multiple components. For example, the shapes might * have events, but the canvas handles events too. The way that the canvas handles events can * interfere with the with the shapes event handlers - for example, it calls `.preventDefault()` * on `pointerDown`, which also prevents `click` events from firing on the shapes. * * You can use `.stopPropagation()` to prevent the event from propagating to the rest of the * DOM, but that can impact non-tldraw event handlers set up elsewhere. By using * `markEventAsHandled`, you'll stop other parts of tldraw from handling the event without * impacting other, non-tldraw event handlers. See also {@link Editor.wasEventAlreadyHandled}. * * @public */ markEventAsHandled(e: { nativeEvent: Event; } | Event): void; /** * Checks if an event has already been handled. See {@link Editor.markEventAsHandled}. * * @public */ wasEventAlreadyHandled(e: { nativeEvent: Event; } | Event): boolean; /** * Dispatch an event to the editor. * * @example * ```ts * editor.dispatch(myPointerEvent) * ``` * * @param info - The event info. * * @public */ dispatch(info: TLEventInfo): this; private _pendingEventsForNextTick; private _flushEventsForTick; _flushEventForTick(info: TLEventInfo): this | undefined; /* Excluded from this release type: maybeTrackPerformance */ } /** * An Atom that is scoped to the lifetime of an Editor. * * This is useful for storing UI state for tldraw applications. Keeping state scoped to an editor * instead of stored in a global atom can prevent issues with state being shared between editors * when navigating between pages, or when multiple editor instances are used on the same page. * * @public */ export declare class EditorAtom { private name; private getInitialState; private states; constructor(name: string, getInitialState: (editor: Editor) => T); getAtom(editor: Editor): Atom; get(editor: Editor): T; update(editor: Editor, update: (state: T) => T): T; set(editor: Editor, state: T): T; } /** @public */ export declare const EditorContext: React_3.Context; /** @public @react */ export declare function EditorProvider({ editor, children }: EditorProviderProps): JSX.Element; /** @public */ export declare interface EditorProviderProps { editor: Editor; children: React_3.ReactNode; } /* Excluded from this release type: elementShouldCaptureKeys */ /** @public */ export declare class Ellipse2d extends Geometry2d { config: Omit & { height: number; width: number; }; private _w; private _h; private _edges?; constructor(config: Omit & { height: number; width: number; }); get edges(): Edge2d[]; getVertices(): any[]; nearestPoint(A: VecLike): Vec; hitTestLineSegment(A: VecLike, B: VecLike): boolean; getBounds(): Box; getLength(): number; getSvgPathData(first?: boolean): string; } /** @public */ export declare class ErrorBoundary extends React_2.Component, { error: Error | null; }> { static getDerivedStateFromError(error: Error): { error: Error; }; state: { error: null; }; componentDidCatch(error: unknown): void; render(): bigint | boolean | JSX.Element | Iterable | null | number | Promise | null | number | React_2.ReactElement | string> | React_2.ReactPortal | string | undefined> | string | undefined; } /** @public @react */ export declare function ErrorScreen({ children }: LoadingScreenProps): JSX.Element; /** @public */ export declare const EVENT_NAME_MAP: Record, keyof TLEventHandlers>; /* Excluded from this release type: extractSessionStateFromLegacySnapshot */ /* Excluded from this release type: featureFlags */ /** @public */ export declare class FontManager { private readonly editor; private readonly assetUrls?; constructor(editor: Editor, assetUrls?: { [key: string]: string | undefined; } | undefined); private readonly shapeFontFacesCache; private readonly shapeFontLoadStateCache; getShapeFontFaces(shape: TLShape | TLShapeId): TLFontFace[]; trackFontsForShape(shape: TLShape | TLShapeId): void; loadRequiredFontsForCurrentPage(limit?: number): Promise; private readonly fontStates; private getFontState; ensureFontIsLoaded(font: TLFontFace): Promise; private fontsToLoad; requestFonts(fonts: TLFontFace[]): void; private findOrCreateFontFace; toEmbeddedCssDeclaration(font: TLFontFace): Promise; } /** @public */ export declare interface GapsSnapIndicator { id: string; type: 'gaps'; direction: 'horizontal' | 'vertical'; gaps: Array<{ endEdge: [VecLike, VecLike]; startEdge: [VecLike, VecLike]; }>; } /** @public */ export declare abstract class Geometry2d { isFilled: boolean; isClosed: boolean; isLabel: boolean; isEmptyLabel: boolean; isInternal: boolean; excludeFromShapeBounds: boolean; debugColor?: string; ignore?: boolean; constructor(opts: Geometry2dOptions); isExcludedByFilter(filters?: Geometry2dFilters): boolean; abstract getVertices(filters: Geometry2dFilters): Vec[]; abstract nearestPoint(point: VecLike, _filters?: Geometry2dFilters): Vec; hitTestPoint(point: VecLike, margin?: number, hitInside?: boolean, _filters?: Geometry2dFilters): boolean; distanceToPoint(point: VecLike, hitInside?: boolean, filters?: Geometry2dFilters): number; distanceToLineSegment(A: VecLike, B: VecLike, filters?: Geometry2dFilters): number; hitTestLineSegment(A: VecLike, B: VecLike, distance?: number, filters?: Geometry2dFilters): boolean; intersectLineSegment(A: VecLike, B: VecLike, _filters?: Geometry2dFilters): VecLike[]; intersectCircle(center: VecLike, radius: number, _filters?: Geometry2dFilters): VecLike[]; intersectPolygon(polygon: VecLike[], _filters?: Geometry2dFilters): VecLike[]; intersectPolyline(polyline: VecLike[], _filters?: Geometry2dFilters): VecLike[]; /** * Find a point along the edge of the geometry that is a fraction `t` along the entire way round. */ interpolateAlongEdge(t: number, _filters?: Geometry2dFilters): Vec; /** * Take `point`, find the closest point to it on the edge of the geometry, and return how far * along the edge it is as a fraction of the total length. */ uninterpolateAlongEdge(point: VecLike, _filters?: Geometry2dFilters): number; isPointInBounds(point: VecLike, margin?: number): boolean; overlapsPolygon(_polygon: VecLike[]): boolean; transform(transform: MatModel, opts?: TransformedGeometry2dOptions): Geometry2d; private _vertices; get vertices(): Vec[]; getBoundsVertices(): Vec[]; private _boundsVertices; get boundsVertices(): Vec[]; getBounds(): Box; private _bounds; get bounds(): Box; get center(): Vec; private _area; get area(): number; getArea(): number; toSimpleSvgPath(): string; private _length?; get length(): number; getLength(_filters?: Geometry2dFilters): number; /** * Called after a hit test succeeds. Return `true` to reject the hit and allow * shapes behind this one to be selected instead (e.g. transparent image pixels). */ ignoreHit(_point: VecLike): boolean; abstract getSvgPathData(first: boolean): string; } /** * Filter geometry within a group. * * Filters are ignored when called directly on primitive geometries, but can be used to narrow down * the results of an operation on `Group2d` geometries. * * @public */ export declare interface Geometry2dFilters { readonly includeLabels?: boolean; readonly includeInternal?: boolean; } /** @public */ export declare const Geometry2dFilters: { EXCLUDE_INTERNAL: Geometry2dFilters; EXCLUDE_LABELS: Geometry2dFilters; EXCLUDE_NON_STANDARD: Geometry2dFilters; INCLUDE_ALL: Geometry2dFilters; }; /** @public */ export declare interface Geometry2dOptions extends TransformedGeometry2dOptions { isFilled: boolean; isClosed: boolean; } /** * Get the measure of an arc. * * @param A - The angle from center to arc's start point (A) on the circle * @param B - The angle from center to arc's end point (B) on the circle * @param sweepFlag - 1 if the arc is clockwise, 0 if counter-clockwise * @param largeArcFlag - 1 if the arc is greater than 180 degrees, 0 if less than 180 degrees * * @returns The measure of the arc, negative if counter-clockwise * * @public */ export declare function getArcMeasure(A: number, B: number, sweepFlag: number, largeArcFlag: number): number; /** @public */ export declare function getCursor(cursor: TLCursorType, rotation?: number, color?: string): string; /** * Gets the default CDN base URL. * @returns The default CDN base URL. * @public */ export declare function getDefaultCdnBaseUrl(): string; /** * Get the shapes that will be reparented to new parents when the shapes are dropped. * * @param editor - The editor instance. * @param shapes - The shapes to check. * @param cb - A callback to filter out certain shapes. * @returns An object with the shapes that will be reparented to new parents and the shapes that will be reparented to the page or their ancestral group. * * @public */ export declare function getDroppedShapesToNewParents(editor: Editor, shapes: Set | TLShape[], cb?: (shape: TLShape, parent: TLShape) => boolean): { remainingShapesToReparent: Set; reparenting: Map; }; /** @public */ export declare function getFontsFromRichText(editor: Editor, richText: TLRichText, initialState: RichTextFontVisitorState): TLFontFace[]; /** @public */ export declare function getFreshUserPreferences(): TLUserPreferences; /** * Get an incremented name (e.g. New page (2)) from a name (e.g. New page), based on an array of * existing names. * * @param name - The name to increment. * @param others - The array of existing names. * @public */ export declare function getIncrementedName(name: string, others: string[]): string; /** @public */ export declare function getPerfectDashProps(totalLength: number, strokeWidth: number, opts?: { closed?: boolean; end?: PerfectDashTerminal; forceSolid?: boolean; lengthRatio?: number; snap?: number; start?: PerfectDashTerminal; style?: TLDefaultDashStyle; }): { strokeDasharray: string; strokeDashoffset: string; }; /** @public */ export declare function getPointerInfo(editor: Editor, e: PointerEvent | React_3.PointerEvent): { accelKey: boolean; altKey: boolean; button: number; ctrlKey: boolean; isPen: boolean; metaKey: boolean; point: { x: number; y: number; z: number; }; pointerId: number; shiftKey: boolean; }; /** * Returns the t value of the point on the arc. * * @param mAB - The measure of the arc from A to B, negative if counter-clockwise * @param A - The angle from center to arc's start point (A) on the circle * @param B - The angle from center to arc's end point (B) on the circle * @param P - The angle on the circle (P) to find the t value for * * @returns The t value of the point on the arc, with 0 being the start and 1 being the end * * @public */ export declare function getPointInArcT(mAB: number, A: number, B: number, P: number): number; /** * Get a point on the perimeter of a circle. * * @param center - The center of the circle. * @param r - The radius of the circle. * @param a - The angle in radians. * @public */ export declare function getPointOnCircle(center: VecLike, r: number, a: number): Vec; /** @public */ export declare function getPointsOnArc(startPoint: VecLike, endPoint: VecLike, center: null | VecLike, radius: number, numPoints: number): Vec[]; /** @public */ export declare function getPolygonVertices(width: number, height: number, sides: number): Vec[]; /* Excluded from this release type: getRotationSnapshot */ /** @public */ export declare function getSnapshot(store: TLStore): TLEditorSnapshot; /** @public */ export declare function getSvgAsImage(svgString: string, options: { height: number; pixelRatio?: number; quality?: number; type: 'jpeg' | 'png' | 'webp'; width: number; }): Promise; /** * Turn an array of points into a path of quadratic curves. * * @param points - The points returned from perfect-freehand * @param closed - Whether the stroke is closed * * @public */ export declare function getSvgPathFromPoints(points: VecLike[], closed?: boolean): string; /** @public */ export declare function getUserPreferences(): TLUserPreferences; /* Excluded from this release type: getVerticesCountForArcLength */ /** @public */ export declare class Group2d extends Geometry2d { children: Geometry2d[]; ignoredChildren: Geometry2d[]; constructor(config: Omit & { children: Geometry2d[]; }); getVertices(filters: Geometry2dFilters): Vec[]; nearestPoint(point: VecLike, filters?: Geometry2dFilters): Vec; distanceToPoint(point: VecLike, hitInside?: boolean, filters?: Geometry2dFilters): number; hitTestPoint(point: VecLike, margin: number, hitInside: boolean, filters?: Geometry2dFilters): boolean; hitTestLineSegment(A: VecLike, B: VecLike, zoom: number, filters?: Geometry2dFilters): boolean; intersectLineSegment(A: VecLike, B: VecLike, filters?: Geometry2dFilters): VecLike[]; intersectCircle(center: VecLike, radius: number, filters?: Geometry2dFilters): VecLike[]; getBoundsVertices(): Vec[]; intersectPolygon(polygon: VecLike[], filters?: Geometry2dFilters): VecLike[]; intersectPolyline(polyline: VecLike[], filters?: Geometry2dFilters): VecLike[]; interpolateAlongEdge(t: number, filters?: Geometry2dFilters): Vec; uninterpolateAlongEdge(point: VecLike, filters?: Geometry2dFilters): number; transform(transform: Mat): Geometry2d; getArea(): number; toSimpleSvgPath(): string; getLength(filters?: Geometry2dFilters): number; getSvgPathData(): string; overlapsPolygon(polygon: VecLike[]): boolean; } /** @public */ export declare class GroupShapeUtil extends ShapeUtil { static type: "group"; static props: RecordProps; static migrations: TLPropsMigrations; hideSelectionBoundsFg(): boolean; canBind(): boolean; canResize(): boolean; canResizeChildren(): boolean; getDefaultProps(): TLGroupShape['props']; getGeometry(shape: TLGroupShape): Geometry2d; component(shape: TLGroupShape): JSX.Element | null; indicator(shape: TLGroupShape): JSX.Element; onChildrenChange(group: TLGroupShape): void; } /** @public */ export declare const HALF_PI: number; /** * When dragging a handle, users can snap the handle to key geometry on other nearby shapes. * Customize how handles snap to a shape by returning this from * {@link ShapeUtil.getHandleSnapGeometry}. * * Any co-ordinates here should be in the shape's local space. * * @public */ export declare interface HandleSnapGeometry { /** * A `Geometry2d` that describe the outline of the shape that the handle will snap to - fills * are ignored. By default, this is the same geometry returned by {@link ShapeUtil.getGeometry}. * Set this to `null` to disable handle snapping to this shape's outline. */ outline?: Geometry2d | null; /** * Key points on the shape that the handle will snap to. For example, the corners of a * rectangle, or the centroid of a triangle. By default, no points are used. */ points?: VecModel[]; /** * By default, handles can't snap to their own shape because moving the handle might change the * snapping location which can cause feedback loops. You can override this by returning a * version of `outline` that won't be affected by the current handle's position to use for * self-snapping. */ getSelfSnapOutline?(handle: TLHandle): Geometry2d | null; /** * By default, handles can't snap to their own shape because moving the handle might change the * snapping location which can cause feedback loops. You can override this by returning a * version of `points` that won't be affected by the current handle's position to use for * self-snapping. */ getSelfSnapPoints?(handle: TLHandle): VecModel[]; } /** @public */ export declare class HandleSnaps { readonly manager: SnapManager; readonly editor: Editor; constructor(manager: SnapManager); private getSnapGeometryCache; private iterateSnapPointsInPageSpace; private iterateSnapOutlines; private getHandleSnapPosition; private getHandleSnapData; snapHandle({ currentShapeId, handle }: { currentShapeId: TLShapeId; handle: TLHandle; }): null | SnapData; } /** * Clear the database of all data associated with tldraw. * * @public */ export declare function hardReset({ shouldReload }?: { shouldReload?: boolean | undefined; }): Promise; /** @public */ export declare function hardResetEditor(): void; /** @public */ export declare class HistoryManager { private readonly store; readonly dispose: () => void; private state; private readonly pendingDiff; private stacks; private readonly annotateError; constructor(opts: { annotateError?(error: unknown): void; store: Store; }); private flushPendingDiff; getNumUndos(): number; getNumRedos(): number; /* Excluded from this release type: _isInBatch */ batch(fn: () => void, opts?: TLHistoryBatchOptions): this; _undo({ pushToRedoStack, toMark }: { pushToRedoStack: boolean; toMark?: string; }): this; undo(): this; redo(): this; bail(): this; bailToMark(id: string): this; squashToMark(id: string): this; /* Excluded from this release type: _mark */ clear(): void; /* Excluded from this release type: getMarkIdMatching */ /* Excluded from this release type: debug */ } /** @public @react */ export declare function HTMLContainer({ children, className, ...rest }: HTMLContainerProps): JSX.Element; /** @public */ export declare type HTMLContainerProps = React_2.HTMLAttributes; /** @public */ export declare const inlineBase64AssetStore: TLAssetStore; /** @public */ export declare class InputsManager { private readonly editor; constructor(editor: Editor); private _originPagePoint; /** * The most recent pointer down's position in the current page space. */ getOriginPagePoint(): Vec; /** * @deprecated Use `getOriginPagePoint()` instead. */ get originPagePoint(): Vec; private _originScreenPoint; /** * The most recent pointer down's position in screen space. */ getOriginScreenPoint(): Vec; /** * @deprecated Use `getOriginScreenPoint()` instead. */ get originScreenPoint(): Vec; private _previousPagePoint; /** * The previous pointer position in the current page space. */ getPreviousPagePoint(): Vec; /** * @deprecated Use `getPreviousPagePoint()` instead. */ get previousPagePoint(): Vec; private _previousScreenPoint; /** * The previous pointer position in screen space. */ getPreviousScreenPoint(): Vec; /** * @deprecated Use `getPreviousScreenPoint()` instead. */ get previousScreenPoint(): Vec; private _currentPagePoint; /** * The most recent pointer position in the current page space. */ getCurrentPagePoint(): Vec; /** * @deprecated Use `getCurrentPagePoint()` instead. */ get currentPagePoint(): Vec; private _currentScreenPoint; /** * The most recent pointer position in screen space. */ getCurrentScreenPoint(): Vec; /** * @deprecated Use `getCurrentScreenPoint()` instead. */ get currentScreenPoint(): Vec; private _pointerVelocity; /** * Velocity of mouse pointer, in pixels per millisecond. */ getPointerVelocity(): Vec; /** * @deprecated Use `getPointerVelocity()` instead. */ get pointerVelocity(): Vec; /* Excluded from this release type: setPointerVelocity */ /** * A set containing the currently pressed keys. */ readonly keys: AtomSet; /** * A set containing the currently pressed buttons. */ readonly buttons: AtomSet; private _isPen; /** * Whether the input is from a pen. */ getIsPen(): boolean; /** * @deprecated Use `getIsPen()` instead. */ get isPen(): boolean; set isPen(isPen: boolean); /** * @param isPen - Whether the input is from a pen. */ setIsPen(isPen: boolean): void; private _shiftKey; /** * Whether the shift key is currently pressed. */ getShiftKey(): boolean; /** * @deprecated Use `getShiftKey()` instead. */ get shiftKey(): boolean; set shiftKey(shiftKey: boolean); /* Excluded from this release type: setShiftKey */ private _metaKey; /** * Whether the meta key is currently pressed. */ getMetaKey(): boolean; /** * @deprecated Use `getMetaKey()` instead. */ get metaKey(): boolean; set metaKey(metaKey: boolean); /* Excluded from this release type: setMetaKey */ private _ctrlKey; /** * Whether the ctrl or command key is currently pressed. */ getCtrlKey(): boolean; /** * @deprecated Use `getCtrlKey()` instead. */ get ctrlKey(): boolean; set ctrlKey(ctrlKey: boolean); /* Excluded from this release type: setCtrlKey */ private _altKey; /** * Whether the alt or option key is currently pressed. */ getAltKey(): boolean; /** * @deprecated Use `getAltKey()` instead. */ get altKey(): boolean; set altKey(altKey: boolean); /* Excluded from this release type: setAltKey */ /** * Is the accelerator key (cmd on mac, ctrl elsewhere) currently pressed. */ getAccelKey(): boolean; /** * @deprecated Use `getAccelKey()` instead. */ get accelKey(): boolean; private _isDragging; /** * Whether the user is dragging. */ getIsDragging(): boolean; /** * Soon to be deprecated, use `getIsDragging()` instead. */ get isDragging(): boolean; set isDragging(isDragging: boolean); /** * @param isDragging - Whether the user is dragging. */ setIsDragging(isDragging: boolean): void; private _isPointing; /** * Whether the user is pointing. */ getIsPointing(): boolean; /** * @deprecated Use `getIsPointing()` instead. */ get isPointing(): boolean; set isPointing(isPointing: boolean); /* Excluded from this release type: setIsPointing */ private _isPinching; /** * Whether the user is pinching. */ getIsPinching(): boolean; /** * @deprecated Use `getIsPinching()` instead. */ get isPinching(): boolean; set isPinching(isPinching: boolean); /* Excluded from this release type: setIsPinching */ private _isEditing; /** * Whether the user is editing. */ getIsEditing(): boolean; /** * @deprecated Use `getIsEditing()` instead. */ get isEditing(): boolean; set isEditing(isEditing: boolean); /** * @param isEditing - Whether the user is editing. */ setIsEditing(isEditing: boolean): void; private _isPanning; /** * Whether the user is panning. */ getIsPanning(): boolean; /** * @deprecated Use `getIsPanning()` instead. */ get isPanning(): boolean; set isPanning(isPanning: boolean); /* Excluded from this release type: setIsPanning */ private _isSpacebarPanning; /** * Whether the user is spacebar panning. */ getIsSpacebarPanning(): boolean; /** * @deprecated Use `getIsSpacebarPanning()` instead. */ get isSpacebarPanning(): boolean; set isSpacebarPanning(isSpacebarPanning: boolean); /* Excluded from this release type: setIsSpacebarPanning */ private _getHasCollaborators; /* Excluded from this release type: _velocityPrevPoint */ /* Excluded from this release type: updatePointerVelocity */ /* Excluded from this release type: updateFromEvent */ toJson(): { altKey: boolean; buttons: number[]; ctrlKey: boolean; currentPagePoint: VecModel; currentScreenPoint: VecModel; isDragging: boolean; isEditing: boolean; isPanning: boolean; isPen: boolean; isPinching: boolean; isPointing: boolean; isSpacebarPanning: boolean; keys: string[]; metaKey: boolean; originPagePoint: VecModel; originScreenPoint: VecModel; pointerVelocity: VecModel; previousPagePoint: VecModel; previousScreenPoint: VecModel; shiftKey: boolean; }; } /** * Find the intersections between a circle and a circle. * * @param c1 - The first circle's center. * @param r1 - The first circle's radius. * @param c2 - The second circle's center. * @param r2 - The second circle's radius. * @public */ export declare function intersectCircleCircle(c1: VecLike, r1: number, c2: VecLike, r2: number): Vec[]; /** * Find the intersections between a circle and a bounding box. * * @param c - The circle's center. * @param r - The circle's radius. * @param points - The points in the polygon. * @public */ export declare function intersectCirclePolygon(c: VecLike, r: number, points: VecLike[]): null | VecLike[]; /** * Find the intersections between a circle and a bounding box. * * @param c - The circle's center. * @param r - The circle's radius. * @param points - The points in the polyline. * @public */ export declare function intersectCirclePolyline(c: VecLike, r: number, points: VecLike[]): null | VecLike[]; /** * Find the intersections between a line segment and a circle. * * @param a1 - The segment's first point. * @param a2 - The segment's second point. * @param c - The circle's center. * @param r - The circle's radius. * @public */ export declare function intersectLineSegmentCircle(a1: VecLike, a2: VecLike, c: VecLike, r: number): null | VecLike[]; /** * Find the intersection between a line segment and a line segment. * * @param a1 - The first segment's first point. * @param a2 - The first segment's second point. * @param b1 - The second segment's first point. * @param b2 - The second segment's second point. * @public */ export declare function intersectLineSegmentLineSegment(a1: VecLike, a2: VecLike, b1: VecLike, b2: VecLike, precision?: number): null | Vec; /** * Find the intersections between a line segment and a closed polygon. * * @param a1 - The segment's first point. * @param a2 - The segment's second point. * @param points - The points in the polygon. * @public */ export declare function intersectLineSegmentPolygon(a1: VecLike, a2: VecLike, points: VecLike[]): null | VecLike[]; /** * Find the intersections between a line segment and a polyline. * * @param a1 - The segment's first point. * @param a2 - The segment's second point. * @param points - The points in the polyline. * @public */ export declare function intersectLineSegmentPolyline(a1: VecLike, a2: VecLike, points: VecLike[]): null | VecLike[]; /** * Find the intersections between a polygon and a bounding box. * * @public */ export declare function intersectPolygonBounds(points: VecLike[], bounds: Box): null | VecLike[]; /** * Create a new convex polygon as the intersection of two convex polygons. * * @param polygonA - An array of points representing the first polygon. * @param polygonB - An array of points representing the second polygon. * @public */ export declare function intersectPolygonPolygon(polygonA: VecLike[], polygonB: VecLike[]): null | VecLike[]; /* Excluded from this release type: InvalidLicenseKeyResult */ /* Excluded from this release type: InvalidLicenseReason */ /* Excluded from this release type: isAccelKey */ /** * Check if a float is safe to use. ie: Not too big or small. * @public */ export declare const isSafeFloat: (n: number) => boolean; /** * Reparents shapes that are no longer contained within their parent shapes. * * @param editor - The editor instance. * @param shapeIds - The IDs of the shapes to reparent. * @param opts - Optional options, including a callback to filter out certain parents, such as when removing a frame. * * @public */ export declare function kickoutOccludedShapes(editor: Editor, shapeIds: TLShapeId[], opts?: { filter?(parent: TLShape): boolean; }): void; /* Excluded from this release type: LICENSE_TIMEOUT */ /* Excluded from this release type: LicenseFromKeyResult */ /* Excluded from this release type: LicenseInfo */ /* Excluded from this release type: LicenseManager */ /* Excluded from this release type: LicenseState */ /** @public */ export declare function linesIntersect(A: VecLike, B: VecLike, C: VecLike, D: VecLike): boolean; /** @public @react */ export declare function LoadingScreen({ children }: LoadingScreenProps): JSX.Element; /** @public */ export declare interface LoadingScreenProps { children: ReactNode; } /** * Loads a snapshot of the editor's instance state into the store of a new editor instance. * * @public * @param store - The store to load the instance state into * @param snapshot - The instance state snapshot to load * @returns */ export declare function loadSessionStateSnapshotIntoStore(store: TLStore, snapshot: TLSessionStateSnapshot, opts?: TLLoadSessionStateSnapshotOptions): void; /** * Loads a snapshot into a store. * @public */ export declare function loadSnapshot(store: TLStore, _snapshot: Partial | TLStoreSnapshot, opts?: TLLoadSnapshotOptions): void; /* Excluded from this release type: LocalIndexedDb */ /** @public */ export declare function loopToHtmlElement(elm: Element): HTMLElement; /** @public */ export declare class Mat { constructor(a: number, b: number, c: number, d: number, e: number, f: number); a: number; b: number; c: number; d: number; e: number; f: number; equals(m: Mat | MatModel): boolean; identity(): this; multiply(m: Mat | MatModel): this; rotate(r: number, cx?: number, cy?: number): Mat; translate(x: number, y: number): Mat; scale(x: number, y: number): this; invert(): this; applyToPoint(point: VecLike): Vec; applyToPoints(points: VecLike[]): Vec[]; rotation(): number; point(): Vec; decomposed(): { rotation: number; scaleX: number; scaleY: number; x: number; y: number; }; toCssString(): string; setTo(model: MatModel): this; decompose(): { rotation: number; scaleX: number; scaleY: number; x: number; y: number; }; clone(): Mat; static Identity(): Mat; static Translate(x: number, y: number): Mat; static Rotate(r: number, cx?: number, cy?: number): Mat; static Scale(x: number, y: number): Mat; static Scale(x: number, y: number, cx: number, cy: number): Mat; static Multiply(m1: MatModel, m2: MatModel): MatModel; static Inverse(m: MatModel): MatModel; static Absolute(m: MatLike): MatModel; static Compose(...matrices: MatLike[]): Mat; static Point(m: MatLike): Vec; static Rotation(m: MatLike): number; static Decompose(m: MatLike): { rotation: number; scaleX: number; scaleY: number; x: number; y: number; }; static Smooth(m: MatLike, precision?: number): MatLike; static toCssString(m: MatLike): string; static applyToPoint(m: MatLike, point: VecLike): Vec; static applyToXY(m: MatLike, x: number, y: number): number[]; static applyToPoints(m: MatLike, points: VecLike[]): Vec[]; static applyToBounds(m: MatLike, box: Box): Box; static From(m: MatLike): Mat; static Cast(m: MatLike): Mat; } /** @public */ export declare type MatLike = Mat | MatModel; /** @public */ export declare interface MatModel { a: number; b: number; c: number; d: number; e: number; f: number; } /** * Checks if grid mode is enabled and snaps a point to the grid if so * * @public */ export declare function maybeSnapToGrid(point: Vec, editor: Editor): Vec; /** * When a menu is open, this component prevents the user from interacting with the canvas. * * @public @react */ export declare function MenuClickCapture(): false | JSX.Element; /* Excluded from this release type: normalizeWheel */ /** * Open a new window with the given URL and target. Prefer this to the window.open function, as it * will work more reliably in embedded scenarios, such as our VS Code extension. See the runtime * object in tldraw/editor for more details. * * @param url - The URL to open. * @param target - The target window to open the URL in. * @param allowReferrer - Whether to allow the referrer to be sent to the new window. * @returns The new window object. * @public */ export declare function openWindow(url: string, target?: string, allowReferrer?: boolean): void; /* Excluded from this release type: OptionalErrorBoundary */ /** @public */ export declare type OptionalKeys = Omit & Partial>; /** * Parses a string created by {@link createDeepLinkString} back into a deep link descriptor. * * @param deepLinkString - the deep link string * @returns a deep link descriptor * * @public */ export declare function parseDeepLinkString(deepLinkString: string): TLDeepLink; /** @public */ export declare type PerfectDashTerminal = 'none' | 'outset' | 'skip'; /** * Find the approximate perimeter of an ellipse. * * @param rx - The ellipse's x radius. * @param ry - The ellipse's y radius. * @public */ export declare function perimeterOfEllipse(rx: number, ry: number): number; /** @public */ export declare const PI: number; /** @public */ export declare const PI2: number; /** @public */ export declare class Point2d extends Geometry2d { private _point; constructor(config: Omit & { margin: number; point: Vec; }); getVertices(): Vec[]; nearestPoint(): Vec; hitTestLineSegment(A: VecLike, B: VecLike, margin: number): boolean; getSvgPathData(): string; } /** * Get whether a point is inside of a polygon. * * ```ts * const result = pointInPolygon(myPoint, myPoints) * ``` * * @public */ export declare function pointInPolygon(A: VecLike, points: VecLike[]): boolean; /** @public */ export declare interface PointsSnapIndicator { id: string; type: 'points'; points: VecLike[]; } /** @public */ export declare class Polygon2d extends Polyline2d { constructor(config: Omit & { points: Vec[]; }); } /** @public */ export declare function polygonIntersectsPolyline(polygon: VecLike[], polyline: VecLike[]): boolean; /** @public */ export declare function polygonsIntersect(a: VecLike[], b: VecLike[]): boolean; /** @public */ export declare class Polyline2d extends Geometry2d { private _points; private _segments?; constructor(config: Omit & { points: Vec[]; }); protected get segments(): Edge2d[]; getLength(): number; getVertices(): Vec[]; nearestPoint(A: VecLike): Vec; hitTestLineSegment(A: VecLike, B: VecLike, distance?: number): boolean; getSvgPathData(): string; } /** @public */ export declare function precise(A: VecLike): string; /** * This function calls `event.preventDefault()` for you. Why is that useful? * * Because if you enable `window.preventDefaultLogging = true` it'll log out a message when it * happens. Because we use console.warn rather than (log) you'll get a stack trace in the inspector * telling you exactly where it happened. This is important because `e.preventDefault()` is the * source of many bugs, but unfortunately it can't be avoided because it also stops a lot of default * behaviour which doesn't make sense in our UI * * @param event - To prevent default on * @public */ export declare function preventDefault(event: Event | React.BaseSyntheticEvent): void; /** * Convert radians to degrees. * * @param r - The degree in radians. * @public */ export declare function radiansToDegrees(r: number): number; /** * Finds the intersection of two ranges. * * @param a0 - The start point in the A range * @param a1 - The end point in the A range * @param b0 - The start point in the B range * @param b1 - The end point in the B range * @returns The intersection of the ranges, or null if no intersection * @public */ export declare function rangeIntersection(a0: number, a1: number, b0: number, b1: number): [number, number] | null; /** * A map of {@link @tldraw/tlschema#StyleProp | StyleProps} to their {@link SharedStyle} values. See * {@link Editor.getSharedStyles}. * * @public */ export declare class ReadonlySharedStyleMap { /* Excluded from this release type: map */ constructor(entries?: Iterable<[StyleProp, SharedStyle]>); get(prop: StyleProp): SharedStyle | undefined; getAsKnownValue(prop: StyleProp): T | undefined; get size(): number; equals(other: ReadonlySharedStyleMap): boolean; keys(): MapIterator>; values(): MapIterator>; entries(): MapIterator<[StyleProp, SharedStyle]>; [Symbol.iterator](): MapIterator<[StyleProp, SharedStyle]>; } /** @public */ export declare class Rectangle2d extends Polygon2d { private _x; private _y; private _w; private _h; constructor(config: Omit & { height: number; width: number; x?: number; y?: number; }); getBounds(): Box; getSvgPathData(): string; private negativeZeroFix; } /** @public */ export declare function refreshPage(): void; /** @public */ export declare function releasePointerCapture(element: Element, event: PointerEvent | React.PointerEvent): void; /** @public */ export declare type RequiredKeys = Required> & Omit; /** @public */ export declare function resizeBox(shape: T, info: { handle: TLResizeHandle; initialBounds: Box; initialShape: T; mode: TLResizeMode; newPoint: VecModel; scaleX: number; scaleY: number; }, opts?: ResizeBoxOptions): T; /** @public */ export declare interface ResizeBoxOptions { minWidth?: number; maxWidth?: number; minHeight?: number; maxHeight?: number; } /** * Resize a shape that has a scale prop. * * @param shape - The shape to resize * @param info - The resize info * * @public */ export declare function resizeScaled(shape: TLBaseShape, { initialBounds, scaleX, scaleY, newPoint, handle }: TLResizeInfo): { props: { scale: number; }; x: number; y: number; }; /** @public */ export declare type RichTextFontVisitor = (node: TiptapNode, state: RichTextFontVisitorState, addFont: (font: TLFontFace) => void) => RichTextFontVisitorState; /** @public */ export declare interface RichTextFontVisitorState { readonly family: string; readonly weight: string; readonly style: string; } /** @public */ export declare const ROTATE_CORNER_TO_SELECTION_CORNER: { readonly bottom_left_rotate: "bottom_left"; readonly bottom_right_rotate: "bottom_right"; readonly mobile_rotate: "top_left"; readonly top_left_rotate: "top_left"; readonly top_right_rotate: "top_right"; }; /** @public */ export declare type RotateCorner = 'bottom_left_rotate' | 'bottom_right_rotate' | 'mobile_rotate' | 'top_left_rotate' | 'top_right_rotate'; /** @public */ export declare function rotateSelectionHandle(handle: SelectionHandle, rotation: number): SelectionHandle; /** @public */ export declare const runtime: { hardReset(): Promise; openWindow(url: string, target: string, allowReferrer?: boolean): void; refreshPage(): void; }; /** * The DOM requires that all IDs are unique. We often use e.g. shape IDs in the dom, but this isn't * safe: if tldraw is rendered twice, or an SVG export is taking place, the IDs will clash and the * browser will do weird things. This type is used to mark IDs that are unique and safe to use. * * Use {@link useUniqueSafeId} to generate a unique safe ID. Use {@link useSharedSafeId} to generate * the same ID across multiple components, but unique within a single tldraw/editor instance. * * @public */ export declare type SafeId = string & { __brand: 'SafeId'; }; /** @public */ export declare function sanitizeId(id: string): string; /** @public */ export declare interface ScribbleItem { id: string; scribble: TLScribble; timeoutMs: number; delayRemaining: number; prev: null | VecModel; next: null | VecModel; } /** @public */ export declare class ScribbleManager { private editor; private sessions; constructor(editor: Editor); /** * Start a new session for grouping scribbles. * Returns a session ID that can be used with other session methods. * * @param options - Session configuration * @returns Session ID * @public */ startSession(options?: ScribbleSessionOptions): string; /** * Add a scribble to a session. * * @param sessionId - The session ID * @param scribble - Partial scribble properties * @param scribbleId - Optional scribble ID * @public */ addScribbleToSession(sessionId: string, scribble: Partial, scribbleId?: string): ScribbleItem; /** * Add a point to a scribble in a session. * * @param sessionId - The session ID * @param scribbleId - The scribble ID * @param x - X coordinate * @param y - Y coordinate * @param z - Z coordinate (pressure) * @public */ addPointToSession(sessionId: string, scribbleId: string, x: number, y: number, z?: number): ScribbleItem; /** * Extend a session, resetting its idle timeout. * * @param sessionId - The session ID * @public */ extendSession(sessionId: string): void; /** * Stop a session, triggering fade-out. * * @param sessionId - The session ID * @public */ stopSession(sessionId: string): void; /** * Clear all scribbles in a session immediately. * * @param sessionId - The session ID * @public */ clearSession(sessionId: string): void; /** * Check if a session is active. * * @param sessionId - The session ID * @public */ isSessionActive(sessionId: string): boolean; /** * Add a scribble using the default self-consuming behavior. * Creates an implicit session for the scribble. * * @param scribble - Partial scribble properties * @param id - Optional scribble id * @returns The created scribble item * @public */ addScribble(scribble: Partial, id?: string): ScribbleItem; /** * Add a point to a scribble. Searches all sessions. * * @param id - The scribble id * @param x - X coordinate * @param y - Y coordinate * @param z - Z coordinate (pressure) * @public */ addPoint(id: string, x: number, y: number, z?: number): ScribbleItem; /** * Mark a scribble as complete (done being drawn but not yet fading). * Searches all sessions. * * @param id - The scribble id * @public */ complete(id: string): ScribbleItem; /** * Stop a scribble. Searches all sessions. * * @param id - The scribble id * @public */ stop(id: string): ScribbleItem; /** * Stop and remove all sessions. * * @public */ reset(): void; /** * Update on each animation frame. * * @param elapsed - The number of milliseconds since the last tick. * @public */ tick(elapsed: number): void; private resetIdleTimeout; private clearIdleTimeout; private tickSession; private tickSessionItems; private tickPersistentItem; private tickSelfConsumingItem; private tickGroupedFade; } /** @public */ export declare interface ScribbleSessionOptions { /** Session id. Auto-generated if not provided. */ id?: string; /** * Whether scribbles self-consume (shrink from start) while drawing. * - true: scribbles eat their own tail as you draw (default, used for eraser/select) * - false: scribbles persist until session stops (used for laser) */ selfConsume?: boolean; /** * How long to wait after last activity before auto-stopping the session. * Only applies when selfConsume is false. */ idleTimeoutMs?: number; /** * How scribbles fade when stopping. * - 'individual': each scribble fades on its own (default) * - 'grouped': all scribbles fade together as one sequence */ fadeMode?: 'grouped' | 'individual'; /** * Easing for grouped fade. */ fadeEasing?: 'ease-in' | 'linear'; /** * Duration of the fade in milliseconds. */ fadeDurationMs?: number; } /** @public */ export declare type SelectionCorner = 'bottom_left' | 'bottom_right' | 'top_left' | 'top_right'; /** @public */ export declare type SelectionEdge = 'bottom' | 'left' | 'right' | 'top'; /** @public */ export declare type SelectionHandle = SelectionCorner | SelectionEdge; /** @public */ export declare function setPointerCapture(element: Element, event: PointerEvent | React.PointerEvent): void; /** @public */ export declare function setRuntimeOverrides(input: Partial): void; /** @public */ export declare function setUserPreferences(user: TLUserPreferences): void; /** @public */ export declare abstract class ShapeUtil { editor: Editor; /** Configure this shape utils {@link ShapeUtil.options | `options`}. */ static configure>(this: T, options: T extends new (...args: any[]) => { options: infer Options; } ? Partial : never): T; constructor(editor: Editor); /** * Options for this shape util. If you're implementing a custom shape util, you can override * this to provide customization options for your shape. If using an existing shape util, you * can customizing this by calling {@link ShapeUtil.configure}. */ options: {}; /** * Props allow you to define the shape's properties in a way that the editor can understand. * This has two main uses: * * 1. Validation. Shapes will be validated using these props to stop bad data from being saved. * 2. Styles. Each {@link @tldraw/tlschema#StyleProp} in the props can be set on many shapes at * once, and will be remembered from one shape to the next. * * @example * ```tsx * import {T, TLBaseShape, TLDefaultColorStyle, DefaultColorStyle, ShapeUtil} from 'tldraw' * * type MyShape = TLBaseShape<'mine', { * color: TLDefaultColorStyle, * text: string, * }> * * class MyShapeUtil extends ShapeUtil { * static props = { * // we use tldraw's built-in color style: * color: DefaultColorStyle, * // validate that the text prop is a string: * text: T.string, * } * } * ``` */ static props?: RecordProps; /** * Migrations allow you to make changes to a shape's props over time. Read the * {@link https://www.tldraw.dev/docs/persistence#Shape-props-migrations | shape prop migrations} * guide for more information. */ static migrations?: LegacyMigrations | MigrationSequence | TLPropsMigrations; /** * The type of the shape util, which should match the shape's type. * * @public */ static type: string; /** * Get the default props for a shape. * * @public */ abstract getDefaultProps(): Shape['props']; /** * Get the shape's geometry. * * @param shape - The shape. * @param opts - Additional options for the request. * @public */ abstract getGeometry(shape: Shape, opts?: TLGeometryOpts): Geometry2d; /** * Get a JSX element for the shape (as an HTML element). * * @param shape - The shape. * @public */ abstract component(shape: Shape): any; /** * Get JSX describing the shape's indicator (as an SVG element). * * @param shape - The shape. * @public */ abstract indicator(shape: Shape): any; /** * Whether to use the legacy React-based indicator rendering. * * Override this to return `false` if your shape implements {@link ShapeUtil.getIndicatorPath} * for canvas-based indicator rendering. * * @returns `true` to use SVG indicators (default), `false` to use canvas indicators. * @public */ useLegacyIndicator(): boolean; /** * Get a Path2D for rendering the shape's indicator on the canvas. * * When implemented, this is used instead of {@link ShapeUtil.indicator} for more * efficient canvas-based indicator rendering. Shapes that return `undefined` will * fall back to SVG-based rendering via {@link ShapeUtil.indicator}. * * For complex indicators that need clipping (e.g., arrows with labels), return an * object with `path`, `clipPath`, and `additionalPaths` properties. * * @param shape - The shape. * @returns A Path2D to stroke, or an object with clipping info, or undefined to use SVG fallback. * @public */ getIndicatorPath(shape: Shape): TLIndicatorPath | undefined; /** * Get the font faces that should be rendered in the document in order for this shape to render * correctly. * * @param shape - The shape. * @public */ getFontFaces(shape: Shape): TLFontFace[]; /** * Whether the shape can be snapped to by another shape. * * @param shape - The shape. * @public */ canSnap(shape: Shape): boolean; /** * Whether the shape can be tabbed to. * * @param shape - The shape. * @public */ canTabTo(shape: Shape): boolean; /** * Whether the shape can be scrolled while editing. * * @public */ canScroll(shape: Shape): boolean; /** * Whether the shape can be bound to. See {@link TLShapeUtilCanBindOpts} for details. * * @public */ canBind(_opts: TLShapeUtilCanBindOpts): boolean; /** * Whether the shape can be double clicked to edit. * * @public */ canEdit(shape: Shape, info: TLEditStartInfo): boolean; /** * Whether the shape can be resized. * * @public */ canResize(shape: Shape): boolean; /** * When the shape is resized, whether the shape's children should also be resized. * * @public */ canResizeChildren(shape: Shape): boolean; /** * Whether the shape can be edited in read-only mode. * * @public */ canEditInReadonly(shape: Shape): boolean; /** * Whether the shape can be edited while locked or while an ancestor is locked. * * @public */ canEditWhileLocked(shape: Shape): boolean; /** * Whether the shape can be cropped. * * @public */ canCrop(shape: Shape): boolean; /** * Whether the shape can participate in layout functions such as alignment or distribution. * * @param shape - The shape. * @param info - Additional context information: the type of action causing the layout and the * @public * * @public */ canBeLaidOut(shape: Shape, info: TLShapeUtilCanBeLaidOutOpts): boolean; /** * Whether this shape can be culled. By default, shapes are culled for * performance reasons when they are outside of the viewport. Culled shapes are still rendered * to the DOM, but have their `display` property set to `none`. * * @param shape - The shape. */ canCull(shape: Shape): boolean; /* Excluded from this release type: providesBackgroundForChildren */ /** * Get the clip path to apply to this shape's children. * * The returned points should define the **inner** clip boundary - the area where * children will be visible. If your shape has a stroke, you should inset the clip * path by half the stroke width so children are clipped to the inner edge of the * stroke rather than its center line. * * @example * ```ts * override getClipPath(shape: MyShape): Vec[] | undefined { * const strokeWidth = 2 * const inset = strokeWidth / 2 * // Return points inset by half the stroke width * return [ * new Vec(inset, inset), * new Vec(shape.props.w - inset, inset), * new Vec(shape.props.w - inset, shape.props.h - inset), * new Vec(inset, shape.props.h - inset), * ] * } * ``` * * @param shape - The shape to get the clip path for * @returns Array of points defining the clipping polygon in local coordinates, or undefined if no clipping * @public */ getClipPath?(shape: Shape): undefined | Vec[]; /** * Whether a specific child shape should be clipped by this shape. * Only called if getClipPath returns a valid polygon. * * If not defined, the default behavior is to clip all children. * * @param child - The child shape to check * @returns boolean indicating if this child should be clipped * @public */ shouldClipChild?(child: TLShape): boolean; /** * Whether a specific shape should hide in the minimap. * * If not defined, the default behavior is to show all shapes in the minimap. * * @returns boolean indicating if this shape should hide in the minimap * @public */ hideInMinimap?(shape: Shape): boolean; /** * Whether the shape should hide its resize handles when selected. * * @public */ hideResizeHandles(shape: Shape): boolean; /** * Whether the shape should hide its rotation handles when selected. * * @public */ hideRotateHandle(shape: Shape): boolean; /** * Whether the shape should hide its selection bounds background when selected. * * @public */ hideSelectionBoundsBg(shape: Shape): boolean; /** * Whether the shape should hide its selection bounds foreground when selected. * * @public */ hideSelectionBoundsFg(shape: Shape): boolean; /** * Whether the shape's aspect ratio is locked. * * @public */ isAspectRatioLocked(shape: Shape): boolean; /** * By default, the bounds of an image export are the bounds of all the shapes it contains, plus * some padding. If an export includes a shape where `isExportBoundsContainer` is true, then the * padding is skipped _if the bounds of that shape contains all the other shapes_. This is * useful in cases like annotating on top of an image, where you usually want to avoid extra * padding around the image if you don't need it. * * @param shape - The shape to check * @returns True if this shape should be treated as an export bounds container */ isExportBoundsContainer(shape: Shape): boolean; /* Excluded from this release type: backgroundComponent */ /** * Get the interpolated props for an animating shape. This is an optional method. * * @example * * ```ts * util.getInterpolatedProps?.(startShape, endShape, t) * ``` * * @param startShape - The initial shape. * @param endShape - The initial shape. * @param progress - The normalized progress between zero (start) and 1 (end). * @public */ getInterpolatedProps?(startShape: Shape, endShape: Shape, progress: number): Shape['props']; /** * Get an array of handle models for the shape. This is an optional method. * * @example * * ```ts * util.getHandles?.(myShape) * ``` * * @param shape - The shape. * @public */ getHandles?(shape: Shape): TLHandle[]; /** * Get whether the shape can receive children of a given type. * * @param shape - The shape. * @param type - The shape type. * @public */ canReceiveNewChildrenOfType(shape: Shape, _type: TLShape['type']): boolean; /** * Get the shape as an SVG object. * * @param shape - The shape. * @param ctx - The export context for the SVG - used for adding e.g. \s * @returns An SVG element. * @public */ toSvg?(shape: Shape, ctx: SvgExportContext): null | Promise | ReactElement; /** * Get the shape's background layer as an SVG object. * * @param shape - The shape. * @param ctx - ctx - The export context for the SVG - used for adding e.g. \s * @returns An SVG element. * @public */ toBackgroundSvg?(shape: Shape, ctx: SvgExportContext): null | Promise | ReactElement; /* Excluded from this release type: expandSelectionOutlinePx */ /** * Return elements to be added to the \ section of the canvases SVG context. This can be * used to define SVG content (e.g. patterns & masks) that can be referred to by ID from svg * elements returned by `component`. * * Each def should have a unique `key`. If multiple defs from different shapes all have the same * key, only one will be used. */ getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[]; /** * Get the geometry to use when snapping to this this shape in translate/resize operations. See * {@link BoundsSnapGeometry} for details. */ getBoundsSnapGeometry(shape: Shape): BoundsSnapGeometry; /** * Get the geometry to use when snapping handles to this shape. See {@link HandleSnapGeometry} * for details. */ getHandleSnapGeometry(shape: Shape): HandleSnapGeometry; getText(shape: Shape): string | undefined; getAriaDescriptor(shape: Shape): string | undefined; /** * A callback called just before a shape is created. This method provides a last chance to modify * the created shape. * * @example * * ```ts * onBeforeCreate = (next) => { * return { ...next, x: next.x + 1 } * } * ``` * * @param next - The next shape. * @returns The next shape or void. * @public */ onBeforeCreate?(next: Shape): Shape | void; /** * A callback called just before a shape is updated. This method provides a last chance to modify * the updated shape. * * @example * * ```ts * onBeforeUpdate = (prev, next) => { * if (prev.x === next.x) { * return { ...next, x: next.x + 1 } * } * } * ``` * * @param prev - The previous shape. * @param next - The next shape. * @returns The next shape or void. * @public */ onBeforeUpdate?(prev: Shape, next: Shape): Shape | void; /** * A callback called when a shape changes from a crop. * * @param shape - The shape at the start of the crop. * @param info - Info about the crop. * @returns A change to apply to the shape, or void. * @public */ onCrop?(shape: Shape, info: TLCropInfo): Omit, 'id' | 'type'> | undefined | void; /** * A callback called when some other shapes are dragged into this one. This fires when the shapes are dragged over the shape for the first time. * * @param shape - The shape. * @param shapes - The shapes that are being dragged in. * @public */ onDragShapesIn?(shape: Shape, shapes: TLShape[], info: TLDragShapesInInfo): void; /** * A callback called when some other shapes are dragged over this one. This fires when the shapes are dragged over the shape for the first time (after the onDragShapesIn callback), and again on every update while the shapes are being dragged. * * @example * * ```ts * onDragShapesOver = (shape, shapes) => { * this.editor.reparentShapes(shapes, shape.id) * } * ``` * * @param shape - The shape. * @param shapes - The shapes that are being dragged over this one. * @public */ onDragShapesOver?(shape: Shape, shapes: TLShape[], info: TLDragShapesOverInfo): void; /** * A callback called when some other shapes are dragged out of this one. * * @param shape - The shape. * @param shapes - The shapes that are being dragged out. * @public */ onDragShapesOut?(shape: Shape, shapes: TLShape[], info: TLDragShapesOutInfo): void; /** * A callback called when some other shapes are dropped over this one. * * @param shape - The shape. * @param shapes - The shapes that are being dropped over this one. * @public */ onDropShapesOver?(shape: Shape, shapes: TLShape[], info: TLDropShapesOverInfo): void; /** * A callback called when a shape starts being resized. * * @param shape - The shape. * @returns A change to apply to the shape, or void. * @public */ onResizeStart?(shape: Shape): TLShapePartial | void; /** * A callback called when a shape changes from a resize. * * @param shape - The shape at the start of the resize. * @param info - Info about the resize. * @returns A change to apply to the shape, or void. * @public */ onResize?(shape: Shape, info: TLResizeInfo): Omit, 'id' | 'type'> | undefined | void; /** * A callback called when a shape finishes resizing. * * @param initial - The shape at the start of the resize. * @param current - The current shape. * @returns A change to apply to the shape, or void. * @public */ onResizeEnd?(initial: Shape, current: Shape): TLShapePartial | void; /** * A callback called when a shape resize is cancelled. * * @param initial - The shape at the start of the resize. * @param current - The current shape. * @public */ onResizeCancel?(initial: Shape, current: Shape): void; /** * A callback called when a shape starts being translated. * * @param shape - The shape. * @returns A change to apply to the shape, or void. * @public */ onTranslateStart?(shape: Shape): TLShapePartial | void; /** * A callback called when a shape changes from a translation. * * @param initial - The shape at the start of the translation. * @param current - The current shape. * @returns A change to apply to the shape, or void. * @public */ onTranslate?(initial: Shape, current: Shape): TLShapePartial | void; /** * A callback called when a shape finishes translating. * * @param initial - The shape at the start of the translation. * @param current - The current shape. * @returns A change to apply to the shape, or void. * @public */ onTranslateEnd?(initial: Shape, current: Shape): TLShapePartial | void; /** * A callback called when a shape translation is cancelled. * * @param initial - The shape at the start of the translation. * @param current - The current shape. * @public */ onTranslateCancel?(initial: Shape, current: Shape): void; /** * A callback called when a shape's handle starts being dragged. * * @param shape - The shape. * @param info - An object containing the handle and whether the handle is 'precise' or not. * @returns A change to apply to the shape, or void. * @public */ onHandleDragStart?(shape: Shape, info: TLHandleDragInfo): TLShapePartial | void; /** * A callback called when a shape's handle changes. * * @param shape - The current shape. * @param info - An object containing the handle and whether the handle is 'precise' or not. * @returns A change to apply to the shape, or void. * @public */ onHandleDrag?(shape: Shape, info: TLHandleDragInfo): TLShapePartial | void; /** * A callback called when a shape's handle finishes being dragged. * * @param current - The current shape. * @param info - An object containing the handle and whether the handle is 'precise' or not. * @returns A change to apply to the shape, or void. * @public */ onHandleDragEnd?(current: Shape, info: TLHandleDragInfo): TLShapePartial | void; /** * A callback called when a shape's handle drag is cancelled. * * @param current - The current shape. * @param info - An object containing the handle and whether the handle is 'precise' or not. * @public */ onHandleDragCancel?(current: Shape, info: TLHandleDragInfo): void; /** * A callback called when a shape starts being rotated. * * @param shape - The shape. * @returns A change to apply to the shape, or void. * @public */ onRotateStart?(shape: Shape): TLShapePartial | void; /** * A callback called when a shape changes from a rotation. * * @param initial - The shape at the start of the rotation. * @param current - The current shape. * @returns A change to apply to the shape, or void. * @public */ onRotate?(initial: Shape, current: Shape): TLShapePartial | void; /** * A callback called when a shape finishes rotating. * * @param initial - The shape at the start of the rotation. * @param current - The current shape. * @returns A change to apply to the shape, or void. * @public */ onRotateEnd?(initial: Shape, current: Shape): TLShapePartial | void; /** * A callback called when a shape rotation is cancelled. * * @param initial - The shape at the start of the rotation. * @param current - The current shape. * @public */ onRotateCancel?(initial: Shape, current: Shape): void; /* Excluded from this release type: onBindingChange */ /** * A callback called when a shape's children change. * * @param shape - The shape. * @returns An array of shape updates, or void. * @public */ onChildrenChange?(shape: Shape): TLShapePartial[] | void; /** * A callback called when a shape's handle is double clicked. * * @param shape - The shape. * @param handle - The handle that is double-clicked. * @returns A change to apply to the shape, or void. * @public */ onDoubleClickHandle?(shape: Shape, handle: TLHandle): TLShapePartial | void; /** * A callback called when a shape's edge is double clicked. * * @param shape - The shape. * @param info - Info about the edge. * @returns A change to apply to the shape, or void. * @public */ onDoubleClickEdge?(shape: Shape, info: TLClickEventInfo): TLShapePartial | void; /** * A callback called when a shape's corner is double clicked. * * @param shape - The shape. * @param info - Info about the corner. * @returns A change to apply to the shape, or void. * @public */ onDoubleClickCorner?(shape: Shape, info: TLClickEventInfo): TLShapePartial | void; /** * A callback called when a shape is double clicked. * * @param shape - The shape. * @returns A change to apply to the shape, or void. * @public */ onDoubleClick?(shape: Shape): TLShapePartial | void; /** * A callback called when a shape is clicked. * * @param shape - The shape. * @returns A change to apply to the shape, or void. * @public */ onClick?(shape: Shape): TLShapePartial | void; /** * A callback called when a shape starts being edited. * * @param shape - The shape. * @public */ onEditStart?(shape: Shape): void; /** * A callback called when a shape finishes being edited. * * @param shape - The shape. * @public */ onEditEnd?(shape: Shape): void; } /** * The value of a particular {@link @tldraw/tlschema#StyleProp}. * * A `mixed` style means that in the current selection, there are lots of different values for the * same style prop - e.g. a red and a blue shape are selected. * * A `shared` style means that all shapes in the selection share the same value for this style prop. * * @public */ export declare type SharedStyle = { readonly type: 'mixed'; } | { readonly type: 'shared'; readonly value: T; }; /* Excluded from this release type: SharedStyleMap */ /** * Get the short angle distance between two angles. * * @param a0 - The first angle. * @param a1 - The second angle. * @public */ export declare function shortAngleDist(a0: number, a1: number): number; /** @public */ export declare const SIDES: readonly ["top", "right", "bottom", "left"]; /** @public */ export declare const SIN: (x: number) => number; /** * Clamp rotation to even segments. * * @param r - The rotation in radians. * @param segments - The number of segments. * @public */ export declare function snapAngle(r: number, segments: number): number; /** @public */ export declare interface SnapData { nudge: Vec; } /** @public */ export declare type SnapIndicator = GapsSnapIndicator | PointsSnapIndicator; /** @public */ export declare class SnapManager { readonly editor: Editor; readonly shapeBounds: BoundsSnaps; readonly handles: HandleSnaps; private _snapIndicators; constructor(editor: Editor); getIndicators(): SnapIndicator[]; clearIndicators(): void; setIndicators(indicators: SnapIndicator[]): void; getSnapThreshold(): number; getSnappableShapes(): Set; getCurrentCommonAncestor(): TLShapeId | undefined; } /* Excluded from this release type: SpatialIndexManager */ /** @public */ export declare class Stadium2d extends Geometry2d { config: Omit & { height: number; width: number; }; private _w; private _h; private _a; private _b; private _c; private _d; constructor(config: Omit & { height: number; width: number; }); nearestPoint(A: VecLike): Vec; hitTestLineSegment(A: VecLike, B: VecLike): boolean; getVertices(): Vec[]; getBounds(): Box; getLength(): number; getSvgPathData(): string; } /** @public */ export declare abstract class StateNode implements Partial { editor: Editor; performanceTracker: PerformanceTracker; constructor(editor: Editor, parent?: StateNode); static id: string; static initial?: string; static children?: () => TLStateNodeConstructor[]; static isLockable: boolean; static useCoalescedEvents: boolean; id: string; type: 'branch' | 'leaf' | 'root'; shapeType?: string; initial?: string; children?: Record; isLockable: boolean; useCoalescedEvents: boolean; parent: StateNode; /** * This node's path of active state nodes * * @public */ getPath(): string; _path: Computed; /** * This node's current active child node, if any. * * @public */ getCurrent(): StateNode | undefined; private _current; /** * Whether this node is active. * * @public */ getIsActive(): boolean; private _isActive; /** * Transition to a new active child state node. * * @example * ```ts * parentState.transition('childStateA') * parentState.transition('childStateB', { myData: 4 }) *``` * * @param id - The id of the child state node to transition to. * @param info - Any data to pass to the `onEnter` and `onExit` handlers. * * @public */ transition(id: string, info?: any): this; handleEvent(info: Exclude): void; enter(info: any, from: string): void; exit(info: any, to: string): void; /** * This is a hack / escape hatch that will tell the editor to * report a different state as active (in `getCurrentToolId()`) when * this state is active. This is usually used when a tool transitions * to a child of a different state for a certain interaction and then * returns to the original tool when that interaction completes; and * where we would want to show the original tool as active in the UI. * * @public */ _currentToolIdMask: Atom; getCurrentToolIdMask(): string | undefined; setCurrentToolIdMask(id: string | undefined): void; /** * Add a child node to this state node. * * @public */ addChild(childConstructor: TLStateNodeConstructor): this; onWheel?(info: TLWheelEventInfo): void; onPointerDown?(info: TLPointerEventInfo): void; onPointerMove?(info: TLPointerEventInfo): void; onLongPress?(info: TLPointerEventInfo): void; onPointerUp?(info: TLPointerEventInfo): void; onDoubleClick?(info: TLClickEventInfo): void; onTripleClick?(info: TLClickEventInfo): void; onQuadrupleClick?(info: TLClickEventInfo): void; onRightClick?(info: TLPointerEventInfo): void; onMiddleClick?(info: TLPointerEventInfo): void; onKeyDown?(info: TLKeyboardEventInfo): void; onKeyUp?(info: TLKeyboardEventInfo): void; onKeyRepeat?(info: TLKeyboardEventInfo): void; onCancel?(info: TLCancelEventInfo): void; onComplete?(info: TLCompleteEventInfo): void; onInterrupt?(info: TLInterruptEventInfo): void; onTick?(info: TLTickEventInfo): void; onEnter?(info: any, from: string): void; onExit?(info: any, to: string): void; } /** * Calls `event.stopPropagation()`. * * @deprecated Use {@link Editor.markEventAsHandled} instead, or manually call `event.stopPropagation()` if * that's what you really want. * * @public */ export declare const stopEventPropagation: (e: any) => any; /* Excluded from this release type: StoreName */ /** @public */ export declare function suffixSafeId(id: SafeId, suffix: string): SafeId; /** @public @react */ export declare function SVGContainer({ children, className, ...rest }: SVGContainerProps): JSX.Element; /** @public */ export declare type SVGContainerProps = React_2.ComponentProps<'svg'>; /** @public */ export declare interface SvgExportContext { /** * Add contents to the `` section of the export SVG. Each export def should have a unique * key. If multiple defs come with the same key, only one will be added. */ addExportDef(def: SvgExportDef): void; /** * Cause the SVG export to be delayed until the returned promise is resolved. This is useful if * e.g. your shape loads data dynamically, and you need to prevent the export from happening * until after the data is loaded. * * See also the {@link useDelaySvgExport} hook, which may be a more convenient way to use this * method depending on your use-case. */ waitUntil(promise: Promise): void; /** * Resolve an asset URL in the context of this export. Supply the asset ID and the width in * shape-pixels it'll be displayed at, and this will resolve the asset according to the export * options. */ resolveAssetUrl(assetId: TLAssetId, width: number): Promise; /** * Whether the export should be in dark mode. */ readonly isDarkMode: boolean; /** * The scale of the export - how much CSS pixels will be scaled up/down by. */ readonly scale: number; /** * Use this value to optionally downscale images in the export. If we're exporting directly to * an SVG, this will usually be null, and you shouldn't downscale images. If the export is to a * raster format like PNG, this will be the number of raster pixels in the resulting bitmap per * CSS pixel in the resulting SVG. */ readonly pixelRatio: null | number; } /** @public */ export declare interface SvgExportDef { key: string; getElement(): null | Promise | ReactElement; } /** * A string that is unique per browser tab * @public */ export declare const TAB_ID: string; /* Excluded from this release type: Table */ /** @public */ export declare class TextManager { editor: Editor; private elm; constructor(editor: Editor); private setElementStyles; dispose(): void; measureText(textToMeasure: string, opts: TLMeasureTextOpts): BoxModel & { scrollWidth: number; }; measureHtml(html: string, opts: TLMeasureTextOpts): BoxModel & { scrollWidth: number; }; /** * Given an html element, measure the position of each span of unbroken * word/white-space characters within any text nodes it contains. */ measureElementTextNodeSpans(element: HTMLElement, { shouldTruncateToFirstLine }?: { shouldTruncateToFirstLine?: boolean; }): { didTruncate: boolean; spans: { box: BoxModel; text: string; }[]; }; /** * Measure text into individual spans. Spans are created by rendering the * text, then dividing it up according to line breaks and word boundaries. * * It works by having the browser render the text, then measuring the * position of each character. You can use this to replicate the text-layout * algorithm of the current browser in e.g. an SVG export. */ measureTextSpans(textToMeasure: string, opts: TLMeasureTextSpanOpts): { box: BoxModel; text: string; }[]; } /* Excluded from this release type: TickManager */ /** * This is the TipTap editor! Docs are {@link https://tiptap.dev/docs}. * * @public */ export declare type TiptapEditor = Editor_2; /** * A TipTap node. See {@link https://tiptap.dev/docs}. * @public */ export declare type TiptapNode = Node_2; /** @public */ export declare type TLAdjacentDirection = 'down' | 'left' | 'next' | 'prev' | 'right' | 'up'; /** @public */ export declare type TLAnyBindingUtilConstructor = TLBindingUtilConstructor; /** @public */ export declare type TLAnyShapeUtilConstructor = TLShapeUtilConstructor; /** @public */ export declare type TLBaseBoxShape = ExtractShapeByProps<{ h: number; w: number; }>; /** @public */ export declare interface TLBaseEventInfo { type: UiEventType; shiftKey: boolean; altKey: boolean; ctrlKey: boolean; metaKey: boolean; accelKey: boolean; } /** @public */ export declare interface TLBaseExternalContent { sources?: TLExternalContentSource[]; point?: VecLike; } /** @public */ export declare interface TLBindingUtilConstructor = BindingUtil> { new (editor: Editor): U; type: T['type']; /** Validations for this binding's props. */ props?: RecordProps; /** Migrations for this binding's props. */ migrations?: TLPropsMigrations; } /** @public */ export declare interface TLBrushProps { userId?: string; brush: BoxModel; color?: string; opacity?: number; className?: string; } /** @public */ export declare interface TLCameraConstraints { /** The bounds (in page space) of the constrained space */ bounds: BoxModel; /** The padding inside of the viewport (in screen space) */ padding: VecLike; /** The origin for placement. Used to position the bounds within the viewport when an axis is fixed or contained and zoom is below the axis fit. */ origin: VecLike; /** The camera's initial zoom, used also when the camera is reset. * * - `default`: Sets the initial zoom to 100%. * - `fit-x`: The x axis will completely fill the viewport bounds. * - `fit-y`: The y axis will completely fill the viewport bounds. * - `fit-min`: The smaller axis will completely fill the viewport bounds. * - `fit-max`: The larger axis will completely fill the viewport bounds. * - `fit-x-100`: The x axis will completely fill the viewport bounds, or 100% zoom, whichever is smaller. * - `fit-y-100`: The y axis will completely fill the viewport bounds, or 100% zoom, whichever is smaller. * - `fit-min-100`: The smaller axis will completely fill the viewport bounds, or 100% zoom, whichever is smaller. * - `fit-max-100`: The larger axis will completely fill the viewport bounds, or 100% zoom, whichever is smaller. */ initialZoom: 'default' | 'fit-max-100' | 'fit-max' | 'fit-min-100' | 'fit-min' | 'fit-x-100' | 'fit-x' | 'fit-y-100' | 'fit-y'; /** The camera's base for its zoom steps. * * - `default`: Sets the initial zoom to 100%. * - `fit-x`: The x axis will completely fill the viewport bounds. * - `fit-y`: The y axis will completely fill the viewport bounds. * - `fit-min`: The smaller axis will completely fill the viewport bounds. * - `fit-max`: The larger axis will completely fill the viewport bounds. * - `fit-x-100`: The x axis will completely fill the viewport bounds, or 100% zoom, whichever is smaller. * - `fit-y-100`: The y axis will completely fill the viewport bounds, or 100% zoom, whichever is smaller. * - `fit-min-100`: The smaller axis will completely fill the viewport bounds, or 100% zoom, whichever is smaller. * - `fit-max-100`: The larger axis will completely fill the viewport bounds, or 100% zoom, whichever is smaller. */ baseZoom: 'default' | 'fit-max-100' | 'fit-max' | 'fit-min-100' | 'fit-min' | 'fit-x-100' | 'fit-x' | 'fit-y-100' | 'fit-y'; /** The behavior for the constraints for both axes or each axis individually. * * - `free`: The bounds are ignored when moving the camera. * - 'fixed': The bounds will be positioned within the viewport based on the origin * - `contain`: The 'fixed' behavior will be used when the zoom is below the zoom level at which the bounds would fill the viewport; and when above this zoom, the bounds will use the 'inside' behavior. * - `inside`: The bounds will stay completely within the viewport. * - `outside`: The bounds will stay touching the viewport. */ behavior: 'contain' | 'fixed' | 'free' | 'inside' | 'outside' | { x: 'contain' | 'fixed' | 'free' | 'inside' | 'outside'; y: 'contain' | 'fixed' | 'free' | 'inside' | 'outside'; }; } /** @public */ export declare interface TLCameraMoveOptions { /** Whether to move the camera immediately, rather than on the next tick. */ immediate?: boolean; /** Whether to force the camera to move, even if the user's camera options have locked the camera. */ force?: boolean; /** Whether to reset the camera to its default position and zoom. */ reset?: boolean; /** An (optional) animation to use. */ animation?: { /** An easing function to apply to the animation's progress from start to end. */ easing?(t: number): number; /** The time the animation should take to arrive at the specified camera coordinates. */ duration?: number; }; } /** @public */ export declare interface TLCameraOptions { /** Whether the camera is locked. */ isLocked: boolean; /** The speed of a scroll wheel / trackpad pan. Default is 1. */ panSpeed: number; /** The speed of a scroll wheel / trackpad zoom. Default is 1. */ zoomSpeed: number; /** The steps that a user can zoom between with zoom in / zoom out. The first and last value will determine the min and max zoom. */ zoomSteps: number[]; /** Controls whether the wheel pans or zooms. * * - `zoom`: The wheel will zoom in and out. * - `pan`: The wheel will pan the camera. * - `none`: The wheel will do nothing. */ wheelBehavior: 'none' | 'pan' | 'zoom'; /** The camera constraints. */ constraints?: TLCameraConstraints; } /** @public */ export declare type TLCancelEvent = (info: TLCancelEventInfo) => void; /** @public */ export declare interface TLCancelEventInfo { type: 'misc'; name: 'cancel'; } /** @public */ export declare interface TLCanvasComponentProps { className?: string; } /** @public */ export declare type TLClickEvent = (info: TLClickEventInfo) => void; /** @public */ export declare type TLClickEventInfo = TLBaseEventInfo & { button: number; name: TLCLickEventName; phase: 'down' | 'settle' | 'up'; point: VecLike; pointerId: number; type: 'click'; } & TLPointerEventTarget; /** @public */ export declare type TLCLickEventName = 'double_click' | 'quadruple_click' | 'triple_click'; /** @public */ export declare type TLClickState = 'idle' | 'overflow' | 'pendingDouble' | 'pendingOverflow' | 'pendingQuadruple' | 'pendingTriple'; /** @public */ export declare interface TLCollaboratorHintProps { userId: string; className?: string; point: VecModel; viewport: Box; zoom: number; opacity?: number; color: string; } /** @public */ export declare type TLCompleteEvent = (info: TLCompleteEventInfo) => void; /** @public */ export declare interface TLCompleteEventInfo { type: 'misc'; name: 'complete'; } /** @public */ export declare interface TLContent { shapes: TLShape[]; bindings: TLBinding[] | undefined; rootShapeIds: TLShapeId[]; assets: TLAsset[]; schema: SerializedSchema; } /** * Info about a crop. * @param handle - The handle being dragged. * @param change - The distance the handle is moved. * @param initialShape - The shape at the start of the resize. * @public */ export declare interface TLCropInfo { handle: SelectionHandle; change: Vec; crop: TLShapeCrop; uncroppedSize: { h: number; w: number; }; initialShape: T; aspectRatioLocked?: boolean; } /** @public */ export declare interface TLCursorProps { userId: string; className?: string; point: null | VecModel; zoom: number; color?: string; name: null | string; chatMessage: string; } /** @public */ export declare type TLDeepLink = { bounds: BoxModel; pageId?: TLPageId; type: 'viewport'; } | { pageId: TLPageId; type: 'page'; } | { shapeIds: TLShapeId[]; type: 'shapes'; }; /** @public */ export declare interface TLDeepLinkOptions { /** * The name of the url search param to use for the deep link. * * Defaults to `'d'` */ param?: string; /** * The debounce time in ms for updating the url. */ debounceMs?: number; /** * Should return the current url to augment with a deep link query parameter. * If you supply this function, you must also supply an `onChange` function. */ getUrl?(editor: Editor): string | URL; /** * Should return the current deep link target. * Defaults to returning the current page and viewport position. */ getTarget?(editor: Editor): TLDeepLink; /** * This is fired when the URL is updated. * * If not supplied, the default behavior is to update `window.location`. * * @param url - the updated URL */ onChange?(url: URL, editor: Editor): void; } /** @public */ export declare interface TLDragShapesInInfo { initialDraggingOverShapeId: null | TLShapeId; prevDraggingOverShapeId: null | TLShapeId; initialParentIds: Map; initialIndices: Map; } /** @public */ export declare interface TLDragShapesOutInfo { nextDraggingOverShapeId: null | TLShapeId; initialDraggingOverShapeId: null | TLShapeId; initialParentIds: Map; initialIndices: Map; } /** @public */ export declare interface TLDragShapesOverInfo { initialDraggingOverShapeId: null | TLShapeId; initialParentIds: Map; initialIndices: Map; } /** @public @react */ export declare const TldrawEditor: React_3.NamedExoticComponent; /** * Base props for the {@link tldraw#Tldraw} and {@link TldrawEditor} components. * * @public */ export declare interface TldrawEditorBaseProps { /** * The component's children. */ children?: ReactNode; /** * An array of shape utils to use in the editor. */ shapeUtils?: readonly TLAnyShapeUtilConstructor[]; /** * An array of binding utils to use in the editor. */ bindingUtils?: readonly TLAnyBindingUtilConstructor[]; /** * An array of tools to add to the editor's state chart. */ tools?: readonly TLStateNodeConstructor[]; /** * Whether to automatically focus the editor when it mounts. */ autoFocus?: boolean; /** * Overrides for the editor's components, such as handles, collaborator cursors, etc. */ components?: TLEditorComponents; /** * Called when the editor has mounted. */ onMount?: TLOnMountHandler; /** * The editor's initial state (usually the id of the first active tool). */ initialState?: string; /** * A classname to pass to the editor's container. */ className?: string; /** * The user interacting with the editor. */ user?: TLUser; /** * Whether to infer dark mode from the user's OS. Defaults to false. */ inferDarkMode?: boolean; /** * Camera options for the editor. * * @deprecated Use `options.cameraOptions` instead. This will be removed in a future release. */ cameraOptions?: Partial; /** * Options for the editor. */ options?: Partial; /** * Text options for the editor. * * @deprecated Use `options.text` instead. This prop will be removed in a future release. */ textOptions?: TLTextOptions; /** * The license key. */ licenseKey?: string; /** * Options for syncing the editor's camera state with the URL. * * @deprecated Use `options.deepLinks` instead. This prop will be removed in a future release. */ deepLinks?: TLDeepLinkOptions | true; /** * Provides a way to hide shapes. * * Hidden shapes will not render in the editor, and they will not be eligible for hit test via * {@link @tldraw/editor#Editor.getShapeAtPoint} and {@link @tldraw/editor#Editor.getShapesAtPoint}. But otherwise they will * remain in the store and participate in all other operations. * * @example * ```ts * getShapeVisibility={(shape, editor) => shape.meta.hidden ? 'hidden' : 'inherit'} * ``` * * - `'inherit' | undefined` - (default) The shape will be visible unless its parent is hidden. * - `'hidden'` - The shape will be hidden. * - `'visible'` - The shape will be visible. * * @param shape - The shape to check. * @param editor - The editor instance. */ getShapeVisibility?(shape: TLShape, editor: Editor): 'hidden' | 'inherit' | 'visible' | null | undefined; /** * The URLs for the fonts to use in the editor. */ assetUrls?: { fonts?: { [key: string]: string | undefined; }; }; } /** * Props for the {@link tldraw#Tldraw} and {@link TldrawEditor} components. * * @public **/ export declare type TldrawEditorProps = TldrawEditorBaseProps & TldrawEditorStoreProps; /** @public */ export declare type TldrawEditorStoreProps = TldrawEditorWithoutStoreProps | TldrawEditorWithStoreProps; /** * Props for the {@link tldraw#Tldraw} and {@link TldrawEditor} components, when not passing in a * `TLStore` directly. If you would like to pass in a store directly, use * {@link TldrawEditorWithStoreProps}. * * @public */ export declare interface TldrawEditorWithoutStoreProps extends TLStoreBaseOptions { store?: undefined; /** * Additional migrations to use in the store */ migrations?: readonly MigrationSequence[]; /** * A starting snapshot of data to pre-populate the store. Do not supply both this and * `initialData`. */ snapshot?: TLEditorSnapshot | TLStoreSnapshot; /** * If you would like to persist the store to the browser's local IndexedDB storage and sync it * across tabs, provide a key here. Each key represents a single tldraw document. */ persistenceKey?: string; sessionId?: string; } /** * Props for the {@link tldraw#Tldraw} and {@link TldrawEditor} components, when passing in a * `TLStore` directly. If you would like tldraw to create a store for you, use * {@link TldrawEditorWithoutStoreProps}. * * @public */ export declare interface TldrawEditorWithStoreProps { /** * The store to use in the editor. */ store: TLStore | TLStoreWithStatus; } /** * Options for configuring tldraw. For defaults, see {@link defaultTldrawOptions}. * * @example * ```tsx * const options: Partial = { * maxPages: 3, * maxShapesPerPage: 1000, * } * * function MyTldrawComponent() { * return * } * ``` * * @public */ export declare interface TldrawOptions { readonly maxShapesPerPage: number; readonly maxFilesAtOnce: number; readonly maxPages: number; readonly animationMediumMs: number; readonly followChaseViewportSnap: number; readonly doubleClickDurationMs: number; readonly multiClickDurationMs: number; readonly coarseDragDistanceSquared: number; readonly dragDistanceSquared: number; readonly uiDragDistanceSquared: number; readonly uiCoarseDragDistanceSquared: number; readonly defaultSvgPadding: number; readonly cameraSlideFriction: number; readonly gridSteps: readonly { readonly mid: number; readonly min: number; readonly step: number; }[]; readonly collaboratorInactiveTimeoutMs: number; readonly collaboratorIdleTimeoutMs: number; readonly collaboratorCheckIntervalMs: number; readonly cameraMovingTimeoutMs: number; readonly hitTestMargin: number; readonly edgeScrollDelay: number; readonly edgeScrollEaseDuration: number; readonly edgeScrollSpeed: number; readonly edgeScrollDistance: number; readonly coarsePointerWidth: number; readonly coarseHandleRadius: number; readonly handleRadius: number; readonly longPressDurationMs: number; readonly textShadowLod: number; readonly adjacentShapeMargin: number; readonly flattenImageBoundsExpand: number; readonly flattenImageBoundsPadding: number; readonly laserDelayMs: number; /** * How long (in milliseconds) to fade all laser scribbles after the session ends. * The total points across all scribbles will be removed proportionally over this duration. * Defaults to 500ms (0.5 seconds). */ readonly laserFadeoutMs: number; readonly maxExportDelayMs: number; readonly tooltipDelayMs: number; /** * How long should previews created by {@link Editor.createTemporaryAssetPreview} last before * they expire? Defaults to 3 minutes. */ readonly temporaryAssetPreviewLifetimeMs: number; readonly actionShortcutsLocation: 'menu' | 'swap' | 'toolbar'; readonly createTextOnCanvasDoubleClick: boolean; /** * The react provider to use when exporting an image. This is useful if your shapes depend on * external context providers. By default, this is `React.Fragment`. */ readonly exportProvider: ComponentType<{ children: React.ReactNode; }>; /** * By default, the toolbar items are accessible via number shortcuts according to their order. To disable this, set this option to false. */ readonly enableToolbarKeyboardShortcuts: boolean; /** * The maximum number of fonts that will be loaded while blocking the main rendering of the * canvas. If there are more than this number of fonts needed, we'll just show the canvas right * away and let the fonts load in in the background. */ readonly maxFontsToLoadBeforeRender: number; /** * If you have a CSP policy that blocks inline styles, you can use this prop to provide a * nonce to use in the editor's styles. */ readonly nonce: string | undefined; /** * Branding name of the app, currently only used for adding aria-label for the application. */ readonly branding?: string; /** * Whether to use debounced zoom level for certain rendering optimizations. When true, * `editor.getEfficientZoomLevel()` returns a cached zoom value while the camera is moving, * reducing re-renders. When false, it always returns the current zoom level. */ readonly debouncedZoom: boolean; /** * The number of shapes that must be on the page for the debounced zoom level to be used. * Defaults to 500 shapes. */ readonly debouncedZoomThreshold: number; /** * Whether to allow spacebar panning. When true, the spacebar will pan the camera when held down. * When false, the spacebar will not pan the camera. */ readonly spacebarPanning: boolean; /** * The default padding (in pixels) used when zooming to fit content in the viewport. * This affects methods like `zoomToFit()`, `zoomToSelection()`, and `zoomToBounds()`. * The actual padding used is the minimum of this value and 28% of the viewport width. * Defaults to 128 pixels. */ readonly zoomToFitPadding: number; /** * The distance (in screen pixels) at which shapes snap to guides and other shapes. */ readonly snapThreshold: number; /** * Options for the editor's camera. These are the initial camera options. * Use {@link Editor.setCameraOptions} to update camera options at runtime. */ readonly camera: Partial; /** * Options for the editor's text rendering. These include TipTap configuration and * font handling. These are the initial text options and cannot be changed at runtime. */ readonly text: TLTextOptions; /** * Options for syncing the editor's camera state with the URL. Set to `true` to enable * with default options, or pass an options object to customize behavior. * * @example * ```tsx * // Enable with defaults * * * // Enable with custom options * * ``` */ readonly deepLinks: TLDeepLinkOptions | true | undefined; /** * Whether the quick-zoom brush preserves its screen-pixel size when the user * zooms the overview. When true, zooming in shrinks the target viewport (higher * return zoom); zooming out expands it. When false, the brush keeps the original * viewport's page dimensions regardless of overview zoom changes. */ readonly quickZoomPreservesScreenBounds: boolean; /** * Called when content is dropped on the canvas. Provides the page position * where the drop occurred and the underlying drag event object. * Return true to prevent default drop handling (files, URLs, etc.) */ experimental__onDropOnCanvas?(options: { event: React.DragEvent; point: VecLike; }): boolean; } /** @public */ export declare interface TLDropShapesOverInfo { initialDraggingOverShapeId: null | TLShapeId; initialParentIds: Map; initialIndices: Map; } /** @public */ export declare interface TLEditorComponents { Background?: ComponentType | null; Brush?: ComponentType | null; Canvas?: ComponentType | null; CollaboratorBrush?: ComponentType | null; CollaboratorCursor?: ComponentType | null; CollaboratorHint?: ComponentType | null; CollaboratorScribble?: ComponentType | null; CollaboratorShapeIndicator?: ComponentType | null; Cursor?: ComponentType | null; Grid?: ComponentType | null; Handle?: ComponentType | null; Handles?: ComponentType | null; InFrontOfTheCanvas?: ComponentType | null; LoadingScreen?: ComponentType | null; OnTheCanvas?: ComponentType | null; Overlays?: ComponentType | null; Scribble?: ComponentType | null; SelectionBackground?: ComponentType | null; SelectionForeground?: ComponentType | null; ShapeIndicator?: ComponentType | null; ShapeIndicators?: ComponentType | null; ShapeWrapper?: ComponentType> | null; SnapIndicator?: ComponentType | null; Spinner?: ComponentType> | null; SvgDefs?: ComponentType | null; ZoomBrush?: ComponentType | null; ErrorFallback?: TLErrorFallbackComponent; ShapeErrorFallback?: TLShapeErrorFallbackComponent; ShapeIndicatorErrorFallback?: TLShapeIndicatorErrorFallbackComponent; } /** @public */ export declare interface TLEditorOptions { /** * The Store instance to use for keeping the editor's data. This may be prepopulated, e.g. by loading * from a server or database. */ store: TLStore; /** * An array of shapes to use in the editor. These will be used to create and manage shapes in the editor. */ shapeUtils: readonly TLAnyShapeUtilConstructor[]; /** * An array of bindings to use in the editor. These will be used to create and manage bindings in the editor. */ bindingUtils: readonly TLAnyBindingUtilConstructor[]; /** * An array of tools to use in the editor. These will be used to handle events and manage user interactions in the editor. */ tools: readonly TLStateNodeConstructor[]; /** * Should return a containing html element which has all the styles applied to the editor. If not * given, the body element will be used. */ getContainer(): HTMLElement; /** * A user defined externally to replace the default user. */ user?: TLUser; /** * The editor's initial active tool (or other state node id). */ initialState?: string; /** * Whether to automatically focus the editor when it mounts. */ autoFocus?: boolean; /** * Whether to infer dark mode from the user's system preferences. Defaults to false. */ inferDarkMode?: boolean; /** * Options for the editor's camera. * * @deprecated Use `options.cameraOptions` instead. This will be removed in a future release. */ cameraOptions?: Partial; options?: Partial; /** * Text options for the editor. * * @deprecated Use `options.text` instead. This prop will be removed in a future release. */ textOptions?: TLTextOptions; licenseKey?: string; fontAssetUrls?: { [key: string]: string | undefined; }; /** * Provides a way to hide shapes. * * @example * ```ts * getShapeVisibility={(shape, editor) => shape.meta.hidden ? 'hidden' : 'inherit'} * ``` * * - `'inherit' | undefined` - (default) The shape will be visible unless its parent is hidden. * - `'hidden'` - The shape will be hidden. * - `'visible'` - The shape will be visible. * * @param shape - The shape to check. * @param editor - The editor instance. */ getShapeVisibility?(shape: TLShape, editor: Editor): 'hidden' | 'inherit' | 'visible' | null | undefined; } /** * Options for {@link Editor.(run:1)}. * @public */ export declare interface TLEditorRunOptions extends TLHistoryBatchOptions { ignoreShapeLock?: boolean; } /** @public */ export declare interface TLEditorSnapshot { document: TLStoreSnapshot; session: TLSessionStateSnapshot; } /** @public */ export declare interface TLEditStartInfo { type: 'click-header' | 'click' | 'double-click-corner' | 'double-click-edge' | 'double-click' | 'press_enter' | 'unknown'; } /** @public */ export declare interface TLEmbedExternalContent extends TLBaseExternalContent { type: 'embed'; url: string; embed: EmbedDefinition; } /** @public */ export declare type TLEnterEventHandler = (info: any, from: string) => void; /** * An object that contains information about the current device and environment. * This object is not reactive and will not update automatically when the environment changes, * so only include values that are fixed, such as the user's browser and operating system. * * @public */ export declare const tlenv: { hasCanvasSupport: boolean; isAndroid: boolean; isChromeForIos: boolean; isDarwin: boolean; isFirefox: boolean; isIos: boolean; isSafari: boolean; isWebview: boolean; }; /** * An atom that contains information about the current device and environment. * This object is reactive and will update automatically when the environment changes. * Use it for values that may change over time, such as the pointer type. * * @public */ export declare const tlenvReactive: Atom< { isCoarsePointer: boolean; }, unknown>; /** @public */ export declare interface TLErrorBoundaryProps { children: React_2.ReactNode; onError?: ((error: unknown) => void) | null; fallback: TLErrorFallbackComponent; } /** @public */ export declare interface TLErrorExternalContentSource { type: 'error'; data: null | string; reason: string; } /** @public */ export declare type TLErrorFallbackComponent = ComponentType<{ editor?: Editor; error: unknown; }>; /** @public */ export declare interface TLEventHandlers { onPointerDown: TLPointerEvent; onPointerMove: TLPointerEvent; onLongPress: TLPointerEvent; onRightClick: TLPointerEvent; onDoubleClick: TLClickEvent; onTripleClick: TLClickEvent; onQuadrupleClick: TLClickEvent; onMiddleClick: TLPointerEvent; onPointerUp: TLPointerEvent; onKeyDown: TLKeyboardEvent; onKeyUp: TLKeyboardEvent; onKeyRepeat: TLKeyboardEvent; onWheel: TLWheelEvent; onCancel: TLCancelEvent; onComplete: TLCompleteEvent; onInterrupt: TLInterruptEvent; onTick: TLTickEvent; } /** @public */ export declare type TLEventInfo = TLCancelEventInfo | TLClickEventInfo | TLCompleteEventInfo | TLInterruptEventInfo | TLKeyboardEventInfo | TLPinchEventInfo | TLPointerEventInfo | TLTickEventInfo | TLWheelEventInfo; /** @public */ export declare interface TLEventMap { mount: []; 'max-shapes': [{ count: number; name: string; pageId: TLPageId; }]; change: [HistoryEntry]; update: []; crash: [{ error: unknown; }]; 'stop-camera-animation': []; 'stop-following': []; 'before-event': [TLEventInfo]; event: [TLEventInfo]; tick: [number]; frame: [number]; resize: [BoxModel]; 'select-all-text': [{ shapeId: TLShapeId; }]; 'place-caret': [{ point: { x: number; y: number; }; shapeId: TLShapeId; }]; 'created-shapes': [TLRecord[]]; 'edited-shapes': [TLRecord[]]; 'deleted-shapes': [TLShapeId[]]; edit: []; dispose: []; } /** @public */ export declare type TLEventMapHandler = (...args: TLEventMap[T]) => void; /** @public */ export declare type TLEventName = 'cancel' | 'complete' | 'interrupt' | 'tick' | 'wheel' | TLCLickEventName | TLKeyboardEventName | TLPinchEventName | TLPointerEventName; /** @public */ export declare interface TLExcalidrawExternalContent extends TLBaseExternalContent { type: 'excalidraw'; content: any; } /** @public */ export declare interface TLExcalidrawExternalContentSource { type: 'excalidraw'; data: any; } /** @public */ export declare type TLExitEventHandler = (info: any, to: string) => void; /** @public */ export declare type TLExportType = 'jpeg' | 'png' | 'svg' | 'webp'; /** @public */ export declare type TLExternalAsset = TLFileExternalAsset | TLUrlExternalAsset; /** @public */ export declare type TLExternalContent = TLEmbedExternalContent | TLExcalidrawExternalContent | TLFileReplaceExternalContent | TLFilesExternalContent | TLSvgTextExternalContent | TLTextExternalContent | TLTldrawExternalContent | TLUrlExternalContent; /** @public */ export declare type TLExternalContentSource = TLErrorExternalContentSource | TLExcalidrawExternalContentSource | TLTextExternalContentSource | TLTldrawExternalContentSource; /** @public */ export declare interface TLFileExternalAsset { type: 'file'; file: File; assetId?: TLAssetId; } /** @public */ export declare interface TLFileReplaceExternalContent extends TLBaseExternalContent { type: 'file-replace'; file: File; shapeId: TLShapeId; isImage: boolean; } /** @public */ export declare interface TLFilesExternalContent extends TLBaseExternalContent { type: 'files'; files: File[]; ignoreParent?: boolean; } /** * A font face that can be used in the editor. The properties of this are largely the same as the * ones in the * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face | css `@font-face` rule}. * @public */ export declare interface TLFontFace { /** * How this font can be referred to in CSS. * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-family | `font-family`}. */ readonly family: string; /** * The source of the font. This * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src | `src`}. */ readonly src: TLFontFaceSource; /** * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/ascent-override | `ascent-override`}. */ readonly ascentOverride?: string; /** * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/descent-override | `descent-override`}. */ readonly descentOverride?: string; /** * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-stretch | `font-stretch`}. */ readonly stretch?: string; /** * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-style | `font-style`}. */ readonly style?: string; /** * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight | `font-weight`}. */ readonly weight?: string; /** * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-feature-settings | `font-feature-settings`}. */ readonly featureSettings?: string; /** * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/line-gap-override | `line-gap-override`}. */ readonly lineGapOverride?: string; /** * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range | `unicode-range`}. */ readonly unicodeRange?: string; } /** * Represents the `src` property of a {@link TLFontFace}. * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src | `src`} for details of the properties here. * @public */ export declare interface TLFontFaceSource { /** * A URL from which to load the font. If the value here is a key in * {@link tldraw#TLEditorAssetUrls.fonts}, the value from there will be used instead. */ url: string; format?: string; tech?: string; } /** Additional options for the {@link ShapeUtil.getGeometry} method. * * @public */ export declare interface TLGeometryOpts { /** The context in which the geometry is being requested. */ context?: string; } /** * Options to {@link Editor.getShapeAtPoint}. * * @public */ export declare interface TLGetShapeAtPointOptions { /** * The margin to apply to the shape. * If a number, it will be applied to both the inside and outside of the shape. * If an array, the first element will be applied to the inside of the shape, and the second element will be applied to the outside. * * @example * ```ts * // Get the shape at the center of the screen * const shape = editor.getShapeAtProps({ * margin: 10, * }) * * // Get the shape at the center of the screen with a 10px inner margin and a 5px outer margin * const shape = editor.getShapeAtProps({ * margin: [10, 5], * }) * ``` */ margin?: [number, number] | number; /** * Whether to register hits inside of shapes (beyond the margin), such as the inside of a solid shape. */ hitInside?: boolean; /** * Whether to register hits on locked shapes. */ hitLocked?: boolean; /** * Whether to register hits on labels. */ hitLabels?: boolean; /** * Whether to only return hits on shapes that are currently being rendered. * todo: rename this to hitCulled or hitNotRendering */ renderingOnly?: boolean; /** * Whether to register hits on the inside of frame shapes. * todo: rename this to hitInsideFrames */ hitFrameInside?: boolean; /** * A filter function to apply to the shapes. */ filter?(shape: TLShape): boolean; } /** @public */ export declare interface TLGridProps { x: number; y: number; z: number; size: number; } /** @public */ export declare interface TLHandleDragInfo { handle: TLHandle; isPrecise: boolean; isCreatingShape: boolean; initial?: T | undefined; } /** @public */ export declare interface TLHandleProps { shapeId: TLShapeId; handle: TLHandle; zoom: number; isCoarse: boolean; className?: string; } /** @public */ export declare interface TLHandlesProps { children: ReactNode; } /** @public */ export declare interface TLHistoryBatchOptions { /** * How should this change interact with the history stack? * - record: Add to the undo stack and clear the redo stack * - record-preserveRedoStack: Add to the undo stack but do not clear the redo stack * - ignore: Do not add to the undo stack or the redo stack */ history?: 'ignore' | 'record-preserveRedoStack' | 'record'; } /** @public */ export declare interface TLHistoryDiff { type: 'diff'; diff: RecordsDiff; } /** @public */ export declare type TLHistoryEntry = TLHistoryDiff | TLHistoryMark; /** @public */ export declare interface TLHistoryMark { type: 'stop'; id: string; } /** @public */ export declare interface TLImageExportOptions extends TLSvgExportOptions { /** * If the export is being converted to a lossy bitmap format (e.g. jpeg), this is the quality of * the export. This is a number between 0 and 1. */ quality?: number; /** * The format to export as. Defaults to 'png'. */ format?: TLExportType; } /** * Return type for {@link ShapeUtil.getIndicatorPath}. Can be either a simple Path2D * or an object with additional rendering info like clip paths for complex indicators. * @public */ export declare type TLIndicatorPath = { additionalPaths?: Path2D[]; clipPath?: Path2D; path: Path2D; } | Path2D; /** @public */ export declare type TLInterruptEvent = (info: TLInterruptEventInfo) => void; /** @public */ export declare interface TLInterruptEventInfo { type: 'misc'; name: 'interrupt'; } /** @public */ export declare type TLKeyboardEvent = (info: TLKeyboardEventInfo) => void; /** @public */ export declare type TLKeyboardEventInfo = TLBaseEventInfo & { code: string; key: string; name: TLKeyboardEventName; type: 'keyboard'; }; /** @public */ export declare type TLKeyboardEventName = 'key_down' | 'key_repeat' | 'key_up'; /** * Options for {@link loadSessionStateSnapshotIntoStore} * @public */ export declare interface TLLoadSessionStateSnapshotOptions { /** * By default, some session state flags like `isDebugMode` are not overwritten when loading a snapshot. * These are usually considered "sticky" by users while the document data is not. * If you want to overwrite these flags, set this to `true`. */ forceOverwrite?: boolean; } /** * Options for {@link loadSnapshot} * @public */ export declare interface TLLoadSnapshotOptions { /** * By default, some session state flags like `isDebugMode` are not overwritten when loading a snapshot. * These are usually considered "sticky" by users while the document data is not. * If you want to overwrite these flags, set this to `true`. */ forceOverwriteSessionState?: boolean; } /** @public */ export declare interface TLMeasureTextOpts { fontStyle: string; fontWeight: string; fontFamily: string; fontSize: number; /** This must be a number, e.g. 1.35, not a pixel value. */ lineHeight: number; /** * When maxWidth is a number, the text will be wrapped to that maxWidth. When maxWidth * is null, the text will be measured without wrapping, but explicit line breaks and * space are preserved. */ maxWidth: null | number; minWidth?: null | number; padding: string; otherStyles?: Record; disableOverflowWrapBreaking?: boolean; measureScrollWidth?: boolean; } /** @public */ export declare interface TLMeasureTextSpanOpts { overflow: 'truncate-clip' | 'truncate-ellipsis' | 'wrap'; width: number; height: number; padding: number; fontSize: number; fontWeight: string; fontFamily: string; fontStyle: string; lineHeight: number; textAlign: TLDefaultHorizontalAlignStyle; otherStyles?: Record; measureScrollWidth?: boolean; } /** @public */ export declare const tlmenus: { _hiddenMenus: string[]; /** * A set of strings representing any open menus. When menus are open, * certain interactions will behave differently; for example, when a * draw tool is selected and a menu is open, a pointer-down will not * create a dot (because the user is probably trying to close the menu) * however a pointer-down event followed by a drag will begin drawing * a line (because the user is BOTH trying to close the menu AND start * drawing a line). * * @public */ menus: Atom; /** * Add an open menu. * * @example * ```ts * addOpenMenu('menu-id') * addOpenMenu('menu-id', myEditorId) * ``` * * @param id - The id of the menu to add. * @param contextId - An optional context to add the menu to. * * @public */ addOpenMenu(id: string, contextId?: string): void; /** * Clear all open menus. * * @example * ```ts * clearOpenMenus() * clearOpenMenus(myEditorId) * ``` * * @param contextId - An optional context to clear menus for. * * @public */ clearOpenMenus(contextId?: string | undefined): void; /** * Delete an open menu. * * @example * ```ts * deleteOpenMenu('menu-id') * deleteOpenMenu('menu-id', myEditorId) * ``` * * @param id - The id of the menu to delete. * @param contextId - An optional context to delete the menu from. * * @public */ deleteOpenMenu(id: string, contextId?: string): void; /** * Get the current open menus. * * @param contextId - An optional context to get menus for. * * @public */ getOpenMenus(contextId?: string | undefined): string[]; /** * Get whether a menu is open for a given context. * * @example * ```ts * isMenuOpem(id, myEditorId) * ``` * * @param id - The id of the menu to check. * @param contextId - An optional context to check menus for. * * @public */ isMenuOpen(id: string, contextId?: string | undefined): boolean; /** * Get whether any menus are open for a given context. * * @example * ```ts * hasOpenMenus(myEditorId) * ``` * * @param contextId - A context to check menus for. * * @public */ hasOpenMenus(contextId: string): boolean; /** * Get whether any menus are open for any context. * * @example * ```ts * hasAnyOpenMenus() * ``` * * @public */ hasAnyOpenMenus(): boolean; /** * Hide all open menus. Restore them with the `showOpenMenus` method. * * @example * ```ts * hideOpenMenus() * hideOpenMenus(myEditorId) * ``` * * @param contextId - An optional context to hide menus for. * * @public */ hideOpenMenus(contextId?: string | undefined): void; /** * Show all hidden menus. * * @example * ```ts * showOpenMenus() * showOpenMenus(myEditorId) * ``` * * @param contextId - An optional context to show menus for. * * @public */ showOpenMenus(contextId?: string | undefined): void; forContext(contextId: string): { addOpenMenu: (id: string) => void; clearOpenMenus: () => void; deleteOpenMenu: (id: string) => void; getOpenMenus: () => string[]; hasAnyOpenMenus: () => boolean; hasOpenMenus: () => boolean; isMenuOpen: (id: string) => boolean; }; }; /** * Called when the editor has mounted. * @example * ```ts * editor.selectAll()} /> * ``` * @param editor - The editor instance. * * @public */ export declare type TLOnMountHandler = (editor: Editor) => (() => undefined | void) | undefined | void; /** @public */ export declare type TLPinchEvent = (info: TLPinchEventInfo) => void; /** @public */ export declare type TLPinchEventInfo = TLBaseEventInfo & { delta: VecModel; name: TLPinchEventName; point: VecModel; type: 'pinch'; }; /** @public */ export declare type TLPinchEventName = 'pinch_end' | 'pinch_start' | 'pinch'; /** @public */ export declare type TLPointerEvent = (info: TLPointerEventInfo) => void; /** @public */ export declare type TLPointerEventInfo = TLBaseEventInfo & { button: number; isPen: boolean; name: TLPointerEventName; point: VecLike; pointerId: number; type: 'pointer'; } & TLPointerEventTarget; /** @public */ export declare type TLPointerEventName = 'long_press' | 'middle_click' | 'pointer_down' | 'pointer_move' | 'pointer_up' | 'right_click'; /** @public */ export declare type TLPointerEventTarget = { handle: TLHandle; shape: TLShape; target: 'handle'; } | { handle?: TLSelectionHandle; shape?: undefined; target: 'selection'; } | { shape: TLShape; target: 'shape'; } | { shape?: undefined; target: 'canvas'; }; /** @public */ export declare interface TLRenderingShape { id: TLShapeId; shape: TLShape; util: ShapeUtil; index: number; backgroundIndex: number; opacity: number; } /** @public */ export declare type TLResizeHandle = SelectionCorner | SelectionEdge; /** * Info about a resize. * @param newPoint - The new local position of the shape. * @param handle - The handle being dragged. * @param mode - The type of resize. * @param scaleX - The scale in the x-axis. * @param scaleY - The scale in the y-axis. * @param initialBounds - The bounds of the shape at the start of the resize. * @param initialShape - The shape at the start of the resize. * @public */ export declare interface TLResizeInfo { newPoint: Vec; handle: TLResizeHandle; mode: TLResizeMode; scaleX: number; scaleY: number; initialBounds: Box; initialShape: T; } /** * The type of resize. * * 'scale_shape' - The shape is being scaled, usually as part of a larger selection. * * 'resize_bounds' - The user is directly manipulating an individual shape's bounds using a resize * handle. It is up to shape util implementers to decide how they want to handle the two * situations. * * @public */ export declare type TLResizeMode = 'resize_bounds' | 'scale_shape'; /** @public */ export declare type TLResizeShapeOptions = Partial<{ dragHandle: TLResizeHandle; initialBounds: Box; initialPageTransform: MatLike; initialShape: TLShape; isAspectRatioLocked: boolean; mode: TLResizeMode; scaleAxisRotation: number; scaleOrigin: VecLike; skipStartAndEndCallbacks: boolean; }>; /* Excluded from this release type: TLRotationSnapshot */ /** @public */ export declare interface TLScribbleProps { userId?: string; scribble: TLScribble; zoom: number; color?: string; opacity?: number; className?: string; } /** @public */ export declare interface TLSelectionBackgroundProps { bounds: Box; rotation: number; } /** @public */ export declare interface TLSelectionForegroundProps { bounds: Box; rotation: number; } /** @public */ export declare type TLSelectionHandle = RotateCorner | SelectionCorner | SelectionEdge; /** * The state of the editor instance, not including any document state. * * @public */ export declare interface TLSessionStateSnapshot { version: number; currentPageId?: TLPageId; isFocusMode?: boolean; exportBackground?: boolean; isDebugMode?: boolean; isToolLocked?: boolean; isGridMode?: boolean; pageStates?: Array<{ camera?: { x: number; y: number; z: number; }; focusedGroupId?: null | TLShapeId; pageId: TLPageId; selectedShapeIds?: TLShapeId[]; }>; } /** @public */ export declare type TLShapeErrorFallbackComponent = ComponentType<{ error: any; }>; /** @public */ export declare type TLShapeIndicatorErrorFallbackComponent = ComponentType<{ error: unknown; }>; /** @public */ export declare interface TLShapeIndicatorProps { userId?: string; shapeId: TLShapeId; color?: string | undefined; opacity?: number; className?: string; hidden?: boolean; } /** @public */ export declare interface TLShapeIndicatorsProps { /** Whether to hide all of the indicators */ hideAll?: boolean; /** Whether to show all of the indicators */ showAll?: boolean; } /** * Options passed to {@link ShapeUtil.canBeLaidOut}. * * @public */ export declare interface TLShapeUtilCanBeLaidOutOpts { /** The type of action causing the layout. */ type?: 'align' | 'distribute' | 'flip' | 'pack' | 'resize_to_bounds' | 'stack' | 'stretch'; /** The other shapes being laid out */ shapes?: TLShape[]; } /** * Options passed to {@link ShapeUtil.canBind}. A binding that could be made. At least one of * `fromShape` or `toShape` will belong to this shape util. * * The shapes may be full {@link @tldraw/tlschema#TLShape} objects when available, or just * `{ type }` stubs when the shape hasn't been created yet (e.g. during arrow creation). Use * `'id' in shape` to check whether the full shape is available. * * @public */ export declare interface TLShapeUtilCanBindOpts { /** The shape referenced by the `fromId` of the binding, or a `{ type }` stub if unavailable. */ fromShape: { type: TLShape['type']; } | TLShape; /** The shape referenced by the `toId` of the binding, or a `{ type }` stub if unavailable. */ toShape: { type: TLShape['type']; } | TLShape; /** The type of binding. */ bindingType: string; /** * The type of shape referenced by the `fromId` of the binding. * @deprecated Use `fromShape.type` instead. */ fromShapeType: TLShape['type']; /** * The type of shape referenced by the `toId` of the binding. * @deprecated Use `toShape.type` instead. */ toShapeType: TLShape['type']; } /** @public */ export declare interface TLShapeUtilCanvasSvgDef { key: string; component: React.ComponentType; } /** @public */ export declare interface TLShapeUtilConstructor = ShapeUtil> { new (editor: Editor): U; type: T['type']; props?: RecordProps; migrations?: LegacyMigrations | MigrationSequence | TLPropsMigrations; } /** @public */ export declare interface TLShapeWrapperProps extends React.HTMLAttributes { /** The shape being rendered. */ shape: TLShape; /** Whether this is the shapes regular, or background component. */ isBackground: boolean; /** The shape's rendered component. */ children: ReactNode; } /** @public */ export declare interface TLSnapIndicatorProps { className?: string; line: SnapIndicator; zoom: number; } /** @public */ export declare interface TLStateNodeConstructor { new (editor: Editor, parent?: StateNode): StateNode; id: string; initial?: string; children?(): TLStateNodeConstructor[]; isLockable: boolean; useCoalescedEvents: boolean; } /** @public */ export declare interface TLStoreBaseOptions { /** The initial data for the store. */ initialData?: SerializedStore; /** A snapshot of initial data to migrate and load into the store. */ snapshot?: Partial | TLStoreSnapshot; /** The default name for the store. */ defaultName?: string; /** How should this store upload & resolve assets? */ assets?: TLAssetStore; /** Called when the store is connected to an {@link @tldraw/editor#Editor}. */ onMount?(editor: Editor): (() => void) | void; } /** @public */ export declare type TLStoreEventInfo = HistoryEntry; /** @public */ export declare type TLStoreOptions = TLStoreBaseOptions & { /** Collaboration options for the store. */ collaboration?: { mode?: null | Signal<'readonly' | 'readwrite'>; status: null | Signal<'offline' | 'online'>; }; id?: string; } & TLStoreSchemaOptions; /** @public */ export declare type TLStoreSchemaOptions = { bindingUtils?: readonly TLAnyBindingUtilConstructor[]; migrations?: readonly MigrationSequence[]; shapeUtils?: readonly TLAnyShapeUtilConstructor[]; } | { schema?: StoreSchema; }; /** @public */ export declare type TLStoreWithStatus = { readonly connectionStatus: 'offline' | 'online'; readonly error?: undefined; readonly status: 'synced-remote'; readonly store: TLStore; } | { readonly error: Error; readonly status: 'error'; readonly store?: undefined; } | { readonly error?: undefined; 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; }; /** @public */ export declare interface TLSvgExportOptions { /** * The bounding box, in page coordinates, of the area being exported. */ bounds?: Box; /** * The logical scale of the export. This scales the resulting size of the SVG being generated. */ scale?: number; /** * When exporting an SVG, the expected pixel ratio of the export will be passed in to * {@link @tldraw/tlschema#TLAssetStore.resolve} as the `dpr` property, so that assets can be * downscaled to the appropriate resolution. * * When exporting to a bitmap image format, the size of the resulting image will be multiplied * by this number. * * For SVG exports, this defaults to undefined - which means we'll request original-quality * assets. For bitmap exports, this defaults to 2. */ pixelRatio?: number; /** * Should the background color be included in the export? If false, the generated image will be * transparent (if exporting to a format that supports transparency). */ background?: boolean; /** * How much padding to include around the bounds of exports? Defaults to 32px. */ padding?: number; /** * Should the export be rendered in dark mode (true) or light mode (false)? Defaults to the * current instance's dark mode setting. */ darkMode?: boolean; /** * The * {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio | `preserveAspectRatio` } * attribute of the SVG element. */ preserveAspectRatio?: React.SVGAttributes['preserveAspectRatio']; } /** @public */ export declare interface TLSvgTextExternalContent extends TLBaseExternalContent { type: 'svg-text'; text: string; } /** @public */ export declare interface TLTextExternalContent extends TLBaseExternalContent { type: 'text'; text: string; html?: string; } /** @public */ export declare interface TLTextExternalContentSource { type: 'text'; data: string; subtype: 'html' | 'json' | 'text' | 'url'; } /** @public */ export declare interface TLTextOptions { tipTapConfig?: EditorProviderProps_2; addFontsFromNode?: RichTextFontVisitor; } /** @public */ export declare type TLTickEvent = (info: TLTickEventInfo) => void; /** @public */ export declare interface TLTickEventInfo { type: 'misc'; name: 'tick'; elapsed: number; } /** * A global timer manager. * * @public */ export declare const tltime: Timers; /** @public */ export declare interface TLTldrawExternalContent extends TLBaseExternalContent { type: 'tldraw'; content: TLContent; } /** @public */ export declare interface TLTldrawExternalContentSource { type: 'tldraw'; data: TLContent; } /** @public */ export declare interface TLUpdatePointerOptions { /** Whether to update the pointer immediately, rather than on the next tick. */ immediate?: boolean; /** * The point, in screen-space, to update the pointer to. Defaults to the position of the last * pointer event. */ point?: VecLike; pointerId?: number; ctrlKey?: boolean; altKey?: boolean; shiftKey?: boolean; metaKey?: boolean; accelKey?: boolean; isPen?: boolean; button?: number; } /** @public */ export declare interface TLUrlExternalAsset { type: 'url'; url: string; } /** @public */ export declare interface TLUrlExternalContent extends TLBaseExternalContent { type: 'url'; url: string; } /** @public */ export declare interface TLUser { readonly userPreferences: Signal; readonly setUserPreferences: (userPreferences: TLUserPreferences) => void; } /** * A user of tldraw * * @public */ export declare interface TLUserPreferences { id: string; name?: null | string; color?: null | string; locale?: null | string; animationSpeed?: null | number; areKeyboardShortcutsEnabled?: boolean | null; edgeScrollSpeed?: null | number; colorScheme?: 'dark' | 'light' | 'system'; isSnapMode?: boolean | null; isWrapMode?: boolean | null; isDynamicSizeMode?: boolean | null; isPasteAtCursorMode?: boolean | null; enhancedA11yMode?: boolean | null; inputMode?: 'mouse' | 'trackpad' | null; isZoomDirectionInverted?: boolean | null; } /** @public */ export declare type TLWheelEvent = (info: TLWheelEventInfo) => void; /** @public */ export declare type TLWheelEventInfo = TLBaseEventInfo & { delta: VecModel; name: 'wheel'; point: VecModel; type: 'wheel'; }; /** * The DOM likes values to be fixed to 3 decimal places * * @public */ export declare function toDomPrecision(v: number): number; /** * @public */ export declare function toFixed(v: number): number; /** * Get a number to a precision. * * @param n - The number. * @param precision - The precision. * @public */ export declare function toPrecision(n: number, precision?: number): number; /** @public */ export declare class TransformedGeometry2d extends Geometry2d { private readonly geometry; private readonly matrix; private readonly inverse; private readonly decomposed; constructor(geometry: Geometry2d, matrix: MatModel, opts?: TransformedGeometry2dOptions); getVertices(filters: Geometry2dFilters): Vec[]; getBoundsVertices(): Vec[]; nearestPoint(point: VecLike, filters?: Geometry2dFilters): Vec; hitTestPoint(point: VecLike, margin?: number, hitInside?: boolean, filters?: Geometry2dFilters): boolean; distanceToPoint(point: VecLike, hitInside?: boolean, filters?: Geometry2dFilters): number; distanceToLineSegment(A: VecLike, B: VecLike, filters?: Geometry2dFilters): number; hitTestLineSegment(A: VecLike, B: VecLike, distance?: number, filters?: Geometry2dFilters): boolean; intersectLineSegment(A: VecLike, B: VecLike, filters?: Geometry2dFilters): Vec[]; intersectCircle(center: VecLike, radius: number, filters?: Geometry2dFilters): Vec[]; intersectPolygon(polygon: VecLike[], filters?: Geometry2dFilters): VecLike[]; intersectPolyline(polyline: VecLike[], filters?: Geometry2dFilters): VecLike[]; ignoreHit(point: VecLike): boolean; transform(transform: MatModel, opts?: TransformedGeometry2dOptions): Geometry2d; getSvgPathData(): string; } /** @public */ export declare interface TransformedGeometry2dOptions { isLabel?: boolean; isEmptyLabel?: boolean; isInternal?: boolean; debugColor?: string; ignore?: boolean; excludeFromShapeBounds?: boolean; } /** @public */ export declare type UiEvent = TLCancelEvent | TLClickEvent | TLCompleteEvent | TLKeyboardEvent | TLPinchEvent | TLPointerEvent; /** @public */ export declare type UiEventType = 'click' | 'keyboard' | 'pinch' | 'pointer' | 'wheel' | 'zoom'; /** @public */ export declare function uniq(array: { readonly [n: number]: T; readonly length: number; } | null | undefined): T[]; /** @public */ export declare function useContainer(): HTMLElement; /** @public */ export declare function useContainerIfExists(): HTMLElement | null; /** * Delay an SVG export until the returned function is called. This is useful if e.g. your shape * loads data dynamically, and you need to prevent the export from happening until after the data is * loaded. * * If used outside of an SVG export, this hook has no effect. * * @example * ```tsx * const readyForExport = useDelaySvgExport() * * return readyForExport()} /> * ``` * * @public */ export declare function useDelaySvgExport(): () => void; /** @public */ export declare function useEditor(): Editor; /** @public */ export declare function useEditorComponents(): Required; /* Excluded from this release type: useEvent */ /** @public */ export declare function useGlobalMenuIsOpen(id: string, onChange?: (isOpen: boolean) => void, onEvent?: (id: string) => void): readonly [boolean, (isOpen: boolean) => void]; /** @public */ export declare function useIsCropping(shapeId: TLShapeId): boolean; /** @public */ export declare function useIsDarkMode(): boolean; /** @public */ export declare function useIsEditing(shapeId: TLShapeId): boolean; /* Excluded from this release type: useLocalStore */ /** @public */ export declare function useMaybeEditor(): Editor | null; /* Excluded from this release type: useOnMount */ /** @public */ export declare function usePassThroughMouseOverEvents(ref: RefObject): void; /** @public */ export declare function usePassThroughWheelEvents(ref: RefObject): void; /** * @returns The list of peer UserIDs * @public */ export declare function usePeerIds(): string[]; /** * @returns The latest presence of the user matching userId * @public */ export declare function usePresence(userId: string): null | TLInstancePresence; /* Excluded from this release type: USER_COLORS */ /* Excluded from this release type: useReactiveEvent */ /* Excluded from this release type: useRefState */ /** @public */ export declare class UserPreferencesManager { private readonly user; private readonly inferDarkMode; systemColorScheme: Atom<"dark" | "light", unknown>; disposables: Set<() => void>; dispose(): void; constructor(user: TLUser, inferDarkMode: boolean); updateUserPreferences(userPreferences: Partial): void; getUserPreferences(): { animationSpeed: number; areKeyboardShortcutsEnabled: boolean; color: string; colorScheme: "dark" | "light" | "system" | undefined; enhancedA11yMode: boolean; id: string; inputMode: "mouse" | "trackpad" | null; isDarkMode: boolean; isDynamicResizeMode: boolean; isSnapMode: boolean; isWrapMode: boolean; isZoomDirectionInverted: boolean; locale: string; name: string; }; getIsDarkMode(): boolean; /** * The speed at which the user can scroll by dragging toward the edge of the screen. */ getEdgeScrollSpeed(): number; getAnimationSpeed(): number; getAreKeyboardShortcutsEnabled(): boolean; getId(): string; getName(): string; getLocale(): string; getColor(): string; getIsSnapMode(): boolean; getIsWrapMode(): boolean; getIsDynamicResizeMode(): boolean; getIsPasteAtCursorMode(): boolean; getEnhancedA11yMode(): boolean; getInputMode(): "mouse" | "trackpad" | null; getIsZoomDirectionInverted(): boolean; } /** @public */ export declare const userTypeValidator: T.Validator; /** @public */ export declare function useSelectionEvents(handle: TLSelectionHandle): { onPointerDown: PointerEventHandler; onPointerMove: (e: PointerEvent_2) => void; onPointerUp: PointerEventHandler; }; /* Excluded from this release type: useShallowArrayIdentity */ /* Excluded from this release type: useShallowObjectIdentity */ /** * React's useId hook returns a unique id for the component. However, it uses a colon in the id, * which is not valid for CSS selectors. This hook replaces the colon with an underscore. * * @public */ export declare function useSharedSafeId(id: string): SafeId; /** * Returns the current SVG export context. Returns null if the component isn't being rendered for an * SVG export. * * @public */ export declare function useSvgExportContext(): null | SvgExportContext; /** * @public */ export declare function useTldrawUser(opts: { setUserPreferences?: (userPreferences: TLUserPreferences) => void; userPreferences?: Signal | TLUserPreferences; }): TLUser; /** @public */ export declare function useTLSchemaFromUtils(opts: TLStoreSchemaOptions): StoreSchema; /** @public */ export declare function useTLStore(opts: TLStoreOptions): TLStore; /** @public */ export declare function useTransform(ref: React.RefObject, x?: number, y?: number, scale?: number, rotate?: number, additionalOffset?: VecLike): void; /** * React's useId hook returns a unique id for the component. However, it uses a colon in the id, * which is not valid for CSS selectors. This hook replaces the colon with an underscore. * * @public */ export declare function useUniqueSafeId(suffix?: string): SafeId; /** @public */ export declare function useViewportHeight(): number; /* Excluded from this release type: ValidLicenseKeyResult */ /** @public */ export declare class Vec { x: number; y: number; z: number; constructor(x?: number, y?: number, z?: number); get pressure(): number; set(x?: number, y?: number, z?: number): this; setTo({ x, y, z }: VecLike): this; rot(r: number): this; rotWith(C: VecLike, r: number): this; clone(): Vec; sub(V: VecLike): this; subXY(x: number, y: number): this; subScalar(n: number): this; add(V: VecLike): this; addXY(x: number, y: number): this; addScalar(n: number): this; clamp(min: number, max?: number): this; div(t: number): this; divV(V: VecLike): this; mul(t: number): this; mulV(V: VecLike): this; abs(): this; nudge(B: VecLike, distance: number): this; neg(): this; cross(V: VecLike): this; dpr(V: VecLike): number; cpr(V: VecLike): number; len2(): number; len(): number; pry(V: VecLike): number; per(): this; uni(): this; tan(V: VecLike): Vec; dist(V: VecLike): number; distanceToLineSegment(A: VecLike, B: VecLike): number; slope(B: VecLike): number; snapToGrid(gridSize: number): this; angle(B: VecLike): number; toAngle(): number; lrp(B: VecLike, t: number): Vec; equals(B: VecLike): boolean; equalsXY(x: number, y: number): boolean; toFixed(): this; toString(): string; toJson(): VecModel; toArray(): number[]; static Add(A: VecLike, B: VecLike): Vec; static AddXY(A: VecLike, x: number, y: number): Vec; static Sub(A: VecLike, B: VecLike): Vec; static SubXY(A: VecLike, x: number, y: number): Vec; static AddScalar(A: VecLike, n: number): Vec; static SubScalar(A: VecLike, n: number): Vec; static Div(A: VecLike, t: number): Vec; static Mul(A: VecLike, t: number): Vec; static DivV(A: VecLike, B: VecLike): Vec; static MulV(A: VecLike, B: VecLike): Vec; static Neg(A: VecLike): Vec; /** * Get the perpendicular vector to A. */ static Per(A: VecLike): Vec; static Abs(A: VecLike): Vec; static Dist(A: VecLike, B: VecLike): number; static ManhattanDist(A: VecLike, B: VecLike): number; static DistMin(A: VecLike, B: VecLike, n: number): boolean; static Dist2(A: VecLike, B: VecLike): number; /** * Dot product of two vectors which is used to calculate the angle between them. */ static Dpr(A: VecLike, B: VecLike): number; static Cross(A: VecLike, V: VecLike): Vec; /** * Cross product of two vectors which is used to calculate the area of a parallelogram. */ static Cpr(A: VecLike, B: VecLike): number; static Len2(A: VecLike): number; static Len(A: VecLike): number; /** * Get the projection of A onto B. */ static Pry(A: VecLike, B: VecLike): number; /** * Get the unit vector of A. */ static Uni(A: VecLike): Vec; static Tan(A: VecLike, B: VecLike): Vec; static Min(A: VecLike, B: VecLike): Vec; static Max(A: VecLike, B: VecLike): Vec; static From({ x, y, z }: VecModel): Vec; static FromArray(v: number[]): Vec; static Rot(A: VecLike, r?: number): Vec; static RotWith(A: VecLike, C: VecLike, r: number): Vec; /** * Get the nearest point on a line with a known unit vector that passes through point A * * ```ts * Vec.nearestPointOnLineThroughPoint(A, u, Point) * ``` * * @param A - Any point on the line * @param u - The unit vector for the line. * @param P - A point not on the line to test. */ static NearestPointOnLineThroughPoint(A: VecLike, u: VecLike, P: VecLike): Vec; static NearestPointOnLineSegment(A: VecLike, B: VecLike, P: VecLike, clamp?: boolean): Vec; static DistanceToLineThroughPoint(A: VecLike, u: VecLike, P: VecLike): number; static DistanceToLineSegment(A: VecLike, B: VecLike, P: VecLike, clamp?: boolean): number; static Snap(A: VecLike, step?: number): Vec; static Cast(A: VecLike): Vec; static Slope(A: VecLike, B: VecLike): number; static IsNaN(A: VecLike): boolean; static IsFinite(A: VecLike): boolean; /** * Get the angle from position A to position B. */ static Angle(A: VecLike, B: VecLike): number; /** * Get the angle between vector A and vector B. This will return the smallest angle between the * two vectors, between -π and π. The sign indicates direction of angle. */ static AngleBetween(A: VecLike, B: VecLike): number; /** * Linearly interpolate between two points. * @param A - The first point. * @param B - The second point. * @param t - The interpolation value between 0 and 1. * @returns The interpolated point. */ static Lrp(A: VecLike, B: VecLike, t: number): Vec; static Med(A: VecLike, B: VecLike): Vec; static Equals(A: VecLike, B: VecLike): boolean; static EqualsXY(A: VecLike, x: number, y: number): boolean; static Clockwise(A: VecLike, B: VecLike, C: VecLike): boolean; static Rescale(A: VecLike, n: number): Vec; static ScaleWithOrigin(A: VecLike, scale: number, origin: VecLike): Vec; static ToFixed(A: VecLike): Vec; static ToInt(A: VecLike): Vec; static ToCss(A: VecLike): string; static Nudge(A: VecLike, B: VecLike, distance: number): Vec; static ToString(A: VecLike): string; static ToAngle(A: VecLike): number; static FromAngle(r: number, length?: number): Vec; static ToArray(A: VecLike): number[]; static ToJson(A: VecLike): { x: number; y: number; z: number | undefined; }; static Average(arr: VecLike[]): Vec; static Clamp(A: Vec, min: number, max?: number): Vec; /** * Get an array of points (with simulated pressure) between two points. * * @param A - The first point. * @param B - The second point. * @param steps - The number of points to return. */ static PointsBetween(A: VecModel, B: VecModel, steps?: number): Vec[]; static SnapToGrid(A: VecLike, gridSize?: number): Vec; } /** @public */ export declare type VecLike = Vec | VecModel; export * from "@tldraw/state"; export * from "@tldraw/state-react"; export * from "@tldraw/store"; export * from "@tldraw/tlschema"; export * from "@tldraw/utils"; export * from "@tldraw/validate"; export { }