@yorab/react-paint 0.6.4 → 0.7.1

package/dist/components/settings/ToggleField.js

@@ -2,14 +2,10 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports.default = void 0;
 
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
@@ -17,34 +13,31 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _Button = _interopRequireDefault(require("../common/Button"));
 
-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; }
+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); }
 
-var ToggleField = function ToggleField(_ref) {
-  var setSelectedSettings = _ref.setSelectedSettings,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      field = _ref.field,
-      icon = _ref.icon,
-      values = _ref.values,
-      _ref$value = _ref.value,
-      value = _ref$value === void 0 ? false : _ref$value,
-      valueChanged = _ref.valueChanged;
+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 _useState = (0, _react.useState)(_fp["default"].uniqueId('settings_')),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
-      customKey = _useState2[0];
+const ToggleField = _ref => {
+  let {
+    setSelectedSettings,
+    disabled = false,
+    field,
+    icon,
+    values,
+    value = false,
+    valueChanged
+  } = _ref;
+  const [customKey] = (0, _react.useState)(_fp.default.uniqueId('settings_'));
 
-  var handleClick = function handleClick() {
-    setSelectedSettings(function (prev) {
+  const handleClick = () => {
+    setSelectedSettings(prev => {
       return prev === customKey ? undefined : customKey;
     });
     valueChanged(field, !value);
   };
 
   if (values.length !== 2) return null;
-  return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  return /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: handleClick,
     selected: value,
     disabled: disabled,
@@ -53,4 +46,4 @@ var ToggleField = function ToggleField(_ref) {
 };
 
 var _default = ToggleField;
-exports["default"] = _default;
+exports.default = _default;

package/dist/components/toolbox/EditTextBox.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 var _style = require("../../constants/style");
 
@@ -13,94 +11,109 @@ 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");
 
-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); }
+var _trigo = require("../../utils/trigo");
 
-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; }
+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); }
 
