0cc91eec62
This PR improves the editor's APIs around creating assets and files.
This allows end user developers to replace behavior that might occur,
for example, when pasting images or dragging files onto the canvas.
Here, we:
- remove `onCreateAssetFromFile` prop
- remove `onCreateBookmarkFromUrl` prop
- introduce `onEditorReady` prop
- introduce `onEditorWillDispose` prop
- introduce `ExternalContentManager`
The `ExternalContentManager` (ECM) is used in circumstances where we're
turning external content (text, images, urls, etc) into assets or
shapes. It is designed to allow certain methods to be overwritten by
other developers as a kind of weakly supported hack.
For example, when a user drags an image onto the canvas, the event
handler passes a `TLExternalContent` object to the editor's
`putExternalContent` method. This method runs the ECM's handler for this
content type. That handler may in turn run other methods, such as
`createAssetFromFile` or `createShapesForAssets`, which will lead to the
image being created on the canvas.
If a developer wanted to change the way that assets are created from
files, then they could overwrite that method at runtime.
```ts
const handleEditorReady = (editor: Editor) => {
editor.externalContentManager.createAssetFromFile = myHandler
}
function Example() {
return <Tldraw onEditorReady={handleEditorReady}/>
}
```
If you wanted to go even deeper, you could override the editor's
`putExternalContent` method.
```ts
const handleEditorReady = (editor: Editor) => {
const handleExternalContent = (info: TLExternalContent): Promise<void> => {
if (info.type === 'files') {
// do something here
} else {
// do the normal thing
editor.externalContentManager.handleContent(info)
}
}
```
### Change Type
- [x] `major`
### Test Plan
1. Drag images, urls, etc. onto the canvas
2. Use copy and paste for single and multiple files
3. Use bookmark / embed shapes and convert between eachother
### Release Notes
- [editor] add `ExternalContentManager` for plopping content onto the
canvas
- [editor] remove `onCreateAssetFromFile` prop
- [editor] remove `onCreateBookmarkFromUrl` prop
- [editor] introduce `onEditorReady` prop
- [editor] introduce `onEditorWillDispose` prop
- [editor] introduce `ExternalContentManager`
2770 lines
92 KiB
Markdown
2770 lines
92 KiB
Markdown
## API Report File for "@tldraw/editor"
|
|
|
|
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
|
|
|
|
```ts
|
|
|
|
/// <reference types="react" />
|
|
|
|
import { Atom } from 'signia';
|
|
import { Box2d } from '@tldraw/primitives';
|
|
import { Box2dModel } from '@tldraw/tlschema';
|
|
import { Computed } from 'signia';
|
|
import { ComputedCache } from '@tldraw/store';
|
|
import { CubicSpline2d } from '@tldraw/primitives';
|
|
import { EASINGS } from '@tldraw/primitives';
|
|
import { EmbedDefinition } from '@tldraw/tlschema';
|
|
import { EventEmitter } from 'eventemitter3';
|
|
import { getHashForString } from '@tldraw/utils';
|
|
import { HistoryEntry } from '@tldraw/store';
|
|
import { MatLike } from '@tldraw/primitives';
|
|
import { Matrix2d } from '@tldraw/primitives';
|
|
import { Matrix2dModel } from '@tldraw/primitives';
|
|
import { Migrations } from '@tldraw/store';
|
|
import { Polyline2d } from '@tldraw/primitives';
|
|
import { default as React_2 } from 'react';
|
|
import * as React_3 from 'react';
|
|
import { RotateCorner } from '@tldraw/primitives';
|
|
import { SelectionCorner } from '@tldraw/primitives';
|
|
import { SelectionEdge } from '@tldraw/primitives';
|
|
import { SelectionHandle } from '@tldraw/primitives';
|
|
import { SerializedSchema } from '@tldraw/store';
|
|
import { Signal } from 'signia';
|
|
import { StoreSnapshot } from '@tldraw/store';
|
|
import { StrokePoint } from '@tldraw/primitives';
|
|
import { TLAlignType } from '@tldraw/tlschema';
|
|
import { TLArrowheadType } from '@tldraw/tlschema';
|
|
import { TLArrowShape } from '@tldraw/tlschema';
|
|
import { TLAsset } from '@tldraw/tlschema';
|
|
import { TLAssetId } from '@tldraw/tlschema';
|
|
import { TLAssetPartial } from '@tldraw/tlschema';
|
|
import { TLBaseShape } from '@tldraw/tlschema';
|
|
import { TLBookmarkAsset } from '@tldraw/tlschema';
|
|
import { TLBookmarkShape } from '@tldraw/tlschema';
|
|
import { TLCamera } from '@tldraw/tlschema';
|
|
import { TLColorStyle } from '@tldraw/tlschema';
|
|
import { TLColorType } from '@tldraw/tlschema';
|
|
import { TLCursor } from '@tldraw/tlschema';
|
|
import { TLDocument } from '@tldraw/tlschema';
|
|
import { TLDrawShape } from '@tldraw/tlschema';
|
|
import { TLEmbedShape } from '@tldraw/tlschema';
|
|
import { TLFontType } from '@tldraw/tlschema';
|
|
import { TLFrameShape } from '@tldraw/tlschema';
|
|
import { TLGeoShape } from '@tldraw/tlschema';
|
|
import { TLGroupShape } from '@tldraw/tlschema';
|
|
import { TLHandle } from '@tldraw/tlschema';
|
|
import { TLHighlightShape } from '@tldraw/tlschema';
|
|
import { TLImageAsset } from '@tldraw/tlschema';
|
|
import { TLImageShape } from '@tldraw/tlschema';
|
|
import { TLInstance } from '@tldraw/tlschema';
|
|
import { TLInstancePageState } from '@tldraw/tlschema';
|
|
import { TLInstancePresence } from '@tldraw/tlschema';
|
|
import { TLInstancePropsForNextShape } from '@tldraw/tlschema';
|
|
import { TLLineShape } from '@tldraw/tlschema';
|
|
import { TLNoteShape } from '@tldraw/tlschema';
|
|
import { TLNullableShapeProps } from '@tldraw/tlschema';
|
|
import { TLPage } from '@tldraw/tlschema';
|
|
import { TLPageId } from '@tldraw/tlschema';
|
|
import { TLParentId } from '@tldraw/tlschema';
|
|
import { TLRecord } from '@tldraw/tlschema';
|
|
import { TLScribble } from '@tldraw/tlschema';
|
|
import { TLShape } from '@tldraw/tlschema';
|
|
import { TLShapeId } from '@tldraw/tlschema';
|
|
import { TLShapePartial } from '@tldraw/tlschema';
|
|
import { TLShapeProp } from '@tldraw/tlschema';
|
|
import { TLShapeProps } from '@tldraw/tlschema';
|
|
import { TLSizeStyle } from '@tldraw/tlschema';
|
|
import { TLSizeType } from '@tldraw/tlschema';
|
|
import { TLStore } from '@tldraw/tlschema';
|
|
import { TLStyleCollections } from '@tldraw/tlschema';
|
|
import { TLStyleType } from '@tldraw/tlschema';
|
|
import { TLTextShape } from '@tldraw/tlschema';
|
|
import { TLTextShapeProps } from '@tldraw/tlschema';
|
|
import { TLUnknownShape } from '@tldraw/tlschema';
|
|
import { TLVideoAsset } from '@tldraw/tlschema';
|
|
import { TLVideoShape } from '@tldraw/tlschema';
|
|
import { UnknownRecord } from '@tldraw/store';
|
|
import { Vec2d } from '@tldraw/primitives';
|
|
import { Vec2dModel } from '@tldraw/tlschema';
|
|
import { VecLike } from '@tldraw/primitives';
|
|
|
|
// @public (undocumented)
|
|
export const ACCEPTED_ASSET_TYPE: string;
|
|
|
|
// @public (undocumented)
|
|
export const ACCEPTED_IMG_TYPE: string[];
|
|
|
|
// @public (undocumented)
|
|
export const ACCEPTED_VID_TYPE: string[];
|
|
|
|
// @internal (undocumented)
|
|
export const ANIMATION_MEDIUM_MS = 320;
|
|
|
|
// @internal (undocumented)
|
|
export const ANIMATION_SHORT_MS = 80;
|
|
|
|
// @public (undocumented)
|
|
export const ARROW_LABEL_FONT_SIZES: Record<TLSizeType, number>;
|
|
|
|
// @public (undocumented)
|
|
export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
|
|
// (undocumented)
|
|
canBind: () => boolean;
|
|
// (undocumented)
|
|
canEdit: () => boolean;
|
|
// (undocumented)
|
|
defaultProps(): TLArrowShape['props'];
|
|
// (undocumented)
|
|
getArrowInfo(shape: TLArrowShape): ArrowInfo | undefined;
|
|
// (undocumented)
|
|
getBounds(shape: TLArrowShape): Box2d;
|
|
// (undocumented)
|
|
getCenter(shape: TLArrowShape): Vec2d;
|
|
// (undocumented)
|
|
getEditingBounds: (shape: TLArrowShape) => Box2d;
|
|
// (undocumented)
|
|
getHandles(shape: TLArrowShape): TLHandle[];
|
|
// (undocumented)
|
|
getLabelBounds(shape: TLArrowShape): Box2d | null;
|
|
// (undocumented)
|
|
getOutline(shape: TLArrowShape): Vec2dModel[];
|
|
// (undocumented)
|
|
getOutlineWithoutLabel(shape: TLArrowShape): VecLike[];
|
|
// (undocumented)
|
|
hideResizeHandles: TLShapeUtilFlag<TLArrowShape>;
|
|
// (undocumented)
|
|
hideRotateHandle: TLShapeUtilFlag<TLArrowShape>;
|
|
// (undocumented)
|
|
hideSelectionBoundsBg: TLShapeUtilFlag<TLArrowShape>;
|
|
// (undocumented)
|
|
hideSelectionBoundsFg: TLShapeUtilFlag<TLArrowShape>;
|
|
// (undocumented)
|
|
hitTestLineSegment(shape: TLArrowShape, A: VecLike, B: VecLike): boolean;
|
|
// (undocumented)
|
|
hitTestPoint(shape: TLArrowShape, point: VecLike): boolean;
|
|
// (undocumented)
|
|
indicator(shape: TLArrowShape): JSX.Element | null;
|
|
// (undocumented)
|
|
isClosed: () => boolean;
|
|
// (undocumented)
|
|
get labelBoundsCache(): ComputedCache<Box2d | null, TLArrowShape>;
|
|
// (undocumented)
|
|
onDoubleClickHandle: (shape: TLArrowShape, handle: TLHandle) => TLShapePartial<TLArrowShape> | void;
|
|
// (undocumented)
|
|
onEditEnd: TLOnEditEndHandler<TLArrowShape>;
|
|
// (undocumented)
|
|
onHandleChange: TLOnHandleChangeHandler<TLArrowShape>;
|
|
// (undocumented)
|
|
onResize: TLOnResizeHandler<TLArrowShape>;
|
|
// (undocumented)
|
|
onTranslateStart: TLOnTranslateStartHandler<TLArrowShape>;
|
|
// (undocumented)
|
|
render(shape: TLArrowShape): JSX.Element | null;
|
|
// (undocumented)
|
|
snapPoints(_shape: TLArrowShape): Vec2d[];
|
|
// (undocumented)
|
|
toSvg(shape: TLArrowShape, font: string, colors: TLExportColors): SVGGElement;
|
|
// (undocumented)
|
|
static type: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export abstract class BaseBoxShapeTool extends StateNode {
|
|
// (undocumented)
|
|
static children: () => (typeof Idle_4 | typeof Pointing_2)[];
|
|
// (undocumented)
|
|
static id: string;
|
|
// (undocumented)
|
|
static initial: string;
|
|
// (undocumented)
|
|
abstract shapeType: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export abstract class BaseBoxShapeUtil<Shape extends TLBaseBoxShape> extends ShapeUtil<Shape> {
|
|
// (undocumented)
|
|
getBounds(shape: Shape): Box2d;
|
|
// (undocumented)
|
|
getCenter(shape: Shape): Vec2d;
|
|
// (undocumented)
|
|
getOutline(shape: Shape): Vec2d[];
|
|
// (undocumented)
|
|
hitTestLineSegment(shape: Shape, A: VecLike, B: VecLike): boolean;
|
|
// (undocumented)
|
|
hitTestPoint(shape: Shape, point: VecLike): boolean;
|
|
// (undocumented)
|
|
onResize: TLOnResizeHandler<any>;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function blobAsString(blob: Blob): Promise<string>;
|
|
|
|
// @public (undocumented)
|
|
export class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape> {
|
|
// (undocumented)
|
|
canResize: () => boolean;
|
|
// (undocumented)
|
|
defaultProps(): TLBookmarkShape['props'];
|
|
// (undocumented)
|
|
getHumanReadableAddress(shape: TLBookmarkShape): string;
|
|
// (undocumented)
|
|
hideSelectionBoundsBg: () => boolean;
|
|
// (undocumented)
|
|
hideSelectionBoundsFg: () => boolean;
|
|
// (undocumented)
|
|
indicator(shape: TLBookmarkShape): JSX.Element;
|
|
// (undocumented)
|
|
onBeforeCreate?: TLOnBeforeCreateHandler<TLBookmarkShape>;
|
|
// (undocumented)
|
|
onBeforeUpdate?: TLOnBeforeUpdateHandler<TLBookmarkShape>;
|
|
// (undocumented)
|
|
render(shape: TLBookmarkShape): JSX.Element;
|
|
// (undocumented)
|
|
static type: string;
|
|
// (undocumented)
|
|
protected updateBookmarkAsset: {
|
|
(shape: TLBookmarkShape): Promise<void>;
|
|
cancel(): void;
|
|
};
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export const BOUND_ARROW_OFFSET = 10;
|
|
|
|
// @public (undocumented)
|
|
export const Canvas: React_3.MemoExoticComponent<({ onDropOverride, }: {
|
|
onDropOverride?: ((defaultOnDrop: (e: React_3.DragEvent<Element>) => Promise<void>) => (e: React_3.DragEvent<Element>) => Promise<void>) | undefined;
|
|
}) => JSX.Element>;
|
|
|
|
// @public (undocumented)
|
|
export const checkFlag: (flag: (() => boolean) | boolean | undefined) => boolean | undefined;
|
|
|
|
// @public
|
|
export function containBoxSize(originalSize: BoxWidthHeight, containBoxSize: BoxWidthHeight): BoxWidthHeight;
|
|
|
|
// @public (undocumented)
|
|
export function correctSpacesToNbsp(input: string): string;
|
|
|
|
// @public
|
|
export function createSessionStateSnapshotSignal(store: TLStore): Signal<null | TLSessionStateSnapshot>;
|
|
|
|
// @public
|
|
export function createTLStore(opts?: TLStoreOptions): TLStore;
|
|
|
|
// @public (undocumented)
|
|
export function dataTransferItemAsString(item: DataTransferItem): Promise<string>;
|
|
|
|
// @public (undocumented)
|
|
export function dataUrlToFile(url: string, filename: string, mimeType: string): Promise<File>;
|
|
|
|
// @internal (undocumented)
|
|
export type DebugFlag<T> = DebugFlagDef<T> & Atom<T>;
|
|
|
|
// @internal (undocumented)
|
|
export const debugFlags: {
|
|
preventDefaultLogging: DebugFlag<boolean>;
|
|
pointerCaptureLogging: DebugFlag<boolean>;
|
|
pointerCaptureTracking: DebugFlag<boolean>;
|
|
pointerCaptureTrackingObject: DebugFlag<Map<Element, number>>;
|
|
elementRemovalLogging: DebugFlag<boolean>;
|
|
debugSvg: DebugFlag<boolean>;
|
|
throwToBlob: DebugFlag<boolean>;
|
|
logMessages: DebugFlag<never[]>;
|
|
resetConnectionEveryPing: DebugFlag<boolean>;
|
|
debugCursors: DebugFlag<boolean>;
|
|
forceSrgb: DebugFlag<boolean>;
|
|
};
|
|
|
|
// @internal (undocumented)
|
|
export const DEFAULT_ANIMATION_OPTIONS: {
|
|
duration: number;
|
|
easing: (t: number) => number;
|
|
};
|
|
|
|
// @internal (undocumented)
|
|
export const DEFAULT_BOOKMARK_HEIGHT = 320;
|
|
|
|
// @internal (undocumented)
|
|
export const DEFAULT_BOOKMARK_WIDTH = 300;
|
|
|
|
// @public (undocumented)
|
|
export let defaultEditorAssetUrls: TLEditorAssetUrls;
|
|
|
|
// @public (undocumented)
|
|
export function defaultEmptyAs(str: string, dflt: string): string;
|
|
|
|
// @internal (undocumented)
|
|
export const DefaultErrorFallback: TLErrorFallbackComponent;
|
|
|
|
// @public (undocumented)
|
|
export const defaultShapes: Record<string, TLShapeInfo>;
|
|
|
|
// @public (undocumented)
|
|
export const defaultTools: TLStateNodeConstructor[];
|
|
|
|
// @internal (undocumented)
|
|
export const DOUBLE_CLICK_DURATION = 450;
|
|
|
|
// @public (undocumented)
|
|
export function downloadDataURLAsFile(dataUrl: string, filename: string): void;
|
|
|
|
// @internal (undocumented)
|
|
export const DRAG_DISTANCE = 4;
|
|
|
|
// @public (undocumented)
|
|
export class DrawShapeUtil extends ShapeUtil<TLDrawShape> {
|
|
// (undocumented)
|
|
defaultProps(): TLDrawShape['props'];
|
|
// (undocumented)
|
|
expandSelectionOutlinePx(shape: TLDrawShape): number;
|
|
// (undocumented)
|
|
getBounds(shape: TLDrawShape): Box2d;
|
|
// (undocumented)
|
|
getCenter(shape: TLDrawShape): Vec2d;
|
|
// (undocumented)
|
|
getOutline(shape: TLDrawShape): Vec2d[];
|
|
// (undocumented)
|
|
hideResizeHandles: (shape: TLDrawShape) => boolean;
|
|
// (undocumented)
|
|
hideRotateHandle: (shape: TLDrawShape) => boolean;
|
|
// (undocumented)
|
|
hideSelectionBoundsBg: (shape: TLDrawShape) => boolean;
|
|
// (undocumented)
|
|
hideSelectionBoundsFg: (shape: TLDrawShape) => boolean;
|
|
// (undocumented)
|
|
hitTestLineSegment(shape: TLDrawShape, A: VecLike, B: VecLike): boolean;
|
|
// (undocumented)
|
|
hitTestPoint(shape: TLDrawShape, point: VecLike): boolean;
|
|
// (undocumented)
|
|
indicator(shape: TLDrawShape): JSX.Element;
|
|
// (undocumented)
|
|
isClosed: (shape: TLDrawShape) => boolean;
|
|
// (undocumented)
|
|
onResize: TLOnResizeHandler<TLDrawShape>;
|
|
// (undocumented)
|
|
render(shape: TLDrawShape): JSX.Element;
|
|
// (undocumented)
|
|
toSvg(shape: TLDrawShape, _font: string | undefined, colors: TLExportColors): SVGGElement;
|
|
// (undocumented)
|
|
static type: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class Editor extends EventEmitter<TLEventMap> {
|
|
constructor({ store, user, tools, shapes, getContainer, }: TLEditorOptions);
|
|
addOpenMenu(id: string): this;
|
|
alignShapes(operation: 'bottom' | 'center-horizontal' | 'center-vertical' | 'left' | 'right' | 'top', ids?: TLShapeId[]): this;
|
|
get allShapesCommonBounds(): Box2d | null;
|
|
animateCamera(x: number, y: number, z?: number, opts?: TLAnimationOptions): this;
|
|
animateShapes(partials: (null | TLShapePartial | undefined)[], options?: {
|
|
duration?: number;
|
|
ease?: (t: number) => number;
|
|
}): this;
|
|
// (undocumented)
|
|
animateToShape(shapeId: TLShapeId, opts?: TLAnimationOptions): this;
|
|
// (undocumented)
|
|
get animationSpeed(): number;
|
|
// @internal (undocumented)
|
|
annotateError(error: unknown, { origin, willCrashApp, tags, extras, }: {
|
|
origin: string;
|
|
willCrashApp: boolean;
|
|
tags?: Record<string, boolean | number | string>;
|
|
extras?: Record<string, unknown>;
|
|
}): void;
|
|
get assets(): (TLBookmarkAsset | TLImageAsset | TLVideoAsset)[];
|
|
bail(): this;
|
|
bailToMark(id: string): this;
|
|
batch(fn: () => void): this;
|
|
blur(): this;
|
|
bringForward(ids?: TLShapeId[]): this;
|
|
bringToFront(ids?: TLShapeId[]): this;
|
|
// (undocumented)
|
|
get brush(): Box2dModel | null;
|
|
get camera(): TLCamera;
|
|
cancel(): this;
|
|
cancelDoubleClick(): void;
|
|
get canMoveCamera(): boolean;
|
|
set canMoveCamera(canMove: boolean);
|
|
get canRedo(): boolean;
|
|
get canUndo(): boolean;
|
|
// @internal (undocumented)
|
|
capturedPointerId: null | number;
|
|
centerOnPoint(x: number, y: number, opts?: TLAnimationOptions): this;
|
|
// @internal
|
|
protected _clickManager: ClickManager;
|
|
complete(): this;
|
|
// @internal (undocumented)
|
|
crash(error: unknown): void;
|
|
// @internal
|
|
get crashingError(): unknown;
|
|
createAssets(assets: TLAsset[]): this;
|
|
// @internal (undocumented)
|
|
createErrorAnnotations(origin: string, willCrashApp: 'unknown' | boolean): {
|
|
tags: {
|
|
origin: string;
|
|
willCrashApp: 'unknown' | boolean;
|
|
};
|
|
extras: {
|
|
activeStateNode?: string;
|
|
selectedShapes?: TLUnknownShape[];
|
|
editingShape?: TLUnknownShape;
|
|
inputs?: Record<string, unknown>;
|
|
};
|
|
};
|
|
createPage(title: string, id?: TLPageId, belowPageIndex?: string): this;
|
|
createShapes(partials: TLShapePartial[], select?: boolean): this;
|
|
get croppingId(): null | TLShapeId;
|
|
get cullingBounds(): Box2d;
|
|
// @internal (undocumented)
|
|
readonly _cullingBounds: Atom<Box2d, unknown>;
|
|
get cullingBoundsExpanded(): Box2d;
|
|
// @internal (undocumented)
|
|
readonly _cullingBoundsExpanded: Atom<Box2d, unknown>;
|
|
get currentPage(): TLPage;
|
|
get currentPageId(): TLPageId;
|
|
get currentToolId(): string;
|
|
// (undocumented)
|
|
get cursor(): TLCursor;
|
|
deleteAssets(ids: TLAssetId[]): this;
|
|
deleteOpenMenu(id: string): this;
|
|
deletePage(id: TLPageId): void;
|
|
deleteShapes(ids?: TLShapeId[]): this;
|
|
deselect(...ids: TLShapeId[]): this;
|
|
// (undocumented)
|
|
get devicePixelRatio(): number;
|
|
dispatch(info: TLEventInfo): this;
|
|
readonly disposables: Set<() => void>;
|
|
dispose(): void;
|
|
distributeShapes(operation: 'horizontal' | 'vertical', ids?: TLShapeId[]): this;
|
|
get documentSettings(): TLDocument;
|
|
// (undocumented)
|
|
duplicatePage(id?: TLPageId, createId?: TLPageId): void;
|
|
duplicateShapes(ids?: TLShapeId[], offset?: VecLike): this;
|
|
get editingId(): null | TLShapeId;
|
|
// (undocumented)
|
|
get editingShape(): null | TLUnknownShape;
|
|
// (undocumented)
|
|
enableAnimations: boolean;
|
|
get erasingIds(): TLShapeId[];
|
|
get erasingIdsSet(): Set<TLShapeId>;
|
|
// (undocumented)
|
|
externalContentManager: PlopManager;
|
|
findAncestor(shape: TLShape, predicate: (parent: TLShape) => boolean): TLShape | undefined;
|
|
findCommonAncestor(shapes: TLShape[], predicate?: (shape: TLShape) => boolean): TLShapeId | undefined;
|
|
flipShapes(operation: 'horizontal' | 'vertical', ids?: TLShapeId[]): this;
|
|
focus(): this;
|
|
// (undocumented)
|
|
get focusLayerId(): TLPageId | TLShapeId;
|
|
// (undocumented)
|
|
get focusLayerShape(): TLShape | undefined;
|
|
getAncestors(shape: TLShape, acc?: TLShape[]): TLShape[];
|
|
getAncestorsById(id: TLShapeId, acc?: TLShape[]): TLShape[];
|
|
getArrowsBoundTo(shapeId: TLShapeId): {
|
|
arrowId: TLShapeId;
|
|
handleId: "end" | "start";
|
|
}[];
|
|
getAssetById(id: TLAssetId): TLAsset | undefined;
|
|
getAssetBySrc(src: string): TLBookmarkAsset | TLImageAsset | TLVideoAsset | undefined;
|
|
getBounds(shape: TLShape): Box2d;
|
|
getBoundsById(id: TLShapeId): Box2d | undefined;
|
|
getClipPathById(id: TLShapeId): string | undefined;
|
|
getContainer: () => HTMLElement;
|
|
// (undocumented)
|
|
getContent(ids?: TLShapeId[]): TLContent | undefined;
|
|
getCssColor(id: TLColorStyle['id']): string;
|
|
getDeltaInParentSpace(shape: TLShape, delta: VecLike): Vec2d;
|
|
getDeltaInShapeSpace(shape: TLShape, delta: VecLike): Vec2d;
|
|
// (undocumented)
|
|
getDroppingShape(point: VecLike, droppingShapes?: TLShape[]): TLUnknownShape | undefined;
|
|
// (undocumented)
|
|
getHighestIndexForParent(parentId: TLPageId | TLShapeId): string;
|
|
getMaskedPageBounds(shape: TLShape): Box2d | undefined;
|
|
getMaskedPageBoundsById(id: TLShapeId): Box2d | undefined;
|
|
// (undocumented)
|
|
getOutermostSelectableShape(shape: TLShape, filter?: (shape: TLShape) => boolean): TLShape;
|
|
getOutline(shape: TLShape): Vec2dModel[];
|
|
getOutlineById(id: TLShapeId): Vec2dModel[];
|
|
getPageBounds(shape: TLShape): Box2d | undefined;
|
|
getPageBoundsById(id: TLShapeId): Box2d | undefined;
|
|
getPageById(id: TLPage['id']): TLPage | undefined;
|
|
getPageCenter(shape: TLShape): null | Vec2d;
|
|
getPageCenterById(id: TLShapeId): null | Vec2d;
|
|
getPageCorners(shape: TLShape): Vec2d[];
|
|
getPageInfoById(id: TLPage['id']): TLPage | undefined;
|
|
getPageMaskById(id: TLShapeId): undefined | VecLike[];
|
|
getPagePointById(id: TLShapeId): undefined | Vec2d;
|
|
getPageRotation(shape: TLShape): number;
|
|
getPageRotationById(id: TLShapeId): number;
|
|
getPageStateByPageId(id: TLPageId): TLInstancePageState | undefined;
|
|
getPageTransform(shape: TLShape): Matrix2d | undefined;
|
|
getPageTransformById(id: TLShapeId): Matrix2d | undefined;
|
|
// (undocumented)
|
|
getParentIdForNewShapeAtPoint(point: VecLike, shapeType: TLShape['type']): TLPageId | TLShapeId;
|
|
getParentPageId(shape?: TLShape): TLPageId | undefined;
|
|
getParentShape(shape?: TLShape): TLShape | undefined;
|
|
getParentsMappedToChildren(ids: TLShapeId[]): Map<TLParentId, Set<TLShape>>;
|
|
getParentTransform(shape: TLShape): Matrix2d;
|
|
getPointInParentSpace(shapeId: TLShapeId, point: VecLike): Vec2d;
|
|
getPointInShapeSpace(shape: TLShape, point: VecLike): Vec2d;
|
|
// (undocumented)
|
|
getShapeAndDescendantIds(ids: TLShapeId[]): Set<TLShapeId>;
|
|
getShapeById<T extends TLShape = TLShape>(id: TLParentId): T | undefined;
|
|
getShapeIdsInPage(pageId: TLPageId): Set<TLShapeId>;
|
|
getShapesAtPoint(point: VecLike): TLShape[];
|
|
getShapeUtil<C extends {
|
|
new (...args: any[]): ShapeUtil<any>;
|
|
type: string;
|
|
}>(util: C): InstanceType<C>;
|
|
getShapeUtil<S extends TLUnknownShape>(shape: S | TLShapePartial<S>): ShapeUtil<S>;
|
|
getSortedChildIds(parentId: TLParentId): TLShapeId[];
|
|
getStateDescendant(path: string): StateNode | undefined;
|
|
getStrokeWidth(id: TLSizeStyle['id']): number;
|
|
// (undocumented)
|
|
getSvg(ids?: TLShapeId[], opts?: Partial<{
|
|
scale: number;
|
|
background: boolean;
|
|
padding: number;
|
|
darkMode?: boolean | undefined;
|
|
preserveAspectRatio: React.SVGAttributes<SVGSVGElement>['preserveAspectRatio'];
|
|
}>): Promise<SVGSVGElement | undefined>;
|
|
getTransform(shape: TLShape): Matrix2d;
|
|
// (undocumented)
|
|
get gridSize(): number;
|
|
// (undocumented)
|
|
groupShapes(ids?: TLShapeId[], groupId?: TLShapeId): this;
|
|
hasAncestor(shape: TLShape | undefined, ancestorId: TLShapeId): boolean;
|
|
get hintingIds(): TLShapeId[];
|
|
readonly history: HistoryManager<this>;
|
|
// (undocumented)
|
|
get hoveredId(): null | TLShapeId;
|
|
// (undocumented)
|
|
get hoveredShape(): null | TLUnknownShape;
|
|
inputs: {
|
|
originPagePoint: Vec2d;
|
|
originScreenPoint: Vec2d;
|
|
previousPagePoint: Vec2d;
|
|
previousScreenPoint: Vec2d;
|
|
currentPagePoint: Vec2d;
|
|
currentScreenPoint: Vec2d;
|
|
keys: Set<string>;
|
|
buttons: Set<number>;
|
|
isPen: boolean;
|
|
shiftKey: boolean;
|
|
ctrlKey: boolean;
|
|
altKey: boolean;
|
|
isDragging: boolean;
|
|
isPointing: boolean;
|
|
isPinching: boolean;
|
|
isEditing: boolean;
|
|
isPanning: boolean;
|
|
pointerVelocity: Vec2d;
|
|
};
|
|
get instanceState(): TLInstance;
|
|
interrupt(): this;
|
|
get isChangingStyle(): boolean;
|
|
set isChangingStyle(v: boolean);
|
|
readonly isChromeForIos: boolean;
|
|
get isCoarsePointer(): boolean;
|
|
set isCoarsePointer(v: boolean);
|
|
// (undocumented)
|
|
get isDarkMode(): boolean;
|
|
get isFocused(): boolean;
|
|
// (undocumented)
|
|
get isFocusMode(): boolean;
|
|
// (undocumented)
|
|
get isGridMode(): boolean;
|
|
isIn(path: string): boolean;
|
|
isInAny(...paths: string[]): boolean;
|
|
readonly isIos: boolean;
|
|
get isMenuOpen(): boolean;
|
|
// (undocumented)
|
|
get isPenMode(): boolean;
|
|
isPointInShape(point: VecLike, shape: TLShape): boolean;
|
|
// (undocumented)
|
|
get isReadOnly(): boolean;
|
|
readonly isSafari: boolean;
|
|
isSelected(id: TLShapeId): boolean;
|
|
isShapeInPage(shape: TLShape, pageId?: TLPageId): boolean;
|
|
isShapeInViewport(id: TLShapeId): boolean;
|
|
isShapeOfType<T extends TLUnknownShape>(shape: TLUnknownShape, util: {
|
|
new (...args: any): ShapeUtil<T>;
|
|
type: string;
|
|
}): shape is T;
|
|
isShapeOrAncestorLocked(shape?: TLShape): boolean;
|
|
// (undocumented)
|
|
get isSnapMode(): boolean;
|
|
// (undocumented)
|
|
get isToolLocked(): boolean;
|
|
isWithinSelection(id: TLShapeId): boolean;
|
|
get locale(): string;
|
|
mark(reason?: string, onUndo?: boolean, onRedo?: boolean): string;
|
|
moveShapesToPage(ids: TLShapeId[], pageId: TLPageId): this;
|
|
nudgeShapes(ids: TLShapeId[], direction: Vec2dModel, major?: boolean, ephemeral?: boolean): this;
|
|
get onlySelectedShape(): null | TLShape;
|
|
// (undocumented)
|
|
get opacity(): null | number;
|
|
get openMenus(): string[];
|
|
packShapes(ids?: TLShapeId[], padding?: number): this;
|
|
get pages(): TLPage[];
|
|
get pageState(): TLInstancePageState;
|
|
pageToScreen(x: number, y: number, z?: number, camera?: Vec2dModel): {
|
|
x: number;
|
|
y: number;
|
|
z: number;
|
|
};
|
|
pan(dx: number, dy: number, opts?: TLAnimationOptions): this;
|
|
panZoomIntoView(ids: TLShapeId[], opts?: TLAnimationOptions): this;
|
|
// (undocumented)
|
|
popFocusLayer(): this;
|
|
// @internal (undocumented)
|
|
get projectName(): string;
|
|
// @internal
|
|
get props(): null | TLNullableShapeProps;
|
|
// (undocumented)
|
|
putContent(content: TLContent, options?: {
|
|
point?: VecLike;
|
|
select?: boolean;
|
|
preservePosition?: boolean;
|
|
preserveIds?: boolean;
|
|
}): this;
|
|
putExternalContent(info: TLExternalContent): Promise<void>;
|
|
redo(): this;
|
|
renamePage(id: TLPageId, name: string, squashing?: boolean): this;
|
|
get renderingShapes(): {
|
|
id: TLShapeId;
|
|
index: number;
|
|
backgroundIndex: number;
|
|
opacity: number;
|
|
isCulled: boolean;
|
|
isInViewport: boolean;
|
|
maskedPageBounds: Box2d | undefined;
|
|
}[];
|
|
reorderShapes(operation: 'backward' | 'forward' | 'toBack' | 'toFront', ids: TLShapeId[]): this;
|
|
reparentShapesById(ids: TLShapeId[], parentId: TLParentId, insertIndex?: string): this;
|
|
// (undocumented)
|
|
replaceStoreContentsWithRecordsForOtherDocument(records: TLRecord[]): void;
|
|
resetZoom(point?: Vec2d, opts?: TLAnimationOptions): this;
|
|
// (undocumented)
|
|
resizeShape(id: TLShapeId, scale: VecLike, options?: {
|
|
initialBounds?: Box2d;
|
|
scaleOrigin?: VecLike;
|
|
scaleAxisRotation?: number;
|
|
initialShape?: TLShape;
|
|
initialPageTransform?: MatLike;
|
|
dragHandle?: TLResizeHandle;
|
|
mode?: TLResizeMode;
|
|
}): this;
|
|
readonly root: RootState;
|
|
rotateShapesBy(ids: TLShapeId[], delta: number): this;
|
|
screenToPage(x: number, y: number, z?: number, camera?: Vec2dModel): {
|
|
x: number;
|
|
y: number;
|
|
z: number;
|
|
};
|
|
// (undocumented)
|
|
get scribble(): null | TLScribble;
|
|
select(...ids: TLShapeId[]): this;
|
|
selectAll(): this;
|
|
get selectedIds(): TLShapeId[];
|
|
get selectedIdsSet(): ReadonlySet<TLShapeId>;
|
|
get selectedPageBounds(): Box2d | null;
|
|
get selectedShapes(): TLShape[];
|
|
// (undocumented)
|
|
get selectionBounds(): Box2d | undefined;
|
|
// (undocumented)
|
|
get selectionPageCenter(): null | Vec2d;
|
|
get selectionRotation(): number;
|
|
selectNone(): this;
|
|
sendBackward(ids?: TLShapeId[]): this;
|
|
sendToBack(ids?: TLShapeId[]): this;
|
|
// (undocumented)
|
|
setAnimationSpeed(animationSpeed: number): this;
|
|
setBrush(brush?: Box2dModel | null): this;
|
|
setCamera(x: number, y: number, z?: number, { stopFollowing }?: TLViewportOptions): this;
|
|
// (undocumented)
|
|
setCroppingId(id: null | TLShapeId): this;
|
|
setCurrentPageId(pageId: TLPageId, { stopFollowing }?: TLViewportOptions): this;
|
|
setCursor(cursor: Partial<TLCursor>): this;
|
|
// (undocumented)
|
|
setDarkMode(isDarkMode: boolean): this;
|
|
setEditingId(id: null | TLShapeId): this;
|
|
setErasingIds(ids?: TLShapeId[]): this;
|
|
setFocusLayer(next: null | TLShapeId): this;
|
|
// (undocumented)
|
|
setFocusMode(isFocusMode: boolean): this;
|
|
// (undocumented)
|
|
setGridMode(isGridMode: boolean): this;
|
|
setHintingIds(ids: TLShapeId[]): this;
|
|
setHoveredId(id?: null | TLShapeId): this;
|
|
setInstancePageState(partial: Partial<TLInstancePageState>, ephemeral?: boolean): void;
|
|
setLocale(locale: string): void;
|
|
setOpacity(opacity: number, ephemeral?: boolean, squashing?: boolean): this;
|
|
// (undocumented)
|
|
setPenMode(isPenMode: boolean): this;
|
|
// @internal (undocumented)
|
|
setProjectName(name: string): void;
|
|
setProp(key: TLShapeProp, value: any, ephemeral?: boolean, squashing?: boolean): this;
|
|
// (undocumented)
|
|
setReadOnly(isReadOnly: boolean): this;
|
|
setScribble(scribble?: null | TLScribble): this;
|
|
setSelectedIds(ids: TLShapeId[], squashing?: boolean): this;
|
|
setSelectedTool(id: string, info?: {}): this;
|
|
// (undocumented)
|
|
setSnapMode(isSnapMode: boolean): this;
|
|
// (undocumented)
|
|
setToolLocked(isToolLocked: boolean): this;
|
|
setZoomBrush(zoomBrush?: Box2dModel | null): this;
|
|
get shapeIds(): Set<TLShapeId>;
|
|
get shapesArray(): TLShape[];
|
|
shapeUtils: {
|
|
readonly [K in string]?: ShapeUtil<TLUnknownShape>;
|
|
};
|
|
// (undocumented)
|
|
slideCamera(opts?: {
|
|
speed: number;
|
|
direction: Vec2d;
|
|
friction: number;
|
|
speedThreshold?: number | undefined;
|
|
}): this | undefined;
|
|
readonly snaps: SnapManager;
|
|
get sortedShapesArray(): TLShape[];
|
|
stackShapes(operation: 'horizontal' | 'vertical', ids?: TLShapeId[], gap?: number): this;
|
|
startFollowingUser(userId: string): this | undefined;
|
|
stopCameraAnimation(): this;
|
|
stopFollowingUser(): this;
|
|
readonly store: TLStore;
|
|
stretchShapes(operation: 'horizontal' | 'vertical', ids?: TLShapeId[]): this;
|
|
static styles: TLStyleCollections;
|
|
textMeasure: TextManager;
|
|
// (undocumented)
|
|
toggleLock(ids?: TLShapeId[]): this;
|
|
undo(): HistoryManager<this>;
|
|
// (undocumented)
|
|
ungroupShapes(ids?: TLShapeId[]): this;
|
|
updateAssets(assets: TLAssetPartial[]): this;
|
|
// @internal
|
|
updateCullingBounds(): this;
|
|
// (undocumented)
|
|
updateDocumentSettings(settings: Partial<TLDocument>): void;
|
|
updateInstanceState(partial: Partial<Omit<TLInstance, 'currentPageId'>>, ephemeral?: boolean, squashing?: boolean): this;
|
|
updatePage(partial: RequiredKeys<TLPage, 'id'>, squashing?: boolean): this;
|
|
updateShapes(partials: (null | TLShapePartial | undefined)[], squashing?: boolean): this;
|
|
updateViewportScreenBounds(center?: boolean): this;
|
|
// (undocumented)
|
|
readonly user: UserPreferencesManager;
|
|
get viewportPageBounds(): Box2d;
|
|
get viewportPageCenter(): Vec2d;
|
|
get viewportScreenBounds(): Box2d;
|
|
get viewportScreenCenter(): Vec2d;
|
|
visitDescendants(parentId: TLParentId, visitor: (id: TLShapeId) => false | void): void;
|
|
// (undocumented)
|
|
get zoomBrush(): Box2dModel | null;
|
|
zoomIn(point?: Vec2d, opts?: TLAnimationOptions): this;
|
|
get zoomLevel(): number;
|
|
zoomOut(point?: Vec2d, opts?: TLAnimationOptions): this;
|
|
zoomToBounds(x: number, y: number, width: number, height: number, targetZoom?: number, opts?: TLAnimationOptions): this;
|
|
zoomToContent(): this;
|
|
zoomToFit(opts?: TLAnimationOptions): this;
|
|
zoomToSelection(opts?: TLAnimationOptions): this;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class EmbedShapeUtil extends BaseBoxShapeUtil<TLEmbedShape> {
|
|
// (undocumented)
|
|
canEdit: TLShapeUtilFlag<TLEmbedShape>;
|
|
// (undocumented)
|
|
canResize: (shape: TLEmbedShape) => boolean;
|
|
// (undocumented)
|
|
canUnmount: TLShapeUtilFlag<TLEmbedShape>;
|
|
// (undocumented)
|
|
defaultProps(): TLEmbedShape['props'];
|
|
// (undocumented)
|
|
hideSelectionBoundsBg: TLShapeUtilFlag<TLEmbedShape>;
|
|
// (undocumented)
|
|
hideSelectionBoundsFg: TLShapeUtilFlag<TLEmbedShape>;
|
|
// (undocumented)
|
|
indicator(shape: TLEmbedShape): JSX.Element;
|
|
// (undocumented)
|
|
isAspectRatioLocked: TLShapeUtilFlag<TLEmbedShape>;
|
|
// (undocumented)
|
|
onResize: TLOnResizeHandler<TLEmbedShape>;
|
|
// (undocumented)
|
|
render(shape: TLEmbedShape): JSX.Element;
|
|
// (undocumented)
|
|
static type: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class ErrorBoundary extends React_3.Component<React_3.PropsWithRef<React_3.PropsWithChildren<TLErrorBoundaryProps>>, TLErrorBoundaryState> {
|
|
// (undocumented)
|
|
componentDidCatch(error: unknown): void;
|
|
// (undocumented)
|
|
static getDerivedStateFromError(error: Error): {
|
|
error: Error;
|
|
};
|
|
// (undocumented)
|
|
render(): React_3.ReactNode;
|
|
// (undocumented)
|
|
state: TLErrorBoundaryState;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function ErrorScreen({ children }: {
|
|
children: any;
|
|
}): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export const EVENT_NAME_MAP: Record<Exclude<TLEventName, TLPinchEventName>, keyof TLEventHandlers>;
|
|
|
|
// @internal (undocumented)
|
|
export function extractSessionStateFromLegacySnapshot(store: Record<string, UnknownRecord>): null | TLSessionStateSnapshot;
|
|
|
|
// @internal (undocumented)
|
|
export const featureFlags: {
|
|
peopleMenu: DebugFlag<boolean>;
|
|
highlighterTool: DebugFlag<boolean>;
|
|
};
|
|
|
|
// @public
|
|
export function fileToBase64(file: Blob): Promise<string>;
|
|
|
|
// @public (undocumented)
|
|
export const FONT_ALIGNMENT: Record<TLAlignType, string>;
|
|
|
|
// @public (undocumented)
|
|
export const FONT_FAMILIES: Record<TLFontType, string>;
|
|
|
|
// @public (undocumented)
|
|
export const FONT_SIZES: Record<TLSizeType, number>;
|
|
|
|
// @public (undocumented)
|
|
export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
|
|
// (undocumented)
|
|
canBind: () => boolean;
|
|
// (undocumented)
|
|
canDropShapes: (shape: TLFrameShape, _shapes: TLShape[]) => boolean;
|
|
// (undocumented)
|
|
canEdit: () => boolean;
|
|
// (undocumented)
|
|
canReceiveNewChildrenOfType: (shape: TLShape, _type: TLShape['type']) => boolean;
|
|
// (undocumented)
|
|
defaultProps(): TLFrameShape['props'];
|
|
// (undocumented)
|
|
indicator(shape: TLFrameShape): JSX.Element;
|
|
// (undocumented)
|
|
onDragShapesOut: (_shape: TLFrameShape, shapes: TLShape[]) => void;
|
|
// (undocumented)
|
|
onDragShapesOver: (frame: TLFrameShape, shapes: TLShape[]) => {
|
|
shouldHint: boolean;
|
|
};
|
|
// (undocumented)
|
|
onResizeEnd: TLOnResizeEndHandler<TLFrameShape>;
|
|
// (undocumented)
|
|
providesBackgroundForChildren(): boolean;
|
|
// (undocumented)
|
|
render(shape: TLFrameShape): JSX.Element;
|
|
// (undocumented)
|
|
toSvg(shape: TLFrameShape, font: string, colors: TLExportColors): Promise<SVGElement> | SVGElement;
|
|
// (undocumented)
|
|
static type: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
|
|
// (undocumented)
|
|
canEdit: () => boolean;
|
|
// (undocumented)
|
|
defaultProps(): TLGeoShape['props'];
|
|
// (undocumented)
|
|
getBounds(shape: TLGeoShape): Box2d;
|
|
// (undocumented)
|
|
getCenter(shape: TLGeoShape): Vec2d;
|
|
// (undocumented)
|
|
getOutline(shape: TLGeoShape): Vec2d[];
|
|
// (undocumented)
|
|
hitTestLineSegment(shape: TLGeoShape, A: VecLike, B: VecLike): boolean;
|
|
// (undocumented)
|
|
hitTestPoint(shape: TLGeoShape, point: VecLike): boolean;
|
|
// (undocumented)
|
|
indicator(shape: TLGeoShape): JSX.Element;
|
|
// (undocumented)
|
|
onBeforeCreate: (shape: TLGeoShape) => {
|
|
props: {
|
|
growY: number;
|
|
geo: "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "diamond" | "ellipse" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box";
|
|
labelColor: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow";
|
|
color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow";
|
|
fill: "none" | "pattern" | "semi" | "solid";
|
|
dash: "dashed" | "dotted" | "draw" | "solid";
|
|
size: "l" | "m" | "s" | "xl";
|
|
font: "draw" | "mono" | "sans" | "serif";
|
|
align: "end" | "middle" | "start";
|
|
verticalAlign: "end" | "middle" | "start";
|
|
url: string;
|
|
w: number;
|
|
h: number;
|
|
text: string;
|
|
};
|
|
type: "geo";
|
|
x: number;
|
|
y: number;
|
|
rotation: number;
|
|
index: string;
|
|
parentId: TLParentId;
|
|
isLocked: boolean;
|
|
opacity: number;
|
|
id: TLShapeId;
|
|
typeName: "shape";
|
|
} | undefined;
|
|
// (undocumented)
|
|
onBeforeUpdate: (prev: TLGeoShape, next: TLGeoShape) => {
|
|
props: {
|
|
growY: number;
|
|
geo: "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "diamond" | "ellipse" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box";
|
|
labelColor: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow";
|
|
color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow";
|
|
fill: "none" | "pattern" | "semi" | "solid";
|
|
dash: "dashed" | "dotted" | "draw" | "solid";
|
|
size: "l" | "m" | "s" | "xl";
|
|
font: "draw" | "mono" | "sans" | "serif";
|
|
align: "end" | "middle" | "start";
|
|
verticalAlign: "end" | "middle" | "start";
|
|
url: string;
|
|
w: number;
|
|
h: number;
|
|
text: string;
|
|
};
|
|
type: "geo";
|
|
x: number;
|
|
y: number;
|
|
rotation: number;
|
|
index: string;
|
|
parentId: TLParentId;
|
|
isLocked: boolean;
|
|
opacity: number;
|
|
id: TLShapeId;
|
|
typeName: "shape";
|
|
} | undefined;
|
|
// (undocumented)
|
|
onDoubleClick: (shape: TLGeoShape) => {
|
|
props: {
|
|
geo: "check-box";
|
|
};
|
|
type: "geo";
|
|
x: number;
|
|
y: number;
|
|
rotation: number;
|
|
index: string;
|
|
parentId: TLParentId;
|
|
isLocked: boolean;
|
|
opacity: number;
|
|
id: TLShapeId;
|
|
typeName: "shape";
|
|
} | {
|
|
props: {
|
|
geo: "rectangle";
|
|
};
|
|
type: "geo";
|
|
x: number;
|
|
y: number;
|
|
rotation: number;
|
|
index: string;
|
|
parentId: TLParentId;
|
|
isLocked: boolean;
|
|
opacity: number;
|
|
id: TLShapeId;
|
|
typeName: "shape";
|
|
} | undefined;
|
|
// (undocumented)
|
|
onEditEnd: TLOnEditEndHandler<TLGeoShape>;
|
|
// (undocumented)
|
|
onResize: TLOnResizeHandler<TLGeoShape>;
|
|
// (undocumented)
|
|
render(shape: TLGeoShape): JSX.Element;
|
|
// (undocumented)
|
|
toSvg(shape: TLGeoShape, font: string, colors: TLExportColors): SVGElement;
|
|
// (undocumented)
|
|
static type: string;
|
|
}
|
|
|
|
// @public
|
|
export function getEmbedInfo(inputUrl: string): TLEmbedResult;
|
|
|
|
// @public
|
|
export function getEmbedInfoUnsafely(inputUrl: string): TLEmbedResult;
|
|
|
|
// @public
|
|
export function getFileMetaData(file: File): Promise<{
|
|
isAnimated: boolean;
|
|
}>;
|
|
|
|
export { getHashForString }
|
|
|
|
// @public
|
|
export function getImageSizeFromSrc(dataURL: string): Promise<{
|
|
w: number;
|
|
h: number;
|
|
}>;
|
|
|
|
// @public
|
|
export function getIncrementedName(name: string, others: string[]): string;
|
|
|
|
// @public
|
|
export function getMediaAssetFromFile(file: File): Promise<TLAsset>;
|
|
|
|
// @internal (undocumented)
|
|
export function getPointerInfo(e: PointerEvent | React.PointerEvent, container: HTMLElement): {
|
|
point: {
|
|
x: number;
|
|
y: number;
|
|
z: number;
|
|
};
|
|
shiftKey: boolean;
|
|
altKey: boolean;
|
|
ctrlKey: boolean;
|
|
pointerId: number;
|
|
button: number;
|
|
isPen: boolean;
|
|
};
|
|
|
|
// @public
|
|
export function getResizedImageDataUrl(dataURLForImage: string, width: number, height: number): Promise<string>;
|
|
|
|
// @public (undocumented)
|
|
export function getSplineForLineShape(shape: TLLineShape): NonNullable<CubicSpline2d | Polyline2d>;
|
|
|
|
// @public (undocumented)
|
|
export function getSvgAsDataUrl(svg: SVGElement): Promise<string>;
|
|
|
|
// @public (undocumented)
|
|
export function getSvgAsDataUrlSync(node: SVGElement): string;
|
|
|
|
// @public (undocumented)
|
|
export function getSvgAsImage(svg: SVGElement, options: {
|
|
type: TLCopyType | TLExportType;
|
|
quality: number;
|
|
scale: number;
|
|
}): Promise<Blob | null>;
|
|
|
|
// @public (undocumented)
|
|
export function getSvgAsString(svg: SVGElement): string;
|
|
|
|
// @public
|
|
export function getSvgPathFromStroke(points: Vec2d[], closed?: boolean): string;
|
|
|
|
// @public
|
|
export function getSvgPathFromStrokePoints(points: StrokePoint[], closed?: boolean): string;
|
|
|
|
// @public (undocumented)
|
|
export function getTextBoundingBox(text: SVGTextElement): DOMRect;
|
|
|
|
// @public (undocumented)
|
|
export function getUserPreferences(): TLUserPreferences;
|
|
|
|
// @public (undocumented)
|
|
export const getValidHttpURLList: (url: string) => string[] | undefined;
|
|
|
|
// @public
|
|
export function getVideoSizeFromSrc(src: string): Promise<{
|
|
w: number;
|
|
h: number;
|
|
}>;
|
|
|
|
// @internal (undocumented)
|
|
export const GRID_INCREMENT = 5;
|
|
|
|
// @public (undocumented)
|
|
export const GRID_STEPS: {
|
|
min: number;
|
|
mid: number;
|
|
step: number;
|
|
}[];
|
|
|
|
// @public (undocumented)
|
|
export class GroupShapeUtil extends ShapeUtil<TLGroupShape> {
|
|
// (undocumented)
|
|
canBind: () => boolean;
|
|
// (undocumented)
|
|
defaultProps(): TLGroupShape['props'];
|
|
// (undocumented)
|
|
getBounds(shape: TLGroupShape): Box2d;
|
|
// (undocumented)
|
|
getCenter(shape: TLGroupShape): Vec2dModel;
|
|
// (undocumented)
|
|
getOutline(shape: TLGroupShape): Vec2dModel[];
|
|
// (undocumented)
|
|
hideSelectionBoundsBg: () => boolean;
|
|
// (undocumented)
|
|
hideSelectionBoundsFg: () => boolean;
|
|
// (undocumented)
|
|
indicator(shape: TLGroupShape): JSX.Element;
|
|
// (undocumented)
|
|
onChildrenChange: TLOnChildrenChangeHandler<TLGroupShape>;
|
|
// (undocumented)
|
|
render(shape: TLGroupShape): JSX.Element | null;
|
|
// (undocumented)
|
|
static type: string;
|
|
// (undocumented)
|
|
type: "group";
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export const HAND_TOOL_FRICTION = 0.09;
|
|
|
|
// @public
|
|
export function hardReset({ shouldReload }?: {
|
|
shouldReload?: boolean | undefined;
|
|
}): Promise<void>;
|
|
|
|
// @public (undocumented)
|
|
export function hardResetEditor(): void;
|
|
|
|
// @internal (undocumented)
|
|
export const HASH_PATERN_ZOOM_NAMES: Record<string, string>;
|
|
|
|
// @public (undocumented)
|
|
export class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {
|
|
// (undocumented)
|
|
defaultProps(): TLHighlightShape['props'];
|
|
// (undocumented)
|
|
expandSelectionOutlinePx(shape: TLHighlightShape): number;
|
|
// (undocumented)
|
|
getBounds(shape: TLHighlightShape): Box2d;
|
|
// (undocumented)
|
|
getCenter(shape: TLHighlightShape): Vec2d;
|
|
// (undocumented)
|
|
getOutline(shape: TLHighlightShape): Vec2d[];
|
|
// (undocumented)
|
|
hideResizeHandles: (shape: TLHighlightShape) => boolean;
|
|
// (undocumented)
|
|
hideRotateHandle: (shape: TLHighlightShape) => boolean;
|
|
// (undocumented)
|
|
hideSelectionBoundsBg: (shape: TLHighlightShape) => boolean;
|
|
// (undocumented)
|
|
hideSelectionBoundsFg: (shape: TLHighlightShape) => boolean;
|
|
// (undocumented)
|
|
hitTestLineSegment(shape: TLHighlightShape, A: VecLike, B: VecLike): boolean;
|
|
// (undocumented)
|
|
hitTestPoint(shape: TLHighlightShape, point: VecLike): boolean;
|
|
// (undocumented)
|
|
indicator(shape: TLHighlightShape): JSX.Element;
|
|
// (undocumented)
|
|
onResize: TLOnResizeHandler<TLHighlightShape>;
|
|
// (undocumented)
|
|
render(shape: TLHighlightShape): JSX.Element;
|
|
// (undocumented)
|
|
renderBackground(shape: TLHighlightShape): JSX.Element;
|
|
// (undocumented)
|
|
toBackgroundSvg(shape: TLHighlightShape, font: string | undefined, colors: TLExportColors): SVGPathElement;
|
|
// (undocumented)
|
|
toSvg(shape: TLHighlightShape, _font: string | undefined, colors: TLExportColors): SVGPathElement;
|
|
// (undocumented)
|
|
static type: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function HTMLContainer({ children, className, ...rest }: HTMLContainerProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export type HTMLContainerProps = React_3.HTMLAttributes<HTMLDivElement>;
|
|
|
|
// @public (undocumented)
|
|
export const ICON_SIZES: Record<TLSizeType, number>;
|
|
|
|
// @public (undocumented)
|
|
export class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
|
|
// (undocumented)
|
|
canCrop: () => boolean;
|
|
// (undocumented)
|
|
defaultProps(): TLImageShape['props'];
|
|
// (undocumented)
|
|
indicator(shape: TLImageShape): JSX.Element | null;
|
|
// (undocumented)
|
|
isAspectRatioLocked: () => boolean;
|
|
// (undocumented)
|
|
onDoubleClick: (shape: TLImageShape) => void;
|
|
// (undocumented)
|
|
onDoubleClickEdge: TLOnDoubleClickHandler<TLImageShape>;
|
|
// (undocumented)
|
|
render(shape: TLImageShape): JSX.Element;
|
|
// (undocumented)
|
|
toSvg(shape: TLImageShape): Promise<SVGGElement>;
|
|
// (undocumented)
|
|
static type: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export const INDENT = " ";
|
|
|
|
// @public
|
|
export function isAnimated(buffer: ArrayBuffer): boolean;
|
|
|
|
// @public (undocumented)
|
|
export function isGeoShape(shape: TLShape): shape is TLGeoShape;
|
|
|
|
// @public
|
|
export function isGIF(buffer: ArrayBuffer): boolean;
|
|
|
|
// @public (undocumented)
|
|
export const isImage: (ext: string) => boolean;
|
|
|
|
// @public (undocumented)
|
|
export function isNoteShape(shape: TLShape): shape is TLNoteShape;
|
|
|
|
// @public
|
|
export function isSerializable(value: any): boolean;
|
|
|
|
// @public (undocumented)
|
|
export const isSvgText: (text: string) => boolean;
|
|
|
|
// @public (undocumented)
|
|
export const isValidHttpURL: (url: string) => boolean;
|
|
|
|
// @public (undocumented)
|
|
export const LABEL_FONT_SIZES: Record<TLSizeType, number>;
|
|
|
|
// @public (undocumented)
|
|
export class LineShapeUtil extends ShapeUtil<TLLineShape> {
|
|
// (undocumented)
|
|
defaultProps(): TLLineShape['props'];
|
|
// (undocumented)
|
|
getBounds(shape: TLLineShape): Box2d;
|
|
// (undocumented)
|
|
getCenter(shape: TLLineShape): Vec2d;
|
|
// (undocumented)
|
|
getHandles(shape: TLLineShape): TLHandle[];
|
|
// (undocumented)
|
|
getOutline(shape: TLLineShape): Vec2d[];
|
|
// (undocumented)
|
|
hideResizeHandles: () => boolean;
|
|
// (undocumented)
|
|
hideRotateHandle: () => boolean;
|
|
// (undocumented)
|
|
hideSelectionBoundsBg: () => boolean;
|
|
// (undocumented)
|
|
hideSelectionBoundsFg: () => boolean;
|
|
// (undocumented)
|
|
hitTestLineSegment(shape: TLLineShape, A: VecLike, B: VecLike): boolean;
|
|
// (undocumented)
|
|
hitTestPoint(shape: TLLineShape, point: Vec2d): boolean;
|
|
// (undocumented)
|
|
indicator(shape: TLLineShape): JSX.Element;
|
|
// (undocumented)
|
|
isClosed: () => boolean;
|
|
// (undocumented)
|
|
onHandleChange: TLOnHandleChangeHandler<TLLineShape>;
|
|
// (undocumented)
|
|
onResize: TLOnResizeHandler<TLLineShape>;
|
|
// (undocumented)
|
|
render(shape: TLLineShape): JSX.Element | undefined;
|
|
// (undocumented)
|
|
toSvg(shape: TLLineShape, _font: string, colors: TLExportColors): SVGGElement;
|
|
// (undocumented)
|
|
static type: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function LoadingScreen({ children }: {
|
|
children: any;
|
|
}): JSX.Element;
|
|
|
|
// @public
|
|
export function loadSessionStateSnapshotIntoStore(store: TLStore, snapshot: TLSessionStateSnapshot): void;
|
|
|
|
// @public (undocumented)
|
|
export function loopToHtmlElement(elm: Element): HTMLElement;
|
|
|
|
// @internal (undocumented)
|
|
export const MAJOR_NUDGE_FACTOR = 10;
|
|
|
|
// @public (undocumented)
|
|
export function matchEmbedUrl(url: string): {
|
|
definition: {
|
|
readonly type: "codepen";
|
|
readonly title: "Codepen";
|
|
readonly hostnames: readonly ["codepen.io"];
|
|
readonly minWidth: 300;
|
|
readonly minHeight: 300;
|
|
readonly width: 520;
|
|
readonly height: 400;
|
|
readonly doesResize: true;
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
} | {
|
|
readonly type: "codesandbox";
|
|
readonly title: "CodeSandbox";
|
|
readonly hostnames: readonly ["codesandbox.io"];
|
|
readonly minWidth: 300;
|
|
readonly minHeight: 300;
|
|
readonly width: 720;
|
|
readonly height: 500;
|
|
readonly doesResize: true;
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
} | {
|
|
readonly type: "excalidraw";
|
|
readonly title: "Excalidraw";
|
|
readonly hostnames: readonly ["excalidraw.com"];
|
|
readonly width: 720;
|
|
readonly height: 500;
|
|
readonly doesResize: true;
|
|
readonly isAspectRatioLocked: true;
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
} | {
|
|
readonly type: "felt";
|
|
readonly title: "Felt";
|
|
readonly hostnames: readonly ["felt.com"];
|
|
readonly width: 720;
|
|
readonly height: 500;
|
|
readonly doesResize: true;
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
} | {
|
|
readonly type: "figma";
|
|
readonly title: "Figma";
|
|
readonly hostnames: readonly ["figma.com"];
|
|
readonly width: 720;
|
|
readonly height: 500;
|
|
readonly doesResize: true;
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
} | {
|
|
readonly type: "github_gist";
|
|
readonly title: "GitHub Gist";
|
|
readonly hostnames: readonly ["gist.github.com"];
|
|
readonly width: 720;
|
|
readonly height: 500;
|
|
readonly doesResize: true;
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
} | {
|
|
readonly type: "google_calendar";
|
|
readonly title: "Google Calendar";
|
|
readonly hostnames: readonly ["calendar.google.*"];
|
|
readonly width: 720;
|
|
readonly height: 500;
|
|
readonly minWidth: 460;
|
|
readonly minHeight: 360;
|
|
readonly doesResize: true;
|
|
readonly instructionLink: "https://support.google.com/calendar/answer/41207?hl=en";
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
} | {
|
|
readonly type: "google_maps";
|
|
readonly title: "Google Maps";
|
|
readonly hostnames: readonly ["google.*"];
|
|
readonly width: 720;
|
|
readonly height: 500;
|
|
readonly doesResize: true;
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
} | {
|
|
readonly type: "google_slides";
|
|
readonly title: "Google Slides";
|
|
readonly hostnames: readonly ["docs.google.*"];
|
|
readonly width: 720;
|
|
readonly height: 500;
|
|
readonly minWidth: 460;
|
|
readonly minHeight: 360;
|
|
readonly doesResize: true;
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
} | {
|
|
readonly type: "observable";
|
|
readonly title: "Observable";
|
|
readonly hostnames: readonly ["observablehq.com"];
|
|
readonly width: 720;
|
|
readonly height: 500;
|
|
readonly doesResize: true;
|
|
readonly isAspectRatioLocked: false;
|
|
readonly backgroundColor: "#fff";
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
} | {
|
|
readonly type: "replit";
|
|
readonly title: "Replit";
|
|
readonly hostnames: readonly ["replit.com"];
|
|
readonly width: 720;
|
|
readonly height: 500;
|
|
readonly doesResize: true;
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
} | {
|
|
readonly type: "scratch";
|
|
readonly title: "Scratch";
|
|
readonly hostnames: readonly ["scratch.mit.edu"];
|
|
readonly width: 520;
|
|
readonly height: 400;
|
|
readonly doesResize: false;
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
} | {
|
|
readonly type: "spotify";
|
|
readonly title: "Spotify";
|
|
readonly hostnames: readonly ["open.spotify.com"];
|
|
readonly width: 720;
|
|
readonly height: 500;
|
|
readonly minHeight: 500;
|
|
readonly overrideOutlineRadius: 12;
|
|
readonly doesResize: true;
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
} | {
|
|
readonly type: "tldraw";
|
|
readonly title: "tldraw";
|
|
readonly hostnames: readonly ["beta.tldraw.com", "lite.tldraw.com", "www.tldraw.com"];
|
|
readonly minWidth: 300;
|
|
readonly minHeight: 300;
|
|
readonly width: 720;
|
|
readonly height: 500;
|
|
readonly doesResize: true;
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
} | {
|
|
readonly type: "vimeo";
|
|
readonly title: "Vimeo";
|
|
readonly hostnames: readonly ["vimeo.com", "player.vimeo.com"];
|
|
readonly width: 640;
|
|
readonly height: 360;
|
|
readonly doesResize: true;
|
|
readonly isAspectRatioLocked: true;
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
} | {
|
|
readonly type: "youtube";
|
|
readonly title: "YouTube";
|
|
readonly hostnames: readonly ["*.youtube.com", "youtube.com", "youtu.be"];
|
|
readonly width: 800;
|
|
readonly height: 450;
|
|
readonly doesResize: true;
|
|
readonly overridePermissions: {
|
|
readonly 'allow-presentation': true;
|
|
};
|
|
readonly isAspectRatioLocked: true;
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
};
|
|
url: string;
|
|
embedUrl: string;
|
|
} | undefined;
|
|
|
|
// @public (undocumented)
|
|
export function matchUrl(url: string): {
|
|
definition: {
|
|
readonly type: "codepen";
|
|
readonly title: "Codepen";
|
|
readonly hostnames: readonly ["codepen.io"];
|
|
readonly minWidth: 300;
|
|
readonly minHeight: 300;
|
|
readonly width: 520;
|
|
readonly height: 400;
|
|
readonly doesResize: true;
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
} | {
|
|
readonly type: "codesandbox";
|
|
readonly title: "CodeSandbox";
|
|
readonly hostnames: readonly ["codesandbox.io"];
|
|
readonly minWidth: 300;
|
|
readonly minHeight: 300;
|
|
readonly width: 720;
|
|
readonly height: 500;
|
|
readonly doesResize: true;
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
} | {
|
|
readonly type: "excalidraw";
|
|
readonly title: "Excalidraw";
|
|
readonly hostnames: readonly ["excalidraw.com"];
|
|
readonly width: 720;
|
|
readonly height: 500;
|
|
readonly doesResize: true;
|
|
readonly isAspectRatioLocked: true;
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
} | {
|
|
readonly type: "felt";
|
|
readonly title: "Felt";
|
|
readonly hostnames: readonly ["felt.com"];
|
|
readonly width: 720;
|
|
readonly height: 500;
|
|
readonly doesResize: true;
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
} | {
|
|
readonly type: "figma";
|
|
readonly title: "Figma";
|
|
readonly hostnames: readonly ["figma.com"];
|
|
readonly width: 720;
|
|
readonly height: 500;
|
|
readonly doesResize: true;
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
} | {
|
|
readonly type: "github_gist";
|
|
readonly title: "GitHub Gist";
|
|
readonly hostnames: readonly ["gist.github.com"];
|
|
readonly width: 720;
|
|
readonly height: 500;
|
|
readonly doesResize: true;
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
} | {
|
|
readonly type: "google_calendar";
|
|
readonly title: "Google Calendar";
|
|
readonly hostnames: readonly ["calendar.google.*"];
|
|
readonly width: 720;
|
|
readonly height: 500;
|
|
readonly minWidth: 460;
|
|
readonly minHeight: 360;
|
|
readonly doesResize: true;
|
|
readonly instructionLink: "https://support.google.com/calendar/answer/41207?hl=en";
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
} | {
|
|
readonly type: "google_maps";
|
|
readonly title: "Google Maps";
|
|
readonly hostnames: readonly ["google.*"];
|
|
readonly width: 720;
|
|
readonly height: 500;
|
|
readonly doesResize: true;
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
} | {
|
|
readonly type: "google_slides";
|
|
readonly title: "Google Slides";
|
|
readonly hostnames: readonly ["docs.google.*"];
|
|
readonly width: 720;
|
|
readonly height: 500;
|
|
readonly minWidth: 460;
|
|
readonly minHeight: 360;
|
|
readonly doesResize: true;
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
} | {
|
|
readonly type: "observable";
|
|
readonly title: "Observable";
|
|
readonly hostnames: readonly ["observablehq.com"];
|
|
readonly width: 720;
|
|
readonly height: 500;
|
|
readonly doesResize: true;
|
|
readonly isAspectRatioLocked: false;
|
|
readonly backgroundColor: "#fff";
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
} | {
|
|
readonly type: "replit";
|
|
readonly title: "Replit";
|
|
readonly hostnames: readonly ["replit.com"];
|
|
readonly width: 720;
|
|
readonly height: 500;
|
|
readonly doesResize: true;
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
} | {
|
|
readonly type: "scratch";
|
|
readonly title: "Scratch";
|
|
readonly hostnames: readonly ["scratch.mit.edu"];
|
|
readonly width: 520;
|
|
readonly height: 400;
|
|
readonly doesResize: false;
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
} | {
|
|
readonly type: "spotify";
|
|
readonly title: "Spotify";
|
|
readonly hostnames: readonly ["open.spotify.com"];
|
|
readonly width: 720;
|
|
readonly height: 500;
|
|
readonly minHeight: 500;
|
|
readonly overrideOutlineRadius: 12;
|
|
readonly doesResize: true;
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
} | {
|
|
readonly type: "tldraw";
|
|
readonly title: "tldraw";
|
|
readonly hostnames: readonly ["beta.tldraw.com", "lite.tldraw.com", "www.tldraw.com"];
|
|
readonly minWidth: 300;
|
|
readonly minHeight: 300;
|
|
readonly width: 720;
|
|
readonly height: 500;
|
|
readonly doesResize: true;
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
} | {
|
|
readonly type: "vimeo";
|
|
readonly title: "Vimeo";
|
|
readonly hostnames: readonly ["vimeo.com", "player.vimeo.com"];
|
|
readonly width: 640;
|
|
readonly height: 360;
|
|
readonly doesResize: true;
|
|
readonly isAspectRatioLocked: true;
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
} | {
|
|
readonly type: "youtube";
|
|
readonly title: "YouTube";
|
|
readonly hostnames: readonly ["*.youtube.com", "youtube.com", "youtu.be"];
|
|
readonly width: 800;
|
|
readonly height: 450;
|
|
readonly doesResize: true;
|
|
readonly overridePermissions: {
|
|
readonly 'allow-presentation': true;
|
|
};
|
|
readonly isAspectRatioLocked: true;
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
};
|
|
embedUrl: string;
|
|
url: string;
|
|
} | undefined;
|
|
|
|
// @internal (undocumented)
|
|
export const MAX_ASSET_HEIGHT = 1000;
|
|
|
|
// @internal (undocumented)
|
|
export const MAX_ASSET_WIDTH = 1000;
|
|
|
|
// @internal (undocumented)
|
|
export const MAX_PAGES = 40;
|
|
|
|
// @internal (undocumented)
|
|
export const MAX_SHAPES_PER_PAGE = 2000;
|
|
|
|
// @internal (undocumented)
|
|
export const MAX_ZOOM = 8;
|
|
|
|
// @internal (undocumented)
|
|
export const MIN_ARROW_LENGTH = 48;
|
|
|
|
// @internal (undocumented)
|
|
export const MIN_ZOOM = 0.1;
|
|
|
|
// @internal (undocumented)
|
|
export const MINOR_NUDGE_FACTOR = 1;
|
|
|
|
// @internal (undocumented)
|
|
export const MULTI_CLICK_DURATION = 200;
|
|
|
|
// @public (undocumented)
|
|
export function normalizeWheel(event: React.WheelEvent<HTMLElement> | WheelEvent): {
|
|
x: number;
|
|
y: number;
|
|
z: number;
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
|
|
// (undocumented)
|
|
canEdit: () => boolean;
|
|
// (undocumented)
|
|
defaultProps(): TLNoteShape['props'];
|
|
// (undocumented)
|
|
getBounds(shape: TLNoteShape): Box2d;
|
|
// (undocumented)
|
|
getCenter(_shape: TLNoteShape): Vec2d;
|
|
// (undocumented)
|
|
getHeight(shape: TLNoteShape): number;
|
|
// (undocumented)
|
|
getOutline(shape: TLNoteShape): Vec2d[];
|
|
// (undocumented)
|
|
hideResizeHandles: () => boolean;
|
|
// (undocumented)
|
|
hideSelectionBoundsBg: () => boolean;
|
|
// (undocumented)
|
|
hideSelectionBoundsFg: () => boolean;
|
|
// (undocumented)
|
|
indicator(shape: TLNoteShape): JSX.Element;
|
|
// (undocumented)
|
|
onBeforeCreate: (next: TLNoteShape) => {
|
|
props: {
|
|
growY: number;
|
|
color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow";
|
|
size: "l" | "m" | "s" | "xl";
|
|
font: "draw" | "mono" | "sans" | "serif";
|
|
align: "end" | "middle" | "start";
|
|
verticalAlign: "end" | "middle" | "start";
|
|
url: string;
|
|
text: string;
|
|
};
|
|
type: "note";
|
|
x: number;
|
|
y: number;
|
|
rotation: number;
|
|
index: string;
|
|
parentId: TLParentId;
|
|
isLocked: boolean;
|
|
opacity: number;
|
|
id: TLShapeId;
|
|
typeName: "shape";
|
|
} | undefined;
|
|
// (undocumented)
|
|
onBeforeUpdate: (prev: TLNoteShape, next: TLNoteShape) => {
|
|
props: {
|
|
growY: number;
|
|
color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow";
|
|
size: "l" | "m" | "s" | "xl";
|
|
font: "draw" | "mono" | "sans" | "serif";
|
|
align: "end" | "middle" | "start";
|
|
verticalAlign: "end" | "middle" | "start";
|
|
url: string;
|
|
text: string;
|
|
};
|
|
type: "note";
|
|
x: number;
|
|
y: number;
|
|
rotation: number;
|
|
index: string;
|
|
parentId: TLParentId;
|
|
isLocked: boolean;
|
|
opacity: number;
|
|
id: TLShapeId;
|
|
typeName: "shape";
|
|
} | undefined;
|
|
// (undocumented)
|
|
onEditEnd: TLOnEditEndHandler<TLNoteShape>;
|
|
// (undocumented)
|
|
render(shape: TLNoteShape): JSX.Element;
|
|
// (undocumented)
|
|
toSvg(shape: TLNoteShape, font: string, colors: TLExportColors): SVGGElement;
|
|
// (undocumented)
|
|
static type: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function openWindow(url: string, target?: string): void;
|
|
|
|
// @internal (undocumented)
|
|
export function OptionalErrorBoundary({ children, fallback, ...props }: Omit<TLErrorBoundaryProps, 'fallback'> & {
|
|
fallback: ((error: unknown) => React_3.ReactNode) | null;
|
|
}): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export class PlopManager {
|
|
constructor(editor: Editor);
|
|
createAssetFromFile(_editor: Editor, file: File): Promise<TLAsset>;
|
|
createAssetFromUrl(_editor: Editor, url: string): Promise<TLAsset>;
|
|
// (undocumented)
|
|
createShapesForAssets(editor: Editor, assets: TLAsset[], position: VecLike): Promise<void>;
|
|
// (undocumented)
|
|
editor: Editor;
|
|
// (undocumented)
|
|
handleContent: (info: TLExternalContent) => Promise<void>;
|
|
handleEmbed(editor: Editor, { point, url, embed }: Extract<TLExternalContent, {
|
|
type: 'embed';
|
|
}>): Promise<void>;
|
|
handleFiles(editor: Editor, { point, files }: Extract<TLExternalContent, {
|
|
type: 'files';
|
|
}>): Promise<void>;
|
|
handleSvgText(editor: Editor, { point, text }: Extract<TLExternalContent, {
|
|
type: 'svg-text';
|
|
}>): Promise<void>;
|
|
handleText(editor: Editor, { point, text }: Extract<TLExternalContent, {
|
|
type: 'text';
|
|
}>): Promise<void>;
|
|
handleUrl: (editor: Editor, { point, url }: Extract<TLExternalContent, {
|
|
type: 'url';
|
|
}>) => Promise<void>;
|
|
}
|
|
|
|
// @public
|
|
export function preventDefault(event: Event | React_2.BaseSyntheticEvent): void;
|
|
|
|
// @public (undocumented)
|
|
export function refreshPage(): void;
|
|
|
|
// @public (undocumented)
|
|
export function releasePointerCapture(element: Element, event: PointerEvent | React_2.PointerEvent<Element>): void;
|
|
|
|
// @internal (undocumented)
|
|
export const REMOVE_SYMBOL: unique symbol;
|
|
|
|
// @public (undocumented)
|
|
export type RequiredKeys<T, K extends keyof T> = Pick<T, K> & Partial<T>;
|
|
|
|
// @internal (undocumented)
|
|
export const RICH_TYPES: Record<string, boolean>;
|
|
|
|
// @public (undocumented)
|
|
export function rotateBoxShadow(rotation: number, shadows: {
|
|
offsetX: number;
|
|
offsetY: number;
|
|
blur: number;
|
|
spread: number;
|
|
color: string;
|
|
}[]): string;
|
|
|
|
// @public (undocumented)
|
|
export const ROTATING_SHADOWS: {
|
|
offsetX: number;
|
|
offsetY: number;
|
|
blur: number;
|
|
spread: number;
|
|
color: string;
|
|
}[];
|
|
|
|
// @public (undocumented)
|
|
export const runtime: {
|
|
openWindow: (url: string, target: string) => void;
|
|
refreshPage: () => void;
|
|
hardReset: () => void;
|
|
};
|
|
|
|
// @internal (undocumented)
|
|
export function setDefaultEditorAssetUrls(assetUrls: TLEditorAssetUrls): void;
|
|
|
|
// @public (undocumented)
|
|
export function setPointerCapture(element: Element, event: PointerEvent | React_2.PointerEvent<Element>): void;
|
|
|
|
// @public (undocumented)
|
|
export function setPropsForNextShape(previousProps: TLInstancePropsForNextShape, newProps: Partial<TLShapeProps>): TLInstancePropsForNextShape;
|
|
|
|
// @public (undocumented)
|
|
export function setRuntimeOverrides(input: Partial<typeof runtime>): void;
|
|
|
|
// @public (undocumented)
|
|
export function setUserPreferences(user: TLUserPreferences): void;
|
|
|
|
// @public (undocumented)
|
|
export abstract class ShapeUtil<T extends TLUnknownShape = TLUnknownShape> {
|
|
constructor(editor: Editor, type: T['type']);
|
|
bounds(shape: T): Box2d;
|
|
canBind: <K>(_shape: T, _otherShape?: K | undefined) => boolean;
|
|
canCrop: TLShapeUtilFlag<T>;
|
|
canDropShapes(shape: T, shapes: TLShape[]): boolean;
|
|
canEdit: TLShapeUtilFlag<T>;
|
|
canReceiveNewChildrenOfType(shape: T, type: TLShape['type']): boolean;
|
|
canResize: TLShapeUtilFlag<T>;
|
|
canScroll: TLShapeUtilFlag<T>;
|
|
canUnmount: TLShapeUtilFlag<T>;
|
|
center(shape: T): Vec2dModel;
|
|
abstract defaultProps(): T['props'];
|
|
// (undocumented)
|
|
editor: Editor;
|
|
// @internal (undocumented)
|
|
expandSelectionOutlinePx(shape: T): number;
|
|
protected abstract getBounds(shape: T): Box2d;
|
|
abstract getCenter(shape: T): Vec2dModel;
|
|
getEditingBounds: (shape: T) => Box2d;
|
|
protected getHandles?(shape: T): TLHandle[];
|
|
protected abstract getOutline(shape: T): Vec2dModel[];
|
|
handles(shape: T): TLHandle[];
|
|
hideResizeHandles: TLShapeUtilFlag<T>;
|
|
hideRotateHandle: TLShapeUtilFlag<T>;
|
|
hideSelectionBoundsBg: TLShapeUtilFlag<T>;
|
|
hideSelectionBoundsFg: TLShapeUtilFlag<T>;
|
|
hitTestLineSegment(shape: T, A: VecLike, B: VecLike): boolean;
|
|
hitTestPoint(shape: T, point: VecLike): boolean;
|
|
abstract indicator(shape: T): any;
|
|
isAspectRatioLocked: TLShapeUtilFlag<T>;
|
|
isClosed: TLShapeUtilFlag<T>;
|
|
onBeforeCreate?: TLOnBeforeCreateHandler<T>;
|
|
onBeforeUpdate?: TLOnBeforeUpdateHandler<T>;
|
|
// @internal
|
|
onBindingChange?: TLOnBindingChangeHandler<T>;
|
|
onChildrenChange?: TLOnChildrenChangeHandler<T>;
|
|
onClick?: TLOnClickHandler<T>;
|
|
onDoubleClick?: TLOnDoubleClickHandler<T>;
|
|
onDoubleClickEdge?: TLOnDoubleClickHandler<T>;
|
|
onDoubleClickHandle?: TLOnDoubleClickHandleHandler<T>;
|
|
onDragShapesOut?: TLOnDragHandler<T>;
|
|
onDragShapesOver?: TLOnDragHandler<T, {
|
|
shouldHint: boolean;
|
|
}>;
|
|
onDropShapesOver?: TLOnDragHandler<T>;
|
|
onEditEnd?: TLOnEditEndHandler<T>;
|
|
onHandleChange?: TLOnHandleChangeHandler<T>;
|
|
onResize?: TLOnResizeHandler<T>;
|
|
onResizeEnd?: TLOnResizeEndHandler<T>;
|
|
onResizeStart?: TLOnResizeStartHandler<T>;
|
|
onRotate?: TLOnRotateHandler<T>;
|
|
onRotateEnd?: TLOnRotateEndHandler<T>;
|
|
onRotateStart?: TLOnRotateStartHandler<T>;
|
|
onTranslate?: TLOnTranslateHandler<T>;
|
|
onTranslateEnd?: TLOnTranslateEndHandler<T>;
|
|
onTranslateStart?: TLOnTranslateStartHandler<T>;
|
|
outline(shape: T): Vec2dModel[];
|
|
point(shape: T): Vec2dModel;
|
|
// @internal
|
|
providesBackgroundForChildren(shape: T): boolean;
|
|
abstract render(shape: T): any;
|
|
// @internal
|
|
renderBackground?(shape: T): any;
|
|
snapPoints(shape: T): Vec2d[];
|
|
toBackgroundSvg?(shape: T, font: string | undefined, colors: TLExportColors): null | Promise<SVGElement> | SVGElement;
|
|
toSvg?(shape: T, font: string | undefined, colors: TLExportColors): Promise<SVGElement> | SVGElement;
|
|
transform(shape: T): Matrix2d;
|
|
// (undocumented)
|
|
readonly type: T['type'];
|
|
static type: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function snapToGrid(n: number, gridSize: number): number;
|
|
|
|
// @public (undocumented)
|
|
export abstract class StateNode implements Partial<TLEventHandlers> {
|
|
constructor(editor: Editor, parent?: StateNode);
|
|
// (undocumented)
|
|
static children?: () => TLStateNodeConstructor[];
|
|
// (undocumented)
|
|
children?: Record<string, StateNode>;
|
|
// (undocumented)
|
|
current: Atom<StateNode | undefined>;
|
|
// (undocumented)
|
|
editor: Editor;
|
|
// (undocumented)
|
|
enter(info: any, from: string): void;
|
|
// (undocumented)
|
|
exit(info: any, from: string): void;
|
|
// (undocumented)
|
|
handleEvent(info: Exclude<TLEventInfo, TLPinchEventInfo>): void;
|
|
// (undocumented)
|
|
static id: string;
|
|
// (undocumented)
|
|
id: string;
|
|
// (undocumented)
|
|
static initial?: string;
|
|
// (undocumented)
|
|
initial?: string;
|
|
// (undocumented)
|
|
isActive: boolean;
|
|
// (undocumented)
|
|
onCancel?: TLEventHandlers['onCancel'];
|
|
// (undocumented)
|
|
onComplete?: TLEventHandlers['onComplete'];
|
|
// (undocumented)
|
|
onDoubleClick?: TLEventHandlers['onDoubleClick'];
|
|
// (undocumented)
|
|
onEnter?: TLEnterEventHandler;
|
|
// (undocumented)
|
|
onExit?: TLExitEventHandler;
|
|
// (undocumented)
|
|
onInterrupt?: TLEventHandlers['onInterrupt'];
|
|
// (undocumented)
|
|
onKeyDown?: TLEventHandlers['onKeyDown'];
|
|
// (undocumented)
|
|
onKeyRepeat?: TLEventHandlers['onKeyRepeat'];
|
|
// (undocumented)
|
|
onKeyUp?: TLEventHandlers['onKeyUp'];
|
|
// (undocumented)
|
|
onMiddleClick?: TLEventHandlers['onMiddleClick'];
|
|
// (undocumented)
|
|
onPointerDown?: TLEventHandlers['onPointerDown'];
|
|
// (undocumented)
|
|
onPointerEnter?: TLEventHandlers['onPointerEnter'];
|
|
// (undocumented)
|
|
onPointerLeave?: TLEventHandlers['onPointerLeave'];
|
|
// (undocumented)
|
|
onPointerMove?: TLEventHandlers['onPointerMove'];
|
|
// (undocumented)
|
|
onPointerUp?: TLEventHandlers['onPointerUp'];
|
|
// (undocumented)
|
|
onQuadrupleClick?: TLEventHandlers['onQuadrupleClick'];
|
|
// (undocumented)
|
|
onRightClick?: TLEventHandlers['onRightClick'];
|
|
// (undocumented)
|
|
onTripleClick?: TLEventHandlers['onTripleClick'];
|
|
// (undocumented)
|
|
onWheel?: TLEventHandlers['onWheel'];
|
|
// (undocumented)
|
|
parent: StateNode;
|
|
// (undocumented)
|
|
path: Computed<string>;
|
|
// (undocumented)
|
|
shapeType?: string;
|
|
// (undocumented)
|
|
readonly styles: TLStyleType[];
|
|
// (undocumented)
|
|
transition(id: string, info: any): this;
|
|
// (undocumented)
|
|
type: TLStateNodeType;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export const STYLES: TLStyleCollections;
|
|
|
|
// @internal (undocumented)
|
|
export const SVG_PADDING = 32;
|
|
|
|
// @public (undocumented)
|
|
export function SVGContainer({ children, className, ...rest }: SVGContainerProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export type SVGContainerProps = React_3.HTMLAttributes<SVGElement>;
|
|
|
|
// @public
|
|
export const TAB_ID: string;
|
|
|
|
// @public (undocumented)
|
|
export const TEXT_PROPS: {
|
|
lineHeight: number;
|
|
fontWeight: string;
|
|
fontVariant: string;
|
|
fontStyle: string;
|
|
padding: string;
|
|
maxWidth: string;
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export class TextShapeUtil extends ShapeUtil<TLTextShape> {
|
|
// (undocumented)
|
|
canEdit: () => boolean;
|
|
// (undocumented)
|
|
defaultProps(): TLTextShape['props'];
|
|
// (undocumented)
|
|
getBounds(shape: TLTextShape): Box2d;
|
|
// (undocumented)
|
|
getCenter(shape: TLTextShape): Vec2d;
|
|
// (undocumented)
|
|
getMinDimensions(shape: TLTextShape): {
|
|
height: number;
|
|
width: number;
|
|
};
|
|
// (undocumented)
|
|
getOutline(shape: TLTextShape): Vec2d[];
|
|
// (undocumented)
|
|
indicator(shape: TLTextShape): JSX.Element;
|
|
// (undocumented)
|
|
isAspectRatioLocked: TLShapeUtilFlag<TLTextShape>;
|
|
// (undocumented)
|
|
onBeforeCreate: (shape: TLTextShape) => {
|
|
x: number;
|
|
y: number;
|
|
type: "text";
|
|
rotation: number;
|
|
index: string;
|
|
parentId: TLParentId;
|
|
isLocked: boolean;
|
|
opacity: number;
|
|
props: TLTextShapeProps;
|
|
id: TLShapeId;
|
|
typeName: "shape";
|
|
} | undefined;
|
|
// (undocumented)
|
|
onBeforeUpdate: (prev: TLTextShape, next: TLTextShape) => {
|
|
x: number;
|
|
y: number;
|
|
props: {
|
|
w: number;
|
|
color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow";
|
|
size: "l" | "m" | "s" | "xl";
|
|
font: "draw" | "mono" | "sans" | "serif";
|
|
align: "end" | "middle" | "start";
|
|
text: string;
|
|
scale: number;
|
|
autoSize: boolean;
|
|
};
|
|
type: "text";
|
|
rotation: number;
|
|
index: string;
|
|
parentId: TLParentId;
|
|
isLocked: boolean;
|
|
opacity: number;
|
|
id: TLShapeId;
|
|
typeName: "shape";
|
|
} | undefined;
|
|
// (undocumented)
|
|
onDoubleClickEdge: (shape: TLTextShape) => {
|
|
id: TLShapeId;
|
|
type: "text";
|
|
props: {
|
|
autoSize: boolean;
|
|
scale?: undefined;
|
|
};
|
|
} | {
|
|
id: TLShapeId;
|
|
type: "text";
|
|
props: {
|
|
scale: number;
|
|
autoSize?: undefined;
|
|
};
|
|
} | undefined;
|
|
// (undocumented)
|
|
onEditEnd: TLOnEditEndHandler<TLTextShape>;
|
|
// (undocumented)
|
|
onResize: TLOnResizeHandler<TLTextShape>;
|
|
// (undocumented)
|
|
render(shape: TLTextShape): JSX.Element;
|
|
// (undocumented)
|
|
toSvg(shape: TLTextShape, font: string | undefined, colors: TLExportColors): SVGGElement;
|
|
// (undocumented)
|
|
static type: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TLAnimationOptions = Partial<{
|
|
duration: number;
|
|
easing: typeof EASINGS.easeInOutCubic;
|
|
}>;
|
|
|
|
// @public (undocumented)
|
|
export type TLBaseBoxShape = TLBaseShape<string, {
|
|
w: number;
|
|
h: number;
|
|
}>;
|
|
|
|
// @public (undocumented)
|
|
export interface TLBaseEventInfo {
|
|
// (undocumented)
|
|
altKey: boolean;
|
|
// (undocumented)
|
|
ctrlKey: boolean;
|
|
// (undocumented)
|
|
shiftKey: boolean;
|
|
// (undocumented)
|
|
type: UiEventType;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TLCancelEvent = (info: TLCancelEventInfo) => void;
|
|
|
|
// @public (undocumented)
|
|
export type TLCancelEventInfo = {
|
|
type: 'misc';
|
|
name: 'cancel';
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export type TLClickEvent = (info: TLClickEventInfo) => void;
|
|
|
|
// @public (undocumented)
|
|
export type TLClickEventInfo = TLBaseEventInfo & {
|
|
type: 'click';
|
|
name: TLCLickEventName;
|
|
point: VecLike;
|
|
pointerId: number;
|
|
button: number;
|
|
phase: 'down' | 'settle' | 'up';
|
|
} & TLPointerEventTarget;
|
|
|
|
// @public (undocumented)
|
|
export type TLCLickEventName = 'double_click' | 'quadruple_click' | 'triple_click';
|
|
|
|
// @public (undocumented)
|
|
export type TLCommand<Name extends string = any, Data = any> = {
|
|
type: 'command';
|
|
id: string;
|
|
data: Data;
|
|
name: Name;
|
|
preservesRedoStack?: boolean;
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export type TLCommandHandler<Data> = {
|
|
do: (data: Data) => void;
|
|
undo: (data: Data) => void;
|
|
redo?: (data: Data) => void;
|
|
squash?: (prevData: Data, nextData: Data) => Data;
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export type TLCompleteEvent = (info: TLCompleteEventInfo) => void;
|
|
|
|
// @public (undocumented)
|
|
export type TLCompleteEventInfo = {
|
|
type: 'misc';
|
|
name: 'complete';
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export interface TLContent {
|
|
// (undocumented)
|
|
assets: TLAsset[];
|
|
// (undocumented)
|
|
rootShapeIds: TLShapeId[];
|
|
// (undocumented)
|
|
schema: SerializedSchema;
|
|
// (undocumented)
|
|
shapes: TLShape[];
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TLCopyType = 'jpeg' | 'json' | 'png' | 'svg';
|
|
|
|
// @public (undocumented)
|
|
export const TldrawEditor: React_2.NamedExoticComponent<TldrawEditorProps>;
|
|
|
|
// @public (undocumented)
|
|
export type TldrawEditorProps = {
|
|
children?: any;
|
|
shapes?: Record<string, TLShapeInfo>;
|
|
tools?: TLStateNodeConstructor[];
|
|
assetUrls?: TLEditorAssetUrls;
|
|
autoFocus?: boolean;
|
|
components?: Partial<TLEditorComponents>;
|
|
onMount?: (editor: Editor) => (() => void) | undefined | void;
|
|
} & ({
|
|
store: TLStore | TLStoreWithStatus;
|
|
} | {
|
|
store?: undefined;
|
|
initialData?: StoreSnapshot<TLRecord>;
|
|
persistenceKey?: string;
|
|
sessionId?: string;
|
|
defaultName?: string;
|
|
});
|
|
|
|
// @public (undocumented)
|
|
export type TLEditorAssetUrls = {
|
|
fonts: {
|
|
monospace: string;
|
|
serif: string;
|
|
sansSerif: string;
|
|
draw: string;
|
|
};
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export interface TLEditorComponents {
|
|
// (undocumented)
|
|
Background: null | TLBackgroundComponent;
|
|
// (undocumented)
|
|
Brush: null | TLBrushComponent;
|
|
// (undocumented)
|
|
CollaboratorBrush: null | TLBrushComponent;
|
|
// (undocumented)
|
|
CollaboratorCursor: null | TLCursorComponent;
|
|
// (undocumented)
|
|
CollaboratorHint: null | TLCollaboratorHintComponent;
|
|
// (undocumented)
|
|
CollaboratorScribble: null | TLScribbleComponent;
|
|
// (undocumented)
|
|
CollaboratorShapeIndicator: null | TLShapeIndicatorComponent;
|
|
// (undocumented)
|
|
Cursor: null | TLCursorComponent;
|
|
// (undocumented)
|
|
ErrorFallback: null | TLErrorFallbackComponent;
|
|
// (undocumented)
|
|
Grid: null | TLGridComponent;
|
|
// (undocumented)
|
|
Handle: null | TLHandleComponent;
|
|
// (undocumented)
|
|
Scribble: null | TLScribbleComponent;
|
|
// (undocumented)
|
|
ShapeErrorFallback: null | TLShapeErrorFallbackComponent;
|
|
// (undocumented)
|
|
ShapeIndicatorErrorFallback: null | TLShapeIndicatorErrorFallback;
|
|
// (undocumented)
|
|
SnapLine: null | TLSnapLineComponent;
|
|
// (undocumented)
|
|
Spinner: null | TLSpinnerComponent;
|
|
// (undocumented)
|
|
SvgDefs: null | TLSvgDefsComponent;
|
|
// (undocumented)
|
|
ZoomBrush: null | TLBrushComponent;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLEditorOptions {
|
|
getContainer: () => HTMLElement;
|
|
shapes?: Record<string, TLShapeInfo>;
|
|
store: TLStore;
|
|
tools?: TLStateNodeConstructor[];
|
|
user?: TLUser;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TLEmbedResult = {
|
|
definition: EmbedDefinition;
|
|
url: string;
|
|
embedUrl: string;
|
|
} | undefined;
|
|
|
|
// @public (undocumented)
|
|
export type TLEnterEventHandler = (info: any, from: string) => void;
|
|
|
|
// @public (undocumented)
|
|
export interface TLErrorBoundaryProps {
|
|
// (undocumented)
|
|
children: React_3.ReactNode;
|
|
// (undocumented)
|
|
fallback: (error: unknown) => React_3.ReactNode;
|
|
// (undocumented)
|
|
onError?: ((error: unknown) => void) | null;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLEventHandlers {
|
|
// (undocumented)
|
|
onCancel: TLCancelEvent;
|
|
// (undocumented)
|
|
onComplete: TLCompleteEvent;
|
|
// (undocumented)
|
|
onDoubleClick: TLClickEvent;
|
|
// (undocumented)
|
|
onInterrupt: TLInterruptEvent;
|
|
// (undocumented)
|
|
onKeyDown: TLKeyboardEvent;
|
|
// (undocumented)
|
|
onKeyRepeat: TLKeyboardEvent;
|
|
// (undocumented)
|
|
onKeyUp: TLKeyboardEvent;
|
|
// (undocumented)
|
|
onMiddleClick: TLPointerEvent;
|
|
// (undocumented)
|
|
onPointerDown: TLPointerEvent;
|
|
// (undocumented)
|
|
onPointerEnter: TLPointerEvent;
|
|
// (undocumented)
|
|
onPointerLeave: TLPointerEvent;
|
|
// (undocumented)
|
|
onPointerMove: TLPointerEvent;
|
|
// (undocumented)
|
|
onPointerUp: TLPointerEvent;
|
|
// (undocumented)
|
|
onQuadrupleClick: TLClickEvent;
|
|
// (undocumented)
|
|
onRightClick: TLPointerEvent;
|
|
// (undocumented)
|
|
onTripleClick: TLClickEvent;
|
|
// (undocumented)
|
|
onWheel: TLWheelEvent;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TLEventInfo = TLCancelEventInfo | TLClickEventInfo | TLCompleteEventInfo | TLInterruptEventInfo | TLKeyboardEventInfo | TLPinchEventInfo | TLPointerEventInfo | TLWheelEventInfo;
|
|
|
|
// @public (undocumented)
|
|
export interface TLEventMap {
|
|
// (undocumented)
|
|
'change-history': [{
|
|
reason: 'bail';
|
|
markId?: string;
|
|
} | {
|
|
reason: 'push' | 'redo' | 'undo';
|
|
}];
|
|
// (undocumented)
|
|
'mark-history': [{
|
|
id: string;
|
|
}];
|
|
// (undocumented)
|
|
'max-shapes': [{
|
|
name: string;
|
|
pageId: TLPageId;
|
|
count: number;
|
|
}];
|
|
// (undocumented)
|
|
'stop-camera-animation': [];
|
|
// (undocumented)
|
|
'stop-following': [];
|
|
// (undocumented)
|
|
change: [HistoryEntry<TLRecord>];
|
|
// (undocumented)
|
|
crash: [{
|
|
error: unknown;
|
|
}];
|
|
// (undocumented)
|
|
event: [TLEventInfo];
|
|
// (undocumented)
|
|
frame: [number];
|
|
// (undocumented)
|
|
mount: [];
|
|
// (undocumented)
|
|
tick: [number];
|
|
// (undocumented)
|
|
update: [];
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TLEventMapHandler<T extends keyof TLEventMap> = (...args: TLEventMap[T]) => void;
|
|
|
|
// @public (undocumented)
|
|
export type TLEventName = 'cancel' | 'complete' | 'interrupt' | 'wheel' | TLCLickEventName | TLKeyboardEventName | TLPinchEventName | TLPointerEventName;
|
|
|
|
// @public (undocumented)
|
|
export type TLExitEventHandler = (info: any, to: string) => void;
|
|
|
|
// @public (undocumented)
|
|
export type TLExportType = 'jpeg' | 'json' | 'png' | 'svg' | 'webp';
|
|
|
|
// @public (undocumented)
|
|
export type TLExternalContent = {
|
|
type: 'embed';
|
|
url: string;
|
|
point?: VecLike;
|
|
embed: EmbedDefinition;
|
|
} | {
|
|
type: 'files';
|
|
files: File[];
|
|
point?: VecLike;
|
|
ignoreParent: boolean;
|
|
} | {
|
|
type: 'svg-text';
|
|
text: string;
|
|
point?: VecLike;
|
|
} | {
|
|
type: 'text';
|
|
point?: VecLike;
|
|
text: string;
|
|
} | {
|
|
type: 'url';
|
|
url: string;
|
|
point?: VecLike;
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export type TLHistoryEntry = TLCommand | TLHistoryMark;
|
|
|
|
// @public (undocumented)
|
|
export type TLHistoryMark = {
|
|
type: 'STOP';
|
|
id: string;
|
|
onUndo: boolean;
|
|
onRedo: boolean;
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export type TLInterruptEvent = (info: TLInterruptEventInfo) => void;
|
|
|
|
// @public (undocumented)
|
|
export type TLInterruptEventInfo = {
|
|
type: 'misc';
|
|
name: 'interrupt';
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export type TLKeyboardEvent = (info: TLKeyboardEventInfo) => void;
|
|
|
|
// @public (undocumented)
|
|
export type TLKeyboardEventInfo = TLBaseEventInfo & {
|
|
type: 'keyboard';
|
|
name: TLKeyboardEventName;
|
|
key: string;
|
|
code: string;
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export type TLKeyboardEventName = 'key_down' | 'key_repeat' | 'key_up';
|
|
|
|
// @public (undocumented)
|
|
export type TLOnBeforeCreateHandler<T extends TLShape> = (next: T) => T | void;
|
|
|
|
// @public (undocumented)
|
|
export type TLOnBeforeUpdateHandler<T extends TLShape> = (prev: T, next: T) => T | void;
|
|
|
|
// @internal (undocumented)
|
|
export type TLOnBindingChangeHandler<T extends TLShape> = (shape: T) => TLShapePartial<T> | void;
|
|
|
|
// @public (undocumented)
|
|
export type TLOnChildrenChangeHandler<T extends TLShape> = (shape: T) => TLShapePartial[] | void;
|
|
|
|
// @public (undocumented)
|
|
export type TLOnClickHandler<T extends TLShape> = (shape: T) => TLShapePartial<T> | void;
|
|
|
|
// @public (undocumented)
|
|
export type TLOnDoubleClickHandleHandler<T extends TLShape> = (shape: T, handle: TLHandle) => TLShapePartial<T> | void;
|
|
|
|
// @public (undocumented)
|
|
export type TLOnDoubleClickHandler<T extends TLShape> = (shape: T) => TLShapePartial<T> | void;
|
|
|
|
// @public (undocumented)
|
|
export type TLOnDragHandler<T extends TLShape, R = void> = (shape: T, shapes: TLShape[]) => R;
|
|
|
|
// @public (undocumented)
|
|
export type TLOnEditEndHandler<T extends TLShape> = (shape: T) => void;
|
|
|
|
// @public (undocumented)
|
|
export type TLOnHandleChangeHandler<T extends TLShape> = (shape: T, info: {
|
|
handle: TLHandle;
|
|
isPrecise: boolean;
|
|
}) => TLShapePartial<T> | void;
|
|
|
|
// @public (undocumented)
|
|
export type TLOnResizeEndHandler<T extends TLShape> = TLEventChangeHandler<T>;
|
|
|
|
// @public (undocumented)
|
|
export type TLOnResizeHandler<T extends TLShape> = (shape: T, info: TLResizeInfo<T>) => Partial<TLShapePartial<T>> | undefined | void;
|
|
|
|
// @public (undocumented)
|
|
export type TLOnResizeStartHandler<T extends TLShape> = TLEventStartHandler<T>;
|
|
|
|
// @public (undocumented)
|
|
export type TLOnRotateEndHandler<T extends TLShape> = TLEventChangeHandler<T>;
|
|
|
|
// @public (undocumented)
|
|
export type TLOnRotateHandler<T extends TLShape> = TLEventChangeHandler<T>;
|
|
|
|
// @public (undocumented)
|
|
export type TLOnRotateStartHandler<T extends TLShape> = TLEventStartHandler<T>;
|
|
|
|
// @public (undocumented)
|
|
export type TLOnTranslateEndHandler<T extends TLShape> = TLEventChangeHandler<T>;
|
|
|
|
// @public (undocumented)
|
|
export type TLOnTranslateHandler<T extends TLShape> = TLEventChangeHandler<T>;
|
|
|
|
// @public (undocumented)
|
|
export type TLOnTranslateStartHandler<T extends TLShape> = TLEventStartHandler<T>;
|
|
|
|
// @public (undocumented)
|
|
export type TLPinchEvent = (info: TLPinchEventInfo) => void;
|
|
|
|
// @public (undocumented)
|
|
export type TLPinchEventInfo = TLBaseEventInfo & {
|
|
type: 'pinch';
|
|
name: TLPinchEventName;
|
|
point: Vec2dModel;
|
|
delta: Vec2dModel;
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export type TLPinchEventName = 'pinch_end' | 'pinch_start' | 'pinch';
|
|
|
|
// @public (undocumented)
|
|
export type TLPointerEvent = (info: TLPointerEventInfo) => void;
|
|
|
|
// @public (undocumented)
|
|
export type TLPointerEventInfo = TLBaseEventInfo & {
|
|
type: 'pointer';
|
|
name: TLPointerEventName;
|
|
point: VecLike;
|
|
pointerId: number;
|
|
button: number;
|
|
isPen: boolean;
|
|
} & TLPointerEventTarget;
|
|
|
|
// @public (undocumented)
|
|
export type TLPointerEventName = 'middle_click' | 'pointer_down' | 'pointer_enter' | 'pointer_leave' | 'pointer_move' | 'pointer_up' | 'right_click';
|
|
|
|
// @public (undocumented)
|
|
export type TLPointerEventTarget = {
|
|
target: 'canvas';
|
|
shape?: undefined;
|
|
} | {
|
|
target: 'handle';
|
|
shape: TLShape;
|
|
handle: TLHandle;
|
|
} | {
|
|
target: 'selection';
|
|
handle?: TLSelectionHandle;
|
|
shape?: undefined;
|
|
} | {
|
|
target: 'shape';
|
|
shape: TLShape;
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export type TLResizeHandle = SelectionCorner | SelectionEdge;
|
|
|
|
// @public
|
|
export type TLResizeInfo<T extends TLShape> = {
|
|
newPoint: Vec2dModel;
|
|
handle: TLResizeHandle;
|
|
mode: TLResizeMode;
|
|
scaleX: number;
|
|
scaleY: number;
|
|
initialBounds: Box2d;
|
|
initialShape: T;
|
|
};
|
|
|
|
// @public
|
|
export type TLResizeMode = 'resize_bounds' | 'scale_shape';
|
|
|
|
// @public (undocumented)
|
|
export type TLSelectionHandle = RotateCorner | SelectionCorner | SelectionEdge;
|
|
|
|
// @public
|
|
export interface TLSessionStateSnapshot {
|
|
// (undocumented)
|
|
currentPageId: TLPageId;
|
|
// (undocumented)
|
|
exportBackground: boolean;
|
|
// (undocumented)
|
|
isDebugMode: boolean;
|
|
// (undocumented)
|
|
isFocusMode: boolean;
|
|
// (undocumented)
|
|
isGridMode: boolean;
|
|
// (undocumented)
|
|
isToolLocked: boolean;
|
|
// (undocumented)
|
|
pageStates: Array<{
|
|
pageId: TLPageId;
|
|
camera: {
|
|
x: number;
|
|
y: number;
|
|
z: number;
|
|
};
|
|
selectedIds: TLShapeId[];
|
|
focusLayerId: null | TLShapeId;
|
|
}>;
|
|
// (undocumented)
|
|
version: number;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLShapeUtilConstructor<T extends TLUnknownShape, U extends ShapeUtil<T> = ShapeUtil<T>> {
|
|
// (undocumented)
|
|
new (editor: Editor, type: T['type']): U;
|
|
// (undocumented)
|
|
type: T['type'];
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TLShapeUtilFlag<T> = (shape: T) => boolean;
|
|
|
|
// @public (undocumented)
|
|
export interface TLStateNodeConstructor {
|
|
// (undocumented)
|
|
new (editor: Editor, parent?: StateNode): StateNode;
|
|
// (undocumented)
|
|
children?: () => TLStateNodeConstructor[];
|
|
// (undocumented)
|
|
id: string;
|
|
// (undocumented)
|
|
initial?: string;
|
|
// (undocumented)
|
|
styles?: TLStyleType[];
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TLStoreWithStatus = {
|
|
readonly status: 'error';
|
|
readonly store?: undefined;
|
|
readonly error: Error;
|
|
} | {
|
|
readonly status: 'loading';
|
|
readonly store?: undefined;
|
|
readonly error?: undefined;
|
|
} | {
|
|
readonly status: 'not-synced';
|
|
readonly store: TLStore;
|
|
readonly error?: undefined;
|
|
} | {
|
|
readonly status: 'synced-local';
|
|
readonly store: TLStore;
|
|
readonly error?: undefined;
|
|
} | {
|
|
readonly status: 'synced-remote';
|
|
readonly connectionStatus: 'offline' | 'online';
|
|
readonly store: TLStore;
|
|
readonly error?: undefined;
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export type TLTickEvent = (elapsed: number) => void;
|
|
|
|
// @public
|
|
export interface TLUserPreferences {
|
|
// (undocumented)
|
|
animationSpeed: number;
|
|
// (undocumented)
|
|
color: string;
|
|
// (undocumented)
|
|
id: string;
|
|
// (undocumented)
|
|
isDarkMode: boolean;
|
|
// (undocumented)
|
|
isSnapMode: boolean;
|
|
// (undocumented)
|
|
locale: string;
|
|
// (undocumented)
|
|
name: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TLWheelEvent = (info: TLWheelEventInfo) => void;
|
|
|
|
// @public (undocumented)
|
|
export type TLWheelEventInfo = TLBaseEventInfo & {
|
|
type: 'wheel';
|
|
name: 'wheel';
|
|
delta: Vec2dModel;
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export const truncateStringWithEllipsis: (str: string, maxLength: number) => string;
|
|
|
|
// @public (undocumented)
|
|
export type UiEvent = TLCancelEvent | TLClickEvent | TLCompleteEvent | TLKeyboardEvent | TLPinchEvent | TLPointerEvent;
|
|
|
|
// @public (undocumented)
|
|
export type UiEventType = 'click' | 'keyboard' | 'pinch' | 'pointer' | 'wheel' | 'zoom';
|
|
|
|
// @public
|
|
export function uniqueId(): string;
|
|
|
|
// @public (undocumented)
|
|
export function useContainer(): HTMLDivElement;
|
|
|
|
// @public (undocumented)
|
|
export const useEditor: () => Editor;
|
|
|
|
// @internal (undocumented)
|
|
export function useLocalStore(opts?: {
|
|
persistenceKey?: string | undefined;
|
|
sessionId?: string | undefined;
|
|
} & TLStoreOptions): TLStoreWithStatus;
|
|
|
|
// @internal (undocumented)
|
|
export function usePeerIds(): string[];
|
|
|
|
// @public (undocumented)
|
|
export function usePrefersReducedMotion(): boolean;
|
|
|
|
// @internal (undocumented)
|
|
export function usePresence(userId: string): null | TLInstancePresence;
|
|
|
|
// @public (undocumented)
|
|
export function useQuickReactor(name: string, reactFn: () => void, deps?: any[]): void;
|
|
|
|
// @internal (undocumented)
|
|
export const USER_COLORS: readonly ["#FF802B", "#EC5E41", "#F2555A", "#F04F88", "#E34BA9", "#BD54C6", "#9D5BD2", "#7B66DC", "#02B1CC", "#11B3A3", "#39B178", "#55B467"];
|
|
|
|
// @public (undocumented)
|
|
export function useReactor(name: string, reactFn: () => void, deps?: any[] | undefined): void;
|
|
|
|
// @public (undocumented)
|
|
export function useTLStore(opts: TLStoreOptions): TLStore;
|
|
|
|
// @public (undocumented)
|
|
export class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {
|
|
// (undocumented)
|
|
canEdit: () => boolean;
|
|
// (undocumented)
|
|
defaultProps(): TLVideoShape['props'];
|
|
// (undocumented)
|
|
indicator(shape: TLVideoShape): JSX.Element;
|
|
// (undocumented)
|
|
isAspectRatioLocked: () => boolean;
|
|
// (undocumented)
|
|
render(shape: TLVideoShape): JSX.Element;
|
|
// (undocumented)
|
|
toSvg(shape: TLVideoShape): SVGGElement;
|
|
// (undocumented)
|
|
static type: string;
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export const WAY_TOO_BIG_ARROW_BEND_FACTOR = 10;
|
|
|
|
// @public (undocumented)
|
|
export class WeakMapCache<T extends object, K> {
|
|
// (undocumented)
|
|
access(item: T): K | undefined;
|
|
// (undocumented)
|
|
bust(): void;
|
|
// (undocumented)
|
|
get<P extends T>(item: P, cb: (item: P) => K): NonNullable<K>;
|
|
// (undocumented)
|
|
has(item: T): boolean;
|
|
// (undocumented)
|
|
invalidate(item: T): void;
|
|
// (undocumented)
|
|
items: WeakMap<T, K>;
|
|
// (undocumented)
|
|
set(item: T, value: K): void;
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export const ZOOMS: number[];
|
|
|
|
|
|
export * from "@tldraw/indices";
|
|
export * from "@tldraw/tlschema";
|
|
|
|
// (No @packageDocumentation comment for this package)
|
|
|
|
```
|