@yorab/react-paint 0.11.7 → 0.12.0

package/README.md

@@ -1,4 +1,4 @@
-# React Paint V0.11.7
+# React Paint
 
 An open-source canvas-based library for React used for image annotation or as a digital whiteboard
 
@@ -129,7 +129,7 @@ you will find other usages in <a href="https://github.com/YoRab/react-paint-edit
 | `registerEvent` | `(event: "dataChanged", listener: (data: StateData,  source: 'user' \| 'remote') => void) => void` |  registerEvent is used to register a listener for special events triggered by react-paint. The only currently available event is `dataChanged`. `source` indicates the origin of the state update  |
 | `unregisterEvent` | `(event: "dataChanged", listener?: ((data: StateData,  source: 'user' \| 'remote') => void) \| undefined) => void` | unregisterEvent is used to unregister a listener previously registered. Omitting listener will result in unregistering every listeners for the the given event | 
 | `resetCanvas` | `(shapes: DrawableShape[], clearHistory?: boolean) => Promise<void>` | reset canvas with the given shapes. use `[]` or `undefined` to clear the canvas. Set `false` to `clearHistory` to prevent history stack to be cleared | 
-| `getCurrentImage` | `() => string \| undefined` | Returns a data URL containing the content of the current canvas as a PNG image, or undefined if an error occured |
+| `getCurrentImage` | `(view: 'defaultView' \|  'currentZoom' \| 'fitToShapes') => string` | Returns a data URL containing the content of the current canvas as a PNG image. `defaultView` will export a picture with dimensions based on canvas and no zoom. `currentZoom` will export a picture with dimensions based on canvas and current zoom and offset. `fitToShapes` will export a picture containing all drawn shapes. |
 | `getCurrentData` | `() => StateData` | Returns the current state of the canvas  |
 
 #### `OptionalOptions`
@@ -151,6 +151,8 @@ you will find other usages in <a href="https://github.com/YoRab/react-paint-edit
 | `isBrushShapeDoneOnMouseUp` | `boolean` | *Optional*. Choose whether drawing brush shape after releasing mouse should create a new shape or not | `true` |
 | `canvasSelectionPadding` | `boolean` | *Optional*. Padding between shape and selection frame | `0` |
 | `availableTools` | `CustomToolInput[]` | *Optional*. List of available tools. See CustomTool for more details | `` |
+| `size` | `'fixed' \| 'infinite'` | *Optional*. Choose canvas size mode. `fixed` canvas is bound within its width and height, `infinite` canvas has no bound  | `fixed` |
+| `canZoom` | `'never' \| 'always'` | *Optional*. Choose wether zoom is available `never` zoom is not available, `always` zoom is available  | `never` |
 
 
 

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

@@ -5,13 +5,7 @@ import type { ToolsType } from './../../common/types/tools';
 import React from 'react';
 import './Canvas.css';
 type DrawerType = {
-    disabled?: boolean;
     canGrow?: boolean;
-    canvasSize: {
-        width: number;
-        height: number;
-        scaleRatio: number;
-    };
     selectionColor: string;
     selectionWidth: number;
     settings: UtilsSettings;
@@ -25,13 +19,19 @@ type DrawerType = {
     setSelectionFrame: React.Dispatch<React.SetStateAction<[Point, Point] | undefined>>;
     hoveredShape: ShapeEntity | undefined;
     selectionFrame: [Point, Point] | undefined;
-    refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point, settings: UtilsSettings) => void;
+    refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point, isInsideMask: boolean) => void;
     refreshSelectedShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point, settings: UtilsSettings) => void;
     activeTool: ToolsType;
     setActiveTool: React.Dispatch<React.SetStateAction<ToolsType>>;
-    canvasOffsetStartPosition: Point | undefined;
-    setCanvasOffsetStartPosition: React.Dispatch<React.SetStateAction<Point | undefined>>;
-    setCanvasOffset: React.Dispatch<React.SetStateAction<Point>>;
+    canvasOffsetStartData: {
+        start: Point;
+        originalOffset: Point;
+    } | undefined;
+    setCanvasOffsetStartData: React.Dispatch<React.SetStateAction<{
+        start: Point;
+        originalOffset: Point;
+    } | undefined>>;
+    setCanvasOffset: (offset: Point) => void;
     isInsideComponent: boolean;
     selectionMode: SelectionModeData<number | Point>;
     setSelectionMode: React.Dispatch<React.SetStateAction<SelectionModeData<number | Point>>>;

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

