@yorab/react-paint 0.4.2 → 0.6.1

package/dist/components/settings/SettingsBar.js

@@ -19,8 +19,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@linaria/react");
 
-var _Shapes = require("../../types/Shapes");
-
 var _transform = require("../../utils/transform");
 
 var _ColorField = _interopRequireDefault(require("./ColorField"));
@@ -39,7 +37,9 @@ var _LineTypeField = _interopRequireDefault(require("./LineTypeField"));
 
 var _LineArrowField = _interopRequireDefault(require("./LineArrowField"));
 
-var _style = require("../../constants/style");
+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); }
 
@@ -59,20 +59,19 @@ var StyledSeparator = /*#__PURE__*/(0, _react2.styled)("div")({
 });
 
 var SettingsBar = function SettingsBar(_ref) {
-  var _selectedShape$style, _selectedShape$style2, _selectedShape$style3, _selectedShape$style4, _selectedShape$style5, _selectedShape$style6, _selectedShape$style$, _selectedShape$style7, _defaultConf$style, _defaultConf$style2, _defaultConf$style3, _defaultConf$style4, _defaultConf$style5, _defaultConf$style6, _defaultConf$style7;
+  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,
       selectedShape = _ref.selectedShape,
       canvas = _ref.canvas,
       updateShape = _ref.updateShape,
-      removeShape = _ref.removeShape,
-      defaultConf = _ref.defaultConf,
-      setDefaultConf = _ref.setDefaultConf;
-  var shapes = [_Shapes.ShapeEnum.brush, _Shapes.ShapeEnum.ellipse, _Shapes.ShapeEnum.circle, _Shapes.ShapeEnum.rect, _Shapes.ShapeEnum.square, _Shapes.ShapeEnum.line, _Shapes.ShapeEnum.polygon, _Shapes.ShapeEnum.curve, _Shapes.ShapeEnum.text];
+      removeShape = _ref.removeShape;
 
   var _useState = (0, _react.useState)(undefined),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -81,24 +80,23 @@ var SettingsBar = function SettingsBar(_ref) {
 
   var handleShapeStyleChange = function handleShapeStyleChange(field, value) {
     if (selectedShape) {
-      updateShape(_fp["default"].set(field, value, selectedShape), true);
+      updateShape(_fp["default"].set(['style', field], value, selectedShape), true);
+      updateToolSettings(selectedShape.toolId, field, value);
     } else {
-      setDefaultConf(function (prevDefaultConf) {
-        return _fp["default"].set(field, value, prevDefaultConf);
-      });
+      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,
@@ -106,150 +104,205 @@ var SettingsBar = function SettingsBar(_ref) {
       });
 
       updateShape(resizedShape, true);
+      updateToolSettings(selectedShape.toolId, field, value);
     } else {
-      setDefaultConf(function (prevDefaultConf) {
-        return _fp["default"].set(field, value, prevDefaultConf);
-      });
+      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 {
-      setDefaultConf(function (prevDefaultConf) {
-        return _fp["default"].set(field, value, prevDefaultConf);
-      });
+      updateToolSettings(activeTool.id, field, value);
     }
   };
 
-  return /*#__PURE__*/_react["default"].createElement(StyledSettingsBar, null, selectedShape ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, shapes.includes(selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (selectedShape.type === _Shapes.ShapeEnum.polygon || selectedShape.type === _Shapes.ShapeEnum.curve) && /*#__PURE__*/_react["default"].createElement(_PointsNumberField["default"], {
+  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, 'strokeColor' in selectedShapeTool.settings && /*#__PURE__*/_react["default"].createElement(_ColorField["default"], {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
+    title: "Couleur du trait",
     disabled: disabled,
-    defaultValue: selectedShape.points.length,
-    valueChanged: handlePolygonLinesCount,
-    values: selectedShape.type === _Shapes.ShapeEnum.curve ? _style.CURVE_POINTS_VALUES : _style.POLYGON_POINTS_VALUES
-  }), selectedShape.type === _Shapes.ShapeEnum.text ? /*#__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,
-    defaultValue: (_selectedShape$style = selectedShape.style) === null || _selectedShape$style === void 0 ? void 0 : _selectedShape$style.fontFamily,
-    valueChanged: handleShapeFontFamilyChange
-  }) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_RangeField["default"], {
+    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",
-    value: (_selectedShape$style2 = selectedShape.style) === null || _selectedShape$style2 === void 0 ? void 0 : _selectedShape$style2.lineWidth,
+    field: "lineWidth",
+    value: (_selectedShape$style3 = selectedShape.style) === null || _selectedShape$style3 === void 0 ? void 0 : _selectedShape$style3.lineWidth,
     valueChanged: handleShapeStyleChange,
-    unity: "px"
-  }), /*#__PURE__*/_react["default"].createElement(_LineTypeField["default"], {
+    unity: "px",
+    min: selectedShapeTool.settings.lineWidth.min,
+    max: selectedShapeTool.settings.lineWidth.max,
+    step: selectedShapeTool.settings.lineWidth.step
+  }), 'lineDash' in selectedShapeTool.settings && /*#__PURE__*/_react["default"].createElement(_LineTypeField["default"], {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
     disabled: disabled,
-    defaultValue: (_selectedShape$style3 = selectedShape.style) === null || _selectedShape$style3 === void 0 ? void 0 : _selectedShape$style3.lineDash,
-    valueChanged: handleShapeStyleChange
-  })), selectedShape.type === _Shapes.ShapeEnum.line && /*#__PURE__*/_react["default"].createElement(_LineArrowField["default"], {
+    defaultValue: (_selectedShape$style4 = selectedShape.style) === null || _selectedShape$style4 === void 0 ? void 0 : _selectedShape$style4.lineDash,
+    valueChanged: handleShapeStyleChange,
+    values: selectedShapeTool.settings.lineDash.values
+  }), 'lineArrow' in selectedShapeTool.settings && /*#__PURE__*/_react["default"].createElement(_LineArrowField["default"], {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
     disabled: disabled,
-    defaultValue: (_selectedShape$style4 = selectedShape.style) === null || _selectedShape$style4 === void 0 ? void 0 : _selectedShape$style4.lineArrow,
-    valueChanged: handleShapeStyleChange
-  }), /*#__PURE__*/_react["default"].createElement(_ColorField["default"], {
+    defaultValue: (_selectedShape$style5 = selectedShape.style) === null || _selectedShape$style5 === void 0 ? void 0 : _selectedShape$style5.lineArrow,
+    valueChanged: handleShapeStyleChange,
+    values: selectedShapeTool.settings.lineArrow.values
+  }), 'pointsCount' in selectedShapeTool.settings && /*#__PURE__*/_react["default"].createElement(_PointsNumberField["default"], {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
-    title: "Couleur du trait",
     disabled: disabled,
-    field: "style.strokeColor",
-    value: (_selectedShape$style5 = selectedShape.style) === null || _selectedShape$style5 === void 0 ? void 0 : _selectedShape$style5.strokeColor,
-    valueChanged: handleShapeStyleChange
-  }), selectedShape.type !== _Shapes.ShapeEnum.text && selectedShape.type !== _Shapes.ShapeEnum.brush && selectedShape.type !== _Shapes.ShapeEnum.line && /*#__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$style6 = selectedShape.style) === null || _selectedShape$style6 === void 0 ? void 0 : _selectedShape$style6.fillColor,
-    valueChanged: handleShapeStyleChange
-  })), /*#__PURE__*/_react["default"].createElement(_RangeField["default"], {
+    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",
-    min: 0,
-    max: 100,
-    step: 1,
+    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$style7 = selectedShape.style) === null || _selectedShape$style7 === void 0 ? void 0 : _selectedShape$style7.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"], {
+  })), /*#__PURE__*/_react["default"].createElement(_DeleteButton["default"], {
     disabled: disabled,
     selectedShape: selectedShape,
     removeShape: removeShape
-  })) : _fp["default"].includes(activeTool, shapes) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (activeTool === _Shapes.ShapeEnum.polygon || activeTool === _Shapes.ShapeEnum.curve) && /*#__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,
-    defaultValue: 3,
-    valueChanged: handlePolygonLinesCount,
-    values: activeTool === _Shapes.ShapeEnum.curve ? _style.CURVE_POINTS_VALUES : _style.POLYGON_POINTS_VALUES
-  }), activeTool === _Shapes.ShapeEnum.text ? /*#__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,
-    defaultValue: (_defaultConf$style = defaultConf.style) === null || _defaultConf$style === void 0 ? void 0 : _defaultConf$style.fontFamily,
-    valueChanged: handleShapeStyleChange
-  }) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_RangeField["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",
-    value: (_defaultConf$style2 = defaultConf.style) === null || _defaultConf$style2 === void 0 ? void 0 : _defaultConf$style2.lineWidth,
+    field: "lineWidth",
+    value: activeTool.settings.lineWidth["default"],
     valueChanged: handleShapeStyleChange,
-    unity: "px"
-  }), /*#__PURE__*/_react["default"].createElement(_LineTypeField["default"], {
+    unity: "px",
+    min: activeTool.settings.lineWidth.min,
+    max: activeTool.settings.lineWidth.max,
+    step: activeTool.settings.lineWidth.step
+  }), 'lineDash' in activeTool.settings && /*#__PURE__*/_react["default"].createElement(_LineTypeField["default"], {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
     disabled: disabled,
-    defaultValue: (_defaultConf$style3 = defaultConf.style) === null || _defaultConf$style3 === void 0 ? void 0 : _defaultConf$style3.lineDash,
-    valueChanged: handleShapeStyleChange
-  })), activeTool === _Shapes.ShapeEnum.line && /*#__PURE__*/_react["default"].createElement(_LineArrowField["default"], {
+    defaultValue: activeTool.settings.lineDash["default"],
+    valueChanged: handleShapeStyleChange,
+    values: activeTool.settings.lineDash.values
+  }), 'lineArrow' in activeTool.settings && /*#__PURE__*/_react["default"].createElement(_LineArrowField["default"], {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
     disabled: disabled,
-    defaultValue: (_defaultConf$style4 = defaultConf.style) === null || _defaultConf$style4 === void 0 ? void 0 : _defaultConf$style4.lineArrow,
-    valueChanged: handleShapeStyleChange
-  }), /*#__PURE__*/_react["default"].createElement(_ColorField["default"], {
+    defaultValue: activeTool.settings.lineArrow["default"],
+    valueChanged: handleShapeStyleChange,
+    values: activeTool.settings.lineArrow.values
+  }), 'pointsCount' in activeTool.settings && /*#__PURE__*/_react["default"].createElement(_PointsNumberField["default"], {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
-    title: "Couleur du trait",
     disabled: disabled,
-    field: "style.strokeColor",
-    value: (_defaultConf$style5 = defaultConf.style) === null || _defaultConf$style5 === void 0 ? void 0 : _defaultConf$style5.strokeColor,
-    valueChanged: handleShapeStyleChange
-  }), activeTool !== _Shapes.ShapeEnum.text && activeTool !== _Shapes.ShapeEnum.brush && activeTool !== _Shapes.ShapeEnum.line && /*#__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: (_defaultConf$style6 = defaultConf.style) === null || _defaultConf$style6 === void 0 ? void 0 : _defaultConf$style6.fillColor,
-    valueChanged: handleShapeStyleChange
-  }), /*#__PURE__*/_react["default"].createElement(_RangeField["default"], {
+    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",
-    min: 0,
-    max: 100,
-    step: 1,
+    min: activeTool.settings.opacity.min,
+    max: activeTool.settings.opacity.max,
+    step: activeTool.settings.opacity.step,
     unity: "%",
     disabled: disabled,
-    field: "style.globalAlpha",
-    value: (_defaultConf$style7 = defaultConf.style) === null || _defaultConf$style7 === void 0 ? void 0 : _defaultConf$style7.globalAlpha,
+    field: "globalAlpha",
+    value: activeTool.settings.opacity["default"],
     valueChanged: handleShapeStyleChange
   })), /*#__PURE__*/_react["default"].createElement(StyledSeparator, null), layersManipulation && /*#__PURE__*/_react["default"].createElement(_LayoutButton["default"], {
     layersManipulation: layersManipulation,

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

@@ -48,20 +48,24 @@ var StyledEditBox = /*#__PURE__*/(0, _react2.styled)("div")({
     "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/LoadFileTool.js

@@ -18,12 +18,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 LoadFileTool = function LoadFileTool(_ref) {
+  var _type$lib;
+
   var _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$withText = _ref.withText,
       withText = _ref$withText === void 0 ? false : _ref$withText,
       loadFile = _ref.loadFile,
-      lib = _ref.lib,
+      type = _ref.type,
       img = _ref.img,
       accept = _ref.accept;
   var inputRef = (0, _react.useRef)(null);
@@ -47,9 +49,9 @@ var LoadFileTool = function LoadFileTool(_ref) {
     onClick: handleClick,
     onChange: handleChange,
     accept: accept,
-    title: lib,
+    title: (_type$lib = type.lib) !== null && _type$lib !== void 0 ? _type$lib : type.type,
     icon: img,
-    children: withText ? lib : undefined,
+    children: withText ? type.lib : undefined,
     disabled: disabled
   });
 };