@yorab/react-paint 0.17.1 → 0.18.1

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import './Canvas.css';
+declare const Canvas: React.ForwardRefExoticComponent<React.RefAttributes<HTMLCanvasElement>>;
+export default Canvas;

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

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

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

@@ -0,0 +1,37 @@
+import type { Size } from './../../../common/types/Canvas';
+import type { ExportedDrawableShape } 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";
+import type { BrushAlgo } from './../../../common/types/Settings';
+export type { BrushAlgo, UtilsSettings } from './../../../common/types/Settings';
+type AppOptionsType = {
+    layersManipulation: boolean;
+    grid: number;
+    canGrow: boolean;
+    canShrink: boolean;
+    availableTools: CustomToolInput[];
+    withExport: boolean;
+    withLoadAndSave: boolean;
+    withUploadPicture: boolean;
+    withUrlPicture: boolean;
+    withFrameSelection: boolean;
+    withSkeleton: boolean;
+    withContextMenu: boolean;
+    clearCallback: 'empty' | 'defaultShapes' | (() => ExportedDrawableShape[]);
+    brushAlgo: BrushAlgo;
+    isBrushShapeDoneOnMouseUp: boolean;
+    canvasSelectionPadding: number;
+    size: Size;
+    canZoom: 'never' | 'always';
+    debug: boolean;
+};
+export type OptionalOptions = RecursivePartial<AppOptionsType>;
+export declare const DEFAULT_OPTIONS: AppOptionsType;
+export declare const DEFAULT_CANVAS_OPTIONS: {
+    canvasBackgroundColor: string;
+    canvasSelectionColor: string;
+    canvasSelectionWidth: number;
+};

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

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

package/dist/src/canvas/constants/keyboard.d.ts

@@ -0,0 +1,27 @@
+export declare const KeyboardCode: {
+    readonly ArrowUp: "ArrowUp";
+    readonly ArrowDown: "ArrowDown";
+    readonly ArrowLeft: "ArrowLeft";
+    readonly ArrowRight: "ArrowRight";
+    readonly Delete: "Delete";
+    readonly Backspace: "Backspace";
+    readonly Escape: "Escape";
+    readonly Shift: "Shift";
+    readonly Alt: "Alt";
+    readonly Option: "Option";
+    readonly Space: " ";
+    readonly A: "A";
+    readonly a: "a";
+    readonly z: "z";
+    readonly Z: "Z";
+    readonly y: "y";
+    readonly Y: "Y";
+    readonly Plus: "+";
+    readonly Minus: "-";
+    readonly Zero: "0";
+};
+export declare const KeyboardCommand: {
+    readonly Cut: "cut";
+    readonly Copy: "copy";
+    readonly Paste: "paste";
+};

package/dist/src/canvas/constants/picture.d.ts

@@ -0,0 +1 @@
+export declare const PICTURE_DEFAULT_SIZE = 300;

package/dist/src/canvas/constants/rendering.d.ts

@@ -0,0 +1,3 @@
+export declare const LINE_DASH_DATA: number[][];
+export declare const STYLE_FONT_DEFAULT = "serif";
+export declare const STYLE_FONT_SIZE_DEFAULT = 36;

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

@@ -0,0 +1,10 @@
+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";
+export declare const SELECTION_ANCHOR_SIZE = 14;
+export declare const SELECTION_ROTATED_ANCHOR_POSITION = 16;
+export declare const SELECTION_RESIZE_ANCHOR_POSITIONS: Point[];
+export declare const ShapeTypeArray: readonly ["brush", "rect", "square", "line", "polygon", "circle", "curve", "ellipse", "picture", "text", "triangle", "group"];
+export declare const SHAPES_WITH_ROTATION: string[];
+export declare const SHAPES_KEEPING_RATIO: string[];

package/dist/src/canvas/constants/tools.d.ts

@@ -0,0 +1,4 @@
+import type { ActionsTool, ToolsRectSettings } from './../../../common/types/tools';
+export declare const SELECTION_TOOL: ActionsTool;
+export declare const PICTURE_TOOL_ID = "react-paint-picture";
+export declare const CANVAS_DEFAULT_RECT_SETTINGS: ToolsRectSettings;

package/dist/src/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/src/canvas/context/CanvasContext.d.ts

