@yorab/react-paint 0.6.6 → 0.7.1

package/README.md

@@ -1,13 +1,11 @@
-# known issues :
+# React Paint
 
-## mobile/touch
+## known issues :
 
 - 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 ?)
 - circle resizing only goes one direction
 - adding padding to selection result in wrong intersection calculs
 - Clear with custom callback breaks history stack
 - selection padding needs work
+- with shrunk or grown container, anchors selection is miscalculated

package/dist/components/App.js

@@ -25,8 +25,6 @@ var _useKeyboard = _interopRequireDefault(require("../hooks/useKeyboard"));
 
 var _file = require("../utils/file");
 
-var _Mode = require("../types/Mode");
-
 var _useComponent = _interopRequireDefault(require("../hooks/useComponent"));
 
 var _useShapes = _interopRequireDefault(require("../hooks/useShapes"));
@@ -35,27 +33,25 @@ var _Snackbar = _interopRequireDefault(require("./common/Snackbar"));
 
 var _useSnackbar = _interopRequireDefault(require("../hooks/useSnackbar"));
 
-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");
-
 var _toolbar = require("../utils/toolbar");
 
 var _tools = require("../constants/tools");
 
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
+var _app = require("../constants/app");
+
 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 _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; }
 
-const StyledApp = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledApp = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledApp",
   class: "s1v9piyg",
   vars: {
@@ -85,17 +81,17 @@ const StyledApp = /*#__PURE__*/(0, _react2.styled)("div")({
     }, "px"]
   }
 });
