@yorab/react-paint 0.8.0 → 0.9.0

package/README.md

@@ -1,11 +1 @@
-# React Paint
-
-## known issues :
-
-- dnd layout on mobile not working (fix : use dnd lib, or add touch listener to fake dnd, or provide alt UI)
-- TextEdit cursor overflow MINOR (quick fix : edit on modale ?)
-- circle resizing only goes one direction
-- adding padding to selection result in wrong intersection calculs
-- Clear with custom callback breaks history stack
-- selection padding needs work
-- with shrunk or grown container, anchors selection is miscalculated
+# React Paint V0.9.0

package/dist/components/Canvas.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { DrawableShape, Point } from '../types/Shapes';
+import type { Point, ShapeEntity } from '../types/Shapes';
 import type { SelectionModeData } from '../types/Mode';
 import type { ToolsType } from '../types/tools';
 import type { GridFormatType } from '../constants/app';
@@ -17,12 +17,12 @@ type DrawerType = {
     selectionWidth: number;
     selectionPadding: number;
     isEditMode: boolean;
-    shapes: DrawableShape[];
+    shapes: ShapeEntity[];
     saveShapes: () => void;
-    addShape: (newShape: DrawableShape) => void;
-    updateSingleShape: (updatedShape: DrawableShape) => void;
-    selectedShape: DrawableShape | undefined;
-    setSelectedShape: React.Dispatch<React.SetStateAction<DrawableShape | undefined>>;
+    addShape: (newShape: ShapeEntity) => void;
+    updateSingleShape: (updatedShape: ShapeEntity) => void;
+    selectedShape: ShapeEntity | undefined;
+    setSelectedShape: React.Dispatch<React.SetStateAction<ShapeEntity | undefined>>;
     activeTool: ToolsType;
     setActiveTool: React.Dispatch<React.SetStateAction<ToolsType>>;
     canvasOffsetStartPosition: Point | undefined;

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import type { DrawableShape } from '../../types/Shapes';
+import type { ShapeEntity } from '../../types/Shapes';
 type DeleteShapeButtonType = {
     disabled?: boolean;
-    selectedShape: DrawableShape;
-    removeShape: (shape: DrawableShape) => void;
+    selectedShape: ShapeEntity;
+    removeShape: (shape: ShapeEntity) => void;
 };
 declare const DeleteButton: ({ disabled, selectedShape, removeShape }: DeleteShapeButtonType) => React.JSX.Element;
 export default DeleteButton;

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

@@ -1,17 +1,17 @@
 import React from 'react';
-import type { DrawableShape } from '../../types/Shapes';
+import type { ShapeEntity } from '../../types/Shapes';
 import type { GridFormatType } from '../../constants/app';
 import './Layouts.css';
 type LayoutsType = {
     gridFormat: GridFormatType;
     setGridFormat: React.Dispatch<React.SetStateAction<GridFormatType>>;
     disabled?: boolean;
-    shapes: DrawableShape[];
-    removeShape: (shape: DrawableShape) => void;
-    toggleShapeVisibility: (shape: DrawableShape) => void;
-    toggleShapeLock: (shape: DrawableShape) => void;
-    selectedShape: DrawableShape | undefined;
-    selectShape: (shape: DrawableShape) => void;
+    shapes: ShapeEntity[];
+    removeShape: (shape: ShapeEntity) => void;
+    toggleShapeVisibility: (shape: ShapeEntity) => void;
+    toggleShapeLock: (shape: ShapeEntity) => void;
+    selectedShape: ShapeEntity | undefined;
+    selectShape: (shape: ShapeEntity) => void;
     moveShapes: (firstShapeId: string, lastShapeId: string) => void;
     isLayoutPanelShown: boolean;
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { DrawableShape } from '../../types/Shapes';
+import type { ShapeEntity } from '../../types/Shapes';
 import type { CustomTool, ToolsType } from '../../types/tools';
 import './SettingsBar.css';
 type SettingsBoxType = {
@@ -9,11 +9,13 @@ type SettingsBoxType = {
     updateToolSettings: (toolId: string, field: string, value: string | number | boolean) => void;
     layersManipulation?: boolean;
     activeTool: ToolsType;
-    selectedShape: DrawableShape | undefined;
+    selectedShape: ShapeEntity | undefined;
     canvas: HTMLCanvasElement | null;
-    updateShape: (shape: DrawableShape, withSave?: boolean) => void;
-    removeShape: (shape: DrawableShape) => void;
+    currentScale: number;
+    selectionPadding: number;
+    updateShape: (shape: ShapeEntity, withSave?: boolean) => void;
+    removeShape: (shape: ShapeEntity) => void;
     toggleLayoutPanel: () => void;
 };
-declare const SettingsBar: ({ width, disabled, availableTools, updateToolSettings, layersManipulation, toggleLayoutPanel, activeTool, selectedShape, canvas, updateShape, removeShape }: SettingsBoxType) => React.JSX.Element;
+declare const SettingsBar: ({ width, disabled, availableTools, updateToolSettings, layersManipulation, toggleLayoutPanel, activeTool, selectedShape, canvas, currentScale, selectionPadding, updateShape, removeShape }: SettingsBoxType) => React.JSX.Element;
 export default SettingsBar;

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import type { DrawableText } from '../../types/Shapes';
+import type { DrawableShape } from '../../types/Shapes';
 import './EditTextBox.css';
 type EditTextBoxType = {
     scaleRatio: number;
     disabled?: boolean;
-    shape: DrawableText;
+    shape: DrawableShape<'text'>;
     defaultValue: string[];
     selectionPadding: number;
     updateValue: (newValue: string[]) => void;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ToolsType } from '../../types/tools';
-type ToolType = {
+type ToolComponentType = {
     type: ToolsType;
     img?: string;
     withText?: boolean;
@@ -8,5 +8,5 @@ type ToolType = {
     disabled?: boolean;
     setActive: (marker: ToolsType) => void;
 };
-declare const Tool: ({ type, img, isActive, withText, disabled, setActive }: ToolType) => React.JSX.Element;
+declare const Tool: ({ type, img, isActive, withText, disabled, setActive }: ToolComponentType) => React.JSX.Element;
 export default Tool;

package/dist/constants/shapes.d.ts

@@ -5,4 +5,4 @@ export declare const SELECTION_DEFAULT_COLOR = "blue";
 export declare const SELECTION_ANCHOR_SIZE = 14;
 export declare const SELECTION_ROTATED_ANCHOR_POSITION = 16;
 export declare const SELECTION_RESIZE_ANCHOR_POSITIONS: Point[];
-export declare const ShapeTypeArray: readonly ["brush", "rect", "square", "line", "polygon", "circle", "curve", "ellipse", "picture", "text"];
+export declare const ShapeTypeArray: readonly ["brush", "rect", "square", "line", "polygon", "circle", "curve", "ellipse", "picture", "text", "triangle"];

package/dist/constants/style.d.ts

@@ -13,5 +13,5 @@ export declare const STYLE_ZINDEX: {
     PANEL: number;
     SNACKBAR: number;
 };
-export declare const GRID_STEP: number[];
+export declare const GRID_STEP: readonly [10, 20, 40];
 export declare const GRID_ROTATION_STEPS = 18;

package/dist/hooks/useDrag.d.ts

@@ -1,12 +1,12 @@
 import { RefObject } from 'react';
-import type { DrawableShape } from '../types/Shapes';
+import type { ShapeEntity } from '../types/Shapes';
 type useDragType = {
     disabled?: boolean;
     ref: RefObject<HTMLDivElement>;
-    shape: DrawableShape;
+    shape: ShapeEntity;
     layoutDragging: string | undefined;
     setLayoutDragging: (shapeId: string | undefined) => void;
-    handleSelect: (shape: DrawableShape) => void;
+    handleSelect: (shape: ShapeEntity) => void;
     onMoveShapes: (firstShapeId: string, lastShapeId: string) => void;
 };
 declare const useDrag: ({ disabled, ref, shape, layoutDragging, setLayoutDragging, handleSelect, onMoveShapes }: useDragType) => {

package/dist/hooks/useDrawableCanvas.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { DrawableShape, Point } from '../types/Shapes';
+import type { Point, ShapeEntity } from '../types/Shapes';
 import type { HoverModeData, SelectionModeData } from '../types/Mode';
 import type { ToolsType } from '../types/tools';
 import type { GridFormatType } from '../constants/app';
@@ -10,12 +10,12 @@ type UseCanvasType = {
         height: number;
         scaleRatio: number;
     };
-    shapes: DrawableShape[];
+    shapes: ShapeEntity[];
     saveShapes: () => void;
-    addShape: (newShape: DrawableShape) => void;
-    updateSingleShape: (updatedShape: DrawableShape) => void;
-    selectedShape: DrawableShape | undefined;
-    setSelectedShape: React.Dispatch<React.SetStateAction<DrawableShape | undefined>>;
+    addShape: (newShape: ShapeEntity) => void;
+    updateSingleShape: (updatedShape: ShapeEntity) => void;
+    selectedShape: ShapeEntity | undefined;
+    setSelectedShape: React.Dispatch<React.SetStateAction<ShapeEntity | undefined>>;
     activeTool: ToolsType;
     setActiveTool: React.Dispatch<React.SetStateAction<ToolsType>>;
     canvasOffsetStartPosition: Point | undefined;

package/dist/hooks/useKeyboard.d.ts

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

package/dist/hooks/useShapes.d.ts

@@ -1,20 +1,24 @@
 /// <reference types="react" />
-import type { DrawableShape } from '../types/Shapes';
-declare const useShapes: (onDataChanged?: () => void) => {
-    shapesRef: import("react").MutableRefObject<DrawableShape[]>;
-    selectedShape: DrawableShape | undefined;
-    addShape: (newShape: DrawableShape) => void;
-    addPictureShape: (fileOrUrl: File | string, maxWidth?: number, maxHeight?: number) => Promise<import("../types/Shapes").DrawablePicture>;
+import type { ShapeEntity } from '../types/Shapes';
+declare const useShapes: (onDataChanged: (() => void) | undefined, selectionPadding: number, canvasSize: {
+    width: number;
+    height: number;
+    scaleRatio: number;
+}) => {
+    shapesRef: import("react").MutableRefObject<ShapeEntity[]>;
+    selectedShape: ShapeEntity | undefined;
+    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<DrawableShape | undefined>>;
-    toggleShapeVisibility: (shape: DrawableShape) => void;
-    toggleShapeLock: (shape: DrawableShape) => void;
-    removeShape: (shape: DrawableShape) => void;
-    updateShape: (updatedShape: DrawableShape, withSave?: boolean) => void;
+    setSelectedShape: import("react").Dispatch<import("react").SetStateAction<ShapeEntity | undefined>>;
+    toggleShapeVisibility: (shape: ShapeEntity) => void;
+    toggleShapeLock: (shape: ShapeEntity) => void;
+    removeShape: (shape: ShapeEntity) => void;
+    updateShape: (updatedShape: ShapeEntity, withSave?: boolean) => void;
     backwardShape: () => void;
     forwardShape: () => void;
-    clearShapes: (shapesToInit?: DrawableShape[], clearHistory?: boolean) => void;
+    clearShapes: (shapesToInit?: ShapeEntity[], clearHistory?: boolean) => void;
     canGoBackward: boolean;
     canGoForward: boolean;
     canClear: boolean;

package/dist/react-paint.css

@@ -1 +1 @@
-.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:-webkit-max-content;width:-moz-max-content;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-editor-canvas-box{flex:1;justify-content:center;align-items:center;display:flex}.react-paint-editor-canvas-container{background-color:var(--react-paint-editor-app-canvas-bg);background-repeat:repeat;background-size:16px;display:grid;position:relative;overflow:hidden}.react-paint-editor-canvas-container[data-grow=true]{width:100%;height:100%}.react-paint-editor-canvas-drawcanvas{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:none;grid-area:1/1;max-width:100%;display:block}.react-paint-editor-canvas-drawcanvas[data-grow=true]{width:100%}.react-paint-editor-canvas-selectioncanvas{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:none;cursor:var(--react-paint-editor-canvas-cursor);grid-area:1/1;max-width:100%;display:block;position:relative}.react-paint-editor-canvas-selectioncanvas[data-grow=true]{width:100%}.react-paint-editor-button{vertical-align:middle;box-sizing:border-box;cursor:pointer;border-radius:var(--react-paint-editor-app-font-radius);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;min-width:32px;height:32px;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{visibility:hidden;position:absolute}.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 rgba(0,0,0,.24)}.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 transparent;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: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-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-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-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 rgba(0,0,0,.24)}.react-paint-editor-modal-mask{background:rgba(0,0,0,.45);position:absolute;top:0;bottom:0;left:0;right:0}.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:36px;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;display:flex}.react-paint-editor-toolbar-modal{grid-template-columns:1fr 1fr 1fr}.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 rgba(128,128,128,.22)}.react-paint-editor-colorfield-color[data-mode=stroke]{border:4px solid rgba(128,128,128,.22)}.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;color:var(--react-paint-editor-colorfield-color-value);border-radius:50%;justify-content:center;align-items:baseline;width:20px;height:20px;font-weight:700;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-rangefield{flex-wrap:wrap;align-items:center;max-width:100%;display:inline-flex}.react-paint-editor-selectfield-wrapper{flex-wrap:wrap;display:flex}.react-paint-editor-fontfamily-option{font-family:var(--react-paint-editor-fontfamily-family)}.react-paint-editor-linetype-option{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-linetype-option>span{vertical-align:middle;background:0 0;width:6px;height:2px;display:inline-block}.react-paint-editor-linearrow-left{border-top:5px solid transparent;border-bottom:5px solid transparent;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 transparent;border-bottom:5px solid transparent;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-settings-bar{-webkit-user-select:none;-moz-user-select:none;-ms-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-separator{flex:1}.react-paint-editor-settings-modal{grid-template-columns:repeat(auto-fill,40px);width:100%}.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;transition:all var(--react-paint-editor-panel-transition-duration);opacity:0;max-width:calc(100% - 24px);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-loading{z-index:var(--react-paint-editor-loading-zindex);transition:opacity var(--react-paint-editor-loading-transition-duration)linear;opacity:0;background:rgba(0,0,0,.314);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-app{color:var(--react-paint-editor-app-font-color);flex-direction:column;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-app[data-grow=false]{max-width:min(100%,var(--react-paint-editor-app-canvaswidth))}.react-paint-editor-app[data-shrink=false]{min-width:var(--react-paint-editor-app-canvaswidth)}.react-paint-editor-app-row{z-index:var(--react-paint-editor-app-row-zindex);aspect-ratio:var(--react-paint-editor-app-row-aspectratio);flex-direction:row;max-width:100%;display:flex;position:relative}.react-paint-editor-app-row[data-grow=true]{width:100%}.react-paint-editor-app-row[data-grow=false]{width:var(--react-paint-editor-app-row-width)}
+.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-editor-canvas-box{flex:1;justify-content:center;align-items:center;display:flex}.react-paint-editor-canvas-container{background-color:var(--react-paint-editor-app-canvas-bg);background-repeat:repeat;background-size:16px;display:grid;position:relative;overflow:hidden}.react-paint-editor-canvas-container[data-grow=true]{width:100%;height:100%}.react-paint-editor-canvas-drawcanvas{-webkit-user-select:none;user-select:none;touch-action:none;grid-area:1/1;max-width:100%;display:block}.react-paint-editor-canvas-drawcanvas[data-grow=true]{width:100%}.react-paint-editor-canvas-selectioncanvas{-webkit-user-select:none;user-select:none;touch-action:none;cursor:var(--react-paint-editor-canvas-cursor);grid-area:1/1;max-width:100%;display:block;position:relative}.react-paint-editor-canvas-selectioncanvas[data-grow=true]{width:100%}.react-paint-editor-button{vertical-align:middle;box-sizing:border-box;cursor:pointer;border-radius:var(--react-paint-editor-app-font-radius);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;min-width:32px;height:32px;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{visibility:hidden;position:absolute}.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: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-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-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-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-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:36px;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;display:flex}.react-paint-editor-toolbar-modal{grid-template-columns:1fr 1fr 1fr}.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;color:var(--react-paint-editor-colorfield-color-value);border-radius:50%;justify-content:center;align-items:baseline;width:20px;height:20px;font-weight:700;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-rangefield{flex-wrap:wrap;align-items:center;max-width:100%;display:inline-flex}.react-paint-editor-selectfield-wrapper{flex-wrap:wrap;display:flex}.react-paint-editor-fontfamily-option{font-family:var(--react-paint-editor-fontfamily-family)}.react-paint-editor-linetype-option{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-linetype-option>span{vertical-align:middle;background:0 0;width:6px;height:2px;display:inline-block}.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-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-separator{flex:1}.react-paint-editor-settings-modal{grid-template-columns:repeat(auto-fill,40px);width:100%}.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;transition:all var(--react-paint-editor-panel-transition-duration);opacity:0;max-width:calc(100% - 24px);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-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-app{color:var(--react-paint-editor-app-font-color);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-app[data-grow=false]{max-width:min(100%,var(--react-paint-editor-app-canvaswidth))}.react-paint-editor-app[data-shrink=false]{min-width:var(--react-paint-editor-app-canvaswidth)}.react-paint-editor-app-row{z-index:var(--react-paint-editor-app-row-zindex);aspect-ratio:var(--react-paint-editor-app-row-aspectratio);flex-direction:row;max-width:100%;display:flex;position:relative}.react-paint-editor-app-row[data-grow=true]{width:100%}.react-paint-editor-app-row[data-grow=false]{width:var(--react-paint-editor-app-row-width)}