@yorab/react-paint 0.5.0 → 0.6.2

package/dist/components/settings/ColorField.js

@@ -29,19 +29,23 @@ 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;
     }]
   }
 });
+var StyleWrapper = /*#__PURE__*/(0, _react2.styled)("div")({
+  name: "StyleWrapper",
+  "class": "sfm1cqx"
+});
 var StyledCustomColor = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledCustomColor",
-  "class": "s1j0ldko",
+  "class": "sttf061",
   vars: {
-    "s1j0ldko-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,11 +15,13 @@ 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": "s16o63ah",
+  "class": "smpmxx5",
   vars: {
-    "s16o63ah-0": [function (_ref) {
+    "smpmxx5-0": [function (_ref) {
       var family = _ref.family;
       return family;
     }]
@@ -47,8 +49,9 @@ var FontFamilyField = function FontFamilyField(_ref3) {
     setSelectedSettings: setSelectedSettings,
     CustomOption: FontFamilyOption,
     title: "Font",
+    icon: _icons.fontIcon,
     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

@@ -15,17 +15,19 @@ 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": "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) {
@@ -49,8 +51,9 @@ var LineArrowField = function LineArrowField(_ref2) {
     setSelectedSettings: setSelectedSettings,
     CustomOption: LineArrowOption,
     title: "Fl\xE8ches",
+    icon: _icons.lineEndIcon,
     disabled: disabled,
-    field: "style.lineArrow",
+    field: "lineArrow",
     values: values,
     defaultValue: defaultValue,
     valueChanged: valueChanged

package/dist/components/settings/LineTypeField.js

@@ -15,20 +15,22 @@ 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": "s1yz5lc1"
+  "class": "s1qssg4n"
 });
 var StyledOption = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledOption",
-  "class": "s1k64iv7"
+  "class": "se26iq6"
 });
 
 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,9 +48,10 @@ var LineTypeField = function LineTypeField(_ref2) {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
     CustomOption: LineTypeOption,
+    icon: _icons.lineTypeIcon,
     title: "Type de traits",
     disabled: disabled,
-    field: "style.lineDash",
+    field: "lineDash",
     values: values,
     defaultValue: defaultValue,
     valueChanged: valueChanged

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,9 +27,10 @@ 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: "style.pointsCount",
+    field: "pointsCount",
     min: min,
     max: max,
     step: step,

package/dist/components/settings/RangeField.js

@@ -27,7 +27,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var StyledLabel = /*#__PURE__*/(0, _react2.styled)("label")({
   name: "StyledLabel",
-  "class": "s4h1871"
+  "class": "s9mugpt"
 });
 
 var RangeField = function RangeField(_ref) {
@@ -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

@@ -27,7 +27,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var StyledButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
   name: "StyledButton",
-  "class": "sfr849o"
+  "class": "s1ktxhkr"
+});
+var StyleWrapper = /*#__PURE__*/(0, _react2.styled)("div")({
+  name: "StyleWrapper",
+  "class": "s5sp14o"
 });
 
 var SelectField = function SelectField(_ref) {
@@ -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),