@yorab/react-paint 0.9.3 → 0.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/README.md +1 -1
  2. package/dist/components/App.d.ts +1 -1
  3. package/dist/components/Canvas.d.ts +10 -5
  4. package/dist/components/settings/SettingsBar.d.ts +3 -3
  5. package/dist/components/toolbox/EditTextBox.d.ts +3 -2
  6. package/dist/constants/app.d.ts +18 -1
  7. package/dist/hooks/useDrawableCanvas.d.ts +8 -11
  8. package/dist/hooks/useKeyboard.d.ts +3 -5
  9. package/dist/hooks/useShapes.d.ts +8 -6
  10. package/dist/react-paint.css +1 -1
  11. package/dist/react-paint.js +1106 -1003
  12. package/dist/react-paint.umd.cjs +1 -1
  13. package/dist/types/Mode.d.ts +6 -1
  14. package/dist/types/Shapes.d.ts +5 -5
  15. package/dist/types/react.d.ts +0 -1
  16. package/dist/utils/canvas.d.ts +3 -1
  17. package/dist/utils/data.d.ts +2 -1
  18. package/dist/utils/file.d.ts +4 -3
  19. package/dist/utils/grid.d.ts +2 -3
  20. package/dist/utils/intersect.d.ts +8 -3
  21. package/dist/utils/selection/lineSelection.d.ts +6 -5
  22. package/dist/utils/selection/rectSelection.d.ts +5 -5
  23. package/dist/utils/selection/selectionFrame.d.ts +3 -0
  24. package/dist/utils/selection.d.ts +3 -2
  25. package/dist/utils/shapes/brush.d.ts +9 -9
  26. package/dist/utils/shapes/circle.d.ts +7 -7
  27. package/dist/utils/shapes/curve.d.ts +8 -8
  28. package/dist/utils/shapes/ellipse.d.ts +7 -7
  29. package/dist/utils/shapes/index.d.ts +18 -15
  30. package/dist/utils/shapes/line.d.ts +7 -7
  31. package/dist/utils/shapes/path.d.ts +3 -2
  32. package/dist/utils/shapes/picture.d.ts +7 -7
  33. package/dist/utils/shapes/polygon.d.ts +9 -9
  34. package/dist/utils/shapes/rectangle.d.ts +8 -8
  35. package/dist/utils/shapes/text.d.ts +9 -9
  36. package/dist/utils/style.d.ts +1 -1
  37. package/dist/utils/transform.d.ts +11 -5
  38. package/dist/utils/trigo.d.ts +2 -1
  39. package/package.json +55 -69
  40. package/dist/utils/migration.d.ts +0 -2
package/README.md CHANGED
@@ -1 +1 @@
1
- # React Paint V0.9.3
1
+ # React Paint V0.10.1
package/dist/components/App.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React, { MutableRefObject } from 'react';
2
- import type { DrawableShapeJson, ExportDataType } from '../types/Shapes';
3
2
  import { OptionalAppOptionsType } from '../constants/app';
3
+ import type { DrawableShapeJson, ExportDataType } from '../types/Shapes';
4
4
  import './App.css';
