@yorab/react-paint 0.6.4 → 0.7.1

package/dist/components/settings/SelectField.js

@@ -2,14 +2,10 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports.default = void 0;
 
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
@@ -21,70 +17,65 @@ var _Panel = _interopRequireDefault(require("../common/Panel"));
 
 var _react2 = require("@linaria/react");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _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; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var StyledButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
+const StyledButton = /*#__PURE__*/(0, _react2.styled)(_Button.default)({
   name: "StyledButton",
-  "class": "s1ktxhkr"
+  class: "s1ktxhkr"
 });
-var StyleWrapper = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyleWrapper = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyleWrapper",
-  "class": "s5sp14o"
+  class: "s5sp14o"
 });
 
-var SelectField = function SelectField(_ref) {
-  var CustomOption = _ref.CustomOption,
-      selectedSettings = _ref.selectedSettings,
-      setSelectedSettings = _ref.setSelectedSettings,
-      _ref$title = _ref.title,
-      title = _ref$title === void 0 ? "Choisissez l'option" : _ref$title,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      field = _ref.field,
-      icon = _ref.icon,
-      values = _ref.values,
-      defaultValue = _ref.defaultValue,
-      valueChanged = _ref.valueChanged;
-
-  var _useState = (0, _react.useState)(_fp["default"].uniqueId('settings_')),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
-      customKey = _useState2[0];
-
-  var handleClick = function handleClick(value) {
+const SelectField = _ref => {
+  let {
+    CustomOption,
+    selectedSettings,
+    setSelectedSettings,
+    title = "Choisissez l'option",
+    disabled = false,
+    field,
+    icon,
+    values,
+    defaultValue,
+    valueChanged
+  } = _ref;
+  const [customKey] = (0, _react.useState)(_fp.default.uniqueId('settings_'));
+
+  const handleClick = value => {
     valueChanged(field, value);
   };
 
-  var togglePanel = function togglePanel() {
-    setSelectedSettings(function (prev) {
+  const togglePanel = () => {
+    setSelectedSettings(prev => {
       return prev === customKey ? undefined : customKey;
     });
   };
 
-  var isPanelVisible = selectedSettings === customKey;
-  if (_fp["default"].isEmpty(values)) return null;
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  const isPanelVisible = selectedSettings === customKey;
+  if (_fp.default.isEmpty(values)) return null;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
     selected: isPanelVisible,
     title: title,
     icon: icon,
     disabled: disabled,
     onClick: togglePanel
-  }), isPanelVisible && /*#__PURE__*/_react["default"].createElement(_Panel["default"], {
+  }), isPanelVisible && /*#__PURE__*/_react.default.createElement(_Panel.default, {
     title: title,
     alignment: "left",
     fitContainer: true
-  }, /*#__PURE__*/_react["default"].createElement(StyleWrapper, null, values.map(function (value) {
-    return /*#__PURE__*/_react["default"].createElement(StyledButton, {
+  }, /*#__PURE__*/_react.default.createElement(StyleWrapper, null, values.map(value => {
+    return /*#__PURE__*/_react.default.createElement(StyledButton, {
       key: value,
       title: "".concat(value),
-      onClick: function onClick() {
-        return handleClick(value);
-      },
+      onClick: () => handleClick(value),
       selected: defaultValue == value
-    }, /*#__PURE__*/_react["default"].createElement(CustomOption, null, value));
+    }, /*#__PURE__*/_react.default.createElement(CustomOption, null, value));
   }))));
 };
 
 var _default = SelectField;
-exports["default"] = _default;
+exports.default = _default;

package/dist/components/settings/SettingsBar.js

@@ -2,16 +2,10 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports.default = void 0;
 
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
@@ -45,41 +39,41 @@ var _Button = _interopRequireDefault(require("../common/Button"));
 
 var _Modal = _interopRequireDefault(require("../common/Modal"));
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _text = require("../../utils/shapes/text");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var SETTING_WIDTH = 40;
-var StyledSettingsBar = /*#__PURE__*/(0, _react2.styled)("div")({
+const SETTING_WIDTH = 40;
+const StyledSettingsBar = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledSettingsBar",
-  "class": "s16z54di"
+  class: "s16z54di"
 });
-var StyledSeparator = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledSeparator = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledSeparator",
-  "class": "sa7lzh9"
+  class: "sa7lzh9"
 });
-var StyledToolsModal = /*#__PURE__*/(0, _react2.styled)(_Modal["default"])({
+const StyledToolsModal = /*#__PURE__*/(0, _react2.styled)(_Modal.default)({
   name: "StyledToolsModal",
-  "class": "s7b85in"
+  class: "s7b85in"
 });
 
-var SettingsItems = function SettingsItems(_ref) {
+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;
 
-  var activeTool = _ref.activeTool,
-      selectedShape = _ref.selectedShape,
-      selectedShapeTool = _ref.selectedShapeTool,
-      disabled = _ref.disabled,
-      selectedSettings = _ref.selectedSettings,
-      setSelectedSettings = _ref.setSelectedSettings,
-      handleShapeStyleChange = _ref.handleShapeStyleChange,
-      handlePolygonLinesCount = _ref.handlePolygonLinesCount,
-      handleShapeFontFamilyChange = _ref.handleShapeFontFamilyChange;
-  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"], {
+  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",
@@ -89,7 +83,7 @@ var SettingsItems = function SettingsItems(_ref) {
     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"], {
+  }), 'fillColor' in selectedShapeTool.settings && /*#__PURE__*/_react.default.createElement(_ColorField.default, {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
     title: "Couleur de fond",
@@ -98,7 +92,7 @@ var SettingsItems = function SettingsItems(_ref) {
     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"], {
+  }), 'lineWidth' in selectedShapeTool.settings && /*#__PURE__*/_react.default.createElement(_RangeField.default, {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
     title: "Epaisseur du trait",
@@ -111,21 +105,21 @@ var SettingsItems = function SettingsItems(_ref) {
     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"], {
+  }), '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"], {
+  }), '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"], {
+  }), 'pointsCount' in selectedShapeTool.settings && /*#__PURE__*/_react.default.createElement(_PointsNumberField.default, {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
     disabled: disabled,
@@ -134,14 +128,14 @@ var SettingsItems = function SettingsItems(_ref) {
     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"], {
+  }), '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"], {
+  }), 'fontBold' in selectedShapeTool.settings && /*#__PURE__*/_react.default.createElement(_ToggleField.default, {
     setSelectedSettings: setSelectedSettings,
     disabled: disabled,
     field: "fontBold",
@@ -149,7 +143,7 @@ var SettingsItems = function SettingsItems(_ref) {
     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"], {
+  }), 'fontItalic' in selectedShapeTool.settings && /*#__PURE__*/_react.default.createElement(_ToggleField.default, {
     setSelectedSettings: setSelectedSettings,
     disabled: disabled,
     field: "fontItalic",
@@ -157,7 +151,7 @@ var SettingsItems = function SettingsItems(_ref) {
     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"], {
+  }), 'opacity' in selectedShapeTool.settings && /*#__PURE__*/_react.default.createElement(_RangeField.default, {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
     title: "Opacit\xE9",
@@ -170,53 +164,53 @@ var SettingsItems = function SettingsItems(_ref) {
     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"], {
+  }))) : '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"],
+    value: activeTool.settings.strokeColor.default,
     valueChanged: handleShapeStyleChange,
     values: activeTool.settings.strokeColor.values
-  }), 'fillColor' in activeTool.settings && /*#__PURE__*/_react["default"].createElement(_ColorField["default"], {
+  }), '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"],
+    value: activeTool.settings.fillColor.default,
     valueChanged: handleShapeStyleChange,
     values: activeTool.settings.fillColor.values
