@yorab/react-paint 0.2.2

package/Changelog.md

@@ -0,0 +1,26 @@
+# V.0.2.2 :
+
+- Migrate to react 18
+- fix Picture type
+- change pen join and cap to round
+- replace loading snackbar with proper loader
+- support for canGrow and canShrink prop
+- rename project
+- release on npm
+
+# V.0.2.1 :
+
+- better ui for input modal
+- lock functionnality
+- toggle grid
+- layouts panel UI
+
+# V.0.2.0 :
+
+- fix for scaling brush
+- fix snackbar
+- refonte UI toolbar
+- update examples
+- button with icons
+- mini toolbar to fix
+- provide tool for url only

package/README.md

@@ -0,0 +1,99 @@
+## To regenerate schema :
+
+typescript-json-schema "src/types/Shapes.ts" DrawableShapeJson --out 'src/schemas/drawableShape.json'
+
+# known issues :
+
+## mobile/touch
+
+- 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)
+
+## canvas resizing
+
+- 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 )
+
+## other
+
+- TextEdit cursor overflow MINOR (quick fix : edit on modale)
+- 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.d.ts

@@ -0,0 +1,20 @@
+import { MutableRefObject } from 'react';
+import { DrawableShapeJson, ShapeEnum } from 'types/Shapes';
+declare type AppType = {
+    width?: number;
+    height?: number;
+    canGrow?: boolean;
+    canShrink?: boolean;
+    withLayouts?: 'always' | 'never' | 'visible' | 'hidden';
+    shapes?: DrawableShapeJson[];
+    className?: string;
+    disabled?: boolean;
+    onDataChanged?: () => void;
+    availableTools?: ShapeEnum[];
+    apiRef?: MutableRefObject<undefined | {
+        getCurrentImage: () => string | undefined;
+        getCurrentData: () => DrawableShapeJson[];
+    }>;
+};
+declare const App: ({ width, height, canGrow, canShrink, withLayouts, shapes: shapesFromProps, className: classNameFromProps, disabled, onDataChanged, availableTools: availableToolsFromProps, apiRef }: AppType) => JSX.Element;
+export default App;

package/dist/components/App.js

