@yorab/react-paint 0.6.4 → 0.7.1

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 (77) hide show
  1. package/README.md +5 -5
  2. package/dist/components/App.js +236 -423
  3. package/dist/components/Canvas.js +120 -139
  4. package/dist/components/common/Button.js +41 -50
  5. package/dist/components/common/Loading.js +24 -33
  6. package/dist/components/common/Modal.js +18 -17
  7. package/dist/components/common/Panel.js +20 -28
  8. package/dist/components/common/Snackbar.js +31 -38
  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 +111 -111
  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 +100 -121
  20. package/dist/components/settings/ToggleField.js +18 -25
  21. package/dist/components/toolbox/EditTextBox.js +62 -49
  22. package/dist/components/toolbox/LoadFileTool.js +19 -21
  23. package/dist/components/toolbox/MenuGroup.js +66 -100
  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 +79 -113
  27. package/dist/components/toolbox/ToolbarGroup.js +60 -63
  28. package/dist/constants/app.js +51 -0
  29. package/dist/constants/icons.js +42 -48
  30. package/dist/constants/loading.js +8 -0
  31. package/dist/constants/shapes.js +10 -8
  32. package/dist/constants/snackbar.js +7 -15
  33. package/dist/constants/style.js +21 -18
  34. package/dist/constants/tools.js +99 -103
  35. package/dist/hooks/useComponent.js +15 -20
  36. package/dist/hooks/useDoubleClick.js +12 -12
  37. package/dist/hooks/useDrag.js +24 -32
  38. package/dist/hooks/useDrawableCanvas.js +106 -122
  39. package/dist/hooks/useKeyboard.js +80 -63
  40. package/dist/hooks/useResizeObserver.js +18 -16
  41. package/dist/hooks/useShapes.js +92 -144
  42. package/dist/hooks/useSnackbar.js +28 -58
  43. package/dist/styles.css +16 -13
  44. package/dist/types/Mode.js +1 -13
  45. package/dist/types/Shapes.js +1 -17
  46. package/dist/types/snackbar.js +5 -0
  47. package/dist/types/tools.js +1 -18
  48. package/dist/utils/canvas.js +49 -0
  49. package/dist/utils/data.js +15 -274
  50. package/dist/utils/dom.js +12 -0
  51. package/dist/utils/file.js +75 -120
  52. package/dist/utils/intersect.js +54 -131
  53. package/dist/utils/migration.js +59 -0
  54. package/dist/utils/selection.js +18 -20
  55. package/dist/utils/shapes/brush.js +135 -0
  56. package/dist/utils/shapes/circle.js +93 -0
  57. package/dist/utils/shapes/curve.js +55 -0
  58. package/dist/utils/shapes/default.js +73 -0
  59. package/dist/utils/shapes/ellipse.js +101 -0
  60. package/dist/utils/shapes/grid.js +36 -0
  61. package/dist/utils/shapes/index.js +341 -0
  62. package/dist/utils/shapes/line.js +179 -0
  63. package/dist/utils/shapes/picture.js +88 -0
  64. package/dist/utils/shapes/polygon.js +69 -0
  65. package/dist/utils/shapes/rectangle.js +100 -0
  66. package/dist/utils/shapes/text.js +128 -0
  67. package/dist/utils/shapes/triangle.js +24 -0
  68. package/dist/utils/string.js +10 -16
  69. package/dist/utils/style.js +11 -13
  70. package/dist/utils/toolbar.js +35 -49
  71. package/dist/utils/transform.js +47 -339
  72. package/dist/utils/trigo.js +42 -0
  73. package/package.json +6 -6
  74. package/Changelog.md +0 -119
  75. package/dist/types/keyboard.js +0 -28
  76. package/dist/utils/draw.js +0 -461
  77. package/dist/utils/shapeData.js +0 -173
@@ -5,36 +5,38 @@ 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 _fp = _interopRequireDefault(require("lodash/fp"));
11
11
 
12
12
  var _react = require("react");
13
13
 
