@yorab/react-paint 0.3.0 → 0.4.0

package/Changelog.md

@@ -1,3 +1,15 @@
+# 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,20 +541,32 @@ 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"], {
     disabled: disabled,
     activeTool: activeTool,
@@ -491,7 +581,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 +609,10 @@ var App = function App(_ref5) {
     ref: canvasRef,
     canvasSize: canvasSize,
     selectionMode: selectionMode,
-    setSelectionMode: setSelectionMode
+    setSelectionMode: setSelectionMode,
+    selectionColor: canvasSelectionColor,
+    selectionWidth: canvasSelectionWidth,
+    selectionPadding: canvasSelectionPadding
   }), isEditMode && layersManipulation && /*#__PURE__*/_react["default"].createElement(_Layouts["default"], {
     withGrid: withGrid,
     setWithGrid: setWithGrid,

package/dist/components/Canvas.js

@@ -39,7 +39,7 @@ 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 drawCanvas = function drawCanvas(drawCtx, selectionCtx, selectionMode, canvasSize, activeTool, canvasOffset, shapes, selectionPadding, selectionWidth, selectionColor, selectedShape) {
   var width = canvasSize.width,
       height = canvasSize.height,
       scaleRatio = canvasSize.scaleRatio;
@@ -48,7 +48,7 @@ var drawCanvas = function drawCanvas(drawCtx, selectionCtx, selectionMode, canva
 
   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);
     }
   }
 
@@ -57,6 +57,9 @@ var drawCanvas = function drawCanvas(drawCtx, selectionCtx, selectionMode, canva
     shape: selectedShape,
     scaleRatio: scaleRatio,
     canvasOffset: canvasOffset,
+    selectionPadding: selectionPadding,
+    selectionWidth: selectionWidth,
+    selectionColor: selectionColor,
     withAnchors: selectionMode.mode !== _Mode.SelectionModeLib.textedition
   });
 };
@@ -105,7 +108,10 @@ 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;
   var drawCanvasRef = (0, _react.useRef)(null);
   var selectionCanvasRef = (0, _react.useRef)(null); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 
@@ -133,7 +139,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;
 
@@ -161,9 +168,9 @@ var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
     var drawCtx = (_drawCanvasRef$curren2 = drawCanvasRef.current) === null || _drawCanvasRef$curren2 === void 0 ? void 0 : _drawCanvasRef$curren2.getContext('2d');
     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);
+      return drawCanvas(drawCtx, selectionCtx, selectionMode, canvasSize, activeTool, canvasOffset, shapes, selectionPadding, selectionWidth, selectionColor, selectedShape);
     });
-  }, [shapes, selectionMode, selectedShape, activeTool, canvasOffset, canvasSize]);
+  }, [shapes, 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
@@ -183,7 +190,8 @@ var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
     disabled: disabled,
     shape: selectedShape,
     defaultValue: selectionMode.defaultValue,
-    updateValue: updateSelectedShapeText
+    updateValue: updateSelectedShapeText,
+    selectionPadding: selectionPadding
   })));
 });
 

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

