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
This commit is contained in:
alex 2024-05-22 16:55:49 +01:00 committed by GitHub
parent abc8521a71
commit f9ed1bf2c9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
131 changed files with 731 additions and 434 deletions

View file

@ -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: {

View file

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

View file

@ -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
}

View file

@ -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?: {

View file

@ -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/'

View file

@ -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
}

View file

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

View file

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

View file

@ -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
}

View file

@ -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
}

View file

@ -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[]

View file

@ -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>
}

View file

@ -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
}

View file

@ -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

View file

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

View file

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

View file

@ -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

View file

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

View file

@ -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

View file

@ -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

View file

@ -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[]

View file

@ -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
}

View file

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

View file

@ -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

View file

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

View file

@ -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 {

View file

@ -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
}

View file

@ -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;

View file

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

View file

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

View file

@ -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

View file

@ -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) {

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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

View file

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

View file

@ -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

View file

@ -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
}

View file

@ -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
}

View file

@ -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

View file

@ -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

View file

@ -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 }[]
}

View file

@ -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

View file

@ -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

View file

@ -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'

View file

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

View file

@ -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

View file

@ -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 =

View file

@ -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'
}
}

View file

@ -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
}

View file

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

View file

@ -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
}

View file

@ -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

View file

@ -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.

View file

@ -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 }>

View file

@ -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>[]

View file

@ -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> = {

View file

@ -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>

View file

@ -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

View file

@ -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: {

View file

@ -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

View file

@ -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).

View file

@ -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

View file

@ -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
}

View file

@ -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

View file

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

View file

@ -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

View file

@ -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() {

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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) {

View file

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

View file

@ -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) {

View file

@ -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
}

View file

@ -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
}

View file

@ -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'

View file

@ -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

View file

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

View file

@ -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.

View file

@ -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.

View file

@ -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) {

View file

@ -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,

View file

@ -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
}

View file

@ -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
}

View file

@ -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
}

View file

@ -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
}

View file

@ -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,

View file

@ -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>

View file

@ -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