@yorab/react-paint 0.2.2 → 0.4.1

package/dist/components/toolbox/ToolbarGroup.js

@@ -106,11 +106,11 @@ var ToolbarGroup = function ToolbarGroup(_ref) {
 
   var isActive = _fp["default"].includes(activeTool, group === null || group === void 0 ? void 0 : group.tools);
 
-  var groupIcon = (_ref2 = localActiveTool ? (0, _style.getShapePicture)(localActiveTool) : group.img) !== null && _ref2 !== void 0 ? _ref2 : group.title;
+  var groupIcon = (_ref2 = localActiveTool ? (0, _style.getShapePicture)(localActiveTool) : group.tools && group.tools[0] && (0, _style.getShapePicture)(group.tools[0])) !== null && _ref2 !== void 0 ? _ref2 : group.title;
 
   var openPanel = function openPanel() {
-    if (localActiveTool) setActiveToolFromProps(localActiveTool);
-    setIsOpen(true);
+    if (localActiveTool) setActiveToolFromProps(localActiveTool);else group.tools && group.tools[0] && setActiveTool(group.tools[0]);
+    setIsOpen(true); // group.tools && group.tools[0] && setActiveTool(group.tools[0])
   };
 
   return /*#__PURE__*/_react["default"].createElement(StyledRelative, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {

package/dist/constants/shapes.js

@@ -3,9 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SELECTION_ROTATED_ANCHOR_POSITION = exports.SELECTION_RESIZE_ANCHOR_POSITIONS = exports.SELECTION_PADDING = exports.SELECTION_ANCHOR_SIZE = void 0;
-var SELECTION_PADDING = 0;
-exports.SELECTION_PADDING = SELECTION_PADDING;
+exports.SELECTION_ROTATED_ANCHOR_POSITION = exports.SELECTION_RESIZE_ANCHOR_POSITIONS = exports.SELECTION_DEFAULT_WIDTH = exports.SELECTION_DEFAULT_PADDING = exports.SELECTION_DEFAULT_COLOR = exports.SELECTION_ANCHOR_SIZE = void 0;
+var SELECTION_DEFAULT_PADDING = 0;
+exports.SELECTION_DEFAULT_PADDING = SELECTION_DEFAULT_PADDING;
+var SELECTION_DEFAULT_WIDTH = 2;
+exports.SELECTION_DEFAULT_WIDTH = SELECTION_DEFAULT_WIDTH;
+var SELECTION_DEFAULT_COLOR = 'blue';
+exports.SELECTION_DEFAULT_COLOR = SELECTION_DEFAULT_COLOR;
 var SELECTION_ANCHOR_SIZE = 14;
 exports.SELECTION_ANCHOR_SIZE = SELECTION_ANCHOR_SIZE;
 var SELECTION_ROTATED_ANCHOR_POSITION = 16;

package/dist/hooks/useDrawableCanvas.js

@@ -23,23 +23,21 @@ var _Mode = require("../types/Mode");
 
 var _transform = require("../utils/transform");
 
-var _draw = require("../constants/draw");
-
 var _data = require("../utils/data");
 
-var handleMove = function handleMove(e, canvasRef, activeTool, canvasOffset, selectedShape, selectionMode, canvasOffsetStartPosition, width, height, setHoverMode, updateSingleShape, setCanvasOffset, setSelectedShape) {
+var handleMove = function handleMove(e, canvasRef, activeTool, canvasOffset, selectedShape, selectionMode, canvasOffsetStartPosition, width, height, scaleRatio, setHoverMode, updateSingleShape, setCanvasOffset, setSelectedShape, selectionPadding) {
   if (activeTool === _Shapes.ToolEnum.move && canvasOffsetStartPosition !== undefined) {
-    var _cursorPosition = (0, _intersect.getCursorPosition)(e, canvasRef.current, width, height);
+    var _cursorPosition = (0, _intersect.getCursorPosition)(e, canvasRef.current, width, height, scaleRatio);
 
     setCanvasOffset([_cursorPosition[0] - canvasOffsetStartPosition[0], _cursorPosition[1] - canvasOffsetStartPosition[1]]);
   }
 
   if (selectedShape == undefined) return;
   if (selectedShape.locked) return;
-  var cursorPosition = (0, _intersect.getCursorPosition)(e, canvasRef.current, width, height);
+  var cursorPosition = (0, _intersect.getCursorPosition)(e, canvasRef.current, width, height, scaleRatio);
 
   if (selectionMode.mode === _Mode.SelectionModeLib["default"]) {
-    var positionIntersection = (0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset, true) || {
+    var positionIntersection = (0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset, selectionPadding, scaleRatio, true) || {
       mode: _Mode.SelectionModeLib["default"]
     };
     setHoverMode(positionIntersection);
@@ -49,7 +47,7 @@ var handleMove = function handleMove(e, canvasRef, activeTool, canvasOffset, sel
     var ctx = (_canvasRef$current = canvasRef.current) === null || _canvasRef$current === void 0 ? void 0 : _canvasRef$current.getContext('2d');
     if (!ctx) return;
 
-    var _newShape = (0, _transform.transformShape)(ctx, selectedShape, cursorPosition, canvasOffset, selectionMode);
+    var _newShape = (0, _transform.transformShape)(ctx, selectedShape, cursorPosition, canvasOffset, selectionMode, selectionPadding);
 
     updateSingleShape(_newShape);
     setSelectedShape(_newShape);
@@ -60,13 +58,12 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
   var _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       addShape = _ref.addShape,
+      canvasSize = _ref.canvasSize,
       drawCanvasRef = _ref.drawCanvasRef,
       setActiveTool = _ref.setActiveTool,
       shapes = _ref.shapes,
       defaultConf = _ref.defaultConf,
       selectionMode = _ref.selectionMode,
-      width = _ref.width,
-      height = _ref.height,
       activeTool = _ref.activeTool,
       isInsideComponent = _ref.isInsideComponent,
       setCanvasOffset = _ref.setCanvasOffset,
@@ -78,7 +75,11 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
       updateSingleShape = _ref.updateSingleShape,
       canvasOffset = _ref.canvasOffset,
       saveShapes = _ref.saveShapes,
-      setSelectionMode = _ref.setSelectionMode;
+      setSelectionMode = _ref.setSelectionMode,
+      selectionPadding = _ref.selectionPadding;
+  var width = canvasSize.width,
+      height = canvasSize.height,
+      scaleRatio = canvasSize.scaleRatio;
 
   var _useState = (0, _react.useState)({
     mode: _Mode.SelectionModeLib["default"]
@@ -89,7 +90,9 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
 
   (0, _react.useEffect)(function () {
     var handleMouseMove = function handleMouseMove(e) {
-      return _fp["default"].throttle(_draw.FRAMERATE_SELECTION, handleMove)(e, selectionCanvasRef, activeTool, canvasOffset, selectedShape, selectionMode, canvasOffsetStartPosition, width, height, setHoverMode, updateSingleShape, setCanvasOffset, setSelectedShape);
+      return window.requestAnimationFrame(function () {
+        return handleMove(e, selectionCanvasRef, activeTool, canvasOffset, selectedShape, selectionMode, canvasOffsetStartPosition, width, height, scaleRatio, setHoverMode, updateSingleShape, setCanvasOffset, setSelectedShape, selectionPadding);
+      });
     };
 
     if (isInsideComponent) {
@@ -103,7 +106,7 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
         document.removeEventListener('touchmove', handleMouseMove);
       }
     };
-  }, [isInsideComponent, selectionCanvasRef, selectedShape, selectionMode, setHoverMode, canvasOffset, canvasOffsetStartPosition, width, height, updateSingleShape, activeTool, setCanvasOffset, setSelectedShape]);
+  }, [isInsideComponent, selectionCanvasRef, selectedShape, selectionMode, setHoverMode, canvasOffset, canvasOffsetStartPosition, width, height, scaleRatio, updateSingleShape, activeTool, setCanvasOffset, setSelectedShape, selectionPadding]);
   (0, _react.useEffect)(function () {
     var handleMouseUp = function handleMouseUp(e) {
       if (selectionMode.mode === _Mode.SelectionModeLib.textedition) return;
@@ -111,7 +114,7 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
       if (activeTool === _Shapes.ShapeEnum.text) {
         var _drawCanvasRef$curren;
 
-        var cursorPosition = (0, _intersect.getCursorPosition)(e, selectionCanvasRef.current, width, height);
+        var cursorPosition = (0, _intersect.getCursorPosition)(e, selectionCanvasRef.current, width, height, scaleRatio);
         var drawCtx = (_drawCanvasRef$curren = drawCanvasRef.current) === null || _drawCanvasRef$curren === void 0 ? void 0 : _drawCanvasRef$curren.getContext('2d');
         if (!drawCtx) return;
 
@@ -146,7 +149,7 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
         document.removeEventListener('touchend', handleMouseUp);
       }
     };
-  }, [isInsideComponent, selectionCanvasRef, drawCanvasRef, selectionMode, saveShapes, activeTool, addShape, defaultConf, width, height, setActiveTool, setSelectedShape, setSelectionMode]);
+  }, [isInsideComponent, selectionCanvasRef, drawCanvasRef, selectionMode, saveShapes, activeTool, addShape, defaultConf, width, height, scaleRatio, setActiveTool, setSelectedShape, setSelectionMode]);
   (0, _react.useEffect)(function () {
     var ref = selectionCanvasRef.current;
     if (!ref) return;
@@ -154,10 +157,10 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
 
     var handleMouseDown = function handleMouseDown(e) {
       e.preventDefault();
-      var cursorPosition = (0, _intersect.getCursorPosition)(e, selectionCanvasRef.current, width, height);
+      var cursorPosition = (0, _intersect.getCursorPosition)(e, selectionCanvasRef.current, width, height, scaleRatio);
 
       if (activeTool === _Shapes.ToolEnum.selection) {
-        var _selectShape = (0, _selection.selectShape)(shapes, cursorPosition, canvasOffset, selectedShape),
+        var _selectShape = (0, _selection.selectShape)(shapes, cursorPosition, scaleRatio, canvasOffset, selectedShape, selectionPadding),
             shape = _selectShape.shape,
             mode = _selectShape.mode;
 
@@ -211,7 +214,7 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
       ref.removeEventListener('mousedown', handleMouseDown);
       ref.removeEventListener('touchstart', handleMouseDown);
     };
-  }, [disabled, selectionCanvasRef, drawCanvasRef, selectedShape, activeTool, canvasOffset, setCanvasOffsetStartPosition, shapes, defaultConf, width, height, updateSingleShape, addShape, setActiveTool, setSelectedShape, setSelectionMode]);
+  }, [disabled, selectionCanvasRef, drawCanvasRef, selectedShape, activeTool, canvasOffset, setCanvasOffsetStartPosition, shapes, defaultConf, width, height, scaleRatio, updateSingleShape, addShape, setActiveTool, setSelectedShape, setSelectionMode, selectionPadding]);
   (0, _react.useEffect)(function () {
     var ref = selectionCanvasRef.current;
     if (!ref) return;
@@ -219,9 +222,9 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
     var handleDoubleClick = function handleDoubleClick(e) {
       if (activeTool === _Shapes.ToolEnum.selection) {
         if ((selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) === _Shapes.ShapeEnum.text) {
-          var cursorPosition = (0, _intersect.getCursorPosition)(e, selectionCanvasRef.current, width, height);
+          var cursorPosition = (0, _intersect.getCursorPosition)(e, selectionCanvasRef.current, width, height, scaleRatio);
 
-          if ((0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset)) {
+          if ((0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset, selectionPadding)) {
             setSelectionMode({
               mode: _Mode.SelectionModeLib.textedition,
               defaultValue: selectedShape.value
@@ -240,7 +243,7 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
         ref.removeEventListener('dblclick', handleDoubleClick);
       }
     };
-  }, [isInsideComponent, selectionCanvasRef, activeTool, selectedShape, width, height, canvasOffset, setSelectionMode]);
+  }, [isInsideComponent, selectionCanvasRef, activeTool, selectedShape, width, height, scaleRatio, canvasOffset, setSelectionMode, selectionPadding]);
   return {
     hoverMode: hoverMode
   };

package/dist/hooks/useResizeObserver.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
+var _react = require("react");
+
+var useResizeObserver = function useResizeObserver(_ref) {
+  var onResized = _ref.onResized,
+      element = _ref.element;
+  (0, _react.useEffect)(function () {
+    var current = element.current;
+    if (!current) return;
+    var resizeObserver = new ResizeObserver(function (entries) {
+      var _ref2 = _fp["default"].get('0.borderBoxSize', entries) ? _fp["default"].flow(_fp["default"].get('0.borderBoxSize'), _fp["default"].castArray, _fp["default"].first, function (el) {
+        return {
+          width: _fp["default"].get('inlineSize', el),
+          height: _fp["default"].get('blockSize', el)
+        };
+      })(entries) : _fp["default"].get('0.contentRect', entries),
+          width = _ref2.width,
+          height = _ref2.height;
+
+      onResized(width, height);
+    });
+    resizeObserver.observe(current);
+    return function () {
+      resizeObserver.unobserve(current);
+    };
+  }, [element, onResized]);
+};
+
+var _default = useResizeObserver;
+exports["default"] = _default;

package/dist/hooks/useShapes.js

@@ -24,6 +24,8 @@ var _data = require("../utils/data");
 var useShapes = function useShapes() {
   var onDataChanged = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _fp["default"].noop;
   var shapesRef = (0, _react.useRef)([]);
+  var onDataChangedRef = (0, _react.useRef)(onDataChanged);
+  onDataChangedRef.current = onDataChanged;
 
   var _useState = (0, _react.useState)(undefined),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -60,23 +62,26 @@ var useShapes = function useShapes() {
   }, []);
   var addPictureShape = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(fileOrUrl) {
-      var maxSize,
+      var maxWidth,
+          maxHeight,
           pictureShape,
           _args = arguments;
       return _regenerator["default"].wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              maxSize = _args.length > 1 && _args[1] !== undefined ? _args[1] : 300;
-              _context.next = 3;
-              return (0, _data.createPicture)(fileOrUrl, maxSize);
+              maxWidth = _args.length > 1 && _args[1] !== undefined ? _args[1] : 300;
+              maxHeight = _args.length > 2 && _args[2] !== undefined ? _args[2] : 300;
+              _context.next = 4;
+              return (0, _data.createPicture)(fileOrUrl, maxWidth, maxHeight);
 
-            case 3:
+            case 4:
               pictureShape = _context.sent;
               addShape(pictureShape);
+              saveShapes();
               return _context.abrupt("return", pictureShape);
 
-            case 6:
+            case 8:
             case "end":
               return _context.stop();
           }
@@ -87,7 +92,7 @@ var useShapes = function useShapes() {
     return function (_x) {
       return _ref.apply(this, arguments);
     };
-  }(), [addShape]);
+  }(), [addShape, saveShapes]);
   var updateShape = (0, _react.useCallback)(function (updatedShape) {
     var withSave = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     shapesRef.current = shapesRef.current.map(function (marker) {
@@ -202,8 +207,8 @@ var useShapes = function useShapes() {
     updateShapes(_fp["default"].set(shapeIndex, newShape, shapes));
   }, [updateShapes]);
   (0, _react.useEffect)(function () {
-    onDataChanged();
-  }, [onDataChanged, savedShapes]);
+    onDataChangedRef.current();
+  }, [savedShapes]);
   return {
     shapesRef: shapesRef,
     selectedShape: selectedShape,

package/dist/styles.css

@@ -1,88 +1,85 @@
-body {
+#react-paint-root {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
     'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
   background: #F3F3F3;
+
 }
 
-.examples {
+#react-paint-root .examples {
   display: flex;
 }
 
-.menu {
+#react-paint-root .menu {
   width: 250px;
   min-width: 0;
   display: flex;
   flex-direction: column;
 }
 
-.menu a {
+#react-paint-root .menu a {
   margin: 8px;
   padding: 4px;
 }
 
-.menu a.selected {
+#react-paint-root .menu a.selected {
   color: green;
 }
 
-.currentApp {
+#react-paint-root .currentApp {
   flex: 1;
   min-width: 0;
 }
 
-.s1unz6yq{position:absolute;display:inline-block;outline:none;left:0px;top:0px;-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;-webkit-transform:var(--s1unz6yq-0);-ms-transform:var(--s1unz6yq-0);transform:var(--s1unz6yq-0);color:var(--s1unz6yq-1);font-size:var(--s1unz6yq-2);line-height:var(--s1unz6yq-2);font-family:var(--s1unz6yq-4);}
+.s1unz6yq{position:absolute;display:inline-block;outline:none;left:0px;top:0px;-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;box-sizing:border-box;-webkit-transform:var(--s1unz6yq-0);-ms-transform:var(--s1unz6yq-0);transform:var(--s1unz6yq-0);color:var(--s1unz6yq-1);padding:var(--s1unz6yq-2);font-size:var(--s1unz6yq-3);line-height:var(--s1unz6yq-3);font-family:var(--s1unz6yq-5);}
 .s9czb9p{-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
-.s1538eht{position:relative;background-color:white;background-repeat:repeat;background-size:16px;overflow:hidden;}.s1538eht[data-grid='true']{background-image:url("data:image/svg+xml,%3Csvg%20id%3D%22svg%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22400%22%20height%3D%22400%22%20viewBox%3D%220%2C%200%2C%20400%2C400%22%3E%3Cg%20id%3D%22svgg%22%3E%3Cpath%20id%3D%22path0%22%20d%3D%22M204.800%2094.600%20C%20204.800%20188.933%2C204.802%20189.200%2C205.600%20189.200%20C%20206.248%20189.200%2C206.400%20189.467%2C206.400%20190.600%20C%20206.400%20191.733%2C206.552%20192.000%2C207.200%20192.000%20C%20207.733%20192.000%2C208.000%20192.267%2C208.000%20192.800%20C%20208.000%20193.244%2C208.267%20193.600%2C208.600%20193.600%20C%20208.933%20193.600%2C209.200%20193.956%2C209.200%20194.400%20C%20209.200%20195.067%2C209.467%20195.200%2C210.800%20195.200%20C%20212.133%20195.200%2C212.400%20195.333%2C212.400%20196.000%20C%20212.400%20196.798%2C212.667%20196.800%2C306.200%20196.800%20L%20400.000%20196.800%20400.000%2098.400%20L%20400.000%200.000%20302.400%200.000%20L%20204.800%200.000%20204.800%2094.600%20M0.000%20302.400%20L%200.000%20400.000%2098.400%20400.000%20L%20196.800%20400.000%20196.800%20306.200%20C%20196.800%20212.667%2C196.798%20212.400%2C196.000%20212.400%20C%20195.333%20212.400%2C195.200%20212.133%2C195.200%20210.800%20C%20195.200%20209.467%2C195.067%20209.200%2C194.400%20209.200%20C%20193.956%20209.200%2C193.600%20208.933%2C193.600%20208.600%20C%20193.600%20208.267%2C193.244%20208.000%2C192.800%20208.000%20C%20192.267%20208.000%2C192.000%20207.733%2C192.000%20207.200%20C%20192.000%20206.552%2C191.733%20206.400%2C190.600%20206.400%20C%20189.467%20206.400%2C189.200%20206.248%2C189.200%20205.600%20C%20189.200%20204.802%2C188.933%20204.800%2C94.600%20204.800%20L%200.000%20204.800%200.000%20302.400%20%22%20stroke%3D%22none%22%20fill%3D%22%23fcfcfc%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3Cpath%20id%3D%22path1%22%20d%3D%22M0.000%20100.000%20L%200.000%20200.000%2096.800%20200.000%20C%20193.333%20200.000%2C193.600%20199.998%2C193.600%20199.200%20C%20193.600%20198.533%2C193.867%20198.400%2C195.200%20198.400%20C%20196.533%20198.400%2C196.800%20198.267%2C196.800%20197.600%20C%20196.800%20197.067%2C197.067%20196.800%2C197.600%20196.800%20C%20198.267%20196.800%2C198.400%20196.533%2C198.400%20195.200%20C%20198.400%20193.867%2C198.533%20193.600%2C199.200%20193.600%20C%20199.998%20193.600%2C200.000%20193.333%2C200.000%2096.800%20L%20200.000%200.000%20100.000%200.000%20L%200.000%200.000%200.000%20100.000%20M208.000%20202.400%20C%20208.000%20203.067%2C207.733%20203.200%2C206.400%20203.200%20C%20205.067%20203.200%2C204.800%20203.333%2C204.800%20204.000%20C%20204.800%20204.533%2C204.533%20204.800%2C204.000%20204.800%20C%20203.333%20204.800%2C203.200%20205.067%2C203.200%20206.400%20C%20203.200%20207.733%2C203.067%20208.000%2C202.400%20208.000%20C%20201.602%20208.000%2C201.600%20208.267%2C201.600%20304.000%20L%20201.600%20400.000%20300.800%20400.000%20L%20400.000%20400.000%20400.000%20300.800%20L%20400.000%20201.600%20304.000%20201.600%20C%20208.267%20201.600%2C208.000%20201.602%2C208.000%20202.400%20%22%20stroke%3D%22none%22%20fill%3D%22%23e4e4e4%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3Cpath%20id%3D%22path2%22%20d%3D%22%22%20stroke%3D%22none%22%20fill%3D%22%23f4100f0%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3Cpath%20id%3D%22path3%22%20d%3D%22%22%20stroke%3D%22none%22%20fill%3D%22%23f4100f0%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3Cpath%20id%3D%22path4%22%20d%3D%22%22%20stroke%3D%22none%22%20fill%3D%22%23f4100f0%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");}.s1538eht[data-grow='true']{width:100%;height:100%;}
-.s101qxdc{position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;max-width:100%;touch-action:none;display:block;}.s101qxdc[data-grow='true']{width:100%;}
-.sa4oq48{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;max-width:100%;touch-action:none;display:block;cursor:var(--sa4oq48-0);}.sa4oq48[data-grow='true']{width:100%;}
-.sq3bzv4{min-width:32px;height:32px;font-size:14px;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;box-sizing:border-box;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;background:none;border:none;cursor:pointer;border-radius:8px;color:var(--text-color);margin:2px 4px;padding:0;}.sq3bzv4[data-selected='1']{color:var(--text-color-selected);background:var(--bg-color-selected);}.sq3bzv4[data-hidden='1']{visibility:hidden;}.sq3bzv4[data-disabled='1']{opacity:0.25;cursor:default;}.sq3bzv4[data-selected='0'][data-disabled='0']:hover{background:var(--btn-hover);}.sq3bzv4[data-disabled='0']{cursor:pointer;}.sq3bzv4 svg{fill:currentColor;width:20px;height:20px;}.sq3bzv4 input{position:absolute;visibility:hidden;}
+.s1538eht{position:relative;background-color:var(--canvas-bg);background-repeat:repeat;background-size:16px;overflow:hidden;display:grid;}.s1538eht[data-grid='true']{background-image:url("data:image/svg+xml,%3Csvg%20id%3D%22svg%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22400%22%20height%3D%22400%22%20viewBox%3D%220%2C%200%2C%20400%2C400%22%3E%3Cg%20id%3D%22svgg%22%3E%3Cpath%20id%3D%22path0%22%20d%3D%22M204.800%2094.600%20C%20204.800%20188.933%2C204.802%20189.200%2C205.600%20189.200%20C%20206.248%20189.200%2C206.400%20189.467%2C206.400%20190.600%20C%20206.400%20191.733%2C206.552%20192.000%2C207.200%20192.000%20C%20207.733%20192.000%2C208.000%20192.267%2C208.000%20192.800%20C%20208.000%20193.244%2C208.267%20193.600%2C208.600%20193.600%20C%20208.933%20193.600%2C209.200%20193.956%2C209.200%20194.400%20C%20209.200%20195.067%2C209.467%20195.200%2C210.800%20195.200%20C%20212.133%20195.200%2C212.400%20195.333%2C212.400%20196.000%20C%20212.400%20196.798%2C212.667%20196.800%2C306.200%20196.800%20L%20400.000%20196.800%20400.000%2098.400%20L%20400.000%200.000%20302.400%200.000%20L%20204.800%200.000%20204.800%2094.600%20M0.000%20302.400%20L%200.000%20400.000%2098.400%20400.000%20L%20196.800%20400.000%20196.800%20306.200%20C%20196.800%20212.667%2C196.798%20212.400%2C196.000%20212.400%20C%20195.333%20212.400%2C195.200%20212.133%2C195.200%20210.800%20C%20195.200%20209.467%2C195.067%20209.200%2C194.400%20209.200%20C%20193.956%20209.200%2C193.600%20208.933%2C193.600%20208.600%20C%20193.600%20208.267%2C193.244%20208.000%2C192.800%20208.000%20C%20192.267%20208.000%2C192.000%20207.733%2C192.000%20207.200%20C%20192.000%20206.552%2C191.733%20206.400%2C190.600%20206.400%20C%20189.467%20206.400%2C189.200%20206.248%2C189.200%20205.600%20C%20189.200%20204.802%2C188.933%20204.800%2C94.600%20204.800%20L%200.000%20204.800%200.000%20302.400%20%22%20stroke%3D%22none%22%20fill%3D%22%23fcfcfc%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3Cpath%20id%3D%22path1%22%20d%3D%22M0.000%20100.000%20L%200.000%20200.000%2096.800%20200.000%20C%20193.333%20200.000%2C193.600%20199.998%2C193.600%20199.200%20C%20193.600%20198.533%2C193.867%20198.400%2C195.200%20198.400%20C%20196.533%20198.400%2C196.800%20198.267%2C196.800%20197.600%20C%20196.800%20197.067%2C197.067%20196.800%2C197.600%20196.800%20C%20198.267%20196.800%2C198.400%20196.533%2C198.400%20195.200%20C%20198.400%20193.867%2C198.533%20193.600%2C199.200%20193.600%20C%20199.998%20193.600%2C200.000%20193.333%2C200.000%2096.800%20L%20200.000%200.000%20100.000%200.000%20L%200.000%200.000%200.000%20100.000%20M208.000%20202.400%20C%20208.000%20203.067%2C207.733%20203.200%2C206.400%20203.200%20C%20205.067%20203.200%2C204.800%20203.333%2C204.800%20204.000%20C%20204.800%20204.533%2C204.533%20204.800%2C204.000%20204.800%20C%20203.333%20204.800%2C203.200%20205.067%2C203.200%20206.400%20C%20203.200%20207.733%2C203.067%20208.000%2C202.400%20208.000%20C%20201.602%20208.000%2C201.600%20208.267%2C201.600%20304.000%20L%20201.600%20400.000%20300.800%20400.000%20L%20400.000%20400.000%20400.000%20300.800%20L%20400.000%20201.600%20304.000%20201.600%20C%20208.267%20201.600%2C208.000%20201.602%2C208.000%20202.400%20%22%20stroke%3D%22none%22%20fill%3D%22%23e4e4e4%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3Cpath%20id%3D%22path2%22%20d%3D%22%22%20stroke%3D%22none%22%20fill%3D%22%23f4100f0%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3Cpath%20id%3D%22path3%22%20d%3D%22%22%20stroke%3D%22none%22%20fill%3D%22%23f4100f0%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3Cpath%20id%3D%22path4%22%20d%3D%22%22%20stroke%3D%22none%22%20fill%3D%22%23f4100f0%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");}.s1538eht[data-grow='true']{width:100%;height:100%;}
+.s101qxdc{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;max-width:100%;touch-action:none;display:block;grid-area:1 / 1;}.s101qxdc[data-grow='true']{width:100%;}
+.sa4oq48{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;max-width:100%;touch-action:none;display:block;grid-area:1 / 1;cursor:var(--sa4oq48-0);}.sa4oq48[data-grow='true']{width:100%;}
+.sq3bzv4{min-width:32px;height:32px;font-size:14px;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;box-sizing:border-box;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;background:none;border:none;cursor:pointer;border-radius:var(--font-radius);color:var(--font-color);margin:2px 4px;padding:0;}.sq3bzv4[data-selected='1']{color:var(--font-selected-color);background:var(--font-selected-bg);}.sq3bzv4[data-hidden='1']{visibility:hidden;}.sq3bzv4[data-disabled='1']{cursor:default;color:var(--font-disabled-color);background:var(--font-disabled-bg);}.sq3bzv4[data-selected='0'][data-disabled='0']{background:var(--font-bg);color:var(--font-color);}.sq3bzv4[data-selected='0'][data-disabled='0']:hover{color:var(--font-hover-color);background:var(--font-hover-bg);}.sq3bzv4[data-disabled='0']{cursor:pointer;}.sq3bzv4 svg{fill:currentColor;width:20px;height:20px;}.sq3bzv4 input{position:absolute;visibility:hidden;}
 .sst453j{width:100%;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:2px 6px;}
 .s1q5lsc2{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
 .s1dis2j8{-webkit-flex:1;-ms-flex:1;flex:1;text-align:left;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.s1dis2j8 + .s1q5lsc2{margin-left:12px;}
-.s1xzg253{position:absolute;z-index:3;background:var(--bg-color);bottom:100%;box-shadow:0 3px 8px rgb(0 0 0 / 24%);padding:4px;border-radius:8px;white-space:nowrap;}.s1xzg253[data-alignment='left']{left:0;margin:4px;}.s1xzg253[data-alignment='center']{left:50%;-webkit-transform:translate3d(-50%,0px,0px);-ms-transform:translate3d(-50%,0px,0px);transform:translate3d(-50%,0px,0px);margin:4px 0px;}.s1xzg253[data-alignment='right']{right:0;margin:4px;}
+.s1xzg253{position:absolute;z-index:3;background:var(--toolbar-bg);bottom:100%;box-shadow:0 3px 8px rgb(0 0 0 / 24%);padding:8px;border-radius:8px;white-space:nowrap;}.s1xzg253[data-alignment='left']{left:0;margin:4px;}.s1xzg253[data-alignment='center']{left:50%;-webkit-transform:translate3d(-50%,0px,0px);-ms-transform:translate3d(-50%,0px,0px);transform:translate3d(-50%,0px,0px);margin:4px 0px;}.s1xzg253[data-alignment='right']{right:0;margin:4px;}
 .s17qj3jh{margin-bottom:8px;margin-top:4px;font-size:18px;}
-.su3a8bs{display:inline-block;background:var(--bg-color);box-sizing:border-box;overflow-y:auto;min-width:200px;}
-.szboplp{border:3px solid transparent;padding:4px 0px;position:relative;background:var(--bg-color);box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}.szboplp[data-is-over='1']{border:3px dotted var(--btn-hover);}.szboplp[data-is-dragging='1']{opacity:0.4;}.szboplp[data-selected='1']{color:var(--text-color-selected);border:3px solid var(--bg-color-selected);}.szboplp[data-selected='0'][data-disabled='0']:hover{background:var(--btn-hover);}.szboplp[data-disabled='1']{opacity:0.25;cursor:default;}.szboplp[data-disabled='0']{cursor:move;}.szboplp > span{height:20px;}.szboplp > span > svg{fill:#8a8a8a;width:20px;height:20px;padding:0 16px;}
+.su3a8bs{display:inline-block;background:var(--toolbar-bg);box-sizing:border-box;overflow-y:auto;min-width:200px;}
+.szboplp{border:3px solid transparent;padding:4px 0px;position:relative;background:var(--toolbar-bg);box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}.szboplp[data-is-over='1']{border:3px dotted var(--font-hover-bg);}.szboplp[data-is-dragging='1']{opacity:0.4;}.szboplp[data-selected='1']{color:var(--font-selected-color);background:var(--font-selected-bg);}.szboplp[data-selected='0'][data-disabled='0']{background:var(--font-bg);color:var(--font-color);}.szboplp[data-selected='0'][data-disabled='0']:hover{color:var(--font-hover-color);background:var(--font-hover-bg);}.szboplp[data-disabled='1']{cursor:default;color:var(--font-disabled-color);background:var(--font-disabled-bg);}.szboplp[data-disabled='0']{cursor:move;}.szboplp > span{height:20px;}.szboplp > span > svg{fill:#8a8a8a;width:20px;height:20px;padding:0 16px;}
 .sff5xt[data-visible='false']{opacity:0.2;}
 .sj3bift[data-locked='false']{opacity:0.2;}
 .s10ip0a4[data-grid='false'] svg{opacity:0.2;}
 .s1j9uq9o{-webkit-flex:1;-ms-flex:1;flex:1;}
 .s156ddbb{bottom:0;left:unset;top:unset;max-height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
-.s11gt4hl{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow-y:auto;}.s11gt4hl hr{opacity:0.6;width:100%;border:none;border-top:1px solid var(--text-color);}
+.s11gt4hl{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow-y:auto;}
 .s13cxqhq{opacity:0.6;text-align:center;padding:12px 0px;}
 .s1bvz4xj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;bottom:unset;top:100%;}.s1bvz4xj[data-vertical='1']{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
 .siejlch{position:relative;display:inline-block;}
-.s1uphjfh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;bottom:unset;top:100%;}.s1uphjfh[data-vertical='1']{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.s1uphjfh hr{width:100%;border:none;border-top:1px solid var(--text-color);opacity:0.6;}
+.s1uphjfh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;bottom:unset;top:100%;}.s1uphjfh[data-vertical='1']{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
 .s1e5a6k5{position:relative;display:inline-block;}
 .s1c8tp02{z-index:3;position:absolute;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;left:0;right:0;bottom:0;top:0;}
-.svkxpz4{display:grid;background:var(--bg-color);box-shadow:0 3px 8px rgb(0 0 0 / 24%);padding:4px;border-radius:8px;white-space:nowrap;position:relative;}
+.svkxpz4{display:grid;background:var(--toolbar-bg);box-shadow:0 3px 8px rgb(0 0 0 / 24%);padding:12px;border-radius:8px;white-space:nowrap;position:relative;}
 .s1s9jyyg{position:absolute;left:0;top:0;right:0;bottom:0;background:#00000073;}
-.s95bkm9 form{grid-template-columns:3fr 1fr 1fr;}.s95bkm9 form input{color:var(--text-color);border:2px solid var(--text-color);outline:none;}
-.so6hnjf{-webkit-flex:1;-ms-flex:1;flex:1;position:relative;height:100%;text-align:center;max-height:72px;}
-.s1c1dllr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;max-height:36px;background:var(--bg-color);}
-.s1g032mh{display:inline-block;text-align:left;background:var(--bg-color);margin-right:36px;text-align:right;}.s1g032mh + *{position:absolute;right:0;bottom:36px;}
-.s4owjrv{grid-template-columns:1fr 1fr 1fr;}
+.s95bkm9 form{grid-template-columns:3fr 1fr 1fr;}.s95bkm9 form input{color:var(--font-color);border:1px solid var(--font-color);background:var(--toolbar-bg);outline:none;}
+.so6hnjf{-webkit-flex:1;-ms-flex:1;flex:1;position:relative;height:100%;text-align:center;max-height:36px;overflow:hidden;}
+.s1c1dllr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;max-height:36px;background:var(--toolbar-bg);border-bottom:1px solid var(--divider-color);box-sizing:border-box;}
+.s1g032mh{grid-template-columns:1fr 1fr 1fr;}
 .snh2jyk{width:24px;height:24px;box-sizing:border-box;border-radius:50%;border:1px solid gray;background:var(--snh2jyk-0);background-repeat:repeat;background-size:16px;}
-.sfm1cqx{width:36px;height:36px;box-sizing:border-box;border-radius:50%;color:var(--sfm1cqx-0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;font-size:48px;line-height:36px;position:relative;bottom:6px;font-weight:bold;}
-.sttf061{border-radius:50%;}
-.layoutPanelOpened .sj7hhjx{color:var(--text-color-selected);background:var(--bg-color-selected);}.sj7hhjx[data-hidden='1']{display:none;}
+.sfm1cqx{width:24px;height:24px;box-sizing:border-box;border-radius:50%;color:var(--sfm1cqx-0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;line-height:36px;font-weight:bold;}
+.layoutPanelOpened .sj7hhjx.sj7hhjx{color:var(--font-selected-color);background:var(--font-selected-bg);}.sj7hhjx[data-hidden='1']{display:none;}
 .s9mugpt{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
 .s1ktxhkr{padding:16px;}
 .smpmxx5{font-family:var(--smpmxx5-0);}
 
 .s1qssg4n{display:inline-block;width:6px;height:2px;background:transparent;vertical-align:middle;}
-.se26iq6{display:inline-block;}.se26iq6[data-type='0'] .s1qssg4n{background:black;}.se26iq6[data-type='1']{position:relative;left:3px;}.se26iq6[data-type='1'] .s1qssg4n:nth-child(3n-1){background:black;width:12px;}.se26iq6[data-type='1'] .s1qssg4n:nth-child(n+11){display:none;}.se26iq6[data-type='2'] .s1qssg4n:nth-child(2n+1){background:black;}
-.s1xxj4yl{position:absolute;left:0;top:50%;-webkit-transform:translate3d(-25%,-50%,0px);-ms-transform:translate3d(-25%,-50%,0px);transform:translate3d(-25%,-50%,0px);display:inline-block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:15px solid black;}
-.sbd6jc8{position:absolute;right:0;top:50%;-webkit-transform:translate3d(25%,-50%,0px);-ms-transform:translate3d(25%,-50%,0px);transform:translate3d(25%,-50%,0px);display:inline-block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:15px solid black;}
-.scawaat{position:relative;display:inline-block;width:60px;height:2px;background:black;vertical-align:middle;}.scawaat[data-type='0'] .s1xxj4yl,.scawaat[data-type='1'] .s1xxj4yl{display:none;}.scawaat[data-type='0'] .sbd6jc8,.scawaat[data-type='2'] .sbd6jc8{display:none;}
-.s16z54di{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:var(--bg-color);position:relative;}
+.se26iq6{display:inline-block;}.se26iq6[data-type='0'] .s1qssg4n{background:currentColor;}.se26iq6[data-type='1']{position:relative;left:3px;}.se26iq6[data-type='1'] .s1qssg4n:nth-child(3n-1){background:currentColor;width:12px;}.se26iq6[data-type='1'] .s1qssg4n:nth-child(n+11){display:none;}.se26iq6[data-type='2'] .s1qssg4n:nth-child(2n+1){background:currentColor;}
+.s1xxj4yl{position:absolute;left:0;top:50%;-webkit-transform:translate3d(-25%,-50%,0px);-ms-transform:translate3d(-25%,-50%,0px);transform:translate3d(-25%,-50%,0px);display:inline-block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:15px solid currentColor;}
+.sbd6jc8{position:absolute;right:0;top:50%;-webkit-transform:translate3d(25%,-50%,0px);-ms-transform:translate3d(25%,-50%,0px);transform:translate3d(25%,-50%,0px);display:inline-block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:15px solid currentColor;}
+.scawaat{position:relative;display:inline-block;width:60px;height:2px;background:currentColor;vertical-align:middle;}.scawaat[data-type='0'] .s1xxj4yl,.scawaat[data-type='1'] .s1xxj4yl{display:none;}.scawaat[data-type='0'] .sbd6jc8,.scawaat[data-type='2'] .sbd6jc8{display:none;}
+.s16z54di{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:var(--toolbar-bg);position:relative;height:36px;border-top:1px solid var(--divider-color);box-sizing:border-box;}
 .sa7lzh9{-webkit-flex:1;-ms-flex:1;flex:1;}
 .s1xssqat{display:inline-block;padding:12px 48px;margin:4px;max-width:calc(100% - 24px);overflow-wrap:break-word;box-sizing:border-box;-webkit-transition:all 500ms;transition:all 500ms;opacity:0;-webkit-transform:translate3d(0px,40px,0px);-ms-transform:translate3d(0px,40px,0px);transform:translate3d(0px,40px,0px);}.s1xssqat[data-type='0']{background:#646464;color:white;}.s1xssqat[data-type='1']{background:#c3a200;color:black;}.s1xssqat[data-type='2']{background:#911717;color:white;}.s1xssqat[data-type='3']{background:#088900;color:white;}.s1xssqat[data-is-shown='1']{opacity:1;-webkit-transform:translate3d(0px,0px,0px);-ms-transform:translate3d(0px,0px,0px);transform:translate3d(0px,0px,0px);}.s1xssqat[data-is-shown='0']{opacity:0;-webkit-transform:translate3d(0px,40px,0px);-ms-transform:translate3d(0px,40px,0px);transform:translate3d(0px,40px,0px);}
 .s1bgtt22{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;position:absolute;z-index:4;bottom:0;left:0;right:0;height:0px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
 .s9j48u3{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;z-index:2;top:0;bottom:0;left:0;right:0;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#00000050;-webkit-transition:opacity 300ms linear;transition:opacity 300ms linear;opacity:0;}.s9j48u3[data-loading='visible']{opacity:1;}
-.s4auclc{width:40px;height:40px;position:relative;-webkit-transform:rotate(10deg);-ms-transform:rotate(10deg);transform:rotate(10deg);-webkit-animation:react-paint-editor-rotation-s4auclc 1s infinite;animation:react-paint-editor-rotation-s4auclc 1s infinite;}@-webkit-keyframes react-paint-editor-rotation-s4auclc{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes react-paint-editor-rotation-s4auclc{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
+.s4auclc{width:40px;height:40px;position:relative;-webkit-transform:rotate(10deg);-ms-transform:rotate(10deg);transform:rotate(10deg);-webkit-animation:react-paint-rotation-s4auclc 1s infinite;animation:react-paint-rotation-s4auclc 1s infinite;}@-webkit-keyframes react-paint-rotation-s4auclc{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes react-paint-rotation-s4auclc{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
 .s1l3fbq{border-radius:50%;position:absolute;width:15px;height:15px;}.s1l3fbq:nth-child(1){left:0;background-color:#5c6bc0;}.s1l3fbq:nth-child(2){right:0;background-color:#8bc34a;}.s1l3fbq:nth-child(3){bottom:0;background-color:#ffb74d;}.s1l3fbq:nth-child(4){bottom:0;right:0;background-color:#f44336;}
-.s1v9piyg{--bg-color:white;--text-color:#364181;--btn-hover:#afd8d8;--bg-color-selected:#364181;--text-color-selected:white;--shrinkedcanvas-bg-color:white;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;color:var(--text-color);position:relative;overflow:hidden;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.s1v9piyg[data-grow='false']{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:var(--s1v9piyg-0);}.s1v9piyg[data-shrink='false']{min-width:var(--s1v9piyg-1);}
-.s6o5tmu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;position:relative;max-width:100%;z-index:1;aspect-ratio:var(--s6o5tmu-2);}.layoutPanelOpened .s6o5tmu{background:var(--shrinkedcanvas-bg-color);}.s6o5tmu[data-grow='true']{width:100%;}.s6o5tmu[data-grow='false']{width:var(--s6o5tmu-1);}
+.s1v9piyg{--toolbar-bg:var(--s1v9piyg-0);--divider-color:var(--s1v9piyg-1);--font-radius:var(--s1v9piyg-2);--font-disabled-color:var(--s1v9piyg-3);--font-disabled-bg:var(--s1v9piyg-4);--font-color:var(--s1v9piyg-5);--font-bg:var(--s1v9piyg-6);--font-selected-color:var(--s1v9piyg-7);--font-selected-bg:var(--s1v9piyg-8);--font-hover-color:var(--s1v9piyg-9);--font-hover-bg:var(--s1v9piyg-10);--canvas-bg:var(--s1v9piyg-11);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;color:var(--font-color);position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.s1v9piyg hr{width:100%;border:none;border-top:1px solid var(--divider-color);}.s1v9piyg[data-grow='false']{max-width:var(--s1v9piyg-12);}.s1v9piyg[data-shrink='false']{min-width:var(--s1v9piyg-13);}
+.s6o5tmu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;position:relative;max-width:100%;z-index:1;aspect-ratio:var(--s6o5tmu-2);}.s6o5tmu[data-grow='true']{width:100%;}.s6o5tmu[data-grow='false']{width:var(--s6o5tmu-1);}

package/dist/types/utils.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/utils/data.js

@@ -5,34 +5,41 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createShape = exports.createPicture = exports.copyShape = void 0;
+exports.roundValues = exports.createShape = exports.createPicture = exports.copyShape = exports.cleanShapesBeforeExport = exports.addDefaultAndTempShapeProps = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
 var _transform = require("./transform");
 
 var _Shapes = require("../types/Shapes");
 
+var _file = require("./file");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var createPicture = function createPicture(fileOrUrl, maxPictureSize) {
+var createPicture = function createPicture(fileOrUrl, maxPictureWidth, maxPictureHeight) {
   return new Promise(function (resolve, reject) {
     var img = new Image();
 
     img.onload = function () {
-      var maxSize = Math.min(Math.max(img.width, img.height), maxPictureSize);
-      var imgRatio = img.width / img.height;
+      var _fitContentInsideCont = (0, _transform.fitContentInsideContainer)(img.width, img.height, maxPictureWidth, maxPictureHeight, true),
+          _fitContentInsideCont2 = (0, _slicedToArray2["default"])(_fitContentInsideCont, 2),
+          width = _fitContentInsideCont2[0],
+          height = _fitContentInsideCont2[1];
+
       var pictureShape = {
         type: _Shapes.ShapeEnum.picture,
-        id: _fp["default"].uniqueId(_Shapes.ShapeEnum.picture),
-        x: 0,
-        y: 0,
-        width: imgRatio < 1 ? imgRatio * maxSize : maxSize,
-        height: imgRatio > 1 ? maxSize / imgRatio : maxSize,
+        id: _fp["default"].uniqueId("".concat(_Shapes.ShapeEnum.picture, "_")),
+        x: (maxPictureWidth - width) / 2,
+        y: (maxPictureHeight - height) / 2,
+        width: width,
+        height: height,
         src: img.src,
         img: img,
         translation: [0, 0],
@@ -66,7 +73,7 @@ var createShape = function createShape(ctx, shape, cursorPosition, defaultConf)
     case _Shapes.ShapeEnum.brush:
       return {
         type: _Shapes.ShapeEnum.brush,
-        id: _fp["default"].uniqueId(shape),
+        id: _fp["default"].uniqueId("".concat(shape, "_")),
         points: [[cursorPosition]],
         translation: [0, 0],
         rotation: 0,
@@ -76,7 +83,7 @@ var createShape = function createShape(ctx, shape, cursorPosition, defaultConf)
     case _Shapes.ShapeEnum.line:
       return {
         type: _Shapes.ShapeEnum.line,
-        id: _fp["default"].uniqueId(shape),
+        id: _fp["default"].uniqueId("".concat(shape, "_")),
         points: [cursorPosition, cursorPosition],
         translation: [0, 0],
         rotation: 0,
@@ -86,7 +93,7 @@ var createShape = function createShape(ctx, shape, cursorPosition, defaultConf)
     case _Shapes.ShapeEnum.polygon:
       return {
         type: _Shapes.ShapeEnum.polygon,
-        id: _fp["default"].uniqueId(shape),
+        id: _fp["default"].uniqueId("".concat(shape, "_")),
         points: _fp["default"].flow(_fp["default"].range(0), _fp["default"].map(function () {
           return cursorPosition;
         }))((_defaultConf$style$po = (_defaultConf$style = defaultConf.style) === null || _defaultConf$style === void 0 ? void 0 : _defaultConf$style.pointsCount) !== null && _defaultConf$style$po !== void 0 ? _defaultConf$style$po : 3),
@@ -98,7 +105,7 @@ var createShape = function createShape(ctx, shape, cursorPosition, defaultConf)
     case _Shapes.ShapeEnum.curve:
       return {
         type: _Shapes.ShapeEnum.curve,
-        id: _fp["default"].uniqueId(shape),
+        id: _fp["default"].uniqueId("".concat(shape, "_")),
         points: _fp["default"].flow(_fp["default"].range(0), _fp["default"].map(function () {
           return cursorPosition;
         }))((_defaultConf$style$po2 = (_defaultConf$style2 = defaultConf.style) === null || _defaultConf$style2 === void 0 ? void 0 : _defaultConf$style2.pointsCount) !== null && _defaultConf$style$po2 !== void 0 ? _defaultConf$style$po2 : 3),
@@ -111,7 +118,7 @@ var createShape = function createShape(ctx, shape, cursorPosition, defaultConf)
     case _Shapes.ShapeEnum.square:
       return {
         type: shape,
-        id: _fp["default"].uniqueId(shape),
+        id: _fp["default"].uniqueId("".concat(shape, "_")),
         x: cursorPosition[0],
         y: cursorPosition[1],
         width: 1,
@@ -126,7 +133,7 @@ var createShape = function createShape(ctx, shape, cursorPosition, defaultConf)
       var fontSize = (0, _transform.calculateTextFontSize)(ctx, defaultValue, 50, (_defaultConf$style3 = defaultConf.style) === null || _defaultConf$style3 === void 0 ? void 0 : _defaultConf$style3.fontFamily);
       return {
         type: _Shapes.ShapeEnum.text,
-        id: _fp["default"].uniqueId(shape),
+        id: _fp["default"].uniqueId("".concat(shape, "_")),
         x: cursorPosition[0],
         y: cursorPosition[1],
         value: defaultValue,
@@ -141,7 +148,7 @@ var createShape = function createShape(ctx, shape, cursorPosition, defaultConf)
     case _Shapes.ShapeEnum.ellipse:
       return {
         type: _Shapes.ShapeEnum.ellipse,
-        id: _fp["default"].uniqueId(shape),
+        id: _fp["default"].uniqueId("".concat(shape, "_")),
         x: cursorPosition[0],
         y: cursorPosition[1],
         radiusX: 0,
@@ -155,7 +162,7 @@ var createShape = function createShape(ctx, shape, cursorPosition, defaultConf)
     default:
       return {
         type: _Shapes.ShapeEnum.circle,
-        id: _fp["default"].uniqueId(shape),
+        id: _fp["default"].uniqueId("".concat(shape, "_")),
         x: cursorPosition[0],
         y: cursorPosition[1],
         radius: 0,
@@ -170,9 +177,54 @@ exports.createShape = createShape;
 
 var copyShape = function copyShape(shape) {
   return _objectSpread(_objectSpread({}, shape), {}, {
-    id: _fp["default"].uniqueId(shape.type),
+    id: _fp["default"].uniqueId("".concat(shape.type, "_")),
     translation: [shape.translation[0] + 20, shape.translation[1] + 20]
   });
 };
 
-exports.copyShape = copyShape;
+exports.copyShape = copyShape;
+
+var roundValues = function roundValues(prop) {
+  var precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+
+  if (_fp["default"].isArray(prop)) {
+    return prop.map(roundValues);
+  }
+
+  if (_fp["default"].isObject(prop)) {
+    return _fp["default"].mapValues(roundValues, prop);
+  }
+
+  if (_fp["default"].isNumber(prop)) {
+    return +prop.toFixed(precision);
+  }
+
+  return prop;
+};
+
+exports.roundValues = roundValues;
+
+var cleanShapesBeforeExport = function cleanShapesBeforeExport(shapes) {
+  var propsToOmit = ['img', 'id'];
+  return shapes.map(function (shape) {
+    if (shape.type === _Shapes.ShapeEnum.picture) {
+      if (!shape.src.startsWith('http')) {
+        return roundValues(_fp["default"].omit(propsToOmit, _objectSpread(_objectSpread({}, shape), {}, {
+          src: (0, _file.getBase64Image)(shape.img)
+        })));
+      }
+    }
+
+    return roundValues(_fp["default"].omit(propsToOmit, shape));
+  });
+};
+
+exports.cleanShapesBeforeExport = cleanShapesBeforeExport;
+
+var addDefaultAndTempShapeProps = function addDefaultAndTempShapeProps(shape) {
+  return _objectSpread(_objectSpread({}, shape), {}, {
+    id: _fp["default"].uniqueId("".concat(shape.type, "_"))
+  });
+};
+
+exports.addDefaultAndTempShapeProps = addDefaultAndTempShapeProps;