@@ -58,6 +58,8 @@ var MenuGroup = function MenuGroup(_ref) {
       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 +123,12 @@ 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 withDivider = withPicture && (withLoadAndSave || withExport);
+  var withMenu = 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 +137,7 @@ 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"], {
+  }, withPicture && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_LoadFileTool["default"], {
     withText: true,
     disabled: disabled,
     loadFile: addPicture,
@@ -144,7 +151,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"], {
+  })), withDivider && /*#__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 +166,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 +174,7 @@ var MenuGroup = function MenuGroup(_ref) {
     img: _icons.exportFileIcon,
     isActive: activeTool === _Shapes.ToolEnum["export"],
     setActive: exportCanvasInFile
-  })));
+  }))) : null;
 };
 
 var _default = MenuGroup;

package/dist/components/toolbox/Toolbar.js

@@ -82,6 +82,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,
@@ -181,7 +183,9 @@ var Toolbar = function Toolbar(_ref) {
     saveFile: saveFile,
     togglePictureUrlModal: openPictureUrlModal,
     exportCanvasInFile: exportCanvasInFile,
-    availableTools: availableTools
+    availableTools: availableTools,
+    withLoadAndSave: withLoadAndSave,
+    withExport: withExport
   })), isMenuOpen && /*#__PURE__*/_react["default"].createElement(StyledToolsModal, {
     onClose: toggleTools
   }, availableTools.map(function (toolType) {

package/dist/constants/shapes.js

@@ -3,9 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SELECTION_ROTATED_ANCHOR_POSITION = exports.SELECTION_RESIZE_ANCHOR_POSITIONS = exports.SELECTION_PADDING = exports.SELECTION_ANCHOR_SIZE = void 0;
-var SELECTION_PADDING = 0;
-exports.SELECTION_PADDING = SELECTION_PADDING;
+exports.SELECTION_ROTATED_ANCHOR_POSITION = exports.SELECTION_RESIZE_ANCHOR_POSITIONS = exports.SELECTION_DEFAULT_WIDTH = exports.SELECTION_DEFAULT_PADDING = exports.SELECTION_DEFAULT_COLOR = exports.SELECTION_ANCHOR_SIZE = void 0;
+var SELECTION_DEFAULT_PADDING = 0;
+exports.SELECTION_DEFAULT_PADDING = SELECTION_DEFAULT_PADDING;
+var SELECTION_DEFAULT_WIDTH = 2;
+exports.SELECTION_DEFAULT_WIDTH = SELECTION_DEFAULT_WIDTH;
+var SELECTION_DEFAULT_COLOR = 'blue';
+exports.SELECTION_DEFAULT_COLOR = SELECTION_DEFAULT_COLOR;
 var SELECTION_ANCHOR_SIZE = 14;
 exports.SELECTION_ANCHOR_SIZE = SELECTION_ANCHOR_SIZE;
 var SELECTION_ROTATED_ANCHOR_POSITION = 16;

package/dist/hooks/useDrawableCanvas.js

@@ -25,7 +25,7 @@ var _transform = require("../utils/transform");
 
 var _data = require("../utils/data");
 
-var handleMove = function handleMove(e, canvasRef, activeTool, canvasOffset, selectedShape, selectionMode, canvasOffsetStartPosition, width, height, scaleRatio, setHoverMode, updateSingleShape, setCanvasOffset, setSelectedShape) {
+var handleMove = function handleMove(e, canvasRef, activeTool, canvasOffset, selectedShape, selectionMode, canvasOffsetStartPosition, width, height, scaleRatio, setHoverMode, updateSingleShape, setCanvasOffset, setSelectedShape, selectionPadding) {
   if (activeTool === _Shapes.ToolEnum.move && canvasOffsetStartPosition !== undefined) {
     var _cursorPosition = (0, _intersect.getCursorPosition)(e, canvasRef.current, width, height, scaleRatio);
 
@@ -37,7 +37,7 @@ var handleMove = function handleMove(e, canvasRef, activeTool, canvasOffset, sel
   var cursorPosition = (0, _intersect.getCursorPosition)(e, canvasRef.current, width, height, scaleRatio);
 
   if (selectionMode.mode === _Mode.SelectionModeLib["default"]) {
-    var positionIntersection = (0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset, scaleRatio, true) || {
+    var positionIntersection = (0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset, selectionPadding, scaleRatio, true) || {
       mode: _Mode.SelectionModeLib["default"]
     };
     setHoverMode(positionIntersection);
@@ -47,7 +47,7 @@ var handleMove = function handleMove(e, canvasRef, activeTool, canvasOffset, sel
     var ctx = (_canvasRef$current = canvasRef.current) === null || _canvasRef$current === void 0 ? void 0 : _canvasRef$current.getContext('2d');
     if (!ctx) return;
 
-    var _newShape = (0, _transform.transformShape)(ctx, selectedShape, cursorPosition, canvasOffset, selectionMode);
+    var _newShape = (0, _transform.transformShape)(ctx, selectedShape, cursorPosition, canvasOffset, selectionMode, selectionPadding);
 
     updateSingleShape(_newShape);
     setSelectedShape(_newShape);
@@ -75,7 +75,8 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
       updateSingleShape = _ref.updateSingleShape,
       canvasOffset = _ref.canvasOffset,
       saveShapes = _ref.saveShapes,
-      setSelectionMode = _ref.setSelectionMode;
+      setSelectionMode = _ref.setSelectionMode,
+      selectionPadding = _ref.selectionPadding;
   var width = canvasSize.width,
       height = canvasSize.height,
       scaleRatio = canvasSize.scaleRatio;
@@ -90,7 +91,7 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
   (0, _react.useEffect)(function () {
     var handleMouseMove = function handleMouseMove(e) {
       return window.requestAnimationFrame(function () {
-        return handleMove(e, selectionCanvasRef, activeTool, canvasOffset, selectedShape, selectionMode, canvasOffsetStartPosition, width, height, scaleRatio, setHoverMode, updateSingleShape, setCanvasOffset, setSelectedShape);
+        return handleMove(e, selectionCanvasRef, activeTool, canvasOffset, selectedShape, selectionMode, canvasOffsetStartPosition, width, height, scaleRatio, setHoverMode, updateSingleShape, setCanvasOffset, setSelectedShape, selectionPadding);
       });
     };
 
@@ -105,7 +106,7 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
         document.removeEventListener('touchmove', handleMouseMove);
       }
     };
-  }, [isInsideComponent, selectionCanvasRef, selectedShape, selectionMode, setHoverMode, canvasOffset, canvasOffsetStartPosition, width, height, scaleRatio, updateSingleShape, activeTool, setCanvasOffset, setSelectedShape]);
+  }, [isInsideComponent, selectionCanvasRef, selectedShape, selectionMode, setHoverMode, canvasOffset, canvasOffsetStartPosition, width, height, scaleRatio, updateSingleShape, activeTool, setCanvasOffset, setSelectedShape, selectionPadding]);
   (0, _react.useEffect)(function () {
     var handleMouseUp = function handleMouseUp(e) {
       if (selectionMode.mode === _Mode.SelectionModeLib.textedition) return;
@@ -159,7 +160,7 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
       var cursorPosition = (0, _intersect.getCursorPosition)(e, selectionCanvasRef.current, width, height, scaleRatio);
 
       if (activeTool === _Shapes.ToolEnum.selection) {
-        var _selectShape = (0, _selection.selectShape)(shapes, cursorPosition, scaleRatio, canvasOffset, selectedShape),
+        var _selectShape = (0, _selection.selectShape)(shapes, cursorPosition, scaleRatio, canvasOffset, selectedShape, selectionPadding),
             shape = _selectShape.shape,
             mode = _selectShape.mode;
 
@@ -213,7 +214,7 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
       ref.removeEventListener('mousedown', handleMouseDown);
       ref.removeEventListener('touchstart', handleMouseDown);
     };
-  }, [disabled, selectionCanvasRef, drawCanvasRef, selectedShape, activeTool, canvasOffset, setCanvasOffsetStartPosition, shapes, defaultConf, width, height, scaleRatio, updateSingleShape, addShape, setActiveTool, setSelectedShape, setSelectionMode]);
+  }, [disabled, selectionCanvasRef, drawCanvasRef, selectedShape, activeTool, canvasOffset, setCanvasOffsetStartPosition, shapes, defaultConf, width, height, scaleRatio, updateSingleShape, addShape, setActiveTool, setSelectedShape, setSelectionMode, selectionPadding]);
   (0, _react.useEffect)(function () {
     var ref = selectionCanvasRef.current;
     if (!ref) return;
@@ -223,7 +224,7 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
         if ((selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) === _Shapes.ShapeEnum.text) {
           var cursorPosition = (0, _intersect.getCursorPosition)(e, selectionCanvasRef.current, width, height, scaleRatio);
 
-          if ((0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset)) {
+          if ((0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset, selectionPadding)) {
             setSelectionMode({
               mode: _Mode.SelectionModeLib.textedition,
               defaultValue: selectedShape.value
@@ -242,7 +243,7 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
         ref.removeEventListener('dblclick', handleDoubleClick);
       }
     };
-  }, [isInsideComponent, selectionCanvasRef, activeTool, selectedShape, width, height, scaleRatio, canvasOffset, setSelectionMode]);
+  }, [isInsideComponent, selectionCanvasRef, activeTool, selectedShape, width, height, scaleRatio, canvasOffset, setSelectionMode, selectionPadding]);
   return {
     hoverMode: hoverMode
   };

package/dist/hooks/useShapes.js

@@ -78,9 +78,10 @@ var useShapes = function useShapes() {
             case 4:
               pictureShape = _context.sent;
               addShape(pictureShape);
+              saveShapes();
               return _context.abrupt("return", pictureShape);
 
-            case 7:
+            case 8:
             case "end":
               return _context.stop();
           }
@@ -91,7 +92,7 @@ var useShapes = function useShapes() {
     return function (_x) {
       return _ref.apply(this, arguments);
     };
-  }(), [addShape]);
+  }(), [addShape, saveShapes]);
   var updateShape = (0, _react.useCallback)(function (updatedShape) {
     var withSave = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     shapesRef.current = shapesRef.current.map(function (marker) {