@yorab/react-paint 0.4.0 → 0.5.0

package/dist/components/toolbox/MenuGroup.js

@@ -25,33 +25,41 @@ var _Panel = _interopRequireDefault(require("../common/Panel"));
 
 var _react2 = require("@linaria/react");
 
-var _Shapes = require("../../types/Shapes");
-
-var _style = require("../../utils/style");
-
 var _Tool = _interopRequireDefault(require("./Tool"));
 
 var _LoadFileTool = _interopRequireDefault(require("./LoadFileTool"));
 
 var _icons = require("../../constants/icons");
 
+var _tools = require("../../constants/tools");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
 
 var StyledPanel = /*#__PURE__*/(0, _react2.styled)(_Panel["default"])({
   name: "StyledPanel",
-  "class": "s1uphjfh"
+  "class": "s1qu0ers"
 });
 var StyledRelative = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledRelative",
-  "class": "s1e5a6k5"
+  "class": "s1y35t9y"
 });
 
 var MenuGroup = function MenuGroup(_ref) {
   var _ref3;
 
   var activeTool = _ref.activeTool,
+      withActionsInMenu = _ref.withActionsInMenu,
+      _ref$hasActionToUndo = _ref.hasActionToUndo,
+      hasActionToUndo = _ref$hasActionToUndo === void 0 ? false : _ref$hasActionToUndo,
+      _ref$hasActionToRedo = _ref.hasActionToRedo,
+      hasActionToRedo = _ref$hasActionToRedo === void 0 ? false : _ref$hasActionToRedo,
+      _ref$hasActionToClear = _ref.hasActionToClear,
+      hasActionToClear = _ref$hasActionToClear === void 0 ? false : _ref$hasActionToClear,
+      undoAction = _ref.undoAction,
+      redoAction = _ref.redoAction,
+      clearCanvas = _ref.clearCanvas,
       alignment = _ref.alignment,
       group = _ref.group,
       _ref$vertical = _ref.vertical,
@@ -65,7 +73,8 @@ var MenuGroup = function MenuGroup(_ref) {
       togglePictureUrlModal = _ref.togglePictureUrlModal,
       saveFile = _ref.saveFile,
       exportCanvasInFile = _ref.exportCanvasInFile,
-      availableTools = _ref.availableTools;
+      withUploadPicture = _ref.withUploadPicture,
+      withUrlPicture = _ref.withUrlPicture;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -104,9 +113,9 @@ var MenuGroup = function MenuGroup(_ref) {
     setIsOpen(true);
   };
 
-  var isActive = _fp["default"].includes(activeTool, group === null || group === void 0 ? void 0 : group.tools);
+  var isActive = _fp["default"].includes(activeTool.type, group === null || group === void 0 ? void 0 : group.tools);
 
-  var groupIcon = (_ref3 = isActive ? (0, _style.getShapePicture)(activeTool) : group.img) !== null && _ref3 !== void 0 ? _ref3 : group.title;
+  var groupIcon = (_ref3 = isActive ? activeTool.icon : group.img) !== null && _ref3 !== void 0 ? _ref3 : group.title;
   (0, _react.useEffect)(function () {
     if (!isOpen) return;
 
@@ -123,11 +132,7 @@ var MenuGroup = function MenuGroup(_ref) {
       document.removeEventListener('click', closePanel);
     };
   }, [isOpen]);
-
-  var withPicture = _fp["default"].includes(_Shapes.ShapeEnum.picture, availableTools);
-
-  var withDivider = withPicture && (withLoadAndSave || withExport);
-  var withMenu = withPicture || withLoadAndSave || withExport;
+  var withMenu = withActionsInMenu || withUploadPicture || withUrlPicture || withLoadAndSave || withExport;
   return withMenu ? /*#__PURE__*/_react["default"].createElement(StyledRelative, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     selected: isActive,
     title: group.title,
@@ -137,42 +142,63 @@ var MenuGroup = function MenuGroup(_ref) {
   }), isOpen && /*#__PURE__*/_react["default"].createElement(StyledPanel, {
     vertical: vertical,
     alignment: alignment
-  }, withPicture && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_LoadFileTool["default"], {
+  }, withActionsInMenu && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
+    withText: true,
+    type: _tools.UNDO_TOOL,
+    disabled: disabled || !hasActionToUndo,
+    img: _tools.UNDO_TOOL.icon,
+    isActive: activeTool.id === _tools.UNDO_TOOL.id,
+    setActive: undoAction
+  }), /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
+    withText: true,
+    type: _tools.REDO_TOOL,
+    disabled: disabled || !hasActionToRedo,
+    img: _tools.REDO_TOOL.icon,
+    isActive: activeTool.id === _tools.REDO_TOOL.id,
+    setActive: redoAction
+  }), /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
+    withText: true,
+    type: _tools.CLEAR_TOOL,
+    disabled: disabled || !hasActionToClear,
+    img: _tools.CLEAR_TOOL.icon,
+    isActive: activeTool.id === _tools.CLEAR_TOOL.id,
+    setActive: function setActive() {
+      return clearCanvas();
+    }
+  }), (withUploadPicture || withUrlPicture || withLoadAndSave) && /*#__PURE__*/_react["default"].createElement("hr", null)), withUploadPicture && /*#__PURE__*/_react["default"].createElement(_LoadFileTool["default"], {
     withText: true,
+    type: _tools.UPLOAD_PICTURE_TOOL,
     disabled: disabled,
     loadFile: addPicture,
-    lib: "Upload picture",
-    img: _icons.pictureIcon,
+    img: _tools.UPLOAD_PICTURE_TOOL.icon,
     accept: "image/png, image/gif, image/jpeg"
-  }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  }), withUrlPicture && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     disabled: disabled,
     selected: false,
     onClick: togglePictureUrlModal,
     title: "Add picture from URL",
     icon: _icons.publicIcon,
     children: "Add picture from URL"
