@yorab/react-paint 0.6.4 → 0.7.1

package/dist/components/App.js

@@ -2,20 +2,10 @@
 
 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -35,17 +25,13 @@ var _useKeyboard = _interopRequireDefault(require("../hooks/useKeyboard"));
 
 var _file = require("../utils/file");
 
-var _Mode = require("../types/Mode");
+var _useComponent = _interopRequireDefault(require("../hooks/useComponent"));
 
-var _useComponent2 = _interopRequireDefault(require("../hooks/useComponent"));
-
-var _useShapes2 = _interopRequireDefault(require("../hooks/useShapes"));
+var _useShapes = _interopRequireDefault(require("../hooks/useShapes"));
 
 var _Snackbar = _interopRequireDefault(require("./common/Snackbar"));
 
-var _useSnackbar2 = _interopRequireDefault(require("../hooks/useSnackbar"));
-
-var _snackbar = require("../constants/snackbar");
+var _useSnackbar = _interopRequireDefault(require("../hooks/useSnackbar"));
 
 var _Loading = _interopRequireDefault(require("./common/Loading"));
 
@@ -53,310 +39,197 @@ var _data = require("../utils/data");
 
 var _useResizeObserver = _interopRequireDefault(require("../hooks/useResizeObserver"));
 
-var _shapes = require("../constants/shapes");
-
 var _toolbar = require("../utils/toolbar");
 
 var _tools = require("../constants/tools");
 
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
-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 _app = require("../constants/app");
 
-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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-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; }
+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")({
+const StyledApp = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledApp",
-  "class": "s1v9piyg",
+  class: "s1v9piyg",
   vars: {
-    "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-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;
+    "s1v9piyg-0": [props => props.toolbarBackgroundColor],
+    "s1v9piyg-1": [props => props.dividerColor],
+    "s1v9piyg-2": [props => props.fontRadius, "px"],
+    "s1v9piyg-3": [props => props.fontDisabledColor],
+    "s1v9piyg-4": [props => props.fontDisabledBackgroundColor],
+    "s1v9piyg-5": [props => props.fontColor],
+    "s1v9piyg-6": [props => props.fontBackgroundColor],
+    "s1v9piyg-7": [props => props.fontSelectedColor],
+    "s1v9piyg-8": [props => props.fontSelectedBackgroundColor],
+    "s1v9piyg-9": [props => props.fontHoverColor],
+    "s1v9piyg-10": [props => props.fontHoverBackgroundColor],
+    "s1v9piyg-11": [props => props.canvasBackgroundColor],
+    "s1v9piyg-12": [_ref => {
+      let {
+        canvasWidth
+      } = _ref;
       return "min(100%, ".concat(canvasWidth, "px)");
     }],
-    "s1v9piyg-13": [function (_ref2) {
-      var canvasWidth = _ref2.canvasWidth;
+    "s1v9piyg-13": [_ref2 => {
+      let {
+        canvasWidth
+      } = _ref2;
       return canvasWidth;
     }, "px"]
   }
 });
