@yorab/react-paint 0.2.2 → 0.4.1

package/dist/components/Canvas.js

@@ -25,8 +25,6 @@ var _Mode = require("../types/Mode");
 
 var _transform = require("../utils/transform");
 
-var _draw2 = require("../constants/draw");
-
 var _EditTextBox = _interopRequireDefault(require("./toolbox/EditTextBox"));
 
 var _useDrawableCanvas2 = _interopRequireDefault(require("../hooks/useDrawableCanvas"));
@@ -41,20 +39,32 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var drawCanvas = function drawCanvas(drawCtx, selectionCtx, selectionMode, width, height, activeTool, canvasOffset, shapes, selectedShape) {
+var renderDrawCanvas = function renderDrawCanvas(drawCtx, selectionMode, canvasSize, canvasOffset, shapes, selectionPadding, selectedShape) {
+  var width = canvasSize.width,
+      height = canvasSize.height,
+      scaleRatio = canvasSize.scaleRatio;
   drawCtx.clearRect(0, 0, width, height);
-  selectionCtx.clearRect(0, 0, width, height);
 
   for (var i = shapes.length - 1; i >= 0; i--) {
     if (selectionMode.mode !== _Mode.SelectionModeLib.textedition || shapes[i] !== selectedShape) {
-      (0, _draw.drawShape)(drawCtx, shapes[i], canvasOffset);
+      (0, _draw.drawShape)(drawCtx, shapes[i], scaleRatio, canvasOffset, selectionPadding);
     }
   }
+};
 
+var renderSelectionCanvas = function renderSelectionCanvas(selectionCtx, selectionMode, canvasSize, activeTool, canvasOffset, selectionPadding, selectionWidth, selectionColor, selectedShape) {
+  var width = canvasSize.width,
+      height = canvasSize.height,
+      scaleRatio = canvasSize.scaleRatio;
+  selectionCtx.clearRect(0, 0, width, height);
   selectedShape && activeTool !== _Shapes.ShapeEnum.brush && (0, _draw.drawSelection)({
     ctx: selectionCtx,
     shape: selectedShape,
+    scaleRatio: scaleRatio,
     canvasOffset: canvasOffset,
+    selectionPadding: selectionPadding,
+    selectionWidth: selectionWidth,
+    selectionColor: selectionColor,
     withAnchors: selectionMode.mode !== _Mode.SelectionModeLib.textedition
   });
 };
@@ -87,8 +97,7 @@ var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
       canGrow = _ref2.canGrow,
       _ref2$disabled = _ref2.disabled,
       disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-      width = _ref2.width,
-      height = _ref2.height,
+      canvasSize = _ref2.canvasSize,
       shapes = _ref2.shapes,
       addShape = _ref2.addShape,
       updateSingleShape = _ref2.updateSingleShape,
@@ -104,7 +113,11 @@ var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
       defaultConf = _ref2.defaultConf,
       isInsideComponent = _ref2.isInsideComponent,
       selectionMode = _ref2.selectionMode,
-      setSelectionMode = _ref2.setSelectionMode;
+      setSelectionMode = _ref2.setSelectionMode,
+      selectionWidth = _ref2.selectionWidth,
+      selectionColor = _ref2.selectionColor,
+      selectionPadding = _ref2.selectionPadding,
+      isEditMode = _ref2.isEditMode;
   var drawCanvasRef = (0, _react.useRef)(null);
   var selectionCanvasRef = (0, _react.useRef)(null); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 
@@ -115,13 +128,12 @@ var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
   var _useDrawableCanvas = (0, _useDrawableCanvas2["default"])({
     disabled: disabled,
     addShape: addShape,
+    canvasSize: canvasSize,
     drawCanvasRef: drawCanvasRef,
     setActiveTool: setActiveTool,
     shapes: shapes,
     defaultConf: defaultConf,
     selectionMode: selectionMode,
-    width: width,
-    height: height,
     activeTool: activeTool,
     isInsideComponent: isInsideComponent,
     setCanvasOffset: setCanvasOffset,
@@ -133,7 +145,8 @@ var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
     updateSingleShape: updateSingleShape,
     canvasOffset: canvasOffset,
     saveShapes: saveShapes,
-    setSelectionMode: setSelectionMode
+    setSelectionMode: setSelectionMode,
+    selectionPadding: selectionPadding
   }),
       hoverMode = _useDrawableCanvas.hoverMode;
 
@@ -156,31 +169,42 @@ var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
     updateSingleShape(resizedShape);
   }, [updateSingleShape, selectedShape]);
   (0, _react.useEffect)(function () {
-    var _drawCanvasRef$curren2, _selectionCanvasRef$c;
+    var _drawCanvasRef$curren2;
 
     var drawCtx = (_drawCanvasRef$curren2 = drawCanvasRef.current) === null || _drawCanvasRef$curren2 === void 0 ? void 0 : _drawCanvasRef$curren2.getContext('2d');
+    drawCtx && window.requestAnimationFrame(function () {
+      return renderDrawCanvas(drawCtx, selectionMode, canvasSize, canvasOffset, shapes, selectionPadding, selectedShape);
+    });
+  }, [shapes, selectionMode, selectedShape, canvasOffset, canvasSize, selectionPadding]);
+  (0, _react.useEffect)(function () {
+    var _selectionCanvasRef$c;
+
     var selectionCtx = (_selectionCanvasRef$c = selectionCanvasRef.current) === null || _selectionCanvasRef$c === void 0 ? void 0 : _selectionCanvasRef$c.getContext('2d');
-    drawCtx && selectionCtx && _fp["default"].throttle(_draw2.FRAMERATE_DRAW, drawCanvas)(drawCtx, selectionCtx, selectionMode, width, height, activeTool, canvasOffset, shapes, selectedShape);
-  }, [shapes, selectionMode, selectedShape, activeTool, canvasOffset, width, height]);
+    selectionCtx && window.requestAnimationFrame(function () {
+      return renderSelectionCanvas(selectionCtx, selectionMode, canvasSize, activeTool, canvasOffset, selectionPadding, selectionWidth, selectionColor, selectedShape);
+    });
+  }, [selectionMode, selectedShape, activeTool, canvasOffset, canvasSize, selectionPadding, selectionWidth, selectionColor]);
   return /*#__PURE__*/_react["default"].createElement(StyledCanvasBox, null, /*#__PURE__*/_react["default"].createElement(StyledCanvasContainer, {
     "data-grid": withGrid,
     "data-grow": canGrow
   }, /*#__PURE__*/_react["default"].createElement(StyledDrawCanvas, {
     ref: drawCanvasRef,
     "data-grow": canGrow,
-    width: width,
-    height: height
-  }), /*#__PURE__*/_react["default"].createElement(StyledSelectionCanvas, {
+    width: canvasSize.width,
+    height: canvasSize.height
+  }), isEditMode && /*#__PURE__*/_react["default"].createElement(StyledSelectionCanvas, {
     ref: selectionCanvasRef,
-    width: width,
-    height: height,
+    width: canvasSize.width,
+    height: canvasSize.height,
     "data-grow": canGrow,
     cursor: activeTool !== _Shapes.ToolEnum.selection && activeTool !== _Shapes.ToolEnum.move || hoverMode.mode === _Mode.SelectionModeLib.resize ? 'crosshair' : activeTool === _Shapes.ToolEnum.move || hoverMode.mode === _Mode.SelectionModeLib.translate ? 'move' : hoverMode.mode === _Mode.SelectionModeLib.rotate ? 'grab' : 'default'
-  }), selectionMode.mode === _Mode.SelectionModeLib.textedition && (selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) === _Shapes.ShapeEnum.text && /*#__PURE__*/_react["default"].createElement(_EditTextBox["default"], {
+  }), isEditMode && selectionMode.mode === _Mode.SelectionModeLib.textedition && (selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) === _Shapes.ShapeEnum.text && /*#__PURE__*/_react["default"].createElement(_EditTextBox["default"], {
+    scaleRatio: canvasSize.scaleRatio,
     disabled: disabled,
     shape: selectedShape,
     defaultValue: selectionMode.defaultValue,
-    updateValue: updateSelectedShapeText
+    updateValue: updateSelectedShapeText,
+    selectionPadding: selectionPadding
   })));
 });
 

