@yorab/react-paint 0.6.6 → 0.7.2

package/dist/components/settings/Layouts.js

@@ -27,7 +27,7 @@ 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; }
 
-const StyledLayouts = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledLayouts = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledLayouts",
   class: "su3a8bs"
 });
@@ -35,7 +35,7 @@ const StyledRemoveButton = /*#__PURE__*/(0, _react2.styled)(_Button.default)({
   name: "StyledRemoveButton",
   class: "szboplp"
 });
-const StyledLayout = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledLayout = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledLayout",
   class: "sff5xt"
 });
@@ -51,22 +51,34 @@ const StyledGridButton = /*#__PURE__*/(0, _react2.styled)(_Button.default)({
   name: "StyledGridButton",
   class: "s1j9uq9o"
 });
-const StyledSeparator = /*#__PURE__*/(0, _react2.styled)("div")({
-  name: "StyledSeparator",
+const StyledSubtitle = /*#__PURE__*/(0, _react2.styled)('span')({
+  name: "StyledSubtitle",
   class: "s156ddbb"
 });
-const StyledPanelLayouts = /*#__PURE__*/(0, _react2.styled)(_Panel.default)({
-  name: "StyledPanelLayouts",
+const StyledSeparator = /*#__PURE__*/(0, _react2.styled)('div')({
+  name: "StyledSeparator",
   class: "s11gt4hl"
 });
-const StyledScrollingContent = /*#__PURE__*/(0, _react2.styled)("div")({
-  name: "StyledScrollingContent",
+const StyledPanel = /*#__PURE__*/(0, _react2.styled)(_Panel.default)({
+  name: "StyledPanel",
   class: "s13cxqhq"
 });
-const StyledPlaceholder = /*#__PURE__*/(0, _react2.styled)("div")({
-  name: "StyledPlaceholder",
+const StyledPanelContent = /*#__PURE__*/(0, _react2.styled)('div')({
+  name: "StyledPanelContent",
   class: "s1idv8qv"
 });
+const StyledScrollingContent = /*#__PURE__*/(0, _react2.styled)('div')({
+  name: "StyledScrollingContent",
+  class: "s1mhvlda"
+});
+const StyledRow = /*#__PURE__*/(0, _react2.styled)('div')({
+  name: "StyledRow",
+  class: "sr4amic"
+});
+const StyledPlaceholder = /*#__PURE__*/(0, _react2.styled)('div')({
+  name: "StyledPlaceholder",
+  class: "s13llc5i"
+});
 
 const Layout = _ref => {
   let {
@@ -158,8 +170,8 @@ const Layout = _ref => {
 
 const Layouts = _ref2 => {
   let {
-    withGrid,
-    setWithGrid,
+    gridFormat,
+    setGridFormat,
     disabled = false,
     shapes,
     removeShape,
@@ -171,21 +183,19 @@ const Layouts = _ref2 => {
     isLayoutPanelShown
   } = _ref2;
   const [layoutDragging, setLayoutDragging] = (0, _react.useState)(undefined);
-
-  const onToggleGrid = () => {
-    setWithGrid(prev => !prev);
-  };
-
-  return isLayoutPanelShown ? /*#__PURE__*/_react.default.createElement(StyledPanelLayouts, {
-    title: "Layers",
+  return isLayoutPanelShown ? /*#__PURE__*/_react.default.createElement(StyledPanel, {
     alignment: "right"
-  }, /*#__PURE__*/_react.default.createElement(StyledScrollingContent, null, /*#__PURE__*/_react.default.createElement(StyledGridButton, {
-    title: withGrid ? 'Grid on' : 'Grid off',
-    "data-grid": withGrid,
+  }, /*#__PURE__*/_react.default.createElement(StyledPanelContent, null, /*#__PURE__*/_react.default.createElement(StyledScrollingContent, null, /*#__PURE__*/_react.default.createElement(StyledRow, null, /*#__PURE__*/_react.default.createElement(StyledSubtitle, null, "Grid"), /*#__PURE__*/_react.default.createElement(StyledGridButton, {
+    icon: _icons.gridOffIcon,
+    selected: gridFormat === 0,
+    disabled: disabled,
+    onClick: () => setGridFormat(0)
+  }), ['S', 'M', 'L'].map((value, index) => /*#__PURE__*/_react.default.createElement(StyledGridButton, {
+    key: value,
+    selected: gridFormat === index + 1,
     disabled: disabled,
-    onClick: onToggleGrid,
-    icon: withGrid ? _icons.gridOnIcon : _icons.gridOffIcon
-  }, "Toggle grid"), /*#__PURE__*/_react.default.createElement("hr", null), /*#__PURE__*/_react.default.createElement(StyledLayouts, null, shapes.length === 0 ? /*#__PURE__*/_react.default.createElement(StyledPlaceholder, null, "No layer yet") : _fp.default.map(shape => /*#__PURE__*/_react.default.createElement(Layout, {
+    onClick: () => setGridFormat(index + 1)
+  }, value))), /*#__PURE__*/_react.default.createElement("hr", null), /*#__PURE__*/_react.default.createElement(StyledLayouts, null, shapes.length === 0 ? /*#__PURE__*/_react.default.createElement(StyledPlaceholder, null, "No layer yet") : _fp.default.map(shape => /*#__PURE__*/_react.default.createElement(Layout, {
     key: shape.id,
     shape: shape,
     disabled: disabled,
@@ -197,7 +207,7 @@ const Layouts = _ref2 => {
     onMoveShapes: moveShapes,
     toggleShapeVisibility: toggleShapeVisibility,
     toggleShapeLock: toggleShapeLock
-  }), shapes)))) : null;
+  }), shapes))))) : null;
 };
 
 var _default = Layouts;

package/dist/components/settings/LineArrowField.js

@@ -17,15 +17,15 @@ var _fp = _interopRequireDefault(require("lodash/fp"));
 
 var _icons = require("../../constants/icons");
 
-const StyledLeftTriangle = /*#__PURE__*/(0, _react2.styled)("span")({
+const StyledLeftTriangle = /*#__PURE__*/(0, _react2.styled)('span')({
   name: "StyledLeftTriangle",
   class: "s1xxj4yl"
 });
-const StyledRightTriangle = /*#__PURE__*/(0, _react2.styled)("span")({
+const StyledRightTriangle = /*#__PURE__*/(0, _react2.styled)('span')({
   name: "StyledRightTriangle",
   class: "sbd6jc8"
 });
-const StyledOption = /*#__PURE__*/(0, _react2.styled)("span")({
+const StyledOption = /*#__PURE__*/(0, _react2.styled)('span')({
   name: "StyledOption",
   class: "scawaat"
 });

package/dist/components/settings/LineTypeField.js

@@ -17,11 +17,11 @@ var _fp = _interopRequireDefault(require("lodash/fp"));
 
 var _icons = require("../../constants/icons");
 
-const StyledLine = /*#__PURE__*/(0, _react2.styled)("span")({
+const StyledLine = /*#__PURE__*/(0, _react2.styled)('span')({
   name: "StyledLine",
   class: "s1qssg4n"
 });
-const StyledOption = /*#__PURE__*/(0, _react2.styled)("span")({
+const StyledOption = /*#__PURE__*/(0, _react2.styled)('span')({
   name: "StyledOption",
   class: "se26iq6"
 });

package/dist/components/settings/RangeField.js

@@ -21,7 +21,7 @@ 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; }
 
-const StyledLabel = /*#__PURE__*/(0, _react2.styled)("label")({
+const StyledLabel = /*#__PURE__*/(0, _react2.styled)('label')({
   name: "StyledLabel",
   class: "s9mugpt"
 });

package/dist/components/settings/SelectField.js

@@ -25,7 +25,7 @@ const StyledButton = /*#__PURE__*/(0, _react2.styled)(_Button.default)({
   name: "StyledButton",
   class: "s1ktxhkr"
 });
-const StyleWrapper = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyleWrapper = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyleWrapper",
   class: "s5sp14o"
 });

package/dist/components/settings/SettingsBar.js

@@ -39,16 +39,18 @@ var _Button = _interopRequireDefault(require("../common/Button"));
 
 var _Modal = _interopRequireDefault(require("../common/Modal"));
 
+var _text = require("../../utils/shapes/text");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 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; }
 
 const SETTING_WIDTH = 40;
-const StyledSettingsBar = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledSettingsBar = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledSettingsBar",
   class: "s16z54di"
 });
-const StyledSeparator = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledSeparator = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledSeparator",
   class: "sa7lzh9"
 });
@@ -250,7 +252,7 @@ const SettingsItems = _ref => {
     step: activeTool.settings.opacity.step,
     unity: "%",
     disabled: disabled,
-    field: "globalAlpha",
+    field: "opacity",
     value: activeTool.settings.opacity.default,
     valueChanged: handleShapeStyleChange
   })) : null;
@@ -289,7 +291,7 @@ const SettingsBar = _ref2 => {
   const handleShapeStyleChange = (field, value) => {
     if (selectedShape) {
       updateShape(_fp.default.set(['style', field], value, selectedShape), true);
-      updateToolSettings(selectedShape.toolId, field, value);
+      updateToolSettings(selectedShape.toolId || activeTool.id, field, value);
     } else {
       updateToolSettings(activeTool.id, field, value);
     }
@@ -304,13 +306,13 @@ const SettingsBar = _ref2 => {
 
       const newShape = _fp.default.set(['style', field], value, selectedShape);
 
-      const fontSize = (0, _transform.calculateTextFontSize)(ctx, newShape.value, newShape.width, (_newShape$style$fontB = (_newShape$style = newShape.style) === null || _newShape$style === void 0 ? void 0 : _newShape$style.fontBold) !== null && _newShape$style$fontB !== void 0 ? _newShape$style$fontB : false, (_newShape$style$fontI = (_newShape$style2 = newShape.style) === null || _newShape$style2 === void 0 ? void 0 : _newShape$style2.fontItalic) !== null && _newShape$style$fontI !== void 0 ? _newShape$style$fontI : false, (_newShape$style3 = newShape.style) === null || _newShape$style3 === void 0 ? void 0 : _newShape$style3.fontFamily);
+      const fontSize = (0, _text.calculateTextFontSize)(ctx, newShape.value, newShape.width, (_newShape$style$fontB = (_newShape$style = newShape.style) === null || _newShape$style === void 0 ? void 0 : _newShape$style.fontBold) !== null && _newShape$style$fontB !== void 0 ? _newShape$style$fontB : false, (_newShape$style$fontI = (_newShape$style2 = newShape.style) === null || _newShape$style2 === void 0 ? void 0 : _newShape$style2.fontItalic) !== null && _newShape$style$fontI !== void 0 ? _newShape$style$fontI : false, (_newShape$style3 = newShape.style) === null || _newShape$style3 === void 0 ? void 0 : _newShape$style3.fontFamily);
       const resizedShape = { ...newShape,
         fontSize,
         height: fontSize * newShape.value.length
       };
       updateShape(resizedShape, true);
-      updateToolSettings(selectedShape.toolId, field, value);
+      updateToolSettings(selectedShape.toolId || activeTool.id, field, value);
     } else {
       updateToolSettings(activeTool.id, field, value);
     }
@@ -319,7 +321,7 @@ const SettingsBar = _ref2 => {
   const handlePolygonLinesCount = (field, value) => {
     if (selectedShape) {
       updateShape((0, _transform.updatePolygonLinesCount)(selectedShape, value), true);
-      updateToolSettings(selectedShape.toolId, field, value);
+      updateToolSettings(selectedShape.toolId || activeTool.id, field, value);
     } else {
       updateToolSettings(activeTool.id, field, value);
     }

package/dist/components/toolbox/EditTextBox.js

@@ -11,19 +11,17 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@linaria/react");
 
-var _intersect = require("../../utils/intersect");
-
-var _shapeData = require("../../utils/shapeData");
-
 var _string = require("../../utils/string");
 
-var _transform = require("../../utils/transform");
+var _shapes = require("../../utils/shapes");
+
+var _trigo = require("../../utils/trigo");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 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; }
 
-const StyledEditBox = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledEditBox = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledEditBox",
   class: "s1unz6yq",
   vars: {
@@ -75,9 +73,11 @@ const EditTextBox = _ref7 => {
     shape,
     defaultValue,
     updateValue,
+    saveShapes,
     selectionPadding
   } = _ref7;
   const ref = (0, _react.useRef)(null);
+  const saveShapesRef = (0, _react.useRef)(saveShapes);
 
   const updateContentEditable = e => {
     updateValue((0, _string.convertDivContentToStringArray)(e.target.innerHTML));
@@ -102,16 +102,26 @@ const EditTextBox = _ref7 => {
       currentNode.removeEventListener('paste', handlePaste);
     };
   }, [defaultValue]);
+  (0, _react.useEffect)(() => {
+    const saveText = saveShapesRef.current;
+    return () => {
+      saveText();
+    };
+  }, []);
   const position = (0, _react.useMemo)(() => {
     const {
       borders,
       center
-    } = (0, _shapeData.getShapeInfos)(shape, selectionPadding);
-    return (0, _intersect.getPointPositionBeforeCanvasTransformation)([borders.x, borders.y], [-shape.translation[0], -shape.translation[1]], shape.rotation, center);
+    } = (0, _shapes.getShapeInfos)(shape, selectionPadding);
+    return (0, _trigo.rotatePoint)({
+      point: [borders.x, borders.y],
+      rotation: -shape.rotation,
+      origin: center
+    });
   }, [shape, selectionPadding]);
   return /*#__PURE__*/_react.default.createElement(StyledEditBox, {
     ref: ref,
-    transform: "translate3D(".concat(position[0] * scaleRatio, "px, ").concat(position[1] * scaleRatio, "px, 0) rotate(").concat((0, _transform.radiansToDegrees)(shape.rotation), "deg)"),
+    transform: "translate3D(".concat(position[0] * scaleRatio, "px, ").concat(position[1] * scaleRatio, "px, 0) rotate(").concat((0, _trigo.radiansToDegrees)(shape.rotation), "deg)"),
     fontsize: shape.fontSize * scaleRatio,
     padding: selectionPadding * scaleRatio,
     color: (_shape$style$strokeCo = (_shape$style = shape.style) === null || _shape$style === void 0 ? void 0 : _shape$style.strokeColor) !== null && _shape$style$strokeCo !== void 0 ? _shape$style$strokeCo : 'inherit',

package/dist/components/toolbox/MenuGroup.js

@@ -29,11 +29,11 @@ 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; }
 
-const StyledPanel = /*#__PURE__*/(0, _react2.styled)(_Panel.default)({
-  name: "StyledPanel",
+const StyledPanelContent = /*#__PURE__*/(0, _react2.styled)('div')({
+  name: "StyledPanelContent",
   class: "s1uphjfh"
 });
-const StyledRelative = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledRelative = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledRelative",
   class: "s1e5a6k5"
 });
@@ -105,9 +105,11 @@ const MenuGroup = _ref => {
     disabled: disabled,
     onClick: openPanel,
     icon: groupIcon
-  }), isOpen && /*#__PURE__*/_react.default.createElement(StyledPanel, {
-    vertical: vertical,
-    alignment: alignment
+  }), isOpen && /*#__PURE__*/_react.default.createElement(_Panel.default, {
+    alignment: alignment,
+    position: "top"
+  }, /*#__PURE__*/_react.default.createElement(StyledPanelContent, {
+    "data-vertical": +vertical
   }, withActionsInMenu && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Tool.default, {
     withText: true,
     type: _tools.UNDO_TOOL,
@@ -164,7 +166,7 @@ const MenuGroup = _ref => {
     img: _tools.EXPORT_TOOL.icon,
     isActive: activeTool.id === _tools.EXPORT_TOOL.id,
     setActive: exportCanvasInFile
-  }))) : null;
+  })))) : null;
 };
 
 var _default = MenuGroup;

package/dist/components/toolbox/Toolbar.js

@@ -13,8 +13,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@linaria/react");
 
-var _Shapes = require("../../types/Shapes");
-
 var _Button = _interopRequireDefault(require("../common/Button"));
 
 var _toolbar = require("../../utils/toolbar");
@@ -38,11 +36,11 @@ 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; }
 
 const TOOL_WIDTH = 40;
-const StyledShrinkableTools = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledShrinkableTools = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledShrinkableTools",
   class: "so6hnjf"
 });
-const StyledToolbox = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledToolbox = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledToolbox",
   class: "s1c1dllr"
 });
@@ -52,17 +50,17 @@ const StyledToolsModal = /*#__PURE__*/(0, _react2.styled)(_Modal.default)({
 });
 const TOOLBAR_STRUCTURE = [{
   title: 'brush',
-  toolsType: [_Shapes.ShapeEnum.brush],
+  toolsType: ['brush'],
   vertical: false
 }, {
   title: 'lines',
-  toolsType: [_Shapes.ShapeEnum.line, _Shapes.ShapeEnum.curve, _Shapes.ShapeEnum.polygon],
+  toolsType: ['line', 'curve', 'polygon'],
   vertical: false
 }, {
   title: 'shapes',
-  toolsType: [_Shapes.ShapeEnum.rect, _Shapes.ShapeEnum.square, _Shapes.ShapeEnum.circle, _Shapes.ShapeEnum.ellipse],
+  toolsType: ['rect', 'square', 'circle', 'ellipse'],
   vertical: false
-}, _Shapes.ShapeEnum.text];
+}, 'text'];
 
 const Toolbar = _ref => {
   let {
@@ -187,7 +185,7 @@ const Toolbar = _ref => {
     clearCanvas: clearCanvas
   })), isMenuOpen && /*#__PURE__*/_react.default.createElement(StyledToolsModal, {
     onClose: toggleTools
-  }, availableTools.map((toolType, index) => toolType.type === _Shapes.ShapeEnum.picture ? null : /*#__PURE__*/_react.default.createElement(_Tool.default, {
+  }, availableTools.map((toolType, index) => toolType.type === 'picture' ? null : /*#__PURE__*/_react.default.createElement(_Tool.default, {
     disabled: disabled,
     key: index,
     type: toolType,

package/dist/components/toolbox/ToolbarGroup.js

@@ -19,15 +19,17 @@ var _react2 = require("@linaria/react");
 
 var _Tool = _interopRequireDefault(require("./Tool"));
 
+var _dom = require("../../utils/dom");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 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; }
 
-const StyledPanel = /*#__PURE__*/(0, _react2.styled)(_Panel.default)({
-  name: "StyledPanel",
+const StyledPanelContent = /*#__PURE__*/(0, _react2.styled)('div')({
+  name: "StyledPanelContent",
   class: "s1bvz4xj"
 });
-const StyledRelative = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledRelative = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledRelative",
   class: "siejlch"
 });
@@ -42,6 +44,7 @@ const ToolbarGroup = _ref => {
     disabled = false,
     setActiveToolFromId
   } = _ref;
+  const panelRef = (0, _react.useRef)(null);
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
   const [, startTransition] = (0, _react.useTransition)();
   const [localActiveTool, setLocalActiveTool] = (0, _react.useState)(undefined);
@@ -54,13 +57,20 @@ const ToolbarGroup = _ref => {
   (0, _react.useEffect)(() => {
     if (!isOpen) return;
 
-    const closePanel = () => {
-      setIsOpen(false);
+    const closePanel = event => {
+      const isClickInsideToolbarGroup = (0, _dom.isEventInsideNode)(event, panelRef.current);
+      !isClickInsideToolbarGroup && setIsOpen(false);
     };
 
-    document.addEventListener('click', closePanel);
+    document.addEventListener('mousedown', closePanel, {
+      passive: false
+    });
+    document.addEventListener('touchstart', closePanel, {
+      passive: false
+    });
     return () => {
-      document.removeEventListener('click', closePanel);
+      document.removeEventListener('mousedown', closePanel);
+      document.removeEventListener('touchstart', closePanel);
     };
   }, [isOpen]);
 
@@ -104,9 +114,12 @@ const ToolbarGroup = _ref => {
     disabled: disabled,
     onClick: openPanel,
     icon: groupIcon
-  }), isOpen && /*#__PURE__*/_react.default.createElement(StyledPanel, {
-    vertical: group.vertical,
-    alignment: alignment
+  }), isOpen && /*#__PURE__*/_react.default.createElement(_Panel.default, {
+    alignment: alignment,
+    position: "top"
+  }, /*#__PURE__*/_react.default.createElement(StyledPanelContent, {
+    "data-vertical": +group.vertical,
+    ref: panelRef
   }, group.toolsType.map((toolType, i) => /*#__PURE__*/_react.default.createElement(_Tool.default, {
     disabled: disabled,
     key: i,
@@ -114,7 +127,7 @@ const ToolbarGroup = _ref => {
     img: toolType.icon,
     isActive: activeTool.id === toolType.id,
     setActive: setActiveTool
-  }))));
+  })))));
 };
 
 var _default = ToolbarGroup;

package/dist/constants/app.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GRID_SMALL = exports.GRID_NONE = exports.GRID_MEDIUM = exports.GRID_LARGE = exports.DEFAULT_OPTIONS = exports.APP_NAME = void 0;
+
+var _shapes = require("./shapes");
+
+var _tools = require("./tools");
+
+const APP_NAME = 'react_paint';
+exports.APP_NAME = APP_NAME;
+const GRID_NONE = 0;
+exports.GRID_NONE = GRID_NONE;
+const GRID_SMALL = 1;
+exports.GRID_SMALL = GRID_SMALL;
+const GRID_MEDIUM = 2;
+exports.GRID_MEDIUM = GRID_MEDIUM;
+const GRID_LARGE = 3;
+exports.GRID_LARGE = GRID_LARGE;
+const DEFAULT_OPTIONS = {
+  layersManipulation: true,
+  grid: GRID_NONE,
+  canGrow: false,
+  canShrink: true,
+  withExport: true,
+  withLoadAndSave: true,
+  withUploadPicture: true,
+  withUrlPicture: false,
+  availableTools: _tools.DEFAULT_SHAPE_TOOLS,
+  clearCallback: 'empty',
+  uiStyle: {
+    toolbarBackgroundColor: 'white',
+    dividerColor: '#36418129',
+    fontRadius: 8,
+    fontDisabledColor: '#3641812b',
+    fontDisabledBackgroundColor: 'transparent',
+    fontColor: '#364181',
+    fontBackgroundColor: 'transparent',
+    fontSelectedColor: 'white',
+    fontSelectedBackgroundColor: '#364181',
+    fontHoverColor: '#364181',
+    fontHoverBackgroundColor: '#afd8d8',
+    canvasBackgroundColor: 'white',
+    canvasSelectionColor: _shapes.SELECTION_DEFAULT_COLOR,
+    canvasSelectionWidth: _shapes.SELECTION_DEFAULT_WIDTH,
+    canvasSelectionPadding: _shapes.SELECTION_DEFAULT_PADDING
+  }
+};
+exports.DEFAULT_OPTIONS = DEFAULT_OPTIONS;

package/dist/constants/icons.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.visibilityOffIcon = exports.visibilityIcon = exports.unlockedIcon = exports.undoIcon = exports.trashIcon = exports.textIcon = exports.squareIcon = exports.shapesIcon = exports.settingsIcon = exports.saveIcon = exports.redoIcon = exports.recIcon = exports.publicIcon = exports.polygonIcon = exports.pictureIcon = exports.penIcon = exports.paletteIcon = exports.paintIcon = exports.openFileIcon = exports.opacityIcon = exports.noStrokeIcon = exports.noFillIcon = exports.menuIcon = exports.lockedIcon = exports.lineWidthIcon = exports.lineTypeIcon = exports.lineEndIcon = exports.layersIcon = exports.italicIcon = exports.gridOnIcon = exports.gridOffIcon = exports.fontIcon = exports.exportFileIcon = exports.encodedTransparentIcon = exports.ellipseIcon = exports.dotsIcon = exports.curveIcon = exports.cursorIcon = exports.clearIcon = exports.circleIcon = exports.brushIcon = exports.boldIcon = exports.arrowIcon = void 0;
+exports.visibilityOffIcon = exports.visibilityIcon = exports.unlockedIcon = exports.undoIcon = exports.trashIcon = exports.textIcon = exports.squareIcon = exports.shapesIcon = exports.settingsIcon = exports.saveIcon = exports.redoIcon = exports.recIcon = exports.publicIcon = exports.polygonIcon = exports.pictureIcon = exports.penIcon = exports.paletteIcon = exports.paintIcon = exports.openFileIcon = exports.opacityIcon = exports.noStrokeIcon = exports.noFillIcon = exports.menuIcon = exports.lockedIcon = exports.lineWidthIcon = exports.lineTypeIcon = exports.lineEndIcon = exports.layersIcon = exports.italicIcon = exports.gridOffIcon = exports.fontIcon = exports.exportFileIcon = exports.ellipseIcon = exports.dotsIcon = exports.curveIcon = exports.cursorIcon = exports.clearIcon = exports.circleIcon = exports.brushIcon = exports.boldIcon = exports.arrowIcon = void 0;
 const brushIcon = '<svg><path d="M5.146 17.5Q4.146 17.5 3.208 17Q2.271 16.5 1.667 15.708Q2.208 15.75 2.802 15.344Q3.396 14.938 3.396 14.104Q3.396 13.042 4.135 12.292Q4.875 11.542 5.958 11.542Q7.021 11.542 7.76 12.292Q8.5 13.042 8.5 14.104Q8.5 15.5 7.51 16.5Q6.521 17.5 5.146 17.5ZM9.917 12.5 7.562 10.146 14.917 2.729Q15.146 2.5 15.469 2.5Q15.792 2.5 16.021 2.729L17.271 3.958Q17.5 4.188 17.5 4.531Q17.5 4.875 17.271 5.125Z"/></svg>';
 exports.brushIcon = brushIcon;
 const squareIcon = '<svg><path d="M2.5 17.5V2.5H17.5V17.5ZM4.25 15.75H15.75V4.25H4.25ZM4.25 15.75V4.25V15.75Z"/></svg>';
@@ -20,12 +20,8 @@ const trashIcon = '<svg><path d="M4.125 5.083V3.333H7.062L7.896 2.5H12.104L12.93
 exports.trashIcon = trashIcon;
 const opacityIcon = '<svg><path d="M10 17.5Q7.208 17.5 5.271 15.594Q3.333 13.688 3.333 10.958Q3.333 9.583 3.854 8.396Q4.375 7.208 5.292 6.292L10 1.667L14.688 6.292Q15.604 7.208 16.135 8.396Q16.667 9.583 16.667 10.958Q16.667 13.688 14.719 15.594Q12.771 17.5 10 17.5ZM5.146 11.667H14.854Q15.083 10.188 14.552 9.146Q14.021 8.104 13.479 7.562L10 4.125L6.521 7.562Q5.979 8.104 5.448 9.146Q4.917 10.188 5.146 11.667Z"/></svg>';
 exports.opacityIcon = opacityIcon;
-const dotsIcon = '<svg><path d="M10.021 16.667Q9.354 16.667 8.875 16.188Q8.396 15.708 8.396 15.042Q8.396 14.375 8.875 13.896Q9.354 13.417 10.021 13.417Q10.688 13.417 11.167 13.896Q11.646 14.375 11.646 15.042Q11.646 15.708 11.167 16.188Q10.688 16.667 10.021 16.667ZM10.021 11.625Q9.354 11.625 8.875 11.146Q8.396 10.667 8.396 10Q8.396 9.333 8.875 8.854Q9.354 8.375 10.021 8.375Q10.688 8.375 11.167 8.854Q11.646 9.333 11.646 10Q11.646 10.667 11.167 11.146Q10.688 11.625 10.021 11.625ZM10.021 6.583Q9.354 6.583 8.875 6.104Q8.396 5.625 8.396 4.958Q8.396 4.292 8.875 3.813Q9.354 3.333 10.021 3.333Q10.688 3.333 11.167 3.813Q11.646 4.292 11.646 4.958Q11.646 5.625 11.167 6.104Q10.688 6.583 10.021 6.583Z"/></svg>'; // const transparentIcon =
-//   '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0, 0, 400,400"><g id="svgg"><path id="path0" d="M206.400 94.600 C 206.400 188.933,206.402 189.200,207.200 189.200 C 207.848 189.200,208.000 189.467,208.000 190.600 C 208.000 191.578,208.181 192.000,208.600 192.000 C 208.933 192.000,209.200 192.356,209.200 192.800 C 209.200 193.467,209.467 193.600,210.800 193.600 C 212.133 193.600,212.400 193.733,212.400 194.400 C 212.400 195.198,212.667 195.200,306.200 195.200 L 400.000 195.200 400.000 97.600 L 400.000 0.000 303.200 0.000 L 206.400 0.000 206.400 94.600 M0.000 303.200 L 0.000 400.000 97.600 400.000 L 195.200 400.000 195.200 306.200 C 195.200 212.667,195.198 212.400,194.400 212.400 C 193.733 212.400,193.600 212.133,193.600 210.800 C 193.600 209.467,193.467 209.200,192.800 209.200 C 192.356 209.200,192.000 208.933,192.000 208.600 C 192.000 208.181,191.578 208.000,190.600 208.000 C 189.467 208.000,189.200 207.848,189.200 207.200 C 189.200 206.402,188.933 206.400,94.600 206.400 L 0.000 206.400 0.000 303.200 " stroke="none" fill="#fcfcfc" fill-rule="evenodd"></path><path id="path1" d="M0.000 98.400 L 0.000 196.800 96.000 196.800 C 191.733 196.800,192.000 196.798,192.000 196.000 C 192.000 195.467,192.267 195.200,192.800 195.200 C 193.333 195.200,193.600 194.933,193.600 194.400 C 193.600 193.867,193.867 193.600,194.400 193.600 C 194.933 193.600,195.200 193.333,195.200 192.800 C 195.200 192.267,195.467 192.000,196.000 192.000 C 196.798 192.000,196.800 191.733,196.800 96.000 L 196.800 0.000 98.400 0.000 L 0.000 0.000 0.000 98.400 M209.200 205.600 C 209.200 206.044,208.933 206.400,208.600 206.400 C 208.267 206.400,208.000 206.756,208.000 207.200 C 208.000 207.733,207.733 208.000,207.200 208.000 C 206.756 208.000,206.400 208.267,206.400 208.600 C 206.400 208.933,206.044 209.200,205.600 209.200 C 204.802 209.200,204.800 209.467,204.800 304.600 L 204.800 400.000 302.400 400.000 L 400.000 400.000 400.000 302.400 L 400.000 204.800 304.600 204.800 C 209.467 204.800,209.200 204.802,209.200 205.600 " stroke="none" fill="#bcbcbc" fill-rule="evenodd"></path><path id="path2" d="" stroke="none" fill="#ec100dc" fill-rule="evenodd"></path><path id="path3" d="" stroke="none" fill="#ec100dc" fill-rule="evenodd"></path><path id="path4" d="" stroke="none" fill="#ec100dc" fill-rule="evenodd"></path></g></svg>'
-
+const dotsIcon = '<svg><path d="M10.021 16.667Q9.354 16.667 8.875 16.188Q8.396 15.708 8.396 15.042Q8.396 14.375 8.875 13.896Q9.354 13.417 10.021 13.417Q10.688 13.417 11.167 13.896Q11.646 14.375 11.646 15.042Q11.646 15.708 11.167 16.188Q10.688 16.667 10.021 16.667ZM10.021 11.625Q9.354 11.625 8.875 11.146Q8.396 10.667 8.396 10Q8.396 9.333 8.875 8.854Q9.354 8.375 10.021 8.375Q10.688 8.375 11.167 8.854Q11.646 9.333 11.646 10Q11.646 10.667 11.167 11.146Q10.688 11.625 10.021 11.625ZM10.021 6.583Q9.354 6.583 8.875 6.104Q8.396 5.625 8.396 4.958Q8.396 4.292 8.875 3.813Q9.354 3.333 10.021 3.333Q10.688 3.333 11.167 3.813Q11.646 4.292 11.646 4.958Q11.646 5.625 11.167 6.104Q10.688 6.583 10.021 6.583Z"/></svg>';
 exports.dotsIcon = dotsIcon;
-const encodedTransparentIcon = '%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';
-exports.encodedTransparentIcon = encodedTransparentIcon;
 const undoIcon = '<svg><path d="M11.708 15.833H5.854V14.083H11.708Q13 14.083 13.958 13.292Q14.917 12.5 14.917 11.271Q14.917 10.042 13.958 9.24Q13 8.438 11.708 8.438H6.667L8.792 10.562L7.562 11.792L3.333 7.562L7.562 3.333L8.792 4.562L6.667 6.688H11.708Q13.729 6.688 15.198 7.99Q16.667 9.292 16.667 11.25Q16.667 13.208 15.198 14.521Q13.729 15.833 11.708 15.833Z"/></svg>';
 exports.undoIcon = undoIcon;
 const redoIcon = '<svg><path d="M8.292 15.833Q6.271 15.833 4.802 14.521Q3.333 13.208 3.333 11.25Q3.333 9.292 4.802 7.99Q6.271 6.688 8.292 6.688H13.333L11.208 4.562L12.438 3.333L16.667 7.562L12.438 11.792L11.208 10.562L13.333 8.438H8.292Q7 8.438 6.042 9.229Q5.083 10.021 5.083 11.25Q5.083 12.5 6.042 13.292Q7 14.083 8.292 14.083H14.146V15.833Z"/></svg>';
@@ -66,8 +62,6 @@ const lockedIcon = '<svg><path d="M10 0.833Q11.771 0.833 12.99 2.052Q14.208 3.27
 exports.lockedIcon = lockedIcon;
 const unlockedIcon = '<svg><path d="M5.792 5.042Q5.792 3.271 7.01 2.052Q8.229 0.833 10 0.833Q11.771 0.833 12.99 2.052Q14.208 3.271 14.208 5.042V6.667H14.917Q15.646 6.667 16.156 7.177Q16.667 7.688 16.667 8.417V16.562Q16.667 17.292 16.156 17.812Q15.646 18.333 14.917 18.333H5.083Q4.354 18.333 3.844 17.812Q3.333 17.292 3.333 16.562V8.417Q3.333 7.688 3.844 7.177Q4.354 6.667 5.083 6.667H12.458V5.042Q12.458 4.021 11.74 3.302Q11.021 2.583 10 2.583Q8.979 2.583 8.26 3.302Q7.542 4.021 7.542 5.042ZM5.083 16.583H14.917Q14.917 16.583 14.917 16.583Q14.917 16.583 14.917 16.583V8.417Q14.917 8.417 14.917 8.417Q14.917 8.417 14.917 8.417H5.083Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417V16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583ZM10 10.812Q9.292 10.812 8.802 11.302Q8.312 11.792 8.312 12.5Q8.312 13.208 8.802 13.698Q9.292 14.188 10 14.188Q10.708 14.188 11.198 13.698Q11.688 13.208 11.688 12.5Q11.688 11.792 11.198 11.302Q10.708 10.812 10 10.812ZM5.083 8.417Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417V16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583V8.417Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417Z"/></svg>';
 exports.unlockedIcon = unlockedIcon;
-const gridOnIcon = '<svg><path d="M16.583 18.333H3.417Q2.688 18.333 2.177 17.823Q1.667 17.312 1.667 16.583V3.417Q1.667 2.688 2.177 2.177Q2.688 1.667 3.417 1.667H16.583Q17.312 1.667 17.823 2.177Q18.333 2.688 18.333 3.417V16.583Q18.333 17.312 17.823 17.823Q17.312 18.333 16.583 18.333ZM6.646 16.583V13.354H3.417V16.583Q3.417 16.583 3.417 16.583Q3.417 16.583 3.417 16.583ZM3.417 11.604H6.646V8.375H3.417ZM3.417 6.625H6.646V3.417H3.417Q3.417 3.417 3.417 3.417Q3.417 3.417 3.417 3.417ZM8.396 16.583H11.625V13.354H8.396ZM8.396 11.604H11.625V8.375H8.396ZM8.396 6.625H11.625V3.417H8.396ZM13.375 16.583H16.583Q16.583 16.583 16.583 16.583Q16.583 16.583 16.583 16.583V13.354H13.375ZM13.375 11.604H16.583V8.375H13.375ZM13.375 6.625H16.583V3.417Q16.583 3.417 16.583 3.417Q16.583 3.417 16.583 3.417H13.375Z"/></svg>';
-exports.gridOnIcon = gridOnIcon;
 const gridOffIcon = '<svg><path d="M18.333 15.854 16.583 14.104V13.354H15.833L14.083 11.604H16.583V8.375H13.375V10.896L11.625 9.146V8.375H10.875L9.125 6.625H11.625V3.417H8.396V5.896L6.646 4.146V3.417H5.896L4.146 1.667H16.583Q17.312 1.667 17.823 2.177Q18.333 2.688 18.333 3.417ZM13.375 6.625H16.583V3.417Q16.583 3.417 16.583 3.417Q16.583 3.417 16.583 3.417H13.375ZM16.771 19.229 15.854 18.333H3.417Q2.688 18.333 2.177 17.823Q1.667 17.312 1.667 16.583V4.125L0.812 3.271L2.042 2.021L18 18ZM13.375 16.583H14.104L13.375 15.833ZM8.396 11.604H9.125L8.396 10.854ZM8.396 16.583H11.625V14.083L10.875 13.354H8.396ZM3.417 6.625H4.167L3.417 5.875ZM3.417 11.604H6.646V9.104L5.917 8.375H3.417ZM6.646 16.583V13.354H3.417V16.583Q3.417 16.583 3.417 16.583Q3.417 16.583 3.417 16.583Z"/></svg>';
 exports.gridOffIcon = gridOffIcon;
 const ellipseIcon = '<svg><path d="M10 15.833Q7.917 15.833 6.667 14.177Q5.417 12.521 5.417 10Q5.417 7.479 6.667 5.823Q7.917 4.167 10 4.167Q12.083 4.167 13.333 5.823Q14.583 7.479 14.583 10Q14.583 12.521 13.333 14.177Q12.083 15.833 10 15.833ZM10 14.042Q11.375 14.042 12.021 12.833Q12.667 11.625 12.667 10Q12.667 8.375 12.021 7.167Q11.375 5.958 10 5.958Q8.625 5.958 7.979 7.167Q7.333 8.375 7.333 10Q7.333 11.625 7.979 12.833Q8.625 14.042 10 14.042Z"/></svg>';

package/dist/constants/loading.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LOADING_TRANSITION_DURATION = void 0;
+const LOADING_TRANSITION_DURATION = 300;
+exports.LOADING_TRANSITION_DURATION = LOADING_TRANSITION_DURATION;

package/dist/constants/shapes.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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;
+exports.ShapeTypeArray = 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;
 const SELECTION_DEFAULT_PADDING = 0;
 exports.SELECTION_DEFAULT_PADDING = SELECTION_DEFAULT_PADDING;
 const SELECTION_DEFAULT_WIDTH = 2;
@@ -15,4 +15,6 @@ exports.SELECTION_ANCHOR_SIZE = SELECTION_ANCHOR_SIZE;
 const SELECTION_ROTATED_ANCHOR_POSITION = 16;
 exports.SELECTION_ROTATED_ANCHOR_POSITION = SELECTION_ROTATED_ANCHOR_POSITION;
 const SELECTION_RESIZE_ANCHOR_POSITIONS = [[0, 0], [0.5, 0], [1, 0], [1, 0.5], [1, 1], [0.5, 1], [0, 1], [0, 0.5]];
-exports.SELECTION_RESIZE_ANCHOR_POSITIONS = SELECTION_RESIZE_ANCHOR_POSITIONS;
+exports.SELECTION_RESIZE_ANCHOR_POSITIONS = SELECTION_RESIZE_ANCHOR_POSITIONS;
+const ShapeTypeArray = ['brush', 'rect', 'square', 'line', 'polygon', 'circle', 'curve', 'ellipse', 'picture', 'text'];
+exports.ShapeTypeArray = ShapeTypeArray;