@yorab/react-paint 0.2.2

package/dist/components/settings/PointsNumberField.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+declare type PointsNumberFieldType = {
+    selectedSettings: string | undefined;
+    setSelectedSettings: React.Dispatch<React.SetStateAction<string | undefined>>;
+    disabled?: boolean;
+    defaultValue?: number | string | undefined;
+    values?: number[];
+    valueChanged: (field: string, value: string | number) => void;
+};
+declare const PointsNumberField: ({ selectedSettings, setSelectedSettings, disabled, defaultValue, values, valueChanged }: PointsNumberFieldType) => JSX.Element;
+export default PointsNumberField;

package/dist/components/settings/PointsNumberField.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _SelectField = _interopRequireDefault(require("./SelectField"));
+
+var _style = require("../../constants/style");
+
+var _react2 = require("@linaria/react");
+
+var StyledOption = /*#__PURE__*/(0, _react2.styled)("span")({
+  name: "StyledOption",
+  "class": "skv6910"
+});
+
+var PointsNumberOption = function PointsNumberOption(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react["default"].createElement(StyledOption, null, children);
+};
+
+var PointsNumberField = function PointsNumberField(_ref2) {
+  var selectedSettings = _ref2.selectedSettings,
+      setSelectedSettings = _ref2.setSelectedSettings,
+      _ref2$disabled = _ref2.disabled,
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      defaultValue = _ref2.defaultValue,
+      _ref2$values = _ref2.values,
+      values = _ref2$values === void 0 ? _style.POLYGON_POINTS_VALUES : _ref2$values,
+      valueChanged = _ref2.valueChanged;
+  return /*#__PURE__*/_react["default"].createElement(_SelectField["default"], {
+    selectedSettings: selectedSettings,
+    setSelectedSettings: setSelectedSettings,
+    CustomOption: PointsNumberOption,
+    title: "Nombre de points",
+    disabled: disabled,
+    field: "style.pointsCount",
+    values: values,
+    defaultValue: defaultValue,
+    valueChanged: valueChanged
+  });
+};
+
+var _default = PointsNumberField;
+exports["default"] = _default;

package/dist/components/settings/RangeField.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+declare type ShapeStyleColorType = {
+    selectedSettings: string | undefined;
+    setSelectedSettings: React.Dispatch<React.SetStateAction<string | undefined>>;
+    title?: string;
+    disabled?: boolean;
+    field: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    unity?: string;
+    value?: number | undefined;
+    valueChanged: (field: string, value: string | number) => void;
+};
+declare const RangeField: ({ selectedSettings, setSelectedSettings, title, disabled, field, value, min, max, step, unity, valueChanged }: ShapeStyleColorType) => JSX.Element;
+export default RangeField;

package/dist/components/settings/RangeField.js

@@ -0,0 +1,90 @@
+"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 _react2 = require("@linaria/react");
+
+var _Button = _interopRequireDefault(require("../common/Button"));
+
+var _Panel = _interopRequireDefault(require("../common/Panel"));
+
+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 StyledLabel = /*#__PURE__*/(0, _react2.styled)("label")({
+  name: "StyledLabel",
+  "class": "s9mugpt"
+});
+
+var RangeField = function RangeField(_ref) {
+  var selectedSettings = _ref.selectedSettings,
+      setSelectedSettings = _ref.setSelectedSettings,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? "Choisissez l'intervalle" : _ref$title,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      field = _ref.field,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? 1 : _ref$value,
+      _ref$min = _ref.min,
+      min = _ref$min === void 0 ? 1 : _ref$min,
+      _ref$max = _ref.max,
+      max = _ref$max === void 0 ? 20 : _ref$max,
+      _ref$step = _ref.step,
+      step = _ref$step === void 0 ? 1 : _ref$step,
+      _ref$unity = _ref.unity,
+      unity = _ref$unity === void 0 ? '' : _ref$unity,
+      valueChanged = _ref.valueChanged;
+  var roundValue = Math.round(value);
+
+  var _useState = (0, _react.useState)(_fp["default"].uniqueId('settings_')),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
+      customKey = _useState2[0];
+
+  var handleChange = function handleChange(event) {
+    var parsedValue = _fp["default"].toNumber(event.target.value);
+
+    valueChanged(field, _fp["default"].isNaN(parsedValue) ? event.target.value : parsedValue);
+  };
+
+  var togglePanel = function togglePanel() {
+    setSelectedSettings(function (prev) {
+      return prev === customKey ? undefined : customKey;
+    });
+  };
+
+  var isPanelVisible = selectedSettings === customKey;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    selected: isPanelVisible,
+    title: title,
+    disabled: disabled,
+    onClick: togglePanel
+  }, /*#__PURE__*/_react["default"].createElement("span", null, roundValue, unity)), isPanelVisible && /*#__PURE__*/_react["default"].createElement(_Panel["default"], {
+    title: title,
+    alignment: "left"
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(StyledLabel, null, /*#__PURE__*/_react["default"].createElement("input", {
+    type: "range",
+    min: min,
+    max: max,
+    step: step,
+    value: value,
+    onChange: handleChange
+  }), /*#__PURE__*/_react["default"].createElement("span", null, roundValue, unity)))));
+};
+
+var _default = RangeField;
+exports["default"] = _default;

