@yorab/react-paint 0.8.0 → 0.9.0

package/dist/types/Mode.d.ts

@@ -1,4 +1,4 @@
-import type { Point, DrawableShape } from './Shapes';
+import type { Point, ShapeEntity } from './Shapes';
 export type SelectionModeDefault = {
     mode: 'default';
 };
@@ -12,19 +12,19 @@ export type SelectionModeEditText = {
 export type SelectionModeResize<AnchorType extends Point | number = Point> = {
     mode: 'resize';
     cursorStartPosition: Point;
-    originalShape: DrawableShape;
+    originalShape: ShapeEntity;
     anchor: AnchorType;
 };
 export type SelectionModeRotate = {
     mode: 'rotate';
     cursorStartPosition: Point;
-    originalShape: DrawableShape;
+    originalShape: ShapeEntity;
     center: Point;
 };
 export type SelectionModeTranslate = {
     mode: 'translate';
     cursorStartPosition: Point;
-    originalShape: DrawableShape;
+    originalShape: ShapeEntity;
 };
 export type SelectionModeData<AnchorType extends Point | number> = SelectionModeDefault | SelectionModeBrush | SelectionModeResize<AnchorType> | SelectionModeRotate | SelectionModeTranslate | SelectionModeEditText;
 export type HoverModeData = {

package/dist/types/Shapes.d.ts

@@ -1,107 +1,124 @@
 import { ShapeTypeArray } from '../constants/shapes';
 export type ShapeType = typeof ShapeTypeArray[number];
 export type Point = [number, number];
-export type StyledShape = {
-    visible?: boolean;
-    locked?: boolean;
-    style?: {
-        fillColor?: string;
-        globalAlpha?: number;
-        strokeColor?: string;
-        lineWidth?: number;
-        lineDash?: number;
-        lineArrow?: number;
-        pointsCount?: number;
-        fontFamily?: string;
-        fontItalic?: boolean;
-        fontBold?: boolean;
-    };
-};
-type Drawable = {
-    id: string;
-    toolId?: string;
-    rotation: number;
-};
-export type Rect = StyledShape & {
+export type Rect = {
     x: number;
     y: number;
     width: number;
     height: number;
 };
-export type Square = Rect;
-export type StoredPicture = Rect & {
+export type Picture = Rect & {
     src: string;
 };
-export type Picture = StoredPicture & {
-    img: HTMLImageElement;
-};
 export type Text = Rect & {
     value: string[];
     fontSize: number;
 };
-export type Line = StyledShape & {
-    points: [Point, Point];
+export type Line = {
+    points: readonly [Point, Point];
 };
-export type Triangle = StyledShape & {
+export type Triangle = {
     points: [Point, Point, Point];
 };
-export type Polygon = StyledShape & {
+export type Polygon = {
     points: Point[];
 };
-export type Curve = StyledShape & {
+export type Curve = {
     points: Point[];
 };
-export type Brush = StyledShape & {
+export type Brush = {
     points: Point[][];
 };
-export type Circle = StyledShape & {
+export type Circle = {
     x: number;
     y: number;
     radius: number;
 };
-export type Ellipse = StyledShape & {
+export type Ellipse = {
     x: number;
     y: number;
     radiusX: number;
     radiusY: number;
 };
-export type DrawableRect = Rect & Drawable & {
-    type: 'rect';
-};
-export type DrawableSquare = Square & Drawable & {
-    type: 'square';
-};
-export type DrawablePictureJson = StoredPicture & Drawable & {
-    type: 'picture';
-};
-export type DrawablePicture = Picture & Drawable & {
+export type StyleShape = {
+    fillColor?: string;
+    globalAlpha?: number;
+    strokeColor?: string;
+    lineWidth?: number;
+    lineDash?: number;
+    lineArrow?: number;
+    pointsCount?: number;
+    fontFamily?: string;
+    fontItalic?: boolean;
+    fontBold?: boolean;
+};
+export type SelectionDefaultType = {
+    border: Path2D;
+    line: Path2D;
+    anchors: Path2D[];
+};
+export type SelectionLinesType = {
+    border: Path2D;
+    anchors: Path2D[];
+};
+export type DrawableShape<T extends ShapeType = ShapeType> = {
+    visible?: boolean;
+    locked?: boolean;
+    rotation: number;
+    style?: StyleShape;
+} & (T extends 'line' ? Line & {
+    type: 'line';
+    selection?: SelectionLinesType;
+    path?: Path2D;
+    arrows?: DrawableShape<'triangle'>[];
+} : T extends 'picture' ? Picture & {
     type: 'picture';
-};
-export type DrawableText = Text & Drawable & {
+    img: HTMLImageElement;
+    selection?: SelectionDefaultType;
+} : T extends 'text' ? Text & {
     type: 'text';
-};
-export type DrawableLine = Line & Drawable & {
-    type: 'line';
-};
-export type DrawablePolygon = Polygon & Drawable & {
+    selection?: SelectionDefaultType;
+} : T extends 'rect' ? Rect & {
+    type: 'rect';
+    selection?: SelectionDefaultType;
+    path?: Path2D;
+} : T extends 'square' ? Rect & {
+    type: 'square';
+    selection?: SelectionDefaultType;
+    path?: Path2D;
+} : T extends 'circle' ? Circle & {
+    type: 'circle';
+    selection?: SelectionDefaultType;
+    path?: Path2D;
+} : T extends 'ellipse' ? Ellipse & {
+    type: 'ellipse';
+    selection?: SelectionDefaultType;
+    path?: Path2D;
+} : T extends 'triangle' ? Triangle & {
+    type: 'triangle';
+    path?: Path2D;
+} : T extends 'polygon' ? Polygon & {
     type: 'polygon';
-};
-export type DrawableCurve = Curve & Drawable & {
+    selection?: SelectionLinesType;
+    path?: Path2D;
+} : T extends 'curve' ? Curve & {
     type: 'curve';
-};
-export type DrawableBrush = Brush & Drawable & {
+    selection?: SelectionLinesType;
+    path?: Path2D;
+} : T extends 'brush' ? Brush & {
     type: 'brush';
-};
-export type DrawableCircle = Circle & Drawable & {
-    type: 'circle';
-};
-export type DrawableEllipse = Ellipse & Drawable & {
-    type: 'ellipse';
-};
-export type DrawableShape = DrawableRect | DrawableSquare | DrawablePicture | DrawableText | DrawableLine | DrawablePolygon | DrawableCurve | DrawableBrush | DrawableCircle | DrawableEllipse;
-export type DrawableShapeJson = {
+    selection?: SelectionDefaultType;
+    path?: Path2D;
+    scaleX?: number;
+    scaleY?: number;
+} : never);
+export type DrawableShapeJson<T extends ShapeType = ShapeType> = DrawableShape<T> & {
     translation?: Point;
-} & (DrawableRect | DrawableSquare | DrawablePictureJson | DrawableText | DrawableLine | DrawableCurve | DrawablePolygon | DrawableBrush | DrawableCircle | DrawableEllipse);
+};
+export type ShapeEntity<T extends Exclude<ShapeType, 'triangle'> = Exclude<ShapeType, 'triangle'>> = {
+    id: string;
+    toolId?: string;
+} & DrawableShape<T>;
 export type ExportDataType = {
     shapes: DrawableShapeJson[];
     config?: {
@@ -109,4 +126,3 @@ export type ExportDataType = {
         height: number;
     };
 };
-export {};

package/dist/types/react.d.ts

@@ -0,0 +1,7 @@
+import 'react';
+declare module 'react' {
+    interface CSSProperties {
+        [key: `--${string}`]: string | number;
+    }
+}
+export {};

package/dist/types/tools.d.ts

@@ -112,8 +112,9 @@ export type ToolsLineSettings = SettingsOpacity & SettingsStrokeColor & Settings
 export type ToolsBrushSettings = SettingsOpacity & SettingsStrokeColor & SettingsLineWidth & SettingsLineDash;
 export type ToolsPolygonSettings = SettingsOpacity & SettingsStrokeColor & SettingsFillColor & SettingsLineWidth & SettingsLineDash & SettingsPointsCount;
 export type ToolsCurveSettings = SettingsOpacity & SettingsStrokeColor & SettingsFillColor & SettingsLineWidth & SettingsLineDash & SettingsPointsCount;
+export type ToolsTriangleSettings = SettingsStrokeColor & SettingsFillColor & SettingsOpacity & SettingsLineWidth & SettingsLineDash;
 export type ToolsPictureSettings = SettingsOpacity;
-export type ToolsSettingsType<T extends ShapeType> = T extends 'rect' ? ToolsRectSettings : T extends 'square' ? ToolsSquareSettings : T extends 'circle' ? ToolsCircleSettings : T extends 'ellipse' ? ToolsEllipseSettings : T extends 'text' ? ToolsTextSettings : T extends 'line' ? ToolsLineSettings : T extends 'brush' ? ToolsBrushSettings : T extends 'polygon' ? ToolsPolygonSettings : T extends 'curve' ? ToolsCurveSettings : T extends 'picture' ? ToolsPictureSettings : unknown;
+export type ToolsSettingsType<T extends ShapeType> = T extends 'rect' ? ToolsRectSettings : T extends 'square' ? ToolsSquareSettings : T extends 'circle' ? ToolsCircleSettings : T extends 'ellipse' ? ToolsEllipseSettings : T extends 'text' ? ToolsTextSettings : T extends 'line' ? ToolsLineSettings : T extends 'brush' ? ToolsBrushSettings : T extends 'polygon' ? ToolsPolygonSettings : T extends 'curve' ? ToolsCurveSettings : T extends 'triangle' ? ToolsTriangleSettings : T extends 'picture' ? ToolsPictureSettings : unknown;
 export type ActionsType = 'selection' | 'undo' | 'redo' | 'clear' | 'export' | 'loadfile' | 'savefile' | 'move' | 'uploadpicture' | 'addurlpicture';
 export type ActionsTool = {
     id: string;

package/dist/types/utils.d.ts

@@ -1,3 +1,4 @@
 export type RecursivePartial<T> = {
     [P in keyof T]?: T[P] extends (infer U)[] ? RecursivePartial<U>[] : T[P] extends object ? RecursivePartial<T[P]> : T[P];
 };
+export type ValueOf<T> = T[keyof T];

package/dist/utils/data.d.ts

@@ -1,225 +1,4 @@
-import type { DrawableShape, DrawableShapeJson, ExportDataType } from '../types/Shapes';
+import type { DrawableShape, DrawableShapeJson, ExportDataType, ShapeEntity } from '../types/Shapes';
 export declare const cleanShapesBeforeExport: (shapes: DrawableShape[]) => DrawableShapeJson[];
 export declare const buildDataToExport: (shapes: DrawableShape[], width: number, height: number) => ExportDataType;
-export declare const addDefaultAndTempShapeProps: (shape: DrawableShape) => {
-    id: string;
-    visible?: boolean | undefined;
-    locked?: boolean | undefined;
-    style?: {
-        fillColor?: string | undefined;
-        globalAlpha?: number | undefined;
-        strokeColor?: string | undefined;
-        lineWidth?: number | undefined;
-        lineDash?: number | undefined;
-        lineArrow?: number | undefined;
-        pointsCount?: number | undefined;
-        fontFamily?: string | undefined;
-        fontItalic?: boolean | undefined;
-        fontBold?: boolean | undefined;
-    } | undefined;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    toolId?: string | undefined;
-    rotation: number;
-    type: "rect";
-} | {
-    id: string;
-    visible?: boolean | undefined;
-    locked?: boolean | undefined;
-    style?: {
-        fillColor?: string | undefined;
-        globalAlpha?: number | undefined;
-        strokeColor?: string | undefined;
-        lineWidth?: number | undefined;
-        lineDash?: number | undefined;
-        lineArrow?: number | undefined;
-        pointsCount?: number | undefined;
-        fontFamily?: string | undefined;
-        fontItalic?: boolean | undefined;
-        fontBold?: boolean | undefined;
-    } | undefined;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    toolId?: string | undefined;
-    rotation: number;
-    type: "square";
-} | {
-    id: string;
-    visible?: boolean | undefined;
-    locked?: boolean | undefined;
-    style?: {
-        fillColor?: string | undefined;
-        globalAlpha?: number | undefined;
-        strokeColor?: string | undefined;
-        lineWidth?: number | undefined;
-        lineDash?: number | undefined;
-        lineArrow?: number | undefined;
-        pointsCount?: number | undefined;
-        fontFamily?: string | undefined;
-        fontItalic?: boolean | undefined;
-        fontBold?: boolean | undefined;
-    } | undefined;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    src: string;
-    img: HTMLImageElement;
-    toolId?: string | undefined;
-    rotation: number;
-    type: "picture";
-} | {
-    id: string;
-    visible?: boolean | undefined;
-    locked?: boolean | undefined;
-    style?: {
-        fillColor?: string | undefined;
-        globalAlpha?: number | undefined;
-        strokeColor?: string | undefined;
-        lineWidth?: number | undefined;
-        lineDash?: number | undefined;
-        lineArrow?: number | undefined;
-        pointsCount?: number | undefined;
-        fontFamily?: string | undefined;
-        fontItalic?: boolean | undefined;
-        fontBold?: boolean | undefined;
-    } | undefined;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    value: string[];
-    fontSize: number;
-    toolId?: string | undefined;
-    rotation: number;
-    type: "text";
-} | {
-    id: string;
-    visible?: boolean | undefined;
-    locked?: boolean | undefined;
-    style?: {
-        fillColor?: string | undefined;
-        globalAlpha?: number | undefined;
-        strokeColor?: string | undefined;
-        lineWidth?: number | undefined;
-        lineDash?: number | undefined;
-        lineArrow?: number | undefined;
-        pointsCount?: number | undefined;
-        fontFamily?: string | undefined;
-        fontItalic?: boolean | undefined;
-        fontBold?: boolean | undefined;
-    } | undefined;
-    points: [import("../types/Shapes").Point, import("../types/Shapes").Point];
-    toolId?: string | undefined;
-    rotation: number;
-    type: "line";
-} | {
-    id: string;
-    visible?: boolean | undefined;
-    locked?: boolean | undefined;
-    style?: {
-        fillColor?: string | undefined;
-        globalAlpha?: number | undefined;
-        strokeColor?: string | undefined;
-        lineWidth?: number | undefined;
-        lineDash?: number | undefined;
-        lineArrow?: number | undefined;
-        pointsCount?: number | undefined;
-        fontFamily?: string | undefined;
-        fontItalic?: boolean | undefined;
-        fontBold?: boolean | undefined;
-    } | undefined;
-    points: import("../types/Shapes").Point[];
-    toolId?: string | undefined;
-    rotation: number;
-    type: "polygon";
-} | {
-    id: string;
-    visible?: boolean | undefined;
-    locked?: boolean | undefined;
-    style?: {
-        fillColor?: string | undefined;
-        globalAlpha?: number | undefined;
-        strokeColor?: string | undefined;
-        lineWidth?: number | undefined;
-        lineDash?: number | undefined;
-        lineArrow?: number | undefined;
-        pointsCount?: number | undefined;
-        fontFamily?: string | undefined;
-        fontItalic?: boolean | undefined;
-        fontBold?: boolean | undefined;
-    } | undefined;
-    points: import("../types/Shapes").Point[];
-    toolId?: string | undefined;
-    rotation: number;
-    type: "curve";
-} | {
-    id: string;
-    visible?: boolean | undefined;
-    locked?: boolean | undefined;
-    style?: {
-        fillColor?: string | undefined;
-        globalAlpha?: number | undefined;
-        strokeColor?: string | undefined;
-        lineWidth?: number | undefined;
-        lineDash?: number | undefined;
-        lineArrow?: number | undefined;
-        pointsCount?: number | undefined;
-        fontFamily?: string | undefined;
-        fontItalic?: boolean | undefined;
-        fontBold?: boolean | undefined;
-    } | undefined;
-    points: import("../types/Shapes").Point[][];
-    toolId?: string | undefined;
-    rotation: number;
-    type: "brush";
-} | {
-    id: string;
-    visible?: boolean | undefined;
-    locked?: boolean | undefined;
-    style?: {
-        fillColor?: string | undefined;
-        globalAlpha?: number | undefined;
-        strokeColor?: string | undefined;
-        lineWidth?: number | undefined;
-        lineDash?: number | undefined;
-        lineArrow?: number | undefined;
-        pointsCount?: number | undefined;
-        fontFamily?: string | undefined;
-        fontItalic?: boolean | undefined;
-        fontBold?: boolean | undefined;
-    } | undefined;
-    x: number;
-    y: number;
-    radius: number;
-    toolId?: string | undefined;
-    rotation: number;
-    type: "circle";
-} | {
-    id: string;
-    visible?: boolean | undefined;
-    locked?: boolean | undefined;
-    style?: {
-        fillColor?: string | undefined;
-        globalAlpha?: number | undefined;
-        strokeColor?: string | undefined;
-        lineWidth?: number | undefined;
-        lineDash?: number | undefined;
-        lineArrow?: number | undefined;
-        pointsCount?: number | undefined;
-        fontFamily?: string | undefined;
-        fontItalic?: boolean | undefined;
-        fontBold?: boolean | undefined;
-    } | undefined;
-    x: number;
-    y: number;
-    radiusX: number;
-    radiusY: number;
-    toolId?: string | undefined;
-    rotation: number;
-    type: "ellipse";
-};
+export declare const addDefaultAndTempShapeProps: (shape: DrawableShape, currentScale: number, selectionPadding: number) => ShapeEntity;

package/dist/utils/file.d.ts

@@ -1,4 +1,4 @@
-import type { DrawableShape, ExportDataType, Point } from '../types/Shapes';
+import type { DrawableShape, ExportDataType, Point, ShapeEntity } from '../types/Shapes';
 export declare const addSizeAndConvertSvgToObjectUrl: (svgFileContent: string) => string;
 export declare const isSvg: (fileOrUrl: File | string) => boolean;
 export declare const fetchAndStringify: (url: string) => Promise<string>;
@@ -7,4 +7,4 @@ export declare const getBase64Image: (img: HTMLImageElement) => string;
 export declare const getCanvasImage: (shapes: DrawableShape[], canvasOffset: Point, width: number, height: number, selectionPadding: number) => string;
 export declare const encodeShapesInString: (shapes: DrawableShape[], width: number, height: number) => string;
 export declare const decodeJson: (file: File) => Promise<unknown>;
-export declare const decodeImportedData: (shapesForJson: ExportDataType) => Promise<DrawableShape[]>;
+export declare const decodeImportedData: (shapesForJson: ExportDataType, currentScale: number, selectionPadding: number) => Promise<ShapeEntity[]>;

package/dist/utils/{shapes/grid.d.ts → grid.d.ts}

@@ -1,3 +1,3 @@
-import { GridFormatType } from '../../constants/app';
-import type { Point } from '../../types/Shapes';
+import { GridFormatType } from '../constants/app';
+import type { Point } from '../types/Shapes';
 export declare const drawGrid: (ctx: CanvasRenderingContext2D, width: number, height: number, responsiveScale: number, canvasOffset: Point, gridFormat: GridFormatType) => void;