@yorab/react-paint 0.3.0 → 0.4.2

package/Changelog.md

@@ -1,3 +1,28 @@
+# V.0.4.2
+
+- fix toolgroup not displayed
+- add passive prop to event listener
+
+# V.0.4.1
+
+- prevent mounting selection canvas when viewer mode
+- prevent drawing selection when not needed
+- Click on toolbar tool group always enable a tool
+- fix input and select options not being impacted by
+- new reponsive for toolbar
+
+# V.0.4.0
+
+- Add possibility to customize UI from props
+
+# V.0.3.1
+
+- Add prop to change canvas background color
+- Move some props to options
+- fix Picture shape not being saved and not triggering onDataChanged
+- small picture are upscaled to fit container when imported
+- Add prop to choose to display save/load/export
+
 # V.0.3.0 :
 
 - prevent picture from url submit to reload page

package/README.md

@@ -1,9 +1,9 @@
 # known issues :
 
-## critical
+## To resolve before beta release
 
 - Text tool broken since 0.2.2
-- double click not working with touch (fix: fake it countinng delay between touch)
+- double click not working with touch (fix: fake it counting delay between touch)
 
 ## mobile/touch
 
@@ -11,6 +11,8 @@
 
 ## other
 
-- TextEdit cursor overflow MINOR (quick fix : edit on modale)
-- TextEdit copy/paste contains html and breaks display
+- TextEdit cursor overflow MINOR (quick fix : edit on modale ?)
+- TextEdit copy/paste containing html breaks display
 - circle resizing only goes one direction
+- New text component opacity range is dancing
+- adding padding to selection result in wrong intersection calculs

package/dist/components/App.js

@@ -57,6 +57,8 @@ var _data = require("../utils/data");
 
 var _useResizeObserver = _interopRequireDefault(require("../hooks/useResizeObserver"));
 
+var _shapes = require("../constants/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); }
 
 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; }
