@yorab/react-paint 0.4.2 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/README.md +1 -0
  2. package/dist/components/App.js +58 -71
  3. package/dist/components/Canvas.js +9 -9
  4. package/dist/components/common/Button.js +4 -4
  5. package/dist/components/common/Loading.js +3 -3
  6. package/dist/components/common/Modal.js +3 -3
  7. package/dist/components/common/Panel.js +2 -2
  8. package/dist/components/common/Snackbar.js +2 -2
  9. package/dist/components/settings/ColorField.js +9 -9
  10. package/dist/components/settings/FontFamilyField.js +7 -5
  11. package/dist/components/settings/LayoutButton.js +1 -1
  12. package/dist/components/settings/Layouts.js +9 -9
  13. package/dist/components/settings/LineArrowField.js +8 -6
  14. package/dist/components/settings/LineTypeField.js +7 -5
  15. package/dist/components/settings/PointsNumberField.js +19 -29
  16. package/dist/components/settings/RangeField.js +2 -1
  17. package/dist/components/settings/SelectField.js +2 -1
  18. package/dist/components/settings/SettingsBar.js +107 -80
  19. package/dist/components/toolbox/EditTextBox.js +6 -6
  20. package/dist/components/toolbox/LoadFileTool.js +5 -3
  21. package/dist/components/toolbox/MenuGroup.js +31 -40
  22. package/dist/components/toolbox/PictureUrlInput.js +1 -1
  23. package/dist/components/toolbox/Tool.js +4 -4
  24. package/dist/components/toolbox/Toolbar.js +77 -73
  25. package/dist/components/toolbox/ToolbarGroup.js +22 -26
  26. package/dist/constants/style.js +3 -1
  27. package/dist/constants/tools.js +420 -0
  28. package/dist/hooks/useDrawableCanvas.js +22 -17
  29. package/dist/styles.css +51 -52
  30. package/dist/types/Shapes.js +2 -16
  31. package/dist/types/tools.js +22 -0
  32. package/dist/utils/data.js +81 -25
  33. package/dist/utils/style.js +4 -2
  34. package/dist/utils/toolbar.js +66 -11
  35. package/dist/utils/transform.js +3 -3
  36. package/package.json +1 -1
  37. package/Changelog.md +0 -75
@@ -11,21 +11,21 @@ var _react = _interopRequireDefault(require("react"));
11
11
 
12
12
  var _SelectField = _interopRequireDefault(require("./SelectField"));
13
13
 
14
- var _style = require("../../constants/style");
15
-
16
14
  var _react2 = require("@linaria/react");
17
15
 
16
+ var _fp = _interopRequireDefault(require("lodash/fp"));
17
+
18
18
  var StyledLeftTriangle = /*#__PURE__*/(0, _react2.styled)("span")({
19
19
  name: "StyledLeftTriangle",
20
- "class": "s1xxj4yl"
20
+ "class": "s1bq28wy"
21
21
  });
22
22
  var StyledRightTriangle = /*#__PURE__*/(0, _react2.styled)("span")({
23
23
  name: "StyledRightTriangle",
24
- "class": "sbd6jc8"
24
+ "class": "sej9ve5"
25
25
  });
26
26
  var StyledOption = /*#__PURE__*/(0, _react2.styled)("span")({
27
27
  name: "StyledOption",
28
- "class": "scawaat"
28
+ "class": "s5asd7a"
29
29
  });
30
30
 
