@yorab/react-paint 0.16.0 → 0.16.2

package/dist/canvas/utils/file.d.ts

@@ -21,6 +21,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
+    path?: Path2D | undefined;
 } & {
     rotation?: number;
     toolId?: string;
@@ -30,10 +31,11 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
 } & import("./../../common/types/Shapes").Line & {
     type: "line";
 } & {
+    type: "brush" | "rect" | "square" | "line" | "polygon" | "circle" | "curve" | "ellipse" | "picture" | "text" | "group";
+} & {
+    type: "line";
     selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
-    path?: Path2D | undefined;
     arrows?: import("./../../common/types/Shapes").TriangleEntity[];
-    type: "line";
 }) | ({
     id: string;
     computed: {
@@ -42,6 +44,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
+    path?: Path2D | undefined;
 } & {
     rotation?: number;
     toolId?: string;
@@ -51,14 +54,16 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
 } & import("./../../common/types/Shapes").Rect & {
     src: string;
 } & {
+    type: "picture";
     img: HTMLImageElement;
     flipX?: boolean;
     flipY?: boolean;
-    type: "picture";
+    ratio?: number;
 } & {
-    img: HTMLImageElement;
+    type: "brush" | "rect" | "square" | "line" | "polygon" | "circle" | "curve" | "ellipse" | "picture" | "text" | "group";
+} & {
+    type: "text" | "picture" | "rect" | "square" | "circle" | "ellipse" | "group" | "brush";
     selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
-    type: "picture";
 }) | ({
     id: string;
     computed: {
@@ -67,6 +72,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
+    path?: Path2D | undefined;
 } & {
     rotation?: number;
     toolId?: string;
@@ -77,12 +83,15 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
     value: string[];
     fontSize: number;
 } & {
+    type: "text";
     flipX?: boolean;
     flipY?: boolean;
-    type: "text";
+    ratio?: number;
+} & {
+    type: "brush" | "rect" | "square" | "line" | "polygon" | "circle" | "curve" | "ellipse" | "picture" | "text" | "group";
 } & {
+    type: "text" | "picture" | "rect" | "square" | "circle" | "ellipse" | "group" | "brush";
     selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
-    type: "text";
 }) | ({
     id: string;
     computed: {
@@ -91,6 +100,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
+    path?: Path2D | undefined;
 } & {
     rotation?: number;
     toolId?: string;
@@ -100,9 +110,10 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
 } & import("./../../common/types/Shapes").Rect & {
     type: "rect";
 } & {
+    type: "brush" | "rect" | "square" | "line" | "polygon" | "circle" | "curve" | "ellipse" | "picture" | "text" | "group";
+} & {
+    type: "text" | "picture" | "rect" | "square" | "circle" | "ellipse" | "group" | "brush";
     selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
-    path?: Path2D | undefined;
-    type: "rect";
 }) | ({
     id: string;
     computed: {
@@ -111,6 +122,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
+    path?: Path2D | undefined;
 } & {
     rotation?: number;
     toolId?: string;
@@ -120,9 +132,10 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
 } & import("./../../common/types/Shapes").Rect & {
     type: "square";
 } & {
+    type: "brush" | "rect" | "square" | "line" | "polygon" | "circle" | "curve" | "ellipse" | "picture" | "text" | "group";
+} & {
+    type: "text" | "picture" | "rect" | "square" | "circle" | "ellipse" | "group" | "brush";
     selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
-    path?: Path2D | undefined;
-    type: "square";
 }) | ({
     id: string;
     computed: {
@@ -131,6 +144,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
+    path?: Path2D | undefined;
 } & {
     rotation?: number;
     toolId?: string;
@@ -140,9 +154,10 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
 } & import("./../../common/types/Shapes").Circle & {
     type: "circle";
 } & {
+    type: "brush" | "rect" | "square" | "line" | "polygon" | "circle" | "curve" | "ellipse" | "picture" | "text" | "group";
+} & {
+    type: "text" | "picture" | "rect" | "square" | "circle" | "ellipse" | "group" | "brush";
     selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
-    path?: Path2D | undefined;
-    type: "circle";
 }) | ({
     id: string;
     computed: {
@@ -151,6 +166,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
+    path?: Path2D | undefined;
 } & {
     rotation?: number;
     toolId?: string;
@@ -160,9 +176,10 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
 } & import("./../../common/types/Shapes").Ellipse & {
     type: "ellipse";
 } & {
+    type: "brush" | "rect" | "square" | "line" | "polygon" | "circle" | "curve" | "ellipse" | "picture" | "text" | "group";
+} & {
+    type: "text" | "picture" | "rect" | "square" | "circle" | "ellipse" | "group" | "brush";
     selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
-    path?: Path2D | undefined;
-    type: "ellipse";
 }) | ({
     id: string;
     computed: {
@@ -171,6 +188,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
+    path?: Path2D | undefined;
 } & {
     rotation?: number;
     toolId?: string;
@@ -180,9 +198,10 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
 } & import("./../../common/types/Shapes").Polygon & {
     type: "polygon";
 } & {
+    type: "brush" | "rect" | "square" | "line" | "polygon" | "circle" | "curve" | "ellipse" | "picture" | "text" | "group";
+} & {
+    type: "polygon" | "curve";
     selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
-    path?: Path2D | undefined;
-    type: "polygon";
 }) | ({
     id: string;
     computed: {
@@ -191,6 +210,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
+    path?: Path2D | undefined;
 } & {
     rotation?: number;
     toolId?: string;
@@ -200,9 +220,10 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
 } & import("./../../common/types/Shapes").Curve & {
     type: "curve";
 } & {
+    type: "brush" | "rect" | "square" | "line" | "polygon" | "circle" | "curve" | "ellipse" | "picture" | "text" | "group";
+} & {
+    type: "polygon" | "curve";
     selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
-    path?: Path2D | undefined;
-    type: "curve";
 }) | ({
     id: string;
     computed: {
@@ -211,6 +232,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
+    path?: Path2D | undefined;
 } & {
     rotation?: number;
     toolId?: string;
@@ -222,9 +244,10 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
     scaleX?: number;
     scaleY?: number;
 } & {
+    type: "brush" | "rect" | "square" | "line" | "polygon" | "circle" | "curve" | "ellipse" | "picture" | "text" | "group";
+} & {
+    type: "text" | "picture" | "rect" | "square" | "circle" | "ellipse" | "group" | "brush";
     selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
-    path?: Path2D | undefined;
-    type: "brush";
 }) | ({
     id: string;
     computed: {
@@ -233,6 +256,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
+    path?: Path2D | undefined;
 } & {
     rotation?: number;
     toolId?: string;
@@ -240,10 +264,11 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
     locked?: boolean;
     style?: import("./../../common/types/Shapes").StyleShape | undefined;
 } & import("./../../common/types/Shapes").Rect & {
-    shapes: ShapeEntity[];
     type: "group";
+    shapes: ShapeEntity[];
 } & {
+    type: "brush" | "rect" | "square" | "line" | "polygon" | "circle" | "curve" | "ellipse" | "picture" | "text" | "group";
+} & {
+    type: "text" | "picture" | "rect" | "square" | "circle" | "ellipse" | "group" | "brush";
     selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
-    path?: Path2D | undefined;
-    type: "group";
 }))[]>;

package/dist/canvas/utils/intersect.d.ts

@@ -20,4 +20,4 @@ export declare const checkCurveLinesSelectionIntersection: (ctx: CanvasRendering
 };
 export declare const checkPositionIntersection: (ctx: CanvasRenderingContext2D, shape: SelectionType, position: Point, settings: UtilsSettings) => false | HoverModeData;
 export declare function getRectIntersection(rect1: Rect, rect2: Rect): Rect | undefined;
-export declare const checkSelectionFrameCollision: (ctx: CanvasRenderingContext2D, shape: ShapeEntity, selectionFrame: [Point, Point], settings: UtilsSettings) => boolean;
+export declare const checkSelectionFrameCollision: (ctx: CanvasRenderingContext2D, shape: ShapeEntity, selectionFrame: [Point, Point]) => boolean;

package/dist/canvas/utils/shapes/rectangle.d.ts

@@ -10,7 +10,7 @@ export declare const getComputedRect: (rect: DrawableShape<rectish>, settings: U
     center: Point;
     boundingBox: Rect;
 };
-export declare const refreshRect: <T extends rectish>(rect: DrawableShape<T> & {
+export declare const refreshRect: <T extends rectish>(rect: DrawableShape<rectish> & {
     id: string;
 }, settings: UtilsSettings) => ShapeEntity<T>;
 export declare const createRectangle: <T extends rectish>(shape: {

package/dist/common/types/Shapes.d.ts

@@ -49,6 +49,7 @@ export type StyleShape = {
     lineWidth?: number;
     lineDash?: number;
     lineArrow?: number;
+    lineCap?: CanvasLineCap;
     closedPoints?: number;
     fontFamily?: string;
     fontItalic?: boolean;
@@ -65,45 +66,50 @@ export type SelectionLinesType = {
     shapePath: Path2D | undefined;
     anchors: Path2D[];
 };
-export type DrawableShape<T extends ShapeType = ShapeType> = {
+type GenericDrawableShape = {
     rotation?: number;
     toolId?: string;
     visible?: boolean;
     locked?: boolean;
     style?: StyleShape | undefined;
-} & (T extends 'line' ? Line & {
+} & ((Line & {
     type: 'line';
-} : T extends 'picture' ? Picture & {
+}) | (Picture & {
+    type: 'picture';
     img: HTMLImageElement;
     flipX?: boolean;
     flipY?: boolean;
-    type: 'picture';
-} : T extends 'text' ? Text & {
+    ratio?: number;
+}) | (Text & {
+    type: 'text';
     flipX?: boolean;
     flipY?: boolean;
-    type: 'text';
-} : T extends 'rect' ? Rect & {
+    ratio?: number;
+}) | (Rect & {
     type: 'rect';
-} : T extends 'square' ? Rect & {
+}) | (Rect & {
     type: 'square';
-} : T extends 'circle' ? Circle & {
+}) | (Circle & {
     type: 'circle';
-} : T extends 'ellipse' ? Ellipse & {
+}) | (Ellipse & {
     type: 'ellipse';
-} : T extends 'triangle' ? Triangle & {
+}) | (Triangle & {
     type: 'triangle';
-} : T extends 'polygon' ? Polygon & {
+}) | (Polygon & {
     type: 'polygon';
-} : T extends 'curve' ? Curve & {
+}) | (Curve & {
     type: 'curve';
-} : T extends 'brush' ? Brush & {
+}) | (Brush & {
     type: 'brush';
     scaleX?: number;
     scaleY?: number;
-} : T extends 'group' ? Rect & {
-    shapes: ShapeEntity[];
+}) | (Rect & {
     type: 'group';
-} : never);
+    shapes: ShapeEntity[];
+}));
+export type DrawableShape<T extends ShapeType = ShapeType> = GenericDrawableShape & {
+    type: T;
+};
 export type ExportedDrawableShape<T extends ShapeType = ShapeType> = T extends 'picture' ? Omit<DrawableShape<'picture'>, 'img'> : DrawableShape<T>;
 export type TriangleEntity = DrawableShape<'triangle'> & {
     path: Path2D;
@@ -122,51 +128,18 @@ export type ShapeEntity<T extends Exclude<ShapeType, 'triangle'> = Exclude<Shape
         center: Point;
         boundingBox: Rect;
     };
-} & DrawableShape<T> & (T extends 'line' ? {
-    selection?: SelectionLinesType | undefined;
     path?: Path2D | undefined;
-    arrows?: TriangleEntity[];
+} & DrawableShape<T> & ({
     type: 'line';
-} : T extends 'picture' ? {
-    img: HTMLImageElement;
-    selection?: SelectionDefaultType | undefined;
-    type: 'picture';
-} : T extends 'text' ? {
-    selection?: SelectionDefaultType | undefined;
-    type: 'text';
-} : T extends 'rect' ? {
-    selection?: SelectionDefaultType | undefined;
-    path?: Path2D | undefined;
-    type: 'rect';
-} : T extends 'square' ? {
-    selection?: SelectionDefaultType | undefined;
-    path?: Path2D | undefined;
-    type: 'square';
-} : T extends 'circle' ? {
-    selection?: SelectionDefaultType | undefined;
-    path?: Path2D | undefined;
-    type: 'circle';
-} : T extends 'ellipse' ? {
-    selection?: SelectionDefaultType | undefined;
-    path?: Path2D | undefined;
-    type: 'ellipse';
-} : T extends 'polygon' ? {
     selection?: SelectionLinesType | undefined;
-    path?: Path2D | undefined;
-    type: 'polygon';
-} : T extends 'curve' ? {
+    arrows?: TriangleEntity[];
+} | {
+    type: 'polygon' | 'curve';
     selection?: SelectionLinesType | undefined;
-    path?: Path2D | undefined;
-    type: 'curve';
-} : T extends 'brush' ? {
+} | {
+    type: 'text' | 'picture' | 'rect' | 'square' | 'circle' | 'ellipse' | 'group' | 'brush';
     selection?: SelectionDefaultType | undefined;
-    path?: Path2D | undefined;
-    type: 'brush';
-} : T extends 'group' ? {
-    selection?: SelectionDefaultType | undefined;
-    path?: Path2D | undefined;
-    type: 'group';
-} : never);
+});
 export type StateData = {
     shapes?: DrawableShape[];
     config?: {
@@ -175,3 +148,4 @@ export type StateData = {
     };
 };
 export type SelectionType = ShapeEntity;
+export {};