@yorab/react-paint 0.11.0 → 0.11.2

package/README.md

@@ -1,4 +1,4 @@
-# React Paint V0.11.0
+# React Paint V0.11.2
 
 An open-source canvas-based library for React used for image annotation or as a digital whiteboard
 
@@ -82,7 +82,7 @@ const AdvancedUsage = () => {
   }
 
   useEffect(() => {
-    const onDataChanged = (data: StateData) => {
+    const onDataChanged = (data: StateData, source: 'user' | 'remote') => {
       setShapes(data.shapes)
     }
     registerEvent('dataChanged', onDataChanged)
@@ -126,12 +126,35 @@ you will find other usages in <a href="https://github.com/YoRab/react-paint-edit
 | :--- | :--- | :--- |
 | `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 | 
+| `registerEvent` | `(event: "dataChanged", listener: (data: StateData,  source: 'user' \| 'remote') => void) => void` |  registerEvent is used to register a listener for special events triggered by react-paint. The only currently available event is `dataChanged`. `source` indicates the origin of the state update  |
+| `unregisterEvent` | `(event: "dataChanged", listener?: ((data: StateData,  source: 'user' \| 'remote') => void) \| undefined) => void` | unregisterEvent is used to unregister a listener previously registered. Omitting listener will result in unregistering every listeners for the the given event | 
 | `resetCanvas` | `(shapes: DrawableShape[], clearHistory?: boolean) => Promise<void>` | reset canvas with the given shapes. use `[]` or `undefined` to clear the canvas. Set `false` to `clearHistory` to prevent history stack to be cleared | 
 | `getCurrentImage` | `() => string \| undefined` | Returns a data URL containing the content of the current canvas as a PNG image, or undefined if an error occured |
 | `getCurrentData` | `() => StateData` | Returns the current state of the canvas  |
 
+#### `OptionalOptions`
+
+| Parameter | Type | Description | Default value |
+| :--- | :--- | :--- | :--- |
+| `layersManipulation` | `boolean` | *Optional*. Show panel to manipulate layers | `true` |
+| `grid` | `number` | *Optional*. Size in px for grid cells. Set to 0 to hide grid | `0` |
+| `canGrow` | `boolean` | *Optional*. Allow canvas to upscale and grow to fit container | `false` |
+| `canShrink` | `boolean` | *Optional*. Allow canvas to downscale and shrink to fit container | `true` |
+| `withExport` | `boolean` | *Optional*. Show button to manually export to PNG | `true` |
+| `withLoadAndSave` | `boolean` | *Optional*.Show button to manually save or load data  | `true` |
+| `withUploadPicture` | `boolean` | *Optional*. Show button to add picture shape stored in base64 | `true` |
+| `withUrlPicture` | `boolean` | *Optional*.Show button to add picture shape with only the url stored. Need connectivity to be displayed | `false` |
+| `withFrameSelection` | `boolean` | *Optional*.Enable frame selection. **Currently, does not support multi shapes selection** | `false` |
+| `withSkeleton` | `boolean` | *Optional*. Display skeleton when hovering shape | `false` |
+| `clearCallback` | `'empty' \| 'defaultShapes' \| (() => DrawableShape[])` | *Optional*. Set clear button behavior. `empty` clear all shapes, `defaultShapes` uses shapes given in props. It is also possible to set a function returning an array of shapes | `empty` |
+| `brushAlgo` | `'simple' \| 'quadratic'` | *Optional*. Choose which algorithm to display brush shape. `simple` displays path as is, `quadratic` uses quadratic bézier curves  | `simple` |
+| `isBrushShapeDoneOnMouseUp` | `boolean` | *Optional*. Choose whether drawing brush shape after releasing mouse should create a new shape or not | `true` |
+| `canvasSelectionPadding` | `boolean` | *Optional*. Padding between shape and selection frame | `0` |
+| `availableTools` | `CustomToolInput[]` | *Optional*. List of available tools. See CustomTool for more details | `` |
+
+
+
+
 #### Canvas
 
 ##### Parameters
@@ -141,7 +164,7 @@ you will find other usages in <a href="https://github.com/YoRab/react-paint-edit
 | `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'}` |
+| `options` | `{canvasBackgroundColor?: string; canvasSelectionColor?: string; canvasSelectionWidth?: number}` | *Optional*. Set of properties to use to customize canvas style | `{canvasBackgroundColor: 'white'; canvasSelectionColor: 'blue'; canvasSelectionWidth: 2}` |
 
 
 #### Editor
@@ -160,8 +183,194 @@ you will find other usages in <a href="https://github.com/YoRab/react-paint-edit
 
 #### `DrawableShape`
 #### `StateData`
-#### `OptionalOptions`
 
+#### `CustomTool`
+
+```
+ type CustomTool = {
+  id: string
+  icon: string
+  label: string
+} & (
+  | {
+      type: 'brush'
+      settings: ToolsSettingsType<'brush'>
+    }
+  | {
+      type: 'circle'
+      settings: ToolsSettingsType<'circle'>
+    }
+  | {
+      type: 'ellipse'
+      settings: ToolsSettingsType<'ellipse'>
+    }
+  | {
+      type: 'rect'
+      settings: ToolsSettingsType<'rect'>
+    }
+  | {
+      type: 'square'
+      settings: ToolsSettingsType<'square'>
+    }
+  | {
+      type: 'line'
+      settings: ToolsSettingsType<'line'>
+    }
+  | {
+      type: 'polygon'
+      settings: ToolsSettingsType<'polygon'>
+    }
+  | {
+      type: 'curve'
+      settings: ToolsSettingsType<'curve'>
+    }
+  | {
+      type: 'text'
+      settings: ToolsSettingsType<'text'>
+    }
+  | {
+      type: 'picture'
+      settings: ToolsSettingsType<'picture'>
+    }
+)
+
+type SettingsOpacity = {
+  opacity: {
+    min: number
+    max: number
+    step: number
+    default: number
+    hidden?: boolean
+  }
+}
+
+type SettingsStrokeColor = {
+  strokeColor: {
+    values: string[]
+    default: string
+    hidden?: boolean
+  }
+}
+
+type SettingsFillColor = {
+  fillColor: {
+    values: string[]
+    default: string
+    hidden?: boolean
+  }
+}
+
+type SettingsLineWidth = {
+  lineWidth: {
+    min: number
+    max: number
+    step: number
+    default: number
+    hidden?: boolean
+  }
+}
+
+type SettingsLineDash = {
+  lineDash: {
+    values: number[]
+    default: number
+    hidden?: boolean
+  }
+}
+
+type SettingsLineArrow = {
+  lineArrow: {
+    values: number[]
+    default: number
+    hidden?: boolean
+  }
+}
+
+type SettingsFont = {
+  fontFamily: {
+    values: string[]
+    default: string
+    hidden?: boolean
+  }
+  fontBold: {
+    values: boolean[]
+    default: boolean
+    hidden?: boolean
+  }
+  fontItalic: {
+    values: boolean[]
+    default: boolean
+    hidden?: boolean
+  }
+}
+
+type SettingsPointsCount = {
+  pointsCount: {
+    min: number
+    max: number
+    step: number
+    default: number
+    hidden?: boolean
+  }
+}
+
+type ToolsRectSettings = SettingsStrokeColor & SettingsFillColor & SettingsOpacity & SettingsLineWidth & SettingsLineDash
+
+type ToolsSquareSettings = SettingsStrokeColor & SettingsFillColor & SettingsOpacity & SettingsLineWidth & SettingsLineDash
+
+type ToolsCircleSettings = SettingsStrokeColor & SettingsFillColor & SettingsOpacity & SettingsLineWidth & SettingsLineDash
+
+type ToolsEllipseSettings = SettingsStrokeColor & SettingsFillColor & SettingsOpacity & SettingsLineWidth & SettingsLineDash
+
+type ToolsTextSettings = SettingsOpacity & SettingsStrokeColor & SettingsFont
+
+type ToolsLineSettings = SettingsOpacity & SettingsStrokeColor & SettingsLineWidth & SettingsLineDash & SettingsLineArrow
+
+type ToolsBrushSettings = SettingsOpacity & SettingsStrokeColor & SettingsLineWidth & SettingsLineDash
+
+type ToolsPolygonSettings = SettingsOpacity &
+  SettingsStrokeColor &
+  SettingsFillColor &
+  SettingsLineWidth &
+  SettingsLineDash &
+  SettingsPointsCount
+
+type ToolsCurveSettings = SettingsOpacity &
+  SettingsStrokeColor &
+  SettingsFillColor &
+  SettingsLineWidth &
+  SettingsLineDash &
+  SettingsPointsCount
+
+type ToolsTriangleSettings = SettingsStrokeColor & SettingsFillColor & SettingsOpacity & SettingsLineWidth & SettingsLineDash
+
+type ToolsPictureSettings = SettingsOpacity
+
+type ToolsSettingsType<T extends ShapeType> = T extends 'rect'
+  ? ToolsRectSettings
+  : T extends 'square'
+    ? ToolsSquareSettings
+    : T extends 'circle'
+      ? ToolsCircleSettings
+      : T extends 'ellipse'
+        ? ToolsEllipseSettings
+        : T extends 'text'
+          ? ToolsTextSettings
+          : T extends 'line'
+            ? ToolsLineSettings
+            : T extends 'brush'
+              ? ToolsBrushSettings
+              : T extends 'polygon'
+                ? ToolsPolygonSettings
+                : T extends 'curve'
+                  ? ToolsCurveSettings
+                  : T extends 'triangle'
+                    ? ToolsTriangleSettings
+                    : T extends 'picture'
+                      ? ToolsPictureSettings
+                      : never
+
+```
 
 ## Changelog
 https://github.com/YoRab/react-paint-editor/blob/main/Changelog.md

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

@@ -7,6 +7,7 @@ export declare const SELECTIONCANVAS_CLASSNAME = "react-paint-canvas-selectionca
 export type BrushAlgo = 'simple' | 'quadratic';
 export type UtilsSettings = {
     brushAlgo: BrushAlgo;
+    isBrushShapeDoneOnMouseUp: boolean;
     gridGap: number;
     canvasOffset: Point;
     canvasSize: {
@@ -30,15 +31,14 @@ type AppOptionsType = {
     withSkeleton: boolean;
     clearCallback: 'empty' | 'defaultShapes' | (() => DrawableShape[]);
     brushAlgo: BrushAlgo;
-    selection: {
-        canvasSelectionColor: string;
-        canvasSelectionWidth: number;
-        canvasSelectionPadding: number;
-    };
+    isBrushShapeDoneOnMouseUp: boolean;
+    canvasSelectionPadding: number;
 };
 export type OptionalOptions = RecursivePartial<AppOptionsType>;
 export declare const DEFAULT_OPTIONS: AppOptionsType;
 export declare const DEFAULT_CANVAS_OPTIONS: {
     canvasBackgroundColor: string;
+    canvasSelectionColor: string;
+    canvasSelectionWidth: number;
 };
 export {};

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { UtilsSettings } from './../../canvas/constants/app';
 import type { ShapeEntity } from './../../common/types/Shapes';
 type UseKeyboardType = {

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

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import { type OptionalOptions, type UtilsSettings } from './../../canvas/constants/app';
-import type { DrawableShape, StateData, Point, ShapeEntity } from './../../common/types/Shapes';
+import type { DrawableShape, Point, ShapeEntity, StateData } from './../../common/types/Shapes';
 import type { ToolsType } from './../../common/types/tools';
 type UseReactPaintProps = {
     width?: number;
@@ -10,10 +9,10 @@ type UseReactPaintProps = {
     disabled?: boolean;
     options?: OptionalOptions;
 };
-declare const useReactPaint: ({ width, height, shapes: shapesFromProps, mode, disabled, options }: UseReactPaintProps) => {
+declare const useReactPaint: ({ width, height, shapes: defaultShapes, mode, disabled, options }: UseReactPaintProps) => {
     editorProps: {
         shapesRef: import("react").MutableRefObject<ShapeEntity[]>;
-        addPictureShape: (fileOrUrl: string | File, maxWidth?: number, maxHeight?: number) => Promise<ShapeEntity<"picture">>;
+        addPictureShape: (fileOrUrl: File | string, maxWidth?: number, maxHeight?: number) => Promise<ShapeEntity<"picture">>;
         moveShapes: (firstShapeId: string, lastShapeId: string) => void;
         toggleShapeVisibility: (shape: ShapeEntity) => void;
         toggleShapeLock: (shape: ShapeEntity) => void;
@@ -53,13 +52,6 @@ declare const useReactPaint: ({ width, height, shapes: shapesFromProps, mode, di
         clearCanvas: () => void;
         settings: UtilsSettings;
         canvas: {
-            selection: {
-                canvasSelectionColor: string;
-                canvasSelectionWidth: number;
-                canvasSelectionPadding: number;
-            };
-            withSkeleton: boolean;
-            withFrameSelection: boolean;
             canGrow: boolean;
             canShrink: boolean;
             layersManipulation: boolean;
@@ -67,7 +59,6 @@ declare const useReactPaint: ({ width, height, shapes: shapesFromProps, mode, di
             withLoadAndSave: boolean;
             withUploadPicture: boolean;
             withUrlPicture: boolean;
-            clearCallback: "empty" | "defaultShapes" | (() => DrawableShape[]);
         };
     };
     canvasProps: {
@@ -111,19 +102,15 @@ declare const useReactPaint: ({ width, height, shapes: shapesFromProps, mode, di
         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>;
+    registerEvent: (event: "dataChanged", fn: (data: StateData, source: "user" | "remote") => void) => void;
+    unregisterEvent: (event: "dataChanged", fn?: (data: StateData, source: "user" | "remote") => void) => void;
+    resetCanvas: (json?: DrawableShape[], clearHistory?: boolean) => void;
     getCurrentImage: () => string | undefined;
     getCurrentData: () => StateData;
 };

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type UseResizeObserverType = {
     element: React.RefObject<HTMLElement>;
     onResized: (width: number, height: number) => unknown;

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

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import { type UtilsSettings } from './../../canvas/constants/app';
-import type { StateData, Point, ShapeEntity } from './../../common/types/Shapes';
+import type { Point, ShapeEntity, StateData } 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;
+    registerEvent: (event: "dataChanged", fn: (data: StateData, source: "user" | "remote") => void) => void;
+    unregisterEvent: (event: "dataChanged", fn?: (data: StateData, source: "user" | "remote") => void) => void;
     shapesRef: import("react").MutableRefObject<ShapeEntity[]>;
     selectedShape: ShapeEntity | undefined;
     hoveredShape: ShapeEntity | undefined;
@@ -22,7 +21,10 @@ declare const useShapes: (settings: UtilsSettings) => {
     updateShape: (updatedShape: ShapeEntity, withSave?: boolean) => void;
     backwardShape: () => void;
     forwardShape: () => void;
-    clearShapes: (shapesToInit?: ShapeEntity[], clearHistory?: boolean) => void;
+    clearShapes: (shapesToInit: ShapeEntity[], options: {
+        clearHistory: boolean;
+        source: "user" | "remote";
+    }) => void;
     canGoBackward: boolean;
     canGoForward: boolean;
     canClear: boolean;

package/dist/canvas/index.d.ts

@@ -7,6 +7,8 @@ type AppProps = {
     style?: CSSProperties;
     options?: {
         canvasBackgroundColor?: string;
+        canvasSelectionColor?: string;
+        canvasSelectionWidth?: number;
     };
 };
 declare const App: ({ options, className, style, canvasProps }: AppProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 import type { UtilsSettings } from './../../canvas/constants/app';
-import type { DrawableShape, StateData, ShapeEntity } from './../../common/types/Shapes';
+import type { DrawableShape, ShapeEntity, StateData } 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/canvas/utils/file.d.ts

@@ -5,6 +5,7 @@ export declare const isSvg: (fileOrUrl: File | string) => boolean;
 export declare const fetchAndStringify: (url: string) => Promise<string>;
 export declare const downloadFile: (content: string, fileName: string) => void;
 export declare const getBase64Image: (img: HTMLImageElement) => string;
+export declare const getStringifiedImage: (shape: DrawableShape<"picture">) => string;
 export declare const getCanvasImage: (shapes: DrawableShape[], width: number, height: number, settings: UtilsSettings) => string;
 export declare const encodeShapesInString: (shapes: DrawableShape[], width: number, height: number) => string;
 export declare const decodeJson: (file: File) => Promise<unknown>;

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

@@ -1,11 +1,11 @@
 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'> & {
+export declare const createLineSelectionPath: (path: Path2D | undefined, shape: DrawableShape<"line" | "polygon" | "curve"> & {
     points: readonly Point[];
 }, settings: UtilsSettings, gravityAnchors?: boolean) => SelectionLinesType;
 export declare const drawLineSelection: ({ ctx, shape, withAnchors, selectionWidth, selectionColor, settings }: {
     ctx: CanvasRenderingContext2D;
-    shape: DrawableShape<'line'> | DrawableShape<'polygon'> | DrawableShape<'curve'>;
+    shape: DrawableShape<"line"> | DrawableShape<"polygon"> | DrawableShape<"curve">;
     withAnchors: boolean;
     selectionWidth: number;
     selectionColor: string;

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

@@ -5,15 +5,15 @@ import type { ToolsSettingsType } from './../../../common/types/tools';
 export declare const refreshBrush: <T extends DrawableShape<"brush">>(brush: T, settings: UtilsSettings) => T;
 export declare const createBrush: (shape: {
     id: string;
-    type: 'brush';
-    settings: ToolsSettingsType<'brush'>;
-}, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<'brush'>;
-export declare const drawBrush: (ctx: CanvasRenderingContext2D, shape: DrawableShape<'brush'>) => void;
-export declare const getBrushBorder: (brush: DrawableShape<'brush'>, { selectionPadding }: UtilsSettings) => Rect;
+    type: "brush";
+    settings: ToolsSettingsType<"brush">;
+}, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"brush">;
+export declare const drawBrush: (ctx: CanvasRenderingContext2D, shape: DrawableShape<"brush">) => void;
+export declare const getBrushBorder: (brush: DrawableShape<"brush">, { selectionPadding }: UtilsSettings) => Rect;
 export declare const translateBrush: <U extends DrawableShape<"brush">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings) => U & {
     points: Point[][];
 };
-export declare const resizeBrush: (cursorPosition: Point, originalShape: DrawableShape<'brush'>, selectionMode: SelectionModeResize, settings: UtilsSettings, keepRatio: boolean) => DrawableShape<'brush'>;
+export declare const resizeBrush: (cursorPosition: Point, originalShape: DrawableShape<"brush">, selectionMode: SelectionModeResize, settings: UtilsSettings, keepRatio: boolean) => DrawableShape<"brush">;
 export declare const addNewPointToShape: <T extends DrawableShape<"brush">>(shape: T, cursorPosition: Point, settings: UtilsSettings) => T & {
     points: Point[][];
 };

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

@@ -5,13 +5,13 @@ import type { ToolsSettingsType } from './../../../common/types/tools';
 export declare const refreshCircle: <T extends DrawableShape<"circle">>(shape: T, settings: UtilsSettings) => T;
 export declare const createCircle: (shape: {
     id: string;
-    type: 'circle';
-    settings: ToolsSettingsType<'circle'>;
-}, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<'circle'>;
-export declare const drawCircle: (ctx: CanvasRenderingContext2D, circle: DrawableShape<'circle'>) => void;
+    type: "circle";
+    settings: ToolsSettingsType<"circle">;
+}, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"circle">;
+export declare const drawCircle: (ctx: CanvasRenderingContext2D, circle: DrawableShape<"circle">) => void;
 export declare const getCircleBorder: (circle: Circle, settings: UtilsSettings) => Rect;
 export declare const translateCircle: <U extends DrawableShape<"circle">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings) => U & {
     x: number;
     y: number;
 };
-export declare const resizeCircle: (cursorPosition: Point, originalShape: DrawableShape<'circle'>, selectionMode: SelectionModeResize, settings: UtilsSettings) => DrawableShape<'circle'>;
+export declare const resizeCircle: (cursorPosition: Point, originalShape: DrawableShape<"circle">, selectionMode: SelectionModeResize, settings: UtilsSettings) => DrawableShape<"circle">;

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

@@ -5,11 +5,11 @@ import type { ToolsSettingsType } from './../../../common/types/tools';
 export declare const refreshCurve: <T extends DrawableShape<"curve">>(shape: T, settings: UtilsSettings) => T;
 export declare const createCurve: (shape: {
     id: string;
-    type: 'curve';
-    settings: ToolsSettingsType<'curve'>;
-}, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<'curve'>;
-export declare const resizeCurve: (cursorPosition: Point, originalShape: DrawableShape<'curve'>, selectionMode: SelectionModeResize<number>, settings: UtilsSettings) => DrawableShape<'curve'>;
-export declare const drawCurve: (ctx: CanvasRenderingContext2D, curve: DrawableShape<'curve'>) => void;
+    type: "curve";
+    settings: ToolsSettingsType<"curve">;
+}, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"curve">;
+export declare const resizeCurve: (cursorPosition: Point, originalShape: DrawableShape<"curve">, selectionMode: SelectionModeResize<number>, settings: UtilsSettings) => DrawableShape<"curve">;
+export declare const drawCurve: (ctx: CanvasRenderingContext2D, curve: DrawableShape<"curve">) => void;
 export declare const getCurveBorder: (polygon: import("./../../../common/types/Shapes").Polygon, settings: UtilsSettings) => import("./../../../common/types/Shapes").Rect;
 export declare const translateCurve: <U extends DrawableShape<"curve">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings) => U & {
     points: [number, number][];

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

@@ -5,13 +5,13 @@ import type { ToolsSettingsType } from './../../../common/types/tools';
 export declare const refreshEllipse: <T extends DrawableShape<"ellipse">>(shape: T, settings: UtilsSettings) => T;
 export declare const createEllipse: (shape: {
     id: string;
-    type: 'ellipse';
-    settings: ToolsSettingsType<'ellipse'>;
-}, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<'ellipse'>;
-export declare const drawEllipse: (ctx: CanvasRenderingContext2D, ellipse: DrawableShape<'ellipse'>) => void;
+    type: "ellipse";
+    settings: ToolsSettingsType<"ellipse">;
+}, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"ellipse">;
+export declare const drawEllipse: (ctx: CanvasRenderingContext2D, ellipse: DrawableShape<"ellipse">) => void;
 export declare const getEllipseBorder: (ellipse: Ellipse, settings: UtilsSettings) => Rect;
 export declare const translateEllipse: <U extends DrawableShape<"ellipse">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings) => U & {
     x: number;
     y: number;
 };
-export declare const resizeEllipse: (cursorPosition: Point, originalShape: DrawableShape<'ellipse'>, selectionMode: SelectionModeResize, settings: UtilsSettings, keepRatio?: boolean) => DrawableShape<'ellipse'>;
+export declare const resizeEllipse: (cursorPosition: Point, originalShape: DrawableShape<"ellipse">, selectionMode: SelectionModeResize, settings: UtilsSettings, keepRatio?: boolean) => DrawableShape<"ellipse">;

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

@@ -3,7 +3,7 @@ import type { SelectionModeData } from './../../../common/types/Mode';
 import type { DrawableShape, Point, Rect, ShapeEntity } from './../../../common/types/Shapes';
 import type { CustomTool } from './../../../common/types/tools';
 export declare const createShape: (ctx: CanvasRenderingContext2D, shape: Exclude<CustomTool, {
-    type: 'picture';
+    type: "picture";
 }>, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity;
 export declare const drawShape: (ctx: CanvasRenderingContext2D, shape: DrawableShape, settings: UtilsSettings) => void;
 export declare const getShapeInfos: (shape: DrawableShape, settings: UtilsSettings) => {

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

@@ -5,11 +5,11 @@ import type { ToolsSettingsType } from './../../../common/types/tools';
 export declare const refreshLine: <T extends DrawableShape<"line">>(line: T, settings: UtilsSettings) => T;
 export declare const createLine: (shape: {
     id: string;
-    type: 'line';
-    settings: ToolsSettingsType<'line'>;
-}, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<'line'>;
+    type: "line";
+    settings: ToolsSettingsType<"line">;
+}, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"line">;
 export declare const buildTriangleOnLine: (center: Point, rotation: number, lineStyle: StyleShape) => Triangle;
-export declare const drawLine: (ctx: CanvasRenderingContext2D, shape: DrawableShape<'line'>) => void;
+export declare const drawLine: (ctx: CanvasRenderingContext2D, shape: DrawableShape<"line">) => void;
 export declare const getLineBorder: (line: Line, settings: UtilsSettings) => Rect;
 export declare const translateLine: <U extends DrawableShape<"line">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings) => U & {
     points: [Point, Point];

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

@@ -2,9 +2,9 @@ import type { UtilsSettings } from './../../../canvas/constants/app';
 import type { Circle, DrawableShape, Line, Rect } from './../../../common/types/Shapes';
 export declare const createRecPath: (rect: Rect) => Path2D;
 export declare const createCirclePath: (shape: Circle) => Path2D;
-export declare const createEllipsePath: (ellipse: DrawableShape<'ellipse'>) => Path2D;
+export declare const createEllipsePath: (ellipse: DrawableShape<"ellipse">) => Path2D;
 export declare const createLinePath: (line: Line) => Path2D;
-export declare const createBrushPath: (brush: DrawableShape<'brush'>, settings: UtilsSettings) => Path2D | undefined;
-export declare const createCurvePath: (curve: DrawableShape<'curve'>) => Path2D | undefined;
-export declare const createPolygonPath: (polygon: DrawableShape<'polygon'>) => Path2D | undefined;
-export declare const createTrianglePath: (triangle: DrawableShape<'triangle'>) => Path2D;
+export declare const createBrushPath: (brush: DrawableShape<"brush">, settings: UtilsSettings) => Path2D | undefined;
+export declare const createCurvePath: (curve: DrawableShape<"curve">) => Path2D | undefined;
+export declare const createPolygonPath: (polygon: DrawableShape<"polygon">) => Path2D | undefined;
+export declare const createTrianglePath: (triangle: DrawableShape<"triangle">) => Path2D;

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

@@ -3,10 +3,10 @@ import type { SelectionModeResize } from './../../../common/types/Mode';
 import type { DrawableShape, Picture, Point, Rect, ShapeEntity } from './../../../common/types/Shapes';
 export declare const refreshPicture: <T extends DrawableShape<"picture">>(shape: T, settings: UtilsSettings) => T;
 export declare const createPicture: (fileOrUrl: File | string, maxPictureWidth: number, maxPictureHeight: number, settings: UtilsSettings) => Promise<ShapeEntity<"picture">>;
-export declare const drawPicture: (ctx: CanvasRenderingContext2D, picture: DrawableShape<'picture'>) => void;
+export declare const drawPicture: (ctx: CanvasRenderingContext2D, picture: DrawableShape<"picture">) => void;
 export declare const getPictureBorder: (picture: Picture, settings: UtilsSettings) => Rect;
 export declare const translatePicture: <U extends DrawableShape<"picture">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings) => U & {
     x: number;
     y: number;
 };
-export declare const resizePicture: (cursorPosition: Point, originalShape: DrawableShape<'picture'>, selectionMode: SelectionModeResize, settings: UtilsSettings, keepRatio: boolean) => DrawableShape<'picture'>;
+export declare const resizePicture: (cursorPosition: Point, originalShape: DrawableShape<"picture">, selectionMode: SelectionModeResize, settings: UtilsSettings, keepRatio: boolean) => DrawableShape<"picture">;

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

@@ -5,13 +5,13 @@ import type { ToolsSettingsType } from './../../../common/types/tools';
 export declare const refreshPolygon: <T extends DrawableShape<"polygon">>(shape: T, settings: UtilsSettings) => T;
 export declare const createPolygon: (shape: {
     id: string;
-    type: 'polygon';
-    settings: ToolsSettingsType<'polygon'>;
-}, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<'polygon'>;
-export declare const drawPolygon: (ctx: CanvasRenderingContext2D, polygon: DrawableShape<'polygon'>) => void;
+    type: "polygon";
+    settings: ToolsSettingsType<"polygon">;
+}, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"polygon">;
+export declare const drawPolygon: (ctx: CanvasRenderingContext2D, polygon: DrawableShape<"polygon">) => void;
 export declare const getPolygonBorder: (polygon: Polygon, settings: UtilsSettings) => Rect;
 export declare const translatePolygon: <U extends DrawableShape<"polygon">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings) => U & {
     points: [number, number][];
 };
-export declare const resizePolygon: (cursorPosition: Point, originalShape: DrawableShape<'polygon'>, selectionMode: SelectionModeResize<number>, settings: UtilsSettings) => DrawableShape<'polygon'>;
+export declare const resizePolygon: (cursorPosition: Point, originalShape: DrawableShape<"polygon">, selectionMode: SelectionModeResize<number>, settings: UtilsSettings) => DrawableShape<"polygon">;
 export declare const updatePolygonLinesCount: <T extends DrawableShape<"polygon">>(shape: T, newPointsCount: number, settings: UtilsSettings) => T;

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

@@ -9,7 +9,7 @@ export declare const createRectangle: <T extends "rect" | "square">(shape: {
     type: T;
     settings: ToolsSettingsType<T>;
 }, cursorPosition: Point, settings: UtilsSettings, width?: number, height?: number) => ShapeEntity<T>;
-export declare const drawRect: (ctx: CanvasRenderingContext2D, shape: DrawableShape<'rect' | 'square'>) => void;
+export declare const drawRect: (ctx: CanvasRenderingContext2D, shape: DrawableShape<"rect" | "square">) => void;
 export declare const getRectBorder: (rect: Rect, settings: UtilsSettings) => Rect;
 export declare const getRectOppositeAnchorAbsolutePosition: <T extends DrawableShape & Rect>(anchor: Point, center: Point, shape: T, settings: UtilsSettings, [negW, negH]?: [boolean, boolean]) => Point;
 export declare const translateRect: <T extends "rect" | "square", U extends DrawableShape<T>>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings) => U & {

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

@@ -6,14 +6,14 @@ export declare const refreshText: <T extends DrawableShape<"text">>(shape: T, se
 export declare const calculateTextFontSize: (ctx: CanvasRenderingContext2D, text: string[], maxWidth: number, fontBold: boolean, fontItalic: boolean, fontFamily?: string | undefined) => number;
 export declare const createText: (ctx: CanvasRenderingContext2D, shape: {
     id: string;
-    type: 'text';
-    settings: ToolsSettingsType<'text'>;
-}, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<'text'>;
-export declare const drawText: (ctx: CanvasRenderingContext2D, text: DrawableShape<'text'>) => void;
+    type: "text";
+    settings: ToolsSettingsType<"text">;
+}, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"text">;
+export declare const drawText: (ctx: CanvasRenderingContext2D, text: DrawableShape<"text">) => void;
 export declare const getTextBorder: (text: Text, settings: UtilsSettings) => Rect;
 export declare const translateText: <U extends DrawableShape<"text">>(cursorPosition: Point, originalShape: U, originalCursorPosition: Point, settings: UtilsSettings) => U & {
     x: number;
     y: number;
 };
-export declare const resizeText: (ctx: CanvasRenderingContext2D, cursorPosition: Point, originalShape: DrawableShape<'text'>, selectionMode: SelectionModeResize, settings: UtilsSettings) => DrawableShape<'text'>;
+export declare const resizeText: (ctx: CanvasRenderingContext2D, cursorPosition: Point, originalShape: DrawableShape<"text">, selectionMode: SelectionModeResize, settings: UtilsSettings) => DrawableShape<"text">;
 export declare const resizeTextShapeWithNewContent: <U extends DrawableShape<"text">>(ctx: CanvasRenderingContext2D, shape: U, newValue: string[], settings: UtilsSettings) => U;