package/dist/components/settings/ColorField.js

@@ -49,10 +49,6 @@ var StyledCustomColor = /*#__PURE__*/(0, _react2.styled)("div")({
     }]
   }
 });
-var StyledColorButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
-  name: "StyledColorButton",
-  "class": "sttf061"
-});
 
 var ColorField = function ColorField(_ref3) {
   var selectedSettings = _ref3.selectedSettings,
@@ -98,7 +94,7 @@ var ColorField = function ColorField(_ref3) {
     title: title,
     alignment: "left"
   }, /*#__PURE__*/_react["default"].createElement("div", null, _style.STYLE_COLORS.map(function (color, index) {
-    return /*#__PURE__*/_react["default"].createElement(StyledColorButton, {
+    return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
       title: color,
       key: index,
       selected: color === value,
@@ -109,14 +105,14 @@ var ColorField = function ColorField(_ref3) {
     }, /*#__PURE__*/_react["default"].createElement(StyledColor, {
       color: color === 'transparent' ? "url('data:image/svg+xml,".concat(_icons.encodedTransparentIcon, "')") : color
     }));
-  }), /*#__PURE__*/_react["default"].createElement(StyledColorButton, {
+  }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     type: "color",
     title: "Custom color",
     selected: !_fp["default"].includes(value, _style.STYLE_COLORS),
     value: value,
     onChange: handleChange
   }, /*#__PURE__*/_react["default"].createElement(StyledCustomColor, {
-    color: _fp["default"].includes(value, _style.STYLE_COLORS) ? 'black' : value
+    color: _fp["default"].includes(value, _style.STYLE_COLORS) ? 'var(--font-color)' : value
   }, /*#__PURE__*/_react["default"].createElement("span", {
     dangerouslySetInnerHTML: {
       __html: _icons.paletteIcon

package/dist/components/settings/LayoutButton.js

@@ -21,12 +21,12 @@ var StyleToggleLayoutButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"
 });
 
 var LayoutButton = function LayoutButton(_ref) {
-  var withLayouts = _ref.withLayouts,
+  var layersManipulation = _ref.layersManipulation,
       disabled = _ref.disabled,
       toggleLayoutPanel = _ref.toggleLayoutPanel;
   return /*#__PURE__*/_react["default"].createElement(StyleToggleLayoutButton, {
-    title: "Toggle layout",
-    "data-hidden": +(withLayouts === 'always' || withLayouts === 'never'),
+    title: "Toggle layers panel",
+    "data-hidden": !layersManipulation,
     disabled: disabled,
     onClick: toggleLayoutPanel,
     icon: _icons.layersIcon

package/dist/components/settings/Layouts.js

@@ -133,16 +133,18 @@ var Layout = function Layout(_ref) {
     dangerouslySetInnerHTML: {
       __html: (0, _style.getShapePicture)(shape.type)
     }
-  }), /*#__PURE__*/_react["default"].createElement(StyledSeparator, null), /*#__PURE__*/_react["default"].createElement(StyledVisibleButton, {
+  }), /*#__PURE__*/_react["default"].createElement("span", null, shape.id), /*#__PURE__*/_react["default"].createElement(StyledSeparator, null), /*#__PURE__*/_react["default"].createElement(StyledVisibleButton, {
     title: shape.visible ? 'Hide' : 'Show',
     "data-visible": shape.visible !== false,
     disabled: disabled,
+    selected: selected,
     onClick: onToggleShapeVisibility,
     icon: shape.visible === false ? _icons.visibilityOffIcon : _icons.visibilityIcon
   }), /*#__PURE__*/_react["default"].createElement(StyledLockedButton, {
     title: shape.locked ? 'Locked' : 'Unlocked',
     "data-locked": !!shape.locked,
     disabled: disabled,
+    selected: selected,
     onClick: onToggleShapeLock,
     icon: shape.locked ? _icons.lockedIcon : _icons.unlockedIcon
   }));
@@ -160,7 +162,6 @@ var Layouts = function Layouts(_ref2) {
       selectedShape = _ref2.selectedShape,
       moveShapes = _ref2.moveShapes,
       selectShape = _ref2.selectShape,
-      withLayouts = _ref2.withLayouts,
       isLayoutPanelShown = _ref2.isLayoutPanelShown;
 
   var _useState = (0, _react.useState)(undefined),
@@ -174,22 +175,8 @@ var Layouts = function Layouts(_ref2) {
     });
   };
 
-  return isLayoutPanelShown ? withLayouts === 'always' ? /*#__PURE__*/_react["default"].createElement(StyledLayouts, null, _fp["default"].map(function (shape) {
-    return /*#__PURE__*/_react["default"].createElement(Layout, {
-      key: shape.id,
-      shape: shape,
-      disabled: disabled,
-      layoutDragging: layoutDragging,
-      setLayoutDragging: setLayoutDragging,
-      selected: (selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.id) === shape.id,
-      handleSelect: selectShape,
-      handleRemove: removeShape,
-      onMoveShapes: moveShapes,
-      toggleShapeVisibility: toggleShapeVisibility,
-      toggleShapeLock: toggleShapeLock
-    });
-  }, shapes)) : /*#__PURE__*/_react["default"].createElement(StyledPanelLayouts, {
-    title: "Layouts",
+  return isLayoutPanelShown ? /*#__PURE__*/_react["default"].createElement(StyledPanelLayouts, {
+    title: "Layers",
     alignment: "right"
   }, /*#__PURE__*/_react["default"].createElement(StyledScrollingContent, null, /*#__PURE__*/_react["default"].createElement(StyledGridButton, {
     title: withGrid ? 'Grid on' : 'Grid off',
@@ -197,7 +184,7 @@ var Layouts = function Layouts(_ref2) {
     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 layout yet") : _fp["default"].map(function (shape) {
+  }, "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(function (shape) {
     return /*#__PURE__*/_react["default"].createElement(Layout, {
       key: shape.id,
       shape: shape,

package/dist/components/settings/SettingsBar.js

@@ -63,7 +63,7 @@ var SettingsBar = function SettingsBar(_ref) {
 
   var _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      withLayouts = _ref.withLayouts,
+      layersManipulation = _ref.layersManipulation,
       toggleLayoutPanel = _ref.toggleLayoutPanel,
       activeTool = _ref.activeTool,
       selectedShape = _ref.selectedShape,
@@ -251,8 +251,8 @@ var SettingsBar = function SettingsBar(_ref) {
     field: "style.globalAlpha",
     value: (_defaultConf$style7 = defaultConf.style) === null || _defaultConf$style7 === void 0 ? void 0 : _defaultConf$style7.globalAlpha,
     valueChanged: handleShapeStyleChange
-  })), /*#__PURE__*/_react["default"].createElement(StyledSeparator, null), /*#__PURE__*/_react["default"].createElement(_LayoutButton["default"], {
-    withLayouts: withLayouts,
+  })), /*#__PURE__*/_react["default"].createElement(StyledSeparator, null), layersManipulation && /*#__PURE__*/_react["default"].createElement(_LayoutButton["default"], {
+    layersManipulation: layersManipulation,
     disabled: disabled,
     toggleLayoutPanel: toggleLayoutPanel
   }));

package/dist/components/toolbox/EditTextBox.js

@@ -38,24 +38,30 @@ var StyledEditBox = /*#__PURE__*/(0, _react2.styled)("div")({
       return color;
     }],
     "s1unz6yq-2": [function (_ref3) {
-      var fontsize = _ref3.fontsize;
+      var padding = _ref3.padding;
+      return padding;
+    }, "px"],
+    "s1unz6yq-3": [function (_ref4) {
+      var fontsize = _ref4.fontsize;
       return fontsize;
     }, "px"],
-    "s1unz6yq-4": [function (_ref4) {
-      var fontfamily = _ref4.fontfamily;
+    "s1unz6yq-5": [function (_ref5) {
+      var fontfamily = _ref5.fontfamily;
       return fontfamily;
     }]
   }
 });
 
-var EditTextBox = function EditTextBox(_ref5) {
+var EditTextBox = function EditTextBox(_ref6) {
   var _shape$style$strokeCo, _shape$style, _shape$style$fontFami, _shape$style2;
 
-  var _ref5$disabled = _ref5.disabled,
-      disabled = _ref5$disabled === void 0 ? false : _ref5$disabled,
-      shape = _ref5.shape,
-      defaultValue = _ref5.defaultValue,
-      updateValue = _ref5.updateValue;
+  var _ref6$disabled = _ref6.disabled,
+      disabled = _ref6$disabled === void 0 ? false : _ref6$disabled,
+      scaleRatio = _ref6.scaleRatio,
+      shape = _ref6.shape,
+      defaultValue = _ref6.defaultValue,
+      updateValue = _ref6.updateValue,
+      selectionPadding = _ref6.selectionPadding;
   var ref = (0, _react.useRef)(null);
 
   var updateContentEditable = function updateContentEditable(e) {
@@ -68,16 +74,17 @@ var EditTextBox = function EditTextBox(_ref5) {
     ref.current.focus();
   }, [defaultValue]);
   var position = (0, _react.useMemo)(function () {
-    var _getShapeInfos = (0, _shapeData.getShapeInfos)(shape),
+    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);
-  }, [shape]);
+  }, [shape, selectionPadding]);
   return /*#__PURE__*/_react["default"].createElement(StyledEditBox, {
     ref: ref,
-    transform: "translate3D(".concat(position[0], "px, ").concat(position[1], "px, 0) rotate(").concat((0, _transform.radiansToDegrees)(shape.rotation), "deg)"),
-    fontsize: shape.fontSize,
+    transform: "translate3D(".concat(position[0] * scaleRatio, "px, ").concat(position[1] * scaleRatio, "px, 0) rotate(").concat((0, _transform.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',
     fontfamily: (_shape$style$fontFami = (_shape$style2 = shape.style) === null || _shape$style2 === void 0 ? void 0 : _shape$style2.fontFamily) !== null && _shape$style$fontFami !== void 0 ? _shape$style$fontFami : _style.STYLE_FONT_DEFAULT,
     contentEditable: !disabled,

package/dist/components/toolbox/MenuGroup.js

@@ -52,12 +52,24 @@ 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,
@@ -117,10 +129,15 @@ var MenuGroup = function MenuGroup(_ref) {
       document.addEventListener('click', closePanel);
     }, 0);
     return function () {
+      clearTimeout(timeoutId);
       document.removeEventListener('click', closePanel);
     };
   }, [isOpen]);
-  return /*#__PURE__*/_react["default"].createElement(StyledRelative, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+
+  var withPicture = _fp["default"].includes(_Shapes.ShapeEnum.picture, availableTools);
+
+  var withMenu = withActionsInMenu || withPicture || withLoadAndSave || withExport;
+  return withMenu ? /*#__PURE__*/_react["default"].createElement(StyledRelative, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     selected: isActive,
     title: group.title,
     disabled: disabled,
@@ -129,7 +146,33 @@ var MenuGroup = function MenuGroup(_ref) {
   }), isOpen && /*#__PURE__*/_react["default"].createElement(StyledPanel, {
     vertical: vertical,
     alignment: alignment
-  }, _fp["default"].includes(_Shapes.ShapeEnum.picture, availableTools) && /*#__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: _Shapes.ToolEnum.undo,
+    disabled: disabled || !hasActionToUndo,
+    lib: "Undo",
+    img: _icons.undoIcon,
+    isActive: activeTool === _Shapes.ToolEnum.undo,
+    setActive: undoAction
+  }), /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
+    withText: true,
+    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"], {
+    withText: true,
+    type: _Shapes.ToolEnum.clear,
+    disabled: disabled || !hasActionToClear,
+    lib: "Clear",
+    img: _icons.clearIcon,
+    isActive: activeTool === _Shapes.ToolEnum.clear,
+    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"], {
     withText: true,
     disabled: disabled,
     loadFile: addPicture,
@@ -143,7 +186,7 @@ var MenuGroup = function MenuGroup(_ref) {
     title: "Add picture from URL",
     icon: _icons.publicIcon,
     children: "Add picture from URL"
-  }), /*#__PURE__*/_react["default"].createElement("hr", null)), /*#__PURE__*/_react["default"].createElement(_LoadFileTool["default"], {
+  }), withLoadAndSave && /*#__PURE__*/_react["default"].createElement("hr", null)), withLoadAndSave && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_LoadFileTool["default"], {
     withText: true,
     disabled: disabled,
     loadFile: loadFile,
@@ -158,7 +201,7 @@ var MenuGroup = function MenuGroup(_ref) {
     img: _icons.saveIcon,
     isActive: activeTool === _Shapes.ToolEnum.saveFile,
     setActive: saveFile
-  }), /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
+  })), withExport && /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
     withText: true,
     disabled: disabled,
     type: _Shapes.ToolEnum["export"],
@@ -166,7 +209,7 @@ var MenuGroup = function MenuGroup(_ref) {
     img: _icons.exportFileIcon,
     isActive: activeTool === _Shapes.ToolEnum["export"],
     setActive: exportCanvasInFile
-  })));
+  }))) : null;
 };
 
 var _default = MenuGroup;