-  })), withDivider && /*#__PURE__*/_react["default"].createElement("hr", null), withLoadAndSave && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_LoadFileTool["default"], {
+  }), (withUploadPicture || withUrlPicture) && withLoadAndSave && /*#__PURE__*/_react["default"].createElement("hr", null), withLoadAndSave && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_LoadFileTool["default"], {
     withText: true,
+    type: _tools.LOAD_TOOL,
     disabled: disabled,
     loadFile: loadFile,
-    lib: "Load project",
-    img: _icons.openFileIcon,
+    img: _tools.LOAD_TOOL.icon,
     accept: "application/JSON"
   }), /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
     withText: true,
     disabled: disabled,
-    type: _Shapes.ToolEnum.saveFile,
-    lib: "Save project",
-    img: _icons.saveIcon,
-    isActive: activeTool === _Shapes.ToolEnum.saveFile,
+    type: _tools.SAVE_TOOL,
+    img: _tools.SAVE_TOOL.icon,
+    isActive: activeTool.id === _tools.SAVE_TOOL.id,
     setActive: saveFile
   })), withExport && /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
     withText: true,
     disabled: disabled,
-    type: _Shapes.ToolEnum["export"],
-    lib: "Export PNG",
-    img: _icons.exportFileIcon,
-    isActive: activeTool === _Shapes.ToolEnum["export"],
+    type: _tools.EXPORT_TOOL,
+    img: _tools.EXPORT_TOOL.icon,
+    isActive: activeTool.id === _tools.EXPORT_TOOL.id,
     setActive: exportCanvasInFile
   }))) : null;
 };

package/dist/components/toolbox/PictureUrlInput.js

@@ -27,7 +27,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var StyledInputModal = /*#__PURE__*/(0, _react2.styled)(_Modal["default"])({
   name: "StyledInputModal",
-  "class": "s95bkm9"
+  "class": "s1rncfwv"
 });
 
 var PictureUrlModal = function PictureUrlModal(_ref) {

package/dist/components/toolbox/Tool.js

@@ -12,9 +12,9 @@ var _react = _interopRequireDefault(require("react"));
 var _Button = _interopRequireDefault(require("../common/Button"));
 
 var Tool = function Tool(_ref) {
+  var _type$lib;
+
   var type = _ref.type,
-      _ref$lib = _ref.lib,
-      lib = _ref$lib === void 0 ? '' : _ref$lib,
       img = _ref.img,
       isActive = _ref.isActive,
       _ref$withText = _ref.withText,
@@ -31,9 +31,9 @@ var Tool = function Tool(_ref) {
     disabled: disabled,
     selected: isActive,
     onClick: handleClick,
-    title: lib,
+    title: (_type$lib = type.lib) !== null && _type$lib !== void 0 ? _type$lib : type.type,
     icon: img,
-    children: withText ? lib : undefined
+    children: withText ? type.lib : undefined
   });
 };
 

package/dist/components/toolbox/Toolbar.js

@@ -29,51 +29,48 @@ var _MenuGroup = _interopRequireDefault(require("./MenuGroup"));
 
 var _Tool = _interopRequireDefault(require("./Tool"));
 