package/dist/components/settings/SelectField.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+declare type ShapeStyleSelectType = {
+    CustomOption: React.FC<{
+        children?: React.ReactNode;
+    }>;
+    selectedSettings: string | undefined;
+    setSelectedSettings: React.Dispatch<React.SetStateAction<string | undefined>>;
+    title?: string;
+    disabled?: boolean;
+    field: string;
+    values: (string | number)[];
+    defaultValue?: number | string | undefined;
+    valueChanged: (field: string, value: string | number) => void;
+};
+declare const SelectField: ({ CustomOption, selectedSettings, setSelectedSettings, title, disabled, field, values, defaultValue, valueChanged }: ShapeStyleSelectType) => JSX.Element;
+export default SelectField;

package/dist/components/settings/SelectField.js

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

package/dist/components/settings/SettingsBar.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { DrawableShape, StyledShape, ToolsType } from 'types/Shapes';
+declare type SettingsBoxType = {
+    disabled?: boolean;
+    withLayouts?: 'always' | 'never' | 'visible' | 'hidden';
+    activeTool: ToolsType;
+    selectedShape: DrawableShape | undefined;
+    canvas: HTMLCanvasElement | null;
+    updateShape: (shape: DrawableShape, withSave?: boolean) => void;
+    removeShape: (shape: DrawableShape) => void;
+    defaultConf: StyledShape;
+    setDefaultConf: React.Dispatch<React.SetStateAction<StyledShape>>;
+    toggleLayoutPanel: () => void;
+};
+declare const SettingsBar: ({ disabled, withLayouts, toggleLayoutPanel, activeTool, selectedShape, canvas, updateShape, removeShape, defaultConf, setDefaultConf }: SettingsBoxType) => JSX.Element;
+export default SettingsBar;

package/dist/components/settings/SettingsBar.js

@@ -0,0 +1,262 @@
+"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
+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"));
+
+var _DeleteButton = _interopRequireDefault(require("./DeleteButton"));
+
+var _LayoutButton = _interopRequireDefault(require("./LayoutButton"));
+
+var _RangeField = _interopRequireDefault(require("./RangeField"));
+
+var _FontFamilyField = _interopRequireDefault(require("./FontFamilyField"));
+
+var _PointsNumberField = _interopRequireDefault(require("./PointsNumberField"));
+
+var _LineTypeField = _interopRequireDefault(require("./LineTypeField"));
+
+var _LineArrowField = _interopRequireDefault(require("./LineArrowField"));
+
+var _style = require("../../constants/style");
+
+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; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _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 StyledSettingsBar = /*#__PURE__*/(0, _react2.styled)("div")({
+  name: "StyledSettingsBar",
+  "class": "s16z54di"
+});
+var StyledSeparator = /*#__PURE__*/(0, _react2.styled)("div")({
+  name: "StyledSeparator",
+  "class": "sa7lzh9"
+});
+
+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 _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      withLayouts = _ref.withLayouts,
+      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];
+
+  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(function (prevDefaultConf) {
+        return _fp["default"].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(function (prevDefaultConf) {
+        return _fp["default"].set(field, value, prevDefaultConf);
+      });
+    }
+  };
+
+  var handlePolygonLinesCount = function handlePolygonLinesCount(field, value) {
+    if (selectedShape) {
+      updateShape((0, _transform.updatePolygonLinesCount)(selectedShape, value), true);
+    } else {
+      setDefaultConf(function (prevDefaultConf) {
+        return _fp["default"].set(field, value, prevDefaultConf);
+      });
+    }
+  };
+
+  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"], {
+    selectedSettings: selectedSettings,
+    setSelectedSettings: setSelectedSettings,
+    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"], {
+    selectedSettings: selectedSettings,
+    setSelectedSettings: setSelectedSettings,
+    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"], {
+    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,
+    valueChanged: handleShapeStyleChange,
+    unity: "px"
+  }), /*#__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"], {
+    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"], {
+    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"], {
+    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"], {
+    selectedSettings: selectedSettings,
+    setSelectedSettings: setSelectedSettings,
+    title: "Opacit\xE9",
+    min: 0,
+    max: 100,
+    step: 1,
+    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,
+    valueChanged: handleShapeStyleChange
+  }), /*#__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"], {
+    selectedSettings: selectedSettings,
+    setSelectedSettings: setSelectedSettings,
+    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"], {
+    selectedSettings: selectedSettings,
+    setSelectedSettings: setSelectedSettings,
+    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"], {
+    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,
+    valueChanged: handleShapeStyleChange,
+    unity: "px"
+  }), /*#__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"], {
+    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"], {
+    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"], {
+    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"], {
+    selectedSettings: selectedSettings,
+    setSelectedSettings: setSelectedSettings,
+    title: "Opacit\xE9",
+    min: 0,
+    max: 100,
+    step: 1,
+    unity: "%",
+    disabled: disabled,
+    field: "style.globalAlpha",
+    value: (_defaultConf$style7 = defaultConf.style) === null || _defaultConf$style7 === void 0 ? void 0 : _defaultConf$style7.globalAlpha,
+    valueChanged: handleShapeStyleChange
+  })), /*#__PURE__*/_react["default"].createElement(StyledSeparator, null), /*#__PURE__*/_react["default"].createElement(_LayoutButton["default"], {
+    withLayouts: withLayouts,
+    disabled: disabled,
+    toggleLayoutPanel: toggleLayoutPanel
+  }));
+};
+
+var _default = SettingsBar;
+exports["default"] = _default;

