@yorab/react-paint 0.6.5 → 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.
- package/README.md +2 -0
- package/dist/components/App.js +224 -384
- package/dist/components/Canvas.js +104 -114
- package/dist/components/common/Button.js +41 -50
- package/dist/components/common/Loading.js +21 -33
- package/dist/components/common/Modal.js +18 -17
- package/dist/components/common/Panel.js +20 -24
- package/dist/components/common/Snackbar.js +27 -34
- package/dist/components/settings/ColorField.js +59 -68
- package/dist/components/settings/DeleteButton.js +10 -9
- package/dist/components/settings/FontFamilyField.js +24 -19
- package/dist/components/settings/LayoutButton.js +11 -9
- package/dist/components/settings/Layouts.js +93 -103
- package/dist/components/settings/LineArrowField.js +25 -22
- package/dist/components/settings/LineTypeField.js +23 -20
- package/dist/components/settings/PointsNumberField.js +14 -13
- package/dist/components/settings/RangeField.js +35 -47
- package/dist/components/settings/SelectField.js +34 -43
- package/dist/components/settings/SettingsBar.js +95 -118
- package/dist/components/settings/ToggleField.js +18 -25
- package/dist/components/toolbox/EditTextBox.js +53 -42
- package/dist/components/toolbox/LoadFileTool.js +19 -21
- package/dist/components/toolbox/MenuGroup.js +60 -96
- package/dist/components/toolbox/PictureUrlInput.js +33 -62
- package/dist/components/toolbox/Tool.js +13 -13
- package/dist/components/toolbox/Toolbar.js +74 -106
- package/dist/components/toolbox/ToolbarGroup.js +41 -57
- package/dist/constants/icons.js +43 -43
- package/dist/constants/shapes.js +6 -6
- package/dist/constants/snackbar.js +3 -3
- package/dist/constants/style.js +13 -13
- package/dist/constants/tools.js +80 -80
- package/dist/hooks/useComponent.js +12 -19
- package/dist/hooks/useDoubleClick.js +12 -12
- package/dist/hooks/useDrag.js +24 -32
- package/dist/hooks/useDrawableCanvas.js +86 -100
- package/dist/hooks/useKeyboard.js +26 -36
- package/dist/hooks/useResizeObserver.js +18 -16
- package/dist/hooks/useShapes.js +91 -143
- package/dist/hooks/useSnackbar.js +28 -58
- package/dist/styles.css +55 -55
- package/dist/types/Mode.js +1 -1
- package/dist/types/Shapes.js +1 -1
- package/dist/types/keyboard.js +2 -2
- package/dist/types/tools.js +1 -1
- package/dist/utils/data.js +91 -107
- package/dist/utils/draw.js +116 -146
- package/dist/utils/file.js +69 -119
- package/dist/utils/intersect.js +57 -97
- package/dist/utils/selection.js +12 -12
- package/dist/utils/shapeData.js +33 -51
- package/dist/utils/string.js +10 -16
- package/dist/utils/style.js +1 -1
- package/dist/utils/toolbar.js +26 -38
- package/dist/utils/transform.js +183 -239
- package/package.json +6 -5
- package/Changelog.md +0 -123
|
@@ -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
|
|
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
|
|
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 ||
|
|
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
|
-
|
|
22
|
+
const StyledInputModal = /*#__PURE__*/(0, _react2.styled)(_Modal.default)({
|
|
29
23
|
name: "StyledInputModal",
|
|
30
|
-
|
|
24
|
+
class: "s95bkm9"
|
|
31
25
|
});
|
|
32
26
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
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
|
|
52
|
+
return /*#__PURE__*/_react.default.createElement(StyledInputModal, {
|
|
82
53
|
onClose: togglePictureUrlModal
|
|
83
|
-
}, /*#__PURE__*/_react
|
|
54
|
+
}, /*#__PURE__*/_react.default.createElement("form", {
|
|
84
55
|
onSubmit: addPictureFromUrl
|
|
85
|
-
}, /*#__PURE__*/_react
|
|
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
|
|
59
|
+
})), /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
89
60
|
onClick: togglePictureUrlModal
|
|
90
|
-
}, "Annuler"), /*#__PURE__*/_react
|
|
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
|
|
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
|
|
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
|
-
|
|
14
|
+
const Tool = _ref => {
|
|
15
15
|
var _type$label;
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
17
|
+
let {
|
|
18
|
+
type,
|
|
19
|
+
img,
|
|
20
|
+
isActive,
|
|
21
|
+
withText = false,
|
|
22
|
+
disabled = false,
|
|
23
|
+
setActive
|
|
24
|
+
} = _ref;
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
const handleClick = () => {
|
|
27
27
|
setActive(type);
|
|
28
28
|
};
|
|
29
29
|
|
|
30
|
-
return /*#__PURE__*/_react
|
|
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
|
|
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
|
|
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
|
|
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 ||
|
|
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
|
-
|
|
45
|
-
|
|
40
|
+
const TOOL_WIDTH = 40;
|
|
41
|
+
const StyledShrinkableTools = /*#__PURE__*/(0, _react2.styled)("div")({
|
|
46
42
|
name: "StyledShrinkableTools",
|
|
47
|
-
|
|
43
|
+
class: "so6hnjf"
|
|
48
44
|
});
|
|
49
|
-
|
|
45
|
+
const StyledToolbox = /*#__PURE__*/(0, _react2.styled)("div")({
|
|
50
46
|
name: "StyledToolbox",
|
|
51
|
-
|
|
47
|
+
class: "s1c1dllr"
|
|
52
48
|
});
|
|
53
|
-
|
|
49
|
+
const StyledToolsModal = /*#__PURE__*/(0, _react2.styled)(_Modal.default)({
|
|
54
50
|
name: "StyledToolsModal",
|
|
55
|
-
|
|
51
|
+
class: "s1g032mh"
|
|
56
52
|
});
|
|
57
|
-
|
|
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
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
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
|
-
|
|
101
|
+
const openPictureUrlModal = () => {
|
|
126
102
|
setIsPictureUrlModalOpen(true);
|
|
127
103
|
};
|
|
128
104
|
|
|
129
|
-
|
|
130
|
-
setIsPictureUrlModalOpen(
|
|
131
|
-
return !prev;
|
|
132
|
-
});
|
|
105
|
+
const togglePictureUrlModal = () => {
|
|
106
|
+
setIsPictureUrlModalOpen(prev => !prev);
|
|
133
107
|
};
|
|
134
108
|
|
|
135
|
-
|
|
109
|
+
const setActiveTool = tool => {
|
|
136
110
|
setActiveToolFromProps(tool);
|
|
137
111
|
setIsMenuOpen(false);
|
|
138
112
|
};
|
|
139
113
|
|
|
140
|
-
|
|
114
|
+
const setActiveToolFromId = toolId => {
|
|
141
115
|
var _availableTools$find;
|
|
142
116
|
|
|
143
|
-
setActiveTool((_availableTools$find = availableTools.find(
|
|
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)(
|
|
120
|
+
(0, _react.useEffect)(() => {
|
|
149
121
|
setActionsInMenu(width < fullToolbarSize);
|
|
150
122
|
setToolsInMenu(width < withMenuToolbarSize);
|
|
151
123
|
}, [width, fullToolbarSize, withMenuToolbarSize]);
|
|
152
|
-
|
|
124
|
+
const isAnyToolSelected = _fp.default.find({
|
|
153
125
|
type: activeTool
|
|
154
126
|
}, availableTools) !== undefined;
|
|
155
|
-
return /*#__PURE__*/_react
|
|
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
|
|
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(
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
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
|
|
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
|
|
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
|
|
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
|
|
188
|
+
})), isMenuOpen && /*#__PURE__*/_react.default.createElement(StyledToolsModal, {
|
|
219
189
|
onClose: toggleTools
|
|
220
|
-
}, availableTools.map(
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
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
|
|
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
|
|
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
|
|
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 ||
|
|
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
|
-
|
|
26
|
+
const StyledPanel = /*#__PURE__*/(0, _react2.styled)(_Panel.default)({
|
|
31
27
|
name: "StyledPanel",
|
|
32
|
-
|
|
28
|
+
class: "s1bvz4xj"
|
|
33
29
|
});
|
|
34
|
-
|
|
30
|
+
const StyledRelative = /*#__PURE__*/(0, _react2.styled)("div")({
|
|
35
31
|
name: "StyledRelative",
|
|
36
|
-
|
|
32
|
+
class: "siejlch"
|
|
37
33
|
});
|
|
38
34
|
|
|
39
|
-
|
|
35
|
+
const ToolbarGroup = _ref => {
|
|
40
36
|
var _group$toolsType, _ref2;
|
|
41
37
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
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)(
|
|
54
|
+
(0, _react.useEffect)(() => {
|
|
69
55
|
if (!isOpen) return;
|
|
70
56
|
|
|
71
|
-
|
|
57
|
+
const closePanel = () => {
|
|
72
58
|
setIsOpen(false);
|
|
73
59
|
};
|
|
74
60
|
|
|
75
61
|
document.addEventListener('click', closePanel);
|
|
76
|
-
return
|
|
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
|
|
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
|
|
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
|
|
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
|
-
|
|
89
|
+
const isActive = _fp.default.find({
|
|
104
90
|
type: activeTool.type
|
|
105
91
|
}, group === null || group === void 0 ? void 0 : group.toolsType) !== undefined;
|
|
106
|
-
|
|
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
|
-
|
|
94
|
+
const openPanel = () => {
|
|
109
95
|
if (localActiveTool) setActiveToolFromId(localActiveTool.id);else group.toolsType && group.toolsType[0] && setActiveTool(group.toolsType[0]);
|
|
110
|
-
startTransition(
|
|
96
|
+
startTransition(() => {
|
|
111
97
|
setIsOpen(true);
|
|
112
98
|
});
|
|
113
99
|
};
|
|
114
100
|
|
|
115
|
-
return /*#__PURE__*/_react
|
|
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
|
|
107
|
+
}), isOpen && /*#__PURE__*/_react.default.createElement(StyledPanel, {
|
|
122
108
|
vertical: group.vertical,
|
|
123
109
|
alignment: alignment
|
|
124
|
-
}, group.toolsType.map(
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
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
|
|
121
|
+
exports.default = _default;
|