@yorab/react-paint 0.4.1 → 0.6.0

package/dist/components/toolbox/MenuGroup.js

@@ -25,16 +25,14 @@ 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; }
@@ -75,13 +73,18 @@ 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),
       isOpen = _useState2[0],
       setIsOpen = _useState2[1];
 
+  var _useTransition = (0, _react.useTransition)(),
+      _useTransition2 = (0, _slicedToArray2["default"])(_useTransition, 2),
+      startTransition = _useTransition2[1];
+
   var loadFile = function loadFile(file) {
     setIsOpen(false);
     loadFileFromProps(file);
@@ -111,12 +114,14 @@ var MenuGroup = function MenuGroup(_ref) {
   }();
 
   var openPanel = function openPanel() {
-    setIsOpen(true);
+    startTransition(function () {
+      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;
 
@@ -124,19 +129,12 @@ var MenuGroup = function MenuGroup(_ref) {
       setIsOpen(false);
     };
 
-    var timeoutId = setTimeout(function () {
-      //TODO find a better fix than settimeout for react18
-      document.addEventListener('click', closePanel);
-    }, 0);
+    document.addEventListener('click', closePanel);
     return function () {
-      clearTimeout(timeoutId);
       document.removeEventListener('click', closePanel);
     };
   }, [isOpen]);
-
-  var withPicture = _fp["default"].includes(_Shapes.ShapeEnum.picture, availableTools);
-
-  var withMenu = withActionsInMenu || 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,
@@ -148,66 +146,61 @@ var MenuGroup = function MenuGroup(_ref) {
     alignment: alignment
   }, withActionsInMenu && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
     withText: true,
-    type: _Shapes.ToolEnum.undo,
+    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"], {
     withText: true,
-    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"], {
     withText: true,
-    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();
     }
-  }), (withPicture || withLoadAndSave) && /*#__PURE__*/_react["default"].createElement("hr", null)), withPicture && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_LoadFileTool["default"], {
+  }), (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"
-  }), withLoadAndSave && /*#__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/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,18 +29,19 @@ 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 ACTIONS_MENU_BREAKPOINT = 400;
-var TOOLS_MENU_BREAKPOINT = 280;
+var TOOL_WIDTH = 40;
 var StyledShrinkableTools = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledShrinkableTools",
   "class": "so6hnjf"
@@ -55,15 +56,15 @@ var StyledToolsModal = /*#__PURE__*/(0, _react2.styled)(_Modal["default"])({
 });
 var TOOLBAR_STRUCTURE = [{
   title: 'brush',
-  tools: [_Shapes.ShapeEnum.brush],
+  toolsType: [_Shapes.ShapeEnum.brush],
   vertical: false
 }, {
   title: 'lines',
-  tools: [_Shapes.ShapeEnum.line, _Shapes.ShapeEnum.curve, _Shapes.ShapeEnum.polygon],
+  toolsType: [_Shapes.ShapeEnum.line, _Shapes.ShapeEnum.curve, _Shapes.ShapeEnum.polygon],
   vertical: false
 }, {
   title: 'shapes',
-  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];
 
@@ -88,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),
@@ -100,12 +106,12 @@ var Toolbar = function Toolbar(_ref) {
       isPictureUrlModalOpen = _useState4[0],
       setIsPictureUrlModalOpen = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(width < ACTIONS_MENU_BREAKPOINT),
+  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 < TOOLS_MENU_BREAKPOINT),
+  var _useState7 = (0, _react.useState)(width < withMenuToolbarSize),
       _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
       toolsInMenu = _useState8[0],
       setToolsInMenu = _useState8[1];
@@ -131,17 +137,67 @@ var Toolbar = function Toolbar(_ref) {
     setIsMenuOpen(false);
   };
 
