@yorab/react-paint 0.2.2 → 0.4.1

package/dist/components/App.js

@@ -15,6 +15,8 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _fp = _interopRequireDefault(require("lodash/fp"));
@@ -51,21 +53,67 @@ var _snackbar = require("../constants/snackbar");
 
 var _Loading = _interopRequireDefault(require("./common/Loading"));
 
+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; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+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 StyledApp = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledApp",
   "class": "s1v9piyg",
   vars: {
-    "s1v9piyg-0": [function (_ref) {
-      var width = _ref.width;
-      return "min(100%, ".concat(width, "px)");
+    "s1v9piyg-0": [function (props) {
+      return props.toolbarBackgroundColor;
     }],
-    "s1v9piyg-1": [function (_ref2) {
-      var width = _ref2.width;
-      return width;
+    "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-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"]
   }
 });
@@ -84,29 +132,90 @@ 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,
+  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,
-      width = _ref5$width === void 0 ? 1000 : _ref5$width,
+      canvasWidth = _ref5$width === void 0 ? 1000 : _ref5$width,
       _ref5$height = _ref5.height,
-      height = _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,
-      _ref5$withLayouts = _ref5.withLayouts,
-      withLayouts = _ref5$withLayouts === void 0 ? 'hidden' : _ref5$withLayouts,
+      canvasHeight = _ref5$height === void 0 ? 600 : _ref5$height,
       shapesFromProps = _ref5.shapes,
       classNameFromProps = _ref5.className,
+      _ref5$mode = _ref5.mode,
+      mode = _ref5$mode === void 0 ? 'editor' : _ref5$mode,
       _ref5$disabled = _ref5.disabled,
-      disabled = _ref5$disabled === void 0 ? false : _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;
+      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,
+      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;
   var componentRef = (0, _react.useRef)(null);
   var canvasRef = (0, _react.useRef)(null);
 
+  var _useState = (0, _react.useState)({
+    width: canvasWidth,
+    height: canvasHeight,
+    scaleRatio: 1
+  }),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      canvasSize = _useState2[0],
+      setCanvasSize = _useState2[1];
+
   var availableTools = _fp["default"].intersection(DEFAULT_TOOLS, availableToolsFromProps);
 
   var _useComponent = (0, _useComponent2["default"])({
@@ -115,7 +224,7 @@ var App = function App(_ref5) {
   }),
       isInsideComponent = _useComponent.isInsideComponent;
 
-  var _useState = (0, _react.useState)({
+  var _useState3 = (0, _react.useState)({
     style: {
       fillColor: 'transparent',
       strokeColor: 'black',
@@ -127,46 +236,46 @@ var App = function App(_ref5) {
       fontFamily: _style.STYLE_FONT_DEFAULT
     }
   }),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      defaultConf = _useState2[0],
-      setDefaultConf = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(false),
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      isLoading = _useState4[0],
-      setIsLoading = _useState4[1];
+      defaultConf = _useState4[0],
+      setDefaultConf = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(withLayouts === 'always' || withLayouts === 'visible'),
+  var _useState5 = (0, _react.useState)(false),
       _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      isLayoutPanelShown = _useState6[0],
-      setIsLayoutPanelShown = _useState6[1];
+      isLoading = _useState6[0],
+      setIsLoading = _useState6[1];
 
-  var _useState7 = (0, _react.useState)([0, 0]),
+  var _useState7 = (0, _react.useState)(false),
       _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      canvasOffset = _useState8[0],
-      setCanvasOffset = _useState8[1];
+      isLayoutPanelShown = _useState8[0],
+      setIsLayoutPanelShown = _useState8[1];
 
-  var _useState9 = (0, _react.useState)(undefined),
+  var _useState9 = (0, _react.useState)([0, 0]),
       _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-      canvasOffsetStartPosition = _useState10[0],
-      setCanvasOffsetStartPosition = _useState10[1];
+      canvasOffset = _useState10[0],
+      setCanvasOffset = _useState10[1];
 
-  var _useState11 = (0, _react.useState)(_Shapes.ToolEnum.selection),
+  var _useState11 = (0, _react.useState)(undefined),
       _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-      activeTool = _useState12[0],
-      setActiveTool = _useState12[1];
+      canvasOffsetStartPosition = _useState12[0],
+      setCanvasOffsetStartPosition = _useState12[1];
 
-  var _useState13 = (0, _react.useState)({
-    mode: _Mode.SelectionModeLib["default"]
-  }),
+  var _useState13 = (0, _react.useState)(_Shapes.ToolEnum.selection),
       _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
-      selectionMode = _useState14[0],
-      setSelectionMode = _useState14[1];
+      activeTool = _useState14[0],
+      setActiveTool = _useState14[1];
 
-  var _useState15 = (0, _react.useState)(true),
+  var _useState15 = (0, _react.useState)({
+    mode: _Mode.SelectionModeLib["default"]
+  }),
       _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
-      withGrid = _useState16[0],
-      setWithGrid = _useState16[1];
+      selectionMode = _useState16[0],
+      setSelectionMode = _useState16[1];
+
+  var _useState17 = (0, _react.useState)(gridVisible),
+      _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
+      withGrid = _useState18[0],
+      setWithGrid = _useState18[1];
 
   var _useShapes = (0, _useShapes2["default"])(onDataChanged),
       shapesRef = _useShapes.shapesRef,
@@ -222,17 +331,13 @@ var App = function App(_ref5) {
     setIsLoading(true);
 
     try {
-      var dataURL = canvasRef.current && (0, _file.getCanvasImage)(canvasRef.current);
+      var dataURL = canvasRef.current && (0, _file.getCanvasImage)(shapesRef.current, canvasOffset, canvasWidth, canvasHeight, canvasSelectionPadding);
 
       if (!dataURL) {
         throw new Error();
       }
 
       (0, _file.downloadFile)(dataURL, 'drawing.png');
-      addSnackbar({
-        type: _snackbar.SnackbarTypeEnum.Success,
-        text: 'Export terminé !'
-      });
       setIsLoading(false);
     } catch (e) {
       if (e instanceof Error) {
@@ -240,13 +345,13 @@ var App = function App(_ref5) {
           type: _snackbar.SnackbarTypeEnum.Error,
           text: "L'export a échoué"
         });
-      } else {
-        console.warn(e);
       }
+
+      console.warn(e);
     } finally {
       setIsLoading(false);
     }
-  }, [addSnackbar]);
+  }, [addSnackbar, shapesRef, canvasOffset, canvasWidth, canvasHeight, canvasSelectionPadding]);
   var saveFile = (0, _react.useCallback)(function () {
     setIsLoading(true);
 
@@ -254,53 +359,39 @@ var App = function App(_ref5) {
       var content = (0, _file.encodeShapesInString)(shapesRef.current);
 
       if (!content) {
-        throw new Error("L'enregistrement a échoué");
+        throw new Error("L'encodage a échoué");
       }
 
       (0, _file.downloadFile)(content, 'drawing.json');
-      addSnackbar({
-        type: _snackbar.SnackbarTypeEnum.Success,
-        text: 'Fichier enregistré !'
-      });
       setIsLoading(false);
     } catch (e) {
       if (e instanceof Error) {
         addSnackbar({
           type: _snackbar.SnackbarTypeEnum.Error,
-          text: e.message
+          text: "L'enregistrement a échoué"
         });
-      } else {
-        console.warn(e);
       }
+
+      console.warn(e);
     } finally {
       setIsLoading(false);
     }
   }, [shapesRef, addSnackbar]);
   var loadJson = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref6 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(json) {
-      var isValidated, shapes;
+      var shapes;
       return _regenerator["default"].wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              isValidated = (0, _file.validateJson)(json);
-
-              if (isValidated) {
-                _context.next = 3;
-                break;
-              }
-
-              throw new Error('Le fichier est corrompu');
-
-            case 3:
-              _context.next = 5;
+              _context.next = 2;
               return (0, _file.decodePicturesInShapes)(json);
 
-            case 5:
+            case 2:
               shapes = _context.sent;
               clearCanvas(shapes, true);
 
-            case 7:
+            case 4:
             case "end":
               return _context.stop();
           }
@@ -334,7 +425,7 @@ var App = function App(_ref5) {
                 type: _snackbar.SnackbarTypeEnum.Success,
                 text: 'Fichier chargé !'
               });