-  }), 'lineWidth' in activeTool.settings && /*#__PURE__*/_react["default"].createElement(_RangeField["default"], {
+  }), '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"],
+    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"], {
+  }), 'lineDash' in activeTool.settings && /*#__PURE__*/_react.default.createElement(_LineTypeField.default, {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
     disabled: disabled,
-    defaultValue: activeTool.settings.lineDash["default"],
+    defaultValue: activeTool.settings.lineDash.default,
     valueChanged: handleShapeStyleChange,
     values: activeTool.settings.lineDash.values
-  }), 'lineArrow' in activeTool.settings && /*#__PURE__*/_react["default"].createElement(_LineArrowField["default"], {
+  }), 'lineArrow' in activeTool.settings && /*#__PURE__*/_react.default.createElement(_LineArrowField.default, {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
     disabled: disabled,
-    defaultValue: activeTool.settings.lineArrow["default"],
+    defaultValue: activeTool.settings.lineArrow.default,
     valueChanged: handleShapeStyleChange,
     values: activeTool.settings.lineArrow.values
-  }), 'pointsCount' in activeTool.settings && /*#__PURE__*/_react["default"].createElement(_PointsNumberField["default"], {
+  }), 'pointsCount' in activeTool.settings && /*#__PURE__*/_react.default.createElement(_PointsNumberField.default, {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
     disabled: disabled,
@@ -224,31 +218,31 @@ var SettingsItems = function SettingsItems(_ref) {
     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"], {
+    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"], {
+    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"], {
+    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"], {
+    value: activeTool.settings.fontItalic.default
+  }), 'opacity' in activeTool.settings && /*#__PURE__*/_react.default.createElement(_RangeField.default, {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
     title: "Opacit\xE9",
@@ -258,105 +252,90 @@ var SettingsItems = function SettingsItems(_ref) {
     step: activeTool.settings.opacity.step,
     unity: "%",
     disabled: disabled,
-    field: "globalAlpha",
-    value: activeTool.settings.opacity["default"],
+    field: "opacity",
+    value: activeTool.settings.opacity.default,
     valueChanged: handleShapeStyleChange
   })) : null;
 };
 
