@yorab/react-paint 0.18.1 → 1.0.0-beta.1

package/dist/canvas/store/paintStore.d.ts

@@ -0,0 +1,898 @@
+import { type UtilsSettings } from './../../canvas/constants/app.js';
+import type { CanvasTransformation, InternalState, Modifiers, PanStart, SelectionFrameState, UseReactPaintProps } from './../../canvas/store/types.js';
+import type { CanvasSize } from './../../canvas/types/Canvas.js';
+import type { ChangeSource, EditorActions, ExportImageOptions, ShapesBounds } from './../../canvas/types/editor.js';
+import type { HoverModeData, SelectionModeContextMenu, SelectionModeData } from './../../canvas/types/Mode.js';
+import type { Point, SelectionType, ShapeEntity, ShapeInput, StateData, StyleShape } from './../../canvas/types/Shapes.js';
+import type { ToolsType } from './../../canvas/types/tools.js';
+import { type ViewBounds } from './../../canvas/utils/zoom.js';
+type Listeners = {
+    [K in keyof HTMLElementEventMap]?: (e: HTMLElementEventMap[K]) => void;
+};
+/**
+ * Store of a react-paint instance: state of the canvas, of the selection and of the history,
+ * and the engine that updates it. It knows nothing about React.
+ */
+export declare const createPaintStore: (props?: UseReactPaintProps) => {
+    getState: () => InternalState;
+    subscribe: (listener: () => void) => () => void;
+    watch: <S>(select: (state: InternalState) => S, onChange: (value: S, previous: S) => void, isEqual?: ((a: S, b: S) => boolean) | undefined) => () => void;
+    batch: <R>(fn: () => R) => R;
+    transaction: <R>(fn: () => R) => R;
+    selectors: {
+        selectFeatures: ({ config }: InternalState) => {
+            edition: boolean;
+            zoom: boolean;
+        };
+        selectIsInteractive: (state: InternalState) => boolean;
+        selectSettings: (state: InternalState) => UtilsSettings;
+        selectActiveTool: ({ tools }: InternalState) => ToolsType;
+        selectSelectedShapes: (selection: ({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Line & {
+            type: "line";
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: "line";
+            arrows?: import("./../../canvas/types/Shapes.js").TriangleEntity[];
+        }) | ({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Rect & {
+            src: string;
+        } & {
+            type: "picture";
+            img: HTMLImageElement;
+            flipX?: boolean;
+            flipY?: boolean;
+            ratio?: number;
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: Exclude<import("./../../canvas/types/Shapes.js").ShapeType, "line" | "triangle">;
+        }) | ({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Rect & {
+            value: string[];
+            fontSize: number;
+        } & {
+            type: "text";
+            flipX?: boolean;
+            flipY?: boolean;
+            ratio?: number;
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: Exclude<import("./../../canvas/types/Shapes.js").ShapeType, "line" | "triangle">;
+        }) | ({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Rect & {
+            type: "rect";
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: Exclude<import("./../../canvas/types/Shapes.js").ShapeType, "line" | "triangle">;
+        }) | ({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Rect & {
+            type: "square";
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: Exclude<import("./../../canvas/types/Shapes.js").ShapeType, "line" | "triangle">;
+        }) | ({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Circle & {
+            type: "circle";
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: Exclude<import("./../../canvas/types/Shapes.js").ShapeType, "line" | "triangle">;
+        }) | ({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Ellipse & {
+            type: "ellipse";
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: Exclude<import("./../../canvas/types/Shapes.js").ShapeType, "line" | "triangle">;
+        }) | ({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Polygon & {
+            type: "polygon";
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: Exclude<import("./../../canvas/types/Shapes.js").ShapeType, "line" | "triangle">;
+        }) | ({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Curve & {
+            type: "curve";
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: Exclude<import("./../../canvas/types/Shapes.js").ShapeType, "line" | "triangle">;
+        }) | ({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Brush & {
+            type: "brush";
+            scaleX?: number;
+            scaleY?: number;
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: Exclude<import("./../../canvas/types/Shapes.js").ShapeType, "line" | "triangle">;
+        }) | ({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Rect & {
+            type: "group";
+            shapes: ShapeEntity[];
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: Exclude<import("./../../canvas/types/Shapes.js").ShapeType, "line" | "triangle">;
+        }) | undefined) => (({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Line & {
+            type: "line";
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: "line";
+            arrows?: import("./../../canvas/types/Shapes.js").TriangleEntity[];
+        }) | ({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Rect & {
+            src: string;
+        } & {
+            type: "picture";
+            img: HTMLImageElement;
+            flipX?: boolean;
+            flipY?: boolean;
+            ratio?: number;
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: Exclude<import("./../../canvas/types/Shapes.js").ShapeType, "line" | "triangle">;
+        }) | ({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Rect & {
+            value: string[];
+            fontSize: number;
+        } & {
+            type: "text";
+            flipX?: boolean;
+            flipY?: boolean;
+            ratio?: number;
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: Exclude<import("./../../canvas/types/Shapes.js").ShapeType, "line" | "triangle">;
+        }) | ({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Rect & {
+            type: "rect";
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: Exclude<import("./../../canvas/types/Shapes.js").ShapeType, "line" | "triangle">;
+        }) | ({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Rect & {
+            type: "square";
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: Exclude<import("./../../canvas/types/Shapes.js").ShapeType, "line" | "triangle">;
+        }) | ({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Circle & {
+            type: "circle";
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: Exclude<import("./../../canvas/types/Shapes.js").ShapeType, "line" | "triangle">;
+        }) | ({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Ellipse & {
+            type: "ellipse";
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: Exclude<import("./../../canvas/types/Shapes.js").ShapeType, "line" | "triangle">;
+        }) | ({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Polygon & {
+            type: "polygon";
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: Exclude<import("./../../canvas/types/Shapes.js").ShapeType, "line" | "triangle">;
+        }) | ({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Curve & {
+            type: "curve";
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: Exclude<import("./../../canvas/types/Shapes.js").ShapeType, "line" | "triangle">;
+        }) | ({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Brush & {
+            type: "brush";
+            scaleX?: number;
+            scaleY?: number;
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: Exclude<import("./../../canvas/types/Shapes.js").ShapeType, "line" | "triangle">;
+        }) | ({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Rect & {
+            type: "group";
+            shapes: ShapeEntity[];
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: Exclude<import("./../../canvas/types/Shapes.js").ShapeType, "line" | "triangle">;
+        }))[];
+        selectHoveredShape: ({ document, interaction }: InternalState) => ({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Line & {
+            type: "line";
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: "line";
+            arrows?: import("./../../canvas/types/Shapes.js").TriangleEntity[];
+        }) | ({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Rect & {
+            src: string;
+        } & {
+            type: "picture";
+            img: HTMLImageElement;
+            flipX?: boolean;
+            flipY?: boolean;
+            ratio?: number;
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: Exclude<import("./../../canvas/types/Shapes.js").ShapeType, "line" | "triangle">;
+        }) | ({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Rect & {
+            value: string[];
+            fontSize: number;
+        } & {
+            type: "text";
+            flipX?: boolean;
+            flipY?: boolean;
+            ratio?: number;
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: Exclude<import("./../../canvas/types/Shapes.js").ShapeType, "line" | "triangle">;
+        }) | ({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Rect & {
+            type: "rect";
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: Exclude<import("./../../canvas/types/Shapes.js").ShapeType, "line" | "triangle">;
+        }) | ({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Rect & {
+            type: "square";
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: Exclude<import("./../../canvas/types/Shapes.js").ShapeType, "line" | "triangle">;
+        }) | ({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Circle & {
+            type: "circle";
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: Exclude<import("./../../canvas/types/Shapes.js").ShapeType, "line" | "triangle">;
+        }) | ({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Ellipse & {
+            type: "ellipse";
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: Exclude<import("./../../canvas/types/Shapes.js").ShapeType, "line" | "triangle">;
+        }) | ({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Polygon & {
+            type: "polygon";
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: Exclude<import("./../../canvas/types/Shapes.js").ShapeType, "line" | "triangle">;
+        }) | ({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Curve & {
+            type: "curve";
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: Exclude<import("./../../canvas/types/Shapes.js").ShapeType, "line" | "triangle">;
+        }) | ({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Brush & {
+            type: "brush";
+            scaleX?: number;
+            scaleY?: number;
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: Exclude<import("./../../canvas/types/Shapes.js").ShapeType, "line" | "triangle">;
+        }) | ({
+            id: string;
+            computed: {
+                borders: import("./../../canvas/types/Shapes.js").Rect;
+                outerBorders: import("./../../canvas/types/Shapes.js").Rect;
+                center: Point;
+                boundingBox: import("./../../canvas/types/Shapes.js").Rect;
+            };
+            path: Path2D;
+        } & {
+            id?: string;
+            rotation?: number;
+            toolId?: string;
+            visible?: boolean;
+            locked?: boolean;
+            style?: StyleShape | undefined;
+            data?: import("./../../canvas/types/Shapes.js").ShapeData | undefined;
+        } & import("./../../canvas/types/Shapes.js").Rect & {
+            type: "group";
+            shapes: ShapeEntity[];
+        } & {
+            type: "rect" | "square" | "circle" | "ellipse" | "picture" | "text" | "brush" | "group" | "line" | "polygon" | "curve";
+        } & {
+            type: Exclude<import("./../../canvas/types/Shapes.js").ShapeType, "line" | "triangle">;
+        }) | undefined;
+        selectWithContextMenu: ({ config }: InternalState) => boolean;
+        selectWithDropPicture: (state: InternalState) => boolean;
+        selectEditorState: (state: InternalState) => import("./../../canvas/types/editor.js").EditorState;
+        selectCanvasView: (state: InternalState) => import("./../../canvas/store/selectors.js").CanvasView;
+        selectCursor: (state: InternalState) => string;
+    };
+    getSettings: (state?: InternalState) => UtilsSettings;
+    getEditorState: () => import("./../../canvas/types/editor.js").EditorState;
+    actions: EditorActions;
+    registerEvent: <E extends import("./../../canvas/types/editor.js").ReactPaintEventName>(event: E, fn: import("./../../canvas/types/editor.js").ReactPaintEvents[E]) => () => void;
+    unregisterEvent: <E extends import("./../../canvas/types/editor.js").ReactPaintEventName>(event: E, fn?: import("./../../canvas/types/editor.js").ReactPaintEvents[E]) => void;
+    emit: <E extends import("./../../canvas/types/editor.js").ReactPaintEventName>(event: E, ...args: import("./../../canvas/types/editor.js").ReactPaintEventArgs[E]) => void;
+    hasListeners: (event: import("./../../canvas/types/editor.js").ReactPaintEventName) => boolean;
+    setConfig: (newProps: UseReactPaintProps) => void;
+    init: () => void;
+    /** Resets the shapes from data given by the consumer */
+    resetCanvas: (json?: ShapeInput[], clearHistory?: boolean) => Promise<void>;
+    getCurrentImage: (options?: ExportImageOptions) => string;
+    getCurrentData: () => StateData;
+    getShape: (id: string) => ShapeEntity | undefined;
+    getBounds: (ids: string[]) => ShapesBounds | undefined;
+    getShapesAt: (point: Point) => ShapeEntity[];
+    getShapeAt: (point: Point) => ShapeEntity | undefined;
+    toCanvasPosition: ({ x, y }: {
+        x: number;
+        y: number;
+    }) => Point | undefined;
+    toClientPosition: (point: Point) => {
+        x: number;
+        y: number;
+    } | undefined;
+    setScopeElement: (element: HTMLElement | null) => void;
+    setCanvasRootElement: (element: HTMLElement | null) => void;
+    setCanvasElement: (element: HTMLCanvasElement | null) => void;
+    listenScope: (listeners: Listeners) => () => void;
+    setSelectedShape: (newSelectedShape: SelectionType | undefined) => void;
+    addShapes: (newShapes: ShapeEntity[], index?: number) => void;
+    duplicateShapes: (shapesToDuplicate: ShapeEntity[], translate?: boolean, selectNewOnes?: boolean) => void;
+    refreshHoveredShape: (isOverCanvas: boolean, ctx: CanvasRenderingContext2D, cursorPosition: Point, isInsideMask: boolean) => void;
+    clearHover: () => void;
+    updateShapes: (updatedShapes: ShapeEntity[], withSave?: boolean, source?: ChangeSource) => void;
+    removeShapes: (shapesToRemove: ShapeEntity[], source?: ChangeSource) => void;
+    refreshSelectedShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point) => void;
+    setSelectionFrame: (selectionFrame: SelectionFrameState | undefined) => void;
+    setActiveTool: (tool: ToolsType) => void;
+    setSelectionMode: (selectionMode: SelectionModeData<Point | number>) => void;
+    showContextMenu: (menu: Omit<SelectionModeContextMenu<Point | number>, "mode">) => void;
+    setHoverMode: (hoverMode: HoverModeData) => void;
+    setPanStart: (panStart: PanStart | undefined) => void;
+    setMoveAcceleration: (moveAcceleration: Point) => void;
+    setModifiers: (patch: Partial<Modifiers>) => void;
+    setCanvasSize: (canvasSize: CanvasSize) => void;
+    setTransformation: (transformation: CanvasTransformation) => void;
+    getViewBounds: (state?: InternalState) => ViewBounds;
+    zoomBy: (delta: number, centerPoint: Point) => void;
+    scrollBy: ([pixelX, pixelY]: Point) => boolean;
+    applyMoveAcceleration: (ratio?: number) => void;
+};
+export type PaintStore = ReturnType<typeof createPaintStore>;
+export {};