+  var setActiveToolFromId = function setActiveToolFromId(toolId) {
+    var _availableTools$find;
+
+    setActiveTool((_availableTools$find = availableTools.find(function (tool) {
+      return tool.id === toolId;
+    })) !== null && _availableTools$find !== void 0 ? _availableTools$find : activeTool);
+  }; //360 240
+
+
   (0, _react.useEffect)(function () {
-    setActionsInMenu(width < ACTIONS_MENU_BREAKPOINT);
-    setToolsInMenu(width < TOOLS_MENU_BREAKPOINT);
-  }, [width]);
-  var currentStructure = (0, _toolbar.getCurrentStructure)(availableTools, TOOLBAR_STRUCTURE);
-  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"], {
+    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,
+    img: _tools.SELECTION_TOOL.icon,
+    isActive: activeTool.id === _tools.SELECTION_TOOL.id,
+    setActive: setActiveTool
+  }), 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,
+      setActiveToolFromId: setActiveToolFromId
+    });
+  })), !actionsInMenu && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
+    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"], {
+    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"], {
+    type: _tools.CLEAR_TOOL,
+    disabled: disabled || !hasActionToClear,
+    img: _tools.CLEAR_TOOL.icon,
+    isActive: activeTool.id === _tools.CLEAR_TOOL.id,
+    setActive: function setActive() {
+      return clearCanvas();
+    }
+  })), /*#__PURE__*/_react["default"].createElement(_MenuGroup["default"], {
     withActionsInMenu: actionsInMenu,
     disabled: disabled,
     vertical: true,
-    alignment: "left",
+    alignment: "right",
     group: {
       title: 'Menu',
       img: _icons.menuIcon
@@ -152,7 +208,8 @@ var Toolbar = function Toolbar(_ref) {
     saveFile: saveFile,
     togglePictureUrlModal: openPictureUrlModal,
     exportCanvasInFile: exportCanvasInFile,
-    availableTools: availableTools,
+    withUploadPicture: withUploadPicture,
+    withUrlPicture: withUrlPicture,
     withLoadAndSave: withLoadAndSave,
     withExport: withExport,
     hasActionToUndo: hasActionToUndo,
@@ -161,61 +218,16 @@ var Toolbar = function Toolbar(_ref) {
     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
-  }), !actionsInMenu && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
-    type: _Shapes.ToolEnum.undo,
-    disabled: disabled || !hasActionToUndo,
-    lib: "Undo",
-    img: _icons.undoIcon,
-    isActive: activeTool === _Shapes.ToolEnum.undo,
-    setActive: undoAction
-  }), /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
-    type: _Shapes.ToolEnum.redo,
-    disabled: disabled || !hasActionToRedo,
-    lib: "Redo",
-    img: _icons.redoIcon,
-    isActive: activeTool === _Shapes.ToolEnum.redo,
-    setActive: redoAction
-  }), /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
-    type: _Shapes.ToolEnum.clear,
-    disabled: disabled || !hasActionToClear,
-    lib: "Clear",
-    img: _icons.clearIcon,
-    isActive: activeTool === _Shapes.ToolEnum.clear,
-    setActive: function setActive() {
-      return clearCanvas();
-    }
-  })), /*#__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,
-      activeTool: activeTool,
-      group: group,
-      setActiveTool: setActiveTool
-    });
-  }))), 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"], {
+  }, 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); }
@@ -39,20 +37,24 @@ var StyledRelative = /*#__PURE__*/(0, _react2.styled)("div")({
 });
 
 var ToolbarGroup = function ToolbarGroup(_ref) {
-  var _group$tools, _ref2;
+  var _group$toolsType, _ref2;
 
   var activeTool = _ref.activeTool,
       alignment = _ref.alignment,
       group = _ref.group,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      setActiveToolFromProps = _ref.setActiveTool;
+      setActiveToolFromId = _ref.setActiveToolFromId;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
       isOpen = _useState2[0],
       setIsOpen = _useState2[1];
 
+  var _useTransition = (0, _react.useTransition)(),
+      _useTransition2 = (0, _slicedToArray2["default"])(_useTransition, 2),
+      startTransition = _useTransition2[1];
+
   var _useState3 = (0, _react.useState)(undefined),
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
       localActiveTool = _useState4[0],
@@ -60,7 +62,7 @@ var ToolbarGroup = function ToolbarGroup(_ref) {
 
   var setActiveTool = function setActiveTool(tool) {
     setLocalActiveTool(tool);
-    setActiveToolFromProps(tool);
+    setActiveToolFromId(tool.id);
   };
 
   (0, _react.useEffect)(function () {
@@ -70,47 +72,44 @@ var ToolbarGroup = function ToolbarGroup(_ref) {
       setIsOpen(false);
     };
 
-    var timeoutId = setTimeout(function () {
-      //TODO find a better fix than settimeout for react18
-      document.addEventListener('click', closePanel);
-    }, 0);
+    document.addEventListener('click', closePanel);
     return function () {
-      clearTimeout(timeoutId);
       document.removeEventListener('click', closePanel);
     };
   }, [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.tools && group.tools[0] && (0, _style.getShapePicture)(group.tools[0])) !== 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);else group.tools && group.tools[0] && setActiveTool(group.tools[0]);
-    setIsOpen(true); // group.tools && group.tools[0] && setActiveTool(group.tools[0])
+    if (localActiveTool) setActiveToolFromId(localActiveTool.id);else group.toolsType && group.toolsType[0] && setActiveTool(group.toolsType[0]);
+    startTransition(function () {
+      setIsOpen(true);
+    });
   };
 
   return /*#__PURE__*/_react["default"].createElement(StyledRelative, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
@@ -122,17 +121,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/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.selectIcon = exports.saveIcon = exports.redoIcon = exports.recIcon = exports.publicIcon = exports.polygonIcon = exports.pictureIcon = exports.penIcon = exports.paletteIcon = exports.paintIcon = exports.openFileIcon = exports.opacityIcon = exports.menuIcon = exports.lockedIcon = exports.layersIcon = exports.gridOnIcon = exports.gridOffIcon = exports.gestureIcon = exports.exportFileIcon = exports.encodedTransparentIcon = exports.ellipseIcon = exports.dragIcon = exports.dotsIcon = exports.curveIcon = exports.clearIcon = exports.circleIcon = exports.brushIcon = exports.arrowIcon = void 0;
+exports.visibilityOffIcon = exports.visibilityIcon = exports.unlockedIcon = exports.undoIcon = exports.trashIcon = exports.textIcon = exports.squareIcon = exports.shapesIcon = exports.selectIcon = exports.saveIcon = exports.redoIcon = exports.recIcon = exports.publicIcon = exports.polygonIcon = exports.pictureIcon = exports.penIcon = exports.paletteIcon = exports.paintIcon = exports.openFileIcon = exports.opacityIcon = exports.menuIcon = exports.lockedIcon = exports.layersIcon = exports.italicIcon = exports.gridOnIcon = exports.gridOffIcon = exports.gestureIcon = exports.exportFileIcon = exports.encodedTransparentIcon = exports.ellipseIcon = exports.dragIcon = exports.dotsIcon = exports.curveIcon = exports.clearIcon = exports.circleIcon = exports.brushIcon = exports.boldIcon = exports.arrowIcon = void 0;
 var 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;
 var squareIcon = '<svg><path d="M2.5 17.5V2.5H17.5V17.5ZM4.25 15.75H15.75V4.25H4.25ZM4.25 15.75V4.25V15.75Z"/></svg>';
@@ -77,4 +77,8 @@ exports.ellipseIcon = ellipseIcon;
 var selectIcon = '<svg><path d="M8.854 17.5Q8.5 17.5 8.188 17.354Q7.875 17.208 7.604 16.958L3.271 12.646L4.5 11.375Q4.812 11.042 5.24 10.906Q5.667 10.771 6.104 10.875L7.479 11.188V4.667Q7.479 3.771 8.115 3.135Q8.75 2.5 9.646 2.5Q10.542 2.5 11.177 3.135Q11.812 3.771 11.812 4.667V8.062H12.188Q12.333 8.062 12.458 8.094Q12.583 8.125 12.708 8.188L15.812 9.708Q16.292 9.938 16.542 10.406Q16.792 10.875 16.688 11.417L15.917 16.042Q15.812 16.688 15.323 17.094Q14.833 17.5 14.167 17.5ZM8.854 15.75H14.167L14.958 11.229Q14.958 11.229 14.958 11.229Q14.958 11.229 14.958 11.229L11.5 9.562H10.062V4.667Q10.062 4.479 9.948 4.365Q9.833 4.25 9.646 4.25Q9.458 4.25 9.344 4.365Q9.229 4.479 9.229 4.667V13.333L5.708 12.604ZM8.854 15.75H9.229Q9.229 15.75 9.344 15.75Q9.458 15.75 9.646 15.75Q9.833 15.75 9.948 15.75Q10.062 15.75 10.062 15.75H11.521H14.167Q14.167 15.75 14.167 15.75Q14.167 15.75 14.167 15.75Z"/></svg>';
 exports.selectIcon = selectIcon;
 var curveIcon = '<svg><path d="M7.521 17.5Q6.125 17.5 5.146 16.51Q4.167 15.521 4.167 14.125V7.417Q3.438 7.125 2.969 6.49Q2.5 5.854 2.5 5.042Q2.5 3.979 3.24 3.24Q3.979 2.5 5.042 2.5Q6.104 2.5 6.844 3.24Q7.583 3.979 7.583 5.042Q7.583 5.854 7.115 6.49Q6.646 7.125 5.917 7.417V14.125Q5.917 14.792 6.385 15.271Q6.854 15.75 7.521 15.75Q8.188 15.75 8.656 15.271Q9.125 14.792 9.125 14.125V5.875Q9.125 4.479 10.104 3.49Q11.083 2.5 12.479 2.5Q13.875 2.5 14.854 3.49Q15.833 4.479 15.833 5.875V12.583Q16.562 12.875 17.031 13.51Q17.5 14.146 17.5 14.958Q17.5 16.021 16.76 16.76Q16.021 17.5 14.958 17.5Q13.896 17.5 13.156 16.76Q12.417 16.021 12.417 14.958Q12.417 14.146 12.885 13.5Q13.354 12.854 14.083 12.583V5.875Q14.083 5.208 13.615 4.729Q13.146 4.25 12.479 4.25Q11.812 4.25 11.344 4.729Q10.875 5.208 10.875 5.875V14.125Q10.875 15.521 9.896 16.51Q8.917 17.5 7.521 17.5Z"/></svg>';
-exports.curveIcon = curveIcon;
+exports.curveIcon = curveIcon;
+var boldIcon = '<svg><path d="M5.833 15V3.333H10.375Q11.812 3.333 12.885 4.156Q13.958 4.979 13.958 6.375Q13.958 7.375 13.49 7.969Q13.021 8.562 12.396 8.875V9.042Q13.312 9.354 13.844 10.021Q14.375 10.688 14.375 11.75Q14.375 13.312 13.229 14.156Q12.083 15 10.5 15ZM8.125 8.042H10.188Q10.854 8.042 11.302 7.656Q11.75 7.271 11.75 6.708Q11.75 6.167 11.302 5.771Q10.854 5.375 10.188 5.375H8.125ZM8.125 12.917H10.354Q11.167 12.917 11.625 12.51Q12.083 12.104 12.083 11.458Q12.083 10.812 11.625 10.406Q11.167 10 10.354 10H8.125Z"/></svg>';
+exports.boldIcon = boldIcon;
+var italicIcon = '<svg><path d="M4.167 16.667V14.083H6.979L10.229 5.917H7.5V3.333H15.833V5.917H13.021L9.771 14.083H12.5V16.667Z"/></svg>';
+exports.italicIcon = italicIcon;

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;