-var SettingsBar = function SettingsBar(_ref2) {
-  var width = _ref2.width,
-      _ref2$disabled = _ref2.disabled,
-      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-      availableTools = _ref2.availableTools,
-      updateToolSettings = _ref2.updateToolSettings,
-      layersManipulation = _ref2.layersManipulation,
-      toggleLayoutPanel = _ref2.toggleLayoutPanel,
-      activeTool = _ref2.activeTool,
-      selectedShape = _ref2.selectedShape,
-      canvas = _ref2.canvas,
-      updateShape = _ref2.updateShape,
-      removeShape = _ref2.removeShape;
-
-  var _useState = (0, _react.useState)(undefined),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      selectedSettings = _useState2[0],
-      setSelectedSettings = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      isMenuOpen = _useState4[0],
-      setIsMenuOpen = _useState4[1];
-
-  var toggleTools = function toggleTools() {
-    setIsMenuOpen(function (prev) {
-      return !prev;
-    });
+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);
   };
 
-  var selectedShapeTool = selectedShape ? _fp["default"].find({
+  const selectedShapeTool = selectedShape ? _fp.default.find({
     id: selectedShape.toolId
-  }, availableTools) || _fp["default"].find({
+  }, availableTools) || _fp.default.find({
     type: selectedShape.type
   }, availableTools) : undefined;
-  var nbSettingsTools = (selectedShapeTool ? _fp["default"].size(selectedShapeTool.settings) + 1 : 'settings' in activeTool ? _fp["default"].size(activeTool.settings) : 0) + (layersManipulation ? 1 : 0);
-  var settingsBreakpoint = nbSettingsTools * SETTING_WIDTH;
-
-  var _useState5 = (0, _react.useState)(width < settingsBreakpoint),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      settingsInMenu = _useState6[0],
-      setSettingsInMenu = _useState6[1];
+  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);
 
-  var handleShapeStyleChange = function handleShapeStyleChange(field, value) {
+  const handleShapeStyleChange = (field, value) => {
     if (selectedShape) {
-      updateShape(_fp["default"].set(['style', field], value, selectedShape), true);
-      updateToolSettings(selectedShape.toolId, field, value);
+      updateShape(_fp.default.set(['style', field], value, selectedShape), true);
+      updateToolSettings(selectedShape.toolId || activeTool.id, field, value);
     } else {
       updateToolSettings(activeTool.id, field, value);
     }
   };
 
-  var handleShapeFontFamilyChange = function handleShapeFontFamilyChange(field, value) {
+  const handleShapeFontFamilyChange = (field, value) => {
     if (selectedShape) {
       var _newShape$style$fontB, _newShape$style, _newShape$style$fontI, _newShape$style2, _newShape$style3;
 
-      var ctx = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d');
+      const ctx = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d');
       if (!ctx) return;
 
-      var newShape = _fp["default"].set(['style', field], value, selectedShape);
+      const newShape = _fp.default.set(['style', field], value, selectedShape);
 
-      var fontSize = (0, _transform.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);
-
-      var resizedShape = _objectSpread(_objectSpread({}, newShape), {}, {
-        fontSize: fontSize,
+      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, field, value);
+      updateToolSettings(selectedShape.toolId || activeTool.id, field, value);
     } else {
       updateToolSettings(activeTool.id, field, value);
     }
   };
 
-  var handlePolygonLinesCount = function handlePolygonLinesCount(field, value) {
+  const handlePolygonLinesCount = (field, value) => {
     if (selectedShape) {
       updateShape((0, _transform.updatePolygonLinesCount)(selectedShape, value), true);
-      updateToolSettings(selectedShape.toolId, field, value);
+      updateToolSettings(selectedShape.toolId || activeTool.id, field, value);
     } else {
       updateToolSettings(activeTool.id, field, value);
     }
   };
 
-  (0, _react.useEffect)(function () {
+  (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"], {
+  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, {
+  }), 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,
@@ -366,11 +345,11 @@ var SettingsBar = function SettingsBar(_ref2) {
     handleShapeStyleChange: handleShapeStyleChange,
     handlePolygonLinesCount: handlePolygonLinesCount,
     handleShapeFontFamilyChange: handleShapeFontFamilyChange
-  }), /*#__PURE__*/_react["default"].createElement(_DeleteButton["default"], {
+  }), /*#__PURE__*/_react.default.createElement(_DeleteButton.default, {
     disabled: disabled,
     selectedShape: selectedShape,
     removeShape: removeShape
-  }))) : !settingsInMenu && /*#__PURE__*/_react["default"].createElement(SettingsItems, {
+  }))) : !settingsInMenu && /*#__PURE__*/_react.default.createElement(SettingsItems, {
     activeTool: activeTool,
     selectedShape: selectedShape,
     selectedShapeTool: selectedShapeTool,
@@ -380,14 +359,14 @@ var SettingsBar = function SettingsBar(_ref2) {
     handleShapeStyleChange: handleShapeStyleChange,
     handlePolygonLinesCount: handlePolygonLinesCount,
     handleShapeFontFamilyChange: handleShapeFontFamilyChange
-  }), /*#__PURE__*/_react["default"].createElement(StyledSeparator, null), layersManipulation && /*#__PURE__*/_react["default"].createElement(_LayoutButton["default"], {
+  }), /*#__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, {
+  })), isMenuOpen && /*#__PURE__*/_react.default.createElement(StyledToolsModal, {
     onClose: toggleTools,
     position: "bottom"
-  }, /*#__PURE__*/_react["default"].createElement(SettingsItems, {
+  }, /*#__PURE__*/_react.default.createElement(SettingsItems, {
     activeTool: activeTool,
     selectedShape: selectedShape,
     selectedShapeTool: selectedShapeTool,
@@ -401,4 +380,4 @@ var SettingsBar = function SettingsBar(_ref2) {
 };
 
 var _default = SettingsBar;
-exports["default"] = _default;
+exports.default = _default;