@yorab/react-paint 0.13.1 → 0.15.0

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

@@ -1,17 +1,22 @@
 import type { UtilsSettings } from './../../../canvas/constants/app';
 import type { SelectionModeResize } from './../../../common/types/Mode';
-import type { DrawableShape, Line, Point, Rect, ShapeEntity, StyleShape, Triangle } from './../../../common/types/Shapes';
+import type { DrawableShape, Point, Rect, ShapeEntity, StyleShape, Triangle } from './../../../common/types/Shapes';
 import type { ToolsSettingsType } from './../../../common/types/tools';
-export declare const refreshLine: <T extends DrawableShape<"line">>(line: T, settings: UtilsSettings) => T;
+export declare const getComputedLine: (line: DrawableShape<"line">, settings: UtilsSettings) => {
+    borders: Rect;
+    outerBorders: Rect;
+    center: Point;
+    boundingBox: Rect;
+};
+export declare const refreshLine: <T extends DrawableShape<"line">>(line: T & {
+    id: string;
+}, settings: UtilsSettings) => ShapeEntity<"line">;
 export declare const createLine: (shape: {
     id: string;
     type: "line";
     settings: ToolsSettingsType<"line">;
 }, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"line">;
 export declare const buildTriangleOnLine: (center: Point, rotation: number, lineStyle: StyleShape) => Triangle;
-export declare const drawLine: (ctx: CanvasRenderingContext2D, shape: DrawableShape<"line">) => void;
-export declare const getLineBorder: (line: Line, settings: UtilsSettings) => Rect;
-export declare const translateLine: <U extends DrawableShape<"line">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => U & {
-    points: [Point, Point];
-};
-export declare const resizeLine: <U extends DrawableShape<"line">>(cursorPosition: Point, originalShape: U, selectionMode: SelectionModeResize<number>, settings: UtilsSettings) => U;
+export declare const drawLine: (ctx: CanvasRenderingContext2D, shape: ShapeEntity<"line">) => void;
+export declare const translateLine: (cursorPosition: Point, originalShape: ShapeEntity<"line">, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => ShapeEntity<"line">;
+export declare const resizeLine: (cursorPosition: Point, originalShape: ShapeEntity<"line">, selectionMode: SelectionModeResize<number>, settings: UtilsSettings) => ShapeEntity<"line">;

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

@@ -1,12 +1,28 @@
 import type { UtilsSettings } from './../../../canvas/constants/app';
-import type { Circle, DrawableShape, Line, Point, Rect } from './../../../common/types/Shapes';
+import type { Circle, DrawableShape, Line, Point, Rect, StyleShape } from './../../../common/types/Shapes';
 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 getCatmullRomPoints: (curve: DrawableShape<"curve">, points: Point[]) => [number, number][];
-export declare const catmullRomToBezier: (path: Path2D, p0: Point, p1: Point, p2: Point, p3: Point) => void;
+/** 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;
+    maxX: number;
+    minY: number;
+    maxY: number;
+};
+export declare const getCatmullRomPoints: (curve: DrawableShape<"curve">, points: Point[]) => Point[];
+export declare const catmullRomToBezier: (p0: Point, p1: Point, p2: Point, p3: Point) => {
+    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 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?: (border: Rect, style: StyleShape | undefined) => Rect) => {
+    borders: Rect;
+    outerBorders: Rect;
+    center: Point;
+    boundingBox: Rect;
+};

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

@@ -1,12 +1,16 @@
 import type { UtilsSettings } from './../../../canvas/constants/app';
 import type { SelectionModeResize } from './../../../common/types/Mode';
-import type { DrawableShape, Picture, Point, Rect, ShapeEntity } from './../../../common/types/Shapes';
-export declare const refreshPicture: <T extends DrawableShape<"picture">>(shape: T, settings: UtilsSettings) => T;
-export declare const createPicture: (fileOrUrl: File | string, maxPictureWidth: number, maxPictureHeight: number, settings: UtilsSettings) => Promise<ShapeEntity<"picture">>;
-export declare const drawPicture: (ctx: CanvasRenderingContext2D, picture: DrawableShape<"picture">) => void;
-export declare const getPictureBorder: (picture: Picture, settings: UtilsSettings) => Rect;
-export declare const translatePicture: <U extends DrawableShape<"picture">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => U & {
-    x: number;
-    y: number;
+import type { DrawableShape, Point, ShapeEntity } from './../../../common/types/Shapes';
+export declare const getComputedPicture: (picture: DrawableShape<"picture">, settings: UtilsSettings) => {
+    borders: import("./../../../common/types/Shapes").Rect;
+    outerBorders: import("./../../../common/types/Shapes").Rect;
+    center: Point;
+    boundingBox: import("./../../../common/types/Shapes").Rect;
 };
-export declare const resizePicture: (cursorPosition: Point, originalShape: DrawableShape<"picture">, selectionMode: SelectionModeResize, settings: UtilsSettings, resizeFromCenter: boolean) => DrawableShape<"picture">;
+export declare const refreshPicture: <T extends DrawableShape<"picture">>(shape: T & {
+    id: string;
+}, settings: UtilsSettings) => ShapeEntity<"picture">;
+export declare const createPicture: (fileOrUrl: File | string, maxPictureWidth: number, maxPictureHeight: number, settings: UtilsSettings) => Promise<ShapeEntity<"picture">>;
+export declare const drawPicture: (ctx: CanvasRenderingContext2D, picture: ShapeEntity<"picture">) => void;
+export declare const translatePicture: (cursorPosition: Point, originalShape: ShapeEntity<"picture">, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => ShapeEntity<"picture">;
+export declare const resizePicture: (cursorPosition: Point, originalShape: ShapeEntity<"picture">, selectionMode: SelectionModeResize, settings: UtilsSettings, resizeFromCenter: boolean) => ShapeEntity<"picture">;

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

@@ -2,17 +2,23 @@ import type { UtilsSettings } from './../../../canvas/constants/app';
 import type { SelectionModeResize } from './../../../common/types/Mode';
 import type { DrawableShape, Point, Polygon, Rect, ShapeEntity } from './../../../common/types/Shapes';
 import type { ToolsSettingsType } from './../../../common/types/tools';
-export declare const refreshPolygon: <T extends DrawableShape<"polygon">>(shape: T, settings: UtilsSettings) => T;
+export declare const getComputedPolygon: (polygon: DrawableShape<"polygon">, settings: UtilsSettings) => {
+    borders: Rect;
+    outerBorders: Rect;
+    center: Point;
+    boundingBox: Rect;
+};
+export declare const refreshPolygon: <T extends DrawableShape<"polygon">>(shape: T & {
+    id: string;
+}, settings: UtilsSettings) => ShapeEntity<"polygon">;
 export declare const createPolygon: (shape: {
     id: string;
     type: "polygon";
     settings: ToolsSettingsType<"polygon">;
 }, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"polygon">;
-export declare const drawPolygon: (ctx: CanvasRenderingContext2D, polygon: DrawableShape<"polygon">) => void;
-export declare const getPolygonBorder: (polygon: Polygon, settings: UtilsSettings) => Rect;
-export declare const translatePolygon: <U extends DrawableShape<"polygon">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => U & {
-    points: [number, number][];
-};
-export declare const resizePolygon: (cursorPosition: Point, originalShape: DrawableShape<"polygon">, selectionMode: SelectionModeResize<number>, settings: UtilsSettings) => DrawableShape<"polygon">;
-export declare const addPolygonLine: <T extends DrawableShape<"polygon">>(shape: T, lineIndex: number, cursorPosition: Point, settings: UtilsSettings) => T;
-export declare const addPolygonPoint: <T extends DrawableShape<"polygon">>(shape: T, cursorPosition: Point, settings: UtilsSettings, temporary?: boolean) => T;
+export declare const drawPolygon: (ctx: CanvasRenderingContext2D, polygon: ShapeEntity<"polygon">) => void;
+export declare const getPolygonBorder: (polygon: Polygon, settings: Pick<UtilsSettings, "selectionPadding">) => Rect;
+export declare const translatePolygon: (cursorPosition: Point, originalShape: ShapeEntity<"polygon">, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => ShapeEntity<"polygon">;
+export declare const resizePolygon: (cursorPosition: Point, originalShape: ShapeEntity<"polygon">, selectionMode: SelectionModeResize<number>, settings: UtilsSettings) => ShapeEntity<"polygon">;
+export declare const addPolygonLine: (shape: ShapeEntity<"polygon">, lineIndex: number, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"polygon">;
+export declare const addPolygonPoint: (shape: ShapeEntity<"polygon">, cursorPosition: Point, settings: UtilsSettings, temporary?: boolean) => ShapeEntity<"polygon">;

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

@@ -2,19 +2,64 @@ import type { UtilsSettings } from './../../../canvas/constants/app';
 import type { SelectionModeResize } from './../../../common/types/Mode';
 import type { DrawableShape, Point, Rect, ShapeEntity } from './../../../common/types/Shapes';
 import type { ToolsSettingsType } from './../../../common/types/tools';
-type rectish = 'text' | 'rect' | 'square' | 'picture';
-export declare const refreshRect: <T extends DrawableShape<rectish>>(rect: T, settings: UtilsSettings) => T;
-export declare const createRectangle: <T extends "rect" | "square">(shape: {
+type rectish = 'rect' | 'square';
+export declare const getComputedRect: (rect: DrawableShape<rectish>, settings: UtilsSettings) => {
+    borders: Rect;
+    outerBorders: Rect;
+    center: Point;
+    boundingBox: Rect;
+};
+export declare const refreshRect: <T extends rectish>(rect: DrawableShape<T> & {
+    id: string;
+}, settings: UtilsSettings, isGroup?: boolean) => ShapeEntity<T>;
+export declare const createRectangle: <T extends rectish>(shape: {
     id: string;
     type: T;
     settings: ToolsSettingsType<T>;
-}, cursorPosition: Point, settings: UtilsSettings, width?: number, height?: number) => ShapeEntity<T>;
-export declare const drawRect: (ctx: CanvasRenderingContext2D, shape: DrawableShape<"rect" | "square">) => void;
-export declare const getRectBorder: (rect: Rect, settings: UtilsSettings) => Rect;
+}, cursorPosition: Point, settings: UtilsSettings, isGroup?: boolean, width?: number, height?: number) => ShapeEntity<T>;
+export declare const drawRect: (ctx: CanvasRenderingContext2D, shape: ShapeEntity<rectish>) => void;
+export declare const getRectBorder: (rect: Rect, settings: Pick<UtilsSettings, "selectionPadding">) => Rect;
 export declare const getRectOppositeAnchorAbsolutePosition: <T extends DrawableShape & Rect>(anchor: Point, center: Point, shape: T, [negW, negH]?: [boolean, boolean]) => Point;
-export declare const translateRect: <T extends "rect" | "square", U extends DrawableShape<T>>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => U & {
-    x: number;
-    y: number;
-};
-export declare const resizeRect: <T extends rectish>(cursorPosition: Point, originalShape: DrawableShape<T>, selectionMode: SelectionModeResize, settings: UtilsSettings, keepRatio?: boolean, resizeFromCenter?: boolean) => DrawableShape<T>;
+export declare const translateRect: <T extends rectish>(cursorPosition: Point, originalShape: ShapeEntity<T>, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => ({
+    id: string;
+    computed: {
+        borders: Rect;
+        outerBorders: Rect;
+        center: Point;
+        boundingBox: Rect;
+    };
+} & {
+    rotation?: number;
+    toolId?: string;
+    visible?: boolean;
+    locked?: boolean;
+    style?: import("./../../../common/types/Shapes").StyleShape | undefined;
+} & Rect & {
+    type: "rect";
+} & {
+    selection?: import("./../../../common/types/Shapes").SelectionDefaultType | undefined;
+    path?: Path2D | undefined;
+    type: "rect";
+}) | ({
+    id: string;
+    computed: {
+        borders: Rect;
+        outerBorders: Rect;
+        center: Point;
+        boundingBox: Rect;
+    };
+} & {
+    rotation?: number;
+    toolId?: string;
+    visible?: boolean;
+    locked?: boolean;
+    style?: import("./../../../common/types/Shapes").StyleShape | undefined;
+} & Rect & {
+    type: "square";
+} & {
+    selection?: import("./../../../common/types/Shapes").SelectionDefaultType | undefined;
+    path?: Path2D | undefined;
+    type: "square";
+});
+export declare const resizeRect: <T extends rectish>(cursorPosition: Point, originalShape: ShapeEntity<T>, selectionMode: SelectionModeResize, settings: UtilsSettings, keepRatio?: boolean, resizeFromCenter?: boolean) => ShapeEntity<T>;
 export {};

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

@@ -2,7 +2,15 @@ import type { UtilsSettings } from './../../../canvas/constants/app';
 import type { SelectionModeResize } from './../../../common/types/Mode';
 import type { DrawableShape, Point, Rect, ShapeEntity, Text } from './../../../common/types/Shapes';
 import type { ToolsSettingsType } from './../../../common/types/tools';
-export declare const refreshText: <T extends DrawableShape<"text">>(shape: T, settings: UtilsSettings) => T;
+export declare const getComputedText: (text: DrawableShape<"text">, settings: UtilsSettings) => {
+    borders: Rect;
+    outerBorders: Rect;
+    center: Point;
+    boundingBox: Rect;
+};
+export declare const refreshText: <T extends DrawableShape<"text">>(shape: T & {
+    id: string;
+}, settings: UtilsSettings) => ShapeEntity<"text">;
 export declare const calculateTextFontSize: (ctx: CanvasRenderingContext2D, text: string[], maxWidth: number, fontBold: boolean, fontItalic: boolean, fontFamily?: string | undefined) => number;
 export declare const createText: (ctx: CanvasRenderingContext2D, shape: {
     id: string;
@@ -10,10 +18,7 @@ export declare const createText: (ctx: CanvasRenderingContext2D, shape: {
     settings: ToolsSettingsType<"text">;
 }, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"text">;
 export declare const drawText: (ctx: CanvasRenderingContext2D, text: DrawableShape<"text">) => void;
-export declare const getTextBorder: (text: Text, settings: UtilsSettings) => Rect;
-export declare const translateText: <U extends DrawableShape<"text">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => U & {
-    x: number;
-    y: number;
-};
-export declare const resizeText: (ctx: CanvasRenderingContext2D, cursorPosition: Point, originalShape: DrawableShape<"text">, selectionMode: SelectionModeResize, settings: UtilsSettings, resizeFromCenter: boolean) => DrawableShape<"text">;
-export declare const resizeTextShapeWithNewContent: <U extends DrawableShape<"text">>(ctx: CanvasRenderingContext2D, shape: U, newValue: string[], settings: UtilsSettings) => U;
+export declare const getTextBorder: (text: Text, settings: Pick<UtilsSettings, "selectionPadding">) => Rect;
+export declare const translateText: (cursorPosition: Point, originalShape: ShapeEntity<"text">, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => ShapeEntity<"text">;
+export declare const resizeText: (ctx: CanvasRenderingContext2D, cursorPosition: Point, originalShape: ShapeEntity<"text">, selectionMode: SelectionModeResize, settings: UtilsSettings, resizeFromCenter: boolean) => ShapeEntity<"text">;
+export declare const resizeTextShapeWithNewContent: (ctx: CanvasRenderingContext2D, shape: ShapeEntity<"text">, newValue: string[], settings: UtilsSettings) => ShapeEntity<"text">;

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

@@ -1,3 +1,4 @@
-import type { DrawableShape, Triangle } from './../../../common/types/Shapes';
-export declare const createTriangle: (triangle: Triangle) => DrawableShape<"triangle">;
-export declare const drawTriangle: (ctx: CanvasRenderingContext2D, triangle: DrawableShape<"triangle">) => void;
+import type { UtilsSettings } from './../../../canvas/constants/app';
+import type { Triangle, TriangleEntity } from './../../../common/types/Shapes';
+export declare const createTriangle: (triangle: Triangle, settings: UtilsSettings) => TriangleEntity;
+export declare const drawTriangle: (ctx: CanvasRenderingContext2D, triangle: TriangleEntity) => void;

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

@@ -1,14 +1,14 @@
 import type { UtilsSettings } from './../../canvas/constants/app';
 import type { SelectionModeData } from './../../common/types/Mode';
-import type { DrawableShape, Line, Point, ShapeEntity } from './../../common/types/Shapes';
+import type { DrawableShape, Line, Point, SelectionType } from './../../common/types/Shapes';
 export declare const getNormalizedSize: (originalWidth: number, originalHeight: number, width: number, height: number) => number[];
 export declare const roundValues: (prop: number, precision?: number) => number;
 export declare const scalePoint: (point: Point, minX: number, minY: number, scaleX?: number, scaleY?: number) => Point;
 export declare const roundForGrid: (value: number, settings: UtilsSettings, gridOffset?: number) => number;
 export declare const roundRotationForGrid: (rotation: number, settings: UtilsSettings, isShiftPressed: boolean) => number;
-export declare const boundVectorToSingleAxis: (vector: Point, isShiftPressed: boolean) => number[];
-export declare const transformShape: (ctx: CanvasRenderingContext2D, shape: ShapeEntity, cursorPosition: Point, selectionMode: SelectionModeData<Point | number>, settings: UtilsSettings, isShiftPressed: boolean, isAltPressed: boolean) => ShapeEntity;
-export declare const fitContentInsideContainer: (contentWidth: number, contentHeight: number, containerWidth: number, containerHeight: number, shouldFillContainer?: boolean) => number[];
+export declare const boundVectorToSingleAxis: (vector: Point, isShiftPressed: boolean) => Point;
+export declare const transformShape: (ctx: CanvasRenderingContext2D, selectedShape: SelectionType, cursorPosition: Point, selectionMode: SelectionModeData<Point | number>, settings: UtilsSettings, isShiftPressed: boolean, isAltPressed: boolean) => SelectionType;
+export declare const fitContentInsideContainer: (contentWidth: number, contentHeight: number, containerWidth: number, containerHeight: number, shouldFillContainer?: boolean) => Point;
 export declare const shortenLine: ({ line, size, direction }: {
     line: DrawableShape<"line">;
     size: number;

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

@@ -7,7 +7,7 @@ export declare const isCircleIntersectRect: (rect: Rect, circle: Circle) => bool
 export declare const rotatePoint: ({ origin, point, rotation }: {
     origin?: Point;
     point: Point;
-    rotation: number;
+    rotation?: number | undefined;
 }) => Point;
 export declare const getAngleFromVector: ({ targetVector: [point1, point2], radian, originVector }: {
     targetVector: Vector;

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

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

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

@@ -22,11 +22,11 @@ export type Triangle = {
 };
 export type Polygon = {
     points: Point[];
-    tempPoint?: Point;
+    tempPoint?: Point | undefined;
 };
 export type Curve = {
     points: Point[];
-    tempPoint?: Point;
+    tempPoint?: Point | undefined;
 };
 export type Brush = {
     points: Point[][];
@@ -56,7 +56,7 @@ export type StyleShape = {
 };
 export type SelectionDefaultType = {
     border: Path2D;
-    line: Path2D;
+    line: Path2D | undefined;
     shapePath: Path2D | undefined;
     anchors: Path2D[];
 };
@@ -66,62 +66,103 @@ export type SelectionLinesType = {
     anchors: Path2D[];
 };
 export type DrawableShape<T extends ShapeType = ShapeType> = {
+    rotation?: number;
     toolId?: string;
     visible?: boolean;
     locked?: boolean;
-    rotation: number;
-    style?: StyleShape;
+    style?: StyleShape | undefined;
 } & (T extends 'line' ? Line & {
     type: 'line';
-    selection?: SelectionLinesType;
-    path?: Path2D;
-    arrows?: DrawableShape<'triangle'>[];
 } : T extends 'picture' ? Picture & {
-    type: 'picture';
     img: HTMLImageElement;
-    selection?: SelectionDefaultType;
+    type: 'picture';
 } : T extends 'text' ? Text & {
     type: 'text';
-    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';
-    selection?: SelectionLinesType;
-    path?: Path2D;
 } : T extends 'curve' ? Curve & {
     type: 'curve';
-    selection?: SelectionLinesType;
-    path?: Path2D;
 } : T extends 'brush' ? Brush & {
     type: 'brush';
-    selection?: SelectionDefaultType;
-    path?: Path2D;
     scaleX?: number;
     scaleY?: number;
+} : T extends 'group' ? Rect & {
+    shapes: ShapeEntity[];
+    type: 'group';
 } : never);
 export type ExportedDrawableShape<T extends ShapeType = ShapeType> = T extends 'picture' ? Omit<DrawableShape<'picture'>, 'img'> : DrawableShape<T>;
+export type TriangleEntity = DrawableShape<'triangle'> & {
+    path: Path2D;
+    computed: {
+        borders: Rect;
+        outerBorders: Rect;
+        center: Point;
+        boundingBox: Rect;
+    };
+};
 export type ShapeEntity<T extends Exclude<ShapeType, 'triangle'> = Exclude<ShapeType, 'triangle'>> = {
     id: string;
-    toolId?: string;
-} & DrawableShape<T>;
+    computed: {
+        borders: Rect;
+        outerBorders: Rect;
+        center: Point;
+        boundingBox: Rect;
+    };
+} & DrawableShape<T> & (T extends 'line' ? {
+    selection?: SelectionLinesType | undefined;
+    path?: Path2D | undefined;
+    arrows?: TriangleEntity[];
+    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' ? {
+    selection?: SelectionLinesType | undefined;
+    path?: Path2D | undefined;
+    type: 'curve';
+} : T extends '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?: {
@@ -129,3 +170,4 @@ export type StateData = {
         height: number;
     };
 };
+export type SelectionType = ShapeEntity;

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

@@ -68,6 +68,9 @@ export type CustomTool = {
 } | {
     type: 'picture';
     settings: ToolsSettingsType<'picture'>;
+} | {
+    type: 'group';
+    settings: ToolsSettingsType<'group'>;
 });
 export type SettingsOpacity = {
     opacity: {
@@ -149,7 +152,8 @@ export type ToolsPolygonSettings = SettingsOpacity & SettingsStrokeColor & Setti
 export type ToolsCurveSettings = SettingsOpacity & SettingsStrokeColor & SettingsFillColor & SettingsLineWidth & SettingsLineDash & SettingsClosedPoints;
 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 'triangle' ? ToolsTriangleSettings : T extends 'picture' ? ToolsPictureSettings : never;
+export type ToolsGroupSettings = Partial<SettingsOpacity & SettingsStrokeColor & SettingsFillColor & SettingsLineWidth & SettingsLineDash & SettingsLineArrow>;
+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 : T extends 'group' ? ToolsGroupSettings : never;
 export type ActionsType = 'selection' | 'undo' | 'redo' | 'clear' | 'export' | 'loadfile' | 'savefile' | 'move' | 'uploadpicture' | 'addurlpicture';
 export type ActionsTool = {
     id: string;

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

@@ -1,4 +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];
+    [P in keyof T]?: T[P] extends (infer U)[] ? RecursivePartial<U>[] : T[P] extends object ? RecursivePartial<T[P]> : T[P] | undefined;
 };
 export type ValueOf<T> = T[keyof T];

package/dist/editor/components/common/Button.d.ts

@@ -1,16 +1,16 @@
 import React from 'react';
 import './Button.css';
 type CommonType = {
-    hidden?: boolean;
-    disabled?: boolean;
-    selected?: boolean;
-    icon?: string;
+    hidden?: boolean | undefined;
+    disabled?: boolean | undefined;
+    selected?: boolean | undefined;
+    icon?: string | undefined;
 };
 type ButtonType = CommonType & React.ButtonHTMLAttributes<HTMLButtonElement>;
-type FileInputType = CommonType & {
+export type FileInputType = CommonType & {
     type: 'file' | 'color';
     accept?: string;
     onClick?: React.MouseEventHandler<HTMLElement>;
 } & React.InputHTMLAttributes<HTMLInputElement | HTMLButtonElement>;
-declare const Button: React.ForwardRefExoticComponent<(ButtonType | FileInputType) & React.RefAttributes<HTMLButtonElement | HTMLInputElement>>;
+declare const Button: React.ForwardRefExoticComponent<(FileInputType | ButtonType) & React.RefAttributes<HTMLButtonElement | HTMLInputElement>>;
 export default Button;

package/dist/editor/components/common/FileInput.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import './Button.css';
+declare const FileInput: React.ForwardRefExoticComponent<{
+    hidden?: boolean | undefined;
+    disabled?: boolean | undefined;
+    selected?: boolean | undefined;
+    icon?: string | undefined;
+} & {
+    type: "file" | "color";
+    accept?: string;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+} & React.InputHTMLAttributes<HTMLButtonElement | HTMLInputElement> & React.RefAttributes<HTMLButtonElement | HTMLInputElement>>;
+export default FileInput;

package/dist/editor/components/common/Panel.d.ts

@@ -9,7 +9,7 @@ type PanelType = {
     className?: string;
     fitContainer?: boolean;
     position?: 'bottom' | 'top';
-    alignment?: 'left' | 'right' | 'center';
+    alignment?: 'left' | 'right' | 'center' | undefined;
 };
 declare const Panel: ({ children, title, className, position, fitContainer, alignment, style, ...props }: PanelType) => import("react/jsx-runtime").JSX.Element;
 export default Panel;

package/dist/editor/components/settings/ClosedPointsField.d.ts

@@ -2,7 +2,7 @@ import type React from 'react';
 type ClosedPointsType = {
     selectedSettings: string | undefined;
     setSelectedSettings: React.Dispatch<React.SetStateAction<string | undefined>>;
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     defaultValue?: number | undefined;
     valueChanged: (field: string, value: string | number) => void;
 };

package/dist/editor/components/settings/ColorField.d.ts

@@ -4,7 +4,7 @@ type ShapeStyleColorType = {
     selectedSettings: string | undefined;
     setSelectedSettings: React.Dispatch<React.SetStateAction<string | undefined>>;
     title?: string;
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     field: string;
     mode?: 'fill' | 'stroke';
     value?: string | undefined;

package/dist/editor/components/settings/DeleteButton.d.ts

@@ -1,8 +1,8 @@
-import type { ShapeEntity } from './../../../common/types/Shapes';
+import type { SelectionType, ShapeEntity } from './../../../common/types/Shapes';
 type DeleteShapeButtonType = {
     disabled?: boolean;
-    selectedShape: ShapeEntity;
-    removeShape: (shape: ShapeEntity) => void;
+    selectedShape: SelectionType;
+    removeShape: (shape: ShapeEntity[]) => void;
 };
 declare const DeleteButton: ({ disabled, selectedShape, removeShape }: DeleteShapeButtonType) => import("react/jsx-runtime").JSX.Element;
 export default DeleteButton;

package/dist/editor/components/settings/FontFamilyField.d.ts

@@ -3,7 +3,7 @@ import './FontFamilyField.css';
 type FontFamilyFieldType = {
     selectedSettings: string | undefined;
     setSelectedSettings: React.Dispatch<React.SetStateAction<string | undefined>>;
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     values: string[];
     defaultValue?: number | string | undefined;
     valueChanged: (field: string, value: string | number) => void;

package/dist/editor/components/settings/Layouts.d.ts

@@ -1,4 +1,4 @@
-import type { ShapeEntity } from './../../../common/types/Shapes';
+import type { SelectionType, ShapeEntity } from './../../../common/types/Shapes';
 import type { GridLabelType } from './../../../editor/constants/grid';
 import './Layouts.css';
 import type { UtilsSettings } from './../../../canvas/constants/app';
@@ -7,13 +7,13 @@ type LayoutsType = {
     setGridFormat: (value: GridLabelType) => void;
     settings: UtilsSettings;
     shapes: ShapeEntity[];
-    removeShape: (shape: ShapeEntity) => void;
-    toggleShapeVisibility: (shape: ShapeEntity) => void;
-    toggleShapeLock: (shape: ShapeEntity) => void;
-    selectedShape: ShapeEntity | undefined;
-    selectShape: (shape: ShapeEntity) => void;
+    removeShape: (shape: ShapeEntity[]) => void;
+    toggleShapeVisibility: (shape: ShapeEntity[]) => void;
+    toggleShapeLock: (shape: ShapeEntity[]) => void;
+    selectedShapes: SelectionType | undefined;
+    selectShapes: (shapes: ShapeEntity[]) => void;
     moveShapes: (firstShapeId: string, lastShapeId: string) => void;
     isLayoutPanelShown: boolean;
 };
-declare const Layouts: ({ gridFormat, setGridFormat, settings, shapes, removeShape, toggleShapeVisibility, toggleShapeLock, selectedShape, moveShapes, selectShape, isLayoutPanelShown }: LayoutsType) => import("react/jsx-runtime").JSX.Element | null;
+declare const Layouts: ({ gridFormat, setGridFormat, settings, shapes, removeShape, toggleShapeVisibility, toggleShapeLock, selectedShapes, moveShapes, selectShapes, isLayoutPanelShown }: LayoutsType) => import("react/jsx-runtime").JSX.Element | null;
 export default Layouts;

package/dist/editor/components/settings/LineArrowField.d.ts

@@ -3,7 +3,7 @@ import './LineArrowField.css';
 type LineArrowType = {
     selectedSettings: string | undefined;
     setSelectedSettings: React.Dispatch<React.SetStateAction<string | undefined>>;
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     values: number[];
     defaultValue?: number | string | undefined;
     valueChanged: (field: string, value: string | number) => void;