@yorab/react-paint 0.7.6 → 0.9.0

package/dist/components/settings/SettingsBar.js

@@ -1,383 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _fp = _interopRequireDefault(require("lodash/fp"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _react2 = require("@linaria/react");
-
-var _transform = require("../../utils/transform");
-
-var _ColorField = _interopRequireDefault(require("./ColorField"));
-
-var _DeleteButton = _interopRequireDefault(require("./DeleteButton"));
-
-var _LayoutButton = _interopRequireDefault(require("./LayoutButton"));
-
-var _RangeField = _interopRequireDefault(require("./RangeField"));
-
-var _FontFamilyField = _interopRequireDefault(require("./FontFamilyField"));
-
-var _PointsNumberField = _interopRequireDefault(require("./PointsNumberField"));
-
-var _LineTypeField = _interopRequireDefault(require("./LineTypeField"));
-
-var _LineArrowField = _interopRequireDefault(require("./LineArrowField"));
-
-var _ToggleField = _interopRequireDefault(require("./ToggleField"));
-
-var _icons = require("../../constants/icons");
-
-var _Button = _interopRequireDefault(require("../common/Button"));
-
-var _Modal = _interopRequireDefault(require("../common/Modal"));
-
-var _text = require("../../utils/shapes/text");
-
-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 SETTING_WIDTH = 40;
-const StyledSettingsBar = /*#__PURE__*/(0, _react2.styled)('div')({
-  name: "StyledSettingsBar",
-  class: "s16z54di"
-});
-const StyledSeparator = /*#__PURE__*/(0, _react2.styled)('div')({
-  name: "StyledSeparator",
-  class: "sa7lzh9"
-});
-const StyledToolsModal = /*#__PURE__*/(0, _react2.styled)(_Modal.default)({
-  name: "StyledToolsModal",
-  class: "s7b85in"
-});
-
-const SettingsItems = _ref => {
-  var _selectedShape$style, _selectedShape$style2, _selectedShape$style3, _selectedShape$style4, _selectedShape$style5, _selectedShape$style6, _selectedShape$style7, _selectedShape$style8, _selectedShape$style9, _selectedShape$style$, _selectedShape$style10;
-
-  let {
-    activeTool,
-    selectedShape,
-    selectedShapeTool,
-    disabled,
-    selectedSettings,
-    setSelectedSettings,
-    handleShapeStyleChange,
-    handlePolygonLinesCount,
-    handleShapeFontFamilyChange
-  } = _ref;
-  return selectedShape ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, selectedShapeTool && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, 'strokeColor' in selectedShapeTool.settings && /*#__PURE__*/_react.default.createElement(_ColorField.default, {
-    selectedSettings: selectedSettings,
-    setSelectedSettings: setSelectedSettings,
-    title: "Couleur du trait",
-    mode: "stroke",
-    disabled: disabled,
-    field: "strokeColor",
-    value: (_selectedShape$style = selectedShape.style) === null || _selectedShape$style === void 0 ? void 0 : _selectedShape$style.strokeColor,
-    valueChanged: handleShapeStyleChange,
-    values: selectedShapeTool.settings.strokeColor.values
-  }), 'fillColor' in selectedShapeTool.settings && /*#__PURE__*/_react.default.createElement(_ColorField.default, {
-    selectedSettings: selectedSettings,
-    setSelectedSettings: setSelectedSettings,
-    title: "Couleur de fond",
-    disabled: disabled,
-    field: "fillColor",
-    value: (_selectedShape$style2 = selectedShape.style) === null || _selectedShape$style2 === void 0 ? void 0 : _selectedShape$style2.fillColor,
-    valueChanged: handleShapeStyleChange,
-    values: selectedShapeTool.settings.fillColor.values
-  }), 'lineWidth' in selectedShapeTool.settings && /*#__PURE__*/_react.default.createElement(_RangeField.default, {
-    selectedSettings: selectedSettings,
-    setSelectedSettings: setSelectedSettings,
-    title: "Epaisseur du trait",
-    icon: _icons.lineWidthIcon,
-    disabled: disabled,
-    field: "lineWidth",
-    value: (_selectedShape$style3 = selectedShape.style) === null || _selectedShape$style3 === void 0 ? void 0 : _selectedShape$style3.lineWidth,
-    valueChanged: handleShapeStyleChange,
-    unity: "px",
-    min: selectedShapeTool.settings.lineWidth.min,
-    max: selectedShapeTool.settings.lineWidth.max,
-    step: selectedShapeTool.settings.lineWidth.step
-  }), 'lineDash' in selectedShapeTool.settings && /*#__PURE__*/_react.default.createElement(_LineTypeField.default, {
-    selectedSettings: selectedSettings,
-    setSelectedSettings: setSelectedSettings,
-    disabled: disabled,
-    defaultValue: (_selectedShape$style4 = selectedShape.style) === null || _selectedShape$style4 === void 0 ? void 0 : _selectedShape$style4.lineDash,
-    valueChanged: handleShapeStyleChange,
-    values: selectedShapeTool.settings.lineDash.values
-  }), 'lineArrow' in selectedShapeTool.settings && /*#__PURE__*/_react.default.createElement(_LineArrowField.default, {
-    selectedSettings: selectedSettings,
-    setSelectedSettings: setSelectedSettings,
-    disabled: disabled,
-    defaultValue: (_selectedShape$style5 = selectedShape.style) === null || _selectedShape$style5 === void 0 ? void 0 : _selectedShape$style5.lineArrow,
-    valueChanged: handleShapeStyleChange,
-    values: selectedShapeTool.settings.lineArrow.values
-  }), 'pointsCount' in selectedShapeTool.settings && /*#__PURE__*/_react.default.createElement(_PointsNumberField.default, {
-    selectedSettings: selectedSettings,
-    setSelectedSettings: setSelectedSettings,
-    disabled: disabled,
-    valueChanged: handlePolygonLinesCount,
-    min: selectedShapeTool.settings.pointsCount.min,
-    max: selectedShapeTool.settings.pointsCount.max,
-    step: selectedShapeTool.settings.pointsCount.step,
-    value: (_selectedShape$style6 = selectedShape.style) === null || _selectedShape$style6 === void 0 ? void 0 : _selectedShape$style6.pointsCount
-  }), 'fontFamily' in selectedShapeTool.settings && /*#__PURE__*/_react.default.createElement(_FontFamilyField.default, {
-    selectedSettings: selectedSettings,
-    setSelectedSettings: setSelectedSettings,
-    disabled: disabled,
-    valueChanged: handleShapeFontFamilyChange,
-    values: selectedShapeTool.settings.fontFamily.values,
-    defaultValue: (_selectedShape$style7 = selectedShape.style) === null || _selectedShape$style7 === void 0 ? void 0 : _selectedShape$style7.fontFamily
-  }), 'fontBold' in selectedShapeTool.settings && /*#__PURE__*/_react.default.createElement(_ToggleField.default, {
-    setSelectedSettings: setSelectedSettings,
-    disabled: disabled,
-    field: "fontBold",
-    icon: _icons.boldIcon,
-    valueChanged: handleShapeFontFamilyChange,
-    values: selectedShapeTool.settings.fontBold.values,
-    value: (_selectedShape$style8 = selectedShape.style) === null || _selectedShape$style8 === void 0 ? void 0 : _selectedShape$style8.fontBold
-  }), 'fontItalic' in selectedShapeTool.settings && /*#__PURE__*/_react.default.createElement(_ToggleField.default, {
-    setSelectedSettings: setSelectedSettings,
-    disabled: disabled,
-    field: "fontItalic",
-    icon: _icons.italicIcon,
-    valueChanged: handleShapeFontFamilyChange,
-    values: selectedShapeTool.settings.fontItalic.values,
-    value: (_selectedShape$style9 = selectedShape.style) === null || _selectedShape$style9 === void 0 ? void 0 : _selectedShape$style9.fontItalic
-  }), 'opacity' in selectedShapeTool.settings && /*#__PURE__*/_react.default.createElement(_RangeField.default, {
-    selectedSettings: selectedSettings,
-    setSelectedSettings: setSelectedSettings,
-    title: "Opacit\xE9",
-    icon: _icons.opacityIcon,
-    min: selectedShapeTool.settings.opacity.min,
-    max: selectedShapeTool.settings.opacity.max,
-    step: selectedShapeTool.settings.opacity.step,
-    unity: "%",
-    disabled: disabled,
-    field: "globalAlpha",
-    value: (_selectedShape$style$ = (_selectedShape$style10 = selectedShape.style) === null || _selectedShape$style10 === void 0 ? void 0 : _selectedShape$style10.globalAlpha) !== null && _selectedShape$style$ !== void 0 ? _selectedShape$style$ : 100,
-    valueChanged: handleShapeStyleChange
-  }))) : 'settings' in activeTool ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, 'strokeColor' in activeTool.settings && /*#__PURE__*/_react.default.createElement(_ColorField.default, {
-    selectedSettings: selectedSettings,
-    setSelectedSettings: setSelectedSettings,
-    title: "Couleur du trait",
-    mode: "stroke",
-    disabled: disabled,
-    field: "strokeColor",
-    value: activeTool.settings.strokeColor.default,
-    valueChanged: handleShapeStyleChange,
-    values: activeTool.settings.strokeColor.values
-  }), 'fillColor' in activeTool.settings && /*#__PURE__*/_react.default.createElement(_ColorField.default, {
-    selectedSettings: selectedSettings,
-    setSelectedSettings: setSelectedSettings,
-    title: "Couleur de fond",
-    disabled: disabled,
-    field: "fillColor",
-    value: activeTool.settings.fillColor.default,
-    valueChanged: handleShapeStyleChange,
-    values: activeTool.settings.fillColor.values
-  }), 'lineWidth' in activeTool.settings && /*#__PURE__*/_react.default.createElement(_RangeField.default, {
-    selectedSettings: selectedSettings,
-    setSelectedSettings: setSelectedSettings,
-    title: "Epaisseur du trait",
-    disabled: disabled,
-    field: "lineWidth",
-    icon: _icons.lineWidthIcon,
-    value: activeTool.settings.lineWidth.default,
-    valueChanged: handleShapeStyleChange,
-    unity: "px",
-    min: activeTool.settings.lineWidth.min,
-    max: activeTool.settings.lineWidth.max,
-    step: activeTool.settings.lineWidth.step
-  }), 'lineDash' in activeTool.settings && /*#__PURE__*/_react.default.createElement(_LineTypeField.default, {
-    selectedSettings: selectedSettings,
-    setSelectedSettings: setSelectedSettings,
-    disabled: disabled,
-    defaultValue: activeTool.settings.lineDash.default,
-    valueChanged: handleShapeStyleChange,
-    values: activeTool.settings.lineDash.values
-  }), 'lineArrow' in activeTool.settings && /*#__PURE__*/_react.default.createElement(_LineArrowField.default, {
-    selectedSettings: selectedSettings,
-    setSelectedSettings: setSelectedSettings,
-    disabled: disabled,
-    defaultValue: activeTool.settings.lineArrow.default,
-    valueChanged: handleShapeStyleChange,
-    values: activeTool.settings.lineArrow.values
-  }), 'pointsCount' in activeTool.settings && /*#__PURE__*/_react.default.createElement(_PointsNumberField.default, {
-    selectedSettings: selectedSettings,
-    setSelectedSettings: setSelectedSettings,
-    disabled: disabled,
-    valueChanged: handlePolygonLinesCount,
-    min: activeTool.settings.pointsCount.min,
-    max: activeTool.settings.pointsCount.max,
-    step: activeTool.settings.pointsCount.step,
-    value: activeTool.settings.pointsCount.default
-  }), 'fontFamily' in activeTool.settings && /*#__PURE__*/_react.default.createElement(_FontFamilyField.default, {
-    selectedSettings: selectedSettings,
-    setSelectedSettings: setSelectedSettings,
-    disabled: disabled,
-    valueChanged: handleShapeFontFamilyChange,
-    values: activeTool.settings.fontFamily.values,
-    defaultValue: activeTool.settings.fontFamily.default
-  }), 'fontBold' in activeTool.settings && /*#__PURE__*/_react.default.createElement(_ToggleField.default, {
-    setSelectedSettings: setSelectedSettings,
-    disabled: disabled,
-    field: "fontBold",
-    icon: _icons.boldIcon,
-    valueChanged: handleShapeFontFamilyChange,
-    values: activeTool.settings.fontBold.values,
-    value: activeTool.settings.fontBold.default
-  }), 'fontItalic' in activeTool.settings && /*#__PURE__*/_react.default.createElement(_ToggleField.default, {
-    setSelectedSettings: setSelectedSettings,
-    disabled: disabled,
-    field: "fontItalic",
-    icon: _icons.italicIcon,
-    valueChanged: handleShapeFontFamilyChange,
-    values: activeTool.settings.fontItalic.values,
-    value: activeTool.settings.fontItalic.default
-  }), 'opacity' in activeTool.settings && /*#__PURE__*/_react.default.createElement(_RangeField.default, {
-    selectedSettings: selectedSettings,
-    setSelectedSettings: setSelectedSettings,
-    title: "Opacit\xE9",
-    icon: _icons.opacityIcon,
-    min: activeTool.settings.opacity.min,
-    max: activeTool.settings.opacity.max,
-    step: activeTool.settings.opacity.step,
-    unity: "%",
-    disabled: disabled,
-    field: "opacity",
-    value: activeTool.settings.opacity.default,
-    valueChanged: handleShapeStyleChange
-  })) : null;
-};
-
-const SettingsBar = _ref2 => {
-  let {
-    width,
-    disabled = false,
-    availableTools,
-    updateToolSettings,
-    layersManipulation,
-    toggleLayoutPanel,
-    activeTool,
-    selectedShape,
-    canvas,
-    updateShape,
-    removeShape
-  } = _ref2;
-  const [selectedSettings, setSelectedSettings] = (0, _react.useState)(undefined);
-  const [isMenuOpen, setIsMenuOpen] = (0, _react.useState)(false);
-
-  const toggleTools = () => {
-    setIsMenuOpen(prev => !prev);
-  };
-
-  const selectedShapeTool = selectedShape ? _fp.default.find({
-    id: selectedShape.toolId
-  }, availableTools) || _fp.default.find({
-    type: selectedShape.type
-  }, availableTools) : undefined;
-  const nbSettingsTools = (selectedShapeTool ? _fp.default.size(selectedShapeTool.settings) + 1 : 'settings' in activeTool ? _fp.default.size(activeTool.settings) : 0) + (layersManipulation ? 1 : 0);
-  const settingsBreakpoint = nbSettingsTools * SETTING_WIDTH;
-  const [settingsInMenu, setSettingsInMenu] = (0, _react.useState)(width < settingsBreakpoint);
-
-  const handleShapeStyleChange = (field, value) => {
-    if (selectedShape) {
-      updateShape(_fp.default.set(['style', field], value, selectedShape), true);
-      updateToolSettings(selectedShape.toolId || activeTool.id, field, value);
-    } else {
-      updateToolSettings(activeTool.id, field, value);
-    }
-  };
-
-  const handleShapeFontFamilyChange = (field, value) => {
-    if (selectedShape) {
-      var _newShape$style$fontB, _newShape$style, _newShape$style$fontI, _newShape$style2, _newShape$style3;
-
-      const ctx = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d');
-      if (!ctx) return;
-
-      const newShape = _fp.default.set(['style', field], value, selectedShape);
-
-      const fontSize = (0, _text.calculateTextFontSize)(ctx, newShape.value, newShape.width, (_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,
-        fontSize,
-        height: fontSize * newShape.value.length
-      };
-      updateShape(resizedShape, true);
-      updateToolSettings(selectedShape.toolId || activeTool.id, field, value);
-    } else {
-      updateToolSettings(activeTool.id, field, value);
-    }
-  };
-
-  const handlePolygonLinesCount = (field, value) => {
-    if (selectedShape) {
-      updateShape((0, _transform.updatePolygonLinesCount)(selectedShape, value), true);
-      updateToolSettings(selectedShape.toolId || activeTool.id, field, value);
-    } else {
-      updateToolSettings(activeTool.id, field, value);
-    }
-  };
-
-  (0, _react.useEffect)(() => {
-    setSettingsInMenu(width < settingsBreakpoint);
-  }, [width, settingsBreakpoint]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(StyledSettingsBar, null, settingsInMenu && nbSettingsTools > 2 && /*#__PURE__*/_react.default.createElement(_Button.default, {
-    disabled: disabled,
-    onClick: toggleTools,
-    title: "Toggle settings",
-    icon: _icons.settingsIcon
-  }), selectedShape ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, selectedShapeTool && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !settingsInMenu && /*#__PURE__*/_react.default.createElement(SettingsItems, {
-    activeTool: activeTool,
-    selectedShape: selectedShape,
-    selectedShapeTool: selectedShapeTool,
-    disabled: disabled,
-    selectedSettings: selectedSettings,
-    setSelectedSettings: setSelectedSettings,
-    handleShapeStyleChange: handleShapeStyleChange,
-    handlePolygonLinesCount: handlePolygonLinesCount,
-    handleShapeFontFamilyChange: handleShapeFontFamilyChange
-  }), /*#__PURE__*/_react.default.createElement(_DeleteButton.default, {
-    disabled: disabled,
-    selectedShape: selectedShape,
-    removeShape: removeShape
-  }))) : !settingsInMenu && /*#__PURE__*/_react.default.createElement(SettingsItems, {
-    activeTool: activeTool,
-    selectedShape: selectedShape,
-    selectedShapeTool: selectedShapeTool,
-    disabled: disabled,
-    selectedSettings: selectedSettings,
-    setSelectedSettings: setSelectedSettings,
-    handleShapeStyleChange: handleShapeStyleChange,
-    handlePolygonLinesCount: handlePolygonLinesCount,
-    handleShapeFontFamilyChange: handleShapeFontFamilyChange
-  }), /*#__PURE__*/_react.default.createElement(StyledSeparator, null), layersManipulation && /*#__PURE__*/_react.default.createElement(_LayoutButton.default, {
-    layersManipulation: layersManipulation,
-    disabled: disabled,
-    toggleLayoutPanel: toggleLayoutPanel
-  })), isMenuOpen && /*#__PURE__*/_react.default.createElement(StyledToolsModal, {
-    onClose: toggleTools,
-    position: "bottom"
-  }, /*#__PURE__*/_react.default.createElement(SettingsItems, {
-    activeTool: activeTool,
-    selectedShape: selectedShape,
-    selectedShapeTool: selectedShapeTool,
-    disabled: disabled,
-    selectedSettings: selectedSettings,
-    setSelectedSettings: setSelectedSettings,
-    handleShapeStyleChange: handleShapeStyleChange,
-    handlePolygonLinesCount: handlePolygonLinesCount,
-    handleShapeFontFamilyChange: handleShapeFontFamilyChange
-  })));
-};
-
-var _default = SettingsBar;
-exports.default = _default;