@@ -2,7 +2,6 @@ import type { UtilsSettings } from './../../canvas/constants/app';
 import type { DrawableShape } from './../../common/types/Shapes';
 import './EditTextBox.css';
 type EditTextBoxType = {
-    scaleRatio: number;
     disabled?: boolean;
     shape: DrawableShape<'text'>;
     defaultValue: string[];
@@ -10,5 +9,5 @@ type EditTextBoxType = {
     updateValue: (newValue: string[]) => void;
     saveShapes: () => void;
 };
-declare const EditTextBox: ({ disabled, scaleRatio, shape, defaultValue, updateValue, saveShapes, settings }: EditTextBoxType) => import("react/jsx-runtime").JSX.Element;
+declare const EditTextBox: ({ disabled, shape, defaultValue, updateValue, saveShapes, settings }: EditTextBoxType) => import("react/jsx-runtime").JSX.Element;
 export default EditTextBox;

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

@@ -1,4 +1,5 @@
-import type { DrawableShape, Point } from './../../common/types/Shapes';
+import type { Size } from './../../common/types/Canvas';
+import type { ExportedDrawableShape, Point } from './../../common/types/Shapes';
 import type { CustomToolInput } from './../../common/types/tools';
 import type { RecursivePartial } from './../../common/types/utils';
 export declare const APP_NAME = "react_paint";
@@ -10,12 +11,21 @@ export type UtilsSettings = {
     isBrushShapeDoneOnMouseUp: boolean;
     gridGap: number;
     canvasOffset: Point;
+    canvasZoom: number;
     canvasSize: {
+        realWidth: number;
+        realHeight: number;
         width: number;
         height: number;
         scaleRatio: number;
+        scaleRatioWithNoZoom: number;
     };
     selectionPadding: number;
+    size: 'infinite' | 'fixed';
+    features: {
+        zoom: boolean;
+        edition: boolean;
+    };
 };
 type AppOptionsType = {
     layersManipulation: boolean;
@@ -29,10 +39,12 @@ type AppOptionsType = {
     withUrlPicture: boolean;
     withFrameSelection: boolean;
     withSkeleton: boolean;
-    clearCallback: 'empty' | 'defaultShapes' | (() => DrawableShape[]);
+    clearCallback: 'empty' | 'defaultShapes' | (() => ExportedDrawableShape[]);
     brushAlgo: BrushAlgo;
     isBrushShapeDoneOnMouseUp: boolean;
     canvasSelectionPadding: number;
+    size: Size;
+    canZoom: 'never' | 'always';
 };
 export type OptionalOptions = RecursivePartial<AppOptionsType>;
 export declare const DEFAULT_OPTIONS: AppOptionsType;

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

@@ -0,0 +1,5 @@
+export declare const ZOOM_STEPS: number[];
+export declare const ZOOM_STEP_DEFAULT = 4;
+export declare const ZOOM_BG_COLOR = "#f5f5f5";
+export declare const ZOOM_DETECTION_OFFSET = 30;
+export declare const IOS_TRACKPAD_PINCH_FACTOR = 5;

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

@@ -1,9 +1,10 @@
+import type { UtilsSettings } from './../../canvas/constants/app';
 import { type RefObject } from 'react';
 type UseComponentType = {
-    disabled: boolean;
-    componentRef: RefObject<HTMLElement>;
+    settings: UtilsSettings;
+    componentRef: RefObject<HTMLElement | null>;
 };
-declare const useComponent: ({ disabled, componentRef }: UseComponentType) => {
+declare const useComponent: ({ settings, componentRef }: UseComponentType) => {
     isInsideComponent: boolean;
 };
 export default useComponent;

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

@@ -4,7 +4,6 @@ import type { Point, ShapeEntity } from './../../common/types/Shapes';
 import type { ToolsType } from './../../common/types/tools';
 import type React from 'react';
 type UseCanvasType = {
-    disabled?: boolean;
     shapes: ShapeEntity[];
     saveShapes: () => void;
     addShape: (newShape: ShapeEntity) => void;
@@ -13,22 +12,27 @@ type UseCanvasType = {
     setSelectedShape: React.Dispatch<React.SetStateAction<ShapeEntity | undefined>>;
     activeTool: ToolsType;
     setActiveTool: React.Dispatch<React.SetStateAction<ToolsType>>;
-    refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point, settings: UtilsSettings) => void;
+    refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point, isInsideMask: boolean) => void;
     refreshSelectedShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point, settings: UtilsSettings) => void;
-    canvasOffsetStartPosition: Point | undefined;
-    setCanvasOffsetStartPosition: React.Dispatch<React.SetStateAction<Point | undefined>>;
-    setCanvasOffset: React.Dispatch<React.SetStateAction<Point>>;
+    canvasOffsetStartData: {
+        start: Point;
+        originalOffset: Point;
+    } | undefined;
+    setCanvasOffsetStartData: React.Dispatch<React.SetStateAction<{
+        start: Point;
+        originalOffset: Point;
+    } | undefined>>;
+    setCanvasOffset: (offset: Point) => void;
     isInsideComponent: boolean;
     selectionMode: SelectionModeData<number | Point>;
     setSelectionMode: React.Dispatch<React.SetStateAction<SelectionModeData<number | Point>>>;
     setSelectionFrame: React.Dispatch<React.SetStateAction<[Point, Point] | undefined>>;
-    drawCanvasRef: React.MutableRefObject<HTMLCanvasElement | null>;
-    selectionCanvasRef: React.MutableRefObject<HTMLCanvasElement | null>;
+    drawCanvasRef: React.RefObject<HTMLCanvasElement | null>;
     isShiftPressed: boolean;
     withFrameSelection: boolean;
     settings: UtilsSettings;
 };
-declare const useDrawableCanvas: ({ disabled, addShape, drawCanvasRef, setActiveTool, refreshHoveredShape, shapes, selectionMode, activeTool, isInsideComponent, setCanvasOffset, selectedShape, selectionCanvasRef, canvasOffsetStartPosition, refreshSelectedShapes, setSelectedShape, setSelectionFrame, setCanvasOffsetStartPosition, updateSingleShape, saveShapes, setSelectionMode, settings, isShiftPressed, withFrameSelection }: UseCanvasType) => {
+declare const useDrawableCanvas: ({ addShape, drawCanvasRef, setActiveTool, refreshHoveredShape, shapes, selectionMode, activeTool, isInsideComponent, setCanvasOffset, selectedShape, canvasOffsetStartData, refreshSelectedShapes, setSelectedShape, setSelectionFrame, setCanvasOffsetStartData, updateSingleShape, saveShapes, setSelectionMode, settings, isShiftPressed, withFrameSelection }: UseCanvasType) => {
     hoverMode: HoverModeData;
 };
 export default useDrawableCanvas;

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

@@ -0,0 +1,17 @@
+import type { CanvasSize, Size } from './../../common/types/Canvas';
+import type { Point } from './../../common/types/Shapes';
+type UsePinchZoomProps = {
+    canvasElt: HTMLElement | null;
+    canvasTransformation: {
+        offset: Point;
+        zoom: number;
+    };
+    canvasSize: CanvasSize;
+    size: Size;
+    setCanvasTransformation: (transformation: {
+        offset: Point;
+        zoom: number;
+    }) => void;
+};
+declare const usePinchZoomAndMove: ({ canvasElt, canvasTransformation, canvasSize, size, setCanvasTransformation }: UsePinchZoomProps) => void;
+export default usePinchZoomAndMove;

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

@@ -1,19 +1,34 @@
 import { type OptionalOptions, type UtilsSettings } from './../../canvas/constants/app';
-import type { DrawableShape, Point, ShapeEntity, StateData } from './../../common/types/Shapes';
+import type { CanvasSize } from './../../common/types/Canvas';
+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?: DrawableShape[];
+    shapes?: ExportedDrawableShape[];
     mode?: 'editor' | 'viewer';
     disabled?: boolean;
     options?: OptionalOptions;
 };
-declare const useReactPaint: ({ width, height, shapes: defaultShapes, mode, disabled, options }: UseReactPaintProps) => {
+declare const useReactPaint: ({ width, height, shapes: defaultShapes, mode, disabled, options }?: UseReactPaintProps) => {
+    annotationsProps: {
+        style: {
+            'user-select': string;
+            'touch-action': string;
+            transformOrigin: string;
+            transform: string;
+            '--react-paint-canvas-zoom': number;
+            '--react-paint-canvas-offset-x': number;
+            '--react-paint-canvas-offset-y': number;
+            '--react-paint-app-canvaswidth': number;
+            '--react-paint-app-canvasheight': number;
+        };
+    };
     editorProps: {
-        shapesRef: import("react").MutableRefObject<ShapeEntity[]>;
+        shapesRef: import("react").RefObject<ShapeEntity[]>;
         addPictureShape: (fileOrUrl: File | string, maxWidth?: number, maxHeight?: number) => Promise<ShapeEntity<"picture">>;
-        moveShapes: (firstShapeId: string, lastShapeId: string) => void;
+        moveShapes: (startPositionShapeId: string, endPositionShapeId: string) => void;
         toggleShapeVisibility: (shape: ShapeEntity) => void;
         toggleShapeLock: (shape: ShapeEntity) => void;
         canGoBackward: boolean;
@@ -25,32 +40,27 @@ declare const useReactPaint: ({ width, height, shapes: defaultShapes, mode, disa
         backwardShape: () => void;
         forwardShape: () => void;
         refs: {
-            canvas: import("react").RefObject<HTMLCanvasElement>;
-            editor: import("react").MutableRefObject<HTMLElement | null>;
+            canvas: import("react").RefObject<HTMLCanvasElement | null>;
+            editor: import("react").RefObject<HTMLElement | null>;
             setEditor: (node: HTMLElement | null) => void;
         };
         width: number;
         height: number;
-        canvasSize: {
-            width: number;
-            height: number;
-            scaleRatio: number;
-        };
         selectTool: (tool: ToolsType) => void;
         selectShape: (shape: ShapeEntity) => void;
         activeTool: ToolsType;
         setActiveTool: import("react").Dispatch<import("react").SetStateAction<ToolsType>>;
         setAvailableTools: import("react").Dispatch<import("react").SetStateAction<import("./../../common/types/tools").CustomTool[]>>;
         isEditMode: boolean;
-        isDisabled: boolean;
         availableTools: import("./../../common/types/tools").CustomTool[];
         gridGap: number;
         setGridGap: import("react").Dispatch<import("react").SetStateAction<number>>;
         loadFile: (file: File) => Promise<void>;
-        exportPicture: () => void;
+        exportPicture: (view: "fitToShapes" | "defaultView" | "currentZoom") => void;
         exportData: () => void;
         clearCanvas: () => void;
         settings: UtilsSettings;
+        setCanvasZoom: (action: "unzoom" | "zoom" | "default") => void;
         canvas: {
             canGrow: boolean;
             canShrink: boolean;
@@ -62,7 +72,7 @@ declare const useReactPaint: ({ width, height, shapes: defaultShapes, mode, disa
         };
     };
     canvasProps: {
-        shapesRef: import("react").MutableRefObject<ShapeEntity[]>;
+        shapesRef: import("react").RefObject<ShapeEntity[]>;
         selectedShape: ShapeEntity | undefined;
         selectionFrame: [Point, Point] | undefined;
         hoveredShape: ShapeEntity | undefined;
@@ -70,49 +80,52 @@ declare const useReactPaint: ({ width, height, shapes: defaultShapes, mode, disa
         setSelectedShape: import("react").Dispatch<import("react").SetStateAction<ShapeEntity | undefined>>;
         setSelectionFrame: import("react").Dispatch<import("react").SetStateAction<[Point, Point] | undefined>>;
         refreshSelectedShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point) => void;
-        refreshHoveredShape: (e: MouseEvent | TouchEvent, 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;
         backwardShape: () => void;
         forwardShape: () => void;
         saveShapes: () => void;
         refs: {
-            canvas: import("react").RefObject<HTMLCanvasElement>;
-            editor: import("react").MutableRefObject<HTMLElement | null>;
+            canvas: import("react").RefObject<HTMLCanvasElement | null>;
+            editor: import("react").RefObject<HTMLElement | null>;
             setEditor: (node: HTMLElement | null) => void;
         };
         width: number;
         height: number;
         settings: UtilsSettings;
-        canvasSize: {
-            width: number;
-            height: number;
-            scaleRatio: number;
-        };
-        setCanvasSize: import("react").Dispatch<import("react").SetStateAction<{
-            width: number;
-            height: number;
-            scaleRatio: number;
-        }>>;
-        setCanvasOffset: import("react").Dispatch<import("react").SetStateAction<Point>>;
+        setCanvasSize: import("react").Dispatch<import("react").SetStateAction<CanvasSize>>;
+        setCanvasOffset: (newOffset: Point) => void;
+        setCanvasZoom: (action: "unzoom" | "zoom" | "default") => void;
         selectShape: (shape: ShapeEntity) => void;
         activeTool: ToolsType;
         setActiveTool: import("react").Dispatch<import("react").SetStateAction<ToolsType>>;
         isInsideComponent: boolean;
         isEditMode: boolean;
-        isDisabled: boolean;
         canvas: {
             withSkeleton: boolean;
             withFrameSelection: boolean;
             canGrow: boolean;
             canShrink: boolean;
         };
+        canvasOffsetStartData: {
+            start: Point;
+            originalOffset: Point;
+        } | undefined;
+        setCanvasOffsetStartData: import("react").Dispatch<import("react").SetStateAction<{
+            start: Point;
+            originalOffset: Point;
+        } | undefined>>;
+        selectionMode: SelectionModeData<number | Point>;
+        setSelectionMode: import("react").Dispatch<import("react").SetStateAction<SelectionModeData<number | Point>>>;
     };
     registerEvent: (event: "dataChanged", fn: (data: StateData, source: "user" | "remote") => void) => void;
     unregisterEvent: (event: "dataChanged", fn?: (data: StateData, source: "user" | "remote") => void) => void;
-    resetCanvas: (json?: DrawableShape[], clearHistory?: boolean) => void;
-    getCurrentImage: () => string | undefined;
+    resetCanvas: (json?: ExportedDrawableShape[], clearHistory?: boolean) => void;
+    getCurrentImage: (view: "fitToShapes" | "defaultView" | "currentZoom") => string;
     getCurrentData: () => StateData;
+    setCanvasOffset: (newOffset: Point) => void;
+    setCanvasZoom: (action: "unzoom" | "zoom" | "default") => void;
 };
 export type UseReactPaintReturnType = ReturnType<typeof useReactPaint>;
 export default useReactPaint;

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

@@ -1,5 +1,5 @@
 type UseResizeObserverType = {
-    element: React.RefObject<HTMLElement>;
+    element: React.RefObject<HTMLElement | null>;
     onResized: (width: number, height: number) => unknown;
 };
 declare const useResizeObserver: ({ onResized, element }: UseResizeObserverType) => void;

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

@@ -3,7 +3,7 @@ import type { Point, ShapeEntity, StateData } from './../../common/types/Shapes'
 declare const useShapes: (settings: UtilsSettings, width: number, height: number) => {
     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").MutableRefObject<ShapeEntity[]>;
+    shapesRef: import("react").RefObject<ShapeEntity[]>;
     selectedShape: ShapeEntity | undefined;
     hoveredShape: ShapeEntity | undefined;
     selectionFrame: [Point, Point] | undefined;
@@ -11,10 +11,10 @@ declare const useShapes: (settings: UtilsSettings, width: number, height: number
     refreshSelectedShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point) => void;
     addShape: (newShape: ShapeEntity) => void;
     addPictureShape: (fileOrUrl: File | string, maxWidth?: number, maxHeight?: number) => Promise<ShapeEntity<"picture">>;
-    moveShapes: (firstShapeId: string, lastShapeId: string) => void;
+    moveShapes: (startPositionShapeId: string, endPositionShapeId: string) => void;
     saveShapes: () => void;
     setSelectedShape: import("react").Dispatch<import("react").SetStateAction<ShapeEntity | undefined>>;
-    refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point) => void;
+    refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point, isInsideMask: boolean) => void;
     toggleShapeVisibility: (shape: ShapeEntity) => void;
     toggleShapeLock: (shape: ShapeEntity) => void;
     removeShape: (shape: ShapeEntity) => void;

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

@@ -0,0 +1,21 @@
+import type { CanvasSize, Size } from './../../common/types/Canvas';
+import type { Point } from './../../common/types/Shapes';
+type UseZoomProps = {
+    canvasSize: CanvasSize;
+    size: Size;
+    canvasElt: HTMLCanvasElement | null;
+    zoomEnabled: boolean;
+};
+declare const useZoom: ({ canvasSize, size, zoomEnabled, canvasElt }: UseZoomProps) => {
+    setCanvasTransformation: import("react").Dispatch<import("react").SetStateAction<{
+        offset: Point;
+        zoom: number;
+    }>>;
+    setCanvasOffset: (newOffset: Point) => void;
+    setCanvasZoom: (action: "unzoom" | "zoom" | "default") => void;
+    canvasTransformation: {
+        offset: Point;
+        zoom: number;
+    };
+};
+export default useZoom;

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

@@ -1,12 +1,16 @@
 import type { UtilsSettings } from './../../canvas/constants/app';
-import type { DrawableShape, ShapeEntity } from './../../common/types/Shapes';
+import type { DrawableShape, ExportedDrawableShape, ShapeEntity } from './../../common/types/Shapes';
 export declare const addSizeAndConvertSvgToObjectUrl: (svgFileContent: string) => string;
 export declare const isSvg: (fileOrUrl: File | string) => boolean;
 export declare const fetchAndStringify: (url: string) => Promise<string>;
 export declare const downloadFile: (content: string, fileName: string) => void;
 export declare const getBase64Image: (img: HTMLImageElement) => string;
 export declare const getStringifiedImage: (shape: DrawableShape<"picture">) => string;
-export declare const getCanvasImage: (shapes: DrawableShape[], width: number, height: number, settings: UtilsSettings) => string;
+export declare const getCanvasImage: ({ shapes, settings, view }: {
+    shapes: DrawableShape[];
+    settings: UtilsSettings;
+    view: "fitToShapes" | "defaultView" | "currentZoom";
+}) => string;
 export declare const encodeShapesInString: (shapes: DrawableShape[], width: number, height: number) => string;
 export declare const decodeJson: (file: File) => Promise<unknown>;
-export declare const decodeImportedData: (shapesForJson: DrawableShape[], settings: UtilsSettings) => Promise<ShapeEntity[]>;
+export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[], settings: UtilsSettings) => Promise<ShapeEntity[]>;

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

@@ -1,2 +1,2 @@
 import type { UtilsSettings } from './../../canvas/constants/app';
-export declare const drawGrid: (ctx: CanvasRenderingContext2D, width: number, height: number, settings: UtilsSettings) => void;
+export declare const drawGrid: (ctx: CanvasRenderingContext2D, settings: UtilsSettings) => void;

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

@@ -1,10 +1,16 @@
 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';
-export declare const getCursorPosition: (e: MouseEvent | TouchEvent, canvas: HTMLCanvasElement | null, settings: UtilsSettings) => Point;
+export declare const getCursorPosition: (e: MouseEvent | TouchEvent) => {
+    clientX: number;
+    clientY: number;
+};
+export declare const getCursorPositionInElement: (e: MouseEvent | TouchEvent, element: HTMLElement, canvasSize: CanvasSize) => Point;
+export declare const getCursorPositionInTransformedCanvas: (e: MouseEvent | TouchEvent, canvas: HTMLElement | null, settings: UtilsSettings) => Point;
 export declare const isTouchGesture: (e: MouseEvent | TouchEvent) => e is TouchEvent;
-export declare const getPointPositionAfterCanvasTransformation: (point: Point, shapeRotation: number, [originX, originY]: Point, [canvasOffsetX, canvasOffsetY]: Point) => Point;
-export declare const getPointPositionBeforeCanvasTransformation: (point: Point, shapeRotation: number, [originX, originY]: Point, [canvasOffsetX, canvasOffsetY]: Point) => Point;
+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: (shape: DrawableShape, position: Point, settings: UtilsSettings, checkAnchors?: boolean, radius?: number) => false | HoverModeData;
 export declare const checkPositionIntersection: (ctx: CanvasRenderingContext2D, shape: DrawableShape, position: Point, settings: UtilsSettings) => false | HoverModeData;
 export declare function getRectIntersection(rect1: Rect, rect2: Rect): Rect | undefined;

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

@@ -8,6 +8,7 @@ export declare const createShape: (ctx: CanvasRenderingContext2D, shape: Exclude
 export declare const drawShape: (ctx: CanvasRenderingContext2D, shape: DrawableShape, settings: UtilsSettings) => void;
 export declare const getShapeInfos: (shape: DrawableShape, settings: UtilsSettings) => {
     borders: Rect;
+    outerBorders: Rect;
     center: Point;
 };
 export declare const rotateShape: <T extends DrawableShape>(shape: T, cursorPosition: Point, originalShape: T, originalCursorPosition: Point, shapeCenter: Point, settings: UtilsSettings) => T & {

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">, settings: UtilsSettings) => Path2D | undefined;
+export declare const createBrushPath: (brush: DrawableShape<"brush">, { brushAlgo }: UtilsSettings) => Path2D | undefined;
 export declare const createCurvePath: (curve: DrawableShape<"curve">) => Path2D | undefined;
 export declare const createPolygonPath: (polygon: DrawableShape<"polygon">) => Path2D | undefined;
 export declare const createTrianglePath: (triangle: DrawableShape<"triangle">) => Path2D;

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

@@ -9,4 +9,4 @@ export declare const translatePicture: <U extends DrawableShape<"picture">>(curs
     x: number;
     y: number;
 };
-export declare const resizePicture: (cursorPosition: Point, originalShape: DrawableShape<"picture">, selectionMode: SelectionModeResize, settings: UtilsSettings, keepRatio: boolean) => DrawableShape<"picture">;
+export declare const resizePicture: (cursorPosition: Point, originalShape: DrawableShape<"picture">, selectionMode: SelectionModeResize, settings: UtilsSettings) => DrawableShape<"picture">;

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

@@ -11,7 +11,7 @@ export declare const createRectangle: <T extends "rect" | "square">(shape: {
 }, 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;
-export declare const getRectOppositeAnchorAbsolutePosition: <T extends DrawableShape & Rect>(anchor: Point, center: Point, shape: T, settings: UtilsSettings, [negW, negH]?: [boolean, boolean]) => Point;
+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) => U & {
     x: number;
     y: number;

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

@@ -5,7 +5,7 @@ export declare const getNormalizedSize: (originalWidth: number, originalHeight:
 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, gridOffset?: number) => number;
+export declare const roundRotationForGrid: (rotation: number, settings: UtilsSettings) => number;
 export declare const transformShape: (ctx: CanvasRenderingContext2D, shape: ShapeEntity, cursorPosition: Point, selectionMode: SelectionModeData<Point | number>, settings: UtilsSettings, isShiftPressed: boolean) => ShapeEntity;
 export declare const fitContentInsideContainer: (contentWidth: number, contentHeight: number, containerWidth: number, containerHeight: number, shouldFillContainer?: boolean) => number[];
 export declare const shortenLine: ({ line, size, direction }: {

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

@@ -14,4 +14,6 @@ export declare const getAngleFromVector: ({ targetVector: [point1, point2], radi
     radian?: boolean;
     originVector?: Vector;
 }) => number;
+export declare const getDistanceBetweenPoints: (p1: Point, p2: Point) => number;
+export declare const getCenter: (e1: Point, e2: Point) => Point;
 export {};

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

@@ -0,0 +1,58 @@
+import type { UtilsSettings } from './../../canvas/constants/app';
+import type { CanvasSize, Size } from './../../common/types/Canvas';
+import type { Point, Rect } from './../../common/types/Shapes';
+export declare const getNewOffset: ({ size, zoom, newOffset: [x, y], canvasSize }: {
+    zoom: number;
+    size: Size;
+    newOffset: Point;
+    canvasSize: CanvasSize;
+}) => {
+    zoom: number;
+    offset: Point;
+};
+export declare const calculateNewZoomAndOffset: ({ size, canvasSize, currentOffset, currentZoom, zoom, centerPoint: iCenterPoint }: {
+    size: Size;
+    canvasSize: CanvasSize;
+    currentOffset: Point;
+    currentZoom: number;
+    zoom: number;
+    centerPoint: Point;
+}) => {
+    offset: Point;
+    zoom: number;
+};
+export declare const getNewZoomAndOffset: ({ size, canvasSize, currentOffset, currentZoom, action }: {
+    size: Size;
+    canvasSize: CanvasSize;
+    currentOffset: Point;
+    currentZoom: number;
+    action: "unzoom" | "zoom" | "default";
+}) => {
+    offset: Point;
+    zoom: number;
+};
+export declare const getNewZoomAndOffsetFromDelta: ({ size, canvasSize, currentOffset, currentZoom, delta, centerPoint }: {
+    size: Size;
+    canvasSize: CanvasSize;
+    currentOffset: Point;
+    currentZoom: number;
+    delta: number;
+    centerPoint: Point;
+}) => {
+    offset: Point;
+    zoom: number;
+};
+export declare const getCurrentView: (settings: UtilsSettings) => Rect;
+export declare const getMaskRect: (settings: UtilsSettings) => {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export declare const clipMask: (ctx: CanvasRenderingContext2D, settings: UtilsSettings) => void;
+export declare const drawMask: (ctx: CanvasRenderingContext2D, settings: UtilsSettings) => void;
+export declare const isCursorInsideMask: (cursorPosition: Point, settings: UtilsSettings) => boolean;
+export declare const normalizeWheel: (event: WheelEvent, lastTimeEvent: number) => {
+    deltaX: number;
+    deltaY: number;
+};

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

@@ -0,0 +1,8 @@
+export type CanvasSize = {
+    realWidth: number;
+    realHeight: number;
+    width: number;
+    height: number;
+    scaleRatio: number;
+};
+export type Size = 'infinite' | 'fixed';

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

@@ -31,6 +31,8 @@ export type SelectionModeTranslate = {
 };
 export type SelectionModeData<AnchorType extends Point | number> = SelectionModeDefault | SelectionModeSelectionFrame | SelectionModeBrush | SelectionModeResize<AnchorType> | SelectionModeRotate | SelectionModeTranslate | SelectionModeEditText;
 export type HoverModeData = {
+    outOfView?: boolean;
+} & ({
     mode: 'default';
 } | {
     mode: 'selectionFrame';
@@ -45,4 +47,4 @@ export type HoverModeData = {
     mode: 'translate';
 } | {
     mode: 'textedition';
-};
+});

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

@@ -115,6 +115,7 @@ export type DrawableShape<T extends ShapeType = ShapeType> = {
     scaleX?: number;
     scaleY?: number;
 } : never);
+export type ExportedDrawableShape<T extends ShapeType = ShapeType> = T extends 'picture' ? Omit<DrawableShape<'picture'>, 'img'> : DrawableShape<T>;
 export type ShapeEntity<T extends Exclude<ShapeType, 'triangle'> = Exclude<ShapeType, 'triangle'>> = {
     id: string;
     toolId?: string;

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

@@ -1 +1,2 @@
 export declare const compact: <T>(array: (T | undefined | null)[]) => T[];
+export declare const moveItemPosition: <T>(array: T[], positionToMove: number, positionToEnd: number) => T[];

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

@@ -1 +1,3 @@
 export declare const uniqueId: (prefix?: string) => string;
+export declare const clamp: (value: number, min: number, max: number) => number;
+export declare const isMacOs: () => boolean;