kopia lustrzana https://github.com/Tldraw/Tldraw
1987 wiersze
74 KiB
Markdown
1987 wiersze
74 KiB
Markdown
## API Report File for "@tldraw/tldraw"
|
|
|
|
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
|
|
|
|
```ts
|
|
|
|
/// <reference types="react" />
|
|
|
|
import { ArrayOfValidator } from '@tldraw/editor';
|
|
import { BaseBoxShapeTool } from '@tldraw/editor';
|
|
import { BaseBoxShapeUtil } from '@tldraw/editor';
|
|
import { Box2d } from '@tldraw/editor';
|
|
import { Circle2d } from '@tldraw/editor';
|
|
import { CubicSpline2d } from '@tldraw/editor';
|
|
import { DictValidator } from '@tldraw/editor';
|
|
import { Editor } from '@tldraw/editor';
|
|
import { EMBED_DEFINITIONS } from '@tldraw/editor';
|
|
import { EmbedDefinition } from '@tldraw/editor';
|
|
import { EnumStyleProp } from '@tldraw/editor';
|
|
import { Geometry2d } from '@tldraw/editor';
|
|
import { Group2d } from '@tldraw/editor';
|
|
import { JsonObject } from '@tldraw/editor';
|
|
import { LANGUAGES } from '@tldraw/editor';
|
|
import { Matrix2d } from '@tldraw/editor';
|
|
import { Matrix2dModel } from '@tldraw/editor';
|
|
import { MigrationFailureReason } from '@tldraw/editor';
|
|
import { Migrations } from '@tldraw/editor';
|
|
import { NamedExoticComponent } from 'react';
|
|
import { ObjectValidator } from '@tldraw/editor';
|
|
import { Polygon2d } from '@tldraw/editor';
|
|
import { Polyline2d } from '@tldraw/editor';
|
|
import { default as React_2 } from 'react';
|
|
import * as React_3 from 'react';
|
|
import { ReactNode } from 'react';
|
|
import { Rectangle2d } from '@tldraw/editor';
|
|
import { RecursivePartial } from '@tldraw/editor';
|
|
import { Result } from '@tldraw/editor';
|
|
import { SelectionCorner } from '@tldraw/editor';
|
|
import { SelectionEdge } from '@tldraw/editor';
|
|
import { SelectionHandle } from '@tldraw/editor';
|
|
import { SerializedSchema } from '@tldraw/editor';
|
|
import { ShapeUtil } from '@tldraw/editor';
|
|
import { SnapPoint } from '@tldraw/editor';
|
|
import { StateNode } from '@tldraw/editor';
|
|
import { StoreSnapshot } from '@tldraw/editor';
|
|
import { SvgExportContext } from '@tldraw/editor';
|
|
import { TLAnyShapeUtilConstructor } from '@tldraw/editor';
|
|
import { TLArrowShape } from '@tldraw/editor';
|
|
import { TLAssetId } from '@tldraw/editor';
|
|
import { TLBaseEventInfo } from '@tldraw/editor';
|
|
import { TLBookmarkShape } from '@tldraw/editor';
|
|
import { TLCancelEvent } from '@tldraw/editor';
|
|
import { TLClickEvent } from '@tldraw/editor';
|
|
import { TLClickEventInfo } from '@tldraw/editor';
|
|
import { TLDefaultSizeStyle } from '@tldraw/editor';
|
|
import { TldrawEditorBaseProps } from '@tldraw/editor';
|
|
import { TLDrawShape } from '@tldraw/editor';
|
|
import { TLDrawShapeSegment } from '@tldraw/editor';
|
|
import { TLEmbedShape } from '@tldraw/editor';
|
|
import { TLEnterEventHandler } from '@tldraw/editor';
|
|
import { TLEventHandlers } from '@tldraw/editor';
|
|
import { TLExitEventHandler } from '@tldraw/editor';
|
|
import { TLFrameShape } from '@tldraw/editor';
|
|
import { TLGeoShape } from '@tldraw/editor';
|
|
import { TLHandle } from '@tldraw/editor';
|
|
import { TLHandlesComponent } from '@tldraw/editor';
|
|
import { TLHighlightShape } from '@tldraw/editor';
|
|
import { TLHoveredShapeIndicatorComponent } from '@tldraw/editor';
|
|
import { TLImageShape } from '@tldraw/editor';
|
|
import { TLInterruptEvent } from '@tldraw/editor';
|
|
import { TLKeyboardEvent } from '@tldraw/editor';
|
|
import { TLKeyboardEventInfo } from '@tldraw/editor';
|
|
import { TLLanguage } from '@tldraw/editor';
|
|
import { TLLineShape } from '@tldraw/editor';
|
|
import { TLNoteShape } from '@tldraw/editor';
|
|
import { TLOnBeforeCreateHandler } from '@tldraw/editor';
|
|
import { TLOnBeforeUpdateHandler } from '@tldraw/editor';
|
|
import { TLOnDoubleClickHandler } from '@tldraw/editor';
|
|
import { TLOnEditEndHandler } from '@tldraw/editor';
|
|
import { TLOnHandleChangeHandler } from '@tldraw/editor';
|
|
import { TLOnResizeEndHandler } from '@tldraw/editor';
|
|
import { TLOnResizeHandler } from '@tldraw/editor';
|
|
import { TLOnTranslateStartHandler } from '@tldraw/editor';
|
|
import { TLParentId } from '@tldraw/editor';
|
|
import { TLPointerEvent } from '@tldraw/editor';
|
|
import { TLPointerEventInfo } from '@tldraw/editor';
|
|
import { TLPointerEventName } from '@tldraw/editor';
|
|
import { TLRecord } from '@tldraw/editor';
|
|
import { TLRotationSnapshot } from '@tldraw/editor';
|
|
import { TLSchema } from '@tldraw/editor';
|
|
import { TLScribbleComponent } from '@tldraw/editor';
|
|
import { TLSelectionBackgroundComponent } from '@tldraw/editor';
|
|
import { TLSelectionForegroundComponent } from '@tldraw/editor';
|
|
import { TLSelectionHandle } from '@tldraw/editor';
|
|
import { TLShape } from '@tldraw/editor';
|
|
import { TLShapeId } from '@tldraw/editor';
|
|
import { TLShapePartial } from '@tldraw/editor';
|
|
import { TLShapeUtilCanvasSvgDef } from '@tldraw/editor';
|
|
import { TLShapeUtilFlag } from '@tldraw/editor';
|
|
import { TLStore } from '@tldraw/editor';
|
|
import { TLStoreWithStatus } from '@tldraw/editor';
|
|
import { TLSvgOptions } from '@tldraw/editor';
|
|
import { TLTextShape } from '@tldraw/editor';
|
|
import { TLTickEventHandler } from '@tldraw/editor';
|
|
import { TLUnknownShape } from '@tldraw/editor';
|
|
import { TLVideoShape } from '@tldraw/editor';
|
|
import { UnionValidator } from '@tldraw/editor';
|
|
import { UnknownRecord } from '@tldraw/editor';
|
|
import { Validator } from '@tldraw/editor';
|
|
import { Vec2d } from '@tldraw/editor';
|
|
import { Vec2dModel } from '@tldraw/editor';
|
|
import { VecLike } from '@tldraw/editor';
|
|
|
|
// @public (undocumented)
|
|
export class ArrowShapeTool extends StateNode {
|
|
// (undocumented)
|
|
static children: () => (typeof Idle | typeof Pointing)[];
|
|
// (undocumented)
|
|
static id: string;
|
|
// (undocumented)
|
|
static initial: string;
|
|
// (undocumented)
|
|
shapeType: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
|
|
// (undocumented)
|
|
canBind: () => boolean;
|
|
// (undocumented)
|
|
canEdit: () => boolean;
|
|
// (undocumented)
|
|
canSnap: () => boolean;
|
|
// (undocumented)
|
|
component(shape: TLArrowShape): JSX.Element | null;
|
|
// (undocumented)
|
|
getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[];
|
|
// (undocumented)
|
|
getDefaultProps(): TLArrowShape['props'];
|
|
// (undocumented)
|
|
getGeometry(shape: TLArrowShape): Group2d;
|
|
// (undocumented)
|
|
getHandles(shape: TLArrowShape): TLHandle[];
|
|
// (undocumented)
|
|
hideResizeHandles: TLShapeUtilFlag<TLArrowShape>;
|
|
// (undocumented)
|
|
hideRotateHandle: TLShapeUtilFlag<TLArrowShape>;
|
|
// (undocumented)
|
|
hideSelectionBoundsBg: TLShapeUtilFlag<TLArrowShape>;
|
|
// (undocumented)
|
|
hideSelectionBoundsFg: TLShapeUtilFlag<TLArrowShape>;
|
|
// (undocumented)
|
|
indicator(shape: TLArrowShape): JSX.Element | null;
|
|
// (undocumented)
|
|
static migrations: Migrations;
|
|
// (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)
|
|
static props: {
|
|
labelColor: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow">;
|
|
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow">;
|
|
fill: EnumStyleProp<"none" | "pattern" | "semi" | "solid">;
|
|
dash: EnumStyleProp<"dashed" | "dotted" | "draw" | "solid">;
|
|
size: EnumStyleProp<"l" | "m" | "s" | "xl">;
|
|
arrowheadStart: EnumStyleProp<"arrow" | "bar" | "diamond" | "dot" | "inverted" | "none" | "pipe" | "square" | "triangle">;
|
|
arrowheadEnd: EnumStyleProp<"arrow" | "bar" | "diamond" | "dot" | "inverted" | "none" | "pipe" | "square" | "triangle">;
|
|
font: EnumStyleProp<"draw" | "mono" | "sans" | "serif">;
|
|
start: UnionValidator<"type", {
|
|
binding: ObjectValidator< {
|
|
type: "binding";
|
|
boundShapeId: TLShapeId;
|
|
normalizedAnchor: Vec2dModel;
|
|
isExact: boolean;
|
|
isPrecise: boolean;
|
|
}>;
|
|
point: ObjectValidator< {
|
|
type: "point";
|
|
x: number;
|
|
y: number;
|
|
}>;
|
|
}, never>;
|
|
end: UnionValidator<"type", {
|
|
binding: ObjectValidator< {
|
|
type: "binding";
|
|
boundShapeId: TLShapeId;
|
|
normalizedAnchor: Vec2dModel;
|
|
isExact: boolean;
|
|
isPrecise: boolean;
|
|
}>;
|
|
point: ObjectValidator< {
|
|
type: "point";
|
|
x: number;
|
|
y: number;
|
|
}>;
|
|
}, never>;
|
|
bend: Validator<number>;
|
|
text: Validator<string>;
|
|
};
|
|
// (undocumented)
|
|
toSvg(shape: TLArrowShape, ctx: SvgExportContext): SVGGElement;
|
|
// (undocumented)
|
|
static type: "arrow";
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export function AssetUrlsProvider({ assetUrls, children, }: {
|
|
assetUrls: TLUiAssetUrls;
|
|
children: React.ReactNode;
|
|
}): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
function Body_2({ className, children, style, }: {
|
|
className?: string;
|
|
children: any;
|
|
style?: React.CSSProperties;
|
|
}): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape> {
|
|
// (undocumented)
|
|
canResize: () => boolean;
|
|
// (undocumented)
|
|
component(shape: TLBookmarkShape): JSX.Element;
|
|
// (undocumented)
|
|
getDefaultProps(): TLBookmarkShape['props'];
|
|
// (undocumented)
|
|
hideSelectionBoundsFg: () => boolean;
|
|
// (undocumented)
|
|
indicator(shape: TLBookmarkShape): JSX.Element;
|
|
// (undocumented)
|
|
static migrations: Migrations;
|
|
// (undocumented)
|
|
onBeforeCreate?: TLOnBeforeCreateHandler<TLBookmarkShape>;
|
|
// (undocumented)
|
|
onBeforeUpdate?: TLOnBeforeUpdateHandler<TLBookmarkShape>;
|
|
// (undocumented)
|
|
static props: {
|
|
w: Validator<number>;
|
|
h: Validator<number>;
|
|
assetId: Validator<null | TLAssetId>;
|
|
url: Validator<string>;
|
|
};
|
|
// (undocumented)
|
|
static type: "bookmark";
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function BreakPointProvider({ forceMobile, children, }: {
|
|
forceMobile?: boolean;
|
|
children: any;
|
|
}): JSX.Element;
|
|
|
|
// @internal (undocumented)
|
|
export function buildFromV1Document(editor: Editor, document: LegacyTldrawDocument): void;
|
|
|
|
// @public (undocumented)
|
|
export const Button: React_3.ForwardRefExoticComponent<TLUiButtonProps & React_3.RefAttributes<HTMLButtonElement>>;
|
|
|
|
// @public (undocumented)
|
|
function CheckboxItem({ children, onSelect, ...rest }: DropdownMenuCheckboxItemProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
function CloseButton(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function compactMenuItems<T>(arr: T[]): Exclude<T, false | null | undefined>[];
|
|
|
|
// @public
|
|
export function containBoxSize(originalSize: BoxWidthHeight, containBoxSize: BoxWidthHeight): BoxWidthHeight;
|
|
|
|
// @public (undocumented)
|
|
function Content({ side, align, sideOffset, alignOffset, children, }: {
|
|
children: any;
|
|
alignOffset?: number;
|
|
sideOffset?: number;
|
|
align?: 'center' | 'end' | 'start';
|
|
side?: 'bottom' | 'left' | 'right' | 'top';
|
|
}): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export const ContextMenu: ({ children }: {
|
|
children: any;
|
|
}) => JSX.Element;
|
|
|
|
// @public
|
|
export function copyAs(editor: Editor, ids: TLShapeId[], format?: TLCopyType, opts?: Partial<TLSvgOptions>): Promise<void>;
|
|
|
|
// @public (undocumented)
|
|
export const DEFAULT_ACCEPTED_IMG_TYPE: string[];
|
|
|
|
// @public (undocumented)
|
|
export const DEFAULT_ACCEPTED_VID_TYPE: string[];
|
|
|
|
// @public (undocumented)
|
|
export const defaultShapeTools: (typeof ArrowShapeTool | typeof DrawShapeTool | typeof FrameShapeTool | typeof GeoShapeTool | typeof LineShapeTool | typeof NoteShapeTool | typeof TextShapeTool)[];
|
|
|
|
// @public (undocumented)
|
|
export const defaultShapeUtils: TLAnyShapeUtilConstructor[];
|
|
|
|
// @public (undocumented)
|
|
export const defaultTools: (typeof EraserTool | typeof HandTool | typeof LaserTool | typeof SelectTool | typeof ZoomTool)[];
|
|
|
|
declare namespace Dialog {
|
|
export {
|
|
Header,
|
|
Title,
|
|
CloseButton,
|
|
Body_2 as Body,
|
|
Footer
|
|
}
|
|
}
|
|
export { Dialog }
|
|
|
|
// @public (undocumented)
|
|
export class DrawShapeTool extends StateNode {
|
|
// (undocumented)
|
|
static children: () => (typeof Drawing | typeof Idle_2)[];
|
|
// (undocumented)
|
|
static id: string;
|
|
// (undocumented)
|
|
static initial: string;
|
|
// (undocumented)
|
|
onExit: () => void;
|
|
// (undocumented)
|
|
shapeType: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class DrawShapeUtil extends ShapeUtil<TLDrawShape> {
|
|
// (undocumented)
|
|
component(shape: TLDrawShape): JSX.Element;
|
|
// (undocumented)
|
|
expandSelectionOutlinePx(shape: TLDrawShape): number;
|
|
// (undocumented)
|
|
getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[];
|
|
// (undocumented)
|
|
getDefaultProps(): TLDrawShape['props'];
|
|
// (undocumented)
|
|
getGeometry(shape: TLDrawShape): Circle2d | Polyline2d;
|
|
// (undocumented)
|
|
hideResizeHandles: (shape: TLDrawShape) => boolean;
|
|
// (undocumented)
|
|
hideRotateHandle: (shape: TLDrawShape) => boolean;
|
|
// (undocumented)
|
|
hideSelectionBoundsFg: (shape: TLDrawShape) => boolean;
|
|
// (undocumented)
|
|
indicator(shape: TLDrawShape): JSX.Element;
|
|
// (undocumented)
|
|
static migrations: Migrations;
|
|
// (undocumented)
|
|
onResize: TLOnResizeHandler<TLDrawShape>;
|
|
// (undocumented)
|
|
static props: {
|
|
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow">;
|
|
fill: EnumStyleProp<"none" | "pattern" | "semi" | "solid">;
|
|
dash: EnumStyleProp<"dashed" | "dotted" | "draw" | "solid">;
|
|
size: EnumStyleProp<"l" | "m" | "s" | "xl">;
|
|
segments: ArrayOfValidator< {
|
|
type: "free" | "straight";
|
|
points: Vec2dModel[];
|
|
}>;
|
|
isComplete: Validator<boolean>;
|
|
isClosed: Validator<boolean>;
|
|
isPen: Validator<boolean>;
|
|
};
|
|
// (undocumented)
|
|
toSvg(shape: TLDrawShape, ctx: SvgExportContext): SVGGElement;
|
|
// (undocumented)
|
|
static type: "draw";
|
|
}
|
|
|
|
declare namespace DropdownMenu {
|
|
export {
|
|
Root,
|
|
Trigger,
|
|
Content,
|
|
Sub,
|
|
SubTrigger,
|
|
SubContent,
|
|
Group,
|
|
Indicator,
|
|
Item,
|
|
CheckboxItem,
|
|
RadioItem,
|
|
DropdownMenuItemProps,
|
|
DropdownMenuCheckboxItemProps
|
|
}
|
|
}
|
|
export { DropdownMenu }
|
|
|
|
// @public (undocumented)
|
|
interface DropdownMenuCheckboxItemProps {
|
|
// (undocumented)
|
|
checked?: boolean;
|
|
// (undocumented)
|
|
children: any;
|
|
// (undocumented)
|
|
disabled?: boolean;
|
|
// (undocumented)
|
|
onSelect?: (e: Event) => void;
|
|
// (undocumented)
|
|
title: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
interface DropdownMenuItemProps extends TLUiButtonProps {
|
|
// (undocumented)
|
|
noClose?: boolean;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class EmbedShapeUtil extends BaseBoxShapeUtil<TLEmbedShape> {
|
|
// (undocumented)
|
|
canEdit: TLShapeUtilFlag<TLEmbedShape>;
|
|
// (undocumented)
|
|
canEditInReadOnly: () => boolean;
|
|
// (undocumented)
|
|
canResize: (shape: TLEmbedShape) => boolean;
|
|
// (undocumented)
|
|
canUnmount: TLShapeUtilFlag<TLEmbedShape>;
|
|
// (undocumented)
|
|
component(shape: TLEmbedShape): JSX.Element;
|
|
// (undocumented)
|
|
getDefaultProps(): TLEmbedShape['props'];
|
|
// (undocumented)
|
|
hideSelectionBoundsFg: TLShapeUtilFlag<TLEmbedShape>;
|
|
// (undocumented)
|
|
indicator(shape: TLEmbedShape): JSX.Element;
|
|
// (undocumented)
|
|
isAspectRatioLocked: TLShapeUtilFlag<TLEmbedShape>;
|
|
// (undocumented)
|
|
static migrations: Migrations;
|
|
// (undocumented)
|
|
onResize: TLOnResizeHandler<TLEmbedShape>;
|
|
// (undocumented)
|
|
static props: {
|
|
w: Validator<number>;
|
|
h: Validator<number>;
|
|
url: Validator<string>;
|
|
};
|
|
// (undocumented)
|
|
static type: "embed";
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class EraserTool extends StateNode {
|
|
// (undocumented)
|
|
static children: () => (typeof Erasing | typeof Idle_7 | typeof Pointing_6)[];
|
|
// (undocumented)
|
|
static id: string;
|
|
// (undocumented)
|
|
static initial: string;
|
|
// (undocumented)
|
|
onEnter: () => void;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type EventsProviderProps = {
|
|
onEvent?: TLUiEventHandler;
|
|
children: any;
|
|
};
|
|
|
|
// @public
|
|
export function exportAs(editor: Editor, ids: TLShapeId[], format?: TLExportType, opts?: Partial<TLSvgOptions>): Promise<void>;
|
|
|
|
// @public (undocumented)
|
|
export function findMenuItem(menu: TLUiMenuSchema, path: string[]): TLUiCustomMenuItem | TLUiMenuGroup | TLUiMenuItem | TLUiSubMenu<string>;
|
|
|
|
// @public
|
|
export function fitFrameToContent(editor: Editor, id: TLShapeId, opts?: {
|
|
padding: number;
|
|
}): void;
|
|
|
|
// @public (undocumented)
|
|
function Footer({ className, children }: {
|
|
className?: string;
|
|
children: any;
|
|
}): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export class FrameShapeTool extends BaseBoxShapeTool {
|
|
// (undocumented)
|
|
static id: string;
|
|
// (undocumented)
|
|
static initial: string;
|
|
// (undocumented)
|
|
onCreate: (shape: null | TLShape) => void;
|
|
// (undocumented)
|
|
shapeType: string;
|
|
}
|
|
|
|
// @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)
|
|
component(shape: TLFrameShape): JSX.Element;
|
|
// (undocumented)
|
|
getDefaultProps(): TLFrameShape['props'];
|
|
// (undocumented)
|
|
getGeometry(shape: TLFrameShape): Geometry2d;
|
|
// (undocumented)
|
|
indicator(shape: TLFrameShape): JSX.Element;
|
|
// (undocumented)
|
|
static migrations: Migrations;
|
|
// (undocumented)
|
|
onDragShapesOut: (_shape: TLFrameShape, shapes: TLShape[]) => void;
|
|
// (undocumented)
|
|
onDragShapesOver: (frame: TLFrameShape, shapes: TLShape[]) => {
|
|
shouldHint: boolean;
|
|
};
|
|
// (undocumented)
|
|
onResize: TLOnResizeHandler<any>;
|
|
// (undocumented)
|
|
onResizeEnd: TLOnResizeEndHandler<TLFrameShape>;
|
|
// (undocumented)
|
|
static props: {
|
|
w: Validator<number>;
|
|
h: Validator<number>;
|
|
name: Validator<string>;
|
|
};
|
|
// (undocumented)
|
|
providesBackgroundForChildren(): boolean;
|
|
// (undocumented)
|
|
toSvg(shape: TLFrameShape): Promise<SVGElement> | SVGElement;
|
|
// (undocumented)
|
|
static type: "frame";
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class GeoShapeTool extends StateNode {
|
|
// (undocumented)
|
|
static children: () => (typeof Idle_3 | typeof Pointing_2)[];
|
|
// (undocumented)
|
|
static id: string;
|
|
// (undocumented)
|
|
static initial: string;
|
|
// (undocumented)
|
|
shapeType: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
|
|
// (undocumented)
|
|
canEdit: () => boolean;
|
|
// (undocumented)
|
|
component(shape: TLGeoShape): JSX.Element;
|
|
// (undocumented)
|
|
getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[];
|
|
// (undocumented)
|
|
getDefaultProps(): TLGeoShape['props'];
|
|
// (undocumented)
|
|
getGeometry(shape: TLGeoShape): Geometry2d;
|
|
// (undocumented)
|
|
indicator(shape: TLGeoShape): JSX.Element;
|
|
// (undocumented)
|
|
static migrations: Migrations;
|
|
// (undocumented)
|
|
onBeforeCreate: (shape: TLGeoShape) => {
|
|
props: {
|
|
growY: number;
|
|
geo: "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "cloud" | "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-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "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;
|
|
meta: JsonObject;
|
|
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" | "cloud" | "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-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "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;
|
|
meta: JsonObject;
|
|
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;
|
|
meta: JsonObject;
|
|
id: TLShapeId;
|
|
typeName: "shape";
|
|
} | {
|
|
props: {
|
|
geo: "rectangle";
|
|
};
|
|
type: "geo";
|
|
x: number;
|
|
y: number;
|
|
rotation: number;
|
|
index: string;
|
|
parentId: TLParentId;
|
|
isLocked: boolean;
|
|
opacity: number;
|
|
meta: JsonObject;
|
|
id: TLShapeId;
|
|
typeName: "shape";
|
|
} | undefined;
|
|
// (undocumented)
|
|
onEditEnd: TLOnEditEndHandler<TLGeoShape>;
|
|
// (undocumented)
|
|
onResize: TLOnResizeHandler<TLGeoShape>;
|
|
// (undocumented)
|
|
static props: {
|
|
geo: EnumStyleProp<"arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "cloud" | "diamond" | "ellipse" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box">;
|
|
labelColor: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow">;
|
|
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow">;
|
|
fill: EnumStyleProp<"none" | "pattern" | "semi" | "solid">;
|
|
dash: EnumStyleProp<"dashed" | "dotted" | "draw" | "solid">;
|
|
size: EnumStyleProp<"l" | "m" | "s" | "xl">;
|
|
font: EnumStyleProp<"draw" | "mono" | "sans" | "serif">;
|
|
align: EnumStyleProp<"end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start">;
|
|
verticalAlign: EnumStyleProp<"end" | "middle" | "start">;
|
|
url: Validator<string>;
|
|
w: Validator<number>;
|
|
h: Validator<number>;
|
|
growY: Validator<number>;
|
|
text: Validator<string>;
|
|
};
|
|
// (undocumented)
|
|
toSvg(shape: TLGeoShape, ctx: SvgExportContext): SVGElement;
|
|
// (undocumented)
|
|
static type: "geo";
|
|
}
|
|
|
|
// @public
|
|
export function getEmbedInfo(inputUrl: string): TLEmbedResult;
|
|
|
|
// @public
|
|
export function getResizedImageDataUrl(dataURLForImage: string, width: number, height: number, opts?: {
|
|
type?: string | undefined;
|
|
quality?: number | undefined;
|
|
}): Promise<string>;
|
|
|
|
// @public (undocumented)
|
|
export function getSvgAsImage(svg: SVGElement, isSafari: boolean, options: {
|
|
type: 'jpeg' | 'png' | 'svg' | 'webp';
|
|
quality: number;
|
|
scale: number;
|
|
}): Promise<Blob | null>;
|
|
|
|
// @public (undocumented)
|
|
function Group({ children, size, }: {
|
|
children: any;
|
|
size?: 'medium' | 'small' | 'tiny' | 'wide';
|
|
}): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export class HandTool extends StateNode {
|
|
// (undocumented)
|
|
static children: () => (typeof Dragging | typeof Idle_8 | typeof Pointing_7)[];
|
|
// (undocumented)
|
|
static id: string;
|
|
// (undocumented)
|
|
static initial: string;
|
|
// (undocumented)
|
|
onDoubleClick: TLClickEvent;
|
|
// (undocumented)
|
|
onQuadrupleClick: TLClickEvent;
|
|
// (undocumented)
|
|
onTripleClick: TLClickEvent;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
function Header({ className, children }: {
|
|
className?: string;
|
|
children: any;
|
|
}): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export class HighlightShapeTool extends StateNode {
|
|
// (undocumented)
|
|
static children: () => (typeof Drawing | typeof Idle_2)[];
|
|
// (undocumented)
|
|
static id: string;
|
|
// (undocumented)
|
|
static initial: string;
|
|
// (undocumented)
|
|
onExit: () => void;
|
|
// (undocumented)
|
|
shapeType: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {
|
|
// (undocumented)
|
|
backgroundComponent(shape: TLHighlightShape): JSX.Element;
|
|
// (undocumented)
|
|
component(shape: TLHighlightShape): JSX.Element;
|
|
// (undocumented)
|
|
getDefaultProps(): TLHighlightShape['props'];
|
|
// (undocumented)
|
|
getGeometry(shape: TLHighlightShape): Circle2d | Polygon2d;
|
|
// (undocumented)
|
|
hideResizeHandles: (shape: TLHighlightShape) => boolean;
|
|
// (undocumented)
|
|
hideRotateHandle: (shape: TLHighlightShape) => boolean;
|
|
// (undocumented)
|
|
hideSelectionBoundsFg: (shape: TLHighlightShape) => boolean;
|
|
// (undocumented)
|
|
indicator(shape: TLHighlightShape): JSX.Element;
|
|
// (undocumented)
|
|
static migrations: Migrations;
|
|
// (undocumented)
|
|
onResize: TLOnResizeHandler<TLHighlightShape>;
|
|
// (undocumented)
|
|
static props: {
|
|
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow">;
|
|
size: EnumStyleProp<"l" | "m" | "s" | "xl">;
|
|
segments: ArrayOfValidator< {
|
|
type: "free" | "straight";
|
|
points: Vec2dModel[];
|
|
}>;
|
|
isComplete: Validator<boolean>;
|
|
isPen: Validator<boolean>;
|
|
};
|
|
// (undocumented)
|
|
toBackgroundSvg(shape: TLHighlightShape): SVGPathElement;
|
|
// (undocumented)
|
|
toSvg(shape: TLHighlightShape): SVGPathElement;
|
|
// (undocumented)
|
|
static type: "highlight";
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export const Icon: NamedExoticComponent<TLUiIconProps>;
|
|
|
|
// @public (undocumented)
|
|
export class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
|
|
// (undocumented)
|
|
canCrop: () => boolean;
|
|
// (undocumented)
|
|
component(shape: TLImageShape): JSX.Element;
|
|
// (undocumented)
|
|
getDefaultProps(): TLImageShape['props'];
|
|
// (undocumented)
|
|
indicator(shape: TLImageShape): JSX.Element | null;
|
|
// (undocumented)
|
|
isAspectRatioLocked: () => boolean;
|
|
// (undocumented)
|
|
static migrations: Migrations;
|
|
// (undocumented)
|
|
onDoubleClick: (shape: TLImageShape) => void;
|
|
// (undocumented)
|
|
onDoubleClickEdge: TLOnDoubleClickHandler<TLImageShape>;
|
|
// (undocumented)
|
|
static props: {
|
|
w: Validator<number>;
|
|
h: Validator<number>;
|
|
playing: Validator<boolean>;
|
|
url: Validator<string>;
|
|
assetId: Validator<TLAssetId | null>;
|
|
crop: Validator< {
|
|
topLeft: Vec2dModel;
|
|
bottomRight: Vec2dModel;
|
|
} | null>;
|
|
};
|
|
// (undocumented)
|
|
toSvg(shape: TLImageShape): Promise<SVGGElement>;
|
|
// (undocumented)
|
|
static type: "image";
|
|
}
|
|
|
|
// @public (undocumented)
|
|
function Indicator(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export const Input: React_3.ForwardRefExoticComponent<TLUiInputProps & React_3.RefAttributes<HTMLInputElement>>;
|
|
|
|
// @public (undocumented)
|
|
export function isGifAnimated(file: File): Promise<boolean>;
|
|
|
|
// @public (undocumented)
|
|
function Item({ noClose, ...props }: DropdownMenuItemProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export class LaserTool extends StateNode {
|
|
// (undocumented)
|
|
static children: () => (typeof Idle_9 | typeof Lasering)[];
|
|
// (undocumented)
|
|
static id: string;
|
|
// (undocumented)
|
|
static initial: string;
|
|
// (undocumented)
|
|
onEnter: () => void;
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export interface LegacyTldrawDocument {
|
|
// (undocumented)
|
|
assets: TDAssets;
|
|
// (undocumented)
|
|
id: string;
|
|
// (undocumented)
|
|
name: string;
|
|
// (undocumented)
|
|
pages: Record<string, TDPage>;
|
|
// (undocumented)
|
|
pageStates: Record<string, TLV1PageState>;
|
|
// (undocumented)
|
|
version: number;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class LineShapeTool extends StateNode {
|
|
// (undocumented)
|
|
static children: () => (typeof Idle_4 | typeof Pointing_3)[];
|
|
// (undocumented)
|
|
static id: string;
|
|
// (undocumented)
|
|
static initial: string;
|
|
// (undocumented)
|
|
shapeType: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class LineShapeUtil extends ShapeUtil<TLLineShape> {
|
|
// (undocumented)
|
|
component(shape: TLLineShape): JSX.Element | undefined;
|
|
// (undocumented)
|
|
getDefaultProps(): TLLineShape['props'];
|
|
// (undocumented)
|
|
getGeometry(shape: TLLineShape): CubicSpline2d | Polyline2d;
|
|
// (undocumented)
|
|
getHandles(shape: TLLineShape): TLHandle[];
|
|
// (undocumented)
|
|
getOutlineSegments(shape: TLLineShape): Vec2d[][];
|
|
// (undocumented)
|
|
hideResizeHandles: () => boolean;
|
|
// (undocumented)
|
|
hideRotateHandle: () => boolean;
|
|
// (undocumented)
|
|
hideSelectionBoundsBg: () => boolean;
|
|
// (undocumented)
|
|
hideSelectionBoundsFg: () => boolean;
|
|
// (undocumented)
|
|
indicator(shape: TLLineShape): JSX.Element;
|
|
// (undocumented)
|
|
static migrations: Migrations;
|
|
// (undocumented)
|
|
onHandleChange: TLOnHandleChangeHandler<TLLineShape>;
|
|
// (undocumented)
|
|
onResize: TLOnResizeHandler<TLLineShape>;
|
|
// (undocumented)
|
|
static props: {
|
|
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow">;
|
|
dash: EnumStyleProp<"dashed" | "dotted" | "draw" | "solid">;
|
|
size: EnumStyleProp<"l" | "m" | "s" | "xl">;
|
|
spline: EnumStyleProp<"cubic" | "line">;
|
|
handles: DictValidator<string, TLHandle>;
|
|
};
|
|
// (undocumented)
|
|
toSvg(shape: TLLineShape): SVGGElement;
|
|
// (undocumented)
|
|
static type: "line";
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function menuCustom(id: string, opts?: Partial<{
|
|
readonlyOk: boolean;
|
|
disabled: boolean;
|
|
}>): {
|
|
id: string;
|
|
type: "custom";
|
|
disabled: boolean;
|
|
readonlyOk: boolean;
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export function menuGroup(id: string, ...children: (false | TLUiMenuChild)[]): null | TLUiMenuGroup;
|
|
|
|
// @public (undocumented)
|
|
export function menuItem(actionItem: TLUiActionItem | TLUiToolItem, opts?: Partial<{
|
|
checked: boolean;
|
|
disabled: boolean;
|
|
}>): TLUiMenuItem;
|
|
|
|
// @public (undocumented)
|
|
export function menuSubmenu(id: string, label: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey, ...children: (false | TLUiMenuChild)[]): null | TLUiSubMenu;
|
|
|
|
// @public (undocumented)
|
|
export class NoteShapeTool extends StateNode {
|
|
// (undocumented)
|
|
static children: () => (typeof Idle_5 | typeof Pointing_4)[];
|
|
// (undocumented)
|
|
static id: string;
|
|
// (undocumented)
|
|
static initial: string;
|
|
// (undocumented)
|
|
shapeType: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
|
|
// (undocumented)
|
|
canEdit: () => boolean;
|
|
// (undocumented)
|
|
component(shape: TLNoteShape): JSX.Element;
|
|
// (undocumented)
|
|
getDefaultProps(): TLNoteShape['props'];
|
|
// (undocumented)
|
|
getGeometry(shape: TLNoteShape): Rectangle2d;
|
|
// (undocumented)
|
|
getHeight(shape: TLNoteShape): number;
|
|
// (undocumented)
|
|
hideResizeHandles: () => boolean;
|
|
// (undocumented)
|
|
hideSelectionBoundsFg: () => boolean;
|
|
// (undocumented)
|
|
indicator(shape: TLNoteShape): JSX.Element;
|
|
// (undocumented)
|
|
static migrations: Migrations;
|
|
// (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-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "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;
|
|
meta: JsonObject;
|
|
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-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "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;
|
|
meta: JsonObject;
|
|
id: TLShapeId;
|
|
typeName: "shape";
|
|
} | undefined;
|
|
// (undocumented)
|
|
onEditEnd: TLOnEditEndHandler<TLNoteShape>;
|
|
// (undocumented)
|
|
static props: {
|
|
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow">;
|
|
size: EnumStyleProp<"l" | "m" | "s" | "xl">;
|
|
font: EnumStyleProp<"draw" | "mono" | "sans" | "serif">;
|
|
align: EnumStyleProp<"end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start">;
|
|
verticalAlign: EnumStyleProp<"end" | "middle" | "start">;
|
|
growY: Validator<number>;
|
|
url: Validator<string>;
|
|
text: Validator<string>;
|
|
};
|
|
// (undocumented)
|
|
toSvg(shape: TLNoteShape, ctx: SvgExportContext): SVGGElement;
|
|
// (undocumented)
|
|
static type: "note";
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function OfflineIndicator(): JSX.Element;
|
|
|
|
// @internal (undocumented)
|
|
export function parseAndLoadDocument(editor: Editor, document: string, msg: (id: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey) => string, addToast: TLUiToastsContextType['addToast'], onV1FileLoad?: () => void, forceDarkMode?: boolean): Promise<void>;
|
|
|
|
// @public (undocumented)
|
|
export function parseTldrawJsonFile({ json, schema, }: {
|
|
schema: TLSchema;
|
|
json: string;
|
|
}): Result<TLStore, TldrawFileParseError>;
|
|
|
|
// @public (undocumented)
|
|
function RadioItem({ children, onSelect, ...rest }: DropdownMenuCheckboxItemProps): JSX.Element;
|
|
|
|
// @public
|
|
export function removeFrame(editor: Editor, ids: TLShapeId[]): void;
|
|
|
|
// @public (undocumented)
|
|
function Root({ id, children, modal, debugOpen, }: {
|
|
id: string;
|
|
children: any;
|
|
modal?: boolean;
|
|
debugOpen?: boolean;
|
|
}): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export class SelectTool extends StateNode {
|
|
// (undocumented)
|
|
static children: () => (typeof Brushing | typeof Crop | typeof Cropping | typeof DraggingHandle | typeof EditingShape | typeof Idle_11 | typeof PointingCanvas | typeof PointingCropHandle | typeof PointingHandle | typeof PointingResizeHandle | typeof PointingRotateHandle | typeof PointingSelection | typeof PointingShape | typeof Resizing | typeof Rotating | typeof ScribbleBrushing | typeof Translating)[];
|
|
// (undocumented)
|
|
static id: string;
|
|
// (undocumented)
|
|
static initial: string;
|
|
// (undocumented)
|
|
onExit: () => void;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function serializeTldrawJson(store: TLStore): Promise<string>;
|
|
|
|
// @public (undocumented)
|
|
export function serializeTldrawJsonBlob(store: TLStore): Promise<Blob>;
|
|
|
|
// @public (undocumented)
|
|
export function setDefaultEditorAssetUrls(assetUrls: TLEditorAssetUrls): void;
|
|
|
|
// @internal (undocumented)
|
|
export function setDefaultUiAssetUrls(urls: TLUiAssetUrls): void;
|
|
|
|
// @internal (undocumented)
|
|
export function Spinner(props: React_2.SVGProps<SVGSVGElement>): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
function Sub({ id, children }: {
|
|
id: string;
|
|
children: any;
|
|
}): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
function SubContent({ alignOffset, sideOffset, children, }: {
|
|
alignOffset?: number;
|
|
sideOffset?: number;
|
|
children: any;
|
|
}): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
function SubTrigger({ label, 'data-testid': testId, 'data-direction': dataDirection, }: {
|
|
label: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey;
|
|
'data-testid'?: string;
|
|
'data-direction'?: 'left' | 'right';
|
|
}): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export class TextShapeTool extends StateNode {
|
|
// (undocumented)
|
|
static children: () => (typeof Idle_6 | typeof Pointing_5)[];
|
|
// (undocumented)
|
|
static id: string;
|
|
// (undocumented)
|
|
static initial: string;
|
|
// (undocumented)
|
|
shapeType: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class TextShapeUtil extends ShapeUtil<TLTextShape> {
|
|
// (undocumented)
|
|
canEdit: () => boolean;
|
|
// (undocumented)
|
|
component(shape: TLTextShape): JSX.Element;
|
|
// (undocumented)
|
|
getDefaultProps(): TLTextShape['props'];
|
|
// (undocumented)
|
|
getGeometry(shape: TLTextShape): Rectangle2d;
|
|
// (undocumented)
|
|
getMinDimensions(shape: TLTextShape): {
|
|
height: number;
|
|
width: number;
|
|
};
|
|
// (undocumented)
|
|
indicator(shape: TLTextShape): JSX.Element | null;
|
|
// (undocumented)
|
|
isAspectRatioLocked: TLShapeUtilFlag<TLTextShape>;
|
|
// (undocumented)
|
|
static migrations: Migrations;
|
|
// (undocumented)
|
|
onBeforeCreate: (shape: TLTextShape) => {
|
|
x: number;
|
|
y: number;
|
|
type: "text";
|
|
rotation: number;
|
|
index: string;
|
|
parentId: TLParentId;
|
|
isLocked: boolean;
|
|
opacity: number;
|
|
props: {
|
|
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-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start";
|
|
w: number;
|
|
text: string;
|
|
scale: number;
|
|
autoSize: boolean;
|
|
};
|
|
meta: JsonObject;
|
|
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-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start";
|
|
text: string;
|
|
scale: number;
|
|
autoSize: boolean;
|
|
};
|
|
type: "text";
|
|
rotation: number;
|
|
index: string;
|
|
parentId: TLParentId;
|
|
isLocked: boolean;
|
|
opacity: number;
|
|
meta: JsonObject;
|
|
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)
|
|
static props: {
|
|
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow">;
|
|
size: EnumStyleProp<"l" | "m" | "s" | "xl">;
|
|
font: EnumStyleProp<"draw" | "mono" | "sans" | "serif">;
|
|
align: EnumStyleProp<"end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start">;
|
|
w: Validator<number>;
|
|
text: Validator<string>;
|
|
scale: Validator<number>;
|
|
autoSize: Validator<boolean>;
|
|
};
|
|
// (undocumented)
|
|
toSvg(shape: TLTextShape, ctx: SvgExportContext): SVGGElement;
|
|
// (undocumented)
|
|
static type: "text";
|
|
}
|
|
|
|
// @public (undocumented)
|
|
function Title({ className, children }: {
|
|
className?: string;
|
|
children: any;
|
|
}): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function Tldraw(props: TldrawProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export const TLDRAW_FILE_EXTENSION: ".tldr";
|
|
|
|
// @public (undocumented)
|
|
export function TldrawCropHandles({ size, width, height, hideAlternateHandles, }: TldrawCropHandlesProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export interface TldrawCropHandlesProps {
|
|
// (undocumented)
|
|
height: number;
|
|
// (undocumented)
|
|
hideAlternateHandles: boolean;
|
|
// (undocumented)
|
|
size: number;
|
|
// (undocumented)
|
|
width: number;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TldrawFile {
|
|
// (undocumented)
|
|
records: UnknownRecord[];
|
|
// (undocumented)
|
|
schema: SerializedSchema;
|
|
// (undocumented)
|
|
tldrawFileFormatVersion: number;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export const TldrawHandles: TLHandlesComponent;
|
|
|
|
// @public (undocumented)
|
|
export const TldrawHoveredShapeIndicator: TLHoveredShapeIndicatorComponent;
|
|
|
|
// @public (undocumented)
|
|
export type TldrawProps = TldrawEditorBaseProps & ({
|
|
store: TLStore | TLStoreWithStatus;
|
|
} | {
|
|
store?: undefined;
|
|
persistenceKey?: string;
|
|
sessionId?: string;
|
|
defaultName?: string;
|
|
snapshot?: StoreSnapshot<TLRecord>;
|
|
}) & TldrawUiProps & Partial<TLExternalContentProps>;
|
|
|
|
// @public (undocumented)
|
|
export const TldrawScribble: TLScribbleComponent;
|
|
|
|
// @public (undocumented)
|
|
export const TldrawSelectionBackground: TLSelectionBackgroundComponent;
|
|
|
|
// @public (undocumented)
|
|
export const TldrawSelectionForeground: TLSelectionForegroundComponent;
|
|
|
|
// @public (undocumented)
|
|
export const TldrawUi: React_2.NamedExoticComponent<TldrawUiProps>;
|
|
|
|
// @public
|
|
export interface TldrawUiBaseProps {
|
|
assetUrls?: TLUiAssetUrlOverrides;
|
|
children?: ReactNode;
|
|
hideUi?: boolean;
|
|
renderDebugMenuItems?: () => React_2.ReactNode;
|
|
shareZone?: ReactNode;
|
|
// @internal
|
|
topZone?: ReactNode;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiContextProvider({ overrides, assetUrls, onUiEvent, forceMobile, children, }: TldrawUiContextProviderProps): JSX.Element;
|
|
|
|
// @public
|
|
export interface TldrawUiContextProviderProps {
|
|
assetUrls?: RecursivePartial<TLUiAssetUrls>;
|
|
children?: any;
|
|
forceMobile?: boolean;
|
|
onUiEvent?: TLUiEventHandler;
|
|
overrides?: TLUiOverrides | TLUiOverrides[];
|
|
}
|
|
|
|
// @public
|
|
export type TldrawUiProps = TldrawUiBaseProps & TldrawUiContextProviderProps;
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiActionItem<TransationKey extends string = string, IconType extends string = string> {
|
|
// (undocumented)
|
|
checkbox?: boolean;
|
|
// (undocumented)
|
|
contextMenuLabel?: TransationKey;
|
|
// (undocumented)
|
|
icon?: IconType;
|
|
// (undocumented)
|
|
id: string;
|
|
// (undocumented)
|
|
kbd?: string;
|
|
// (undocumented)
|
|
label?: TransationKey;
|
|
// (undocumented)
|
|
menuLabel?: TransationKey;
|
|
// (undocumented)
|
|
onSelect: (source: TLUiEventSource) => Promise<void> | void;
|
|
// (undocumented)
|
|
readonlyOk: boolean;
|
|
// (undocumented)
|
|
shortcutsLabel?: TransationKey;
|
|
// (undocumented)
|
|
title?: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TLUiActionsContextType = Record<string, TLUiActionItem>;
|
|
|
|
// @public (undocumented)
|
|
export type TLUiActionsMenuSchemaContextType = TLUiMenuSchema;
|
|
|
|
// @public (undocumented)
|
|
export type TLUiAssetUrlOverrides = RecursivePartial<TLUiAssetUrls>;
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiButtonProps extends React_3.HTMLAttributes<HTMLButtonElement> {
|
|
// (undocumented)
|
|
disabled?: boolean;
|
|
// (undocumented)
|
|
icon?: Exclude<string, TLUiIconType> | TLUiIconType;
|
|
// (undocumented)
|
|
iconLeft?: Exclude<string, TLUiIconType> | TLUiIconType;
|
|
// (undocumented)
|
|
invertIcon?: boolean;
|
|
// (undocumented)
|
|
isChecked?: boolean;
|
|
// (undocumented)
|
|
kbd?: string;
|
|
// (undocumented)
|
|
label?: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey;
|
|
// (undocumented)
|
|
loading?: boolean;
|
|
// (undocumented)
|
|
smallIcon?: boolean;
|
|
// (undocumented)
|
|
spinner?: boolean;
|
|
// (undocumented)
|
|
type: 'danger' | 'help' | 'icon' | 'low' | 'menu' | 'normal' | 'primary' | 'tool';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiContextMenuProps {
|
|
// (undocumented)
|
|
children: any;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TLUiContextTTLUiMenuSchemaContextType = TLUiMenuSchema;
|
|
|
|
// @public (undocumented)
|
|
export type TLUiCustomMenuItem = {
|
|
id: string;
|
|
type: 'custom';
|
|
disabled: boolean;
|
|
readonlyOk: boolean;
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiDialog {
|
|
// (undocumented)
|
|
component: (props: TLUiDialogProps) => any;
|
|
// (undocumented)
|
|
id: string;
|
|
// (undocumented)
|
|
onClose?: () => void;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiDialogProps {
|
|
// (undocumented)
|
|
onClose: () => void;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TLUiDialogsContextType = {
|
|
addDialog: (dialog: Omit<TLUiDialog, 'id'> & {
|
|
id?: string;
|
|
}) => string;
|
|
removeDialog: (id: string) => string;
|
|
updateDialog: (id: string, newDialogData: Partial<TLUiDialog>) => string;
|
|
clearDialogs: () => void;
|
|
dialogs: TLUiDialog[];
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export type TLUiEventContextType = TLUiEventHandler<keyof TLUiEventMap>;
|
|
|
|
// @public (undocumented)
|
|
export type TLUiEventHandler<T extends keyof TLUiEventMap = keyof TLUiEventMap> = (name: T, data: Join<{
|
|
source: TLUiEventSource;
|
|
}, TLUiEventMap[T]>) => void;
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiEventMap {
|
|
// (undocumented)
|
|
'align-shapes': {
|
|
operation: 'bottom' | 'center-horizontal' | 'center-vertical' | 'left' | 'right' | 'top';
|
|
};
|
|
// (undocumented)
|
|
'close-menu': {
|
|
id: string;
|
|
};
|
|
// (undocumented)
|
|
'convert-to-bookmark': null;
|
|
// (undocumented)
|
|
'convert-to-embed': null;
|
|
// (undocumented)
|
|
'copy-as': {
|
|
format: 'json' | 'png' | 'svg';
|
|
};
|
|
// (undocumented)
|
|
'create-new-project': null;
|
|
// (undocumented)
|
|
'delete-shapes': null;
|
|
// (undocumented)
|
|
'distribute-shapes': {
|
|
operation: 'horizontal' | 'vertical';
|
|
};
|
|
// (undocumented)
|
|
'duplicate-shapes': null;
|
|
// (undocumented)
|
|
'edit-link': null;
|
|
// (undocumented)
|
|
'exit-pen-mode': null;
|
|
// (undocumented)
|
|
'export-as': {
|
|
format: 'json' | 'png' | 'svg';
|
|
};
|
|
// (undocumented)
|
|
'fit-frame-to-content': null;
|
|
// (undocumented)
|
|
'flip-shapes': {
|
|
operation: 'horizontal' | 'vertical';
|
|
};
|
|
// (undocumented)
|
|
'group-shapes': null;
|
|
// (undocumented)
|
|
'insert-embed': null;
|
|
// (undocumented)
|
|
'insert-media': null;
|
|
// (undocumented)
|
|
'open-cursor-chat': null;
|
|
// (undocumented)
|
|
'open-embed-link': null;
|
|
// (undocumented)
|
|
'open-file': null;
|
|
// (undocumented)
|
|
'open-menu': {
|
|
id: string;
|
|
};
|
|
// (undocumented)
|
|
'pack-shapes': null;
|
|
// (undocumented)
|
|
'remove-frame': null;
|
|
// (undocumented)
|
|
'reorder-shapes': {
|
|
operation: 'backward' | 'forward' | 'toBack' | 'toFront';
|
|
};
|
|
// (undocumented)
|
|
'reset-zoom': null;
|
|
// (undocumented)
|
|
'rotate-ccw': null;
|
|
// (undocumented)
|
|
'rotate-cw': null;
|
|
// (undocumented)
|
|
'save-project-to-file': null;
|
|
// (undocumented)
|
|
'select-all-shapes': null;
|
|
// (undocumented)
|
|
'select-none-shapes': null;
|
|
// (undocumented)
|
|
'select-tool': {
|
|
id: string;
|
|
};
|
|
// (undocumented)
|
|
'stack-shapes': {
|
|
operation: 'horizontal' | 'vertical';
|
|
};
|
|
// (undocumented)
|
|
'stop-following': null;
|
|
// (undocumented)
|
|
'stretch-shapes': {
|
|
operation: 'horizontal' | 'vertical';
|
|
};
|
|
// (undocumented)
|
|
'toggle-auto-size': null;
|
|
// (undocumented)
|
|
'toggle-dark-mode': null;
|
|
// (undocumented)
|
|
'toggle-debug-mode': null;
|
|
// (undocumented)
|
|
'toggle-edge-scrolling': null;
|
|
// (undocumented)
|
|
'toggle-focus-mode': null;
|
|
// (undocumented)
|
|
'toggle-grid-mode': null;
|
|
// (undocumented)
|
|
'toggle-lock': null;
|
|
// (undocumented)
|
|
'toggle-reduce-motion': null;
|
|
// (undocumented)
|
|
'toggle-snap-mode': null;
|
|
// (undocumented)
|
|
'toggle-tool-lock': null;
|
|
// (undocumented)
|
|
'toggle-transparent': null;
|
|
// (undocumented)
|
|
'ungroup-shapes': null;
|
|
// (undocumented)
|
|
'unlock-all': null;
|
|
// (undocumented)
|
|
'zoom-in': null;
|
|
// (undocumented)
|
|
'zoom-into-view': null;
|
|
// (undocumented)
|
|
'zoom-out': null;
|
|
// (undocumented)
|
|
'zoom-to-content': null;
|
|
// (undocumented)
|
|
'zoom-to-fit': null;
|
|
// (undocumented)
|
|
'zoom-to-selection': null;
|
|
// (undocumented)
|
|
'zoom-tool': null;
|
|
// (undocumented)
|
|
copy: null;
|
|
// (undocumented)
|
|
cut: null;
|
|
// (undocumented)
|
|
paste: null;
|
|
// (undocumented)
|
|
print: null;
|
|
// (undocumented)
|
|
redo: null;
|
|
// (undocumented)
|
|
undo: null;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TLUiEventSource = 'actions-menu' | 'context-menu' | 'debug-panel' | 'dialog' | 'export-menu' | 'help-menu' | 'helper-buttons' | 'kbd' | 'menu' | 'navigation-zone' | 'page-menu' | 'people-menu' | 'quick-actions' | 'share-menu' | 'toolbar' | 'unknown' | 'zoom-menu';
|
|
|
|
// @public (undocumented)
|
|
export type TLUiHelpMenuSchemaContextType = TLUiMenuSchema;
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiIconProps extends React.HTMLProps<HTMLDivElement> {
|
|
// (undocumented)
|
|
children?: undefined;
|
|
// (undocumented)
|
|
color?: string;
|
|
// (undocumented)
|
|
crossOrigin?: 'anonymous' | 'use-credentials';
|
|
// (undocumented)
|
|
icon: Exclude<string, TLUiIconType> | TLUiIconType;
|
|
// (undocumented)
|
|
invertIcon?: boolean;
|
|
// (undocumented)
|
|
small?: boolean;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TLUiIconType = 'align-bottom-center' | 'align-bottom-left' | 'align-bottom-right' | 'align-bottom' | 'align-center-center' | 'align-center-horizontal' | 'align-center-left' | 'align-center-right' | 'align-center-vertical' | 'align-left' | 'align-right' | 'align-top-center' | 'align-top-left' | 'align-top-right' | 'align-top' | 'arrow-left' | 'arrowhead-arrow' | 'arrowhead-bar' | 'arrowhead-diamond' | 'arrowhead-dot' | 'arrowhead-none' | 'arrowhead-square' | 'arrowhead-triangle-inverted' | 'arrowhead-triangle' | 'aspect-ratio' | 'avatar' | 'blob' | 'bring-forward' | 'bring-to-front' | 'check' | 'checkbox-checked' | 'checkbox-empty' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'chevrons-ne' | 'chevrons-sw' | 'clipboard-copied' | 'clipboard-copy' | 'code' | 'collab' | 'color' | 'comment' | 'cross-2' | 'cross' | 'dash-dashed' | 'dash-dotted' | 'dash-draw' | 'dash-solid' | 'discord' | 'distribute-horizontal' | 'distribute-vertical' | 'dot' | 'dots-horizontal' | 'dots-vertical' | 'drag-handle-dots' | 'duplicate' | 'edit' | 'external-link' | 'file' | 'fill-none' | 'fill-pattern' | 'fill-semi' | 'fill-solid' | 'follow' | 'following' | 'font-draw' | 'font-mono' | 'font-sans' | 'font-serif' | 'geo-arrow-down' | 'geo-arrow-left' | 'geo-arrow-right' | 'geo-arrow-up' | 'geo-check-box' | 'geo-cloud' | 'geo-diamond' | 'geo-ellipse' | 'geo-hexagon' | 'geo-octagon' | 'geo-oval' | 'geo-pentagon' | 'geo-rectangle' | 'geo-rhombus-2' | 'geo-rhombus' | 'geo-star' | 'geo-trapezoid' | 'geo-triangle' | 'geo-x-box' | 'github' | 'group' | 'hidden' | 'image' | 'info-circle' | 'leading' | 'link' | 'lock-small' | 'lock' | 'menu' | 'minus' | 'mixed' | 'pack' | 'page' | 'plus' | 'question-mark-circle' | 'question-mark' | 'redo' | 'reset-zoom' | 'rotate-ccw' | 'rotate-cw' | 'ruler' | 'search' | 'send-backward' | 'send-to-back' | 'settings-horizontal' | 'settings-vertical-1' | 'settings-vertical' | 'share-1' | 'share-2' | 'size-extra-large' | 'size-large' | 'size-medium' | 'size-small' | 'spline-cubic' | 'spline-line' | 'stack-horizontal' | 'stack-vertical' | 'status-offline' | 'status-online' | 'stretch-horizontal' | 'stretch-vertical' | 'text-align-center' | 'text-align-justify' | 'text-align-left' | 'text-align-right' | 'tool-arrow' | 'tool-embed' | 'tool-eraser' | 'tool-frame' | 'tool-hand' | 'tool-highlight' | 'tool-laser' | 'tool-line' | 'tool-media' | 'tool-note' | 'tool-pencil' | 'tool-pointer' | 'tool-text' | 'trash' | 'triangle-down' | 'triangle-up' | 'twitter' | 'undo' | 'ungroup' | 'unlock-small' | 'unlock' | 'vertical-align-center' | 'vertical-align-end' | 'vertical-align-start' | 'visible' | 'warning-triangle' | 'zoom-in' | 'zoom-out';
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiInputProps {
|
|
// (undocumented)
|
|
autofocus?: boolean;
|
|
// (undocumented)
|
|
autoselect?: boolean;
|
|
// (undocumented)
|
|
children?: any;
|
|
// (undocumented)
|
|
className?: string;
|
|
// (undocumented)
|
|
defaultValue?: string;
|
|
// (undocumented)
|
|
disabled?: boolean;
|
|
// (undocumented)
|
|
icon?: Exclude<string, TLUiIconType> | TLUiIconType;
|
|
// (undocumented)
|
|
iconLeft?: Exclude<string, TLUiIconType> | TLUiIconType;
|
|
// (undocumented)
|
|
label?: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey;
|
|
// (undocumented)
|
|
onBlur?: (value: string) => void;
|
|
// (undocumented)
|
|
onCancel?: (value: string) => void;
|
|
// (undocumented)
|
|
onComplete?: (value: string) => void;
|
|
// (undocumented)
|
|
onValueChange?: (value: string) => void;
|
|
// (undocumented)
|
|
placeholder?: string;
|
|
shouldManuallyMaintainScrollPositionWhenFocused?: boolean;
|
|
// (undocumented)
|
|
value?: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TLUiKeyboardShortcutsSchemaContextType = TLUiMenuSchema;
|
|
|
|
// @public (undocumented)
|
|
export type TLUiKeyboardShortcutsSchemaProviderProps = {
|
|
overrides?: (editor: Editor, schema: TLUiKeyboardShortcutsSchemaContextType, more: {
|
|
tools: TLUiToolsContextType;
|
|
actions: TLUiActionsContextType;
|
|
}) => TLUiKeyboardShortcutsSchemaContextType;
|
|
children: any;
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export type TLUiMenuChild<TranslationKey extends string = string> = null | TLUiCustomMenuItem | TLUiMenuGroup | TLUiMenuItem | TLUiSubMenu<TranslationKey>;
|
|
|
|
// @public (undocumented)
|
|
export type TLUiMenuGroup = {
|
|
id: string;
|
|
type: 'group';
|
|
checkbox: boolean;
|
|
disabled: boolean;
|
|
readonlyOk: boolean;
|
|
children: TLUiMenuChild[];
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export type TLUiMenuItem = {
|
|
id: string;
|
|
type: 'item';
|
|
readonlyOk: boolean;
|
|
actionItem: TLUiActionItem;
|
|
disabled: boolean;
|
|
checked: boolean;
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export type TLUiMenuSchema = (TLUiCustomMenuItem | TLUiMenuGroup | TLUiMenuItem)[];
|
|
|
|
// @public (undocumented)
|
|
export type TLUiMenuSchemaContextType = TLUiMenuSchema;
|
|
|
|
// @public (undocumented)
|
|
export type TLUiMenuSchemaProviderProps = {
|
|
overrides?: (editor: Editor, schema: TLUiMenuSchemaContextType, helpers: {
|
|
actions: ReturnType<typeof useActions>;
|
|
noneSelected: boolean;
|
|
oneSelected: boolean;
|
|
twoSelected: boolean;
|
|
threeSelected: boolean;
|
|
}) => TLUiMenuSchemaContextType;
|
|
children: any;
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export type TLUiOverrides = Partial<{
|
|
actionsMenu: WithDefaultHelpers<NonNullable<ActionsMenuSchemaProviderProps['overrides']>>;
|
|
actions: WithDefaultHelpers<NonNullable<ActionsProviderProps['overrides']>>;
|
|
contextMenu: WithDefaultHelpers<NonNullable<TLUiContextMenuSchemaProviderProps['overrides']>>;
|
|
helpMenu: WithDefaultHelpers<NonNullable<TLUiHelpMenuSchemaProviderProps['overrides']>>;
|
|
menu: WithDefaultHelpers<NonNullable<TLUiMenuSchemaProviderProps['overrides']>>;
|
|
toolbar: WithDefaultHelpers<NonNullable<TLUiToolbarSchemaProviderProps['overrides']>>;
|
|
keyboardShortcutsMenu: WithDefaultHelpers<NonNullable<TLUiKeyboardShortcutsSchemaProviderProps['overrides']>>;
|
|
tools: WithDefaultHelpers<NonNullable<TLUiToolsProviderProps['overrides']>>;
|
|
translations: TLUiTranslationProviderProps['overrides'];
|
|
}>;
|
|
|
|
// @public (undocumented)
|
|
export type TLUiSubMenu<TranslationKey extends string = string> = {
|
|
id: string;
|
|
type: 'submenu';
|
|
label: TranslationKey;
|
|
disabled: boolean;
|
|
readonlyOk: boolean;
|
|
children: TLUiMenuChild[];
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiToast {
|
|
// (undocumented)
|
|
actions?: TLUiToastAction[];
|
|
// (undocumented)
|
|
closeLabel?: string;
|
|
// (undocumented)
|
|
description?: string;
|
|
// (undocumented)
|
|
icon?: TLUiIconType;
|
|
// (undocumented)
|
|
id: string;
|
|
// (undocumented)
|
|
keepOpen?: boolean;
|
|
// (undocumented)
|
|
title?: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiToastAction {
|
|
// (undocumented)
|
|
label: string;
|
|
// (undocumented)
|
|
onClick: () => void;
|
|
// (undocumented)
|
|
type: 'danger' | 'normal' | 'primary';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TLUiToastsContextType = {
|
|
addToast: (toast: Omit<TLUiToast, 'id'> & {
|
|
id?: string;
|
|
}) => string;
|
|
removeToast: (id: TLUiToast['id']) => string;
|
|
clearToasts: () => void;
|
|
toasts: TLUiToast[];
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export type TLUiToolbarItem = {
|
|
id: string;
|
|
type: 'item';
|
|
readonlyOk: boolean;
|
|
toolItem: TLUiToolItem;
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export type TLUiToolbarSchemaContextType = TLUiToolbarItem[];
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiToolItem<TranslationKey extends string = string, IconType extends string = string> {
|
|
// (undocumented)
|
|
icon: IconType;
|
|
// (undocumented)
|
|
id: string;
|
|
// (undocumented)
|
|
kbd?: string;
|
|
// (undocumented)
|
|
label: TranslationKey;
|
|
// (undocumented)
|
|
meta?: {
|
|
[key: string]: any;
|
|
};
|
|
// (undocumented)
|
|
onSelect: (source: TLUiEventSource) => void;
|
|
// (undocumented)
|
|
readonlyOk: boolean;
|
|
// (undocumented)
|
|
shortcutsLabel?: TranslationKey;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TLUiToolsContextType = Record<string, TLUiToolItem>;
|
|
|
|
// @public (undocumented)
|
|
export type TLUiToolsProviderProps = {
|
|
overrides?: (editor: Editor, tools: TLUiToolsContextType, helpers: {
|
|
insertMedia: () => void;
|
|
}) => TLUiToolsContextType;
|
|
children: any;
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export type TLUiTranslation = {
|
|
readonly locale: string;
|
|
readonly label: string;
|
|
readonly messages: Record<TLUiTranslationKey, string>;
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export type TLUiTranslationContextType = TLUiTranslation;
|
|
|
|
// @public (undocumented)
|
|
export type TLUiTranslationKey = 'action.align-bottom' | 'action.align-center-horizontal.short' | 'action.align-center-horizontal' | 'action.align-center-vertical.short' | 'action.align-center-vertical' | 'action.align-left' | 'action.align-right' | 'action.align-top' | 'action.back-to-content' | 'action.bring-forward' | 'action.bring-to-front' | 'action.convert-to-bookmark' | 'action.convert-to-embed' | 'action.copy-as-json.short' | 'action.copy-as-json' | 'action.copy-as-png.short' | 'action.copy-as-png' | 'action.copy-as-svg.short' | 'action.copy-as-svg' | 'action.copy' | 'action.cut' | 'action.delete' | 'action.distribute-horizontal.short' | 'action.distribute-horizontal' | 'action.distribute-vertical.short' | 'action.distribute-vertical' | 'action.duplicate' | 'action.edit-link' | 'action.exit-pen-mode' | 'action.export-as-json.short' | 'action.export-as-json' | 'action.export-as-png.short' | 'action.export-as-png' | 'action.export-as-svg.short' | 'action.export-as-svg' | 'action.fit-frame-to-content' | 'action.flip-horizontal.short' | 'action.flip-horizontal' | 'action.flip-vertical.short' | 'action.flip-vertical' | 'action.fork-project' | 'action.group' | 'action.insert-embed' | 'action.insert-media' | 'action.leave-shared-project' | 'action.new-project' | 'action.new-shared-project' | 'action.open-cursor-chat' | 'action.open-embed-link' | 'action.open-file' | 'action.pack' | 'action.paste' | 'action.print' | 'action.redo' | 'action.remove-frame' | 'action.rotate-ccw' | 'action.rotate-cw' | 'action.save-copy' | 'action.select-all' | 'action.select-none' | 'action.send-backward' | 'action.send-to-back' | 'action.share-project' | 'action.stack-horizontal.short' | 'action.stack-horizontal' | 'action.stack-vertical.short' | 'action.stack-vertical' | 'action.stop-following' | 'action.stretch-horizontal.short' | 'action.stretch-horizontal' | 'action.stretch-vertical.short' | 'action.stretch-vertical' | 'action.toggle-auto-size' | 'action.toggle-dark-mode.menu' | 'action.toggle-dark-mode' | 'action.toggle-debug-mode.menu' | 'action.toggle-debug-mode' | 'action.toggle-edge-scrolling.menu' | 'action.toggle-edge-scrolling' | 'action.toggle-focus-mode.menu' | 'action.toggle-focus-mode' | 'action.toggle-grid.menu' | 'action.toggle-grid' | 'action.toggle-lock' | 'action.toggle-reduce-motion.menu' | 'action.toggle-reduce-motion' | 'action.toggle-snap-mode.menu' | 'action.toggle-snap-mode' | 'action.toggle-tool-lock.menu' | 'action.toggle-tool-lock' | 'action.toggle-transparent.context-menu' | 'action.toggle-transparent.menu' | 'action.toggle-transparent' | 'action.undo' | 'action.ungroup' | 'action.unlock-all' | 'action.zoom-in' | 'action.zoom-out' | 'action.zoom-to-100' | 'action.zoom-to-fit' | 'action.zoom-to-selection' | 'actions-menu.title' | 'align-style.end' | 'align-style.justify' | 'align-style.middle' | 'align-style.start' | 'arrowheadEnd-style.arrow' | 'arrowheadEnd-style.bar' | 'arrowheadEnd-style.diamond' | 'arrowheadEnd-style.dot' | 'arrowheadEnd-style.inverted' | 'arrowheadEnd-style.none' | 'arrowheadEnd-style.pipe' | 'arrowheadEnd-style.square' | 'arrowheadEnd-style.triangle' | 'arrowheadStart-style.arrow' | 'arrowheadStart-style.bar' | 'arrowheadStart-style.diamond' | 'arrowheadStart-style.dot' | 'arrowheadStart-style.inverted' | 'arrowheadStart-style.none' | 'arrowheadStart-style.pipe' | 'arrowheadStart-style.square' | 'arrowheadStart-style.triangle' | 'color-style.black' | 'color-style.blue' | 'color-style.green' | 'color-style.grey' | 'color-style.light-blue' | 'color-style.light-green' | 'color-style.light-red' | 'color-style.light-violet' | 'color-style.orange' | 'color-style.red' | 'color-style.violet' | 'color-style.yellow' | 'context-menu.arrange' | 'context-menu.copy-as' | 'context-menu.export-as' | 'context-menu.move-to-page' | 'context-menu.reorder' | 'context.pages.new-page' | 'cursor-chat.type-to-chat' | 'dash-style.dashed' | 'dash-style.dotted' | 'dash-style.draw' | 'dash-style.solid' | 'debug-panel.more' | 'edit-link-dialog.cancel' | 'edit-link-dialog.clear' | 'edit-link-dialog.detail' | 'edit-link-dialog.invalid-url' | 'edit-link-dialog.save' | 'edit-link-dialog.title' | 'edit-link-dialog.url' | 'edit-pages-dialog.move-down' | 'edit-pages-dialog.move-up' | 'embed-dialog.back' | 'embed-dialog.cancel' | 'embed-dialog.create' | 'embed-dialog.instruction' | 'embed-dialog.invalid-url' | 'embed-dialog.title' | 'embed-dialog.url' | 'file-system.confirm-clear.cancel' | 'file-system.confirm-clear.continue' | 'file-system.confirm-clear.description' | 'file-system.confirm-clear.dont-show-again' | 'file-system.confirm-clear.title' | 'file-system.confirm-open.cancel' | 'file-system.confirm-open.description' | 'file-system.confirm-open.dont-show-again' | 'file-system.confirm-open.open' | 'file-system.confirm-open.title' | 'file-system.file-open-error.file-format-version-too-new' | 'file-system.file-open-error.generic-corrupted-file' | 'file-system.file-open-error.not-a-tldraw-file' | 'file-system.file-open-error.title' | 'file-system.shared-document-file-open-error.description' | 'file-system.shared-document-file-open-error.title' | 'fill-style.none' | 'fill-style.pattern' | 'fill-style.semi' | 'fill-style.solid' | 'focus-mode.toggle-focus-mode' | 'font-style.draw' | 'font-style.mono' | 'font-style.sans' | 'font-style.serif' | 'geo-style.arrow-down' | 'geo-style.arrow-left' | 'geo-style.arrow-right' | 'geo-style.arrow-up' | 'geo-style.check-box' | 'geo-style.cloud' | 'geo-style.diamond' | 'geo-style.ellipse' | 'geo-style.hexagon' | 'geo-style.octagon' | 'geo-style.oval' | 'geo-style.pentagon' | 'geo-style.rectangle' | 'geo-style.rhombus-2' | 'geo-style.rhombus' | 'geo-style.star' | 'geo-style.trapezoid' | 'geo-style.triangle' | 'geo-style.x-box' | 'help-menu.about' | 'help-menu.discord' | 'help-menu.github' | 'help-menu.keyboard-shortcuts' | 'help-menu.title' | 'help-menu.twitter' | 'home-project-dialog.description' | 'home-project-dialog.ok' | 'home-project-dialog.title' | 'menu.copy-as' | 'menu.edit' | 'menu.export-as' | 'menu.file' | 'menu.language' | 'menu.preferences' | 'menu.title' | 'menu.view' | 'navigation-zone.toggle-minimap' | 'navigation-zone.zoom' | 'opacity-style.0.1' | 'opacity-style.0.25' | 'opacity-style.0.5' | 'opacity-style.0.75' | 'opacity-style.1' | 'page-menu.create-new-page' | 'page-menu.edit-done' | 'page-menu.edit-start' | 'page-menu.go-to-page' | 'page-menu.max-page-count-reached' | 'page-menu.new-page-initial-name' | 'page-menu.submenu.delete' | 'page-menu.submenu.duplicate-page' | 'page-menu.submenu.move-down' | 'page-menu.submenu.move-up' | 'page-menu.submenu.rename' | 'page-menu.submenu.title' | 'page-menu.title' | 'people-menu.change-color' | 'people-menu.change-name' | 'people-menu.follow' | 'people-menu.following' | 'people-menu.invite' | 'people-menu.leading' | 'people-menu.title' | 'people-menu.user' | 'rename-project-dialog.cancel' | 'rename-project-dialog.rename' | 'rename-project-dialog.title' | 'share-menu.copy-link-note' | 'share-menu.copy-link' | 'share-menu.copy-readonly-link-note' | 'share-menu.copy-readonly-link' | 'share-menu.create-snapshot-link' | 'share-menu.default-project-name' | 'share-menu.fork-note' | 'share-menu.offline-note' | 'share-menu.project-too-large' | 'share-menu.readonly-link' | 'share-menu.save-note' | 'share-menu.share-project' | 'share-menu.snapshot-link-note' | 'share-menu.title' | 'share-menu.upload-failed' | 'sharing.confirm-leave.cancel' | 'sharing.confirm-leave.description' | 'sharing.confirm-leave.dont-show-again' | 'sharing.confirm-leave.leave' | 'sharing.confirm-leave.title' | 'shortcuts-dialog.collaboration' | 'shortcuts-dialog.edit' | 'shortcuts-dialog.file' | 'shortcuts-dialog.preferences' | 'shortcuts-dialog.title' | 'shortcuts-dialog.tools' | 'shortcuts-dialog.transform' | 'shortcuts-dialog.view' | 'size-style.l' | 'size-style.m' | 'size-style.s' | 'size-style.xl' | 'spline-style.cubic' | 'spline-style.line' | 'status.offline' | 'status.online' | 'style-panel.align' | 'style-panel.arrowhead-end' | 'style-panel.arrowhead-start' | 'style-panel.arrowheads' | 'style-panel.color' | 'style-panel.dash' | 'style-panel.fill' | 'style-panel.font' | 'style-panel.geo' | 'style-panel.mixed' | 'style-panel.opacity' | 'style-panel.position' | 'style-panel.size' | 'style-panel.spline' | 'style-panel.title' | 'style-panel.vertical-align' | 'toast.close' | 'toast.error.copy-fail.desc' | 'toast.error.copy-fail.title' | 'toast.error.export-fail.desc' | 'toast.error.export-fail.title' | 'tool-panel.drawing' | 'tool-panel.more' | 'tool-panel.shapes' | 'tool.arrow-down' | 'tool.arrow-left' | 'tool.arrow-right' | 'tool.arrow-up' | 'tool.arrow' | 'tool.asset' | 'tool.check-box' | 'tool.cloud' | 'tool.diamond' | 'tool.draw' | 'tool.ellipse' | 'tool.embed' | 'tool.eraser' | 'tool.frame' | 'tool.hand' | 'tool.hexagon' | 'tool.highlight' | 'tool.laser' | 'tool.line' | 'tool.note' | 'tool.octagon' | 'tool.oval' | 'tool.pentagon' | 'tool.rectangle' | 'tool.rhombus' | 'tool.select' | 'tool.star' | 'tool.text' | 'tool.trapezoid' | 'tool.triangle' | 'tool.x-box' | 'vscode.file-open.backup-failed' | 'vscode.file-open.backup-saved' | 'vscode.file-open.backup' | 'vscode.file-open.desc' | 'vscode.file-open.dont-show-again' | 'vscode.file-open.open';
|
|
|
|
// @public (undocumented)
|
|
export function toolbarItem(toolItem: TLUiToolItem): TLUiToolbarItem;
|
|
|
|
// @public (undocumented)
|
|
function Trigger({ children, 'data-testid': testId, }: {
|
|
children: any;
|
|
'data-testid'?: string;
|
|
}): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export const truncateStringWithEllipsis: (str: string, maxLength: number) => string;
|
|
|
|
// @public (undocumented)
|
|
export function UiEventsProvider({ onEvent, children }: EventsProviderProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function useActions(): TLUiActionsContextType;
|
|
|
|
// @public (undocumented)
|
|
export function useActionsMenuSchema(): TLUiMenuSchema;
|
|
|
|
// @internal (undocumented)
|
|
export function useAssetUrls(): TLUiAssetUrls;
|
|
|
|
// @public (undocumented)
|
|
export function useBreakpoint(): number;
|
|
|
|
// @public (undocumented)
|
|
export function useCanRedo(): boolean;
|
|
|
|
// @public (undocumented)
|
|
export function useCanUndo(): boolean;
|
|
|
|
// @public (undocumented)
|
|
export function useContextMenuSchema(): TLUiMenuSchema;
|
|
|
|
// @public (undocumented)
|
|
export function useCopyAs(): (ids: TLShapeId[], format?: TLCopyType) => void;
|
|
|
|
// @public (undocumented)
|
|
export function useDefaultHelpers(): {
|
|
addToast: (toast: Omit<TLUiToast, "id"> & {
|
|
id?: string | undefined;
|
|
}) => string;
|
|
removeToast: (id: string) => string;
|
|
clearToasts: () => void;
|
|
addDialog: (dialog: Omit<TLUiDialog, "id"> & {
|
|
id?: string | undefined;
|
|
}) => string;
|
|
clearDialogs: () => void;
|
|
removeDialog: (id: string) => string;
|
|
updateDialog: (id: string, newDialogData: Partial<TLUiDialog>) => string;
|
|
msg: (id: string) => string;
|
|
isMobile: boolean;
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export function useDialogs(): TLUiDialogsContextType;
|
|
|
|
// @public (undocumented)
|
|
export function useExportAs(): (ids: TLShapeId[], format?: TLExportType) => void;
|
|
|
|
// @public (undocumented)
|
|
export function useHelpMenuSchema(): TLUiMenuSchema;
|
|
|
|
// @public (undocumented)
|
|
export function useKeyboardShortcuts(): void;
|
|
|
|
// @public (undocumented)
|
|
export function useKeyboardShortcutsSchema(): TLUiKeyboardShortcutsSchemaContextType;
|
|
|
|
// @public (undocumented)
|
|
export function useLocalStorageState<T = any>(key: string, defaultValue: T): readonly [T, (setter: ((value: T) => T) | T) => void];
|
|
|
|
// @public (undocumented)
|
|
export function useMenuClipboardEvents(): {
|
|
copy: (source: TLUiEventSource) => void;
|
|
cut: (source: TLUiEventSource) => void;
|
|
paste: (data: ClipboardItem[] | DataTransfer, source: TLUiEventSource, point?: VecLike) => Promise<void>;
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export function useMenuIsOpen(id: string, cb?: (isOpen: boolean) => void): readonly [boolean, (isOpen: boolean) => void];
|
|
|
|
// @public (undocumented)
|
|
export function useMenuSchema(): TLUiMenuSchema;
|
|
|
|
// @public (undocumented)
|
|
export function useNativeClipboardEvents(): void;
|
|
|
|
// @public (undocumented)
|
|
export function useReadonly(): boolean;
|
|
|
|
// @public (undocumented)
|
|
export function useToasts(): TLUiToastsContextType;
|
|
|
|
// @public (undocumented)
|
|
export function useToolbarSchema(): TLUiToolbarSchemaContextType;
|
|
|
|
// @public (undocumented)
|
|
export function useTools(): TLUiToolsContextType;
|
|
|
|
// @public
|
|
export function useTranslation(): (id: Exclude<string, TLUiTranslationKey> | string) => string;
|
|
|
|
// @public (undocumented)
|
|
export function useUiEvents(): TLUiEventContextType;
|
|
|
|
// @public (undocumented)
|
|
export class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {
|
|
// (undocumented)
|
|
canEdit: () => boolean;
|
|
// (undocumented)
|
|
component(shape: TLVideoShape): JSX.Element;
|
|
// (undocumented)
|
|
getDefaultProps(): TLVideoShape['props'];
|
|
// (undocumented)
|
|
indicator(shape: TLVideoShape): JSX.Element;
|
|
// (undocumented)
|
|
isAspectRatioLocked: () => boolean;
|
|
// (undocumented)
|
|
static migrations: Migrations;
|
|
// (undocumented)
|
|
static props: {
|
|
w: Validator<number>;
|
|
h: Validator<number>;
|
|
time: Validator<number>;
|
|
playing: Validator<boolean>;
|
|
url: Validator<string>;
|
|
assetId: Validator<TLAssetId | null>;
|
|
};
|
|
// (undocumented)
|
|
toSvg(shape: TLVideoShape): SVGGElement;
|
|
// (undocumented)
|
|
static type: "video";
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class ZoomTool extends StateNode {
|
|
// (undocumented)
|
|
static children: () => (typeof Idle_12 | typeof Pointing_8 | typeof ZoomBrushing)[];
|
|
// (undocumented)
|
|
static id: string;
|
|
// (undocumented)
|
|
info: TLPointerEventInfo & {
|
|
onInteractionEnd?: string | undefined;
|
|
};
|
|
// (undocumented)
|
|
static initial: string;
|
|
// (undocumented)
|
|
onEnter: (info: TLPointerEventInfo & {
|
|
onInteractionEnd: string;
|
|
}) => void;
|
|
// (undocumented)
|
|
onExit: () => void;
|
|
// (undocumented)
|
|
onInterrupt: TLInterruptEvent;
|
|
// (undocumented)
|
|
onKeyDown: TLKeyboardEvent | undefined;
|
|
// (undocumented)
|
|
onKeyUp: TLKeyboardEvent;
|
|
}
|
|
|
|
|
|
export * from "@tldraw/editor";
|
|
|
|
// (No @packageDocumentation comment for this package)
|
|
|
|
```
|