@yorab/react-paint 0.5.0 → 0.6.0

package/Changelog.md

@@ -0,0 +1,96 @@
+# 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
+- prevent drawing selection when not needed
+- Click on toolbar tool group always enable a tool
+- fix input and select options not being impacted by
+- new reponsive for toolbar
+
+# V.0.4.0
+
+- Add possibility to customize UI from props
+
+# V.0.3.1
+
+- Add prop to change canvas background color
+- Move some props to options
+- fix Picture shape not being saved and not triggering onDataChanged
+- small picture are upscaled to fit container when imported
+- Add prop to choose to display save/load/export
+
+# V.0.3.0 :
+
+- prevent picture from url submit to reload page
+- add gridVisible prop and default to false
+- rename withLayouts to layersManipulation and reduce possible values
+- move every options inside options prop
+- remove ajv and any kind of json validation
+- limit snackbar use on success and always log errors
+- fit size and center uploaded picture
+- Add new viewer mode
+- add borders on bars
+- display shape id in layer panel
+- Export : round values to 2 decimal points
+- Export and import : remove temporary values (id) from stored file
+- Clean unknown shape format from imported data
+- Use ref for onDataChanged prop to avoid rerender if callback changes
+- Calculate container size to resize canvas instead of CSS
+- use requestAnimationFrame to improve perf
+- fix TextEdit position and size not working with canvas resized
+- fix anchors area becoming too small after rezsize
+- add MIT license to project
+- other minor fixes
+- minor design improvements
+
+# V.0.2.2 :
+
+- Migrate to react 18
+- fix Picture type
+- change pen join and cap to round
+- replace loading snackbar with proper loader
+- support for canGrow and canShrink prop
+- rename project
+- release on npm
+
+# V.0.2.1 :
+
+- better ui for input modal
+- lock functionnality
+- toggle grid
+- layouts panel UI
+
+# V.0.2.0 :
+
+- fix for scaling brush
+- fix snackbar
+- refonte UI toolbar
+- update examples
+- button with icons
+- mini toolbar to fix
+- provide tool for url only

package/README.md

@@ -1,11 +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)
-- selected style not saved when changing tool (since presets)
-
 ## mobile/touch
 
 - dnd layout on mobile not working (fix : use dnd lib, or add touch listener to fake dnd, or provide alt UI)
@@ -15,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

