@yorab/react-paint 0.5.0 → 0.6.2

package/dist/components/settings/SettingsBar.js

@@ -37,6 +37,14 @@ 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"));
+
 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; }
@@ -45,113 +53,58 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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; }
 
+var SETTING_WIDTH = 40;
 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 StyledToolsModal = /*#__PURE__*/(0, _react2.styled)(_Modal["default"])({
+  name: "StyledToolsModal",
+  "class": "s7b85in"
 });
 
-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 SettingsItems = function 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 _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      availableTools = _ref.availableTools,
-      layersManipulation = _ref.layersManipulation,
-      toggleLayoutPanel = _ref.toggleLayoutPanel,
-      activeTool = _ref.activeTool,
+  var activeTool = _ref.activeTool,
       selectedShape = _ref.selectedShape,
-      canvas = _ref.canvas,
-      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],
-      setSelectedSettings = _useState2[1];
-
-  var handleShapeStyleChange = function handleShapeStyleChange(field, value) {
-    if (selectedShape) {
-      updateShape(_fp["default"].set(field, value, selectedShape), true);
-    } // } else {
-    //   setDefaultConf(prevDefaultConf => _.set(field, value, prevDefaultConf))
-    // }
-
-  };
-
-  var handleShapeFontFamilyChange = function handleShapeFontFamilyChange(field, value) {
-    if (selectedShape) {
-      var _newShape$style;
-
-      var ctx = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d');
-      if (!ctx) return;
-
-      var newShape = _fp["default"].set(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 resizedShape = _objectSpread(_objectSpread({}, newShape), {}, {
-        fontSize: fontSize,
-        height: fontSize * newShape.value.length
-      });
-
-      updateShape(resizedShape, true);
-    } // else {
-    //   setDefaultConf(prevDefaultConf => _.set(field, value, prevDefaultConf))
-    // }
-
-  };
-
-  var handlePolygonLinesCount = function handlePolygonLinesCount(field, value) {
-    if (selectedShape) {
-      updateShape((0, _transform.updatePolygonLinesCount)(selectedShape, value), true);
-    } // else {
-    //   setDefaultConf(prevDefaultConf => _.set(field, value, prevDefaultConf))
-    // }
-
-  };
-
-  var selectedShapeTool = selectedShape ? _fp["default"].find({
-    id: selectedShape.toolId
-  }, 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"], {
+      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"], {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
+    title: "Couleur du trait",
+    mode: "stroke",
     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",
+    icon: _icons.lineWidthIcon,
     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,62 +125,77 @@ 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,
     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: "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",
+    mode: "stroke",
     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",
+    icon: _icons.lineWidthIcon,
     value: activeTool.settings.lineWidth["default"],
     valueChanged: handleShapeStyleChange,
     unity: "px",
@@ -248,41 +216,188 @@ 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,
     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: "style.globalAlpha",
+    field: "globalAlpha",
     value: activeTool.settings.opacity["default"],
     valueChanged: handleShapeStyleChange
-  })), /*#__PURE__*/_react["default"].createElement(StyledSeparator, null), layersManipulation && /*#__PURE__*/_react["default"].createElement(_LayoutButton["default"], {
+  })) : 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;
+    });
+  };
+
+  var selectedShapeTool = selectedShape ? _fp["default"].find({
+    id: selectedShape.toolId
+  }, 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];
+
+  var handleShapeStyleChange = function handleShapeStyleChange(field, value) {
+    if (selectedShape) {
+      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$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(['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,
+        height: fontSize * newShape.value.length
+      });
+
+      updateShape(resizedShape, true);
+      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);
+      updateToolSettings(selectedShape.toolId, field, value);
+    } else {
+      updateToolSettings(activeTool.id, field, value);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    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;

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
   });