@yorab/react-paint 0.16.1 → 0.16.2

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

@@ -31,9 +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;
     arrows?: import("./../../common/types/Shapes").TriangleEntity[];
-    type: "line";
 }) | ({
     id: string;
     computed: {
@@ -52,15 +54,16 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
 } & import("./../../common/types/Shapes").Rect & {
     src: string;
 } & {
+    type: "picture";
     img: HTMLImageElement;
     flipX?: boolean;
     flipY?: boolean;
     ratio?: number;
-    type: "picture";
 } & {
-    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: {
@@ -80,13 +83,15 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
     value: string[];
     fontSize: number;
 } & {
+    type: "text";
     flipX?: boolean;
     flipY?: boolean;
     ratio?: number;
-    type: "text";
 } & {
+    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: {
@@ -105,8 +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;
-    type: "rect";
 }) | ({
     id: string;
     computed: {
@@ -125,8 +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;
-    type: "square";
 }) | ({
     id: string;
     computed: {
@@ -145,8 +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;
-    type: "circle";
 }) | ({
     id: string;
     computed: {
@@ -165,8 +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;
-    type: "ellipse";
 }) | ({
     id: string;
     computed: {
@@ -185,8 +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;
-    type: "polygon";
 }) | ({
     id: string;
     computed: {
@@ -205,8 +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;
-    type: "curve";
 }) | ({
     id: string;
     computed: {
@@ -227,8 +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;
-    type: "brush";
 }) | ({
     id: string;
     computed: {
@@ -245,9 +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;
-    type: "group";
 }))[]>;

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,47 +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;
     ratio?: number;
-    type: 'picture';
-} : T extends 'text' ? Text & {
+}) | (Text & {
+    type: 'text';
     flipX?: boolean;
     flipY?: boolean;
     ratio?: number;
-    type: 'text';
-} : T extends 'rect' ? Rect & {
+}) | (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;
@@ -125,42 +129,17 @@ export type ShapeEntity<T extends Exclude<ShapeType, 'triangle'> = Exclude<Shape
         boundingBox: Rect;
     };
     path?: Path2D | undefined;
-} & DrawableShape<T> & (T extends 'line' ? {
-    selection?: SelectionLinesType | 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;
-    type: 'rect';
-} : T extends 'square' ? {
-    selection?: SelectionDefaultType | undefined;
-    type: 'square';
-} : T extends 'circle' ? {
-    selection?: SelectionDefaultType | undefined;
-    type: 'circle';
-} : T extends 'ellipse' ? {
-    selection?: SelectionDefaultType | undefined;
-    type: 'ellipse';
-} : T extends 'polygon' ? {
     selection?: SelectionLinesType | undefined;
-    type: 'polygon';
-} : T extends 'curve' ? {
+    arrows?: TriangleEntity[];
+} | {
+    type: 'polygon' | 'curve';
     selection?: SelectionLinesType | undefined;
-    type: 'curve';
-} : T extends 'brush' ? {
+} | {
+    type: 'text' | 'picture' | 'rect' | 'square' | 'circle' | 'ellipse' | 'group' | 'brush';
     selection?: SelectionDefaultType | undefined;
-    type: 'brush';
-} : T extends 'group' ? {
-    selection?: SelectionDefaultType | undefined;
-    type: 'group';
-} : never);
+});
 export type StateData = {
     shapes?: DrawableShape[];
     config?: {
@@ -169,3 +148,4 @@ export type StateData = {
     };
 };
 export type SelectionType = ShapeEntity;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yorab/react-paint",
-  "version": "0.16.1",
+  "version": "0.16.2",
   "type": "module",
   "keywords": [],
   "author": "Yohann Rabatel",
@@ -23,26 +23,26 @@
     "dist/"
   ],
   "devDependencies": {
-    "@biomejs/biome": "2.3.13",
+    "@biomejs/biome": "2.4.3",
     "@rollup/plugin-terser": "0.4.4",
-    "@storybook/addon-docs": "10.2.3",
-    "@storybook/addon-links": "10.2.3",
-    "@storybook/addon-vitest": "10.2.3",
-    "@storybook/react-vite": "10.2.3",
-    "@types/node": "25.2.0",
-    "@types/react": "19.2.10",
+    "@storybook/addon-docs": "10.2.10",
+    "@storybook/addon-links": "10.2.10",
+    "@storybook/addon-vitest": "10.2.10",
+    "@storybook/react-vite": "10.2.10",
+    "@types/node": "25.3.0",
+    "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "@vitejs/plugin-react": "5.1.3",
-    "jsdom": "28.0.0",
+    "@vitejs/plugin-react": "5.1.4",
+    "jsdom": "28.1.0",
     "lightningcss": "1.31.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "storybook": "10.2.3",
+    "storybook": "10.2.10",
     "typescript": "5.9.3",
     "vite": "7.3.1",
-    "vite-tsconfig-paths": "6.0.5",
+    "vite-tsconfig-paths": "6.1.1",
     "vitest": "4.0.18",
-    "playwright": "1.58.1",
+    "playwright": "1.58.2",
     "@vitest/browser-playwright": "4.0.18",
     "@vitest/coverage-v8": "4.0.18"
   },