@yorab/react-paint 0.6.3 → 0.6.6

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 (56) hide show
  1. package/README.md +2 -1
  2. package/dist/components/App.js +235 -387
  3. package/dist/components/Canvas.js +104 -114
  4. package/dist/components/common/Button.js +41 -50
  5. package/dist/components/common/Loading.js +21 -33
  6. package/dist/components/common/Modal.js +18 -17
  7. package/dist/components/common/Panel.js +20 -24
  8. package/dist/components/common/Snackbar.js +27 -34
  9. package/dist/components/settings/ColorField.js +59 -68
  10. package/dist/components/settings/DeleteButton.js +10 -9
  11. package/dist/components/settings/FontFamilyField.js +25 -20
  12. package/dist/components/settings/LayoutButton.js +11 -9
  13. package/dist/components/settings/Layouts.js +93 -103
  14. package/dist/components/settings/LineArrowField.js +25 -22
  15. package/dist/components/settings/LineTypeField.js +23 -20
  16. package/dist/components/settings/PointsNumberField.js +14 -13
  17. package/dist/components/settings/RangeField.js +35 -47
  18. package/dist/components/settings/SelectField.js +34 -43
  19. package/dist/components/settings/SettingsBar.js +95 -118
  20. package/dist/components/settings/ToggleField.js +18 -25
  21. package/dist/components/toolbox/EditTextBox.js +65 -40
  22. package/dist/components/toolbox/LoadFileTool.js +19 -21
  23. package/dist/components/toolbox/MenuGroup.js +60 -96
  24. package/dist/components/toolbox/PictureUrlInput.js +33 -62
  25. package/dist/components/toolbox/Tool.js +13 -13
  26. package/dist/components/toolbox/Toolbar.js +74 -106
  27. package/dist/components/toolbox/ToolbarGroup.js +41 -57
  28. package/dist/constants/icons.js +43 -43
  29. package/dist/constants/shapes.js +6 -6
  30. package/dist/constants/snackbar.js +3 -3
  31. package/dist/constants/style.js +13 -13
  32. package/dist/constants/tools.js +80 -80
  33. package/dist/hooks/useComponent.js +12 -19
  34. package/dist/hooks/useDoubleClick.js +12 -12
  35. package/dist/hooks/useDrag.js +24 -32
  36. package/dist/hooks/useDrawableCanvas.js +86 -100
  37. package/dist/hooks/useKeyboard.js +26 -36
  38. package/dist/hooks/useResizeObserver.js +18 -16
  39. package/dist/hooks/useShapes.js +91 -143
  40. package/dist/hooks/useSnackbar.js +28 -58
  41. package/dist/styles.css +55 -55
  42. package/dist/types/Mode.js +1 -1
  43. package/dist/types/Shapes.js +1 -1
  44. package/dist/types/keyboard.js +2 -2
  45. package/dist/types/tools.js +1 -1
  46. package/dist/utils/data.js +91 -107
  47. package/dist/utils/draw.js +116 -146
  48. package/dist/utils/file.js +69 -119
  49. package/dist/utils/intersect.js +57 -97
  50. package/dist/utils/selection.js +12 -12
  51. package/dist/utils/shapeData.js +33 -51
  52. package/dist/utils/string.js +10 -16
  53. package/dist/utils/style.js +1 -1
  54. package/dist/utils/toolbar.js +26 -38
  55. package/dist/utils/transform.js +183 -239
  56. package/package.json +5 -4
@@ -2,16 +2,10 @@
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
 
5
- var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
10
- exports["default"] = void 0;
11
-
12
- var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
13
-
14
- var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
8
+ exports.default = void 0;
15
9
 
16
10
  var _react = _interopRequireWildcard(require("react"));
17
11
 
@@ -21,77 +15,54 @@ var _Modal = _interopRequireDefault(require("../common/Modal"));
21
15
 
22
16
  var _react2 = require("@linaria/react");
23
17
 
24
- 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); }
18
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
25
19
 
26
- 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; }
20
+ 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; }
27
21
 
