@yorab/react-paint 0.4.1 → 0.6.0

package/Changelog.md

@@ -1,3 +1,29 @@
+# V0.6.0
+
+- Fix text opacity range dancing in edit mode
+- Fix opacity not visually shown in edit mode
+- add delete button in layouts panel and update style
+- update shape selection priority : use layers order, unless an anchor is
+- stored data format updated
+
+# V0.5.1
+
+- add possibility to update default settings for a tool
+- fix png export not working with url pic
+- fix pictures missing id
+- fix text tool
+- double click for editing text is now working on mobile
+- add bold and italic for text
+
+# V0.5.0
+
+- Add tool presets feature
+
+# V.0.4.2
+
+- fix toolgroup not displayed
+- add passive prop to event listener
+
 # V.0.4.1
 
 - prevent mounting selection canvas when viewer mode

package/README.md

@@ -1,10 +1,5 @@
 # known issues :
 
-## To resolve before beta release
-
-- Text tool broken since 0.2.2
-- double click not working with touch (fix: fake it counting delay between touch)
-
 ## mobile/touch
 
 - dnd layout on mobile not working (fix : use dnd lib, or add touch listener to fake dnd, or provide alt UI)
@@ -14,5 +9,4 @@
 - TextEdit cursor overflow MINOR (quick fix : edit on modale ?)
 - TextEdit copy/paste containing html breaks display
 - circle resizing only goes one direction
-- New text component opacity range is dancing
 - adding padding to selection result in wrong intersection calculs

package/dist/components/App.js

@@ -19,10 +19,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _fp = _interopRequireDefault(require("lodash/fp"));
-
-var _Shapes = require("../types/Shapes");
-
 var _Canvas = _interopRequireDefault(require("./Canvas"));
 
 var _Layouts = _interopRequireDefault(require("./settings/Layouts"));
@@ -59,6 +55,12 @@ var _useResizeObserver = _interopRequireDefault(require("../hooks/useResizeObser
 
 var _shapes = require("../constants/shapes");
 
+var _toolbar = require("../utils/toolbar");
+
+var _tools = require("../constants/tools");
+
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
 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; }
@@ -131,7 +133,6 @@ var StyledRow = /*#__PURE__*/(0, _react2.styled)("div")({
     }]
   }
 });
