@yorab/react-paint 0.10.1 → 0.11.0

package/README.md

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

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

@@ -1,8 +1,8 @@
+import { type UtilsSettings } from './../../canvas/constants/app';
+import type { SelectionModeData } from './../../common/types/Mode';
+import type { Point, ShapeEntity } from './../../common/types/Shapes';
+import type { ToolsType } from './../../common/types/tools';
 import React from 'react';
-import { UtilsSettings } from '../constants/app';
-import type { SelectionModeData } from '../types/Mode';
-import type { Point, ShapeEntity } from '../types/Shapes';
-import type { ToolsType } from '../types/tools';
 import './Canvas.css';
 type DrawerType = {
     disabled?: boolean;

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

@@ -1,7 +1,6 @@
-import React from 'react';
-import type { DrawableShape } from '../../types/Shapes';
+import type { UtilsSettings } from './../../canvas/constants/app';
+import type { DrawableShape } from './../../common/types/Shapes';
 import './EditTextBox.css';
-import { UtilsSettings } from 'src/constants/app';
 type EditTextBoxType = {
     scaleRatio: number;
     disabled?: boolean;
@@ -11,5 +10,5 @@ type EditTextBoxType = {
     updateValue: (newValue: string[]) => void;
     saveShapes: () => void;
 };
-declare const EditTextBox: ({ disabled, scaleRatio, shape, defaultValue, updateValue, saveShapes, settings }: EditTextBoxType) => React.JSX.Element;
+declare const EditTextBox: ({ disabled, scaleRatio, shape, defaultValue, updateValue, saveShapes, settings }: EditTextBoxType) => import("react/jsx-runtime").JSX.Element;
 export default EditTextBox;

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

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

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

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

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

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

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

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

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

@@ -1,8 +1,8 @@
-import React from 'react';
-import type { UtilsSettings } from '../constants/app';
-import type { HoverModeData, SelectionModeData } from '../types/Mode';
-import type { Point, ShapeEntity } from '../types/Shapes';
-import type { ToolsType } from '../types/tools';
+import type { UtilsSettings } from './../../canvas/constants/app';
+import type { HoverModeData, SelectionModeData } from './../../common/types/Mode';
+import type { Point, ShapeEntity } from './../../common/types/Shapes';
+import type { ToolsType } from './../../common/types/tools';
+import type React from 'react';
 type UseCanvasType = {
     disabled?: boolean;
     shapes: ShapeEntity[];

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { UtilsSettings } from '../constants/app';
-import type { ShapeEntity } from '../types/Shapes';
+import type { UtilsSettings } from './../../canvas/constants/app';
+import type { ShapeEntity } from './../../common/types/Shapes';
 type UseKeyboardType = {
     isInsideComponent: boolean;
     selectedShape: ShapeEntity | undefined;

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

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

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

@@ -1,7 +1,9 @@
 /// <reference types="react" />
-import { UtilsSettings } from 'src/constants/app';
-import type { Point, ShapeEntity } from '../types/Shapes';
-declare const useShapes: (onDataChanged: (() => void) | undefined, settings: UtilsSettings) => {
+import { type UtilsSettings } from './../../canvas/constants/app';
+import type { StateData, Point, ShapeEntity } from './../../common/types/Shapes';
+declare const useShapes: (settings: UtilsSettings) => {
+    registerEvent: (event: 'dataChanged', fn: (data: StateData) => void) => void;
+    unregisterEvent: (event: 'dataChanged', fn?: (data: StateData) => void) => void;
     shapesRef: import("react").MutableRefObject<ShapeEntity[]>;
     selectedShape: ShapeEntity | undefined;
     hoveredShape: ShapeEntity | undefined;

package/dist/canvas/index.d.ts

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

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

@@ -1,5 +1,5 @@
-import { UtilsSettings } from 'src/constants/app';
-import type { Point } from '../types/Shapes';
+import type { UtilsSettings } from './../../canvas/constants/app';
+import type { Point } from './../../common/types/Shapes';
 export declare const initCanvasContext: (ctx: CanvasRenderingContext2D) => void;
 export declare const updateCanvasContext: (ctx: CanvasRenderingContext2D, style?: {
     fillColor?: string;

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

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

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

@@ -1,5 +1,5 @@
-import { UtilsSettings } from 'src/constants/app';
-import type { DrawableShape, ExportDataType, ShapeEntity } from '../types/Shapes';
+import type { UtilsSettings } from './../../canvas/constants/app';
+import type { DrawableShape, ShapeEntity } from './../../common/types/Shapes';
 export declare const addSizeAndConvertSvgToObjectUrl: (svgFileContent: string) => string;
 export declare const isSvg: (fileOrUrl: File | string) => boolean;
 export declare const fetchAndStringify: (url: string) => Promise<string>;
@@ -8,4 +8,4 @@ export declare const getBase64Image: (img: HTMLImageElement) => string;
 export declare const getCanvasImage: (shapes: DrawableShape[], width: number, height: number, settings: UtilsSettings) => string;
 export declare const encodeShapesInString: (shapes: DrawableShape[], width: number, height: number) => string;
 export declare const decodeJson: (file: File) => Promise<unknown>;
-export declare const decodeImportedData: (shapesForJson: ExportDataType, settings: UtilsSettings) => Promise<ShapeEntity[]>;
+export declare const decodeImportedData: (shapesForJson: DrawableShape[], settings: UtilsSettings) => Promise<ShapeEntity[]>;

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

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

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

@@ -1,6 +1,6 @@
-import type { HoverModeData } from '../types/Mode';
-import type { DrawableShape, Point, Rect } from '../types/Shapes';
-import { UtilsSettings } from 'src/constants/app';
+import type { UtilsSettings } from './../../canvas/constants/app';
+import type { HoverModeData } from './../../common/types/Mode';
+import type { DrawableShape, Point, Rect } from './../../common/types/Shapes';
 export declare const getCursorPosition: (e: MouseEvent | TouchEvent, canvas: HTMLCanvasElement | null, settings: UtilsSettings) => Point;
 export declare const isTouchGesture: (e: MouseEvent | TouchEvent) => e is TouchEvent;
 export declare const getPointPositionAfterCanvasTransformation: (point: Point, shapeRotation: number, [originX, originY]: Point, [canvasOffsetX, canvasOffsetY]: Point) => Point;

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

@@ -1,5 +1,5 @@
-import { UtilsSettings } from 'src/constants/app';
-import { DrawableShape, Point, SelectionLinesType } from 'src/types/Shapes';
+import type { UtilsSettings } from './../../../canvas/constants/app';
+import type { DrawableShape, Point, SelectionLinesType } from './../../../common/types/Shapes';
 export declare const createLineSelectionPath: (path: Path2D | undefined, shape: DrawableShape<'line' | 'polygon' | 'curve'> & {
     points: readonly Point[];
 }, settings: UtilsSettings, gravityAnchors?: boolean) => SelectionLinesType;

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

@@ -1,6 +1,6 @@
-import type { UtilsSettings } from '../../constants/app';
-import type { SelectionModeResize } from '../../types/Mode';
-import type { DrawableShape, Point, SelectionDefaultType } from '../../types/Shapes';
+import type { UtilsSettings } from './../../../canvas/constants/app';
+import type { SelectionModeResize } from './../../../common/types/Mode';
+import type { DrawableShape, Point, SelectionDefaultType } from './../../../common/types/Shapes';
 export declare const createRecSelectionPath: (path: Path2D | undefined, rect: DrawableShape, settings: UtilsSettings) => SelectionDefaultType;
 export declare const drawSelectionRect: (ctx: CanvasRenderingContext2D, shape: DrawableShape & {
     selection?: SelectionDefaultType;

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

@@ -0,0 +1,3 @@
+import type { UtilsSettings } from './../../../canvas/constants/app';
+import type { Point } from './../../../common/types/Shapes';
+export declare const drawFrame: (ctx: CanvasRenderingContext2D, selectionFrame: [Point, Point], settings: UtilsSettings) => void;

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

@@ -1,6 +1,6 @@
-import { UtilsSettings } from 'src/constants/app';
-import type { HoverModeData, SelectionModeData } from '../types/Mode';
-import type { Point, ShapeEntity } from '../types/Shapes';
+import type { UtilsSettings } from './../../canvas/constants/app';
+import type { HoverModeData, SelectionModeData } from './../../common/types/Mode';
+import type { Point, ShapeEntity } from './../../common/types/Shapes';
 export declare const getNewSelectionData: (hoverMode: HoverModeData, selectedShape: ShapeEntity, cursorPosition: Point, settings: UtilsSettings) => SelectionModeData<Point | number> | undefined;
 export declare const selectShape: (ctx: CanvasRenderingContext2D, shapes: ShapeEntity[], cursorPosition: Point, settings: UtilsSettings, selectedShape: ShapeEntity | undefined, isTouchGesture: boolean, withFrameSelection: boolean) => {
     mode: SelectionModeData<Point | number>;

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

@@ -1,7 +1,7 @@
-import { UtilsSettings } from '../../constants/app';
-import { SelectionModeResize } from '../../types/Mode';
-import type { DrawableShape, Point, Rect, ShapeEntity } from '../../types/Shapes';
-import type { ToolsSettingsType } from '../../types/tools';
+import type { UtilsSettings } from './../../../canvas/constants/app';
+import type { SelectionModeResize } from './../../../common/types/Mode';
+import type { DrawableShape, Point, Rect, ShapeEntity } from './../../../common/types/Shapes';
+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;

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

@@ -1,7 +1,7 @@
-import { UtilsSettings } from '../../constants/app';
-import { SelectionModeResize } from '../../types/Mode';
-import type { Circle, DrawableShape, Point, Rect, ShapeEntity } from '../../types/Shapes';
-import type { ToolsSettingsType } from '../../types/tools';
+import type { UtilsSettings } from './../../../canvas/constants/app';
+import type { SelectionModeResize } from './../../../common/types/Mode';
+import type { Circle, DrawableShape, Point, Rect, ShapeEntity } from './../../../common/types/Shapes';
+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;

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

@@ -1,7 +1,7 @@
-import { UtilsSettings } from '../../constants/app';
-import { SelectionModeResize } from '../../types/Mode';
-import type { DrawableShape, Point, ShapeEntity } from '../../types/Shapes';
-import type { ToolsSettingsType } from '../../types/tools';
+import type { UtilsSettings } from './../../../canvas/constants/app';
+import type { SelectionModeResize } from './../../../common/types/Mode';
+import type { DrawableShape, Point, ShapeEntity } from './../../../common/types/Shapes';
+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;
@@ -10,7 +10,7 @@ export declare const createCurve: (shape: {
 }, 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("../../types/Shapes").Polygon, settings: UtilsSettings) => import("../../types/Shapes").Rect;
+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/{utils → canvas/utils}/shapes/ellipse.d.ts

@@ -1,7 +1,7 @@
-import { UtilsSettings } from '../../constants/app';
-import { SelectionModeResize } from '../../types/Mode';
-import type { DrawableShape, Ellipse, Point, Rect, ShapeEntity } from '../../types/Shapes';
-import type { ToolsSettingsType } from '../../types/tools';
+import type { UtilsSettings } from './../../../canvas/constants/app';
+import type { SelectionModeResize } from './../../../common/types/Mode';
+import type { DrawableShape, Ellipse, Point, Rect, ShapeEntity } from './../../../common/types/Shapes';
+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;

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

@@ -1,7 +1,7 @@
-import type { UtilsSettings } from '../../constants/app';
-import { SelectionModeData } from '../../types/Mode';
-import type { DrawableShape, Point, Rect, ShapeEntity } from '../../types/Shapes';
-import type { CustomTool } from '../../types/tools';
+import type { UtilsSettings } from './../../../canvas/constants/app';
+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';
 }>, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity;
@@ -22,7 +22,7 @@ export declare const drawShapeSelection: ({ ctx, shape, settings, selectionWidth
     settings: UtilsSettings;
     selectionWidth: number;
     selectionColor: string;
-    withAnchors?: boolean | undefined;
+    withAnchors?: boolean;
 }) => void;
 export declare const drawSelectionFrame: ({ ctx, selectionFrame, settings }: {
     ctx: CanvasRenderingContext2D;