@yorab/react-paint 0.11.0 → 0.11.1

package/README.md

@@ -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,32 @@ 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` |
+
+
 #### Canvas
 
 ##### Parameters
@@ -141,7 +161,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 +180,6 @@ you will find other usages in <a href="https://github.com/YoRab/react-paint-edit
 
 #### `DrawableShape`
 #### `StateData`
-#### `OptionalOptions`
-
 
 ## 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/useReactPaint.d.ts

@@ -10,7 +10,7 @@ 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">>;
@@ -53,13 +53,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 +60,6 @@ declare const useReactPaint: ({ width, height, shapes: shapesFromProps, mode, di
             withLoadAndSave: boolean;
             withUploadPicture: boolean;
             withUrlPicture: boolean;
-            clearCallback: "empty" | "defaultShapes" | (() => DrawableShape[]);
         };
     };
     canvasProps: {
@@ -111,19 +103,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) | undefined) => void;
+    resetCanvas: (json?: DrawableShape[], clearHistory?: boolean) => void;
     getCurrentImage: () => string | undefined;
     getCurrentData: () => StateData;
 };

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

@@ -2,8 +2,8 @@
 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;
+    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 +22,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;