tldraw
Version:
A tiny little drawing editor.
1,378 lines (1,236 loc) • 115 kB
TypeScript
/// <reference types="react" />
import { Atom } from '@tldraw/editor';
import { BaseBoxShapeTool } from '@tldraw/editor';
import { BaseBoxShapeUtil } from '@tldraw/editor';
import { BindingOnChangeOptions } from '@tldraw/editor';
import { BindingOnCreateOptions } from '@tldraw/editor';
import { BindingOnShapeChangeOptions } from '@tldraw/editor';
import { BindingOnShapeIsolateOptions } from '@tldraw/editor';
import { BindingUtil } from '@tldraw/editor';
import { Box } from '@tldraw/editor';
import { Circle2d } from '@tldraw/editor';
import { ComponentType } from 'react';
import { CubicSpline2d } from '@tldraw/editor';
import { Editor } from '@tldraw/editor';
import { Geometry2d } from '@tldraw/editor';
import { Group2d } from '@tldraw/editor';
import { HandleSnapGeometry } from '@tldraw/editor';
import { IndexKey } from '@tldraw/editor';
import { JsonObject } from '@tldraw/editor';
import { JSX as JSX_2 } from 'react/jsx-runtime';
import { LANGUAGES } from '@tldraw/editor';
import { MigrationFailureReason } from '@tldraw/editor';
import { MigrationSequence } from '@tldraw/editor';
import { NamedExoticComponent } from 'react';
import { Polygon2d } from '@tldraw/editor';
import { Polyline2d } from '@tldraw/editor';
import * as React_2 from 'react';
import { default as React_3 } from 'react';
import { ReactElement } from 'react';
import { ReactNode } from 'react';
import { ReadonlySharedStyleMap } from '@tldraw/editor';
import { RecordProps } from '@tldraw/editor';
import { Rectangle2d } from '@tldraw/editor';
import { RecursivePartial } from '@tldraw/editor';
import { Result } from '@tldraw/editor';
import { SerializedSchema } from '@tldraw/editor';
import { ShapeUtil } from '@tldraw/editor';
import { SharedStyle } from '@tldraw/editor';
import { StateNode } from '@tldraw/editor';
import { StyleProp } from '@tldraw/editor';
import { SvgExportContext } from '@tldraw/editor';
import { TLAnyBindingUtilConstructor } from '@tldraw/editor';
import { TLAnyShapeUtilConstructor } from '@tldraw/editor';
import { TLArrowBinding } from '@tldraw/editor';
import { TLArrowBindingProps } from '@tldraw/editor';
import { TLArrowShape } from '@tldraw/editor';
import { TLArrowShapeArrowheadStyle } from '@tldraw/editor';
import { TLArrowShapeProps } from '@tldraw/editor';
import { TLAsset } from '@tldraw/editor';
import { TLAssetId } from '@tldraw/editor';
import { TLBookmarkShape } from '@tldraw/editor';
import { TLBookmarkShapeProps } from '@tldraw/editor';
import { TLClickEventInfo } from '@tldraw/editor';
import { TLDefaultColorTheme } from '@tldraw/editor';
import { TLDefaultColorThemeColor } from '@tldraw/editor';
import { TLDefaultFillStyle } from '@tldraw/editor';
import { TLDefaultFontStyle } from '@tldraw/editor';
import { TLDefaultHorizontalAlignStyle } from '@tldraw/editor';
import { TLDefaultSizeStyle } from '@tldraw/editor';
import { TLDefaultVerticalAlignStyle } from '@tldraw/editor';
import { TldrawEditorBaseProps } from '@tldraw/editor';
import { TldrawEditorStoreProps } from '@tldraw/editor';
import { TLDrawShape } from '@tldraw/editor';
import { TLDrawShapeProps } from '@tldraw/editor';
import { TLDrawShapeSegment } from '@tldraw/editor';
import { TLEditorComponents } from '@tldraw/editor';
import { TLEditorSnapshot } from '@tldraw/editor';
import { TLEmbedShape } from '@tldraw/editor';
import { TLEmbedShapeProps } from '@tldraw/editor';
import { TLFrameShape } from '@tldraw/editor';
import { TLFrameShapeProps } from '@tldraw/editor';
import { TLGeoShape } from '@tldraw/editor';
import { TLGeoShapeProps } from '@tldraw/editor';
import { TLHandle } from '@tldraw/editor';
import { TLHandleDragInfo } from '@tldraw/editor';
import { TLHandlesProps } from '@tldraw/editor';
import { TLHighlightShape } from '@tldraw/editor';
import { TLHighlightShapeProps } from '@tldraw/editor';
import { TLImageAsset } from '@tldraw/editor';
import { TLImageExportOptions } from '@tldraw/editor';
import { TLImageShape } from '@tldraw/editor';
import { TLImageShapeProps } from '@tldraw/editor';
import { TLKeyboardEventInfo } from '@tldraw/editor';
import { TLLineShape } from '@tldraw/editor';
import { TLLineShapePoint } from '@tldraw/editor';
import { TLNoteShape } from '@tldraw/editor';
import { TLNoteShapeProps } from '@tldraw/editor';
import { TLPageId } from '@tldraw/editor';
import { TLParentId } from '@tldraw/editor';
import { TLPointerEventInfo } from '@tldraw/editor';
import { TLPropsMigrations } from '@tldraw/editor';
import { TLResizeInfo } from '@tldraw/editor';
import { TLSchema } from '@tldraw/editor';
import { TLScribbleProps } from '@tldraw/editor';
import { TLSelectionBackgroundProps } from '@tldraw/editor';
import { TLSelectionForegroundProps } from '@tldraw/editor';
import { TLShape } from '@tldraw/editor';
import { TLShapeId } from '@tldraw/editor';
import { TLShapePartial } from '@tldraw/editor';
import { TLShapeUtilCanBindOpts } from '@tldraw/editor';
import { TLShapeUtilCanvasSvgDef } from '@tldraw/editor';
import { TLStateNodeConstructor } from '@tldraw/editor';
import { TLStore } from '@tldraw/editor';
import { TLStoreSnapshot } from '@tldraw/editor';
import { TLTextShape } from '@tldraw/editor';
import { TLVideoAsset } from '@tldraw/editor';
import { TLVideoShape } from '@tldraw/editor';
import { UnknownRecord } from '@tldraw/editor';
import { Vec } from '@tldraw/editor';
import { VecLike } from '@tldraw/editor';
import { VecModel } from '@tldraw/editor';
/** @public */
export declare interface ActionsProviderProps {
overrides?(editor: Editor, actions: TLUiActionsContextType, helpers: TLUiOverrideHelpers): TLUiActionsContextType;
children: React_2.ReactNode;
}
/** @public */
export declare type AlertSeverity = 'error' | 'info' | 'success' | 'warning';
/** @public @react */
export declare function AlignMenuItems(): JSX_2.Element;
/** @public @react */
export declare function ArrangeMenuSubmenu(): JSX_2.Element | null;
/** @public */
export declare const ARROW_LABEL_FONT_SIZES: Record<TLDefaultSizeStyle, number>;
/**
* @public
*/
export declare class ArrowBindingUtil extends BindingUtil<TLArrowBinding> {
static type: string;
static props: RecordProps<TLArrowBinding>;
static migrations: TLPropsMigrations;
getDefaultProps(): Partial<TLArrowBindingProps>;
onAfterCreate({ binding }: BindingOnCreateOptions<TLArrowBinding>): void;
onAfterChange({ bindingAfter }: BindingOnChangeOptions<TLArrowBinding>): void;
onAfterChangeFromShape({ shapeAfter, }: BindingOnShapeChangeOptions<TLArrowBinding>): void;
onAfterChangeToShape({ binding }: BindingOnShapeChangeOptions<TLArrowBinding>): void;
onBeforeIsolateFromShape({ binding, }: BindingOnShapeIsolateOptions<TLArrowBinding>): void;
}
/** @public @react */
export declare function ArrowDownToolbarItem(): JSX_2.Element;
/** @public @react */
export declare function ArrowheadStylePickerSet({ styles }: StylePickerSetProps): JSX_2.Element | null;
/** @public @react */
export declare function ArrowLeftToolbarItem(): JSX_2.Element;
/** @public @react */
export declare function ArrowRightToolbarItem(): JSX_2.Element;
/** @public */
export declare class ArrowShapeTool extends StateNode {
static id: string;
static initial: string;
static children(): TLStateNodeConstructor[];
shapeType: string;
}
/** @public */
export declare class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
static type: "arrow";
static props: RecordProps<TLArrowShape>;
static migrations: MigrationSequence;
canEdit(): boolean;
canBind({ toShapeType }: TLShapeUtilCanBindOpts<TLArrowShape>): boolean;
canSnap(): boolean;
hideResizeHandles(): boolean;
hideRotateHandle(): boolean;
hideSelectionBoundsBg(): boolean;
hideSelectionBoundsFg(): boolean;
canBeLaidOut(shape: TLArrowShape): boolean;
getDefaultProps(): TLArrowShape['props'];
getGeometry(shape: TLArrowShape): Group2d;
getHandles(shape: TLArrowShape): TLHandle[];
getText(shape: TLArrowShape): string;
onHandleDrag(shape: TLArrowShape, { handle, isPrecise }: TLHandleDragInfo<TLArrowShape>): {
id: TLShapeId;
meta?: Partial<JsonObject> | undefined;
props?: Partial<TLArrowShapeProps> | undefined;
type: "arrow";
} & Partial<Omit<TLArrowShape, "id" | "meta" | "props" | "type">>;
onTranslateStart(shape: TLArrowShape): void;
onTranslate(initialShape: TLArrowShape, shape: TLArrowShape): void;
private readonly _resizeInitialBindings;
onResize(shape: TLArrowShape, info: TLResizeInfo<TLArrowShape>): {
props: {
bend: number;
end: VecModel;
start: VecModel;
};
};
onDoubleClickHandle(shape: TLArrowShape, handle: TLHandle): TLShapePartial<TLArrowShape> | void;
component(shape: TLArrowShape): JSX_2.Element | null;
indicator(shape: TLArrowShape): JSX_2.Element | null;
onEditEnd(shape: TLArrowShape): void;
toSvg(shape: TLArrowShape, ctx: SvgExportContext): JSX_2.Element;
getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[];
getInterpolatedProps(startShape: TLArrowShape, endShape: TLArrowShape, progress: number): TLArrowShapeProps;
}
/** @public @react */
export declare function ArrowToolbarItem(): JSX_2.Element;
/** @public @react */
export declare function ArrowUpToolbarItem(): JSX_2.Element;
/** @public @react */
export declare function AssetToolbarItem(): JSX_2.Element;
/* Excluded from this release type: AssetUrlsProvider */
/** @public */
export declare class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape> {
static type: "bookmark";
static props: RecordProps<TLBookmarkShape>;
static migrations: TLPropsMigrations;
canResize(): boolean;
hideSelectionBoundsFg(): boolean;
getText(shape: TLBookmarkShape): string;
getDefaultProps(): TLBookmarkShape['props'];
component(shape: TLBookmarkShape): JSX_2.Element;
indicator(shape: TLBookmarkShape): JSX_2.Element;
onBeforeCreate(next: TLBookmarkShape): {
id: TLShapeId;
index: IndexKey;
isLocked: boolean;
meta: JsonObject;
opacity: number;
parentId: TLParentId;
props: {
assetId: null | TLAssetId;
h: number;
url: string;
w: number;
};
rotation: number;
type: "bookmark";
typeName: "shape";
x: number;
y: number;
};
onBeforeUpdate(prev: TLBookmarkShape, shape: TLBookmarkShape): {
id: TLShapeId;
index: IndexKey;
isLocked: boolean;
meta: JsonObject;
opacity: number;
parentId: TLParentId;
props: {
assetId: null | TLAssetId;
h: number;
url: string;
w: number;
};
rotation: number;
type: "bookmark";
typeName: "shape";
x: number;
y: number;
} | undefined;
getInterpolatedProps(startShape: TLBookmarkShape, endShape: TLBookmarkShape, t: number): TLBookmarkShapeProps;
}
/** @public */
export declare interface BoxWidthHeight {
w: number;
h: number;
}
/** @public @react */
export declare function BreakPointProvider({ forceMobile, children }: BreakPointProviderProps): JSX_2.Element;
/** @public */
export declare interface BreakPointProviderProps {
forceMobile?: boolean;
children: ReactNode;
}
/* Excluded from this release type: buildFromV1Document */
/** @public @react */
export declare function CenteredTopPanelContainer({ maxWidth, ignoreRightWidth, stylePanelWidth, marginBetweenZones, squeezeAmount, children, }: CenteredTopPanelContainerProps): JSX_2.Element;
/** @public */
export declare interface CenteredTopPanelContainerProps {
children: ReactNode;
maxWidth?: number;
ignoreRightWidth?: number;
stylePanelWidth?: number;
marginBetweenZones?: number;
squeezeAmount?: number;
}
/**
* Repositions selected shapes do that the center of the group is
* at the provided position
*
* @param editor - The editor instance
*
* @param position - the point to center the shapes around
*
* @public
*/
export declare function centerSelectionAroundPoint(editor: Editor, position: VecLike): void;
/** @public @react */
export declare function CheckBoxToolbarItem(): JSX_2.Element;
/** @public @react */
export declare function ClipboardMenuGroup(): JSX_2.Element;
/** @public @react */
export declare function CloudToolbarItem(): JSX_2.Element;
/** @public @react */
export declare function ColorSchemeMenu(): JSX_2.Element;
/** @public @react */
export declare function CommonStylePickerSet({ styles, theme }: ThemeStylePickerSetProps): JSX_2.Element;
/**
* Contains the size within the given box size
*
* @param originalSize - The size of the asset
* @param containBoxSize - The container size
* @returns Adjusted size
* @public
*/
export declare function containBoxSize(originalSize: BoxWidthHeight, containBoxSize: BoxWidthHeight): BoxWidthHeight;
/** @public @react */
export declare function ConversionsMenuGroup(): JSX_2.Element | null;
/** @public @react */
export declare function ConvertToBookmarkMenuItem(): JSX_2.Element | null;
/** @public @react */
export declare function ConvertToEmbedMenuItem(): JSX_2.Element | null;
/**
* Copy the given shapes to the clipboard.
*
* @param editor - The editor instance.
* @param ids - The ids of the shapes to copy.
* @param format - The format to copy as.
* @param opts - Options for the copy.
*
* @public
*/
export declare function copyAs(editor: Editor, ids: TLShapeId[], format?: TLCopyType, opts?: TLImageExportOptions): Promise<void>;
/** @public @react */
export declare function CopyAsMenuGroup(): JSX_2.Element;
/** @public @react */
export declare function CopyMenuItem(): JSX_2.Element;
/** @public */
export declare function createMediaAssetInfoSkeleton(file: File, assetId: TLAssetId, isImageType: boolean, isVideoType: boolean): Promise<TLImageAsset | TLVideoAsset>;
/**
* A helper function for an external content handler. It creates bookmarks,
* images or video shapes corresponding to the type of assets provided.
*
* @param editor - The editor instance
*
* @param assets - An array of asset Ids
*
* @param position - the position at which to create the shapes
*
* @public
*/
export declare function createShapesForAssets(editor: Editor, assets: TLAsset[], position: VecLike): Promise<TLShapeId[]>;
/** @public @react */
export declare function CursorChatItem(): JSX_2.Element | null;
/** @public */
export declare interface CustomEmbedDefinition extends EmbedDefinition {
readonly icon: string;
}
/** @public @react */
export declare function CutMenuItem(): JSX_2.Element;
/** @public @react */
export declare function DebugFlags(): JSX_2.Element | null;
/** @public */
export declare const DEFAULT_EMBED_DEFINITIONS: readonly [{
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["beta.tldraw.com", "tldraw.com", "localhost:3000"];
readonly minHeight: 300;
readonly minWidth: 300;
readonly overridePermissions: {
readonly 'allow-top-navigation': true;
};
readonly title: "tldraw";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "tldraw";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["figma.com"];
readonly title: "Figma";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "figma";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["google.*"];
readonly overridePermissions: {
readonly 'allow-presentation': true;
};
readonly title: "Google Maps";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "google_maps";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["val.town"];
readonly minHeight: 100;
readonly minWidth: 260;
readonly title: "Val Town";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "val_town";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["codesandbox.io"];
readonly minHeight: 300;
readonly minWidth: 300;
readonly title: "CodeSandbox";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "codesandbox";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 400;
readonly hostnames: readonly ["codepen.io"];
readonly minHeight: 300;
readonly minWidth: 300;
readonly title: "Codepen";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "codepen";
readonly width: 520;
}, {
readonly doesResize: false;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 400;
readonly hostnames: readonly ["scratch.mit.edu"];
readonly title: "Scratch";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "scratch";
readonly width: 520;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 450;
readonly hostnames: readonly ["*.youtube.com", "youtube.com", "youtu.be"];
readonly isAspectRatioLocked: true;
readonly overridePermissions: {
readonly 'allow-popups-to-escape-sandbox': true;
readonly 'allow-presentation': true;
};
readonly title: "YouTube";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "youtube";
readonly width: 800;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["calendar.google.*"];
readonly instructionLink: "https://support.google.com/calendar/answer/41207?hl=en";
readonly minHeight: 360;
readonly minWidth: 460;
readonly overridePermissions: {
readonly 'allow-popups-to-escape-sandbox': true;
};
readonly title: "Google Calendar";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "google_calendar";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["docs.google.*"];
readonly minHeight: 360;
readonly minWidth: 460;
readonly overridePermissions: {
readonly 'allow-popups-to-escape-sandbox': true;
};
readonly title: "Google Slides";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "google_slides";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["gist.github.com"];
readonly title: "GitHub Gist";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "github_gist";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["replit.com"];
readonly title: "Replit";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "replit";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["felt.com"];
readonly title: "Felt";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "felt";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["open.spotify.com"];
readonly minHeight: 500;
readonly overrideOutlineRadius: 12;
readonly title: "Spotify";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "spotify";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 360;
readonly hostnames: readonly ["vimeo.com", "player.vimeo.com"];
readonly isAspectRatioLocked: true;
readonly title: "Vimeo";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "vimeo";
readonly width: 640;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["excalidraw.com"];
readonly isAspectRatioLocked: true;
readonly title: "Excalidraw";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "excalidraw";
readonly width: 720;
}, {
readonly backgroundColor: "#fff";
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["observablehq.com"];
readonly isAspectRatioLocked: false;
readonly title: "Observable";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "observable";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 450;
readonly hostnames: readonly ["desmos.com"];
readonly title: "Desmos";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "desmos";
readonly width: 700;
}];
/** @public @react */
export declare const DefaultActionsMenu: NamedExoticComponent<TLUiActionsMenuProps>;
/** @public @react */
export declare function DefaultActionsMenuContent(): JSX_2.Element;
/** @public */
export declare const defaultBindingUtils: readonly [typeof ArrowBindingUtil];
/** @public @react */
declare const DefaultContextMenu: NamedExoticComponent<TLUiContextMenuProps>;
export { DefaultContextMenu as ContextMenu }
export { DefaultContextMenu }
/** @public @react */
export declare function DefaultContextMenuContent(): JSX_2.Element | null;
/** @public @react */
export declare function DefaultDebugMenu({ children }: TLUiDebugMenuProps): JSX_2.Element;
/** @public @react */
export declare function DefaultDebugMenuContent(): JSX_2.Element;
/** @public */
export declare let defaultEditorAssetUrls: TLEditorAssetUrls;
/** @public */
export declare type DefaultEmbedDefinitionType = (typeof DEFAULT_EMBED_DEFINITIONS)[number]['type'];
/** @public @react */
export declare function DefaultHelperButtons({ children }: TLUiHelperButtonsProps): JSX_2.Element;
/** @public @react */
export declare function DefaultHelperButtonsContent(): JSX_2.Element;
/** @public @react */
export declare const DefaultHelpMenu: NamedExoticComponent<TLUiHelpMenuProps>;
/** @public @react */
export declare function DefaultHelpMenuContent(): JSX_2.Element;
/** @public @react */
export declare const DefaultKeyboardShortcutsDialog: NamedExoticComponent<TLUiKeyboardShortcutsDialogProps>;
/** @public @react */
export declare function DefaultKeyboardShortcutsDialogContent(): JSX_2.Element;
/** @public @react */
export declare const DefaultMainMenu: NamedExoticComponent<TLUiMainMenuProps>;
/** @public @react */
export declare function DefaultMainMenuContent(): JSX_2.Element;
/** @public @react */
export declare const DefaultMenuPanel: NamedExoticComponent<object>;
/** @public @react */
export declare function DefaultMinimap(): JSX_2.Element;
/** @public @react */
export declare const DefaultNavigationPanel: NamedExoticComponent<object>;
/** @public @react */
export declare const DefaultPageMenu: NamedExoticComponent<object>;
/** @public @react */
export declare const DefaultQuickActions: NamedExoticComponent<TLUiQuickActionsProps>;
/** @public @react */
export declare function DefaultQuickActionsContent(): JSX_2.Element | undefined;
/** @public */
export declare const defaultShapeTools: readonly [typeof TextShapeTool, typeof DrawShapeTool, typeof GeoShapeTool, typeof NoteShapeTool, typeof LineShapeTool, typeof FrameShapeTool, typeof ArrowShapeTool, typeof HighlightShapeTool];
/** @public */
export declare const defaultShapeUtils: readonly [typeof TextShapeUtil, typeof BookmarkShapeUtil, typeof DrawShapeUtil, typeof GeoShapeUtil, typeof NoteShapeUtil, typeof LineShapeUtil, typeof FrameShapeUtil, typeof ArrowShapeUtil, typeof HighlightShapeUtil, typeof EmbedShapeUtil, typeof ImageShapeUtil, typeof VideoShapeUtil];
/** @public @react */
export declare function DefaultSharePanel(): JSX_2.Element;
/** @public @react */
export declare const DefaultStylePanel: NamedExoticComponent<TLUiStylePanelProps>;
/** @public @react */
export declare function DefaultStylePanelContent({ styles }: TLUiStylePanelContentProps): JSX_2.Element | null;
/**
* The default toolbar for the editor. `children` defaults to the `DefaultToolbarContent` component.
* Depending on the screen size, the children will overflow into a drop-down menu, with the most
* recently active item from the overflow being shown in the main toolbar.
*
* @public
* @react
*/
export declare const DefaultToolbar: NamedExoticComponent<DefaultToolbarProps>;
/** @public @react */
export declare function DefaultToolbarContent(): JSX_2.Element;
/** @public */
export declare interface DefaultToolbarProps {
children?: ReactNode;
}
/** @public */
export declare const defaultTools: readonly [typeof EraserTool, typeof HandTool, typeof LaserTool, typeof ZoomTool, typeof SelectTool];
/** @public @react */
export declare function DefaultTopPanel(): JSX_2.Element;
/** @public @react */
export declare const DefaultZoomMenu: NamedExoticComponent<TLUiZoomMenuProps>;
/** @public @react */
export declare function DefaultZoomMenuContent(): JSX_2.Element;
/** @public @react */
export declare function DeleteMenuItem(): JSX_2.Element;
/** @public @react */
export declare function DiamondToolbarItem(): JSX_2.Element;
/** @public @react */
export declare function DistributeMenuItems(): JSX_2.Element;
/**
* Resize an image Blob to be smaller than it is currently.
*
* @example
* ```ts
* const image = await (await fetch('/image.jpg')).blob()
* const size = await getImageSize(image)
* const resizedImage = await downsizeImage(image, size.w / 2, size.h / 2, { type: "image/jpeg", quality: 0.85 })
* ```
*
* @param image - The image Blob.
* @param width - The desired width.
* @param height - The desired height.
* @param opts - Options for the image.
* @public
*/
export declare function downsizeImage(blob: Blob, width: number, height: number, opts?: {
quality?: number | undefined;
type?: string | undefined;
}): Promise<Blob>;
/** @public */
export declare class DrawShapeTool extends StateNode {
static id: string;
static initial: string;
static isLockable: boolean;
static children(): TLStateNodeConstructor[];
shapeType: string;
onExit(): void;
}
/** @public */
export declare class DrawShapeUtil extends ShapeUtil<TLDrawShape> {
static type: "draw";
static props: RecordProps<TLDrawShape>;
static migrations: TLPropsMigrations;
hideResizeHandles(shape: TLDrawShape): boolean;
hideRotateHandle(shape: TLDrawShape): boolean;
hideSelectionBoundsFg(shape: TLDrawShape): boolean;
getDefaultProps(): TLDrawShape['props'];
getGeometry(shape: TLDrawShape): Circle2d | Polyline2d;
component(shape: TLDrawShape): JSX_2.Element;
indicator(shape: TLDrawShape): JSX_2.Element;
toSvg(shape: TLDrawShape, ctx: SvgExportContext): JSX_2.Element;
getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[];
onResize(shape: TLDrawShape, info: TLResizeInfo<TLDrawShape>): {
props: {
segments: TLDrawShapeSegment[];
};
};
expandSelectionOutlinePx(shape: TLDrawShape): number;
getInterpolatedProps(startShape: TLDrawShape, endShape: TLDrawShape, t: number): TLDrawShapeProps;
}
/** @public @react */
export declare function DrawToolbarItem(): JSX_2.Element;
/** @public @react */
export declare function DuplicateMenuItem(): JSX_2.Element | null;
/** @public @react */
export declare function EditLinkMenuItem(): JSX_2.Element | null;
/** @public @react */
export declare function EditMenuSubmenu(): JSX_2.Element | null;
/** @public @react */
export declare function EditSubmenu(): JSX_2.Element;
/** @public @react */
export declare function EllipseToolbarItem(): JSX_2.Element;
/** @public */
export declare interface EmbedDefinition {
readonly type: string;
readonly title: string;
readonly hostnames: readonly string[];
readonly minWidth?: number;
readonly minHeight?: number;
readonly width: number;
readonly height: number;
readonly doesResize: boolean;
readonly isAspectRatioLocked?: boolean;
readonly overridePermissions?: TLEmbedShapePermissions;
readonly instructionLink?: string;
readonly backgroundColor?: string;
readonly overrideOutlineRadius?: number;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
}
/**
* Permissions with note inline from
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox
*
* @public
*/
export declare const embedShapePermissionDefaults: {
readonly 'allow-downloads-without-user-activation': false;
readonly 'allow-downloads': false;
readonly 'allow-forms': true;
readonly 'allow-modals': false;
readonly 'allow-orientation-lock': false;
readonly 'allow-pointer-lock': false;
readonly 'allow-popups-to-escape-sandbox': false;
readonly 'allow-popups': true;
readonly 'allow-presentation': false;
readonly 'allow-same-origin': true;
readonly 'allow-scripts': true;
readonly 'allow-storage-access-by-user-activation': false;
readonly 'allow-top-navigation-by-user-activation': false;
readonly 'allow-top-navigation': false;
};
/** @public */
export declare class EmbedShapeUtil extends BaseBoxShapeUtil<TLEmbedShape> {
static type: "embed";
static props: RecordProps<TLEmbedShape>;
static migrations: TLPropsMigrations;
private static embedDefinitions;
static setEmbedDefinitions(embedDefinitions: readonly TLEmbedDefinition[]): void;
getEmbedDefinitions(): readonly TLEmbedDefinition[];
getEmbedDefinition(url: string): TLEmbedResult;
getText(shape: TLEmbedShape): string;
hideSelectionBoundsFg(shape: TLEmbedShape): boolean;
canEdit(): boolean;
canResize(shape: TLEmbedShape): boolean;
canEditInReadOnly(): boolean;
getDefaultProps(): TLEmbedShape['props'];
isAspectRatioLocked(shape: TLEmbedShape): boolean;
onResize(shape: TLEmbedShape, info: TLResizeInfo<TLEmbedShape>): TLEmbedShape;
component(shape: TLEmbedShape): JSX_2.Element | null;
indicator(shape: TLEmbedShape): JSX_2.Element;
getInterpolatedProps(startShape: TLEmbedShape, endShape: TLEmbedShape, t: number): TLEmbedShapeProps;
}
/** @public */
export declare class EraserTool extends StateNode {
static id: string;
static initial: string;
static isLockable: boolean;
static children(): TLStateNodeConstructor[];
onEnter(): void;
}
/** @public @react */
export declare function EraserToolbarItem(): JSX_2.Element;
/** @public */
export declare interface EventsProviderProps {
onEvent?: TLUiEventHandler;
children: React_2.ReactNode;
}
/** @public @react */
export declare function ExampleDialog({ title, body, cancel, confirm, displayDontShowAgain, onCancel, onContinue, }: ExampleDialogProps): JSX_2.Element;
/** @public */
export declare interface ExampleDialogProps {
title?: string;
body?: string;
cancel?: string;
confirm?: string;
displayDontShowAgain?: boolean;
onCancel(): void;
onContinue(): void;
}
/**
* Export the given shapes as files.
*
* @param editor - The editor instance.
* @param ids - The ids of the shapes to export.
* @param format - The format to export as.
* @param name - Name of the exported file. If undefined a predefined name, based on the selection, will be used.
* @param opts - Options for the export.
*
* @public
*/
export declare function exportAs(editor: Editor, ids: TLShapeId[], format: TLExportType | undefined, name: string | undefined, opts?: TLImageExportOptions): Promise<void>;
/** @public @react */
export declare function ExportFileContentSubMenu(): JSX_2.Element;
/**
* Export the given shapes as a blob.
* @param editor - The editor instance.
* @param ids - The ids of the shapes to export.
* @param format - The format to export as.
* @param opts - Rendering options.
* @returns A promise that resolves to a blob.
* @public
*/
export declare function exportToBlob({ editor, ids, format, opts, }: {
editor: Editor;
format: TLExportType;
ids: TLShapeId[];
opts?: TLImageExportOptions;
}): Promise<Blob>;
/** @public @react */
export declare function ExtrasGroup(): JSX_2.Element;
/** @public @react */
export declare function FeatureFlags(): JSX_2.Element | null;
/**
* Fit a frame to its content.
*
* @param id - Id of the frame you wish to fit to content.
* @param editor - tlraw editor instance.
* @param opts - Options for fitting the frame.
*
* @public
*/
export declare function fitFrameToContent(editor: Editor, id: TLShapeId, opts?: {
padding: number;
}): void;
/** @public @react */
export declare function FitFrameToContentMenuItem(): JSX_2.Element | null;
/** @public */
export declare const FONT_FAMILIES: Record<TLDefaultFontStyle, string>;
/** @public */
export declare const FONT_SIZES: Record<TLDefaultSizeStyle, number>;
/** @public */
export declare class FrameShapeTool extends BaseBoxShapeTool {
static id: string;
static initial: string;
shapeType: string;
onCreate(shape: null | TLShape): void;
}
/** @public */
export declare class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
static type: "frame";
static props: RecordProps<TLFrameShape>;
static migrations: TLPropsMigrations;
canEdit(): boolean;
getDefaultProps(): TLFrameShape['props'];
getGeometry(shape: TLFrameShape): Geometry2d;
getText(shape: TLFrameShape): string | undefined;
component(shape: TLFrameShape): JSX_2.Element;
toSvg(shape: TLFrameShape, ctx: SvgExportContext): JSX_2.Element;
indicator(shape: TLFrameShape): JSX_2.Element;
canReceiveNewChildrenOfType(shape: TLShape, _type: TLShape['type']): boolean;
providesBackgroundForChildren(): boolean;
canDropShapes(shape: TLFrameShape, _shapes: TLShape[]): boolean;
onDragShapesOver(frame: TLFrameShape, shapes: TLShape[]): void;
onDragShapesOut(_shape: TLFrameShape, shapes: TLShape[]): void;
onResize(shape: any, info: TLResizeInfo<any>): any;
getInterpolatedProps(startShape: TLFrameShape, endShape: TLFrameShape, t: number): TLFrameShapeProps;
}
/** @public @react */
export declare function FrameToolbarItem(): JSX_2.Element;
/** @public */
export declare class GeoShapeTool extends StateNode {
static id: string;
static initial: string;
static children(): TLStateNodeConstructor[];
shapeType: string;
}
/** @public */
export declare class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
static type: "geo";
static props: RecordProps<TLGeoShape>;
static migrations: TLPropsMigrations;
canEdit(): boolean;
getDefaultProps(): TLGeoShape['props'];
getGeometry(shape: TLGeoShape): Group2d;
getHandleSnapGeometry(shape: TLGeoShape): HandleSnapGeometry;
getText(shape: TLGeoShape): string;
onEditEnd(shape: TLGeoShape): void;
component(shape: TLGeoShape): JSX_2.Element;
indicator(shape: TLGeoShape): JSX_2.Element;
toSvg(shape: TLGeoShape, ctx: SvgExportContext): JSX_2.Element;
getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[];
onResize(shape: TLGeoShape, { handle, newPoint, scaleX, scaleY, initialShape }: TLResizeInfo<TLGeoShape>): {
props: {
growY: number;
h: number;
w: number;
};
x: number;
y: number;
};
onBeforeCreate(shape: TLGeoShape): {
id: TLShapeId;
index: IndexKey;
isLocked: boolean;
meta: JsonObject;
opacity: number;
parentId: TLParentId;
props: {
align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start";
color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
dash: "dashed" | "dotted" | "draw" | "solid";
fill: "fill" | "none" | "pattern" | "semi" | "solid";
font: "draw" | "mono" | "sans" | "serif";
geo: "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "cloud" | "diamond" | "ellipse" | "heart" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box";
growY: number;
h: number;
labelColor: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
scale: number;
size: "l" | "m" | "s" | "xl";
text: string;
url: string;
verticalAlign: "end" | "middle" | "start";
w: number;
};
rotation: number;
type: "geo";
typeName: "shape";
x: number;
y: number;
} | undefined;
onBeforeUpdate(prev: TLGeoShape, next: TLGeoShape): {
id: TLShapeId;
index: IndexKey;
isLocked: boolean;
meta: JsonObject;
opacity: number;
parentId: TLParentId;
props: {
align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start";
color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
dash: "dashed" | "dotted" | "draw" | "solid";
fill: "fill" | "none" | "pattern" | "semi" | "solid";
font: "draw" | "mono" | "sans" | "serif";
geo: "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "cloud" | "diamond" | "ellipse" | "heart" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box";
growY: number;
h: number;
labelColor: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
scale: number;
size: "l" | "m" | "s" | "xl";
text: string;
url: string;
verticalAlign: "end" | "middle" | "start";
w: number;
};
rotation: number;
type: "geo";
typeName: "shape";
x: number;
y: number;
} | undefined;
onDoubleClick(shape: TLGeoShape): {
id: TLShapeId;
index: IndexKey;
isLocked: boolean;
meta: JsonObject;
opacity: number;
parentId: TLParentId;
props: {
geo: "check-box";
};
rotation: number;
type: "geo";
typeName: "shape";
x: number;
y: number;
} | {
id: TLShapeId;
index: IndexKey;
isLocked: boolean;
meta: JsonObject;
opacity: number;
parentId: TLParentId;
props: {
geo: "rectangle";
};
rotation: number;
type: "geo";
typeName: "shape";
x: number;
y: number;
} | undefined;
getInterpolatedProps(startShape: TLGeoShape, endShape: TLGeoShape, t: number): TLGeoShapeProps;
}
/** @public @react */
export declare function GeoStylePickerSet({ styles }: StylePickerSetProps): JSX_2.Element | null;
/** @public */
export declare function getArrowBindings(editor: Editor, shape: TLArrowShape): TLArrowBindings;
/** @public */
export declare function getArrowTerminalsInArrowSpace(editor: Editor, shape: TLArrowShape, bindings: TLArrowBindings): {
end: Vec;
start: Vec;
};
/**
* Tests whether an URL supports embedding and returns the result. If we encounter an error, we
* return undefined.
*
* @param inputUrl - The URL to match
* @public
*/
export declare function getEmbedInfo(definitions: readonly TLEmbedDefinition[], inputUrl: string): TLEmbedResult;
/** @public */
export declare function getOccludedChildren(editor: Editor, parent: TLShape): TLShapeId[];
/** @public */
export declare function getSvgAsImage(editor: Editor, svgString: string, options: {
height: number;
pixelRatio?: number;
quality?: number;
type: 'jpeg' | 'png' | 'webp';
width: number;
}): Promise<Blob | null>;
/** @public @react */
export declare function GroupMenuItem(): JSX_2.Element | null;
/** @public @react */
export declare function GroupOrUngroupMenuItem(): JSX_2.Element;
/** @public */
export declare class HandTool extends StateNode {
static id: string;
static initial: string;
static isLockable: boolean;
static children(): TLStateNodeConstructor[];
onDoubleClick(info: TLClickEventInfo): void;
onTripleClick(info: TLClickEventInfo): void;
onQuadrupleClick(info: TLClickEventInfo): void;
}
/** @public @react */
export declare function HandToolbarItem(): JSX_2.Element;
/** @public @react */
export declare function HexagonToolbarItem(): JSX_2.Element;
/** @public */
export declare class HighlightShapeTool extends StateNode {
static id: string;
static initial: string;
static children(): TLStateNodeConstructor[];
static isLockable: boolean;
shapeType: string;
onExit(): void;
}
/** @public */
export declare class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {
static type: "highlight";
static props: RecordProps<TLHighlightShape>;
static migrations: TLPropsMigrations;
hideResizeHandles(shape: TLHighlightShape): boolean;
hideRotateHandle(shape: TLHighlightShape): boolean;
hideSelectionBoundsFg(shape: TLHighlightShape): boolean;
getDefaultProps(): TLHighlightShape['props'];
getGeometry(shape: TLHighlightShape): Circle2d | Polygon2d;
component(shape: TLHighlightShape): JSX_2.Element;
backgroundComponent(shape: TLHighlightShape): JSX_2.Element;
indicator(shape: TLHighlightShape): JSX_2.Element;
toSvg(shape: TLHighlightShape): JSX_2.Element;
toBackgroundSvg(shape: TLHighlightShape): JSX_2.Element;
onResize(shape: TLHighlightShape, info: TLResizeInfo<TLHighlightShape>): {
props: {
segments: TLDrawShapeSegment[];
};
};
getInterpolatedProps(startShape: TLHighlightShape, endShape: TLHighlightShape, t: number): TLHighlightShapeProps;
}
/** @public @react */
export declare function HighlightToolbarItem(): JSX_2.Element;
/** @public */
export declare class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
static type: "image";
static props: RecordProps<TLImageShape>;
static migrations: TLPropsMigrations;
isAspectRatioLocked(): boolean;
canCrop(): boolean;
getDefaultProps(): TLImageShape['props'];
onResize(shape: TLImageShape, info: TLResizeInfo<TLImageShape>): TLImageShape;
component(shape: TLImageShape): JSX_2.Element;
indicator(shape: TLImageShape): JSX_2.Element | null;
toSvg(shape: TLImageShape): Promise<JSX_2.Element | null>;
onDoubleClickEdge(shape: TLImageShape): void;
getInterpolatedProps(startShape: TLImageShape, endShape: TLImageShape, t: number): TLImageShapeProps;
}
/** @public @react */
export declare function KeyboardShortcutsMenuItem(): JSX_2.Element | null;
/* Excluded from this release type: kickoutOccludedShapes */
/** @public */
export declare const LABEL_FONT_SIZES: Record<TLDefaultSizeStyle, number>;
/** @public @react */
export declare function LanguageMenu(): JSX_2.Element | null;
/** @public */
export declare class LaserTool extends StateNode {
static id: string;
static initial: string;
static children(): TLStateNodeConstructor[];
static isLockable: boolean;
onEnter(): void;
}
/** @public @react */
export declare function LaserToolbarItem(): JSX_2.Element;
/** @public */
export declare class LineShapeTool extends StateNode {
static id: string;
static initial: string;
static children(): TLStateNodeConstructor[];
shapeType: string;
}
/** @public */
export declare class LineShapeUtil extends ShapeUtil<TLLineShape> {
static type: "line";
static props: RecordProps<TLLineShape>;
static migrations: TLPropsMigrations;
hideResizeHandles(): boolean;
hideRotateHandle(): boolean;
hideSelectionBoundsFg(): boolean;
hideSelectionBoundsBg(): boolean;
getDefaultProps(): TLLineShape['props'];
getGeometry(shape: TLLineShape): CubicSpline2d | Polyline2d;
getHandles(shape: TLLineShape): TLHandle[];
onResize(shape: TLLineShape, info: TLResizeInfo<TLLineShape>): {
props: {
points: {
[x: string]: {
id: string;
index: IndexKey;
x: number;
y: number;
};
};
};
};
onBeforeCreate(next: TLLineShape): TLLineShape | void;
onHandleDrag(shape: TLLineShape, { handle }: TLHandleDragInfo<TLLineShape>): {
id: TLShapeId;
index: IndexKey;
isLocked: boolean;
meta: JsonObject;
opacity: number;
parentId: TLParentId;
props: {
color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
dash: "dashed" | "dotted" | "draw" | "solid";
points: {
[x: string]: {
id: string;
index: IndexKey;
x: number;
y: number;
} | TLLineShapePoint;
};
scale: number;
size: "l" | "m" | "s" | "xl";
spline: "cubic" | "line";
};
rotation: number;
type: "line";
typeName: "shape";
x: number;
y: number;
} | undefined;
component(shape: TLLineShape): JSX_2.Element;
indicator(shape: TLLineShape): JSX_2.Element;
toSvg(shape: TLLineShape): JSX_2.Element;
getHandleSnapGeometry(shape: TLLineShape): HandleSnapGeometry;
getInterpolatedProps(startShape: TLLineShape, endShape: TLLineShape, t: number): TLLineShape['props'];
}
/** @public @react */
export declare function LineToolbarItem(): JSX_2.Element;
/** @public @react */
export declare function MiscMenuGroup(): JSX_2.Element;
/** @public @react */
export declare function MobileStylePanel(): JSX_2.Element | null;
/** @public @react */
export declare function MoveToPageMenu(): JSX_2.Element | null;
/** @public */
export declare class NoteShapeTool extends StateNode {
static id: string;
static initial: string;
static children(): TLStateNodeConstructor[];
shapeType: string;
}
/** @public */
export declare class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
static type: "note";
static props: RecordProps<TLNoteShape>;
static migrations: TLPropsMigrations;
canEdit(): boolean;
hideResizeHandles(): boolean;
hideSelectionBoundsFg(): boolean;
getDefaultProps(): TLNoteShape['props'];
getGeometry(shape: TLNoteShape): Group2d;
getHandles(shape: TLNoteShape): TLHandle[];
getText(shape: TLNoteShape): string;
component(shape: TLNoteShape): JSX_2.Element;
indicator(shape: TLNoteShape): JSX_2.Element;
toSvg(shape: TLNoteShape, ctx: SvgExportContext): JSX_2.Element;
onBeforeCreate(next: TLNoteShape): {
id: TLShapeId;
index: IndexKey;
isLocked: boolean;
meta: JsonObject;
opacity: number;
parentId: TLParentId;
props: {
align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start";
color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
font: "draw" | "mono" | "sans" | "serif";
fontSizeAdjustment: number;
growY: number;
labelColor: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
scale: number;
size: "l" | "m" | "s" | "xl";
text: string;
url: string;
verticalAlign: "end" | "middle" | "start";
};
rotation: number;
type: "note";
typeName: "shape";
x: number;
y: number;
} | undefined;
onBeforeUpdate(prev: TLNoteShape, next: TLNoteShape): {
id: TLShapeId;
index: IndexKey;
isLocked: boolean;
meta: JsonObject;
opacity: number;
parentId: TLParentId;
props: {
align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start";
color: "black" | "