@yorab/react-paint 0.16.1 → 0.16.3

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

@@ -21,7 +21,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
-    path?: Path2D | undefined;
+    path: Path2D;
 } & {
     rotation?: number;
     toolId?: string;
@@ -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: {
@@ -42,7 +44,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
-    path?: Path2D | undefined;
+    path: Path2D;
 } & {
     rotation?: number;
     toolId?: string;
@@ -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: {
@@ -69,7 +72,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
-    path?: Path2D | undefined;
+    path: Path2D;
 } & {
     rotation?: number;
     toolId?: string;
@@ -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: {
@@ -95,7 +100,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
-    path?: Path2D | undefined;
+    path: Path2D;
 } & {
     rotation?: number;
     toolId?: string;
@@ -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: {
@@ -115,7 +122,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
-    path?: Path2D | undefined;
+    path: Path2D;
 } & {
     rotation?: number;
     toolId?: string;
@@ -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: {
@@ -135,7 +144,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
-    path?: Path2D | undefined;
+    path: Path2D;
 } & {
     rotation?: number;
     toolId?: string;
@@ -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: {
@@ -155,7 +166,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
-    path?: Path2D | undefined;
+    path: Path2D;
 } & {
     rotation?: number;
     toolId?: string;
@@ -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: {
@@ -175,7 +188,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
-    path?: Path2D | undefined;
+    path: Path2D;
 } & {
     rotation?: number;
     toolId?: string;
@@ -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: {
@@ -195,7 +210,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
-    path?: Path2D | undefined;
+    path: Path2D;
 } & {
     rotation?: number;
     toolId?: string;
@@ -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: {
@@ -215,7 +232,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
-    path?: Path2D | undefined;
+    path: Path2D;
 } & {
     rotation?: number;
     toolId?: string;
@@ -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: {
@@ -237,7 +256,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
-    path?: Path2D | undefined;
+    path: Path2D;
 } & {
     rotation?: number;
     toolId?: string;
@@ -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/intersect.d.ts

@@ -11,7 +11,7 @@ export declare const getCursorPositionInTransformedCanvas: (e: MouseEvent | Touc
 export declare const isTouchGesture: (e: MouseEvent | TouchEvent) => e is TouchEvent;
 export declare const getPointPositionAfterCanvasTransformation: (point: Point, shapeRotation: number, [originX, originY]: Point) => Point;
 export declare const getPointPositionBeforeCanvasTransformation: (point: Point, shapeRotation: number, [originX, originY]: Point) => Point;
-export declare const checkSelectionIntersection: (ctx: CanvasRenderingContext2D, shape: SelectionType, position: Point, settings: UtilsSettings, checkAnchors?: boolean, radius?: number) => false | HoverModeData;
+export declare const checkSelectionIntersection: (ctx: CanvasRenderingContext2D, selection: SelectionType, position: Point, settings: UtilsSettings, checkAnchors?: boolean, radius?: number) => false | HoverModeData;
 export declare const checkPolygonLinesSelectionIntersection: (ctx: CanvasRenderingContext2D, shape: ShapeEntity<"polygon" | "curve">, position: Point, settings: UtilsSettings, radius?: number) => false | {
     lineIndex: number;
 };

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

@@ -3,7 +3,7 @@ import type { HoverModeData, SelectionModeData } from './../../common/types/Mode
 import type { Point, SelectionType, ShapeEntity } from './../../common/types/Shapes';
 import type { CustomTool } from './../../common/types/tools';
 export declare const getNewSelectionData: (hoverMode: HoverModeData, selectedShape: SelectionType, cursorPosition: Point) => SelectionModeData<Point | number> | undefined;
-export declare const selectShape: (ctx: CanvasRenderingContext2D, shapes: ShapeEntity[], cursorPosition: Point, settings: UtilsSettings, selectedShape: SelectionType | undefined, isTouchGesture: boolean, withFrameSelection: boolean, isGroupMode: boolean) => {
+export declare const selectShape: (ctx: CanvasRenderingContext2D, shapes: ShapeEntity[], cursorPosition: Point, settings: UtilsSettings, selectedShape: SelectionType | undefined, isTouchGesture: boolean, withFrameSelection: boolean, behavior?: "add" | "remove" | "replace") => {
     mode: SelectionModeData<Point | number>;
     shape: SelectionType | undefined;
 };

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

@@ -4,7 +4,7 @@ export declare const createRecPath: (rect: Rect) => Path2D;
 export declare const createCirclePath: (shape: Circle) => Path2D;
 export declare const createEllipsePath: (ellipse: DrawableShape<"ellipse">) => Path2D;
 export declare const createLinePath: (line: Line) => Path2D;
-export declare const createBrushPath: (brush: DrawableShape<"brush">, { brushAlgo }: UtilsSettings) => Path2D | undefined;
+export declare const createBrushPath: (brush: DrawableShape<"brush">, { brushAlgo }: UtilsSettings) => Path2D;
 /** Bounding box of a cubic Bezier segment B(t) = (1-t)³P0 + 3(1-t)²t P1 + 3(1-t)t² P2 + t³ P3 */
 export declare const getCubicBezierBounds: (p0: Point, p1: Point, p2: Point, p3: Point) => {
     minX: number;
@@ -17,8 +17,8 @@ export declare const catmullRomToBezier: (p0: Point, p1: Point, p2: Point, p3: P
     cp1: Point;
     cp2: Point;
 };
-export declare const createCurvePath: (curve: DrawableShape<"curve">) => Path2D | undefined;
-export declare const createPolygonPath: (polygon: DrawableShape<"polygon"> | DrawableShape<"curve">) => Path2D | undefined;
+export declare const createCurvePath: (curve: DrawableShape<"curve">) => Path2D;
+export declare const createPolygonPath: (polygon: DrawableShape<"polygon"> | DrawableShape<"curve">) => Path2D;
 export declare const createTrianglePath: (triangle: DrawableShape<"triangle">) => Path2D;
 export declare const getComputedShapeInfos: <T extends DrawableShape, U extends Pick<UtilsSettings, "selectionPadding">>(shape: T, getBorder: (shape: T, settings: U) => Rect, settings: U, getOuterBorder?: (shape: T, borders: Rect, settings: U) => Rect) => {
     borders: Rect;

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/Mode.d.ts

@@ -19,18 +19,21 @@ export type SelectionModeResize<AnchorType extends Point | number = Point> = {
     mode: 'resize';
     cursorStartPosition: Point;
     originalShape: SelectionType;
+    selectedShapesLengthAtMouseDown: number;
     anchor: AnchorType;
 };
 export type SelectionModeRotate = {
     mode: 'rotate';
     cursorStartPosition: Point;
     originalShape: SelectionType;
+    selectedShapesLengthAtMouseDown: number;
     center: Point;
 };
 export type SelectionModeTranslate = {
     mode: 'translate';
     cursorStartPosition: Point;
     originalShape: SelectionType;
+    selectedShapesLengthAtMouseDown: number;
     hasBeenDuplicated: boolean;
     dateStart: number;
 };

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

@@ -49,63 +49,69 @@ export type StyleShape = {
     lineWidth?: number;
     lineDash?: number;
     lineArrow?: number;
+    lineCap?: CanvasLineCap;
     closedPoints?: number;
     fontFamily?: string;
     fontItalic?: boolean;
     fontBold?: boolean;
 };
 export type SelectionDefaultType = {
+    type: 'rect';
     border: Path2D;
     line: Path2D | undefined;
     shapePath: Path2D | undefined;
     anchors: Path2D[];
 };
 export type SelectionLinesType = {
+    type: 'line';
     border: Path2D;
     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;
@@ -124,43 +130,18 @@ export type ShapeEntity<T extends Exclude<ShapeType, 'triangle'> = Exclude<Shape
         center: Point;
         boundingBox: Rect;
     };
-    path?: Path2D | undefined;
-} & DrawableShape<T> & (T extends 'line' ? {
-    selection?: SelectionLinesType | undefined;
-    arrows?: TriangleEntity[];
+    path: Path2D;
+} & 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 +150,4 @@ export type StateData = {
     };
 };
 export type SelectionType = ShapeEntity;
+export {};