-var StyledRow = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledRow = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledRow",
-  "class": "s6o5tmu",
+  class: "s6o5tmu",
   vars: {
-    "s6o5tmu-1": [function (_ref3) {
-      var width = _ref3.width;
+    "s6o5tmu-0": [_ref3 => {
+      let {
+        width
+      } = _ref3;
       return width;
     }, "px"],
-    "s6o5tmu-2": [function (_ref4) {
-      var aspectRatio = _ref4.aspectRatio;
+    "s6o5tmu-1": [_ref4 => {
+      let {
+        aspectRatio
+      } = _ref4;
       return aspectRatio;
     }]
   }
 });
-var DEFAULT_OPTIONS = {
-  layersManipulation: true,
-  gridVisible: false,
-  canGrow: false,
-  canShrink: true,
-  withExport: true,
-  withLoadAndSave: true,
-  withUploadPicture: true,
-  withUrlPicture: false,
-  availableTools: _tools.DEFAULT_SHAPE_TOOLS,
-  clearCallback: 'empty',
-  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) {
+const 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,
-      shapesFromProps = _ref5.shapes,
-      classNameFromProps = _ref5.className,
-      _ref5$mode = _ref5.mode,
-      mode = _ref5$mode === void 0 ? 'editor' : _ref5$mode,
-      _ref5$disabled = _ref5.disabled,
-      disabledFromProps = _ref5$disabled === void 0 ? false : _ref5$disabled,
-      onDataChanged = _ref5.onDataChanged,
-      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,
-      withUploadPicture = _DEFAULT_OPTIONS$opti.withUploadPicture,
-      withUrlPicture = _DEFAULT_OPTIONS$opti.withUrlPicture,
-      clearCallback = _DEFAULT_OPTIONS$opti.clearCallback,
-      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)({
+  let {
+    width: canvasWidth = 1000,
+    height: canvasHeight = 600,
+    shapes: shapesFromProps,
+    className: classNameFromProps,
+    mode = 'editor',
+    disabled: disabledFromProps = false,
+    onDataChanged,
+    apiRef,
+    options
+  } = _ref5;
+  const {
+    layersManipulation,
+    grid,
+    canGrow,
+    canShrink,
+    withExport,
+    withLoadAndSave,
+    withUploadPicture,
+    withUrlPicture,
+    clearCallback,
+    availableTools: availableToolsFromProps
+  } = { ..._app.DEFAULT_OPTIONS,
+    ...options
+  };
+  const {
+    toolbarBackgroundColor,
+    dividerColor,
+    fontRadius,
+    fontDisabledColor,
+    fontDisabledBackgroundColor,
+    fontColor,
+    fontBackgroundColor,
+    fontSelectedColor,
+    fontSelectedBackgroundColor,
+    fontHoverColor,
+    fontHoverBackgroundColor,
+    canvasBackgroundColor,
+    canvasSelectionColor,
+    canvasSelectionWidth // canvasSelectionPadding
+
+  } = { ..._app.DEFAULT_OPTIONS.uiStyle,
+    ...((_options$uiStyle = options === null || options === void 0 ? void 0 : options.uiStyle) !== null && _options$uiStyle !== void 0 ? _options$uiStyle : {})
+  };
+  const isEditMode = mode !== 'viewer';
+  const disabled = disabledFromProps || !isEditMode;
+  const componentRef = (0, _react.useRef)(null);
+  const canvasRef = (0, _react.useRef)(null);
+  const [canvasSize, setCanvasSize] = (0, _react.useState)({
     width: canvasWidth,
     height: canvasHeight,
     scaleRatio: 1
-  }),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      canvasSize = _useState2[0],
-      setCanvasSize = _useState2[1];
-
-  var _useState3 = (0, _react.useState)((0, _toolbar.sanitizeTools)(availableToolsFromProps, withUploadPicture || withUrlPicture)),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      availableTools = _useState4[0],
-      setAvailableTools = _useState4[1];
+  });
+  const canvasSelectionPadding = 0; // selection padding should not be larger than 0 until shape resizing is refactored
 
-  (0, _react.useEffect)(function () {
+  const [availableTools, setAvailableTools] = (0, _react.useState)((0, _toolbar.sanitizeTools)(availableToolsFromProps, withUploadPicture || withUrlPicture));
+  (0, _react.useEffect)(() => {
     setAvailableTools((0, _toolbar.sanitizeTools)(availableToolsFromProps, withUploadPicture || withUrlPicture));
   }, [availableToolsFromProps, withUploadPicture, withUrlPicture]);
-
-  var _useComponent = (0, _useComponent2["default"])({
-    disabled: disabled,
-    componentRef: componentRef
-  }),
-      isInsideComponent = _useComponent.isInsideComponent;
-
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      isLoading = _useState6[0],
-      setIsLoading = _useState6[1];
-
-  var _useState7 = (0, _react.useState)(false),
-      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      isLayoutPanelShown = _useState8[0],
-      setIsLayoutPanelShown = _useState8[1];
-
-  var _useState9 = (0, _react.useState)([0, 0]),
-      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-      canvasOffset = _useState10[0],
-      setCanvasOffset = _useState10[1];
-
-  var _useState11 = (0, _react.useState)(undefined),
-      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-      canvasOffsetStartPosition = _useState12[0],
-      setCanvasOffsetStartPosition = _useState12[1];
-
-  var _useState13 = (0, _react.useState)(_tools.SELECTION_TOOL),
-      _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
-      activeTool = _useState14[0],
-      setActiveTool = _useState14[1];
-
-  var _useState15 = (0, _react.useState)({
-    mode: _Mode.SelectionModeLib["default"]
-  }),
-      _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
-      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,
-      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) {
+  const {
+    isInsideComponent
+  } = (0, _useComponent.default)({
+    disabled,
+    componentRef
+  });
+  const [isLoading, setIsLoading] = (0, _react.useState)(false);
+  const [isLayoutPanelShown, setIsLayoutPanelShown] = (0, _react.useState)(false);
+  const [canvasOffset, setCanvasOffset] = (0, _react.useState)([0, 0]);
+  const [canvasOffsetStartPosition, setCanvasOffsetStartPosition] = (0, _react.useState)(undefined);
+  const [activeTool, setActiveTool] = (0, _react.useState)(_tools.SELECTION_TOOL);
+  const [selectionMode, setSelectionMode] = (0, _react.useState)({
+    mode: 'default'
+  });
+  const [gridFormat, setGridFormat] = (0, _react.useState)(grid);
+  const [isShiftPressed, setShiftPressed] = (0, _react.useState)(false);
+  const {
+    shapesRef,
+    selectedShape,
+    addShape,
+    addPictureShape,
+    moveShapes,
+    setSelectedShape,
+    removeShape,
+    updateShape,
+    backwardShape,
+    forwardShape,
+    clearShapes,
+    saveShapes,
+    toggleShapeVisibility,
+    toggleShapeLock,
+    canGoBackward,
+    canGoForward,
+    canClear
+  } = (0, _useShapes.default)(onDataChanged);
+  const {
+    snackbarList,
+    addSnackbar
+  } = (0, _useSnackbar.default)();
+  const selectTool = (0, _react.useCallback)(tool => {
     setSelectedShape(undefined);
     setActiveTool(tool);
   }, [setSelectedShape]);
-  var updateToolSettings = (0, _react.useCallback)(function (toolId, field, value) {
-    setAvailableTools(function (availableTools) {
-      return availableTools.map(function (tool) {
-        return tool.id === toolId ? _fp["default"].set(['settings', field, 'default'], value, tool) : tool;
-      });
-    });
-    setActiveTool(function (activeTool) {
-      return activeTool.id === toolId ? _fp["default"].set(['settings', field, 'default'], value, activeTool) : activeTool;
-    });
+  const updateToolSettings = (0, _react.useCallback)((toolId, field, value) => {
+    setAvailableTools(availableTools => availableTools.map(tool => tool.id === toolId ? _fp.default.set(['settings', field, 'default'], value, tool) : tool));
+    setActiveTool(activeTool => activeTool.id === toolId ? _fp.default.set(['settings', field, 'default'], value, activeTool) : activeTool);
   }, []);
-  var undoAction = (0, _react.useCallback)(function () {
+  const undoAction = (0, _react.useCallback)(() => {
     selectTool(_tools.SELECTION_TOOL);
     backwardShape();
   }, [selectTool, backwardShape]);
-  var redoAction = (0, _react.useCallback)(function () {
+  const redoAction = (0, _react.useCallback)(() => {
     selectTool(_tools.SELECTION_TOOL);
     forwardShape();
   }, [selectTool, forwardShape]);
-  var resetCanvas = (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;
+  const resetCanvas = (0, _react.useCallback)(function () {
+    let shapesToInit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    let clearHistory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     clearShapes(shapesToInit, clearHistory);
     selectTool(_tools.SELECTION_TOOL);
     setCanvasOffset([0, 0]);
   }, [selectTool, clearShapes]);
-  var loadImportedData = (0, _react.useCallback)( /*#__PURE__*/function () {
-    var _ref6 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(json) {
-      var clearHistory,
-          shapes,
-          _args = arguments;
-      return _regenerator["default"].wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              clearHistory = _args.length > 1 && _args[1] !== undefined ? _args[1] : true;
-              _context.next = 3;
-              return (0, _file.decodeImportedData)(json);
-
-            case 3:
-              shapes = _context.sent;
-              resetCanvas(shapes, clearHistory);
-
-            case 5:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-
-    return function (_x) {
-      return _ref6.apply(this, arguments);
-    };
-  }(), [resetCanvas]);
-  var clearCanvas = (0, _react.useCallback)(function () {
+  const loadImportedData = (0, _react.useCallback)(async function (json) {
+    let clearHistory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    const shapes = await (0, _file.decodeImportedData)(json);
+    resetCanvas(shapes, clearHistory);
+  }, [resetCanvas]);
+  const clearCanvas = (0, _react.useCallback)(() => {
     if (typeof clearCallback !== 'string') {
       void loadImportedData({
         shapes: clearCallback()
@@ -371,19 +244,19 @@ var App = function App(_ref5) {
       }
     }
   }, [resetCanvas, loadImportedData, shapesFromProps, clearCallback]);
-  var selectShape = (0, _react.useCallback)(function (shape) {
+  const selectShape = (0, _react.useCallback)(shape => {
     setActiveTool(_tools.SELECTION_TOOL);
     setSelectedShape(shape);
   }, [setSelectedShape]);
-  var pasteShape = (0, _react.useCallback)(function (shape) {
+  const pasteShape = (0, _react.useCallback)(shape => {
     addShape(shape);
     selectShape(shape);
   }, [addShape, selectShape]);
-  var exportCanvasInFile = (0, _react.useCallback)(function () {
+  const exportCanvasInFile = (0, _react.useCallback)(() => {
     setIsLoading(true);
 
     try {
-      var dataURL = canvasRef.current && (0, _file.getCanvasImage)(shapesRef.current, canvasOffset, canvasWidth, canvasHeight, canvasSelectionPadding);
+      const dataURL = canvasRef.current && (0, _file.getCanvasImage)(shapesRef.current, canvasOffset, canvasWidth, canvasHeight, canvasSelectionPadding);
 
       if (!dataURL) {
         throw new Error();
@@ -394,7 +267,7 @@ var App = function App(_ref5) {
     } catch (e) {
       if (e instanceof Error) {
         addSnackbar({
-          type: _snackbar.SnackbarTypeEnum.Error,
+          type: 'error',
           text: "L'export a échoué"
         });
       }
@@ -404,11 +277,11 @@ var App = function App(_ref5) {
       setIsLoading(false);
     }
   }, [addSnackbar, shapesRef, canvasOffset, canvasWidth, canvasHeight, canvasSelectionPadding]);
-  var saveFile = (0, _react.useCallback)(function () {
+  const saveFile = (0, _react.useCallback)(() => {
     setIsLoading(true);
 
     try {
-      var content = (0, _file.encodeShapesInString)(shapesRef.current, canvasWidth, canvasHeight);
+      const content = (0, _file.encodeShapesInString)(shapesRef.current, canvasWidth, canvasHeight);
 
       if (!content) {
         throw new Error("L'encodage a échoué");
@@ -419,7 +292,7 @@ var App = function App(_ref5) {
     } catch (e) {
       if (e instanceof Error) {
         addSnackbar({
-          type: _snackbar.SnackbarTypeEnum.Error,
+          type: 'error',
           text: "L'enregistrement a échoué"
         });
       }
@@ -429,155 +302,96 @@ var App = function App(_ref5) {
       setIsLoading(false);
     }
   }, [shapesRef, addSnackbar, canvasWidth, canvasHeight]);
-  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 loadImportedData(json);
-
-            case 7:
-              addSnackbar({
-                type: _snackbar.SnackbarTypeEnum.Success,
-                text: 'Fichier chargé !'
-              });
-              _context2.next = 14;
-              break;
-
-            case 10:
-              _context2.prev = 10;
-              _context2.t0 = _context2["catch"](1);
-
-              if (_context2.t0 instanceof Error) {
-                addSnackbar({
-                  type: _snackbar.SnackbarTypeEnum.Error,
-                  text: 'Le chargement a échoué'
-                });
-              }
-
-              console.warn(_context2.t0);
-
-            case 14:
-              _context2.prev = 14;
-              setIsLoading(false);
-              return _context2.finish(14);
-
-            case 17:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2, null, [[1, 10, 14, 17]]);
-    }));
-
-    return function (_x2) {
-      return _ref7.apply(this, arguments);
-    };
-  }(), [loadImportedData, 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, canvasWidth, canvasHeight);
-
-            case 4:
-              pictureShape = _context3.sent;
-              selectShape(pictureShape);
-              _context3.next = 12;
-              break;
-
-            case 8:
-              _context3.prev = 8;
-              _context3.t0 = _context3["catch"](1);
-
-              if (_context3.t0 instanceof Error) {
-                addSnackbar({
-                  type: _snackbar.SnackbarTypeEnum.Error,
-                  text: 'Le chargement a échoué'
-                });
-              }
-
-              console.warn(_context3.t0);
-
-            case 12:
-              _context3.prev = 12;
-              setIsLoading(false);
-              return _context3.finish(12);
-
-            case 15:
-            case "end":
-              return _context3.stop();
-          }
-        }
-      }, _callee3, null, [[1, 8, 12, 15]]);
-    }));
-
-    return function (_x3) {
-      return _ref8.apply(this, arguments);
-    };
-  }(), [addPictureShape, selectShape, addSnackbar, canvasWidth, canvasHeight]);
-  var onResized = (0, _react.useCallback)(function (measuredWidth) {
-    var scaleRatio = measuredWidth / canvasWidth;
+  const loadFile = (0, _react.useCallback)(async file => {
+    setIsLoading(true);
+
+    try {
+      const json = await (0, _file.decodeJson)(file);
+      await loadImportedData(json);
+      addSnackbar({
+        type: 'success',
+        text: 'Fichier chargé !'
+      });
+    } catch (e) {
+      if (e instanceof Error) {
+        addSnackbar({
+          type: 'error',
+          text: 'Le chargement a échoué'
+        });
+      }
+
+      console.warn(e);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [loadImportedData, addSnackbar]);
+  const addPicture = (0, _react.useCallback)(async fileOrUrl => {
+    setIsLoading(true);
+
+    try {
+      const pictureShape = await addPictureShape(fileOrUrl, canvasWidth, canvasHeight);
+      selectShape(pictureShape);
+    } catch (e) {
+      if (e instanceof Error) {
+        addSnackbar({
+          type: 'error',
+          text: 'Le chargement a échoué'
+        });
+      }
+
+      console.warn(e);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [addPictureShape, selectShape, addSnackbar, canvasWidth, canvasHeight]);
+  const onResized = (0, _react.useCallback)(measuredWidth => {
+    const scaleRatio = measuredWidth / canvasWidth;
     setCanvasSize({
       width: measuredWidth,
       height: canvasHeight * scaleRatio,
-      scaleRatio: scaleRatio
+      scaleRatio
     });
   }, [canvasWidth, canvasHeight]);
-  (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, _useKeyboard.default)({
+    isInsideComponent,
+    gridFormat,
+    isEditingText: selectionMode.mode === 'textedition',
+    selectedShape,
+    setSelectedShape,
+    removeShape,
+    pasteShape,
+    updateShape,
+    backwardShape,
+    forwardShape,
+    setShiftPressed
   });
-  (0, _useResizeObserver["default"])({
+  (0, _useResizeObserver.default)({
     element: componentRef,
-    onResized: onResized
+    onResized
   });
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (!isInsideComponent) setSelectedShape(undefined);
   }, [isInsideComponent, setSelectedShape]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (shapesFromProps !== undefined) {
       void loadImportedData({
         shapes: shapesFromProps
       });
     }
   }, [loadImportedData, shapesFromProps]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (!apiRef) return;
     apiRef.current = {
-      getCurrentImage: function getCurrentImage() {
+      getCurrentImage: () => {
         return canvasRef.current ? (0, _file.getCanvasImage)(shapesRef.current, canvasOffset, canvasWidth, canvasHeight, canvasSelectionPadding) : undefined;
       },
-      getCurrentData: function getCurrentData() {
+      getCurrentData: () => {
         return (0, _data.buildDataToExport)(shapesRef.current, 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, {
+  const className = "".concat(classNameFromProps !== null && classNameFromProps !== void 0 ? classNameFromProps : '', " ").concat(isLayoutPanelShown ? 'layoutPanelOpened' : '');
+  return /*#__PURE__*/_react.default.createElement(StyledApp, {
     ref: componentRef,
     className: className,
     "data-grow": canGrow,
@@ -595,7 +409,7 @@ var App = function App(_ref5) {
     fontHoverColor: fontHoverColor,
     fontHoverBackgroundColor: fontHoverBackgroundColor,
     canvasBackgroundColor: canvasBackgroundColor
-  }, isEditMode && /*#__PURE__*/_react["default"].createElement(_Toolbar["default"], {
+  }, isEditMode && /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
     width: canvasSize.width,
     disabled: disabled,
     activeTool: activeTool,
@@ -615,13 +429,13 @@ var App = function App(_ref5) {
     withLoadAndSave: withLoadAndSave,
     withUploadPicture: withUploadPicture,
     withUrlPicture: withUrlPicture
-  }), /*#__PURE__*/_react["default"].createElement(StyledRow, {
+  }), /*#__PURE__*/_react.default.createElement(StyledRow, {
     "data-grow": canGrow,
     width: canvasSize.width,
     aspectRatio: "calc(".concat(canvasSize.width, " / ").concat(canvasSize.height, ")")
-  }, /*#__PURE__*/_react["default"].createElement(_Canvas["default"], {
+  }, /*#__PURE__*/_react.default.createElement(_Canvas.default, {
     canGrow: canGrow,
-    withGrid: withGrid,
+    gridFormat: gridFormat,
     disabled: disabled,
     isInsideComponent: isInsideComponent,
     activeTool: activeTool,
@@ -643,10 +457,11 @@ var App = function App(_ref5) {
     selectionColor: canvasSelectionColor,
     selectionWidth: canvasSelectionWidth,
     selectionPadding: canvasSelectionPadding,
-    isEditMode: isEditMode
-  }), isEditMode && layersManipulation && /*#__PURE__*/_react["default"].createElement(_Layouts["default"], {
-    withGrid: withGrid,
-    setWithGrid: setWithGrid,
+    isEditMode: isEditMode,
+    isShiftPressed: isShiftPressed
+  }), isEditMode && layersManipulation && /*#__PURE__*/_react.default.createElement(_Layouts.default, {
+    gridFormat: gridFormat,
+    setGridFormat: setGridFormat,
     disabled: disabled,
     shapes: shapesRef.current,
     moveShapes: moveShapes,
@@ -656,7 +471,7 @@ var App = function App(_ref5) {
     toggleShapeVisibility: toggleShapeVisibility,
     toggleShapeLock: toggleShapeLock,
     isLayoutPanelShown: isLayoutPanelShown
-  })), isEditMode && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_SettingsBar["default"], {
+  })), isEditMode && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_SettingsBar.default, {
     width: canvasSize.width,
     disabled: disabled,
     activeTool: activeTool,
@@ -666,18 +481,16 @@ var App = function App(_ref5) {
     updateShape: updateShape,
     canvas: canvasRef.current,
     layersManipulation: layersManipulation,
-    toggleLayoutPanel: function toggleLayoutPanel() {
-      setIsLayoutPanelShown(function (prev) {
-        return !prev;
-      });
+    toggleLayoutPanel: () => {
+      setIsLayoutPanelShown(prev => !prev);
     },
     updateToolSettings: updateToolSettings
-  }), /*#__PURE__*/_react["default"].createElement(_Loading["default"], {
+  }), /*#__PURE__*/_react.default.createElement(_Loading.default, {
     isLoading: isLoading
-  }), /*#__PURE__*/_react["default"].createElement(_Snackbar["default"], {
+  }), /*#__PURE__*/_react.default.createElement(_Snackbar.default, {
     snackbarList: snackbarList
   })));
 };
 
 var _default = App;
-exports["default"] = _default;
+exports.default = _default;