@jotforminc/dnd-builder 3.1.1 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (125) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/index.d.ts +428 -0
  3. package/lib/cjs/components/AlignmentGuides.js +28 -18
  4. package/lib/cjs/components/AlignmentGuides.js.map +1 -1
  5. package/lib/cjs/components/Builder/ContextMenu.js +4 -1
  6. package/lib/cjs/components/Builder/ContextMenu.js.map +1 -1
  7. package/lib/cjs/components/Builder/DraggableLayer.js +1 -5
  8. package/lib/cjs/components/Builder/DraggableLayer.js.map +1 -1
  9. package/lib/cjs/components/Builder/Element.js +7 -4
  10. package/lib/cjs/components/Builder/Element.js.map +1 -1
  11. package/lib/cjs/components/Builder/Page.js +56 -62
  12. package/lib/cjs/components/Builder/Page.js.map +1 -1
  13. package/lib/cjs/components/Builder/Scene.js +30 -251
  14. package/lib/cjs/components/Builder/Scene.js.map +1 -1
  15. package/lib/cjs/components/Builder/SelectionBox.js +48 -0
  16. package/lib/cjs/components/Builder/SelectionBox.js.map +1 -0
  17. package/lib/cjs/components/DraggableItem/DraggableItem.js +78 -135
  18. package/lib/cjs/components/DraggableItem/DraggableItem.js.map +1 -1
  19. package/lib/cjs/components/DraggableItem/DraggableItemActions.js +69 -29
  20. package/lib/cjs/components/DraggableItem/DraggableItemActions.js.map +1 -1
  21. package/lib/cjs/components/DraggableItem/DraggableItemLayer.js +8 -8
  22. package/lib/cjs/components/DraggableItem/DraggableItemLayer.js.map +1 -1
  23. package/lib/cjs/components/PageItemResizer.js +37 -43
  24. package/lib/cjs/components/PageItemResizer.js.map +1 -1
  25. package/lib/cjs/components/Panels/AllSlidesPanel/AllSlidesPanel.js +1 -3
  26. package/lib/cjs/components/Panels/AllSlidesPanel/AllSlidesPanel.js.map +1 -1
  27. package/lib/cjs/components/Panels/AllSlidesPanel/PageList.js +0 -6
  28. package/lib/cjs/components/Panels/AllSlidesPanel/PageList.js.map +1 -1
  29. package/lib/cjs/components/Panels/LeftPanel/LeftPanel.js +1 -4
  30. package/lib/cjs/components/Panels/LeftPanel/LeftPanel.js.map +1 -1
  31. package/lib/cjs/components/Panels/LeftPanel/LeftPanelOpener.js +6 -7
  32. package/lib/cjs/components/Panels/LeftPanel/LeftPanelOpener.js.map +1 -1
  33. package/lib/cjs/components/Panels/RightPanel/RightPanel.js +7 -7
  34. package/lib/cjs/components/Panels/RightPanel/RightPanel.js.map +1 -1
  35. package/lib/cjs/components/Panels/RightPanel/RightPanelToggler.js +9 -10
  36. package/lib/cjs/components/Panels/RightPanel/RightPanelToggler.js.map +1 -1
  37. package/lib/cjs/components/Panels/SlidesPanel/SlidesPanel.js +1 -3
  38. package/lib/cjs/components/Panels/SlidesPanel/SlidesPanel.js.map +1 -1
  39. package/lib/cjs/components/Panels/SlidesPanel/SlidesPanelToggler.js +8 -6
  40. package/lib/cjs/components/Panels/SlidesPanel/SlidesPanelToggler.js.map +1 -1
  41. package/lib/cjs/components/ReportItemsWrapper.js +5 -11
  42. package/lib/cjs/components/ReportItemsWrapper.js.map +1 -1
  43. package/lib/cjs/components/Settings/PageLayer/LayerDragOverlay.js +2 -4
  44. package/lib/cjs/components/Settings/PageLayer/LayerDragOverlay.js.map +1 -1
  45. package/lib/cjs/components/Settings/PageLayer/LayerItem.js +12 -7
  46. package/lib/cjs/components/Settings/PageLayer/LayerItem.js.map +1 -1
  47. package/lib/cjs/components/Settings/PageLayer/PageLayer.js +2 -4
  48. package/lib/cjs/components/Settings/PageLayer/PageLayer.js.map +1 -1
  49. package/lib/cjs/components/TextEditor/CustomToolbar/CustomToolbarWrapper.js +3 -8
  50. package/lib/cjs/components/TextEditor/CustomToolbar/CustomToolbarWrapper.js.map +1 -1
  51. package/lib/cjs/constants/texts.js +0 -1
  52. package/lib/cjs/constants/texts.js.map +1 -1
  53. package/lib/cjs/contexts/BuilderContext.js +47 -23
  54. package/lib/cjs/contexts/BuilderContext.js.map +1 -1
  55. package/lib/cjs/styles/_jfReportsPages.scss +8 -1
  56. package/lib/cjs/utils/functions.js +124 -34
  57. package/lib/cjs/utils/functions.js.map +1 -1
  58. package/lib/cjs/utils/hooks.js +7 -7
  59. package/lib/cjs/utils/hooks.js.map +1 -1
  60. package/lib/cjs/utils/useKeyboardActions.js +263 -0
  61. package/lib/cjs/utils/useKeyboardActions.js.map +1 -0
  62. package/lib/cjs/utils/useMarqueeSelection.js +156 -0
  63. package/lib/cjs/utils/useMarqueeSelection.js.map +1 -0
  64. package/lib/esm/components/AlignmentGuides.js +28 -18
  65. package/lib/esm/components/AlignmentGuides.js.map +1 -1
  66. package/lib/esm/components/Builder/ContextMenu.js +4 -1
  67. package/lib/esm/components/Builder/ContextMenu.js.map +1 -1
  68. package/lib/esm/components/Builder/DraggableLayer.js +1 -5
  69. package/lib/esm/components/Builder/DraggableLayer.js.map +1 -1
  70. package/lib/esm/components/Builder/Element.js +7 -4
  71. package/lib/esm/components/Builder/Element.js.map +1 -1
  72. package/lib/esm/components/Builder/Page.js +58 -64
  73. package/lib/esm/components/Builder/Page.js.map +1 -1
  74. package/lib/esm/components/Builder/Scene.js +32 -253
  75. package/lib/esm/components/Builder/Scene.js.map +1 -1
  76. package/lib/esm/components/Builder/SelectionBox.js +42 -0
  77. package/lib/esm/components/Builder/SelectionBox.js.map +1 -0
  78. package/lib/esm/components/DraggableItem/DraggableItem.js +80 -137
  79. package/lib/esm/components/DraggableItem/DraggableItem.js.map +1 -1
  80. package/lib/esm/components/DraggableItem/DraggableItemActions.js +72 -28
  81. package/lib/esm/components/DraggableItem/DraggableItemActions.js.map +1 -1
  82. package/lib/esm/components/DraggableItem/DraggableItemLayer.js +9 -9
  83. package/lib/esm/components/DraggableItem/DraggableItemLayer.js.map +1 -1
  84. package/lib/esm/components/PageItemResizer.js +38 -44
  85. package/lib/esm/components/PageItemResizer.js.map +1 -1
  86. package/lib/esm/components/Panels/AllSlidesPanel/AllSlidesPanel.js +2 -4
  87. package/lib/esm/components/Panels/AllSlidesPanel/AllSlidesPanel.js.map +1 -1
  88. package/lib/esm/components/Panels/AllSlidesPanel/PageList.js +0 -6
  89. package/lib/esm/components/Panels/AllSlidesPanel/PageList.js.map +1 -1
  90. package/lib/esm/components/Panels/LeftPanel/LeftPanel.js +3 -6
  91. package/lib/esm/components/Panels/LeftPanel/LeftPanel.js.map +1 -1
  92. package/lib/esm/components/Panels/LeftPanel/LeftPanelOpener.js +6 -7
  93. package/lib/esm/components/Panels/LeftPanel/LeftPanelOpener.js.map +1 -1
  94. package/lib/esm/components/Panels/RightPanel/RightPanel.js +7 -7
  95. package/lib/esm/components/Panels/RightPanel/RightPanel.js.map +1 -1
  96. package/lib/esm/components/Panels/RightPanel/RightPanelToggler.js +9 -10
  97. package/lib/esm/components/Panels/RightPanel/RightPanelToggler.js.map +1 -1
  98. package/lib/esm/components/Panels/SlidesPanel/SlidesPanel.js +2 -4
  99. package/lib/esm/components/Panels/SlidesPanel/SlidesPanel.js.map +1 -1
  100. package/lib/esm/components/Panels/SlidesPanel/SlidesPanelToggler.js +8 -6
  101. package/lib/esm/components/Panels/SlidesPanel/SlidesPanelToggler.js.map +1 -1
  102. package/lib/esm/components/ReportItemsWrapper.js +5 -11
  103. package/lib/esm/components/ReportItemsWrapper.js.map +1 -1
  104. package/lib/esm/components/Settings/PageLayer/LayerDragOverlay.js +2 -4
  105. package/lib/esm/components/Settings/PageLayer/LayerDragOverlay.js.map +1 -1
  106. package/lib/esm/components/Settings/PageLayer/LayerItem.js +12 -7
  107. package/lib/esm/components/Settings/PageLayer/LayerItem.js.map +1 -1
  108. package/lib/esm/components/Settings/PageLayer/PageLayer.js +2 -4
  109. package/lib/esm/components/Settings/PageLayer/PageLayer.js.map +1 -1
  110. package/lib/esm/components/TextEditor/CustomToolbar/CustomToolbarWrapper.js +3 -8
  111. package/lib/esm/components/TextEditor/CustomToolbar/CustomToolbarWrapper.js.map +1 -1
  112. package/lib/esm/constants/texts.js +0 -1
  113. package/lib/esm/constants/texts.js.map +1 -1
  114. package/lib/esm/contexts/BuilderContext.js +47 -23
  115. package/lib/esm/contexts/BuilderContext.js.map +1 -1
  116. package/lib/esm/styles/_jfReportsPages.scss +8 -1
  117. package/lib/esm/utils/functions.js +121 -34
  118. package/lib/esm/utils/functions.js.map +1 -1
  119. package/lib/esm/utils/hooks.js +7 -7
  120. package/lib/esm/utils/hooks.js.map +1 -1
  121. package/lib/esm/utils/useKeyboardActions.js +261 -0
  122. package/lib/esm/utils/useKeyboardActions.js.map +1 -0
  123. package/lib/esm/utils/useMarqueeSelection.js +154 -0
  124. package/lib/esm/utils/useMarqueeSelection.js.map +1 -0
  125. package/package.json +11 -7
@@ -1,6 +1,3 @@
1
- import 'core-js/modules/es.array.find.js';
2
- import 'core-js/modules/es.array.find-index.js';
3
- import 'core-js/modules/es.array.includes.js';
4
1
  import 'core-js/modules/es.array.map.js';
5
2
  import 'core-js/modules/es.number.constructor.js';
6
3
  import 'core-js/modules/es.number.is-nan.js';
@@ -8,20 +5,20 @@ import 'core-js/modules/es.number.to-fixed.js';
8
5
  import 'core-js/modules/es.object.to-string.js';
9
6
  import 'core-js/modules/es.regexp.to-string.js';
10
7
  import 'core-js/modules/web.dom-collections.for-each.js';
11
- import { useState, useRef, createRef, useEffect, useMemo, Fragment } from 'react';
8
+ import { useRef, createRef, useEffect, Fragment } from 'react';
12
9
  import { mainWrapper, viewport, canvas, page } from '../../constants/classNames.js';
13
10
  import ContextMenu from './ContextMenu.js';
14
11
  import PageActions from './PageActions.js';
15
12
  import PageAdder from './PageAdder.js';
16
13
  import ZoomControls from './ZoomControls.js';
14
+ import SelectionBox from './SelectionBox.js';
17
15
  import { useBuilderStore } from '../../contexts/BuilderContext.js';
18
16
  import { usePropStore } from '../../contexts/PropContext.js';
19
17
  import Page from './Page.js';
20
- import { calculateGuidePositions, findItemById, findItemsOnPage, getMostVisiblePage } from '../../utils/functions.js';
21
- import { useActiveElement, useEventListener } from '../../utils/hooks.js';
22
- import generateId from '../../utils/generateId.js';
23
- import { EVENT_IGNORED_ROLES } from '../../constants/eventIgnoredRoles.js';
18
+ import { calculateGuidePositions, findItemById, findItemsOnPage } from '../../utils/functions.js';
24
19
  import DraggableLayer from './DraggableLayer.js';
20
+ import useKeyboardActions from '../../utils/useKeyboardActions.js';
21
+ import useMarqueeSelection from '../../utils/useMarqueeSelection.js';
25
22
  import { jsxs, jsx } from 'react/jsx-runtime';