@@ -0,0 +1,55 @@
+import type { UtilsSettings } from './../../../canvas/constants/app';
+import type { SelectionModeData } from './../../../common/types/Mode';
+import type { Point, SelectionType, ShapeEntity } from './../../../common/types/Shapes';
+import type { ToolsType } from './../../../common/types/tools';
+import type React from 'react';
+export type CanvasContextType = {
+    shapes: ShapeEntity[];
+    settings: UtilsSettings;
+    selectedShape: SelectionType | undefined;
+    hoveredShape: ShapeEntity | undefined;
+    selectionFrame: {
+        oldSelection: SelectionType | undefined;
+        frame: [Point, Point];
+    } | undefined;
+    selectionMode: SelectionModeData<number | Point>;
+    activeTool: ToolsType;
+    canvasOffsetStartData: {
+        start: Point;
+        originalOffset: Point;
+    } | undefined;
+    isInsideComponent: boolean;
+    isInsideCanvas: boolean;
+    isShiftPressed: boolean;
+    isAltPressed: boolean;
+    isSpacePressed: boolean;
+    selectionColor: string;
+    selectionWidth: number;
+    isEditMode: boolean;
+    canGrow: boolean | undefined;
+    withFrameSelection: boolean;
+    withSkeleton: boolean;
+    withContextMenu: boolean;
+    setSelectedShape: React.Dispatch<React.SetStateAction<SelectionType | undefined>>;
+    setSelectionFrame: React.Dispatch<React.SetStateAction<{
+        oldSelection: SelectionType | undefined;
+        frame: [Point, Point];
+    } | undefined>>;
+    setSelectionMode: React.Dispatch<React.SetStateAction<SelectionModeData<number | Point>>>;
+    setActiveTool: React.Dispatch<React.SetStateAction<ToolsType>>;
+    setCanvasOffsetStartData: React.Dispatch<React.SetStateAction<{
+        start: Point;
+        originalOffset: Point;
+    } | undefined>>;
+    setCanvasOffset: (offset: Point) => void;
+    setCanvasMoveAcceleration: React.Dispatch<React.SetStateAction<Point>>;
+    addShapes: (newShapes: ShapeEntity[]) => void;
+    updateSingleShape: (updatedShape: ShapeEntity[], withSave?: boolean) => void;
+    duplicateShapes: (shapesToDuplicate: ShapeEntity[]) => void;
+    saveShapes: () => void;
+    refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point, isInsideMask: boolean) => void;
+    refreshSelectedShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point, settings: UtilsSettings) => void;
+};
+declare const CanvasContext: React.Context<CanvasContextType | undefined>;
+export declare const useCanvasContext: () => CanvasContextType;
+export default CanvasContext;

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

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

package/dist/src/canvas/hooks/useDoubleClick.d.ts

@@ -0,0 +1,5 @@
+declare const useDoubleClick: () => {
+    registerDoubleClickEvent: (element: HTMLElement, callback: (e: MouseEvent | TouchEvent) => void) => void;
+    unRegisterDoubleClickEvent: (element: HTMLElement) => void;
+};
+export default useDoubleClick;

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

@@ -0,0 +1,6 @@
+import type { HoverModeData } from './../../../common/types/Mode';
+import type React from 'react';
+declare const useDrawableCanvas: (drawCanvasRef: React.RefObject<HTMLCanvasElement | null>) => {
+    hoverMode: HoverModeData;
+};
+export default useDrawableCanvas;

package/dist/src/canvas/hooks/useEventListener.d.ts

@@ -0,0 +1,2 @@
+declare const useEventListener: <T extends Event>(target: EventTarget | null | undefined, event: string, handler: (e: T) => void) => void;
+export default useEventListener;

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

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

package/dist/src/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/src/canvas/hooks/useReactPaint.d.ts

