fix types
This commit is contained in:
parent
eaeffae333
commit
3603ec3953
7 changed files with 294 additions and 22 deletions
264
packages/core/src/types.d.ts
vendored
Normal file
264
packages/core/src/types.d.ts
vendored
Normal file
|
@ -0,0 +1,264 @@
|
|||
import type React from 'react';
|
||||
import type { ForwardedRef } from 'react';
|
||||
export declare type Patch<T> = Partial<{
|
||||
[P in keyof T]: T | Partial<T> | Patch<T[P]>;
|
||||
}>;
|
||||
export interface TLPage<T extends TLShape, B extends TLBinding> {
|
||||
id: string;
|
||||
name?: string;
|
||||
childIndex?: number;
|
||||
shapes: Record<string, T>;
|
||||
bindings: Record<string, B>;
|
||||
}
|
||||
export interface TLPageState {
|
||||
id: string;
|
||||
selectedIds: string[];
|
||||
camera: {
|
||||
point: number[];
|
||||
zoom: number;
|
||||
};
|
||||
brush?: TLBounds;
|
||||
pointedId?: string | null;
|
||||
hoveredId?: string | null;
|
||||
editingId?: string | null;
|
||||
bindingId?: string | null;
|
||||
boundsRotation?: number;
|
||||
currentParentId?: string | null;
|
||||
}
|
||||
export interface TLHandle {
|
||||
id: string;
|
||||
index: number;
|
||||
point: number[];
|
||||
canBind?: boolean;
|
||||
bindingId?: string;
|
||||
}
|
||||
export interface TLShape {
|
||||
id: string;
|
||||
type: string;
|
||||
parentId: string;
|
||||
childIndex: number;
|
||||
name: string;
|
||||
point: number[];
|
||||
rotation?: number;
|
||||
children?: string[];
|
||||
handles?: Record<string, TLHandle>;
|
||||
isLocked?: boolean;
|
||||
isHidden?: boolean;
|
||||
isEditing?: boolean;
|
||||
isGenerated?: boolean;
|
||||
isAspectRatioLocked?: boolean;
|
||||
}
|
||||
export declare type TLShapeUtils<T extends TLShape = any, E extends Element = any, M = any, K = any> = Record<string, TLShapeUtil<T, E, M, K>>;
|
||||
export interface TLRenderInfo<T extends TLShape, E = any, M = any> {
|
||||
shape: T;
|
||||
isEditing: boolean;
|
||||
isBinding: boolean;
|
||||
isHovered: boolean;
|
||||
isSelected: boolean;
|
||||
isCurrentParent: boolean;
|
||||
meta: M extends any ? M : never;
|
||||
onShapeChange?: TLCallbacks<T>['onShapeChange'];
|
||||
onShapeBlur?: TLCallbacks<T>['onShapeBlur'];
|
||||
events: {
|
||||
onPointerDown: (e: React.PointerEvent<E>) => void;
|
||||
onPointerUp: (e: React.PointerEvent<E>) => void;
|
||||
onPointerEnter: (e: React.PointerEvent<E>) => void;
|
||||
onPointerMove: (e: React.PointerEvent<E>) => void;
|
||||
onPointerLeave: (e: React.PointerEvent<E>) => void;
|
||||
};
|
||||
}
|
||||
export interface TLShapeProps<T extends TLShape, E = any, M = any> extends TLRenderInfo<T, E, M> {
|
||||
ref: ForwardedRef<E>;
|
||||
shape: T;
|
||||
}
|
||||
export interface TLTool {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
export interface TLBinding<M = any> {
|
||||
id: string;
|
||||
type: string;
|
||||
toId: string;
|
||||
fromId: string;
|
||||
meta: M;
|
||||
}
|
||||
export interface TLTheme {
|
||||
brushFill?: string;
|
||||
brushStroke?: string;
|
||||
selectFill?: string;
|
||||
selectStroke?: string;
|
||||
background?: string;
|
||||
foreground?: string;
|
||||
}
|
||||
export declare type TLWheelEventHandler = (info: TLPointerInfo<string>, e: React.WheelEvent<Element> | WheelEvent) => void;
|
||||
export declare type TLPinchEventHandler = (info: TLPointerInfo<string>, e: React.WheelEvent<Element> | WheelEvent | React.TouchEvent<Element> | TouchEvent | React.PointerEvent<Element> | PointerEventInit) => void;
|
||||
export declare type TLPointerEventHandler = (info: TLPointerInfo<string>, e: React.PointerEvent) => void;
|
||||
export declare type TLCanvasEventHandler = (info: TLPointerInfo<'canvas'>, e: React.PointerEvent) => void;
|
||||
export declare type TLBoundsEventHandler = (info: TLPointerInfo<'bounds'>, e: React.PointerEvent) => void;
|
||||
export declare type TLBoundsHandleEventHandler = (info: TLPointerInfo<TLBoundsCorner | TLBoundsEdge | 'rotate'>, e: React.PointerEvent) => void;
|
||||
export interface TLCallbacks<T extends TLShape> {
|
||||
onPinchStart: TLPinchEventHandler;
|
||||
onPinchEnd: TLPinchEventHandler;
|
||||
onPinch: TLPinchEventHandler;
|
||||
onPan: TLWheelEventHandler;
|
||||
onZoom: TLWheelEventHandler;
|
||||
onPointerMove: TLPointerEventHandler;
|
||||
onPointerUp: TLPointerEventHandler;
|
||||
onPointerDown: TLPointerEventHandler;
|
||||
onPointCanvas: TLCanvasEventHandler;
|
||||
onDoubleClickCanvas: TLCanvasEventHandler;
|
||||
onRightPointCanvas: TLCanvasEventHandler;
|
||||
onDragCanvas: TLCanvasEventHandler;
|
||||
onReleaseCanvas: TLCanvasEventHandler;
|
||||
onPointShape: TLPointerEventHandler;
|
||||
onDoubleClickShape: TLPointerEventHandler;
|
||||
onRightPointShape: TLPointerEventHandler;
|
||||
onDragShape: TLPointerEventHandler;
|
||||
onHoverShape: TLPointerEventHandler;
|
||||
onUnhoverShape: TLPointerEventHandler;
|
||||
onReleaseShape: TLPointerEventHandler;
|
||||
onPointBounds: TLBoundsEventHandler;
|
||||
onDoubleClickBounds: TLBoundsEventHandler;
|
||||
onRightPointBounds: TLBoundsEventHandler;
|
||||
onDragBounds: TLBoundsEventHandler;
|
||||
onHoverBounds: TLBoundsEventHandler;
|
||||
onUnhoverBounds: TLBoundsEventHandler;
|
||||
onReleaseBounds: TLBoundsEventHandler;
|
||||
onPointBoundsHandle: TLBoundsHandleEventHandler;
|
||||
onDoubleClickBoundsHandle: TLBoundsHandleEventHandler;
|
||||
onRightPointBoundsHandle: TLBoundsHandleEventHandler;
|
||||
onDragBoundsHandle: TLBoundsHandleEventHandler;
|
||||
onHoverBoundsHandle: TLBoundsHandleEventHandler;
|
||||
onUnhoverBoundsHandle: TLBoundsHandleEventHandler;
|
||||
onReleaseBoundsHandle: TLBoundsHandleEventHandler;
|
||||
onPointHandle: TLPointerEventHandler;
|
||||
onDoubleClickHandle: TLPointerEventHandler;
|
||||
onRightPointHandle: TLPointerEventHandler;
|
||||
onDragHandle: TLPointerEventHandler;
|
||||
onHoverHandle: TLPointerEventHandler;
|
||||
onUnhoverHandle: TLPointerEventHandler;
|
||||
onReleaseHandle: TLPointerEventHandler;
|
||||
onRenderCountChange: (ids: string[]) => void;
|
||||
onShapeChange: (shape: {
|
||||
id: string;
|
||||
} & Partial<T>) => void;
|
||||
onShapeBlur: () => void;
|
||||
onError: (error: Error) => void;
|
||||
}
|
||||
export interface TLBounds {
|
||||
minX: number;
|
||||
minY: number;
|
||||
maxX: number;
|
||||
maxY: number;
|
||||
width: number;
|
||||
height: number;
|
||||
rotation?: number;
|
||||
}
|
||||
export declare type TLIntersection = {
|
||||
didIntersect: boolean;
|
||||
message: string;
|
||||
points: number[][];
|
||||
};
|
||||
export declare enum TLBoundsEdge {
|
||||
Top = "top_edge",
|
||||
Right = "right_edge",
|
||||
Bottom = "bottom_edge",
|
||||
Left = "left_edge"
|
||||
}
|
||||
export declare enum TLBoundsCorner {
|
||||
TopLeft = "top_left_corner",
|
||||
TopRight = "top_right_corner",
|
||||
BottomRight = "bottom_right_corner",
|
||||
BottomLeft = "bottom_left_corner"
|
||||
}
|
||||
export interface TLPointerInfo<T extends string = string> {
|
||||
target: T;
|
||||
pointerId: number;
|
||||
origin: number[];
|
||||
point: number[];
|
||||
delta: number[];
|
||||
pressure: number;
|
||||
shiftKey: boolean;
|
||||
ctrlKey: boolean;
|
||||
metaKey: boolean;
|
||||
altKey: boolean;
|
||||
}
|
||||
export interface TLKeyboardInfo {
|
||||
origin: number[];
|
||||
point: number[];
|
||||
key: string;
|
||||
keys: string[];
|
||||
shiftKey: boolean;
|
||||
ctrlKey: boolean;
|
||||
metaKey: boolean;
|
||||
altKey: boolean;
|
||||
}
|
||||
export interface TLTransformInfo<T extends TLShape> {
|
||||
type: TLBoundsEdge | TLBoundsCorner;
|
||||
initialShape: T;
|
||||
scaleX: number;
|
||||
scaleY: number;
|
||||
transformOrigin: number[];
|
||||
}
|
||||
export interface TLBezierCurveSegment {
|
||||
start: number[];
|
||||
tangentStart: number[];
|
||||
normalStart: number[];
|
||||
pressureStart: number;
|
||||
end: number[];
|
||||
tangentEnd: number[];
|
||||
normalEnd: number[];
|
||||
pressureEnd: number;
|
||||
}
|
||||
export declare type TLShapeUtil<T extends TLShape, E extends Element, M = any, K = {
|
||||
[key: string]: any;
|
||||
}> = K & {
|
||||
type: T['type'];
|
||||
defaultProps: T;
|
||||
Component(this: TLShapeUtil<T, E, M>, props: TLRenderInfo<T, E, M>, ref: React.ForwardedRef<E>): React.ReactElement<TLRenderInfo<T, E, M>, E['tagName']>;
|
||||
Indicator(this: TLShapeUtil<T, E, M>, props: {
|
||||
shape: T;
|
||||
}): React.ReactElement | null;
|
||||
getBounds(this: TLShapeUtil<T, E, M>, shape: T): TLBounds;
|
||||
refMap: Map<string, React.RefObject<E>>;
|
||||
boundsCache: WeakMap<TLShape, TLBounds>;
|
||||
isAspectRatioLocked: boolean;
|
||||
canEdit: boolean;
|
||||
canBind: boolean;
|
||||
getRotatedBounds(this: TLShapeUtil<T, E, M>, shape: T): TLBounds;
|
||||
hitTest(this: TLShapeUtil<T, E, M>, shape: T, point: number[]): boolean;
|
||||
hitTestBounds(this: TLShapeUtil<T, E, M>, shape: T, bounds: TLBounds): boolean;
|
||||
shouldRender(this: TLShapeUtil<T, E, M>, prev: T, next: T): boolean;
|
||||
getCenter(this: TLShapeUtil<T, E, M>, shape: T): number[];
|
||||
getRef(this: TLShapeUtil<T, E, M>, shape: T): React.RefObject<E>;
|
||||
getBindingPoint<K extends TLShape>(this: TLShapeUtil<T, E, M>, shape: T, fromShape: K, point: number[], origin: number[], direction: number[], padding: number, bindAnywhere: boolean): {
|
||||
point: number[];
|
||||
distance: number;
|
||||
} | undefined;
|
||||
create: (this: TLShapeUtil<T, E, M>, props: {
|
||||
id: string;
|
||||
} & Partial<T>) => T;
|
||||
mutate: (this: TLShapeUtil<T, E, M>, shape: T, props: Partial<T>) => Partial<T>;
|
||||
transform: (this: TLShapeUtil<T, E, M>, shape: T, bounds: TLBounds, info: TLTransformInfo<T>) => Partial<T> | void;
|
||||
transformSingle: (this: TLShapeUtil<T, E, M>, shape: T, bounds: TLBounds, info: TLTransformInfo<T>) => Partial<T> | void;
|
||||
updateChildren: <K extends TLShape>(this: TLShapeUtil<T, E, M>, shape: T, children: K[]) => Partial<K>[] | void;
|
||||
onChildrenChange: (this: TLShapeUtil<T, E, M>, shape: T, children: TLShape[]) => Partial<T> | void;
|
||||
onBindingChange: (this: TLShapeUtil<T, E, M>, shape: T, binding: TLBinding, target: TLShape, targetBounds: TLBounds, center: number[]) => Partial<T> | void;
|
||||
onHandleChange: (this: TLShapeUtil<T, E, M>, shape: T, handle: Partial<T['handles']>, info: Partial<TLPointerInfo>) => Partial<T> | void;
|
||||
onRightPointHandle: (this: TLShapeUtil<T, E, M>, shape: T, handle: Partial<T['handles']>, info: Partial<TLPointerInfo>) => Partial<T> | void;
|
||||
onDoubleClickHandle: (this: TLShapeUtil<T, E, M>, shape: T, handle: Partial<T['handles']>, info: Partial<TLPointerInfo>) => Partial<T> | void;
|
||||
onDoubleClickBoundsHandle: (this: TLShapeUtil<T, E, M>, shape: T) => Partial<T> | void;
|
||||
onSessionComplete: (this: TLShapeUtil<T, E, M>, shape: T) => Partial<T> | void;
|
||||
onStyleChange: (this: TLShapeUtil<T, E, M>, shape: T) => Partial<T> | void;
|
||||
_Component: React.ForwardRefExoticComponent<any>;
|
||||
};
|
||||
export interface IShapeTreeNode<T extends TLShape, M = any> {
|
||||
shape: T;
|
||||
children?: IShapeTreeNode<TLShape, M>[];
|
||||
isEditing: boolean;
|
||||
isBinding: boolean;
|
||||
isHovered: boolean;
|
||||
isSelected: boolean;
|
||||
isCurrentParent: boolean;
|
||||
meta?: M extends any ? M : never;
|
||||
}
|
|
@ -419,13 +419,11 @@ export interface IShapeTreeNode<T extends TLShape, M = any> {
|
|||
/* Utility Types */
|
||||
/* -------------------------------------------------- */
|
||||
|
||||
/** @internal */
|
||||
export type MappedByType<K extends string, T extends { type: K }> = {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
[P in T['type']]: T extends any ? (P extends T['type'] ? T : never) : never
|
||||
}
|
||||
|
||||
/** @internal */
|
||||
export type RequiredKeys<T> = {
|
||||
[K in keyof T]-?: Record<string, unknown> extends Pick<T, K> ? never : K
|
||||
}[keyof T]
|
||||
|
|
|
@ -13,8 +13,14 @@
|
|||
"compilerOptions": {
|
||||
"composite": false,
|
||||
"incremental": false,
|
||||
"declarationMap": false,
|
||||
"sourceMap": false,
|
||||
"emitDeclarationOnly": true
|
||||
"declarationMap": true,
|
||||
"sourceMap": true,
|
||||
"emitDeclarationOnly": true,
|
||||
"paths": {
|
||||
"+*": ["./*"],
|
||||
"@tldraw/vec": ["../vec"],
|
||||
"@tldraw/intersect": ["../intersect"]
|
||||
}
|
||||
},
|
||||
"references": [{ "path": "../vec" }, { "path": "../intersect" }]
|
||||
}
|
||||
|
|
|
@ -15,6 +15,10 @@
|
|||
"incremental": false,
|
||||
"declarationMap": false,
|
||||
"sourceMap": false,
|
||||
"emitDeclarationOnly": true
|
||||
"emitDeclarationOnly": true,
|
||||
"paths": {
|
||||
"@tldraw/vec": ["../vec"]
|
||||
}
|
||||
},
|
||||
"references": [{ "path": "../vec" }]
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
/* eslint-disable @typescript-eslint/no-non-null-assertion */
|
||||
import * as React from 'react'
|
||||
import { HTMLContainer, TLBounds, Utils, TLTransformInfo, ShapeUtil } from '@tldraw/core'
|
||||
import { HTMLContainer, TLBounds, Utils, ShapeUtil } from '@tldraw/core'
|
||||
import { Vec } from '@tldraw/vec'
|
||||
import { getShapeStyle, getFontStyle, defaultStyle } from '~shape/shape-styles'
|
||||
import { TextShape, TLDrawShapeType, TLDrawToolType, TLDrawMeta } from '~types'
|
||||
|
@ -227,11 +227,7 @@ export const Text = new ShapeUtil<TextShape, HTMLDivElement, TLDrawMeta>(() => (
|
|||
return Utils.translateBounds(bounds, shape.point)
|
||||
},
|
||||
|
||||
transform(
|
||||
_shape,
|
||||
bounds: TLBounds,
|
||||
{ initialShape, scaleX, scaleY }: TLTransformInfo<TextShape>
|
||||
) {
|
||||
transform(_shape, bounds, { initialShape, scaleX, scaleY }) {
|
||||
const {
|
||||
rotation = 0,
|
||||
style: { scale = 1 },
|
||||
|
@ -250,11 +246,7 @@ export const Text = new ShapeUtil<TextShape, HTMLDivElement, TLDrawMeta>(() => (
|
|||
}
|
||||
},
|
||||
|
||||
transformSingle(
|
||||
_shape,
|
||||
bounds: TLBounds,
|
||||
{ initialShape, scaleX, scaleY }: TLTransformInfo<TextShape>
|
||||
) {
|
||||
transformSingle(_shape, bounds, { initialShape, scaleX, scaleY }) {
|
||||
const {
|
||||
style: { scale = 1 },
|
||||
} = initialShape
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
import type { Data, TLDrawCommand } from '~types'
|
||||
import { TLDR } from '~state/tldr'
|
||||
import { TLBoundsEdge } from '~../../core/src/types'
|
||||
|
||||
export function resetBounds(data: Data, ids: string[], pageId: string): TLDrawCommand {
|
||||
const { before, after } = TLDR.mutateShapes(
|
||||
|
|
|
@ -11,10 +11,19 @@
|
|||
"docs"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"rootDir": "src",
|
||||
"baseUrl": "src",
|
||||
"composite": false,
|
||||
"incremental": false,
|
||||
"declarationMap": false,
|
||||
"sourceMap": false,
|
||||
"emitDeclarationOnly": true
|
||||
"emitDeclarationOnly": true,
|
||||
"paths": {
|
||||
"~*": ["./*"],
|
||||
"@tldraw/core": ["../core"],
|
||||
"@tldraw/vec": ["../vec"],
|
||||
"@tldraw/intersect": ["../intersect"]
|
||||
}
|
||||
},
|
||||
"references": [{ "path": "../vec" }, { "path": "../intersect" }, { "path": "../core" }]
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue