@zsviczian/excalidraw 0.17.1-obsidian-23 → 0.17.1-obsidian-25

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 (35) hide show
  1. package/dist/excalidraw.development.js +21 -21
  2. package/dist/excalidraw.production.min.js +1 -1
  3. package/package.json +1 -1
  4. package/types/excalidraw/actions/actionAddToLibrary.d.ts +3 -3
  5. package/types/excalidraw/actions/actionAlign.d.ts +6 -6
  6. package/types/excalidraw/actions/actionBoundText.d.ts +3 -3
  7. package/types/excalidraw/actions/actionCanvas.d.ts +14 -14
  8. package/types/excalidraw/actions/actionClipboard.d.ts +12 -12
  9. package/types/excalidraw/actions/actionDeleteSelected.d.ts +3 -3
  10. package/types/excalidraw/actions/actionDistribute.d.ts +2 -2
  11. package/types/excalidraw/actions/actionDuplicateSelection.d.ts +1 -1
  12. package/types/excalidraw/actions/actionElementLock.d.ts +2 -2
  13. package/types/excalidraw/actions/actionExport.d.ts +11 -11
  14. package/types/excalidraw/actions/actionFinalize.d.ts +2 -2
  15. package/types/excalidraw/actions/actionFlip.d.ts +2 -2
  16. package/types/excalidraw/actions/actionFrame.d.ts +378 -4
  17. package/types/excalidraw/actions/actionGroup.d.ts +378 -2
  18. package/types/excalidraw/actions/actionLinearEditor.d.ts +1 -1
  19. package/types/excalidraw/actions/actionLink.d.ts +1 -1
  20. package/types/excalidraw/actions/actionMenu.d.ts +3 -3
  21. package/types/excalidraw/actions/actionNavigate.d.ts +2 -2
  22. package/types/excalidraw/actions/actionProperties.d.ts +13 -13
  23. package/types/excalidraw/actions/actionSelectAll.d.ts +1 -1
  24. package/types/excalidraw/actions/actionStyles.d.ts +5 -2
  25. package/types/excalidraw/actions/actionTextAutoResize.d.ts +1 -1
  26. package/types/excalidraw/actions/actionToggleGridMode.d.ts +1 -1
  27. package/types/excalidraw/actions/actionToggleObjectsSnapMode.d.ts +1 -1
  28. package/types/excalidraw/actions/actionToggleStats.d.ts +1 -1
  29. package/types/excalidraw/actions/actionToggleViewMode.d.ts +1 -1
  30. package/types/excalidraw/actions/actionToggleZenMode.d.ts +1 -1
  31. package/types/excalidraw/actions/actionZindex.d.ts +4 -4
  32. package/types/excalidraw/components/App.d.ts +2 -1
  33. package/types/excalidraw/element/embeddable.d.ts +1 -1
  34. package/types/excalidraw/element/newElement.d.ts +2 -0
  35. package/types/excalidraw/store.d.ts +32 -2
package/dist/excalidraw.development.js CHANGED
@@ -540,7 +540,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
540
540
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
541
541
 
542
542
  "use strict";
543
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"createRedoAction\": () => (/* binding */ createRedoAction),\n/* harmony export */ \"createUndoAction\": () => (/* binding */ createUndoAction)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var _components_icons__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../components/icons */ \"./components/icons.tsx\");\n/* harmony import */ var _components_ToolButton__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../components/ToolButton */ \"./components/ToolButton.tsx\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../i18n */ \"./i18n.ts\");\n/* harmony import */ var _history__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../history */ \"./history.ts\");\n/* harmony import */ var _keys__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../keys */ \"./keys.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../store */ \"./store.ts\");\n/* harmony import */ var _hooks_useEmitter__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../hooks/useEmitter */ \"./hooks/useEmitter.ts\");\n\n\n\n\n\n\n\n\n\n\n\nconst writeData = (appState, updater) => {\n if (!appState.multiElement && !appState.resizingElement && !appState.editingElement && !appState.draggingElement) {\n const result = updater();\n\n if (!result) {\n return {\n storeAction: _store__WEBPACK_IMPORTED_MODULE_8__.StoreAction.NONE\n };\n }\n\n const [nextElementsMap, nextAppState] = result;\n const nextElements = Array.from(nextElementsMap.values());\n return {\n appState: nextAppState,\n elements: nextElements,\n storeAction: _store__WEBPACK_IMPORTED_MODULE_8__.StoreAction.UPDATE\n };\n }\n\n return {\n storeAction: _store__WEBPACK_IMPORTED_MODULE_8__.StoreAction.NONE\n };\n};\n\nconst createUndoAction = (history, store) => ({\n name: \"undo\",\n label: \"buttons.undo\",\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_1__.UndoIcon,\n trackEvent: {\n category: \"history\"\n },\n viewMode: false,\n perform: (elements, appState) => writeData(appState, () => history.undo((0,_utils__WEBPACK_IMPORTED_MODULE_6__.arrayToMap)(elements), // TODO: #7348 refactor action manager to already include `SceneElementsMap`\n appState, store.snapshot)),\n keyTest: event => event[_keys__WEBPACK_IMPORTED_MODULE_5__.KEYS.CTRL_OR_CMD] && event.key.toLowerCase() === _keys__WEBPACK_IMPORTED_MODULE_5__.KEYS.Z && !event.shiftKey,\n PanelComponent: ({\n updateData,\n data\n }) => {\n const {\n isUndoStackEmpty\n } = (0,_hooks_useEmitter__WEBPACK_IMPORTED_MODULE_9__.useEmitter)(history.onHistoryChangedEmitter, new _history__WEBPACK_IMPORTED_MODULE_4__.HistoryChangedEvent());\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ToolButton__WEBPACK_IMPORTED_MODULE_2__.ToolButton, {\n type: \"button\",\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_1__.UndoIcon,\n \"aria-label\": (0,_i18n__WEBPACK_IMPORTED_MODULE_3__.t)(\"buttons.undo\"),\n onClick: updateData,\n size: (data === null || data === void 0 ? void 0 : data.size) || \"medium\",\n disabled: isUndoStackEmpty\n });\n }\n});\nconst createRedoAction = (history, store) => ({\n name: \"redo\",\n label: \"buttons.redo\",\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_1__.RedoIcon,\n trackEvent: {\n category: \"history\"\n },\n viewMode: false,\n perform: (elements, appState) => writeData(appState, () => history.redo((0,_utils__WEBPACK_IMPORTED_MODULE_6__.arrayToMap)(elements), // TODO: #7348 refactor action manager to already include `SceneElementsMap`\n appState, store.snapshot)),\n keyTest: event => event[_keys__WEBPACK_IMPORTED_MODULE_5__.KEYS.CTRL_OR_CMD] && event.shiftKey && event.key.toLowerCase() === _keys__WEBPACK_IMPORTED_MODULE_5__.KEYS.Z || _constants__WEBPACK_IMPORTED_MODULE_7__.isWindows && event.ctrlKey && !event.shiftKey && event.key === _keys__WEBPACK_IMPORTED_MODULE_5__.KEYS.Y,\n PanelComponent: ({\n updateData,\n data\n }) => {\n const {\n isRedoStackEmpty\n } = (0,_hooks_useEmitter__WEBPACK_IMPORTED_MODULE_9__.useEmitter)(history.onHistoryChangedEmitter, new _history__WEBPACK_IMPORTED_MODULE_4__.HistoryChangedEvent());\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ToolButton__WEBPACK_IMPORTED_MODULE_2__.ToolButton, {\n type: \"button\",\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_1__.RedoIcon,\n \"aria-label\": (0,_i18n__WEBPACK_IMPORTED_MODULE_3__.t)(\"buttons.redo\"),\n onClick: updateData,\n size: (data === null || data === void 0 ? void 0 : data.size) || \"medium\",\n disabled: isRedoStackEmpty\n });\n }\n});\n\n//# sourceURL=webpack://ExcalidrawLib/./actions/actionHistory.tsx?");
543
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"createRedoAction\": () => (/* binding */ createRedoAction),\n/* harmony export */ \"createUndoAction\": () => (/* binding */ createUndoAction)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var _components_icons__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../components/icons */ \"./components/icons.tsx\");\n/* harmony import */ var _components_ToolButton__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../components/ToolButton */ \"./components/ToolButton.tsx\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../i18n */ \"./i18n.ts\");\n/* harmony import */ var _history__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../history */ \"./history.ts\");\n/* harmony import */ var _keys__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../keys */ \"./keys.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../store */ \"./store.ts\");\n/* harmony import */ var _hooks_useEmitter__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../hooks/useEmitter */ \"./hooks/useEmitter.ts\");\n\n\n\n\n\n\n\n\n\n\n\nconst writeData = (appState, updater) => {\n if (!appState.multiElement && !appState.resizingElement && !appState.editingElement && !appState.draggingElement) {\n const result = updater();\n\n if (!result) {\n return {\n storeAction: _store__WEBPACK_IMPORTED_MODULE_8__.StoreAction.NONE\n };\n }\n\n const [nextElementsMap, nextAppState] = result;\n const nextElements = Array.from(nextElementsMap.values());\n return {\n appState: nextAppState,\n elements: nextElements,\n storeAction: _store__WEBPACK_IMPORTED_MODULE_8__.StoreAction.UPDATE\n };\n }\n\n return {\n storeAction: _store__WEBPACK_IMPORTED_MODULE_8__.StoreAction.NONE\n };\n};\n\nconst createUndoAction = (history, store) => ({\n name: \"undo\",\n label: \"buttons.undo\",\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_1__.UndoIcon,\n trackEvent: {\n category: \"history\"\n },\n viewMode: false,\n perform: (elements, appState) => writeData(appState, () => history.undo((0,_utils__WEBPACK_IMPORTED_MODULE_6__.arrayToMap)(elements), // TODO: #7348 refactor action manager to already include `SceneElementsMap`\n appState, store.snapshot)),\n keyTest: event => event[_keys__WEBPACK_IMPORTED_MODULE_5__.KEYS.CTRL_OR_CMD] && event.key.toLowerCase() === _keys__WEBPACK_IMPORTED_MODULE_5__.KEYS.Z && !event.shiftKey,\n PanelComponent: ({\n updateData,\n data\n }) => {\n const {\n isUndoStackEmpty\n } = (0,_hooks_useEmitter__WEBPACK_IMPORTED_MODULE_9__.useEmitter)(history.onHistoryChangedEmitter, new _history__WEBPACK_IMPORTED_MODULE_4__.HistoryChangedEvent(history.isUndoStackEmpty, history.isRedoStackEmpty));\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ToolButton__WEBPACK_IMPORTED_MODULE_2__.ToolButton, {\n type: \"button\",\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_1__.UndoIcon,\n \"aria-label\": (0,_i18n__WEBPACK_IMPORTED_MODULE_3__.t)(\"buttons.undo\"),\n onClick: updateData,\n size: (data === null || data === void 0 ? void 0 : data.size) || \"medium\",\n disabled: isUndoStackEmpty,\n \"data-testid\": \"button-undo\"\n });\n }\n});\nconst createRedoAction = (history, store) => ({\n name: \"redo\",\n label: \"buttons.redo\",\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_1__.RedoIcon,\n trackEvent: {\n category: \"history\"\n },\n viewMode: false,\n perform: (elements, appState) => writeData(appState, () => history.redo((0,_utils__WEBPACK_IMPORTED_MODULE_6__.arrayToMap)(elements), // TODO: #7348 refactor action manager to already include `SceneElementsMap`\n appState, store.snapshot)),\n keyTest: event => event[_keys__WEBPACK_IMPORTED_MODULE_5__.KEYS.CTRL_OR_CMD] && event.shiftKey && event.key.toLowerCase() === _keys__WEBPACK_IMPORTED_MODULE_5__.KEYS.Z || _constants__WEBPACK_IMPORTED_MODULE_7__.isWindows && event.ctrlKey && !event.shiftKey && event.key === _keys__WEBPACK_IMPORTED_MODULE_5__.KEYS.Y,\n PanelComponent: ({\n updateData,\n data\n }) => {\n const {\n isRedoStackEmpty\n } = (0,_hooks_useEmitter__WEBPACK_IMPORTED_MODULE_9__.useEmitter)(history.onHistoryChangedEmitter, new _history__WEBPACK_IMPORTED_MODULE_4__.HistoryChangedEvent(history.isUndoStackEmpty, history.isRedoStackEmpty));\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ToolButton__WEBPACK_IMPORTED_MODULE_2__.ToolButton, {\n type: \"button\",\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_1__.RedoIcon,\n \"aria-label\": (0,_i18n__WEBPACK_IMPORTED_MODULE_3__.t)(\"buttons.redo\"),\n onClick: updateData,\n size: (data === null || data === void 0 ? void 0 : data.size) || \"medium\",\n disabled: isRedoStackEmpty,\n \"data-testid\": \"button-redo\"\n });\n }\n});\n\n//# sourceURL=webpack://ExcalidrawLib/./actions/actionHistory.tsx?");
544
544
 
545
545
  /***/ }),
546
546
 
@@ -760,7 +760,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
760
760
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
761
761
 
762
762
  "use strict";
763
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"trackEvent\": () => (/* binding */ trackEvent)\n/* harmony export */ });\n// place here categories that you want to track. We want to track just a\n// small subset of categories at a given time.\nconst ALLOWED_CATEGORIES_TO_TRACK = [\"ai\", \"command_palette\"];\nconst trackEvent = (category, action, label, value) => {\n try {\n // prettier-ignore\n if (typeof window === \"undefined\" || ({\"VITE_APP_BACKEND_V2_GET_URL\":\"https://json-dev.excalidraw.com/api/v2/\",\"VITE_APP_BACKEND_V2_POST_URL\":\"https://json-dev.excalidraw.com/api/v2/post/\",\"VITE_APP_LIBRARY_URL\":\"https://libraries.excalidraw.com\",\"VITE_APP_LIBRARY_BACKEND\":\"https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries\",\"VITE_APP_WS_SERVER_URL\":\"http://localhost:3002\",\"VITE_APP_PLUS_LP\":\"https://plus.excalidraw.com\",\"VITE_APP_PLUS_APP\":\"https://app.excalidraw.com\",\"VITE_APP_AI_BACKEND\":\"http://localhost:3015\",\"VITE_APP_FIREBASE_CONFIG\":\"{\\\"apiKey\\\":\\\"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8\\\",\\\"authDomain\\\":\\\"excalidraw-oss-dev.firebaseapp.com\\\",\\\"projectId\\\":\\\"excalidraw-oss-dev\\\",\\\"storageBucket\\\":\\\"excalidraw-oss-dev.appspot.com\\\",\\\"messagingSenderId\\\":\\\"664559512677\\\",\\\"appId\\\":\\\"1:664559512677:web:a385181f2928d328a7aa8c\\\"}\",\"VITE_APP_DEV_ENABLE_SW\":\"\",\"VITE_APP_DEV_DISABLE_LIVE_RELOAD\":\"\",\"VITE_APP_DISABLE_TRACKING\":\"true\",\"FAST_REFRESH\":\"false\",\"VITE_APP_PORT\":\"3000\",\"VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX\":\"\",\"VITE_APP_COLLAPSE_OVERLAY\":\"true\",\"VITE_APP_ENABLE_ESLINT\":\"true\",\"VITE_PKG_NAME\":\"@zsviczian/excalidraw\",\"VITE_PKG_VERSION\":\"0.17.1-obsidian-22\",\"VITE_IS_EXCALIDRAW_NPM_PACKAGE\":true}).VITE_WORKER_ID // comment out to debug locally\n || \"development\" === \"production\") {\n return;\n }\n\n if (!ALLOWED_CATEGORIES_TO_TRACK.includes(category)) {\n return;\n }\n\n if (true) {\n console.info(\"trackEvent\", {\n category,\n action,\n label,\n value\n });\n }\n\n if (window.sa_event) {\n window.sa_event(action, {\n category,\n label,\n value\n });\n }\n } catch (error) {\n console.error(\"error during analytics\", error);\n }\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./analytics.ts?");
763
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"trackEvent\": () => (/* binding */ trackEvent)\n/* harmony export */ });\n// place here categories that you want to track. We want to track just a\n// small subset of categories at a given time.\nconst ALLOWED_CATEGORIES_TO_TRACK = [\"ai\", \"command_palette\"];\nconst trackEvent = (category, action, label, value) => {\n try {\n // prettier-ignore\n if (typeof window === \"undefined\" || ({\"VITE_APP_BACKEND_V2_GET_URL\":\"https://json-dev.excalidraw.com/api/v2/\",\"VITE_APP_BACKEND_V2_POST_URL\":\"https://json-dev.excalidraw.com/api/v2/post/\",\"VITE_APP_LIBRARY_URL\":\"https://libraries.excalidraw.com\",\"VITE_APP_LIBRARY_BACKEND\":\"https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries\",\"VITE_APP_WS_SERVER_URL\":\"http://localhost:3002\",\"VITE_APP_PLUS_LP\":\"https://plus.excalidraw.com\",\"VITE_APP_PLUS_APP\":\"https://app.excalidraw.com\",\"VITE_APP_AI_BACKEND\":\"http://localhost:3015\",\"VITE_APP_FIREBASE_CONFIG\":\"{\\\"apiKey\\\":\\\"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8\\\",\\\"authDomain\\\":\\\"excalidraw-oss-dev.firebaseapp.com\\\",\\\"projectId\\\":\\\"excalidraw-oss-dev\\\",\\\"storageBucket\\\":\\\"excalidraw-oss-dev.appspot.com\\\",\\\"messagingSenderId\\\":\\\"664559512677\\\",\\\"appId\\\":\\\"1:664559512677:web:a385181f2928d328a7aa8c\\\"}\",\"VITE_APP_DEV_ENABLE_SW\":\"\",\"VITE_APP_DEV_DISABLE_LIVE_RELOAD\":\"\",\"VITE_APP_DISABLE_TRACKING\":\"true\",\"FAST_REFRESH\":\"false\",\"VITE_APP_PORT\":\"3000\",\"VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX\":\"\",\"VITE_APP_COLLAPSE_OVERLAY\":\"true\",\"VITE_APP_ENABLE_ESLINT\":\"true\",\"VITE_PKG_NAME\":\"@zsviczian/excalidraw\",\"VITE_PKG_VERSION\":\"0.17.1-obsidian-24\",\"VITE_IS_EXCALIDRAW_NPM_PACKAGE\":true}).VITE_WORKER_ID // comment out to debug locally\n || \"development\" === \"production\") {\n return;\n }\n\n if (!ALLOWED_CATEGORIES_TO_TRACK.includes(category)) {\n return;\n }\n\n if (true) {\n console.info(\"trackEvent\", {\n category,\n action,\n label,\n value\n });\n }\n\n if (window.sa_event) {\n window.sa_event(action, {\n category,\n label,\n value\n });\n }\n } catch (error) {\n console.error(\"error during analytics\", error);\n }\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./analytics.ts?");
764
764
 
765
765
  /***/ }),
766
766
 
@@ -804,7 +804,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
804
804
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
805
805
 
806
806
  "use strict";
807
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"AppStateChange\": () => (/* binding */ AppStateChange),\n/* harmony export */ \"ElementsChange\": () => (/* binding */ ElementsChange)\n/* harmony export */ });\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./constants */ \"./constants.ts\");\n/* harmony import */ var _element_binding__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./element/binding */ \"./element/binding.ts\");\n/* harmony import */ var _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./element/linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _element_mutateElement__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./element/mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _element_textElement__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./element/textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _fractionalIndex__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./fractionalIndex */ \"./fractionalIndex.ts\");\n/* harmony import */ var _groups__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./groups */ \"./groups.ts\");\n/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./store */ \"./store.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./utils */ \"./utils.ts\");\nvar __rest = undefined && undefined.__rest || function (s, e) {\n var t = {};\n\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];\n\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];\n }\n return t;\n};\n\n\n\n\n\n\n\n\n\n\n\n/**\r\n * Represents the difference between two objects of the same type.\r\n *\r\n * Both `deleted` and `inserted` partials represent the same set of added, removed or updated properties, where:\r\n * - `deleted` is a set of all the deleted values\r\n * - `inserted` is a set of all the inserted (added, updated) values\r\n *\r\n * Keeping it as pure object (without transient state, side-effects, etc.), so we won't have to instantiate it on load.\r\n */\n\nclass Delta {\n constructor(deleted, inserted) {\n this.deleted = deleted;\n this.inserted = inserted;\n }\n\n static create(deleted, inserted, modifier, modifierOptions) {\n const modifiedDeleted = modifier && modifierOptions !== \"inserted\" ? modifier(deleted) : deleted;\n const modifiedInserted = modifier && modifierOptions !== \"deleted\" ? modifier(inserted) : inserted;\n return new Delta(modifiedDeleted, modifiedInserted);\n }\n /**\r\n * Calculates the delta between two objects.\r\n *\r\n * @param prevObject - The previous state of the object.\r\n * @param nextObject - The next state of the object.\r\n *\r\n * @returns new delta instance.\r\n */\n\n\n static calculate(prevObject, nextObject, modifier, postProcess) {\n if (prevObject === nextObject) {\n return Delta.empty();\n }\n\n const deleted = {};\n const inserted = {}; // O(n^3) here for elements, but it's not as bad as it looks:\n // - we do this only on store recordings, not on every frame (not for ephemerals)\n // - we do this only on previously detected changed elements\n // - we do shallow compare only on the first level of properties (not going any deeper)\n // - # of properties is reasonably small\n\n for (const key of this.distinctKeysIterator(\"full\", prevObject, nextObject)) {\n deleted[key] = prevObject[key];\n inserted[key] = nextObject[key];\n }\n\n const [processedDeleted, processedInserted] = postProcess ? postProcess(deleted, inserted) : [deleted, inserted];\n return Delta.create(processedDeleted, processedInserted, modifier);\n }\n\n static empty() {\n return new Delta({}, {});\n }\n\n static isEmpty(delta) {\n return !Object.keys(delta.deleted).length && !Object.keys(delta.inserted).length;\n }\n /**\r\n * Merges deleted and inserted object partials.\r\n */\n\n\n static mergeObjects(prev, added, removed) {\n const cloned = Object.assign({}, prev);\n\n for (const key of Object.keys(removed)) {\n delete cloned[key];\n }\n\n return Object.assign(Object.assign({}, cloned), added);\n }\n /**\r\n * Merges deleted and inserted array partials.\r\n */\n\n\n static mergeArrays(prev, added, removed, predicate) {\n return Object.values(Delta.mergeObjects((0,_utils__WEBPACK_IMPORTED_MODULE_9__.arrayToObject)(prev !== null && prev !== void 0 ? prev : [], predicate), (0,_utils__WEBPACK_IMPORTED_MODULE_9__.arrayToObject)(added !== null && added !== void 0 ? added : [], predicate), (0,_utils__WEBPACK_IMPORTED_MODULE_9__.arrayToObject)(removed !== null && removed !== void 0 ? removed : [], predicate)));\n }\n /**\r\n * Diff object partials as part of the `postProcess`.\r\n */\n\n\n static diffObjects(deleted, inserted, property, setValue) {\n var _a, _b;\n\n if (!deleted[property] && !inserted[property]) {\n return;\n }\n\n if (typeof deleted[property] === \"object\" || typeof inserted[property] === \"object\") {\n const deletedObject = (_a = deleted[property]) !== null && _a !== void 0 ? _a : {};\n const insertedObject = (_b = inserted[property]) !== null && _b !== void 0 ? _b : {};\n const deletedDifferences = Delta.getLeftDifferences(deletedObject, insertedObject).reduce((acc, curr) => {\n acc[curr] = setValue(deletedObject[curr]);\n return acc;\n }, {});\n const insertedDifferences = Delta.getRightDifferences(deletedObject, insertedObject).reduce((acc, curr) => {\n acc[curr] = setValue(insertedObject[curr]);\n return acc;\n }, {});\n\n if (Object.keys(deletedDifferences).length || Object.keys(insertedDifferences).length) {\n Reflect.set(deleted, property, deletedDifferences);\n Reflect.set(inserted, property, insertedDifferences);\n } else {\n Reflect.deleteProperty(deleted, property);\n Reflect.deleteProperty(inserted, property);\n }\n }\n }\n /**\r\n * Diff array partials as part of the `postProcess`.\r\n */\n\n\n static diffArrays(deleted, inserted, property, groupBy) {\n if (!deleted[property] && !inserted[property]) {\n return;\n }\n\n if (Array.isArray(deleted[property]) || Array.isArray(inserted[property])) {\n const deletedArray = Array.isArray(deleted[property]) ? deleted[property] : [];\n const insertedArray = Array.isArray(inserted[property]) ? inserted[property] : [];\n const deletedDifferences = (0,_utils__WEBPACK_IMPORTED_MODULE_9__.arrayToObject)(Delta.getLeftDifferences((0,_utils__WEBPACK_IMPORTED_MODULE_9__.arrayToObject)(deletedArray, groupBy), (0,_utils__WEBPACK_IMPORTED_MODULE_9__.arrayToObject)(insertedArray, groupBy)));\n const insertedDifferences = (0,_utils__WEBPACK_IMPORTED_MODULE_9__.arrayToObject)(Delta.getRightDifferences((0,_utils__WEBPACK_IMPORTED_MODULE_9__.arrayToObject)(deletedArray, groupBy), (0,_utils__WEBPACK_IMPORTED_MODULE_9__.arrayToObject)(insertedArray, groupBy)));\n\n if (Object.keys(deletedDifferences).length || Object.keys(insertedDifferences).length) {\n const deletedValue = deletedArray.filter(x => deletedDifferences[groupBy ? groupBy(x) : String(x)]);\n const insertedValue = insertedArray.filter(x => insertedDifferences[groupBy ? groupBy(x) : String(x)]);\n Reflect.set(deleted, property, deletedValue);\n Reflect.set(inserted, property, insertedValue);\n } else {\n Reflect.deleteProperty(deleted, property);\n Reflect.deleteProperty(inserted, property);\n }\n }\n }\n /**\r\n * Compares if object1 contains any different value compared to the object2.\r\n */\n\n\n static isLeftDifferent(object1, object2, skipShallowCompare = false) {\n const anyDistinctKey = this.distinctKeysIterator(\"left\", object1, object2, skipShallowCompare).next().value;\n return !!anyDistinctKey;\n }\n /**\r\n * Compares if object2 contains any different value compared to the object1.\r\n */\n\n\n static isRightDifferent(object1, object2, skipShallowCompare = false) {\n const anyDistinctKey = this.distinctKeysIterator(\"right\", object1, object2, skipShallowCompare).next().value;\n return !!anyDistinctKey;\n }\n /**\r\n * Returns all the object1 keys that have distinct values.\r\n */\n\n\n static getLeftDifferences(object1, object2, skipShallowCompare = false) {\n return Array.from(this.distinctKeysIterator(\"left\", object1, object2, skipShallowCompare));\n }\n /**\r\n * Returns all the object2 keys that have distinct values.\r\n */\n\n\n static getRightDifferences(object1, object2, skipShallowCompare = false) {\n return Array.from(this.distinctKeysIterator(\"right\", object1, object2, skipShallowCompare));\n }\n /**\r\n * Iterator comparing values of object properties based on the passed joining strategy.\r\n *\r\n * @yields keys of properties with different values\r\n *\r\n * WARN: it's based on shallow compare performed only on the first level and doesn't go deeper than that.\r\n */\n\n\n static *distinctKeysIterator(join, object1, object2, skipShallowCompare = false) {\n if (object1 === object2) {\n return;\n }\n\n let keys = [];\n\n if (join === \"left\") {\n keys = Object.keys(object1);\n } else if (join === \"right\") {\n keys = Object.keys(object2);\n } else if (join === \"full\") {\n keys = Array.from(new Set([...Object.keys(object1), ...Object.keys(object2)]));\n } else {\n (0,_utils__WEBPACK_IMPORTED_MODULE_9__.assertNever)(join, `Unknown distinctKeysIterator's join param \"${join}\"`, true);\n }\n\n for (const key of keys) {\n const object1Value = object1[key];\n const object2Value = object2[key];\n\n if (object1Value !== object2Value) {\n if (!skipShallowCompare && typeof object1Value === \"object\" && typeof object2Value === \"object\" && object1Value !== null && object2Value !== null && (0,_utils__WEBPACK_IMPORTED_MODULE_9__.isShallowEqual)(object1Value, object2Value)) {\n continue;\n }\n\n yield key;\n }\n }\n }\n\n}\n\nclass AppStateChange {\n constructor(delta) {\n this.delta = delta;\n }\n\n static calculate(prevAppState, nextAppState) {\n const delta = Delta.calculate(prevAppState, nextAppState, undefined, AppStateChange.postProcess);\n return new AppStateChange(delta);\n }\n\n static empty() {\n return new AppStateChange(Delta.create({}, {}));\n }\n\n inverse() {\n const inversedDelta = Delta.create(this.delta.inserted, this.delta.deleted);\n return new AppStateChange(inversedDelta);\n }\n\n applyTo(appState, nextElements) {\n try {\n const {\n selectedElementIds: removedSelectedElementIds = {},\n selectedGroupIds: removedSelectedGroupIds = {}\n } = this.delta.deleted;\n\n const _a = this.delta.inserted,\n {\n selectedElementIds: addedSelectedElementIds = {},\n selectedGroupIds: addedSelectedGroupIds = {},\n selectedLinearElementId,\n editingLinearElementId\n } = _a,\n directlyApplicablePartial = __rest(_a, [\"selectedElementIds\", \"selectedGroupIds\", \"selectedLinearElementId\", \"editingLinearElementId\"]);\n\n const mergedSelectedElementIds = Delta.mergeObjects(appState.selectedElementIds, addedSelectedElementIds, removedSelectedElementIds);\n const mergedSelectedGroupIds = Delta.mergeObjects(appState.selectedGroupIds, addedSelectedGroupIds, removedSelectedGroupIds);\n const selectedLinearElement = selectedLinearElementId && nextElements.has(selectedLinearElementId) ? new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_2__.LinearElementEditor(nextElements.get(selectedLinearElementId)) : null;\n const editingLinearElement = editingLinearElementId && nextElements.has(editingLinearElementId) ? new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_2__.LinearElementEditor(nextElements.get(editingLinearElementId)) : null;\n const nextAppState = Object.assign(Object.assign(Object.assign({}, appState), directlyApplicablePartial), {\n selectedElementIds: mergedSelectedElementIds,\n selectedGroupIds: mergedSelectedGroupIds,\n selectedLinearElement: typeof selectedLinearElementId !== \"undefined\" ? selectedLinearElement // element was either inserted or deleted\n : appState.selectedLinearElement,\n editingLinearElement: typeof editingLinearElementId !== \"undefined\" ? editingLinearElement // element was either inserted or deleted\n : appState.editingLinearElement\n });\n const constainsVisibleChanges = this.filterInvisibleChanges(appState, nextAppState, nextElements);\n return [nextAppState, constainsVisibleChanges];\n } catch (e) {\n // shouldn't really happen, but just in case\n console.error(`Couldn't apply appstate change`, e);\n\n if (true) {\n throw e;\n }\n\n return [appState, false];\n }\n }\n\n isEmpty() {\n return Delta.isEmpty(this.delta);\n }\n /**\r\n * It is necessary to post process the partials in case of reference values,\r\n * for which we need to calculate the real diff between `deleted` and `inserted`.\r\n */\n\n\n static postProcess(deleted, inserted) {\n try {\n Delta.diffObjects(deleted, inserted, \"selectedElementIds\", // ts language server has a bit trouble resolving this, so we are giving it a little push\n _ => true);\n Delta.diffObjects(deleted, inserted, \"selectedGroupIds\", prevValue => prevValue !== null && prevValue !== void 0 ? prevValue : false);\n } catch (e) {\n // if postprocessing fails it does not make sense to bubble up, but let's make sure we know about it\n console.error(`Couldn't postprocess appstate change deltas.`);\n\n if (true) {\n throw e;\n }\n } finally {\n return [deleted, inserted];\n }\n }\n /**\r\n * Mutates `nextAppState` be filtering out state related to deleted elements.\r\n *\r\n * @returns `true` if a visible change is found, `false` otherwise.\r\n */\n\n\n filterInvisibleChanges(prevAppState, nextAppState, nextElements) {\n // TODO: #7348 we could still get an empty undo/redo, as we assume that previous appstate does not contain references to deleted elements\n // which is not always true - i.e. now we do cleanup appstate during history, but we do not do it during remote updates\n const prevObservedAppState = (0,_store__WEBPACK_IMPORTED_MODULE_8__.getObservedAppState)(prevAppState);\n const nextObservedAppState = (0,_store__WEBPACK_IMPORTED_MODULE_8__.getObservedAppState)(nextAppState);\n const containsStandaloneDifference = Delta.isRightDifferent(AppStateChange.stripElementsProps(prevObservedAppState), AppStateChange.stripElementsProps(nextObservedAppState));\n const containsElementsDifference = Delta.isRightDifferent(AppStateChange.stripStandaloneProps(prevObservedAppState), AppStateChange.stripStandaloneProps(nextObservedAppState));\n\n if (!containsStandaloneDifference && !containsElementsDifference) {\n // no change in appstate was detected\n return false;\n }\n\n const visibleDifferenceFlag = {\n value: containsStandaloneDifference\n };\n\n if (containsElementsDifference) {\n // filter invisible changes on each iteration\n const changedElementsProps = Delta.getRightDifferences(AppStateChange.stripStandaloneProps(prevObservedAppState), AppStateChange.stripStandaloneProps(nextObservedAppState));\n let nonDeletedGroupIds = new Set();\n\n if (changedElementsProps.includes(\"editingGroupId\") || changedElementsProps.includes(\"selectedGroupIds\")) {\n // this one iterates through all the non deleted elements, so make sure it's not done twice\n nonDeletedGroupIds = (0,_groups__WEBPACK_IMPORTED_MODULE_7__.getNonDeletedGroupIds)(nextElements);\n } // check whether delta properties are related to the existing non-deleted elements\n\n\n for (const key of changedElementsProps) {\n switch (key) {\n case \"selectedElementIds\":\n nextAppState[key] = AppStateChange.filterSelectedElements(nextAppState[key], nextElements, visibleDifferenceFlag);\n break;\n\n case \"selectedGroupIds\":\n nextAppState[key] = AppStateChange.filterSelectedGroups(nextAppState[key], nonDeletedGroupIds, visibleDifferenceFlag);\n break;\n\n case \"editingGroupId\":\n const editingGroupId = nextAppState[key];\n\n if (!editingGroupId) {\n // previously there was an editingGroup (assuming visible), now there is none\n visibleDifferenceFlag.value = true;\n } else if (nonDeletedGroupIds.has(editingGroupId)) {\n // previously there wasn't an editingGroup, now there is one which is visible\n visibleDifferenceFlag.value = true;\n } else {\n // there was assigned an editingGroup now, but it's related to deleted element\n nextAppState[key] = null;\n }\n\n break;\n\n case \"selectedLinearElementId\":\n case \"editingLinearElementId\":\n const appStateKey = AppStateChange.convertToAppStateKey(key);\n const linearElement = nextAppState[appStateKey];\n\n if (!linearElement) {\n // previously there was a linear element (assuming visible), now there is none\n visibleDifferenceFlag.value = true;\n } else {\n const element = nextElements.get(linearElement.elementId);\n\n if (element && !element.isDeleted) {\n // previously there wasn't a linear element, now there is one which is visible\n visibleDifferenceFlag.value = true;\n } else {\n // there was assigned a linear element now, but it's deleted\n nextAppState[appStateKey] = null;\n }\n }\n\n break;\n\n default:\n {\n (0,_utils__WEBPACK_IMPORTED_MODULE_9__.assertNever)(key, `Unknown ObservedElementsAppState's key \"${key}\"`, true);\n }\n }\n }\n }\n\n return visibleDifferenceFlag.value;\n }\n\n static convertToAppStateKey(key) {\n switch (key) {\n case \"selectedLinearElementId\":\n return \"selectedLinearElement\";\n\n case \"editingLinearElementId\":\n return \"editingLinearElement\";\n }\n }\n\n static filterSelectedElements(selectedElementIds, elements, visibleDifferenceFlag) {\n const ids = Object.keys(selectedElementIds);\n\n if (!ids.length) {\n // previously there were ids (assuming related to visible elements), now there are none\n visibleDifferenceFlag.value = true;\n return selectedElementIds;\n }\n\n const nextSelectedElementIds = Object.assign({}, selectedElementIds);\n\n for (const id of ids) {\n const element = elements.get(id);\n\n if (element && !element.isDeleted) {\n // there is a selected element id related to a visible element\n visibleDifferenceFlag.value = true;\n } else {\n delete nextSelectedElementIds[id];\n }\n }\n\n return nextSelectedElementIds;\n }\n\n static filterSelectedGroups(selectedGroupIds, nonDeletedGroupIds, visibleDifferenceFlag) {\n const ids = Object.keys(selectedGroupIds);\n\n if (!ids.length) {\n // previously there were ids (assuming related to visible groups), now there are none\n visibleDifferenceFlag.value = true;\n return selectedGroupIds;\n }\n\n const nextSelectedGroupIds = Object.assign({}, selectedGroupIds);\n\n for (const id of Object.keys(nextSelectedGroupIds)) {\n if (nonDeletedGroupIds.has(id)) {\n // there is a selected group id related to a visible group\n visibleDifferenceFlag.value = true;\n } else {\n delete nextSelectedGroupIds[id];\n }\n }\n\n return nextSelectedGroupIds;\n }\n\n static stripElementsProps(delta) {\n // WARN: Do not remove the type-casts as they here to ensure proper type checks\n const _a = delta,\n {\n editingGroupId,\n selectedGroupIds,\n selectedElementIds,\n editingLinearElementId,\n selectedLinearElementId\n } = _a,\n standaloneProps = __rest(_a, [\"editingGroupId\", \"selectedGroupIds\", \"selectedElementIds\", \"editingLinearElementId\", \"selectedLinearElementId\"]);\n\n return standaloneProps;\n }\n\n static stripStandaloneProps(delta) {\n // WARN: Do not remove the type-casts as they here to ensure proper type checks\n const _a = delta,\n {\n name,\n viewBackgroundColor\n } = _a,\n elementsProps = __rest(_a, [\"name\", \"viewBackgroundColor\"]);\n\n return elementsProps;\n }\n\n}\n/**\r\n * Elements change is a low level primitive to capture a change between two sets of elements.\r\n * It does so by encapsulating forward and backward `Delta`s, allowing to time-travel in both directions.\r\n */\n\nclass ElementsChange {\n constructor(added, removed, updated) {\n this.added = added;\n this.removed = removed;\n this.updated = updated;\n }\n\n static create(added, removed, updated, options = {\n shouldRedistribute: false\n }) {\n let change;\n\n if (options.shouldRedistribute) {\n const nextAdded = new Map();\n const nextRemoved = new Map();\n const nextUpdated = new Map();\n const deltas = [...added, ...removed, ...updated];\n\n for (const [id, delta] of deltas) {\n if (this.satisfiesAddition(delta)) {\n nextAdded.set(id, delta);\n } else if (this.satisfiesRemoval(delta)) {\n nextRemoved.set(id, delta);\n } else {\n nextUpdated.set(id, delta);\n }\n }\n\n change = new ElementsChange(nextAdded, nextRemoved, nextUpdated);\n } else {\n change = new ElementsChange(added, removed, updated);\n }\n\n if (true) {\n ElementsChange.validate(change, \"added\", this.satisfiesAddition);\n ElementsChange.validate(change, \"removed\", this.satisfiesRemoval);\n ElementsChange.validate(change, \"updated\", this.satisfiesUpdate);\n }\n\n return change;\n }\n\n static validate(change, type, satifies) {\n for (const [id, delta] of change[type].entries()) {\n if (!satifies(delta)) {\n console.error(`Broken invariant for \"${type}\" delta, element \"${id}\", delta:`, delta);\n throw new Error(`ElementsChange invariant broken for element \"${id}\".`);\n }\n }\n }\n /**\r\n * Calculates the `Delta`s between the previous and next set of elements.\r\n *\r\n * @param prevElements - Map representing the previous state of elements.\r\n * @param nextElements - Map representing the next state of elements.\r\n *\r\n * @returns `ElementsChange` instance representing the `Delta` changes between the two sets of elements.\r\n */\n\n\n static calculate(prevElements, nextElements) {\n if (prevElements === nextElements) {\n return ElementsChange.empty();\n }\n\n const added = new Map();\n const removed = new Map();\n const updated = new Map(); // this might be needed only in same edge cases, like during collab, when `isDeleted` elements get removed or when we (un)intentionally remove the elements\n\n for (const prevElement of prevElements.values()) {\n const nextElement = nextElements.get(prevElement.id);\n\n if (!nextElement) {\n const deleted = Object.assign(Object.assign({}, prevElement), {\n isDeleted: false\n });\n const inserted = {\n isDeleted: true\n };\n const delta = Delta.create(deleted, inserted, ElementsChange.stripIrrelevantProps);\n removed.set(prevElement.id, delta);\n }\n }\n\n for (const nextElement of nextElements.values()) {\n const prevElement = prevElements.get(nextElement.id);\n\n if (!prevElement) {\n const deleted = {\n isDeleted: true\n };\n const inserted = Object.assign(Object.assign({}, nextElement), {\n isDeleted: false\n });\n const delta = Delta.create(deleted, inserted, ElementsChange.stripIrrelevantProps);\n added.set(nextElement.id, delta);\n continue;\n }\n\n if (prevElement.versionNonce !== nextElement.versionNonce) {\n const delta = Delta.calculate(prevElement, nextElement, ElementsChange.stripIrrelevantProps, ElementsChange.postProcess);\n\n if ( // making sure we don't get here some non-boolean values (i.e. undefined, null, etc.)\n typeof prevElement.isDeleted === \"boolean\" && typeof nextElement.isDeleted === \"boolean\" && prevElement.isDeleted !== nextElement.isDeleted) {\n // notice that other props could have been updated as well\n if (prevElement.isDeleted && !nextElement.isDeleted) {\n added.set(nextElement.id, delta);\n } else {\n removed.set(nextElement.id, delta);\n }\n\n continue;\n } // making sure there are at least some changes\n\n\n if (!Delta.isEmpty(delta)) {\n updated.set(nextElement.id, delta);\n }\n }\n }\n\n return ElementsChange.create(added, removed, updated);\n }\n\n static empty() {\n return ElementsChange.create(new Map(), new Map(), new Map());\n }\n\n inverse() {\n const inverseInternal = deltas => {\n const inversedDeltas = new Map();\n\n for (const [id, delta] of deltas.entries()) {\n inversedDeltas.set(id, Delta.create(delta.inserted, delta.deleted));\n }\n\n return inversedDeltas;\n };\n\n const added = inverseInternal(this.added);\n const removed = inverseInternal(this.removed);\n const updated = inverseInternal(this.updated); // notice we inverse removed with added not to break the invariants\n\n return ElementsChange.create(removed, added, updated);\n }\n\n isEmpty() {\n return this.added.size === 0 && this.removed.size === 0 && this.updated.size === 0;\n }\n /**\r\n * Update delta/s based on the existing elements.\r\n *\r\n * @param elements current elements\r\n * @param modifierOptions defines which of the delta (`deleted` or `inserted`) will be updated\r\n * @returns new instance with modified delta/s\r\n */\n\n\n applyLatestChanges(elements) {\n const modifier = element => partial => {\n const latestPartial = {};\n\n for (const key of Object.keys(partial)) {\n // do not update following props:\n // - `boundElements`, as it is a reference value which is postprocessed to contain only deleted/inserted keys\n switch (key) {\n case \"boundElements\":\n latestPartial[key] = partial[key];\n break;\n\n default:\n latestPartial[key] = element[key];\n }\n }\n\n return latestPartial;\n };\n\n const applyLatestChangesInternal = deltas => {\n const modifiedDeltas = new Map();\n\n for (const [id, delta] of deltas.entries()) {\n const existingElement = elements.get(id);\n\n if (existingElement) {\n const modifiedDelta = Delta.create(delta.deleted, delta.inserted, modifier(existingElement), \"inserted\");\n modifiedDeltas.set(id, modifiedDelta);\n } else {\n modifiedDeltas.set(id, delta);\n }\n }\n\n return modifiedDeltas;\n };\n\n const added = applyLatestChangesInternal(this.added);\n const removed = applyLatestChangesInternal(this.removed);\n const updated = applyLatestChangesInternal(this.updated);\n return ElementsChange.create(added, removed, updated, {\n shouldRedistribute: true // redistribute the deltas as `isDeleted` could have been updated\n\n });\n }\n\n applyTo(elements, snapshot) {\n let nextElements = (0,_utils__WEBPACK_IMPORTED_MODULE_9__.toBrandedType)(new Map(elements));\n let changedElements;\n const flags = {\n containsVisibleDifference: false,\n containsZindexDifference: false\n }; // mimic a transaction by applying deltas into `nextElements` (always new instance, no mutation)\n\n try {\n const applyDeltas = ElementsChange.createApplier(nextElements, snapshot, flags);\n const addedElements = applyDeltas(this.added);\n const removedElements = applyDeltas(this.removed);\n const updatedElements = applyDeltas(this.updated);\n const affectedElements = this.resolveConflicts(elements, nextElements); // TODO: #7348 validate elements semantically and syntactically the changed elements, in case they would result data integrity issues\n\n changedElements = new Map([...addedElements, ...removedElements, ...updatedElements, ...affectedElements]);\n } catch (e) {\n console.error(`Couldn't apply elements change`, e);\n\n if (true) {\n throw e;\n } // should not really happen, but just in case we cannot apply deltas, let's return the previous elements with visible change set to `true`\n // even though there is obviously no visible change, returning `false` could be dangerous, as i.e.:\n // in the worst case, it could lead into iterating through the whole stack with no possibility to redo\n // instead, the worst case when returning `true` is an empty undo / redo\n\n\n return [elements, true];\n }\n\n try {\n // TODO: #7348 refactor away mutations below, so that we couldn't end up in an incosistent state\n ElementsChange.redrawTextBoundingBoxes(nextElements, changedElements);\n ElementsChange.redrawBoundArrows(nextElements, changedElements); // the following reorder performs also mutations, but only on new instances of changed elements\n // (unless something goes really bad and it fallbacks to fixing all invalid indices)\n\n nextElements = ElementsChange.reorderElements(nextElements, changedElements, flags);\n } catch (e) {\n console.error(`Couldn't mutate elements after applying elements change`, e);\n\n if (true) {\n throw e;\n }\n } finally {\n return [nextElements, flags.containsVisibleDifference];\n }\n }\n\n static applyDelta(element, delta, flags = {\n // by default we don't care about about the flags\n containsVisibleDifference: true,\n containsZindexDifference: true\n }) {\n var _a, _b;\n\n const _c = delta.inserted,\n {\n boundElements\n } = _c,\n directlyApplicablePartial = __rest(_c, [\"boundElements\"]);\n\n if (((_a = delta.deleted.boundElements) === null || _a === void 0 ? void 0 : _a.length) || ((_b = delta.inserted.boundElements) === null || _b === void 0 ? void 0 : _b.length)) {\n const mergedBoundElements = Delta.mergeArrays(element.boundElements, delta.inserted.boundElements, delta.deleted.boundElements, x => x.id);\n Object.assign(directlyApplicablePartial, {\n boundElements: mergedBoundElements\n });\n }\n\n if (!flags.containsVisibleDifference) {\n // strip away fractional as even if it would be different, it doesn't have to result in visible change\n const {\n index\n } = directlyApplicablePartial,\n rest = __rest(directlyApplicablePartial, [\"index\"]);\n\n const containsVisibleDifference = ElementsChange.checkForVisibleDifference(element, rest);\n flags.containsVisibleDifference = containsVisibleDifference;\n }\n\n if (!flags.containsZindexDifference) {\n flags.containsZindexDifference = delta.deleted.index !== delta.inserted.index;\n }\n\n return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_3__.newElementWith)(element, directlyApplicablePartial);\n }\n /**\r\n * Check for visible changes regardless of whether they were removed, added or updated.\r\n */\n\n\n static checkForVisibleDifference(element, partial) {\n if (element.isDeleted && partial.isDeleted !== false) {\n // when it's deleted and partial is not false, it cannot end up with a visible change\n return false;\n }\n\n if (element.isDeleted && partial.isDeleted === false) {\n // when we add an element, it results in a visible change\n return true;\n }\n\n if (element.isDeleted === false && partial.isDeleted) {\n // when we remove an element, it results in a visible change\n return true;\n } // check for any difference on a visible element\n\n\n return Delta.isRightDifferent(element, partial);\n }\n /**\r\n * Resolves conflicts for all previously added, removed and updated elements.\r\n * Updates the previous deltas with all the changes after conflict resolution.\r\n *\r\n * @returns all elements affected by the conflict resolution\r\n */\n\n\n resolveConflicts(prevElements, nextElements) {\n const nextAffectedElements = new Map();\n\n const updater = (element, updates) => {\n const nextElement = nextElements.get(element.id); // only ever modify next element!\n\n if (!nextElement) {\n return;\n }\n\n let affectedElement;\n\n if (prevElements.get(element.id) === nextElement) {\n // create the new element instance in case we didn't modify the element yet\n // so that we won't end up in an incosistent state in case we would fail in the middle of mutations\n affectedElement = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_3__.newElementWith)(nextElement, updates);\n } else {\n affectedElement = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_3__.mutateElement)(nextElement, updates);\n }\n\n nextAffectedElements.set(affectedElement.id, affectedElement);\n nextElements.set(affectedElement.id, affectedElement);\n }; // removed delta is affecting the bindings always, as all the affected elements of the removed elements need to be unbound\n\n\n for (const [id] of this.removed) {\n ElementsChange.unbindAffected(prevElements, nextElements, id, updater);\n } // added delta is affecting the bindings always, all the affected elements of the added elements need to be rebound\n\n\n for (const [id] of this.added) {\n ElementsChange.rebindAffected(prevElements, nextElements, id, updater);\n } // updated delta is affecting the binding only in case it contains changed binding or bindable property\n\n\n for (const [id] of Array.from(this.updated).filter(([_, delta]) => Object.keys(Object.assign(Object.assign({}, delta.deleted), delta.inserted)).find(prop => _element_binding__WEBPACK_IMPORTED_MODULE_1__.bindingProperties.has(prop)))) {\n const updatedElement = nextElements.get(id);\n\n if (!updatedElement || updatedElement.isDeleted) {\n // skip fixing bindings for updates on deleted elements\n continue;\n }\n\n ElementsChange.rebindAffected(prevElements, nextElements, id, updater);\n } // filter only previous elements, which were now affected\n\n\n const prevAffectedElements = new Map(Array.from(prevElements).filter(([id]) => nextAffectedElements.has(id))); // calculate complete deltas for affected elements, and assign them back to all the deltas\n // technically we could do better here if perf. would become an issue\n\n const {\n added,\n removed,\n updated\n } = ElementsChange.calculate(prevAffectedElements, nextAffectedElements);\n\n for (const [id, delta] of added) {\n this.added.set(id, delta);\n }\n\n for (const [id, delta] of removed) {\n this.removed.set(id, delta);\n }\n\n for (const [id, delta] of updated) {\n this.updated.set(id, delta);\n }\n\n return nextAffectedElements;\n }\n /**\r\n * Non deleted affected elements of removed elements (before and after applying delta),\r\n * should be unbound ~ bindings should not point from non deleted into the deleted element/s.\r\n */\n\n\n static unbindAffected(prevElements, nextElements, id, updater) {\n // the instance could have been updated, so make sure we are passing the latest element to each function below\n const prevElement = () => prevElements.get(id); // element before removal\n\n\n const nextElement = () => nextElements.get(id); // element after removal\n\n\n _element_binding__WEBPACK_IMPORTED_MODULE_1__.BoundElement.unbindAffected(nextElements, prevElement(), updater);\n _element_binding__WEBPACK_IMPORTED_MODULE_1__.BoundElement.unbindAffected(nextElements, nextElement(), updater);\n _element_binding__WEBPACK_IMPORTED_MODULE_1__.BindableElement.unbindAffected(nextElements, prevElement(), updater);\n _element_binding__WEBPACK_IMPORTED_MODULE_1__.BindableElement.unbindAffected(nextElements, nextElement(), updater);\n }\n /**\r\n * Non deleted affected elements of added or updated element/s (before and after applying delta),\r\n * should be rebound (if possible) with the current element ~ bindings should be bidirectional.\r\n */\n\n\n static rebindAffected(prevElements, nextElements, id, updater) {\n // the instance could have been updated, so make sure we are passing the latest element to each function below\n const prevElement = () => prevElements.get(id); // element before addition / update\n\n\n const nextElement = () => nextElements.get(id); // element after addition / update\n\n\n _element_binding__WEBPACK_IMPORTED_MODULE_1__.BoundElement.unbindAffected(nextElements, prevElement(), updater);\n _element_binding__WEBPACK_IMPORTED_MODULE_1__.BoundElement.rebindAffected(nextElements, nextElement(), updater);\n _element_binding__WEBPACK_IMPORTED_MODULE_1__.BindableElement.unbindAffected(nextElements, prevElement(), (element, updates) => {\n // we cannot rebind arrows with bindable element so we don't unbind them at all during rebind (we still need to unbind them on removal)\n // TODO: #7348 add startBinding / endBinding to the `BoundElement` context so that we could rebind arrows and remove this condition\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isTextElement)(element)) {\n updater(element, updates);\n }\n });\n _element_binding__WEBPACK_IMPORTED_MODULE_1__.BindableElement.rebindAffected(nextElements, nextElement(), updater);\n }\n\n static redrawTextBoundingBoxes(elements, changed) {\n const boxesToRedraw = new Map();\n\n for (const element of changed.values()) {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isBoundToContainer)(element)) {\n const {\n containerId\n } = element;\n const container = containerId ? elements.get(containerId) : undefined;\n\n if (container) {\n boxesToRedraw.set(container.id, {\n container,\n boundText: element\n });\n }\n }\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_5__.hasBoundTextElement)(element)) {\n const boundTextElementId = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_4__.getBoundTextElementId)(element);\n const boundText = boundTextElementId ? elements.get(boundTextElementId) : undefined;\n\n if (boundText) {\n boxesToRedraw.set(element.id, {\n container: element,\n boundText: boundText\n });\n }\n }\n }\n\n for (const {\n container,\n boundText\n } of boxesToRedraw.values()) {\n if (container.isDeleted || boundText.isDeleted) {\n // skip redraw if one of them is deleted, as it would not result in a meaningful redraw\n continue;\n }\n\n (0,_element_textElement__WEBPACK_IMPORTED_MODULE_4__.redrawTextBoundingBox)(boundText, container, elements, false);\n }\n }\n\n static redrawBoundArrows(elements, changed) {\n for (const element of changed.values()) {\n if (!element.isDeleted && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isBindableElement)(element)) {\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_1__.updateBoundElements)(element, elements);\n }\n }\n }\n\n static reorderElements(elements, changed, flags) {\n if (!flags.containsZindexDifference) {\n return elements;\n }\n\n const previous = Array.from(elements.values());\n const reordered = (0,_fractionalIndex__WEBPACK_IMPORTED_MODULE_6__.orderByFractionalIndex)([...previous]);\n\n if (!flags.containsVisibleDifference && Delta.isRightDifferent(previous, reordered, true)) {\n // we found a difference in order!\n flags.containsVisibleDifference = true;\n } // let's synchronize all invalid indices of moved elements\n\n\n return (0,_utils__WEBPACK_IMPORTED_MODULE_9__.arrayToMap)((0,_fractionalIndex__WEBPACK_IMPORTED_MODULE_6__.syncMovedIndices)(reordered, changed));\n }\n /**\r\n * It is necessary to post process the partials in case of reference values,\r\n * for which we need to calculate the real diff between `deleted` and `inserted`.\r\n */\n\n\n static postProcess(deleted, inserted) {\n try {\n Delta.diffArrays(deleted, inserted, \"boundElements\", x => x.id);\n } catch (e) {\n // if postprocessing fails, it does not make sense to bubble up, but let's make sure we know about it\n console.error(`Couldn't postprocess elements change deltas.`);\n\n if (true) {\n throw e;\n }\n } finally {\n return [deleted, inserted];\n }\n }\n\n static stripIrrelevantProps(partial) {\n const {\n id,\n updated,\n version,\n versionNonce,\n seed\n } = partial,\n strippedPartial = __rest(partial, [\"id\", \"updated\", \"version\", \"versionNonce\", \"seed\"]);\n\n return strippedPartial;\n }\n\n}\n\nElementsChange.satisfiesAddition = ({\n deleted,\n inserted\n}) => // dissallowing added as \"deleted\", which could cause issues when resolving conflicts\ndeleted.isDeleted === true && !inserted.isDeleted;\n\nElementsChange.satisfiesRemoval = ({\n deleted,\n inserted\n}) => !deleted.isDeleted && inserted.isDeleted === true;\n\nElementsChange.satisfiesUpdate = ({\n deleted,\n inserted\n}) => !!deleted.isDeleted === !!inserted.isDeleted;\n\nElementsChange.createApplier = (nextElements, snapshot, flags) => {\n const getElement = ElementsChange.createGetter(nextElements, snapshot, flags);\n return deltas => Array.from(deltas.entries()).reduce((acc, [id, delta]) => {\n const element = getElement(id, delta.inserted);\n\n if (element) {\n const newElement = ElementsChange.applyDelta(element, delta, flags);\n nextElements.set(newElement.id, newElement);\n acc.set(newElement.id, newElement);\n }\n\n return acc;\n }, new Map());\n};\n\nElementsChange.createGetter = (elements, snapshot, flags) => (id, partial) => {\n let element = elements.get(id);\n\n if (!element) {\n // always fallback to the local snapshot, in cases when we cannot find the element in the elements array\n element = snapshot.get(id);\n\n if (element) {\n // as the element was brought from the snapshot, it automatically results in a possible zindex difference\n flags.containsZindexDifference = true; // as the element was force deleted, we need to check if adding it back results in a visible change\n\n if (partial.isDeleted === false || partial.isDeleted !== true && element.isDeleted === false) {\n flags.containsVisibleDifference = true;\n }\n }\n }\n\n return element;\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./change.ts?");
807
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"AppStateChange\": () => (/* binding */ AppStateChange),\n/* harmony export */ \"ElementsChange\": () => (/* binding */ ElementsChange)\n/* harmony export */ });\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./constants */ \"./constants.ts\");\n/* harmony import */ var _element_binding__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./element/binding */ \"./element/binding.ts\");\n/* harmony import */ var _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./element/linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _element_mutateElement__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./element/mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _element_textElement__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./element/textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _fractionalIndex__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./fractionalIndex */ \"./fractionalIndex.ts\");\n/* harmony import */ var _groups__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./groups */ \"./groups.ts\");\n/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./store */ \"./store.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./utils */ \"./utils.ts\");\nvar __rest = undefined && undefined.__rest || function (s, e) {\n var t = {};\n\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];\n\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];\n }\n return t;\n};\n\n\n\n\n\n\n\n\n\n\n\n/**\r\n * Represents the difference between two objects of the same type.\r\n *\r\n * Both `deleted` and `inserted` partials represent the same set of added, removed or updated properties, where:\r\n * - `deleted` is a set of all the deleted values\r\n * - `inserted` is a set of all the inserted (added, updated) values\r\n *\r\n * Keeping it as pure object (without transient state, side-effects, etc.), so we won't have to instantiate it on load.\r\n */\n\nclass Delta {\n constructor(deleted, inserted) {\n this.deleted = deleted;\n this.inserted = inserted;\n }\n\n static create(deleted, inserted, modifier, modifierOptions) {\n const modifiedDeleted = modifier && modifierOptions !== \"inserted\" ? modifier(deleted) : deleted;\n const modifiedInserted = modifier && modifierOptions !== \"deleted\" ? modifier(inserted) : inserted;\n return new Delta(modifiedDeleted, modifiedInserted);\n }\n /**\r\n * Calculates the delta between two objects.\r\n *\r\n * @param prevObject - The previous state of the object.\r\n * @param nextObject - The next state of the object.\r\n *\r\n * @returns new delta instance.\r\n */\n\n\n static calculate(prevObject, nextObject, modifier, postProcess) {\n if (prevObject === nextObject) {\n return Delta.empty();\n }\n\n const deleted = {};\n const inserted = {}; // O(n^3) here for elements, but it's not as bad as it looks:\n // - we do this only on store recordings, not on every frame (not for ephemerals)\n // - we do this only on previously detected changed elements\n // - we do shallow compare only on the first level of properties (not going any deeper)\n // - # of properties is reasonably small\n\n for (const key of this.distinctKeysIterator(\"full\", prevObject, nextObject)) {\n deleted[key] = prevObject[key];\n inserted[key] = nextObject[key];\n }\n\n const [processedDeleted, processedInserted] = postProcess ? postProcess(deleted, inserted) : [deleted, inserted];\n return Delta.create(processedDeleted, processedInserted, modifier);\n }\n\n static empty() {\n return new Delta({}, {});\n }\n\n static isEmpty(delta) {\n return !Object.keys(delta.deleted).length && !Object.keys(delta.inserted).length;\n }\n /**\r\n * Merges deleted and inserted object partials.\r\n */\n\n\n static mergeObjects(prev, added, removed) {\n const cloned = Object.assign({}, prev);\n\n for (const key of Object.keys(removed)) {\n delete cloned[key];\n }\n\n return Object.assign(Object.assign({}, cloned), added);\n }\n /**\r\n * Merges deleted and inserted array partials.\r\n */\n\n\n static mergeArrays(prev, added, removed, predicate) {\n return Object.values(Delta.mergeObjects((0,_utils__WEBPACK_IMPORTED_MODULE_9__.arrayToObject)(prev !== null && prev !== void 0 ? prev : [], predicate), (0,_utils__WEBPACK_IMPORTED_MODULE_9__.arrayToObject)(added !== null && added !== void 0 ? added : [], predicate), (0,_utils__WEBPACK_IMPORTED_MODULE_9__.arrayToObject)(removed !== null && removed !== void 0 ? removed : [], predicate)));\n }\n /**\r\n * Diff object partials as part of the `postProcess`.\r\n */\n\n\n static diffObjects(deleted, inserted, property, setValue) {\n var _a, _b;\n\n if (!deleted[property] && !inserted[property]) {\n return;\n }\n\n if (typeof deleted[property] === \"object\" || typeof inserted[property] === \"object\") {\n const deletedObject = (_a = deleted[property]) !== null && _a !== void 0 ? _a : {};\n const insertedObject = (_b = inserted[property]) !== null && _b !== void 0 ? _b : {};\n const deletedDifferences = Delta.getLeftDifferences(deletedObject, insertedObject).reduce((acc, curr) => {\n acc[curr] = setValue(deletedObject[curr]);\n return acc;\n }, {});\n const insertedDifferences = Delta.getRightDifferences(deletedObject, insertedObject).reduce((acc, curr) => {\n acc[curr] = setValue(insertedObject[curr]);\n return acc;\n }, {});\n\n if (Object.keys(deletedDifferences).length || Object.keys(insertedDifferences).length) {\n Reflect.set(deleted, property, deletedDifferences);\n Reflect.set(inserted, property, insertedDifferences);\n } else {\n Reflect.deleteProperty(deleted, property);\n Reflect.deleteProperty(inserted, property);\n }\n }\n }\n /**\r\n * Diff array partials as part of the `postProcess`.\r\n */\n\n\n static diffArrays(deleted, inserted, property, groupBy) {\n if (!deleted[property] && !inserted[property]) {\n return;\n }\n\n if (Array.isArray(deleted[property]) || Array.isArray(inserted[property])) {\n const deletedArray = Array.isArray(deleted[property]) ? deleted[property] : [];\n const insertedArray = Array.isArray(inserted[property]) ? inserted[property] : [];\n const deletedDifferences = (0,_utils__WEBPACK_IMPORTED_MODULE_9__.arrayToObject)(Delta.getLeftDifferences((0,_utils__WEBPACK_IMPORTED_MODULE_9__.arrayToObject)(deletedArray, groupBy), (0,_utils__WEBPACK_IMPORTED_MODULE_9__.arrayToObject)(insertedArray, groupBy)));\n const insertedDifferences = (0,_utils__WEBPACK_IMPORTED_MODULE_9__.arrayToObject)(Delta.getRightDifferences((0,_utils__WEBPACK_IMPORTED_MODULE_9__.arrayToObject)(deletedArray, groupBy), (0,_utils__WEBPACK_IMPORTED_MODULE_9__.arrayToObject)(insertedArray, groupBy)));\n\n if (Object.keys(deletedDifferences).length || Object.keys(insertedDifferences).length) {\n const deletedValue = deletedArray.filter(x => deletedDifferences[groupBy ? groupBy(x) : String(x)]);\n const insertedValue = insertedArray.filter(x => insertedDifferences[groupBy ? groupBy(x) : String(x)]);\n Reflect.set(deleted, property, deletedValue);\n Reflect.set(inserted, property, insertedValue);\n } else {\n Reflect.deleteProperty(deleted, property);\n Reflect.deleteProperty(inserted, property);\n }\n }\n }\n /**\r\n * Compares if object1 contains any different value compared to the object2.\r\n */\n\n\n static isLeftDifferent(object1, object2, skipShallowCompare = false) {\n const anyDistinctKey = this.distinctKeysIterator(\"left\", object1, object2, skipShallowCompare).next().value;\n return !!anyDistinctKey;\n }\n /**\r\n * Compares if object2 contains any different value compared to the object1.\r\n */\n\n\n static isRightDifferent(object1, object2, skipShallowCompare = false) {\n const anyDistinctKey = this.distinctKeysIterator(\"right\", object1, object2, skipShallowCompare).next().value;\n return !!anyDistinctKey;\n }\n /**\r\n * Returns all the object1 keys that have distinct values.\r\n */\n\n\n static getLeftDifferences(object1, object2, skipShallowCompare = false) {\n return Array.from(this.distinctKeysIterator(\"left\", object1, object2, skipShallowCompare));\n }\n /**\r\n * Returns all the object2 keys that have distinct values.\r\n */\n\n\n static getRightDifferences(object1, object2, skipShallowCompare = false) {\n return Array.from(this.distinctKeysIterator(\"right\", object1, object2, skipShallowCompare));\n }\n /**\r\n * Iterator comparing values of object properties based on the passed joining strategy.\r\n *\r\n * @yields keys of properties with different values\r\n *\r\n * WARN: it's based on shallow compare performed only on the first level and doesn't go deeper than that.\r\n */\n\n\n static *distinctKeysIterator(join, object1, object2, skipShallowCompare = false) {\n if (object1 === object2) {\n return;\n }\n\n let keys = [];\n\n if (join === \"left\") {\n keys = Object.keys(object1);\n } else if (join === \"right\") {\n keys = Object.keys(object2);\n } else if (join === \"full\") {\n keys = Array.from(new Set([...Object.keys(object1), ...Object.keys(object2)]));\n } else {\n (0,_utils__WEBPACK_IMPORTED_MODULE_9__.assertNever)(join, `Unknown distinctKeysIterator's join param \"${join}\"`, true);\n }\n\n for (const key of keys) {\n const object1Value = object1[key];\n const object2Value = object2[key];\n\n if (object1Value !== object2Value) {\n if (!skipShallowCompare && typeof object1Value === \"object\" && typeof object2Value === \"object\" && object1Value !== null && object2Value !== null && (0,_utils__WEBPACK_IMPORTED_MODULE_9__.isShallowEqual)(object1Value, object2Value)) {\n continue;\n }\n\n yield key;\n }\n }\n }\n\n}\n\nclass AppStateChange {\n constructor(delta) {\n this.delta = delta;\n }\n\n static calculate(prevAppState, nextAppState) {\n const delta = Delta.calculate(prevAppState, nextAppState, undefined, AppStateChange.postProcess);\n return new AppStateChange(delta);\n }\n\n static empty() {\n return new AppStateChange(Delta.create({}, {}));\n }\n\n inverse() {\n const inversedDelta = Delta.create(this.delta.inserted, this.delta.deleted);\n return new AppStateChange(inversedDelta);\n }\n\n applyTo(appState, nextElements) {\n try {\n const {\n selectedElementIds: removedSelectedElementIds = {},\n selectedGroupIds: removedSelectedGroupIds = {}\n } = this.delta.deleted;\n\n const _a = this.delta.inserted,\n {\n selectedElementIds: addedSelectedElementIds = {},\n selectedGroupIds: addedSelectedGroupIds = {},\n selectedLinearElementId,\n editingLinearElementId\n } = _a,\n directlyApplicablePartial = __rest(_a, [\"selectedElementIds\", \"selectedGroupIds\", \"selectedLinearElementId\", \"editingLinearElementId\"]);\n\n const mergedSelectedElementIds = Delta.mergeObjects(appState.selectedElementIds, addedSelectedElementIds, removedSelectedElementIds);\n const mergedSelectedGroupIds = Delta.mergeObjects(appState.selectedGroupIds, addedSelectedGroupIds, removedSelectedGroupIds);\n const selectedLinearElement = selectedLinearElementId && nextElements.has(selectedLinearElementId) ? new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_2__.LinearElementEditor(nextElements.get(selectedLinearElementId)) : null;\n const editingLinearElement = editingLinearElementId && nextElements.has(editingLinearElementId) ? new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_2__.LinearElementEditor(nextElements.get(editingLinearElementId)) : null;\n const nextAppState = Object.assign(Object.assign(Object.assign({}, appState), directlyApplicablePartial), {\n selectedElementIds: mergedSelectedElementIds,\n selectedGroupIds: mergedSelectedGroupIds,\n selectedLinearElement: typeof selectedLinearElementId !== \"undefined\" ? selectedLinearElement // element was either inserted or deleted\n : appState.selectedLinearElement,\n editingLinearElement: typeof editingLinearElementId !== \"undefined\" ? editingLinearElement // element was either inserted or deleted\n : appState.editingLinearElement\n });\n const constainsVisibleChanges = this.filterInvisibleChanges(appState, nextAppState, nextElements);\n return [nextAppState, constainsVisibleChanges];\n } catch (e) {\n // shouldn't really happen, but just in case\n console.error(`Couldn't apply appstate change`, e);\n\n if (true) {\n throw e;\n }\n\n return [appState, false];\n }\n }\n\n isEmpty() {\n return Delta.isEmpty(this.delta);\n }\n /**\r\n * It is necessary to post process the partials in case of reference values,\r\n * for which we need to calculate the real diff between `deleted` and `inserted`.\r\n */\n\n\n static postProcess(deleted, inserted) {\n try {\n Delta.diffObjects(deleted, inserted, \"selectedElementIds\", // ts language server has a bit trouble resolving this, so we are giving it a little push\n _ => true);\n Delta.diffObjects(deleted, inserted, \"selectedGroupIds\", prevValue => prevValue !== null && prevValue !== void 0 ? prevValue : false);\n } catch (e) {\n // if postprocessing fails it does not make sense to bubble up, but let's make sure we know about it\n console.error(`Couldn't postprocess appstate change deltas.`);\n\n if (true) {\n throw e;\n }\n } finally {\n return [deleted, inserted];\n }\n }\n /**\r\n * Mutates `nextAppState` be filtering out state related to deleted elements.\r\n *\r\n * @returns `true` if a visible change is found, `false` otherwise.\r\n */\n\n\n filterInvisibleChanges(prevAppState, nextAppState, nextElements) {\n // TODO: #7348 we could still get an empty undo/redo, as we assume that previous appstate does not contain references to deleted elements\n // which is not always true - i.e. now we do cleanup appstate during history, but we do not do it during remote updates\n const prevObservedAppState = (0,_store__WEBPACK_IMPORTED_MODULE_8__.getObservedAppState)(prevAppState);\n const nextObservedAppState = (0,_store__WEBPACK_IMPORTED_MODULE_8__.getObservedAppState)(nextAppState);\n const containsStandaloneDifference = Delta.isRightDifferent(AppStateChange.stripElementsProps(prevObservedAppState), AppStateChange.stripElementsProps(nextObservedAppState));\n const containsElementsDifference = Delta.isRightDifferent(AppStateChange.stripStandaloneProps(prevObservedAppState), AppStateChange.stripStandaloneProps(nextObservedAppState));\n\n if (!containsStandaloneDifference && !containsElementsDifference) {\n // no change in appstate was detected\n return false;\n }\n\n const visibleDifferenceFlag = {\n value: containsStandaloneDifference\n };\n\n if (containsElementsDifference) {\n // filter invisible changes on each iteration\n const changedElementsProps = Delta.getRightDifferences(AppStateChange.stripStandaloneProps(prevObservedAppState), AppStateChange.stripStandaloneProps(nextObservedAppState));\n let nonDeletedGroupIds = new Set();\n\n if (changedElementsProps.includes(\"editingGroupId\") || changedElementsProps.includes(\"selectedGroupIds\")) {\n // this one iterates through all the non deleted elements, so make sure it's not done twice\n nonDeletedGroupIds = (0,_groups__WEBPACK_IMPORTED_MODULE_7__.getNonDeletedGroupIds)(nextElements);\n } // check whether delta properties are related to the existing non-deleted elements\n\n\n for (const key of changedElementsProps) {\n switch (key) {\n case \"selectedElementIds\":\n nextAppState[key] = AppStateChange.filterSelectedElements(nextAppState[key], nextElements, visibleDifferenceFlag);\n break;\n\n case \"selectedGroupIds\":\n nextAppState[key] = AppStateChange.filterSelectedGroups(nextAppState[key], nonDeletedGroupIds, visibleDifferenceFlag);\n break;\n\n case \"editingGroupId\":\n const editingGroupId = nextAppState[key];\n\n if (!editingGroupId) {\n // previously there was an editingGroup (assuming visible), now there is none\n visibleDifferenceFlag.value = true;\n } else if (nonDeletedGroupIds.has(editingGroupId)) {\n // previously there wasn't an editingGroup, now there is one which is visible\n visibleDifferenceFlag.value = true;\n } else {\n // there was assigned an editingGroup now, but it's related to deleted element\n nextAppState[key] = null;\n }\n\n break;\n\n case \"selectedLinearElementId\":\n case \"editingLinearElementId\":\n const appStateKey = AppStateChange.convertToAppStateKey(key);\n const linearElement = nextAppState[appStateKey];\n\n if (!linearElement) {\n // previously there was a linear element (assuming visible), now there is none\n visibleDifferenceFlag.value = true;\n } else {\n const element = nextElements.get(linearElement.elementId);\n\n if (element && !element.isDeleted) {\n // previously there wasn't a linear element, now there is one which is visible\n visibleDifferenceFlag.value = true;\n } else {\n // there was assigned a linear element now, but it's deleted\n nextAppState[appStateKey] = null;\n }\n }\n\n break;\n\n default:\n {\n (0,_utils__WEBPACK_IMPORTED_MODULE_9__.assertNever)(key, `Unknown ObservedElementsAppState's key \"${key}\"`, true);\n }\n }\n }\n }\n\n return visibleDifferenceFlag.value;\n }\n\n static convertToAppStateKey(key) {\n switch (key) {\n case \"selectedLinearElementId\":\n return \"selectedLinearElement\";\n\n case \"editingLinearElementId\":\n return \"editingLinearElement\";\n }\n }\n\n static filterSelectedElements(selectedElementIds, elements, visibleDifferenceFlag) {\n const ids = Object.keys(selectedElementIds);\n\n if (!ids.length) {\n // previously there were ids (assuming related to visible elements), now there are none\n visibleDifferenceFlag.value = true;\n return selectedElementIds;\n }\n\n const nextSelectedElementIds = Object.assign({}, selectedElementIds);\n\n for (const id of ids) {\n const element = elements.get(id);\n\n if (element && !element.isDeleted) {\n // there is a selected element id related to a visible element\n visibleDifferenceFlag.value = true;\n } else {\n delete nextSelectedElementIds[id];\n }\n }\n\n return nextSelectedElementIds;\n }\n\n static filterSelectedGroups(selectedGroupIds, nonDeletedGroupIds, visibleDifferenceFlag) {\n const ids = Object.keys(selectedGroupIds);\n\n if (!ids.length) {\n // previously there were ids (assuming related to visible groups), now there are none\n visibleDifferenceFlag.value = true;\n return selectedGroupIds;\n }\n\n const nextSelectedGroupIds = Object.assign({}, selectedGroupIds);\n\n for (const id of Object.keys(nextSelectedGroupIds)) {\n if (nonDeletedGroupIds.has(id)) {\n // there is a selected group id related to a visible group\n visibleDifferenceFlag.value = true;\n } else {\n delete nextSelectedGroupIds[id];\n }\n }\n\n return nextSelectedGroupIds;\n }\n\n static stripElementsProps(delta) {\n // WARN: Do not remove the type-casts as they here to ensure proper type checks\n const _a = delta,\n {\n editingGroupId,\n selectedGroupIds,\n selectedElementIds,\n editingLinearElementId,\n selectedLinearElementId\n } = _a,\n standaloneProps = __rest(_a, [\"editingGroupId\", \"selectedGroupIds\", \"selectedElementIds\", \"editingLinearElementId\", \"selectedLinearElementId\"]);\n\n return standaloneProps;\n }\n\n static stripStandaloneProps(delta) {\n // WARN: Do not remove the type-casts as they here to ensure proper type checks\n const _a = delta,\n {\n name,\n viewBackgroundColor\n } = _a,\n elementsProps = __rest(_a, [\"name\", \"viewBackgroundColor\"]);\n\n return elementsProps;\n }\n\n}\n/**\r\n * Elements change is a low level primitive to capture a change between two sets of elements.\r\n * It does so by encapsulating forward and backward `Delta`s, allowing to time-travel in both directions.\r\n */\n\nclass ElementsChange {\n constructor(added, removed, updated) {\n this.added = added;\n this.removed = removed;\n this.updated = updated;\n }\n\n static create(added, removed, updated, options = {\n shouldRedistribute: false\n }) {\n let change;\n\n if (options.shouldRedistribute) {\n const nextAdded = new Map();\n const nextRemoved = new Map();\n const nextUpdated = new Map();\n const deltas = [...added, ...removed, ...updated];\n\n for (const [id, delta] of deltas) {\n if (this.satisfiesAddition(delta)) {\n nextAdded.set(id, delta);\n } else if (this.satisfiesRemoval(delta)) {\n nextRemoved.set(id, delta);\n } else {\n nextUpdated.set(id, delta);\n }\n }\n\n change = new ElementsChange(nextAdded, nextRemoved, nextUpdated);\n } else {\n change = new ElementsChange(added, removed, updated);\n }\n\n if (true) {\n ElementsChange.validate(change, \"added\", this.satisfiesAddition);\n ElementsChange.validate(change, \"removed\", this.satisfiesRemoval);\n ElementsChange.validate(change, \"updated\", this.satisfiesUpdate);\n }\n\n return change;\n }\n\n static validate(change, type, satifies) {\n for (const [id, delta] of change[type].entries()) {\n if (!satifies(delta)) {\n console.error(`Broken invariant for \"${type}\" delta, element \"${id}\", delta:`, delta);\n throw new Error(`ElementsChange invariant broken for element \"${id}\".`);\n }\n }\n }\n /**\r\n * Calculates the `Delta`s between the previous and next set of elements.\r\n *\r\n * @param prevElements - Map representing the previous state of elements.\r\n * @param nextElements - Map representing the next state of elements.\r\n *\r\n * @returns `ElementsChange` instance representing the `Delta` changes between the two sets of elements.\r\n */\n\n\n static calculate(prevElements, nextElements) {\n if (prevElements === nextElements) {\n return ElementsChange.empty();\n }\n\n const added = new Map();\n const removed = new Map();\n const updated = new Map(); // this might be needed only in same edge cases, like during collab, when `isDeleted` elements get removed or when we (un)intentionally remove the elements\n\n for (const prevElement of prevElements.values()) {\n const nextElement = nextElements.get(prevElement.id);\n\n if (!nextElement) {\n const deleted = Object.assign(Object.assign({}, prevElement), {\n isDeleted: false\n });\n const inserted = {\n isDeleted: true\n };\n const delta = Delta.create(deleted, inserted, ElementsChange.stripIrrelevantProps);\n removed.set(prevElement.id, delta);\n }\n }\n\n for (const nextElement of nextElements.values()) {\n const prevElement = prevElements.get(nextElement.id);\n\n if (!prevElement) {\n const deleted = {\n isDeleted: true\n };\n const inserted = Object.assign(Object.assign({}, nextElement), {\n isDeleted: false\n });\n const delta = Delta.create(deleted, inserted, ElementsChange.stripIrrelevantProps);\n added.set(nextElement.id, delta);\n continue;\n }\n\n if (prevElement.versionNonce !== nextElement.versionNonce) {\n const delta = Delta.calculate(prevElement, nextElement, ElementsChange.stripIrrelevantProps, ElementsChange.postProcess);\n\n if ( // making sure we don't get here some non-boolean values (i.e. undefined, null, etc.)\n typeof prevElement.isDeleted === \"boolean\" && typeof nextElement.isDeleted === \"boolean\" && prevElement.isDeleted !== nextElement.isDeleted) {\n // notice that other props could have been updated as well\n if (prevElement.isDeleted && !nextElement.isDeleted) {\n added.set(nextElement.id, delta);\n } else {\n removed.set(nextElement.id, delta);\n }\n\n continue;\n } // making sure there are at least some changes\n\n\n if (!Delta.isEmpty(delta)) {\n updated.set(nextElement.id, delta);\n }\n }\n }\n\n return ElementsChange.create(added, removed, updated);\n }\n\n static empty() {\n return ElementsChange.create(new Map(), new Map(), new Map());\n }\n\n inverse() {\n const inverseInternal = deltas => {\n const inversedDeltas = new Map();\n\n for (const [id, delta] of deltas.entries()) {\n inversedDeltas.set(id, Delta.create(delta.inserted, delta.deleted));\n }\n\n return inversedDeltas;\n };\n\n const added = inverseInternal(this.added);\n const removed = inverseInternal(this.removed);\n const updated = inverseInternal(this.updated); // notice we inverse removed with added not to break the invariants\n\n return ElementsChange.create(removed, added, updated);\n }\n\n isEmpty() {\n return this.added.size === 0 && this.removed.size === 0 && this.updated.size === 0;\n }\n /**\r\n * Update delta/s based on the existing elements.\r\n *\r\n * @param elements current elements\r\n * @param modifierOptions defines which of the delta (`deleted` or `inserted`) will be updated\r\n * @returns new instance with modified delta/s\r\n */\n\n\n applyLatestChanges(elements) {\n const modifier = element => partial => {\n const latestPartial = {};\n\n for (const key of Object.keys(partial)) {\n // do not update following props:\n // - `boundElements`, as it is a reference value which is postprocessed to contain only deleted/inserted keys\n switch (key) {\n case \"boundElements\":\n latestPartial[key] = partial[key];\n break;\n\n default:\n latestPartial[key] = element[key];\n }\n }\n\n return latestPartial;\n };\n\n const applyLatestChangesInternal = deltas => {\n const modifiedDeltas = new Map();\n\n for (const [id, delta] of deltas.entries()) {\n const existingElement = elements.get(id);\n\n if (existingElement) {\n const modifiedDelta = Delta.create(delta.deleted, delta.inserted, modifier(existingElement), \"inserted\");\n modifiedDeltas.set(id, modifiedDelta);\n } else {\n modifiedDeltas.set(id, delta);\n }\n }\n\n return modifiedDeltas;\n };\n\n const added = applyLatestChangesInternal(this.added);\n const removed = applyLatestChangesInternal(this.removed);\n const updated = applyLatestChangesInternal(this.updated);\n return ElementsChange.create(added, removed, updated, {\n shouldRedistribute: true // redistribute the deltas as `isDeleted` could have been updated\n\n });\n }\n\n applyTo(elements, snapshot) {\n let nextElements = (0,_utils__WEBPACK_IMPORTED_MODULE_9__.toBrandedType)(new Map(elements));\n let changedElements;\n const flags = {\n containsVisibleDifference: false,\n containsZindexDifference: false\n }; // mimic a transaction by applying deltas into `nextElements` (always new instance, no mutation)\n\n try {\n const applyDeltas = ElementsChange.createApplier(nextElements, snapshot, flags);\n const addedElements = applyDeltas(this.added);\n const removedElements = applyDeltas(this.removed);\n const updatedElements = applyDeltas(this.updated);\n const affectedElements = this.resolveConflicts(elements, nextElements); // TODO: #7348 validate elements semantically and syntactically the changed elements, in case they would result data integrity issues\n\n changedElements = new Map([...addedElements, ...removedElements, ...updatedElements, ...affectedElements]);\n } catch (e) {\n console.error(`Couldn't apply elements change`, e);\n\n if (true) {\n throw e;\n } // should not really happen, but just in case we cannot apply deltas, let's return the previous elements with visible change set to `true`\n // even though there is obviously no visible change, returning `false` could be dangerous, as i.e.:\n // in the worst case, it could lead into iterating through the whole stack with no possibility to redo\n // instead, the worst case when returning `true` is an empty undo / redo\n\n\n return [elements, true];\n }\n\n try {\n // TODO: #7348 refactor away mutations below, so that we couldn't end up in an incosistent state\n ElementsChange.redrawTextBoundingBoxes(nextElements, changedElements);\n ElementsChange.redrawBoundArrows(nextElements, changedElements); // the following reorder performs also mutations, but only on new instances of changed elements\n // (unless something goes really bad and it fallbacks to fixing all invalid indices)\n\n nextElements = ElementsChange.reorderElements(nextElements, changedElements, flags);\n } catch (e) {\n console.error(`Couldn't mutate elements after applying elements change`, e);\n\n if (true) {\n throw e;\n }\n } finally {\n return [nextElements, flags.containsVisibleDifference];\n }\n }\n\n static applyDelta(element, delta, flags = {\n // by default we don't care about about the flags\n containsVisibleDifference: true,\n containsZindexDifference: true\n }) {\n var _a, _b;\n\n const _c = delta.inserted,\n {\n boundElements\n } = _c,\n directlyApplicablePartial = __rest(_c, [\"boundElements\"]);\n\n if (((_a = delta.deleted.boundElements) === null || _a === void 0 ? void 0 : _a.length) || ((_b = delta.inserted.boundElements) === null || _b === void 0 ? void 0 : _b.length)) {\n const mergedBoundElements = Delta.mergeArrays(element.boundElements, delta.inserted.boundElements, delta.deleted.boundElements, x => x.id);\n Object.assign(directlyApplicablePartial, {\n boundElements: mergedBoundElements\n });\n }\n\n if (!flags.containsVisibleDifference) {\n // strip away fractional as even if it would be different, it doesn't have to result in visible change\n const {\n index\n } = directlyApplicablePartial,\n rest = __rest(directlyApplicablePartial, [\"index\"]);\n\n const containsVisibleDifference = ElementsChange.checkForVisibleDifference(element, rest);\n flags.containsVisibleDifference = containsVisibleDifference;\n }\n\n if (!flags.containsZindexDifference) {\n flags.containsZindexDifference = delta.deleted.index !== delta.inserted.index;\n }\n\n return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_3__.newElementWith)(element, directlyApplicablePartial);\n }\n /**\r\n * Check for visible changes regardless of whether they were removed, added or updated.\r\n */\n\n\n static checkForVisibleDifference(element, partial) {\n if (element.isDeleted && partial.isDeleted !== false) {\n // when it's deleted and partial is not false, it cannot end up with a visible change\n return false;\n }\n\n if (element.isDeleted && partial.isDeleted === false) {\n // when we add an element, it results in a visible change\n return true;\n }\n\n if (element.isDeleted === false && partial.isDeleted) {\n // when we remove an element, it results in a visible change\n return true;\n } // check for any difference on a visible element\n\n\n return Delta.isRightDifferent(element, partial);\n }\n /**\r\n * Resolves conflicts for all previously added, removed and updated elements.\r\n * Updates the previous deltas with all the changes after conflict resolution.\r\n *\r\n * @returns all elements affected by the conflict resolution\r\n */\n\n\n resolveConflicts(prevElements, nextElements) {\n const nextAffectedElements = new Map();\n\n const updater = (element, updates) => {\n const nextElement = nextElements.get(element.id); // only ever modify next element!\n\n if (!nextElement) {\n return;\n }\n\n let affectedElement;\n\n if (prevElements.get(element.id) === nextElement) {\n // create the new element instance in case we didn't modify the element yet\n // so that we won't end up in an incosistent state in case we would fail in the middle of mutations\n affectedElement = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_3__.newElementWith)(nextElement, updates);\n } else {\n affectedElement = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_3__.mutateElement)(nextElement, updates);\n }\n\n nextAffectedElements.set(affectedElement.id, affectedElement);\n nextElements.set(affectedElement.id, affectedElement);\n }; // removed delta is affecting the bindings always, as all the affected elements of the removed elements need to be unbound\n\n\n for (const [id] of this.removed) {\n ElementsChange.unbindAffected(prevElements, nextElements, id, updater);\n } // added delta is affecting the bindings always, all the affected elements of the added elements need to be rebound\n\n\n for (const [id] of this.added) {\n ElementsChange.rebindAffected(prevElements, nextElements, id, updater);\n } // updated delta is affecting the binding only in case it contains changed binding or bindable property\n\n\n for (const [id] of Array.from(this.updated).filter(([_, delta]) => Object.keys(Object.assign(Object.assign({}, delta.deleted), delta.inserted)).find(prop => _element_binding__WEBPACK_IMPORTED_MODULE_1__.bindingProperties.has(prop)))) {\n const updatedElement = nextElements.get(id);\n\n if (!updatedElement || updatedElement.isDeleted) {\n // skip fixing bindings for updates on deleted elements\n continue;\n }\n\n ElementsChange.rebindAffected(prevElements, nextElements, id, updater);\n } // filter only previous elements, which were now affected\n\n\n const prevAffectedElements = new Map(Array.from(prevElements).filter(([id]) => nextAffectedElements.has(id))); // calculate complete deltas for affected elements, and assign them back to all the deltas\n // technically we could do better here if perf. would become an issue\n\n const {\n added,\n removed,\n updated\n } = ElementsChange.calculate(prevAffectedElements, nextAffectedElements);\n\n for (const [id, delta] of added) {\n this.added.set(id, delta);\n }\n\n for (const [id, delta] of removed) {\n this.removed.set(id, delta);\n }\n\n for (const [id, delta] of updated) {\n this.updated.set(id, delta);\n }\n\n return nextAffectedElements;\n }\n /**\r\n * Non deleted affected elements of removed elements (before and after applying delta),\r\n * should be unbound ~ bindings should not point from non deleted into the deleted element/s.\r\n */\n\n\n static unbindAffected(prevElements, nextElements, id, updater) {\n // the instance could have been updated, so make sure we are passing the latest element to each function below\n const prevElement = () => prevElements.get(id); // element before removal\n\n\n const nextElement = () => nextElements.get(id); // element after removal\n\n\n _element_binding__WEBPACK_IMPORTED_MODULE_1__.BoundElement.unbindAffected(nextElements, prevElement(), updater);\n _element_binding__WEBPACK_IMPORTED_MODULE_1__.BoundElement.unbindAffected(nextElements, nextElement(), updater);\n _element_binding__WEBPACK_IMPORTED_MODULE_1__.BindableElement.unbindAffected(nextElements, prevElement(), updater);\n _element_binding__WEBPACK_IMPORTED_MODULE_1__.BindableElement.unbindAffected(nextElements, nextElement(), updater);\n }\n /**\r\n * Non deleted affected elements of added or updated element/s (before and after applying delta),\r\n * should be rebound (if possible) with the current element ~ bindings should be bidirectional.\r\n */\n\n\n static rebindAffected(prevElements, nextElements, id, updater) {\n // the instance could have been updated, so make sure we are passing the latest element to each function below\n const prevElement = () => prevElements.get(id); // element before addition / update\n\n\n const nextElement = () => nextElements.get(id); // element after addition / update\n\n\n _element_binding__WEBPACK_IMPORTED_MODULE_1__.BoundElement.unbindAffected(nextElements, prevElement(), updater);\n _element_binding__WEBPACK_IMPORTED_MODULE_1__.BoundElement.rebindAffected(nextElements, nextElement(), updater);\n _element_binding__WEBPACK_IMPORTED_MODULE_1__.BindableElement.unbindAffected(nextElements, prevElement(), (element, updates) => {\n // we cannot rebind arrows with bindable element so we don't unbind them at all during rebind (we still need to unbind them on removal)\n // TODO: #7348 add startBinding / endBinding to the `BoundElement` context so that we could rebind arrows and remove this condition\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isTextElement)(element)) {\n updater(element, updates);\n }\n });\n _element_binding__WEBPACK_IMPORTED_MODULE_1__.BindableElement.rebindAffected(nextElements, nextElement(), updater);\n }\n\n static redrawTextBoundingBoxes(elements, changed) {\n const boxesToRedraw = new Map();\n\n for (const element of changed.values()) {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isBoundToContainer)(element)) {\n const {\n containerId\n } = element;\n const container = containerId ? elements.get(containerId) : undefined;\n\n if (container) {\n boxesToRedraw.set(container.id, {\n container,\n boundText: element\n });\n }\n }\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_5__.hasBoundTextElement)(element)) {\n const boundTextElementId = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_4__.getBoundTextElementId)(element);\n const boundText = boundTextElementId ? elements.get(boundTextElementId) : undefined;\n\n if (boundText) {\n boxesToRedraw.set(element.id, {\n container: element,\n boundText: boundText\n });\n }\n }\n }\n\n for (const {\n container,\n boundText\n } of boxesToRedraw.values()) {\n if (container.isDeleted || boundText.isDeleted) {\n // skip redraw if one of them is deleted, as it would not result in a meaningful redraw\n continue;\n }\n\n (0,_element_textElement__WEBPACK_IMPORTED_MODULE_4__.redrawTextBoundingBox)(boundText, container, elements, false);\n }\n }\n\n static redrawBoundArrows(elements, changed) {\n for (const element of changed.values()) {\n if (!element.isDeleted && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isBindableElement)(element)) {\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_1__.updateBoundElements)(element, elements);\n }\n }\n }\n\n static reorderElements(elements, changed, flags) {\n if (!flags.containsZindexDifference) {\n return elements;\n }\n\n const unordered = Array.from(elements.values());\n const ordered = (0,_fractionalIndex__WEBPACK_IMPORTED_MODULE_6__.orderByFractionalIndex)([...unordered]);\n const moved = Delta.getRightDifferences(unordered, ordered, true).reduce((acc, arrayIndex) => {\n const candidate = unordered[Number(arrayIndex)];\n\n if (candidate && changed.has(candidate.id)) {\n acc.set(candidate.id, candidate);\n }\n\n return acc;\n }, new Map());\n\n if (!flags.containsVisibleDifference && moved.size) {\n // we found a difference in order!\n flags.containsVisibleDifference = true;\n } // synchronize all elements that were actually moved\n // could fallback to synchronizing all invalid indices\n\n\n return (0,_utils__WEBPACK_IMPORTED_MODULE_9__.arrayToMap)((0,_fractionalIndex__WEBPACK_IMPORTED_MODULE_6__.syncMovedIndices)(ordered, moved));\n }\n /**\r\n * It is necessary to post process the partials in case of reference values,\r\n * for which we need to calculate the real diff between `deleted` and `inserted`.\r\n */\n\n\n static postProcess(deleted, inserted) {\n try {\n Delta.diffArrays(deleted, inserted, \"boundElements\", x => x.id);\n } catch (e) {\n // if postprocessing fails, it does not make sense to bubble up, but let's make sure we know about it\n console.error(`Couldn't postprocess elements change deltas.`);\n\n if (true) {\n throw e;\n }\n } finally {\n return [deleted, inserted];\n }\n }\n\n static stripIrrelevantProps(partial) {\n const {\n id,\n updated,\n version,\n versionNonce,\n seed\n } = partial,\n strippedPartial = __rest(partial, [\"id\", \"updated\", \"version\", \"versionNonce\", \"seed\"]);\n\n return strippedPartial;\n }\n\n}\n\nElementsChange.satisfiesAddition = ({\n deleted,\n inserted\n}) => // dissallowing added as \"deleted\", which could cause issues when resolving conflicts\ndeleted.isDeleted === true && !inserted.isDeleted;\n\nElementsChange.satisfiesRemoval = ({\n deleted,\n inserted\n}) => !deleted.isDeleted && inserted.isDeleted === true;\n\nElementsChange.satisfiesUpdate = ({\n deleted,\n inserted\n}) => !!deleted.isDeleted === !!inserted.isDeleted;\n\nElementsChange.createApplier = (nextElements, snapshot, flags) => {\n const getElement = ElementsChange.createGetter(nextElements, snapshot, flags);\n return deltas => Array.from(deltas.entries()).reduce((acc, [id, delta]) => {\n const element = getElement(id, delta.inserted);\n\n if (element) {\n const newElement = ElementsChange.applyDelta(element, delta, flags);\n nextElements.set(newElement.id, newElement);\n acc.set(newElement.id, newElement);\n }\n\n return acc;\n }, new Map());\n};\n\nElementsChange.createGetter = (elements, snapshot, flags) => (id, partial) => {\n let element = elements.get(id);\n\n if (!element) {\n // always fallback to the local snapshot, in cases when we cannot find the element in the elements array\n element = snapshot.get(id);\n\n if (element) {\n // as the element was brought from the snapshot, it automatically results in a possible zindex difference\n flags.containsZindexDifference = true; // as the element was force deleted, we need to check if adding it back results in a visible change\n\n if (partial.isDeleted === false || partial.isDeleted !== true && element.isDeleted === false) {\n flags.containsVisibleDifference = true;\n }\n }\n }\n\n return element;\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./change.ts?");
808
808
 
809
809
  /***/ }),
810
810
 
@@ -859,7 +859,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
859
859
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
860
860
 
861
861
  "use strict";
862
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"ExitZenModeAction\": () => (/* binding */ ExitZenModeAction),\n/* harmony export */ \"FinalizeAction\": () => (/* binding */ FinalizeAction),\n/* harmony export */ \"SelectedShapeActions\": () => (/* binding */ SelectedShapeActions),\n/* harmony export */ \"ShapesSwitcher\": () => (/* binding */ ShapesSwitcher),\n/* harmony export */ \"UndoRedoActions\": () => (/* binding */ UndoRedoActions),\n/* harmony export */ \"ZoomActions\": () => (/* binding */ ZoomActions),\n/* harmony export */ \"canChangeBackgroundColor\": () => (/* binding */ canChangeBackgroundColor),\n/* harmony export */ \"canChangeStrokeColor\": () => (/* binding */ canChangeStrokeColor)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../i18n */ \"./i18n.ts\");\n/* harmony import */ var _App__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./App */ \"./components/App.tsx\");\n/* harmony import */ var _scene__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../scene */ \"./scene/index.ts\");\n/* harmony import */ var _shapes__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../shapes */ \"./shapes.tsx\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _Stack__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./Stack */ \"./components/Stack.tsx\");\n/* harmony import */ var _ToolButton__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./ToolButton */ \"./components/ToolButton.tsx\");\n/* harmony import */ var _scene_comparisons__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../scene/comparisons */ \"./scene/comparisons.ts\");\n/* harmony import */ var _analytics__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../analytics */ \"./analytics.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! clsx */ \"../../node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../actions */ \"./actions/index.ts\");\n/* harmony import */ var _element_textElement__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../element/textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _Actions_scss__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./Actions.scss */ \"./components/Actions.scss\");\n/* harmony import */ var _dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./dropdownMenu/DropdownMenu */ \"./components/dropdownMenu/DropdownMenu.tsx\");\n/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./icons */ \"./components/icons.tsx\");\n/* harmony import */ var _keys__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../keys */ \"./keys.ts\");\n/* harmony import */ var _context_tunnels__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../context/tunnels */ \"./context/tunnels.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n // import { Tooltip } from \"./Tooltip\"; //zsviczian\n\n\n\n\n\n\n\nconst canChangeStrokeColor = (appState, targetElements) => {\n var _a;\n\n let commonSelectedType = ((_a = targetElements[0]) === null || _a === void 0 ? void 0 : _a.type) || null;\n\n for (const element of targetElements) {\n if (element.type !== commonSelectedType) {\n commonSelectedType = null;\n break;\n }\n }\n\n return (0,_scene_comparisons__WEBPACK_IMPORTED_MODULE_9__.hasStrokeColor)(appState.activeTool.type) && appState.activeTool.type !== \"image\" && commonSelectedType !== \"image\" && commonSelectedType !== \"frame\" && commonSelectedType !== \"magicframe\" || targetElements.some(element => (0,_scene_comparisons__WEBPACK_IMPORTED_MODULE_9__.hasStrokeColor)(element.type));\n};\nconst canChangeBackgroundColor = (appState, targetElements) => {\n return (0,_scene__WEBPACK_IMPORTED_MODULE_4__.hasBackground)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_4__.hasBackground)(element.type));\n};\nconst SelectedShapeActions = ({\n appState,\n elementsMap,\n renderAction\n}) => {\n const targetElements = (0,_scene__WEBPACK_IMPORTED_MODULE_4__.getTargetElements)(elementsMap, appState);\n let isSingleElementBoundContainer = false;\n\n if (targetElements.length === 2 && ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_11__.hasBoundTextElement)(targetElements[0]) || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_11__.hasBoundTextElement)(targetElements[1]))) {\n isSingleElementBoundContainer = true;\n }\n\n const isEditing = Boolean(appState.editingElement);\n const device = (0,_App__WEBPACK_IMPORTED_MODULE_3__.useDevice)();\n const isRTL = document.documentElement.getAttribute(\"dir\") === \"rtl\";\n const showFillIcons = (0,_scene__WEBPACK_IMPORTED_MODULE_4__.hasBackground)(appState.activeTool.type) && !(0,_utils__WEBPACK_IMPORTED_MODULE_6__.isTransparent)(appState.currentItemBackgroundColor) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_4__.hasBackground)(element.type) && !(0,_utils__WEBPACK_IMPORTED_MODULE_6__.isTransparent)(element.backgroundColor));\n const showLinkIcon = targetElements.length === 1 || isSingleElementBoundContainer;\n const showLineEditorAction = !appState.editingLinearElement && targetElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_11__.isLinearElement)(targetElements[0]);\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n className: \"panelColumn\"\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n children: canChangeStrokeColor(appState, targetElements) && renderAction(\"changeStrokeColor\")\n }), canChangeBackgroundColor(appState, targetElements) && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n children: renderAction(\"changeBackgroundColor\")\n }), showFillIcons && renderAction(\"changeFillStyle\"), ((0,_scene__WEBPACK_IMPORTED_MODULE_4__.hasStrokeWidth)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_4__.hasStrokeWidth)(element.type))) && renderAction(\"changeStrokeWidth\"), (appState.activeTool.type === \"freedraw\" || targetElements.some(element => element.type === \"freedraw\")) && renderAction(\"changeStrokeShape\"), ((0,_scene__WEBPACK_IMPORTED_MODULE_4__.hasStrokeStyle)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_4__.hasStrokeStyle)(element.type))) && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n children: [renderAction(\"changeStrokeStyle\"), renderAction(\"changeSloppiness\")]\n }), ((0,_scene__WEBPACK_IMPORTED_MODULE_4__.canChangeRoundness)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_4__.canChangeRoundness)(element.type))) && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n children: renderAction(\"changeRoundness\")\n }), (appState.activeTool.type === \"text\" || targetElements.some(_element_typeChecks__WEBPACK_IMPORTED_MODULE_11__.isTextElement)) && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n children: [renderAction(\"changeFontSize\"), renderAction(\"changeFontFamily\"), (appState.activeTool.type === \"text\" || (0,_element_textElement__WEBPACK_IMPORTED_MODULE_14__.suppportsHorizontalAlign)(targetElements, elementsMap)) && renderAction(\"changeTextAlign\")]\n }), (0,_element_textElement__WEBPACK_IMPORTED_MODULE_14__.shouldAllowVerticalAlign)(targetElements, elementsMap) && renderAction(\"changeVerticalAlign\"), ((0,_scene__WEBPACK_IMPORTED_MODULE_4__.canHaveArrowheads)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_4__.canHaveArrowheads)(element.type))) && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n children: renderAction(\"changeArrowhead\")\n }), renderAction(\"changeOpacity\"), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"fieldset\", {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"legend\", {\n children: (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(\"labels.layers\")\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n className: \"buttonList\"\n }, {\n children: [renderAction(\"sendToBack\"), renderAction(\"sendBackward\"), renderAction(\"bringForward\"), renderAction(\"bringToFront\")]\n }))]\n }), targetElements.length > 1 && !isSingleElementBoundContainer && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"fieldset\", {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"legend\", {\n children: (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(\"labels.align\")\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n className: \"buttonList\"\n }, {\n children: [isRTL ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n children: [renderAction(\"alignRight\"), renderAction(\"alignHorizontallyCentered\"), renderAction(\"alignLeft\")]\n }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n children: [renderAction(\"alignLeft\"), renderAction(\"alignHorizontallyCentered\"), renderAction(\"alignRight\")]\n }), targetElements.length > 2 && renderAction(\"distributeHorizontally\"), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n style: {\n flexBasis: \"100%\",\n height: 0\n }\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n style: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \".5rem\",\n marginTop: \"-0.5rem\"\n }\n }, {\n children: [renderAction(\"alignTop\"), renderAction(\"alignVerticallyCentered\"), renderAction(\"alignBottom\"), targetElements.length > 2 && renderAction(\"distributeVertically\")]\n }))]\n }))]\n }), !isEditing && targetElements.length > 0 && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"fieldset\", {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"legend\", {\n children: (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(\"labels.actions\")\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n className: \"buttonList\"\n }, {\n children: [!device.editor.isMobile && renderAction(\"duplicateSelection\"), !device.editor.isMobile && renderAction(\"deleteSelectedElements\"), renderAction(\"group\"), renderAction(\"ungroup\"), showLinkIcon && renderAction(\"hyperlink\"), showLineEditorAction && renderAction(\"toggleLinearEditor\")]\n }))]\n })]\n }));\n};\nconst ShapesSwitcher = ({\n activeTool,\n appState,\n app,\n UIOptions\n}) => {\n const {\n renderMermaid\n } = (0,_App__WEBPACK_IMPORTED_MODULE_3__.useAppProps)(); //zsviczian\n\n const [isExtraToolsMenuOpen, setIsExtraToolsMenuOpen] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false);\n const frameToolSelected = activeTool.type === \"frame\";\n const laserToolSelected = activeTool.type === \"laser\";\n const embeddableToolSelected = activeTool.type === \"embeddable\";\n const {\n TTDDialogTriggerTunnel\n } = (0,_context_tunnels__WEBPACK_IMPORTED_MODULE_19__.useTunnels)();\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n children: [_shapes__WEBPACK_IMPORTED_MODULE_5__.SHAPES.map(({\n value,\n icon,\n key,\n numericKey,\n fillable\n }, index) => {\n var _a;\n\n if (((_a = UIOptions.tools) === null || _a === void 0 ? void 0 : _a[value]) === false) {\n return null;\n }\n\n const label = (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(`toolBar.${value}`);\n const letter = key && (0,_utils__WEBPACK_IMPORTED_MODULE_6__.capitalizeString)(typeof key === \"string\" ? key : key[0]);\n const shortcut = letter ? `${letter} ${(0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(\"helpDialog.or\")} ${numericKey}` : `${numericKey}`;\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ToolButton__WEBPACK_IMPORTED_MODULE_8__.ToolButton, {\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_12__[\"default\"])(\"Shape\", {\n fillable\n }),\n type: \"radio\",\n icon: icon,\n checked: activeTool.type === value,\n name: \"editor-current-shape\",\n title: `${(0,_utils__WEBPACK_IMPORTED_MODULE_6__.capitalizeString)(label)} — ${shortcut}`,\n keyBindingLabel: numericKey || letter,\n \"aria-label\": (0,_utils__WEBPACK_IMPORTED_MODULE_6__.capitalizeString)(label),\n \"aria-keyshortcuts\": shortcut,\n \"data-testid\": `toolbar-${value}`,\n onPointerDown: ({\n pointerType\n }) => {\n if (!appState.penDetected && pointerType === \"pen\") {\n app.togglePenMode(true);\n }\n },\n onChange: ({\n pointerType\n }) => {\n if (appState.activeTool.type !== value) {\n (0,_analytics__WEBPACK_IMPORTED_MODULE_10__.trackEvent)(\"toolbar\", value, \"ui\");\n }\n\n if (value === \"image\") {\n app.setActiveTool({\n type: value,\n insertOnCanvasDirectly: pointerType !== \"mouse\"\n });\n } else {\n app.setActiveTool({\n type: value\n });\n }\n }\n }, value);\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n className: \"App-toolbar__divider\"\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_16__[\"default\"], Object.assign({\n open: isExtraToolsMenuOpen\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_16__[\"default\"].Trigger, Object.assign({\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_12__[\"default\"])(\"App-toolbar__extra-tools-trigger\", {\n \"App-toolbar__extra-tools-trigger--selected\": frameToolSelected || embeddableToolSelected || // in collab we're already highlighting the laser button\n // outside toolbar, so let's not highlight extra-tools button\n // on top of it\n laserToolSelected && !app.props.isCollaborating\n }),\n onToggle: () => setIsExtraToolsMenuOpen(!isExtraToolsMenuOpen),\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(\"toolBar.extraTools\")\n }, {\n children: [_icons__WEBPACK_IMPORTED_MODULE_17__.extraToolsIcon, app.props.aiEnabled !== false && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n style: {\n display: \"inline-flex\",\n marginLeft: \"auto\",\n padding: \"2px 4px\",\n borderRadius: 6,\n fontSize: 8,\n fontFamily: \"Cascadia, monospace\",\n position: \"absolute\",\n background: \"var(--color-promo)\",\n color: \"var(--color-surface-lowest)\",\n bottom: 3,\n right: 4\n }\n }, {\n children: \"AI\"\n }))]\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_16__[\"default\"].Content, Object.assign({\n onClickOutside: () => setIsExtraToolsMenuOpen(false),\n onSelect: () => setIsExtraToolsMenuOpen(false),\n className: \"App-toolbar__extra-tools-dropdown\"\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_16__[\"default\"].Item, Object.assign({\n onSelect: () => app.setActiveTool({\n type: \"frame\"\n }),\n icon: _icons__WEBPACK_IMPORTED_MODULE_17__.frameToolIcon,\n shortcut: _keys__WEBPACK_IMPORTED_MODULE_18__.KEYS.F.toLocaleUpperCase(),\n \"data-testid\": \"toolbar-frame\",\n selected: frameToolSelected\n }, {\n children: (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(\"toolBar.frame\")\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_16__[\"default\"].Item, Object.assign({\n onSelect: () => app.setActiveTool({\n type: \"embeddable\"\n }),\n icon: _icons__WEBPACK_IMPORTED_MODULE_17__.EmbedIcon,\n \"data-testid\": \"toolbar-embeddable\",\n selected: embeddableToolSelected\n }, {\n children: (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(\"toolBar.embeddable\")\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_16__[\"default\"].Item, Object.assign({\n onSelect: () => app.setActiveTool({\n type: \"laser\"\n }),\n icon: _icons__WEBPACK_IMPORTED_MODULE_17__.laserPointerToolIcon,\n \"data-testid\": \"toolbar-laser\",\n selected: laserToolSelected,\n shortcut: _keys__WEBPACK_IMPORTED_MODULE_18__.KEYS.K.toLocaleUpperCase()\n }, {\n children: (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(\"toolBar.laser\")\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n style: {\n margin: \"6px 0\",\n fontSize: 14,\n fontWeight: 600\n }\n }, {\n children: \"Generate\"\n })), app.props.aiEnabled !== false && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(TTDDialogTriggerTunnel.Out, {}), renderMermaid && //zsviczian\n (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_16__[\"default\"].Item, Object.assign({\n onSelect: () => app.setOpenDialog({\n name: \"ttd\",\n tab: \"mermaid\"\n }),\n icon: _icons__WEBPACK_IMPORTED_MODULE_17__.mermaidLogoIcon,\n \"data-testid\": \"toolbar-embeddable\"\n }, {\n children: (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(\"toolBar.mermaidToExcalidraw\")\n })), app.props.aiEnabled !== false && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_16__[\"default\"].Item, Object.assign({\n onSelect: () => app.onMagicframeToolSelect(),\n icon: _icons__WEBPACK_IMPORTED_MODULE_17__.MagicIcon,\n \"data-testid\": \"toolbar-magicframe\"\n }, {\n children: [(0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(\"toolBar.magicframe\"), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_16__[\"default\"].Item.Badge, {\n children: \"AI\"\n })]\n }))\n })]\n }))]\n }))]\n });\n};\nconst ZoomActions = ({\n renderAction,\n zoom,\n trayMode = false //zsviczian\n\n}) => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Stack__WEBPACK_IMPORTED_MODULE_7__[\"default\"].Col, Object.assign({\n gap: 1,\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_12__[\"default\"])(\"zoom-actions\", {\n \"tray-zoom\": trayMode\n })\n}, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Stack__WEBPACK_IMPORTED_MODULE_7__[\"default\"].Row, Object.assign({\n align: \"center\"\n }, {\n children: [renderAction(\"zoomOut\"), renderAction(\"resetZoom\"), renderAction(\"zoomIn\")]\n }))\n}));\nconst UndoRedoActions = ({\n renderAction,\n className\n}) => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n className: `undo-redo-buttons ${className}`\n}, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: \"undo-button-container\"\n }, {\n children: renderAction(\"undo\")\n /* //zsviczian */\n\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: \"redo-button-container\"\n }, {\n children: renderAction(\"redo\")\n /* //zsviczian */\n\n }))]\n}));\nconst ExitZenModeAction = ({\n actionManager,\n showExitZenModeBtn\n}) => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"button\", Object.assign({\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_12__[\"default\"])(\"disable-zen-mode\", {\n \"disable-zen-mode--visible\": showExitZenModeBtn\n }),\n onClick: () => actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_13__.actionToggleZenMode)\n}, {\n children: (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(\"buttons.exitZenMode\")\n}));\nconst FinalizeAction = ({\n renderAction,\n className\n}) => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: `finalize-button ${className}`\n}, {\n children: renderAction(\"finalize\", {\n size: \"small\"\n })\n}));\n\n//# sourceURL=webpack://ExcalidrawLib/./components/Actions.tsx?");
862
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"ExitZenModeAction\": () => (/* binding */ ExitZenModeAction),\n/* harmony export */ \"FinalizeAction\": () => (/* binding */ FinalizeAction),\n/* harmony export */ \"SelectedShapeActions\": () => (/* binding */ SelectedShapeActions),\n/* harmony export */ \"ShapesSwitcher\": () => (/* binding */ ShapesSwitcher),\n/* harmony export */ \"UndoRedoActions\": () => (/* binding */ UndoRedoActions),\n/* harmony export */ \"ZoomActions\": () => (/* binding */ ZoomActions),\n/* harmony export */ \"canChangeBackgroundColor\": () => (/* binding */ canChangeBackgroundColor),\n/* harmony export */ \"canChangeStrokeColor\": () => (/* binding */ canChangeStrokeColor)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../i18n */ \"./i18n.ts\");\n/* harmony import */ var _App__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./App */ \"./components/App.tsx\");\n/* harmony import */ var _scene__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../scene */ \"./scene/index.ts\");\n/* harmony import */ var _shapes__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../shapes */ \"./shapes.tsx\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _Stack__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./Stack */ \"./components/Stack.tsx\");\n/* harmony import */ var _ToolButton__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./ToolButton */ \"./components/ToolButton.tsx\");\n/* harmony import */ var _scene_comparisons__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../scene/comparisons */ \"./scene/comparisons.ts\");\n/* harmony import */ var _analytics__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../analytics */ \"./analytics.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! clsx */ \"../../node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../actions */ \"./actions/index.ts\");\n/* harmony import */ var _element_textElement__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../element/textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _Actions_scss__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./Actions.scss */ \"./components/Actions.scss\");\n/* harmony import */ var _dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./dropdownMenu/DropdownMenu */ \"./components/dropdownMenu/DropdownMenu.tsx\");\n/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./icons */ \"./components/icons.tsx\");\n/* harmony import */ var _keys__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../keys */ \"./keys.ts\");\n/* harmony import */ var _context_tunnels__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../context/tunnels */ \"./context/tunnels.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n // import { Tooltip } from \"./Tooltip\"; //zsviczian\n\n\n\n\n\n\n\nconst canChangeStrokeColor = (appState, targetElements) => {\n var _a;\n\n let commonSelectedType = ((_a = targetElements[0]) === null || _a === void 0 ? void 0 : _a.type) || null;\n\n for (const element of targetElements) {\n if (element.type !== commonSelectedType) {\n commonSelectedType = null;\n break;\n }\n }\n\n return (0,_scene_comparisons__WEBPACK_IMPORTED_MODULE_9__.hasStrokeColor)(appState.activeTool.type) && appState.activeTool.type !== \"image\" && commonSelectedType !== \"image\" && commonSelectedType !== \"frame\" && commonSelectedType !== \"magicframe\" || targetElements.some(element => (0,_scene_comparisons__WEBPACK_IMPORTED_MODULE_9__.hasStrokeColor)(element.type));\n};\nconst canChangeBackgroundColor = (appState, targetElements) => {\n return (0,_scene__WEBPACK_IMPORTED_MODULE_4__.hasBackground)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_4__.hasBackground)(element.type));\n};\nconst SelectedShapeActions = ({\n appState,\n elementsMap,\n renderAction\n}) => {\n const targetElements = (0,_scene__WEBPACK_IMPORTED_MODULE_4__.getTargetElements)(elementsMap, appState);\n let isSingleElementBoundContainer = false;\n\n if (targetElements.length === 2 && ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_11__.hasBoundTextElement)(targetElements[0]) || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_11__.hasBoundTextElement)(targetElements[1]))) {\n isSingleElementBoundContainer = true;\n }\n\n const isEditing = Boolean(appState.editingElement);\n const device = (0,_App__WEBPACK_IMPORTED_MODULE_3__.useDevice)();\n const isRTL = document.documentElement.getAttribute(\"dir\") === \"rtl\";\n const showFillIcons = (0,_scene__WEBPACK_IMPORTED_MODULE_4__.hasBackground)(appState.activeTool.type) && !(0,_utils__WEBPACK_IMPORTED_MODULE_6__.isTransparent)(appState.currentItemBackgroundColor) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_4__.hasBackground)(element.type) && !(0,_utils__WEBPACK_IMPORTED_MODULE_6__.isTransparent)(element.backgroundColor));\n const showLinkIcon = targetElements.length === 1 || isSingleElementBoundContainer;\n const showLineEditorAction = !appState.editingLinearElement && targetElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_11__.isLinearElement)(targetElements[0]);\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n className: \"panelColumn\"\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n children: canChangeStrokeColor(appState, targetElements) && renderAction(\"changeStrokeColor\")\n }), canChangeBackgroundColor(appState, targetElements) && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n children: renderAction(\"changeBackgroundColor\")\n }), showFillIcons && renderAction(\"changeFillStyle\"), ((0,_scene__WEBPACK_IMPORTED_MODULE_4__.hasStrokeWidth)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_4__.hasStrokeWidth)(element.type))) && renderAction(\"changeStrokeWidth\"), (appState.activeTool.type === \"freedraw\" || targetElements.some(element => element.type === \"freedraw\")) && renderAction(\"changeStrokeShape\"), ((0,_scene__WEBPACK_IMPORTED_MODULE_4__.hasStrokeStyle)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_4__.hasStrokeStyle)(element.type))) && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n children: [renderAction(\"changeStrokeStyle\"), renderAction(\"changeSloppiness\")]\n }), ((0,_scene__WEBPACK_IMPORTED_MODULE_4__.canChangeRoundness)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_4__.canChangeRoundness)(element.type))) && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n children: renderAction(\"changeRoundness\")\n }), (appState.activeTool.type === \"text\" || targetElements.some(_element_typeChecks__WEBPACK_IMPORTED_MODULE_11__.isTextElement)) && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n children: [renderAction(\"changeFontSize\"), renderAction(\"changeFontFamily\"), (appState.activeTool.type === \"text\" || (0,_element_textElement__WEBPACK_IMPORTED_MODULE_14__.suppportsHorizontalAlign)(targetElements, elementsMap)) && renderAction(\"changeTextAlign\")]\n }), (0,_element_textElement__WEBPACK_IMPORTED_MODULE_14__.shouldAllowVerticalAlign)(targetElements, elementsMap) && renderAction(\"changeVerticalAlign\"), ((0,_scene__WEBPACK_IMPORTED_MODULE_4__.canHaveArrowheads)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_4__.canHaveArrowheads)(element.type))) && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n children: renderAction(\"changeArrowhead\")\n }), renderAction(\"changeOpacity\"), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"fieldset\", {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"legend\", {\n children: (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(\"labels.layers\")\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n className: \"buttonList\"\n }, {\n children: [renderAction(\"sendToBack\"), renderAction(\"sendBackward\"), renderAction(\"bringForward\"), renderAction(\"bringToFront\")]\n }))]\n }), targetElements.length > 1 && !isSingleElementBoundContainer && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"fieldset\", {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"legend\", {\n children: (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(\"labels.align\")\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n className: \"buttonList\"\n }, {\n children: [isRTL ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n children: [renderAction(\"alignRight\"), renderAction(\"alignHorizontallyCentered\"), renderAction(\"alignLeft\")]\n }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n children: [renderAction(\"alignLeft\"), renderAction(\"alignHorizontallyCentered\"), renderAction(\"alignRight\")]\n }), targetElements.length > 2 && renderAction(\"distributeHorizontally\"), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n style: {\n flexBasis: \"100%\",\n height: 0\n }\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n style: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \".5rem\",\n marginTop: \"-0.5rem\"\n }\n }, {\n children: [renderAction(\"alignTop\"), renderAction(\"alignVerticallyCentered\"), renderAction(\"alignBottom\"), targetElements.length > 2 && renderAction(\"distributeVertically\")]\n }))]\n }))]\n }), !isEditing && targetElements.length > 0 && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"fieldset\", {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"legend\", {\n children: (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(\"labels.actions\")\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n className: \"buttonList\"\n }, {\n children: [!device.editor.isMobile && renderAction(\"duplicateSelection\"), !device.editor.isMobile && renderAction(\"deleteSelectedElements\"), renderAction(\"group\"), renderAction(\"ungroup\"), showLinkIcon && renderAction(\"hyperlink\"), showLineEditorAction && renderAction(\"toggleLinearEditor\")]\n }))]\n })]\n }));\n};\nconst ShapesSwitcher = ({\n activeTool,\n appState,\n app,\n UIOptions\n}) => {\n const {\n renderMermaid\n } = (0,_App__WEBPACK_IMPORTED_MODULE_3__.useAppProps)(); //zsviczian\n\n const [isExtraToolsMenuOpen, setIsExtraToolsMenuOpen] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false);\n const frameToolSelected = activeTool.type === \"frame\";\n const laserToolSelected = activeTool.type === \"laser\";\n const embeddableToolSelected = activeTool.type === \"embeddable\";\n const {\n TTDDialogTriggerTunnel\n } = (0,_context_tunnels__WEBPACK_IMPORTED_MODULE_19__.useTunnels)();\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n children: [_shapes__WEBPACK_IMPORTED_MODULE_5__.SHAPES.map(({\n value,\n icon,\n key,\n numericKey,\n fillable\n }, index) => {\n var _a;\n\n if (((_a = UIOptions.tools) === null || _a === void 0 ? void 0 : _a[value]) === false) {\n return null;\n }\n\n const label = (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(`toolBar.${value}`);\n const letter = key && (0,_utils__WEBPACK_IMPORTED_MODULE_6__.capitalizeString)(typeof key === \"string\" ? key : key[0]);\n const shortcut = letter ? `${letter} ${(0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(\"helpDialog.or\")} ${numericKey}` : `${numericKey}`;\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ToolButton__WEBPACK_IMPORTED_MODULE_8__.ToolButton, {\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_12__[\"default\"])(\"Shape\", {\n fillable\n }),\n type: \"radio\",\n icon: icon,\n checked: activeTool.type === value,\n name: \"editor-current-shape\",\n title: `${(0,_utils__WEBPACK_IMPORTED_MODULE_6__.capitalizeString)(label)} — ${shortcut}`,\n keyBindingLabel: numericKey || letter,\n \"aria-label\": (0,_utils__WEBPACK_IMPORTED_MODULE_6__.capitalizeString)(label),\n \"aria-keyshortcuts\": shortcut,\n \"data-testid\": `toolbar-${value}`,\n onPointerDown: ({\n pointerType\n }) => {\n if (!appState.penDetected && pointerType === \"pen\") {\n app.togglePenMode(true);\n }\n },\n onChange: ({\n pointerType\n }) => {\n if (appState.activeTool.type !== value) {\n (0,_analytics__WEBPACK_IMPORTED_MODULE_10__.trackEvent)(\"toolbar\", value, \"ui\");\n }\n\n if (value === \"image\") {\n app.setActiveTool({\n type: value,\n insertOnCanvasDirectly: pointerType !== \"mouse\"\n });\n } else {\n app.setActiveTool({\n type: value\n });\n }\n }\n }, value);\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n className: \"App-toolbar__divider\"\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_16__[\"default\"], Object.assign({\n open: isExtraToolsMenuOpen\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_16__[\"default\"].Trigger, Object.assign({\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_12__[\"default\"])(\"App-toolbar__extra-tools-trigger\", {\n \"App-toolbar__extra-tools-trigger--selected\": frameToolSelected || embeddableToolSelected || // in collab we're already highlighting the laser button\n // outside toolbar, so let's not highlight extra-tools button\n // on top of it\n laserToolSelected && !app.props.isCollaborating\n }),\n onToggle: () => setIsExtraToolsMenuOpen(!isExtraToolsMenuOpen),\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(\"toolBar.extraTools\")\n }, {\n children: [_icons__WEBPACK_IMPORTED_MODULE_17__.extraToolsIcon, app.props.aiEnabled !== false && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n style: {\n display: \"inline-flex\",\n marginLeft: \"auto\",\n padding: \"2px 4px\",\n borderRadius: 6,\n fontSize: 8,\n fontFamily: \"Cascadia, monospace\",\n position: \"absolute\",\n background: \"var(--color-promo)\",\n color: \"var(--color-surface-lowest)\",\n bottom: 3,\n right: 4\n }\n }, {\n children: \"AI\"\n }))]\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_16__[\"default\"].Content, Object.assign({\n onClickOutside: () => setIsExtraToolsMenuOpen(false),\n onSelect: () => setIsExtraToolsMenuOpen(false),\n className: \"App-toolbar__extra-tools-dropdown\"\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_16__[\"default\"].Item, Object.assign({\n onSelect: () => app.setActiveTool({\n type: \"frame\"\n }),\n icon: _icons__WEBPACK_IMPORTED_MODULE_17__.frameToolIcon,\n shortcut: _keys__WEBPACK_IMPORTED_MODULE_18__.KEYS.F.toLocaleUpperCase(),\n \"data-testid\": \"toolbar-frame\",\n selected: frameToolSelected\n }, {\n children: (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(\"toolBar.frame\")\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_16__[\"default\"].Item, Object.assign({\n onSelect: () => app.setActiveTool({\n type: \"embeddable\"\n }),\n icon: _icons__WEBPACK_IMPORTED_MODULE_17__.EmbedIcon,\n \"data-testid\": \"toolbar-embeddable\",\n selected: embeddableToolSelected\n }, {\n children: (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(\"toolBar.embeddable\")\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_16__[\"default\"].Item, Object.assign({\n onSelect: () => app.setActiveTool({\n type: \"laser\"\n }),\n icon: _icons__WEBPACK_IMPORTED_MODULE_17__.laserPointerToolIcon,\n \"data-testid\": \"toolbar-laser\",\n selected: laserToolSelected,\n shortcut: _keys__WEBPACK_IMPORTED_MODULE_18__.KEYS.K.toLocaleUpperCase()\n }, {\n children: (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(\"toolBar.laser\")\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n style: {\n margin: \"6px 0\",\n fontSize: 14,\n fontWeight: 600\n }\n }, {\n children: \"Generate\"\n })), app.props.aiEnabled !== false && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(TTDDialogTriggerTunnel.Out, {}), renderMermaid && //zsviczian\n (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_16__[\"default\"].Item, Object.assign({\n onSelect: () => app.setOpenDialog({\n name: \"ttd\",\n tab: \"mermaid\"\n }),\n icon: _icons__WEBPACK_IMPORTED_MODULE_17__.mermaidLogoIcon,\n \"data-testid\": \"toolbar-embeddable\"\n }, {\n children: (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(\"toolBar.mermaidToExcalidraw\")\n })), app.props.aiEnabled !== false && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_16__[\"default\"].Item, Object.assign({\n onSelect: () => app.onMagicframeToolSelect(),\n icon: _icons__WEBPACK_IMPORTED_MODULE_17__.MagicIcon,\n \"data-testid\": \"toolbar-magicframe\"\n }, {\n children: [(0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(\"toolBar.magicframe\"), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_16__[\"default\"].Item.Badge, {\n children: \"AI\"\n })]\n }))\n })]\n }))]\n }))]\n });\n};\nconst ZoomActions = ({\n renderAction,\n zoom,\n trayMode = false //zsviczian\n\n}) => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Stack__WEBPACK_IMPORTED_MODULE_7__[\"default\"].Col, Object.assign({\n gap: 1,\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_12__[\"default\"])(\"zoom-actions\", {\n \"tray-zoom\": trayMode\n })\n}, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Stack__WEBPACK_IMPORTED_MODULE_7__[\"default\"].Row, Object.assign({\n align: \"center\"\n }, {\n children: [renderAction(\"zoomOut\"), renderAction(\"resetZoom\"), renderAction(\"zoomIn\")]\n }))\n}));\nconst UndoRedoActions = ({\n renderAction,\n className\n}) => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n className: `undo-redo-buttons ${className}`\n}, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: \"undo-button-container\"\n }, {\n children: renderAction(\"undo\")\n /* //zsviczian */\n\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: \"redo-button-container\"\n }, {\n children: renderAction(\"redo\")\n /* //zsviczian */\n\n }))]\n}));\nconst ExitZenModeAction = ({\n actionManager,\n showExitZenModeBtn\n}) => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"button\", Object.assign({\n type: \"button\",\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_12__[\"default\"])(\"disable-zen-mode\", {\n \"disable-zen-mode--visible\": showExitZenModeBtn\n }),\n onClick: () => actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_13__.actionToggleZenMode)\n}, {\n children: (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(\"buttons.exitZenMode\")\n}));\nconst FinalizeAction = ({\n renderAction,\n className\n}) => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: `finalize-button ${className}`\n}, {\n children: renderAction(\"finalize\", {\n size: \"small\"\n })\n}));\n\n//# sourceURL=webpack://ExcalidrawLib/./components/Actions.tsx?");
863
863
 
864
864
  /***/ }),
865
865
 
@@ -881,7 +881,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
881
881
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
882
882
 
883
883
  "use strict";
884
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"ExcalidrawContainerContext\": () => (/* binding */ ExcalidrawContainerContext),\n/* harmony export */ \"createTestHook\": () => (/* binding */ createTestHook),\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */ \"hostPlugin\": () => (/* binding */ hostPlugin),\n/* harmony export */ \"showFourthFont\": () => (/* binding */ showFourthFont),\n/* harmony export */ \"useApp\": () => (/* binding */ useApp),\n/* harmony export */ \"useAppProps\": () => (/* binding */ useAppProps),\n/* harmony export */ \"useDevice\": () => (/* binding */ useDevice),\n/* harmony export */ \"useExcalidrawActionManager\": () => (/* binding */ useExcalidrawActionManager),\n/* harmony export */ \"useExcalidrawAppState\": () => (/* binding */ useExcalidrawAppState),\n/* harmony export */ \"useExcalidrawContainer\": () => (/* binding */ useExcalidrawContainer),\n/* harmony export */ \"useExcalidrawElements\": () => (/* binding */ useExcalidrawElements),\n/* harmony export */ \"useExcalidrawSetAppState\": () => (/* binding */ useExcalidrawSetAppState)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var roughjs_bin_rough__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! roughjs/bin/rough */ \"../../node_modules/roughjs/bin/rough.js\");\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! clsx */ \"../../node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var nanoid__WEBPACK_IMPORTED_MODULE_95__ = __webpack_require__(/*! nanoid */ \"./node_modules/nanoid/index.browser.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../actions */ \"./actions/index.ts\");\n/* harmony import */ var _actions_actionHistory__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../actions/actionHistory */ \"./actions/actionHistory.tsx\");\n/* harmony import */ var _actions_manager__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../actions/manager */ \"./actions/manager.tsx\");\n/* harmony import */ var _actions_register__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../actions/register */ \"./actions/register.ts\");\n/* harmony import */ var _analytics__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../analytics */ \"./analytics.ts\");\n/* harmony import */ var _appState__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../appState */ \"./appState.ts\");\n/* harmony import */ var _clipboard__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../clipboard */ \"./clipboard.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _data__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../data */ \"./data/index.ts\");\n/* harmony import */ var _data_library__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../data/library */ \"./data/library.ts\");\n/* harmony import */ var _data_restore__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../data/restore */ \"./data/restore.ts\");\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _element_binding__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../element/binding */ \"./element/binding.ts\");\n/* harmony import */ var _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../element/linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _element_mutateElement__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../element/mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _element_newElement__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ../element/newElement */ \"./element/newElement.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _gesture__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ../gesture */ \"./gesture.ts\");\n/* harmony import */ var _groups__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ../groups */ \"./groups.ts\");\n/* harmony import */ var _history__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ../history */ \"./history.ts\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ../i18n */ \"./i18n.ts\");\n/* harmony import */ var _keys__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__(/*! ../keys */ \"./keys.ts\");\n/* harmony import */ var _element_sizeHelpers__WEBPACK_IMPORTED_MODULE_27__ = __webpack_require__(/*! ../element/sizeHelpers */ \"./element/sizeHelpers.ts\");\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_28__ = __webpack_require__(/*! ../math */ \"./math.ts\");\n/* harmony import */ var _scene__WEBPACK_IMPORTED_MODULE_29__ = __webpack_require__(/*! ../scene */ \"./scene/index.ts\");\n/* harmony import */ var _scene_Scene__WEBPACK_IMPORTED_MODULE_30__ = __webpack_require__(/*! ../scene/Scene */ \"./scene/Scene.ts\");\n/* harmony import */ var _scene_zoom__WEBPACK_IMPORTED_MODULE_31__ = __webpack_require__(/*! ../scene/zoom */ \"./scene/zoom.ts\");\n/* harmony import */ var _shapes__WEBPACK_IMPORTED_MODULE_32__ = __webpack_require__(/*! ../shapes */ \"./shapes.tsx\");\n/* harmony import */ var _utils_geometry_shape__WEBPACK_IMPORTED_MODULE_33__ = __webpack_require__(/*! ../../utils/geometry/shape */ \"../utils/geometry/shape.ts\");\n/* harmony import */ var _utils_collision__WEBPACK_IMPORTED_MODULE_34__ = __webpack_require__(/*! ../../utils/collision */ \"../utils/collision.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_35__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _element_embeddable__WEBPACK_IMPORTED_MODULE_36__ = __webpack_require__(/*! ../element/embeddable */ \"./element/embeddable.ts\");\n/* harmony import */ var _ContextMenu__WEBPACK_IMPORTED_MODULE_37__ = __webpack_require__(/*! ./ContextMenu */ \"./components/ContextMenu.tsx\");\n/* harmony import */ var _LayerUI__WEBPACK_IMPORTED_MODULE_38__ = __webpack_require__(/*! ./LayerUI */ \"./components/LayerUI.tsx\");\n/* harmony import */ var _Toast__WEBPACK_IMPORTED_MODULE_39__ = __webpack_require__(/*! ./Toast */ \"./components/Toast.tsx\");\n/* harmony import */ var _actions_actionToggleViewMode__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(/*! ../actions/actionToggleViewMode */ \"./actions/actionToggleViewMode.tsx\");\n/* harmony import */ var _data_blob__WEBPACK_IMPORTED_MODULE_41__ = __webpack_require__(/*! ../data/blob */ \"./data/blob.ts\");\n/* harmony import */ var _element_image__WEBPACK_IMPORTED_MODULE_42__ = __webpack_require__(/*! ../element/image */ \"./element/image.ts\");\n/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_43__ = __webpack_require__(/*! lodash.throttle */ \"../../node_modules/lodash.throttle/index.js\");\n/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_43___default = /*#__PURE__*/__webpack_require__.n(lodash_throttle__WEBPACK_IMPORTED_MODULE_43__);\n/* harmony import */ var _data_filesystem__WEBPACK_IMPORTED_MODULE_44__ = __webpack_require__(/*! ../data/filesystem */ \"./data/filesystem.ts\");\n/* harmony import */ var _element_textElement__WEBPACK_IMPORTED_MODULE_45__ = __webpack_require__(/*! ../element/textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _components_hyperlink_Hyperlink__WEBPACK_IMPORTED_MODULE_46__ = __webpack_require__(/*! ../components/hyperlink/Hyperlink */ \"./components/hyperlink/Hyperlink.tsx\");\n/* harmony import */ var _data_url__WEBPACK_IMPORTED_MODULE_47__ = __webpack_require__(/*! ../data/url */ \"./data/url.ts\");\n/* harmony import */ var _element_transformHandles__WEBPACK_IMPORTED_MODULE_48__ = __webpack_require__(/*! ../element/transformHandles */ \"./element/transformHandles.ts\");\n/* harmony import */ var _actions_actionElementLock__WEBPACK_IMPORTED_MODULE_49__ = __webpack_require__(/*! ../actions/actionElementLock */ \"./actions/actionElementLock.ts\");\n/* harmony import */ var _scene_Fonts__WEBPACK_IMPORTED_MODULE_50__ = __webpack_require__(/*! ../scene/Fonts */ \"./scene/Fonts.ts\");\n/* harmony import */ var _frame__WEBPACK_IMPORTED_MODULE_51__ = __webpack_require__(/*! ../frame */ \"./frame.ts\");\n/* harmony import */ var _scene_selection__WEBPACK_IMPORTED_MODULE_52__ = __webpack_require__(/*! ../scene/selection */ \"./scene/selection.ts\");\n/* harmony import */ var _actions_actionClipboard__WEBPACK_IMPORTED_MODULE_53__ = __webpack_require__(/*! ../actions/actionClipboard */ \"./actions/actionClipboard.tsx\");\n/* harmony import */ var _actions_actionFrame__WEBPACK_IMPORTED_MODULE_54__ = __webpack_require__(/*! ../actions/actionFrame */ \"./actions/actionFrame.ts\");\n/* harmony import */ var _actions_actionCanvas__WEBPACK_IMPORTED_MODULE_55__ = __webpack_require__(/*! ../actions/actionCanvas */ \"./actions/actionCanvas.tsx\");\n/* harmony import */ var _jotai__WEBPACK_IMPORTED_MODULE_56__ = __webpack_require__(/*! ../jotai */ \"./jotai.ts\");\n/* harmony import */ var _ActiveConfirmDialog__WEBPACK_IMPORTED_MODULE_57__ = __webpack_require__(/*! ./ActiveConfirmDialog */ \"./components/ActiveConfirmDialog.tsx\");\n/* harmony import */ var _errors__WEBPACK_IMPORTED_MODULE_58__ = __webpack_require__(/*! ../errors */ \"./errors.ts\");\n/* harmony import */ var _snapping__WEBPACK_IMPORTED_MODULE_59__ = __webpack_require__(/*! ../snapping */ \"./snapping.ts\");\n/* harmony import */ var _actions_actionBoundText__WEBPACK_IMPORTED_MODULE_60__ = __webpack_require__(/*! ../actions/actionBoundText */ \"./actions/actionBoundText.tsx\");\n/* harmony import */ var _BraveMeasureTextError__WEBPACK_IMPORTED_MODULE_61__ = __webpack_require__(/*! ./BraveMeasureTextError */ \"./components/BraveMeasureTextError.tsx\");\n/* harmony import */ var _EyeDropper__WEBPACK_IMPORTED_MODULE_62__ = __webpack_require__(/*! ./EyeDropper */ \"./components/EyeDropper.tsx\");\n/* harmony import */ var _data_transform__WEBPACK_IMPORTED_MODULE_63__ = __webpack_require__(/*! ../data/transform */ \"./data/transform.ts\");\n/* harmony import */ var _Sidebar_Sidebar__WEBPACK_IMPORTED_MODULE_64__ = __webpack_require__(/*! ./Sidebar/Sidebar */ \"./components/Sidebar/Sidebar.tsx\");\n/* harmony import */ var _canvases__WEBPACK_IMPORTED_MODULE_65__ = __webpack_require__(/*! ./canvases */ \"./components/canvases/index.tsx\");\n/* harmony import */ var _scene_Renderer__WEBPACK_IMPORTED_MODULE_66__ = __webpack_require__(/*! ../scene/Renderer */ \"./scene/Renderer.ts\");\n/* harmony import */ var _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_67__ = __webpack_require__(/*! ../scene/ShapeCache */ \"./scene/ShapeCache.ts\");\n/* harmony import */ var _SVGLayer__WEBPACK_IMPORTED_MODULE_68__ = __webpack_require__(/*! ./SVGLayer */ \"./components/SVGLayer.tsx\");\n/* harmony import */ var _cursor__WEBPACK_IMPORTED_MODULE_69__ = __webpack_require__(/*! ../cursor */ \"./cursor.ts\");\n/* harmony import */ var _emitter__WEBPACK_IMPORTED_MODULE_70__ = __webpack_require__(/*! ../emitter */ \"./emitter.ts\");\n/* harmony import */ var _element_ElementCanvasButtons__WEBPACK_IMPORTED_MODULE_71__ = __webpack_require__(/*! ../element/ElementCanvasButtons */ \"./element/ElementCanvasButtons.tsx\");\n/* harmony import */ var _data_magic__WEBPACK_IMPORTED_MODULE_72__ = __webpack_require__(/*! ../data/magic */ \"./data/magic.ts\");\n/* harmony import */ var _utils_export__WEBPACK_IMPORTED_MODULE_73__ = __webpack_require__(/*! ../../utils/export */ \"../utils/export.ts\");\n/* harmony import */ var _colors__WEBPACK_IMPORTED_MODULE_74__ = __webpack_require__(/*! ../colors */ \"./colors.ts\");\n/* harmony import */ var _MagicButton__WEBPACK_IMPORTED_MODULE_75__ = __webpack_require__(/*! ./MagicButton */ \"./components/MagicButton.tsx\");\n/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_76__ = __webpack_require__(/*! ./icons */ \"./components/icons.tsx\");\n/* harmony import */ var _data_EditorLocalStorage__WEBPACK_IMPORTED_MODULE_77__ = __webpack_require__(/*! ../data/EditorLocalStorage */ \"./data/EditorLocalStorage.ts\");\n/* harmony import */ var _FollowMode_FollowMode__WEBPACK_IMPORTED_MODULE_78__ = __webpack_require__(/*! ./FollowMode/FollowMode */ \"./components/FollowMode/FollowMode.tsx\");\n/* harmony import */ var _actions_actionProperties__WEBPACK_IMPORTED_MODULE_79__ = __webpack_require__(/*! ../actions/actionProperties */ \"./actions/actionProperties.tsx\");\n/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_80__ = __webpack_require__(/*! ../store */ \"./store.ts\");\n/* harmony import */ var _animation_frame_handler__WEBPACK_IMPORTED_MODULE_81__ = __webpack_require__(/*! ../animation-frame-handler */ \"./animation-frame-handler.ts\");\n/* harmony import */ var _animated_trail__WEBPACK_IMPORTED_MODULE_82__ = __webpack_require__(/*! ../animated-trail */ \"./animated-trail.ts\");\n/* harmony import */ var _laser_trails__WEBPACK_IMPORTED_MODULE_83__ = __webpack_require__(/*! ../laser-trails */ \"./laser-trails.ts\");\n/* harmony import */ var _reactUtils__WEBPACK_IMPORTED_MODULE_84__ = __webpack_require__(/*! ../reactUtils */ \"./reactUtils.ts\");\n/* harmony import */ var _renderer_renderElement__WEBPACK_IMPORTED_MODULE_85__ = __webpack_require__(/*! ../renderer/renderElement */ \"./renderer/renderElement.ts\");\n/* harmony import */ var _obsidianUtils__WEBPACK_IMPORTED_MODULE_86__ = __webpack_require__(/*! ../obsidianUtils */ \"./obsidianUtils.ts\");\n/* harmony import */ var _element_collision__WEBPACK_IMPORTED_MODULE_87__ = __webpack_require__(/*! ../element/collision */ \"./element/collision.ts\");\n/* harmony import */ var _element_textWysiwyg__WEBPACK_IMPORTED_MODULE_88__ = __webpack_require__(/*! ../element/textWysiwyg */ \"./element/textWysiwyg.tsx\");\n/* harmony import */ var _scene_scrollbars__WEBPACK_IMPORTED_MODULE_89__ = __webpack_require__(/*! ../scene/scrollbars */ \"./scene/scrollbars.ts\");\n/* harmony import */ var _fractionalIndex__WEBPACK_IMPORTED_MODULE_90__ = __webpack_require__(/*! ../fractionalIndex */ \"./fractionalIndex.ts\");\n/* harmony import */ var _hyperlink_helpers__WEBPACK_IMPORTED_MODULE_91__ = __webpack_require__(/*! ./hyperlink/helpers */ \"./components/hyperlink/helpers.ts\");\n/* harmony import */ var _actions_shortcuts__WEBPACK_IMPORTED_MODULE_92__ = __webpack_require__(/*! ../actions/shortcuts */ \"./actions/shortcuts.ts\");\n/* harmony import */ var _element_resizeElements__WEBPACK_IMPORTED_MODULE_93__ = __webpack_require__(/*! ../element/resizeElements */ \"./element/resizeElements.ts\");\n/* harmony import */ var _actions_actionTextAutoResize__WEBPACK_IMPORTED_MODULE_94__ = __webpack_require__(/*! ../actions/actionTextAutoResize */ \"./actions/actionTextAutoResize.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n //zsviczian\n\n\nconst AppContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext(null);\nconst AppPropsContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext(null);\nlet showFourthFont = false; //zsviczian\n\nconst deviceContextInitialValue = {\n viewport: {\n isMobile: false,\n isLandscape: false\n },\n editor: {\n isMobile: false,\n canFitSidebar: false\n },\n isTouchScreen: false\n};\nconst DeviceContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext(deviceContextInitialValue);\nDeviceContext.displayName = \"DeviceContext\";\nconst ExcalidrawContainerContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext({\n container: null,\n id: null\n});\nExcalidrawContainerContext.displayName = \"ExcalidrawContainerContext\";\nconst ExcalidrawElementsContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext([]);\nExcalidrawElementsContext.displayName = \"ExcalidrawElementsContext\";\nconst ExcalidrawAppStateContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext(Object.assign(Object.assign({}, (0,_appState__WEBPACK_IMPORTED_MODULE_10__.getDefaultAppState)()), {\n width: 0,\n height: 0,\n offsetLeft: 0,\n offsetTop: 0\n}));\nExcalidrawAppStateContext.displayName = \"ExcalidrawAppStateContext\";\nconst ExcalidrawSetAppStateContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext(() => {\n console.warn(\"Uninitialized ExcalidrawSetAppStateContext context!\");\n});\nExcalidrawSetAppStateContext.displayName = \"ExcalidrawSetAppStateContext\";\nconst ExcalidrawActionManagerContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext(null);\nExcalidrawActionManagerContext.displayName = \"ExcalidrawActionManagerContext\";\nconst useApp = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(AppContext);\nconst useAppProps = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(AppPropsContext);\nconst useDevice = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(DeviceContext);\nconst useExcalidrawContainer = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(ExcalidrawContainerContext);\nconst useExcalidrawElements = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(ExcalidrawElementsContext);\nconst useExcalidrawAppState = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(ExcalidrawAppStateContext);\nconst useExcalidrawSetAppState = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(ExcalidrawSetAppStateContext);\nconst useExcalidrawActionManager = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(ExcalidrawActionManagerContext);\nlet didTapTwice = false;\nlet tappedTwiceTimer = 0;\nlet isHoldingSpace = false;\nlet isPanning = false;\nlet isDraggingScrollBar = false;\nlet currentScrollBars = {\n horizontal: null,\n vertical: null\n};\nlet touchTimeout = 0;\nlet invalidateContextMenu = false;\nlet hostPlugin; //zsviczian\n\n/**\r\n * Map of youtube embed video states\r\n */\n\nconst YOUTUBE_VIDEO_STATES = new Map();\nlet IS_PLAIN_PASTE = false;\nlet IS_PLAIN_PASTE_TIMER = 0;\nlet PLAIN_PASTE_TOAST_SHOWN = false;\nlet lastPointerUp = null;\nconst gesture = {\n pointers: new Map(),\n lastCenter: null,\n initialDistance: null,\n initialScale: null\n};\n\nclass App extends (react__WEBPACK_IMPORTED_MODULE_1___default().Component) {\n constructor(props) {\n super(props);\n this.interactiveCanvas = null;\n this.unmounted = false;\n this.device = deviceContextInitialValue;\n this.excalidrawContainerRef = react__WEBPACK_IMPORTED_MODULE_1___default().createRef();\n this.files = {};\n this.imageCache = new Map();\n this.iFrameRefs = new Map();\n /**\r\n * Indicates whether the embeddable's url has been validated for rendering.\r\n * If value not set, indicates that the validation is pending.\r\n * Initially or on url change the flag is not reset so that we can guarantee\r\n * the validation came from a trusted source (the editor).\r\n **/\n\n this.embedsValidationStatus = new Map();\n /** embeds that have been inserted to DOM (as a perf optim, we don't want to\r\n * insert to DOM before user initially scrolls to them) */\n\n this.initializedEmbeds = new Set();\n this.elementsPendingErasure = new Set();\n this.lastPointerDownEvent = null;\n this.lastPointerUpEvent = null;\n this.lastPointerMoveEvent = null;\n this.lastViewportPosition = {\n x: 0,\n y: 0\n };\n this.allowMobileMode = true; //zsviczian\n\n this.animationFrameHandler = new _animation_frame_handler__WEBPACK_IMPORTED_MODULE_81__.AnimationFrameHandler();\n this.laserTrails = new _laser_trails__WEBPACK_IMPORTED_MODULE_83__.LaserTrails(this.animationFrameHandler, this);\n this.eraserTrail = new _animated_trail__WEBPACK_IMPORTED_MODULE_82__.AnimatedTrail(this.animationFrameHandler, this, {\n streamline: 0.2,\n size: 5,\n keepHead: true,\n sizeMapping: c => {\n const DECAY_TIME = 200;\n const DECAY_LENGTH = 10;\n const t = Math.max(0, 1 - (performance.now() - c.pressure) / DECAY_TIME);\n const l = (DECAY_LENGTH - Math.min(DECAY_LENGTH, c.totalLength - c.currentIndex)) / DECAY_LENGTH;\n return Math.min((0,_utils__WEBPACK_IMPORTED_MODULE_35__.easeOut)(l), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.easeOut)(t));\n },\n fill: () => this.state.theme === _constants__WEBPACK_IMPORTED_MODULE_12__.THEME.LIGHT ? \"rgba(0, 0, 0, 0.2)\" : \"rgba(255, 255, 255, 0.2)\"\n });\n this.onChangeEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_70__.Emitter();\n this.onPointerDownEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_70__.Emitter();\n this.onPointerUpEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_70__.Emitter();\n this.onUserFollowEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_70__.Emitter();\n this.onScrollChangeEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_70__.Emitter();\n this.missingPointerEventCleanupEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_70__.Emitter();\n this.onRemoveEventListenersEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_70__.Emitter();\n\n this.updateEmbedValidationStatus = (element, status) => {\n this.embedsValidationStatus.set(element.id, status);\n _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_67__.ShapeCache[\"delete\"](element);\n };\n\n this.updateEmbeddables = () => {\n const iframeLikes = new Set();\n let updated = false;\n this.scene.getNonDeletedElements().filter(element => {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(element)) {\n iframeLikes.add(element.id);\n\n if (!this.embedsValidationStatus.has(element.id)) {\n updated = true;\n const validated = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_36__.embeddableURLValidator)(element.link, this.props.validateEmbeddable);\n this.updateEmbedValidationStatus(element, validated);\n }\n } else if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(element)) {\n iframeLikes.add(element.id);\n }\n\n return false;\n });\n\n if (updated) {\n this.scene.triggerUpdate();\n } // GC\n\n\n this.iFrameRefs.forEach((ref, id) => {\n if (!iframeLikes.has(id)) {\n this.iFrameRefs.delete(id);\n }\n });\n };\n\n this.getFrameNameDOMId = frameElement => {\n return `${this.id}-frame-name-${frameElement.id}`;\n };\n\n this.frameNameBoundsCache = {\n get: frameElement => {\n let bounds = this.frameNameBoundsCache._cache.get(frameElement.id);\n\n if (!bounds || bounds.zoom !== this.state.zoom.value || bounds.versionNonce !== frameElement.versionNonce) {\n const frameNameDiv = document.getElementById(this.getFrameNameDOMId(frameElement));\n\n if (frameNameDiv) {\n const box = frameNameDiv.getBoundingClientRect();\n const boxSceneTopLeft = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)({\n clientX: box.x,\n clientY: box.y\n }, this.state);\n const boxSceneBottomRight = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)({\n clientX: box.right,\n clientY: box.bottom\n }, this.state);\n bounds = {\n x: boxSceneTopLeft.x,\n y: boxSceneTopLeft.y,\n width: boxSceneBottomRight.x - boxSceneTopLeft.x,\n height: boxSceneBottomRight.y - boxSceneTopLeft.y,\n angle: 0,\n zoom: this.state.zoom.value,\n versionNonce: frameElement.versionNonce\n };\n\n this.frameNameBoundsCache._cache.set(frameElement.id, bounds);\n\n return bounds;\n }\n\n return null;\n }\n\n return bounds;\n },\n\n /**\r\n * @private\r\n */\n _cache: new Map()\n };\n\n this.renderFrameNames = () => {\n if (!this.state.frameRendering.enabled || !this.state.frameRendering.name) {\n return null;\n }\n\n const isDarkTheme = this.state.theme === _constants__WEBPACK_IMPORTED_MODULE_12__.THEME.DARK;\n let frameIndex = 0;\n let magicFrameIndex = 0;\n return this.scene.getNonDeletedFramesLikes().map(f => {\n var _a, _b;\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameElement)(f)) {\n frameIndex++;\n } else {\n magicFrameIndex++;\n }\n\n if (!(0,_element_sizeHelpers__WEBPACK_IMPORTED_MODULE_27__.isElementInViewport)(f, this.canvas.width / window.devicePixelRatio, this.canvas.height / window.devicePixelRatio, {\n offsetLeft: this.state.offsetLeft,\n offsetTop: this.state.offsetTop,\n scrollX: this.state.scrollX,\n scrollY: this.state.scrollY,\n zoom: this.state.zoom\n }, this.scene.getNonDeletedElementsMap())) {\n // if frame not visible, don't render its name\n return null;\n }\n\n const {\n x: x1,\n y: y1\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.sceneCoordsToViewportCoords)({\n sceneX: f.x,\n sceneY: f.y\n }, this.state);\n const FRAME_NAME_EDIT_PADDING = 6;\n\n const reset = () => {\n var _a;\n\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(f, {\n name: ((_a = f.name) === null || _a === void 0 ? void 0 : _a.trim()) || null\n });\n this.setState({\n editingFrame: null\n });\n };\n\n let frameNameJSX;\n const frameName = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getFrameLikeTitle)(f, (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameElement)(f) ? frameIndex : magicFrameIndex);\n\n if (f.id === this.state.editingFrame) {\n const frameNameInEdit = frameName;\n frameNameJSX = (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"input\", {\n autoFocus: true,\n value: frameNameInEdit,\n onChange: e => {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(f, {\n name: e.target.value\n });\n },\n onFocus: e => e.target.select(),\n onBlur: () => reset(),\n onKeyDown: event => {\n // for some inexplicable reason, `onBlur` triggered on ESC\n // does not reset `state.editingFrame` despite being called,\n // and we need to reset it here as well\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ESCAPE || event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ENTER) {\n reset();\n }\n },\n style: {\n background: this.state.viewBackgroundColor,\n filter: isDarkTheme ? _constants__WEBPACK_IMPORTED_MODULE_12__.THEME_FILTER : \"none\",\n zIndex: 2,\n border: \"none\",\n display: \"block\",\n padding: `${FRAME_NAME_EDIT_PADDING}px`,\n borderRadius: 4,\n boxShadow: \"inset 0 0 0 2px var(--color-on-primary-container)\",\n fontFamily: \"Assistant\",\n fontSize: \"14px\",\n transform: `translate(-${FRAME_NAME_EDIT_PADDING}px, ${FRAME_NAME_EDIT_PADDING}px)`,\n color: \"var(--color-gray-80)\",\n overflow: \"hidden\",\n maxWidth: `${(0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_86__.getExcalidrawContentEl)().clientWidth - x1 - FRAME_NAME_EDIT_PADDING //zsviczian was document.body\n }px`\n },\n size: frameNameInEdit.length + 1 || 1,\n dir: \"auto\",\n autoComplete: \"off\",\n autoCapitalize: \"off\",\n autoCorrect: \"off\"\n });\n } else {\n frameNameJSX = frameName;\n }\n\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n id: this.getFrameNameDOMId(f),\n style: {\n position: \"absolute\",\n // Positioning from bottom so that we don't to either\n // calculate text height or adjust using transform (which)\n // messes up input position when editing the frame name.\n // This makes the positioning deterministic and we can calculate\n // the same position when rendering to canvas / svg.\n bottom: `${this.state.height + _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.nameOffsetY - y1 + this.state.offsetTop}px`,\n left: `${x1 - this.state.offsetLeft}px`,\n zIndex: 2,\n fontSize: _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.nameFontSize,\n color: (_b = (_a = this.state.frameColor) === null || _a === void 0 ? void 0 : _a.nameColor) !== null && _b !== void 0 ? _b : isDarkTheme //zsviczian\n ? _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.nameColorDarkTheme : _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.nameColorLightTheme,\n lineHeight: _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.nameLineHeight,\n width: \"max-content\",\n maxWidth: `${f.width}px`,\n overflow: f.id === this.state.editingFrame ? \"visible\" : \"hidden\",\n whiteSpace: \"nowrap\",\n textOverflow: \"ellipsis\",\n cursor: _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.MOVE,\n pointerEvents: this.state.viewModeEnabled ? _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.disabled : _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.enabled\n },\n onPointerDown: event => this.handleCanvasPointerDown(event),\n onWheel: event => this.handleWheel(event),\n onContextMenu: this.handleCanvasContextMenu,\n onDoubleClick: () => {\n this.setState({\n editingFrame: f.id\n });\n }\n }, {\n children: frameNameJSX\n }), f.id);\n });\n };\n\n this.focusContainer = () => {\n var _a;\n\n (_a = this.excalidrawContainerRef.current) === null || _a === void 0 ? void 0 : _a.focus();\n };\n\n this.getSceneElementsIncludingDeleted = () => {\n return this.scene.getElementsIncludingDeleted();\n };\n\n this.getSceneElements = () => {\n return this.scene.getNonDeletedElements();\n };\n\n this.onInsertElements = elements => {\n this.addElementsFromPasteOrLibrary({\n elements,\n position: \"center\",\n files: null\n });\n };\n\n this.onExportImage = async (type, elements, opts) => {\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"export\", type, \"ui\");\n const fileHandle = await (0,_data__WEBPACK_IMPORTED_MODULE_13__.exportCanvas)(type, elements, this.state, this.files, {\n exportBackground: this.state.exportBackground,\n name: this.getName(),\n viewBackgroundColor: this.state.viewBackgroundColor,\n exportingFrame: opts.exportingFrame\n }).catch(_utils__WEBPACK_IMPORTED_MODULE_35__.muteFSAbortError).catch(error => {\n console.error(error);\n this.setState({\n errorMessage: error.message\n });\n });\n\n if (this.state.exportEmbedScene && fileHandle && (0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.isImageFileHandle)(fileHandle)) {\n this.setState({\n fileHandle\n });\n }\n };\n\n this.magicGenerations = new Map();\n\n this.updateMagicGeneration = ({\n frameElement,\n data\n }) => {\n if (data.status === \"pending\") {\n // We don't wanna persist pending state to storage. It should be in-app\n // state only.\n // Thus reset so that we prefer local cache (if there was some\n // generationData set previously)\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(frameElement, {\n customData: {\n generationData: undefined\n }\n }, false);\n } else {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(frameElement, {\n customData: {\n generationData: data\n }\n }, false);\n }\n\n this.magicGenerations.set(frameElement.id, data);\n this.triggerRender();\n };\n\n this.OPENAI_KEY_IS_PERSISTED = _data_EditorLocalStorage__WEBPACK_IMPORTED_MODULE_77__.EditorLocalStorage.has(_constants__WEBPACK_IMPORTED_MODULE_12__.EDITOR_LS_KEYS.OAI_API_KEY) || false;\n\n this.onOpenAIKeyChange = (openAIKey, shouldPersist) => {\n this.OPENAI_KEY = openAIKey || null;\n\n if (shouldPersist) {\n const didPersist = _data_EditorLocalStorage__WEBPACK_IMPORTED_MODULE_77__.EditorLocalStorage.set(_constants__WEBPACK_IMPORTED_MODULE_12__.EDITOR_LS_KEYS.OAI_API_KEY, openAIKey);\n this.OPENAI_KEY_IS_PERSISTED = didPersist;\n } else {\n this.OPENAI_KEY_IS_PERSISTED = false;\n }\n };\n\n this.onMagicSettingsConfirm = (apiKey, shouldPersist, source) => {\n this.OPENAI_KEY = apiKey || null;\n this.onOpenAIKeyChange(this.OPENAI_KEY, shouldPersist);\n\n if (source === \"settings\") {\n return;\n }\n\n const selectedElements = this.scene.getSelectedElements({\n selectedElementIds: this.state.selectedElementIds\n });\n\n if (apiKey) {\n if (selectedElements.length) {\n this.onMagicframeToolSelect();\n } else {\n this.setActiveTool({\n type: \"magicframe\"\n });\n }\n } else if (!(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isMagicFrameElement)(selectedElements[0])) {\n // even if user didn't end up setting api key, let's pick the tool\n // so they can draw up a frame and move forward\n this.setActiveTool({\n type: \"magicframe\"\n });\n }\n };\n\n this.onMagicframeToolSelect = () => {\n if (!this.OPENAI_KEY) {\n this.setToast({\n message: \"You must first configure your OpenAI API key in plugin settings\",\n duration: 5000\n });\n return;\n }\n\n const selectedElements = this.scene.getSelectedElements({\n selectedElementIds: this.state.selectedElementIds\n });\n\n if (selectedElements.length === 0) {\n this.setActiveTool({\n type: _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.magicframe\n });\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"tool-select (empty-selection)\", \"d2c\");\n } else {\n const selectedMagicFrame = selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isMagicFrameElement)(selectedElements[0]) && selectedElements[0]; // case: user selected elements containing frame-like(s) or are frame\n // members, we don't want to wrap into another magicframe\n // (unless the only selected element is a magic frame which we reuse)\n\n if (!selectedMagicFrame && selectedElements.some(el => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(el) || el.frameId)) {\n this.setActiveTool({\n type: _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.magicframe\n });\n return;\n }\n\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"tool-select (existing selection)\", \"d2c\");\n let frame;\n\n if (selectedMagicFrame) {\n // a single magicframe already selected -> use it\n frame = selectedMagicFrame;\n } else {\n // selected elements aren't wrapped in magic frame yet -> wrap now\n const [minX, minY, maxX, maxY] = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(selectedElements);\n const padding = 50;\n frame = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newMagicFrameElement)(Object.assign(Object.assign({}, _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE), {\n x: minX - padding,\n y: minY - padding,\n width: maxX - minX + padding * 2,\n height: maxY - minY + padding * 2,\n opacity: 100,\n locked: false\n }));\n this.scene.insertElement(frame);\n\n for (const child of selectedElements) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(child, {\n frameId: frame.id\n });\n }\n\n this.setState({\n selectedElementIds: {\n [frame.id]: true\n }\n });\n }\n\n this.onMagicFrameGenerate(frame, \"upstream\");\n }\n };\n\n this.openEyeDropper = ({\n type\n }) => {\n _jotai__WEBPACK_IMPORTED_MODULE_56__.jotaiStore.set(_EyeDropper__WEBPACK_IMPORTED_MODULE_62__.activeEyeDropperAtom, {\n swapPreviewOnAlt: true,\n colorPickerType: type === \"stroke\" ? \"elementStroke\" : \"elementBackground\",\n onSelect: (color, event) => {\n const shouldUpdateStrokeColor = type === \"background\" && event.altKey || type === \"stroke\" && !event.altKey;\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (!selectedElements.length || this.state.activeTool.type !== \"selection\") {\n if (shouldUpdateStrokeColor) {\n this.syncActionResult({\n appState: Object.assign(Object.assign({}, this.state), {\n currentItemStrokeColor: color\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.CAPTURE\n });\n } else {\n this.syncActionResult({\n appState: Object.assign(Object.assign({}, this.state), {\n currentItemBackgroundColor: color\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.CAPTURE\n });\n }\n } else {\n this.updateScene({\n elements: this.scene.getElementsIncludingDeleted().map(el => {\n if (this.state.selectedElementIds[el.id]) {\n return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(el, {\n [shouldUpdateStrokeColor ? \"strokeColor\" : \"backgroundColor\"]: color\n });\n }\n\n return el;\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.CAPTURE\n });\n }\n },\n keepOpenOnAlt: false\n });\n };\n\n this.syncActionResult = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(actionResult => {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j;\n\n if (this.unmounted || actionResult === false) {\n return;\n }\n\n let editingElement = null;\n\n if (actionResult.elements) {\n actionResult.elements.forEach(element => {\n var _a;\n\n if (((_a = this.state.editingElement) === null || _a === void 0 ? void 0 : _a.id) === element.id && this.state.editingElement !== element && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isNonDeletedElement)(element)) {\n editingElement = element;\n }\n });\n\n if (actionResult.storeAction === _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.UPDATE) {\n this.store.shouldUpdateSnapshot();\n } else if (actionResult.storeAction === _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.CAPTURE) {\n this.store.shouldCaptureIncrement();\n }\n\n this.scene.replaceAllElements(actionResult.elements);\n }\n\n if (actionResult.files) {\n this.files = actionResult.replaceFiles ? actionResult.files : Object.assign(Object.assign({}, this.files), actionResult.files);\n this.addNewImagesToImageCache();\n }\n\n if (actionResult.appState || editingElement || this.state.contextMenu) {\n if (actionResult.storeAction === _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.UPDATE) {\n this.store.shouldUpdateSnapshot();\n } else if (actionResult.storeAction === _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.CAPTURE) {\n this.store.shouldCaptureIncrement();\n }\n\n let viewModeEnabled = ((_a = actionResult === null || actionResult === void 0 ? void 0 : actionResult.appState) === null || _a === void 0 ? void 0 : _a.viewModeEnabled) || false;\n let zenModeEnabled = ((_b = actionResult === null || actionResult === void 0 ? void 0 : actionResult.appState) === null || _b === void 0 ? void 0 : _b.zenModeEnabled) || false;\n let gridSize = ((_c = actionResult === null || actionResult === void 0 ? void 0 : actionResult.appState) === null || _c === void 0 ? void 0 : _c.gridSize) || null;\n const theme = ((_d = actionResult === null || actionResult === void 0 ? void 0 : actionResult.appState) === null || _d === void 0 ? void 0 : _d.theme) || this.props.theme || _constants__WEBPACK_IMPORTED_MODULE_12__.THEME.LIGHT;\n const name = (_f = (_e = actionResult === null || actionResult === void 0 ? void 0 : actionResult.appState) === null || _e === void 0 ? void 0 : _e.name) !== null && _f !== void 0 ? _f : this.state.name;\n const errorMessage = (_h = (_g = actionResult === null || actionResult === void 0 ? void 0 : actionResult.appState) === null || _g === void 0 ? void 0 : _g.errorMessage) !== null && _h !== void 0 ? _h : this.state.errorMessage;\n\n if (typeof this.props.viewModeEnabled !== \"undefined\") {\n viewModeEnabled = this.props.viewModeEnabled;\n }\n\n if (typeof this.props.zenModeEnabled !== \"undefined\") {\n zenModeEnabled = this.props.zenModeEnabled;\n }\n\n if (typeof this.props.gridModeEnabled !== \"undefined\") {\n gridSize = this.props.gridModeEnabled ? _constants__WEBPACK_IMPORTED_MODULE_12__.GRID_SIZE : null;\n }\n\n editingElement = editingElement || ((_j = actionResult.appState) === null || _j === void 0 ? void 0 : _j.editingElement) || null;\n\n if (editingElement === null || editingElement === void 0 ? void 0 : editingElement.isDeleted) {\n editingElement = null;\n }\n\n this.setState(state => {\n // using Object.assign instead of spread to fool TS 4.2.2+ into\n // regarding the resulting type as not containing undefined\n // (which the following expression will never contain)\n return Object.assign(actionResult.appState || {}, {\n // NOTE this will prevent opening context menu using an action\n // or programmatically from the host, so it will need to be\n // rewritten later\n contextMenu: null,\n editingElement,\n viewModeEnabled,\n zenModeEnabled,\n gridSize,\n theme,\n name,\n errorMessage\n });\n });\n }\n }); // Lifecycle\n\n this.onBlur = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(() => {\n isHoldingSpace = false;\n this.setState({\n isBindingEnabled: true\n });\n });\n\n this.onUnload = () => {\n this.onBlur();\n };\n\n this.disableEvent = event => {\n event.preventDefault();\n };\n\n this.resetHistory = () => {\n this.history.clear();\n };\n\n this.resetStore = () => {\n this.store.clear();\n };\n /**\r\n * Resets scene & history.\r\n * ! Do not use to clear scene user action !\r\n */\n\n\n this.resetScene = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(opts => {\n this.scene.replaceAllElements([]);\n this.setState(state => Object.assign(Object.assign({}, (0,_appState__WEBPACK_IMPORTED_MODULE_10__.getDefaultAppState)()), {\n isLoading: (opts === null || opts === void 0 ? void 0 : opts.resetLoadingState) ? false : state.isLoading,\n theme: this.state.theme\n }));\n this.resetStore();\n this.resetHistory();\n });\n\n this.initializeScene = async () => {\n var _a;\n\n if (\"launchQueue\" in window && \"LaunchParams\" in window) {\n window.launchQueue.setConsumer(async launchParams => {\n if (!launchParams.files.length) {\n return;\n }\n\n const fileHandle = launchParams.files[0];\n const blob = await fileHandle.getFile();\n this.loadFileToCanvas(new File([blob], blob.name || \"\", {\n type: blob.type\n }), fileHandle);\n });\n }\n\n if (this.props.theme) {\n this.setState({\n theme: this.props.theme\n });\n }\n\n if (!this.state.isLoading) {\n this.setState({\n isLoading: true\n });\n }\n\n let initialData = null;\n\n try {\n initialData = (await this.props.initialData) || null;\n\n if (initialData === null || initialData === void 0 ? void 0 : initialData.libraryItems) {\n this.library.updateLibrary({\n libraryItems: initialData.libraryItems,\n merge: true\n }).catch(error => {\n console.error(error);\n });\n }\n } catch (error) {\n console.error(error);\n initialData = {\n appState: {\n errorMessage: error.message || \"Encountered an error during importing or restoring scene data\"\n }\n };\n }\n\n const scene = (0,_data_restore__WEBPACK_IMPORTED_MODULE_15__.restore)(initialData, null, null, {\n repairBindings: true\n });\n scene.appState = Object.assign(Object.assign({}, scene.appState), {\n theme: this.props.theme || scene.appState.theme,\n // we're falling back to current (pre-init) state when deciding\n // whether to open the library, to handle a case where we\n // update the state outside of initialData (e.g. when loading the app\n // with a library install link, which should auto-open the library)\n openSidebar: ((_a = scene.appState) === null || _a === void 0 ? void 0 : _a.openSidebar) || this.state.openSidebar,\n activeTool: scene.appState.activeTool.type === \"image\" ? Object.assign(Object.assign({}, scene.appState.activeTool), {\n type: \"selection\"\n }) : scene.appState.activeTool,\n isLoading: false,\n toast: this.state.toast\n });\n\n if (initialData === null || initialData === void 0 ? void 0 : initialData.scrollToContent) {\n scene.appState = Object.assign(Object.assign({}, scene.appState), (0,_scene__WEBPACK_IMPORTED_MODULE_29__.calculateScrollCenter)(scene.elements, Object.assign(Object.assign({}, scene.appState), {\n width: this.state.width,\n height: this.state.height,\n offsetTop: this.state.offsetTop,\n offsetLeft: this.state.offsetLeft\n })));\n } // FontFaceSet loadingdone event we listen on may not always fire\n // (looking at you Safari), so on init we manually load fonts for current\n // text elements on canvas, and rerender them once done. This also\n // seems faster even in browsers that do fire the loadingdone event.\n\n\n this.fonts.loadFontsForElements(scene.elements);\n this.resetStore();\n this.resetHistory();\n this.syncActionResult(Object.assign(Object.assign({}, scene), {\n storeAction: _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.UPDATE\n }));\n };\n\n this.isMobileBreakpoint = (width, height) => {\n return width !== 0 && //zsviczian changing tabs in Obsidian causes MobileMenu to be rendered\n this.allowMobileMode && ( //zsviczian\n width < _constants__WEBPACK_IMPORTED_MODULE_12__.MQ_MAX_WIDTH_PORTRAIT || height < _constants__WEBPACK_IMPORTED_MODULE_12__.MQ_MAX_HEIGHT_LANDSCAPE && width < _constants__WEBPACK_IMPORTED_MODULE_12__.MQ_MAX_WIDTH_LANDSCAPE);\n };\n\n this.refreshViewportBreakpoints = () => {\n const container = this.excalidrawContainerRef.current;\n\n if (!container) {\n return;\n }\n\n const {\n clientWidth: viewportWidth,\n clientHeight: viewportHeight\n } = (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_86__.getExcalidrawContentEl)(); //zsviczian was document.body;\n\n const prevViewportState = this.device.viewport;\n const nextViewportState = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateObject)(prevViewportState, {\n isLandscape: viewportWidth > viewportHeight,\n isMobile: this.isMobileBreakpoint(viewportWidth, viewportHeight)\n });\n\n if (prevViewportState !== nextViewportState) {\n this.device = Object.assign(Object.assign({}, this.device), {\n viewport: nextViewportState\n });\n return true;\n }\n\n return false;\n };\n\n this.refreshEditorBreakpoints = () => {\n const container = this.excalidrawContainerRef.current;\n\n if (!container) {\n return;\n }\n\n const {\n width: editorWidth,\n height: editorHeight\n } = container.getBoundingClientRect();\n const sidebarBreakpoint = this.props.UIOptions.dockedSidebarBreakpoint != null ? this.props.UIOptions.dockedSidebarBreakpoint : _constants__WEBPACK_IMPORTED_MODULE_12__.MQ_RIGHT_SIDEBAR_MIN_WIDTH;\n const prevEditorState = this.device.editor;\n const nextEditorState = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateObject)(prevEditorState, {\n isMobile: this.isMobileBreakpoint(editorWidth, editorHeight),\n canFitSidebar: editorWidth > sidebarBreakpoint\n });\n\n if (prevEditorState !== nextEditorState) {\n this.device = Object.assign(Object.assign({}, this.device), {\n editor: nextEditorState\n });\n return true;\n }\n\n return false;\n };\n\n this.onResize = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(() => {\n this.scene.getElementsIncludingDeleted().forEach(element => _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_67__.ShapeCache[\"delete\"](element));\n this.refreshViewportBreakpoints();\n this.updateDOMRect();\n\n if (!_constants__WEBPACK_IMPORTED_MODULE_12__.supportsResizeObserver) {\n this.refreshEditorBreakpoints();\n }\n\n this.setState({});\n });\n /** generally invoked only if fullscreen was invoked programmatically */\n\n this.onFullscreenChange = () => {\n var _a;\n\n if ( // points to the iframe element we fullscreened\n !document.fullscreenElement && ((_a = this.state.activeEmbeddable) === null || _a === void 0 ? void 0 : _a.state) === \"active\") {\n this.setState({\n activeEmbeddable: null\n });\n }\n };\n\n this.renderInteractiveSceneCallback = ({\n atLeastOneVisibleElement,\n scrollBars,\n elementsMap\n }) => {\n if (!document.querySelector(\".excalidraw\")) {\n return;\n } //zsviczian - address issue when moving excalidraw to a new window/document\n\n\n if (scrollBars) {\n currentScrollBars = scrollBars;\n }\n\n const scrolledOutside = // hide when editing text\n (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(this.state.editingElement) ? false : !atLeastOneVisibleElement && elementsMap.size > 0;\n\n if (this.state.scrolledOutside !== scrolledOutside) {\n this.setState({\n scrolledOutside\n });\n }\n\n this.scheduleImageRefresh();\n };\n\n this.onScroll = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.debounce)(() => {\n const {\n offsetTop,\n offsetLeft\n } = this.getCanvasOffsets();\n this.setState(state => {\n if (state.offsetLeft === offsetLeft && state.offsetTop === offsetTop) {\n return null;\n }\n\n return {\n offsetTop,\n offsetLeft\n };\n });\n }, _constants__WEBPACK_IMPORTED_MODULE_12__.SCROLL_TIMEOUT); // Copy/paste\n\n this.onCut = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(event => {\n var _a;\n\n const isExcalidrawActive = (_a = this.excalidrawContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement);\n\n if (!isExcalidrawActive || (0,_utils__WEBPACK_IMPORTED_MODULE_35__.isWritableElement)(event.target)) {\n return;\n }\n\n this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionCut, \"keyboard\", event);\n event.preventDefault();\n event.stopPropagation();\n });\n this.onCopy = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(event => {\n var _a;\n\n const isExcalidrawActive = (_a = this.excalidrawContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement);\n\n if (!isExcalidrawActive || (0,_utils__WEBPACK_IMPORTED_MODULE_35__.isWritableElement)(event.target)) {\n return;\n }\n\n this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionCopy, \"keyboard\", event);\n event.preventDefault();\n event.stopPropagation();\n });\n\n this.onTouchStart = event => {\n // fix for Apple Pencil Scribble (do not prevent for other devices)\n if (_constants__WEBPACK_IMPORTED_MODULE_12__.isIOS) {\n event.preventDefault();\n }\n\n if (!didTapTwice) {\n didTapTwice = true;\n clearTimeout(tappedTwiceTimer);\n tappedTwiceTimer = window.setTimeout(App.resetTapTwice, _constants__WEBPACK_IMPORTED_MODULE_12__.TAP_TWICE_TIMEOUT);\n return;\n } // insert text only if we tapped twice with a single finger\n // event.touches.length === 1 will also prevent inserting text when user's zooming\n\n\n if (didTapTwice && event.touches.length === 1) {\n const touch = event.touches[0]; // @ts-ignore\n\n this.handleCanvasDoubleClick({\n clientX: touch.clientX,\n clientY: touch.clientY\n });\n didTapTwice = false;\n clearTimeout(tappedTwiceTimer);\n }\n\n if (event.touches.length === 2) {\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, this.state),\n activeEmbeddable: null\n });\n }\n };\n\n this.onTouchEnd = event => {\n this.resetContextMenuTimer();\n\n if (event.touches.length > 0) {\n this.setState({\n previousSelectedElementIds: {},\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(this.state.previousSelectedElementIds, this.state)\n });\n } else {\n gesture.pointers.clear();\n }\n };\n\n this.pasteFromClipboard = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(async event => {\n var _a, _b;\n\n const isPlainPaste = !!IS_PLAIN_PASTE; // #686\n\n const target = document.activeElement;\n const isExcalidrawActive = (_a = this.excalidrawContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(target);\n\n if (event && !isExcalidrawActive) {\n return;\n }\n\n const elementUnderCursor = document.elementFromPoint(this.lastViewportPosition.x, this.lastViewportPosition.y);\n\n if (event && (!(elementUnderCursor instanceof HTMLCanvasElement) || (0,_utils__WEBPACK_IMPORTED_MODULE_35__.isWritableElement)(target))) {\n return;\n }\n\n const {\n x: sceneX,\n y: sceneY\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)({\n clientX: this.lastViewportPosition.x,\n clientY: this.lastViewportPosition.y\n }, this.state); // must be called in the same frame (thus before any awaits) as the paste\n // event else some browsers (FF...) will clear the clipboardData\n // (something something security)\n\n let file = (_b = event === null || event === void 0 ? void 0 : event.clipboardData) === null || _b === void 0 ? void 0 : _b.files[0];\n const data = await (0,_clipboard__WEBPACK_IMPORTED_MODULE_11__.parseClipboard)(event, isPlainPaste);\n\n if (!file && !isPlainPaste) {\n if (data.mixedContent) {\n return this.addElementsFromMixedContentPaste(data.mixedContent, {\n isPlainPaste,\n sceneX,\n sceneY\n });\n } else if (data.text) {\n const string = data.text.trim();\n\n if (string.startsWith(\"<svg\") && string.endsWith(\"</svg>\")) {\n // ignore SVG validation/normalization which will be done during image\n // initialization\n file = (0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.SVGStringToFile)(string);\n }\n }\n } // prefer spreadsheet data over image file (MS Office/Libre Office)\n\n\n if ((0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.isSupportedImageFile)(file) && !data.spreadsheet) {\n if (!this.isToolSupported(\"image\")) {\n this.setState({\n errorMessage: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageToolNotSupported\")\n });\n return;\n }\n\n const imageElement = this.createImageElement({\n sceneX,\n sceneY\n });\n this.insertImageElement(imageElement, file);\n this.initializeImageDimensions(imageElement);\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({\n [imageElement.id]: true\n }, this.state)\n });\n return;\n }\n\n if (this.props.onPaste) {\n try {\n if ((await this.props.onPaste(data, event)) === false) {\n return;\n }\n } catch (error) {\n console.error(error);\n }\n }\n\n if (data.errorMessage) {\n this.setState({\n errorMessage: data.errorMessage\n });\n } else if (data.spreadsheet && !isPlainPaste) {\n this.setState({\n pasteDialog: {\n data: data.spreadsheet,\n shown: true\n }\n });\n } else if (data.elements) {\n const elements = data.programmaticAPI ? (0,_data_transform__WEBPACK_IMPORTED_MODULE_63__.convertToExcalidrawElements)(data.elements) : data.elements; // TODO remove formatting from elements if isPlainPaste\n\n this.addElementsFromPasteOrLibrary({\n elements,\n files: data.files || null,\n position: \"cursor\",\n retainSeed: isPlainPaste\n });\n } else if (data.text) {\n const nonEmptyLines = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.normalizeEOL)(data.text).split(/\\n+/).map(s => s.trim()).filter(Boolean);\n const embbeddableUrls = nonEmptyLines.map(str => (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_36__.maybeParseEmbedSrc)(str)).filter(string => {\n var _a;\n\n return (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_36__.embeddableURLValidator)(string, this.props.validateEmbeddable) && (/^(http|https):\\/\\/[^\\s/$.?#].[^\\s]*$/.test(string) || ((_a = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_36__.getEmbedLink)(string)) === null || _a === void 0 ? void 0 : _a.type) === \"video\");\n });\n\n if (!IS_PLAIN_PASTE && embbeddableUrls.length > 0 && // if there were non-embeddable text (lines) mixed in with embeddable\n // urls, ignore and paste as text\n embbeddableUrls.length === nonEmptyLines.length) {\n const embeddables = [];\n\n for (const url of embbeddableUrls) {\n const prevEmbeddable = embeddables[embeddables.length - 1];\n const embeddable = this.insertEmbeddableElement({\n sceneX: prevEmbeddable ? prevEmbeddable.x + prevEmbeddable.width + 20 : sceneX,\n sceneY,\n link: (0,_data_url__WEBPACK_IMPORTED_MODULE_47__.normalizeLink)(url)\n });\n\n if (embeddable) {\n embeddables.push(embeddable);\n }\n }\n\n if (embeddables.length) {\n this.setState({\n selectedElementIds: Object.fromEntries(embeddables.map(embeddable => [embeddable.id, true]))\n });\n }\n\n return;\n }\n\n this.addTextFromPaste(data.text, isPlainPaste);\n }\n\n this.setActiveTool({\n type: \"selection\"\n });\n event === null || event === void 0 ? void 0 : event.preventDefault();\n });\n\n this.addElementsFromPasteOrLibrary = opts => {\n const elements = (0,_data_restore__WEBPACK_IMPORTED_MODULE_15__.restoreElements)(opts.elements, null, undefined);\n const [minX, minY, maxX, maxY] = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(elements);\n const elementsCenterX = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.distance)(minX, maxX) / 2;\n const elementsCenterY = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.distance)(minY, maxY) / 2;\n const clientX = typeof opts.position === \"object\" ? opts.position.clientX : opts.position === \"cursor\" ? this.lastViewportPosition.x : this.state.width / 2 + this.state.offsetLeft;\n const clientY = typeof opts.position === \"object\" ? opts.position.clientY : opts.position === \"cursor\" ? this.lastViewportPosition.y : this.state.height / 2 + this.state.offsetTop;\n const {\n x,\n y\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)({\n clientX,\n clientY\n }, this.state);\n const dx = x - elementsCenterX;\n const dy = y - elementsCenterY;\n const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(dx, dy, this.state.gridSize);\n const newElements = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.duplicateElements)(elements.map(element => {\n return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(element, {\n x: element.x + gridX - minX,\n y: element.y + gridY - minY\n });\n }), {\n randomizeSeed: !opts.retainSeed\n });\n const prevElements = this.scene.getElementsIncludingDeleted();\n const nextElements = [...prevElements, ...newElements];\n (0,_fractionalIndex__WEBPACK_IMPORTED_MODULE_90__.syncMovedIndices)(nextElements, (0,_utils__WEBPACK_IMPORTED_MODULE_35__.arrayToMap)(newElements));\n const topLayerFrame = this.getTopLayerFrameAtSceneCoords({\n x,\n y\n });\n\n if (topLayerFrame) {\n const eligibleElements = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.filterElementsEligibleAsFrameChildren)(newElements, topLayerFrame);\n (0,_frame__WEBPACK_IMPORTED_MODULE_51__.addElementsToFrame)(nextElements, eligibleElements, topLayerFrame);\n }\n\n this.scene.replaceAllElements(nextElements);\n newElements.forEach(newElement => {\n if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(newElement) && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(newElement)) {\n const container = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.getContainerElement)(newElement, this.scene.getElementsMapIncludingDeleted());\n (0,_element__WEBPACK_IMPORTED_MODULE_16__.redrawTextBoundingBox)(newElement, container, this.scene.getElementsMapIncludingDeleted());\n }\n });\n\n if (opts.files) {\n this.files = Object.assign(Object.assign({}, this.files), opts.files);\n }\n\n this.store.shouldCaptureIncrement();\n const nextElementsToSelect = (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.excludeElementsInFramesFromSelection)(newElements);\n this.setState(Object.assign(Object.assign(Object.assign({}, this.state), {\n // keep sidebar (presumably the library) open if it's docked and\n // can fit.\n //\n // Note, we should close the sidebar only if we're dropping items\n // from library, not when pasting from clipboard. Alas.\n openSidebar: this.state.openSidebar && this.device.editor.canFitSidebar && _jotai__WEBPACK_IMPORTED_MODULE_56__.jotaiStore.get(_Sidebar_Sidebar__WEBPACK_IMPORTED_MODULE_64__.isSidebarDockedAtom) ? this.state.openSidebar : null\n }), (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n editingGroupId: null,\n selectedElementIds: nextElementsToSelect.reduce((acc, element) => {\n if (!(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(element)) {\n acc[element.id] = true;\n }\n\n return acc;\n }, {})\n }, this.scene.getNonDeletedElements(), this.state, this)), () => {\n if (opts.files) {\n this.addNewImagesToImageCache();\n }\n });\n this.setActiveTool({\n type: \"selection\"\n });\n\n if (opts.fitToContent) {\n this.scrollToContent(newElements, {\n fitToContent: true\n });\n }\n };\n\n this.setAppState = (state, callback) => {\n this.setState(state, callback);\n };\n\n this.removePointer = event => {\n if (touchTimeout) {\n this.resetContextMenuTimer();\n }\n\n gesture.pointers.delete(event.pointerId);\n };\n\n this.toggleLock = (source = \"ui\") => {\n if (!this.state.activeTool.locked) {\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"toolbar\", \"toggleLock\", `${source} (${this.device.editor.isMobile ? \"mobile\" : \"desktop\"})`);\n }\n\n this.setState(prevState => {\n return {\n activeTool: Object.assign(Object.assign(Object.assign({}, prevState.activeTool), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateActiveTool)(this.state, prevState.activeTool.locked ? {\n type: \"selection\"\n } : prevState.activeTool)), {\n locked: !prevState.activeTool.locked\n })\n };\n });\n };\n\n this.updateFrameRendering = opts => {\n this.setState(prevState => {\n var _a, _b, _c, _d;\n\n const next = typeof opts === \"function\" ? opts(prevState.frameRendering) : opts;\n return {\n frameRendering: {\n enabled: (_a = next === null || next === void 0 ? void 0 : next.enabled) !== null && _a !== void 0 ? _a : prevState.frameRendering.enabled,\n clip: (_b = next === null || next === void 0 ? void 0 : next.clip) !== null && _b !== void 0 ? _b : prevState.frameRendering.clip,\n name: (_c = next === null || next === void 0 ? void 0 : next.name) !== null && _c !== void 0 ? _c : prevState.frameRendering.name,\n outline: (_d = next === null || next === void 0 ? void 0 : next.outline) !== null && _d !== void 0 ? _d : prevState.frameRendering.outline\n }\n };\n });\n };\n\n this.togglePenMode = force => {\n this.setState(prevState => {\n return {\n penMode: force !== null && force !== void 0 ? force : !prevState.penMode,\n penDetected: true\n };\n });\n };\n\n this.onHandToolToggle = () => {\n //zsviczian added timeout because button won't select otherwise\n setTimeout(() => this.actionManager.executeAction(_actions_actionCanvas__WEBPACK_IMPORTED_MODULE_55__.actionToggleHandTool));\n };\n /**\r\n * Zooms on canvas viewport center\r\n */\n\n\n this.zoomCanvas = (\n /** decimal fraction between 0.1 (10% zoom) and 30 (3000% zoom) */\n value) => {\n this.setState(Object.assign({}, (0,_scene_zoom__WEBPACK_IMPORTED_MODULE_31__.getStateForZoom)({\n viewportX: this.state.width / 2 + this.state.offsetLeft,\n viewportY: this.state.height / 2 + this.state.offsetTop,\n nextZoom: (0,_scene__WEBPACK_IMPORTED_MODULE_29__.getNormalizedZoom)(value)\n }, this.state)));\n };\n\n this.cancelInProgressAnimation = null;\n\n this.scrollToContent = (target = this.scene.getNonDeletedElements(), opts) => {\n var _a, _b;\n\n (_a = this.cancelInProgressAnimation) === null || _a === void 0 ? void 0 : _a.call(this); // convert provided target into ExcalidrawElement[] if necessary\n\n const targetElements = Array.isArray(target) ? target : [target];\n let zoom = this.state.zoom;\n let scrollX = this.state.scrollX;\n let scrollY = this.state.scrollY;\n\n if ((opts === null || opts === void 0 ? void 0 : opts.fitToContent) || (opts === null || opts === void 0 ? void 0 : opts.fitToViewport)) {\n const {\n appState\n } = (0,_actions_actionCanvas__WEBPACK_IMPORTED_MODULE_55__.zoomToFit)({\n targetElements,\n appState: this.state,\n fitToViewport: !!(opts === null || opts === void 0 ? void 0 : opts.fitToViewport),\n viewportZoomFactor: opts === null || opts === void 0 ? void 0 : opts.viewportZoomFactor\n });\n zoom = appState.zoom;\n scrollX = appState.scrollX;\n scrollY = appState.scrollY;\n } else {\n // compute only the viewport location, without any zoom adjustment\n const scroll = (0,_scene__WEBPACK_IMPORTED_MODULE_29__.calculateScrollCenter)(targetElements, this.state);\n scrollX = scroll.scrollX;\n scrollY = scroll.scrollY;\n } // when animating, we use RequestAnimationFrame to prevent the animation\n // from slowing down other processes\n\n\n if (opts === null || opts === void 0 ? void 0 : opts.animate) {\n const origScrollX = this.state.scrollX;\n const origScrollY = this.state.scrollY;\n const origZoom = this.state.zoom.value;\n const cancel = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.easeToValuesRAF)({\n fromValues: {\n scrollX: origScrollX,\n scrollY: origScrollY,\n zoom: origZoom\n },\n toValues: {\n scrollX,\n scrollY,\n zoom: zoom.value\n },\n interpolateValue: (from, to, progress, key) => {\n // for zoom, use different easing\n if (key === \"zoom\") {\n return from * Math.pow(to / from, (0,_utils__WEBPACK_IMPORTED_MODULE_35__.easeOut)(progress));\n } // handle using default\n\n\n return undefined;\n },\n onStep: ({\n scrollX,\n scrollY,\n zoom\n }) => {\n this.setState({\n scrollX,\n scrollY,\n zoom: {\n value: zoom\n }\n });\n },\n onStart: () => {\n this.setState({\n shouldCacheIgnoreZoom: true\n });\n },\n onEnd: () => {\n this.setState({\n shouldCacheIgnoreZoom: false\n });\n },\n onCancel: () => {\n this.setState({\n shouldCacheIgnoreZoom: false\n });\n },\n duration: (_b = opts === null || opts === void 0 ? void 0 : opts.duration) !== null && _b !== void 0 ? _b : 500\n });\n\n this.cancelInProgressAnimation = () => {\n cancel();\n this.cancelInProgressAnimation = null;\n };\n } else {\n this.setState({\n scrollX,\n scrollY,\n zoom\n });\n }\n };\n\n this.maybeUnfollowRemoteUser = () => {\n if (this.state.userToFollow) {\n this.setState({\n userToFollow: null\n });\n }\n };\n /** use when changing scrollX/scrollY/zoom based on user interaction */\n\n\n this.translateCanvas = state => {\n var _a;\n\n (_a = this.cancelInProgressAnimation) === null || _a === void 0 ? void 0 : _a.call(this);\n this.maybeUnfollowRemoteUser();\n this.setState(state);\n }; //zsviczian\n\n\n this.zoomToFit = (target = this.scene.getNonDeletedElements(), maxZoom = 1, //null will zoom to max based on viewport\n margin = 0.03) => {\n if (!target) {\n target = this.scene.getNonDeletedElements();\n }\n\n if (target.length === 0) {\n maxZoom = 1;\n }\n\n this.setState((0,_actions_actionCanvas__WEBPACK_IMPORTED_MODULE_55__.zoomToFitElements)(target, this.state, false, this, maxZoom, margin).appState);\n }; //zsviczian\n\n\n this.startLineEditor = (el, selectedPointsIndices = null) => {\n if (!el || !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(el)) {\n return;\n }\n\n const editingLinearElement = new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(el);\n this.setState({\n selectedLinearElement: editingLinearElement,\n editingLinearElement: Object.assign(Object.assign({}, editingLinearElement), {\n selectedPointsIndices\n })\n });\n }; //zsviczian\n\n\n this.updateContainerSize = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(containers => {\n containers.forEach(el => {\n const [x, y] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.rotate)(el.x + el.width, el.y + el.height, el.x + el.width / 2, el.y + el.height / 2, el.angle);\n (0,_element_resizeElements__WEBPACK_IMPORTED_MODULE_93__.resizeSingleElement)(new Map().set(el.id, el), false, el, this.scene.getElementsMapIncludingDeleted(), \"se\", true, x, y);\n });\n });\n\n this.setToast = toast => {\n this.setState({\n toast\n });\n };\n\n this.restoreFileFromShare = async () => {\n try {\n const webShareTargetCache = await caches.open(\"web-share-target\");\n const response = await webShareTargetCache.match(\"shared-file\");\n\n if (response) {\n const blob = await response.blob();\n const file = new File([blob], blob.name || \"\", {\n type: blob.type\n });\n this.loadFileToCanvas(file, null);\n await webShareTargetCache.delete(\"shared-file\");\n window.history.replaceState(null, _constants__WEBPACK_IMPORTED_MODULE_12__.APP_NAME, window.location.pathname);\n }\n } catch (error) {\n this.setState({\n errorMessage: error.message\n });\n }\n };\n /** adds supplied files to existing files in the appState */\n\n\n this.addFiles = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(files => {\n const filesMap = files.reduce((acc, fileData) => {\n acc.set(fileData.id, fileData);\n return acc;\n }, new Map());\n this.files = Object.assign(Object.assign({}, this.files), Object.fromEntries(filesMap));\n this.scene.getNonDeletedElements().forEach(element => {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isInitializedImageElement)(element) && filesMap.has(element.fileId)) {\n this.imageCache.delete(element.fileId);\n _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_67__.ShapeCache[\"delete\"](element);\n }\n });\n this.scene.triggerUpdate();\n this.addNewImagesToImageCache();\n }); //zsviczian https://github.com/zsviczian/excalibrain/issues/9\n\n this.setMobileModeAllowed = allow => {\n const {\n width: editorWidth,\n height: editorHeight\n } = this.excalidrawContainerRef.current.getBoundingClientRect();\n this.allowMobileMode = allow;\n const prevEditorState = this.device.editor;\n let nextEditorState;\n\n if (allow) {\n nextEditorState = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateObject)(prevEditorState, {\n isMobile: this.isMobileBreakpoint(editorWidth, editorHeight)\n });\n } else {\n nextEditorState = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateObject)(prevEditorState, {\n isMobile: false //must test this\n\n });\n }\n\n if (prevEditorState !== nextEditorState) {\n this.device = Object.assign(Object.assign({}, this.device), {\n editor: nextEditorState\n });\n this.forceUpdate();\n }\n }; //zsviczian\n\n\n this.setLocalFont = showOnPanel => {\n showFourthFont = showOnPanel;\n }; //zsviczian\n\n\n this.selectElements = elements => {\n this.updateScene({\n appState: Object.assign(Object.assign({}, this.state), {\n editingGroupId: null,\n selectedElementIds: elements.reduce((map, element) => {\n map[element.id] = true;\n return map;\n }, {})\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.NONE\n });\n };\n\n this.bringToFront = elements => {\n this.selectElements(elements);\n this.updateScene(_actions__WEBPACK_IMPORTED_MODULE_5__.actionBringToFront.perform(this.scene.getNonDeletedElements(), this.state));\n };\n\n this.bringForward = elements => {\n this.selectElements(elements);\n this.updateScene(_actions__WEBPACK_IMPORTED_MODULE_5__.actionBringForward.perform(this.scene.getNonDeletedElements(), this.state));\n };\n\n this.sendToBack = elements => {\n this.selectElements(elements);\n this.updateScene(_actions__WEBPACK_IMPORTED_MODULE_5__.actionSendToBack.perform(this.scene.getNonDeletedElements(), this.state));\n };\n\n this.sendBackward = elements => {\n this.selectElements(elements);\n this.updateScene(_actions__WEBPACK_IMPORTED_MODULE_5__.actionSendBackward.perform(this.scene.getNonDeletedElements(), this.state));\n };\n\n this.updateScene = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(sceneData => {\n var _a;\n\n const nextElements = (0,_fractionalIndex__WEBPACK_IMPORTED_MODULE_90__.syncInvalidIndices)((_a = sceneData.elements) !== null && _a !== void 0 ? _a : []);\n\n if (sceneData.storeAction && sceneData.storeAction !== _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.NONE) {\n const prevCommittedAppState = this.store.snapshot.appState;\n const prevCommittedElements = this.store.snapshot.elements;\n const nextCommittedAppState = sceneData.appState ? Object.assign({}, prevCommittedAppState, sceneData.appState) // new instance, with partial appstate applied to previously captured one, including hidden prop inside `prevCommittedAppState`\n : prevCommittedAppState;\n const nextCommittedElements = sceneData.elements ? this.store.filterUncomittedElements(this.scene.getElementsMapIncludingDeleted(), // Only used to detect uncomitted local elements\n (0,_utils__WEBPACK_IMPORTED_MODULE_35__.arrayToMap)(nextElements)) : prevCommittedElements; // WARN: store action always performs deep clone of changed elements, for ephemeral remote updates (i.e. remote dragging, resizing, drawing) we might consider doing something smarter\n // do NOT schedule store actions (execute after re-render), as it might cause unexpected concurrency issues if not handled well\n\n if (sceneData.storeAction === _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.CAPTURE) {\n this.store.captureIncrement(nextCommittedElements, nextCommittedAppState);\n } else if (sceneData.storeAction === _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.UPDATE) {\n this.store.updateSnapshot(nextCommittedElements, nextCommittedAppState);\n }\n }\n\n (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.flushSync)(() => {\n if (sceneData.appState) {\n this.setState(sceneData.appState);\n }\n });\n\n if (sceneData.elements) {\n this.scene.replaceAllElements(nextElements);\n }\n\n if (sceneData.collaborators) {\n this.setState({\n collaborators: sceneData.collaborators\n });\n }\n });\n\n this.triggerRender = () => {\n this.setState({});\n };\n /**\r\n * @returns whether the menu was toggled on or off\r\n */\n\n\n this.toggleSidebar = ({\n name,\n tab,\n force\n }) => {\n var _a, _b;\n\n let nextName;\n\n if (force === undefined) {\n nextName = ((_a = this.state.openSidebar) === null || _a === void 0 ? void 0 : _a.name) === name && ((_b = this.state.openSidebar) === null || _b === void 0 ? void 0 : _b.tab) === tab ? null : name;\n } else {\n nextName = force ? name : null;\n }\n\n const nextState = nextName ? {\n name: nextName\n } : null;\n\n if (nextState && tab) {\n nextState.tab = tab;\n }\n\n this.setState({\n openSidebar: nextState\n });\n return !!nextName;\n };\n\n this.updateCurrentCursorPosition = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(event => {\n this.lastViewportPosition.x = event.clientX;\n this.lastViewportPosition.y = event.clientY;\n }); // Input handling\n\n this.onKeyDown = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(event => {\n if (this.state.activeTool.type === \"selection\" && this.state.resizingElement && (event.shiftKey || event.altKey)) {\n event.stopPropagation(); //zsviczian shift fires repeatedly causing slowdown when resizing sticky notes\n\n return;\n } // normalize `event.key` when CapsLock is pressed #2372\n\n\n if (\"Proxy\" in window && (!event.shiftKey && /^[A-Z]$/.test(event.key) || event.shiftKey && /^[a-z]$/.test(event.key))) {\n event = new Proxy(event, {\n get(ev, prop) {\n const value = ev[prop];\n\n if (typeof value === \"function\") {\n // fix for Proxies hijacking `this`\n return value.bind(ev);\n }\n\n return prop === \"key\" ? // CapsLock inverts capitalization based on ShiftKey, so invert\n // it back\n event.shiftKey ? ev.key.toUpperCase() : ev.key.toLowerCase() : value;\n }\n\n });\n }\n\n if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.P && !event.shiftKey && !event.altKey) {\n this.setToast({\n message: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"commandPalette.shortcutHint\", {\n shortcut: (0,_actions_shortcuts__WEBPACK_IMPORTED_MODULE_92__.getShortcutFromShortcutName)(\"commandPalette\")\n })\n });\n event.preventDefault();\n return;\n }\n\n if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && event.key.toLowerCase() === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.V) {\n IS_PLAIN_PASTE = event.shiftKey;\n clearTimeout(IS_PLAIN_PASTE_TIMER); // reset (100ms to be safe that we it runs after the ensuing\n // paste event). Though, technically unnecessary to reset since we\n // (re)set the flag before each paste event.\n\n IS_PLAIN_PASTE_TIMER = window.setTimeout(() => {\n IS_PLAIN_PASTE = false;\n }, 100);\n } // prevent browser zoom in input fields\n\n\n if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && (0,_utils__WEBPACK_IMPORTED_MODULE_35__.isWritableElement)(event.target)) {\n if (event.code === _keys__WEBPACK_IMPORTED_MODULE_26__.CODES.MINUS || event.code === _keys__WEBPACK_IMPORTED_MODULE_26__.CODES.EQUAL) {\n event.preventDefault();\n return;\n }\n } // bail if\n\n\n if ( // inside an input\n (0,_utils__WEBPACK_IMPORTED_MODULE_35__.isWritableElement)(event.target) && // unless pressing escape (finalize action)\n event.key !== _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ESCAPE || // or unless using arrows (to move between buttons)\n (0,_keys__WEBPACK_IMPORTED_MODULE_26__.isArrowKey)(event.key) && (0,_utils__WEBPACK_IMPORTED_MODULE_35__.isInputLike)(event.target)) {\n return;\n }\n\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.QUESTION_MARK) {\n this.setState({\n openDialog: {\n name: \"help\"\n }\n });\n return;\n } else if (event.key.toLowerCase() === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.E && event.shiftKey && event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n event.preventDefault();\n this.setState({\n openDialog: {\n name: \"imageExport\"\n }\n });\n return;\n }\n\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.PAGE_UP || event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.PAGE_DOWN) {\n let offset = (event.shiftKey ? this.state.width : this.state.height) / this.state.zoom.value;\n\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.PAGE_DOWN) {\n offset = -offset;\n }\n\n if (event.shiftKey) {\n this.translateCanvas(state => ({\n scrollX: state.scrollX + offset\n }));\n } else {\n this.translateCanvas(state => ({\n scrollY: state.scrollY + offset\n }));\n }\n }\n\n if (this.actionManager.handleKeyDown(event)) {\n return;\n }\n\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.K && !event.altKey && !event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isLaserPointerActive)(this.state)) {\n this.setActiveTool({\n type: \"selection\"\n });\n } else {\n this.setActiveTool({\n type: \"laser\"\n });\n }\n\n return;\n }\n\n if (this.state.viewModeEnabled) {\n //revert to hand in case a key is pressed (K is handled above)\n if (event.key !== _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.K) {\n this.setActiveTool({\n type: \"selection\"\n });\n }\n\n return;\n }\n\n if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && this.state.isBindingEnabled) {\n this.setState({\n isBindingEnabled: false\n });\n }\n\n if ((0,_keys__WEBPACK_IMPORTED_MODULE_26__.isArrowKey)(event.key)) {\n const step = this.state.gridSize && (event.shiftKey ? _constants__WEBPACK_IMPORTED_MODULE_12__.ELEMENT_TRANSLATE_AMOUNT : this.state.gridSize) || (event.shiftKey ? _constants__WEBPACK_IMPORTED_MODULE_12__.ELEMENT_SHIFT_TRANSLATE_AMOUNT : _constants__WEBPACK_IMPORTED_MODULE_12__.ELEMENT_TRANSLATE_AMOUNT);\n let offsetX = 0;\n let offsetY = 0;\n\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ARROW_LEFT) {\n offsetX = -step;\n } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ARROW_RIGHT) {\n offsetX = step;\n } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ARROW_UP) {\n offsetY = -step;\n } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ARROW_DOWN) {\n offsetY = step;\n }\n\n const selectedElements = this.scene.getSelectedElements({\n selectedElementIds: this.state.selectedElementIds,\n includeBoundTextElement: true,\n includeElementsInFrames: true\n });\n selectedElements.forEach(element => {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n x: element.x + offsetX,\n y: element.y + offsetY\n });\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.updateBoundElements)(element, this.scene.getNonDeletedElementsMap(), {\n simultaneouslyUpdated: selectedElements\n });\n });\n this.setState({\n suggestedBindings: (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getSuggestedBindingsForArrows)(selectedElements, this)\n });\n event.preventDefault();\n } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ENTER) {\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (selectedElements.length === 1) {\n const selectedElement = selectedElements[0];\n\n if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(selectedElement)) {\n if (!this.state.editingLinearElement || this.state.editingLinearElement.elementId !== selectedElements[0].id) {\n this.store.shouldCaptureIncrement();\n this.setState({\n editingLinearElement: new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(selectedElement)\n });\n }\n }\n } else if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(selectedElement) || (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.isValidTextContainer)(selectedElement)) {\n let container;\n\n if (!(0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(selectedElement)) {\n container = selectedElement;\n }\n\n const midPoint = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.getContainerCenter)(selectedElement, this.state, this.scene.getNonDeletedElementsMap());\n const sceneX = midPoint.x;\n const sceneY = midPoint.y;\n this.startTextEditing({\n sceneX,\n sceneY,\n container\n });\n event.preventDefault();\n return;\n } else if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(selectedElement)) {\n this.setState({\n editingFrame: selectedElement.id\n });\n } else if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(selectedElement)) {\n //zsviczian\n this.setState({\n activeEmbeddable: {\n element: selectedElement,\n state: \"active\"\n }\n });\n }\n }\n } else if (!event.ctrlKey && !event.altKey && !event.metaKey && this.state.draggingElement === null) {\n const shape = (0,_shapes__WEBPACK_IMPORTED_MODULE_32__.findShapeByKey)(event.key);\n\n if (shape) {\n if (this.state.activeTool.type !== shape) {\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"toolbar\", shape, `keyboard (${this.device.editor.isMobile ? \"mobile\" : \"desktop\"})`);\n }\n\n this.setActiveTool({\n type: shape\n });\n event.stopPropagation();\n } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.Q) {\n this.toggleLock(\"keyboard\");\n event.stopPropagation();\n }\n }\n\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.SPACE && gesture.pointers.size === 0) {\n isHoldingSpace = true;\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n event.preventDefault();\n }\n\n if ((event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.G || event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.S) && !event.altKey && !event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (this.state.activeTool.type === \"selection\" && !selectedElements.length) {\n return;\n }\n\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.G && ((0,_scene__WEBPACK_IMPORTED_MODULE_29__.hasBackground)(this.state.activeTool.type) || selectedElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_29__.hasBackground)(element.type)))) {\n this.setState({\n openPopup: \"elementBackground\"\n });\n event.stopPropagation();\n }\n\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.S) {\n this.setState({\n openPopup: \"elementStroke\"\n });\n event.stopPropagation();\n }\n }\n\n if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.BACKSPACE || event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.DELETE)) {\n _jotai__WEBPACK_IMPORTED_MODULE_56__.jotaiStore.set(_ActiveConfirmDialog__WEBPACK_IMPORTED_MODULE_57__.activeConfirmDialogAtom, \"clearCanvas\");\n } // eye dropper\n // -----------------------------------------------------------------------\n\n\n const lowerCased = event.key.toLocaleLowerCase();\n const isPickingStroke = lowerCased === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.S && event.shiftKey;\n const isPickingBackground = event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.I || lowerCased === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.G && event.shiftKey;\n\n if (isPickingStroke || isPickingBackground) {\n this.openEyeDropper({\n type: isPickingStroke ? \"stroke\" : \"background\"\n });\n } // -----------------------------------------------------------------------\n\n });\n this.onWheel = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(event => {\n // prevent browser pinch zoom on DOM elements\n if (!(event.target instanceof HTMLCanvasElement) && event.ctrlKey) {\n event.preventDefault();\n }\n });\n this.onKeyUp = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(event => {\n var _a, _b;\n\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.SPACE) {\n if (this.state.viewModeEnabled) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n } else if (this.state.activeTool.type === \"selection\") {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.resetCursor)(this.interactiveCanvas);\n } else {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursorForShape)(this.interactiveCanvas, this.state);\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, this.state),\n selectedGroupIds: {},\n editingGroupId: null,\n activeEmbeddable: null\n });\n }\n\n isHoldingSpace = false;\n }\n\n if (!event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && !this.state.isBindingEnabled) {\n this.setState({\n isBindingEnabled: true\n });\n }\n\n if ((0,_keys__WEBPACK_IMPORTED_MODULE_26__.isArrowKey)(event.key)) {\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.bindOrUnbindLinearElements)(this.scene.getSelectedElements(this.state).filter(_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement), this, (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.isBindingEnabled)(this.state), (_b = (_a = this.state.selectedLinearElement) === null || _a === void 0 ? void 0 : _a.selectedPointsIndices) !== null && _b !== void 0 ? _b : []);\n this.setState({\n suggestedBindings: []\n });\n }\n }); // We purposely widen the `tool` type so this helper can be called with\n // any tool without having to type check it\n\n this.isToolSupported = tool => {\n var _a;\n\n return ((_a = this.props.UIOptions.tools) === null || _a === void 0 ? void 0 : _a[tool]) !== false;\n };\n\n this.setActiveTool = tool => {\n var _a;\n\n if (!this.isToolSupported(tool.type)) {\n console.warn(`\"${tool.type}\" tool is disabled via \"UIOptions.canvasActions.tools.${tool.type}\"`);\n return;\n }\n\n const nextActiveTool = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateActiveTool)(this.state, tool);\n\n if (nextActiveTool.type === \"hand\") {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n } else if (!isHoldingSpace) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursorForShape)(this.interactiveCanvas, this.state);\n }\n\n if ((0,_utils__WEBPACK_IMPORTED_MODULE_35__.isToolIcon)(document.activeElement)) {\n this.focusContainer();\n }\n\n if (!(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElementType)(nextActiveTool.type)) {\n this.setState({\n suggestedBindings: []\n });\n }\n\n if (nextActiveTool.type === \"image\") {\n this.onImageAction({\n insertOnCanvasDirectly: (_a = tool.type === \"image\" && tool.insertOnCanvasDirectly) !== null && _a !== void 0 ? _a : false\n });\n }\n\n setTimeout(() => {\n this.setState(prevState => {\n const commonResets = {\n snapLines: prevState.snapLines.length ? [] : prevState.snapLines,\n originSnapOffset: null,\n activeEmbeddable: null\n };\n\n if (nextActiveTool.type === \"freedraw\") {\n this.store.shouldCaptureIncrement();\n }\n\n if (nextActiveTool.type !== \"selection\") {\n return Object.assign(Object.assign(Object.assign({}, prevState), {\n activeTool: nextActiveTool,\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(nextActiveTool.type === \"mermaid\" //zsviczian\n ? this.state.selectedElementIds : {}, prevState),\n selectedGroupIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, prevState),\n editingGroupId: null,\n multiElement: null\n }), commonResets);\n }\n\n return Object.assign(Object.assign(Object.assign({}, prevState), {\n activeTool: nextActiveTool\n }), commonResets);\n }); //zsviczian added timeout because button won't select otherwise\n });\n };\n\n this.setOpenDialog = dialogType => {\n this.setState({\n openDialog: dialogType\n });\n };\n\n this.setCursor = cursor => {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, cursor);\n };\n\n this.resetCursor = () => {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.resetCursor)(this.interactiveCanvas);\n };\n /**\r\n * returns whether user is making a gesture with >= 2 fingers (points)\r\n * on o touch screen (not on a trackpad). Currently only relates to Darwin\r\n * (iOS/iPadOS,MacOS), but may work on other devices in the future if\r\n * GestureEvent is standardized.\r\n */\n\n\n this.isTouchScreenMultiTouchGesture = () => {\n // we don't want to deselect when using trackpad, and multi-point gestures\n // only work on touch screens, so checking for >= pointers means we're on a\n // touchscreen\n return gesture.pointers.size >= 2;\n };\n\n this.getName = () => {\n return this.state.name || this.props.name || `${(0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"labels.untitled\")}-${(0,_utils__WEBPACK_IMPORTED_MODULE_35__.getDateTime)()}`;\n }; // fires only on Safari\n\n\n this.onGestureStart = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(event => {\n event.preventDefault(); // we only want to deselect on touch screens because user may have selected\n // elements by mistake while zooming\n\n if (this.isTouchScreenMultiTouchGesture()) {\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, this.state),\n activeEmbeddable: null\n });\n }\n\n gesture.initialScale = this.state.zoom.value;\n }); // fires only on Safari\n\n this.onGestureChange = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(event => {\n event.preventDefault(); // onGestureChange only has zoom factor but not the center.\n // If we're on iPad or iPhone, then we recognize multi-touch and will\n // zoom in at the right location in the touchmove handler\n // (handleCanvasPointerMove).\n //\n // On Macbook trackpad, we don't have those events so will zoom in at the\n // current location instead.\n //\n // As such, bail from this handler on touch devices.\n\n if (this.isTouchScreenMultiTouchGesture()) {\n return;\n }\n\n const initialScale = gesture.initialScale;\n\n if (initialScale) {\n this.setState(state => Object.assign({}, (0,_scene_zoom__WEBPACK_IMPORTED_MODULE_31__.getStateForZoom)({\n viewportX: this.lastViewportPosition.x,\n viewportY: this.lastViewportPosition.y,\n nextZoom: (0,_scene__WEBPACK_IMPORTED_MODULE_29__.getNormalizedZoom)(initialScale * event.scale)\n }, state)));\n }\n }); // fires only on Safari\n\n this.onGestureEnd = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(event => {\n event.preventDefault(); // reselect elements only on touch screens (see onGestureStart)\n\n if (this.isTouchScreenMultiTouchGesture()) {\n this.setState({\n previousSelectedElementIds: {},\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(this.state.previousSelectedElementIds, this.state)\n });\n }\n\n gesture.initialScale = null;\n });\n\n this.startTextEditing = ({\n sceneX,\n sceneY,\n insertAtParentCenter = true,\n container\n }) => {\n var _a, _b;\n\n let shouldBindToContainer = false;\n let parentCenterPosition = insertAtParentCenter && this.getTextWysiwygSnappedToCenterPosition(sceneX, sceneY, this.state, container);\n\n if (container && parentCenterPosition) {\n const boundTextElementToContainer = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.getBoundTextElement)(container, this.scene.getNonDeletedElementsMap());\n\n if (!boundTextElementToContainer) {\n shouldBindToContainer = true;\n }\n }\n\n let existingTextElement = null;\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (selectedElements.length === 1) {\n if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(selectedElements[0])) {\n existingTextElement = selectedElements[0];\n } else if (container) {\n existingTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.getBoundTextElement)(selectedElements[0], this.scene.getNonDeletedElementsMap());\n } else {\n existingTextElement = this.getTextElementAtPosition(sceneX, sceneY);\n }\n } else {\n existingTextElement = this.getTextElementAtPosition(sceneX, sceneY);\n }\n\n const fontFamily = (existingTextElement === null || existingTextElement === void 0 ? void 0 : existingTextElement.fontFamily) || this.state.currentItemFontFamily;\n const lineHeight = (existingTextElement === null || existingTextElement === void 0 ? void 0 : existingTextElement.lineHeight) || (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.getDefaultLineHeight)(fontFamily);\n const fontSize = (0,_actions_actionProperties__WEBPACK_IMPORTED_MODULE_79__.getFontSize)(this.state.currentItemFontSize, this.state.zoom.value); //zsviczian\n\n if (!existingTextElement && shouldBindToContainer && container && !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isArrowElement)(container)) {\n const fontString = {\n fontSize,\n fontFamily\n };\n const minWidth = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.getApproxMinLineWidth)((0,_utils__WEBPACK_IMPORTED_MODULE_35__.getFontString)(fontString), lineHeight);\n const minHeight = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.getApproxMinLineHeight)(fontSize, lineHeight);\n const newHeight = Math.max(container.height, minHeight);\n const newWidth = Math.max(container.width, minWidth);\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(container, {\n height: newHeight,\n width: newWidth\n });\n sceneX = container.x + newWidth / 2;\n sceneY = container.y + newHeight / 2;\n\n if (parentCenterPosition) {\n parentCenterPosition = this.getTextWysiwygSnappedToCenterPosition(sceneX, sceneY, this.state, container);\n }\n }\n\n const topLayerFrame = this.getTopLayerFrameAtSceneCoords({\n x: sceneX,\n y: sceneY\n });\n const element = existingTextElement ? existingTextElement : (0,_element__WEBPACK_IMPORTED_MODULE_16__.newTextElement)({\n x: parentCenterPosition ? parentCenterPosition.elementCenterX : sceneX,\n y: parentCenterPosition ? parentCenterPosition.elementCenterY : sceneY,\n strokeColor: this.state.currentItemStrokeColor,\n backgroundColor: this.state.currentItemBackgroundColor,\n fillStyle: this.state.currentItemFillStyle,\n strokeWidth: this.state.currentItemStrokeWidth,\n strokeStyle: this.state.currentItemStrokeStyle,\n roughness: this.state.currentItemRoughness,\n opacity: this.state.currentItemOpacity,\n text: \"\",\n rawText: \"\",\n fontSize,\n fontFamily,\n textAlign: parentCenterPosition ? \"center\" : this.state.currentItemTextAlign,\n verticalAlign: parentCenterPosition ? _constants__WEBPACK_IMPORTED_MODULE_12__.VERTICAL_ALIGN.MIDDLE : _constants__WEBPACK_IMPORTED_MODULE_12__.DEFAULT_VERTICAL_ALIGN,\n containerId: shouldBindToContainer ? container === null || container === void 0 ? void 0 : container.id : undefined,\n groupIds: (_a = container === null || container === void 0 ? void 0 : container.groupIds) !== null && _a !== void 0 ? _a : [],\n lineHeight,\n angle: (_b = container === null || container === void 0 ? void 0 : container.angle) !== null && _b !== void 0 ? _b : 0,\n frameId: topLayerFrame ? topLayerFrame.id : null\n });\n\n if (!existingTextElement && shouldBindToContainer && container) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(container, {\n boundElements: (container.boundElements || []).concat({\n type: \"text\",\n id: element.id\n })\n });\n }\n\n this.setState({\n editingElement: element\n });\n\n if (!existingTextElement) {\n if (container && shouldBindToContainer) {\n const containerIndex = this.scene.getElementIndex(container.id);\n this.scene.insertElementAtIndex(element, containerIndex + 1);\n } else {\n this.scene.insertElement(element);\n }\n }\n\n this.setState({\n editingElement: element\n });\n this.handleTextWysiwyg(element, {\n isExistingElement: !!existingTextElement\n });\n };\n\n this.handleCanvasDoubleClick = event => {\n // case: double-clicking with arrow/line tool selected would both create\n // text and enter multiElement mode\n if (this.state.multiElement) {\n return;\n } //zsviczian\n\n /*\r\n if (this.state.viewModeEnabled && !isExcaliBrainView()) {\r\n if (this.state.activeTool.type === \"laser\") {\r\n this.setActiveTool({ type: \"selection\" });\r\n setCursor(this.interactiveCanvas, CURSOR_TYPE.GRAB);\r\n } else {\r\n this.setActiveTool({ type: \"laser\" });\r\n setCursor(this.interactiveCanvas, CURSOR_TYPE.CROSSHAIR);\r\n }\r\n return;\r\n }*/\n // we should only be able to double click when mode is selection\n\n\n if (this.state.activeTool.type !== \"selection\") {\n return;\n }\n\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(selectedElements[0])) {\n if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && (!this.state.editingLinearElement || this.state.editingLinearElement.elementId !== selectedElements[0].id)) {\n this.store.shouldCaptureIncrement();\n this.setState({\n editingLinearElement: new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(selectedElements[0])\n });\n return;\n }\n }\n\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.resetCursor)(this.interactiveCanvas);\n let {\n x: sceneX,\n y: sceneY\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)(event, this.state);\n const selectedGroupIds = (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getSelectedGroupIds)(this.state);\n\n if (selectedGroupIds.length > 0) {\n const hitElement = this.getElementAtPosition(sceneX, sceneY);\n const selectedGroupId = hitElement && (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getSelectedGroupIdForElement)(hitElement, this.state.selectedGroupIds);\n\n if (selectedGroupId) {\n this.store.shouldCaptureIncrement();\n this.setState(prevState => Object.assign(Object.assign({}, prevState), (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n editingGroupId: selectedGroupId,\n selectedElementIds: {\n [hitElement.id]: true\n }\n }, this.scene.getNonDeletedElements(), prevState, this)));\n return;\n }\n }\n\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.resetCursor)(this.interactiveCanvas);\n\n if (!event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && !this.state.viewModeEnabled) {\n const hitElement = this.getElementAtPosition(sceneX, sceneY);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeLikeElement)(hitElement)) {\n this.setState({\n activeEmbeddable: {\n element: hitElement,\n state: \"active\"\n }\n });\n return;\n }\n\n const container = this.getTextBindableContainerAtPosition(sceneX, sceneY);\n\n if (container) {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.hasBoundTextElement)(container) || !(0,_utils__WEBPACK_IMPORTED_MODULE_35__.isTransparent)(container.backgroundColor) || (0,_element_collision__WEBPACK_IMPORTED_MODULE_87__.hitElementItself)({\n x: sceneX,\n y: sceneY,\n element: container,\n shape: this.getElementShape(container),\n threshold: this.getElementHitThreshold()\n })) {\n const midPoint = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.getContainerCenter)(container, this.state, this.scene.getNonDeletedElementsMap());\n sceneX = midPoint.x;\n sceneY = midPoint.y;\n }\n }\n\n this.startTextEditing({\n sceneX,\n sceneY,\n insertAtParentCenter: !event.altKey,\n container\n });\n }\n };\n\n this.getElementLinkAtPosition = (scenePointer, hitElement) => {\n // Reversing so we traverse the elements in decreasing order\n // of z-index\n const elements = this.scene.getNonDeletedElements().slice().reverse();\n let hitElementIndex = Infinity;\n return elements.find((element, index) => {\n if (hitElement && element.id === hitElement.id) {\n hitElementIndex = index;\n }\n\n return element.link && index <= hitElementIndex && (0,_hyperlink_helpers__WEBPACK_IMPORTED_MODULE_91__.isPointHittingLink)(element, this.scene.getNonDeletedElementsMap(), this.state, [scenePointer.x, scenePointer.y], this.device.editor.isMobile);\n });\n };\n\n this.redirectToLink = (event, isTouchScreen) => {\n const draggedDistance = (0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(this.lastPointerDownEvent.clientX, this.lastPointerDownEvent.clientY, this.lastPointerUpEvent.clientX, this.lastPointerUpEvent.clientY);\n\n if (!this.hitLinkElement || // For touch screen allow dragging threshold else strict check\n isTouchScreen && draggedDistance > _constants__WEBPACK_IMPORTED_MODULE_12__.DRAGGING_THRESHOLD || !isTouchScreen && draggedDistance !== 0) {\n return;\n }\n\n const lastPointerDownCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)(this.lastPointerDownEvent, this.state);\n const elementsMap = this.scene.getNonDeletedElementsMap();\n const lastPointerDownHittingLinkIcon = (0,_hyperlink_helpers__WEBPACK_IMPORTED_MODULE_91__.isPointHittingLink)(this.hitLinkElement, elementsMap, this.state, [lastPointerDownCoords.x, lastPointerDownCoords.y], this.device.editor.isMobile);\n const lastPointerUpCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)(this.lastPointerUpEvent, this.state);\n const lastPointerUpHittingLinkIcon = (0,_hyperlink_helpers__WEBPACK_IMPORTED_MODULE_91__.isPointHittingLink)(this.hitLinkElement, elementsMap, this.state, [lastPointerUpCoords.x, lastPointerUpCoords.y], this.device.editor.isMobile);\n\n if (lastPointerDownHittingLinkIcon && lastPointerUpHittingLinkIcon) {\n let url = this.hitLinkElement.link;\n\n if (url) {\n url = (0,_data_url__WEBPACK_IMPORTED_MODULE_47__.normalizeLink)(url);\n let customEvent;\n\n if (this.props.onLinkOpen) {\n customEvent = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.wrapEvent)(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.EXCALIDRAW_LINK, event.nativeEvent);\n this.props.onLinkOpen(Object.assign(Object.assign({}, this.hitLinkElement), {\n link: url\n }), customEvent);\n }\n\n if (!(customEvent === null || customEvent === void 0 ? void 0 : customEvent.defaultPrevented)) {\n const target = (0,_data_url__WEBPACK_IMPORTED_MODULE_47__.isLocalLink)(url) ? \"_self\" : \"_blank\";\n const newWindow = window.open(undefined, target); // https://mathiasbynens.github.io/rel-noopener/\n\n if (newWindow) {\n newWindow.opener = null;\n newWindow.location = url;\n }\n }\n }\n }\n };\n\n this.getTopLayerFrameAtSceneCoords = sceneCoords => {\n const elementsMap = this.scene.getNonDeletedElementsMap();\n const frames = this.scene.getNonDeletedFramesLikes().filter(frame => (0,_frame__WEBPACK_IMPORTED_MODULE_51__.isCursorInFrame)(sceneCoords, frame, elementsMap));\n return frames.length ? frames[frames.length - 1] : null;\n };\n\n this.handleCanvasPointerMove = event => {\n var _a, _b;\n\n this.savePointer(event.clientX, event.clientY, this.state.cursorButton);\n this.lastPointerMoveEvent = event.nativeEvent;\n\n if (gesture.pointers.has(event.pointerId)) {\n gesture.pointers.set(event.pointerId, {\n x: event.clientX,\n y: event.clientY\n });\n }\n\n const initialScale = gesture.initialScale;\n\n if (gesture.pointers.size === 2 && gesture.lastCenter && initialScale && gesture.initialDistance) {\n const center = (0,_gesture__WEBPACK_IMPORTED_MODULE_22__.getCenter)(gesture.pointers);\n const deltaX = center.x - gesture.lastCenter.x;\n const deltaY = center.y - gesture.lastCenter.y;\n gesture.lastCenter = center;\n const distance = (0,_gesture__WEBPACK_IMPORTED_MODULE_22__.getDistance)(Array.from(gesture.pointers.values()));\n const scaleFactor = !this.state.allowPinchZoom && //zsviczian\n this.state.activeTool.type === \"freedraw\" && this.state.penMode ? 1 : distance / gesture.initialDistance;\n const nextZoom = scaleFactor ? (0,_scene__WEBPACK_IMPORTED_MODULE_29__.getNormalizedZoom)(initialScale * scaleFactor) : this.state.zoom.value;\n this.setState(state => {\n const zoomState = (0,_scene_zoom__WEBPACK_IMPORTED_MODULE_31__.getStateForZoom)({\n viewportX: center.x,\n viewportY: center.y,\n nextZoom\n }, state);\n this.translateCanvas({\n zoom: zoomState.zoom,\n scrollX: zoomState.scrollX + 2 * (deltaX / nextZoom),\n scrollY: zoomState.scrollY + 2 * (deltaY / nextZoom),\n shouldCacheIgnoreZoom: true\n });\n });\n this.resetShouldCacheIgnoreZoomDebounced();\n } else {\n gesture.lastCenter = gesture.initialDistance = gesture.initialScale = null;\n }\n\n if (isHoldingSpace || isPanning || isDraggingScrollBar || (0,_appState__WEBPACK_IMPORTED_MODULE_10__.isHandToolActive)(this.state)) {\n return;\n }\n\n const isPointerOverScrollBars = (0,_scene_scrollbars__WEBPACK_IMPORTED_MODULE_89__.isOverScrollBars)(currentScrollBars, event.clientX - this.state.offsetLeft, event.clientY - this.state.offsetTop);\n const isOverScrollBar = isPointerOverScrollBars.isOverEither;\n const isPenFreedraw = this.state.activeTool.type === \"freedraw\" && event.pointerType === \"pen\"; //zsviczian\n\n if (!this.state.draggingElement && !this.state.multiElement) {\n if (isOverScrollBar) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.resetCursor)(this.interactiveCanvas);\n } else if (isPenFreedraw && this.interactiveCanvas && (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_86__.hideFreedrawPenmodeCursor)()) {\n //zsviczian https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/1659\n this.interactiveCanvas.style.cursor = \"none\";\n } else {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursorForShape)(this.interactiveCanvas, this.state);\n }\n }\n\n const scenePointer = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)(event, this.state);\n const {\n x: scenePointerX,\n y: scenePointerY\n } = scenePointer;\n\n if (!this.state.draggingElement && (0,_snapping__WEBPACK_IMPORTED_MODULE_59__.isActiveToolNonLinearSnappable)(this.state.activeTool.type)) {\n const {\n originOffset,\n snapLines\n } = (0,_snapping__WEBPACK_IMPORTED_MODULE_59__.getSnapLinesAtPointer)(this.scene.getNonDeletedElements(), this.state, {\n x: scenePointerX,\n y: scenePointerY\n }, event, this.scene.getNonDeletedElementsMap());\n this.setState(prevState => {\n const nextSnapLines = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateStable)(prevState.snapLines, snapLines);\n const nextOriginOffset = prevState.originSnapOffset ? (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateStable)(prevState.originSnapOffset, originOffset) : originOffset;\n\n if (prevState.snapLines === nextSnapLines && prevState.originSnapOffset === nextOriginOffset) {\n return null;\n }\n\n return {\n snapLines: nextSnapLines,\n originSnapOffset: nextOriginOffset\n };\n });\n } else if (!this.state.draggingElement) {\n this.setState(prevState => {\n if (prevState.snapLines.length) {\n return {\n snapLines: []\n };\n }\n\n return null;\n });\n }\n\n if (this.state.editingLinearElement && !this.state.editingLinearElement.isDragging) {\n const editingLinearElement = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handlePointerMove(event, scenePointerX, scenePointerY, this.state, this.scene.getNonDeletedElementsMap());\n\n if (editingLinearElement && editingLinearElement !== this.state.editingLinearElement) {\n // Since we are reading from previous state which is not possible with\n // automatic batching in React 18 hence using flush sync to synchronously\n // update the state. Check https://github.com/excalidraw/excalidraw/pull/5508 for more details.\n (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.flushSync)(() => {\n this.setState({\n editingLinearElement\n });\n });\n }\n\n if ((editingLinearElement === null || editingLinearElement === void 0 ? void 0 : editingLinearElement.lastUncommittedPoint) != null) {\n this.maybeSuggestBindingAtCursor(scenePointer);\n } else {\n // causes stack overflow if not sync\n (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.flushSync)(() => {\n this.setState({\n suggestedBindings: []\n });\n });\n }\n }\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElementType)(this.state.activeTool.type)) {\n // Hovering with a selected tool or creating new linear element via click\n // and point\n const {\n draggingElement\n } = this.state;\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElement)(draggingElement, false)) {\n this.maybeSuggestBindingsForLinearElementAtCoords(draggingElement, [scenePointer], this.state.startBoundElement);\n } else {\n this.maybeSuggestBindingAtCursor(scenePointer);\n }\n }\n\n if (this.state.multiElement) {\n const {\n multiElement\n } = this.state;\n const {\n x: rx,\n y: ry\n } = multiElement;\n const {\n points,\n lastCommittedPoint\n } = multiElement;\n const lastPoint = points[points.length - 1];\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursorForShape)(this.interactiveCanvas, this.state);\n\n if (lastPoint === lastCommittedPoint) {\n // if we haven't yet created a temp point and we're beyond commit-zone\n // threshold, add a point\n if ((0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(scenePointerX - rx, scenePointerY - ry, lastPoint[0], lastPoint[1]) >= _constants__WEBPACK_IMPORTED_MODULE_12__.LINE_CONFIRM_THRESHOLD) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(multiElement, {\n points: [...points, [scenePointerX - rx, scenePointerY - ry]]\n });\n } else {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER); // in this branch, we're inside the commit zone, and no uncommitted\n // point exists. Thus do nothing (don't add/remove points).\n }\n } else if (points.length > 2 && lastCommittedPoint && (0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(scenePointerX - rx, scenePointerY - ry, lastCommittedPoint[0], lastCommittedPoint[1]) < _constants__WEBPACK_IMPORTED_MODULE_12__.LINE_CONFIRM_THRESHOLD) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(multiElement, {\n points: points.slice(0, -1)\n });\n } else {\n const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(scenePointerX, scenePointerY, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.state.gridSize);\n const [lastCommittedX, lastCommittedY] = (_a = multiElement === null || multiElement === void 0 ? void 0 : multiElement.lastCommittedPoint) !== null && _a !== void 0 ? _a : [0, 0];\n let dxFromLastCommitted = gridX - rx - lastCommittedX;\n let dyFromLastCommitted = gridY - ry - lastCommittedY;\n\n if ((0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldRotateWithDiscreteAngle)(event)) {\n ({\n width: dxFromLastCommitted,\n height: dyFromLastCommitted\n } = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getLockedLinearCursorAlignSize)( // actual coordinate of the last committed point\n lastCommittedX + rx, lastCommittedY + ry, // cursor-grid coordinate\n gridX, gridY));\n }\n\n if ((0,_math__WEBPACK_IMPORTED_MODULE_28__.isPathALoop)(points, this.state.zoom.value)) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n } // update last uncommitted point\n\n\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(multiElement, {\n points: [...points.slice(0, -1), [lastCommittedX + dxFromLastCommitted, lastCommittedY + dyFromLastCommitted]]\n });\n }\n\n return;\n }\n\n const hasDeselectedButton = Boolean(event.buttons);\n\n if (hasDeselectedButton || this.state.activeTool.type !== \"selection\" && this.state.activeTool.type !== \"text\" && this.state.activeTool.type !== \"eraser\") {\n return;\n }\n\n const elements = this.scene.getNonDeletedElements();\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (selectedElements.length === 1 && !isOverScrollBar && !this.state.editingLinearElement) {\n // for linear elements, we'd like to prioritize point dragging over edge resizing\n // therefore, we update and check hovered point index first\n if (this.state.selectedLinearElement) {\n this.handleHoverSelectedLinearElement(this.state.selectedLinearElement, scenePointerX, scenePointerY);\n }\n\n if (!this.state.selectedLinearElement || this.state.selectedLinearElement.hoverPointIndex === -1) {\n const elementWithTransformHandleType = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getElementWithTransformHandleType)(elements, this.state, scenePointerX, scenePointerY, this.state.zoom, event.pointerType, this.scene.getNonDeletedElementsMap(), this.device);\n\n if (elementWithTransformHandleType && elementWithTransformHandleType.transformHandleType) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCursorForResizingElement)(elementWithTransformHandleType));\n return;\n }\n }\n } else if (selectedElements.length > 1 && !isOverScrollBar) {\n const transformHandleType = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getTransformHandleTypeFromCoords)((0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(selectedElements), scenePointerX, scenePointerY, this.state.zoom, event.pointerType, this.device);\n\n if (transformHandleType) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCursorForResizingElement)({\n transformHandleType\n }));\n return;\n }\n }\n\n const hitElement = this.getElementAtPosition(scenePointer.x, scenePointer.y);\n this.hitLinkElement = this.getElementLinkAtPosition(scenePointer, hitElement);\n\n if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state)) {\n return;\n }\n\n if (this.hitLinkElement && !this.state.selectedElementIds[this.hitLinkElement.id]) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n (0,_components_hyperlink_Hyperlink__WEBPACK_IMPORTED_MODULE_46__.showHyperlinkTooltip)(this.hitLinkElement, this.state, this.scene.getNonDeletedElementsMap());\n\n if (this.props.onLinkHover) {\n this.props.onLinkHover(this.hitLinkElement, event);\n } //zsviczian\n\n } else {\n (0,_components_hyperlink_Hyperlink__WEBPACK_IMPORTED_MODULE_46__.hideHyperlinkToolip)();\n\n if (hitElement && (hitElement.link || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(hitElement)) && this.state.selectedElementIds[hitElement.id] && !this.state.contextMenu && !this.state.showHyperlinkPopup) {\n this.setState({\n showHyperlinkPopup: \"info\"\n });\n } else if (this.state.activeTool.type === \"text\") {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(hitElement) ? _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.TEXT : _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.CROSSHAIR);\n } else if (this.state.viewModeEnabled) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n } else if (isOverScrollBar) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.AUTO);\n } else if (this.state.selectedLinearElement) {\n this.handleHoverSelectedLinearElement(this.state.selectedLinearElement, scenePointerX, scenePointerY);\n } else if ( // if using cmd/ctrl, we're not dragging\n !event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n if ((hitElement || this.isHittingCommonBoundingBoxOfSelectedElements(scenePointer, selectedElements)) && !(hitElement === null || hitElement === void 0 ? void 0 : hitElement.locked)) {\n if (hitElement && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeLikeElement)(hitElement) && this.isIframeLikeElementCenter(hitElement, event, scenePointerX, scenePointerY)) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n this.setState({\n activeEmbeddable: {\n element: hitElement,\n state: \"hover\"\n }\n });\n } else {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.MOVE);\n\n if (((_b = this.state.activeEmbeddable) === null || _b === void 0 ? void 0 : _b.state) === \"hover\") {\n this.setState({\n activeEmbeddable: null\n });\n }\n }\n }\n } else {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.AUTO);\n }\n }\n };\n\n this.handleEraser = (event, pointerDownState, scenePointer) => {\n this.eraserTrail.addPointToPath(scenePointer.x, scenePointer.y);\n let didChange = false;\n const processedGroups = new Set();\n const nonDeletedElements = this.scene.getNonDeletedElements();\n\n const processElements = elements => {\n var _a;\n\n for (const element of elements) {\n if (element.locked) {\n return;\n }\n\n if (event.altKey) {\n if (this.elementsPendingErasure.delete(element.id)) {\n didChange = true;\n }\n } else if (!this.elementsPendingErasure.has(element.id)) {\n didChange = true;\n this.elementsPendingErasure.add(element.id);\n } // (un)erase groups atomically\n\n\n if (didChange && ((_a = element.groupIds) === null || _a === void 0 ? void 0 : _a.length)) {\n const shallowestGroupId = element.groupIds.at(-1);\n\n if (!processedGroups.has(shallowestGroupId)) {\n processedGroups.add(shallowestGroupId);\n const elems = (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(nonDeletedElements, shallowestGroupId);\n\n for (const elem of elems) {\n if (event.altKey) {\n this.elementsPendingErasure.delete(elem.id);\n } else {\n this.elementsPendingErasure.add(elem.id);\n }\n }\n }\n }\n }\n };\n\n const distance = (0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y, scenePointer.x, scenePointer.y);\n const threshold = this.getElementHitThreshold();\n const point = Object.assign({}, pointerDownState.lastCoords);\n let samplingInterval = 0;\n\n while (samplingInterval <= distance) {\n const hitElements = this.getElementsAtPosition(point.x, point.y);\n processElements(hitElements); // Exit since we reached current point\n\n if (samplingInterval === distance) {\n break;\n } // Calculate next point in the line at a distance of sampling interval\n\n\n samplingInterval = Math.min(samplingInterval + threshold, distance);\n const distanceRatio = samplingInterval / distance;\n const nextX = (1 - distanceRatio) * point.x + distanceRatio * scenePointer.x;\n const nextY = (1 - distanceRatio) * point.y + distanceRatio * scenePointer.y;\n point.x = nextX;\n point.y = nextY;\n }\n\n pointerDownState.lastCoords.x = scenePointer.x;\n pointerDownState.lastCoords.y = scenePointer.y;\n\n if (didChange) {\n for (const element of this.scene.getNonDeletedElements()) {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(element) && (this.elementsPendingErasure.has(element.id) || this.elementsPendingErasure.has(element.containerId))) {\n if (event.altKey) {\n this.elementsPendingErasure.delete(element.id);\n this.elementsPendingErasure.delete(element.containerId);\n } else {\n this.elementsPendingErasure.add(element.id);\n this.elementsPendingErasure.add(element.containerId);\n }\n }\n }\n\n this.elementsPendingErasure = new Set(this.elementsPendingErasure);\n this.triggerRender();\n }\n }; // set touch moving for mobile context menu\n\n\n this.handleTouchMove = event => {\n invalidateContextMenu = true;\n };\n\n this.handleCanvasPointerDown = event => {\n var _a, _b;\n\n this.focusContainer(); //zsviczian\n\n this.maybeCleanupAfterMissingPointerUp(event.nativeEvent);\n this.maybeUnfollowRemoteUser(); // since contextMenu options are potentially evaluated on each render,\n // and an contextMenu action may depend on selection state, we must\n // close the contextMenu before we update the selection on pointerDown\n // (e.g. resetting selection)\n\n if (this.state.contextMenu) {\n this.setState({\n contextMenu: null\n });\n }\n\n if (this.state.snapLines) {\n this.setAppState({\n snapLines: []\n });\n }\n\n this.updateGestureOnPointerDown(event); // if dragging element is freedraw and another pointerdown event occurs\n // a second finger is on the screen\n // discard the freedraw element if it is very short because it is likely\n // just a spike, otherwise finalize the freedraw element when the second\n // finger is lifted\n\n if (event.pointerType === \"touch\" && this.state.draggingElement && this.state.draggingElement.type === \"freedraw\") {\n const element = this.state.draggingElement;\n this.updateScene(Object.assign(Object.assign({}, element.points.length < 10 ? {\n elements: this.scene.getElementsIncludingDeleted().filter(el => el.id !== element.id)\n } : {}), {\n appState: {\n draggingElement: null,\n editingElement: null,\n startBoundElement: null,\n suggestedBindings: [],\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(Object.keys(this.state.selectedElementIds).filter(key => key !== element.id).reduce((obj, key) => {\n obj[key] = this.state.selectedElementIds[key];\n return obj;\n }, {}), this.state)\n },\n storeAction: _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.UPDATE\n }));\n return;\n } // remove any active selection when we start to interact with canvas\n // (mainly, we care about removing selection outside the component which\n // would prevent our copy handling otherwise)\n\n\n const selection = document.getSelection();\n\n if (selection === null || selection === void 0 ? void 0 : selection.anchorNode) {\n selection.removeAllRanges();\n }\n\n this.maybeOpenContextMenuAfterPointerDownOnTouchDevices(event); //fires only once, if pen is detected, penMode is enabled\n //the user can disable this by toggling the penMode button\n\n if (!this.state.penDetected && event.pointerType === \"pen\") {\n this.setState(prevState => {\n return {\n penMode: true,\n penDetected: true\n };\n });\n }\n\n if (!this.device.isTouchScreen && [\"pen\", \"touch\"].includes(event.pointerType)) {\n this.device = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateObject)(this.device, {\n isTouchScreen: true\n });\n }\n\n if (isPanning) {\n return;\n }\n\n this.lastPointerDownEvent = event; // we must exit before we set `cursorButton` state and `savePointer`\n // else it will send pointer state & laser pointer events in collab when\n // panning\n\n /*if (this.handleCanvasPanUsingWheelOrSpaceDrag(event)) {\r\n return;\r\n }*/\n //zsviczian this broke on pointer down in onPointerUpdate\n\n this.setState({\n lastPointerDownWith: event.pointerType,\n cursorButton: \"down\"\n });\n this.savePointer(event.clientX, event.clientY, \"down\");\n\n if (this.handleCanvasPanUsingWheelOrSpaceDrag(event)) {\n return;\n } //zsviczian moved it here, because else pointer down in onPointerUpdate did not work\n\n\n if (event.button === _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.ERASER && this.state.activeTool.type !== _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.eraser) {\n this.setState({\n activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateActiveTool)(this.state, {\n type: _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.eraser,\n lastActiveToolBeforeEraser: this.state.activeTool\n })\n }, () => {\n this.handleCanvasPointerDown(event);\n\n const onPointerUp = () => {\n unsubPointerUp();\n unsubCleanup === null || unsubCleanup === void 0 ? void 0 : unsubCleanup();\n\n if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state)) {\n this.setState({\n activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateActiveTool)(this.state, Object.assign(Object.assign({}, this.state.activeTool.lastActiveTool || {\n type: _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.selection\n }), {\n lastActiveToolBeforeEraser: null\n }))\n });\n }\n };\n\n const unsubPointerUp = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, onPointerUp, {\n once: true\n });\n let unsubCleanup; // subscribe inside rAF lest it'd be triggered on the same pointerdown\n // if we start erasing while coming from blurred document since\n // we cleanup pointer events on focus\n\n requestAnimationFrame(() => {\n unsubCleanup = this.missingPointerEventCleanupEmitter.once(onPointerUp);\n });\n });\n return;\n } // only handle left mouse button or touch\n\n\n if (event.button !== _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.MAIN && event.button !== _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.TOUCH && event.button !== _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.ERASER) {\n return;\n } // don't select while panning\n\n\n if (gesture.pointers.size > 1) {\n return;\n } // State for the duration of a pointer interaction, which starts with a\n // pointerDown event, ends with a pointerUp event (or another pointerDown)\n\n\n const pointerDownState = this.initialPointerDownState(event);\n this.setState({\n selectedElementsAreBeingDragged: false\n });\n\n if (this.handleDraggingScrollBar(event, pointerDownState)) {\n return;\n }\n\n this.clearSelectionIfNotUsingSelection();\n this.updateBindingEnabledOnPointerMove(event);\n\n if (this.handleSelectionOnPointerDown(event, pointerDownState)) {\n return;\n }\n\n const allowOnPointerDown = !this.state.penMode || event.pointerType !== \"touch\" || this.state.activeTool.type === \"selection\" || this.state.activeTool.type === \"text\" || this.state.activeTool.type === \"image\";\n\n if (!allowOnPointerDown) {\n return;\n }\n\n if (this.state.activeTool.type === \"text\") {\n this.handleTextOnPointerDown(event, pointerDownState);\n return;\n } else if (this.state.activeTool.type === \"arrow\" || this.state.activeTool.type === \"line\") {\n this.handleLinearElementOnPointerDown(event, this.state.activeTool.type, pointerDownState);\n } else if (this.state.activeTool.type === \"image\") {\n // reset image preview on pointerdown\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.CROSSHAIR); // retrieve the latest element as the state may be stale\n\n const pendingImageElement = this.state.pendingImageElementId && this.scene.getElement(this.state.pendingImageElementId);\n\n if (!pendingImageElement) {\n return;\n }\n\n this.setState({\n draggingElement: pendingImageElement,\n editingElement: pendingImageElement,\n pendingImageElementId: null,\n multiElement: null\n });\n const {\n x,\n y\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)(event, this.state);\n const frame = this.getTopLayerFrameAtSceneCoords({\n x,\n y\n });\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(pendingImageElement, {\n x,\n y,\n frameId: frame ? frame.id : null\n });\n } else if (this.state.activeTool.type === \"freedraw\") {\n this.handleFreeDrawElementOnPointerDown(event, this.state.activeTool.type, pointerDownState);\n } else if (this.state.activeTool.type === \"custom\") {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursorForShape)(this.interactiveCanvas, this.state);\n } else if (this.state.activeTool.type === _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.frame || this.state.activeTool.type === _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.magicframe) {\n this.createFrameElementOnPointerDown(pointerDownState, this.state.activeTool.type);\n } else if (this.state.activeTool.type === \"laser\") {\n this.laserTrails.startPath(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y);\n } else if (this.state.activeTool.type !== \"eraser\" && this.state.activeTool.type !== \"hand\" && this.state.activeTool.type !== \"mermaid\") {\n this.createGenericElementOnPointerDown(this.state.activeTool.type, pointerDownState);\n }\n\n (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.onPointerDown) === null || _b === void 0 ? void 0 : _b.call(_a, this.state.activeTool, pointerDownState);\n this.onPointerDownEmitter.trigger(this.state.activeTool, pointerDownState, event);\n\n if (this.state.activeTool.type === \"eraser\") {\n this.eraserTrail.startPath(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y);\n }\n\n const onPointerMove = this.onPointerMoveFromPointerDownHandler(pointerDownState);\n const onPointerUp = this.onPointerUpFromPointerDownHandler(pointerDownState);\n const onKeyDown = this.onKeyDownFromPointerDownHandler(pointerDownState);\n const onKeyUp = this.onKeyUpFromPointerDownHandler(pointerDownState);\n this.missingPointerEventCleanupEmitter.once(_event => onPointerUp(_event || event.nativeEvent));\n\n if (!this.state.viewModeEnabled || this.state.activeTool.type === \"laser\") {\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, onPointerMove);\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, onPointerUp);\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYDOWN, onKeyDown);\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYUP, onKeyUp);\n pointerDownState.eventListeners.onMove = onPointerMove;\n pointerDownState.eventListeners.onUp = onPointerUp;\n pointerDownState.eventListeners.onKeyUp = onKeyUp;\n pointerDownState.eventListeners.onKeyDown = onKeyDown;\n }\n };\n\n this.handleCanvasPointerUp = event => {\n var _a, _b;\n\n this.removePointer(event);\n this.lastPointerUpEvent = event;\n const scenePointer = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)({\n clientX: event.clientX,\n clientY: event.clientY\n }, this.state);\n const clicklength = event.timeStamp - ((_b = (_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a.timeStamp) !== null && _b !== void 0 ? _b : 0);\n\n if (this.device.editor.isMobile && clicklength < 300) {\n const hitElement = this.getElementAtPosition(scenePointer.x, scenePointer.y);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeLikeElement)(hitElement) && this.isIframeLikeElementCenter(hitElement, event, scenePointer.x, scenePointer.y)) {\n this.handleEmbeddableCenterClick(hitElement);\n return;\n }\n }\n\n if (this.device.isTouchScreen) {\n const hitElement = this.getElementAtPosition(scenePointer.x, scenePointer.y);\n this.hitLinkElement = this.getElementLinkAtPosition(scenePointer, hitElement);\n }\n\n if (this.hitLinkElement && !this.state.selectedElementIds[this.hitLinkElement.id]) {\n if (clicklength < 300 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeLikeElement)(this.hitLinkElement) && !(0,_hyperlink_helpers__WEBPACK_IMPORTED_MODULE_91__.isPointHittingLinkIcon)(this.hitLinkElement, this.scene.getNonDeletedElementsMap(), this.state, [scenePointer.x, scenePointer.y])) {\n this.handleEmbeddableCenterClick(this.hitLinkElement);\n } else {\n this.redirectToLink(event, this.device.isTouchScreen);\n }\n } else if (this.state.viewModeEnabled) {\n this.setState({\n activeEmbeddable: null,\n selectedElementIds: {}\n });\n }\n };\n\n this.maybeOpenContextMenuAfterPointerDownOnTouchDevices = event => {\n // deal with opening context menu on touch devices\n if (event.pointerType === \"touch\") {\n invalidateContextMenu = false;\n\n if (touchTimeout) {\n // If there's already a touchTimeout, this means that there's another\n // touch down and we are doing another touch, so we shouldn't open the\n // context menu.\n invalidateContextMenu = true;\n } else {\n // open the context menu with the first touch's clientX and clientY\n // if the touch is not moving\n touchTimeout = window.setTimeout(() => {\n touchTimeout = 0;\n\n if (!invalidateContextMenu) {\n this.handleCanvasContextMenu(event);\n }\n }, _constants__WEBPACK_IMPORTED_MODULE_12__.TOUCH_CTX_MENU_TIMEOUT);\n }\n }\n };\n\n this.resetContextMenuTimer = () => {\n clearTimeout(touchTimeout);\n touchTimeout = 0;\n invalidateContextMenu = false;\n };\n /**\r\n * pointerup may not fire in certian cases (user tabs away...), so in order\r\n * to properly cleanup pointerdown state, we need to fire any hanging\r\n * pointerup handlers manually\r\n */\n\n\n this.maybeCleanupAfterMissingPointerUp = event => {\n lastPointerUp === null || lastPointerUp === void 0 ? void 0 : lastPointerUp();\n this.missingPointerEventCleanupEmitter.trigger(event).clear();\n }; // Returns whether the event is a panning\n\n\n this.handleCanvasPanUsingWheelOrSpaceDrag = event => {\n if (!(gesture.pointers.size <= 1 && (event.button === _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.WHEEL || event.button === _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.MAIN && isHoldingSpace || (0,_appState__WEBPACK_IMPORTED_MODULE_10__.isHandToolActive)(this.state) || this.state.viewModeEnabled && !(0,_appState__WEBPACK_IMPORTED_MODULE_10__.isLaserPointerActive)(this.state))) || (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(this.state.editingElement)) {\n return false;\n }\n\n isPanning = true;\n event.preventDefault();\n let nextPastePrevented = false;\n const isLinux = typeof window === undefined ? false : /Linux/.test(window.navigator.platform);\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRABBING);\n let {\n clientX: lastX,\n clientY: lastY\n } = event;\n const onPointerMove = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdatesThrottled)(event => {\n const deltaX = lastX - event.clientX;\n const deltaY = lastY - event.clientY;\n lastX = event.clientX;\n lastY = event.clientY;\n /*\r\n * Prevent paste event if we move while middle clicking on Linux.\r\n * See issue #1383.\r\n */\n\n if (isLinux && !nextPastePrevented && (Math.abs(deltaX) > 1 || Math.abs(deltaY) > 1)) {\n nextPastePrevented = true;\n /* Prevent the next paste event */\n\n const preventNextPaste = event => {\n document.body.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.PASTE, preventNextPaste);\n event.stopPropagation();\n };\n /*\r\n * Reenable next paste in case of disabled middle click paste for\r\n * any reason:\r\n * - right click paste\r\n * - empty clipboard\r\n */\n\n\n const enableNextPaste = () => {\n setTimeout(() => {\n document.body.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.PASTE, preventNextPaste);\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, enableNextPaste);\n }, 100);\n };\n\n document.body.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.PASTE, preventNextPaste);\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, enableNextPaste);\n }\n\n this.translateCanvas({\n scrollX: this.state.scrollX - deltaX / this.state.zoom.value,\n scrollY: this.state.scrollY - deltaY / this.state.zoom.value\n });\n });\n const teardown = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(lastPointerUp = () => {\n lastPointerUp = null;\n isPanning = false;\n\n if (!isHoldingSpace) {\n if (this.state.viewModeEnabled) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n } else {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursorForShape)(this.interactiveCanvas, this.state);\n }\n }\n\n this.setState({\n cursorButton: \"up\"\n });\n this.savePointer(event.clientX, event.clientY, \"up\");\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, onPointerMove);\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, teardown);\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.BLUR, teardown);\n onPointerMove.flush();\n });\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.BLUR, teardown);\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, onPointerMove, {\n passive: true\n });\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, teardown);\n return true;\n };\n\n this.clearSelectionIfNotUsingSelection = () => {\n if (this.state.activeTool.type !== \"selection\") {\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, this.state),\n selectedGroupIds: {},\n editingGroupId: null,\n activeEmbeddable: null\n });\n }\n };\n /**\r\n * @returns whether the pointer event has been completely handled\r\n */\n\n\n this.handleSelectionOnPointerDown = (event, pointerDownState) => {\n var _a;\n\n if (this.state.activeTool.type === \"selection\") {\n const elements = this.scene.getNonDeletedElements();\n const elementsMap = this.scene.getNonDeletedElementsMap();\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (selectedElements.length === 1 && !this.state.editingLinearElement && !(this.state.selectedLinearElement && this.state.selectedLinearElement.hoverPointIndex !== -1)) {\n const elementWithTransformHandleType = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getElementWithTransformHandleType)(elements, this.state, pointerDownState.origin.x, pointerDownState.origin.y, this.state.zoom, event.pointerType, this.scene.getNonDeletedElementsMap(), this.device);\n\n if (elementWithTransformHandleType != null) {\n this.setState({\n resizingElement: elementWithTransformHandleType.element\n });\n pointerDownState.resize.handleType = elementWithTransformHandleType.transformHandleType;\n }\n } else if (selectedElements.length > 1) {\n pointerDownState.resize.handleType = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getTransformHandleTypeFromCoords)((0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(selectedElements), pointerDownState.origin.x, pointerDownState.origin.y, this.state.zoom, event.pointerType, this.device);\n }\n\n if (pointerDownState.resize.handleType) {\n pointerDownState.resize.isResizing = true;\n pointerDownState.resize.offset = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.tupleToCoors)((0,_element__WEBPACK_IMPORTED_MODULE_16__.getResizeOffsetXY)(pointerDownState.resize.handleType, selectedElements, elementsMap, pointerDownState.origin.x, pointerDownState.origin.y));\n\n if (selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(selectedElements[0]) && selectedElements[0].points.length === 2) {\n pointerDownState.resize.arrowDirection = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getResizeArrowDirection)(pointerDownState.resize.handleType, selectedElements[0]);\n }\n } else {\n if (this.state.selectedLinearElement) {\n const linearElementEditor = this.state.editingLinearElement || this.state.selectedLinearElement;\n const ret = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handlePointerDown(event, this.state, this.store, pointerDownState.origin, linearElementEditor, this);\n\n if (ret.hitElement) {\n pointerDownState.hit.element = ret.hitElement;\n }\n\n if (ret.linearElementEditor) {\n this.setState({\n selectedLinearElement: ret.linearElementEditor\n });\n\n if (this.state.editingLinearElement) {\n this.setState({\n editingLinearElement: ret.linearElementEditor\n });\n }\n }\n\n if (ret.didAddPoint) {\n return true;\n }\n } // hitElement may already be set above, so check first\n\n\n pointerDownState.hit.element = (_a = pointerDownState.hit.element) !== null && _a !== void 0 ? _a : this.getElementAtPosition(pointerDownState.origin.x, pointerDownState.origin.y);\n\n if (pointerDownState.hit.element) {\n // Early return if pointer is hitting link icon\n const hitLinkElement = this.getElementLinkAtPosition({\n x: pointerDownState.origin.x,\n y: pointerDownState.origin.y\n }, pointerDownState.hit.element);\n\n if (hitLinkElement) {\n return false;\n }\n } // For overlapped elements one position may hit\n // multiple elements\n\n\n pointerDownState.hit.allHitElements = this.getElementsAtPosition(pointerDownState.origin.x, pointerDownState.origin.y);\n const hitElement = pointerDownState.hit.element;\n const someHitElementIsSelected = pointerDownState.hit.allHitElements.some(element => this.isASelectedElement(element));\n\n if ((hitElement === null || !someHitElementIsSelected) && !event.shiftKey && !pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements) {\n this.clearSelection(hitElement);\n }\n\n if (this.state.editingLinearElement) {\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({\n [this.state.editingLinearElement.elementId]: true\n }, this.state)\n }); // If we click on something\n } else if (hitElement != null) {\n // on CMD/CTRL, drill down to hit element regardless of groups etc.\n if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n if (!this.state.selectedElementIds[hitElement.id]) {\n pointerDownState.hit.wasAddedToSelection = true;\n }\n\n this.setState(prevState => Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.editGroupForSelectedElement)(prevState, hitElement)), {\n previousSelectedElementIds: this.state.selectedElementIds\n })); // mark as not completely handled so as to allow dragging etc.\n\n return false;\n } // deselect if item is selected\n // if shift is not clicked, this will always return true\n // otherwise, it will trigger selection based on current\n // state of the box\n\n\n if (!this.state.selectedElementIds[hitElement.id]) {\n // if we are currently editing a group, exiting editing mode and deselect the group.\n if (this.state.editingGroupId && !(0,_groups__WEBPACK_IMPORTED_MODULE_23__.isElementInGroup)(hitElement, this.state.editingGroupId)) {\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, this.state),\n selectedGroupIds: {},\n editingGroupId: null,\n activeEmbeddable: null\n });\n } // Add hit element to selection. At this point if we're not holding\n // SHIFT the previously selected element(s) were deselected above\n // (make sure you use setState updater to use latest state)\n // With shift-selection, we want to make sure that frames and their containing\n // elements are not selected at the same time.\n\n\n if (!someHitElementIsSelected && !pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements) {\n this.setState(prevState => {\n const nextSelectedElementIds = Object.assign(Object.assign({}, prevState.selectedElementIds), {\n [hitElement.id]: true\n });\n const previouslySelectedElements = [];\n Object.keys(prevState.selectedElementIds).forEach(id => {\n const element = this.scene.getElement(id);\n element && previouslySelectedElements.push(element);\n }); // if hitElement is frame-like, deselect all of its elements\n // if they are selected\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(hitElement)) {\n (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getFrameChildren)(previouslySelectedElements, hitElement.id).forEach(element => {\n delete nextSelectedElementIds[element.id];\n });\n } else if (hitElement.frameId) {\n // if hitElement is in a frame and its frame has been selected\n // disable selection for the given element\n if (nextSelectedElementIds[hitElement.frameId]) {\n delete nextSelectedElementIds[hitElement.id];\n }\n } else {\n // hitElement is neither a frame nor an element in a frame\n // but since hitElement could be in a group with some frames\n // this means selecting hitElement will have the frames selected as well\n // because we want to keep the invariant:\n // - frames and their elements are not selected at the same time\n // we deselect elements in those frames that were previously selected\n const groupIds = hitElement.groupIds;\n const framesInGroups = new Set(groupIds.flatMap(gid => (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(this.scene.getNonDeletedElements(), gid)).filter(element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(element)).map(frame => frame.id));\n\n if (framesInGroups.size > 0) {\n previouslySelectedElements.forEach(element => {\n if (element.frameId && framesInGroups.has(element.frameId)) {\n // deselect element and groups containing the element\n delete nextSelectedElementIds[element.id];\n element.groupIds.flatMap(gid => (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(this.scene.getNonDeletedElements(), gid)).forEach(element => {\n delete nextSelectedElementIds[element.id];\n });\n }\n });\n }\n }\n\n return Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n editingGroupId: prevState.editingGroupId,\n selectedElementIds: nextSelectedElementIds\n }, this.scene.getNonDeletedElements(), prevState, this)), {\n showHyperlinkPopup: hitElement.link || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(hitElement) ? \"info\" : false\n });\n });\n pointerDownState.hit.wasAddedToSelection = true;\n }\n }\n }\n\n this.setState({\n previousSelectedElementIds: this.state.selectedElementIds\n });\n }\n }\n\n return false;\n };\n\n this.handleTextOnPointerDown = (event, pointerDownState) => {\n // if we're currently still editing text, clicking outside\n // should only finalize it, not create another (irrespective\n // of state.activeTool.locked)\n if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(this.state.editingElement)) {\n return;\n }\n\n let sceneX = pointerDownState.origin.x;\n let sceneY = pointerDownState.origin.y;\n const element = this.getElementAtPosition(sceneX, sceneY, {\n includeBoundTextElement: true\n }); // FIXME\n\n let container = this.getTextBindableContainerAtPosition(sceneX, sceneY);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.hasBoundTextElement)(element)) {\n container = element;\n sceneX = element.x + element.width / 2;\n sceneY = element.y + element.height / 2;\n }\n\n this.startTextEditing({\n sceneX,\n sceneY,\n insertAtParentCenter: !event.altKey,\n container\n });\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.resetCursor)(this.interactiveCanvas);\n\n if (!this.state.activeTool.locked) {\n this.setState({\n activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateActiveTool)(this.state, {\n type: \"selection\"\n })\n });\n }\n };\n\n this.handleFreeDrawElementOnPointerDown = (event, elementType, pointerDownState) => {\n // Begin a mark capture. This does not have to update state yet.\n const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerDownState.origin.x, pointerDownState.origin.y, null);\n const strokeOptions = this.state.currentStrokeOptions; //zsviczian\n\n const simulatePressure = (strokeOptions === null || strokeOptions === void 0 ? void 0 : strokeOptions.constantPressure) ? false : event.pressure === 0.5;\n const topLayerFrame = this.getTopLayerFrameAtSceneCoords({\n x: gridX,\n y: gridY\n });\n const element = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newFreeDrawElement)(Object.assign(Object.assign({\n type: elementType,\n x: gridX,\n y: gridY,\n strokeColor: this.state.currentItemStrokeColor,\n backgroundColor: this.state.currentItemBackgroundColor,\n fillStyle: this.state.currentItemFillStyle,\n strokeWidth: this.state.currentItemStrokeWidth,\n strokeStyle: this.state.currentItemStrokeStyle,\n roughness: this.state.currentItemRoughness,\n opacity: this.state.currentItemOpacity,\n roundness: null,\n simulatePressure,\n locked: false\n }, strokeOptions //zsviczian\n ? {\n customData: {\n strokeOptions\n }\n } : {}), {\n frameId: topLayerFrame ? topLayerFrame.id : null\n }));\n this.setState(prevState => {\n const nextSelectedElementIds = Object.assign({}, prevState.selectedElementIds);\n delete nextSelectedElementIds[element.id];\n return {\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(nextSelectedElementIds, prevState)\n };\n });\n const pressures = element.simulatePressure ? element.pressures : [//zsviczian\n ...element.pressures, (strokeOptions === null || strokeOptions === void 0 ? void 0 : strokeOptions.constantPressure) ? 1 : event.pressure];\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n points: [[0, 0]],\n pressures\n });\n const boundElement = (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getHoveredElementForBinding)(pointerDownState.origin, this);\n\n if (strokeOptions === null || strokeOptions === void 0 ? void 0 : strokeOptions.highlighter) {\n //zsviczian\n this.scene.insertElement(element, 0);\n /* this.scene.replaceAllElements([\r\n element,\r\n ...this.scene.getElementsIncludingDeleted(),\r\n ]);*/\n } else {\n this.scene.insertElement(element);\n }\n\n this.setState({\n draggingElement: element,\n editingElement: element,\n startBoundElement: boundElement,\n suggestedBindings: []\n });\n };\n\n this.insertIframeElement = ({\n sceneX,\n sceneY,\n width,\n height\n }) => {\n var _a;\n\n const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(sceneX, sceneY, ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) ? null : this.state.gridSize);\n const element = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newIframeElement)({\n type: \"iframe\",\n x: gridX,\n y: gridY,\n strokeColor: \"transparent\",\n backgroundColor: \"transparent\",\n fillStyle: this.state.currentItemFillStyle,\n strokeWidth: this.state.currentItemStrokeWidth,\n strokeStyle: this.state.currentItemStrokeStyle,\n roughness: this.state.currentItemRoughness,\n roundness: this.getCurrentItemRoundness(\"iframe\"),\n opacity: this.state.currentItemOpacity,\n locked: false,\n width,\n height\n });\n this.scene.insertElement(element);\n return element;\n }; //create rectangle element with youtube top left on nearest grid point width / hight 640/360\n\n\n this.insertEmbeddableElement = ({\n sceneX,\n sceneY,\n link\n }) => {\n var _a;\n\n const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(sceneX, sceneY, ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) ? null : this.state.gridSize);\n const embedLink = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_36__.getEmbedLink)(link);\n\n if (!embedLink) {\n return;\n }\n\n if (embedLink.error instanceof URIError) {\n this.setToast({\n message: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"toast.unrecognizedLinkFormat\"),\n closable: true\n });\n }\n\n const element = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newEmbeddableElement)({\n type: \"embeddable\",\n x: gridX,\n y: gridY,\n strokeColor: \"transparent\",\n backgroundColor: \"transparent\",\n fillStyle: this.state.currentItemFillStyle,\n strokeWidth: this.state.currentItemStrokeWidth,\n strokeStyle: this.state.currentItemStrokeStyle,\n roughness: this.state.currentItemRoughness,\n roundness: this.getCurrentItemRoundness(\"embeddable\"),\n opacity: this.state.currentItemOpacity,\n locked: false,\n width: embedLink.intrinsicSize.w,\n height: embedLink.intrinsicSize.h,\n link\n });\n this.scene.insertElement(element);\n return element;\n };\n\n this.createImageElement = ({\n sceneX,\n sceneY,\n addToFrameUnderCursor = true\n }) => {\n var _a;\n\n const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(sceneX, sceneY, ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) ? null : this.state.gridSize);\n const topLayerFrame = addToFrameUnderCursor ? this.getTopLayerFrameAtSceneCoords({\n x: gridX,\n y: gridY\n }) : null;\n const element = (0,_element__WEBPACK_IMPORTED_MODULE_16__.newImageElement)({\n type: \"image\",\n x: gridX,\n y: gridY,\n strokeColor: this.state.currentItemStrokeColor,\n backgroundColor: this.state.currentItemBackgroundColor,\n fillStyle: this.state.currentItemFillStyle,\n strokeWidth: this.state.currentItemStrokeWidth,\n strokeStyle: this.state.currentItemStrokeStyle,\n roughness: this.state.currentItemRoughness,\n roundness: null,\n opacity: this.state.currentItemOpacity,\n locked: false,\n frameId: topLayerFrame ? topLayerFrame.id : null\n });\n return element;\n };\n\n this.handleLinearElementOnPointerDown = (event, elementType, pointerDownState) => {\n if (this.state.multiElement) {\n const {\n multiElement\n } = this.state; // finalize if completing a loop\n\n if (multiElement.type === \"line\" && (0,_math__WEBPACK_IMPORTED_MODULE_28__.isPathALoop)(multiElement.points, this.state.zoom.value)) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(multiElement, {\n lastCommittedPoint: multiElement.points[multiElement.points.length - 1]\n });\n this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n return;\n }\n\n const {\n x: rx,\n y: ry,\n lastCommittedPoint\n } = multiElement; // clicking inside commit zone → finalize arrow\n\n if (multiElement.points.length > 1 && lastCommittedPoint && (0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(pointerDownState.origin.x - rx, pointerDownState.origin.y - ry, lastCommittedPoint[0], lastCommittedPoint[1]) < _constants__WEBPACK_IMPORTED_MODULE_12__.LINE_CONFIRM_THRESHOLD) {\n this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n return;\n }\n\n this.setState(prevState => ({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(Object.assign(Object.assign({}, prevState.selectedElementIds), {\n [multiElement.id]: true\n }), prevState)\n })); // clicking outside commit zone → update reference for last committed\n // point\n\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(multiElement, {\n lastCommittedPoint: multiElement.points[multiElement.points.length - 1]\n });\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n } else {\n const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerDownState.origin.x, pointerDownState.origin.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.state.gridSize);\n const topLayerFrame = this.getTopLayerFrameAtSceneCoords({\n x: gridX,\n y: gridY\n });\n /* If arrow is pre-arrowheads, it will have undefined for both start and end arrowheads.\r\n If so, we want it to be null for start and \"arrow\" for end. If the linear item is not\r\n an arrow, we want it to be null for both. Otherwise, we want it to use the\r\n values from appState. */\n\n const {\n currentItemStartArrowhead,\n currentItemEndArrowhead\n } = this.state;\n const [startArrowhead, endArrowhead] = elementType === \"arrow\" ? [currentItemStartArrowhead, currentItemEndArrowhead] : [null, null];\n const element = (0,_element__WEBPACK_IMPORTED_MODULE_16__.newLinearElement)({\n type: elementType,\n x: gridX,\n y: gridY,\n strokeColor: this.state.currentItemStrokeColor,\n backgroundColor: this.state.currentItemBackgroundColor,\n fillStyle: this.state.currentItemFillStyle,\n strokeWidth: this.state.currentItemStrokeWidth,\n strokeStyle: this.state.currentItemStrokeStyle,\n roughness: this.state.currentItemRoughness,\n opacity: this.state.currentItemOpacity,\n roundness: this.state.currentItemRoundness === \"round\" ? {\n type: _constants__WEBPACK_IMPORTED_MODULE_12__.ROUNDNESS.PROPORTIONAL_RADIUS\n } : null,\n startArrowhead,\n endArrowhead,\n locked: false,\n frameId: topLayerFrame ? topLayerFrame.id : null\n });\n this.setState(prevState => {\n const nextSelectedElementIds = Object.assign({}, prevState.selectedElementIds);\n delete nextSelectedElementIds[element.id];\n return {\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(nextSelectedElementIds, prevState)\n };\n });\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n points: [...element.points, [0, 0]]\n });\n const boundElement = (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getHoveredElementForBinding)(pointerDownState.origin, this);\n this.scene.insertElement(element);\n this.setState({\n draggingElement: element,\n editingElement: element,\n startBoundElement: boundElement,\n suggestedBindings: []\n });\n }\n };\n\n this.createGenericElementOnPointerDown = (elementType, pointerDownState) => {\n var _a;\n\n const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerDownState.origin.x, pointerDownState.origin.y, ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) ? null : this.state.gridSize);\n const topLayerFrame = this.getTopLayerFrameAtSceneCoords({\n x: gridX,\n y: gridY\n });\n const baseElementAttributes = {\n x: gridX,\n y: gridY,\n strokeColor: this.state.currentItemStrokeColor,\n backgroundColor: this.state.currentItemBackgroundColor,\n fillStyle: this.state.currentItemFillStyle,\n strokeWidth: this.state.currentItemStrokeWidth,\n strokeStyle: this.state.currentItemStrokeStyle,\n roughness: this.state.currentItemRoughness,\n opacity: this.state.currentItemOpacity,\n roundness: this.getCurrentItemRoundness(elementType),\n locked: false,\n frameId: topLayerFrame ? topLayerFrame.id : null\n };\n let element;\n\n if (elementType === \"embeddable\") {\n element = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newEmbeddableElement)(Object.assign({\n type: \"embeddable\"\n }, baseElementAttributes));\n } else {\n element = (0,_element__WEBPACK_IMPORTED_MODULE_16__.newElement)(Object.assign({\n type: elementType\n }, baseElementAttributes));\n }\n\n if (element.type === \"selection\") {\n this.setState({\n selectionElement: element,\n draggingElement: element\n });\n } else {\n this.scene.insertElement(element);\n this.setState({\n multiElement: null,\n draggingElement: element,\n editingElement: element\n });\n }\n };\n\n this.createFrameElementOnPointerDown = (pointerDownState, type) => {\n var _a;\n\n const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerDownState.origin.x, pointerDownState.origin.y, ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) ? null : this.state.gridSize);\n const constructorOpts = Object.assign(Object.assign({\n x: gridX,\n y: gridY,\n opacity: this.state.currentItemOpacity,\n locked: false\n }, _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE), this.state.frameColor ? {\n //zsviczian\n customData: {\n frameColor: this.state.frameColor\n }\n } : {});\n const frame = type === _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.magicframe ? (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newMagicFrameElement)(constructorOpts) : (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newFrameElement)(constructorOpts);\n this.scene.insertElement(frame);\n this.setState({\n multiElement: null,\n draggingElement: frame,\n editingElement: frame\n });\n };\n\n this.restoreReadyToEraseElements = () => {\n this.elementsPendingErasure = new Set();\n this.triggerRender();\n };\n\n this.eraseElements = () => {\n let didChange = false;\n const elements = this.scene.getElementsIncludingDeleted().map(ele => {\n if (this.elementsPendingErasure.has(ele.id) || ele.frameId && this.elementsPendingErasure.has(ele.frameId) || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(ele) && this.elementsPendingErasure.has(ele.containerId)) {\n didChange = true;\n return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(ele, {\n isDeleted: true\n });\n }\n\n return ele;\n });\n this.elementsPendingErasure = new Set();\n\n if (didChange) {\n this.store.shouldCaptureIncrement();\n this.scene.replaceAllElements(elements);\n }\n };\n\n this.initializeImage = async ({\n imageFile,\n imageElement: _imageElement,\n showCursorImagePreview = false\n }) => {\n var _a, _b, _c, _d; // at this point this should be guaranteed image file, but we do this check\n // to satisfy TS down the line\n\n\n if (!(0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.isSupportedImageFile)(imageFile)) {\n throw new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.unsupportedFileType\"));\n }\n\n const mimeType = imageFile.type;\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, \"wait\");\n\n if (mimeType === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.svg) {\n try {\n imageFile = (0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.SVGStringToFile)(await (0,_element_image__WEBPACK_IMPORTED_MODULE_42__.normalizeSVG)(await imageFile.text()), imageFile.name);\n } catch (error) {\n console.warn(error);\n throw new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.svgImageInsertError\"));\n }\n } // generate image id (by default the file digest) before any\n // resizing/compression takes place to keep it more portable\n\n\n const fileId = await (((_b = (_a = this.props).generateIdForFile) === null || _b === void 0 ? void 0 : _b.call(_a, imageFile)) || (0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.generateIdFromFile)(imageFile));\n\n if (!fileId) {\n console.warn(\"Couldn't generate file id or the supplied `generateIdForFile` didn't resolve to one.\");\n throw new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageInsertError\"));\n }\n\n const existingFileData = this.files[fileId];\n\n if (!(existingFileData === null || existingFileData === void 0 ? void 0 : existingFileData.dataURL)) {\n try {\n imageFile = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.resizeImageFile)(imageFile, {\n maxWidthOrHeight: _constants__WEBPACK_IMPORTED_MODULE_12__.DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT\n });\n } catch (error) {\n console.error(\"Error trying to resizing image file on insertion\", error);\n }\n\n if (imageFile.size > _constants__WEBPACK_IMPORTED_MODULE_12__.MAX_ALLOWED_FILE_BYTES) {\n throw new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.fileTooBig\", {\n maxSize: `${Math.trunc(_constants__WEBPACK_IMPORTED_MODULE_12__.MAX_ALLOWED_FILE_BYTES / 1024 / 1024)}MB`\n }));\n }\n }\n\n if (showCursorImagePreview) {\n const dataURL = (_c = this.files[fileId]) === null || _c === void 0 ? void 0 : _c.dataURL; // optimization so that we don't unnecessarily resize the original\n // full-size file for cursor preview\n // (it's much faster to convert the resized dataURL to File)\n\n const resizedFile = dataURL && (0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.dataURLToFile)(dataURL);\n this.setImagePreviewCursor(resizedFile || imageFile);\n }\n\n const dataURL = ((_d = this.files[fileId]) === null || _d === void 0 ? void 0 : _d.dataURL) || (await (0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.getDataURL)(imageFile));\n const imageElement = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(_imageElement, {\n fileId\n }, false);\n return new Promise(async (resolve, reject) => {\n var _a;\n\n try {\n this.files = Object.assign(Object.assign({}, this.files), {\n [fileId]: {\n mimeType,\n id: fileId,\n dataURL,\n created: Date.now(),\n lastRetrieved: Date.now()\n }\n });\n const cachedImageData = this.imageCache.get(fileId);\n\n if (!cachedImageData) {\n this.addNewImagesToImageCache();\n await this.updateImageCache([imageElement]);\n }\n\n if ((cachedImageData === null || cachedImageData === void 0 ? void 0 : cachedImageData.image) instanceof Promise) {\n await cachedImageData.image;\n }\n\n if (this.state.pendingImageElementId !== imageElement.id && ((_a = this.state.draggingElement) === null || _a === void 0 ? void 0 : _a.id) !== imageElement.id) {\n this.initializeImageDimensions(imageElement, true);\n }\n\n resolve(imageElement);\n } catch (error) {\n console.error(error);\n reject(new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageInsertError\")));\n } finally {\n if (!showCursorImagePreview) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.resetCursor)(this.interactiveCanvas);\n }\n }\n });\n };\n /**\r\n * inserts image into elements array and rerenders\r\n */\n\n\n this.insertImageElement = async (imageElement, imageFile, showCursorImagePreview) => {\n // we should be handling all cases upstream, but in case we forget to handle\n // a future case, let's throw here\n if (!this.isToolSupported(\"image\")) {\n this.setState({\n errorMessage: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageToolNotSupported\")\n });\n return;\n }\n\n this.scene.insertElement(imageElement);\n\n try {\n return await this.initializeImage({\n imageFile,\n imageElement,\n showCursorImagePreview\n });\n } catch (error) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(imageElement, {\n isDeleted: true\n });\n this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n this.setState({\n errorMessage: error.message || (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageInsertError\")\n });\n return null;\n }\n };\n\n this.setImagePreviewCursor = async imageFile => {\n // mustn't be larger than 128 px\n // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property\n const cursorImageSizePx = 96;\n let imagePreview;\n\n try {\n imagePreview = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.resizeImageFile)(imageFile, {\n maxWidthOrHeight: cursorImageSizePx\n });\n } catch (e) {\n if (e.cause === \"UNSUPPORTED\") {\n throw new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.unsupportedFileType\"));\n }\n\n throw e;\n }\n\n let previewDataURL = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.getDataURL)(imagePreview); // SVG cannot be resized via `resizeImageFile` so we resize by rendering to\n // a small canvas\n\n if (imageFile.type === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.svg) {\n const img = await (0,_element_image__WEBPACK_IMPORTED_MODULE_42__.loadHTMLImageElement)(previewDataURL);\n let height = Math.min(img.height, cursorImageSizePx);\n let width = height * (img.width / img.height);\n\n if (width > cursorImageSizePx) {\n width = cursorImageSizePx;\n height = width * (img.height / img.width);\n }\n\n const canvas = document.createElement(\"canvas\");\n canvas.height = height;\n canvas.width = width;\n const context = canvas.getContext(\"2d\");\n context.drawImage(img, 0, 0, width, height);\n previewDataURL = canvas.toDataURL(_constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.svg);\n }\n\n if (this.state.pendingImageElementId) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, `url(${previewDataURL}) 4 4, auto`);\n }\n };\n\n this.onImageAction = async ({\n insertOnCanvasDirectly\n }) => {\n try {\n const clientX = this.state.width / 2 + this.state.offsetLeft;\n const clientY = this.state.height / 2 + this.state.offsetTop;\n const {\n x,\n y\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)({\n clientX,\n clientY\n }, this.state);\n const imageFile = await (0,_data_filesystem__WEBPACK_IMPORTED_MODULE_44__.fileOpen)({\n description: \"Image\",\n extensions: Object.keys(_constants__WEBPACK_IMPORTED_MODULE_12__.IMAGE_MIME_TYPES)\n });\n const imageElement = this.createImageElement({\n sceneX: x,\n sceneY: y,\n addToFrameUnderCursor: false\n });\n\n if (insertOnCanvasDirectly) {\n this.insertImageElement(imageElement, imageFile);\n this.initializeImageDimensions(imageElement);\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({\n [imageElement.id]: true\n }, this.state)\n }, () => {\n this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n });\n } else {\n this.setState({\n pendingImageElementId: imageElement.id\n }, () => {\n this.insertImageElement(imageElement, imageFile,\n /* showCursorImagePreview */\n true);\n });\n }\n } catch (error) {\n if (error.name !== \"AbortError\") {\n console.error(error);\n } else {\n console.warn(error);\n }\n\n this.setState({\n pendingImageElementId: null,\n editingElement: null,\n activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateActiveTool)(this.state, {\n type: \"selection\"\n })\n }, () => {\n this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n });\n }\n };\n\n this.initializeImageDimensions = (imageElement, forceNaturalSize = false) => {\n var _a;\n\n const image = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isInitializedImageElement)(imageElement) && ((_a = this.imageCache.get(imageElement.fileId)) === null || _a === void 0 ? void 0 : _a.image);\n\n if (!image || image instanceof Promise) {\n if (imageElement.width < _constants__WEBPACK_IMPORTED_MODULE_12__.DRAGGING_THRESHOLD / this.state.zoom.value && imageElement.height < _constants__WEBPACK_IMPORTED_MODULE_12__.DRAGGING_THRESHOLD / this.state.zoom.value) {\n const placeholderSize = 100 / this.state.zoom.value;\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(imageElement, {\n x: imageElement.x - placeholderSize / 2,\n y: imageElement.y - placeholderSize / 2,\n width: placeholderSize,\n height: placeholderSize\n });\n }\n\n return;\n }\n\n if (forceNaturalSize || // if user-created bounding box is below threshold, assume the\n // intention was to click instead of drag, and use the image's\n // intrinsic size\n imageElement.width < _constants__WEBPACK_IMPORTED_MODULE_12__.DRAGGING_THRESHOLD / this.state.zoom.value && imageElement.height < _constants__WEBPACK_IMPORTED_MODULE_12__.DRAGGING_THRESHOLD / this.state.zoom.value) {\n const minHeight = Math.max(this.state.height - 120, 160); // max 65% of canvas height, clamped to <300px, vh - 120px>\n\n const maxHeight = Math.min(minHeight, Math.floor(this.state.height * 0.5) / this.state.zoom.value);\n const height = Math.min(image.naturalHeight, maxHeight);\n const width = height * (image.naturalWidth / image.naturalHeight); // add current imageElement width/height to account for previous centering\n // of the placeholder image\n\n const x = imageElement.x + imageElement.width / 2 - width / 2;\n const y = imageElement.y + imageElement.height / 2 - height / 2;\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(imageElement, {\n x,\n y,\n width,\n height\n });\n }\n };\n /** updates image cache, refreshing updated elements and/or setting status\r\n to error for images that fail during <img> element creation */\n\n\n this.updateImageCache = async (elements, files = this.files) => {\n const {\n updatedFiles,\n erroredFiles\n } = await (0,_element_image__WEBPACK_IMPORTED_MODULE_42__.updateImageCache)({\n imageCache: this.imageCache,\n fileIds: elements.map(element => element.fileId),\n files\n });\n\n if (updatedFiles.size || erroredFiles.size) {\n for (const element of elements) {\n if (updatedFiles.has(element.fileId)) {\n _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_67__.ShapeCache[\"delete\"](element);\n }\n }\n }\n\n if (erroredFiles.size) {\n this.scene.replaceAllElements(this.scene.getElementsIncludingDeleted().map(element => {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isInitializedImageElement)(element) && erroredFiles.has(element.fileId)) {\n return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(element, {\n status: \"error\"\n });\n }\n\n return element;\n }));\n }\n\n return {\n updatedFiles,\n erroredFiles\n };\n };\n /** adds new images to imageCache and re-renders if needed */\n\n\n this.addNewImagesToImageCache = async (imageElements = (0,_element_image__WEBPACK_IMPORTED_MODULE_42__.getInitializedImageElements)(this.scene.getNonDeletedElements()), files = this.files) => {\n const uncachedImageElements = imageElements.filter(element => !element.isDeleted && !this.imageCache.has(element.fileId));\n\n if (uncachedImageElements.length) {\n const {\n updatedFiles\n } = await this.updateImageCache(uncachedImageElements, files);\n\n if (updatedFiles.size) {\n this.scene.triggerUpdate();\n }\n }\n };\n /** generally you should use `addNewImagesToImageCache()` directly if you need\r\n * to render new images. This is just a failsafe */\n\n\n this.scheduleImageRefresh = lodash_throttle__WEBPACK_IMPORTED_MODULE_43___default()(() => {\n this.addNewImagesToImageCache();\n }, _constants__WEBPACK_IMPORTED_MODULE_12__.IMAGE_RENDER_TIMEOUT);\n\n this.updateBindingEnabledOnPointerMove = event => {\n const shouldEnableBinding = (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.shouldEnableBindingForPointerEvent)(event);\n\n if (this.state.isBindingEnabled !== shouldEnableBinding) {\n this.setState({\n isBindingEnabled: shouldEnableBinding\n });\n }\n };\n\n this.maybeSuggestBindingAtCursor = pointerCoords => {\n const hoveredBindableElement = (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getHoveredElementForBinding)(pointerCoords, this);\n this.setState({\n suggestedBindings: hoveredBindableElement != null ? [hoveredBindableElement] : []\n });\n };\n\n this.maybeSuggestBindingsForLinearElementAtCoords = (linearElement,\n /** scene coords */\n pointerCoords, // During line creation the start binding hasn't been written yet\n // into `linearElement`\n oppositeBindingBoundElement) => {\n if (!pointerCoords.length) {\n return;\n }\n\n const suggestedBindings = pointerCoords.reduce((acc, coords) => {\n const hoveredBindableElement = (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getHoveredElementForBinding)(coords, this);\n\n if (hoveredBindableElement != null && !(0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.isLinearElementSimpleAndAlreadyBound)(linearElement, oppositeBindingBoundElement === null || oppositeBindingBoundElement === void 0 ? void 0 : oppositeBindingBoundElement.id, hoveredBindableElement)) {\n acc.push(hoveredBindableElement);\n }\n\n return acc;\n }, []);\n this.setState({\n suggestedBindings\n });\n };\n\n this.handleInteractiveCanvasRef = canvas => {\n var _a, _b, _c; // canvas is null when unmounting\n\n\n if (canvas !== null) {\n this.interactiveCanvas = canvas; // -----------------------------------------------------------------------\n // NOTE wheel, touchstart, touchend events must be registered outside\n // of react because react binds them them passively (so we can't prevent\n // default on them)\n\n this.interactiveCanvas.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.WHEEL, this.handleWheel);\n this.interactiveCanvas.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.TOUCH_START, this.onTouchStart);\n this.interactiveCanvas.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.TOUCH_END, this.onTouchEnd); // -----------------------------------------------------------------------\n } else {\n (_a = this.interactiveCanvas) === null || _a === void 0 ? void 0 : _a.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.WHEEL, this.handleWheel);\n (_b = this.interactiveCanvas) === null || _b === void 0 ? void 0 : _b.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.TOUCH_START, this.onTouchStart);\n (_c = this.interactiveCanvas) === null || _c === void 0 ? void 0 : _c.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.TOUCH_END, this.onTouchEnd);\n }\n };\n\n this.handleAppOnDrop = async event => {\n var _a, _b, _c, _d;\n\n if (this.props.onDrop) {\n try {\n if ((await this.props.onDrop(event)) === false) {\n return;\n }\n } catch (e) {\n console.error(e);\n }\n } // must be retrieved first, in the same frame\n\n\n const {\n file,\n fileHandle\n } = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.getFileFromEvent)(event);\n const {\n x: sceneX,\n y: sceneY\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)(event, this.state);\n\n try {\n // if image tool not supported, don't show an error here and let it fall\n // through so we still support importing scene data from images. If no\n // scene data encoded, we'll show an error then\n if ((0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.isSupportedImageFile)(file) && this.isToolSupported(\"image\")) {\n // first attempt to decode scene from the image if it's embedded\n // ---------------------------------------------------------------------\n if ((file === null || file === void 0 ? void 0 : file.type) === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.png || (file === null || file === void 0 ? void 0 : file.type) === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.svg) {\n try {\n const scene = await (0,_data__WEBPACK_IMPORTED_MODULE_13__.loadFromBlob)(file, this.state, this.scene.getElementsIncludingDeleted(), fileHandle);\n this.syncActionResult(Object.assign(Object.assign({}, scene), {\n appState: Object.assign(Object.assign({}, scene.appState || this.state), {\n isLoading: false\n }),\n replaceFiles: true,\n storeAction: _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.CAPTURE\n }));\n return;\n } catch (error) {\n // Don't throw for image scene daa\n if (error.name !== \"EncodingError\") {\n throw new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"alerts.couldNotLoadInvalidFile\"));\n }\n }\n } // if no scene is embedded or we fail for whatever reason, fall back\n // to importing as regular image\n // ---------------------------------------------------------------------\n\n\n const imageElement = this.createImageElement({\n sceneX,\n sceneY\n });\n this.insertImageElement(imageElement, file);\n this.initializeImageDimensions(imageElement);\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({\n [imageElement.id]: true\n }, this.state)\n });\n return;\n }\n } catch (error) {\n return this.setState({\n isLoading: false,\n errorMessage: error.message\n });\n }\n\n const libraryJSON = event.dataTransfer.getData(_constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.excalidrawlib);\n\n if (libraryJSON && typeof libraryJSON === \"string\") {\n try {\n const libraryItems = (0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.parseLibraryJSON)(libraryJSON);\n this.addElementsFromPasteOrLibrary({\n elements: (0,_data_library__WEBPACK_IMPORTED_MODULE_14__.distributeLibraryItemsOnSquareGrid)(libraryItems),\n position: event,\n files: null\n });\n } catch (error) {\n this.setState({\n errorMessage: error.message\n });\n }\n\n return;\n }\n\n if (file) {\n // Attempt to parse an excalidraw/excalidrawlib file\n await this.loadFileToCanvas(file, fileHandle);\n }\n\n if ((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) === null || _b === void 0 ? void 0 : _b.includes(\"text/plain\")) {\n const text = (_c = event.dataTransfer) === null || _c === void 0 ? void 0 : _c.getData(\"text\");\n\n if (text && (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_36__.embeddableURLValidator)(text, this.props.validateEmbeddable) && (/^(http|https):\\/\\/[^\\s/$.?#].[^\\s]*$/.test(text) || ((_d = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_36__.getEmbedLink)(text)) === null || _d === void 0 ? void 0 : _d.type) === \"video\")) {\n const embeddable = this.insertEmbeddableElement({\n sceneX,\n sceneY,\n link: (0,_data_url__WEBPACK_IMPORTED_MODULE_47__.normalizeLink)(text)\n });\n\n if (embeddable) {\n this.setState({\n selectedElementIds: {\n [embeddable.id]: true\n }\n });\n }\n }\n }\n };\n\n this.loadFileToCanvas = async (file, fileHandle) => {\n file = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.normalizeFile)(file);\n\n try {\n const elements = this.scene.getElementsIncludingDeleted();\n let ret;\n\n try {\n ret = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.loadSceneOrLibraryFromBlob)(file, this.state, elements, fileHandle);\n } catch (error) {\n const imageSceneDataError = error instanceof _errors__WEBPACK_IMPORTED_MODULE_58__.ImageSceneDataError;\n\n if (imageSceneDataError && error.code === \"IMAGE_NOT_CONTAINS_SCENE_DATA\" && !this.isToolSupported(\"image\")) {\n this.setState({\n isLoading: false,\n errorMessage: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageToolNotSupported\")\n });\n return;\n }\n\n const errorMessage = imageSceneDataError ? (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"alerts.cannotRestoreFromImage\") : (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"alerts.couldNotLoadInvalidFile\");\n this.setState({\n isLoading: false,\n errorMessage\n });\n }\n\n if (!ret) {\n return;\n }\n\n if (ret.type === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.excalidraw) {\n // restore the fractional indices by mutating elements\n (0,_fractionalIndex__WEBPACK_IMPORTED_MODULE_90__.syncInvalidIndices)(elements.concat(ret.data.elements)); // update the store snapshot for old elements, otherwise we would end up with duplicated fractional indices on undo\n\n this.store.updateSnapshot((0,_utils__WEBPACK_IMPORTED_MODULE_35__.arrayToMap)(elements), this.state);\n this.setState({\n isLoading: true\n });\n this.syncActionResult(Object.assign(Object.assign({}, ret.data), {\n appState: Object.assign(Object.assign({}, ret.data.appState || this.state), {\n isLoading: false\n }),\n replaceFiles: true,\n storeAction: _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.CAPTURE\n }));\n } else if (ret.type === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.excalidrawlib) {\n await this.library.updateLibrary({\n libraryItems: file,\n merge: true,\n openLibraryMenu: true\n }).catch(error => {\n console.error(error);\n this.setState({\n errorMessage: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.importLibraryError\")\n });\n });\n }\n } catch (error) {\n this.setState({\n isLoading: false,\n errorMessage: error.message\n });\n }\n };\n\n this.handleCanvasContextMenu = event => {\n event.preventDefault();\n\n if ((\"pointerType\" in event.nativeEvent && event.nativeEvent.pointerType === \"touch\" || \"pointerType\" in event.nativeEvent && event.nativeEvent.pointerType === \"pen\" && // always allow if user uses a pen secondary button\n event.button !== _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.SECONDARY) && this.state.activeTool.type !== \"selection\") {\n return;\n }\n\n const {\n x,\n y\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)(event, this.state);\n const element = this.getElementAtPosition(x, y, {\n preferSelected: true,\n includeLockedElements: true\n });\n const selectedElements = this.scene.getSelectedElements(this.state);\n const isHittingCommonBoundBox = this.isHittingCommonBoundingBoxOfSelectedElements({\n x,\n y\n }, selectedElements);\n const type = element || isHittingCommonBoundBox ? \"element\" : \"canvas\";\n const container = this.excalidrawContainerRef.current;\n const {\n top: offsetTop,\n left: offsetLeft\n } = container.getBoundingClientRect();\n const left = event.clientX - offsetLeft;\n const top = event.clientY - offsetTop;\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"contextMenu\", \"openContextMenu\", type);\n this.setState(Object.assign(Object.assign({}, element && !this.state.selectedElementIds[element.id] ? Object.assign(Object.assign(Object.assign({}, this.state), (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n editingGroupId: this.state.editingGroupId,\n selectedElementIds: {\n [element.id]: true\n }\n }, this.scene.getNonDeletedElements(), this.state, this)), {\n selectedLinearElement: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(element) ? new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(element) : null\n }) : this.state), {\n showHyperlinkPopup: false\n }), () => {\n this.setState({\n contextMenu: {\n top,\n left,\n items: this.getContextMenuItems(type)\n }\n });\n });\n };\n\n this.maybeDragNewGenericElement = (pointerDownState, event) => {\n var _a, _b, _c, _d, _e;\n\n const draggingElement = this.state.draggingElement;\n const pointerCoords = pointerDownState.lastCoords;\n\n if (!draggingElement) {\n return;\n }\n\n if (draggingElement.type === \"selection\" && this.state.activeTool.type !== \"eraser\") {\n (0,_element__WEBPACK_IMPORTED_MODULE_16__.dragNewElement)(draggingElement, this.state.activeTool.type, pointerDownState.origin.x, pointerDownState.origin.y, pointerCoords.x, pointerCoords.y, (0,_utils__WEBPACK_IMPORTED_MODULE_35__.distance)(pointerDownState.origin.x, pointerCoords.x), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.distance)(pointerDownState.origin.y, pointerCoords.y), (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldMaintainAspectRatio)(event), (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldResizeFromCenter)(event));\n } else {\n let [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerCoords.x, pointerCoords.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.state.gridSize);\n const image = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isInitializedImageElement)(draggingElement) && ((_a = this.imageCache.get(draggingElement.fileId)) === null || _a === void 0 ? void 0 : _a.image);\n const aspectRatio = image && !(image instanceof Promise) ? image.width / image.height : null;\n this.maybeCacheReferenceSnapPoints(event, [draggingElement]);\n const {\n snapOffset,\n snapLines\n } = (0,_snapping__WEBPACK_IMPORTED_MODULE_59__.snapNewElement)(draggingElement, this.state, event, {\n x: pointerDownState.originInGrid.x + ((_c = (_b = this.state.originSnapOffset) === null || _b === void 0 ? void 0 : _b.x) !== null && _c !== void 0 ? _c : 0),\n y: pointerDownState.originInGrid.y + ((_e = (_d = this.state.originSnapOffset) === null || _d === void 0 ? void 0 : _d.y) !== null && _e !== void 0 ? _e : 0)\n }, {\n x: gridX - pointerDownState.originInGrid.x,\n y: gridY - pointerDownState.originInGrid.y\n }, this.scene.getNonDeletedElementsMap());\n gridX += snapOffset.x;\n gridY += snapOffset.y;\n this.setState({\n snapLines\n });\n (0,_element__WEBPACK_IMPORTED_MODULE_16__.dragNewElement)(draggingElement, this.state.activeTool.type, pointerDownState.originInGrid.x, pointerDownState.originInGrid.y, gridX, gridY, (0,_utils__WEBPACK_IMPORTED_MODULE_35__.distance)(pointerDownState.originInGrid.x, gridX), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.distance)(pointerDownState.originInGrid.y, gridY), (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isImageElement)(draggingElement) ? !(0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldMaintainAspectRatio)(event) : (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldMaintainAspectRatio)(event), (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldResizeFromCenter)(event), aspectRatio, this.state.originSnapOffset); // highlight elements that are to be added to frames on frames creation\n\n if (this.state.activeTool.type === _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.frame || this.state.activeTool.type === _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.magicframe) {\n this.setState({\n elementsToHighlight: (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getElementsInResizingFrame)(this.scene.getNonDeletedElements(), draggingElement, this.state, this.scene.getNonDeletedElementsMap())\n });\n }\n }\n };\n\n this.maybeHandleResize = (pointerDownState, event) => {\n const selectedElements = this.scene.getSelectedElements(this.state);\n const selectedFrames = selectedElements.filter(element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(element));\n const transformHandleType = pointerDownState.resize.handleType;\n\n if (selectedFrames.length > 0 && transformHandleType === \"rotation\") {\n return false;\n }\n\n this.setState({\n // TODO: rename this state field to \"isScaling\" to distinguish\n // it from the generic \"isResizing\" which includes scaling and\n // rotating\n isResizing: transformHandleType && transformHandleType !== \"rotation\",\n isRotating: transformHandleType === \"rotation\",\n activeEmbeddable: null\n });\n const pointerCoords = pointerDownState.lastCoords;\n let [resizeX, resizeY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerCoords.x - pointerDownState.resize.offset.x, pointerCoords.y - pointerDownState.resize.offset.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.state.gridSize);\n const frameElementsOffsetsMap = new Map();\n selectedFrames.forEach(frame => {\n const elementsInFrame = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getFrameChildren)(this.scene.getNonDeletedElements(), frame.id);\n elementsInFrame.forEach(element => {\n frameElementsOffsetsMap.set(frame.id + element.id, {\n x: element.x - frame.x,\n y: element.y - frame.y\n });\n });\n }); // check needed for avoiding flickering when a key gets pressed\n // during dragging\n\n if (!this.state.selectedElementsAreBeingDragged) {\n const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerCoords.x, pointerCoords.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.state.gridSize);\n const dragOffset = {\n x: gridX - pointerDownState.originInGrid.x,\n y: gridY - pointerDownState.originInGrid.y\n };\n const originalElements = [...pointerDownState.originalElements.values()];\n this.maybeCacheReferenceSnapPoints(event, selectedElements);\n const {\n snapOffset,\n snapLines\n } = (0,_snapping__WEBPACK_IMPORTED_MODULE_59__.snapResizingElements)(selectedElements, (0,_scene__WEBPACK_IMPORTED_MODULE_29__.getSelectedElements)(originalElements, this.state), this.state, event, dragOffset, transformHandleType);\n resizeX += snapOffset.x;\n resizeY += snapOffset.y;\n this.setState({\n snapLines\n });\n }\n\n if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.transformElements)(pointerDownState.originalElements, transformHandleType, selectedElements, this.scene.getElementsMapIncludingDeleted(), (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldRotateWithDiscreteAngle)(event), (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldResizeFromCenter)(event), selectedElements.some(element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isImageElement)(element)) ? !(0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldMaintainAspectRatio)(event) : (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldMaintainAspectRatio)(event), resizeX, resizeY, pointerDownState.resize.center.x, pointerDownState.resize.center.y)) {\n const suggestedBindings = (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getSuggestedBindingsForArrows)(selectedElements, this);\n const elementsToHighlight = new Set();\n selectedFrames.forEach(frame => {\n (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getElementsInResizingFrame)(this.scene.getNonDeletedElements(), frame, this.state, this.scene.getNonDeletedElementsMap()).forEach(element => elementsToHighlight.add(element));\n });\n this.setState({\n elementsToHighlight: [...elementsToHighlight],\n suggestedBindings\n });\n return true;\n }\n\n return false;\n };\n\n this.getContextMenuItems = type => {\n const options = [];\n options.push(_actions__WEBPACK_IMPORTED_MODULE_5__.actionCopyAsPng, _actions__WEBPACK_IMPORTED_MODULE_5__.actionCopyAsSvg); // canvas contextMenu\n // -------------------------------------------------------------------------\n\n if (type === \"canvas\") {\n if (this.state.viewModeEnabled) {\n return [...options, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleGridMode, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleZenMode, _actions_actionToggleViewMode__WEBPACK_IMPORTED_MODULE_40__.actionToggleViewMode, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleStats, _actions_actionCanvas__WEBPACK_IMPORTED_MODULE_55__.actionToggleLaserPointer];\n }\n\n return [_actions_actionClipboard__WEBPACK_IMPORTED_MODULE_53__.actionPaste, _ContextMenu__WEBPACK_IMPORTED_MODULE_37__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionCopyAsPng, _actions__WEBPACK_IMPORTED_MODULE_5__.actionCopyAsSvg, _actions__WEBPACK_IMPORTED_MODULE_5__.copyText, _ContextMenu__WEBPACK_IMPORTED_MODULE_37__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionSelectAll, _actions_actionElementLock__WEBPACK_IMPORTED_MODULE_49__.actionUnlockAllElements, _ContextMenu__WEBPACK_IMPORTED_MODULE_37__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleGridMode, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleObjectsSnapMode, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleZenMode, _actions_actionToggleViewMode__WEBPACK_IMPORTED_MODULE_40__.actionToggleViewMode, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleStats];\n } // element contextMenu\n // -------------------------------------------------------------------------\n\n\n options.push(_actions__WEBPACK_IMPORTED_MODULE_5__.copyText);\n\n if (this.state.viewModeEnabled) {\n return [_actions__WEBPACK_IMPORTED_MODULE_5__.actionCopy, ...options];\n }\n\n return [_ContextMenu__WEBPACK_IMPORTED_MODULE_37__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionCut, _actions__WEBPACK_IMPORTED_MODULE_5__.actionCopy, _actions_actionClipboard__WEBPACK_IMPORTED_MODULE_53__.actionPaste, _actions_actionFrame__WEBPACK_IMPORTED_MODULE_54__.actionSelectAllElementsInFrame, _actions_actionFrame__WEBPACK_IMPORTED_MODULE_54__.actionRemoveAllElementsFromFrame, _ContextMenu__WEBPACK_IMPORTED_MODULE_37__.CONTEXT_MENU_SEPARATOR, ...options, _ContextMenu__WEBPACK_IMPORTED_MODULE_37__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionCopyStyles, _actions__WEBPACK_IMPORTED_MODULE_5__.actionPasteStyles, _ContextMenu__WEBPACK_IMPORTED_MODULE_37__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionGroup, _actions_actionTextAutoResize__WEBPACK_IMPORTED_MODULE_94__.actionTextAutoResize, _actions__WEBPACK_IMPORTED_MODULE_5__.actionUnbindText, _actions__WEBPACK_IMPORTED_MODULE_5__.actionBindText, _actions_actionBoundText__WEBPACK_IMPORTED_MODULE_60__.actionWrapTextInContainer, _actions__WEBPACK_IMPORTED_MODULE_5__.actionUngroup, _ContextMenu__WEBPACK_IMPORTED_MODULE_37__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionAddToLibrary, _ContextMenu__WEBPACK_IMPORTED_MODULE_37__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionSendBackward, _actions__WEBPACK_IMPORTED_MODULE_5__.actionBringForward, _actions__WEBPACK_IMPORTED_MODULE_5__.actionSendToBack, _actions__WEBPACK_IMPORTED_MODULE_5__.actionBringToFront, _ContextMenu__WEBPACK_IMPORTED_MODULE_37__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionFlipHorizontal, _actions__WEBPACK_IMPORTED_MODULE_5__.actionFlipVertical, _ContextMenu__WEBPACK_IMPORTED_MODULE_37__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleLinearEditor, _actions__WEBPACK_IMPORTED_MODULE_5__.actionLink, _actions__WEBPACK_IMPORTED_MODULE_5__.actionDuplicateSelection, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleElementLock, _ContextMenu__WEBPACK_IMPORTED_MODULE_37__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionDeleteSelected];\n };\n\n this.handleWheel = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(event => {\n event.preventDefault();\n\n if (isPanning) {\n return;\n }\n\n const {\n deltaX,\n deltaY\n } = event; // note that event.ctrlKey is necessary to handle pinch zooming\n\n if ( //zsviczian\n (event.metaKey || event.ctrlKey) && !this.state.allowWheelZoom || !(event.metaKey || event.ctrlKey) && this.state.allowWheelZoom) {\n const sign = Math.sign(deltaY);\n const MAX_STEP = _constants__WEBPACK_IMPORTED_MODULE_12__.ZOOM_STEP * 100;\n const absDelta = Math.abs(deltaY);\n let delta = deltaY;\n\n if (absDelta > MAX_STEP) {\n delta = MAX_STEP * sign;\n }\n\n let newZoom = this.state.zoom.value - delta / 100; // increase zoom steps the more zoomed-in we are (applies to >100% only)\n\n newZoom += Math.log10(Math.max(1, this.state.zoom.value)) * -sign * // reduced amplification for small deltas (small movements on a trackpad)\n Math.min(1, absDelta / 20);\n this.translateCanvas(state => Object.assign(Object.assign({}, (0,_scene_zoom__WEBPACK_IMPORTED_MODULE_31__.getStateForZoom)({\n viewportX: this.lastViewportPosition.x,\n viewportY: this.lastViewportPosition.y,\n nextZoom: (0,_scene__WEBPACK_IMPORTED_MODULE_29__.getNormalizedZoom)(newZoom)\n }, state)), {\n shouldCacheIgnoreZoom: true\n }));\n this.resetShouldCacheIgnoreZoomDebounced();\n return;\n } // scroll horizontally when shift pressed\n\n\n if (event.shiftKey) {\n this.translateCanvas(({\n zoom,\n scrollX\n }) => ({\n // on Mac, shift+wheel tends to result in deltaX\n scrollX: scrollX - (deltaY || deltaX) / zoom.value\n }));\n return;\n }\n\n this.translateCanvas(({\n zoom,\n scrollX,\n scrollY\n }) => ({\n scrollX: scrollX - deltaX / zoom.value,\n scrollY: scrollY - deltaY / zoom.value\n }));\n });\n\n this.savePointer = (x, y, button) => {\n var _a, _b;\n\n if (!x || !y) {\n return;\n }\n\n const {\n x: sceneX,\n y: sceneY\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)({\n clientX: x,\n clientY: y\n }, this.state);\n\n if (isNaN(sceneX) || isNaN(sceneY)) {// sometimes the pointer goes off screen\n }\n\n const pointer = {\n x: sceneX,\n y: sceneY,\n tool: this.state.activeTool.type === \"laser\" ? \"laser\" : \"pointer\"\n };\n (_b = (_a = this.props).onPointerUpdate) === null || _b === void 0 ? void 0 : _b.call(_a, {\n pointer,\n button,\n pointersMap: gesture.pointers\n });\n };\n\n this.resetShouldCacheIgnoreZoomDebounced = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.debounce)(() => {\n if (!this.unmounted) {\n this.setState({\n shouldCacheIgnoreZoom: false\n });\n }\n }, 300);\n\n this.updateDOMRect = cb => {\n var _a;\n\n if ((_a = this.excalidrawContainerRef) === null || _a === void 0 ? void 0 : _a.current) {\n const excalidrawContainer = this.excalidrawContainerRef.current;\n const {\n width,\n height,\n left: offsetLeft,\n top: offsetTop\n } = excalidrawContainer.getBoundingClientRect();\n const {\n width: currentWidth,\n height: currentHeight,\n offsetTop: currentOffsetTop,\n offsetLeft: currentOffsetLeft\n } = this.state;\n\n if (width === currentWidth && height === currentHeight && offsetLeft === currentOffsetLeft && offsetTop === currentOffsetTop) {\n if (cb) {\n cb();\n }\n\n return;\n } //zsviczian\n\n\n if (width === 0 || height === 0) {\n if (cb) {\n cb();\n }\n\n return;\n }\n\n this.setState({\n width,\n height,\n offsetLeft,\n offsetTop\n }, () => {\n cb && cb();\n });\n }\n };\n\n this.refresh = () => {\n this.setState(Object.assign({}, this.getCanvasOffsets()));\n };\n\n const defaultAppState = (0,_appState__WEBPACK_IMPORTED_MODULE_10__.getDefaultAppState)();\n const {\n excalidrawAPI,\n viewModeEnabled = false,\n zenModeEnabled = false,\n gridModeEnabled = false,\n objectsSnapModeEnabled = false,\n theme = defaultAppState.theme,\n initState,\n //zsviczian\n obsidianHostPlugin,\n //zsviczian\n name = `${(0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"labels.untitled\")}-${(0,_utils__WEBPACK_IMPORTED_MODULE_35__.getDateTime)()}`\n } = props;\n this.state = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaultAppState), {\n theme,\n isLoading: true\n }), this.getCanvasOffsets()), {\n viewModeEnabled,\n zenModeEnabled,\n objectsSnapModeEnabled,\n gridSize: gridModeEnabled ? _constants__WEBPACK_IMPORTED_MODULE_12__.GRID_SIZE : null,\n name,\n width: window.innerWidth,\n height: window.innerHeight\n }), initState !== null && initState !== void 0 ? initState : {});\n this.id = (0,nanoid__WEBPACK_IMPORTED_MODULE_95__.nanoid)();\n hostPlugin = obsidianHostPlugin; //zsviczian\n\n this.library = new _data_library__WEBPACK_IMPORTED_MODULE_14__[\"default\"](this);\n this.actionManager = new _actions_manager__WEBPACK_IMPORTED_MODULE_7__.ActionManager(this.syncActionResult, () => this.state, () => this.scene.getElementsIncludingDeleted(), this);\n this.scene = new _scene_Scene__WEBPACK_IMPORTED_MODULE_30__[\"default\"]();\n this.canvas = document.createElement(\"canvas\");\n this.rc = roughjs_bin_rough__WEBPACK_IMPORTED_MODULE_3__[\"default\"].canvas(this.canvas);\n this.renderer = new _scene_Renderer__WEBPACK_IMPORTED_MODULE_66__.Renderer(this.scene);\n this.store = new _store__WEBPACK_IMPORTED_MODULE_80__.Store();\n this.history = new _history__WEBPACK_IMPORTED_MODULE_24__.History();\n\n if (excalidrawAPI) {\n const api = {\n updateScene: this.updateScene,\n updateLibrary: this.library.updateLibrary,\n addFiles: this.addFiles,\n resetScene: this.resetScene,\n getSceneElementsIncludingDeleted: this.getSceneElementsIncludingDeleted,\n history: {\n clear: this.resetHistory\n },\n scrollToContent: this.scrollToContent,\n zoomToFit: this.zoomToFit,\n startLineEditor: this.startLineEditor,\n getSceneElements: this.getSceneElements,\n getAppState: () => this.state,\n getFiles: () => this.files,\n getName: this.getName,\n registerAction: action => {\n this.actionManager.registerAction(action);\n },\n refresh: this.refresh,\n setToast: this.setToast,\n updateContainerSize: this.updateContainerSize,\n id: this.id,\n setLocalFont: this.setLocalFont,\n selectElements: this.selectElements,\n sendBackward: this.sendBackward,\n bringForward: this.bringForward,\n sendToBack: this.sendToBack,\n bringToFront: this.bringToFront,\n setMobileModeAllowed: this.setMobileModeAllowed,\n setActiveTool: this.setActiveTool,\n setCursor: this.setCursor,\n resetCursor: this.resetCursor,\n updateFrameRendering: this.updateFrameRendering,\n toggleSidebar: this.toggleSidebar,\n getHTMLIFrameElement: id => this.getHTMLIFrameElement(id),\n onChange: cb => this.onChangeEmitter.on(cb),\n onPointerDown: cb => this.onPointerDownEmitter.on(cb),\n onPointerUp: cb => this.onPointerUpEmitter.on(cb),\n onScrollChange: cb => this.onScrollChangeEmitter.on(cb),\n onUserFollow: cb => this.onUserFollowEmitter.on(cb)\n };\n\n if (typeof excalidrawAPI === \"function\") {\n excalidrawAPI(api);\n } else {\n console.error(\"excalidrawAPI should be a function!\");\n }\n }\n\n this.excalidrawContainerValue = {\n container: this.excalidrawContainerRef.current,\n id: this.id\n };\n this.fonts = new _scene_Fonts__WEBPACK_IMPORTED_MODULE_50__.Fonts({\n scene: this.scene\n });\n this.history = new _history__WEBPACK_IMPORTED_MODULE_24__.History();\n this.actionManager.registerAll(_actions_register__WEBPACK_IMPORTED_MODULE_8__.actions);\n this.actionManager.registerAction((0,_actions_actionHistory__WEBPACK_IMPORTED_MODULE_6__.createUndoAction)(this.history, this.store));\n this.actionManager.registerAction((0,_actions_actionHistory__WEBPACK_IMPORTED_MODULE_6__.createRedoAction)(this.history, this.store));\n }\n\n onWindowMessage(event) {\n if (event.origin !== \"https://player.vimeo.com\" && event.origin !== \"https://www.youtube.com\") {\n return;\n }\n\n let data = null;\n\n try {\n data = JSON.parse(event.data);\n } catch (e) {}\n\n if (!data) {\n return;\n }\n\n switch (event.origin) {\n case \"https://player.vimeo.com\":\n //Allowing for multiple instances of Excalidraw running in the window\n if (data.method === \"paused\") {\n let source = null;\n const iframes = document.body.querySelectorAll(\"iframe.excalidraw__embeddable\");\n\n if (!iframes) {\n break;\n }\n\n for (const iframe of iframes) {\n if (iframe.contentWindow === event.source) {\n source = iframe.contentWindow;\n }\n }\n\n source === null || source === void 0 ? void 0 : source.postMessage(JSON.stringify({\n method: data.value ? \"play\" : \"pause\",\n value: true\n }), \"*\");\n }\n\n break;\n\n case \"https://www.youtube.com\":\n if (data.event === \"infoDelivery\" && data.info && data.id && typeof data.info.playerState === \"number\") {\n const id = data.id;\n const playerState = data.info.playerState;\n\n if (Object.values(_constants__WEBPACK_IMPORTED_MODULE_12__.YOUTUBE_STATES).includes(playerState)) {\n YOUTUBE_VIDEO_STATES.set(id, playerState);\n }\n }\n\n break;\n }\n }\n\n cacheEmbeddableRef(element, ref) {\n if (ref) {\n this.iFrameRefs.set(element.id, ref);\n }\n }\n\n getHTMLIFrameElement(element) {\n if (typeof element === \"string\") {\n //zsviczian\n return this.iFrameRefs.get(element);\n }\n\n return this.iFrameRefs.get(element.id);\n }\n\n handleEmbeddableCenterClick(element) {\n var _a, _b, _c, _d;\n\n if (((_a = this.state.activeEmbeddable) === null || _a === void 0 ? void 0 : _a.element) === element && ((_b = this.state.activeEmbeddable) === null || _b === void 0 ? void 0 : _b.state) === \"active\") {\n return;\n } // The delay serves two purposes\n // 1. To prevent first click propagating to iframe on mobile,\n // else the click will immediately start and stop the video\n // 2. If the user double clicks the frame center to activate it\n // without the delay youtube will immediately open the video\n // in fullscreen mode\n\n\n setTimeout(() => {\n this.setState({\n activeEmbeddable: {\n element,\n state: \"active\"\n },\n selectedElementIds: {\n [element.id]: true\n },\n draggingElement: null,\n selectionElement: null\n });\n }, 100);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(element)) {\n return;\n }\n\n const iframe = this.getHTMLIFrameElement(element);\n\n if (!(iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow)) {\n return;\n }\n\n if (iframe.src.includes(\"youtube\")) {\n const state = YOUTUBE_VIDEO_STATES.get(element.id);\n\n if (!state) {\n YOUTUBE_VIDEO_STATES.set(element.id, _constants__WEBPACK_IMPORTED_MODULE_12__.YOUTUBE_STATES.UNSTARTED);\n iframe.contentWindow.postMessage(JSON.stringify({\n event: \"listening\",\n id: element.id\n }), \"*\");\n }\n\n switch (state) {\n case _constants__WEBPACK_IMPORTED_MODULE_12__.YOUTUBE_STATES.PLAYING:\n case _constants__WEBPACK_IMPORTED_MODULE_12__.YOUTUBE_STATES.BUFFERING:\n (_c = iframe.contentWindow) === null || _c === void 0 ? void 0 : _c.postMessage(JSON.stringify({\n event: \"command\",\n func: \"pauseVideo\",\n args: \"\"\n }), \"*\");\n break;\n\n default:\n (_d = iframe.contentWindow) === null || _d === void 0 ? void 0 : _d.postMessage(JSON.stringify({\n event: \"command\",\n func: \"playVideo\",\n args: \"\"\n }), \"*\");\n }\n }\n\n if (iframe.src.includes(\"player.vimeo.com\")) {\n iframe.contentWindow.postMessage(JSON.stringify({\n method: \"paused\" //video play/pause in onWindowMessage handler\n\n }), \"*\");\n }\n }\n\n isIframeLikeElementCenter(el, event, sceneX, sceneY) {\n var _a, _b;\n\n return el && !event.altKey && !event.shiftKey && !event.metaKey && !event.ctrlKey && (((_a = this.state.activeEmbeddable) === null || _a === void 0 ? void 0 : _a.element) !== el || ((_b = this.state.activeEmbeddable) === null || _b === void 0 ? void 0 : _b.state) === \"hover\" || !this.state.activeEmbeddable) && sceneX >= el.x + el.width / 3 && sceneX <= el.x + 2 * el.width / 3 && sceneY >= el.y + el.height / 3 && sceneY <= el.y + 2 * el.height / 3;\n }\n\n renderEmbeddables() {\n const scale = this.state.zoom.value;\n const normalizedWidth = this.state.width;\n const normalizedHeight = this.state.height;\n const embeddableElements = this.scene.getNonDeletedElements().filter(el => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(el) && this.embedsValidationStatus.get(el.id) === true || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(el));\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n children: embeddableElements.map(el => {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;\n\n const {\n x,\n y\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.sceneCoordsToViewportCoords)({\n sceneX: el.x,\n sceneY: el.y\n }, this.state);\n const isVisible = (0,_element_sizeHelpers__WEBPACK_IMPORTED_MODULE_27__.isElementInViewport)(el, normalizedWidth, normalizedHeight, this.state, this.scene.getNonDeletedElementsMap());\n const hasBeenInitialized = this.initializedEmbeds.has(el.id);\n\n if (isVisible && !hasBeenInitialized) {\n this.initializedEmbeds.add(el.id);\n }\n\n const shouldRender = isVisible || hasBeenInitialized;\n\n if (!shouldRender) {\n return null;\n }\n\n let src;\n const embedLink = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_36__.getEmbedLink)((0,_data_url__WEBPACK_IMPORTED_MODULE_47__.toValidURL)(el.link || \"\")); //zsviczian\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(el)) {\n src = null;\n const data = ((_b = (_a = el.customData) === null || _a === void 0 ? void 0 : _a.generationData) !== null && _b !== void 0 ? _b : this.magicGenerations.get(el.id)) || {\n status: \"error\",\n message: \"No generation data\",\n code: \"ERR_NO_GENERATION_DATA\"\n };\n\n if (data.status === \"done\") {\n const html = data.html;\n src = {\n intrinsicSize: {\n w: el.width,\n h: el.height\n },\n type: \"document\",\n srcdoc: () => {\n return html;\n }\n };\n } else if (data.status === \"pending\") {\n src = {\n intrinsicSize: {\n w: el.width,\n h: el.height\n },\n type: \"document\",\n srcdoc: () => {\n return (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_36__.createSrcDoc)(`\n <style>\n html, body {\n width: 100%;\n height: 100%;\n color: ${this.state.theme === _constants__WEBPACK_IMPORTED_MODULE_12__.THEME.DARK ? \"white\" : \"black\"};\n }\n body {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 1rem;\n }\n\n .Spinner {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: auto;\n margin-right: auto;\n }\n\n .Spinner svg {\n animation: rotate 1.6s linear infinite;\n transform-origin: center center;\n width: 40px;\n height: 40px;\n }\n\n .Spinner circle {\n stroke: currentColor;\n animation: dash 1.6s linear 0s infinite;\n stroke-linecap: round;\n }\n\n @keyframes rotate {\n 100% {\n transform: rotate(360deg);\n }\n }\n\n @keyframes dash {\n 0% {\n stroke-dasharray: 1, 300;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 150, 300;\n stroke-dashoffset: -200;\n }\n 100% {\n stroke-dasharray: 1, 300;\n stroke-dashoffset: -280;\n }\n }\n </style>\n <div class=\"Spinner\">\n <svg\n viewBox=\"0 0 100 100\"\n >\n <circle\n cx=\"50\"\n cy=\"50\"\n r=\"46\"\n stroke-width=\"8\"\n fill=\"none\"\n stroke-miter-limit=\"10\"\n />\n </svg>\n </div>\n <div>Generating...</div>\n `);\n }\n };\n } else {\n let message;\n\n if (data.code === \"ERR_GENERATION_INTERRUPTED\") {\n message = \"Generation was interrupted...\";\n } else {\n message = data.message || \"Generation failed\";\n }\n\n src = {\n intrinsicSize: {\n w: el.width,\n h: el.height\n },\n type: \"document\",\n srcdoc: () => {\n return (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_36__.createSrcDoc)(`\n <style>\n html, body {\n height: 100%;\n }\n body {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n color: ${_colors__WEBPACK_IMPORTED_MODULE_74__.COLOR_PALETTE.red[3]};\n }\n h1, h3 {\n margin-top: 0;\n margin-bottom: 0.5rem;\n }\n </style>\n <h1>Error!</h1>\n <h3>${message}</h3>\n `);\n }\n };\n }\n } else {\n src = embedLink; //zsviczian getEmbedLink(toValidURL(el.link || \"\"));\n }\n\n const isActive = ((_c = this.state.activeEmbeddable) === null || _c === void 0 ? void 0 : _c.element) === el && ((_d = this.state.activeEmbeddable) === null || _d === void 0 ? void 0 : _d.state) === \"active\";\n const isHovered = ((_e = this.state.activeEmbeddable) === null || _e === void 0 ? void 0 : _e.element) === el && ((_f = this.state.activeEmbeddable) === null || _f === void 0 ? void 0 : _f.state) === \"hover\";\n const isWebview = //zsviczian\n !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(el) && this.props.renderWebview && (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) !== \"document\" && !((_h = (_g = embedLink === null || embedLink === void 0 ? void 0 : embedLink.link) === null || _g === void 0 ? void 0 : _g.startsWith) === null || _h === void 0 ? void 0 : _h.call(_g, \"https://player.vimeo.com\")); // Modify the scale based on el.scale property\n\n const [xScale, yScale] = (_j = el.scale) !== null && _j !== void 0 ? _j : [1, 1]; //zsviczian\n\n const scaledTransform = `scale(${scale * xScale}, ${scale * yScale})`;\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(\"excalidraw__embeddable-container\", {\n \"is-hovered\": isHovered\n }),\n style: {\n transform: isVisible ? `translate(${x - this.state.offsetLeft}px, ${y - this.state.offsetTop}px) ${scaledTransform}` : \"none\",\n display: isVisible ? \"block\" : \"none\",\n opacity: (0,_renderer_renderElement__WEBPACK_IMPORTED_MODULE_85__.getRenderOpacity)(el, (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getContainingFrame)(el, this.scene.getNonDeletedElementsMap()), this.elementsPendingErasure),\n [\"--embeddable-radius\"]: `${(0,_math__WEBPACK_IMPORTED_MODULE_28__.getCornerRadius)(Math.min(el.width, el.height), el) / xScale //zsviczian\n }px`\n }\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n //this is a hack that addresses isse with embedded excalidraw.com embeddable\n //https://github.com/excalidraw/excalidraw/pull/6691#issuecomment-1607383938\n\n /*ref={(ref) => {\r\n if (!this.excalidrawContainerRef.current) {\r\n return;\r\n }\r\n const container = this.excalidrawContainerRef.current;\r\n const sh = container.scrollHeight;\r\n const ch = container.clientHeight;\r\n if (sh !== ch) {\r\n container.style.height = `${sh}px`;\r\n setTimeout(() => {\r\n container.style.height = `100%`;\r\n });\r\n }\r\n }}*/\n className: \"excalidraw__embeddable-container__inner\",\n style: {\n width: isVisible ? `${el.width / xScale}px` : 0,\n height: isVisible ? `${el.height / yScale}px` : 0,\n transform: isVisible ? `rotate(${el.angle}rad)` : \"none\",\n pointerEvents: isActive ? _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.enabled : _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.disabled\n }\n }, {\n children: [isHovered && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: \"excalidraw__embeddable-hint\"\n }, {\n children: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"buttons.embeddableInteractionButton\")\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: \"excalidraw__embeddable__outer\",\n style: {\n padding: `${el.strokeWidth / (4 * el.scale[0])}px` //zsviczian MDEmbeddable round border cutoff issue\n\n }\n }, {\n children: (_m = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(el) ? (_l = (_k = this.props).renderEmbeddable) === null || _l === void 0 ? void 0 : _l.call(_k, el, this.state) //zsviczian\n : null) !== null && _m !== void 0 ? _m : isWebview ? //zsviczian\n (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"webview\", {\n ref: ref => this.cacheEmbeddableRef(el, ref),\n className: \"excalidraw__embeddable\",\n src: (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) === \"generic\" || (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) === \"video\" ? embedLink.link : \"\",\n title: \"Excalidraw Embedded Content\",\n allowFullScreen: true\n }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"iframe\", {\n ref: ref => this.cacheEmbeddableRef(el, ref),\n className: \"excalidraw__embeddable\",\n srcDoc: (src === null || src === void 0 ? void 0 : src.type) === \"document\" ? src.srcdoc(this.state.theme) : undefined,\n src: (src === null || src === void 0 ? void 0 : src.type) !== \"document\" ? (_o = src === null || src === void 0 ? void 0 : src.link) !== null && _o !== void 0 ? _o : \"\" : undefined,\n // https://stackoverflow.com/q/18470015\n scrolling: \"no\",\n referrerPolicy: \"no-referrer-when-downgrade\",\n title: \"Excalidraw Embedded Content\",\n allow: \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\",\n allowFullScreen: true,\n sandbox: `${((_p = src === null || src === void 0 ? void 0 : src.sandbox) === null || _p === void 0 ? void 0 : _p.allowSameOrigin) ? \"allow-same-origin\" : \"\"} allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-downloads`\n })\n }))]\n }))\n }), el.id);\n })\n });\n }\n\n toggleOverscrollBehavior(event) {\n // when pointer inside editor, disable overscroll behavior to prevent\n // panning to trigger history back/forward on MacOS Chrome\n document.documentElement.style.overscrollBehaviorX = event.type === \"pointerenter\" ? \"none\" : \"auto\";\n }\n\n render() {\n var _a, _b, _c, _d, _e, _f, _g, _h;\n\n const selectedElements = this.scene.getSelectedElements(this.state);\n const {\n renderTopRightUI,\n renderCustomStats\n } = this.props;\n const sceneNonce = this.scene.getSceneNonce();\n const {\n elementsMap,\n visibleElements\n } = this.renderer.getRenderableElements({\n sceneNonce,\n zoom: this.state.zoom,\n offsetLeft: this.state.offsetLeft,\n offsetTop: this.state.offsetTop,\n scrollX: this.state.scrollX,\n scrollY: this.state.scrollY,\n height: this.state.height,\n width: this.state.width,\n editingElement: this.state.editingElement,\n pendingImageElementId: this.state.pendingImageElementId\n });\n const allElementsMap = this.scene.getNonDeletedElementsMap();\n const shouldBlockPointerEvents = !(this.state.editingElement && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(this.state.editingElement)) && (this.state.selectionElement || this.state.draggingElement || this.state.resizingElement || this.state.activeTool.type === \"laser\" && // technically we can just test on this once we make it more safe\n this.state.cursorButton === \"down\" || this.state.editingElement && !(0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(this.state.editingElement));\n const firstSelectedElement = selectedElements[0];\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(\"excalidraw excalidraw-container\", {\n \"excalidraw--view-mode\": this.state.viewModeEnabled,\n \"excalidraw--mobile\": this.device.editor.isMobile || !(this.state.viewModeEnabled || this.state.zenModeEnabled) && this.state.trayModeEnabled //zsviczian\n\n }),\n style: Object.assign({\n //zsviczian\n [\"--ui-pointerEvents\"]: shouldBlockPointerEvents ? _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.disabled : _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.enabled\n }, this.state.dynamicStyle),\n ref: this.excalidrawContainerRef,\n onDrop: this.handleAppOnDrop,\n tabIndex: 0,\n onKeyDown: this.props.handleKeyboardGlobally ? undefined : this.onKeyDown,\n onPointerEnter: this.toggleOverscrollBehavior,\n onPointerLeave: this.toggleOverscrollBehavior\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(AppContext.Provider, Object.assign({\n value: this\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(AppPropsContext.Provider, Object.assign({\n value: this.props\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ExcalidrawContainerContext.Provider, Object.assign({\n value: this.excalidrawContainerValue\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(DeviceContext.Provider, Object.assign({\n value: this.device\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ExcalidrawSetAppStateContext.Provider, Object.assign({\n value: this.setAppState\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ExcalidrawAppStateContext.Provider, Object.assign({\n value: this.state\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(ExcalidrawElementsContext.Provider, Object.assign({\n value: this.scene.getNonDeletedElements()\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(ExcalidrawActionManagerContext.Provider, Object.assign({\n value: this.actionManager\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_LayerUI__WEBPACK_IMPORTED_MODULE_38__[\"default\"], Object.assign({\n canvas: this.canvas,\n appState: this.state,\n files: this.files,\n setAppState: this.setAppState,\n actionManager: this.actionManager,\n elements: this.scene.getNonDeletedElements(),\n onLockToggle: this.toggleLock,\n onPenModeToggle: this.togglePenMode,\n onHandToolToggle: this.onHandToolToggle,\n langCode: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.getLanguage)().code,\n renderTopRightUI: renderTopRightUI,\n renderCustomStats: renderCustomStats,\n showExitZenModeBtn: typeof ((_a = this.props) === null || _a === void 0 ? void 0 : _a.zenModeEnabled) === \"undefined\" && this.state.zenModeEnabled,\n UIOptions: this.props.UIOptions,\n onExportImage: this.onExportImage,\n renderWelcomeScreen: !this.state.isLoading && this.state.showWelcomeScreen && this.state.activeTool.type === \"selection\" && !this.state.zenModeEnabled && !this.scene.getElementsIncludingDeleted().length,\n app: this,\n isCollaborating: this.props.isCollaborating,\n openAIKey: this.OPENAI_KEY,\n isOpenAIKeyPersisted: this.OPENAI_KEY_IS_PERSISTED,\n onOpenAIAPIKeyChange: this.onOpenAIKeyChange,\n onMagicSettingsConfirm: this.onMagicSettingsConfirm\n }, {\n children: this.props.children\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n className: \"excalidraw-textEditorContainer\"\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n className: \"excalidraw-contextMenuContainer\"\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n className: \"excalidraw-eye-dropper-container\"\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_SVGLayer__WEBPACK_IMPORTED_MODULE_68__.SVGLayer, {\n trails: [this.laserTrails, this.eraserTrail]\n }), selectedElements.length === 1 && this.state.showHyperlinkPopup && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_hyperlink_Hyperlink__WEBPACK_IMPORTED_MODULE_46__.Hyperlink, {\n element: firstSelectedElement,\n elementsMap: allElementsMap,\n setAppState: this.setAppState,\n onLinkOpen: this.props.onLinkOpen,\n setToast: this.setToast,\n updateEmbedValidationStatus: this.updateEmbedValidationStatus\n }, firstSelectedElement.id), this.props.aiEnabled !== false && selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isMagicFrameElement)(firstSelectedElement) && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_element_ElementCanvasButtons__WEBPACK_IMPORTED_MODULE_71__.ElementCanvasButtons, Object.assign({\n element: firstSelectedElement,\n elementsMap: elementsMap\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_MagicButton__WEBPACK_IMPORTED_MODULE_75__.ElementCanvasButton, {\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"labels.convertToCode\"),\n icon: _icons__WEBPACK_IMPORTED_MODULE_76__.MagicIcon,\n checked: false,\n onChange: () => this.onMagicFrameGenerate(firstSelectedElement, \"button\")\n })\n })), selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(firstSelectedElement) && ((_c = (_b = firstSelectedElement.customData) === null || _b === void 0 ? void 0 : _b.generationData) === null || _c === void 0 ? void 0 : _c.status) === \"done\" && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_element_ElementCanvasButtons__WEBPACK_IMPORTED_MODULE_71__.ElementCanvasButtons, Object.assign({\n element: firstSelectedElement,\n elementsMap: elementsMap\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_MagicButton__WEBPACK_IMPORTED_MODULE_75__.ElementCanvasButton, {\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"labels.copySource\"),\n icon: _icons__WEBPACK_IMPORTED_MODULE_76__.copyIcon,\n checked: false,\n onChange: () => this.onIframeSrcCopy(firstSelectedElement)\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_MagicButton__WEBPACK_IMPORTED_MODULE_75__.ElementCanvasButton, {\n title: \"Enter fullscreen\",\n icon: _icons__WEBPACK_IMPORTED_MODULE_76__.fullscreenIcon,\n checked: false,\n onChange: () => {\n const iframe = this.getHTMLIFrameElement(firstSelectedElement);\n\n if (iframe) {\n try {\n iframe.requestFullscreen();\n this.setState({\n activeEmbeddable: {\n element: firstSelectedElement,\n state: \"active\"\n },\n selectedElementIds: {\n [firstSelectedElement.id]: true\n },\n draggingElement: null,\n selectionElement: null\n });\n } catch (err) {\n console.warn(err);\n this.setState({\n errorMessage: \"Couldn't enter fullscreen\"\n });\n }\n }\n }\n })]\n })), this.state.toast !== null && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Toast__WEBPACK_IMPORTED_MODULE_39__.Toast, {\n message: this.state.toast.message,\n onClose: () => this.setToast(null),\n duration: this.state.toast.duration,\n closable: this.state.toast.closable\n }), this.state.contextMenu && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ContextMenu__WEBPACK_IMPORTED_MODULE_37__.ContextMenu, {\n items: this.state.contextMenu.items,\n top: this.state.contextMenu.top,\n left: this.state.contextMenu.left,\n actionManager: this.actionManager,\n onClose: callback => {\n this.setState({\n contextMenu: null\n }, () => {\n this.focusContainer();\n callback === null || callback === void 0 ? void 0 : callback();\n });\n }\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_canvases__WEBPACK_IMPORTED_MODULE_65__.StaticCanvas, {\n canvas: this.canvas,\n rc: this.rc,\n elementsMap: elementsMap,\n allElementsMap: allElementsMap,\n visibleElements: visibleElements,\n sceneNonce: sceneNonce,\n selectionNonce: (_d = this.state.selectionElement) === null || _d === void 0 ? void 0 : _d.versionNonce,\n scale: window.devicePixelRatio,\n appState: this.state,\n renderConfig: {\n imageCache: this.imageCache,\n isExporting: false,\n renderGrid: true,\n canvasBackgroundColor: this.state.viewBackgroundColor,\n embedsValidationStatus: this.embedsValidationStatus,\n elementsPendingErasure: this.elementsPendingErasure\n }\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_canvases__WEBPACK_IMPORTED_MODULE_65__.InteractiveCanvas, {\n containerRef: this.excalidrawContainerRef,\n canvas: this.interactiveCanvas,\n elementsMap: elementsMap,\n visibleElements: visibleElements,\n selectedElements: selectedElements,\n sceneNonce: sceneNonce,\n selectionNonce: (_e = this.state.selectionElement) === null || _e === void 0 ? void 0 : _e.versionNonce,\n scale: window.devicePixelRatio,\n appState: this.state,\n device: this.device,\n renderInteractiveSceneCallback: this.renderInteractiveSceneCallback,\n handleCanvasRef: this.handleInteractiveCanvasRef,\n onContextMenu: this.handleCanvasContextMenu,\n onPointerMove: this.handleCanvasPointerMove,\n onPointerUp: this.handleCanvasPointerUp,\n onPointerCancel: this.removePointer,\n onTouchMove: this.handleTouchMove,\n onPointerDown: this.handleCanvasPointerDown,\n onDoubleClick: this.handleCanvasDoubleClick\n }), this.state.userToFollow && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_FollowMode_FollowMode__WEBPACK_IMPORTED_MODULE_78__[\"default\"], {\n width: this.state.width,\n height: this.state.height,\n userToFollow: this.state.userToFollow,\n onDisconnect: this.maybeUnfollowRemoteUser\n }), this.renderFrameNames(), ((_f = this.state.activeEmbeddable) === null || _f === void 0 ? void 0 : _f.state) === \"active\" && ( //zsviczian\n (_h = (_g = this.props).renderEmbeddableMenu) === null || _h === void 0 ? void 0 : _h.call(_g, this.state))]\n })), this.renderEmbeddables()]\n }))\n }))\n }))\n }))\n }))\n }))\n }))\n }));\n }\n\n getTextFromElements(elements) {\n const text = elements.reduce((acc, element) => {\n if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(element)) {\n acc.push(element.text);\n }\n\n return acc;\n }, []).join(\"\\n\\n\");\n return text;\n }\n\n async onMagicFrameGenerate(magicFrame, source) {\n var _a;\n\n if (!this.OPENAI_KEY) {\n this.setToast({\n message: \"You must first configure your OpenAI API key in plugin settings\",\n duration: 5000\n });\n return;\n this.setState({\n openDialog: {\n name: \"settings\",\n tab: \"diagram-to-code\",\n source: \"generation\"\n }\n });\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"generate (missing key)\", \"d2c\");\n return;\n }\n\n const magicFrameChildren = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getElementsOverlappingFrame)(this.scene.getNonDeletedElements(), magicFrame).filter(el => !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isMagicFrameElement)(el));\n\n if (!magicFrameChildren.length) {\n if (source === \"button\") {\n this.setState({\n errorMessage: \"Cannot generate from an empty frame\"\n });\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"generate (no-children)\", \"d2c\");\n } else {\n this.setActiveTool({\n type: \"magicframe\"\n });\n }\n\n return;\n }\n\n const frameElement = this.insertIframeElement({\n sceneX: magicFrame.x + magicFrame.width + 30,\n sceneY: magicFrame.y,\n width: magicFrame.width,\n height: magicFrame.height\n });\n\n if (!frameElement) {\n return;\n }\n\n this.updateMagicGeneration({\n frameElement,\n data: {\n status: \"pending\"\n }\n });\n this.setState({\n selectedElementIds: {\n [frameElement.id]: true\n }\n });\n const blob = await (0,_utils_export__WEBPACK_IMPORTED_MODULE_73__.exportToBlob)({\n elements: this.scene.getNonDeletedElements(),\n appState: Object.assign(Object.assign({}, this.state), {\n exportBackground: true,\n viewBackgroundColor: this.state.viewBackgroundColor\n }),\n exportingFrame: magicFrame,\n files: this.files\n });\n const dataURL = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.getDataURL)(blob);\n const textFromFrameChildren = this.getTextFromElements(magicFrameChildren);\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"generate (start)\", \"d2c\");\n const result = await (0,_data_magic__WEBPACK_IMPORTED_MODULE_72__.diagramToHTML)({\n image: dataURL,\n apiKey: this.OPENAI_KEY,\n text: textFromFrameChildren,\n theme: this.state.theme\n });\n\n if (!result.ok) {\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"generate (failed)\", \"d2c\");\n console.error(result.error);\n this.updateMagicGeneration({\n frameElement,\n data: {\n status: \"error\",\n code: \"ERR_OAI\",\n message: ((_a = result.error) === null || _a === void 0 ? void 0 : _a.message) || \"Unknown error during generation\"\n }\n });\n return;\n }\n\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"generate (success)\", \"d2c\");\n\n if (result.choices[0].message.content == null) {\n this.updateMagicGeneration({\n frameElement,\n data: {\n status: \"error\",\n code: \"ERR_OAI\",\n message: \"Nothing genereated :(\"\n }\n });\n return;\n }\n\n const message = result.choices[0].message.content;\n const html = message.slice(message.indexOf(\"<!DOCTYPE html>\"), message.indexOf(\"</html>\") + \"</html>\".length);\n this.updateMagicGeneration({\n frameElement,\n data: {\n status: \"done\",\n html\n }\n });\n }\n\n onIframeSrcCopy(element) {\n var _a, _b;\n\n if (((_b = (_a = element.customData) === null || _a === void 0 ? void 0 : _a.generationData) === null || _b === void 0 ? void 0 : _b.status) === \"done\") {\n (0,_clipboard__WEBPACK_IMPORTED_MODULE_11__.copyTextToSystemClipboard)(element.customData.generationData.html);\n this.setToast({\n message: \"copied to clipboard\",\n closable: false,\n duration: 1500\n });\n }\n } //zsviczian - ugly hack\n\n\n get OPENAI_KEY() {\n var _a;\n\n return (_a = hostPlugin === null || hostPlugin === void 0 ? void 0 : hostPlugin.settings) === null || _a === void 0 ? void 0 : _a.openAIAPIToken;\n }\n\n set OPENAI_KEY(value) {\n return;\n }\n\n async componentDidMount() {\n var _a;\n\n this.unmounted = false;\n this.excalidrawContainerValue.container = this.excalidrawContainerRef.current;\n\n if (\"development\" === _constants__WEBPACK_IMPORTED_MODULE_12__.ENV.TEST || \"development\" !== \"production\") {\n const setState = this.setState.bind(this);\n Object.defineProperties(window.h, {\n state: {\n configurable: true,\n get: () => {\n return this.state;\n }\n },\n setState: {\n configurable: true,\n value: (...args) => {\n return this.setState(...args);\n }\n },\n app: {\n configurable: true,\n value: this\n },\n history: {\n configurable: true,\n value: this.history\n },\n store: {\n configurable: true,\n value: this.store\n }\n });\n }\n\n this.store.onStoreIncrementEmitter.on(increment => {\n this.history.record(increment.elementsChange, increment.appStateChange);\n });\n this.scene.onUpdate(this.triggerRender);\n this.addEventListeners();\n\n if (this.props.autoFocus && this.excalidrawContainerRef.current) {\n this.focusContainer();\n }\n\n if ( // bounding rects don't work in tests so updating\n // the state on init would result in making the test enviro run\n // in mobile breakpoint (0 width/height), making everything fail\n !(0,_utils__WEBPACK_IMPORTED_MODULE_35__.isTestEnv)()) {\n this.refreshViewportBreakpoints();\n this.refreshEditorBreakpoints();\n }\n\n if (_constants__WEBPACK_IMPORTED_MODULE_12__.supportsResizeObserver && this.excalidrawContainerRef.current) {\n this.resizeObserver = new ResizeObserver(() => {\n this.refreshEditorBreakpoints();\n this.updateDOMRect();\n });\n (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.excalidrawContainerRef.current);\n }\n\n const searchParams = new URLSearchParams(window.location.search.slice(1));\n\n if (searchParams.has(\"web-share-target\")) {\n // Obtain a file that was shared via the Web Share Target API.\n this.restoreFileFromShare();\n } else {\n this.updateDOMRect(this.initializeScene);\n } // note that this check seems to always pass in localhost\n\n\n if ((0,_constants__WEBPACK_IMPORTED_MODULE_12__.isBrave)() && !(0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.isMeasureTextSupported)()) {\n this.setState({\n errorMessage: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_BraveMeasureTextError__WEBPACK_IMPORTED_MODULE_61__[\"default\"], {})\n });\n }\n }\n\n componentWillUnmount() {\n var _a;\n\n this.renderer.destroy();\n this.scene = new _scene_Scene__WEBPACK_IMPORTED_MODULE_30__[\"default\"]();\n this.fonts = new _scene_Fonts__WEBPACK_IMPORTED_MODULE_50__.Fonts({\n scene: this.scene\n });\n this.renderer = new _scene_Renderer__WEBPACK_IMPORTED_MODULE_66__.Renderer(this.scene);\n this.files = {};\n this.imageCache.clear();\n (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();\n this.unmounted = true;\n this.removeEventListeners();\n this.scene.destroy();\n this.library.destroy();\n this.laserTrails.stop();\n this.eraserTrail.stop();\n this.onChangeEmitter.clear();\n this.store.onStoreIncrementEmitter.clear();\n _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_67__.ShapeCache.destroy();\n _snapping__WEBPACK_IMPORTED_MODULE_59__.SnapCache.destroy();\n clearTimeout(touchTimeout);\n _scene__WEBPACK_IMPORTED_MODULE_29__.isSomeElementSelected.clearCache();\n _groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements.clearCache();\n touchTimeout = 0;\n document.documentElement.style.overscrollBehaviorX = \"\";\n }\n\n removeEventListeners() {\n this.onRemoveEventListenersEmitter.trigger();\n }\n\n addEventListeners() {\n // remove first as we can add event listeners multiple times\n this.removeEventListeners(); // -------------------------------------------------------------------------\n // view+edit mode listeners\n // -------------------------------------------------------------------------\n\n if (this.props.handleKeyboardGlobally) {\n this.onRemoveEventListenersEmitter.once((0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYDOWN, this.onKeyDown, false));\n }\n\n this.onRemoveEventListenersEmitter.once((0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(this.excalidrawContainerRef.current, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.WHEEL, this.onWheel, {\n passive: false\n }), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.MESSAGE, this.onWindowMessage, false), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, this.removePointer), // #3553\n (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.COPY, this.onCopy), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYUP, this.onKeyUp, {\n passive: true\n }), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.MOUSE_MOVE, this.updateCurrentCursorPosition), // rerender text elements on font load to fix #637 && #1553\n (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(document.fonts, \"loadingdone\", event => {\n const loadedFontFaces = event.fontfaces;\n this.fonts.onFontsLoaded(loadedFontFaces);\n }), // Safari-only desktop pinch zoom\n (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.GESTURE_START, this.onGestureStart, false), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.GESTURE_CHANGE, this.onGestureChange, false), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.GESTURE_END, this.onGestureEnd, false), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.FOCUS, () => {\n this.maybeCleanupAfterMissingPointerUp(null);\n }));\n\n if (this.state.viewModeEnabled) {\n return;\n } // -------------------------------------------------------------------------\n // edit-mode listeners only\n // -------------------------------------------------------------------------\n\n\n this.onRemoveEventListenersEmitter.once((0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.FULLSCREENCHANGE, this.onFullscreenChange), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.PASTE, this.pasteFromClipboard), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.CUT, this.onCut), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.RESIZE, this.onResize, false), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.UNLOAD, this.onUnload, false), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.BLUR, this.onBlur, false), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(this.excalidrawContainerRef.current, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.DRAG_OVER, this.disableEvent, false), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(this.excalidrawContainerRef.current, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.DROP, this.disableEvent, false));\n\n if (this.props.detectScroll) {\n this.onRemoveEventListenersEmitter.once((0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)((0,_utils__WEBPACK_IMPORTED_MODULE_35__.getNearestScrollableContainer)(this.excalidrawContainerRef.current), _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.SCROLL, this.onScroll));\n }\n }\n\n componentDidUpdate(prevProps, prevState) {\n var _a, _b, _c, _d, _e, _f;\n\n this.updateEmbeddables();\n const elements = this.scene.getElementsIncludingDeleted();\n const elementsMap = this.scene.getElementsMapIncludingDeleted();\n const nonDeletedElementsMap = this.scene.getNonDeletedElementsMap();\n\n if (!this.state.showWelcomeScreen && !elements.length) {\n this.setState({\n showWelcomeScreen: true\n });\n }\n\n if (prevProps.UIOptions.dockedSidebarBreakpoint !== this.props.UIOptions.dockedSidebarBreakpoint) {\n this.refreshEditorBreakpoints();\n }\n\n const hasFollowedPersonLeft = prevState.userToFollow && !this.state.collaborators.has(prevState.userToFollow.socketId);\n\n if (hasFollowedPersonLeft) {\n this.maybeUnfollowRemoteUser();\n }\n\n if (prevState.zoom.value !== this.state.zoom.value || prevState.scrollX !== this.state.scrollX || prevState.scrollY !== this.state.scrollY) {\n (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.onScrollChange) === null || _b === void 0 ? void 0 : _b.call(_a, this.state.scrollX, this.state.scrollY, this.state.zoom);\n this.onScrollChangeEmitter.trigger(this.state.scrollX, this.state.scrollY, this.state.zoom);\n }\n\n if (prevState.userToFollow !== this.state.userToFollow) {\n if (prevState.userToFollow) {\n this.onUserFollowEmitter.trigger({\n userToFollow: prevState.userToFollow,\n action: \"UNFOLLOW\"\n });\n }\n\n if (this.state.userToFollow) {\n this.onUserFollowEmitter.trigger({\n userToFollow: this.state.userToFollow,\n action: \"FOLLOW\"\n });\n }\n }\n\n if (Object.keys(this.state.selectedElementIds).length && (0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state)) {\n this.setState({\n activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateActiveTool)(this.state, {\n type: \"selection\"\n })\n });\n }\n\n if (this.state.activeTool.type === \"eraser\" && prevState.theme !== this.state.theme) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setEraserCursor)(this.interactiveCanvas, this.state.theme);\n } // Hide hyperlink popup if shown when element type is not selection\n\n\n if (prevState.activeTool.type === \"selection\" && this.state.activeTool.type !== \"selection\" && this.state.showHyperlinkPopup) {\n this.setState({\n showHyperlinkPopup: false\n });\n }\n\n if (prevProps.langCode !== this.props.langCode) {\n this.updateLanguage();\n }\n\n if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(prevState) && !(0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state)) {\n this.eraserTrail.endPath();\n }\n\n if (prevProps.viewModeEnabled !== this.props.viewModeEnabled) {\n this.setState({\n viewModeEnabled: !!this.props.viewModeEnabled\n });\n }\n\n if (prevState.viewModeEnabled !== this.state.viewModeEnabled) {\n this.addEventListeners();\n this.deselectElements();\n }\n\n if (prevProps.zenModeEnabled !== this.props.zenModeEnabled) {\n this.setState({\n zenModeEnabled: !!this.props.zenModeEnabled\n });\n }\n\n if (prevProps.theme !== this.props.theme && this.props.theme) {\n this.setState({\n theme: this.props.theme\n });\n }\n\n if (prevProps.gridModeEnabled !== this.props.gridModeEnabled) {\n this.setState({\n gridSize: this.props.gridModeEnabled ? _constants__WEBPACK_IMPORTED_MODULE_12__.GRID_SIZE : null\n });\n }\n\n (_c = this.excalidrawContainerRef.current) === null || _c === void 0 ? void 0 : _c.classList.toggle(\"theme--dark\", this.state.theme === _constants__WEBPACK_IMPORTED_MODULE_12__.THEME.DARK);\n\n if (this.state.editingLinearElement && !this.state.selectedElementIds[this.state.editingLinearElement.elementId]) {\n // defer so that the storeAction flag isn't reset via current update\n setTimeout(() => {\n // execute only if the condition still holds when the deferred callback\n // executes (it can be scheduled multiple times depending on how\n // many times the component renders)\n this.state.editingLinearElement && this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n });\n } // failsafe in case the state is being updated in incorrect order resulting\n // in the editingElement being now a deleted element\n\n\n if ((_d = this.state.editingElement) === null || _d === void 0 ? void 0 : _d.isDeleted) {\n this.setState({\n editingElement: null\n });\n }\n\n if (this.state.selectedLinearElement && !this.state.selectedElementIds[this.state.selectedLinearElement.elementId]) {\n // To make sure `selectedLinearElement` is in sync with `selectedElementIds`, however this shouldn't be needed once\n // we have a single API to update `selectedElementIds`\n this.setState({\n selectedLinearElement: null\n });\n }\n\n const {\n multiElement\n } = prevState;\n\n if (prevState.activeTool !== this.state.activeTool && multiElement != null && (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.isBindingEnabled)(this.state) && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElement)(multiElement, false)) {\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.maybeBindLinearElement)(multiElement, this.state, (0,_utils__WEBPACK_IMPORTED_MODULE_35__.tupleToCoors)(_element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.getPointAtIndexGlobalCoordinates(multiElement, -1, nonDeletedElementsMap)), this);\n }\n\n this.store.commit(elementsMap, this.state); // Do not notify consumers if we're still loading the scene. Among other\n // potential issues, this fixes a case where the tab isn't focused during\n // init, which would trigger onChange with empty elements, which would then\n // override whatever is in localStorage currently.\n\n if (!this.state.isLoading) {\n (_f = (_e = this.props).onChange) === null || _f === void 0 ? void 0 : _f.call(_e, elements, this.state, this.files);\n this.onChangeEmitter.trigger(elements, this.state, this.files);\n }\n }\n\n static resetTapTwice() {\n didTapTwice = false;\n } // TODO rewrite this to paste both text & images at the same time if\n // pasted data contains both\n\n\n async addElementsFromMixedContentPaste(mixedContent, {\n isPlainPaste,\n sceneX,\n sceneY\n }) {\n if (!isPlainPaste && mixedContent.some(node => node.type === \"imageUrl\") && this.isToolSupported(\"image\")) {\n const imageURLs = mixedContent.filter(node => node.type === \"imageUrl\").map(node => node.value);\n const responses = await Promise.all(imageURLs.map(async url => {\n try {\n return {\n file: await (0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.ImageURLToFile)(url)\n };\n } catch (error) {\n let errorMessage = error.message;\n\n if (error.cause === \"FETCH_ERROR\") {\n errorMessage = (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.failedToFetchImage\");\n } else if (error.cause === \"UNSUPPORTED\") {\n errorMessage = (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.unsupportedFileType\");\n }\n\n return {\n errorMessage\n };\n }\n }));\n let y = sceneY;\n let firstImageYOffsetDone = false;\n const nextSelectedIds = {};\n\n for (const response of responses) {\n if (response.file) {\n const imageElement = this.createImageElement({\n sceneX,\n sceneY: y\n });\n const initializedImageElement = await this.insertImageElement(imageElement, response.file);\n\n if (initializedImageElement) {\n // vertically center first image in the batch\n if (!firstImageYOffsetDone) {\n firstImageYOffsetDone = true;\n y -= initializedImageElement.height / 2;\n } // hack to reset the `y` coord because we vertically center during\n // insertImageElement\n\n\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(initializedImageElement, {\n y\n }, false);\n y = imageElement.y + imageElement.height + 25;\n nextSelectedIds[imageElement.id] = true;\n }\n }\n }\n\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(nextSelectedIds, this.state)\n });\n const error = responses.find(response => !!response.errorMessage);\n\n if (error && error.errorMessage) {\n this.setState({\n errorMessage: error.errorMessage\n });\n }\n } else {\n const textNodes = mixedContent.filter(node => node.type === \"text\");\n\n if (textNodes.length) {\n this.addTextFromPaste(textNodes.map(node => node.value).join(\"\\n\\n\"), isPlainPaste);\n }\n }\n }\n\n addTextFromPaste(text, isPlainPaste = false) {\n const {\n x,\n y\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)({\n clientX: this.lastViewportPosition.x,\n clientY: this.lastViewportPosition.y\n }, this.state);\n const textElementProps = {\n x,\n y,\n strokeColor: this.state.currentItemStrokeColor,\n backgroundColor: this.state.currentItemBackgroundColor,\n fillStyle: this.state.currentItemFillStyle,\n strokeWidth: this.state.currentItemStrokeWidth,\n strokeStyle: this.state.currentItemStrokeStyle,\n roundness: null,\n roughness: this.state.currentItemRoughness,\n opacity: this.state.currentItemOpacity,\n text,\n rawText: text,\n fontSize: (0,_actions_actionProperties__WEBPACK_IMPORTED_MODULE_79__.getFontSize)(this.state.currentItemFontSize, this.state.zoom.value),\n fontFamily: this.state.currentItemFontFamily,\n textAlign: this.state.currentItemTextAlign,\n verticalAlign: _constants__WEBPACK_IMPORTED_MODULE_12__.DEFAULT_VERTICAL_ALIGN,\n locked: false\n };\n const LINE_GAP = 10;\n let currentY = y;\n const lines = isPlainPaste ? [text] : text.split(\"\\n\");\n const textElements = lines.reduce((acc, line, idx) => {\n var _a;\n\n const text = line.trim();\n const lineHeight = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.getDefaultLineHeight)(textElementProps.fontFamily);\n\n if (text.length) {\n const topLayerFrame = this.getTopLayerFrameAtSceneCoords({\n x,\n y: currentY\n });\n const element = (0,_element__WEBPACK_IMPORTED_MODULE_16__.newTextElement)(Object.assign(Object.assign({}, textElementProps), {\n x,\n y: currentY,\n text,\n rawText: text,\n //zsviczian\n lineHeight,\n frameId: topLayerFrame ? topLayerFrame.id : null\n }));\n acc.push(element);\n currentY += element.height + LINE_GAP;\n } else {\n const prevLine = (_a = lines[idx - 1]) === null || _a === void 0 ? void 0 : _a.trim(); // add paragraph only if previous line was not empty, IOW don't add\n // more than one empty line\n\n if (prevLine) {\n currentY += (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.getLineHeightInPx)(textElementProps.fontSize, lineHeight) + LINE_GAP;\n }\n }\n\n return acc;\n }, []);\n\n if (textElements.length === 0) {\n return;\n }\n\n this.scene.insertElements(textElements);\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(Object.fromEntries(textElements.map(el => [el.id, true])), this.state)\n });\n\n if (!isPlainPaste && textElements.length > 1 && PLAIN_PASTE_TOAST_SHOWN === false && !this.device.editor.isMobile) {\n this.setToast({\n message: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"toast.pasteAsSingleElement\", {\n shortcut: (0,_utils__WEBPACK_IMPORTED_MODULE_35__.getShortcutKey)(\"CtrlOrCmd+Shift+V\")\n }),\n duration: 5000\n });\n PLAIN_PASTE_TOAST_SHOWN = true;\n }\n\n this.store.shouldCaptureIncrement();\n }\n\n handleTextWysiwyg(element, {\n isExistingElement = false\n }) {\n const elementsMap = this.scene.getElementsMapIncludingDeleted();\n\n const updateElement = (nextOriginalText, isDeleted, rawText, //zsviczian\n link) => {\n this.scene.replaceAllElements([// Not sure why we include deleted elements as well hence using deleted elements map\n ...this.scene.getElementsIncludingDeleted().map(_element => {\n if (_element.id === element.id && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(_element)) {\n return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(_element, Object.assign({\n originalText: nextOriginalText,\n rawText: rawText !== null && rawText !== void 0 ? rawText : nextOriginalText,\n //zsviczian\n link,\n isDeleted: isDeleted !== null && isDeleted !== void 0 ? isDeleted : _element.isDeleted\n }, (0,_element__WEBPACK_IMPORTED_MODULE_16__.refreshTextDimensions)(_element, (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.getContainerElement)(_element, elementsMap), elementsMap, nextOriginalText)));\n }\n\n return _element;\n })]);\n }; //zsviczian\n\n\n if (isExistingElement && this.props.onBeforeTextEdit) {\n const text = this.props.onBeforeTextEdit(element);\n\n if (text && text !== element.originalText) {\n this.scene.replaceAllElements([...this.scene.getElementsIncludingDeleted().map(_element => {\n if (_element.id === element.id && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(_element)) {\n //changing the value of element so this gets edited by textWysiwyg\n element = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(_element, Object.assign({\n originalText: text,\n rawText: text,\n isDeleted: false\n }, (0,_element__WEBPACK_IMPORTED_MODULE_16__.refreshTextDimensions)(_element, (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.getContainerElement)(_element, elementsMap), elementsMap, text)));\n return element;\n }\n\n return _element;\n })]);\n }\n }\n\n (0,_element_textWysiwyg__WEBPACK_IMPORTED_MODULE_88__.textWysiwyg)({\n id: element.id,\n canvas: this.canvas,\n getViewportCoords: (x, y) => {\n const {\n x: viewportX,\n y: viewportY\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.sceneCoordsToViewportCoords)({\n sceneX: x,\n sceneY: y\n }, this.state);\n return [viewportX - this.state.offsetLeft, viewportY - this.state.offsetTop];\n },\n onChange: (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(nextOriginalText => {\n updateElement(nextOriginalText, false);\n\n if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isNonDeletedElement)(element)) {\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.updateBoundElements)(element, elementsMap);\n }\n }),\n onSubmit: (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(({\n viaKeyboard,\n nextOriginalText\n }) => {\n var _a;\n\n const isDeleted = !nextOriginalText.trim(); //zsviczian insert start\n\n const rawText = nextOriginalText; //should this be originalText??\n\n let link = undefined;\n\n if (this.props.onBeforeTextSubmit) {\n const _element = this.scene.getElementsIncludingDeleted().find(el => el.id === element.id && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(el));\n\n if (_element) {\n const dismensionsData = (0,_element__WEBPACK_IMPORTED_MODULE_16__.refreshTextDimensions)(_element, (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.getContainerElement)(_element, elementsMap), elementsMap, nextOriginalText);\n const {\n updatedNextOriginalText,\n nextLink\n } = this.props.onBeforeTextSubmit(element, (_a = dismensionsData === null || dismensionsData === void 0 ? void 0 : dismensionsData.text) !== null && _a !== void 0 ? _a : nextOriginalText, //should never be undefined\n nextOriginalText, isDeleted);\n nextOriginalText = updatedNextOriginalText !== null && updatedNextOriginalText !== void 0 ? updatedNextOriginalText : nextOriginalText;\n link = nextLink;\n }\n } //zsviczian insert end\n\n\n updateElement(nextOriginalText, isDeleted, rawText, link); //zsviczian (added rawText, link, text)\n // select the created text element only if submitting via keyboard\n // (when submitting via click it should act as signal to deselect)\n\n if (!isDeleted && viaKeyboard) {\n const elementIdToSelect = element.containerId ? element.containerId : element.id;\n this.setState(prevState => ({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(Object.assign(Object.assign({}, prevState.selectedElementIds), {\n [elementIdToSelect]: true\n }), prevState)\n }));\n }\n\n if (isDeleted) {\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.fixBindingsAfterDeletion)(this.scene.getNonDeletedElements(), [element]);\n }\n\n if (!isDeleted || isExistingElement) {\n this.store.shouldCaptureIncrement();\n }\n\n this.setState({\n draggingElement: null,\n editingElement: null\n });\n\n if (this.state.activeTool.locked) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursorForShape)(this.interactiveCanvas, this.state);\n }\n\n this.focusContainer();\n }),\n element,\n excalidrawContainer: this.excalidrawContainerRef.current,\n app: this\n }); // deselect all other elements when inserting text\n\n this.deselectElements(); // do an initial update to re-initialize element position since we were\n // modifying element's x/y for sake of editor (case: syncing to remote)\n\n updateElement(element.originalText, false);\n }\n\n deselectElements() {\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, this.state),\n selectedGroupIds: {},\n editingGroupId: null,\n activeEmbeddable: null\n });\n }\n\n getTextElementAtPosition(x, y) {\n const element = this.getElementAtPosition(x, y, {\n includeBoundTextElement: true\n });\n\n if (element && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(element) && !element.isDeleted) {\n return element;\n }\n\n return null;\n }\n /**\r\n * get the pure geometric shape of an excalidraw element\r\n * which is then used for hit detection\r\n */\n\n\n getElementShape(element) {\n var _a, _b;\n\n switch (element.type) {\n case \"rectangle\":\n case \"diamond\":\n case \"frame\":\n case \"magicframe\":\n case \"embeddable\":\n case \"image\":\n case \"iframe\":\n case \"text\":\n case \"selection\":\n return (0,_utils_geometry_shape__WEBPACK_IMPORTED_MODULE_33__.getPolygonShape)(element);\n\n case \"arrow\":\n case \"line\":\n {\n const roughShape = (_b = (_a = _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_67__.ShapeCache.get(element)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_67__.ShapeCache.generateElementShape(element, null)[0];\n const [,,,, cx, cy] = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getElementAbsoluteCoords)(element, this.scene.getNonDeletedElementsMap());\n return (0,_element_collision__WEBPACK_IMPORTED_MODULE_87__.shouldTestInside)(element) ? (0,_utils_geometry_shape__WEBPACK_IMPORTED_MODULE_33__.getClosedCurveShape)(element, roughShape, [element.x, element.y], element.angle, [cx, cy]) : (0,_utils_geometry_shape__WEBPACK_IMPORTED_MODULE_33__.getCurveShape)(roughShape, [element.x, element.y], element.angle, [cx, cy]);\n }\n\n case \"ellipse\":\n return (0,_utils_geometry_shape__WEBPACK_IMPORTED_MODULE_33__.getEllipseShape)(element);\n\n case \"freedraw\":\n {\n const [,,,, cx, cy] = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getElementAbsoluteCoords)(element, this.scene.getNonDeletedElementsMap());\n return (0,_utils_geometry_shape__WEBPACK_IMPORTED_MODULE_33__.getFreedrawShape)(element, [cx, cy], (0,_element_collision__WEBPACK_IMPORTED_MODULE_87__.shouldTestInside)(element));\n }\n }\n }\n\n getBoundTextShape(element) {\n const boundTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.getBoundTextElement)(element, this.scene.getNonDeletedElementsMap());\n\n if (boundTextElement) {\n if (element.type === \"arrow\") {\n return this.getElementShape(Object.assign(Object.assign({}, boundTextElement), _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.getBoundTextElementPosition(element, boundTextElement, this.scene.getNonDeletedElementsMap())));\n }\n\n return this.getElementShape(boundTextElement);\n }\n\n return null;\n }\n\n getElementAtPosition(x, y, opts) {\n const allHitElements = this.getElementsAtPosition(x, y, opts === null || opts === void 0 ? void 0 : opts.includeBoundTextElement, opts === null || opts === void 0 ? void 0 : opts.includeLockedElements);\n\n if (allHitElements.length > 1) {\n if (opts === null || opts === void 0 ? void 0 : opts.preferSelected) {\n for (let index = allHitElements.length - 1; index > -1; index--) {\n if (this.state.selectedElementIds[allHitElements[index].id]) {\n return allHitElements[index];\n }\n }\n }\n\n const elementWithHighestZIndex = allHitElements[allHitElements.length - 1]; // If we're hitting element with highest z-index only on its bounding box\n // while also hitting other element figure, the latter should be considered.\n\n return (0,_element_collision__WEBPACK_IMPORTED_MODULE_87__.hitElementItself)({\n x,\n y,\n element: elementWithHighestZIndex,\n shape: this.getElementShape(elementWithHighestZIndex),\n // when overlapping, we would like to be more precise\n // this also avoids the need to update past tests\n threshold: this.getElementHitThreshold() / 2,\n frameNameBound: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(elementWithHighestZIndex) ? this.frameNameBoundsCache.get(elementWithHighestZIndex) : null\n }) ? elementWithHighestZIndex : allHitElements[allHitElements.length - 2];\n }\n\n if (allHitElements.length === 1) {\n return allHitElements[0];\n }\n\n return null;\n }\n\n getElementsAtPosition(x, y, includeBoundTextElement = false, includeLockedElements = false) {\n const iframeLikes = [];\n const elementsMap = this.scene.getNonDeletedElementsMap();\n const elements = (includeBoundTextElement && includeLockedElements ? this.scene.getNonDeletedElements() : this.scene.getNonDeletedElements().filter(element => (includeLockedElements || !element.locked) && (includeBoundTextElement || !((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(element) && element.containerId)))).filter(el => this.hitElement(x, y, el)).filter(element => {\n // hitting a frame's element from outside the frame is not considered a hit\n const containingFrame = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getContainingFrame)(element, elementsMap);\n return containingFrame && this.state.frameRendering.enabled && this.state.frameRendering.clip ? (0,_frame__WEBPACK_IMPORTED_MODULE_51__.isCursorInFrame)({\n x,\n y\n }, containingFrame, elementsMap) : true;\n }).filter(el => {\n // The parameter elements comes ordered from lower z-index to higher.\n // We want to preserve that order on the returned array.\n // Exception being embeddables which should be on top of everything else in\n // terms of hit testing.\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(el)) {\n iframeLikes.push(el);\n return false;\n }\n\n return true;\n }).concat(iframeLikes);\n return elements;\n }\n\n getElementHitThreshold() {\n return _constants__WEBPACK_IMPORTED_MODULE_12__.DEFAULT_COLLISION_THRESHOLD / this.state.zoom.value;\n }\n\n hitElement(x, y, element, considerBoundingBox = true) {\n // if the element is selected, then hit test is done against its bounding box\n if (considerBoundingBox && this.state.selectedElementIds[element.id] && (0,_element_transformHandles__WEBPACK_IMPORTED_MODULE_48__.shouldShowBoundingBox)([element], this.state)) {\n const selectionShape = (0,_utils_geometry_shape__WEBPACK_IMPORTED_MODULE_33__.getSelectionBoxShape)(element, this.scene.getNonDeletedElementsMap(), this.getElementHitThreshold());\n return (0,_utils_collision__WEBPACK_IMPORTED_MODULE_34__.isPointInShape)([x, y], selectionShape);\n } // take bound text element into consideration for hit collision as well\n\n\n const hitBoundTextOfElement = (0,_element_collision__WEBPACK_IMPORTED_MODULE_87__.hitElementBoundText)(x, y, this.getBoundTextShape(element));\n\n if (hitBoundTextOfElement) {\n return true;\n }\n\n return (0,_element_collision__WEBPACK_IMPORTED_MODULE_87__.hitElementItself)({\n x,\n y,\n element,\n shape: this.getElementShape(element),\n threshold: this.getElementHitThreshold(),\n frameNameBound: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(element) ? this.frameNameBoundsCache.get(element) : null\n });\n }\n\n getTextBindableContainerAtPosition(x, y) {\n const elements = this.scene.getNonDeletedElements();\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (selectedElements.length === 1) {\n return (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isTextBindableContainer)(selectedElements[0], false) ? selectedElements[0] : null;\n }\n\n let hitElement = null; // We need to do hit testing from front (end of the array) to back (beginning of the array)\n\n for (let index = elements.length - 1; index >= 0; --index) {\n if (elements[index].isDeleted) {\n continue;\n }\n\n const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getElementAbsoluteCoords)(elements[index], this.scene.getNonDeletedElementsMap());\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isArrowElement)(elements[index]) && (0,_element_collision__WEBPACK_IMPORTED_MODULE_87__.hitElementItself)({\n x,\n y,\n element: elements[index],\n shape: this.getElementShape(elements[index]),\n threshold: this.getElementHitThreshold()\n })) {\n hitElement = elements[index];\n break;\n } else if (x1 < x && x < x2 && y1 < y && y < y2) {\n hitElement = elements[index];\n break;\n }\n }\n\n return (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isTextBindableContainer)(hitElement, false) ? hitElement : null;\n }\n\n handleHoverSelectedLinearElement(linearElementEditor, scenePointerX, scenePointerY) {\n const elementsMap = this.scene.getNonDeletedElementsMap();\n const element = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.getElement(linearElementEditor.elementId, elementsMap);\n\n if (!element) {\n return;\n }\n\n if (this.state.selectedLinearElement) {\n let hoverPointIndex = -1;\n let segmentMidPointHoveredCoords = null;\n\n if ((0,_element_collision__WEBPACK_IMPORTED_MODULE_87__.hitElementItself)({\n x: scenePointerX,\n y: scenePointerY,\n element,\n shape: this.getElementShape(element)\n })) {\n hoverPointIndex = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.getPointIndexUnderCursor(element, elementsMap, this.state.zoom, scenePointerX, scenePointerY);\n segmentMidPointHoveredCoords = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.getSegmentMidpointHitCoords(linearElementEditor, {\n x: scenePointerX,\n y: scenePointerY\n }, this.state, this.scene.getNonDeletedElementsMap());\n\n if (hoverPointIndex >= 0 || segmentMidPointHoveredCoords) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n } else if (this.hitElement(scenePointerX, scenePointerY, element)) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.MOVE);\n }\n } else if (this.hitElement(scenePointerX, scenePointerY, element)) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.MOVE);\n }\n\n if (this.state.selectedLinearElement.hoverPointIndex !== hoverPointIndex) {\n this.setState({\n selectedLinearElement: Object.assign(Object.assign({}, this.state.selectedLinearElement), {\n hoverPointIndex\n })\n });\n }\n\n if (!_element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.arePointsEqual(this.state.selectedLinearElement.segmentMidPointHoveredCoords, segmentMidPointHoveredCoords)) {\n this.setState({\n selectedLinearElement: Object.assign(Object.assign({}, this.state.selectedLinearElement), {\n segmentMidPointHoveredCoords\n })\n });\n }\n } else {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.AUTO);\n }\n }\n\n updateGestureOnPointerDown(event) {\n gesture.pointers.set(event.pointerId, {\n x: event.clientX,\n y: event.clientY\n });\n\n if (gesture.pointers.size === 2) {\n gesture.lastCenter = (0,_gesture__WEBPACK_IMPORTED_MODULE_22__.getCenter)(gesture.pointers);\n gesture.initialScale = this.state.zoom.value;\n gesture.initialDistance = (0,_gesture__WEBPACK_IMPORTED_MODULE_22__.getDistance)(Array.from(gesture.pointers.values()));\n }\n }\n\n initialPointerDownState(event) {\n const origin = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)(event, this.state);\n const selectedElements = this.scene.getSelectedElements(this.state);\n const [minX, minY, maxX, maxY] = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(selectedElements);\n return {\n origin,\n withCmdOrCtrl: event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD],\n originInGrid: (0,_utils__WEBPACK_IMPORTED_MODULE_35__.tupleToCoors)((0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(origin.x, origin.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.state.gridSize)),\n scrollbars: (0,_scene_scrollbars__WEBPACK_IMPORTED_MODULE_89__.isOverScrollBars)(currentScrollBars, event.clientX - this.state.offsetLeft, event.clientY - this.state.offsetTop),\n // we need to duplicate because we'll be updating this state\n lastCoords: Object.assign({}, origin),\n originalElements: this.scene.getNonDeletedElements().reduce((acc, element) => {\n acc.set(element.id, (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.deepCopyElement)(element));\n return acc;\n }, new Map()),\n resize: {\n handleType: false,\n isResizing: false,\n offset: {\n x: 0,\n y: 0\n },\n arrowDirection: \"origin\",\n center: {\n x: (maxX + minX) / 2,\n y: (maxY + minY) / 2\n }\n },\n hit: {\n element: null,\n allHitElements: [],\n wasAddedToSelection: false,\n hasBeenDuplicated: false,\n hasHitCommonBoundingBoxOfSelectedElements: this.isHittingCommonBoundingBoxOfSelectedElements(origin, selectedElements)\n },\n drag: {\n hasOccurred: false,\n offset: null\n },\n eventListeners: {\n onMove: null,\n onUp: null,\n onKeyUp: null,\n onKeyDown: null\n },\n boxSelection: {\n hasOccurred: false\n }\n };\n } // Returns whether the event is a dragging a scrollbar\n\n\n handleDraggingScrollBar(event, pointerDownState) {\n if (!(pointerDownState.scrollbars.isOverEither && !this.state.multiElement)) {\n return false;\n }\n\n isDraggingScrollBar = true;\n pointerDownState.lastCoords.x = event.clientX;\n pointerDownState.lastCoords.y = event.clientY;\n const onPointerMove = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdatesThrottled)(event => {\n const target = event.target;\n\n if (!(target instanceof HTMLElement)) {\n return;\n }\n\n this.handlePointerMoveOverScrollbars(event, pointerDownState);\n });\n const onPointerUp = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(() => {\n lastPointerUp = null;\n isDraggingScrollBar = false;\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursorForShape)(this.interactiveCanvas, this.state);\n this.setState({\n cursorButton: \"up\"\n });\n this.savePointer(event.clientX, event.clientY, \"up\");\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, onPointerMove);\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, onPointerUp);\n onPointerMove.flush();\n });\n lastPointerUp = onPointerUp;\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, onPointerMove);\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, onPointerUp);\n return true;\n }\n\n isASelectedElement(hitElement) {\n return hitElement != null && this.state.selectedElementIds[hitElement.id];\n }\n\n isHittingCommonBoundingBoxOfSelectedElements(point, selectedElements) {\n if (selectedElements.length < 2) {\n return false;\n } // How many pixels off the shape boundary we still consider a hit\n\n\n const threshold = this.getElementHitThreshold();\n const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(selectedElements);\n return point.x > x1 - threshold && point.x < x2 + threshold && point.y > y1 - threshold && point.y < y2 + threshold;\n }\n\n getCurrentItemRoundness(elementType) {\n return this.state.currentItemRoundness === \"round\" ? {\n type: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isUsingAdaptiveRadius)(elementType) ? _constants__WEBPACK_IMPORTED_MODULE_12__.ROUNDNESS.ADAPTIVE_RADIUS : _constants__WEBPACK_IMPORTED_MODULE_12__.ROUNDNESS.PROPORTIONAL_RADIUS\n } : null;\n }\n\n maybeCacheReferenceSnapPoints(event, selectedElements, recomputeAnyways = false) {\n if ((0,_snapping__WEBPACK_IMPORTED_MODULE_59__.isSnappingEnabled)({\n event,\n appState: this.state,\n selectedElements\n }) && (recomputeAnyways || !_snapping__WEBPACK_IMPORTED_MODULE_59__.SnapCache.getReferenceSnapPoints())) {\n _snapping__WEBPACK_IMPORTED_MODULE_59__.SnapCache.setReferenceSnapPoints((0,_snapping__WEBPACK_IMPORTED_MODULE_59__.getReferenceSnapPoints)(this.scene.getNonDeletedElements(), selectedElements, this.state, this.scene.getNonDeletedElementsMap()));\n }\n }\n\n maybeCacheVisibleGaps(event, selectedElements, recomputeAnyways = false) {\n if ((0,_snapping__WEBPACK_IMPORTED_MODULE_59__.isSnappingEnabled)({\n event,\n appState: this.state,\n selectedElements\n }) && (recomputeAnyways || !_snapping__WEBPACK_IMPORTED_MODULE_59__.SnapCache.getVisibleGaps())) {\n _snapping__WEBPACK_IMPORTED_MODULE_59__.SnapCache.setVisibleGaps((0,_snapping__WEBPACK_IMPORTED_MODULE_59__.getVisibleGaps)(this.scene.getNonDeletedElements(), selectedElements, this.state, this.scene.getNonDeletedElementsMap()));\n }\n }\n\n onKeyDownFromPointerDownHandler(pointerDownState) {\n return (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(event => {\n if (this.maybeHandleResize(pointerDownState, event)) {\n return;\n }\n\n this.maybeDragNewGenericElement(pointerDownState, event);\n });\n }\n\n onKeyUpFromPointerDownHandler(pointerDownState) {\n return (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(event => {\n // Prevents focus from escaping excalidraw tab\n event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ALT && event.preventDefault();\n\n if (this.maybeHandleResize(pointerDownState, event)) {\n return;\n }\n\n this.maybeDragNewGenericElement(pointerDownState, event);\n });\n }\n\n onPointerMoveFromPointerDownHandler(pointerDownState) {\n return (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdatesThrottled)(event => {\n var _a, _b; //To avoid pointerMove canceling the selection of locked elements on mobile //zsviczian\n\n\n if (Boolean(this.state.contextMenu)) {\n return;\n } // We need to initialize dragOffsetXY only after we've updated\n // `state.selectedElementIds` on pointerDown. Doing it here in pointerMove\n // event handler should hopefully ensure we're already working with\n // the updated state.\n\n\n if (pointerDownState.drag.offset === null) {\n pointerDownState.drag.offset = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.tupleToCoors)((0,_element__WEBPACK_IMPORTED_MODULE_16__.getDragOffsetXY)(this.scene.getSelectedElements(this.state), pointerDownState.origin.x, pointerDownState.origin.y));\n }\n\n const target = event.target;\n\n if (!(target instanceof HTMLElement)) {\n return;\n }\n\n if (this.handlePointerMoveOverScrollbars(event, pointerDownState)) {\n return;\n }\n\n const pointerCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)(event, this.state);\n\n if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state)) {\n this.handleEraser(event, pointerDownState, pointerCoords);\n return;\n }\n\n if (this.state.activeTool.type === \"laser\") {\n this.laserTrails.addPointToPath(pointerCoords.x, pointerCoords.y);\n }\n\n const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerCoords.x, pointerCoords.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.state.gridSize); // for arrows/lines, don't start dragging until a given threshold\n // to ensure we don't create a 2-point arrow by mistake when\n // user clicks mouse in a way that it moves a tiny bit (thus\n // triggering pointermove)\n\n if (!pointerDownState.drag.hasOccurred && (this.state.activeTool.type === \"arrow\" || this.state.activeTool.type === \"line\")) {\n if ((0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(pointerCoords.x, pointerCoords.y, pointerDownState.origin.x, pointerDownState.origin.y) < _constants__WEBPACK_IMPORTED_MODULE_12__.DRAGGING_THRESHOLD) {\n return;\n }\n }\n\n if (pointerDownState.resize.isResizing) {\n pointerDownState.lastCoords.x = pointerCoords.x;\n pointerDownState.lastCoords.y = pointerCoords.y;\n\n if (this.maybeHandleResize(pointerDownState, event)) {\n return true;\n }\n }\n\n const elementsMap = this.scene.getNonDeletedElementsMap();\n\n if (this.state.selectedLinearElement) {\n const linearElementEditor = this.state.editingLinearElement || this.state.selectedLinearElement;\n\n if (_element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.shouldAddMidpoint(this.state.selectedLinearElement, pointerCoords, this.state, elementsMap)) {\n const ret = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.addMidpoint(this.state.selectedLinearElement, pointerCoords, this.state, !event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD], elementsMap);\n\n if (!ret) {\n return;\n } // Since we are reading from previous state which is not possible with\n // automatic batching in React 18 hence using flush sync to synchronously\n // update the state. Check https://github.com/excalidraw/excalidraw/pull/5508 for more details.\n\n\n (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.flushSync)(() => {\n if (this.state.selectedLinearElement) {\n this.setState({\n selectedLinearElement: Object.assign(Object.assign({}, this.state.selectedLinearElement), {\n pointerDownState: ret.pointerDownState,\n selectedPointsIndices: ret.selectedPointsIndices\n })\n });\n }\n\n if (this.state.editingLinearElement) {\n this.setState({\n editingLinearElement: Object.assign(Object.assign({}, this.state.editingLinearElement), {\n pointerDownState: ret.pointerDownState,\n selectedPointsIndices: ret.selectedPointsIndices\n })\n });\n }\n });\n return;\n } else if (linearElementEditor.pointerDownState.segmentMidpoint.value !== null && !linearElementEditor.pointerDownState.segmentMidpoint.added) {\n return;\n }\n\n const didDrag = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handlePointDragging(event, this.state, pointerCoords.x, pointerCoords.y, (element, pointsSceneCoords) => {\n this.maybeSuggestBindingsForLinearElementAtCoords(element, pointsSceneCoords);\n }, linearElementEditor, this.scene.getNonDeletedElementsMap());\n\n if (didDrag) {\n pointerDownState.lastCoords.x = pointerCoords.x;\n pointerDownState.lastCoords.y = pointerCoords.y;\n pointerDownState.drag.hasOccurred = true;\n\n if (this.state.editingLinearElement && !this.state.editingLinearElement.isDragging) {\n this.setState({\n editingLinearElement: Object.assign(Object.assign({}, this.state.editingLinearElement), {\n isDragging: true\n })\n });\n }\n\n if (!this.state.selectedLinearElement.isDragging) {\n this.setState({\n selectedLinearElement: Object.assign(Object.assign({}, this.state.selectedLinearElement), {\n isDragging: true\n })\n });\n }\n\n return;\n }\n }\n\n const hasHitASelectedElement = pointerDownState.hit.allHitElements.some(element => this.isASelectedElement(element));\n const isSelectingPointsInLineEditor = this.state.editingLinearElement && event.shiftKey && this.state.editingLinearElement.elementId === ((_a = pointerDownState.hit.element) === null || _a === void 0 ? void 0 : _a.id);\n\n if ((hasHitASelectedElement || pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements) && !isSelectingPointsInLineEditor) {\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (selectedElements.every(element => element.locked)) {\n return;\n }\n\n const selectedElementsHasAFrame = selectedElements.find(e => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(e));\n const topLayerFrame = this.getTopLayerFrameAtSceneCoords(pointerCoords);\n this.setState({\n frameToHighlight: topLayerFrame && !selectedElementsHasAFrame ? topLayerFrame : null\n }); // Marking that click was used for dragging to check\n // if elements should be deselected on pointerup\n\n pointerDownState.drag.hasOccurred = true;\n this.setState({\n selectedElementsAreBeingDragged: true\n }); // prevent dragging even if we're no longer holding cmd/ctrl otherwise\n // it would have weird results (stuff jumping all over the screen)\n // Checking for editingElement to avoid jump while editing on mobile #6503\n\n if (selectedElements.length > 0 && !pointerDownState.withCmdOrCtrl && !this.state.editingElement && ((_b = this.state.activeEmbeddable) === null || _b === void 0 ? void 0 : _b.state) !== \"active\") {\n const dragOffset = {\n x: pointerCoords.x - pointerDownState.origin.x,\n y: pointerCoords.y - pointerDownState.origin.y\n };\n const originalElements = [...pointerDownState.originalElements.values()]; // We only drag in one direction if shift is pressed\n\n const lockDirection = event.shiftKey;\n\n if (lockDirection) {\n const distanceX = Math.abs(dragOffset.x);\n const distanceY = Math.abs(dragOffset.y);\n const lockX = lockDirection && distanceX < distanceY;\n const lockY = lockDirection && distanceX > distanceY;\n\n if (lockX) {\n dragOffset.x = 0;\n }\n\n if (lockY) {\n dragOffset.y = 0;\n }\n } // Snap cache *must* be synchronously popuplated before initial drag,\n // otherwise the first drag even will not snap, causing a jump before\n // it snaps to its position if previously snapped already.\n\n\n this.maybeCacheVisibleGaps(event, selectedElements);\n this.maybeCacheReferenceSnapPoints(event, selectedElements);\n const {\n snapOffset,\n snapLines\n } = (0,_snapping__WEBPACK_IMPORTED_MODULE_59__.snapDraggedElements)(originalElements, dragOffset, this.state, event, this.scene.getNonDeletedElementsMap());\n this.setState({\n snapLines\n }); // when we're editing the name of a frame, we want the user to be\n // able to select and interact with the text input\n\n !this.state.editingFrame && (0,_element__WEBPACK_IMPORTED_MODULE_16__.dragSelectedElements)(pointerDownState, selectedElements, dragOffset, this.state, this.scene, snapOffset, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.state.gridSize);\n this.setState({\n suggestedBindings: (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getSuggestedBindingsForArrows)(selectedElements, this)\n }); // We duplicate the selected element if alt is pressed on pointer move\n\n if (event.altKey && !pointerDownState.hit.hasBeenDuplicated) {\n // Move the currently selected elements to the top of the z index stack, and\n // put the duplicates where the selected elements used to be.\n // (the origin point where the dragging started)\n pointerDownState.hit.hasBeenDuplicated = true;\n const nextElements = [];\n const elementsToAppend = [];\n const groupIdMap = new Map();\n const oldIdToDuplicatedId = new Map();\n const hitElement = pointerDownState.hit.element;\n const selectedElementIds = new Set(this.scene.getSelectedElements({\n selectedElementIds: this.state.selectedElementIds,\n includeBoundTextElement: true,\n includeElementsInFrames: true\n }).map(element => element.id));\n const elements = this.scene.getElementsIncludingDeleted();\n\n for (const element of elements) {\n if (selectedElementIds.has(element.id) || // case: the state.selectedElementIds might not have been\n // updated yet by the time this mousemove event is fired\n element.id === (hitElement === null || hitElement === void 0 ? void 0 : hitElement.id) && pointerDownState.hit.wasAddedToSelection) {\n const duplicatedElement = (0,_element__WEBPACK_IMPORTED_MODULE_16__.duplicateElement)(this.state.editingGroupId, groupIdMap, element);\n const origElement = pointerDownState.originalElements.get(element.id);\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(duplicatedElement, {\n x: origElement.x,\n y: origElement.y\n }); // put duplicated element to pointerDownState.originalElements\n // so that we can snap to the duplicated element without releasing\n\n pointerDownState.originalElements.set(duplicatedElement.id, duplicatedElement);\n nextElements.push(duplicatedElement);\n elementsToAppend.push(element);\n oldIdToDuplicatedId.set(element.id, duplicatedElement.id);\n } else {\n nextElements.push(element);\n }\n }\n\n const nextSceneElements = [...nextElements, ...elementsToAppend];\n (0,_fractionalIndex__WEBPACK_IMPORTED_MODULE_90__.syncMovedIndices)(nextSceneElements, (0,_utils__WEBPACK_IMPORTED_MODULE_35__.arrayToMap)(elementsToAppend));\n (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.bindTextToShapeAfterDuplication)(nextElements, elementsToAppend, oldIdToDuplicatedId);\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.fixBindingsAfterDuplication)(nextSceneElements, elementsToAppend, oldIdToDuplicatedId, \"duplicatesServeAsOld\");\n (0,_frame__WEBPACK_IMPORTED_MODULE_51__.bindElementsToFramesAfterDuplication)(nextSceneElements, elementsToAppend, oldIdToDuplicatedId);\n this.scene.replaceAllElements(nextSceneElements);\n this.maybeCacheVisibleGaps(event, selectedElements, true);\n this.maybeCacheReferenceSnapPoints(event, selectedElements, true);\n }\n\n return;\n }\n } // It is very important to read this.state within each move event,\n // otherwise we would read a stale one!\n\n\n const draggingElement = this.state.draggingElement;\n\n if (!draggingElement) {\n return;\n }\n\n if (draggingElement.type === \"freedraw\") {\n const points = draggingElement.points;\n const dx = pointerCoords.x - draggingElement.x;\n const dy = pointerCoords.y - draggingElement.y;\n const lastPoint = points.length > 0 && points[points.length - 1];\n const discardPoint = lastPoint && lastPoint[0] === dx && lastPoint[1] === dy;\n\n if (!discardPoint) {\n const strokeOptions = this.state.currentStrokeOptions; //zsviczian\n\n const pressures = draggingElement.simulatePressure ? draggingElement.pressures : [//zsviczian\n ...draggingElement.pressures, (strokeOptions === null || strokeOptions === void 0 ? void 0 : strokeOptions.constantPressure) ? 1 : event.pressure];\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(draggingElement, {\n points: [...points, [dx, dy]],\n pressures\n });\n }\n } else if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(draggingElement)) {\n pointerDownState.drag.hasOccurred = true;\n this.setState({\n selectedElementsAreBeingDragged: true\n });\n const points = draggingElement.points;\n let dx = gridX - draggingElement.x;\n let dy = gridY - draggingElement.y;\n\n if ((0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldRotateWithDiscreteAngle)(event) && points.length === 2) {\n ({\n width: dx,\n height: dy\n } = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getLockedLinearCursorAlignSize)(draggingElement.x, draggingElement.y, pointerCoords.x, pointerCoords.y));\n }\n\n if (points.length === 1) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(draggingElement, {\n points: [...points, [dx, dy]]\n });\n } else if (points.length === 2) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(draggingElement, {\n points: [...points.slice(0, -1), [dx, dy]]\n });\n }\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElement)(draggingElement, false)) {\n // When creating a linear element by dragging\n this.maybeSuggestBindingsForLinearElementAtCoords(draggingElement, [pointerCoords], this.state.startBoundElement);\n }\n } else {\n pointerDownState.lastCoords.x = pointerCoords.x;\n pointerDownState.lastCoords.y = pointerCoords.y;\n this.maybeDragNewGenericElement(pointerDownState, event);\n }\n\n if (this.state.activeTool.type === \"selection\") {\n pointerDownState.boxSelection.hasOccurred = true;\n const elements = this.scene.getNonDeletedElements(); // box-select line editor points\n\n if (this.state.editingLinearElement) {\n _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handleBoxSelection(event, this.state, this.setState.bind(this), this.scene.getNonDeletedElementsMap()); // regular box-select\n } else {\n let shouldReuseSelection = true;\n\n if (!event.shiftKey && (0,_scene__WEBPACK_IMPORTED_MODULE_29__.isSomeElementSelected)(elements, this.state)) {\n if (pointerDownState.withCmdOrCtrl && pointerDownState.hit.element) {\n this.setState(prevState => (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)(Object.assign(Object.assign({}, prevState), {\n selectedElementIds: {\n [pointerDownState.hit.element.id]: true\n }\n }), this.scene.getNonDeletedElements(), prevState, this));\n } else {\n shouldReuseSelection = false;\n }\n }\n\n const elementsWithinSelection = (0,_scene__WEBPACK_IMPORTED_MODULE_29__.getElementsWithinSelection)(elements, draggingElement, this.scene.getNonDeletedElementsMap());\n this.setState(prevState => {\n const nextSelectedElementIds = Object.assign(Object.assign({}, shouldReuseSelection && prevState.selectedElementIds), elementsWithinSelection.reduce((acc, element) => {\n acc[element.id] = true;\n return acc;\n }, {}));\n\n if (pointerDownState.hit.element) {\n // if using ctrl/cmd, select the hitElement only if we\n // haven't box-selected anything else\n if (!elementsWithinSelection.length) {\n nextSelectedElementIds[pointerDownState.hit.element.id] = true;\n } else {\n delete nextSelectedElementIds[pointerDownState.hit.element.id];\n }\n }\n\n prevState = !shouldReuseSelection ? Object.assign(Object.assign({}, prevState), {\n selectedGroupIds: {},\n editingGroupId: null\n }) : prevState;\n return Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n editingGroupId: prevState.editingGroupId,\n selectedElementIds: nextSelectedElementIds\n }, this.scene.getNonDeletedElements(), prevState, this)), {\n // select linear element only when we haven't box-selected anything else\n selectedLinearElement: elementsWithinSelection.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(elementsWithinSelection[0]) ? new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(elementsWithinSelection[0]) : null,\n showHyperlinkPopup: elementsWithinSelection.length === 1 && (elementsWithinSelection[0].link || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(elementsWithinSelection[0])) ? \"info\" : false\n });\n });\n }\n }\n });\n } // Returns whether the pointer move happened over either scrollbar\n\n\n handlePointerMoveOverScrollbars(event, pointerDownState) {\n if (pointerDownState.scrollbars.isOverHorizontal) {\n const x = event.clientX;\n const dx = x - pointerDownState.lastCoords.x;\n this.translateCanvas({\n scrollX: this.state.scrollX - dx / this.state.zoom.value\n });\n pointerDownState.lastCoords.x = x;\n return true;\n }\n\n if (pointerDownState.scrollbars.isOverVertical) {\n const y = event.clientY;\n const dy = y - pointerDownState.lastCoords.y;\n this.translateCanvas({\n scrollY: this.state.scrollY - dy / this.state.zoom.value\n });\n pointerDownState.lastCoords.y = y;\n return true;\n }\n\n return false;\n }\n\n onPointerUpFromPointerDownHandler(pointerDownState) {\n return (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(childEvent => {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;\n\n this.removePointer(childEvent);\n\n if (pointerDownState.eventListeners.onMove) {\n pointerDownState.eventListeners.onMove.flush();\n }\n\n const {\n draggingElement,\n resizingElement,\n multiElement,\n activeTool,\n isResizing,\n isRotating\n } = this.state;\n this.setState(prevState => ({\n isResizing: false,\n isRotating: false,\n resizingElement: null,\n selectionElement: null,\n frameToHighlight: null,\n elementsToHighlight: null,\n cursorButton: \"up\",\n // text elements are reset on finalize, and resetting on pointerup\n // may cause issues with double taps\n editingElement: multiElement || (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(this.state.editingElement) ? this.state.editingElement : null,\n snapLines: (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateStable)(prevState.snapLines, []),\n originSnapOffset: null\n }));\n _snapping__WEBPACK_IMPORTED_MODULE_59__.SnapCache.setReferenceSnapPoints(null);\n _snapping__WEBPACK_IMPORTED_MODULE_59__.SnapCache.setVisibleGaps(null);\n this.savePointer(childEvent.clientX, childEvent.clientY, \"up\");\n this.setState({\n selectedElementsAreBeingDragged: false\n });\n const elementsMap = this.scene.getNonDeletedElementsMap(); // Handle end of dragging a point of a linear element, might close a loop\n // and sets binding element\n\n if (this.state.editingLinearElement) {\n if (!pointerDownState.boxSelection.hasOccurred && ((_b = (_a = pointerDownState.hit) === null || _a === void 0 ? void 0 : _a.element) === null || _b === void 0 ? void 0 : _b.id) !== this.state.editingLinearElement.elementId) {\n this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n } else {\n const editingLinearElement = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handlePointerUp(childEvent, this.state.editingLinearElement, this.state, this);\n\n if (editingLinearElement !== this.state.editingLinearElement) {\n this.setState({\n editingLinearElement,\n suggestedBindings: []\n });\n }\n }\n } else if (this.state.selectedLinearElement) {\n if (((_d = (_c = pointerDownState.hit) === null || _c === void 0 ? void 0 : _c.element) === null || _d === void 0 ? void 0 : _d.id) !== this.state.selectedLinearElement.elementId) {\n const selectedELements = this.scene.getSelectedElements(this.state); // set selectedLinearElement to null if there is more than one element selected since we don't want to show linear element handles\n\n if (selectedELements.length > 1) {\n this.setState({\n selectedLinearElement: null\n });\n }\n } else {\n const linearElementEditor = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handlePointerUp(childEvent, this.state.selectedLinearElement, this.state, this);\n const {\n startBindingElement,\n endBindingElement\n } = linearElementEditor;\n const element = this.scene.getElement(linearElementEditor.elementId);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElement)(element)) {\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.bindOrUnbindLinearElement)(element, startBindingElement, endBindingElement, elementsMap);\n }\n\n if (linearElementEditor !== this.state.selectedLinearElement) {\n this.setState({\n selectedLinearElement: Object.assign(Object.assign({}, linearElementEditor), {\n selectedPointsIndices: null\n }),\n suggestedBindings: []\n });\n }\n }\n }\n\n this.missingPointerEventCleanupEmitter.clear();\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, pointerDownState.eventListeners.onMove);\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, pointerDownState.eventListeners.onUp);\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYDOWN, pointerDownState.eventListeners.onKeyDown);\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYUP, pointerDownState.eventListeners.onKeyUp);\n\n if (this.state.pendingImageElementId) {\n this.setState({\n pendingImageElementId: null\n });\n }\n\n (_f = (_e = this.props) === null || _e === void 0 ? void 0 : _e.onPointerUp) === null || _f === void 0 ? void 0 : _f.call(_e, activeTool, pointerDownState);\n this.onPointerUpEmitter.trigger(this.state.activeTool, pointerDownState, childEvent);\n\n if ((draggingElement === null || draggingElement === void 0 ? void 0 : draggingElement.type) === \"freedraw\") {\n const pointerCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)(childEvent, this.state);\n const points = draggingElement.points;\n let dx = pointerCoords.x - draggingElement.x;\n let dy = pointerCoords.y - draggingElement.y; // Allows dots to avoid being flagged as infinitely small\n\n if (dx === points[0][0] && dy === points[0][1]) {\n dy += 0.0001;\n dx += 0.0001;\n }\n\n const pressures = draggingElement.simulatePressure ? [] : [...draggingElement.pressures, childEvent.pressure];\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(draggingElement, {\n points: [...points, [dx, dy]],\n pressures,\n lastCommittedPoint: [dx, dy]\n });\n this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n return;\n }\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isImageElement)(draggingElement)) {\n const imageElement = draggingElement;\n\n try {\n this.initializeImageDimensions(imageElement);\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({\n [imageElement.id]: true\n }, this.state)\n }, () => {\n this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n });\n } catch (error) {\n console.error(error);\n this.scene.replaceAllElements(this.scene.getElementsIncludingDeleted().filter(el => el.id !== imageElement.id));\n this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n }\n\n return;\n }\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(draggingElement)) {\n if (draggingElement.points.length > 1) {\n this.store.shouldCaptureIncrement();\n }\n\n const pointerCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)(childEvent, this.state);\n\n if (!pointerDownState.drag.hasOccurred && draggingElement && !multiElement) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(draggingElement, {\n points: [...draggingElement.points, [pointerCoords.x - draggingElement.x, pointerCoords.y - draggingElement.y]]\n });\n this.setState({\n multiElement: draggingElement,\n editingElement: this.state.draggingElement\n });\n } else if (pointerDownState.drag.hasOccurred && !multiElement) {\n if ((0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.isBindingEnabled)(this.state) && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElement)(draggingElement, false)) {\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.maybeBindLinearElement)(draggingElement, this.state, pointerCoords, this);\n }\n\n this.setState({\n suggestedBindings: [],\n startBoundElement: null\n });\n\n if (!activeTool.locked) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.resetCursor)(this.interactiveCanvas);\n this.setState(prevState => ({\n draggingElement: null,\n activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateActiveTool)(this.state, {\n type: \"selection\"\n }),\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(Object.assign(Object.assign({}, prevState.selectedElementIds), {\n [draggingElement.id]: true\n }), prevState),\n selectedLinearElement: new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(draggingElement)\n }));\n } else {\n this.setState(prevState => ({\n draggingElement: null\n }));\n }\n }\n\n return;\n }\n\n if (activeTool.type !== \"selection\" && draggingElement && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isInvisiblySmallElement)(draggingElement)) {\n // remove invisible element which was added in onPointerDown\n // update the store snapshot, so that invisible elements are not captured by the store\n this.updateScene({\n elements: this.scene.getElementsIncludingDeleted().filter(el => el.id !== draggingElement.id),\n appState: {\n draggingElement: null\n },\n storeAction: _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.UPDATE\n });\n return;\n }\n\n if (draggingElement) {\n if (pointerDownState.drag.hasOccurred) {\n const sceneCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)(childEvent, this.state); // when editing the points of a linear element, we check if the\n // linear element still is in the frame afterwards\n // if not, the linear element will be removed from its frame (if any)\n\n if (this.state.selectedLinearElement && this.state.selectedLinearElement.isDragging) {\n const linearElement = this.scene.getElement(this.state.selectedLinearElement.elementId);\n\n if (linearElement === null || linearElement === void 0 ? void 0 : linearElement.frameId) {\n const frame = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getContainingFrame)(linearElement, elementsMap);\n\n if (frame && linearElement) {\n if (!(0,_frame__WEBPACK_IMPORTED_MODULE_51__.elementOverlapsWithFrame)(linearElement, frame, this.scene.getNonDeletedElementsMap())) {\n // remove the linear element from all groups\n // before removing it from the frame as well\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(linearElement, {\n groupIds: []\n });\n (0,_frame__WEBPACK_IMPORTED_MODULE_51__.removeElementsFromFrame)([linearElement], this.scene.getNonDeletedElementsMap());\n this.scene.triggerUpdate();\n }\n }\n }\n } else {\n // update the relationships between selected elements and frames\n const topLayerFrame = this.getTopLayerFrameAtSceneCoords(sceneCoords);\n const selectedElements = this.scene.getSelectedElements(this.state);\n let nextElements = this.scene.getElementsMapIncludingDeleted();\n\n const updateGroupIdsAfterEditingGroup = elements => {\n if (elements.length > 0) {\n for (const element of elements) {\n const index = element.groupIds.indexOf(this.state.editingGroupId);\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n groupIds: element.groupIds.slice(0, index)\n }, false);\n }\n\n nextElements.forEach(element => {\n if (element.groupIds.length && (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(nextElements, element.groupIds[element.groupIds.length - 1]).length < 2) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n groupIds: []\n }, false);\n }\n });\n this.setState({\n editingGroupId: null\n });\n }\n };\n\n if (topLayerFrame && !this.state.selectedElementIds[topLayerFrame.id]) {\n const elementsToAdd = selectedElements.filter(element => element.frameId !== topLayerFrame.id && (0,_frame__WEBPACK_IMPORTED_MODULE_51__.isElementInFrame)(element, nextElements, this.state));\n\n if (this.state.editingGroupId) {\n updateGroupIdsAfterEditingGroup(elementsToAdd);\n }\n\n nextElements = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.addElementsToFrame)(nextElements, elementsToAdd, topLayerFrame);\n } else if (!topLayerFrame) {\n if (this.state.editingGroupId) {\n const elementsToRemove = selectedElements.filter(element => element.frameId && !(0,_frame__WEBPACK_IMPORTED_MODULE_51__.isElementInFrame)(element, nextElements, this.state));\n updateGroupIdsAfterEditingGroup(elementsToRemove);\n }\n }\n\n nextElements = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.updateFrameMembershipOfSelectedElements)(nextElements, this.state, this);\n this.scene.replaceAllElements(nextElements);\n }\n }\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(draggingElement)) {\n const elementsInsideFrame = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getElementsInNewFrame)(this.scene.getElementsIncludingDeleted(), draggingElement, this.scene.getNonDeletedElementsMap());\n this.scene.replaceAllElements((0,_frame__WEBPACK_IMPORTED_MODULE_51__.addElementsToFrame)(this.scene.getElementsMapIncludingDeleted(), elementsInsideFrame, draggingElement));\n }\n\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(draggingElement, (0,_element__WEBPACK_IMPORTED_MODULE_16__.getNormalizedDimensions)(draggingElement));\n }\n\n if (resizingElement) {\n this.store.shouldCaptureIncrement();\n }\n\n if (resizingElement && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isInvisiblySmallElement)(resizingElement)) {\n // update the store snapshot, so that invisible elements are not captured by the store\n this.updateScene({\n elements: this.scene.getElementsIncludingDeleted().filter(el => el.id !== resizingElement.id),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.UPDATE\n });\n } // handle frame membership for resizing frames and/or selected elements\n\n\n if (pointerDownState.resize.isResizing) {\n let nextElements = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.updateFrameMembershipOfSelectedElements)(this.scene.getElementsIncludingDeleted(), this.state, this);\n const selectedFrames = this.scene.getSelectedElements(this.state).filter(element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(element));\n\n for (const frame of selectedFrames) {\n nextElements = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.replaceAllElementsInFrame)(nextElements, (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getElementsInResizingFrame)(this.scene.getElementsIncludingDeleted(), frame, this.state, elementsMap), frame, this);\n }\n\n this.scene.replaceAllElements(nextElements);\n } // Code below handles selection when element(s) weren't\n // drag or added to selection on pointer down phase.\n\n\n const hitElement = pointerDownState.hit.element;\n\n if (((_g = this.state.selectedLinearElement) === null || _g === void 0 ? void 0 : _g.elementId) !== (hitElement === null || hitElement === void 0 ? void 0 : hitElement.id) && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(hitElement)) {\n const selectedELements = this.scene.getSelectedElements(this.state); // set selectedLinearElement when no other element selected except\n // the one we've hit\n\n if (selectedELements.length === 1) {\n this.setState({\n selectedLinearElement: new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(hitElement)\n });\n }\n }\n\n const pointerStart = this.lastPointerDownEvent;\n const pointerEnd = this.lastPointerUpEvent || this.lastPointerMoveEvent;\n\n if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state) && pointerStart && pointerEnd) {\n this.eraserTrail.endPath();\n const draggedDistance = (0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(pointerStart.clientX, pointerStart.clientY, pointerEnd.clientX, pointerEnd.clientY);\n\n if (draggedDistance === 0) {\n const scenePointer = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)({\n clientX: pointerEnd.clientX,\n clientY: pointerEnd.clientY\n }, this.state);\n const hitElements = this.getElementsAtPosition(scenePointer.x, scenePointer.y);\n hitElements.forEach(hitElement => this.elementsPendingErasure.add(hitElement.id));\n }\n\n this.eraseElements();\n return;\n } else if (this.elementsPendingErasure.size) {\n this.restoreReadyToEraseElements();\n }\n\n if (hitElement && !pointerDownState.drag.hasOccurred && !pointerDownState.hit.wasAddedToSelection && ( // if we're editing a line, pointerup shouldn't switch selection if\n // box selected\n !this.state.editingLinearElement || !pointerDownState.boxSelection.hasOccurred)) {\n // when inside line editor, shift selects points instead\n if (childEvent.shiftKey && !this.state.editingLinearElement) {\n if (this.state.selectedElementIds[hitElement.id]) {\n if ((0,_groups__WEBPACK_IMPORTED_MODULE_23__.isSelectedViaGroup)(this.state, hitElement)) {\n this.setState(_prevState => {\n const nextSelectedElementIds = Object.assign({}, _prevState.selectedElementIds); // We want to unselect all groups hitElement is part of\n // as well as all elements that are part of the groups\n // hitElement is part of\n\n for (const groupedElement of hitElement.groupIds.flatMap(groupId => (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(this.scene.getNonDeletedElements(), groupId))) {\n delete nextSelectedElementIds[groupedElement.id];\n }\n\n return {\n selectedGroupIds: Object.assign(Object.assign({}, _prevState.selectedElementIds), hitElement.groupIds.map(gId => ({\n [gId]: false\n })).reduce((prev, acc) => Object.assign(Object.assign({}, prev), acc), {})),\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(nextSelectedElementIds, _prevState)\n };\n }); // if not dragging a linear element point (outside editor)\n } else if (!((_h = this.state.selectedLinearElement) === null || _h === void 0 ? void 0 : _h.isDragging)) {\n // remove element from selection while\n // keeping prev elements selected\n this.setState(prevState => {\n const newSelectedElementIds = Object.assign({}, prevState.selectedElementIds);\n delete newSelectedElementIds[hitElement.id];\n const newSelectedElements = (0,_scene__WEBPACK_IMPORTED_MODULE_29__.getSelectedElements)(this.scene.getNonDeletedElements(), {\n selectedElementIds: newSelectedElementIds\n });\n return Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n editingGroupId: prevState.editingGroupId,\n selectedElementIds: newSelectedElementIds\n }, this.scene.getNonDeletedElements(), prevState, this)), {\n // set selectedLinearElement only if thats the only element selected\n selectedLinearElement: newSelectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(newSelectedElements[0]) ? new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(newSelectedElements[0]) : prevState.selectedLinearElement\n });\n });\n }\n } else if (hitElement.frameId && this.state.selectedElementIds[hitElement.frameId]) {\n // when hitElement is part of a selected frame, deselect the frame\n // to avoid frame and containing elements selected simultaneously\n this.setState(prevState => {\n var _a, _b;\n\n const nextSelectedElementIds = Object.assign(Object.assign({}, prevState.selectedElementIds), {\n [hitElement.id]: true\n }); // deselect the frame\n\n delete nextSelectedElementIds[hitElement.frameId]; // deselect groups containing the frame\n\n ((_b = (_a = this.scene.getElement(hitElement.frameId)) === null || _a === void 0 ? void 0 : _a.groupIds) !== null && _b !== void 0 ? _b : []).flatMap(gid => (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(this.scene.getNonDeletedElements(), gid)).forEach(element => {\n delete nextSelectedElementIds[element.id];\n });\n return Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n editingGroupId: prevState.editingGroupId,\n selectedElementIds: nextSelectedElementIds\n }, this.scene.getNonDeletedElements(), prevState, this)), {\n showHyperlinkPopup: hitElement.link || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(hitElement) ? \"info\" : false\n });\n });\n } else {\n // add element to selection while keeping prev elements selected\n this.setState(_prevState => ({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(Object.assign(Object.assign({}, _prevState.selectedElementIds), {\n [hitElement.id]: true\n }), _prevState)\n }));\n }\n } else {\n this.setState(prevState => {\n var _a;\n\n return Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n editingGroupId: prevState.editingGroupId,\n selectedElementIds: {\n [hitElement.id]: true\n }\n }, this.scene.getNonDeletedElements(), prevState, this)), {\n selectedLinearElement: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(hitElement) && // Don't set `selectedLinearElement` if its same as the hitElement, this is mainly to prevent resetting the `hoverPointIndex` to -1.\n // Future we should update the API to take care of setting the correct `hoverPointIndex` when initialized\n ((_a = prevState.selectedLinearElement) === null || _a === void 0 ? void 0 : _a.elementId) !== hitElement.id ? new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(hitElement) : prevState.selectedLinearElement\n });\n });\n }\n }\n\n if ( // not dragged\n !pointerDownState.drag.hasOccurred && // not resized\n !this.state.isResizing && ( // only hitting the bounding box of the previous hit element\n hitElement && (0,_element_collision__WEBPACK_IMPORTED_MODULE_87__.hitElementBoundingBoxOnly)({\n x: pointerDownState.origin.x,\n y: pointerDownState.origin.y,\n element: hitElement,\n shape: this.getElementShape(hitElement),\n threshold: this.getElementHitThreshold(),\n frameNameBound: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(hitElement) ? this.frameNameBoundsCache.get(hitElement) : null\n }, elementsMap) || !hitElement && pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements)) {\n if (this.state.editingLinearElement) {\n this.setState({\n editingLinearElement: null\n });\n } else {\n // Deselect selected elements\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, this.state),\n selectedGroupIds: {},\n editingGroupId: null,\n activeEmbeddable: null\n });\n } // reset cursor\n\n\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.AUTO);\n return;\n }\n\n if (!activeTool.locked && activeTool.type !== \"freedraw\" && draggingElement && draggingElement.type !== \"selection\") {\n this.setState(prevState => ({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(Object.assign(Object.assign({}, prevState.selectedElementIds), {\n [draggingElement.id]: true\n }), prevState),\n showHyperlinkPopup: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(draggingElement) && !draggingElement.link ? \"editor\" : prevState.showHyperlinkPopup\n }));\n }\n\n if (activeTool.type !== \"selection\" || (0,_scene__WEBPACK_IMPORTED_MODULE_29__.isSomeElementSelected)(this.scene.getNonDeletedElements(), this.state) || !(0,_utils__WEBPACK_IMPORTED_MODULE_35__.isShallowEqual)(this.state.previousSelectedElementIds, this.state.selectedElementIds)) {\n this.store.shouldCaptureIncrement();\n }\n\n if (pointerDownState.drag.hasOccurred || isResizing || isRotating) {\n // We only allow binding via linear elements, specifically via dragging\n // the endpoints (\"start\" or \"end\").\n const linearElements = this.scene.getSelectedElements(this.state).filter(_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement);\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.bindOrUnbindLinearElements)(linearElements, this, (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.isBindingEnabled)(this.state), (_k = (_j = this.state.selectedLinearElement) === null || _j === void 0 ? void 0 : _j.selectedPointsIndices) !== null && _k !== void 0 ? _k : []);\n }\n\n if (activeTool.type === \"laser\") {\n this.laserTrails.endPath();\n return;\n }\n\n if (!activeTool.locked && activeTool.type !== \"freedraw\") {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.resetCursor)(this.interactiveCanvas);\n this.setState({\n draggingElement: null,\n suggestedBindings: [],\n activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateActiveTool)(this.state, {\n type: \"selection\"\n })\n });\n } else {\n this.setState({\n draggingElement: null,\n suggestedBindings: []\n });\n }\n\n if (hitElement && this.lastPointerUpEvent && this.lastPointerDownEvent && this.lastPointerUpEvent.timeStamp - this.lastPointerDownEvent.timeStamp < 300 && gesture.pointers.size <= 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeLikeElement)(hitElement) && this.isIframeLikeElementCenter(hitElement, this.lastPointerUpEvent, pointerDownState.origin.x, pointerDownState.origin.y)) {\n this.handleEmbeddableCenterClick(hitElement);\n }\n });\n } //zsviczian - published on API\n\n\n setSelection(elements) {\n const selectedElementIds = {};\n const selectedGroupIds = {};\n elements.forEach(ele => {\n if (ele.groupIds.length) {\n selectedElementIds[ele.id] = true;\n ele.groupIds.forEach(id => {\n selectedGroupIds[id] = true;\n });\n } // exclude bound text elements as we don't mark them as selected when\n // container is selected unless in group\n else if (!(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(ele)) {\n selectedElementIds[ele.id] = true;\n }\n });\n this.setState({\n previousSelectedElementIds: this.state.selectedElementIds,\n selectedElementIds,\n selectedGroupIds\n });\n }\n\n clearSelection(hitElement) {\n this.setState(prevState => ({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, prevState),\n activeEmbeddable: null,\n selectedGroupIds: {},\n // Continue editing the same group if the user selected a different\n // element from it\n editingGroupId: prevState.editingGroupId && hitElement != null && (0,_groups__WEBPACK_IMPORTED_MODULE_23__.isElementInGroup)(hitElement, prevState.editingGroupId) ? prevState.editingGroupId : null\n }));\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, this.state),\n activeEmbeddable: null,\n previousSelectedElementIds: this.state.selectedElementIds\n });\n }\n\n getTextWysiwygSnappedToCenterPosition(x, y, appState, container) {\n if (container) {\n let elementCenterX = container.x + container.width / 2;\n let elementCenterY = container.y + container.height / 2;\n const elementCenter = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.getContainerCenter)(container, appState, this.scene.getNonDeletedElementsMap());\n\n if (elementCenter) {\n elementCenterX = elementCenter.x;\n elementCenterY = elementCenter.y;\n }\n\n const distanceToCenter = Math.hypot(x - elementCenterX, y - elementCenterY);\n const isSnappedToCenter = distanceToCenter < _constants__WEBPACK_IMPORTED_MODULE_12__.TEXT_TO_CENTER_SNAP_THRESHOLD;\n\n if (isSnappedToCenter) {\n const {\n x: viewportX,\n y: viewportY\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.sceneCoordsToViewportCoords)({\n sceneX: elementCenterX,\n sceneY: elementCenterY\n }, appState);\n return {\n viewportX,\n viewportY,\n elementCenterX,\n elementCenterY\n };\n }\n }\n }\n\n getCanvasOffsets() {\n var _a;\n\n if ((_a = this.excalidrawContainerRef) === null || _a === void 0 ? void 0 : _a.current) {\n const excalidrawContainer = this.excalidrawContainerRef.current;\n const {\n left,\n top\n } = excalidrawContainer.getBoundingClientRect();\n return {\n offsetLeft: left,\n offsetTop: top\n };\n }\n\n return {\n offsetLeft: 0,\n offsetTop: 0\n };\n }\n\n async updateLanguage() {\n const currentLang = _i18n__WEBPACK_IMPORTED_MODULE_25__.languages.find(lang => lang.code === this.props.langCode) || _i18n__WEBPACK_IMPORTED_MODULE_25__.defaultLang;\n await (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.setLanguage)(currentLang);\n this.setAppState({});\n }\n\n}\n\nconst createTestHook = () => {\n if (\"development\" === _constants__WEBPACK_IMPORTED_MODULE_12__.ENV.TEST || \"development\" !== \"production\") {\n window.h = window.h || {};\n Object.defineProperties(window.h, {\n elements: {\n configurable: true,\n\n get() {\n var _a;\n\n return (_a = this.app) === null || _a === void 0 ? void 0 : _a.scene.getElementsIncludingDeleted();\n },\n\n set(elements) {\n var _a;\n\n return (_a = this.app) === null || _a === void 0 ? void 0 : _a.scene.replaceAllElements((0,_fractionalIndex__WEBPACK_IMPORTED_MODULE_90__.syncInvalidIndices)(elements));\n }\n\n }\n });\n }\n};\ncreateTestHook();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (App);\n\n//# sourceURL=webpack://ExcalidrawLib/./components/App.tsx?");
884
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"ExcalidrawContainerContext\": () => (/* binding */ ExcalidrawContainerContext),\n/* harmony export */ \"createTestHook\": () => (/* binding */ createTestHook),\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */ \"hostPlugin\": () => (/* binding */ hostPlugin),\n/* harmony export */ \"showFourthFont\": () => (/* binding */ showFourthFont),\n/* harmony export */ \"useApp\": () => (/* binding */ useApp),\n/* harmony export */ \"useAppProps\": () => (/* binding */ useAppProps),\n/* harmony export */ \"useDevice\": () => (/* binding */ useDevice),\n/* harmony export */ \"useExcalidrawActionManager\": () => (/* binding */ useExcalidrawActionManager),\n/* harmony export */ \"useExcalidrawAppState\": () => (/* binding */ useExcalidrawAppState),\n/* harmony export */ \"useExcalidrawContainer\": () => (/* binding */ useExcalidrawContainer),\n/* harmony export */ \"useExcalidrawElements\": () => (/* binding */ useExcalidrawElements),\n/* harmony export */ \"useExcalidrawSetAppState\": () => (/* binding */ useExcalidrawSetAppState)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var roughjs_bin_rough__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! roughjs/bin/rough */ \"../../node_modules/roughjs/bin/rough.js\");\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! clsx */ \"../../node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var nanoid__WEBPACK_IMPORTED_MODULE_96__ = __webpack_require__(/*! nanoid */ \"./node_modules/nanoid/index.browser.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../actions */ \"./actions/index.ts\");\n/* harmony import */ var _actions_actionHistory__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../actions/actionHistory */ \"./actions/actionHistory.tsx\");\n/* harmony import */ var _actions_manager__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../actions/manager */ \"./actions/manager.tsx\");\n/* harmony import */ var _actions_register__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../actions/register */ \"./actions/register.ts\");\n/* harmony import */ var _analytics__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../analytics */ \"./analytics.ts\");\n/* harmony import */ var _appState__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../appState */ \"./appState.ts\");\n/* harmony import */ var _clipboard__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../clipboard */ \"./clipboard.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _data__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../data */ \"./data/index.ts\");\n/* harmony import */ var _data_library__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../data/library */ \"./data/library.ts\");\n/* harmony import */ var _data_restore__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../data/restore */ \"./data/restore.ts\");\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _element_binding__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../element/binding */ \"./element/binding.ts\");\n/* harmony import */ var _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../element/linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _element_mutateElement__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../element/mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _element_newElement__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ../element/newElement */ \"./element/newElement.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _gesture__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ../gesture */ \"./gesture.ts\");\n/* harmony import */ var _groups__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ../groups */ \"./groups.ts\");\n/* harmony import */ var _history__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ../history */ \"./history.ts\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ../i18n */ \"./i18n.ts\");\n/* harmony import */ var _keys__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__(/*! ../keys */ \"./keys.ts\");\n/* harmony import */ var _element_sizeHelpers__WEBPACK_IMPORTED_MODULE_27__ = __webpack_require__(/*! ../element/sizeHelpers */ \"./element/sizeHelpers.ts\");\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_28__ = __webpack_require__(/*! ../math */ \"./math.ts\");\n/* harmony import */ var _scene__WEBPACK_IMPORTED_MODULE_29__ = __webpack_require__(/*! ../scene */ \"./scene/index.ts\");\n/* harmony import */ var _scene_Scene__WEBPACK_IMPORTED_MODULE_30__ = __webpack_require__(/*! ../scene/Scene */ \"./scene/Scene.ts\");\n/* harmony import */ var _scene_zoom__WEBPACK_IMPORTED_MODULE_31__ = __webpack_require__(/*! ../scene/zoom */ \"./scene/zoom.ts\");\n/* harmony import */ var _shapes__WEBPACK_IMPORTED_MODULE_32__ = __webpack_require__(/*! ../shapes */ \"./shapes.tsx\");\n/* harmony import */ var _utils_geometry_shape__WEBPACK_IMPORTED_MODULE_33__ = __webpack_require__(/*! ../../utils/geometry/shape */ \"../utils/geometry/shape.ts\");\n/* harmony import */ var _utils_collision__WEBPACK_IMPORTED_MODULE_34__ = __webpack_require__(/*! ../../utils/collision */ \"../utils/collision.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_35__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _element_embeddable__WEBPACK_IMPORTED_MODULE_36__ = __webpack_require__(/*! ../element/embeddable */ \"./element/embeddable.ts\");\n/* harmony import */ var _ContextMenu__WEBPACK_IMPORTED_MODULE_37__ = __webpack_require__(/*! ./ContextMenu */ \"./components/ContextMenu.tsx\");\n/* harmony import */ var _LayerUI__WEBPACK_IMPORTED_MODULE_38__ = __webpack_require__(/*! ./LayerUI */ \"./components/LayerUI.tsx\");\n/* harmony import */ var _Toast__WEBPACK_IMPORTED_MODULE_39__ = __webpack_require__(/*! ./Toast */ \"./components/Toast.tsx\");\n/* harmony import */ var _actions_actionToggleViewMode__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(/*! ../actions/actionToggleViewMode */ \"./actions/actionToggleViewMode.tsx\");\n/* harmony import */ var _data_blob__WEBPACK_IMPORTED_MODULE_41__ = __webpack_require__(/*! ../data/blob */ \"./data/blob.ts\");\n/* harmony import */ var _element_image__WEBPACK_IMPORTED_MODULE_42__ = __webpack_require__(/*! ../element/image */ \"./element/image.ts\");\n/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_43__ = __webpack_require__(/*! lodash.throttle */ \"../../node_modules/lodash.throttle/index.js\");\n/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_43___default = /*#__PURE__*/__webpack_require__.n(lodash_throttle__WEBPACK_IMPORTED_MODULE_43__);\n/* harmony import */ var _data_filesystem__WEBPACK_IMPORTED_MODULE_44__ = __webpack_require__(/*! ../data/filesystem */ \"./data/filesystem.ts\");\n/* harmony import */ var _element_textElement__WEBPACK_IMPORTED_MODULE_45__ = __webpack_require__(/*! ../element/textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _components_hyperlink_Hyperlink__WEBPACK_IMPORTED_MODULE_46__ = __webpack_require__(/*! ../components/hyperlink/Hyperlink */ \"./components/hyperlink/Hyperlink.tsx\");\n/* harmony import */ var _data_url__WEBPACK_IMPORTED_MODULE_47__ = __webpack_require__(/*! ../data/url */ \"./data/url.ts\");\n/* harmony import */ var _element_transformHandles__WEBPACK_IMPORTED_MODULE_48__ = __webpack_require__(/*! ../element/transformHandles */ \"./element/transformHandles.ts\");\n/* harmony import */ var _actions_actionElementLock__WEBPACK_IMPORTED_MODULE_49__ = __webpack_require__(/*! ../actions/actionElementLock */ \"./actions/actionElementLock.ts\");\n/* harmony import */ var _scene_Fonts__WEBPACK_IMPORTED_MODULE_50__ = __webpack_require__(/*! ../scene/Fonts */ \"./scene/Fonts.ts\");\n/* harmony import */ var _frame__WEBPACK_IMPORTED_MODULE_51__ = __webpack_require__(/*! ../frame */ \"./frame.ts\");\n/* harmony import */ var _scene_selection__WEBPACK_IMPORTED_MODULE_52__ = __webpack_require__(/*! ../scene/selection */ \"./scene/selection.ts\");\n/* harmony import */ var _actions_actionClipboard__WEBPACK_IMPORTED_MODULE_53__ = __webpack_require__(/*! ../actions/actionClipboard */ \"./actions/actionClipboard.tsx\");\n/* harmony import */ var _actions_actionFrame__WEBPACK_IMPORTED_MODULE_54__ = __webpack_require__(/*! ../actions/actionFrame */ \"./actions/actionFrame.ts\");\n/* harmony import */ var _actions_actionCanvas__WEBPACK_IMPORTED_MODULE_55__ = __webpack_require__(/*! ../actions/actionCanvas */ \"./actions/actionCanvas.tsx\");\n/* harmony import */ var _jotai__WEBPACK_IMPORTED_MODULE_56__ = __webpack_require__(/*! ../jotai */ \"./jotai.ts\");\n/* harmony import */ var _ActiveConfirmDialog__WEBPACK_IMPORTED_MODULE_57__ = __webpack_require__(/*! ./ActiveConfirmDialog */ \"./components/ActiveConfirmDialog.tsx\");\n/* harmony import */ var _errors__WEBPACK_IMPORTED_MODULE_58__ = __webpack_require__(/*! ../errors */ \"./errors.ts\");\n/* harmony import */ var _snapping__WEBPACK_IMPORTED_MODULE_59__ = __webpack_require__(/*! ../snapping */ \"./snapping.ts\");\n/* harmony import */ var _actions_actionBoundText__WEBPACK_IMPORTED_MODULE_60__ = __webpack_require__(/*! ../actions/actionBoundText */ \"./actions/actionBoundText.tsx\");\n/* harmony import */ var _BraveMeasureTextError__WEBPACK_IMPORTED_MODULE_61__ = __webpack_require__(/*! ./BraveMeasureTextError */ \"./components/BraveMeasureTextError.tsx\");\n/* harmony import */ var _EyeDropper__WEBPACK_IMPORTED_MODULE_62__ = __webpack_require__(/*! ./EyeDropper */ \"./components/EyeDropper.tsx\");\n/* harmony import */ var _data_transform__WEBPACK_IMPORTED_MODULE_63__ = __webpack_require__(/*! ../data/transform */ \"./data/transform.ts\");\n/* harmony import */ var _Sidebar_Sidebar__WEBPACK_IMPORTED_MODULE_64__ = __webpack_require__(/*! ./Sidebar/Sidebar */ \"./components/Sidebar/Sidebar.tsx\");\n/* harmony import */ var _canvases__WEBPACK_IMPORTED_MODULE_65__ = __webpack_require__(/*! ./canvases */ \"./components/canvases/index.tsx\");\n/* harmony import */ var _scene_Renderer__WEBPACK_IMPORTED_MODULE_66__ = __webpack_require__(/*! ../scene/Renderer */ \"./scene/Renderer.ts\");\n/* harmony import */ var _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_67__ = __webpack_require__(/*! ../scene/ShapeCache */ \"./scene/ShapeCache.ts\");\n/* harmony import */ var _SVGLayer__WEBPACK_IMPORTED_MODULE_68__ = __webpack_require__(/*! ./SVGLayer */ \"./components/SVGLayer.tsx\");\n/* harmony import */ var _cursor__WEBPACK_IMPORTED_MODULE_69__ = __webpack_require__(/*! ../cursor */ \"./cursor.ts\");\n/* harmony import */ var _emitter__WEBPACK_IMPORTED_MODULE_70__ = __webpack_require__(/*! ../emitter */ \"./emitter.ts\");\n/* harmony import */ var _element_ElementCanvasButtons__WEBPACK_IMPORTED_MODULE_71__ = __webpack_require__(/*! ../element/ElementCanvasButtons */ \"./element/ElementCanvasButtons.tsx\");\n/* harmony import */ var _data_magic__WEBPACK_IMPORTED_MODULE_72__ = __webpack_require__(/*! ../data/magic */ \"./data/magic.ts\");\n/* harmony import */ var _utils_export__WEBPACK_IMPORTED_MODULE_73__ = __webpack_require__(/*! ../../utils/export */ \"../utils/export.ts\");\n/* harmony import */ var _colors__WEBPACK_IMPORTED_MODULE_74__ = __webpack_require__(/*! ../colors */ \"./colors.ts\");\n/* harmony import */ var _MagicButton__WEBPACK_IMPORTED_MODULE_75__ = __webpack_require__(/*! ./MagicButton */ \"./components/MagicButton.tsx\");\n/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_76__ = __webpack_require__(/*! ./icons */ \"./components/icons.tsx\");\n/* harmony import */ var _data_EditorLocalStorage__WEBPACK_IMPORTED_MODULE_77__ = __webpack_require__(/*! ../data/EditorLocalStorage */ \"./data/EditorLocalStorage.ts\");\n/* harmony import */ var _FollowMode_FollowMode__WEBPACK_IMPORTED_MODULE_78__ = __webpack_require__(/*! ./FollowMode/FollowMode */ \"./components/FollowMode/FollowMode.tsx\");\n/* harmony import */ var _actions_actionProperties__WEBPACK_IMPORTED_MODULE_79__ = __webpack_require__(/*! ../actions/actionProperties */ \"./actions/actionProperties.tsx\");\n/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_80__ = __webpack_require__(/*! ../store */ \"./store.ts\");\n/* harmony import */ var _animation_frame_handler__WEBPACK_IMPORTED_MODULE_81__ = __webpack_require__(/*! ../animation-frame-handler */ \"./animation-frame-handler.ts\");\n/* harmony import */ var _animated_trail__WEBPACK_IMPORTED_MODULE_82__ = __webpack_require__(/*! ../animated-trail */ \"./animated-trail.ts\");\n/* harmony import */ var _laser_trails__WEBPACK_IMPORTED_MODULE_83__ = __webpack_require__(/*! ../laser-trails */ \"./laser-trails.ts\");\n/* harmony import */ var _reactUtils__WEBPACK_IMPORTED_MODULE_84__ = __webpack_require__(/*! ../reactUtils */ \"./reactUtils.ts\");\n/* harmony import */ var _renderer_renderElement__WEBPACK_IMPORTED_MODULE_85__ = __webpack_require__(/*! ../renderer/renderElement */ \"./renderer/renderElement.ts\");\n/* harmony import */ var _obsidianUtils__WEBPACK_IMPORTED_MODULE_86__ = __webpack_require__(/*! ../obsidianUtils */ \"./obsidianUtils.ts\");\n/* harmony import */ var _element_collision__WEBPACK_IMPORTED_MODULE_87__ = __webpack_require__(/*! ../element/collision */ \"./element/collision.ts\");\n/* harmony import */ var _element_textWysiwyg__WEBPACK_IMPORTED_MODULE_88__ = __webpack_require__(/*! ../element/textWysiwyg */ \"./element/textWysiwyg.tsx\");\n/* harmony import */ var _scene_scrollbars__WEBPACK_IMPORTED_MODULE_89__ = __webpack_require__(/*! ../scene/scrollbars */ \"./scene/scrollbars.ts\");\n/* harmony import */ var _fractionalIndex__WEBPACK_IMPORTED_MODULE_90__ = __webpack_require__(/*! ../fractionalIndex */ \"./fractionalIndex.ts\");\n/* harmony import */ var _hyperlink_helpers__WEBPACK_IMPORTED_MODULE_91__ = __webpack_require__(/*! ./hyperlink/helpers */ \"./components/hyperlink/helpers.ts\");\n/* harmony import */ var _actions_shortcuts__WEBPACK_IMPORTED_MODULE_92__ = __webpack_require__(/*! ../actions/shortcuts */ \"./actions/shortcuts.ts\");\n/* harmony import */ var _element_resizeElements__WEBPACK_IMPORTED_MODULE_93__ = __webpack_require__(/*! ../element/resizeElements */ \"./element/resizeElements.ts\");\n/* harmony import */ var _actions_actionTextAutoResize__WEBPACK_IMPORTED_MODULE_94__ = __webpack_require__(/*! ../actions/actionTextAutoResize */ \"./actions/actionTextAutoResize.ts\");\n/* harmony import */ var _element_bounds__WEBPACK_IMPORTED_MODULE_95__ = __webpack_require__(/*! ../element/bounds */ \"./element/bounds.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n //zsviczian\n\n\n\nconst AppContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext(null);\nconst AppPropsContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext(null);\nlet showFourthFont = false; //zsviczian\n\nconst deviceContextInitialValue = {\n viewport: {\n isMobile: false,\n isLandscape: false\n },\n editor: {\n isMobile: false,\n canFitSidebar: false\n },\n isTouchScreen: false\n};\nconst DeviceContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext(deviceContextInitialValue);\nDeviceContext.displayName = \"DeviceContext\";\nconst ExcalidrawContainerContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext({\n container: null,\n id: null\n});\nExcalidrawContainerContext.displayName = \"ExcalidrawContainerContext\";\nconst ExcalidrawElementsContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext([]);\nExcalidrawElementsContext.displayName = \"ExcalidrawElementsContext\";\nconst ExcalidrawAppStateContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext(Object.assign(Object.assign({}, (0,_appState__WEBPACK_IMPORTED_MODULE_10__.getDefaultAppState)()), {\n width: 0,\n height: 0,\n offsetLeft: 0,\n offsetTop: 0\n}));\nExcalidrawAppStateContext.displayName = \"ExcalidrawAppStateContext\";\nconst ExcalidrawSetAppStateContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext(() => {\n console.warn(\"Uninitialized ExcalidrawSetAppStateContext context!\");\n});\nExcalidrawSetAppStateContext.displayName = \"ExcalidrawSetAppStateContext\";\nconst ExcalidrawActionManagerContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext(null);\nExcalidrawActionManagerContext.displayName = \"ExcalidrawActionManagerContext\";\nconst useApp = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(AppContext);\nconst useAppProps = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(AppPropsContext);\nconst useDevice = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(DeviceContext);\nconst useExcalidrawContainer = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(ExcalidrawContainerContext);\nconst useExcalidrawElements = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(ExcalidrawElementsContext);\nconst useExcalidrawAppState = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(ExcalidrawAppStateContext);\nconst useExcalidrawSetAppState = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(ExcalidrawSetAppStateContext);\nconst useExcalidrawActionManager = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(ExcalidrawActionManagerContext);\nlet didTapTwice = false;\nlet tappedTwiceTimer = 0;\nlet isHoldingSpace = false;\nlet isPanning = false;\nlet isDraggingScrollBar = false;\nlet currentScrollBars = {\n horizontal: null,\n vertical: null\n};\nlet touchTimeout = 0;\nlet invalidateContextMenu = false;\nlet hostPlugin; //zsviczian\n\n/**\r\n * Map of youtube embed video states\r\n */\n\nconst YOUTUBE_VIDEO_STATES = new Map();\nlet IS_PLAIN_PASTE = false;\nlet IS_PLAIN_PASTE_TIMER = 0;\nlet PLAIN_PASTE_TOAST_SHOWN = false;\nlet lastPointerUp = null;\nconst gesture = {\n pointers: new Map(),\n lastCenter: null,\n initialDistance: null,\n initialScale: null\n};\n\nclass App extends (react__WEBPACK_IMPORTED_MODULE_1___default().Component) {\n constructor(props) {\n super(props);\n this.interactiveCanvas = null;\n this.unmounted = false;\n this.device = deviceContextInitialValue;\n this.excalidrawContainerRef = react__WEBPACK_IMPORTED_MODULE_1___default().createRef();\n this.files = {};\n this.imageCache = new Map();\n this.iFrameRefs = new Map();\n /**\r\n * Indicates whether the embeddable's url has been validated for rendering.\r\n * If value not set, indicates that the validation is pending.\r\n * Initially or on url change the flag is not reset so that we can guarantee\r\n * the validation came from a trusted source (the editor).\r\n **/\n\n this.embedsValidationStatus = new Map();\n /** embeds that have been inserted to DOM (as a perf optim, we don't want to\r\n * insert to DOM before user initially scrolls to them) */\n\n this.initializedEmbeds = new Set();\n this.elementsPendingErasure = new Set();\n this.lastPointerDownEvent = null;\n this.lastPointerUpEvent = null;\n this.lastPointerMoveEvent = null;\n this.lastViewportPosition = {\n x: 0,\n y: 0\n };\n this.allowMobileMode = true; //zsviczian\n\n this.animationFrameHandler = new _animation_frame_handler__WEBPACK_IMPORTED_MODULE_81__.AnimationFrameHandler();\n this.laserTrails = new _laser_trails__WEBPACK_IMPORTED_MODULE_83__.LaserTrails(this.animationFrameHandler, this);\n this.eraserTrail = new _animated_trail__WEBPACK_IMPORTED_MODULE_82__.AnimatedTrail(this.animationFrameHandler, this, {\n streamline: 0.2,\n size: 5,\n keepHead: true,\n sizeMapping: c => {\n const DECAY_TIME = 200;\n const DECAY_LENGTH = 10;\n const t = Math.max(0, 1 - (performance.now() - c.pressure) / DECAY_TIME);\n const l = (DECAY_LENGTH - Math.min(DECAY_LENGTH, c.totalLength - c.currentIndex)) / DECAY_LENGTH;\n return Math.min((0,_utils__WEBPACK_IMPORTED_MODULE_35__.easeOut)(l), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.easeOut)(t));\n },\n fill: () => this.state.theme === _constants__WEBPACK_IMPORTED_MODULE_12__.THEME.LIGHT ? \"rgba(0, 0, 0, 0.2)\" : \"rgba(255, 255, 255, 0.2)\"\n });\n this.onChangeEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_70__.Emitter();\n this.onPointerDownEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_70__.Emitter();\n this.onPointerUpEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_70__.Emitter();\n this.onUserFollowEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_70__.Emitter();\n this.onScrollChangeEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_70__.Emitter();\n this.missingPointerEventCleanupEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_70__.Emitter();\n this.onRemoveEventListenersEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_70__.Emitter();\n\n this.updateEmbedValidationStatus = (element, status) => {\n this.embedsValidationStatus.set(element.id, status);\n _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_67__.ShapeCache[\"delete\"](element);\n };\n\n this.updateEmbeddables = () => {\n const iframeLikes = new Set();\n let updated = false;\n this.scene.getNonDeletedElements().filter(element => {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(element)) {\n iframeLikes.add(element.id);\n\n if (!this.embedsValidationStatus.has(element.id)) {\n updated = true;\n const validated = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_36__.embeddableURLValidator)(element.link, this.props.validateEmbeddable);\n this.updateEmbedValidationStatus(element, validated);\n }\n } else if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(element)) {\n iframeLikes.add(element.id);\n }\n\n return false;\n });\n\n if (updated) {\n this.scene.triggerUpdate();\n } // GC\n\n\n this.iFrameRefs.forEach((ref, id) => {\n if (!iframeLikes.has(id)) {\n this.iFrameRefs.delete(id);\n }\n });\n };\n\n this.getFrameNameDOMId = frameElement => {\n return `${this.id}-frame-name-${frameElement.id}`;\n };\n\n this.frameNameBoundsCache = {\n get: frameElement => {\n let bounds = this.frameNameBoundsCache._cache.get(frameElement.id);\n\n if (!bounds || bounds.zoom !== this.state.zoom.value || bounds.versionNonce !== frameElement.versionNonce) {\n const frameNameDiv = document.getElementById(this.getFrameNameDOMId(frameElement));\n\n if (frameNameDiv) {\n const box = frameNameDiv.getBoundingClientRect();\n const boxSceneTopLeft = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)({\n clientX: box.x,\n clientY: box.y\n }, this.state);\n const boxSceneBottomRight = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)({\n clientX: box.right,\n clientY: box.bottom\n }, this.state);\n bounds = {\n x: boxSceneTopLeft.x,\n y: boxSceneTopLeft.y,\n width: boxSceneBottomRight.x - boxSceneTopLeft.x,\n height: boxSceneBottomRight.y - boxSceneTopLeft.y,\n angle: 0,\n zoom: this.state.zoom.value,\n versionNonce: frameElement.versionNonce\n };\n\n this.frameNameBoundsCache._cache.set(frameElement.id, bounds);\n\n return bounds;\n }\n\n return null;\n }\n\n return bounds;\n },\n\n /**\r\n * @private\r\n */\n _cache: new Map()\n };\n\n this.renderFrameNames = () => {\n if (!this.state.frameRendering.enabled || !this.state.frameRendering.name) {\n return null;\n }\n\n const isDarkTheme = this.state.theme === _constants__WEBPACK_IMPORTED_MODULE_12__.THEME.DARK;\n let frameIndex = 0;\n let magicFrameIndex = 0;\n return this.scene.getNonDeletedFramesLikes().map(f => {\n var _a, _b;\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameElement)(f)) {\n frameIndex++;\n } else {\n magicFrameIndex++;\n }\n\n if (!(0,_element_sizeHelpers__WEBPACK_IMPORTED_MODULE_27__.isElementInViewport)(f, this.canvas.width / window.devicePixelRatio, this.canvas.height / window.devicePixelRatio, {\n offsetLeft: this.state.offsetLeft,\n offsetTop: this.state.offsetTop,\n scrollX: this.state.scrollX,\n scrollY: this.state.scrollY,\n zoom: this.state.zoom\n }, this.scene.getNonDeletedElementsMap())) {\n // if frame not visible, don't render its name\n return null;\n }\n\n const {\n x: x1,\n y: y1\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.sceneCoordsToViewportCoords)({\n sceneX: f.x,\n sceneY: f.y\n }, this.state);\n const FRAME_NAME_EDIT_PADDING = 6;\n\n const reset = () => {\n var _a;\n\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(f, {\n name: ((_a = f.name) === null || _a === void 0 ? void 0 : _a.trim()) || null\n });\n this.setState({\n editingFrame: null\n });\n };\n\n let frameNameJSX;\n const frameName = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getFrameLikeTitle)(f, (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameElement)(f) ? frameIndex : magicFrameIndex);\n\n if (f.id === this.state.editingFrame) {\n const frameNameInEdit = frameName;\n frameNameJSX = (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"input\", {\n autoFocus: true,\n value: frameNameInEdit,\n onChange: e => {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(f, {\n name: e.target.value\n });\n },\n onFocus: e => e.target.select(),\n onBlur: () => reset(),\n onKeyDown: event => {\n // for some inexplicable reason, `onBlur` triggered on ESC\n // does not reset `state.editingFrame` despite being called,\n // and we need to reset it here as well\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ESCAPE || event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ENTER) {\n reset();\n }\n },\n style: {\n background: this.state.viewBackgroundColor,\n filter: isDarkTheme ? _constants__WEBPACK_IMPORTED_MODULE_12__.THEME_FILTER : \"none\",\n zIndex: 2,\n border: \"none\",\n display: \"block\",\n padding: `${FRAME_NAME_EDIT_PADDING}px`,\n borderRadius: 4,\n boxShadow: \"inset 0 0 0 2px var(--color-on-primary-container)\",\n fontFamily: \"Assistant\",\n fontSize: \"14px\",\n transform: `translate(-${FRAME_NAME_EDIT_PADDING}px, ${FRAME_NAME_EDIT_PADDING}px)`,\n color: \"var(--color-gray-80)\",\n overflow: \"hidden\",\n maxWidth: `${(0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_86__.getExcalidrawContentEl)().clientWidth - x1 - FRAME_NAME_EDIT_PADDING //zsviczian was document.body\n }px`\n },\n size: frameNameInEdit.length + 1 || 1,\n dir: \"auto\",\n autoComplete: \"off\",\n autoCapitalize: \"off\",\n autoCorrect: \"off\"\n });\n } else {\n frameNameJSX = frameName;\n }\n\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n id: this.getFrameNameDOMId(f),\n style: {\n position: \"absolute\",\n // Positioning from bottom so that we don't to either\n // calculate text height or adjust using transform (which)\n // messes up input position when editing the frame name.\n // This makes the positioning deterministic and we can calculate\n // the same position when rendering to canvas / svg.\n bottom: `${this.state.height + _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.nameOffsetY - y1 + this.state.offsetTop}px`,\n left: `${x1 - this.state.offsetLeft}px`,\n zIndex: 2,\n fontSize: _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.nameFontSize,\n color: (_b = (_a = this.state.frameColor) === null || _a === void 0 ? void 0 : _a.nameColor) !== null && _b !== void 0 ? _b : isDarkTheme //zsviczian\n ? _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.nameColorDarkTheme : _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.nameColorLightTheme,\n lineHeight: _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.nameLineHeight,\n width: \"max-content\",\n maxWidth: `${f.width}px`,\n overflow: f.id === this.state.editingFrame ? \"visible\" : \"hidden\",\n whiteSpace: \"nowrap\",\n textOverflow: \"ellipsis\",\n cursor: _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.MOVE,\n pointerEvents: this.state.viewModeEnabled ? _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.disabled : _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.enabled\n },\n onPointerDown: event => this.handleCanvasPointerDown(event),\n onWheel: event => this.handleWheel(event),\n onContextMenu: this.handleCanvasContextMenu,\n onDoubleClick: () => {\n this.setState({\n editingFrame: f.id\n });\n }\n }, {\n children: frameNameJSX\n }), f.id);\n });\n };\n\n this.focusContainer = () => {\n var _a;\n\n (_a = this.excalidrawContainerRef.current) === null || _a === void 0 ? void 0 : _a.focus();\n };\n\n this.getSceneElementsIncludingDeleted = () => {\n return this.scene.getElementsIncludingDeleted();\n };\n\n this.getSceneElements = () => {\n return this.scene.getNonDeletedElements();\n };\n\n this.onInsertElements = elements => {\n this.addElementsFromPasteOrLibrary({\n elements,\n position: \"center\",\n files: null\n });\n };\n\n this.onExportImage = async (type, elements, opts) => {\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"export\", type, \"ui\");\n const fileHandle = await (0,_data__WEBPACK_IMPORTED_MODULE_13__.exportCanvas)(type, elements, this.state, this.files, {\n exportBackground: this.state.exportBackground,\n name: this.getName(),\n viewBackgroundColor: this.state.viewBackgroundColor,\n exportingFrame: opts.exportingFrame\n }).catch(_utils__WEBPACK_IMPORTED_MODULE_35__.muteFSAbortError).catch(error => {\n console.error(error);\n this.setState({\n errorMessage: error.message\n });\n });\n\n if (this.state.exportEmbedScene && fileHandle && (0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.isImageFileHandle)(fileHandle)) {\n this.setState({\n fileHandle\n });\n }\n };\n\n this.magicGenerations = new Map();\n\n this.updateMagicGeneration = ({\n frameElement,\n data\n }) => {\n if (data.status === \"pending\") {\n // We don't wanna persist pending state to storage. It should be in-app\n // state only.\n // Thus reset so that we prefer local cache (if there was some\n // generationData set previously)\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(frameElement, {\n customData: {\n generationData: undefined\n }\n }, false);\n } else {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(frameElement, {\n customData: {\n generationData: data\n }\n }, false);\n }\n\n this.magicGenerations.set(frameElement.id, data);\n this.triggerRender();\n };\n\n this.OPENAI_KEY_IS_PERSISTED = _data_EditorLocalStorage__WEBPACK_IMPORTED_MODULE_77__.EditorLocalStorage.has(_constants__WEBPACK_IMPORTED_MODULE_12__.EDITOR_LS_KEYS.OAI_API_KEY) || false;\n\n this.onOpenAIKeyChange = (openAIKey, shouldPersist) => {\n this.OPENAI_KEY = openAIKey || null;\n\n if (shouldPersist) {\n const didPersist = _data_EditorLocalStorage__WEBPACK_IMPORTED_MODULE_77__.EditorLocalStorage.set(_constants__WEBPACK_IMPORTED_MODULE_12__.EDITOR_LS_KEYS.OAI_API_KEY, openAIKey);\n this.OPENAI_KEY_IS_PERSISTED = didPersist;\n } else {\n this.OPENAI_KEY_IS_PERSISTED = false;\n }\n };\n\n this.onMagicSettingsConfirm = (apiKey, shouldPersist, source) => {\n this.OPENAI_KEY = apiKey || null;\n this.onOpenAIKeyChange(this.OPENAI_KEY, shouldPersist);\n\n if (source === \"settings\") {\n return;\n }\n\n const selectedElements = this.scene.getSelectedElements({\n selectedElementIds: this.state.selectedElementIds\n });\n\n if (apiKey) {\n if (selectedElements.length) {\n this.onMagicframeToolSelect();\n } else {\n this.setActiveTool({\n type: \"magicframe\"\n });\n }\n } else if (!(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isMagicFrameElement)(selectedElements[0])) {\n // even if user didn't end up setting api key, let's pick the tool\n // so they can draw up a frame and move forward\n this.setActiveTool({\n type: \"magicframe\"\n });\n }\n };\n\n this.onMagicframeToolSelect = () => {\n if (!this.OPENAI_KEY) {\n this.setToast({\n message: \"You must first configure your OpenAI API key in plugin settings\",\n duration: 5000\n });\n return;\n }\n\n const selectedElements = this.scene.getSelectedElements({\n selectedElementIds: this.state.selectedElementIds\n });\n\n if (selectedElements.length === 0) {\n this.setActiveTool({\n type: _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.magicframe\n });\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"tool-select (empty-selection)\", \"d2c\");\n } else {\n const selectedMagicFrame = selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isMagicFrameElement)(selectedElements[0]) && selectedElements[0]; // case: user selected elements containing frame-like(s) or are frame\n // members, we don't want to wrap into another magicframe\n // (unless the only selected element is a magic frame which we reuse)\n\n if (!selectedMagicFrame && selectedElements.some(el => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(el) || el.frameId)) {\n this.setActiveTool({\n type: _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.magicframe\n });\n return;\n }\n\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"tool-select (existing selection)\", \"d2c\");\n let frame;\n\n if (selectedMagicFrame) {\n // a single magicframe already selected -> use it\n frame = selectedMagicFrame;\n } else {\n // selected elements aren't wrapped in magic frame yet -> wrap now\n const [minX, minY, maxX, maxY] = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(selectedElements);\n const padding = 50;\n frame = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newMagicFrameElement)(Object.assign(Object.assign({}, _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE), {\n x: minX - padding,\n y: minY - padding,\n width: maxX - minX + padding * 2,\n height: maxY - minY + padding * 2,\n opacity: 100,\n locked: false\n }));\n this.scene.insertElement(frame);\n\n for (const child of selectedElements) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(child, {\n frameId: frame.id\n });\n }\n\n this.setState({\n selectedElementIds: {\n [frame.id]: true\n }\n });\n }\n\n this.onMagicFrameGenerate(frame, \"upstream\");\n }\n };\n\n this.openEyeDropper = ({\n type\n }) => {\n _jotai__WEBPACK_IMPORTED_MODULE_56__.jotaiStore.set(_EyeDropper__WEBPACK_IMPORTED_MODULE_62__.activeEyeDropperAtom, {\n swapPreviewOnAlt: true,\n colorPickerType: type === \"stroke\" ? \"elementStroke\" : \"elementBackground\",\n onSelect: (color, event) => {\n const shouldUpdateStrokeColor = type === \"background\" && event.altKey || type === \"stroke\" && !event.altKey;\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (!selectedElements.length || this.state.activeTool.type !== \"selection\") {\n if (shouldUpdateStrokeColor) {\n this.syncActionResult({\n appState: Object.assign(Object.assign({}, this.state), {\n currentItemStrokeColor: color\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.CAPTURE\n });\n } else {\n this.syncActionResult({\n appState: Object.assign(Object.assign({}, this.state), {\n currentItemBackgroundColor: color\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.CAPTURE\n });\n }\n } else {\n this.updateScene({\n elements: this.scene.getElementsIncludingDeleted().map(el => {\n if (this.state.selectedElementIds[el.id]) {\n return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(el, {\n [shouldUpdateStrokeColor ? \"strokeColor\" : \"backgroundColor\"]: color\n });\n }\n\n return el;\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.CAPTURE\n });\n }\n },\n keepOpenOnAlt: false\n });\n };\n\n this.syncActionResult = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(actionResult => {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j;\n\n if (this.unmounted || actionResult === false) {\n return;\n }\n\n let editingElement = null;\n\n if (actionResult.elements) {\n actionResult.elements.forEach(element => {\n var _a;\n\n if (((_a = this.state.editingElement) === null || _a === void 0 ? void 0 : _a.id) === element.id && this.state.editingElement !== element && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isNonDeletedElement)(element)) {\n editingElement = element;\n }\n });\n\n if (actionResult.storeAction === _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.UPDATE) {\n this.store.shouldUpdateSnapshot();\n } else if (actionResult.storeAction === _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.CAPTURE) {\n this.store.shouldCaptureIncrement();\n }\n\n this.scene.replaceAllElements(actionResult.elements);\n }\n\n if (actionResult.files) {\n this.files = actionResult.replaceFiles ? actionResult.files : Object.assign(Object.assign({}, this.files), actionResult.files);\n this.addNewImagesToImageCache();\n }\n\n if (actionResult.appState || editingElement || this.state.contextMenu) {\n if (actionResult.storeAction === _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.UPDATE) {\n this.store.shouldUpdateSnapshot();\n } else if (actionResult.storeAction === _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.CAPTURE) {\n this.store.shouldCaptureIncrement();\n }\n\n let viewModeEnabled = ((_a = actionResult === null || actionResult === void 0 ? void 0 : actionResult.appState) === null || _a === void 0 ? void 0 : _a.viewModeEnabled) || false;\n let zenModeEnabled = ((_b = actionResult === null || actionResult === void 0 ? void 0 : actionResult.appState) === null || _b === void 0 ? void 0 : _b.zenModeEnabled) || false;\n let gridSize = ((_c = actionResult === null || actionResult === void 0 ? void 0 : actionResult.appState) === null || _c === void 0 ? void 0 : _c.gridSize) || null;\n const theme = ((_d = actionResult === null || actionResult === void 0 ? void 0 : actionResult.appState) === null || _d === void 0 ? void 0 : _d.theme) || this.props.theme || _constants__WEBPACK_IMPORTED_MODULE_12__.THEME.LIGHT;\n const name = (_f = (_e = actionResult === null || actionResult === void 0 ? void 0 : actionResult.appState) === null || _e === void 0 ? void 0 : _e.name) !== null && _f !== void 0 ? _f : this.state.name;\n const errorMessage = (_h = (_g = actionResult === null || actionResult === void 0 ? void 0 : actionResult.appState) === null || _g === void 0 ? void 0 : _g.errorMessage) !== null && _h !== void 0 ? _h : this.state.errorMessage;\n\n if (typeof this.props.viewModeEnabled !== \"undefined\") {\n viewModeEnabled = this.props.viewModeEnabled;\n }\n\n if (typeof this.props.zenModeEnabled !== \"undefined\") {\n zenModeEnabled = this.props.zenModeEnabled;\n }\n\n if (typeof this.props.gridModeEnabled !== \"undefined\") {\n gridSize = this.props.gridModeEnabled ? _constants__WEBPACK_IMPORTED_MODULE_12__.GRID_SIZE : null;\n }\n\n editingElement = editingElement || ((_j = actionResult.appState) === null || _j === void 0 ? void 0 : _j.editingElement) || null;\n\n if (editingElement === null || editingElement === void 0 ? void 0 : editingElement.isDeleted) {\n editingElement = null;\n }\n\n this.setState(state => {\n // using Object.assign instead of spread to fool TS 4.2.2+ into\n // regarding the resulting type as not containing undefined\n // (which the following expression will never contain)\n return Object.assign(actionResult.appState || {}, {\n // NOTE this will prevent opening context menu using an action\n // or programmatically from the host, so it will need to be\n // rewritten later\n contextMenu: null,\n editingElement,\n viewModeEnabled,\n zenModeEnabled,\n gridSize,\n theme,\n name,\n errorMessage\n });\n });\n }\n }); // Lifecycle\n\n this.onBlur = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(() => {\n isHoldingSpace = false;\n this.setState({\n isBindingEnabled: true\n });\n });\n\n this.onUnload = () => {\n this.onBlur();\n };\n\n this.disableEvent = event => {\n event.preventDefault();\n };\n\n this.resetHistory = () => {\n this.history.clear();\n };\n\n this.resetStore = () => {\n this.store.clear();\n };\n /**\r\n * Resets scene & history.\r\n * ! Do not use to clear scene user action !\r\n */\n\n\n this.resetScene = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(opts => {\n this.scene.replaceAllElements([]);\n this.setState(state => Object.assign(Object.assign({}, (0,_appState__WEBPACK_IMPORTED_MODULE_10__.getDefaultAppState)()), {\n isLoading: (opts === null || opts === void 0 ? void 0 : opts.resetLoadingState) ? false : state.isLoading,\n theme: this.state.theme\n }));\n this.resetStore();\n this.resetHistory();\n });\n\n this.initializeScene = async () => {\n var _a;\n\n if (\"launchQueue\" in window && \"LaunchParams\" in window) {\n window.launchQueue.setConsumer(async launchParams => {\n if (!launchParams.files.length) {\n return;\n }\n\n const fileHandle = launchParams.files[0];\n const blob = await fileHandle.getFile();\n this.loadFileToCanvas(new File([blob], blob.name || \"\", {\n type: blob.type\n }), fileHandle);\n });\n }\n\n if (this.props.theme) {\n this.setState({\n theme: this.props.theme\n });\n }\n\n if (!this.state.isLoading) {\n this.setState({\n isLoading: true\n });\n }\n\n let initialData = null;\n\n try {\n initialData = (await this.props.initialData) || null;\n\n if (initialData === null || initialData === void 0 ? void 0 : initialData.libraryItems) {\n this.library.updateLibrary({\n libraryItems: initialData.libraryItems,\n merge: true\n }).catch(error => {\n console.error(error);\n });\n }\n } catch (error) {\n console.error(error);\n initialData = {\n appState: {\n errorMessage: error.message || \"Encountered an error during importing or restoring scene data\"\n }\n };\n }\n\n const scene = (0,_data_restore__WEBPACK_IMPORTED_MODULE_15__.restore)(initialData, null, null, {\n repairBindings: true\n });\n scene.appState = Object.assign(Object.assign({}, scene.appState), {\n theme: this.props.theme || scene.appState.theme,\n // we're falling back to current (pre-init) state when deciding\n // whether to open the library, to handle a case where we\n // update the state outside of initialData (e.g. when loading the app\n // with a library install link, which should auto-open the library)\n openSidebar: ((_a = scene.appState) === null || _a === void 0 ? void 0 : _a.openSidebar) || this.state.openSidebar,\n activeTool: scene.appState.activeTool.type === \"image\" ? Object.assign(Object.assign({}, scene.appState.activeTool), {\n type: \"selection\"\n }) : scene.appState.activeTool,\n isLoading: false,\n toast: this.state.toast\n });\n\n if (initialData === null || initialData === void 0 ? void 0 : initialData.scrollToContent) {\n scene.appState = Object.assign(Object.assign({}, scene.appState), (0,_scene__WEBPACK_IMPORTED_MODULE_29__.calculateScrollCenter)(scene.elements, Object.assign(Object.assign({}, scene.appState), {\n width: this.state.width,\n height: this.state.height,\n offsetTop: this.state.offsetTop,\n offsetLeft: this.state.offsetLeft\n })));\n } // FontFaceSet loadingdone event we listen on may not always fire\n // (looking at you Safari), so on init we manually load fonts for current\n // text elements on canvas, and rerender them once done. This also\n // seems faster even in browsers that do fire the loadingdone event.\n\n\n this.fonts.loadFontsForElements(scene.elements);\n this.resetStore();\n this.resetHistory();\n this.syncActionResult(Object.assign(Object.assign({}, scene), {\n storeAction: _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.UPDATE\n }));\n };\n\n this.isMobileBreakpoint = (width, height) => {\n return width !== 0 && //zsviczian changing tabs in Obsidian causes MobileMenu to be rendered\n this.allowMobileMode && ( //zsviczian\n width < _constants__WEBPACK_IMPORTED_MODULE_12__.MQ_MAX_WIDTH_PORTRAIT || height < _constants__WEBPACK_IMPORTED_MODULE_12__.MQ_MAX_HEIGHT_LANDSCAPE && width < _constants__WEBPACK_IMPORTED_MODULE_12__.MQ_MAX_WIDTH_LANDSCAPE);\n };\n\n this.refreshViewportBreakpoints = () => {\n const container = this.excalidrawContainerRef.current;\n\n if (!container) {\n return;\n }\n\n const {\n clientWidth: viewportWidth,\n clientHeight: viewportHeight\n } = (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_86__.getExcalidrawContentEl)(); //zsviczian was document.body;\n\n const prevViewportState = this.device.viewport;\n const nextViewportState = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateObject)(prevViewportState, {\n isLandscape: viewportWidth > viewportHeight,\n isMobile: this.isMobileBreakpoint(viewportWidth, viewportHeight)\n });\n\n if (prevViewportState !== nextViewportState) {\n this.device = Object.assign(Object.assign({}, this.device), {\n viewport: nextViewportState\n });\n return true;\n }\n\n return false;\n };\n\n this.refreshEditorBreakpoints = () => {\n const container = this.excalidrawContainerRef.current;\n\n if (!container) {\n return;\n }\n\n const {\n width: editorWidth,\n height: editorHeight\n } = container.getBoundingClientRect();\n const sidebarBreakpoint = this.props.UIOptions.dockedSidebarBreakpoint != null ? this.props.UIOptions.dockedSidebarBreakpoint : _constants__WEBPACK_IMPORTED_MODULE_12__.MQ_RIGHT_SIDEBAR_MIN_WIDTH;\n const prevEditorState = this.device.editor;\n const nextEditorState = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateObject)(prevEditorState, {\n isMobile: this.isMobileBreakpoint(editorWidth, editorHeight),\n canFitSidebar: editorWidth > sidebarBreakpoint\n });\n\n if (prevEditorState !== nextEditorState) {\n this.device = Object.assign(Object.assign({}, this.device), {\n editor: nextEditorState\n });\n return true;\n }\n\n return false;\n };\n\n this.onResize = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(() => {\n this.scene.getElementsIncludingDeleted().forEach(element => _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_67__.ShapeCache[\"delete\"](element));\n this.refreshViewportBreakpoints();\n this.updateDOMRect();\n\n if (!_constants__WEBPACK_IMPORTED_MODULE_12__.supportsResizeObserver) {\n this.refreshEditorBreakpoints();\n }\n\n this.setState({});\n });\n /** generally invoked only if fullscreen was invoked programmatically */\n\n this.onFullscreenChange = () => {\n var _a;\n\n if ( // points to the iframe element we fullscreened\n !document.fullscreenElement && ((_a = this.state.activeEmbeddable) === null || _a === void 0 ? void 0 : _a.state) === \"active\") {\n this.setState({\n activeEmbeddable: null\n });\n }\n };\n\n this.renderInteractiveSceneCallback = ({\n atLeastOneVisibleElement,\n scrollBars,\n elementsMap\n }) => {\n if (!document.querySelector(\".excalidraw\")) {\n return;\n } //zsviczian - address issue when moving excalidraw to a new window/document\n\n\n if (scrollBars) {\n currentScrollBars = scrollBars;\n }\n\n const scrolledOutside = // hide when editing text\n (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(this.state.editingElement) ? false : !atLeastOneVisibleElement && elementsMap.size > 0;\n\n if (this.state.scrolledOutside !== scrolledOutside) {\n this.setState({\n scrolledOutside\n });\n }\n\n this.scheduleImageRefresh();\n };\n\n this.onScroll = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.debounce)(() => {\n const {\n offsetTop,\n offsetLeft\n } = this.getCanvasOffsets();\n this.setState(state => {\n if (state.offsetLeft === offsetLeft && state.offsetTop === offsetTop) {\n return null;\n }\n\n return {\n offsetTop,\n offsetLeft\n };\n });\n }, _constants__WEBPACK_IMPORTED_MODULE_12__.SCROLL_TIMEOUT); // Copy/paste\n\n this.onCut = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(event => {\n var _a;\n\n const isExcalidrawActive = (_a = this.excalidrawContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement);\n\n if (!isExcalidrawActive || (0,_utils__WEBPACK_IMPORTED_MODULE_35__.isWritableElement)(event.target)) {\n return;\n }\n\n this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionCut, \"keyboard\", event);\n event.preventDefault();\n event.stopPropagation();\n });\n this.onCopy = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(event => {\n var _a;\n\n const isExcalidrawActive = (_a = this.excalidrawContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement);\n\n if (!isExcalidrawActive || (0,_utils__WEBPACK_IMPORTED_MODULE_35__.isWritableElement)(event.target)) {\n return;\n }\n\n this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionCopy, \"keyboard\", event);\n event.preventDefault();\n event.stopPropagation();\n });\n\n this.onTouchStart = event => {\n // fix for Apple Pencil Scribble (do not prevent for other devices)\n if (_constants__WEBPACK_IMPORTED_MODULE_12__.isIOS) {\n event.preventDefault();\n }\n\n if (!didTapTwice) {\n didTapTwice = true;\n clearTimeout(tappedTwiceTimer);\n tappedTwiceTimer = window.setTimeout(App.resetTapTwice, _constants__WEBPACK_IMPORTED_MODULE_12__.TAP_TWICE_TIMEOUT);\n return;\n } // insert text only if we tapped twice with a single finger\n // event.touches.length === 1 will also prevent inserting text when user's zooming\n\n\n if (didTapTwice && event.touches.length === 1) {\n const touch = event.touches[0]; // @ts-ignore\n\n this.handleCanvasDoubleClick({\n clientX: touch.clientX,\n clientY: touch.clientY\n });\n didTapTwice = false;\n clearTimeout(tappedTwiceTimer);\n }\n\n if (event.touches.length === 2) {\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, this.state),\n activeEmbeddable: null\n });\n }\n };\n\n this.onTouchEnd = event => {\n this.resetContextMenuTimer();\n\n if (event.touches.length > 0) {\n this.setState({\n previousSelectedElementIds: {},\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(this.state.previousSelectedElementIds, this.state)\n });\n } else {\n gesture.pointers.clear();\n }\n };\n\n this.pasteFromClipboard = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(async event => {\n var _a, _b;\n\n const isPlainPaste = !!IS_PLAIN_PASTE; // #686\n\n const target = document.activeElement;\n const isExcalidrawActive = (_a = this.excalidrawContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(target);\n\n if (event && !isExcalidrawActive) {\n return;\n }\n\n const elementUnderCursor = document.elementFromPoint(this.lastViewportPosition.x, this.lastViewportPosition.y);\n\n if (event && (!(elementUnderCursor instanceof HTMLCanvasElement) || (0,_utils__WEBPACK_IMPORTED_MODULE_35__.isWritableElement)(target))) {\n return;\n }\n\n const {\n x: sceneX,\n y: sceneY\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)({\n clientX: this.lastViewportPosition.x,\n clientY: this.lastViewportPosition.y\n }, this.state); // must be called in the same frame (thus before any awaits) as the paste\n // event else some browsers (FF...) will clear the clipboardData\n // (something something security)\n\n let file = (_b = event === null || event === void 0 ? void 0 : event.clipboardData) === null || _b === void 0 ? void 0 : _b.files[0];\n const data = await (0,_clipboard__WEBPACK_IMPORTED_MODULE_11__.parseClipboard)(event, isPlainPaste);\n\n if (!file && !isPlainPaste) {\n if (data.mixedContent) {\n return this.addElementsFromMixedContentPaste(data.mixedContent, {\n isPlainPaste,\n sceneX,\n sceneY\n });\n } else if (data.text) {\n const string = data.text.trim();\n\n if (string.startsWith(\"<svg\") && string.endsWith(\"</svg>\")) {\n // ignore SVG validation/normalization which will be done during image\n // initialization\n file = (0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.SVGStringToFile)(string);\n }\n }\n } // prefer spreadsheet data over image file (MS Office/Libre Office)\n\n\n if ((0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.isSupportedImageFile)(file) && !data.spreadsheet) {\n if (!this.isToolSupported(\"image\")) {\n this.setState({\n errorMessage: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageToolNotSupported\")\n });\n return;\n }\n\n const imageElement = this.createImageElement({\n sceneX,\n sceneY\n });\n this.insertImageElement(imageElement, file);\n this.initializeImageDimensions(imageElement);\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({\n [imageElement.id]: true\n }, this.state)\n });\n return;\n }\n\n if (this.props.onPaste) {\n try {\n if ((await this.props.onPaste(data, event)) === false) {\n return;\n }\n } catch (error) {\n console.error(error);\n }\n }\n\n if (data.errorMessage) {\n this.setState({\n errorMessage: data.errorMessage\n });\n } else if (data.spreadsheet && !isPlainPaste) {\n this.setState({\n pasteDialog: {\n data: data.spreadsheet,\n shown: true\n }\n });\n } else if (data.elements) {\n const elements = data.programmaticAPI ? (0,_data_transform__WEBPACK_IMPORTED_MODULE_63__.convertToExcalidrawElements)(data.elements) : data.elements; // TODO remove formatting from elements if isPlainPaste\n\n this.addElementsFromPasteOrLibrary({\n elements,\n files: data.files || null,\n position: \"cursor\",\n retainSeed: isPlainPaste\n });\n } else if (data.text) {\n const nonEmptyLines = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.normalizeEOL)(data.text).split(/\\n+/).map(s => s.trim()).filter(Boolean);\n const embbeddableUrls = nonEmptyLines.map(str => (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_36__.maybeParseEmbedSrc)(str)).filter(string => {\n var _a;\n\n return (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_36__.embeddableURLValidator)(string, this.props.validateEmbeddable) && (/^(http|https):\\/\\/[^\\s/$.?#].[^\\s]*$/.test(string) || ((_a = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_36__.getEmbedLink)(string)) === null || _a === void 0 ? void 0 : _a.type) === \"video\");\n });\n\n if (!IS_PLAIN_PASTE && embbeddableUrls.length > 0 && // if there were non-embeddable text (lines) mixed in with embeddable\n // urls, ignore and paste as text\n embbeddableUrls.length === nonEmptyLines.length) {\n const embeddables = [];\n\n for (const url of embbeddableUrls) {\n const prevEmbeddable = embeddables[embeddables.length - 1];\n const embeddable = this.insertEmbeddableElement({\n sceneX: prevEmbeddable ? prevEmbeddable.x + prevEmbeddable.width + 20 : sceneX,\n sceneY,\n link: (0,_data_url__WEBPACK_IMPORTED_MODULE_47__.normalizeLink)(url)\n });\n\n if (embeddable) {\n embeddables.push(embeddable);\n }\n }\n\n if (embeddables.length) {\n this.setState({\n selectedElementIds: Object.fromEntries(embeddables.map(embeddable => [embeddable.id, true]))\n });\n }\n\n return;\n }\n\n this.addTextFromPaste(data.text, isPlainPaste);\n }\n\n this.setActiveTool({\n type: \"selection\"\n });\n event === null || event === void 0 ? void 0 : event.preventDefault();\n });\n\n this.addElementsFromPasteOrLibrary = opts => {\n const elements = (0,_data_restore__WEBPACK_IMPORTED_MODULE_15__.restoreElements)(opts.elements, null, undefined);\n const [minX, minY, maxX, maxY] = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(elements);\n const elementsCenterX = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.distance)(minX, maxX) / 2;\n const elementsCenterY = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.distance)(minY, maxY) / 2;\n const clientX = typeof opts.position === \"object\" ? opts.position.clientX : opts.position === \"cursor\" ? this.lastViewportPosition.x : this.state.width / 2 + this.state.offsetLeft;\n const clientY = typeof opts.position === \"object\" ? opts.position.clientY : opts.position === \"cursor\" ? this.lastViewportPosition.y : this.state.height / 2 + this.state.offsetTop;\n const {\n x,\n y\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)({\n clientX,\n clientY\n }, this.state);\n const dx = x - elementsCenterX;\n const dy = y - elementsCenterY;\n const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(dx, dy, this.state.gridSize);\n const newElements = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.duplicateElements)(elements.map(element => {\n return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(element, {\n x: element.x + gridX - minX,\n y: element.y + gridY - minY\n });\n }), {\n randomizeSeed: !opts.retainSeed\n });\n const prevElements = this.scene.getElementsIncludingDeleted();\n const nextElements = [...prevElements, ...newElements];\n (0,_fractionalIndex__WEBPACK_IMPORTED_MODULE_90__.syncMovedIndices)(nextElements, (0,_utils__WEBPACK_IMPORTED_MODULE_35__.arrayToMap)(newElements));\n const topLayerFrame = this.getTopLayerFrameAtSceneCoords({\n x,\n y\n });\n\n if (topLayerFrame) {\n const eligibleElements = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.filterElementsEligibleAsFrameChildren)(newElements, topLayerFrame);\n (0,_frame__WEBPACK_IMPORTED_MODULE_51__.addElementsToFrame)(nextElements, eligibleElements, topLayerFrame);\n }\n\n this.scene.replaceAllElements(nextElements);\n newElements.forEach(newElement => {\n if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(newElement) && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(newElement)) {\n const container = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.getContainerElement)(newElement, this.scene.getElementsMapIncludingDeleted());\n (0,_element__WEBPACK_IMPORTED_MODULE_16__.redrawTextBoundingBox)(newElement, container, this.scene.getElementsMapIncludingDeleted());\n }\n });\n\n if (opts.files) {\n this.files = Object.assign(Object.assign({}, this.files), opts.files);\n }\n\n this.store.shouldCaptureIncrement();\n const nextElementsToSelect = (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.excludeElementsInFramesFromSelection)(newElements);\n this.setState(Object.assign(Object.assign(Object.assign({}, this.state), {\n // keep sidebar (presumably the library) open if it's docked and\n // can fit.\n //\n // Note, we should close the sidebar only if we're dropping items\n // from library, not when pasting from clipboard. Alas.\n openSidebar: this.state.openSidebar && this.device.editor.canFitSidebar && _jotai__WEBPACK_IMPORTED_MODULE_56__.jotaiStore.get(_Sidebar_Sidebar__WEBPACK_IMPORTED_MODULE_64__.isSidebarDockedAtom) ? this.state.openSidebar : null\n }), (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n editingGroupId: null,\n selectedElementIds: nextElementsToSelect.reduce((acc, element) => {\n if (!(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(element)) {\n acc[element.id] = true;\n }\n\n return acc;\n }, {})\n }, this.scene.getNonDeletedElements(), this.state, this)), () => {\n if (opts.files) {\n this.addNewImagesToImageCache();\n }\n });\n this.setActiveTool({\n type: \"selection\"\n });\n\n if (opts.fitToContent) {\n this.scrollToContent(newElements, {\n fitToContent: true\n });\n }\n };\n\n this.setAppState = (state, callback) => {\n this.setState(state, callback);\n };\n\n this.removePointer = event => {\n if (touchTimeout) {\n this.resetContextMenuTimer();\n }\n\n gesture.pointers.delete(event.pointerId);\n };\n\n this.toggleLock = (source = \"ui\") => {\n if (!this.state.activeTool.locked) {\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"toolbar\", \"toggleLock\", `${source} (${this.device.editor.isMobile ? \"mobile\" : \"desktop\"})`);\n }\n\n this.setState(prevState => {\n return {\n activeTool: Object.assign(Object.assign(Object.assign({}, prevState.activeTool), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateActiveTool)(this.state, prevState.activeTool.locked ? {\n type: \"selection\"\n } : prevState.activeTool)), {\n locked: !prevState.activeTool.locked\n })\n };\n });\n };\n\n this.updateFrameRendering = opts => {\n this.setState(prevState => {\n var _a, _b, _c, _d;\n\n const next = typeof opts === \"function\" ? opts(prevState.frameRendering) : opts;\n return {\n frameRendering: {\n enabled: (_a = next === null || next === void 0 ? void 0 : next.enabled) !== null && _a !== void 0 ? _a : prevState.frameRendering.enabled,\n clip: (_b = next === null || next === void 0 ? void 0 : next.clip) !== null && _b !== void 0 ? _b : prevState.frameRendering.clip,\n name: (_c = next === null || next === void 0 ? void 0 : next.name) !== null && _c !== void 0 ? _c : prevState.frameRendering.name,\n outline: (_d = next === null || next === void 0 ? void 0 : next.outline) !== null && _d !== void 0 ? _d : prevState.frameRendering.outline\n }\n };\n });\n };\n\n this.togglePenMode = force => {\n this.setState(prevState => {\n return {\n penMode: force !== null && force !== void 0 ? force : !prevState.penMode,\n penDetected: true\n };\n });\n };\n\n this.onHandToolToggle = () => {\n //zsviczian added timeout because button won't select otherwise\n setTimeout(() => this.actionManager.executeAction(_actions_actionCanvas__WEBPACK_IMPORTED_MODULE_55__.actionToggleHandTool));\n };\n /**\r\n * Zooms on canvas viewport center\r\n */\n\n\n this.zoomCanvas = (\n /** decimal fraction between 0.1 (10% zoom) and 30 (3000% zoom) */\n value) => {\n this.setState(Object.assign({}, (0,_scene_zoom__WEBPACK_IMPORTED_MODULE_31__.getStateForZoom)({\n viewportX: this.state.width / 2 + this.state.offsetLeft,\n viewportY: this.state.height / 2 + this.state.offsetTop,\n nextZoom: (0,_scene__WEBPACK_IMPORTED_MODULE_29__.getNormalizedZoom)(value)\n }, this.state)));\n };\n\n this.cancelInProgressAnimation = null;\n\n this.scrollToContent = (target = this.scene.getNonDeletedElements(), opts) => {\n var _a, _b;\n\n (_a = this.cancelInProgressAnimation) === null || _a === void 0 ? void 0 : _a.call(this); // convert provided target into ExcalidrawElement[] if necessary\n\n const targetElements = Array.isArray(target) ? target : [target];\n let zoom = this.state.zoom;\n let scrollX = this.state.scrollX;\n let scrollY = this.state.scrollY;\n\n if ((opts === null || opts === void 0 ? void 0 : opts.fitToContent) || (opts === null || opts === void 0 ? void 0 : opts.fitToViewport)) {\n const {\n appState\n } = (0,_actions_actionCanvas__WEBPACK_IMPORTED_MODULE_55__.zoomToFit)({\n targetElements,\n appState: this.state,\n fitToViewport: !!(opts === null || opts === void 0 ? void 0 : opts.fitToViewport),\n viewportZoomFactor: opts === null || opts === void 0 ? void 0 : opts.viewportZoomFactor\n });\n zoom = appState.zoom;\n scrollX = appState.scrollX;\n scrollY = appState.scrollY;\n } else {\n // compute only the viewport location, without any zoom adjustment\n const scroll = (0,_scene__WEBPACK_IMPORTED_MODULE_29__.calculateScrollCenter)(targetElements, this.state);\n scrollX = scroll.scrollX;\n scrollY = scroll.scrollY;\n } // when animating, we use RequestAnimationFrame to prevent the animation\n // from slowing down other processes\n\n\n if (opts === null || opts === void 0 ? void 0 : opts.animate) {\n const origScrollX = this.state.scrollX;\n const origScrollY = this.state.scrollY;\n const origZoom = this.state.zoom.value;\n const cancel = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.easeToValuesRAF)({\n fromValues: {\n scrollX: origScrollX,\n scrollY: origScrollY,\n zoom: origZoom\n },\n toValues: {\n scrollX,\n scrollY,\n zoom: zoom.value\n },\n interpolateValue: (from, to, progress, key) => {\n // for zoom, use different easing\n if (key === \"zoom\") {\n return from * Math.pow(to / from, (0,_utils__WEBPACK_IMPORTED_MODULE_35__.easeOut)(progress));\n } // handle using default\n\n\n return undefined;\n },\n onStep: ({\n scrollX,\n scrollY,\n zoom\n }) => {\n this.setState({\n scrollX,\n scrollY,\n zoom: {\n value: zoom\n }\n });\n },\n onStart: () => {\n this.setState({\n shouldCacheIgnoreZoom: true\n });\n },\n onEnd: () => {\n this.setState({\n shouldCacheIgnoreZoom: false\n });\n },\n onCancel: () => {\n this.setState({\n shouldCacheIgnoreZoom: false\n });\n },\n duration: (_b = opts === null || opts === void 0 ? void 0 : opts.duration) !== null && _b !== void 0 ? _b : 500\n });\n\n this.cancelInProgressAnimation = () => {\n cancel();\n this.cancelInProgressAnimation = null;\n };\n } else {\n this.setState({\n scrollX,\n scrollY,\n zoom\n });\n }\n };\n\n this.maybeUnfollowRemoteUser = () => {\n if (this.state.userToFollow) {\n this.setState({\n userToFollow: null\n });\n }\n };\n /** use when changing scrollX/scrollY/zoom based on user interaction */\n\n\n this.translateCanvas = state => {\n var _a;\n\n (_a = this.cancelInProgressAnimation) === null || _a === void 0 ? void 0 : _a.call(this);\n this.maybeUnfollowRemoteUser();\n this.setState(state);\n }; //zsviczian\n\n\n this.zoomToFit = (target = this.scene.getNonDeletedElements(), maxZoom = 1, //null will zoom to max based on viewport\n margin = 0.03) => {\n if (!target) {\n target = this.scene.getNonDeletedElements();\n }\n\n if (target.length === 0) {\n maxZoom = 1;\n }\n\n this.setState((0,_actions_actionCanvas__WEBPACK_IMPORTED_MODULE_55__.zoomToFitElements)(target, this.state, false, this, maxZoom, margin).appState);\n }; //zsviczian\n\n\n this.startLineEditor = (el, selectedPointsIndices = null) => {\n if (!el || !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(el)) {\n return;\n }\n\n const editingLinearElement = new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(el);\n this.setState({\n selectedLinearElement: editingLinearElement,\n editingLinearElement: Object.assign(Object.assign({}, editingLinearElement), {\n selectedPointsIndices\n })\n });\n }; //zsviczian\n\n\n this.updateContainerSize = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(containers => {\n containers.forEach(el => {\n const [x, y] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.rotate)(el.x + el.width, el.y + el.height, el.x + el.width / 2, el.y + el.height / 2, el.angle);\n (0,_element_resizeElements__WEBPACK_IMPORTED_MODULE_93__.resizeSingleElement)(new Map().set(el.id, el), false, el, this.scene.getElementsMapIncludingDeleted(), \"se\", true, x, y);\n });\n });\n\n this.setToast = toast => {\n this.setState({\n toast\n });\n };\n\n this.restoreFileFromShare = async () => {\n try {\n const webShareTargetCache = await caches.open(\"web-share-target\");\n const response = await webShareTargetCache.match(\"shared-file\");\n\n if (response) {\n const blob = await response.blob();\n const file = new File([blob], blob.name || \"\", {\n type: blob.type\n });\n this.loadFileToCanvas(file, null);\n await webShareTargetCache.delete(\"shared-file\");\n window.history.replaceState(null, _constants__WEBPACK_IMPORTED_MODULE_12__.APP_NAME, window.location.pathname);\n }\n } catch (error) {\n this.setState({\n errorMessage: error.message\n });\n }\n };\n /** adds supplied files to existing files in the appState */\n\n\n this.addFiles = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(files => {\n const filesMap = files.reduce((acc, fileData) => {\n acc.set(fileData.id, fileData);\n return acc;\n }, new Map());\n this.files = Object.assign(Object.assign({}, this.files), Object.fromEntries(filesMap));\n this.scene.getNonDeletedElements().forEach(element => {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isInitializedImageElement)(element) && filesMap.has(element.fileId)) {\n this.imageCache.delete(element.fileId);\n _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_67__.ShapeCache[\"delete\"](element);\n }\n });\n this.scene.triggerUpdate();\n this.addNewImagesToImageCache();\n }); //zsviczian https://github.com/zsviczian/excalibrain/issues/9\n\n this.setMobileModeAllowed = allow => {\n const {\n width: editorWidth,\n height: editorHeight\n } = this.excalidrawContainerRef.current.getBoundingClientRect();\n this.allowMobileMode = allow;\n const prevEditorState = this.device.editor;\n let nextEditorState;\n\n if (allow) {\n nextEditorState = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateObject)(prevEditorState, {\n isMobile: this.isMobileBreakpoint(editorWidth, editorHeight)\n });\n } else {\n nextEditorState = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateObject)(prevEditorState, {\n isMobile: false //must test this\n\n });\n }\n\n if (prevEditorState !== nextEditorState) {\n this.device = Object.assign(Object.assign({}, this.device), {\n editor: nextEditorState\n });\n this.forceUpdate();\n }\n }; //zsviczian\n\n\n this.setLocalFont = showOnPanel => {\n showFourthFont = showOnPanel;\n }; //zsviczian\n\n\n this.selectElements = elements => {\n this.updateScene({\n appState: Object.assign(Object.assign({}, this.state), {\n editingGroupId: null,\n selectedElementIds: elements.reduce((map, element) => {\n map[element.id] = true;\n return map;\n }, {})\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.NONE\n });\n };\n\n this.bringToFront = elements => {\n this.selectElements(elements);\n this.updateScene(_actions__WEBPACK_IMPORTED_MODULE_5__.actionBringToFront.perform(this.scene.getNonDeletedElements(), this.state));\n };\n\n this.bringForward = elements => {\n this.selectElements(elements);\n this.updateScene(_actions__WEBPACK_IMPORTED_MODULE_5__.actionBringForward.perform(this.scene.getNonDeletedElements(), this.state));\n };\n\n this.sendToBack = elements => {\n this.selectElements(elements);\n this.updateScene(_actions__WEBPACK_IMPORTED_MODULE_5__.actionSendToBack.perform(this.scene.getNonDeletedElements(), this.state));\n };\n\n this.sendBackward = elements => {\n this.selectElements(elements);\n this.updateScene(_actions__WEBPACK_IMPORTED_MODULE_5__.actionSendBackward.perform(this.scene.getNonDeletedElements(), this.state));\n };\n\n this.updateScene = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(sceneData => {\n var _a;\n\n const nextElements = (0,_fractionalIndex__WEBPACK_IMPORTED_MODULE_90__.syncInvalidIndices)((_a = sceneData.elements) !== null && _a !== void 0 ? _a : []);\n\n if (sceneData.storeAction && sceneData.storeAction !== _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.NONE) {\n const prevCommittedAppState = this.store.snapshot.appState;\n const prevCommittedElements = this.store.snapshot.elements;\n const nextCommittedAppState = sceneData.appState ? Object.assign({}, prevCommittedAppState, sceneData.appState) // new instance, with partial appstate applied to previously captured one, including hidden prop inside `prevCommittedAppState`\n : prevCommittedAppState;\n const nextCommittedElements = sceneData.elements ? this.store.filterUncomittedElements(this.scene.getElementsMapIncludingDeleted(), // Only used to detect uncomitted local elements\n (0,_utils__WEBPACK_IMPORTED_MODULE_35__.arrayToMap)(nextElements)) : prevCommittedElements; // WARN: store action always performs deep clone of changed elements, for ephemeral remote updates (i.e. remote dragging, resizing, drawing) we might consider doing something smarter\n // do NOT schedule store actions (execute after re-render), as it might cause unexpected concurrency issues if not handled well\n\n if (sceneData.storeAction === _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.CAPTURE) {\n this.store.captureIncrement(nextCommittedElements, nextCommittedAppState);\n } else if (sceneData.storeAction === _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.UPDATE) {\n this.store.updateSnapshot(nextCommittedElements, nextCommittedAppState);\n }\n }\n\n (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.flushSync)(() => {\n if (sceneData.appState) {\n this.setState(sceneData.appState);\n }\n });\n\n if (sceneData.elements) {\n this.scene.replaceAllElements(nextElements);\n }\n\n if (sceneData.collaborators) {\n this.setState({\n collaborators: sceneData.collaborators\n });\n }\n });\n\n this.triggerRender = (\n /** force always re-renders canvas even if no change */\n force) => {\n if (force === true) {\n this.scene.triggerUpdate();\n } else {\n this.setState({});\n }\n };\n /**\r\n * @returns whether the menu was toggled on or off\r\n */\n\n\n this.toggleSidebar = ({\n name,\n tab,\n force\n }) => {\n var _a, _b;\n\n let nextName;\n\n if (force === undefined) {\n nextName = ((_a = this.state.openSidebar) === null || _a === void 0 ? void 0 : _a.name) === name && ((_b = this.state.openSidebar) === null || _b === void 0 ? void 0 : _b.tab) === tab ? null : name;\n } else {\n nextName = force ? name : null;\n }\n\n const nextState = nextName ? {\n name: nextName\n } : null;\n\n if (nextState && tab) {\n nextState.tab = tab;\n }\n\n this.setState({\n openSidebar: nextState\n });\n return !!nextName;\n };\n\n this.updateCurrentCursorPosition = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(event => {\n this.lastViewportPosition.x = event.clientX;\n this.lastViewportPosition.y = event.clientY;\n }); // Input handling\n\n this.onKeyDown = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(event => {\n if (this.state.activeTool.type === \"selection\" && this.state.resizingElement && (event.shiftKey || event.altKey)) {\n event.stopPropagation(); //zsviczian shift fires repeatedly causing slowdown when resizing sticky notes\n\n return;\n } // normalize `event.key` when CapsLock is pressed #2372\n\n\n if (\"Proxy\" in window && (!event.shiftKey && /^[A-Z]$/.test(event.key) || event.shiftKey && /^[a-z]$/.test(event.key))) {\n event = new Proxy(event, {\n get(ev, prop) {\n const value = ev[prop];\n\n if (typeof value === \"function\") {\n // fix for Proxies hijacking `this`\n return value.bind(ev);\n }\n\n return prop === \"key\" ? // CapsLock inverts capitalization based on ShiftKey, so invert\n // it back\n event.shiftKey ? ev.key.toUpperCase() : ev.key.toLowerCase() : value;\n }\n\n });\n }\n\n if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.P && !event.shiftKey && !event.altKey) {\n this.setToast({\n message: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"commandPalette.shortcutHint\", {\n shortcut: (0,_actions_shortcuts__WEBPACK_IMPORTED_MODULE_92__.getShortcutFromShortcutName)(\"commandPalette\")\n })\n });\n event.preventDefault();\n return;\n }\n\n if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && event.key.toLowerCase() === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.V) {\n IS_PLAIN_PASTE = event.shiftKey;\n clearTimeout(IS_PLAIN_PASTE_TIMER); // reset (100ms to be safe that we it runs after the ensuing\n // paste event). Though, technically unnecessary to reset since we\n // (re)set the flag before each paste event.\n\n IS_PLAIN_PASTE_TIMER = window.setTimeout(() => {\n IS_PLAIN_PASTE = false;\n }, 100);\n } // prevent browser zoom in input fields\n\n\n if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && (0,_utils__WEBPACK_IMPORTED_MODULE_35__.isWritableElement)(event.target)) {\n if (event.code === _keys__WEBPACK_IMPORTED_MODULE_26__.CODES.MINUS || event.code === _keys__WEBPACK_IMPORTED_MODULE_26__.CODES.EQUAL) {\n event.preventDefault();\n return;\n }\n } // bail if\n\n\n if ( // inside an input\n (0,_utils__WEBPACK_IMPORTED_MODULE_35__.isWritableElement)(event.target) && // unless pressing escape (finalize action)\n event.key !== _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ESCAPE || // or unless using arrows (to move between buttons)\n (0,_keys__WEBPACK_IMPORTED_MODULE_26__.isArrowKey)(event.key) && (0,_utils__WEBPACK_IMPORTED_MODULE_35__.isInputLike)(event.target)) {\n return;\n }\n\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.QUESTION_MARK) {\n this.setState({\n openDialog: {\n name: \"help\"\n }\n });\n return;\n } else if (event.key.toLowerCase() === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.E && event.shiftKey && event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n event.preventDefault();\n this.setState({\n openDialog: {\n name: \"imageExport\"\n }\n });\n return;\n }\n\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.PAGE_UP || event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.PAGE_DOWN) {\n let offset = (event.shiftKey ? this.state.width : this.state.height) / this.state.zoom.value;\n\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.PAGE_DOWN) {\n offset = -offset;\n }\n\n if (event.shiftKey) {\n this.translateCanvas(state => ({\n scrollX: state.scrollX + offset\n }));\n } else {\n this.translateCanvas(state => ({\n scrollY: state.scrollY + offset\n }));\n }\n }\n\n if (this.actionManager.handleKeyDown(event)) {\n return;\n }\n\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.K && !event.altKey && !event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isLaserPointerActive)(this.state)) {\n this.setActiveTool({\n type: \"selection\"\n });\n } else {\n this.setActiveTool({\n type: \"laser\"\n });\n }\n\n return;\n }\n\n if (this.state.viewModeEnabled) {\n //revert to hand in case a key is pressed (K is handled above)\n if (event.key !== _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.K) {\n this.setActiveTool({\n type: \"selection\"\n });\n }\n\n return;\n }\n\n if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && this.state.isBindingEnabled) {\n this.setState({\n isBindingEnabled: false\n });\n }\n\n if ((0,_keys__WEBPACK_IMPORTED_MODULE_26__.isArrowKey)(event.key)) {\n const step = this.state.gridSize && (event.shiftKey ? _constants__WEBPACK_IMPORTED_MODULE_12__.ELEMENT_TRANSLATE_AMOUNT : this.state.gridSize) || (event.shiftKey ? _constants__WEBPACK_IMPORTED_MODULE_12__.ELEMENT_SHIFT_TRANSLATE_AMOUNT : _constants__WEBPACK_IMPORTED_MODULE_12__.ELEMENT_TRANSLATE_AMOUNT);\n let offsetX = 0;\n let offsetY = 0;\n\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ARROW_LEFT) {\n offsetX = -step;\n } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ARROW_RIGHT) {\n offsetX = step;\n } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ARROW_UP) {\n offsetY = -step;\n } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ARROW_DOWN) {\n offsetY = step;\n }\n\n const selectedElements = this.scene.getSelectedElements({\n selectedElementIds: this.state.selectedElementIds,\n includeBoundTextElement: true,\n includeElementsInFrames: true\n });\n selectedElements.forEach(element => {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n x: element.x + offsetX,\n y: element.y + offsetY\n });\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.updateBoundElements)(element, this.scene.getNonDeletedElementsMap(), {\n simultaneouslyUpdated: selectedElements\n });\n });\n this.setState({\n suggestedBindings: (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getSuggestedBindingsForArrows)(selectedElements, this)\n });\n event.preventDefault();\n } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ENTER) {\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (selectedElements.length === 1) {\n const selectedElement = selectedElements[0];\n\n if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(selectedElement)) {\n if (!this.state.editingLinearElement || this.state.editingLinearElement.elementId !== selectedElements[0].id) {\n this.store.shouldCaptureIncrement();\n this.setState({\n editingLinearElement: new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(selectedElement)\n });\n }\n }\n } else if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(selectedElement) || (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.isValidTextContainer)(selectedElement)) {\n let container;\n\n if (!(0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(selectedElement)) {\n container = selectedElement;\n }\n\n const midPoint = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.getContainerCenter)(selectedElement, this.state, this.scene.getNonDeletedElementsMap());\n const sceneX = midPoint.x;\n const sceneY = midPoint.y;\n this.startTextEditing({\n sceneX,\n sceneY,\n container\n });\n event.preventDefault();\n return;\n } else if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(selectedElement)) {\n this.setState({\n editingFrame: selectedElement.id\n });\n } else if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(selectedElement)) {\n //zsviczian\n this.setState({\n activeEmbeddable: {\n element: selectedElement,\n state: \"active\"\n }\n });\n }\n }\n } else if (!event.ctrlKey && !event.altKey && !event.metaKey && this.state.draggingElement === null) {\n const shape = (0,_shapes__WEBPACK_IMPORTED_MODULE_32__.findShapeByKey)(event.key);\n\n if (shape) {\n if (this.state.activeTool.type !== shape) {\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"toolbar\", shape, `keyboard (${this.device.editor.isMobile ? \"mobile\" : \"desktop\"})`);\n }\n\n this.setActiveTool({\n type: shape\n });\n event.stopPropagation();\n } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.Q) {\n this.toggleLock(\"keyboard\");\n event.stopPropagation();\n }\n }\n\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.SPACE && gesture.pointers.size === 0) {\n isHoldingSpace = true;\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n event.preventDefault();\n }\n\n if ((event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.G || event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.S) && !event.altKey && !event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (this.state.activeTool.type === \"selection\" && !selectedElements.length) {\n return;\n }\n\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.G && ((0,_scene__WEBPACK_IMPORTED_MODULE_29__.hasBackground)(this.state.activeTool.type) || selectedElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_29__.hasBackground)(element.type)))) {\n this.setState({\n openPopup: \"elementBackground\"\n });\n event.stopPropagation();\n }\n\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.S) {\n this.setState({\n openPopup: \"elementStroke\"\n });\n event.stopPropagation();\n }\n }\n\n if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.BACKSPACE || event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.DELETE)) {\n _jotai__WEBPACK_IMPORTED_MODULE_56__.jotaiStore.set(_ActiveConfirmDialog__WEBPACK_IMPORTED_MODULE_57__.activeConfirmDialogAtom, \"clearCanvas\");\n } // eye dropper\n // -----------------------------------------------------------------------\n\n\n const lowerCased = event.key.toLocaleLowerCase();\n const isPickingStroke = lowerCased === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.S && event.shiftKey;\n const isPickingBackground = event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.I || lowerCased === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.G && event.shiftKey;\n\n if (isPickingStroke || isPickingBackground) {\n this.openEyeDropper({\n type: isPickingStroke ? \"stroke\" : \"background\"\n });\n } // -----------------------------------------------------------------------\n\n });\n this.onWheel = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(event => {\n // prevent browser pinch zoom on DOM elements\n if (!(event.target instanceof HTMLCanvasElement) && event.ctrlKey) {\n event.preventDefault();\n }\n });\n this.onKeyUp = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(event => {\n var _a, _b;\n\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.SPACE) {\n if (this.state.viewModeEnabled) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n } else if (this.state.activeTool.type === \"selection\") {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.resetCursor)(this.interactiveCanvas);\n } else {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursorForShape)(this.interactiveCanvas, this.state);\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, this.state),\n selectedGroupIds: {},\n editingGroupId: null,\n activeEmbeddable: null\n });\n }\n\n isHoldingSpace = false;\n }\n\n if (!event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && !this.state.isBindingEnabled) {\n this.setState({\n isBindingEnabled: true\n });\n }\n\n if ((0,_keys__WEBPACK_IMPORTED_MODULE_26__.isArrowKey)(event.key)) {\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.bindOrUnbindLinearElements)(this.scene.getSelectedElements(this.state).filter(_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement), this, (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.isBindingEnabled)(this.state), (_b = (_a = this.state.selectedLinearElement) === null || _a === void 0 ? void 0 : _a.selectedPointsIndices) !== null && _b !== void 0 ? _b : []);\n this.setState({\n suggestedBindings: []\n });\n }\n }); // We purposely widen the `tool` type so this helper can be called with\n // any tool without having to type check it\n\n this.isToolSupported = tool => {\n var _a;\n\n return ((_a = this.props.UIOptions.tools) === null || _a === void 0 ? void 0 : _a[tool]) !== false;\n };\n\n this.setActiveTool = tool => {\n var _a;\n\n if (!this.isToolSupported(tool.type)) {\n console.warn(`\"${tool.type}\" tool is disabled via \"UIOptions.canvasActions.tools.${tool.type}\"`);\n return;\n }\n\n const nextActiveTool = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateActiveTool)(this.state, tool);\n\n if (nextActiveTool.type === \"hand\") {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n } else if (!isHoldingSpace) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursorForShape)(this.interactiveCanvas, this.state);\n }\n\n if ((0,_utils__WEBPACK_IMPORTED_MODULE_35__.isToolIcon)(document.activeElement)) {\n this.focusContainer();\n }\n\n if (!(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElementType)(nextActiveTool.type)) {\n this.setState({\n suggestedBindings: []\n });\n }\n\n if (nextActiveTool.type === \"image\") {\n this.onImageAction({\n insertOnCanvasDirectly: (_a = tool.type === \"image\" && tool.insertOnCanvasDirectly) !== null && _a !== void 0 ? _a : false\n });\n }\n\n setTimeout(() => {\n this.setState(prevState => {\n const commonResets = {\n snapLines: prevState.snapLines.length ? [] : prevState.snapLines,\n originSnapOffset: null,\n activeEmbeddable: null\n };\n\n if (nextActiveTool.type === \"freedraw\") {\n this.store.shouldCaptureIncrement();\n }\n\n if (nextActiveTool.type !== \"selection\") {\n return Object.assign(Object.assign(Object.assign({}, prevState), {\n activeTool: nextActiveTool,\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(nextActiveTool.type === \"mermaid\" //zsviczian\n ? this.state.selectedElementIds : {}, prevState),\n selectedGroupIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, prevState),\n editingGroupId: null,\n multiElement: null\n }), commonResets);\n }\n\n return Object.assign(Object.assign(Object.assign({}, prevState), {\n activeTool: nextActiveTool\n }), commonResets);\n }); //zsviczian added timeout because button won't select otherwise\n });\n };\n\n this.setOpenDialog = dialogType => {\n this.setState({\n openDialog: dialogType\n });\n };\n\n this.setCursor = cursor => {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, cursor);\n };\n\n this.resetCursor = () => {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.resetCursor)(this.interactiveCanvas);\n };\n /**\r\n * returns whether user is making a gesture with >= 2 fingers (points)\r\n * on o touch screen (not on a trackpad). Currently only relates to Darwin\r\n * (iOS/iPadOS,MacOS), but may work on other devices in the future if\r\n * GestureEvent is standardized.\r\n */\n\n\n this.isTouchScreenMultiTouchGesture = () => {\n // we don't want to deselect when using trackpad, and multi-point gestures\n // only work on touch screens, so checking for >= pointers means we're on a\n // touchscreen\n return gesture.pointers.size >= 2;\n };\n\n this.getName = () => {\n return this.state.name || this.props.name || `${(0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"labels.untitled\")}-${(0,_utils__WEBPACK_IMPORTED_MODULE_35__.getDateTime)()}`;\n }; // fires only on Safari\n\n\n this.onGestureStart = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(event => {\n event.preventDefault(); // we only want to deselect on touch screens because user may have selected\n // elements by mistake while zooming\n\n if (this.isTouchScreenMultiTouchGesture()) {\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, this.state),\n activeEmbeddable: null\n });\n }\n\n gesture.initialScale = this.state.zoom.value;\n }); // fires only on Safari\n\n this.onGestureChange = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(event => {\n event.preventDefault(); // onGestureChange only has zoom factor but not the center.\n // If we're on iPad or iPhone, then we recognize multi-touch and will\n // zoom in at the right location in the touchmove handler\n // (handleCanvasPointerMove).\n //\n // On Macbook trackpad, we don't have those events so will zoom in at the\n // current location instead.\n //\n // As such, bail from this handler on touch devices.\n\n if (this.isTouchScreenMultiTouchGesture()) {\n return;\n }\n\n const initialScale = gesture.initialScale;\n\n if (initialScale) {\n this.setState(state => Object.assign({}, (0,_scene_zoom__WEBPACK_IMPORTED_MODULE_31__.getStateForZoom)({\n viewportX: this.lastViewportPosition.x,\n viewportY: this.lastViewportPosition.y,\n nextZoom: (0,_scene__WEBPACK_IMPORTED_MODULE_29__.getNormalizedZoom)(initialScale * event.scale)\n }, state)));\n }\n }); // fires only on Safari\n\n this.onGestureEnd = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(event => {\n event.preventDefault(); // reselect elements only on touch screens (see onGestureStart)\n\n if (this.isTouchScreenMultiTouchGesture()) {\n this.setState({\n previousSelectedElementIds: {},\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(this.state.previousSelectedElementIds, this.state)\n });\n }\n\n gesture.initialScale = null;\n });\n\n this.startTextEditing = ({\n sceneX,\n sceneY,\n insertAtParentCenter = true,\n container\n }) => {\n var _a, _b;\n\n let shouldBindToContainer = false;\n let parentCenterPosition = insertAtParentCenter && this.getTextWysiwygSnappedToCenterPosition(sceneX, sceneY, this.state, container);\n\n if (container && parentCenterPosition) {\n const boundTextElementToContainer = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.getBoundTextElement)(container, this.scene.getNonDeletedElementsMap());\n\n if (!boundTextElementToContainer) {\n shouldBindToContainer = true;\n }\n }\n\n let existingTextElement = null;\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (selectedElements.length === 1) {\n if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(selectedElements[0])) {\n existingTextElement = selectedElements[0];\n } else if (container) {\n existingTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.getBoundTextElement)(selectedElements[0], this.scene.getNonDeletedElementsMap());\n } else {\n existingTextElement = this.getTextElementAtPosition(sceneX, sceneY);\n }\n } else {\n existingTextElement = this.getTextElementAtPosition(sceneX, sceneY);\n }\n\n const fontFamily = (existingTextElement === null || existingTextElement === void 0 ? void 0 : existingTextElement.fontFamily) || this.state.currentItemFontFamily;\n const lineHeight = (existingTextElement === null || existingTextElement === void 0 ? void 0 : existingTextElement.lineHeight) || (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.getDefaultLineHeight)(fontFamily);\n const fontSize = (0,_actions_actionProperties__WEBPACK_IMPORTED_MODULE_79__.getFontSize)(this.state.currentItemFontSize, this.state.zoom.value); //zsviczian\n\n if (!existingTextElement && shouldBindToContainer && container && !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isArrowElement)(container)) {\n const fontString = {\n fontSize,\n fontFamily\n };\n const minWidth = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.getApproxMinLineWidth)((0,_utils__WEBPACK_IMPORTED_MODULE_35__.getFontString)(fontString), lineHeight);\n const minHeight = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.getApproxMinLineHeight)(fontSize, lineHeight);\n const newHeight = Math.max(container.height, minHeight);\n const newWidth = Math.max(container.width, minWidth);\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(container, {\n height: newHeight,\n width: newWidth\n });\n sceneX = container.x + newWidth / 2;\n sceneY = container.y + newHeight / 2;\n\n if (parentCenterPosition) {\n parentCenterPosition = this.getTextWysiwygSnappedToCenterPosition(sceneX, sceneY, this.state, container);\n }\n }\n\n const topLayerFrame = this.getTopLayerFrameAtSceneCoords({\n x: sceneX,\n y: sceneY\n });\n /*const shouldWrapText = !shouldBindToContainer && //zsviczian\r\n this.lastPointerDownEvent?.pointerType === \"pen\";\r\n const [x1, , x2] = getVisibleSceneBounds(this.state); //zsviczian\r\n const maxTextWidth = Math.max(Math.min((x2 - x1) * 0.85, 800), 200); //zsviczian*/\n\n const element = existingTextElement ? existingTextElement : (0,_element__WEBPACK_IMPORTED_MODULE_16__.newTextElement)({\n x: parentCenterPosition ? parentCenterPosition.elementCenterX : sceneX,\n y: parentCenterPosition ? parentCenterPosition.elementCenterY : sceneY,\n strokeColor: this.state.currentItemStrokeColor,\n backgroundColor: this.state.currentItemBackgroundColor,\n fillStyle: this.state.currentItemFillStyle,\n strokeWidth: this.state.currentItemStrokeWidth,\n strokeStyle: this.state.currentItemStrokeStyle,\n roughness: this.state.currentItemRoughness,\n opacity: this.state.currentItemOpacity,\n text: \"\",\n rawText: \"\",\n fontSize,\n fontFamily,\n textAlign: parentCenterPosition ? \"center\" : this.state.currentItemTextAlign,\n verticalAlign: parentCenterPosition ? _constants__WEBPACK_IMPORTED_MODULE_12__.VERTICAL_ALIGN.MIDDLE : _constants__WEBPACK_IMPORTED_MODULE_12__.DEFAULT_VERTICAL_ALIGN,\n containerId: shouldBindToContainer ? container === null || container === void 0 ? void 0 : container.id : undefined,\n groupIds: (_a = container === null || container === void 0 ? void 0 : container.groupIds) !== null && _a !== void 0 ? _a : [],\n lineHeight,\n angle: (_b = container === null || container === void 0 ? void 0 : container.angle) !== null && _b !== void 0 ? _b : 0,\n frameId: topLayerFrame ? topLayerFrame.id : null\n /*...shouldWrapText //zsviczian\r\n ? {\r\n width: maxTextWidth,\r\n autoResize: false,\r\n }\r\n : {},*/\n\n });\n\n if (!existingTextElement && shouldBindToContainer && container) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(container, {\n boundElements: (container.boundElements || []).concat({\n type: \"text\",\n id: element.id\n })\n });\n }\n\n this.setState({\n editingElement: element\n });\n\n if (!existingTextElement) {\n if (container && shouldBindToContainer) {\n const containerIndex = this.scene.getElementIndex(container.id);\n this.scene.insertElementAtIndex(element, containerIndex + 1);\n } else {\n this.scene.insertElement(element);\n }\n }\n\n this.setState({\n editingElement: element\n });\n this.handleTextWysiwyg(element, {\n isExistingElement: !!existingTextElement\n });\n };\n\n this.debounceDoubleClickTimestamp = 0; //zsviczian\n\n this.handleCanvasDoubleClick = event => {\n var _a; // case: double-clicking with arrow/line tool selected would both create\n // text and enter multiElement mode\n\n\n if (this.state.multiElement) {\n return;\n }\n\n if ( //zsviczian - double click eraser\n this.state.penMode && ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a.pointerType) === \"touch\" && this.state.activeTool.type !== \"selection\") {\n const now = Date.now();\n\n if (now - this.debounceDoubleClickTimestamp < 200) {\n //handleCanvasDoubleClick click fires twice in case of touch.\n //Once from the onTouchStart event handler, once from the double click event handler\n return;\n }\n\n this.debounceDoubleClickTimestamp = now;\n this.updateScene(_actions_actionCanvas__WEBPACK_IMPORTED_MODULE_55__.actionToggleEraserTool.perform([], this.state));\n return;\n } // zsviczian - end\n // we should only be able to double click when mode is selection\n\n\n if (this.state.activeTool.type !== \"selection\") {\n return;\n }\n\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(selectedElements[0])) {\n if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && (!this.state.editingLinearElement || this.state.editingLinearElement.elementId !== selectedElements[0].id)) {\n this.store.shouldCaptureIncrement();\n this.setState({\n editingLinearElement: new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(selectedElements[0])\n });\n return;\n }\n }\n\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.resetCursor)(this.interactiveCanvas);\n let {\n x: sceneX,\n y: sceneY\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)(event, this.state);\n const selectedGroupIds = (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getSelectedGroupIds)(this.state);\n\n if (selectedGroupIds.length > 0) {\n const hitElement = this.getElementAtPosition(sceneX, sceneY);\n const selectedGroupId = hitElement && (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getSelectedGroupIdForElement)(hitElement, this.state.selectedGroupIds);\n\n if (selectedGroupId) {\n this.store.shouldCaptureIncrement();\n this.setState(prevState => Object.assign(Object.assign({}, prevState), (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n editingGroupId: selectedGroupId,\n selectedElementIds: {\n [hitElement.id]: true\n }\n }, this.scene.getNonDeletedElements(), prevState, this)));\n return;\n }\n }\n\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.resetCursor)(this.interactiveCanvas);\n\n if (!event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && !this.state.viewModeEnabled) {\n const hitElement = this.getElementAtPosition(sceneX, sceneY);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeLikeElement)(hitElement)) {\n this.setState({\n activeEmbeddable: {\n element: hitElement,\n state: \"active\"\n }\n });\n return;\n }\n\n const container = this.getTextBindableContainerAtPosition(sceneX, sceneY);\n\n if (container) {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.hasBoundTextElement)(container) || !(0,_utils__WEBPACK_IMPORTED_MODULE_35__.isTransparent)(container.backgroundColor) || (0,_element_collision__WEBPACK_IMPORTED_MODULE_87__.hitElementItself)({\n x: sceneX,\n y: sceneY,\n element: container,\n shape: this.getElementShape(container),\n threshold: this.getElementHitThreshold()\n })) {\n const midPoint = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.getContainerCenter)(container, this.state, this.scene.getNonDeletedElementsMap());\n sceneX = midPoint.x;\n sceneY = midPoint.y;\n }\n }\n\n this.startTextEditing({\n sceneX,\n sceneY,\n insertAtParentCenter: !event.altKey,\n container\n });\n }\n };\n\n this.getElementLinkAtPosition = (scenePointer, hitElement) => {\n // Reversing so we traverse the elements in decreasing order\n // of z-index\n const elements = this.scene.getNonDeletedElements().slice().reverse();\n let hitElementIndex = Infinity;\n return elements.find((element, index) => {\n if (hitElement && element.id === hitElement.id) {\n hitElementIndex = index;\n }\n\n return element.link && index <= hitElementIndex && (0,_hyperlink_helpers__WEBPACK_IMPORTED_MODULE_91__.isPointHittingLink)(element, this.scene.getNonDeletedElementsMap(), this.state, [scenePointer.x, scenePointer.y], this.device.editor.isMobile);\n });\n };\n\n this.redirectToLink = (event, isTouchScreen) => {\n const draggedDistance = (0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(this.lastPointerDownEvent.clientX, this.lastPointerDownEvent.clientY, this.lastPointerUpEvent.clientX, this.lastPointerUpEvent.clientY);\n\n if (!this.hitLinkElement || // For touch screen allow dragging threshold else strict check\n isTouchScreen && draggedDistance > _constants__WEBPACK_IMPORTED_MODULE_12__.DRAGGING_THRESHOLD || !isTouchScreen && draggedDistance !== 0) {\n return;\n }\n\n const lastPointerDownCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)(this.lastPointerDownEvent, this.state);\n const elementsMap = this.scene.getNonDeletedElementsMap();\n const lastPointerDownHittingLinkIcon = (0,_hyperlink_helpers__WEBPACK_IMPORTED_MODULE_91__.isPointHittingLink)(this.hitLinkElement, elementsMap, this.state, [lastPointerDownCoords.x, lastPointerDownCoords.y], this.device.editor.isMobile);\n const lastPointerUpCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)(this.lastPointerUpEvent, this.state);\n const lastPointerUpHittingLinkIcon = (0,_hyperlink_helpers__WEBPACK_IMPORTED_MODULE_91__.isPointHittingLink)(this.hitLinkElement, elementsMap, this.state, [lastPointerUpCoords.x, lastPointerUpCoords.y], this.device.editor.isMobile);\n\n if (lastPointerDownHittingLinkIcon && lastPointerUpHittingLinkIcon) {\n let url = this.hitLinkElement.link;\n\n if (url) {\n url = (0,_data_url__WEBPACK_IMPORTED_MODULE_47__.normalizeLink)(url);\n let customEvent;\n\n if (this.props.onLinkOpen) {\n customEvent = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.wrapEvent)(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.EXCALIDRAW_LINK, event.nativeEvent);\n this.props.onLinkOpen(Object.assign(Object.assign({}, this.hitLinkElement), {\n link: url\n }), customEvent);\n }\n\n if (!(customEvent === null || customEvent === void 0 ? void 0 : customEvent.defaultPrevented)) {\n const target = (0,_data_url__WEBPACK_IMPORTED_MODULE_47__.isLocalLink)(url) ? \"_self\" : \"_blank\";\n const newWindow = window.open(undefined, target); // https://mathiasbynens.github.io/rel-noopener/\n\n if (newWindow) {\n newWindow.opener = null;\n newWindow.location = url;\n }\n }\n }\n }\n };\n\n this.getTopLayerFrameAtSceneCoords = sceneCoords => {\n const elementsMap = this.scene.getNonDeletedElementsMap();\n const frames = this.scene.getNonDeletedFramesLikes().filter(frame => (0,_frame__WEBPACK_IMPORTED_MODULE_51__.isCursorInFrame)(sceneCoords, frame, elementsMap));\n return frames.length ? frames[frames.length - 1] : null;\n };\n\n this.handleCanvasPointerMove = event => {\n var _a, _b;\n\n this.savePointer(event.clientX, event.clientY, this.state.cursorButton);\n this.lastPointerMoveEvent = event.nativeEvent;\n\n if (gesture.pointers.has(event.pointerId)) {\n gesture.pointers.set(event.pointerId, {\n x: event.clientX,\n y: event.clientY\n });\n }\n\n const initialScale = gesture.initialScale;\n\n if (gesture.pointers.size === 2 && gesture.lastCenter && initialScale && gesture.initialDistance) {\n const center = (0,_gesture__WEBPACK_IMPORTED_MODULE_22__.getCenter)(gesture.pointers);\n const deltaX = center.x - gesture.lastCenter.x;\n const deltaY = center.y - gesture.lastCenter.y;\n gesture.lastCenter = center;\n const distance = (0,_gesture__WEBPACK_IMPORTED_MODULE_22__.getDistance)(Array.from(gesture.pointers.values()));\n const scaleFactor = !this.state.allowPinchZoom && //zsviczian\n this.state.activeTool.type === \"freedraw\" && this.state.penMode ? 1 : distance / gesture.initialDistance;\n const nextZoom = scaleFactor ? (0,_scene__WEBPACK_IMPORTED_MODULE_29__.getNormalizedZoom)(initialScale * scaleFactor) : this.state.zoom.value;\n this.setState(state => {\n const zoomState = (0,_scene_zoom__WEBPACK_IMPORTED_MODULE_31__.getStateForZoom)({\n viewportX: center.x,\n viewportY: center.y,\n nextZoom\n }, state);\n this.translateCanvas({\n zoom: zoomState.zoom,\n // 2x multiplier is just a magic number that makes this work correctly\n // on touchscreen devices (note: if we get report that panning is slower/faster\n // than actual movement, consider swapping with devicePixelRatio)\n scrollX: zoomState.scrollX + 2 * (deltaX / nextZoom),\n scrollY: zoomState.scrollY + 2 * (deltaY / nextZoom),\n shouldCacheIgnoreZoom: true\n });\n });\n this.resetShouldCacheIgnoreZoomDebounced();\n } else {\n gesture.lastCenter = gesture.initialDistance = gesture.initialScale = null;\n }\n\n if (isHoldingSpace || isPanning || isDraggingScrollBar || (0,_appState__WEBPACK_IMPORTED_MODULE_10__.isHandToolActive)(this.state)) {\n return;\n }\n\n const isPointerOverScrollBars = (0,_scene_scrollbars__WEBPACK_IMPORTED_MODULE_89__.isOverScrollBars)(currentScrollBars, event.clientX - this.state.offsetLeft, event.clientY - this.state.offsetTop);\n const isOverScrollBar = isPointerOverScrollBars.isOverEither;\n const isPenFreedraw = this.state.activeTool.type === \"freedraw\" && event.pointerType === \"pen\"; //zsviczian\n\n if (!this.state.draggingElement && !this.state.multiElement) {\n if (isOverScrollBar) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.resetCursor)(this.interactiveCanvas);\n } else if (isPenFreedraw && this.interactiveCanvas && (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_86__.hideFreedrawPenmodeCursor)()) {\n //zsviczian https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/1659\n this.interactiveCanvas.style.cursor = \"none\";\n } else {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursorForShape)(this.interactiveCanvas, this.state);\n }\n }\n\n const scenePointer = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)(event, this.state);\n const {\n x: scenePointerX,\n y: scenePointerY\n } = scenePointer;\n\n if (!this.state.draggingElement && (0,_snapping__WEBPACK_IMPORTED_MODULE_59__.isActiveToolNonLinearSnappable)(this.state.activeTool.type)) {\n const {\n originOffset,\n snapLines\n } = (0,_snapping__WEBPACK_IMPORTED_MODULE_59__.getSnapLinesAtPointer)(this.scene.getNonDeletedElements(), this.state, {\n x: scenePointerX,\n y: scenePointerY\n }, event, this.scene.getNonDeletedElementsMap());\n this.setState(prevState => {\n const nextSnapLines = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateStable)(prevState.snapLines, snapLines);\n const nextOriginOffset = prevState.originSnapOffset ? (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateStable)(prevState.originSnapOffset, originOffset) : originOffset;\n\n if (prevState.snapLines === nextSnapLines && prevState.originSnapOffset === nextOriginOffset) {\n return null;\n }\n\n return {\n snapLines: nextSnapLines,\n originSnapOffset: nextOriginOffset\n };\n });\n } else if (!this.state.draggingElement) {\n this.setState(prevState => {\n if (prevState.snapLines.length) {\n return {\n snapLines: []\n };\n }\n\n return null;\n });\n }\n\n if (this.state.editingLinearElement && !this.state.editingLinearElement.isDragging) {\n const editingLinearElement = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handlePointerMove(event, scenePointerX, scenePointerY, this.state, this.scene.getNonDeletedElementsMap());\n\n if (editingLinearElement && editingLinearElement !== this.state.editingLinearElement) {\n // Since we are reading from previous state which is not possible with\n // automatic batching in React 18 hence using flush sync to synchronously\n // update the state. Check https://github.com/excalidraw/excalidraw/pull/5508 for more details.\n (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.flushSync)(() => {\n this.setState({\n editingLinearElement\n });\n });\n }\n\n if ((editingLinearElement === null || editingLinearElement === void 0 ? void 0 : editingLinearElement.lastUncommittedPoint) != null) {\n this.maybeSuggestBindingAtCursor(scenePointer);\n } else {\n // causes stack overflow if not sync\n (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.flushSync)(() => {\n this.setState({\n suggestedBindings: []\n });\n });\n }\n }\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElementType)(this.state.activeTool.type)) {\n // Hovering with a selected tool or creating new linear element via click\n // and point\n const {\n draggingElement\n } = this.state;\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElement)(draggingElement, false)) {\n this.maybeSuggestBindingsForLinearElementAtCoords(draggingElement, [scenePointer], this.state.startBoundElement);\n } else {\n this.maybeSuggestBindingAtCursor(scenePointer);\n }\n }\n\n if (this.state.multiElement) {\n const {\n multiElement\n } = this.state;\n const {\n x: rx,\n y: ry\n } = multiElement;\n const {\n points,\n lastCommittedPoint\n } = multiElement;\n const lastPoint = points[points.length - 1];\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursorForShape)(this.interactiveCanvas, this.state);\n\n if (lastPoint === lastCommittedPoint) {\n // if we haven't yet created a temp point and we're beyond commit-zone\n // threshold, add a point\n if ((0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(scenePointerX - rx, scenePointerY - ry, lastPoint[0], lastPoint[1]) >= _constants__WEBPACK_IMPORTED_MODULE_12__.LINE_CONFIRM_THRESHOLD) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(multiElement, {\n points: [...points, [scenePointerX - rx, scenePointerY - ry]]\n });\n } else {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER); // in this branch, we're inside the commit zone, and no uncommitted\n // point exists. Thus do nothing (don't add/remove points).\n }\n } else if (points.length > 2 && lastCommittedPoint && (0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(scenePointerX - rx, scenePointerY - ry, lastCommittedPoint[0], lastCommittedPoint[1]) < _constants__WEBPACK_IMPORTED_MODULE_12__.LINE_CONFIRM_THRESHOLD) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(multiElement, {\n points: points.slice(0, -1)\n });\n } else {\n const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(scenePointerX, scenePointerY, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.state.gridSize);\n const [lastCommittedX, lastCommittedY] = (_a = multiElement === null || multiElement === void 0 ? void 0 : multiElement.lastCommittedPoint) !== null && _a !== void 0 ? _a : [0, 0];\n let dxFromLastCommitted = gridX - rx - lastCommittedX;\n let dyFromLastCommitted = gridY - ry - lastCommittedY;\n\n if ((0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldRotateWithDiscreteAngle)(event)) {\n ({\n width: dxFromLastCommitted,\n height: dyFromLastCommitted\n } = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getLockedLinearCursorAlignSize)( // actual coordinate of the last committed point\n lastCommittedX + rx, lastCommittedY + ry, // cursor-grid coordinate\n gridX, gridY));\n }\n\n if ((0,_math__WEBPACK_IMPORTED_MODULE_28__.isPathALoop)(points, this.state.zoom.value)) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n } // update last uncommitted point\n\n\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(multiElement, {\n points: [...points.slice(0, -1), [lastCommittedX + dxFromLastCommitted, lastCommittedY + dyFromLastCommitted]]\n });\n }\n\n return;\n }\n\n const hasDeselectedButton = Boolean(event.buttons);\n\n if (hasDeselectedButton || this.state.activeTool.type !== \"selection\" && this.state.activeTool.type !== \"text\" && this.state.activeTool.type !== \"eraser\") {\n return;\n }\n\n const elements = this.scene.getNonDeletedElements();\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (selectedElements.length === 1 && !isOverScrollBar && !this.state.editingLinearElement) {\n // for linear elements, we'd like to prioritize point dragging over edge resizing\n // therefore, we update and check hovered point index first\n if (this.state.selectedLinearElement) {\n this.handleHoverSelectedLinearElement(this.state.selectedLinearElement, scenePointerX, scenePointerY);\n }\n\n if (!this.state.selectedLinearElement || this.state.selectedLinearElement.hoverPointIndex === -1) {\n const elementWithTransformHandleType = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getElementWithTransformHandleType)(elements, this.state, scenePointerX, scenePointerY, this.state.zoom, event.pointerType, this.scene.getNonDeletedElementsMap(), this.device);\n\n if (elementWithTransformHandleType && elementWithTransformHandleType.transformHandleType) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCursorForResizingElement)(elementWithTransformHandleType));\n return;\n }\n }\n } else if (selectedElements.length > 1 && !isOverScrollBar) {\n const transformHandleType = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getTransformHandleTypeFromCoords)((0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(selectedElements), scenePointerX, scenePointerY, this.state.zoom, event.pointerType, this.device);\n\n if (transformHandleType) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCursorForResizingElement)({\n transformHandleType\n }));\n return;\n }\n }\n\n const hitElement = this.getElementAtPosition(scenePointer.x, scenePointer.y);\n this.hitLinkElement = this.getElementLinkAtPosition(scenePointer, hitElement);\n\n if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state)) {\n return;\n }\n\n if (this.hitLinkElement && !this.state.selectedElementIds[this.hitLinkElement.id]) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n (0,_components_hyperlink_Hyperlink__WEBPACK_IMPORTED_MODULE_46__.showHyperlinkTooltip)(this.hitLinkElement, this.state, this.scene.getNonDeletedElementsMap());\n\n if (this.props.onLinkHover) {\n this.props.onLinkHover(this.hitLinkElement, event);\n } //zsviczian\n\n } else {\n (0,_components_hyperlink_Hyperlink__WEBPACK_IMPORTED_MODULE_46__.hideHyperlinkToolip)();\n\n if (hitElement && (hitElement.link || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(hitElement)) && this.state.selectedElementIds[hitElement.id] && !this.state.contextMenu && !this.state.showHyperlinkPopup) {\n this.setState({\n showHyperlinkPopup: \"info\"\n });\n } else if (this.state.activeTool.type === \"text\") {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(hitElement) ? _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.TEXT : _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.CROSSHAIR);\n } else if (this.state.viewModeEnabled) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n } else if (isOverScrollBar) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.AUTO);\n } else if (this.state.selectedLinearElement) {\n this.handleHoverSelectedLinearElement(this.state.selectedLinearElement, scenePointerX, scenePointerY);\n } else if ( // if using cmd/ctrl, we're not dragging\n !event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n if ((hitElement || this.isHittingCommonBoundingBoxOfSelectedElements(scenePointer, selectedElements)) && !(hitElement === null || hitElement === void 0 ? void 0 : hitElement.locked)) {\n if (hitElement && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeLikeElement)(hitElement) && this.isIframeLikeElementCenter(hitElement, event, scenePointerX, scenePointerY)) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n this.setState({\n activeEmbeddable: {\n element: hitElement,\n state: \"hover\"\n }\n });\n } else {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.MOVE);\n\n if (((_b = this.state.activeEmbeddable) === null || _b === void 0 ? void 0 : _b.state) === \"hover\") {\n this.setState({\n activeEmbeddable: null\n });\n }\n }\n }\n } else {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.AUTO);\n }\n }\n };\n\n this.handleEraser = (event, pointerDownState, scenePointer) => {\n this.eraserTrail.addPointToPath(scenePointer.x, scenePointer.y);\n let didChange = false;\n const processedGroups = new Set();\n const nonDeletedElements = this.scene.getNonDeletedElements();\n\n const processElements = elements => {\n var _a;\n\n for (const element of elements) {\n if (element.locked) {\n return;\n }\n\n if (event.altKey) {\n if (this.elementsPendingErasure.delete(element.id)) {\n didChange = true;\n }\n } else if (!this.elementsPendingErasure.has(element.id)) {\n didChange = true;\n this.elementsPendingErasure.add(element.id);\n } // (un)erase groups atomically\n\n\n if (didChange && ((_a = element.groupIds) === null || _a === void 0 ? void 0 : _a.length)) {\n const shallowestGroupId = element.groupIds.at(-1);\n\n if (!processedGroups.has(shallowestGroupId)) {\n processedGroups.add(shallowestGroupId);\n const elems = (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(nonDeletedElements, shallowestGroupId);\n\n for (const elem of elems) {\n if (event.altKey) {\n this.elementsPendingErasure.delete(elem.id);\n } else {\n this.elementsPendingErasure.add(elem.id);\n }\n }\n }\n }\n }\n };\n\n const distance = (0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y, scenePointer.x, scenePointer.y);\n const threshold = this.getElementHitThreshold();\n const point = Object.assign({}, pointerDownState.lastCoords);\n let samplingInterval = 0;\n\n while (samplingInterval <= distance) {\n const hitElements = this.getElementsAtPosition(point.x, point.y);\n processElements(hitElements); // Exit since we reached current point\n\n if (samplingInterval === distance) {\n break;\n } // Calculate next point in the line at a distance of sampling interval\n\n\n samplingInterval = Math.min(samplingInterval + threshold, distance);\n const distanceRatio = samplingInterval / distance;\n const nextX = (1 - distanceRatio) * point.x + distanceRatio * scenePointer.x;\n const nextY = (1 - distanceRatio) * point.y + distanceRatio * scenePointer.y;\n point.x = nextX;\n point.y = nextY;\n }\n\n pointerDownState.lastCoords.x = scenePointer.x;\n pointerDownState.lastCoords.y = scenePointer.y;\n\n if (didChange) {\n for (const element of this.scene.getNonDeletedElements()) {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(element) && (this.elementsPendingErasure.has(element.id) || this.elementsPendingErasure.has(element.containerId))) {\n if (event.altKey) {\n this.elementsPendingErasure.delete(element.id);\n this.elementsPendingErasure.delete(element.containerId);\n } else {\n this.elementsPendingErasure.add(element.id);\n this.elementsPendingErasure.add(element.containerId);\n }\n }\n }\n\n this.elementsPendingErasure = new Set(this.elementsPendingErasure);\n this.triggerRender();\n }\n }; // set touch moving for mobile context menu\n\n\n this.handleTouchMove = event => {\n invalidateContextMenu = true;\n };\n\n this.handleCanvasPointerDown = event => {\n var _a, _b;\n\n this.focusContainer(); //zsviczian\n\n this.maybeCleanupAfterMissingPointerUp(event.nativeEvent);\n this.maybeUnfollowRemoteUser(); // since contextMenu options are potentially evaluated on each render,\n // and an contextMenu action may depend on selection state, we must\n // close the contextMenu before we update the selection on pointerDown\n // (e.g. resetting selection)\n\n if (this.state.contextMenu) {\n this.setState({\n contextMenu: null\n });\n }\n\n if (this.state.snapLines) {\n this.setAppState({\n snapLines: []\n });\n }\n\n this.updateGestureOnPointerDown(event); // if dragging element is freedraw and another pointerdown event occurs\n // a second finger is on the screen\n // discard the freedraw element if it is very short because it is likely\n // just a spike, otherwise finalize the freedraw element when the second\n // finger is lifted\n\n if (event.pointerType === \"touch\" && this.state.draggingElement && this.state.draggingElement.type === \"freedraw\") {\n const element = this.state.draggingElement;\n this.updateScene(Object.assign(Object.assign({}, element.points.length < 10 ? {\n elements: this.scene.getElementsIncludingDeleted().filter(el => el.id !== element.id)\n } : {}), {\n appState: {\n draggingElement: null,\n editingElement: null,\n startBoundElement: null,\n suggestedBindings: [],\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(Object.keys(this.state.selectedElementIds).filter(key => key !== element.id).reduce((obj, key) => {\n obj[key] = this.state.selectedElementIds[key];\n return obj;\n }, {}), this.state)\n },\n storeAction: _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.UPDATE\n }));\n return;\n } // remove any active selection when we start to interact with canvas\n // (mainly, we care about removing selection outside the component which\n // would prevent our copy handling otherwise)\n\n\n const selection = document.getSelection();\n\n if (selection === null || selection === void 0 ? void 0 : selection.anchorNode) {\n selection.removeAllRanges();\n }\n\n this.maybeOpenContextMenuAfterPointerDownOnTouchDevices(event); //fires only once, if pen is detected, penMode is enabled\n //the user can disable this by toggling the penMode button\n\n if (!this.state.penDetected && event.pointerType === \"pen\") {\n this.setState(prevState => {\n return {\n penMode: true,\n penDetected: true\n };\n });\n }\n\n if (!this.device.isTouchScreen && [\"pen\", \"touch\"].includes(event.pointerType)) {\n this.device = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateObject)(this.device, {\n isTouchScreen: true\n });\n }\n\n if (isPanning) {\n return;\n }\n\n this.lastPointerDownEvent = event; // we must exit before we set `cursorButton` state and `savePointer`\n // else it will send pointer state & laser pointer events in collab when\n // panning\n\n /*if (this.handleCanvasPanUsingWheelOrSpaceDrag(event)) {\r\n return;\r\n }*/\n //zsviczian this broke on pointer down in onPointerUpdate\n\n this.setState({\n lastPointerDownWith: event.pointerType,\n cursorButton: \"down\"\n });\n this.savePointer(event.clientX, event.clientY, \"down\");\n\n if (this.handleCanvasPanUsingWheelOrSpaceDrag(event)) {\n return;\n } //zsviczian moved it here, because else pointer down in onPointerUpdate did not work\n\n\n if (event.button === _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.ERASER && this.state.activeTool.type !== _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.eraser) {\n this.setState({\n activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateActiveTool)(this.state, {\n type: _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.eraser,\n lastActiveToolBeforeEraser: this.state.activeTool\n })\n }, () => {\n this.handleCanvasPointerDown(event);\n\n const onPointerUp = () => {\n unsubPointerUp();\n unsubCleanup === null || unsubCleanup === void 0 ? void 0 : unsubCleanup();\n\n if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state)) {\n this.setState({\n activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateActiveTool)(this.state, Object.assign(Object.assign({}, this.state.activeTool.lastActiveTool || {\n type: _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.selection\n }), {\n lastActiveToolBeforeEraser: null\n }))\n });\n }\n };\n\n const unsubPointerUp = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, onPointerUp, {\n once: true\n });\n let unsubCleanup; // subscribe inside rAF lest it'd be triggered on the same pointerdown\n // if we start erasing while coming from blurred document since\n // we cleanup pointer events on focus\n\n requestAnimationFrame(() => {\n unsubCleanup = this.missingPointerEventCleanupEmitter.once(onPointerUp);\n });\n });\n return;\n } // only handle left mouse button or touch\n\n\n if (event.button !== _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.MAIN && event.button !== _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.TOUCH && event.button !== _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.ERASER) {\n return;\n } // don't select while panning\n\n\n if (gesture.pointers.size > 1) {\n return;\n } // State for the duration of a pointer interaction, which starts with a\n // pointerDown event, ends with a pointerUp event (or another pointerDown)\n\n\n const pointerDownState = this.initialPointerDownState(event);\n this.setState({\n selectedElementsAreBeingDragged: false\n });\n\n if (this.handleDraggingScrollBar(event, pointerDownState)) {\n return;\n }\n\n this.clearSelectionIfNotUsingSelection();\n this.updateBindingEnabledOnPointerMove(event);\n\n if (this.handleSelectionOnPointerDown(event, pointerDownState)) {\n return;\n }\n\n const allowOnPointerDown = !this.state.penMode || event.pointerType !== \"touch\" || this.state.activeTool.type === \"selection\" || this.state.activeTool.type === \"text\" || this.state.activeTool.type === \"image\";\n\n if (!allowOnPointerDown) {\n return;\n }\n\n if (this.state.activeTool.type === \"text\") {\n this.handleTextOnPointerDown(event, pointerDownState);\n return;\n } else if (this.state.activeTool.type === \"arrow\" || this.state.activeTool.type === \"line\") {\n this.handleLinearElementOnPointerDown(event, this.state.activeTool.type, pointerDownState);\n } else if (this.state.activeTool.type === \"image\") {\n // reset image preview on pointerdown\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.CROSSHAIR); // retrieve the latest element as the state may be stale\n\n const pendingImageElement = this.state.pendingImageElementId && this.scene.getElement(this.state.pendingImageElementId);\n\n if (!pendingImageElement) {\n return;\n }\n\n this.setState({\n draggingElement: pendingImageElement,\n editingElement: pendingImageElement,\n pendingImageElementId: null,\n multiElement: null\n });\n const {\n x,\n y\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)(event, this.state);\n const frame = this.getTopLayerFrameAtSceneCoords({\n x,\n y\n });\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(pendingImageElement, {\n x,\n y,\n frameId: frame ? frame.id : null\n });\n } else if (this.state.activeTool.type === \"freedraw\") {\n this.handleFreeDrawElementOnPointerDown(event, this.state.activeTool.type, pointerDownState);\n } else if (this.state.activeTool.type === \"custom\") {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursorForShape)(this.interactiveCanvas, this.state);\n } else if (this.state.activeTool.type === _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.frame || this.state.activeTool.type === _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.magicframe) {\n this.createFrameElementOnPointerDown(pointerDownState, this.state.activeTool.type);\n } else if (this.state.activeTool.type === \"laser\") {\n this.laserTrails.startPath(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y);\n } else if (this.state.activeTool.type !== \"eraser\" && this.state.activeTool.type !== \"hand\" && this.state.activeTool.type !== \"mermaid\") {\n this.createGenericElementOnPointerDown(this.state.activeTool.type, pointerDownState);\n }\n\n (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.onPointerDown) === null || _b === void 0 ? void 0 : _b.call(_a, this.state.activeTool, pointerDownState);\n this.onPointerDownEmitter.trigger(this.state.activeTool, pointerDownState, event);\n\n if (this.state.activeTool.type === \"eraser\") {\n this.eraserTrail.startPath(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y);\n }\n\n const onPointerMove = this.onPointerMoveFromPointerDownHandler(pointerDownState);\n const onPointerUp = this.onPointerUpFromPointerDownHandler(pointerDownState);\n const onKeyDown = this.onKeyDownFromPointerDownHandler(pointerDownState);\n const onKeyUp = this.onKeyUpFromPointerDownHandler(pointerDownState);\n this.missingPointerEventCleanupEmitter.once(_event => onPointerUp(_event || event.nativeEvent));\n\n if (!this.state.viewModeEnabled || this.state.activeTool.type === \"laser\") {\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, onPointerMove);\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, onPointerUp);\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYDOWN, onKeyDown);\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYUP, onKeyUp);\n pointerDownState.eventListeners.onMove = onPointerMove;\n pointerDownState.eventListeners.onUp = onPointerUp;\n pointerDownState.eventListeners.onKeyUp = onKeyUp;\n pointerDownState.eventListeners.onKeyDown = onKeyDown;\n }\n };\n\n this.handleCanvasPointerUp = event => {\n var _a, _b;\n\n this.removePointer(event);\n this.lastPointerUpEvent = event;\n const scenePointer = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)({\n clientX: event.clientX,\n clientY: event.clientY\n }, this.state);\n const clicklength = event.timeStamp - ((_b = (_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a.timeStamp) !== null && _b !== void 0 ? _b : 0);\n\n if (this.device.editor.isMobile && clicklength < 300) {\n const hitElement = this.getElementAtPosition(scenePointer.x, scenePointer.y);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeLikeElement)(hitElement) && this.isIframeLikeElementCenter(hitElement, event, scenePointer.x, scenePointer.y)) {\n this.handleEmbeddableCenterClick(hitElement);\n return;\n }\n }\n\n if (this.device.isTouchScreen) {\n const hitElement = this.getElementAtPosition(scenePointer.x, scenePointer.y);\n this.hitLinkElement = this.getElementLinkAtPosition(scenePointer, hitElement);\n }\n\n if (this.hitLinkElement && !this.state.selectedElementIds[this.hitLinkElement.id]) {\n if (clicklength < 300 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeLikeElement)(this.hitLinkElement) && !(0,_hyperlink_helpers__WEBPACK_IMPORTED_MODULE_91__.isPointHittingLinkIcon)(this.hitLinkElement, this.scene.getNonDeletedElementsMap(), this.state, [scenePointer.x, scenePointer.y])) {\n this.handleEmbeddableCenterClick(this.hitLinkElement);\n } else {\n this.redirectToLink(event, this.device.isTouchScreen);\n }\n } else if (this.state.viewModeEnabled) {\n this.setState({\n activeEmbeddable: null,\n selectedElementIds: {}\n });\n }\n };\n\n this.maybeOpenContextMenuAfterPointerDownOnTouchDevices = event => {\n // deal with opening context menu on touch devices\n if (event.pointerType === \"touch\") {\n invalidateContextMenu = false;\n\n if (touchTimeout) {\n // If there's already a touchTimeout, this means that there's another\n // touch down and we are doing another touch, so we shouldn't open the\n // context menu.\n invalidateContextMenu = true;\n } else {\n // open the context menu with the first touch's clientX and clientY\n // if the touch is not moving\n touchTimeout = window.setTimeout(() => {\n touchTimeout = 0;\n\n if (!invalidateContextMenu) {\n this.handleCanvasContextMenu(event);\n }\n }, _constants__WEBPACK_IMPORTED_MODULE_12__.TOUCH_CTX_MENU_TIMEOUT);\n }\n }\n };\n\n this.resetContextMenuTimer = () => {\n clearTimeout(touchTimeout);\n touchTimeout = 0;\n invalidateContextMenu = false;\n };\n /**\r\n * pointerup may not fire in certian cases (user tabs away...), so in order\r\n * to properly cleanup pointerdown state, we need to fire any hanging\r\n * pointerup handlers manually\r\n */\n\n\n this.maybeCleanupAfterMissingPointerUp = event => {\n lastPointerUp === null || lastPointerUp === void 0 ? void 0 : lastPointerUp();\n this.missingPointerEventCleanupEmitter.trigger(event).clear();\n }; // Returns whether the event is a panning\n\n\n this.handleCanvasPanUsingWheelOrSpaceDrag = event => {\n if (!(gesture.pointers.size <= 1 && (event.button === _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.WHEEL || event.button === _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.MAIN && isHoldingSpace || (0,_appState__WEBPACK_IMPORTED_MODULE_10__.isHandToolActive)(this.state) || this.state.viewModeEnabled && !(0,_appState__WEBPACK_IMPORTED_MODULE_10__.isLaserPointerActive)(this.state))) || (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(this.state.editingElement)) {\n return false;\n }\n\n isPanning = true;\n event.preventDefault();\n let nextPastePrevented = false;\n const isLinux = typeof window === undefined ? false : /Linux/.test(window.navigator.platform);\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRABBING);\n let {\n clientX: lastX,\n clientY: lastY\n } = event;\n const onPointerMove = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdatesThrottled)(event => {\n const deltaX = lastX - event.clientX;\n const deltaY = lastY - event.clientY;\n lastX = event.clientX;\n lastY = event.clientY;\n /*\r\n * Prevent paste event if we move while middle clicking on Linux.\r\n * See issue #1383.\r\n */\n\n if (isLinux && !nextPastePrevented && (Math.abs(deltaX) > 1 || Math.abs(deltaY) > 1)) {\n nextPastePrevented = true;\n /* Prevent the next paste event */\n\n const preventNextPaste = event => {\n document.body.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.PASTE, preventNextPaste);\n event.stopPropagation();\n };\n /*\r\n * Reenable next paste in case of disabled middle click paste for\r\n * any reason:\r\n * - right click paste\r\n * - empty clipboard\r\n */\n\n\n const enableNextPaste = () => {\n setTimeout(() => {\n document.body.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.PASTE, preventNextPaste);\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, enableNextPaste);\n }, 100);\n };\n\n document.body.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.PASTE, preventNextPaste);\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, enableNextPaste);\n }\n\n this.translateCanvas({\n scrollX: this.state.scrollX - deltaX / this.state.zoom.value,\n scrollY: this.state.scrollY - deltaY / this.state.zoom.value\n });\n });\n const teardown = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(lastPointerUp = () => {\n lastPointerUp = null;\n isPanning = false;\n\n if (!isHoldingSpace) {\n if (this.state.viewModeEnabled) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n } else {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursorForShape)(this.interactiveCanvas, this.state);\n }\n }\n\n this.setState({\n cursorButton: \"up\"\n });\n this.savePointer(event.clientX, event.clientY, \"up\");\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, onPointerMove);\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, teardown);\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.BLUR, teardown);\n onPointerMove.flush();\n });\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.BLUR, teardown);\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, onPointerMove, {\n passive: true\n });\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, teardown);\n return true;\n };\n\n this.clearSelectionIfNotUsingSelection = () => {\n if (this.state.activeTool.type !== \"selection\") {\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, this.state),\n selectedGroupIds: {},\n editingGroupId: null,\n activeEmbeddable: null\n });\n }\n };\n /**\r\n * @returns whether the pointer event has been completely handled\r\n */\n\n\n this.handleSelectionOnPointerDown = (event, pointerDownState) => {\n var _a;\n\n if (this.state.activeTool.type === \"selection\") {\n const elements = this.scene.getNonDeletedElements();\n const elementsMap = this.scene.getNonDeletedElementsMap();\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (selectedElements.length === 1 && !this.state.editingLinearElement && !(this.state.selectedLinearElement && this.state.selectedLinearElement.hoverPointIndex !== -1)) {\n const elementWithTransformHandleType = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getElementWithTransformHandleType)(elements, this.state, pointerDownState.origin.x, pointerDownState.origin.y, this.state.zoom, event.pointerType, this.scene.getNonDeletedElementsMap(), this.device);\n\n if (elementWithTransformHandleType != null) {\n this.setState({\n resizingElement: elementWithTransformHandleType.element\n });\n pointerDownState.resize.handleType = elementWithTransformHandleType.transformHandleType;\n }\n } else if (selectedElements.length > 1) {\n pointerDownState.resize.handleType = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getTransformHandleTypeFromCoords)((0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(selectedElements), pointerDownState.origin.x, pointerDownState.origin.y, this.state.zoom, event.pointerType, this.device);\n }\n\n if (pointerDownState.resize.handleType) {\n pointerDownState.resize.isResizing = true;\n pointerDownState.resize.offset = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.tupleToCoors)((0,_element__WEBPACK_IMPORTED_MODULE_16__.getResizeOffsetXY)(pointerDownState.resize.handleType, selectedElements, elementsMap, pointerDownState.origin.x, pointerDownState.origin.y));\n\n if (selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(selectedElements[0]) && selectedElements[0].points.length === 2) {\n pointerDownState.resize.arrowDirection = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getResizeArrowDirection)(pointerDownState.resize.handleType, selectedElements[0]);\n }\n } else {\n if (this.state.selectedLinearElement) {\n const linearElementEditor = this.state.editingLinearElement || this.state.selectedLinearElement;\n const ret = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handlePointerDown(event, this.state, this.store, pointerDownState.origin, linearElementEditor, this);\n\n if (ret.hitElement) {\n pointerDownState.hit.element = ret.hitElement;\n }\n\n if (ret.linearElementEditor) {\n this.setState({\n selectedLinearElement: ret.linearElementEditor\n });\n\n if (this.state.editingLinearElement) {\n this.setState({\n editingLinearElement: ret.linearElementEditor\n });\n }\n }\n\n if (ret.didAddPoint) {\n return true;\n }\n } // hitElement may already be set above, so check first\n\n\n pointerDownState.hit.element = (_a = pointerDownState.hit.element) !== null && _a !== void 0 ? _a : this.getElementAtPosition(pointerDownState.origin.x, pointerDownState.origin.y);\n\n if (pointerDownState.hit.element) {\n // Early return if pointer is hitting link icon\n const hitLinkElement = this.getElementLinkAtPosition({\n x: pointerDownState.origin.x,\n y: pointerDownState.origin.y\n }, pointerDownState.hit.element);\n\n if (hitLinkElement) {\n return false;\n }\n } // For overlapped elements one position may hit\n // multiple elements\n\n\n pointerDownState.hit.allHitElements = this.getElementsAtPosition(pointerDownState.origin.x, pointerDownState.origin.y);\n const hitElement = pointerDownState.hit.element;\n const someHitElementIsSelected = pointerDownState.hit.allHitElements.some(element => this.isASelectedElement(element));\n\n if ((hitElement === null || !someHitElementIsSelected) && !event.shiftKey && !pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements) {\n this.clearSelection(hitElement);\n }\n\n if (this.state.editingLinearElement) {\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({\n [this.state.editingLinearElement.elementId]: true\n }, this.state)\n }); // If we click on something\n } else if (hitElement != null) {\n // on CMD/CTRL, drill down to hit element regardless of groups etc.\n if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n if (!this.state.selectedElementIds[hitElement.id]) {\n pointerDownState.hit.wasAddedToSelection = true;\n }\n\n this.setState(prevState => Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.editGroupForSelectedElement)(prevState, hitElement)), {\n previousSelectedElementIds: this.state.selectedElementIds\n })); // mark as not completely handled so as to allow dragging etc.\n\n return false;\n } // deselect if item is selected\n // if shift is not clicked, this will always return true\n // otherwise, it will trigger selection based on current\n // state of the box\n\n\n if (!this.state.selectedElementIds[hitElement.id]) {\n // if we are currently editing a group, exiting editing mode and deselect the group.\n if (this.state.editingGroupId && !(0,_groups__WEBPACK_IMPORTED_MODULE_23__.isElementInGroup)(hitElement, this.state.editingGroupId)) {\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, this.state),\n selectedGroupIds: {},\n editingGroupId: null,\n activeEmbeddable: null\n });\n } // Add hit element to selection. At this point if we're not holding\n // SHIFT the previously selected element(s) were deselected above\n // (make sure you use setState updater to use latest state)\n // With shift-selection, we want to make sure that frames and their containing\n // elements are not selected at the same time.\n\n\n if (!someHitElementIsSelected && !pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements) {\n this.setState(prevState => {\n const nextSelectedElementIds = Object.assign(Object.assign({}, prevState.selectedElementIds), {\n [hitElement.id]: true\n });\n const previouslySelectedElements = [];\n Object.keys(prevState.selectedElementIds).forEach(id => {\n const element = this.scene.getElement(id);\n element && previouslySelectedElements.push(element);\n }); // if hitElement is frame-like, deselect all of its elements\n // if they are selected\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(hitElement)) {\n (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getFrameChildren)(previouslySelectedElements, hitElement.id).forEach(element => {\n delete nextSelectedElementIds[element.id];\n });\n } else if (hitElement.frameId) {\n // if hitElement is in a frame and its frame has been selected\n // disable selection for the given element\n if (nextSelectedElementIds[hitElement.frameId]) {\n delete nextSelectedElementIds[hitElement.id];\n }\n } else {\n // hitElement is neither a frame nor an element in a frame\n // but since hitElement could be in a group with some frames\n // this means selecting hitElement will have the frames selected as well\n // because we want to keep the invariant:\n // - frames and their elements are not selected at the same time\n // we deselect elements in those frames that were previously selected\n const groupIds = hitElement.groupIds;\n const framesInGroups = new Set(groupIds.flatMap(gid => (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(this.scene.getNonDeletedElements(), gid)).filter(element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(element)).map(frame => frame.id));\n\n if (framesInGroups.size > 0) {\n previouslySelectedElements.forEach(element => {\n if (element.frameId && framesInGroups.has(element.frameId)) {\n // deselect element and groups containing the element\n delete nextSelectedElementIds[element.id];\n element.groupIds.flatMap(gid => (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(this.scene.getNonDeletedElements(), gid)).forEach(element => {\n delete nextSelectedElementIds[element.id];\n });\n }\n });\n }\n }\n\n return Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n editingGroupId: prevState.editingGroupId,\n selectedElementIds: nextSelectedElementIds\n }, this.scene.getNonDeletedElements(), prevState, this)), {\n showHyperlinkPopup: hitElement.link || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(hitElement) ? \"info\" : false\n });\n });\n pointerDownState.hit.wasAddedToSelection = true;\n }\n }\n }\n\n this.setState({\n previousSelectedElementIds: this.state.selectedElementIds\n });\n }\n }\n\n return false;\n };\n\n this.handleTextOnPointerDown = (event, pointerDownState) => {\n // if we're currently still editing text, clicking outside\n // should only finalize it, not create another (irrespective\n // of state.activeTool.locked)\n if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(this.state.editingElement)) {\n return;\n }\n\n let sceneX = pointerDownState.origin.x;\n let sceneY = pointerDownState.origin.y;\n const element = this.getElementAtPosition(sceneX, sceneY, {\n includeBoundTextElement: true\n }); // FIXME\n\n let container = this.getTextBindableContainerAtPosition(sceneX, sceneY);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.hasBoundTextElement)(element)) {\n container = element;\n sceneX = element.x + element.width / 2;\n sceneY = element.y + element.height / 2;\n }\n\n this.startTextEditing({\n sceneX,\n sceneY,\n insertAtParentCenter: !event.altKey,\n container\n });\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.resetCursor)(this.interactiveCanvas);\n\n if (!this.state.activeTool.locked) {\n this.setState({\n activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateActiveTool)(this.state, {\n type: \"selection\"\n })\n });\n }\n };\n\n this.handleFreeDrawElementOnPointerDown = (event, elementType, pointerDownState) => {\n // Begin a mark capture. This does not have to update state yet.\n const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerDownState.origin.x, pointerDownState.origin.y, null);\n const strokeOptions = this.state.currentStrokeOptions; //zsviczian\n\n const simulatePressure = (strokeOptions === null || strokeOptions === void 0 ? void 0 : strokeOptions.constantPressure) ? false : event.pressure === 0.5;\n const topLayerFrame = this.getTopLayerFrameAtSceneCoords({\n x: gridX,\n y: gridY\n });\n const element = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newFreeDrawElement)(Object.assign(Object.assign({\n type: elementType,\n x: gridX,\n y: gridY,\n strokeColor: this.state.currentItemStrokeColor,\n backgroundColor: this.state.currentItemBackgroundColor,\n fillStyle: this.state.currentItemFillStyle,\n strokeWidth: this.state.currentItemStrokeWidth,\n strokeStyle: this.state.currentItemStrokeStyle,\n roughness: this.state.currentItemRoughness,\n opacity: this.state.currentItemOpacity,\n roundness: null,\n simulatePressure,\n locked: false\n }, strokeOptions //zsviczian\n ? {\n customData: {\n strokeOptions\n }\n } : {}), {\n frameId: topLayerFrame ? topLayerFrame.id : null\n }));\n this.setState(prevState => {\n const nextSelectedElementIds = Object.assign({}, prevState.selectedElementIds);\n delete nextSelectedElementIds[element.id];\n return {\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(nextSelectedElementIds, prevState)\n };\n });\n const pressures = element.simulatePressure ? element.pressures : [//zsviczian\n ...element.pressures, (strokeOptions === null || strokeOptions === void 0 ? void 0 : strokeOptions.constantPressure) ? 1 : event.pressure];\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n points: [[0, 0]],\n pressures\n });\n const boundElement = (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getHoveredElementForBinding)(pointerDownState.origin, this);\n\n if (strokeOptions === null || strokeOptions === void 0 ? void 0 : strokeOptions.highlighter) {\n //zsviczian\n this.scene.insertElement(element, 0);\n /* this.scene.replaceAllElements([\r\n element,\r\n ...this.scene.getElementsIncludingDeleted(),\r\n ]);*/\n } else {\n this.scene.insertElement(element);\n }\n\n this.setState({\n draggingElement: element,\n editingElement: element,\n startBoundElement: boundElement,\n suggestedBindings: []\n });\n };\n\n this.insertIframeElement = ({\n sceneX,\n sceneY,\n width,\n height\n }) => {\n var _a;\n\n const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(sceneX, sceneY, ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) ? null : this.state.gridSize);\n const element = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newIframeElement)({\n type: \"iframe\",\n x: gridX,\n y: gridY,\n strokeColor: \"transparent\",\n backgroundColor: \"transparent\",\n fillStyle: this.state.currentItemFillStyle,\n strokeWidth: this.state.currentItemStrokeWidth,\n strokeStyle: this.state.currentItemStrokeStyle,\n roughness: this.state.currentItemRoughness,\n roundness: this.getCurrentItemRoundness(\"iframe\"),\n opacity: this.state.currentItemOpacity,\n locked: false,\n width,\n height\n });\n this.scene.insertElement(element);\n return element;\n }; //create rectangle element with youtube top left on nearest grid point width / hight 640/360\n\n\n this.insertEmbeddableElement = ({\n sceneX,\n sceneY,\n link\n }) => {\n var _a;\n\n const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(sceneX, sceneY, ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) ? null : this.state.gridSize);\n const embedLink = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_36__.getEmbedLink)(link);\n\n if (!embedLink) {\n return;\n }\n\n if (embedLink.error instanceof URIError) {\n this.setToast({\n message: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"toast.unrecognizedLinkFormat\"),\n closable: true\n });\n }\n\n const element = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newEmbeddableElement)({\n type: \"embeddable\",\n x: gridX,\n y: gridY,\n strokeColor: \"transparent\",\n backgroundColor: \"transparent\",\n fillStyle: this.state.currentItemFillStyle,\n strokeWidth: this.state.currentItemStrokeWidth,\n strokeStyle: this.state.currentItemStrokeStyle,\n roughness: this.state.currentItemRoughness,\n roundness: this.getCurrentItemRoundness(\"embeddable\"),\n opacity: this.state.currentItemOpacity,\n locked: false,\n width: embedLink.intrinsicSize.w,\n height: embedLink.intrinsicSize.h,\n link\n });\n this.scene.insertElement(element);\n return element;\n };\n\n this.createImageElement = ({\n sceneX,\n sceneY,\n addToFrameUnderCursor = true\n }) => {\n var _a;\n\n const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(sceneX, sceneY, ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) ? null : this.state.gridSize);\n const topLayerFrame = addToFrameUnderCursor ? this.getTopLayerFrameAtSceneCoords({\n x: gridX,\n y: gridY\n }) : null;\n const element = (0,_element__WEBPACK_IMPORTED_MODULE_16__.newImageElement)({\n type: \"image\",\n x: gridX,\n y: gridY,\n strokeColor: this.state.currentItemStrokeColor,\n backgroundColor: this.state.currentItemBackgroundColor,\n fillStyle: this.state.currentItemFillStyle,\n strokeWidth: this.state.currentItemStrokeWidth,\n strokeStyle: this.state.currentItemStrokeStyle,\n roughness: this.state.currentItemRoughness,\n roundness: null,\n opacity: this.state.currentItemOpacity,\n locked: false,\n frameId: topLayerFrame ? topLayerFrame.id : null\n });\n return element;\n };\n\n this.handleLinearElementOnPointerDown = (event, elementType, pointerDownState) => {\n if (this.state.multiElement) {\n const {\n multiElement\n } = this.state; // finalize if completing a loop\n\n if (multiElement.type === \"line\" && (0,_math__WEBPACK_IMPORTED_MODULE_28__.isPathALoop)(multiElement.points, this.state.zoom.value)) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(multiElement, {\n lastCommittedPoint: multiElement.points[multiElement.points.length - 1]\n });\n this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n return;\n }\n\n const {\n x: rx,\n y: ry,\n lastCommittedPoint\n } = multiElement; // clicking inside commit zone → finalize arrow\n\n if (multiElement.points.length > 1 && lastCommittedPoint && (0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(pointerDownState.origin.x - rx, pointerDownState.origin.y - ry, lastCommittedPoint[0], lastCommittedPoint[1]) < _constants__WEBPACK_IMPORTED_MODULE_12__.LINE_CONFIRM_THRESHOLD) {\n this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n return;\n }\n\n this.setState(prevState => ({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(Object.assign(Object.assign({}, prevState.selectedElementIds), {\n [multiElement.id]: true\n }), prevState)\n })); // clicking outside commit zone → update reference for last committed\n // point\n\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(multiElement, {\n lastCommittedPoint: multiElement.points[multiElement.points.length - 1]\n });\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n } else {\n const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerDownState.origin.x, pointerDownState.origin.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.state.gridSize);\n const topLayerFrame = this.getTopLayerFrameAtSceneCoords({\n x: gridX,\n y: gridY\n });\n /* If arrow is pre-arrowheads, it will have undefined for both start and end arrowheads.\r\n If so, we want it to be null for start and \"arrow\" for end. If the linear item is not\r\n an arrow, we want it to be null for both. Otherwise, we want it to use the\r\n values from appState. */\n\n const {\n currentItemStartArrowhead,\n currentItemEndArrowhead\n } = this.state;\n const [startArrowhead, endArrowhead] = elementType === \"arrow\" ? [currentItemStartArrowhead, currentItemEndArrowhead] : [null, null];\n const element = (0,_element__WEBPACK_IMPORTED_MODULE_16__.newLinearElement)({\n type: elementType,\n x: gridX,\n y: gridY,\n strokeColor: this.state.currentItemStrokeColor,\n backgroundColor: this.state.currentItemBackgroundColor,\n fillStyle: this.state.currentItemFillStyle,\n strokeWidth: this.state.currentItemStrokeWidth,\n strokeStyle: this.state.currentItemStrokeStyle,\n roughness: this.state.currentItemRoughness,\n opacity: this.state.currentItemOpacity,\n roundness: this.state.currentItemRoundness === \"round\" ? {\n type: _constants__WEBPACK_IMPORTED_MODULE_12__.ROUNDNESS.PROPORTIONAL_RADIUS\n } : null,\n startArrowhead,\n endArrowhead,\n locked: false,\n frameId: topLayerFrame ? topLayerFrame.id : null\n });\n this.setState(prevState => {\n const nextSelectedElementIds = Object.assign({}, prevState.selectedElementIds);\n delete nextSelectedElementIds[element.id];\n return {\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(nextSelectedElementIds, prevState)\n };\n });\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n points: [...element.points, [0, 0]]\n });\n const boundElement = (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getHoveredElementForBinding)(pointerDownState.origin, this);\n this.scene.insertElement(element);\n this.setState({\n draggingElement: element,\n editingElement: element,\n startBoundElement: boundElement,\n suggestedBindings: []\n });\n }\n };\n\n this.createGenericElementOnPointerDown = (elementType, pointerDownState) => {\n var _a;\n\n const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerDownState.origin.x, pointerDownState.origin.y, ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) ? null : this.state.gridSize);\n const topLayerFrame = this.getTopLayerFrameAtSceneCoords({\n x: gridX,\n y: gridY\n });\n const baseElementAttributes = {\n x: gridX,\n y: gridY,\n strokeColor: this.state.currentItemStrokeColor,\n backgroundColor: this.state.currentItemBackgroundColor,\n fillStyle: this.state.currentItemFillStyle,\n strokeWidth: this.state.currentItemStrokeWidth,\n strokeStyle: this.state.currentItemStrokeStyle,\n roughness: this.state.currentItemRoughness,\n opacity: this.state.currentItemOpacity,\n roundness: this.getCurrentItemRoundness(elementType),\n locked: false,\n frameId: topLayerFrame ? topLayerFrame.id : null\n };\n let element;\n\n if (elementType === \"embeddable\") {\n element = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newEmbeddableElement)(Object.assign({\n type: \"embeddable\"\n }, baseElementAttributes));\n } else {\n element = (0,_element__WEBPACK_IMPORTED_MODULE_16__.newElement)(Object.assign({\n type: elementType\n }, baseElementAttributes));\n }\n\n if (element.type === \"selection\") {\n this.setState({\n selectionElement: element,\n draggingElement: element\n });\n } else {\n this.scene.insertElement(element);\n this.setState({\n multiElement: null,\n draggingElement: element,\n editingElement: element\n });\n }\n };\n\n this.createFrameElementOnPointerDown = (pointerDownState, type) => {\n var _a;\n\n const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerDownState.origin.x, pointerDownState.origin.y, ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) ? null : this.state.gridSize);\n const constructorOpts = Object.assign(Object.assign({\n x: gridX,\n y: gridY,\n opacity: this.state.currentItemOpacity,\n locked: false\n }, _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE), this.state.frameColor ? {\n //zsviczian\n customData: {\n frameColor: this.state.frameColor\n }\n } : {});\n const frame = type === _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.magicframe ? (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newMagicFrameElement)(constructorOpts) : (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newFrameElement)(constructorOpts);\n this.scene.insertElement(frame);\n this.setState({\n multiElement: null,\n draggingElement: frame,\n editingElement: frame\n });\n };\n\n this.restoreReadyToEraseElements = () => {\n this.elementsPendingErasure = new Set();\n this.triggerRender();\n };\n\n this.eraseElements = () => {\n let didChange = false;\n const elements = this.scene.getElementsIncludingDeleted().map(ele => {\n if (this.elementsPendingErasure.has(ele.id) || ele.frameId && this.elementsPendingErasure.has(ele.frameId) || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(ele) && this.elementsPendingErasure.has(ele.containerId)) {\n didChange = true;\n return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(ele, {\n isDeleted: true\n });\n }\n\n return ele;\n });\n this.elementsPendingErasure = new Set();\n\n if (didChange) {\n this.store.shouldCaptureIncrement();\n this.scene.replaceAllElements(elements);\n }\n };\n\n this.initializeImage = async ({\n imageFile,\n imageElement: _imageElement,\n showCursorImagePreview = false\n }) => {\n var _a, _b, _c, _d; // at this point this should be guaranteed image file, but we do this check\n // to satisfy TS down the line\n\n\n if (!(0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.isSupportedImageFile)(imageFile)) {\n throw new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.unsupportedFileType\"));\n }\n\n const mimeType = imageFile.type;\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, \"wait\");\n\n if (mimeType === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.svg) {\n try {\n imageFile = (0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.SVGStringToFile)(await (0,_element_image__WEBPACK_IMPORTED_MODULE_42__.normalizeSVG)(await imageFile.text()), imageFile.name);\n } catch (error) {\n console.warn(error);\n throw new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.svgImageInsertError\"));\n }\n } // generate image id (by default the file digest) before any\n // resizing/compression takes place to keep it more portable\n\n\n const fileId = await (((_b = (_a = this.props).generateIdForFile) === null || _b === void 0 ? void 0 : _b.call(_a, imageFile)) || (0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.generateIdFromFile)(imageFile));\n\n if (!fileId) {\n console.warn(\"Couldn't generate file id or the supplied `generateIdForFile` didn't resolve to one.\");\n throw new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageInsertError\"));\n }\n\n const existingFileData = this.files[fileId];\n\n if (!(existingFileData === null || existingFileData === void 0 ? void 0 : existingFileData.dataURL)) {\n try {\n imageFile = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.resizeImageFile)(imageFile, {\n maxWidthOrHeight: _constants__WEBPACK_IMPORTED_MODULE_12__.DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT\n });\n } catch (error) {\n console.error(\"Error trying to resizing image file on insertion\", error);\n }\n\n if (imageFile.size > _constants__WEBPACK_IMPORTED_MODULE_12__.MAX_ALLOWED_FILE_BYTES) {\n throw new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.fileTooBig\", {\n maxSize: `${Math.trunc(_constants__WEBPACK_IMPORTED_MODULE_12__.MAX_ALLOWED_FILE_BYTES / 1024 / 1024)}MB`\n }));\n }\n }\n\n if (showCursorImagePreview) {\n const dataURL = (_c = this.files[fileId]) === null || _c === void 0 ? void 0 : _c.dataURL; // optimization so that we don't unnecessarily resize the original\n // full-size file for cursor preview\n // (it's much faster to convert the resized dataURL to File)\n\n const resizedFile = dataURL && (0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.dataURLToFile)(dataURL);\n this.setImagePreviewCursor(resizedFile || imageFile);\n }\n\n const dataURL = ((_d = this.files[fileId]) === null || _d === void 0 ? void 0 : _d.dataURL) || (await (0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.getDataURL)(imageFile));\n const imageElement = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(_imageElement, {\n fileId\n }, false);\n return new Promise(async (resolve, reject) => {\n var _a;\n\n try {\n this.files = Object.assign(Object.assign({}, this.files), {\n [fileId]: {\n mimeType,\n id: fileId,\n dataURL,\n created: Date.now(),\n lastRetrieved: Date.now()\n }\n });\n const cachedImageData = this.imageCache.get(fileId);\n\n if (!cachedImageData) {\n this.addNewImagesToImageCache();\n await this.updateImageCache([imageElement]);\n }\n\n if ((cachedImageData === null || cachedImageData === void 0 ? void 0 : cachedImageData.image) instanceof Promise) {\n await cachedImageData.image;\n }\n\n if (this.state.pendingImageElementId !== imageElement.id && ((_a = this.state.draggingElement) === null || _a === void 0 ? void 0 : _a.id) !== imageElement.id) {\n this.initializeImageDimensions(imageElement, true);\n }\n\n resolve(imageElement);\n } catch (error) {\n console.error(error);\n reject(new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageInsertError\")));\n } finally {\n if (!showCursorImagePreview) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.resetCursor)(this.interactiveCanvas);\n }\n }\n });\n };\n /**\r\n * inserts image into elements array and rerenders\r\n */\n\n\n this.insertImageElement = async (imageElement, imageFile, showCursorImagePreview) => {\n // we should be handling all cases upstream, but in case we forget to handle\n // a future case, let's throw here\n if (!this.isToolSupported(\"image\")) {\n this.setState({\n errorMessage: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageToolNotSupported\")\n });\n return;\n }\n\n this.scene.insertElement(imageElement);\n\n try {\n return await this.initializeImage({\n imageFile,\n imageElement,\n showCursorImagePreview\n });\n } catch (error) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(imageElement, {\n isDeleted: true\n });\n this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n this.setState({\n errorMessage: error.message || (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageInsertError\")\n });\n return null;\n }\n };\n\n this.setImagePreviewCursor = async imageFile => {\n // mustn't be larger than 128 px\n // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property\n const cursorImageSizePx = 96;\n let imagePreview;\n\n try {\n imagePreview = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.resizeImageFile)(imageFile, {\n maxWidthOrHeight: cursorImageSizePx\n });\n } catch (e) {\n if (e.cause === \"UNSUPPORTED\") {\n throw new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.unsupportedFileType\"));\n }\n\n throw e;\n }\n\n let previewDataURL = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.getDataURL)(imagePreview); // SVG cannot be resized via `resizeImageFile` so we resize by rendering to\n // a small canvas\n\n if (imageFile.type === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.svg) {\n const img = await (0,_element_image__WEBPACK_IMPORTED_MODULE_42__.loadHTMLImageElement)(previewDataURL);\n let height = Math.min(img.height, cursorImageSizePx);\n let width = height * (img.width / img.height);\n\n if (width > cursorImageSizePx) {\n width = cursorImageSizePx;\n height = width * (img.height / img.width);\n }\n\n const canvas = document.createElement(\"canvas\");\n canvas.height = height;\n canvas.width = width;\n const context = canvas.getContext(\"2d\");\n context.drawImage(img, 0, 0, width, height);\n previewDataURL = canvas.toDataURL(_constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.svg);\n }\n\n if (this.state.pendingImageElementId) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, `url(${previewDataURL}) 4 4, auto`);\n }\n };\n\n this.onImageAction = async ({\n insertOnCanvasDirectly\n }) => {\n try {\n const clientX = this.state.width / 2 + this.state.offsetLeft;\n const clientY = this.state.height / 2 + this.state.offsetTop;\n const {\n x,\n y\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)({\n clientX,\n clientY\n }, this.state);\n const imageFile = await (0,_data_filesystem__WEBPACK_IMPORTED_MODULE_44__.fileOpen)({\n description: \"Image\",\n extensions: Object.keys(_constants__WEBPACK_IMPORTED_MODULE_12__.IMAGE_MIME_TYPES)\n });\n const imageElement = this.createImageElement({\n sceneX: x,\n sceneY: y,\n addToFrameUnderCursor: false\n });\n\n if (insertOnCanvasDirectly) {\n this.insertImageElement(imageElement, imageFile);\n this.initializeImageDimensions(imageElement);\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({\n [imageElement.id]: true\n }, this.state)\n }, () => {\n this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n });\n } else {\n this.setState({\n pendingImageElementId: imageElement.id\n }, () => {\n this.insertImageElement(imageElement, imageFile,\n /* showCursorImagePreview */\n true);\n });\n }\n } catch (error) {\n if (error.name !== \"AbortError\") {\n console.error(error);\n } else {\n console.warn(error);\n }\n\n this.setState({\n pendingImageElementId: null,\n editingElement: null,\n activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateActiveTool)(this.state, {\n type: \"selection\"\n })\n }, () => {\n this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n });\n }\n };\n\n this.initializeImageDimensions = (imageElement, forceNaturalSize = false) => {\n var _a;\n\n const image = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isInitializedImageElement)(imageElement) && ((_a = this.imageCache.get(imageElement.fileId)) === null || _a === void 0 ? void 0 : _a.image);\n\n if (!image || image instanceof Promise) {\n if (imageElement.width < _constants__WEBPACK_IMPORTED_MODULE_12__.DRAGGING_THRESHOLD / this.state.zoom.value && imageElement.height < _constants__WEBPACK_IMPORTED_MODULE_12__.DRAGGING_THRESHOLD / this.state.zoom.value) {\n const placeholderSize = 100 / this.state.zoom.value;\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(imageElement, {\n x: imageElement.x - placeholderSize / 2,\n y: imageElement.y - placeholderSize / 2,\n width: placeholderSize,\n height: placeholderSize\n });\n }\n\n return;\n }\n\n if (forceNaturalSize || // if user-created bounding box is below threshold, assume the\n // intention was to click instead of drag, and use the image's\n // intrinsic size\n imageElement.width < _constants__WEBPACK_IMPORTED_MODULE_12__.DRAGGING_THRESHOLD / this.state.zoom.value && imageElement.height < _constants__WEBPACK_IMPORTED_MODULE_12__.DRAGGING_THRESHOLD / this.state.zoom.value) {\n const minHeight = Math.max(this.state.height - 120, 160); // max 65% of canvas height, clamped to <300px, vh - 120px>\n\n const maxHeight = Math.min(minHeight, Math.floor(this.state.height * 0.5) / this.state.zoom.value);\n const height = Math.min(image.naturalHeight, maxHeight);\n const width = height * (image.naturalWidth / image.naturalHeight); // add current imageElement width/height to account for previous centering\n // of the placeholder image\n\n const x = imageElement.x + imageElement.width / 2 - width / 2;\n const y = imageElement.y + imageElement.height / 2 - height / 2;\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(imageElement, {\n x,\n y,\n width,\n height\n });\n }\n };\n /** updates image cache, refreshing updated elements and/or setting status\r\n to error for images that fail during <img> element creation */\n\n\n this.updateImageCache = async (elements, files = this.files) => {\n const {\n updatedFiles,\n erroredFiles\n } = await (0,_element_image__WEBPACK_IMPORTED_MODULE_42__.updateImageCache)({\n imageCache: this.imageCache,\n fileIds: elements.map(element => element.fileId),\n files\n });\n\n if (updatedFiles.size || erroredFiles.size) {\n for (const element of elements) {\n if (updatedFiles.has(element.fileId)) {\n _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_67__.ShapeCache[\"delete\"](element);\n }\n }\n }\n\n if (erroredFiles.size) {\n this.scene.replaceAllElements(this.scene.getElementsIncludingDeleted().map(element => {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isInitializedImageElement)(element) && erroredFiles.has(element.fileId)) {\n return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(element, {\n status: \"error\"\n });\n }\n\n return element;\n }));\n }\n\n return {\n updatedFiles,\n erroredFiles\n };\n };\n /** adds new images to imageCache and re-renders if needed */\n\n\n this.addNewImagesToImageCache = async (imageElements = (0,_element_image__WEBPACK_IMPORTED_MODULE_42__.getInitializedImageElements)(this.scene.getNonDeletedElements()), files = this.files) => {\n const uncachedImageElements = imageElements.filter(element => !element.isDeleted && !this.imageCache.has(element.fileId));\n\n if (uncachedImageElements.length) {\n const {\n updatedFiles\n } = await this.updateImageCache(uncachedImageElements, files);\n\n if (updatedFiles.size) {\n this.scene.triggerUpdate();\n }\n }\n };\n /** generally you should use `addNewImagesToImageCache()` directly if you need\r\n * to render new images. This is just a failsafe */\n\n\n this.scheduleImageRefresh = lodash_throttle__WEBPACK_IMPORTED_MODULE_43___default()(() => {\n this.addNewImagesToImageCache();\n }, _constants__WEBPACK_IMPORTED_MODULE_12__.IMAGE_RENDER_TIMEOUT);\n\n this.updateBindingEnabledOnPointerMove = event => {\n const shouldEnableBinding = (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.shouldEnableBindingForPointerEvent)(event);\n\n if (this.state.isBindingEnabled !== shouldEnableBinding) {\n this.setState({\n isBindingEnabled: shouldEnableBinding\n });\n }\n };\n\n this.maybeSuggestBindingAtCursor = pointerCoords => {\n const hoveredBindableElement = (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getHoveredElementForBinding)(pointerCoords, this);\n this.setState({\n suggestedBindings: hoveredBindableElement != null ? [hoveredBindableElement] : []\n });\n };\n\n this.maybeSuggestBindingsForLinearElementAtCoords = (linearElement,\n /** scene coords */\n pointerCoords, // During line creation the start binding hasn't been written yet\n // into `linearElement`\n oppositeBindingBoundElement) => {\n if (!pointerCoords.length) {\n return;\n }\n\n const suggestedBindings = pointerCoords.reduce((acc, coords) => {\n const hoveredBindableElement = (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getHoveredElementForBinding)(coords, this);\n\n if (hoveredBindableElement != null && !(0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.isLinearElementSimpleAndAlreadyBound)(linearElement, oppositeBindingBoundElement === null || oppositeBindingBoundElement === void 0 ? void 0 : oppositeBindingBoundElement.id, hoveredBindableElement)) {\n acc.push(hoveredBindableElement);\n }\n\n return acc;\n }, []);\n this.setState({\n suggestedBindings\n });\n };\n\n this.handleInteractiveCanvasRef = canvas => {\n var _a, _b, _c; // canvas is null when unmounting\n\n\n if (canvas !== null) {\n this.interactiveCanvas = canvas; // -----------------------------------------------------------------------\n // NOTE wheel, touchstart, touchend events must be registered outside\n // of react because react binds them them passively (so we can't prevent\n // default on them)\n\n this.interactiveCanvas.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.WHEEL, this.handleWheel);\n this.interactiveCanvas.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.TOUCH_START, this.onTouchStart);\n this.interactiveCanvas.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.TOUCH_END, this.onTouchEnd); // -----------------------------------------------------------------------\n } else {\n (_a = this.interactiveCanvas) === null || _a === void 0 ? void 0 : _a.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.WHEEL, this.handleWheel);\n (_b = this.interactiveCanvas) === null || _b === void 0 ? void 0 : _b.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.TOUCH_START, this.onTouchStart);\n (_c = this.interactiveCanvas) === null || _c === void 0 ? void 0 : _c.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.TOUCH_END, this.onTouchEnd);\n }\n };\n\n this.handleAppOnDrop = async event => {\n var _a, _b, _c, _d;\n\n if (this.props.onDrop) {\n try {\n if ((await this.props.onDrop(event)) === false) {\n return;\n }\n } catch (e) {\n console.error(e);\n }\n } // must be retrieved first, in the same frame\n\n\n const {\n file,\n fileHandle\n } = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.getFileFromEvent)(event);\n const {\n x: sceneX,\n y: sceneY\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)(event, this.state);\n\n try {\n // if image tool not supported, don't show an error here and let it fall\n // through so we still support importing scene data from images. If no\n // scene data encoded, we'll show an error then\n if ((0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.isSupportedImageFile)(file) && this.isToolSupported(\"image\")) {\n // first attempt to decode scene from the image if it's embedded\n // ---------------------------------------------------------------------\n if ((file === null || file === void 0 ? void 0 : file.type) === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.png || (file === null || file === void 0 ? void 0 : file.type) === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.svg) {\n try {\n const scene = await (0,_data__WEBPACK_IMPORTED_MODULE_13__.loadFromBlob)(file, this.state, this.scene.getElementsIncludingDeleted(), fileHandle);\n this.syncActionResult(Object.assign(Object.assign({}, scene), {\n appState: Object.assign(Object.assign({}, scene.appState || this.state), {\n isLoading: false\n }),\n replaceFiles: true,\n storeAction: _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.CAPTURE\n }));\n return;\n } catch (error) {\n // Don't throw for image scene daa\n if (error.name !== \"EncodingError\") {\n throw new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"alerts.couldNotLoadInvalidFile\"));\n }\n }\n } // if no scene is embedded or we fail for whatever reason, fall back\n // to importing as regular image\n // ---------------------------------------------------------------------\n\n\n const imageElement = this.createImageElement({\n sceneX,\n sceneY\n });\n this.insertImageElement(imageElement, file);\n this.initializeImageDimensions(imageElement);\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({\n [imageElement.id]: true\n }, this.state)\n });\n return;\n }\n } catch (error) {\n return this.setState({\n isLoading: false,\n errorMessage: error.message\n });\n }\n\n const libraryJSON = event.dataTransfer.getData(_constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.excalidrawlib);\n\n if (libraryJSON && typeof libraryJSON === \"string\") {\n try {\n const libraryItems = (0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.parseLibraryJSON)(libraryJSON);\n this.addElementsFromPasteOrLibrary({\n elements: (0,_data_library__WEBPACK_IMPORTED_MODULE_14__.distributeLibraryItemsOnSquareGrid)(libraryItems),\n position: event,\n files: null\n });\n } catch (error) {\n this.setState({\n errorMessage: error.message\n });\n }\n\n return;\n }\n\n if (file) {\n // Attempt to parse an excalidraw/excalidrawlib file\n await this.loadFileToCanvas(file, fileHandle);\n }\n\n if ((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) === null || _b === void 0 ? void 0 : _b.includes(\"text/plain\")) {\n const text = (_c = event.dataTransfer) === null || _c === void 0 ? void 0 : _c.getData(\"text\");\n\n if (text && (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_36__.embeddableURLValidator)(text, this.props.validateEmbeddable) && (/^(http|https):\\/\\/[^\\s/$.?#].[^\\s]*$/.test(text) || ((_d = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_36__.getEmbedLink)(text)) === null || _d === void 0 ? void 0 : _d.type) === \"video\")) {\n const embeddable = this.insertEmbeddableElement({\n sceneX,\n sceneY,\n link: (0,_data_url__WEBPACK_IMPORTED_MODULE_47__.normalizeLink)(text)\n });\n\n if (embeddable) {\n this.setState({\n selectedElementIds: {\n [embeddable.id]: true\n }\n });\n }\n }\n }\n };\n\n this.loadFileToCanvas = async (file, fileHandle) => {\n file = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.normalizeFile)(file);\n\n try {\n const elements = this.scene.getElementsIncludingDeleted();\n let ret;\n\n try {\n ret = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.loadSceneOrLibraryFromBlob)(file, this.state, elements, fileHandle);\n } catch (error) {\n const imageSceneDataError = error instanceof _errors__WEBPACK_IMPORTED_MODULE_58__.ImageSceneDataError;\n\n if (imageSceneDataError && error.code === \"IMAGE_NOT_CONTAINS_SCENE_DATA\" && !this.isToolSupported(\"image\")) {\n this.setState({\n isLoading: false,\n errorMessage: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageToolNotSupported\")\n });\n return;\n }\n\n const errorMessage = imageSceneDataError ? (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"alerts.cannotRestoreFromImage\") : (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"alerts.couldNotLoadInvalidFile\");\n this.setState({\n isLoading: false,\n errorMessage\n });\n }\n\n if (!ret) {\n return;\n }\n\n if (ret.type === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.excalidraw) {\n // restore the fractional indices by mutating elements\n (0,_fractionalIndex__WEBPACK_IMPORTED_MODULE_90__.syncInvalidIndices)(elements.concat(ret.data.elements)); // update the store snapshot for old elements, otherwise we would end up with duplicated fractional indices on undo\n\n this.store.updateSnapshot((0,_utils__WEBPACK_IMPORTED_MODULE_35__.arrayToMap)(elements), this.state);\n this.setState({\n isLoading: true\n });\n this.syncActionResult(Object.assign(Object.assign({}, ret.data), {\n appState: Object.assign(Object.assign({}, ret.data.appState || this.state), {\n isLoading: false\n }),\n replaceFiles: true,\n storeAction: _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.CAPTURE\n }));\n } else if (ret.type === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.excalidrawlib) {\n await this.library.updateLibrary({\n libraryItems: file,\n merge: true,\n openLibraryMenu: true\n }).catch(error => {\n console.error(error);\n this.setState({\n errorMessage: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.importLibraryError\")\n });\n });\n }\n } catch (error) {\n this.setState({\n isLoading: false,\n errorMessage: error.message\n });\n }\n };\n\n this.handleCanvasContextMenu = event => {\n event.preventDefault();\n\n if ((\"pointerType\" in event.nativeEvent && event.nativeEvent.pointerType === \"touch\" || \"pointerType\" in event.nativeEvent && event.nativeEvent.pointerType === \"pen\" && // always allow if user uses a pen secondary button\n event.button !== _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.SECONDARY) && this.state.activeTool.type !== \"selection\") {\n return;\n }\n\n const {\n x,\n y\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)(event, this.state);\n const element = this.getElementAtPosition(x, y, {\n preferSelected: true,\n includeLockedElements: true\n });\n const selectedElements = this.scene.getSelectedElements(this.state);\n const isHittingCommonBoundBox = this.isHittingCommonBoundingBoxOfSelectedElements({\n x,\n y\n }, selectedElements);\n const type = element || isHittingCommonBoundBox ? \"element\" : \"canvas\";\n const container = this.excalidrawContainerRef.current;\n const {\n top: offsetTop,\n left: offsetLeft\n } = container.getBoundingClientRect();\n const left = event.clientX - offsetLeft;\n const top = event.clientY - offsetTop;\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"contextMenu\", \"openContextMenu\", type);\n this.setState(Object.assign(Object.assign({}, element && !this.state.selectedElementIds[element.id] ? Object.assign(Object.assign(Object.assign({}, this.state), (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n editingGroupId: this.state.editingGroupId,\n selectedElementIds: {\n [element.id]: true\n }\n }, this.scene.getNonDeletedElements(), this.state, this)), {\n selectedLinearElement: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(element) ? new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(element) : null\n }) : this.state), {\n showHyperlinkPopup: false\n }), () => {\n this.setState({\n contextMenu: {\n top,\n left,\n items: this.getContextMenuItems(type)\n }\n });\n });\n };\n\n this.maybeDragNewGenericElement = (pointerDownState, event) => {\n var _a, _b, _c, _d, _e;\n\n const draggingElement = this.state.draggingElement;\n const pointerCoords = pointerDownState.lastCoords;\n\n if (!draggingElement) {\n return;\n }\n\n if (draggingElement.type === \"selection\" && this.state.activeTool.type !== \"eraser\") {\n (0,_element__WEBPACK_IMPORTED_MODULE_16__.dragNewElement)(draggingElement, this.state.activeTool.type, pointerDownState.origin.x, pointerDownState.origin.y, pointerCoords.x, pointerCoords.y, (0,_utils__WEBPACK_IMPORTED_MODULE_35__.distance)(pointerDownState.origin.x, pointerCoords.x), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.distance)(pointerDownState.origin.y, pointerCoords.y), (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldMaintainAspectRatio)(event), (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldResizeFromCenter)(event));\n } else {\n let [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerCoords.x, pointerCoords.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.state.gridSize);\n const image = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isInitializedImageElement)(draggingElement) && ((_a = this.imageCache.get(draggingElement.fileId)) === null || _a === void 0 ? void 0 : _a.image);\n const aspectRatio = image && !(image instanceof Promise) ? image.width / image.height : null;\n this.maybeCacheReferenceSnapPoints(event, [draggingElement]);\n const {\n snapOffset,\n snapLines\n } = (0,_snapping__WEBPACK_IMPORTED_MODULE_59__.snapNewElement)(draggingElement, this.state, event, {\n x: pointerDownState.originInGrid.x + ((_c = (_b = this.state.originSnapOffset) === null || _b === void 0 ? void 0 : _b.x) !== null && _c !== void 0 ? _c : 0),\n y: pointerDownState.originInGrid.y + ((_e = (_d = this.state.originSnapOffset) === null || _d === void 0 ? void 0 : _d.y) !== null && _e !== void 0 ? _e : 0)\n }, {\n x: gridX - pointerDownState.originInGrid.x,\n y: gridY - pointerDownState.originInGrid.y\n }, this.scene.getNonDeletedElementsMap());\n gridX += snapOffset.x;\n gridY += snapOffset.y;\n this.setState({\n snapLines\n });\n (0,_element__WEBPACK_IMPORTED_MODULE_16__.dragNewElement)(draggingElement, this.state.activeTool.type, pointerDownState.originInGrid.x, pointerDownState.originInGrid.y, gridX, gridY, (0,_utils__WEBPACK_IMPORTED_MODULE_35__.distance)(pointerDownState.originInGrid.x, gridX), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.distance)(pointerDownState.originInGrid.y, gridY), (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isImageElement)(draggingElement) ? !(0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldMaintainAspectRatio)(event) : (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldMaintainAspectRatio)(event), (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldResizeFromCenter)(event), aspectRatio, this.state.originSnapOffset); // highlight elements that are to be added to frames on frames creation\n\n if (this.state.activeTool.type === _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.frame || this.state.activeTool.type === _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.magicframe) {\n this.setState({\n elementsToHighlight: (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getElementsInResizingFrame)(this.scene.getNonDeletedElements(), draggingElement, this.state, this.scene.getNonDeletedElementsMap())\n });\n }\n }\n };\n\n this.maybeHandleResize = (pointerDownState, event) => {\n const selectedElements = this.scene.getSelectedElements(this.state);\n const selectedFrames = selectedElements.filter(element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(element));\n const transformHandleType = pointerDownState.resize.handleType;\n\n if (selectedFrames.length > 0 && transformHandleType === \"rotation\") {\n return false;\n }\n\n this.setState({\n // TODO: rename this state field to \"isScaling\" to distinguish\n // it from the generic \"isResizing\" which includes scaling and\n // rotating\n isResizing: transformHandleType && transformHandleType !== \"rotation\",\n isRotating: transformHandleType === \"rotation\",\n activeEmbeddable: null\n });\n const pointerCoords = pointerDownState.lastCoords;\n let [resizeX, resizeY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerCoords.x - pointerDownState.resize.offset.x, pointerCoords.y - pointerDownState.resize.offset.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.state.gridSize);\n const frameElementsOffsetsMap = new Map();\n selectedFrames.forEach(frame => {\n const elementsInFrame = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getFrameChildren)(this.scene.getNonDeletedElements(), frame.id);\n elementsInFrame.forEach(element => {\n frameElementsOffsetsMap.set(frame.id + element.id, {\n x: element.x - frame.x,\n y: element.y - frame.y\n });\n });\n }); // check needed for avoiding flickering when a key gets pressed\n // during dragging\n\n if (!this.state.selectedElementsAreBeingDragged) {\n const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerCoords.x, pointerCoords.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.state.gridSize);\n const dragOffset = {\n x: gridX - pointerDownState.originInGrid.x,\n y: gridY - pointerDownState.originInGrid.y\n };\n const originalElements = [...pointerDownState.originalElements.values()];\n this.maybeCacheReferenceSnapPoints(event, selectedElements);\n const {\n snapOffset,\n snapLines\n } = (0,_snapping__WEBPACK_IMPORTED_MODULE_59__.snapResizingElements)(selectedElements, (0,_scene__WEBPACK_IMPORTED_MODULE_29__.getSelectedElements)(originalElements, this.state), this.state, event, dragOffset, transformHandleType);\n resizeX += snapOffset.x;\n resizeY += snapOffset.y;\n this.setState({\n snapLines\n });\n }\n\n if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.transformElements)(pointerDownState.originalElements, transformHandleType, selectedElements, this.scene.getElementsMapIncludingDeleted(), (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldRotateWithDiscreteAngle)(event), (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldResizeFromCenter)(event), selectedElements.some(element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isImageElement)(element)) ? !(0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldMaintainAspectRatio)(event) : (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldMaintainAspectRatio)(event), resizeX, resizeY, pointerDownState.resize.center.x, pointerDownState.resize.center.y)) {\n const suggestedBindings = (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getSuggestedBindingsForArrows)(selectedElements, this);\n const elementsToHighlight = new Set();\n selectedFrames.forEach(frame => {\n (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getElementsInResizingFrame)(this.scene.getNonDeletedElements(), frame, this.state, this.scene.getNonDeletedElementsMap()).forEach(element => elementsToHighlight.add(element));\n });\n this.setState({\n elementsToHighlight: [...elementsToHighlight],\n suggestedBindings\n });\n return true;\n }\n\n return false;\n };\n\n this.getContextMenuItems = type => {\n const options = [];\n options.push(_actions__WEBPACK_IMPORTED_MODULE_5__.actionCopyAsPng, _actions__WEBPACK_IMPORTED_MODULE_5__.actionCopyAsSvg); // canvas contextMenu\n // -------------------------------------------------------------------------\n\n if (type === \"canvas\") {\n if (this.state.viewModeEnabled) {\n return [...options, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleGridMode, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleZenMode, _actions_actionToggleViewMode__WEBPACK_IMPORTED_MODULE_40__.actionToggleViewMode, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleStats, _actions_actionCanvas__WEBPACK_IMPORTED_MODULE_55__.actionToggleLaserPointer];\n }\n\n return [_actions_actionClipboard__WEBPACK_IMPORTED_MODULE_53__.actionPaste, _ContextMenu__WEBPACK_IMPORTED_MODULE_37__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionCopyAsPng, _actions__WEBPACK_IMPORTED_MODULE_5__.actionCopyAsSvg, _actions__WEBPACK_IMPORTED_MODULE_5__.copyText, _ContextMenu__WEBPACK_IMPORTED_MODULE_37__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionSelectAll, _actions_actionElementLock__WEBPACK_IMPORTED_MODULE_49__.actionUnlockAllElements, _ContextMenu__WEBPACK_IMPORTED_MODULE_37__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleGridMode, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleObjectsSnapMode, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleZenMode, _actions_actionToggleViewMode__WEBPACK_IMPORTED_MODULE_40__.actionToggleViewMode, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleStats];\n } // element contextMenu\n // -------------------------------------------------------------------------\n\n\n options.push(_actions__WEBPACK_IMPORTED_MODULE_5__.copyText);\n\n if (this.state.viewModeEnabled) {\n return [_actions__WEBPACK_IMPORTED_MODULE_5__.actionCopy, ...options];\n }\n\n return [_ContextMenu__WEBPACK_IMPORTED_MODULE_37__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionCut, _actions__WEBPACK_IMPORTED_MODULE_5__.actionCopy, _actions_actionClipboard__WEBPACK_IMPORTED_MODULE_53__.actionPaste, _actions_actionFrame__WEBPACK_IMPORTED_MODULE_54__.actionSelectAllElementsInFrame, _actions_actionFrame__WEBPACK_IMPORTED_MODULE_54__.actionRemoveAllElementsFromFrame, _ContextMenu__WEBPACK_IMPORTED_MODULE_37__.CONTEXT_MENU_SEPARATOR, ...options, _ContextMenu__WEBPACK_IMPORTED_MODULE_37__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionCopyStyles, _actions__WEBPACK_IMPORTED_MODULE_5__.actionPasteStyles, _ContextMenu__WEBPACK_IMPORTED_MODULE_37__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionGroup, _actions_actionTextAutoResize__WEBPACK_IMPORTED_MODULE_94__.actionTextAutoResize, _actions__WEBPACK_IMPORTED_MODULE_5__.actionUnbindText, _actions__WEBPACK_IMPORTED_MODULE_5__.actionBindText, _actions_actionBoundText__WEBPACK_IMPORTED_MODULE_60__.actionWrapTextInContainer, _actions__WEBPACK_IMPORTED_MODULE_5__.actionUngroup, _ContextMenu__WEBPACK_IMPORTED_MODULE_37__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionAddToLibrary, _ContextMenu__WEBPACK_IMPORTED_MODULE_37__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionSendBackward, _actions__WEBPACK_IMPORTED_MODULE_5__.actionBringForward, _actions__WEBPACK_IMPORTED_MODULE_5__.actionSendToBack, _actions__WEBPACK_IMPORTED_MODULE_5__.actionBringToFront, _ContextMenu__WEBPACK_IMPORTED_MODULE_37__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionFlipHorizontal, _actions__WEBPACK_IMPORTED_MODULE_5__.actionFlipVertical, _ContextMenu__WEBPACK_IMPORTED_MODULE_37__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleLinearEditor, _actions__WEBPACK_IMPORTED_MODULE_5__.actionLink, _actions__WEBPACK_IMPORTED_MODULE_5__.actionDuplicateSelection, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleElementLock, _ContextMenu__WEBPACK_IMPORTED_MODULE_37__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionDeleteSelected];\n };\n\n this.handleWheel = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(event => {\n event.preventDefault();\n\n if (isPanning) {\n return;\n }\n\n const {\n deltaX,\n deltaY\n } = event; // note that event.ctrlKey is necessary to handle pinch zooming\n\n if ( //zsviczian\n (event.metaKey || event.ctrlKey) && !this.state.allowWheelZoom || !(event.metaKey || event.ctrlKey) && this.state.allowWheelZoom) {\n const sign = Math.sign(deltaY);\n const MAX_STEP = _constants__WEBPACK_IMPORTED_MODULE_12__.ZOOM_STEP * 100;\n const absDelta = Math.abs(deltaY);\n let delta = deltaY;\n\n if (absDelta > MAX_STEP) {\n delta = MAX_STEP * sign;\n }\n\n let newZoom = this.state.zoom.value - delta / 100; // increase zoom steps the more zoomed-in we are (applies to >100% only)\n\n newZoom += Math.log10(Math.max(1, this.state.zoom.value)) * -sign * // reduced amplification for small deltas (small movements on a trackpad)\n Math.min(1, absDelta / 20);\n this.translateCanvas(state => Object.assign(Object.assign({}, (0,_scene_zoom__WEBPACK_IMPORTED_MODULE_31__.getStateForZoom)({\n viewportX: this.lastViewportPosition.x,\n viewportY: this.lastViewportPosition.y,\n nextZoom: (0,_scene__WEBPACK_IMPORTED_MODULE_29__.getNormalizedZoom)(newZoom)\n }, state)), {\n shouldCacheIgnoreZoom: true\n }));\n this.resetShouldCacheIgnoreZoomDebounced();\n return;\n } // scroll horizontally when shift pressed\n\n\n if (event.shiftKey) {\n this.translateCanvas(({\n zoom,\n scrollX\n }) => ({\n // on Mac, shift+wheel tends to result in deltaX\n scrollX: scrollX - (deltaY || deltaX) / zoom.value\n }));\n return;\n }\n\n this.translateCanvas(({\n zoom,\n scrollX,\n scrollY\n }) => ({\n scrollX: scrollX - deltaX / zoom.value,\n scrollY: scrollY - deltaY / zoom.value\n }));\n });\n\n this.savePointer = (x, y, button) => {\n var _a, _b;\n\n if (!x || !y) {\n return;\n }\n\n const {\n x: sceneX,\n y: sceneY\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)({\n clientX: x,\n clientY: y\n }, this.state);\n\n if (isNaN(sceneX) || isNaN(sceneY)) {// sometimes the pointer goes off screen\n }\n\n const pointer = {\n x: sceneX,\n y: sceneY,\n tool: this.state.activeTool.type === \"laser\" ? \"laser\" : \"pointer\"\n };\n (_b = (_a = this.props).onPointerUpdate) === null || _b === void 0 ? void 0 : _b.call(_a, {\n pointer,\n button,\n pointersMap: gesture.pointers\n });\n };\n\n this.resetShouldCacheIgnoreZoomDebounced = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.debounce)(() => {\n if (!this.unmounted) {\n this.setState({\n shouldCacheIgnoreZoom: false\n });\n }\n }, 300);\n\n this.updateDOMRect = cb => {\n var _a;\n\n if ((_a = this.excalidrawContainerRef) === null || _a === void 0 ? void 0 : _a.current) {\n const excalidrawContainer = this.excalidrawContainerRef.current;\n const {\n width,\n height,\n left: offsetLeft,\n top: offsetTop\n } = excalidrawContainer.getBoundingClientRect();\n const {\n width: currentWidth,\n height: currentHeight,\n offsetTop: currentOffsetTop,\n offsetLeft: currentOffsetLeft\n } = this.state;\n\n if (width === currentWidth && height === currentHeight && offsetLeft === currentOffsetLeft && offsetTop === currentOffsetTop) {\n if (cb) {\n cb();\n }\n\n return;\n } //zsviczian\n\n\n if (width === 0 || height === 0) {\n if (cb) {\n cb();\n }\n\n return;\n }\n\n this.setState({\n width,\n height,\n offsetLeft,\n offsetTop\n }, () => {\n cb && cb();\n });\n }\n };\n\n this.refresh = () => {\n this.setState(Object.assign({}, this.getCanvasOffsets()));\n };\n\n const defaultAppState = (0,_appState__WEBPACK_IMPORTED_MODULE_10__.getDefaultAppState)();\n const {\n excalidrawAPI,\n viewModeEnabled = false,\n zenModeEnabled = false,\n gridModeEnabled = false,\n objectsSnapModeEnabled = false,\n theme = defaultAppState.theme,\n initState,\n //zsviczian\n obsidianHostPlugin,\n //zsviczian\n name = `${(0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"labels.untitled\")}-${(0,_utils__WEBPACK_IMPORTED_MODULE_35__.getDateTime)()}`\n } = props;\n this.state = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaultAppState), {\n theme,\n isLoading: true\n }), this.getCanvasOffsets()), {\n viewModeEnabled,\n zenModeEnabled,\n objectsSnapModeEnabled,\n gridSize: gridModeEnabled ? _constants__WEBPACK_IMPORTED_MODULE_12__.GRID_SIZE : null,\n name,\n width: window.innerWidth,\n height: window.innerHeight\n }), initState !== null && initState !== void 0 ? initState : {});\n this.id = (0,nanoid__WEBPACK_IMPORTED_MODULE_96__.nanoid)();\n hostPlugin = obsidianHostPlugin; //zsviczian\n\n this.library = new _data_library__WEBPACK_IMPORTED_MODULE_14__[\"default\"](this);\n this.actionManager = new _actions_manager__WEBPACK_IMPORTED_MODULE_7__.ActionManager(this.syncActionResult, () => this.state, () => this.scene.getElementsIncludingDeleted(), this);\n this.scene = new _scene_Scene__WEBPACK_IMPORTED_MODULE_30__[\"default\"]();\n this.canvas = document.createElement(\"canvas\");\n this.rc = roughjs_bin_rough__WEBPACK_IMPORTED_MODULE_3__[\"default\"].canvas(this.canvas);\n this.renderer = new _scene_Renderer__WEBPACK_IMPORTED_MODULE_66__.Renderer(this.scene);\n this.store = new _store__WEBPACK_IMPORTED_MODULE_80__.Store();\n this.history = new _history__WEBPACK_IMPORTED_MODULE_24__.History();\n\n if (excalidrawAPI) {\n const api = {\n updateScene: this.updateScene,\n updateLibrary: this.library.updateLibrary,\n addFiles: this.addFiles,\n resetScene: this.resetScene,\n getSceneElementsIncludingDeleted: this.getSceneElementsIncludingDeleted,\n history: {\n clear: this.resetHistory\n },\n scrollToContent: this.scrollToContent,\n zoomToFit: this.zoomToFit,\n startLineEditor: this.startLineEditor,\n getSceneElements: this.getSceneElements,\n getAppState: () => this.state,\n getFiles: () => this.files,\n getName: this.getName,\n registerAction: action => {\n this.actionManager.registerAction(action);\n },\n refresh: this.refresh,\n setToast: this.setToast,\n updateContainerSize: this.updateContainerSize,\n id: this.id,\n setLocalFont: this.setLocalFont,\n selectElements: this.selectElements,\n sendBackward: this.sendBackward,\n bringForward: this.bringForward,\n sendToBack: this.sendToBack,\n bringToFront: this.bringToFront,\n setMobileModeAllowed: this.setMobileModeAllowed,\n setActiveTool: this.setActiveTool,\n setCursor: this.setCursor,\n resetCursor: this.resetCursor,\n updateFrameRendering: this.updateFrameRendering,\n toggleSidebar: this.toggleSidebar,\n getHTMLIFrameElement: id => this.getHTMLIFrameElement(id),\n onChange: cb => this.onChangeEmitter.on(cb),\n onPointerDown: cb => this.onPointerDownEmitter.on(cb),\n onPointerUp: cb => this.onPointerUpEmitter.on(cb),\n onScrollChange: cb => this.onScrollChangeEmitter.on(cb),\n onUserFollow: cb => this.onUserFollowEmitter.on(cb)\n };\n\n if (typeof excalidrawAPI === \"function\") {\n excalidrawAPI(api);\n } else {\n console.error(\"excalidrawAPI should be a function!\");\n }\n }\n\n this.excalidrawContainerValue = {\n container: this.excalidrawContainerRef.current,\n id: this.id\n };\n this.fonts = new _scene_Fonts__WEBPACK_IMPORTED_MODULE_50__.Fonts({\n scene: this.scene\n });\n this.history = new _history__WEBPACK_IMPORTED_MODULE_24__.History();\n this.actionManager.registerAll(_actions_register__WEBPACK_IMPORTED_MODULE_8__.actions);\n this.actionManager.registerAction((0,_actions_actionHistory__WEBPACK_IMPORTED_MODULE_6__.createUndoAction)(this.history, this.store));\n this.actionManager.registerAction((0,_actions_actionHistory__WEBPACK_IMPORTED_MODULE_6__.createRedoAction)(this.history, this.store));\n }\n\n onWindowMessage(event) {\n if (event.origin !== \"https://player.vimeo.com\" && event.origin !== \"https://www.youtube.com\") {\n return;\n }\n\n let data = null;\n\n try {\n data = JSON.parse(event.data);\n } catch (e) {}\n\n if (!data) {\n return;\n }\n\n switch (event.origin) {\n case \"https://player.vimeo.com\":\n //Allowing for multiple instances of Excalidraw running in the window\n if (data.method === \"paused\") {\n let source = null;\n const iframes = document.body.querySelectorAll(\"iframe.excalidraw__embeddable\");\n\n if (!iframes) {\n break;\n }\n\n for (const iframe of iframes) {\n if (iframe.contentWindow === event.source) {\n source = iframe.contentWindow;\n }\n }\n\n source === null || source === void 0 ? void 0 : source.postMessage(JSON.stringify({\n method: data.value ? \"play\" : \"pause\",\n value: true\n }), \"*\");\n }\n\n break;\n\n case \"https://www.youtube.com\":\n if (data.event === \"infoDelivery\" && data.info && data.id && typeof data.info.playerState === \"number\") {\n const id = data.id;\n const playerState = data.info.playerState;\n\n if (Object.values(_constants__WEBPACK_IMPORTED_MODULE_12__.YOUTUBE_STATES).includes(playerState)) {\n YOUTUBE_VIDEO_STATES.set(id, playerState);\n }\n }\n\n break;\n }\n }\n\n cacheEmbeddableRef(element, ref) {\n if (ref) {\n this.iFrameRefs.set(element.id, ref);\n }\n }\n\n getHTMLIFrameElement(element) {\n if (typeof element === \"string\") {\n //zsviczian\n return this.iFrameRefs.get(element);\n }\n\n return this.iFrameRefs.get(element.id);\n }\n\n handleEmbeddableCenterClick(element) {\n var _a, _b, _c, _d;\n\n if (((_a = this.state.activeEmbeddable) === null || _a === void 0 ? void 0 : _a.element) === element && ((_b = this.state.activeEmbeddable) === null || _b === void 0 ? void 0 : _b.state) === \"active\") {\n return;\n } // The delay serves two purposes\n // 1. To prevent first click propagating to iframe on mobile,\n // else the click will immediately start and stop the video\n // 2. If the user double clicks the frame center to activate it\n // without the delay youtube will immediately open the video\n // in fullscreen mode\n\n\n setTimeout(() => {\n this.setState({\n activeEmbeddable: {\n element,\n state: \"active\"\n },\n selectedElementIds: {\n [element.id]: true\n },\n draggingElement: null,\n selectionElement: null\n });\n }, 100);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(element)) {\n return;\n }\n\n const iframe = this.getHTMLIFrameElement(element);\n\n if (!(iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow)) {\n return;\n }\n\n if (iframe.src.includes(\"youtube\")) {\n const state = YOUTUBE_VIDEO_STATES.get(element.id);\n\n if (!state) {\n YOUTUBE_VIDEO_STATES.set(element.id, _constants__WEBPACK_IMPORTED_MODULE_12__.YOUTUBE_STATES.UNSTARTED);\n iframe.contentWindow.postMessage(JSON.stringify({\n event: \"listening\",\n id: element.id\n }), \"*\");\n }\n\n switch (state) {\n case _constants__WEBPACK_IMPORTED_MODULE_12__.YOUTUBE_STATES.PLAYING:\n case _constants__WEBPACK_IMPORTED_MODULE_12__.YOUTUBE_STATES.BUFFERING:\n (_c = iframe.contentWindow) === null || _c === void 0 ? void 0 : _c.postMessage(JSON.stringify({\n event: \"command\",\n func: \"pauseVideo\",\n args: \"\"\n }), \"*\");\n break;\n\n default:\n (_d = iframe.contentWindow) === null || _d === void 0 ? void 0 : _d.postMessage(JSON.stringify({\n event: \"command\",\n func: \"playVideo\",\n args: \"\"\n }), \"*\");\n }\n }\n\n if (iframe.src.includes(\"player.vimeo.com\")) {\n iframe.contentWindow.postMessage(JSON.stringify({\n method: \"paused\" //video play/pause in onWindowMessage handler\n\n }), \"*\");\n }\n }\n\n isIframeLikeElementCenter(el, event, sceneX, sceneY) {\n var _a, _b;\n\n return el && !event.altKey && !event.shiftKey && !event.metaKey && !event.ctrlKey && (((_a = this.state.activeEmbeddable) === null || _a === void 0 ? void 0 : _a.element) !== el || ((_b = this.state.activeEmbeddable) === null || _b === void 0 ? void 0 : _b.state) === \"hover\" || !this.state.activeEmbeddable) && sceneX >= el.x + el.width / 3 && sceneX <= el.x + 2 * el.width / 3 && sceneY >= el.y + el.height / 3 && sceneY <= el.y + 2 * el.height / 3;\n }\n\n renderEmbeddables() {\n const scale = this.state.zoom.value;\n const normalizedWidth = this.state.width;\n const normalizedHeight = this.state.height;\n const embeddableElements = this.scene.getNonDeletedElements().filter(el => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(el) && this.embedsValidationStatus.get(el.id) === true || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(el));\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n children: embeddableElements.map(el => {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;\n\n const {\n x,\n y\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.sceneCoordsToViewportCoords)({\n sceneX: el.x,\n sceneY: el.y\n }, this.state);\n const isVisible = (0,_element_sizeHelpers__WEBPACK_IMPORTED_MODULE_27__.isElementInViewport)(el, normalizedWidth, normalizedHeight, this.state, this.scene.getNonDeletedElementsMap());\n const hasBeenInitialized = this.initializedEmbeds.has(el.id);\n\n if (isVisible && !hasBeenInitialized) {\n this.initializedEmbeds.add(el.id);\n }\n\n const shouldRender = isVisible || hasBeenInitialized;\n\n if (!shouldRender) {\n return null;\n }\n\n let src;\n const embedLink = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_36__.getEmbedLink)((0,_data_url__WEBPACK_IMPORTED_MODULE_47__.toValidURL)(el.link || \"\")); //zsviczian\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(el)) {\n src = null;\n const data = ((_b = (_a = el.customData) === null || _a === void 0 ? void 0 : _a.generationData) !== null && _b !== void 0 ? _b : this.magicGenerations.get(el.id)) || {\n status: \"error\",\n message: \"No generation data\",\n code: \"ERR_NO_GENERATION_DATA\"\n };\n\n if (data.status === \"done\") {\n const html = data.html;\n src = {\n intrinsicSize: {\n w: el.width,\n h: el.height\n },\n type: \"document\",\n srcdoc: () => {\n return html;\n }\n };\n } else if (data.status === \"pending\") {\n src = {\n intrinsicSize: {\n w: el.width,\n h: el.height\n },\n type: \"document\",\n srcdoc: () => {\n return (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_36__.createSrcDoc)(`\n <style>\n html, body {\n width: 100%;\n height: 100%;\n color: ${this.state.theme === _constants__WEBPACK_IMPORTED_MODULE_12__.THEME.DARK ? \"white\" : \"black\"};\n }\n body {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 1rem;\n }\n\n .Spinner {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: auto;\n margin-right: auto;\n }\n\n .Spinner svg {\n animation: rotate 1.6s linear infinite;\n transform-origin: center center;\n width: 40px;\n height: 40px;\n }\n\n .Spinner circle {\n stroke: currentColor;\n animation: dash 1.6s linear 0s infinite;\n stroke-linecap: round;\n }\n\n @keyframes rotate {\n 100% {\n transform: rotate(360deg);\n }\n }\n\n @keyframes dash {\n 0% {\n stroke-dasharray: 1, 300;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 150, 300;\n stroke-dashoffset: -200;\n }\n 100% {\n stroke-dasharray: 1, 300;\n stroke-dashoffset: -280;\n }\n }\n </style>\n <div class=\"Spinner\">\n <svg\n viewBox=\"0 0 100 100\"\n >\n <circle\n cx=\"50\"\n cy=\"50\"\n r=\"46\"\n stroke-width=\"8\"\n fill=\"none\"\n stroke-miter-limit=\"10\"\n />\n </svg>\n </div>\n <div>Generating...</div>\n `);\n }\n };\n } else {\n let message;\n\n if (data.code === \"ERR_GENERATION_INTERRUPTED\") {\n message = \"Generation was interrupted...\";\n } else {\n message = data.message || \"Generation failed\";\n }\n\n src = {\n intrinsicSize: {\n w: el.width,\n h: el.height\n },\n type: \"document\",\n srcdoc: () => {\n return (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_36__.createSrcDoc)(`\n <style>\n html, body {\n height: 100%;\n }\n body {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n color: ${_colors__WEBPACK_IMPORTED_MODULE_74__.COLOR_PALETTE.red[3]};\n }\n h1, h3 {\n margin-top: 0;\n margin-bottom: 0.5rem;\n }\n </style>\n <h1>Error!</h1>\n <h3>${message}</h3>\n `);\n }\n };\n }\n } else {\n src = embedLink; //zsviczian getEmbedLink(toValidURL(el.link || \"\"));\n }\n\n const isActive = ((_c = this.state.activeEmbeddable) === null || _c === void 0 ? void 0 : _c.element) === el && ((_d = this.state.activeEmbeddable) === null || _d === void 0 ? void 0 : _d.state) === \"active\";\n const isHovered = ((_e = this.state.activeEmbeddable) === null || _e === void 0 ? void 0 : _e.element) === el && ((_f = this.state.activeEmbeddable) === null || _f === void 0 ? void 0 : _f.state) === \"hover\";\n const isWebview = //zsviczian\n !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(el) && this.props.renderWebview && (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) !== \"document\" && !((_h = (_g = embedLink === null || embedLink === void 0 ? void 0 : embedLink.link) === null || _g === void 0 ? void 0 : _g.startsWith) === null || _h === void 0 ? void 0 : _h.call(_g, \"https://player.vimeo.com\")); // Modify the scale based on el.scale property\n\n const [xScale, yScale] = (_j = el.scale) !== null && _j !== void 0 ? _j : [1, 1]; //zsviczian\n\n const scaledTransform = `scale(${scale * xScale}, ${scale * yScale})`;\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(\"excalidraw__embeddable-container\", {\n \"is-hovered\": isHovered\n }),\n style: {\n transform: isVisible ? `translate(${x - this.state.offsetLeft}px, ${y - this.state.offsetTop}px) ${scaledTransform}` : \"none\",\n display: isVisible ? \"block\" : \"none\",\n opacity: (0,_renderer_renderElement__WEBPACK_IMPORTED_MODULE_85__.getRenderOpacity)(el, (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getContainingFrame)(el, this.scene.getNonDeletedElementsMap()), this.elementsPendingErasure),\n [\"--embeddable-radius\"]: `${(0,_math__WEBPACK_IMPORTED_MODULE_28__.getCornerRadius)(Math.min(el.width, el.height), el) / xScale //zsviczian\n }px`\n }\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n //this is a hack that addresses isse with embedded excalidraw.com embeddable\n //https://github.com/excalidraw/excalidraw/pull/6691#issuecomment-1607383938\n\n /*ref={(ref) => {\r\n if (!this.excalidrawContainerRef.current) {\r\n return;\r\n }\r\n const container = this.excalidrawContainerRef.current;\r\n const sh = container.scrollHeight;\r\n const ch = container.clientHeight;\r\n if (sh !== ch) {\r\n container.style.height = `${sh}px`;\r\n setTimeout(() => {\r\n container.style.height = `100%`;\r\n });\r\n }\r\n }}*/\n className: \"excalidraw__embeddable-container__inner\",\n style: {\n width: isVisible ? `${el.width / xScale}px` : 0,\n height: isVisible ? `${el.height / yScale}px` : 0,\n transform: isVisible ? `rotate(${el.angle}rad)` : \"none\",\n pointerEvents: isActive ? _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.enabled : _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.disabled\n }\n }, {\n children: [isHovered && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: \"excalidraw__embeddable-hint\"\n }, {\n children: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"buttons.embeddableInteractionButton\")\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: \"excalidraw__embeddable__outer\",\n style: {\n padding: `${el.strokeWidth / (4 * el.scale[0])}px` //zsviczian MDEmbeddable round border cutoff issue\n\n }\n }, {\n children: (_m = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(el) ? (_l = (_k = this.props).renderEmbeddable) === null || _l === void 0 ? void 0 : _l.call(_k, el, this.state) //zsviczian\n : null) !== null && _m !== void 0 ? _m : isWebview ? //zsviczian\n (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"webview\", {\n ref: ref => this.cacheEmbeddableRef(el, ref),\n className: \"excalidraw__embeddable\",\n src: (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) === \"generic\" || (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) === \"video\" ? embedLink.link : \"\",\n title: \"Excalidraw Embedded Content\",\n allowFullScreen: true\n }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"iframe\", {\n ref: ref => this.cacheEmbeddableRef(el, ref),\n className: \"excalidraw__embeddable\",\n srcDoc: (src === null || src === void 0 ? void 0 : src.type) === \"document\" ? src.srcdoc(this.state.theme) : undefined,\n src: (src === null || src === void 0 ? void 0 : src.type) !== \"document\" ? (_o = src === null || src === void 0 ? void 0 : src.link) !== null && _o !== void 0 ? _o : \"\" : undefined,\n // https://stackoverflow.com/q/18470015\n scrolling: \"no\",\n referrerPolicy: \"no-referrer-when-downgrade\",\n title: \"Excalidraw Embedded Content\",\n allow: \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\",\n allowFullScreen: true,\n sandbox: `${((_p = src === null || src === void 0 ? void 0 : src.sandbox) === null || _p === void 0 ? void 0 : _p.allowSameOrigin) ? \"allow-same-origin\" : \"\"} allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-downloads`\n })\n }))]\n }))\n }), el.id);\n })\n });\n }\n\n toggleOverscrollBehavior(event) {\n // when pointer inside editor, disable overscroll behavior to prevent\n // panning to trigger history back/forward on MacOS Chrome\n document.documentElement.style.overscrollBehaviorX = event.type === \"pointerenter\" ? \"none\" : \"auto\";\n }\n\n render() {\n var _a, _b, _c, _d, _e, _f, _g, _h;\n\n const selectedElements = this.scene.getSelectedElements(this.state);\n const {\n renderTopRightUI,\n renderCustomStats\n } = this.props;\n const sceneNonce = this.scene.getSceneNonce();\n const {\n elementsMap,\n visibleElements\n } = this.renderer.getRenderableElements({\n sceneNonce,\n zoom: this.state.zoom,\n offsetLeft: this.state.offsetLeft,\n offsetTop: this.state.offsetTop,\n scrollX: this.state.scrollX,\n scrollY: this.state.scrollY,\n height: this.state.height,\n width: this.state.width,\n editingElement: this.state.editingElement,\n pendingImageElementId: this.state.pendingImageElementId\n });\n const allElementsMap = this.scene.getNonDeletedElementsMap();\n const shouldBlockPointerEvents = !(this.state.editingElement && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(this.state.editingElement)) && (this.state.selectionElement || this.state.draggingElement || this.state.resizingElement || this.state.activeTool.type === \"laser\" && // technically we can just test on this once we make it more safe\n this.state.cursorButton === \"down\" || this.state.editingElement && !(0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(this.state.editingElement));\n const firstSelectedElement = selectedElements[0];\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(\"excalidraw excalidraw-container\", {\n \"excalidraw--view-mode\": this.state.viewModeEnabled,\n \"excalidraw--mobile\": this.device.editor.isMobile || !(this.state.viewModeEnabled || this.state.zenModeEnabled) && this.state.trayModeEnabled //zsviczian\n\n }),\n style: Object.assign({\n //zsviczian\n [\"--ui-pointerEvents\"]: shouldBlockPointerEvents ? _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.disabled : _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.enabled\n }, this.state.dynamicStyle),\n ref: this.excalidrawContainerRef,\n onDrop: this.handleAppOnDrop,\n tabIndex: 0,\n onKeyDown: this.props.handleKeyboardGlobally ? undefined : this.onKeyDown,\n onPointerEnter: this.toggleOverscrollBehavior,\n onPointerLeave: this.toggleOverscrollBehavior\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(AppContext.Provider, Object.assign({\n value: this\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(AppPropsContext.Provider, Object.assign({\n value: this.props\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ExcalidrawContainerContext.Provider, Object.assign({\n value: this.excalidrawContainerValue\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(DeviceContext.Provider, Object.assign({\n value: this.device\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ExcalidrawSetAppStateContext.Provider, Object.assign({\n value: this.setAppState\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ExcalidrawAppStateContext.Provider, Object.assign({\n value: this.state\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(ExcalidrawElementsContext.Provider, Object.assign({\n value: this.scene.getNonDeletedElements()\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(ExcalidrawActionManagerContext.Provider, Object.assign({\n value: this.actionManager\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_LayerUI__WEBPACK_IMPORTED_MODULE_38__[\"default\"], Object.assign({\n canvas: this.canvas,\n appState: this.state,\n files: this.files,\n setAppState: this.setAppState,\n actionManager: this.actionManager,\n elements: this.scene.getNonDeletedElements(),\n onLockToggle: this.toggleLock,\n onPenModeToggle: this.togglePenMode,\n onHandToolToggle: this.onHandToolToggle,\n langCode: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.getLanguage)().code,\n renderTopRightUI: renderTopRightUI,\n renderCustomStats: renderCustomStats,\n showExitZenModeBtn: typeof ((_a = this.props) === null || _a === void 0 ? void 0 : _a.zenModeEnabled) === \"undefined\" && this.state.zenModeEnabled,\n UIOptions: this.props.UIOptions,\n onExportImage: this.onExportImage,\n renderWelcomeScreen: !this.state.isLoading && this.state.showWelcomeScreen && this.state.activeTool.type === \"selection\" && !this.state.zenModeEnabled && !this.scene.getElementsIncludingDeleted().length,\n app: this,\n isCollaborating: this.props.isCollaborating,\n openAIKey: this.OPENAI_KEY,\n isOpenAIKeyPersisted: this.OPENAI_KEY_IS_PERSISTED,\n onOpenAIAPIKeyChange: this.onOpenAIKeyChange,\n onMagicSettingsConfirm: this.onMagicSettingsConfirm\n }, {\n children: this.props.children\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n className: \"excalidraw-textEditorContainer\"\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n className: \"excalidraw-contextMenuContainer\"\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n className: \"excalidraw-eye-dropper-container\"\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_SVGLayer__WEBPACK_IMPORTED_MODULE_68__.SVGLayer, {\n trails: [this.laserTrails, this.eraserTrail]\n }), selectedElements.length === 1 && this.state.showHyperlinkPopup && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_hyperlink_Hyperlink__WEBPACK_IMPORTED_MODULE_46__.Hyperlink, {\n element: firstSelectedElement,\n elementsMap: allElementsMap,\n setAppState: this.setAppState,\n onLinkOpen: this.props.onLinkOpen,\n setToast: this.setToast,\n updateEmbedValidationStatus: this.updateEmbedValidationStatus\n }, firstSelectedElement.id), this.props.aiEnabled !== false && selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isMagicFrameElement)(firstSelectedElement) && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_element_ElementCanvasButtons__WEBPACK_IMPORTED_MODULE_71__.ElementCanvasButtons, Object.assign({\n element: firstSelectedElement,\n elementsMap: elementsMap\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_MagicButton__WEBPACK_IMPORTED_MODULE_75__.ElementCanvasButton, {\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"labels.convertToCode\"),\n icon: _icons__WEBPACK_IMPORTED_MODULE_76__.MagicIcon,\n checked: false,\n onChange: () => this.onMagicFrameGenerate(firstSelectedElement, \"button\")\n })\n })), selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(firstSelectedElement) && ((_c = (_b = firstSelectedElement.customData) === null || _b === void 0 ? void 0 : _b.generationData) === null || _c === void 0 ? void 0 : _c.status) === \"done\" && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_element_ElementCanvasButtons__WEBPACK_IMPORTED_MODULE_71__.ElementCanvasButtons, Object.assign({\n element: firstSelectedElement,\n elementsMap: elementsMap\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_MagicButton__WEBPACK_IMPORTED_MODULE_75__.ElementCanvasButton, {\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"labels.copySource\"),\n icon: _icons__WEBPACK_IMPORTED_MODULE_76__.copyIcon,\n checked: false,\n onChange: () => this.onIframeSrcCopy(firstSelectedElement)\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_MagicButton__WEBPACK_IMPORTED_MODULE_75__.ElementCanvasButton, {\n title: \"Enter fullscreen\",\n icon: _icons__WEBPACK_IMPORTED_MODULE_76__.fullscreenIcon,\n checked: false,\n onChange: () => {\n const iframe = this.getHTMLIFrameElement(firstSelectedElement);\n\n if (iframe) {\n try {\n iframe.requestFullscreen();\n this.setState({\n activeEmbeddable: {\n element: firstSelectedElement,\n state: \"active\"\n },\n selectedElementIds: {\n [firstSelectedElement.id]: true\n },\n draggingElement: null,\n selectionElement: null\n });\n } catch (err) {\n console.warn(err);\n this.setState({\n errorMessage: \"Couldn't enter fullscreen\"\n });\n }\n }\n }\n })]\n })), this.state.toast !== null && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Toast__WEBPACK_IMPORTED_MODULE_39__.Toast, {\n message: this.state.toast.message,\n onClose: () => this.setToast(null),\n duration: this.state.toast.duration,\n closable: this.state.toast.closable\n }), this.state.contextMenu && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ContextMenu__WEBPACK_IMPORTED_MODULE_37__.ContextMenu, {\n items: this.state.contextMenu.items,\n top: this.state.contextMenu.top,\n left: this.state.contextMenu.left,\n actionManager: this.actionManager,\n onClose: callback => {\n this.setState({\n contextMenu: null\n }, () => {\n this.focusContainer();\n callback === null || callback === void 0 ? void 0 : callback();\n });\n }\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_canvases__WEBPACK_IMPORTED_MODULE_65__.StaticCanvas, {\n canvas: this.canvas,\n rc: this.rc,\n elementsMap: elementsMap,\n allElementsMap: allElementsMap,\n visibleElements: visibleElements,\n sceneNonce: sceneNonce,\n selectionNonce: (_d = this.state.selectionElement) === null || _d === void 0 ? void 0 : _d.versionNonce,\n scale: window.devicePixelRatio,\n appState: this.state,\n renderConfig: {\n imageCache: this.imageCache,\n isExporting: false,\n renderGrid: true,\n canvasBackgroundColor: this.state.viewBackgroundColor,\n embedsValidationStatus: this.embedsValidationStatus,\n elementsPendingErasure: this.elementsPendingErasure\n }\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_canvases__WEBPACK_IMPORTED_MODULE_65__.InteractiveCanvas, {\n containerRef: this.excalidrawContainerRef,\n canvas: this.interactiveCanvas,\n elementsMap: elementsMap,\n visibleElements: visibleElements,\n selectedElements: selectedElements,\n sceneNonce: sceneNonce,\n selectionNonce: (_e = this.state.selectionElement) === null || _e === void 0 ? void 0 : _e.versionNonce,\n scale: window.devicePixelRatio,\n appState: this.state,\n device: this.device,\n renderInteractiveSceneCallback: this.renderInteractiveSceneCallback,\n handleCanvasRef: this.handleInteractiveCanvasRef,\n onContextMenu: this.handleCanvasContextMenu,\n onPointerMove: this.handleCanvasPointerMove,\n onPointerUp: this.handleCanvasPointerUp,\n onPointerCancel: this.removePointer,\n onTouchMove: this.handleTouchMove,\n onPointerDown: this.handleCanvasPointerDown,\n onDoubleClick: this.handleCanvasDoubleClick\n }), this.state.userToFollow && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_FollowMode_FollowMode__WEBPACK_IMPORTED_MODULE_78__[\"default\"], {\n width: this.state.width,\n height: this.state.height,\n userToFollow: this.state.userToFollow,\n onDisconnect: this.maybeUnfollowRemoteUser\n }), this.renderFrameNames(), ((_f = this.state.activeEmbeddable) === null || _f === void 0 ? void 0 : _f.state) === \"active\" && ( //zsviczian\n (_h = (_g = this.props).renderEmbeddableMenu) === null || _h === void 0 ? void 0 : _h.call(_g, this.state))]\n })), this.renderEmbeddables()]\n }))\n }))\n }))\n }))\n }))\n }))\n }))\n }));\n }\n\n getTextFromElements(elements) {\n const text = elements.reduce((acc, element) => {\n if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(element)) {\n acc.push(element.text);\n }\n\n return acc;\n }, []).join(\"\\n\\n\");\n return text;\n }\n\n async onMagicFrameGenerate(magicFrame, source) {\n var _a;\n\n if (!this.OPENAI_KEY) {\n this.setToast({\n message: \"You must first configure your OpenAI API key in plugin settings\",\n duration: 5000\n });\n return;\n this.setState({\n openDialog: {\n name: \"settings\",\n tab: \"diagram-to-code\",\n source: \"generation\"\n }\n });\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"generate (missing key)\", \"d2c\");\n return;\n }\n\n const magicFrameChildren = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getElementsOverlappingFrame)(this.scene.getNonDeletedElements(), magicFrame).filter(el => !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isMagicFrameElement)(el));\n\n if (!magicFrameChildren.length) {\n if (source === \"button\") {\n this.setState({\n errorMessage: \"Cannot generate from an empty frame\"\n });\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"generate (no-children)\", \"d2c\");\n } else {\n this.setActiveTool({\n type: \"magicframe\"\n });\n }\n\n return;\n }\n\n const frameElement = this.insertIframeElement({\n sceneX: magicFrame.x + magicFrame.width + 30,\n sceneY: magicFrame.y,\n width: magicFrame.width,\n height: magicFrame.height\n });\n\n if (!frameElement) {\n return;\n }\n\n this.updateMagicGeneration({\n frameElement,\n data: {\n status: \"pending\"\n }\n });\n this.setState({\n selectedElementIds: {\n [frameElement.id]: true\n }\n });\n const blob = await (0,_utils_export__WEBPACK_IMPORTED_MODULE_73__.exportToBlob)({\n elements: this.scene.getNonDeletedElements(),\n appState: Object.assign(Object.assign({}, this.state), {\n exportBackground: true,\n viewBackgroundColor: this.state.viewBackgroundColor\n }),\n exportingFrame: magicFrame,\n files: this.files\n });\n const dataURL = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.getDataURL)(blob);\n const textFromFrameChildren = this.getTextFromElements(magicFrameChildren);\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"generate (start)\", \"d2c\");\n const result = await (0,_data_magic__WEBPACK_IMPORTED_MODULE_72__.diagramToHTML)({\n image: dataURL,\n apiKey: this.OPENAI_KEY,\n text: textFromFrameChildren,\n theme: this.state.theme\n });\n\n if (!result.ok) {\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"generate (failed)\", \"d2c\");\n console.error(result.error);\n this.updateMagicGeneration({\n frameElement,\n data: {\n status: \"error\",\n code: \"ERR_OAI\",\n message: ((_a = result.error) === null || _a === void 0 ? void 0 : _a.message) || \"Unknown error during generation\"\n }\n });\n return;\n }\n\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"generate (success)\", \"d2c\");\n\n if (result.choices[0].message.content == null) {\n this.updateMagicGeneration({\n frameElement,\n data: {\n status: \"error\",\n code: \"ERR_OAI\",\n message: \"Nothing genereated :(\"\n }\n });\n return;\n }\n\n const message = result.choices[0].message.content;\n const html = message.slice(message.indexOf(\"<!DOCTYPE html>\"), message.indexOf(\"</html>\") + \"</html>\".length);\n this.updateMagicGeneration({\n frameElement,\n data: {\n status: \"done\",\n html\n }\n });\n }\n\n onIframeSrcCopy(element) {\n var _a, _b;\n\n if (((_b = (_a = element.customData) === null || _a === void 0 ? void 0 : _a.generationData) === null || _b === void 0 ? void 0 : _b.status) === \"done\") {\n (0,_clipboard__WEBPACK_IMPORTED_MODULE_11__.copyTextToSystemClipboard)(element.customData.generationData.html);\n this.setToast({\n message: \"copied to clipboard\",\n closable: false,\n duration: 1500\n });\n }\n } //zsviczian - ugly hack\n\n\n get OPENAI_KEY() {\n var _a;\n\n return (_a = hostPlugin === null || hostPlugin === void 0 ? void 0 : hostPlugin.settings) === null || _a === void 0 ? void 0 : _a.openAIAPIToken;\n }\n\n set OPENAI_KEY(value) {\n return;\n }\n\n async componentDidMount() {\n var _a;\n\n this.unmounted = false;\n this.excalidrawContainerValue.container = this.excalidrawContainerRef.current;\n\n if (\"development\" === _constants__WEBPACK_IMPORTED_MODULE_12__.ENV.TEST || \"development\" !== \"production\") {\n const setState = this.setState.bind(this);\n Object.defineProperties(window.h, {\n state: {\n configurable: true,\n get: () => {\n return this.state;\n }\n },\n setState: {\n configurable: true,\n value: (...args) => {\n return this.setState(...args);\n }\n },\n app: {\n configurable: true,\n value: this\n },\n history: {\n configurable: true,\n value: this.history\n },\n store: {\n configurable: true,\n value: this.store\n }\n });\n }\n\n this.store.onStoreIncrementEmitter.on(increment => {\n this.history.record(increment.elementsChange, increment.appStateChange);\n });\n this.scene.onUpdate(this.triggerRender);\n this.addEventListeners();\n\n if (this.props.autoFocus && this.excalidrawContainerRef.current) {\n this.focusContainer();\n }\n\n if ( // bounding rects don't work in tests so updating\n // the state on init would result in making the test enviro run\n // in mobile breakpoint (0 width/height), making everything fail\n !(0,_utils__WEBPACK_IMPORTED_MODULE_35__.isTestEnv)()) {\n this.refreshViewportBreakpoints();\n this.refreshEditorBreakpoints();\n }\n\n if (_constants__WEBPACK_IMPORTED_MODULE_12__.supportsResizeObserver && this.excalidrawContainerRef.current) {\n this.resizeObserver = new ResizeObserver(() => {\n this.refreshEditorBreakpoints();\n this.updateDOMRect();\n });\n (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.excalidrawContainerRef.current);\n }\n\n const searchParams = new URLSearchParams(window.location.search.slice(1));\n\n if (searchParams.has(\"web-share-target\")) {\n // Obtain a file that was shared via the Web Share Target API.\n this.restoreFileFromShare();\n } else {\n this.updateDOMRect(this.initializeScene);\n } // note that this check seems to always pass in localhost\n\n\n if ((0,_constants__WEBPACK_IMPORTED_MODULE_12__.isBrave)() && !(0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.isMeasureTextSupported)()) {\n this.setState({\n errorMessage: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_BraveMeasureTextError__WEBPACK_IMPORTED_MODULE_61__[\"default\"], {})\n });\n }\n }\n\n componentWillUnmount() {\n var _a;\n\n this.renderer.destroy();\n this.scene = new _scene_Scene__WEBPACK_IMPORTED_MODULE_30__[\"default\"]();\n this.fonts = new _scene_Fonts__WEBPACK_IMPORTED_MODULE_50__.Fonts({\n scene: this.scene\n });\n this.renderer = new _scene_Renderer__WEBPACK_IMPORTED_MODULE_66__.Renderer(this.scene);\n this.files = {};\n this.imageCache.clear();\n (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();\n this.unmounted = true;\n this.removeEventListeners();\n this.scene.destroy();\n this.library.destroy();\n this.laserTrails.stop();\n this.eraserTrail.stop();\n this.onChangeEmitter.clear();\n this.store.onStoreIncrementEmitter.clear();\n _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_67__.ShapeCache.destroy();\n _snapping__WEBPACK_IMPORTED_MODULE_59__.SnapCache.destroy();\n clearTimeout(touchTimeout);\n _scene__WEBPACK_IMPORTED_MODULE_29__.isSomeElementSelected.clearCache();\n _groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements.clearCache();\n touchTimeout = 0;\n document.documentElement.style.overscrollBehaviorX = \"\";\n }\n\n removeEventListeners() {\n this.onRemoveEventListenersEmitter.trigger();\n }\n\n addEventListeners() {\n // remove first as we can add event listeners multiple times\n this.removeEventListeners(); // -------------------------------------------------------------------------\n // view+edit mode listeners\n // -------------------------------------------------------------------------\n\n if (this.props.handleKeyboardGlobally) {\n this.onRemoveEventListenersEmitter.once((0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYDOWN, this.onKeyDown, false));\n }\n\n this.onRemoveEventListenersEmitter.once((0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(this.excalidrawContainerRef.current, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.WHEEL, this.onWheel, {\n passive: false\n }), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.MESSAGE, this.onWindowMessage, false), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, this.removePointer), // #3553\n (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.COPY, this.onCopy), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYUP, this.onKeyUp, {\n passive: true\n }), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, this.updateCurrentCursorPosition), // rerender text elements on font load to fix #637 && #1553\n (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(document.fonts, \"loadingdone\", event => {\n const loadedFontFaces = event.fontfaces;\n this.fonts.onFontsLoaded(loadedFontFaces);\n }), // Safari-only desktop pinch zoom\n (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.GESTURE_START, this.onGestureStart, false), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.GESTURE_CHANGE, this.onGestureChange, false), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.GESTURE_END, this.onGestureEnd, false), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.FOCUS, () => {\n this.maybeCleanupAfterMissingPointerUp(null); // browsers (chrome?) tend to free up memory a lot, which results\n // in canvas context being cleared. Thus re-render on focus.\n\n this.triggerRender(true);\n }));\n\n if (this.state.viewModeEnabled) {\n return;\n } // -------------------------------------------------------------------------\n // edit-mode listeners only\n // -------------------------------------------------------------------------\n\n\n this.onRemoveEventListenersEmitter.once((0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.FULLSCREENCHANGE, this.onFullscreenChange), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.PASTE, this.pasteFromClipboard), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.CUT, this.onCut), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.RESIZE, this.onResize, false), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.UNLOAD, this.onUnload, false), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.BLUR, this.onBlur, false), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(this.excalidrawContainerRef.current, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.DRAG_OVER, this.disableEvent, false), (0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)(this.excalidrawContainerRef.current, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.DROP, this.disableEvent, false));\n\n if (this.props.detectScroll) {\n this.onRemoveEventListenersEmitter.once((0,_utils__WEBPACK_IMPORTED_MODULE_35__.addEventListener)((0,_utils__WEBPACK_IMPORTED_MODULE_35__.getNearestScrollableContainer)(this.excalidrawContainerRef.current), _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.SCROLL, this.onScroll));\n }\n }\n\n componentDidUpdate(prevProps, prevState) {\n var _a, _b, _c, _d, _e, _f;\n\n this.updateEmbeddables();\n const elements = this.scene.getElementsIncludingDeleted();\n const elementsMap = this.scene.getElementsMapIncludingDeleted();\n const nonDeletedElementsMap = this.scene.getNonDeletedElementsMap();\n\n if (!this.state.showWelcomeScreen && !elements.length) {\n this.setState({\n showWelcomeScreen: true\n });\n }\n\n if (prevProps.UIOptions.dockedSidebarBreakpoint !== this.props.UIOptions.dockedSidebarBreakpoint) {\n this.refreshEditorBreakpoints();\n }\n\n const hasFollowedPersonLeft = prevState.userToFollow && !this.state.collaborators.has(prevState.userToFollow.socketId);\n\n if (hasFollowedPersonLeft) {\n this.maybeUnfollowRemoteUser();\n }\n\n if (prevState.zoom.value !== this.state.zoom.value || prevState.scrollX !== this.state.scrollX || prevState.scrollY !== this.state.scrollY) {\n (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.onScrollChange) === null || _b === void 0 ? void 0 : _b.call(_a, this.state.scrollX, this.state.scrollY, this.state.zoom);\n this.onScrollChangeEmitter.trigger(this.state.scrollX, this.state.scrollY, this.state.zoom);\n }\n\n if (prevState.userToFollow !== this.state.userToFollow) {\n if (prevState.userToFollow) {\n this.onUserFollowEmitter.trigger({\n userToFollow: prevState.userToFollow,\n action: \"UNFOLLOW\"\n });\n }\n\n if (this.state.userToFollow) {\n this.onUserFollowEmitter.trigger({\n userToFollow: this.state.userToFollow,\n action: \"FOLLOW\"\n });\n }\n }\n\n if (Object.keys(this.state.selectedElementIds).length && (0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state)) {\n this.setState({\n activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateActiveTool)(this.state, {\n type: \"selection\"\n })\n });\n }\n\n if (this.state.activeTool.type === \"eraser\" && prevState.theme !== this.state.theme) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setEraserCursor)(this.interactiveCanvas, this.state.theme);\n } // Hide hyperlink popup if shown when element type is not selection\n\n\n if (prevState.activeTool.type === \"selection\" && this.state.activeTool.type !== \"selection\" && this.state.showHyperlinkPopup) {\n this.setState({\n showHyperlinkPopup: false\n });\n }\n\n if (prevProps.langCode !== this.props.langCode) {\n this.updateLanguage();\n }\n\n if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(prevState) && !(0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state)) {\n this.eraserTrail.endPath();\n }\n\n if (prevProps.viewModeEnabled !== this.props.viewModeEnabled) {\n this.setState({\n viewModeEnabled: !!this.props.viewModeEnabled\n });\n }\n\n if (prevState.viewModeEnabled !== this.state.viewModeEnabled) {\n this.addEventListeners();\n this.deselectElements();\n }\n\n if (prevProps.zenModeEnabled !== this.props.zenModeEnabled) {\n this.setState({\n zenModeEnabled: !!this.props.zenModeEnabled\n });\n }\n\n if (prevProps.theme !== this.props.theme && this.props.theme) {\n this.setState({\n theme: this.props.theme\n });\n }\n\n if (prevProps.gridModeEnabled !== this.props.gridModeEnabled) {\n this.setState({\n gridSize: this.props.gridModeEnabled ? _constants__WEBPACK_IMPORTED_MODULE_12__.GRID_SIZE : null\n });\n }\n\n (_c = this.excalidrawContainerRef.current) === null || _c === void 0 ? void 0 : _c.classList.toggle(\"theme--dark\", this.state.theme === _constants__WEBPACK_IMPORTED_MODULE_12__.THEME.DARK);\n\n if (this.state.editingLinearElement && !this.state.selectedElementIds[this.state.editingLinearElement.elementId]) {\n // defer so that the storeAction flag isn't reset via current update\n setTimeout(() => {\n // execute only if the condition still holds when the deferred callback\n // executes (it can be scheduled multiple times depending on how\n // many times the component renders)\n this.state.editingLinearElement && this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n });\n } // failsafe in case the state is being updated in incorrect order resulting\n // in the editingElement being now a deleted element\n\n\n if ((_d = this.state.editingElement) === null || _d === void 0 ? void 0 : _d.isDeleted) {\n this.setState({\n editingElement: null\n });\n }\n\n if (this.state.selectedLinearElement && !this.state.selectedElementIds[this.state.selectedLinearElement.elementId]) {\n // To make sure `selectedLinearElement` is in sync with `selectedElementIds`, however this shouldn't be needed once\n // we have a single API to update `selectedElementIds`\n this.setState({\n selectedLinearElement: null\n });\n }\n\n const {\n multiElement\n } = prevState;\n\n if (prevState.activeTool !== this.state.activeTool && multiElement != null && (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.isBindingEnabled)(this.state) && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElement)(multiElement, false)) {\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.maybeBindLinearElement)(multiElement, this.state, (0,_utils__WEBPACK_IMPORTED_MODULE_35__.tupleToCoors)(_element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.getPointAtIndexGlobalCoordinates(multiElement, -1, nonDeletedElementsMap)), this);\n }\n\n this.store.commit(elementsMap, this.state); // Do not notify consumers if we're still loading the scene. Among other\n // potential issues, this fixes a case where the tab isn't focused during\n // init, which would trigger onChange with empty elements, which would then\n // override whatever is in localStorage currently.\n\n if (!this.state.isLoading) {\n (_f = (_e = this.props).onChange) === null || _f === void 0 ? void 0 : _f.call(_e, elements, this.state, this.files);\n this.onChangeEmitter.trigger(elements, this.state, this.files);\n }\n }\n\n static resetTapTwice() {\n didTapTwice = false;\n } // TODO rewrite this to paste both text & images at the same time if\n // pasted data contains both\n\n\n async addElementsFromMixedContentPaste(mixedContent, {\n isPlainPaste,\n sceneX,\n sceneY\n }) {\n if (!isPlainPaste && mixedContent.some(node => node.type === \"imageUrl\") && this.isToolSupported(\"image\")) {\n const imageURLs = mixedContent.filter(node => node.type === \"imageUrl\").map(node => node.value);\n const responses = await Promise.all(imageURLs.map(async url => {\n try {\n return {\n file: await (0,_data_blob__WEBPACK_IMPORTED_MODULE_41__.ImageURLToFile)(url)\n };\n } catch (error) {\n let errorMessage = error.message;\n\n if (error.cause === \"FETCH_ERROR\") {\n errorMessage = (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.failedToFetchImage\");\n } else if (error.cause === \"UNSUPPORTED\") {\n errorMessage = (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.unsupportedFileType\");\n }\n\n return {\n errorMessage\n };\n }\n }));\n let y = sceneY;\n let firstImageYOffsetDone = false;\n const nextSelectedIds = {};\n\n for (const response of responses) {\n if (response.file) {\n const imageElement = this.createImageElement({\n sceneX,\n sceneY: y\n });\n const initializedImageElement = await this.insertImageElement(imageElement, response.file);\n\n if (initializedImageElement) {\n // vertically center first image in the batch\n if (!firstImageYOffsetDone) {\n firstImageYOffsetDone = true;\n y -= initializedImageElement.height / 2;\n } // hack to reset the `y` coord because we vertically center during\n // insertImageElement\n\n\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(initializedImageElement, {\n y\n }, false);\n y = imageElement.y + imageElement.height + 25;\n nextSelectedIds[imageElement.id] = true;\n }\n }\n }\n\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(nextSelectedIds, this.state)\n });\n const error = responses.find(response => !!response.errorMessage);\n\n if (error && error.errorMessage) {\n this.setState({\n errorMessage: error.errorMessage\n });\n }\n } else {\n const textNodes = mixedContent.filter(node => node.type === \"text\");\n\n if (textNodes.length) {\n this.addTextFromPaste(textNodes.map(node => node.value).join(\"\\n\\n\"), isPlainPaste);\n }\n }\n }\n\n addTextFromPaste(text, isPlainPaste = false) {\n const {\n x,\n y\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)({\n clientX: this.lastViewportPosition.x,\n clientY: this.lastViewportPosition.y\n }, this.state);\n const textElementProps = {\n x,\n y,\n strokeColor: this.state.currentItemStrokeColor,\n backgroundColor: this.state.currentItemBackgroundColor,\n fillStyle: this.state.currentItemFillStyle,\n strokeWidth: this.state.currentItemStrokeWidth,\n strokeStyle: this.state.currentItemStrokeStyle,\n roundness: null,\n roughness: this.state.currentItemRoughness,\n opacity: this.state.currentItemOpacity,\n text,\n rawText: text,\n fontSize: (0,_actions_actionProperties__WEBPACK_IMPORTED_MODULE_79__.getFontSize)(this.state.currentItemFontSize, this.state.zoom.value),\n fontFamily: this.state.currentItemFontFamily,\n textAlign: _constants__WEBPACK_IMPORTED_MODULE_12__.DEFAULT_TEXT_ALIGN,\n verticalAlign: _constants__WEBPACK_IMPORTED_MODULE_12__.DEFAULT_VERTICAL_ALIGN,\n locked: false\n };\n const fontString = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.getFontString)({\n fontSize: textElementProps.fontSize,\n fontFamily: textElementProps.fontFamily\n });\n const lineHeight = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.getDefaultLineHeight)(textElementProps.fontFamily);\n const [x1,, x2] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_95__.getVisibleSceneBounds)(this.state); // long texts should not go beyond 800 pixels in width nor should it go below 200 px\n\n const maxTextWidth = Math.max(Math.min((x2 - x1) * 0.5, 800), 200);\n const LINE_GAP = 10;\n let currentY = y;\n const lines = isPlainPaste ? [text] : text.split(\"\\n\");\n const textElements = lines.reduce((acc, line, idx) => {\n var _a;\n\n const originalText = line.trim();\n\n if (originalText.length) {\n const topLayerFrame = this.getTopLayerFrameAtSceneCoords({\n x,\n y: currentY\n });\n let metrics = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.measureText)(originalText, fontString, lineHeight);\n const isTextWrapped = metrics.width > maxTextWidth;\n const text = isTextWrapped ? (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.wrapText)(originalText, fontString, maxTextWidth) : originalText;\n metrics = isTextWrapped ? (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.measureText)(text, fontString, lineHeight) : metrics;\n const startX = x - metrics.width / 2;\n const startY = currentY - metrics.height / 2;\n const element = (0,_element__WEBPACK_IMPORTED_MODULE_16__.newTextElement)(Object.assign(Object.assign({}, textElementProps), {\n x: startX,\n y: startY,\n text,\n rawText: originalText,\n //zsviczian\n originalText,\n lineHeight,\n autoResize: !isTextWrapped,\n frameId: topLayerFrame ? topLayerFrame.id : null\n }));\n acc.push(element);\n currentY += element.height + LINE_GAP;\n } else {\n const prevLine = (_a = lines[idx - 1]) === null || _a === void 0 ? void 0 : _a.trim(); // add paragraph only if previous line was not empty, IOW don't add\n // more than one empty line\n\n if (prevLine) {\n currentY += (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.getLineHeightInPx)(textElementProps.fontSize, lineHeight) + LINE_GAP;\n }\n }\n\n return acc;\n }, []);\n\n if (textElements.length === 0) {\n return;\n }\n\n this.scene.insertElements(textElements);\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(Object.fromEntries(textElements.map(el => [el.id, true])), this.state)\n });\n\n if (!isPlainPaste && textElements.length > 1 && PLAIN_PASTE_TOAST_SHOWN === false && !this.device.editor.isMobile) {\n this.setToast({\n message: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"toast.pasteAsSingleElement\", {\n shortcut: (0,_utils__WEBPACK_IMPORTED_MODULE_35__.getShortcutKey)(\"CtrlOrCmd+Shift+V\")\n }),\n duration: 5000\n });\n PLAIN_PASTE_TOAST_SHOWN = true;\n }\n\n this.store.shouldCaptureIncrement();\n }\n\n handleTextWysiwyg(element, {\n isExistingElement = false\n }) {\n const elementsMap = this.scene.getElementsMapIncludingDeleted();\n\n const updateElement = (nextOriginalText, isDeleted, rawText, //zsviczian\n link) => {\n this.scene.replaceAllElements([// Not sure why we include deleted elements as well hence using deleted elements map\n ...this.scene.getElementsIncludingDeleted().map(_element => {\n if (_element.id === element.id && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(_element)) {\n return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(_element, Object.assign({\n originalText: nextOriginalText,\n rawText: rawText !== null && rawText !== void 0 ? rawText : nextOriginalText,\n //zsviczian\n link,\n isDeleted: isDeleted !== null && isDeleted !== void 0 ? isDeleted : _element.isDeleted\n }, (0,_element__WEBPACK_IMPORTED_MODULE_16__.refreshTextDimensions)(_element, (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.getContainerElement)(_element, elementsMap), elementsMap, nextOriginalText)));\n }\n\n return _element;\n })]);\n }; //zsviczian\n\n\n if (isExistingElement && this.props.onBeforeTextEdit) {\n const text = this.props.onBeforeTextEdit(element);\n\n if (text && text !== element.originalText) {\n this.scene.replaceAllElements([...this.scene.getElementsIncludingDeleted().map(_element => {\n if (_element.id === element.id && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(_element)) {\n //changing the value of element so this gets edited by textWysiwyg\n element = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(_element, Object.assign({\n originalText: text,\n rawText: text,\n isDeleted: false\n }, (0,_element__WEBPACK_IMPORTED_MODULE_16__.refreshTextDimensions)(_element, (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.getContainerElement)(_element, elementsMap), elementsMap, text)));\n return element;\n }\n\n return _element;\n })]);\n }\n }\n\n (0,_element_textWysiwyg__WEBPACK_IMPORTED_MODULE_88__.textWysiwyg)({\n id: element.id,\n canvas: this.canvas,\n getViewportCoords: (x, y) => {\n const {\n x: viewportX,\n y: viewportY\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.sceneCoordsToViewportCoords)({\n sceneX: x,\n sceneY: y\n }, this.state);\n return [viewportX - this.state.offsetLeft, viewportY - this.state.offsetTop];\n },\n onChange: (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(nextOriginalText => {\n updateElement(nextOriginalText, false);\n\n if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isNonDeletedElement)(element)) {\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.updateBoundElements)(element, elementsMap);\n }\n }),\n onSubmit: (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(({\n viaKeyboard,\n nextOriginalText\n }) => {\n var _a;\n\n const isDeleted = !nextOriginalText.trim(); //zsviczian insert start\n\n const rawText = nextOriginalText; //should this be originalText??\n\n let link = undefined;\n\n if (this.props.onBeforeTextSubmit) {\n const _element = this.scene.getElementsIncludingDeleted().find(el => el.id === element.id && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(el));\n\n if (_element) {\n const dismensionsData = (0,_element__WEBPACK_IMPORTED_MODULE_16__.refreshTextDimensions)(_element, (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.getContainerElement)(_element, elementsMap), elementsMap, nextOriginalText);\n const {\n updatedNextOriginalText,\n nextLink\n } = this.props.onBeforeTextSubmit(element, (_a = dismensionsData === null || dismensionsData === void 0 ? void 0 : dismensionsData.text) !== null && _a !== void 0 ? _a : nextOriginalText, //should never be undefined\n nextOriginalText, isDeleted);\n nextOriginalText = updatedNextOriginalText !== null && updatedNextOriginalText !== void 0 ? updatedNextOriginalText : nextOriginalText;\n link = nextLink;\n }\n } //zsviczian insert end\n\n\n updateElement(nextOriginalText, isDeleted, rawText, link); //zsviczian (added rawText, link, text)\n // select the created text element only if submitting via keyboard\n // (when submitting via click it should act as signal to deselect)\n\n if (!isDeleted && viaKeyboard) {\n const elementIdToSelect = element.containerId ? element.containerId : element.id;\n this.setState(prevState => ({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(Object.assign(Object.assign({}, prevState.selectedElementIds), {\n [elementIdToSelect]: true\n }), prevState)\n }));\n }\n\n if (isDeleted) {\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.fixBindingsAfterDeletion)(this.scene.getNonDeletedElements(), [element]);\n }\n\n if (!isDeleted || isExistingElement) {\n this.store.shouldCaptureIncrement();\n }\n\n this.setState({\n draggingElement: null,\n editingElement: null\n });\n\n if (this.state.activeTool.locked) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursorForShape)(this.interactiveCanvas, this.state);\n }\n\n this.focusContainer();\n }),\n element,\n excalidrawContainer: this.excalidrawContainerRef.current,\n app: this\n }); // deselect all other elements when inserting text\n\n this.deselectElements(); // do an initial update to re-initialize element position since we were\n // modifying element's x/y for sake of editor (case: syncing to remote)\n\n updateElement(element.originalText, false);\n }\n\n deselectElements() {\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, this.state),\n selectedGroupIds: {},\n editingGroupId: null,\n activeEmbeddable: null\n });\n }\n\n getTextElementAtPosition(x, y) {\n const element = this.getElementAtPosition(x, y, {\n includeBoundTextElement: true\n });\n\n if (element && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(element) && !element.isDeleted) {\n return element;\n }\n\n return null;\n }\n /**\r\n * get the pure geometric shape of an excalidraw element\r\n * which is then used for hit detection\r\n */\n\n\n getElementShape(element) {\n var _a, _b;\n\n switch (element.type) {\n case \"rectangle\":\n case \"diamond\":\n case \"frame\":\n case \"magicframe\":\n case \"embeddable\":\n case \"image\":\n case \"iframe\":\n case \"text\":\n case \"selection\":\n return (0,_utils_geometry_shape__WEBPACK_IMPORTED_MODULE_33__.getPolygonShape)(element);\n\n case \"arrow\":\n case \"line\":\n {\n const roughShape = (_b = (_a = _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_67__.ShapeCache.get(element)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_67__.ShapeCache.generateElementShape(element, null)[0];\n const [,,,, cx, cy] = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getElementAbsoluteCoords)(element, this.scene.getNonDeletedElementsMap());\n return (0,_element_collision__WEBPACK_IMPORTED_MODULE_87__.shouldTestInside)(element) ? (0,_utils_geometry_shape__WEBPACK_IMPORTED_MODULE_33__.getClosedCurveShape)(element, roughShape, [element.x, element.y], element.angle, [cx, cy]) : (0,_utils_geometry_shape__WEBPACK_IMPORTED_MODULE_33__.getCurveShape)(roughShape, [element.x, element.y], element.angle, [cx, cy]);\n }\n\n case \"ellipse\":\n return (0,_utils_geometry_shape__WEBPACK_IMPORTED_MODULE_33__.getEllipseShape)(element);\n\n case \"freedraw\":\n {\n const [,,,, cx, cy] = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getElementAbsoluteCoords)(element, this.scene.getNonDeletedElementsMap());\n return (0,_utils_geometry_shape__WEBPACK_IMPORTED_MODULE_33__.getFreedrawShape)(element, [cx, cy], (0,_element_collision__WEBPACK_IMPORTED_MODULE_87__.shouldTestInside)(element));\n }\n }\n }\n\n getBoundTextShape(element) {\n const boundTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.getBoundTextElement)(element, this.scene.getNonDeletedElementsMap());\n\n if (boundTextElement) {\n if (element.type === \"arrow\") {\n return this.getElementShape(Object.assign(Object.assign({}, boundTextElement), _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.getBoundTextElementPosition(element, boundTextElement, this.scene.getNonDeletedElementsMap())));\n }\n\n return this.getElementShape(boundTextElement);\n }\n\n return null;\n }\n\n getElementAtPosition(x, y, opts) {\n const allHitElements = this.getElementsAtPosition(x, y, opts === null || opts === void 0 ? void 0 : opts.includeBoundTextElement, opts === null || opts === void 0 ? void 0 : opts.includeLockedElements);\n\n if (allHitElements.length > 1) {\n if (opts === null || opts === void 0 ? void 0 : opts.preferSelected) {\n for (let index = allHitElements.length - 1; index > -1; index--) {\n if (this.state.selectedElementIds[allHitElements[index].id]) {\n return allHitElements[index];\n }\n }\n }\n\n const elementWithHighestZIndex = allHitElements[allHitElements.length - 1]; // If we're hitting element with highest z-index only on its bounding box\n // while also hitting other element figure, the latter should be considered.\n\n return (0,_element_collision__WEBPACK_IMPORTED_MODULE_87__.hitElementItself)({\n x,\n y,\n element: elementWithHighestZIndex,\n shape: this.getElementShape(elementWithHighestZIndex),\n // when overlapping, we would like to be more precise\n // this also avoids the need to update past tests\n threshold: this.getElementHitThreshold() / 2,\n frameNameBound: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(elementWithHighestZIndex) ? this.frameNameBoundsCache.get(elementWithHighestZIndex) : null\n }) ? elementWithHighestZIndex : allHitElements[allHitElements.length - 2];\n }\n\n if (allHitElements.length === 1) {\n return allHitElements[0];\n }\n\n return null;\n }\n\n getElementsAtPosition(x, y, includeBoundTextElement = false, includeLockedElements = false) {\n const iframeLikes = [];\n const elementsMap = this.scene.getNonDeletedElementsMap();\n const elements = (includeBoundTextElement && includeLockedElements ? this.scene.getNonDeletedElements() : this.scene.getNonDeletedElements().filter(element => (includeLockedElements || !element.locked) && (includeBoundTextElement || !((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(element) && element.containerId)))).filter(el => this.hitElement(x, y, el)).filter(element => {\n // hitting a frame's element from outside the frame is not considered a hit\n const containingFrame = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getContainingFrame)(element, elementsMap);\n return containingFrame && this.state.frameRendering.enabled && this.state.frameRendering.clip ? (0,_frame__WEBPACK_IMPORTED_MODULE_51__.isCursorInFrame)({\n x,\n y\n }, containingFrame, elementsMap) : true;\n }).filter(el => {\n // The parameter elements comes ordered from lower z-index to higher.\n // We want to preserve that order on the returned array.\n // Exception being embeddables which should be on top of everything else in\n // terms of hit testing.\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(el)) {\n iframeLikes.push(el);\n return false;\n }\n\n return true;\n }).concat(iframeLikes);\n return elements;\n }\n\n getElementHitThreshold() {\n return _constants__WEBPACK_IMPORTED_MODULE_12__.DEFAULT_COLLISION_THRESHOLD / this.state.zoom.value;\n }\n\n hitElement(x, y, element, considerBoundingBox = true) {\n // if the element is selected, then hit test is done against its bounding box\n if (considerBoundingBox && this.state.selectedElementIds[element.id] && (0,_element_transformHandles__WEBPACK_IMPORTED_MODULE_48__.shouldShowBoundingBox)([element], this.state)) {\n const selectionShape = (0,_utils_geometry_shape__WEBPACK_IMPORTED_MODULE_33__.getSelectionBoxShape)(element, this.scene.getNonDeletedElementsMap(), this.getElementHitThreshold());\n return (0,_utils_collision__WEBPACK_IMPORTED_MODULE_34__.isPointInShape)([x, y], selectionShape);\n } // take bound text element into consideration for hit collision as well\n\n\n const hitBoundTextOfElement = (0,_element_collision__WEBPACK_IMPORTED_MODULE_87__.hitElementBoundText)(x, y, this.getBoundTextShape(element));\n\n if (hitBoundTextOfElement) {\n return true;\n }\n\n return (0,_element_collision__WEBPACK_IMPORTED_MODULE_87__.hitElementItself)({\n x,\n y,\n element,\n shape: this.getElementShape(element),\n threshold: this.getElementHitThreshold(),\n frameNameBound: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(element) ? this.frameNameBoundsCache.get(element) : null\n });\n }\n\n getTextBindableContainerAtPosition(x, y) {\n const elements = this.scene.getNonDeletedElements();\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (selectedElements.length === 1) {\n return (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isTextBindableContainer)(selectedElements[0], false) ? selectedElements[0] : null;\n }\n\n let hitElement = null; // We need to do hit testing from front (end of the array) to back (beginning of the array)\n\n for (let index = elements.length - 1; index >= 0; --index) {\n if (elements[index].isDeleted) {\n continue;\n }\n\n const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getElementAbsoluteCoords)(elements[index], this.scene.getNonDeletedElementsMap());\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isArrowElement)(elements[index]) && (0,_element_collision__WEBPACK_IMPORTED_MODULE_87__.hitElementItself)({\n x,\n y,\n element: elements[index],\n shape: this.getElementShape(elements[index]),\n threshold: this.getElementHitThreshold()\n })) {\n hitElement = elements[index];\n break;\n } else if (x1 < x && x < x2 && y1 < y && y < y2) {\n hitElement = elements[index];\n break;\n }\n }\n\n return (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isTextBindableContainer)(hitElement, false) ? hitElement : null;\n }\n\n handleHoverSelectedLinearElement(linearElementEditor, scenePointerX, scenePointerY) {\n const elementsMap = this.scene.getNonDeletedElementsMap();\n const element = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.getElement(linearElementEditor.elementId, elementsMap);\n\n if (!element) {\n return;\n }\n\n if (this.state.selectedLinearElement) {\n let hoverPointIndex = -1;\n let segmentMidPointHoveredCoords = null;\n\n if ((0,_element_collision__WEBPACK_IMPORTED_MODULE_87__.hitElementItself)({\n x: scenePointerX,\n y: scenePointerY,\n element,\n shape: this.getElementShape(element)\n })) {\n hoverPointIndex = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.getPointIndexUnderCursor(element, elementsMap, this.state.zoom, scenePointerX, scenePointerY);\n segmentMidPointHoveredCoords = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.getSegmentMidpointHitCoords(linearElementEditor, {\n x: scenePointerX,\n y: scenePointerY\n }, this.state, this.scene.getNonDeletedElementsMap());\n\n if (hoverPointIndex >= 0 || segmentMidPointHoveredCoords) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n } else if (this.hitElement(scenePointerX, scenePointerY, element)) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.MOVE);\n }\n } else if (this.hitElement(scenePointerX, scenePointerY, element)) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.MOVE);\n }\n\n if (this.state.selectedLinearElement.hoverPointIndex !== hoverPointIndex) {\n this.setState({\n selectedLinearElement: Object.assign(Object.assign({}, this.state.selectedLinearElement), {\n hoverPointIndex\n })\n });\n }\n\n if (!_element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.arePointsEqual(this.state.selectedLinearElement.segmentMidPointHoveredCoords, segmentMidPointHoveredCoords)) {\n this.setState({\n selectedLinearElement: Object.assign(Object.assign({}, this.state.selectedLinearElement), {\n segmentMidPointHoveredCoords\n })\n });\n }\n } else {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.AUTO);\n }\n }\n\n updateGestureOnPointerDown(event) {\n gesture.pointers.set(event.pointerId, {\n x: event.clientX,\n y: event.clientY\n });\n\n if (gesture.pointers.size === 2) {\n gesture.lastCenter = (0,_gesture__WEBPACK_IMPORTED_MODULE_22__.getCenter)(gesture.pointers);\n gesture.initialScale = this.state.zoom.value;\n gesture.initialDistance = (0,_gesture__WEBPACK_IMPORTED_MODULE_22__.getDistance)(Array.from(gesture.pointers.values()));\n }\n }\n\n initialPointerDownState(event) {\n const origin = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)(event, this.state);\n const selectedElements = this.scene.getSelectedElements(this.state);\n const [minX, minY, maxX, maxY] = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(selectedElements);\n return {\n origin,\n withCmdOrCtrl: event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD],\n originInGrid: (0,_utils__WEBPACK_IMPORTED_MODULE_35__.tupleToCoors)((0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(origin.x, origin.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.state.gridSize)),\n scrollbars: (0,_scene_scrollbars__WEBPACK_IMPORTED_MODULE_89__.isOverScrollBars)(currentScrollBars, event.clientX - this.state.offsetLeft, event.clientY - this.state.offsetTop),\n // we need to duplicate because we'll be updating this state\n lastCoords: Object.assign({}, origin),\n originalElements: this.scene.getNonDeletedElements().reduce((acc, element) => {\n acc.set(element.id, (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.deepCopyElement)(element));\n return acc;\n }, new Map()),\n resize: {\n handleType: false,\n isResizing: false,\n offset: {\n x: 0,\n y: 0\n },\n arrowDirection: \"origin\",\n center: {\n x: (maxX + minX) / 2,\n y: (maxY + minY) / 2\n }\n },\n hit: {\n element: null,\n allHitElements: [],\n wasAddedToSelection: false,\n hasBeenDuplicated: false,\n hasHitCommonBoundingBoxOfSelectedElements: this.isHittingCommonBoundingBoxOfSelectedElements(origin, selectedElements)\n },\n drag: {\n hasOccurred: false,\n offset: null\n },\n eventListeners: {\n onMove: null,\n onUp: null,\n onKeyUp: null,\n onKeyDown: null\n },\n boxSelection: {\n hasOccurred: false\n }\n };\n } // Returns whether the event is a dragging a scrollbar\n\n\n handleDraggingScrollBar(event, pointerDownState) {\n if (!(pointerDownState.scrollbars.isOverEither && !this.state.multiElement)) {\n return false;\n }\n\n isDraggingScrollBar = true;\n pointerDownState.lastCoords.x = event.clientX;\n pointerDownState.lastCoords.y = event.clientY;\n const onPointerMove = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdatesThrottled)(event => {\n const target = event.target;\n\n if (!(target instanceof HTMLElement)) {\n return;\n }\n\n this.handlePointerMoveOverScrollbars(event, pointerDownState);\n });\n const onPointerUp = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(() => {\n lastPointerUp = null;\n isDraggingScrollBar = false;\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursorForShape)(this.interactiveCanvas, this.state);\n this.setState({\n cursorButton: \"up\"\n });\n this.savePointer(event.clientX, event.clientY, \"up\");\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, onPointerMove);\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, onPointerUp);\n onPointerMove.flush();\n });\n lastPointerUp = onPointerUp;\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, onPointerMove);\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, onPointerUp);\n return true;\n }\n\n isASelectedElement(hitElement) {\n return hitElement != null && this.state.selectedElementIds[hitElement.id];\n }\n\n isHittingCommonBoundingBoxOfSelectedElements(point, selectedElements) {\n if (selectedElements.length < 2) {\n return false;\n } // How many pixels off the shape boundary we still consider a hit\n\n\n const threshold = this.getElementHitThreshold();\n const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(selectedElements);\n return point.x > x1 - threshold && point.x < x2 + threshold && point.y > y1 - threshold && point.y < y2 + threshold;\n }\n\n getCurrentItemRoundness(elementType) {\n return this.state.currentItemRoundness === \"round\" ? {\n type: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isUsingAdaptiveRadius)(elementType) ? _constants__WEBPACK_IMPORTED_MODULE_12__.ROUNDNESS.ADAPTIVE_RADIUS : _constants__WEBPACK_IMPORTED_MODULE_12__.ROUNDNESS.PROPORTIONAL_RADIUS\n } : null;\n }\n\n maybeCacheReferenceSnapPoints(event, selectedElements, recomputeAnyways = false) {\n if ((0,_snapping__WEBPACK_IMPORTED_MODULE_59__.isSnappingEnabled)({\n event,\n appState: this.state,\n selectedElements\n }) && (recomputeAnyways || !_snapping__WEBPACK_IMPORTED_MODULE_59__.SnapCache.getReferenceSnapPoints())) {\n _snapping__WEBPACK_IMPORTED_MODULE_59__.SnapCache.setReferenceSnapPoints((0,_snapping__WEBPACK_IMPORTED_MODULE_59__.getReferenceSnapPoints)(this.scene.getNonDeletedElements(), selectedElements, this.state, this.scene.getNonDeletedElementsMap()));\n }\n }\n\n maybeCacheVisibleGaps(event, selectedElements, recomputeAnyways = false) {\n if ((0,_snapping__WEBPACK_IMPORTED_MODULE_59__.isSnappingEnabled)({\n event,\n appState: this.state,\n selectedElements\n }) && (recomputeAnyways || !_snapping__WEBPACK_IMPORTED_MODULE_59__.SnapCache.getVisibleGaps())) {\n _snapping__WEBPACK_IMPORTED_MODULE_59__.SnapCache.setVisibleGaps((0,_snapping__WEBPACK_IMPORTED_MODULE_59__.getVisibleGaps)(this.scene.getNonDeletedElements(), selectedElements, this.state, this.scene.getNonDeletedElementsMap()));\n }\n }\n\n onKeyDownFromPointerDownHandler(pointerDownState) {\n return (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(event => {\n if (this.maybeHandleResize(pointerDownState, event)) {\n return;\n }\n\n this.maybeDragNewGenericElement(pointerDownState, event);\n });\n }\n\n onKeyUpFromPointerDownHandler(pointerDownState) {\n return (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(event => {\n // Prevents focus from escaping excalidraw tab\n event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ALT && event.preventDefault();\n\n if (this.maybeHandleResize(pointerDownState, event)) {\n return;\n }\n\n this.maybeDragNewGenericElement(pointerDownState, event);\n });\n }\n\n onPointerMoveFromPointerDownHandler(pointerDownState) {\n return (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdatesThrottled)(event => {\n var _a, _b; //To avoid pointerMove canceling the selection of locked elements on mobile //zsviczian\n\n\n if (Boolean(this.state.contextMenu)) {\n return;\n } // We need to initialize dragOffsetXY only after we've updated\n // `state.selectedElementIds` on pointerDown. Doing it here in pointerMove\n // event handler should hopefully ensure we're already working with\n // the updated state.\n\n\n if (pointerDownState.drag.offset === null) {\n pointerDownState.drag.offset = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.tupleToCoors)((0,_element__WEBPACK_IMPORTED_MODULE_16__.getDragOffsetXY)(this.scene.getSelectedElements(this.state), pointerDownState.origin.x, pointerDownState.origin.y));\n }\n\n const target = event.target;\n\n if (!(target instanceof HTMLElement)) {\n return;\n }\n\n if (this.handlePointerMoveOverScrollbars(event, pointerDownState)) {\n return;\n }\n\n const pointerCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)(event, this.state);\n\n if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state)) {\n this.handleEraser(event, pointerDownState, pointerCoords);\n return;\n }\n\n if (this.state.activeTool.type === \"laser\") {\n this.laserTrails.addPointToPath(pointerCoords.x, pointerCoords.y);\n }\n\n const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerCoords.x, pointerCoords.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.state.gridSize); // for arrows/lines, don't start dragging until a given threshold\n // to ensure we don't create a 2-point arrow by mistake when\n // user clicks mouse in a way that it moves a tiny bit (thus\n // triggering pointermove)\n\n if (!pointerDownState.drag.hasOccurred && (this.state.activeTool.type === \"arrow\" || this.state.activeTool.type === \"line\")) {\n if ((0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(pointerCoords.x, pointerCoords.y, pointerDownState.origin.x, pointerDownState.origin.y) < _constants__WEBPACK_IMPORTED_MODULE_12__.DRAGGING_THRESHOLD) {\n return;\n }\n }\n\n if (pointerDownState.resize.isResizing) {\n pointerDownState.lastCoords.x = pointerCoords.x;\n pointerDownState.lastCoords.y = pointerCoords.y;\n\n if (this.maybeHandleResize(pointerDownState, event)) {\n return true;\n }\n }\n\n const elementsMap = this.scene.getNonDeletedElementsMap();\n\n if (this.state.selectedLinearElement) {\n const linearElementEditor = this.state.editingLinearElement || this.state.selectedLinearElement;\n\n if (_element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.shouldAddMidpoint(this.state.selectedLinearElement, pointerCoords, this.state, elementsMap)) {\n const ret = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.addMidpoint(this.state.selectedLinearElement, pointerCoords, this.state, !event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD], elementsMap);\n\n if (!ret) {\n return;\n } // Since we are reading from previous state which is not possible with\n // automatic batching in React 18 hence using flush sync to synchronously\n // update the state. Check https://github.com/excalidraw/excalidraw/pull/5508 for more details.\n\n\n (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.flushSync)(() => {\n if (this.state.selectedLinearElement) {\n this.setState({\n selectedLinearElement: Object.assign(Object.assign({}, this.state.selectedLinearElement), {\n pointerDownState: ret.pointerDownState,\n selectedPointsIndices: ret.selectedPointsIndices\n })\n });\n }\n\n if (this.state.editingLinearElement) {\n this.setState({\n editingLinearElement: Object.assign(Object.assign({}, this.state.editingLinearElement), {\n pointerDownState: ret.pointerDownState,\n selectedPointsIndices: ret.selectedPointsIndices\n })\n });\n }\n });\n return;\n } else if (linearElementEditor.pointerDownState.segmentMidpoint.value !== null && !linearElementEditor.pointerDownState.segmentMidpoint.added) {\n return;\n }\n\n const didDrag = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handlePointDragging(event, this.state, pointerCoords.x, pointerCoords.y, (element, pointsSceneCoords) => {\n this.maybeSuggestBindingsForLinearElementAtCoords(element, pointsSceneCoords);\n }, linearElementEditor, this.scene.getNonDeletedElementsMap());\n\n if (didDrag) {\n pointerDownState.lastCoords.x = pointerCoords.x;\n pointerDownState.lastCoords.y = pointerCoords.y;\n pointerDownState.drag.hasOccurred = true;\n\n if (this.state.editingLinearElement && !this.state.editingLinearElement.isDragging) {\n this.setState({\n editingLinearElement: Object.assign(Object.assign({}, this.state.editingLinearElement), {\n isDragging: true\n })\n });\n }\n\n if (!this.state.selectedLinearElement.isDragging) {\n this.setState({\n selectedLinearElement: Object.assign(Object.assign({}, this.state.selectedLinearElement), {\n isDragging: true\n })\n });\n }\n\n return;\n }\n }\n\n const hasHitASelectedElement = pointerDownState.hit.allHitElements.some(element => this.isASelectedElement(element));\n const isSelectingPointsInLineEditor = this.state.editingLinearElement && event.shiftKey && this.state.editingLinearElement.elementId === ((_a = pointerDownState.hit.element) === null || _a === void 0 ? void 0 : _a.id);\n\n if ((hasHitASelectedElement || pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements) && !isSelectingPointsInLineEditor) {\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (selectedElements.every(element => element.locked)) {\n return;\n }\n\n const selectedElementsHasAFrame = selectedElements.find(e => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(e));\n const topLayerFrame = this.getTopLayerFrameAtSceneCoords(pointerCoords);\n this.setState({\n frameToHighlight: topLayerFrame && !selectedElementsHasAFrame ? topLayerFrame : null\n }); // Marking that click was used for dragging to check\n // if elements should be deselected on pointerup\n\n pointerDownState.drag.hasOccurred = true;\n this.setState({\n selectedElementsAreBeingDragged: true\n }); // prevent dragging even if we're no longer holding cmd/ctrl otherwise\n // it would have weird results (stuff jumping all over the screen)\n // Checking for editingElement to avoid jump while editing on mobile #6503\n\n if (selectedElements.length > 0 && !pointerDownState.withCmdOrCtrl && !this.state.editingElement && ((_b = this.state.activeEmbeddable) === null || _b === void 0 ? void 0 : _b.state) !== \"active\") {\n const dragOffset = {\n x: pointerCoords.x - pointerDownState.origin.x,\n y: pointerCoords.y - pointerDownState.origin.y\n };\n const originalElements = [...pointerDownState.originalElements.values()]; // We only drag in one direction if shift is pressed\n\n const lockDirection = event.shiftKey;\n\n if (lockDirection) {\n const distanceX = Math.abs(dragOffset.x);\n const distanceY = Math.abs(dragOffset.y);\n const lockX = lockDirection && distanceX < distanceY;\n const lockY = lockDirection && distanceX > distanceY;\n\n if (lockX) {\n dragOffset.x = 0;\n }\n\n if (lockY) {\n dragOffset.y = 0;\n }\n } // Snap cache *must* be synchronously popuplated before initial drag,\n // otherwise the first drag even will not snap, causing a jump before\n // it snaps to its position if previously snapped already.\n\n\n this.maybeCacheVisibleGaps(event, selectedElements);\n this.maybeCacheReferenceSnapPoints(event, selectedElements);\n const {\n snapOffset,\n snapLines\n } = (0,_snapping__WEBPACK_IMPORTED_MODULE_59__.snapDraggedElements)(originalElements, dragOffset, this.state, event, this.scene.getNonDeletedElementsMap());\n this.setState({\n snapLines\n }); // when we're editing the name of a frame, we want the user to be\n // able to select and interact with the text input\n\n !this.state.editingFrame && (0,_element__WEBPACK_IMPORTED_MODULE_16__.dragSelectedElements)(pointerDownState, selectedElements, dragOffset, this.state, this.scene, snapOffset, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.state.gridSize);\n this.setState({\n suggestedBindings: (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getSuggestedBindingsForArrows)(selectedElements, this)\n }); // We duplicate the selected element if alt is pressed on pointer move\n\n if (event.altKey && !pointerDownState.hit.hasBeenDuplicated) {\n // Move the currently selected elements to the top of the z index stack, and\n // put the duplicates where the selected elements used to be.\n // (the origin point where the dragging started)\n pointerDownState.hit.hasBeenDuplicated = true;\n const nextElements = [];\n const elementsToAppend = [];\n const groupIdMap = new Map();\n const oldIdToDuplicatedId = new Map();\n const hitElement = pointerDownState.hit.element;\n const selectedElementIds = new Set(this.scene.getSelectedElements({\n selectedElementIds: this.state.selectedElementIds,\n includeBoundTextElement: true,\n includeElementsInFrames: true\n }).map(element => element.id));\n const elements = this.scene.getElementsIncludingDeleted();\n\n for (const element of elements) {\n if (selectedElementIds.has(element.id) || // case: the state.selectedElementIds might not have been\n // updated yet by the time this mousemove event is fired\n element.id === (hitElement === null || hitElement === void 0 ? void 0 : hitElement.id) && pointerDownState.hit.wasAddedToSelection) {\n const duplicatedElement = (0,_element__WEBPACK_IMPORTED_MODULE_16__.duplicateElement)(this.state.editingGroupId, groupIdMap, element);\n const origElement = pointerDownState.originalElements.get(element.id);\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(duplicatedElement, {\n x: origElement.x,\n y: origElement.y\n }); // put duplicated element to pointerDownState.originalElements\n // so that we can snap to the duplicated element without releasing\n\n pointerDownState.originalElements.set(duplicatedElement.id, duplicatedElement);\n nextElements.push(duplicatedElement);\n elementsToAppend.push(element);\n oldIdToDuplicatedId.set(element.id, duplicatedElement.id);\n } else {\n nextElements.push(element);\n }\n }\n\n const nextSceneElements = [...nextElements, ...elementsToAppend];\n (0,_fractionalIndex__WEBPACK_IMPORTED_MODULE_90__.syncMovedIndices)(nextSceneElements, (0,_utils__WEBPACK_IMPORTED_MODULE_35__.arrayToMap)(elementsToAppend));\n (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.bindTextToShapeAfterDuplication)(nextElements, elementsToAppend, oldIdToDuplicatedId);\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.fixBindingsAfterDuplication)(nextSceneElements, elementsToAppend, oldIdToDuplicatedId, \"duplicatesServeAsOld\");\n (0,_frame__WEBPACK_IMPORTED_MODULE_51__.bindElementsToFramesAfterDuplication)(nextSceneElements, elementsToAppend, oldIdToDuplicatedId);\n this.scene.replaceAllElements(nextSceneElements);\n this.maybeCacheVisibleGaps(event, selectedElements, true);\n this.maybeCacheReferenceSnapPoints(event, selectedElements, true);\n }\n\n return;\n }\n } // It is very important to read this.state within each move event,\n // otherwise we would read a stale one!\n\n\n const draggingElement = this.state.draggingElement;\n\n if (!draggingElement) {\n return;\n }\n\n if (draggingElement.type === \"freedraw\") {\n const points = draggingElement.points;\n const dx = pointerCoords.x - draggingElement.x;\n const dy = pointerCoords.y - draggingElement.y;\n const lastPoint = points.length > 0 && points[points.length - 1];\n const discardPoint = lastPoint && lastPoint[0] === dx && lastPoint[1] === dy;\n\n if (!discardPoint) {\n const strokeOptions = this.state.currentStrokeOptions; //zsviczian\n\n const pressures = draggingElement.simulatePressure ? draggingElement.pressures : [//zsviczian\n ...draggingElement.pressures, (strokeOptions === null || strokeOptions === void 0 ? void 0 : strokeOptions.constantPressure) ? 1 : event.pressure];\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(draggingElement, {\n points: [...points, [dx, dy]],\n pressures\n });\n }\n } else if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(draggingElement)) {\n pointerDownState.drag.hasOccurred = true;\n this.setState({\n selectedElementsAreBeingDragged: true\n });\n const points = draggingElement.points;\n let dx = gridX - draggingElement.x;\n let dy = gridY - draggingElement.y;\n\n if ((0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldRotateWithDiscreteAngle)(event) && points.length === 2) {\n ({\n width: dx,\n height: dy\n } = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getLockedLinearCursorAlignSize)(draggingElement.x, draggingElement.y, pointerCoords.x, pointerCoords.y));\n }\n\n if (points.length === 1) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(draggingElement, {\n points: [...points, [dx, dy]]\n });\n } else if (points.length === 2) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(draggingElement, {\n points: [...points.slice(0, -1), [dx, dy]]\n });\n }\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElement)(draggingElement, false)) {\n // When creating a linear element by dragging\n this.maybeSuggestBindingsForLinearElementAtCoords(draggingElement, [pointerCoords], this.state.startBoundElement);\n }\n } else {\n pointerDownState.lastCoords.x = pointerCoords.x;\n pointerDownState.lastCoords.y = pointerCoords.y;\n this.maybeDragNewGenericElement(pointerDownState, event);\n }\n\n if (this.state.activeTool.type === \"selection\") {\n pointerDownState.boxSelection.hasOccurred = true;\n const elements = this.scene.getNonDeletedElements(); // box-select line editor points\n\n if (this.state.editingLinearElement) {\n _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handleBoxSelection(event, this.state, this.setState.bind(this), this.scene.getNonDeletedElementsMap()); // regular box-select\n } else {\n let shouldReuseSelection = true;\n\n if (!event.shiftKey && (0,_scene__WEBPACK_IMPORTED_MODULE_29__.isSomeElementSelected)(elements, this.state)) {\n if (pointerDownState.withCmdOrCtrl && pointerDownState.hit.element) {\n this.setState(prevState => (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)(Object.assign(Object.assign({}, prevState), {\n selectedElementIds: {\n [pointerDownState.hit.element.id]: true\n }\n }), this.scene.getNonDeletedElements(), prevState, this));\n } else {\n shouldReuseSelection = false;\n }\n }\n\n const elementsWithinSelection = (0,_scene__WEBPACK_IMPORTED_MODULE_29__.getElementsWithinSelection)(elements, draggingElement, this.scene.getNonDeletedElementsMap());\n this.setState(prevState => {\n const nextSelectedElementIds = Object.assign(Object.assign({}, shouldReuseSelection && prevState.selectedElementIds), elementsWithinSelection.reduce((acc, element) => {\n acc[element.id] = true;\n return acc;\n }, {}));\n\n if (pointerDownState.hit.element) {\n // if using ctrl/cmd, select the hitElement only if we\n // haven't box-selected anything else\n if (!elementsWithinSelection.length) {\n nextSelectedElementIds[pointerDownState.hit.element.id] = true;\n } else {\n delete nextSelectedElementIds[pointerDownState.hit.element.id];\n }\n }\n\n prevState = !shouldReuseSelection ? Object.assign(Object.assign({}, prevState), {\n selectedGroupIds: {},\n editingGroupId: null\n }) : prevState;\n return Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n editingGroupId: prevState.editingGroupId,\n selectedElementIds: nextSelectedElementIds\n }, this.scene.getNonDeletedElements(), prevState, this)), {\n // select linear element only when we haven't box-selected anything else\n selectedLinearElement: elementsWithinSelection.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(elementsWithinSelection[0]) ? new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(elementsWithinSelection[0]) : null,\n showHyperlinkPopup: elementsWithinSelection.length === 1 && (elementsWithinSelection[0].link || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(elementsWithinSelection[0])) ? \"info\" : false\n });\n });\n }\n }\n });\n } // Returns whether the pointer move happened over either scrollbar\n\n\n handlePointerMoveOverScrollbars(event, pointerDownState) {\n if (pointerDownState.scrollbars.isOverHorizontal) {\n const x = event.clientX;\n const dx = x - pointerDownState.lastCoords.x;\n this.translateCanvas({\n scrollX: this.state.scrollX - dx / this.state.zoom.value\n });\n pointerDownState.lastCoords.x = x;\n return true;\n }\n\n if (pointerDownState.scrollbars.isOverVertical) {\n const y = event.clientY;\n const dy = y - pointerDownState.lastCoords.y;\n this.translateCanvas({\n scrollY: this.state.scrollY - dy / this.state.zoom.value\n });\n pointerDownState.lastCoords.y = y;\n return true;\n }\n\n return false;\n }\n\n onPointerUpFromPointerDownHandler(pointerDownState) {\n return (0,_reactUtils__WEBPACK_IMPORTED_MODULE_84__.withBatchedUpdates)(childEvent => {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;\n\n this.removePointer(childEvent);\n\n if (pointerDownState.eventListeners.onMove) {\n pointerDownState.eventListeners.onMove.flush();\n }\n\n const {\n draggingElement,\n resizingElement,\n multiElement,\n activeTool,\n isResizing,\n isRotating\n } = this.state;\n this.setState(prevState => ({\n isResizing: false,\n isRotating: false,\n resizingElement: null,\n selectionElement: null,\n frameToHighlight: null,\n elementsToHighlight: null,\n cursorButton: \"up\",\n // text elements are reset on finalize, and resetting on pointerup\n // may cause issues with double taps\n editingElement: multiElement || (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(this.state.editingElement) ? this.state.editingElement : null,\n snapLines: (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateStable)(prevState.snapLines, []),\n originSnapOffset: null\n }));\n _snapping__WEBPACK_IMPORTED_MODULE_59__.SnapCache.setReferenceSnapPoints(null);\n _snapping__WEBPACK_IMPORTED_MODULE_59__.SnapCache.setVisibleGaps(null);\n this.savePointer(childEvent.clientX, childEvent.clientY, \"up\");\n this.setState({\n selectedElementsAreBeingDragged: false\n });\n const elementsMap = this.scene.getNonDeletedElementsMap(); // Handle end of dragging a point of a linear element, might close a loop\n // and sets binding element\n\n if (this.state.editingLinearElement) {\n if (!pointerDownState.boxSelection.hasOccurred && ((_b = (_a = pointerDownState.hit) === null || _a === void 0 ? void 0 : _a.element) === null || _b === void 0 ? void 0 : _b.id) !== this.state.editingLinearElement.elementId) {\n this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n } else {\n const editingLinearElement = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handlePointerUp(childEvent, this.state.editingLinearElement, this.state, this);\n\n if (editingLinearElement !== this.state.editingLinearElement) {\n this.setState({\n editingLinearElement,\n suggestedBindings: []\n });\n }\n }\n } else if (this.state.selectedLinearElement) {\n if (((_d = (_c = pointerDownState.hit) === null || _c === void 0 ? void 0 : _c.element) === null || _d === void 0 ? void 0 : _d.id) !== this.state.selectedLinearElement.elementId) {\n const selectedELements = this.scene.getSelectedElements(this.state); // set selectedLinearElement to null if there is more than one element selected since we don't want to show linear element handles\n\n if (selectedELements.length > 1) {\n this.setState({\n selectedLinearElement: null\n });\n }\n } else {\n const linearElementEditor = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handlePointerUp(childEvent, this.state.selectedLinearElement, this.state, this);\n const {\n startBindingElement,\n endBindingElement\n } = linearElementEditor;\n const element = this.scene.getElement(linearElementEditor.elementId);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElement)(element)) {\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.bindOrUnbindLinearElement)(element, startBindingElement, endBindingElement, elementsMap);\n }\n\n if (linearElementEditor !== this.state.selectedLinearElement) {\n this.setState({\n selectedLinearElement: Object.assign(Object.assign({}, linearElementEditor), {\n selectedPointsIndices: null\n }),\n suggestedBindings: []\n });\n }\n }\n }\n\n this.missingPointerEventCleanupEmitter.clear();\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, pointerDownState.eventListeners.onMove);\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, pointerDownState.eventListeners.onUp);\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYDOWN, pointerDownState.eventListeners.onKeyDown);\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYUP, pointerDownState.eventListeners.onKeyUp);\n\n if (this.state.pendingImageElementId) {\n this.setState({\n pendingImageElementId: null\n });\n }\n\n (_f = (_e = this.props) === null || _e === void 0 ? void 0 : _e.onPointerUp) === null || _f === void 0 ? void 0 : _f.call(_e, activeTool, pointerDownState);\n this.onPointerUpEmitter.trigger(this.state.activeTool, pointerDownState, childEvent);\n\n if ((draggingElement === null || draggingElement === void 0 ? void 0 : draggingElement.type) === \"freedraw\") {\n const pointerCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)(childEvent, this.state);\n const points = draggingElement.points;\n let dx = pointerCoords.x - draggingElement.x;\n let dy = pointerCoords.y - draggingElement.y; // Allows dots to avoid being flagged as infinitely small\n\n if (dx === points[0][0] && dy === points[0][1]) {\n dy += 0.0001;\n dx += 0.0001;\n }\n\n const pressures = draggingElement.simulatePressure ? [] : [...draggingElement.pressures, childEvent.pressure];\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(draggingElement, {\n points: [...points, [dx, dy]],\n pressures,\n lastCommittedPoint: [dx, dy]\n });\n this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n return;\n }\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isImageElement)(draggingElement)) {\n const imageElement = draggingElement;\n\n try {\n this.initializeImageDimensions(imageElement);\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({\n [imageElement.id]: true\n }, this.state)\n }, () => {\n this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n });\n } catch (error) {\n console.error(error);\n this.scene.replaceAllElements(this.scene.getElementsIncludingDeleted().filter(el => el.id !== imageElement.id));\n this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n }\n\n return;\n }\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(draggingElement)) {\n if (draggingElement.points.length > 1) {\n this.store.shouldCaptureIncrement();\n }\n\n const pointerCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)(childEvent, this.state);\n\n if (!pointerDownState.drag.hasOccurred && draggingElement && !multiElement) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(draggingElement, {\n points: [...draggingElement.points, [pointerCoords.x - draggingElement.x, pointerCoords.y - draggingElement.y]]\n });\n this.setState({\n multiElement: draggingElement,\n editingElement: this.state.draggingElement\n });\n } else if (pointerDownState.drag.hasOccurred && !multiElement) {\n if ((0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.isBindingEnabled)(this.state) && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElement)(draggingElement, false)) {\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.maybeBindLinearElement)(draggingElement, this.state, pointerCoords, this);\n }\n\n this.setState({\n suggestedBindings: [],\n startBoundElement: null\n });\n\n if (!activeTool.locked) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.resetCursor)(this.interactiveCanvas);\n this.setState(prevState => ({\n draggingElement: null,\n activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateActiveTool)(this.state, {\n type: \"selection\"\n }),\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(Object.assign(Object.assign({}, prevState.selectedElementIds), {\n [draggingElement.id]: true\n }), prevState),\n selectedLinearElement: new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(draggingElement)\n }));\n } else {\n this.setState(prevState => ({\n draggingElement: null\n }));\n }\n }\n\n return;\n }\n\n if (activeTool.type !== \"selection\" && draggingElement && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isInvisiblySmallElement)(draggingElement)) {\n // remove invisible element which was added in onPointerDown\n // update the store snapshot, so that invisible elements are not captured by the store\n this.updateScene({\n elements: this.scene.getElementsIncludingDeleted().filter(el => el.id !== draggingElement.id),\n appState: {\n draggingElement: null\n },\n storeAction: _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.UPDATE\n });\n return;\n }\n\n if (draggingElement) {\n if (pointerDownState.drag.hasOccurred) {\n const sceneCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)(childEvent, this.state); // when editing the points of a linear element, we check if the\n // linear element still is in the frame afterwards\n // if not, the linear element will be removed from its frame (if any)\n\n if (this.state.selectedLinearElement && this.state.selectedLinearElement.isDragging) {\n const linearElement = this.scene.getElement(this.state.selectedLinearElement.elementId);\n\n if (linearElement === null || linearElement === void 0 ? void 0 : linearElement.frameId) {\n const frame = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getContainingFrame)(linearElement, elementsMap);\n\n if (frame && linearElement) {\n if (!(0,_frame__WEBPACK_IMPORTED_MODULE_51__.elementOverlapsWithFrame)(linearElement, frame, this.scene.getNonDeletedElementsMap())) {\n // remove the linear element from all groups\n // before removing it from the frame as well\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(linearElement, {\n groupIds: []\n });\n (0,_frame__WEBPACK_IMPORTED_MODULE_51__.removeElementsFromFrame)([linearElement], this.scene.getNonDeletedElementsMap());\n this.scene.triggerUpdate();\n }\n }\n }\n } else {\n // update the relationships between selected elements and frames\n const topLayerFrame = this.getTopLayerFrameAtSceneCoords(sceneCoords);\n const selectedElements = this.scene.getSelectedElements(this.state);\n let nextElements = this.scene.getElementsMapIncludingDeleted();\n\n const updateGroupIdsAfterEditingGroup = elements => {\n if (elements.length > 0) {\n for (const element of elements) {\n const index = element.groupIds.indexOf(this.state.editingGroupId);\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n groupIds: element.groupIds.slice(0, index)\n }, false);\n }\n\n nextElements.forEach(element => {\n if (element.groupIds.length && (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(nextElements, element.groupIds[element.groupIds.length - 1]).length < 2) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n groupIds: []\n }, false);\n }\n });\n this.setState({\n editingGroupId: null\n });\n }\n };\n\n if (topLayerFrame && !this.state.selectedElementIds[topLayerFrame.id]) {\n const elementsToAdd = selectedElements.filter(element => element.frameId !== topLayerFrame.id && (0,_frame__WEBPACK_IMPORTED_MODULE_51__.isElementInFrame)(element, nextElements, this.state));\n\n if (this.state.editingGroupId) {\n updateGroupIdsAfterEditingGroup(elementsToAdd);\n }\n\n nextElements = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.addElementsToFrame)(nextElements, elementsToAdd, topLayerFrame);\n } else if (!topLayerFrame) {\n if (this.state.editingGroupId) {\n const elementsToRemove = selectedElements.filter(element => element.frameId && !(0,_frame__WEBPACK_IMPORTED_MODULE_51__.isElementInFrame)(element, nextElements, this.state));\n updateGroupIdsAfterEditingGroup(elementsToRemove);\n }\n }\n\n nextElements = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.updateFrameMembershipOfSelectedElements)(nextElements, this.state, this);\n this.scene.replaceAllElements(nextElements);\n }\n }\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(draggingElement)) {\n const elementsInsideFrame = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getElementsInNewFrame)(this.scene.getElementsIncludingDeleted(), draggingElement, this.scene.getNonDeletedElementsMap());\n this.scene.replaceAllElements((0,_frame__WEBPACK_IMPORTED_MODULE_51__.addElementsToFrame)(this.scene.getElementsMapIncludingDeleted(), elementsInsideFrame, draggingElement));\n }\n\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(draggingElement, (0,_element__WEBPACK_IMPORTED_MODULE_16__.getNormalizedDimensions)(draggingElement));\n }\n\n if (resizingElement) {\n this.store.shouldCaptureIncrement();\n }\n\n if (resizingElement && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isInvisiblySmallElement)(resizingElement)) {\n // update the store snapshot, so that invisible elements are not captured by the store\n this.updateScene({\n elements: this.scene.getElementsIncludingDeleted().filter(el => el.id !== resizingElement.id),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_80__.StoreAction.UPDATE\n });\n } // handle frame membership for resizing frames and/or selected elements\n\n\n if (pointerDownState.resize.isResizing) {\n let nextElements = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.updateFrameMembershipOfSelectedElements)(this.scene.getElementsIncludingDeleted(), this.state, this);\n const selectedFrames = this.scene.getSelectedElements(this.state).filter(element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(element));\n\n for (const frame of selectedFrames) {\n nextElements = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.replaceAllElementsInFrame)(nextElements, (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getElementsInResizingFrame)(this.scene.getElementsIncludingDeleted(), frame, this.state, elementsMap), frame, this);\n }\n\n this.scene.replaceAllElements(nextElements);\n } // Code below handles selection when element(s) weren't\n // drag or added to selection on pointer down phase.\n\n\n const hitElement = pointerDownState.hit.element;\n\n if (((_g = this.state.selectedLinearElement) === null || _g === void 0 ? void 0 : _g.elementId) !== (hitElement === null || hitElement === void 0 ? void 0 : hitElement.id) && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(hitElement)) {\n const selectedELements = this.scene.getSelectedElements(this.state); // set selectedLinearElement when no other element selected except\n // the one we've hit\n\n if (selectedELements.length === 1) {\n this.setState({\n selectedLinearElement: new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(hitElement)\n });\n }\n }\n\n const pointerStart = this.lastPointerDownEvent;\n const pointerEnd = this.lastPointerUpEvent || this.lastPointerMoveEvent;\n\n if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state) && pointerStart && pointerEnd) {\n this.eraserTrail.endPath();\n const draggedDistance = (0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(pointerStart.clientX, pointerStart.clientY, pointerEnd.clientX, pointerEnd.clientY);\n\n if (draggedDistance === 0) {\n const scenePointer = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.viewportCoordsToSceneCoords)({\n clientX: pointerEnd.clientX,\n clientY: pointerEnd.clientY\n }, this.state);\n const hitElements = this.getElementsAtPosition(scenePointer.x, scenePointer.y);\n hitElements.forEach(hitElement => this.elementsPendingErasure.add(hitElement.id));\n }\n\n this.eraseElements();\n return;\n } else if (this.elementsPendingErasure.size) {\n this.restoreReadyToEraseElements();\n }\n\n if (hitElement && !pointerDownState.drag.hasOccurred && !pointerDownState.hit.wasAddedToSelection && ( // if we're editing a line, pointerup shouldn't switch selection if\n // box selected\n !this.state.editingLinearElement || !pointerDownState.boxSelection.hasOccurred)) {\n // when inside line editor, shift selects points instead\n if (childEvent.shiftKey && !this.state.editingLinearElement) {\n if (this.state.selectedElementIds[hitElement.id]) {\n if ((0,_groups__WEBPACK_IMPORTED_MODULE_23__.isSelectedViaGroup)(this.state, hitElement)) {\n this.setState(_prevState => {\n const nextSelectedElementIds = Object.assign({}, _prevState.selectedElementIds); // We want to unselect all groups hitElement is part of\n // as well as all elements that are part of the groups\n // hitElement is part of\n\n for (const groupedElement of hitElement.groupIds.flatMap(groupId => (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(this.scene.getNonDeletedElements(), groupId))) {\n delete nextSelectedElementIds[groupedElement.id];\n }\n\n return {\n selectedGroupIds: Object.assign(Object.assign({}, _prevState.selectedElementIds), hitElement.groupIds.map(gId => ({\n [gId]: false\n })).reduce((prev, acc) => Object.assign(Object.assign({}, prev), acc), {})),\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(nextSelectedElementIds, _prevState)\n };\n }); // if not dragging a linear element point (outside editor)\n } else if (!((_h = this.state.selectedLinearElement) === null || _h === void 0 ? void 0 : _h.isDragging)) {\n // remove element from selection while\n // keeping prev elements selected\n this.setState(prevState => {\n const newSelectedElementIds = Object.assign({}, prevState.selectedElementIds);\n delete newSelectedElementIds[hitElement.id];\n const newSelectedElements = (0,_scene__WEBPACK_IMPORTED_MODULE_29__.getSelectedElements)(this.scene.getNonDeletedElements(), {\n selectedElementIds: newSelectedElementIds\n });\n return Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n editingGroupId: prevState.editingGroupId,\n selectedElementIds: newSelectedElementIds\n }, this.scene.getNonDeletedElements(), prevState, this)), {\n // set selectedLinearElement only if thats the only element selected\n selectedLinearElement: newSelectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(newSelectedElements[0]) ? new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(newSelectedElements[0]) : prevState.selectedLinearElement\n });\n });\n }\n } else if (hitElement.frameId && this.state.selectedElementIds[hitElement.frameId]) {\n // when hitElement is part of a selected frame, deselect the frame\n // to avoid frame and containing elements selected simultaneously\n this.setState(prevState => {\n var _a, _b;\n\n const nextSelectedElementIds = Object.assign(Object.assign({}, prevState.selectedElementIds), {\n [hitElement.id]: true\n }); // deselect the frame\n\n delete nextSelectedElementIds[hitElement.frameId]; // deselect groups containing the frame\n\n ((_b = (_a = this.scene.getElement(hitElement.frameId)) === null || _a === void 0 ? void 0 : _a.groupIds) !== null && _b !== void 0 ? _b : []).flatMap(gid => (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(this.scene.getNonDeletedElements(), gid)).forEach(element => {\n delete nextSelectedElementIds[element.id];\n });\n return Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n editingGroupId: prevState.editingGroupId,\n selectedElementIds: nextSelectedElementIds\n }, this.scene.getNonDeletedElements(), prevState, this)), {\n showHyperlinkPopup: hitElement.link || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(hitElement) ? \"info\" : false\n });\n });\n } else {\n // add element to selection while keeping prev elements selected\n this.setState(_prevState => ({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(Object.assign(Object.assign({}, _prevState.selectedElementIds), {\n [hitElement.id]: true\n }), _prevState)\n }));\n }\n } else {\n this.setState(prevState => {\n var _a;\n\n return Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n editingGroupId: prevState.editingGroupId,\n selectedElementIds: {\n [hitElement.id]: true\n }\n }, this.scene.getNonDeletedElements(), prevState, this)), {\n selectedLinearElement: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(hitElement) && // Don't set `selectedLinearElement` if its same as the hitElement, this is mainly to prevent resetting the `hoverPointIndex` to -1.\n // Future we should update the API to take care of setting the correct `hoverPointIndex` when initialized\n ((_a = prevState.selectedLinearElement) === null || _a === void 0 ? void 0 : _a.elementId) !== hitElement.id ? new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(hitElement) : prevState.selectedLinearElement\n });\n });\n }\n }\n\n if ( // not dragged\n !pointerDownState.drag.hasOccurred && // not resized\n !this.state.isResizing && ( // only hitting the bounding box of the previous hit element\n hitElement && (0,_element_collision__WEBPACK_IMPORTED_MODULE_87__.hitElementBoundingBoxOnly)({\n x: pointerDownState.origin.x,\n y: pointerDownState.origin.y,\n element: hitElement,\n shape: this.getElementShape(hitElement),\n threshold: this.getElementHitThreshold(),\n frameNameBound: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(hitElement) ? this.frameNameBoundsCache.get(hitElement) : null\n }, elementsMap) || !hitElement && pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements)) {\n if (this.state.editingLinearElement) {\n this.setState({\n editingLinearElement: null\n });\n } else {\n // Deselect selected elements\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, this.state),\n selectedGroupIds: {},\n editingGroupId: null,\n activeEmbeddable: null\n });\n } // reset cursor\n\n\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.AUTO);\n return;\n }\n\n if (!activeTool.locked && activeTool.type !== \"freedraw\" && draggingElement && draggingElement.type !== \"selection\") {\n this.setState(prevState => ({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(Object.assign(Object.assign({}, prevState.selectedElementIds), {\n [draggingElement.id]: true\n }), prevState),\n showHyperlinkPopup: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(draggingElement) && !draggingElement.link ? \"editor\" : prevState.showHyperlinkPopup\n }));\n }\n\n if (activeTool.type !== \"selection\" || (0,_scene__WEBPACK_IMPORTED_MODULE_29__.isSomeElementSelected)(this.scene.getNonDeletedElements(), this.state) || !(0,_utils__WEBPACK_IMPORTED_MODULE_35__.isShallowEqual)(this.state.previousSelectedElementIds, this.state.selectedElementIds)) {\n this.store.shouldCaptureIncrement();\n }\n\n if (pointerDownState.drag.hasOccurred || isResizing || isRotating) {\n // We only allow binding via linear elements, specifically via dragging\n // the endpoints (\"start\" or \"end\").\n const linearElements = this.scene.getSelectedElements(this.state).filter(_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement);\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.bindOrUnbindLinearElements)(linearElements, this, (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.isBindingEnabled)(this.state), (_k = (_j = this.state.selectedLinearElement) === null || _j === void 0 ? void 0 : _j.selectedPointsIndices) !== null && _k !== void 0 ? _k : []);\n }\n\n if (activeTool.type === \"laser\") {\n this.laserTrails.endPath();\n return;\n }\n\n if (!activeTool.locked && activeTool.type !== \"freedraw\") {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_69__.resetCursor)(this.interactiveCanvas);\n this.setState({\n draggingElement: null,\n suggestedBindings: [],\n activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_35__.updateActiveTool)(this.state, {\n type: \"selection\"\n })\n });\n } else {\n this.setState({\n draggingElement: null,\n suggestedBindings: []\n });\n }\n\n if (hitElement && this.lastPointerUpEvent && this.lastPointerDownEvent && this.lastPointerUpEvent.timeStamp - this.lastPointerDownEvent.timeStamp < 300 && gesture.pointers.size <= 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeLikeElement)(hitElement) && this.isIframeLikeElementCenter(hitElement, this.lastPointerUpEvent, pointerDownState.origin.x, pointerDownState.origin.y)) {\n this.handleEmbeddableCenterClick(hitElement);\n }\n });\n } //zsviczian - published on API\n\n\n setSelection(elements) {\n const selectedElementIds = {};\n const selectedGroupIds = {};\n elements.forEach(ele => {\n if (ele.groupIds.length) {\n selectedElementIds[ele.id] = true;\n ele.groupIds.forEach(id => {\n selectedGroupIds[id] = true;\n });\n } // exclude bound text elements as we don't mark them as selected when\n // container is selected unless in group\n else if (!(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(ele)) {\n selectedElementIds[ele.id] = true;\n }\n });\n this.setState({\n previousSelectedElementIds: this.state.selectedElementIds,\n selectedElementIds,\n selectedGroupIds\n });\n }\n\n clearSelection(hitElement) {\n this.setState(prevState => ({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, prevState),\n activeEmbeddable: null,\n selectedGroupIds: {},\n // Continue editing the same group if the user selected a different\n // element from it\n editingGroupId: prevState.editingGroupId && hitElement != null && (0,_groups__WEBPACK_IMPORTED_MODULE_23__.isElementInGroup)(hitElement, prevState.editingGroupId) ? prevState.editingGroupId : null\n }));\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)({}, this.state),\n activeEmbeddable: null,\n previousSelectedElementIds: this.state.selectedElementIds\n });\n }\n\n getTextWysiwygSnappedToCenterPosition(x, y, appState, container) {\n if (container) {\n let elementCenterX = container.x + container.width / 2;\n let elementCenterY = container.y + container.height / 2;\n const elementCenter = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_45__.getContainerCenter)(container, appState, this.scene.getNonDeletedElementsMap());\n\n if (elementCenter) {\n elementCenterX = elementCenter.x;\n elementCenterY = elementCenter.y;\n }\n\n const distanceToCenter = Math.hypot(x - elementCenterX, y - elementCenterY);\n const isSnappedToCenter = distanceToCenter < _constants__WEBPACK_IMPORTED_MODULE_12__.TEXT_TO_CENTER_SNAP_THRESHOLD;\n\n if (isSnappedToCenter) {\n const {\n x: viewportX,\n y: viewportY\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_35__.sceneCoordsToViewportCoords)({\n sceneX: elementCenterX,\n sceneY: elementCenterY\n }, appState);\n return {\n viewportX,\n viewportY,\n elementCenterX,\n elementCenterY\n };\n }\n }\n }\n\n getCanvasOffsets() {\n var _a;\n\n if ((_a = this.excalidrawContainerRef) === null || _a === void 0 ? void 0 : _a.current) {\n const excalidrawContainer = this.excalidrawContainerRef.current;\n const {\n left,\n top\n } = excalidrawContainer.getBoundingClientRect();\n return {\n offsetLeft: left,\n offsetTop: top\n };\n }\n\n return {\n offsetLeft: 0,\n offsetTop: 0\n };\n }\n\n async updateLanguage() {\n const currentLang = _i18n__WEBPACK_IMPORTED_MODULE_25__.languages.find(lang => lang.code === this.props.langCode) || _i18n__WEBPACK_IMPORTED_MODULE_25__.defaultLang;\n await (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.setLanguage)(currentLang);\n this.setAppState({});\n }\n\n}\n\nconst createTestHook = () => {\n if (\"development\" === _constants__WEBPACK_IMPORTED_MODULE_12__.ENV.TEST || \"development\" !== \"production\") {\n window.h = window.h || {};\n Object.defineProperties(window.h, {\n elements: {\n configurable: true,\n\n get() {\n var _a;\n\n return (_a = this.app) === null || _a === void 0 ? void 0 : _a.scene.getElementsIncludingDeleted();\n },\n\n set(elements) {\n var _a;\n\n return (_a = this.app) === null || _a === void 0 ? void 0 : _a.scene.replaceAllElements((0,_fractionalIndex__WEBPACK_IMPORTED_MODULE_90__.syncInvalidIndices)(elements));\n }\n\n }\n });\n }\n};\ncreateTestHook();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (App);\n\n//# sourceURL=webpack://ExcalidrawLib/./components/App.tsx?");
885
885
 
886
886
  /***/ }),
887
887
 
@@ -925,7 +925,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
925
925
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
926
926
 
927
927
  "use strict";
928
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"ButtonIconSelect\": () => (/* binding */ ButtonIconSelect)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! clsx */ \"../../node_modules/clsx/dist/clsx.m.js\");\n\n // TODO: It might be \"clever\" to add option.icon to the existing component <ButtonSelect />\n\nconst ButtonIconSelect = props => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: \"buttonList buttonListIcon\"\n}, {\n children: props.options.map(option => {\n var _a;\n\n return props.type === \"button\" ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"button\", Object.assign({\n onClick: event => props.onClick(option.value, event),\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({\n active: (_a = option.active) !== null && _a !== void 0 ? _a : props.value === option.value\n }),\n \"data-testid\": option.testId,\n title: option.text\n }, {\n children: option.icon\n }), option.text) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"label\", Object.assign({\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({\n active: props.value === option.value\n }),\n title: option.text\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"input\", {\n type: \"radio\",\n name: props.group,\n onChange: () => props.onChange(option.value),\n checked: props.value === option.value,\n \"data-testid\": option.testId\n }), option.icon]\n }), option.text);\n })\n}));\n\n//# sourceURL=webpack://ExcalidrawLib/./components/ButtonIconSelect.tsx?");
928
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"ButtonIconSelect\": () => (/* binding */ ButtonIconSelect)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! clsx */ \"../../node_modules/clsx/dist/clsx.m.js\");\n\n // TODO: It might be \"clever\" to add option.icon to the existing component <ButtonSelect />\n\nconst ButtonIconSelect = props => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: \"buttonList buttonListIcon\"\n}, {\n children: props.options.map(option => {\n var _a;\n\n return props.type === \"button\" ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"button\", Object.assign({\n type: \"button\",\n onClick: event => props.onClick(option.value, event),\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({\n active: (_a = option.active) !== null && _a !== void 0 ? _a : props.value === option.value\n }),\n \"data-testid\": option.testId,\n title: option.text\n }, {\n children: option.icon\n }), option.text) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"label\", Object.assign({\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({\n active: props.value === option.value\n }),\n title: option.text\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"input\", {\n type: \"radio\",\n name: props.group,\n onChange: () => props.onChange(option.value),\n checked: props.value === option.value,\n \"data-testid\": option.testId\n }), option.icon]\n }), option.text);\n })\n}));\n\n//# sourceURL=webpack://ExcalidrawLib/./components/ButtonIconSelect.tsx?");
929
929
 
930
930
  /***/ }),
931
931
 
@@ -947,7 +947,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
947
947
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
948
948
 
949
949
  "use strict";
950
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"CheckboxItem\": () => (/* binding */ CheckboxItem)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! clsx */ \"../../node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./icons */ \"./components/icons.tsx\");\n/* harmony import */ var _CheckboxItem_scss__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./CheckboxItem.scss */ \"./components/CheckboxItem.scss\");\n\n\n\n\n\nconst CheckboxItem = ({\n children,\n checked,\n onChange,\n className\n}) => {\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(\"Checkbox\", className, {\n \"is-checked\": checked\n }),\n onClick: event => {\n onChange(!checked, event);\n event.currentTarget.querySelector(\".Checkbox-box\").focus();\n }\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"button\", Object.assign({\n className: \"Checkbox-box\",\n role: \"checkbox\",\n \"aria-checked\": checked\n }, {\n children: _icons__WEBPACK_IMPORTED_MODULE_3__.checkIcon\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: \"Checkbox-label\"\n }, {\n children: children\n }))]\n }));\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./components/CheckboxItem.tsx?");
950
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"CheckboxItem\": () => (/* binding */ CheckboxItem)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! clsx */ \"../../node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./icons */ \"./components/icons.tsx\");\n/* harmony import */ var _CheckboxItem_scss__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./CheckboxItem.scss */ \"./components/CheckboxItem.scss\");\n\n\n\n\n\nconst CheckboxItem = ({\n children,\n checked,\n onChange,\n className\n}) => {\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(\"Checkbox\", className, {\n \"is-checked\": checked\n }),\n onClick: event => {\n onChange(!checked, event);\n event.currentTarget.querySelector(\".Checkbox-box\").focus();\n }\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"button\", Object.assign({\n type: \"button\",\n className: \"Checkbox-box\",\n role: \"checkbox\",\n \"aria-checked\": checked\n }, {\n children: _icons__WEBPACK_IMPORTED_MODULE_3__.checkIcon\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: \"Checkbox-label\"\n }, {\n children: children\n }))]\n }));\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./components/CheckboxItem.tsx?");
951
951
 
952
952
  /***/ }),
953
953
 
@@ -1013,7 +1013,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
1013
1013
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
1014
1014
 
1015
1015
  "use strict";
1016
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! clsx */ \"../../node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var jotai__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! jotai */ \"../../node_modules/jotai/esm/index.mjs\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _colorPickerUtils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./colorPickerUtils */ \"./components/ColorPicker/colorPickerUtils.ts\");\n/* harmony import */ var _HotkeyLabel__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./HotkeyLabel */ \"./components/ColorPicker/HotkeyLabel.tsx\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../i18n */ \"./i18n.ts\");\n\n\n\n\n\n\n\n\nconst PickerColorList = ({\n palette,\n color,\n onChange,\n label,\n activeShade\n}) => {\n const colorObj = (0,_colorPickerUtils__WEBPACK_IMPORTED_MODULE_3__.getColorNameAndShadeFromColor)({\n color: color || \"transparent\",\n palette\n });\n const [activeColorPickerSection, setActiveColorPickerSection] = (0,jotai__WEBPACK_IMPORTED_MODULE_6__.useAtom)(_colorPickerUtils__WEBPACK_IMPORTED_MODULE_3__.activeColorPickerSectionAtom);\n const btnRef = (0,react__WEBPACK_IMPORTED_MODULE_2__.useRef)(null);\n (0,react__WEBPACK_IMPORTED_MODULE_2__.useEffect)(() => {\n if (btnRef.current && activeColorPickerSection === \"baseColors\") {\n btnRef.current.focus();\n }\n }, [colorObj === null || colorObj === void 0 ? void 0 : colorObj.colorName, activeColorPickerSection]);\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: \"color-picker-content--default\"\n }, {\n children: Object.entries(palette).map(([key, value], index) => {\n const color = (Array.isArray(value) ? value[activeShade] : value) || \"transparent\";\n const keybinding = _colorPickerUtils__WEBPACK_IMPORTED_MODULE_3__.colorPickerHotkeyBindings[index];\n const label = (0,_i18n__WEBPACK_IMPORTED_MODULE_5__.t)(`colors.${key.replace(/\\d+/, \"\")}`, null, \"\");\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"button\", Object.assign({\n ref: (colorObj === null || colorObj === void 0 ? void 0 : colorObj.colorName) === key ? btnRef : undefined,\n tabIndex: -1,\n type: \"button\",\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(\"color-picker__button color-picker__button--large\", {\n active: (colorObj === null || colorObj === void 0 ? void 0 : colorObj.colorName) === key,\n \"is-transparent\": color === \"transparent\" || !color\n }),\n onClick: () => {\n onChange(color);\n setActiveColorPickerSection(\"baseColors\");\n },\n title: `${label}${color.startsWith(\"#\") ? ` ${color}` : \"\"} — ${keybinding}`,\n \"aria-label\": `${label} — ${keybinding}`,\n style: color ? {\n \"--swatch-color\": color\n } : undefined,\n \"data-testid\": `color-${key}`\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n className: \"color-picker__button-outline\"\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_HotkeyLabel__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n color: color,\n keyLabel: keybinding\n })]\n }), key);\n })\n }));\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PickerColorList);\n\n//# sourceURL=webpack://ExcalidrawLib/./components/ColorPicker/PickerColorList.tsx?");
1016
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! clsx */ \"../../node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var jotai__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! jotai */ \"../../node_modules/jotai/esm/index.mjs\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _colorPickerUtils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./colorPickerUtils */ \"./components/ColorPicker/colorPickerUtils.ts\");\n/* harmony import */ var _HotkeyLabel__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./HotkeyLabel */ \"./components/ColorPicker/HotkeyLabel.tsx\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../i18n */ \"./i18n.ts\");\n\n\n\n\n\n\n\n\nconst PickerColorList = ({\n palette,\n color,\n onChange,\n label,\n activeShade\n}) => {\n const colorObj = (0,_colorPickerUtils__WEBPACK_IMPORTED_MODULE_3__.getColorNameAndShadeFromColor)({\n color: color || \"transparent\",\n palette\n });\n const [activeColorPickerSection, setActiveColorPickerSection] = (0,jotai__WEBPACK_IMPORTED_MODULE_6__.useAtom)(_colorPickerUtils__WEBPACK_IMPORTED_MODULE_3__.activeColorPickerSectionAtom);\n const btnRef = (0,react__WEBPACK_IMPORTED_MODULE_2__.useRef)(null);\n (0,react__WEBPACK_IMPORTED_MODULE_2__.useEffect)(() => {\n if (btnRef.current && activeColorPickerSection === \"baseColors\") {\n btnRef.current.focus();\n }\n }, [colorObj === null || colorObj === void 0 ? void 0 : colorObj.colorName, activeColorPickerSection]);\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: \"color-picker-content--default\"\n }, {\n children: Object.entries(palette).map(([key, value], index) => {\n const color = (Array.isArray(value) ? value[activeShade] : value) || \"transparent\";\n const keybinding = _colorPickerUtils__WEBPACK_IMPORTED_MODULE_3__.colorPickerHotkeyBindings[index];\n const label = (0,_i18n__WEBPACK_IMPORTED_MODULE_5__.t)(`colors.${key.replace(/\\d+/, \"\")}`, null, \"\");\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"button\", Object.assign({\n ref: (colorObj === null || colorObj === void 0 ? void 0 : colorObj.colorName) === key ? btnRef : undefined,\n tabIndex: -1,\n type: \"button\",\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(\"color-picker__button color-picker__button--large\", {\n active: (colorObj === null || colorObj === void 0 ? void 0 : colorObj.colorName) === key,\n \"is-transparent\": color === \"transparent\" || !color\n }),\n onClick: () => {\n onChange(color);\n setActiveColorPickerSection(\"baseColors\");\n },\n title: `${label}${color.startsWith(\"#\") ? ` ${color}` : \"\"} — ${keybinding !== null && keybinding !== void 0 ? keybinding : \"\"}`,\n \"aria-label\": `${label} — ${keybinding !== null && keybinding !== void 0 ? keybinding : \"No shortcut\"}`,\n style: color ? {\n \"--swatch-color\": color\n } : undefined,\n \"data-testid\": `color-${key}`\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n className: \"color-picker__button-outline\"\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_HotkeyLabel__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n color: color,\n keyLabel: keybinding !== null && keybinding !== void 0 ? keybinding : \"\"\n })]\n }), key);\n })\n }));\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PickerColorList);\n\n//# sourceURL=webpack://ExcalidrawLib/./components/ColorPicker/PickerColorList.tsx?");
1017
1017
 
1018
1018
  /***/ }),
1019
1019
 
@@ -1112,7 +1112,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
1112
1112
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
1113
1113
 
1114
1114
  "use strict";
1115
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"CONTEXT_MENU_SEPARATOR\": () => (/* binding */ CONTEXT_MENU_SEPARATOR),\n/* harmony export */ \"ContextMenu\": () => (/* binding */ ContextMenu)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! clsx */ \"../../node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var _Popover__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Popover */ \"./components/Popover.tsx\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../i18n */ \"./i18n.ts\");\n/* harmony import */ var _ContextMenu_scss__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./ContextMenu.scss */ \"./components/ContextMenu.scss\");\n/* harmony import */ var _actions_shortcuts__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../actions/shortcuts */ \"./actions/shortcuts.ts\");\n/* harmony import */ var _App__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./App */ \"./components/App.tsx\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_7__);\n\n\n\n\n\n\n\n\nconst CONTEXT_MENU_SEPARATOR = \"separator\";\nconst ContextMenu = react__WEBPACK_IMPORTED_MODULE_7___default().memo(({\n actionManager,\n items,\n top,\n left,\n onClose\n}) => {\n const appState = (0,_App__WEBPACK_IMPORTED_MODULE_6__.useExcalidrawAppState)();\n const elements = (0,_App__WEBPACK_IMPORTED_MODULE_6__.useExcalidrawElements)();\n const {\n onContextMenu\n } = (0,_App__WEBPACK_IMPORTED_MODULE_6__.useAppProps)(); //zsviczian\n\n const filteredItems = items.reduce((acc, item) => {\n if (item && (item === CONTEXT_MENU_SEPARATOR || !item.predicate || item.predicate(elements, appState, actionManager.app.props, actionManager.app))) {\n acc.push(item);\n }\n\n return acc;\n }, []);\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Popover__WEBPACK_IMPORTED_MODULE_2__.Popover, Object.assign({\n onCloseRequest: () => {\n onClose();\n },\n top: top,\n left: left,\n fitInViewport: true,\n offsetLeft: appState.offsetLeft,\n offsetTop: appState.offsetTop,\n viewportWidth: appState.width,\n viewportHeight: appState.height\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"ul\", Object.assign({\n className: \"context-menu\",\n onContextMenu: event => event.preventDefault()\n }, {\n children: [onContextMenu && (onContextMenu === null || onContextMenu === void 0 ? void 0 : onContextMenu(elements, appState, onClose))\n /*zsviczian*/\n , filteredItems.map((item, idx) => {\n var _a;\n\n if (item === CONTEXT_MENU_SEPARATOR) {\n if (!filteredItems[idx - 1] || filteredItems[idx - 1] === CONTEXT_MENU_SEPARATOR) {\n return null;\n }\n\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"hr\", {\n className: \"context-menu-item-separator\"\n }, idx);\n }\n\n const actionName = item.name;\n let label = \"\";\n\n if (item.label) {\n if (typeof item.label === \"function\") {\n label = (0,_i18n__WEBPACK_IMPORTED_MODULE_3__.t)(item.label(elements, appState, actionManager.app));\n } else {\n label = (0,_i18n__WEBPACK_IMPORTED_MODULE_3__.t)(item.label);\n }\n }\n\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"li\", Object.assign({\n \"data-testid\": actionName,\n onClick: () => {\n // we need update state before executing the action in case\n // the action uses the appState it's being passed (that still\n // contains a defined contextMenu) to return the next state.\n onClose(() => {\n actionManager.executeAction(item, \"contextMenu\");\n });\n }\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"button\", Object.assign({\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(\"context-menu-item\", {\n dangerous: actionName === \"deleteSelectedElements\",\n checkmark: (_a = item.checked) === null || _a === void 0 ? void 0 : _a.call(item, appState)\n })\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: \"context-menu-item__label\"\n }, {\n children: label\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"kbd\", Object.assign({\n className: \"context-menu-item__shortcut\"\n }, {\n children: actionName ? (0,_actions_shortcuts__WEBPACK_IMPORTED_MODULE_5__.getShortcutFromShortcutName)(actionName) : \"\"\n }))]\n }))\n }), idx);\n })]\n }))\n }));\n});\n\n//# sourceURL=webpack://ExcalidrawLib/./components/ContextMenu.tsx?");
1115
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"CONTEXT_MENU_SEPARATOR\": () => (/* binding */ CONTEXT_MENU_SEPARATOR),\n/* harmony export */ \"ContextMenu\": () => (/* binding */ ContextMenu)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! clsx */ \"../../node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var _Popover__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Popover */ \"./components/Popover.tsx\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../i18n */ \"./i18n.ts\");\n/* harmony import */ var _ContextMenu_scss__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./ContextMenu.scss */ \"./components/ContextMenu.scss\");\n/* harmony import */ var _actions_shortcuts__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../actions/shortcuts */ \"./actions/shortcuts.ts\");\n/* harmony import */ var _App__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./App */ \"./components/App.tsx\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_7__);\n\n\n\n\n\n\n\n\nconst CONTEXT_MENU_SEPARATOR = \"separator\";\nconst ContextMenu = react__WEBPACK_IMPORTED_MODULE_7___default().memo(({\n actionManager,\n items,\n top,\n left,\n onClose\n}) => {\n const appState = (0,_App__WEBPACK_IMPORTED_MODULE_6__.useExcalidrawAppState)();\n const elements = (0,_App__WEBPACK_IMPORTED_MODULE_6__.useExcalidrawElements)();\n const {\n onContextMenu\n } = (0,_App__WEBPACK_IMPORTED_MODULE_6__.useAppProps)(); //zsviczian\n\n const filteredItems = items.reduce((acc, item) => {\n if (item && (item === CONTEXT_MENU_SEPARATOR || !item.predicate || item.predicate(elements, appState, actionManager.app.props, actionManager.app))) {\n acc.push(item);\n }\n\n return acc;\n }, []);\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Popover__WEBPACK_IMPORTED_MODULE_2__.Popover, Object.assign({\n onCloseRequest: () => {\n onClose();\n },\n top: top,\n left: left,\n fitInViewport: true,\n offsetLeft: appState.offsetLeft,\n offsetTop: appState.offsetTop,\n viewportWidth: appState.width,\n viewportHeight: appState.height\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"ul\", Object.assign({\n className: \"context-menu\",\n onContextMenu: event => event.preventDefault()\n }, {\n children: [onContextMenu && (onContextMenu === null || onContextMenu === void 0 ? void 0 : onContextMenu(elements, appState, onClose))\n /*zsviczian*/\n , filteredItems.map((item, idx) => {\n var _a;\n\n if (item === CONTEXT_MENU_SEPARATOR) {\n if (!filteredItems[idx - 1] || filteredItems[idx - 1] === CONTEXT_MENU_SEPARATOR) {\n return null;\n }\n\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"hr\", {\n className: \"context-menu-item-separator\"\n }, idx);\n }\n\n const actionName = item.name;\n let label = \"\";\n\n if (item.label) {\n if (typeof item.label === \"function\") {\n label = (0,_i18n__WEBPACK_IMPORTED_MODULE_3__.t)(item.label(elements, appState, actionManager.app));\n } else {\n label = (0,_i18n__WEBPACK_IMPORTED_MODULE_3__.t)(item.label);\n }\n }\n\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"li\", Object.assign({\n \"data-testid\": actionName,\n onClick: () => {\n // we need update state before executing the action in case\n // the action uses the appState it's being passed (that still\n // contains a defined contextMenu) to return the next state.\n onClose(() => {\n actionManager.executeAction(item, \"contextMenu\");\n });\n }\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"button\", Object.assign({\n type: \"button\",\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(\"context-menu-item\", {\n dangerous: actionName === \"deleteSelectedElements\",\n checkmark: (_a = item.checked) === null || _a === void 0 ? void 0 : _a.call(item, appState)\n })\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: \"context-menu-item__label\"\n }, {\n children: label\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"kbd\", Object.assign({\n className: \"context-menu-item__shortcut\"\n }, {\n children: actionName ? (0,_actions_shortcuts__WEBPACK_IMPORTED_MODULE_5__.getShortcutFromShortcutName)(actionName) : \"\"\n }))]\n }))\n }), idx);\n })]\n }))\n }));\n});\n\n//# sourceURL=webpack://ExcalidrawLib/./components/ContextMenu.tsx?");
1116
1116
 
1117
1117
  /***/ }),
1118
1118
 
@@ -1145,7 +1145,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
1145
1145
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
1146
1146
 
1147
1147
  "use strict";
1148
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"Dialog\": () => (/* binding */ Dialog)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! clsx */ \"../../node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _hooks_useCallbackRefState__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../hooks/useCallbackRefState */ \"./hooks/useCallbackRefState.ts\");\n/* harmony import */ var _App__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./App */ \"./components/App.tsx\");\n/* harmony import */ var _keys__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../keys */ \"./keys.ts\");\n/* harmony import */ var _Dialog_scss__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Dialog.scss */ \"./components/Dialog.scss\");\n/* harmony import */ var _Island__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./Island */ \"./components/Island.tsx\");\n/* harmony import */ var _Modal__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./Modal */ \"./components/Modal.tsx\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var jotai__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! jotai */ \"../../node_modules/jotai/esm/index.mjs\");\n/* harmony import */ var _LibraryMenu__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./LibraryMenu */ \"./components/LibraryMenu.tsx\");\n/* harmony import */ var _jotai__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../jotai */ \"./jotai.ts\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../i18n */ \"./i18n.ts\");\n/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./icons */ \"./components/icons.tsx\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nfunction getDialogSize(size) {\n if (size && typeof size === \"number\") {\n return size;\n }\n\n switch (size) {\n case \"small\":\n return 550;\n\n case \"wide\":\n return 1024;\n\n case \"regular\":\n default:\n return 800;\n }\n}\n\nconst Dialog = props => {\n const [islandNode, setIslandNode] = (0,_hooks_useCallbackRefState__WEBPACK_IMPORTED_MODULE_3__.useCallbackRefState)();\n const [lastActiveElement] = (0,react__WEBPACK_IMPORTED_MODULE_2__.useState)(document.activeElement);\n const {\n id\n } = (0,_App__WEBPACK_IMPORTED_MODULE_4__.useExcalidrawContainer)();\n const {\n dynamicStyle\n } = (0,_App__WEBPACK_IMPORTED_MODULE_4__.useExcalidrawAppState)(); //zsviczian\n\n const isFullscreen = (0,_App__WEBPACK_IMPORTED_MODULE_4__.useDevice)().viewport.isMobile;\n (0,react__WEBPACK_IMPORTED_MODULE_2__.useEffect)(() => {\n if (!islandNode) {\n return;\n }\n\n const focusableElements = (0,_utils__WEBPACK_IMPORTED_MODULE_9__.queryFocusableElements)(islandNode);\n setTimeout(() => {\n if (focusableElements.length > 0 && props.autofocus !== false) {\n // If there's an element other than close, focus it.\n (focusableElements[1] || focusableElements[0]).focus();\n }\n });\n\n const handleKeyDown = event => {\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_5__.KEYS.TAB) {\n const focusableElements = (0,_utils__WEBPACK_IMPORTED_MODULE_9__.queryFocusableElements)(islandNode);\n const {\n activeElement\n } = document;\n const currentIndex = focusableElements.findIndex(element => element === activeElement);\n\n if (currentIndex === 0 && event.shiftKey) {\n focusableElements[focusableElements.length - 1].focus();\n event.preventDefault();\n } else if (currentIndex === focusableElements.length - 1 && !event.shiftKey) {\n focusableElements[0].focus();\n event.preventDefault();\n }\n }\n };\n\n islandNode.addEventListener(\"keydown\", handleKeyDown);\n return () => islandNode.removeEventListener(\"keydown\", handleKeyDown);\n }, [islandNode, props.autofocus]);\n const setAppState = (0,_App__WEBPACK_IMPORTED_MODULE_4__.useExcalidrawSetAppState)();\n const setIsLibraryMenuOpen = (0,jotai__WEBPACK_IMPORTED_MODULE_14__.useSetAtom)(_LibraryMenu__WEBPACK_IMPORTED_MODULE_10__.isLibraryMenuOpenAtom, _jotai__WEBPACK_IMPORTED_MODULE_11__.jotaiScope);\n\n const onClose = () => {\n setAppState({\n openMenu: null\n });\n setIsLibraryMenuOpen(false);\n lastActiveElement.focus();\n props.onCloseRequest();\n };\n\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Modal__WEBPACK_IMPORTED_MODULE_8__.Modal, Object.assign({\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(\"Dialog\", props.className, {\n \"Dialog--fullscreen\": isFullscreen\n }),\n labelledBy: \"dialog-title\",\n maxWidth: getDialogSize(props.size),\n onCloseRequest: onClose,\n closeOnClickOutside: props.closeOnClickOutside,\n style: dynamicStyle\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Island__WEBPACK_IMPORTED_MODULE_7__.Island, Object.assign({\n ref: setIslandNode\n }, {\n children: [props.title && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"h2\", Object.assign({\n id: `${id}-dialog-title`,\n className: \"Dialog__title\"\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"span\", Object.assign({\n className: \"Dialog__titleContent\"\n }, {\n children: props.title\n }))\n })), isFullscreen && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"button\", Object.assign({\n className: \"Dialog__close\",\n onClick: onClose,\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_12__.t)(\"buttons.close\"),\n \"aria-label\": (0,_i18n__WEBPACK_IMPORTED_MODULE_12__.t)(\"buttons.close\")\n }, {\n children: _icons__WEBPACK_IMPORTED_MODULE_13__.CloseIcon\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: \"Dialog__content\"\n }, {\n children: props.children\n }))]\n }))\n }));\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./components/Dialog.tsx?");
1148
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"Dialog\": () => (/* binding */ Dialog)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! clsx */ \"../../node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _hooks_useCallbackRefState__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../hooks/useCallbackRefState */ \"./hooks/useCallbackRefState.ts\");\n/* harmony import */ var _App__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./App */ \"./components/App.tsx\");\n/* harmony import */ var _keys__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../keys */ \"./keys.ts\");\n/* harmony import */ var _Dialog_scss__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Dialog.scss */ \"./components/Dialog.scss\");\n/* harmony import */ var _Island__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./Island */ \"./components/Island.tsx\");\n/* harmony import */ var _Modal__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./Modal */ \"./components/Modal.tsx\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var jotai__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! jotai */ \"../../node_modules/jotai/esm/index.mjs\");\n/* harmony import */ var _LibraryMenu__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./LibraryMenu */ \"./components/LibraryMenu.tsx\");\n/* harmony import */ var _jotai__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../jotai */ \"./jotai.ts\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../i18n */ \"./i18n.ts\");\n/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./icons */ \"./components/icons.tsx\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nfunction getDialogSize(size) {\n if (size && typeof size === \"number\") {\n return size;\n }\n\n switch (size) {\n case \"small\":\n return 550;\n\n case \"wide\":\n return 1024;\n\n case \"regular\":\n default:\n return 800;\n }\n}\n\nconst Dialog = props => {\n const [islandNode, setIslandNode] = (0,_hooks_useCallbackRefState__WEBPACK_IMPORTED_MODULE_3__.useCallbackRefState)();\n const [lastActiveElement] = (0,react__WEBPACK_IMPORTED_MODULE_2__.useState)(document.activeElement);\n const {\n id\n } = (0,_App__WEBPACK_IMPORTED_MODULE_4__.useExcalidrawContainer)();\n const {\n dynamicStyle\n } = (0,_App__WEBPACK_IMPORTED_MODULE_4__.useExcalidrawAppState)(); //zsviczian\n\n const isFullscreen = (0,_App__WEBPACK_IMPORTED_MODULE_4__.useDevice)().viewport.isMobile;\n (0,react__WEBPACK_IMPORTED_MODULE_2__.useEffect)(() => {\n if (!islandNode) {\n return;\n }\n\n const focusableElements = (0,_utils__WEBPACK_IMPORTED_MODULE_9__.queryFocusableElements)(islandNode);\n setTimeout(() => {\n if (focusableElements.length > 0 && props.autofocus !== false) {\n // If there's an element other than close, focus it.\n (focusableElements[1] || focusableElements[0]).focus();\n }\n });\n\n const handleKeyDown = event => {\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_5__.KEYS.TAB) {\n const focusableElements = (0,_utils__WEBPACK_IMPORTED_MODULE_9__.queryFocusableElements)(islandNode);\n const {\n activeElement\n } = document;\n const currentIndex = focusableElements.findIndex(element => element === activeElement);\n\n if (currentIndex === 0 && event.shiftKey) {\n focusableElements[focusableElements.length - 1].focus();\n event.preventDefault();\n } else if (currentIndex === focusableElements.length - 1 && !event.shiftKey) {\n focusableElements[0].focus();\n event.preventDefault();\n }\n }\n };\n\n islandNode.addEventListener(\"keydown\", handleKeyDown);\n return () => islandNode.removeEventListener(\"keydown\", handleKeyDown);\n }, [islandNode, props.autofocus]);\n const setAppState = (0,_App__WEBPACK_IMPORTED_MODULE_4__.useExcalidrawSetAppState)();\n const setIsLibraryMenuOpen = (0,jotai__WEBPACK_IMPORTED_MODULE_14__.useSetAtom)(_LibraryMenu__WEBPACK_IMPORTED_MODULE_10__.isLibraryMenuOpenAtom, _jotai__WEBPACK_IMPORTED_MODULE_11__.jotaiScope);\n\n const onClose = () => {\n setAppState({\n openMenu: null\n });\n setIsLibraryMenuOpen(false);\n lastActiveElement.focus();\n props.onCloseRequest();\n };\n\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Modal__WEBPACK_IMPORTED_MODULE_8__.Modal, Object.assign({\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(\"Dialog\", props.className, {\n \"Dialog--fullscreen\": isFullscreen\n }),\n labelledBy: \"dialog-title\",\n maxWidth: getDialogSize(props.size),\n onCloseRequest: onClose,\n closeOnClickOutside: props.closeOnClickOutside,\n style: dynamicStyle\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Island__WEBPACK_IMPORTED_MODULE_7__.Island, Object.assign({\n ref: setIslandNode\n }, {\n children: [props.title && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"h2\", Object.assign({\n id: `${id}-dialog-title`,\n className: \"Dialog__title\"\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"span\", Object.assign({\n className: \"Dialog__titleContent\"\n }, {\n children: props.title\n }))\n })), isFullscreen && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"button\", Object.assign({\n className: \"Dialog__close\",\n onClick: onClose,\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_12__.t)(\"buttons.close\"),\n \"aria-label\": (0,_i18n__WEBPACK_IMPORTED_MODULE_12__.t)(\"buttons.close\"),\n type: \"button\"\n }, {\n children: _icons__WEBPACK_IMPORTED_MODULE_13__.CloseIcon\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: \"Dialog__content\"\n }, {\n children: props.children\n }))]\n }))\n }));\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./components/Dialog.tsx?");
1149
1149
 
1150
1150
  /***/ }),
1151
1151
 
@@ -1222,7 +1222,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
1222
1222
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
1223
1223
 
1224
1224
  "use strict";
1225
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../icons */ \"./components/icons.tsx\");\n/* harmony import */ var _FollowMode_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./FollowMode.scss */ \"./components/FollowMode/FollowMode.scss\");\n\n\n\n\nconst FollowMode = ({\n height,\n width,\n userToFollow,\n onDisconnect\n}) => {\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: \"follow-mode\",\n style: {\n width,\n height\n }\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n className: \"follow-mode__badge\"\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n className: \"follow-mode__badge__label\"\n }, {\n children: [\"Following\", \" \", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"span\", Object.assign({\n className: \"follow-mode__badge__username\",\n title: userToFollow.username\n }, {\n children: userToFollow.username\n }))]\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"button\", Object.assign({\n onClick: onDisconnect,\n className: \"follow-mode__disconnect-btn\"\n }, {\n children: _icons__WEBPACK_IMPORTED_MODULE_1__.CloseIcon\n }))]\n }))\n }));\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FollowMode);\n\n//# sourceURL=webpack://ExcalidrawLib/./components/FollowMode/FollowMode.tsx?");
1225
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../icons */ \"./components/icons.tsx\");\n/* harmony import */ var _FollowMode_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./FollowMode.scss */ \"./components/FollowMode/FollowMode.scss\");\n\n\n\n\nconst FollowMode = ({\n height,\n width,\n userToFollow,\n onDisconnect\n}) => {\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: \"follow-mode\",\n style: {\n width,\n height\n }\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n className: \"follow-mode__badge\"\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n className: \"follow-mode__badge__label\"\n }, {\n children: [\"Following\", \" \", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"span\", Object.assign({\n className: \"follow-mode__badge__username\",\n title: userToFollow.username\n }, {\n children: userToFollow.username\n }))]\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"button\", Object.assign({\n type: \"button\",\n onClick: onDisconnect,\n className: \"follow-mode__disconnect-btn\"\n }, {\n children: _icons__WEBPACK_IMPORTED_MODULE_1__.CloseIcon\n }))]\n }))\n }));\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FollowMode);\n\n//# sourceURL=webpack://ExcalidrawLib/./components/FollowMode/FollowMode.tsx?");
1226
1226
 
1227
1227
  /***/ }),
1228
1228
 
@@ -1277,7 +1277,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
1277
1277
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
1278
1278
 
1279
1279
  "use strict";
1280
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"IconPicker\": () => (/* binding */ IconPicker)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _Popover__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Popover */ \"./components/Popover.tsx\");\n/* harmony import */ var _IconPicker_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./IconPicker.scss */ \"./components/IconPicker.scss\");\n/* harmony import */ var _keys__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../keys */ \"./keys.ts\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../i18n */ \"./i18n.ts\");\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! clsx */ \"../../node_modules/clsx/dist/clsx.m.js\");\n\n\n\n\n\n\n\n\nfunction Picker({\n options,\n value,\n label,\n onChange,\n onClose\n}) {\n const rFirstItem = react__WEBPACK_IMPORTED_MODULE_1___default().useRef();\n const rActiveItem = react__WEBPACK_IMPORTED_MODULE_1___default().useRef();\n const rGallery = react__WEBPACK_IMPORTED_MODULE_1___default().useRef(null);\n react__WEBPACK_IMPORTED_MODULE_1___default().useEffect(() => {\n // After the component is first mounted focus on first input\n if (rActiveItem.current) {\n rActiveItem.current.focus();\n } else if (rGallery.current) {\n rGallery.current.focus();\n }\n }, []);\n\n const handleKeyDown = event => {\n const pressedOption = options.find(option => option.keyBinding === event.key.toLowerCase());\n\n if (!(event.metaKey || event.altKey || event.ctrlKey) && pressedOption) {\n // Keybinding navigation\n const index = options.indexOf(pressedOption);\n rGallery.current.children[index].focus();\n event.preventDefault();\n } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_4__.KEYS.TAB) {\n // Tab navigation cycle through options. If the user tabs\n // away from the picker, close the picker. We need to use\n // a timeout here to let the stack clear before checking.\n setTimeout(() => {\n const active = rActiveItem.current;\n const docActive = document.activeElement;\n\n if (active !== docActive) {\n onClose();\n }\n }, 0);\n } else if ((0,_keys__WEBPACK_IMPORTED_MODULE_4__.isArrowKey)(event.key)) {\n // Arrow navigation\n const {\n activeElement\n } = document;\n const isRTL = (0,_i18n__WEBPACK_IMPORTED_MODULE_5__.getLanguage)().rtl;\n const index = Array.prototype.indexOf.call(rGallery.current.children, activeElement);\n\n if (index !== -1) {\n const length = options.length;\n let nextIndex = index;\n\n switch (event.key) {\n // Select the next option\n case isRTL ? _keys__WEBPACK_IMPORTED_MODULE_4__.KEYS.ARROW_LEFT : _keys__WEBPACK_IMPORTED_MODULE_4__.KEYS.ARROW_RIGHT:\n case _keys__WEBPACK_IMPORTED_MODULE_4__.KEYS.ARROW_DOWN:\n {\n nextIndex = (index + 1) % length;\n break;\n }\n // Select the previous option\n\n case isRTL ? _keys__WEBPACK_IMPORTED_MODULE_4__.KEYS.ARROW_RIGHT : _keys__WEBPACK_IMPORTED_MODULE_4__.KEYS.ARROW_LEFT:\n case _keys__WEBPACK_IMPORTED_MODULE_4__.KEYS.ARROW_UP:\n {\n nextIndex = (length + index - 1) % length;\n break;\n }\n }\n\n rGallery.current.children[nextIndex].focus();\n }\n\n event.preventDefault();\n } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_4__.KEYS.ESCAPE || event.key === _keys__WEBPACK_IMPORTED_MODULE_4__.KEYS.ENTER) {\n // Close on escape or enter\n event.preventDefault();\n onClose();\n }\n\n event.nativeEvent.stopImmediatePropagation();\n event.stopPropagation();\n };\n\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: `picker`,\n role: \"dialog\",\n \"aria-modal\": \"true\",\n \"aria-label\": label,\n onKeyDown: handleKeyDown\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: \"picker-content\",\n ref: rGallery\n }, {\n children: options.map((option, i) => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"button\", Object.assign({\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_6__[\"default\"])(\"picker-option\", {\n active: value === option.value\n }),\n onClick: event => {\n event.currentTarget.focus();\n onChange(option.value);\n },\n title: `${option.text} ${option.keyBinding && `— ${option.keyBinding.toUpperCase()}`}`,\n \"aria-label\": option.text || \"none\",\n \"aria-keyshortcuts\": option.keyBinding || undefined,\n ref: el => {\n if (el && i === 0) {\n rFirstItem.current = el;\n }\n\n if (el && option.value === value) {\n rActiveItem.current = el;\n }\n },\n onFocus: () => {\n onChange(option.value);\n }\n }, {\n children: [option.icon, option.keyBinding && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"span\", Object.assign({\n className: \"picker-keybinding\"\n }, {\n children: option.keyBinding\n }))]\n }), option.text))\n }))\n }));\n}\n\nfunction IconPicker({\n value,\n label,\n options,\n onChange,\n group = \"\"\n}) {\n var _a;\n\n const [isActive, setActive] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(false);\n const rPickerButton = react__WEBPACK_IMPORTED_MODULE_1___default().useRef(null);\n const isRTL = (0,_i18n__WEBPACK_IMPORTED_MODULE_5__.getLanguage)().rtl;\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"button\", Object.assign({\n name: group,\n className: isActive ? \"active\" : \"\",\n \"aria-label\": label,\n onClick: () => setActive(!isActive),\n ref: rPickerButton\n }, {\n children: (_a = options.find(option => option.value === value)) === null || _a === void 0 ? void 0 : _a.icon\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)((react__WEBPACK_IMPORTED_MODULE_1___default().Suspense), Object.assign({\n fallback: \"\"\n }, {\n children: isActive ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Popover__WEBPACK_IMPORTED_MODULE_2__.Popover, Object.assign({\n onCloseRequest: event => event.target !== rPickerButton.current && setActive(false)\n }, isRTL ? {\n right: 5.5\n } : {\n left: -5.5\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Picker, {\n options: options.filter(opt => opt.showInPicker !== false),\n value: value,\n label: label,\n onChange: onChange,\n onClose: () => {\n var _a;\n\n setActive(false);\n (_a = rPickerButton.current) === null || _a === void 0 ? void 0 : _a.focus();\n }\n })\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n className: \"picker-triangle\"\n })]\n }) : null\n }))]\n });\n}\n\n//# sourceURL=webpack://ExcalidrawLib/./components/IconPicker.tsx?");
1280
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"IconPicker\": () => (/* binding */ IconPicker)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _Popover__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Popover */ \"./components/Popover.tsx\");\n/* harmony import */ var _IconPicker_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./IconPicker.scss */ \"./components/IconPicker.scss\");\n/* harmony import */ var _keys__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../keys */ \"./keys.ts\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../i18n */ \"./i18n.ts\");\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! clsx */ \"../../node_modules/clsx/dist/clsx.m.js\");\n\n\n\n\n\n\n\n\nfunction Picker({\n options,\n value,\n label,\n onChange,\n onClose\n}) {\n const rFirstItem = react__WEBPACK_IMPORTED_MODULE_1___default().useRef();\n const rActiveItem = react__WEBPACK_IMPORTED_MODULE_1___default().useRef();\n const rGallery = react__WEBPACK_IMPORTED_MODULE_1___default().useRef(null);\n react__WEBPACK_IMPORTED_MODULE_1___default().useEffect(() => {\n // After the component is first mounted focus on first input\n if (rActiveItem.current) {\n rActiveItem.current.focus();\n } else if (rGallery.current) {\n rGallery.current.focus();\n }\n }, []);\n\n const handleKeyDown = event => {\n const pressedOption = options.find(option => option.keyBinding === event.key.toLowerCase());\n\n if (!(event.metaKey || event.altKey || event.ctrlKey) && pressedOption) {\n // Keybinding navigation\n const index = options.indexOf(pressedOption);\n rGallery.current.children[index].focus();\n event.preventDefault();\n } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_4__.KEYS.TAB) {\n // Tab navigation cycle through options. If the user tabs\n // away from the picker, close the picker. We need to use\n // a timeout here to let the stack clear before checking.\n setTimeout(() => {\n const active = rActiveItem.current;\n const docActive = document.activeElement;\n\n if (active !== docActive) {\n onClose();\n }\n }, 0);\n } else if ((0,_keys__WEBPACK_IMPORTED_MODULE_4__.isArrowKey)(event.key)) {\n // Arrow navigation\n const {\n activeElement\n } = document;\n const isRTL = (0,_i18n__WEBPACK_IMPORTED_MODULE_5__.getLanguage)().rtl;\n const index = Array.prototype.indexOf.call(rGallery.current.children, activeElement);\n\n if (index !== -1) {\n const length = options.length;\n let nextIndex = index;\n\n switch (event.key) {\n // Select the next option\n case isRTL ? _keys__WEBPACK_IMPORTED_MODULE_4__.KEYS.ARROW_LEFT : _keys__WEBPACK_IMPORTED_MODULE_4__.KEYS.ARROW_RIGHT:\n case _keys__WEBPACK_IMPORTED_MODULE_4__.KEYS.ARROW_DOWN:\n {\n nextIndex = (index + 1) % length;\n break;\n }\n // Select the previous option\n\n case isRTL ? _keys__WEBPACK_IMPORTED_MODULE_4__.KEYS.ARROW_RIGHT : _keys__WEBPACK_IMPORTED_MODULE_4__.KEYS.ARROW_LEFT:\n case _keys__WEBPACK_IMPORTED_MODULE_4__.KEYS.ARROW_UP:\n {\n nextIndex = (length + index - 1) % length;\n break;\n }\n }\n\n rGallery.current.children[nextIndex].focus();\n }\n\n event.preventDefault();\n } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_4__.KEYS.ESCAPE || event.key === _keys__WEBPACK_IMPORTED_MODULE_4__.KEYS.ENTER) {\n // Close on escape or enter\n event.preventDefault();\n onClose();\n }\n\n event.nativeEvent.stopImmediatePropagation();\n event.stopPropagation();\n };\n\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: `picker`,\n role: \"dialog\",\n \"aria-modal\": \"true\",\n \"aria-label\": label,\n onKeyDown: handleKeyDown\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: \"picker-content\",\n ref: rGallery\n }, {\n children: options.map((option, i) => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"button\", Object.assign({\n type: \"button\",\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_6__[\"default\"])(\"picker-option\", {\n active: value === option.value\n }),\n onClick: event => {\n event.currentTarget.focus();\n onChange(option.value);\n },\n title: `${option.text} ${option.keyBinding && `— ${option.keyBinding.toUpperCase()}`}`,\n \"aria-label\": option.text || \"none\",\n \"aria-keyshortcuts\": option.keyBinding || undefined,\n ref: el => {\n if (el && i === 0) {\n rFirstItem.current = el;\n }\n\n if (el && option.value === value) {\n rActiveItem.current = el;\n }\n },\n onFocus: () => {\n onChange(option.value);\n }\n }, {\n children: [option.icon, option.keyBinding && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"span\", Object.assign({\n className: \"picker-keybinding\"\n }, {\n children: option.keyBinding\n }))]\n }), option.text))\n }))\n }));\n}\n\nfunction IconPicker({\n value,\n label,\n options,\n onChange,\n group = \"\"\n}) {\n var _a;\n\n const [isActive, setActive] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(false);\n const rPickerButton = react__WEBPACK_IMPORTED_MODULE_1___default().useRef(null);\n const isRTL = (0,_i18n__WEBPACK_IMPORTED_MODULE_5__.getLanguage)().rtl;\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"button\", Object.assign({\n name: group,\n type: \"button\",\n className: isActive ? \"active\" : \"\",\n \"aria-label\": label,\n onClick: () => setActive(!isActive),\n ref: rPickerButton\n }, {\n children: (_a = options.find(option => option.value === value)) === null || _a === void 0 ? void 0 : _a.icon\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)((react__WEBPACK_IMPORTED_MODULE_1___default().Suspense), Object.assign({\n fallback: \"\"\n }, {\n children: isActive ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Popover__WEBPACK_IMPORTED_MODULE_2__.Popover, Object.assign({\n onCloseRequest: event => event.target !== rPickerButton.current && setActive(false)\n }, isRTL ? {\n right: 5.5\n } : {\n left: -5.5\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Picker, {\n options: options.filter(opt => opt.showInPicker !== false),\n value: value,\n label: label,\n onChange: onChange,\n onClose: () => {\n var _a;\n\n setActive(false);\n (_a = rPickerButton.current) === null || _a === void 0 ? void 0 : _a.focus();\n }\n })\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n className: \"picker-triangle\"\n })]\n }) : null\n }))]\n });\n}\n\n//# sourceURL=webpack://ExcalidrawLib/./components/IconPicker.tsx?");
1281
1281
 
1282
1282
  /***/ }),
1283
1283
 
@@ -1354,7 +1354,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
1354
1354
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
1355
1355
 
1356
1356
  "use strict";
1357
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! clsx */ \"../../node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../i18n */ \"./i18n.ts\");\n/* harmony import */ var _scene__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../scene */ \"./scene/index.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _Actions__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./Actions */ \"./components/Actions.tsx\");\n/* harmony import */ var _ErrorDialog__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./ErrorDialog */ \"./components/ErrorDialog.tsx\");\n/* harmony import */ var _ImageExportDialog__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./ImageExportDialog */ \"./components/ImageExportDialog.tsx\");\n/* harmony import */ var _FixedSideContainer__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./FixedSideContainer */ \"./components/FixedSideContainer.tsx\");\n/* harmony import */ var _HintViewer__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./HintViewer */ \"./components/HintViewer.tsx\");\n/* harmony import */ var _Island__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./Island */ \"./components/Island.tsx\");\n/* harmony import */ var _LoadingMessage__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./LoadingMessage */ \"./components/LoadingMessage.tsx\");\n/* harmony import */ var _LockButton__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./LockButton */ \"./components/LockButton.tsx\");\n/* harmony import */ var _MobileMenu__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./MobileMenu */ \"./components/MobileMenu.tsx\");\n/* harmony import */ var _PasteChartDialog__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./PasteChartDialog */ \"./components/PasteChartDialog.tsx\");\n/* harmony import */ var _Section__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./Section */ \"./components/Section.tsx\");\n/* harmony import */ var _HelpDialog__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./HelpDialog */ \"./components/HelpDialog.tsx\");\n/* harmony import */ var _Stack__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./Stack */ \"./components/Stack.tsx\");\n/* harmony import */ var _UserList__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ./UserList */ \"./components/UserList.tsx\");\n/* harmony import */ var _JSONExportDialog__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ./JSONExportDialog */ \"./components/JSONExportDialog.tsx\");\n/* harmony import */ var _PenModeButton__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ./PenModeButton */ \"./components/PenModeButton.tsx\");\n/* harmony import */ var _analytics__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ../analytics */ \"./analytics.ts\");\n/* harmony import */ var _App__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ./App */ \"./components/App.tsx\");\n/* harmony import */ var _Stats__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__(/*! ./Stats */ \"./components/Stats.tsx\");\n/* harmony import */ var _actions_actionToggleStats__WEBPACK_IMPORTED_MODULE_27__ = __webpack_require__(/*! ../actions/actionToggleStats */ \"./actions/actionToggleStats.tsx\");\n/* harmony import */ var _footer_Footer__WEBPACK_IMPORTED_MODULE_28__ = __webpack_require__(/*! ./footer/Footer */ \"./components/footer/Footer.tsx\");\n/* harmony import */ var _Sidebar_Sidebar__WEBPACK_IMPORTED_MODULE_29__ = __webpack_require__(/*! ./Sidebar/Sidebar */ \"./components/Sidebar/Sidebar.tsx\");\n/* harmony import */ var _jotai__WEBPACK_IMPORTED_MODULE_30__ = __webpack_require__(/*! ../jotai */ \"./jotai.ts\");\n/* harmony import */ var jotai__WEBPACK_IMPORTED_MODULE_49__ = __webpack_require__(/*! jotai */ \"../../node_modules/jotai/esm/index.mjs\");\n/* harmony import */ var _main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__ = __webpack_require__(/*! ./main-menu/MainMenu */ \"./components/main-menu/MainMenu.tsx\");\n/* harmony import */ var _ActiveConfirmDialog__WEBPACK_IMPORTED_MODULE_32__ = __webpack_require__(/*! ./ActiveConfirmDialog */ \"./components/ActiveConfirmDialog.tsx\");\n/* harmony import */ var _OverwriteConfirm_OverwriteConfirm__WEBPACK_IMPORTED_MODULE_33__ = __webpack_require__(/*! ./OverwriteConfirm/OverwriteConfirm */ \"./components/OverwriteConfirm/OverwriteConfirm.tsx\");\n/* harmony import */ var _HandButton__WEBPACK_IMPORTED_MODULE_34__ = __webpack_require__(/*! ./HandButton */ \"./components/HandButton.tsx\");\n/* harmony import */ var _appState__WEBPACK_IMPORTED_MODULE_35__ = __webpack_require__(/*! ../appState */ \"./appState.ts\");\n/* harmony import */ var _context_tunnels__WEBPACK_IMPORTED_MODULE_36__ = __webpack_require__(/*! ../context/tunnels */ \"./context/tunnels.ts\");\n/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_37__ = __webpack_require__(/*! ./icons */ \"./components/icons.tsx\");\n/* harmony import */ var _context_ui_appState__WEBPACK_IMPORTED_MODULE_38__ = __webpack_require__(/*! ../context/ui-appState */ \"./context/ui-appState.ts\");\n/* harmony import */ var _DefaultSidebar__WEBPACK_IMPORTED_MODULE_39__ = __webpack_require__(/*! ./DefaultSidebar */ \"./components/DefaultSidebar.tsx\");\n/* harmony import */ var _EyeDropper__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(/*! ./EyeDropper */ \"./components/EyeDropper.tsx\");\n/* harmony import */ var _LayerUI_scss__WEBPACK_IMPORTED_MODULE_41__ = __webpack_require__(/*! ./LayerUI.scss */ \"./components/LayerUI.scss\");\n/* harmony import */ var _Toolbar_scss__WEBPACK_IMPORTED_MODULE_42__ = __webpack_require__(/*! ./Toolbar.scss */ \"./components/Toolbar.scss\");\n/* harmony import */ var _element_mutateElement__WEBPACK_IMPORTED_MODULE_43__ = __webpack_require__(/*! ../element/mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_44__ = __webpack_require__(/*! ../scene/ShapeCache */ \"./scene/ShapeCache.ts\");\n/* harmony import */ var _scene_Scene__WEBPACK_IMPORTED_MODULE_45__ = __webpack_require__(/*! ../scene/Scene */ \"./scene/Scene.ts\");\n/* harmony import */ var _LaserPointerButton__WEBPACK_IMPORTED_MODULE_46__ = __webpack_require__(/*! ./LaserPointerButton */ \"./components/LaserPointerButton.tsx\");\n/* harmony import */ var _MagicSettings__WEBPACK_IMPORTED_MODULE_47__ = __webpack_require__(/*! ./MagicSettings */ \"./components/MagicSettings.tsx\");\n/* harmony import */ var _TTDDialog_TTDDialog__WEBPACK_IMPORTED_MODULE_48__ = __webpack_require__(/*! ./TTDDialog/TTDDialog */ \"./components/TTDDialog/TTDDialog.tsx\");\nvar __rest = undefined && undefined.__rest || function (s, e) {\n var t = {};\n\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];\n\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];\n }\n return t;\n};\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst DefaultMainMenu = ({\n UIOptions\n}) => {\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"], Object.assign({\n __fallback: true\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.LoadScene, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.SaveToActiveFile, {}), UIOptions.canvasActions.export && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.Export, {}), UIOptions.canvasActions.saveAsImage && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.SaveAsImage, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.Help, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.ClearCanvas, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].Separator, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].Group, Object.assign({\n title: \"Excalidraw links\"\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.Socials, {})\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].Separator, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.ToggleTheme, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.ChangeCanvasBackground, {})]\n }));\n};\n\nconst DefaultOverwriteConfirmDialog = () => {\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_OverwriteConfirm_OverwriteConfirm__WEBPACK_IMPORTED_MODULE_33__.OverwriteConfirmDialog, Object.assign({\n __fallback: true\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_OverwriteConfirm_OverwriteConfirm__WEBPACK_IMPORTED_MODULE_33__.OverwriteConfirmDialog.Actions.SaveToDisk, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_OverwriteConfirm_OverwriteConfirm__WEBPACK_IMPORTED_MODULE_33__.OverwriteConfirmDialog.Actions.ExportToImage, {})]\n }));\n};\n\nconst LayerUI = ({\n actionManager,\n appState,\n files,\n setAppState,\n elements,\n canvas,\n onLockToggle,\n onHandToolToggle,\n onPenModeToggle,\n showExitZenModeBtn,\n renderTopRightUI,\n renderCustomStats,\n UIOptions,\n onExportImage,\n renderWelcomeScreen,\n children,\n app,\n isCollaborating,\n openAIKey,\n isOpenAIKeyPersisted,\n onOpenAIAPIKeyChange,\n onMagicSettingsConfirm\n}) => {\n var _a, _b, _c;\n\n const device = (0,_App__WEBPACK_IMPORTED_MODULE_25__.useDevice)();\n const tunnels = (0,_context_tunnels__WEBPACK_IMPORTED_MODULE_36__.useInitializeTunnels)();\n const [eyeDropperState, setEyeDropperState] = (0,jotai__WEBPACK_IMPORTED_MODULE_49__.useAtom)(_EyeDropper__WEBPACK_IMPORTED_MODULE_40__.activeEyeDropperAtom, _jotai__WEBPACK_IMPORTED_MODULE_30__.jotaiScope);\n\n const renderJSONExportDialog = () => {\n if (!UIOptions.canvasActions.export) {\n return null;\n }\n\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_JSONExportDialog__WEBPACK_IMPORTED_MODULE_22__.JSONExportDialog, {\n elements: elements,\n appState: appState,\n files: files,\n actionManager: actionManager,\n exportOpts: UIOptions.canvasActions.export,\n canvas: canvas,\n setAppState: setAppState\n });\n };\n\n const renderImageExportDialog = () => {\n var _a;\n\n if (!UIOptions.canvasActions.saveAsImage || ((_a = appState.openDialog) === null || _a === void 0 ? void 0 : _a.name) !== \"imageExport\") {\n return null;\n }\n\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ImageExportDialog__WEBPACK_IMPORTED_MODULE_10__.ImageExportDialog, {\n elements: elements,\n appState: appState,\n files: files,\n actionManager: actionManager,\n onExportImage: onExportImage,\n onCloseRequest: () => setAppState({\n openDialog: null\n }),\n name: app.getName()\n });\n };\n\n const renderCanvasActions = () => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n style: {\n position: \"relative\"\n }\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(tunnels.MainMenuTunnel.Out, {}), renderWelcomeScreen && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(tunnels.WelcomeScreenMenuHintTunnel.Out, {})]\n }));\n\n const renderSelectedShapeActions = () => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Section__WEBPACK_IMPORTED_MODULE_18__.Section, Object.assign({\n heading: \"selectedShapeActions\",\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(\"selected-shape-actions zen-mode-transition\", {\n \"transition-left\": appState.zenModeEnabled\n })\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Island__WEBPACK_IMPORTED_MODULE_13__.Island, Object.assign({\n className: _constants__WEBPACK_IMPORTED_MODULE_3__.CLASSES.SHAPE_ACTIONS_MENU,\n padding: 2,\n style: {\n // we want to make sure this doesn't overflow so subtracting the\n // approximate height of hamburgerMenu + footer\n maxHeight: `${appState.height - 166}px`\n }\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Actions__WEBPACK_IMPORTED_MODULE_8__.SelectedShapeActions, {\n appState: appState,\n elementsMap: app.scene.getNonDeletedElementsMap(),\n renderAction: actionManager.renderAction\n })\n }))\n }));\n\n const renderFixedSideContainer = () => {\n var _a, _b;\n\n const shouldRenderSelectedShapeActions = (0,_element__WEBPACK_IMPORTED_MODULE_4__.showSelectedShapeActions)(appState, elements);\n\n if (appState.viewModeEnabled) {\n return null;\n } //zsviczian\n\n\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_FixedSideContainer__WEBPACK_IMPORTED_MODULE_11__.FixedSideContainer, Object.assign({\n side: \"top\"\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n className: \"App-menu App-menu_top\"\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Stack__WEBPACK_IMPORTED_MODULE_20__[\"default\"].Col, Object.assign({\n gap: 6,\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(\"App-menu_top__left\")\n }, {\n children: [renderCanvasActions(), shouldRenderSelectedShapeActions && renderSelectedShapeActions()]\n })), !appState.viewModeEnabled && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Section__WEBPACK_IMPORTED_MODULE_18__.Section, Object.assign({\n heading: \"shapes\",\n className: \"shapes-section\"\n }, {\n children: heading => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n style: {\n position: \"relative\"\n }\n }, {\n children: [renderWelcomeScreen && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(tunnels.WelcomeScreenToolbarHintTunnel.Out, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Stack__WEBPACK_IMPORTED_MODULE_20__[\"default\"].Col, Object.assign({\n gap: 4,\n align: \"start\"\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Stack__WEBPACK_IMPORTED_MODULE_20__[\"default\"].Row, Object.assign({\n gap: 1,\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(\"App-toolbar-container\", {\n \"zen-mode\": appState.zenModeEnabled\n })\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Island__WEBPACK_IMPORTED_MODULE_13__.Island, Object.assign({\n padding: 1,\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(\"App-toolbar\", {\n \"zen-mode\": appState.zenModeEnabled\n })\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_HintViewer__WEBPACK_IMPORTED_MODULE_12__.HintViewer, {\n appState: appState,\n isMobile: device.editor.isMobile || !(appState.viewModeEnabled || appState.zenModeEnabled) && appState.trayModeEnabled,\n device: device,\n app: app\n }), heading, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Stack__WEBPACK_IMPORTED_MODULE_20__[\"default\"].Row, Object.assign({\n gap: 1\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_PenModeButton__WEBPACK_IMPORTED_MODULE_23__.PenModeButton, {\n zenModeEnabled: appState.zenModeEnabled,\n checked: appState.penMode,\n onChange: () => onPenModeToggle(null),\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_5__.t)(\"toolBar.penMode\"),\n penDetected: appState.penDetected\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_LockButton__WEBPACK_IMPORTED_MODULE_15__.LockButton, {\n checked: appState.activeTool.locked,\n onChange: onLockToggle,\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_5__.t)(\"toolBar.lock\")\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n className: \"App-toolbar__divider\"\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_HandButton__WEBPACK_IMPORTED_MODULE_34__.HandButton, {\n checked: (0,_appState__WEBPACK_IMPORTED_MODULE_35__.isHandToolActive)(appState),\n onChange: () => onHandToolToggle(),\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_5__.t)(\"toolBar.hand\"),\n isMobile: true\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Actions__WEBPACK_IMPORTED_MODULE_8__.ShapesSwitcher, {\n appState: appState,\n activeTool: appState.activeTool,\n UIOptions: UIOptions,\n app: app\n })]\n }))]\n })), isCollaborating && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Island__WEBPACK_IMPORTED_MODULE_13__.Island, Object.assign({\n style: {\n marginLeft: 8,\n alignSelf: \"center\",\n height: \"fit-content\"\n }\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_LaserPointerButton__WEBPACK_IMPORTED_MODULE_46__.LaserPointerButton, {\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_5__.t)(\"toolBar.laser\"),\n checked: appState.activeTool.type === _constants__WEBPACK_IMPORTED_MODULE_3__.TOOL_TYPE.laser,\n onChange: () => app.setActiveTool({\n type: _constants__WEBPACK_IMPORTED_MODULE_3__.TOOL_TYPE.laser\n }),\n isMobile: true\n })\n }))]\n }))\n }))]\n }))\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(\"layer-ui__wrapper__top-right zen-mode-transition\", {\n \"transition-right\": appState.zenModeEnabled\n })\n }, {\n children: [appState.collaborators.size > 0 && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_UserList__WEBPACK_IMPORTED_MODULE_21__.UserList, {\n collaborators: appState.collaborators,\n userToFollow: ((_a = appState.userToFollow) === null || _a === void 0 ? void 0 : _a.socketId) || null\n }), !appState.viewModeEnabled && ( //zsviczian\n renderTopRightUI === null || renderTopRightUI === void 0 ? void 0 : renderTopRightUI(device.editor.isMobile, appState)), !appState.viewModeEnabled && ( // hide button when sidebar docked\n !isSidebarDocked || ((_b = appState.openSidebar) === null || _b === void 0 ? void 0 : _b.name) !== _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_SIDEBAR.name) && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(tunnels.DefaultSidebarTriggerTunnel.Out, {})]\n }))]\n }))\n }));\n };\n\n const isTrayModeOrMobile = device.editor.isMobile || !(appState.viewModeEnabled || appState.zenModeEnabled) && appState.trayModeEnabled; //zsviczian\n\n const renderSidebars = () => {\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DefaultSidebar__WEBPACK_IMPORTED_MODULE_39__.DefaultSidebar, {\n __fallback: true,\n onDock: docked => {\n (0,_analytics__WEBPACK_IMPORTED_MODULE_24__.trackEvent)(\"sidebar\", `toggleDock (${docked ? \"dock\" : \"undock\"})`, `(${device.editor.isMobile ? \"mobile\" : \"desktop\"})`);\n }\n });\n };\n\n const isSidebarDocked = (0,jotai__WEBPACK_IMPORTED_MODULE_49__.useAtomValue)(_Sidebar_Sidebar__WEBPACK_IMPORTED_MODULE_29__.isSidebarDockedAtom, _jotai__WEBPACK_IMPORTED_MODULE_30__.jotaiScope);\n\n const layerUIJSX = (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n children: [children, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(DefaultMainMenu, {\n UIOptions: UIOptions\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DefaultSidebar__WEBPACK_IMPORTED_MODULE_39__.DefaultSidebar.Trigger, {\n __fallback: true,\n icon: _icons__WEBPACK_IMPORTED_MODULE_37__.LibraryIcon,\n title: (0,_utils__WEBPACK_IMPORTED_MODULE_7__.capitalizeString)((0,_i18n__WEBPACK_IMPORTED_MODULE_5__.t)(\"toolBar.library\")),\n onToggle: open => {\n if (open) {\n (0,_analytics__WEBPACK_IMPORTED_MODULE_24__.trackEvent)(\"sidebar\", `${_constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_SIDEBAR.name} (open)`, `button (${device.editor.isMobile ? \"mobile\" : \"desktop\"})`);\n }\n },\n tab: _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_SIDEBAR.defaultTab\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(DefaultOverwriteConfirmDialog, {}), ((_a = appState.openDialog) === null || _a === void 0 ? void 0 : _a.name) === \"ttd\" && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_TTDDialog_TTDDialog__WEBPACK_IMPORTED_MODULE_48__.TTDDialog, {\n __fallback: true\n }), appState.isLoading && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_LoadingMessage__WEBPACK_IMPORTED_MODULE_14__.LoadingMessage, {\n delay: 250\n }), appState.errorMessage && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ErrorDialog__WEBPACK_IMPORTED_MODULE_9__.ErrorDialog, Object.assign({\n onClose: () => setAppState({\n errorMessage: null\n })\n }, {\n children: appState.errorMessage\n })), eyeDropperState && //!device.editor.isMobile && //zsviczian\n (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_EyeDropper__WEBPACK_IMPORTED_MODULE_40__.EyeDropper, {\n colorPickerType: eyeDropperState.colorPickerType,\n onCancel: () => {\n setEyeDropperState(null);\n },\n onChange: (colorPickerType, color, selectedElements, {\n altKey\n }) => {\n var _a;\n\n if (colorPickerType !== \"elementBackground\" && colorPickerType !== \"elementStroke\") {\n return;\n }\n\n if (selectedElements.length) {\n for (const element of selectedElements) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_43__.mutateElement)(element, {\n [altKey && eyeDropperState.swapPreviewOnAlt ? colorPickerType === \"elementBackground\" ? \"strokeColor\" : \"backgroundColor\" : colorPickerType === \"elementBackground\" ? \"backgroundColor\" : \"strokeColor\"]: color\n }, false);\n _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_44__.ShapeCache[\"delete\"](element);\n }\n\n (_a = _scene_Scene__WEBPACK_IMPORTED_MODULE_45__[\"default\"].getScene(selectedElements[0])) === null || _a === void 0 ? void 0 : _a.triggerUpdate();\n } else if (colorPickerType === \"elementBackground\") {\n setAppState({\n currentItemBackgroundColor: color\n });\n } else {\n setAppState({\n currentItemStrokeColor: color\n });\n }\n },\n onSelect: (color, event) => {\n var _a;\n\n setEyeDropperState(state => {\n return (state === null || state === void 0 ? void 0 : state.keepOpenOnAlt) && event.altKey ? state : null;\n });\n (_a = eyeDropperState === null || eyeDropperState === void 0 ? void 0 : eyeDropperState.onSelect) === null || _a === void 0 ? void 0 : _a.call(eyeDropperState, color, event);\n }\n }), ((_b = appState.openDialog) === null || _b === void 0 ? void 0 : _b.name) === \"help\" && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_HelpDialog__WEBPACK_IMPORTED_MODULE_19__.HelpDialog, {\n onClose: () => {\n setAppState({\n openDialog: null\n });\n }\n }), ((_c = appState.openDialog) === null || _c === void 0 ? void 0 : _c.name) === \"settings\" && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_MagicSettings__WEBPACK_IMPORTED_MODULE_47__.MagicSettings, {\n openAIKey: openAIKey,\n isPersisted: isOpenAIKeyPersisted,\n onChange: onOpenAIAPIKeyChange,\n onConfirm: (apiKey, shouldPersist) => {\n var _a, _b;\n\n const source = ((_a = appState.openDialog) === null || _a === void 0 ? void 0 : _a.name) === \"settings\" ? (_b = appState.openDialog) === null || _b === void 0 ? void 0 : _b.source : \"settings\";\n setAppState({\n openDialog: null\n }, () => {\n onMagicSettingsConfirm(apiKey, shouldPersist, source);\n });\n },\n onClose: () => {\n setAppState({\n openDialog: null\n });\n }\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ActiveConfirmDialog__WEBPACK_IMPORTED_MODULE_32__.ActiveConfirmDialog, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(tunnels.OverwriteConfirmDialogTunnel.Out, {}), renderImageExportDialog(), renderJSONExportDialog(), appState.pasteDialog.shown && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_PasteChartDialog__WEBPACK_IMPORTED_MODULE_17__.PasteChartDialog, {\n setAppState: setAppState,\n appState: appState,\n onClose: () => setAppState({\n pasteDialog: {\n shown: false,\n data: null\n }\n })\n }), isTrayModeOrMobile && //zsviczian Added isTrayMode condition\n (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_MobileMenu__WEBPACK_IMPORTED_MODULE_16__.MobileMenu, {\n app: app,\n appState: appState,\n elements: elements,\n actionManager: actionManager,\n renderJSONExportDialog: renderJSONExportDialog,\n renderImageExportDialog: renderImageExportDialog,\n setAppState: setAppState,\n onLockToggle: onLockToggle,\n onHandToolToggle: onHandToolToggle,\n onPenModeToggle: onPenModeToggle,\n renderTopRightUI: renderTopRightUI,\n renderCustomStats: renderCustomStats,\n renderSidebars: renderSidebars,\n device: device,\n renderWelcomeScreen: renderWelcomeScreen,\n UIOptions: UIOptions\n }), !isTrayModeOrMobile && //zsviczian changed from !device.editor.isMobile\n (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n className: \"layer-ui__wrapper\",\n style: appState.openSidebar && isSidebarDocked && device.editor.canFitSidebar ? {\n width: `calc(100% - ${_constants__WEBPACK_IMPORTED_MODULE_3__.LIBRARY_SIDEBAR_WIDTH}px)`\n } : {}\n }, {\n children: [renderWelcomeScreen && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(tunnels.WelcomeScreenCenterTunnel.Out, {}), renderFixedSideContainer(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_footer_Footer__WEBPACK_IMPORTED_MODULE_28__[\"default\"], {\n appState: appState,\n actionManager: actionManager,\n showExitZenModeBtn: showExitZenModeBtn,\n renderWelcomeScreen: renderWelcomeScreen\n }), appState.showStats && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Stats__WEBPACK_IMPORTED_MODULE_26__.Stats, {\n appState: appState,\n setAppState: setAppState,\n elements: elements,\n onClose: () => {\n actionManager.executeAction(_actions_actionToggleStats__WEBPACK_IMPORTED_MODULE_27__.actionToggleStats);\n },\n renderCustomStats: renderCustomStats\n }), appState.scrolledOutside && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"button\", Object.assign({\n className: \"scroll-back-to-content\",\n onClick: () => {\n setAppState(appState => Object.assign({}, (0,_scene__WEBPACK_IMPORTED_MODULE_6__.calculateScrollCenter)(elements, appState)));\n }\n }, {\n children: (0,_i18n__WEBPACK_IMPORTED_MODULE_5__.t)(\"buttons.scrollBackToContent\")\n }))]\n })), renderSidebars()]\n })]\n });\n\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_context_ui_appState__WEBPACK_IMPORTED_MODULE_38__.UIAppStateContext.Provider, Object.assign({\n value: appState\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(jotai__WEBPACK_IMPORTED_MODULE_49__.Provider, Object.assign({\n scope: tunnels.jotaiScope\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_context_tunnels__WEBPACK_IMPORTED_MODULE_36__.TunnelsContext.Provider, Object.assign({\n value: tunnels\n }, {\n children: layerUIJSX\n }))\n }))\n }));\n};\n\nconst stripIrrelevantAppStateProps = appState => {\n const {\n suggestedBindings,\n startBoundElement,\n cursorButton,\n scrollX,\n scrollY\n } = appState,\n ret = __rest(appState, [\"suggestedBindings\", \"startBoundElement\", \"cursorButton\", \"scrollX\", \"scrollY\"]);\n\n return ret;\n};\n\nconst areEqual = (prevProps, nextProps) => {\n // short-circuit early\n if (prevProps.children !== nextProps.children) {\n return false;\n }\n\n const {\n canvas: _pC,\n appState: prevAppState\n } = prevProps,\n prev = __rest(prevProps, [\"canvas\", \"appState\"]);\n\n const {\n canvas: _nC,\n appState: nextAppState\n } = nextProps,\n next = __rest(nextProps, [\"canvas\", \"appState\"]);\n\n return (0,_utils__WEBPACK_IMPORTED_MODULE_7__.isShallowEqual)( // asserting AppState because we're being passed the whole AppState\n // but resolve to only the UI-relevant props\n stripIrrelevantAppStateProps(prevAppState), stripIrrelevantAppStateProps(nextAppState), {\n selectedElementIds: _utils__WEBPACK_IMPORTED_MODULE_7__.isShallowEqual,\n selectedGroupIds: _utils__WEBPACK_IMPORTED_MODULE_7__.isShallowEqual\n }) && (0,_utils__WEBPACK_IMPORTED_MODULE_7__.isShallowEqual)(prev, next);\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (react__WEBPACK_IMPORTED_MODULE_2___default().memo(LayerUI, areEqual));\n\n//# sourceURL=webpack://ExcalidrawLib/./components/LayerUI.tsx?");
1357
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! clsx */ \"../../node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../i18n */ \"./i18n.ts\");\n/* harmony import */ var _scene__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../scene */ \"./scene/index.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _Actions__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./Actions */ \"./components/Actions.tsx\");\n/* harmony import */ var _ErrorDialog__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./ErrorDialog */ \"./components/ErrorDialog.tsx\");\n/* harmony import */ var _ImageExportDialog__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./ImageExportDialog */ \"./components/ImageExportDialog.tsx\");\n/* harmony import */ var _FixedSideContainer__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./FixedSideContainer */ \"./components/FixedSideContainer.tsx\");\n/* harmony import */ var _HintViewer__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./HintViewer */ \"./components/HintViewer.tsx\");\n/* harmony import */ var _Island__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./Island */ \"./components/Island.tsx\");\n/* harmony import */ var _LoadingMessage__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./LoadingMessage */ \"./components/LoadingMessage.tsx\");\n/* harmony import */ var _LockButton__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./LockButton */ \"./components/LockButton.tsx\");\n/* harmony import */ var _MobileMenu__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./MobileMenu */ \"./components/MobileMenu.tsx\");\n/* harmony import */ var _PasteChartDialog__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./PasteChartDialog */ \"./components/PasteChartDialog.tsx\");\n/* harmony import */ var _Section__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./Section */ \"./components/Section.tsx\");\n/* harmony import */ var _HelpDialog__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./HelpDialog */ \"./components/HelpDialog.tsx\");\n/* harmony import */ var _Stack__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./Stack */ \"./components/Stack.tsx\");\n/* harmony import */ var _UserList__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ./UserList */ \"./components/UserList.tsx\");\n/* harmony import */ var _JSONExportDialog__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ./JSONExportDialog */ \"./components/JSONExportDialog.tsx\");\n/* harmony import */ var _PenModeButton__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ./PenModeButton */ \"./components/PenModeButton.tsx\");\n/* harmony import */ var _analytics__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ../analytics */ \"./analytics.ts\");\n/* harmony import */ var _App__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ./App */ \"./components/App.tsx\");\n/* harmony import */ var _Stats__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__(/*! ./Stats */ \"./components/Stats.tsx\");\n/* harmony import */ var _actions_actionToggleStats__WEBPACK_IMPORTED_MODULE_27__ = __webpack_require__(/*! ../actions/actionToggleStats */ \"./actions/actionToggleStats.tsx\");\n/* harmony import */ var _footer_Footer__WEBPACK_IMPORTED_MODULE_28__ = __webpack_require__(/*! ./footer/Footer */ \"./components/footer/Footer.tsx\");\n/* harmony import */ var _Sidebar_Sidebar__WEBPACK_IMPORTED_MODULE_29__ = __webpack_require__(/*! ./Sidebar/Sidebar */ \"./components/Sidebar/Sidebar.tsx\");\n/* harmony import */ var _jotai__WEBPACK_IMPORTED_MODULE_30__ = __webpack_require__(/*! ../jotai */ \"./jotai.ts\");\n/* harmony import */ var jotai__WEBPACK_IMPORTED_MODULE_49__ = __webpack_require__(/*! jotai */ \"../../node_modules/jotai/esm/index.mjs\");\n/* harmony import */ var _main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__ = __webpack_require__(/*! ./main-menu/MainMenu */ \"./components/main-menu/MainMenu.tsx\");\n/* harmony import */ var _ActiveConfirmDialog__WEBPACK_IMPORTED_MODULE_32__ = __webpack_require__(/*! ./ActiveConfirmDialog */ \"./components/ActiveConfirmDialog.tsx\");\n/* harmony import */ var _OverwriteConfirm_OverwriteConfirm__WEBPACK_IMPORTED_MODULE_33__ = __webpack_require__(/*! ./OverwriteConfirm/OverwriteConfirm */ \"./components/OverwriteConfirm/OverwriteConfirm.tsx\");\n/* harmony import */ var _HandButton__WEBPACK_IMPORTED_MODULE_34__ = __webpack_require__(/*! ./HandButton */ \"./components/HandButton.tsx\");\n/* harmony import */ var _appState__WEBPACK_IMPORTED_MODULE_35__ = __webpack_require__(/*! ../appState */ \"./appState.ts\");\n/* harmony import */ var _context_tunnels__WEBPACK_IMPORTED_MODULE_36__ = __webpack_require__(/*! ../context/tunnels */ \"./context/tunnels.ts\");\n/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_37__ = __webpack_require__(/*! ./icons */ \"./components/icons.tsx\");\n/* harmony import */ var _context_ui_appState__WEBPACK_IMPORTED_MODULE_38__ = __webpack_require__(/*! ../context/ui-appState */ \"./context/ui-appState.ts\");\n/* harmony import */ var _DefaultSidebar__WEBPACK_IMPORTED_MODULE_39__ = __webpack_require__(/*! ./DefaultSidebar */ \"./components/DefaultSidebar.tsx\");\n/* harmony import */ var _EyeDropper__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(/*! ./EyeDropper */ \"./components/EyeDropper.tsx\");\n/* harmony import */ var _LayerUI_scss__WEBPACK_IMPORTED_MODULE_41__ = __webpack_require__(/*! ./LayerUI.scss */ \"./components/LayerUI.scss\");\n/* harmony import */ var _Toolbar_scss__WEBPACK_IMPORTED_MODULE_42__ = __webpack_require__(/*! ./Toolbar.scss */ \"./components/Toolbar.scss\");\n/* harmony import */ var _element_mutateElement__WEBPACK_IMPORTED_MODULE_43__ = __webpack_require__(/*! ../element/mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_44__ = __webpack_require__(/*! ../scene/ShapeCache */ \"./scene/ShapeCache.ts\");\n/* harmony import */ var _scene_Scene__WEBPACK_IMPORTED_MODULE_45__ = __webpack_require__(/*! ../scene/Scene */ \"./scene/Scene.ts\");\n/* harmony import */ var _LaserPointerButton__WEBPACK_IMPORTED_MODULE_46__ = __webpack_require__(/*! ./LaserPointerButton */ \"./components/LaserPointerButton.tsx\");\n/* harmony import */ var _MagicSettings__WEBPACK_IMPORTED_MODULE_47__ = __webpack_require__(/*! ./MagicSettings */ \"./components/MagicSettings.tsx\");\n/* harmony import */ var _TTDDialog_TTDDialog__WEBPACK_IMPORTED_MODULE_48__ = __webpack_require__(/*! ./TTDDialog/TTDDialog */ \"./components/TTDDialog/TTDDialog.tsx\");\nvar __rest = undefined && undefined.__rest || function (s, e) {\n var t = {};\n\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];\n\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];\n }\n return t;\n};\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst DefaultMainMenu = ({\n UIOptions\n}) => {\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"], Object.assign({\n __fallback: true\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.LoadScene, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.SaveToActiveFile, {}), UIOptions.canvasActions.export && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.Export, {}), UIOptions.canvasActions.saveAsImage && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.SaveAsImage, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.Help, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.ClearCanvas, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].Separator, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].Group, Object.assign({\n title: \"Excalidraw links\"\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.Socials, {})\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].Separator, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.ToggleTheme, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_31__[\"default\"].DefaultItems.ChangeCanvasBackground, {})]\n }));\n};\n\nconst DefaultOverwriteConfirmDialog = () => {\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_OverwriteConfirm_OverwriteConfirm__WEBPACK_IMPORTED_MODULE_33__.OverwriteConfirmDialog, Object.assign({\n __fallback: true\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_OverwriteConfirm_OverwriteConfirm__WEBPACK_IMPORTED_MODULE_33__.OverwriteConfirmDialog.Actions.SaveToDisk, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_OverwriteConfirm_OverwriteConfirm__WEBPACK_IMPORTED_MODULE_33__.OverwriteConfirmDialog.Actions.ExportToImage, {})]\n }));\n};\n\nconst LayerUI = ({\n actionManager,\n appState,\n files,\n setAppState,\n elements,\n canvas,\n onLockToggle,\n onHandToolToggle,\n onPenModeToggle,\n showExitZenModeBtn,\n renderTopRightUI,\n renderCustomStats,\n UIOptions,\n onExportImage,\n renderWelcomeScreen,\n children,\n app,\n isCollaborating,\n openAIKey,\n isOpenAIKeyPersisted,\n onOpenAIAPIKeyChange,\n onMagicSettingsConfirm\n}) => {\n var _a, _b, _c;\n\n const device = (0,_App__WEBPACK_IMPORTED_MODULE_25__.useDevice)();\n const tunnels = (0,_context_tunnels__WEBPACK_IMPORTED_MODULE_36__.useInitializeTunnels)();\n const [eyeDropperState, setEyeDropperState] = (0,jotai__WEBPACK_IMPORTED_MODULE_49__.useAtom)(_EyeDropper__WEBPACK_IMPORTED_MODULE_40__.activeEyeDropperAtom, _jotai__WEBPACK_IMPORTED_MODULE_30__.jotaiScope);\n\n const renderJSONExportDialog = () => {\n if (!UIOptions.canvasActions.export) {\n return null;\n }\n\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_JSONExportDialog__WEBPACK_IMPORTED_MODULE_22__.JSONExportDialog, {\n elements: elements,\n appState: appState,\n files: files,\n actionManager: actionManager,\n exportOpts: UIOptions.canvasActions.export,\n canvas: canvas,\n setAppState: setAppState\n });\n };\n\n const renderImageExportDialog = () => {\n var _a;\n\n if (!UIOptions.canvasActions.saveAsImage || ((_a = appState.openDialog) === null || _a === void 0 ? void 0 : _a.name) !== \"imageExport\") {\n return null;\n }\n\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ImageExportDialog__WEBPACK_IMPORTED_MODULE_10__.ImageExportDialog, {\n elements: elements,\n appState: appState,\n files: files,\n actionManager: actionManager,\n onExportImage: onExportImage,\n onCloseRequest: () => setAppState({\n openDialog: null\n }),\n name: app.getName()\n });\n };\n\n const renderCanvasActions = () => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n style: {\n position: \"relative\"\n }\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(tunnels.MainMenuTunnel.Out, {}), renderWelcomeScreen && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(tunnels.WelcomeScreenMenuHintTunnel.Out, {})]\n }));\n\n const renderSelectedShapeActions = () => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Section__WEBPACK_IMPORTED_MODULE_18__.Section, Object.assign({\n heading: \"selectedShapeActions\",\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(\"selected-shape-actions zen-mode-transition\", {\n \"transition-left\": appState.zenModeEnabled\n })\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Island__WEBPACK_IMPORTED_MODULE_13__.Island, Object.assign({\n className: _constants__WEBPACK_IMPORTED_MODULE_3__.CLASSES.SHAPE_ACTIONS_MENU,\n padding: 2,\n style: {\n // we want to make sure this doesn't overflow so subtracting the\n // approximate height of hamburgerMenu + footer\n maxHeight: `${appState.height - 166}px`\n }\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Actions__WEBPACK_IMPORTED_MODULE_8__.SelectedShapeActions, {\n appState: appState,\n elementsMap: app.scene.getNonDeletedElementsMap(),\n renderAction: actionManager.renderAction\n })\n }))\n }));\n\n const renderFixedSideContainer = () => {\n var _a, _b;\n\n const shouldRenderSelectedShapeActions = (0,_element__WEBPACK_IMPORTED_MODULE_4__.showSelectedShapeActions)(appState, elements);\n\n if (appState.viewModeEnabled) {\n return null;\n } //zsviczian\n\n\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_FixedSideContainer__WEBPACK_IMPORTED_MODULE_11__.FixedSideContainer, Object.assign({\n side: \"top\"\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n className: \"App-menu App-menu_top\"\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Stack__WEBPACK_IMPORTED_MODULE_20__[\"default\"].Col, Object.assign({\n gap: 6,\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(\"App-menu_top__left\")\n }, {\n children: [renderCanvasActions(), shouldRenderSelectedShapeActions && renderSelectedShapeActions()]\n })), !appState.viewModeEnabled && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Section__WEBPACK_IMPORTED_MODULE_18__.Section, Object.assign({\n heading: \"shapes\",\n className: \"shapes-section\"\n }, {\n children: heading => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n style: {\n position: \"relative\"\n }\n }, {\n children: [renderWelcomeScreen && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(tunnels.WelcomeScreenToolbarHintTunnel.Out, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Stack__WEBPACK_IMPORTED_MODULE_20__[\"default\"].Col, Object.assign({\n gap: 4,\n align: \"start\"\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Stack__WEBPACK_IMPORTED_MODULE_20__[\"default\"].Row, Object.assign({\n gap: 1,\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(\"App-toolbar-container\", {\n \"zen-mode\": appState.zenModeEnabled\n })\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Island__WEBPACK_IMPORTED_MODULE_13__.Island, Object.assign({\n padding: 1,\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(\"App-toolbar\", {\n \"zen-mode\": appState.zenModeEnabled\n })\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_HintViewer__WEBPACK_IMPORTED_MODULE_12__.HintViewer, {\n appState: appState,\n isMobile: device.editor.isMobile || !(appState.viewModeEnabled || appState.zenModeEnabled) && appState.trayModeEnabled,\n device: device,\n app: app\n }), heading, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Stack__WEBPACK_IMPORTED_MODULE_20__[\"default\"].Row, Object.assign({\n gap: 1\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_PenModeButton__WEBPACK_IMPORTED_MODULE_23__.PenModeButton, {\n zenModeEnabled: appState.zenModeEnabled,\n checked: appState.penMode,\n onChange: () => onPenModeToggle(null),\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_5__.t)(\"toolBar.penMode\"),\n penDetected: appState.penDetected\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_LockButton__WEBPACK_IMPORTED_MODULE_15__.LockButton, {\n checked: appState.activeTool.locked,\n onChange: onLockToggle,\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_5__.t)(\"toolBar.lock\")\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n className: \"App-toolbar__divider\"\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_HandButton__WEBPACK_IMPORTED_MODULE_34__.HandButton, {\n checked: (0,_appState__WEBPACK_IMPORTED_MODULE_35__.isHandToolActive)(appState),\n onChange: () => onHandToolToggle(),\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_5__.t)(\"toolBar.hand\"),\n isMobile: true\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Actions__WEBPACK_IMPORTED_MODULE_8__.ShapesSwitcher, {\n appState: appState,\n activeTool: appState.activeTool,\n UIOptions: UIOptions,\n app: app\n })]\n }))]\n })), isCollaborating && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Island__WEBPACK_IMPORTED_MODULE_13__.Island, Object.assign({\n style: {\n marginLeft: 8,\n alignSelf: \"center\",\n height: \"fit-content\"\n }\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_LaserPointerButton__WEBPACK_IMPORTED_MODULE_46__.LaserPointerButton, {\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_5__.t)(\"toolBar.laser\"),\n checked: appState.activeTool.type === _constants__WEBPACK_IMPORTED_MODULE_3__.TOOL_TYPE.laser,\n onChange: () => app.setActiveTool({\n type: _constants__WEBPACK_IMPORTED_MODULE_3__.TOOL_TYPE.laser\n }),\n isMobile: true\n })\n }))]\n }))\n }))]\n }))\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(\"layer-ui__wrapper__top-right zen-mode-transition\", {\n \"transition-right\": appState.zenModeEnabled\n })\n }, {\n children: [appState.collaborators.size > 0 && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_UserList__WEBPACK_IMPORTED_MODULE_21__.UserList, {\n collaborators: appState.collaborators,\n userToFollow: ((_a = appState.userToFollow) === null || _a === void 0 ? void 0 : _a.socketId) || null\n }), !appState.viewModeEnabled && ( //zsviczian\n renderTopRightUI === null || renderTopRightUI === void 0 ? void 0 : renderTopRightUI(device.editor.isMobile, appState)), !appState.viewModeEnabled && ( // hide button when sidebar docked\n !isSidebarDocked || ((_b = appState.openSidebar) === null || _b === void 0 ? void 0 : _b.name) !== _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_SIDEBAR.name) && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(tunnels.DefaultSidebarTriggerTunnel.Out, {})]\n }))]\n }))\n }));\n };\n\n const isTrayModeOrMobile = device.editor.isMobile || !(appState.viewModeEnabled || appState.zenModeEnabled) && appState.trayModeEnabled; //zsviczian\n\n const renderSidebars = () => {\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DefaultSidebar__WEBPACK_IMPORTED_MODULE_39__.DefaultSidebar, {\n __fallback: true,\n onDock: docked => {\n (0,_analytics__WEBPACK_IMPORTED_MODULE_24__.trackEvent)(\"sidebar\", `toggleDock (${docked ? \"dock\" : \"undock\"})`, `(${device.editor.isMobile ? \"mobile\" : \"desktop\"})`);\n }\n });\n };\n\n const isSidebarDocked = (0,jotai__WEBPACK_IMPORTED_MODULE_49__.useAtomValue)(_Sidebar_Sidebar__WEBPACK_IMPORTED_MODULE_29__.isSidebarDockedAtom, _jotai__WEBPACK_IMPORTED_MODULE_30__.jotaiScope);\n\n const layerUIJSX = (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n children: [children, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(DefaultMainMenu, {\n UIOptions: UIOptions\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DefaultSidebar__WEBPACK_IMPORTED_MODULE_39__.DefaultSidebar.Trigger, {\n __fallback: true,\n icon: _icons__WEBPACK_IMPORTED_MODULE_37__.LibraryIcon,\n title: (0,_utils__WEBPACK_IMPORTED_MODULE_7__.capitalizeString)((0,_i18n__WEBPACK_IMPORTED_MODULE_5__.t)(\"toolBar.library\")),\n onToggle: open => {\n if (open) {\n (0,_analytics__WEBPACK_IMPORTED_MODULE_24__.trackEvent)(\"sidebar\", `${_constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_SIDEBAR.name} (open)`, `button (${device.editor.isMobile ? \"mobile\" : \"desktop\"})`);\n }\n },\n tab: _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_SIDEBAR.defaultTab\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(DefaultOverwriteConfirmDialog, {}), ((_a = appState.openDialog) === null || _a === void 0 ? void 0 : _a.name) === \"ttd\" && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_TTDDialog_TTDDialog__WEBPACK_IMPORTED_MODULE_48__.TTDDialog, {\n __fallback: true\n }), appState.isLoading && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_LoadingMessage__WEBPACK_IMPORTED_MODULE_14__.LoadingMessage, {\n delay: 250\n }), appState.errorMessage && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ErrorDialog__WEBPACK_IMPORTED_MODULE_9__.ErrorDialog, Object.assign({\n onClose: () => setAppState({\n errorMessage: null\n })\n }, {\n children: appState.errorMessage\n })), eyeDropperState && //!device.editor.isMobile && //zsviczian\n (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_EyeDropper__WEBPACK_IMPORTED_MODULE_40__.EyeDropper, {\n colorPickerType: eyeDropperState.colorPickerType,\n onCancel: () => {\n setEyeDropperState(null);\n },\n onChange: (colorPickerType, color, selectedElements, {\n altKey\n }) => {\n var _a;\n\n if (colorPickerType !== \"elementBackground\" && colorPickerType !== \"elementStroke\") {\n return;\n }\n\n if (selectedElements.length) {\n for (const element of selectedElements) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_43__.mutateElement)(element, {\n [altKey && eyeDropperState.swapPreviewOnAlt ? colorPickerType === \"elementBackground\" ? \"strokeColor\" : \"backgroundColor\" : colorPickerType === \"elementBackground\" ? \"backgroundColor\" : \"strokeColor\"]: color\n }, false);\n _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_44__.ShapeCache[\"delete\"](element);\n }\n\n (_a = _scene_Scene__WEBPACK_IMPORTED_MODULE_45__[\"default\"].getScene(selectedElements[0])) === null || _a === void 0 ? void 0 : _a.triggerUpdate();\n } else if (colorPickerType === \"elementBackground\") {\n setAppState({\n currentItemBackgroundColor: color\n });\n } else {\n setAppState({\n currentItemStrokeColor: color\n });\n }\n },\n onSelect: (color, event) => {\n var _a;\n\n setEyeDropperState(state => {\n return (state === null || state === void 0 ? void 0 : state.keepOpenOnAlt) && event.altKey ? state : null;\n });\n (_a = eyeDropperState === null || eyeDropperState === void 0 ? void 0 : eyeDropperState.onSelect) === null || _a === void 0 ? void 0 : _a.call(eyeDropperState, color, event);\n }\n }), ((_b = appState.openDialog) === null || _b === void 0 ? void 0 : _b.name) === \"help\" && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_HelpDialog__WEBPACK_IMPORTED_MODULE_19__.HelpDialog, {\n onClose: () => {\n setAppState({\n openDialog: null\n });\n }\n }), ((_c = appState.openDialog) === null || _c === void 0 ? void 0 : _c.name) === \"settings\" && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_MagicSettings__WEBPACK_IMPORTED_MODULE_47__.MagicSettings, {\n openAIKey: openAIKey,\n isPersisted: isOpenAIKeyPersisted,\n onChange: onOpenAIAPIKeyChange,\n onConfirm: (apiKey, shouldPersist) => {\n var _a, _b;\n\n const source = ((_a = appState.openDialog) === null || _a === void 0 ? void 0 : _a.name) === \"settings\" ? (_b = appState.openDialog) === null || _b === void 0 ? void 0 : _b.source : \"settings\";\n setAppState({\n openDialog: null\n }, () => {\n onMagicSettingsConfirm(apiKey, shouldPersist, source);\n });\n },\n onClose: () => {\n setAppState({\n openDialog: null\n });\n }\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ActiveConfirmDialog__WEBPACK_IMPORTED_MODULE_32__.ActiveConfirmDialog, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(tunnels.OverwriteConfirmDialogTunnel.Out, {}), renderImageExportDialog(), renderJSONExportDialog(), appState.pasteDialog.shown && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_PasteChartDialog__WEBPACK_IMPORTED_MODULE_17__.PasteChartDialog, {\n setAppState: setAppState,\n appState: appState,\n onClose: () => setAppState({\n pasteDialog: {\n shown: false,\n data: null\n }\n })\n }), isTrayModeOrMobile && //zsviczian Added isTrayMode condition\n (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_MobileMenu__WEBPACK_IMPORTED_MODULE_16__.MobileMenu, {\n app: app,\n appState: appState,\n elements: elements,\n actionManager: actionManager,\n renderJSONExportDialog: renderJSONExportDialog,\n renderImageExportDialog: renderImageExportDialog,\n setAppState: setAppState,\n onLockToggle: onLockToggle,\n onHandToolToggle: onHandToolToggle,\n onPenModeToggle: onPenModeToggle,\n renderTopRightUI: renderTopRightUI,\n renderCustomStats: renderCustomStats,\n renderSidebars: renderSidebars,\n device: device,\n renderWelcomeScreen: renderWelcomeScreen,\n UIOptions: UIOptions\n }), !isTrayModeOrMobile && //zsviczian changed from !device.editor.isMobile\n (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n className: \"layer-ui__wrapper\",\n style: appState.openSidebar && isSidebarDocked && device.editor.canFitSidebar ? {\n width: `calc(100% - ${_constants__WEBPACK_IMPORTED_MODULE_3__.LIBRARY_SIDEBAR_WIDTH}px)`\n } : {}\n }, {\n children: [renderWelcomeScreen && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(tunnels.WelcomeScreenCenterTunnel.Out, {}), renderFixedSideContainer(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_footer_Footer__WEBPACK_IMPORTED_MODULE_28__[\"default\"], {\n appState: appState,\n actionManager: actionManager,\n showExitZenModeBtn: showExitZenModeBtn,\n renderWelcomeScreen: renderWelcomeScreen\n }), appState.showStats && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Stats__WEBPACK_IMPORTED_MODULE_26__.Stats, {\n appState: appState,\n setAppState: setAppState,\n elements: elements,\n onClose: () => {\n actionManager.executeAction(_actions_actionToggleStats__WEBPACK_IMPORTED_MODULE_27__.actionToggleStats);\n },\n renderCustomStats: renderCustomStats\n }), appState.scrolledOutside && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"button\", Object.assign({\n type: \"button\",\n className: \"scroll-back-to-content\",\n onClick: () => {\n setAppState(appState => Object.assign({}, (0,_scene__WEBPACK_IMPORTED_MODULE_6__.calculateScrollCenter)(elements, appState)));\n }\n }, {\n children: (0,_i18n__WEBPACK_IMPORTED_MODULE_5__.t)(\"buttons.scrollBackToContent\")\n }))]\n })), renderSidebars()]\n })]\n });\n\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_context_ui_appState__WEBPACK_IMPORTED_MODULE_38__.UIAppStateContext.Provider, Object.assign({\n value: appState\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(jotai__WEBPACK_IMPORTED_MODULE_49__.Provider, Object.assign({\n scope: tunnels.jotaiScope\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_context_tunnels__WEBPACK_IMPORTED_MODULE_36__.TunnelsContext.Provider, Object.assign({\n value: tunnels\n }, {\n children: layerUIJSX\n }))\n }))\n }));\n};\n\nconst stripIrrelevantAppStateProps = appState => {\n const {\n suggestedBindings,\n startBoundElement,\n cursorButton,\n scrollX,\n scrollY\n } = appState,\n ret = __rest(appState, [\"suggestedBindings\", \"startBoundElement\", \"cursorButton\", \"scrollX\", \"scrollY\"]);\n\n return ret;\n};\n\nconst areEqual = (prevProps, nextProps) => {\n // short-circuit early\n if (prevProps.children !== nextProps.children) {\n return false;\n }\n\n const {\n canvas: _pC,\n appState: prevAppState\n } = prevProps,\n prev = __rest(prevProps, [\"canvas\", \"appState\"]);\n\n const {\n canvas: _nC,\n appState: nextAppState\n } = nextProps,\n next = __rest(nextProps, [\"canvas\", \"appState\"]);\n\n return (0,_utils__WEBPACK_IMPORTED_MODULE_7__.isShallowEqual)( // asserting AppState because we're being passed the whole AppState\n // but resolve to only the UI-relevant props\n stripIrrelevantAppStateProps(prevAppState), stripIrrelevantAppStateProps(nextAppState), {\n selectedElementIds: _utils__WEBPACK_IMPORTED_MODULE_7__.isShallowEqual,\n selectedGroupIds: _utils__WEBPACK_IMPORTED_MODULE_7__.isShallowEqual\n }) && (0,_utils__WEBPACK_IMPORTED_MODULE_7__.isShallowEqual)(prev, next);\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (react__WEBPACK_IMPORTED_MODULE_2___default().memo(LayerUI, areEqual));\n\n//# sourceURL=webpack://ExcalidrawLib/./components/LayerUI.tsx?");
1358
1358
 
1359
1359
  /***/ }),
1360
1360
 
@@ -1486,7 +1486,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
1486
1486
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
1487
1487
 
1488
1488
  "use strict";
1489
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"MobileMenu\": () => (/* binding */ MobileMenu)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../i18n */ \"./i18n.ts\");\n/* harmony import */ var _Stack__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Stack */ \"./components/Stack.tsx\");\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _FixedSideContainer__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./FixedSideContainer */ \"./components/FixedSideContainer.tsx\");\n/* harmony import */ var _Island__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Island */ \"./components/Island.tsx\");\n/* harmony import */ var _HintViewer__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./HintViewer */ \"./components/HintViewer.tsx\");\n/* harmony import */ var _scene__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../scene */ \"./scene/index.ts\");\n/* harmony import */ var _Actions__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./Actions */ \"./components/Actions.tsx\");\n/* harmony import */ var _Section__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./Section */ \"./components/Section.tsx\");\n/* harmony import */ var _scene_scrollbars__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../scene/scrollbars */ \"./scene/scrollbars.ts\");\n/* harmony import */ var _LockButton__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./LockButton */ \"./components/LockButton.tsx\");\n/* harmony import */ var _PenModeButton__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./PenModeButton */ \"./components/PenModeButton.tsx\");\n/* harmony import */ var _Stats__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./Stats */ \"./components/Stats.tsx\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../actions */ \"./actions/index.ts\");\n/* harmony import */ var _HandButton__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./HandButton */ \"./components/HandButton.tsx\");\n/* harmony import */ var _appState__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../appState */ \"./appState.ts\");\n/* harmony import */ var _context_tunnels__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../context/tunnels */ \"./context/tunnels.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst MobileMenu = ({\n appState,\n elements,\n actionManager,\n setAppState,\n onLockToggle,\n onHandToolToggle,\n onPenModeToggle,\n renderTopRightUI,\n renderCustomStats,\n renderSidebars,\n device,\n renderWelcomeScreen,\n UIOptions,\n app\n}) => {\n const {\n WelcomeScreenCenterTunnel,\n MainMenuTunnel,\n DefaultSidebarTriggerTunnel\n } = (0,_context_tunnels__WEBPACK_IMPORTED_MODULE_18__.useTunnels)();\n\n const renderToolbar = () => {\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_FixedSideContainer__WEBPACK_IMPORTED_MODULE_5__.FixedSideContainer, Object.assign({\n side: \"top\",\n className: \"App-top-bar\"\n }, {\n children: [renderWelcomeScreen && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(WelcomeScreenCenterTunnel.Out, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Section__WEBPACK_IMPORTED_MODULE_10__.Section, Object.assign({\n heading: \"shapes\"\n }, {\n children: heading => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Stack__WEBPACK_IMPORTED_MODULE_3__[\"default\"].Col, Object.assign({\n gap: 4,\n align: \"center\"\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Stack__WEBPACK_IMPORTED_MODULE_3__[\"default\"].Row, Object.assign({\n gap: 1,\n className: \"App-toolbar-container\"\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Island__WEBPACK_IMPORTED_MODULE_6__.Island, Object.assign({\n padding: 1,\n className: `App-toolbar${device.editor.isMobile ? \" App-toolbar--mobile\" : \"\" //zsviczian\n }`\n }, {\n children: [heading, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Stack__WEBPACK_IMPORTED_MODULE_3__[\"default\"].Row, Object.assign({\n gap: 1\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Actions__WEBPACK_IMPORTED_MODULE_9__.ShapesSwitcher, {\n appState: appState,\n activeTool: appState.activeTool,\n UIOptions: UIOptions,\n app: app\n })\n }))]\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n className: \"mobile-misc-tools-container\"\n }, {\n children: [!appState.viewModeEnabled && ( //zsviczian\n renderTopRightUI === null || renderTopRightUI === void 0 ? void 0 : renderTopRightUI(true, appState)), !appState.viewModeEnabled && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(DefaultSidebarTriggerTunnel.Out, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_PenModeButton__WEBPACK_IMPORTED_MODULE_13__.PenModeButton, {\n checked: appState.penMode,\n onChange: () => onPenModeToggle(null),\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(\"toolBar.penMode\"),\n isMobile: true,\n penDetected: appState.penDetected\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_LockButton__WEBPACK_IMPORTED_MODULE_12__.LockButton, {\n checked: appState.activeTool.locked,\n onChange: onLockToggle,\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(\"toolBar.lock\"),\n isMobile: true\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_HandButton__WEBPACK_IMPORTED_MODULE_16__.HandButton, {\n checked: (0,_appState__WEBPACK_IMPORTED_MODULE_17__.isHandToolActive)(appState),\n onChange: () => onHandToolToggle(),\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(\"toolBar.hand\"),\n isMobile: true\n })]\n }))]\n }))\n }))\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_HintViewer__WEBPACK_IMPORTED_MODULE_7__.HintViewer, {\n appState: appState,\n isMobile: true,\n device: device,\n app: app\n })]\n }));\n };\n\n const renderAppToolbar = () => {\n if (appState.viewModeEnabled) {\n return; //zsviczian\n\n /*return (\r\n <div className=\"App-toolbar-content\">\r\n <MainMenuTunnel.Out />\r\n </div>\r\n );*/\n } //zsviczian fix mobile menu button positions\n\n\n const showEditMenu = (0,_element__WEBPACK_IMPORTED_MODULE_4__.showSelectedShapeActions)(appState, (0,_element__WEBPACK_IMPORTED_MODULE_4__.getNonDeletedElements)(elements));\n const showElAction = (0,_scene__WEBPACK_IMPORTED_MODULE_8__.isSomeElementSelected)((0,_element__WEBPACK_IMPORTED_MODULE_4__.getNonDeletedElements)(elements), appState);\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n className: \"App-toolbar-content\"\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(MainMenuTunnel.Out, {}), showEditMenu ? //zsviczian\n actionManager.renderAction(\"toggleEditMenu\") : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n className: \"ToolIcon__icon\",\n \"aria-hidden\": \"true\"\n }), actionManager.renderAction(\"undo\"), actionManager.renderAction(\"redo\"), showElAction || appState.multiElement ? //zsviczian\n actionManager.renderAction(appState.multiElement ? \"finalize\" : \"duplicateSelection\") : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n className: \"ToolIcon__icon\",\n \"aria-hidden\": \"true\"\n }), showElAction ? //zsviczian\n actionManager.renderAction(\"deleteSelectedElements\") : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n className: \"ToolIcon__icon\",\n \"aria-hidden\": \"true\"\n })]\n }));\n };\n\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n children: [renderSidebars(), !appState.viewModeEnabled && renderToolbar(), !appState.openMenu && appState.showStats && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Stats__WEBPACK_IMPORTED_MODULE_14__.Stats, {\n appState: appState,\n setAppState: setAppState,\n elements: elements,\n onClose: () => {\n actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_15__.actionToggleStats);\n },\n renderCustomStats: renderCustomStats\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n className: \"App-bottom-bar\",\n style: {\n marginBottom: _scene_scrollbars__WEBPACK_IMPORTED_MODULE_11__.SCROLLBAR_WIDTH + _scene_scrollbars__WEBPACK_IMPORTED_MODULE_11__.SCROLLBAR_MARGIN,\n marginLeft: _scene_scrollbars__WEBPACK_IMPORTED_MODULE_11__.SCROLLBAR_WIDTH + _scene_scrollbars__WEBPACK_IMPORTED_MODULE_11__.SCROLLBAR_MARGIN * 2,\n marginRight: _scene_scrollbars__WEBPACK_IMPORTED_MODULE_11__.SCROLLBAR_WIDTH + _scene_scrollbars__WEBPACK_IMPORTED_MODULE_11__.SCROLLBAR_MARGIN * 2\n }\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Island__WEBPACK_IMPORTED_MODULE_6__.Island, Object.assign({\n padding: 0\n }, {\n children: [appState.openMenu === \"shape\" && !appState.viewModeEnabled && (0,_element__WEBPACK_IMPORTED_MODULE_4__.showSelectedShapeActions)(appState, elements) ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Section__WEBPACK_IMPORTED_MODULE_10__.Section, Object.assign({\n className: \"App-mobile-menu\",\n heading: \"selectedShapeActions\"\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Actions__WEBPACK_IMPORTED_MODULE_9__.SelectedShapeActions, {\n appState: appState,\n elementsMap: app.scene.getNonDeletedElementsMap(),\n renderAction: actionManager.renderAction\n })\n })) : null, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"footer\", Object.assign({\n className: \"App-toolbar\"\n }, {\n children: [renderAppToolbar(), appState.scrolledOutside && !appState.openMenu && !appState.openSidebar && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"button\", Object.assign({\n className: \"scroll-back-to-content\",\n onClick: () => {\n setAppState(appState => Object.assign({}, (0,_scene__WEBPACK_IMPORTED_MODULE_8__.calculateScrollCenter)(elements, appState)));\n }\n }, {\n children: (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(\"buttons.scrollBackToContent\")\n }))]\n }))]\n })), appState.trayModeEnabled ? //zsviczian display zoom menu in tray mode\n (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Island__WEBPACK_IMPORTED_MODULE_6__.Island, Object.assign({\n padding: 1,\n style: {\n marginLeft: `4px`\n }\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Actions__WEBPACK_IMPORTED_MODULE_9__.ZoomActions, {\n renderAction: actionManager.renderAction,\n zoom: appState.zoom,\n trayMode: true\n })\n })) : \"\"]\n }))]\n });\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./components/MobileMenu.tsx?");
1489
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"MobileMenu\": () => (/* binding */ MobileMenu)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../i18n */ \"./i18n.ts\");\n/* harmony import */ var _Stack__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Stack */ \"./components/Stack.tsx\");\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _FixedSideContainer__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./FixedSideContainer */ \"./components/FixedSideContainer.tsx\");\n/* harmony import */ var _Island__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Island */ \"./components/Island.tsx\");\n/* harmony import */ var _HintViewer__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./HintViewer */ \"./components/HintViewer.tsx\");\n/* harmony import */ var _scene__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../scene */ \"./scene/index.ts\");\n/* harmony import */ var _Actions__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./Actions */ \"./components/Actions.tsx\");\n/* harmony import */ var _Section__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./Section */ \"./components/Section.tsx\");\n/* harmony import */ var _scene_scrollbars__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../scene/scrollbars */ \"./scene/scrollbars.ts\");\n/* harmony import */ var _LockButton__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./LockButton */ \"./components/LockButton.tsx\");\n/* harmony import */ var _PenModeButton__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./PenModeButton */ \"./components/PenModeButton.tsx\");\n/* harmony import */ var _Stats__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./Stats */ \"./components/Stats.tsx\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../actions */ \"./actions/index.ts\");\n/* harmony import */ var _HandButton__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./HandButton */ \"./components/HandButton.tsx\");\n/* harmony import */ var _appState__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../appState */ \"./appState.ts\");\n/* harmony import */ var _context_tunnels__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../context/tunnels */ \"./context/tunnels.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst MobileMenu = ({\n appState,\n elements,\n actionManager,\n setAppState,\n onLockToggle,\n onHandToolToggle,\n onPenModeToggle,\n renderTopRightUI,\n renderCustomStats,\n renderSidebars,\n device,\n renderWelcomeScreen,\n UIOptions,\n app\n}) => {\n const {\n WelcomeScreenCenterTunnel,\n MainMenuTunnel,\n DefaultSidebarTriggerTunnel\n } = (0,_context_tunnels__WEBPACK_IMPORTED_MODULE_18__.useTunnels)();\n\n const renderToolbar = () => {\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_FixedSideContainer__WEBPACK_IMPORTED_MODULE_5__.FixedSideContainer, Object.assign({\n side: \"top\",\n className: \"App-top-bar\"\n }, {\n children: [renderWelcomeScreen && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(WelcomeScreenCenterTunnel.Out, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Section__WEBPACK_IMPORTED_MODULE_10__.Section, Object.assign({\n heading: \"shapes\"\n }, {\n children: heading => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Stack__WEBPACK_IMPORTED_MODULE_3__[\"default\"].Col, Object.assign({\n gap: 4,\n align: \"center\"\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Stack__WEBPACK_IMPORTED_MODULE_3__[\"default\"].Row, Object.assign({\n gap: 1,\n className: \"App-toolbar-container\"\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Island__WEBPACK_IMPORTED_MODULE_6__.Island, Object.assign({\n padding: 1,\n className: `App-toolbar${device.editor.isMobile ? \" App-toolbar--mobile\" : \"\" //zsviczian\n }`\n }, {\n children: [heading, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Stack__WEBPACK_IMPORTED_MODULE_3__[\"default\"].Row, Object.assign({\n gap: 1\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Actions__WEBPACK_IMPORTED_MODULE_9__.ShapesSwitcher, {\n appState: appState,\n activeTool: appState.activeTool,\n UIOptions: UIOptions,\n app: app\n })\n }))]\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n className: \"mobile-misc-tools-container\"\n }, {\n children: [!appState.viewModeEnabled && ( //zsviczian\n renderTopRightUI === null || renderTopRightUI === void 0 ? void 0 : renderTopRightUI(true, appState)), !appState.viewModeEnabled && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(DefaultSidebarTriggerTunnel.Out, {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_PenModeButton__WEBPACK_IMPORTED_MODULE_13__.PenModeButton, {\n checked: appState.penMode,\n onChange: () => onPenModeToggle(null),\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(\"toolBar.penMode\"),\n isMobile: true,\n penDetected: appState.penDetected\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_LockButton__WEBPACK_IMPORTED_MODULE_12__.LockButton, {\n checked: appState.activeTool.locked,\n onChange: onLockToggle,\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(\"toolBar.lock\"),\n isMobile: true\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_HandButton__WEBPACK_IMPORTED_MODULE_16__.HandButton, {\n checked: (0,_appState__WEBPACK_IMPORTED_MODULE_17__.isHandToolActive)(appState),\n onChange: () => onHandToolToggle(),\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(\"toolBar.hand\"),\n isMobile: true\n })]\n }))]\n }))\n }))\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_HintViewer__WEBPACK_IMPORTED_MODULE_7__.HintViewer, {\n appState: appState,\n isMobile: true,\n device: device,\n app: app\n })]\n }));\n };\n\n const renderAppToolbar = () => {\n if (appState.viewModeEnabled) {\n return; //zsviczian\n\n /*return (\r\n <div className=\"App-toolbar-content\">\r\n <MainMenuTunnel.Out />\r\n </div>\r\n );*/\n } //zsviczian fix mobile menu button positions\n\n\n const showEditMenu = (0,_element__WEBPACK_IMPORTED_MODULE_4__.showSelectedShapeActions)(appState, (0,_element__WEBPACK_IMPORTED_MODULE_4__.getNonDeletedElements)(elements));\n const showElAction = (0,_scene__WEBPACK_IMPORTED_MODULE_8__.isSomeElementSelected)((0,_element__WEBPACK_IMPORTED_MODULE_4__.getNonDeletedElements)(elements), appState);\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n className: \"App-toolbar-content\"\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(MainMenuTunnel.Out, {}), showEditMenu ? //zsviczian\n actionManager.renderAction(\"toggleEditMenu\") : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n className: \"ToolIcon__icon\",\n \"aria-hidden\": \"true\"\n }), actionManager.renderAction(\"undo\"), actionManager.renderAction(\"redo\"), showElAction || appState.multiElement ? //zsviczian\n actionManager.renderAction(appState.multiElement ? \"finalize\" : \"duplicateSelection\") : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n className: \"ToolIcon__icon\",\n \"aria-hidden\": \"true\"\n }), showElAction ? //zsviczian\n actionManager.renderAction(\"deleteSelectedElements\") : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n className: \"ToolIcon__icon\",\n \"aria-hidden\": \"true\"\n })]\n }));\n };\n\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n children: [renderSidebars(), !appState.viewModeEnabled && renderToolbar(), !appState.openMenu && appState.showStats && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Stats__WEBPACK_IMPORTED_MODULE_14__.Stats, {\n appState: appState,\n setAppState: setAppState,\n elements: elements,\n onClose: () => {\n actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_15__.actionToggleStats);\n },\n renderCustomStats: renderCustomStats\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n className: \"App-bottom-bar\",\n style: {\n marginBottom: _scene_scrollbars__WEBPACK_IMPORTED_MODULE_11__.SCROLLBAR_WIDTH + _scene_scrollbars__WEBPACK_IMPORTED_MODULE_11__.SCROLLBAR_MARGIN,\n marginLeft: _scene_scrollbars__WEBPACK_IMPORTED_MODULE_11__.SCROLLBAR_WIDTH + _scene_scrollbars__WEBPACK_IMPORTED_MODULE_11__.SCROLLBAR_MARGIN * 2,\n marginRight: _scene_scrollbars__WEBPACK_IMPORTED_MODULE_11__.SCROLLBAR_WIDTH + _scene_scrollbars__WEBPACK_IMPORTED_MODULE_11__.SCROLLBAR_MARGIN * 2\n }\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Island__WEBPACK_IMPORTED_MODULE_6__.Island, Object.assign({\n padding: 0\n }, {\n children: [appState.openMenu === \"shape\" && !appState.viewModeEnabled && (0,_element__WEBPACK_IMPORTED_MODULE_4__.showSelectedShapeActions)(appState, elements) ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Section__WEBPACK_IMPORTED_MODULE_10__.Section, Object.assign({\n className: \"App-mobile-menu\",\n heading: \"selectedShapeActions\"\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Actions__WEBPACK_IMPORTED_MODULE_9__.SelectedShapeActions, {\n appState: appState,\n elementsMap: app.scene.getNonDeletedElementsMap(),\n renderAction: actionManager.renderAction\n })\n })) : null, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"footer\", Object.assign({\n className: \"App-toolbar\"\n }, {\n children: [renderAppToolbar(), appState.scrolledOutside && !appState.openMenu && !appState.openSidebar && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"button\", Object.assign({\n type: \"button\",\n className: \"scroll-back-to-content\",\n onClick: () => {\n setAppState(appState => Object.assign({}, (0,_scene__WEBPACK_IMPORTED_MODULE_8__.calculateScrollCenter)(elements, appState)));\n }\n }, {\n children: (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.t)(\"buttons.scrollBackToContent\")\n }))]\n }))]\n })), appState.trayModeEnabled ? //zsviczian display zoom menu in tray mode\n (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Island__WEBPACK_IMPORTED_MODULE_6__.Island, Object.assign({\n padding: 1,\n style: {\n marginLeft: `4px`\n }\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Actions__WEBPACK_IMPORTED_MODULE_9__.ZoomActions, {\n renderAction: actionManager.renderAction,\n zoom: appState.zoom,\n trayMode: true\n })\n })) : \"\"]\n }))]\n });\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./components/MobileMenu.tsx?");
1490
1490
 
1491
1491
  /***/ }),
1492
1492
 
@@ -1552,7 +1552,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
1552
1552
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
1553
1553
 
1554
1554
  "use strict";
1555
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"PasteChartDialog\": () => (/* binding */ PasteChartDialog)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var open_color__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! open-color */ \"../../node_modules/open-color/open-color.json\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _analytics__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../analytics */ \"./analytics.ts\");\n/* harmony import */ var _charts__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../charts */ \"./charts.ts\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../i18n */ \"./i18n.ts\");\n/* harmony import */ var _scene_export__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../scene/export */ \"./scene/export.ts\");\n/* harmony import */ var _App__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./App */ \"./components/App.tsx\");\n/* harmony import */ var _Dialog__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./Dialog */ \"./components/Dialog.tsx\");\n/* harmony import */ var _PasteChartDialog_scss__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./PasteChartDialog.scss */ \"./components/PasteChartDialog.scss\");\n\n\n\n\n\n\n\n\n\n\n\nconst ChartPreviewBtn = props => {\n const previewRef = (0,react__WEBPACK_IMPORTED_MODULE_2__.useRef)(null);\n const [chartElements, setChartElements] = (0,react__WEBPACK_IMPORTED_MODULE_2__.useState)(null);\n (0,react__WEBPACK_IMPORTED_MODULE_2__.useLayoutEffect)(() => {\n if (!props.spreadsheet) {\n return;\n }\n\n const elements = (0,_charts__WEBPACK_IMPORTED_MODULE_4__.renderSpreadsheet)(props.chartType, props.spreadsheet, 0, 0);\n setChartElements(elements);\n let svg;\n const previewNode = previewRef.current;\n\n (async () => {\n var _a;\n\n svg = await (0,_scene_export__WEBPACK_IMPORTED_MODULE_6__.exportToSvg)(elements, {\n exportBackground: false,\n viewBackgroundColor: open_color__WEBPACK_IMPORTED_MODULE_1__.white\n }, null);\n (_a = svg.querySelector(\".style-fonts\")) === null || _a === void 0 ? void 0 : _a.remove();\n previewNode.replaceChildren();\n previewNode.appendChild(svg);\n\n if (props.selected) {\n previewNode.parentNode.focus();\n }\n })();\n\n return () => {\n previewNode.replaceChildren();\n };\n }, [props.spreadsheet, props.chartType, props.selected]);\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"button\", Object.assign({\n className: \"ChartPreview\",\n onClick: () => {\n if (chartElements) {\n props.onClick(props.chartType, chartElements);\n }\n }\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n ref: previewRef\n })\n }));\n};\n\nconst PasteChartDialog = ({\n setAppState,\n appState,\n onClose\n}) => {\n const {\n onInsertElements\n } = (0,_App__WEBPACK_IMPORTED_MODULE_7__.useApp)();\n const handleClose = react__WEBPACK_IMPORTED_MODULE_2___default().useCallback(() => {\n if (onClose) {\n onClose();\n }\n }, [onClose]);\n\n const handleChartClick = (chartType, elements) => {\n onInsertElements(elements);\n (0,_analytics__WEBPACK_IMPORTED_MODULE_3__.trackEvent)(\"paste\", \"chart\", chartType);\n setAppState({\n currentChartType: chartType,\n pasteDialog: {\n shown: false,\n data: null\n }\n });\n };\n\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Dialog__WEBPACK_IMPORTED_MODULE_8__.Dialog, Object.assign({\n size: \"small\",\n onCloseRequest: handleClose,\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_5__.t)(\"labels.pasteCharts\"),\n className: \"PasteChartDialog\",\n autofocus: false\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n className: \"container\"\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ChartPreviewBtn, {\n chartType: \"bar\",\n spreadsheet: appState.pasteDialog.data,\n selected: appState.currentChartType === \"bar\",\n onClick: handleChartClick\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ChartPreviewBtn, {\n chartType: \"line\",\n spreadsheet: appState.pasteDialog.data,\n selected: appState.currentChartType === \"line\",\n onClick: handleChartClick\n })]\n }))\n }));\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./components/PasteChartDialog.tsx?");
1555
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"PasteChartDialog\": () => (/* binding */ PasteChartDialog)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.js\");\n/* harmony import */ var open_color__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! open-color */ \"../../node_modules/open-color/open-color.json\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _analytics__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../analytics */ \"./analytics.ts\");\n/* harmony import */ var _charts__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../charts */ \"./charts.ts\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../i18n */ \"./i18n.ts\");\n/* harmony import */ var _scene_export__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../scene/export */ \"./scene/export.ts\");\n/* harmony import */ var _App__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./App */ \"./components/App.tsx\");\n/* harmony import */ var _Dialog__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./Dialog */ \"./components/Dialog.tsx\");\n/* harmony import */ var _PasteChartDialog_scss__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./PasteChartDialog.scss */ \"./components/PasteChartDialog.scss\");\n\n\n\n\n\n\n\n\n\n\n\nconst ChartPreviewBtn = props => {\n const previewRef = (0,react__WEBPACK_IMPORTED_MODULE_2__.useRef)(null);\n const [chartElements, setChartElements] = (0,react__WEBPACK_IMPORTED_MODULE_2__.useState)(null);\n (0,react__WEBPACK_IMPORTED_MODULE_2__.useLayoutEffect)(() => {\n if (!props.spreadsheet) {\n return;\n }\n\n const elements = (0,_charts__WEBPACK_IMPORTED_MODULE_4__.renderSpreadsheet)(props.chartType, props.spreadsheet, 0, 0);\n setChartElements(elements);\n let svg;\n const previewNode = previewRef.current;\n\n (async () => {\n var _a;\n\n svg = await (0,_scene_export__WEBPACK_IMPORTED_MODULE_6__.exportToSvg)(elements, {\n exportBackground: false,\n viewBackgroundColor: open_color__WEBPACK_IMPORTED_MODULE_1__.white\n }, null);\n (_a = svg.querySelector(\".style-fonts\")) === null || _a === void 0 ? void 0 : _a.remove();\n previewNode.replaceChildren();\n previewNode.appendChild(svg);\n\n if (props.selected) {\n previewNode.parentNode.focus();\n }\n })();\n\n return () => {\n previewNode.replaceChildren();\n };\n }, [props.spreadsheet, props.chartType, props.selected]);\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"button\", Object.assign({\n type: \"button\",\n className: \"ChartPreview\",\n onClick: () => {\n if (chartElements) {\n props.onClick(props.chartType, chartElements);\n }\n }\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n ref: previewRef\n })\n }));\n};\n\nconst PasteChartDialog = ({\n setAppState,\n appState,\n onClose\n}) => {\n const {\n onInsertElements\n } = (0,_App__WEBPACK_IMPORTED_MODULE_7__.useApp)();\n const handleClose = react__WEBPACK_IMPORTED_MODULE_2___default().useCallback(() => {\n if (onClose) {\n onClose();\n }\n }, [onClose]);\n\n const handleChartClick = (chartType, elements) => {\n onInsertElements(elements);\n (0,_analytics__WEBPACK_IMPORTED_MODULE_3__.trackEvent)(\"paste\", \"chart\", chartType);\n setAppState({\n currentChartType: chartType,\n pasteDialog: {\n shown: false,\n data: null\n }\n });\n };\n\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Dialog__WEBPACK_IMPORTED_MODULE_8__.Dialog, Object.assign({\n size: \"small\",\n onCloseRequest: handleClose,\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_5__.t)(\"labels.pasteCharts\"),\n className: \"PasteChartDialog\",\n autofocus: false\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n className: \"container\"\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ChartPreviewBtn, {\n chartType: \"bar\",\n spreadsheet: appState.pasteDialog.data,\n selected: appState.currentChartType === \"bar\",\n onClick: handleChartClick\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ChartPreviewBtn, {\n chartType: \"line\",\n spreadsheet: appState.pasteDialog.data,\n selected: appState.currentChartType === \"line\",\n onClick: handleChartClick\n })]\n }))\n }));\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./components/PasteChartDialog.tsx?");
1556
1556
 
1557
1557
  /***/ }),
1558
1558
 
@@ -2454,7 +2454,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
2454
2454
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
2455
2455
 
2456
2456
  "use strict";
2457
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"AllowedExcalidrawActiveTools\": () => (/* binding */ AllowedExcalidrawActiveTools),\n/* harmony export */ \"restore\": () => (/* binding */ restore),\n/* harmony export */ \"restoreAppState\": () => (/* binding */ restoreAppState),\n/* harmony export */ \"restoreElements\": () => (/* binding */ restoreElements),\n/* harmony export */ \"restoreLibraryItems\": () => (/* binding */ restoreLibraryItems)\n/* harmony export */ });\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _random__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../random */ \"./random.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _appState__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../appState */ \"./appState.ts\");\n/* harmony import */ var _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../element/linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _element_mutateElement__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../element/mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _element_textElement__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../element/textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _url__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./url */ \"./data/url.ts\");\n/* harmony import */ var _fractionalIndex__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../fractionalIndex */ \"./fractionalIndex.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\nconst AllowedExcalidrawActiveTools = {\n selection: true,\n text: true,\n rectangle: true,\n diamond: true,\n ellipse: true,\n line: true,\n image: true,\n arrow: true,\n freedraw: true,\n eraser: false,\n custom: true,\n frame: true,\n embeddable: true,\n hand: true,\n mermaid: true,\n laser: false,\n magicframe: false\n};\n\nconst getFontFamilyByName = fontFamilyName => {\n if (Object.keys(_constants__WEBPACK_IMPORTED_MODULE_3__.FONT_FAMILY).includes(fontFamilyName)) {\n return _constants__WEBPACK_IMPORTED_MODULE_3__.FONT_FAMILY[fontFamilyName];\n }\n\n return _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_FONT_FAMILY;\n};\n\nconst repairBinding = binding => {\n if (!binding) {\n return null;\n }\n\n return Object.assign(Object.assign({}, binding), {\n focus: binding.focus || 0\n });\n};\n\nconst restoreElementWithProperties = (element, extra) => {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;\n\n const base = {\n type: extra.type || element.type,\n // all elements must have version > 0 so getSceneVersion() will pick up\n // newly added elements\n version: element.version || 1,\n versionNonce: (_a = element.versionNonce) !== null && _a !== void 0 ? _a : 0,\n index: (_b = element.index) !== null && _b !== void 0 ? _b : null,\n isDeleted: (_c = element.isDeleted) !== null && _c !== void 0 ? _c : false,\n id: element.id || (0,_random__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n fillStyle: element.fillStyle || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.fillStyle,\n strokeWidth: element.strokeWidth || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.strokeWidth,\n strokeStyle: (_d = element.strokeStyle) !== null && _d !== void 0 ? _d : _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.strokeStyle,\n roughness: (_e = element.roughness) !== null && _e !== void 0 ? _e : _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.roughness,\n opacity: element.opacity == null ? _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.opacity : element.opacity,\n angle: element.angle || 0,\n x: (_g = (_f = extra.x) !== null && _f !== void 0 ? _f : element.x) !== null && _g !== void 0 ? _g : 0,\n y: (_j = (_h = extra.y) !== null && _h !== void 0 ? _h : element.y) !== null && _j !== void 0 ? _j : 0,\n strokeColor: element.strokeColor || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.strokeColor,\n backgroundColor: element.backgroundColor || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.backgroundColor,\n width: element.width || 0,\n height: element.height || 0,\n seed: (_k = element.seed) !== null && _k !== void 0 ? _k : 1,\n groupIds: (_l = element.groupIds) !== null && _l !== void 0 ? _l : [],\n frameId: (_m = element.frameId) !== null && _m !== void 0 ? _m : null,\n roundness: typeof element.roundness !== \"undefined\" ? element.roundness : element.strokeSharpness === \"round\" ? {\n // for old elements that would now use adaptive radius algo,\n // use legacy algo instead\n type: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_1__.isUsingAdaptiveRadius)(element.type) ? _constants__WEBPACK_IMPORTED_MODULE_3__.ROUNDNESS.LEGACY : _constants__WEBPACK_IMPORTED_MODULE_3__.ROUNDNESS.PROPORTIONAL_RADIUS\n } : null,\n boundElements: element.boundElementIds ? element.boundElementIds.map(id => ({\n type: \"arrow\",\n id\n })) : (_o = element.boundElements) !== null && _o !== void 0 ? _o : [],\n updated: (_p = element.updated) !== null && _p !== void 0 ? _p : (0,_utils__WEBPACK_IMPORTED_MODULE_7__.getUpdatedTimestamp)(),\n link: element.link ? (0,_url__WEBPACK_IMPORTED_MODULE_9__.normalizeLink)(element.link) : null,\n locked: (_q = element.locked) !== null && _q !== void 0 ? _q : false\n };\n\n if (\"customData\" in element || \"customData\" in extra) {\n base.customData = \"customData\" in extra ? extra.customData : element.customData;\n }\n\n return Object.assign(Object.assign(Object.assign({}, base), (0,_element__WEBPACK_IMPORTED_MODULE_0__.getNormalizedDimensions)(base)), extra);\n};\n\nconst restoreElement = element => {\n var _a, _b, _c, _d, _e;\n\n switch (element.type) {\n case \"text\":\n let fontSize = element.fontSize;\n let fontFamily = element.fontFamily;\n\n if (\"font\" in element) {\n const [fontPx, _fontFamily] = element.font.split(\" \");\n fontSize = parseFloat(fontPx);\n fontFamily = getFontFamilyByName(_fontFamily);\n }\n\n const text = typeof element.text === \"string\" && element.text || \"\"; // line-height might not be specified either when creating elements\n // programmatically, or when importing old diagrams.\n // For the latter we want to detect the original line height which\n // will likely differ from our per-font fixed line height we now use,\n // to maintain backward compatibility.\n\n const lineHeight = element.lineHeight || (element.height ? // detect line-height from current element height and font-size\n (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.detectLineHeight)(element) : // no element height likely means programmatic use, so default\n // to a fixed line height\n (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getDefaultLineHeight)(element.fontFamily));\n element = restoreElementWithProperties(element, {\n fontSize,\n fontFamily,\n text,\n rawText: (_a = element.rawText) !== null && _a !== void 0 ? _a : \"\",\n textAlign: element.textAlign || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_TEXT_ALIGN,\n verticalAlign: element.verticalAlign || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_VERTICAL_ALIGN,\n containerId: (_b = element.containerId) !== null && _b !== void 0 ? _b : null,\n originalText: element.originalText || text,\n autoResize: (_c = element.autoResize) !== null && _c !== void 0 ? _c : true,\n lineHeight\n }); // if empty text, mark as deleted. We keep in array\n // for data integrity purposes (collab etc.)\n\n if (!text && !element.isDeleted) {\n element = Object.assign(Object.assign({}, element), {\n originalText: text,\n isDeleted: true\n });\n element = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_6__.bumpVersion)(element);\n }\n\n return element;\n\n case \"freedraw\":\n {\n return restoreElementWithProperties(element, {\n points: element.points,\n lastCommittedPoint: null,\n simulatePressure: element.simulatePressure,\n pressures: element.pressures\n });\n }\n\n case \"image\":\n return restoreElementWithProperties(element, {\n status: element.status || \"pending\",\n fileId: element.fileId,\n scale: element.scale || [1, 1]\n });\n\n case \"line\": // @ts-ignore LEGACY type\n // eslint-disable-next-line no-fallthrough\n\n case \"draw\":\n case \"arrow\":\n {\n const {\n startArrowhead = null,\n endArrowhead = element.type === \"arrow\" ? \"arrow\" : null\n } = element;\n let x = element.x;\n let y = element.y;\n let points = // migrate old arrow model to new one\n !Array.isArray(element.points) || element.points.length < 2 ? [[0, 0], [element.width, element.height]] : element.points;\n\n if (points[0][0] !== 0 || points[0][1] !== 0) {\n ({\n points,\n x,\n y\n } = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_5__.LinearElementEditor.getNormalizedPoints(element));\n }\n\n return restoreElementWithProperties(element, {\n type: element.type === \"draw\" ? \"line\" : element.type,\n startBinding: repairBinding(element.startBinding),\n endBinding: repairBinding(element.endBinding),\n lastCommittedPoint: null,\n startArrowhead,\n endArrowhead,\n points,\n x,\n y\n });\n }\n // generic elements\n\n case \"ellipse\":\n case \"rectangle\":\n case \"diamond\":\n return restoreElementWithProperties(element, {});\n\n case \"iframe\": //zsviczian\n\n case \"embeddable\":\n return restoreElementWithProperties(element, {\n scale: (_d = element.scale) !== null && _d !== void 0 ? _d : [1, 1] //zsviczian\n\n });\n\n case \"magicframe\":\n case \"frame\":\n return restoreElementWithProperties(element, {\n name: (_e = element.name) !== null && _e !== void 0 ? _e : null\n });\n // Don't use default case so as to catch a missing an element type case.\n // We also don't want to throw, but instead return void so we filter\n // out these unsupported elements from the restored array.\n }\n\n return null;\n};\n/**\r\n * Repairs container element's boundElements array by removing duplicates and\r\n * fixing containerId of bound elements if not present. Also removes any\r\n * bound elements that do not exist in the elements array.\r\n *\r\n * NOTE mutates elements.\r\n */\n\n\nconst repairContainerElement = (container, elementsMap) => {\n if (container.boundElements) {\n // copy because we're not cloning on restore, and we don't want to mutate upstream\n const boundElements = container.boundElements.slice(); // dedupe bindings & fix boundElement.containerId if not set already\n\n const boundIds = new Set();\n container.boundElements = boundElements.reduce((acc, binding) => {\n const boundElement = elementsMap.get(binding.id);\n\n if (boundElement && !boundIds.has(binding.id)) {\n boundIds.add(binding.id);\n\n if (boundElement.isDeleted) {\n return acc;\n }\n\n acc.push(binding);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_1__.isTextElement)(boundElement) && // being slightly conservative here, preserving existing containerId\n // if defined, lest boundElements is stale\n !boundElement.containerId) {\n boundElement.containerId = container.id;\n }\n }\n\n return acc;\n }, []);\n }\n};\n/**\r\n * Repairs target bound element's container's boundElements array,\r\n * or removes contaienrId if container does not exist.\r\n *\r\n * NOTE mutates elements.\r\n */\n\n\nconst repairBoundElement = (boundElement, elementsMap) => {\n const container = boundElement.containerId ? elementsMap.get(boundElement.containerId) : null;\n\n if (!container) {\n boundElement.containerId = null;\n return;\n }\n\n if (boundElement.isDeleted) {\n return;\n }\n\n if (container.boundElements && !container.boundElements.find(binding => binding.id === boundElement.id)) {\n // copy because we're not cloning on restore, and we don't want to mutate upstream\n const boundElements = (container.boundElements || (container.boundElements = [])).slice();\n boundElements.push({\n type: \"text\",\n id: boundElement.id\n });\n container.boundElements = boundElements;\n }\n};\n/**\r\n * Remove an element's frameId if its containing frame is non-existent\r\n *\r\n * NOTE mutates elements.\r\n */\n\n\nconst repairFrameMembership = (element, elementsMap) => {\n if (element.frameId) {\n const containingFrame = elementsMap.get(element.frameId);\n\n if (!containingFrame) {\n element.frameId = null;\n }\n }\n};\n\nconst restoreElements = (elements,\n/** NOTE doesn't serve for reconciliation */\nlocalElements, opts) => {\n // used to detect duplicate top-level element ids\n const existingIds = new Set();\n const localElementsMap = localElements ? (0,_utils__WEBPACK_IMPORTED_MODULE_7__.arrayToMap)(localElements) : null;\n const restoredElements = (0,_fractionalIndex__WEBPACK_IMPORTED_MODULE_10__.syncInvalidIndices)((elements || []).reduce((elements, element) => {\n // filtering out selection, which is legacy, no longer kept in elements,\n // and causing issues if retained\n if (element.type !== \"selection\" && !(0,_element__WEBPACK_IMPORTED_MODULE_0__.isInvisiblySmallElement)(element)) {\n let migratedElement = restoreElement(element);\n\n if (migratedElement) {\n const localElement = localElementsMap === null || localElementsMap === void 0 ? void 0 : localElementsMap.get(element.id);\n\n if (localElement && localElement.version > migratedElement.version) {\n migratedElement = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_6__.bumpVersion)(migratedElement, localElement.version);\n }\n\n if (existingIds.has(migratedElement.id)) {\n migratedElement = Object.assign(Object.assign({}, migratedElement), {\n id: (0,_random__WEBPACK_IMPORTED_MODULE_2__.randomId)()\n });\n }\n\n existingIds.add(migratedElement.id);\n elements.push(migratedElement);\n }\n }\n\n return elements;\n }, []));\n\n if (!(opts === null || opts === void 0 ? void 0 : opts.repairBindings)) {\n return restoredElements;\n } // repair binding. Mutates elements.\n\n\n const restoredElementsMap = (0,_utils__WEBPACK_IMPORTED_MODULE_7__.arrayToMap)(restoredElements);\n\n for (const element of restoredElements) {\n if (element.frameId) {\n repairFrameMembership(element, restoredElementsMap);\n }\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_1__.isTextElement)(element) && element.containerId) {\n repairBoundElement(element, restoredElementsMap);\n } else if (element.boundElements) {\n repairContainerElement(element, restoredElementsMap);\n }\n\n if (opts.refreshDimensions && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_1__.isTextElement)(element)) {\n Object.assign(element, (0,_element__WEBPACK_IMPORTED_MODULE_0__.refreshTextDimensions)(element, (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getContainerElement)(element, restoredElementsMap), restoredElementsMap));\n }\n }\n\n return restoredElements;\n};\n\nconst coalesceAppStateValue = (key, appState, defaultAppState) => {\n const value = appState[key]; // NOTE the value! assertion is needed in TS 4.5.5 (fixed in newer versions)\n\n return value !== undefined ? value : defaultAppState[key];\n};\n\nconst LegacyAppStateMigrations = {\n isSidebarDocked: (appState, defaultAppState) => {\n var _a;\n\n return [\"defaultSidebarDockedPreference\", (_a = appState.isSidebarDocked) !== null && _a !== void 0 ? _a : coalesceAppStateValue(\"defaultSidebarDockedPreference\", appState, defaultAppState)];\n }\n};\nconst restoreAppState = (appState, localAppState) => {\n var _a, _b, _c, _d;\n\n appState = appState || {};\n const defaultAppState = (0,_appState__WEBPACK_IMPORTED_MODULE_4__.getDefaultAppState)();\n const nextAppState = {}; // first, migrate all legacy AppState properties to new ones. We do it\n // in one go before migrate the rest of the properties in case the new ones\n // depend on checking any other key (i.e. they are coupled)\n\n for (const legacyKey of Object.keys(LegacyAppStateMigrations)) {\n if (legacyKey in appState) {\n const [nextKey, nextValue] = LegacyAppStateMigrations[legacyKey](appState, defaultAppState);\n nextAppState[nextKey] = nextValue;\n }\n }\n\n for (const [key, defaultValue] of Object.entries(defaultAppState)) {\n // if AppState contains a legacy key, prefer that one and migrate its\n // value to the new one\n const suppliedValue = appState[key];\n const localValue = localAppState ? localAppState[key] : undefined;\n nextAppState[key] = suppliedValue !== undefined ? suppliedValue : localValue !== undefined ? localValue : defaultValue;\n }\n\n return Object.assign(Object.assign({}, nextAppState), {\n cursorButton: (localAppState === null || localAppState === void 0 ? void 0 : localAppState.cursorButton) || \"up\",\n // reset on fresh restore so as to hide the UI button if penMode not active\n penDetected: (_a = localAppState === null || localAppState === void 0 ? void 0 : localAppState.penDetected) !== null && _a !== void 0 ? _a : appState.penMode ? (_b = appState.penDetected) !== null && _b !== void 0 ? _b : false : false,\n activeTool: Object.assign(Object.assign({}, (0,_utils__WEBPACK_IMPORTED_MODULE_7__.updateActiveTool)(defaultAppState, nextAppState.activeTool.type && AllowedExcalidrawActiveTools[nextAppState.activeTool.type] ? nextAppState.activeTool : {\n type: \"selection\"\n })), {\n lastActiveTool: null,\n locked: (_c = nextAppState.activeTool.locked) !== null && _c !== void 0 ? _c : false\n }),\n // Migrates from previous version where appState.zoom was a number\n zoom: typeof appState.zoom === \"number\" ? {\n value: appState.zoom\n } : ((_d = appState.zoom) === null || _d === void 0 ? void 0 : _d.value) ? appState.zoom : defaultAppState.zoom,\n openSidebar: // string (legacy)\n typeof appState.openSidebar === \"string\" ? {\n name: _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_SIDEBAR.name\n } : nextAppState.openSidebar\n });\n};\nconst restore = (data,\n/**\r\n * Local AppState (`this.state` or initial state from localStorage) so that we\r\n * don't overwrite local state with default values (when values not\r\n * explicitly specified).\r\n * Supply `null` if you can't get access to it.\r\n */\nlocalAppState, localElements, elementsConfig) => {\n return {\n elements: restoreElements(data === null || data === void 0 ? void 0 : data.elements, localElements, elementsConfig),\n appState: restoreAppState(data === null || data === void 0 ? void 0 : data.appState, localAppState || null),\n files: (data === null || data === void 0 ? void 0 : data.files) || {}\n };\n};\n\nconst restoreLibraryItem = libraryItem => {\n const elements = restoreElements((0,_element__WEBPACK_IMPORTED_MODULE_0__.getNonDeletedElements)(libraryItem.elements), null);\n return elements.length ? Object.assign(Object.assign({}, libraryItem), {\n elements\n }) : null;\n};\n\nconst restoreLibraryItems = (libraryItems = [], defaultStatus) => {\n const restoredItems = [];\n\n for (const item of libraryItems) {\n // migrate older libraries\n if (Array.isArray(item)) {\n const restoredItem = restoreLibraryItem({\n status: defaultStatus,\n elements: item,\n id: (0,_random__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n created: Date.now()\n });\n\n if (restoredItem) {\n restoredItems.push(restoredItem);\n }\n } else {\n const _item = item;\n const restoredItem = restoreLibraryItem(Object.assign(Object.assign({}, _item), {\n id: _item.id || (0,_random__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n status: _item.status || defaultStatus,\n created: _item.created || Date.now()\n }));\n\n if (restoredItem) {\n restoredItems.push(restoredItem);\n }\n }\n }\n\n return restoredItems;\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./data/restore.ts?");
2457
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"AllowedExcalidrawActiveTools\": () => (/* binding */ AllowedExcalidrawActiveTools),\n/* harmony export */ \"restore\": () => (/* binding */ restore),\n/* harmony export */ \"restoreAppState\": () => (/* binding */ restoreAppState),\n/* harmony export */ \"restoreElements\": () => (/* binding */ restoreElements),\n/* harmony export */ \"restoreLibraryItems\": () => (/* binding */ restoreLibraryItems)\n/* harmony export */ });\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _random__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../random */ \"./random.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _appState__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../appState */ \"./appState.ts\");\n/* harmony import */ var _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../element/linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _element_mutateElement__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../element/mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _element_textElement__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../element/textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _url__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./url */ \"./data/url.ts\");\n/* harmony import */ var _fractionalIndex__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../fractionalIndex */ \"./fractionalIndex.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\nconst AllowedExcalidrawActiveTools = {\n selection: true,\n text: true,\n rectangle: true,\n diamond: true,\n ellipse: true,\n line: true,\n image: true,\n arrow: true,\n freedraw: true,\n eraser: false,\n custom: true,\n frame: true,\n embeddable: true,\n hand: true,\n mermaid: true,\n laser: false,\n magicframe: false\n};\n\nconst getFontFamilyByName = fontFamilyName => {\n if (Object.keys(_constants__WEBPACK_IMPORTED_MODULE_3__.FONT_FAMILY).includes(fontFamilyName)) {\n return _constants__WEBPACK_IMPORTED_MODULE_3__.FONT_FAMILY[fontFamilyName];\n }\n\n return _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_FONT_FAMILY;\n};\n\nconst repairBinding = binding => {\n if (!binding) {\n return null;\n }\n\n return Object.assign(Object.assign({}, binding), {\n focus: binding.focus || 0\n });\n};\n\nconst restoreElementWithProperties = (element, extra) => {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;\n\n const base = {\n type: extra.type || element.type,\n // all elements must have version > 0 so getSceneVersion() will pick up\n // newly added elements\n version: element.version || 1,\n versionNonce: (_a = element.versionNonce) !== null && _a !== void 0 ? _a : 0,\n index: (_b = element.index) !== null && _b !== void 0 ? _b : null,\n isDeleted: (_c = element.isDeleted) !== null && _c !== void 0 ? _c : false,\n id: element.id || (0,_random__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n fillStyle: element.fillStyle || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.fillStyle,\n strokeWidth: element.strokeWidth || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.strokeWidth,\n strokeStyle: (_d = element.strokeStyle) !== null && _d !== void 0 ? _d : _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.strokeStyle,\n roughness: (_e = element.roughness) !== null && _e !== void 0 ? _e : _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.roughness,\n opacity: element.opacity == null ? _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.opacity : element.opacity,\n angle: element.angle || 0,\n x: (_g = (_f = extra.x) !== null && _f !== void 0 ? _f : element.x) !== null && _g !== void 0 ? _g : 0,\n y: (_j = (_h = extra.y) !== null && _h !== void 0 ? _h : element.y) !== null && _j !== void 0 ? _j : 0,\n strokeColor: element.strokeColor || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.strokeColor,\n backgroundColor: element.backgroundColor || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.backgroundColor,\n width: element.width || 0,\n height: element.height || 0,\n seed: (_k = element.seed) !== null && _k !== void 0 ? _k : 1,\n groupIds: (_l = element.groupIds) !== null && _l !== void 0 ? _l : [],\n frameId: (_m = element.frameId) !== null && _m !== void 0 ? _m : null,\n roundness: element.roundness ? element.roundness : element.strokeSharpness === \"round\" && element.type !== \"image\" ? {\n // for old elements that would now use adaptive radius algo,\n // use legacy algo instead\n type: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_1__.isUsingAdaptiveRadius)(element.type) ? _constants__WEBPACK_IMPORTED_MODULE_3__.ROUNDNESS.LEGACY : _constants__WEBPACK_IMPORTED_MODULE_3__.ROUNDNESS.PROPORTIONAL_RADIUS\n } : null,\n boundElements: element.boundElementIds ? element.boundElementIds.map(id => ({\n type: \"arrow\",\n id\n })) : (_o = element.boundElements) !== null && _o !== void 0 ? _o : [],\n updated: (_p = element.updated) !== null && _p !== void 0 ? _p : (0,_utils__WEBPACK_IMPORTED_MODULE_7__.getUpdatedTimestamp)(),\n link: element.link ? (0,_url__WEBPACK_IMPORTED_MODULE_9__.normalizeLink)(element.link) : null,\n locked: (_q = element.locked) !== null && _q !== void 0 ? _q : false\n };\n\n if (\"customData\" in element || \"customData\" in extra) {\n base.customData = \"customData\" in extra ? extra.customData : element.customData;\n }\n\n return Object.assign(Object.assign(Object.assign({}, base), (0,_element__WEBPACK_IMPORTED_MODULE_0__.getNormalizedDimensions)(base)), extra);\n};\n\nconst restoreElement = element => {\n var _a, _b, _c, _d, _e;\n\n switch (element.type) {\n case \"text\":\n let fontSize = element.fontSize;\n let fontFamily = element.fontFamily;\n\n if (\"font\" in element) {\n const [fontPx, _fontFamily] = element.font.split(\" \");\n fontSize = parseFloat(fontPx);\n fontFamily = getFontFamilyByName(_fontFamily);\n }\n\n const text = typeof element.text === \"string\" && element.text || \"\"; // line-height might not be specified either when creating elements\n // programmatically, or when importing old diagrams.\n // For the latter we want to detect the original line height which\n // will likely differ from our per-font fixed line height we now use,\n // to maintain backward compatibility.\n\n const lineHeight = element.lineHeight || (element.height ? // detect line-height from current element height and font-size\n (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.detectLineHeight)(element) : // no element height likely means programmatic use, so default\n // to a fixed line height\n (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getDefaultLineHeight)(element.fontFamily));\n element = restoreElementWithProperties(element, {\n fontSize,\n fontFamily,\n text,\n rawText: (_a = element.rawText) !== null && _a !== void 0 ? _a : \"\",\n textAlign: element.textAlign || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_TEXT_ALIGN,\n verticalAlign: element.verticalAlign || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_VERTICAL_ALIGN,\n containerId: (_b = element.containerId) !== null && _b !== void 0 ? _b : null,\n originalText: element.originalText || text,\n autoResize: (_c = element.autoResize) !== null && _c !== void 0 ? _c : true,\n lineHeight\n }); // if empty text, mark as deleted. We keep in array\n // for data integrity purposes (collab etc.)\n\n if (!text && !element.isDeleted) {\n element = Object.assign(Object.assign({}, element), {\n originalText: text,\n isDeleted: true\n });\n element = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_6__.bumpVersion)(element);\n }\n\n return element;\n\n case \"freedraw\":\n {\n return restoreElementWithProperties(element, {\n points: element.points,\n lastCommittedPoint: null,\n simulatePressure: element.simulatePressure,\n pressures: element.pressures\n });\n }\n\n case \"image\":\n return restoreElementWithProperties(element, {\n status: element.status || \"pending\",\n fileId: element.fileId,\n scale: element.scale || [1, 1]\n });\n\n case \"line\": // @ts-ignore LEGACY type\n // eslint-disable-next-line no-fallthrough\n\n case \"draw\":\n case \"arrow\":\n {\n const {\n startArrowhead = null,\n endArrowhead = element.type === \"arrow\" ? \"arrow\" : null\n } = element;\n let x = element.x;\n let y = element.y;\n let points = // migrate old arrow model to new one\n !Array.isArray(element.points) || element.points.length < 2 ? [[0, 0], [element.width, element.height]] : element.points;\n\n if (points[0][0] !== 0 || points[0][1] !== 0) {\n ({\n points,\n x,\n y\n } = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_5__.LinearElementEditor.getNormalizedPoints(element));\n }\n\n return restoreElementWithProperties(element, {\n type: element.type === \"draw\" ? \"line\" : element.type,\n startBinding: repairBinding(element.startBinding),\n endBinding: repairBinding(element.endBinding),\n lastCommittedPoint: null,\n startArrowhead,\n endArrowhead,\n points,\n x,\n y\n });\n }\n // generic elements\n\n case \"ellipse\":\n case \"rectangle\":\n case \"diamond\":\n return restoreElementWithProperties(element, {});\n\n case \"iframe\": //zsviczian\n\n case \"embeddable\":\n return restoreElementWithProperties(element, {\n scale: (_d = element.scale) !== null && _d !== void 0 ? _d : [1, 1] //zsviczian\n\n });\n\n case \"magicframe\":\n case \"frame\":\n return restoreElementWithProperties(element, {\n name: (_e = element.name) !== null && _e !== void 0 ? _e : null\n });\n // Don't use default case so as to catch a missing an element type case.\n // We also don't want to throw, but instead return void so we filter\n // out these unsupported elements from the restored array.\n }\n\n return null;\n};\n/**\r\n * Repairs container element's boundElements array by removing duplicates and\r\n * fixing containerId of bound elements if not present. Also removes any\r\n * bound elements that do not exist in the elements array.\r\n *\r\n * NOTE mutates elements.\r\n */\n\n\nconst repairContainerElement = (container, elementsMap) => {\n if (container.boundElements) {\n // copy because we're not cloning on restore, and we don't want to mutate upstream\n const boundElements = container.boundElements.slice(); // dedupe bindings & fix boundElement.containerId if not set already\n\n const boundIds = new Set();\n container.boundElements = boundElements.reduce((acc, binding) => {\n const boundElement = elementsMap.get(binding.id);\n\n if (boundElement && !boundIds.has(binding.id)) {\n boundIds.add(binding.id);\n\n if (boundElement.isDeleted) {\n return acc;\n }\n\n acc.push(binding);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_1__.isTextElement)(boundElement) && // being slightly conservative here, preserving existing containerId\n // if defined, lest boundElements is stale\n !boundElement.containerId) {\n boundElement.containerId = container.id;\n }\n }\n\n return acc;\n }, []);\n }\n};\n/**\r\n * Repairs target bound element's container's boundElements array,\r\n * or removes contaienrId if container does not exist.\r\n *\r\n * NOTE mutates elements.\r\n */\n\n\nconst repairBoundElement = (boundElement, elementsMap) => {\n const container = boundElement.containerId ? elementsMap.get(boundElement.containerId) : null;\n\n if (!container) {\n boundElement.containerId = null;\n return;\n }\n\n if (boundElement.isDeleted) {\n return;\n }\n\n if (container.boundElements && !container.boundElements.find(binding => binding.id === boundElement.id)) {\n // copy because we're not cloning on restore, and we don't want to mutate upstream\n const boundElements = (container.boundElements || (container.boundElements = [])).slice();\n boundElements.push({\n type: \"text\",\n id: boundElement.id\n });\n container.boundElements = boundElements;\n }\n};\n/**\r\n * Remove an element's frameId if its containing frame is non-existent\r\n *\r\n * NOTE mutates elements.\r\n */\n\n\nconst repairFrameMembership = (element, elementsMap) => {\n if (element.frameId) {\n const containingFrame = elementsMap.get(element.frameId);\n\n if (!containingFrame) {\n element.frameId = null;\n }\n }\n};\n\nconst restoreElements = (elements,\n/** NOTE doesn't serve for reconciliation */\nlocalElements, opts) => {\n // used to detect duplicate top-level element ids\n const existingIds = new Set();\n const localElementsMap = localElements ? (0,_utils__WEBPACK_IMPORTED_MODULE_7__.arrayToMap)(localElements) : null;\n const restoredElements = (0,_fractionalIndex__WEBPACK_IMPORTED_MODULE_10__.syncInvalidIndices)((elements || []).reduce((elements, element) => {\n // filtering out selection, which is legacy, no longer kept in elements,\n // and causing issues if retained\n if (element.type !== \"selection\" && !(0,_element__WEBPACK_IMPORTED_MODULE_0__.isInvisiblySmallElement)(element)) {\n let migratedElement = restoreElement(element);\n\n if (migratedElement) {\n const localElement = localElementsMap === null || localElementsMap === void 0 ? void 0 : localElementsMap.get(element.id);\n\n if (localElement && localElement.version > migratedElement.version) {\n migratedElement = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_6__.bumpVersion)(migratedElement, localElement.version);\n }\n\n if (existingIds.has(migratedElement.id)) {\n migratedElement = Object.assign(Object.assign({}, migratedElement), {\n id: (0,_random__WEBPACK_IMPORTED_MODULE_2__.randomId)()\n });\n }\n\n existingIds.add(migratedElement.id);\n elements.push(migratedElement);\n }\n }\n\n return elements;\n }, []));\n\n if (!(opts === null || opts === void 0 ? void 0 : opts.repairBindings)) {\n return restoredElements;\n } // repair binding. Mutates elements.\n\n\n const restoredElementsMap = (0,_utils__WEBPACK_IMPORTED_MODULE_7__.arrayToMap)(restoredElements);\n\n for (const element of restoredElements) {\n if (element.frameId) {\n repairFrameMembership(element, restoredElementsMap);\n }\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_1__.isTextElement)(element) && element.containerId) {\n repairBoundElement(element, restoredElementsMap);\n } else if (element.boundElements) {\n repairContainerElement(element, restoredElementsMap);\n }\n\n if (opts.refreshDimensions && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_1__.isTextElement)(element)) {\n Object.assign(element, (0,_element__WEBPACK_IMPORTED_MODULE_0__.refreshTextDimensions)(element, (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getContainerElement)(element, restoredElementsMap), restoredElementsMap));\n }\n }\n\n return restoredElements;\n};\n\nconst coalesceAppStateValue = (key, appState, defaultAppState) => {\n const value = appState[key]; // NOTE the value! assertion is needed in TS 4.5.5 (fixed in newer versions)\n\n return value !== undefined ? value : defaultAppState[key];\n};\n\nconst LegacyAppStateMigrations = {\n isSidebarDocked: (appState, defaultAppState) => {\n var _a;\n\n return [\"defaultSidebarDockedPreference\", (_a = appState.isSidebarDocked) !== null && _a !== void 0 ? _a : coalesceAppStateValue(\"defaultSidebarDockedPreference\", appState, defaultAppState)];\n }\n};\nconst restoreAppState = (appState, localAppState) => {\n var _a, _b, _c, _d;\n\n appState = appState || {};\n const defaultAppState = (0,_appState__WEBPACK_IMPORTED_MODULE_4__.getDefaultAppState)();\n const nextAppState = {}; // first, migrate all legacy AppState properties to new ones. We do it\n // in one go before migrate the rest of the properties in case the new ones\n // depend on checking any other key (i.e. they are coupled)\n\n for (const legacyKey of Object.keys(LegacyAppStateMigrations)) {\n if (legacyKey in appState) {\n const [nextKey, nextValue] = LegacyAppStateMigrations[legacyKey](appState, defaultAppState);\n nextAppState[nextKey] = nextValue;\n }\n }\n\n for (const [key, defaultValue] of Object.entries(defaultAppState)) {\n // if AppState contains a legacy key, prefer that one and migrate its\n // value to the new one\n const suppliedValue = appState[key];\n const localValue = localAppState ? localAppState[key] : undefined;\n nextAppState[key] = suppliedValue !== undefined ? suppliedValue : localValue !== undefined ? localValue : defaultValue;\n }\n\n return Object.assign(Object.assign({}, nextAppState), {\n cursorButton: (localAppState === null || localAppState === void 0 ? void 0 : localAppState.cursorButton) || \"up\",\n // reset on fresh restore so as to hide the UI button if penMode not active\n penDetected: (_a = localAppState === null || localAppState === void 0 ? void 0 : localAppState.penDetected) !== null && _a !== void 0 ? _a : appState.penMode ? (_b = appState.penDetected) !== null && _b !== void 0 ? _b : false : false,\n activeTool: Object.assign(Object.assign({}, (0,_utils__WEBPACK_IMPORTED_MODULE_7__.updateActiveTool)(defaultAppState, nextAppState.activeTool.type && AllowedExcalidrawActiveTools[nextAppState.activeTool.type] ? nextAppState.activeTool : {\n type: \"selection\"\n })), {\n lastActiveTool: null,\n locked: (_c = nextAppState.activeTool.locked) !== null && _c !== void 0 ? _c : false\n }),\n // Migrates from previous version where appState.zoom was a number\n zoom: typeof appState.zoom === \"number\" ? {\n value: appState.zoom\n } : ((_d = appState.zoom) === null || _d === void 0 ? void 0 : _d.value) ? appState.zoom : defaultAppState.zoom,\n openSidebar: // string (legacy)\n typeof appState.openSidebar === \"string\" ? {\n name: _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_SIDEBAR.name\n } : nextAppState.openSidebar\n });\n};\nconst restore = (data,\n/**\r\n * Local AppState (`this.state` or initial state from localStorage) so that we\r\n * don't overwrite local state with default values (when values not\r\n * explicitly specified).\r\n * Supply `null` if you can't get access to it.\r\n */\nlocalAppState, localElements, elementsConfig) => {\n return {\n elements: restoreElements(data === null || data === void 0 ? void 0 : data.elements, localElements, elementsConfig),\n appState: restoreAppState(data === null || data === void 0 ? void 0 : data.appState, localAppState || null),\n files: (data === null || data === void 0 ? void 0 : data.files) || {}\n };\n};\n\nconst restoreLibraryItem = libraryItem => {\n const elements = restoreElements((0,_element__WEBPACK_IMPORTED_MODULE_0__.getNonDeletedElements)(libraryItem.elements), null);\n return elements.length ? Object.assign(Object.assign({}, libraryItem), {\n elements\n }) : null;\n};\n\nconst restoreLibraryItems = (libraryItems = [], defaultStatus) => {\n const restoredItems = [];\n\n for (const item of libraryItems) {\n // migrate older libraries\n if (Array.isArray(item)) {\n const restoredItem = restoreLibraryItem({\n status: defaultStatus,\n elements: item,\n id: (0,_random__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n created: Date.now()\n });\n\n if (restoredItem) {\n restoredItems.push(restoredItem);\n }\n } else {\n const _item = item;\n const restoredItem = restoreLibraryItem(Object.assign(Object.assign({}, _item), {\n id: _item.id || (0,_random__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n status: _item.status || defaultStatus,\n created: _item.created || Date.now()\n }));\n\n if (restoredItem) {\n restoredItems.push(restoredItem);\n }\n }\n }\n\n return restoredItems;\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./data/restore.ts?");
2458
2458
 
2459
2459
  /***/ }),
2460
2460
 
@@ -2630,7 +2630,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
2630
2630
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
2631
2631
 
2632
2632
  "use strict";
2633
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"deepCopyElement\": () => (/* binding */ deepCopyElement),\n/* harmony export */ \"duplicateElement\": () => (/* binding */ duplicateElement),\n/* harmony export */ \"duplicateElements\": () => (/* binding */ duplicateElements),\n/* harmony export */ \"newElement\": () => (/* binding */ newElement),\n/* harmony export */ \"newEmbeddableElement\": () => (/* binding */ newEmbeddableElement),\n/* harmony export */ \"newFrameElement\": () => (/* binding */ newFrameElement),\n/* harmony export */ \"newFreeDrawElement\": () => (/* binding */ newFreeDrawElement),\n/* harmony export */ \"newIframeElement\": () => (/* binding */ newIframeElement),\n/* harmony export */ \"newImageElement\": () => (/* binding */ newImageElement),\n/* harmony export */ \"newLinearElement\": () => (/* binding */ newLinearElement),\n/* harmony export */ \"newMagicFrameElement\": () => (/* binding */ newMagicFrameElement),\n/* harmony export */ \"newTextElement\": () => (/* binding */ newTextElement),\n/* harmony export */ \"refreshTextDimensions\": () => (/* binding */ refreshTextDimensions),\n/* harmony export */ \"regenerateId\": () => (/* binding */ regenerateId)\n/* harmony export */ });\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _random__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../random */ \"./random.ts\");\n/* harmony import */ var _mutateElement__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _groups__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../groups */ \"./groups.ts\");\n/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! . */ \"./element/index.ts\");\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../math */ \"./math.ts\");\n/* harmony import */ var _bounds__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./bounds */ \"./element/bounds.ts\");\n/* harmony import */ var _textElement__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\nvar __rest = undefined && undefined.__rest || function (s, e) {\n var t = {};\n\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];\n\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];\n }\n return t;\n};\n\n\n\n\n\n\n\n\n\n\n\nconst _newElementBase = (type, _a) => {\n var _b, _c;\n\n var {\n x,\n y,\n strokeColor = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_ELEMENT_PROPS.strokeColor,\n backgroundColor = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_ELEMENT_PROPS.backgroundColor,\n fillStyle = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_ELEMENT_PROPS.fillStyle,\n strokeWidth = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_ELEMENT_PROPS.strokeWidth,\n strokeStyle = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_ELEMENT_PROPS.strokeStyle,\n roughness = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_ELEMENT_PROPS.roughness,\n opacity = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_ELEMENT_PROPS.opacity,\n width = 0,\n height = 0,\n angle = 0,\n groupIds = [],\n frameId = null,\n index = null,\n roundness = null,\n boundElements = null,\n link = null,\n locked = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_ELEMENT_PROPS.locked\n } = _a,\n rest = __rest(_a, [\"x\", \"y\", \"strokeColor\", \"backgroundColor\", \"fillStyle\", \"strokeWidth\", \"strokeStyle\", \"roughness\", \"opacity\", \"width\", \"height\", \"angle\", \"groupIds\", \"frameId\", \"index\", \"roundness\", \"boundElements\", \"link\", \"locked\"]); // assign type to guard against excess properties\n\n\n const element = {\n id: rest.id || (type === \"text\" ? (0,_random__WEBPACK_IMPORTED_MODULE_1__.obsidianId)() : (0,_random__WEBPACK_IMPORTED_MODULE_1__.randomId)()),\n type,\n x,\n y,\n width,\n height,\n angle,\n strokeColor,\n backgroundColor,\n fillStyle,\n strokeWidth,\n strokeStyle,\n roughness,\n opacity,\n groupIds,\n frameId,\n index,\n roundness,\n seed: (_b = rest.seed) !== null && _b !== void 0 ? _b : (0,_random__WEBPACK_IMPORTED_MODULE_1__.randomInteger)(),\n version: rest.version || 1,\n versionNonce: (_c = rest.versionNonce) !== null && _c !== void 0 ? _c : 0,\n isDeleted: false,\n boundElements,\n updated: (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getUpdatedTimestamp)(),\n link,\n locked,\n //...(rest.customData ? { customData: rest.customData } : {}), //zsviczian\n customData: rest.customData\n };\n return element;\n};\n\nconst newElement = opts => _newElementBase(opts.type, opts);\nconst newEmbeddableElement = opts => {\n return Object.assign(Object.assign({}, _newElementBase(\"embeddable\", opts)), {\n scale: [1, 1]\n });\n};\nconst newIframeElement = opts => {\n return Object.assign(Object.assign({}, _newElementBase(\"iframe\", opts)), {\n scale: [1, 1]\n });\n};\nconst newFrameElement = opts => {\n const frameElement = (0,_mutateElement__WEBPACK_IMPORTED_MODULE_2__.newElementWith)(Object.assign(Object.assign({}, _newElementBase(\"frame\", opts)), {\n type: \"frame\",\n name: (opts === null || opts === void 0 ? void 0 : opts.name) || null\n }), {});\n return frameElement;\n};\nconst newMagicFrameElement = opts => {\n const frameElement = (0,_mutateElement__WEBPACK_IMPORTED_MODULE_2__.newElementWith)(Object.assign(Object.assign({}, _newElementBase(\"magicframe\", opts)), {\n type: \"magicframe\",\n name: (opts === null || opts === void 0 ? void 0 : opts.name) || null\n }), {});\n return frameElement;\n};\n/** computes element x/y offset based on textAlign/verticalAlign */\n\nconst getTextElementPositionOffsets = (opts, metrics) => {\n return {\n x: opts.textAlign === \"center\" ? metrics.width / 2 : opts.textAlign === \"right\" ? metrics.width : 0,\n y: opts.verticalAlign === \"middle\" ? metrics.height / 2 : 0\n };\n};\n\nconst newTextElement = opts => {\n const fontFamily = opts.fontFamily || _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_FONT_FAMILY;\n const fontSize = opts.fontSize || _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_FONT_SIZE;\n const lineHeight = opts.lineHeight || (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.getDefaultLineHeight)(fontFamily);\n const text = (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.normalizeText)(opts.text);\n const rawText = (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.normalizeText)(opts.rawText); //zsviczian\n\n const metrics = (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.measureText)(text, (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getFontString)({\n fontFamily,\n fontSize\n }), lineHeight);\n const textAlign = opts.textAlign || _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_TEXT_ALIGN;\n const verticalAlign = opts.verticalAlign || _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_VERTICAL_ALIGN;\n const offsets = getTextElementPositionOffsets({\n textAlign,\n verticalAlign\n }, metrics);\n const textElementProps = Object.assign(Object.assign({}, _newElementBase(\"text\", opts)), {\n text,\n rawText,\n fontSize,\n fontFamily,\n textAlign,\n verticalAlign,\n x: opts.x - offsets.x,\n y: opts.y - offsets.y,\n width: metrics.width,\n height: metrics.height,\n containerId: opts.containerId || null,\n originalText: text,\n autoResize: true,\n lineHeight\n });\n const textElement = (0,_mutateElement__WEBPACK_IMPORTED_MODULE_2__.newElementWith)(textElementProps, {});\n return textElement;\n};\n\nconst getAdjustedDimensions = (element, elementsMap, nextText) => {\n let {\n width: nextWidth,\n height: nextHeight\n } = (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.measureText)(nextText, (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getFontString)(element), element.lineHeight); // wrapped text\n\n if (!element.autoResize) {\n nextWidth = element.width;\n }\n\n const {\n textAlign,\n verticalAlign\n } = element;\n let x;\n let y;\n\n if (textAlign === \"center\" && verticalAlign === _constants__WEBPACK_IMPORTED_MODULE_8__.VERTICAL_ALIGN.MIDDLE && !element.containerId && element.autoResize) {\n const prevMetrics = (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.measureText)(element.text, (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getFontString)(element), element.lineHeight);\n const offsets = getTextElementPositionOffsets(element, {\n width: nextWidth - prevMetrics.width,\n height: nextHeight - prevMetrics.height\n });\n x = element.x - offsets.x;\n y = element.y - offsets.y;\n } else {\n const [x1, y1, x2, y2] = (0,___WEBPACK_IMPORTED_MODULE_4__.getElementAbsoluteCoords)(element, elementsMap);\n const [nextX1, nextY1, nextX2, nextY2] = (0,_bounds__WEBPACK_IMPORTED_MODULE_6__.getResizedElementAbsoluteCoords)(element, nextWidth, nextHeight, false);\n const deltaX1 = (x1 - nextX1) / 2;\n const deltaY1 = (y1 - nextY1) / 2;\n const deltaX2 = (x2 - nextX2) / 2;\n const deltaY2 = (y2 - nextY2) / 2;\n [x, y] = (0,_math__WEBPACK_IMPORTED_MODULE_5__.adjustXYWithRotation)({\n s: true,\n e: textAlign === \"center\" || textAlign === \"left\",\n w: textAlign === \"center\" || textAlign === \"right\"\n }, element.x, element.y, element.angle, deltaX1, deltaY1, deltaX2, deltaY2);\n }\n\n return {\n width: nextWidth,\n height: nextHeight,\n x: Number.isFinite(x) ? x : element.x,\n y: Number.isFinite(y) ? y : element.y\n };\n};\n\nconst refreshTextDimensions = (textElement, container, elementsMap, text = textElement.text) => {\n if (textElement.isDeleted) {\n return;\n }\n\n if (container || !textElement.autoResize) {\n text = (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.wrapText)(text, (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getFontString)(textElement), container ? (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.getBoundTextMaxWidth)(container, textElement) : textElement.width);\n }\n\n const dimensions = getAdjustedDimensions(textElement, elementsMap, text);\n return Object.assign({\n text\n }, dimensions);\n};\nconst newFreeDrawElement = opts => {\n return Object.assign(Object.assign({}, _newElementBase(opts.type, opts)), {\n points: opts.points || [],\n pressures: [],\n simulatePressure: opts.simulatePressure,\n lastCommittedPoint: null\n });\n};\nconst newLinearElement = opts => {\n return Object.assign(Object.assign({}, _newElementBase(opts.type, opts)), {\n points: opts.points || [],\n lastCommittedPoint: null,\n startBinding: null,\n endBinding: null,\n startArrowhead: opts.startArrowhead || null,\n endArrowhead: opts.endArrowhead || null\n });\n};\nconst newImageElement = opts => {\n var _a, _b, _c;\n\n return Object.assign(Object.assign({}, _newElementBase(\"image\", opts)), {\n // in the future we'll support changing stroke color for some SVG elements,\n // and `transparent` will likely mean \"use original colors of the image\"\n strokeColor: \"transparent\",\n status: (_a = opts.status) !== null && _a !== void 0 ? _a : \"pending\",\n fileId: (_b = opts.fileId) !== null && _b !== void 0 ? _b : null,\n scale: (_c = opts.scale) !== null && _c !== void 0 ? _c : [1, 1]\n });\n}; // Simplified deep clone for the purpose of cloning ExcalidrawElement.\n//\n// Only clones plain objects and arrays. Doesn't clone Date, RegExp, Map, Set,\n// Typed arrays and other non-null objects.\n//\n// Adapted from https://github.com/lukeed/klona\n//\n// The reason for `deepCopyElement()` wrapper is type safety (only allow\n// passing ExcalidrawElement as the top-level argument).\n\nconst _deepCopyElement = (val, depth = 0) => {\n // only clone non-primitives\n if (val == null || typeof val !== \"object\") {\n return val;\n }\n\n const objectType = Object.prototype.toString.call(val);\n\n if (objectType === \"[object Object]\") {\n const tmp = typeof val.constructor === \"function\" ? Object.create(Object.getPrototypeOf(val)) : {};\n\n for (const key in val) {\n if (val.hasOwnProperty(key)) {\n // don't copy non-serializable objects like these caches. They'll be\n // populated when the element is rendered.\n if (depth === 0 && (key === \"shape\" || key === \"canvas\")) {\n continue;\n }\n\n tmp[key] = _deepCopyElement(val[key], depth + 1);\n }\n }\n\n return tmp;\n }\n\n if (Array.isArray(val)) {\n let k = val.length;\n const arr = new Array(k);\n\n while (k--) {\n arr[k] = _deepCopyElement(val[k], depth + 1);\n }\n\n return arr;\n } // we're not cloning non-array & non-plain-object objects because we\n // don't support them on excalidraw elements yet. If we do, we need to make\n // sure we start cloning them, so let's warn about it.\n\n\n if (true) {\n if (objectType !== \"[object Object]\" && objectType !== \"[object Array]\" && objectType.startsWith(\"[object \")) {\n console.warn(`_deepCloneElement: unexpected object type ${objectType}. This value will not be cloned!`);\n }\n }\n\n return val;\n};\n/**\r\n * Clones ExcalidrawElement data structure. Does not regenerate id, nonce, or\r\n * any value. The purpose is to to break object references for immutability\r\n * reasons, whenever we want to keep the original element, but ensure it's not\r\n * mutated.\r\n *\r\n * Only clones plain objects and arrays. Doesn't clone Date, RegExp, Map, Set,\r\n * Typed arrays and other non-null objects.\r\n */\n\n\nconst deepCopyElement = val => {\n return _deepCopyElement(val);\n};\n/**\r\n * utility wrapper to generate new id. In test env it reuses the old + postfix\r\n * for test assertions.\r\n */\n\nconst regenerateId = (\n/** supply null if no previous id exists */\npreviousId) => {\n var _a, _b;\n\n if ((0,_utils__WEBPACK_IMPORTED_MODULE_0__.isTestEnv)() && previousId) {\n let nextId = `${previousId}_copy`; // `window.h` may not be defined in some unit tests\n\n if ((_b = (_a = window.h) === null || _a === void 0 ? void 0 : _a.app) === null || _b === void 0 ? void 0 : _b.getSceneElementsIncludingDeleted().find(el => el.id === nextId)) {\n nextId += \"_copy\";\n }\n\n return nextId;\n }\n\n return (0,_random__WEBPACK_IMPORTED_MODULE_1__.randomId)();\n};\n/**\r\n * Duplicate an element, often used in the alt-drag operation.\r\n * Note that this method has gotten a bit complicated since the\r\n * introduction of gruoping/ungrouping elements.\r\n * @param editingGroupId The current group being edited. The new\r\n * element will inherit this group and its\r\n * parents.\r\n * @param groupIdMapForOperation A Map that maps old group IDs to\r\n * duplicated ones. If you are duplicating\r\n * multiple elements at once, share this map\r\n * amongst all of them\r\n * @param element Element to duplicate\r\n * @param overrides Any element properties to override\r\n */\n\nconst duplicateElement = (editingGroupId, groupIdMapForOperation, element, overrides) => {\n let copy = deepCopyElement(element);\n copy.id = copy.type === \"text\" ? (0,_random__WEBPACK_IMPORTED_MODULE_1__.obsidianId)() : regenerateId(copy.id); //zsviczian\n\n copy.boundElements = null;\n copy.updated = (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getUpdatedTimestamp)();\n copy.seed = (0,_random__WEBPACK_IMPORTED_MODULE_1__.randomInteger)();\n copy.groupIds = (0,_groups__WEBPACK_IMPORTED_MODULE_3__.getNewGroupIdsForDuplication)(copy.groupIds, editingGroupId, groupId => {\n if (!groupIdMapForOperation.has(groupId)) {\n groupIdMapForOperation.set(groupId, regenerateId(groupId));\n }\n\n return groupIdMapForOperation.get(groupId);\n });\n\n if (overrides) {\n copy = Object.assign(copy, overrides);\n }\n\n return copy;\n};\n/**\r\n * Clones elements, regenerating their ids (including bindings) and group ids.\r\n *\r\n * If bindings don't exist in the elements array, they are removed. Therefore,\r\n * it's advised to supply the whole elements array, or sets of elements that\r\n * are encapsulated (such as library items), if the purpose is to retain\r\n * bindings to the cloned elements intact.\r\n *\r\n * NOTE by default does not randomize or regenerate anything except the id.\r\n */\n\nconst duplicateElements = (elements, opts) => {\n const clonedElements = [];\n const origElementsMap = (0,_utils__WEBPACK_IMPORTED_MODULE_0__.arrayToMap)(elements); // used for for migrating old ids to new ids\n\n const elementNewIdsMap = new Map();\n\n const maybeGetNewId = id => {\n // if we've already migrated the element id, return the new one directly\n if (elementNewIdsMap.has(id)) {\n return elementNewIdsMap.get(id);\n } // if we haven't migrated the element id, but an old element with the same\n // id exists, generate a new id for it and return it\n\n\n if (origElementsMap.has(id)) {\n const newId = regenerateId(id);\n elementNewIdsMap.set(id, newId);\n return newId;\n } // if old element doesn't exist, return null to mark it for removal\n\n\n return null;\n };\n\n const groupNewIdsMap = new Map();\n\n for (const element of elements) {\n const clonedElement = _deepCopyElement(element);\n\n clonedElement.id = maybeGetNewId(element.id);\n\n if (opts === null || opts === void 0 ? void 0 : opts.randomizeSeed) {\n clonedElement.seed = (0,_random__WEBPACK_IMPORTED_MODULE_1__.randomInteger)();\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_2__.bumpVersion)(clonedElement);\n }\n\n if (clonedElement.groupIds) {\n clonedElement.groupIds = clonedElement.groupIds.map(groupId => {\n if (!groupNewIdsMap.has(groupId)) {\n groupNewIdsMap.set(groupId, regenerateId(groupId));\n }\n\n return groupNewIdsMap.get(groupId);\n });\n }\n\n if (\"containerId\" in clonedElement && clonedElement.containerId) {\n const newContainerId = maybeGetNewId(clonedElement.containerId);\n clonedElement.containerId = newContainerId;\n }\n\n if (\"boundElements\" in clonedElement && clonedElement.boundElements) {\n clonedElement.boundElements = clonedElement.boundElements.reduce((acc, binding) => {\n const newBindingId = maybeGetNewId(binding.id);\n\n if (newBindingId) {\n acc.push(Object.assign(Object.assign({}, binding), {\n id: newBindingId\n }));\n }\n\n return acc;\n }, []);\n }\n\n if (\"endBinding\" in clonedElement && clonedElement.endBinding) {\n const newEndBindingId = maybeGetNewId(clonedElement.endBinding.elementId);\n clonedElement.endBinding = newEndBindingId ? Object.assign(Object.assign({}, clonedElement.endBinding), {\n elementId: newEndBindingId\n }) : null;\n }\n\n if (\"startBinding\" in clonedElement && clonedElement.startBinding) {\n const newEndBindingId = maybeGetNewId(clonedElement.startBinding.elementId);\n clonedElement.startBinding = newEndBindingId ? Object.assign(Object.assign({}, clonedElement.startBinding), {\n elementId: newEndBindingId\n }) : null;\n }\n\n if (clonedElement.frameId) {\n clonedElement.frameId = maybeGetNewId(clonedElement.frameId);\n }\n\n clonedElements.push(clonedElement);\n }\n\n return clonedElements;\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./element/newElement.ts?");
2633
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"deepCopyElement\": () => (/* binding */ deepCopyElement),\n/* harmony export */ \"duplicateElement\": () => (/* binding */ duplicateElement),\n/* harmony export */ \"duplicateElements\": () => (/* binding */ duplicateElements),\n/* harmony export */ \"newElement\": () => (/* binding */ newElement),\n/* harmony export */ \"newEmbeddableElement\": () => (/* binding */ newEmbeddableElement),\n/* harmony export */ \"newFrameElement\": () => (/* binding */ newFrameElement),\n/* harmony export */ \"newFreeDrawElement\": () => (/* binding */ newFreeDrawElement),\n/* harmony export */ \"newIframeElement\": () => (/* binding */ newIframeElement),\n/* harmony export */ \"newImageElement\": () => (/* binding */ newImageElement),\n/* harmony export */ \"newLinearElement\": () => (/* binding */ newLinearElement),\n/* harmony export */ \"newMagicFrameElement\": () => (/* binding */ newMagicFrameElement),\n/* harmony export */ \"newTextElement\": () => (/* binding */ newTextElement),\n/* harmony export */ \"refreshTextDimensions\": () => (/* binding */ refreshTextDimensions),\n/* harmony export */ \"regenerateId\": () => (/* binding */ regenerateId)\n/* harmony export */ });\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _random__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../random */ \"./random.ts\");\n/* harmony import */ var _mutateElement__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _groups__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../groups */ \"./groups.ts\");\n/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! . */ \"./element/index.ts\");\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../math */ \"./math.ts\");\n/* harmony import */ var _bounds__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./bounds */ \"./element/bounds.ts\");\n/* harmony import */ var _textElement__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\nvar __rest = undefined && undefined.__rest || function (s, e) {\n var t = {};\n\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];\n\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];\n }\n return t;\n};\n\n\n\n\n\n\n\n\n\n\n\nconst _newElementBase = (type, _a) => {\n var _b, _c;\n\n var {\n x,\n y,\n strokeColor = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_ELEMENT_PROPS.strokeColor,\n backgroundColor = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_ELEMENT_PROPS.backgroundColor,\n fillStyle = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_ELEMENT_PROPS.fillStyle,\n strokeWidth = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_ELEMENT_PROPS.strokeWidth,\n strokeStyle = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_ELEMENT_PROPS.strokeStyle,\n roughness = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_ELEMENT_PROPS.roughness,\n opacity = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_ELEMENT_PROPS.opacity,\n width = 0,\n height = 0,\n angle = 0,\n groupIds = [],\n frameId = null,\n index = null,\n roundness = null,\n boundElements = null,\n link = null,\n locked = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_ELEMENT_PROPS.locked\n } = _a,\n rest = __rest(_a, [\"x\", \"y\", \"strokeColor\", \"backgroundColor\", \"fillStyle\", \"strokeWidth\", \"strokeStyle\", \"roughness\", \"opacity\", \"width\", \"height\", \"angle\", \"groupIds\", \"frameId\", \"index\", \"roundness\", \"boundElements\", \"link\", \"locked\"]); // assign type to guard against excess properties\n\n\n const element = {\n id: rest.id || (type === \"text\" ? (0,_random__WEBPACK_IMPORTED_MODULE_1__.obsidianId)() : (0,_random__WEBPACK_IMPORTED_MODULE_1__.randomId)()),\n type,\n x,\n y,\n width,\n height,\n angle,\n strokeColor,\n backgroundColor,\n fillStyle,\n strokeWidth,\n strokeStyle,\n roughness,\n opacity,\n groupIds,\n frameId,\n index,\n roundness,\n seed: (_b = rest.seed) !== null && _b !== void 0 ? _b : (0,_random__WEBPACK_IMPORTED_MODULE_1__.randomInteger)(),\n version: rest.version || 1,\n versionNonce: (_c = rest.versionNonce) !== null && _c !== void 0 ? _c : 0,\n isDeleted: false,\n boundElements,\n updated: (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getUpdatedTimestamp)(),\n link,\n locked,\n //...(rest.customData ? { customData: rest.customData } : {}), //zsviczian\n customData: rest.customData\n };\n return element;\n};\n\nconst newElement = opts => _newElementBase(opts.type, opts);\nconst newEmbeddableElement = opts => {\n return Object.assign(Object.assign({}, _newElementBase(\"embeddable\", opts)), {\n scale: [1, 1]\n });\n};\nconst newIframeElement = opts => {\n return Object.assign(Object.assign({}, _newElementBase(\"iframe\", opts)), {\n scale: [1, 1]\n });\n};\nconst newFrameElement = opts => {\n const frameElement = (0,_mutateElement__WEBPACK_IMPORTED_MODULE_2__.newElementWith)(Object.assign(Object.assign({}, _newElementBase(\"frame\", opts)), {\n type: \"frame\",\n name: (opts === null || opts === void 0 ? void 0 : opts.name) || null\n }), {});\n return frameElement;\n};\nconst newMagicFrameElement = opts => {\n const frameElement = (0,_mutateElement__WEBPACK_IMPORTED_MODULE_2__.newElementWith)(Object.assign(Object.assign({}, _newElementBase(\"magicframe\", opts)), {\n type: \"magicframe\",\n name: (opts === null || opts === void 0 ? void 0 : opts.name) || null\n }), {});\n return frameElement;\n};\n/** computes element x/y offset based on textAlign/verticalAlign */\n\nconst getTextElementPositionOffsets = (opts, metrics) => {\n return {\n x: opts.textAlign === \"center\" ? metrics.width / 2 : opts.textAlign === \"right\" ? metrics.width : 0,\n y: opts.verticalAlign === \"middle\" ? metrics.height / 2 : 0\n };\n};\n\nconst newTextElement = opts => {\n var _a, _b;\n\n const fontFamily = opts.fontFamily || _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_FONT_FAMILY;\n const fontSize = opts.fontSize || _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_FONT_SIZE;\n const lineHeight = opts.lineHeight || (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.getDefaultLineHeight)(fontFamily);\n const text = (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.normalizeText)(opts.text);\n const rawText = (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.normalizeText)(opts.rawText); //zsviczian\n\n const metrics = (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.measureText)(text, (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getFontString)({\n fontFamily,\n fontSize\n }), lineHeight);\n const textAlign = opts.textAlign || _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_TEXT_ALIGN;\n const verticalAlign = opts.verticalAlign || _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_VERTICAL_ALIGN;\n const offsets = getTextElementPositionOffsets({\n textAlign,\n verticalAlign\n }, metrics);\n const textElementProps = Object.assign(Object.assign({}, _newElementBase(\"text\", opts)), {\n text,\n rawText,\n fontSize,\n fontFamily,\n textAlign,\n verticalAlign,\n x: opts.x - offsets.x,\n y: opts.y - offsets.y,\n width: metrics.width,\n //width: Math.max(opts.width??0,metrics.width), //zsviczian\n height: metrics.height,\n containerId: opts.containerId || null,\n originalText: (_a = opts.originalText) !== null && _a !== void 0 ? _a : text,\n autoResize: (_b = opts.autoResize) !== null && _b !== void 0 ? _b : true,\n lineHeight\n });\n const textElement = (0,_mutateElement__WEBPACK_IMPORTED_MODULE_2__.newElementWith)(textElementProps, {});\n return textElement;\n};\n\nconst getAdjustedDimensions = (element, elementsMap, nextText) => {\n let {\n width: nextWidth,\n height: nextHeight\n } = (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.measureText)(nextText, (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getFontString)(element), element.lineHeight); // wrapped text\n\n if (!element.autoResize) {\n nextWidth = element.width;\n }\n\n const {\n textAlign,\n verticalAlign\n } = element;\n let x;\n let y;\n\n if (textAlign === \"center\" && verticalAlign === _constants__WEBPACK_IMPORTED_MODULE_8__.VERTICAL_ALIGN.MIDDLE && !element.containerId && element.autoResize) {\n const prevMetrics = (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.measureText)(element.text, (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getFontString)(element), element.lineHeight);\n const offsets = getTextElementPositionOffsets(element, {\n width: nextWidth - prevMetrics.width,\n height: nextHeight - prevMetrics.height\n });\n x = element.x - offsets.x;\n y = element.y - offsets.y;\n } else {\n const [x1, y1, x2, y2] = (0,___WEBPACK_IMPORTED_MODULE_4__.getElementAbsoluteCoords)(element, elementsMap);\n const [nextX1, nextY1, nextX2, nextY2] = (0,_bounds__WEBPACK_IMPORTED_MODULE_6__.getResizedElementAbsoluteCoords)(element, nextWidth, nextHeight, false);\n const deltaX1 = (x1 - nextX1) / 2;\n const deltaY1 = (y1 - nextY1) / 2;\n const deltaX2 = (x2 - nextX2) / 2;\n const deltaY2 = (y2 - nextY2) / 2;\n [x, y] = (0,_math__WEBPACK_IMPORTED_MODULE_5__.adjustXYWithRotation)({\n s: true,\n e: textAlign === \"center\" || textAlign === \"left\",\n w: textAlign === \"center\" || textAlign === \"right\"\n }, element.x, element.y, element.angle, deltaX1, deltaY1, deltaX2, deltaY2);\n }\n\n return {\n width: nextWidth,\n height: nextHeight,\n x: Number.isFinite(x) ? x : element.x,\n y: Number.isFinite(y) ? y : element.y\n };\n};\n\nconst refreshTextDimensions = (textElement, container, elementsMap, text = textElement.text) => {\n if (textElement.isDeleted) {\n return;\n }\n\n if (container || !textElement.autoResize) {\n text = (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.wrapText)(text, (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getFontString)(textElement), container ? (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.getBoundTextMaxWidth)(container, textElement) : textElement.width);\n }\n\n const dimensions = getAdjustedDimensions(textElement, elementsMap, text);\n return Object.assign({\n text\n }, dimensions);\n};\nconst newFreeDrawElement = opts => {\n return Object.assign(Object.assign({}, _newElementBase(opts.type, opts)), {\n points: opts.points || [],\n pressures: [],\n simulatePressure: opts.simulatePressure,\n lastCommittedPoint: null\n });\n};\nconst newLinearElement = opts => {\n return Object.assign(Object.assign({}, _newElementBase(opts.type, opts)), {\n points: opts.points || [],\n lastCommittedPoint: null,\n startBinding: null,\n endBinding: null,\n startArrowhead: opts.startArrowhead || null,\n endArrowhead: opts.endArrowhead || null\n });\n};\nconst newImageElement = opts => {\n var _a, _b, _c;\n\n return Object.assign(Object.assign({}, _newElementBase(\"image\", opts)), {\n // in the future we'll support changing stroke color for some SVG elements,\n // and `transparent` will likely mean \"use original colors of the image\"\n strokeColor: \"transparent\",\n status: (_a = opts.status) !== null && _a !== void 0 ? _a : \"pending\",\n fileId: (_b = opts.fileId) !== null && _b !== void 0 ? _b : null,\n scale: (_c = opts.scale) !== null && _c !== void 0 ? _c : [1, 1]\n });\n}; // Simplified deep clone for the purpose of cloning ExcalidrawElement.\n//\n// Only clones plain objects and arrays. Doesn't clone Date, RegExp, Map, Set,\n// Typed arrays and other non-null objects.\n//\n// Adapted from https://github.com/lukeed/klona\n//\n// The reason for `deepCopyElement()` wrapper is type safety (only allow\n// passing ExcalidrawElement as the top-level argument).\n\nconst _deepCopyElement = (val, depth = 0) => {\n // only clone non-primitives\n if (val == null || typeof val !== \"object\") {\n return val;\n }\n\n const objectType = Object.prototype.toString.call(val);\n\n if (objectType === \"[object Object]\") {\n const tmp = typeof val.constructor === \"function\" ? Object.create(Object.getPrototypeOf(val)) : {};\n\n for (const key in val) {\n if (val.hasOwnProperty(key)) {\n // don't copy non-serializable objects like these caches. They'll be\n // populated when the element is rendered.\n if (depth === 0 && (key === \"shape\" || key === \"canvas\")) {\n continue;\n }\n\n tmp[key] = _deepCopyElement(val[key], depth + 1);\n }\n }\n\n return tmp;\n }\n\n if (Array.isArray(val)) {\n let k = val.length;\n const arr = new Array(k);\n\n while (k--) {\n arr[k] = _deepCopyElement(val[k], depth + 1);\n }\n\n return arr;\n } // we're not cloning non-array & non-plain-object objects because we\n // don't support them on excalidraw elements yet. If we do, we need to make\n // sure we start cloning them, so let's warn about it.\n\n\n if (true) {\n if (objectType !== \"[object Object]\" && objectType !== \"[object Array]\" && objectType.startsWith(\"[object \")) {\n console.warn(`_deepCloneElement: unexpected object type ${objectType}. This value will not be cloned!`);\n }\n }\n\n return val;\n};\n/**\r\n * Clones ExcalidrawElement data structure. Does not regenerate id, nonce, or\r\n * any value. The purpose is to to break object references for immutability\r\n * reasons, whenever we want to keep the original element, but ensure it's not\r\n * mutated.\r\n *\r\n * Only clones plain objects and arrays. Doesn't clone Date, RegExp, Map, Set,\r\n * Typed arrays and other non-null objects.\r\n */\n\n\nconst deepCopyElement = val => {\n return _deepCopyElement(val);\n};\n/**\r\n * utility wrapper to generate new id. In test env it reuses the old + postfix\r\n * for test assertions.\r\n */\n\nconst regenerateId = (\n/** supply null if no previous id exists */\npreviousId) => {\n var _a, _b;\n\n if ((0,_utils__WEBPACK_IMPORTED_MODULE_0__.isTestEnv)() && previousId) {\n let nextId = `${previousId}_copy`; // `window.h` may not be defined in some unit tests\n\n if ((_b = (_a = window.h) === null || _a === void 0 ? void 0 : _a.app) === null || _b === void 0 ? void 0 : _b.getSceneElementsIncludingDeleted().find(el => el.id === nextId)) {\n nextId += \"_copy\";\n }\n\n return nextId;\n }\n\n return (0,_random__WEBPACK_IMPORTED_MODULE_1__.randomId)();\n};\n/**\r\n * Duplicate an element, often used in the alt-drag operation.\r\n * Note that this method has gotten a bit complicated since the\r\n * introduction of gruoping/ungrouping elements.\r\n * @param editingGroupId The current group being edited. The new\r\n * element will inherit this group and its\r\n * parents.\r\n * @param groupIdMapForOperation A Map that maps old group IDs to\r\n * duplicated ones. If you are duplicating\r\n * multiple elements at once, share this map\r\n * amongst all of them\r\n * @param element Element to duplicate\r\n * @param overrides Any element properties to override\r\n */\n\nconst duplicateElement = (editingGroupId, groupIdMapForOperation, element, overrides) => {\n let copy = deepCopyElement(element);\n copy.id = copy.type === \"text\" ? (0,_random__WEBPACK_IMPORTED_MODULE_1__.obsidianId)() : regenerateId(copy.id); //zsviczian\n\n copy.boundElements = null;\n copy.updated = (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getUpdatedTimestamp)();\n copy.seed = (0,_random__WEBPACK_IMPORTED_MODULE_1__.randomInteger)();\n copy.groupIds = (0,_groups__WEBPACK_IMPORTED_MODULE_3__.getNewGroupIdsForDuplication)(copy.groupIds, editingGroupId, groupId => {\n if (!groupIdMapForOperation.has(groupId)) {\n groupIdMapForOperation.set(groupId, regenerateId(groupId));\n }\n\n return groupIdMapForOperation.get(groupId);\n });\n\n if (overrides) {\n copy = Object.assign(copy, overrides);\n }\n\n return copy;\n};\n/**\r\n * Clones elements, regenerating their ids (including bindings) and group ids.\r\n *\r\n * If bindings don't exist in the elements array, they are removed. Therefore,\r\n * it's advised to supply the whole elements array, or sets of elements that\r\n * are encapsulated (such as library items), if the purpose is to retain\r\n * bindings to the cloned elements intact.\r\n *\r\n * NOTE by default does not randomize or regenerate anything except the id.\r\n */\n\nconst duplicateElements = (elements, opts) => {\n const clonedElements = [];\n const origElementsMap = (0,_utils__WEBPACK_IMPORTED_MODULE_0__.arrayToMap)(elements); // used for for migrating old ids to new ids\n\n const elementNewIdsMap = new Map();\n\n const maybeGetNewId = id => {\n // if we've already migrated the element id, return the new one directly\n if (elementNewIdsMap.has(id)) {\n return elementNewIdsMap.get(id);\n } // if we haven't migrated the element id, but an old element with the same\n // id exists, generate a new id for it and return it\n\n\n if (origElementsMap.has(id)) {\n const newId = regenerateId(id);\n elementNewIdsMap.set(id, newId);\n return newId;\n } // if old element doesn't exist, return null to mark it for removal\n\n\n return null;\n };\n\n const groupNewIdsMap = new Map();\n\n for (const element of elements) {\n const clonedElement = _deepCopyElement(element);\n\n clonedElement.id = maybeGetNewId(element.id);\n\n if (opts === null || opts === void 0 ? void 0 : opts.randomizeSeed) {\n clonedElement.seed = (0,_random__WEBPACK_IMPORTED_MODULE_1__.randomInteger)();\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_2__.bumpVersion)(clonedElement);\n }\n\n if (clonedElement.groupIds) {\n clonedElement.groupIds = clonedElement.groupIds.map(groupId => {\n if (!groupNewIdsMap.has(groupId)) {\n groupNewIdsMap.set(groupId, regenerateId(groupId));\n }\n\n return groupNewIdsMap.get(groupId);\n });\n }\n\n if (\"containerId\" in clonedElement && clonedElement.containerId) {\n const newContainerId = maybeGetNewId(clonedElement.containerId);\n clonedElement.containerId = newContainerId;\n }\n\n if (\"boundElements\" in clonedElement && clonedElement.boundElements) {\n clonedElement.boundElements = clonedElement.boundElements.reduce((acc, binding) => {\n const newBindingId = maybeGetNewId(binding.id);\n\n if (newBindingId) {\n acc.push(Object.assign(Object.assign({}, binding), {\n id: newBindingId\n }));\n }\n\n return acc;\n }, []);\n }\n\n if (\"endBinding\" in clonedElement && clonedElement.endBinding) {\n const newEndBindingId = maybeGetNewId(clonedElement.endBinding.elementId);\n clonedElement.endBinding = newEndBindingId ? Object.assign(Object.assign({}, clonedElement.endBinding), {\n elementId: newEndBindingId\n }) : null;\n }\n\n if (\"startBinding\" in clonedElement && clonedElement.startBinding) {\n const newEndBindingId = maybeGetNewId(clonedElement.startBinding.elementId);\n clonedElement.startBinding = newEndBindingId ? Object.assign(Object.assign({}, clonedElement.startBinding), {\n elementId: newEndBindingId\n }) : null;\n }\n\n if (clonedElement.frameId) {\n clonedElement.frameId = maybeGetNewId(clonedElement.frameId);\n }\n\n clonedElements.push(clonedElement);\n }\n\n return clonedElements;\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./element/newElement.ts?");
2634
2634
 
2635
2635
  /***/ }),
2636
2636
 
@@ -2773,7 +2773,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
2773
2773
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
2774
2774
 
2775
2775
  "use strict";
2776
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"orderByFractionalIndex\": () => (/* binding */ orderByFractionalIndex),\n/* harmony export */ \"syncInvalidIndices\": () => (/* binding */ syncInvalidIndices),\n/* harmony export */ \"syncMovedIndices\": () => (/* binding */ syncMovedIndices),\n/* harmony export */ \"validateFractionalIndices\": () => (/* binding */ validateFractionalIndices)\n/* harmony export */ });\n/* harmony import */ var fractional_indexing__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! fractional-indexing */ \"../../node_modules/fractional-indexing/src/index.js\");\n/* harmony import */ var _element_mutateElement__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./element/mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _errors__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./errors */ \"./errors.ts\");\n\n\n\n/**\r\n * Envisioned relation between array order and fractional indices:\r\n *\r\n * 1) Array (or array-like ordered data structure) should be used as a cache of elements order, hiding the internal fractional indices implementation.\r\n * - it's undesirable to to perform reorder for each related operation, thefeore it's necessary to cache the order defined by fractional indices into an ordered data structure\r\n * - it's easy enough to define the order of the elements from the outside (boundaries), without worrying about the underlying structure of fractional indices (especially for the host apps)\r\n * - it's necessary to always keep the array support for backwards compatibility (restore) - old scenes, old libraries, supporting multiple excalidraw versions etc.\r\n * - it's necessary to always keep the fractional indices in sync with the array order\r\n * - elements with invalid indices should be detected and synced, without altering the already valid indices\r\n *\r\n * 2) Fractional indices should be used to reorder the elements, whenever the cached order is expected to be invalidated.\r\n * - as the fractional indices are encoded as part of the elements, it opens up possibilties for incremental-like APIs\r\n * - re-order based on fractional indices should be part of (multiplayer) operations such as reconcillitation & undo/redo\r\n * - technically all the z-index actions could perform also re-order based on fractional indices,but in current state it would not bring much benefits,\r\n * as it's faster & more efficient to perform re-order based on array manipulation and later synchronisation of moved indices with the array order\r\n */\n\n/**\r\n * Ensure that all elements have valid fractional indices.\r\n *\r\n * @throws `InvalidFractionalIndexError` if invalid index is detected.\r\n */\n\nconst validateFractionalIndices = indices => {\n for (const [i, index] of indices.entries()) {\n const predecessorIndex = indices[i - 1];\n const successorIndex = indices[i + 1];\n\n if (!isValidFractionalIndex(index, predecessorIndex, successorIndex)) {\n throw new _errors__WEBPACK_IMPORTED_MODULE_2__.InvalidFractionalIndexError(`Fractional indices invariant for element has been compromised - [\"${predecessorIndex}\", \"${index}\", \"${successorIndex}\"] [predecessor, current, successor]`);\n }\n }\n};\n/**\r\n * Order the elements based on the fractional indices.\r\n * - when fractional indices are identical, break the tie based on the element id\r\n * - when there is no fractional index in one of the elements, respect the order of the array\r\n */\n\nconst orderByFractionalIndex = elements => {\n return elements.sort((a, b) => {\n // in case the indices are not the defined at runtime\n if (isOrderedElement(a) && isOrderedElement(b)) {\n if (a.index < b.index) {\n return -1;\n } else if (a.index > b.index) {\n return 1;\n } // break ties based on the element id\n\n\n return a.id < b.id ? -1 : 1;\n } // defensively keep the array order\n\n\n return 1;\n });\n};\n/**\r\n * Synchronizes invalid fractional indices of moved elements with the array order by mutating passed elements.\r\n * If the synchronization fails or the result is invalid, it fallbacks to `syncInvalidIndices`.\r\n */\n\nconst syncMovedIndices = (elements, movedElements) => {\n try {\n const indicesGroups = getMovedIndicesGroups(elements, movedElements); // try generatating indices, throws on invalid movedElements\n\n const elementsUpdates = generateIndices(elements, indicesGroups); // ensure next indices are valid before mutation, throws on invalid ones\n\n validateFractionalIndices(elements.map(x => {\n var _a;\n\n return ((_a = elementsUpdates.get(x)) === null || _a === void 0 ? void 0 : _a.index) || x.index;\n })); // split mutation so we don't end up in an incosistent state\n\n for (const [element, update] of elementsUpdates) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_1__.mutateElement)(element, update, false);\n }\n } catch (e) {\n // fallback to default sync\n syncInvalidIndices(elements);\n }\n\n return elements;\n};\n/**\r\n * Synchronizes all invalid fractional indices with the array order by mutating passed elements.\r\n *\r\n * WARN: in edge cases it could modify the elements which were not moved, as it's impossible to guess the actually moved elements from the elements array itself.\r\n */\n\nconst syncInvalidIndices = elements => {\n const indicesGroups = getInvalidIndicesGroups(elements);\n const elementsUpdates = generateIndices(elements, indicesGroups);\n\n for (const [element, update] of elementsUpdates) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_1__.mutateElement)(element, update, false);\n }\n\n return elements;\n};\n/**\r\n * Get contiguous groups of indices of passed moved elements.\r\n *\r\n * NOTE: First and last elements within the groups are indices of lower and upper bounds.\r\n */\n\nconst getMovedIndicesGroups = (elements, movedElements) => {\n var _a, _b, _c, _d, _e, _f;\n\n const indicesGroups = [];\n let i = 0;\n\n while (i < elements.length) {\n if (movedElements.has(elements[i].id) && !isValidFractionalIndex((_a = elements[i]) === null || _a === void 0 ? void 0 : _a.index, (_b = elements[i - 1]) === null || _b === void 0 ? void 0 : _b.index, (_c = elements[i + 1]) === null || _c === void 0 ? void 0 : _c.index)) {\n const indicesGroup = [i - 1, i]; // push the lower bound index as the first item\n\n while (++i < elements.length) {\n if (!(movedElements.has(elements[i].id) && !isValidFractionalIndex((_d = elements[i]) === null || _d === void 0 ? void 0 : _d.index, (_e = elements[i - 1]) === null || _e === void 0 ? void 0 : _e.index, (_f = elements[i + 1]) === null || _f === void 0 ? void 0 : _f.index))) {\n break;\n }\n\n indicesGroup.push(i);\n }\n\n indicesGroup.push(i); // push the upper bound index as the last item\n\n indicesGroups.push(indicesGroup);\n } else {\n i++;\n }\n }\n\n return indicesGroups;\n};\n/**\r\n * Gets contiguous groups of all invalid indices automatically detected inside the elements array.\r\n *\r\n * WARN: First and last items within the groups do NOT have to be contiguous, those are the found lower and upper bounds!\r\n */\n\n\nconst getInvalidIndicesGroups = elements => {\n const indicesGroups = []; // once we find lowerBound / upperBound, it cannot be lower than that, so we cache it for better perf.\n\n let lowerBound = undefined;\n let upperBound = undefined;\n let lowerBoundIndex = -1;\n let upperBoundIndex = 0;\n /** @returns maybe valid lowerBound */\n\n const getLowerBound = index => {\n var _a;\n\n const lowerBound = elements[lowerBoundIndex] ? elements[lowerBoundIndex].index : undefined; // we are already iterating left to right, therefore there is no need for additional looping\n\n const candidate = (_a = elements[index - 1]) === null || _a === void 0 ? void 0 : _a.index;\n\n if (!lowerBound && candidate || // first lowerBound\n lowerBound && candidate && candidate > lowerBound // next lowerBound\n ) {\n // WARN: candidate's index could be higher or same as the current element's index\n return [candidate, index - 1];\n } // cache hit! take the last lower bound\n\n\n return [lowerBound, lowerBoundIndex];\n };\n /** @returns always valid upperBound */\n\n\n const getUpperBound = index => {\n var _a;\n\n const upperBound = elements[upperBoundIndex] ? elements[upperBoundIndex].index : undefined; // cache hit! don't let it find the upper bound again\n\n if (upperBound && index < upperBoundIndex) {\n return [upperBound, upperBoundIndex];\n } // set the current upperBoundIndex as the starting point\n\n\n let i = upperBoundIndex;\n\n while (++i < elements.length) {\n const candidate = (_a = elements[i]) === null || _a === void 0 ? void 0 : _a.index;\n\n if (!upperBound && candidate || // first upperBound\n upperBound && candidate && candidate > upperBound // next upperBound\n ) {\n return [candidate, i];\n }\n } // we reached the end, sky is the limit\n\n\n return [undefined, i];\n };\n\n let i = 0;\n\n while (i < elements.length) {\n const current = elements[i].index;\n [lowerBound, lowerBoundIndex] = getLowerBound(i);\n [upperBound, upperBoundIndex] = getUpperBound(i);\n\n if (!isValidFractionalIndex(current, lowerBound, upperBound)) {\n // push the lower bound index as the first item\n const indicesGroup = [lowerBoundIndex, i];\n\n while (++i < elements.length) {\n const current = elements[i].index;\n const [nextLowerBound, nextLowerBoundIndex] = getLowerBound(i);\n const [nextUpperBound, nextUpperBoundIndex] = getUpperBound(i);\n\n if (isValidFractionalIndex(current, nextLowerBound, nextUpperBound)) {\n break;\n } // assign bounds only for the moved elements\n\n\n [lowerBound, lowerBoundIndex] = [nextLowerBound, nextLowerBoundIndex];\n [upperBound, upperBoundIndex] = [nextUpperBound, nextUpperBoundIndex];\n indicesGroup.push(i);\n } // push the upper bound index as the last item\n\n\n indicesGroup.push(upperBoundIndex);\n indicesGroups.push(indicesGroup);\n } else {\n i++;\n }\n }\n\n return indicesGroups;\n};\n\nconst isValidFractionalIndex = (index, predecessor, successor) => {\n if (!index) {\n return false;\n }\n\n if (predecessor && successor) {\n return predecessor < index && index < successor;\n }\n\n if (!predecessor && successor) {\n // first element\n return index < successor;\n }\n\n if (predecessor && !successor) {\n // last element\n return predecessor < index;\n } // only element in the array\n\n\n return !!index;\n};\n\nconst generateIndices = (elements, indicesGroups) => {\n var _a, _b;\n\n const elementsUpdates = new Map();\n\n for (const indices of indicesGroups) {\n const lowerBoundIndex = indices.shift();\n const upperBoundIndex = indices.pop();\n const fractionalIndices = (0,fractional_indexing__WEBPACK_IMPORTED_MODULE_0__.generateNKeysBetween)((_a = elements[lowerBoundIndex]) === null || _a === void 0 ? void 0 : _a.index, (_b = elements[upperBoundIndex]) === null || _b === void 0 ? void 0 : _b.index, indices.length);\n\n for (let i = 0; i < indices.length; i++) {\n const element = elements[indices[i]];\n elementsUpdates.set(element, {\n index: fractionalIndices[i]\n });\n }\n }\n\n return elementsUpdates;\n};\n\nconst isOrderedElement = element => {\n // for now it's sufficient whether the index is there\n // meaning, the element was already ordered in the past\n // meaning, it is not a newly inserted element, not an unrestored element, etc.\n // it does not have to mean that the index itself is valid\n if (element.index) {\n return true;\n }\n\n return false;\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./fractionalIndex.ts?");
2776
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"orderByFractionalIndex\": () => (/* binding */ orderByFractionalIndex),\n/* harmony export */ \"syncInvalidIndices\": () => (/* binding */ syncInvalidIndices),\n/* harmony export */ \"syncMovedIndices\": () => (/* binding */ syncMovedIndices),\n/* harmony export */ \"validateFractionalIndices\": () => (/* binding */ validateFractionalIndices)\n/* harmony export */ });\n/* harmony import */ var fractional_indexing__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! fractional-indexing */ \"../../node_modules/fractional-indexing/src/index.js\");\n/* harmony import */ var _element_mutateElement__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./element/mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _errors__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./errors */ \"./errors.ts\");\n\n\n\n/**\r\n * Envisioned relation between array order and fractional indices:\r\n *\r\n * 1) Array (or array-like ordered data structure) should be used as a cache of elements order, hiding the internal fractional indices implementation.\r\n * - it's undesirable to to perform reorder for each related operation, thefeore it's necessary to cache the order defined by fractional indices into an ordered data structure\r\n * - it's easy enough to define the order of the elements from the outside (boundaries), without worrying about the underlying structure of fractional indices (especially for the host apps)\r\n * - it's necessary to always keep the array support for backwards compatibility (restore) - old scenes, old libraries, supporting multiple excalidraw versions etc.\r\n * - it's necessary to always keep the fractional indices in sync with the array order\r\n * - elements with invalid indices should be detected and synced, without altering the already valid indices\r\n *\r\n * 2) Fractional indices should be used to reorder the elements, whenever the cached order is expected to be invalidated.\r\n * - as the fractional indices are encoded as part of the elements, it opens up possibilties for incremental-like APIs\r\n * - re-order based on fractional indices should be part of (multiplayer) operations such as reconcillitation & undo/redo\r\n * - technically all the z-index actions could perform also re-order based on fractional indices,but in current state it would not bring much benefits,\r\n * as it's faster & more efficient to perform re-order based on array manipulation and later synchronisation of moved indices with the array order\r\n */\n\n/**\r\n * Ensure that all elements have valid fractional indices.\r\n *\r\n * @throws `InvalidFractionalIndexError` if invalid index is detected.\r\n */\n\nconst validateFractionalIndices = indices => {\n for (const [i, index] of indices.entries()) {\n const predecessorIndex = indices[i - 1];\n const successorIndex = indices[i + 1];\n\n if (!isValidFractionalIndex(index, predecessorIndex, successorIndex)) {\n throw new _errors__WEBPACK_IMPORTED_MODULE_2__.InvalidFractionalIndexError(`Fractional indices invariant for element has been compromised - [\"${predecessorIndex}\", \"${index}\", \"${successorIndex}\"] [predecessor, current, successor]`);\n }\n }\n};\n/**\r\n * Order the elements based on the fractional indices.\r\n * - when fractional indices are identical, break the tie based on the element id\r\n * - when there is no fractional index in one of the elements, respect the order of the array\r\n */\n\nconst orderByFractionalIndex = elements => {\n return elements.sort((a, b) => {\n // in case the indices are not the defined at runtime\n if (isOrderedElement(a) && isOrderedElement(b)) {\n if (a.index < b.index) {\n return -1;\n } else if (a.index > b.index) {\n return 1;\n } // break ties based on the element id\n\n\n return a.id < b.id ? -1 : 1;\n } // defensively keep the array order\n\n\n return 1;\n });\n};\n/**\r\n * Synchronizes invalid fractional indices of moved elements with the array order by mutating passed elements.\r\n * If the synchronization fails or the result is invalid, it fallbacks to `syncInvalidIndices`.\r\n */\n\nconst syncMovedIndices = (elements, movedElements) => {\n try {\n const indicesGroups = getMovedIndicesGroups(elements, movedElements); // try generatating indices, throws on invalid movedElements\n\n const elementsUpdates = generateIndices(elements, indicesGroups); // ensure next indices are valid before mutation, throws on invalid ones\n\n validateFractionalIndices(elements.map(x => {\n var _a;\n\n return ((_a = elementsUpdates.get(x)) === null || _a === void 0 ? void 0 : _a.index) || x.index;\n })); // split mutation so we don't end up in an incosistent state\n\n for (const [element, update] of elementsUpdates) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_1__.mutateElement)(element, update, false);\n }\n } catch (e) {\n // fallback to default sync\n syncInvalidIndices(elements);\n }\n\n return elements;\n};\n/**\r\n * Synchronizes all invalid fractional indices with the array order by mutating passed elements.\r\n *\r\n * WARN: in edge cases it could modify the elements which were not moved, as it's impossible to guess the actually moved elements from the elements array itself.\r\n */\n\nconst syncInvalidIndices = elements => {\n const indicesGroups = getInvalidIndicesGroups(elements);\n const elementsUpdates = generateIndices(elements, indicesGroups);\n\n for (const [element, update] of elementsUpdates) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_1__.mutateElement)(element, update, false);\n }\n\n return elements;\n};\n/**\r\n * Get contiguous groups of indices of passed moved elements.\r\n *\r\n * NOTE: First and last elements within the groups are indices of lower and upper bounds.\r\n */\n\nconst getMovedIndicesGroups = (elements, movedElements) => {\n const indicesGroups = [];\n let i = 0;\n\n while (i < elements.length) {\n if (movedElements.has(elements[i].id)) {\n const indicesGroup = [i - 1, i]; // push the lower bound index as the first item\n\n while (++i < elements.length) {\n if (!movedElements.has(elements[i].id)) {\n break;\n }\n\n indicesGroup.push(i);\n }\n\n indicesGroup.push(i); // push the upper bound index as the last item\n\n indicesGroups.push(indicesGroup);\n } else {\n i++;\n }\n }\n\n return indicesGroups;\n};\n/**\r\n * Gets contiguous groups of all invalid indices automatically detected inside the elements array.\r\n *\r\n * WARN: First and last items within the groups do NOT have to be contiguous, those are the found lower and upper bounds!\r\n */\n\n\nconst getInvalidIndicesGroups = elements => {\n const indicesGroups = []; // once we find lowerBound / upperBound, it cannot be lower than that, so we cache it for better perf.\n\n let lowerBound = undefined;\n let upperBound = undefined;\n let lowerBoundIndex = -1;\n let upperBoundIndex = 0;\n /** @returns maybe valid lowerBound */\n\n const getLowerBound = index => {\n var _a;\n\n const lowerBound = elements[lowerBoundIndex] ? elements[lowerBoundIndex].index : undefined; // we are already iterating left to right, therefore there is no need for additional looping\n\n const candidate = (_a = elements[index - 1]) === null || _a === void 0 ? void 0 : _a.index;\n\n if (!lowerBound && candidate || // first lowerBound\n lowerBound && candidate && candidate > lowerBound // next lowerBound\n ) {\n // WARN: candidate's index could be higher or same as the current element's index\n return [candidate, index - 1];\n } // cache hit! take the last lower bound\n\n\n return [lowerBound, lowerBoundIndex];\n };\n /** @returns always valid upperBound */\n\n\n const getUpperBound = index => {\n var _a;\n\n const upperBound = elements[upperBoundIndex] ? elements[upperBoundIndex].index : undefined; // cache hit! don't let it find the upper bound again\n\n if (upperBound && index < upperBoundIndex) {\n return [upperBound, upperBoundIndex];\n } // set the current upperBoundIndex as the starting point\n\n\n let i = upperBoundIndex;\n\n while (++i < elements.length) {\n const candidate = (_a = elements[i]) === null || _a === void 0 ? void 0 : _a.index;\n\n if (!upperBound && candidate || // first upperBound\n upperBound && candidate && candidate > upperBound // next upperBound\n ) {\n return [candidate, i];\n }\n } // we reached the end, sky is the limit\n\n\n return [undefined, i];\n };\n\n let i = 0;\n\n while (i < elements.length) {\n const current = elements[i].index;\n [lowerBound, lowerBoundIndex] = getLowerBound(i);\n [upperBound, upperBoundIndex] = getUpperBound(i);\n\n if (!isValidFractionalIndex(current, lowerBound, upperBound)) {\n // push the lower bound index as the first item\n const indicesGroup = [lowerBoundIndex, i];\n\n while (++i < elements.length) {\n const current = elements[i].index;\n const [nextLowerBound, nextLowerBoundIndex] = getLowerBound(i);\n const [nextUpperBound, nextUpperBoundIndex] = getUpperBound(i);\n\n if (isValidFractionalIndex(current, nextLowerBound, nextUpperBound)) {\n break;\n } // assign bounds only for the moved elements\n\n\n [lowerBound, lowerBoundIndex] = [nextLowerBound, nextLowerBoundIndex];\n [upperBound, upperBoundIndex] = [nextUpperBound, nextUpperBoundIndex];\n indicesGroup.push(i);\n } // push the upper bound index as the last item\n\n\n indicesGroup.push(upperBoundIndex);\n indicesGroups.push(indicesGroup);\n } else {\n i++;\n }\n }\n\n return indicesGroups;\n};\n\nconst isValidFractionalIndex = (index, predecessor, successor) => {\n if (!index) {\n return false;\n }\n\n if (predecessor && successor) {\n return predecessor < index && index < successor;\n }\n\n if (!predecessor && successor) {\n // first element\n return index < successor;\n }\n\n if (predecessor && !successor) {\n // last element\n return predecessor < index;\n } // only element in the array\n\n\n return !!index;\n};\n\nconst generateIndices = (elements, indicesGroups) => {\n var _a, _b;\n\n const elementsUpdates = new Map();\n\n for (const indices of indicesGroups) {\n const lowerBoundIndex = indices.shift();\n const upperBoundIndex = indices.pop();\n const fractionalIndices = (0,fractional_indexing__WEBPACK_IMPORTED_MODULE_0__.generateNKeysBetween)((_a = elements[lowerBoundIndex]) === null || _a === void 0 ? void 0 : _a.index, (_b = elements[upperBoundIndex]) === null || _b === void 0 ? void 0 : _b.index, indices.length);\n\n for (let i = 0; i < indices.length; i++) {\n const element = elements[indices[i]];\n elementsUpdates.set(element, {\n index: fractionalIndices[i]\n });\n }\n }\n\n return elementsUpdates;\n};\n\nconst isOrderedElement = element => {\n // for now it's sufficient whether the index is there\n // meaning, the element was already ordered in the past\n // meaning, it is not a newly inserted element, not an unrestored element, etc.\n // it does not have to mean that the index itself is valid\n if (element.index) {\n return true;\n }\n\n return false;\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./fractionalIndex.ts?");
2777
2777
 
2778
2778
  /***/ }),
2779
2779
 
@@ -3081,7 +3081,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
3081
3081
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
3082
3082
 
3083
3083
  "use strict";
3084
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./constants */ \"./constants.ts\");\n\n\nif (\"development\" !== _constants__WEBPACK_IMPORTED_MODULE_0__.ENV.TEST) {\n /* eslint-disable */\n\n /* global __webpack_public_path__:writable */\n __webpack_require__.p = window.EXCALIDRAW_ASSET_PATH || `https://unpkg.com/${\"@zsviczian/excalidraw\"}@${\"0.17.1-obsidian-22\"}/dist/`;\n}\n\n//# sourceURL=webpack://ExcalidrawLib/./publicPath.js?");
3084
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./constants */ \"./constants.ts\");\n\n\nif (\"development\" !== _constants__WEBPACK_IMPORTED_MODULE_0__.ENV.TEST) {\n /* eslint-disable */\n\n /* global __webpack_public_path__:writable */\n __webpack_require__.p = window.EXCALIDRAW_ASSET_PATH || `https://unpkg.com/${\"@zsviczian/excalidraw\"}@${\"0.17.1-obsidian-24\"}/dist/`;\n}\n\n//# sourceURL=webpack://ExcalidrawLib/./publicPath.js?");
3085
3085
 
3086
3086
  /***/ }),
3087
3087
 
@@ -3202,7 +3202,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
3202
3202
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
3203
3203
 
3204
3204
  "use strict";
3205
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"renderSceneToSvg\": () => (/* binding */ renderSceneToSvg)\n/* harmony export */ });\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _data_url__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../data/url */ \"./data/url.ts\");\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _element_embeddable__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../element/embeddable */ \"./element/embeddable.ts\");\n/* harmony import */ var _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../element/linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _element_textElement__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../element/textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _frame__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../frame */ \"./frame.ts\");\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../math */ \"./math.ts\");\n/* harmony import */ var _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../scene/ShapeCache */ \"./scene/ShapeCache.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _renderElement__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./renderElement */ \"./renderer/renderElement.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst roughSVGDrawWithPrecision = (rsvg, drawable, precision) => {\n if (typeof precision === \"undefined\") {\n return rsvg.draw(drawable);\n }\n\n const pshape = {\n sets: drawable.sets,\n shape: drawable.shape,\n options: Object.assign(Object.assign({}, drawable.options), {\n fixedDecimalPlaceDigits: precision\n })\n };\n return rsvg.draw(pshape);\n};\n\nconst maybeWrapNodesInFrameClipPath = (element, root, nodes, frameRendering, elementsMap) => {\n if (!frameRendering.enabled || !frameRendering.clip) {\n return null;\n }\n\n const frame = (0,_frame__WEBPACK_IMPORTED_MODULE_7__.getContainingFrame)(element, elementsMap);\n\n if (frame) {\n const g = root.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"g\");\n g.setAttributeNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"clip-path\", `url(#${frame.id})`);\n nodes.forEach(node => g.appendChild(node));\n return g;\n }\n\n return null;\n};\n\nconst renderElementToSvg = (element, elementsMap, rsvg, svgRoot, files, offsetX, offsetY, renderConfig) => {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;\n\n const offset = {\n x: offsetX,\n y: offsetY\n };\n const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_2__.getElementAbsoluteCoords)(element, elementsMap);\n let cx = (x2 - x1) / 2 - (element.x - x1);\n let cy = (y2 - y1) / 2 - (element.y - y1);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isTextElement)(element)) {\n const container = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_5__.getContainerElement)(element, elementsMap);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isArrowElement)(container)) {\n const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_2__.getElementAbsoluteCoords)(container, elementsMap);\n const boundTextCoords = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_4__.LinearElementEditor.getBoundTextElementPosition(container, element, elementsMap);\n cx = (x2 - x1) / 2 - (boundTextCoords.x - x1);\n cy = (y2 - y1) / 2 - (boundTextCoords.y - y1);\n offsetX = offsetX + boundTextCoords.x - element.x;\n offsetY = offsetY + boundTextCoords.y - element.y;\n }\n }\n\n const degree = 180 * element.angle / Math.PI; // element to append node to, most of the time svgRoot\n\n let root = svgRoot; // if the element has a link, create an anchor tag and make that the new root\n\n if (element.link) {\n const anchorTag = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"a\");\n anchorTag.setAttribute(\"href\", (0,_data_url__WEBPACK_IMPORTED_MODULE_1__.normalizeLink)(element.link));\n root.appendChild(anchorTag);\n root = anchorTag;\n }\n\n const addToRoot = (node, element) => {\n if ((0,_utils__WEBPACK_IMPORTED_MODULE_10__.isTestEnv)()) {\n node.setAttribute(\"data-id\", element.id);\n }\n\n root.appendChild(node);\n };\n\n const opacity = ((_b = (_a = (0,_frame__WEBPACK_IMPORTED_MODULE_7__.getContainingFrame)(element, elementsMap)) === null || _a === void 0 ? void 0 : _a.opacity) !== null && _b !== void 0 ? _b : 100) * element.opacity / 10000;\n\n switch (element.type) {\n case \"selection\":\n {\n // Since this is used only during editing experience, which is canvas based,\n // this should not happen\n throw new Error(\"Selection rendering is not supported for SVG\");\n }\n\n case \"rectangle\":\n case \"diamond\":\n case \"ellipse\":\n {\n const shape = _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_9__.ShapeCache.generateElementShape(element, null);\n const node = roughSVGDrawWithPrecision(rsvg, shape, _constants__WEBPACK_IMPORTED_MODULE_0__.MAX_DECIMALS_FOR_SVG_EXPORT);\n\n if (opacity !== 1) {\n node.setAttribute(\"stroke-opacity\", `${opacity}`);\n node.setAttribute(\"fill-opacity\", `${opacity}`);\n }\n\n node.setAttribute(\"stroke-linecap\", \"round\");\n node.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n const g = maybeWrapNodesInFrameClipPath(element, root, [node], renderConfig.frameRendering, elementsMap);\n addToRoot(g || node, element);\n break;\n }\n\n case \"iframe\":\n case \"embeddable\":\n {\n // render placeholder rectangle\n const shape = _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_9__.ShapeCache.generateElementShape(element, renderConfig);\n const node = roughSVGDrawWithPrecision(rsvg, shape, _constants__WEBPACK_IMPORTED_MODULE_0__.MAX_DECIMALS_FOR_SVG_EXPORT);\n const opacity = element.opacity / 100;\n\n if (opacity !== 1) {\n node.setAttribute(\"stroke-opacity\", `${opacity}`);\n node.setAttribute(\"fill-opacity\", `${opacity}`);\n }\n\n node.setAttribute(\"stroke-linecap\", \"round\");\n node.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n addToRoot(node, element);\n const label = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_3__.createPlaceholderEmbeddableLabel)(element);\n renderElementToSvg(label, elementsMap, rsvg, root, files, label.x + offset.x - element.x, label.y + offset.y - element.y, renderConfig);\n const scaleX = ((_c = element.scale) === null || _c === void 0 ? void 0 : _c[0]) || 1; //zsviczian\n\n const scaleY = ((_d = element.scale) === null || _d === void 0 ? void 0 : _d[1]) || 1; //zsviczian\n // render embeddable element + iframe\n\n const embeddableNode = roughSVGDrawWithPrecision(rsvg, shape, _constants__WEBPACK_IMPORTED_MODULE_0__.MAX_DECIMALS_FOR_SVG_EXPORT);\n embeddableNode.setAttribute(\"stroke-linecap\", \"round\");\n embeddableNode.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy}) scale(${scaleX}, ${scaleY})`);\n\n while (embeddableNode.firstChild) {\n embeddableNode.removeChild(embeddableNode.firstChild);\n }\n\n const radius = (0,_math__WEBPACK_IMPORTED_MODULE_8__.getCornerRadius)(Math.min(element.width, element.height), element);\n const embedLink = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_3__.getEmbedLink)((0,_data_url__WEBPACK_IMPORTED_MODULE_1__.toValidURL)(element.link || \"\")); // if rendering embeddables explicitly disabled or\n // embedding documents via srcdoc (which doesn't seem to work for SVGs)\n // replace with a link instead\n\n if (renderConfig.renderEmbeddables === false || (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) === \"document\") {\n const anchorTag = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"a\");\n anchorTag.setAttribute(\"href\", (0,_data_url__WEBPACK_IMPORTED_MODULE_1__.normalizeLink)(element.link || \"\"));\n anchorTag.setAttribute(\"target\", \"_blank\");\n anchorTag.setAttribute(\"rel\", \"noopener noreferrer\");\n anchorTag.style.borderRadius = `${radius}px`;\n embeddableNode.appendChild(anchorTag);\n } else {\n const foreignObject = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"foreignObject\");\n foreignObject.style.width = `${element.width / scaleX}px`; //zsviczian\n\n foreignObject.style.height = `${element.height / scaleY}px`; //zsviczian\n\n foreignObject.style.border = \"none\";\n const div = foreignObject.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"div\");\n div.setAttribute(\"xmlns\", \"http://www.w3.org/1999/xhtml\");\n div.style.width = \"100%\";\n div.style.height = \"100%\";\n const iframe = div.ownerDocument.createElement(\"iframe\");\n iframe.src = (_e = embedLink === null || embedLink === void 0 ? void 0 : embedLink.link) !== null && _e !== void 0 ? _e : \"\";\n iframe.style.width = \"100%\";\n iframe.style.height = \"100%\";\n iframe.style.border = \"none\";\n iframe.style.borderRadius = `${radius}px`;\n iframe.style.top = \"0\";\n iframe.style.left = \"0\";\n iframe.allowFullscreen = true;\n div.appendChild(iframe);\n foreignObject.appendChild(div);\n embeddableNode.appendChild(foreignObject);\n }\n\n addToRoot(embeddableNode, element);\n break;\n }\n\n case \"line\":\n case \"arrow\":\n {\n const boundText = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_5__.getBoundTextElement)(element, elementsMap);\n const maskPath = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"mask\");\n\n if (boundText) {\n maskPath.setAttribute(\"id\", `mask-${element.id}`);\n const maskRectVisible = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"rect\");\n offsetX = offsetX || 0;\n offsetY = offsetY || 0;\n maskRectVisible.setAttribute(\"x\", \"0\");\n maskRectVisible.setAttribute(\"y\", \"0\");\n maskRectVisible.setAttribute(\"fill\", \"#fff\");\n maskRectVisible.setAttribute(\"width\", `${element.width + 100 + offsetX}`);\n maskRectVisible.setAttribute(\"height\", `${element.height + 100 + offsetY}`);\n maskPath.appendChild(maskRectVisible);\n const maskRectInvisible = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"rect\");\n const boundTextCoords = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_4__.LinearElementEditor.getBoundTextElementPosition(element, boundText, elementsMap);\n const maskX = offsetX + boundTextCoords.x - element.x;\n const maskY = offsetY + boundTextCoords.y - element.y;\n maskRectInvisible.setAttribute(\"x\", maskX.toString());\n maskRectInvisible.setAttribute(\"y\", maskY.toString());\n maskRectInvisible.setAttribute(\"fill\", \"#000\");\n maskRectInvisible.setAttribute(\"width\", `${boundText.width}`);\n maskRectInvisible.setAttribute(\"height\", `${boundText.height}`);\n maskRectInvisible.setAttribute(\"opacity\", \"1\");\n maskPath.appendChild(maskRectInvisible);\n }\n\n const group = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"g\");\n\n if (boundText) {\n group.setAttribute(\"mask\", `url(#mask-${element.id})`);\n }\n\n group.setAttribute(\"stroke-linecap\", \"round\");\n const shapes = _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_9__.ShapeCache.generateElementShape(element, renderConfig);\n shapes.forEach(shape => {\n const node = roughSVGDrawWithPrecision(rsvg, shape, _constants__WEBPACK_IMPORTED_MODULE_0__.MAX_DECIMALS_FOR_SVG_EXPORT);\n\n if (opacity !== 1) {\n node.setAttribute(\"stroke-opacity\", `${opacity}`);\n node.setAttribute(\"fill-opacity\", `${opacity}`);\n }\n\n node.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n\n if (element.type === \"line\" && (0,_math__WEBPACK_IMPORTED_MODULE_8__.isPathALoop)(element.points) && element.backgroundColor !== \"transparent\") {\n node.setAttribute(\"fill-rule\", \"evenodd\");\n }\n\n group.appendChild(node);\n });\n const g = maybeWrapNodesInFrameClipPath(element, root, [group, maskPath], renderConfig.frameRendering, elementsMap);\n\n if (g) {\n addToRoot(g, element);\n root.appendChild(g);\n } else {\n addToRoot(group, element);\n root.append(maskPath);\n }\n\n break;\n }\n\n case \"freedraw\":\n {\n const backgroundFillShape = _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_9__.ShapeCache.generateElementShape(element, renderConfig);\n const node = backgroundFillShape ? roughSVGDrawWithPrecision(rsvg, backgroundFillShape, _constants__WEBPACK_IMPORTED_MODULE_0__.MAX_DECIMALS_FOR_SVG_EXPORT) : svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"g\");\n\n if (opacity !== 1) {\n node.setAttribute(\"stroke-opacity\", `${opacity}`);\n node.setAttribute(\"fill-opacity\", `${opacity}`);\n }\n\n node.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n node.setAttribute(\"stroke\", \"none\");\n const path = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"path\"); //zsviczian\n\n if ((_g = (_f = element.customData) === null || _f === void 0 ? void 0 : _f.strokeOptions) === null || _g === void 0 ? void 0 : _g.hasOutline) {\n node.setAttribute(\"stroke-width\", `${element.strokeWidth * ((_h = element.customData.strokeOptions.outlineWidth) !== null && _h !== void 0 ? _h : 1)}`);\n const outline = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"path\");\n outline.setAttribute(\"fill\", \"none\");\n outline.setAttribute(\"stroke\", element.strokeColor);\n outline.setAttribute(\"d\", (0,_renderElement__WEBPACK_IMPORTED_MODULE_11__.getFreeDrawSvgPath)(element));\n node.appendChild(outline);\n path.setAttribute(\"fill\", element.backgroundColor);\n } else {\n path.setAttribute(\"fill\", element.strokeColor);\n }\n\n path.setAttribute(\"d\", (0,_renderElement__WEBPACK_IMPORTED_MODULE_11__.getFreeDrawSvgPath)(element));\n node.appendChild(path);\n const g = maybeWrapNodesInFrameClipPath(element, root, [node], renderConfig.frameRendering, elementsMap);\n addToRoot(g || node, element);\n break;\n }\n\n case \"image\":\n {\n const width = Math.round(element.width);\n const height = Math.round(element.height);\n const fileData = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isInitializedImageElement)(element) && files[element.fileId];\n\n if (fileData) {\n const symbolId = `image-${fileData.id}`;\n let symbol = svgRoot.querySelector(`#${symbolId}`);\n\n if (!symbol) {\n symbol = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"symbol\");\n symbol.id = symbolId;\n const image = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"image\");\n image.setAttribute(\"width\", \"100%\");\n image.setAttribute(\"height\", \"100%\");\n image.setAttribute(\"href\", fileData.dataURL);\n symbol.appendChild(image);\n root.prepend(symbol);\n }\n\n const use = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"use\");\n use.setAttribute(\"href\", `#${symbolId}`); // in dark theme, revert the image color filter\n\n if (renderConfig.exportWithDarkMode && fileData.mimeType !== _constants__WEBPACK_IMPORTED_MODULE_0__.MIME_TYPES.svg) {\n use.setAttribute(\"filter\", _renderElement__WEBPACK_IMPORTED_MODULE_11__.IMAGE_INVERT_FILTER);\n }\n\n use.setAttribute(\"width\", `${width}`);\n use.setAttribute(\"height\", `${height}`);\n use.setAttribute(\"opacity\", `${opacity}`); // We first apply `scale` transforms (horizontal/vertical mirroring)\n // on the <use> element, then apply translation and rotation\n // on the <g> element which wraps the <use>.\n // Doing this separately is a quick hack to to work around compositing\n // the transformations correctly (the transform-origin was not being\n // applied correctly).\n\n if (element.scale[0] !== 1 || element.scale[1] !== 1) {\n const translateX = element.scale[0] !== 1 ? -width : 0;\n const translateY = element.scale[1] !== 1 ? -height : 0;\n use.setAttribute(\"transform\", `scale(${element.scale[0]}, ${element.scale[1]}) translate(${translateX} ${translateY})`);\n }\n\n const g = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"g\");\n g.appendChild(use);\n g.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n\n if (element.roundness) {\n const clipPath = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"clipPath\");\n clipPath.id = `image-clipPath-${element.id}`;\n const clipRect = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"rect\");\n const radius = (0,_math__WEBPACK_IMPORTED_MODULE_8__.getCornerRadius)(Math.min(element.width, element.height), element);\n clipRect.setAttribute(\"width\", `${element.width}`);\n clipRect.setAttribute(\"height\", `${element.height}`);\n clipRect.setAttribute(\"rx\", `${radius}`);\n clipRect.setAttribute(\"ry\", `${radius}`);\n clipPath.appendChild(clipRect);\n addToRoot(clipPath, element);\n g.setAttributeNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"clip-path\", `url(#${clipPath.id})`);\n }\n\n const clipG = maybeWrapNodesInFrameClipPath(element, root, [g], renderConfig.frameRendering, elementsMap);\n addToRoot(clipG || g, element);\n }\n\n break;\n }\n // frames are not rendered and only acts as a container\n\n case \"frame\":\n case \"magicframe\":\n {\n if (renderConfig.frameRendering.enabled && renderConfig.frameRendering.outline) {\n const rect = document.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"rect\");\n rect.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n rect.setAttribute(\"width\", `${element.width}px`);\n rect.setAttribute(\"height\", `${element.height}px`); // Rounded corners\n\n rect.setAttribute(\"rx\", _constants__WEBPACK_IMPORTED_MODULE_0__.FRAME_STYLE.radius.toString());\n rect.setAttribute(\"ry\", _constants__WEBPACK_IMPORTED_MODULE_0__.FRAME_STYLE.radius.toString());\n rect.setAttribute(\"fill\", \"none\"); //rect.setAttribute(\"stroke\", FRAME_STYLE.strokeColor); //zsviczian\n //rect.setAttribute(\"stroke-width\", FRAME_STYLE.strokeWidth.toString()); //zsviczian\n\n rect.setAttribute(\"stroke\", (_o = (_l = (_k = (_j = element.customData) === null || _j === void 0 ? void 0 : _j.frameColor) === null || _k === void 0 ? void 0 : _k.stroke) !== null && _l !== void 0 ? _l : (_m = renderConfig.frameColor) === null || _m === void 0 ? void 0 : _m.stroke) !== null && _o !== void 0 ? _o : _constants__WEBPACK_IMPORTED_MODULE_0__.FRAME_STYLE.strokeColor); //zsviczian\n\n rect.setAttribute(\"stroke-width\", (_t = (_r = (_q = (_p = element.customData) === null || _p === void 0 ? void 0 : _p.frameColor) === null || _q === void 0 ? void 0 : _q.fill) !== null && _r !== void 0 ? _r : (_s = renderConfig.frameColor) === null || _s === void 0 ? void 0 : _s.fill) !== null && _t !== void 0 ? _t : _constants__WEBPACK_IMPORTED_MODULE_0__.FRAME_STYLE.strokeWidth.toString()); //zsviczian\n\n addToRoot(rect, element);\n }\n\n break;\n }\n\n default:\n {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isTextElement)(element)) {\n const node = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"g\");\n\n if (opacity !== 1) {\n node.setAttribute(\"stroke-opacity\", `${opacity}`);\n node.setAttribute(\"fill-opacity\", `${opacity}`);\n }\n\n node.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n const lines = element.text.replace(/\\r\\n?/g, \"\\n\").split(\"\\n\");\n const lineHeightPx = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_5__.getLineHeightInPx)(element.fontSize, element.lineHeight);\n const horizontalOffset = element.textAlign === \"center\" ? element.width / 2 : element.textAlign === \"right\" ? element.width : 0;\n const verticalOffset = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_5__.getVerticalOffset)(element.fontFamily, element.fontSize, lineHeightPx);\n const direction = (0,_utils__WEBPACK_IMPORTED_MODULE_10__.isRTL)(element.text) ? \"rtl\" : \"ltr\";\n const textAnchor = element.textAlign === \"center\" ? \"middle\" : element.textAlign === \"right\" || direction === \"rtl\" ? \"end\" : \"start\";\n\n for (let i = 0; i < lines.length; i++) {\n const text = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"text\");\n text.textContent = lines[i];\n text.setAttribute(\"x\", `${horizontalOffset}`);\n text.setAttribute(\"y\", `${i * lineHeightPx + verticalOffset}`);\n text.setAttribute(\"font-family\", (0,_utils__WEBPACK_IMPORTED_MODULE_10__.getFontFamilyString)(element));\n text.setAttribute(\"font-size\", `${element.fontSize}px`);\n text.setAttribute(\"fill\", element.strokeColor);\n text.setAttribute(\"text-anchor\", textAnchor);\n text.setAttribute(\"style\", \"white-space: pre;\");\n text.setAttribute(\"direction\", direction);\n text.setAttribute(\"dominant-baseline\", \"alphabetic\");\n node.appendChild(text);\n }\n\n const g = maybeWrapNodesInFrameClipPath(element, root, [node], renderConfig.frameRendering, elementsMap);\n addToRoot(g || node, element);\n } else {\n // @ts-ignore\n throw new Error(`Unimplemented type ${element.type}`);\n }\n }\n }\n};\n\nconst renderSceneToSvg = (elements, elementsMap, rsvg, svgRoot, files, renderConfig) => {\n if (!svgRoot) {\n return;\n } // render elements\n\n\n elements.filter(el => !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isIframeLikeElement)(el)).forEach(element => {\n if (!element.isDeleted) {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isTextElement)(element) && element.containerId && elementsMap.has(element.containerId)) {\n // will be rendered with the container\n return;\n }\n\n try {\n renderElementToSvg(element, elementsMap, rsvg, svgRoot, files, element.x + renderConfig.offsetX, element.y + renderConfig.offsetY, renderConfig);\n const boundTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_5__.getBoundTextElement)(element, elementsMap);\n\n if (boundTextElement) {\n renderElementToSvg(boundTextElement, elementsMap, rsvg, svgRoot, files, boundTextElement.x + renderConfig.offsetX, boundTextElement.y + renderConfig.offsetY, renderConfig);\n }\n } catch (error) {\n console.error(error);\n }\n }\n }); // render embeddables on top\n\n elements.filter(el => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isIframeLikeElement)(el)).forEach(element => {\n if (!element.isDeleted) {\n try {\n renderElementToSvg(element, elementsMap, rsvg, svgRoot, files, element.x + renderConfig.offsetX, element.y + renderConfig.offsetY, renderConfig);\n } catch (error) {\n console.error(error);\n }\n }\n });\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./renderer/staticSvgScene.ts?");
3205
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"renderSceneToSvg\": () => (/* binding */ renderSceneToSvg)\n/* harmony export */ });\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _data_url__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../data/url */ \"./data/url.ts\");\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _element_embeddable__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../element/embeddable */ \"./element/embeddable.ts\");\n/* harmony import */ var _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../element/linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _element_textElement__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../element/textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _frame__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../frame */ \"./frame.ts\");\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../math */ \"./math.ts\");\n/* harmony import */ var _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../scene/ShapeCache */ \"./scene/ShapeCache.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _renderElement__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./renderElement */ \"./renderer/renderElement.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst roughSVGDrawWithPrecision = (rsvg, drawable, precision) => {\n if (typeof precision === \"undefined\") {\n return rsvg.draw(drawable);\n }\n\n const pshape = {\n sets: drawable.sets,\n shape: drawable.shape,\n options: Object.assign(Object.assign({}, drawable.options), {\n fixedDecimalPlaceDigits: precision\n })\n };\n return rsvg.draw(pshape);\n};\n\nconst maybeWrapNodesInFrameClipPath = (element, root, nodes, frameRendering, elementsMap) => {\n if (!frameRendering.enabled || !frameRendering.clip) {\n return null;\n }\n\n const frame = (0,_frame__WEBPACK_IMPORTED_MODULE_7__.getContainingFrame)(element, elementsMap);\n\n if (frame) {\n const g = root.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"g\");\n g.setAttributeNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"clip-path\", `url(#${frame.id})`);\n nodes.forEach(node => g.appendChild(node));\n return g;\n }\n\n return null;\n};\n\nconst renderElementToSvg = (element, elementsMap, rsvg, svgRoot, files, offsetX, offsetY, renderConfig) => {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;\n\n const offset = {\n x: offsetX,\n y: offsetY\n };\n const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_2__.getElementAbsoluteCoords)(element, elementsMap);\n let cx = (x2 - x1) / 2 - (element.x - x1);\n let cy = (y2 - y1) / 2 - (element.y - y1);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isTextElement)(element)) {\n const container = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_5__.getContainerElement)(element, elementsMap);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isArrowElement)(container)) {\n const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_2__.getElementAbsoluteCoords)(container, elementsMap);\n const boundTextCoords = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_4__.LinearElementEditor.getBoundTextElementPosition(container, element, elementsMap);\n cx = (x2 - x1) / 2 - (boundTextCoords.x - x1);\n cy = (y2 - y1) / 2 - (boundTextCoords.y - y1);\n offsetX = offsetX + boundTextCoords.x - element.x;\n offsetY = offsetY + boundTextCoords.y - element.y;\n }\n }\n\n const degree = 180 * element.angle / Math.PI; // element to append node to, most of the time svgRoot\n\n let root = svgRoot; // if the element has a link, create an anchor tag and make that the new root\n\n if (element.link) {\n const anchorTag = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"a\");\n anchorTag.setAttribute(\"href\", (0,_data_url__WEBPACK_IMPORTED_MODULE_1__.normalizeLink)(element.link));\n root.appendChild(anchorTag);\n root = anchorTag;\n }\n\n const addToRoot = (node, element) => {\n if ((0,_utils__WEBPACK_IMPORTED_MODULE_10__.isTestEnv)()) {\n node.setAttribute(\"data-id\", element.id);\n }\n\n root.appendChild(node);\n };\n\n const opacity = ((_b = (_a = (0,_frame__WEBPACK_IMPORTED_MODULE_7__.getContainingFrame)(element, elementsMap)) === null || _a === void 0 ? void 0 : _a.opacity) !== null && _b !== void 0 ? _b : 100) * element.opacity / 10000;\n\n switch (element.type) {\n case \"selection\":\n {\n // Since this is used only during editing experience, which is canvas based,\n // this should not happen\n throw new Error(\"Selection rendering is not supported for SVG\");\n }\n\n case \"rectangle\":\n case \"diamond\":\n case \"ellipse\":\n {\n const shape = _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_9__.ShapeCache.generateElementShape(element, null);\n const node = roughSVGDrawWithPrecision(rsvg, shape, _constants__WEBPACK_IMPORTED_MODULE_0__.MAX_DECIMALS_FOR_SVG_EXPORT);\n\n if (opacity !== 1) {\n node.setAttribute(\"stroke-opacity\", `${opacity}`);\n node.setAttribute(\"fill-opacity\", `${opacity}`);\n }\n\n node.setAttribute(\"stroke-linecap\", \"round\");\n node.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n const g = maybeWrapNodesInFrameClipPath(element, root, [node], renderConfig.frameRendering, elementsMap);\n addToRoot(g || node, element);\n break;\n }\n\n case \"iframe\":\n case \"embeddable\":\n {\n // render placeholder rectangle\n const shape = _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_9__.ShapeCache.generateElementShape(element, renderConfig);\n const node = roughSVGDrawWithPrecision(rsvg, shape, _constants__WEBPACK_IMPORTED_MODULE_0__.MAX_DECIMALS_FOR_SVG_EXPORT);\n const opacity = element.opacity / 100;\n\n if (opacity !== 1) {\n node.setAttribute(\"stroke-opacity\", `${opacity}`);\n node.setAttribute(\"fill-opacity\", `${opacity}`);\n }\n\n node.setAttribute(\"stroke-linecap\", \"round\");\n node.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n addToRoot(node, element);\n const label = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_3__.createPlaceholderEmbeddableLabel)(element);\n renderElementToSvg(label, elementsMap, rsvg, root, files, label.x + offset.x - element.x, label.y + offset.y - element.y, renderConfig);\n const scaleX = ((_c = element.scale) === null || _c === void 0 ? void 0 : _c[0]) || 1; //zsviczian\n\n const scaleY = ((_d = element.scale) === null || _d === void 0 ? void 0 : _d[1]) || 1; //zsviczian\n // render embeddable element + iframe\n\n const embeddableNode = roughSVGDrawWithPrecision(rsvg, shape, _constants__WEBPACK_IMPORTED_MODULE_0__.MAX_DECIMALS_FOR_SVG_EXPORT);\n embeddableNode.setAttribute(\"stroke-linecap\", \"round\");\n embeddableNode.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy}) scale(${scaleX}, ${scaleY})`);\n\n while (embeddableNode.firstChild) {\n embeddableNode.removeChild(embeddableNode.firstChild);\n }\n\n const radius = (0,_math__WEBPACK_IMPORTED_MODULE_8__.getCornerRadius)(Math.min(element.width, element.height), element);\n const embedLink = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_3__.getEmbedLink)((0,_data_url__WEBPACK_IMPORTED_MODULE_1__.toValidURL)(element.link || \"\")); // if rendering embeddables explicitly disabled or\n // embedding documents via srcdoc (which doesn't seem to work for SVGs)\n // replace with a link instead\n\n if (renderConfig.renderEmbeddables === false || (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) === \"document\") {\n const anchorTag = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"a\");\n anchorTag.setAttribute(\"href\", (0,_data_url__WEBPACK_IMPORTED_MODULE_1__.normalizeLink)(element.link || \"\"));\n anchorTag.setAttribute(\"target\", \"_blank\");\n anchorTag.setAttribute(\"rel\", \"noopener noreferrer\");\n anchorTag.style.borderRadius = `${radius}px`;\n embeddableNode.appendChild(anchorTag);\n } else {\n const foreignObject = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"foreignObject\");\n foreignObject.style.width = `${element.width / scaleX}px`; //zsviczian\n\n foreignObject.style.height = `${element.height / scaleY}px`; //zsviczian\n\n foreignObject.style.border = \"none\";\n const div = foreignObject.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"div\");\n div.setAttribute(\"xmlns\", \"http://www.w3.org/1999/xhtml\");\n div.style.width = \"100%\";\n div.style.height = \"100%\";\n const iframe = div.ownerDocument.createElement(\"iframe\");\n iframe.src = (_e = embedLink === null || embedLink === void 0 ? void 0 : embedLink.link) !== null && _e !== void 0 ? _e : \"\";\n iframe.style.width = \"100%\";\n iframe.style.height = \"100%\";\n iframe.style.border = \"none\";\n iframe.style.borderRadius = `${radius}px`;\n iframe.style.top = \"0\";\n iframe.style.left = \"0\";\n iframe.allowFullscreen = true;\n div.appendChild(iframe);\n foreignObject.appendChild(div);\n embeddableNode.appendChild(foreignObject);\n }\n\n addToRoot(embeddableNode, element);\n break;\n }\n\n case \"line\":\n case \"arrow\":\n {\n const boundText = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_5__.getBoundTextElement)(element, elementsMap);\n const maskPath = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"mask\");\n\n if (boundText) {\n maskPath.setAttribute(\"id\", `mask-${element.id}`);\n const maskRectVisible = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"rect\");\n offsetX = offsetX || 0;\n offsetY = offsetY || 0;\n maskRectVisible.setAttribute(\"x\", \"0\");\n maskRectVisible.setAttribute(\"y\", \"0\");\n maskRectVisible.setAttribute(\"fill\", \"#fff\");\n maskRectVisible.setAttribute(\"width\", `${element.width + 100 + offsetX}`);\n maskRectVisible.setAttribute(\"height\", `${element.height + 100 + offsetY}`);\n maskPath.appendChild(maskRectVisible);\n const maskRectInvisible = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"rect\");\n const boundTextCoords = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_4__.LinearElementEditor.getBoundTextElementPosition(element, boundText, elementsMap);\n const maskX = offsetX + boundTextCoords.x - element.x;\n const maskY = offsetY + boundTextCoords.y - element.y;\n maskRectInvisible.setAttribute(\"x\", maskX.toString());\n maskRectInvisible.setAttribute(\"y\", maskY.toString());\n maskRectInvisible.setAttribute(\"fill\", \"#000\");\n maskRectInvisible.setAttribute(\"width\", `${boundText.width}`);\n maskRectInvisible.setAttribute(\"height\", `${boundText.height}`);\n maskRectInvisible.setAttribute(\"opacity\", \"1\");\n maskPath.appendChild(maskRectInvisible);\n }\n\n const group = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"g\");\n\n if (boundText) {\n group.setAttribute(\"mask\", `url(#mask-${element.id})`);\n }\n\n group.setAttribute(\"stroke-linecap\", \"round\");\n const shapes = _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_9__.ShapeCache.generateElementShape(element, renderConfig);\n shapes.forEach(shape => {\n const node = roughSVGDrawWithPrecision(rsvg, shape, _constants__WEBPACK_IMPORTED_MODULE_0__.MAX_DECIMALS_FOR_SVG_EXPORT);\n\n if (opacity !== 1) {\n node.setAttribute(\"stroke-opacity\", `${opacity}`);\n node.setAttribute(\"fill-opacity\", `${opacity}`);\n }\n\n node.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n\n if (element.type === \"line\" && (0,_math__WEBPACK_IMPORTED_MODULE_8__.isPathALoop)(element.points) && element.backgroundColor !== \"transparent\") {\n node.setAttribute(\"fill-rule\", \"evenodd\");\n }\n\n group.appendChild(node);\n });\n const g = maybeWrapNodesInFrameClipPath(element, root, [group, maskPath], renderConfig.frameRendering, elementsMap);\n\n if (g) {\n addToRoot(g, element);\n root.appendChild(g);\n } else {\n addToRoot(group, element);\n root.append(maskPath);\n }\n\n break;\n }\n\n case \"freedraw\":\n {\n const backgroundFillShape = _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_9__.ShapeCache.generateElementShape(element, renderConfig);\n const node = backgroundFillShape ? roughSVGDrawWithPrecision(rsvg, backgroundFillShape, _constants__WEBPACK_IMPORTED_MODULE_0__.MAX_DECIMALS_FOR_SVG_EXPORT) : svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"g\");\n\n if (opacity !== 1) {\n node.setAttribute(\"stroke-opacity\", `${opacity}`);\n node.setAttribute(\"fill-opacity\", `${opacity}`);\n }\n\n node.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n node.setAttribute(\"stroke\", \"none\");\n const path = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"path\"); //zsviczian\n\n if ((_g = (_f = element.customData) === null || _f === void 0 ? void 0 : _f.strokeOptions) === null || _g === void 0 ? void 0 : _g.hasOutline) {\n node.setAttribute(\"stroke-width\", `${element.strokeWidth * ((_h = element.customData.strokeOptions.outlineWidth) !== null && _h !== void 0 ? _h : 1)}`);\n const outline = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"path\");\n outline.setAttribute(\"fill\", \"none\");\n outline.setAttribute(\"stroke\", element.strokeColor);\n outline.setAttribute(\"d\", (0,_renderElement__WEBPACK_IMPORTED_MODULE_11__.getFreeDrawSvgPath)(element));\n node.appendChild(outline);\n path.setAttribute(\"fill\", element.backgroundColor);\n } else {\n path.setAttribute(\"fill\", element.strokeColor);\n }\n\n path.setAttribute(\"d\", (0,_renderElement__WEBPACK_IMPORTED_MODULE_11__.getFreeDrawSvgPath)(element));\n node.appendChild(path);\n const g = maybeWrapNodesInFrameClipPath(element, root, [node], renderConfig.frameRendering, elementsMap);\n addToRoot(g || node, element);\n break;\n }\n\n case \"image\":\n {\n const width = Math.round(element.width);\n const height = Math.round(element.height);\n const fileData = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isInitializedImageElement)(element) && files[element.fileId];\n\n if (fileData) {\n const symbolId = `image-${fileData.id}`;\n let symbol = svgRoot.querySelector(`#${symbolId}`);\n\n if (!symbol) {\n symbol = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"symbol\");\n symbol.id = symbolId;\n const image = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"image\");\n image.setAttribute(\"width\", \"100%\");\n image.setAttribute(\"height\", \"100%\");\n image.setAttribute(\"href\", fileData.dataURL);\n image.setAttribute(\"preserveAspectRatio\", \"none\"); //zsviczian\n\n symbol.appendChild(image);\n root.prepend(symbol);\n }\n\n const use = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"use\");\n use.setAttribute(\"href\", `#${symbolId}`); // in dark theme, revert the image color filter\n\n if (renderConfig.exportWithDarkMode && fileData.mimeType !== _constants__WEBPACK_IMPORTED_MODULE_0__.MIME_TYPES.svg) {\n use.setAttribute(\"filter\", _renderElement__WEBPACK_IMPORTED_MODULE_11__.IMAGE_INVERT_FILTER);\n }\n\n use.setAttribute(\"width\", `${width}`);\n use.setAttribute(\"height\", `${height}`);\n use.setAttribute(\"opacity\", `${opacity}`); // We first apply `scale` transforms (horizontal/vertical mirroring)\n // on the <use> element, then apply translation and rotation\n // on the <g> element which wraps the <use>.\n // Doing this separately is a quick hack to to work around compositing\n // the transformations correctly (the transform-origin was not being\n // applied correctly).\n\n if (element.scale[0] !== 1 || element.scale[1] !== 1) {\n const translateX = element.scale[0] !== 1 ? -width : 0;\n const translateY = element.scale[1] !== 1 ? -height : 0;\n use.setAttribute(\"transform\", `scale(${element.scale[0]}, ${element.scale[1]}) translate(${translateX} ${translateY})`);\n }\n\n const g = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"g\");\n g.appendChild(use);\n g.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n\n if (element.roundness) {\n const clipPath = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"clipPath\");\n clipPath.id = `image-clipPath-${element.id}`;\n const clipRect = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"rect\");\n const radius = (0,_math__WEBPACK_IMPORTED_MODULE_8__.getCornerRadius)(Math.min(element.width, element.height), element);\n clipRect.setAttribute(\"width\", `${element.width}`);\n clipRect.setAttribute(\"height\", `${element.height}`);\n clipRect.setAttribute(\"rx\", `${radius}`);\n clipRect.setAttribute(\"ry\", `${radius}`);\n clipPath.appendChild(clipRect);\n addToRoot(clipPath, element);\n g.setAttributeNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"clip-path\", `url(#${clipPath.id})`);\n }\n\n const clipG = maybeWrapNodesInFrameClipPath(element, root, [g], renderConfig.frameRendering, elementsMap);\n addToRoot(clipG || g, element);\n }\n\n break;\n }\n // frames are not rendered and only acts as a container\n\n case \"frame\":\n case \"magicframe\":\n {\n if (renderConfig.frameRendering.enabled && renderConfig.frameRendering.outline) {\n const rect = document.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"rect\");\n rect.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n rect.setAttribute(\"width\", `${element.width}px`);\n rect.setAttribute(\"height\", `${element.height}px`); // Rounded corners\n\n rect.setAttribute(\"rx\", _constants__WEBPACK_IMPORTED_MODULE_0__.FRAME_STYLE.radius.toString());\n rect.setAttribute(\"ry\", _constants__WEBPACK_IMPORTED_MODULE_0__.FRAME_STYLE.radius.toString());\n rect.setAttribute(\"fill\", \"none\"); //rect.setAttribute(\"stroke\", FRAME_STYLE.strokeColor); //zsviczian\n //rect.setAttribute(\"stroke-width\", FRAME_STYLE.strokeWidth.toString()); //zsviczian\n\n rect.setAttribute(\"stroke\", (_o = (_l = (_k = (_j = element.customData) === null || _j === void 0 ? void 0 : _j.frameColor) === null || _k === void 0 ? void 0 : _k.stroke) !== null && _l !== void 0 ? _l : (_m = renderConfig.frameColor) === null || _m === void 0 ? void 0 : _m.stroke) !== null && _o !== void 0 ? _o : _constants__WEBPACK_IMPORTED_MODULE_0__.FRAME_STYLE.strokeColor); //zsviczian\n\n rect.setAttribute(\"stroke-width\", (_t = (_r = (_q = (_p = element.customData) === null || _p === void 0 ? void 0 : _p.frameColor) === null || _q === void 0 ? void 0 : _q.fill) !== null && _r !== void 0 ? _r : (_s = renderConfig.frameColor) === null || _s === void 0 ? void 0 : _s.fill) !== null && _t !== void 0 ? _t : _constants__WEBPACK_IMPORTED_MODULE_0__.FRAME_STYLE.strokeWidth.toString()); //zsviczian\n\n addToRoot(rect, element);\n }\n\n break;\n }\n\n default:\n {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isTextElement)(element)) {\n const node = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"g\");\n\n if (opacity !== 1) {\n node.setAttribute(\"stroke-opacity\", `${opacity}`);\n node.setAttribute(\"fill-opacity\", `${opacity}`);\n }\n\n node.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n const lines = element.text.replace(/\\r\\n?/g, \"\\n\").split(\"\\n\");\n const lineHeightPx = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_5__.getLineHeightInPx)(element.fontSize, element.lineHeight);\n const horizontalOffset = element.textAlign === \"center\" ? element.width / 2 : element.textAlign === \"right\" ? element.width : 0;\n const verticalOffset = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_5__.getVerticalOffset)(element.fontFamily, element.fontSize, lineHeightPx);\n const direction = (0,_utils__WEBPACK_IMPORTED_MODULE_10__.isRTL)(element.text) ? \"rtl\" : \"ltr\";\n const textAnchor = element.textAlign === \"center\" ? \"middle\" : element.textAlign === \"right\" || direction === \"rtl\" ? \"end\" : \"start\";\n\n for (let i = 0; i < lines.length; i++) {\n const text = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"text\");\n text.textContent = lines[i];\n text.setAttribute(\"x\", `${horizontalOffset}`);\n text.setAttribute(\"y\", `${i * lineHeightPx + verticalOffset}`);\n text.setAttribute(\"font-family\", (0,_utils__WEBPACK_IMPORTED_MODULE_10__.getFontFamilyString)(element));\n text.setAttribute(\"font-size\", `${element.fontSize}px`);\n text.setAttribute(\"fill\", element.strokeColor);\n text.setAttribute(\"text-anchor\", textAnchor);\n text.setAttribute(\"style\", \"white-space: pre;\");\n text.setAttribute(\"direction\", direction);\n text.setAttribute(\"dominant-baseline\", \"alphabetic\");\n node.appendChild(text);\n }\n\n const g = maybeWrapNodesInFrameClipPath(element, root, [node], renderConfig.frameRendering, elementsMap);\n addToRoot(g || node, element);\n } else {\n // @ts-ignore\n throw new Error(`Unimplemented type ${element.type}`);\n }\n }\n }\n};\n\nconst renderSceneToSvg = (elements, elementsMap, rsvg, svgRoot, files, renderConfig) => {\n if (!svgRoot) {\n return;\n } // render elements\n\n\n elements.filter(el => !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isIframeLikeElement)(el)).forEach(element => {\n if (!element.isDeleted) {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isTextElement)(element) && element.containerId && elementsMap.has(element.containerId)) {\n // will be rendered with the container\n return;\n }\n\n try {\n renderElementToSvg(element, elementsMap, rsvg, svgRoot, files, element.x + renderConfig.offsetX, element.y + renderConfig.offsetY, renderConfig);\n const boundTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_5__.getBoundTextElement)(element, elementsMap);\n\n if (boundTextElement) {\n renderElementToSvg(boundTextElement, elementsMap, rsvg, svgRoot, files, boundTextElement.x + renderConfig.offsetX, boundTextElement.y + renderConfig.offsetY, renderConfig);\n }\n } catch (error) {\n console.error(error);\n }\n }\n }); // render embeddables on top\n\n elements.filter(el => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isIframeLikeElement)(el)).forEach(element => {\n if (!element.isDeleted) {\n try {\n renderElementToSvg(element, elementsMap, rsvg, svgRoot, files, element.x + renderConfig.offsetX, element.y + renderConfig.offsetY, renderConfig);\n } catch (error) {\n console.error(error);\n }\n }\n });\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./renderer/staticSvgScene.ts?");
3206
3206
 
3207
3207
  /***/ }),
3208
3208
 
@@ -3367,7 +3367,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
3367
3367
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
3368
3368
 
3369
3369
  "use strict";
3370
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"Snapshot\": () => (/* binding */ Snapshot),\n/* harmony export */ \"Store\": () => (/* binding */ Store),\n/* harmony export */ \"StoreAction\": () => (/* binding */ StoreAction),\n/* harmony export */ \"getObservedAppState\": () => (/* binding */ getObservedAppState)\n/* harmony export */ });\n/* harmony import */ var _appState__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./appState */ \"./appState.ts\");\n/* harmony import */ var _change__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./change */ \"./change.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./constants */ \"./constants.ts\");\n/* harmony import */ var _element_mutateElement__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./element/mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _element_newElement__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./element/newElement */ \"./element/newElement.ts\");\n/* harmony import */ var _emitter__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./emitter */ \"./emitter.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./utils */ \"./utils.ts\");\n\n\n\n\n\n\n // hidden non-enumerable property for runtime checks\n\nconst hiddenObservedAppStateProp = \"__observedAppState\";\nconst getObservedAppState = appState => {\n var _a, _b;\n\n const observedAppState = {\n name: appState.name,\n editingGroupId: appState.editingGroupId,\n viewBackgroundColor: appState.viewBackgroundColor,\n selectedElementIds: appState.selectedElementIds,\n selectedGroupIds: appState.selectedGroupIds,\n editingLinearElementId: ((_a = appState.editingLinearElement) === null || _a === void 0 ? void 0 : _a.elementId) || null,\n selectedLinearElementId: ((_b = appState.selectedLinearElement) === null || _b === void 0 ? void 0 : _b.elementId) || null\n };\n Reflect.defineProperty(observedAppState, hiddenObservedAppStateProp, {\n value: true,\n enumerable: false\n });\n return observedAppState;\n};\n\nconst isObservedAppState = appState => !!Reflect.get(appState, hiddenObservedAppStateProp);\n\nconst StoreAction = {\n CAPTURE: \"capture\",\n UPDATE: \"update\",\n NONE: \"none\"\n};\n/**\r\n * Represent an increment to the Store.\r\n */\n\nclass StoreIncrementEvent {\n constructor(elementsChange, appStateChange) {\n this.elementsChange = elementsChange;\n this.appStateChange = appStateChange;\n }\n\n}\n\nclass Store {\n constructor() {\n this.onStoreIncrementEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_5__.Emitter();\n this.scheduledActions = new Set();\n this._snapshot = Snapshot.empty(); // TODO: Suspicious that this is called so many places. Seems error-prone.\n\n this.shouldCaptureIncrement = () => {\n this.scheduleAction(StoreAction.CAPTURE);\n };\n\n this.shouldUpdateSnapshot = () => {\n this.scheduleAction(StoreAction.UPDATE);\n };\n\n this.scheduleAction = action => {\n this.scheduledActions.add(action);\n this.satisfiesScheduledActionsInvariant();\n };\n\n this.commit = (elements, appState) => {\n try {\n // Capture has precedence since it also performs update\n if (this.scheduledActions.has(StoreAction.CAPTURE)) {\n this.captureIncrement(elements, appState);\n } else if (this.scheduledActions.has(StoreAction.UPDATE)) {\n this.updateSnapshot(elements, appState);\n }\n } finally {\n this.satisfiesScheduledActionsInvariant(); // Defensively reset all scheduled actions, potentially cleans up other runtime garbage\n\n this.scheduledActions = new Set();\n }\n };\n\n this.captureIncrement = (elements, appState) => {\n const prevSnapshot = this.snapshot;\n const nextSnapshot = this.snapshot.maybeClone(elements, appState); // Optimisation, don't continue if nothing has changed\n\n if (prevSnapshot !== nextSnapshot) {\n // Calculate and record the changes based on the previous and next snapshot\n const elementsChange = nextSnapshot.meta.didElementsChange ? _change__WEBPACK_IMPORTED_MODULE_1__.ElementsChange.calculate(prevSnapshot.elements, nextSnapshot.elements) : _change__WEBPACK_IMPORTED_MODULE_1__.ElementsChange.empty();\n const appStateChange = nextSnapshot.meta.didAppStateChange ? _change__WEBPACK_IMPORTED_MODULE_1__.AppStateChange.calculate(prevSnapshot.appState, nextSnapshot.appState) : _change__WEBPACK_IMPORTED_MODULE_1__.AppStateChange.empty();\n\n if (!elementsChange.isEmpty() || !appStateChange.isEmpty()) {\n // Notify listeners with the increment\n this.onStoreIncrementEmitter.trigger(new StoreIncrementEvent(elementsChange, appStateChange));\n } // Update snapshot\n\n\n this.snapshot = nextSnapshot;\n }\n };\n\n this.updateSnapshot = (elements, appState) => {\n const nextSnapshot = this.snapshot.maybeClone(elements, appState);\n\n if (this.snapshot !== nextSnapshot) {\n // Update snapshot\n this.snapshot = nextSnapshot;\n }\n };\n\n this.filterUncomittedElements = (prevElements, nextElements) => {\n for (const [id, prevElement] of prevElements.entries()) {\n const nextElement = nextElements.get(id);\n\n if (!nextElement) {\n // Nothing to care about here, elements were forcefully deleted\n continue;\n }\n\n const elementSnapshot = this.snapshot.elements.get(id); // Checks for in progress async user action\n\n if (!elementSnapshot) {\n // Detected yet uncomitted local element\n nextElements.delete(id);\n } else if (elementSnapshot.version < prevElement.version) {\n // Element was already commited, but the snapshot version is lower than current current local version\n nextElements.set(id, elementSnapshot);\n }\n }\n\n return nextElements;\n };\n\n this.clear = () => {\n this.snapshot = Snapshot.empty();\n this.scheduledActions = new Set();\n };\n\n this.satisfiesScheduledActionsInvariant = () => {\n if (!(this.scheduledActions.size >= 0 && this.scheduledActions.size <= 3)) {\n const message = `There can be at most three store actions scheduled at the same time, but there are \"${this.scheduledActions.size}\".`;\n console.error(message, this.scheduledActions.values());\n\n if (true) {\n throw new Error(message);\n }\n }\n };\n }\n\n get snapshot() {\n return this._snapshot;\n }\n\n set snapshot(snapshot) {\n this._snapshot = snapshot;\n }\n\n}\nclass Snapshot {\n constructor(elements, appState, meta = {\n didElementsChange: false,\n didAppStateChange: false,\n isEmpty: false\n }) {\n this.elements = elements;\n this.appState = appState;\n this.meta = meta;\n }\n\n static empty() {\n return new Snapshot(new Map(), getObservedAppState((0,_appState__WEBPACK_IMPORTED_MODULE_0__.getDefaultAppState)()), {\n didElementsChange: false,\n didAppStateChange: false,\n isEmpty: true\n });\n }\n\n isEmpty() {\n return this.meta.isEmpty;\n }\n /**\r\n * Efficiently clone the existing snapshot, only if we detected changes.\r\n *\r\n * @returns same instance if there are no changes detected, new instance otherwise.\r\n */\n\n\n maybeClone(elements, appState) {\n const nextElementsSnapshot = this.maybeCreateElementsSnapshot(elements);\n const nextAppStateSnapshot = this.maybeCreateAppStateSnapshot(appState);\n let didElementsChange = false;\n let didAppStateChange = false;\n\n if (this.elements !== nextElementsSnapshot) {\n didElementsChange = true;\n }\n\n if (this.appState !== nextAppStateSnapshot) {\n didAppStateChange = true;\n }\n\n if (!didElementsChange && !didAppStateChange) {\n return this;\n }\n\n const snapshot = new Snapshot(nextElementsSnapshot, nextAppStateSnapshot, {\n didElementsChange,\n didAppStateChange\n });\n return snapshot;\n }\n\n maybeCreateAppStateSnapshot(appState) {\n if (!appState) {\n return this.appState;\n } // Not watching over everything from the app state, just the relevant props\n\n\n const nextAppStateSnapshot = !isObservedAppState(appState) ? getObservedAppState(appState) : appState;\n const didAppStateChange = this.detectChangedAppState(nextAppStateSnapshot);\n\n if (!didAppStateChange) {\n return this.appState;\n }\n\n return nextAppStateSnapshot;\n }\n\n detectChangedAppState(nextObservedAppState) {\n return !(0,_utils__WEBPACK_IMPORTED_MODULE_6__.isShallowEqual)(this.appState, nextObservedAppState, {\n selectedElementIds: _utils__WEBPACK_IMPORTED_MODULE_6__.isShallowEqual,\n selectedGroupIds: _utils__WEBPACK_IMPORTED_MODULE_6__.isShallowEqual\n });\n }\n\n maybeCreateElementsSnapshot(elements) {\n if (!elements) {\n return this.elements;\n }\n\n const didElementsChange = this.detectChangedElements(elements);\n\n if (!didElementsChange) {\n return this.elements;\n }\n\n const elementsSnapshot = this.createElementsSnapshot(elements);\n return elementsSnapshot;\n }\n /**\r\n * Detect if there any changed elements.\r\n *\r\n * NOTE: we shouldn't just use `sceneVersionNonce` instead, as we need to call this before the scene updates.\r\n */\n\n\n detectChangedElements(nextElements) {\n if (this.elements === nextElements) {\n return false;\n }\n\n if (this.elements.size !== nextElements.size) {\n return true;\n } // loop from right to left as changes are likelier to happen on new elements\n\n\n const keys = Array.from(nextElements.keys());\n\n for (let i = keys.length - 1; i >= 0; i--) {\n const prev = this.elements.get(keys[i]);\n const next = nextElements.get(keys[i]);\n\n if (!prev || !next || prev.id !== next.id || prev.versionNonce !== next.versionNonce) {\n return true;\n }\n }\n\n return false;\n }\n /**\r\n * Perform structural clone, cloning only elements that changed.\r\n */\n\n\n createElementsSnapshot(nextElements) {\n const clonedElements = new Map();\n\n for (const [id, prevElement] of this.elements.entries()) {\n // Clone previous elements, never delete, in case nextElements would be just a subset of previous elements\n // i.e. during collab, persist or whenenever isDeleted elements get cleared\n if (!nextElements.get(id)) {\n // When we cannot find the prev element in the next elements, we mark it as deleted\n clonedElements.set(id, (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_3__.newElementWith)(prevElement, {\n isDeleted: true\n }));\n } else {\n clonedElements.set(id, prevElement);\n }\n }\n\n for (const [id, nextElement] of nextElements.entries()) {\n const prevElement = clonedElements.get(id); // At this point our elements are reconcilled already, meaning the next element is always newer\n\n if (!prevElement || // element was added\n prevElement && prevElement.versionNonce !== nextElement.versionNonce // element was updated\n ) {\n clonedElements.set(id, (0,_element_newElement__WEBPACK_IMPORTED_MODULE_4__.deepCopyElement)(nextElement));\n }\n }\n\n return clonedElements;\n }\n\n}\n\n//# sourceURL=webpack://ExcalidrawLib/./store.ts?");
3370
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"Snapshot\": () => (/* binding */ Snapshot),\n/* harmony export */ \"Store\": () => (/* binding */ Store),\n/* harmony export */ \"StoreAction\": () => (/* binding */ StoreAction),\n/* harmony export */ \"getObservedAppState\": () => (/* binding */ getObservedAppState)\n/* harmony export */ });\n/* harmony import */ var _appState__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./appState */ \"./appState.ts\");\n/* harmony import */ var _change__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./change */ \"./change.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./constants */ \"./constants.ts\");\n/* harmony import */ var _element_mutateElement__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./element/mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _element_newElement__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./element/newElement */ \"./element/newElement.ts\");\n/* harmony import */ var _emitter__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./emitter */ \"./emitter.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./utils */ \"./utils.ts\");\n\n\n\n\n\n\n // hidden non-enumerable property for runtime checks\n\nconst hiddenObservedAppStateProp = \"__observedAppState\";\nconst getObservedAppState = appState => {\n var _a, _b;\n\n const observedAppState = {\n name: appState.name,\n editingGroupId: appState.editingGroupId,\n viewBackgroundColor: appState.viewBackgroundColor,\n selectedElementIds: appState.selectedElementIds,\n selectedGroupIds: appState.selectedGroupIds,\n editingLinearElementId: ((_a = appState.editingLinearElement) === null || _a === void 0 ? void 0 : _a.elementId) || null,\n selectedLinearElementId: ((_b = appState.selectedLinearElement) === null || _b === void 0 ? void 0 : _b.elementId) || null\n };\n Reflect.defineProperty(observedAppState, hiddenObservedAppStateProp, {\n value: true,\n enumerable: false\n });\n return observedAppState;\n};\n\nconst isObservedAppState = appState => !!Reflect.get(appState, hiddenObservedAppStateProp);\n\nconst StoreAction = {\n /**\r\n * Immediately undoable.\r\n *\r\n * Use for updates which should be captured.\r\n * Should be used for most of the local updates.\r\n *\r\n * These updates will _immediately_ make it to the local undo / redo stacks.\r\n */\n CAPTURE: \"capture\",\n\n /**\r\n * Never undoable.\r\n *\r\n * Use for updates which should never be recorded, such as remote updates\r\n * or scene initialization.\r\n *\r\n * These updates will _never_ make it to the local undo / redo stacks.\r\n */\n UPDATE: \"update\",\n\n /**\r\n * Eventually undoable.\r\n *\r\n * Use for updates which should not be captured immediately - likely\r\n * exceptions which are part of some async multi-step process. Otherwise, all\r\n * such updates would end up being captured with the next\r\n * `StoreAction.CAPTURE` - triggered either by the next `updateScene`\r\n * or internally by the editor.\r\n *\r\n * These updates will _eventually_ make it to the local undo / redo stacks.\r\n */\n NONE: \"none\"\n};\n/**\r\n * Represent an increment to the Store.\r\n */\n\nclass StoreIncrementEvent {\n constructor(elementsChange, appStateChange) {\n this.elementsChange = elementsChange;\n this.appStateChange = appStateChange;\n }\n\n}\n\nclass Store {\n constructor() {\n this.onStoreIncrementEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_5__.Emitter();\n this.scheduledActions = new Set();\n this._snapshot = Snapshot.empty(); // TODO: Suspicious that this is called so many places. Seems error-prone.\n\n this.shouldCaptureIncrement = () => {\n this.scheduleAction(StoreAction.CAPTURE);\n };\n\n this.shouldUpdateSnapshot = () => {\n this.scheduleAction(StoreAction.UPDATE);\n };\n\n this.scheduleAction = action => {\n this.scheduledActions.add(action);\n this.satisfiesScheduledActionsInvariant();\n };\n\n this.commit = (elements, appState) => {\n try {\n // Capture has precedence since it also performs update\n if (this.scheduledActions.has(StoreAction.CAPTURE)) {\n this.captureIncrement(elements, appState);\n } else if (this.scheduledActions.has(StoreAction.UPDATE)) {\n this.updateSnapshot(elements, appState);\n }\n } finally {\n this.satisfiesScheduledActionsInvariant(); // Defensively reset all scheduled actions, potentially cleans up other runtime garbage\n\n this.scheduledActions = new Set();\n }\n };\n\n this.captureIncrement = (elements, appState) => {\n const prevSnapshot = this.snapshot;\n const nextSnapshot = this.snapshot.maybeClone(elements, appState); // Optimisation, don't continue if nothing has changed\n\n if (prevSnapshot !== nextSnapshot) {\n // Calculate and record the changes based on the previous and next snapshot\n const elementsChange = nextSnapshot.meta.didElementsChange ? _change__WEBPACK_IMPORTED_MODULE_1__.ElementsChange.calculate(prevSnapshot.elements, nextSnapshot.elements) : _change__WEBPACK_IMPORTED_MODULE_1__.ElementsChange.empty();\n const appStateChange = nextSnapshot.meta.didAppStateChange ? _change__WEBPACK_IMPORTED_MODULE_1__.AppStateChange.calculate(prevSnapshot.appState, nextSnapshot.appState) : _change__WEBPACK_IMPORTED_MODULE_1__.AppStateChange.empty();\n\n if (!elementsChange.isEmpty() || !appStateChange.isEmpty()) {\n // Notify listeners with the increment\n this.onStoreIncrementEmitter.trigger(new StoreIncrementEvent(elementsChange, appStateChange));\n } // Update snapshot\n\n\n this.snapshot = nextSnapshot;\n }\n };\n\n this.updateSnapshot = (elements, appState) => {\n const nextSnapshot = this.snapshot.maybeClone(elements, appState);\n\n if (this.snapshot !== nextSnapshot) {\n // Update snapshot\n this.snapshot = nextSnapshot;\n }\n };\n\n this.filterUncomittedElements = (prevElements, nextElements) => {\n for (const [id, prevElement] of prevElements.entries()) {\n const nextElement = nextElements.get(id);\n\n if (!nextElement) {\n // Nothing to care about here, elements were forcefully deleted\n continue;\n }\n\n const elementSnapshot = this.snapshot.elements.get(id); // Checks for in progress async user action\n\n if (!elementSnapshot) {\n // Detected yet uncomitted local element\n nextElements.delete(id);\n } else if (elementSnapshot.version < prevElement.version) {\n // Element was already commited, but the snapshot version is lower than current current local version\n nextElements.set(id, elementSnapshot);\n }\n }\n\n return nextElements;\n };\n\n this.clear = () => {\n this.snapshot = Snapshot.empty();\n this.scheduledActions = new Set();\n };\n\n this.satisfiesScheduledActionsInvariant = () => {\n if (!(this.scheduledActions.size >= 0 && this.scheduledActions.size <= 3)) {\n const message = `There can be at most three store actions scheduled at the same time, but there are \"${this.scheduledActions.size}\".`;\n console.error(message, this.scheduledActions.values());\n\n if (true) {\n throw new Error(message);\n }\n }\n };\n }\n\n get snapshot() {\n return this._snapshot;\n }\n\n set snapshot(snapshot) {\n this._snapshot = snapshot;\n }\n\n}\nclass Snapshot {\n constructor(elements, appState, meta = {\n didElementsChange: false,\n didAppStateChange: false,\n isEmpty: false\n }) {\n this.elements = elements;\n this.appState = appState;\n this.meta = meta;\n }\n\n static empty() {\n return new Snapshot(new Map(), getObservedAppState((0,_appState__WEBPACK_IMPORTED_MODULE_0__.getDefaultAppState)()), {\n didElementsChange: false,\n didAppStateChange: false,\n isEmpty: true\n });\n }\n\n isEmpty() {\n return this.meta.isEmpty;\n }\n /**\r\n * Efficiently clone the existing snapshot, only if we detected changes.\r\n *\r\n * @returns same instance if there are no changes detected, new instance otherwise.\r\n */\n\n\n maybeClone(elements, appState) {\n const nextElementsSnapshot = this.maybeCreateElementsSnapshot(elements);\n const nextAppStateSnapshot = this.maybeCreateAppStateSnapshot(appState);\n let didElementsChange = false;\n let didAppStateChange = false;\n\n if (this.elements !== nextElementsSnapshot) {\n didElementsChange = true;\n }\n\n if (this.appState !== nextAppStateSnapshot) {\n didAppStateChange = true;\n }\n\n if (!didElementsChange && !didAppStateChange) {\n return this;\n }\n\n const snapshot = new Snapshot(nextElementsSnapshot, nextAppStateSnapshot, {\n didElementsChange,\n didAppStateChange\n });\n return snapshot;\n }\n\n maybeCreateAppStateSnapshot(appState) {\n if (!appState) {\n return this.appState;\n } // Not watching over everything from the app state, just the relevant props\n\n\n const nextAppStateSnapshot = !isObservedAppState(appState) ? getObservedAppState(appState) : appState;\n const didAppStateChange = this.detectChangedAppState(nextAppStateSnapshot);\n\n if (!didAppStateChange) {\n return this.appState;\n }\n\n return nextAppStateSnapshot;\n }\n\n detectChangedAppState(nextObservedAppState) {\n return !(0,_utils__WEBPACK_IMPORTED_MODULE_6__.isShallowEqual)(this.appState, nextObservedAppState, {\n selectedElementIds: _utils__WEBPACK_IMPORTED_MODULE_6__.isShallowEqual,\n selectedGroupIds: _utils__WEBPACK_IMPORTED_MODULE_6__.isShallowEqual\n });\n }\n\n maybeCreateElementsSnapshot(elements) {\n if (!elements) {\n return this.elements;\n }\n\n const didElementsChange = this.detectChangedElements(elements);\n\n if (!didElementsChange) {\n return this.elements;\n }\n\n const elementsSnapshot = this.createElementsSnapshot(elements);\n return elementsSnapshot;\n }\n /**\r\n * Detect if there any changed elements.\r\n *\r\n * NOTE: we shouldn't just use `sceneVersionNonce` instead, as we need to call this before the scene updates.\r\n */\n\n\n detectChangedElements(nextElements) {\n if (this.elements === nextElements) {\n return false;\n }\n\n if (this.elements.size !== nextElements.size) {\n return true;\n } // loop from right to left as changes are likelier to happen on new elements\n\n\n const keys = Array.from(nextElements.keys());\n\n for (let i = keys.length - 1; i >= 0; i--) {\n const prev = this.elements.get(keys[i]);\n const next = nextElements.get(keys[i]);\n\n if (!prev || !next || prev.id !== next.id || prev.versionNonce !== next.versionNonce) {\n return true;\n }\n }\n\n return false;\n }\n /**\r\n * Perform structural clone, cloning only elements that changed.\r\n */\n\n\n createElementsSnapshot(nextElements) {\n const clonedElements = new Map();\n\n for (const [id, prevElement] of this.elements.entries()) {\n // Clone previous elements, never delete, in case nextElements would be just a subset of previous elements\n // i.e. during collab, persist or whenenever isDeleted elements get cleared\n if (!nextElements.get(id)) {\n // When we cannot find the prev element in the next elements, we mark it as deleted\n clonedElements.set(id, (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_3__.newElementWith)(prevElement, {\n isDeleted: true\n }));\n } else {\n clonedElements.set(id, prevElement);\n }\n }\n\n for (const [id, nextElement] of nextElements.entries()) {\n const prevElement = clonedElements.get(id); // At this point our elements are reconcilled already, meaning the next element is always newer\n\n if (!prevElement || // element was added\n prevElement && prevElement.versionNonce !== nextElement.versionNonce // element was updated\n ) {\n clonedElements.set(id, (0,_element_newElement__WEBPACK_IMPORTED_MODULE_4__.deepCopyElement)(nextElement));\n }\n }\n\n return clonedElements;\n }\n\n}\n\n//# sourceURL=webpack://ExcalidrawLib/./store.ts?");
3371
3371
 
3372
3372
  /***/ }),
3373
3373