@yorab/react-paint 0.10.0 → 0.10.1

package/README.md

@@ -1 +1 @@
-# React Paint V0.9.3
+# React Paint V0.10.1

package/dist/components/Canvas.d.ts

@@ -1,11 +1,10 @@
 import React from 'react';
-import { type GridFormatType } from '../constants/app';
+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 = {
-    gridFormat: GridFormatType;
     disabled?: boolean;
     canGrow?: boolean;
     canvasSize: {
@@ -15,7 +14,7 @@ type DrawerType = {
     };
     selectionColor: string;
     selectionWidth: number;
-    selectionPadding: number;
+    settings: UtilsSettings;
     isEditMode: boolean;
     shapes: ShapeEntity[];
     saveShapes: () => void;
@@ -26,13 +25,12 @@ type DrawerType = {
     setSelectionFrame: React.Dispatch<React.SetStateAction<[Point, Point] | undefined>>;
     hoveredShape: ShapeEntity | undefined;
     selectionFrame: [Point, Point] | undefined;
-    refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point, canvasOffset: Point, currentScale: number) => void;
-    refreshSelectedShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point, canvasOffset: Point, currentScale: number) => void;
+    refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point, settings: UtilsSettings) => void;
+    refreshSelectedShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point, settings: UtilsSettings) => void;
     activeTool: ToolsType;
     setActiveTool: React.Dispatch<React.SetStateAction<ToolsType>>;
     canvasOffsetStartPosition: Point | undefined;
     setCanvasOffsetStartPosition: React.Dispatch<React.SetStateAction<Point | undefined>>;
-    canvasOffset: Point;
     setCanvasOffset: React.Dispatch<React.SetStateAction<Point>>;
     isInsideComponent: boolean;
     selectionMode: SelectionModeData<number | Point>;

package/dist/components/settings/SettingsBar.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { ShapeEntity } from '../../types/Shapes';
 import type { CustomTool, ToolsType } from '../../types/tools';
 import './SettingsBar.css';
