@yorab/react-paint 0.13.1 → 0.14.0

package/README.md

@@ -144,7 +144,7 @@ you will find other usages in <a href="https://github.com/YoRab/react-paint-edit
 | `withLoadAndSave` | `boolean` | *Optional*.Show button to manually save or load data  | `true` |
 | `withUploadPicture` | `boolean` | *Optional*. Show button to add picture shape stored in base64 | `true` |
 | `withUrlPicture` | `boolean` | *Optional*.Show button to add picture shape with only the url stored. Need connectivity to be displayed | `false` |
-| `withFrameSelection` | `boolean` | *Optional*.Enable frame selection. **Currently, does not support multi shapes selection** | `false` |
+| `withFrameSelection` | `boolean` | *Optional*.Enable frame selection | `true` |
 | `withSkeleton` | `boolean` | *Optional*. Display skeleton when hovering shape | `false` |
 | `clearCallback` | `'empty' \| 'defaultShapes' \| (() => DrawableShape[])` | *Optional*. Set clear button behavior. `empty` clear all shapes, `defaultShapes` uses shapes given in props. It is also possible to set a function returning an array of shapes | `empty` |
 | `brushAlgo` | `'simple' \| 'quadratic'` | *Optional*. Choose which algorithm to display brush shape. `simple` displays path as is, `quadratic` uses quadratic bézier curves  | `simple` |

package/dist/canvas/components/Canvas.d.ts

@@ -1,6 +1,6 @@
 import { type UtilsSettings } from './../../canvas/constants/app';
 import type { SelectionModeData } from './../../common/types/Mode';
-import type { Point, ShapeEntity } from './../../common/types/Shapes';
+import type { Point, SelectionType, ShapeEntity } from './../../common/types/Shapes';
 import type { ToolsType } from './../../common/types/tools';
 import React from 'react';
 import './Canvas.css';
@@ -12,13 +12,19 @@ type DrawerType = {
     isEditMode: boolean;
     shapes: ShapeEntity[];
     saveShapes: () => void;
-    addShape: (newShape: ShapeEntity) => void;
-    updateSingleShape: (updatedShape: ShapeEntity, withSave?: boolean) => void;
-    selectedShape: ShapeEntity | undefined;
-    setSelectedShape: React.Dispatch<React.SetStateAction<ShapeEntity | undefined>>;
-    setSelectionFrame: React.Dispatch<React.SetStateAction<[Point, Point] | undefined>>;
+    addShapes: (newShape: ShapeEntity[]) => void;
+    updateSingleShape: (updatedShape: ShapeEntity[], withSave?: boolean) => void;
+    selectedShape: SelectionType | undefined;
+    setSelectedShape: React.Dispatch<React.SetStateAction<SelectionType | undefined>>;
+    setSelectionFrame: React.Dispatch<React.SetStateAction<{
+        oldSelection: SelectionType | undefined;
+        frame: [Point, Point];
+    } | undefined>>;
     hoveredShape: ShapeEntity | undefined;
-    selectionFrame: [Point, Point] | undefined;
+    selectionFrame: {
+        oldSelection: SelectionType | undefined;
+        frame: [Point, Point];
+    } | undefined;
     refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point, isInsideMask: boolean) => void;
     refreshSelectedShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point, settings: UtilsSettings) => void;
     activeTool: ToolsType;
@@ -39,6 +45,7 @@ type DrawerType = {
     isAltPressed: boolean;
     withFrameSelection: boolean;
     withSkeleton: boolean;
+    setCanvasMoveAcceleration: React.Dispatch<React.SetStateAction<Point>>;
 };
 declare const Canvas: React.ForwardRefExoticComponent<DrawerType & React.RefAttributes<HTMLCanvasElement>>;
 export default Canvas;

package/dist/canvas/constants/shapes.d.ts

@@ -5,4 +5,4 @@ export declare const SELECTION_DEFAULT_COLOR = "blue";
 export declare const SELECTION_ANCHOR_SIZE = 14;
 export declare const SELECTION_ROTATED_ANCHOR_POSITION = 16;
 export declare const SELECTION_RESIZE_ANCHOR_POSITIONS: Point[];
-export declare const ShapeTypeArray: readonly ["brush", "rect", "square", "line", "polygon", "circle", "curve", "ellipse", "picture", "text", "triangle"];
+export declare const ShapeTypeArray: readonly ["brush", "rect", "square", "line", "polygon", "circle", "curve", "ellipse", "picture", "text", "triangle", "group"];