5
5
  type AppType = {
6
6
  className?: string;
package/dist/components/Canvas.d.ts CHANGED
@@ -1,11 +1,10 @@
1
1
  import React from 'react';
2
- import type { Point, ShapeEntity } from '../types/Shapes';
2
+ import { UtilsSettings } from '../constants/app';
3
3
  import type { SelectionModeData } from '../types/Mode';
4
+ import type { Point, ShapeEntity } from '../types/Shapes';
4
5
  import type { ToolsType } from '../types/tools';
5
- import type { GridFormatType } from '../constants/app';
6
6
  import './Canvas.css';
7
7
  type DrawerType = {
8
- gridFormat: GridFormatType;
9
8
  disabled?: boolean;
10
9
  canGrow?: boolean;
11
10
  canvasSize: {
@@ -15,7 +14,7 @@ type DrawerType = {
15
14
  };
16
15
  selectionColor: string;
17
16
  selectionWidth: number;
18
- selectionPadding: number;
17
+ settings: UtilsSettings;
19
18
  isEditMode: boolean;
20
19
  shapes: ShapeEntity[];
21
20
  saveShapes: () => void;
@@ -23,16 +22,22 @@ type DrawerType = {
23
22
  updateSingleShape: (updatedShape: ShapeEntity) => void;
24
23
  selectedShape: ShapeEntity | undefined;
25
24
  setSelectedShape: React.Dispatch<React.SetStateAction<ShapeEntity | undefined>>;
25
+ setSelectionFrame: React.Dispatch<React.SetStateAction<[Point, Point] | undefined>>;
26
+ hoveredShape: ShapeEntity | undefined;
27
+ selectionFrame: [Point, Point] | undefined;
28
+ refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point, settings: UtilsSettings) => void;
29
+ refreshSelectedShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point, settings: UtilsSettings) => void;
26
30
  activeTool: ToolsType;
27
31
  setActiveTool: React.Dispatch<React.SetStateAction<ToolsType>>;
28
32
  canvasOffsetStartPosition: Point | undefined;
29
33
  setCanvasOffsetStartPosition: React.Dispatch<React.SetStateAction<Point | undefined>>;
30
- canvasOffset: Point;
31
34
  setCanvasOffset: React.Dispatch<React.SetStateAction<Point>>;
32
35
  isInsideComponent: boolean;
33
36
  selectionMode: SelectionModeData<number | Point>;
34
37
  setSelectionMode: React.Dispatch<React.SetStateAction<SelectionModeData<number | Point>>>;
35
38
  isShiftPressed: boolean;
39
+ withFrameSelection: boolean;
40
+ withSkeleton: boolean;
36
41
  };
37
42
  declare const Canvas: React.ForwardRefExoticComponent<DrawerType & React.RefAttributes<HTMLCanvasElement>>;
38
43
  export default Canvas;
package/dist/components/settings/SettingsBar.d.ts CHANGED
@@ -2,6 +2,7 @@ import React from 'react';
2
2
  import type { ShapeEntity } from '../../types/Shapes';
3
3
  import type { CustomTool, ToolsType } from '../../types/tools';
4
4
  import './SettingsBar.css';
5
+ import { UtilsSettings } from 'src/constants/app';
5
6
  type SettingsBoxType = {
6
7
  width: number;
7
8
  disabled?: boolean;
@@ -11,11 +12,10 @@ type SettingsBoxType = {
11
12
  activeTool: ToolsType;
12
13
  selectedShape: ShapeEntity | undefined;
13
14
  canvas: HTMLCanvasElement | null;
14
- currentScale: number;
15
- selectionPadding: number;
15
+ settings: UtilsSettings;
16
16
  updateShape: (shape: ShapeEntity, withSave?: boolean) => void;
17
17
  removeShape: (shape: ShapeEntity) => void;
18
18
  toggleLayoutPanel: () => void;
19
19
  };
20
- declare const SettingsBar: ({ width, disabled, availableTools, updateToolSettings, layersManipulation, toggleLayoutPanel, activeTool, selectedShape, canvas, currentScale, selectionPadding, updateShape, removeShape }: SettingsBoxType) => React.JSX.Element;
20
+ declare const SettingsBar: ({ width, disabled, availableTools, updateToolSettings, layersManipulation, toggleLayoutPanel, activeTool, selectedShape, canvas, settings, updateShape, removeShape }: SettingsBoxType) => React.JSX.Element;
21
21
  export default SettingsBar;
package/dist/components/toolbox/EditTextBox.d.ts CHANGED
@@ -1,14 +1,15 @@
1
1
  import React from 'react';
2
2
  import type { DrawableShape } from '../../types/Shapes';
3
3
  import './EditTextBox.css';
4
+ import { UtilsSettings } from 'src/constants/app';
4
5
  type EditTextBoxType = {
5
6
  scaleRatio: number;
6
7
  disabled?: boolean;
7
8
  shape: DrawableShape<'text'>;
8
9
  defaultValue: string[];
9
- selectionPadding: number;
10
+ settings: UtilsSettings;
10
11
  updateValue: (newValue: string[]) => void;
11
12
  saveShapes: () => void;
12
13
  };
13
- declare const EditTextBox: ({ disabled, scaleRatio, shape, defaultValue, updateValue, saveShapes, selectionPadding }: EditTextBoxType) => React.JSX.Element;
14
+ declare const EditTextBox: ({ disabled, scaleRatio, shape, defaultValue, updateValue, saveShapes, settings }: EditTextBoxType) => React.JSX.Element;
14
15
  export default EditTextBox;
package/dist/constants/app.d.ts CHANGED
@@ -1,12 +1,26 @@
1
- import type { DrawableShapeJson } from '../types/Shapes';
1
+ import type { DrawableShapeJson, Point } from '../types/Shapes';
2
2
  import type { CustomToolInput } from '../types/tools';
3
3
  import type { RecursivePartial } from '../types/utils';
4
4
  export declare const APP_NAME = "react_paint";
5
+ export declare const DRAWCANVAS_CLASSNAME = "react-paint-editor-canvas-drawcanvas";
6
+ export declare const SELECTIONCANVAS_CLASSNAME = "react-paint-editor-canvas-selectioncanvas";
5
7
  export declare const GRID_NONE = 0;
6
8
  export declare const GRID_SMALL = 1;
7
9
  export declare const GRID_MEDIUM = 2;
8
10
  export declare const GRID_LARGE = 3;
9
11
  export type GridFormatType = typeof GRID_NONE | typeof GRID_SMALL | typeof GRID_MEDIUM | typeof GRID_LARGE;
12
+ export type BrushAlgo = 'simple' | 'quadratic';
13
+ export type UtilsSettings = {
14
+ brushAlgo: BrushAlgo;
15
+ gridFormat: GridFormatType;
16
+ canvasOffset: Point;
17
+ canvasSize: {
18
+ width: number;
19
+ height: number;
20
+ scaleRatio: number;
21
+ };
22
+ selectionPadding: number;
23
+ };
10
24
  type AppOptionsType = {
11
25
  layersManipulation: boolean;
12
26
  grid: GridFormatType;
@@ -17,7 +31,10 @@ type AppOptionsType = {
17
31
  withLoadAndSave: boolean;
18
32
  withUploadPicture: boolean;
19
33
  withUrlPicture: boolean;
34
+ withFrameSelection: boolean;
35
+ withSkeleton: boolean;
20
36
  clearCallback: 'empty' | 'defaultShapes' | (() => DrawableShapeJson[]);
37
+ brushAlgo: BrushAlgo;
21
38
  uiStyle: {
22
39
  toolbarBackgroundColor: string;
23
40
  dividerColor: string;
package/dist/hooks/useDrawableCanvas.d.ts CHANGED
@@ -1,15 +1,10 @@
1
1
  import React from 'react';
2
- import type { Point, ShapeEntity } from '../types/Shapes';
2
+ import type { UtilsSettings } from '../constants/app';
3
3
  import type { HoverModeData, SelectionModeData } from '../types/Mode';
4
+ import type { Point, ShapeEntity } from '../types/Shapes';
4
5
  import type { ToolsType } from '../types/tools';
5
- import type { GridFormatType } from '../constants/app';
6
6
  type UseCanvasType = {
7
7
  disabled?: boolean;
8
- canvasSize: {
9
- width: number;
10
- height: number;
11
- scaleRatio: number;
12
- };
13
8
  shapes: ShapeEntity[];
14
9
  saveShapes: () => void;
15
10
  addShape: (newShape: ShapeEntity) => void;
@@ -18,20 +13,22 @@ type UseCanvasType = {
18
13
  setSelectedShape: React.Dispatch<React.SetStateAction<ShapeEntity | undefined>>;
19
14
  activeTool: ToolsType;
20
15
  setActiveTool: React.Dispatch<React.SetStateAction<ToolsType>>;
16
+ refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point, settings: UtilsSettings) => void;
17
+ refreshSelectedShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point, settings: UtilsSettings) => void;
21
18
  canvasOffsetStartPosition: Point | undefined;
22
19
  setCanvasOffsetStartPosition: React.Dispatch<React.SetStateAction<Point | undefined>>;
23
- gridFormat: GridFormatType;
24
- canvasOffset: Point;
25
20
  setCanvasOffset: React.Dispatch<React.SetStateAction<Point>>;
26
21
  isInsideComponent: boolean;
27
22
  selectionMode: SelectionModeData<number | Point>;
28
23
  setSelectionMode: React.Dispatch<React.SetStateAction<SelectionModeData<number | Point>>>;
24
+ setSelectionFrame: React.Dispatch<React.SetStateAction<[Point, Point] | undefined>>;
29
25
  drawCanvasRef: React.MutableRefObject<HTMLCanvasElement | null>;
30
26
  selectionCanvasRef: React.MutableRefObject<HTMLCanvasElement | null>;
31
- selectionPadding: number;
32
27
  isShiftPressed: boolean;
28
+ withFrameSelection: boolean;
29
+ settings: UtilsSettings;
33
30
  };
34
- declare const useDrawableCanvas: ({ disabled, addShape, canvasSize, drawCanvasRef, setActiveTool, shapes, selectionMode, activeTool, isInsideComponent, setCanvasOffset, selectedShape, selectionCanvasRef, canvasOffsetStartPosition, setSelectedShape, setCanvasOffsetStartPosition, updateSingleShape, gridFormat, canvasOffset, saveShapes, setSelectionMode, selectionPadding, isShiftPressed }: UseCanvasType) => {
31
+ declare const useDrawableCanvas: ({ disabled, addShape, drawCanvasRef, setActiveTool, refreshHoveredShape, shapes, selectionMode, activeTool, isInsideComponent, setCanvasOffset, selectedShape, selectionCanvasRef, canvasOffsetStartPosition, refreshSelectedShapes, setSelectedShape, setSelectionFrame, setCanvasOffsetStartPosition, updateSingleShape, saveShapes, setSelectionMode, settings, isShiftPressed, withFrameSelection }: UseCanvasType) => {
35
32
  hoverMode: HoverModeData;
36
33
  };
37
34
  export default useDrawableCanvas;
package/dist/hooks/useKeyboard.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import type { GridFormatType } from '../constants/app';
2
+ import type { UtilsSettings } from '../constants/app';
3
3
  import type { ShapeEntity } from '../types/Shapes';
4
4
  type UseKeyboardType = {
5
5
  isInsideComponent: boolean;
@@ -12,9 +12,7 @@ type UseKeyboardType = {
12
12
  forwardShape: () => void;
13
13
  setShiftPressed: (value: React.SetStateAction<boolean>) => void;
14
14
  isEditingText: boolean;
15
- gridFormat: GridFormatType;
16
- currentScale: number;
17
- selectionPadding: number;
15
+ settings: UtilsSettings;
18
16
  };
19
- declare const useKeyboard: ({ gridFormat, isInsideComponent, selectedShape, isEditingText, currentScale, selectionPadding, setSelectedShape, removeShape, pasteShape, updateShape, backwardShape, forwardShape, setShiftPressed }: UseKeyboardType) => {};
17
+ declare const useKeyboard: ({ isInsideComponent, selectedShape, isEditingText, settings, setSelectedShape, removeShape, pasteShape, updateShape, backwardShape, forwardShape, setShiftPressed }: UseKeyboardType) => {};
20
18
  export default useKeyboard;
package/dist/hooks/useShapes.d.ts CHANGED
@@ -1,17 +1,19 @@
1
1
  /// <reference types="react" />
2
- import type { ShapeEntity } from '../types/Shapes';
3
- declare const useShapes: (onDataChanged: (() => void) | undefined, selectionPadding: number, canvasSize: {
4
- width: number;
5
- height: number;
6
- scaleRatio: number;
7
- }) => {
2
+ import { UtilsSettings } from 'src/constants/app';
3
+ import type { Point, ShapeEntity } from '../types/Shapes';
4
+ declare const useShapes: (onDataChanged: (() => void) | undefined, settings: UtilsSettings) => {
8
5
  shapesRef: import("react").MutableRefObject<ShapeEntity[]>;
9
6
  selectedShape: ShapeEntity | undefined;
7
+ hoveredShape: ShapeEntity | undefined;
8
+ selectionFrame: [Point, Point] | undefined;
9
+ setSelectionFrame: import("react").Dispatch<import("react").SetStateAction<[Point, Point] | undefined>>;
10
+ refreshSelectedShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point) => void;
10
11
  addShape: (newShape: ShapeEntity) => void;
11
12
  addPictureShape: (fileOrUrl: File | string, maxWidth?: number, maxHeight?: number) => Promise<ShapeEntity<"picture">>;
12
13
  moveShapes: (firstShapeId: string, lastShapeId: string) => void;
13
14
  saveShapes: () => void;
14
15
  setSelectedShape: import("react").Dispatch<import("react").SetStateAction<ShapeEntity | undefined>>;
16
+ refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point) => void;
15
17
  toggleShapeVisibility: (shape: ShapeEntity) => void;
16
18
  toggleShapeLock: (shape: ShapeEntity) => void;
17
19
  removeShape: (shape: ShapeEntity) => void;
package/dist/react-paint.css CHANGED
@@ -1 +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: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{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: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: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;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-shrinkable{text-align:left;flex:1;height:100%;position:relative}.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[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 hr{border:none;border-top:1px solid var(--react-paint-editor-app-divider-color);width:100%}.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)}
1
+ .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[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 hr{border:none;border-top:1px solid var(--react-paint-editor-app-divider-color);width:100%}.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-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-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-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-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{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: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;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-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[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-rangefield{flex-wrap:wrap;align-items:center;max-width:100%;display:inline-flex}.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%;position:relative}.react-paint-editor-settings-modal{grid-template-columns:repeat(auto-fill,40px);width:100%}.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;display:flex}.react-paint-editor-toolbar-modal{grid-template-columns:1fr 1fr 1fr}.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}