@@ -59,6 +59,8 @@ 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; }
@@ -69,49 +71,49 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var StyledApp = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledApp",
-  "class": "sdhgr8u",
+  "class": "s1v9piyg",
   vars: {
-    "sdhgr8u-0": [function (props) {
+    "s1v9piyg-0": [function (props) {
       return props.toolbarBackgroundColor;
     }],
-    "sdhgr8u-1": [function (props) {
+    "s1v9piyg-1": [function (props) {
       return props.dividerColor;
     }],
-    "sdhgr8u-2": [function (props) {
+    "s1v9piyg-2": [function (props) {
       return props.fontRadius;
     }, "px"],
-    "sdhgr8u-3": [function (props) {
+    "s1v9piyg-3": [function (props) {
       return props.fontDisabledColor;
     }],
-    "sdhgr8u-4": [function (props) {
+    "s1v9piyg-4": [function (props) {
       return props.fontDisabledBackgroundColor;
     }],
-    "sdhgr8u-5": [function (props) {
+    "s1v9piyg-5": [function (props) {
       return props.fontColor;
     }],
-    "sdhgr8u-6": [function (props) {
+    "s1v9piyg-6": [function (props) {
       return props.fontBackgroundColor;
     }],
-    "sdhgr8u-7": [function (props) {
+    "s1v9piyg-7": [function (props) {
       return props.fontSelectedColor;
     }],
-    "sdhgr8u-8": [function (props) {
+    "s1v9piyg-8": [function (props) {
       return props.fontSelectedBackgroundColor;
     }],
-    "sdhgr8u-9": [function (props) {
+    "s1v9piyg-9": [function (props) {
       return props.fontHoverColor;
     }],
-    "sdhgr8u-10": [function (props) {
+    "s1v9piyg-10": [function (props) {
       return props.fontHoverBackgroundColor;
     }],
-    "sdhgr8u-11": [function (props) {
+    "s1v9piyg-11": [function (props) {
       return props.canvasBackgroundColor;
     }],
-    "sdhgr8u-12": [function (_ref) {
+    "s1v9piyg-12": [function (_ref) {
       var canvasWidth = _ref.canvasWidth;
       return "min(100%, ".concat(canvasWidth, "px)");
     }],
-    "sdhgr8u-13": [function (_ref2) {
+    "s1v9piyg-13": [function (_ref2) {
       var canvasWidth = _ref2.canvasWidth;
       return canvasWidth;
     }, "px"]
@@ -119,13 +121,13 @@ var StyledApp = /*#__PURE__*/(0, _react2.styled)("div")({
 });
 var StyledRow = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledRow",
-  "class": "sm24hcl",
+  "class": "s6o5tmu",
   vars: {
-    "sm24hcl-1": [function (_ref3) {
+    "s6o5tmu-1": [function (_ref3) {
       var width = _ref3.width;
       return width;
     }, "px"],
-    "sm24hcl-2": [function (_ref4) {
+    "s6o5tmu-2": [function (_ref4) {
       var aspectRatio = _ref4.aspectRatio;
       return aspectRatio;
     }]
@@ -219,7 +221,14 @@ var App = function App(_ref5) {
       canvasSize = _useState2[0],
       setCanvasSize = _useState2[1];
 
-  var availableTools = (0, _toolbar.sanitizeTools)(availableToolsFromProps, withUploadPicture || withUrlPicture);
+  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,
@@ -227,42 +236,42 @@ var App = function App(_ref5) {
   }),
       isInsideComponent = _useComponent.isInsideComponent;
 
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      isLoading = _useState4[0],
-      setIsLoading = _useState4[1];
-
   var _useState5 = (0, _react.useState)(false),
       _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      isLayoutPanelShown = _useState6[0],
-      setIsLayoutPanelShown = _useState6[1];
+      isLoading = _useState6[0],
+      setIsLoading = _useState6[1];
 
-  var _useState7 = (0, _react.useState)([0, 0]),
+  var _useState7 = (0, _react.useState)(false),
       _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      canvasOffset = _useState8[0],
-      setCanvasOffset = _useState8[1];
+      isLayoutPanelShown = _useState8[0],
+      setIsLayoutPanelShown = _useState8[1];
 
-  var _useState9 = (0, _react.useState)(undefined),
+  var _useState9 = (0, _react.useState)([0, 0]),
       _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-      canvasOffsetStartPosition = _useState10[0],
-      setCanvasOffsetStartPosition = _useState10[1];
+      canvasOffset = _useState10[0],
+      setCanvasOffset = _useState10[1];
 
-  var _useState11 = (0, _react.useState)(_tools.SELECTION_TOOL),
+  var _useState11 = (0, _react.useState)(undefined),
       _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-      activeTool = _useState12[0],
-      setActiveTool = _useState12[1];
+      canvasOffsetStartPosition = _useState12[0],
+      setCanvasOffsetStartPosition = _useState12[1];
 
-  var _useState13 = (0, _react.useState)({
-    mode: _Mode.SelectionModeLib["default"]
-  }),
+  var _useState13 = (0, _react.useState)(_tools.SELECTION_TOOL),
       _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
-      selectionMode = _useState14[0],
-      setSelectionMode = _useState14[1];
+      activeTool = _useState14[0],
+      setActiveTool = _useState14[1];
 
-  var _useState15 = (0, _react.useState)(gridVisible),
+  var _useState15 = (0, _react.useState)({
+    mode: _Mode.SelectionModeLib["default"]
+  }),
       _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
-      withGrid = _useState16[0],
-      setWithGrid = _useState16[1];
+      selectionMode = _useState16[0],
+      setSelectionMode = _useState16[1];
+
+  var _useState17 = (0, _react.useState)(gridVisible),
+      _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
+      withGrid = _useState18[0],
+      setWithGrid = _useState18[1];
 
   var _useShapes = (0, _useShapes2["default"])(onDataChanged),
       shapesRef = _useShapes.shapesRef,
@@ -291,6 +300,16 @@ 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(_tools.SELECTION_TOOL);
     backwardShape();
@@ -343,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é");
@@ -363,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;
@@ -372,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;
@@ -493,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,
@@ -531,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]);
@@ -628,7 +647,8 @@ var App = function App(_ref5) {
       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

@@ -73,21 +73,21 @@ var renderSelectionCanvas = function renderSelectionCanvas(selectionCtx, selecti
 
 var StyledCanvasBox = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledCanvasBox",
-  "class": "s14cny8z"
+  "class": "s9czb9p"
 });
 var StyledCanvasContainer = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledCanvasContainer",
-  "class": "s16bxms6"
+  "class": "s1538eht"
 });
 var StyledDrawCanvas = /*#__PURE__*/(0, _react2.styled)("canvas")({
   name: "StyledDrawCanvas",
-  "class": "spzzsat"
+  "class": "s101qxdc"
 });
 var StyledSelectionCanvas = /*#__PURE__*/(0, _react2.styled)("canvas")({
   name: "StyledSelectionCanvas",
-  "class": "s1egrskk",
+  "class": "sa4oq48",
   vars: {
-    "s1egrskk-0": [function (_ref) {
+    "sa4oq48-0": [function (_ref) {
       var cursor = _ref.cursor;
       return cursor;
     }]
@@ -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,

package/dist/components/common/Button.js

@@ -19,19 +19,19 @@ var _excluded = ["hidden", "disabled", "selected", "icon", "children", "classNam
     _excluded2 = ["hidden", "disabled", "selected", "icon", "children", "type"];
 var StyledButton = /*#__PURE__*/(0, _react2.styled)("button")({
   name: "StyledButton",
-  "class": "sc6yefj"
+  "class": "sq3bzv4"
 });
 var StyledButtonContent = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledButtonContent",
-  "class": "s2aizej"
+  "class": "sst453j"
 });
 var StyledIcon = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledIcon",
-  "class": "s13rkw3s"
+  "class": "s1q5lsc2"
 });
 var StyledChildren = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledChildren",
-  "class": "s1qkcrgj"
+  "class": "s1dis2j8"
 });
 
 var Button = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {

package/dist/components/common/Loading.js

@@ -24,15 +24,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var TRANSITION_DURATION = 300;
 var StyledLoading = /*#__PURE__*/(0, _react.styled)("div")({
   name: "StyledLoading",
-  "class": "s15r7ba"
+  "class": "s9j48u3"
 });
 var StyledLoader = /*#__PURE__*/(0, _react.styled)("div")({
   name: "StyledLoader",
-  "class": "s19n4ela"
+  "class": "s4auclc"
 });
 var StyledShape = /*#__PURE__*/(0, _react.styled)("div")({
   name: "StyledShape",
-  "class": "ssemdwq"
+  "class": "s1l3fbq"
 });
 
 var Loading = function Loading(_ref) {

package/dist/components/common/Modal.js

@@ -15,15 +15,15 @@ var _style = require("../../constants/style");
 
 var StyledModal = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledModal",
-  "class": "s1hezj2d"
+  "class": "s1c8tp02"
 });
 var StyledPanel = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledPanel",
-  "class": "spuj31h"
+  "class": "svkxpz4"
 });
 var StyledMask = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledMask",
-  "class": "s1ulcd40"
+  "class": "s1s9jyyg"
 });
 
 var Modal = function Modal(_ref) {

package/dist/components/common/Panel.js

@@ -19,11 +19,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var StyledPanel = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledPanel",
-  "class": "s2dsyaf"
+  "class": "s1xzg253"
 });
 var StyledTitle = /*#__PURE__*/(0, _react2.styled)("h3")({
   name: "StyledTitle",
-  "class": "s1f032bv"
+  "class": "s17qj3jh"
 });
 
 var Panel = function Panel(_ref) {

package/dist/components/common/Snackbar.js

@@ -27,11 +27,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var StyledSnackbar = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledSnackbar",
-  "class": "s1xg1lj6"
+  "class": "s1xssqat"
 });
 var StyledSnackbarContainer = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledSnackbarContainer",
-  "class": "sg1lk71"
+  "class": "s1bgtt22"
 });
 
 var Snackbar = function Snackbar(_ref) {

package/dist/components/settings/ColorField.js

@@ -29,9 +29,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var StyledColor = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledColor",
-  "class": "s1dqu4j7",
+  "class": "snh2jyk",
   vars: {
-    "s1dqu4j7-0": [function (_ref) {
+    "snh2jyk-0": [function (_ref) {
       var color = _ref.color;
       return color;
     }]
@@ -39,9 +39,9 @@ var StyledColor = /*#__PURE__*/(0, _react2.styled)("div")({
 });
 var StyledCustomColor = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledCustomColor",
-  "class": "s1j0ldko",
+  "class": "sfm1cqx",
   vars: {
-    "s1j0ldko-0": [function (_ref2) {
+    "sfm1cqx-0": [function (_ref2) {
       var color = _ref2.color;
       return color;
     }]

package/dist/components/settings/FontFamilyField.js

@@ -17,9 +17,9 @@ var _fp = _interopRequireDefault(require("lodash/fp"));
 
 var StyledOption = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledOption",
-  "class": "s16o63ah",
+  "class": "smpmxx5",
   vars: {
-    "s16o63ah-0": [function (_ref) {
+    "smpmxx5-0": [function (_ref) {
       var family = _ref.family;
       return family;
     }]
@@ -48,7 +48,7 @@ var FontFamilyField = function FontFamilyField(_ref3) {
     CustomOption: FontFamilyOption,
     title: "Font",
     disabled: disabled,
-    field: "style.fontFamily",
+    field: "fontFamily",
     values: values,
     defaultValue: defaultValue,
     valueChanged: valueChanged

package/dist/components/settings/LayoutButton.js

@@ -17,7 +17,7 @@ var _Button = _interopRequireDefault(require("../common/Button"));
 
 var StyleToggleLayoutButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
   name: "StyleToggleLayoutButton",
-  "class": "sb1jkk3"
+  "class": "sj7hhjx"
 });
 
 var LayoutButton = function LayoutButton(_ref) {

package/dist/components/settings/Layouts.js

@@ -33,39 +33,43 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var StyledLayouts = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledLayouts",
-  "class": "sw61axo"
+  "class": "su3a8bs"
+});
+var StyledRemoveButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
+  name: "StyledRemoveButton",
+  "class": "szboplp"
 });
 var StyledLayout = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledLayout",
-  "class": "s1shoasi"
+  "class": "sff5xt"
 });
 var StyledVisibleButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
   name: "StyledVisibleButton",
-  "class": "s1adt0vs"
+  "class": "sj3bift"
 });
 var StyledLockedButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
   name: "StyledLockedButton",
-  "class": "svyjq0t"
+  "class": "s10ip0a4"
 });
 var StyledGridButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
   name: "StyledGridButton",
-  "class": "s1vztggb"
+  "class": "s1j9uq9o"
 });
 var StyledSeparator = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledSeparator",
-  "class": "s1fgf9tg"
+  "class": "s156ddbb"
 });
 var StyledPanelLayouts = /*#__PURE__*/(0, _react2.styled)(_Panel["default"])({
   name: "StyledPanelLayouts",
-  "class": "s1rl6big"
+  "class": "s11gt4hl"
 });
 var StyledScrollingContent = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledScrollingContent",
-  "class": "sbpkotp"
+  "class": "s13cxqhq"
 });
 var StyledPlaceholder = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledPlaceholder",
-  "class": "s12cgrwn"
+  "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

@@ -17,15 +17,15 @@ var _fp = _interopRequireDefault(require("lodash/fp"));
 
 var StyledLeftTriangle = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledLeftTriangle",
-  "class": "s1bq28wy"
+  "class": "s1xxj4yl"
 });
 var StyledRightTriangle = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledRightTriangle",
-  "class": "sej9ve5"
+  "class": "sbd6jc8"
 });
 var StyledOption = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledOption",
-  "class": "s5asd7a"
+  "class": "scawaat"
 });
 
 var LineArrowOption = function LineArrowOption(_ref) {
@@ -50,7 +50,7 @@ var LineArrowField = function LineArrowField(_ref2) {
     CustomOption: LineArrowOption,
     title: "Fl\xE8ches",
     disabled: disabled,
-    field: "style.lineArrow",
+    field: "lineArrow",
     values: values,
     defaultValue: defaultValue,
     valueChanged: valueChanged