package/dist/components/settings/ToggleField.js

@@ -1,49 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _fp = _interopRequireDefault(require("lodash/fp"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _Button = _interopRequireDefault(require("../common/Button"));
-
-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 ToggleField = _ref => {
-  let {
-    setSelectedSettings,
-    disabled = false,
-    field,
-    icon,
-    values,
-    value = false,
-    valueChanged
-  } = _ref;
-  const [customKey] = (0, _react.useState)(_fp.default.uniqueId('settings_'));
-
-  const handleClick = () => {
-    setSelectedSettings(prev => {
-      return prev === customKey ? undefined : customKey;
-    });
-    valueChanged(field, !value);
-  };
-
-  if (values.length !== 2) return null;
-  return /*#__PURE__*/_react.default.createElement(_Button.default, {
-    onClick: handleClick,
-    selected: value,
-    disabled: disabled,
-    icon: icon
-  });
-};
-
-var _default = ToggleField;
-exports.default = _default;

package/dist/components/toolbox/EditTextBox.js

@@ -1,138 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _style = require("../../constants/style");
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _react2 = require("@linaria/react");
-
-var _string = require("../../utils/string");
-
-var _shapes = require("../../utils/shapes");
-
-var _trigo = require("../../utils/trigo");
-
-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 StyledEditBox = /*#__PURE__*/(0, _react2.styled)('div')({
-  name: "StyledEditBox",
-  class: "s1unz6yq",
-  vars: {
-    "s1unz6yq-0": [_ref => {
-      let {
-        transform
-      } = _ref;
-      return transform;
-    }],
-    "s1unz6yq-1": [_ref2 => {
-      let {
-        color
-      } = _ref2;
-      return color;
-    }],
-    "s1unz6yq-2": [_ref3 => {
-      let {
-        padding
-      } = _ref3;
-      return padding;
-    }, "px"],
-    "s1unz6yq-3": [_ref4 => {
-      let {
-        fontsize
-      } = _ref4;
-      return fontsize;
-    }, "px"],
-    "s1unz6yq-5": [_ref5 => {
-      let {
-        fontfamily
-      } = _ref5;
-      return fontfamily;
-    }],
-    "s1unz6yq-6": [_ref6 => {
-      let {
-        opacity
-      } = _ref6;
-      return opacity;
-    }]
-  }
-});
-
-const EditTextBox = _ref7 => {
-  var _shape$style$strokeCo, _shape$style, _shape$style$globalAl, _shape$style2, _shape$style$fontFami, _shape$style3, _shape$style$fontBold, _shape$style4, _shape$style$fontItal, _shape$style5;
-
-  let {
-    disabled = false,
-    scaleRatio,
-    shape,
-    defaultValue,
-    updateValue,
-    saveShapes,
-    selectionPadding
-  } = _ref7;
-  const ref = (0, _react.useRef)(null);
-  const saveShapesRef = (0, _react.useRef)(saveShapes);
-
-  const updateContentEditable = e => {
-    updateValue((0, _string.convertDivContentToStringArray)(e.target.innerHTML));
-  };
-
-  (0, _react.useEffect)(() => {
-    if (!ref.current) return;
-    const currentNode = ref.current;
-
-    const handlePaste = e => {
-      var _e$clipboardData;
-
-      e.preventDefault();
-      const text = (_e$clipboardData = e.clipboardData) === null || _e$clipboardData === void 0 ? void 0 : _e$clipboardData.getData('text/plain');
-      document.execCommand('insertText', false, text); //TODO use Clipboard API when ready
-    };
-
-    currentNode.addEventListener('paste', handlePaste);
-    currentNode.innerHTML = (0, _string.convertStringArrayToDivContent)(defaultValue);
-    currentNode.focus();
-    return () => {
-      currentNode.removeEventListener('paste', handlePaste);
-    };
-  }, [defaultValue]);
-  (0, _react.useEffect)(() => {
-    const saveText = saveShapesRef.current;
-    return () => {
-      saveText();
-    };
-  }, []);
-  const position = (0, _react.useMemo)(() => {
-    const {
-      borders,
-      center
-    } = (0, _shapes.getShapeInfos)(shape, selectionPadding);
-    return (0, _trigo.rotatePoint)({
-      point: [borders.x, borders.y],
-      rotation: -shape.rotation,
-      origin: center
-    });
-  }, [shape, selectionPadding]);
-  return /*#__PURE__*/_react.default.createElement(StyledEditBox, {
-    ref: ref,
-    transform: "translate3D(".concat(position[0] * scaleRatio, "px, ").concat(position[1] * scaleRatio, "px, 0) rotate(").concat((0, _trigo.radiansToDegrees)(shape.rotation), "deg)"),
-    fontsize: shape.fontSize * scaleRatio,
-    padding: selectionPadding * scaleRatio,
-    color: (_shape$style$strokeCo = (_shape$style = shape.style) === null || _shape$style === void 0 ? void 0 : _shape$style.strokeColor) !== null && _shape$style$strokeCo !== void 0 ? _shape$style$strokeCo : 'inherit',
-    opacity: ((_shape$style$globalAl = (_shape$style2 = shape.style) === null || _shape$style2 === void 0 ? void 0 : _shape$style2.globalAlpha) !== null && _shape$style$globalAl !== void 0 ? _shape$style$globalAl : 100) / 100,
-    fontfamily: (_shape$style$fontFami = (_shape$style3 = shape.style) === null || _shape$style3 === void 0 ? void 0 : _shape$style3.fontFamily) !== null && _shape$style$fontFami !== void 0 ? _shape$style$fontFami : _style.STYLE_FONT_DEFAULT,
-    "data-fontbold": (_shape$style$fontBold = (_shape$style4 = shape.style) === null || _shape$style4 === void 0 ? void 0 : _shape$style4.fontBold) !== null && _shape$style$fontBold !== void 0 ? _shape$style$fontBold : false,
-    "data-fontitalic": (_shape$style$fontItal = (_shape$style5 = shape.style) === null || _shape$style5 === void 0 ? void 0 : _shape$style5.fontItalic) !== null && _shape$style$fontItal !== void 0 ? _shape$style$fontItal : false,
-    contentEditable: !disabled,
-    onInput: updateContentEditable
-  });
-};
-
-var _default = EditTextBox;
-exports.default = _default;

package/dist/components/toolbox/LoadFileTool.js

@@ -1,58 +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 _Button = _interopRequireDefault(require("../common/Button"));
-
-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 LoadFileTool = _ref => {
-  var _type$label;
-
-  let {
-    disabled = false,
-    withText = false,
-    loadFile,
-    type,
-    img,
-    accept
-  } = _ref;
-  const inputRef = (0, _react.useRef)(null);
-
-  const handleClick = event => {
-    event.stopPropagation();
-    if (inputRef.current) inputRef.current.value = '';
-  };
-
-  const handleChange = event => {
-    var _event$target$files;
-
-    const file = (_event$target$files = event.target.files) === null || _event$target$files === void 0 ? void 0 : _event$target$files.item(0);
-    if (!file) return;
-    loadFile(file);
-  };
-
-  return /*#__PURE__*/_react.default.createElement(_Button.default, {
-    ref: inputRef,
-    type: "file",
-    onClick: handleClick,
-    onChange: handleChange,
-    accept: accept,
-    title: (_type$label = type.label) !== null && _type$label !== void 0 ? _type$label : type.type,
-    icon: img,
-    children: withText ? type.label : undefined,
-    disabled: disabled
-  });
-};
-
-var _default = LoadFileTool;
-exports.default = _default;