4e50c9c162
Start scrolling when we get close to the edges of the window. This works for brush selecting, translating, and resizing. https://github.com/tldraw/tldraw/assets/2523721/4a5effc8-5445-411b-b317-36097233d36c ### Change Type - [ ] `patch` — Bug fix - [x] `minor` — New feature - [ ] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [ ] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version ### Test Plan 1. Select a shape. 2. Move it towards the edge of the window. The camera position should change. 3. Also try resizing, brush selecting. - [x] Unit Tests - [ ] End to end tests ### Release Notes - Adds the logic to change the camera position when you get close to the edges of the window. This allows you to drag, resize, brush select past the edges of the current viewport. --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
1986 lines
74 KiB
Markdown
1986 lines
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)
|
|
|
|
```
|