-var DEFAULT_TOOLS = [_Shapes.ShapeEnum.brush, _Shapes.ShapeEnum.line, _Shapes.ShapeEnum.polygon, _Shapes.ShapeEnum.curve, _Shapes.ShapeEnum.rect, _Shapes.ShapeEnum.square, _Shapes.ShapeEnum.circle, _Shapes.ShapeEnum.ellipse, _Shapes.ShapeEnum.text, _Shapes.ShapeEnum.picture];
 var DEFAULT_OPTIONS = {
   layersManipulation: true,
   gridVisible: false,
@@ -139,7 +140,9 @@ var DEFAULT_OPTIONS = {
   canShrink: true,
   withExport: true,
   withLoadAndSave: true,
-  availableTools: DEFAULT_TOOLS,
+  withUploadPicture: true,
+  withUrlPicture: false,
+  availableTools: _tools.DEFAULT_SHAPE_TOOLS,
   uiStyle: {
     toolbarBackgroundColor: 'white',
     dividerColor: '#36418129',
@@ -183,6 +186,8 @@ var App = function App(_ref5) {
       canShrink = _DEFAULT_OPTIONS$opti.canShrink,
       withExport = _DEFAULT_OPTIONS$opti.withExport,
       withLoadAndSave = _DEFAULT_OPTIONS$opti.withLoadAndSave,
+      withUploadPicture = _DEFAULT_OPTIONS$opti.withUploadPicture,
+      withUrlPicture = _DEFAULT_OPTIONS$opti.withUrlPicture,
       availableToolsFromProps = _DEFAULT_OPTIONS$opti.availableTools;
 
   var _DEFAULT_OPTIONS$uiSt = _objectSpread(_objectSpread({}, DEFAULT_OPTIONS.uiStyle), (_options$uiStyle = options === null || options === void 0 ? void 0 : options.uiStyle) !== null && _options$uiStyle !== void 0 ? _options$uiStyle : {}),
@@ -216,7 +221,14 @@ var App = function App(_ref5) {
       canvasSize = _useState2[0],
       setCanvasSize = _useState2[1];
 
-  var availableTools = _fp["default"].intersection(DEFAULT_TOOLS, availableToolsFromProps);
+  var _useState3 = (0, _react.useState)((0, _toolbar.sanitizeTools)(availableToolsFromProps, withUploadPicture || withUrlPicture)),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      availableTools = _useState4[0],
+      setAvailableTools = _useState4[1];
+
+  (0, _react.useEffect)(function () {
+    setAvailableTools((0, _toolbar.sanitizeTools)(availableToolsFromProps, withUploadPicture || withUrlPicture));
+  }, [availableToolsFromProps, withUploadPicture, withUrlPicture]);
 
   var _useComponent = (0, _useComponent2["default"])({
     disabled: disabled,
@@ -224,22 +236,6 @@ var App = function App(_ref5) {
   }),
       isInsideComponent = _useComponent.isInsideComponent;
 
-  var _useState3 = (0, _react.useState)({
-    style: {
-      fillColor: 'transparent',
-      strokeColor: 'black',
-      globalAlpha: 100,
-      lineWidth: 1,
-      lineDash: 0,
-      lineArrow: 0,
-      pointsCount: 3,
-      fontFamily: _style.STYLE_FONT_DEFAULT
-    }
-  }),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      defaultConf = _useState4[0],
-      setDefaultConf = _useState4[1];
-
   var _useState5 = (0, _react.useState)(false),
       _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
       isLoading = _useState6[0],
@@ -260,7 +256,7 @@ var App = function App(_ref5) {
       canvasOffsetStartPosition = _useState12[0],
       setCanvasOffsetStartPosition = _useState12[1];
 
-  var _useState13 = (0, _react.useState)(_Shapes.ToolEnum.selection),
+  var _useState13 = (0, _react.useState)(_tools.SELECTION_TOOL),
       _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
       activeTool = _useState14[0],
       setActiveTool = _useState14[1];
@@ -304,23 +300,33 @@ var App = function App(_ref5) {
     setSelectedShape(undefined);
     setActiveTool(tool);
   }, [setSelectedShape]);
+  var updateToolSettings = (0, _react.useCallback)(function (toolId, field, value) {
+    setAvailableTools(function (availableTools) {
+      return availableTools.map(function (tool) {
+        return tool.id === toolId ? _fp["default"].set(['settings', field, 'default'], value, tool) : tool;
+      });
+    });
+    setActiveTool(function (activeTool) {
+      return activeTool.id === toolId ? _fp["default"].set(['settings', field, 'default'], value, activeTool) : activeTool;
+    });
+  }, []);
   var undoAction = (0, _react.useCallback)(function () {
-    selectTool(_Shapes.ToolEnum.selection);
+    selectTool(_tools.SELECTION_TOOL);
     backwardShape();
   }, [selectTool, backwardShape]);
   var redoAction = (0, _react.useCallback)(function () {
-    selectTool(_Shapes.ToolEnum.selection);
+    selectTool(_tools.SELECTION_TOOL);
     forwardShape();
   }, [selectTool, forwardShape]);
   var clearCanvas = (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(_Shapes.ToolEnum.selection);
+    selectTool(_tools.SELECTION_TOOL);
     setCanvasOffset([0, 0]);
   }, [selectTool, clearShapes]);
   var selectShape = (0, _react.useCallback)(function (shape) {
-    setActiveTool(_Shapes.ToolEnum.selection);
+    setActiveTool(_tools.SELECTION_TOOL);
     setSelectedShape(shape);
   }, [setSelectedShape]);
   var pasteShape = (0, _react.useCallback)(function (shape) {
@@ -356,7 +362,7 @@ var App = function App(_ref5) {
     setIsLoading(true);
 
     try {
-      var content = (0, _file.encodeShapesInString)(shapesRef.current);
+      var content = (0, _file.encodeShapesInString)(shapesRef.current, canvasWidth, canvasHeight);
 
       if (!content) {
         throw new Error("L'encodage a échoué");
@@ -376,7 +382,7 @@ var App = function App(_ref5) {
     } finally {
       setIsLoading(false);
     }
-  }, [shapesRef, addSnackbar]);
+  }, [shapesRef, addSnackbar, canvasWidth, canvasHeight]);
   var loadJson = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref6 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(json) {
       var shapes;
@@ -385,7 +391,7 @@ var App = function App(_ref5) {
           switch (_context.prev = _context.next) {
             case 0:
               _context.next = 2;
-              return (0, _file.decodePicturesInShapes)(json);
+              return (0, _file.decodeImportedData)(json);
 
             case 2:
               shapes = _context.sent;
@@ -506,7 +512,7 @@ var App = function App(_ref5) {
       return _ref8.apply(this, arguments);
     };
   }(), [addPictureShape, selectShape, addSnackbar, canvasWidth, canvasHeight]);
-  var onResized = (0, _react.useCallback)(function (measuredWidth, measuredHeight) {
+  var onResized = (0, _react.useCallback)(function (measuredWidth) {
     var scaleRatio = measuredWidth / canvasWidth;
     setCanvasSize({
       width: measuredWidth,
@@ -544,7 +550,7 @@ var App = function App(_ref5) {
         return canvasRef.current ? (0, _file.getCanvasImage)(shapesRef.current, canvasOffset, canvasWidth, canvasHeight, canvasSelectionPadding) : undefined;
       },
       getCurrentData: function getCurrentData() {
-        return (0, _data.cleanShapesBeforeExport)(shapesRef.current); //TODO : create different types for stored shapes
+        return (0, _data.buildDataToExport)(shapesRef.current, canvasWidth, canvasHeight);
       }
     };
   }, [apiRef, shapesRef, canvasOffset, canvasWidth, canvasHeight, canvasSelectionPadding]);
@@ -584,7 +590,9 @@ var App = function App(_ref5) {
     redoAction: redoAction,
     availableTools: availableTools,
     withExport: withExport,
-    withLoadAndSave: withLoadAndSave
+    withLoadAndSave: withLoadAndSave,
+    withUploadPicture: withUploadPicture,
+    withUrlPicture: withUrlPicture
   }), /*#__PURE__*/_react["default"].createElement(StyledRow, {
     "data-grow": canGrow,
     width: canvasSize.width,
@@ -605,7 +613,6 @@ var App = function App(_ref5) {
     setSelectedShape: setSelectedShape,
     canvasOffset: canvasOffset,
     setCanvasOffset: setCanvasOffset,
-    defaultConf: defaultConf,
     saveShapes: saveShapes,
     ref: canvasRef,
     canvasSize: canvasSize,
@@ -630,18 +637,18 @@ var App = function App(_ref5) {
   })), isEditMode && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_SettingsBar["default"], {
     disabled: disabled,
     activeTool: activeTool,
+    availableTools: availableTools,
     selectedShape: selectedShape,
     removeShape: removeShape,
     updateShape: updateShape,
-    defaultConf: defaultConf,
-    setDefaultConf: setDefaultConf,
     canvas: canvasRef.current,
     layersManipulation: layersManipulation,
     toggleLayoutPanel: function toggleLayoutPanel() {
       setIsLayoutPanelShown(function (prev) {
         return !prev;
       });
-    }
+    },
+    updateToolSettings: updateToolSettings
   }), /*#__PURE__*/_react["default"].createElement(_Loading["default"], {
     isLoading: isLoading
   }), /*#__PURE__*/_react["default"].createElement(_Snackbar["default"], {

package/dist/components/Canvas.js

@@ -31,6 +31,8 @@ var _useDrawableCanvas2 = _interopRequireDefault(require("../hooks/useDrawableCa
 
 var _icons = require("../constants/icons");
 
+var _tools = require("../types/tools");
+
 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; }
@@ -57,7 +59,7 @@ var renderSelectionCanvas = function renderSelectionCanvas(selectionCtx, selecti
       height = canvasSize.height,
       scaleRatio = canvasSize.scaleRatio;
   selectionCtx.clearRect(0, 0, width, height);
-  selectedShape && activeTool !== _Shapes.ShapeEnum.brush && (0, _draw.drawSelection)({
+  selectedShape && activeTool.type !== _Shapes.ShapeEnum.brush && (0, _draw.drawSelection)({
     ctx: selectionCtx,
     shape: selectedShape,
     scaleRatio: scaleRatio,
@@ -110,7 +112,6 @@ var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
       setCanvasOffsetStartPosition = _ref2.setCanvasOffsetStartPosition,
       canvasOffset = _ref2.canvasOffset,
       setCanvasOffset = _ref2.setCanvasOffset,
-      defaultConf = _ref2.defaultConf,
       isInsideComponent = _ref2.isInsideComponent,
       selectionMode = _ref2.selectionMode,
       setSelectionMode = _ref2.setSelectionMode,
@@ -132,7 +133,6 @@ var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
     drawCanvasRef: drawCanvasRef,
     setActiveTool: setActiveTool,
     shapes: shapes,
-    defaultConf: defaultConf,
     selectionMode: selectionMode,
     activeTool: activeTool,
     isInsideComponent: isInsideComponent,
@@ -151,7 +151,7 @@ var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
       hoverMode = _useDrawableCanvas.hoverMode;
 
   var updateSelectedShapeText = (0, _react.useCallback)(function (newText) {
-    var _drawCanvasRef$curren, _newShape$style;
+    var _drawCanvasRef$curren, _newShape$style$fontB, _newShape$style, _newShape$style$fontI, _newShape$style2, _newShape$style3;
 
     if ((selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) !== _Shapes.ShapeEnum.text) return;
     var ctx = (_drawCanvasRef$curren = drawCanvasRef.current) === null || _drawCanvasRef$curren === void 0 ? void 0 : _drawCanvasRef$curren.getContext('2d');
@@ -159,7 +159,7 @@ var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
 
     var newShape = _fp["default"].set('value', newText, selectedShape);
 
-    var newWidth = (0, _transform.calculateTextWidth)(ctx, newShape.value, newShape.fontSize, (_newShape$style = newShape.style) === null || _newShape$style === void 0 ? void 0 : _newShape$style.fontFamily);
+    var newWidth = (0, _transform.calculateTextWidth)(ctx, newShape.value, newShape.fontSize, (_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), {}, {
       width: newWidth,
@@ -197,7 +197,7 @@ var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
     width: canvasSize.width,
     height: canvasSize.height,
     "data-grow": canGrow,
-    cursor: activeTool !== _Shapes.ToolEnum.selection && activeTool !== _Shapes.ToolEnum.move || hoverMode.mode === _Mode.SelectionModeLib.resize ? 'crosshair' : activeTool === _Shapes.ToolEnum.move || hoverMode.mode === _Mode.SelectionModeLib.translate ? 'move' : hoverMode.mode === _Mode.SelectionModeLib.rotate ? 'grab' : 'default'
+    cursor: activeTool.type !== _tools.ActionsEnum.selection && activeTool.type !== _tools.ActionsEnum.move || hoverMode.mode === _Mode.SelectionModeLib.resize ? 'crosshair' : activeTool.type === _tools.ActionsEnum.move || hoverMode.mode === _Mode.SelectionModeLib.translate ? 'move' : hoverMode.mode === _Mode.SelectionModeLib.rotate ? 'grab' : 'default'
   }), isEditMode && selectionMode.mode === _Mode.SelectionModeLib.textedition && (selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) === _Shapes.ShapeEnum.text && /*#__PURE__*/_react["default"].createElement(_EditTextBox["default"], {
     scaleRatio: canvasSize.scaleRatio,
     disabled: disabled,

package/dist/components/settings/ColorField.js

@@ -21,8 +21,6 @@ var _Button = _interopRequireDefault(require("../common/Button"));
 
 var _Panel = _interopRequireDefault(require("../common/Panel"));
 
-var _style = require("../../constants/style");
-
 var _icons = require("../../constants/icons");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -57,6 +55,7 @@ var ColorField = function ColorField(_ref3) {
       title = _ref3$title === void 0 ? 'Choisissez une couleur' : _ref3$title,
       _ref3$disabled = _ref3.disabled,
       disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
+      values = _ref3.values,
       field = _ref3.field,
       _ref3$value = _ref3.value,
       value = _ref3$value === void 0 ? '' : _ref3$value,
@@ -83,6 +82,7 @@ var ColorField = function ColorField(_ref3) {
   };
 
   var isPanelVisible = selectedSettings === customKey;
+  if (_fp["default"].isEmpty(values)) return null;
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     selected: isPanelVisible,
     title: title,
@@ -93,7 +93,7 @@ var ColorField = function ColorField(_ref3) {
   })), isPanelVisible && /*#__PURE__*/_react["default"].createElement(_Panel["default"], {
     title: title,
     alignment: "left"
-  }, /*#__PURE__*/_react["default"].createElement("div", null, _style.STYLE_COLORS.map(function (color, index) {
+  }, /*#__PURE__*/_react["default"].createElement("div", null, values.map(function (color, index) {
     return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
       title: color,
       key: index,
@@ -108,11 +108,11 @@ var ColorField = function ColorField(_ref3) {
   }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     type: "color",
     title: "Custom color",
-    selected: !_fp["default"].includes(value, _style.STYLE_COLORS),
+    selected: !_fp["default"].includes(value, values),
     value: value,
     onChange: handleChange
   }, /*#__PURE__*/_react["default"].createElement(StyledCustomColor, {
-    color: _fp["default"].includes(value, _style.STYLE_COLORS) ? 'var(--font-color)' : value
+    color: _fp["default"].includes(value, values) ? 'var(--font-color)' : value
   }, /*#__PURE__*/_react["default"].createElement("span", {
     dangerouslySetInnerHTML: {
       __html: _icons.paletteIcon

package/dist/components/settings/FontFamilyField.js

@@ -11,10 +11,10 @@ var _react = _interopRequireDefault(require("react"));
 
 var _SelectField = _interopRequireDefault(require("./SelectField"));
 
-var _style = require("../../constants/style");
-
 var _react2 = require("@linaria/react");
 
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
 var StyledOption = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledOption",
   "class": "smpmxx5",
@@ -38,16 +38,18 @@ var FontFamilyField = function FontFamilyField(_ref3) {
       setSelectedSettings = _ref3.setSelectedSettings,
       _ref3$disabled = _ref3.disabled,
       disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
+      values = _ref3.values,
       defaultValue = _ref3.defaultValue,
       valueChanged = _ref3.valueChanged;
+  if (_fp["default"].isEmpty(values)) return null;
   return /*#__PURE__*/_react["default"].createElement(_SelectField["default"], {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
     CustomOption: FontFamilyOption,
     title: "Font",
     disabled: disabled,
-    field: "style.fontFamily",
-    values: _style.STYLE_FONTS,
+    field: "fontFamily",
+    values: values,
     defaultValue: defaultValue,
     valueChanged: valueChanged
   });

package/dist/components/settings/Layouts.js

@@ -35,37 +35,41 @@ var StyledLayouts = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledLayouts",
   "class": "su3a8bs"
 });
+var StyledRemoveButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
+  name: "StyledRemoveButton",
+  "class": "szboplp"
+});
 var StyledLayout = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledLayout",
-  "class": "szboplp"
+  "class": "sff5xt"
 });
 var StyledVisibleButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
   name: "StyledVisibleButton",
-  "class": "sff5xt"
+  "class": "sj3bift"
 });
 var StyledLockedButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
   name: "StyledLockedButton",
-  "class": "sj3bift"
+  "class": "s10ip0a4"
 });
 var StyledGridButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
   name: "StyledGridButton",
-  "class": "s10ip0a4"
+  "class": "s1j9uq9o"
 });
 var StyledSeparator = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledSeparator",
-  "class": "s1j9uq9o"
+  "class": "s156ddbb"
 });
 var StyledPanelLayouts = /*#__PURE__*/(0, _react2.styled)(_Panel["default"])({
   name: "StyledPanelLayouts",
-  "class": "s156ddbb"
+  "class": "s11gt4hl"
 });
 var StyledScrollingContent = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledScrollingContent",
-  "class": "s11gt4hl"
+  "class": "s13cxqhq"
 });
 var StyledPlaceholder = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledPlaceholder",
-  "class": "s13cxqhq"
+  "class": "s1idv8qv"
 });
 
 var Layout = function Layout(_ref) {
@@ -147,6 +151,11 @@ var Layout = function Layout(_ref) {
     selected: selected,
     onClick: onToggleShapeLock,
     icon: shape.locked ? _icons.lockedIcon : _icons.unlockedIcon
+  }), /*#__PURE__*/_react["default"].createElement(StyledRemoveButton, {
+    title: "Remove",
+    disabled: disabled,
+    onClick: onRemove,
+    icon: _icons.trashIcon
   }));
 };
 

package/dist/components/settings/LineArrowField.js

@@ -11,10 +11,10 @@ var _react = _interopRequireDefault(require("react"));
 
 var _SelectField = _interopRequireDefault(require("./SelectField"));
 
-var _style = require("../../constants/style");
-
 var _react2 = require("@linaria/react");
 
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
 var StyledLeftTriangle = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledLeftTriangle",
   "class": "s1xxj4yl"
@@ -40,16 +40,18 @@ var LineArrowField = function LineArrowField(_ref2) {
       setSelectedSettings = _ref2.setSelectedSettings,
       _ref2$disabled = _ref2.disabled,
       disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      values = _ref2.values,
       defaultValue = _ref2.defaultValue,
       valueChanged = _ref2.valueChanged;
+  if (_fp["default"].isEmpty(values)) return null;
   return /*#__PURE__*/_react["default"].createElement(_SelectField["default"], {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
     CustomOption: LineArrowOption,
     title: "Fl\xE8ches",
     disabled: disabled,
-    field: "style.lineArrow",
-    values: _style.STYLE_LINE_WITH_ARROW,
+    field: "lineArrow",
+    values: values,
     defaultValue: defaultValue,
     valueChanged: valueChanged
   });

package/dist/components/settings/LineTypeField.js

@@ -11,10 +11,10 @@ var _react = _interopRequireDefault(require("react"));
 
 var _SelectField = _interopRequireDefault(require("./SelectField"));
 
-var _style = require("../../constants/style");
-
 var _react2 = require("@linaria/react");
 
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
 var StyledLine = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledLine",
   "class": "s1qssg4n"
@@ -38,16 +38,18 @@ var LineTypeField = function LineTypeField(_ref2) {
       setSelectedSettings = _ref2.setSelectedSettings,
       _ref2$disabled = _ref2.disabled,
       disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      values = _ref2.values,
       defaultValue = _ref2.defaultValue,
       valueChanged = _ref2.valueChanged;
+  if (_fp["default"].isEmpty(values)) return null;
   return /*#__PURE__*/_react["default"].createElement(_SelectField["default"], {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
     CustomOption: LineTypeOption,
     title: "Type de traits",
     disabled: disabled,
-    field: "style.lineDash",
-    values: _style.STYLE_LINE_DASH,
+    field: "lineDash",
+    values: values,
     defaultValue: defaultValue,
     valueChanged: valueChanged
   });

package/dist/components/settings/PointsNumberField.js

@@ -9,40 +9,30 @@ 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"], {
+var _RangeField = _interopRequireDefault(require("./RangeField"));
+
+var PointsNumberField = function PointsNumberField(_ref) {
+  var selectedSettings = _ref.selectedSettings,
+      setSelectedSettings = _ref.setSelectedSettings,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      min = _ref.min,
+      max = _ref.max,
+      step = _ref.step,
+      value = _ref.value,
+      valueChanged = _ref.valueChanged;
+  if (min === max) return null;
+  return /*#__PURE__*/_react["default"].createElement(_RangeField["default"], {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
-    CustomOption: PointsNumberOption,
     title: "Nombre de points",
     disabled: disabled,
-    field: "style.pointsCount",
-    values: values,
-    defaultValue: defaultValue,
+    field: "pointsCount",
+    min: min,
+    max: max,
+    step: step,
+    unity: "",
+    value: value,
     valueChanged: valueChanged
   });
 };

package/dist/components/settings/RangeField.js

@@ -68,6 +68,7 @@ var RangeField = function RangeField(_ref) {
   };
 
   var isPanelVisible = selectedSettings === customKey;
+  if (min === max) return null;
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     selected: isPanelVisible,
     title: title,

package/dist/components/settings/SelectField.js

@@ -58,6 +58,7 @@ var SelectField = function SelectField(_ref) {
   };
 
   var isPanelVisible = selectedSettings === customKey;
+  if (_fp["default"].isEmpty(values)) return null;
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     selected: isPanelVisible,
     title: title,