package/dist/components/toolbox/EditTextBox.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { DrawableText } from 'types/Shapes';
+declare type EditTextBoxType = {
+    disabled?: boolean;
+    shape: DrawableText;
+    defaultValue: string[];
+    updateValue: (newValue: string[]) => void;
+};
+declare const EditTextBox: ({ disabled, shape, defaultValue, updateValue }: EditTextBoxType) => JSX.Element;
+export default EditTextBox;

package/dist/components/toolbox/EditTextBox.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _style = require("../../constants/style");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@linaria/react");
+
+var _intersect = require("../../utils/intersect");
+
+var _shapeData = require("../../utils/shapeData");
+
+var _string = require("../../utils/string");
+
+var _transform = require("../../utils/transform");
+
+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 StyledEditBox = /*#__PURE__*/(0, _react2.styled)("div")({
+  name: "StyledEditBox",
+  "class": "s1unz6yq",
+  vars: {
+    "s1unz6yq-0": [function (_ref) {
+      var transform = _ref.transform;
+      return transform;
+    }],
+    "s1unz6yq-1": [function (_ref2) {
+      var color = _ref2.color;
+      return color;
+    }],
+    "s1unz6yq-2": [function (_ref3) {
+      var fontsize = _ref3.fontsize;
+      return fontsize;
+    }, "px"],
+    "s1unz6yq-4": [function (_ref4) {
+      var fontfamily = _ref4.fontfamily;
+      return fontfamily;
+    }]
+  }
+});
+
+var EditTextBox = function EditTextBox(_ref5) {
+  var _shape$style$strokeCo, _shape$style, _shape$style$fontFami, _shape$style2;
+
+  var _ref5$disabled = _ref5.disabled,
+      disabled = _ref5$disabled === void 0 ? false : _ref5$disabled,
+      shape = _ref5.shape,
+      defaultValue = _ref5.defaultValue,
+      updateValue = _ref5.updateValue;
+  var ref = (0, _react.useRef)(null);
+
+  var updateContentEditable = function updateContentEditable(e) {
+    updateValue((0, _string.convertDivContentToStringArray)(e.target.innerHTML));
+  };
+
+  (0, _react.useEffect)(function () {
+    if (!ref.current) return;
+    ref.current.innerHTML = (0, _string.convertStringArrayToDivContent)(defaultValue);
+    ref.current.focus();
+  }, [defaultValue]);
+  var position = (0, _react.useMemo)(function () {
+    var _getShapeInfos = (0, _shapeData.getShapeInfos)(shape),
+        borders = _getShapeInfos.borders,
+        center = _getShapeInfos.center;
+
+    return (0, _intersect.getPointPositionBeforeCanvasTransformation)([borders.x, borders.y], [-shape.translation[0], -shape.translation[1]], shape.rotation, center);
+  }, [shape]);
+  return /*#__PURE__*/_react["default"].createElement(StyledEditBox, {
+    ref: ref,
+    transform: "translate3D(".concat(position[0], "px, ").concat(position[1], "px, 0) rotate(").concat((0, _transform.radiansToDegrees)(shape.rotation), "deg)"),
+    fontsize: shape.fontSize,
+    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,
+    contentEditable: !disabled,
+    onInput: updateContentEditable
+  });
+};
+
+var _default = EditTextBox;
+exports["default"] = _default;