@yorab/react-paint 0.5.0 → 0.6.0

package/dist/components/settings/LineTypeField.js

@@ -17,11 +17,11 @@ var _fp = _interopRequireDefault(require("lodash/fp"));
 
 var StyledLine = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledLine",
-  "class": "s1yz5lc1"
+  "class": "s1qssg4n"
 });
 var StyledOption = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledOption",
-  "class": "s1k64iv7"
+  "class": "se26iq6"
 });
 
 var LineTypeOption = function LineTypeOption(_ref) {
@@ -48,7 +48,7 @@ var LineTypeField = function LineTypeField(_ref2) {
     CustomOption: LineTypeOption,
     title: "Type de traits",
     disabled: disabled,
-    field: "style.lineDash",
+    field: "lineDash",
     values: values,
     defaultValue: defaultValue,
     valueChanged: valueChanged

package/dist/components/settings/PointsNumberField.js

@@ -27,7 +27,7 @@ var PointsNumberField = function PointsNumberField(_ref) {
     setSelectedSettings: setSelectedSettings,
     title: "Nombre de points",
     disabled: disabled,
-    field: "style.pointsCount",
+    field: "pointsCount",
     min: min,
     max: max,
     step: step,

package/dist/components/settings/RangeField.js

@@ -27,7 +27,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var StyledLabel = /*#__PURE__*/(0, _react2.styled)("label")({
   name: "StyledLabel",
-  "class": "s4h1871"
+  "class": "s9mugpt"
 });
 
 var RangeField = function RangeField(_ref) {

package/dist/components/settings/SelectField.js

@@ -27,7 +27,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var StyledButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
   name: "StyledButton",
-  "class": "sfr849o"
+  "class": "s1ktxhkr"
 });
 
 var SelectField = function SelectField(_ref) {

package/dist/components/settings/SettingsBar.js

@@ -37,6 +37,10 @@ var _LineTypeField = _interopRequireDefault(require("./LineTypeField"));
 
 var _LineArrowField = _interopRequireDefault(require("./LineArrowField"));
 
+var _ToggleField = _interopRequireDefault(require("./ToggleField"));
+
+var _icons = require("../../constants/icons");
+
 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; }
@@ -47,19 +51,20 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var StyledSettingsBar = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledSettingsBar",
-  "class": "s17kh6p4"
+  "class": "s16z54di"
 });
 var StyledSeparator = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledSeparator",
