@yorab/react-paint 0.2.2 → 0.3.0

package/Changelog.md

@@ -1,3 +1,27 @@
+# V.0.3.0 :
+
+- prevent picture from url submit to reload page
+- add gridVisible prop and default to false
+- rename withLayouts to layersManipulation and reduce possible values
+- move every options inside options prop
+- remove ajv and any kind of json validation
+- limit snackbar use on success and always log errors
+- fit size and center uploaded picture
+- Add new viewer mode
+- add borders on bars
+- display shape id in layer panel
+- Export : round values to 2 decimal points
+- Export and import : remove temporary values (id) from stored file
+- Clean unknown shape format from imported data
+- Use ref for onDataChanged prop to avoid rerender if callback changes
+- Calculate container size to resize canvas instead of CSS
+- use requestAnimationFrame to improve perf
+- fix TextEdit position and size not working with canvas resized
+- fix anchors area becoming too small after rezsize
+- add MIT license to project
+- other minor fixes
+- minor design improvements
+
 # V.0.2.2 :
 
 - Migrate to react 18

package/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Yohann Rabatel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,99 +1,16 @@
-## To regenerate schema :
-
-typescript-json-schema "src/types/Shapes.ts" DrawableShapeJson --out 'src/schemas/drawableShape.json'
-
 # known issues :
 
-## mobile/touch
+## critical
 
-- dnd layout on mobile not working CRITIC (fix : use dnd lib, or add touch listener to fake dnd, or provide alt UI)
-- double click not working with touch CRITIC (fix: fake it countinng delay between touch)
+- Text tool broken since 0.2.2
+- double click not working with touch (fix: fake it countinng delay between touch)
 
-## canvas resizing
+## mobile/touch
 
-- TextEdit position and size not working with canvas resized MINOR (fix : apply current canvas ratio to position and font size)
-- anchors become too small MAJOR (possible fix : increase size with current canvas ratio )
+- dnd layout on mobile not working (fix : use dnd lib, or add touch listener to fake dnd, or provide alt UI)
 
 ## other
 
 - TextEdit cursor overflow MINOR (quick fix : edit on modale)
+- TextEdit copy/paste contains html and breaks display
 - circle resizing only goes one direction
-
-# Remarques de thomas :
-
-## done
-
-- les options (épaisseurs, style de trait...) ont une UI très peu utilisable (on sait pas quel option fait quoi et comment, on teste au pif)
-  l'option de changement de couleur :
-  ne s'applique qu'à la validation, c'est pas top pour savoir quelle couleur on veut parce qu'on est obligé de validé, voir que c'est pas beau, rouvrir... et ainsi de suite
-- a un petit bug : j'ouvre la modale de sélection, je clique à côté (ça unselect la forme), je change la couleur et valide : il ne se passe rien. Je comprends la logique derrière, mais à l'usage ça n'a pas trop de sens
-- pas de possibilité de setter l'opacité des objets, dommage je pense qu'il y a une vraie utilité à ça
-- croix qui efface le canvas
-  il faut une confirmation ! :D
-
-## remaining
-
-- pas de possibilité de sélectionner plusieurs objets avec un press/trace une zone avec la souris/relache (mécanique assez courante quand il y a de la manipulation d'objets)
-- pas de possibilité de zoom/dezoom dans le canvas, et ça c'est super utile amha
-
-### pinceau
-
-- certains outils lisse le trait une fois que tu valides le tracé, et ça donne un rendu plus naturel et propre que ce qu'on trace au pad/souris. Du nice to have loin d'être prioritaire
-- avoir plusieurs style de pinceau (mode surligneur par exemple). ca serait utile sur des exo et techniquement c'est peut-être juste des preset de taille/couleur/opacité de l'outil actuel
-- je ne sais pas pourquoi, mais il a l'air moins fluide/smooth au tracé que marker.js (peut-être une illusion)
-
-### trait
-
-- j'ai été surpris que ça me trace la "forme" dans un rectangle plutôt que d'avoir juste les 2 points sélectionnés (sans le cadre autour quoi)
-
-### polygone
-
-- démarrer avec un polygone à 2 côté, c'est pas possible ça :sourire:
-  quand on change le nombre de côté ça reste un truc plat et ensuite on tire des points :
-  c'est pas du tout évident
-  ça donne des formes qui ne sont pas des polygones (genre un noeuf papillon)
-  idéalement, il faudrait démarrer avec un pentagone parfait -5 côtés de même longueur- (en dessous se sont des polygones trop communs) et quand on change le nombre de côté ça reset la forme sur un polygone parfait de X côtés
-
-### Texte
-
-- options trop limitée, il faudrait à minima pouvoir changer la taille de la police, choisir plus de police, et faire un peu de mise en forme (i, b, u)
-
-## bof
-
-- avoir les options dans un tooltip-like, au dessus de la forme, serait merveilleux (comme sur Miro, ou comme sur nos manuels avec la barre de mise en forme de texte)
-- rectangle: pas de carré avec maj, snif
-  une option de la forme pour bloqué le ratio en "carré" ?
-- cercle/elipse
-  redondant, la diff des outils me parait too much et pas clair
-  bloqué en ratio cercle avec maj ou une option de forme (cf rectangle/carré) ?
-
-# En prévision / Future MAJ
-
-- fix text
-
-- Migrer sous Vite +
-
-- configurer npm publish
-
-- possibility to have presets
-- possibility to provide presets in props
-- add presets
-
-- add more settings
-- settings ui
-- add settings customization
-
-# A prévoir
-
-- ladle (wait for windows support https://github.com/tajo/ladle/issues/67)
-- get rid of enum for better typescript
-- add shortcuts (for tools) and show it in titles
-- Menu contextuel au clic droit (changement de plan, supprimer, duplicate, copy, lock)
-- bordure des traits à revoir
-- améliorer perfs avec précalculs + usage de path
-- lissage de traits
-- Move + zoom functionnality
-- UI customization
-- Tests !
-- fix remaining issues
-- fullscreen mode ?

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,29 @@ var _snackbar = require("../constants/snackbar");
 
 var _Loading = _interopRequireDefault(require("./common/Loading"));
 
+var _data = require("../utils/data");
+
+var _useResizeObserver = _interopRequireDefault(require("../hooks/useResizeObserver"));
+
 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)");
+      var canvaswidth = _ref.canvaswidth;
+      return "min(100%, ".concat(canvaswidth, "px)");
     }],
     "s1v9piyg-1": [function (_ref2) {
-      var width = _ref2.width;
-      return width;
+      var canvaswidth = _ref2.canvaswidth;
+      return canvaswidth;
     }, "px"]
   }
 });
