@yorab/react-paint 0.11.21 → 0.13.0

package/README.md

@@ -51,7 +51,7 @@ const SHAPES_INIT = [
       lineWidth: 1,
       lineDash: 0,
       lineArrow: 0,
-      pointsCount: 3,
+     closedPoints: 1,
       fontFamily: 'serif'
     }
   }
@@ -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` |
 
 
 
@@ -304,11 +306,8 @@ type SettingsFont = {
   }
 }
 
-type SettingsPointsCount = {
-  pointsCount: {
-    min: number
-    max: number
-    step: number
+type SettingsClosedPoints = {
+  closedPoints: {
     default: number
     hidden?: boolean
   }
@@ -333,14 +332,14 @@ type ToolsPolygonSettings = SettingsOpacity &
   SettingsFillColor &
   SettingsLineWidth &
   SettingsLineDash &
-  SettingsPointsCount
+  SettingsClosedPoints
 
 type ToolsCurveSettings = SettingsOpacity &
   SettingsStrokeColor &
   SettingsFillColor &
   SettingsLineWidth &
   SettingsLineDash &
-  SettingsPointsCount
+  SettingsClosedPoints
 
 type ToolsTriangleSettings = SettingsStrokeColor & SettingsFillColor & SettingsOpacity & SettingsLineWidth & SettingsLineDash
 

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;
@@ -19,23 +13,30 @@ type DrawerType = {
     shapes: ShapeEntity[];
     saveShapes: () => void;
     addShape: (newShape: ShapeEntity) => void;
-    updateSingleShape: (updatedShape: 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>>;
     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>>>;
     isShiftPressed: boolean;
+    isAltPressed: boolean;
     withFrameSelection: boolean;
     withSkeleton: boolean;
 };

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,3 +1,4 @@
+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';
@@ -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;
@@ -33,6 +43,8 @@ type AppOptionsType = {
     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,31 +4,36 @@ 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;
-    updateSingleShape: (updatedShape: ShapeEntity) => void;
+    updateSingleShape: (updatedShape: ShapeEntity, withSave?: boolean) => void;
     selectedShape: ShapeEntity | undefined;
     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;
+    isAltPressed: 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, isAltPressed, withFrameSelection }: UseCanvasType) => {
     hoverMode: HoverModeData;
 };
 export default useDrawableCanvas;

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

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

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,4 +1,6 @@
 import { type OptionalOptions, type UtilsSettings } from './../../canvas/constants/app';
+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 = {
@@ -10,8 +12,21 @@ type UseReactPaintProps = {
     options?: OptionalOptions;
 };
 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: (startPositionShapeId: string, endPositionShapeId: string) => void;
         toggleShapeVisibility: (shape: ShapeEntity) => void;
@@ -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?: ExportedDrawableShape[], clearHistory?: boolean) => void;
-    getCurrentImage: () => string | undefined;
+    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;
@@ -14,7 +14,7 @@ declare const useShapes: (settings: UtilsSettings, width: number, height: number
     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

@@ -6,7 +6,11 @@ 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: 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,11 +1,20 @@
 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 checkPolygonLinesSelectionIntersection: (ctx: CanvasRenderingContext2D, shape: DrawableShape<"polygon" | "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 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/lineSelection.d.ts

@@ -2,7 +2,7 @@ import type { UtilsSettings } from './../../../canvas/constants/app';
 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, gravityAnchors?: boolean) => SelectionLinesType;
+}, settings: UtilsSettings) => SelectionLinesType;
 export declare const drawLineSelection: ({ ctx, shape, withAnchors, selectionWidth, selectionColor, settings }: {
     ctx: CanvasRenderingContext2D;
     shape: DrawableShape<"line"> | DrawableShape<"polygon"> | DrawableShape<"curve">;

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

@@ -5,7 +5,7 @@ export declare const createRecSelectionPath: (path: Path2D | undefined, rect: Dr
 export declare const drawSelectionRect: (ctx: CanvasRenderingContext2D, shape: DrawableShape & {
     selection?: SelectionDefaultType;
 }, selectionColor: string, selectionWidth: number, settings: UtilsSettings, withAnchors: boolean) => void;
-export declare const resizeRectSelection: (cursorPosition: Point, originalShape: DrawableShape, selectionMode: SelectionModeResize, settings: UtilsSettings, keepRatio?: boolean) => {
+export declare const resizeRectSelection: (cursorPosition: Point, originalShape: DrawableShape, selectionMode: SelectionModeResize, settings: UtilsSettings, keepRatio?: boolean, resizeFromCenter?: boolean) => {
     borderX: number;
     borderHeight: number;
     borderY: number;

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

@@ -10,10 +10,10 @@ export declare const createBrush: (shape: {
 }, 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 translateBrush: <U extends DrawableShape<"brush">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings) => U & {
+export declare const translateBrush: <U extends DrawableShape<"brush">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => U & {
     points: Point[][];
 };
-export declare const resizeBrush: (cursorPosition: Point, originalShape: DrawableShape<"brush">, selectionMode: SelectionModeResize, settings: UtilsSettings, keepRatio: boolean) => DrawableShape<"brush">;
+export declare const resizeBrush: (cursorPosition: Point, originalShape: DrawableShape<"brush">, selectionMode: SelectionModeResize, settings: UtilsSettings, keepRatio: boolean, resizeFromCenter: boolean) => DrawableShape<"brush">;
 export declare const addNewPointToShape: <T extends DrawableShape<"brush">>(shape: T, cursorPosition: Point, settings: UtilsSettings) => T & {
     points: Point[][];
 };

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

@@ -10,8 +10,8 @@ export declare const createCircle: (shape: {
 }, 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 translateCircle: <U extends DrawableShape<"circle">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings) => U & {
+export declare const translateCircle: <U extends DrawableShape<"circle">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => U & {
     x: number;
     y: number;
 };
-export declare const resizeCircle: (cursorPosition: Point, originalShape: DrawableShape<"circle">, selectionMode: SelectionModeResize, settings: UtilsSettings) => DrawableShape<"circle">;
+export declare const resizeCircle: (cursorPosition: Point, originalShape: DrawableShape<"circle">, selectionMode: SelectionModeResize, settings: UtilsSettings, resizeFromCenter: boolean) => DrawableShape<"circle">;

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

@@ -11,7 +11,8 @@ export declare const createCurve: (shape: {
 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 translateCurve: <U extends DrawableShape<"curve">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings) => U & {
+export declare const translateCurve: <U extends DrawableShape<"curve">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => U & {
     points: [number, number][];
 };
-export declare const updateCurveLinesCount: <T extends DrawableShape<"curve">>(shape: T, newPointsCount: number, settings: UtilsSettings) => T;
+export declare const addCurveLine: <T extends DrawableShape<"curve">>(shape: T, lineIndex: number, settings: UtilsSettings) => T;
+export declare const addCurvePoint: <T extends DrawableShape<"curve">>(shape: T, cursorPosition: Point, settings: UtilsSettings, temporary?: boolean) => T;

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

@@ -10,8 +10,8 @@ export declare const createEllipse: (shape: {
 }, 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 translateEllipse: <U extends DrawableShape<"ellipse">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings) => U & {
+export declare const translateEllipse: <U extends DrawableShape<"ellipse">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings, singleAxis: boolean) => U & {
     x: number;
     y: number;
 };
-export declare const resizeEllipse: (cursorPosition: Point, originalShape: DrawableShape<"ellipse">, selectionMode: SelectionModeResize, settings: UtilsSettings, keepRatio?: boolean) => DrawableShape<"ellipse">;
+export declare const resizeEllipse: (cursorPosition: Point, originalShape: DrawableShape<"ellipse">, selectionMode: SelectionModeResize, settings: UtilsSettings, keepRatio?: boolean, resizeFromCenter?: boolean) => DrawableShape<"ellipse">;

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

@@ -8,13 +8,14 @@ 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 & {
+export declare const rotateShape: <T extends DrawableShape>(shape: T, cursorPosition: Point, originalShape: T, originalCursorPosition: Point, shapeCenter: Point, settings: UtilsSettings, isShiftPressed: boolean) => T & {
     rotation: number;
 };
-export declare const resizeShape: <T extends DrawableShape>(ctx: CanvasRenderingContext2D, shape: T, cursorPosition: Point, originalShape: T, selectionMode: SelectionModeData<Point | number>, settings: UtilsSettings, isShiftPressed: boolean) => T;
-export declare const translateShape: (cursorPosition: Point, originalShape: ShapeEntity, originalCursorPosition: Point, settings: UtilsSettings) => ShapeEntity;
+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 refreshShape: (shape: ShapeEntity, settings: UtilsSettings) => ShapeEntity;
 export declare const drawShapeSelection: ({ ctx, shape, settings, selectionWidth, selectionColor, withAnchors }: {
     ctx: CanvasRenderingContext2D;

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

@@ -11,7 +11,7 @@ export declare const createLine: (shape: {
 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) => U & {
+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;