-  "class": "s1fluhcn"
+  "class": "sa7lzh9"
 });
 
 var SettingsBar = function SettingsBar(_ref) {
-  var _selectedShape$style, _selectedShape$style2, _selectedShape$style3, _selectedShape$style4, _selectedShape$style5, _selectedShape$style6, _selectedShape$style7, _selectedShape$style$, _selectedShape$style8;
+  var _selectedShape$style, _selectedShape$style2, _selectedShape$style3, _selectedShape$style4, _selectedShape$style5, _selectedShape$style6, _selectedShape$style7, _selectedShape$style8, _selectedShape$style9, _selectedShape$style$, _selectedShape$style10;
 
   var _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       availableTools = _ref.availableTools,
+      updateToolSettings = _ref.updateToolSettings,
       layersManipulation = _ref.layersManipulation,
       toggleLayoutPanel = _ref.toggleLayoutPanel,
       activeTool = _ref.activeTool,
@@ -68,17 +73,6 @@ var SettingsBar = function SettingsBar(_ref) {
       updateShape = _ref.updateShape,
       removeShape = _ref.removeShape;
 
-  // const shapes = [
-  //   ShapeEnum.brush,
-  //   ShapeEnum.ellipse,
-  //   ShapeEnum.circle,
-  //   ShapeEnum.rect,
-  //   ShapeEnum.square,
-  //   ShapeEnum.line,
-  //   ShapeEnum.polygon,
-  //   ShapeEnum.curve,
-  //   ShapeEnum.text
-  // ]
   var _useState = (0, _react.useState)(undefined),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
       selectedSettings = _useState2[0],
@@ -86,23 +80,23 @@ var SettingsBar = function SettingsBar(_ref) {
 
   var handleShapeStyleChange = function handleShapeStyleChange(field, value) {
     if (selectedShape) {
-      updateShape(_fp["default"].set(field, value, selectedShape), true);
-    } // } else {
-    //   setDefaultConf(prevDefaultConf => _.set(field, value, prevDefaultConf))
-    // }
-
+      updateShape(_fp["default"].set(['style', field], value, selectedShape), true);
+      updateToolSettings(selectedShape.toolId, field, value);
+    } else {
+      updateToolSettings(activeTool.id, field, value);
+    }
   };
 
   var handleShapeFontFamilyChange = function handleShapeFontFamilyChange(field, value) {
     if (selectedShape) {
-      var _newShape$style;
+      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');
       if (!ctx) return;
 
-      var newShape = _fp["default"].set(field, value, selectedShape);
+      var newShape = _fp["default"].set(['style', field], value, selectedShape);
 
-      var fontSize = (0, _transform.calculateTextFontSize)(ctx, newShape.value, newShape.width, (_newShape$style = newShape.style) === null || _newShape$style === void 0 ? void 0 : _newShape$style.fontFamily);
+      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,
@@ -110,19 +104,19 @@ var SettingsBar = function SettingsBar(_ref) {
       });
 
       updateShape(resizedShape, true);
-    } // else {
-    //   setDefaultConf(prevDefaultConf => _.set(field, value, prevDefaultConf))
-    // }
-
+      updateToolSettings(selectedShape.toolId, field, value);
+    } else {
+      updateToolSettings(activeTool.id, field, value);
+    }
   };
 
   var handlePolygonLinesCount = function handlePolygonLinesCount(field, value) {
     if (selectedShape) {
       updateShape((0, _transform.updatePolygonLinesCount)(selectedShape, value), true);
-    } // else {
-    //   setDefaultConf(prevDefaultConf => _.set(field, value, prevDefaultConf))
-    // }
-
+      updateToolSettings(selectedShape.toolId, field, value);
+    } else {
+      updateToolSettings(activeTool.id, field, value);
+    }
   };
 
   var selectedShapeTool = selectedShape ? _fp["default"].find({
@@ -130,28 +124,30 @@ var SettingsBar = function SettingsBar(_ref) {
   }, availableTools) || _fp["default"].find({
     type: selectedShape.type
   }, availableTools) : undefined;
-  return /*#__PURE__*/_react["default"].createElement(StyledSettingsBar, null, selectedShape ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, selectedShapeTool && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, 'pointsCount' in selectedShapeTool.settings && /*#__PURE__*/_react["default"].createElement(_PointsNumberField["default"], {
+  return /*#__PURE__*/_react["default"].createElement(StyledSettingsBar, null, 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",
     disabled: disabled,
-    valueChanged: handlePolygonLinesCount,
-    min: selectedShapeTool.settings.pointsCount.min,
-    max: selectedShapeTool.settings.pointsCount.max,
-    step: selectedShapeTool.settings.pointsCount.step,
-    value: (_selectedShape$style = selectedShape.style) === null || _selectedShape$style === void 0 ? void 0 : _selectedShape$style.pointsCount
-  }), 'fontFamily' in selectedShapeTool.settings && /*#__PURE__*/_react["default"].createElement(_FontFamilyField["default"], {
+    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,
-    valueChanged: handleShapeFontFamilyChange,
-    values: selectedShapeTool.settings.fontFamily.values,
-    defaultValue: (_selectedShape$style2 = selectedShape.style) === null || _selectedShape$style2 === void 0 ? void 0 : _selectedShape$style2.fontFamily
+    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",
     disabled: disabled,
-    field: "style.lineWidth",
+    field: "lineWidth",
     value: (_selectedShape$style3 = selectedShape.style) === null || _selectedShape$style3 === void 0 ? void 0 : _selectedShape$style3.lineWidth,
     valueChanged: handleShapeStyleChange,
     unity: "px",
@@ -172,24 +168,38 @@ var SettingsBar = function SettingsBar(_ref) {
     defaultValue: (_selectedShape$style5 = selectedShape.style) === null || _selectedShape$style5 === void 0 ? void 0 : _selectedShape$style5.lineArrow,
     valueChanged: handleShapeStyleChange,
     values: selectedShapeTool.settings.lineArrow.values
-  }), 'strokeColor' in selectedShapeTool.settings && /*#__PURE__*/_react["default"].createElement(_ColorField["default"], {
+  }), 'pointsCount' in selectedShapeTool.settings && /*#__PURE__*/_react["default"].createElement(_PointsNumberField["default"], {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
-    title: "Couleur du trait",
     disabled: disabled,
-    field: "style.strokeColor",
-    value: (_selectedShape$style6 = selectedShape.style) === null || _selectedShape$style6 === void 0 ? void 0 : _selectedShape$style6.strokeColor,
-    valueChanged: handleShapeStyleChange,
-    values: selectedShapeTool.settings.strokeColor.values
-  }), 'fillColor' in selectedShapeTool.settings && /*#__PURE__*/_react["default"].createElement(_ColorField["default"], {
+    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,
-    title: "Couleur de fond",
     disabled: disabled,
-    field: "style.fillColor",
-    value: (_selectedShape$style7 = selectedShape.style) === null || _selectedShape$style7 === void 0 ? void 0 : _selectedShape$style7.fillColor,
-    valueChanged: handleShapeStyleChange,
-    values: selectedShapeTool.settings.fillColor.values
+    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,
@@ -199,35 +209,37 @@ var SettingsBar = function SettingsBar(_ref) {
     step: selectedShapeTool.settings.opacity.step,
     unity: "%",
     disabled: disabled,
-    field: "style.globalAlpha",
-    value: (_selectedShape$style$ = (_selectedShape$style8 = selectedShape.style) === null || _selectedShape$style8 === void 0 ? void 0 : _selectedShape$style8.globalAlpha) !== null && _selectedShape$style$ !== void 0 ? _selectedShape$style$ : 100,
+    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
   })), /*#__PURE__*/_react["default"].createElement(_DeleteButton["default"], {
     disabled: disabled,
     selectedShape: selectedShape,
     removeShape: removeShape
-  })) : 'settings' in activeTool && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, 'pointsCount' in activeTool.settings && /*#__PURE__*/_react["default"].createElement(_PointsNumberField["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",
     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"], {
+    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,
-    valueChanged: handleShapeFontFamilyChange,
-    values: activeTool.settings.fontFamily.values,
-    defaultValue: activeTool.settings.fontFamily["default"]
+    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: "style.lineWidth",
+    field: "lineWidth",
     value: activeTool.settings.lineWidth["default"],
     valueChanged: handleShapeStyleChange,
     unity: "px",
@@ -248,24 +260,38 @@ var SettingsBar = function SettingsBar(_ref) {
     defaultValue: activeTool.settings.lineArrow["default"],
     valueChanged: handleShapeStyleChange,
     values: activeTool.settings.lineArrow.values
-  }), 'strokeColor' in activeTool.settings && /*#__PURE__*/_react["default"].createElement(_ColorField["default"], {
+  }), 'pointsCount' in activeTool.settings && /*#__PURE__*/_react["default"].createElement(_PointsNumberField["default"], {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
-    title: "Couleur du trait",
     disabled: disabled,
-    field: "style.strokeColor",
-    value: activeTool.settings.strokeColor["default"],
-    valueChanged: handleShapeStyleChange,
-    values: activeTool.settings.strokeColor.values
-  }), 'fillColor' in activeTool.settings && /*#__PURE__*/_react["default"].createElement(_ColorField["default"], {
+    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,
-    title: "Couleur de fond",
     disabled: disabled,
-    field: "style.fillColor",
-    value: activeTool.settings.fillColor["default"],
-    valueChanged: handleShapeStyleChange,
-    values: activeTool.settings.fillColor.values
+    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,
@@ -275,7 +301,7 @@ var SettingsBar = function SettingsBar(_ref) {
     step: activeTool.settings.opacity.step,
     unity: "%",
     disabled: disabled,
-    field: "style.globalAlpha",
+    field: "globalAlpha",
     value: activeTool.settings.opacity["default"],
     valueChanged: handleShapeStyleChange
   })), /*#__PURE__*/_react["default"].createElement(StyledSeparator, null), layersManipulation && /*#__PURE__*/_react["default"].createElement(_LayoutButton["default"], {

package/dist/components/settings/ToggleField.js

@@ -0,0 +1,56 @@
+"use strict";
+
+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"));
+
+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 _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 ToggleField = function ToggleField(_ref) {
+  var setSelectedSettings = _ref.setSelectedSettings,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      field = _ref.field,
+      icon = _ref.icon,
+      values = _ref.values,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? false : _ref$value,
+      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() {
+    setSelectedSettings(function (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

@@ -27,41 +27,45 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var StyledEditBox = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledEditBox",
-  "class": "se8ufj4",
+  "class": "s1unz6yq",
   vars: {
-    "se8ufj4-0": [function (_ref) {
+    "s1unz6yq-0": [function (_ref) {
       var transform = _ref.transform;
       return transform;
     }],
-    "se8ufj4-1": [function (_ref2) {
+    "s1unz6yq-1": [function (_ref2) {
       var color = _ref2.color;
       return color;
     }],
-    "se8ufj4-2": [function (_ref3) {
+    "s1unz6yq-2": [function (_ref3) {
       var padding = _ref3.padding;
       return padding;
     }, "px"],
-    "se8ufj4-3": [function (_ref4) {
+    "s1unz6yq-3": [function (_ref4) {
       var fontsize = _ref4.fontsize;
       return fontsize;
     }, "px"],
-    "se8ufj4-5": [function (_ref5) {
+    "s1unz6yq-5": [function (_ref5) {
       var fontfamily = _ref5.fontfamily;
       return fontfamily;
+    }],
+    "s1unz6yq-6": [function (_ref6) {
+      var opacity = _ref6.opacity;
+      return opacity;
     }]
   }
 });
 
-var EditTextBox = function EditTextBox(_ref6) {
-  var _shape$style$strokeCo, _shape$style, _shape$style$fontFami, _shape$style2;
+var EditTextBox = function 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;
 
-  var _ref6$disabled = _ref6.disabled,
-      disabled = _ref6$disabled === void 0 ? false : _ref6$disabled,
-      scaleRatio = _ref6.scaleRatio,
-      shape = _ref6.shape,
-      defaultValue = _ref6.defaultValue,
-      updateValue = _ref6.updateValue,
-      selectionPadding = _ref6.selectionPadding;
+  var _ref7$disabled = _ref7.disabled,
+      disabled = _ref7$disabled === void 0 ? false : _ref7$disabled,
+      scaleRatio = _ref7.scaleRatio,
+      shape = _ref7.shape,
+      defaultValue = _ref7.defaultValue,
+      updateValue = _ref7.updateValue,
+      selectionPadding = _ref7.selectionPadding;
   var ref = (0, _react.useRef)(null);
 
   var updateContentEditable = function updateContentEditable(e) {
@@ -86,7 +90,10 @@ var EditTextBox = function EditTextBox(_ref6) {
     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',
-    fontfamily: (_shape$style$fontFami = (_shape$style2 = shape.style) === null || _shape$style2 === void 0 ? void 0 : _shape$style2.fontFamily) !== null && _shape$style$fontFami !== void 0 ? _shape$style$fontFami : _style.STYLE_FONT_DEFAULT,
+    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
   });

package/dist/components/toolbox/MenuGroup.js

@@ -39,11 +39,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var StyledPanel = /*#__PURE__*/(0, _react2.styled)(_Panel["default"])({
   name: "StyledPanel",
-  "class": "s1qu0ers"
+  "class": "s1uphjfh"
 });
 var StyledRelative = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledRelative",
-  "class": "s1y35t9y"
+  "class": "s1e5a6k5"
 });
 
 var MenuGroup = function MenuGroup(_ref) {
@@ -81,6 +81,10 @@ var MenuGroup = function MenuGroup(_ref) {
       isOpen = _useState2[0],
       setIsOpen = _useState2[1];
 
+  var _useTransition = (0, _react.useTransition)(),
+      _useTransition2 = (0, _slicedToArray2["default"])(_useTransition, 2),
+      startTransition = _useTransition2[1];
+
   var loadFile = function loadFile(file) {
     setIsOpen(false);
     loadFileFromProps(file);
@@ -110,7 +114,9 @@ var MenuGroup = function MenuGroup(_ref) {
   }();
 
   var openPanel = function openPanel() {
-    setIsOpen(true);
+    startTransition(function () {
+      setIsOpen(true);
+    });
   };
 
   var isActive = _fp["default"].includes(activeTool.type, group === null || group === void 0 ? void 0 : group.tools);
@@ -123,12 +129,8 @@ var MenuGroup = function MenuGroup(_ref) {
       setIsOpen(false);
     };
 
-    var timeoutId = setTimeout(function () {
-      //TODO find a better fix than settimeout for react18
-      document.addEventListener('click', closePanel);
-    }, 0);
+    document.addEventListener('click', closePanel);
     return function () {
-      clearTimeout(timeoutId);
       document.removeEventListener('click', closePanel);
     };
   }, [isOpen]);

package/dist/components/toolbox/PictureUrlInput.js

@@ -27,7 +27,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var StyledInputModal = /*#__PURE__*/(0, _react2.styled)(_Modal["default"])({
   name: "StyledInputModal",
-  "class": "s1rncfwv"
+  "class": "s95bkm9"
 });
 
 var PictureUrlModal = function PictureUrlModal(_ref) {

package/dist/components/toolbox/Toolbar.js

@@ -44,15 +44,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var TOOL_WIDTH = 40;
 var StyledShrinkableTools = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledShrinkableTools",
-  "class": "s1gorp95"
+  "class": "so6hnjf"
 });
 var StyledToolbox = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledToolbox",
-  "class": "s1ivsaf6"
+  "class": "s1c1dllr"
 });
 var StyledToolsModal = /*#__PURE__*/(0, _react2.styled)(_Modal["default"])({
   name: "StyledToolsModal",
-  "class": "sv0y70r"
+  "class": "s1g032mh"
 });
 var TOOLBAR_STRUCTURE = [{
   title: 'brush',
@@ -135,6 +135,14 @@ var Toolbar = function Toolbar(_ref) {
   var setActiveTool = function setActiveTool(tool) {
     setActiveToolFromProps(tool);
     setIsMenuOpen(false);
+  };
+
+  var setActiveToolFromId = function setActiveToolFromId(toolId) {
+    var _availableTools$find;
+
+    setActiveTool((_availableTools$find = availableTools.find(function (tool) {
+      return tool.id === toolId;
+    })) !== null && _availableTools$find !== void 0 ? _availableTools$find : activeTool);
   }; //360 240
 
 
@@ -163,7 +171,7 @@ var Toolbar = function Toolbar(_ref) {
       key: i,
       activeTool: activeTool,
       group: group,
-      setActiveTool: setActiveTool
+      setActiveToolFromId: setActiveToolFromId
     });
   })), !actionsInMenu && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
     type: _tools.UNDO_TOOL,