init: the first public commit for AFFiNE
This commit is contained in:
DarkSky committed
commit
e3e3741393
1451 files changed
+108124
No files matched your search
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"presets": [
|
||||
[
|
||||
"@nrwl/react/babel",
|
||||
{
|
||||
"runtime": "automatic",
|
||||
"useBuiltIns": "usage"
|
||||
}
|
||||
]
|
||||
],
|
||||
"plugins": []
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
|
||||
"ignorePatterns": ["!**/*"],
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
|
||||
"rules": {}
|
||||
},
|
||||
{
|
||||
"files": ["*.ts", "*.tsx"],
|
||||
"rules": {}
|
||||
},
|
||||
{
|
||||
"files": ["*.js", "*.jsx"],
|
||||
"rules": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
# components-board-types
|
||||
|
||||
This library was generated with [Nx](https://nx.dev).
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `nx test components-board-types` to execute the unit tests via [Jest](https://jestjs.io).
|
||||
@@ -0,0 +1,10 @@
|
||||
/* eslint-disable */
|
||||
export default {
|
||||
displayName: 'components-board-types',
|
||||
preset: '../../../jest.preset.js',
|
||||
transform: {
|
||||
'^.+\\.[tj]sx?$': 'babel-jest',
|
||||
},
|
||||
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
|
||||
coverageDirectory: '../../../coverage/libs/components/board-types',
|
||||
};
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "@toeverything/components/board-types",
|
||||
"version": "0.0.1",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@tldraw/core": "^1.12.0",
|
||||
"@tldraw/intersect": "^1.7.1",
|
||||
"@tldraw/vec": "^1.7.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
{
|
||||
"$schema": "../../../node_modules/nx/schemas/project-schema.json",
|
||||
"sourceRoot": "libs/components/board-types/src",
|
||||
"projectType": "library",
|
||||
"tags": ["components"],
|
||||
"targets": {
|
||||
"build": {
|
||||
"executor": "@nrwl/web:rollup",
|
||||
"outputs": ["{options.outputPath}"],
|
||||
"options": {
|
||||
"outputPath": "dist/libs/components/board-types",
|
||||
"tsConfig": "libs/components/board-types/tsconfig.lib.json",
|
||||
"project": "libs/components/board-types/package.json",
|
||||
"entryFile": "libs/components/board-types/src/index.ts",
|
||||
"external": ["react/jsx-runtime"],
|
||||
"rollupConfig": "@nrwl/react/plugins/bundle-rollup",
|
||||
"compiler": "babel",
|
||||
"assets": [
|
||||
{
|
||||
"glob": "libs/components/board-types/README.md",
|
||||
"input": ".",
|
||||
"output": "."
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"executor": "@nrwl/linter:eslint",
|
||||
"outputs": ["{options.outputFile}"],
|
||||
"options": {
|
||||
"lintFilePatterns": [
|
||||
"libs/components/board-types/**/*.{ts,tsx,js,jsx}"
|
||||
]
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"executor": "@nrwl/jest:jest",
|
||||
"outputs": ["coverage/libs/components/board-types"],
|
||||
"options": {
|
||||
"jestConfig": "libs/components/board-types/jest.config.ts",
|
||||
"passWithNoTests": true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
import type { Easing } from './types';
|
||||
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
export const LETTER_SPACING = '-0.03em';
|
||||
export const LINE_HEIGHT = 1;
|
||||
export const GRID_SIZE = 8;
|
||||
export const SVG_EXPORT_PADDING = 16;
|
||||
export const BINDING_DISTANCE = 16;
|
||||
export const CLONING_DISTANCE = 32;
|
||||
export const FIT_TO_SCREEN_PADDING = 128;
|
||||
export const SNAP_DISTANCE = 5;
|
||||
export const EMPTY_ARRAY = [] as any[];
|
||||
export const SLOW_SPEED = 10;
|
||||
export const VERY_SLOW_SPEED = 2.5;
|
||||
export const GHOSTED_OPACITY = 0.3;
|
||||
export const DEAD_ZONE = 3;
|
||||
export const LABEL_POINT = [0.5, 0.5];
|
||||
|
||||
export const PI2 = Math.PI * 2;
|
||||
|
||||
export const EASINGS: Record<Easing, (t: number) => number> = {
|
||||
linear: t => t,
|
||||
easeInQuad: t => t * t,
|
||||
easeOutQuad: t => t * (2 - t),
|
||||
easeInOutQuad: t => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),
|
||||
easeInCubic: t => t * t * t,
|
||||
easeOutCubic: t => --t * t * t + 1,
|
||||
easeInOutCubic: t =>
|
||||
t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
|
||||
easeInQuart: t => t * t * t * t,
|
||||
easeOutQuart: t => 1 - --t * t * t * t,
|
||||
easeInOutQuart: t =>
|
||||
t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t,
|
||||
easeInQuint: t => t * t * t * t * t,
|
||||
easeOutQuint: t => 1 + --t * t * t * t * t,
|
||||
easeInOutQuint: t =>
|
||||
t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t,
|
||||
easeInSine: t => 1 - Math.cos((t * Math.PI) / 2),
|
||||
easeOutSine: t => Math.sin((t * Math.PI) / 2),
|
||||
easeInOutSine: t => -(Math.cos(Math.PI * t) - 1) / 2,
|
||||
easeInExpo: t => (t <= 0 ? 0 : Math.pow(2, 10 * t - 10)),
|
||||
easeOutExpo: t => (t >= 1 ? 1 : 1 - Math.pow(2, -10 * t)),
|
||||
easeInOutExpo: t =>
|
||||
t <= 0
|
||||
? 0
|
||||
: t >= 1
|
||||
? 1
|
||||
: t < 0.5
|
||||
? Math.pow(2, 20 * t - 10) / 2
|
||||
: (2 - Math.pow(2, -20 * t + 10)) / 2,
|
||||
};
|
||||
|
||||
export const EASING_STRINGS: Record<Easing, string> = {
|
||||
linear: `(t) => t`,
|
||||
easeInQuad: `(t) => t * t`,
|
||||
easeOutQuad: `(t) => t * (2 - t)`,
|
||||
easeInOutQuad: `(t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t)`,
|
||||
easeInCubic: `(t) => t * t * t`,
|
||||
easeOutCubic: `(t) => --t * t * t + 1`,
|
||||
easeInOutCubic: `(t) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1`,
|
||||
easeInQuart: `(t) => t * t * t * t`,
|
||||
easeOutQuart: `(t) => 1 - --t * t * t * t`,
|
||||
easeInOutQuart: `(t) => t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t`,
|
||||
easeInQuint: `(t) => t * t * t * t * t`,
|
||||
easeOutQuint: `(t) => 1 + --t * t * t * t * t`,
|
||||
easeInOutQuint: `(t) => t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t`,
|
||||
easeInSine: `(t) => 1 - Math.cos((t * Math.PI) / 2)`,
|
||||
easeOutSine: `(t) => Math.sin((t * Math.PI) / 2)`,
|
||||
easeInOutSine: `(t) => -(Math.cos(Math.PI * t) - 1) / 2`,
|
||||
easeInExpo: `(t) => (t <= 0 ? 0 : Math.pow(2, 10 * t - 10))`,
|
||||
easeOutExpo: `(t) => (t >= 1 ? 1 : 1 - Math.pow(2, -10 * t))`,
|
||||
easeInOutExpo: `(t) => t <= 0 ? 0 : t >= 1 ? 1 : t < 0.5 ? Math.pow(2, 20 * t - 10) / 2 : (2 - Math.pow(2, -20 * t + 10)) / 2`,
|
||||
};
|
||||
|
||||
export const USER_COLORS = [
|
||||
'#EC5E41',
|
||||
'#F2555A',
|
||||
'#F04F88',
|
||||
'#E34BA9',
|
||||
'#BD54C6',
|
||||
'#9D5BD2',
|
||||
'#7B66DC',
|
||||
'#02B1CC',
|
||||
'#11B3A3',
|
||||
'#39B178',
|
||||
'#55B467',
|
||||
'#FF802B',
|
||||
];
|
||||
|
||||
export const isSafari =
|
||||
typeof Window === 'undefined'
|
||||
? false
|
||||
: /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
|
||||
|
||||
export const IMAGE_EXTENSIONS = ['.png', '.svg', '.jpg', '.jpeg', '.gif'];
|
||||
|
||||
export const VIDEO_EXTENSIONS = isSafari ? [] : ['.mp4', '.webm'];
|
||||
@@ -0,0 +1,3 @@
|
||||
export * from './types';
|
||||
export * from './constants';
|
||||
export * from './session';
|
||||
@@ -0,0 +1,35 @@
|
||||
import { TLPerformanceMode } from '@tldraw/core';
|
||||
import { TDSnapshot, Patch } from './types';
|
||||
|
||||
export enum SessionType {
|
||||
Transform = 'transform',
|
||||
Translate = 'translate',
|
||||
TransformSingle = 'transformSingle',
|
||||
Brush = 'brush',
|
||||
Arrow = 'arrow',
|
||||
Draw = 'draw',
|
||||
Laser = 'laser',
|
||||
Erase = 'erase',
|
||||
Rotate = 'rotate',
|
||||
Handle = 'handle',
|
||||
Grid = 'grid',
|
||||
}
|
||||
|
||||
export interface Command<T extends { [key: string]: any }> {
|
||||
id?: string;
|
||||
before: Patch<T>;
|
||||
after: Patch<T>;
|
||||
}
|
||||
|
||||
export type TldrawPatch = Patch<TDSnapshot>;
|
||||
|
||||
export type TldrawCommand = Command<TDSnapshot>;
|
||||
|
||||
export abstract class BaseSessionType {
|
||||
abstract type: SessionType;
|
||||
abstract performanceMode: TLPerformanceMode | undefined;
|
||||
abstract start: () => TldrawPatch | undefined;
|
||||
abstract update: () => TldrawPatch | undefined;
|
||||
abstract complete: () => TldrawPatch | TldrawCommand | undefined;
|
||||
abstract cancel: () => TldrawPatch | undefined;
|
||||
}
|
||||
@@ -0,0 +1,636 @@
|
||||
/* eslint-disable max-lines */
|
||||
import type {
|
||||
TLPage,
|
||||
TLUser,
|
||||
TLPageState,
|
||||
TLBinding,
|
||||
TLBoundsCorner,
|
||||
TLBoundsEdge,
|
||||
TLShape,
|
||||
TLHandle,
|
||||
TLSnapLine,
|
||||
TLPinchEventHandler,
|
||||
TLKeyboardEventHandler,
|
||||
TLPointerEventHandler,
|
||||
TLWheelEventHandler,
|
||||
TLCanvasEventHandler,
|
||||
TLBoundsEventHandler,
|
||||
TLBoundsHandleEventHandler,
|
||||
TLShapeBlurHandler,
|
||||
TLShapeCloneHandler,
|
||||
TLAsset,
|
||||
} from '@tldraw/core';
|
||||
|
||||
/* -------------------------------------------------- */
|
||||
/* App */
|
||||
/* -------------------------------------------------- */
|
||||
|
||||
// A base class for all classes that handle events from the Renderer,
|
||||
// including TDApp and all Tools.
|
||||
export class TDEventHandler {
|
||||
onPinchStart?: TLPinchEventHandler;
|
||||
onPinchEnd?: TLPinchEventHandler;
|
||||
onPinch?: TLPinchEventHandler;
|
||||
onKeyDown?: TLKeyboardEventHandler;
|
||||
onKeyUp?: TLKeyboardEventHandler;
|
||||
onPointerMove?: TLPointerEventHandler;
|
||||
onPointerUp?: TLPointerEventHandler;
|
||||
onPan?: TLWheelEventHandler;
|
||||
onZoom?: TLWheelEventHandler;
|
||||
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;
|
||||
onShapeBlur?: TLShapeBlurHandler;
|
||||
onShapeClone?: TLShapeCloneHandler;
|
||||
}
|
||||
|
||||
// The shape of the TldrawApp's React (zustand) store
|
||||
export interface TDSnapshot {
|
||||
settings: {
|
||||
isCadSelectMode: boolean;
|
||||
isDarkMode: boolean;
|
||||
isDebugMode: boolean;
|
||||
isPenMode: boolean;
|
||||
isReadonlyMode: boolean;
|
||||
isZoomSnap: boolean;
|
||||
keepStyleMenuOpen: boolean;
|
||||
nudgeDistanceSmall: number;
|
||||
nudgeDistanceLarge: number;
|
||||
isFocusMode: boolean;
|
||||
isSnapping: boolean;
|
||||
showRotateHandles: boolean;
|
||||
showBindingHandles: boolean;
|
||||
showCloneHandles: boolean;
|
||||
showGrid: boolean;
|
||||
};
|
||||
appState: {
|
||||
currentStyle: ShapeStyles;
|
||||
currentPageId: string;
|
||||
hoveredId?: string;
|
||||
activeTool: TDToolType;
|
||||
isToolLocked: boolean;
|
||||
isEmptyCanvas: boolean;
|
||||
isMenuOpen: boolean;
|
||||
status: string;
|
||||
snapLines: TLSnapLine[];
|
||||
laserLine: number[][];
|
||||
isLoading: boolean;
|
||||
disableAssets: boolean;
|
||||
selectByContain?: boolean;
|
||||
};
|
||||
document: TDDocument;
|
||||
room?: {
|
||||
id: string;
|
||||
userId: string;
|
||||
users: Record<string, TDUser>;
|
||||
};
|
||||
}
|
||||
|
||||
// The shape of the files stored in JSON
|
||||
export interface TDFile {
|
||||
name: string;
|
||||
fileHandle: FileSystemHandle | null;
|
||||
document: TDDocument;
|
||||
assets: Record<string, unknown>;
|
||||
}
|
||||
|
||||
// The shape of the Tldraw document
|
||||
export interface TDDocument {
|
||||
id: string;
|
||||
name: string;
|
||||
version: number;
|
||||
pages: Record<string, TDPage>;
|
||||
pageStates: Record<string, TLPageState>;
|
||||
assets: TDAssets;
|
||||
}
|
||||
|
||||
// The shape of a single page in the Tldraw document
|
||||
export type TDPage = TLPage<TDShape, TDBinding>;
|
||||
|
||||
// A partial of a TDPage, used for commands / patches
|
||||
export type PagePartial = {
|
||||
shapes: Patch<TDPage['shapes']>;
|
||||
bindings: Patch<TDPage['bindings']>;
|
||||
};
|
||||
|
||||
// The meta information passed to TDShapeUtil components
|
||||
export interface TDMeta {
|
||||
isDarkMode: boolean;
|
||||
app: {
|
||||
useStore: () => TDSnapshot;
|
||||
};
|
||||
}
|
||||
|
||||
// The type of info given to shapes when transforming
|
||||
export interface TransformInfo<T extends TLShape> {
|
||||
type: TLBoundsEdge | TLBoundsCorner;
|
||||
initialShape: T;
|
||||
scaleX: number;
|
||||
scaleY: number;
|
||||
transformOrigin: number[];
|
||||
}
|
||||
|
||||
// The status of a TDUser
|
||||
export enum TDUserStatus {
|
||||
Idle = 'idle',
|
||||
Connecting = 'connecting',
|
||||
Connected = 'connected',
|
||||
Disconnected = 'disconnected',
|
||||
}
|
||||
|
||||
// A TDUser, for multiplayer rooms
|
||||
export interface TDUser extends TLUser<TDShape> {
|
||||
activeShapes: TDShape[];
|
||||
status: TDUserStatus;
|
||||
}
|
||||
|
||||
export type Theme = 'dark' | 'light';
|
||||
|
||||
export enum TDStatus {
|
||||
Idle = 'idle',
|
||||
PointingHandle = 'pointingHandle',
|
||||
PointingBounds = 'pointingBounds',
|
||||
PointingBoundsHandle = 'pointingBoundsHandle',
|
||||
TranslatingLabel = 'translatingLabel',
|
||||
TranslatingHandle = 'translatingHandle',
|
||||
Translating = 'translating',
|
||||
Transforming = 'transforming',
|
||||
Rotating = 'rotating',
|
||||
Pinching = 'pinching',
|
||||
Brushing = 'brushing',
|
||||
Creating = 'creating',
|
||||
EditingText = 'editing-text',
|
||||
}
|
||||
|
||||
export type TDToolType =
|
||||
| 'select'
|
||||
| 'erase'
|
||||
| TDShapeType.Draw
|
||||
| TDShapeType.Pencil
|
||||
| TDShapeType.Highlight
|
||||
| TDShapeType.Laser
|
||||
| TDShapeType.Ellipse
|
||||
| TDShapeType.Rectangle
|
||||
| TDShapeType.Triangle
|
||||
| TDShapeType.Hexagon
|
||||
| TDShapeType.Pentagram
|
||||
| TDShapeType.Line
|
||||
| TDShapeType.Arrow
|
||||
| TDShapeType.WhiteArrow
|
||||
| TDShapeType.Editor
|
||||
| TDShapeType.Frame
|
||||
| TDShapeType.HandDraw;
|
||||
|
||||
export type Easing =
|
||||
| 'linear'
|
||||
| 'easeInQuad'
|
||||
| 'easeOutQuad'
|
||||
| 'easeInOutQuad'
|
||||
| 'easeInCubic'
|
||||
| 'easeOutCubic'
|
||||
| 'easeInOutCubic'
|
||||
| 'easeInQuart'
|
||||
| 'easeOutQuart'
|
||||
| 'easeInOutQuart'
|
||||
| 'easeInQuint'
|
||||
| 'easeOutQuint'
|
||||
| 'easeInOutQuint'
|
||||
| 'easeInSine'
|
||||
| 'easeOutSine'
|
||||
| 'easeInOutSine'
|
||||
| 'easeInExpo'
|
||||
| 'easeOutExpo'
|
||||
| 'easeInOutExpo';
|
||||
|
||||
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',
|
||||
}
|
||||
|
||||
/* -------------------------------------------------- */
|
||||
/* Shapes */
|
||||
/* -------------------------------------------------- */
|
||||
|
||||
export enum TDShapeType {
|
||||
Ellipse = 'ellipse',
|
||||
Rectangle = 'rectangle',
|
||||
Triangle = 'triangle',
|
||||
Pentagram = 'pentagram',
|
||||
Hexagon = 'hexagon',
|
||||
Draw = 'draw',
|
||||
Pencil = 'pencil',
|
||||
Laser = 'laser',
|
||||
Highlight = 'highlight',
|
||||
Arrow = 'arrow',
|
||||
Line = 'line',
|
||||
Group = 'group',
|
||||
Image = 'image',
|
||||
Video = 'video',
|
||||
Editor = 'editor',
|
||||
WhiteArrow = 'white-arrow',
|
||||
HandDraw = 'hand-draw',
|
||||
Frame = 'frame',
|
||||
}
|
||||
|
||||
export enum Decoration {
|
||||
Arrow = 'arrow',
|
||||
}
|
||||
|
||||
export interface TDBaseShape extends TLShape {
|
||||
style: ShapeStyles;
|
||||
type: TDShapeType;
|
||||
label?: string;
|
||||
affineId?: string;
|
||||
handles?: Record<string, TDHandle>;
|
||||
workspace: string;
|
||||
}
|
||||
|
||||
export interface DrawShape extends TDBaseShape {
|
||||
type: TDShapeType.Draw;
|
||||
points: number[][];
|
||||
isComplete: boolean;
|
||||
}
|
||||
|
||||
// The extended handle (used for arrows)
|
||||
export interface TDHandle extends TLHandle {
|
||||
canBind?: boolean;
|
||||
bindingId?: string;
|
||||
}
|
||||
|
||||
export interface RectangleShape extends TDBaseShape {
|
||||
type: TDShapeType.Rectangle;
|
||||
size: number[];
|
||||
label?: string;
|
||||
labelPoint?: number[];
|
||||
}
|
||||
|
||||
export interface FrameShape extends TDBaseShape {
|
||||
type: TDShapeType.Frame;
|
||||
size: number[];
|
||||
label?: string;
|
||||
labelPoint?: number[];
|
||||
}
|
||||
|
||||
export interface EllipseShape extends TDBaseShape {
|
||||
type: TDShapeType.Ellipse;
|
||||
radius: number[];
|
||||
label?: string;
|
||||
labelPoint?: number[];
|
||||
}
|
||||
|
||||
export interface TriangleShape extends TDBaseShape {
|
||||
type: TDShapeType.Triangle;
|
||||
size: number[];
|
||||
label?: string;
|
||||
labelPoint?: number[];
|
||||
}
|
||||
|
||||
export interface HexagonShape extends TDBaseShape {
|
||||
type: TDShapeType.Hexagon;
|
||||
size: number[];
|
||||
label?: string;
|
||||
labelPoint?: number[];
|
||||
}
|
||||
export interface PentagramShape extends TDBaseShape {
|
||||
type: TDShapeType.Pentagram;
|
||||
size: number[];
|
||||
label?: string;
|
||||
labelPoint?: number[];
|
||||
}
|
||||
export interface WhiteArrowShape extends TDBaseShape {
|
||||
type: TDShapeType.WhiteArrow;
|
||||
size: number[];
|
||||
label?: string;
|
||||
labelPoint?: number[];
|
||||
}
|
||||
// The shape created with the arrow tool
|
||||
export interface ArrowShape extends TDBaseShape {
|
||||
type: TDShapeType.Arrow;
|
||||
bend: number;
|
||||
handles: {
|
||||
start: TDHandle;
|
||||
bend: TDHandle;
|
||||
end: TDHandle;
|
||||
};
|
||||
decorations?: {
|
||||
start?: Decoration;
|
||||
end?: Decoration;
|
||||
middle?: Decoration;
|
||||
};
|
||||
label?: string;
|
||||
labelPoint?: number[];
|
||||
}
|
||||
|
||||
export interface ArrowBinding extends TLBinding {
|
||||
handleId: keyof ArrowShape['handles'];
|
||||
distance: number;
|
||||
point: number[];
|
||||
}
|
||||
|
||||
export type TDBinding = ArrowBinding;
|
||||
|
||||
export interface ImageShape extends TDBaseShape {
|
||||
type: TDShapeType.Image;
|
||||
size: number[];
|
||||
assetId: string;
|
||||
}
|
||||
|
||||
export interface VideoShape extends TDBaseShape {
|
||||
type: TDShapeType.Video;
|
||||
size: number[];
|
||||
assetId: string;
|
||||
isPlaying: boolean;
|
||||
currentTime: number;
|
||||
}
|
||||
|
||||
// The shape created when multiple shapes are grouped
|
||||
export interface GroupShape extends TDBaseShape {
|
||||
type: TDShapeType.Group;
|
||||
size: number[];
|
||||
children: string[];
|
||||
}
|
||||
|
||||
export interface EditorShape extends TDBaseShape {
|
||||
type: TDShapeType.Editor;
|
||||
rootBlockId: string;
|
||||
/**
|
||||
* size: [width, height]
|
||||
* height dynamic calculation
|
||||
*/
|
||||
size: number[];
|
||||
}
|
||||
|
||||
// A union of all shapes
|
||||
export type TDShape =
|
||||
| RectangleShape
|
||||
| EllipseShape
|
||||
| TriangleShape
|
||||
| HexagonShape
|
||||
| PentagramShape
|
||||
| WhiteArrowShape
|
||||
| DrawShape
|
||||
| ArrowShape
|
||||
| GroupShape
|
||||
| ImageShape
|
||||
| VideoShape
|
||||
| FrameShape
|
||||
| EditorShape;
|
||||
|
||||
/* ------------------ Shape Styles ------------------ */
|
||||
|
||||
export type ColorStyle = string;
|
||||
|
||||
export enum FontSizeStyle {
|
||||
h1 = 28,
|
||||
h2 = 24,
|
||||
h3 = 20,
|
||||
body = 16,
|
||||
}
|
||||
|
||||
export enum StrokeWidth {
|
||||
s1 = 2,
|
||||
s2 = 4,
|
||||
s3 = 6,
|
||||
s4 = 8,
|
||||
s5 = 10,
|
||||
s6 = 12,
|
||||
}
|
||||
|
||||
export enum DashStyle {
|
||||
Draw = 'draw',
|
||||
Solid = 'solid',
|
||||
Dashed = 'dashed',
|
||||
Dotted = 'dotted',
|
||||
None = 'none',
|
||||
}
|
||||
|
||||
export enum FontSize {
|
||||
Small = 'small',
|
||||
Medium = 'medium',
|
||||
Large = 'large',
|
||||
ExtraLarge = 'extraLarge',
|
||||
}
|
||||
|
||||
export enum AlignStyle {
|
||||
Start = 'start',
|
||||
Middle = 'middle',
|
||||
End = 'end',
|
||||
Justify = 'justify',
|
||||
}
|
||||
|
||||
export enum FontStyle {
|
||||
Script = 'script',
|
||||
Sans = 'sans',
|
||||
Serif = 'erif',
|
||||
Mono = 'mono',
|
||||
}
|
||||
|
||||
export type ShapeStyles = {
|
||||
/**
|
||||
* stroke color, border color, line color
|
||||
*/
|
||||
stroke: string;
|
||||
/**
|
||||
* stroke width
|
||||
*/
|
||||
strokeWidth: StrokeWidth;
|
||||
/**
|
||||
* fill color
|
||||
*/
|
||||
fill: string;
|
||||
// color: ColorStyle;
|
||||
fontSize: FontSizeStyle;
|
||||
dash: DashStyle;
|
||||
font?: FontStyle;
|
||||
textAlign?: AlignStyle;
|
||||
isFilled?: boolean;
|
||||
scale?: number;
|
||||
};
|
||||
|
||||
export enum TDAssetType {
|
||||
Image = 'image',
|
||||
Video = 'video',
|
||||
}
|
||||
|
||||
export interface TDImageAsset extends TLAsset {
|
||||
type: TDAssetType.Image;
|
||||
fileName: string;
|
||||
src: string;
|
||||
size: number[];
|
||||
}
|
||||
|
||||
export interface TDVideoAsset extends TLAsset {
|
||||
type: TDAssetType.Video;
|
||||
fileName: string;
|
||||
src: string;
|
||||
size: number[];
|
||||
}
|
||||
|
||||
export type TDAsset = TDImageAsset | TDVideoAsset;
|
||||
|
||||
export type TDAssets = Record<string, TDAsset>;
|
||||
|
||||
/* -------------------------------------------------- */
|
||||
/* Export */
|
||||
/* -------------------------------------------------- */
|
||||
|
||||
export enum TDExportType {
|
||||
PNG = 'png',
|
||||
JPG = 'jpeg',
|
||||
WEBP = 'webp',
|
||||
SVG = 'svg',
|
||||
JSON = 'json',
|
||||
}
|
||||
|
||||
export interface TDExport {
|
||||
name: string;
|
||||
type: string;
|
||||
blob: Blob;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------- */
|
||||
/* Type Helpers */
|
||||
/* -------------------------------------------------- */
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
export type ParametersExceptFirst<F> = F extends (
|
||||
arg0: any,
|
||||
...rest: infer R
|
||||
) => any
|
||||
? R
|
||||
: never;
|
||||
|
||||
export type ExceptFirst<T extends unknown[]> = T extends [any, ...infer U]
|
||||
? U
|
||||
: never;
|
||||
|
||||
export type ExceptFirstTwo<T extends unknown[]> = T extends [
|
||||
any,
|
||||
any,
|
||||
...infer U
|
||||
]
|
||||
? U
|
||||
: never;
|
||||
|
||||
export type PropsOfType<U> = {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
[K in keyof TDShape]: TDShape[K] extends any
|
||||
? TDShape[K] extends U
|
||||
? K
|
||||
: never
|
||||
: never;
|
||||
}[keyof TDShape];
|
||||
|
||||
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<TDShapeType, TDShape>,
|
||||
U
|
||||
>;
|
||||
|
||||
export type Patch<T> = Partial<{ [P in keyof T]: Patch<T[P]> }>;
|
||||
|
||||
export interface FileWithHandle extends File {
|
||||
handle?: FileSystemHandle;
|
||||
}
|
||||
|
||||
export interface FileWithDirectoryHandle extends File {
|
||||
directoryHandle?: FileSystemHandle;
|
||||
}
|
||||
|
||||
// The following typings implement the relevant parts of the File System Access
|
||||
// API. This can be removed once the specification reaches the Candidate phase
|
||||
// and is implemented as part of microsoft/TSJS-lib-generator.
|
||||
|
||||
export interface FileSystemHandlePermissionDescriptor {
|
||||
mode?: 'read' | 'readwrite';
|
||||
}
|
||||
|
||||
export interface FileSystemHandle {
|
||||
readonly kind: 'file' | 'directory';
|
||||
readonly name: string;
|
||||
|
||||
isSameEntry: (other: FileSystemHandle) => Promise<boolean>;
|
||||
|
||||
queryPermission: (
|
||||
descriptor?: FileSystemHandlePermissionDescriptor
|
||||
) => Promise<PermissionState>;
|
||||
requestPermission: (
|
||||
descriptor?: FileSystemHandlePermissionDescriptor
|
||||
) => Promise<PermissionState>;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"jsx": "react-jsx",
|
||||
"allowJs": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"strict": true,
|
||||
"noImplicitOverride": true,
|
||||
"noPropertyAccessFromIndexSignature": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"files": [],
|
||||
"include": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.lib.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.spec.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../../dist/out-tsc",
|
||||
"types": ["node"]
|
||||
},
|
||||
"files": [
|
||||
"../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
|
||||
"../../../node_modules/@nrwl/react/typings/image.d.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"jest.config.ts",
|
||||
"**/*.spec.ts",
|
||||
"**/*.test.ts",
|
||||
"**/*.spec.tsx",
|
||||
"**/*.test.tsx",
|
||||
"**/*.spec.js",
|
||||
"**/*.test.js",
|
||||
"**/*.spec.jsx",
|
||||
"**/*.test.jsx"
|
||||
],
|
||||
"include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../../dist/out-tsc",
|
||||
"module": "commonjs",
|
||||
"types": ["jest", "node"]
|
||||
},
|
||||
"include": [
|
||||
"jest.config.ts",
|
||||
"**/*.test.ts",
|
||||
"**/*.spec.ts",
|
||||
"**/*.test.tsx",
|
||||
"**/*.spec.tsx",
|
||||
"**/*.test.js",
|
||||
"**/*.spec.js",
|
||||
"**/*.test.jsx",
|
||||
"**/*.spec.jsx",
|
||||
"**/*.d.ts"
|
||||
]
|
||||
}
|
||||
Reference in new issue
Block a user