@yorab/react-paint 0.10.0 → 0.11.0

package/README.md

@@ -1 +1,173 @@
-# React Paint V0.9.3
+# React Paint V0.11.0
+
+An open-source canvas-based library for React used for image annotation or as a digital whiteboard
+
+## Features
+
+
+## Quick start
+
+```bash
+npm i @yorab/react-paint
+```
+Note : react-paint needs <a href="https://www.npmjs.com/package/react">react</a> and <a href="https://www.npmjs.com/package/react-dom">react-dom</a> packages to work properly
+
+## Usage
+
+### Basic usage
+
+```tsx
+import { Canvas, Editor, useReactPaint } from '@yorab/react-paint'
+
+const BasicUsage = () => {
+  const { editorProps, canvasProps } = useReactPaint()
+
+  return (
+    <Editor editorProps={editorProps}>
+      <Canvas canvasProps={canvasProps} />
+    </Editor>
+  )
+}
+```
+
+### Advanced usage
+
+```tsx
+import { useEffect, useState } from 'react'
+import { Canvas, Editor, useReactPaint, type DrawableShape, type StateData } from '@yorab/react-paint'
+
+const SHAPES_INIT = [
+  {
+    type: 'rect',
+    x: 300,
+    y: 300,
+    width: 100,
+    height: 200,
+    rotation: 0,
+    style: {
+      fillColor: '#6a4e01',
+      strokeColor: 'transparent',
+      opacity: 100,
+      lineWidth: 1,
+      lineDash: 0,
+      lineArrow: 0,
+      pointsCount: 3,
+      fontFamily: 'serif'
+    }
+  }
+]
+
+const AdvancedUsage = () => {
+  const [shapes, setShapes] = useState<DrawableShape[] | undefined>(SHAPES_INIT) // keep shapes state for internal use
+
+  const { editorProps, canvasProps, registerEvent, unregisterEvent } = useReactPaint({
+    width: 1920,
+    height: 1080,
+    shapes,
+    options: {
+      canGrow: true,
+      canShrink: true,
+      brushAlgo: 'quadratic',
+      clearCallback: 'defaultShapes'
+    }
+  })
+
+  const editorOptions = {
+    fontColor: '#2c1e69',
+    fontHoverColor: '#0d0931'
+  }
+
+  const canvasOptions = {
+    canvasBackgroundColor: '#ffffff'
+  }
+
+  useEffect(() => {
+    const onDataChanged = (data: StateData) => {
+      setShapes(data.shapes)
+    }
+    registerEvent('dataChanged', onDataChanged)
+    
+    return () => {
+      unregisterEvent('dataChanged', onDataChanged)
+    }
+  }, [registerEvent, unregisterEvent])
+
+  return (
+    <Editor editorProps={editorProps} options={editorOptions}>
+      <Canvas canvasProps={canvasProps} options={canvasOptions} />
+    </Editor>
+  )
+}
+```
+
+### Other usages
+
+you will find other usages in <a href="https://github.com/YoRab/react-paint-editor/tree/main/stories">stories</a>
+
+### API
+
+#### `useReactPaint`
+
+##### Parameters
+
+| Parameter | Type | Description | Default value |
+| :--- | :--- | :--- | :--- |
+| `width` | `number` | *Optional*. Canvas width in px | `1000` |
+| `height` | `number` | *Optional*. Canvas height in px | `600` |
+| `shapes` | [`DrawableShape[]`](####drawableshape) | *Optional*. Array of shapes used to init the canvas | `undefined` |
+| `mode` | `editor\|viewer` | *Optional*. `editor` lets you interact with the canvas and editor. `viewer` hides the editor and makes the canvas read-only| `editor` |
+| `disabled` | `boolean` | *Optional*. Global parameter used to prevent interaction with every element in the editor or canvas | `false` |
+| `options` | [`OptionalOptions`](####optionaloptions) | *Optional*. Set of options to customize available features  | See [`OptionalOptions`]((####optionaloptions)) |
+
+
+##### Returns
+
+| Parameter | Type | Description |
+| :--- | :--- | :--- |
+| `canvasProps` | `object` | Set of properties to forward to Canvas component |
+| `editorProps` | `object` | Set of properties to forward to Editor component |
+| `registerEvent` | `(event: "dataChanged", listener: (data: StateData) => void) => void` |  registerEvent is used to register a listener for special events triggered by react-paint. The only currently available event is `dataChanged` |
+| `unregisterEvent` | `(event: "dataChanged", listener?: ((data: StateData) => 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 |
+| `getCurrentData` | `() => StateData` | Returns the current state of the canvas  |
+
+#### Canvas
+
+##### Parameters
+
+| Parameter | Type | Description | Default value |
+| :--- | :--- | :--- | :--- |
+| `canvasProps` | `object` | **Required**. Set of properties coming from useReactPaint |  |
+| `className` | `string` | *Optional*. Classname for canvas parent node | `undefined` |
+| `style` | `CSSProperties` | *Optional*. css properties to inject to canvas parent node | `undefined` |
+| `options` | `{canvasBackgroundColor?: string}` | *Optional*. Set of properties to use to customize canvas style | `{canvasBackgroundColor: 'white'}` |
+
+
+#### Editor
+
+##### Parameters
+
+| Parameter | Type | Description | Default value |
+| :--- | :--- | :--- | :--- |
+| `editorProps` | `object` | **Required**. Set of properties coming from useReactPaint |  |
+| `children` | `ReactNode` | **Required**. Need Canvas component to work properly |  |
+| `className` | `string` | *Optional*. Classname for canvas parent node | `undefined` |
+| `style` | `CSSProperties` | *Optional*. css properties to inject to canvas parent node | `undefined` |
+| `options` | `{    toolbarBackgroundColor?: string;    dividerColor?: string;    fontRadius?: number;    fontDisabledColor?: string;    fontDisabledBackgroundColor?: string;    fontColor?: string;    fontBackgroundColor?: string;    fontSelectedColor?: string;    fontSelectedBackgroundColor?: string;    fontHoverColor?: string;    fontHoverBackgroundColor?: string;  }` | *Optional*. Set of properties to use to customize editor style | ` {  toolbarBackgroundColor: 'white',  dividerColor: '#36418129',  fontRadius: 8,  fontDisabledColor: '#3641812b',  fontDisabledBackgroundColor: 'transparent',  fontColor: '#364181',  fontBackgroundColor: 'transparent',  fontSelectedColor: 'white',  fontSelectedBackgroundColor: '#364181',  fontHoverColor: '#364181',  fontHoverBackgroundColor: '#afd8d8'}` |
+
+### Types
+
+#### `DrawableShape`
+#### `StateData`
+#### `OptionalOptions`
+
+
+## Changelog
+https://github.com/YoRab/react-paint-editor/blob/main/Changelog.md
+
+## License
+<a href="https://github.com/YoRab/react-paint-editor/blob/main/LICENSE.txt">MIT</a>
+
+
+## Contributing

package/dist/{components → canvas/components}/Canvas.d.ts

@@ -1,11 +1,10 @@
+import { type UtilsSettings } from './../../canvas/constants/app';
+import type { SelectionModeData } from './../../common/types/Mode';
+import type { Point, ShapeEntity } from './../../common/types/Shapes';
+import type { ToolsType } from './../../common/types/tools';
 import React from 'react';
-import { type GridFormatType } from '../constants/app';
-import type { SelectionModeData } from '../types/Mode';
-import type { Point, ShapeEntity } from '../types/Shapes';
-import type { ToolsType } from '../types/tools';
 import './Canvas.css';
 type DrawerType = {
-    gridFormat: GridFormatType;
     disabled?: boolean;
     canGrow?: boolean;
     canvasSize: {
@@ -15,7 +14,7 @@ type DrawerType = {
     };
     selectionColor: string;
     selectionWidth: number;
-    selectionPadding: number;
+    settings: UtilsSettings;
     isEditMode: boolean;
     shapes: ShapeEntity[];
     saveShapes: () => void;
@@ -26,13 +25,12 @@ 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, canvasOffset: Point, currentScale: number) => void;
-    refreshSelectedShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point, canvasOffset: Point, currentScale: number) => void;
+    refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point, settings: UtilsSettings) => 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>>;
-    canvasOffset: Point;
     setCanvasOffset: React.Dispatch<React.SetStateAction<Point>>;
     isInsideComponent: boolean;
     selectionMode: SelectionModeData<number | Point>;

package/dist/{components/toolbox → canvas/components}/EditTextBox.d.ts

@@ -1,14 +1,14 @@
-import React from 'react';
-import type { DrawableShape } from '../../types/Shapes';
+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[];
-    selectionPadding: number;
+    settings: UtilsSettings;
     updateValue: (newValue: string[]) => void;
     saveShapes: () => void;
 };
-declare const EditTextBox: ({ disabled, scaleRatio, shape, defaultValue, updateValue, saveShapes, selectionPadding }: EditTextBoxType) => React.JSX.Element;
+declare const EditTextBox: ({ disabled, scaleRatio, shape, defaultValue, updateValue, saveShapes, settings }: EditTextBoxType) => import("react/jsx-runtime").JSX.Element;
 export default EditTextBox;

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

@@ -0,0 +1,44 @@
+import type { DrawableShape, 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";
+export declare const DRAWCANVAS_CLASSNAME = "react-paint-canvas-drawcanvas";
+export declare const SELECTIONCANVAS_CLASSNAME = "react-paint-canvas-selectioncanvas";
+export type BrushAlgo = 'simple' | 'quadratic';
+export type UtilsSettings = {
+    brushAlgo: BrushAlgo;
+    gridGap: number;
+    canvasOffset: Point;
+    canvasSize: {
+        width: number;
+        height: number;
+        scaleRatio: number;
+    };
+    selectionPadding: number;
+};
+type AppOptionsType = {
+    layersManipulation: boolean;
+    grid: number;
+    canGrow: boolean;
+    canShrink: boolean;
+    availableTools: CustomToolInput[];
+    withExport: boolean;
+    withLoadAndSave: boolean;
+    withUploadPicture: boolean;
+    withUrlPicture: boolean;
+    withFrameSelection: boolean;
+    withSkeleton: boolean;
+    clearCallback: 'empty' | 'defaultShapes' | (() => DrawableShape[]);
+    brushAlgo: BrushAlgo;
+    selection: {
+        canvasSelectionColor: string;
+        canvasSelectionWidth: number;
+        canvasSelectionPadding: number;
+    };
+};
+export type OptionalOptions = RecursivePartial<AppOptionsType>;
+export declare const DEFAULT_OPTIONS: AppOptionsType;
+export declare const DEFAULT_CANVAS_OPTIONS: {
+    canvasBackgroundColor: string;
+};
+export {};

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

@@ -0,0 +1 @@
+export declare const GRID_ROTATION_STEPS = 18;

package/dist/{constants → canvas/constants}/shapes.d.ts

@@ -1,4 +1,4 @@
-import type { Point } from '../types/Shapes';
+import type { Point } from './../../common/types/Shapes';
 export declare const SELECTION_DEFAULT_PADDING = 0;
 export declare const SELECTION_DEFAULT_WIDTH = 2;
 export declare const SELECTION_DEFAULT_COLOR = "blue";

package/dist/{hooks → canvas/hooks}/useComponent.d.ts

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+import { type RefObject } from 'react';
 type UseComponentType = {
     disabled: boolean;
     componentRef: RefObject<HTMLElement>;

package/dist/{hooks → canvas/hooks}/useDrawableCanvas.d.ts

@@ -1,15 +1,10 @@
-import React from 'react';
-import type { GridFormatType } from '../constants/app';
-import type { HoverModeData, SelectionModeData } from '../types/Mode';
-import type { Point, ShapeEntity } from '../types/Shapes';
-import type { ToolsType } from '../types/tools';
+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 { ToolsType } from './../../common/types/tools';
+import type React from 'react';
 type UseCanvasType = {
     disabled?: boolean;
-    canvasSize: {
-        width: number;
-        height: number;
-        scaleRatio: number;
-    };
     shapes: ShapeEntity[];
     saveShapes: () => void;
     addShape: (newShape: ShapeEntity) => void;
@@ -18,12 +13,10 @@ 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, canvasOffset: Point, currentScale: number) => void;
-    refreshSelectedShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point, canvasOffset: Point, currentScale: number) => void;
+    refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point, settings: UtilsSettings) => void;
+    refreshSelectedShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point, settings: UtilsSettings) => void;
     canvasOffsetStartPosition: Point | undefined;
     setCanvasOffsetStartPosition: React.Dispatch<React.SetStateAction<Point | undefined>>;
-    gridFormat: GridFormatType;
-    canvasOffset: Point;
     setCanvasOffset: React.Dispatch<React.SetStateAction<Point>>;
     isInsideComponent: boolean;
     selectionMode: SelectionModeData<number | Point>;
@@ -31,11 +24,11 @@ type UseCanvasType = {
     setSelectionFrame: React.Dispatch<React.SetStateAction<[Point, Point] | undefined>>;
     drawCanvasRef: React.MutableRefObject<HTMLCanvasElement | null>;
     selectionCanvasRef: React.MutableRefObject<HTMLCanvasElement | null>;
-    selectionPadding: number;
     isShiftPressed: boolean;
     withFrameSelection: boolean;
+    settings: UtilsSettings;
 };
-declare const useDrawableCanvas: ({ disabled, addShape, canvasSize, drawCanvasRef, setActiveTool, refreshHoveredShape, shapes, selectionMode, activeTool, isInsideComponent, setCanvasOffset, selectedShape, selectionCanvasRef, canvasOffsetStartPosition, refreshSelectedShapes, setSelectedShape, setSelectionFrame, setCanvasOffsetStartPosition, updateSingleShape, gridFormat, canvasOffset, saveShapes, setSelectionMode, selectionPadding, isShiftPressed, withFrameSelection }: UseCanvasType) => {
+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) => {
     hoverMode: HoverModeData;
 };
 export default useDrawableCanvas;

package/dist/{hooks → canvas/hooks}/useKeyboard.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { GridFormatType } from '../constants/app';
-import type { ShapeEntity } from '../types/Shapes';
+import type { UtilsSettings } from './../../canvas/constants/app';
+import type { ShapeEntity } from './../../common/types/Shapes';
 type UseKeyboardType = {
     isInsideComponent: boolean;
     selectedShape: ShapeEntity | undefined;
@@ -12,9 +12,7 @@ type UseKeyboardType = {
     forwardShape: () => void;
     setShiftPressed: (value: React.SetStateAction<boolean>) => void;
     isEditingText: boolean;
-    gridFormat: GridFormatType;
-    currentScale: number;
-    selectionPadding: number;
+    settings: UtilsSettings;
 };
-declare const useKeyboard: ({ gridFormat, isInsideComponent, selectedShape, isEditingText, currentScale, selectionPadding, setSelectedShape, removeShape, pasteShape, updateShape, backwardShape, forwardShape, setShiftPressed }: UseKeyboardType) => {};
+declare const useKeyboard: ({ isInsideComponent, selectedShape, isEditingText, settings, setSelectedShape, removeShape, pasteShape, updateShape, backwardShape, forwardShape, setShiftPressed }: UseKeyboardType) => {};
 export default useKeyboard;

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

@@ -0,0 +1,131 @@
+/// <reference types="react" />
+import { type OptionalOptions, type UtilsSettings } from './../../canvas/constants/app';
+import type { DrawableShape, StateData, Point, ShapeEntity } from './../../common/types/Shapes';
+import type { ToolsType } from './../../common/types/tools';
+type UseReactPaintProps = {
+    width?: number;
+    height?: number;
+    shapes?: DrawableShape[];
+    mode?: 'editor' | 'viewer';
+    disabled?: boolean;
+    options?: OptionalOptions;
+};
+declare const useReactPaint: ({ width, height, shapes: shapesFromProps, mode, disabled, options }: UseReactPaintProps) => {
+    editorProps: {
+        shapesRef: import("react").MutableRefObject<ShapeEntity[]>;
+        addPictureShape: (fileOrUrl: string | File, maxWidth?: number, maxHeight?: number) => Promise<ShapeEntity<"picture">>;
+        moveShapes: (firstShapeId: string, lastShapeId: string) => void;
+        toggleShapeVisibility: (shape: ShapeEntity) => void;
+        toggleShapeLock: (shape: ShapeEntity) => void;
+        canGoBackward: boolean;
+        canGoForward: boolean;
+        canClear: boolean;
+        selectedShape: ShapeEntity | undefined;
+        removeShape: (shape: ShapeEntity) => void;
+        updateShape: (updatedShape: ShapeEntity, withSave?: boolean) => void;
+        backwardShape: () => void;
+        forwardShape: () => void;
+        refs: {
+            canvas: import("react").RefObject<HTMLCanvasElement>;
+            editor: import("react").MutableRefObject<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;
+        exportData: () => void;
+        clearCanvas: () => void;
+        settings: UtilsSettings;
+        canvas: {
+            selection: {
+                canvasSelectionColor: string;
+                canvasSelectionWidth: number;
+                canvasSelectionPadding: number;
+            };
+            withSkeleton: boolean;
+            withFrameSelection: boolean;
+            canGrow: boolean;
+            canShrink: boolean;
+            layersManipulation: boolean;
+            withExport: boolean;
+            withLoadAndSave: boolean;
+            withUploadPicture: boolean;
+            withUrlPicture: boolean;
+            clearCallback: "empty" | "defaultShapes" | (() => DrawableShape[]);
+        };
+    };
+    canvasProps: {
+        shapesRef: import("react").MutableRefObject<ShapeEntity[]>;
+        selectedShape: ShapeEntity | undefined;
+        selectionFrame: [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>>;
+        refreshSelectedShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point) => void;
+        refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point) => 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>;
+            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>>;
+        selectShape: (shape: ShapeEntity) => void;
+        activeTool: ToolsType;
+        setActiveTool: import("react").Dispatch<import("react").SetStateAction<ToolsType>>;
+        isInsideComponent: boolean;
+        isEditMode: boolean;
+        isDisabled: boolean;
+        canvas: {
+            selection: {
+                canvasSelectionColor: string;
+                canvasSelectionWidth: number;
+            };
+            withSkeleton: boolean;
+            withFrameSelection: boolean;
+            canGrow: boolean;
+            canShrink: boolean;
+        };
+    };
+    registerEvent: (event: "dataChanged", fn: (data: StateData) => void) => void;
+    unregisterEvent: (event: "dataChanged", fn?: ((data: StateData) => void) | undefined) => void;
+    resetCanvas: (json: DrawableShape[], clearHistory?: boolean) => Promise<void>;
+    getCurrentImage: () => string | undefined;
+    getCurrentData: () => StateData;
+};
+export type UseReactPaintReturnType = ReturnType<typeof useReactPaint>;
+export default useReactPaint;

package/dist/{hooks → canvas/hooks}/useShapes.d.ts

@@ -1,22 +1,21 @@
 /// <reference types="react" />
-import type { Point, ShapeEntity } from '../types/Shapes';
-declare const useShapes: (onDataChanged: (() => void) | undefined, selectionPadding: number, canvasSize: {
-    width: number;
-    height: number;
-    scaleRatio: number;
-}) => {
+import { type UtilsSettings } from './../../canvas/constants/app';
+import type { StateData, Point, ShapeEntity } from './../../common/types/Shapes';
+declare const useShapes: (settings: UtilsSettings) => {
+    registerEvent: (event: 'dataChanged', fn: (data: StateData) => void) => void;
+    unregisterEvent: (event: 'dataChanged', fn?: (data: StateData) => void) => void;
     shapesRef: import("react").MutableRefObject<ShapeEntity[]>;
     selectedShape: ShapeEntity | undefined;
     hoveredShape: ShapeEntity | undefined;
     selectionFrame: [Point, Point] | undefined;
     setSelectionFrame: import("react").Dispatch<import("react").SetStateAction<[Point, Point] | undefined>>;
-    refreshSelectedShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point, canvasOffset: Point, currentScale: number) => void;
+    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;
     saveShapes: () => void;
     setSelectedShape: import("react").Dispatch<import("react").SetStateAction<ShapeEntity | undefined>>;
-    refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point, canvasOffset: Point, currentScale: number) => void;
+    refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point) => void;
     toggleShapeVisibility: (shape: ShapeEntity) => void;
     toggleShapeLock: (shape: ShapeEntity) => void;
     removeShape: (shape: ShapeEntity) => void;

package/dist/canvas/index.d.ts

@@ -0,0 +1,13 @@
+import type { UseReactPaintReturnType } from './../canvas/hooks/useReactPaint';
+import { type CSSProperties } from 'react';
+import './index.css';
+type AppProps = {
+    canvasProps: UseReactPaintReturnType['canvasProps'];
+    className?: string;
+    style?: CSSProperties;
+    options?: {
+        canvasBackgroundColor?: string;
+    };
+};
+declare const App: ({ options, className, style, canvasProps }: AppProps) => import("react/jsx-runtime").JSX.Element;
+export default App;

package/dist/{utils → canvas/utils}/canvas.d.ts

@@ -1,4 +1,5 @@
-import type { Point } from '../types/Shapes';
+import type { UtilsSettings } from './../../canvas/constants/app';
+import type { Point } from './../../common/types/Shapes';
 export declare const initCanvasContext: (ctx: CanvasRenderingContext2D) => void;
 export declare const updateCanvasContext: (ctx: CanvasRenderingContext2D, style?: {
     fillColor?: string;
@@ -8,4 +9,4 @@ export declare const updateCanvasContext: (ctx: CanvasRenderingContext2D, style?
     lineDash?: number;
     lineCap?: CanvasLineCap;
 }) => void;
-export declare const transformCanvas: (ctx: CanvasRenderingContext2D, responsiveScale: number, canvasOffset: Point, rotation?: number, translation?: Point) => void;
+export declare const transformCanvas: (ctx: CanvasRenderingContext2D, settings: UtilsSettings, rotation?: number, translation?: Point) => void;

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

@@ -0,0 +1,5 @@
+import type { UtilsSettings } from './../../canvas/constants/app';
+import type { DrawableShape, StateData, ShapeEntity } from './../../common/types/Shapes';
+export declare const cleanShapesBeforeExport: (shapes: DrawableShape[]) => DrawableShape[];
+export declare const buildDataToExport: (shapes: DrawableShape[], width: number, height: number) => StateData;
+export declare const addDefaultAndTempShapeProps: (shape: DrawableShape, settings: UtilsSettings) => ShapeEntity;

package/dist/{utils → canvas/utils}/file.d.ts

@@ -1,10 +1,11 @@
-import type { DrawableShape, ExportDataType, Point, ShapeEntity } from '../types/Shapes';
+import type { UtilsSettings } from './../../canvas/constants/app';
+import type { DrawableShape, 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 getCanvasImage: (shapes: DrawableShape[], canvasOffset: Point, width: number, height: number, selectionPadding: number) => string;
+export declare const getCanvasImage: (shapes: DrawableShape[], width: number, height: number, settings: UtilsSettings) => 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: ExportDataType, currentScale: number, selectionPadding: number) => Promise<ShapeEntity[]>;
+export declare const decodeImportedData: (shapesForJson: DrawableShape[], settings: UtilsSettings) => Promise<ShapeEntity[]>;

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

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

package/dist/{utils → canvas/utils}/intersect.d.ts

@@ -1,10 +1,11 @@
-import type { HoverModeData } from '../types/Mode';
-import type { DrawableShape, Point, Rect } from '../types/Shapes';
-export declare const getCursorPosition: (e: MouseEvent | TouchEvent, canvas: HTMLCanvasElement | null, givenWidth: number, givenHeight: number, scaleRatio?: number) => Point;
+import type { UtilsSettings } from './../../canvas/constants/app';
+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 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 checkSelectionIntersection: (shape: DrawableShape, position: Point, canvasOffset: Point, selectionPadding: number, currentScale: number, checkAnchors?: boolean, radius?: number) => false | HoverModeData;
-export declare const checkPositionIntersection: (ctx: CanvasRenderingContext2D, shape: DrawableShape, position: Point, canvasOffset: Point, selectionPadding: number, currentScale: number) => false | HoverModeData;
+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;
-export declare const checkSelectionFrameCollision: (ctx: CanvasRenderingContext2D, shape: DrawableShape, selectionFrame: [Point, Point], canvasOffset: Point, selectionPadding: number) => boolean;
+export declare const checkSelectionFrameCollision: (ctx: CanvasRenderingContext2D, shape: DrawableShape, selectionFrame: [Point, Point], settings: UtilsSettings) => boolean;

package/dist/{utils → canvas/utils}/selection/lineSelection.d.ts

@@ -1,12 +1,13 @@
-import { DrawableShape, Point, SelectionLinesType } from 'src/types/Shapes';
+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[];
-}, currentScale: number, selectionPadding: number, gravityAnchors?: boolean) => SelectionLinesType;
-export declare const drawLineSelection: ({ ctx, shape, withAnchors, selectionWidth, selectionColor, currentScale }: {
+}, settings: UtilsSettings, gravityAnchors?: boolean) => SelectionLinesType;
+export declare const drawLineSelection: ({ ctx, shape, withAnchors, selectionWidth, selectionColor, settings }: {
     ctx: CanvasRenderingContext2D;
     shape: DrawableShape<'line'> | DrawableShape<'polygon'> | DrawableShape<'curve'>;
     withAnchors: boolean;
     selectionWidth: number;
     selectionColor: string;
-    currentScale?: number | undefined;
+    settings: UtilsSettings;
 }) => void;