@@ -84,29 +94,50 @@ 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
+};
 
 var App = function App(_ref5) {
   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,
+      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,
-      _ref5$withLayouts = _ref5.withLayouts,
-      withLayouts = _ref5$withLayouts === void 0 ? 'hidden' : _ref5$withLayouts,
       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;
+
+  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 +146,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 +158,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 +253,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);
 
       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 +267,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]);
   var saveFile = (0, _react.useCallback)(function () {
     setIsLoading(true);
 
@@ -254,53 +281,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 +347,7 @@ var App = function App(_ref5) {
                 type: _snackbar.SnackbarTypeEnum.Success,
                 text: 'Fichier chargé !'
               });
-              _context2.next = 13;
+              _context2.next = 14;
               break;
 
             case 10:
@@ -344,23 +357,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 +390,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 +405,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 +447,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 +463,21 @@ 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) : 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]);
   var className = "".concat(classNameFromProps !== null && classNameFromProps !== void 0 ? classNameFromProps : '', " ").concat(isLayoutPanelShown ? 'layoutPanelOpened' : '');
   return /*#__PURE__*/_react["default"].createElement(StyledApp, {
     ref: componentRef,
     className: className,
-    width: width,
+    canvaswidth: canvasWidth,
     "data-grow": canGrow,
     "data-shrink": canShrink
-  }, /*#__PURE__*/_react["default"].createElement(_Toolbar["default"], {
+  }, isEditMode && /*#__PURE__*/_react["default"].createElement(_Toolbar["default"], {
     disabled: disabled,
     activeTool: activeTool,
     clearCanvas: clearCanvas,
@@ -469,8 +494,8 @@ var App = function App(_ref5) {
     availableTools: availableTools
   }), /*#__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 +515,10 @@ 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"], {
+  }), isEditMode && layersManipulation && /*#__PURE__*/_react["default"].createElement(_Layouts["default"], {
     withGrid: withGrid,
     setWithGrid: setWithGrid,
     disabled: disabled,
@@ -505,9 +529,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 +539,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 +549,7 @@ var App = function App(_ref5) {
     isLoading: isLoading
   }), /*#__PURE__*/_react["default"].createElement(_Snackbar["default"], {
     snackbarList: snackbarList
-  }));
+  })));
 };
 
 var _default = App;