@yorab/react-paint 0.7.5 → 0.8.0

package/package.json

@@ -1,78 +1,73 @@
 {
   "name": "@yorab/react-paint",
-  "version": "0.7.5",
+  "version": "0.8.0",
+  "type": "module",
   "keywords": [],
   "author": "Yohann Rabatel",
   "license": "MIT",
-  "main": "./dist/components/App.js",
+  "main": "./dist/react-paint.js",
+  "module": "./dist/react-paint.umd.cjs",
   "types": "./dist/components/App.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/react-paint.js",
+      "require": "./dist/react-paint.umd.cjs",
+      "types": "./dist/components/App.d.ts"
+    },
+    "./react-paint.css": "./dist/react-paint.css"
+  },
   "files": [
     "README.md",
+    "LICENSE.txt",
     "package.json",
     "dist/"
   ],
   "dependencies": {
-    "@linaria/react": "3.0.0-beta.22",
-    "lodash": "^4.17.20"
+    "lodash": "4.17.21"
   },
   "devDependencies": {
-    "@babel/cli": "7.12.8",
-    "@babel/core": "^7.16.7",
-    "@babel/plugin-transform-runtime": "^7.16.8",
-    "@babel/preset-env": "^7.16.8",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
-    "@babel/runtime": "^7.16.7",
-    "@linaria/babel-preset": "3.0.0-beta.22",
-    "@linaria/core": "3.0.0-beta.22",
-    "@linaria/webpack-loader": "3.0.0-beta.22",
-    "@linaria/shaker": "^3.0.0-beta.22",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
-    "@types/lodash": "4.14.170",
-    "@types/node": "^12.0.0",
-    "@types/react": "^18.0.10",
-    "@types/react-dom": "^18.0.5",
-    "@typescript-eslint/eslint-plugin": "4.28.0",
-    "@typescript-eslint/parser": "4.28.0",
-    "babel-jest": "^27.4.6",
-    "babel-loader": "^8.2.3",
-    "babel-plugin-module-resolver": "^4.1.0",
-    "css-loader": "^6.7.0",
-    "eslint": "7.29.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-import-resolver-typescript": "2.4.0",
-    "eslint-plugin-import": "2.23.4",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "html-webpack-plugin": "^5.5.0",
-    "mini-css-extract-plugin": "^2.6.0",
-    "prettier": "^2.3.2",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
-    "typescript": "^4.7.2",
-    "webpack": "^5.66.0",
-    "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.7.3"
+    "@storybook/addon-essentials": "7.1.1",
+    "@storybook/addon-interactions": "7.1.1",
+    "@storybook/addon-links": "7.1.1",
+    "@storybook/addon-onboarding": "1.0.8",
+    "@storybook/blocks": "7.1.1",
+    "@storybook/react": "7.1.1",
+    "@storybook/react-vite": "7.1.1",
+    "@storybook/testing-library": "0.2.0",
+    "@types/lodash": "4.14.196",
+    "@types/node": "20.4.5",
+    "@types/react": "18.2.17",
+    "@types/react-dom": "18.2.7",
+    "@typescript-eslint/eslint-plugin": "6.0.0",
+    "@typescript-eslint/parser": "6.0.0",
+    "@vitejs/plugin-react": "4.0.3",
+    "eslint": "8.45.0",
+    "eslint-config-prettier": "8.9.0",
+    "eslint-import-resolver-typescript": "3.5.5",
+    "eslint-plugin-import": "2.28.0",
+    "eslint-plugin-prettier": "5.0.0",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-storybook": "0.6.13",
+    "lightningcss": "1.21.5",
+    "prettier": "3.0.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "storybook": "7.1.1",
+    "typescript": "5.1.6",
+    "vite": "4.4.5",
+    "vite-tsconfig-paths": "4.2.0"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-dom": "*"
+    "react": "18.x",
+    "react-dom": "18.x"
   },
   "scripts": {
     "declarationfiles": "tsc --project tsconfig.prod.json",
-    "start": "webpack serve --config webpack.config.js --open",
+    "start": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "buildexamples": "webpack --config webpack.prod.config.js",
-    "build": "npx babel src/ --extensions '.js,.ts,.tsx,.jsx' --copy-files --delete-dir-on-start -d dist",
-    "buildwithcss": "npm run build && npm run buildexamples && mv build/styles.css dist/styles.css",
-    "publish": "npm run buildwithcss && npm publish --access public"
-  },
-  "jest": {
-    "transform": {
-      "^.+\\.[t|j]sx?$": "babel-jest"
-    }
+    "build": "vite build && npm run declarationfiles",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "publishnpm": "npm run build && npm publish --access public"
   }
 }

