@yorab/react-paint 0.7.6 → 0.9.0

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;

package/dist/components/Canvas.js

@@ -1,194 +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 _react2 = require("@linaria/react");
-
-var _canvas = require("../utils/canvas");
-
-var _EditTextBox = _interopRequireDefault(require("./toolbox/EditTextBox"));
-
-var _useDrawableCanvas = _interopRequireDefault(require("../hooks/useDrawableCanvas"));
-
-var _shapes = require("../utils/shapes");
-
-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, 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 !== 'textedition' || shapes[i] !== selectedShape) {
-      (0, _shapes.drawShape)(drawCtx, shapes[i], scaleRatio, canvasOffset, selectionPadding);
-    }
-  }
-};
-
-const renderSelectionCanvas = (selectionCtx, selectionMode, canvasSize, activeTool, canvasOffset, selectionPadding, selectionWidth, selectionColor, selectedShape) => {
-  const {
-    width,
-    height,
-    scaleRatio
-  } = canvasSize;
-  selectionCtx.clearRect(0, 0, width, height);
-  selectedShape && activeTool.type !== 'brush' && (0, _shapes.drawShapeSelection)({
-    ctx: selectionCtx,
-    shape: selectedShape,
-    scaleRatio,
-    canvasOffset,
-    selectionPadding,
-    selectionWidth,
-    selectionColor,
-    withAnchors: selectionMode.mode !== 'textedition'
-  });
-};
-
-const StyledCanvasBox = /*#__PURE__*/(0, _react2.styled)('div')({
-  name: "StyledCanvasBox",
-  class: "s9czb9p"
-});
-const StyledCanvasContainer = /*#__PURE__*/(0, _react2.styled)('div')({
-  name: "StyledCanvasContainer",
-  class: "s1538eht"
-});
-const StyledDrawCanvas = /*#__PURE__*/(0, _react2.styled)('canvas')({
-  name: "StyledDrawCanvas",
-  class: "s101qxdc"
-});
-const StyledSelectionCanvas = /*#__PURE__*/(0, _react2.styled)('canvas')({
-  name: "StyledSelectionCanvas",
-  class: "sa4oq48",
-  vars: {
-    "sa4oq48-0": [_ref => {
-      let {
-        cursor
-      } = _ref;
-      return cursor;
-    }]
-  }
-});
-
-const Canvas = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
-  let {
-    gridFormat,
-    canGrow,
-    disabled = false,
-    canvasSize,
-    shapes,
-    addShape,
-    updateSingleShape,
-    selectedShape,
-    setSelectedShape,
-    saveShapes,
-    activeTool,
-    setActiveTool,
-    canvasOffsetStartPosition,
-    setCanvasOffsetStartPosition,
-    canvasOffset,
-    setCanvasOffset,
-    isInsideComponent,
-    selectionMode,
-    setSelectionMode,
-    selectionWidth,
-    selectionColor,
-    selectionPadding,
-    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
-
-  (0, _react.useImperativeHandle)(ref, () => drawCanvasRef.current);
-  const {
-    hoverMode
-  } = (0, _useDrawableCanvas.default)({
-    disabled,
-    addShape,
-    canvasSize,
-    drawCanvasRef,
-    setActiveTool,
-    shapes,
-    selectionMode,
-    activeTool,
-    isInsideComponent,
-    setCanvasOffset,
-    selectedShape,
-    selectionCanvasRef,
-    canvasOffsetStartPosition,
-    setSelectedShape,
-    setCanvasOffsetStartPosition,
-    updateSingleShape,
-    gridFormat,
-    canvasOffset,
-    saveShapes,
-    setSelectionMode,
-    selectionPadding,
-    isShiftPressed
-  });
-  const updateSelectedShapeText = (0, _react.useCallback)(newText => {
-    var _drawCanvasRef$curren;
-
-    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 = (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, gridFormat, canvasOffset, shapes, selectionPadding, selectedShape));
-  }, [shapes, gridFormat, selectionMode, selectedShape, canvasOffset, canvasSize, selectionPadding]);
-  (0, _react.useEffect)(() => {
-    var _selectionCanvasRef$c;
-
-    const selectionCtx = (_selectionCanvasRef$c = selectionCanvasRef.current) === null || _selectionCanvasRef$c === void 0 ? void 0 : _selectionCanvasRef$c.getContext('2d');
-    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-grow": canGrow
-  }, /*#__PURE__*/_react.default.createElement(StyledDrawCanvas, {
-    ref: drawCanvasRef,
-    "data-grow": canGrow,
-    width: canvasSize.width,
-    height: canvasSize.height
-  }), isEditMode && /*#__PURE__*/_react.default.createElement(StyledSelectionCanvas, {
-    ref: selectionCanvasRef,
-    width: canvasSize.width,
-    height: canvasSize.height,
-    "data-grow": canGrow,
-    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,
-    defaultValue: selectionMode.defaultValue,
-    updateValue: updateSelectedShapeText,
-    saveShapes: saveShapes,
-    selectionPadding: selectionPadding
-  })));
-});
-
-var _default = Canvas;
-exports.default = _default;