@yorab/react-paint 0.3.0 → 0.4.2

package/dist/components/toolbox/Toolbar.js

@@ -39,6 +39,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+var ACTIONS_MENU_BREAKPOINT = 400;
+var TOOLS_MENU_BREAKPOINT = 240;
 var StyledShrinkableTools = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledShrinkableTools",
   "class": "so6hnjf"
@@ -47,33 +49,27 @@ var StyledToolbox = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledToolbox",
   "class": "s1c1dllr"
 });
-var StyledShrinkableToolsInner = /*#__PURE__*/(0, _react2.styled)("div")({
-  name: "StyledShrinkableToolsInner",
-  "class": "s1g032mh"
-});
 var StyledToolsModal = /*#__PURE__*/(0, _react2.styled)(_Modal["default"])({
   name: "StyledToolsModal",
-  "class": "s4owjrv"
+  "class": "s1g032mh"
 });
 var TOOLBAR_STRUCTURE = [{
   title: 'brush',
-  img: _icons.gestureIcon,
   tools: [_Shapes.ShapeEnum.brush],
   vertical: false
 }, {
   title: 'lines',
-  img: _icons.arrowIcon,
   tools: [_Shapes.ShapeEnum.line, _Shapes.ShapeEnum.curve, _Shapes.ShapeEnum.polygon],
   vertical: false
 }, {
   title: 'shapes',
-  img: _icons.shapesIcon,
   tools: [_Shapes.ShapeEnum.rect, _Shapes.ShapeEnum.square, _Shapes.ShapeEnum.circle, _Shapes.ShapeEnum.ellipse],
   vertical: false
 }, _Shapes.ShapeEnum.text];
 
 var Toolbar = function Toolbar(_ref) {
-  var _ref$disabled = _ref.disabled,
+  var width = _ref.width,
+      _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       activeTool = _ref.activeTool,
       _ref$hasActionToUndo = _ref.hasActionToUndo,
@@ -82,6 +78,8 @@ var Toolbar = function Toolbar(_ref) {
       hasActionToRedo = _ref$hasActionToRedo === void 0 ? false : _ref$hasActionToRedo,
       _ref$hasActionToClear = _ref.hasActionToClear,
       hasActionToClear = _ref$hasActionToClear === void 0 ? false : _ref$hasActionToClear,
+      withLoadAndSave = _ref.withLoadAndSave,
+      withExport = _ref.withExport,
       clearCanvas = _ref.clearCanvas,
       setActiveToolFromProps = _ref.setActiveTool,
       undoAction = _ref.undoAction,
@@ -102,6 +100,16 @@ var Toolbar = function Toolbar(_ref) {
       isPictureUrlModalOpen = _useState4[0],
       setIsPictureUrlModalOpen = _useState4[1];
 
+  var _useState5 = (0, _react.useState)(width < ACTIONS_MENU_BREAKPOINT),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      actionsInMenu = _useState6[0],
+      setActionsInMenu = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(width < TOOLS_MENU_BREAKPOINT),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      toolsInMenu = _useState8[0],
+      setToolsInMenu = _useState8[1];
+
   var toggleTools = function toggleTools() {
     setIsMenuOpen(function (prev) {
       return !prev;
@@ -123,15 +131,44 @@ var Toolbar = function Toolbar(_ref) {
     setIsMenuOpen(false);
   };
 
+  (0, _react.useEffect)(function () {
+    setActionsInMenu(width < ACTIONS_MENU_BREAKPOINT);
+    setToolsInMenu(width < TOOLS_MENU_BREAKPOINT);
+  }, [width]);
   var currentStructure = (0, _toolbar.getCurrentStructure)(availableTools, TOOLBAR_STRUCTURE);
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(StyledToolbox, null, /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
+  var isAnyToolSelected = availableTools.includes(activeTool);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(StyledToolbox, null, /*#__PURE__*/_react["default"].createElement(_MenuGroup["default"], {
+    withActionsInMenu: actionsInMenu,
+    disabled: disabled,
+    vertical: true,
+    alignment: "left",
+    group: {
+      title: 'Menu',
+      img: _icons.menuIcon
+    },
+    activeTool: activeTool,
+    addPicture: addPicture,
+    loadFile: loadFile,
+    saveFile: saveFile,
+    togglePictureUrlModal: openPictureUrlModal,
+    exportCanvasInFile: exportCanvasInFile,
+    availableTools: availableTools,
+    withLoadAndSave: withLoadAndSave,
+    withExport: withExport,
+    hasActionToUndo: hasActionToUndo,
+    hasActionToRedo: hasActionToRedo,
+    hasActionToClear: hasActionToClear,
+    undoAction: undoAction,
+    redoAction: redoAction,
+    clearCanvas: clearCanvas
+  }), /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
     type: _Shapes.ToolEnum.selection,
     disabled: disabled,
     lib: "selection",
     img: _icons.selectIcon,
     isActive: activeTool === _Shapes.ToolEnum.selection,
     setActive: setActiveTool
-  }), /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
+  }), !actionsInMenu && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
     type: _Shapes.ToolEnum.undo,
     disabled: disabled || !hasActionToUndo,
     lib: "Undo",
@@ -154,7 +191,13 @@ var Toolbar = function Toolbar(_ref) {
     setActive: function setActive() {
       return clearCanvas();
     }
-  }), /*#__PURE__*/_react["default"].createElement(StyledShrinkableTools, null, /*#__PURE__*/_react["default"].createElement(StyledShrinkableToolsInner, null, currentStructure.map(function (group, i) {
+  })), /*#__PURE__*/_react["default"].createElement(StyledShrinkableTools, null, toolsInMenu ? /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    disabled: disabled,
+    onClick: toggleTools,
+    title: "Toggle tools",
+    icon: _icons.shapesIcon,
+    selected: isAnyToolSelected
+  }) : currentStructure.map(function (group, i) {
     return /*#__PURE__*/_react["default"].createElement(_ToolbarGroup["default"], {
       disabled: disabled,
       key: i,
@@ -162,27 +205,7 @@ var Toolbar = function Toolbar(_ref) {
       group: group,
       setActiveTool: setActiveTool
     });
-  })), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-    disabled: disabled,
-    onClick: toggleTools,
-    title: "Toggle tools",
-    icon: _icons.dotsIcon
-  })), /*#__PURE__*/_react["default"].createElement(_MenuGroup["default"], {
-    disabled: disabled,
-    vertical: true,
-    alignment: "right",
-    group: {
-      title: 'Menu',
-      img: _icons.menuIcon
-    },
-    activeTool: activeTool,
-    addPicture: addPicture,
-    loadFile: loadFile,
-    saveFile: saveFile,
-    togglePictureUrlModal: openPictureUrlModal,
-    exportCanvasInFile: exportCanvasInFile,
-    availableTools: availableTools
-  })), isMenuOpen && /*#__PURE__*/_react["default"].createElement(StyledToolsModal, {
+  }))), isMenuOpen && /*#__PURE__*/_react["default"].createElement(StyledToolsModal, {
     onClose: toggleTools
   }, availableTools.map(function (toolType) {
     return toolType === _Shapes.ShapeEnum.picture ? null : /*#__PURE__*/_react["default"].createElement(_Tool["default"], {

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/useComponent.js

@@ -28,8 +28,12 @@ var useComponent = function useComponent(_ref) {
     if (disabled) {
       setIsInsideComponent(false);
     } else {
-      document.addEventListener('mousedown', onDetectClick);
-      document.addEventListener('touchstart', onDetectClick);
+      document.addEventListener('mousedown', onDetectClick, {
+        passive: true
+      });
+      document.addEventListener('touchstart', onDetectClick, {
+        passive: true
+      });
     }
 
     return function () {

package/dist/hooks/useDrawableCanvas.js

@@ -25,7 +25,7 @@ var _transform = require("../utils/transform");
 
 var _data = require("../utils/data");
 
-var handleMove = function handleMove(e, canvasRef, activeTool, canvasOffset, selectedShape, selectionMode, canvasOffsetStartPosition, width, height, scaleRatio, 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, scaleRatio);
 
@@ -37,7 +37,7 @@ var handleMove = function handleMove(e, canvasRef, activeTool, canvasOffset, sel
   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, scaleRatio, true) || {
+    var positionIntersection = (0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset, selectionPadding, scaleRatio, true) || {
       mode: _Mode.SelectionModeLib["default"]
     };
     setHoverMode(positionIntersection);
@@ -47,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);
@@ -75,7 +75,8 @@ 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;
@@ -90,7 +91,7 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
   (0, _react.useEffect)(function () {
     var handleMouseMove = function handleMouseMove(e) {
       return window.requestAnimationFrame(function () {
-        return handleMove(e, selectionCanvasRef, activeTool, canvasOffset, selectedShape, selectionMode, canvasOffsetStartPosition, width, height, scaleRatio, setHoverMode, updateSingleShape, setCanvasOffset, setSelectedShape);
+        return handleMove(e, selectionCanvasRef, activeTool, canvasOffset, selectedShape, selectionMode, canvasOffsetStartPosition, width, height, scaleRatio, setHoverMode, updateSingleShape, setCanvasOffset, setSelectedShape, selectionPadding);
       });
     };
 
@@ -105,7 +106,7 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
         document.removeEventListener('touchmove', handleMouseMove);
       }
     };
-  }, [isInsideComponent, selectionCanvasRef, selectedShape, selectionMode, setHoverMode, canvasOffset, canvasOffsetStartPosition, width, height, scaleRatio, 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;
@@ -159,7 +160,7 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
       var cursorPosition = (0, _intersect.getCursorPosition)(e, selectionCanvasRef.current, width, height, scaleRatio);
 
       if (activeTool === _Shapes.ToolEnum.selection) {
-        var _selectShape = (0, _selection.selectShape)(shapes, cursorPosition, scaleRatio, canvasOffset, selectedShape),
+        var _selectShape = (0, _selection.selectShape)(shapes, cursorPosition, scaleRatio, canvasOffset, selectedShape, selectionPadding),
             shape = _selectShape.shape,
             mode = _selectShape.mode;
 
@@ -207,13 +208,17 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
       }
     };
 
-    ref.addEventListener('mousedown', handleMouseDown);
-    ref.addEventListener('touchstart', handleMouseDown);
+    ref.addEventListener('mousedown', handleMouseDown, {
+      passive: false
+    });
+    ref.addEventListener('touchstart', handleMouseDown, {
+      passive: false
+    });
     return function () {
       ref.removeEventListener('mousedown', handleMouseDown);
       ref.removeEventListener('touchstart', handleMouseDown);
     };
-  }, [disabled, selectionCanvasRef, drawCanvasRef, selectedShape, activeTool, canvasOffset, setCanvasOffsetStartPosition, shapes, defaultConf, width, height, scaleRatio, 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;
@@ -223,7 +228,7 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
         if ((selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) === _Shapes.ShapeEnum.text) {
           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
@@ -242,7 +247,7 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
         ref.removeEventListener('dblclick', handleDoubleClick);
       }
     };
-  }, [isInsideComponent, selectionCanvasRef, activeTool, selectedShape, width, height, scaleRatio, canvasOffset, setSelectionMode]);
+  }, [isInsideComponent, selectionCanvasRef, activeTool, selectedShape, width, height, scaleRatio, canvasOffset, setSelectionMode, selectionPadding]);
   return {
     hoverMode: hoverMode
   };

package/dist/hooks/useShapes.js

@@ -78,9 +78,10 @@ var useShapes = function useShapes() {
             case 4:
               pictureShape = _context.sent;
               addShape(pictureShape);
+              saveShapes();
               return _context.abrupt("return", pictureShape);
 
-            case 7:
+            case 8:
             case "end":
               return _context.stop();
           }
@@ -91,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) {

package/dist/styles.css

@@ -31,19 +31,19 @@
   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: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;}
+.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);background: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;}
@@ -53,35 +53,33 @@
 .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:12px;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);border-bottom:1px solid var(--border-color);box-sizing:border-box;}
-.s1g032mh{display:inline-block;text-align:left;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;height:36px;}
+.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;height:36px;border-top:1px solid var(--border-color);box-sizing:border-box;}
+.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-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;--border-color:#36418129;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 hr{width:100%;border:none;border-top:1px solid var(--border-color);}.s1v9piyg[data-grow='false']{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

@@ -28,7 +28,7 @@ var createPicture = function createPicture(fileOrUrl, maxPictureWidth, maxPictur
     var img = new Image();
 
     img.onload = function () {
-      var _fitContentInsideCont = (0, _transform.fitContentInsideContainer)(img.width, img.height, maxPictureWidth, maxPictureHeight),
+      var _fitContentInsideCont = (0, _transform.fitContentInsideContainer)(img.width, img.height, maxPictureWidth, maxPictureHeight, true),
           _fitContentInsideCont2 = (0, _slicedToArray2["default"])(_fitContentInsideCont, 2),
           width = _fitContentInsideCont2[0],
           height = _fitContentInsideCont2[1];