@yorab/react-paint 0.11.1 → 0.11.3

package/README.md

@@ -1,4 +1,4 @@
-# React Paint V0.11.0
+# React Paint V0.11.3
 
 An open-source canvas-based library for React used for image annotation or as a digital whiteboard
 
@@ -150,6 +150,9 @@ you will find other usages in <a href="https://github.com/YoRab/react-paint-edit
 | `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
@@ -181,6 +184,194 @@ you will find other usages in <a href="https://github.com/YoRab/react-paint-edit
 #### `DrawableShape`
 #### `StateData`
 
+#### `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/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;
@@ -13,7 +12,7 @@ type 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;
@@ -110,7 +109,7 @@ declare const useReactPaint: ({ width, height, shapes: defaultShapes, mode, disa
         };
     };
     registerEvent: (event: "dataChanged", fn: (data: StateData, source: "user" | "remote") => void) => void;
-    unregisterEvent: (event: "dataChanged", fn?: ((data: StateData, source: "user" | "remote") => void) | undefined) => 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, source: 'user' | 'remote') => void) => void;
-    unregisterEvent: (event: 'dataChanged', fn?: (data: StateData, source: 'user' | 'remote') => 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;
@@ -24,7 +23,7 @@ declare const useShapes: (settings: UtilsSettings) => {
     forwardShape: () => void;
     clearShapes: (shapesToInit: ShapeEntity[], options: {
         clearHistory: boolean;
-        source: 'user' | 'remote';
+        source: "user" | "remote";
     }) => void;
     canGoBackward: boolean;
     canGoForward: boolean;

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;

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

@@ -1,3 +1,3 @@
 import type { DrawableShape, Triangle } from './../../../common/types/Shapes';
-export declare const createTriangle: (triangle: Triangle) => DrawableShape<'triangle'>;
-export declare const drawTriangle: (ctx: CanvasRenderingContext2D, triangle: DrawableShape<'triangle'>) => void;
+export declare const createTriangle: (triangle: Triangle) => DrawableShape<"triangle">;
+export declare const drawTriangle: (ctx: CanvasRenderingContext2D, triangle: DrawableShape<"triangle">) => void;

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

@@ -9,7 +9,7 @@ export declare const roundRotationForGrid: (rotation: number, settings: UtilsSet
 export declare const transformShape: (ctx: CanvasRenderingContext2D, shape: ShapeEntity, cursorPosition: Point, selectionMode: SelectionModeData<Point | number>, settings: UtilsSettings, isShiftPressed: boolean) => ShapeEntity;
 export declare const fitContentInsideContainer: (contentWidth: number, contentHeight: number, containerWidth: number, containerHeight: number, shouldFillContainer?: boolean) => number[];
 export declare const shortenLine: ({ line, size, direction }: {
-    line: DrawableShape<'line'>;
+    line: DrawableShape<"line">;
     size: number;
-    direction: 'start' | 'end' | 'both';
+    direction: "start" | "end" | "both";
 }) => Line;

package/dist/common/types/tools.d.ts

@@ -1,11 +1,39 @@
 import type { ShapeType } from './Shapes';
 export type CustomToolInput = {
     id: string;
-    type: ShapeType;
     icon?: string;
     label?: string;
-    settings?: ToolsSettingsType<ShapeType>;
-};
+} & ({
+    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'>;
+});
 export type CustomTool = {
     id: string;
     icon: string;
@@ -47,18 +75,21 @@ export type SettingsOpacity = {
         max: number;
         step: number;
         default: number;
+        hidden?: boolean;
     };
 };
 export type SettingsStrokeColor = {
     strokeColor: {
         values: string[];
         default: string;
+        hidden?: boolean;
     };
 };
 export type SettingsFillColor = {
     fillColor: {
         values: string[];
         default: string;
+        hidden?: boolean;
     };
 };
 export type SettingsLineWidth = {
@@ -67,32 +98,38 @@ export type SettingsLineWidth = {
         max: number;
         step: number;
         default: number;
+        hidden?: boolean;
     };
 };
 export type SettingsLineDash = {
     lineDash: {
         values: number[];
         default: number;
+        hidden?: boolean;
     };
 };
 export type SettingsLineArrow = {
     lineArrow: {
         values: number[];
         default: number;
+        hidden?: boolean;
     };
 };
 export type SettingsFont = {
     fontFamily: {
         values: string[];
         default: string;
+        hidden?: boolean;
     };
     fontBold: {
         values: boolean[];
         default: boolean;
+        hidden?: boolean;
     };
     fontItalic: {
         values: boolean[];
         default: boolean;
+        hidden?: boolean;
     };
 };
 export type SettingsPointsCount = {
@@ -101,6 +138,7 @@ export type SettingsPointsCount = {
         max: number;
         step: number;
         default: number;
+        hidden?: boolean;
     };
 };
 export type ToolsRectSettings = SettingsStrokeColor & SettingsFillColor & SettingsOpacity & SettingsLineWidth & SettingsLineDash;
@@ -114,7 +152,7 @@ export type ToolsPolygonSettings = SettingsOpacity & SettingsStrokeColor & Setti
 export type ToolsCurveSettings = SettingsOpacity & SettingsStrokeColor & SettingsFillColor & SettingsLineWidth & SettingsLineDash & SettingsPointsCount;
 export type ToolsTriangleSettings = SettingsStrokeColor & SettingsFillColor & SettingsOpacity & SettingsLineWidth & SettingsLineDash;
 export type ToolsPictureSettings = SettingsOpacity;
-export 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 : unknown;
+export 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;
 export type ActionsType = 'selection' | 'undo' | 'redo' | 'clear' | 'export' | 'loadfile' | 'savefile' | 'move' | 'uploadpicture' | 'addurlpicture';
 export type ActionsTool = {
     id: string;