package/dist/components/App.js

@@ -1,496 +0,0 @@
-"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 _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 _useComponent = _interopRequireDefault(require("../hooks/useComponent"));
-
-var _useShapes = _interopRequireDefault(require("../hooks/useShapes"));
-
-var _Snackbar = _interopRequireDefault(require("./common/Snackbar"));
-
-var _useSnackbar = _interopRequireDefault(require("../hooks/useSnackbar"));
-
-var _Loading = _interopRequireDefault(require("./common/Loading"));
-
-var _data = require("../utils/data");
-
-var _useResizeObserver = _interopRequireDefault(require("../hooks/useResizeObserver"));
-
-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')({
-  name: "StyledApp",
-  class: "s1v9piyg",
-  vars: {
-    "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": [_ref2 => {
-      let {
-        canvasWidth
-      } = _ref2;
-      return canvasWidth;
-    }, "px"]
-  }
-});
-const StyledRow = /*#__PURE__*/(0, _react2.styled)('div')({
-  name: "StyledRow",
-  class: "s6o5tmu",
-  vars: {
-    "s6o5tmu-0": [_ref3 => {
-      let {
-        width
-      } = _ref3;
-      return width;
-    }, "px"],
-    "s6o5tmu-1": [_ref4 => {
-      let {
-        aspectRatio
-      } = _ref4;
-      return aspectRatio;
-    }]
-  }
-});
-
-const App = _ref5 => {
-  var _options$uiStyle;
-
-  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
-  });
-  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));
-  }, [availableToolsFromProps, withUploadPicture, withUrlPicture]);
-  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]);
-  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);
-  }, []);
-  const undoAction = (0, _react.useCallback)(() => {
-    selectTool(_tools.SELECTION_TOOL);
-    backwardShape();
-  }, [selectTool, backwardShape]);
-  const redoAction = (0, _react.useCallback)(() => {
-    selectTool(_tools.SELECTION_TOOL);
-    forwardShape();
-  }, [selectTool, forwardShape]);
-  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]);
-  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()
-      }, false);
-    } else {
-      if (clearCallback === 'defaultShapes' && shapesFromProps !== undefined) {
-        void loadImportedData({
-          shapes: shapesFromProps
-        }, false);
-      } else {
-        resetCanvas();
-      }
-    }
-  }, [resetCanvas, loadImportedData, shapesFromProps, clearCallback]);
-  const selectShape = (0, _react.useCallback)(shape => {
-    setActiveTool(_tools.SELECTION_TOOL);
-    setSelectedShape(shape);
-  }, [setSelectedShape]);
-  const pasteShape = (0, _react.useCallback)(shape => {
-    addShape(shape);
-    selectShape(shape);
-  }, [addShape, selectShape]);
-  const exportCanvasInFile = (0, _react.useCallback)(() => {
-    setIsLoading(true);
-
-    try {
-      const dataURL = canvasRef.current && (0, _file.getCanvasImage)(shapesRef.current, canvasOffset, canvasWidth, canvasHeight, canvasSelectionPadding);
-
-      if (!dataURL) {
-        throw new Error();
-      }
-
-      (0, _file.downloadFile)(dataURL, 'drawing.png');
-      setIsLoading(false);
-    } catch (e) {
-      if (e instanceof Error) {
-        addSnackbar({
-          type: 'error',
-          text: "L'export a échoué"
-        });
-      }
-
-      console.warn(e);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [addSnackbar, shapesRef, canvasOffset, canvasWidth, canvasHeight, canvasSelectionPadding]);
-  const saveFile = (0, _react.useCallback)(() => {
-    setIsLoading(true);
-
-    try {
-      const content = (0, _file.encodeShapesInString)(shapesRef.current, canvasWidth, canvasHeight);
-
-      if (!content) {
-        throw new Error("L'encodage a échoué");
-      }
-
-      (0, _file.downloadFile)(content, 'drawing.json');
-      setIsLoading(false);
-    } catch (e) {
-      if (e instanceof Error) {
-        addSnackbar({
-          type: 'error',
-          text: "L'enregistrement a échoué"
-        });
-      }
-
-      console.warn(e);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [shapesRef, addSnackbar, canvasWidth, canvasHeight]);
-  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
-    });
-  }, [canvasWidth, canvasHeight]);
-  (0, _useKeyboard.default)({
-    isInsideComponent,
-    gridFormat,
-    isEditingText: selectionMode.mode === 'textedition',
-    selectedShape,
-    setSelectedShape,
-    removeShape,
-    pasteShape,
-    updateShape,
-    backwardShape,
-    forwardShape,
-    setShiftPressed
-  });
-  (0, _useResizeObserver.default)({
-    element: componentRef,
-    onResized
-  });
-  (0, _react.useEffect)(() => {
-    if (!isInsideComponent) setSelectedShape(undefined);
-  }, [isInsideComponent, setSelectedShape]);
-  (0, _react.useEffect)(() => {
-    if (shapesFromProps !== undefined) {
-      void loadImportedData({
-        shapes: shapesFromProps
-      });
-    }
-  }, [loadImportedData, shapesFromProps]);
-  (0, _react.useEffect)(() => {
-    if (!apiRef) return;
-    apiRef.current = {
-      getCurrentImage: () => {
-        return canvasRef.current ? (0, _file.getCanvasImage)(shapesRef.current, canvasOffset, canvasWidth, canvasHeight, canvasSelectionPadding) : undefined;
-      },
-      getCurrentData: () => {
-        return (0, _data.buildDataToExport)(shapesRef.current, canvasWidth, canvasHeight);
-      }
-    };
-  }, [apiRef, shapesRef, canvasOffset, canvasWidth, canvasHeight, canvasSelectionPadding]);
-  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,
-    "data-shrink": canShrink,
-    canvasWidth: canvasWidth,
-    toolbarBackgroundColor: toolbarBackgroundColor,
-    dividerColor: dividerColor,
-    fontRadius: fontRadius,
-    fontDisabledColor: fontDisabledColor,
-    fontDisabledBackgroundColor: fontDisabledBackgroundColor,
-    fontColor: fontColor,
-    fontBackgroundColor: fontBackgroundColor,
-    fontSelectedColor: fontSelectedColor,
-    fontSelectedBackgroundColor: fontSelectedBackgroundColor,
-    fontHoverColor: fontHoverColor,
-    fontHoverBackgroundColor: fontHoverBackgroundColor,
-    canvasBackgroundColor: canvasBackgroundColor
-  }, isEditMode && /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
-    width: canvasSize.width,
-    disabled: disabled,
-    activeTool: activeTool,
-    clearCanvas: clearCanvas,
-    setActiveTool: selectTool,
-    exportCanvasInFile: exportCanvasInFile,
-    saveFile: saveFile,
-    loadFile: loadFile,
-    addPicture: addPicture,
-    hasActionToUndo: canGoBackward,
-    hasActionToRedo: canGoForward,
-    hasActionToClear: canClear,
-    undoAction: undoAction,
-    redoAction: redoAction,
-    availableTools: availableTools,
-    withExport: withExport,
-    withLoadAndSave: withLoadAndSave,
-    withUploadPicture: withUploadPicture,
-    withUrlPicture: withUrlPicture
-  }), /*#__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, {
-    canGrow: canGrow,
-    gridFormat: gridFormat,
-    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,
-    saveShapes: saveShapes,
-    ref: canvasRef,
-    canvasSize: canvasSize,
-    selectionMode: selectionMode,
-    setSelectionMode: setSelectionMode,
-    selectionColor: canvasSelectionColor,
-    selectionWidth: canvasSelectionWidth,
-    selectionPadding: canvasSelectionPadding,
-    isEditMode: isEditMode,
-    isShiftPressed: isShiftPressed
-  }), isEditMode && layersManipulation && /*#__PURE__*/_react.default.createElement(_Layouts.default, {
-    gridFormat: gridFormat,
-    setGridFormat: setGridFormat,
-    disabled: disabled,
-    shapes: shapesRef.current,
-    moveShapes: moveShapes,
-    selectedShape: selectedShape,
-    removeShape: removeShape,
-    selectShape: selectShape,
-    toggleShapeVisibility: toggleShapeVisibility,
-    toggleShapeLock: toggleShapeLock,
-    isLayoutPanelShown: isLayoutPanelShown
-  })), isEditMode && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_SettingsBar.default, {
-    width: canvasSize.width,
-    disabled: disabled,
-    activeTool: activeTool,
-    availableTools: availableTools,
-    selectedShape: selectedShape,
-    removeShape: removeShape,
-    updateShape: updateShape,
-    canvas: canvasRef.current,
-    layersManipulation: layersManipulation,
-    toggleLayoutPanel: () => {
-      setIsLayoutPanelShown(prev => !prev);
-    },
-    updateToolSettings: updateToolSettings
-  }), /*#__PURE__*/_react.default.createElement(_Loading.default, {
-    isLoading: isLoading
-  }), /*#__PURE__*/_react.default.createElement(_Snackbar.default, {
-    snackbarList: snackbarList
-  })));
-};
-
-var _default = App;
-exports.default = _default;