@@ -0,0 +1,164 @@
+import { type OptionalOptions, type UtilsSettings } from './../../../canvas/constants/app';
+import { calculateTextFontSize } from './../../../canvas/utils/shapes/text';
+import type { CanvasSize } from './../../../common/types/Canvas';
+import type { SelectionModeData } from './../../../common/types/Mode';
+import type { ExportedDrawableShape, Point, SelectionType, ShapeEntity, StateData } from './../../../common/types/Shapes';
+import type { CustomTool, ToolsType } from './../../../common/types/tools';
+import { type CSSProperties } from 'react';
+type UseReactPaintProps = {
+    width?: number | undefined;
+    height?: number | undefined;
+    shapes?: ExportedDrawableShape[] | undefined;
+    mode?: 'editor' | 'viewer' | undefined;
+    disabled?: boolean | undefined;
+    options?: OptionalOptions | undefined;
+};
+export type EditorProps = {
+    shapes: ShapeEntity[];
+    addPictureShape: (fileOrUrl: File | string, maxWidth?: number, maxHeight?: number) => Promise<ShapeEntity>;
+    swapShapes: (startPositionShapeId: string, endPositionShapeId: string) => void;
+    moveShapes: (shapes: ShapeEntity[], action: 'first' | 'last' | 'forward' | 'backward') => void;
+    toggleShapeVisibility: (shapes: ShapeEntity[]) => void;
+    toggleShapeLock: (shapeGroup: ShapeEntity[]) => void;
+    canGoBackward: boolean;
+    canGoForward: boolean;
+    canClear: boolean;
+    selectedShape: SelectionType | undefined;
+    copiedShape: SelectionType | undefined;
+    setCopiedShape: React.Dispatch<React.SetStateAction<SelectionType | undefined>>;
+    pasteShapes: (shapes: ShapeEntity[]) => void;
+    saveShapes: () => void;
+    removeShape: (shapes: ShapeEntity[]) => void;
+    updateShape: (updatedShapes: ShapeEntity[], withSave?: boolean) => void;
+    duplicateShapes: (shapesToDuplicate: ShapeEntity[], translate?: boolean, selectNewOnes?: boolean) => void;
+    backwardShape: () => void;
+    forwardShape: () => void;
+    removeShapePoint: (shape: ShapeEntity<'curve' | 'polygon'>, pointIndex: number) => void;
+    transformShape: (ctx: CanvasRenderingContext2D, shapes: ShapeEntity[], center: Point, action: 'flipHorizontally' | 'flipVertically' | 'rotateClockwise' | 'rotateCounterclockwise') => void;
+    refs: {
+        canvas: React.RefObject<HTMLCanvasElement | null>;
+        editor: React.RefObject<HTMLElement | null>;
+        setEditor: (node: HTMLElement | null) => void;
+    };
+    width: number;
+    height: number;
+    selectTool: (tool: ToolsType) => void;
+    selectShapes: (shapes: ShapeEntity[]) => void;
+    selectAllShapes: () => void;
+    activeTool: ToolsType;
+    setActiveTool: React.Dispatch<React.SetStateAction<ToolsType>>;
+    setAvailableTools: React.Dispatch<React.SetStateAction<CustomTool[]>>;
+    isEditMode: boolean;
+    availableTools: CustomTool[];
+    gridGap: number;
+    setGridGap: React.Dispatch<React.SetStateAction<number>>;
+    loadFile: (file: File) => Promise<void>;
+    exportPicture: (view: 'fitToShapes' | 'defaultView' | 'currentZoom') => void;
+    exportData: () => void;
+    clearCanvas: () => void;
+    selectionMode: SelectionModeData<number | Point>;
+    setSelectionMode: React.Dispatch<React.SetStateAction<SelectionModeData<number | Point>>>;
+    settings: UtilsSettings;
+    setCanvasZoom: (action: 'unzoom' | 'zoom' | 'default') => void;
+    resetZoom: () => void;
+    buildShapesGroup: (shapes: ShapeEntity[]) => SelectionType | undefined;
+    copyShapes: (selection: SelectionType) => ShapeEntity[];
+    refreshShape: (shape: ShapeEntity) => ShapeEntity;
+    calculateTextFontSize: typeof calculateTextFontSize;
+    canvas: {
+        canGrow: boolean;
+        canShrink: boolean;
+        layersManipulation: boolean;
+        withExport: boolean;
+        withLoadAndSave: boolean;
+        withUploadPicture: boolean;
+        withUrlPicture: boolean;
+        withContextMenu: boolean;
+    };
+};
+type CanvasProps = {
+    shapes: ShapeEntity[];
+    selectedShape: SelectionType | undefined;
+    copiedShape: SelectionType | undefined;
+    setCopiedShape: React.Dispatch<React.SetStateAction<SelectionType | undefined>>;
+    pasteShapes: (shapes: ShapeEntity[]) => void;
+    selectionFrame: {
+        oldSelection: SelectionType | undefined;
+        frame: [Point, Point];
+    } | undefined;
+    hoveredShape: ShapeEntity | undefined;
+    addShape: (newShapes: ShapeEntity[]) => void;
+    setSelectedShape: React.Dispatch<React.SetStateAction<SelectionType | undefined>>;
+    setSelectionFrame: React.Dispatch<React.SetStateAction<{
+        oldSelection: SelectionType | undefined;
+        frame: [Point, Point];
+    } | undefined>>;
+    refreshSelectedShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point) => void;
+    refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point, isInsideMask: boolean) => void;
+    removeShape: (shapes: ShapeEntity[]) => void;
+    updateShape: (updatedShapes: ShapeEntity[], withSave?: boolean) => void;
+    duplicateShapes: (shapesToDuplicate: ShapeEntity[], translate?: boolean, selectNewOnes?: boolean) => void;
+    backwardShape: () => void;
+    forwardShape: () => void;
+    saveShapes: () => void;
+    refs: {
+        canvas: React.RefObject<HTMLCanvasElement | null>;
+        editor: React.RefObject<HTMLElement | null>;
+        setEditor: (node: HTMLElement | null) => void;
+    };
+    width: number;
+    height: number;
+    selectShapes: (shapes: ShapeEntity[]) => void;
+    selectAllShapes: () => void;
+    activeTool: ToolsType;
+    setActiveTool: React.Dispatch<React.SetStateAction<ToolsType>>;
+    isEditMode: boolean;
+    settings: UtilsSettings;
+    setCanvasZoom: (action: 'unzoom' | 'zoom' | 'default') => void;
+    resetZoom: () => void;
+    setCanvasSize: React.Dispatch<React.SetStateAction<CanvasSize>>;
+    setCanvasOffset: (offset: Point) => void;
+    isInsideComponent: boolean;
+    isInsideCanvas: boolean;
+    canvas: {
+        withContextMenu: boolean;
+        withSkeleton: boolean;
+        withFrameSelection: boolean;
+        canGrow: boolean;
+        canShrink: boolean;
+    };
+    canvasOffsetStartData: {
+        start: Point;
+        originalOffset: Point;
+    } | undefined;
+    setCanvasOffsetStartData: React.Dispatch<React.SetStateAction<{
+        start: Point;
+        originalOffset: Point;
+    } | undefined>>;
+    selectionMode: SelectionModeData<number | Point>;
+    setSelectionMode: React.Dispatch<React.SetStateAction<SelectionModeData<number | Point>>>;
+    setCanvasMoveAcceleration: React.Dispatch<React.SetStateAction<Point>>;
+    isShiftPressed: boolean;
+    isAltPressed: boolean;
+    isSpacePressed: boolean;
+    setShiftPressed: React.Dispatch<React.SetStateAction<boolean>>;
+    setAltPressed: React.Dispatch<React.SetStateAction<boolean>>;
+    setIsSpacePressed: React.Dispatch<React.SetStateAction<boolean>>;
+};
+export type UseReactPaintReturnType = {
+    annotationsProps: {
+        style: CSSProperties;
+    };
+    editorProps: EditorProps;
+    canvasProps: CanvasProps;
+    registerEvent: (event: 'dataChanged', fn: (data: StateData, source: 'user' | 'remote') => void) => void;
+    unregisterEvent: (event: 'dataChanged', fn?: (data: StateData, source: 'user' | 'remote') => void) => void;
+    resetCanvas: (json?: ExportedDrawableShape[], clearHistory?: boolean) => void;
+    resetZoom: () => void;
+    getCurrentImage: (view: 'fitToShapes' | 'defaultView' | 'currentZoom') => string;
+    getCurrentData: () => StateData;
+    setCanvasOffset: (offset: Point) => void;
+    setCanvasZoom: (action: 'unzoom' | 'zoom' | 'default') => void;
+};
+declare const useReactPaint: ({ width, height, shapes: defaultShapes, mode, disabled, options }?: UseReactPaintProps) => UseReactPaintReturnType;
+export default useReactPaint;

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

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

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