-const StyledRow = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledRow = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledRow",
   class: "s6o5tmu",
   vars: {
-    "s6o5tmu-1": [_ref3 => {
+    "s6o5tmu-0": [_ref3 => {
       let {
         width
       } = _ref3;
       return width;
     }, "px"],
-    "s6o5tmu-2": [_ref4 => {
+    "s6o5tmu-1": [_ref4 => {
       let {
         aspectRatio
       } = _ref4;
@@ -103,35 +99,6 @@ const StyledRow = /*#__PURE__*/(0, _react2.styled)("div")({
     }]
   }
 });
-const 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
-  }
-};
 
 const App = _ref5 => {
   var _options$uiStyle;
@@ -149,7 +116,7 @@ const App = _ref5 => {
   } = _ref5;
   const {
     layersManipulation,
-    gridVisible,
+    grid,
     canGrow,
     canShrink,
     withExport,
@@ -158,7 +125,7 @@ const App = _ref5 => {
     withUrlPicture,
     clearCallback,
     availableTools: availableToolsFromProps
-  } = { ...DEFAULT_OPTIONS,
+  } = { ..._app.DEFAULT_OPTIONS,
     ...options
   };
   const {
@@ -175,9 +142,9 @@ const App = _ref5 => {
     fontHoverBackgroundColor,
     canvasBackgroundColor,
     canvasSelectionColor,
-    canvasSelectionWidth,
-    canvasSelectionPadding
-  } = { ...DEFAULT_OPTIONS.uiStyle,
+    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';
@@ -189,6 +156,8 @@ const App = _ref5 => {
     height: canvasHeight,
     scaleRatio: 1
   });
+  const canvasSelectionPadding = 0; // selection padding should not be larger than 0 until shape resizing is refactored
+
   const [availableTools, setAvailableTools] = (0, _react.useState)((0, _toolbar.sanitizeTools)(availableToolsFromProps, withUploadPicture || withUrlPicture));
   (0, _react.useEffect)(() => {
     setAvailableTools((0, _toolbar.sanitizeTools)(availableToolsFromProps, withUploadPicture || withUrlPicture));
@@ -205,9 +174,10 @@ const App = _ref5 => {
   const [canvasOffsetStartPosition, setCanvasOffsetStartPosition] = (0, _react.useState)(undefined);
   const [activeTool, setActiveTool] = (0, _react.useState)(_tools.SELECTION_TOOL);
   const [selectionMode, setSelectionMode] = (0, _react.useState)({
-    mode: _Mode.SelectionModeLib.default
+    mode: 'default'
   });
-  const [withGrid, setWithGrid] = (0, _react.useState)(gridVisible);
+  const [gridFormat, setGridFormat] = (0, _react.useState)(grid);
+  const [isShiftPressed, setShiftPressed] = (0, _react.useState)(false);
   const {
     shapesRef,
     selectedShape,
@@ -297,7 +267,7 @@ const App = _ref5 => {
     } catch (e) {
       if (e instanceof Error) {
         addSnackbar({
-          type: _snackbar.SnackbarTypeEnum.Error,
+          type: 'error',
           text: "L'export a échoué"
         });
       }
@@ -322,7 +292,7 @@ const App = _ref5 => {
     } catch (e) {
       if (e instanceof Error) {
         addSnackbar({
-          type: _snackbar.SnackbarTypeEnum.Error,
+          type: 'error',
           text: "L'enregistrement a échoué"
         });
       }
@@ -339,13 +309,13 @@ const App = _ref5 => {
       const json = await (0, _file.decodeJson)(file);
       await loadImportedData(json);
       addSnackbar({
-        type: _snackbar.SnackbarTypeEnum.Success,
+        type: 'success',
         text: 'Fichier chargé !'
       });
     } catch (e) {
       if (e instanceof Error) {
         addSnackbar({
-          type: _snackbar.SnackbarTypeEnum.Error,
+          type: 'error',
           text: 'Le chargement a échoué'
         });
       }
@@ -364,7 +334,7 @@ const App = _ref5 => {
     } catch (e) {
       if (e instanceof Error) {
         addSnackbar({
-          type: _snackbar.SnackbarTypeEnum.Error,
+          type: 'error',
           text: 'Le chargement a échoué'
         });
       }
@@ -384,14 +354,16 @@ const App = _ref5 => {
   }, [canvasWidth, canvasHeight]);
   (0, _useKeyboard.default)({
     isInsideComponent,
-    isEditingText: selectionMode.mode === _Mode.SelectionModeLib.textedition,
+    gridFormat,
+    isEditingText: selectionMode.mode === 'textedition',
     selectedShape,
     setSelectedShape,
     removeShape,
     pasteShape,
     updateShape,
     backwardShape,
-    forwardShape
+    forwardShape,
+    setShiftPressed
   });
   (0, _useResizeObserver.default)({
     element: componentRef,
@@ -463,7 +435,7 @@ const App = _ref5 => {
     aspectRatio: "calc(".concat(canvasSize.width, " / ").concat(canvasSize.height, ")")
   }, /*#__PURE__*/_react.default.createElement(_Canvas.default, {
     canGrow: canGrow,
-    withGrid: withGrid,
+    gridFormat: gridFormat,
     disabled: disabled,
     isInsideComponent: isInsideComponent,
     activeTool: activeTool,
@@ -485,10 +457,11 @@ const App = _ref5 => {
     selectionColor: canvasSelectionColor,
     selectionWidth: canvasSelectionWidth,
     selectionPadding: canvasSelectionPadding,
-    isEditMode: isEditMode
+    isEditMode: isEditMode,
+    isShiftPressed: isShiftPressed
   }), isEditMode && layersManipulation && /*#__PURE__*/_react.default.createElement(_Layouts.default, {
-    withGrid: withGrid,
-    setWithGrid: setWithGrid,
+    gridFormat: gridFormat,
+    setGridFormat: setGridFormat,
     disabled: disabled,
     shapes: shapesRef.current,
     moveShapes: moveShapes,

package/dist/components/Canvas.js

@@ -11,39 +11,35 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@linaria/react");
 
-var _fp = _interopRequireDefault(require("lodash/fp"));
-
-var _Shapes = require("../types/Shapes");
-
-var _draw = require("../utils/draw");
-
-var _Mode = require("../types/Mode");
-
-var _transform = require("../utils/transform");
+var _canvas = require("../utils/canvas");
 
 var _EditTextBox = _interopRequireDefault(require("./toolbox/EditTextBox"));
 
 var _useDrawableCanvas = _interopRequireDefault(require("../hooks/useDrawableCanvas"));
 
-var _icons = require("../constants/icons");
+var _shapes = require("../utils/shapes");
 
-var _tools = require("../types/tools");
+var _text = require("../utils/shapes/text");
+
+var _grid = require("../utils/shapes/grid");
 
 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 _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; }
 
-const renderDrawCanvas = (drawCtx, selectionMode, canvasSize, canvasOffset, shapes, selectionPadding, selectedShape) => {
+const renderDrawCanvas = (drawCtx, selectionMode, canvasSize, gridFormat, canvasOffset, shapes, selectionPadding, selectedShape) => {
   const {
     width,
     height,
     scaleRatio
   } = canvasSize;
   drawCtx.clearRect(0, 0, width, height);
+  (0, _canvas.initCanvasContext)(drawCtx);
+  gridFormat && (0, _grid.drawGrid)(drawCtx, width, height, scaleRatio, canvasOffset, gridFormat);
 
   for (let i = shapes.length - 1; i >= 0; i--) {
-    if (selectionMode.mode !== _Mode.SelectionModeLib.textedition || shapes[i] !== selectedShape) {
-      (0, _draw.drawShape)(drawCtx, shapes[i], scaleRatio, canvasOffset, selectionPadding);
+    if (selectionMode.mode !== 'textedition' || shapes[i] !== selectedShape) {
+      (0, _shapes.drawShape)(drawCtx, shapes[i], scaleRatio, canvasOffset, selectionPadding);
     }
   }
 };
@@ -55,7 +51,7 @@ const renderSelectionCanvas = (selectionCtx, selectionMode, canvasSize, activeTo
     scaleRatio
   } = canvasSize;
   selectionCtx.clearRect(0, 0, width, height);
-  selectedShape && activeTool.type !== _Shapes.ShapeEnum.brush && (0, _draw.drawSelection)({
+  selectedShape && activeTool.type !== 'brush' && (0, _shapes.drawShapeSelection)({
     ctx: selectionCtx,
     shape: selectedShape,
     scaleRatio,
@@ -63,23 +59,23 @@ const renderSelectionCanvas = (selectionCtx, selectionMode, canvasSize, activeTo
     selectionPadding,
     selectionWidth,
     selectionColor,
-    withAnchors: selectionMode.mode !== _Mode.SelectionModeLib.textedition
+    withAnchors: selectionMode.mode !== 'textedition'
   });
 };
 
-const StyledCanvasBox = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledCanvasBox = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledCanvasBox",
   class: "s9czb9p"
 });
-const StyledCanvasContainer = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledCanvasContainer = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledCanvasContainer",
   class: "s1538eht"
 });
-const StyledDrawCanvas = /*#__PURE__*/(0, _react2.styled)("canvas")({
+const StyledDrawCanvas = /*#__PURE__*/(0, _react2.styled)('canvas')({
   name: "StyledDrawCanvas",
   class: "s101qxdc"
 });
-const StyledSelectionCanvas = /*#__PURE__*/(0, _react2.styled)("canvas")({
+const StyledSelectionCanvas = /*#__PURE__*/(0, _react2.styled)('canvas')({
   name: "StyledSelectionCanvas",
   class: "sa4oq48",
   vars: {
@@ -94,7 +90,7 @@ const StyledSelectionCanvas = /*#__PURE__*/(0, _react2.styled)("canvas")({
 
 const Canvas = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
-    withGrid,
+    gridFormat,
     canGrow,
     disabled = false,
     canvasSize,
@@ -116,7 +112,8 @@ const Canvas = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     selectionWidth,
     selectionColor,
     selectionPadding,
-    isEditMode
+    isEditMode,
+    isShiftPressed
   } = _ref2;
   const drawCanvasRef = (0, _react.useRef)(null);
   const selectionCanvasRef = (0, _react.useRef)(null); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -141,33 +138,28 @@ const Canvas = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     setSelectedShape,
     setCanvasOffsetStartPosition,
     updateSingleShape,
+    gridFormat,
     canvasOffset,
     saveShapes,
     setSelectionMode,
-    selectionPadding
+    selectionPadding,
+    isShiftPressed
   });
   const updateSelectedShapeText = (0, _react.useCallback)(newText => {
-    var _drawCanvasRef$curren, _newShape$style$fontB, _newShape$style, _newShape$style$fontI, _newShape$style2, _newShape$style3;
+    var _drawCanvasRef$curren;
 
-    if ((selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) !== _Shapes.ShapeEnum.text) return;
+    if ((selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) !== 'text') return;
     const ctx = (_drawCanvasRef$curren = drawCanvasRef.current) === null || _drawCanvasRef$curren === void 0 ? void 0 : _drawCanvasRef$curren.getContext('2d');
     if (!ctx) return;
-
-    const newShape = _fp.default.set('value', newText, selectedShape);
-
-    const newWidth = (0, _transform.calculateTextWidth)(ctx, newShape.value, newShape.fontSize, (_newShape$style$fontB = (_newShape$style = newShape.style) === null || _newShape$style === void 0 ? void 0 : _newShape$style.fontBold) !== null && _newShape$style$fontB !== void 0 ? _newShape$style$fontB : false, (_newShape$style$fontI = (_newShape$style2 = newShape.style) === null || _newShape$style2 === void 0 ? void 0 : _newShape$style2.fontItalic) !== null && _newShape$style$fontI !== void 0 ? _newShape$style$fontI : false, (_newShape$style3 = newShape.style) === null || _newShape$style3 === void 0 ? void 0 : _newShape$style3.fontFamily);
-    const resizedShape = { ...newShape,
-      width: newWidth,
-      height: newShape.fontSize * newShape.value.length
-    };
-    updateSingleShape(resizedShape);
-  }, [updateSingleShape, selectedShape]);
+    const newShape = (0, _text.resizeTextShapeWithNewContent)(ctx, selectedShape, newText, canvasOffset);
+    updateSingleShape(newShape);
+  }, [updateSingleShape, selectedShape, canvasOffset]);
   (0, _react.useEffect)(() => {
     var _drawCanvasRef$curren2;
 
     const drawCtx = (_drawCanvasRef$curren2 = drawCanvasRef.current) === null || _drawCanvasRef$curren2 === void 0 ? void 0 : _drawCanvasRef$curren2.getContext('2d');
-    drawCtx && window.requestAnimationFrame(() => renderDrawCanvas(drawCtx, selectionMode, canvasSize, canvasOffset, shapes, selectionPadding, selectedShape));
-  }, [shapes, selectionMode, selectedShape, canvasOffset, canvasSize, selectionPadding]);
+    drawCtx && window.requestAnimationFrame(() => renderDrawCanvas(drawCtx, selectionMode, canvasSize, gridFormat, canvasOffset, shapes, selectionPadding, selectedShape));
+  }, [shapes, gridFormat, selectionMode, selectedShape, canvasOffset, canvasSize, selectionPadding]);
   (0, _react.useEffect)(() => {
     var _selectionCanvasRef$c;
 
@@ -175,7 +167,6 @@ const Canvas = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     selectionCtx && window.requestAnimationFrame(() => renderSelectionCanvas(selectionCtx, selectionMode, canvasSize, activeTool, canvasOffset, selectionPadding, selectionWidth, selectionColor, selectedShape));
   }, [selectionMode, selectedShape, activeTool, canvasOffset, canvasSize, selectionPadding, selectionWidth, selectionColor]);
   return /*#__PURE__*/_react.default.createElement(StyledCanvasBox, null, /*#__PURE__*/_react.default.createElement(StyledCanvasContainer, {
-    "data-grid": withGrid,
     "data-grow": canGrow
   }, /*#__PURE__*/_react.default.createElement(StyledDrawCanvas, {
     ref: drawCanvasRef,
@@ -187,8 +178,8 @@ const Canvas = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     width: canvasSize.width,
     height: canvasSize.height,
     "data-grow": canGrow,
-    cursor: activeTool.type !== _tools.ActionsEnum.selection && activeTool.type !== _tools.ActionsEnum.move || hoverMode.mode === _Mode.SelectionModeLib.resize ? 'crosshair' : activeTool.type === _tools.ActionsEnum.move || hoverMode.mode === _Mode.SelectionModeLib.translate ? 'move' : hoverMode.mode === _Mode.SelectionModeLib.rotate ? 'grab' : 'default'
-  }), isEditMode && selectionMode.mode === _Mode.SelectionModeLib.textedition && (selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) === _Shapes.ShapeEnum.text && /*#__PURE__*/_react.default.createElement(_EditTextBox.default, {
+    cursor: activeTool.type !== 'selection' && activeTool.type !== 'move' || hoverMode.mode === 'resize' ? 'crosshair' : activeTool.type === 'move' || hoverMode.mode === 'translate' ? 'move' : hoverMode.mode === 'rotate' ? 'grab' : 'default'
+  }), isEditMode && selectionMode.mode === 'textedition' && (selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) === 'text' && /*#__PURE__*/_react.default.createElement(_EditTextBox.default, {
     scaleRatio: canvasSize.scaleRatio,
     disabled: disabled,
     shape: selectedShape,

package/dist/components/common/Button.js

@@ -13,19 +13,19 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@linaria/react");
 
-const StyledButton = /*#__PURE__*/(0, _react2.styled)("button")({
+const StyledButton = /*#__PURE__*/(0, _react2.styled)('button')({
   name: "StyledButton",
   class: "sq3bzv4"
 });
-const StyledButtonContent = /*#__PURE__*/(0, _react2.styled)("span")({
+const StyledButtonContent = /*#__PURE__*/(0, _react2.styled)('span')({
   name: "StyledButtonContent",
   class: "sst453j"
 });
-const StyledIcon = /*#__PURE__*/(0, _react2.styled)("span")({
+const StyledIcon = /*#__PURE__*/(0, _react2.styled)('span')({
   name: "StyledIcon",
   class: "s1q5lsc2"
 });
-const StyledChildren = /*#__PURE__*/(0, _react2.styled)("span")({
+const StyledChildren = /*#__PURE__*/(0, _react2.styled)('span')({
   name: "StyledChildren",
   class: "s1dis2j8"
 });

package/dist/components/common/Loading.js

@@ -7,6 +7,10 @@ exports.default = void 0;
 
 var _react = require("@linaria/react");
 
+var _app = require("../../constants/app");
+
+var _loading = require("../../constants/loading");
+
 var _style = require("../../constants/style");
 
 var _react2 = _interopRequireWildcard(require("react"));
@@ -15,16 +19,15 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-const TRANSITION_DURATION = 300;
-const StyledLoading = /*#__PURE__*/(0, _react.styled)("div")({
+const StyledLoading = /*#__PURE__*/(0, _react.styled)('div')({
   name: "StyledLoading",
   class: "s9j48u3"
 });
-const StyledLoader = /*#__PURE__*/(0, _react.styled)("div")({
+const StyledLoader = /*#__PURE__*/(0, _react.styled)('div')({
   name: "StyledLoader",
   class: "s4auclc"
 });
-const StyledShape = /*#__PURE__*/(0, _react.styled)("div")({
+const StyledShape = /*#__PURE__*/(0, _react.styled)('div')({
   name: "StyledShape",
   class: "s1l3fbq"
 });
@@ -39,7 +42,7 @@ const Loading = _ref => {
       setLoadingState('visible');
     } else {
       setLoadingState('fadeOut');
-      const fadeOutTimeout = setTimeout(() => setLoadingState('hidden'), TRANSITION_DURATION);
+      const fadeOutTimeout = setTimeout(() => setLoadingState('hidden'), _loading.LOADING_TRANSITION_DURATION);
       return () => {
         clearTimeout(fadeOutTimeout);
       };

package/dist/components/common/Modal.js

@@ -13,15 +13,15 @@ var _react2 = require("@linaria/react");
 
 var _style = require("../../constants/style");
 
-const StyledModal = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledModal = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledModal",
   class: "s1c8tp02"
 });
-const StyledPanel = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledPanel = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledPanel",
   class: "svkxpz4"
 });
-const StyledMask = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledMask = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledMask",
   class: "s1s9jyyg"
 });

package/dist/components/common/Panel.js

@@ -1,25 +1,23 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@linaria/react");
 
 var _style = require("../../constants/style");
 
-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 _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; }
-
-const StyledPanel = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledPanel = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledPanel",
   class: "s1xzg253"
 });
-const StyledTitle = /*#__PURE__*/(0, _react2.styled)("h3")({
+const StyledTitle = /*#__PURE__*/(0, _react2.styled)('h3')({
   name: "StyledTitle",
   class: "s17qj3jh"
 });
@@ -27,18 +25,16 @@ const StyledTitle = /*#__PURE__*/(0, _react2.styled)("h3")({
 const Panel = _ref => {
   let {
     children,
-    vertical = false,
     title = '',
     className,
+    position = 'bottom',
     fitContainer = false,
     alignment = 'center'
   } = _ref;
-  const componentRef = (0, _react.useRef)(null);
   return /*#__PURE__*/_react.default.createElement(StyledPanel, {
-    ref: componentRef,
     className: className,
     "data-fitcontainer": fitContainer,
-    "data-vertical": +vertical,
+    "data-position": position,
     "data-alignment": alignment
   }, title && /*#__PURE__*/_react.default.createElement(StyledTitle, null, title), children);
 };

package/dist/components/common/Snackbar.js

@@ -9,23 +9,23 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _snackbar = require("../../constants/snackbar");
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@linaria/react");
 
 var _style = require("../../constants/style");
 
+var _snackbar = require("../../constants/snackbar");
+
 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 _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; }
 
-const StyledSnackbar = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledSnackbar = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledSnackbar",
   class: "s1xssqat"
 });
-const StyledSnackbarContainer = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledSnackbarContainer = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledSnackbarContainer",
   class: "s1bgtt22"
 });
@@ -40,10 +40,10 @@ const Snackbar = _ref => {
   (0, _react.useEffect)(() => {
     const timeoutShowId = setTimeout(() => {
       setIsShown(true);
-    }, 100);
+    }, _snackbar.SNACKBAR_TOGGLE_ANIMATION_DURATION);
     const timeoutHideId = setTimeout(() => {
       setIsShown(false);
-    }, duration - _snackbar.SNACKBAR_ANIMATION_DURATION - 100);
+    }, duration - _snackbar.SNACKBAR_DURATION - _snackbar.SNACKBAR_TOGGLE_ANIMATION_DURATION);
     return () => {
       clearTimeout(timeoutShowId);
       clearTimeout(timeoutHideId);

package/dist/components/settings/ColorField.js

@@ -23,7 +23,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-const StyledColor = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledColor = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledColor",
   class: "snh2jyk",
   vars: {
@@ -35,11 +35,11 @@ const StyledColor = /*#__PURE__*/(0, _react2.styled)("div")({
     }]
   }
 });
-const StyleWrapper = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyleWrapper = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyleWrapper",
   class: "sfm1cqx"
 });
-const StyledCustomColor = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledCustomColor = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledCustomColor",
   class: "sttf061",
   vars: {

package/dist/components/settings/FontFamilyField.js

@@ -17,7 +17,7 @@ var _fp = _interopRequireDefault(require("lodash/fp"));
 
 var _icons = require("../../constants/icons");
 
-const StyledOption = /*#__PURE__*/(0, _react2.styled)("span")({
+const StyledOption = /*#__PURE__*/(0, _react2.styled)('span')({
   name: "StyledOption",
   class: "smpmxx5",
   vars: {