@yorab/react-paint 0.16.2 → 0.17.0

package/dist/canvas/components/Canvas.d.ts

@@ -40,12 +40,14 @@ type DrawerType = {
     } | undefined>>;
     setCanvasOffset: (offset: Point) => void;
     isInsideComponent: boolean;
+    isInsideCanvas: boolean;
     selectionMode: SelectionModeData<number | Point>;
     setSelectionMode: React.Dispatch<React.SetStateAction<SelectionModeData<number | Point>>>;
     isShiftPressed: boolean;
     isAltPressed: boolean;
     isSpacePressed: boolean;
     withFrameSelection: boolean;
+    withContextMenu: boolean;
     withSkeleton: boolean;
     setCanvasMoveAcceleration: React.Dispatch<React.SetStateAction<Point>>;
 };

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

@@ -40,6 +40,7 @@ type AppOptionsType = {
     withUrlPicture: boolean;
     withFrameSelection: boolean;
     withSkeleton: boolean;
+    withContextMenu: boolean;
     clearCallback: 'empty' | 'defaultShapes' | (() => ExportedDrawableShape[]);
     brushAlgo: BrushAlgo;
     isBrushShapeDoneOnMouseUp: boolean;

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

@@ -10,6 +10,8 @@ export declare const KeyboardCode: {
     readonly Alt: "Alt";
     readonly Option: "Option";
     readonly Space: " ";
+    readonly A: "A";
+    readonly a: "a";
     readonly z: "z";
     readonly Z: "Z";
     readonly y: "y";
@@ -19,6 +21,7 @@ export declare const KeyboardCode: {
     readonly Zero: "0";
 };
 export declare const KeyboardCommand: {
+    readonly Cut: "cut";
     readonly Copy: "copy";
     readonly Paste: "paste";
 };

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

@@ -25,6 +25,7 @@ type UseCanvasType = {
     } | undefined>>;
     setCanvasOffset: (offset: Point) => void;
     isInsideComponent: boolean;
+    isInsideCanvas: boolean;
     selectionMode: SelectionModeData<number | Point>;
     setSelectionMode: React.Dispatch<React.SetStateAction<SelectionModeData<number | Point>>>;
     setSelectionFrame: React.Dispatch<React.SetStateAction<{
@@ -36,10 +37,11 @@ type UseCanvasType = {
     isShiftPressed: boolean;
     isAltPressed: boolean;
     withFrameSelection: boolean;
+    withContextMenu: boolean;
     settings: UtilsSettings;
     isSpacePressed: boolean;
 };
-declare const useDrawableCanvas: ({ addShapes, drawCanvasRef, setActiveTool, refreshHoveredShape, shapes, selectionMode, activeTool, isInsideComponent, setCanvasOffset, selectedShape, canvasOffsetStartData, refreshSelectedShapes, setSelectedShape, setSelectionFrame, setCanvasOffsetStartData, updateSingleShape, duplicateShapes, saveShapes, setSelectionMode, setCanvasMoveAcceleration, settings, isShiftPressed, isAltPressed, withFrameSelection, isSpacePressed }: UseCanvasType) => {
+declare const useDrawableCanvas: ({ addShapes, drawCanvasRef, setActiveTool, refreshHoveredShape, shapes, selectionMode, activeTool, isInsideComponent, isInsideCanvas, setCanvasOffset, selectedShape, canvasOffsetStartData, refreshSelectedShapes, setSelectedShape, setSelectionFrame, setCanvasOffsetStartData, updateSingleShape, duplicateShapes, saveShapes, setSelectionMode, setCanvasMoveAcceleration, settings, isShiftPressed, isAltPressed, withFrameSelection, withContextMenu, isSpacePressed }: UseCanvasType) => {
     hoverMode: HoverModeData;
 };
 export default useDrawableCanvas;

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

@@ -9,6 +9,7 @@ type UseKeyboardType = {
     pasteShapes: (shape: ShapeEntity[]) => void;
     updateShapes: (shapes: ShapeEntity[]) => void;
     setSelectedShape: (value: React.SetStateAction<SelectionType | undefined>) => void;
+    selectAllShapes: () => void;
     removeShape: (shape: ShapeEntity[]) => void;
     backwardShape: () => void;
     forwardShape: () => void;
@@ -25,6 +26,8 @@ type UseKeyboardType = {
     settings: UtilsSettings;
     setCanvasZoom: (action: 'unzoom' | 'zoom' | 'default') => void;
     resetZoom: () => void;
+    copiedShape: SelectionType | undefined;
+    setCopiedShape: (shape: React.SetStateAction<SelectionType | undefined>) => void;
 };
-declare const useKeyboard: ({ isInsideComponent, isInsideCanvas, selectedShape, isEditingText, settings, setSelectedShape, setActiveTool, setCanvasZoom, resetZoom, setSelectionMode, setSelectionFrame, removeShape, pasteShapes, updateShapes, backwardShape, forwardShape, setShiftPressed, setAltPressed, setIsSpacePressed }: UseKeyboardType) => {};
+declare const useKeyboard: ({ isInsideComponent, isInsideCanvas, selectedShape, isEditingText, settings, copiedShape, setCopiedShape, setSelectedShape, setActiveTool, setCanvasZoom, resetZoom, setSelectionMode, setSelectionFrame, selectAllShapes, removeShape, pasteShapes, updateShapes, backwardShape, forwardShape, setShiftPressed, setAltPressed, setIsSpacePressed }: UseKeyboardType) => {};
 export default useKeyboard;

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

@@ -15,18 +15,25 @@ type UseReactPaintProps = {
 type EditorProps = {
     shapesRef: React.RefObject<ShapeEntity[]>;
     addPictureShape: (fileOrUrl: File | string, maxWidth?: number, maxHeight?: number) => Promise<ShapeEntity>;
-    moveShapes: (startPositionShapeId: string, endPositionShapeId: string) => void;
+    swapShapes: (startPositionShapeId: string, endPositionShapeId: string) => void;
+    moveShapes: (shapes: ShapeEntity[], action: 'first' | 'last' | 'forward' | 'backward') => void;
     toggleShapeVisibility: (shapes: ShapeEntity[]) => void;
     toggleShapeLock: (shapeGroup: ShapeEntity[]) => void;
     canGoBackward: boolean;
     canGoForward: boolean;
     canClear: boolean;
     selectedShape: SelectionType | undefined;
+    copiedShape: SelectionType | undefined;
+    setCopiedShape: React.Dispatch<React.SetStateAction<SelectionType | undefined>>;
+    pasteShapes: (shapes: ShapeEntity[]) => void;
     saveShapes: () => void;
     removeShape: (shapes: ShapeEntity[]) => void;
     updateShape: (updatedShapes: ShapeEntity[], withSave?: boolean) => void;
+    duplicateShapes: (shapesToDuplicate: ShapeEntity[], translate?: boolean, selectNewOnes?: boolean) => void;
     backwardShape: () => void;
     forwardShape: () => void;
+    removeShapePoint: (shape: ShapeEntity<'curve' | 'polygon'>, pointIndex: number) => void;
+    transformShape: (shapes: ShapeEntity[], center: Point, action: 'flipHorizontally' | 'flipVertically' | 'rotateClockwise' | 'rotateCounterclockwise') => void;
     refs: {
         canvas: React.RefObject<HTMLCanvasElement | null>;
         editor: React.RefObject<HTMLElement | null>;
@@ -36,6 +43,7 @@ type EditorProps = {
     height: number;
     selectTool: (tool: ToolsType) => void;
     selectShapes: (shapes: ShapeEntity[]) => void;
+    selectAllShapes: () => void;
     activeTool: ToolsType;
     setActiveTool: React.Dispatch<React.SetStateAction<ToolsType>>;
     setAvailableTools: React.Dispatch<React.SetStateAction<CustomTool[]>>;
@@ -47,6 +55,8 @@ type EditorProps = {
     exportPicture: (view: 'fitToShapes' | 'defaultView' | 'currentZoom') => void;
     exportData: () => void;
     clearCanvas: () => void;
+    selectionMode: SelectionModeData<number | Point>;
+    setSelectionMode: React.Dispatch<React.SetStateAction<SelectionModeData<number | Point>>>;
     settings: UtilsSettings;
     setCanvasZoom: (action: 'unzoom' | 'zoom' | 'default') => void;
     resetZoom: () => void;
@@ -58,11 +68,15 @@ type EditorProps = {
         withLoadAndSave: boolean;
         withUploadPicture: boolean;
         withUrlPicture: boolean;
+        withContextMenu: boolean;
     };
 };
 type CanvasProps = {
     shapesRef: React.RefObject<ShapeEntity[]>;
     selectedShape: SelectionType | undefined;
+    copiedShape: SelectionType | undefined;
+    setCopiedShape: React.Dispatch<React.SetStateAction<SelectionType | undefined>>;
+    pasteShapes: (shapes: ShapeEntity[]) => void;
     selectionFrame: {
         oldSelection: SelectionType | undefined;
         frame: [Point, Point];
@@ -78,7 +92,7 @@ type CanvasProps = {
     refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point, isInsideMask: boolean) => void;
     removeShape: (shapes: ShapeEntity[]) => void;
     updateShape: (updatedShapes: ShapeEntity[], withSave?: boolean) => void;
-    duplicateShapes: (shapesToDuplicate: ShapeEntity[]) => void;
+    duplicateShapes: (shapesToDuplicate: ShapeEntity[], translate?: boolean, selectNewOnes?: boolean) => void;
     backwardShape: () => void;
     forwardShape: () => void;
     saveShapes: () => void;
@@ -90,6 +104,7 @@ type CanvasProps = {
     width: number;
     height: number;
     selectShapes: (shapes: ShapeEntity[]) => void;
+    selectAllShapes: () => void;
     activeTool: ToolsType;
     setActiveTool: React.Dispatch<React.SetStateAction<ToolsType>>;
     isEditMode: boolean;
@@ -101,6 +116,7 @@ type CanvasProps = {
     isInsideComponent: boolean;
     isInsideCanvas: boolean;
     canvas: {
+        withContextMenu: boolean;
         withSkeleton: boolean;
         withFrameSelection: boolean;
         canGrow: boolean;

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

@@ -16,9 +16,10 @@ declare const useShapes: (settings: UtilsSettings, width: number, height: number
     } | undefined>>;
     refreshSelectedShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point) => void;
     addShapes: (newShapes: ShapeEntity[]) => void;
-    duplicateShapes: (shapesToDuplicate: ShapeEntity[]) => void;
+    duplicateShapes: (shapesToDuplicate: ShapeEntity[], translate?: boolean, selectNewOnes?: boolean) => void;
     addPictureShape: (fileOrUrl: File | string, maxWidth?: number, maxHeight?: number) => Promise<ShapeEntity>;
-    moveShapes: (startPositionShapeId: string, endPositionShapeId: string) => void;
+    swapShapes: (startPositionShapeId: string, endPositionShapeId: string) => void;
+    moveShapes: (shapes: ShapeEntity[], action: "first" | "last" | "forward" | "backward") => void;
     saveShapes: () => void;
     setSelectedShape: React.Dispatch<React.SetStateAction<SelectionType | undefined>>;
     refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point, isInsideMask: boolean) => void;
@@ -26,6 +27,7 @@ declare const useShapes: (settings: UtilsSettings, width: number, height: number
     toggleShapeLock: (shapeGroup: ShapeEntity[]) => void;
     removeShape: (shapes: ShapeEntity[]) => void;
     updateShape: (updatedShapes: ShapeEntity[], withSave?: boolean) => void;
+    transformShape: (shapes: ShapeEntity[], center: Point, action: "flipHorizontally" | "flipVertically" | "rotateClockwise" | "rotateCounterclockwise") => void;
     backwardShape: () => void;
     forwardShape: () => void;
     clearShapes: (shapesToInit: ShapeEntity[], options: {
@@ -35,5 +37,7 @@ declare const useShapes: (settings: UtilsSettings, width: number, height: number
     canGoBackward: boolean;
     canGoForward: boolean;
     canClear: boolean;
+    copiedShape: SelectionType | undefined;
+    setCopiedShape: React.Dispatch<React.SetStateAction<SelectionType | undefined>>;
 };
 export default useShapes;

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

@@ -21,7 +21,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
-    path?: Path2D | undefined;
+    path: Path2D;
 } & {
     rotation?: number;
     toolId?: string;
@@ -44,7 +44,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
-    path?: Path2D | undefined;
+    path: Path2D;
 } & {
     rotation?: number;
     toolId?: string;
@@ -72,7 +72,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
-    path?: Path2D | undefined;
+    path: Path2D;
 } & {
     rotation?: number;
     toolId?: string;
@@ -100,7 +100,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
-    path?: Path2D | undefined;
+    path: Path2D;
 } & {
     rotation?: number;
     toolId?: string;
@@ -122,7 +122,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
-    path?: Path2D | undefined;
+    path: Path2D;
 } & {
     rotation?: number;
     toolId?: string;
@@ -144,7 +144,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
-    path?: Path2D | undefined;
+    path: Path2D;
 } & {
     rotation?: number;
     toolId?: string;
@@ -166,7 +166,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
-    path?: Path2D | undefined;
+    path: Path2D;
 } & {
     rotation?: number;
     toolId?: string;
@@ -188,7 +188,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
-    path?: Path2D | undefined;
+    path: Path2D;
 } & {
     rotation?: number;
     toolId?: string;
@@ -210,7 +210,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
-    path?: Path2D | undefined;
+    path: Path2D;
 } & {
     rotation?: number;
     toolId?: string;
@@ -232,7 +232,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
-    path?: Path2D | undefined;
+    path: Path2D;
 } & {
     rotation?: number;
     toolId?: string;
@@ -256,7 +256,7 @@ export declare const decodeImportedData: (shapesForJson: ExportedDrawableShape[]
         center: Point;
         boundingBox: import("./../../common/types/Shapes").Rect;
     };
-    path?: Path2D | undefined;
+    path: Path2D;
 } & {
     rotation?: number;
     toolId?: string;

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

@@ -11,7 +11,7 @@ export declare const getCursorPositionInTransformedCanvas: (e: MouseEvent | Touc
 export declare const isTouchGesture: (e: MouseEvent | TouchEvent) => e is TouchEvent;
 export declare const getPointPositionAfterCanvasTransformation: (point: Point, shapeRotation: number, [originX, originY]: Point) => Point;
 export declare const getPointPositionBeforeCanvasTransformation: (point: Point, shapeRotation: number, [originX, originY]: Point) => Point;
-export declare const checkSelectionIntersection: (ctx: CanvasRenderingContext2D, shape: SelectionType, position: Point, settings: UtilsSettings, checkAnchors?: boolean, radius?: number) => false | HoverModeData;
+export declare const checkSelectionIntersection: (ctx: CanvasRenderingContext2D, selection: SelectionType, position: Point, settings: UtilsSettings, checkAnchors?: boolean, radius?: number) => false | HoverModeData;
 export declare const checkPolygonLinesSelectionIntersection: (ctx: CanvasRenderingContext2D, shape: ShapeEntity<"polygon" | "curve">, position: Point, settings: UtilsSettings, radius?: number) => false | {
     lineIndex: number;
 };

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

@@ -3,7 +3,7 @@ import type { HoverModeData, SelectionModeData } from './../../common/types/Mode
 import type { Point, SelectionType, ShapeEntity } from './../../common/types/Shapes';
 import type { CustomTool } from './../../common/types/tools';
 export declare const getNewSelectionData: (hoverMode: HoverModeData, selectedShape: SelectionType, cursorPosition: Point) => SelectionModeData<Point | number> | undefined;
-export declare const selectShape: (ctx: CanvasRenderingContext2D, shapes: ShapeEntity[], cursorPosition: Point, settings: UtilsSettings, selectedShape: SelectionType | undefined, isTouchGesture: boolean, withFrameSelection: boolean, isGroupMode: boolean) => {
+export declare const selectShape: (ctx: CanvasRenderingContext2D, shapes: ShapeEntity[], cursorPosition: Point, settings: UtilsSettings, selectedShape: SelectionType | undefined, isTouchGesture: boolean, withFrameSelection: boolean, behavior?: "add" | "remove" | "replace") => {
     mode: SelectionModeData<Point | number>;
     shape: SelectionType | undefined;
 };

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

@@ -20,3 +20,4 @@ export declare const resizeCurve: (cursorPosition: Point, originalShape: ShapeEn
 export declare const drawCurve: (ctx: CanvasRenderingContext2D, curve: ShapeEntity<"curve">) => void;
 export declare const addCurveLine: (shape: ShapeEntity<"curve">, lineIndex: number, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"curve">;
 export declare const addCurvePoint: (shape: ShapeEntity<"curve">, cursorPosition: Point, settings: UtilsSettings, temporary?: boolean) => ShapeEntity<"curve">;
+export declare const removeCurvePoint: (shape: ShapeEntity<"curve">, pointIndex: number, settings: UtilsSettings) => ShapeEntity<"curve">;

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

@@ -4,7 +4,7 @@ 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 createLinePath: (line: Line) => Path2D;
-export declare const createBrushPath: (brush: DrawableShape<"brush">, { brushAlgo }: UtilsSettings) => Path2D | undefined;
+export declare const createBrushPath: (brush: DrawableShape<"brush">, { brushAlgo }: UtilsSettings) => Path2D;
 /** Bounding box of a cubic Bezier segment B(t) = (1-t)³P0 + 3(1-t)²t P1 + 3(1-t)t² P2 + t³ P3 */
 export declare const getCubicBezierBounds: (p0: Point, p1: Point, p2: Point, p3: Point) => {
     minX: number;
@@ -17,8 +17,8 @@ export declare const catmullRomToBezier: (p0: Point, p1: Point, p2: Point, p3: P
     cp1: Point;
     cp2: Point;
 };
-export declare const createCurvePath: (curve: DrawableShape<"curve">) => Path2D | undefined;
-export declare const createPolygonPath: (polygon: DrawableShape<"polygon"> | DrawableShape<"curve">) => Path2D | undefined;
+export declare const createCurvePath: (curve: DrawableShape<"curve">) => Path2D;
+export declare const createPolygonPath: (polygon: DrawableShape<"polygon"> | DrawableShape<"curve">) => Path2D;
 export declare const createTrianglePath: (triangle: DrawableShape<"triangle">) => Path2D;
 export declare const getComputedShapeInfos: <T extends DrawableShape, U extends Pick<UtilsSettings, "selectionPadding">>(shape: T, getBorder: (shape: T, settings: U) => Rect, settings: U, getOuterBorder?: (shape: T, borders: Rect, settings: U) => Rect) => {
     borders: Rect;

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

@@ -21,3 +21,4 @@ export declare const getPolygonBorder: (polygon: Polygon, settings: Pick<UtilsSe
 export declare const resizePolygon: (cursorPosition: Point, originalShape: ShapeEntity<"polygon">, selectionMode: SelectionModeResize<number>, settings: UtilsSettings) => ShapeEntity<"polygon">;
 export declare const addPolygonLine: (shape: ShapeEntity<"polygon">, lineIndex: number, cursorPosition: Point, settings: UtilsSettings) => ShapeEntity<"polygon">;
 export declare const addPolygonPoint: (shape: ShapeEntity<"polygon">, cursorPosition: Point, settings: UtilsSettings, temporary?: boolean) => ShapeEntity<"polygon">;
+export declare const removePolygonPoint: (shape: ShapeEntity<"polygon">, pointIndex: number, settings: UtilsSettings) => ShapeEntity<"polygon">;

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

@@ -19,22 +19,31 @@ export type SelectionModeResize<AnchorType extends Point | number = Point> = {
     mode: 'resize';
     cursorStartPosition: Point;
     originalShape: SelectionType;
+    selectedShapesLengthAtMouseDown: number;
     anchor: AnchorType;
 };
 export type SelectionModeRotate = {
     mode: 'rotate';
     cursorStartPosition: Point;
     originalShape: SelectionType;
+    selectedShapesLengthAtMouseDown: number;
     center: Point;
 };
 export type SelectionModeTranslate = {
     mode: 'translate';
     cursorStartPosition: Point;
     originalShape: SelectionType;
+    selectedShapesLengthAtMouseDown: number;
     hasBeenDuplicated: boolean;
     dateStart: number;
 };
-export type SelectionModeData<AnchorType extends Point | number> = SelectionModeDefault | SelectionModeSelectionFrame | SelectionModeBrush | SelectionModeResize<AnchorType> | SelectionModeRotate | SelectionModeTranslate | SelectionModeEditText | SelectionModePreview;
+export type SelectionModeContextMenu<AnchorType extends Point | number = Point> = {
+    mode: 'contextMenu';
+    cursorStartPosition: Point;
+    originalShape: SelectionType | undefined;
+    anchor: AnchorType | undefined;
+};
+export type SelectionModeData<AnchorType extends Point | number> = SelectionModeDefault | SelectionModeSelectionFrame | SelectionModeBrush | SelectionModeResize<AnchorType> | SelectionModeRotate | SelectionModeTranslate | SelectionModeEditText | SelectionModePreview | SelectionModeContextMenu<AnchorType>;
 export type HoverModeData = {
     outOfView?: boolean;
 } & ({

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

@@ -56,12 +56,14 @@ export type StyleShape = {
     fontBold?: boolean;
 };
 export type SelectionDefaultType = {
+    type: 'rect';
     border: Path2D;
     line: Path2D | undefined;
     shapePath: Path2D | undefined;
     anchors: Path2D[];
 };
 export type SelectionLinesType = {
+    type: 'line';
     border: Path2D;
     shapePath: Path2D | undefined;
     anchors: Path2D[];
@@ -128,7 +130,7 @@ export type ShapeEntity<T extends Exclude<ShapeType, 'triangle'> = Exclude<Shape
         center: Point;
         boundingBox: Rect;
     };
-    path?: Path2D | undefined;
+    path: Path2D;
 } & DrawableShape<T> & ({
     type: 'line';
     selection?: SelectionLinesType | undefined;

package/dist/editor/components/common/Menu.d.ts

@@ -0,0 +1,10 @@
+import './Menu.css';
+type MenuType = {
+    alignment?: 'left' | 'center' | 'right' | undefined;
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    position?: 'top' | 'bottom' | 'left' | 'right' | undefined;
+};
+declare const Menu: ({ alignment, children, className, style, position }: MenuType) => import("react/jsx-runtime").JSX.Element;
+export default Menu;

package/dist/editor/components/common/Panel.d.ts

@@ -4,11 +4,11 @@ import type { CSSProperties } from 'react';
 type PanelType = {
     vertical?: boolean;
     children: React.ReactNode;
-    style?: CSSProperties;
+    style?: CSSProperties | undefined;
     title?: string;
-    className?: string;
+    className?: string | undefined;
     fitContainer?: boolean;
-    position?: 'bottom' | 'top';
+    position?: 'bottom' | 'top' | 'left' | 'right' | undefined;
     alignment?: 'left' | 'right' | 'center' | undefined;
 };
 declare const Panel: ({ children, title, className, position, fitContainer, alignment, style, ...props }: PanelType) => import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/settings/Layouts.d.ts

@@ -12,8 +12,8 @@ type LayoutsType = {
     toggleShapeLock: (shape: ShapeEntity[]) => void;
     selectedShapes: SelectionType | undefined;
     selectShapes: (shapes: ShapeEntity[]) => void;
-    moveShapes: (firstShapeId: string, lastShapeId: string) => void;
+    swapShapes: (startPositionShapeId: string, endPositionShapeId: string) => void;
     isLayoutPanelShown: boolean;
 };
-declare const Layouts: ({ gridFormat, setGridFormat, settings, shapes, removeShape, toggleShapeVisibility, toggleShapeLock, selectedShapes, moveShapes, selectShapes, isLayoutPanelShown }: LayoutsType) => import("react/jsx-runtime").JSX.Element | null;
+declare const Layouts: ({ gridFormat, setGridFormat, settings, shapes, removeShape, toggleShapeVisibility, toggleShapeLock, selectedShapes, swapShapes, selectShapes, isLayoutPanelShown }: LayoutsType) => import("react/jsx-runtime").JSX.Element | null;
 export default Layouts;

package/dist/editor/components/toolbox/ContextMenu.d.ts

@@ -0,0 +1,23 @@
+import type { UtilsSettings } from './../../../canvas/constants/app';
+import './ContextMenu.css';
+import type { SelectionModeContextMenu } from './../../../common/types/Mode';
+import type { Point, SelectionType, ShapeEntity } from './../../../common/types/Shapes';
+type ContextMenuType = {
+    selectionMode: SelectionModeContextMenu<Point | number>;
+    settings: UtilsSettings;
+    canvasRef: React.RefObject<HTMLCanvasElement | null>;
+    selectAllShapes: () => void;
+    closeContextMenu: () => void;
+    toggleShapeVisibility: (shapes: ShapeEntity[]) => void;
+    toggleShapeLock: (shapes: ShapeEntity[]) => void;
+    removeShape: (shapes: ShapeEntity[]) => void;
+    duplicateShapes: (shapesToDuplicate: ShapeEntity[], translate?: boolean, selectNewOnes?: boolean) => void;
+    setCopiedShape: (shape: React.SetStateAction<SelectionType | undefined>) => void;
+    copiedShape: SelectionType | undefined;
+    pasteShapes: (shapes: ShapeEntity[]) => void;
+    moveShapes: (shapes: ShapeEntity[], action: 'first' | 'last' | 'forward' | 'backward') => void;
+    removeShapePoint: (shape: ShapeEntity<'curve' | 'polygon'>, pointIndex: number) => void;
+    transformShape: (shapes: ShapeEntity[], center: Point, action: 'flipHorizontally' | 'flipVertically' | 'rotateClockwise' | 'rotateCounterclockwise') => void;
+};
+declare const ContextMenu: ({ moveShapes, selectAllShapes, selectionMode, transformShape, settings, canvasRef, closeContextMenu, toggleShapeVisibility, toggleShapeLock, removeShape, duplicateShapes, copiedShape, setCopiedShape, pasteShapes, removeShapePoint }: ContextMenuType) => import("react/jsx-runtime").JSX.Element;
+export default ContextMenu;

package/dist/editor/components/toolbox/MenuGroup.d.ts

@@ -1,16 +1,9 @@
-import type { ShapeType } from './../../../common/types/Shapes';
 import type { ToolsType } from './../../../common/types/tools';
 import './MenuGroup.css';
 type MenuGroupType = {
     activeTool: ToolsType;
     withActionsInMenu: boolean;
-    group: {
-        tools?: ShapeType[];
-        title: string;
-        img: string;
-    };
     vertical?: boolean;
-    alignment?: 'left' | 'center' | 'right';
     title?: string;
     disabled?: boolean;
     img?: string;
@@ -30,5 +23,5 @@ type MenuGroupType = {
     redoAction: () => void;
     clearCanvas: () => void;
 };
-declare const MenuGroup: ({ activeTool, withActionsInMenu, hasActionToUndo, hasActionToRedo, hasActionToClear, undoAction, redoAction, clearCanvas, alignment, group, vertical, disabled, withLoadAndSave, withExport, addPicture: addPictureFromProps, loadFile: loadFileFromProps, togglePictureUrlModal, saveFile, toggleExportModal, withUploadPicture, withUrlPicture }: MenuGroupType) => import("react/jsx-runtime").JSX.Element | null;
+declare const MenuGroup: ({ activeTool, withActionsInMenu, hasActionToUndo, hasActionToRedo, hasActionToClear, undoAction, redoAction, clearCanvas, disabled, withLoadAndSave, withExport, addPicture, loadFile, togglePictureUrlModal, saveFile, toggleExportModal, withUploadPicture, withUrlPicture }: MenuGroupType) => import("react/jsx-runtime").JSX.Element | null;
 export default MenuGroup;

package/dist/editor/components/toolbox/ToolbarGroup.d.ts

@@ -7,11 +7,8 @@ type ToolbarGroupType = {
         toolsType: CustomTool[];
         vertical: boolean;
     };
-    alignment?: 'left' | 'center' | 'right';
-    title?: string;
     disabled?: boolean;
-    img?: string;
     setActiveToolFromId: (id: string) => void;
 };
-declare const ToolbarGroup: ({ activeTool, alignment, group, disabled, setActiveToolFromId }: ToolbarGroupType) => import("react/jsx-runtime").JSX.Element | null;
+declare const ToolbarGroup: ({ activeTool, group, disabled, setActiveToolFromId }: ToolbarGroupType) => import("react/jsx-runtime").JSX.Element | null;
 export default ToolbarGroup;

package/dist/editor/constants/icons.d.ts

@@ -16,6 +16,7 @@ export declare const openFileIcon = "<svg><path d=\"M3.417 16.667Q2.729 16.667 2
 export declare const pictureIcon = "<svg><path d=\"M4.792 15.083 8.333 11.542 9.833 13.021 11.667 10.708 15.167 15.083ZM6.667 8.417Q5.938 8.417 5.427 7.906Q4.917 7.396 4.917 6.667Q4.917 5.938 5.427 5.427Q5.938 4.917 6.667 4.917Q7.396 4.917 7.906 5.427Q8.417 5.938 8.417 6.667Q8.417 7.396 7.906 7.906Q7.396 8.417 6.667 8.417ZM4.167 18.333Q3.125 18.333 2.396 17.604Q1.667 16.875 1.667 15.833V4.167Q1.667 3.125 2.396 2.396Q3.125 1.667 4.167 1.667H15.833Q16.875 1.667 17.604 2.396Q18.333 3.125 18.333 4.167V15.833Q18.333 16.875 17.604 17.604Q16.875 18.333 15.833 18.333ZM4.167 16.583H15.833Q16.146 16.583 16.365 16.365Q16.583 16.146 16.583 15.833V4.167Q16.583 3.854 16.365 3.635Q16.146 3.417 15.833 3.417H4.167Q3.854 3.417 3.635 3.635Q3.417 3.854 3.417 4.167V15.833Q3.417 16.146 3.635 16.365Q3.854 16.583 4.167 16.583Z\"/></svg>";
 export declare const textIcon = "<svg><path d=\"M8.708 16.667V5.917H4.167V3.333H15.833V5.917H11.292V16.667Z\"/></svg>";
 export declare const arrowIcon = "<svg><path d=\"M7.5 15.833V14.083H12.833L3.333 4.583L4.583 3.333L14.083 12.833V7.5H15.833V15.833Z\"/></svg>";
+export declare const rightChevronIcon = "<svg viewBox=\"0 -960 960 960\"><path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\"/></svg>";
 export declare const cursorIcon = "<svg><path d=\"M8.0145 11.1707C8.38484 10.9914 8.82183 11.1558 8.99959 11.5295L10.7031 15.2591L12.0363 14.6238L10.3254 10.9017C10.1476 10.528 10.3106 10.0795 10.6809 9.90761L10.8883 9.84782L12.5918 9.51148L6.48133 4.33192V12.389L7.82934 11.2903L8.0145 11.1707ZM10.6587 16.9258C10.2883 17.1052 9.84395 16.9482 9.67359 16.5745L8.05894 13.0318L6.19988 14.5416C6.07396 14.6462 5.91842 14.706 5.74066 14.706C5.54423 14.706 5.35584 14.6272 5.21694 14.4871C5.07803 14.3469 5 14.1568 5 13.9586V2.74741C5 2.54919 5.07803 2.35908 5.21694 2.21891C5.35584 2.07874 5.54423 2 5.74066 2C5.91842 2 6.08878 2.06727 6.21469 2.1719L6.2221 2.16443L14.7323 9.36947C15.0508 9.63854 15.0879 10.1094 14.8286 10.4233C14.7175 10.5579 14.562 10.6475 14.4064 10.6774L12.0659 11.1408L13.6954 14.6761C13.888 15.0498 13.7102 15.4908 13.3399 15.6627L10.6587 16.9258Z\"/></svg>";
 export declare const moveIcon = "<svg viewBox=\"0 -960 960 960\"><path d=\"M412-48q-21.95 0-40.98-9Q352-66 338-83L48-434l27-28q17-17 41.5-20.5T162-473l126 74v-381q0-15.3 10.29-25.65Q308.58-816 323.79-816t25.71 10.35Q360-795.3 360-780v300h80v-396q0-15.3 10.29-25.65Q460.58-912 475.79-912t25.71 10.35Q512-891.3 512-876v396h80v-348q0-15.3 10.29-25.65Q612.58-864 627.79-864t25.71 10.35Q664-843.3 664-828v348h80v-252q0-15.3 10.29-25.65Q764.58-768 779.79-768t25.71 10.35Q816-747.3 816-732v540q0 60-42 102T672-48H412Z\"/></svg>";
 export declare const menuIcon = "<svg><path d=\"M2.5 15V13.25H17.5V15ZM2.5 10.875V9.125H17.5V10.875ZM2.5 6.75V5H17.5V6.75Z\"/></svg>";

package/dist/editor/hooks/useDrag.d.ts

@@ -7,9 +7,9 @@ type useDragType = {
     layoutDragging: string | undefined;
     setLayoutDragging: (shapeId: string | undefined) => void;
     handleSelect: (shape: ShapeEntity[]) => void;
-    onMoveShapes: (firstShapeId: string, lastShapeId: string) => void;
+    onSwapShapes: (firstShapeId: string, lastShapeId: string) => void;
 };
-declare const useDrag: ({ disabled, ref, shape, layoutDragging, setLayoutDragging, handleSelect, onMoveShapes }: useDragType) => {
+declare const useDrag: ({ disabled, ref, shape, layoutDragging, setLayoutDragging, handleSelect, onSwapShapes }: useDragType) => {
     isOver: boolean;
 };
 export default useDrag;

package/dist/editor/hooks/useMenu.d.ts

@@ -0,0 +1,10 @@
+type UseMenuProps = {
+    trigger?: 'click' | 'hover';
+    buttonElt: HTMLElement | null;
+};
+declare const useMenu: ({ trigger, buttonElt }: UseMenuProps) => {
+    isOpen: boolean;
+    trigger: "click" | "hover";
+    closeMenu: () => void;
+};
+export default useMenu;

package/dist/react-paint.css

@@ -1 +1 @@
-.react-paint-canvas-box{flex:1;justify-content:center;align-items:center;display:flex}.react-paint-canvas-container{background-color:var(--react-paint-app-canvas-bg);cursor:var(--react-paint-canvas-cursor);background-repeat:repeat;background-size:16px;display:grid;position:relative;overflow:hidden}.react-paint-canvas-container[data-grow=true]{width:100%;height:100%}.react-paint-canvas-drawcanvas{-webkit-user-select:none;user-select:none;touch-action:none;grid-area:1/1;max-width:100%;display:block;position:relative}.react-paint-canvas-drawcanvas:focus:not(:focus-visible){outline:none}.react-paint-canvas-drawcanvas[data-grow=true]{width:100%}.react-paint-canvas-selectioncanvas{-webkit-user-select:none;user-select:none;pointer-events:none;touch-action:none;grid-area:1/1;max-width:100%;display:block;position:relative}.react-paint-canvas-selectioncanvas[data-grow=true]{width:100%}.react-paint-editor-toolbox-edittextbox{transform-origin:0 0;box-sizing:border-box;transform:var(--react-paint-editor-toolbox-edittextbox-transform);color:var(--react-paint-editor-toolbox-edittextbox-color);padding:var(--react-paint-editor-toolbox-edittextbox-padding);line-height:1;font-size:var(--react-paint-editor-toolbox-edittextbox-fontsize);font-family:var(--react-paint-editor-toolbox-edittextbox-fontfamily);opacity:var(--react-paint-editor-toolbox-edittextbox-opacity);background:0 0;outline:none;width:max-content;display:inline-block;position:absolute;top:0;left:0}.react-paint-editor-toolbox-edittextbox[data-fontbold=true]{font-weight:700}.react-paint-editor-toolbox-edittextbox[data-fontitalic=true]{font-style:italic}.react-paint-app-row{max-width:100%;aspect-ratio:var(--react-paint-app-row-aspectratio);width:100%;position:relative}.react-paint-app-row[data-grow=false]{max-width:calc(var(--react-paint-app-canvaswidth) * 1px)}.react-paint-app-row[data-shrink=false]{min-width:calc(var(--react-paint-app-canvaswidth) * 1px)}.react-paint-editor-loading{z-index:var(--react-paint-editor-loading-zindex);transition:opacity var(--react-paint-editor-loading-transition-duration) linear;opacity:0;background:#00000050;justify-content:center;align-items:center;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.react-paint-editor-loading[data-loading=visible]{opacity:1}@keyframes react-paint-editor-loading-rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.react-paint-editor-loader{width:40px;height:40px;animation:1s infinite react-paint-editor-loading-rotation;position:relative;transform:rotate(10deg)}.react-paint-editor-loader>div{border-radius:50%;width:15px;height:15px;position:absolute}.react-paint-editor-loader>div:first-child{background-color:#5c6bc0;left:0}.react-paint-editor-loader>div:nth-child(2){background-color:#8bc34a;right:0}.react-paint-editor-loader>div:nth-child(3){background-color:#ffb74d;bottom:0}.react-paint-editor-loader>div:nth-child(4){background-color:#f44336;bottom:0;right:0}.react-paint-editor-snackbar-container{z-index:var(--react-paint-editor-snackbar-zindex);flex-direction:column-reverse;align-items:center;height:0;display:flex;position:absolute;bottom:0;left:0;right:0}.react-paint-editor-snackbar{color:#fff;overflow-wrap:break-word;box-sizing:border-box;max-width:calc(100% - 24px);transition:all var(--react-paint-editor-panel-transition-duration);opacity:0;margin:4px;padding:12px 48px;display:inline-block;transform:translateY(40px)}.react-paint-editor-snackbar[data-type=infos]{background:#646464}.react-paint-editor-snackbar[data-type=error]{background:#911717}.react-paint-editor-snackbar[data-type=success]{background:#088900}.react-paint-editor-snackbar[data-is-shown="1"]{opacity:1;transform:translate(0,0)}.react-paint-editor-snackbar[data-is-shown="0"]{opacity:0;transform:translateY(40px)}.react-paint-editor-button{vertical-align:middle;box-sizing:border-box;cursor:pointer;border-radius:var(--react-paint-editor-app-font-radius);min-width:32px;height:32px;color:var(--react-paint-editor-app-font-color);padding:var(--react-paint-editor-button-padding,0);background:0 0;border:none;justify-content:center;align-items:center;margin:2px 4px;font-size:14px;display:inline-flex}.react-paint-editor-button[data-selected="1"]{color:var(--react-paint-editor-app-font-selected-color);background:var(--react-paint-editor-app-font-selected-bg)}.react-paint-editor-button[data-hidden="1"]{visibility:hidden}.react-paint-editor-button[data-disabled="1"]{cursor:default;color:var(--react-paint-editor-app-font-disabled-color);background:var(--react-paint-editor-app-font-disabled-bg)}.react-paint-editor-button[data-selected="0"][data-disabled="0"]{background:var(--react-paint-editor-app-font-bg);color:var(--react-paint-editor-app-font-color)}.react-paint-editor-button[data-selected="0"][data-disabled="0"]:hover{color:var(--react-paint-editor-app-font-hover-color);background:var(--react-paint-editor-app-font-hover-bg)}.react-paint-editor-button[data-disabled="0"]{cursor:pointer}.react-paint-editor-button svg{fill:currentColor;width:20px;height:20px}.react-paint-editor-button input{display:none}.react-paint-editor-button-content{box-sizing:border-box;width:100%;padding:2px 6px;display:flex}.react-paint-editor-button-icon{align-items:center;display:flex}.react-paint-editor-button-children{text-align:left;flex:1;align-items:center;display:flex}.react-paint-editor-button-children+.react-paint-editor-button-icon{margin-left:12px}.react-paint-editor-panel{z-index:var(--react-paint-editor-panel-zindex);background:var(--react-paint-editor-app-toolbar-bg);white-space:nowrap;box-sizing:border-box;border-radius:8px;padding:8px;position:absolute;box-shadow:0 3px 8px #0000003d}.react-paint-editor-panel[data-alignment=left]{margin:4px;left:0}.react-paint-editor-panel[data-alignment=center]{margin:4px 0;left:50%;transform:translate(-50%)}.react-paint-editor-panel[data-alignment=right]{margin:4px;right:0}.react-paint-editor-panel[data-position=bottom]{bottom:100%}.react-paint-editor-panel[data-position=top]{top:100%}.react-paint-editor-panel[data-fitcontainer=true]{max-width:100%}.react-paint-editor-panel-title{margin-top:4px;margin-bottom:8px;font-size:18px}.react-paint-editor-layouts{background:var(--react-paint-editor-app-toolbar-bg);box-sizing:border-box;min-width:200px;display:inline-block;overflow-y:auto}.react-paint-editor-layouts-remove-button.react-paint-editor-layouts-remove-button{margin:2px 0}.react-paint-editor-layouts-remove-button.react-paint-editor-layouts-remove-button:not(:hover){opacity:.2}.react-paint-editor-layout{background:var(--react-paint-editor-app-toolbar-bg);box-sizing:border-box;border:3px solid #0000;justify-content:space-between;align-items:center;padding:4px 0;display:flex;position:relative}.react-paint-editor-layout[data-is-over="1"]{border:3px dotted var(--react-paint-editor-app-font-hover-bg)}.react-paint-editor-layout[data-is-dragging="1"]{opacity:.4}.react-paint-editor-layout[data-selected="1"]{color:var(--react-paint-editor-app-font-selected-color);background:var(--react-paint-editor-app-font-selected-bg)}.react-paint-editor-layout[data-selected="1"] .react-paint-editor-layouts-remove-button{color:#fff}.react-paint-editor-layout[data-selected="0"][data-disabled="0"]{background:var(--react-paint-editor-app-font-bg);color:var(--react-paint-editor-app-font-color)}.react-paint-editor-layout[data-selected="0"][data-disabled="0"]:hover{color:var(--react-paint-editor-app-font-hover-color);background:var(--react-paint-editor-app-font-hover-bg)}.react-paint-editor-layout[data-disabled="1"]{cursor:default;color:var(--react-paint-editor-app-font-disabled-color);background:var(--react-paint-editor-app-font-disabled-bg)}.react-paint-editor-layout[data-disabled="0"]{cursor:move}.react-paint-editor-layout>span{color:#8a8a8a;height:20px;line-height:1}.react-paint-editor-layout>span>svg{fill:#8a8a8a;width:20px;height:20px;padding:0 4px;transform:scale(.75)}.react-paint-editor-layouts-visible-button.react-paint-editor-layouts-visible-button{margin:2px 0}.react-paint-editor-layouts-visible-button.react-paint-editor-layouts-visible-button[data-visible=false]{opacity:.2}.react-paint-editor-layouts-locked-button.react-paint-editor-layouts-locked-button{margin:2px 0}.react-paint-editor-layouts-locked-button.react-paint-editor-layouts-locked-button[data-locked=false]{opacity:.2}.react-paint-editor-layouts-grid-button.react-paint-editor-layouts-grid-button span{justify-content:center}.react-paint-editor-layouts-subtitle{min-width:60px;font-weight:700}.react-paint-editor-layouts-separator{flex:1}.react-paint-editor-layouts-panel.react-paint-editor-layouts-panel.react-paint-editor-layouts-panel{bottom:36px;top:unset}.react-paint-editor-layouts-panel.react-paint-editor-layouts-panel.react-paint-editor-layouts-panel[data-edit="0"]{bottom:0;top:unset}.react-paint-editor-layouts-panel-content{flex-direction:column;max-height:100%;display:flex}.react-paint-editor-layouts-scrolling-content{flex-direction:column;display:flex;overflow-y:auto}.react-paint-editor-layouts-row{align-items:center;display:flex}.react-paint-editor-layouts-placeholder{opacity:.6;text-align:center;padding:12px 0}.react-paint-editor-modal{z-index:var(--react-paint-editor-modal-zindex);justify-content:center;align-items:center;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.react-paint-editor-modal[data-position=center]{align-items:center}.react-paint-editor-modal[data-position=bottom]{align-items:end}.react-paint-editor-modal-panel{background:var(--react-paint-editor-app-toolbar-bg);white-space:nowrap;border-radius:8px;padding:4px;display:grid;position:relative;box-shadow:0 3px 8px #0000003d}.react-paint-editor-modal-mask{background:#00000073;position:absolute;top:0;bottom:0;left:0;right:0}.react-paint-editor-colorfield-color{box-sizing:border-box;border-radius:50%;width:20px;height:20px}.react-paint-editor-colorfield-color[data-mode=fill]{background:var(--react-paint-editor-colorfield-color-value);border:1px solid #80808038}.react-paint-editor-colorfield-color[data-mode=stroke]{border:4px solid #80808038}.react-paint-editor-colorfield-color[data-mode=stroke]:after{content:"";border:2px solid var(--react-paint-editor-colorfield-color-value);box-sizing:border-box;border-radius:100%;width:18px;height:18px;display:block;position:relative;top:-3px;left:-3px}.react-paint-editor-colorfield-wrapper{flex-wrap:wrap;display:flex}.react-paint-editor-colorfield-customcolor{box-sizing:border-box;width:20px;height:20px;color:var(--react-paint-editor-colorfield-color-value);border-radius:50%;justify-content:center;align-items:baseline;font-weight:700;display:flex}.react-paint-editor-fontfamily-option{font-family:var(--react-paint-editor-fontfamily-family)}.react-paint-editor-selectfield-wrapper{flex-wrap:wrap;display:flex}.react-paint-editor-layout-opened .react-paint-editor-layout-button.react-paint-editor-layout-button.react-paint-editor-layout-button{color:var(--react-paint-editor-app-font-selected-color);background:var(--react-paint-editor-app-font-selected-bg)}.react-paint-editor-linearrow-left{border-top:5px solid #0000;border-bottom:5px solid #0000;border-right:15px solid;width:0;height:0;display:inline-block;position:absolute;top:50%;left:0;transform:translate(-25%,-50%)}.react-paint-editor-linearrow-right{border-top:5px solid #0000;border-bottom:5px solid #0000;border-left:15px solid;width:0;height:0;display:inline-block;position:absolute;top:50%;right:0;transform:translate(25%,-50%)}.react-paint-editor-linearrow-option{vertical-align:middle;background:currentColor;width:60px;height:2px;display:inline-block;position:relative}.react-paint-editor-linearrow-option[data-type="0"] .react-paint-editor-linearrow-left,.react-paint-editor-linearrow-option[data-type="1"] .react-paint-editor-linearrow-left,.react-paint-editor-linearrow-option[data-type="0"] .react-paint-editor-linearrow-right,.react-paint-editor-linearrow-option[data-type="2"] .react-paint-editor-linearrow-right{display:none}.react-paint-editor-linetype-option{display:inline-block}.react-paint-editor-linetype-option>span{vertical-align:middle;background:0 0;width:6px;height:2px;display:inline-block}.react-paint-editor-linetype-option[data-type="0"]>span{background:currentColor}.react-paint-editor-linetype-option[data-type="2"]{position:relative;left:3px}.react-paint-editor-linetype-option[data-type="2"]>span:nth-child(3n-1){background:currentColor;width:12px}.react-paint-editor-linetype-option[data-type="2"]>span:nth-child(n+11){display:none}.react-paint-editor-linetype-option[data-type="1"]>span:nth-child(odd){background:currentColor}.react-paint-editor-rangefield{flex-wrap:wrap;align-items:center;max-width:100%;display:inline-flex}.react-paint-editor-rangefield [data-indeterminate="1"]{opacity:.25}.react-paint-editor-settings-bar{-webkit-user-select:none;user-select:none;background:var(--react-paint-editor-app-toolbar-bg);border-top:1px solid var(--react-paint-editor-app-divider-color);box-sizing:border-box;height:36px;display:flex;position:relative}.react-paint-editor-settings-shrinkable{text-align:left;flex:1;height:100%;display:flex;position:relative}.react-paint-editor-settings-modal{grid-template-columns:repeat(auto-fill,40px);width:100%}.react-paint-editor-zoom-button{margin:0}.react-paint-editor-zoom-button .react-paint-editor-button-children{justify-content:center}.react-paint-editor-zoom-button-value{min-width:60px}.react-paint-editor-bar-zoom-button-opened.react-paint-editor-bar-zoom-button-opened.react-paint-editor-bar-zoom-button-opened.react-paint-editor-bar-zoom-button-opened{color:var(--react-paint-editor-app-font-selected-color);background:var(--react-paint-editor-app-font-selected-bg)}.react-paint-editor-toolbox-panel-content{display:flex}.react-paint-editor-toolbox-panel-content[data-vertical="1"]{flex-direction:column}.react-paint-editor-toolbox-relative{display:inline-block;position:relative}.react-paint-editor-toolbox-pictureinput-modal form{grid-template-columns:3fr 1fr 1fr}.react-paint-editor-toolbox-pictureinput-modal form input{color:var(--react-paint-editor-app-font-color);border:1px solid var(--react-paint-editor-app-font-color);background:var(--react-paint-editor-app-toolbar-bg);outline:none}.react-paint-editor-toolbar-shrinkable{text-align:center;flex:1;height:100%;position:relative}.react-paint-editor-toolbar-toolbox{background:var(--react-paint-editor-app-toolbar-bg);border-bottom:1px solid var(--react-paint-editor-app-divider-color);box-sizing:border-box;max-height:36px;min-width:var(--react-paint-editor-toolbar-minwidth);display:flex}.react-paint-editor-toolbar-modal{grid-template-columns:1fr 1fr 1fr}.react-paint-editor-toolbox-export-modal h3{margin-top:8px;margin-bottom:0;font-size:18px}.react-paint-editor-toolbargroup-panel-content{display:flex}.react-paint-editor-toolbargroup-panel-content[data-vertical="1"]{flex-direction:column}.react-paint-editor-toolbargroup-relative{display:inline-block;position:relative}.react-paint-editor-app{color:var(--react-paint-editor-app-font-color);max-width:min(100%, var(--react-paint-editor-app-maxWidth));flex-direction:column;font-family:Arial,Helvetica,sans-serif;display:flex;position:relative}.react-paint-editor-app hr{border:none;border-top:1px solid var(--react-paint-editor-app-divider-color);width:100%}
+.react-paint-canvas-box{flex:1;justify-content:center;align-items:center;display:flex}.react-paint-canvas-container{background-color:var(--react-paint-app-canvas-bg);cursor:var(--react-paint-canvas-cursor);background-repeat:repeat;background-size:16px;display:grid;position:relative;overflow:hidden}.react-paint-canvas-container[data-grow=true]{width:100%;height:100%}.react-paint-canvas-drawcanvas{-webkit-user-select:none;user-select:none;touch-action:none;grid-area:1/1;max-width:100%;display:block;position:relative}.react-paint-canvas-drawcanvas:focus:not(:focus-visible){outline:none}.react-paint-canvas-drawcanvas[data-grow=true]{width:100%}.react-paint-canvas-selectioncanvas{-webkit-user-select:none;user-select:none;pointer-events:none;touch-action:none;grid-area:1/1;max-width:100%;display:block;position:relative}.react-paint-canvas-selectioncanvas[data-grow=true]{width:100%}.react-paint-editor-toolbox-edittextbox{transform-origin:0 0;box-sizing:border-box;transform:var(--react-paint-editor-toolbox-edittextbox-transform);color:var(--react-paint-editor-toolbox-edittextbox-color);padding:var(--react-paint-editor-toolbox-edittextbox-padding);line-height:1;font-size:var(--react-paint-editor-toolbox-edittextbox-fontsize);font-family:var(--react-paint-editor-toolbox-edittextbox-fontfamily);opacity:var(--react-paint-editor-toolbox-edittextbox-opacity);background:0 0;outline:none;width:max-content;display:inline-block;position:absolute;top:0;left:0}.react-paint-editor-toolbox-edittextbox[data-fontbold=true]{font-weight:700}.react-paint-editor-toolbox-edittextbox[data-fontitalic=true]{font-style:italic}.react-paint-app-row{max-width:100%;aspect-ratio:var(--react-paint-app-row-aspectratio);width:100%;position:relative}.react-paint-app-row[data-grow=false]{max-width:calc(var(--react-paint-app-canvaswidth) * 1px)}.react-paint-app-row[data-shrink=false]{min-width:calc(var(--react-paint-app-canvaswidth) * 1px)}.react-paint-editor-loading{z-index:var(--react-paint-editor-loading-zindex);transition:opacity var(--react-paint-editor-loading-transition-duration) linear;opacity:0;background:#00000050;justify-content:center;align-items:center;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.react-paint-editor-loading[data-loading=visible]{opacity:1}@keyframes react-paint-editor-loading-rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.react-paint-editor-loader{width:40px;height:40px;animation:1s infinite react-paint-editor-loading-rotation;position:relative;transform:rotate(10deg)}.react-paint-editor-loader>div{border-radius:50%;width:15px;height:15px;position:absolute}.react-paint-editor-loader>div:first-child{background-color:#5c6bc0;left:0}.react-paint-editor-loader>div:nth-child(2){background-color:#8bc34a;right:0}.react-paint-editor-loader>div:nth-child(3){background-color:#ffb74d;bottom:0}.react-paint-editor-loader>div:nth-child(4){background-color:#f44336;bottom:0;right:0}.react-paint-editor-snackbar-container{z-index:var(--react-paint-editor-snackbar-zindex);flex-direction:column-reverse;align-items:center;height:0;display:flex;position:absolute;bottom:0;left:0;right:0}.react-paint-editor-snackbar{color:#fff;overflow-wrap:break-word;box-sizing:border-box;max-width:calc(100% - 24px);transition:all var(--react-paint-editor-panel-transition-duration);opacity:0;margin:4px;padding:12px 48px;display:inline-block;transform:translateY(40px)}.react-paint-editor-snackbar[data-type=infos]{background:#646464}.react-paint-editor-snackbar[data-type=error]{background:#911717}.react-paint-editor-snackbar[data-type=success]{background:#088900}.react-paint-editor-snackbar[data-is-shown="1"]{opacity:1;transform:translate(0,0)}.react-paint-editor-snackbar[data-is-shown="0"]{opacity:0;transform:translateY(40px)}.react-paint-editor-button{vertical-align:middle;box-sizing:border-box;cursor:pointer;border-radius:var(--react-paint-editor-app-font-radius);min-width:32px;height:32px;color:var(--react-paint-editor-app-font-color);padding:var(--react-paint-editor-button-padding,0);-webkit-user-select:none;user-select:none;background:0 0;border:none;justify-content:center;align-items:center;margin:2px 4px;font-size:14px;display:inline-flex}.react-paint-editor-button[data-selected="1"]{color:var(--react-paint-editor-app-font-selected-color);background:var(--react-paint-editor-app-font-selected-bg)}.react-paint-editor-button[data-hidden="1"]{visibility:hidden}.react-paint-editor-button[data-disabled="1"]{cursor:default;color:var(--react-paint-editor-app-font-disabled-color);background:var(--react-paint-editor-app-font-disabled-bg)}.react-paint-editor-button[data-selected="0"][data-disabled="0"]{background:var(--react-paint-editor-app-font-bg);color:var(--react-paint-editor-app-font-color)}.react-paint-editor-button[data-selected="0"][data-disabled="0"]:hover{color:var(--react-paint-editor-app-font-hover-color);background:var(--react-paint-editor-app-font-hover-bg)}.react-paint-editor-button[data-disabled="0"]{cursor:pointer}.react-paint-editor-button svg{fill:currentColor;width:20px;height:20px}.react-paint-editor-button input{display:none}.react-paint-editor-button-content{box-sizing:border-box;width:100%;padding:2px 6px;display:flex}.react-paint-editor-button-icon{align-items:center;display:flex}.react-paint-editor-button-children{text-align:left;flex:1;align-items:center;display:flex}.react-paint-editor-button-children+.react-paint-editor-button-icon{margin-left:12px}.react-paint-editor-panel{z-index:var(--react-paint-editor-panel-zindex);background:var(--react-paint-editor-app-toolbar-bg);white-space:nowrap;box-sizing:border-box;border-radius:8px;padding:8px;position:absolute;box-shadow:0 3px 8px #0000003d}.react-paint-editor-panel[data-alignment=left]{margin:4px;left:0}.react-paint-editor-panel[data-alignment=center]{margin:4px 0;left:50%;transform:translate(-50%)}.react-paint-editor-panel[data-alignment=right]{margin:4px;right:0}.react-paint-editor-panel[data-position=bottom]{bottom:100%}.react-paint-editor-panel[data-position=right]{top:0;left:100%}.react-paint-editor-panel[data-position=left]{top:0;right:100%}.react-paint-editor-panel[data-position=top]{top:100%}.react-paint-editor-panel[data-fitcontainer=true]{max-width:100%}.react-paint-editor-panel-title{margin-top:4px;margin-bottom:8px;font-size:18px}.react-paint-editor-layouts{background:var(--react-paint-editor-app-toolbar-bg);box-sizing:border-box;min-width:200px;display:inline-block;overflow-y:auto}.react-paint-editor-layouts-remove-button.react-paint-editor-layouts-remove-button{margin:2px 0}.react-paint-editor-layouts-remove-button.react-paint-editor-layouts-remove-button:not(:hover){opacity:.2}.react-paint-editor-layout{background:var(--react-paint-editor-app-toolbar-bg);box-sizing:border-box;border:3px solid #0000;justify-content:space-between;align-items:center;padding:4px 0;display:flex;position:relative}.react-paint-editor-layout[data-is-over="1"]{border:3px dotted var(--react-paint-editor-app-font-hover-bg)}.react-paint-editor-layout[data-is-dragging="1"]{opacity:.4}.react-paint-editor-layout[data-selected="1"]{color:var(--react-paint-editor-app-font-selected-color);background:var(--react-paint-editor-app-font-selected-bg)}.react-paint-editor-layout[data-selected="1"] .react-paint-editor-layouts-remove-button{color:#fff}.react-paint-editor-layout[data-selected="0"][data-disabled="0"]{background:var(--react-paint-editor-app-font-bg);color:var(--react-paint-editor-app-font-color)}.react-paint-editor-layout[data-selected="0"][data-disabled="0"]:hover{color:var(--react-paint-editor-app-font-hover-color);background:var(--react-paint-editor-app-font-hover-bg)}.react-paint-editor-layout[data-disabled="1"]{cursor:default;color:var(--react-paint-editor-app-font-disabled-color);background:var(--react-paint-editor-app-font-disabled-bg)}.react-paint-editor-layout[data-disabled="0"]{cursor:move}.react-paint-editor-layout>span{color:#8a8a8a;height:20px;line-height:1}.react-paint-editor-layout>span>svg{fill:#8a8a8a;width:20px;height:20px;padding:0 4px;transform:scale(.75)}.react-paint-editor-layouts-visible-button.react-paint-editor-layouts-visible-button{margin:2px 0}.react-paint-editor-layouts-visible-button.react-paint-editor-layouts-visible-button[data-visible=false]{opacity:.2}.react-paint-editor-layouts-locked-button.react-paint-editor-layouts-locked-button{margin:2px 0}.react-paint-editor-layouts-locked-button.react-paint-editor-layouts-locked-button[data-locked=false]{opacity:.2}.react-paint-editor-layouts-grid-button.react-paint-editor-layouts-grid-button span{justify-content:center}.react-paint-editor-layouts-subtitle{min-width:60px;font-weight:700}.react-paint-editor-layouts-separator{flex:1}.react-paint-editor-layouts-panel.react-paint-editor-layouts-panel.react-paint-editor-layouts-panel{bottom:36px;top:unset}.react-paint-editor-layouts-panel.react-paint-editor-layouts-panel.react-paint-editor-layouts-panel[data-edit="0"]{bottom:0;top:unset}.react-paint-editor-layouts-panel-content{flex-direction:column;max-height:100%;display:flex}.react-paint-editor-layouts-scrolling-content{flex-direction:column;display:flex;overflow-y:auto}.react-paint-editor-layouts-row{align-items:center;display:flex}.react-paint-editor-layouts-placeholder{opacity:.6;text-align:center;padding:12px 0}.react-paint-editor-modal{z-index:var(--react-paint-editor-modal-zindex);justify-content:center;align-items:center;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.react-paint-editor-modal[data-position=center]{align-items:center}.react-paint-editor-modal[data-position=bottom]{align-items:end}.react-paint-editor-modal-panel{background:var(--react-paint-editor-app-toolbar-bg);white-space:nowrap;border-radius:8px;padding:4px;display:grid;position:relative;box-shadow:0 3px 8px #0000003d}.react-paint-editor-modal-mask{background:#00000073;position:absolute;top:0;bottom:0;left:0;right:0}.react-paint-editor-colorfield-color{box-sizing:border-box;border-radius:50%;width:20px;height:20px}.react-paint-editor-colorfield-color[data-mode=fill]{background:var(--react-paint-editor-colorfield-color-value);border:1px solid #80808038}.react-paint-editor-colorfield-color[data-mode=stroke]{border:4px solid #80808038}.react-paint-editor-colorfield-color[data-mode=stroke]:after{content:"";border:2px solid var(--react-paint-editor-colorfield-color-value);box-sizing:border-box;border-radius:100%;width:18px;height:18px;display:block;position:relative;top:-3px;left:-3px}.react-paint-editor-colorfield-wrapper{flex-wrap:wrap;display:flex}.react-paint-editor-colorfield-customcolor{box-sizing:border-box;width:20px;height:20px;color:var(--react-paint-editor-colorfield-color-value);border-radius:50%;justify-content:center;align-items:baseline;font-weight:700;display:flex}.react-paint-editor-fontfamily-option{font-family:var(--react-paint-editor-fontfamily-family)}.react-paint-editor-selectfield-wrapper{flex-wrap:wrap;display:flex}.react-paint-editor-layout-opened .react-paint-editor-layout-button.react-paint-editor-layout-button.react-paint-editor-layout-button{color:var(--react-paint-editor-app-font-selected-color);background:var(--react-paint-editor-app-font-selected-bg)}.react-paint-editor-linearrow-left{border-top:5px solid #0000;border-bottom:5px solid #0000;border-right:15px solid;width:0;height:0;display:inline-block;position:absolute;top:50%;left:0;transform:translate(-25%,-50%)}.react-paint-editor-linearrow-right{border-top:5px solid #0000;border-bottom:5px solid #0000;border-left:15px solid;width:0;height:0;display:inline-block;position:absolute;top:50%;right:0;transform:translate(25%,-50%)}.react-paint-editor-linearrow-option{vertical-align:middle;background:currentColor;width:60px;height:2px;display:inline-block;position:relative}.react-paint-editor-linearrow-option[data-type="0"] .react-paint-editor-linearrow-left,.react-paint-editor-linearrow-option[data-type="1"] .react-paint-editor-linearrow-left,.react-paint-editor-linearrow-option[data-type="0"] .react-paint-editor-linearrow-right,.react-paint-editor-linearrow-option[data-type="2"] .react-paint-editor-linearrow-right{display:none}.react-paint-editor-linetype-option{display:inline-block}.react-paint-editor-linetype-option>span{vertical-align:middle;background:0 0;width:6px;height:2px;display:inline-block}.react-paint-editor-linetype-option[data-type="0"]>span{background:currentColor}.react-paint-editor-linetype-option[data-type="2"]{position:relative;left:3px}.react-paint-editor-linetype-option[data-type="2"]>span:nth-child(3n-1){background:currentColor;width:12px}.react-paint-editor-linetype-option[data-type="2"]>span:nth-child(n+11){display:none}.react-paint-editor-linetype-option[data-type="1"]>span:nth-child(odd){background:currentColor}.react-paint-editor-rangefield{flex-wrap:wrap;align-items:center;max-width:100%;display:inline-flex}.react-paint-editor-rangefield [data-indeterminate="1"]{opacity:.25}.react-paint-editor-settings-bar{-webkit-user-select:none;user-select:none;background:var(--react-paint-editor-app-toolbar-bg);border-top:1px solid var(--react-paint-editor-app-divider-color);box-sizing:border-box;height:36px;display:flex;position:relative}.react-paint-editor-settings-shrinkable{text-align:left;flex:1;height:100%;display:flex;position:relative}.react-paint-editor-settings-modal{grid-template-columns:repeat(auto-fill,40px);width:100%}.react-paint-editor-zoom-button{margin:0}.react-paint-editor-zoom-button .react-paint-editor-button-children{justify-content:center}.react-paint-editor-zoom-button-value{min-width:60px}.react-paint-editor-bar-zoom-button-opened.react-paint-editor-bar-zoom-button-opened.react-paint-editor-bar-zoom-button-opened.react-paint-editor-bar-zoom-button-opened{color:var(--react-paint-editor-app-font-selected-color);background:var(--react-paint-editor-app-font-selected-bg)}.react-paint-editor-menu{flex-direction:column;display:flex}.react-paint-editor-toolbox-relative{display:inline-block;position:relative}.react-paint-editor-toolbox-pictureinput-modal form{grid-template-columns:3fr 1fr 1fr}.react-paint-editor-toolbox-pictureinput-modal form input{color:var(--react-paint-editor-app-font-color);border:1px solid var(--react-paint-editor-app-font-color);background:var(--react-paint-editor-app-toolbar-bg);outline:none}.react-paint-editor-toolbar-shrinkable{text-align:center;flex:1;height:100%;position:relative}.react-paint-editor-toolbar-toolbox{background:var(--react-paint-editor-app-toolbar-bg);border-bottom:1px solid var(--react-paint-editor-app-divider-color);box-sizing:border-box;max-height:36px;min-width:var(--react-paint-editor-toolbar-minwidth);display:flex}.react-paint-editor-toolbar-modal{grid-template-columns:1fr 1fr 1fr}.react-paint-editor-toolbox-export-modal h3{margin-top:8px;margin-bottom:0;font-size:18px}.react-paint-editor-toolbargroup-panel-content{display:flex}.react-paint-editor-toolbargroup-panel-content[data-vertical="1"]{flex-direction:column}.react-paint-editor-toolbargroup-relative{display:inline-block;position:relative}.react-paint-editor-app{color:var(--react-paint-editor-app-font-color);max-width:min(100%, var(--react-paint-editor-app-maxWidth));flex-direction:column;font-family:Arial,Helvetica,sans-serif;display:flex;position:relative}.react-paint-editor-app hr{border:none;border-top:1px solid var(--react-paint-editor-app-divider-color);width:100%}.react-paint-editor-toolbox-contextmenu{transform:var(--react-paint-editor-toolbox-contextmenu-transform);width:160px;top:0;left:0}.react-paint-editor-toolbox-contextmenu-group{flex-direction:column;display:flex;position:relative}