2021-08-13 09:28:09 +00:00
|
|
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
|
|
/* eslint-disable @typescript-eslint/ban-types */
|
2021-08-30 10:44:42 +00:00
|
|
|
import type { TLBinding, TLRenderInfo } from '@tldraw/core'
|
2021-08-13 09:28:09 +00:00
|
|
|
import { TLShape, TLShapeUtil, TLHandle } from '@tldraw/core'
|
2021-08-30 10:44:42 +00:00
|
|
|
import type { TLPage, TLPageState } from '@tldraw/core'
|
2021-08-13 09:28:09 +00:00
|
|
|
import type { StoreApi } from 'zustand'
|
2021-08-30 10:44:42 +00:00
|
|
|
import type { Command, Patch } from 'rko'
|
2021-08-13 09:28:09 +00:00
|
|
|
|
|
|
|
export type TLStore = StoreApi<Data>
|
2021-08-16 14:01:03 +00:00
|
|
|
|
2021-08-13 09:28:09 +00:00
|
|
|
export type TLChange = Data
|
2021-08-10 16:12:55 +00:00
|
|
|
|
2021-08-16 07:49:31 +00:00
|
|
|
export type TLDrawPage = TLPage<TLDrawShape, TLDrawBinding>
|
|
|
|
|
2021-08-10 16:12:55 +00:00
|
|
|
export interface TLDrawDocument {
|
|
|
|
id: string
|
2021-08-16 07:49:31 +00:00
|
|
|
pages: Record<string, TLDrawPage>
|
2021-08-10 16:12:55 +00:00
|
|
|
pageStates: Record<string, TLPageState>
|
|
|
|
}
|
|
|
|
|
2021-08-30 10:44:42 +00:00
|
|
|
export interface TLDrawSettings {
|
|
|
|
isDarkMode: boolean
|
|
|
|
isDebugMode: boolean
|
|
|
|
isPenMode: boolean
|
2021-08-10 16:12:55 +00:00
|
|
|
isReadonlyMode: boolean
|
2021-09-02 20:13:54 +00:00
|
|
|
isZoomSnap: boolean
|
2021-08-10 16:12:55 +00:00
|
|
|
nudgeDistanceSmall: number
|
|
|
|
nudgeDistanceLarge: number
|
|
|
|
}
|
|
|
|
|
2021-08-30 10:44:42 +00:00
|
|
|
export interface TLDrawMeta {
|
|
|
|
isDarkMode: boolean
|
|
|
|
}
|
|
|
|
|
|
|
|
export type TLDrawRenderInfo = TLRenderInfo<TLDrawMeta>
|
|
|
|
|
2021-08-10 16:12:55 +00:00
|
|
|
export interface Data {
|
2021-08-16 14:01:03 +00:00
|
|
|
document: TLDrawDocument
|
2021-08-10 16:12:55 +00:00
|
|
|
settings: TLDrawSettings
|
|
|
|
appState: {
|
2021-08-13 09:28:09 +00:00
|
|
|
selectedStyle: ShapeStyles
|
2021-08-10 16:12:55 +00:00
|
|
|
currentStyle: ShapeStyles
|
|
|
|
currentPageId: string
|
2021-08-13 09:28:09 +00:00
|
|
|
pages: Pick<TLPage<TLDrawShape, TLDrawBinding>, 'id' | 'name' | 'childIndex'>[]
|
|
|
|
hoveredId?: string
|
2021-08-10 16:12:55 +00:00
|
|
|
activeTool: TLDrawShapeType | 'select'
|
|
|
|
activeToolType?: TLDrawToolType | 'select'
|
|
|
|
isToolLocked: boolean
|
|
|
|
isStyleOpen: boolean
|
|
|
|
isEmptyCanvas: boolean
|
2021-08-15 08:49:38 +00:00
|
|
|
status: { current: TLDrawStatus; previous: TLDrawStatus }
|
2021-08-10 16:12:55 +00:00
|
|
|
}
|
|
|
|
}
|
2021-08-17 23:11:00 +00:00
|
|
|
|
2021-08-30 10:44:42 +00:00
|
|
|
export type TLDrawPatch = Patch<Data>
|
2021-08-13 09:28:09 +00:00
|
|
|
|
2021-08-30 10:44:42 +00:00
|
|
|
export type TLDrawCommand = Command<Data>
|
2021-08-13 09:28:09 +00:00
|
|
|
|
2021-08-30 10:44:42 +00:00
|
|
|
export type PagePartial = {
|
|
|
|
shapes: Patch<TLDrawPage['shapes']>
|
|
|
|
bindings: Patch<TLDrawPage['bindings']>
|
2021-08-13 09:28:09 +00:00
|
|
|
}
|
|
|
|
|
2021-08-15 14:35:23 +00:00
|
|
|
export interface SelectHistory {
|
|
|
|
pointer: number
|
|
|
|
stack: string[][]
|
|
|
|
}
|
|
|
|
|
2021-08-13 09:28:09 +00:00
|
|
|
export interface Session {
|
|
|
|
id: string
|
2021-08-15 08:49:38 +00:00
|
|
|
status: TLDrawStatus
|
2021-08-18 07:19:13 +00:00
|
|
|
start: (data: Readonly<Data>, ...args: any[]) => TLDrawPatch | undefined
|
|
|
|
update: (data: Readonly<Data>, ...args: any[]) => TLDrawPatch | undefined
|
2021-08-30 10:44:42 +00:00
|
|
|
complete: (data: Readonly<Data>, ...args: any[]) => TLDrawPatch | TLDrawCommand | undefined
|
2021-08-18 07:19:13 +00:00
|
|
|
cancel: (data: Readonly<Data>, ...args: any[]) => TLDrawPatch | undefined
|
2021-08-13 09:28:09 +00:00
|
|
|
}
|
|
|
|
|
2021-08-15 08:49:38 +00:00
|
|
|
export enum TLDrawStatus {
|
|
|
|
Idle = 'idle',
|
|
|
|
PointingHandle = 'pointingHandle',
|
|
|
|
PointingBounds = 'pointingBounds',
|
|
|
|
PointingBoundsHandle = 'pointingBoundsHandle',
|
|
|
|
TranslatingHandle = 'translatingHandle',
|
|
|
|
Translating = 'translating',
|
|
|
|
Transforming = 'transforming',
|
|
|
|
Rotating = 'rotating',
|
|
|
|
Pinching = 'pinching',
|
|
|
|
Brushing = 'brushing',
|
|
|
|
Creating = 'creating',
|
|
|
|
EditingText = 'editing-text',
|
|
|
|
}
|
2021-08-13 09:28:09 +00:00
|
|
|
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
|
|
export type ParametersExceptFirst<F> = F extends (arg0: any, ...rest: infer R) => any ? R : never
|
2021-08-10 16:12:55 +00:00
|
|
|
|
|
|
|
export enum MoveType {
|
|
|
|
Backward = 'backward',
|
|
|
|
Forward = 'forward',
|
|
|
|
ToFront = 'toFront',
|
|
|
|
ToBack = 'toBack',
|
|
|
|
}
|
|
|
|
|
|
|
|
export enum AlignType {
|
|
|
|
Top = 'top',
|
|
|
|
CenterVertical = 'centerVertical',
|
|
|
|
Bottom = 'bottom',
|
|
|
|
Left = 'left',
|
|
|
|
CenterHorizontal = 'centerHorizontal',
|
|
|
|
Right = 'right',
|
|
|
|
}
|
|
|
|
|
|
|
|
export enum StretchType {
|
|
|
|
Horizontal = 'horizontal',
|
|
|
|
Vertical = 'vertical',
|
|
|
|
}
|
|
|
|
|
|
|
|
export enum DistributeType {
|
|
|
|
Horizontal = 'horizontal',
|
|
|
|
Vertical = 'vertical',
|
|
|
|
}
|
|
|
|
|
|
|
|
export enum FlipType {
|
|
|
|
Horizontal = 'horizontal',
|
|
|
|
Vertical = 'vertical',
|
|
|
|
}
|
2021-08-13 09:28:09 +00:00
|
|
|
|
|
|
|
export enum TLDrawToolType {
|
|
|
|
Draw = 'draw',
|
|
|
|
Bounds = 'bounds',
|
|
|
|
Point = 'point',
|
|
|
|
Handle = 'handle',
|
|
|
|
Points = 'points',
|
|
|
|
Text = 'text',
|
|
|
|
}
|
|
|
|
|
|
|
|
export enum TLDrawShapeType {
|
|
|
|
Ellipse = 'ellipse',
|
|
|
|
Rectangle = 'rectangle',
|
|
|
|
Draw = 'draw',
|
|
|
|
Arrow = 'arrow',
|
|
|
|
Text = 'text',
|
2021-09-02 12:51:39 +00:00
|
|
|
Group = 'group',
|
2021-08-13 09:28:09 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
export enum Decoration {
|
|
|
|
Arrow = 'Arrow',
|
|
|
|
}
|
|
|
|
|
|
|
|
export interface TLDrawBaseShape extends TLShape {
|
|
|
|
style: ShapeStyles
|
|
|
|
type: TLDrawShapeType
|
|
|
|
}
|
|
|
|
|
|
|
|
export interface DrawShape extends TLDrawBaseShape {
|
|
|
|
type: TLDrawShapeType.Draw
|
|
|
|
points: number[][]
|
|
|
|
}
|
|
|
|
|
|
|
|
export interface ArrowShape extends TLDrawBaseShape {
|
|
|
|
type: TLDrawShapeType.Arrow
|
|
|
|
bend: number
|
|
|
|
handles: {
|
|
|
|
start: TLHandle
|
|
|
|
bend: TLHandle
|
|
|
|
end: TLHandle
|
|
|
|
}
|
|
|
|
decorations?: {
|
|
|
|
start?: Decoration
|
|
|
|
end?: Decoration
|
|
|
|
middle?: Decoration
|
|
|
|
}
|
|
|
|
}
|
|
|
|
export interface EllipseShape extends TLDrawBaseShape {
|
|
|
|
type: TLDrawShapeType.Ellipse
|
|
|
|
radius: number[]
|
|
|
|
}
|
|
|
|
|
|
|
|
export interface RectangleShape extends TLDrawBaseShape {
|
|
|
|
type: TLDrawShapeType.Rectangle
|
|
|
|
size: number[]
|
|
|
|
}
|
|
|
|
|
|
|
|
export interface TextShape extends TLDrawBaseShape {
|
|
|
|
type: TLDrawShapeType.Text
|
|
|
|
text: string
|
|
|
|
}
|
|
|
|
|
2021-09-02 12:51:39 +00:00
|
|
|
export interface GroupShape extends TLDrawBaseShape {
|
|
|
|
type: TLDrawShapeType.Group
|
|
|
|
size: number[]
|
|
|
|
children: string[]
|
|
|
|
}
|
|
|
|
|
|
|
|
export type TLDrawShape =
|
|
|
|
| RectangleShape
|
|
|
|
| EllipseShape
|
|
|
|
| DrawShape
|
|
|
|
| ArrowShape
|
|
|
|
| TextShape
|
|
|
|
| GroupShape
|
2021-08-13 09:28:09 +00:00
|
|
|
|
2021-09-11 15:24:03 +00:00
|
|
|
export abstract class TLDrawShapeUtil<
|
|
|
|
T extends TLDrawShape,
|
|
|
|
E extends HTMLElement | SVGElement
|
|
|
|
> extends TLShapeUtil<T, E> {
|
2021-08-13 09:28:09 +00:00
|
|
|
abstract toolType: TLDrawToolType
|
|
|
|
}
|
|
|
|
|
2021-09-11 15:24:03 +00:00
|
|
|
export type TLDrawShapeUtils = Record<
|
|
|
|
TLDrawShapeType,
|
|
|
|
TLDrawShapeUtil<TLDrawShape, HTMLElement | SVGElement>
|
|
|
|
>
|
2021-08-13 09:28:09 +00:00
|
|
|
|
|
|
|
export interface ArrowBinding extends TLBinding {
|
|
|
|
type: 'arrow'
|
|
|
|
handleId: keyof ArrowShape['handles']
|
|
|
|
distance: number
|
|
|
|
point: number[]
|
|
|
|
}
|
|
|
|
|
|
|
|
export type TLDrawBinding = ArrowBinding
|
|
|
|
|
|
|
|
export enum ColorStyle {
|
|
|
|
White = 'White',
|
|
|
|
LightGray = 'LightGray',
|
|
|
|
Gray = 'Gray',
|
|
|
|
Black = 'Black',
|
|
|
|
Green = 'Green',
|
|
|
|
Cyan = 'Cyan',
|
|
|
|
Blue = 'Blue',
|
|
|
|
Indigo = 'Indigo',
|
|
|
|
Violet = 'Violet',
|
|
|
|
Red = 'Red',
|
|
|
|
Orange = 'Orange',
|
|
|
|
Yellow = 'Yellow',
|
|
|
|
}
|
|
|
|
|
|
|
|
export enum SizeStyle {
|
|
|
|
Small = 'Small',
|
|
|
|
Medium = 'Medium',
|
|
|
|
Large = 'Large',
|
|
|
|
}
|
|
|
|
|
|
|
|
export enum DashStyle {
|
|
|
|
Draw = 'Draw',
|
|
|
|
Solid = 'Solid',
|
|
|
|
Dashed = 'Dashed',
|
|
|
|
Dotted = 'Dotted',
|
|
|
|
}
|
|
|
|
|
|
|
|
export enum FontSize {
|
|
|
|
Small = 'Small',
|
|
|
|
Medium = 'Medium',
|
|
|
|
Large = 'Large',
|
|
|
|
ExtraLarge = 'ExtraLarge',
|
|
|
|
}
|
|
|
|
|
|
|
|
export type ShapeStyles = {
|
|
|
|
color: ColorStyle
|
|
|
|
size: SizeStyle
|
|
|
|
dash: DashStyle
|
|
|
|
isFilled?: boolean
|
|
|
|
scale?: number
|
|
|
|
}
|
|
|
|
|
|
|
|
export type PropsOfType<U> = {
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
|
|
[K in keyof TLDrawShape]: TLDrawShape[K] extends any
|
|
|
|
? TLDrawShape[K] extends U
|
|
|
|
? K
|
|
|
|
: never
|
|
|
|
: never
|
|
|
|
}[keyof TLDrawShape]
|
|
|
|
|
|
|
|
export type Theme = 'dark' | 'light'
|
|
|
|
|
|
|
|
export type Difference<A, B, C = A> = A extends B ? never : C
|
|
|
|
|
|
|
|
export type Intersection<A, B, C = A> = A extends B ? C : never
|
|
|
|
|
|
|
|
export type FilteredKeys<T, U> = {
|
|
|
|
[P in keyof T]: T[P] extends U ? P : never
|
|
|
|
}[keyof T]
|
|
|
|
|
|
|
|
export type RequiredKeys<T> = {
|
|
|
|
[K in keyof T]-?: Difference<Record<string, unknown>, Pick<T, K>, K>
|
|
|
|
}[keyof T]
|
|
|
|
|
|
|
|
export type MembersWithRequiredKey<T, U> = {
|
|
|
|
[P in keyof T]: Intersection<U, RequiredKeys<T[P]>, T[P]>
|
|
|
|
}[keyof T]
|
|
|
|
|
|
|
|
export type MappedByType<U extends string, T extends { type: U }> = {
|
|
|
|
[P in T['type']]: T extends any ? (P extends T['type'] ? T : never) : never
|
|
|
|
}
|
|
|
|
|
|
|
|
export type ShapesWithProp<U> = MembersWithRequiredKey<
|
|
|
|
MappedByType<TLDrawShapeType, TLDrawShape>,
|
|
|
|
U
|
|
|
|
>
|