+import { UtilsSettings } from 'src/constants/app';
 type SettingsBoxType = {
     width: number;
     disabled?: boolean;
@@ -11,11 +12,10 @@ type SettingsBoxType = {
     activeTool: ToolsType;
     selectedShape: ShapeEntity | undefined;
     canvas: HTMLCanvasElement | null;
-    currentScale: number;
-    selectionPadding: number;
+    settings: UtilsSettings;
     updateShape: (shape: ShapeEntity, withSave?: boolean) => void;
     removeShape: (shape: ShapeEntity) => void;
     toggleLayoutPanel: () => void;
 };
-declare const SettingsBar: ({ width, disabled, availableTools, updateToolSettings, layersManipulation, toggleLayoutPanel, activeTool, selectedShape, canvas, currentScale, selectionPadding, updateShape, removeShape }: SettingsBoxType) => React.JSX.Element;
+declare const SettingsBar: ({ width, disabled, availableTools, updateToolSettings, layersManipulation, toggleLayoutPanel, activeTool, selectedShape, canvas, settings, updateShape, removeShape }: SettingsBoxType) => React.JSX.Element;
 export default SettingsBar;

package/dist/components/toolbox/EditTextBox.d.ts

@@ -1,14 +1,15 @@
 import React from 'react';
 import type { DrawableShape } from '../../types/Shapes';
 import './EditTextBox.css';
+import { UtilsSettings } from 'src/constants/app';
 type EditTextBoxType = {
     scaleRatio: number;
     disabled?: boolean;
     shape: DrawableShape<'text'>;
     defaultValue: string[];
-    selectionPadding: number;
+    settings: UtilsSettings;
     updateValue: (newValue: string[]) => void;
     saveShapes: () => void;
 };
-declare const EditTextBox: ({ disabled, scaleRatio, shape, defaultValue, updateValue, saveShapes, selectionPadding }: EditTextBoxType) => React.JSX.Element;
+declare const EditTextBox: ({ disabled, scaleRatio, shape, defaultValue, updateValue, saveShapes, settings }: EditTextBoxType) => React.JSX.Element;
 export default EditTextBox;

package/dist/constants/app.d.ts

@@ -1,4 +1,4 @@
-import type { DrawableShapeJson } from '../types/Shapes';
+import type { DrawableShapeJson, Point } from '../types/Shapes';
 import type { CustomToolInput } from '../types/tools';
 import type { RecursivePartial } from '../types/utils';
 export declare const APP_NAME = "react_paint";
@@ -9,6 +9,18 @@ export declare const GRID_SMALL = 1;
 export declare const GRID_MEDIUM = 2;
 export declare const GRID_LARGE = 3;
 export type GridFormatType = typeof GRID_NONE | typeof GRID_SMALL | typeof GRID_MEDIUM | typeof GRID_LARGE;
+export type BrushAlgo = 'simple' | 'quadratic';
+export type UtilsSettings = {
+    brushAlgo: BrushAlgo;
+    gridFormat: GridFormatType;
+    canvasOffset: Point;
+    canvasSize: {
+        width: number;
+        height: number;
+        scaleRatio: number;
+    };
+    selectionPadding: number;
+};
 type AppOptionsType = {
     layersManipulation: boolean;
     grid: GridFormatType;
@@ -22,6 +34,7 @@ type AppOptionsType = {
     withFrameSelection: boolean;
     withSkeleton: boolean;
     clearCallback: 'empty' | 'defaultShapes' | (() => DrawableShapeJson[]);
+    brushAlgo: BrushAlgo;
     uiStyle: {
         toolbarBackgroundColor: string;
         dividerColor: string;

package/dist/hooks/useDrawableCanvas.d.ts

@@ -1,15 +1,10 @@
 import React from 'react';
-import type { GridFormatType } from '../constants/app';
+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';
 type UseCanvasType = {
     disabled?: boolean;
-    canvasSize: {
-        width: number;
-        height: number;
-        scaleRatio: number;
-    };
     shapes: ShapeEntity[];
     saveShapes: () => void;
     addShape: (newShape: ShapeEntity) => void;
@@ -18,12 +13,10 @@ type UseCanvasType = {
     setSelectedShape: React.Dispatch<React.SetStateAction<ShapeEntity | undefined>>;
     activeTool: ToolsType;
     setActiveTool: React.Dispatch<React.SetStateAction<ToolsType>>;
-    refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point, canvasOffset: Point, currentScale: number) => void;
-    refreshSelectedShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point, canvasOffset: Point, currentScale: number) => void;
+    refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point, settings: UtilsSettings) => void;
+    refreshSelectedShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point, settings: UtilsSettings) => void;
     canvasOffsetStartPosition: Point | undefined;
     setCanvasOffsetStartPosition: React.Dispatch<React.SetStateAction<Point | undefined>>;
-    gridFormat: GridFormatType;
-    canvasOffset: Point;
     setCanvasOffset: React.Dispatch<React.SetStateAction<Point>>;
     isInsideComponent: boolean;
     selectionMode: SelectionModeData<number | Point>;
@@ -31,11 +24,11 @@ type UseCanvasType = {
     setSelectionFrame: React.Dispatch<React.SetStateAction<[Point, Point] | undefined>>;
     drawCanvasRef: React.MutableRefObject<HTMLCanvasElement | null>;
     selectionCanvasRef: React.MutableRefObject<HTMLCanvasElement | null>;
-    selectionPadding: number;
     isShiftPressed: boolean;
     withFrameSelection: boolean;
+    settings: UtilsSettings;
 };
-declare const useDrawableCanvas: ({ disabled, addShape, canvasSize, drawCanvasRef, setActiveTool, refreshHoveredShape, shapes, selectionMode, activeTool, isInsideComponent, setCanvasOffset, selectedShape, selectionCanvasRef, canvasOffsetStartPosition, refreshSelectedShapes, setSelectedShape, setSelectionFrame, setCanvasOffsetStartPosition, updateSingleShape, gridFormat, canvasOffset, saveShapes, setSelectionMode, selectionPadding, isShiftPressed, withFrameSelection }: UseCanvasType) => {
+declare const useDrawableCanvas: ({ disabled, addShape, drawCanvasRef, setActiveTool, refreshHoveredShape, shapes, selectionMode, activeTool, isInsideComponent, setCanvasOffset, selectedShape, selectionCanvasRef, canvasOffsetStartPosition, refreshSelectedShapes, setSelectedShape, setSelectionFrame, setCanvasOffsetStartPosition, updateSingleShape, saveShapes, setSelectionMode, settings, isShiftPressed, withFrameSelection }: UseCanvasType) => {
     hoverMode: HoverModeData;
 };
 export default useDrawableCanvas;

package/dist/hooks/useKeyboard.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { GridFormatType } from '../constants/app';
+import type { UtilsSettings } from '../constants/app';
 import type { ShapeEntity } from '../types/Shapes';
 type UseKeyboardType = {
     isInsideComponent: boolean;
@@ -12,9 +12,7 @@ type UseKeyboardType = {
     forwardShape: () => void;
     setShiftPressed: (value: React.SetStateAction<boolean>) => void;
     isEditingText: boolean;
-    gridFormat: GridFormatType;
-    currentScale: number;
-    selectionPadding: number;
+    settings: UtilsSettings;
 };
-declare const useKeyboard: ({ gridFormat, isInsideComponent, selectedShape, isEditingText, currentScale, selectionPadding, setSelectedShape, removeShape, pasteShape, updateShape, backwardShape, forwardShape, setShiftPressed }: UseKeyboardType) => {};
+declare const useKeyboard: ({ isInsideComponent, selectedShape, isEditingText, settings, setSelectedShape, removeShape, pasteShape, updateShape, backwardShape, forwardShape, setShiftPressed }: UseKeyboardType) => {};
 export default useKeyboard;

package/dist/hooks/useShapes.d.ts

@@ -1,22 +1,19 @@
 /// <reference types="react" />
+import { UtilsSettings } from 'src/constants/app';
 import type { Point, ShapeEntity } from '../types/Shapes';
-declare const useShapes: (onDataChanged: (() => void) | undefined, selectionPadding: number, canvasSize: {
-    width: number;
-    height: number;
-    scaleRatio: number;
-}) => {
+declare const useShapes: (onDataChanged: (() => void) | undefined, settings: UtilsSettings) => {
     shapesRef: import("react").MutableRefObject<ShapeEntity[]>;
     selectedShape: ShapeEntity | undefined;
     hoveredShape: ShapeEntity | undefined;
     selectionFrame: [Point, Point] | undefined;
     setSelectionFrame: import("react").Dispatch<import("react").SetStateAction<[Point, Point] | undefined>>;
-    refreshSelectedShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point, canvasOffset: Point, currentScale: number) => void;
+    refreshSelectedShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point) => void;
     addShape: (newShape: ShapeEntity) => void;
     addPictureShape: (fileOrUrl: File | string, maxWidth?: number, maxHeight?: number) => Promise<ShapeEntity<"picture">>;
     moveShapes: (firstShapeId: string, lastShapeId: string) => void;
     saveShapes: () => void;
     setSelectedShape: import("react").Dispatch<import("react").SetStateAction<ShapeEntity | undefined>>;
-    refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point, canvasOffset: Point, currentScale: number) => void;
+    refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point) => void;
     toggleShapeVisibility: (shape: ShapeEntity) => void;
     toggleShapeLock: (shape: ShapeEntity) => void;
     removeShape: (shape: ShapeEntity) => void;