@yorab/react-paint 0.6.1 → 0.6.2

package/Changelog.md

@@ -1,3 +1,10 @@
+# V0.6.2
+
+- Lock : can't select shape by click on it (only via layers panel)
+- Clear : reset state to shapes prop by default if not undefined
+- update icons
+- Add responsive to settings UI
+
 # V0.6.1
 
 - Fix shapes prop not refreshing component (introduced by 0.6.0)

package/dist/components/App.js

@@ -318,13 +318,51 @@ var App = function App(_ref5) {
     selectTool(_tools.SELECTION_TOOL);
     forwardShape();
   }, [selectTool, forwardShape]);
-  var clearCanvas = (0, _react.useCallback)(function () {
+  var resetCanvas = (0, _react.useCallback)(function () {
     var shapesToInit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     var clearHistory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     clearShapes(shapesToInit, clearHistory);
     selectTool(_tools.SELECTION_TOOL);
     setCanvasOffset([0, 0]);
   }, [selectTool, clearShapes]);
+  var loadImportedData = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref6 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(json) {
+      var clearHistory,
+          shapes,
+          _args = arguments;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              clearHistory = _args.length > 1 && _args[1] !== undefined ? _args[1] : true;
+              _context.next = 3;
+              return (0, _file.decodeImportedData)(json);
+
+            case 3:
+              shapes = _context.sent;
+              resetCanvas(shapes, clearHistory);
+
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x) {
+      return _ref6.apply(this, arguments);
+    };
+  }(), [resetCanvas]);
+  var clearCanvas = (0, _react.useCallback)(function () {
+    if (shapesFromProps !== undefined) {
+      void loadImportedData({
+        shapes: shapesFromProps
+      }, false);
+    } else {
+      resetCanvas();
+    }
+  }, [resetCanvas, loadImportedData, shapesFromProps]);
   var selectShape = (0, _react.useCallback)(function (shape) {
     setActiveTool(_tools.SELECTION_TOOL);
     setSelectedShape(shape);
@@ -383,32 +421,6 @@ var App = function App(_ref5) {
       setIsLoading(false);
     }
   }, [shapesRef, addSnackbar, canvasWidth, canvasHeight]);