@@ -0,0 +1,44 @@
+import { type UtilsSettings } from './../../../canvas/constants/app';
+import type { Point, SelectionType, ShapeEntity, StateData } from './../../../common/types/Shapes';
+declare const useShapes: (settings: UtilsSettings, width: number, height: number, isShiftPressed: boolean) => {
+    registerEvent: (event: "dataChanged", fn: (data: StateData, source: "user" | "remote") => void) => void;
+    unregisterEvent: (event: "dataChanged", fn?: (data: StateData, source: "user" | "remote") => void) => void;
+    shapes: ShapeEntity[];
+    shapesRef: React.RefObject<ShapeEntity[]>;
+    selectedShape: SelectionType | undefined;
+    hoveredShape: ShapeEntity | undefined;
+    selectionFrame: {
+        oldSelection: SelectionType | undefined;
+        frame: [Point, Point];
+    } | undefined;
+    setSelectionFrame: React.Dispatch<React.SetStateAction<{
+        oldSelection: SelectionType | undefined;
+        frame: [Point, Point];
+    } | undefined>>;
+    refreshSelectedShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point) => void;
+    addShapes: (newShapes: ShapeEntity[]) => void;
+    duplicateShapes: (shapesToDuplicate: ShapeEntity[], translate?: boolean, selectNewOnes?: boolean) => void;
+    addPictureShape: (fileOrUrl: File | string, maxWidth?: number, maxHeight?: number) => Promise<ShapeEntity>;
+    swapShapes: (startPositionShapeId: string, endPositionShapeId: string) => void;
+    moveShapes: (shapes: ShapeEntity[], action: "first" | "last" | "forward" | "backward") => void;
+    saveShapes: () => void;
+    setSelectedShape: React.Dispatch<React.SetStateAction<SelectionType | undefined>>;
+    refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point, isInsideMask: boolean) => void;
+    toggleShapeVisibility: (shapes: ShapeEntity[]) => void;
+    toggleShapeLock: (shapeGroup: ShapeEntity[]) => void;
+    removeShape: (shapes: ShapeEntity[]) => void;
+    updateShape: (updatedShapes: ShapeEntity[], withSave?: boolean) => void;
+    transformShape: (ctx: CanvasRenderingContext2D, shapes: ShapeEntity[], center: Point, action: "flipHorizontally" | "flipVertically" | "rotateClockwise" | "rotateCounterclockwise") => void;
+    backwardShape: () => void;
+    forwardShape: () => void;
+    clearShapes: (shapesToInit: ShapeEntity[], options: {
+        clearHistory: boolean;
+        source: "user" | "remote";
+    }) => void;
+    canGoBackward: boolean;
+    canGoForward: boolean;
+    canClear: boolean;
+    copiedShape: SelectionType | undefined;
+    setCopiedShape: React.Dispatch<React.SetStateAction<SelectionType | undefined>>;
+};
+export default useShapes;

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