@@ -69,13 +71,49 @@ var StyledApp = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledApp",
   "class": "s1v9piyg",
   vars: {
-    "s1v9piyg-0": [function (_ref) {
-      var canvaswidth = _ref.canvaswidth;
-      return "min(100%, ".concat(canvaswidth, "px)");
+    "s1v9piyg-0": [function (props) {
+      return props.toolbarBackgroundColor;
+    }],
+    "s1v9piyg-1": [function (props) {
+      return props.dividerColor;
+    }],
+    "s1v9piyg-2": [function (props) {
+      return props.fontRadius;
+    }, "px"],
+    "s1v9piyg-3": [function (props) {
+      return props.fontDisabledColor;
+    }],
+    "s1v9piyg-4": [function (props) {
+      return props.fontDisabledBackgroundColor;
+    }],
+    "s1v9piyg-5": [function (props) {
+      return props.fontColor;
+    }],
+    "s1v9piyg-6": [function (props) {
+      return props.fontBackgroundColor;
+    }],
+    "s1v9piyg-7": [function (props) {
+      return props.fontSelectedColor;
     }],
-    "s1v9piyg-1": [function (_ref2) {
-      var canvaswidth = _ref2.canvaswidth;
-      return canvaswidth;
+    "s1v9piyg-8": [function (props) {
+      return props.fontSelectedBackgroundColor;
+    }],
+    "s1v9piyg-9": [function (props) {
+      return props.fontHoverColor;
+    }],
+    "s1v9piyg-10": [function (props) {
+      return props.fontHoverBackgroundColor;
+    }],
+    "s1v9piyg-11": [function (props) {
+      return props.canvasBackgroundColor;
+    }],
+    "s1v9piyg-12": [function (_ref) {
+      var canvasWidth = _ref.canvasWidth;
+      return "min(100%, ".concat(canvasWidth, "px)");
+    }],
+    "s1v9piyg-13": [function (_ref2) {
+      var canvasWidth = _ref2.canvasWidth;
+      return canvasWidth;
     }, "px"]
   }
 });
@@ -96,18 +134,38 @@ var StyledRow = /*#__PURE__*/(0, _react2.styled)("div")({
 var DEFAULT_TOOLS = [_Shapes.ShapeEnum.brush, _Shapes.ShapeEnum.line, _Shapes.ShapeEnum.polygon, _Shapes.ShapeEnum.curve, _Shapes.ShapeEnum.rect, _Shapes.ShapeEnum.square, _Shapes.ShapeEnum.circle, _Shapes.ShapeEnum.ellipse, _Shapes.ShapeEnum.text, _Shapes.ShapeEnum.picture];
 var DEFAULT_OPTIONS = {
   layersManipulation: true,
-  gridVisible: false
+  gridVisible: false,
+  canGrow: false,
+  canShrink: true,
+  withExport: true,
+  withLoadAndSave: true,
+  availableTools: DEFAULT_TOOLS,
+  uiStyle: {
+    toolbarBackgroundColor: 'white',
+    dividerColor: '#36418129',
+    fontRadius: 8,
+    fontDisabledColor: '#3641812b',
+    fontDisabledBackgroundColor: 'transparent',
+    fontColor: '#364181',
+    fontBackgroundColor: 'transparent',
+    fontSelectedColor: 'white',
+    fontSelectedBackgroundColor: '#364181',
+    fontHoverColor: '#364181',
+    fontHoverBackgroundColor: '#afd8d8',
+    canvasBackgroundColor: 'white',
+    canvasSelectionColor: _shapes.SELECTION_DEFAULT_COLOR,
+    canvasSelectionWidth: _shapes.SELECTION_DEFAULT_WIDTH,
+    canvasSelectionPadding: _shapes.SELECTION_DEFAULT_PADDING
+  }
 };
 
 var App = function App(_ref5) {
+  var _options$uiStyle;
+
   var _ref5$width = _ref5.width,
       canvasWidth = _ref5$width === void 0 ? 1000 : _ref5$width,
       _ref5$height = _ref5.height,
       canvasHeight = _ref5$height === void 0 ? 600 : _ref5$height,
-      _ref5$canGrow = _ref5.canGrow,
-      canGrow = _ref5$canGrow === void 0 ? false : _ref5$canGrow,
-      _ref5$canShrink = _ref5.canShrink,
-      canShrink = _ref5$canShrink === void 0 ? true : _ref5$canShrink,
       shapesFromProps = _ref5.shapes,
       classNameFromProps = _ref5.className,
       _ref5$mode = _ref5.mode,
@@ -115,14 +173,34 @@ var App = function App(_ref5) {
       _ref5$disabled = _ref5.disabled,
       disabledFromProps = _ref5$disabled === void 0 ? false : _ref5$disabled,
       onDataChanged = _ref5.onDataChanged,
-      _ref5$availableTools = _ref5.availableTools,
-      availableToolsFromProps = _ref5$availableTools === void 0 ? DEFAULT_TOOLS : _ref5$availableTools,
       apiRef = _ref5.apiRef,
       options = _ref5.options;
 
   var _DEFAULT_OPTIONS$opti = _objectSpread(_objectSpread({}, DEFAULT_OPTIONS), options),
       layersManipulation = _DEFAULT_OPTIONS$opti.layersManipulation,
-      gridVisible = _DEFAULT_OPTIONS$opti.gridVisible;
+      gridVisible = _DEFAULT_OPTIONS$opti.gridVisible,
+      canGrow = _DEFAULT_OPTIONS$opti.canGrow,
+      canShrink = _DEFAULT_OPTIONS$opti.canShrink,
+      withExport = _DEFAULT_OPTIONS$opti.withExport,
+      withLoadAndSave = _DEFAULT_OPTIONS$opti.withLoadAndSave,
+      availableToolsFromProps = _DEFAULT_OPTIONS$opti.availableTools;
+
+  var _DEFAULT_OPTIONS$uiSt = _objectSpread(_objectSpread({}, DEFAULT_OPTIONS.uiStyle), (_options$uiStyle = options === null || options === void 0 ? void 0 : options.uiStyle) !== null && _options$uiStyle !== void 0 ? _options$uiStyle : {}),
+      toolbarBackgroundColor = _DEFAULT_OPTIONS$uiSt.toolbarBackgroundColor,
+      dividerColor = _DEFAULT_OPTIONS$uiSt.dividerColor,
+      fontRadius = _DEFAULT_OPTIONS$uiSt.fontRadius,
+      fontDisabledColor = _DEFAULT_OPTIONS$uiSt.fontDisabledColor,
+      fontDisabledBackgroundColor = _DEFAULT_OPTIONS$uiSt.fontDisabledBackgroundColor,
+      fontColor = _DEFAULT_OPTIONS$uiSt.fontColor,
+      fontBackgroundColor = _DEFAULT_OPTIONS$uiSt.fontBackgroundColor,
+      fontSelectedColor = _DEFAULT_OPTIONS$uiSt.fontSelectedColor,
+      fontSelectedBackgroundColor = _DEFAULT_OPTIONS$uiSt.fontSelectedBackgroundColor,
+      fontHoverColor = _DEFAULT_OPTIONS$uiSt.fontHoverColor,
+      fontHoverBackgroundColor = _DEFAULT_OPTIONS$uiSt.fontHoverBackgroundColor,
+      canvasBackgroundColor = _DEFAULT_OPTIONS$uiSt.canvasBackgroundColor,
+      canvasSelectionColor = _DEFAULT_OPTIONS$uiSt.canvasSelectionColor,
+      canvasSelectionWidth = _DEFAULT_OPTIONS$uiSt.canvasSelectionWidth,
+      canvasSelectionPadding = _DEFAULT_OPTIONS$uiSt.canvasSelectionPadding;
 
   var isEditMode = mode !== 'viewer';
   var disabled = disabledFromProps || !isEditMode;
@@ -253,7 +331,7 @@ var App = function App(_ref5) {
     setIsLoading(true);
 
     try {
-      var dataURL = canvasRef.current && (0, _file.getCanvasImage)(shapesRef.current, canvasOffset, canvasWidth, canvasHeight);
+      var dataURL = canvasRef.current && (0, _file.getCanvasImage)(shapesRef.current, canvasOffset, canvasWidth, canvasHeight, canvasSelectionPadding);
 
       if (!dataURL) {
         throw new Error();
@@ -273,7 +351,7 @@ var App = function App(_ref5) {
     } finally {
       setIsLoading(false);
     }
-  }, [addSnackbar, shapesRef, canvasOffset, canvasWidth, canvasHeight]);
+  }, [addSnackbar, shapesRef, canvasOffset, canvasWidth, canvasHeight, canvasSelectionPadding]);
   var saveFile = (0, _react.useCallback)(function () {
     setIsLoading(true);
 
@@ -463,21 +541,34 @@ var App = function App(_ref5) {
     if (!apiRef) return;
     apiRef.current = {
       getCurrentImage: function getCurrentImage() {
-        return canvasRef.current ? (0, _file.getCanvasImage)(shapesRef.current, canvasOffset, canvasWidth, canvasHeight) : undefined;
+        return canvasRef.current ? (0, _file.getCanvasImage)(shapesRef.current, canvasOffset, canvasWidth, canvasHeight, canvasSelectionPadding) : undefined;
       },
       getCurrentData: function getCurrentData() {
         return (0, _data.cleanShapesBeforeExport)(shapesRef.current); //TODO : create different types for stored shapes
       }
     };
-  }, [apiRef, shapesRef, canvasOffset, canvasWidth, canvasHeight]);
+  }, [apiRef, shapesRef, canvasOffset, canvasWidth, canvasHeight, canvasSelectionPadding]);
   var className = "".concat(classNameFromProps !== null && classNameFromProps !== void 0 ? classNameFromProps : '', " ").concat(isLayoutPanelShown ? 'layoutPanelOpened' : '');
   return /*#__PURE__*/_react["default"].createElement(StyledApp, {
     ref: componentRef,
     className: className,
-    canvaswidth: canvasWidth,
     "data-grow": canGrow,
-    "data-shrink": canShrink
+    "data-shrink": canShrink,
+    canvasWidth: canvasWidth,
+    toolbarBackgroundColor: toolbarBackgroundColor,
+    dividerColor: dividerColor,
+    fontRadius: fontRadius,
+    fontDisabledColor: fontDisabledColor,
+    fontDisabledBackgroundColor: fontDisabledBackgroundColor,
+    fontColor: fontColor,
+    fontBackgroundColor: fontBackgroundColor,
+    fontSelectedColor: fontSelectedColor,
+    fontSelectedBackgroundColor: fontSelectedBackgroundColor,
+    fontHoverColor: fontHoverColor,
+    fontHoverBackgroundColor: fontHoverBackgroundColor,
+    canvasBackgroundColor: canvasBackgroundColor
   }, isEditMode && /*#__PURE__*/_react["default"].createElement(_Toolbar["default"], {
+    width: canvasSize.width,
     disabled: disabled,
     activeTool: activeTool,
     clearCanvas: clearCanvas,
@@ -491,7 +582,9 @@ var App = function App(_ref5) {
     hasActionToClear: canClear,
     undoAction: undoAction,
     redoAction: redoAction,
-    availableTools: availableTools
+    availableTools: availableTools,
+    withExport: withExport,
+    withLoadAndSave: withLoadAndSave
   }), /*#__PURE__*/_react["default"].createElement(StyledRow, {
     "data-grow": canGrow,
     width: canvasSize.width,
@@ -517,7 +610,11 @@ var App = function App(_ref5) {
     ref: canvasRef,
     canvasSize: canvasSize,
     selectionMode: selectionMode,
-    setSelectionMode: setSelectionMode
+    setSelectionMode: setSelectionMode,
+    selectionColor: canvasSelectionColor,
+    selectionWidth: canvasSelectionWidth,
+    selectionPadding: canvasSelectionPadding,
+    isEditMode: isEditMode
   }), isEditMode && layersManipulation && /*#__PURE__*/_react["default"].createElement(_Layouts["default"], {
     withGrid: withGrid,
     setWithGrid: setWithGrid,

package/dist/components/Canvas.js

@@ -39,24 +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, canvasSize, 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], scaleRatio, 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
   });
 };
@@ -105,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
 
@@ -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,14 +169,21 @@ 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 && window.requestAnimationFrame(function () {
-      return drawCanvas(drawCtx, selectionCtx, selectionMode, canvasSize, activeTool, canvasOffset, shapes, selectedShape);
+    selectionCtx && window.requestAnimationFrame(function () {
+      return renderSelectionCanvas(selectionCtx, selectionMode, canvasSize, activeTool, canvasOffset, selectionPadding, selectionWidth, selectionColor, selectedShape);
     });
-  }, [shapes, selectionMode, selectedShape, activeTool, canvasOffset, canvasSize]);
+  }, [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
@@ -172,18 +192,19 @@ var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
     "data-grow": canGrow,
     width: canvasSize.width,
     height: canvasSize.height
-  }), /*#__PURE__*/_react["default"].createElement(StyledSelectionCanvas, {
+  }), isEditMode && /*#__PURE__*/_react["default"].createElement(StyledSelectionCanvas, {
     ref: selectionCanvasRef,
     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/toolbox/EditTextBox.js

@@ -38,25 +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,
-      scaleRatio = _ref5.scaleRatio,
-      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) {
@@ -69,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] * 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,
@@ -121,7 +133,11 @@ var MenuGroup = function MenuGroup(_ref) {
       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,
@@ -130,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,
@@ -144,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,
@@ -159,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"],
@@ -167,7 +209,7 @@ var MenuGroup = function MenuGroup(_ref) {
     img: _icons.exportFileIcon,
     isActive: activeTool === _Shapes.ToolEnum["export"],
     setActive: exportCanvasInFile
-  })));
+  }))) : null;
 };
 
 var _default = MenuGroup;