-var StyledEditBox = /*#__PURE__*/(0, _react2.styled)("div")({
+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')({
   name: "StyledEditBox",
-  "class": "s1unz6yq",
+  class: "s1unz6yq",
   vars: {
-    "s1unz6yq-0": [function (_ref) {
-      var transform = _ref.transform;
+    "s1unz6yq-0": [_ref => {
+      let {
+        transform
+      } = _ref;
       return transform;
     }],
-    "s1unz6yq-1": [function (_ref2) {
-      var color = _ref2.color;
+    "s1unz6yq-1": [_ref2 => {
+      let {
+        color
+      } = _ref2;
       return color;
     }],
-    "s1unz6yq-2": [function (_ref3) {
-      var padding = _ref3.padding;
+    "s1unz6yq-2": [_ref3 => {
+      let {
+        padding
+      } = _ref3;
       return padding;
     }, "px"],
-    "s1unz6yq-3": [function (_ref4) {
-      var fontsize = _ref4.fontsize;
+    "s1unz6yq-3": [_ref4 => {
+      let {
+        fontsize
+      } = _ref4;
       return fontsize;
     }, "px"],
-    "s1unz6yq-5": [function (_ref5) {
-      var fontfamily = _ref5.fontfamily;
+    "s1unz6yq-5": [_ref5 => {
+      let {
+        fontfamily
+      } = _ref5;
       return fontfamily;
     }],
-    "s1unz6yq-6": [function (_ref6) {
-      var opacity = _ref6.opacity;
+    "s1unz6yq-6": [_ref6 => {
+      let {
+        opacity
+      } = _ref6;
       return opacity;
     }]
   }
 });
 
-var EditTextBox = function EditTextBox(_ref7) {
+const EditTextBox = _ref7 => {
   var _shape$style$strokeCo, _shape$style, _shape$style$globalAl, _shape$style2, _shape$style$fontFami, _shape$style3, _shape$style$fontBold, _shape$style4, _shape$style$fontItal, _shape$style5;
 
-  var _ref7$disabled = _ref7.disabled,
-      disabled = _ref7$disabled === void 0 ? false : _ref7$disabled,
-      scaleRatio = _ref7.scaleRatio,
-      shape = _ref7.shape,
-      defaultValue = _ref7.defaultValue,
-      updateValue = _ref7.updateValue,
-      selectionPadding = _ref7.selectionPadding;
-  var ref = (0, _react.useRef)(null);
-
-  var updateContentEditable = function updateContentEditable(e) {
+  let {
+    disabled = false,
+    scaleRatio,
+    shape,
+    defaultValue,
+    updateValue,
+    selectionPadding
+  } = _ref7;
+  const ref = (0, _react.useRef)(null);
+
+  const updateContentEditable = e => {
     updateValue((0, _string.convertDivContentToStringArray)(e.target.innerHTML));
   };
 
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (!ref.current) return;
-    var currentNode = ref.current;
+    const currentNode = ref.current;
 
-    var handlePaste = function handlePaste(e) {
+    const handlePaste = e => {
       var _e$clipboardData;
 
       e.preventDefault();
-      var text = (_e$clipboardData = e.clipboardData) === null || _e$clipboardData === void 0 ? void 0 : _e$clipboardData.getData('text/plain');
+      const text = (_e$clipboardData = e.clipboardData) === null || _e$clipboardData === void 0 ? void 0 : _e$clipboardData.getData('text/plain');
       document.execCommand('insertText', false, text); //TODO use Clipboard API when ready
     };
 
     currentNode.addEventListener('paste', handlePaste);
     currentNode.innerHTML = (0, _string.convertStringArrayToDivContent)(defaultValue);
     currentNode.focus();
-    return function () {
+    return () => {
       currentNode.removeEventListener('paste', handlePaste);
     };
   }, [defaultValue]);
-  var position = (0, _react.useMemo)(function () {
-    var _getShapeInfos = (0, _shapeData.getShapeInfos)(shape, selectionPadding),
-        borders = _getShapeInfos.borders,
-        center = _getShapeInfos.center;
-
-    return (0, _intersect.getPointPositionBeforeCanvasTransformation)([borders.x, borders.y], [-shape.translation[0], -shape.translation[1]], shape.rotation, center);
+  const position = (0, _react.useMemo)(() => {
+    const {
+      borders,
+      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, {
+  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',
@@ -114,4 +127,4 @@ var EditTextBox = function EditTextBox(_ref7) {
 };
 
 var _default = EditTextBox;
-exports["default"] = _default;
+exports.default = _default;

package/dist/components/toolbox/LoadFileTool.js

@@ -2,48 +2,46 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _Button = _interopRequireDefault(require("../common/Button"));
 
-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 _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; }
+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 LoadFileTool = function LoadFileTool(_ref) {
+const LoadFileTool = _ref => {
   var _type$label;
 
-  var _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$withText = _ref.withText,
-      withText = _ref$withText === void 0 ? false : _ref$withText,
-      loadFile = _ref.loadFile,
-      type = _ref.type,
-      img = _ref.img,
-      accept = _ref.accept;
-  var inputRef = (0, _react.useRef)(null);
-
-  var handleClick = function handleClick(event) {
+  let {
+    disabled = false,
+    withText = false,
+    loadFile,
+    type,
+    img,
+    accept
+  } = _ref;
+  const inputRef = (0, _react.useRef)(null);
+
+  const handleClick = event => {
     event.stopPropagation();
     if (inputRef.current) inputRef.current.value = '';
   };
 
-  var handleChange = function handleChange(event) {
+  const handleChange = event => {
     var _event$target$files;
 
-    var file = (_event$target$files = event.target.files) === null || _event$target$files === void 0 ? void 0 : _event$target$files.item(0);
+    const file = (_event$target$files = event.target.files) === null || _event$target$files === void 0 ? void 0 : _event$target$files.item(0);
     if (!file) return;
     loadFile(file);
   };
 
-  return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  return /*#__PURE__*/_react.default.createElement(_Button.default, {
     ref: inputRef,
     type: "file",
     onClick: handleClick,
@@ -57,4 +55,4 @@ var LoadFileTool = function LoadFileTool(_ref) {
 };
 
 var _default = LoadFileTool;
-exports["default"] = _default;
+exports.default = _default;

package/dist/components/toolbox/MenuGroup.js

@@ -2,18 +2,10 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports.default = void 0;
 
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
@@ -33,175 +25,149 @@ 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 _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; }
+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"
+const StyledPanelContent = /*#__PURE__*/(0, _react2.styled)('div')({
+  name: "StyledPanelContent",
+  class: "s1uphjfh"
 });
-var StyledRelative = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledRelative = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledRelative",
-  "class": "s1e5a6k5"
+  class: "s1e5a6k5"
 });
 
-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,
-      vertical = _ref$vertical === void 0 ? false : _ref$vertical,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      withLoadAndSave = _ref.withLoadAndSave,
-      withExport = _ref.withExport,
-      addPictureFromProps = _ref.addPicture,
-      loadFileFromProps = _ref.loadFile,
-      togglePictureUrlModal = _ref.togglePictureUrlModal,
-      saveFile = _ref.saveFile,
-      exportCanvasInFile = _ref.exportCanvasInFile,
-      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) {
+const MenuGroup = _ref => {
+  var _ref2;
+
+  let {
+    activeTool,
+    withActionsInMenu,
+    hasActionToUndo = false,
+    hasActionToRedo = false,
+    hasActionToClear = false,
+    undoAction,
+    redoAction,
+    clearCanvas,
+    alignment,
+    group,
+    vertical = false,
+    disabled = false,
+    withLoadAndSave,
+    withExport,
+    addPicture: addPictureFromProps,
+    loadFile: loadFileFromProps,
+    togglePictureUrlModal,
+    saveFile,
+    exportCanvasInFile,
+    withUploadPicture,
+    withUrlPicture
+  } = _ref;
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const [, startTransition] = (0, _react.useTransition)();
+
+  const loadFile = file => {
     setIsOpen(false);
     loadFileFromProps(file);
   };
 
-  var addPicture = /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(file) {
-      return _regenerator["default"].wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              setIsOpen(false);
-              _context.next = 3;
-              return addPictureFromProps(file);
-
-            case 3:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-
-    return function addPicture(_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
+  const addPicture = async file => {
+    setIsOpen(false);
+    await addPictureFromProps(file);
+  };
 
-  var openPanel = function openPanel() {
-    startTransition(function () {
+  const openPanel = () => {
+    startTransition(() => {
       setIsOpen(true);
     });
   };
 
-  var isActive = _fp["default"].includes(activeTool.type, group === null || group === void 0 ? void 0 : group.tools);
+  const isActive = _fp.default.includes(activeTool.type, group === null || group === void 0 ? void 0 : group.tools);
 
-  var groupIcon = (_ref3 = isActive ? activeTool.icon : group.img) !== null && _ref3 !== void 0 ? _ref3 : group.title;
-  (0, _react.useEffect)(function () {
+  const groupIcon = (_ref2 = isActive ? activeTool.icon : group.img) !== null && _ref2 !== void 0 ? _ref2 : group.title;
+  (0, _react.useEffect)(() => {
     if (!isOpen) return;
 
-    var closePanel = function closePanel() {
+    const closePanel = () => {
       setIsOpen(false);
     };
 
     document.addEventListener('click', closePanel);
-    return function () {
+    return () => {
       document.removeEventListener('click', closePanel);
     };
   }, [isOpen]);
-  var withMenu = withActionsInMenu || withUploadPicture || withUrlPicture || withLoadAndSave || withExport;
-  return withMenu ? /*#__PURE__*/_react["default"].createElement(StyledRelative, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  const 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,
     disabled: disabled,
     onClick: openPanel,
     icon: groupIcon
-  }), isOpen && /*#__PURE__*/_react["default"].createElement(StyledPanel, {
-    vertical: vertical,
-    alignment: alignment
-  }, withActionsInMenu && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
+  }), 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,
     disabled: disabled || !hasActionToUndo,
     img: _tools.UNDO_TOOL.icon,
     isActive: activeTool.id === _tools.UNDO_TOOL.id,
     setActive: undoAction
-  }), /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
+  }), /*#__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"], {
+  }), /*#__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: clearCanvas
-  }), (withUploadPicture || withUrlPicture || withLoadAndSave) && /*#__PURE__*/_react["default"].createElement("hr", null)), withUploadPicture && /*#__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,
     img: _tools.UPLOAD_PICTURE_TOOL.icon,
     accept: "image/png, image/gif, image/jpeg"
-  }), withUrlPicture && /*#__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"
-  }), (withUploadPicture || withUrlPicture) && 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,
     img: _tools.LOAD_TOOL.icon,
     accept: "application/JSON"
-  }), /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
+  }), /*#__PURE__*/_react.default.createElement(_Tool.default, {
     withText: true,
     disabled: disabled,
     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"], {
+  })), withExport && /*#__PURE__*/_react.default.createElement(_Tool.default, {
     withText: true,
     disabled: disabled,
     type: _tools.EXPORT_TOOL,
     img: _tools.EXPORT_TOOL.icon,
     isActive: activeTool.id === _tools.EXPORT_TOOL.id,
     setActive: exportCanvasInFile
-  }))) : null;
+  })))) : null;
 };
 
 var _default = MenuGroup;
-exports["default"] = _default;
+exports.default = _default;