-var _style = require("../../utils/style");
-
 var _Modal = _interopRequireDefault(require("../common/Modal"));
 
 var _PictureUrlInput = _interopRequireDefault(require("./PictureUrlInput"));
 
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
+var _tools = require("../../constants/tools");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
 
+var TOOL_WIDTH = 40;
 var StyledShrinkableTools = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledShrinkableTools",
-  "class": "so6hnjf"
+  "class": "s1gorp95"
 });
 var StyledToolbox = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledToolbox",
-  "class": "s1c1dllr"
-});
-var StyledShrinkableToolsInner = /*#__PURE__*/(0, _react2.styled)("div")({
-  name: "StyledShrinkableToolsInner",
-  "class": "s1g032mh"
+  "class": "s1ivsaf6"
 });
 var StyledToolsModal = /*#__PURE__*/(0, _react2.styled)(_Modal["default"])({
   name: "StyledToolsModal",
-  "class": "s4owjrv"
+  "class": "sv0y70r"
 });
 var TOOLBAR_STRUCTURE = [{
   title: 'brush',
-  img: _icons.gestureIcon,
-  tools: [_Shapes.ShapeEnum.brush],
+  toolsType: [_Shapes.ShapeEnum.brush],
   vertical: false
 }, {
   title: 'lines',
-  img: _icons.arrowIcon,
-  tools: [_Shapes.ShapeEnum.line, _Shapes.ShapeEnum.curve, _Shapes.ShapeEnum.polygon],
+  toolsType: [_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],
+  toolsType: [_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,
@@ -92,7 +89,12 @@ var Toolbar = function Toolbar(_ref) {
       loadFile = _ref.loadFile,
       saveFile = _ref.saveFile,
       exportCanvasInFile = _ref.exportCanvasInFile,
-      availableTools = _ref.availableTools;
+      availableTools = _ref.availableTools,
+      withUrlPicture = _ref.withUrlPicture,
+      withUploadPicture = _ref.withUploadPicture;
+  var currentStructure = (0, _toolbar.getCurrentStructure)(availableTools, TOOLBAR_STRUCTURE);
+  var fullToolbarSize = (5 + currentStructure.length) * TOOL_WIDTH;
+  var withMenuToolbarSize = (2 + currentStructure.length) * TOOL_WIDTH;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -104,6 +106,16 @@ var Toolbar = function Toolbar(_ref) {
       isPictureUrlModalOpen = _useState4[0],
       setIsPictureUrlModalOpen = _useState4[1];
 
+  var _useState5 = (0, _react.useState)(width < fullToolbarSize),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      actionsInMenu = _useState6[0],
+      setActionsInMenu = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(width < withMenuToolbarSize),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      toolsInMenu = _useState8[0],
+      setToolsInMenu = _useState8[1];
+
   var toggleTools = function toggleTools() {
     setIsMenuOpen(function (prev) {
       return !prev;
@@ -123,53 +135,58 @@ var Toolbar = function Toolbar(_ref) {
   var setActiveTool = function setActiveTool(tool) {
     setActiveToolFromProps(tool);
     setIsMenuOpen(false);
-  };
-
-  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"], {
-    type: _Shapes.ToolEnum.selection,
+  }; //360 240
+
+
+  (0, _react.useEffect)(function () {
+    setActionsInMenu(width < fullToolbarSize);
+    setToolsInMenu(width < withMenuToolbarSize);
+  }, [width, fullToolbarSize, withMenuToolbarSize]);
+  var isAnyToolSelected = _fp["default"].find({
+    type: activeTool
+  }, availableTools) !== undefined;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(StyledToolbox, null, /*#__PURE__*/_react["default"].createElement(StyledShrinkableTools, null, /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
+    type: _tools.SELECTION_TOOL,
     disabled: disabled,
-    lib: "selection",
-    img: _icons.selectIcon,
-    isActive: activeTool === _Shapes.ToolEnum.selection,
+    img: _tools.SELECTION_TOOL.icon,
+    isActive: activeTool.id === _tools.SELECTION_TOOL.id,
     setActive: setActiveTool
-  }), /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
-    type: _Shapes.ToolEnum.undo,
+  }), 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,
+      activeTool: activeTool,
+      group: group,
+      setActiveTool: setActiveTool
+    });
+  })), !actionsInMenu && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
+    type: _tools.UNDO_TOOL,
     disabled: disabled || !hasActionToUndo,
-    lib: "Undo",
-    img: _icons.undoIcon,
-    isActive: activeTool === _Shapes.ToolEnum.undo,
+    img: _tools.UNDO_TOOL.icon,
+    isActive: activeTool.id === _tools.UNDO_TOOL.id,
     setActive: undoAction
   }), /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