-              _context2.next = 13;
+              _context2.next = 14;
               break;
 
             case 10:
@@ -344,23 +435,23 @@ var App = function App(_ref5) {
               if (_context2.t0 instanceof Error) {
                 addSnackbar({
                   type: _snackbar.SnackbarTypeEnum.Error,
-                  text: _context2.t0.message
+                  text: 'Le chargement a échoué'
                 });
-              } else {
-                console.warn(_context2.t0);
               }
 
-            case 13:
-              _context2.prev = 13;
+              console.warn(_context2.t0);
+
+            case 14:
+              _context2.prev = 14;
               setIsLoading(false);
-              return _context2.finish(13);
+              return _context2.finish(14);
 
-            case 16:
+            case 17:
             case "end":
               return _context2.stop();
           }
         }
-      }, _callee2, null, [[1, 10, 13, 16]]);
+      }, _callee2, null, [[1, 10, 14, 17]]);
     }));
 
     return function (_x2) {
@@ -377,12 +468,12 @@ var App = function App(_ref5) {
               setIsLoading(true);
               _context3.prev = 1;
               _context3.next = 4;
-              return addPictureShape(fileOrUrl);
+              return addPictureShape(fileOrUrl, canvasWidth, canvasHeight);
 
             case 4:
               pictureShape = _context3.sent;
               selectShape(pictureShape);
-              _context3.next = 11;
+              _context3.next = 12;
               break;
 
             case 8:
@@ -392,29 +483,37 @@ var App = function App(_ref5) {
               if (_context3.t0 instanceof Error) {
                 addSnackbar({
                   type: _snackbar.SnackbarTypeEnum.Error,
-                  text: _context3.t0.message
+                  text: 'Le chargement a échoué'
                 });
-              } else {
-                console.warn(_context3.t0);
               }
 
-            case 11:
-              _context3.prev = 11;
+              console.warn(_context3.t0);
+
+            case 12:
+              _context3.prev = 12;
               setIsLoading(false);
-              return _context3.finish(11);
+              return _context3.finish(12);
 
-            case 14:
+            case 15:
             case "end":
               return _context3.stop();
           }
         }
-      }, _callee3, null, [[1, 8, 11, 14]]);
+      }, _callee3, null, [[1, 8, 12, 15]]);
     }));
 
     return function (_x3) {
       return _ref8.apply(this, arguments);
     };