package/dist/components/toolbox/PictureUrlInput.js

@@ -36,7 +36,7 @@ var PictureUrlModal = function PictureUrlModal(_ref) {
   var pictureUrlInputRef = (0, _react.useRef)(null);
 
   var addPictureFromUrl = /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
       var _pictureUrlInputRef$c;
 
       var url;
@@ -44,23 +44,24 @@ var PictureUrlModal = function PictureUrlModal(_ref) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
+              e.preventDefault();
               url = (_pictureUrlInputRef$c = pictureUrlInputRef.current) === null || _pictureUrlInputRef$c === void 0 ? void 0 : _pictureUrlInputRef$c.value;
 
               if (!url) {
-                _context.next = 5;
+                _context.next = 6;
                 break;
               }
 
-              _context.next = 4;
+              _context.next = 5;
               return addPicture(url);
 
-            case 4:
+            case 5:
               togglePictureUrlModal();
 
-            case 5:
+            case 6:
               return _context.abrupt("return");
 
-            case 6:
+            case 7:
             case "end":
               return _context.stop();
           }
@@ -68,7 +69,7 @@ var PictureUrlModal = function PictureUrlModal(_ref) {
       }, _callee);
     }));
 
-    return function addPictureFromUrl() {
+    return function addPictureFromUrl(_x) {
       return _ref2.apply(this, arguments);
     };
   }();

package/dist/components/toolbox/Toolbar.js

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