package/dist/canvas/hooks/useDrawableCanvas.d.ts

@@ -1,15 +1,15 @@
 import type { UtilsSettings } from './../../canvas/constants/app';
 import type { HoverModeData, SelectionModeData } from './../../common/types/Mode';
-import type { Point, ShapeEntity } from './../../common/types/Shapes';
+import type { Point, SelectionType, ShapeEntity } from './../../common/types/Shapes';
 import type { ToolsType } from './../../common/types/tools';
 import type React from 'react';
 type UseCanvasType = {
     shapes: ShapeEntity[];
     saveShapes: () => void;
-    addShape: (newShape: ShapeEntity) => void;
-    updateSingleShape: (updatedShape: ShapeEntity, withSave?: boolean) => void;
-    selectedShape: ShapeEntity | undefined;
-    setSelectedShape: React.Dispatch<React.SetStateAction<ShapeEntity | undefined>>;
+    addShapes: (newShape: ShapeEntity[]) => void;
+    updateSingleShape: (updatedShape: ShapeEntity[], withSave?: boolean) => void;
+    selectedShape: SelectionType | undefined;
+    setSelectedShape: React.Dispatch<React.SetStateAction<SelectionType | undefined>>;
     activeTool: ToolsType;
     setActiveTool: React.Dispatch<React.SetStateAction<ToolsType>>;
     refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point, isInsideMask: boolean) => void;
@@ -26,14 +26,18 @@ type UseCanvasType = {
     isInsideComponent: boolean;
     selectionMode: SelectionModeData<number | Point>;
     setSelectionMode: React.Dispatch<React.SetStateAction<SelectionModeData<number | Point>>>;
-    setSelectionFrame: React.Dispatch<React.SetStateAction<[Point, Point] | undefined>>;
+    setSelectionFrame: React.Dispatch<React.SetStateAction<{
+        oldSelection: SelectionType | undefined;
+        frame: [Point, Point];
+    } | undefined>>;
+    setCanvasMoveAcceleration: React.Dispatch<React.SetStateAction<Point>>;
     drawCanvasRef: React.RefObject<HTMLCanvasElement | null>;
     isShiftPressed: boolean;
     isAltPressed: boolean;
     withFrameSelection: boolean;
     settings: UtilsSettings;
 };
