PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1
tldraw/packages/tlschema/api-report.md
Steve Ruiz 5601d0ee22
Separate text-align property for shapes (#3627) 
This PR creates a new "text align" property for text shapes. Its default
is left align.

This means that text shapes now have their own alignment prop, separate
from the vertical / horizontal alignment used in labels.

The style panel for text has no visual change:

<img width="400" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/aac80d2a-a069-4388-870b-1e0917d88eda">

The style panel for labels has consistent icons for label position:

<img width="487" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/0adf7f0e-8446-4d3e-b9ea-a61e43035207">

Both may be configured separately.

<img width="458" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/698dcfac-6eb2-4a8c-afb8-d1e5761019ef">


# Icon refresh

This PR also removes many unused icons.

It adds a special toggle icon for the context menu.

<img width="571" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/489551e6-a370-4528-9ad4-8f93e119f26b">
<img width="492" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/cd3d77c7-8bae-4369-8b53-ca4685b2fd0e">


### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `improvement` — Improving existing features

### Test Plan

1. Load files.
2. Paste excalidraw content.
3. Load v1 files.
4. Use the app as usual.

- [x] Unit Tests

### Release Notes

- Separates the text align property for text shapes and labels.

---------

Co-authored-by: huppy-bot[bot] <128400622+huppy-bot[bot]@users.noreply.github.com>
2024-04-29 10:58:15 +00:00

1328 lines
41 KiB
Markdown
Raw Blame History

## API Report File for "@tldraw/tlschema"
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
```ts
import { BaseRecord } from '@tldraw/store';
import { Expand } from '@tldraw/utils';
import { IndexKey } from '@tldraw/utils';
import { JsonObject } from '@tldraw/utils';
import { LegacyMigrations } from '@tldraw/store';
import { MigrationId } from '@tldraw/store';
import { MigrationSequence } from '@tldraw/store';
import { RecordId } from '@tldraw/store';
import { RecordType } from '@tldraw/store';
import { SerializedStore } from '@tldraw/store';
import { Signal } from '@tldraw/state';
import { Store } from '@tldraw/store';
import { StoreSchema } from '@tldraw/store';
import { StoreSnapshot } from '@tldraw/store';
import { T } from '@tldraw/validate';
import { UnknownRecord } from '@tldraw/store';
// @public (undocumented)
export const ArrowShapeArrowheadEndStyle: EnumStyleProp<"arrow" | "bar" | "diamond" | "dot" | "inverted" | "none" | "pipe" | "square" | "triangle">;
// @public (undocumented)
export const ArrowShapeArrowheadStartStyle: EnumStyleProp<"arrow" | "bar" | "diamond" | "dot" | "inverted" | "none" | "pipe" | "square" | "triangle">;
// @public (undocumented)
export const arrowShapeMigrations: TLShapePropsMigrations;
// @public (undocumented)
export const arrowShapeProps: {
arrowheadEnd: EnumStyleProp<"arrow" | "bar" | "diamond" | "dot" | "inverted" | "none" | "pipe" | "square" | "triangle">;
arrowheadStart: EnumStyleProp<"arrow" | "bar" | "diamond" | "dot" | "inverted" | "none" | "pipe" | "square" | "triangle">;
bend: T.Validator<number>;
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
dash: EnumStyleProp<"dashed" | "dotted" | "draw" | "solid">;
end: T.UnionValidator<"type", {
binding: T.ObjectValidator<{
boundShapeId: TLShapeId;
isExact: boolean;
isPrecise: boolean;
normalizedAnchor: VecModel;
type: "binding";
} & {}>;
point: T.ObjectValidator<{
type: "point";
x: number;
y: number;
} & {}>;
}, never>;
fill: EnumStyleProp<"none" | "pattern" | "semi" | "solid">;
font: EnumStyleProp<"draw" | "mono" | "sans" | "serif">;
labelColor: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
labelPosition: T.Validator<number>;
size: EnumStyleProp<"l" | "m" | "s" | "xl">;
start: T.UnionValidator<"type", {
binding: T.ObjectValidator<{
boundShapeId: TLShapeId;
isExact: boolean;
isPrecise: boolean;
normalizedAnchor: VecModel;
type: "binding";
} & {}>;
point: T.ObjectValidator<{
type: "point";
x: number;
y: number;
} & {}>;
}, never>;
text: T.Validator<string>;
};
// @public
export const assetIdValidator: T.Validator<TLAssetId>;
// @public (undocumented)
export const assetMigrations: MigrationSequence;
// @public (undocumented)
export const AssetRecordType: RecordType<TLAsset, "props" | "type">;
// @public (undocumented)
export const assetValidator: T.Validator<TLAsset>;
// @public (undocumented)
export const bookmarkShapeMigrations: TLShapePropsMigrations;
// @public (undocumented)
export const bookmarkShapeProps: {
assetId: T.Validator<TLAssetId | null>;
h: T.Validator<number>;
url: T.Validator<string>;
w: T.Validator<number>;
};
// @public
export interface BoxModel {
// (undocumented)
h: number;
// (undocumented)
w: number;
// (undocumented)
x: number;
// (undocumented)
y: number;
}
// @public (undocumented)
export const boxModelValidator: T.Validator<BoxModel>;
// @public (undocumented)
export const CameraRecordType: RecordType<TLCamera, never>;
// @public
export const canvasUiColorTypeValidator: T.Validator<"accent" | "black" | "laser" | "muted-1" | "selection-fill" | "selection-stroke" | "white">;
// @public
export function createAssetValidator<Type extends string, Props extends JsonObject>(type: Type, props: T.Validator<Props>): T.ObjectValidator<{ [P in "id" | "meta" | "typeName" | (undefined extends Props ? never : "props") | (undefined extends Type ? never : "type")]: {
id: TLAssetId;
meta: JsonObject;
props: Props;
type: Type;
typeName: 'asset';
}[P]; } & { [P_1 in (undefined extends Props ? "props" : never) | (undefined extends Type ? "type" : never)]?: {
id: TLAssetId;
meta: JsonObject;
props: Props;
type: Type;
typeName: 'asset';
}[P_1] | undefined; }>;
// @public
export const createPresenceStateDerivation: ($user: Signal<{
color: string;
id: string;
name: string;
}>, instanceId?: TLInstancePresence['id']) => (store: TLStore) => Signal<null | TLInstancePresence>;
// @public (undocumented)
export function createShapeId(id?: string): TLShapeId;
// @public (undocumented)
export function createShapePropsMigrationIds<S extends string, T extends Record<string, number>>(shapeType: S, ids: T): {
[k in keyof T]: `com.tldraw.shape.${S}/${T[k]}`;
};
// @public (undocumented)
export function createShapePropsMigrationSequence(migrations: TLShapePropsMigrations): TLShapePropsMigrations;
// @public (undocumented)
export function createShapeValidator<Type extends string, Props extends JsonObject, Meta extends JsonObject>(type: Type, props?: {
[K in keyof Props]: T.Validatable<Props[K]>;
}, meta?: {
[K in keyof Meta]: T.Validatable<Meta[K]>;
}): T.ObjectValidator<{ [P in "id" | "index" | "isLocked" | "meta" | "opacity" | "parentId" | "rotation" | "typeName" | "x" | "y" | (undefined extends Props ? never : "props") | (undefined extends Type ? never : "type")]: TLBaseShape<Type, Props>[P]; } & { [P_1 in (undefined extends Props ? "props" : never) | (undefined extends Type ? "type" : never)]?: TLBaseShape<Type, Props>[P_1] | undefined; }>;
// @public
export function createTLSchema({ shapes, migrations, }?: {
migrations?: readonly MigrationSequence[];
shapes?: Record<string, SchemaShapeInfo>;
}): TLSchema;
// @public (undocumented)
export const DefaultColorStyle: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
// @public (undocumented)
export const DefaultColorThemePalette: {
darkMode: TLDefaultColorTheme;
lightMode: TLDefaultColorTheme;
};
// @public (undocumented)
export const DefaultDashStyle: EnumStyleProp<"dashed" | "dotted" | "draw" | "solid">;
// @public (undocumented)
export const DefaultFillStyle: EnumStyleProp<"none" | "pattern" | "semi" | "solid">;
// @public (undocumented)
export const DefaultFontFamilies: {
draw: string;
mono: string;
sans: string;
serif: string;
};
// @public (undocumented)
export const DefaultFontStyle: EnumStyleProp<"draw" | "mono" | "sans" | "serif">;
// @public (undocumented)
export const DefaultHorizontalAlignStyle: EnumStyleProp<"end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start">;
// @public (undocumented)
export const defaultShapeSchemas: {
[T in TLDefaultShape['type']]: SchemaShapeInfo;
};
// @public (undocumented)
export const DefaultSizeStyle: EnumStyleProp<"l" | "m" | "s" | "xl">;
// @public (undocumented)
export const DefaultTextAlignStyle: EnumStyleProp<"end" | "middle" | "start">;
// @public (undocumented)
export const DefaultVerticalAlignStyle: EnumStyleProp<"end" | "middle" | "start">;
// @public (undocumented)
export const DocumentRecordType: RecordType<TLDocument, never>;
// @public (undocumented)
export const drawShapeMigrations: TLShapePropsMigrations;
// @public (undocumented)
export const drawShapeProps: {
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
dash: EnumStyleProp<"dashed" | "dotted" | "draw" | "solid">;
fill: EnumStyleProp<"none" | "pattern" | "semi" | "solid">;
isClosed: T.Validator<boolean>;
isComplete: T.Validator<boolean>;
isPen: T.Validator<boolean>;
segments: T.ArrayOfValidator<{
points: VecModel[];
type: "free" | "straight";
} & {}>;
size: EnumStyleProp<"l" | "m" | "s" | "xl">;
};
// @public (undocumented)
export const EMBED_DEFINITIONS: readonly [{
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["beta.tldraw.com", "tldraw.com", "localhost:3000"];
readonly minHeight: 300;
readonly minWidth: 300;
readonly overridePermissions: {
readonly 'allow-top-navigation': true;
};
readonly title: "tldraw";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "tldraw";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["figma.com"];
readonly title: "Figma";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "figma";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["google.*"];
readonly title: "Google Maps";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "google_maps";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["val.town"];
readonly minHeight: 100;
readonly minWidth: 260;
readonly title: "Val Town";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "val_town";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["codesandbox.io"];
readonly minHeight: 300;
readonly minWidth: 300;
readonly title: "CodeSandbox";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "codesandbox";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 400;
readonly hostnames: readonly ["codepen.io"];
readonly minHeight: 300;
readonly minWidth: 300;
readonly title: "Codepen";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "codepen";
readonly width: 520;
}, {
readonly doesResize: false;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 400;
readonly hostnames: readonly ["scratch.mit.edu"];
readonly title: "Scratch";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "scratch";
readonly width: 520;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 450;
readonly hostnames: readonly ["*.youtube.com", "youtube.com", "youtu.be"];
readonly isAspectRatioLocked: true;
readonly overridePermissions: {
readonly 'allow-presentation': true;
};
readonly title: "YouTube";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "youtube";
readonly width: 800;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["calendar.google.*"];
readonly instructionLink: "https://support.google.com/calendar/answer/41207?hl=en";
readonly minHeight: 360;
readonly minWidth: 460;
readonly title: "Google Calendar";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "google_calendar";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["docs.google.*"];
readonly minHeight: 360;
readonly minWidth: 460;
readonly title: "Google Slides";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "google_slides";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["gist.github.com"];
readonly title: "GitHub Gist";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "github_gist";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["replit.com"];
readonly title: "Replit";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "replit";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["felt.com"];
readonly title: "Felt";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "felt";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["open.spotify.com"];
readonly minHeight: 500;
readonly overrideOutlineRadius: 12;
readonly title: "Spotify";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "spotify";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 360;
readonly hostnames: readonly ["vimeo.com", "player.vimeo.com"];
readonly isAspectRatioLocked: true;
readonly title: "Vimeo";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "vimeo";
readonly width: 640;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["excalidraw.com"];
readonly isAspectRatioLocked: true;
readonly title: "Excalidraw";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "excalidraw";
readonly width: 720;
}, {
readonly backgroundColor: "#fff";
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["observablehq.com"];
readonly isAspectRatioLocked: false;
readonly title: "Observable";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "observable";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 450;
readonly hostnames: readonly ["desmos.com"];
readonly title: "Desmos";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "desmos";
readonly width: 700;
}];
// @public (undocumented)
export type EmbedDefinition = {
readonly backgroundColor?: string;
readonly doesResize: boolean;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: number;
readonly hostnames: readonly string[];
readonly instructionLink?: string;
readonly isAspectRatioLocked?: boolean;
readonly minHeight?: number;
readonly minWidth?: number;
readonly overrideOutlineRadius?: number;
readonly overridePermissions?: TLEmbedShapePermissions;
readonly title: string;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: string;
readonly width: number;
};
// @public (undocumented)
export const embedShapeMigrations: TLShapePropsMigrations;
// @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 const embedShapeProps: {
h: T.Validator<number>;
url: T.Validator<string>;
w: T.Validator<number>;
};
// @public
export class EnumStyleProp<T> extends StyleProp<T> {
// @internal
constructor(id: string, defaultValue: T, values: readonly T[]);
// (undocumented)
readonly values: readonly T[];
}
// @public (undocumented)
export const frameShapeMigrations: TLShapePropsMigrations;
// @public (undocumented)
export const frameShapeProps: {
h: T.Validator<number>;
name: T.Validator<string>;
w: T.Validator<number>;
};
// @public (undocumented)
export const GeoShapeGeoStyle: EnumStyleProp<"arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "cloud" | "diamond" | "ellipse" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box">;
// @public (undocumented)
export const geoShapeMigrations: TLShapePropsMigrations;
// @public (undocumented)
export const geoShapeProps: {
align: EnumStyleProp<"end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start">;
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
dash: EnumStyleProp<"dashed" | "dotted" | "draw" | "solid">;
fill: EnumStyleProp<"none" | "pattern" | "semi" | "solid">;
font: EnumStyleProp<"draw" | "mono" | "sans" | "serif">;
geo: EnumStyleProp<"arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "cloud" | "diamond" | "ellipse" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box">;
growY: T.Validator<number>;
h: T.Validator<number>;
labelColor: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
size: EnumStyleProp<"l" | "m" | "s" | "xl">;
text: T.Validator<string>;
url: T.Validator<string>;
verticalAlign: EnumStyleProp<"end" | "middle" | "start">;
w: T.Validator<number>;
};
// @public (undocumented)
export function getDefaultColorTheme(opts: {
isDarkMode: boolean;
}): TLDefaultColorTheme;
// @public (undocumented)
export function getDefaultTranslationLocale(): TLLanguage['locale'];
// @internal (undocumented)
export function getShapePropKeysByStyle(props: Record<string, T.Validatable<any>>): Map<StyleProp<unknown>, string>;
// @public (undocumented)
export const groupShapeMigrations: TLShapePropsMigrations;
// @public (undocumented)
export const groupShapeProps: ShapeProps<TLGroupShape>;
// @public (undocumented)
export const highlightShapeMigrations: TLShapePropsMigrations;
// @public (undocumented)
export const highlightShapeProps: {
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
isComplete: T.Validator<boolean>;
isPen: T.Validator<boolean>;
segments: T.ArrayOfValidator<{
points: VecModel[];
type: "free" | "straight";
} & {}>;
size: EnumStyleProp<"l" | "m" | "s" | "xl">;
};
// @public (undocumented)
export function idValidator<Id extends RecordId<UnknownRecord>>(prefix: Id['__type__']['typeName']): T.Validator<Id>;
// @public (undocumented)
export const imageShapeMigrations: TLShapePropsMigrations;
// @public (undocumented)
export const imageShapeProps: {
assetId: T.Validator<TLAssetId | null>;
crop: T.Validator<({
bottomRight: VecModel;
topLeft: VecModel;
} & {}) | null>;
h: T.Validator<number>;
playing: T.Validator<boolean>;
url: T.Validator<string>;
w: T.Validator<number>;
};
// @public (undocumented)
export const InstancePageStateRecordType: RecordType<TLInstancePageState, "pageId">;
// @public (undocumented)
export const InstancePresenceRecordType: RecordType<TLInstancePresence, "currentPageId" | "userId" | "userName">;
// @public (undocumented)
export function isPageId(id: string): id is TLPageId;
// @public (undocumented)
export function isShape(record?: UnknownRecord): record is TLShape;
// @public (undocumented)
export function isShapeId(id?: string): id is TLShapeId;
// @public (undocumented)
export const LANGUAGES: readonly [{
readonly label: "Català";
readonly locale: "ca";
}, {
readonly label: "Čeština";
readonly locale: "cs";
}, {
readonly label: "Danish";
readonly locale: "da";
}, {
readonly label: "Deutsch";
readonly locale: "de";
}, {
readonly label: "English";
readonly locale: "en";
}, {
readonly label: "Español";
readonly locale: "es";
}, {
readonly label: "Français";
readonly locale: "fr";
}, {
readonly label: "Galego";
readonly locale: "gl";
}, {
readonly label: "Hrvatski";
readonly locale: "hr";
}, {
readonly label: "Italiano";
readonly locale: "it";
}, {
readonly label: "Magyar";
readonly locale: "hu";
}, {
readonly label: "Norwegian";
readonly locale: "no";
}, {
readonly label: "Polski";
readonly locale: "pl";
}, {
readonly label: "Português - Brasil";
readonly locale: "pt-br";
}, {
readonly label: "Português - Europeu";
readonly locale: "pt-pt";
}, {
readonly label: "Română";
readonly locale: "ro";
}, {
readonly label: "Russian";
readonly locale: "ru";
}, {
readonly label: "Slovenščina";
readonly locale: "sl";
}, {
readonly label: "Suomi";
readonly locale: "fi";
}, {
readonly label: "Svenska";
readonly locale: "sv";
}, {
readonly label: "Tiếng Việt";
readonly locale: "vi";
}, {
readonly label: "Türkçe";
readonly locale: "tr";
}, {
readonly label: "Ukrainian";
readonly locale: "uk";
}, {
readonly label: "עברית";
readonly locale: "he";
}, {
readonly label: "عربي";
readonly locale: "ar";
}, {
readonly label: "فارسی";
readonly locale: "fa";
}, {
readonly label: "کوردی";
readonly locale: "ku";
}, {
readonly label: "नेपाली";
readonly locale: "ne";
}, {
readonly label: "हिन्दी";
readonly locale: "hi-in";
}, {
readonly label: "తెలుగు";
readonly locale: "te";
}, {
readonly label: "ภาษาไทย";
readonly locale: "th";
}, {
readonly label: "မြန်မာစာ";
readonly locale: "my";
}, {
readonly label: "한국어";
readonly locale: "ko-kr";
}, {
readonly label: "日本語";
readonly locale: "ja";
}, {
readonly label: "简体中文";
readonly locale: "zh-cn";
}, {
readonly label: "繁體中文 (台灣)";
readonly locale: "zh-tw";
}];
// @public (undocumented)
export const lineShapeMigrations: TLShapePropsMigrations;
// @public (undocumented)
export const lineShapeProps: {
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
dash: EnumStyleProp<"dashed" | "dotted" | "draw" | "solid">;
points: T.DictValidator<string, {
id: string;
index: IndexKey;
x: number;
y: number;
} & {}>;
size: EnumStyleProp<"l" | "m" | "s" | "xl">;
spline: EnumStyleProp<"cubic" | "line">;
};
// @public (undocumented)
export const LineShapeSplineStyle: EnumStyleProp<"cubic" | "line">;
// @public (undocumented)
export const noteShapeMigrations: TLShapePropsMigrations;
// @public (undocumented)
export const noteShapeProps: {
align: EnumStyleProp<"end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start">;
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
font: EnumStyleProp<"draw" | "mono" | "sans" | "serif">;
fontSizeAdjustment: T.Validator<number>;
growY: T.Validator<number>;
size: EnumStyleProp<"l" | "m" | "s" | "xl">;
text: T.Validator<string>;
url: T.Validator<string>;
verticalAlign: EnumStyleProp<"end" | "middle" | "start">;
};
// @public (undocumented)
export const opacityValidator: T.Validator<number>;
// @public (undocumented)
export const pageIdValidator: T.Validator<TLPageId>;
// @public (undocumented)
export const PageRecordType: RecordType<TLPage, "index" | "name">;
// @public (undocumented)
export const parentIdValidator: T.Validator<TLParentId>;
// @public (undocumented)
export const PointerRecordType: RecordType<TLPointer, never>;
// @public (undocumented)
export const rootShapeMigrations: MigrationSequence;
// @public (undocumented)
export type SchemaShapeInfo = {
meta?: Record<string, AnyValidator>;
migrations?: LegacyMigrations | MigrationSequence | TLShapePropsMigrations;
props?: Record<string, AnyValidator>;
};
// @public (undocumented)
export const scribbleValidator: T.Validator<TLScribble>;
// @public (undocumented)
export const shapeIdValidator: T.Validator<TLShapeId>;
// @public (undocumented)
export type ShapeProps<Shape extends TLBaseShape<any, any>> = {
[K in keyof Shape['props']]: T.Validatable<Shape['props'][K]>;
};
// @public (undocumented)
export type ShapePropsType<Config extends Record<string, T.Validatable<any>>> = Expand<{
[K in keyof Config]: T.TypeOf<Config[K]>;
}>;
// @public
export class StyleProp<Type> implements T.Validatable<Type> {
// @internal
protected constructor(id: string, defaultValue: Type, type: T.Validatable<Type>);
// (undocumented)
readonly defaultValue: Type;
static define<Type>(uniqueId: string, options: {
defaultValue: Type;
type?: T.Validatable<Type>;
}): StyleProp<Type>;
static defineEnum<const Values extends readonly unknown[]>(uniqueId: string, options: {
defaultValue: Values[number];
values: Values;
}): EnumStyleProp<Values[number]>;
// (undocumented)
readonly id: string;
// (undocumented)
readonly type: T.Validatable<Type>;
// (undocumented)
validate(value: unknown): Type;
// (undocumented)
validateUsingKnownGoodVersion(prevValue: Type, newValue: unknown): Type;
}
// @public (undocumented)
export type StylePropValue<T extends StyleProp<any>> = T extends StyleProp<infer U> ? U : never;
// @public (undocumented)
export const textShapeMigrations: TLShapePropsMigrations;
// @public (undocumented)
export const textShapeProps: {
autoSize: T.Validator<boolean>;
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
font: EnumStyleProp<"draw" | "mono" | "sans" | "serif">;
scale: T.Validator<number>;
size: EnumStyleProp<"l" | "m" | "s" | "xl">;
text: T.Validator<string>;
textAlign: EnumStyleProp<"end" | "middle" | "start">;
w: T.Validator<number>;
};
// @public
export const TL_CANVAS_UI_COLOR_TYPES: Set<"accent" | "black" | "laser" | "muted-1" | "selection-fill" | "selection-stroke" | "white">;
// @public (undocumented)
export type TLArrowShape = TLBaseShape<'arrow', TLArrowShapeProps>;
// @public (undocumented)
export type TLArrowShapeArrowheadStyle = T.TypeOf<typeof ArrowShapeArrowheadStartStyle>;
// @public (undocumented)
export type TLArrowShapeProps = ShapePropsType<typeof arrowShapeProps>;
// @public (undocumented)
export type TLArrowShapeTerminal = T.TypeOf<typeof ArrowShapeTerminal>;
// @public (undocumented)
export type TLAsset = TLBookmarkAsset | TLImageAsset | TLVideoAsset;
// @public (undocumented)
export type TLAssetId = RecordId<TLBaseAsset<any, any>>;
// @public (undocumented)
export type TLAssetPartial<T extends TLAsset = TLAsset> = T extends T ? {
id: TLAssetId;
meta?: Partial<T['meta']>;
props?: Partial<T['props']>;
type: T['type'];
} & Partial<Omit<T, 'id' | 'meta' | 'props' | 'type'>> : never;
// @public (undocumented)
export type TLAssetShape = Extract<TLShape, {
props: {
assetId: TLAssetId;
};
}>;
// @public (undocumented)
export interface TLBaseAsset<Type extends string, Props> extends BaseRecord<'asset', TLAssetId> {
// (undocumented)
meta: JsonObject;
// (undocumented)
props: Props;
// (undocumented)
type: Type;
}
// @public (undocumented)
export interface TLBaseShape<Type extends string, Props extends object> extends BaseRecord<'shape', TLShapeId> {
// (undocumented)
index: IndexKey;
// (undocumented)
isLocked: boolean;
// (undocumented)
meta: JsonObject;
// (undocumented)
opacity: TLOpacityType;
// (undocumented)
parentId: TLParentId;
// (undocumented)
props: Props;
// (undocumented)
rotation: number;
// (undocumented)
type: Type;
// (undocumented)
x: number;
// (undocumented)
y: number;
}
// @public
export type TLBookmarkAsset = TLBaseAsset<'bookmark', {
description: string;
image: string;
src: null | string;
title: string;
}>;
// @public (undocumented)
export type TLBookmarkShape = TLBaseShape<'bookmark', TLBookmarkShapeProps>;
// @public
export interface TLCamera extends BaseRecord<'camera', TLCameraId> {
// (undocumented)
meta: JsonObject;
// (undocumented)
x: number;
// (undocumented)
y: number;
// (undocumented)
z: number;
}
// @public
export type TLCameraId = RecordId<TLCamera>;
// @public
export type TLCanvasUiColor = SetValue<typeof TL_CANVAS_UI_COLOR_TYPES>;
// @public
export interface TLCursor {
// (undocumented)
rotation: number;
// (undocumented)
type: TLCursorType;
}
// @public
export type TLCursorType = SetValue<typeof TL_CURSOR_TYPES>;
// @public (undocumented)
export type TLDefaultColorStyle = T.TypeOf<typeof DefaultColorStyle>;
// @public (undocumented)
export type TLDefaultColorTheme = Expand<{
background: string;
id: 'dark' | 'light';
solid: string;
text: string;
} & Record<(typeof colors)[number], TLDefaultColorThemeColor>>;
// @public (undocumented)
export type TLDefaultColorThemeColor = {
highlight: {
p3: string;
srgb: string;
};
note: {
fill: string;
text: string;
};
pattern: string;
semi: string;
solid: string;
};
// @public (undocumented)
export type TLDefaultDashStyle = T.TypeOf<typeof DefaultDashStyle>;
// @public (undocumented)
export type TLDefaultFillStyle = T.TypeOf<typeof DefaultFillStyle>;
// @public (undocumented)
export type TLDefaultFontStyle = T.TypeOf<typeof DefaultFontStyle>;
// @public (undocumented)
export type TLDefaultHorizontalAlignStyle = T.TypeOf<typeof DefaultHorizontalAlignStyle>;
// @public
export type TLDefaultShape = TLArrowShape | TLBookmarkShape | TLDrawShape | TLEmbedShape | TLFrameShape | TLGeoShape | TLGroupShape | TLHighlightShape | TLImageShape | TLLineShape | TLNoteShape | TLTextShape | TLVideoShape;
// @public (undocumented)
export type TLDefaultSizeStyle = T.TypeOf<typeof DefaultSizeStyle>;
// @public (undocumented)
export type TLDefaultTextAlignStyle = T.TypeOf<typeof DefaultTextAlignStyle>;
// @public (undocumented)
export type TLDefaultVerticalAlignStyle = T.TypeOf<typeof DefaultVerticalAlignStyle>;
// @public
export interface TLDocument extends BaseRecord<'document', RecordId<TLDocument>> {
// (undocumented)
gridSize: number;
// (undocumented)
meta: JsonObject;
// (undocumented)
name: string;
}
// @public (undocumented)
export const TLDOCUMENT_ID: RecordId<TLDocument>;
// @public (undocumented)
export type TLDrawShape = TLBaseShape<'draw', TLDrawShapeProps>;
// @public (undocumented)
export type TLDrawShapeSegment = T.TypeOf<typeof DrawShapeSegment>;
// @public (undocumented)
export type TLEmbedShape = TLBaseShape<'embed', TLEmbedShapeProps>;
// @public (undocumented)
export type TLEmbedShapePermissions = {
[K in keyof typeof embedShapePermissionDefaults]?: boolean;
};
// @public (undocumented)
export type TLFrameShape = TLBaseShape<'frame', TLFrameShapeProps>;
// @public (undocumented)
export type TLGeoShape = TLBaseShape<'geo', TLGeoShapeProps>;
// @public (undocumented)
export type TLGroupShape = TLBaseShape<'group', TLGroupShapeProps>;
// @public
export interface TLHandle {
// (undocumented)
canBind?: boolean;
// (undocumented)
canSnap?: boolean;
id: string;
// (undocumented)
index: IndexKey;
// (undocumented)
type: TLHandleType;
// (undocumented)
x: number;
// (undocumented)
y: number;
}
// @public
export type TLHandleType = SetValue<typeof TL_HANDLE_TYPES>;
// @public (undocumented)
export type TLHighlightShape = TLBaseShape<'highlight', TLHighlightShapeProps>;
// @public
export type TLImageAsset = TLBaseAsset<'image', {
h: number;
isAnimated: boolean;
mimeType: null | string;
name: string;
src: null | string;
w: number;
}>;
// @public (undocumented)
export type TLImageShape = TLBaseShape<'image', TLImageShapeProps>;
// @public (undocumented)
export type TLImageShapeCrop = T.TypeOf<typeof ImageShapeCrop>;
// @public (undocumented)
export type TLImageShapeProps = ShapePropsType<typeof imageShapeProps>;
// @public
export interface TLInstance extends BaseRecord<'instance', TLInstanceId> {
// (undocumented)
brush: BoxModel | null;
// (undocumented)
canMoveCamera: boolean;
// (undocumented)
chatMessage: string;
// (undocumented)
currentPageId: TLPageId;
// (undocumented)
cursor: TLCursor;
// (undocumented)
devicePixelRatio: number;
// (undocumented)
duplicateProps: {
offset: {
x: number;
y: number;
};
shapeIds: TLShapeId[];
} | null;
// (undocumented)
exportBackground: boolean;
// (undocumented)
followingUserId: null | string;
// (undocumented)
highlightedUserIds: string[];
// (undocumented)
insets: boolean[];
// (undocumented)
isChangingStyle: boolean;
// (undocumented)
isChatting: boolean;
isCoarsePointer: boolean;
// (undocumented)
isDebugMode: boolean;
// (undocumented)
isFocused: boolean;
// (undocumented)
isFocusMode: boolean;
// (undocumented)
isGridMode: boolean;
isHoveringCanvas: boolean | null;
// (undocumented)
isPenMode: boolean;
// (undocumented)
isReadonly: boolean;
// (undocumented)
isToolLocked: boolean;
// (undocumented)
meta: JsonObject;
// (undocumented)
opacityForNextShape: TLOpacityType;
// (undocumented)
openMenus: string[];
// (undocumented)
screenBounds: BoxModel;
// (undocumented)
scribbles: TLScribble[];
// (undocumented)
stylesForNextShape: Record<string, unknown>;
// (undocumented)
zoomBrush: BoxModel | null;
}
// @public (undocumented)
export const TLINSTANCE_ID: TLInstanceId;
// @public (undocumented)
export type TLInstanceId = RecordId<TLInstance>;
// @public
export interface TLInstancePageState extends BaseRecord<'instance_page_state', TLInstancePageStateId> {
// (undocumented)
croppingShapeId: null | TLShapeId;
// (undocumented)
editingShapeId: null | TLShapeId;
// (undocumented)
erasingShapeIds: TLShapeId[];
// (undocumented)
focusedGroupId: null | TLShapeId;
// (undocumented)
hintingShapeIds: TLShapeId[];
// (undocumented)
hoveredShapeId: null | TLShapeId;
// (undocumented)
meta: JsonObject;
// (undocumented)
pageId: RecordId<TLPage>;
// (undocumented)
selectedShapeIds: TLShapeId[];
}
// @public (undocumented)
export interface TLInstancePresence extends BaseRecord<'instance_presence', TLInstancePresenceID> {
// (undocumented)
brush: BoxModel | null;
// (undocumented)
camera: {
x: number;
y: number;
z: number;
};
// (undocumented)
chatMessage: string;
// (undocumented)
color: string;
// (undocumented)
currentPageId: TLPageId;
// (undocumented)
cursor: {
rotation: number;
type: TLCursor['type'];
x: number;
y: number;
};
// (undocumented)
followingUserId: null | string;
// (undocumented)
lastActivityTimestamp: number;
// (undocumented)
meta: JsonObject;
// (undocumented)
screenBounds: BoxModel;
// (undocumented)
scribbles: TLScribble[];
// (undocumented)
selectedShapeIds: TLShapeId[];
// (undocumented)
userId: string;
// (undocumented)
userName: string;
}
// @public (undocumented)
export type TLLanguage = (typeof LANGUAGES)[number];
// @public (undocumented)
export type TLLineShape = TLBaseShape<'line', TLLineShapeProps>;
// @public (undocumented)
export type TLNoteShape = TLBaseShape<'note', TLNoteShapeProps>;
// @public (undocumented)
export type TLOpacityType = number;
// @public
export interface TLPage extends BaseRecord<'page', TLPageId> {
// (undocumented)
index: IndexKey;
// (undocumented)
meta: JsonObject;
// (undocumented)
name: string;
}
// @public (undocumented)
export type TLPageId = RecordId<TLPage>;
// @public (undocumented)
export type TLParentId = TLPageId | TLShapeId;
// @public (undocumented)
export const TLPOINTER_ID: TLPointerId;
// @public (undocumented)
export type TLRecord = TLAsset | TLCamera | TLDocument | TLInstance | TLInstancePageState | TLInstancePresence | TLPage | TLPointer | TLShape;
// @public (undocumented)
export type TLSchema = StoreSchema<TLRecord, TLStoreProps>;
// @public
export type TLScribble = {
color: TLCanvasUiColor;
delay: number;
id: string;
opacity: number;
points: VecModel[];
shrink: number;
size: number;
state: SetValue<typeof TL_SCRIBBLE_STATES>;
taper: boolean;
};
// @public (undocumented)
export type TLSerializedStore = SerializedStore<TLRecord>;
// @public
export type TLShape = TLDefaultShape | TLUnknownShape;
// @public (undocumented)
export type TLShapeId = RecordId<TLUnknownShape>;
// @public (undocumented)
export type TLShapePartial<T extends TLShape = TLShape> = T extends T ? {
id: TLShapeId;
meta?: Partial<T['meta']>;
props?: Partial<T['props']>;
type: T['type'];
} & Partial<Omit<T, 'id' | 'meta' | 'props' | 'type'>> : never;
// @public (undocumented)
export type TLShapeProp = keyof TLShapeProps;
// @public (undocumented)
export type TLShapeProps = Identity<UnionToIntersection<TLDefaultShape['props']>>;
// @public (undocumented)
export type TLShapePropsMigrations = {
sequence: Array<{
readonly dependsOn: readonly MigrationId[];
} | {
readonly dependsOn?: MigrationId[];
readonly down?: ((props: any) => any) | typeof NO_DOWN_MIGRATION | typeof RETIRED_DOWN_MIGRATION;
readonly id: MigrationId;
readonly up: (props: any) => any;
}>;
};
// @public (undocumented)
export type TLStore = Store<TLRecord, TLStoreProps>;
// @public (undocumented)
export type TLStoreProps = {
defaultName: string;
};
// @public (undocumented)
export type TLStoreSchema = StoreSchema<TLRecord, TLStoreProps>;
// @public (undocumented)
export type TLStoreSnapshot = StoreSnapshot<TLRecord>;
// @public (undocumented)
export type TLTextShape = TLBaseShape<'text', TLTextShapeProps>;
// @public (undocumented)
export type TLTextShapeProps = ShapePropsType<typeof textShapeProps>;
// @public
export type TLUnknownShape = TLBaseShape<string, object>;
// @public
export type TLVideoAsset = TLBaseAsset<'video', {
h: number;
isAnimated: boolean;
mimeType: null | string;
name: string;
src: null | string;
w: number;
}>;
// @public (undocumented)
export type TLVideoShape = TLBaseShape<'video', TLVideoShapeProps>;
// @public
export interface VecModel {
// (undocumented)
x: number;
// (undocumented)
y: number;
// (undocumented)
z?: number;
}
// @public (undocumented)
export const vecModelValidator: T.Validator<VecModel>;
// @public (undocumented)
export const videoShapeMigrations: TLShapePropsMigrations;
// @public (undocumented)
export const videoShapeProps: {
assetId: T.Validator<TLAssetId | null>;
h: T.Validator<number>;
playing: T.Validator<boolean>;
time: T.Validator<number>;
url: T.Validator<string>;
w: T.Validator<number>;
};
// (No @packageDocumentation comment for this package)
```
Reference in a new issue View git blame Copy permalink