31
31
  var LineArrowOption = function LineArrowOption(_ref) {
@@ -40,8 +40,10 @@ var LineArrowField = function LineArrowField(_ref2) {
40
40
  setSelectedSettings = _ref2.setSelectedSettings,
41
41
  _ref2$disabled = _ref2.disabled,
42
42
  disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
43
+ values = _ref2.values,
43
44
  defaultValue = _ref2.defaultValue,
44
45
  valueChanged = _ref2.valueChanged;
46
+ if (_fp["default"].isEmpty(values)) return null;
45
47
  return /*#__PURE__*/_react["default"].createElement(_SelectField["default"], {
46
48
  selectedSettings: selectedSettings,
47
49
  setSelectedSettings: setSelectedSettings,
@@ -49,7 +51,7 @@ var LineArrowField = function LineArrowField(_ref2) {
49
51
  title: "Fl\xE8ches",
50
52
  disabled: disabled,
51
53
  field: "style.lineArrow",
52
- values: _style.STYLE_LINE_WITH_ARROW,
54
+ values: values,
53
55
  defaultValue: defaultValue,
54
56
  valueChanged: valueChanged
55
57
  });
@@ -11,17 +11,17 @@ var _react = _interopRequireDefault(require("react"));
11
11
 
12
12
  var _SelectField = _interopRequireDefault(require("./SelectField"));
13
13
 
14
- var _style = require("../../constants/style");
15
-
16
14
  var _react2 = require("@linaria/react");
17
15
 
16
+ var _fp = _interopRequireDefault(require("lodash/fp"));
17
+
18
18
  var StyledLine = /*#__PURE__*/(0, _react2.styled)("span")({
19
19
  name: "StyledLine",
20
- "class": "s1qssg4n"
20
+ "class": "s1yz5lc1"
21
21
  });
22
22
  var StyledOption = /*#__PURE__*/(0, _react2.styled)("span")({
23
23
  name: "StyledOption",
24
- "class": "se26iq6"
24
+ "class": "s1k64iv7"
25
25
  });
26
26
 
27
27
  var LineTypeOption = function LineTypeOption(_ref) {
@@ -38,8 +38,10 @@ var LineTypeField = function LineTypeField(_ref2) {
38
38
  setSelectedSettings = _ref2.setSelectedSettings,
39
39
  _ref2$disabled = _ref2.disabled,
40
40
  disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
41
+ values = _ref2.values,
41
42
  defaultValue = _ref2.defaultValue,
42
43
  valueChanged = _ref2.valueChanged;
44
+ if (_fp["default"].isEmpty(values)) return null;
43
45
  return /*#__PURE__*/_react["default"].createElement(_SelectField["default"], {
44
46
  selectedSettings: selectedSettings,
45
47
  setSelectedSettings: setSelectedSettings,
@@ -47,7 +49,7 @@ var LineTypeField = function LineTypeField(_ref2) {
47
49
  title: "Type de traits",
48
50
  disabled: disabled,
49
51
  field: "style.lineDash",
50
- values: _style.STYLE_LINE_DASH,
52
+ values: values,
51
53
  defaultValue: defaultValue,
52
54
  valueChanged: valueChanged
53
55
  });
@@ -9,40 +9,30 @@ exports["default"] = void 0;
9
9
 
10
10
  var _react = _interopRequireDefault(require("react"));
11
11
 
12
- var _SelectField = _interopRequireDefault(require("./SelectField"));
13
-
14
- var _style = require("../../constants/style");
15
-
16
- var _react2 = require("@linaria/react");
17
-
18
- var StyledOption = /*#__PURE__*/(0, _react2.styled)("span")({
19
- name: "StyledOption",
20
- "class": "skv6910"
21
- });
22
-
23
- var PointsNumberOption = function PointsNumberOption(_ref) {
24
- var children = _ref.children;
25
- return /*#__PURE__*/_react["default"].createElement(StyledOption, null, children);
26
- };
27
-
28
- var PointsNumberField = function PointsNumberField(_ref2) {
29
- var selectedSettings = _ref2.selectedSettings,
30
- setSelectedSettings = _ref2.setSelectedSettings,
31
- _ref2$disabled = _ref2.disabled,
32
- disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
33
- defaultValue = _ref2.defaultValue,
34
- _ref2$values = _ref2.values,
35
- values = _ref2$values === void 0 ? _style.POLYGON_POINTS_VALUES : _ref2$values,
36
- valueChanged = _ref2.valueChanged;
37
- return /*#__PURE__*/_react["default"].createElement(_SelectField["default"], {
12
+ var _RangeField = _interopRequireDefault(require("./RangeField"));
13
+
14
+ var PointsNumberField = function PointsNumberField(_ref) {
15
+ var selectedSettings = _ref.selectedSettings,
16
+ setSelectedSettings = _ref.setSelectedSettings,
17
+ _ref$disabled = _ref.disabled,
18
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
19
+ min = _ref.min,
20
+ max = _ref.max,
21
+ step = _ref.step,
22
+ value = _ref.value,
23
+ valueChanged = _ref.valueChanged;
24
+ if (min === max) return null;
25
+ return /*#__PURE__*/_react["default"].createElement(_RangeField["default"], {
38
26
  selectedSettings: selectedSettings,
39
27
  setSelectedSettings: setSelectedSettings,
40
- CustomOption: PointsNumberOption,
41
28
  title: "Nombre de points",
42
29
  disabled: disabled,
43
30
  field: "style.pointsCount",
44
- values: values,
45
- defaultValue: defaultValue,
31
+ min: min,
32
+ max: max,
33
+ step: step,
34
+ unity: "",
35
+ value: value,
46
36
  valueChanged: valueChanged
47
37
  });
48
38
  };
@@ -27,7 +27,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
27
27
 
28
28
  var StyledLabel = /*#__PURE__*/(0, _react2.styled)("label")({
29
29
  name: "StyledLabel",
30
- "class": "s9mugpt"
30
+ "class": "s4h1871"
31
31
  });
32
32
 
33
33
  var RangeField = function RangeField(_ref) {
@@ -68,6 +68,7 @@ var RangeField = function RangeField(_ref) {
68
68
  };
69
69
 
70
70
  var isPanelVisible = selectedSettings === customKey;
71
+ if (min === max) return null;
71
72
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
72
73
  selected: isPanelVisible,
73
74
  title: title,
@@ -27,7 +27,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
27
27
 
28
28
  var StyledButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
29
29
  name: "StyledButton",
30
- "class": "s1ktxhkr"
30
+ "class": "sfr849o"
31
31
  });
32
32
 
33
33
  var SelectField = function SelectField(_ref) {
@@ -58,6 +58,7 @@ var SelectField = function SelectField(_ref) {
58
58
  };
59
59
 
60
60
  var isPanelVisible = selectedSettings === customKey;
61
+ if (_fp["default"].isEmpty(values)) return null;
61
62
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
62
63
  selected: isPanelVisible,
63
64
  title: title,
@@ -19,8 +19,6 @@ var _react = _interopRequireWildcard(require("react"));
19
19
 
20
20
  var _react2 = require("@linaria/react");
21
21
 
22
- var _Shapes = require("../../types/Shapes");
23
-
24
22
  var _transform = require("../../utils/transform");
25
23
 
26
24
  var _ColorField = _interopRequireDefault(require("./ColorField"));
@@ -39,8 +37,6 @@ var _LineTypeField = _interopRequireDefault(require("./LineTypeField"));
39
37
 
40
38
  var _LineArrowField = _interopRequireDefault(require("./LineArrowField"));
41
39
 
42
- var _style = require("../../constants/style");
43
-
44
40
  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); }
45
41
 
46
42
  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; }
@@ -51,29 +47,38 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
51
47
 
52
48
  var StyledSettingsBar = /*#__PURE__*/(0, _react2.styled)("div")({
53
49
  name: "StyledSettingsBar",
54
- "class": "s16z54di"
50
+ "class": "s17kh6p4"
55
51
  });
56
52
  var StyledSeparator = /*#__PURE__*/(0, _react2.styled)("div")({
57
53
  name: "StyledSeparator",
58
- "class": "sa7lzh9"
54
+ "class": "s1fluhcn"
59
55
  });
60
56
 
61
57
  var SettingsBar = function SettingsBar(_ref) {
62
- var _selectedShape$style, _selectedShape$style2, _selectedShape$style3, _selectedShape$style4, _selectedShape$style5, _selectedShape$style6, _selectedShape$style$, _selectedShape$style7, _defaultConf$style, _defaultConf$style2, _defaultConf$style3, _defaultConf$style4, _defaultConf$style5, _defaultConf$style6, _defaultConf$style7;
58
+ var _selectedShape$style, _selectedShape$style2, _selectedShape$style3, _selectedShape$style4, _selectedShape$style5, _selectedShape$style6, _selectedShape$style7, _selectedShape$style$, _selectedShape$style8;
63
59
 
64
60
  var _ref$disabled = _ref.disabled,
65
61
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
62
+ availableTools = _ref.availableTools,
66
63
  layersManipulation = _ref.layersManipulation,
67
64
  toggleLayoutPanel = _ref.toggleLayoutPanel,
68
65
  activeTool = _ref.activeTool,
69
66
  selectedShape = _ref.selectedShape,
70
67
  canvas = _ref.canvas,
71
68
  updateShape = _ref.updateShape,
72
- removeShape = _ref.removeShape,
73
- defaultConf = _ref.defaultConf,
74
- setDefaultConf = _ref.setDefaultConf;
75
- var shapes = [_Shapes.ShapeEnum.brush, _Shapes.ShapeEnum.ellipse, _Shapes.ShapeEnum.circle, _Shapes.ShapeEnum.rect, _Shapes.ShapeEnum.square, _Shapes.ShapeEnum.line, _Shapes.ShapeEnum.polygon, _Shapes.ShapeEnum.curve, _Shapes.ShapeEnum.text];
76
-
69
+ removeShape = _ref.removeShape;
70
+
71
+ // const shapes = [
72
+ // ShapeEnum.brush,
73
+ // ShapeEnum.ellipse,
74
+ // ShapeEnum.circle,
75
+ // ShapeEnum.rect,
76
+ // ShapeEnum.square,
77
+ // ShapeEnum.line,
78
+ // ShapeEnum.polygon,
79
+ // ShapeEnum.curve,
80
+ // ShapeEnum.text
81
+ // ]
77
82
  var _useState = (0, _react.useState)(undefined),
78
83
  _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
79
84
  selectedSettings = _useState2[0],
@@ -82,11 +87,10 @@ var SettingsBar = function SettingsBar(_ref) {
82
87
  var handleShapeStyleChange = function handleShapeStyleChange(field, value) {
83
88
  if (selectedShape) {
84
89
  updateShape(_fp["default"].set(field, value, selectedShape), true);
85
- } else {
86
- setDefaultConf(function (prevDefaultConf) {
87
- return _fp["default"].set(field, value, prevDefaultConf);
88
- });
89
- }
90
+ } // } else {
91
+ // setDefaultConf(prevDefaultConf => _.set(field, value, prevDefaultConf))
92
+ // }
93
+
90
94
  };
91
95
 
92
96
  var handleShapeFontFamilyChange = function handleShapeFontFamilyChange(field, value) {
@@ -106,150 +110,173 @@ var SettingsBar = function SettingsBar(_ref) {
106
110
  });
107
111
 
108
112
  updateShape(resizedShape, true);
109
- } else {
110
- setDefaultConf(function (prevDefaultConf) {
111
- return _fp["default"].set(field, value, prevDefaultConf);
112
- });
113
- }
113
+ } // else {
114
+ // setDefaultConf(prevDefaultConf => _.set(field, value, prevDefaultConf))
115
+ // }
116
+
114
117
  };
115
118
 
116
119
  var handlePolygonLinesCount = function handlePolygonLinesCount(field, value) {
117
120
  if (selectedShape) {
118
121
  updateShape((0, _transform.updatePolygonLinesCount)(selectedShape, value), true);
119
- } else {
120
- setDefaultConf(function (prevDefaultConf) {
121
- return _fp["default"].set(field, value, prevDefaultConf);
122
- });
123
- }
122
+ } // else {
123
+ // setDefaultConf(prevDefaultConf => _.set(field, value, prevDefaultConf))
124
+ // }
125
+
124
126
  };
125
127
 
126
- return /*#__PURE__*/_react["default"].createElement(StyledSettingsBar, null, selectedShape ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, shapes.includes(selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (selectedShape.type === _Shapes.ShapeEnum.polygon || selectedShape.type === _Shapes.ShapeEnum.curve) && /*#__PURE__*/_react["default"].createElement(_PointsNumberField["default"], {
128
+ var selectedShapeTool = selectedShape ? _fp["default"].find({
129
+ id: selectedShape.toolId
130
+ }, availableTools) || _fp["default"].find({
131
+ type: selectedShape.type
132
+ }, availableTools) : undefined;
133
+ 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, 'pointsCount' in selectedShapeTool.settings && /*#__PURE__*/_react["default"].createElement(_PointsNumberField["default"], {
127
134
  selectedSettings: selectedSettings,
128
135
  setSelectedSettings: setSelectedSettings,
129
136
  disabled: disabled,
130
- defaultValue: selectedShape.points.length,
131
137
  valueChanged: handlePolygonLinesCount,
132
- values: selectedShape.type === _Shapes.ShapeEnum.curve ? _style.CURVE_POINTS_VALUES : _style.POLYGON_POINTS_VALUES
133
- }), selectedShape.type === _Shapes.ShapeEnum.text ? /*#__PURE__*/_react["default"].createElement(_FontFamilyField["default"], {
138
+ min: selectedShapeTool.settings.pointsCount.min,
139
+ max: selectedShapeTool.settings.pointsCount.max,
140
+ step: selectedShapeTool.settings.pointsCount.step,
141
+ value: (_selectedShape$style = selectedShape.style) === null || _selectedShape$style === void 0 ? void 0 : _selectedShape$style.pointsCount
142
+ }), 'fontFamily' in selectedShapeTool.settings && /*#__PURE__*/_react["default"].createElement(_FontFamilyField["default"], {
134
143
  selectedSettings: selectedSettings,
135
144
  setSelectedSettings: setSelectedSettings,
136
145
  disabled: disabled,
137
- defaultValue: (_selectedShape$style = selectedShape.style) === null || _selectedShape$style === void 0 ? void 0 : _selectedShape$style.fontFamily,
138
- valueChanged: handleShapeFontFamilyChange
139
- }) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_RangeField["default"], {
146
+ valueChanged: handleShapeFontFamilyChange,
147
+ values: selectedShapeTool.settings.fontFamily.values,
148
+ defaultValue: (_selectedShape$style2 = selectedShape.style) === null || _selectedShape$style2 === void 0 ? void 0 : _selectedShape$style2.fontFamily
149
+ }), 'lineWidth' in selectedShapeTool.settings && /*#__PURE__*/_react["default"].createElement(_RangeField["default"], {
140
150
  selectedSettings: selectedSettings,
141
151
  setSelectedSettings: setSelectedSettings,
142
152
  title: "Epaisseur du trait",
143
153
  disabled: disabled,
144
154
  field: "style.lineWidth",
145
- value: (_selectedShape$style2 = selectedShape.style) === null || _selectedShape$style2 === void 0 ? void 0 : _selectedShape$style2.lineWidth,
155
+ value: (_selectedShape$style3 = selectedShape.style) === null || _selectedShape$style3 === void 0 ? void 0 : _selectedShape$style3.lineWidth,
146
156
  valueChanged: handleShapeStyleChange,
147
- unity: "px"
148
- }), /*#__PURE__*/_react["default"].createElement(_LineTypeField["default"], {
157
+ unity: "px",
158
+ min: selectedShapeTool.settings.lineWidth.min,
159
+ max: selectedShapeTool.settings.lineWidth.max,
160
+ step: selectedShapeTool.settings.lineWidth.step
161
+ }), 'lineDash' in selectedShapeTool.settings && /*#__PURE__*/_react["default"].createElement(_LineTypeField["default"], {
149
162
  selectedSettings: selectedSettings,
150
163
  setSelectedSettings: setSelectedSettings,
151
164
  disabled: disabled,
152
- defaultValue: (_selectedShape$style3 = selectedShape.style) === null || _selectedShape$style3 === void 0 ? void 0 : _selectedShape$style3.lineDash,
153
- valueChanged: handleShapeStyleChange
154
- })), selectedShape.type === _Shapes.ShapeEnum.line && /*#__PURE__*/_react["default"].createElement(_LineArrowField["default"], {
165
+ defaultValue: (_selectedShape$style4 = selectedShape.style) === null || _selectedShape$style4 === void 0 ? void 0 : _selectedShape$style4.lineDash,
166
+ valueChanged: handleShapeStyleChange,
167
+ values: selectedShapeTool.settings.lineDash.values
168
+ }), 'lineArrow' in selectedShapeTool.settings && /*#__PURE__*/_react["default"].createElement(_LineArrowField["default"], {
155
169
  selectedSettings: selectedSettings,
156
170
  setSelectedSettings: setSelectedSettings,
157
171
  disabled: disabled,
158
- defaultValue: (_selectedShape$style4 = selectedShape.style) === null || _selectedShape$style4 === void 0 ? void 0 : _selectedShape$style4.lineArrow,
159
- valueChanged: handleShapeStyleChange
160
- }), /*#__PURE__*/_react["default"].createElement(_ColorField["default"], {
172
+ defaultValue: (_selectedShape$style5 = selectedShape.style) === null || _selectedShape$style5 === void 0 ? void 0 : _selectedShape$style5.lineArrow,
173
+ valueChanged: handleShapeStyleChange,
174
+ values: selectedShapeTool.settings.lineArrow.values
175
+ }), 'strokeColor' in selectedShapeTool.settings && /*#__PURE__*/_react["default"].createElement(_ColorField["default"], {
161
176
  selectedSettings: selectedSettings,
162
177
  setSelectedSettings: setSelectedSettings,
163
178
  title: "Couleur du trait",
164
179
  disabled: disabled,
165
180
  field: "style.strokeColor",
166
- value: (_selectedShape$style5 = selectedShape.style) === null || _selectedShape$style5 === void 0 ? void 0 : _selectedShape$style5.strokeColor,
167
- valueChanged: handleShapeStyleChange
168
- }), selectedShape.type !== _Shapes.ShapeEnum.text && selectedShape.type !== _Shapes.ShapeEnum.brush && selectedShape.type !== _Shapes.ShapeEnum.line && /*#__PURE__*/_react["default"].createElement(_ColorField["default"], {
181
+ value: (_selectedShape$style6 = selectedShape.style) === null || _selectedShape$style6 === void 0 ? void 0 : _selectedShape$style6.strokeColor,
182
+ valueChanged: handleShapeStyleChange,
183
+ values: selectedShapeTool.settings.strokeColor.values
184
+ }), 'fillColor' in selectedShapeTool.settings && /*#__PURE__*/_react["default"].createElement(_ColorField["default"], {
169
185
  selectedSettings: selectedSettings,
170
186
  setSelectedSettings: setSelectedSettings,
171
187
  title: "Couleur de fond",
172
188
  disabled: disabled,
173
189
  field: "style.fillColor",
174
- value: (_selectedShape$style6 = selectedShape.style) === null || _selectedShape$style6 === void 0 ? void 0 : _selectedShape$style6.fillColor,
175
- valueChanged: handleShapeStyleChange
176
- })), /*#__PURE__*/_react["default"].createElement(_RangeField["default"], {
190
+ value: (_selectedShape$style7 = selectedShape.style) === null || _selectedShape$style7 === void 0 ? void 0 : _selectedShape$style7.fillColor,
191
+ valueChanged: handleShapeStyleChange,
192
+ values: selectedShapeTool.settings.fillColor.values
193
+ }), 'opacity' in selectedShapeTool.settings && /*#__PURE__*/_react["default"].createElement(_RangeField["default"], {
177
194
  selectedSettings: selectedSettings,
178
195
  setSelectedSettings: setSelectedSettings,
179
196
  title: "Opacit\xE9",
180
- min: 0,
181
- max: 100,
182
- step: 1,
197
+ min: selectedShapeTool.settings.opacity.min,
198
+ max: selectedShapeTool.settings.opacity.max,
199
+ step: selectedShapeTool.settings.opacity.step,
183
200
  unity: "%",
184
201
  disabled: disabled,
185
202
  field: "style.globalAlpha",
186
- value: (_selectedShape$style$ = (_selectedShape$style7 = selectedShape.style) === null || _selectedShape$style7 === void 0 ? void 0 : _selectedShape$style7.globalAlpha) !== null && _selectedShape$style$ !== void 0 ? _selectedShape$style$ : 100,
203
+ value: (_selectedShape$style$ = (_selectedShape$style8 = selectedShape.style) === null || _selectedShape$style8 === void 0 ? void 0 : _selectedShape$style8.globalAlpha) !== null && _selectedShape$style$ !== void 0 ? _selectedShape$style$ : 100,
187
204
  valueChanged: handleShapeStyleChange
188
- }), /*#__PURE__*/_react["default"].createElement(_DeleteButton["default"], {
205
+ })), /*#__PURE__*/_react["default"].createElement(_DeleteButton["default"], {
189
206
  disabled: disabled,
190
207
  selectedShape: selectedShape,
191
208
  removeShape: removeShape
192
- })) : _fp["default"].includes(activeTool, shapes) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (activeTool === _Shapes.ShapeEnum.polygon || activeTool === _Shapes.ShapeEnum.curve) && /*#__PURE__*/_react["default"].createElement(_PointsNumberField["default"], {
209
+ })) : 'settings' in activeTool && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, 'pointsCount' in activeTool.settings && /*#__PURE__*/_react["default"].createElement(_PointsNumberField["default"], {
193
210
  selectedSettings: selectedSettings,
194
211
  setSelectedSettings: setSelectedSettings,
195
212
  disabled: disabled,
196
- defaultValue: 3,
197
213
  valueChanged: handlePolygonLinesCount,
198
- values: activeTool === _Shapes.ShapeEnum.curve ? _style.CURVE_POINTS_VALUES : _style.POLYGON_POINTS_VALUES
199
- }), activeTool === _Shapes.ShapeEnum.text ? /*#__PURE__*/_react["default"].createElement(_FontFamilyField["default"], {
214
+ min: activeTool.settings.pointsCount.min,
215
+ max: activeTool.settings.pointsCount.max,
216
+ step: activeTool.settings.pointsCount.step,
217
+ value: activeTool.settings.pointsCount["default"]
218
+ }), 'fontFamily' in activeTool.settings && /*#__PURE__*/_react["default"].createElement(_FontFamilyField["default"], {
200
219
  selectedSettings: selectedSettings,
201
220
  setSelectedSettings: setSelectedSettings,
202
221
  disabled: disabled,
203
- defaultValue: (_defaultConf$style = defaultConf.style) === null || _defaultConf$style === void 0 ? void 0 : _defaultConf$style.fontFamily,
204
- valueChanged: handleShapeStyleChange
205
- }) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_RangeField["default"], {
222
+ valueChanged: handleShapeFontFamilyChange,
223
+ values: activeTool.settings.fontFamily.values,
224
+ defaultValue: activeTool.settings.fontFamily["default"]
225
+ }), 'lineWidth' in activeTool.settings && /*#__PURE__*/_react["default"].createElement(_RangeField["default"], {
206
226
  selectedSettings: selectedSettings,
207
227
  setSelectedSettings: setSelectedSettings,
208
228
  title: "Epaisseur du trait",
209
229
  disabled: disabled,
210
230
  field: "style.lineWidth",
211
- value: (_defaultConf$style2 = defaultConf.style) === null || _defaultConf$style2 === void 0 ? void 0 : _defaultConf$style2.lineWidth,
231
+ value: activeTool.settings.lineWidth["default"],
212
232
  valueChanged: handleShapeStyleChange,
213
- unity: "px"
214
- }), /*#__PURE__*/_react["default"].createElement(_LineTypeField["default"], {
233
+ unity: "px",
234
+ min: activeTool.settings.lineWidth.min,
235
+ max: activeTool.settings.lineWidth.max,
236
+ step: activeTool.settings.lineWidth.step
237
+ }), 'lineDash' in activeTool.settings && /*#__PURE__*/_react["default"].createElement(_LineTypeField["default"], {
215
238
  selectedSettings: selectedSettings,
216
239
  setSelectedSettings: setSelectedSettings,
217
240
  disabled: disabled,
218
- defaultValue: (_defaultConf$style3 = defaultConf.style) === null || _defaultConf$style3 === void 0 ? void 0 : _defaultConf$style3.lineDash,
219
- valueChanged: handleShapeStyleChange
220
- })), activeTool === _Shapes.ShapeEnum.line && /*#__PURE__*/_react["default"].createElement(_LineArrowField["default"], {
241
+ defaultValue: activeTool.settings.lineDash["default"],
242
+ valueChanged: handleShapeStyleChange,
243
+ values: activeTool.settings.lineDash.values
244
+ }), 'lineArrow' in activeTool.settings && /*#__PURE__*/_react["default"].createElement(_LineArrowField["default"], {
221
245
  selectedSettings: selectedSettings,
222
246
  setSelectedSettings: setSelectedSettings,
223
247
  disabled: disabled,
224
- defaultValue: (_defaultConf$style4 = defaultConf.style) === null || _defaultConf$style4 === void 0 ? void 0 : _defaultConf$style4.lineArrow,
225
- valueChanged: handleShapeStyleChange
226
- }), /*#__PURE__*/_react["default"].createElement(_ColorField["default"], {
248
+ defaultValue: activeTool.settings.lineArrow["default"],
249
+ valueChanged: handleShapeStyleChange,
250
+ values: activeTool.settings.lineArrow.values
251
+ }), 'strokeColor' in activeTool.settings && /*#__PURE__*/_react["default"].createElement(_ColorField["default"], {
227
252
  selectedSettings: selectedSettings,
228
253
  setSelectedSettings: setSelectedSettings,
229
254
  title: "Couleur du trait",
230
255
  disabled: disabled,
231
256
  field: "style.strokeColor",
232
- value: (_defaultConf$style5 = defaultConf.style) === null || _defaultConf$style5 === void 0 ? void 0 : _defaultConf$style5.strokeColor,
233
- valueChanged: handleShapeStyleChange
234
- }), activeTool !== _Shapes.ShapeEnum.text && activeTool !== _Shapes.ShapeEnum.brush && activeTool !== _Shapes.ShapeEnum.line && /*#__PURE__*/_react["default"].createElement(_ColorField["default"], {
257
+ value: activeTool.settings.strokeColor["default"],
258
+ valueChanged: handleShapeStyleChange,
259
+ values: activeTool.settings.strokeColor.values
260
+ }), 'fillColor' in activeTool.settings && /*#__PURE__*/_react["default"].createElement(_ColorField["default"], {
235
261
  selectedSettings: selectedSettings,
236
262
  setSelectedSettings: setSelectedSettings,
237
263
  title: "Couleur de fond",
238
264
  disabled: disabled,
239
265
  field: "style.fillColor",
240
- value: (_defaultConf$style6 = defaultConf.style) === null || _defaultConf$style6 === void 0 ? void 0 : _defaultConf$style6.fillColor,
241
- valueChanged: handleShapeStyleChange
242
- }), /*#__PURE__*/_react["default"].createElement(_RangeField["default"], {
266
+ value: activeTool.settings.fillColor["default"],
267
+ valueChanged: handleShapeStyleChange,
268
+ values: activeTool.settings.fillColor.values
269
+ }), 'opacity' in activeTool.settings && /*#__PURE__*/_react["default"].createElement(_RangeField["default"], {
243
270
  selectedSettings: selectedSettings,
244
271
  setSelectedSettings: setSelectedSettings,
245
272
  title: "Opacit\xE9",
246
- min: 0,
247
- max: 100,
248
- step: 1,
273
+ min: activeTool.settings.opacity.min,
274
+ max: activeTool.settings.opacity.max,
275
+ step: activeTool.settings.opacity.step,
249
276
  unity: "%",
250
277
  disabled: disabled,
251
278
  field: "style.globalAlpha",
252
- value: (_defaultConf$style7 = defaultConf.style) === null || _defaultConf$style7 === void 0 ? void 0 : _defaultConf$style7.globalAlpha,
279
+ value: activeTool.settings.opacity["default"],
253
280
  valueChanged: handleShapeStyleChange
254
281
  })), /*#__PURE__*/_react["default"].createElement(StyledSeparator, null), layersManipulation && /*#__PURE__*/_react["default"].createElement(_LayoutButton["default"], {
255
282
  layersManipulation: layersManipulation,
@@ -27,25 +27,25 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
27
27
 
28
28
  var StyledEditBox = /*#__PURE__*/(0, _react2.styled)("div")({
29
29
  name: "StyledEditBox",
30
- "class": "s1unz6yq",
30
+ "class": "se8ufj4",
31
31
  vars: {
32
- "s1unz6yq-0": [function (_ref) {
32
+ "se8ufj4-0": [function (_ref) {
33
33
  var transform = _ref.transform;
34
34
  return transform;
35
35
  }],
36
- "s1unz6yq-1": [function (_ref2) {
36
+ "se8ufj4-1": [function (_ref2) {
37
37
  var color = _ref2.color;
38
38
  return color;
39
39
  }],
40
- "s1unz6yq-2": [function (_ref3) {
40
+ "se8ufj4-2": [function (_ref3) {
41
41
  var padding = _ref3.padding;
42
42
  return padding;
43
43
  }, "px"],
44
- "s1unz6yq-3": [function (_ref4) {
44
+ "se8ufj4-3": [function (_ref4) {
45
45
  var fontsize = _ref4.fontsize;
46
46
  return fontsize;
47
47
  }, "px"],
48
- "s1unz6yq-5": [function (_ref5) {
48
+ "se8ufj4-5": [function (_ref5) {
49
49
  var fontfamily = _ref5.fontfamily;
50
50
  return fontfamily;
51
51
  }]
@@ -18,12 +18,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
18
18
  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; }
19
19
 
20
20
  var LoadFileTool = function LoadFileTool(_ref) {
21
+ var _type$lib;
22
+
21
23
  var _ref$disabled = _ref.disabled,
22
24
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
23
25
  _ref$withText = _ref.withText,
24
26
  withText = _ref$withText === void 0 ? false : _ref$withText,
25
27
  loadFile = _ref.loadFile,
26
- lib = _ref.lib,
28
+ type = _ref.type,
27
29
  img = _ref.img,
28
30
  accept = _ref.accept;
29
31
  var inputRef = (0, _react.useRef)(null);
@@ -47,9 +49,9 @@ var LoadFileTool = function LoadFileTool(_ref) {
47
49
  onClick: handleClick,
48
50
  onChange: handleChange,
49
51
  accept: accept,
50
- title: lib,
52
+ title: (_type$lib = type.lib) !== null && _type$lib !== void 0 ? _type$lib : type.type,
51
53
  icon: img,
52
- children: withText ? lib : undefined,
54
+ children: withText ? type.lib : undefined,
53
55
  disabled: disabled
54
56
  });
55
57
  };