-  var loadImportedData = (0, _react.useCallback)( /*#__PURE__*/function () {
-    var _ref6 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(json) {
-      var shapes;
-      return _regenerator["default"].wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _context.next = 2;
-              return (0, _file.decodeImportedData)(json);
-
-            case 2:
-              shapes = _context.sent;
-              clearCanvas(shapes, true);
-
-            case 4:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-
-    return function (_x) {
-      return _ref6.apply(this, arguments);
-    };
-  }(), [clearCanvas]);
   var loadFile = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref7 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(file) {
       var json;
@@ -637,6 +649,7 @@ var App = function App(_ref5) {
     toggleShapeLock: toggleShapeLock,
     isLayoutPanelShown: isLayoutPanelShown
   })), isEditMode && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_SettingsBar["default"], {
+    width: canvasSize.width,
     disabled: disabled,
     activeTool: activeTool,
     availableTools: availableTools,

package/dist/components/common/Modal.js

@@ -29,8 +29,12 @@ var StyledMask = /*#__PURE__*/(0, _react2.styled)("div")({
 var Modal = function Modal(_ref) {
   var children = _ref.children,
       onClose = _ref.onClose,
+      _ref$position = _ref.position,
+      position = _ref$position === void 0 ? 'center' : _ref$position,
       className = _ref.className;
-  return /*#__PURE__*/_react["default"].createElement(StyledModal, null, /*#__PURE__*/_react["default"].createElement(StyledMask, {
+  return /*#__PURE__*/_react["default"].createElement(StyledModal, {
+    "data-position": position
+  }, /*#__PURE__*/_react["default"].createElement(StyledMask, {
     onClick: onClose
   }), /*#__PURE__*/_react["default"].createElement(StyledPanel, {
     className: className

package/dist/components/common/Panel.js

@@ -33,12 +33,15 @@ var Panel = function Panel(_ref) {
       _ref$title = _ref.title,
       title = _ref$title === void 0 ? '' : _ref$title,
       className = _ref.className,
+      _ref$fitContainer = _ref.fitContainer,
+      fitContainer = _ref$fitContainer === void 0 ? false : _ref$fitContainer,
       _ref$alignment = _ref.alignment,
       alignment = _ref$alignment === void 0 ? 'center' : _ref$alignment;
   var componentRef = (0, _react.useRef)(null);
   return /*#__PURE__*/_react["default"].createElement(StyledPanel, {
     ref: componentRef,
     className: className,
+    "data-fitcontainer": fitContainer,
     "data-vertical": +vertical,
     "data-alignment": alignment
   }, title && /*#__PURE__*/_react["default"].createElement(StyledTitle, null, title), children);

package/dist/components/settings/ColorField.js

@@ -37,11 +37,15 @@ var StyledColor = /*#__PURE__*/(0, _react2.styled)("div")({
     }]
   }
 });
+var StyleWrapper = /*#__PURE__*/(0, _react2.styled)("div")({
+  name: "StyleWrapper",
+  "class": "sfm1cqx"
+});
 var StyledCustomColor = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledCustomColor",
-  "class": "sfm1cqx",
+  "class": "sttf061",
   vars: {
-    "sfm1cqx-0": [function (_ref2) {
+    "sttf061-0": [function (_ref2) {
       var color = _ref2.color;
       return color;
     }]
@@ -53,6 +57,8 @@ var ColorField = function ColorField(_ref3) {
       setSelectedSettings = _ref3.setSelectedSettings,
       _ref3$title = _ref3.title,
       title = _ref3$title === void 0 ? 'Choisissez une couleur' : _ref3$title,
+      _ref3$mode = _ref3.mode,
+      mode = _ref3$mode === void 0 ? 'fill' : _ref3$mode,
       _ref3$disabled = _ref3.disabled,
       disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
       values = _ref3.values,
@@ -93,7 +99,7 @@ var ColorField = function ColorField(_ref3) {
   })), isPanelVisible && /*#__PURE__*/_react["default"].createElement(_Panel["default"], {
     title: title,
     alignment: "left"
-  }, /*#__PURE__*/_react["default"].createElement("div", null, values.map(function (color, index) {
+  }, /*#__PURE__*/_react["default"].createElement(StyleWrapper, null, values.map(function (color, index) {
     return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
       title: color,
       key: index,

package/dist/components/settings/FontFamilyField.js

@@ -15,6 +15,8 @@ var _react2 = require("@linaria/react");
 
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
+var _icons = require("../../constants/icons");
+
 var StyledOption = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledOption",
   "class": "smpmxx5",
@@ -47,6 +49,7 @@ var FontFamilyField = function FontFamilyField(_ref3) {
     setSelectedSettings: setSelectedSettings,
     CustomOption: FontFamilyOption,
     title: "Font",
+    icon: _icons.fontIcon,
     disabled: disabled,
     field: "fontFamily",
     values: values,

package/dist/components/settings/LineArrowField.js

@@ -15,6 +15,8 @@ var _react2 = require("@linaria/react");
 
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
+var _icons = require("../../constants/icons");
+
 var StyledLeftTriangle = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledLeftTriangle",
   "class": "s1xxj4yl"
@@ -49,6 +51,7 @@ var LineArrowField = function LineArrowField(_ref2) {
     setSelectedSettings: setSelectedSettings,
     CustomOption: LineArrowOption,
     title: "Fl\xE8ches",
+    icon: _icons.lineEndIcon,
     disabled: disabled,
     field: "lineArrow",
     values: values,

package/dist/components/settings/LineTypeField.js

@@ -15,6 +15,8 @@ var _react2 = require("@linaria/react");
 
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
+var _icons = require("../../constants/icons");
+
 var StyledLine = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledLine",
   "class": "s1qssg4n"
@@ -28,7 +30,7 @@ var LineTypeOption = function LineTypeOption(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/_react["default"].createElement(StyledOption, {
     "data-type": children
-  }, /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null));
+  }, /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null));
 };
 
 exports.LineTypeOption = LineTypeOption;
@@ -46,6 +48,7 @@ var LineTypeField = function LineTypeField(_ref2) {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
     CustomOption: LineTypeOption,
+    icon: _icons.lineTypeIcon,
     title: "Type de traits",
     disabled: disabled,
     field: "lineDash",

package/dist/components/settings/PointsNumberField.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _icons = require("../../constants/icons");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _RangeField = _interopRequireDefault(require("./RangeField"));
@@ -25,6 +27,7 @@ var PointsNumberField = function PointsNumberField(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_RangeField["default"], {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
+    icon: _icons.polygonIcon,
     title: "Nombre de points",
     disabled: disabled,
     field: "pointsCount",

package/dist/components/settings/RangeField.js

@@ -35,6 +35,7 @@ var RangeField = function RangeField(_ref) {
       setSelectedSettings = _ref.setSelectedSettings,
       _ref$title = _ref.title,
       title = _ref$title === void 0 ? "Choisissez l'intervalle" : _ref$title,
+      icon = _ref.icon,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       field = _ref.field,
@@ -73,10 +74,12 @@ var RangeField = function RangeField(_ref) {
     selected: isPanelVisible,
     title: title,
     disabled: disabled,
+    icon: icon,
     onClick: togglePanel
-  }, /*#__PURE__*/_react["default"].createElement("span", null, roundValue, unity)), isPanelVisible && /*#__PURE__*/_react["default"].createElement(_Panel["default"], {
+  }), isPanelVisible && /*#__PURE__*/_react["default"].createElement(_Panel["default"], {
     title: title,
-    alignment: "left"
+    alignment: "left",
+    fitContainer: true
   }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(StyledLabel, null, /*#__PURE__*/_react["default"].createElement("input", {
     type: "range",
     min: min,

package/dist/components/settings/SelectField.js

@@ -29,6 +29,10 @@ var StyledButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
   name: "StyledButton",
   "class": "s1ktxhkr"
 });
+var StyleWrapper = /*#__PURE__*/(0, _react2.styled)("div")({
+  name: "StyleWrapper",
+  "class": "s5sp14o"
+});
 
 var SelectField = function SelectField(_ref) {
   var CustomOption = _ref.CustomOption,
@@ -39,6 +43,7 @@ var SelectField = function SelectField(_ref) {
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       field = _ref.field,
+      icon = _ref.icon,
       values = _ref.values,
       defaultValue = _ref.defaultValue,
       valueChanged = _ref.valueChanged;
@@ -62,12 +67,14 @@ var SelectField = function SelectField(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     selected: isPanelVisible,
     title: title,
+    icon: icon,
     disabled: disabled,
     onClick: togglePanel
-  }, /*#__PURE__*/_react["default"].createElement(CustomOption, null, defaultValue)), isPanelVisible && /*#__PURE__*/_react["default"].createElement(_Panel["default"], {
+  }), isPanelVisible && /*#__PURE__*/_react["default"].createElement(_Panel["default"], {
     title: title,
-    alignment: "left"
-  }, /*#__PURE__*/_react["default"].createElement("div", null, values.map(function (value) {
+    alignment: "left",
+    fitContainer: true
+  }, /*#__PURE__*/_react["default"].createElement(StyleWrapper, null, values.map(function (value) {
     return /*#__PURE__*/_react["default"].createElement(StyledButton, {
       key: value,
       title: "".concat(value),

package/dist/components/settings/SettingsBar.js

@@ -41,6 +41,10 @@ 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; }
@@ -49,6 +53,7 @@ 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": "s16z54di"
@@ -57,77 +62,28 @@ var StyledSeparator = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledSeparator",
   "class": "sa7lzh9"
 });
+var StyledToolsModal = /*#__PURE__*/(0, _react2.styled)(_Modal["default"])({
+  name: "StyledToolsModal",
+  "class": "s7b85in"
+});
 
-var SettingsBar = function SettingsBar(_ref) {
+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,
-      updateToolSettings = _ref.updateToolSettings,
-      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;
-
-  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(['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);
-    }
-  };
-
-  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"], {
+      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,
     field: "strokeColor",
     value: (_selectedShape$style = selectedShape.style) === null || _selectedShape$style === void 0 ? void 0 : _selectedShape$style.strokeColor,
@@ -146,6 +102,7 @@ var SettingsBar = function SettingsBar(_ref) {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
     title: "Epaisseur du trait",
+    icon: _icons.lineWidthIcon,
     disabled: disabled,
     field: "lineWidth",
     value: (_selectedShape$style3 = selectedShape.style) === null || _selectedShape$style3 === void 0 ? void 0 : _selectedShape$style3.lineWidth,
@@ -204,6 +161,7 @@ var SettingsBar = function SettingsBar(_ref) {
     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,
@@ -212,14 +170,11 @@ var SettingsBar = function SettingsBar(_ref) {
     field: "globalAlpha",
     value: (_selectedShape$style$ = (_selectedShape$style10 = selectedShape.style) === null || _selectedShape$style10 === void 0 ? void 0 : _selectedShape$style10.globalAlpha) !== null && _selectedShape$style$ !== void 0 ? _selectedShape$style$ : 100,
     valueChanged: handleShapeStyleChange
-  })), /*#__PURE__*/_react["default"].createElement(_DeleteButton["default"], {
-    disabled: disabled,
-    selectedShape: selectedShape,
-    removeShape: removeShape
-  })) : 'settings' in activeTool && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, 'strokeColor' in activeTool.settings && /*#__PURE__*/_react["default"].createElement(_ColorField["default"], {
+  }))) : 'settings' in activeTool ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, 'strokeColor' in activeTool.settings && /*#__PURE__*/_react["default"].createElement(_ColorField["default"], {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
     title: "Couleur du trait",
+    mode: "stroke",
     disabled: disabled,
     field: "strokeColor",
     value: activeTool.settings.strokeColor["default"],
@@ -240,6 +195,7 @@ var SettingsBar = function SettingsBar(_ref) {
     title: "Epaisseur du trait",
     disabled: disabled,
     field: "lineWidth",
+    icon: _icons.lineWidthIcon,
     value: activeTool.settings.lineWidth["default"],
     valueChanged: handleShapeStyleChange,
     unity: "px",
@@ -296,6 +252,7 @@ var SettingsBar = function SettingsBar(_ref) {
     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,
@@ -304,11 +261,143 @@ var SettingsBar = function SettingsBar(_ref) {
     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/toolbox/MenuGroup.js

@@ -164,9 +164,7 @@ var MenuGroup = function MenuGroup(_ref) {
     disabled: disabled || !hasActionToClear,
     img: _tools.CLEAR_TOOL.icon,
     isActive: activeTool.id === _tools.CLEAR_TOOL.id,
-    setActive: function setActive() {
-      return clearCanvas();
-    }
+    setActive: clearCanvas
   }), (withUploadPicture || withUrlPicture || withLoadAndSave) && /*#__PURE__*/_react["default"].createElement("hr", null)), withUploadPicture && /*#__PURE__*/_react["default"].createElement(_LoadFileTool["default"], {
     withText: true,
     type: _tools.UPLOAD_PICTURE_TOOL,

package/dist/components/toolbox/Toolbar.js

@@ -190,9 +190,7 @@ var Toolbar = function Toolbar(_ref) {
     disabled: disabled || !hasActionToClear,
     img: _tools.CLEAR_TOOL.icon,
     isActive: activeTool.id === _tools.CLEAR_TOOL.id,
-    setActive: function setActive() {
-      return clearCanvas();
-    }
+    setActive: clearCanvas
   })), /*#__PURE__*/_react["default"].createElement(_MenuGroup["default"], {
     withActionsInMenu: actionsInMenu,
     disabled: disabled,

package/dist/constants/icons.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.visibilityOffIcon = exports.visibilityIcon = exports.unlockedIcon = exports.undoIcon = exports.trashIcon = exports.textIcon = exports.squareIcon = exports.shapesIcon = exports.selectIcon = exports.saveIcon = exports.redoIcon = exports.recIcon = exports.publicIcon = exports.polygonIcon = exports.pictureIcon = exports.penIcon = exports.paletteIcon = exports.paintIcon = exports.openFileIcon = exports.opacityIcon = exports.menuIcon = exports.lockedIcon = exports.layersIcon = exports.italicIcon = exports.gridOnIcon = exports.gridOffIcon = exports.gestureIcon = exports.exportFileIcon = exports.encodedTransparentIcon = exports.ellipseIcon = exports.dragIcon = exports.dotsIcon = exports.curveIcon = exports.clearIcon = exports.circleIcon = exports.brushIcon = exports.boldIcon = exports.arrowIcon = void 0;
+exports.visibilityOffIcon = exports.visibilityIcon = exports.unlockedIcon = exports.undoIcon = exports.trashIcon = exports.textIcon = exports.squareIcon = exports.shapesIcon = exports.settingsIcon = exports.saveIcon = exports.redoIcon = exports.recIcon = exports.publicIcon = exports.polygonIcon = exports.pictureIcon = exports.penIcon = exports.paletteIcon = exports.paintIcon = exports.openFileIcon = exports.opacityIcon = exports.menuIcon = exports.lockedIcon = exports.lineWidthIcon = exports.lineTypeIcon = exports.lineEndIcon = exports.layersIcon = exports.italicIcon = exports.gridOnIcon = exports.gridOffIcon = exports.fontIcon = exports.exportFileIcon = exports.encodedTransparentIcon = exports.ellipseIcon = exports.dotsIcon = exports.curveIcon = exports.cursorIcon = exports.clearIcon = exports.circleIcon = exports.brushIcon = exports.boldIcon = exports.arrowIcon = void 0;
 var brushIcon = '<svg><path d="M5.146 17.5Q4.146 17.5 3.208 17Q2.271 16.5 1.667 15.708Q2.208 15.75 2.802 15.344Q3.396 14.938 3.396 14.104Q3.396 13.042 4.135 12.292Q4.875 11.542 5.958 11.542Q7.021 11.542 7.76 12.292Q8.5 13.042 8.5 14.104Q8.5 15.5 7.51 16.5Q6.521 17.5 5.146 17.5ZM9.917 12.5 7.562 10.146 14.917 2.729Q15.146 2.5 15.469 2.5Q15.792 2.5 16.021 2.729L17.271 3.958Q17.5 4.188 17.5 4.531Q17.5 4.875 17.271 5.125Z"/></svg>';
 exports.brushIcon = brushIcon;
 var squareIcon = '<svg><path d="M2.5 17.5V2.5H17.5V17.5ZM4.25 15.75H15.75V4.25H4.25ZM4.25 15.75V4.25V15.75Z"/></svg>';
@@ -46,18 +46,16 @@ var textIcon = '<svg><path d="M8.708 16.667V5.917H4.167V3.333H15.833V5.917H11.29
 exports.textIcon = textIcon;
 var arrowIcon = '<svg><path d="M7.5 15.833V14.083H12.833L3.333 4.583L4.583 3.333L14.083 12.833V7.5H15.833V15.833Z"/></svg>';
 exports.arrowIcon = arrowIcon;
+var cursorIcon = '<svg><path d="M8.0145 11.1707C8.38484 10.9914 8.82183 11.1558 8.99959 11.5295L10.7031 15.2591L12.0363 14.6238L10.3254 10.9017C10.1476 10.528 10.3106 10.0795 10.6809 9.90761L10.8883 9.84782L12.5918 9.51148L6.48133 4.33192V12.389L7.82934 11.2903L8.0145 11.1707ZM10.6587 16.9258C10.2883 17.1052 9.84395 16.9482 9.67359 16.5745L8.05894 13.0318L6.19988 14.5416C6.07396 14.6462 5.91842 14.706 5.74066 14.706C5.54423 14.706 5.35584 14.6272 5.21694 14.4871C5.07803 14.3469 5 14.1568 5 13.9586V2.74741C5 2.54919 5.07803 2.35908 5.21694 2.21891C5.35584 2.07874 5.54423 2 5.74066 2C5.91842 2 6.08878 2.06727 6.21469 2.1719L6.2221 2.16443L14.7323 9.36947C15.0508 9.63854 15.0879 10.1094 14.8286 10.4233C14.7175 10.5579 14.562 10.6475 14.4064 10.6774L12.0659 11.1408L13.6954 14.6761C13.888 15.0498 13.7102 15.4908 13.3399 15.6627L10.6587 16.9258Z"/></svg>';
+exports.cursorIcon = cursorIcon;
 var menuIcon = '<svg><path d="M2.5 15V13.25H17.5V15ZM2.5 10.875V9.125H17.5V10.875ZM2.5 6.75V5H17.5V6.75Z"/></svg>';
 exports.menuIcon = menuIcon;
-var dragIcon = '<svg><path d="M7.542 16.667Q6.833 16.667 6.333 16.167Q5.833 15.667 5.833 14.958Q5.833 14.25 6.333 13.75Q6.833 13.25 7.542 13.25Q8.25 13.25 8.75 13.75Q9.25 14.25 9.25 14.958Q9.25 15.667 8.75 16.167Q8.25 16.667 7.542 16.667ZM7.542 11.708Q6.833 11.708 6.333 11.208Q5.833 10.708 5.833 10Q5.833 9.292 6.333 8.792Q6.833 8.292 7.542 8.292Q8.25 8.292 8.75 8.792Q9.25 9.292 9.25 10Q9.25 10.708 8.75 11.208Q8.25 11.708 7.542 11.708ZM7.542 6.75Q6.833 6.75 6.333 6.25Q5.833 5.75 5.833 5.042Q5.833 4.333 6.333 3.833Q6.833 3.333 7.542 3.333Q8.25 3.333 8.75 3.833Q9.25 4.333 9.25 5.042Q9.25 5.75 8.75 6.25Q8.25 6.75 7.542 6.75ZM12.458 6.75Q11.75 6.75 11.25 6.25Q10.75 5.75 10.75 5.042Q10.75 4.333 11.25 3.833Q11.75 3.333 12.458 3.333Q13.167 3.333 13.667 3.833Q14.167 4.333 14.167 5.042Q14.167 5.75 13.667 6.25Q13.167 6.75 12.458 6.75ZM12.458 11.708Q11.75 11.708 11.25 11.208Q10.75 10.708 10.75 10Q10.75 9.292 11.25 8.792Q11.75 8.292 12.458 8.292Q13.167 8.292 13.667 8.792Q14.167 9.292 14.167 10Q14.167 10.708 13.667 11.208Q13.167 11.708 12.458 11.708ZM12.458 16.667Q11.75 16.667 11.25 16.167Q10.75 15.667 10.75 14.958Q10.75 14.25 11.25 13.75Q11.75 13.25 12.458 13.25Q13.167 13.25 13.667 13.75Q14.167 14.25 14.167 14.958Q14.167 15.667 13.667 16.167Q13.167 16.667 12.458 16.667Z"/></svg>';
-exports.dragIcon = dragIcon;
 var visibilityIcon = '<svg><path d="M10 13.354Q11.583 13.354 12.688 12.25Q13.792 11.146 13.792 9.562Q13.792 7.979 12.688 6.875Q11.583 5.771 10 5.771Q8.417 5.771 7.312 6.875Q6.208 7.979 6.208 9.562Q6.208 11.146 7.312 12.25Q8.417 13.354 10 13.354ZM10 11.812Q9.062 11.812 8.406 11.156Q7.75 10.5 7.75 9.562Q7.75 8.625 8.406 7.969Q9.062 7.312 10 7.312Q10.938 7.312 11.594 7.969Q12.25 8.625 12.25 9.562Q12.25 10.5 11.594 11.156Q10.938 11.812 10 11.812ZM10 15.833Q6.938 15.833 4.448 14.125Q1.958 12.417 0.833 9.562Q1.958 6.708 4.458 5.021Q6.958 3.333 10 3.333Q13.042 3.333 15.542 5.021Q18.042 6.708 19.167 9.562Q18.042 12.417 15.552 14.125Q13.062 15.833 10 15.833ZM10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562ZM10 14.083Q12.333 14.083 14.281 12.865Q16.229 11.646 17.25 9.562Q16.229 7.479 14.281 6.281Q12.333 5.083 10 5.083Q7.667 5.083 5.708 6.281Q3.75 7.479 2.729 9.562Q3.75 11.646 5.708 12.865Q7.667 14.083 10 14.083Z"/></svg>';
 exports.visibilityIcon = visibilityIcon;
 var visibilityOffIcon = '<svg><path d="M13.521 11.021 12.25 9.75Q12.333 8.75 11.604 7.979Q10.875 7.208 9.812 7.312L8.542 6.042Q8.896 5.896 9.26 5.833Q9.625 5.771 10 5.771Q11.583 5.771 12.688 6.875Q13.792 7.979 13.792 9.562Q13.792 9.979 13.719 10.354Q13.646 10.729 13.521 11.021ZM16.167 13.646 14.917 12.417Q15.667 11.833 16.25 11.146Q16.833 10.458 17.25 9.562Q16.229 7.479 14.292 6.281Q12.354 5.083 10 5.083Q9.396 5.083 8.885 5.156Q8.375 5.229 7.875 5.375L6.5 4Q7.354 3.646 8.208 3.49Q9.062 3.333 10 3.333Q13.146 3.333 15.615 5.052Q18.083 6.771 19.167 9.562Q18.688 10.792 17.917 11.823Q17.146 12.854 16.167 13.646ZM16.396 18.854 12.938 15.396Q12.208 15.625 11.479 15.729Q10.75 15.833 10 15.833Q6.833 15.833 4.375 14.094Q1.917 12.354 0.833 9.562Q1.25 8.479 1.917 7.552Q2.583 6.625 3.417 5.875L1.125 3.562L2.375 2.354L17.625 17.625ZM4.604 7.062Q4.021 7.604 3.542 8.219Q3.062 8.833 2.729 9.562Q3.75 11.646 5.688 12.865Q7.625 14.083 10 14.083Q10.354 14.083 10.74 14.052Q11.125 14.021 11.479 13.938L10.812 13.271Q10.625 13.312 10.417 13.333Q10.208 13.354 10 13.354Q8.417 13.354 7.312 12.25Q6.208 11.146 6.208 9.562Q6.208 9.354 6.24 9.167Q6.271 8.979 6.312 8.771ZM11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875ZM8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Z"/></svg>';
 exports.visibilityOffIcon = visibilityOffIcon;
 var paletteIcon = '<svg><path d="M9.958 18.333Q8.25 18.333 6.74 17.677Q5.229 17.021 4.104 15.885Q2.979 14.75 2.323 13.229Q1.667 11.708 1.667 10Q1.667 8.271 2.333 6.75Q3 5.229 4.156 4.104Q5.312 2.979 6.854 2.323Q8.396 1.667 10.125 1.667Q11.771 1.667 13.26 2.25Q14.75 2.833 15.875 3.854Q17 4.875 17.667 6.26Q18.333 7.646 18.333 9.25Q18.333 11.688 16.792 12.948Q15.25 14.208 13.188 14.208H11.75Q11.625 14.208 11.562 14.281Q11.5 14.354 11.5 14.458Q11.5 14.688 11.812 15.219Q12.125 15.75 12.125 16.458Q12.125 17.458 11.51 17.896Q10.896 18.333 9.958 18.333ZM5.458 10.875Q6 10.875 6.375 10.5Q6.75 10.125 6.75 9.583Q6.75 9.042 6.375 8.667Q6 8.292 5.458 8.292Q4.917 8.292 4.542 8.667Q4.167 9.042 4.167 9.583Q4.167 10.125 4.542 10.5Q4.917 10.875 5.458 10.875ZM7.917 7.583Q8.458 7.583 8.833 7.208Q9.208 6.833 9.208 6.292Q9.208 5.75 8.833 5.375Q8.458 5 7.917 5Q7.375 5 7 5.375Q6.625 5.75 6.625 6.292Q6.625 6.833 7 7.208Q7.375 7.583 7.917 7.583ZM12.021 7.583Q12.562 7.583 12.938 7.208Q13.312 6.833 13.312 6.292Q13.312 5.75 12.938 5.375Q12.562 5 12.021 5Q11.479 5 11.104 5.375Q10.729 5.75 10.729 6.292Q10.729 6.833 11.104 7.208Q11.479 7.583 12.021 7.583ZM14.479 10.875Q15.021 10.875 15.396 10.5Q15.771 10.125 15.771 9.583Q15.771 9.042 15.396 8.667Q15.021 8.292 14.479 8.292Q13.938 8.292 13.562 8.667Q13.188 9.042 13.188 9.583Q13.188 10.125 13.562 10.5Q13.938 10.875 14.479 10.875Z"/></svg>';
 exports.paletteIcon = paletteIcon;
-var gestureIcon = '<svg><path d="M11.542 17.542Q10.417 17.542 9.625 16.75Q8.833 15.958 8.833 14.833Q8.833 14.083 9.135 13.365Q9.438 12.646 10.01 12.031Q10.583 11.417 11.396 10.979Q12.208 10.542 13.229 10.354Q13.188 9.646 12.885 9.323Q12.583 9 12.104 9Q11.479 9 10.76 9.521Q10.042 10.042 9.104 11.229Q7.792 12.896 6.906 13.552Q6.021 14.208 5.125 14.208Q4.062 14.208 3.302 13.458Q2.542 12.708 2.542 11.521Q2.542 10.521 3 9.406Q3.458 8.292 4.583 6.646Q5.021 6.021 5.219 5.656Q5.417 5.292 5.417 5.062Q5.417 4.938 5.375 4.885Q5.333 4.833 5.25 4.833Q5.042 4.833 4.74 5.104Q4.438 5.375 4.062 5.875L2.5 4.333Q3.188 3.396 3.948 3Q4.708 2.604 5.312 2.604Q6.271 2.604 6.958 3.313Q7.646 4.021 7.646 5.021Q7.646 5.625 7.323 6.344Q7 7.062 6.229 8.188Q5.438 9.375 5.094 10.135Q4.75 10.896 4.75 11.417Q4.75 11.708 4.844 11.854Q4.938 12 5.104 12Q5.396 12 5.927 11.49Q6.458 10.979 7.562 9.604Q8.167 8.875 8.729 8.344Q9.292 7.812 9.844 7.469Q10.396 7.125 10.958 6.958Q11.521 6.792 12.104 6.792Q13.604 6.792 14.458 7.781Q15.312 8.771 15.458 10.25H17.5V12.458H15.458Q15.312 14.479 14.323 16.01Q13.333 17.542 11.542 17.542ZM11.625 15.312Q12.271 15.312 12.656 14.531Q13.042 13.75 13.208 12.625Q12.188 12.896 11.625 13.531Q11.062 14.167 11.062 14.708Q11.062 14.979 11.219 15.146Q11.375 15.312 11.625 15.312Z"/></svg>';
-exports.gestureIcon = gestureIcon;
 var penIcon = '<svg><path d="M2.5 17.5V13.771L13.479 2.792Q14 2.271 14.719 2.271Q15.438 2.271 15.958 2.792L17.208 4.042Q17.708 4.542 17.708 5.281Q17.708 6.021 17.208 6.521L6.229 17.5ZM14.729 6.5 15.958 5.271 14.729 4.042 13.5 5.271Z"/></svg>';
 exports.penIcon = penIcon;
 var paintIcon = '<svg><path d="M9.167 18.333Q8.438 18.333 7.927 17.823Q7.417 17.312 7.417 16.583V13.438H5.083Q4.354 13.438 3.844 12.927Q3.333 12.417 3.333 11.688V5.938Q3.333 4.5 4.333 3.5Q5.333 2.5 6.75 2.5H16.667V11.688Q16.667 12.417 16.156 12.927Q15.646 13.438 14.917 13.438H12.542V16.583Q12.542 17.312 12.031 17.823Q11.521 18.333 10.792 18.333ZM5.083 8.312H14.917V4.25H14.125V7.562H12.375V4.25H11.667V5.917H9.917V4.25H6.75Q6.062 4.25 5.573 4.75Q5.083 5.25 5.083 5.938Z"/></svg>';
@@ -74,11 +72,19 @@ var gridOffIcon = '<svg><path d="M18.333 15.854 16.583 14.104V13.354H15.833L14.0
 exports.gridOffIcon = gridOffIcon;
 var ellipseIcon = '<svg><path d="M10 15.833Q7.917 15.833 6.667 14.177Q5.417 12.521 5.417 10Q5.417 7.479 6.667 5.823Q7.917 4.167 10 4.167Q12.083 4.167 13.333 5.823Q14.583 7.479 14.583 10Q14.583 12.521 13.333 14.177Q12.083 15.833 10 15.833ZM10 14.042Q11.375 14.042 12.021 12.833Q12.667 11.625 12.667 10Q12.667 8.375 12.021 7.167Q11.375 5.958 10 5.958Q8.625 5.958 7.979 7.167Q7.333 8.375 7.333 10Q7.333 11.625 7.979 12.833Q8.625 14.042 10 14.042Z"/></svg>';
 exports.ellipseIcon = ellipseIcon;
-var selectIcon = '<svg><path d="M8.854 17.5Q8.5 17.5 8.188 17.354Q7.875 17.208 7.604 16.958L3.271 12.646L4.5 11.375Q4.812 11.042 5.24 10.906Q5.667 10.771 6.104 10.875L7.479 11.188V4.667Q7.479 3.771 8.115 3.135Q8.75 2.5 9.646 2.5Q10.542 2.5 11.177 3.135Q11.812 3.771 11.812 4.667V8.062H12.188Q12.333 8.062 12.458 8.094Q12.583 8.125 12.708 8.188L15.812 9.708Q16.292 9.938 16.542 10.406Q16.792 10.875 16.688 11.417L15.917 16.042Q15.812 16.688 15.323 17.094Q14.833 17.5 14.167 17.5ZM8.854 15.75H14.167L14.958 11.229Q14.958 11.229 14.958 11.229Q14.958 11.229 14.958 11.229L11.5 9.562H10.062V4.667Q10.062 4.479 9.948 4.365Q9.833 4.25 9.646 4.25Q9.458 4.25 9.344 4.365Q9.229 4.479 9.229 4.667V13.333L5.708 12.604ZM8.854 15.75H9.229Q9.229 15.75 9.344 15.75Q9.458 15.75 9.646 15.75Q9.833 15.75 9.948 15.75Q10.062 15.75 10.062 15.75H11.521H14.167Q14.167 15.75 14.167 15.75Q14.167 15.75 14.167 15.75Z"/></svg>';
-exports.selectIcon = selectIcon;
 var curveIcon = '<svg><path d="M7.521 17.5Q6.125 17.5 5.146 16.51Q4.167 15.521 4.167 14.125V7.417Q3.438 7.125 2.969 6.49Q2.5 5.854 2.5 5.042Q2.5 3.979 3.24 3.24Q3.979 2.5 5.042 2.5Q6.104 2.5 6.844 3.24Q7.583 3.979 7.583 5.042Q7.583 5.854 7.115 6.49Q6.646 7.125 5.917 7.417V14.125Q5.917 14.792 6.385 15.271Q6.854 15.75 7.521 15.75Q8.188 15.75 8.656 15.271Q9.125 14.792 9.125 14.125V5.875Q9.125 4.479 10.104 3.49Q11.083 2.5 12.479 2.5Q13.875 2.5 14.854 3.49Q15.833 4.479 15.833 5.875V12.583Q16.562 12.875 17.031 13.51Q17.5 14.146 17.5 14.958Q17.5 16.021 16.76 16.76Q16.021 17.5 14.958 17.5Q13.896 17.5 13.156 16.76Q12.417 16.021 12.417 14.958Q12.417 14.146 12.885 13.5Q13.354 12.854 14.083 12.583V5.875Q14.083 5.208 13.615 4.729Q13.146 4.25 12.479 4.25Q11.812 4.25 11.344 4.729Q10.875 5.208 10.875 5.875V14.125Q10.875 15.521 9.896 16.51Q8.917 17.5 7.521 17.5Z"/></svg>';
 exports.curveIcon = curveIcon;
 var boldIcon = '<svg><path d="M5.833 15V3.333H10.375Q11.812 3.333 12.885 4.156Q13.958 4.979 13.958 6.375Q13.958 7.375 13.49 7.969Q13.021 8.562 12.396 8.875V9.042Q13.312 9.354 13.844 10.021Q14.375 10.688 14.375 11.75Q14.375 13.312 13.229 14.156Q12.083 15 10.5 15ZM8.125 8.042H10.188Q10.854 8.042 11.302 7.656Q11.75 7.271 11.75 6.708Q11.75 6.167 11.302 5.771Q10.854 5.375 10.188 5.375H8.125ZM8.125 12.917H10.354Q11.167 12.917 11.625 12.51Q12.083 12.104 12.083 11.458Q12.083 10.812 11.625 10.406Q11.167 10 10.354 10H8.125Z"/></svg>';
 exports.boldIcon = boldIcon;
 var italicIcon = '<svg><path d="M4.167 16.667V14.083H6.979L10.229 5.917H7.5V3.333H15.833V5.917H13.021L9.771 14.083H12.5V16.667Z"/></svg>';
-exports.italicIcon = italicIcon;
+exports.italicIcon = italicIcon;
+var lineWidthIcon = '<svg><path d="M3.021 16V15H17V16ZM3.021 13.5V12H17V13.5ZM3 10.5V8.5H16.979V10.5ZM3.021 7V4H17V7Z"/></svg>';
+exports.lineWidthIcon = lineWidthIcon;
+var lineTypeIcon = '<svg><path d="M3 16V14.5H4.5V16ZM6.125 16V14.5H7.625V16ZM9.25 16V14.5H10.75V16ZM12.375 16V14.5H13.875V16ZM15.5 16V14.5H17V16ZM3 13V11.5H6.5V13ZM8.25 13V11.5H11.75V13ZM13.5 13V11.5H17V13ZM3 10V8.5H9.25V10ZM10.75 10V8.5H17V10ZM3 7V4H17V7Z"/></svg>';
+exports.lineTypeIcon = lineTypeIcon;
+var fontIcon = '<svg><path d="M5.312 14.979H7.125L8.042 12.479H11.979L12.896 14.979H14.708L10.917 5H9.083ZM8.542 10.958 9.958 6.958H10.042L11.458 10.958ZM3.417 18.333Q2.688 18.333 2.177 17.823Q1.667 17.312 1.667 16.583V3.417Q1.667 2.688 2.177 2.177Q2.688 1.667 3.417 1.667H16.583Q17.312 1.667 17.823 2.177Q18.333 2.688 18.333 3.417V16.583Q18.333 17.312 17.823 17.823Q17.312 18.333 16.583 18.333ZM3.417 16.583H16.583Q16.583 16.583 16.583 16.583Q16.583 16.583 16.583 16.583V3.417Q16.583 3.417 16.583 3.417Q16.583 3.417 16.583 3.417H3.417Q3.417 3.417 3.417 3.417Q3.417 3.417 3.417 3.417V16.583Q3.417 16.583 3.417 16.583Q3.417 16.583 3.417 16.583ZM3.417 3.417Q3.417 3.417 3.417 3.417Q3.417 3.417 3.417 3.417V16.583Q3.417 16.583 3.417 16.583Q3.417 16.583 3.417 16.583Q3.417 16.583 3.417 16.583Q3.417 16.583 3.417 16.583V3.417Q3.417 3.417 3.417 3.417Q3.417 3.417 3.417 3.417Z"/></svg>';
+exports.fontIcon = fontIcon;
+var lineEndIcon = '<svg><path d="M6 17 2 13 6 9 7.062 10.062 4.875 12.25H17V13.75H4.875L7.062 15.938ZM14 11 12.938 9.938 15.125 7.75H3V6.25H15.125L12.938 4.062L14 3L18 7Z"/></svg>';
+exports.lineEndIcon = lineEndIcon;
+var settingsIcon = '<svg><path d="M2.5 15.833V14.083H7.667V15.833ZM2.5 5.917V4.167H10.771V5.917ZM9.208 17.5V12.438H10.958V14.083H17.5V15.833H10.958V17.5ZM5.917 12.542V10.875H2.5V9.125H5.917V7.479H7.667V12.542ZM9.208 10.875V9.125H17.5V10.875ZM12.333 7.562V2.5H14.083V4.167H17.5V5.917H14.083V7.562Z"/></svg>';
+exports.settingsIcon = settingsIcon;

package/dist/constants/tools.js

@@ -359,7 +359,7 @@ exports.DEFAULT_SHAPE_TOOLS = DEFAULT_SHAPE_TOOLS;
 var SELECTION_TOOL = {
   id: "".concat(PREFIX_ID, "selection"),
   type: _tools.ActionsEnum.selection,
-  icon: _icons.selectIcon,
+  icon: _icons.cursorIcon,
   lib: 'Sélection'
 };
 exports.SELECTION_TOOL = SELECTION_TOOL;
@@ -408,7 +408,7 @@ exports.SAVE_TOOL = SAVE_TOOL;
 var MOVE_TOOL = {
   id: "".concat(PREFIX_ID, "move"),
   type: _tools.ActionsEnum.move,
-  icon: _icons.selectIcon,
+  icon: _icons.cursorIcon,
   lib: 'Move'
 };
 exports.MOVE_TOOL = MOVE_TOOL;

package/dist/styles.css

@@ -40,7 +40,7 @@
 .sst453j{width:100%;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:2px 6px;}
 .s1q5lsc2{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
 .s1dis2j8{-webkit-flex:1;-ms-flex:1;flex:1;text-align:left;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.s1dis2j8 + .s1q5lsc2{margin-left:12px;}
-.s1xzg253{position:absolute;z-index:3;background:var(--toolbar-bg);bottom:100%;box-shadow:0 3px 8px rgb(0 0 0 / 24%);padding:8px;border-radius:8px;white-space:nowrap;}.s1xzg253[data-alignment='left']{left:0;margin:4px;}.s1xzg253[data-alignment='center']{left:50%;-webkit-transform:translate3d(-50%,0px,0px);-ms-transform:translate3d(-50%,0px,0px);transform:translate3d(-50%,0px,0px);margin:4px 0px;}.s1xzg253[data-alignment='right']{right:0;margin:4px;}
+.s1xzg253{position:absolute;z-index:3;background:var(--toolbar-bg);bottom:100%;box-shadow:0 3px 8px rgb(0 0 0 / 24%);padding:8px;border-radius:8px;white-space:nowrap;box-sizing:border-box;}.s1xzg253[data-alignment='left']{left:0;margin:4px;}.s1xzg253[data-alignment='center']{left:50%;-webkit-transform:translate3d(-50%,0px,0px);-ms-transform:translate3d(-50%,0px,0px);transform:translate3d(-50%,0px,0px);margin:4px 0px;}.s1xzg253[data-alignment='right']{right:0;margin:4px;}.s1xzg253[data-fitcontainer='true']{max-width:100%;}
 .s17qj3jh{margin-bottom:8px;margin-top:4px;font-size:18px;}
 .su3a8bs{display:inline-block;background:var(--toolbar-bg);box-sizing:border-box;overflow-y:auto;min-width:200px;}
 .szboplp{margin:2px 0;}.szboplp:not(:hover){opacity:0.2;}
@@ -56,18 +56,20 @@
 .siejlch{position:relative;display:inline-block;}
 .s1uphjfh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;bottom:unset;top:100%;}.s1uphjfh[data-vertical='1']{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
 .s1e5a6k5{position:relative;display:inline-block;}
-.s1c8tp02{z-index:3;position:absolute;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;left:0;right:0;bottom:0;top:0;}
-.svkxpz4{display:grid;background:var(--toolbar-bg);box-shadow:0 3px 8px rgb(0 0 0 / 24%);padding:12px;border-radius:8px;white-space:nowrap;position:relative;}
+.s1c8tp02{z-index:3;position:absolute;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;left:0;right:0;bottom:0;top:0;}.s1c8tp02[data-position='center']{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.s1c8tp02[data-position='bottom']{-webkit-align-items:end;-webkit-box-align:end;-ms-flex-align:end;align-items:end;}
+.svkxpz4{display:grid;background:var(--toolbar-bg);box-shadow:0 3px 8px rgb(0 0 0 / 24%);padding:4px;border-radius:8px;white-space:nowrap;position:relative;}
 .s1s9jyyg{position:absolute;left:0;top:0;right:0;bottom:0;background:#00000073;}
 .s95bkm9 form{grid-template-columns:3fr 1fr 1fr;}.s95bkm9 form input{color:var(--font-color);border:1px solid var(--font-color);background:var(--toolbar-bg);outline:none;}
 .so6hnjf{-webkit-flex:1;-ms-flex:1;flex:1;position:relative;height:100%;text-align:center;height:36px;}
 .s1c1dllr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;max-height:36px;background:var(--toolbar-bg);border-bottom:1px solid var(--divider-color);box-sizing:border-box;}
 .s1g032mh{grid-template-columns:1fr 1fr 1fr;}
 .snh2jyk{width:24px;height:24px;box-sizing:border-box;border-radius:50%;border:1px solid gray;background:var(--snh2jyk-0);background-repeat:repeat;background-size:16px;}
-.sfm1cqx{width:24px;height:24px;box-sizing:border-box;border-radius:50%;color:var(--sfm1cqx-0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;line-height:36px;font-weight:bold;}
+.sfm1cqx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
+.sttf061{width:24px;height:24px;box-sizing:border-box;border-radius:50%;color:var(--sttf061-0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;line-height:36px;font-weight:bold;}
 .layoutPanelOpened .sj7hhjx.sj7hhjx{color:var(--font-selected-color);background:var(--font-selected-bg);}.sj7hhjx[data-hidden='1']{display:none;}
-.s9mugpt{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.s9mugpt{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
 .s1ktxhkr{padding:16px;}
+.s5sp14o{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
 .smpmxx5{font-family:var(--smpmxx5-0);}
 .s1qssg4n{display:inline-block;width:6px;height:2px;background:transparent;vertical-align:middle;}
 .se26iq6{display:inline-block;}.se26iq6[data-type='0'] .s1qssg4n{background:currentColor;}.se26iq6[data-type='1']{position:relative;left:3px;}.se26iq6[data-type='1'] .s1qssg4n:nth-child(3n-1){background:currentColor;width:12px;}.se26iq6[data-type='1'] .s1qssg4n:nth-child(n+11){display:none;}.se26iq6[data-type='2'] .s1qssg4n:nth-child(2n+1){background:currentColor;}
@@ -76,6 +78,7 @@
 .scawaat{position:relative;display:inline-block;width:60px;height:2px;background:currentColor;vertical-align:middle;}.scawaat[data-type='0'] .s1xxj4yl,.scawaat[data-type='1'] .s1xxj4yl{display:none;}.scawaat[data-type='0'] .sbd6jc8,.scawaat[data-type='2'] .sbd6jc8{display:none;}
 .s16z54di{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:var(--toolbar-bg);position:relative;height:36px;border-top:1px solid var(--divider-color);box-sizing:border-box;}
 .sa7lzh9{-webkit-flex:1;-ms-flex:1;flex:1;}
+.s7b85in{grid-template-columns:repeat(auto-fill,40px);width:100%;}
 .s1xssqat{display:inline-block;padding:12px 48px;margin:4px;max-width:calc(100% - 24px);overflow-wrap:break-word;box-sizing:border-box;-webkit-transition:all 500ms;transition:all 500ms;opacity:0;-webkit-transform:translate3d(0px,40px,0px);-ms-transform:translate3d(0px,40px,0px);transform:translate3d(0px,40px,0px);}.s1xssqat[data-type='0']{background:#646464;color:white;}.s1xssqat[data-type='1']{background:#c3a200;color:black;}.s1xssqat[data-type='2']{background:#911717;color:white;}.s1xssqat[data-type='3']{background:#088900;color:white;}.s1xssqat[data-is-shown='1']{opacity:1;-webkit-transform:translate3d(0px,0px,0px);-ms-transform:translate3d(0px,0px,0px);transform:translate3d(0px,0px,0px);}.s1xssqat[data-is-shown='0']{opacity:0;-webkit-transform:translate3d(0px,40px,0px);-ms-transform:translate3d(0px,40px,0px);transform:translate3d(0px,40px,0px);}
 .s1bgtt22{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;position:absolute;z-index:4;bottom:0;left:0;right:0;height:0px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
 .s9j48u3{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;z-index:2;top:0;bottom:0;left:0;right:0;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#00000050;-webkit-transition:opacity 300ms linear;transition:opacity 300ms linear;opacity:0;}.s9j48u3[data-loading='visible']{opacity:1;}

package/dist/utils/intersect.js

@@ -128,6 +128,7 @@ exports.applyRotationToVector = applyRotationToVector;
 var checkPositionIntersection = function checkPositionIntersection(shape, position, canvasOffset, selectionPadding) {
   var currentScale = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
   var checkAnchors = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  if (shape.locked) return false;
   var scaleWithMinCap = Math.min(1, currentScale);
 
   var _getShapeInfos = (0, _shapeData.getShapeInfos)(shape, selectionPadding),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yorab/react-paint",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "keywords": [],
   "author": "Yohann Rabatel",
   "license": "MIT",