-  }(), [addPictureShape, selectShape, addSnackbar]);
+  }(), [addPictureShape, selectShape, addSnackbar, canvasWidth, canvasHeight]);
+  var onResized = (0, _react.useCallback)(function (measuredWidth, measuredHeight) {
+    var scaleRatio = measuredWidth / canvasWidth;
+    setCanvasSize({
+      width: measuredWidth,
+      height: canvasHeight * scaleRatio,
+      scaleRatio: scaleRatio
+    });
+  }, [canvasWidth, canvasHeight]);
   (0, _useKeyboard["default"])({
     isInsideComponent: isInsideComponent,
     isEditingText: selectionMode.mode === _Mode.SelectionModeLib.textedition,
@@ -426,6 +525,10 @@ var App = function App(_ref5) {
     backwardShape: backwardShape,
     forwardShape: forwardShape
   });
+  (0, _useResizeObserver["default"])({
+    element: componentRef,
+    onResized: onResized
+  });
   (0, _react.useEffect)(function () {
     if (!isInsideComponent) setSelectedShape(undefined);
   }, [isInsideComponent, setSelectedShape]);
@@ -438,21 +541,34 @@ var App = function App(_ref5) {
     if (!apiRef) return;
     apiRef.current = {
       getCurrentImage: function getCurrentImage() {
-        return canvasRef.current ? (0, _file.getCanvasImage)(canvasRef.current) : undefined;
+        return canvasRef.current ? (0, _file.getCanvasImage)(shapesRef.current, canvasOffset, canvasWidth, canvasHeight, canvasSelectionPadding) : undefined;
       },
       getCurrentData: function getCurrentData() {
-        return (0, _file.encodePicturesInShapes)(shapesRef.current);
+        return (0, _data.cleanShapesBeforeExport)(shapesRef.current); //TODO : create different types for stored shapes
       }
     };
-  }, [apiRef, shapesRef]);
+  }, [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,
-    width: width,
     "data-grow": canGrow,
-    "data-shrink": canShrink
-  }, /*#__PURE__*/_react["default"].createElement(_Toolbar["default"], {
+    "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,
@@ -466,11 +582,13 @@ 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: width,
-    aspectRatio: "calc(".concat(width, " / ").concat(height, ")")
+    width: canvasSize.width,
+    aspectRatio: "calc(".concat(canvasSize.width, " / ").concat(canvasSize.height, ")")
   }, /*#__PURE__*/_react["default"].createElement(_Canvas["default"], {
     canGrow: canGrow,
     withGrid: withGrid,
@@ -490,11 +608,14 @@ var App = function App(_ref5) {
     defaultConf: defaultConf,
     saveShapes: saveShapes,
     ref: canvasRef,
-    width: width,
-    height: height,
+    canvasSize: canvasSize,
     selectionMode: selectionMode,
-    setSelectionMode: setSelectionMode
-  }), /*#__PURE__*/_react["default"].createElement(_Layouts["default"], {
+    setSelectionMode: setSelectionMode,
+    selectionColor: canvasSelectionColor,
+    selectionWidth: canvasSelectionWidth,
+    selectionPadding: canvasSelectionPadding,
+    isEditMode: isEditMode
+  }), isEditMode && layersManipulation && /*#__PURE__*/_react["default"].createElement(_Layouts["default"], {
     withGrid: withGrid,
     setWithGrid: setWithGrid,
     disabled: disabled,
@@ -505,9 +626,8 @@ var App = function App(_ref5) {
     selectShape: selectShape,
     toggleShapeVisibility: toggleShapeVisibility,
     toggleShapeLock: toggleShapeLock,
-    withLayouts: withLayouts,
     isLayoutPanelShown: isLayoutPanelShown
-  })), /*#__PURE__*/_react["default"].createElement(_SettingsBar["default"], {
+  })), isEditMode && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_SettingsBar["default"], {
     disabled: disabled,
     activeTool: activeTool,
     selectedShape: selectedShape,
@@ -516,7 +636,7 @@ var App = function App(_ref5) {
     defaultConf: defaultConf,
     setDefaultConf: setDefaultConf,
     canvas: canvasRef.current,
-    withLayouts: withLayouts,
+    layersManipulation: layersManipulation,
     toggleLayoutPanel: function toggleLayoutPanel() {
       setIsLayoutPanelShown(function (prev) {
         return !prev;
@@ -526,7 +646,7 @@ var App = function App(_ref5) {
     isLoading: isLoading
   }), /*#__PURE__*/_react["default"].createElement(_Snackbar["default"], {
     snackbarList: snackbarList
-  }));
+  })));
 };
 
 var _default = App;