-declare const useDrawableCanvas: ({ addShape, drawCanvasRef, setActiveTool, refreshHoveredShape, shapes, selectionMode, activeTool, isInsideComponent, setCanvasOffset, selectedShape, canvasOffsetStartData, refreshSelectedShapes, setSelectedShape, setSelectionFrame, setCanvasOffsetStartData, updateSingleShape, saveShapes, setSelectionMode, settings, isShiftPressed, isAltPressed, withFrameSelection }: UseCanvasType) => {
+declare const useDrawableCanvas: ({ addShapes, drawCanvasRef, setActiveTool, refreshHoveredShape, shapes, selectionMode, activeTool, isInsideComponent, setCanvasOffset, selectedShape, canvasOffsetStartData, refreshSelectedShapes, setSelectedShape, setSelectionFrame, setCanvasOffsetStartData, updateSingleShape, saveShapes, setSelectionMode, setCanvasMoveAcceleration, settings, isShiftPressed, isAltPressed, withFrameSelection }: UseCanvasType) => {
     hoverMode: HoverModeData;
 };
 export default useDrawableCanvas;

package/dist/canvas/hooks/useKeyboard.d.ts

@@ -1,14 +1,14 @@
 import type { UtilsSettings } from './../../canvas/constants/app';
 import type { SelectionModeData } from './../../common/types/Mode';
-import type { Point, ShapeEntity } from './../../common/types/Shapes';
+import type { Point, SelectionType, ShapeEntity } from './../../common/types/Shapes';
 import type { ToolsType } from './../../common/types/tools';
 type UseKeyboardType = {
     isInsideComponent: boolean;
-    selectedShape: ShapeEntity | undefined;
-    pasteShape: (shape: ShapeEntity) => void;
-    updateShape: (shape: ShapeEntity) => void;
-    setSelectedShape: (value: React.SetStateAction<ShapeEntity | undefined>) => void;
-    removeShape: (shape: ShapeEntity) => void;
+    selectedShape: SelectionType | undefined;
+    pasteShapes: (shape: ShapeEntity[]) => void;
+    updateShapes: (shapes: ShapeEntity[]) => void;
+    setSelectedShape: (value: React.SetStateAction<SelectionType | undefined>) => void;
+    removeShape: (shape: ShapeEntity[]) => void;
     backwardShape: () => void;
     forwardShape: () => void;
     setShiftPressed: (value: React.SetStateAction<boolean>) => void;
@@ -16,8 +16,11 @@ type UseKeyboardType = {
     isEditingText: boolean;
     setActiveTool: (tool: ToolsType) => void;
     setSelectionMode: (mode: SelectionModeData<number | Point>) => void;
-    setSelectionFrame: (frame: [Point, Point] | undefined) => void;
+    setSelectionFrame: (args: {
+        oldSelection: SelectionType | undefined;
+        frame: [Point, Point];
+    } | undefined) => void;
     settings: UtilsSettings;
 };
-declare const useKeyboard: ({ isInsideComponent, selectedShape, isEditingText, settings, setSelectedShape, setActiveTool, setSelectionMode, setSelectionFrame, removeShape, pasteShape, updateShape, backwardShape, forwardShape, setShiftPressed, setAltPressed }: UseKeyboardType) => {};
+declare const useKeyboard: ({ isInsideComponent, selectedShape, isEditingText, settings, setSelectedShape, setActiveTool, setSelectionMode, setSelectionFrame, removeShape, pasteShapes, updateShapes, backwardShape, forwardShape, setShiftPressed, setAltPressed }: UseKeyboardType) => {};
 export default useKeyboard;

package/dist/canvas/hooks/useReactPaint.d.ts

@@ -4,12 +4,12 @@ import type { SelectionModeData } from './../../common/types/Mode';
 import type { ExportedDrawableShape, Point, ShapeEntity, StateData } from './../../common/types/Shapes';
 import type { ToolsType } from './../../common/types/tools';
 type UseReactPaintProps = {
-    width?: number;
-    height?: number;
-    shapes?: ExportedDrawableShape[];
-    mode?: 'editor' | 'viewer';
-    disabled?: boolean;
-    options?: OptionalOptions;
+    width?: number | undefined;
+    height?: number | undefined;
+    shapes?: ExportedDrawableShape[] | undefined;
+    mode?: 'editor' | 'viewer' | undefined;
+    disabled?: boolean | undefined;
+    options?: OptionalOptions | undefined;
 };
 declare const useReactPaint: ({ width, height, shapes: defaultShapes, mode, disabled, options }?: UseReactPaintProps) => {
     annotationsProps: {
@@ -29,14 +29,14 @@ declare const useReactPaint: ({ width, height, shapes: defaultShapes, mode, disa
         shapesRef: import("react").RefObject<ShapeEntity[]>;
         addPictureShape: (fileOrUrl: File | string, maxWidth?: number, maxHeight?: number) => Promise<ShapeEntity<"picture">>;
         moveShapes: (startPositionShapeId: string, endPositionShapeId: string) => void;
-        toggleShapeVisibility: (shape: ShapeEntity) => void;
-        toggleShapeLock: (shape: ShapeEntity) => void;
+        toggleShapeVisibility: (shapes: ShapeEntity[]) => void;
+        toggleShapeLock: (shapeGroup: ShapeEntity[]) => void;
         canGoBackward: boolean;
         canGoForward: boolean;
         canClear: boolean;
-        selectedShape: ShapeEntity | undefined;
-        removeShape: (shape: ShapeEntity) => void;
-        updateShape: (updatedShape: ShapeEntity, withSave?: boolean) => void;
+        selectedShape: import("./../../common/types/Shapes").SelectionType | undefined;
+        removeShape: (shapes: ShapeEntity[]) => void;
+        updateShape: (updatedShapes: ShapeEntity[], withSave?: boolean) => void;
         backwardShape: () => void;
         forwardShape: () => void;
         refs: {
@@ -47,7 +47,7 @@ declare const useReactPaint: ({ width, height, shapes: defaultShapes, mode, disa
         width: number;
         height: number;
         selectTool: (tool: ToolsType) => void;
-        selectShape: (shape: ShapeEntity) => void;
+        selectShapes: (shapes: ShapeEntity[]) => void;
         activeTool: ToolsType;
         setActiveTool: import("react").Dispatch<import("react").SetStateAction<ToolsType>>;
         setAvailableTools: import("react").Dispatch<import("react").SetStateAction<import("./../../common/types/tools").CustomTool[]>>;
@@ -73,16 +73,22 @@ declare const useReactPaint: ({ width, height, shapes: defaultShapes, mode, disa
     };
     canvasProps: {
         shapesRef: import("react").RefObject<ShapeEntity[]>;
-        selectedShape: ShapeEntity | undefined;
-        selectionFrame: [Point, Point] | undefined;
+        selectedShape: import("./../../common/types/Shapes").SelectionType | undefined;
+        selectionFrame: {
+            oldSelection: import("./../../common/types/Shapes").SelectionType | undefined;
+            frame: [Point, Point];
+        } | undefined;
         hoveredShape: ShapeEntity | undefined;
-        addShape: (newShape: ShapeEntity) => void;
-        setSelectedShape: import("react").Dispatch<import("react").SetStateAction<ShapeEntity | undefined>>;
-        setSelectionFrame: import("react").Dispatch<import("react").SetStateAction<[Point, Point] | undefined>>;
+        addShape: (newShapes: ShapeEntity[]) => void;
+        setSelectedShape: import("react").Dispatch<import("react").SetStateAction<import("./../../common/types/Shapes").SelectionType | undefined>>;
+        setSelectionFrame: import("react").Dispatch<import("react").SetStateAction<{
+            oldSelection: import("./../../common/types/Shapes").SelectionType | undefined;
+            frame: [Point, Point];
+        } | undefined>>;
         refreshSelectedShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point) => void;
         refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point, isInsideMask: boolean) => void;
-        removeShape: (shape: ShapeEntity) => void;
-        updateShape: (updatedShape: ShapeEntity, withSave?: boolean) => void;
+        removeShape: (shapes: ShapeEntity[]) => void;
+        updateShape: (updatedShapes: ShapeEntity[], withSave?: boolean) => void;
         backwardShape: () => void;
         forwardShape: () => void;
         saveShapes: () => void;
@@ -97,7 +103,7 @@ declare const useReactPaint: ({ width, height, shapes: defaultShapes, mode, disa
         setCanvasSize: import("react").Dispatch<import("react").SetStateAction<CanvasSize>>;
         setCanvasOffset: (newOffset: Point) => void;
         setCanvasZoom: (action: "unzoom" | "zoom" | "default") => void;
-        selectShape: (shape: ShapeEntity) => void;
+        selectShapes: (shapes: ShapeEntity[]) => void;
         activeTool: ToolsType;
         setActiveTool: import("react").Dispatch<import("react").SetStateAction<ToolsType>>;
         isInsideComponent: boolean;
@@ -118,10 +124,16 @@ declare const useReactPaint: ({ width, height, shapes: defaultShapes, mode, disa
         } | undefined>>;
         selectionMode: SelectionModeData<number | Point>;
         setSelectionMode: import("react").Dispatch<import("react").SetStateAction<SelectionModeData<number | Point>>>;
+        setCanvasMoveAcceleration: import("react").Dispatch<import("react").SetStateAction<Point>>;
+        isShiftPressed: boolean;
+        isAltPressed: boolean;
+        setShiftPressed: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+        setAltPressed: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     };
     registerEvent: (event: "dataChanged", fn: (data: StateData, source: "user" | "remote") => void) => void;
     unregisterEvent: (event: "dataChanged", fn?: (data: StateData, source: "user" | "remote") => void) => void;
     resetCanvas: (json?: ExportedDrawableShape[], clearHistory?: boolean) => void;
+    resetZoom: () => void;
     getCurrentImage: (view: "fitToShapes" | "defaultView" | "currentZoom") => string;
     getCurrentData: () => StateData;
     setCanvasOffset: (newOffset: Point) => void;

package/dist/canvas/hooks/useShapes.d.ts

@@ -1,24 +1,30 @@
 import { type UtilsSettings } from './../../canvas/constants/app';
-import type { Point, ShapeEntity, StateData } from './../../common/types/Shapes';
-declare const useShapes: (settings: UtilsSettings, width: number, height: number) => {
+import type { Point, SelectionType, ShapeEntity, StateData } from './../../common/types/Shapes';
+declare const useShapes: (settings: UtilsSettings, width: number, height: number, isShiftPressed: boolean) => {
     registerEvent: (event: "dataChanged", fn: (data: StateData, source: "user" | "remote") => void) => void;
     unregisterEvent: (event: "dataChanged", fn?: (data: StateData, source: "user" | "remote") => void) => void;
     shapesRef: import("react").RefObject<ShapeEntity[]>;
-    selectedShape: ShapeEntity | undefined;
+    selectedShape: SelectionType | undefined;
     hoveredShape: ShapeEntity | undefined;
-    selectionFrame: [Point, Point] | undefined;
-    setSelectionFrame: import("react").Dispatch<import("react").SetStateAction<[Point, Point] | undefined>>;
+    selectionFrame: {
+        oldSelection: SelectionType | undefined;
+        frame: [Point, Point];
+    } | undefined;
+    setSelectionFrame: import("react").Dispatch<import("react").SetStateAction<{
+        oldSelection: SelectionType | undefined;
+        frame: [Point, Point];
+    } | undefined>>;
     refreshSelectedShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point) => void;
-    addShape: (newShape: ShapeEntity) => void;
+    addShapes: (newShapes: ShapeEntity[]) => void;
     addPictureShape: (fileOrUrl: File | string, maxWidth?: number, maxHeight?: number) => Promise<ShapeEntity<"picture">>;
     moveShapes: (startPositionShapeId: string, endPositionShapeId: string) => void;
     saveShapes: () => void;
-    setSelectedShape: import("react").Dispatch<import("react").SetStateAction<ShapeEntity | undefined>>;
+    setSelectedShape: import("react").Dispatch<import("react").SetStateAction<SelectionType | undefined>>;
     refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point, isInsideMask: boolean) => void;
-    toggleShapeVisibility: (shape: ShapeEntity) => void;
-    toggleShapeLock: (shape: ShapeEntity) => void;
-    removeShape: (shape: ShapeEntity) => void;
-    updateShape: (updatedShape: ShapeEntity, withSave?: boolean) => void;
+    toggleShapeVisibility: (shapes: ShapeEntity[]) => void;
+    toggleShapeLock: (shapeGroup: ShapeEntity[]) => void;
+    removeShape: (shapes: ShapeEntity[]) => void;
+    updateShape: (updatedShapes: ShapeEntity[], withSave?: boolean) => void;
     backwardShape: () => void;
     forwardShape: () => void;
     clearShapes: (shapesToInit: ShapeEntity[], options: {

package/dist/canvas/hooks/useZoom.d.ts

@@ -13,6 +13,7 @@ declare const useZoom: ({ canvasSize, size, zoomEnabled, canvasElt }: UseZoomPro
     }>>;
     setCanvasOffset: (newOffset: Point) => void;
     setCanvasZoom: (action: "unzoom" | "zoom" | "default") => void;
+    resetZoom: () => void;
     canvasTransformation: {
         offset: Point;
         zoom: number;

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

@@ -8,5 +8,7 @@ export declare const updateCanvasContext: (ctx: CanvasRenderingContext2D, style?
     lineWidth?: number;
     lineDash?: number;
     lineCap?: CanvasLineCap;
+    shadowColor?: string;
+    shadowBlur?: number;
 }) => void;
 export declare const transformCanvas: (ctx: CanvasRenderingContext2D, settings: UtilsSettings, rotation?: number, translation?: Point) => void;

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

@@ -1,7 +1,7 @@
 import type { UtilsSettings } from './../../canvas/constants/app';
 import type { CanvasSize } from './../../common/types/Canvas';
 import type { HoverModeData } from './../../common/types/Mode';
-import type { DrawableShape, Point, Rect } from './../../common/types/Shapes';
+import type { DrawableShape, Point, Rect, SelectionType } from './../../common/types/Shapes';
 export declare const getCursorPosition: (e: MouseEvent | TouchEvent) => {
     clientX: number;
     clientY: number;
@@ -11,13 +11,13 @@ 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: DrawableShape, position: Point, settings: UtilsSettings, checkAnchors?: boolean, radius?: number) => false | HoverModeData;
+export declare const checkSelectionIntersection: (ctx: CanvasRenderingContext2D, shape: SelectionType, position: Point, settings: UtilsSettings, checkAnchors?: boolean, radius?: number) => false | HoverModeData;
 export declare const checkPolygonLinesSelectionIntersection: (ctx: CanvasRenderingContext2D, shape: DrawableShape<"polygon" | "curve">, position: Point, settings: UtilsSettings, radius?: number) => false | {
     lineIndex: number;
 };
 export declare const checkCurveLinesSelectionIntersection: (ctx: CanvasRenderingContext2D, shape: DrawableShape<"curve">, position: Point, settings: UtilsSettings, radius?: number) => false | {
     lineIndex: number;
 };
-export declare const checkPositionIntersection: (ctx: CanvasRenderingContext2D, shape: DrawableShape, position: Point, settings: UtilsSettings) => false | HoverModeData;
+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: DrawableShape, selectionFrame: [Point, Point], settings: UtilsSettings) => boolean;

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

@@ -0,0 +1,3 @@
+import type { UtilsSettings } from './../../../canvas/constants/app';
+import type { DrawableShape } from './../../../common/types/Shapes';
+export declare const drawSelectionGroup: (ctx: CanvasRenderingContext2D, shape: DrawableShape<"group">, selectionColor: string, selectionWidth: number, settings: UtilsSettings, withAnchors: boolean) => void;

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

@@ -1,13 +1,15 @@
 import type { UtilsSettings } from './../../../canvas/constants/app';
+import type { HoverModeData } from './../../../common/types/Mode';
 import type { DrawableShape, Point, SelectionLinesType } from './../../../common/types/Shapes';
 export declare const createLineSelectionPath: (path: Path2D | undefined, shape: DrawableShape<"line" | "polygon" | "curve"> & {
     points: readonly Point[];
 }, settings: UtilsSettings) => SelectionLinesType;
-export declare const drawLineSelection: ({ ctx, shape, withAnchors, selectionWidth, selectionColor, settings }: {
+export declare const drawLineSelection: ({ ctx, shape, withAnchors, selectionWidth, selectionColor, hoverMode, settings }: {
     ctx: CanvasRenderingContext2D;
     shape: DrawableShape<"line"> | DrawableShape<"polygon"> | DrawableShape<"curve">;
     withAnchors: boolean;
     selectionWidth: number;
     selectionColor: string;
+    hoverMode: HoverModeData;
     settings: UtilsSettings;
 }) => void;

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

@@ -1,9 +1,9 @@
 import type { UtilsSettings } from './../../../canvas/constants/app';
 import type { SelectionModeResize } from './../../../common/types/Mode';
 import type { DrawableShape, Point, SelectionDefaultType } from './../../../common/types/Shapes';
-export declare const createRecSelectionPath: (path: Path2D | undefined, rect: DrawableShape, settings: UtilsSettings) => SelectionDefaultType;
+export declare const createRecSelectionPath: (path: Path2D | undefined, rect: DrawableShape, settings: UtilsSettings, isGroup?: boolean) => SelectionDefaultType;
 export declare const drawSelectionRect: (ctx: CanvasRenderingContext2D, shape: DrawableShape & {
-    selection?: SelectionDefaultType;
+    selection?: SelectionDefaultType | undefined;
 }, selectionColor: string, selectionWidth: number, settings: UtilsSettings, withAnchors: boolean) => void;
 export declare const resizeRectSelection: (cursorPosition: Point, originalShape: DrawableShape, selectionMode: SelectionModeResize, settings: UtilsSettings, keepRatio?: boolean, resizeFromCenter?: boolean) => {
     borderX: number;

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

@@ -1,8 +1,15 @@
 import type { UtilsSettings } from './../../canvas/constants/app';
 import type { HoverModeData, SelectionModeData } from './../../common/types/Mode';
-import type { Point, ShapeEntity } from './../../common/types/Shapes';
-export declare const getNewSelectionData: (hoverMode: HoverModeData, selectedShape: ShapeEntity, cursorPosition: Point, settings: UtilsSettings) => SelectionModeData<Point | number> | undefined;
-export declare const selectShape: (ctx: CanvasRenderingContext2D, shapes: ShapeEntity[], cursorPosition: Point, settings: UtilsSettings, selectedShape: ShapeEntity | undefined, isTouchGesture: boolean, withFrameSelection: boolean) => {
+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, settings: UtilsSettings) => 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) => {
     mode: SelectionModeData<Point | number>;
-    shape: ShapeEntity | undefined;
+    shape: SelectionType | undefined;
 };
+export declare const buildShapesGroup: (shapes: ShapeEntity[], settings: UtilsSettings) => SelectionType | undefined;
+export declare const applyToSelectedShape: (applyToShape: (shape: ShapeEntity, settings: UtilsSettings) => ShapeEntity, settings: UtilsSettings) => (selection: SelectionType | undefined) => SelectionType | undefined;
+export declare const getSelectedShapes: (selection: SelectionType | undefined) => ShapeEntity[];
+export declare const addToSelectedShapes: (selection: SelectionType | undefined, shapes: ShapeEntity[]) => ShapeEntity[];
+export declare const omitFromSelectedShapes: (selection: SelectionType | undefined, shape: ShapeEntity) => ShapeEntity[];
+export declare const getSelectedShapesTools: (selection: SelectionType | undefined, availableTools: CustomTool[]) => CustomTool | undefined;

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

@@ -9,7 +9,7 @@ export declare const createBrush: (shape: {
     settings: ToolsSettingsType<"brush">;
 }, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"brush">;
 export declare const drawBrush: (ctx: CanvasRenderingContext2D, shape: DrawableShape<"brush">) => void;
-export declare const getBrushBorder: (brush: DrawableShape<"brush">, { selectionPadding }: UtilsSettings) => Rect;
+export declare const getBrushBorder: (brush: DrawableShape<"brush">, { selectionPadding }: Pick<UtilsSettings, "selectionPadding">) => Rect;
 export declare const translateBrush: <U extends DrawableShape<"brush">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => U & {
     points: Point[][];
 };

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

@@ -9,7 +9,7 @@ export declare const createCircle: (shape: {
     settings: ToolsSettingsType<"circle">;
 }, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"circle">;
 export declare const drawCircle: (ctx: CanvasRenderingContext2D, circle: DrawableShape<"circle">) => void;
-export declare const getCircleBorder: (circle: Circle, settings: UtilsSettings) => Rect;
+export declare const getCircleBorder: (circle: Circle, settings: Pick<UtilsSettings, "selectionPadding">) => Rect;
 export declare const translateCircle: <U extends DrawableShape<"circle">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => U & {
     x: number;
     y: number;

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

@@ -10,7 +10,7 @@ export declare const createCurve: (shape: {
 }, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"curve">;
 export declare const resizeCurve: (cursorPosition: Point, originalShape: DrawableShape<"curve">, selectionMode: SelectionModeResize<number>, settings: UtilsSettings) => DrawableShape<"curve">;
 export declare const drawCurve: (ctx: CanvasRenderingContext2D, curve: DrawableShape<"curve">) => void;
-export declare const getCurveBorder: (polygon: import("./../../../common/types/Shapes").Polygon, settings: UtilsSettings) => import("./../../../common/types/Shapes").Rect;
+export declare const getCurveBorder: (polygon: import("./../../../common/types/Shapes").Polygon, settings: Pick<UtilsSettings, "selectionPadding">) => import("./../../../common/types/Shapes").Rect;
 export declare const translateCurve: <U extends DrawableShape<"curve">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => U & {
     points: [number, number][];
 };

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

@@ -9,7 +9,7 @@ export declare const createEllipse: (shape: {
     settings: ToolsSettingsType<"ellipse">;
 }, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"ellipse">;
 export declare const drawEllipse: (ctx: CanvasRenderingContext2D, ellipse: DrawableShape<"ellipse">) => void;
-export declare const getEllipseBorder: (ellipse: Ellipse, settings: UtilsSettings) => Rect;
+export declare const getEllipseBorder: (ellipse: Ellipse, settings: Pick<UtilsSettings, "selectionPadding">) => Rect;
 export declare const translateEllipse: <U extends DrawableShape<"ellipse">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => U & {
     x: number;
     y: number;

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

@@ -1,12 +1,12 @@
 import type { UtilsSettings } from './../../../canvas/constants/app';
-import type { SelectionModeData } from './../../../common/types/Mode';
-import type { DrawableShape, Point, Rect, ShapeEntity } from './../../../common/types/Shapes';
+import type { HoverModeData, SelectionModeData } from './../../../common/types/Mode';
+import type { DrawableShape, Point, Rect, SelectionType, ShapeEntity } from './../../../common/types/Shapes';
 import type { CustomTool } from './../../../common/types/tools';
 export declare const createShape: (ctx: CanvasRenderingContext2D, shape: Exclude<CustomTool, {
     type: "picture";
-}>, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity;
+}>, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity | undefined;
 export declare const drawShape: (ctx: CanvasRenderingContext2D, shape: DrawableShape, settings: UtilsSettings) => void;
-export declare const getShapeInfos: (shape: DrawableShape, settings: UtilsSettings) => {
+export declare const getShapeInfos: (shape: DrawableShape, settings: Pick<UtilsSettings, "selectionPadding">) => {
     borders: Rect;
     outerBorders: Rect;
     center: Point;
@@ -16,18 +16,23 @@ export declare const rotateShape: <T extends DrawableShape>(shape: T, cursorPosi
 };
 export declare const resizeShape: <T extends DrawableShape>(ctx: CanvasRenderingContext2D, shape: T, cursorPosition: Point, originalShape: T, selectionMode: SelectionModeData<Point | number>, settings: UtilsSettings, isShiftPressed: boolean, isAltPressed: boolean) => T;
 export declare const translateShape: (cursorPosition: Point, originalShape: ShapeEntity, originalCursorPosition: Point, settings: UtilsSettings, isShiftPressed: boolean) => ShapeEntity;
+export declare const translateShapes: (cursorPosition: Point, originalShape: SelectionType, originalCursorPosition: Point, settings: UtilsSettings, isShiftPressed: boolean) => ShapeEntity[];
 export declare const refreshShape: (shape: ShapeEntity, settings: UtilsSettings) => ShapeEntity;
-export declare const drawShapeSelection: ({ ctx, shape, settings, selectionWidth, selectionColor, withAnchors }: {
+export declare const drawShapeSelection: ({ ctx, shape, settings, selectionWidth, selectionColor, hoverMode, withAnchors }: {
     ctx: CanvasRenderingContext2D;
-    shape: DrawableShape;
+    shape: SelectionType;
     settings: UtilsSettings;
     selectionWidth: number;
     selectionColor: string;
+    hoverMode: HoverModeData;
     withAnchors?: boolean;
 }) => void;
 export declare const drawSelectionFrame: ({ ctx, selectionFrame, settings }: {
     ctx: CanvasRenderingContext2D;
-    selectionFrame: [Point, Point];
+    selectionFrame: {
+        oldSelection: SelectionType | undefined;
+        frame: [Point, Point];
+    };
     settings: UtilsSettings;
 }) => void;
-export declare const copyShape: (shape: ShapeEntity, settings: UtilsSettings) => ShapeEntity;
+export declare const copyShapes: (groupShape: SelectionType, settings: UtilsSettings) => ShapeEntity[];

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

@@ -10,7 +10,7 @@ export declare const createLine: (shape: {
 }, 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 getLineBorder: (line: Line, settings: Pick<UtilsSettings, "selectionPadding">) => Rect;
 export declare const translateLine: <U extends DrawableShape<"line">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => U & {
     points: [Point, Point];
 };

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

@@ -5,7 +5,7 @@ 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 getCatmullRomPoints: (curve: DrawableShape<"curve">, points: Point[]) => Point[];
 export declare const catmullRomToBezier: (path: Path2D, p0: Point, p1: Point, p2: Point, p3: Point) => void;
 export declare const createCurvePath: (curve: DrawableShape<"curve">) => Path2D | undefined;
 export declare const createPolygonPath: (polygon: DrawableShape<"polygon"> | DrawableShape<"curve">) => Path2D | undefined;

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

@@ -4,7 +4,7 @@ import type { DrawableShape, Picture, Point, Rect, ShapeEntity } from './../../.
 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 getPictureBorder: (picture: Picture, settings: Pick<UtilsSettings, "selectionPadding">) => Rect;
 export declare const translatePicture: <U extends DrawableShape<"picture">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => U & {
     x: number;
     y: number;

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

@@ -9,7 +9,7 @@ export declare const createPolygon: (shape: {
     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 getPolygonBorder: (polygon: Polygon, settings: Pick<UtilsSettings, "selectionPadding">) => Rect;
 export declare const translatePolygon: <U extends DrawableShape<"polygon">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => U & {
     points: [number, number][];
 };

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

@@ -3,14 +3,14 @@ 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 refreshRect: <T extends DrawableShape<rectish>>(rect: T, settings: UtilsSettings, isGroup?: boolean) => T;
 export declare const createRectangle: <T extends "rect" | "square">(shape: {
     id: string;
     type: T;
     settings: ToolsSettingsType<T>;
-}, cursorPosition: Point, settings: UtilsSettings, width?: number, height?: number) => ShapeEntity<T>;
+}, cursorPosition: Point, settings: UtilsSettings, isGroup?: boolean, 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;
+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;

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

@@ -10,7 +10,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 getTextBorder: (text: Text, settings: Pick<UtilsSettings, "selectionPadding">) => Rect;
 export declare const translateText: <U extends DrawableShape<"text">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => U & {
     x: number;
     y: number;

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/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 = {