Force `interface` instead of `type` for better docs (#3815)

Typescript's type aliases (`type X = thing`) can refer to basically
anything, which makes it hard to write an automatic document formatter
for them. Interfaces on the other hand are only object, so they play
much nicer with docs. Currently, object-flavoured type aliases don't
really get expanded at all on our docs site, which means we have a bunch
of docs content that's not shown on the site.

This diff introduces a lint rule that forces `interface X {foo: bar}`s
instead of `type X = {foo: bar}` where possible, as it results in a much
better documentation experience:

Before:
<img width="437" alt="Screenshot 2024-05-22 at 15 24 13"
src="https://github.com/tldraw/tldraw/assets/1489520/32606fd1-6832-4a1e-aa5f-f0534d160c92">

After:
<img width="431" alt="Screenshot 2024-05-22 at 15 33 01"
src="https://github.com/tldraw/tldraw/assets/1489520/4e0d59ee-c38e-4056-b9fd-6a7f15d28f0f">


### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `docs` — Changes to the documentation, examples, or templates.
- [x] `improvement` — Improving existing features
pull/3818/head
alex 2024-05-22 16:55:49 +01:00 zatwierdzone przez GitHub
rodzic abc8521a71
commit f9ed1bf2c9
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: B5690EEEBB952194
131 zmienionych plików z 731 dodań i 434 usunięć

Wyświetl plik

@ -70,6 +70,7 @@ module.exports = {
'error',
{ name: 'structuredClone', message: 'Use structuredClone from @tldraw/util instead' },
],
'@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
},
parser: '@typescript-eslint/parser',
parserOptions: {

Wyświetl plik

@ -1,7 +1,7 @@
import { Article } from '@/types/content-types'
import { Icon } from './Icon'
type ArticleDetailsProps = {
interface ArticleDetailsProps {
article: Article
}

Wyświetl plik

@ -2,7 +2,7 @@ import { ArticleLinks } from '@/types/content-types'
import Link from 'next/link'
import { Icon } from './Icon'
type ArticleNavLinksProps = {
interface ArticleNavLinksProps {
links: ArticleLinks
}

Wyświetl plik

@ -13,13 +13,13 @@ import './Autocomplete.css'
import { Icon } from './Icon'
import { Spinner } from './Spinner'
export type DropdownOption = {
export interface DropdownOption {
label: string
value: string
group?: string
}
type AutocompleteProps = {
interface AutocompleteProps {
customUI?: React.ReactNode
groups?: string[]
groupsToIcon?: {

Wyświetl plik

@ -24,7 +24,10 @@ import {
} from '@microsoft/api-extractor-model'
import { MarkdownWriter, formatWithPrettier, getPath, getSlug } from '../utils'
type Result = { markdown: string; keywords: string[] }
interface Result {
markdown: string
keywords: string[]
}
const REPO_URL = 'https://github.com/tldraw/tldraw/blob/main/'

Wyświetl plik

@ -1,4 +1,4 @@
export type InputCategory = {
export interface InputCategory {
id: string
title: string
description: string
@ -6,7 +6,7 @@ export type InputCategory = {
hero: string | null
}
export type InputSection = {
export interface InputSection {
id: string
title: string
description: string
@ -15,7 +15,7 @@ export type InputSection = {
sidebar_behavior: 'show-links' | 'show-title' | 'hidden' | 'reference'
}
export type InputGroup = {
export interface InputGroup {
id: string
}
@ -150,7 +150,7 @@ export type ArticleLink = Pick<
'id' | 'title' | 'description' | 'categoryId' | 'sectionId' | 'path'
>
export type ArticleLinks = {
export interface ArticleLinks {
prev: ArticleLink | null
next: ArticleLink | null
}
@ -184,7 +184,7 @@ export type SidebarContentLink =
| SidebarContentCategoryLink
| SidebarContentArticleLink
export type SidebarContentList = {
export interface SidebarContentList {
sectionId: string | null
categoryId: string | null
articleId: string | null
@ -197,4 +197,7 @@ export type SidebarContentList = {
/** A table keyed by slug of articles. */
export type Articles = Record<string, Article>
export type GeneratedContent = { sections: Section[]; articles: Articles }
export interface GeneratedContent {
sections: Section[]
articles: Articles
}

Wyświetl plik

@ -1,4 +1,4 @@
export type SearchResult = {
export interface SearchResult {
type: 'article' | 'category' | 'section' | 'heading'
id: string
subtitle: string

Wyświetl plik

@ -1,6 +1,6 @@
import { exhaustiveSwitchError, hasOwnProperty } from '@tldraw/utils'
type AlarmOpts = {
interface AlarmOpts {
overwrite: 'always' | 'if-sooner'
}

Wyświetl plik

@ -35,7 +35,7 @@ const MAX_CONNECTIONS = 50
// increment this any time you make a change to this type
const CURRENT_DOCUMENT_INFO_VERSION = 0
type DocumentInfo = {
interface DocumentInfo {
version: number
slug: string
}

Wyświetl plik

@ -6,7 +6,7 @@ import { getR2KeyForSnapshot } from '../r2'
import { Environment } from '../types'
import { validateSnapshot } from '../utils/validateSnapshot'
export type R2Snapshot = {
export interface R2Snapshot {
parent_slug: CreateSnapshotRequestBody['parent_slug']
drawing: RoomSnapshot
}

Wyświetl plik

@ -1,7 +1,7 @@
// https://developers.cloudflare.com/analytics/analytics-engine/
// This type isn't available in @cloudflare/workers-types yet
export type Analytics = {
export interface Analytics {
writeDataPoint(data: {
blobs?: string[]
doubles?: number[]

Wyświetl plik

@ -3,7 +3,7 @@ import { TLRecord } from '@tldraw/tlschema'
import { schema } from '@tldraw/tlsync'
import { Result, objectMapEntries } from '@tldraw/utils'
type SnapshotRequestBody = {
interface SnapshotRequestBody {
schema: SerializedSchema
snapshot: SerializedStore<TLRecord>
}

Wyświetl plik

@ -32,7 +32,7 @@ import { FORK_PROJECT_ACTION } from '../../utils/sharing'
import { SAVE_FILE_COPY_ACTION } from '../../utils/useFileSystem'
import { getShareUrl } from '../ShareMenu'
type NameState = {
interface NameState {
readonly name: string | null
readonly isEditing: boolean
}

Wyświetl plik

@ -28,7 +28,7 @@ const SHARE_CURRENT_STATE = {
} as const
type ShareCurrentState = (typeof SHARE_CURRENT_STATE)[keyof typeof SHARE_CURRENT_STATE]
type ShareState = {
interface ShareState {
state: ShareCurrentState
qrCodeDataUrl: string
url: string

Wyświetl plik

@ -63,7 +63,7 @@ const components: TLComponents = {
},
}
type SnapshotEditorProps = {
interface SnapshotEditorProps {
schema: SerializedSchema
records: TLRecord[]
}

Wyświetl plik

@ -10,7 +10,7 @@ export class RemoteSyncError extends Error {
}
/** @public */
export type UseSyncClientConfig = {
export interface UseSyncClientConfig {
uri: string
roomId?: string
userPreferences?: Signal<TLUserPreferences>

Wyświetl plik

@ -8,7 +8,7 @@ import { PageMenu } from './menus/PageMenu'
import { StylePanel } from './menus/StylePanel'
import { Toolbar } from './menus/Toolbar'
type Fixtures = {
interface Fixtures {
toolbar: Toolbar
stylePanel: StylePanel
actionsMenu: ActionsMenu

Wyświetl plik

@ -1,6 +1,6 @@
import { ComponentType } from 'react'
export type Example = {
export interface Example {
title: string
description: string
details: string

Wyświetl plik

@ -2,14 +2,14 @@ import { useState } from 'react'
import { AssetRecordType, Box, TLAssetId, TLShapeId, createShapeId } from 'tldraw'
import tldrawPdf from './assets/tldraw.pdf'
export type PdfPage = {
export interface PdfPage {
src: string
bounds: Box
assetId: TLAssetId
shapeId: TLShapeId
}
export type Pdf = {
export interface Pdf {
name: string
pages: PdfPage[]
source: string | ArrayBuffer

Wyświetl plik

@ -4,7 +4,7 @@ import { atom, computed, structuredClone, uniqueId } from 'tldraw'
export const SLIDE_SIZE = { x: 0, y: 0, w: 1600, h: 900 }
export const SLIDE_MARGIN = 100
type Slide = {
interface Slide {
id: string
index: number
name: string

Wyświetl plik

@ -8,7 +8,7 @@ const RED = 14692657
const ORANGE = 16213767
// docs: https://birdie0.github.io/discord-webhooks-guide/index.html
export type DiscordPayload = {
export interface DiscordPayload {
username: string
content: string
embeds: APIEmbed[]

Wyświetl plik

@ -3,7 +3,7 @@ import { GetServerSideProps } from 'next'
import { useEffect, useState } from 'react'
import { getAppOctokit } from '../src/octokit'
type Props = {
interface Props {
deliveries: {
id: number
guid: string
@ -39,7 +39,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async (context) =>
return { props: { deliveries: deliveries.data, cursor } }
}
type SelectedDelivery = {
interface SelectedDelivery {
id: number
data?: unknown
}

Wyświetl plik

@ -1,6 +1,6 @@
import { App, Octokit } from 'octokit'
export type Ctx = {
export interface Ctx {
app: App
octokit: Octokit
installationToken: string

Wyświetl plik

@ -14,13 +14,13 @@ const CLA_SIGNATURES_BRANCH = 'cla-signees'
const pullRequestActionsToCheck = ['opened', 'synchronize', 'reopened', 'edited']
type Signing = {
interface Signing {
githubId: number
signedAt: string
signedVersion: 1
signingComment: string
}
type SigneeInfo = {
interface SigneeInfo {
unsigned: Set<string>
signees: Map<string, { signing: Signing; fileSha: string }>
total: number

Wyświetl plik

@ -96,7 +96,7 @@ export const TldrawWrapper = () => {
)
}
export type TLDrawInnerProps = {
export interface TLDrawInnerProps {
assetSrc: string
fileContents: string
uri: string

Wyświetl plik

@ -2,7 +2,7 @@ import { uniqueId } from 'tldraw'
import type { VscodeMessagePairs } from '../../../messages'
import { vscode } from './vscode'
type SimpleRpcOpts = {
interface SimpleRpcOpts {
timeout: number
}
class SimpleRpcError extends Error {

Wyświetl plik

@ -1,16 +1,16 @@
import { SerializedSchema, SerializedStore, TLRecord } from 'tldraw'
export type Snapshot = {
export interface Snapshot {
schema: SerializedSchema
snapshot: SerializedStore<TLRecord>
}
export type CreateRoomRequestBody = {
export interface CreateRoomRequestBody {
origin: string
snapshot: Snapshot
}
export type CreateSnapshotRequestBody = {
export interface CreateSnapshotRequestBody {
schema: SerializedSchema
snapshot: SerializedStore<TLRecord>
parent_slug?: string | undefined
@ -26,4 +26,7 @@ export type CreateSnapshotResponseBody =
message: string
}
export type GetReadonlySlugResponseBody = { slug: string; isLegacy: boolean }
export interface GetReadonlySlugResponseBody {
slug: string
isLegacy: boolean
}

Wyświetl plik

@ -1131,15 +1131,19 @@ export function extractSessionStateFromLegacySnapshot(store: Record<string, Unkn
export const featureFlags: Record<string, DebugFlag<boolean>>;
// @public (undocumented)
export type GapsSnapIndicator = {
export interface GapsSnapIndicator {
// (undocumented)
direction: 'horizontal' | 'vertical';
// (undocumented)
gaps: Array<{
endEdge: [VecLike, VecLike];
startEdge: [VecLike, VecLike];
}>;
// (undocumented)
id: string;
// (undocumented)
type: 'gaps';
};
}
// @public (undocumented)
export abstract class Geometry2d {
@ -1593,11 +1597,14 @@ export class Point2d extends Geometry2d {
export function pointInPolygon(A: VecLike, points: VecLike[]): boolean;
// @public (undocumented)
export type PointsSnapIndicator = {
export interface PointsSnapIndicator {
// (undocumented)
id: string;
// (undocumented)
points: VecLike[];
// (undocumented)
type: 'points';
};
}
// @public (undocumented)
export class Polygon2d extends Polyline2d {
@ -2057,12 +2064,29 @@ export interface TLBindingUtilConstructor<T extends TLUnknownBinding, U extends
}
// @public (undocumented)
export type TLBrushProps = {
export interface TLBrushProps {
// (undocumented)
brush: BoxModel;
// (undocumented)
className?: string;
// (undocumented)
color?: string;
// (undocumented)
opacity?: number;
};
}
// @public (undocumented)
export interface TLCameraConstraints {
baseZoom: 'default' | 'fit-max-100' | 'fit-max' | 'fit-min-100' | 'fit-min' | 'fit-x-100' | 'fit-x' | 'fit-y-100' | 'fit-y';
behavior: 'contain' | 'fixed' | 'free' | 'inside' | 'outside' | {
x: 'contain' | 'fixed' | 'free' | 'inside' | 'outside';
y: 'contain' | 'fixed' | 'free' | 'inside' | 'outside';
};
bounds: BoxModel;
initialZoom: 'default' | 'fit-max-100' | 'fit-max' | 'fit-min-100' | 'fit-min' | 'fit-x-100' | 'fit-x' | 'fit-y-100' | 'fit-y';
origin: VecLike;
padding: VecLike;
}
// @public (undocumented)
export type TLCameraMoveOptions = Partial<{
@ -2076,33 +2100,25 @@ export type TLCameraMoveOptions = Partial<{
}>;
// @public (undocumented)
export type TLCameraOptions = {
wheelBehavior: 'none' | 'pan' | 'zoom';
constraints?: {
behavior: 'contain' | 'fixed' | 'free' | 'inside' | 'outside' | {
x: 'contain' | 'fixed' | 'free' | 'inside' | 'outside';
y: 'contain' | 'fixed' | 'free' | 'inside' | 'outside';
};
bounds: BoxModel;
baseZoom: 'default' | 'fit-max-100' | 'fit-max' | 'fit-min-100' | 'fit-min' | 'fit-x-100' | 'fit-x' | 'fit-y-100' | 'fit-y';
initialZoom: 'default' | 'fit-max-100' | 'fit-max' | 'fit-min-100' | 'fit-min' | 'fit-x-100' | 'fit-x' | 'fit-y-100' | 'fit-y';
origin: VecLike;
padding: VecLike;
};
export interface TLCameraOptions {
constraints?: TLCameraConstraints;
isLocked: boolean;
panSpeed: number;
wheelBehavior: 'none' | 'pan' | 'zoom';
zoomSpeed: number;
zoomSteps: number[];
isLocked: boolean;
};
}
// @public (undocumented)
export type TLCancelEvent = (info: TLCancelEventInfo) => void;
// @public (undocumented)
export type TLCancelEventInfo = {
export interface TLCancelEventInfo {
// (undocumented)
name: 'cancel';
// (undocumented)
type: 'misc';
};
}
// @public (undocumented)
export type TLClickEvent = (info: TLClickEventInfo) => void;
@ -2121,23 +2137,31 @@ export type TLClickEventInfo = TLBaseEventInfo & {
export type TLCLickEventName = 'double_click' | 'quadruple_click' | 'triple_click';
// @public (undocumented)
export type TLCollaboratorHintProps = {
export interface TLCollaboratorHintProps {
// (undocumented)
className?: string;
// (undocumented)
color: string;
// (undocumented)
opacity?: number;
// (undocumented)
point: VecModel;
// (undocumented)
viewport: Box;
// (undocumented)
zoom: number;
};
}
// @public (undocumented)
export type TLCompleteEvent = (info: TLCompleteEventInfo) => void;
// @public (undocumented)
export type TLCompleteEventInfo = {
export interface TLCompleteEventInfo {
// (undocumented)
name: 'complete';
// (undocumented)
type: 'misc';
};
}
// @public (undocumented)
export interface TLContent {
@ -2154,14 +2178,20 @@ export interface TLContent {
}
// @public (undocumented)
export type TLCursorProps = {
export interface TLCursorProps {
// (undocumented)
chatMessage: string;
// (undocumented)
className?: string;
// (undocumented)
color?: string;
// (undocumented)
name: null | string;
// (undocumented)
point: null | VecModel;
// (undocumented)
zoom: number;
};
}
// @public (undocumented)
export const TldrawEditor: React_2.NamedExoticComponent<TldrawEditorProps>;
@ -2361,35 +2391,47 @@ export type TLExternalContentSource = {
};
// @public (undocumented)
export type TLGridProps = {
export interface TLGridProps {
// (undocumented)
size: number;
// (undocumented)
x: number;
// (undocumented)
y: number;
// (undocumented)
z: number;
};
}
// @public (undocumented)
export type TLHandleProps = {
export interface TLHandleProps {
// (undocumented)
className?: string;
// (undocumented)
handle: TLHandle;
// (undocumented)
isCoarse: boolean;
// (undocumented)
shapeId: TLShapeId;
// (undocumented)
zoom: number;
};
}
// @public (undocumented)
export type TLHandlesProps = {
export interface TLHandlesProps {
// (undocumented)
children: ReactNode;
};
}
// @public (undocumented)
export type TLInterruptEvent = (info: TLInterruptEventInfo) => void;
// @public (undocumented)
export type TLInterruptEventInfo = {
export interface TLInterruptEventInfo {
// (undocumented)
name: 'interrupt';
// (undocumented)
type: 'misc';
};
}
// @public (undocumented)
export type TLKeyboardEvent = (info: TLKeyboardEventInfo) => void;
@ -2520,15 +2562,22 @@ export type TLPointerEventTarget = {
export type TLResizeHandle = SelectionCorner | SelectionEdge;
// @public
export type TLResizeInfo<T extends TLShape> = {
export interface TLResizeInfo<T extends TLShape> {
// (undocumented)
handle: TLResizeHandle;
// (undocumented)
initialBounds: Box;
// (undocumented)
initialShape: T;
// (undocumented)
mode: TLResizeMode;
// (undocumented)
newPoint: Vec;
// (undocumented)
scaleX: number;
// (undocumented)
scaleY: number;
};
}
// @public
export type TLResizeMode = 'resize_bounds' | 'scale_shape';
@ -2547,36 +2596,49 @@ export type TLResizeShapeOptions = Partial<{
}>;
// @public
export type TLRotationSnapshot = {
export interface TLRotationSnapshot {
// (undocumented)
initialCursorAngle: number;
// (undocumented)
initialSelectionRotation: number;
// (undocumented)
selectionPageCenter: Vec;
// (undocumented)
shapeSnapshots: {
initialPagePoint: Vec;
shape: TLShape;
}[];
};
}
// @public (undocumented)
export type TLScribbleProps = {
export interface TLScribbleProps {
// (undocumented)
className?: string;
// (undocumented)
color?: string;
// (undocumented)
opacity?: number;
// (undocumented)
scribble: TLScribble;
// (undocumented)
zoom: number;
};
}
// @public (undocumented)
export type TLSelectionBackgroundProps = {
export interface TLSelectionBackgroundProps {
// (undocumented)
bounds: Box;
// (undocumented)
rotation: number;
};
}
// @public (undocumented)
export type TLSelectionForegroundProps = {
export interface TLSelectionForegroundProps {
// (undocumented)
bounds: Box;
// (undocumented)
rotation: number;
};
}
// @public (undocumented)
export type TLSelectionHandle = RotateCorner | SelectionCorner | SelectionEdge;
@ -2611,13 +2673,18 @@ export interface TLSessionStateSnapshot {
}
// @public (undocumented)
export type TLShapeIndicatorProps = {
export interface TLShapeIndicatorProps {
// (undocumented)
className?: string;
// (undocumented)
color?: string | undefined;
// (undocumented)
hidden?: boolean;
// (undocumented)
opacity?: number;
// (undocumented)
shapeId: TLShapeId;
};
}
// @public (undocumented)
export interface TLShapeUtilCanvasSvgDef {
@ -2643,11 +2710,14 @@ export interface TLShapeUtilConstructor<T extends TLUnknownShape, U extends Shap
export type TLShapeUtilFlag<T> = (shape: T) => boolean;
// @public (undocumented)
export type TLSnapIndicatorProps = {
export interface TLSnapIndicatorProps {
// (undocumented)
className?: string;
// (undocumented)
line: SnapIndicator;
// (undocumented)
zoom: number;
};
}
// @public (undocumented)
export interface TLStateNodeConstructor {
@ -2702,14 +2772,20 @@ export type TLStoreWithStatus = {
};
// @public (undocumented)
export type TLSvgOptions = {
export interface TLSvgOptions {
// (undocumented)
background: boolean;
// (undocumented)
bounds: Box;
// (undocumented)
darkMode?: boolean;
// (undocumented)
padding: number;
// (undocumented)
preserveAspectRatio: React.SVGAttributes<SVGSVGElement>['preserveAspectRatio'];
// (undocumented)
scale: number;
};
}
// @public (undocumented)
export type TLTickEvent = (info: TLTickEventInfo) => void;

Wyświetl plik

@ -223,6 +223,7 @@ export {
} from './lib/editor/types/external-content'
export {
type RequiredKeys,
type TLCameraConstraints,
type TLCameraMoveOptions,
type TLCameraOptions,
type TLSvgOptions,

Wyświetl plik

@ -8,7 +8,9 @@ export interface TLErrorBoundaryProps {
fallback: TLErrorFallbackComponent
}
type TLErrorBoundaryState = { error: Error | null }
interface TLErrorBoundaryState {
error: Error | null
}
const initialState: TLErrorBoundaryState = { error: null }

Wyświetl plik

@ -4,7 +4,7 @@ import { useTransform } from '../../hooks/useTransform'
import { toDomPrecision } from '../../primitives/utils'
/** @public */
export type TLBrushProps = {
export interface TLBrushProps {
brush: BoxModel
color?: string
opacity?: number

Wyświetl plik

@ -26,7 +26,9 @@ import { LiveCollaborators } from '../LiveCollaborators'
import { Shape } from '../Shape'
/** @public */
export type TLCanvasComponentProps = { className?: string }
export interface TLCanvasComponentProps {
className?: string
}
/** @public */
export function DefaultCanvas({ className }: TLCanvasComponentProps) {

Wyświetl plik

@ -7,7 +7,7 @@ import { Vec } from '../../primitives/Vec'
import { clamp } from '../../primitives/utils'
/** @public */
export type TLCollaboratorHintProps = {
export interface TLCollaboratorHintProps {
className?: string
point: VecModel
viewport: Box

Wyświetl plik

@ -4,7 +4,7 @@ import { memo, useRef } from 'react'
import { useTransform } from '../../hooks/useTransform'
/** @public */
export type TLCursorProps = {
export interface TLCursorProps {
className?: string
point: VecModel | null
zoom: number

Wyświetl plik

@ -2,7 +2,7 @@ import { modulate } from '@tldraw/utils'
import { GRID_STEPS } from '../../constants'
/** @public */
export type TLGridProps = {
export interface TLGridProps {
x: number
y: number
z: number

Wyświetl plik

@ -3,7 +3,7 @@ import classNames from 'classnames'
import { COARSE_HANDLE_RADIUS, HANDLE_RADIUS, SIDES } from '../../constants'
/** @public */
export type TLHandleProps = {
export interface TLHandleProps {
shapeId: TLShapeId
handle: TLHandle
zoom: number

Wyświetl plik

@ -1,7 +1,7 @@
import { ReactNode } from 'react'
/** @public */
export type TLHandlesProps = {
export interface TLHandlesProps {
children: ReactNode
}

Wyświetl plik

@ -3,7 +3,7 @@ import classNames from 'classnames'
import { getSvgPathFromPoints } from '../../utils/getSvgPathFromPoints'
/** @public */
export type TLScribbleProps = {
export interface TLScribbleProps {
scribble: TLScribble
zoom: number
color?: string

Wyświetl plik

@ -4,7 +4,7 @@ import { Box } from '../../primitives/Box'
import { toDomPrecision } from '../../primitives/utils'
/** @public */
export type TLSelectionBackgroundProps = {
export interface TLSelectionBackgroundProps {
bounds: Box
rotation: number
}

Wyświetl plik

@ -7,7 +7,7 @@ import { Box } from '../../primitives/Box'
import { toDomPrecision } from '../../primitives/utils'
/** @public */
export type TLSelectionForegroundProps = {
export interface TLSelectionForegroundProps {
bounds: Box
rotation: number
}

Wyświetl plik

@ -33,7 +33,7 @@ const InnerIndicator = ({ editor, id }: { editor: Editor; id: TLShapeId }) => {
}
/** @public */
export type TLShapeIndicatorProps = {
export interface TLShapeIndicatorProps {
shapeId: TLShapeId
color?: string | undefined
opacity?: number

Wyświetl plik

@ -154,7 +154,7 @@ function GapsSnapIndicator({ gaps, direction, zoom }: { zoom: number } & GapsSna
}
/** @public */
export type TLSnapIndicatorProps = {
export interface TLSnapIndicatorProps {
className?: string
line: SnapIndicator
zoom: number

Wyświetl plik

@ -6771,7 +6771,7 @@ export class Editor extends EventEmitter<TLEventMap> {
let remaining = duration
let t: number
type ShapeAnimation = {
interface ShapeAnimation {
partial: TLShapePartial
values: { prop: string; from: number; to: number }[]
}

Wyświetl plik

@ -3,7 +3,7 @@ import { Vec } from '../../primitives/Vec'
import { uniqueId } from '../../utils/uniqueId'
import { Editor } from '../Editor'
type ScribbleItem = {
interface ScribbleItem {
id: string
scribble: TLScribble
timeoutMs: number

Wyświetl plik

@ -44,9 +44,12 @@ export interface BoundsSnapPoint {
handle?: SelectionCorner
}
type SnapPair = { thisPoint: BoundsSnapPoint; otherPoint: BoundsSnapPoint }
interface SnapPair {
thisPoint: BoundsSnapPoint
otherPoint: BoundsSnapPoint
}
type NearestPointsSnap = {
interface NearestPointsSnap {
// selection snaps to a nearby snap point
type: 'points'
points: SnapPair
@ -70,12 +73,12 @@ type NearestSnap =
nudge: number
}
type GapNode = {
interface GapNode {
id: TLShapeId
pageBounds: Box
}
type Gap = {
interface Gap {
// e.g.
// start
// edge │ breadth

Wyświetl plik

@ -6,14 +6,14 @@ import { BoundsSnaps } from './BoundsSnaps'
import { HandleSnaps } from './HandleSnaps'
/** @public */
export type PointsSnapIndicator = {
export interface PointsSnapIndicator {
id: string
type: 'points'
points: VecLike[]
}
/** @public */
export type GapsSnapIndicator = {
export interface GapsSnapIndicator {
id: string
type: 'gaps'
direction: 'horizontal' | 'vertical'

Wyświetl plik

@ -21,7 +21,7 @@ const textAlignmentsForLtr = {
}
type TLOverflowMode = 'wrap' | 'truncate-ellipsis' | 'truncate-clip'
type TLMeasureTextSpanOpts = {
interface TLMeasureTextSpanOpts {
overflow: TLOverflowMode
width: number
height: number

Wyświetl plik

@ -562,7 +562,7 @@ export type TLResizeMode = 'scale_shape' | 'resize_bounds'
* @param initialShape - The shape at the start of the resize.
* @public
*/
export type TLResizeInfo<T extends TLShape> = {
export interface TLResizeInfo<T extends TLShape> {
newPoint: Vec
handle: TLResizeHandle
mode: TLResizeMode

Wyświetl plik

@ -96,13 +96,26 @@ export type TLWheelEventInfo = TLBaseEventInfo & {
}
/** @public */
export type TLCancelEventInfo = { type: 'misc'; name: 'cancel' }
export interface TLCancelEventInfo {
type: 'misc'
name: 'cancel'
}
/** @public */
export type TLCompleteEventInfo = { type: 'misc'; name: 'complete' }
export interface TLCompleteEventInfo {
type: 'misc'
name: 'complete'
}
/** @public */
export type TLInterruptEventInfo = { type: 'misc'; name: 'interrupt' }
export interface TLInterruptEventInfo {
type: 'misc'
name: 'interrupt'
}
/** @public */
export type TLTickEventInfo = { type: 'misc'; name: 'tick'; elapsed: number }
export interface TLTickEventInfo {
type: 'misc'
name: 'tick'
elapsed: number
}
/** @public */
export type TLEventInfo =

Wyświetl plik

@ -8,7 +8,7 @@ export type RequiredKeys<T, K extends keyof T> = Partial<Omit<T, K>> & Pick<T, K
export type OptionalKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>
/** @public */
export type TLSvgOptions = {
export interface TLSvgOptions {
bounds: Box
scale: number
background: boolean
@ -35,7 +35,7 @@ export type TLCameraMoveOptions = Partial<{
}>
/** @public */
export type TLCameraOptions = {
export interface TLCameraOptions {
/** Whether the camera is locked. */
isLocked: boolean
/** The speed of a scroll wheel / trackpad pan. Default is 1. */
@ -52,74 +52,77 @@ export type TLCameraOptions = {
*/
wheelBehavior: 'zoom' | 'pan' | 'none'
/** The camera constraints. */
constraints?: {
/** The bounds (in page space) of the constrained space */
bounds: BoxModel
/** The padding inside of the viewport (in screen space) */
padding: VecLike
/** The origin for placement. Used to position the bounds within the viewport when an axis is fixed or contained and zoom is below the axis fit. */
origin: VecLike
/** The camera's initial zoom, used also when the camera is reset.
*
* - `default`: Sets the initial zoom to 100%.
* - `fit-x`: The x axis will completely fill the viewport bounds.
* - `fit-y`: The y axis will completely fill the viewport bounds.
* - `fit-min`: The smaller axis will completely fill the viewport bounds.
* - `fit-max`: The larger axis will completely fill the viewport bounds.
* - `fit-x-100`: The x axis will completely fill the viewport bounds, or 100% zoom, whichever is smaller.
* - `fit-y-100`: The y axis will completely fill the viewport bounds, or 100% zoom, whichever is smaller.
* - `fit-min-100`: The smaller axis will completely fill the viewport bounds, or 100% zoom, whichever is smaller.
* - `fit-max-100`: The larger axis will completely fill the viewport bounds, or 100% zoom, whichever is smaller.
*/
initialZoom:
| 'fit-min'
| 'fit-max'
| 'fit-x'
| 'fit-y'
| 'fit-min-100'
| 'fit-max-100'
| 'fit-x-100'
| 'fit-y-100'
| 'default'
/** The camera's base for its zoom steps.
*
* - `default`: Sets the initial zoom to 100%.
* - `fit-x`: The x axis will completely fill the viewport bounds.
* - `fit-y`: The y axis will completely fill the viewport bounds.
* - `fit-min`: The smaller axis will completely fill the viewport bounds.
* - `fit-max`: The larger axis will completely fill the viewport bounds.
* - `fit-x-100`: The x axis will completely fill the viewport bounds, or 100% zoom, whichever is smaller.
* - `fit-y-100`: The y axis will completely fill the viewport bounds, or 100% zoom, whichever is smaller.
* - `fit-min-100`: The smaller axis will completely fill the viewport bounds, or 100% zoom, whichever is smaller.
* - `fit-max-100`: The larger axis will completely fill the viewport bounds, or 100% zoom, whichever is smaller.
*/
baseZoom:
| 'fit-min'
| 'fit-max'
| 'fit-x'
| 'fit-y'
| 'fit-min-100'
| 'fit-max-100'
| 'fit-x-100'
| 'fit-y-100'
| 'default'
/** The behavior for the constraints for both axes or each axis individually.
*
* - `free`: The bounds are ignored when moving the camera.
* - 'fixed': The bounds will be positioned within the viewport based on the origin
* - `contain`: The 'fixed' behavior will be used when the zoom is below the zoom level at which the bounds would fill the viewport; and when above this zoom, the bounds will use the 'inside' behavior.
* - `inside`: The bounds will stay completely within the viewport.
* - `outside`: The bounds will stay touching the viewport.
*/
behavior:
| 'free'
| 'fixed'
| 'inside'
| 'outside'
| 'contain'
| {
x: 'free' | 'fixed' | 'inside' | 'outside' | 'contain'
y: 'free' | 'fixed' | 'inside' | 'outside' | 'contain'
}
}
constraints?: TLCameraConstraints
}
/** @public */
export interface TLCameraConstraints {
/** The bounds (in page space) of the constrained space */
bounds: BoxModel
/** The padding inside of the viewport (in screen space) */
padding: VecLike
/** The origin for placement. Used to position the bounds within the viewport when an axis is fixed or contained and zoom is below the axis fit. */
origin: VecLike
/** The camera's initial zoom, used also when the camera is reset.
*
* - `default`: Sets the initial zoom to 100%.
* - `fit-x`: The x axis will completely fill the viewport bounds.
* - `fit-y`: The y axis will completely fill the viewport bounds.
* - `fit-min`: The smaller axis will completely fill the viewport bounds.
* - `fit-max`: The larger axis will completely fill the viewport bounds.
* - `fit-x-100`: The x axis will completely fill the viewport bounds, or 100% zoom, whichever is smaller.
* - `fit-y-100`: The y axis will completely fill the viewport bounds, or 100% zoom, whichever is smaller.
* - `fit-min-100`: The smaller axis will completely fill the viewport bounds, or 100% zoom, whichever is smaller.
* - `fit-max-100`: The larger axis will completely fill the viewport bounds, or 100% zoom, whichever is smaller.
*/
initialZoom:
| 'fit-min'
| 'fit-max'
| 'fit-x'
| 'fit-y'
| 'fit-min-100'
| 'fit-max-100'
| 'fit-x-100'
| 'fit-y-100'
| 'default'
/** The camera's base for its zoom steps.
*
* - `default`: Sets the initial zoom to 100%.
* - `fit-x`: The x axis will completely fill the viewport bounds.
* - `fit-y`: The y axis will completely fill the viewport bounds.
* - `fit-min`: The smaller axis will completely fill the viewport bounds.
* - `fit-max`: The larger axis will completely fill the viewport bounds.
* - `fit-x-100`: The x axis will completely fill the viewport bounds, or 100% zoom, whichever is smaller.
* - `fit-y-100`: The y axis will completely fill the viewport bounds, or 100% zoom, whichever is smaller.
* - `fit-min-100`: The smaller axis will completely fill the viewport bounds, or 100% zoom, whichever is smaller.
* - `fit-max-100`: The larger axis will completely fill the viewport bounds, or 100% zoom, whichever is smaller.
*/
baseZoom:
| 'fit-min'
| 'fit-max'
| 'fit-x'
| 'fit-y'
| 'fit-min-100'
| 'fit-max-100'
| 'fit-x-100'
| 'fit-y-100'
| 'default'
/** The behavior for the constraints for both axes or each axis individually.
*
* - `free`: The bounds are ignored when moving the camera.
* - 'fixed': The bounds will be positioned within the viewport based on the origin
* - `contain`: The 'fixed' behavior will be used when the zoom is below the zoom level at which the bounds would fill the viewport; and when above this zoom, the bounds will use the 'inside' behavior.
* - `inside`: The bounds will stay completely within the viewport.
* - `outside`: The bounds will stay touching the viewport.
*/
behavior:
| 'free'
| 'fixed'
| 'inside'
| 'outside'
| 'contain'
| {
x: 'free' | 'fixed' | 'inside' | 'outside' | 'contain'
y: 'free' | 'fixed' | 'inside' | 'outside' | 'contain'
}
}

Wyświetl plik

@ -73,7 +73,7 @@ export interface BaseEditorComponents {
}
// These will always have defaults
type ErrorComponents = {
interface ErrorComponents {
ErrorFallback: TLErrorFallbackComponent
ShapeErrorFallback: TLShapeErrorFallbackComponent
ShapeIndicatorErrorFallback: TLShapeIndicatorErrorFallbackComponent
@ -88,7 +88,7 @@ export type TLEditorComponents = Partial<
const EditorComponentsContext = createContext<null | (TLEditorComponents & ErrorComponents)>(null)
type ComponentsContextProviderProps = {
interface ComponentsContextProviderProps {
overrides?: TLEditorComponents
children: ReactNode
}

Wyświetl plik

@ -48,7 +48,7 @@ export function getRotationSnapshot({ editor }: { editor: Editor }): TLRotationS
*
* @public
**/
export type TLRotationSnapshot = {
export interface TLRotationSnapshot {
selectionPageCenter: Vec
initialCursorAngle: number
initialSelectionRotation: number

Wyświetl plik

@ -26,7 +26,7 @@ const UPDATE_INSTANCE_STATE = Symbol('UPDATE_INSTANCE_STATE')
* once it has the db integrated
*/
type SyncMessage = {
interface SyncMessage {
type: 'diff'
storeId: string
changes: RecordsDiff<UnknownRecord>
@ -36,7 +36,7 @@ type SyncMessage = {
// Sent by new clients when they connect
// If another client is on the channel with a newer schema version
// It will
type AnnounceMessage = {
interface AnnounceMessage {
type: 'announce'
schema: SerializedSchema
}

Wyświetl plik

@ -38,13 +38,13 @@ async function withDb<T>(storeId: string, cb: (db: IDBPDatabase<StoreName>) => P
}
}
type LoadResult = {
interface LoadResult {
records: TLRecord[]
schema?: SerializedSchema
sessionStateSnapshot?: TLSessionStateSnapshot | null
}
type SessionStateSnapshotRow = {
interface SessionStateSnapshotRow {
id: string
snapshot: TLSessionStateSnapshot
updatedAt: number

Wyświetl plik

@ -53,7 +53,10 @@ export const WithDiff = singleton(
) {}
}
)
export type WithDiff<Value, Diff> = { value: Value; diff: Diff }
export interface WithDiff<Value, Diff> {
value: Value
diff: Diff
}
/**
* When writing incrementally-computed signals it is convenient (and usually more performant) to incrementally compute the diff too.

Wyświetl plik

@ -72,7 +72,7 @@ const unpack = (value: unknown): Letter => {
return value as Letter
}
type FuzzSystemState = {
interface FuzzSystemState {
atoms: Record<string, Atom<Letter>>
atomsInAtoms: Record<string, Atom<Atom<Letter>>>
derivations: Record<string, { derivation: Computed<Letter>; sneakyGet: () => Letter }>

Wyświetl plik

@ -49,7 +49,7 @@ export interface Signal<Value, Diff = unknown> {
}
/** @internal */
export type Child = {
export interface Child {
lastTraversedEpoch: number
readonly parentSet: ArraySet<Signal<any, any>>
readonly parents: Signal<any, any>[]

Wyświetl plik

@ -23,15 +23,18 @@ export interface BaseRecord<TypeName extends string, Id extends RecordId<Unknown
}
// @public
export type CollectionDiff<T> = {
export interface CollectionDiff<T> {
// (undocumented)
added?: Set<T>;
// (undocumented)
removed?: Set<T>;
};
}
// @public
export type ComputedCache<Data, R extends UnknownRecord> = {
export interface ComputedCache<Data, R extends UnknownRecord> {
// (undocumented)
get(id: IdOf<R>): Data | undefined;
};
}
// @public
export function createComputedCache<Context extends StoreContext<any>, Result, Record extends ContextRecordType<Context> = ContextRecordType<Context>>(name: string, derive: (context: Context, record: Record) => Result | undefined, isEqual?: (a: Record, b: Record) => boolean): {
@ -86,10 +89,12 @@ export function defineMigrations(opts: {
export function devFreeze<T>(object: T): T;
// @public
export type HistoryEntry<R extends UnknownRecord = UnknownRecord> = {
export interface HistoryEntry<R extends UnknownRecord = UnknownRecord> {
// (undocumented)
changes: RecordsDiff<R>;
// (undocumented)
source: ChangeSource;
};
}
// @public (undocumented)
export type IdOf<R extends UnknownRecord> = R['id'];
@ -113,10 +118,12 @@ export class IncrementalSetConstructor<T> {
export function isRecordsDiffEmpty<T extends UnknownRecord>(diff: RecordsDiff<T>): boolean;
// @public (undocumented)
export type LegacyMigration<Before = any, After = any> = {
export interface LegacyMigration<Before = any, After = any> {
// (undocumented)
down: (newState: After) => Before;
// (undocumented)
up: (oldState: Before) => After;
};
}
// @public (undocumented)
export interface LegacyMigrations extends LegacyBaseMigrationsInfo {
@ -190,11 +197,14 @@ export type RecordId<R extends UnknownRecord> = string & {
};
// @public
export type RecordsDiff<R extends UnknownRecord> = {
export interface RecordsDiff<R extends UnknownRecord> {
// (undocumented)
added: Record<IdOf<R>, R>;
// (undocumented)
removed: Record<IdOf<R>, R>;
// (undocumented)
updated: Record<IdOf<R>, [from: R, to: R]>;
};
}
// @public
export class RecordType<R extends UnknownRecord, RequiredProperties extends keyof Omit<R, 'id' | 'typeName'>> {
@ -271,9 +281,10 @@ export function squashRecordDiffs<T extends UnknownRecord>(diffs: RecordsDiff<T>
export function squashRecordDiffsMutable<T extends UnknownRecord>(target: RecordsDiff<T>, diffs: RecordsDiff<T>[]): void;
// @public (undocumented)
export type StandaloneDependsOn = {
export interface StandaloneDependsOn {
// (undocumented)
readonly dependsOn: readonly MigrationId[];
};
}
// @public
export class Store<R extends UnknownRecord = UnknownRecord, Props = unknown> {
@ -358,13 +369,18 @@ export type StoreBeforeCreateHandler<R extends UnknownRecord> = (record: R, sour
export type StoreBeforeDeleteHandler<R extends UnknownRecord> = (record: R, source: 'remote' | 'user') => false | void;
// @public (undocumented)
export type StoreError = {
export interface StoreError {
// (undocumented)
error: Error;
// (undocumented)
isExistingValidationIssue: boolean;
// (undocumented)
phase: 'createRecord' | 'initialize' | 'tests' | 'updateRecord';
// (undocumented)
recordAfter: unknown;
// (undocumented)
recordBefore?: unknown;
};
}
// @public
export type StoreListener<R extends UnknownRecord> = (entry: HistoryEntry<R>) => void;
@ -407,8 +423,12 @@ export class StoreSchema<R extends UnknownRecord, P = unknown> {
}
// @public (undocumented)
export type StoreSchemaOptions<R extends UnknownRecord, P> = {
export interface StoreSchemaOptions<R extends UnknownRecord, P> {
// @internal (undocumented)
createIntegrityChecker?: (store: Store<R, P>) => void;
// (undocumented)
migrations?: MigrationSequence[];
// (undocumented)
onValidationFailure?: (data: {
error: unknown;
phase: 'createRecord' | 'initialize' | 'tests' | 'updateRecord';
@ -416,8 +436,7 @@ export type StoreSchemaOptions<R extends UnknownRecord, P> = {
recordBefore: null | R;
store: Store<R>;
}) => R;
migrations?: MigrationSequence[];
};
}
// @public
export class StoreSideEffects<R extends UnknownRecord> {
@ -473,16 +492,20 @@ export class StoreSideEffects<R extends UnknownRecord> {
}
// @public (undocumented)
export type StoreSnapshot<R extends UnknownRecord> = {
export interface StoreSnapshot<R extends UnknownRecord> {
// (undocumented)
schema: SerializedSchema;
// (undocumented)
store: SerializedStore<R>;
};
}
// @public (undocumented)
export type StoreValidator<R extends UnknownRecord> = {
export interface StoreValidator<R extends UnknownRecord> {
// (undocumented)
validate: (record: unknown) => R;
// (undocumented)
validateUsingKnownGoodVersion?: (knownGoodVersion: R, record: unknown) => R;
};
}
// @public (undocumented)
export type StoreValidators<R extends UnknownRecord> = {

Wyświetl plik

@ -6,7 +6,7 @@ import { IdOf, UnknownRecord } from './BaseRecord'
*
* @public
*/
export type RecordsDiff<R extends UnknownRecord> = {
export interface RecordsDiff<R extends UnknownRecord> {
added: Record<IdOf<R>, R>
updated: Record<IdOf<R>, [from: R, to: R]>
removed: Record<IdOf<R>, R>

Wyświetl plik

@ -26,11 +26,14 @@ type RecFromId<K extends RecordId<UnknownRecord>> = K extends RecordId<infer R>
*
* @public
*/
export type CollectionDiff<T> = { added?: Set<T>; removed?: Set<T> }
export interface CollectionDiff<T> {
added?: Set<T>
removed?: Set<T>
}
export type ChangeSource = 'user' | 'remote'
export type StoreListenerFilters = {
export interface StoreListenerFilters {
source: ChangeSource | 'all'
scope: RecordScope | 'all'
}
@ -40,7 +43,7 @@ export type StoreListenerFilters = {
*
* @public
*/
export type HistoryEntry<R extends UnknownRecord = UnknownRecord> = {
export interface HistoryEntry<R extends UnknownRecord = UnknownRecord> {
changes: RecordsDiff<R>
source: ChangeSource
}
@ -57,7 +60,7 @@ export type StoreListener<R extends UnknownRecord> = (entry: HistoryEntry<R>) =>
*
* @public
*/
export type ComputedCache<Data, R extends UnknownRecord> = {
export interface ComputedCache<Data, R extends UnknownRecord> {
get(id: IdOf<R>): Data | undefined
}
@ -69,13 +72,13 @@ export type ComputedCache<Data, R extends UnknownRecord> = {
export type SerializedStore<R extends UnknownRecord> = Record<IdOf<R>, R>
/** @public */
export type StoreSnapshot<R extends UnknownRecord> = {
export interface StoreSnapshot<R extends UnknownRecord> {
store: SerializedStore<R>
schema: SerializedSchema
}
/** @public */
export type StoreValidator<R extends UnknownRecord> = {
export interface StoreValidator<R extends UnknownRecord> {
validate: (record: unknown) => R
validateUsingKnownGoodVersion?: (knownGoodVersion: R, record: unknown) => R
}
@ -86,7 +89,7 @@ export type StoreValidators<R extends UnknownRecord> = {
}
/** @public */
export type StoreError = {
export interface StoreError {
error: Error
phase: 'initialize' | 'createRecord' | 'updateRecord' | 'tests'
recordBefore?: unknown

Wyświetl plik

@ -74,7 +74,7 @@ export function upgradeSchema(schema: SerializedSchema): Result<SerializedSchema
}
/** @public */
export type StoreSchemaOptions<R extends UnknownRecord, P> = {
export interface StoreSchemaOptions<R extends UnknownRecord, P> {
migrations?: MigrationSequence[]
/** @public */
onValidationFailure?: (data: {

Wyświetl plik

@ -128,7 +128,7 @@ export function createRecordMigrationSequence(opts: {
}
/** @public */
export type LegacyMigration<Before = any, After = any> = {
export interface LegacyMigration<Before = any, After = any> {
up: (oldState: Before) => After
down: (newState: After) => Before
}
@ -137,7 +137,7 @@ export type LegacyMigration<Before = any, After = any> = {
export type MigrationId = `${string}/${number}`
/** @public */
export type StandaloneDependsOn = {
export interface StandaloneDependsOn {
readonly dependsOn: readonly MigrationId[]
}

File diff suppressed because one or more lines are too long

Wyświetl plik

@ -27,7 +27,7 @@ import { getEmbedInfo } from './utils/embeds/embeds'
import { cleanupText, isRightToLeftLanguage, truncateStringWithEllipsis } from './utils/text/text'
/** @public */
export type TLExternalContentProps = {
export interface TLExternalContentProps {
// The maximum dimension (width or height) of an image. Images larger than this will be rescaled to fit. Defaults to infinity.
maxImageDimension: number
// The maximum size (in bytes) of an asset. Assets larger than this will be rejected. Defaults to 10mb (10 * 1024 * 1024).

Wyświetl plik

@ -2,7 +2,7 @@ import { TLArrowShapeArrowheadStyle, VecLike } from '@tldraw/editor'
import { TLArrowBindings } from './shared'
/** @public */
export type TLArrowPoint = {
export interface TLArrowPoint {
handle: VecLike
point: VecLike
arrowhead: TLArrowShapeArrowheadStyle

Wyświetl plik

@ -1,7 +1,7 @@
import { HALF_PI, PI, Vec, VecLike, intersectCircleCircle } from '@tldraw/editor'
import { TLArrowInfo } from './arrow-types'
type TLArrowPointsInfo = {
interface TLArrowPointsInfo {
point: VecLike
int: VecLike
}

Wyświetl plik

@ -17,7 +17,7 @@ export function getIsArrowStraight(shape: TLArrowShape) {
return Math.abs(shape.props.bend) < 8 // snap to +-8px
}
export type BoundShapeInfo<T extends TLShape = TLShape> = {
export interface BoundShapeInfo<T extends TLShape = TLShape> {
shape: T
didIntersect: boolean
isExact: boolean

Wyświetl plik

@ -215,7 +215,7 @@ export function getCloudArcs(
return arcs
}
type Arc = {
interface Arc {
leftPoint: Vec
rightPoint: Vec
arcPoint: Vec

Wyświetl plik

@ -12,7 +12,7 @@ import { TextHelpers } from './TextHelpers'
import { isLegacyAlign } from './legacyProps'
import { useEditableText } from './useEditableText'
type TextLabelProps = {
interface TextLabelProps {
id: TLShapeId
type: string
font: TLDefaultFontStyle

Wyświetl plik

@ -147,7 +147,11 @@ const canvasBlob = (size: [number, number], fn: (ctx: CanvasRenderingContext2D)
fn(ctx)
return canvas.toDataURL()
}
type PatternDef = { zoom: number; url: string; theme: 'light' | 'dark' }
interface PatternDef {
zoom: number
url: string
theme: 'light' | 'dark'
}
let defaultPixels: { white: string; black: string } | null = null
function getDefaultPixels() {

Wyświetl plik

@ -1,6 +1,6 @@
import canvasSize from 'canvas-size'
export type CanvasMaxSize = {
export interface CanvasMaxSize {
maxWidth: number
maxHeight: number
maxArea: number

Wyświetl plik

@ -1,7 +1,7 @@
import { preventDefault, stopEventPropagation } from '@tldraw/editor'
import { forwardRef } from 'react'
type TextAreaProps = {
interface TextAreaProps {
isEditing: boolean
text: string
handleFocus: () => void

Wyświetl plik

@ -77,7 +77,7 @@ export const TldrawUi = React.memo(function TldrawUi({
)
})
type TldrawUiContentProps = {
interface TldrawUiContentProps {
hideUi?: boolean
shareZone?: ReactNode
topZone?: ReactNode

Wyświetl plik

@ -15,7 +15,7 @@ import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuCon
import { DefaultActionsMenuContent } from './DefaultActionsMenuContent'
/** @public */
export type TLUiActionsMenuProps = {
export interface TLUiActionsMenuProps {
children?: ReactNode
}

Wyświetl plik

@ -10,7 +10,7 @@ import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuCon
import { DefaultDebugMenuContent } from './DefaultDebugMenuContent'
/** @public */
export type TLUiDebugMenuProps = {
export interface TLUiDebugMenuProps {
children?: ReactNode
}

Wyświetl plik

@ -13,7 +13,7 @@ import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuCon
import { DefaultHelpMenuContent } from './DefaultHelpMenuContent'
/** @public */
export type TLUiHelpMenuProps = {
export interface TLUiHelpMenuProps {
children?: ReactNode
}

Wyświetl plik

@ -3,7 +3,7 @@ import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuCon
import { DefaultHelperButtonsContent } from './DefaultHelperButtonsContent'
/** @public */
export type TLUiHelperButtonsProps = {
export interface TLUiHelperButtonsProps {
children?: ReactNode
}

Wyświetl plik

@ -9,7 +9,7 @@ import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuCon
import { DefaultMainMenuContent } from './DefaultMainMenuContent'
/** @public */
export type TLUiMainMenuProps = {
export interface TLUiMainMenuProps {
children?: ReactNode
}

Wyświetl plik

@ -3,7 +3,7 @@ import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuCon
import { DefaultQuickActionsContent } from './DefaultQuickActionsContent'
/** @public */
export type TLUiQuickActionsProps = {
export interface TLUiQuickActionsProps {
children?: ReactNode
}

Wyświetl plik

@ -35,7 +35,7 @@ import { DoubleDropdownPicker } from './DoubleDropdownPicker'
import { DropdownPicker } from './DropdownPicker'
/** @public */
export type TLUiStylePanelContentProps = {
export interface TLUiStylePanelContentProps {
styles: ReturnType<typeof useRelevantStyles>
}

Wyświetl plik

@ -10,7 +10,7 @@ import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuCon
import { DefaultZoomMenuContent } from './DefaultZoomMenuContent'
/** @public */
export type TLUiZoomMenuProps = {
export interface TLUiZoomMenuProps {
children?: ReactNode
}

Wyświetl plik

@ -1,7 +1,9 @@
import { TldrawUiIcon } from '../TldrawUiIcon'
/** @public */
export type TLUiButtonCheckProps = { checked: boolean }
export interface TLUiButtonCheckProps {
checked: boolean
}
/** @public */
export function TldrawUiButtonCheck({ checked }: TLUiButtonCheckProps) {

Wyświetl plik

@ -1,7 +1,7 @@
import { TldrawUiIcon } from '../TldrawUiIcon'
/** @public */
export type TLUiButtonIconProps = {
export interface TLUiButtonIconProps {
icon: string
small?: boolean
invertIcon?: boolean

Wyświetl plik

@ -1,7 +1,9 @@
import { ReactNode } from 'react'
/** @public */
export type TLUiButtonLabelProps = { children?: ReactNode }
export interface TLUiButtonLabelProps {
children?: ReactNode
}
/** @public */
export function TldrawUiButtonLabel({ children }: TLUiButtonLabelProps) {

Wyświetl plik

@ -5,7 +5,7 @@ import { TldrawUiButton } from './Button/TldrawUiButton'
import { TldrawUiButtonIcon } from './Button/TldrawUiButtonIcon'
/** @public */
export type TLUiDialogHeaderProps = {
export interface TLUiDialogHeaderProps {
className?: string
children: ReactNode
}
@ -16,7 +16,7 @@ export function TldrawUiDialogHeader({ className, children }: TLUiDialogHeaderPr
}
/** @public */
export type TLUiDialogTitleProps = {
export interface TLUiDialogTitleProps {
className?: string
children: ReactNode
}
@ -48,7 +48,7 @@ export function TldrawUiDialogCloseButton() {
}
/** @public */
export type TLUiDialogBodyProps = {
export interface TLUiDialogBodyProps {
className?: string
children: ReactNode
style?: React.CSSProperties
@ -64,7 +64,7 @@ export function TldrawUiDialogBody({ className, children, style }: TLUiDialogBod
}
/** @public */
export type TLUiDialogFooterProps = {
export interface TLUiDialogFooterProps {
className?: string
children: ReactNode
}

Wyświetl plik

@ -8,7 +8,7 @@ import { TldrawUiButtonLabel } from './Button/TldrawUiButtonLabel'
import { TldrawUiIcon } from './TldrawUiIcon'
/** @public */
export type TLUiDropdownMenuRootProps = {
export interface TLUiDropdownMenuRootProps {
id: string
children: ReactNode
modal?: boolean
@ -57,7 +57,7 @@ export function TldrawUiDropdownMenuTrigger({ children, ...rest }: TLUiDropdownM
}
/** @public */
export type TLUiDropdownMenuContentProps = {
export interface TLUiDropdownMenuContentProps {
id?: string
children: ReactNode
alignOffset?: number
@ -93,7 +93,10 @@ export function TldrawUiDropdownMenuContent({
}
/** @public */
export type TLUiDropdownMenuSubProps = { id: string; children: ReactNode }
export interface TLUiDropdownMenuSubProps {
id: string
children: ReactNode
}
/** @public */
export function TldrawUiDropdownMenuSub({ id, children }: TLUiDropdownMenuSubProps) {
@ -107,7 +110,7 @@ export function TldrawUiDropdownMenuSub({ id, children }: TLUiDropdownMenuSubPro
}
/** @public */
export type TLUiDropdownMenuSubTriggerProps = {
export interface TLUiDropdownMenuSubTriggerProps {
label: string
id?: string
title?: string
@ -138,7 +141,7 @@ export function TldrawUiDropdownMenuSubTrigger({
}
/** @public */
export type TLUiDropdownMenuSubContentProps = {
export interface TLUiDropdownMenuSubContentProps {
id?: string
alignOffset?: number
sideOffset?: number
@ -172,7 +175,7 @@ export function TldrawUiDropdownMenuSubContent({
}
/** @public */
export type TLUiDropdownMenuGroupProps = {
export interface TLUiDropdownMenuGroupProps {
children: ReactNode
}

Wyświetl plik

@ -4,7 +4,7 @@ import React from 'react'
import { useMenuIsOpen } from '../../hooks/useMenuIsOpen'
/** @public */
export type TLUiPopoverProps = {
export interface TLUiPopoverProps {
id: string
open?: boolean
children: React.ReactNode
@ -40,7 +40,7 @@ export function TldrawUiPopoverTrigger({ children }: TLUiPopoverTriggerProps) {
}
/** @public */
export type TLUiPopoverContentProps = {
export interface TLUiPopoverContentProps {
children: React.ReactNode
side: 'top' | 'bottom' | 'left' | 'right'
align?: 'start' | 'center' | 'end'

Wyświetl plik

@ -11,10 +11,10 @@ import { TldrawUiKbd } from '../TldrawUiKbd'
import { useTldrawUiMenuContext } from './TldrawUiMenuContext'
/** @public */
export type TLUiMenuCheckboxItemProps<
export interface TLUiMenuCheckboxItemProps<
TranslationKey extends string = string,
IconType extends string = string,
> = {
> {
icon?: IconType
id: string
kbd?: string

Wyświetl plik

@ -28,7 +28,7 @@ export function useTldrawUiMenuContext() {
}
/** @public */
export type TLUiMenuContextProviderProps = {
export interface TLUiMenuContextProviderProps {
type: TldrawUiMenuContextType
sourceId: TLUiEventSource
children: React.ReactNode

Wyświetl plik

@ -7,7 +7,7 @@ import { TldrawUiDropdownMenuGroup } from '../TldrawUiDropdownMenu'
import { useTldrawUiMenuContext } from './TldrawUiMenuContext'
/** @public */
export type TLUiMenuGroupProps<TranslationKey extends string = string> = {
export interface TLUiMenuGroupProps<TranslationKey extends string = string> {
id: string
/**
* The label to display on the item. If it's a string, it will be translated. If it's an object, the keys will be used as the language keys and the values will be translated.

Wyświetl plik

@ -16,10 +16,10 @@ import { TldrawUiKbd } from '../TldrawUiKbd'
import { useTldrawUiMenuContext } from './TldrawUiMenuContext'
/** @public */
export type TLUiMenuItemProps<
export interface TLUiMenuItemProps<
TranslationKey extends string = string,
IconType extends string = string,
> = {
> {
id: string
/**
* The icon to display on the item.

Wyświetl plik

@ -20,7 +20,7 @@ import {
import { useTldrawUiMenuContext } from './TldrawUiMenuContext'
/** @public */
export type TLUiMenuSubmenuProps<Translation extends string = string> = {
export interface TLUiMenuSubmenuProps<Translation extends string = string> {
id: string
label?: Translation | { [key: string]: Translation }
disabled?: boolean
@ -103,7 +103,10 @@ export function TldrawUiMenuSubmenu<Translation extends string = string>({
}
/** @private */
export type TLUiContextMenuSubProps = { id: string; children: ReactNode }
export interface TLUiContextMenuSubProps {
id: string
children: ReactNode
}
/** @private */
export function ContextMenuSubWithMenu({ id, children }: TLUiContextMenuSubProps) {

Wyświetl plik

@ -59,7 +59,7 @@ export type TLUiActionsContextType = Record<string, TLUiActionItem>
export const ActionsContext = React.createContext<TLUiActionsContextType | null>(null)
/** @public */
export type ActionsProviderProps = {
export interface ActionsProviderProps {
overrides?: (
editor: Editor,
actions: TLUiActionsContextType,

Wyświetl plik

@ -61,7 +61,7 @@ export type TLUiComponents = Partial<{
const TldrawUiComponentsContext = createContext<TLUiComponents | null>(null)
/** @public */
export type TLUiComponentsProviderProps = {
export interface TLUiComponentsProviderProps {
overrides?: TLUiComponents
children: ReactNode
}

Wyświetl plik

@ -15,7 +15,7 @@ export interface TLUiDialog {
}
/** @public */
export type TLUiDialogsContextType = {
export interface TLUiDialogsContextType {
addDialog: (dialog: Omit<TLUiDialog, 'id'> & { id?: string }) => string
removeDialog: (id: string) => string
updateDialog: (id: string, newDialogData: Partial<TLUiDialog>) => string
@ -27,7 +27,7 @@ export type TLUiDialogsContextType = {
export const DialogsContext = createContext<TLUiDialogsContextType | null>(null)
/** @internal */
export type DialogsProviderProps = {
export interface DialogsProviderProps {
overrides?: (editor: Editor) => TLUiDialogsContextType
children: ReactNode
}

Wyświetl plik

@ -118,7 +118,7 @@ export type TLUiEventContextType = TLUiEventHandler<keyof TLUiEventMap>
export const EventsContext = React.createContext<TLUiEventContextType | null>(null)
/** @public */
export type EventsProviderProps = {
export interface EventsProviderProps {
onEvent?: TLUiEventHandler
children: React.ReactNode
}

Wyświetl plik

@ -26,7 +26,7 @@ export interface TLUiToastAction {
}
/** @public */
export type TLUiToastsContextType = {
export interface TLUiToastsContextType {
addToast: (toast: Omit<TLUiToast, 'id'> & { id?: string }) => string
removeToast: (id: TLUiToast['id']) => string
clearToasts: () => void
@ -37,7 +37,7 @@ export type TLUiToastsContextType = {
export const ToastsContext = createContext<TLUiToastsContextType | null>(null)
/** @internal */
export type ToastsProviderProps = {
export interface ToastsProviderProps {
overrides?: (editor: Editor) => TLUiToastsContextType
children: ReactNode
}

Wyświetl plik

@ -31,7 +31,7 @@ export type TLUiToolsContextType = Record<string, TLUiToolItem>
export const ToolsContext = React.createContext<null | TLUiToolsContextType>(null)
/** @public */
export type TLUiToolsProviderProps = {
export interface TLUiToolsProviderProps {
overrides?: (
editor: Editor,
tools: TLUiToolsContextType,

Wyświetl plik

@ -13,7 +13,7 @@ import { DEFAULT_TRANSLATION } from './defaultTranslation'
export const RTL_LANGUAGES = new Set(['ar', 'fa', 'he', 'ur', 'ku'])
/** @public */
export type TLUiTranslation = {
export interface TLUiTranslation {
readonly locale: string
readonly label: string
readonly messages: Record<TLUiTranslationKey, string>

Wyświetl plik

@ -1,7 +1,7 @@
import { MediaHelpers, assertExists } from '@tldraw/editor'
import { clampToBrowserMaxCanvasSize } from '../../shapes/shared/getBrowserCanvasMaxSize'
type BoxWidthHeight = {
interface BoxWidthHeight {
w: number
h: number
}

Some files were not shown because too many files have changed in this diff Show More