-    type: _Shapes.ToolEnum.redo,
+    type: _tools.REDO_TOOL,
     disabled: disabled || !hasActionToRedo,
-    lib: "Redo",
-    img: _icons.redoIcon,
-    isActive: activeTool === _Shapes.ToolEnum.redo,
+    img: _tools.REDO_TOOL.icon,
+    isActive: activeTool.id === _tools.REDO_TOOL.id,
     setActive: redoAction
   }), /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
-    type: _Shapes.ToolEnum.clear,
+    type: _tools.CLEAR_TOOL,
     disabled: disabled || !hasActionToClear,
-    lib: "Clear",
-    img: _icons.clearIcon,
-    isActive: activeTool === _Shapes.ToolEnum.clear,
+    img: _tools.CLEAR_TOOL.icon,
+    isActive: activeTool.id === _tools.CLEAR_TOOL.id,
     setActive: function setActive() {
       return clearCanvas();
     }
-  }), /*#__PURE__*/_react["default"].createElement(StyledShrinkableTools, null, /*#__PURE__*/_react["default"].createElement(StyledShrinkableToolsInner, null, currentStructure.map(function (group, i) {
-    return /*#__PURE__*/_react["default"].createElement(_ToolbarGroup["default"], {
-      disabled: disabled,
-      key: i,
-      activeTool: activeTool,
-      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"], {
+    withActionsInMenu: actionsInMenu,
     disabled: disabled,
     vertical: true,
     alignment: "right",
@@ -183,20 +200,26 @@ var Toolbar = function Toolbar(_ref) {
     saveFile: saveFile,
     togglePictureUrlModal: openPictureUrlModal,
     exportCanvasInFile: exportCanvasInFile,
-    availableTools: availableTools,
+    withUploadPicture: withUploadPicture,
+    withUrlPicture: withUrlPicture,
     withLoadAndSave: withLoadAndSave,
-    withExport: withExport
+    withExport: withExport,
+    hasActionToUndo: hasActionToUndo,
+    hasActionToRedo: hasActionToRedo,
+    hasActionToClear: hasActionToClear,
+    undoAction: undoAction,
+    redoAction: redoAction,
+    clearCanvas: clearCanvas
   })), isMenuOpen && /*#__PURE__*/_react["default"].createElement(StyledToolsModal, {
     onClose: toggleTools
-  }, availableTools.map(function (toolType) {
-    return toolType === _Shapes.ShapeEnum.picture ? null : /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
+  }, availableTools.map(function (toolType, index) {
+    return toolType.type === _Shapes.ShapeEnum.picture ? null : /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
       disabled: disabled,
-      key: toolType,
+      key: index,
       type: toolType,
-      lib: toolType,
+      img: toolType.icon,
       withText: false,
-      img: (0, _style.getShapePicture)(toolType),
-      isActive: activeTool === toolType,
+      isActive: activeTool.id === toolType.id,
       setActive: setActiveTool
     });
   })), isPictureUrlModalOpen && /*#__PURE__*/_react["default"].createElement(_PictureUrlInput["default"], {

package/dist/components/toolbox/ToolbarGroup.js

@@ -21,8 +21,6 @@ var _Panel = _interopRequireDefault(require("../common/Panel"));
 
 var _react2 = require("@linaria/react");
 
-var _style = require("../../utils/style");
-
 var _Tool = _interopRequireDefault(require("./Tool"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -31,15 +29,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var StyledPanel = /*#__PURE__*/(0, _react2.styled)(_Panel["default"])({
   name: "StyledPanel",
-  "class": "s1bvz4xj"
+  "class": "s3kynji"
 });
 var StyledRelative = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledRelative",
-  "class": "siejlch"
+  "class": "s1614rl3"
 });
 
 var ToolbarGroup = function ToolbarGroup(_ref) {
-  var _group$tools, _ref2;
+  var _group$toolsType, _ref2;
 
   var activeTool = _ref.activeTool,
       alignment = _ref.alignment,
@@ -80,36 +78,35 @@ var ToolbarGroup = function ToolbarGroup(_ref) {
     };
   }, [isOpen]);
 
-  if (!_fp["default"].isObject(group)) {
+  if ('type' in group) {
     return /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
       disabled: disabled,
       type: group,
-      lib: group,
-      img: (0, _style.getShapePicture)(group),
-      isActive: activeTool === group,
+      img: group.icon,
+      isActive: activeTool.id === group.id,
       setActive: setActiveTool
     });
   }
 
-  if (_fp["default"].isEmpty(group.tools)) return null;
+  if (_fp["default"].isEmpty(group.toolsType)) return null;
 
-  if (((_group$tools = group.tools) === null || _group$tools === void 0 ? void 0 : _group$tools.length) === 1) {
+  if (((_group$toolsType = group.toolsType) === null || _group$toolsType === void 0 ? void 0 : _group$toolsType.length) === 1) {
     return /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
       disabled: disabled,
-      type: group.tools[0],
-      lib: group.tools[0],
-      img: (0, _style.getShapePicture)(group.tools[0]),
-      isActive: activeTool === group.tools[0],
+      type: group.toolsType[0],
+      img: group.toolsType[0].icon,
+      isActive: activeTool.id === group.toolsType[0].id,
       setActive: setActiveTool
     });
   }
 
-  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 isActive = _fp["default"].find({
+    type: activeTool.type
+  }, group === null || group === void 0 ? void 0 : group.toolsType) !== undefined;
+  var groupIcon = (_ref2 = localActiveTool ? localActiveTool.icon : group.toolsType && group.toolsType[0] && group.toolsType[0].icon) !== null && _ref2 !== void 0 ? _ref2 : group.title;
 
   var openPanel = function openPanel() {
-    if (localActiveTool) setActiveToolFromProps(localActiveTool);
+    if (localActiveTool) setActiveToolFromProps(localActiveTool);else group.toolsType && group.toolsType[0] && setActiveTool(group.toolsType[0]);
     setIsOpen(true);
   };
 
@@ -122,17 +119,16 @@ var ToolbarGroup = function ToolbarGroup(_ref) {
   }), isOpen && /*#__PURE__*/_react["default"].createElement(StyledPanel, {
     vertical: group.vertical,
     alignment: alignment
-  }, _fp["default"].map(function (toolType) {
+  }, group.toolsType.map(function (toolType, i) {
     return /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
       disabled: disabled,
-      key: toolType,
+      key: i,
       type: toolType,
-      lib: toolType,
-      img: (0, _style.getShapePicture)(toolType),
-      isActive: activeTool === toolType,
+      img: toolType.icon,
+      isActive: activeTool.id === toolType.id,
       setActive: setActiveTool
     });
-  }, group.tools)));
+  })));
 };
 
 var _default = ToolbarGroup;

