Some checks failed
Checks / Tests & checks (push) Has been cancelled
Checks / Build all projects (push) Has been cancelled
Deploy .com / Deploy dotcom to ${{ (github.ref == 'refs/heads/production' && 'production') || (github.ref == 'refs/heads/main' && 'staging') || 'preview' }} (push) Has been cancelled
Deploy templates / Deploy templates (push) Has been cancelled
End to end tests (examples) / End to end tests (examples) (push) Has been cancelled
End to end tests (perf) / End to end tests (perf) (push) Has been cancelled
Publish SDK packages / Publish SDK packages (push) Has been cancelled
End to end tests (dotcom) / End to end tests (dotcom) (push) Has been cancelled
End to end tests (mermaid readability) / End to end tests (mermaid readability) (push) Has been cancelled
Publish SDK packages / Tell user released version (push) Has been cancelled
Publish SDK packages / Publishes code templates to separate repositories (push) Has been cancelled
Publish SDK packages / Deploys the template demos with the new SDK version (push) Has been cancelled
Deploy grafana resources / ${{ github.event_name == 'push' && 'Deploy grafana resources' || 'Validate grafana resources (dry run)' }} (push) Failing after 0s
i18n upload strings / Upload latest strings (push) Failing after 0s
Deploy analytics worker / Deploy analytics worker to ${{ (github.ref == 'refs/heads/production' && 'production') || (github.ref == 'refs/heads/main' && 'staging') || 'preview' }} (push) Failing after 0s
Deploy bemo / Deploy bemo to ${{ (github.ref == 'refs/heads/bemo-production' && 'production') || (github.ref == 'refs/heads/main' && 'staging') || 'preview' }} (push) Failing after 0s
End to end tests (dotcom) / Check for relevant changes (push) Failing after 0s
End to end tests (examples) / Check for relevant changes (push) Failing after 0s
End to end tests (mermaid readability) / Check for relevant changes (push) Failing after 0s
End to end tests (perf) / Check for relevant changes (push) Failing after 0s
Publish editor extensions / Publish editor extensions (push) Failing after 0s
Publish SDK packages / Remove the publish-packages label (push) Has been skipped
Close inactive issues / close-issues (push) Failing after 3s
i18n download strings / Download latest strings (push) Failing after 0s
Post release marketing summary to Discord / Post release marketing summary to Discord (push) Failing after 0s
Post release crew to Discord / Post release crew to Discord (push) Failing after 0s
Prune preview deploys / Prune preview deploys (push) Failing after 1s
Staging E2E Daily Cleanup / Daily Cleanup of Test Files (push) Failing after 1s
6748 lines
214 KiB
Markdown
6748 lines
214 KiB
Markdown
## API Report File for "tldraw"
|
|
|
|
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
|
|
|
|
```ts
|
|
|
|
import { AssetUtil } from '@tldraw/editor';
|
|
import { Atom } from '@tldraw/editor';
|
|
import { BaseBoxShapeTool } from '@tldraw/editor';
|
|
import { BaseBoxShapeUtil } from '@tldraw/editor';
|
|
import { BaseFrameLikeShapeUtil } from '@tldraw/editor';
|
|
import { BindingOnChangeOptions } from '@tldraw/editor';
|
|
import { BindingOnCreateOptions } from '@tldraw/editor';
|
|
import { BindingOnShapeChangeOptions } from '@tldraw/editor';
|
|
import { BindingOnShapeIsolateOptions } from '@tldraw/editor';
|
|
import { BindingUtil } from '@tldraw/editor';
|
|
import { Box } from '@tldraw/editor';
|
|
import { Circle2d } from '@tldraw/editor';
|
|
import { ComponentType } from 'react';
|
|
import { CSSProperties } from 'react';
|
|
import { DebugFlag } from '@tldraw/editor';
|
|
import { Editor } from '@tldraw/editor';
|
|
import { ElbowArrowSnap } from '@tldraw/editor';
|
|
import { Extension } from '@tiptap/core';
|
|
import { Extensions } from '@tiptap/core';
|
|
import { ExtractShapeByProps } from '@tldraw/editor';
|
|
import { ForwardRefExoticComponent } from 'react';
|
|
import { Geometry2d } from '@tldraw/editor';
|
|
import { Geometry2dFilters } from '@tldraw/editor';
|
|
import { Geometry2dOptions } from '@tldraw/editor';
|
|
import { getSchema } from '@tiptap/core';
|
|
import { Group2d } from '@tldraw/editor';
|
|
import { HandleSnapGeometry } from '@tldraw/editor';
|
|
import { HTMLAttributes } from 'react';
|
|
import { IndexKey } from '@tldraw/utils';
|
|
import { IndexKey as IndexKey_2 } from '@tldraw/editor';
|
|
import { JSONContent } from '@tiptap/core';
|
|
import { JsonObject } from '@tldraw/utils';
|
|
import { JSX } from 'react/jsx-runtime';
|
|
import { JSXElementConstructor } from 'react';
|
|
import { LANGUAGES } from '@tldraw/editor';
|
|
import { Mark } from '@tiptap/core';
|
|
import { MatLike } from '@tldraw/editor';
|
|
import { MemoExoticComponent } from 'react';
|
|
import { mergeAttributes } from '@tiptap/core';
|
|
import { MigrationFailureReason } from '@tldraw/editor';
|
|
import { MigrationSequence } from '@tldraw/store';
|
|
import { NamedExoticComponent } from 'react';
|
|
import { Node as Node_2 } from '@tiptap/core';
|
|
import { Node as Node_3 } from '@tiptap/pm/model';
|
|
import { OverlayOptionsWithDisplayValues } from '@tldraw/editor';
|
|
import { OverlayUtil } from '@tldraw/editor';
|
|
import { PerfectDashTerminal } from '@tldraw/editor';
|
|
import { Polygon2d } from '@tldraw/editor';
|
|
import { Polyline2d } from '@tldraw/editor';
|
|
import * as React_2 from 'react';
|
|
import { default as React_3 } from 'react';
|
|
import { ReactElement } from 'react';
|
|
import { ReactNode } from 'react';
|
|
import { ReactPortal } from 'react';
|
|
import { ReadonlySharedStyleMap } from '@tldraw/editor';
|
|
import { RecordProps } from '@tldraw/tlschema';
|
|
import { Rectangle2d } from '@tldraw/editor';
|
|
import { RecursivePartial } from '@tldraw/editor';
|
|
import { RefAttributes } from 'react';
|
|
import { RefObject } from 'react';
|
|
import { Result } from '@tldraw/editor';
|
|
import { RichTextFontVisitorState } from '@tldraw/editor';
|
|
import { RotateCorner } from '@tldraw/editor';
|
|
import { SerializedSchema } from '@tldraw/editor';
|
|
import { ShapeUtil } from '@tldraw/editor';
|
|
import { ShapeWithCrop } from '@tldraw/editor';
|
|
import { SharedStyle } from '@tldraw/editor';
|
|
import { SnapIndicator } from '@tldraw/editor';
|
|
import { StarterKitOptions } from '@tiptap/starter-kit';
|
|
import { StateNode } from '@tldraw/editor';
|
|
import { StyleProp } from '@tldraw/editor';
|
|
import { SvgExportContext } from '@tldraw/editor';
|
|
import { SVGProps } from 'react';
|
|
import { TaskItem } from '@tiptap/extension-list';
|
|
import { TaskItemOptions } from '@tiptap/extension-list';
|
|
import { TaskList } from '@tiptap/extension-list';
|
|
import { TaskListOptions } from '@tiptap/extension-list';
|
|
import { TiptapEditor } from '@tldraw/editor';
|
|
import { TLAnyBindingUtilConstructor } from '@tldraw/editor';
|
|
import { TLAnyShapeUtilConstructor } from '@tldraw/editor';
|
|
import { TLArrowBinding } from '@tldraw/editor';
|
|
import { TLArrowBindingProps } from '@tldraw/editor';
|
|
import { TLArrowShape } from '@tldraw/editor';
|
|
import { TLArrowShapeArrowheadStyle } from '@tldraw/editor';
|
|
import { TLArrowShapeKind } from '@tldraw/editor';
|
|
import { TLArrowShapeProps } from '@tldraw/editor';
|
|
import { TLAsset } from '@tldraw/editor';
|
|
import { TLAssetId } from '@tldraw/editor';
|
|
import { TLAssetStore } from '@tldraw/editor';
|
|
import { TLBookmarkAsset } from '@tldraw/editor';
|
|
import { TLBookmarkShape } from '@tldraw/editor';
|
|
import { TLBookmarkShapeProps } from '@tldraw/editor';
|
|
import { TLClickEventInfo } from '@tldraw/editor';
|
|
import { TLClipboardWriteInfo } from '@tldraw/editor';
|
|
import { TLContent } from '@tldraw/editor';
|
|
import { TLCropInfo } from '@tldraw/editor';
|
|
import { TLCursorType } from '@tldraw/editor';
|
|
import { TLDefaultColorStyle } from '@tldraw/tlschema';
|
|
import { TLDefaultDashStyle } from '@tldraw/tlschema';
|
|
import { TLDefaultFillStyle } from '@tldraw/tlschema';
|
|
import { TLDefaultFontStyle } from '@tldraw/tlschema';
|
|
import { TLDefaultHorizontalAlignStyle } from '@tldraw/tlschema';
|
|
import { TLDefaultSizeStyle } from '@tldraw/tlschema';
|
|
import { TLDefaultSizeStyle as TLDefaultSizeStyle_2 } from '@tldraw/editor';
|
|
import { TLDefaultTextAlignStyle } from '@tldraw/tlschema';
|
|
import { TLDefaultVerticalAlignStyle } from '@tldraw/tlschema';
|
|
import { TldrawEditorBaseProps } from '@tldraw/editor';
|
|
import { TldrawEditorStoreProps } from '@tldraw/editor';
|
|
import { TldrawOptions } from '@tldraw/editor';
|
|
import { TLDrawShape } from '@tldraw/editor';
|
|
import { TLDrawShapeProps } from '@tldraw/editor';
|
|
import { TLDrawShapeSegment } from '@tldraw/editor';
|
|
import { TLEditorComponents } from '@tldraw/editor';
|
|
import { TLEditorSnapshot } from '@tldraw/editor';
|
|
import { TLEditStartInfo } from '@tldraw/editor';
|
|
import { TLEmbedShape } from '@tldraw/editor';
|
|
import { TLEmbedShapeProps } from '@tldraw/editor';
|
|
import { TLEventInfo } from '@tldraw/editor';
|
|
import { TLExportType } from '@tldraw/editor';
|
|
import { TLFileExternalAsset } from '@tldraw/editor';
|
|
import { TLFileReplaceExternalContent } from '@tldraw/editor';
|
|
import { TLFontFace } from '@tldraw/tlschema';
|
|
import { TLFontFace as TLFontFace_2 } from '@tldraw/editor';
|
|
import { TLFrameShape } from '@tldraw/editor';
|
|
import { TLFrameShapeProps } from '@tldraw/editor';
|
|
import { TLGeometryOpts } from '@tldraw/editor';
|
|
import { TLGeoShape } from '@tldraw/editor';
|
|
import { TLGeoShapeGeoStyle } from '@tldraw/tlschema';
|
|
import { TLGeoShapeProps } from '@tldraw/editor';
|
|
import { TLHandle } from '@tldraw/editor';
|
|
import { TLHandleDragInfo } from '@tldraw/editor';
|
|
import { TLHighlightShape } from '@tldraw/editor';
|
|
import { TLHighlightShapeProps } from '@tldraw/editor';
|
|
import { TLImageAsset } from '@tldraw/editor';
|
|
import { TLImageExportOptions } from '@tldraw/editor';
|
|
import { TLImageShape } from '@tldraw/editor';
|
|
import { TLImageShapeProps } from '@tldraw/editor';
|
|
import { TLKeyboardEventInfo } from '@tldraw/editor';
|
|
import { TLLineShape } from '@tldraw/editor';
|
|
import { TLLineShapePoint } from '@tldraw/editor';
|
|
import { TLLineShapeSplineStyle } from '@tldraw/tlschema';
|
|
import { TLNoteShape } from '@tldraw/editor';
|
|
import { TLNoteShapeProps } from '@tldraw/editor';
|
|
import { TLOpacityType } from '@tldraw/tlschema';
|
|
import { TLOverlay } from '@tldraw/editor';
|
|
import { TLPageId } from '@tldraw/editor';
|
|
import { TLParentId } from '@tldraw/tlschema';
|
|
import { TLPointerEventInfo } from '@tldraw/editor';
|
|
import { TLPropsMigrations } from '@tldraw/tlschema';
|
|
import { TLResizeInfo } from '@tldraw/editor';
|
|
import { TLRichText } from '@tldraw/tlschema';
|
|
import { TLRichText as TLRichText_2 } from '@tldraw/editor';
|
|
import { TLSchema } from '@tldraw/editor';
|
|
import { TLScribble } from '@tldraw/editor';
|
|
import { TLSelectionHandle } from '@tldraw/editor';
|
|
import { TLShape } from '@tldraw/editor';
|
|
import { TLShapeCrop } from '@tldraw/editor';
|
|
import { TLShapeId } from '@tldraw/editor';
|
|
import { TLShapeId as TLShapeId_2 } from '@tldraw/tlschema';
|
|
import { TLShapePartial } from '@tldraw/editor';
|
|
import { TLShapeUtilCanBeLaidOutOpts } from '@tldraw/editor';
|
|
import { TLShapeUtilCanBindOpts } from '@tldraw/editor';
|
|
import { TLShapeUtilCanvasSvgDef } from '@tldraw/editor';
|
|
import { TLShapeUtilConstructor } from '@tldraw/editor';
|
|
import { TLStateNodeConstructor } from '@tldraw/editor';
|
|
import { TLStore } from '@tldraw/editor';
|
|
import { TLStoreSnapshot } from '@tldraw/editor';
|
|
import { TLTextOptions } from '@tldraw/editor';
|
|
import { TLTextShape } from '@tldraw/editor';
|
|
import { TLTheme } from '@tldraw/editor';
|
|
import { TLThemeColors } from '@tldraw/editor';
|
|
import { TLUrlExternalAsset } from '@tldraw/editor';
|
|
import { TLUserId } from '@tldraw/editor';
|
|
import { TLVideoAsset } from '@tldraw/editor';
|
|
import { TLVideoShape } from '@tldraw/editor';
|
|
import { UnknownRecord } from '@tldraw/editor';
|
|
import { Validator } from '@tldraw/validate';
|
|
import { Vec } from '@tldraw/editor';
|
|
import { VecLike } from '@tldraw/editor';
|
|
import { VecModel } from '@tldraw/editor';
|
|
import { VecModel as VecModel_2 } from '@tldraw/tlschema';
|
|
|
|
// @public (undocumented)
|
|
export type A11yPriority = 'assertive' | 'polite';
|
|
|
|
// @public (undocumented)
|
|
export interface A11yProviderProps {
|
|
// (undocumented)
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function AccessibilityMenu(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export interface ActionsProviderProps {
|
|
// (undocumented)
|
|
children: React_2.ReactNode;
|
|
// (undocumented)
|
|
overrides?(editor: Editor, actions: TLUiActionsContextType, helpers: TLUiOverrideHelpers): TLUiActionsContextType;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type AlertSeverity = 'error' | 'info' | 'success' | 'warning';
|
|
|
|
// @public (undocumented)
|
|
export function AlignMenuItems(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export const allDefaultFontFaces: TLFontFace_2[];
|
|
|
|
// @public (undocumented)
|
|
export function ArrangeMenuSubmenu(): JSX.Element | null;
|
|
|
|
// @public
|
|
export class ArrowBindingHintOverlayUtil extends OverlayUtil<TLArrowBindingHintOverlay> {
|
|
// (undocumented)
|
|
getOverlays(): TLArrowBindingHintOverlay[];
|
|
// (undocumented)
|
|
isActive(): boolean;
|
|
// (undocumented)
|
|
options: {
|
|
crossSize: number;
|
|
dashedMinZoom: number;
|
|
dashLengthRatio: number;
|
|
dotRadius: number;
|
|
opacity: number;
|
|
strokeWidth: number;
|
|
zIndex: number;
|
|
};
|
|
// (undocumented)
|
|
render(ctx: CanvasRenderingContext2D, overlays: TLArrowBindingHintOverlay[]): void;
|
|
// (undocumented)
|
|
static type: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class ArrowBindingUtil extends BindingUtil<TLArrowBinding> {
|
|
// (undocumented)
|
|
getDefaultProps(): Partial<TLArrowBindingProps>;
|
|
// (undocumented)
|
|
static migrations: TLPropsMigrations;
|
|
// (undocumented)
|
|
onAfterChange({ bindingAfter }: BindingOnChangeOptions<TLArrowBinding>): void;
|
|
// (undocumented)
|
|
onAfterChangeFromShape({ shapeBefore, shapeAfter, reason, }: BindingOnShapeChangeOptions<TLArrowBinding>): void;
|
|
// (undocumented)
|
|
onAfterChangeToShape({ binding, shapeBefore, shapeAfter, reason, }: BindingOnShapeChangeOptions<TLArrowBinding>): void;
|
|
// (undocumented)
|
|
onAfterCreate({ binding }: BindingOnCreateOptions<TLArrowBinding>): void;
|
|
// (undocumented)
|
|
onBeforeIsolateFromShape({ binding, }: BindingOnShapeIsolateOptions<TLArrowBinding>): void;
|
|
// (undocumented)
|
|
static props: RecordProps<TLArrowBinding>;
|
|
// (undocumented)
|
|
static type: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function ArrowDownToolbarItem(): JSX.Element;
|
|
|
|
// @public
|
|
export class ArrowHintOverlayUtil extends OverlayUtil<TLArrowHintOverlay> {
|
|
// (undocumented)
|
|
getOverlays(): TLArrowHintOverlay[];
|
|
// (undocumented)
|
|
isActive(): boolean;
|
|
// (undocumented)
|
|
options: {
|
|
edgePointRadius: number;
|
|
edgeRadius: number;
|
|
handleRadius: number;
|
|
lineWidth: number;
|
|
zIndex: number;
|
|
};
|
|
// (undocumented)
|
|
render(ctx: CanvasRenderingContext2D, overlays: TLArrowHintOverlay[]): void;
|
|
// (undocumented)
|
|
static type: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function ArrowLeftToolbarItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function ArrowRightToolbarItem(): JSX.Element;
|
|
|
|
// @public
|
|
export interface ArrowShapeOptions extends ShapeOptionsWithDisplayValues<TLArrowShape, ArrowShapeUtilDisplayValues> {
|
|
readonly arcArrowCenterSnapDistance: number;
|
|
readonly elbowArrowAxisSnapDistance: number;
|
|
readonly elbowArrowCenterSnapDistance: number;
|
|
readonly elbowArrowEdgeSnapDistance: number;
|
|
readonly elbowArrowPointSnapDistance: number;
|
|
readonly elbowMidpointSnapDistance: number;
|
|
readonly elbowMinSegmentLengthToShowMidpointHandle: number;
|
|
readonly expandElbowLegLength: Record<TLDefaultSizeStyle_2, number>;
|
|
readonly hoverPreciseTimeout: number;
|
|
readonly labelCenterSnapDistance: number;
|
|
readonly minElbowHandleDistance: number;
|
|
readonly minElbowLegLength: Record<TLDefaultSizeStyle_2, number>;
|
|
readonly pointingPreciseTimeout: number;
|
|
shouldBeExact(editor: Editor, isPrecise: boolean): boolean;
|
|
shouldIgnoreTargets(editor: Editor): boolean;
|
|
readonly showTextOutline: boolean;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class ArrowShapeTool extends StateNode {
|
|
// (undocumented)
|
|
static children(): TLStateNodeConstructor[];
|
|
// (undocumented)
|
|
static id: string;
|
|
// (undocumented)
|
|
static initial: string;
|
|
// (undocumented)
|
|
shapeType: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
|
|
// (undocumented)
|
|
canBeLaidOut(shape: TLArrowShape, info: TLShapeUtilCanBeLaidOutOpts): boolean;
|
|
// (undocumented)
|
|
canBind({ toShape }: TLShapeUtilCanBindOpts<TLArrowShape>): boolean;
|
|
// (undocumented)
|
|
canEdit(shape: TLArrowShape): boolean;
|
|
// (undocumented)
|
|
canSnap(shape: TLArrowShape): boolean;
|
|
// (undocumented)
|
|
component(shape: TLArrowShape): JSX.Element | null;
|
|
// (undocumented)
|
|
getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[];
|
|
// (undocumented)
|
|
getDefaultProps(): TLArrowShape['props'];
|
|
// (undocumented)
|
|
getFontFaces(shape: TLArrowShape): TLFontFace[];
|
|
// (undocumented)
|
|
getGeometry(shape: TLArrowShape): Group2d;
|
|
// (undocumented)
|
|
getHandles(shape: TLArrowShape): TLHandle[];
|
|
// (undocumented)
|
|
getIndicatorPath(shape: TLArrowShape): {
|
|
additionalPaths: Path2D[];
|
|
clipPath: Path2D;
|
|
path: Path2D;
|
|
} | Path2D | undefined;
|
|
// (undocumented)
|
|
getInterpolatedProps(startShape: TLArrowShape, endShape: TLArrowShape, progress: number): TLArrowShapeProps;
|
|
// (undocumented)
|
|
getText(shape: TLArrowShape): string;
|
|
// (undocumented)
|
|
hideInMinimap(): boolean;
|
|
// (undocumented)
|
|
hideResizeHandles(shape: TLArrowShape): boolean;
|
|
// (undocumented)
|
|
hideRotateHandle(shape: TLArrowShape): boolean;
|
|
// (undocumented)
|
|
hideSelectionBoundsBg(shape: TLArrowShape): boolean;
|
|
// (undocumented)
|
|
hideSelectionBoundsFg(shape: TLArrowShape): boolean;
|
|
// (undocumented)
|
|
static migrations: MigrationSequence;
|
|
// (undocumented)
|
|
onDoubleClickHandle(shape: TLArrowShape, handle: TLHandle): TLShapePartial<TLArrowShape> | void;
|
|
// (undocumented)
|
|
onEditStart(shape: TLArrowShape): void;
|
|
// (undocumented)
|
|
onHandleDrag(shape: TLArrowShape, info: TLHandleDragInfo<TLArrowShape>): ({
|
|
id: TLShapeId_2;
|
|
meta?: Partial<JsonObject> | undefined;
|
|
props?: Partial<TLArrowShapeProps> | undefined;
|
|
type: "arrow";
|
|
} & Partial<Omit<TLArrowShape, "id" | "meta" | "props" | "type">>) | {
|
|
id: TLShapeId_2;
|
|
props: {
|
|
bend: number;
|
|
};
|
|
type: "arrow";
|
|
} | {
|
|
id: TLShapeId_2;
|
|
props: {
|
|
elbowMidPoint: number;
|
|
};
|
|
type: "arrow";
|
|
} | undefined;
|
|
// (undocumented)
|
|
onResize(shape: TLArrowShape, info: TLResizeInfo<TLArrowShape>): {
|
|
props: {
|
|
bend: number;
|
|
end: VecModel_2;
|
|
start: VecModel_2;
|
|
};
|
|
};
|
|
// (undocumented)
|
|
onTranslate(initialShape: TLArrowShape, shape: TLArrowShape): void;
|
|
// (undocumented)
|
|
onTranslateStart(shape: TLArrowShape): ({
|
|
id: TLShapeId_2;
|
|
meta?: Partial<JsonObject> | undefined;
|
|
props?: Partial<TLArrowShapeProps> | undefined;
|
|
type: "arrow";
|
|
} & Partial<Omit<TLArrowShape, "id" | "meta" | "props" | "type">>) | undefined;
|
|
// (undocumented)
|
|
options: ArrowShapeOptions;
|
|
// (undocumented)
|
|
static props: RecordProps<TLArrowShape>;
|
|
// (undocumented)
|
|
toSvg(shape: TLArrowShape, ctx: SvgExportContext): JSX.Element;
|
|
// (undocumented)
|
|
static type: 'arrow';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface ArrowShapeUtilDisplayValues {
|
|
// (undocumented)
|
|
fillColor: string;
|
|
// (undocumented)
|
|
labelBorderRadius: number;
|
|
// (undocumented)
|
|
labelColor: string;
|
|
// (undocumented)
|
|
labelFontFamily: string;
|
|
// (undocumented)
|
|
labelFontSize: number;
|
|
// (undocumented)
|
|
labelLineHeight: number;
|
|
// (undocumented)
|
|
labelPadding: number;
|
|
// (undocumented)
|
|
patternFillFallbackColor: string;
|
|
// (undocumented)
|
|
strokeColor: string;
|
|
// (undocumented)
|
|
strokeWidth: number;
|
|
}
|
|
|
|
// @public
|
|
export interface ArrowTargetState {
|
|
// (undocumented)
|
|
anchorInPageSpace: VecLike;
|
|
// (undocumented)
|
|
arrowKind: TLArrowShapeKind;
|
|
// (undocumented)
|
|
centerInPageSpace: VecLike;
|
|
// (undocumented)
|
|
handlesInPageSpace: {
|
|
bottom: {
|
|
isEnabled: boolean;
|
|
point: VecLike;
|
|
};
|
|
left: {
|
|
isEnabled: boolean;
|
|
point: VecLike;
|
|
};
|
|
right: {
|
|
isEnabled: boolean;
|
|
point: VecLike;
|
|
};
|
|
top: {
|
|
isEnabled: boolean;
|
|
point: VecLike;
|
|
};
|
|
};
|
|
// (undocumented)
|
|
isExact: boolean;
|
|
// (undocumented)
|
|
isPrecise: boolean;
|
|
// (undocumented)
|
|
normalizedAnchor: VecLike;
|
|
// (undocumented)
|
|
snap: ElbowArrowSnap;
|
|
// (undocumented)
|
|
target: TLShape;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function ArrowToolbarItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function ArrowUpToolbarItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export type ASPECT_RATIO_OPTION = 'circle' | 'landscape' | 'original' | 'portrait' | 'square' | 'wide';
|
|
|
|
// @public (undocumented)
|
|
export const ASPECT_RATIO_OPTIONS: ASPECT_RATIO_OPTION[];
|
|
|
|
// @public (undocumented)
|
|
export const ASPECT_RATIO_TO_VALUE: Record<ASPECT_RATIO_OPTION, number>;
|
|
|
|
// @public (undocumented)
|
|
export function AssetToolbarItem(): JSX.Element;
|
|
|
|
// @public
|
|
export function AssetUrlsProvider({ assetUrls, children }: AssetUrlsProviderProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export interface AssetUrlsProviderProps {
|
|
// (undocumented)
|
|
assetUrls: TLUiAssetUrls;
|
|
// (undocumented)
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface BasePathBuilderOpts {
|
|
// (undocumented)
|
|
forceSolid?: boolean;
|
|
// (undocumented)
|
|
onlyFilled?: boolean;
|
|
// (undocumented)
|
|
props?: SVGProps<SVGPathElement & SVGGElement>;
|
|
// (undocumented)
|
|
strokeWidth: number;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class BookmarkAssetUtil extends AssetUtil<TLBookmarkAsset> {
|
|
// (undocumented)
|
|
getDefaultProps(): TLBookmarkAsset['props'];
|
|
// (undocumented)
|
|
static migrations: MigrationSequence;
|
|
// (undocumented)
|
|
static props: {
|
|
description: Validator<string>;
|
|
favicon: Validator<string>;
|
|
image: Validator<string>;
|
|
src: Validator<null | string>;
|
|
title: Validator<string>;
|
|
};
|
|
// (undocumented)
|
|
static type: 'bookmark';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface BookmarkShapeOptions extends ShapeOptionsWithDisplayValues<TLBookmarkShape, BookmarkShapeUtilDisplayValues> {
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape> {
|
|
// (undocumented)
|
|
canResize(shape: TLBookmarkShape): boolean;
|
|
// (undocumented)
|
|
component(shape: TLBookmarkShape): JSX.Element;
|
|
// (undocumented)
|
|
getAriaDescriptor(shape: TLBookmarkShape): string | undefined;
|
|
// (undocumented)
|
|
getDefaultProps(): TLBookmarkShape['props'];
|
|
// (undocumented)
|
|
getGeometry(shape: TLBookmarkShape): Rectangle2d;
|
|
// (undocumented)
|
|
getIndicatorPath(shape: TLBookmarkShape): Path2D;
|
|
// (undocumented)
|
|
getInterpolatedProps(startShape: TLBookmarkShape, endShape: TLBookmarkShape, t: number): TLBookmarkShapeProps;
|
|
// (undocumented)
|
|
getText(shape: TLBookmarkShape): string;
|
|
// (undocumented)
|
|
hideSelectionBoundsFg(shape: TLBookmarkShape): boolean;
|
|
// (undocumented)
|
|
static migrations: TLPropsMigrations;
|
|
// (undocumented)
|
|
onBeforeCreate(next: TLBookmarkShape): {
|
|
id: TLShapeId_2;
|
|
index: IndexKey;
|
|
isLocked: boolean;
|
|
meta: JsonObject;
|
|
opacity: TLOpacityType;
|
|
parentId: TLParentId;
|
|
props: {
|
|
assetId: null | TLAssetId;
|
|
h: number;
|
|
url: string;
|
|
w: number;
|
|
};
|
|
rotation: number;
|
|
type: "bookmark";
|
|
typeName: 'shape';
|
|
x: number;
|
|
y: number;
|
|
};
|
|
// (undocumented)
|
|
onBeforeUpdate(prev: TLBookmarkShape, shape: TLBookmarkShape): TLBookmarkShape | undefined;
|
|
// (undocumented)
|
|
options: BookmarkShapeOptions;
|
|
// (undocumented)
|
|
static props: RecordProps<TLBookmarkShape>;
|
|
// (undocumented)
|
|
static type: 'bookmark';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type BookmarkShapeUtilDisplayValues = object;
|
|
|
|
// @public (undocumented)
|
|
export interface BoxWidthHeight {
|
|
// (undocumented)
|
|
h: number;
|
|
// (undocumented)
|
|
w: number;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function BreakPointProvider({ forceMobile, children }: BreakPointProviderProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export interface BreakPointProviderProps {
|
|
// (undocumented)
|
|
children: ReactNode;
|
|
// (undocumented)
|
|
forceMobile?: boolean;
|
|
}
|
|
|
|
// @public
|
|
export class BrushOverlayUtil extends OverlayUtil<TLBrushOverlay> {
|
|
// (undocumented)
|
|
getOverlays(): TLBrushOverlay[];
|
|
// (undocumented)
|
|
isActive(): boolean;
|
|
// (undocumented)
|
|
options: BrushOverlayUtilOptions;
|
|
// (undocumented)
|
|
render(ctx: CanvasRenderingContext2D, overlays: TLBrushOverlay[]): void;
|
|
// (undocumented)
|
|
renderMinimap(ctx: CanvasRenderingContext2D, overlays: TLBrushOverlay[], zoom: number): void;
|
|
// (undocumented)
|
|
static type: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface BrushOverlayUtilDisplayValues {
|
|
// (undocumented)
|
|
fillColor: string;
|
|
// (undocumented)
|
|
lineWidth: number;
|
|
// (undocumented)
|
|
strokeColor: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface BrushOverlayUtilOptions extends OverlayOptionsWithDisplayValues<TLBrushOverlay, BrushOverlayUtilDisplayValues> {
|
|
// (undocumented)
|
|
zIndex: number;
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export function buildFromV1Document(editor: Editor, _document: unknown): void;
|
|
|
|
// @public (undocumented)
|
|
export function CenteredTopPanelContainer({ maxWidth, ignoreRightWidth, stylePanelWidth, marginBetweenZones, squeezeAmount, children, }: CenteredTopPanelContainerProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export interface CenteredTopPanelContainerProps {
|
|
// (undocumented)
|
|
children?: ReactNode;
|
|
// (undocumented)
|
|
ignoreRightWidth?: number;
|
|
// (undocumented)
|
|
marginBetweenZones?: number;
|
|
// (undocumented)
|
|
maxWidth?: number;
|
|
// (undocumented)
|
|
squeezeAmount?: number;
|
|
// (undocumented)
|
|
stylePanelWidth?: number;
|
|
}
|
|
|
|
// @public
|
|
export function centerSelectionAroundPoint(editor: Editor, position: VecLike): void;
|
|
|
|
// @public (undocumented)
|
|
export function CheckBoxToolbarItem(): JSX.Element;
|
|
|
|
// @public
|
|
export function clearArrowTargetState(editor: Editor): void;
|
|
|
|
// @public (undocumented)
|
|
export function ClipboardMenuGroup(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function CloudToolbarItem(): JSX.Element;
|
|
|
|
// @public
|
|
export class CollaboratorBrushOverlayUtil extends OverlayUtil<TLCollaboratorBrushOverlay> {
|
|
// (undocumented)
|
|
getOverlays(): TLCollaboratorBrushOverlay[];
|
|
// (undocumented)
|
|
isActive(): boolean;
|
|
// (undocumented)
|
|
options: {
|
|
lineWidth: number;
|
|
zIndex: number;
|
|
};
|
|
// (undocumented)
|
|
render(ctx: CanvasRenderingContext2D, overlays: TLCollaboratorBrushOverlay[]): void;
|
|
// (undocumented)
|
|
renderMinimap(ctx: CanvasRenderingContext2D, overlays: TLCollaboratorBrushOverlay[]): void;
|
|
// (undocumented)
|
|
static type: string;
|
|
}
|
|
|
|
// @public @deprecated
|
|
export class CollaboratorCursorOverlayUtil extends OverlayUtil<TLCollaboratorCursorOverlay> {
|
|
// (undocumented)
|
|
getOverlays(): TLCollaboratorCursorOverlay[];
|
|
// (undocumented)
|
|
isActive(): boolean;
|
|
// (undocumented)
|
|
options: {
|
|
chatMaxWidth: number;
|
|
fontSize: number;
|
|
nameMaxWidth: number;
|
|
zIndex: number;
|
|
};
|
|
// (undocumented)
|
|
render(ctx: CanvasRenderingContext2D, overlays: TLCollaboratorCursorOverlay[]): void;
|
|
// (undocumented)
|
|
renderMinimap(ctx: CanvasRenderingContext2D, overlays: TLCollaboratorCursorOverlay[], zoom: number): void;
|
|
// (undocumented)
|
|
static type: string;
|
|
}
|
|
|
|
// @public
|
|
export class CollaboratorHintOverlayUtil extends OverlayUtil<TLCollaboratorHintOverlay> {
|
|
// (undocumented)
|
|
getOverlays(): TLCollaboratorHintOverlay[];
|
|
// (undocumented)
|
|
isActive(): boolean;
|
|
// (undocumented)
|
|
options: {
|
|
lineWidth: number;
|
|
viewportPadding: number;
|
|
zIndex: number;
|
|
};
|
|
// (undocumented)
|
|
render(ctx: CanvasRenderingContext2D, overlays: TLCollaboratorHintOverlay[]): void;
|
|
// (undocumented)
|
|
static type: string;
|
|
}
|
|
|
|
// @public
|
|
export class CollaboratorScribbleOverlayUtil extends OverlayUtil<TLCollaboratorScribbleOverlay> {
|
|
// (undocumented)
|
|
getOverlays(): TLCollaboratorScribbleOverlay[];
|
|
// (undocumented)
|
|
isActive(): boolean;
|
|
// (undocumented)
|
|
options: {
|
|
cacheSize: number;
|
|
streamline: number;
|
|
zIndex: number;
|
|
};
|
|
// (undocumented)
|
|
render(ctx: CanvasRenderingContext2D, overlays: TLCollaboratorScribbleOverlay[]): void;
|
|
// (undocumented)
|
|
static type: string;
|
|
}
|
|
|
|
// @public
|
|
export class CollaboratorShapeIndicatorOverlayUtil extends OverlayUtil<TLCollaboratorShapeIndicatorOverlay> {
|
|
// (undocumented)
|
|
getOverlays(): TLCollaboratorShapeIndicatorOverlay[];
|
|
// (undocumented)
|
|
isActive(): boolean;
|
|
// (undocumented)
|
|
options: {
|
|
alpha: number;
|
|
lineWidth: number;
|
|
zIndex: number;
|
|
};
|
|
// (undocumented)
|
|
render(ctx: CanvasRenderingContext2D, overlays: TLCollaboratorShapeIndicatorOverlay[]): void;
|
|
// (undocumented)
|
|
static type: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function ColorSchemeMenu(): JSX.Element;
|
|
|
|
// @public
|
|
export function CommentToolbarItem(): JSX.Element | null;
|
|
|
|
// @public
|
|
export function containBoxSize(originalSize: BoxWidthHeight, containBoxSize: BoxWidthHeight): BoxWidthHeight;
|
|
|
|
// @public (undocumented)
|
|
export function ConversionsMenuGroup(): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export function ConvertToBookmarkMenuItem(): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export function ConvertToEmbedMenuItem(): JSX.Element | null;
|
|
|
|
// @public
|
|
export function copyAs(editor: Editor, ids: TLShapeId[], opts: CopyAsOptions): Promise<void>;
|
|
|
|
// @public (undocumented)
|
|
export function CopyAsMenuGroup(): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export interface CopyAsOptions extends Omit<TLImageExportOptions, 'format'> {
|
|
format: TLCopyType;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function CopyMenuItem(): JSX.Element;
|
|
|
|
// @public
|
|
export function createBookmarkFromUrl(editor: Editor, { url, center, }: {
|
|
center?: {
|
|
x: number;
|
|
y: number;
|
|
};
|
|
url: string;
|
|
}): Promise<Result<TLBookmarkShape, string>>;
|
|
|
|
// @public (undocumented)
|
|
export function createEmptyBookmarkShape(editor: Editor, url: string, position: VecLike): TLBookmarkShape;
|
|
|
|
// @public
|
|
export function createShapesForAssets(editor: Editor, assets: TLAsset[], position: VecLike): Promise<TLShapeId[]>;
|
|
|
|
// @public (undocumented)
|
|
export interface CropBoxOptions {
|
|
// (undocumented)
|
|
minHeight?: number;
|
|
// (undocumented)
|
|
minWidth?: number;
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export interface CubicBezierToPathBuilderCommand extends PathBuilderCommandBase {
|
|
// (undocumented)
|
|
cp1: VecModel;
|
|
// (undocumented)
|
|
cp2: VecModel;
|
|
// (undocumented)
|
|
resolution?: number;
|
|
// (undocumented)
|
|
type: 'cubic';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function CursorChatItem(): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export interface CustomDebugFlags {
|
|
// (undocumented)
|
|
customDebugFlags?: Record<string, DebugFlag<boolean>>;
|
|
// (undocumented)
|
|
customFeatureFlags?: Record<string, DebugFlag<boolean>>;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface CustomEmbedDefinition<Config = never> extends EmbedDefinition<Config> {
|
|
// (undocumented)
|
|
readonly icon: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function CutMenuItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export interface DashedPathBuilderOpts extends BasePathBuilderOpts {
|
|
// (undocumented)
|
|
end?: PerfectDashTerminal;
|
|
// (undocumented)
|
|
lengthRatio?: number;
|
|
// (undocumented)
|
|
snap?: number;
|
|
// (undocumented)
|
|
start?: PerfectDashTerminal;
|
|
// (undocumented)
|
|
style: 'dashed' | 'dotted';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function DebugFlags(props: DebugFlagsProps): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export interface DebugFlagsProps {
|
|
// (undocumented)
|
|
customDebugFlags?: Record<string, DebugFlag<boolean>> | undefined;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export const DEFAULT_EMBED_DEFINITIONS: readonly [{
|
|
readonly doesResize: true;
|
|
readonly embedOnPaste: false;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
readonly height: 500;
|
|
readonly hostnames: readonly ["beta.tldraw.com", "tldraw.com", "localhost:3000"];
|
|
readonly minHeight: 300;
|
|
readonly minWidth: 300;
|
|
readonly overridePermissions: {
|
|
readonly 'allow-top-navigation': true;
|
|
};
|
|
readonly title: 'tldraw';
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly type: 'tldraw';
|
|
readonly width: 720;
|
|
}, {
|
|
readonly doesResize: true;
|
|
readonly embedOnPaste: true;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
readonly height: 500;
|
|
readonly hostnames: readonly ["figma.com"];
|
|
readonly title: 'Figma';
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly type: 'figma';
|
|
readonly width: 720;
|
|
}, {
|
|
readonly doesResize: true;
|
|
readonly embedOnPaste: true;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
readonly height: 500;
|
|
readonly hostnames: readonly ["canva.com"];
|
|
readonly title: 'Canva';
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly type: 'canva';
|
|
readonly width: 720;
|
|
}, {
|
|
readonly doesResize: true;
|
|
readonly embedOnPaste: true;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
readonly height: 500;
|
|
readonly hostnames: readonly ["google.*"];
|
|
readonly overridePermissions: {
|
|
readonly 'allow-presentation': true;
|
|
};
|
|
readonly title: 'Google Maps';
|
|
readonly toEmbedUrl: (url: string, config?: GoogleMapsEmbedConfig) => string | undefined;
|
|
readonly type: 'google_maps';
|
|
readonly width: 720;
|
|
}, {
|
|
readonly doesResize: true;
|
|
readonly embedOnPaste: true;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
readonly height: 500;
|
|
readonly hostnames: readonly ["val.town"];
|
|
readonly minHeight: 100;
|
|
readonly minWidth: 260;
|
|
readonly title: 'Val Town';
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly type: 'val_town';
|
|
readonly width: 720;
|
|
}, {
|
|
readonly doesResize: true;
|
|
readonly embedOnPaste: true;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
readonly height: 500;
|
|
readonly hostnames: readonly ["codesandbox.io"];
|
|
readonly minHeight: 300;
|
|
readonly minWidth: 300;
|
|
readonly title: 'CodeSandbox';
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly type: 'codesandbox';
|
|
readonly width: 720;
|
|
}, {
|
|
readonly doesResize: true;
|
|
readonly embedOnPaste: true;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
readonly height: 400;
|
|
readonly hostnames: readonly ["codepen.io"];
|
|
readonly minHeight: 300;
|
|
readonly minWidth: 300;
|
|
readonly title: 'Codepen';
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly type: 'codepen';
|
|
readonly width: 520;
|
|
}, {
|
|
readonly doesResize: false;
|
|
readonly embedOnPaste: true;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
readonly height: 400;
|
|
readonly hostnames: readonly ["scratch.mit.edu"];
|
|
readonly title: 'Scratch';
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly type: 'scratch';
|
|
readonly width: 520;
|
|
}, {
|
|
readonly doesResize: true;
|
|
readonly embedOnPaste: true;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
readonly height: 450;
|
|
readonly hostnames: readonly ["*.youtube.com", "youtube.com", "youtu.be"];
|
|
readonly isAspectRatioLocked: true;
|
|
readonly overridePermissions: {
|
|
readonly 'allow-popups-to-escape-sandbox': true;
|
|
readonly 'allow-presentation': true;
|
|
};
|
|
readonly title: 'YouTube';
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly type: 'youtube';
|
|
readonly width: 800;
|
|
}, {
|
|
readonly doesResize: true;
|
|
readonly embedOnPaste: true;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
readonly height: 500;
|
|
readonly hostnames: readonly ["calendar.google.*"];
|
|
readonly instructionLink: 'https://support.google.com/calendar/answer/41207?hl=en';
|
|
readonly minHeight: 360;
|
|
readonly minWidth: 460;
|
|
readonly overridePermissions: {
|
|
readonly 'allow-popups-to-escape-sandbox': true;
|
|
};
|
|
readonly title: 'Google Calendar';
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly type: 'google_calendar';
|
|
readonly width: 720;
|
|
}, {
|
|
readonly doesResize: true;
|
|
readonly embedOnPaste: true;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
readonly height: 500;
|
|
readonly hostnames: readonly ["docs.google.*"];
|
|
readonly minHeight: 360;
|
|
readonly minWidth: 460;
|
|
readonly overridePermissions: {
|
|
readonly 'allow-popups-to-escape-sandbox': true;
|
|
};
|
|
readonly title: 'Google Slides';
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly type: 'google_slides';
|
|
readonly width: 720;
|
|
}, {
|
|
readonly doesResize: true;
|
|
readonly embedOnPaste: true;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
readonly height: 500;
|
|
readonly hostnames: readonly ["gist.github.com"];
|
|
readonly title: 'GitHub Gist';
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly type: 'github_gist';
|
|
readonly width: 720;
|
|
}, {
|
|
readonly doesResize: true;
|
|
readonly embedOnPaste: true;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
readonly height: 500;
|
|
readonly hostnames: readonly ["replit.com"];
|
|
readonly title: 'Replit';
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly type: 'replit';
|
|
readonly width: 720;
|
|
}, {
|
|
readonly doesResize: true;
|
|
readonly embedOnPaste: true;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
readonly height: 500;
|
|
readonly hostnames: readonly ["felt.com"];
|
|
readonly title: 'Felt';
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly type: 'felt';
|
|
readonly width: 720;
|
|
}, {
|
|
readonly doesResize: true;
|
|
readonly embedOnPaste: true;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
readonly height: 500;
|
|
readonly hostnames: readonly ["open.spotify.com"];
|
|
readonly minHeight: 500;
|
|
readonly overrideOutlineRadius: 12;
|
|
readonly title: 'Spotify';
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly type: 'spotify';
|
|
readonly width: 720;
|
|
}, {
|
|
readonly doesResize: true;
|
|
readonly embedOnPaste: true;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
readonly height: 360;
|
|
readonly hostnames: readonly ["vimeo.com", "player.vimeo.com"];
|
|
readonly isAspectRatioLocked: true;
|
|
readonly sizeToContentAspectRatio: true;
|
|
readonly title: 'Vimeo';
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly type: 'vimeo';
|
|
readonly width: 640;
|
|
}, {
|
|
readonly backgroundColor: '#fff';
|
|
readonly doesResize: true;
|
|
readonly embedOnPaste: true;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
readonly height: 500;
|
|
readonly hostnames: readonly ["observablehq.com"];
|
|
readonly isAspectRatioLocked: false;
|
|
readonly title: 'Observable';
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly type: 'observable';
|
|
readonly width: 720;
|
|
}, {
|
|
readonly doesResize: true;
|
|
readonly embedOnPaste: true;
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
readonly height: 450;
|
|
readonly hostnames: readonly ["desmos.com"];
|
|
readonly title: 'Desmos';
|
|
readonly toEmbedUrl: (url: string) => string | undefined;
|
|
readonly type: 'desmos';
|
|
readonly width: 700;
|
|
}];
|
|
|
|
// @public
|
|
export const DEFAULT_MAX_ASSET_SIZE: number;
|
|
|
|
// @public
|
|
export const DEFAULT_MAX_IMAGE_DIMENSION = 5000;
|
|
|
|
// @public (undocumented)
|
|
export const DefaultA11yAnnouncer: MemoExoticComponent<() => "" | JSX.Element | undefined>;
|
|
|
|
// @public (undocumented)
|
|
export const DefaultActionsMenu: MemoExoticComponent<({ children, }: TLUiActionsMenuProps) => JSX.Element | undefined>;
|
|
|
|
// @public (undocumented)
|
|
export function DefaultActionsMenuContent(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function defaultAddFontsFromNode(node: Node_3, state: RichTextFontVisitorState, addFont: (font: TLFontFace_2) => void): RichTextFontVisitorState;
|
|
|
|
// @public (undocumented)
|
|
export const defaultAssetUtils: readonly [typeof ImageAssetUtil, typeof VideoAssetUtil, typeof BookmarkAssetUtil];
|
|
|
|
// @public (undocumented)
|
|
export const defaultBindingUtils: readonly [typeof ArrowBindingUtil];
|
|
|
|
// @public (undocumented)
|
|
const DefaultContextMenu: MemoExoticComponent<({ children, disabled, }: TLUiContextMenuProps) => JSX.Element>;
|
|
export { DefaultContextMenu as ContextMenu }
|
|
export { DefaultContextMenu }
|
|
|
|
// @public (undocumented)
|
|
export function DefaultContextMenuContent(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function DefaultDebugMenu({ children }: TLUiDebugMenuProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function DefaultDebugMenuContent({ customDebugFlags, customFeatureFlags, }: CustomDebugFlags): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export const DefaultDialogs: MemoExoticComponent<() => JSX.Element[]>;
|
|
|
|
// @public (undocumented)
|
|
export let defaultEditorAssetUrls: TLEditorAssetUrls;
|
|
|
|
// @public
|
|
export interface DefaultEmbedConfig {
|
|
// (undocumented)
|
|
readonly google_maps?: GoogleMapsEmbedConfig;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type DefaultEmbedDefinitionType = (typeof DEFAULT_EMBED_DEFINITIONS)[number]['type'];
|
|
|
|
// @public (undocumented)
|
|
export function DefaultFollowingIndicator(): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export const DefaultFontFaces: TLDefaultFonts;
|
|
|
|
// @public
|
|
export const defaultGeoTypeDefinitions: {
|
|
readonly 'arrow-down': {
|
|
readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
|
|
readonly icon: 'geo-arrow-down';
|
|
readonly snapType: 'polygon';
|
|
};
|
|
readonly 'arrow-left': {
|
|
readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
|
|
readonly icon: 'geo-arrow-left';
|
|
readonly snapType: 'polygon';
|
|
};
|
|
readonly 'arrow-right': {
|
|
readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
|
|
readonly icon: 'geo-arrow-right';
|
|
readonly snapType: 'polygon';
|
|
};
|
|
readonly 'arrow-up': {
|
|
readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
|
|
readonly icon: 'geo-arrow-up';
|
|
readonly snapType: 'polygon';
|
|
};
|
|
readonly 'check-box': {
|
|
readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
|
|
readonly icon: 'geo-check-box';
|
|
readonly snapType: 'polygon';
|
|
};
|
|
readonly 'rhombus-2': {
|
|
readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
|
|
readonly icon: 'geo-rhombus-2';
|
|
readonly snapType: 'polygon';
|
|
};
|
|
readonly 'x-box': {
|
|
readonly getPath: (w: number, h: number, shape: TLGeoShape, strokeWidth: number) => PathBuilder;
|
|
readonly icon: 'geo-x-box';
|
|
readonly snapType: 'polygon';
|
|
};
|
|
readonly cloud: {
|
|
readonly defaultSize: {
|
|
readonly h: 180;
|
|
readonly w: 300;
|
|
};
|
|
readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
|
|
readonly icon: 'geo-cloud';
|
|
readonly snapType: 'blobby';
|
|
};
|
|
readonly diamond: {
|
|
readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
|
|
readonly icon: 'geo-diamond';
|
|
readonly snapType: 'polygon';
|
|
};
|
|
readonly ellipse: {
|
|
readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
|
|
readonly icon: 'geo-ellipse';
|
|
readonly snapType: 'blobby';
|
|
};
|
|
readonly heart: {
|
|
readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
|
|
readonly icon: 'geo-heart';
|
|
readonly snapType: 'blobby';
|
|
};
|
|
readonly hexagon: {
|
|
readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
|
|
readonly icon: 'geo-hexagon';
|
|
readonly snapType: 'polygon';
|
|
};
|
|
readonly octagon: {
|
|
readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
|
|
readonly icon: 'geo-octagon';
|
|
readonly snapType: 'polygon';
|
|
};
|
|
readonly oval: {
|
|
readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
|
|
readonly icon: 'geo-oval';
|
|
readonly snapType: 'blobby';
|
|
};
|
|
readonly pentagon: {
|
|
readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
|
|
readonly icon: 'geo-pentagon';
|
|
readonly snapType: 'polygon';
|
|
};
|
|
readonly rectangle: {
|
|
readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
|
|
readonly icon: 'geo-rectangle';
|
|
readonly snapType: 'polygon';
|
|
};
|
|
readonly rhombus: {
|
|
readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
|
|
readonly icon: 'geo-rhombus';
|
|
readonly snapType: 'polygon';
|
|
};
|
|
readonly star: {
|
|
readonly defaultSize: {
|
|
readonly h: 190;
|
|
readonly w: 200;
|
|
};
|
|
readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
|
|
readonly icon: 'geo-star';
|
|
readonly snapType: 'polygon';
|
|
};
|
|
readonly trapezoid: {
|
|
readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
|
|
readonly icon: 'geo-trapezoid';
|
|
readonly snapType: 'polygon';
|
|
};
|
|
readonly triangle: {
|
|
readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
|
|
readonly icon: 'geo-triangle';
|
|
readonly snapType: 'polygon';
|
|
};
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export function defaultHandleExternalEmbedContent<T>(editor: Editor, { point, url, embed }: {
|
|
embed: T;
|
|
point?: VecLike;
|
|
url: string;
|
|
}): void;
|
|
|
|
// @public (undocumented)
|
|
export function defaultHandleExternalExcalidrawContent(editor: Editor, { point, content }: {
|
|
content: any;
|
|
point?: VecLike;
|
|
}): Promise<void>;
|
|
|
|
// @public (undocumented)
|
|
export function defaultHandleExternalFileAsset(editor: Editor, { file, assetId }: TLFileExternalAsset, options: TLDefaultExternalContentHandlerOpts): Promise<TLAsset<"bookmark" | "image" | "video">>;
|
|
|
|
// @public (undocumented)
|
|
export function defaultHandleExternalFileContent(editor: Editor, { point, files }: {
|
|
files: File[];
|
|
point?: VecLike;
|
|
}, options: TLDefaultExternalContentHandlerOpts): Promise<void>;
|
|
|
|
// @public (undocumented)
|
|
export function defaultHandleExternalFileReplaceContent(editor: Editor, { file, shapeId }: TLFileReplaceExternalContent, options: TLDefaultExternalContentHandlerOpts): Promise<TLAsset | undefined>;
|
|
|
|
// @public (undocumented)
|
|
export function defaultHandleExternalSvgTextContent(editor: Editor, { point, text }: {
|
|
point?: VecLike;
|
|
text: string;
|
|
}): Promise<void>;
|
|
|
|
// @public (undocumented)
|
|
export function defaultHandleExternalTextContent(editor: Editor, { point, text, html }: {
|
|
html?: string;
|
|
point?: VecLike;
|
|
text: string;
|
|
}): Promise<void>;
|
|
|
|
// @public (undocumented)
|
|
export function defaultHandleExternalTldrawContent(editor: Editor, { point, content }: {
|
|
content: TLContent;
|
|
point?: VecLike;
|
|
}): Promise<void>;
|
|
|
|
// @public (undocumented)
|
|
export function defaultHandleExternalUrlAsset(editor: Editor, { url }: TLUrlExternalAsset, { toasts, msg }: TLDefaultExternalContentHandlerOpts): Promise<TLBookmarkAsset>;
|
|
|
|
// @public (undocumented)
|
|
export function defaultHandleExternalUrlContent(editor: Editor, { point, url, shapeId }: {
|
|
point?: VecLike;
|
|
shapeId?: TLShapeId;
|
|
url: string;
|
|
}, { toasts, msg }: TLDefaultExternalContentHandlerOpts): Promise<void>;
|
|
|
|
// @public (undocumented)
|
|
export function DefaultHelperButtons({ children }: TLUiHelperButtonsProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function DefaultHelperButtonsContent(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export const DefaultHelpMenu: MemoExoticComponent<({ children }: TLUiHelpMenuProps) => JSX.Element | null>;
|
|
|
|
// @public (undocumented)
|
|
export function DefaultHelpMenuContent(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function DefaultImageToolbar({ children }: TLUiImageToolbarProps): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export const DefaultImageToolbarContent: NamedExoticComponent<DefaultImageToolbarContentProps>;
|
|
|
|
// @public (undocumented)
|
|
export interface DefaultImageToolbarContentProps {
|
|
// (undocumented)
|
|
imageShapeId: TLImageShape['id'];
|
|
// (undocumented)
|
|
isManipulating: boolean;
|
|
// (undocumented)
|
|
onEditAltTextStart(): void;
|
|
// (undocumented)
|
|
onManipulatingEnd(): void;
|
|
// (undocumented)
|
|
onManipulatingStart(): void;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export const DefaultKeyboardShortcutsDialog: MemoExoticComponent<({ children, }: TLUiKeyboardShortcutsDialogProps) => JSX.Element>;
|
|
|
|
// @public (undocumented)
|
|
export function DefaultKeyboardShortcutsDialogContent(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export const DefaultMainMenu: MemoExoticComponent<({ children }: TLUiMainMenuProps) => JSX.Element>;
|
|
|
|
// @public (undocumented)
|
|
export function DefaultMainMenuContent(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export const DefaultMenuPanel: MemoExoticComponent<() => JSX.Element | null>;
|
|
|
|
// @public (undocumented)
|
|
export function DefaultMinimap(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export const DefaultNavigationPanel: MemoExoticComponent<() => JSX.Element | null>;
|
|
|
|
// @public
|
|
export function DefaultNoteShapeAttribution({ name, firstName, color, scale, variant, }: TLNoteShapeAttributionProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export const defaultOverlayUtils: readonly [typeof ArrowBindingHintOverlayUtil, typeof ArrowHintOverlayUtil, typeof BrushOverlayUtil, typeof CollaboratorBrushOverlayUtil, typeof CollaboratorHintOverlayUtil, typeof CollaboratorScribbleOverlayUtil, typeof CollaboratorShapeIndicatorOverlayUtil, typeof ScribbleOverlayUtil, typeof SelectionForegroundOverlayUtil, typeof ShapeHandleOverlayUtil, typeof ShapeIndicatorOverlayUtil, typeof SnapIndicatorOverlayUtil, typeof ZoomBrushOverlayUtil];
|
|
|
|
// @public (undocumented)
|
|
export const DefaultPageMenu: MemoExoticComponent<() => JSX.Element>;
|
|
|
|
// @public (undocumented)
|
|
function DefaultPeopleMenu({ children }: DefaultPeopleMenuProps): JSX.Element | null;
|
|
export { DefaultPeopleMenu }
|
|
export { DefaultPeopleMenu as PeopleMenu }
|
|
|
|
// @public (undocumented)
|
|
export function DefaultPeopleMenuAvatar({ userId }: TLUiPeopleMenuAvatarProps): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export function DefaultPeopleMenuContent({ userIds }: DefaultPeopleMenuContentProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export interface DefaultPeopleMenuContentProps {
|
|
// (undocumented)
|
|
userIds: TLUserId[];
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function DefaultPeopleMenuFacePile({ userIds, userName, userColor, }: TLUiPeopleMenuFacePileProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export const DefaultPeopleMenuItem: NamedExoticComponent<TLUiPeopleMenuItemProps>;
|
|
|
|
// @public (undocumented)
|
|
interface DefaultPeopleMenuProps {
|
|
// (undocumented)
|
|
children?: ReactNode;
|
|
}
|
|
export { DefaultPeopleMenuProps }
|
|
export { DefaultPeopleMenuProps as PeopleMenuProps }
|
|
|
|
// @public (undocumented)
|
|
export const DefaultQuickActions: MemoExoticComponent<({ children, }: TLUiQuickActionsProps) => JSX.Element>;
|
|
|
|
// @public (undocumented)
|
|
export function DefaultQuickActionsContent(): JSX.Element | undefined;
|
|
|
|
// @public
|
|
export const DefaultRichTextToolbar: React_3.NamedExoticComponent<TLUiRichTextToolbarProps>;
|
|
|
|
// @public
|
|
export function DefaultRichTextToolbarContent({ textEditor, onEditLinkStart, }: DefaultRichTextToolbarContentProps): JSX.Element[];
|
|
|
|
// @public (undocumented)
|
|
export interface DefaultRichTextToolbarContentProps {
|
|
// (undocumented)
|
|
onEditLinkStart?(): void;
|
|
// (undocumented)
|
|
textEditor: TiptapEditor;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export const defaultShapeTools: readonly [typeof TextShapeTool, typeof DrawShapeTool, typeof GeoShapeTool, typeof NoteShapeTool, typeof LineShapeTool, typeof FrameShapeTool, typeof ArrowShapeTool, typeof HighlightShapeTool];
|
|
|
|
// @public (undocumented)
|
|
export const defaultShapeUtils: readonly [typeof TextShapeUtil, typeof BookmarkShapeUtil, typeof DrawShapeUtil, typeof GeoShapeUtil, typeof NoteShapeUtil, typeof LineShapeUtil, typeof FrameShapeUtil, typeof ArrowShapeUtil, typeof HighlightShapeUtil, typeof EmbedShapeUtil, typeof ImageShapeUtil, typeof VideoShapeUtil];
|
|
|
|
// @public (undocumented)
|
|
export function DefaultSharePanel(): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export const DefaultStylePanel: MemoExoticComponent<({ isMobile, styles, children, }: TLUiStylePanelProps) => JSX.Element | null>;
|
|
|
|
// @public (undocumented)
|
|
export function DefaultStylePanelContent(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export const DefaultToasts: MemoExoticComponent<() => JSX.Element>;
|
|
|
|
// @public
|
|
export const DefaultToolbar: MemoExoticComponent<({ children, orientation, minItems, minSizePx, maxItems, maxSizePx, }: DefaultToolbarProps) => JSX.Element>;
|
|
|
|
// @public (undocumented)
|
|
export function DefaultToolbarContent(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export interface DefaultToolbarProps {
|
|
// (undocumented)
|
|
children?: ReactNode;
|
|
// (undocumented)
|
|
maxItems?: number;
|
|
// (undocumented)
|
|
maxSizePx?: number;
|
|
// (undocumented)
|
|
minItems?: number;
|
|
// (undocumented)
|
|
minSizePx?: number;
|
|
// (undocumented)
|
|
orientation?: 'horizontal' | 'vertical';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export const defaultTools: readonly [typeof EraserTool, typeof HandTool, typeof LaserTool, typeof ZoomTool, typeof SelectTool];
|
|
|
|
// @public (undocumented)
|
|
export function DefaultUserPresenceEditor(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export const DefaultVideoToolbar: NamedExoticComponent<TLUiVideoToolbarProps>;
|
|
|
|
// @public (undocumented)
|
|
export const DefaultVideoToolbarContent: NamedExoticComponent<DefaultVideoToolbarContentProps>;
|
|
|
|
// @public (undocumented)
|
|
export interface DefaultVideoToolbarContentProps {
|
|
// (undocumented)
|
|
onEditAltTextStart(): void;
|
|
// (undocumented)
|
|
videoShapeId: TLVideoShape['id'];
|
|
}
|
|
|
|
// @public
|
|
export const defaultWrappingPairs: Record<string, readonly [string, string]>;
|
|
|
|
// @public (undocumented)
|
|
export const DefaultZoomMenu: MemoExoticComponent<({ children }: TLUiZoomMenuProps) => JSX.Element>;
|
|
|
|
// @public (undocumented)
|
|
export function DefaultZoomMenuContent(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function DeleteMenuItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function DiamondToolbarItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function DistributeMenuItems(): JSX.Element;
|
|
|
|
// @internal (undocumented)
|
|
export function downloadFile(file: File, doc?: Document): void;
|
|
|
|
// @public
|
|
export function downsizeImage(blob: Blob, width: number, height: number, opts?: {
|
|
quality?: number;
|
|
type?: string;
|
|
}): Promise<Blob>;
|
|
|
|
// @public (undocumented)
|
|
export interface DrawPathBuilderDOpts {
|
|
// (undocumented)
|
|
offset?: number;
|
|
// (undocumented)
|
|
onlyFilled?: boolean;
|
|
// (undocumented)
|
|
passes?: number;
|
|
// (undocumented)
|
|
randomSeed: string;
|
|
// (undocumented)
|
|
roundness?: number;
|
|
// (undocumented)
|
|
strokeWidth: number;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface DrawPathBuilderOpts extends BasePathBuilderOpts, DrawPathBuilderDOpts {
|
|
// (undocumented)
|
|
style: 'draw';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface DrawShapeOptions extends ShapeOptionsWithDisplayValues<TLDrawShape, DrawShapeUtilDisplayValues> {
|
|
readonly maxPointsPerShape: number;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class DrawShapeTool extends StateNode {
|
|
// (undocumented)
|
|
static children(): TLStateNodeConstructor[];
|
|
// (undocumented)
|
|
static id: string;
|
|
// (undocumented)
|
|
static initial: string;
|
|
// (undocumented)
|
|
static isLockable: boolean;
|
|
// (undocumented)
|
|
onExit(): void;
|
|
// (undocumented)
|
|
shapeType: string;
|
|
// (undocumented)
|
|
static useCoalescedEvents: boolean;
|
|
}
|
|
|
|
// @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)
|
|
getIndicatorPath(shape: TLDrawShape): Path2D;
|
|
// (undocumented)
|
|
getInterpolatedProps(startShape: TLDrawShape, endShape: TLDrawShape, t: number): TLDrawShapeProps;
|
|
// (undocumented)
|
|
hideResizeHandles(shape: TLDrawShape): boolean;
|
|
// (undocumented)
|
|
hideRotateHandle(shape: TLDrawShape): boolean;
|
|
// (undocumented)
|
|
hideSelectionBoundsFg(shape: TLDrawShape): boolean;
|
|
// (undocumented)
|
|
static migrations: TLPropsMigrations;
|
|
// (undocumented)
|
|
onResize(shape: TLDrawShape, info: TLResizeInfo<TLDrawShape>): {
|
|
props: {
|
|
scaleX: number;
|
|
scaleY: number;
|
|
};
|
|
} | undefined;
|
|
// (undocumented)
|
|
options: DrawShapeOptions;
|
|
// (undocumented)
|
|
static props: RecordProps<TLDrawShape>;
|
|
// (undocumented)
|
|
toSvg(shape: TLDrawShape, ctx: SvgExportContext): JSX.Element;
|
|
// (undocumented)
|
|
static type: 'draw';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface DrawShapeUtilDisplayValues {
|
|
// (undocumented)
|
|
fillColor: string;
|
|
// (undocumented)
|
|
patternFillFallbackColor: string;
|
|
// (undocumented)
|
|
strokeColor: string;
|
|
// (undocumented)
|
|
strokeWidth: number;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function DrawToolbarItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function DuplicateMenuItem(): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export function EditLinkMenuItem(): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export function EditMenuSubmenu(): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export function EditSubmenu(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export interface ElbowArrowBox {
|
|
expanded: Box;
|
|
original: Box;
|
|
}
|
|
|
|
// @public
|
|
export interface ElbowArrowBoxEdges {
|
|
// (undocumented)
|
|
bottom: ElbowArrowEdge | null;
|
|
// (undocumented)
|
|
left: ElbowArrowEdge | null;
|
|
// (undocumented)
|
|
right: ElbowArrowEdge | null;
|
|
// (undocumented)
|
|
top: ElbowArrowEdge | null;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface ElbowArrowBoxes {
|
|
A: Box;
|
|
B: Box;
|
|
common: Box;
|
|
}
|
|
|
|
// @public
|
|
export interface ElbowArrowEdge {
|
|
cross: ElbowArrowRange;
|
|
crossTarget: number;
|
|
expanded: null | number;
|
|
isPartial: boolean;
|
|
value: number;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface ElbowArrowInfo extends ElbowArrowInfoWithoutRoute {
|
|
// (undocumented)
|
|
midXRange: {
|
|
hi: number;
|
|
lo: number;
|
|
} | null;
|
|
// (undocumented)
|
|
midYRange: {
|
|
hi: number;
|
|
lo: number;
|
|
} | null;
|
|
route: ElbowArrowRoute | null;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface ElbowArrowInfoWithoutRoute {
|
|
A: ElbowArrowTargetBox;
|
|
B: ElbowArrowTargetBox;
|
|
common: ElbowArrowBox;
|
|
gapX: number;
|
|
gapY: number;
|
|
midX: null | number;
|
|
midY: null | number;
|
|
options: ElbowArrowOptions;
|
|
swapOrder: boolean;
|
|
}
|
|
|
|
// @public
|
|
export interface ElbowArrowMidpointHandle {
|
|
// (undocumented)
|
|
axis: 'x' | 'y';
|
|
point: VecLike;
|
|
segmentEnd: VecLike;
|
|
segmentStart: VecLike;
|
|
}
|
|
|
|
// @public
|
|
export interface ElbowArrowOptions {
|
|
// (undocumented)
|
|
elbowMidpoint: number;
|
|
// (undocumented)
|
|
expandElbowLegLength: number;
|
|
// (undocumented)
|
|
minElbowLegLength: number;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface ElbowArrowRange {
|
|
// (undocumented)
|
|
max: number;
|
|
// (undocumented)
|
|
min: number;
|
|
}
|
|
|
|
// @public
|
|
export interface ElbowArrowRoute {
|
|
// @internal
|
|
aEdgePicking: ElbowArrowSideReason;
|
|
// @internal
|
|
bEdgePicking: ElbowArrowSideReason;
|
|
distance: number;
|
|
midpointHandle: ElbowArrowMidpointHandle | null;
|
|
// @internal
|
|
name: string;
|
|
points: Vec[];
|
|
skipPointsWhenDrawing: Set<Vec>;
|
|
}
|
|
|
|
// @public
|
|
export type ElbowArrowSide = 'bottom' | 'left' | 'right' | 'top';
|
|
|
|
// @internal
|
|
export type ElbowArrowSideReason = 'auto' | 'fallback' | 'manual';
|
|
|
|
// @public (undocumented)
|
|
export interface ElbowArrowTargetBox extends ElbowArrowBox {
|
|
arrowheadOffset: number;
|
|
edges: ElbowArrowBoxEdges;
|
|
geometry: Geometry2d | null;
|
|
isExact: boolean;
|
|
isPoint: boolean;
|
|
minEndSegmentLength: number;
|
|
target: Vec;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function EllipseToolbarItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export interface EmbedDefinition<Config = never> {
|
|
// (undocumented)
|
|
readonly backgroundColor?: string;
|
|
// (undocumented)
|
|
readonly canEditWhileLocked?: boolean;
|
|
// (undocumented)
|
|
readonly doesResize: boolean;
|
|
// (undocumented)
|
|
readonly embedOnPaste?: boolean;
|
|
// (undocumented)
|
|
readonly fromEmbedUrl: (url: string) => string | undefined;
|
|
// (undocumented)
|
|
readonly height: number;
|
|
// (undocumented)
|
|
readonly hostnames: readonly string[];
|
|
// (undocumented)
|
|
readonly instructionLink?: string;
|
|
// (undocumented)
|
|
readonly isAspectRatioLocked?: boolean;
|
|
// (undocumented)
|
|
readonly minHeight?: number;
|
|
// (undocumented)
|
|
readonly minWidth?: number;
|
|
// (undocumented)
|
|
readonly overrideOutlineRadius?: number;
|
|
// (undocumented)
|
|
readonly overridePermissions?: TLEmbedShapePermissions;
|
|
readonly sizeToContentAspectRatio?: boolean;
|
|
// (undocumented)
|
|
readonly title: string;
|
|
// (undocumented)
|
|
readonly toEmbedUrl: (url: string, config?: Config) => string | undefined;
|
|
// (undocumented)
|
|
readonly type: string;
|
|
// (undocumented)
|
|
readonly width: number;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface EmbedShapeOptions extends ShapeOptionsWithDisplayValues<TLEmbedShape, EmbedShapeUtilDisplayValues> {
|
|
readonly embedConfig?: DefaultEmbedConfig & Record<string, unknown>;
|
|
readonly embedDefinitions: readonly TLEmbedDefinition[];
|
|
}
|
|
|
|
// @public
|
|
export const embedShapePermissionDefaults: {
|
|
readonly 'allow-downloads-without-user-activation': false;
|
|
readonly 'allow-downloads': false;
|
|
readonly 'allow-forms': true;
|
|
readonly 'allow-modals': false;
|
|
readonly 'allow-orientation-lock': false;
|
|
readonly 'allow-pointer-lock': false;
|
|
readonly 'allow-popups-to-escape-sandbox': false;
|
|
readonly 'allow-popups': true;
|
|
readonly 'allow-presentation': false;
|
|
readonly 'allow-same-origin': true;
|
|
readonly 'allow-scripts': true;
|
|
readonly 'allow-storage-access-by-user-activation': false;
|
|
readonly 'allow-top-navigation-by-user-activation': false;
|
|
readonly 'allow-top-navigation': false;
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export class EmbedShapeUtil extends BaseBoxShapeUtil<TLEmbedShape> {
|
|
// (undocumented)
|
|
canEdit(shape: TLEmbedShape): boolean;
|
|
// (undocumented)
|
|
canEditInReadonly(shape: TLEmbedShape): boolean;
|
|
// (undocumented)
|
|
canEditWhileLocked(shape: TLEmbedShape): boolean;
|
|
// (undocumented)
|
|
canResize(shape: TLEmbedShape): boolean;
|
|
// (undocumented)
|
|
component(shape: TLEmbedShape): JSX.Element | null;
|
|
// (undocumented)
|
|
getAriaDescriptor(shape: TLEmbedShape): string | undefined;
|
|
// (undocumented)
|
|
getDefaultProps(): TLEmbedShape['props'];
|
|
// (undocumented)
|
|
getEmbedDefinition(url: string): TLEmbedResult;
|
|
// (undocumented)
|
|
getEmbedDefinitions(): readonly TLEmbedDefinition[];
|
|
// (undocumented)
|
|
getGeometry(shape: TLEmbedShape): Geometry2d;
|
|
// (undocumented)
|
|
getIndicatorPath(shape: TLEmbedShape): Path2D;
|
|
// (undocumented)
|
|
getInterpolatedProps(startShape: TLEmbedShape, endShape: TLEmbedShape, t: number): TLEmbedShapeProps;
|
|
// (undocumented)
|
|
getText(shape: TLEmbedShape): string;
|
|
// (undocumented)
|
|
hideSelectionBoundsFg(shape: TLEmbedShape): boolean;
|
|
// (undocumented)
|
|
isAspectRatioLocked(shape: TLEmbedShape): boolean;
|
|
// (undocumented)
|
|
static migrations: TLPropsMigrations;
|
|
// (undocumented)
|
|
onResize(shape: TLEmbedShape, info: TLResizeInfo<TLEmbedShape>): TLEmbedShape;
|
|
// (undocumented)
|
|
options: EmbedShapeOptions;
|
|
// (undocumented)
|
|
static props: RecordProps<TLEmbedShape>;
|
|
resolveAspectRatio(shape: TLEmbedShape): Promise<void>;
|
|
// @deprecated (undocumented)
|
|
static setEmbedDefinitions(embedDefinitions: readonly TLEmbedDefinition[]): void;
|
|
// (undocumented)
|
|
static type: 'embed';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface EmbedShapeUtilDisplayValues {
|
|
// (undocumented)
|
|
showShadow: boolean;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class EraserTool extends StateNode {
|
|
// (undocumented)
|
|
static children(): TLStateNodeConstructor[];
|
|
// (undocumented)
|
|
static id: string;
|
|
// (undocumented)
|
|
info: {
|
|
onInteractionEnd?: string;
|
|
};
|
|
// (undocumented)
|
|
static initial: string;
|
|
// (undocumented)
|
|
static isLockable: boolean;
|
|
// (undocumented)
|
|
maybeReturnToOriginatingTool(): void;
|
|
// (undocumented)
|
|
onEnter(info?: {
|
|
onInteractionEnd?: string;
|
|
}): void;
|
|
// (undocumented)
|
|
onExit(): void;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function EraserToolbarItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export interface EventsProviderProps {
|
|
// (undocumented)
|
|
children: React_2.ReactNode;
|
|
// (undocumented)
|
|
onEvent?: TLUiEventHandler;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function ExampleDialog({ title, body, cancel, confirm, displayDontShowAgain, maxWidth, onCancel, onContinue, }: ExampleDialogProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export interface ExampleDialogProps {
|
|
// (undocumented)
|
|
body?: React_3.ReactNode;
|
|
// (undocumented)
|
|
cancel?: string;
|
|
// (undocumented)
|
|
confirm?: string;
|
|
// (undocumented)
|
|
displayDontShowAgain?: boolean;
|
|
// (undocumented)
|
|
maxWidth?: string;
|
|
// (undocumented)
|
|
onCancel(): void;
|
|
// (undocumented)
|
|
onContinue(): void;
|
|
// (undocumented)
|
|
title?: string;
|
|
}
|
|
|
|
// @public
|
|
export function exportAs(editor: Editor, ids: TLShapeId[], opts: ExportAsOptions): Promise<void>;
|
|
|
|
// @public (undocumented)
|
|
export function ExportAsMenuGroup(): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export interface ExportAsOptions extends TLImageExportOptions {
|
|
format: TLExportType;
|
|
name?: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function ExportFileContentSubMenu(): JSX.Element | null;
|
|
|
|
export { Extension }
|
|
|
|
export { Extensions }
|
|
|
|
// @public (undocumented)
|
|
export function ExtrasGroup(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function FeatureFlags(props: FeatureFlagsProps): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export interface FeatureFlagsProps {
|
|
// (undocumented)
|
|
customFeatureFlags?: Record<string, DebugFlag<boolean>> | undefined;
|
|
}
|
|
|
|
// @public
|
|
export function fitFrameToContent(editor: Editor, id: TLShapeId, opts?: {
|
|
padding: number;
|
|
}): void;
|
|
|
|
// @public (undocumented)
|
|
export function FitFrameToContentMenuItem(): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export interface FrameShapeOptions extends ShapeOptionsWithDisplayValues<TLFrameShape, FrameShapeUtilDisplayValues> {
|
|
resizeChildren: boolean;
|
|
showColors: boolean;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class FrameShapeTool extends BaseBoxShapeTool {
|
|
// (undocumented)
|
|
static id: string;
|
|
// (undocumented)
|
|
static initial: string;
|
|
// (undocumented)
|
|
onCreate(shape: null | TLShape): void;
|
|
// (undocumented)
|
|
shapeType: 'frame';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class FrameShapeUtil extends BaseFrameLikeShapeUtil<TLFrameShape> {
|
|
// (undocumented)
|
|
canEdit(shape: TLFrameShape, info: TLEditStartInfo): boolean;
|
|
// (undocumented)
|
|
canResize(shape: TLFrameShape): boolean;
|
|
// (undocumented)
|
|
canResizeChildren(shape: TLFrameShape): boolean;
|
|
// (undocumented)
|
|
component(shape: TLFrameShape): JSX.Element;
|
|
// (undocumented)
|
|
static configure<T extends TLShapeUtilConstructor<any, any>>(this: T, options: T extends new (...args: any[]) => {
|
|
options: infer Options;
|
|
} ? Partial<Options> : never): T;
|
|
// (undocumented)
|
|
getAriaDescriptor(shape: TLFrameShape): string;
|
|
// (undocumented)
|
|
getDefaultProps(): TLFrameShape['props'];
|
|
// (undocumented)
|
|
getGeometry(shape: TLFrameShape): Geometry2d;
|
|
// (undocumented)
|
|
getIndicatorPath(shape: TLFrameShape): Path2D;
|
|
// (undocumented)
|
|
getInterpolatedProps(startShape: TLFrameShape, endShape: TLFrameShape, t: number): TLFrameShapeProps;
|
|
// (undocumented)
|
|
getText(shape: TLFrameShape): string | undefined;
|
|
// (undocumented)
|
|
isExportBoundsContainer(): boolean;
|
|
// (undocumented)
|
|
static migrations: TLPropsMigrations;
|
|
// (undocumented)
|
|
onDoubleClickCorner(shape: TLFrameShape): {
|
|
id: TLShapeId_2;
|
|
type: "frame";
|
|
};
|
|
// (undocumented)
|
|
onDoubleClickEdge(shape: TLFrameShape, info: TLClickEventInfo): {
|
|
id: TLShapeId_2;
|
|
props: {
|
|
h: number;
|
|
w: number;
|
|
};
|
|
type: "frame";
|
|
x: number;
|
|
y: number;
|
|
} | undefined;
|
|
// (undocumented)
|
|
options: FrameShapeOptions;
|
|
// (undocumented)
|
|
static props: RecordProps<TLFrameShape>;
|
|
// (undocumented)
|
|
toSvg(shape: TLFrameShape, ctx: SvgExportContext): JSX.Element;
|
|
// (undocumented)
|
|
static type: 'frame';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface FrameShapeUtilDisplayValues {
|
|
// (undocumented)
|
|
fillColor: string;
|
|
// (undocumented)
|
|
headingFillColor: string;
|
|
// (undocumented)
|
|
headingStrokeColor: string;
|
|
// (undocumented)
|
|
headingTextColor: string;
|
|
// (undocumented)
|
|
showColorsFillColor: string;
|
|
// (undocumented)
|
|
showColorsHeadingFillColor: string;
|
|
// (undocumented)
|
|
showColorsHeadingStrokeColor: string;
|
|
// (undocumented)
|
|
showColorsHeadingTextColor: string;
|
|
// (undocumented)
|
|
showColorsStrokeColor: string;
|
|
// (undocumented)
|
|
strokeColor: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function FrameToolbarItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export interface GeoShapeOptions extends ShapeOptionsWithDisplayValues<TLGeoShape, GeoShapeUtilDisplayValues> {
|
|
customGeoTypes?: Record<string, GeoTypeDefinition>;
|
|
// (undocumented)
|
|
showTextOutline: boolean;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class GeoShapeTool extends StateNode {
|
|
// (undocumented)
|
|
static children(): TLStateNodeConstructor[];
|
|
// (undocumented)
|
|
static id: string;
|
|
// (undocumented)
|
|
static initial: string;
|
|
// (undocumented)
|
|
shapeType: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
|
|
// (undocumented)
|
|
canEdit(shape: TLGeoShape): boolean;
|
|
// (undocumented)
|
|
component(shape: TLGeoShape): JSX.Element;
|
|
// (undocumented)
|
|
static configure<T extends TLShapeUtilConstructor<any, any>>(this: T, options: T extends new (...args: any[]) => {
|
|
options: infer Options;
|
|
} ? Partial<Options> : never): T;
|
|
// (undocumented)
|
|
getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[];
|
|
// (undocumented)
|
|
getDefaultProps(): TLGeoShape['props'];
|
|
// (undocumented)
|
|
getFontFaces(shape: TLGeoShape): TLFontFace[];
|
|
// (undocumented)
|
|
getGeometry(shape: TLGeoShape): Group2d;
|
|
// (undocumented)
|
|
getHandleSnapGeometry(shape: TLGeoShape): HandleSnapGeometry;
|
|
// (undocumented)
|
|
getIndicatorPath(shape: TLGeoShape): Path2D | undefined;
|
|
// (undocumented)
|
|
getInterpolatedProps(startShape: TLGeoShape, endShape: TLGeoShape, t: number): TLGeoShapeProps;
|
|
// (undocumented)
|
|
getText(shape: TLGeoShape): string;
|
|
// (undocumented)
|
|
static migrations: TLPropsMigrations;
|
|
// (undocumented)
|
|
onBeforeCreate(shape: TLGeoShape): {
|
|
id: TLShapeId;
|
|
index: IndexKey;
|
|
isLocked: boolean;
|
|
meta: JsonObject;
|
|
opacity: TLOpacityType;
|
|
parentId: TLParentId;
|
|
props: {
|
|
align: TLDefaultHorizontalAlignStyle;
|
|
color: TLDefaultColorStyle;
|
|
dash: TLDefaultDashStyle;
|
|
fill: TLDefaultFillStyle;
|
|
flipX: boolean;
|
|
flipY: boolean;
|
|
font: TLDefaultFontStyle;
|
|
geo: TLGeoShapeGeoStyle;
|
|
growY: number;
|
|
h: number;
|
|
labelColor: TLDefaultColorStyle;
|
|
richText: TLRichText;
|
|
scale: number;
|
|
size: TLDefaultSizeStyle;
|
|
url: string;
|
|
verticalAlign: TLDefaultVerticalAlignStyle;
|
|
w: number;
|
|
};
|
|
rotation: number;
|
|
type: "geo";
|
|
typeName: 'shape';
|
|
x: number;
|
|
y: number;
|
|
} | undefined;
|
|
// (undocumented)
|
|
onBeforeUpdate(prev: TLGeoShape, next: TLGeoShape): {
|
|
id: TLShapeId;
|
|
index: IndexKey;
|
|
isLocked: boolean;
|
|
meta: JsonObject;
|
|
opacity: TLOpacityType;
|
|
parentId: TLParentId;
|
|
props: {
|
|
align: TLDefaultHorizontalAlignStyle;
|
|
color: TLDefaultColorStyle;
|
|
dash: TLDefaultDashStyle;
|
|
fill: TLDefaultFillStyle;
|
|
flipX: boolean;
|
|
flipY: boolean;
|
|
font: TLDefaultFontStyle;
|
|
geo: TLGeoShapeGeoStyle;
|
|
growY: number;
|
|
h: number;
|
|
labelColor: TLDefaultColorStyle;
|
|
richText: TLRichText;
|
|
scale: number;
|
|
size: TLDefaultSizeStyle;
|
|
url: string;
|
|
verticalAlign: TLDefaultVerticalAlignStyle;
|
|
w: number;
|
|
};
|
|
rotation: number;
|
|
type: "geo";
|
|
typeName: 'shape';
|
|
x: number;
|
|
y: number;
|
|
} | undefined;
|
|
// (undocumented)
|
|
onDoubleClick(shape: TLGeoShape): {
|
|
id: TLShapeId;
|
|
index: IndexKey;
|
|
isLocked: boolean;
|
|
meta: JsonObject;
|
|
opacity: TLOpacityType;
|
|
parentId: TLParentId;
|
|
props: {
|
|
align: TLDefaultHorizontalAlignStyle;
|
|
color: TLDefaultColorStyle;
|
|
dash: TLDefaultDashStyle;
|
|
fill: TLDefaultFillStyle;
|
|
flipX: boolean;
|
|
flipY: boolean;
|
|
font: TLDefaultFontStyle;
|
|
geo: TLGeoShapeGeoStyle;
|
|
growY: number;
|
|
h: number;
|
|
labelColor: TLDefaultColorStyle;
|
|
richText: TLRichText;
|
|
scale: number;
|
|
size: TLDefaultSizeStyle;
|
|
url: string;
|
|
verticalAlign: TLDefaultVerticalAlignStyle;
|
|
w: number;
|
|
};
|
|
rotation: number;
|
|
type: "geo";
|
|
typeName: 'shape';
|
|
x: number;
|
|
y: number;
|
|
} | {
|
|
id: TLShapeId;
|
|
index: IndexKey;
|
|
isLocked: boolean;
|
|
meta: JsonObject;
|
|
opacity: TLOpacityType;
|
|
parentId: TLParentId;
|
|
props: {
|
|
geo: 'check-box';
|
|
};
|
|
rotation: number;
|
|
type: "geo";
|
|
typeName: 'shape';
|
|
x: number;
|
|
y: number;
|
|
} | {
|
|
id: TLShapeId;
|
|
index: IndexKey;
|
|
isLocked: boolean;
|
|
meta: JsonObject;
|
|
opacity: TLOpacityType;
|
|
parentId: TLParentId;
|
|
props: {
|
|
geo: 'rectangle';
|
|
};
|
|
rotation: number;
|
|
type: "geo";
|
|
typeName: 'shape';
|
|
x: number;
|
|
y: number;
|
|
} | undefined;
|
|
// (undocumented)
|
|
onResize(shape: TLGeoShape, { handle, newPoint, scaleX, scaleY, initialShape }: TLResizeInfo<TLGeoShape>): {
|
|
props: {
|
|
flipX: boolean;
|
|
flipY: boolean;
|
|
growY: number;
|
|
h: number;
|
|
w: number;
|
|
};
|
|
x: number;
|
|
y: number;
|
|
};
|
|
// (undocumented)
|
|
options: GeoShapeOptions;
|
|
// (undocumented)
|
|
static props: RecordProps<TLGeoShape>;
|
|
// (undocumented)
|
|
toSvg(shape: TLGeoShape, ctx: SvgExportContext): JSX.Element;
|
|
// (undocumented)
|
|
static type: 'geo';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface GeoShapeUtilDisplayValues {
|
|
// (undocumented)
|
|
fillColor: string;
|
|
// (undocumented)
|
|
labelColor: string;
|
|
// (undocumented)
|
|
labelEdgeMargin: number;
|
|
// (undocumented)
|
|
labelExtraPadding: number;
|
|
// (undocumented)
|
|
labelFontFamily: string;
|
|
// (undocumented)
|
|
labelFontSize: number;
|
|
// (undocumented)
|
|
labelFontStyle: string;
|
|
// (undocumented)
|
|
labelFontVariant: string;
|
|
// (undocumented)
|
|
labelFontWeight: string;
|
|
// (undocumented)
|
|
labelHorizontalAlign: 'center' | 'end' | 'start';
|
|
// (undocumented)
|
|
labelLineHeight: number;
|
|
// (undocumented)
|
|
labelMinWidth: number;
|
|
// (undocumented)
|
|
labelPadding: number;
|
|
// (undocumented)
|
|
labelVerticalAlign: 'end' | 'middle' | 'start';
|
|
// (undocumented)
|
|
minSizeWithLabel: number;
|
|
// (undocumented)
|
|
patternFillFallbackColor: string;
|
|
// (undocumented)
|
|
strokeColor: string;
|
|
// (undocumented)
|
|
strokeRoundness: number;
|
|
// (undocumented)
|
|
strokeWidth: number;
|
|
}
|
|
|
|
// @public
|
|
export interface GeoTypeDefinition {
|
|
defaultSize?: {
|
|
h: number;
|
|
w: number;
|
|
};
|
|
getPath(w: number, h: number, shape: TLGeoShape, strokeWidth: number): PathBuilder;
|
|
icon: string;
|
|
onDoubleClick?(shape: TLGeoShape): {
|
|
props: Partial<TLGeoShape['props']>;
|
|
} | void;
|
|
snapType: 'blobby' | 'polygon';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function getArrowBindings(editor: Editor, shape: TLArrowShape): TLArrowBindings;
|
|
|
|
// @public (undocumented)
|
|
export function getArrowInfo(editor: Editor, shape: TLArrowShape | TLShapeId): TLArrowInfo | undefined;
|
|
|
|
// @public
|
|
export function getArrowTargetState(editor: Editor): ArrowTargetState | null;
|
|
|
|
// @public (undocumented)
|
|
export function getArrowTerminalsInArrowSpace(editor: Editor, shape: TLArrowShape, bindings: TLArrowBindings): {
|
|
end: Vec;
|
|
start: Vec;
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export function getAssetInfo(editor: Editor, file: File, assetId?: TLAssetId): Promise<null | TLAsset>;
|
|
|
|
// @public
|
|
export function getColorStyleItems(colors: TLThemeColors): StyleValuesForUi<string>;
|
|
|
|
// @public (undocumented)
|
|
export function getCropBox<T extends ShapeWithCrop>(shape: T, info: TLCropInfo<T>, opts?: CropBoxOptions): {
|
|
id: TLShapeId;
|
|
props: ShapeWithCrop['props'];
|
|
type: T['type'];
|
|
x: number;
|
|
y: number;
|
|
} | undefined;
|
|
|
|
// @public (undocumented)
|
|
export function getDefaultCrop(): TLShapeCrop;
|
|
|
|
// @public
|
|
export function getDisplayValues<Shape extends TLShape, DisplayValues extends object>(util: {
|
|
editor: Editor;
|
|
options: ShapeOptionsWithDisplayValues<Shape, DisplayValues>;
|
|
}, shape: Shape, colorMode?: 'dark' | 'light'): DisplayValues;
|
|
|
|
// @public
|
|
export function getEmbedInfo(definitions: readonly TLEmbedDefinition[], inputUrl: string, embedConfig?: Record<string, unknown>): TLEmbedResult;
|
|
|
|
// @public (undocumented)
|
|
export function getFontFamily(theme: TLTheme, font: string): string;
|
|
|
|
// @public
|
|
export function getFontStyleItems(theme: TLTheme): StyleValuesForUi<string>;
|
|
|
|
// @public
|
|
export function getGeoTypeDefinition(name: string, customGeoTypes?: Record<string, GeoTypeDefinition>): GeoTypeDefinition | undefined;
|
|
|
|
// @public (undocumented)
|
|
export function getHitShapeOnCanvasPointerDown(editor: Editor, hitLabels?: boolean): TLShape | undefined;
|
|
|
|
// @public (undocumented)
|
|
export function getPointsFromDrawSegment(segment: TLDrawShapeSegment, scaleX: number, scaleY: number, points?: Vec[]): Vec[];
|
|
|
|
// @public (undocumented)
|
|
export function getPointsFromDrawSegments(segments: TLDrawShapeSegment[], scaleX?: number, scaleY?: number): Vec[];
|
|
|
|
export { getSchema }
|
|
|
|
// @public
|
|
export function getStroke(points: VecLike[], options?: StrokeOptions): Vec[];
|
|
|
|
// @public
|
|
export function getStrokeOutlinePoints(strokePoints: StrokePoint[], options?: StrokeOptions): Vec[];
|
|
|
|
// @public
|
|
export function getStrokePoints(rawInputPoints: VecLike[], options?: StrokeOptions): StrokePoint[];
|
|
|
|
// @public
|
|
export function getSvgPathFromStrokePoints(points: StrokePoint[], closed?: boolean): string;
|
|
|
|
// @public
|
|
export function getTipTapDefaultExtensions(starterKitOptions?: Partial<StarterKitOptions>): Extensions;
|
|
|
|
// @public
|
|
export function getUncroppedSize(shapeSize: {
|
|
h: number;
|
|
w: number;
|
|
}, crop: null | TLShapeCrop): {
|
|
h: number;
|
|
w: number;
|
|
};
|
|
|
|
// @public
|
|
export interface GoogleMapsEmbedConfig {
|
|
// (undocumented)
|
|
readonly apiKey?: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function GroupMenuItem(): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export function GroupOrUngroupMenuItem(): JSX.Element;
|
|
|
|
// @public
|
|
export function handleNativeOrMenuCopy(editor: Editor, context?: TLClipboardWriteInfo): Promise<boolean>;
|
|
|
|
// @public (undocumented)
|
|
export class HandTool extends StateNode {
|
|
// (undocumented)
|
|
static children(): TLStateNodeConstructor[];
|
|
// (undocumented)
|
|
static id: string;
|
|
// (undocumented)
|
|
static initial: string;
|
|
// (undocumented)
|
|
static isLockable: boolean;
|
|
// (undocumented)
|
|
onDoubleClick(info: TLClickEventInfo): void;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function HandToolbarItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function HeartToolbarItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function HexagonToolbarItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function hideAllTooltips(): void;
|
|
|
|
// @public (undocumented)
|
|
export interface HighlightShapeOptions extends ShapeOptionsWithDisplayValues<TLHighlightShape, HighlightShapeUtilDisplayValues> {
|
|
readonly maxPointsPerShape: number;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class HighlightShapeTool extends StateNode {
|
|
// (undocumented)
|
|
static children(): TLStateNodeConstructor[];
|
|
// (undocumented)
|
|
static id: string;
|
|
// (undocumented)
|
|
static initial: string;
|
|
// (undocumented)
|
|
static isLockable: boolean;
|
|
// (undocumented)
|
|
onExit(): void;
|
|
// (undocumented)
|
|
shapeType: string;
|
|
// (undocumented)
|
|
static useCoalescedEvents: boolean;
|
|
}
|
|
|
|
// @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)
|
|
getIndicatorPath(shape: TLHighlightShape): Path2D;
|
|
// (undocumented)
|
|
getInterpolatedProps(startShape: TLHighlightShape, endShape: TLHighlightShape, t: number): TLHighlightShapeProps;
|
|
// (undocumented)
|
|
hideResizeHandles(shape: TLHighlightShape): boolean;
|
|
// (undocumented)
|
|
hideRotateHandle(shape: TLHighlightShape): boolean;
|
|
// (undocumented)
|
|
hideSelectionBoundsFg(shape: TLHighlightShape): boolean;
|
|
// (undocumented)
|
|
static migrations: TLPropsMigrations;
|
|
// (undocumented)
|
|
onResize(shape: TLHighlightShape, info: TLResizeInfo<TLHighlightShape>): {
|
|
props: {
|
|
scaleX: number;
|
|
scaleY: number;
|
|
};
|
|
} | undefined;
|
|
// (undocumented)
|
|
options: HighlightShapeOptions;
|
|
// (undocumented)
|
|
static props: RecordProps<TLHighlightShape>;
|
|
// (undocumented)
|
|
toBackgroundSvg(shape: TLHighlightShape, ctx: SvgExportContext): JSX.Element;
|
|
// (undocumented)
|
|
toSvg(shape: TLHighlightShape, ctx: SvgExportContext): JSX.Element;
|
|
// (undocumented)
|
|
static type: 'highlight';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface HighlightShapeUtilDisplayValues {
|
|
// (undocumented)
|
|
overlayOpacity: number;
|
|
// (undocumented)
|
|
strokeColor: string;
|
|
// (undocumented)
|
|
strokeWidth: number;
|
|
// (undocumented)
|
|
underlayOpacity: number;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function HighlightToolbarItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export const iconTypes: readonly ['align-bottom', 'align-center-horizontal', 'align-center-vertical', 'align-left', 'align-right', 'align-top', 'alt', 'arrow-arc', 'arrow-cycle', 'arrow-elbow', 'arrow-left', 'arrowhead-arrow', 'arrowhead-bar', 'arrowhead-diamond', 'arrowhead-dot', 'arrowhead-none', 'arrowhead-square', 'arrowhead-triangle-inverted', 'arrowhead-triangle', 'blob', 'bold', 'bookmark', 'bring-forward', 'bring-to-front', 'broken', 'bulletList', 'check-circle', 'check', 'chevron-down', 'chevron-left', 'chevron-right', 'chevron-up', 'chevrons-ne', 'chevrons-sw', 'clipboard-copied', 'clipboard-copy', 'closed', 'code', 'color', 'comment', 'corners', 'crop', 'cross-2', 'cross-circle', 'dash-dashed', 'dash-dotted', 'dash-draw', 'dash-solid', 'disconnected', 'discord', 'distribute-horizontal', 'distribute-vertical', 'dot', 'dots-horizontal', 'dots-vertical', 'download', 'drag-handle-dots', 'duplicate', 'edit', 'external-link', 'fill-fill', 'fill-lined-fill', '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-heart', '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', 'heading', 'help-circle', 'highlight', 'horizontal-align-end', 'horizontal-align-middle', 'horizontal-align-start', 'info-circle', 'italic', 'leading', 'link', 'list', 'lock', 'manual', 'menu', 'minus', 'mixed', 'pack', 'plus', 'question-mark-circle', 'question-mark', 'redo', 'reset-zoom', 'rotate-ccw', 'rotate-cw', 'send-backward', 'send-to-back', 'share-1', 'size-extra-large', 'size-large', 'size-medium', 'size-small', 'spline-cubic', 'spline-line', 'stack-horizontal', 'stack-vertical', 'status-offline', 'stretch-horizontal', 'stretch-vertical', 'strike', 'text-align-center', 'text-align-left', 'text-align-right', 'toggle-off', 'toggle-on', 'tool-arrow', 'tool-eraser', 'tool-frame', 'tool-hand', 'tool-highlight', 'tool-laser', 'tool-line', 'tool-media', 'tool-note', 'tool-pencil', 'tool-pointer', 'tool-screenshot', 'tool-text', 'trash', 'twitter', 'underline', 'undo', 'ungroup', 'unlock', 'vertical-align-end', 'vertical-align-middle', 'vertical-align-start', 'warning-triangle', 'zoom-in', 'zoom-out'];
|
|
|
|
// @public (undocumented)
|
|
export class ImageAssetUtil extends AssetUtil<TLImageAsset> {
|
|
// (undocumented)
|
|
getAssetFromFile(file: File, assetId: TLAssetId): Promise<null | TLImageAsset>;
|
|
// (undocumented)
|
|
getDefaultProps(): TLImageAsset['props'];
|
|
// (undocumented)
|
|
getSupportedMimeTypes(): readonly string[];
|
|
// (undocumented)
|
|
static migrations: MigrationSequence;
|
|
// (undocumented)
|
|
options: {
|
|
maxDimension: number;
|
|
supportedMimeTypes: null | readonly string[];
|
|
};
|
|
// (undocumented)
|
|
static props: {
|
|
fileSize: Validator<number | undefined>;
|
|
h: Validator<number>;
|
|
isAnimated: Validator<boolean>;
|
|
mimeType: Validator<null | string>;
|
|
name: Validator<string>;
|
|
pixelRatio: Validator<number | undefined>;
|
|
src: Validator<null | string>;
|
|
w: Validator<number>;
|
|
};
|
|
// (undocumented)
|
|
static type: 'image';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface ImageShapeOptions extends ShapeOptionsWithDisplayValues<TLImageShape, ImageShapeUtilDisplayValues> {
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
|
|
// (undocumented)
|
|
canCrop(shape: TLImageShape): boolean;
|
|
// (undocumented)
|
|
component(shape: TLImageShape): JSX.Element;
|
|
// (undocumented)
|
|
createShapeForAsset(asset: TLAsset, position: VecModel): null | TLShapePartial;
|
|
// (undocumented)
|
|
getAriaDescriptor(shape: TLImageShape): string;
|
|
// (undocumented)
|
|
getDefaultProps(): TLImageShape['props'];
|
|
// (undocumented)
|
|
getGeometry(shape: TLImageShape): Geometry2d;
|
|
// (undocumented)
|
|
getIndicatorPath(shape: TLImageShape): Path2D | undefined;
|
|
// (undocumented)
|
|
getInterpolatedProps(startShape: TLImageShape, endShape: TLImageShape, t: number): TLImageShapeProps;
|
|
// (undocumented)
|
|
static handledAssetTypes: readonly ['image'];
|
|
// (undocumented)
|
|
isAspectRatioLocked(shape: TLImageShape): boolean;
|
|
// (undocumented)
|
|
isExportBoundsContainer(): boolean;
|
|
// (undocumented)
|
|
static migrations: TLPropsMigrations;
|
|
// (undocumented)
|
|
onDoubleClickEdge(shape: TLImageShape): void;
|
|
// (undocumented)
|
|
onResize(shape: TLImageShape, info: TLResizeInfo<TLImageShape>): TLImageShape;
|
|
// (undocumented)
|
|
options: ImageShapeOptions;
|
|
// (undocumented)
|
|
static props: RecordProps<TLImageShape>;
|
|
// (undocumented)
|
|
toSvg(shape: TLImageShape, ctx: SvgExportContext): Promise<JSX.Element | null>;
|
|
// (undocumented)
|
|
static type: 'image';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface ImageShapeUtilDisplayValues {
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function InputModeMenu(): JSX.Element;
|
|
|
|
export { JSONContent }
|
|
|
|
// @public (undocumented)
|
|
export const KeyboardShiftEnterTweakExtension: Extension<any, any>;
|
|
|
|
// @public (undocumented)
|
|
export function KeyboardShortcutsMenuItem(): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export function LanguageMenu(): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export class LaserTool extends StateNode {
|
|
// (undocumented)
|
|
static children(): TLStateNodeConstructor[];
|
|
getSessionId(): string;
|
|
// (undocumented)
|
|
static id: string;
|
|
// (undocumented)
|
|
static initial: string;
|
|
// (undocumented)
|
|
static isLockable: boolean;
|
|
// (undocumented)
|
|
onCancel(): void;
|
|
// (undocumented)
|
|
onEnter(): void;
|
|
// (undocumented)
|
|
onExit(): void;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function LaserToolbarItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export interface LineShapeOptions extends ShapeOptionsWithDisplayValues<TLLineShape, LineShapeUtilDisplayValues> {
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class LineShapeTool extends StateNode {
|
|
// (undocumented)
|
|
static children(): TLStateNodeConstructor[];
|
|
// (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;
|
|
// (undocumented)
|
|
getDefaultProps(): TLLineShape['props'];
|
|
// (undocumented)
|
|
getGeometry(shape: TLLineShape): PathBuilderGeometry2d;
|
|
// (undocumented)
|
|
getHandles(shape: TLLineShape): TLHandle[];
|
|
// (undocumented)
|
|
getHandleSnapGeometry(shape: TLLineShape): HandleSnapGeometry;
|
|
// (undocumented)
|
|
getIndicatorPath(shape: TLLineShape): Path2D;
|
|
// (undocumented)
|
|
getInterpolatedProps(startShape: TLLineShape, endShape: TLLineShape, t: number): TLLineShape['props'];
|
|
// (undocumented)
|
|
hideInMinimap(): boolean;
|
|
// (undocumented)
|
|
hideResizeHandles(shape: TLLineShape): boolean;
|
|
// (undocumented)
|
|
hideRotateHandle(shape: TLLineShape): boolean;
|
|
// (undocumented)
|
|
hideSelectionBoundsBg(shape: TLLineShape): boolean;
|
|
// (undocumented)
|
|
hideSelectionBoundsFg(shape: TLLineShape): boolean;
|
|
// (undocumented)
|
|
static migrations: TLPropsMigrations;
|
|
// (undocumented)
|
|
onBeforeCreate(next: TLLineShape): TLLineShape | void;
|
|
// (undocumented)
|
|
onHandleDrag(shape: TLLineShape, { handle }: TLHandleDragInfo<TLLineShape>): {
|
|
id: TLShapeId_2;
|
|
index: IndexKey;
|
|
isLocked: boolean;
|
|
meta: JsonObject;
|
|
opacity: TLOpacityType;
|
|
parentId: TLParentId;
|
|
props: {
|
|
color: TLDefaultColorStyle;
|
|
dash: TLDefaultDashStyle;
|
|
points: {
|
|
[x: string]: {
|
|
id: string;
|
|
index: IndexKey;
|
|
x: number;
|
|
y: number;
|
|
} | TLLineShapePoint;
|
|
};
|
|
scale: number;
|
|
size: TLDefaultSizeStyle;
|
|
spline: TLLineShapeSplineStyle;
|
|
};
|
|
rotation: number;
|
|
type: "line";
|
|
typeName: 'shape';
|
|
x: number;
|
|
y: number;
|
|
};
|
|
// (undocumented)
|
|
onHandleDragStart(shape: TLLineShape, { handle }: TLHandleDragInfo<TLLineShape>): {
|
|
id: TLShapeId_2;
|
|
index: IndexKey;
|
|
isLocked: boolean;
|
|
meta: JsonObject;
|
|
opacity: TLOpacityType;
|
|
parentId: TLParentId;
|
|
props: {
|
|
color: TLDefaultColorStyle;
|
|
dash: TLDefaultDashStyle;
|
|
points: {
|
|
[x: string]: {
|
|
id: IndexKey;
|
|
index: IndexKey;
|
|
x: number;
|
|
y: number;
|
|
} | TLLineShapePoint;
|
|
};
|
|
scale: number;
|
|
size: TLDefaultSizeStyle;
|
|
spline: TLLineShapeSplineStyle;
|
|
};
|
|
rotation: number;
|
|
type: "line";
|
|
typeName: 'shape';
|
|
x: number;
|
|
y: number;
|
|
} | undefined;
|
|
// (undocumented)
|
|
onResize(shape: TLLineShape, info: TLResizeInfo<TLLineShape>): {
|
|
props: {
|
|
points: {
|
|
[x: string]: {
|
|
id: string;
|
|
index: IndexKey;
|
|
x: number;
|
|
y: number;
|
|
};
|
|
};
|
|
};
|
|
};
|
|
// (undocumented)
|
|
options: LineShapeOptions;
|
|
// (undocumented)
|
|
static props: RecordProps<TLLineShape>;
|
|
// (undocumented)
|
|
toSvg(shape: TLLineShape, ctx: SvgExportContext): JSX.Element;
|
|
// (undocumented)
|
|
static type: 'line';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface LineShapeUtilDisplayValues {
|
|
// (undocumented)
|
|
strokeColor: string;
|
|
// (undocumented)
|
|
strokeWidth: number;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function LineToolbarItem(): JSX.Element;
|
|
|
|
// @internal (undocumented)
|
|
export interface LineToPathBuilderCommand extends PathBuilderCommandBase {
|
|
// (undocumented)
|
|
type: 'line';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function LockGroup(): JSX.Element;
|
|
|
|
export { Mark }
|
|
|
|
export { mergeAttributes }
|
|
|
|
// @public (undocumented)
|
|
export function MiscMenuGroup(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function MobileStylePanel(): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export function MoveToPageMenu(): JSX.Element | null;
|
|
|
|
// @internal (undocumented)
|
|
export interface MoveToPathBuilderCommand extends PathBuilderCommandBase {
|
|
// (undocumented)
|
|
closeIdx: null | number;
|
|
// (undocumented)
|
|
opts?: PathBuilderLineOpts;
|
|
// (undocumented)
|
|
type: 'move';
|
|
}
|
|
|
|
export { Node_2 as Node }
|
|
|
|
// @public (undocumented)
|
|
export interface NonePathBuilderOpts extends BasePathBuilderOpts {
|
|
// (undocumented)
|
|
style: 'none';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface NoteShapeOptions extends ShapeOptionsWithDisplayValues<TLNoteShape, NoteShapeUtilDisplayValues> {
|
|
AttributionComponent: TLNoteShapeAttributionComponent;
|
|
resizeMode: 'none' | 'scale';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class NoteShapeTool extends StateNode {
|
|
// (undocumented)
|
|
static children(): TLStateNodeConstructor[];
|
|
// (undocumented)
|
|
static id: string;
|
|
// (undocumented)
|
|
static initial: string;
|
|
// (undocumented)
|
|
shapeType: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
|
|
// (undocumented)
|
|
canEdit(shape: TLNoteShape): boolean;
|
|
// (undocumented)
|
|
component(shape: TLNoteShape): JSX.Element;
|
|
// (undocumented)
|
|
getDefaultProps(): TLNoteShape['props'];
|
|
// (undocumented)
|
|
getFontFaces(shape: TLNoteShape): TLFontFace[];
|
|
// (undocumented)
|
|
getGeometry(shape: TLNoteShape): Group2d;
|
|
// (undocumented)
|
|
getHandles(shape: TLNoteShape): TLHandle[];
|
|
// (undocumented)
|
|
getIndicatorPath(shape: TLNoteShape): Path2D;
|
|
// (undocumented)
|
|
getInterpolatedProps(startShape: TLNoteShape, endShape: TLNoteShape, t: number): TLNoteShapeProps;
|
|
// (undocumented)
|
|
getReferencedUserIds(shape: TLNoteShape): string[];
|
|
// (undocumented)
|
|
getText(shape: TLNoteShape): string;
|
|
// (undocumented)
|
|
hideResizeHandles(shape: TLNoteShape): boolean;
|
|
// (undocumented)
|
|
hideSelectionBoundsFg(shape: TLNoteShape): boolean;
|
|
// (undocumented)
|
|
isAspectRatioLocked(shape: TLNoteShape): boolean;
|
|
// (undocumented)
|
|
static migrations: TLPropsMigrations;
|
|
// (undocumented)
|
|
onBeforeCreate(next: TLNoteShape): {
|
|
id: TLShapeId;
|
|
index: IndexKey_2;
|
|
isLocked: boolean;
|
|
meta: JsonObject;
|
|
opacity: TLOpacityType;
|
|
parentId: TLParentId;
|
|
props: {
|
|
align: TLDefaultHorizontalAlignStyle;
|
|
color: TLDefaultColorStyle;
|
|
font: TLDefaultFontStyle;
|
|
fontSizeAdjustment: number;
|
|
growY: number;
|
|
labelColor: TLDefaultColorStyle;
|
|
richText: TLRichText;
|
|
scale: number;
|
|
size: TLDefaultSizeStyle;
|
|
textLastEditedBy: null | string;
|
|
url: string;
|
|
verticalAlign: TLDefaultVerticalAlignStyle;
|
|
};
|
|
rotation: number;
|
|
type: "note";
|
|
typeName: 'shape';
|
|
x: number;
|
|
y: number;
|
|
} | undefined;
|
|
// (undocumented)
|
|
onBeforeDuplicate(_source: TLNoteShape, duplicate: TLNoteShape): TLNoteShape | undefined;
|
|
// (undocumented)
|
|
onBeforeUpdate(prev: TLNoteShape, next: TLNoteShape): TLNoteShape | undefined;
|
|
// (undocumented)
|
|
onResize(shape: any, info: TLResizeInfo<any>): {
|
|
props: {
|
|
scale: number;
|
|
};
|
|
x: number;
|
|
y: number;
|
|
} | undefined;
|
|
// (undocumented)
|
|
options: NoteShapeOptions;
|
|
// (undocumented)
|
|
static props: RecordProps<TLNoteShape>;
|
|
// (undocumented)
|
|
toSvg(shape: TLNoteShape, ctx: SvgExportContext): JSX.Element;
|
|
// (undocumented)
|
|
static type: 'note';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface NoteShapeUtilDisplayValues {
|
|
// (undocumented)
|
|
borderColor: string;
|
|
// (undocumented)
|
|
borderWidth: number;
|
|
// (undocumented)
|
|
labelColor: string;
|
|
// (undocumented)
|
|
labelFontFamily: string;
|
|
// (undocumented)
|
|
labelFontSize: number;
|
|
// (undocumented)
|
|
labelFontStyle: string;
|
|
// (undocumented)
|
|
labelFontVariant: string;
|
|
// (undocumented)
|
|
labelFontWeight: string;
|
|
// (undocumented)
|
|
labelHorizontalAlign: 'center' | 'end' | 'start';
|
|
// (undocumented)
|
|
labelLineHeight: number;
|
|
// (undocumented)
|
|
labelPadding: number;
|
|
// (undocumented)
|
|
labelVerticalAlign: 'end' | 'middle' | 'start';
|
|
// (undocumented)
|
|
noteBackgroundColor: string;
|
|
// (undocumented)
|
|
noteHeight: number;
|
|
// (undocumented)
|
|
noteWidth: number;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function NoteToolbarItem(): JSX.Element;
|
|
|
|
// @public
|
|
export function notifyIfFileNotAllowed(editor: Editor, file: File, options: TLDefaultExternalContentHandlerOpts): boolean;
|
|
|
|
// @public (undocumented)
|
|
export function OfflineIndicator(): JSX.Element;
|
|
|
|
// @public
|
|
export function onDragFromToolbarToCreateShape(editor: Editor, info: TLPointerEventInfo, opts: OnDragFromToolbarToCreateShapesOpts): void;
|
|
|
|
// @public
|
|
export interface OnDragFromToolbarToCreateShapesOpts {
|
|
createShape(id: TLShapeId): void;
|
|
maskedToolId?: string;
|
|
onDragEnd?(id: TLShapeId): void;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function OvalToolbarItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function OverflowingToolbar({ children, orientation, sizingParentClassName, minItems, minSizePx, maxItems, maxSizePx, }: OverflowingToolbarProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export interface OverflowingToolbarProps {
|
|
// (undocumented)
|
|
children: React.ReactNode;
|
|
// (undocumented)
|
|
maxItems: number;
|
|
// (undocumented)
|
|
maxSizePx: number;
|
|
// (undocumented)
|
|
minItems: number;
|
|
// (undocumented)
|
|
minSizePx: number;
|
|
// (undocumented)
|
|
orientation: 'horizontal' | 'vertical';
|
|
// (undocumented)
|
|
sizingParentClassName: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export const PageItemInput: ({ name, id, isCurrentPage, onCancel, onComplete, }: PageItemInputProps) => JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export interface PageItemInputProps {
|
|
// (undocumented)
|
|
id: TLPageId;
|
|
// (undocumented)
|
|
isCurrentPage: boolean;
|
|
// (undocumented)
|
|
name: string;
|
|
// (undocumented)
|
|
onCancel(): void;
|
|
// (undocumented)
|
|
onComplete?(): void;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export const PageItemSubmenu: NamedExoticComponent<PageItemSubmenuProps>;
|
|
|
|
// @public (undocumented)
|
|
export interface PageItemSubmenuProps {
|
|
// (undocumented)
|
|
index: number;
|
|
// (undocumented)
|
|
item: {
|
|
id: string;
|
|
name: string;
|
|
};
|
|
// (undocumented)
|
|
listSize: number;
|
|
// (undocumented)
|
|
onRename?(): void;
|
|
}
|
|
|
|
// @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, }: {
|
|
json: string;
|
|
schema: TLSchema;
|
|
}): Result<TLStore, TldrawFileParseError>;
|
|
|
|
// @public (undocumented)
|
|
export function PasteMenuItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export class PathBuilder {
|
|
constructor();
|
|
// (undocumented)
|
|
arcTo(rx: number, ry: number, largeArcFlag: boolean, sweepFlag: boolean, xAxisRotationRadians: number, x2: number, y2: number, opts?: PathBuilderCommandOpts): this;
|
|
// (undocumented)
|
|
circularArcTo(radius: number, largeArcFlag: boolean, sweepFlag: boolean, x2: number, y2: number, opts?: PathBuilderCommandOpts): this;
|
|
// (undocumented)
|
|
close(): this;
|
|
// @internal (undocumented)
|
|
commands: PathBuilderCommand[];
|
|
// (undocumented)
|
|
cubicBezierTo(x: number, y: number, cp1X: number, cp1Y: number, cp2X: number, cp2Y: number, opts?: PathBuilderCommandOpts): this;
|
|
// (undocumented)
|
|
static cubicSplineThroughPoints(points: VecLike[], opts?: PathBuilderLineOpts & {
|
|
endOffsets?: number;
|
|
}): PathBuilder;
|
|
// @internal (undocumented)
|
|
getCommandInfo(): (PathBuilderCommandInfo | undefined)[];
|
|
// @internal (undocumented)
|
|
getCommands(): readonly PathBuilderCommand[];
|
|
// (undocumented)
|
|
static lineThroughPoints(points: VecLike[], opts?: PathBuilderLineOpts & {
|
|
endOffsets?: number;
|
|
}): PathBuilder;
|
|
// (undocumented)
|
|
lineTo(x: number, y: number, opts?: PathBuilderCommandOpts): this;
|
|
// (undocumented)
|
|
moveTo(x: number, y: number, opts?: PathBuilderLineOpts): this;
|
|
// (undocumented)
|
|
toD(opts?: PathBuilderToDOpts): string;
|
|
// (undocumented)
|
|
toDrawD(opts: DrawPathBuilderDOpts): string;
|
|
// (undocumented)
|
|
toGeometry(): Group2d | PathBuilderGeometry2d;
|
|
// (undocumented)
|
|
toPath2D(opts: PathBuilderOpts): Path2D;
|
|
// (undocumented)
|
|
toSvg(opts: PathBuilderOpts): JSX.Element | null;
|
|
transform(mat: MatLike): PathBuilder;
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export type PathBuilderCommand = CubicBezierToPathBuilderCommand | LineToPathBuilderCommand | MoveToPathBuilderCommand;
|
|
|
|
// @internal (undocumented)
|
|
export interface PathBuilderCommandBase {
|
|
// (undocumented)
|
|
_info?: PathBuilderCommandInfo;
|
|
// (undocumented)
|
|
isClose: boolean;
|
|
// (undocumented)
|
|
opts?: PathBuilderCommandOpts;
|
|
// (undocumented)
|
|
x: number;
|
|
// (undocumented)
|
|
y: number;
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export interface PathBuilderCommandInfo {
|
|
// (undocumented)
|
|
length: number;
|
|
// (undocumented)
|
|
tangentEnd: VecModel;
|
|
// (undocumented)
|
|
tangentStart: VecModel;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface PathBuilderCommandOpts {
|
|
mergeWithPrevious?: boolean;
|
|
offset?: number;
|
|
roundness?: number;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class PathBuilderGeometry2d extends Geometry2d {
|
|
constructor(path: PathBuilder, startIdx: number, endIdx: number, options: Geometry2dOptions);
|
|
// (undocumented)
|
|
getSegments(): Geometry2d[];
|
|
// (undocumented)
|
|
getSvgPathData(): string;
|
|
// (undocumented)
|
|
getVertices(filters: Geometry2dFilters): Vec[];
|
|
// (undocumented)
|
|
hitTestLineSegment(A: VecLike, B: VecLike, distance?: number, filters?: Geometry2dFilters): boolean;
|
|
// (undocumented)
|
|
nearestPoint(point: VecLike, _filters?: Geometry2dFilters): Vec;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface PathBuilderLineOpts extends PathBuilderCommandOpts {
|
|
// (undocumented)
|
|
dashEnd?: PerfectDashTerminal;
|
|
// (undocumented)
|
|
dashStart?: PerfectDashTerminal;
|
|
// (undocumented)
|
|
geometry?: false | Omit<Geometry2dOptions, 'isClosed'>;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type PathBuilderOpts = DashedPathBuilderOpts | DrawPathBuilderOpts | NonePathBuilderOpts | SolidPathBuilderOpts;
|
|
|
|
// @public (undocumented)
|
|
export interface PathBuilderToDOpts {
|
|
// (undocumented)
|
|
endIdx?: number;
|
|
// (undocumented)
|
|
onlyFilled?: boolean;
|
|
// (undocumented)
|
|
startIdx?: number;
|
|
}
|
|
|
|
// @public
|
|
export const PlainTextArea: React_3.ForwardRefExoticComponent<TextAreaProps & React_3.RefAttributes<HTMLTextAreaElement>>;
|
|
|
|
// @public
|
|
export const PlainTextLabel: React_3.MemoExoticComponent<({ shapeId, type, text: plaintext, labelColor, fontFamily, fontSize, lineHeight, textAlign, verticalAlign, wrap, isSelected, padding, onKeyDown: handleKeyDownCustom, classNamePrefix, style, textWidth, textHeight, showTextOutline, }: PlainTextLabelProps) => JSX.Element | null>;
|
|
|
|
// @public (undocumented)
|
|
export interface PlainTextLabelProps {
|
|
// (undocumented)
|
|
bounds?: Box;
|
|
// (undocumented)
|
|
classNamePrefix?: string;
|
|
// (undocumented)
|
|
fontFamily: string;
|
|
// (undocumented)
|
|
fontSize: number;
|
|
// (undocumented)
|
|
isSelected: boolean;
|
|
// (undocumented)
|
|
labelColor: string;
|
|
// (undocumented)
|
|
lineHeight: number;
|
|
// (undocumented)
|
|
onKeyDown?(e: KeyboardEvent): void;
|
|
// (undocumented)
|
|
padding?: number;
|
|
// (undocumented)
|
|
shapeId: TLShapeId;
|
|
// (undocumented)
|
|
showTextOutline?: boolean;
|
|
// (undocumented)
|
|
style?: React_3.CSSProperties;
|
|
// (undocumented)
|
|
text?: string;
|
|
// (undocumented)
|
|
textAlign: 'center' | 'end' | 'start';
|
|
// (undocumented)
|
|
textHeight?: number;
|
|
// (undocumented)
|
|
textWidth?: number;
|
|
// (undocumented)
|
|
type: ExtractShapeByProps<{
|
|
text: string;
|
|
}>['type'];
|
|
// (undocumented)
|
|
verticalAlign: 'end' | 'middle' | 'start';
|
|
// (undocumented)
|
|
wrap?: boolean;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export const PORTRAIT_BREAKPOINT: {
|
|
readonly DESKTOP: 7;
|
|
readonly MOBILE_SM: 3;
|
|
readonly MOBILE_XS: 2;
|
|
readonly MOBILE_XXS: 1;
|
|
readonly MOBILE: 4;
|
|
readonly TABLET_SM: 5;
|
|
readonly TABLET: 6;
|
|
readonly ZERO: 0;
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export type PORTRAIT_BREAKPOINT = (typeof PORTRAIT_BREAKPOINT)[keyof typeof PORTRAIT_BREAKPOINT];
|
|
|
|
// @public (undocumented)
|
|
export namespace PORTRAIT_BREAKPOINT {
|
|
// (undocumented)
|
|
export type DESKTOP = typeof PORTRAIT_BREAKPOINT.DESKTOP;
|
|
// (undocumented)
|
|
export type MOBILE = typeof PORTRAIT_BREAKPOINT.MOBILE;
|
|
// (undocumented)
|
|
export type MOBILE_SM = typeof PORTRAIT_BREAKPOINT.MOBILE_SM;
|
|
// (undocumented)
|
|
export type MOBILE_XS = typeof PORTRAIT_BREAKPOINT.MOBILE_XS;
|
|
// (undocumented)
|
|
export type MOBILE_XXS = typeof PORTRAIT_BREAKPOINT.MOBILE_XXS;
|
|
// (undocumented)
|
|
export type TABLET = typeof PORTRAIT_BREAKPOINT.TABLET;
|
|
// (undocumented)
|
|
export type TABLET_SM = typeof PORTRAIT_BREAKPOINT.TABLET_SM;
|
|
// (undocumented)
|
|
export type ZERO = typeof PORTRAIT_BREAKPOINT.ZERO;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function PreferencesGroup(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function preloadFont(id: string, font: TLTypeFace, targetDocument?: Document): Promise<FontFace>;
|
|
|
|
// @public (undocumented)
|
|
export function PrintItem(): JSX.Element;
|
|
|
|
// @public
|
|
export function putExcalidrawContent(editor: Editor, excalidrawClipboardContent: any, point?: VecLike): Promise<void>;
|
|
|
|
// @public (undocumented)
|
|
export function RectangleToolbarItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function registerDefaultExternalContentHandlers(editor: Editor, options: TLDefaultExternalContentHandlerOpts): void;
|
|
|
|
// @public (undocumented)
|
|
export function registerDefaultSideEffects(editor: Editor): () => void;
|
|
|
|
// @public
|
|
export function removeFrame(editor: Editor, ids: TLShapeId[]): void;
|
|
|
|
// @public (undocumented)
|
|
export function RemoveFrameMenuItem(): JSX.Element | null;
|
|
|
|
// @public
|
|
export function renderHtmlFromRichText(editor: Editor, richText: TLRichText_2): string;
|
|
|
|
// @public
|
|
export function renderHtmlFromRichTextForMeasurement(editor: Editor, richText: TLRichText_2): string;
|
|
|
|
// @public
|
|
export function renderHtmlFromRichTextWithExtensions(richText: TLRichText_2, extensions: Extensions): string;
|
|
|
|
// @public
|
|
export function renderPlaintextFromRichText(editor: Editor, richText: TLRichText_2): string;
|
|
|
|
// @public
|
|
export function renderRichTextFromHTML(editor: Editor, html: string): TLRichText_2;
|
|
|
|
// @public (undocumented)
|
|
export function ReorderMenuItems(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function ReorderMenuSubmenu(): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export function RhombusToolbarItem(): JSX.Element;
|
|
|
|
// @public
|
|
export const RichTextArea: React_3.ForwardRefExoticComponent<TextAreaProps & React_3.RefAttributes<HTMLDivElement>>;
|
|
|
|
// @public
|
|
export const RichTextLabel: React_3.MemoExoticComponent<({ shapeId, type, richText, labelColor, fontFamily, fontSize, lineHeight, textAlign, verticalAlign, wrap, isSelected, padding, onKeyDown: handleKeyDownCustom, classNamePrefix, style, textWidth, textHeight, hasCustomTabBehavior, showTextOutline, }: RichTextLabelProps) => JSX.Element | null>;
|
|
|
|
// @public (undocumented)
|
|
export interface RichTextLabelProps {
|
|
// (undocumented)
|
|
bounds?: Box;
|
|
// (undocumented)
|
|
classNamePrefix?: string;
|
|
// (undocumented)
|
|
fontFamily: string;
|
|
// (undocumented)
|
|
fontSize: number;
|
|
// (undocumented)
|
|
hasCustomTabBehavior?: boolean;
|
|
// (undocumented)
|
|
isSelected: boolean;
|
|
// (undocumented)
|
|
labelColor: string;
|
|
// (undocumented)
|
|
lineHeight: number;
|
|
// (undocumented)
|
|
onKeyDown?(e: KeyboardEvent): void;
|
|
// (undocumented)
|
|
padding?: number;
|
|
// (undocumented)
|
|
richText?: TLRichText_2;
|
|
// (undocumented)
|
|
shapeId: TLShapeId;
|
|
// (undocumented)
|
|
showTextOutline?: boolean;
|
|
// (undocumented)
|
|
style?: React_3.CSSProperties;
|
|
// (undocumented)
|
|
textAlign: 'center' | 'end' | 'start';
|
|
// (undocumented)
|
|
textHeight?: number;
|
|
// (undocumented)
|
|
textWidth?: number;
|
|
// (undocumented)
|
|
type: ExtractShapeByProps<{
|
|
richText: TLRichText_2;
|
|
}>['type'];
|
|
// (undocumented)
|
|
verticalAlign: 'end' | 'middle' | 'start';
|
|
// (undocumented)
|
|
wrap?: boolean;
|
|
}
|
|
|
|
// @public
|
|
export function RichTextSVG({ bounds, richText, fontSize, fontFamily, lineHeight, textAlign, verticalAlign, wrap, labelColor, padding, showTextOutline, }: RichTextSVGProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export interface RichTextSVGProps {
|
|
// (undocumented)
|
|
bounds: Box;
|
|
// (undocumented)
|
|
fontFamily: string;
|
|
// (undocumented)
|
|
fontSize: number;
|
|
// (undocumented)
|
|
labelColor: string;
|
|
// (undocumented)
|
|
lineHeight: number;
|
|
// (undocumented)
|
|
padding: number;
|
|
// (undocumented)
|
|
richText: TLRichText_2;
|
|
// (undocumented)
|
|
showTextOutline?: boolean;
|
|
// (undocumented)
|
|
textAlign: 'center' | 'end' | 'start';
|
|
// (undocumented)
|
|
verticalAlign: 'end' | 'middle' | 'start';
|
|
// (undocumented)
|
|
wrap?: boolean;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function RotateCWMenuItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export const RTL_LANGUAGES: Set<string>;
|
|
|
|
// @public
|
|
export function sanitizeSvg(svgText: string): string;
|
|
|
|
// @public
|
|
export class ScribbleOverlayUtil extends OverlayUtil<TLScribbleOverlay> {
|
|
// (undocumented)
|
|
getOverlays(): TLScribbleOverlay[];
|
|
// (undocumented)
|
|
isActive(): boolean;
|
|
// (undocumented)
|
|
options: {
|
|
cacheSize: number;
|
|
streamline: number;
|
|
zIndex: number;
|
|
};
|
|
// (undocumented)
|
|
render(ctx: CanvasRenderingContext2D, overlays: TLScribbleOverlay[]): void;
|
|
// (undocumented)
|
|
static type: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function SelectAllMenuItem(): JSX.Element;
|
|
|
|
// @public
|
|
export class SelectionForegroundOverlayUtil extends OverlayUtil<TLSelectionForegroundOverlay> {
|
|
// (undocumented)
|
|
getCursor(overlay: TLSelectionForegroundOverlay): TLCursorType | undefined;
|
|
// (undocumented)
|
|
getGeometry(overlay: TLSelectionForegroundOverlay): Geometry2d | null;
|
|
// (undocumented)
|
|
getOverlays(): TLSelectionForegroundOverlay[];
|
|
// (undocumented)
|
|
isActive(): boolean;
|
|
// (undocumented)
|
|
options: {
|
|
lineWidth: number;
|
|
zIndex: number;
|
|
};
|
|
// (undocumented)
|
|
render(ctx: CanvasRenderingContext2D, _overlays: TLSelectionForegroundOverlay[]): void;
|
|
// (undocumented)
|
|
static type: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class SelectTool extends StateNode {
|
|
// (undocumented)
|
|
static children(): TLStateNodeConstructor[];
|
|
// (undocumented)
|
|
cleanUpDuplicateProps(): void;
|
|
// (undocumented)
|
|
static id: string;
|
|
// (undocumented)
|
|
static initial: string;
|
|
// (undocumented)
|
|
static isLockable: boolean;
|
|
// (undocumented)
|
|
onEnter(): void;
|
|
// (undocumented)
|
|
onExit(): void;
|
|
// (undocumented)
|
|
reactor: (() => void) | undefined;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function SelectToolbarItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function serializeTldrawJson(editor: Editor): Promise<string>;
|
|
|
|
// @public (undocumented)
|
|
export function serializeTldrawJsonBlob(editor: Editor): Promise<Blob>;
|
|
|
|
// @internal (undocumented)
|
|
export function setDefaultEditorAssetUrls(assetUrls: TLEditorAssetUrls): void;
|
|
|
|
// @internal (undocumented)
|
|
export function setDefaultUiAssetUrls(urls: TLUiAssetUrls): void;
|
|
|
|
// @public
|
|
export class ShapeHandleOverlayUtil extends OverlayUtil<TLShapeHandleOverlay> {
|
|
// (undocumented)
|
|
getCursor(_overlay: TLShapeHandleOverlay): TLCursorType | undefined;
|
|
// (undocumented)
|
|
getGeometry(overlay: TLShapeHandleOverlay): Geometry2d | null;
|
|
// (undocumented)
|
|
getOverlays(): TLShapeHandleOverlay[];
|
|
// (undocumented)
|
|
isActive(): boolean;
|
|
// (undocumented)
|
|
options: {
|
|
lineWidth: number;
|
|
zIndex: number;
|
|
};
|
|
// (undocumented)
|
|
render(ctx: CanvasRenderingContext2D, overlays: TLShapeHandleOverlay[]): void;
|
|
// (undocumented)
|
|
static type: string;
|
|
}
|
|
|
|
// @public
|
|
export class ShapeIndicatorOverlayUtil extends OverlayUtil<TLShapeIndicatorOverlay> {
|
|
// (undocumented)
|
|
getOverlays(): TLShapeIndicatorOverlay[];
|
|
// (undocumented)
|
|
isActive(): boolean;
|
|
// (undocumented)
|
|
options: {
|
|
hintedLineWidth: number;
|
|
lineWidth: number;
|
|
zIndex: number;
|
|
};
|
|
// (undocumented)
|
|
render(ctx: CanvasRenderingContext2D, overlays: TLShapeIndicatorOverlay[]): void;
|
|
// (undocumented)
|
|
static type: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface ShapeOptionsWithDisplayValues<Shape extends TLShape, DisplayValues extends object> {
|
|
// (undocumented)
|
|
getCustomDisplayValues(editor: Editor, shape: Shape, theme: TLTheme, colorMode: 'dark' | 'light'): Partial<DisplayValues>;
|
|
// (undocumented)
|
|
getDefaultDisplayValues(editor: Editor, shape: Shape, theme: TLTheme, colorMode: 'dark' | 'light'): DisplayValues;
|
|
}
|
|
|
|
// @public
|
|
export class SnapIndicatorOverlayUtil extends OverlayUtil<TLSnapIndicatorOverlay> {
|
|
// (undocumented)
|
|
getOverlays(): TLSnapIndicatorOverlay[];
|
|
// (undocumented)
|
|
isActive(): boolean;
|
|
// (undocumented)
|
|
options: {
|
|
lineWidth: number;
|
|
zIndex: number;
|
|
};
|
|
// (undocumented)
|
|
render(ctx: CanvasRenderingContext2D, overlays: TLSnapIndicatorOverlay[]): void;
|
|
// (undocumented)
|
|
static type: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface SolidPathBuilderOpts extends BasePathBuilderOpts {
|
|
// (undocumented)
|
|
style: 'solid';
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export function Spinner(props: React_3.SVGProps<SVGSVGElement>): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function StackMenuItems(): JSX.Element;
|
|
|
|
// @public
|
|
export function startEditingShapeWithRichText(editor: Editor, shapeOrId: TLShape | TLShapeId, options?: {
|
|
info?: TLEventInfo;
|
|
selectAll?: boolean;
|
|
}): void;
|
|
|
|
// @public (undocumented)
|
|
export function StarToolbarItem(): JSX.Element;
|
|
|
|
// @public
|
|
export interface StrokeOptions {
|
|
easing?(pressure: number): number;
|
|
end?: {
|
|
cap?: boolean;
|
|
easing?(distance: number): number;
|
|
taper?: boolean | number;
|
|
};
|
|
last?: boolean;
|
|
simulatePressure?: boolean;
|
|
size?: number;
|
|
smoothing?: number;
|
|
start?: {
|
|
cap?: boolean;
|
|
easing?(distance: number): number;
|
|
taper?: boolean | number;
|
|
};
|
|
// (undocumented)
|
|
streamline?: number;
|
|
thinning?: number;
|
|
}
|
|
|
|
// @public
|
|
export interface StrokePoint {
|
|
// (undocumented)
|
|
distance: number;
|
|
// (undocumented)
|
|
input: Vec;
|
|
// (undocumented)
|
|
point: Vec;
|
|
// (undocumented)
|
|
pressure: number;
|
|
// (undocumented)
|
|
radius: number;
|
|
// (undocumented)
|
|
runningLength: number;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function StylePanelArrowheadPicker(): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export function StylePanelArrowKindPicker(): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export const StylePanelButtonPicker: <T extends string>(props: StylePanelButtonPickerProps<T>) => React.JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export const StylePanelButtonPickerInline: <T extends string>(props: StylePanelButtonPickerProps<T>) => React.JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export interface StylePanelButtonPickerProps<T extends string> {
|
|
// (undocumented)
|
|
items: StyleValuesForUi<T>;
|
|
// (undocumented)
|
|
onHistoryMark?(id: string): void;
|
|
// (undocumented)
|
|
onValueChange?(style: StyleProp<T>, value: T): void;
|
|
// (undocumented)
|
|
style: StyleProp<T>;
|
|
// (undocumented)
|
|
title: string;
|
|
// (undocumented)
|
|
uiType: string;
|
|
// (undocumented)
|
|
value: SharedStyle<T>;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function StylePanelColorPicker(): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export interface StylePanelContext {
|
|
// (undocumented)
|
|
enhancedA11yMode: boolean;
|
|
// (undocumented)
|
|
onHistoryMark(id: string): void;
|
|
// (undocumented)
|
|
onOpacityChange(opacity: number): void;
|
|
// (undocumented)
|
|
onValueChange<T>(style: StyleProp<T>, value: T): void;
|
|
// (undocumented)
|
|
styles: ReadonlySharedStyleMap;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function StylePanelContextProvider({ children, styles }: StylePanelContextProviderProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export interface StylePanelContextProviderProps {
|
|
// (undocumented)
|
|
children: React.ReactNode;
|
|
// (undocumented)
|
|
styles: ReadonlySharedStyleMap;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function StylePanelDashPicker(): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export const StylePanelDoubleDropdownPicker: <T extends string>(props: StylePanelDoubleDropdownPickerProps<T>) => React_2.JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export const StylePanelDoubleDropdownPickerInline: <T extends string>(props: StylePanelDoubleDropdownPickerProps<T>) => React_2.JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export interface StylePanelDoubleDropdownPickerProps<T extends string> {
|
|
// (undocumented)
|
|
itemsA: StyleValuesForUi<T>;
|
|
// (undocumented)
|
|
itemsB: StyleValuesForUi<T>;
|
|
// (undocumented)
|
|
label: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey;
|
|
// (undocumented)
|
|
labelA: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey;
|
|
// (undocumented)
|
|
labelB: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey;
|
|
// (undocumented)
|
|
onValueChange?(style: StyleProp<T>, value: T): void;
|
|
// (undocumented)
|
|
styleA: StyleProp<T>;
|
|
// (undocumented)
|
|
styleB: StyleProp<T>;
|
|
// (undocumented)
|
|
uiTypeA: string;
|
|
// (undocumented)
|
|
uiTypeB: string;
|
|
// (undocumented)
|
|
valueA: SharedStyle<T>;
|
|
// (undocumented)
|
|
valueB: SharedStyle<T>;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export const StylePanelDropdownPicker: <T extends string>(props: StylePanelDropdownPickerProps<T>) => React_2.JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export const StylePanelDropdownPickerInline: <T extends string>(props: StylePanelDropdownPickerProps<T>) => React_2.JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export interface StylePanelDropdownPickerProps<T extends string> {
|
|
// (undocumented)
|
|
id: string;
|
|
isOverflow?: boolean;
|
|
// (undocumented)
|
|
items: StyleValuesForUi<T>;
|
|
// (undocumented)
|
|
label?: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey;
|
|
// (undocumented)
|
|
onValueChange?(style: StyleProp<T>, value: T): void;
|
|
sideOffset?: number;
|
|
// (undocumented)
|
|
style: StyleProp<T>;
|
|
// (undocumented)
|
|
stylePanelType: string;
|
|
testIdType?: string;
|
|
// (undocumented)
|
|
type: 'icon' | 'menu' | 'tool';
|
|
// (undocumented)
|
|
uiType: string;
|
|
// (undocumented)
|
|
value: SharedStyle<T>;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function StylePanelFillPicker(): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export function StylePanelFontPicker(): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export function StylePanelGeoShapePicker(): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export function StylePanelLabelAlignPicker(): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export function StylePanelOpacityPicker(): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export function StylePanelSection({ children }: StylePanelSectionProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export interface StylePanelSectionProps {
|
|
// (undocumented)
|
|
children: React_3.ReactNode;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function StylePanelSizePicker(): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export function StylePanelSplinePicker(): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export function StylePanelSubheading({ children }: StylePanelSubheadingProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export interface StylePanelSubheadingProps {
|
|
// (undocumented)
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function StylePanelTextAlignPicker(): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export type StyleValuesForUi<T> = readonly {
|
|
readonly icon: string | TLUiIconJsx;
|
|
readonly value: T;
|
|
}[];
|
|
|
|
export { TaskItem }
|
|
|
|
export { TaskItemOptions }
|
|
|
|
export { TaskList }
|
|
|
|
export { TaskListOptions }
|
|
|
|
// @public (undocumented)
|
|
export interface TextAreaProps {
|
|
// (undocumented)
|
|
handleBlur(): void;
|
|
// (undocumented)
|
|
handleChange(changeInfo: {
|
|
plaintext?: string;
|
|
richText?: TLRichText_2;
|
|
}): void;
|
|
// (undocumented)
|
|
handleDoubleClick(e: any): any;
|
|
// (undocumented)
|
|
handleFocus(): void;
|
|
// (undocumented)
|
|
handleInputPointerDown(e: React_3.PointerEvent<HTMLElement>): void;
|
|
// (undocumented)
|
|
handleKeyDown(e: KeyboardEvent): void;
|
|
// (undocumented)
|
|
handlePaste(e: ClipboardEvent | React_3.ClipboardEvent<HTMLTextAreaElement>): void;
|
|
// (undocumented)
|
|
hasCustomTabBehavior?: boolean;
|
|
// (undocumented)
|
|
isEditing: boolean;
|
|
// (undocumented)
|
|
richText?: TLRichText_2;
|
|
// (undocumented)
|
|
shapeId: TLShapeId;
|
|
// (undocumented)
|
|
text?: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TextShapeOptions extends ShapeOptionsWithDisplayValues<TLTextShape, TextShapeUtilDisplayValues> {
|
|
extraArrowHorizontalPadding: number;
|
|
showTextOutline: boolean;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class TextShapeTool extends StateNode {
|
|
// (undocumented)
|
|
static children(): TLStateNodeConstructor[];
|
|
// (undocumented)
|
|
static id: string;
|
|
// (undocumented)
|
|
static initial: string;
|
|
// (undocumented)
|
|
shapeType: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class TextShapeUtil extends ShapeUtil<TLTextShape> {
|
|
// (undocumented)
|
|
canEdit(shape: TLTextShape): boolean;
|
|
// (undocumented)
|
|
component(shape: TLTextShape): JSX.Element;
|
|
// (undocumented)
|
|
getDefaultProps(): TLTextShape['props'];
|
|
// (undocumented)
|
|
getFontFaces(shape: TLTextShape): TLFontFace[];
|
|
// (undocumented)
|
|
getGeometry(shape: TLTextShape, opts: TLGeometryOpts): Rectangle2d;
|
|
// (undocumented)
|
|
getIndicatorPath(shape: TLTextShape): Path2D | undefined;
|
|
// (undocumented)
|
|
getMinDimensions(shape: TLTextShape): {
|
|
height: number;
|
|
width: number;
|
|
};
|
|
// (undocumented)
|
|
getText(shape: TLTextShape): string;
|
|
// (undocumented)
|
|
isAspectRatioLocked(shape: TLTextShape): boolean;
|
|
// (undocumented)
|
|
static migrations: TLPropsMigrations;
|
|
// (undocumented)
|
|
onBeforeUpdate(prev: TLTextShape, next: TLTextShape): {
|
|
id: TLShapeId;
|
|
index: IndexKey;
|
|
isLocked: boolean;
|
|
meta: JsonObject;
|
|
opacity: TLOpacityType;
|
|
parentId: TLParentId;
|
|
props: {
|
|
autoSize: boolean;
|
|
color: TLDefaultColorStyle;
|
|
font: TLDefaultFontStyle;
|
|
richText: TLRichText;
|
|
scale: number;
|
|
size: TLDefaultSizeStyle;
|
|
textAlign: TLDefaultTextAlignStyle;
|
|
w: number;
|
|
};
|
|
rotation: number;
|
|
type: "text";
|
|
typeName: 'shape';
|
|
x: number;
|
|
y: number;
|
|
} | undefined;
|
|
// (undocumented)
|
|
onEditEnd(shape: TLTextShape): void;
|
|
// (undocumented)
|
|
onResize(shape: TLTextShape, info: TLResizeInfo<TLTextShape>): {
|
|
id: TLShapeId;
|
|
props: {
|
|
autoSize: boolean;
|
|
w: number;
|
|
};
|
|
type: "text";
|
|
x: number;
|
|
y: number;
|
|
} | {
|
|
id: TLShapeId;
|
|
props: {
|
|
scale: number;
|
|
};
|
|
type: "text";
|
|
x: number;
|
|
y: number;
|
|
};
|
|
// (undocumented)
|
|
options: TextShapeOptions;
|
|
// (undocumented)
|
|
static props: RecordProps<TLTextShape>;
|
|
// (undocumented)
|
|
toSvg(shape: TLTextShape, ctx: SvgExportContext): JSX.Element;
|
|
// (undocumented)
|
|
static type: 'text';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TextShapeUtilDisplayValues {
|
|
// (undocumented)
|
|
color: string;
|
|
// (undocumented)
|
|
fontFamily: string;
|
|
// (undocumented)
|
|
fontSize: number;
|
|
// (undocumented)
|
|
fontStyle: string;
|
|
// (undocumented)
|
|
fontVariant: string;
|
|
// (undocumented)
|
|
fontWeight: string;
|
|
// (undocumented)
|
|
lineHeight: number;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function TextToolbarItem(): JSX.Element;
|
|
|
|
// @public
|
|
export const tipTapDefaultExtensions: Extensions;
|
|
|
|
// @public (undocumented)
|
|
export interface TLArcArrowInfo {
|
|
// (undocumented)
|
|
bindings: TLArrowBindings;
|
|
// (undocumented)
|
|
bodyArc: TLArcInfo;
|
|
// (undocumented)
|
|
end: TLArrowPoint;
|
|
// (undocumented)
|
|
handleArc: TLArcInfo;
|
|
// (undocumented)
|
|
isValid: boolean;
|
|
// (undocumented)
|
|
middle: VecLike;
|
|
// (undocumented)
|
|
start: TLArrowPoint;
|
|
// (undocumented)
|
|
type: 'arc';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLArcInfo {
|
|
// (undocumented)
|
|
center: VecLike;
|
|
// (undocumented)
|
|
largeArcFlag: number;
|
|
// (undocumented)
|
|
length: number;
|
|
// (undocumented)
|
|
radius: number;
|
|
// (undocumented)
|
|
size: number;
|
|
// (undocumented)
|
|
sweepFlag: number;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLArrowBindingHintOverlay extends TLOverlay {
|
|
// (undocumented)
|
|
props: {
|
|
arrowId: TLShapeId;
|
|
};
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLArrowBindings {
|
|
// (undocumented)
|
|
end: TLArrowBinding | undefined;
|
|
// (undocumented)
|
|
start: TLArrowBinding | undefined;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLArrowHintOverlay extends TLOverlay {
|
|
// (undocumented)
|
|
props: {
|
|
anchorX: number;
|
|
anchorY: number;
|
|
arrowKind: string;
|
|
handles: {
|
|
bottom: {
|
|
isEnabled: boolean;
|
|
x: number;
|
|
y: number;
|
|
};
|
|
left: {
|
|
isEnabled: boolean;
|
|
x: number;
|
|
y: number;
|
|
};
|
|
right: {
|
|
isEnabled: boolean;
|
|
x: number;
|
|
y: number;
|
|
};
|
|
top: {
|
|
isEnabled: boolean;
|
|
x: number;
|
|
y: number;
|
|
};
|
|
};
|
|
isExact: boolean;
|
|
isPrecise: boolean;
|
|
showEdgeHints: boolean;
|
|
snap: string;
|
|
targetId: TLShapeId;
|
|
};
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TLArrowInfo = TLArcArrowInfo | TLElbowArrowInfo | TLStraightArrowInfo;
|
|
|
|
// @public (undocumented)
|
|
export interface TLArrowPoint {
|
|
// (undocumented)
|
|
arrowhead: TLArrowShapeArrowheadStyle;
|
|
// (undocumented)
|
|
handle: VecLike;
|
|
// (undocumented)
|
|
point: VecLike;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLBrushOverlay extends TLOverlay {
|
|
// (undocumented)
|
|
props: {
|
|
h: number;
|
|
w: number;
|
|
x: number;
|
|
y: number;
|
|
};
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLCollaboratorBrushOverlay extends TLOverlay {
|
|
// (undocumented)
|
|
props: {
|
|
color: string;
|
|
h: number;
|
|
w: number;
|
|
x: number;
|
|
y: number;
|
|
};
|
|
}
|
|
|
|
// @public @deprecated (undocumented)
|
|
export interface TLCollaboratorCursorOverlay extends TLOverlay {
|
|
// (undocumented)
|
|
props: {
|
|
chatMessage: string;
|
|
color: string;
|
|
name: null | string;
|
|
x: number;
|
|
y: number;
|
|
};
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLCollaboratorHintOverlay extends TLOverlay {
|
|
// (undocumented)
|
|
props: {
|
|
x: number;
|
|
rotation: number;
|
|
color: string;
|
|
y: number;
|
|
};
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLCollaboratorScribbleOverlay extends TLOverlay {
|
|
// (undocumented)
|
|
props: {
|
|
color: string;
|
|
scribble: TLScribble;
|
|
};
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLCollaboratorShapeIndicatorOverlay extends TLOverlay {
|
|
// (undocumented)
|
|
props: {
|
|
indicators: Array<{
|
|
color: string;
|
|
shapeIds: TLShapeId[];
|
|
}>;
|
|
};
|
|
}
|
|
|
|
// @public
|
|
export interface TLComponents extends TLEditorComponents, TLUiComponents {
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TLCopyType = 'json' | 'png' | 'svg';
|
|
|
|
// @public (undocumented)
|
|
export interface TLDefaultExternalContentHandlerOpts extends TLExternalContentProps {
|
|
// (undocumented)
|
|
msg: ReturnType<typeof useTranslation>;
|
|
// (undocumented)
|
|
toasts: TLUiToastsContextType;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLDefaultFont {
|
|
// (undocumented)
|
|
italic: {
|
|
bold: TLFontFace_2;
|
|
normal: TLFontFace_2;
|
|
};
|
|
// (undocumented)
|
|
normal: {
|
|
bold: TLFontFace_2;
|
|
normal: TLFontFace_2;
|
|
};
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLDefaultFonts {
|
|
// (undocumented)
|
|
tldraw_draw: TLDefaultFont;
|
|
// (undocumented)
|
|
tldraw_mono: TLDefaultFont;
|
|
// (undocumented)
|
|
tldraw_sans: TLDefaultFont;
|
|
// (undocumented)
|
|
tldraw_serif: TLDefaultFont;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function Tldraw(props: TldrawProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export const TLDRAW_FILE_EXTENSION: '.tldr';
|
|
|
|
// @public (undocumented)
|
|
export interface TldrawBaseProps extends TldrawUiProps, TldrawEditorBaseProps, TLExternalContentProps {
|
|
assetUrls?: TLUiAssetUrlOverrides;
|
|
components?: TLComponents;
|
|
// @deprecated
|
|
embeds?: TLEmbedDefinition[];
|
|
locale?: string;
|
|
// @deprecated
|
|
textOptions?: TLTextOptions;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TldrawFile {
|
|
// (undocumented)
|
|
records: UnknownRecord[];
|
|
// (undocumented)
|
|
schema: SerializedSchema;
|
|
// (undocumented)
|
|
tldrawFileFormatVersion: number;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TldrawFileParseError = {
|
|
cause: unknown;
|
|
type: 'invalidRecords';
|
|
} | {
|
|
cause: unknown;
|
|
type: 'notATldrawFile';
|
|
} | {
|
|
data: any;
|
|
type: 'v1File';
|
|
} | {
|
|
reason: MigrationFailureReason;
|
|
type: 'migrationFailed';
|
|
} | {
|
|
type: 'fileFormatVersionTooNew';
|
|
version: number;
|
|
};
|
|
|
|
// @public
|
|
export const TldrawImage: MemoExoticComponent<(props: TldrawImageProps) => JSX.Element>;
|
|
|
|
// @public (undocumented)
|
|
export interface TldrawImageProps extends TLImageExportOptions {
|
|
assets?: TLAssetStore;
|
|
assetUrls?: TLUiAssetUrlOverrides;
|
|
bindingUtils?: readonly TLAnyBindingUtilConstructor[];
|
|
format?: 'png' | 'svg';
|
|
licenseKey?: string;
|
|
options?: Partial<TldrawOptions>;
|
|
pageId?: TLPageId;
|
|
shapeUtils?: readonly TLAnyShapeUtilConstructor[];
|
|
snapshot: Partial<TLEditorSnapshot> | TLStoreSnapshot;
|
|
// @deprecated
|
|
textOptions?: TLTextOptions;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TldrawProps = TldrawBaseProps & TldrawEditorStoreProps;
|
|
|
|
// @public (undocumented)
|
|
export const TldrawUi: React_3.MemoExoticComponent<({ renderDebugMenuItems, children, hideUi, components, ...rest }: TldrawUiProps) => JSX.Element>;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiA11yProvider({ children }: A11yProviderProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export const TldrawUiButton: React_2.ForwardRefExoticComponent<TLUiButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiButtonCheck({ checked }: TLUiButtonCheckProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiButtonIcon({ icon, small, invertIcon }: TLUiButtonIconProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiButtonLabel({ children }: TLUiButtonLabelProps): JSX.Element;
|
|
|
|
// @public
|
|
export const TldrawUiColumn: ForwardRefExoticComponent<TLUiLayoutProps & RefAttributes<HTMLDivElement>>;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiComponentsProvider({ overrides, children, }: TLUiComponentsProviderProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export const TldrawUiContextProvider: NamedExoticComponent<TLUiContextProviderProps>;
|
|
|
|
// @public
|
|
export function TldrawUiContextualToolbar({ children, className, isMousingDown, getSelectionBounds, changeOnlyWhenYChanges, label, }: TLUiContextualToolbarProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiDialogBody({ className, children, style }: TLUiDialogBodyProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiDialogCloseButton(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiDialogFooter({ className, children }: TLUiDialogFooterProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiDialogHeader({ className, children }: TLUiDialogHeaderProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiDialogsProvider({ context, children }: TLUiDialogsProviderProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiDialogTitle({ className, children, style }: TLUiDialogTitleProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiDropdownMenuCheckboxItem({ children, onSelect, ...rest }: TLUiDropdownMenuCheckboxItemProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiDropdownMenuContent({ className, side, align, sideOffset, alignOffset, collisionPadding, children, }: TLUiDropdownMenuContentProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiDropdownMenuGroup({ className, children }: TLUiDropdownMenuGroupProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiDropdownMenuIndicator(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiDropdownMenuItem({ noClose, children }: TLUiDropdownMenuItemProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiDropdownMenuRoot({ id, children, modal, debugOpen, }: TLUiDropdownMenuRootProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiDropdownMenuSub({ id, children }: TLUiDropdownMenuSubProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiDropdownMenuSubContent({ id, alignOffset, sideOffset, size, children, }: TLUiDropdownMenuSubContentProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiDropdownMenuSubTrigger({ id, label, title, disabled, }: TLUiDropdownMenuSubTriggerProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiDropdownMenuTrigger({ children, ...rest }: TLUiDropdownMenuTriggerProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiEventsProvider({ onEvent, children }: EventsProviderProps): JSX.Element;
|
|
|
|
// @public
|
|
export const TldrawUiGrid: ForwardRefExoticComponent<TLUiLayoutProps & RefAttributes<HTMLDivElement>>;
|
|
|
|
// @public (undocumented)
|
|
export const TldrawUiIcon: MemoExoticComponent<({ label, small, invertIcon, icon, tiny, color, className, ...props }: TLUiIconProps) => JSX.Element>;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiInFrontOfTheCanvas(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export const TldrawUiInput: React_2.ForwardRefExoticComponent<TLUiInputProps & React_2.RefAttributes<HTMLInputElement>>;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiKbd({ children, visibleOnMobileLayout }: TLUiKbdProps): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiMenuActionCheckboxItem({ actionId, ...rest }: TLUiMenuActionCheckboxItemProps): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiMenuActionItem({ actionId, ...rest }: TLUiMenuActionItemProps): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiMenuCheckboxItem<TranslationKey extends string = string, IconType extends string = string>({ id, kbd, label, lang, readonlyOk, onSelect, toggle, disabled, checked, }: TLUiMenuCheckboxItemProps<TranslationKey, IconType>): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiMenuContextProvider({ type, sourceId, children, }: TLUiMenuContextProviderProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiMenuGroup({ id, label, className, children }: TLUiMenuGroupProps): bigint | boolean | JSX.Element | Iterable<ReactNode> | null | number | Promise<bigint | boolean | ReactElement<unknown, JSXElementConstructor<any> | string> | ReactPortal | Iterable<ReactNode> | null | number | string | undefined> | string | undefined;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiMenuItem<TranslationKey extends string = string, IconType extends string = string>({ disabled, spinner, readonlyOk, id, kbd, label, icon, iconLeft, onSelect, noClose, isSelected, onDragStart, }: TLUiMenuItemProps<TranslationKey, IconType>): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiMenuSubmenu<Translation extends string = string>({ id, disabled, label, size, children, }: TLUiMenuSubmenuProps<Translation>): bigint | boolean | JSX.Element | Iterable<ReactNode> | null | number | Promise<bigint | boolean | ReactElement<unknown, JSXElementConstructor<any> | string> | ReactPortal | Iterable<ReactNode> | null | number | string | undefined> | string | undefined;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiMenuToolItem({ toolId, ...rest }: TLUiMenuToolItemProps): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export interface TldrawUiOrientationContext {
|
|
// (undocumented)
|
|
orientation: 'horizontal' | 'vertical';
|
|
// (undocumented)
|
|
tooltipSide: 'bottom' | 'left' | 'right' | 'top';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiOrientationProvider({ children, orientation, tooltipSide, }: TldrawUiOrientationProviderProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export interface TldrawUiOrientationProviderProps {
|
|
// (undocumented)
|
|
children: ReactNode;
|
|
// (undocumented)
|
|
orientation: 'horizontal' | 'vertical';
|
|
// (undocumented)
|
|
tooltipSide?: 'bottom' | 'left' | 'right' | 'top';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiPopover({ id, children, onOpenChange, open, className }: TLUiPopoverProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiPopoverContent({ side, children, align, sideOffset, alignOffset, collisionPadding, disableEscapeKeyDown, autoFocusFirstButton, }: TLUiPopoverContentProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiPopoverTrigger({ children }: TLUiPopoverTriggerProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export interface TldrawUiProps extends TLUiContextProviderProps {
|
|
assetUrls?: TLUiAssetUrlOverrides;
|
|
children?: ReactNode;
|
|
components?: TLUiComponents;
|
|
hideUi?: boolean;
|
|
renderDebugMenuItems?(): React_3.ReactNode;
|
|
}
|
|
|
|
// @public
|
|
export const TldrawUiRow: ForwardRefExoticComponent<TLUiLayoutProps & RefAttributes<HTMLDivElement>>;
|
|
|
|
// @public
|
|
export function TldrawUiSelect({ id, value, onValueChange, onOpenChange, disabled, className, children, 'data-testid': dataTestId, 'aria-label': ariaLabel, }: TLUiSelectProps): JSX.Element;
|
|
|
|
// @public
|
|
export function TldrawUiSelectContent({ children, side, align, className, }: TLUiSelectContentProps): JSX.Element;
|
|
|
|
// @public
|
|
export function TldrawUiSelectItem({ value, label, icon, disabled, className, }: TLUiSelectItemProps): JSX.Element;
|
|
|
|
// @public
|
|
export const TldrawUiSelectTrigger: React_2.ForwardRefExoticComponent<TLUiSelectTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
|
|
|
|
// @public
|
|
export function TldrawUiSelectValue({ placeholder, icon, children }: TLUiSelectValueProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export const TldrawUiSlider: React_3.ForwardRefExoticComponent<TLUiSliderProps & React_3.RefAttributes<HTMLDivElement>>;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiToastsProvider({ children }: TLUiToastsProviderProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export const TldrawUiToolbar: React_3.ForwardRefExoticComponent<TLUiToolbarProps & React_3.RefAttributes<HTMLDivElement>>;
|
|
|
|
// @public (undocumented)
|
|
export const TldrawUiToolbarButton: React_3.ForwardRefExoticComponent<TLUiToolbarButtonProps & React_3.RefAttributes<HTMLButtonElement>>;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiToolbarToggleGroup({ children, className, type, asChild, ...props }: TLUiToolbarToggleGroupProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiToolbarToggleItem({ children, className, type, value, tooltip, ...props }: TLUiToolbarToggleItemProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export const TldrawUiTooltip: React_3.ForwardRefExoticComponent<TldrawUiTooltipProps & React_3.RefAttributes<HTMLButtonElement>>;
|
|
|
|
// @public (undocumented)
|
|
export interface TldrawUiTooltipProps {
|
|
// (undocumented)
|
|
children: React_3.ReactNode;
|
|
// (undocumented)
|
|
content?: React_3.ReactNode | string;
|
|
// (undocumented)
|
|
delayDuration?: number;
|
|
// (undocumented)
|
|
disabled?: boolean;
|
|
// (undocumented)
|
|
showOnMobile?: boolean;
|
|
// (undocumented)
|
|
side?: 'bottom' | 'left' | 'right' | 'top';
|
|
// (undocumented)
|
|
sideOffset?: number;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function TldrawUiTooltipProvider({ children }: TldrawUiTooltipProviderProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export interface TldrawUiTooltipProviderProps {
|
|
// (undocumented)
|
|
children: React_3.ReactNode;
|
|
}
|
|
|
|
// @public
|
|
export function TldrawUiTranslationProvider({ overrides, locale, children, }: TLUiTranslationProviderProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export interface TLEditorAssetUrls {
|
|
// (undocumented)
|
|
fonts?: {
|
|
[key: string]: string | undefined;
|
|
tldraw_draw_bold?: string;
|
|
tldraw_draw_italic_bold?: string;
|
|
tldraw_draw_italic?: string;
|
|
tldraw_draw?: string;
|
|
tldraw_mono_bold?: string;
|
|
tldraw_mono_italic_bold?: string;
|
|
tldraw_mono_italic?: string;
|
|
tldraw_mono?: string;
|
|
tldraw_sans_bold?: string;
|
|
tldraw_sans_italic_bold?: string;
|
|
tldraw_sans_italic?: string;
|
|
tldraw_sans?: string;
|
|
tldraw_serif_bold?: string;
|
|
tldraw_serif_italic_bold?: string;
|
|
tldraw_serif_italic?: string;
|
|
tldraw_serif?: string;
|
|
};
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLElbowArrowInfo {
|
|
// (undocumented)
|
|
bindings: TLArrowBindings;
|
|
// (undocumented)
|
|
elbow: ElbowArrowInfo;
|
|
// (undocumented)
|
|
end: TLArrowPoint;
|
|
// (undocumented)
|
|
isValid: boolean;
|
|
// (undocumented)
|
|
route: ElbowArrowRoute;
|
|
// (undocumented)
|
|
start: TLArrowPoint;
|
|
// (undocumented)
|
|
type: 'elbow';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TLEmbedDefinition = CustomEmbedDefinition<any> | EmbedDefinition<any>;
|
|
|
|
// @public (undocumented)
|
|
export type TLEmbedResult = {
|
|
definition: TLEmbedDefinition;
|
|
embedUrl: string;
|
|
url: string;
|
|
} | undefined;
|
|
|
|
// @public (undocumented)
|
|
export type TLEmbedShapePermissions = {
|
|
[K in keyof typeof embedShapePermissionDefaults]?: boolean;
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export interface TLExternalContentProps {
|
|
acceptedImageMimeTypes?: readonly string[];
|
|
acceptedVideoMimeTypes?: readonly string[];
|
|
maxAssetSize?: number;
|
|
maxImageDimension?: number;
|
|
}
|
|
|
|
// @public
|
|
export type TLNoteShapeAttributionComponent = ComponentType<TLNoteShapeAttributionProps> | null;
|
|
|
|
// @public (undocumented)
|
|
export interface TLNoteShapeAttributionProps {
|
|
color: string;
|
|
firstName: string;
|
|
name: string;
|
|
scale: number;
|
|
shape: TLNoteShape;
|
|
variant: 'canvas' | 'export';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLScribbleOverlay extends TLOverlay {
|
|
// (undocumented)
|
|
props: {
|
|
scribble: TLScribble;
|
|
};
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLSelectionForegroundOverlay extends TLOverlay {
|
|
// (undocumented)
|
|
props: {
|
|
handle: RotateCorner | TLSelectionHandle;
|
|
overlayType: 'mobile_rotate' | 'resize_handle' | 'rotate_handle';
|
|
};
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLShapeHandleOverlay extends TLOverlay {
|
|
// (undocumented)
|
|
props: {
|
|
handle: TLHandle;
|
|
shapeId: TLShapeId;
|
|
};
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLShapeIndicatorOverlay extends TLOverlay {
|
|
// (undocumented)
|
|
props: {
|
|
hintingShapeIds: TLShapeId_2[];
|
|
idsToDisplay: TLShapeId_2[];
|
|
};
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLSnapIndicatorOverlay extends TLOverlay {
|
|
// (undocumented)
|
|
props: {
|
|
line: SnapIndicator;
|
|
};
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLStraightArrowInfo {
|
|
// (undocumented)
|
|
bindings: TLArrowBindings;
|
|
// (undocumented)
|
|
end: TLArrowPoint;
|
|
// (undocumented)
|
|
isValid: boolean;
|
|
// (undocumented)
|
|
length: number;
|
|
// (undocumented)
|
|
middle: VecLike;
|
|
// (undocumented)
|
|
start: TLArrowPoint;
|
|
// (undocumented)
|
|
type: 'straight';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLTypeFace {
|
|
// (undocumented)
|
|
display?: any;
|
|
// (undocumented)
|
|
featureSettings?: string;
|
|
// (undocumented)
|
|
format?: string;
|
|
// (undocumented)
|
|
stretch?: string;
|
|
// (undocumented)
|
|
style?: string;
|
|
// (undocumented)
|
|
unicodeRange?: string;
|
|
// (undocumented)
|
|
url: string;
|
|
// (undocumented)
|
|
variant?: string;
|
|
// (undocumented)
|
|
weight?: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiA11y {
|
|
// (undocumented)
|
|
msg: string | undefined;
|
|
// (undocumented)
|
|
priority?: A11yPriority;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiA11yContextType {
|
|
// (undocumented)
|
|
announce(msg: TLUiA11y): void;
|
|
// (undocumented)
|
|
currentMsg: Atom<TLUiA11y>;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiActionItem<TransationKey extends string = string, IconType extends string = string> {
|
|
// (undocumented)
|
|
checkbox?: boolean;
|
|
// (undocumented)
|
|
icon?: IconType | React_2.ReactElement;
|
|
// (undocumented)
|
|
id: string;
|
|
// (undocumented)
|
|
isRequiredA11yAction?: boolean;
|
|
// (undocumented)
|
|
kbd?: string;
|
|
// (undocumented)
|
|
label?: {
|
|
[key: string]: TransationKey;
|
|
} | TransationKey;
|
|
// (undocumented)
|
|
onSelect(source: TLUiEventSource): Promise<void> | void;
|
|
// (undocumented)
|
|
readonlyOk?: boolean;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TLUiActionsContextType = Record<string, TLUiActionItem>;
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiActionsMenuProps {
|
|
// (undocumented)
|
|
children?: ReactNode;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TLUiAssetUrlOverrides = RecursivePartial<TLUiAssetUrls>;
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiAssetUrls extends TLEditorAssetUrls {
|
|
// (undocumented)
|
|
embedIcons: Partial<Record<(typeof DEFAULT_EMBED_DEFINITIONS)[number]['type'], string>>;
|
|
// (undocumented)
|
|
icons: Record<Exclude<string, TLUiIconType> | TLUiIconType, string>;
|
|
// (undocumented)
|
|
translations: Record<(typeof LANGUAGES)[number]['locale'], string>;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiButtonCheckProps {
|
|
// (undocumented)
|
|
checked: boolean;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiButtonIconProps {
|
|
// (undocumented)
|
|
icon: string | TLUiIconJsx;
|
|
// (undocumented)
|
|
invertIcon?: boolean;
|
|
// (undocumented)
|
|
small?: boolean;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiButtonLabelProps {
|
|
// (undocumented)
|
|
children?: ReactNode;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiButtonProps extends React_2.HTMLAttributes<HTMLButtonElement> {
|
|
// (undocumented)
|
|
disabled?: boolean;
|
|
// (undocumented)
|
|
htmlButtonType?: 'button' | 'reset' | 'submit';
|
|
// (undocumented)
|
|
isActive?: boolean;
|
|
// (undocumented)
|
|
tooltip?: string;
|
|
// (undocumented)
|
|
type: 'danger' | 'help' | 'icon' | 'low' | 'menu' | 'normal' | 'primary' | 'tool';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiComponents {
|
|
// (undocumented)
|
|
A11y?: ComponentType | null;
|
|
// (undocumented)
|
|
ActionsMenu?: ComponentType<TLUiActionsMenuProps> | null;
|
|
// (undocumented)
|
|
ContextMenu?: ComponentType<TLUiContextMenuProps> | null;
|
|
// (undocumented)
|
|
CursorChatBubble?: ComponentType | null;
|
|
// (undocumented)
|
|
DebugMenu?: ComponentType | null;
|
|
// (undocumented)
|
|
DebugPanel?: ComponentType | null;
|
|
// (undocumented)
|
|
Dialogs?: ComponentType | null;
|
|
// (undocumented)
|
|
FollowingIndicator?: ComponentType | null;
|
|
// (undocumented)
|
|
HelperButtons?: ComponentType<TLUiHelperButtonsProps> | null;
|
|
// (undocumented)
|
|
HelpMenu?: ComponentType<TLUiHelpMenuProps> | null;
|
|
// (undocumented)
|
|
ImageToolbar?: ComponentType | null;
|
|
// (undocumented)
|
|
KeyboardShortcutsDialog?: ComponentType<TLUiKeyboardShortcutsDialogProps> | null;
|
|
// (undocumented)
|
|
MainMenu?: ComponentType<TLUiMainMenuProps> | null;
|
|
// (undocumented)
|
|
MenuPanel?: ComponentType | null;
|
|
// (undocumented)
|
|
Minimap?: ComponentType | null;
|
|
// (undocumented)
|
|
NavigationPanel?: ComponentType | null;
|
|
// (undocumented)
|
|
PageMenu?: ComponentType | null;
|
|
// (undocumented)
|
|
PeopleMenu?: ComponentType | null;
|
|
// (undocumented)
|
|
PeopleMenuAvatar?: ComponentType<TLUiPeopleMenuAvatarProps> | null;
|
|
// (undocumented)
|
|
PeopleMenuFacePile?: ComponentType<TLUiPeopleMenuFacePileProps> | null;
|
|
// (undocumented)
|
|
PeopleMenuItem?: ComponentType<TLUiPeopleMenuItemProps> | null;
|
|
// (undocumented)
|
|
QuickActions?: ComponentType<TLUiQuickActionsProps> | null;
|
|
// (undocumented)
|
|
RichTextToolbar?: ComponentType<TLUiRichTextToolbarProps> | null;
|
|
// (undocumented)
|
|
SharePanel?: ComponentType | null;
|
|
// (undocumented)
|
|
StylePanel?: ComponentType<TLUiStylePanelProps> | null;
|
|
// (undocumented)
|
|
Toasts?: ComponentType | null;
|
|
// (undocumented)
|
|
Toolbar?: ComponentType | null;
|
|
// (undocumented)
|
|
TopPanel?: ComponentType | null;
|
|
// (undocumented)
|
|
UserPresenceEditor?: ComponentType | null;
|
|
// (undocumented)
|
|
VideoToolbar?: ComponentType | null;
|
|
// (undocumented)
|
|
ZoomMenu?: ComponentType<TLUiZoomMenuProps> | null;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiComponentsProviderProps {
|
|
// (undocumented)
|
|
children: ReactNode;
|
|
// (undocumented)
|
|
overrides?: TLUiComponents;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiContextMenuProps {
|
|
// (undocumented)
|
|
children?: ReactNode;
|
|
// (undocumented)
|
|
disabled?: boolean;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiContextProviderProps {
|
|
assetUrls?: RecursivePartial<TLUiAssetUrls>;
|
|
children?: ReactNode;
|
|
components?: TLUiComponents;
|
|
forceMobile?: boolean;
|
|
mediaMimeTypes?: string[];
|
|
onUiEvent?: TLUiEventHandler;
|
|
overrides?: TLUiOverrides | TLUiOverrides[];
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiContextualToolbarProps {
|
|
// (undocumented)
|
|
changeOnlyWhenYChanges?: boolean;
|
|
// (undocumented)
|
|
children?: React_3.ReactNode;
|
|
// (undocumented)
|
|
className?: string;
|
|
// (undocumented)
|
|
getSelectionBounds(): Box | undefined;
|
|
// (undocumented)
|
|
isMousingDown?: boolean;
|
|
// (undocumented)
|
|
label: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiDebugMenuProps {
|
|
// (undocumented)
|
|
children?: ReactNode;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiDialog {
|
|
// (undocumented)
|
|
component: ComponentType<TLUiDialogProps>;
|
|
// (undocumented)
|
|
id: string;
|
|
// (undocumented)
|
|
onClose?(): void;
|
|
// (undocumented)
|
|
preventBackgroundClose?: boolean;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiDialogBodyProps {
|
|
// (undocumented)
|
|
children: ReactNode;
|
|
// (undocumented)
|
|
className?: string;
|
|
// (undocumented)
|
|
style?: CSSProperties;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiDialogFooterProps {
|
|
// (undocumented)
|
|
children?: ReactNode;
|
|
// (undocumented)
|
|
className?: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiDialogHeaderProps {
|
|
// (undocumented)
|
|
children: ReactNode;
|
|
// (undocumented)
|
|
className?: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiDialogProps {
|
|
// (undocumented)
|
|
onClose(): void;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiDialogsContextType {
|
|
// (undocumented)
|
|
addDialog(dialog: Omit<TLUiDialog, 'id'> & {
|
|
id?: string;
|
|
}): string;
|
|
// (undocumented)
|
|
clearDialogs(): void;
|
|
// (undocumented)
|
|
dialogs: Atom<TLUiDialog[]>;
|
|
// (undocumented)
|
|
removeDialog(id: string): string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiDialogsProviderProps {
|
|
// (undocumented)
|
|
children: ReactNode;
|
|
// (undocumented)
|
|
context?: string;
|
|
// (undocumented)
|
|
overrides?(editor: Editor): TLUiDialogsContextType;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiDialogTitleProps {
|
|
// (undocumented)
|
|
children: ReactNode;
|
|
// (undocumented)
|
|
className?: string;
|
|
// (undocumented)
|
|
style?: CSSProperties;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiDropdownMenuCheckboxItemProps {
|
|
// (undocumented)
|
|
checked?: boolean;
|
|
// (undocumented)
|
|
children: ReactNode;
|
|
// (undocumented)
|
|
disabled?: boolean;
|
|
// (undocumented)
|
|
onSelect?(e: Event): void;
|
|
// (undocumented)
|
|
title: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiDropdownMenuContentProps {
|
|
// (undocumented)
|
|
align?: 'center' | 'end' | 'start';
|
|
// (undocumented)
|
|
alignOffset?: number;
|
|
// (undocumented)
|
|
children: ReactNode;
|
|
// (undocumented)
|
|
className?: string;
|
|
// (undocumented)
|
|
collisionPadding?: number;
|
|
// (undocumented)
|
|
id?: string;
|
|
// (undocumented)
|
|
side?: 'bottom' | 'left' | 'right' | 'top';
|
|
// (undocumented)
|
|
sideOffset?: number;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiDropdownMenuGroupProps {
|
|
// (undocumented)
|
|
children: ReactNode;
|
|
// (undocumented)
|
|
className?: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiDropdownMenuItemProps {
|
|
// (undocumented)
|
|
children: ReactNode;
|
|
// (undocumented)
|
|
noClose?: boolean;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiDropdownMenuRootProps {
|
|
// (undocumented)
|
|
children: ReactNode;
|
|
// (undocumented)
|
|
debugOpen?: boolean;
|
|
// (undocumented)
|
|
id: string;
|
|
// (undocumented)
|
|
modal?: boolean;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiDropdownMenuSubContentProps {
|
|
// (undocumented)
|
|
alignOffset?: number;
|
|
// (undocumented)
|
|
children: ReactNode;
|
|
// (undocumented)
|
|
id?: string;
|
|
// (undocumented)
|
|
sideOffset?: number;
|
|
// (undocumented)
|
|
size?: 'medium' | 'small' | 'tiny' | 'wide';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiDropdownMenuSubProps {
|
|
// (undocumented)
|
|
children: ReactNode;
|
|
// (undocumented)
|
|
id: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiDropdownMenuSubTriggerProps {
|
|
// (undocumented)
|
|
disabled?: boolean;
|
|
// (undocumented)
|
|
id?: string;
|
|
// (undocumented)
|
|
label: string;
|
|
// (undocumented)
|
|
title?: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiDropdownMenuTriggerProps {
|
|
// (undocumented)
|
|
children?: ReactNode;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TLUiEventContextType = TLUiEventHandler;
|
|
|
|
// @public (undocumented)
|
|
export type TLUiEventData<K> = K extends null ? {
|
|
source: TLUiEventSource;
|
|
} : {
|
|
source: TLUiEventSource;
|
|
} & K;
|
|
|
|
// @public (undocumented)
|
|
export type TLUiEventHandler = <T extends keyof TLUiEventMap>(name: T, data: TLUiEventData<TLUiEventMap[T]>) => void;
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiEventMap {
|
|
// (undocumented)
|
|
'a11y-repeat-shape-announce': null;
|
|
// (undocumented)
|
|
'adjust-shape-styles': null;
|
|
// (undocumented)
|
|
'align-shapes': {
|
|
operation: 'bottom' | 'center-horizontal' | 'center-vertical' | 'left' | 'right' | 'top';
|
|
};
|
|
// (undocumented)
|
|
'alt-text-start': null;
|
|
// (undocumented)
|
|
'change-language': {
|
|
locale: string;
|
|
};
|
|
// (undocumented)
|
|
'change-page': {
|
|
direction?: 'next' | 'prev';
|
|
};
|
|
// (undocumented)
|
|
'change-user-name': null;
|
|
// (undocumented)
|
|
'close-menu': {
|
|
id: string;
|
|
};
|
|
// (undocumented)
|
|
'color-scheme': {
|
|
value: string;
|
|
};
|
|
// (undocumented)
|
|
'convert-to-bookmark': null;
|
|
// (undocumented)
|
|
'convert-to-embed': null;
|
|
// (undocumented)
|
|
'copy-as': {
|
|
format: 'json' | 'png' | 'svg';
|
|
};
|
|
// (undocumented)
|
|
'copy-hovered-styles': null;
|
|
// (undocumented)
|
|
'copy-link': null;
|
|
// (undocumented)
|
|
'create-new-project': null;
|
|
// (undocumented)
|
|
'delete-page': null;
|
|
// (undocumented)
|
|
'delete-shapes': null;
|
|
// (undocumented)
|
|
'distribute-shapes': {
|
|
operation: 'horizontal' | 'vertical';
|
|
};
|
|
// (undocumented)
|
|
'download-original': null;
|
|
// (undocumented)
|
|
'drag-tool': {
|
|
id: string;
|
|
};
|
|
// (undocumented)
|
|
'duplicate-page': null;
|
|
// (undocumented)
|
|
'duplicate-shapes': null;
|
|
// (undocumented)
|
|
'edit-link': null;
|
|
// (undocumented)
|
|
'enhanced-a11y-mode': null;
|
|
// (undocumented)
|
|
'enlarge-shapes': null;
|
|
// (undocumented)
|
|
'exit-pen-mode': null;
|
|
// (undocumented)
|
|
'export-all-as': {
|
|
format: 'json' | 'png' | 'svg';
|
|
};
|
|
// (undocumented)
|
|
'export-as': {
|
|
format: 'json' | 'png' | 'svg';
|
|
};
|
|
// (undocumented)
|
|
'fit-frame-to-content': null;
|
|
// (undocumented)
|
|
'flatten-to-image': null;
|
|
// (undocumented)
|
|
'flip-shapes': {
|
|
operation: 'horizontal' | 'vertical';
|
|
};
|
|
// (undocumented)
|
|
'frame-selection': null;
|
|
// (undocumented)
|
|
'group-shapes': null;
|
|
// (undocumented)
|
|
'image-manipulate': null;
|
|
// (undocumented)
|
|
'image-replace': null;
|
|
// (undocumented)
|
|
'input-mode': {
|
|
value: string;
|
|
};
|
|
// (undocumented)
|
|
'insert-embed': null;
|
|
// (undocumented)
|
|
'insert-media': null;
|
|
// (undocumented)
|
|
'move-page': null;
|
|
// (undocumented)
|
|
'move-to-new-page': null;
|
|
// (undocumented)
|
|
'move-to-page': null;
|
|
// (undocumented)
|
|
'new-page': null;
|
|
// (undocumented)
|
|
'open-context-menu': null;
|
|
// (undocumented)
|
|
'open-cursor-chat': null;
|
|
// (undocumented)
|
|
'open-embed-link': null;
|
|
// (undocumented)
|
|
'open-file': null;
|
|
// (undocumented)
|
|
'open-kbd-shortcuts': null;
|
|
// (undocumented)
|
|
'open-menu': {
|
|
id: string;
|
|
};
|
|
// (undocumented)
|
|
'open-url': {
|
|
destinationUrl: string;
|
|
};
|
|
// (undocumented)
|
|
'pack-shapes': null;
|
|
// (undocumented)
|
|
'remove-frame': null;
|
|
// (undocumented)
|
|
'rename-document': null;
|
|
// (undocumented)
|
|
'rename-page': null;
|
|
// (undocumented)
|
|
'reorder-shapes': {
|
|
operation: 'backward' | 'forward' | 'toBack' | 'toFront';
|
|
};
|
|
// (undocumented)
|
|
'replace-media': null;
|
|
// (undocumented)
|
|
'reset-zoom': null;
|
|
// (undocumented)
|
|
'rich-text': {
|
|
operation: 'bold' | 'bulletList' | 'heading' | 'link-edit' | 'link-remove' | 'link-visit' | 'link' | 'strike';
|
|
};
|
|
// (undocumented)
|
|
'rotate-ccw': {
|
|
fine: boolean;
|
|
};
|
|
// (undocumented)
|
|
'rotate-cw': {
|
|
fine: boolean;
|
|
};
|
|
// (undocumented)
|
|
'save-project-to-file': null;
|
|
// (undocumented)
|
|
'select-adjacent-shape': {
|
|
direction: 'down' | 'left' | 'next' | 'prev' | 'right' | 'up';
|
|
};
|
|
// (undocumented)
|
|
'select-all-shapes': null;
|
|
// (undocumented)
|
|
'select-none-shapes': null;
|
|
// (undocumented)
|
|
'select-tool': {
|
|
id: string;
|
|
};
|
|
// (undocumented)
|
|
'set-alt-text': null;
|
|
// (undocumented)
|
|
'set-color': null;
|
|
// (undocumented)
|
|
'set-style': {
|
|
id: string;
|
|
value: number | string;
|
|
};
|
|
// (undocumented)
|
|
'shrink-shapes': null;
|
|
// (undocumented)
|
|
'stack-shapes': {
|
|
operation: 'horizontal' | 'vertical';
|
|
};
|
|
// (undocumented)
|
|
'start-following': null;
|
|
// (undocumented)
|
|
'stop-following': null;
|
|
// (undocumented)
|
|
'stretch-shapes': {
|
|
operation: 'horizontal' | 'vertical';
|
|
};
|
|
// (undocumented)
|
|
'toggle-auto-size': null;
|
|
// (undocumented)
|
|
'toggle-debug-mode': null;
|
|
// (undocumented)
|
|
'toggle-dynamic-size-mode': null;
|
|
// (undocumented)
|
|
'toggle-edge-scrolling': null;
|
|
// (undocumented)
|
|
'toggle-focus-mode': null;
|
|
// (undocumented)
|
|
'toggle-grid-mode': null;
|
|
// (undocumented)
|
|
'toggle-invert-zoom': null;
|
|
// (undocumented)
|
|
'toggle-keyboard-shortcuts': null;
|
|
// (undocumented)
|
|
'toggle-lock': null;
|
|
// (undocumented)
|
|
'toggle-paste-at-cursor': null;
|
|
// (undocumented)
|
|
'toggle-reduce-motion': null;
|
|
// (undocumented)
|
|
'toggle-snap-mode': null;
|
|
// (undocumented)
|
|
'toggle-tool-lock': null;
|
|
// (undocumented)
|
|
'toggle-transparent': null;
|
|
// (undocumented)
|
|
'toggle-wrap-mode': null;
|
|
// (undocumented)
|
|
'ungroup-shapes': null;
|
|
// (undocumented)
|
|
'unlock-all': null;
|
|
// (undocumented)
|
|
'video-replace': null;
|
|
// (undocumented)
|
|
'zoom-in': {
|
|
towardsCursor: boolean;
|
|
};
|
|
// (undocumented)
|
|
'zoom-into-view': null;
|
|
// (undocumented)
|
|
'zoom-out': {
|
|
towardsCursor: boolean;
|
|
};
|
|
// (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)
|
|
edit: 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' | 'document-name' | 'export-menu' | 'help-menu' | 'helper-buttons' | 'image-toolbar' | 'kbd' | 'main-menu' | 'menu' | 'navigation-zone' | 'page-menu' | 'people-menu' | 'quick-actions' | 'rich-text-menu' | 'share-menu' | 'style-panel' | 'toolbar' | 'unknown' | 'video-toolbar' | 'zoom-menu';
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiHelperButtonsProps {
|
|
// (undocumented)
|
|
children?: ReactNode;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiHelpMenuProps {
|
|
// (undocumented)
|
|
children?: ReactNode;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TLUiIconJsx = ReactElement<React.HTMLAttributes<HTMLDivElement>>;
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiIconProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
// (undocumented)
|
|
children?: undefined;
|
|
// (undocumented)
|
|
color?: string;
|
|
// (undocumented)
|
|
crossOrigin?: 'anonymous' | 'use-credentials';
|
|
// (undocumented)
|
|
icon: Exclude<string, TLUiIconType> | TLUiIconJsx | TLUiIconType;
|
|
// (undocumented)
|
|
invertIcon?: boolean;
|
|
// (undocumented)
|
|
label: string;
|
|
// (undocumented)
|
|
small?: boolean;
|
|
// (undocumented)
|
|
tiny?: boolean;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TLUiIconType = 'align-bottom' | 'align-center-horizontal' | 'align-center-vertical' | 'align-left' | 'align-right' | 'align-top' | 'alt' | 'arrow-arc' | 'arrow-cycle' | 'arrow-elbow' | 'arrow-left' | 'arrowhead-arrow' | 'arrowhead-bar' | 'arrowhead-diamond' | 'arrowhead-dot' | 'arrowhead-none' | 'arrowhead-square' | 'arrowhead-triangle-inverted' | 'arrowhead-triangle' | 'blob' | 'bold' | 'bookmark' | 'bring-forward' | 'bring-to-front' | 'broken' | 'bulletList' | 'check-circle' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'chevrons-ne' | 'chevrons-sw' | 'clipboard-copied' | 'clipboard-copy' | 'closed' | 'code' | 'color' | 'comment' | 'corners' | 'crop' | 'cross-2' | 'cross-circle' | 'dash-dashed' | 'dash-dotted' | 'dash-draw' | 'dash-solid' | 'disconnected' | 'discord' | 'distribute-horizontal' | 'distribute-vertical' | 'dot' | 'dots-horizontal' | 'dots-vertical' | 'download' | 'drag-handle-dots' | 'duplicate' | 'edit' | 'external-link' | 'fill-fill' | 'fill-lined-fill' | '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-heart' | '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' | 'heading' | 'help-circle' | 'highlight' | 'horizontal-align-end' | 'horizontal-align-middle' | 'horizontal-align-start' | 'info-circle' | 'italic' | 'leading' | 'link' | 'list' | 'lock' | 'manual' | 'menu' | 'minus' | 'mixed' | 'pack' | 'plus' | 'question-mark-circle' | 'question-mark' | 'redo' | 'reset-zoom' | 'rotate-ccw' | 'rotate-cw' | 'send-backward' | 'send-to-back' | 'share-1' | 'size-extra-large' | 'size-large' | 'size-medium' | 'size-small' | 'spline-cubic' | 'spline-line' | 'stack-horizontal' | 'stack-vertical' | 'status-offline' | 'stretch-horizontal' | 'stretch-vertical' | 'strike' | 'text-align-center' | 'text-align-left' | 'text-align-right' | 'toggle-off' | 'toggle-on' | 'tool-arrow' | 'tool-eraser' | 'tool-frame' | 'tool-hand' | 'tool-highlight' | 'tool-laser' | 'tool-line' | 'tool-media' | 'tool-note' | 'tool-pencil' | 'tool-pointer' | 'tool-screenshot' | 'tool-text' | 'trash' | 'twitter' | 'underline' | 'undo' | 'ungroup' | 'unlock' | 'vertical-align-end' | 'vertical-align-middle' | 'vertical-align-start' | 'warning-triangle' | 'zoom-in' | 'zoom-out';
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiImageToolbarProps {
|
|
// (undocumented)
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiInputProps {
|
|
// (undocumented)
|
|
'aria-label'?: string;
|
|
// (undocumented)
|
|
'data-testid'?: string;
|
|
// (undocumented)
|
|
autoFocus?: boolean;
|
|
// (undocumented)
|
|
autoSelect?: boolean;
|
|
// (undocumented)
|
|
children?: React_2.ReactNode;
|
|
// (undocumented)
|
|
className?: string;
|
|
// (undocumented)
|
|
defaultValue?: string;
|
|
// (undocumented)
|
|
disabled?: boolean;
|
|
// (undocumented)
|
|
icon?: Exclude<string, TLUiIconType> | TLUiIconType;
|
|
// (undocumented)
|
|
iconLabel?: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey;
|
|
// (undocumented)
|
|
iconLeft?: Exclude<string, TLUiIconType> | TLUiIconType;
|
|
// (undocumented)
|
|
label?: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey;
|
|
maxLength?: number;
|
|
// (undocumented)
|
|
onBlur?(value: string): void;
|
|
// (undocumented)
|
|
onCancel?(value: string): void;
|
|
// (undocumented)
|
|
onComplete?(value: string): void;
|
|
// (undocumented)
|
|
onFocus?(): void;
|
|
// (undocumented)
|
|
onValueChange?(value: string): void;
|
|
// (undocumented)
|
|
placeholder?: string;
|
|
shouldManuallyMaintainScrollPositionWhenFocused?: boolean;
|
|
// (undocumented)
|
|
value?: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiKbdProps {
|
|
// (undocumented)
|
|
children: string;
|
|
// (undocumented)
|
|
visibleOnMobileLayout?: boolean;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TLUiKeyboardShortcutsDialogProps = TLUiDialogProps & {
|
|
children?: ReactNode;
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiLayoutProps extends HTMLAttributes<HTMLDivElement> {
|
|
// (undocumented)
|
|
asChild?: boolean;
|
|
// (undocumented)
|
|
children: ReactNode;
|
|
// (undocumented)
|
|
tooltipSide?: 'bottom' | 'left' | 'right' | 'top';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiMainMenuProps {
|
|
// (undocumented)
|
|
children?: ReactNode;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TLUiMenuActionCheckboxItemProps = {
|
|
actionId?: string;
|
|
} & Pick<TLUiMenuCheckboxItemProps, 'checked' | 'disabled' | 'toggle'>;
|
|
|
|
// @public (undocumented)
|
|
export type TLUiMenuActionItemProps = {
|
|
actionId?: string;
|
|
} & Partial<Pick<TLUiMenuItemProps, 'disabled' | 'isSelected' | 'noClose' | 'onSelect'>>;
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiMenuCheckboxItemProps<TranslationKey extends string = string, IconType extends string = string> {
|
|
// (undocumented)
|
|
checked?: boolean;
|
|
// (undocumented)
|
|
disabled?: boolean;
|
|
// (undocumented)
|
|
icon?: IconType | TLUiIconJsx;
|
|
// (undocumented)
|
|
id: string;
|
|
// (undocumented)
|
|
kbd?: string;
|
|
// (undocumented)
|
|
label?: {
|
|
[key: string]: TranslationKey;
|
|
} | TranslationKey;
|
|
// (undocumented)
|
|
lang?: string;
|
|
// (undocumented)
|
|
onSelect(source: TLUiEventSource): Promise<void> | void;
|
|
// (undocumented)
|
|
readonlyOk?: boolean;
|
|
// (undocumented)
|
|
title?: string;
|
|
// (undocumented)
|
|
toggle?: boolean;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiMenuContextProviderProps {
|
|
// (undocumented)
|
|
children: React.ReactNode;
|
|
// (undocumented)
|
|
sourceId: TLUiEventSource;
|
|
// (undocumented)
|
|
type: TLUiMenuContextType;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TLUiMenuContextType = 'context-menu' | 'helper-buttons' | 'icons' | 'keyboard-shortcuts' | 'menu' | 'small-icons' | 'toolbar-overflow' | 'toolbar';
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiMenuGroupProps<TranslationKey extends string = string> {
|
|
// (undocumented)
|
|
children?: ReactNode;
|
|
// (undocumented)
|
|
className?: string;
|
|
// (undocumented)
|
|
id: string;
|
|
label?: {
|
|
[key: string]: TranslationKey;
|
|
} | TranslationKey;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiMenuItemProps<TranslationKey extends string = string, IconType extends string = string> {
|
|
disabled?: boolean;
|
|
icon?: IconType | TLUiIconJsx;
|
|
iconLeft?: IconType | TLUiIconJsx;
|
|
// (undocumented)
|
|
id: string;
|
|
isSelected?: boolean;
|
|
kbd?: string;
|
|
label?: {
|
|
[key: string]: TranslationKey;
|
|
} | TranslationKey;
|
|
noClose?: boolean;
|
|
onDragStart?(source: TLUiEventSource, info: TLPointerEventInfo): void;
|
|
onSelect(source: TLUiEventSource): Promise<void> | void;
|
|
readonlyOk?: boolean;
|
|
spinner?: boolean;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiMenuSubmenuProps<Translation extends string = string> {
|
|
// (undocumented)
|
|
children: ReactNode;
|
|
// (undocumented)
|
|
disabled?: boolean;
|
|
// (undocumented)
|
|
id: string;
|
|
// (undocumented)
|
|
label?: {
|
|
[key: string]: Translation;
|
|
} | Translation;
|
|
// (undocumented)
|
|
size?: 'medium' | 'small' | 'tiny' | 'wide';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TLUiMenuToolItemProps = {
|
|
toolId?: string;
|
|
} & Pick<TLUiMenuItemProps, 'disabled' | 'isSelected'>;
|
|
|
|
// @public (undocumented)
|
|
export type TLUiOverrideHelpers = ReturnType<typeof useDefaultHelpers>;
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiOverrides {
|
|
// (undocumented)
|
|
actions?(editor: Editor, actions: TLUiActionsContextType, helpers: TLUiOverrideHelpers): TLUiActionsContextType;
|
|
// (undocumented)
|
|
tools?(editor: Editor, tools: TLUiToolsContextType, helpers: TLUiOverrideHelpers): TLUiToolsContextType;
|
|
// (undocumented)
|
|
translations?: TLUiTranslationProviderProps['overrides'];
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiPeopleMenuAvatarProps {
|
|
// (undocumented)
|
|
userId: TLUserId;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiPeopleMenuFacePileProps {
|
|
// (undocumented)
|
|
userColor: string;
|
|
// (undocumented)
|
|
userIds: TLUserId[];
|
|
// (undocumented)
|
|
userName: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiPeopleMenuItemProps {
|
|
// (undocumented)
|
|
userId: TLUserId;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiPopoverContentProps {
|
|
// (undocumented)
|
|
align?: 'center' | 'end' | 'start';
|
|
// (undocumented)
|
|
alignOffset?: number;
|
|
// (undocumented)
|
|
autoFocusFirstButton?: boolean;
|
|
// (undocumented)
|
|
children: React_3.ReactNode;
|
|
collisionPadding?: number;
|
|
// (undocumented)
|
|
disableEscapeKeyDown?: boolean;
|
|
// (undocumented)
|
|
side: 'bottom' | 'left' | 'right' | 'top';
|
|
// (undocumented)
|
|
sideOffset?: number;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiPopoverProps {
|
|
// (undocumented)
|
|
children: React_3.ReactNode;
|
|
// (undocumented)
|
|
className?: string;
|
|
// (undocumented)
|
|
id: string;
|
|
// (undocumented)
|
|
onOpenChange?(isOpen: boolean): void;
|
|
// (undocumented)
|
|
open?: boolean;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiPopoverTriggerProps {
|
|
// (undocumented)
|
|
children?: React_3.ReactNode;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiQuickActionsProps {
|
|
// (undocumented)
|
|
children?: ReactNode;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiRichTextToolbarProps {
|
|
// (undocumented)
|
|
children?: React_3.ReactNode;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiSelectContentProps {
|
|
// (undocumented)
|
|
align?: 'center' | 'end' | 'start';
|
|
// (undocumented)
|
|
children: React_2.ReactNode;
|
|
// (undocumented)
|
|
className?: string;
|
|
// (undocumented)
|
|
side?: 'bottom' | 'top';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiSelectItemProps {
|
|
// (undocumented)
|
|
className?: string;
|
|
// (undocumented)
|
|
disabled?: boolean;
|
|
// (undocumented)
|
|
icon?: Exclude<string, TLUiIconType> | TLUiIconType;
|
|
// (undocumented)
|
|
label: string;
|
|
// (undocumented)
|
|
value: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiSelectProps {
|
|
// (undocumented)
|
|
'aria-label'?: string;
|
|
// (undocumented)
|
|
'data-testid'?: string;
|
|
// (undocumented)
|
|
children: React_2.ReactNode;
|
|
// (undocumented)
|
|
className?: string;
|
|
// (undocumented)
|
|
disabled?: boolean;
|
|
// (undocumented)
|
|
id: string;
|
|
// (undocumented)
|
|
onOpenChange?(isOpen: boolean): void;
|
|
// (undocumented)
|
|
onValueChange(value: string): void;
|
|
// (undocumented)
|
|
value: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiSelectTriggerProps {
|
|
// (undocumented)
|
|
children: React_2.ReactNode;
|
|
// (undocumented)
|
|
className?: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiSelectValueProps {
|
|
// (undocumented)
|
|
children?: React_2.ReactNode;
|
|
// (undocumented)
|
|
icon?: Exclude<string, TLUiIconType> | TLUiIconType;
|
|
// (undocumented)
|
|
placeholder?: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiSliderProps {
|
|
// (undocumented)
|
|
'data-testid'?: string;
|
|
// (undocumented)
|
|
ariaValueModifier?: number;
|
|
// (undocumented)
|
|
label: string;
|
|
// (undocumented)
|
|
min?: number;
|
|
// (undocumented)
|
|
onHistoryMark?(id: string): void;
|
|
// (undocumented)
|
|
onValueChange(value: number): void;
|
|
// (undocumented)
|
|
steps: number;
|
|
// (undocumented)
|
|
title: string;
|
|
// (undocumented)
|
|
value: null | number;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiStylePanelProps {
|
|
// (undocumented)
|
|
children?: ReactNode;
|
|
// (undocumented)
|
|
isMobile?: boolean;
|
|
// (undocumented)
|
|
styles?: null | ReadonlySharedStyleMap;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiToast {
|
|
// (undocumented)
|
|
actions?: TLUiToastAction[];
|
|
// (undocumented)
|
|
closeLabel?: string;
|
|
// (undocumented)
|
|
description?: string;
|
|
// (undocumented)
|
|
icon?: TLUiIconType;
|
|
// (undocumented)
|
|
iconLabel?: string;
|
|
// (undocumented)
|
|
id: string;
|
|
// (undocumented)
|
|
keepOpen?: boolean;
|
|
// (undocumented)
|
|
severity?: AlertSeverity;
|
|
// (undocumented)
|
|
title?: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiToastAction {
|
|
// (undocumented)
|
|
label: string;
|
|
// (undocumented)
|
|
onClick(): void;
|
|
// (undocumented)
|
|
type: 'danger' | 'normal' | 'primary';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiToastsContextType {
|
|
// (undocumented)
|
|
addToast(toast: Omit<TLUiToast, 'id'> & {
|
|
id?: string;
|
|
}): string;
|
|
// (undocumented)
|
|
clearToasts(): void;
|
|
// (undocumented)
|
|
removeToast(id: TLUiToast['id']): string;
|
|
// (undocumented)
|
|
toasts: Atom<TLUiToast[]>;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiToastsProviderProps {
|
|
// (undocumented)
|
|
children: ReactNode;
|
|
// (undocumented)
|
|
overrides?(editor: Editor): TLUiToastsContextType;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiToolbarButtonProps extends React_3.HTMLAttributes<HTMLButtonElement> {
|
|
// (undocumented)
|
|
asChild?: boolean;
|
|
// (undocumented)
|
|
children?: React_3.ReactNode;
|
|
// (undocumented)
|
|
className?: string;
|
|
// (undocumented)
|
|
disabled?: boolean;
|
|
// (undocumented)
|
|
isActive?: boolean;
|
|
// (undocumented)
|
|
tooltip?: string;
|
|
// (undocumented)
|
|
type: 'icon' | 'menu' | 'tool';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiToolbarProps extends React_3.HTMLAttributes<HTMLDivElement> {
|
|
// (undocumented)
|
|
children?: React_3.ReactNode;
|
|
// (undocumented)
|
|
className?: string;
|
|
// (undocumented)
|
|
dir?: 'ltr' | 'rtl';
|
|
// (undocumented)
|
|
label: string;
|
|
// (undocumented)
|
|
orientation?: 'grid' | 'horizontal' | 'vertical';
|
|
// (undocumented)
|
|
tooltipSide?: 'bottom' | 'left' | 'right' | 'top';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiToolbarToggleGroupProps extends React_3.HTMLAttributes<HTMLDivElement> {
|
|
// (undocumented)
|
|
asChild?: boolean;
|
|
// (undocumented)
|
|
children?: React_3.ReactNode;
|
|
// (undocumented)
|
|
className?: string;
|
|
// (undocumented)
|
|
defaultValue?: any;
|
|
// (undocumented)
|
|
dir?: 'ltr' | 'rtl';
|
|
// (undocumented)
|
|
type: 'multiple' | 'single';
|
|
// (undocumented)
|
|
value: any;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiToolbarToggleItemProps extends React_3.HTMLAttributes<HTMLButtonElement> {
|
|
// (undocumented)
|
|
children?: React_3.ReactNode;
|
|
// (undocumented)
|
|
className?: string;
|
|
// (undocumented)
|
|
tooltip?: React_3.ReactNode;
|
|
// (undocumented)
|
|
type: 'icon' | 'tool';
|
|
// (undocumented)
|
|
value: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiToolItem<TranslationKey extends string = string, IconType extends string = string> {
|
|
// (undocumented)
|
|
icon: IconType | TLUiIconJsx;
|
|
// (undocumented)
|
|
id: string;
|
|
kbd?: string;
|
|
// (undocumented)
|
|
label: TranslationKey;
|
|
// (undocumented)
|
|
meta?: {
|
|
[key: string]: any;
|
|
};
|
|
// (undocumented)
|
|
onDragStart?(source: TLUiEventSource, info: TLPointerEventInfo): void;
|
|
// (undocumented)
|
|
onSelect(source: TLUiEventSource): void;
|
|
// (undocumented)
|
|
readonlyOk?: boolean;
|
|
// (undocumented)
|
|
shortcutsLabel?: TranslationKey;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TLUiToolsContextType = Record<string, TLUiToolItem>;
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiToolsProviderProps {
|
|
// (undocumented)
|
|
children: React_2.ReactNode;
|
|
// (undocumented)
|
|
overrides?(editor: Editor, tools: TLUiToolsContextType, helpers: Partial<TLUiOverrideHelpers>): TLUiToolsContextType;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiTranslation {
|
|
// (undocumented)
|
|
readonly dir: 'ltr' | 'rtl';
|
|
// (undocumented)
|
|
readonly label: string;
|
|
// (undocumented)
|
|
readonly locale: string;
|
|
// (undocumented)
|
|
readonly messages: Record<TLUiTranslationKey, string>;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export type TLUiTranslationContextType = TLUiTranslation;
|
|
|
|
// @public (undocumented)
|
|
export type TLUiTranslationKey = 'a11y.adjust-shape-styles' | 'a11y.enlarge-shape' | 'a11y.enter-leave-container' | 'a11y.move-shape-faster' | 'a11y.move-shape' | 'a11y.multiple-shapes' | 'a11y.open-context-menu' | 'a11y.open-keyboard-shortcuts' | 'a11y.pan-camera' | 'a11y.repeat-shape' | 'a11y.rotate-shape-ccw-fine' | 'a11y.rotate-shape-ccw' | 'a11y.rotate-shape-cw-fine' | 'a11y.rotate-shape-cw' | 'a11y.select-shape-direction' | 'a11y.select-shape' | 'a11y.shape-image' | 'a11y.shape-index' | 'a11y.shape-video' | 'a11y.shrink-shape' | 'a11y.skip-to-main-content' | 'a11y.status' | '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-hovered-styles' | 'action.copy' | 'action.cut' | 'action.delete' | 'action.distribute-horizontal.short' | 'action.distribute-horizontal' | 'action.distribute-vertical.short' | 'action.distribute-vertical' | 'action.download-original' | 'action.duplicate' | 'action.edit-link' | 'action.enhanced-a11y-mode.menu' | 'action.enhanced-a11y-mode' | 'action.exit-pen-mode' | 'action.export-all-as-png.short' | 'action.export-all-as-png' | 'action.export-all-as-svg.short' | 'action.export-all-as-svg' | 'action.export-as-png.short' | 'action.export-as-png' | 'action.export-as-svg.short' | 'action.export-as-svg' | 'action.fit-frame-to-content' | 'action.flatten-to-image' | 'action.flip-horizontal.short' | 'action.flip-horizontal' | 'action.flip-vertical.short' | 'action.flip-vertical' | 'action.fork-project-on-tldraw' | 'action.fork-project' | 'action.frame-selection' | '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.open-kbd-shortcuts' | 'action.pack' | 'action.paste-error-description' | 'action.paste-error-title' | 'action.paste' | 'action.print' | 'action.redo' | 'action.remove-frame' | 'action.rename' | 'action.rotate-ccw' | 'action.rotate-cw' | 'action.save-copy' | 'action.select-all' | 'action.select-none' | 'action.select-zoom-tool' | '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-none' | 'action.toggle-auto-pan' | 'action.toggle-auto-size' | 'action.toggle-auto-zoom' | 'action.toggle-dark-mode.menu' | 'action.toggle-dark-mode' | 'action.toggle-debug-mode.menu' | 'action.toggle-debug-mode' | 'action.toggle-dynamic-size-mode.menu' | 'action.toggle-dynamic-size-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-invert-zoom.menu' | 'action.toggle-invert-zoom' | 'action.toggle-keyboard-shortcuts.menu' | 'action.toggle-keyboard-shortcuts' | 'action.toggle-lock' | 'action.toggle-mouse' | 'action.toggle-paste-at-cursor.menu' | 'action.toggle-paste-at-cursor' | '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-trackpad' | 'action.toggle-transparent.context-menu' | 'action.toggle-transparent.menu' | 'action.toggle-transparent' | 'action.toggle-wrap-mode.menu' | 'action.toggle-wrap-mode' | 'action.undo' | 'action.ungroup' | 'action.unlock-all' | 'action.zoom-in' | 'action.zoom-out' | 'action.zoom-quick' | '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' | 'app.loading' | 'arrow-kind-style.arc' | 'arrow-kind-style.elbow' | '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' | 'assets.files.amount-too-many' | 'assets.files.maximum-size' | 'assets.files.size-too-big' | 'assets.files.type-not-allowed' | 'assets.files.upload-failed' | 'assets.url.failed' | '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.white' | 'color-style.yellow' | 'comments.add-placeholder' | 'comments.add-reaction' | 'comments.cluster-label' | 'comments.copy-link' | 'comments.delete-comment' | 'comments.delete' | 'comments.dismiss' | 'comments.edit-comment' | 'comments.edit-placeholder' | 'comments.edit' | 'comments.empty-filtered' | 'comments.empty' | 'comments.filter' | 'comments.hide' | 'comments.link-copied' | 'comments.mention-no-matches' | 'comments.mention-you' | 'comments.more-options' | 'comments.only-my-comments' | 'comments.only-unread' | 'comments.pin-label-resolved' | 'comments.pin-label' | 'comments.preview-more' | 'comments.reacted-1' | 'comments.reacted-2' | 'comments.reacted-3' | 'comments.reacted-more-one' | 'comments.reacted-more' | 'comments.reopen' | 'comments.replies-one' | 'comments.replies' | 'comments.reply-placeholder' | 'comments.resolve' | 'comments.resolved-by' | 'comments.resolved' | 'comments.save' | 'comments.send' | 'comments.show-all-pages' | 'comments.show-resolved' | 'comments.show' | 'comments.stack-label' | 'comments.thread-title' | 'comments.title' | 'context-menu.arrange' | 'context-menu.copy-as' | 'context-menu.edit' | 'context-menu.export-all-as' | 'context-menu.export-as' | 'context-menu.move-to-page' | 'context-menu.reorder' | 'context-menu.title' | 'context.pages.new-page' | 'cursor-chat.type-to-chat' | 'dash-style.dashed' | 'dash-style.dotted' | 'dash-style.draw' | 'dash-style.solid' | 'document-name-menu.copy-link' | 'document.default-name' | 'edit-link-dialog.cancel' | 'edit-link-dialog.clear' | 'edit-link-dialog.detail' | 'edit-link-dialog.external-link' | 'edit-link-dialog.invalid-url' | 'edit-link-dialog.save' | 'edit-link-dialog.title' | 'edit-link-dialog.url' | '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.fill' | 'fill-style.lined-fill' | '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.heart' | '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' | 'handle.crop.bottom-left' | 'handle.crop.bottom-right' | 'handle.crop.bottom' | 'handle.crop.left' | 'handle.crop.right' | 'handle.crop.top-left' | 'handle.crop.top-right' | 'handle.crop.top' | 'handle.resize-bottom-left' | 'handle.resize-bottom-right' | 'handle.resize-bottom' | 'handle.resize-left' | 'handle.resize-right' | 'handle.resize-top-left' | 'handle.resize-top-right' | 'handle.resize-top' | 'handle.rotate.bottom_left_rotate' | 'handle.rotate.bottom_right_rotate' | 'handle.rotate.mobile_rotate' | 'handle.rotate.top_left_rotate' | 'handle.rotate.top_right_rotate' | 'help-menu.about' | 'help-menu.discord' | 'help-menu.github' | 'help-menu.import-tldr-file' | 'help-menu.keyboard-shortcuts' | 'help-menu.privacy' | 'help-menu.terms' | 'help-menu.title' | 'help-menu.twitter' | 'menu.accessibility' | 'menu.color-theme' | 'menu.copy-as' | 'menu.edit' | 'menu.export-as' | 'menu.file' | 'menu.input-device' | 'menu.language' | 'menu.preferences' | 'menu.theme' | 'menu.title' | 'menu.view' | 'navigation-zone.minimap' | 'navigation-zone.title' | '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-pages-reached' | 'page-menu.new-page-initial-name' | 'page-menu.resize' | '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.anonymous-user' | 'people-menu.avatar-color' | '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' | 'share-menu.copied' | '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.creating-project' | 'share-menu.fork-note' | 'share-menu.offline-note' | 'share-menu.project-too-large' | '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.a11y' | 'shortcuts-dialog.collaboration' | 'shortcuts-dialog.disabled-notice' | 'shortcuts-dialog.edit' | 'shortcuts-dialog.file' | 'shortcuts-dialog.preferences' | 'shortcuts-dialog.text-formatting' | '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' | 'style-panel.align' | 'style-panel.arrow-kind' | '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.label-align' | 'style-panel.mixed' | 'style-panel.opacity' | 'style-panel.position' | 'style-panel.selected' | 'style-panel.size' | 'style-panel.spline' | 'style-panel.title' | 'style-panel.vertical-align' | 'theme.dark' | 'theme.light' | 'theme.system' | 'toast.close' | 'toast.error.copy-fail.desc' | 'toast.error.copy-fail.title' | 'toast.error.export-fail.desc' | 'toast.error.export-fail.title' | 'toast.error' | 'toast.info' | 'toast.success' | 'toast.warning' | 'tool-panel.more' | 'tool-panel.title' | 'tool.arrow-down' | 'tool.arrow-left' | 'tool.arrow-right' | 'tool.arrow-up' | 'tool.arrow' | 'tool.aspect-ratio.circle' | 'tool.aspect-ratio.landscape' | 'tool.aspect-ratio.original' | 'tool.aspect-ratio.portrait' | 'tool.aspect-ratio.square' | 'tool.aspect-ratio.wide' | 'tool.aspect-ratio' | 'tool.bookmark' | 'tool.check-box' | 'tool.cloud' | 'tool.diamond' | 'tool.draw' | 'tool.ellipse' | 'tool.embed' | 'tool.eraser' | 'tool.flip-horz' | 'tool.flip-vert' | 'tool.frame' | 'tool.hand' | 'tool.heart' | 'tool.hexagon' | 'tool.highlight' | 'tool.image-crop-confirm' | 'tool.image-crop' | 'tool.image-toolbar-title' | 'tool.image-zoom' | 'tool.laser' | 'tool.line' | 'tool.media-alt-text-confirm' | 'tool.media-alt-text-desc' | 'tool.media-alt-text' | 'tool.media' | 'tool.note' | 'tool.octagon' | 'tool.oval' | 'tool.pentagon' | 'tool.pointer-down' | 'tool.rectangle' | 'tool.replace-media' | 'tool.rhombus' | 'tool.rich-text-bold' | 'tool.rich-text-bulletList' | 'tool.rich-text-code' | 'tool.rich-text-header' | 'tool.rich-text-highlight' | 'tool.rich-text-italic' | 'tool.rich-text-link-remove' | 'tool.rich-text-link-visit' | 'tool.rich-text-link' | 'tool.rich-text-orderedList' | 'tool.rich-text-strikethrough' | 'tool.rich-text-toolbar-title' | 'tool.rotate-cw' | 'tool.select' | 'tool.star' | 'tool.text' | 'tool.trapezoid' | 'tool.triangle' | 'tool.x-box' | 'ui.checked' | 'ui.close' | 'ui.unchecked' | 'verticalAlign-style.end' | 'verticalAlign-style.middle' | 'verticalAlign-style.start' | '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 interface TLUiTranslationProviderProps {
|
|
// (undocumented)
|
|
children: React_2.ReactNode;
|
|
// (undocumented)
|
|
locale: string;
|
|
overrides?: Record<string, Record<string, string>>;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiVideoToolbarProps {
|
|
// (undocumented)
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLUiZoomMenuProps {
|
|
// (undocumented)
|
|
children?: ReactNode;
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export const TLV1AlignStyle: {
|
|
readonly End: 'end';
|
|
readonly Justify: 'justify';
|
|
readonly Middle: 'middle';
|
|
readonly Start: 'start';
|
|
};
|
|
|
|
// @internal (undocumented)
|
|
export type TLV1AlignStyle = (typeof TLV1AlignStyle)[keyof typeof TLV1AlignStyle];
|
|
|
|
// @internal (undocumented)
|
|
export interface TLV1ArrowBinding extends TLV1BaseBinding {
|
|
// (undocumented)
|
|
distance: number;
|
|
// (undocumented)
|
|
handleId: keyof TLV1ArrowShape['handles'];
|
|
// (undocumented)
|
|
point: number[];
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export interface TLV1ArrowShape extends TLV1BaseShape {
|
|
// (undocumented)
|
|
bend: number;
|
|
// (undocumented)
|
|
decorations?: {
|
|
end?: TLV1Decoration;
|
|
middle?: TLV1Decoration;
|
|
start?: TLV1Decoration;
|
|
};
|
|
// (undocumented)
|
|
handles: {
|
|
bend: TLV1Handle;
|
|
end: TLV1Handle;
|
|
start: TLV1Handle;
|
|
};
|
|
// (undocumented)
|
|
label?: string;
|
|
// (undocumented)
|
|
labelPoint?: number[];
|
|
// (undocumented)
|
|
type: typeof TLV1ShapeType.Arrow;
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export type TLV1Asset = TLV1ImageAsset | TLV1VideoAsset;
|
|
|
|
// @internal (undocumented)
|
|
export const TLV1AssetType: {
|
|
readonly Image: 'image';
|
|
readonly Video: 'video';
|
|
};
|
|
|
|
// @internal (undocumented)
|
|
export type TLV1AssetType = (typeof TLV1AssetType)[keyof typeof TLV1AssetType];
|
|
|
|
// @internal (undocumented)
|
|
export interface TLV1BaseAsset {
|
|
// (undocumented)
|
|
id: string;
|
|
// (undocumented)
|
|
type: string;
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export interface TLV1BaseBinding {
|
|
// (undocumented)
|
|
fromId: string;
|
|
// (undocumented)
|
|
id: string;
|
|
// (undocumented)
|
|
toId: string;
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export interface TLV1BaseShape {
|
|
// (undocumented)
|
|
assetId?: string;
|
|
// (undocumented)
|
|
childIndex: number;
|
|
// (undocumented)
|
|
children?: string[];
|
|
// (undocumented)
|
|
handles?: Record<string, TLV1Handle>;
|
|
// (undocumented)
|
|
id: string;
|
|
// (undocumented)
|
|
isAspectRatioLocked?: boolean;
|
|
// (undocumented)
|
|
isGenerated?: boolean;
|
|
// (undocumented)
|
|
isGhost?: boolean;
|
|
// (undocumented)
|
|
isHidden?: boolean;
|
|
// (undocumented)
|
|
isLocked?: boolean;
|
|
// (undocumented)
|
|
label?: string;
|
|
// (undocumented)
|
|
name: string;
|
|
// (undocumented)
|
|
parentId: string;
|
|
// (undocumented)
|
|
point: number[];
|
|
// (undocumented)
|
|
rotation?: number;
|
|
// (undocumented)
|
|
style: TLV1ShapeStyles;
|
|
// (undocumented)
|
|
type: TLV1ShapeType;
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export type TLV1Binding = TLV1ArrowBinding;
|
|
|
|
// @internal (undocumented)
|
|
export interface TLV1Bounds {
|
|
// (undocumented)
|
|
height: number;
|
|
// (undocumented)
|
|
maxX: number;
|
|
// (undocumented)
|
|
maxY: number;
|
|
// (undocumented)
|
|
minX: number;
|
|
// (undocumented)
|
|
minY: number;
|
|
// (undocumented)
|
|
rotation?: number;
|
|
// (undocumented)
|
|
width: number;
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export const TLV1ColorStyle: {
|
|
readonly Black: 'black';
|
|
readonly Blue: 'blue';
|
|
readonly Cyan: 'cyan';
|
|
readonly Gray: 'gray';
|
|
readonly Green: 'green';
|
|
readonly Indigo: 'indigo';
|
|
readonly LightGray: 'lightGray';
|
|
readonly Orange: 'orange';
|
|
readonly Red: 'red';
|
|
readonly Violet: 'violet';
|
|
readonly White: 'white';
|
|
readonly Yellow: 'yellow';
|
|
};
|
|
|
|
// @internal (undocumented)
|
|
export type TLV1ColorStyle = (typeof TLV1ColorStyle)[keyof typeof TLV1ColorStyle];
|
|
|
|
// @internal (undocumented)
|
|
export const TLV1DashStyle: {
|
|
readonly Dashed: 'dashed';
|
|
readonly Dotted: 'dotted';
|
|
readonly Draw: 'draw';
|
|
readonly Solid: 'solid';
|
|
};
|
|
|
|
// @internal (undocumented)
|
|
export type TLV1DashStyle = (typeof TLV1DashStyle)[keyof typeof TLV1DashStyle];
|
|
|
|
// @internal (undocumented)
|
|
export const TLV1Decoration: {
|
|
readonly Arrow: 'arrow';
|
|
};
|
|
|
|
// @internal (undocumented)
|
|
export type TLV1Decoration = (typeof TLV1Decoration)[keyof typeof TLV1Decoration];
|
|
|
|
// @internal (undocumented)
|
|
export interface TLV1Document {
|
|
// (undocumented)
|
|
assets: Record<string, TLV1Asset>;
|
|
// (undocumented)
|
|
id: string;
|
|
// (undocumented)
|
|
name: string;
|
|
// (undocumented)
|
|
pages: Record<string, TLV1Page>;
|
|
// (undocumented)
|
|
pageStates: Record<string, TLV1PageState>;
|
|
// (undocumented)
|
|
version: number;
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export interface TLV1DrawShape extends TLV1BaseShape {
|
|
// (undocumented)
|
|
isComplete: boolean;
|
|
// (undocumented)
|
|
points: number[][];
|
|
// (undocumented)
|
|
type: typeof TLV1ShapeType.Draw;
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export interface TLV1EllipseShape extends TLV1BaseShape {
|
|
// (undocumented)
|
|
label?: string;
|
|
// (undocumented)
|
|
labelPoint?: number[];
|
|
// (undocumented)
|
|
radius: number[];
|
|
// (undocumented)
|
|
type: typeof TLV1ShapeType.Ellipse;
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export const TLV1FontStyle: {
|
|
readonly Mono: 'mono';
|
|
readonly Sans: 'sans';
|
|
readonly Script: 'script';
|
|
readonly Serif: 'serif';
|
|
};
|
|
|
|
// @internal (undocumented)
|
|
export type TLV1FontStyle = (typeof TLV1FontStyle)[keyof typeof TLV1FontStyle];
|
|
|
|
// @internal (undocumented)
|
|
export interface TLV1GroupShape extends TLV1BaseShape {
|
|
// (undocumented)
|
|
children: string[];
|
|
// (undocumented)
|
|
size: number[];
|
|
// (undocumented)
|
|
type: typeof TLV1ShapeType.Group;
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export interface TLV1Handle {
|
|
// (undocumented)
|
|
bindingId?: string;
|
|
// (undocumented)
|
|
canBind?: boolean;
|
|
// (undocumented)
|
|
id: string;
|
|
// (undocumented)
|
|
index: number;
|
|
// (undocumented)
|
|
point: number[];
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export interface TLV1ImageAsset extends TLV1BaseAsset {
|
|
// (undocumented)
|
|
fileName: string;
|
|
// (undocumented)
|
|
size: number[];
|
|
// (undocumented)
|
|
src: string;
|
|
// (undocumented)
|
|
type: typeof TLV1AssetType.Image;
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export interface TLV1ImageShape extends TLV1BaseShape {
|
|
// (undocumented)
|
|
assetId: string;
|
|
// (undocumented)
|
|
size: number[];
|
|
// (undocumented)
|
|
type: typeof TLV1ShapeType.Image;
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export interface TLV1Page {
|
|
// (undocumented)
|
|
bindings: Record<string, TLV1Binding>;
|
|
// (undocumented)
|
|
childIndex?: number;
|
|
// (undocumented)
|
|
id: string;
|
|
// (undocumented)
|
|
name?: string;
|
|
// (undocumented)
|
|
shapes: Record<string, TLV1Shape>;
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export interface TLV1PageState {
|
|
// (undocumented)
|
|
bindingId?: null | string;
|
|
// (undocumented)
|
|
brush?: null | TLV1Bounds;
|
|
// (undocumented)
|
|
camera: {
|
|
point: number[];
|
|
zoom: number;
|
|
};
|
|
// (undocumented)
|
|
editingId?: null | string;
|
|
// (undocumented)
|
|
hoveredId?: null | string;
|
|
// (undocumented)
|
|
id: string;
|
|
// (undocumented)
|
|
pointedId?: null | string;
|
|
// (undocumented)
|
|
selectedIds: string[];
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export interface TLV1RectangleShape extends TLV1BaseShape {
|
|
// (undocumented)
|
|
label?: string;
|
|
// (undocumented)
|
|
labelPoint?: number[];
|
|
// (undocumented)
|
|
size: number[];
|
|
// (undocumented)
|
|
type: typeof TLV1ShapeType.Rectangle;
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export type TLV1Shape = TLV1ArrowShape | TLV1DrawShape | TLV1EllipseShape | TLV1GroupShape | TLV1ImageShape | TLV1RectangleShape | TLV1StickyShape | TLV1TextShape | TLV1TriangleShape | TLV1VideoShape;
|
|
|
|
// @internal (undocumented)
|
|
export interface TLV1ShapeStyles {
|
|
// (undocumented)
|
|
color: TLV1ColorStyle;
|
|
// (undocumented)
|
|
dash: TLV1DashStyle;
|
|
// (undocumented)
|
|
font?: TLV1FontStyle;
|
|
// (undocumented)
|
|
isFilled?: boolean;
|
|
// (undocumented)
|
|
scale?: number;
|
|
// (undocumented)
|
|
size: TLV1SizeStyle;
|
|
// (undocumented)
|
|
textAlign?: TLV1AlignStyle;
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export const TLV1ShapeType: {
|
|
readonly Arrow: 'arrow';
|
|
readonly Draw: 'draw';
|
|
readonly Ellipse: 'ellipse';
|
|
readonly Group: 'group';
|
|
readonly Image: 'image';
|
|
readonly Rectangle: 'rectangle';
|
|
readonly Sticky: 'sticky';
|
|
readonly Text: 'text';
|
|
readonly Triangle: 'triangle';
|
|
readonly Video: 'video';
|
|
};
|
|
|
|
// @internal (undocumented)
|
|
export type TLV1ShapeType = (typeof TLV1ShapeType)[keyof typeof TLV1ShapeType];
|
|
|
|
// @internal (undocumented)
|
|
export const TLV1SizeStyle: {
|
|
readonly Large: 'large';
|
|
readonly Medium: 'medium';
|
|
readonly Small: 'small';
|
|
};
|
|
|
|
// @internal (undocumented)
|
|
export type TLV1SizeStyle = (typeof TLV1SizeStyle)[keyof typeof TLV1SizeStyle];
|
|
|
|
// @internal (undocumented)
|
|
export interface TLV1StickyShape extends TLV1BaseShape {
|
|
// (undocumented)
|
|
size: number[];
|
|
// (undocumented)
|
|
text: string;
|
|
// (undocumented)
|
|
type: typeof TLV1ShapeType.Sticky;
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export interface TLV1TextShape extends TLV1BaseShape {
|
|
// (undocumented)
|
|
text: string;
|
|
// (undocumented)
|
|
type: typeof TLV1ShapeType.Text;
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export interface TLV1TriangleShape extends TLV1BaseShape {
|
|
// (undocumented)
|
|
label?: string;
|
|
// (undocumented)
|
|
labelPoint?: number[];
|
|
// (undocumented)
|
|
size: number[];
|
|
// (undocumented)
|
|
type: typeof TLV1ShapeType.Triangle;
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export interface TLV1VideoAsset extends TLV1BaseAsset {
|
|
// (undocumented)
|
|
fileName: string;
|
|
// (undocumented)
|
|
size: number[];
|
|
// (undocumented)
|
|
src: string;
|
|
// (undocumented)
|
|
type: typeof TLV1AssetType.Video;
|
|
}
|
|
|
|
// @internal (undocumented)
|
|
export interface TLV1VideoShape extends TLV1BaseShape {
|
|
// (undocumented)
|
|
assetId: string;
|
|
// (undocumented)
|
|
currentTime: number;
|
|
// (undocumented)
|
|
isPlaying: boolean;
|
|
// (undocumented)
|
|
size: number[];
|
|
// (undocumented)
|
|
type: typeof TLV1ShapeType.Video;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface TLZoomBrushOverlay extends TLOverlay {
|
|
// (undocumented)
|
|
props: {
|
|
h: number;
|
|
w: number;
|
|
x: number;
|
|
y: number;
|
|
};
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function ToggleAutoSizeMenuItem(): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export function ToggleDebugModeItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function ToggleDynamicSizeModeItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function ToggleEdgeScrollingItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function ToggleEnhancedA11yModeItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function ToggleFocusModeItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function ToggleGridItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function ToggleInvertZoomItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function ToggleKeyboardShortcutsItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function ToggleLockMenuItem(): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export function TogglePasteAtCursorItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function ToggleReduceMotionItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function ToggleSnapModeItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function ToggleToolLockedButton({ activeToolId }: ToggleToolLockedButtonProps): JSX.Element | null;
|
|
|
|
// @public (undocumented)
|
|
export interface ToggleToolLockedButtonProps {
|
|
// (undocumented)
|
|
activeToolId?: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function ToggleToolLockItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function ToggleTransparentBgMenuItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function ToggleWrapModeItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function ToolbarItem({ tool }: ToolbarItemProps): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export interface ToolbarItemProps {
|
|
// (undocumented)
|
|
tool: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function TrapezoidToolbarItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function TriangleToolbarItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function truncateStringWithEllipsis(str: string, maxLength: number): string;
|
|
|
|
// @public (undocumented)
|
|
export function UndoRedoGroup(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function UngroupMenuItem(): JSX.Element | null;
|
|
|
|
// @public
|
|
export const unknownEmbedShapePermissionOverrides: TLEmbedShapePermissions;
|
|
|
|
// @public (undocumented)
|
|
export function UnlockAllMenuItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function unwrapLabel(label?: TLUiActionItem['label'], menuType?: string): string | undefined;
|
|
|
|
// @public
|
|
export function updateArrowTargetState({ editor, pointInPageSpace, arrow, isPrecise, currentBinding, oppositeBinding, }: UpdateArrowTargetStateOpts): ArrowTargetState | null;
|
|
|
|
// @public
|
|
export interface UpdateArrowTargetStateOpts {
|
|
// (undocumented)
|
|
arrow: TLArrowShape | undefined;
|
|
// (undocumented)
|
|
currentBinding: TLArrowBinding | undefined;
|
|
// (undocumented)
|
|
editor: Editor;
|
|
// (undocumented)
|
|
isPrecise: boolean;
|
|
oppositeBinding: TLArrowBinding | undefined;
|
|
// (undocumented)
|
|
pointInPageSpace: VecLike;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function useA11y(): TLUiA11yContextType;
|
|
|
|
// @public (undocumented)
|
|
export function useActions(): TLUiActionsContextType;
|
|
|
|
// @public (undocumented)
|
|
export function useAssetUrls(): TLUiAssetUrls;
|
|
|
|
// @public (undocumented)
|
|
export function useBreakpoint(): number;
|
|
|
|
// @public
|
|
export function useCanApplySelectionAction(): boolean;
|
|
|
|
// @public (undocumented)
|
|
export function useCanRedo(): boolean;
|
|
|
|
// @public (undocumented)
|
|
export function useCanUndo(): boolean;
|
|
|
|
// @public (undocumented)
|
|
export function useCollaborationStatus(): "offline" | "online" | null;
|
|
|
|
// @public (undocumented)
|
|
export function useCopyAs(): (ids: TLShapeId[], format?: TLCopyType) => void;
|
|
|
|
// @public (undocumented)
|
|
export function useCurrentTranslation(): TLUiTranslation;
|
|
|
|
// @public (undocumented)
|
|
export function useDefaultHelpers(): {
|
|
addDialog: (dialog: Omit<TLUiDialog, 'id'> & {
|
|
id?: string;
|
|
}) => string;
|
|
addToast: (toast: Omit<TLUiToast, 'id'> & {
|
|
id?: string;
|
|
}) => string;
|
|
clearDialogs: () => void;
|
|
clearToasts: () => void;
|
|
copy: (source: TLUiEventSource) => Promise<void>;
|
|
copyAs: (ids: TLShapeId_2[], format?: TLCopyType) => void;
|
|
cut: (source: TLUiEventSource) => Promise<void>;
|
|
exportAs: (ids: TLShapeId_2[], opts?: {
|
|
format?: TLExportType;
|
|
name?: string;
|
|
scale?: number;
|
|
}) => void;
|
|
getEmbedDefinition: (url: string) => TLEmbedResult;
|
|
insertMedia: () => Promise<void>;
|
|
isMobile: boolean;
|
|
msg: (id?: Exclude<string, TLUiTranslationKey> | string) => string;
|
|
paste: (data: ClipboardItem[] | DataTransfer, source: TLUiEventSource, point?: VecLike) => Promise<void>;
|
|
printSelectionOrPages: () => Promise<void>;
|
|
removeDialog: (id: string) => string;
|
|
removeToast: (id: TLUiToast['id']) => string;
|
|
replaceImage: () => Promise<void>;
|
|
replaceVideo: () => Promise<void>;
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export function useDialogs(): TLUiDialogsContextType;
|
|
|
|
// @public
|
|
export function useDirection(): "ltr" | "rtl";
|
|
|
|
// @public (undocumented)
|
|
export function useEditablePlainText(shapeId: TLShapeId, type: ExtractShapeByProps<{
|
|
text: string;
|
|
}>['type'], text?: string): {
|
|
handleBlur: () => void;
|
|
handleChange: ({ plaintext }: {
|
|
plaintext: string;
|
|
}) => void;
|
|
handleDoubleClick: (e: {
|
|
nativeEvent: Event;
|
|
} | Event) => void;
|
|
handleFocus: () => void;
|
|
handleInputPointerDown: (e: React_3.PointerEvent) => void;
|
|
handleKeyDown: (e: KeyboardEvent) => void;
|
|
handlePaste: (e: ClipboardEvent | React_3.ClipboardEvent<HTMLTextAreaElement>) => void;
|
|
isEditing: boolean;
|
|
isEmpty: boolean;
|
|
isReadyForEditing: boolean;
|
|
rInput: React_3.RefObject<HTMLTextAreaElement | null>;
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export function useEditableRichText(shapeId: TLShapeId, type: ExtractShapeByProps<{
|
|
richText: TLRichText_2;
|
|
}>['type'], richText?: TLRichText_2): {
|
|
handleBlur: () => void;
|
|
handleChange: ({ richText }: {
|
|
richText: TLRichText_2;
|
|
}) => void;
|
|
handleDoubleClick: (e: {
|
|
nativeEvent: Event;
|
|
} | Event) => void;
|
|
handleFocus: () => void;
|
|
handleInputPointerDown: (e: React.PointerEvent) => void;
|
|
handleKeyDown: (e: KeyboardEvent) => void;
|
|
handlePaste: (e: ClipboardEvent | React.ClipboardEvent<HTMLTextAreaElement>) => void;
|
|
isEditing: boolean;
|
|
isEmpty: boolean | undefined;
|
|
isReadyForEditing: boolean;
|
|
rInput: RefObject<HTMLDivElement | null>;
|
|
};
|
|
|
|
// @public (undocumented)
|
|
export function useExportAs(): (ids: TLShapeId[], opts?: {
|
|
format?: TLExportType;
|
|
name?: string;
|
|
scale?: number;
|
|
}) => void;
|
|
|
|
// @public
|
|
export function useImageOrVideoAsset({ shapeId, assetId, width }: UseImageOrVideoAssetOptions): {
|
|
asset: (TLImageAsset | TLVideoAsset) | null;
|
|
url: null | string;
|
|
};
|
|
|
|
// @public
|
|
export interface UseImageOrVideoAssetOptions {
|
|
assetId: null | TLAssetId;
|
|
shapeId?: TLShapeId;
|
|
width: number;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function useIsToolSelected(tool: TLUiToolItem | undefined): boolean;
|
|
|
|
// @public (undocumented)
|
|
export function useKeyboardShortcuts(): void;
|
|
|
|
// @public (undocumented)
|
|
export function useLocalStorageState<T = any>(key: string, defaultValue: T): readonly [T, (setter: ((value: T) => T) | T) => void];
|
|
|
|
// @public
|
|
export function useMaybeCurrentTranslation(): null | TLUiTranslation;
|
|
|
|
// @public (undocumented)
|
|
export function useMenuClipboardEvents(): {
|
|
copy: (source: TLUiEventSource) => Promise<void>;
|
|
cut: (source: TLUiEventSource) => Promise<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 useNativeClipboardEvents(): void;
|
|
|
|
// @public (undocumented)
|
|
export function usePrefersReducedMotion(): boolean;
|
|
|
|
// @public (undocumented)
|
|
export function useReadonly(): boolean;
|
|
|
|
// @public (undocumented)
|
|
export function useRelevantStyles(stylesToCheck?: readonly StyleProp<any>[]): null | ReadonlySharedStyleMap;
|
|
|
|
// @public (undocumented)
|
|
export function useSelectedShapesAnnouncer(): void;
|
|
|
|
// @public (undocumented)
|
|
export function useShowCollaborationUi(): boolean;
|
|
|
|
// @public (undocumented)
|
|
export function useStylePanelContext(): StylePanelContext;
|
|
|
|
// @public (undocumented)
|
|
export function useTldrawUiComponents(): TLUiComponents;
|
|
|
|
// @public (undocumented)
|
|
export function useTldrawUiOrientation(): TldrawUiOrientationContext;
|
|
|
|
// @public (undocumented)
|
|
export function useToasts(): TLUiToastsContextType;
|
|
|
|
// @public (undocumented)
|
|
export function useTools(): TLUiToolsContextType;
|
|
|
|
// @public
|
|
export function useTranslation(): (id?: Exclude<string, TLUiTranslationKey> | string) => string;
|
|
|
|
// @public (undocumented)
|
|
export function useUiEvents(): TLUiEventContextType;
|
|
|
|
// @public
|
|
export function useUnlockedSelectedShapesCount(min?: number, max?: number): boolean | number;
|
|
|
|
// @public (undocumented)
|
|
export class VideoAssetUtil extends AssetUtil<TLVideoAsset> {
|
|
// (undocumented)
|
|
getAssetFromFile(file: File, assetId: TLAssetId): Promise<null | TLVideoAsset>;
|
|
// (undocumented)
|
|
getDefaultProps(): TLVideoAsset['props'];
|
|
// (undocumented)
|
|
getSupportedMimeTypes(): readonly string[];
|
|
// (undocumented)
|
|
static migrations: MigrationSequence;
|
|
// (undocumented)
|
|
options: {
|
|
supportedMimeTypes: null | readonly string[];
|
|
};
|
|
// (undocumented)
|
|
static props: {
|
|
fileSize: Validator<number | undefined>;
|
|
h: Validator<number>;
|
|
isAnimated: Validator<boolean>;
|
|
mimeType: Validator<null | string>;
|
|
name: Validator<string>;
|
|
src: Validator<null | string>;
|
|
w: Validator<number>;
|
|
};
|
|
// (undocumented)
|
|
static type: 'video';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface VideoShapeOptions extends ShapeOptionsWithDisplayValues<TLVideoShape, VideoShapeUtilDisplayValues> {
|
|
autoplay: boolean;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {
|
|
// (undocumented)
|
|
canEdit(shape: TLVideoShape): boolean;
|
|
// (undocumented)
|
|
component(shape: TLVideoShape): JSX.Element;
|
|
// (undocumented)
|
|
createShapeForAsset(asset: TLAsset, position: VecModel): null | TLShapePartial;
|
|
// (undocumented)
|
|
getAriaDescriptor(shape: TLVideoShape): string;
|
|
// (undocumented)
|
|
getDefaultProps(): TLVideoShape['props'];
|
|
// (undocumented)
|
|
getIndicatorPath(shape: TLVideoShape): Path2D;
|
|
// (undocumented)
|
|
static handledAssetTypes: readonly ['video'];
|
|
// (undocumented)
|
|
isAspectRatioLocked(shape: TLVideoShape): boolean;
|
|
// (undocumented)
|
|
static migrations: TLPropsMigrations;
|
|
// (undocumented)
|
|
options: VideoShapeOptions;
|
|
// (undocumented)
|
|
static props: RecordProps<TLVideoShape>;
|
|
// (undocumented)
|
|
toSvg(shape: TLVideoShape, ctx: SvgExportContext): Promise<JSX.Element | null>;
|
|
// (undocumented)
|
|
static type: 'video';
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export interface VideoShapeUtilDisplayValues {
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function ViewSubmenu(): JSX.Element;
|
|
|
|
// @public
|
|
export const WrapSelectionExtension: Extension<WrapSelectionOptions, any>;
|
|
|
|
// @public
|
|
export interface WrapSelectionOptions {
|
|
pairs: Record<string, readonly [string, string]>;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function XBoxToolbarItem(): JSX.Element;
|
|
|
|
// @public
|
|
export class ZoomBrushOverlayUtil extends OverlayUtil<TLZoomBrushOverlay> {
|
|
// (undocumented)
|
|
getOverlays(): TLZoomBrushOverlay[];
|
|
// (undocumented)
|
|
isActive(): boolean;
|
|
// (undocumented)
|
|
options: {
|
|
lineWidth: number;
|
|
zIndex: number;
|
|
};
|
|
// (undocumented)
|
|
render(ctx: CanvasRenderingContext2D, overlays: TLZoomBrushOverlay[]): void;
|
|
// (undocumented)
|
|
renderMinimap(ctx: CanvasRenderingContext2D, overlays: TLZoomBrushOverlay[], zoom: number): void;
|
|
// (undocumented)
|
|
static type: string;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function ZoomOrRotateMenuItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function ZoomTo100MenuItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export function ZoomToFitMenuItem(): JSX.Element;
|
|
|
|
// @public (undocumented)
|
|
export class ZoomTool extends StateNode {
|
|
// (undocumented)
|
|
static children(): TLStateNodeConstructor[];
|
|
// (undocumented)
|
|
static id: string;
|
|
// (undocumented)
|
|
info: TLPointerEventInfo & {
|
|
onInteractionEnd?: string;
|
|
};
|
|
// (undocumented)
|
|
static initial: string;
|
|
// (undocumented)
|
|
static isLockable: boolean;
|
|
// (undocumented)
|
|
onEnter(info: TLPointerEventInfo & {
|
|
onInteractionEnd: string;
|
|
}): void;
|
|
// (undocumented)
|
|
onExit(): void;
|
|
// (undocumented)
|
|
onInterrupt(): void;
|
|
// (undocumented)
|
|
onKeyDown(): void;
|
|
// (undocumented)
|
|
onKeyUp(info: TLKeyboardEventInfo): void;
|
|
}
|
|
|
|
// @public (undocumented)
|
|
export function ZoomToSelectionMenuItem(): JSX.Element;
|
|
|
|
|
|
export * from "@tldraw/editor";
|
|
|
|
// (No @packageDocumentation comment for this package)
|
|
|
|
```
|