@@ -0,0 +1,533 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
+var _Shapes = require("../types/Shapes");
+
+var _Canvas = _interopRequireDefault(require("./Canvas"));
+
+var _Layouts = _interopRequireDefault(require("./settings/Layouts"));
+
+var _Toolbar = _interopRequireDefault(require("./toolbox/Toolbar"));
+
+var _react2 = require("@linaria/react");
+
+var _SettingsBar = _interopRequireDefault(require("./settings/SettingsBar"));
+
+var _style = require("../constants/style");
+
+var _useKeyboard = _interopRequireDefault(require("../hooks/useKeyboard"));
+
+var _file = require("../utils/file");
+
+var _Mode = require("../types/Mode");
+
+var _useComponent2 = _interopRequireDefault(require("../hooks/useComponent"));
+
+var _useShapes2 = _interopRequireDefault(require("../hooks/useShapes"));
+
+var _Snackbar = _interopRequireDefault(require("./common/Snackbar"));
+
+var _useSnackbar2 = _interopRequireDefault(require("../hooks/useSnackbar"));
+
+var _snackbar = require("../constants/snackbar");
+
+var _Loading = _interopRequireDefault(require("./common/Loading"));
+
+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; }
+
+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-1": [function (_ref2) {
+      var width = _ref2.width;
+      return width;
+    }, "px"]
+  }
+});
+var StyledRow = /*#__PURE__*/(0, _react2.styled)("div")({
+  name: "StyledRow",
+  "class": "s6o5tmu",
+  vars: {
+    "s6o5tmu-1": [function (_ref3) {
+      var width = _ref3.width;
+      return width;
+    }, "px"],
+    "s6o5tmu-2": [function (_ref4) {
+      var aspectRatio = _ref4.aspectRatio;
+      return aspectRatio;
+    }]
+  }
+});
+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 App = function App(_ref5) {
+  var _ref5$width = _ref5.width,
+      width = _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,
+      shapesFromProps = _ref5.shapes,
+      classNameFromProps = _ref5.className,
+      _ref5$disabled = _ref5.disabled,
+      disabled = _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;
+  var componentRef = (0, _react.useRef)(null);
+  var canvasRef = (0, _react.useRef)(null);
+
+  var availableTools = _fp["default"].intersection(DEFAULT_TOOLS, availableToolsFromProps);
+
+  var _useComponent = (0, _useComponent2["default"])({
+    disabled: disabled,
+    componentRef: componentRef
+  }),
+      isInsideComponent = _useComponent.isInsideComponent;
+
+  var _useState = (0, _react.useState)({
+    style: {
+      fillColor: 'transparent',
+      strokeColor: 'black',
+      globalAlpha: 100,
+      lineWidth: 1,
+      lineDash: 0,
+      lineArrow: 0,
+      pointsCount: 3,
+      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];
+
+  var _useState5 = (0, _react.useState)(withLayouts === 'always' || withLayouts === 'visible'),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      isLayoutPanelShown = _useState6[0],
+      setIsLayoutPanelShown = _useState6[1];
+
+  var _useState7 = (0, _react.useState)([0, 0]),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      canvasOffset = _useState8[0],
+      setCanvasOffset = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(undefined),
+      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+      canvasOffsetStartPosition = _useState10[0],
+      setCanvasOffsetStartPosition = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(_Shapes.ToolEnum.selection),
+      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+      activeTool = _useState12[0],
+      setActiveTool = _useState12[1];
+
+  var _useState13 = (0, _react.useState)({
+    mode: _Mode.SelectionModeLib["default"]
+  }),
+      _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+      selectionMode = _useState14[0],
+      setSelectionMode = _useState14[1];
+
+  var _useState15 = (0, _react.useState)(true),
+      _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
+      withGrid = _useState16[0],
+      setWithGrid = _useState16[1];
+
+  var _useShapes = (0, _useShapes2["default"])(onDataChanged),
+      shapesRef = _useShapes.shapesRef,
+      selectedShape = _useShapes.selectedShape,
+      addShape = _useShapes.addShape,
+      addPictureShape = _useShapes.addPictureShape,
+      moveShapes = _useShapes.moveShapes,
+      setSelectedShape = _useShapes.setSelectedShape,
+      removeShape = _useShapes.removeShape,
+      updateShape = _useShapes.updateShape,
+      backwardShape = _useShapes.backwardShape,
+      forwardShape = _useShapes.forwardShape,
+      clearShapes = _useShapes.clearShapes,
+      saveShapes = _useShapes.saveShapes,
+      toggleShapeVisibility = _useShapes.toggleShapeVisibility,
+      toggleShapeLock = _useShapes.toggleShapeLock,
+      canGoBackward = _useShapes.canGoBackward,
+      canGoForward = _useShapes.canGoForward,
+      canClear = _useShapes.canClear;
+
+  var _useSnackbar = (0, _useSnackbar2["default"])(),
+      snackbarList = _useSnackbar.snackbarList,
+      addSnackbar = _useSnackbar.addSnackbar;
+
+  var selectTool = (0, _react.useCallback)(function (tool) {
+    setSelectedShape(undefined);
+    setActiveTool(tool);
+  }, [setSelectedShape]);
+  var undoAction = (0, _react.useCallback)(function () {
+    selectTool(_Shapes.ToolEnum.selection);
+    backwardShape();
+  }, [selectTool, backwardShape]);
+  var redoAction = (0, _react.useCallback)(function () {
+    selectTool(_Shapes.ToolEnum.selection);
+    forwardShape();
+  }, [selectTool, forwardShape]);
+  var clearCanvas = (0, _react.useCallback)(function () {
+    var shapesToInit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var clearHistory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    clearShapes(shapesToInit, clearHistory);
+    selectTool(_Shapes.ToolEnum.selection);
+    setCanvasOffset([0, 0]);
+  }, [selectTool, clearShapes]);
+  var selectShape = (0, _react.useCallback)(function (shape) {
+    setActiveTool(_Shapes.ToolEnum.selection);
+    setSelectedShape(shape);
+  }, [setSelectedShape]);
+  var pasteShape = (0, _react.useCallback)(function (shape) {
+    addShape(shape);
+    selectShape(shape);
+  }, [addShape, selectShape]);
+  var exportCanvasInFile = (0, _react.useCallback)(function () {
+    setIsLoading(true);
+
+    try {
+      var dataURL = canvasRef.current && (0, _file.getCanvasImage)(canvasRef.current);
+
+      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) {
+        addSnackbar({
+          type: _snackbar.SnackbarTypeEnum.Error,
+          text: "L'export a échoué"
+        });
+      } else {
+        console.warn(e);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  }, [addSnackbar]);
+  var saveFile = (0, _react.useCallback)(function () {
+    setIsLoading(true);
+
+    try {
+      var content = (0, _file.encodeShapesInString)(shapesRef.current);
+
+      if (!content) {
+        throw new Error("L'enregistrement 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
+        });
+      } else {
+        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;
+      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;
+              return (0, _file.decodePicturesInShapes)(json);
+
+            case 5:
+              shapes = _context.sent;
+              clearCanvas(shapes, true);
+
+            case 7:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x) {
+      return _ref6.apply(this, arguments);
+    };
+  }(), [clearCanvas]);
+  var loadFile = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref7 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(file) {
+      var json;
+      return _regenerator["default"].wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              setIsLoading(true);
+              _context2.prev = 1;
+              _context2.next = 4;
+              return (0, _file.decodeJson)(file);
+
+            case 4:
+              json = _context2.sent;
+              _context2.next = 7;
+              return loadJson(json);
+
+            case 7:
+              addSnackbar({
+                type: _snackbar.SnackbarTypeEnum.Success,
+                text: 'Fichier chargé !'
+              });
+              _context2.next = 13;
+              break;
+
+            case 10:
+              _context2.prev = 10;
+              _context2.t0 = _context2["catch"](1);
+
+              if (_context2.t0 instanceof Error) {
+                addSnackbar({
+                  type: _snackbar.SnackbarTypeEnum.Error,
+                  text: _context2.t0.message
+                });
+              } else {
+                console.warn(_context2.t0);
+              }
+
+            case 13:
+              _context2.prev = 13;
+              setIsLoading(false);
+              return _context2.finish(13);
+
+            case 16:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[1, 10, 13, 16]]);
+    }));
+
+    return function (_x2) {
+      return _ref7.apply(this, arguments);
+    };
+  }(), [loadJson, addSnackbar]);
+  var addPicture = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref8 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(fileOrUrl) {
+      var pictureShape;
+      return _regenerator["default"].wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              setIsLoading(true);
+              _context3.prev = 1;
+              _context3.next = 4;
+              return addPictureShape(fileOrUrl);
+
+            case 4:
+              pictureShape = _context3.sent;
+              selectShape(pictureShape);
+              _context3.next = 11;
+              break;
+
+            case 8:
+              _context3.prev = 8;
+              _context3.t0 = _context3["catch"](1);
+
+              if (_context3.t0 instanceof Error) {
+                addSnackbar({
+                  type: _snackbar.SnackbarTypeEnum.Error,
+                  text: _context3.t0.message
+                });
+              } else {
+                console.warn(_context3.t0);
+              }
+
+            case 11:
+              _context3.prev = 11;
+              setIsLoading(false);
+              return _context3.finish(11);
+
+            case 14:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3, null, [[1, 8, 11, 14]]);
+    }));
+
+    return function (_x3) {
+      return _ref8.apply(this, arguments);
+    };
+  }(), [addPictureShape, selectShape, addSnackbar]);
+  (0, _useKeyboard["default"])({
+    isInsideComponent: isInsideComponent,
+    isEditingText: selectionMode.mode === _Mode.SelectionModeLib.textedition,
+    selectedShape: selectedShape,
+    setSelectedShape: setSelectedShape,
+    removeShape: removeShape,
+    pasteShape: pasteShape,
+    updateShape: updateShape,
+    backwardShape: backwardShape,
+    forwardShape: forwardShape
+  });
+  (0, _react.useEffect)(function () {
+    if (!isInsideComponent) setSelectedShape(undefined);
+  }, [isInsideComponent, setSelectedShape]);
+  (0, _react.useEffect)(function () {
+    if (shapesFromProps !== undefined) {
+      void loadJson(shapesFromProps);
+    }
+  }, [loadJson, shapesFromProps]);
+  (0, _react.useEffect)(function () {
+    if (!apiRef) return;
+    apiRef.current = {
+      getCurrentImage: function getCurrentImage() {
+        return canvasRef.current ? (0, _file.getCanvasImage)(canvasRef.current) : undefined;
+      },
+      getCurrentData: function getCurrentData() {
+        return (0, _file.encodePicturesInShapes)(shapesRef.current);
+      }
+    };
+  }, [apiRef, shapesRef]);
+  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"], {
+    disabled: disabled,
+    activeTool: activeTool,
+    clearCanvas: clearCanvas,
+    setActiveTool: selectTool,
+    exportCanvasInFile: exportCanvasInFile,
+    saveFile: saveFile,
+    loadFile: loadFile,
+    addPicture: addPicture,
+    hasActionToUndo: canGoBackward,
+    hasActionToRedo: canGoForward,
+    hasActionToClear: canClear,
+    undoAction: undoAction,
+    redoAction: redoAction,
+    availableTools: availableTools
+  }), /*#__PURE__*/_react["default"].createElement(StyledRow, {
+    "data-grow": canGrow,
+    width: width,
+    aspectRatio: "calc(".concat(width, " / ").concat(height, ")")
+  }, /*#__PURE__*/_react["default"].createElement(_Canvas["default"], {
+    canGrow: canGrow,
+    withGrid: withGrid,
+    disabled: disabled,
+    isInsideComponent: isInsideComponent,
+    activeTool: activeTool,
+    setActiveTool: setActiveTool,
+    canvasOffsetStartPosition: canvasOffsetStartPosition,
+    setCanvasOffsetStartPosition: setCanvasOffsetStartPosition,
+    shapes: shapesRef.current,
+    addShape: addShape,
+    updateSingleShape: updateShape,
+    selectedShape: selectedShape,
+    setSelectedShape: setSelectedShape,
+    canvasOffset: canvasOffset,
+    setCanvasOffset: setCanvasOffset,
+    defaultConf: defaultConf,
+    saveShapes: saveShapes,
+    ref: canvasRef,
+    width: width,
+    height: height,
+    selectionMode: selectionMode,
+    setSelectionMode: setSelectionMode
+  }), /*#__PURE__*/_react["default"].createElement(_Layouts["default"], {
+    withGrid: withGrid,
+    setWithGrid: setWithGrid,
+    disabled: disabled,
+    shapes: shapesRef.current,
+    moveShapes: moveShapes,
+    selectedShape: selectedShape,
+    removeShape: removeShape,
+    selectShape: selectShape,
+    toggleShapeVisibility: toggleShapeVisibility,
+    toggleShapeLock: toggleShapeLock,
+    withLayouts: withLayouts,
+    isLayoutPanelShown: isLayoutPanelShown
+  })), /*#__PURE__*/_react["default"].createElement(_SettingsBar["default"], {
+    disabled: disabled,
+    activeTool: activeTool,
+    selectedShape: selectedShape,
+    removeShape: removeShape,
+    updateShape: updateShape,
+    defaultConf: defaultConf,
+    setDefaultConf: setDefaultConf,
+    canvas: canvasRef.current,
+    withLayouts: withLayouts,
+    toggleLayoutPanel: function toggleLayoutPanel() {
+      setIsLayoutPanelShown(function (prev) {
+        return !prev;
+      });
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_Loading["default"], {
+    isLoading: isLoading
+  }), /*#__PURE__*/_react["default"].createElement(_Snackbar["default"], {
+    snackbarList: snackbarList
+  }));
+};
+
+var _default = App;
+exports["default"] = _default;