@@ -0,0 +1,22 @@
+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;
+    resetZoom: () => void;
+    canvasTransformation: {
+        offset: Point;
+        zoom: number;
+    };
+};
+export default useZoom;

package/dist/src/canvas/index.d.ts

@@ -0,0 +1,19 @@
+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 | undefined;
+        canvasSelectionColor?: string | undefined;
+        canvasSelectionWidth?: number | undefined;
+    };
+};
+declare const App: ({ options, className, style, canvasProps }: AppProps) => import("react/jsx-runtime").JSX.Element;
+export default App;
+export type { OptionalOptions } from './../../canvas/constants/app';
+export { DEFAULT_OPTIONS } from './../../canvas/constants/app';
+export { default as useReactPaint } from './../../canvas/hooks/useReactPaint';
+export type { ExportedDrawableShape as DrawableShape, StateData } from './../../common/types/Shapes';

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

@@ -0,0 +1,15 @@
+import type { UtilsSettings } from './../../../canvas/constants/app';
+import type { Point, StyleShape } from './../../../common/types/Shapes';
+export declare const initCanvasContext: (ctx: CanvasRenderingContext2D) => void;
+export declare const updateCanvasContext: (ctx: CanvasRenderingContext2D, style?: {
+    fillColor?: string;
+    opacity?: number;
+    strokeColor?: string;
+    lineWidth?: number;
+    lineDash?: number;
+    lineCap?: CanvasLineCap;
+    shadowColor?: string;
+    shadowBlur?: number;
+}) => void;
+export declare const transformCanvas: (ctx: CanvasRenderingContext2D, settings: UtilsSettings, rotation?: number, translation?: Point) => void;
+export declare const drawPathWithFillAndStroke: (ctx: CanvasRenderingContext2D, path: Path2D, style?: Pick<StyleShape, "fillColor" | "strokeColor">) => void;

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

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