28
- var StyledInputModal = /*#__PURE__*/(0, _react2.styled)(_Modal["default"])({
22
+ const StyledInputModal = /*#__PURE__*/(0, _react2.styled)(_Modal.default)({
29
23
  name: "StyledInputModal",
30
- "class": "s1rncfwv"
24
+ class: "s95bkm9"
31
25
  });
32
26
 
33
- var PictureUrlModal = function PictureUrlModal(_ref) {
34
- var togglePictureUrlModal = _ref.togglePictureUrlModal,
35
- addPicture = _ref.addPicture;
36
- var pictureUrlInputRef = (0, _react.useRef)(null);
37
-
38
- var addPictureFromUrl = /*#__PURE__*/function () {
39
- var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
40
- var _pictureUrlInputRef$c;
41
-
42
- var url;
43
- return _regenerator["default"].wrap(function _callee$(_context) {
44
- while (1) {
45
- switch (_context.prev = _context.next) {
46
- case 0:
47
- e.preventDefault();
48
- url = (_pictureUrlInputRef$c = pictureUrlInputRef.current) === null || _pictureUrlInputRef$c === void 0 ? void 0 : _pictureUrlInputRef$c.value;
49
-
50
- if (!url) {
51
- _context.next = 6;
52
- break;
53
- }
54
-
55
- _context.next = 5;
56
- return addPicture(url);
57
-
58
- case 5:
59
- togglePictureUrlModal();
60
-
61
- case 6:
62
- return _context.abrupt("return");
63
-
64
- case 7:
65
- case "end":
66
- return _context.stop();
67
- }
68
- }
69
- }, _callee);
70
- }));
71
-
72
- return function addPictureFromUrl(_x) {
73
- return _ref2.apply(this, arguments);
74
- };
75
- }();
76
-
77
- (0, _react.useEffect)(function () {
27
+ const PictureUrlModal = _ref => {
28
+ let {
29
+ togglePictureUrlModal,
30
+ addPicture
31
+ } = _ref;
32
+ const pictureUrlInputRef = (0, _react.useRef)(null);
33
+
34
+ const addPictureFromUrl = async e => {
35
+ var _pictureUrlInputRef$c;
36
+
37
+ e.preventDefault();
38
+ const url = (_pictureUrlInputRef$c = pictureUrlInputRef.current) === null || _pictureUrlInputRef$c === void 0 ? void 0 : _pictureUrlInputRef$c.value;
39
+
40
+ if (url) {
41
+ await addPicture(url);
42
+ togglePictureUrlModal();
43
+ }
44
+
45
+ return;
46
+ };
47
+
48
+ (0, _react.useEffect)(() => {
78
49
  if (!pictureUrlInputRef.current) return;
79
50
  pictureUrlInputRef.current.focus();
80
51
  }, []);
81
- return /*#__PURE__*/_react["default"].createElement(StyledInputModal, {
52
+ return /*#__PURE__*/_react.default.createElement(StyledInputModal, {
82
53
  onClose: togglePictureUrlModal
83
- }, /*#__PURE__*/_react["default"].createElement("form", {
54
+ }, /*#__PURE__*/_react.default.createElement("form", {
84
55
  onSubmit: addPictureFromUrl
85
- }, /*#__PURE__*/_react["default"].createElement("label", null, "URL\xA0", /*#__PURE__*/_react["default"].createElement("input", {
56
+ }, /*#__PURE__*/_react.default.createElement("label", null, "URL\xA0", /*#__PURE__*/_react.default.createElement("input", {
86
57
  type: "text",
87
58
  ref: pictureUrlInputRef
88
- })), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
59
+ })), /*#__PURE__*/_react.default.createElement(_Button.default, {
89
60
  onClick: togglePictureUrlModal
90
- }, "Annuler"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
61
+ }, "Annuler"), /*#__PURE__*/_react.default.createElement(_Button.default, {
91
62
  type: "submit",
92
63
  selected: true
93
64
  }, "Ajouter")));
94
65
  };
95
66
 
96
67
  var _default = PictureUrlModal;
97
- exports["default"] = _default;
68
+ exports.default = _default;
@@ -5,29 +5,29 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports["default"] = void 0;
8
+ exports.default = void 0;
9
9
 
10
10
  var _react = _interopRequireDefault(require("react"));
11
11
 
12
12
  var _Button = _interopRequireDefault(require("../common/Button"));
13
13
 
14
- var Tool = function Tool(_ref) {
14
+ const Tool = _ref => {
15
15
  var _type$label;
16
16
 
17
- var type = _ref.type,
18
- img = _ref.img,
19
- isActive = _ref.isActive,
20
- _ref$withText = _ref.withText,
21
- withText = _ref$withText === void 0 ? false : _ref$withText,
22
- _ref$disabled = _ref.disabled,
23
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
24
- setActive = _ref.setActive;
17
+ let {
18
+ type,
19
+ img,
20
+ isActive,
21
+ withText = false,
22
+ disabled = false,
23
+ setActive
24
+ } = _ref;
25
25
 
26
- var handleClick = function handleClick() {
26
+ const handleClick = () => {
27
27
  setActive(type);
28
28
  };
29
29
 
30
- return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
30
+ return /*#__PURE__*/_react.default.createElement(_Button.default, {
31
31
  disabled: disabled,
32
32
  selected: isActive,
33
33
  onClick: handleClick,
@@ -38,4 +38,4 @@ var Tool = function Tool(_ref) {
38
38
  };
39
39
 
40
40
  var _default = Tool;
41
- exports["default"] = _default;
41
+ exports.default = _default;
@@ -2,14 +2,10 @@
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
 
5
- var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
10
- exports["default"] = void 0;
11
-
12
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
8
+ exports.default = void 0;
13
9
 
14
10
  var _icons = require("../../constants/icons");
15
11
 
@@ -37,24 +33,24 @@ var _fp = _interopRequireDefault(require("lodash/fp"));
37
33
 
38
34
  var _tools = require("../../constants/tools");
39
35
 
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); }
36
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
41
37
 
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; }
38
+ 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; }
43
39
 
44
- var TOOL_WIDTH = 40;
45
- var StyledShrinkableTools = /*#__PURE__*/(0, _react2.styled)("div")({
40
+ const TOOL_WIDTH = 40;
41
+ const StyledShrinkableTools = /*#__PURE__*/(0, _react2.styled)("div")({
46
42
  name: "StyledShrinkableTools",
47
- "class": "s1gorp95"
43
+ class: "so6hnjf"
48
44
  });
49
- var StyledToolbox = /*#__PURE__*/(0, _react2.styled)("div")({
45
+ const StyledToolbox = /*#__PURE__*/(0, _react2.styled)("div")({
50
46
  name: "StyledToolbox",
51
- "class": "s1ivsaf6"
47
+ class: "s1c1dllr"
52
48
  });
53
- var StyledToolsModal = /*#__PURE__*/(0, _react2.styled)(_Modal["default"])({
49
+ const StyledToolsModal = /*#__PURE__*/(0, _react2.styled)(_Modal.default)({
54
50
  name: "StyledToolsModal",
55
- "class": "sv0y70r"
51
+ class: "s1g032mh"
56
52
  });
57
- var TOOLBAR_STRUCTURE = [{
53
+ const TOOLBAR_STRUCTURE = [{
58
54
  title: 'brush',
59
55
  toolsType: [_Shapes.ShapeEnum.brush],
60
56
  vertical: false
@@ -68,129 +64,103 @@ var TOOLBAR_STRUCTURE = [{
68
64
  vertical: false
69
65
  }, _Shapes.ShapeEnum.text];
70
66
 
71
- var Toolbar = function Toolbar(_ref) {
72
- var width = _ref.width,
73
- _ref$disabled = _ref.disabled,
74
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
75
- activeTool = _ref.activeTool,
76
- _ref$hasActionToUndo = _ref.hasActionToUndo,
77
- hasActionToUndo = _ref$hasActionToUndo === void 0 ? false : _ref$hasActionToUndo,
78
- _ref$hasActionToRedo = _ref.hasActionToRedo,
79
- hasActionToRedo = _ref$hasActionToRedo === void 0 ? false : _ref$hasActionToRedo,
80
- _ref$hasActionToClear = _ref.hasActionToClear,
81
- hasActionToClear = _ref$hasActionToClear === void 0 ? false : _ref$hasActionToClear,
82
- withLoadAndSave = _ref.withLoadAndSave,
83
- withExport = _ref.withExport,
84
- clearCanvas = _ref.clearCanvas,
85
- setActiveToolFromProps = _ref.setActiveTool,
86
- undoAction = _ref.undoAction,
87
- redoAction = _ref.redoAction,
88
- addPicture = _ref.addPicture,
89
- loadFile = _ref.loadFile,
90
- saveFile = _ref.saveFile,
91
- exportCanvasInFile = _ref.exportCanvasInFile,
92
- availableTools = _ref.availableTools,
93
- withUrlPicture = _ref.withUrlPicture,
94
- withUploadPicture = _ref.withUploadPicture;
95
- var currentStructure = (0, _toolbar.getCurrentStructure)(availableTools, TOOLBAR_STRUCTURE);
96
- var fullToolbarSize = (5 + currentStructure.length) * TOOL_WIDTH;
97
- var withMenuToolbarSize = (2 + currentStructure.length) * TOOL_WIDTH;
98
-
99
- var _useState = (0, _react.useState)(false),
100
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
101
- isMenuOpen = _useState2[0],
102
- setIsMenuOpen = _useState2[1];
103
-
104
- var _useState3 = (0, _react.useState)(false),
105
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
106
- isPictureUrlModalOpen = _useState4[0],
107
- setIsPictureUrlModalOpen = _useState4[1];
108
-
109
- var _useState5 = (0, _react.useState)(width < fullToolbarSize),
110
- _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
111
- actionsInMenu = _useState6[0],
112
- setActionsInMenu = _useState6[1];
113
-
114
- var _useState7 = (0, _react.useState)(width < withMenuToolbarSize),
115
- _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
116
- toolsInMenu = _useState8[0],
117
- setToolsInMenu = _useState8[1];
118
-
119
- var toggleTools = function toggleTools() {
120
- setIsMenuOpen(function (prev) {
121
- return !prev;
122
- });
67
+ const Toolbar = _ref => {
68
+ let {
69
+ width,
70
+ disabled = false,
71
+ activeTool,
72
+ hasActionToUndo = false,
73
+ hasActionToRedo = false,
74
+ hasActionToClear = false,
75
+ withLoadAndSave,
76
+ withExport,
77
+ clearCanvas,
78
+ setActiveTool: setActiveToolFromProps,
79
+ undoAction,
80
+ redoAction,
81
+ addPicture,
82
+ loadFile,
83
+ saveFile,
84
+ exportCanvasInFile,
85
+ availableTools,
86
+ withUrlPicture,
87
+ withUploadPicture
88
+ } = _ref;
89
+ const currentStructure = (0, _toolbar.getCurrentStructure)(availableTools, TOOLBAR_STRUCTURE);
90
+ const fullToolbarSize = (5 + currentStructure.length) * TOOL_WIDTH;
91
+ const withMenuToolbarSize = (2 + currentStructure.length) * TOOL_WIDTH;
92
+ const [isMenuOpen, setIsMenuOpen] = (0, _react.useState)(false);
93
+ const [isPictureUrlModalOpen, setIsPictureUrlModalOpen] = (0, _react.useState)(false);
94
+ const [actionsInMenu, setActionsInMenu] = (0, _react.useState)(width < fullToolbarSize);
95
+ const [toolsInMenu, setToolsInMenu] = (0, _react.useState)(width < withMenuToolbarSize);
96
+
97
+ const toggleTools = () => {
98
+ setIsMenuOpen(prev => !prev);
123
99
  };
124
100
 
125
- var openPictureUrlModal = function openPictureUrlModal() {
101
+ const openPictureUrlModal = () => {
126
102
  setIsPictureUrlModalOpen(true);
127
103
  };
128
104
 
129
- var togglePictureUrlModal = function togglePictureUrlModal() {
130
- setIsPictureUrlModalOpen(function (prev) {
131
- return !prev;
132
- });
105
+ const togglePictureUrlModal = () => {
106
+ setIsPictureUrlModalOpen(prev => !prev);
133
107
  };
134
108
 
135
- var setActiveTool = function setActiveTool(tool) {
109
+ const setActiveTool = tool => {
136
110
  setActiveToolFromProps(tool);
137
111
  setIsMenuOpen(false);
138
112
  };
139
113
 
140
- var setActiveToolFromId = function setActiveToolFromId(toolId) {
114
+ const setActiveToolFromId = toolId => {
141
115
  var _availableTools$find;
142
116
 
143
- setActiveTool((_availableTools$find = availableTools.find(function (tool) {
144
- return tool.id === toolId;
145
- })) !== null && _availableTools$find !== void 0 ? _availableTools$find : activeTool);
117
+ setActiveTool((_availableTools$find = availableTools.find(tool => tool.id === toolId)) !== null && _availableTools$find !== void 0 ? _availableTools$find : activeTool);
146
118
  };
147
119
 
148
- (0, _react.useEffect)(function () {
120
+ (0, _react.useEffect)(() => {
149
121
  setActionsInMenu(width < fullToolbarSize);
150
122
  setToolsInMenu(width < withMenuToolbarSize);
151
123
  }, [width, fullToolbarSize, withMenuToolbarSize]);
152
- var isAnyToolSelected = _fp["default"].find({
124
+ const isAnyToolSelected = _fp.default.find({
153
125
  type: activeTool
154
126
  }, availableTools) !== undefined;
155
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(StyledToolbox, null, /*#__PURE__*/_react["default"].createElement(StyledShrinkableTools, null, /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
127
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(StyledToolbox, null, /*#__PURE__*/_react.default.createElement(StyledShrinkableTools, null, /*#__PURE__*/_react.default.createElement(_Tool.default, {
156
128
  type: _tools.SELECTION_TOOL,
157
129
  disabled: disabled,
158
130
  img: _tools.SELECTION_TOOL.icon,
159
131
  isActive: activeTool.id === _tools.SELECTION_TOOL.id,
160
132
  setActive: setActiveTool
161
- }), toolsInMenu ? /*#__PURE__*/_react["default"].createElement(_Button["default"], {
133
+ }), toolsInMenu ? /*#__PURE__*/_react.default.createElement(_Button.default, {
162
134
  disabled: disabled,
163
135
  onClick: toggleTools,
164
136
  title: "Toggle tools",
165
137
  icon: _icons.shapesIcon,
166
138
  selected: isAnyToolSelected
167
- }) : currentStructure.map(function (group, i) {
168
- return /*#__PURE__*/_react["default"].createElement(_ToolbarGroup["default"], {
169
- disabled: disabled,
170
- key: i,
171
- activeTool: activeTool,
172
- group: group,
173
- setActiveToolFromId: setActiveToolFromId
174
- });
175
- })), !actionsInMenu && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
139
+ }) : currentStructure.map((group, i) => /*#__PURE__*/_react.default.createElement(_ToolbarGroup.default, {
140
+ disabled: disabled,
141
+ key: i,
142
+ activeTool: activeTool,
143
+ group: group,
144
+ setActiveToolFromId: setActiveToolFromId
145
+ }))), !actionsInMenu && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Tool.default, {
176
146
  type: _tools.UNDO_TOOL,
177
147
  disabled: disabled || !hasActionToUndo,
178
148
  img: _tools.UNDO_TOOL.icon,
179
149
  isActive: activeTool.id === _tools.UNDO_TOOL.id,
180
150
  setActive: undoAction
181
- }), /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
151
+ }), /*#__PURE__*/_react.default.createElement(_Tool.default, {
182
152
  type: _tools.REDO_TOOL,
183
153
  disabled: disabled || !hasActionToRedo,
184
154
  img: _tools.REDO_TOOL.icon,
185
155
  isActive: activeTool.id === _tools.REDO_TOOL.id,
186
156
  setActive: redoAction
187
- }), /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
157
+ }), /*#__PURE__*/_react.default.createElement(_Tool.default, {
188
158
  type: _tools.CLEAR_TOOL,
189
159
  disabled: disabled || !hasActionToClear,
190
160
  img: _tools.CLEAR_TOOL.icon,
191
161
  isActive: activeTool.id === _tools.CLEAR_TOOL.id,
192
162
  setActive: clearCanvas
193
- })), /*#__PURE__*/_react["default"].createElement(_MenuGroup["default"], {
163
+ })), /*#__PURE__*/_react.default.createElement(_MenuGroup.default, {
194
164
  withActionsInMenu: actionsInMenu,
195
165
  disabled: disabled,
196
166
  vertical: true,
@@ -215,23 +185,21 @@ var Toolbar = function Toolbar(_ref) {
215
185
  undoAction: undoAction,
216
186
  redoAction: redoAction,
217
187
  clearCanvas: clearCanvas
218
- })), isMenuOpen && /*#__PURE__*/_react["default"].createElement(StyledToolsModal, {
188
+ })), isMenuOpen && /*#__PURE__*/_react.default.createElement(StyledToolsModal, {
219
189
  onClose: toggleTools
220
- }, availableTools.map(function (toolType, index) {
221
- return toolType.type === _Shapes.ShapeEnum.picture ? null : /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
222
- disabled: disabled,
223
- key: index,
224
- type: toolType,
225
- img: toolType.icon,
226
- withText: false,
227
- isActive: activeTool.id === toolType.id,
228
- setActive: setActiveTool
229
- });
230
- })), isPictureUrlModalOpen && /*#__PURE__*/_react["default"].createElement(_PictureUrlInput["default"], {
190
+ }, availableTools.map((toolType, index) => toolType.type === _Shapes.ShapeEnum.picture ? null : /*#__PURE__*/_react.default.createElement(_Tool.default, {
191
+ disabled: disabled,
192
+ key: index,
193
+ type: toolType,
194
+ img: toolType.icon,
195
+ withText: false,
196
+ isActive: activeTool.id === toolType.id,
197
+ setActive: setActiveTool
198
+ }))), isPictureUrlModalOpen && /*#__PURE__*/_react.default.createElement(_PictureUrlInput.default, {
231
199
  togglePictureUrlModal: togglePictureUrlModal,
232
200
  addPicture: addPicture
233
201
  }));
234
202
  };
235
203
 
236
204
  var _default = Toolbar;
237
- exports["default"] = _default;
205
+ exports.default = _default;
@@ -2,14 +2,10 @@
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
 
5
- var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
10
- exports["default"] = void 0;
11
-
12
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
8
+ exports.default = void 0;
13
9
 
14
10
  var _fp = _interopRequireDefault(require("lodash/fp"));
15
11
 
@@ -23,63 +19,53 @@ var _react2 = require("@linaria/react");
23
19
 
24
20
  var _Tool = _interopRequireDefault(require("./Tool"));
25
21
 
26
- 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); }
22
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
27
23
 
28
- 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; }
24
+ 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; }
29
25
 
30
- var StyledPanel = /*#__PURE__*/(0, _react2.styled)(_Panel["default"])({
26
+ const StyledPanel = /*#__PURE__*/(0, _react2.styled)(_Panel.default)({
31
27
  name: "StyledPanel",
32
- "class": "s3kynji"
28
+ class: "s1bvz4xj"
33
29
  });
34
- var StyledRelative = /*#__PURE__*/(0, _react2.styled)("div")({
30
+ const StyledRelative = /*#__PURE__*/(0, _react2.styled)("div")({
35
31
  name: "StyledRelative",
36
- "class": "s1614rl3"
32
+ class: "siejlch"
37
33
  });
38
34
 
39
- var ToolbarGroup = function ToolbarGroup(_ref) {
35
+ const ToolbarGroup = _ref => {
40
36
  var _group$toolsType, _ref2;
41
37
 
42
- var activeTool = _ref.activeTool,
43
- alignment = _ref.alignment,
44
- group = _ref.group,
45
- _ref$disabled = _ref.disabled,
46
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
47
- setActiveToolFromId = _ref.setActiveToolFromId;
48
-
49
- var _useState = (0, _react.useState)(false),
50
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
51
- isOpen = _useState2[0],
52
- setIsOpen = _useState2[1];
53
-
54
- var _useTransition = (0, _react.useTransition)(),
55
- _useTransition2 = (0, _slicedToArray2["default"])(_useTransition, 2),
56
- startTransition = _useTransition2[1];
57
-
58
- var _useState3 = (0, _react.useState)(undefined),
59
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
60
- localActiveTool = _useState4[0],
61
- setLocalActiveTool = _useState4[1];
62
-
63
- var setActiveTool = function setActiveTool(tool) {
38
+ let {
39
+ activeTool,
40
+ alignment,
41
+ group,
42
+ disabled = false,
43
+ setActiveToolFromId
44
+ } = _ref;
45
+ const [isOpen, setIsOpen] = (0, _react.useState)(false);
46
+ const [, startTransition] = (0, _react.useTransition)();
47
+ const [localActiveTool, setLocalActiveTool] = (0, _react.useState)(undefined);
48
+
49
+ const setActiveTool = tool => {
64
50
  setLocalActiveTool(tool);
65
51
  setActiveToolFromId(tool.id);
66
52
  };
67
53
 
68
- (0, _react.useEffect)(function () {
54
+ (0, _react.useEffect)(() => {
69
55
  if (!isOpen) return;
70
56
 
71
- var closePanel = function closePanel() {
57
+ const closePanel = () => {
72
58
  setIsOpen(false);
73
59
  };
74
60
 
75
61
  document.addEventListener('click', closePanel);
76
- return function () {
62
+ return () => {
77
63
  document.removeEventListener('click', closePanel);
78
64
  };
79
65
  }, [isOpen]);
80
66
 
81
67
  if ('type' in group) {
82
- return /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
68
+ return /*#__PURE__*/_react.default.createElement(_Tool.default, {
83
69
  disabled: disabled,
84
70
  type: group,
85
71
  img: group.icon,
@@ -88,10 +74,10 @@ var ToolbarGroup = function ToolbarGroup(_ref) {
88
74
  });
89
75
  }
90
76
 
91
- if (_fp["default"].isEmpty(group.toolsType)) return null;
77
+ if (_fp.default.isEmpty(group.toolsType)) return null;
92
78
 
93
79
  if (((_group$toolsType = group.toolsType) === null || _group$toolsType === void 0 ? void 0 : _group$toolsType.length) === 1) {
94
- return /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
80
+ return /*#__PURE__*/_react.default.createElement(_Tool.default, {
95
81
  disabled: disabled,
96
82
  type: group.toolsType[0],
97
83
  img: group.toolsType[0].icon,
@@ -100,38 +86,36 @@ var ToolbarGroup = function ToolbarGroup(_ref) {
100
86
  });
101
87
  }
102
88
 
103
- var isActive = _fp["default"].find({
89
+ const isActive = _fp.default.find({
104
90
  type: activeTool.type
105
91
  }, group === null || group === void 0 ? void 0 : group.toolsType) !== undefined;
106
- var groupIcon = (_ref2 = localActiveTool ? localActiveTool.icon : group.toolsType && group.toolsType[0] && group.toolsType[0].icon) !== null && _ref2 !== void 0 ? _ref2 : group.title;
92
+ const groupIcon = (_ref2 = localActiveTool ? localActiveTool.icon : group.toolsType && group.toolsType[0] && group.toolsType[0].icon) !== null && _ref2 !== void 0 ? _ref2 : group.title;
107
93
 
108
- var openPanel = function openPanel() {
94
+ const openPanel = () => {
109
95
  if (localActiveTool) setActiveToolFromId(localActiveTool.id);else group.toolsType && group.toolsType[0] && setActiveTool(group.toolsType[0]);
110
- startTransition(function () {
96
+ startTransition(() => {
111
97
  setIsOpen(true);
112
98
  });
113
99
  };
114
100
 
115
- return /*#__PURE__*/_react["default"].createElement(StyledRelative, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
101
+ return /*#__PURE__*/_react.default.createElement(StyledRelative, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
116
102
  selected: isActive,
117
103
  title: group.title,
118
104
  disabled: disabled,
119
105
  onClick: openPanel,
120
106
  icon: groupIcon
121
- }), isOpen && /*#__PURE__*/_react["default"].createElement(StyledPanel, {
107
+ }), isOpen && /*#__PURE__*/_react.default.createElement(StyledPanel, {
122
108
  vertical: group.vertical,
123
109
  alignment: alignment
124
- }, group.toolsType.map(function (toolType, i) {
125
- return /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
126
- disabled: disabled,
127
- key: i,
128
- type: toolType,
129
- img: toolType.icon,
130
- isActive: activeTool.id === toolType.id,
131
- setActive: setActiveTool
132
- });
133
- })));
110
+ }, group.toolsType.map((toolType, i) => /*#__PURE__*/_react.default.createElement(_Tool.default, {
111
+ disabled: disabled,
112
+ key: i,
113
+ type: toolType,
114
+ img: toolType.icon,
115
+ isActive: activeTool.id === toolType.id,
116
+ setActive: setActiveTool
117
+ }))));
134
118
  };
135
119
 
136
120
  var _default = ToolbarGroup;
137
- exports["default"] = _default;
121
+ exports.default = _default;