package/dist/constants/style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.STYLE_ZINDEX_SNACKBAR = exports.STYLE_ZINDEX_PANEL = exports.STYLE_ZINDEX_LOADING = exports.STYLE_ZINDEX_APP = exports.STYLE_LINE_WITH_ARROW = exports.STYLE_LINE_DASH = exports.STYLE_FONT_DEFAULT = exports.STYLE_FONTS = exports.STYLE_COLORS = exports.POLYGON_POINTS_VALUES = exports.LINE_DASH_DATA = exports.CURVE_POINTS_VALUES = void 0;
+exports.STYLE_ZINDEX_SNACKBAR = exports.STYLE_ZINDEX_PANEL = exports.STYLE_ZINDEX_LOADING = exports.STYLE_ZINDEX_APP = exports.STYLE_LINE_WITH_ARROW = exports.STYLE_LINE_DASH = exports.STYLE_FONT_SIZE_DEFAULT = exports.STYLE_FONT_DEFAULT = exports.STYLE_FONTS = exports.STYLE_COLORS = exports.POLYGON_POINTS_VALUES = exports.LINE_DASH_DATA = exports.CURVE_POINTS_VALUES = void 0;
 var POLYGON_POINTS_VALUES = [3, 4, 5, 6, 7, 8, 9, 10];
 exports.POLYGON_POINTS_VALUES = POLYGON_POINTS_VALUES;
 var CURVE_POINTS_VALUES = [3, 4, 5, 6, 7, 8, 9];
@@ -20,6 +20,8 @@ var STYLE_FONTS = ['arial', 'serif', 'monospace'];
 exports.STYLE_FONTS = STYLE_FONTS;
 var STYLE_FONT_DEFAULT = 'serif';
 exports.STYLE_FONT_DEFAULT = STYLE_FONT_DEFAULT;
+var STYLE_FONT_SIZE_DEFAULT = 36;
+exports.STYLE_FONT_SIZE_DEFAULT = STYLE_FONT_SIZE_DEFAULT;
 var STYLE_ZINDEX_APP = 1;
 exports.STYLE_ZINDEX_APP = STYLE_ZINDEX_APP;
 var STYLE_ZINDEX_LOADING = 2;