26
23
 
27
24
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -30,76 +27,45 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
30
27
 
31
28
  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
32
29
 
33
- function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
34
-
35
- function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
36
-
37
- 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); }
38
-
39
- 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; }
40
-
41
- function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
42
-
43
- function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
44
-
45
30
  var Scene = function Scene() {
46
31
  var pages = usePropStore(function (state) {
47
32
  return state.pages;
48
33
  });
49
- var onItemAdd = usePropStore(function (state) {
50
- return state.onItemAdd;
51
- });
52
- var onItemRemove = usePropStore(function (state) {
53
- return state.onItemRemove;
54
- });
55
- var onAnEventTrigger = usePropStore(function (state) {
56
- return state.onAnEventTrigger;
57
- });
58
34
  var settings = usePropStore(function (state) {
59
35
  return state.settings;
60
36
  });
61
- var onItemChange = usePropStore(function (state) {
62
- return state.onItemChange;
63
- });
64
- var activeElement = useBuilderStore(function (state) {
65
- return state.activeElement;
66
- });
67
37
  var contextMenuProps = useBuilderStore(function (state) {
68
38
  return state.contextMenuProps;
69
39
  });
70
- var isRightPanelOpen = useBuilderStore(function (state) {
71
- return state.isRightPanelOpen;
72
- });
73
- var setActiveElement = useBuilderStore(function (state) {
74
- return state.setActiveElement;
75
- });
76
40
  var setContextMenuProps = useBuilderStore(function (state) {
77
41
  return state.setContextMenuProps;
78
42
  });
79
- var setIsRightPanelOpen = useBuilderStore(function (state) {
80
- return state.setIsRightPanelOpen;
43
+ var setGuides = useBuilderStore(function (state) {
44
+ return state.setGuides;
81
45
  });
82
46
  var zoom = useBuilderStore(function (state) {
83
47
  return state.zoom;
84
48
  });
85
-
86
- var _useState = useState(null),
87
- _useState2 = _slicedToArray(_useState, 2),
88
- itemToPaste = _useState2[0],
89
- setItemToPaste = _useState2[1];
90
-
91
49
  var lastScrollPosition = useBuilderStore(function (state) {
92
50
  return state.lastScrollPosition;
93
51
  });
94
52
  var pageStyles = useRef({});
95
53
  var pageContainerStyles = useRef({});
96
54
  var viewPortRef = useRef({});
55
+ var canvasRef = useRef(null);
97
56
  /* Page Refs */
98
57
 
99
58
  var refs = useRef(pages.reduce(function (acc, curr) {
100
59
  acc[curr.id] = /*#__PURE__*/createRef(null);
101
60
  return acc;
102
- }, {})); // Update refs when new pages are added
61
+ }, {})); // Custom hooks
62
+
63
+ useKeyboardActions();
64
+
65
+ var _useMarqueeSelection = useMarqueeSelection(canvasRef),
66
+ selectionBox = _useMarqueeSelection.selectionBox,
67
+ selectionPageId = _useMarqueeSelection.selectionPageId; // Update refs when new pages are added
68
+
103
69
 
104
70
  useEffect(function () {
105
71
  pages.forEach(function (page) {
@@ -107,13 +73,10 @@ var Scene = function Scene() {
107
73
  refs.current[page.id] = /*#__PURE__*/createRef(null);
108
74
  }
109
75
  });
110
- }, [pages]);
111
- var isMultipleItemSelected = activeElement !== null && activeElement.length > 1;
112
- /* Calculate snap guides */
76
+ }, [pages]); // Calculate guides for snap functionality
113
77
 
114
- var keyDownCount = useRef(null);
115
- var guides = useMemo(function () {
116
- return pages.reduce(function (acc, page) {
78
+ useEffect(function () {
79
+ setGuides(pages.reduce(function (acc, page) {
117
80
  var _pageGuides = {};
118
81
  var pageRef = refs.current[page.id];
119
82
 
@@ -148,201 +111,14 @@ var Scene = function Scene() {
148
111
 
149
112
  acc[page.id] = _pageGuides;
150
113
  return acc;
151
- }, {});
152
- }, [pages, zoom]);
114
+ }, {}));
115
+ }, [pages, zoom, setGuides]); // Restore scroll position after mode change
116
+
153
117
  useEffect(function () {
154
118
  if (viewPortRef.current) {
155
119
  viewPortRef.current.scrollTop = lastScrollPosition;
156
120
  }
157
- }, [lastScrollPosition]); // set last scroll position after changing mode
158
-
159
- var foundItem = findItemById(activeElement === null ? null : activeElement[0], pages);
160
- var selectedItems = useActiveElement();
161
-
162
- var moveItemWithKeyboard = function moveItemWithKeyboard(event, direction, value) {
163
- event.preventDefault();
164
- selectedItems.forEach(function (item) {
165
- if (item.isLocked) {
166
- return false;
167
- }
168
-
169
- onItemChange({
170
- id: item.id
171
- }, _objectSpread(_objectSpread({}, item), {}, _defineProperty({}, direction, item[direction] + value)));
172
- });
173
- };
174
-
175
- var selectNextOrPrevElement = function selectNextOrPrevElement(event, deletedItem) {
176
- if (event.preventDefault) event.preventDefault();
177
- var referenceItem = deletedItem ? deletedItem : foundItem;
178
- var page = pages.find(function (_page) {
179
- return _page.id === referenceItem.pageID;
180
- });
181
- if (!page || page && !page.items.length) return setActiveElement(null);
182
- var items = page.items;
183
- var currentIndex = items.findIndex(function (item) {
184
- return item.id === referenceItem.id;
185
- }); // Pages are not updated in time so here is an unnecessary check
186
-
187
- if (items.length === 1 && deletedItem) {
188
- return setActiveElement(null);
189
- }
190
-
191
- if (event.shiftKey) {
192
- if (items[currentIndex - 1]) setActiveElement(items[currentIndex - 1].id);else setActiveElement(items[items.length - 1].id);
193
- } else if (items[currentIndex + 1]) {
194
- setActiveElement(items[currentIndex + 1].id);
195
- } else setActiveElement(items[0].id);
196
- };
197
-
198
- var onItemRemoveFromPage = function onItemRemoveFromPage(e) {
199
- // Firefox updates browser history on backspace
200
- e.preventDefault();
201
- if (isMultipleItemSelected) return;
202
-
203
- if (foundItem.isLocked) {
204
- return false;
205
- }
206
-
207
- setActiveElement(null);
208
- onItemRemove(foundItem);
209
- selectNextOrPrevElement({
210
- shiftKey: false
211
- }, foundItem);
212
- onAnEventTrigger('removeItem', foundItem.itemType);
213
- };
214
-
215
- var handlePaste = function handlePaste() {
216
- if (isMultipleItemSelected) return;
217
- var itemID = generateId();
218
- var pageID = getMostVisiblePage(true);
219
- var offset = itemToPaste.pageID === pageID ? 50 : 0;
220
-
221
- var item = _objectSpread(_objectSpread({}, itemToPaste), {}, {
222
- id: itemID,
223
- left: itemToPaste.left + offset,
224
- pageID: pageID,
225
- top: itemToPaste.top + offset
226
- });
227
-
228
- onItemAdd(item);
229
- onAnEventTrigger('pasteItem', itemToPaste.itemType);
230
- setActiveElement(itemID); // set as last reference to paste
231
-
232
- setItemToPaste(item);
233
- };
234
-
235
- var keyboardActions = function keyboardActions(event) {
236
- var key = event.key,
237
- metaKey = event.metaKey,
238
- shiftKey = event.shiftKey;
239
-
240
- if (metaKey) {
241
- if (key === 'l') {
242
- // Lock
243
- if (isMultipleItemSelected) return;
244
- event.preventDefault(); // Dont focus to URL bar
245
-
246
- onAnEventTrigger(foundItem.isLocked ? 'unlockReportItem' : 'lockReportItem', foundItem.itemType);
247
- onItemChange({
248
- id: foundItem.id
249
- }, {
250
- isLocked: foundItem.isLocked ? false : true
251
- });
252
- return;
253
- }
254
-
255
- if (key === 'c' || key === 'x') {
256
- if (isMultipleItemSelected) return; // Copy or Cut
257
-
258
- if (key === 'x') {
259
- onItemRemoveFromPage(event);
260
- onAnEventTrigger('cutItem', foundItem.itemType);
261
- } else {
262
- onAnEventTrigger('copyItem', foundItem.itemType);
263
- }
264
-
265
- setItemToPaste(foundItem);
266
- return;
267
- }
268
-
269
- if (foundItem && key === 'd') {
270
- if (isMultipleItemSelected) return; // Duplicate
271
-
272
- event.preventDefault();
273
- var itemID = generateId();
274
- onItemAdd(_objectSpread(_objectSpread({}, foundItem), {}, {
275
- id: itemID,
276
- left: foundItem.left + 50,
277
- top: foundItem.top + 50
278
- }));
279
- onAnEventTrigger('duplicateItem', foundItem.itemType);
280
- setActiveElement(itemID);
281
-
282
- if (!isRightPanelOpen) {
283
- setIsRightPanelOpen(true);
284
- }
285
-
286
- return;
287
- }
288
- }
289
-
290
- keyDownCount.current++;
291
- var movementValue = shiftKey ? 10 : 1 + keyDownCount.current; // Others
292
-
293
- switch (key) {
294
- case 'Backspace':
295
- return onItemRemoveFromPage(event);
296
-
297
- case 'Delete':
298
- return onItemRemoveFromPage(event);
299
-
300
- case 'Escape':
301
- return setActiveElement(null);
302
-
303
- case 'ArrowLeft':
304
- return moveItemWithKeyboard(event, 'left', -movementValue);
305
-
306
- case 'ArrowUp':
307
- return moveItemWithKeyboard(event, 'top', -movementValue);
308
-
309
- case 'ArrowRight':
310
- return moveItemWithKeyboard(event, 'left', movementValue);
311
-
312
- case 'ArrowDown':
313
- return moveItemWithKeyboard(event, 'top', movementValue);
314
-
315
- case 'Tab':
316
- return selectNextOrPrevElement(event);
317
- }
318
- };
319
-
320
- var shouldSuppressKeyboardEvent = function shouldSuppressKeyboardEvent(e) {
321
- return EVENT_IGNORED_ROLES.some(function (role) {
322
- return e.target.closest("[role=".concat(role, "]"));
323
- });
324
- };
325
-
326
- var handleKeyboardEvent = function handleKeyboardEvent(e) {
327
- var shouldPaste = itemToPaste && e.key === 'v' && e.metaKey;
328
-
329
- if (shouldSuppressKeyboardEvent(e)) {
330
- return;
331
- }
332
-
333
- if (activeElement && !shouldPaste) {
334
- var arrowKeyCodes = ['ArrowLeft', 'ArrowUp', 'ArrowDown', 'ArrowBottom'];
335
- if (arrowKeyCodes.includes(e.key)) e.preventDefault();
336
- keyboardActions(e);
337
- } else if (shouldPaste) {
338
- handlePaste();
339
- }
340
- };
341
-
342
- useEventListener('keydown', handleKeyboardEvent);
343
- useEventListener('keyup', function () {
344
- keyDownCount.current = 0;
345
- });
121
+ }, [lastScrollPosition]);
346
122
  var _settings$reportLayou = settings.reportLayoutHeight,
347
123
  reportLayoutHeight = _settings$reportLayou === void 0 ? 794 : _settings$reportLayou,
348
124
  _settings$reportLayou2 = settings.reportLayoutWidth,
@@ -367,13 +143,13 @@ var Scene = function Scene() {
367
143
  // Builder.js
368
144
  className: mainWrapper,
369
145
  children: [/*#__PURE__*/jsx(DraggableLayer, {
370
- guides: guides,
371
146
  pageRefs: refs.current
372
147
  }), /*#__PURE__*/jsx("div", {
373
148
  ref: viewPortRef,
374
149
  className: viewport,
375
150
  "data-zoom": zoom,
376
151
  children: /*#__PURE__*/jsxs("div", {
152
+ ref: canvasRef,
377
153
  className: canvas,
378
154
  children: [pages.map(function (page$1, index) {
379
155
  return (
@@ -383,20 +159,23 @@ var Scene = function Scene() {
383
159
  children: [/*#__PURE__*/jsx(PageActions, {
384
160
  order: page$1.order,
385
161
  pageID: page$1.id
386
- }), /*#__PURE__*/jsx("div", {
162
+ }), /*#__PURE__*/jsxs("div", {
387
163
  ref: refs.current[page$1.id],
388
164
  className: page,
389
165
  "data-id": page$1.id,
390
166
  "data-order": page$1.order,
391
167
  id: "presentation-page-".concat(page$1.id.toString()),
392
- style: pageStyles.current,
393
- children: /*#__PURE__*/jsx(Page, {
394
- guides: guides,
168
+ style: _objectSpread(_objectSpread({}, pageStyles.current), {}, {
169
+ position: 'relative'
170
+ }),
171
+ children: [/*#__PURE__*/jsx(Page, {
395
172
  items: page$1.items,
396
173
  page: page$1,
397
174
  pageIndex: index,
398
175
  style: pageContainerStyles.current
399
- })
176
+ }), selectionPageId === page$1.id && selectionBox && /*#__PURE__*/jsx(SelectionBox, {
177
+ selectionBox: selectionBox
178
+ })]
400
179
  }, "page_".concat(page$1.id))]
401
180
  }, page$1.id)
402
181
  );
@@ -1 +1 @@
1
- {"version":3,"file":"Scene.js","sources":["../../../../src/components/Builder/Scene.js"],"sourcesContent":["/* eslint-disable complexity */\nimport {\n createRef,\n Fragment,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport * as classNames from '../../constants/classNames';\nimport ContextMenu from './ContextMenu';\nimport PageActions from './PageActions';\nimport PageAdder from './PageAdder';\nimport ZoomControls from './ZoomControls';\nimport { useBuilderStore } from '../../contexts/BuilderContext';\nimport { usePropStore } from '../../contexts/PropContext';\nimport Page from './Page';\nimport {\n calculateGuidePositions,\n findItemById,\n findItemsOnPage,\n getMostVisiblePage,\n} from '../../utils/functions';\nimport { useActiveElement, useEventListener } from '../../utils/hooks';\nimport generateId from '../../utils/generateId';\nimport { EVENT_IGNORED_ROLES } from '../../constants/eventIgnoredRoles';\nimport DraggableLayer from './DraggableLayer';\n\nconst Scene = () => {\n const pages = usePropStore(state => state.pages);\n const onItemAdd = usePropStore(state => state.onItemAdd);\n const onItemRemove = usePropStore(state => state.onItemRemove);\n const onAnEventTrigger = usePropStore(state => state.onAnEventTrigger);\n const settings = usePropStore(state => state.settings);\n const onItemChange = usePropStore(state => state.onItemChange);\n\n const activeElement = useBuilderStore(state => state.activeElement);\n const contextMenuProps = useBuilderStore(state => state.contextMenuProps);\n const isRightPanelOpen = useBuilderStore(state => state.isRightPanelOpen);\n const setActiveElement = useBuilderStore(state => state.setActiveElement);\n const setContextMenuProps = useBuilderStore(state => state.setContextMenuProps);\n const setIsRightPanelOpen = useBuilderStore(state => state.setIsRightPanelOpen);\n const zoom = useBuilderStore(state => state.zoom);\n\n const [itemToPaste, setItemToPaste] = useState(null);\n const lastScrollPosition = useBuilderStore(state => state.lastScrollPosition);\n\n const pageStyles = useRef({});\n const pageContainerStyles = useRef({});\n const viewPortRef = useRef({});\n\n /* Page Refs */\n const refs = useRef(pages.reduce((acc, curr) => {\n acc[curr.id] = createRef(null);\n return acc;\n }, {}));\n\n // Update refs when new pages are added\n useEffect(() => {\n pages.forEach(page => {\n if (!refs.current[page.id]) {\n refs.current[page.id] = createRef(null);\n }\n });\n }, [pages]);\n\n const isMultipleItemSelected = activeElement !== null && activeElement.length > 1;\n\n /* Calculate snap guides */\n const keyDownCount = useRef(null);\n\n const guides = useMemo(() => {\n return pages.reduce((acc, page) => {\n const _pageGuides = {};\n const pageRef = refs.current[page.id];\n if (pageRef && pageRef.current) {\n const {\n height, left, top, width,\n } = pageRef.current.getBoundingClientRect();\n const boundingBox = {\n height, left, top, width,\n };\n _pageGuides.boundingBox = {\n x: calculateGuidePositions(boundingBox, 'x').map(value => value - boundingBox.left),\n y: calculateGuidePositions(boundingBox, 'y').map(value => value - boundingBox.top),\n };\n page.items.forEach(item => {\n _pageGuides[item.id] = {\n x: calculateGuidePositions(item, 'x', zoom),\n y: calculateGuidePositions(item, 'y', zoom),\n };\n });\n }\n acc[page.id] = _pageGuides;\n return acc;\n }, {});\n }, [pages, zoom]);\n\n useEffect(() => {\n if (viewPortRef.current) {\n viewPortRef.current.scrollTop = lastScrollPosition;\n }\n }, [lastScrollPosition]); // set last scroll position after changing mode\n\n const foundItem = findItemById(activeElement === null ? null : activeElement[0], pages);\n\n const selectedItems = useActiveElement();\n const moveItemWithKeyboard = (event, direction, value) => {\n event.preventDefault();\n selectedItems.forEach(item => {\n if (item.isLocked) {\n return false;\n }\n onItemChange(\n { id: item.id },\n {\n ...item,\n [direction]: item[direction] + value,\n },\n );\n });\n };\n\n const selectNextOrPrevElement = (event, deletedItem) => {\n if (event.preventDefault) event.preventDefault();\n const referenceItem = deletedItem ? deletedItem : foundItem;\n\n const page = pages.find(_page => _page.id === referenceItem.pageID);\n if (!page || (page && !page.items.length)) return setActiveElement(null);\n const { items } = page;\n\n const currentIndex = items.findIndex(item => item.id === referenceItem.id);\n\n // Pages are not updated in time so here is an unnecessary check\n if (items.length === 1 && deletedItem) {\n return setActiveElement(null);\n }\n\n if (event.shiftKey) {\n if (items[currentIndex - 1]) setActiveElement(items[currentIndex - 1].id);\n else setActiveElement(items[items.length - 1].id);\n } else if (items[currentIndex + 1]) {\n setActiveElement(items[currentIndex + 1].id);\n } else setActiveElement(items[0].id);\n };\n\n const onItemRemoveFromPage = e => {\n // Firefox updates browser history on backspace\n e.preventDefault();\n if (isMultipleItemSelected) return;\n if (foundItem.isLocked) {\n return false;\n }\n setActiveElement(null);\n onItemRemove(foundItem);\n selectNextOrPrevElement({ shiftKey: false }, foundItem);\n onAnEventTrigger('removeItem', foundItem.itemType);\n };\n\n const handlePaste = () => {\n if (isMultipleItemSelected) return;\n const itemID = generateId();\n const pageID = getMostVisiblePage(true);\n const offset = itemToPaste.pageID === pageID ? 50 : 0;\n\n const item = {\n ...itemToPaste,\n id: itemID,\n left: itemToPaste.left + offset,\n pageID,\n top: itemToPaste.top + offset,\n };\n\n onItemAdd(item);\n\n onAnEventTrigger('pasteItem', itemToPaste.itemType);\n setActiveElement(itemID);\n // set as last reference to paste\n setItemToPaste(item);\n };\n\n const keyboardActions = event => {\n const {\n key,\n metaKey,\n shiftKey,\n } = event;\n\n if (metaKey) {\n if (key === 'l') {\n // Lock\n if (isMultipleItemSelected) return;\n event.preventDefault(); // Dont focus to URL bar\n onAnEventTrigger(\n foundItem.isLocked ? 'unlockReportItem' : 'lockReportItem',\n foundItem.itemType,\n );\n onItemChange(\n { id: foundItem.id },\n { isLocked: foundItem.isLocked ? false : true },\n );\n return;\n }\n\n if (key === 'c' || key === 'x') {\n if (isMultipleItemSelected) return;\n // Copy or Cut\n if (key === 'x') {\n onItemRemoveFromPage(event);\n onAnEventTrigger('cutItem', foundItem.itemType);\n } else {\n onAnEventTrigger('copyItem', foundItem.itemType);\n }\n\n setItemToPaste(foundItem);\n return;\n }\n\n if (foundItem && key === 'd') {\n if (isMultipleItemSelected) return;\n // Duplicate\n event.preventDefault();\n const itemID = generateId();\n onItemAdd({\n ...foundItem,\n id: itemID,\n left: foundItem.left + 50,\n top: foundItem.top + 50,\n });\n onAnEventTrigger('duplicateItem', foundItem.itemType);\n setActiveElement(itemID);\n if (!isRightPanelOpen) {\n setIsRightPanelOpen(true);\n }\n return;\n }\n }\n\n keyDownCount.current++;\n const movementValue = shiftKey ? 10 : 1 + keyDownCount.current;\n\n // Others\n switch (key) {\n case 'Backspace': return onItemRemoveFromPage(event);\n case 'Delete': return onItemRemoveFromPage(event);\n case 'Escape': return setActiveElement(null);\n case 'ArrowLeft': return moveItemWithKeyboard(event, 'left', -movementValue);\n case 'ArrowUp': return moveItemWithKeyboard(event, 'top', -movementValue);\n case 'ArrowRight': return moveItemWithKeyboard(event, 'left', movementValue);\n case 'ArrowDown': return moveItemWithKeyboard(event, 'top', movementValue);\n case 'Tab': return selectNextOrPrevElement(event);\n default:\n }\n };\n\n const shouldSuppressKeyboardEvent = e => (\n EVENT_IGNORED_ROLES.some(role => e.target.closest(`[role=${role}]`))\n );\n\n const handleKeyboardEvent = e => {\n const shouldPaste = itemToPaste && e.key === 'v' && e.metaKey;\n\n if (shouldSuppressKeyboardEvent(e)) {\n return;\n }\n\n if (activeElement && !shouldPaste) {\n const arrowKeyCodes = ['ArrowLeft', 'ArrowUp', 'ArrowDown', 'ArrowBottom'];\n if (arrowKeyCodes.includes(e.key)) e.preventDefault();\n keyboardActions(e);\n } else if (shouldPaste) {\n handlePaste();\n }\n };\n\n useEventListener('keydown', handleKeyboardEvent);\n useEventListener('keyup', () => { keyDownCount.current = 0; });\n\n const { reportLayoutHeight = 794, reportLayoutWidth = 1123 } = settings;\n\n // TODO: Some strange shit is going on here on first render\n let width = parseInt(reportLayoutWidth, 10);\n let height = parseInt(reportLayoutHeight, 10);\n width = Number.isNaN(width) ? 1 : width;\n height = Number.isNaN(height) ? 1 : height;\n const zoomToUse = Number.isNaN(zoom) ? 1 : zoom;\n\n pageStyles.current = {\n height: parseFloat((height * zoomToUse).toFixed(1)),\n width: parseFloat((width * zoomToUse).toFixed(1)),\n };\n pageContainerStyles.current = {\n height,\n transform: `scale(${zoomToUse})`,\n transformOrigin: '0 0',\n width,\n };\n\n return (\n <main // Builder.js\n className={classNames.mainWrapper}\n >\n <DraggableLayer\n guides={guides}\n pageRefs={refs.current}\n />\n <div\n ref={viewPortRef}\n className={classNames.viewport}\n data-zoom={zoom}\n >\n <div\n className={classNames.canvas}\n >\n {pages.map((page, index) => (\n // TODO: This part can be moved into a different component\n <Fragment key={page.id}>\n <PageActions\n order={page.order}\n pageID={page.id}\n />\n <div\n key={`page_${page.id}`}\n ref={refs.current[page.id]}\n className={classNames.page}\n data-id={page.id}\n data-order={page.order}\n id={`presentation-page-${page.id.toString()}`}\n style={pageStyles.current}\n >\n <Page\n guides={guides}\n items={page.items}\n page={page}\n pageIndex={index}\n style={pageContainerStyles.current}\n />\n </div>\n </Fragment>\n ))}\n <PageAdder />\n </div>\n </div>\n <ZoomControls />\n {contextMenuProps\n && (\n <ContextMenu\n exceptionalClasses={['contextMenu-button']}\n height={height}\n item={findItemById(contextMenuProps.id, pages)}\n items={findItemsOnPage(contextMenuProps.pageID, pages)}\n onClickOutside={() => setContextMenuProps(null)}\n position={contextMenuProps.position}\n width={width}\n />\n )}\n </main>\n );\n};\n\nexport default Scene;\n"],"names":["Scene","pages","usePropStore","state","onItemAdd","onItemRemove","onAnEventTrigger","settings","onItemChange","activeElement","useBuilderStore","contextMenuProps","isRightPanelOpen","setActiveElement","setContextMenuProps","setIsRightPanelOpen","zoom","useState","itemToPaste","setItemToPaste","lastScrollPosition","pageStyles","useRef","pageContainerStyles","viewPortRef","refs","reduce","acc","curr","id","createRef","useEffect","forEach","page","current","isMultipleItemSelected","length","keyDownCount","guides","useMemo","_pageGuides","pageRef","getBoundingClientRect","height","left","top","width","boundingBox","x","calculateGuidePositions","map","value","y","items","item","scrollTop","foundItem","findItemById","selectedItems","useActiveElement","moveItemWithKeyboard","event","direction","preventDefault","isLocked","selectNextOrPrevElement","deletedItem","referenceItem","find","_page","pageID","currentIndex","findIndex","shiftKey","onItemRemoveFromPage","e","itemType","handlePaste","itemID","generateId","getMostVisiblePage","offset","keyboardActions","key","metaKey","movementValue","shouldSuppressKeyboardEvent","EVENT_IGNORED_ROLES","some","role","target","closest","handleKeyboardEvent","shouldPaste","arrowKeyCodes","includes","useEventListener","reportLayoutHeight","reportLayoutWidth","parseInt","Number","isNaN","zoomToUse","parseFloat","toFixed","transform","transformOrigin","_jsxs","classNames","_jsx","index","order","toString","findItemsOnPage","position"],"mappings":"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"}
1
+ {"version":3,"file":"Scene.js","sources":["../../../../src/components/Builder/Scene.js"],"sourcesContent":["/* eslint-disable complexity */\nimport {\n createRef,\n Fragment,\n useEffect,\n useRef,\n} from 'react';\nimport * as classNames from '../../constants/classNames';\nimport ContextMenu from './ContextMenu';\nimport PageActions from './PageActions';\nimport PageAdder from './PageAdder';\nimport ZoomControls from './ZoomControls';\nimport SelectionBox from './SelectionBox';\nimport { useBuilderStore } from '../../contexts/BuilderContext';\nimport { usePropStore } from '../../contexts/PropContext';\nimport Page from './Page';\nimport {\n calculateGuidePositions,\n findItemById,\n findItemsOnPage,\n} from '../../utils/functions';\nimport DraggableLayer from './DraggableLayer';\nimport useKeyboardActions from '../../utils/useKeyboardActions';\nimport useMarqueeSelection from '../../utils/useMarqueeSelection';\n\nconst Scene = () => {\n const pages = usePropStore(state => state.pages);\n const settings = usePropStore(state => state.settings);\n const contextMenuProps = useBuilderStore(state => state.contextMenuProps);\n const setContextMenuProps = useBuilderStore(state => state.setContextMenuProps);\n const setGuides = useBuilderStore(state => state.setGuides);\n const zoom = useBuilderStore(state => state.zoom);\n const lastScrollPosition = useBuilderStore(state => state.lastScrollPosition);\n\n const pageStyles = useRef({});\n const pageContainerStyles = useRef({});\n const viewPortRef = useRef({});\n const canvasRef = useRef(null);\n\n /* Page Refs */\n const refs = useRef(pages.reduce((acc, curr) => {\n acc[curr.id] = createRef(null);\n return acc;\n }, {}));\n\n // Custom hooks\n useKeyboardActions();\n const { selectionBox, selectionPageId } = useMarqueeSelection(canvasRef);\n\n // Update refs when new pages are added\n useEffect(() => {\n pages.forEach(page => {\n if (!refs.current[page.id]) {\n refs.current[page.id] = createRef(null);\n }\n });\n }, [pages]);\n\n // Calculate guides for snap functionality\n useEffect(() => {\n setGuides(pages.reduce((acc, page) => {\n const _pageGuides = {};\n const pageRef = refs.current[page.id];\n if (pageRef && pageRef.current) {\n const {\n height, left, top, width,\n } = pageRef.current.getBoundingClientRect();\n const boundingBox = {\n height, left, top, width,\n };\n _pageGuides.boundingBox = {\n x: calculateGuidePositions(boundingBox, 'x').map(value => value - boundingBox.left),\n y: calculateGuidePositions(boundingBox, 'y').map(value => value - boundingBox.top),\n };\n page.items.forEach(item => {\n _pageGuides[item.id] = {\n x: calculateGuidePositions(item, 'x', zoom),\n y: calculateGuidePositions(item, 'y', zoom),\n };\n });\n }\n acc[page.id] = _pageGuides;\n return acc;\n }, {}));\n }, [pages, zoom, setGuides]);\n\n // Restore scroll position after mode change\n useEffect(() => {\n if (viewPortRef.current) {\n viewPortRef.current.scrollTop = lastScrollPosition;\n }\n }, [lastScrollPosition]);\n\n const { reportLayoutHeight = 794, reportLayoutWidth = 1123 } = settings;\n\n // TODO: Some strange shit is going on here on first render\n let width = parseInt(reportLayoutWidth, 10);\n let height = parseInt(reportLayoutHeight, 10);\n width = Number.isNaN(width) ? 1 : width;\n height = Number.isNaN(height) ? 1 : height;\n const zoomToUse = Number.isNaN(zoom) ? 1 : zoom;\n\n pageStyles.current = {\n height: parseFloat((height * zoomToUse).toFixed(1)),\n width: parseFloat((width * zoomToUse).toFixed(1)),\n };\n pageContainerStyles.current = {\n height,\n transform: `scale(${zoomToUse})`,\n transformOrigin: '0 0',\n width,\n };\n\n return (\n <main // Builder.js\n className={classNames.mainWrapper}\n >\n <DraggableLayer\n pageRefs={refs.current}\n />\n <div\n ref={viewPortRef}\n className={classNames.viewport}\n data-zoom={zoom}\n >\n <div\n ref={canvasRef}\n className={classNames.canvas}\n >\n {pages.map((page, index) => (\n // TODO: This part can be moved into a different component\n <Fragment key={page.id}>\n <PageActions\n order={page.order}\n pageID={page.id}\n />\n <div\n key={`page_${page.id}`}\n ref={refs.current[page.id]}\n className={classNames.page}\n data-id={page.id}\n data-order={page.order}\n id={`presentation-page-${page.id.toString()}`}\n style={{ ...pageStyles.current, position: 'relative' }}\n >\n <Page\n items={page.items}\n page={page}\n pageIndex={index}\n style={pageContainerStyles.current}\n />\n {selectionPageId === page.id && selectionBox && (\n <SelectionBox selectionBox={selectionBox} />\n )}\n </div>\n </Fragment>\n ))}\n <PageAdder />\n </div>\n </div>\n <ZoomControls />\n {contextMenuProps\n && (\n <ContextMenu\n exceptionalClasses={['contextMenu-button']}\n height={height}\n item={findItemById(contextMenuProps.id, pages)}\n items={findItemsOnPage(contextMenuProps.pageID, pages)}\n onClickOutside={() => setContextMenuProps(null)}\n position={contextMenuProps.position}\n width={width}\n />\n )}\n </main>\n );\n};\n\nexport default Scene;\n"],"names":["Scene","pages","usePropStore","state","settings","contextMenuProps","useBuilderStore","setContextMenuProps","setGuides","zoom","lastScrollPosition","pageStyles","useRef","pageContainerStyles","viewPortRef","canvasRef","refs","reduce","acc","curr","id","createRef","useKeyboardActions","useMarqueeSelection","selectionBox","selectionPageId","useEffect","forEach","page","current","_pageGuides","pageRef","getBoundingClientRect","height","left","top","width","boundingBox","x","calculateGuidePositions","map","value","y","items","item","scrollTop","reportLayoutHeight","reportLayoutWidth","parseInt","Number","isNaN","zoomToUse","parseFloat","toFixed","transform","transformOrigin","_jsxs","classNames","_jsx","index","order","toString","position","findItemById","findItemsOnPage","pageID"],"mappings":"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"}
@@ -0,0 +1,42 @@
1
+ import PropTypes from 'prop-types';
2
+ import { jsx } from 'react/jsx-runtime';
3
+
4
+ var SelectionBox = function SelectionBox(_ref) {
5
+ var selectionBox = _ref.selectionBox;
6
+ var endX = selectionBox.endX,
7
+ endY = selectionBox.endY,
8
+ startX = selectionBox.startX,
9
+ startY = selectionBox.startY;
10
+ var left = Math.min(startX, endX);
11
+ var top = Math.min(startY, endY);
12
+ var width = Math.abs(endX - startX);
13
+ var height = Math.abs(endY - startY);
14
+ var style = {
15
+ backgroundColor: '#0099FF4A',
16
+ border: '2px solid #0066C3',
17
+ borderRadius: '2px',
18
+ height: height,
19
+ left: left,
20
+ pointerEvents: 'none',
21
+ position: 'absolute',
22
+ top: top,
23
+ width: width,
24
+ zIndex: 100000
25
+ };
26
+ return /*#__PURE__*/jsx("div", {
27
+ className: "selection-box",
28
+ style: style
29
+ });
30
+ };
31
+
32
+ SelectionBox.propTypes = {
33
+ selectionBox: PropTypes.shape({
34
+ endX: PropTypes.number,
35
+ endY: PropTypes.number,
36
+ startX: PropTypes.number,
37
+ startY: PropTypes.number
38
+ })
39
+ };
40
+
41
+ export default SelectionBox;
42
+ //# sourceMappingURL=SelectionBox.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SelectionBox.js","sources":["../../../../src/components/Builder/SelectionBox.js"],"sourcesContent":["import PropTypes from 'prop-types';\n\nconst SelectionBox = ({ selectionBox }) => {\n const {\n endX, endY, startX, startY,\n } = selectionBox;\n\n const left = Math.min(startX, endX);\n const top = Math.min(startY, endY);\n const width = Math.abs(endX - startX);\n const height = Math.abs(endY - startY);\n\n const style = {\n backgroundColor: '#0099FF4A',\n border: '2px solid #0066C3',\n borderRadius: '2px',\n height,\n left,\n pointerEvents: 'none',\n position: 'absolute',\n top,\n width,\n zIndex: 100000,\n };\n\n return (\n <div\n className=\"selection-box\"\n style={style}\n />\n );\n};\n\nSelectionBox.propTypes = {\n selectionBox: PropTypes.shape({\n endX: PropTypes.number,\n endY: PropTypes.number,\n startX: PropTypes.number,\n startY: PropTypes.number,\n }),\n};\n\nexport default SelectionBox;\n"],"names":["SelectionBox","selectionBox","endX","endY","startX","startY","left","Math","min","top","width","abs","height","style","backgroundColor","border","borderRadius","pointerEvents","position","zIndex","_jsx","propTypes","PropTypes","shape","number"],"mappings":";;;IAEMA,YAAY,GAAG,SAAfA,YAAe,OAAsB;AAAA,MAAnBC,YAAmB,QAAnBA,YAAmB;AACzC,MACEC,IADF,GAEID,YAFJ,CACEC,IADF;AAAA,MACQC,IADR,GAEIF,YAFJ,CACQE,IADR;AAAA,MACcC,MADd,GAEIH,YAFJ,CACcG,MADd;AAAA,MACsBC,MADtB,GAEIJ,YAFJ,CACsBI,MADtB;AAIA,MAAMC,IAAI,GAAGC,IAAI,CAACC,GAAL,CAASJ,MAAT,EAAiBF,IAAjB,CAAb;AACA,MAAMO,GAAG,GAAGF,IAAI,CAACC,GAAL,CAASH,MAAT,EAAiBF,IAAjB,CAAZ;AACA,MAAMO,KAAK,GAAGH,IAAI,CAACI,GAAL,CAAST,IAAI,GAAGE,MAAhB,CAAd;AACA,MAAMQ,MAAM,GAAGL,IAAI,CAACI,GAAL,CAASR,IAAI,GAAGE,MAAhB,CAAf;AAEA,MAAMQ,KAAK,GAAG;AACZC,IAAAA,eAAe,EAAE,WADL;AAEZC,IAAAA,MAAM,EAAE,mBAFI;AAGZC,IAAAA,YAAY,EAAE,KAHF;AAIZJ,IAAAA,MAAM,EAANA,MAJY;AAKZN,IAAAA,IAAI,EAAJA,IALY;AAMZW,IAAAA,aAAa,EAAE,MANH;AAOZC,IAAAA,QAAQ,EAAE,UAPE;AAQZT,IAAAA,GAAG,EAAHA,GARY;AASZC,IAAAA,KAAK,EAALA,KATY;AAUZS,IAAAA,MAAM,EAAE;AAVI,GAAd;AAaA,sBACEC;AACE,IAAA,SAAS,EAAC,eADZ;AAEE,IAAA,KAAK,EAAEP;AAFT,IADF;AAMD;;AAEDb,YAAY,CAACqB,SAAb,GAAyB;AACvBpB,EAAAA,YAAY,EAAEqB,SAAS,CAACC,KAAV,CAAgB;AAC5BrB,IAAAA,IAAI,EAAEoB,SAAS,CAACE,MADY;AAE5BrB,IAAAA,IAAI,EAAEmB,SAAS,CAACE,MAFY;AAG5BpB,IAAAA,MAAM,EAAEkB,SAAS,CAACE,MAHU;AAI5BnB,IAAAA,MAAM,EAAEiB,SAAS,CAACE;AAJU,GAAhB;AADS,CAAzB;;;;"}