14
- var useResizeObserver = function useResizeObserver(_ref) {
15
- var onResized = _ref.onResized,
16
- element = _ref.element;
17
- (0, _react.useEffect)(function () {
18
- var current = element.current;
14
+ const useResizeObserver = _ref => {
15
+ let {
16
+ onResized,
17
+ element
18
+ } = _ref;
19
+ (0, _react.useEffect)(() => {
20
+ const current = element.current;
19
21
  if (!current) return;
20
- var resizeObserver = new ResizeObserver(function (entries) {
21
- var _ref2 = _fp["default"].get('0.borderBoxSize', entries) ? _fp["default"].flow(_fp["default"].get('0.borderBoxSize'), _fp["default"].castArray, _fp["default"].first, function (el) {
22
+ const resizeObserver = new ResizeObserver(entries => {
23
+ const {
24
+ width,
25
+ height
26
+ } = _fp.default.get('0.borderBoxSize', entries) ? _fp.default.flow(_fp.default.get('0.borderBoxSize'), _fp.default.castArray, _fp.default.first, el => {
22
27
  return {
23
- width: _fp["default"].get('inlineSize', el),
24
- height: _fp["default"].get('blockSize', el)
28
+ width: _fp.default.get('inlineSize', el),
29
+ height: _fp.default.get('blockSize', el)
25
30
  };
26
- })(entries) : _fp["default"].get('0.contentRect', entries),
27
- width = _ref2.width,
28
- height = _ref2.height;
29
-
31
+ })(entries) : _fp.default.get('0.contentRect', entries);
30
32
  onResized(width, height);
31
33
  });
32
34
  resizeObserver.observe(current);
33
- return function () {
35
+ return () => {
34
36
  resizeObserver.unobserve(current);
35
37
  };
36
38
  }, [element, onResized]);
37
39
  };
38
40
 
39
41
  var _default = useResizeObserver;
40
- exports["default"] = _default;
42
+ exports.default = _default;
@@ -5,142 +5,94 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports["default"] = void 0;
9
-
10
- var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
11
-
12
- var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
13
-
14
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
15
-
16
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
8
+ exports.default = void 0;
17
9
 
18
10
  var _react = require("react");
19
11
 
20
12
  var _fp = _interopRequireDefault(require("lodash/fp"));
21
13
 
22
- var _data = require("../utils/data");
14
+ var _picture = require("../utils/shapes/picture");
23
15
 
24
- var useShapes = function useShapes() {
25
- var onDataChanged = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _fp["default"].noop;
26
- var shapesRef = (0, _react.useRef)([]);
27
- var onDataChangedRef = (0, _react.useRef)(onDataChanged);
16
+ const useShapes = function () {
17
+ let onDataChanged = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _fp.default.noop;
18
+ const shapesRef = (0, _react.useRef)([]);
19
+ const onDataChangedRef = (0, _react.useRef)(onDataChanged);
28
20
  onDataChangedRef.current = onDataChanged;
29
-
30
- var _useState = (0, _react.useState)(undefined),
31
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
32
- selectedShape = _useState2[0],
33
- setSelectedShape = _useState2[1];
34
-
35
- var _useState3 = (0, _react.useState)({
21
+ const [selectedShape, setSelectedShape] = (0, _react.useState)(undefined);
22
+ const [savedShapes, setSavedShapes] = (0, _react.useState)({
36
23
  states: [{
37
24
  shapes: [],
38
25
  selectedShape: undefined
39
26
  }],
40
27
  cursor: 0
41
- }),
42
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
43
- savedShapes = _useState4[0],
44
- setSavedShapes = _useState4[1];
45
-
46
- var canGoBackward = savedShapes.cursor > 0;
47
- var canGoForward = savedShapes.cursor < savedShapes.states.length - 1;
48
- var canClear = shapesRef.current.length > 0;
49
- var saveShapes = (0, _react.useCallback)(function () {
50
- setSavedShapes(function (prevSavedShaped) {
51
- return _fp["default"].isEqual(_fp["default"].get([prevSavedShaped.cursor, 'shapes'], prevSavedShaped.states), shapesRef.current) ? prevSavedShaped : {
52
- states: [].concat((0, _toConsumableArray2["default"])(prevSavedShaped.states.slice(0, prevSavedShaped.cursor + 1)), [{
28
+ });
29
+ const canGoBackward = savedShapes.cursor > 0;
30
+ const canGoForward = savedShapes.cursor < savedShapes.states.length - 1;
31
+ const canClear = shapesRef.current.length > 0;
32
+ const saveShapes = (0, _react.useCallback)(() => {
33
+ setSavedShapes(prevSavedShaped => {
34
+ return _fp.default.isEqual(_fp.default.get([prevSavedShaped.cursor, 'shapes'], prevSavedShaped.states), shapesRef.current) ? prevSavedShaped : {
35
+ states: [...prevSavedShaped.states.slice(0, prevSavedShaped.cursor + 1), {
53
36
  shapes: shapesRef.current,
54
- selectedShape: selectedShape
55
- }]),
37
+ selectedShape
38
+ }],
56
39
  cursor: prevSavedShaped.cursor + 1
57
40
  };
58
41
  });
59
42
  }, [selectedShape]);
60
- var addShape = (0, _react.useCallback)(function (newShape) {
61
- shapesRef.current = [newShape].concat((0, _toConsumableArray2["default"])(shapesRef.current));
43
+ const addShape = (0, _react.useCallback)(newShape => {
44
+ shapesRef.current = [newShape, ...shapesRef.current];
62
45
  }, []);
63
- var addPictureShape = (0, _react.useCallback)( /*#__PURE__*/function () {
64
- var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(fileOrUrl) {
65
- var maxWidth,
66
- maxHeight,
67
- pictureShape,
68
- _args = arguments;
69
- return _regenerator["default"].wrap(function _callee$(_context) {
70
- while (1) {
71
- switch (_context.prev = _context.next) {
72
- case 0:
73
- maxWidth = _args.length > 1 && _args[1] !== undefined ? _args[1] : 300;
74
- maxHeight = _args.length > 2 && _args[2] !== undefined ? _args[2] : 300;
75
- _context.next = 4;
76
- return (0, _data.createPicture)(fileOrUrl, maxWidth, maxHeight);
77
-
78
- case 4:
79
- pictureShape = _context.sent;
80
- addShape(pictureShape);
81
- saveShapes();
82
- return _context.abrupt("return", pictureShape);
83
-
84
- case 8:
85
- case "end":
86
- return _context.stop();
87
- }
88
- }
89
- }, _callee);
90
- }));
91
-
92
- return function (_x) {
93
- return _ref.apply(this, arguments);
94
- };
95
- }(), [addShape, saveShapes]);
96
- var updateShape = (0, _react.useCallback)(function (updatedShape) {
97
- var withSave = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
98
- shapesRef.current = shapesRef.current.map(function (marker) {
46
+ const addPictureShape = (0, _react.useCallback)(async function (fileOrUrl) {
47
+ let maxWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 300;
48
+ let maxHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 300;
49
+ const pictureShape = await (0, _picture.createPicture)(fileOrUrl, maxWidth, maxHeight);
50
+ addShape(pictureShape);
51
+ saveShapes();
52
+ return pictureShape;
53
+ }, [addShape, saveShapes]);
54
+ const updateShape = (0, _react.useCallback)(function (updatedShape) {
55
+ let withSave = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
56
+ shapesRef.current = shapesRef.current.map(marker => {
99
57
  return marker.id === (selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.id) ? updatedShape : marker;
100
58
  });
101
- setSelectedShape(function (prevSelectedShape) {
102
- return (prevSelectedShape === null || prevSelectedShape === void 0 ? void 0 : prevSelectedShape.id) === updatedShape.id ? updatedShape : prevSelectedShape;
103
- });
59
+ setSelectedShape(prevSelectedShape => (prevSelectedShape === null || prevSelectedShape === void 0 ? void 0 : prevSelectedShape.id) === updatedShape.id ? updatedShape : prevSelectedShape);
104
60
  withSave && saveShapes();
105
61
  }, [selectedShape, saveShapes]);
106
- var updateShapes = (0, _react.useCallback)(function (newShapes) {
107
- var pureShapes = newShapes.map(function (shape) {
108
- return _fp["default"].omit(['chosen'], shape);
109
- });
62
+ const updateShapes = (0, _react.useCallback)(newShapes => {
63
+ const pureShapes = newShapes.map(shape => _fp.default.omit(['chosen'], shape));
110
64
  shapesRef.current = pureShapes;
111
65
  saveShapes();
112
66
  }, [saveShapes]);
113
- var removeShape = (0, _react.useCallback)(function (shape) {
114
- setSelectedShape(function (prevSelectedShape) {
115
- return (prevSelectedShape === null || prevSelectedShape === void 0 ? void 0 : prevSelectedShape.id) === shape.id ? undefined : prevSelectedShape;
116
- });
117
- shapesRef.current = _fp["default"].remove({
67
+ const removeShape = (0, _react.useCallback)(shape => {
68
+ setSelectedShape(prevSelectedShape => (prevSelectedShape === null || prevSelectedShape === void 0 ? void 0 : prevSelectedShape.id) === shape.id ? undefined : prevSelectedShape);
69
+ shapesRef.current = _fp.default.remove({
118
70
  id: shape.id
119
71
  }, shapesRef.current);
120
72
  saveShapes();
121
73
  }, [saveShapes]);
122
- var backwardShape = (0, _react.useCallback)(function () {
123
- setSavedShapes(function (prevSavedShaped) {
124
- var newCursor = Math.max(0, prevSavedShaped.cursor - 1);
125
- shapesRef.current = _fp["default"].get([newCursor, 'shapes'], prevSavedShaped.states);
126
- setSelectedShape(_fp["default"].get([newCursor, 'selectedShape'], prevSavedShaped.states));
127
- return _fp["default"].set('cursor', newCursor, prevSavedShaped);
74
+ const backwardShape = (0, _react.useCallback)(() => {
75
+ setSavedShapes(prevSavedShaped => {
76
+ const newCursor = Math.max(0, prevSavedShaped.cursor - 1);
77
+ shapesRef.current = _fp.default.get([newCursor, 'shapes'], prevSavedShaped.states);
78
+ setSelectedShape(_fp.default.get([newCursor, 'selectedShape'], prevSavedShaped.states));
79
+ return _fp.default.set('cursor', newCursor, prevSavedShaped);
128
80
  });
129
81
  }, []);
130
- var forwardShape = (0, _react.useCallback)(function () {
131
- setSavedShapes(function (prevSavedShaped) {
132
- var newCursor = Math.min(prevSavedShaped.states.length - 1, prevSavedShaped.cursor + 1);
133
- shapesRef.current = _fp["default"].get([newCursor, 'shapes'], prevSavedShaped.states);
134
- setSelectedShape(_fp["default"].get([newCursor, 'selectedShape'], prevSavedShaped.states));
135
- return _fp["default"].set('cursor', newCursor, prevSavedShaped);
82
+ const forwardShape = (0, _react.useCallback)(() => {
83
+ setSavedShapes(prevSavedShaped => {
84
+ const newCursor = Math.min(prevSavedShaped.states.length - 1, prevSavedShaped.cursor + 1);
85
+ shapesRef.current = _fp.default.get([newCursor, 'shapes'], prevSavedShaped.states);
86
+ setSelectedShape(_fp.default.get([newCursor, 'selectedShape'], prevSavedShaped.states));
87
+ return _fp.default.set('cursor', newCursor, prevSavedShaped);
136
88
  });
137
89
  }, []);
138
- var clearShapes = (0, _react.useCallback)(function () {
139
- var shapesToInit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
140
- var clearHistory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
90
+ const clearShapes = (0, _react.useCallback)(function () {
91
+ let shapesToInit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
92
+ let clearHistory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
141
93
  setSelectedShape(undefined);
142
94
  shapesRef.current = shapesToInit;
143
- setSavedShapes(function (prevSavedShaped) {
95
+ setSavedShapes(prevSavedShaped => {
144
96
  return clearHistory ? {
145
97
  states: [{
146
98
  shapes: shapesToInit,
@@ -148,87 +100,83 @@ var useShapes = function useShapes() {
148
100
  }],
149
101
  cursor: 0
150
102
  } : {
151
- states: [].concat((0, _toConsumableArray2["default"])(prevSavedShaped.states.slice(0, prevSavedShaped.cursor + 1)), [{
103
+ states: [...prevSavedShaped.states.slice(0, prevSavedShaped.cursor + 1), {
152
104
  shapes: shapesToInit,
153
105
  selectedShape: undefined
154
- }]),
106
+ }],
155
107
  cursor: prevSavedShaped.cursor + 1
156
108
  };
157
109
  });
158
110
  }, []);
159
- var moveShapes = (0, _react.useCallback)(function (firstShapeId, lastShapeId) {
160
- var shapes = shapesRef.current;
111
+ const moveShapes = (0, _react.useCallback)((firstShapeId, lastShapeId) => {
112
+ const shapes = shapesRef.current;
161
113
 
162
- var firstShapeIndex = _fp["default"].findIndex({
114
+ const firstShapeIndex = _fp.default.findIndex({
163
115
  id: firstShapeId
164
116
  }, shapes);
165
117
 
166
- var lastShapeIndex = _fp["default"].findIndex({
118
+ const lastShapeIndex = _fp.default.findIndex({
167
119
  id: lastShapeId
168
120
  }, shapes); // todo utils
169
121
 
170
122
 
171
123
  if (firstShapeIndex < lastShapeIndex) {
172
- updateShapes([].concat((0, _toConsumableArray2["default"])(_fp["default"].slice(0, firstShapeIndex, shapes)), (0, _toConsumableArray2["default"])(_fp["default"].slice(firstShapeIndex + 1, lastShapeIndex + 1, shapes)), [shapes[firstShapeIndex]], (0, _toConsumableArray2["default"])(_fp["default"].slice(lastShapeIndex + 1, shapes.length, shapes))));
124
+ updateShapes([..._fp.default.slice(0, firstShapeIndex, shapes), ..._fp.default.slice(firstShapeIndex + 1, lastShapeIndex + 1, shapes), shapes[firstShapeIndex], ..._fp.default.slice(lastShapeIndex + 1, shapes.length, shapes)]);
173
125
  } else {
174
- updateShapes([].concat((0, _toConsumableArray2["default"])(_fp["default"].slice(0, lastShapeIndex, shapes)), [shapes[firstShapeIndex]], (0, _toConsumableArray2["default"])(_fp["default"].slice(lastShapeIndex, firstShapeIndex, shapes)), (0, _toConsumableArray2["default"])(_fp["default"].slice(firstShapeIndex + 1, shapes.length, shapes))));
126
+ updateShapes([..._fp.default.slice(0, lastShapeIndex, shapes), shapes[firstShapeIndex], ..._fp.default.slice(lastShapeIndex, firstShapeIndex, shapes), ..._fp.default.slice(firstShapeIndex + 1, shapes.length, shapes)]);
175
127
  }
176
128
  }, [updateShapes]);
177
- var toggleShapeVisibility = (0, _react.useCallback)(function (shape) {
178
- var shapes = shapesRef.current;
129
+ const toggleShapeVisibility = (0, _react.useCallback)(shape => {
130
+ const shapes = shapesRef.current;
179
131
 
180
- var shapeIndex = _fp["default"].findIndex({
132
+ const shapeIndex = _fp.default.findIndex({
181
133
  id: shape.id
182
134
  }, shapes);
183
135
 
184
136
  if (shapeIndex < 0) return;
185
137
 
186
- var newShape = _fp["default"].set('visible', shape.visible === false, shape);
138
+ const newShape = _fp.default.set('visible', shape.visible === false, shape);
187
139
 
188
- setSelectedShape(function (prevSelectedShape) {
189
- return (prevSelectedShape === null || prevSelectedShape === void 0 ? void 0 : prevSelectedShape.id) === newShape.id ? newShape : prevSelectedShape;
190
- });
191
- updateShapes(_fp["default"].set(shapeIndex, newShape, shapes));
140
+ setSelectedShape(prevSelectedShape => (prevSelectedShape === null || prevSelectedShape === void 0 ? void 0 : prevSelectedShape.id) === newShape.id ? newShape : prevSelectedShape);
141
+ updateShapes(_fp.default.set(shapeIndex, newShape, shapes));
192
142
  }, [updateShapes]);
193
- var toggleShapeLock = (0, _react.useCallback)(function (shape) {
194
- var shapes = shapesRef.current;
143
+ const toggleShapeLock = (0, _react.useCallback)(shape => {
144
+ const shapes = shapesRef.current;
195
145
 
196
- var shapeIndex = _fp["default"].findIndex({
146
+ const shapeIndex = _fp.default.findIndex({
197
147
  id: shape.id
198
148
  }, shapes);
199
149
 
200
150
  if (shapeIndex < 0) return;
201
151
 
202
- var newShape = _fp["default"].set('locked', !shape.locked, shape);
152
+ const newShape = _fp.default.set('locked', !shape.locked, shape);
203
153
 
204
- setSelectedShape(function (prevSelectedShape) {
205
- return (prevSelectedShape === null || prevSelectedShape === void 0 ? void 0 : prevSelectedShape.id) === newShape.id ? newShape : prevSelectedShape;
206
- });
207
- updateShapes(_fp["default"].set(shapeIndex, newShape, shapes));
154
+ setSelectedShape(prevSelectedShape => (prevSelectedShape === null || prevSelectedShape === void 0 ? void 0 : prevSelectedShape.id) === newShape.id ? newShape : prevSelectedShape);
155
+ updateShapes(_fp.default.set(shapeIndex, newShape, shapes));
208
156
  }, [updateShapes]);
209
- (0, _react.useEffect)(function () {
157
+ (0, _react.useEffect)(() => {
210
158
  onDataChangedRef.current();
211
159
  }, [savedShapes]);
212
160
  return {
213
- shapesRef: shapesRef,
214
- selectedShape: selectedShape,
215
- addShape: addShape,
216
- addPictureShape: addPictureShape,
217
- moveShapes: moveShapes,
218
- saveShapes: saveShapes,
219
- setSelectedShape: setSelectedShape,
220
- toggleShapeVisibility: toggleShapeVisibility,
221
- toggleShapeLock: toggleShapeLock,
222
- removeShape: removeShape,
223
- updateShape: updateShape,
224
- backwardShape: backwardShape,
225
- forwardShape: forwardShape,
226
- clearShapes: clearShapes,
227
- canGoBackward: canGoBackward,
228
- canGoForward: canGoForward,
229
- canClear: canClear
161
+ shapesRef,
162
+ selectedShape,
163
+ addShape,
164
+ addPictureShape,
165
+ moveShapes,
166
+ saveShapes,
167
+ setSelectedShape,
168
+ toggleShapeVisibility,
169
+ toggleShapeLock,
170
+ removeShape,
171
+ updateShape,
172
+ backwardShape,
173
+ forwardShape,
174
+ clearShapes,
175
+ canGoBackward,
176
+ canGoForward,
177
+ canClear
230
178
  };
231
179
  };
232
180
 
233
181
  var _default = useShapes;
234
- exports["default"] = _default;
182
+ exports.default = _default;
@@ -5,11 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports["default"] = void 0;
9
-
10
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
11
-
12
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
8
+ exports.default = void 0;
13
9
 
14
10
  var _snackbar = require("../constants/snackbar");
15
11
 
@@ -17,70 +13,44 @@ var _fp = _interopRequireDefault(require("lodash/fp"));
17
13
 
18
14
  var _react = require("react");
19
15
 
20
- function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
21
-
22
- function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
23
-
24
- function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
16
+ const useSnackbar = () => {
17
+ const timers = (0, _react.useRef)([]);
18
+ const [snackbarList, setSnackbarList] = (0, _react.useState)([]);
25
19
 
26
- var useSnackbar = function useSnackbar() {
27
- var timers = (0, _react.useRef)([]);
28
-
29
- var _useState = (0, _react.useState)([]),
30
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
31
- snackbarList = _useState2[0],
32
- setSnackbarList = _useState2[1];
33
-
34
- var removeSnackbar = function removeSnackbar(id) {
35
- setSnackbarList(function (prev) {
36
- return _fp["default"].remove({
37
- id: id
38
- }, prev);
39
- });
20
+ const removeSnackbar = id => {
21
+ setSnackbarList(prev => _fp.default.remove({
22
+ id: id
23
+ }, prev));
40
24
  };
41
25
 
42
- var addSnackbar = function addSnackbar(_ref) {
43
- var _ref$type = _ref.type,
44
- type = _ref$type === void 0 ? _snackbar.SNACKBAR_DEFAULT_SETTINGS.type : _ref$type,
45
- _ref$duration = _ref.duration,
46
- duration = _ref$duration === void 0 ? _snackbar.SNACKBAR_DEFAULT_SETTINGS.duration : _ref$duration,
47
- text = _ref.text;
48
- var newSnackbar = {
49
- id: _fp["default"].uniqueId('snackbar_'),
50
- duration: duration,
51
- type: type,
52
- text: text
26
+ const addSnackbar = _ref => {
27
+ let {
28
+ type = _snackbar.SNACKBAR_DEFAULT_SETTINGS.type,
29
+ duration = _snackbar.SNACKBAR_DEFAULT_SETTINGS.duration,
30
+ text
31
+ } = _ref;
32
+ const newSnackbar = {
33
+ id: _fp.default.uniqueId('snackbar_'),
34
+ duration,
35
+ type,
36
+ text
53
37
  };
54
- setSnackbarList(function (prev) {
55
- return [].concat((0, _toConsumableArray2["default"])(prev), [newSnackbar]);
56
- });
57
- timers.current = [].concat((0, _toConsumableArray2["default"])(timers.current), [setTimeout(function () {
58
- return removeSnackbar(newSnackbar.id);
59
- }, duration)]);
38
+ setSnackbarList(prev => [...prev, newSnackbar]);
39
+ timers.current = [...timers.current, setTimeout(() => removeSnackbar(newSnackbar.id), duration)];
60
40
  };
61
41
 
62
- (0, _react.useEffect)(function () {
63
- return function () {
64
- var _iterator = _createForOfIteratorHelper(timers.current),
65
- _step;
66
-
67
- try {
68
- for (_iterator.s(); !(_step = _iterator.n()).done;) {
69
- var timer = _step.value;
70
- clearTimeout(timer);
71
- }
72
- } catch (err) {
73
- _iterator.e(err);
74
- } finally {
75
- _iterator.f();
42
+ (0, _react.useEffect)(() => {
43
+ return () => {
44
+ for (const timer of timers.current) {
45
+ clearTimeout(timer);
76
46
  }
77
47
  };
78
48
  }, []);
79
49
  return {
80
- snackbarList: snackbarList,
81
- addSnackbar: addSnackbar
50
+ snackbarList,
51
+ addSnackbar
82
52
  };
83
53
  };
84
54
 
85
55
  var _default = useSnackbar;
86
- exports["default"] = _default;
56
+ exports.default = _default;
package/dist/styles.css CHANGED
@@ -33,28 +33,31 @@
33
33
 
34
34
  .s1unz6yq{position:absolute;display:inline-block;outline:none;left:0px;top:0px;-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;box-sizing:border-box;-webkit-transform:var(--s1unz6yq-0);-ms-transform:var(--s1unz6yq-0);transform:var(--s1unz6yq-0);color:var(--s1unz6yq-1);padding:var(--s1unz6yq-2);font-size:var(--s1unz6yq-3);line-height:var(--s1unz6yq-3);font-family:var(--s1unz6yq-5);opacity:var(--s1unz6yq-6);width:-webkit-max-content;width:-moz-max-content;width:max-content;}.s1unz6yq[data-fontbold='true']{font-weight:bold;}.s1unz6yq[data-fontitalic='true']{font-style:italic;}
35
35
  .s9czb9p{-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
36
- .s1538eht{position:relative;background-color:var(--canvas-bg);background-repeat:repeat;background-size:16px;overflow:hidden;display:grid;}.s1538eht[data-grid='true']{background-image:url("data:image/svg+xml,%3Csvg%20id%3D%22svg%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22400%22%20height%3D%22400%22%20viewBox%3D%220%2C%200%2C%20400%2C400%22%3E%3Cg%20id%3D%22svgg%22%3E%3Cpath%20id%3D%22path0%22%20d%3D%22M204.800%2094.600%20C%20204.800%20188.933%2C204.802%20189.200%2C205.600%20189.200%20C%20206.248%20189.200%2C206.400%20189.467%2C206.400%20190.600%20C%20206.400%20191.733%2C206.552%20192.000%2C207.200%20192.000%20C%20207.733%20192.000%2C208.000%20192.267%2C208.000%20192.800%20C%20208.000%20193.244%2C208.267%20193.600%2C208.600%20193.600%20C%20208.933%20193.600%2C209.200%20193.956%2C209.200%20194.400%20C%20209.200%20195.067%2C209.467%20195.200%2C210.800%20195.200%20C%20212.133%20195.200%2C212.400%20195.333%2C212.400%20196.000%20C%20212.400%20196.798%2C212.667%20196.800%2C306.200%20196.800%20L%20400.000%20196.800%20400.000%2098.400%20L%20400.000%200.000%20302.400%200.000%20L%20204.800%200.000%20204.800%2094.600%20M0.000%20302.400%20L%200.000%20400.000%2098.400%20400.000%20L%20196.800%20400.000%20196.800%20306.200%20C%20196.800%20212.667%2C196.798%20212.400%2C196.000%20212.400%20C%20195.333%20212.400%2C195.200%20212.133%2C195.200%20210.800%20C%20195.200%20209.467%2C195.067%20209.200%2C194.400%20209.200%20C%20193.956%20209.200%2C193.600%20208.933%2C193.600%20208.600%20C%20193.600%20208.267%2C193.244%20208.000%2C192.800%20208.000%20C%20192.267%20208.000%2C192.000%20207.733%2C192.000%20207.200%20C%20192.000%20206.552%2C191.733%20206.400%2C190.600%20206.400%20C%20189.467%20206.400%2C189.200%20206.248%2C189.200%20205.600%20C%20189.200%20204.802%2C188.933%20204.800%2C94.600%20204.800%20L%200.000%20204.800%200.000%20302.400%20%22%20stroke%3D%22none%22%20fill%3D%22%23fcfcfc%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3Cpath%20id%3D%22path1%22%20d%3D%22M0.000%20100.000%20L%200.000%20200.000%2096.800%20200.000%20C%20193.333%20200.000%2C193.600%20199.998%2C193.600%20199.200%20C%20193.600%20198.533%2C193.867%20198.400%2C195.200%20198.400%20C%20196.533%20198.400%2C196.800%20198.267%2C196.800%20197.600%20C%20196.800%20197.067%2C197.067%20196.800%2C197.600%20196.800%20C%20198.267%20196.800%2C198.400%20196.533%2C198.400%20195.200%20C%20198.400%20193.867%2C198.533%20193.600%2C199.200%20193.600%20C%20199.998%20193.600%2C200.000%20193.333%2C200.000%2096.800%20L%20200.000%200.000%20100.000%200.000%20L%200.000%200.000%200.000%20100.000%20M208.000%20202.400%20C%20208.000%20203.067%2C207.733%20203.200%2C206.400%20203.200%20C%20205.067%20203.200%2C204.800%20203.333%2C204.800%20204.000%20C%20204.800%20204.533%2C204.533%20204.800%2C204.000%20204.800%20C%20203.333%20204.800%2C203.200%20205.067%2C203.200%20206.400%20C%20203.200%20207.733%2C203.067%20208.000%2C202.400%20208.000%20C%20201.602%20208.000%2C201.600%20208.267%2C201.600%20304.000%20L%20201.600%20400.000%20300.800%20400.000%20L%20400.000%20400.000%20400.000%20300.800%20L%20400.000%20201.600%20304.000%20201.600%20C%20208.267%20201.600%2C208.000%20201.602%2C208.000%20202.400%20%22%20stroke%3D%22none%22%20fill%3D%22%23e4e4e4%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3Cpath%20id%3D%22path2%22%20d%3D%22%22%20stroke%3D%22none%22%20fill%3D%22%23f4100f0%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3Cpath%20id%3D%22path3%22%20d%3D%22%22%20stroke%3D%22none%22%20fill%3D%22%23f4100f0%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3Cpath%20id%3D%22path4%22%20d%3D%22%22%20stroke%3D%22none%22%20fill%3D%22%23f4100f0%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");}.s1538eht[data-grow='true']{width:100%;height:100%;}
36
+ .s1538eht{position:relative;background-color:var(--canvas-bg);background-repeat:repeat;background-size:16px;overflow:hidden;display:grid;}.s1538eht[data-grow='true']{width:100%;height:100%;}
37
37
  .s101qxdc{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;max-width:100%;touch-action:none;display:block;grid-area:1 / 1;}.s101qxdc[data-grow='true']{width:100%;}
38
38
  .sa4oq48{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;max-width:100%;touch-action:none;display:block;grid-area:1 / 1;cursor:var(--sa4oq48-0);}.sa4oq48[data-grow='true']{width:100%;}
39
39
  .sq3bzv4{min-width:32px;height:32px;font-size:14px;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;box-sizing:border-box;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;background:none;border:none;cursor:pointer;border-radius:var(--font-radius);color:var(--font-color);margin:2px 4px;padding:0;}.sq3bzv4[data-selected='1']{color:var(--font-selected-color);background:var(--font-selected-bg);}.sq3bzv4[data-hidden='1']{visibility:hidden;}.sq3bzv4[data-disabled='1']{cursor:default;color:var(--font-disabled-color);background:var(--font-disabled-bg);}.sq3bzv4[data-selected='0'][data-disabled='0']{background:var(--font-bg);color:var(--font-color);}.sq3bzv4[data-selected='0'][data-disabled='0']:hover{color:var(--font-hover-color);background:var(--font-hover-bg);}.sq3bzv4[data-disabled='0']{cursor:pointer;}.sq3bzv4 svg{fill:currentColor;width:20px;height:20px;}.sq3bzv4 input{position:absolute;visibility:hidden;}
40
40
  .sst453j{width:100%;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:2px 6px;}
41
41
  .s1q5lsc2{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
42
42
  .s1dis2j8{-webkit-flex:1;-ms-flex:1;flex:1;text-align:left;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.s1dis2j8 + .s1q5lsc2{margin-left:12px;}
43
- .s1xzg253{position:absolute;z-index:3;background:var(--toolbar-bg);bottom:100%;box-shadow:0 3px 8px rgb(0 0 0 / 24%);padding:8px;border-radius:8px;white-space:nowrap;box-sizing:border-box;}.s1xzg253[data-alignment='left']{left:0;margin:4px;}.s1xzg253[data-alignment='center']{left:50%;-webkit-transform:translate3d(-50%,0px,0px);-ms-transform:translate3d(-50%,0px,0px);transform:translate3d(-50%,0px,0px);margin:4px 0px;}.s1xzg253[data-alignment='right']{right:0;margin:4px;}.s1xzg253[data-fitcontainer='true']{max-width:100%;}
43
+ .s1xzg253{position:absolute;z-index:3;background:var(--toolbar-bg);box-shadow:0 3px 8px rgb(0 0 0 / 24%);padding:8px;border-radius:8px;white-space:nowrap;box-sizing:border-box;}.s1xzg253[data-alignment='left']{left:0;margin:4px;}.s1xzg253[data-alignment='center']{left:50%;-webkit-transform:translate3d(-50%,0px,0px);-ms-transform:translate3d(-50%,0px,0px);transform:translate3d(-50%,0px,0px);margin:4px 0px;}.s1xzg253[data-alignment='right']{right:0;margin:4px;}.s1xzg253[data-position='bottom']{bottom:100%;}.s1xzg253[data-position='top']{top:100%;}.s1xzg253[data-fitcontainer='true']{max-width:100%;}
44
44
  .s17qj3jh{margin-bottom:8px;margin-top:4px;font-size:18px;}
45
45
  .su3a8bs{display:inline-block;background:var(--toolbar-bg);box-sizing:border-box;overflow-y:auto;min-width:200px;}
46
46
  .szboplp{margin:2px 0;}.szboplp:not(:hover){opacity:0.2;}
47
47
  .sff5xt{border:3px solid transparent;padding:4px 0px;position:relative;background:var(--toolbar-bg);box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}.sff5xt[data-is-over='1']{border:3px dotted var(--font-hover-bg);}.sff5xt[data-is-dragging='1']{opacity:0.4;}.sff5xt[data-selected='1']{color:var(--font-selected-color);background:var(--font-selected-bg);}.sff5xt[data-selected='1'] .szboplp{color:white;}.sff5xt[data-selected='0'][data-disabled='0']{background:var(--font-bg);color:var(--font-color);}.sff5xt[data-selected='0'][data-disabled='0']:hover{color:var(--font-hover-color);background:var(--font-hover-bg);}.sff5xt[data-disabled='1']{cursor:default;color:var(--font-disabled-color);background:var(--font-disabled-bg);}.sff5xt[data-disabled='0']{cursor:move;}.sff5xt > span{height:20px;line-height:1;color:#8a8a8a;}.sff5xt > span > svg{fill:#8a8a8a;width:20px;height:20px;padding:0 4px;-webkit-transform:scale(0.75);-ms-transform:scale(0.75);transform:scale(0.75);}
48
48
  .sj3bift{margin:2px 0;}.sj3bift[data-visible='false']{opacity:0.2;}
49
49
  .s10ip0a4{margin:2px 0;}.s10ip0a4[data-locked='false']{opacity:0.2;}
50
- .s1j9uq9o[data-grid='false'] svg{opacity:0.2;}
51
- .s156ddbb{-webkit-flex:1;-ms-flex:1;flex:1;}
52
- .s11gt4hl{bottom:0;left:unset;top:unset;max-height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
53
- .s13cxqhq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow-y:auto;}
54
- .s1idv8qv{opacity:0.6;text-align:center;padding:12px 0px;}
55
- .s1bvz4xj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;bottom:unset;top:100%;}.s1bvz4xj[data-vertical='1']{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
50
+ .s1j9uq9o span{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
51
+ .s156ddbb{min-width:60px;font-weight:bold;}
52
+ .s11gt4hl{-webkit-flex:1;-ms-flex:1;flex:1;}
53
+ .s13cxqhq.s13cxqhq{bottom:0;top:unset;}
54
+ .s1idv8qv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;max-height:100%;}
55
+ .s1mhvlda{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow-y:auto;}
56
+ .sr4amic{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
57
+ .s13llc5i{opacity:0.6;text-align:center;padding:12px 0px;}
58
+ .s1bvz4xj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.s1bvz4xj[data-vertical='1']{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
56
59
  .siejlch{position:relative;display:inline-block;}
57
- .s1uphjfh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;bottom:unset;top:100%;}.s1uphjfh[data-vertical='1']{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
60
+ .s1uphjfh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.s1uphjfh[data-vertical='1']{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
58
61
  .s1e5a6k5{position:relative;display:inline-block;}
59
62
  .s1c8tp02{z-index:3;position:absolute;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;left:0;right:0;bottom:0;top:0;}.s1c8tp02[data-position='center']{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.s1c8tp02[data-position='bottom']{-webkit-align-items:end;-webkit-box-align:end;-ms-flex-align:end;align-items:end;}
60
63
  .svkxpz4{display:grid;background:var(--toolbar-bg);box-shadow:0 3px 8px rgb(0 0 0 / 24%);padding:4px;border-radius:8px;white-space:nowrap;position:relative;}
@@ -79,10 +82,10 @@
79
82
  .s16z54di{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:var(--toolbar-bg);position:relative;height:36px;border-top:1px solid var(--divider-color);box-sizing:border-box;}
80
83
  .sa7lzh9{-webkit-flex:1;-ms-flex:1;flex:1;}
81
84
  .s7b85in{grid-template-columns:repeat(auto-fill,40px);width:100%;}
82
- .s1xssqat{display:inline-block;padding:12px 48px;margin:4px;max-width:calc(100% - 24px);overflow-wrap:break-word;box-sizing:border-box;-webkit-transition:all 500ms;transition:all 500ms;opacity:0;-webkit-transform:translate3d(0px,40px,0px);-ms-transform:translate3d(0px,40px,0px);transform:translate3d(0px,40px,0px);}.s1xssqat[data-type='0']{background:#646464;color:white;}.s1xssqat[data-type='1']{background:#c3a200;color:black;}.s1xssqat[data-type='2']{background:#911717;color:white;}.s1xssqat[data-type='3']{background:#088900;color:white;}.s1xssqat[data-is-shown='1']{opacity:1;-webkit-transform:translate3d(0px,0px,0px);-ms-transform:translate3d(0px,0px,0px);transform:translate3d(0px,0px,0px);}.s1xssqat[data-is-shown='0']{opacity:0;-webkit-transform:translate3d(0px,40px,0px);-ms-transform:translate3d(0px,40px,0px);transform:translate3d(0px,40px,0px);}
83
- .s1bgtt22{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;position:absolute;z-index:4;bottom:0;left:0;right:0;height:0px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
85
+ .s1xssqat{display:inline-block;padding:12px 48px;margin:4px;max-width:calc(100% - 24px);overflow-wrap:break-word;box-sizing:border-box;-webkit-transition:all 500ms;transition:all 500ms;opacity:0;-webkit-transform:translate3d(0px,40px,0px);-ms-transform:translate3d(0px,40px,0px);transform:translate3d(0px,40px,0px);}.s1xssqat[data-type='infos']{background:#646464;color:white;}.s1xssqat[data-type='error']{background:#911717;color:white;}.s1xssqat[data-type='success']{background:#088900;color:white;}.s1xssqat[data-is-shown='1']{opacity:1;-webkit-transform:translate3d(0px,0px,0px);-ms-transform:translate3d(0px,0px,0px);transform:translate3d(0px,0px,0px);}.s1xssqat[data-is-shown='0']{opacity:0;-webkit-transform:translate3d(0px,40px,0px);-ms-transform:translate3d(0px,40px,0px);transform:translate3d(0px,40px,0px);}
86
+ .s1bgtt22{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;position:absolute;z-index:4;bottom:0;left:0;right:0;height:0;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
84
87
  .s9j48u3{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;z-index:2;top:0;bottom:0;left:0;right:0;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#00000050;-webkit-transition:opacity 300ms linear;transition:opacity 300ms linear;opacity:0;}.s9j48u3[data-loading='visible']{opacity:1;}
85
- .s4auclc{width:40px;height:40px;position:relative;-webkit-transform:rotate(10deg);-ms-transform:rotate(10deg);transform:rotate(10deg);-webkit-animation:react-paint-rotation-s4auclc 1s infinite;animation:react-paint-rotation-s4auclc 1s infinite;}@-webkit-keyframes react-paint-rotation-s4auclc{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes react-paint-rotation-s4auclc{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
88
+ .s4auclc{width:40px;height:40px;position:relative;-webkit-transform:rotate(10deg);-ms-transform:rotate(10deg);transform:rotate(10deg);-webkit-animation:react_paint-rotation-s4auclc 1s infinite;animation:react_paint-rotation-s4auclc 1s infinite;}@-webkit-keyframes react_paint-rotation-s4auclc{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes react_paint-rotation-s4auclc{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
86
89
  .s1l3fbq{border-radius:50%;position:absolute;width:15px;height:15px;}.s1l3fbq:nth-child(1){left:0;background-color:#5c6bc0;}.s1l3fbq:nth-child(2){right:0;background-color:#8bc34a;}.s1l3fbq:nth-child(3){bottom:0;background-color:#ffb74d;}.s1l3fbq:nth-child(4){bottom:0;right:0;background-color:#f44336;}
87
90
  .s1v9piyg{--toolbar-bg:var(--s1v9piyg-0);--divider-color:var(--s1v9piyg-1);--font-radius:var(--s1v9piyg-2);--font-disabled-color:var(--s1v9piyg-3);--font-disabled-bg:var(--s1v9piyg-4);--font-color:var(--s1v9piyg-5);--font-bg:var(--s1v9piyg-6);--font-selected-color:var(--s1v9piyg-7);--font-selected-bg:var(--s1v9piyg-8);--font-hover-color:var(--s1v9piyg-9);--font-hover-bg:var(--s1v9piyg-10);--canvas-bg:var(--s1v9piyg-11);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;color:var(--font-color);position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.s1v9piyg hr{width:100%;border:none;border-top:1px solid var(--divider-color);}.s1v9piyg[data-grow='false']{max-width:var(--s1v9piyg-12);}.s1v9piyg[data-shrink='false']{min-width:var(--s1v9piyg-13);}
88
- .s6o5tmu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;position:relative;max-width:100%;z-index:1;aspect-ratio:var(--s6o5tmu-2);}.s6o5tmu[data-grow='true']{width:100%;}.s6o5tmu[data-grow='false']{width:var(--s6o5tmu-1);}
91
+ .s6o5tmu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;position:relative;max-width:100%;z-index:1;aspect-ratio:var(--s6o5tmu-1);}.s6o5tmu[data-grow='true']{width:100%;}.s6o5tmu[data-grow='false']{width:var(--s6o5tmu-0);}
@@ -2,16 +2,4 @@
2
2
 
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
- });
6
- exports.SelectionModeLib = void 0;
7
- var SelectionModeLib;
8
- exports.SelectionModeLib = SelectionModeLib;
9
-
10
- (function (SelectionModeLib) {
11
- SelectionModeLib["default"] = "default";
12
- SelectionModeLib["brush"] = "brush";
13
- SelectionModeLib["resize"] = "resize";
14
- SelectionModeLib["rotate"] = "rotate";
15
- SelectionModeLib["translate"] = "translate";
16
- SelectionModeLib["textedition"] = "textedition";
17
- })(SelectionModeLib || (exports.SelectionModeLib = SelectionModeLib = {}));
5
+ });
@@ -2,20 +2,4 @@
2
2
 
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
- });
6
- exports.ShapeEnum = void 0;
7
- var ShapeEnum;
8
- exports.ShapeEnum = ShapeEnum;
9
-
10
- (function (ShapeEnum) {
11
- ShapeEnum["brush"] = "brush";
12
- ShapeEnum["rect"] = "rect";
13
- ShapeEnum["square"] = "square";
14
- ShapeEnum["line"] = "line";
15
- ShapeEnum["polygon"] = "polygon";
16
- ShapeEnum["circle"] = "circle";
17
- ShapeEnum["curve"] = "curve";
18
- ShapeEnum["ellipse"] = "ellipse";
19
- ShapeEnum["picture"] = "picture";
20
- ShapeEnum["text"] = "text";
21
- })(ShapeEnum || (exports.ShapeEnum = ShapeEnum = {}));
5
+ });
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });