npm - @zsviczian/excalidraw - Versions diffs - 0.16.1-obsidian-1 → 0.16.1-obsidian-2 - Mend

@zsviczian/excalidraw 0.16.1-obsidian-1 → 0.16.1-obsidian-2

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 (4) hide show

package/dist/excalidraw.development.js +17 -6
package/dist/excalidraw.production.min.js +1 -1
package/package.json +1 -1
package/types/types.d.ts +1 -0

package/dist/excalidraw.development.js CHANGED Viewed

@@ -2171,7 +2171,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"trackEvent\": () => (/* binding */ trackEvent)\n/* harmony export */ });\nconst trackEvent = (category, action, label, value) => {\n  try {\n    // place here categories that you want to track as events\n    // KEEP IN MIND THE PRICING\n    const ALLOWED_CATEGORIES_TO_TRACK = []; // Uncomment the next line to track locally\n    // console.log(\"Track Event\", { category, action, label, value });\n\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_PORTAL_URL\":\"\",\"VITE_APP_PLUS_LP\":\"https://plus.excalidraw.com\",\"VITE_APP_PLUS_APP\":\"https://app.excalidraw.com\",\"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.16.1-obsidian-1\",\"VITE_IS_EXCALIDRAW_NPM_PACKAGE\":true}).VITE_WORKER_ID) {\n      return;\n    }\n\n    if (!ALLOWED_CATEGORIES_TO_TRACK.includes(category)) {\n      return;\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?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"trackEvent\": () => (/* binding */ trackEvent)\n/* harmony export */ });\nconst trackEvent = (category, action, label, value) => {\n  try {\n    // place here categories that you want to track as events\n    // KEEP IN MIND THE PRICING\n    const ALLOWED_CATEGORIES_TO_TRACK = []; // Uncomment the next line to track locally\n    // console.log(\"Track Event\", { category, action, label, value });\n\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_PORTAL_URL\":\"\",\"VITE_APP_PLUS_LP\":\"https://plus.excalidraw.com\",\"VITE_APP_PLUS_APP\":\"https://app.excalidraw.com\",\"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.16.1-obsidian-2\",\"VITE_IS_EXCALIDRAW_NPM_PACKAGE\":true}).VITE_WORKER_ID) {\n      return;\n    }\n\n    if (!ALLOWED_CATEGORIES_TO_TRACK.includes(category)) {\n      return;\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?");
 /***/ }),
@@ -2237,7 +2237,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 "use strict";
-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 */ });\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 _element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../element */ \"../../element/index.ts\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../i18n */ \"../../i18n.ts\");\n/* harmony import */ var _components_App__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../components/App */ \"../../components/App.tsx\");\n/* harmony import */ var _scene__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../scene */ \"../../scene/index.ts\");\n/* harmony import */ var _shapes__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../shapes */ \"../../shapes.tsx\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../utils */ \"../../utils.ts\");\n/* harmony import */ var _Stack__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./Stack */ \"../../components/Stack.tsx\");\n/* harmony import */ var _ToolButton__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./ToolButton */ \"../../components/ToolButton.tsx\");\n/* harmony import */ var _scene_comparisons__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../scene/comparisons */ \"../../scene/comparisons.ts\");\n/* harmony import */ var _analytics__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../analytics */ \"../../analytics.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../element/typeChecks */ \"../../element/typeChecks.ts\");\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! clsx */ \"../../../node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../actions */ \"../../actions/index.ts\");\n/* harmony import */ var _element_textElement__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../element/textElement */ \"../../element/textElement.ts\");\n/* harmony import */ var _Actions_scss__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./Actions.scss */ \"../../components/Actions.scss\");\n/* harmony import */ var _dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./dropdownMenu/DropdownMenu */ \"../../components/dropdownMenu/DropdownMenu.tsx\");\n/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./icons */ \"../../components/icons.tsx\");\n/* harmony import */ var _keys__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../keys */ \"../../keys.ts\");\n\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\nconst SelectedShapeActions = ({\n  appState,\n  elements,\n  renderAction\n}) => {\n  var _a;\n\n  const targetElements = (0,_scene__WEBPACK_IMPORTED_MODULE_5__.getTargetElements)((0,_element__WEBPACK_IMPORTED_MODULE_2__.getNonDeletedElements)(elements), appState);\n  let isSingleElementBoundContainer = false;\n\n  if (targetElements.length === 2 && ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_12__.hasBoundTextElement)(targetElements[0]) || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_12__.hasBoundTextElement)(targetElements[1]))) {\n    isSingleElementBoundContainer = true;\n  }\n\n  const isEditing = Boolean(appState.editingElement);\n  const device = (0,_components_App__WEBPACK_IMPORTED_MODULE_4__.useDevice)();\n  const isRTL = document.documentElement.getAttribute(\"dir\") === \"rtl\";\n  const showFillIcons = (0,_scene__WEBPACK_IMPORTED_MODULE_5__.hasBackground)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_5__.hasBackground)(element.type) && !(0,_utils__WEBPACK_IMPORTED_MODULE_7__.isTransparent)(element.backgroundColor));\n  const showChangeBackgroundIcons = (0,_scene__WEBPACK_IMPORTED_MODULE_5__.hasBackground)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_5__.hasBackground)(element.type));\n  const showLinkIcon = targetElements.length === 1 || isSingleElementBoundContainer;\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,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: ((0,_scene_comparisons__WEBPACK_IMPORTED_MODULE_10__.hasStrokeColor)(appState.activeTool.type) && appState.activeTool.type !== \"image\" && commonSelectedType !== \"image\" && commonSelectedType !== \"frame\" || targetElements.some(element => (0,_scene_comparisons__WEBPACK_IMPORTED_MODULE_10__.hasStrokeColor)(element.type))) && renderAction(\"changeStrokeColor\")\n    }), showChangeBackgroundIcons && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n      children: renderAction(\"changeBackgroundColor\")\n    }), showFillIcons && renderAction(\"changeFillStyle\"), ((0,_scene__WEBPACK_IMPORTED_MODULE_5__.hasStrokeWidth)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_5__.hasStrokeWidth)(element.type))) && renderAction(\"changeStrokeWidth\"), (appState.activeTool.type === \"freedraw\" || targetElements.some(element => element.type === \"freedraw\")) && renderAction(\"changeStrokeShape\"), ((0,_scene__WEBPACK_IMPORTED_MODULE_5__.hasStrokeStyle)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_5__.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_5__.canChangeRoundness)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_5__.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    }), ((0,_scene__WEBPACK_IMPORTED_MODULE_5__.hasText)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_5__.hasText)(element.type))) && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n      children: [renderAction(\"changeFontSize\"), renderAction(\"changeFontFamily\"), (0,_element_textElement__WEBPACK_IMPORTED_MODULE_15__.suppportsHorizontalAlign)(targetElements) && renderAction(\"changeTextAlign\")]\n    }), (0,_element_textElement__WEBPACK_IMPORTED_MODULE_15__.shouldAllowVerticalAlign)(targetElements) && renderAction(\"changeVerticalAlign\"), ((0,_scene__WEBPACK_IMPORTED_MODULE_5__.canHaveArrowheads)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_5__.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_3__.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(\"bringToFront\"), renderAction(\"bringForward\")]\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_3__.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_3__.t)(\"labels.actions\")\n      }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n        className: \"buttonList\"\n      }, {\n        children: [!device.isMobile && renderAction(\"duplicateSelection\"), !device.isMobile && renderAction(\"deleteSelectedElements\"), renderAction(\"group\"), renderAction(\"ungroup\"), showLinkIcon && renderAction(\"hyperlink\")]\n      }))]\n    })]\n  }));\n};\nconst ShapesSwitcher = ({\n  interactiveCanvas,\n  activeTool,\n  setAppState,\n  onImageAction,\n  appState\n}) => {\n  const [isExtraToolsMenuOpen, setIsExtraToolsMenuOpen] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false);\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_6__.SHAPES.map(({\n      value,\n      icon,\n      key,\n      numericKey,\n      fillable\n    }, index) => {\n      const label = (0,_i18n__WEBPACK_IMPORTED_MODULE_3__.t)(`toolBar.${value}`);\n      const letter = key && (0,_utils__WEBPACK_IMPORTED_MODULE_7__.capitalizeString)(typeof key === \"string\" ? key : key[0]);\n      const shortcut = letter ? `${letter} ${(0,_i18n__WEBPACK_IMPORTED_MODULE_3__.t)(\"helpDialog.or\")} ${numericKey}` : `${numericKey}`;\n      return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ToolButton__WEBPACK_IMPORTED_MODULE_9__.ToolButton, {\n        className: (0,clsx__WEBPACK_IMPORTED_MODULE_13__[\"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_7__.capitalizeString)(label)} — ${shortcut}`,\n        keyBindingLabel: numericKey || letter,\n        \"aria-label\": (0,_utils__WEBPACK_IMPORTED_MODULE_7__.capitalizeString)(label),\n        \"aria-keyshortcuts\": shortcut,\n        \"data-testid\": `toolbar-${value}`,\n        onPointerDown: ({\n          pointerType\n        }) => {\n          if (!appState.penDetected && pointerType === \"pen\") {\n            setAppState({\n              penDetected: true,\n              penMode: true\n            });\n          }\n        },\n        onChange: ({\n          pointerType\n        }) => {\n          if (appState.activeTool.type !== value) {\n            (0,_analytics__WEBPACK_IMPORTED_MODULE_11__.trackEvent)(\"toolbar\", value, \"ui\");\n          }\n\n          const nextActiveTool = (0,_utils__WEBPACK_IMPORTED_MODULE_7__.updateActiveTool)(appState, {\n            type: value\n          });\n          setAppState({\n            activeTool: nextActiveTool,\n            activeEmbeddable: null,\n            multiElement: null,\n            selectedElementIds: {}\n          });\n          (0,_utils__WEBPACK_IMPORTED_MODULE_7__.setCursorForShape)(interactiveCanvas, Object.assign(Object.assign({}, appState), {\n            activeTool: nextActiveTool\n          }));\n\n          if (value === \"image\") {\n            onImageAction({\n              pointerType\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_17__[\"default\"], Object.assign({\n      open: isExtraToolsMenuOpen\n    }, {\n      children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_17__[\"default\"].Trigger, Object.assign({\n        className: \"App-toolbar__extra-tools-trigger\",\n        onToggle: () => setIsExtraToolsMenuOpen(!isExtraToolsMenuOpen),\n        title: (0,_i18n__WEBPACK_IMPORTED_MODULE_3__.t)(\"toolBar.extraTools\")\n      }, {\n        children: _icons__WEBPACK_IMPORTED_MODULE_18__.extraToolsIcon\n      })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_17__[\"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_17__[\"default\"].Item, Object.assign({\n          onSelect: () => {\n            const nextActiveTool = (0,_utils__WEBPACK_IMPORTED_MODULE_7__.updateActiveTool)(appState, {\n              type: \"frame\"\n            });\n            setTimeout(() => setAppState({\n              activeTool: nextActiveTool,\n              multiElement: null,\n              selectedElementIds: {},\n              activeEmbeddable: null\n            })); //zsviczian added setTimeout wrapper because tools wouldn't select on first click\n          },\n          icon: _icons__WEBPACK_IMPORTED_MODULE_18__.frameToolIcon,\n          shortcut: _keys__WEBPACK_IMPORTED_MODULE_19__.KEYS.F.toLocaleUpperCase(),\n          \"data-testid\": \"toolbar-frame\"\n        }, {\n          children: (0,_i18n__WEBPACK_IMPORTED_MODULE_3__.t)(\"toolBar.frame\")\n        })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_17__[\"default\"].Item, Object.assign({\n          onSelect: () => {\n            const nextActiveTool = (0,_utils__WEBPACK_IMPORTED_MODULE_7__.updateActiveTool)(appState, {\n              type: \"embeddable\"\n            });\n            setTimeout(() => setAppState({\n              activeTool: nextActiveTool,\n              multiElement: null,\n              selectedElementIds: {},\n              activeEmbeddable: null\n            })); //zsviczian added setTimeout wrapper because tools wouldn't select on first click\n          },\n          icon: _icons__WEBPACK_IMPORTED_MODULE_18__.EmbedIcon,\n          \"data-testid\": \"toolbar-embeddable\"\n        }, {\n          children: (0,_i18n__WEBPACK_IMPORTED_MODULE_3__.t)(\"toolBar.embeddable\")\n        })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_17__[\"default\"].Item, Object.assign({\n          onSelect: () => {\n            const nextActiveTool = (0,_utils__WEBPACK_IMPORTED_MODULE_7__.updateActiveTool)(appState, {\n              type: \"mermaid\"\n            });\n            setTimeout(() => setAppState({\n              activeTool: nextActiveTool,\n              multiElement: null\n            })); //zsviczian added setTimeout wrapper and removed selectedElementIds\n          },\n          icon: _icons__WEBPACK_IMPORTED_MODULE_18__.mermaidLogoIcon,\n          \"data-testid\": \"toolbar-embeddable\"\n        }, {\n          children: (0,_i18n__WEBPACK_IMPORTED_MODULE_3__.t)(\"toolBar.mermaidToExcalidraw\")\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_8__[\"default\"].Col, Object.assign({\n  gap: 1,\n  className: (0,clsx__WEBPACK_IMPORTED_MODULE_13__[\"default\"])(\"zoom-actions\", {\n    \"tray-zoom\": trayMode\n  })\n}, {\n  children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Stack__WEBPACK_IMPORTED_MODULE_8__[\"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_13__[\"default\"])(\"disable-zen-mode\", {\n    \"disable-zen-mode--visible\": showExitZenModeBtn\n  }),\n  onClick: () => actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_14__.actionToggleZenMode)\n}, {\n  children: (0,_i18n__WEBPACK_IMPORTED_MODULE_3__.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?");
+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 */ });\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 _element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../element */ \"../../element/index.ts\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../i18n */ \"../../i18n.ts\");\n/* harmony import */ var _components_App__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../components/App */ \"../../components/App.tsx\");\n/* harmony import */ var _scene__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../scene */ \"../../scene/index.ts\");\n/* harmony import */ var _shapes__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../shapes */ \"../../shapes.tsx\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../utils */ \"../../utils.ts\");\n/* harmony import */ var _Stack__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./Stack */ \"../../components/Stack.tsx\");\n/* harmony import */ var _ToolButton__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./ToolButton */ \"../../components/ToolButton.tsx\");\n/* harmony import */ var _scene_comparisons__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../scene/comparisons */ \"../../scene/comparisons.ts\");\n/* harmony import */ var _analytics__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../analytics */ \"../../analytics.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../element/typeChecks */ \"../../element/typeChecks.ts\");\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! clsx */ \"../../../node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../actions */ \"../../actions/index.ts\");\n/* harmony import */ var _element_textElement__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../element/textElement */ \"../../element/textElement.ts\");\n/* harmony import */ var _Actions_scss__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./Actions.scss */ \"../../components/Actions.scss\");\n/* harmony import */ var _dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./dropdownMenu/DropdownMenu */ \"../../components/dropdownMenu/DropdownMenu.tsx\");\n/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./icons */ \"../../components/icons.tsx\");\n/* harmony import */ var _keys__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../keys */ \"../../keys.ts\");\n\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\nconst SelectedShapeActions = ({\n  appState,\n  elements,\n  renderAction\n}) => {\n  var _a;\n\n  const targetElements = (0,_scene__WEBPACK_IMPORTED_MODULE_5__.getTargetElements)((0,_element__WEBPACK_IMPORTED_MODULE_2__.getNonDeletedElements)(elements), appState);\n  let isSingleElementBoundContainer = false;\n\n  if (targetElements.length === 2 && ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_12__.hasBoundTextElement)(targetElements[0]) || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_12__.hasBoundTextElement)(targetElements[1]))) {\n    isSingleElementBoundContainer = true;\n  }\n\n  const isEditing = Boolean(appState.editingElement);\n  const device = (0,_components_App__WEBPACK_IMPORTED_MODULE_4__.useDevice)();\n  const isRTL = document.documentElement.getAttribute(\"dir\") === \"rtl\";\n  const showFillIcons = (0,_scene__WEBPACK_IMPORTED_MODULE_5__.hasBackground)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_5__.hasBackground)(element.type) && !(0,_utils__WEBPACK_IMPORTED_MODULE_7__.isTransparent)(element.backgroundColor));\n  const showChangeBackgroundIcons = (0,_scene__WEBPACK_IMPORTED_MODULE_5__.hasBackground)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_5__.hasBackground)(element.type));\n  const showLinkIcon = targetElements.length === 1 || isSingleElementBoundContainer;\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,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: ((0,_scene_comparisons__WEBPACK_IMPORTED_MODULE_10__.hasStrokeColor)(appState.activeTool.type) && appState.activeTool.type !== \"image\" && commonSelectedType !== \"image\" && commonSelectedType !== \"frame\" || targetElements.some(element => (0,_scene_comparisons__WEBPACK_IMPORTED_MODULE_10__.hasStrokeColor)(element.type))) && renderAction(\"changeStrokeColor\")\n    }), showChangeBackgroundIcons && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n      children: renderAction(\"changeBackgroundColor\")\n    }), showFillIcons && renderAction(\"changeFillStyle\"), ((0,_scene__WEBPACK_IMPORTED_MODULE_5__.hasStrokeWidth)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_5__.hasStrokeWidth)(element.type))) && renderAction(\"changeStrokeWidth\"), (appState.activeTool.type === \"freedraw\" || targetElements.some(element => element.type === \"freedraw\")) && renderAction(\"changeStrokeShape\"), ((0,_scene__WEBPACK_IMPORTED_MODULE_5__.hasStrokeStyle)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_5__.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_5__.canChangeRoundness)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_5__.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    }), ((0,_scene__WEBPACK_IMPORTED_MODULE_5__.hasText)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_5__.hasText)(element.type))) && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n      children: [renderAction(\"changeFontSize\"), renderAction(\"changeFontFamily\"), (0,_element_textElement__WEBPACK_IMPORTED_MODULE_15__.suppportsHorizontalAlign)(targetElements) && renderAction(\"changeTextAlign\")]\n    }), (0,_element_textElement__WEBPACK_IMPORTED_MODULE_15__.shouldAllowVerticalAlign)(targetElements) && renderAction(\"changeVerticalAlign\"), ((0,_scene__WEBPACK_IMPORTED_MODULE_5__.canHaveArrowheads)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_5__.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_3__.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(\"bringToFront\"), renderAction(\"bringForward\")]\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_3__.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_3__.t)(\"labels.actions\")\n      }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n        className: \"buttonList\"\n      }, {\n        children: [!device.isMobile && renderAction(\"duplicateSelection\"), !device.isMobile && renderAction(\"deleteSelectedElements\"), renderAction(\"group\"), renderAction(\"ungroup\"), showLinkIcon && renderAction(\"hyperlink\")]\n      }))]\n    })]\n  }));\n};\nconst ShapesSwitcher = ({\n  interactiveCanvas,\n  activeTool,\n  setAppState,\n  onImageAction,\n  appState\n}) => {\n  const {\n    renderMermaid\n  } = (0,_components_App__WEBPACK_IMPORTED_MODULE_4__.useAppProps)(); //zsviczian\n\n  const [isExtraToolsMenuOpen, setIsExtraToolsMenuOpen] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false);\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_6__.SHAPES.map(({\n      value,\n      icon,\n      key,\n      numericKey,\n      fillable\n    }, index) => {\n      const label = (0,_i18n__WEBPACK_IMPORTED_MODULE_3__.t)(`toolBar.${value}`);\n      const letter = key && (0,_utils__WEBPACK_IMPORTED_MODULE_7__.capitalizeString)(typeof key === \"string\" ? key : key[0]);\n      const shortcut = letter ? `${letter} ${(0,_i18n__WEBPACK_IMPORTED_MODULE_3__.t)(\"helpDialog.or\")} ${numericKey}` : `${numericKey}`;\n      return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ToolButton__WEBPACK_IMPORTED_MODULE_9__.ToolButton, {\n        className: (0,clsx__WEBPACK_IMPORTED_MODULE_13__[\"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_7__.capitalizeString)(label)} — ${shortcut}`,\n        keyBindingLabel: numericKey || letter,\n        \"aria-label\": (0,_utils__WEBPACK_IMPORTED_MODULE_7__.capitalizeString)(label),\n        \"aria-keyshortcuts\": shortcut,\n        \"data-testid\": `toolbar-${value}`,\n        onPointerDown: ({\n          pointerType\n        }) => {\n          if (!appState.penDetected && pointerType === \"pen\") {\n            setAppState({\n              penDetected: true,\n              penMode: true\n            });\n          }\n        },\n        onChange: ({\n          pointerType\n        }) => {\n          if (appState.activeTool.type !== value) {\n            (0,_analytics__WEBPACK_IMPORTED_MODULE_11__.trackEvent)(\"toolbar\", value, \"ui\");\n          }\n\n          const nextActiveTool = (0,_utils__WEBPACK_IMPORTED_MODULE_7__.updateActiveTool)(appState, {\n            type: value\n          });\n          setAppState({\n            activeTool: nextActiveTool,\n            activeEmbeddable: null,\n            multiElement: null,\n            selectedElementIds: {}\n          });\n          (0,_utils__WEBPACK_IMPORTED_MODULE_7__.setCursorForShape)(interactiveCanvas, Object.assign(Object.assign({}, appState), {\n            activeTool: nextActiveTool\n          }));\n\n          if (value === \"image\") {\n            onImageAction({\n              pointerType\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_17__[\"default\"], Object.assign({\n      open: isExtraToolsMenuOpen\n    }, {\n      children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_17__[\"default\"].Trigger, Object.assign({\n        className: \"App-toolbar__extra-tools-trigger\",\n        onToggle: () => setIsExtraToolsMenuOpen(!isExtraToolsMenuOpen),\n        title: (0,_i18n__WEBPACK_IMPORTED_MODULE_3__.t)(\"toolBar.extraTools\")\n      }, {\n        children: _icons__WEBPACK_IMPORTED_MODULE_18__.extraToolsIcon\n      })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_17__[\"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_17__[\"default\"].Item, Object.assign({\n          onSelect: () => {\n            const nextActiveTool = (0,_utils__WEBPACK_IMPORTED_MODULE_7__.updateActiveTool)(appState, {\n              type: \"frame\"\n            });\n            setTimeout(() => setAppState({\n              activeTool: nextActiveTool,\n              multiElement: null,\n              selectedElementIds: {},\n              activeEmbeddable: null\n            })); //zsviczian added setTimeout wrapper because tools wouldn't select on first click\n          },\n          icon: _icons__WEBPACK_IMPORTED_MODULE_18__.frameToolIcon,\n          shortcut: _keys__WEBPACK_IMPORTED_MODULE_19__.KEYS.F.toLocaleUpperCase(),\n          \"data-testid\": \"toolbar-frame\"\n        }, {\n          children: (0,_i18n__WEBPACK_IMPORTED_MODULE_3__.t)(\"toolBar.frame\")\n        })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_17__[\"default\"].Item, Object.assign({\n          onSelect: () => {\n            const nextActiveTool = (0,_utils__WEBPACK_IMPORTED_MODULE_7__.updateActiveTool)(appState, {\n              type: \"embeddable\"\n            });\n            setTimeout(() => setAppState({\n              activeTool: nextActiveTool,\n              multiElement: null,\n              selectedElementIds: {},\n              activeEmbeddable: null\n            })); //zsviczian added setTimeout wrapper because tools wouldn't select on first click\n          },\n          icon: _icons__WEBPACK_IMPORTED_MODULE_18__.EmbedIcon,\n          \"data-testid\": \"toolbar-embeddable\"\n        }, {\n          children: (0,_i18n__WEBPACK_IMPORTED_MODULE_3__.t)(\"toolBar.embeddable\")\n        })), renderMermaid && //zsviczian\n        (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_17__[\"default\"].Item, Object.assign({\n          onSelect: () => {\n            const nextActiveTool = (0,_utils__WEBPACK_IMPORTED_MODULE_7__.updateActiveTool)(appState, {\n              type: \"mermaid\"\n            });\n            setTimeout(() => setAppState({\n              activeTool: nextActiveTool,\n              multiElement: null\n            })); //zsviczian added setTimeout wrapper and removed selectedElementIds\n          },\n          icon: _icons__WEBPACK_IMPORTED_MODULE_18__.mermaidLogoIcon,\n          \"data-testid\": \"toolbar-embeddable\"\n        }, {\n          children: (0,_i18n__WEBPACK_IMPORTED_MODULE_3__.t)(\"toolBar.mermaidToExcalidraw\")\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_8__[\"default\"].Col, Object.assign({\n  gap: 1,\n  className: (0,clsx__WEBPACK_IMPORTED_MODULE_13__[\"default\"])(\"zoom-actions\", {\n    \"tray-zoom\": trayMode\n  })\n}, {\n  children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Stack__WEBPACK_IMPORTED_MODULE_8__[\"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_13__[\"default\"])(\"disable-zen-mode\", {\n    \"disable-zen-mode--visible\": showExitZenModeBtn\n  }),\n  onClick: () => actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_14__.actionToggleZenMode)\n}, {\n  children: (0,_i18n__WEBPACK_IMPORTED_MODULE_3__.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?");
 /***/ }),
@@ -2259,7 +2259,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"ExcalidrawContainerContext\": () => (/* binding */ ExcalidrawContainerContext),\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\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_68__ = __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__WEBPACK_IMPORTED_MODULE_33__ = __webpack_require__(/*! ../utils */ \"../../utils.ts\");\n/* harmony import */ var _element_embeddable__WEBPACK_IMPORTED_MODULE_34__ = __webpack_require__(/*! ../element/embeddable */ \"../../element/embeddable.ts\");\n/* harmony import */ var _ContextMenu__WEBPACK_IMPORTED_MODULE_35__ = __webpack_require__(/*! ./ContextMenu */ \"../../components/ContextMenu.tsx\");\n/* harmony import */ var _LayerUI__WEBPACK_IMPORTED_MODULE_36__ = __webpack_require__(/*! ./LayerUI */ \"../../components/LayerUI.tsx\");\n/* harmony import */ var _Toast__WEBPACK_IMPORTED_MODULE_37__ = __webpack_require__(/*! ./Toast */ \"../../components/Toast.tsx\");\n/* harmony import */ var _actions_actionToggleViewMode__WEBPACK_IMPORTED_MODULE_38__ = __webpack_require__(/*! ../actions/actionToggleViewMode */ \"../../actions/actionToggleViewMode.tsx\");\n/* harmony import */ var _data_blob__WEBPACK_IMPORTED_MODULE_39__ = __webpack_require__(/*! ../data/blob */ \"../../data/blob.ts\");\n/* harmony import */ var _element_image__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(/*! ../element/image */ \"../../element/image.ts\");\n/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_41__ = __webpack_require__(/*! lodash.throttle */ \"../../../node_modules/lodash.throttle/index.js\");\n/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_41___default = /*#__PURE__*/__webpack_require__.n(lodash_throttle__WEBPACK_IMPORTED_MODULE_41__);\n/* harmony import */ var _data_filesystem__WEBPACK_IMPORTED_MODULE_42__ = __webpack_require__(/*! ../data/filesystem */ \"../../data/filesystem.ts\");\n/* harmony import */ var _element_textElement__WEBPACK_IMPORTED_MODULE_43__ = __webpack_require__(/*! ../element/textElement */ \"../../element/textElement.ts\");\n/* harmony import */ var _element_collision__WEBPACK_IMPORTED_MODULE_44__ = __webpack_require__(/*! ../element/collision */ \"../../element/collision.ts\");\n/* harmony import */ var _element_resizeElements__WEBPACK_IMPORTED_MODULE_45__ = __webpack_require__(/*! ../element/resizeElements */ \"../../element/resizeElements.ts\");\n/* harmony import */ var _element_Hyperlink__WEBPACK_IMPORTED_MODULE_46__ = __webpack_require__(/*! ../element/Hyperlink */ \"../../element/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 _snapping__WEBPACK_IMPORTED_MODULE_58__ = __webpack_require__(/*! ../snapping */ \"../../snapping.ts\");\n/* harmony import */ var _actions_actionBoundText__WEBPACK_IMPORTED_MODULE_59__ = __webpack_require__(/*! ../actions/actionBoundText */ \"../../actions/actionBoundText.tsx\");\n/* harmony import */ var _BraveMeasureTextError__WEBPACK_IMPORTED_MODULE_60__ = __webpack_require__(/*! ./BraveMeasureTextError */ \"../../components/BraveMeasureTextError.tsx\");\n/* harmony import */ var _EyeDropper__WEBPACK_IMPORTED_MODULE_61__ = __webpack_require__(/*! ./EyeDropper */ \"../../components/EyeDropper.tsx\");\n/* harmony import */ var _data_transform__WEBPACK_IMPORTED_MODULE_62__ = __webpack_require__(/*! ../data/transform */ \"../../data/transform.ts\");\n/* harmony import */ var _Sidebar_Sidebar__WEBPACK_IMPORTED_MODULE_63__ = __webpack_require__(/*! ./Sidebar/Sidebar */ \"../../components/Sidebar/Sidebar.tsx\");\n/* harmony import */ var _canvases__WEBPACK_IMPORTED_MODULE_64__ = __webpack_require__(/*! ./canvases */ \"../../components/canvases/index.tsx\");\n/* harmony import */ var _scene_Renderer__WEBPACK_IMPORTED_MODULE_65__ = __webpack_require__(/*! ../scene/Renderer */ \"../../scene/Renderer.ts\");\n/* harmony import */ var _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_66__ = __webpack_require__(/*! ../scene/ShapeCache */ \"../../scene/ShapeCache.ts\");\n/* harmony import */ var _MermaidToExcalidraw__WEBPACK_IMPORTED_MODULE_67__ = __webpack_require__(/*! ./MermaidToExcalidraw */ \"../../components/MermaidToExcalidraw.tsx\");\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\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  isSmScreen: false,\n  isMobile: false,\n  isTouchScreen: false,\n  canDeviceFitSidebar: false,\n  isLandscape: 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(\"unitialized 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;\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    var _a;\n\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    this.lastPointerDown = null;\n    this.lastPointerUp = null;\n    this.lastViewportPosition = {\n      x: 0,\n      y: 0\n    };\n    this.allowMobileMode = true; //zsviczian\n\n    this.updateEmbeddables = () => {\n      const embeddableElements = new Map();\n      let updated = false;\n      this.scene.getNonDeletedElements().filter(element => {\n        if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(element)) {\n          embeddableElements.set(element.id, true);\n\n          if (element.validated == null) {\n            updated = true;\n            const validated = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_34__.embeddableURLValidator)(element.link, this.props.validateEmbeddable);\n            (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n              validated\n            }, false);\n            _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_66__.ShapeCache[\"delete\"](element);\n          }\n        }\n\n        return false;\n      });\n\n      if (updated) {\n        this.scene.informMutation();\n      } // GC\n\n\n      this.iFrameRefs.forEach((ref, id) => {\n        if (!embeddableElements.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_33__.viewportCoordsToSceneCoords)({\n              clientX: box.x,\n              clientY: box.y\n            }, this.state);\n            const boxSceneBottomRight = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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 === \"dark\";\n      return this.scene.getNonDeletedFrames().map((f, index) => {\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        })) {\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_33__.sceneCoordsToViewportCoords)({\n          sceneX: f.x,\n          sceneY: f.y\n        }, this.state);\n        const {\n          x: x2\n        } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.sceneCoordsToViewportCoords)({\n          sceneX: f.x + f.width,\n          sceneY: f.y + f.height\n        }, this.state);\n        const FRAME_NAME_GAP = 20;\n        const FRAME_NAME_EDIT_PADDING = 6;\n\n        const reset = () => {\n          var _a;\n\n          if (((_a = f.name) === null || _a === void 0 ? void 0 : _a.trim()) === \"\") {\n            (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(f, {\n              name: null\n            });\n          }\n\n          this.setState({\n            editingFrame: null\n          });\n        };\n\n        let frameNameJSX;\n\n        if (f.id === this.state.editingFrame) {\n          const frameNameInEdit = f.name == null ? `Frame ${(index + 1).toString().padStart(2, \"0\")}` //zsviczian\n          : f.name;\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            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 1px var(--color-primary)\",\n              fontFamily: \"Assistant\",\n              fontSize: \"14px\",\n              transform: `translateY(-${FRAME_NAME_EDIT_PADDING}px)`,\n              color: \"var(--color-gray-80)\",\n              overflow: \"hidden\",\n              maxWidth: `${Math.min(x2 - x1 - FRAME_NAME_EDIT_PADDING, document.body.clientWidth - x1 - FRAME_NAME_EDIT_PADDING)}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 = f.name == null || f.name.trim() === \"\" ? `Frame ${(index + 1).toString().padStart(2, \"0\")}` //zsviczian\n          : f.name.trim();\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            top: `${y1 - FRAME_NAME_GAP - this.state.offsetTop}px`,\n            left: `${x1 - this.state.offsetLeft - (this.state.editingFrame === f.id ? FRAME_NAME_EDIT_PADDING : 0)}px`,\n            zIndex: 2,\n            fontSize: \"14px\",\n            color: isDarkTheme ? \"var(--color-gray-60)\" : \"var(--color-gray-50)\",\n            width: \"max-content\",\n            maxWidth: `${x2 - x1 + FRAME_NAME_EDIT_PADDING * 2}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) => {\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.state.name,\n        viewBackgroundColor: this.state.viewBackgroundColor\n      }).catch(_utils__WEBPACK_IMPORTED_MODULE_33__.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_39__.isImageFileHandle)(fileHandle)) {\n        this.setState({\n          fileHandle\n        });\n      }\n    };\n\n    this.openEyeDropper = ({\n      type\n    }) => {\n      _jotai__WEBPACK_IMPORTED_MODULE_56__.jotaiStore.set(_EyeDropper__WEBPACK_IMPORTED_MODULE_61__.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                commitToHistory: true\n              });\n            } else {\n              this.syncActionResult({\n                appState: Object.assign(Object.assign({}, this.state), {\n                  currentItemBackgroundColor: color\n                }),\n                commitToHistory: true\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            });\n          }\n        },\n        keepOpenOnAlt: false\n      });\n    };\n\n    this.syncActionResult = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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        this.scene.replaceAllElements(actionResult.elements);\n\n        if (actionResult.commitToHistory) {\n          this.history.resumeRecording();\n        }\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.commitToHistory) {\n          this.history.resumeRecording();\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        let 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        if (typeof this.props.name !== \"undefined\") {\n          name = this.props.name;\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          if (actionResult.syncHistory) {\n            this.history.setCurrentState(this.state, this.scene.getElementsIncludingDeleted());\n          }\n        });\n      }\n    }); // Lifecycle\n\n    this.onBlur = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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    /**\r\n     * Resets scene & history.\r\n     * ! Do not use to clear scene user action !\r\n     */\n\n\n    this.resetScene = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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.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.resetHistory();\n      this.syncActionResult(Object.assign(Object.assign({}, scene), {\n        commitToHistory: true\n      }));\n    };\n\n    this.refreshDeviceState = container => {\n      const {\n        width,\n        height\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      this.device = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateObject)(this.device, {\n        isLandscape: width > height,\n        isSmScreen: width < _constants__WEBPACK_IMPORTED_MODULE_12__.MQ_SM_MAX_WIDTH,\n        isMobile: 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        canDeviceFitSidebar: width > sidebarBreakpoint\n      });\n    };\n\n    this.onResize = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(() => {\n      this.scene.getElementsIncludingDeleted().forEach(element => _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_66__.ShapeCache[\"delete\"](element));\n      this.setState({});\n    });\n\n    this.renderInteractiveSceneCallback = ({\n      atLeastOneVisibleElement,\n      scrollBars,\n      elements\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 && elements.length > 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_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.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_33__.isWritableElement)(event.target)) {\n        return;\n      }\n\n      this.cutAll();\n      event.preventDefault();\n      event.stopPropagation();\n    });\n    this.onCopy = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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_33__.isWritableElement)(event.target)) {\n        return;\n      }\n\n      this.copyAll();\n      event.preventDefault();\n      event.stopPropagation();\n    });\n\n    this.cutAll = () => {\n      this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionCut, \"keyboard\");\n    };\n\n    this.copyAll = () => {\n      this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionCopy, \"keyboard\");\n    };\n\n    this.onTouchStart = event => {\n      // fix for Apple Pencil Scribble\n      // On Android, preventing the event would disable contextMenu on tap-hold\n      if (!_constants__WEBPACK_IMPORTED_MODULE_12__.isAndroid) {\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 (_constants__WEBPACK_IMPORTED_MODULE_12__.isAndroid) {\n        event.preventDefault();\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,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(async event => {\n      var _a, _b, _c;\n\n      const isPlainPaste = !!(IS_PLAIN_PASTE && event); // #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_33__.isWritableElement)(target))) {\n        return;\n      } // 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\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 && data.text && !isPlainPaste) {\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_39__.SVGStringToFile)(string);\n        }\n      }\n\n      const {\n        x: sceneX,\n        y: sceneY\n      } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)({\n        clientX: this.lastViewportPosition.x,\n        clientY: this.lastViewportPosition.y\n      }, this.state); // prefer spreadsheet data over image file (MS Office/Libre Office)\n\n      if ((0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.isSupportedImageFile)(file) && !data.spreadsheet) {\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_62__.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 maybeUrl = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_34__.extractSrc)(data.text);\n\n        if (!isPlainPaste && (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_34__.embeddableURLValidator)(maybeUrl, this.props.validateEmbeddable) && (/^(http|https):\\/\\/[^\\s/$.?#].[^\\s]*$/.test(maybeUrl) || ((_c = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_34__.getEmbedLink)(maybeUrl)) === null || _c === void 0 ? void 0 : _c.type) === \"video\")) {\n          const embeddable = this.insertEmbeddableElement({\n            sceneX,\n            sceneY,\n            link: (0,_data_url__WEBPACK_IMPORTED_MODULE_47__.normalizeLink)(maybeUrl)\n          });\n\n          if (embeddable) {\n            this.setState({\n              selectedElementIds: {\n                [embeddable.id]: true\n              }\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_33__.distance)(minX, maxX) / 2;\n      const elementsCenterY = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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_33__.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 nextElements = [...this.scene.getElementsIncludingDeleted(), ...newElements];\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_43__.getContainerElement)(newElement);\n          (0,_element__WEBPACK_IMPORTED_MODULE_16__.redrawTextBoundingBox)(newElement, container);\n        }\n      });\n\n      if (opts.files) {\n        this.files = Object.assign(Object.assign({}, this.files), opts.files);\n      }\n\n      this.history.resumeRecording();\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.canDeviceFitSidebar && _jotai__WEBPACK_IMPORTED_MODULE_56__.jotaiStore.get(_Sidebar_Sidebar__WEBPACK_IMPORTED_MODULE_63__.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.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_33__.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 = () => {\n      this.setState(prevState => {\n        return {\n          penMode: !prevState.penMode\n        };\n      });\n    };\n\n    this.onHandToolToggle = () => {\n      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.cancelInProgresAnimation = null;\n\n    this.scrollToContent = (target = this.scene.getNonDeletedElements(), opts) => {\n      var _a, _b;\n\n      (_a = this.cancelInProgresAnimation) === 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_33__.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_33__.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.cancelInProgresAnimation = () => {\n          cancel();\n          this.cancelInProgresAnimation = null;\n        };\n      } else {\n        this.setState({\n          scrollX,\n          scrollY,\n          zoom\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.cancelInProgresAnimation) === null || _a === void 0 ? void 0 : _a.call(this);\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, this.scene);\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,_utils__WEBPACK_IMPORTED_MODULE_33__.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_45__.resizeSingleElement)(new Map().set(el.id, el), false, el, \"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,_utils__WEBPACK_IMPORTED_MODULE_33__.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_66__.ShapeCache[\"delete\"](element);\n        }\n      });\n      this.scene.informMutation();\n      this.addNewImagesToImageCache();\n    }); //zsviczian https://github.com/zsviczian/excalibrain/issues/9\n\n    this.setMobileModeAllowed = allow => {\n      const {\n        width,\n        height\n      } = this.excalidrawContainerRef.current.getBoundingClientRect();\n      this.allowMobileMode = allow;\n\n      if (allow) {\n        this.device = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateObject)(this.device, {\n          isMobile: 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      } else {\n        this.device = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateObject)(this.device, {\n          isMobile: false\n        });\n      }\n\n      this.forceUpdate();\n    }; //zsviczian\n\n\n    this.setLocalFont = showOnPanel => {\n      showFourthFont = showOnPanel;\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        commitToHistory: true\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,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(sceneData => {\n      if (sceneData.commitToHistory) {\n        this.history.resumeRecording();\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(sceneData.elements);\n      }\n\n      if (sceneData.collaborators) {\n        this.setState({\n          collaborators: sceneData.collaborators\n        });\n      }\n    });\n\n    this.onSceneUpdated = () => {\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;\n\n      let nextName;\n\n      if (force === undefined) {\n        nextName = ((_a = this.state.openSidebar) === null || _a === void 0 ? void 0 : _a.name) === name ? null : name;\n      } else {\n        nextName = force ? name : null;\n      }\n\n      this.setState({\n        openSidebar: nextName ? {\n          name: nextName,\n          tab\n        } : null\n      });\n      return !!nextName;\n    };\n\n    this.updateCurrentCursorPosition = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(event => {\n      this.lastViewportPosition.x = event.clientX;\n      this.lastViewportPosition.y = event.clientY;\n    }); // Input handling\n\n    this.onKeyDown = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(event => {\n      // normalize `event.key` when CapsLock is pressed #2372\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.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_33__.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_33__.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_33__.isInputLike)(event.target)) {\n        return;\n      }\n\n      if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.QUESTION_MARK) {\n        this.setState({\n          openDialog: \"help\"\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: \"imageExport\"\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 (this.state.viewModeEnabled) {\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, {\n            simultaneouslyUpdated: selectedElements\n          });\n        });\n        this.maybeSuggestBindingForAll(selectedElements);\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.history.resumeRecording();\n                this.setState({\n                  editingLinearElement: new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(selectedElement, this.scene)\n                });\n              }\n            }\n          } else if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(selectedElement) || (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.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_43__.getContainerCenter)(selectedElement, this.state);\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__.isFrameElement)(selectedElement)) {\n            this.setState({\n              editingFrame: selectedElement.id\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.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,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(event => {\n      if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.SPACE) {\n        if (this.state.viewModeEnabled) {\n          (0,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n        } else if (this.state.activeTool.type === \"selection\") {\n          (0,_utils__WEBPACK_IMPORTED_MODULE_33__.resetCursor)(this.interactiveCanvas);\n        } else {\n          (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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        const selectedElements = this.scene.getSelectedElements(this.state);\n        (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.isBindingEnabled)(this.state) ? (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.bindOrUnbindSelectedElements)(selectedElements) : (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.unbindLinearElements)(selectedElements);\n        this.setState({\n          suggestedBindings: []\n        });\n      }\n    });\n\n    this.setActiveTool = tool => {\n      const nextActiveTool = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateActiveTool)(this.state, tool);\n\n      if (nextActiveTool.type === \"hand\") {\n        (0,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n      } else if (!isHoldingSpace) {\n        (0,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursorForShape)(this.interactiveCanvas, this.state);\n      }\n\n      if ((0,_utils__WEBPACK_IMPORTED_MODULE_33__.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      }\n\n      if (nextActiveTool.type !== \"selection\") {\n        this.setState(prevState => ({\n          activeTool: nextActiveTool,\n          selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(nextActiveTool.type === \"mermaid\" //zsviczian\n          ? this.state.selectedElementIds : {}, this.state),\n          selectedGroupIds: {},\n          editingGroupId: null,\n          snapLines: [],\n          originSnapOffset: null\n        }));\n      } else {\n        this.setState({\n          activeTool: nextActiveTool,\n          snapLines: [],\n          originSnapOffset: null,\n          activeEmbeddable: null\n        });\n      }\n    };\n\n    this.setCursor = cursor => {\n      (0,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursor)(this.interactiveCanvas, cursor);\n    };\n\n    this.resetCursor = () => {\n      (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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    }; // fires only on Safari\n\n\n    this.onGestureStart = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.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_43__.getBoundTextElement)(container);\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_43__.getBoundTextElement)(selectedElements[0]);\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_43__.getDefaultLineHeight)(fontFamily);\n      const fontSize = this.state.currentItemFontSize;\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_43__.getApproxMinLineWidth)((0,_utils__WEBPACK_IMPORTED_MODULE_33__.getFontString)(fontString), lineHeight);\n        const minHeight = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.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.addNewElement(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      } // 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.history.resumeRecording();\n          this.setState({\n            editingLinearElement: new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(selectedElements[0], this.scene)\n          });\n          return;\n        } else if (this.state.editingLinearElement && this.state.editingLinearElement.elementId === selectedElements[0].id) {\n          return;\n        }\n      }\n\n      (0,_utils__WEBPACK_IMPORTED_MODULE_33__.resetCursor)(this.interactiveCanvas);\n      let {\n        x: sceneX,\n        y: sceneY\n      } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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.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,_utils__WEBPACK_IMPORTED_MODULE_33__.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__.isEmbeddableElement)(hitElement)) {\n          this.setState({\n            activeEmbeddable: {\n              element: hitElement,\n              state: \"active\"\n            }\n          });\n          return;\n        }\n\n        const container = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getTextBindableContainerAtPosition)(this.scene.getNonDeletedElements(), this.state, sceneX, sceneY);\n\n        if (container) {\n          if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.hasBoundTextElement)(container) || !(0,_utils__WEBPACK_IMPORTED_MODULE_33__.isTransparent)(container.backgroundColor) || (0,_element_collision__WEBPACK_IMPORTED_MODULE_44__.isHittingElementNotConsideringBoundingBox)(container, this.state, this.frameNameBoundsCache, [sceneX, sceneY])) {\n            const midPoint = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getContainerCenter)(container, this.state);\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,_element_Hyperlink__WEBPACK_IMPORTED_MODULE_46__.isPointHittingLink)(element, this.state, [scenePointer.x, scenePointer.y], this.device.isMobile);\n      });\n    };\n\n    this.redirectToLink = (event, isTouchScreen) => {\n      const draggedDistance = (0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(this.lastPointerDown.clientX, this.lastPointerDown.clientY, this.lastPointerUp.clientX, this.lastPointerUp.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_33__.viewportCoordsToSceneCoords)(this.lastPointerDown, this.state);\n      const lastPointerDownHittingLinkIcon = (0,_element_Hyperlink__WEBPACK_IMPORTED_MODULE_46__.isPointHittingLink)(this.hitLinkElement, this.state, [lastPointerDownCoords.x, lastPointerDownCoords.y], this.device.isMobile);\n      const lastPointerUpCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)(this.lastPointerUp, this.state);\n      const lastPointerUpHittingLinkIcon = (0,_element_Hyperlink__WEBPACK_IMPORTED_MODULE_46__.isPointHittingLink)(this.hitLinkElement, this.state, [lastPointerUpCoords.x, lastPointerUpCoords.y], this.device.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_33__.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 frames = this.scene.getNonDeletedFrames().filter(frame => (0,_frame__WEBPACK_IMPORTED_MODULE_51__.isCursorInFrame)(sceneCoords, frame));\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\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 + deltaX / nextZoom,\n            scrollY: zoomState.scrollY + 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__WEBPACK_IMPORTED_MODULE_29__.isOverScrollBars)(currentScrollBars, event.clientX - this.state.offsetLeft, event.clientY - this.state.offsetTop);\n      const isOverScrollBar = isPointerOverScrollBars.isOverEither;\n\n      if (!this.state.draggingElement && !this.state.multiElement) {\n        if (isOverScrollBar) {\n          (0,_utils__WEBPACK_IMPORTED_MODULE_33__.resetCursor)(this.interactiveCanvas);\n        } else {\n          (0,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursorForShape)(this.interactiveCanvas, this.state);\n        }\n      }\n\n      const scenePointer = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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_58__.isActiveToolNonLinearSnappable)(this.state.activeTool.type)) {\n        const {\n          originOffset,\n          snapLines\n        } = (0,_snapping__WEBPACK_IMPORTED_MODULE_58__.getSnapLinesAtPointer)(this.scene.getNonDeletedElements(), this.state, {\n          x: scenePointerX,\n          y: scenePointerY\n        }, event);\n        this.setState({\n          snapLines,\n          originSnapOffset: originOffset\n        });\n      } else if (!this.state.draggingElement) {\n        this.setState({\n          snapLines: []\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);\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,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.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        const elementWithTransformHandleType = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getElementWithTransformHandleType)(elements, this.state, scenePointerX, scenePointerY, this.state.zoom, event.pointerType);\n\n        if (elementWithTransformHandleType && elementWithTransformHandleType.transformHandleType) {\n          (0,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursor)(this.interactiveCanvas, (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCursorForResizingElement)(elementWithTransformHandleType));\n          return;\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);\n\n        if (transformHandleType) {\n          (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n        (0,_element_Hyperlink__WEBPACK_IMPORTED_MODULE_46__.showHyperlinkTooltip)(this.hitLinkElement, this.state);\n\n        if (this.props.onLinkHover) {\n          this.props.onLinkHover(this.hitLinkElement, event);\n        } //zsviczian\n\n      } else {\n        (0,_element_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,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n        } else if (isOverScrollBar) {\n          (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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__.isEmbeddableElement)(hitElement) && this.isEmbeddableCenter(hitElement, event, scenePointerX, scenePointerY)) {\n              (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.AUTO);\n        }\n      }\n    };\n\n    this.handleEraser = (event, pointerDownState, scenePointer) => {\n      const updateElementIds = elements => {\n        elements.forEach(element => {\n          if (element.locked) {\n            return;\n          }\n\n          idsToUpdate.push(element.id);\n\n          if (event.altKey) {\n            if (pointerDownState.elementIdsToErase[element.id] && pointerDownState.elementIdsToErase[element.id].erase) {\n              pointerDownState.elementIdsToErase[element.id].erase = false;\n            }\n          } else if (!pointerDownState.elementIdsToErase[element.id]) {\n            pointerDownState.elementIdsToErase[element.id] = {\n              erase: true,\n              opacity: element.opacity\n            };\n          }\n        });\n      };\n\n      const idsToUpdate = [];\n      const distance = (0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y, scenePointer.x, scenePointer.y);\n      const threshold = 10 / this.state.zoom.value;\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        updateElementIds(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      const elements = this.scene.getElementsIncludingDeleted().map(ele => {\n        const id = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(ele) && idsToUpdate.includes(ele.containerId) ? ele.containerId : ele.id;\n\n        if (idsToUpdate.includes(id)) {\n          if (event.altKey) {\n            if (pointerDownState.elementIdsToErase[id] && pointerDownState.elementIdsToErase[id].erase === false) {\n              return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(ele, {\n                opacity: pointerDownState.elementIdsToErase[id].opacity\n              });\n            }\n          } else {\n            return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(ele, {\n              opacity: _constants__WEBPACK_IMPORTED_MODULE_12__.ELEMENT_READY_TO_ERASE_OPACITY\n            });\n          }\n        }\n\n        return ele;\n      });\n      this.scene.replaceAllElements(elements);\n      pointerDownState.lastCoords.x = scenePointer.x;\n      pointerDownState.lastCoords.y = scenePointer.y;\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      // 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        }));\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);\n      this.maybeCleanupAfterMissingPointerUp(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_33__.updateObject)(this.device, {\n          isTouchScreen: true\n        });\n      }\n\n      if (isPanning) {\n        return;\n      }\n\n      this.lastPointerDown = event;\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      } // 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) {\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,_utils__WEBPACK_IMPORTED_MODULE_33__.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_33__.viewportCoordsToSceneCoords)(event, this.state);\n        (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(pendingImageElement, {\n          x,\n          y\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,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.AUTO);\n      } else if (this.state.activeTool.type === \"frame\") {\n        this.createFrameElementOnPointerDown(pointerDownState);\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      const onPointerMove = this.onPointerMoveFromPointerDownHandler(pointerDownState);\n      const onPointerUp = this.onPointerUpFromPointerDownHandler(pointerDownState);\n      const onKeyDown = this.onKeyDownFromPointerDownHandler(pointerDownState);\n      const onKeyUp = this.onKeyUpFromPointerDownHandler(pointerDownState);\n      lastPointerUp = onPointerUp;\n\n      if (!this.state.viewModeEnabled) {\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.lastPointerUp = event;\n      const scenePointer = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)({\n        clientX: event.clientX,\n        clientY: event.clientY\n      }, this.state);\n      const clicklength = event.timeStamp - ((_b = (_a = this.lastPointerDown) === null || _a === void 0 ? void 0 : _a.timeStamp) !== null && _b !== void 0 ? _b : 0);\n\n      if (this.device.isMobile && clicklength < 300) {\n        const hitElement = this.getElementAtPosition(scenePointer.x, scenePointer.y);\n\n        if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(hitElement) && this.isEmbeddableCenter(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 && this.hitLinkElement.type === \"embeddable\" && !(0,_element_Hyperlink__WEBPACK_IMPORTED_MODULE_46__.isPointHittingLinkIcon)(this.hitLinkElement, 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    }; // 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,_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 = /Linux/.test(window.navigator.platform);\n      (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(lastPointerUp = () => {\n        lastPointerUp = null;\n        isPanning = false;\n\n        if (!isHoldingSpace) {\n          if (this.state.viewModeEnabled) {\n            (0,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n          } else {\n            (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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 selectedElements = this.scene.getSelectedElements(this.state);\n\n        if (selectedElements.length === 1 && !this.state.editingLinearElement) {\n          const elementWithTransformHandleType = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getElementWithTransformHandleType)(elements, this.state, pointerDownState.origin.x, pointerDownState.origin.y, this.state.zoom, event.pointerType);\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);\n        }\n\n        if (pointerDownState.resize.handleType) {\n          pointerDownState.resize.isResizing = true;\n          pointerDownState.resize.offset = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.tupleToCoors)((0,_element__WEBPACK_IMPORTED_MODULE_16__.getResizeOffsetXY)(pointerDownState.resize.handleType, selectedElements, 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.history, pointerDownState.origin, linearElementEditor);\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, deselect all of its elements if they are selected\n\n                  if (hitElement.type === \"frame\") {\n                    (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getFrameElements)(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 => element.type === \"frame\").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 = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getTextBindableContainerAtPosition)(this.scene.getNonDeletedElements(), this.state, 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,_utils__WEBPACK_IMPORTED_MODULE_33__.resetCursor)(this.interactiveCanvas);\n\n      if (!this.state.activeTool.locked) {\n        this.setState({\n          activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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.scene);\n\n      if (strokeOptions === null || strokeOptions === void 0 ? void 0 : strokeOptions.highlighter) {\n        //zsviczian\n        this.scene.replaceAllElements([element, ...this.scene.getElementsIncludingDeleted()]);\n      } else {\n        this.scene.addNewElement(element);\n      }\n\n      this.setState({\n        draggingElement: element,\n        editingElement: element,\n        startBoundElement: boundElement,\n        suggestedBindings: []\n      });\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.lastPointerDown) === 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_34__.getEmbedLink)(link);\n\n      if (!embedLink) {\n        return;\n      }\n\n      if (embedLink.warning) {\n        this.setToast({\n          message: embedLink.warning,\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.aspectRatio.w,\n        height: embedLink.aspectRatio.h,\n        link,\n        validated: null\n      });\n      this.scene.replaceAllElements([...this.scene.getElementsIncludingDeleted(), element]);\n      return element;\n    };\n\n    this.createImageElement = ({\n      sceneX,\n      sceneY\n    }) => {\n      var _a;\n\n      const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(sceneX, sceneY, ((_a = this.lastPointerDown) === 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 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,_utils__WEBPACK_IMPORTED_MODULE_33__.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.scene);\n        this.scene.addNewElement(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.lastPointerDown) === 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          validated: null\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.addNewElement(element);\n        this.setState({\n          multiElement: null,\n          draggingElement: element,\n          editingElement: element\n        });\n      }\n    };\n\n    this.createFrameElementOnPointerDown = pointerDownState => {\n      var _a;\n\n      const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerDownState.origin.x, pointerDownState.origin.y, ((_a = this.lastPointerDown) === null || _a === void 0 ? void 0 : _a[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) ? null : this.state.gridSize);\n      const frame = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newFrameElement)(Object.assign({\n        x: gridX,\n        y: gridY,\n        opacity: this.state.currentItemOpacity,\n        locked: false\n      }, _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE));\n      this.scene.replaceAllElements([...this.scene.getElementsIncludingDeleted(), frame]);\n      this.setState({\n        multiElement: null,\n        draggingElement: frame,\n        editingElement: frame\n      });\n    };\n\n    this.restoreReadyToEraseElements = pointerDownState => {\n      const elements = this.scene.getElementsIncludingDeleted().map(ele => {\n        if (pointerDownState.elementIdsToErase[ele.id] && pointerDownState.elementIdsToErase[ele.id].erase) {\n          return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(ele, {\n            opacity: pointerDownState.elementIdsToErase[ele.id].opacity\n          });\n        } else if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(ele) && pointerDownState.elementIdsToErase[ele.containerId] && pointerDownState.elementIdsToErase[ele.containerId].erase) {\n          return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(ele, {\n            opacity: pointerDownState.elementIdsToErase[ele.containerId].opacity\n          });\n        } else if (ele.frameId && pointerDownState.elementIdsToErase[ele.frameId] && pointerDownState.elementIdsToErase[ele.frameId].erase) {\n          return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(ele, {\n            opacity: pointerDownState.elementIdsToErase[ele.frameId].opacity\n          });\n        }\n\n        return ele;\n      });\n      this.scene.replaceAllElements(elements);\n    };\n\n    this.eraseElements = pointerDownState => {\n      const elements = this.scene.getElementsIncludingDeleted().map(ele => {\n        if (pointerDownState.elementIdsToErase[ele.id] && pointerDownState.elementIdsToErase[ele.id].erase) {\n          return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(ele, {\n            isDeleted: true\n          });\n        } else if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(ele) && pointerDownState.elementIdsToErase[ele.containerId] && pointerDownState.elementIdsToErase[ele.containerId].erase) {\n          return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(ele, {\n            isDeleted: true\n          });\n        } else if (ele.frameId && pointerDownState.elementIdsToErase[ele.frameId] && pointerDownState.elementIdsToErase[ele.frameId].erase) {\n          return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(ele, {\n            isDeleted: true\n          });\n        }\n\n        return ele;\n      });\n      this.history.resumeRecording();\n      this.scene.replaceAllElements(elements);\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_39__.isSupportedImageFile)(imageFile)) {\n        throw new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.unsupportedFileType\"));\n      }\n\n      const mimeType = imageFile.type;\n      (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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_39__.SVGStringToFile)(await (0,_element_image__WEBPACK_IMPORTED_MODULE_40__.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_39__.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_39__.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 resing 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_39__.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_39__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.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      this.scene.addNewElement(imageElement);\n\n      try {\n        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      }\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      const imagePreview = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.resizeImageFile)(imageFile, {\n        maxWidthOrHeight: cursorImageSizePx\n      });\n      let previewDataURL = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.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_40__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursor)(this.interactiveCanvas, `url(${previewDataURL}) 4 4, auto`);\n      }\n    };\n\n    this.onImageAction = async ({\n      insertOnCanvasDirectly\n    } = {\n      insertOnCanvasDirectly: false\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_33__.viewportCoordsToSceneCoords)({\n          clientX,\n          clientY\n        }, this.state);\n        const imageFile = await (0,_data_filesystem__WEBPACK_IMPORTED_MODULE_42__.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        });\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_33__.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_40__.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_66__.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_40__.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.informMutation();\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_41___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.scene);\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.scene);\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_39__.getFileFromEvent)(event);\n      const {\n        x: sceneX,\n        y: sceneY\n      } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)(event, this.state);\n\n      try {\n        if ((0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.isSupportedImageFile)(file)) {\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                commitToHistory: true\n              }));\n              return;\n            } catch (error) {\n              if (error.name !== \"EncodingError\") {\n                throw error;\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_39__.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        // atetmpt 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_34__.embeddableURLValidator)(text, this.props.validateEmbeddable) && (/^(http|https):\\/\\/[^\\s/$.?#].[^\\s]*$/.test(text) || ((_d = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_34__.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_39__.normalizeFile)(file);\n\n      try {\n        const ret = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.loadSceneOrLibraryFromBlob)(file, this.state, this.scene.getElementsIncludingDeleted(), fileHandle);\n\n        if (ret.type === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.excalidraw) {\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            commitToHistory: true\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_33__.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 isHittignCommonBoundBox = this.isHittingCommonBoundingBoxOfSelectedElements({\n        x,\n        y\n      }, selectedElements);\n      const type = element || isHittignCommonBoundBox ? \"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, this.scene) : 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_33__.distance)(pointerDownState.origin.x, pointerCoords.x), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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_58__.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        });\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_33__.distance)(pointerDownState.originInGrid.x, gridX), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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);\n        this.maybeSuggestBindingForAll([draggingElement]); // highlight elements that are to be added to frames on frames creation\n\n        if (this.state.activeTool.type === \"frame\") {\n          this.setState({\n            elementsToHighlight: (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getElementsInResizingFrame)(this.scene.getNonDeletedElements(), draggingElement, this.state)\n          });\n        }\n      }\n    };\n\n    this.maybeHandleResize = (pointerDownState, event) => {\n      const selectedElements = this.scene.getSelectedElements(this.state);\n      const selectedFrames = selectedElements.filter(element => element.type === \"frame\");\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__.getFrameElements)(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_58__.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, transformHandleType, selectedElements, pointerDownState.resize.arrowDirection, (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldRotateWithDiscreteAngle)(event), (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldResizeFromCenter)(event), selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isImageElement)(selectedElements[0]) ? !(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, this.state)) {\n        this.maybeSuggestBindingForAll(selectedElements);\n        const elementsToHighlight = new Set();\n        selectedFrames.forEach(frame => {\n          const elementsInFrame = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getFrameElements)(this.scene.getNonDeletedElements(), frame.id); // keep elements' positions relative to their frames on frames resizing\n\n          if (transformHandleType) {\n            if (transformHandleType.includes(\"w\")) {\n              elementsInFrame.forEach(element => {\n                var _a, _b;\n\n                (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n                  x: frame.x + (((_a = frameElementsOffsetsMap.get(frame.id + element.id)) === null || _a === void 0 ? void 0 : _a.x) || 0),\n                  y: frame.y + (((_b = frameElementsOffsetsMap.get(frame.id + element.id)) === null || _b === void 0 ? void 0 : _b.y) || 0)\n                });\n              });\n            }\n\n            if (transformHandleType.includes(\"n\")) {\n              elementsInFrame.forEach(element => {\n                var _a, _b;\n\n                (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n                  x: frame.x + (((_a = frameElementsOffsetsMap.get(frame.id + element.id)) === null || _a === void 0 ? void 0 : _a.x) || 0),\n                  y: frame.y + (((_b = frameElementsOffsetsMap.get(frame.id + element.id)) === null || _b === void 0 ? void 0 : _b.y) || 0)\n                });\n              });\n            }\n          }\n\n          (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getElementsInResizingFrame)(this.scene.getNonDeletedElements(), frame, this.state).forEach(element => elementsToHighlight.add(element));\n        });\n        this.setState({\n          elementsToHighlight: [...elementsToHighlight]\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_38__.actionToggleViewMode, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleStats];\n        }\n\n        return [_actions_actionClipboard__WEBPACK_IMPORTED_MODULE_53__.actionPaste, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.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_35__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionSelectAll, _actions_actionElementLock__WEBPACK_IMPORTED_MODULE_49__.actionUnlockAllElements, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.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_38__.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 [_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_35__.CONTEXT_MENU_SEPARATOR, ...options, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionCopyStyles, _actions__WEBPACK_IMPORTED_MODULE_5__.actionPasteStyles, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionGroup, _actions__WEBPACK_IMPORTED_MODULE_5__.actionUnbindText, _actions__WEBPACK_IMPORTED_MODULE_5__.actionBindText, _actions_actionBoundText__WEBPACK_IMPORTED_MODULE_59__.actionWrapTextInContainer, _actions__WEBPACK_IMPORTED_MODULE_5__.actionUngroup, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionAddToLibrary, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.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_35__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionFlipHorizontal, _actions__WEBPACK_IMPORTED_MODULE_5__.actionFlipVertical, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.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_35__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionDeleteSelected];\n    };\n\n    this.handleWheel = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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 pointer = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)({\n        clientX: x,\n        clientY: y\n      }, this.state);\n\n      if (isNaN(pointer.x) || isNaN(pointer.y)) {// sometimes the pointer goes off screen\n      }\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_33__.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      excalidrawRef,\n      viewModeEnabled = false,\n      zenModeEnabled = false,\n      gridModeEnabled = false,\n      objectsSnapModeEnabled = false,\n      theme = defaultAppState.theme,\n      name = defaultAppState.name,\n      initState //zsviczian\n\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_68__.nanoid)();\n    this.library = new _data_library__WEBPACK_IMPORTED_MODULE_14__[\"default\"](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_65__.Renderer(this.scene);\n\n    if (excalidrawRef) {\n      const readyPromise = \"current\" in excalidrawRef && ((_a = excalidrawRef.current) === null || _a === void 0 ? void 0 : _a.readyPromise) || (0,_utils__WEBPACK_IMPORTED_MODULE_33__.resolvablePromise)();\n      const api = {\n        ready: true,\n        readyPromise,\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        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) //zsviczian\n\n      };\n\n      if (typeof excalidrawRef === \"function\") {\n        excalidrawRef(api);\n      } else {\n        excalidrawRef.current = api;\n      }\n\n      readyPromise.resolve(api);\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      onSceneUpdated: this.onSceneUpdated\n    });\n    this.history = new _history__WEBPACK_IMPORTED_MODULE_24__[\"default\"]();\n    this.actionManager = new _actions_manager__WEBPACK_IMPORTED_MODULE_7__.ActionManager(this.syncActionResult, () => this.state, () => this.scene.getElementsIncludingDeleted(), this);\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));\n    this.actionManager.registerAction((0,_actions_actionHistory__WEBPACK_IMPORTED_MODULE_6__.createRedoAction)(this.history));\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  updateEmbeddableRef(id, ref) {\n    if (ref) {\n      this.iFrameRefs.set(id, ref);\n    }\n  }\n\n  getHTMLIFrameElement(id) {\n    return this.iFrameRefs.get(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    const iframe = this.getHTMLIFrameElement(element.id);\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  isEmbeddableCenter(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) && !!el.validated);\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;\n\n        const {\n          x,\n          y\n        } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.sceneCoordsToViewportCoords)({\n          sceneX: el.x,\n          sceneY: el.y\n        }, this.state);\n        const embedLink = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_34__.getEmbedLink)((0,_data_url__WEBPACK_IMPORTED_MODULE_47__.toValidURL)(el.link || \"\"));\n        const isVisible = (0,_element_sizeHelpers__WEBPACK_IMPORTED_MODULE_27__.isElementInViewport)(el, normalizedWidth, normalizedHeight, this.state);\n        const isActive = ((_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) === \"active\";\n        const isHovered = ((_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) === \"hover\";\n        const isWebview = //zsviczian\n        this.props.renderWebview && (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) !== \"document\" && !((_f = (_e = embedLink === null || embedLink === void 0 ? void 0 : embedLink.link) === null || _e === void 0 ? void 0 : _e.startsWith) === null || _f === void 0 ? void 0 : _f.call(_e, \"https://player.vimeo.com\"));\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) scale(${scale})` : \"none\",\n            display: isVisible ? \"block\" : \"none\",\n            opacity: el.opacity / 100,\n            [\"--embeddable-radius\"]: `${(0,_math__WEBPACK_IMPORTED_MODULE_28__.getCornerRadius)(Math.min(el.width, el.height), el)}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}px` : 0,\n              height: isVisible ? `${el.height}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}px`\n              }\n            }, {\n              children: (_j = (_h = (_g = this.props).renderEmbeddable) === null || _h === void 0 ? void 0 : _h.call(_g, el, this.state)) !== null && _j !== void 0 ? _j : isWebview ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"webview\", {\n                ref: ref => this.updateEmbeddableRef(el.id, ref),\n                className: \"excalidraw__embeddable\",\n                src: (_k = embedLink === null || embedLink === void 0 ? void 0 : embedLink.link) !== null && _k !== void 0 ? _k : \"\",\n                title: \"Excalidraw Embedded Content\",\n                allowFullScreen: true\n              }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"iframe\", {\n                ref: ref => this.updateEmbeddableRef(el.id, ref),\n                className: \"excalidraw__embeddable\",\n                srcDoc: (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) === \"document\" ? embedLink.srcdoc(this.state.theme) : undefined,\n                src: (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) !== \"document\" ? (_l = embedLink === null || embedLink === void 0 ? void 0 : embedLink.link) !== null && _l !== void 0 ? _l : \"\" : 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: \"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  render() {\n    var _a, _b, _c, _d, _e, _f;\n\n    const selectedElements = this.scene.getSelectedElements(this.state);\n    const {\n      renderTopRightUI,\n      renderCustomStats\n    } = this.props;\n    const versionNonce = this.scene.getVersionNonce();\n    const {\n      canvasElements,\n      visibleElements\n    } = this.renderer.getRenderableElements({\n      versionNonce,\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    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.isMobile || !(this.state.viewModeEnabled || this.state.zenModeEnabled) && this.state.trayModeEnabled //zsviczian\n\n      }),\n      style: {\n        [\"--ui-pointerEvents\"]: this.state.selectionElement || this.state.draggingElement || this.state.resizingElement || this.state.editingElement && !(0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(this.state.editingElement) ? _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.disabled : _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.enabled\n      },\n      ref: this.excalidrawContainerRef,\n      onDrop: this.handleAppOnDrop,\n      tabIndex: 0,\n      onKeyDown: this.props.handleKeyboardGlobally ? undefined : this.onKeyDown\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__.jsxs)(_LayerUI__WEBPACK_IMPORTED_MODULE_36__[\"default\"], Object.assign({\n                        canvas: this.canvas,\n                        interactiveCanvas: this.interactiveCanvas,\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                        onImageAction: this.onImageAction,\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                      }, {\n                        children: [this.props.children, this.state.activeTool.type === \"mermaid\" && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_MermaidToExcalidraw__WEBPACK_IMPORTED_MODULE_67__[\"default\"], {\n                          selectedElements: this.scene.getSelectedElements(this.state)\n                        })]\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                      }), selectedElements.length === 1 && !this.state.contextMenu && this.state.showHyperlinkPopup && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_element_Hyperlink__WEBPACK_IMPORTED_MODULE_46__.Hyperlink, {\n                        element: selectedElements[0],\n                        setAppState: this.setAppState,\n                        onLinkOpen: this.props.onLinkOpen,\n                        setToast: this.setToast\n                      }, selectedElements[0].id), this.state.toast !== null && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Toast__WEBPACK_IMPORTED_MODULE_37__.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_35__.ContextMenu, {\n                        items: this.state.contextMenu.items,\n                        top: this.state.contextMenu.top,\n                        left: this.state.contextMenu.left,\n                        actionManager: this.actionManager\n                      }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_canvases__WEBPACK_IMPORTED_MODULE_64__.StaticCanvas, {\n                        canvas: this.canvas,\n                        rc: this.rc,\n                        elements: canvasElements,\n                        visibleElements: visibleElements,\n                        versionNonce: versionNonce,\n                        selectionNonce: (_b = this.state.selectionElement) === null || _b === void 0 ? void 0 : _b.versionNonce,\n                        scale: window.devicePixelRatio,\n                        appState: this.state,\n                        renderConfig: {\n                          imageCache: this.imageCache,\n                          isExporting: false,\n                          renderGrid: true\n                        }\n                      }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_canvases__WEBPACK_IMPORTED_MODULE_64__.InteractiveCanvas, {\n                        containerRef: this.excalidrawContainerRef,\n                        canvas: this.interactiveCanvas,\n                        elements: canvasElements,\n                        visibleElements: visibleElements,\n                        selectedElements: selectedElements,\n                        versionNonce: versionNonce,\n                        selectionNonce: (_c = this.state.selectionElement) === null || _c === void 0 ? void 0 : _c.versionNonce,\n                        scale: window.devicePixelRatio,\n                        appState: this.state,\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.renderFrameNames(), ((_d = this.state.activeEmbeddable) === null || _d === void 0 ? void 0 : _d.state) === \"active\" && ( //zsviczian\n                      (_f = (_e = this.props).renderEmbeddableMenu) === null || _f === void 0 ? void 0 : _f.call(_e, this.state))]\n                    })), this.renderEmbeddables()]\n                  }))\n                }))\n              }))\n            }))\n          }))\n        }))\n      }))\n    }));\n  }\n\n  async componentDidMount() {\n    var _a, _b;\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      });\n    }\n\n    this.scene.addCallback(this.onSceneUpdated);\n    this.addEventListeners();\n\n    if (this.props.autoFocus && this.excalidrawContainerRef.current) {\n      this.focusContainer();\n    }\n\n    if (this.excalidrawContainerRef.current && // 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_33__.isTestEnv)()) {\n      this.refreshDeviceState(this.excalidrawContainerRef.current);\n    }\n\n    if (\"ResizeObserver\" in window && ((_a = this.excalidrawContainerRef) === null || _a === void 0 ? void 0 : _a.current)) {\n      this.resizeObserver = new ResizeObserver(() => {\n        // recompute device dimensions state\n        // ---------------------------------------------------------------------\n        this.refreshDeviceState(this.excalidrawContainerRef.current); // refresh offsets\n        // ---------------------------------------------------------------------\n\n        this.updateDOMRect();\n      });\n      (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(this.excalidrawContainerRef.current);\n    } else if (window.matchMedia) {\n      const mdScreenQuery = window.matchMedia(`(max-width: ${_constants__WEBPACK_IMPORTED_MODULE_12__.MQ_MAX_WIDTH_PORTRAIT}px), (max-height: ${_constants__WEBPACK_IMPORTED_MODULE_12__.MQ_MAX_HEIGHT_LANDSCAPE}px) and (max-width: ${_constants__WEBPACK_IMPORTED_MODULE_12__.MQ_MAX_WIDTH_LANDSCAPE}px)`);\n      const smScreenQuery = window.matchMedia(`(max-width: ${_constants__WEBPACK_IMPORTED_MODULE_12__.MQ_SM_MAX_WIDTH}px)`);\n      const canDeviceFitSidebarMediaQuery = window.matchMedia(`(min-width: ${// NOTE this won't update if a different breakpoint is supplied\n      // after mount\n      this.props.UIOptions.dockedSidebarBreakpoint != null ? this.props.UIOptions.dockedSidebarBreakpoint : _constants__WEBPACK_IMPORTED_MODULE_12__.MQ_RIGHT_SIDEBAR_MIN_WIDTH}px)`);\n\n      const handler = () => {\n        this.excalidrawContainerRef.current.getBoundingClientRect();\n        this.device = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateObject)(this.device, {\n          isSmScreen: smScreenQuery.matches,\n          isMobile: mdScreenQuery.matches && this.allowMobileMode,\n          canDeviceFitSidebar: canDeviceFitSidebarMediaQuery.matches\n        });\n      };\n\n      mdScreenQuery.addListener(handler);\n\n      this.detachIsMobileMqHandler = () => mdScreenQuery.removeListener(handler);\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_43__.isMeasureTextSupported)()) {\n      this.setState({\n        errorMessage: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_BraveMeasureTextError__WEBPACK_IMPORTED_MODULE_60__[\"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.renderer = new _scene_Renderer__WEBPACK_IMPORTED_MODULE_65__.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    _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_66__.ShapeCache.destroy();\n    _snapping__WEBPACK_IMPORTED_MODULE_58__.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  }\n\n  removeEventListeners() {\n    var _a, _b, _c, _d, _e;\n\n    document.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, this.removePointer);\n    document.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.COPY, this.onCopy);\n    document.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.PASTE, this.pasteFromClipboard);\n    document.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.CUT, this.onCut);\n    (_a = this.excalidrawContainerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.WHEEL, this.onWheel);\n    (_b = this.nearestScrollableContainer) === null || _b === void 0 ? void 0 : _b.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.SCROLL, this.onScroll);\n    document.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYDOWN, this.onKeyDown, false);\n    document.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.MOUSE_MOVE, this.updateCurrentCursorPosition, false);\n    document.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYUP, this.onKeyUp);\n    window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.RESIZE, this.onResize, false);\n    window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.UNLOAD, this.onUnload, false);\n    window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.BLUR, this.onBlur, false);\n    (_c = this.excalidrawContainerRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.DRAG_OVER, this.disableEvent, false);\n    (_d = this.excalidrawContainerRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.DROP, this.disableEvent, false);\n    document.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.GESTURE_START, this.onGestureStart, false);\n    document.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.GESTURE_CHANGE, this.onGestureChange, false);\n    document.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.GESTURE_END, this.onGestureEnd, false);\n    (_e = this.detachIsMobileMqHandler) === null || _e === void 0 ? void 0 : _e.call(this);\n    window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.MESSAGE, this.onWindowMessage, false);\n  }\n\n  addEventListeners() {\n    var _a, _b, _c, _d, _e;\n\n    this.removeEventListeners();\n    window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.MESSAGE, this.onWindowMessage, false);\n    document.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, this.removePointer); // #3553\n\n    document.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.COPY, this.onCopy);\n    (_a = this.excalidrawContainerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.WHEEL, this.onWheel, {\n      passive: false\n    });\n\n    if (this.props.handleKeyboardGlobally) {\n      document.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYDOWN, this.onKeyDown, false);\n    }\n\n    document.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYUP, this.onKeyUp, {\n      passive: true\n    });\n    document.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.MOUSE_MOVE, this.updateCurrentCursorPosition); // rerender text elements on font load to fix #637 && #1553\n\n    (_c = (_b = document.fonts) === null || _b === void 0 ? void 0 : _b.addEventListener) === null || _c === void 0 ? void 0 : _c.call(_b, \"loadingdone\", event => {\n      const loadedFontFaces = event.fontfaces;\n      this.fonts.onFontsLoaded(loadedFontFaces);\n    }); // Safari-only desktop pinch zoom\n\n    document.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.GESTURE_START, this.onGestureStart, false);\n    document.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.GESTURE_CHANGE, this.onGestureChange, false);\n    document.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.GESTURE_END, this.onGestureEnd, false);\n\n    if (this.state.viewModeEnabled) {\n      return;\n    }\n\n    document.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.PASTE, this.pasteFromClipboard);\n    document.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.CUT, this.onCut);\n\n    if (this.props.detectScroll) {\n      this.nearestScrollableContainer = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.getNearestScrollableContainer)(this.excalidrawContainerRef.current);\n      this.nearestScrollableContainer.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.SCROLL, this.onScroll);\n    }\n\n    window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.RESIZE, this.onResize, false);\n    window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.UNLOAD, this.onUnload, false);\n    window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.BLUR, this.onBlur, false);\n    (_d = this.excalidrawContainerRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.DRAG_OVER, this.disableEvent, false);\n    (_e = this.excalidrawContainerRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.DROP, this.disableEvent, false);\n  }\n\n  componentDidUpdate(prevProps, prevState) {\n    var _a, _b, _c, _d, _e, _f;\n\n    this.updateEmbeddables();\n\n    if (!this.state.showWelcomeScreen && !this.scene.getElementsIncludingDeleted().length) {\n      this.setState({\n        showWelcomeScreen: true\n      });\n    }\n\n    if (this.excalidrawContainerRef.current && prevProps.UIOptions.dockedSidebarBreakpoint !== this.props.UIOptions.dockedSidebarBreakpoint) {\n      this.refreshDeviceState(this.excalidrawContainerRef.current);\n    }\n\n    if (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);\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_33__.updateActiveTool)(this.state, {\n          type: \"selection\"\n        })\n      });\n    }\n\n    if (this.state.activeTool.type === \"eraser\" && prevState.theme !== this.state.theme) {\n      (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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 (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    if (this.props.name && prevProps.name !== this.props.name) {\n      this.setState({\n        name: this.props.name\n      });\n    }\n\n    (_c = this.excalidrawContainerRef.current) === null || _c === void 0 ? void 0 : _c.classList.toggle(\"theme--dark\", this.state.theme === \"dark\");\n\n    if (this.state.editingLinearElement && !this.state.selectedElementIds[this.state.editingLinearElement.elementId]) {\n      // defer so that the commitToHistory 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, this.scene, (0,_utils__WEBPACK_IMPORTED_MODULE_33__.tupleToCoors)(_element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.getPointAtIndexGlobalCoordinates(multiElement, -1)));\n    }\n\n    this.history.record(this.state, this.scene.getElementsIncludingDeleted()); // 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, this.scene.getElementsIncludingDeleted(), this.state, this.files);\n    }\n  }\n\n  static resetTapTwice() {\n    didTapTwice = false;\n  }\n\n  addTextFromPaste(text, isPlainPaste = false) {\n    const {\n      x,\n      y\n    } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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: this.state.currentItemFontSize,\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_43__.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_43__.getLineHeightInPx)(textElementProps.fontSize, lineHeight) + LINE_GAP;\n        }\n      }\n\n      return acc;\n    }, []);\n\n    if (textElements.length === 0) {\n      return;\n    }\n\n    const frameId = textElements[0].frameId;\n\n    if (frameId) {\n      this.scene.insertElementsAtIndex(textElements, this.scene.getElementIndex(frameId));\n    } else {\n      this.scene.replaceAllElements([...this.scene.getElementsIncludingDeleted(), ...textElements]);\n    }\n\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.isMobile) {\n      this.setToast({\n        message: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"toast.pasteAsSingleElement\", {\n          shortcut: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.getShortcutKey)(\"CtrlOrCmd+Shift+V\")\n        }),\n        duration: 5000\n      });\n      PLAIN_PASTE_TOAST_SHOWN = true;\n    }\n\n    this.history.resumeRecording();\n  }\n\n  handleTextWysiwyg(element, {\n    isExistingElement = false\n  }) {\n    const updateElement = (text, originalText, isDeleted, rawText, link) => {\n      this.scene.replaceAllElements([...this.scene.getElementsIncludingDeleted().map(_element => {\n        if (_element.id === element.id && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(_element)) {\n          return (0,_element__WEBPACK_IMPORTED_MODULE_16__.updateTextElement)(_element, {\n            text,\n            isDeleted,\n            originalText,\n            rawText: rawText !== null && rawText !== void 0 ? rawText : originalText,\n            link\n          });\n        }\n\n        return _element;\n      })]);\n    };\n\n    if (isExistingElement && this.props.onBeforeTextEdit) {\n      const text = this.props.onBeforeTextEdit(element);\n\n      if (text) {\n        this.scene.replaceAllElements([...this.scene.getElementsIncludingDeleted().map(_element => {\n          if (_element.id === element.id && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(_element)) {\n            element = (0,_element__WEBPACK_IMPORTED_MODULE_16__.updateTextElement)(_element, {\n              text,\n              isDeleted: false,\n              originalText: text\n            });\n            return element;\n          }\n\n          return _element;\n        })]);\n      }\n    }\n\n    (0,_element__WEBPACK_IMPORTED_MODULE_16__.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_33__.sceneCoordsToViewportCoords)({\n          sceneX: x,\n          sceneY: y\n        }, this.state);\n        return [viewportX - this.state.offsetLeft, viewportY - this.state.offsetTop];\n      },\n      onChange: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(text => {\n        updateElement(text, text, false);\n\n        if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isNonDeletedElement)(element)) {\n          (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.updateBoundElements)(element);\n        }\n      }),\n      onSubmit: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(({\n        text,\n        viaKeyboard,\n        originalText\n      }) => {\n        const isDeleted = !text.trim();\n        const rawText = originalText; //should this be originalText??\n\n        let link = undefined;\n\n        if (this.props.onBeforeTextSubmit) {\n          const [updatedText, updatedOriginalText, l] = this.props.onBeforeTextSubmit(element, text, originalText, isDeleted);\n          text = updatedText !== null && updatedText !== void 0 ? updatedText : text;\n          originalText = updatedOriginalText !== null && updatedOriginalText !== void 0 ? updatedOriginalText : originalText;\n          link = l;\n        }\n\n        updateElement(text, originalText, isDeleted, rawText, link); // 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.history.resumeRecording();\n        }\n\n        this.setState({\n          draggingElement: null,\n          editingElement: null\n        });\n\n        if (this.state.activeTool.locked) {\n          (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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.text, 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\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__WEBPACK_IMPORTED_MODULE_16__.isHittingElementBoundingBoxWithoutHittingElement)(elementWithHighestZIndex, this.state, this.frameNameBoundsCache, x, y) ? allHitElements[allHitElements.length - 2] : elementWithHighestZIndex;\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 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)));\n    return (0,_scene__WEBPACK_IMPORTED_MODULE_29__.getElementsAtPosition)(elements, element => (0,_element__WEBPACK_IMPORTED_MODULE_16__.hitTest)(element, this.state, this.frameNameBoundsCache, x, y)).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);\n      return containingFrame && this.state.frameRendering.enabled && this.state.frameRendering.clip ? (0,_frame__WEBPACK_IMPORTED_MODULE_51__.isCursorInFrame)({\n        x,\n        y\n      }, containingFrame) : true;\n    });\n  }\n\n  handleHoverSelectedLinearElement(linearElementEditor, scenePointerX, scenePointerY) {\n    const element = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.getElement(linearElementEditor.elementId);\n    const boundTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getBoundTextElement)(element);\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_44__.isHittingElementNotConsideringBoundingBox)(element, this.state, this.frameNameBoundsCache, [scenePointerX, scenePointerY])) {\n        hoverPointIndex = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.getPointIndexUnderCursor(element, 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);\n\n        if (hoverPointIndex >= 0 || segmentMidPointHoveredCoords) {\n          (0,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n        } else {\n          (0,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.MOVE);\n        }\n      } else if ((0,_element_transformHandles__WEBPACK_IMPORTED_MODULE_48__.shouldShowBoundingBox)([element], this.state) && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isHittingElementBoundingBoxWithoutHittingElement)(element, this.state, this.frameNameBoundsCache, scenePointerX, scenePointerY)) {\n        (0,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.MOVE);\n      } else if (boundTextElement && (0,_element__WEBPACK_IMPORTED_MODULE_16__.hitTest)(boundTextElement, this.state, this.frameNameBoundsCache, scenePointerX, scenePointerY)) {\n        (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.AUTO);\n    }\n  }\n\n  maybeCleanupAfterMissingPointerUp(event) {\n    if (lastPointerUp !== null) {\n      // Unfortunately, sometimes we don't get a pointerup after a pointerdown,\n      // this can happen when a contextual menu or alert is triggered. In order to avoid\n      // being in a weird state, we clean up on the next pointerdown\n      lastPointerUp(event);\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_33__.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_33__.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__WEBPACK_IMPORTED_MODULE_29__.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      elementIdsToErase: {}\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,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(() => {\n      isDraggingScrollBar = false;\n      (0,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursorForShape)(this.interactiveCanvas, this.state);\n      lastPointerUp = null;\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 = 10 / this.state.zoom.value;\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_58__.isSnappingEnabled)({\n      event,\n      appState: this.state,\n      selectedElements\n    }) && (recomputeAnyways || !_snapping__WEBPACK_IMPORTED_MODULE_58__.SnapCache.getReferenceSnapPoints())) {\n      _snapping__WEBPACK_IMPORTED_MODULE_58__.SnapCache.setReferenceSnapPoints((0,_snapping__WEBPACK_IMPORTED_MODULE_58__.getReferenceSnapPoints)(this.scene.getNonDeletedElements(), selectedElements, this.state));\n    }\n  }\n\n  maybeCacheVisibleGaps(event, selectedElements, recomputeAnyways = false) {\n    if ((0,_snapping__WEBPACK_IMPORTED_MODULE_58__.isSnappingEnabled)({\n      event,\n      appState: this.state,\n      selectedElements\n    }) && (recomputeAnyways || !_snapping__WEBPACK_IMPORTED_MODULE_58__.SnapCache.getVisibleGaps())) {\n      _snapping__WEBPACK_IMPORTED_MODULE_58__.SnapCache.setVisibleGaps((0,_snapping__WEBPACK_IMPORTED_MODULE_58__.getVisibleGaps)(this.scene.getNonDeletedElements(), selectedElements, this.state));\n    }\n  }\n\n  onKeyDownFromPointerDownHandler(pointerDownState) {\n    return (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdatesThrottled)(event => {\n      var _a, _b; // 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_33__.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_33__.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      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      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)) {\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]);\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);\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__.isFrameElement)(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_58__.snapDraggedElements)((0,_scene__WEBPACK_IMPORTED_MODULE_29__.getSelectedElements)(originalElements, this.state), dragOffset, this.state, event);\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.maybeSuggestBindingForAll(selectedElements); // 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,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.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)); // 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);\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], this.scene) : 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,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(childEvent => {\n      var _a, _b, _c, _d, _e, _f;\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({\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: [],\n        originSnapOffset: null\n      });\n      _snapping__WEBPACK_IMPORTED_MODULE_58__.SnapCache.setReferenceSnapPoints(null);\n      _snapping__WEBPACK_IMPORTED_MODULE_58__.SnapCache.setVisibleGaps(null);\n      this.savePointer(childEvent.clientX, childEvent.clientY, \"up\");\n      this.setState({\n        selectedElementsAreBeingDragged: false\n      }); // 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);\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);\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);\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      lastPointerUp = null;\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      if ((draggingElement === null || draggingElement === void 0 ? void 0 : draggingElement.type) === \"freedraw\") {\n        const pointerCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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.history.resumeRecording();\n        }\n\n        const pointerCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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, this.scene, pointerCoords);\n          }\n\n          this.setState({\n            suggestedBindings: [],\n            startBoundElement: null\n          });\n\n          if (!activeTool.locked) {\n            (0,_utils__WEBPACK_IMPORTED_MODULE_33__.resetCursor)(this.interactiveCanvas);\n            this.setState(prevState => ({\n              draggingElement: null,\n              activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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, this.scene)\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        if (draggingElement.type !== \"selection\") {\n          //zsviczian (mermaid link click fix)\n          this.scene.replaceAllElements(this.scene.getElementsIncludingDeleted().slice(0, -1));\n        }\n\n        this.setState({\n          draggingElement: null\n        });\n        return;\n      }\n\n      if (draggingElement) {\n        if (pointerDownState.drag.hasOccurred) {\n          const sceneCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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);\n\n              if (frame && linearElement) {\n                if (!(0,_frame__WEBPACK_IMPORTED_MODULE_51__.elementOverlapsWithFrame)(linearElement, frame)) {\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                  this.scene.replaceAllElements((0,_frame__WEBPACK_IMPORTED_MODULE_51__.removeElementsFromFrame)(this.scene.getElementsIncludingDeleted(), [linearElement], this.state));\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.getElementsIncludingDeleted();\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 (draggingElement.type === \"frame\") {\n          const elementsInsideFrame = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getElementsInNewFrame)(this.scene.getElementsIncludingDeleted(), draggingElement);\n          this.scene.replaceAllElements((0,_frame__WEBPACK_IMPORTED_MODULE_51__.addElementsToFrame)(this.scene.getElementsIncludingDeleted(), 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.history.resumeRecording();\n      }\n\n      if (resizingElement && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isInvisiblySmallElement)(resizingElement)) {\n        this.scene.replaceAllElements(this.scene.getElementsIncludingDeleted().filter(el => el.id !== resizingElement.id));\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 => element.type === \"frame\");\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), frame, this.state);\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 (((_e = this.state.selectedLinearElement) === null || _e === void 0 ? void 0 : _e.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, this.scene)\n          });\n        }\n      }\n\n      if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state)) {\n        const draggedDistance = (0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(this.lastPointerDown.clientX, this.lastPointerDown.clientY, this.lastPointerUp.clientX, this.lastPointerUp.clientY);\n\n        if (draggedDistance === 0) {\n          const scenePointer = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)({\n            clientX: this.lastPointerUp.clientX,\n            clientY: this.lastPointerUp.clientY\n          }, this.state);\n          const hitElements = this.getElementsAtPosition(scenePointer.x, scenePointer.y);\n          hitElements.forEach(hitElement => pointerDownState.elementIdsToErase[hitElement.id] = {\n            erase: true,\n            opacity: hitElement.opacity\n          });\n        }\n\n        this.eraseElements(pointerDownState);\n        return;\n      } else if (Object.keys(pointerDownState.elementIdsToErase).length) {\n        this.restoreReadyToEraseElements(pointerDownState);\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 gragging a linear element point (outside editor)\n            } else if (!((_f = this.state.selectedLinearElement) === null || _f === void 0 ? void 0 : _f.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], this.scene) : 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, this.scene) : prevState.selectedLinearElement\n            });\n          });\n        }\n      }\n\n      if (!pointerDownState.drag.hasOccurred && !this.state.isResizing && (hitElement && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isHittingElementBoundingBoxWithoutHittingElement)(hitElement, this.state, this.frameNameBoundsCache, pointerDownState.origin.x, pointerDownState.origin.y) || !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        }\n\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)) {\n        this.history.resumeRecording();\n      }\n\n      if (pointerDownState.drag.hasOccurred || isResizing || isRotating) {\n        ((0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.isBindingEnabled)(this.state) ? _element_binding__WEBPACK_IMPORTED_MODULE_17__.bindOrUnbindSelectedElements : _element_binding__WEBPACK_IMPORTED_MODULE_17__.unbindLinearElements)(this.scene.getSelectedElements(this.state));\n      }\n\n      if (!activeTool.locked && activeTool.type !== \"freedraw\") {\n        (0,_utils__WEBPACK_IMPORTED_MODULE_33__.resetCursor)(this.interactiveCanvas);\n        this.setState({\n          draggingElement: null,\n          suggestedBindings: [],\n          activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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.lastPointerUp && this.lastPointerDown && this.lastPointerUp.timeStamp - this.lastPointerDown.timeStamp < 300 && gesture.pointers.size <= 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(hitElement) && this.isEmbeddableCenter(hitElement, this.lastPointerUp, pointerDownState.origin.x, pointerDownState.origin.y)) {\n        this.handleEmbeddableCenterClick(hitElement);\n      }\n    });\n  }\n\n  maybeSuggestBindingForAll(selectedElements) {\n    if (selectedElements.length > 50) {\n      return;\n    }\n\n    const suggestedBindings = (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getEligibleElementsForBinding)(selectedElements);\n    this.setState({\n      suggestedBindings\n    });\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_43__.getContainerCenter)(container, appState);\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_33__.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\nApp.defaultProps = {\n  // needed for tests to pass since we directly render App in many tests\n  UIOptions: _constants__WEBPACK_IMPORTED_MODULE_12__.DEFAULT_UI_OPTIONS\n};\n\nif (\"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(elements);\n      }\n\n    }\n  });\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (App);\n\n//# sourceURL=webpack://ExcalidrawLib/../../components/App.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"ExcalidrawContainerContext\": () => (/* binding */ ExcalidrawContainerContext),\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\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_68__ = __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__WEBPACK_IMPORTED_MODULE_33__ = __webpack_require__(/*! ../utils */ \"../../utils.ts\");\n/* harmony import */ var _element_embeddable__WEBPACK_IMPORTED_MODULE_34__ = __webpack_require__(/*! ../element/embeddable */ \"../../element/embeddable.ts\");\n/* harmony import */ var _ContextMenu__WEBPACK_IMPORTED_MODULE_35__ = __webpack_require__(/*! ./ContextMenu */ \"../../components/ContextMenu.tsx\");\n/* harmony import */ var _LayerUI__WEBPACK_IMPORTED_MODULE_36__ = __webpack_require__(/*! ./LayerUI */ \"../../components/LayerUI.tsx\");\n/* harmony import */ var _Toast__WEBPACK_IMPORTED_MODULE_37__ = __webpack_require__(/*! ./Toast */ \"../../components/Toast.tsx\");\n/* harmony import */ var _actions_actionToggleViewMode__WEBPACK_IMPORTED_MODULE_38__ = __webpack_require__(/*! ../actions/actionToggleViewMode */ \"../../actions/actionToggleViewMode.tsx\");\n/* harmony import */ var _data_blob__WEBPACK_IMPORTED_MODULE_39__ = __webpack_require__(/*! ../data/blob */ \"../../data/blob.ts\");\n/* harmony import */ var _element_image__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(/*! ../element/image */ \"../../element/image.ts\");\n/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_41__ = __webpack_require__(/*! lodash.throttle */ \"../../../node_modules/lodash.throttle/index.js\");\n/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_41___default = /*#__PURE__*/__webpack_require__.n(lodash_throttle__WEBPACK_IMPORTED_MODULE_41__);\n/* harmony import */ var _data_filesystem__WEBPACK_IMPORTED_MODULE_42__ = __webpack_require__(/*! ../data/filesystem */ \"../../data/filesystem.ts\");\n/* harmony import */ var _element_textElement__WEBPACK_IMPORTED_MODULE_43__ = __webpack_require__(/*! ../element/textElement */ \"../../element/textElement.ts\");\n/* harmony import */ var _element_collision__WEBPACK_IMPORTED_MODULE_44__ = __webpack_require__(/*! ../element/collision */ \"../../element/collision.ts\");\n/* harmony import */ var _element_resizeElements__WEBPACK_IMPORTED_MODULE_45__ = __webpack_require__(/*! ../element/resizeElements */ \"../../element/resizeElements.ts\");\n/* harmony import */ var _element_Hyperlink__WEBPACK_IMPORTED_MODULE_46__ = __webpack_require__(/*! ../element/Hyperlink */ \"../../element/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 _snapping__WEBPACK_IMPORTED_MODULE_58__ = __webpack_require__(/*! ../snapping */ \"../../snapping.ts\");\n/* harmony import */ var _actions_actionBoundText__WEBPACK_IMPORTED_MODULE_59__ = __webpack_require__(/*! ../actions/actionBoundText */ \"../../actions/actionBoundText.tsx\");\n/* harmony import */ var _BraveMeasureTextError__WEBPACK_IMPORTED_MODULE_60__ = __webpack_require__(/*! ./BraveMeasureTextError */ \"../../components/BraveMeasureTextError.tsx\");\n/* harmony import */ var _EyeDropper__WEBPACK_IMPORTED_MODULE_61__ = __webpack_require__(/*! ./EyeDropper */ \"../../components/EyeDropper.tsx\");\n/* harmony import */ var _data_transform__WEBPACK_IMPORTED_MODULE_62__ = __webpack_require__(/*! ../data/transform */ \"../../data/transform.ts\");\n/* harmony import */ var _Sidebar_Sidebar__WEBPACK_IMPORTED_MODULE_63__ = __webpack_require__(/*! ./Sidebar/Sidebar */ \"../../components/Sidebar/Sidebar.tsx\");\n/* harmony import */ var _canvases__WEBPACK_IMPORTED_MODULE_64__ = __webpack_require__(/*! ./canvases */ \"../../components/canvases/index.tsx\");\n/* harmony import */ var _scene_Renderer__WEBPACK_IMPORTED_MODULE_65__ = __webpack_require__(/*! ../scene/Renderer */ \"../../scene/Renderer.ts\");\n/* harmony import */ var _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_66__ = __webpack_require__(/*! ../scene/ShapeCache */ \"../../scene/ShapeCache.ts\");\n/* harmony import */ var _MermaidToExcalidraw__WEBPACK_IMPORTED_MODULE_67__ = __webpack_require__(/*! ./MermaidToExcalidraw */ \"../../components/MermaidToExcalidraw.tsx\");\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\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  isSmScreen: false,\n  isMobile: false,\n  isTouchScreen: false,\n  canDeviceFitSidebar: false,\n  isLandscape: 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(\"unitialized 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;\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    var _a;\n\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    this.lastPointerDown = null;\n    this.lastPointerUp = null;\n    this.lastViewportPosition = {\n      x: 0,\n      y: 0\n    };\n    this.allowMobileMode = true; //zsviczian\n\n    this.updateEmbeddables = () => {\n      const embeddableElements = new Map();\n      let updated = false;\n      this.scene.getNonDeletedElements().filter(element => {\n        if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(element)) {\n          embeddableElements.set(element.id, true);\n\n          if (element.validated == null) {\n            updated = true;\n            const validated = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_34__.embeddableURLValidator)(element.link, this.props.validateEmbeddable);\n            (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n              validated\n            }, false);\n            _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_66__.ShapeCache[\"delete\"](element);\n          }\n        }\n\n        return false;\n      });\n\n      if (updated) {\n        this.scene.informMutation();\n      } // GC\n\n\n      this.iFrameRefs.forEach((ref, id) => {\n        if (!embeddableElements.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_33__.viewportCoordsToSceneCoords)({\n              clientX: box.x,\n              clientY: box.y\n            }, this.state);\n            const boxSceneBottomRight = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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 === \"dark\";\n      return this.scene.getNonDeletedFrames().map((f, index) => {\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        })) {\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_33__.sceneCoordsToViewportCoords)({\n          sceneX: f.x,\n          sceneY: f.y\n        }, this.state);\n        const {\n          x: x2\n        } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.sceneCoordsToViewportCoords)({\n          sceneX: f.x + f.width,\n          sceneY: f.y + f.height\n        }, this.state);\n        const FRAME_NAME_GAP = 20;\n        const FRAME_NAME_EDIT_PADDING = 6;\n\n        const reset = () => {\n          var _a;\n\n          if (((_a = f.name) === null || _a === void 0 ? void 0 : _a.trim()) === \"\") {\n            (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(f, {\n              name: null\n            });\n          }\n\n          this.setState({\n            editingFrame: null\n          });\n        };\n\n        let frameNameJSX;\n\n        if (f.id === this.state.editingFrame) {\n          const frameNameInEdit = f.name == null ? `Frame ${(index + 1).toString().padStart(2, \"0\")}` //zsviczian\n          : f.name;\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            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 1px var(--color-primary)\",\n              fontFamily: \"Assistant\",\n              fontSize: \"14px\",\n              transform: `translateY(-${FRAME_NAME_EDIT_PADDING}px)`,\n              color: \"var(--color-gray-80)\",\n              overflow: \"hidden\",\n              maxWidth: `${Math.min(x2 - x1 - FRAME_NAME_EDIT_PADDING, document.body.clientWidth - x1 - FRAME_NAME_EDIT_PADDING)}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 = f.name == null || f.name.trim() === \"\" ? `Frame ${(index + 1).toString().padStart(2, \"0\")}` //zsviczian\n          : f.name.trim();\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            top: `${y1 - FRAME_NAME_GAP - this.state.offsetTop}px`,\n            left: `${x1 - this.state.offsetLeft - (this.state.editingFrame === f.id ? FRAME_NAME_EDIT_PADDING : 0)}px`,\n            zIndex: 2,\n            fontSize: \"14px\",\n            color: isDarkTheme ? \"var(--color-gray-60)\" : \"var(--color-gray-50)\",\n            width: \"max-content\",\n            maxWidth: `${x2 - x1 + FRAME_NAME_EDIT_PADDING * 2}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) => {\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.state.name,\n        viewBackgroundColor: this.state.viewBackgroundColor\n      }).catch(_utils__WEBPACK_IMPORTED_MODULE_33__.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_39__.isImageFileHandle)(fileHandle)) {\n        this.setState({\n          fileHandle\n        });\n      }\n    };\n\n    this.openEyeDropper = ({\n      type\n    }) => {\n      _jotai__WEBPACK_IMPORTED_MODULE_56__.jotaiStore.set(_EyeDropper__WEBPACK_IMPORTED_MODULE_61__.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                commitToHistory: true\n              });\n            } else {\n              this.syncActionResult({\n                appState: Object.assign(Object.assign({}, this.state), {\n                  currentItemBackgroundColor: color\n                }),\n                commitToHistory: true\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            });\n          }\n        },\n        keepOpenOnAlt: false\n      });\n    };\n\n    this.syncActionResult = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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        this.scene.replaceAllElements(actionResult.elements);\n\n        if (actionResult.commitToHistory) {\n          this.history.resumeRecording();\n        }\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.commitToHistory) {\n          this.history.resumeRecording();\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        let 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        if (typeof this.props.name !== \"undefined\") {\n          name = this.props.name;\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          if (actionResult.syncHistory) {\n            this.history.setCurrentState(this.state, this.scene.getElementsIncludingDeleted());\n          }\n        });\n      }\n    }); // Lifecycle\n\n    this.onBlur = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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    /**\r\n     * Resets scene & history.\r\n     * ! Do not use to clear scene user action !\r\n     */\n\n\n    this.resetScene = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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.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.resetHistory();\n      this.syncActionResult(Object.assign(Object.assign({}, scene), {\n        commitToHistory: true\n      }));\n    };\n\n    this.refreshDeviceState = container => {\n      const {\n        width,\n        height\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      this.device = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateObject)(this.device, {\n        isLandscape: width > height,\n        isSmScreen: width < _constants__WEBPACK_IMPORTED_MODULE_12__.MQ_SM_MAX_WIDTH,\n        isMobile: 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        canDeviceFitSidebar: width > sidebarBreakpoint\n      });\n    };\n\n    this.onResize = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(() => {\n      this.scene.getElementsIncludingDeleted().forEach(element => _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_66__.ShapeCache[\"delete\"](element));\n      this.setState({});\n    });\n\n    this.renderInteractiveSceneCallback = ({\n      atLeastOneVisibleElement,\n      scrollBars,\n      elements\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 && elements.length > 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_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.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_33__.isWritableElement)(event.target)) {\n        return;\n      }\n\n      this.cutAll();\n      event.preventDefault();\n      event.stopPropagation();\n    });\n    this.onCopy = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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_33__.isWritableElement)(event.target)) {\n        return;\n      }\n\n      this.copyAll();\n      event.preventDefault();\n      event.stopPropagation();\n    });\n\n    this.cutAll = () => {\n      this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionCut, \"keyboard\");\n    };\n\n    this.copyAll = () => {\n      this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionCopy, \"keyboard\");\n    };\n\n    this.onTouchStart = event => {\n      // fix for Apple Pencil Scribble\n      // On Android, preventing the event would disable contextMenu on tap-hold\n      if (!_constants__WEBPACK_IMPORTED_MODULE_12__.isAndroid) {\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 (_constants__WEBPACK_IMPORTED_MODULE_12__.isAndroid) {\n        event.preventDefault();\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,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(async event => {\n      var _a, _b, _c;\n\n      const isPlainPaste = !!(IS_PLAIN_PASTE && event); // #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_33__.isWritableElement)(target))) {\n        return;\n      } // 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\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 && data.text && !isPlainPaste) {\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_39__.SVGStringToFile)(string);\n        }\n      }\n\n      const {\n        x: sceneX,\n        y: sceneY\n      } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)({\n        clientX: this.lastViewportPosition.x,\n        clientY: this.lastViewportPosition.y\n      }, this.state); // prefer spreadsheet data over image file (MS Office/Libre Office)\n\n      if ((0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.isSupportedImageFile)(file) && !data.spreadsheet) {\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_62__.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 maybeUrl = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_34__.extractSrc)(data.text);\n\n        if (!isPlainPaste && (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_34__.embeddableURLValidator)(maybeUrl, this.props.validateEmbeddable) && (/^(http|https):\\/\\/[^\\s/$.?#].[^\\s]*$/.test(maybeUrl) || ((_c = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_34__.getEmbedLink)(maybeUrl)) === null || _c === void 0 ? void 0 : _c.type) === \"video\")) {\n          const embeddable = this.insertEmbeddableElement({\n            sceneX,\n            sceneY,\n            link: (0,_data_url__WEBPACK_IMPORTED_MODULE_47__.normalizeLink)(maybeUrl)\n          });\n\n          if (embeddable) {\n            this.setState({\n              selectedElementIds: {\n                [embeddable.id]: true\n              }\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_33__.distance)(minX, maxX) / 2;\n      const elementsCenterY = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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_33__.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 nextElements = [...this.scene.getElementsIncludingDeleted(), ...newElements];\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_43__.getContainerElement)(newElement);\n          (0,_element__WEBPACK_IMPORTED_MODULE_16__.redrawTextBoundingBox)(newElement, container);\n        }\n      });\n\n      if (opts.files) {\n        this.files = Object.assign(Object.assign({}, this.files), opts.files);\n      }\n\n      this.history.resumeRecording();\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.canDeviceFitSidebar && _jotai__WEBPACK_IMPORTED_MODULE_56__.jotaiStore.get(_Sidebar_Sidebar__WEBPACK_IMPORTED_MODULE_63__.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.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_33__.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 = () => {\n      this.setState(prevState => {\n        return {\n          penMode: !prevState.penMode\n        };\n      });\n    };\n\n    this.onHandToolToggle = () => {\n      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.cancelInProgresAnimation = null;\n\n    this.scrollToContent = (target = this.scene.getNonDeletedElements(), opts) => {\n      var _a, _b;\n\n      (_a = this.cancelInProgresAnimation) === 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_33__.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_33__.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.cancelInProgresAnimation = () => {\n          cancel();\n          this.cancelInProgresAnimation = null;\n        };\n      } else {\n        this.setState({\n          scrollX,\n          scrollY,\n          zoom\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.cancelInProgresAnimation) === null || _a === void 0 ? void 0 : _a.call(this);\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, this.scene);\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,_utils__WEBPACK_IMPORTED_MODULE_33__.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_45__.resizeSingleElement)(new Map().set(el.id, el), false, el, \"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,_utils__WEBPACK_IMPORTED_MODULE_33__.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_66__.ShapeCache[\"delete\"](element);\n        }\n      });\n      this.scene.informMutation();\n      this.addNewImagesToImageCache();\n    }); //zsviczian https://github.com/zsviczian/excalibrain/issues/9\n\n    this.setMobileModeAllowed = allow => {\n      const {\n        width,\n        height\n      } = this.excalidrawContainerRef.current.getBoundingClientRect();\n      this.allowMobileMode = allow;\n\n      if (allow) {\n        this.device = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateObject)(this.device, {\n          isMobile: 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      } else {\n        this.device = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateObject)(this.device, {\n          isMobile: false\n        });\n      }\n\n      this.forceUpdate();\n    }; //zsviczian\n\n\n    this.setLocalFont = showOnPanel => {\n      showFourthFont = showOnPanel;\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        commitToHistory: true\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,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(sceneData => {\n      if (sceneData.commitToHistory) {\n        this.history.resumeRecording();\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(sceneData.elements);\n      }\n\n      if (sceneData.collaborators) {\n        this.setState({\n          collaborators: sceneData.collaborators\n        });\n      }\n    });\n\n    this.onSceneUpdated = () => {\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;\n\n      let nextName;\n\n      if (force === undefined) {\n        nextName = ((_a = this.state.openSidebar) === null || _a === void 0 ? void 0 : _a.name) === name ? null : name;\n      } else {\n        nextName = force ? name : null;\n      }\n\n      this.setState({\n        openSidebar: nextName ? {\n          name: nextName,\n          tab\n        } : null\n      });\n      return !!nextName;\n    };\n\n    this.updateCurrentCursorPosition = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(event => {\n      this.lastViewportPosition.x = event.clientX;\n      this.lastViewportPosition.y = event.clientY;\n    }); // Input handling\n\n    this.onKeyDown = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(event => {\n      // normalize `event.key` when CapsLock is pressed #2372\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.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_33__.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_33__.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_33__.isInputLike)(event.target)) {\n        return;\n      }\n\n      if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.QUESTION_MARK) {\n        this.setState({\n          openDialog: \"help\"\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: \"imageExport\"\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 (this.state.viewModeEnabled) {\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, {\n            simultaneouslyUpdated: selectedElements\n          });\n        });\n        this.maybeSuggestBindingForAll(selectedElements);\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.history.resumeRecording();\n                this.setState({\n                  editingLinearElement: new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(selectedElement, this.scene)\n                });\n              }\n            }\n          } else if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(selectedElement) || (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.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_43__.getContainerCenter)(selectedElement, this.state);\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__.isFrameElement)(selectedElement)) {\n            this.setState({\n              editingFrame: selectedElement.id\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.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,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(event => {\n      if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.SPACE) {\n        if (this.state.viewModeEnabled) {\n          (0,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n        } else if (this.state.activeTool.type === \"selection\") {\n          (0,_utils__WEBPACK_IMPORTED_MODULE_33__.resetCursor)(this.interactiveCanvas);\n        } else {\n          (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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        const selectedElements = this.scene.getSelectedElements(this.state);\n        (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.isBindingEnabled)(this.state) ? (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.bindOrUnbindSelectedElements)(selectedElements) : (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.unbindLinearElements)(selectedElements);\n        this.setState({\n          suggestedBindings: []\n        });\n      }\n    });\n\n    this.setActiveTool = tool => {\n      const nextActiveTool = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateActiveTool)(this.state, tool);\n\n      if (nextActiveTool.type === \"hand\") {\n        (0,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n      } else if (!isHoldingSpace) {\n        (0,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursorForShape)(this.interactiveCanvas, this.state);\n      }\n\n      if ((0,_utils__WEBPACK_IMPORTED_MODULE_33__.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      }\n\n      if (nextActiveTool.type !== \"selection\") {\n        this.setState(prevState => ({\n          activeTool: nextActiveTool,\n          selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_52__.makeNextSelectedElementIds)(nextActiveTool.type === \"mermaid\" //zsviczian\n          ? this.state.selectedElementIds : {}, this.state),\n          selectedGroupIds: {},\n          editingGroupId: null,\n          snapLines: [],\n          originSnapOffset: null\n        }));\n      } else {\n        this.setState({\n          activeTool: nextActiveTool,\n          snapLines: [],\n          originSnapOffset: null,\n          activeEmbeddable: null\n        });\n      }\n    };\n\n    this.setCursor = cursor => {\n      (0,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursor)(this.interactiveCanvas, cursor);\n    };\n\n    this.resetCursor = () => {\n      (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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    }; // fires only on Safari\n\n\n    this.onGestureStart = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.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_43__.getBoundTextElement)(container);\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_43__.getBoundTextElement)(selectedElements[0]);\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_43__.getDefaultLineHeight)(fontFamily);\n      const fontSize = this.state.currentItemFontSize;\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_43__.getApproxMinLineWidth)((0,_utils__WEBPACK_IMPORTED_MODULE_33__.getFontString)(fontString), lineHeight);\n        const minHeight = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.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.addNewElement(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      } // 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.history.resumeRecording();\n          this.setState({\n            editingLinearElement: new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(selectedElements[0], this.scene)\n          });\n          return;\n        } else if (this.state.editingLinearElement && this.state.editingLinearElement.elementId === selectedElements[0].id) {\n          return;\n        }\n      }\n\n      (0,_utils__WEBPACK_IMPORTED_MODULE_33__.resetCursor)(this.interactiveCanvas);\n      let {\n        x: sceneX,\n        y: sceneY\n      } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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.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,_utils__WEBPACK_IMPORTED_MODULE_33__.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__.isEmbeddableElement)(hitElement)) {\n          this.setState({\n            activeEmbeddable: {\n              element: hitElement,\n              state: \"active\"\n            }\n          });\n          return;\n        }\n\n        const container = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getTextBindableContainerAtPosition)(this.scene.getNonDeletedElements(), this.state, sceneX, sceneY);\n\n        if (container) {\n          if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.hasBoundTextElement)(container) || !(0,_utils__WEBPACK_IMPORTED_MODULE_33__.isTransparent)(container.backgroundColor) || (0,_element_collision__WEBPACK_IMPORTED_MODULE_44__.isHittingElementNotConsideringBoundingBox)(container, this.state, this.frameNameBoundsCache, [sceneX, sceneY])) {\n            const midPoint = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getContainerCenter)(container, this.state);\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,_element_Hyperlink__WEBPACK_IMPORTED_MODULE_46__.isPointHittingLink)(element, this.state, [scenePointer.x, scenePointer.y], this.device.isMobile);\n      });\n    };\n\n    this.redirectToLink = (event, isTouchScreen) => {\n      const draggedDistance = (0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(this.lastPointerDown.clientX, this.lastPointerDown.clientY, this.lastPointerUp.clientX, this.lastPointerUp.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_33__.viewportCoordsToSceneCoords)(this.lastPointerDown, this.state);\n      const lastPointerDownHittingLinkIcon = (0,_element_Hyperlink__WEBPACK_IMPORTED_MODULE_46__.isPointHittingLink)(this.hitLinkElement, this.state, [lastPointerDownCoords.x, lastPointerDownCoords.y], this.device.isMobile);\n      const lastPointerUpCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)(this.lastPointerUp, this.state);\n      const lastPointerUpHittingLinkIcon = (0,_element_Hyperlink__WEBPACK_IMPORTED_MODULE_46__.isPointHittingLink)(this.hitLinkElement, this.state, [lastPointerUpCoords.x, lastPointerUpCoords.y], this.device.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_33__.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 frames = this.scene.getNonDeletedFrames().filter(frame => (0,_frame__WEBPACK_IMPORTED_MODULE_51__.isCursorInFrame)(sceneCoords, frame));\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\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 + deltaX / nextZoom,\n            scrollY: zoomState.scrollY + 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__WEBPACK_IMPORTED_MODULE_29__.isOverScrollBars)(currentScrollBars, event.clientX - this.state.offsetLeft, event.clientY - this.state.offsetTop);\n      const isOverScrollBar = isPointerOverScrollBars.isOverEither;\n\n      if (!this.state.draggingElement && !this.state.multiElement) {\n        if (isOverScrollBar) {\n          (0,_utils__WEBPACK_IMPORTED_MODULE_33__.resetCursor)(this.interactiveCanvas);\n        } else {\n          (0,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursorForShape)(this.interactiveCanvas, this.state);\n        }\n      }\n\n      const scenePointer = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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_58__.isActiveToolNonLinearSnappable)(this.state.activeTool.type)) {\n        const {\n          originOffset,\n          snapLines\n        } = (0,_snapping__WEBPACK_IMPORTED_MODULE_58__.getSnapLinesAtPointer)(this.scene.getNonDeletedElements(), this.state, {\n          x: scenePointerX,\n          y: scenePointerY\n        }, event);\n        this.setState({\n          snapLines,\n          originSnapOffset: originOffset\n        });\n      } else if (!this.state.draggingElement) {\n        this.setState({\n          snapLines: []\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);\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,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.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        const elementWithTransformHandleType = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getElementWithTransformHandleType)(elements, this.state, scenePointerX, scenePointerY, this.state.zoom, event.pointerType);\n\n        if (elementWithTransformHandleType && elementWithTransformHandleType.transformHandleType) {\n          (0,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursor)(this.interactiveCanvas, (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCursorForResizingElement)(elementWithTransformHandleType));\n          return;\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);\n\n        if (transformHandleType) {\n          (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n        (0,_element_Hyperlink__WEBPACK_IMPORTED_MODULE_46__.showHyperlinkTooltip)(this.hitLinkElement, this.state);\n\n        if (this.props.onLinkHover) {\n          this.props.onLinkHover(this.hitLinkElement, event);\n        } //zsviczian\n\n      } else {\n        (0,_element_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,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n        } else if (isOverScrollBar) {\n          (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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__.isEmbeddableElement)(hitElement) && this.isEmbeddableCenter(hitElement, event, scenePointerX, scenePointerY)) {\n              (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.AUTO);\n        }\n      }\n    };\n\n    this.handleEraser = (event, pointerDownState, scenePointer) => {\n      const updateElementIds = elements => {\n        elements.forEach(element => {\n          if (element.locked) {\n            return;\n          }\n\n          idsToUpdate.push(element.id);\n\n          if (event.altKey) {\n            if (pointerDownState.elementIdsToErase[element.id] && pointerDownState.elementIdsToErase[element.id].erase) {\n              pointerDownState.elementIdsToErase[element.id].erase = false;\n            }\n          } else if (!pointerDownState.elementIdsToErase[element.id]) {\n            pointerDownState.elementIdsToErase[element.id] = {\n              erase: true,\n              opacity: element.opacity\n            };\n          }\n        });\n      };\n\n      const idsToUpdate = [];\n      const distance = (0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y, scenePointer.x, scenePointer.y);\n      const threshold = 10 / this.state.zoom.value;\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        updateElementIds(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      const elements = this.scene.getElementsIncludingDeleted().map(ele => {\n        const id = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(ele) && idsToUpdate.includes(ele.containerId) ? ele.containerId : ele.id;\n\n        if (idsToUpdate.includes(id)) {\n          if (event.altKey) {\n            if (pointerDownState.elementIdsToErase[id] && pointerDownState.elementIdsToErase[id].erase === false) {\n              return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(ele, {\n                opacity: pointerDownState.elementIdsToErase[id].opacity\n              });\n            }\n          } else {\n            return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(ele, {\n              opacity: _constants__WEBPACK_IMPORTED_MODULE_12__.ELEMENT_READY_TO_ERASE_OPACITY\n            });\n          }\n        }\n\n        return ele;\n      });\n      this.scene.replaceAllElements(elements);\n      pointerDownState.lastCoords.x = scenePointer.x;\n      pointerDownState.lastCoords.y = scenePointer.y;\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      // 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        }));\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);\n      this.maybeCleanupAfterMissingPointerUp(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_33__.updateObject)(this.device, {\n          isTouchScreen: true\n        });\n      }\n\n      if (isPanning) {\n        return;\n      }\n\n      this.lastPointerDown = event;\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      } // 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) {\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,_utils__WEBPACK_IMPORTED_MODULE_33__.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_33__.viewportCoordsToSceneCoords)(event, this.state);\n        (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(pendingImageElement, {\n          x,\n          y\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,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.AUTO);\n      } else if (this.state.activeTool.type === \"frame\") {\n        this.createFrameElementOnPointerDown(pointerDownState);\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      const onPointerMove = this.onPointerMoveFromPointerDownHandler(pointerDownState);\n      const onPointerUp = this.onPointerUpFromPointerDownHandler(pointerDownState);\n      const onKeyDown = this.onKeyDownFromPointerDownHandler(pointerDownState);\n      const onKeyUp = this.onKeyUpFromPointerDownHandler(pointerDownState);\n      lastPointerUp = onPointerUp;\n\n      if (!this.state.viewModeEnabled) {\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.lastPointerUp = event;\n      const scenePointer = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)({\n        clientX: event.clientX,\n        clientY: event.clientY\n      }, this.state);\n      const clicklength = event.timeStamp - ((_b = (_a = this.lastPointerDown) === null || _a === void 0 ? void 0 : _a.timeStamp) !== null && _b !== void 0 ? _b : 0);\n\n      if (this.device.isMobile && clicklength < 300) {\n        const hitElement = this.getElementAtPosition(scenePointer.x, scenePointer.y);\n\n        if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(hitElement) && this.isEmbeddableCenter(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 && this.hitLinkElement.type === \"embeddable\" && !(0,_element_Hyperlink__WEBPACK_IMPORTED_MODULE_46__.isPointHittingLinkIcon)(this.hitLinkElement, 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    }; // 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,_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 = /Linux/.test(window.navigator.platform);\n      (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(lastPointerUp = () => {\n        lastPointerUp = null;\n        isPanning = false;\n\n        if (!isHoldingSpace) {\n          if (this.state.viewModeEnabled) {\n            (0,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n          } else {\n            (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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 selectedElements = this.scene.getSelectedElements(this.state);\n\n        if (selectedElements.length === 1 && !this.state.editingLinearElement) {\n          const elementWithTransformHandleType = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getElementWithTransformHandleType)(elements, this.state, pointerDownState.origin.x, pointerDownState.origin.y, this.state.zoom, event.pointerType);\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);\n        }\n\n        if (pointerDownState.resize.handleType) {\n          pointerDownState.resize.isResizing = true;\n          pointerDownState.resize.offset = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.tupleToCoors)((0,_element__WEBPACK_IMPORTED_MODULE_16__.getResizeOffsetXY)(pointerDownState.resize.handleType, selectedElements, 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.history, pointerDownState.origin, linearElementEditor);\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, deselect all of its elements if they are selected\n\n                  if (hitElement.type === \"frame\") {\n                    (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getFrameElements)(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 => element.type === \"frame\").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 = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getTextBindableContainerAtPosition)(this.scene.getNonDeletedElements(), this.state, 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,_utils__WEBPACK_IMPORTED_MODULE_33__.resetCursor)(this.interactiveCanvas);\n\n      if (!this.state.activeTool.locked) {\n        this.setState({\n          activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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.scene);\n\n      if (strokeOptions === null || strokeOptions === void 0 ? void 0 : strokeOptions.highlighter) {\n        //zsviczian\n        this.scene.replaceAllElements([element, ...this.scene.getElementsIncludingDeleted()]);\n      } else {\n        this.scene.addNewElement(element);\n      }\n\n      this.setState({\n        draggingElement: element,\n        editingElement: element,\n        startBoundElement: boundElement,\n        suggestedBindings: []\n      });\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.lastPointerDown) === 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_34__.getEmbedLink)(link);\n\n      if (!embedLink) {\n        return;\n      }\n\n      if (embedLink.warning) {\n        this.setToast({\n          message: embedLink.warning,\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.aspectRatio.w,\n        height: embedLink.aspectRatio.h,\n        link,\n        validated: null\n      });\n      this.scene.replaceAllElements([...this.scene.getElementsIncludingDeleted(), element]);\n      return element;\n    };\n\n    this.createImageElement = ({\n      sceneX,\n      sceneY\n    }) => {\n      var _a;\n\n      const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(sceneX, sceneY, ((_a = this.lastPointerDown) === 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 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,_utils__WEBPACK_IMPORTED_MODULE_33__.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.scene);\n        this.scene.addNewElement(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.lastPointerDown) === 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          validated: null\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.addNewElement(element);\n        this.setState({\n          multiElement: null,\n          draggingElement: element,\n          editingElement: element\n        });\n      }\n    };\n\n    this.createFrameElementOnPointerDown = pointerDownState => {\n      var _a;\n\n      const [gridX, gridY] = (0,_math__WEBPACK_IMPORTED_MODULE_28__.getGridPoint)(pointerDownState.origin.x, pointerDownState.origin.y, ((_a = this.lastPointerDown) === null || _a === void 0 ? void 0 : _a[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) ? null : this.state.gridSize);\n      const frame = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newFrameElement)(Object.assign({\n        x: gridX,\n        y: gridY,\n        opacity: this.state.currentItemOpacity,\n        locked: false\n      }, _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE));\n      this.scene.replaceAllElements([...this.scene.getElementsIncludingDeleted(), frame]);\n      this.setState({\n        multiElement: null,\n        draggingElement: frame,\n        editingElement: frame\n      });\n    };\n\n    this.restoreReadyToEraseElements = pointerDownState => {\n      const elements = this.scene.getElementsIncludingDeleted().map(ele => {\n        if (pointerDownState.elementIdsToErase[ele.id] && pointerDownState.elementIdsToErase[ele.id].erase) {\n          return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(ele, {\n            opacity: pointerDownState.elementIdsToErase[ele.id].opacity\n          });\n        } else if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(ele) && pointerDownState.elementIdsToErase[ele.containerId] && pointerDownState.elementIdsToErase[ele.containerId].erase) {\n          return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(ele, {\n            opacity: pointerDownState.elementIdsToErase[ele.containerId].opacity\n          });\n        } else if (ele.frameId && pointerDownState.elementIdsToErase[ele.frameId] && pointerDownState.elementIdsToErase[ele.frameId].erase) {\n          return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(ele, {\n            opacity: pointerDownState.elementIdsToErase[ele.frameId].opacity\n          });\n        }\n\n        return ele;\n      });\n      this.scene.replaceAllElements(elements);\n    };\n\n    this.eraseElements = pointerDownState => {\n      const elements = this.scene.getElementsIncludingDeleted().map(ele => {\n        if (pointerDownState.elementIdsToErase[ele.id] && pointerDownState.elementIdsToErase[ele.id].erase) {\n          return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(ele, {\n            isDeleted: true\n          });\n        } else if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(ele) && pointerDownState.elementIdsToErase[ele.containerId] && pointerDownState.elementIdsToErase[ele.containerId].erase) {\n          return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(ele, {\n            isDeleted: true\n          });\n        } else if (ele.frameId && pointerDownState.elementIdsToErase[ele.frameId] && pointerDownState.elementIdsToErase[ele.frameId].erase) {\n          return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(ele, {\n            isDeleted: true\n          });\n        }\n\n        return ele;\n      });\n      this.history.resumeRecording();\n      this.scene.replaceAllElements(elements);\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_39__.isSupportedImageFile)(imageFile)) {\n        throw new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.unsupportedFileType\"));\n      }\n\n      const mimeType = imageFile.type;\n      (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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_39__.SVGStringToFile)(await (0,_element_image__WEBPACK_IMPORTED_MODULE_40__.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_39__.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_39__.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 resing 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_39__.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_39__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.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      this.scene.addNewElement(imageElement);\n\n      try {\n        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      }\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      const imagePreview = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.resizeImageFile)(imageFile, {\n        maxWidthOrHeight: cursorImageSizePx\n      });\n      let previewDataURL = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.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_40__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursor)(this.interactiveCanvas, `url(${previewDataURL}) 4 4, auto`);\n      }\n    };\n\n    this.onImageAction = async ({\n      insertOnCanvasDirectly\n    } = {\n      insertOnCanvasDirectly: false\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_33__.viewportCoordsToSceneCoords)({\n          clientX,\n          clientY\n        }, this.state);\n        const imageFile = await (0,_data_filesystem__WEBPACK_IMPORTED_MODULE_42__.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        });\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_33__.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_40__.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_66__.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_40__.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.informMutation();\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_41___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.scene);\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.scene);\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_39__.getFileFromEvent)(event);\n      const {\n        x: sceneX,\n        y: sceneY\n      } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)(event, this.state);\n\n      try {\n        if ((0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.isSupportedImageFile)(file)) {\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                commitToHistory: true\n              }));\n              return;\n            } catch (error) {\n              if (error.name !== \"EncodingError\") {\n                throw error;\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_39__.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        // atetmpt 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_34__.embeddableURLValidator)(text, this.props.validateEmbeddable) && (/^(http|https):\\/\\/[^\\s/$.?#].[^\\s]*$/.test(text) || ((_d = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_34__.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_39__.normalizeFile)(file);\n\n      try {\n        const ret = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_39__.loadSceneOrLibraryFromBlob)(file, this.state, this.scene.getElementsIncludingDeleted(), fileHandle);\n\n        if (ret.type === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.excalidraw) {\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            commitToHistory: true\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_33__.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 isHittignCommonBoundBox = this.isHittingCommonBoundingBoxOfSelectedElements({\n        x,\n        y\n      }, selectedElements);\n      const type = element || isHittignCommonBoundBox ? \"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, this.scene) : 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_33__.distance)(pointerDownState.origin.x, pointerCoords.x), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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_58__.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        });\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_33__.distance)(pointerDownState.originInGrid.x, gridX), (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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);\n        this.maybeSuggestBindingForAll([draggingElement]); // highlight elements that are to be added to frames on frames creation\n\n        if (this.state.activeTool.type === \"frame\") {\n          this.setState({\n            elementsToHighlight: (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getElementsInResizingFrame)(this.scene.getNonDeletedElements(), draggingElement, this.state)\n          });\n        }\n      }\n    };\n\n    this.maybeHandleResize = (pointerDownState, event) => {\n      const selectedElements = this.scene.getSelectedElements(this.state);\n      const selectedFrames = selectedElements.filter(element => element.type === \"frame\");\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__.getFrameElements)(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_58__.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, transformHandleType, selectedElements, pointerDownState.resize.arrowDirection, (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldRotateWithDiscreteAngle)(event), (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldResizeFromCenter)(event), selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isImageElement)(selectedElements[0]) ? !(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, this.state)) {\n        this.maybeSuggestBindingForAll(selectedElements);\n        const elementsToHighlight = new Set();\n        selectedFrames.forEach(frame => {\n          const elementsInFrame = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getFrameElements)(this.scene.getNonDeletedElements(), frame.id); // keep elements' positions relative to their frames on frames resizing\n\n          if (transformHandleType) {\n            if (transformHandleType.includes(\"w\")) {\n              elementsInFrame.forEach(element => {\n                var _a, _b;\n\n                (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n                  x: frame.x + (((_a = frameElementsOffsetsMap.get(frame.id + element.id)) === null || _a === void 0 ? void 0 : _a.x) || 0),\n                  y: frame.y + (((_b = frameElementsOffsetsMap.get(frame.id + element.id)) === null || _b === void 0 ? void 0 : _b.y) || 0)\n                });\n              });\n            }\n\n            if (transformHandleType.includes(\"n\")) {\n              elementsInFrame.forEach(element => {\n                var _a, _b;\n\n                (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n                  x: frame.x + (((_a = frameElementsOffsetsMap.get(frame.id + element.id)) === null || _a === void 0 ? void 0 : _a.x) || 0),\n                  y: frame.y + (((_b = frameElementsOffsetsMap.get(frame.id + element.id)) === null || _b === void 0 ? void 0 : _b.y) || 0)\n                });\n              });\n            }\n          }\n\n          (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getElementsInResizingFrame)(this.scene.getNonDeletedElements(), frame, this.state).forEach(element => elementsToHighlight.add(element));\n        });\n        this.setState({\n          elementsToHighlight: [...elementsToHighlight]\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_38__.actionToggleViewMode, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleStats];\n        }\n\n        return [_actions_actionClipboard__WEBPACK_IMPORTED_MODULE_53__.actionPaste, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.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_35__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionSelectAll, _actions_actionElementLock__WEBPACK_IMPORTED_MODULE_49__.actionUnlockAllElements, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.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_38__.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 [_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_35__.CONTEXT_MENU_SEPARATOR, ...options, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionCopyStyles, _actions__WEBPACK_IMPORTED_MODULE_5__.actionPasteStyles, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionGroup, _actions__WEBPACK_IMPORTED_MODULE_5__.actionUnbindText, _actions__WEBPACK_IMPORTED_MODULE_5__.actionBindText, _actions_actionBoundText__WEBPACK_IMPORTED_MODULE_59__.actionWrapTextInContainer, _actions__WEBPACK_IMPORTED_MODULE_5__.actionUngroup, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionAddToLibrary, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.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_35__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionFlipHorizontal, _actions__WEBPACK_IMPORTED_MODULE_5__.actionFlipVertical, _ContextMenu__WEBPACK_IMPORTED_MODULE_35__.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_35__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionDeleteSelected];\n    };\n\n    this.handleWheel = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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 pointer = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)({\n        clientX: x,\n        clientY: y\n      }, this.state);\n\n      if (isNaN(pointer.x) || isNaN(pointer.y)) {// sometimes the pointer goes off screen\n      }\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_33__.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      excalidrawRef,\n      viewModeEnabled = false,\n      zenModeEnabled = false,\n      gridModeEnabled = false,\n      objectsSnapModeEnabled = false,\n      theme = defaultAppState.theme,\n      name = defaultAppState.name,\n      initState //zsviczian\n\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_68__.nanoid)();\n    this.library = new _data_library__WEBPACK_IMPORTED_MODULE_14__[\"default\"](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_65__.Renderer(this.scene);\n\n    if (excalidrawRef) {\n      const readyPromise = \"current\" in excalidrawRef && ((_a = excalidrawRef.current) === null || _a === void 0 ? void 0 : _a.readyPromise) || (0,_utils__WEBPACK_IMPORTED_MODULE_33__.resolvablePromise)();\n      const api = {\n        ready: true,\n        readyPromise,\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        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) //zsviczian\n\n      };\n\n      if (typeof excalidrawRef === \"function\") {\n        excalidrawRef(api);\n      } else {\n        excalidrawRef.current = api;\n      }\n\n      readyPromise.resolve(api);\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      onSceneUpdated: this.onSceneUpdated\n    });\n    this.history = new _history__WEBPACK_IMPORTED_MODULE_24__[\"default\"]();\n    this.actionManager = new _actions_manager__WEBPACK_IMPORTED_MODULE_7__.ActionManager(this.syncActionResult, () => this.state, () => this.scene.getElementsIncludingDeleted(), this);\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));\n    this.actionManager.registerAction((0,_actions_actionHistory__WEBPACK_IMPORTED_MODULE_6__.createRedoAction)(this.history));\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  updateEmbeddableRef(id, ref) {\n    if (ref) {\n      this.iFrameRefs.set(id, ref);\n    }\n  }\n\n  getHTMLIFrameElement(id) {\n    return this.iFrameRefs.get(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    const iframe = this.getHTMLIFrameElement(element.id);\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  isEmbeddableCenter(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) && !!el.validated);\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;\n\n        const {\n          x,\n          y\n        } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.sceneCoordsToViewportCoords)({\n          sceneX: el.x,\n          sceneY: el.y\n        }, this.state);\n        const embedLink = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_34__.getEmbedLink)((0,_data_url__WEBPACK_IMPORTED_MODULE_47__.toValidURL)(el.link || \"\"));\n        const isVisible = (0,_element_sizeHelpers__WEBPACK_IMPORTED_MODULE_27__.isElementInViewport)(el, normalizedWidth, normalizedHeight, this.state);\n        const isActive = ((_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) === \"active\";\n        const isHovered = ((_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) === \"hover\";\n        const isWebview = //zsviczian\n        this.props.renderWebview && (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) !== \"document\" && !((_f = (_e = embedLink === null || embedLink === void 0 ? void 0 : embedLink.link) === null || _e === void 0 ? void 0 : _e.startsWith) === null || _f === void 0 ? void 0 : _f.call(_e, \"https://player.vimeo.com\"));\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) scale(${scale})` : \"none\",\n            display: isVisible ? \"block\" : \"none\",\n            opacity: el.opacity / 100,\n            [\"--embeddable-radius\"]: `${(0,_math__WEBPACK_IMPORTED_MODULE_28__.getCornerRadius)(Math.min(el.width, el.height), el)}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}px` : 0,\n              height: isVisible ? `${el.height}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}px`\n              }\n            }, {\n              children: (_j = (_h = (_g = this.props).renderEmbeddable) === null || _h === void 0 ? void 0 : _h.call(_g, el, this.state)) !== null && _j !== void 0 ? _j : isWebview ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"webview\", {\n                ref: ref => this.updateEmbeddableRef(el.id, ref),\n                className: \"excalidraw__embeddable\",\n                src: (_k = embedLink === null || embedLink === void 0 ? void 0 : embedLink.link) !== null && _k !== void 0 ? _k : \"\",\n                title: \"Excalidraw Embedded Content\",\n                allowFullScreen: true\n              }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"iframe\", {\n                ref: ref => this.updateEmbeddableRef(el.id, ref),\n                className: \"excalidraw__embeddable\",\n                srcDoc: (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) === \"document\" ? embedLink.srcdoc(this.state.theme) : undefined,\n                src: (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) !== \"document\" ? (_l = embedLink === null || embedLink === void 0 ? void 0 : embedLink.link) !== null && _l !== void 0 ? _l : \"\" : 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: \"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  render() {\n    var _a, _b, _c, _d, _e, _f;\n\n    const selectedElements = this.scene.getSelectedElements(this.state);\n    const {\n      renderTopRightUI,\n      renderCustomStats\n    } = this.props;\n    const versionNonce = this.scene.getVersionNonce();\n    const {\n      canvasElements,\n      visibleElements\n    } = this.renderer.getRenderableElements({\n      versionNonce,\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    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.isMobile || !(this.state.viewModeEnabled || this.state.zenModeEnabled) && this.state.trayModeEnabled //zsviczian\n\n      }),\n      style: {\n        [\"--ui-pointerEvents\"]: this.state.selectionElement || this.state.draggingElement || this.state.resizingElement || this.state.editingElement && !(0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(this.state.editingElement) ? _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.disabled : _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.enabled\n      },\n      ref: this.excalidrawContainerRef,\n      onDrop: this.handleAppOnDrop,\n      tabIndex: 0,\n      onKeyDown: this.props.handleKeyboardGlobally ? undefined : this.onKeyDown\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__.jsxs)(_LayerUI__WEBPACK_IMPORTED_MODULE_36__[\"default\"], Object.assign({\n                        canvas: this.canvas,\n                        interactiveCanvas: this.interactiveCanvas,\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                        onImageAction: this.onImageAction,\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                      }, {\n                        children: [this.props.children, this.props.renderMermaid && this.state.activeTool.type === \"mermaid\" && //zsviczian\n                        (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_MermaidToExcalidraw__WEBPACK_IMPORTED_MODULE_67__[\"default\"], {\n                          selectedElements: this.scene.getSelectedElements(this.state)\n                        })]\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                      }), selectedElements.length === 1 && !this.state.contextMenu && this.state.showHyperlinkPopup && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_element_Hyperlink__WEBPACK_IMPORTED_MODULE_46__.Hyperlink, {\n                        element: selectedElements[0],\n                        setAppState: this.setAppState,\n                        onLinkOpen: this.props.onLinkOpen,\n                        setToast: this.setToast\n                      }, selectedElements[0].id), this.state.toast !== null && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Toast__WEBPACK_IMPORTED_MODULE_37__.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_35__.ContextMenu, {\n                        items: this.state.contextMenu.items,\n                        top: this.state.contextMenu.top,\n                        left: this.state.contextMenu.left,\n                        actionManager: this.actionManager\n                      }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_canvases__WEBPACK_IMPORTED_MODULE_64__.StaticCanvas, {\n                        canvas: this.canvas,\n                        rc: this.rc,\n                        elements: canvasElements,\n                        visibleElements: visibleElements,\n                        versionNonce: versionNonce,\n                        selectionNonce: (_b = this.state.selectionElement) === null || _b === void 0 ? void 0 : _b.versionNonce,\n                        scale: window.devicePixelRatio,\n                        appState: this.state,\n                        renderConfig: {\n                          imageCache: this.imageCache,\n                          isExporting: false,\n                          renderGrid: true\n                        }\n                      }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_canvases__WEBPACK_IMPORTED_MODULE_64__.InteractiveCanvas, {\n                        containerRef: this.excalidrawContainerRef,\n                        canvas: this.interactiveCanvas,\n                        elements: canvasElements,\n                        visibleElements: visibleElements,\n                        selectedElements: selectedElements,\n                        versionNonce: versionNonce,\n                        selectionNonce: (_c = this.state.selectionElement) === null || _c === void 0 ? void 0 : _c.versionNonce,\n                        scale: window.devicePixelRatio,\n                        appState: this.state,\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.renderFrameNames(), ((_d = this.state.activeEmbeddable) === null || _d === void 0 ? void 0 : _d.state) === \"active\" && ( //zsviczian\n                      (_f = (_e = this.props).renderEmbeddableMenu) === null || _f === void 0 ? void 0 : _f.call(_e, this.state))]\n                    })), this.renderEmbeddables()]\n                  }))\n                }))\n              }))\n            }))\n          }))\n        }))\n      }))\n    }));\n  }\n\n  async componentDidMount() {\n    var _a, _b;\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      });\n    }\n\n    this.scene.addCallback(this.onSceneUpdated);\n    this.addEventListeners();\n\n    if (this.props.autoFocus && this.excalidrawContainerRef.current) {\n      this.focusContainer();\n    }\n\n    if (this.excalidrawContainerRef.current && // 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_33__.isTestEnv)()) {\n      this.refreshDeviceState(this.excalidrawContainerRef.current);\n    }\n\n    if (\"ResizeObserver\" in window && ((_a = this.excalidrawContainerRef) === null || _a === void 0 ? void 0 : _a.current)) {\n      this.resizeObserver = new ResizeObserver(() => {\n        // recompute device dimensions state\n        // ---------------------------------------------------------------------\n        this.refreshDeviceState(this.excalidrawContainerRef.current); // refresh offsets\n        // ---------------------------------------------------------------------\n\n        this.updateDOMRect();\n      });\n      (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(this.excalidrawContainerRef.current);\n    } else if (window.matchMedia) {\n      const mdScreenQuery = window.matchMedia(`(max-width: ${_constants__WEBPACK_IMPORTED_MODULE_12__.MQ_MAX_WIDTH_PORTRAIT}px), (max-height: ${_constants__WEBPACK_IMPORTED_MODULE_12__.MQ_MAX_HEIGHT_LANDSCAPE}px) and (max-width: ${_constants__WEBPACK_IMPORTED_MODULE_12__.MQ_MAX_WIDTH_LANDSCAPE}px)`);\n      const smScreenQuery = window.matchMedia(`(max-width: ${_constants__WEBPACK_IMPORTED_MODULE_12__.MQ_SM_MAX_WIDTH}px)`);\n      const canDeviceFitSidebarMediaQuery = window.matchMedia(`(min-width: ${// NOTE this won't update if a different breakpoint is supplied\n      // after mount\n      this.props.UIOptions.dockedSidebarBreakpoint != null ? this.props.UIOptions.dockedSidebarBreakpoint : _constants__WEBPACK_IMPORTED_MODULE_12__.MQ_RIGHT_SIDEBAR_MIN_WIDTH}px)`);\n\n      const handler = () => {\n        this.excalidrawContainerRef.current.getBoundingClientRect();\n        this.device = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.updateObject)(this.device, {\n          isSmScreen: smScreenQuery.matches,\n          isMobile: mdScreenQuery.matches && this.allowMobileMode,\n          canDeviceFitSidebar: canDeviceFitSidebarMediaQuery.matches\n        });\n      };\n\n      mdScreenQuery.addListener(handler);\n\n      this.detachIsMobileMqHandler = () => mdScreenQuery.removeListener(handler);\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_43__.isMeasureTextSupported)()) {\n      this.setState({\n        errorMessage: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_BraveMeasureTextError__WEBPACK_IMPORTED_MODULE_60__[\"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.renderer = new _scene_Renderer__WEBPACK_IMPORTED_MODULE_65__.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    _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_66__.ShapeCache.destroy();\n    _snapping__WEBPACK_IMPORTED_MODULE_58__.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  }\n\n  removeEventListeners() {\n    var _a, _b, _c, _d, _e;\n\n    document.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, this.removePointer);\n    document.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.COPY, this.onCopy);\n    document.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.PASTE, this.pasteFromClipboard);\n    document.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.CUT, this.onCut);\n    (_a = this.excalidrawContainerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.WHEEL, this.onWheel);\n    (_b = this.nearestScrollableContainer) === null || _b === void 0 ? void 0 : _b.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.SCROLL, this.onScroll);\n    document.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYDOWN, this.onKeyDown, false);\n    document.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.MOUSE_MOVE, this.updateCurrentCursorPosition, false);\n    document.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYUP, this.onKeyUp);\n    window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.RESIZE, this.onResize, false);\n    window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.UNLOAD, this.onUnload, false);\n    window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.BLUR, this.onBlur, false);\n    (_c = this.excalidrawContainerRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.DRAG_OVER, this.disableEvent, false);\n    (_d = this.excalidrawContainerRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.DROP, this.disableEvent, false);\n    document.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.GESTURE_START, this.onGestureStart, false);\n    document.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.GESTURE_CHANGE, this.onGestureChange, false);\n    document.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.GESTURE_END, this.onGestureEnd, false);\n    (_e = this.detachIsMobileMqHandler) === null || _e === void 0 ? void 0 : _e.call(this);\n    window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.MESSAGE, this.onWindowMessage, false);\n  }\n\n  addEventListeners() {\n    var _a, _b, _c, _d, _e;\n\n    this.removeEventListeners();\n    window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.MESSAGE, this.onWindowMessage, false);\n    document.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, this.removePointer); // #3553\n\n    document.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.COPY, this.onCopy);\n    (_a = this.excalidrawContainerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.WHEEL, this.onWheel, {\n      passive: false\n    });\n\n    if (this.props.handleKeyboardGlobally) {\n      document.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYDOWN, this.onKeyDown, false);\n    }\n\n    document.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYUP, this.onKeyUp, {\n      passive: true\n    });\n    document.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.MOUSE_MOVE, this.updateCurrentCursorPosition); // rerender text elements on font load to fix #637 && #1553\n\n    (_c = (_b = document.fonts) === null || _b === void 0 ? void 0 : _b.addEventListener) === null || _c === void 0 ? void 0 : _c.call(_b, \"loadingdone\", event => {\n      const loadedFontFaces = event.fontfaces;\n      this.fonts.onFontsLoaded(loadedFontFaces);\n    }); // Safari-only desktop pinch zoom\n\n    document.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.GESTURE_START, this.onGestureStart, false);\n    document.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.GESTURE_CHANGE, this.onGestureChange, false);\n    document.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.GESTURE_END, this.onGestureEnd, false);\n\n    if (this.state.viewModeEnabled) {\n      return;\n    }\n\n    document.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.PASTE, this.pasteFromClipboard);\n    document.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.CUT, this.onCut);\n\n    if (this.props.detectScroll) {\n      this.nearestScrollableContainer = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.getNearestScrollableContainer)(this.excalidrawContainerRef.current);\n      this.nearestScrollableContainer.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.SCROLL, this.onScroll);\n    }\n\n    window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.RESIZE, this.onResize, false);\n    window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.UNLOAD, this.onUnload, false);\n    window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.BLUR, this.onBlur, false);\n    (_d = this.excalidrawContainerRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.DRAG_OVER, this.disableEvent, false);\n    (_e = this.excalidrawContainerRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.DROP, this.disableEvent, false);\n  }\n\n  componentDidUpdate(prevProps, prevState) {\n    var _a, _b, _c, _d, _e, _f;\n\n    this.updateEmbeddables();\n\n    if (!this.state.showWelcomeScreen && !this.scene.getElementsIncludingDeleted().length) {\n      this.setState({\n        showWelcomeScreen: true\n      });\n    }\n\n    if (this.excalidrawContainerRef.current && prevProps.UIOptions.dockedSidebarBreakpoint !== this.props.UIOptions.dockedSidebarBreakpoint) {\n      this.refreshDeviceState(this.excalidrawContainerRef.current);\n    }\n\n    if (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);\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_33__.updateActiveTool)(this.state, {\n          type: \"selection\"\n        })\n      });\n    }\n\n    if (this.state.activeTool.type === \"eraser\" && prevState.theme !== this.state.theme) {\n      (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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 (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    if (this.props.name && prevProps.name !== this.props.name) {\n      this.setState({\n        name: this.props.name\n      });\n    }\n\n    (_c = this.excalidrawContainerRef.current) === null || _c === void 0 ? void 0 : _c.classList.toggle(\"theme--dark\", this.state.theme === \"dark\");\n\n    if (this.state.editingLinearElement && !this.state.selectedElementIds[this.state.editingLinearElement.elementId]) {\n      // defer so that the commitToHistory 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, this.scene, (0,_utils__WEBPACK_IMPORTED_MODULE_33__.tupleToCoors)(_element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.getPointAtIndexGlobalCoordinates(multiElement, -1)));\n    }\n\n    this.history.record(this.state, this.scene.getElementsIncludingDeleted()); // 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, this.scene.getElementsIncludingDeleted(), this.state, this.files);\n    }\n  }\n\n  static resetTapTwice() {\n    didTapTwice = false;\n  }\n\n  addTextFromPaste(text, isPlainPaste = false) {\n    const {\n      x,\n      y\n    } = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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: this.state.currentItemFontSize,\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_43__.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_43__.getLineHeightInPx)(textElementProps.fontSize, lineHeight) + LINE_GAP;\n        }\n      }\n\n      return acc;\n    }, []);\n\n    if (textElements.length === 0) {\n      return;\n    }\n\n    const frameId = textElements[0].frameId;\n\n    if (frameId) {\n      this.scene.insertElementsAtIndex(textElements, this.scene.getElementIndex(frameId));\n    } else {\n      this.scene.replaceAllElements([...this.scene.getElementsIncludingDeleted(), ...textElements]);\n    }\n\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.isMobile) {\n      this.setToast({\n        message: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"toast.pasteAsSingleElement\", {\n          shortcut: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.getShortcutKey)(\"CtrlOrCmd+Shift+V\")\n        }),\n        duration: 5000\n      });\n      PLAIN_PASTE_TOAST_SHOWN = true;\n    }\n\n    this.history.resumeRecording();\n  }\n\n  handleTextWysiwyg(element, {\n    isExistingElement = false\n  }) {\n    const updateElement = (text, originalText, isDeleted, rawText, link) => {\n      this.scene.replaceAllElements([...this.scene.getElementsIncludingDeleted().map(_element => {\n        if (_element.id === element.id && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(_element)) {\n          return (0,_element__WEBPACK_IMPORTED_MODULE_16__.updateTextElement)(_element, {\n            text,\n            isDeleted,\n            originalText,\n            rawText: rawText !== null && rawText !== void 0 ? rawText : originalText,\n            link\n          });\n        }\n\n        return _element;\n      })]);\n    };\n\n    if (isExistingElement && this.props.onBeforeTextEdit) {\n      const text = this.props.onBeforeTextEdit(element);\n\n      if (text) {\n        this.scene.replaceAllElements([...this.scene.getElementsIncludingDeleted().map(_element => {\n          if (_element.id === element.id && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(_element)) {\n            element = (0,_element__WEBPACK_IMPORTED_MODULE_16__.updateTextElement)(_element, {\n              text,\n              isDeleted: false,\n              originalText: text\n            });\n            return element;\n          }\n\n          return _element;\n        })]);\n      }\n    }\n\n    (0,_element__WEBPACK_IMPORTED_MODULE_16__.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_33__.sceneCoordsToViewportCoords)({\n          sceneX: x,\n          sceneY: y\n        }, this.state);\n        return [viewportX - this.state.offsetLeft, viewportY - this.state.offsetTop];\n      },\n      onChange: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(text => {\n        updateElement(text, text, false);\n\n        if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isNonDeletedElement)(element)) {\n          (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.updateBoundElements)(element);\n        }\n      }),\n      onSubmit: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(({\n        text,\n        viaKeyboard,\n        originalText\n      }) => {\n        const isDeleted = !text.trim();\n        const rawText = originalText; //should this be originalText??\n\n        let link = undefined;\n\n        if (this.props.onBeforeTextSubmit) {\n          const [updatedText, updatedOriginalText, l] = this.props.onBeforeTextSubmit(element, text, originalText, isDeleted);\n          text = updatedText !== null && updatedText !== void 0 ? updatedText : text;\n          originalText = updatedOriginalText !== null && updatedOriginalText !== void 0 ? updatedOriginalText : originalText;\n          link = l;\n        }\n\n        updateElement(text, originalText, isDeleted, rawText, link); // 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.history.resumeRecording();\n        }\n\n        this.setState({\n          draggingElement: null,\n          editingElement: null\n        });\n\n        if (this.state.activeTool.locked) {\n          (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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.text, 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\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__WEBPACK_IMPORTED_MODULE_16__.isHittingElementBoundingBoxWithoutHittingElement)(elementWithHighestZIndex, this.state, this.frameNameBoundsCache, x, y) ? allHitElements[allHitElements.length - 2] : elementWithHighestZIndex;\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 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)));\n    return (0,_scene__WEBPACK_IMPORTED_MODULE_29__.getElementsAtPosition)(elements, element => (0,_element__WEBPACK_IMPORTED_MODULE_16__.hitTest)(element, this.state, this.frameNameBoundsCache, x, y)).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);\n      return containingFrame && this.state.frameRendering.enabled && this.state.frameRendering.clip ? (0,_frame__WEBPACK_IMPORTED_MODULE_51__.isCursorInFrame)({\n        x,\n        y\n      }, containingFrame) : true;\n    });\n  }\n\n  handleHoverSelectedLinearElement(linearElementEditor, scenePointerX, scenePointerY) {\n    const element = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.getElement(linearElementEditor.elementId);\n    const boundTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.getBoundTextElement)(element);\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_44__.isHittingElementNotConsideringBoundingBox)(element, this.state, this.frameNameBoundsCache, [scenePointerX, scenePointerY])) {\n        hoverPointIndex = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.getPointIndexUnderCursor(element, 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);\n\n        if (hoverPointIndex >= 0 || segmentMidPointHoveredCoords) {\n          (0,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n        } else {\n          (0,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.MOVE);\n        }\n      } else if ((0,_element_transformHandles__WEBPACK_IMPORTED_MODULE_48__.shouldShowBoundingBox)([element], this.state) && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isHittingElementBoundingBoxWithoutHittingElement)(element, this.state, this.frameNameBoundsCache, scenePointerX, scenePointerY)) {\n        (0,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.MOVE);\n      } else if (boundTextElement && (0,_element__WEBPACK_IMPORTED_MODULE_16__.hitTest)(boundTextElement, this.state, this.frameNameBoundsCache, scenePointerX, scenePointerY)) {\n        (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.AUTO);\n    }\n  }\n\n  maybeCleanupAfterMissingPointerUp(event) {\n    if (lastPointerUp !== null) {\n      // Unfortunately, sometimes we don't get a pointerup after a pointerdown,\n      // this can happen when a contextual menu or alert is triggered. In order to avoid\n      // being in a weird state, we clean up on the next pointerdown\n      lastPointerUp(event);\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_33__.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_33__.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__WEBPACK_IMPORTED_MODULE_29__.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      elementIdsToErase: {}\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,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(() => {\n      isDraggingScrollBar = false;\n      (0,_utils__WEBPACK_IMPORTED_MODULE_33__.setCursorForShape)(this.interactiveCanvas, this.state);\n      lastPointerUp = null;\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 = 10 / this.state.zoom.value;\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_58__.isSnappingEnabled)({\n      event,\n      appState: this.state,\n      selectedElements\n    }) && (recomputeAnyways || !_snapping__WEBPACK_IMPORTED_MODULE_58__.SnapCache.getReferenceSnapPoints())) {\n      _snapping__WEBPACK_IMPORTED_MODULE_58__.SnapCache.setReferenceSnapPoints((0,_snapping__WEBPACK_IMPORTED_MODULE_58__.getReferenceSnapPoints)(this.scene.getNonDeletedElements(), selectedElements, this.state));\n    }\n  }\n\n  maybeCacheVisibleGaps(event, selectedElements, recomputeAnyways = false) {\n    if ((0,_snapping__WEBPACK_IMPORTED_MODULE_58__.isSnappingEnabled)({\n      event,\n      appState: this.state,\n      selectedElements\n    }) && (recomputeAnyways || !_snapping__WEBPACK_IMPORTED_MODULE_58__.SnapCache.getVisibleGaps())) {\n      _snapping__WEBPACK_IMPORTED_MODULE_58__.SnapCache.setVisibleGaps((0,_snapping__WEBPACK_IMPORTED_MODULE_58__.getVisibleGaps)(this.scene.getNonDeletedElements(), selectedElements, this.state));\n    }\n  }\n\n  onKeyDownFromPointerDownHandler(pointerDownState) {\n    return (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.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,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdatesThrottled)(event => {\n      var _a, _b; // 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_33__.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_33__.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      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      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)) {\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]);\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);\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__.isFrameElement)(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_58__.snapDraggedElements)((0,_scene__WEBPACK_IMPORTED_MODULE_29__.getSelectedElements)(originalElements, this.state), dragOffset, this.state, event);\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.maybeSuggestBindingForAll(selectedElements); // 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,_element_textElement__WEBPACK_IMPORTED_MODULE_43__.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)); // 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);\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], this.scene) : 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,_utils__WEBPACK_IMPORTED_MODULE_33__.withBatchedUpdates)(childEvent => {\n      var _a, _b, _c, _d, _e, _f;\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({\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: [],\n        originSnapOffset: null\n      });\n      _snapping__WEBPACK_IMPORTED_MODULE_58__.SnapCache.setReferenceSnapPoints(null);\n      _snapping__WEBPACK_IMPORTED_MODULE_58__.SnapCache.setVisibleGaps(null);\n      this.savePointer(childEvent.clientX, childEvent.clientY, \"up\");\n      this.setState({\n        selectedElementsAreBeingDragged: false\n      }); // 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);\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);\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);\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      lastPointerUp = null;\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      if ((draggingElement === null || draggingElement === void 0 ? void 0 : draggingElement.type) === \"freedraw\") {\n        const pointerCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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.history.resumeRecording();\n        }\n\n        const pointerCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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, this.scene, pointerCoords);\n          }\n\n          this.setState({\n            suggestedBindings: [],\n            startBoundElement: null\n          });\n\n          if (!activeTool.locked) {\n            (0,_utils__WEBPACK_IMPORTED_MODULE_33__.resetCursor)(this.interactiveCanvas);\n            this.setState(prevState => ({\n              draggingElement: null,\n              activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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, this.scene)\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        if (draggingElement.type !== \"selection\") {\n          //zsviczian (mermaid link click fix)\n          this.scene.replaceAllElements(this.scene.getElementsIncludingDeleted().slice(0, -1));\n        }\n\n        this.setState({\n          draggingElement: null\n        });\n        return;\n      }\n\n      if (draggingElement) {\n        if (pointerDownState.drag.hasOccurred) {\n          const sceneCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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);\n\n              if (frame && linearElement) {\n                if (!(0,_frame__WEBPACK_IMPORTED_MODULE_51__.elementOverlapsWithFrame)(linearElement, frame)) {\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                  this.scene.replaceAllElements((0,_frame__WEBPACK_IMPORTED_MODULE_51__.removeElementsFromFrame)(this.scene.getElementsIncludingDeleted(), [linearElement], this.state));\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.getElementsIncludingDeleted();\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 (draggingElement.type === \"frame\") {\n          const elementsInsideFrame = (0,_frame__WEBPACK_IMPORTED_MODULE_51__.getElementsInNewFrame)(this.scene.getElementsIncludingDeleted(), draggingElement);\n          this.scene.replaceAllElements((0,_frame__WEBPACK_IMPORTED_MODULE_51__.addElementsToFrame)(this.scene.getElementsIncludingDeleted(), 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.history.resumeRecording();\n      }\n\n      if (resizingElement && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isInvisiblySmallElement)(resizingElement)) {\n        this.scene.replaceAllElements(this.scene.getElementsIncludingDeleted().filter(el => el.id !== resizingElement.id));\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 => element.type === \"frame\");\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), frame, this.state);\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 (((_e = this.state.selectedLinearElement) === null || _e === void 0 ? void 0 : _e.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, this.scene)\n          });\n        }\n      }\n\n      if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state)) {\n        const draggedDistance = (0,_math__WEBPACK_IMPORTED_MODULE_28__.distance2d)(this.lastPointerDown.clientX, this.lastPointerDown.clientY, this.lastPointerUp.clientX, this.lastPointerUp.clientY);\n\n        if (draggedDistance === 0) {\n          const scenePointer = (0,_utils__WEBPACK_IMPORTED_MODULE_33__.viewportCoordsToSceneCoords)({\n            clientX: this.lastPointerUp.clientX,\n            clientY: this.lastPointerUp.clientY\n          }, this.state);\n          const hitElements = this.getElementsAtPosition(scenePointer.x, scenePointer.y);\n          hitElements.forEach(hitElement => pointerDownState.elementIdsToErase[hitElement.id] = {\n            erase: true,\n            opacity: hitElement.opacity\n          });\n        }\n\n        this.eraseElements(pointerDownState);\n        return;\n      } else if (Object.keys(pointerDownState.elementIdsToErase).length) {\n        this.restoreReadyToEraseElements(pointerDownState);\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 gragging a linear element point (outside editor)\n            } else if (!((_f = this.state.selectedLinearElement) === null || _f === void 0 ? void 0 : _f.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], this.scene) : 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, this.scene) : prevState.selectedLinearElement\n            });\n          });\n        }\n      }\n\n      if (!pointerDownState.drag.hasOccurred && !this.state.isResizing && (hitElement && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isHittingElementBoundingBoxWithoutHittingElement)(hitElement, this.state, this.frameNameBoundsCache, pointerDownState.origin.x, pointerDownState.origin.y) || !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        }\n\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)) {\n        this.history.resumeRecording();\n      }\n\n      if (pointerDownState.drag.hasOccurred || isResizing || isRotating) {\n        ((0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.isBindingEnabled)(this.state) ? _element_binding__WEBPACK_IMPORTED_MODULE_17__.bindOrUnbindSelectedElements : _element_binding__WEBPACK_IMPORTED_MODULE_17__.unbindLinearElements)(this.scene.getSelectedElements(this.state));\n      }\n\n      if (!activeTool.locked && activeTool.type !== \"freedraw\") {\n        (0,_utils__WEBPACK_IMPORTED_MODULE_33__.resetCursor)(this.interactiveCanvas);\n        this.setState({\n          draggingElement: null,\n          suggestedBindings: [],\n          activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_33__.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.lastPointerUp && this.lastPointerDown && this.lastPointerUp.timeStamp - this.lastPointerDown.timeStamp < 300 && gesture.pointers.size <= 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(hitElement) && this.isEmbeddableCenter(hitElement, this.lastPointerUp, pointerDownState.origin.x, pointerDownState.origin.y)) {\n        this.handleEmbeddableCenterClick(hitElement);\n      }\n    });\n  }\n\n  maybeSuggestBindingForAll(selectedElements) {\n    if (selectedElements.length > 50) {\n      return;\n    }\n\n    const suggestedBindings = (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getEligibleElementsForBinding)(selectedElements);\n    this.setState({\n      suggestedBindings\n    });\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_43__.getContainerCenter)(container, appState);\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_33__.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\nApp.defaultProps = {\n  // needed for tests to pass since we directly render App in many tests\n  UIOptions: _constants__WEBPACK_IMPORTED_MODULE_12__.DEFAULT_UI_OPTIONS\n};\n\nif (\"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(elements);\n      }\n\n    }\n  });\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (App);\n\n//# sourceURL=webpack://ExcalidrawLib/../../components/App.tsx?");
 /***/ }),
@@ -4019,7 +4019,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"Button\": () => (/* reexport safe */ _components_Button__WEBPACK_IMPORTED_MODULE_23__.Button),\n/* harmony export */   \"DefaultSidebar\": () => (/* reexport safe */ _components_DefaultSidebar__WEBPACK_IMPORTED_MODULE_24__.DefaultSidebar),\n/* harmony export */   \"Excalidraw\": () => (/* binding */ Excalidraw),\n/* harmony export */   \"FONT_FAMILY\": () => (/* reexport safe */ _constants__WEBPACK_IMPORTED_MODULE_8__.FONT_FAMILY),\n/* harmony export */   \"Footer\": () => (/* reexport safe */ _components_footer_FooterCenter__WEBPACK_IMPORTED_MODULE_10__[\"default\"]),\n/* harmony export */   \"LiveCollaborationTrigger\": () => (/* reexport safe */ _components_live_collaboration_LiveCollaborationTrigger__WEBPACK_IMPORTED_MODULE_13__[\"default\"]),\n/* harmony export */   \"MIME_TYPES\": () => (/* reexport safe */ _constants__WEBPACK_IMPORTED_MODULE_8__.MIME_TYPES),\n/* harmony export */   \"MainMenu\": () => (/* reexport safe */ _components_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_11__[\"default\"]),\n/* harmony export */   \"Sidebar\": () => (/* reexport safe */ _components_Sidebar_Sidebar__WEBPACK_IMPORTED_MODULE_22__.Sidebar),\n/* harmony export */   \"THEME\": () => (/* reexport safe */ _constants__WEBPACK_IMPORTED_MODULE_8__.THEME),\n/* harmony export */   \"WelcomeScreen\": () => (/* reexport safe */ _components_welcome_screen_WelcomeScreen__WEBPACK_IMPORTED_MODULE_12__[\"default\"]),\n/* harmony export */   \"bumpVersion\": () => (/* reexport safe */ _element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.bumpVersion),\n/* harmony export */   \"convertToExcalidrawElements\": () => (/* reexport safe */ _data_transform__WEBPACK_IMPORTED_MODULE_26__.convertToExcalidrawElements),\n/* harmony export */   \"defaultLang\": () => (/* reexport safe */ _i18n__WEBPACK_IMPORTED_MODULE_7__.defaultLang),\n/* harmony export */   \"determineFocusDistance\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.determineFocusDistance),\n/* harmony export */   \"exportToBlob\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.exportToBlob),\n/* harmony export */   \"exportToCanvas\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.exportToCanvas),\n/* harmony export */   \"exportToClipboard\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.exportToClipboard),\n/* harmony export */   \"exportToSvg\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.exportToSvg),\n/* harmony export */   \"getBoundTextMaxWidth\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.getBoundTextMaxWidth),\n/* harmony export */   \"getCommonBoundingBox\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.getCommonBoundingBox),\n/* harmony export */   \"getDefaultLineHeight\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.getDefaultLineHeight),\n/* harmony export */   \"getEmbedLink\": () => (/* reexport safe */ _element_embeddable__WEBPACK_IMPORTED_MODULE_21__.getEmbedLink),\n/* harmony export */   \"getFontString\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.getFontString),\n/* harmony export */   \"getFreeDrawSvgPath\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.getFreeDrawSvgPath),\n/* harmony export */   \"getMaximumGroups\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.getMaximumGroups),\n/* harmony export */   \"getNonDeletedElements\": () => (/* reexport safe */ _element__WEBPACK_IMPORTED_MODULE_15__.getNonDeletedElements),\n/* harmony export */   \"getSceneVersion\": () => (/* reexport safe */ _element__WEBPACK_IMPORTED_MODULE_15__.getSceneVersion),\n/* harmony export */   \"intersectElementWithLine\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.intersectElementWithLine),\n/* harmony export */   \"isInvisiblySmallElement\": () => (/* reexport safe */ _element__WEBPACK_IMPORTED_MODULE_15__.isInvisiblySmallElement),\n/* harmony export */   \"isLinearElement\": () => (/* reexport safe */ _element_typeChecks__WEBPACK_IMPORTED_MODULE_18__.isLinearElement),\n/* harmony export */   \"languages\": () => (/* reexport safe */ _i18n__WEBPACK_IMPORTED_MODULE_7__.languages),\n/* harmony export */   \"loadFromBlob\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.loadFromBlob),\n/* harmony export */   \"loadLibraryFromBlob\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.loadLibraryFromBlob),\n/* harmony export */   \"loadSceneOrLibraryFromBlob\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.loadSceneOrLibraryFromBlob),\n/* harmony export */   \"measureText\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.measureText),\n/* harmony export */   \"mergeLibraryItems\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.mergeLibraryItems),\n/* harmony export */   \"mermaidToExcalidraw\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.mermaidToExcalidraw),\n/* harmony export */   \"mutateElement\": () => (/* reexport safe */ _element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement),\n/* harmony export */   \"newElementWith\": () => (/* reexport safe */ _element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith),\n/* harmony export */   \"normalizeLink\": () => (/* reexport safe */ _data_url__WEBPACK_IMPORTED_MODULE_25__.normalizeLink),\n/* harmony export */   \"parseLibraryTokensFromUrl\": () => (/* reexport safe */ _data_library__WEBPACK_IMPORTED_MODULE_20__.parseLibraryTokensFromUrl),\n/* harmony export */   \"restore\": () => (/* reexport safe */ _data_restore__WEBPACK_IMPORTED_MODULE_16__.restore),\n/* harmony export */   \"restoreAppState\": () => (/* reexport safe */ _data_restore__WEBPACK_IMPORTED_MODULE_16__.restoreAppState),\n/* harmony export */   \"restoreElements\": () => (/* reexport safe */ _data_restore__WEBPACK_IMPORTED_MODULE_16__.restoreElements),\n/* harmony export */   \"restoreLibraryItems\": () => (/* reexport safe */ _data_restore__WEBPACK_IMPORTED_MODULE_16__.restoreLibraryItems),\n/* harmony export */   \"sceneCoordsToViewportCoords\": () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_4__.sceneCoordsToViewportCoords),\n/* harmony export */   \"serializeAsJSON\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.serializeAsJSON),\n/* harmony export */   \"serializeLibraryAsJSON\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.serializeLibraryAsJSON),\n/* harmony export */   \"useDevice\": () => (/* reexport safe */ _components_App__WEBPACK_IMPORTED_MODULE_3__.useDevice),\n/* harmony export */   \"useHandleLibrary\": () => (/* reexport safe */ _data_library__WEBPACK_IMPORTED_MODULE_20__.useHandleLibrary),\n/* harmony export */   \"useI18n\": () => (/* reexport safe */ _i18n__WEBPACK_IMPORTED_MODULE_7__.useI18n),\n/* harmony export */   \"viewportCoordsToSceneCoords\": () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_4__.viewportCoordsToSceneCoords),\n/* harmony export */   \"wrapText\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.wrapText)\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 _components_InitializeApp__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../components/InitializeApp */ \"../../components/InitializeApp.tsx\");\n/* harmony import */ var _components_App__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../components/App */ \"../../components/App.tsx\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../utils */ \"../../utils.ts\");\n/* harmony import */ var _css_app_scss__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../css/app.scss */ \"../../css/app.scss\");\n/* harmony import */ var _css_styles_scss__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../css/styles.scss */ \"../../css/styles.scss\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../i18n */ \"../../i18n.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../constants */ \"../../constants.ts\");\n/* harmony import */ var jotai__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! jotai */ \"../../../node_modules/jotai/esm/index.mjs\");\n/* harmony import */ var _jotai__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../jotai */ \"../../jotai.ts\");\n/* harmony import */ var _components_footer_FooterCenter__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../components/footer/FooterCenter */ \"../../components/footer/FooterCenter.tsx\");\n/* harmony import */ var _components_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../components/main-menu/MainMenu */ \"../../components/main-menu/MainMenu.tsx\");\n/* harmony import */ var _components_welcome_screen_WelcomeScreen__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../components/welcome-screen/WelcomeScreen */ \"../../components/welcome-screen/WelcomeScreen.tsx\");\n/* harmony import */ var _components_live_collaboration_LiveCollaborationTrigger__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../../components/live-collaboration/LiveCollaborationTrigger */ \"../../components/live-collaboration/LiveCollaborationTrigger.tsx\");\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../../element */ \"../../element/index.ts\");\n/* harmony import */ var _data_restore__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../../data/restore */ \"../../data/restore.ts\");\n/* harmony import */ var _packages_utils__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../../packages/utils */ \"../utils.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../../element/typeChecks */ \"../../element/typeChecks.ts\");\n/* harmony import */ var _element_mutateElement__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../../element/mutateElement */ \"../../element/mutateElement.ts\");\n/* harmony import */ var _data_library__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ../../data/library */ \"../../data/library.ts\");\n/* harmony import */ var _element_embeddable__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ../../element/embeddable */ \"../../element/embeddable.ts\");\n/* harmony import */ var _components_Sidebar_Sidebar__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ../../components/Sidebar/Sidebar */ \"../../components/Sidebar/Sidebar.tsx\");\n/* harmony import */ var _components_Button__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ../../components/Button */ \"../../components/Button.tsx\");\n/* harmony import */ var _components_DefaultSidebar__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ../../components/DefaultSidebar */ \"../../components/DefaultSidebar.tsx\");\n/* harmony import */ var _data_url__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ../../data/url */ \"../../data/url.ts\");\n/* harmony import */ var _data_transform__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__(/*! ../../data/transform */ \"../../data/transform.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\n\n\n\n\n\nconst ExcalidrawBase = props => {\n  var _a, _b, _c;\n\n  const {\n    onChange,\n    initialData,\n    excalidrawRef,\n    isCollaborating = false,\n    onPointerUpdate,\n    renderTopRightUI,\n    langCode = _i18n__WEBPACK_IMPORTED_MODULE_7__.defaultLang.code,\n    viewModeEnabled,\n    zenModeEnabled,\n    gridModeEnabled,\n    initState,\n    //zsviczian\n    libraryReturnUrl,\n    theme,\n    name,\n    renderCustomStats,\n    onPaste,\n    onDrop,\n    //zsviczian\n    detectScroll = true,\n    handleKeyboardGlobally = false,\n    onLibraryChange,\n    autoFocus = false,\n    onBeforeTextEdit,\n    //zsviczian\n    onBeforeTextSubmit,\n    //zsviczian\n    generateIdForFile,\n    onThemeChange,\n    //zsviczian\n    onLinkOpen,\n    onLinkHover,\n    //zsviczian\n    onViewModeChange,\n    //zsviczian\n    onPointerDown,\n    onScrollChange,\n    children,\n    validateEmbeddable,\n    renderEmbeddable,\n    renderWebview,\n    //zsviczian\n    renderEmbeddableMenu //zsviczian\n\n  } = props;\n  const canvasActions = (_a = props.UIOptions) === null || _a === void 0 ? void 0 : _a.canvasActions; // FIXME normalize/set defaults in parent component so that the memo resolver\n  // compares the same values\n\n  const UIOptions = Object.assign(Object.assign({}, props.UIOptions), {\n    canvasActions: Object.assign(Object.assign({}, _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_UI_OPTIONS.canvasActions), canvasActions)\n  });\n\n  if (canvasActions === null || canvasActions === void 0 ? void 0 : canvasActions.export) {\n    UIOptions.canvasActions.export.saveFileToDisk = (_c = (_b = canvasActions.export) === null || _b === void 0 ? void 0 : _b.saveFileToDisk) !== null && _c !== void 0 ? _c : _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_UI_OPTIONS.canvasActions[\"export\"].saveFileToDisk;\n  }\n\n  if (UIOptions.canvasActions.toggleTheme === null && typeof theme === \"undefined\") {\n    UIOptions.canvasActions.toggleTheme = true;\n  }\n\n  (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    // Block pinch-zooming on iOS outside of the content area\n    const handleTouchMove = event => {\n      // @ts-ignore\n      if (typeof event.scale === \"number\" && event.scale !== 1) {\n        event.preventDefault();\n      }\n    };\n\n    document.addEventListener(\"touchmove\", handleTouchMove, {\n      passive: false\n    });\n    return () => {\n      document.removeEventListener(\"touchmove\", handleTouchMove);\n    };\n  }, []);\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(jotai__WEBPACK_IMPORTED_MODULE_14__.Provider, Object.assign({\n    unstable_createStore: () => _jotai__WEBPACK_IMPORTED_MODULE_9__.jotaiStore,\n    scope: _jotai__WEBPACK_IMPORTED_MODULE_9__.jotaiScope\n  }, {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_InitializeApp__WEBPACK_IMPORTED_MODULE_2__.InitializeApp, Object.assign({\n      langCode: langCode,\n      theme: theme\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_App__WEBPACK_IMPORTED_MODULE_3__[\"default\"], Object.assign({\n        onChange: onChange,\n        initialData: initialData,\n        excalidrawRef: excalidrawRef,\n        isCollaborating: isCollaborating,\n        onPointerUpdate: onPointerUpdate,\n        renderTopRightUI: renderTopRightUI,\n        langCode: langCode,\n        viewModeEnabled: viewModeEnabled,\n        zenModeEnabled: zenModeEnabled,\n        gridModeEnabled: gridModeEnabled,\n        initState: initState,\n        libraryReturnUrl: libraryReturnUrl,\n        theme: theme,\n        name: name,\n        renderCustomStats: renderCustomStats,\n        UIOptions: UIOptions,\n        onPaste: onPaste,\n        onDrop: onDrop,\n        detectScroll: detectScroll,\n        handleKeyboardGlobally: handleKeyboardGlobally,\n        onLibraryChange: onLibraryChange,\n        autoFocus: autoFocus,\n        onBeforeTextEdit: onBeforeTextEdit,\n        onBeforeTextSubmit: onBeforeTextSubmit,\n        generateIdForFile: generateIdForFile,\n        onThemeChange: onThemeChange,\n        onLinkOpen: onLinkOpen,\n        onLinkHover: onLinkHover,\n        onViewModeChange: onViewModeChange,\n        onPointerDown: onPointerDown,\n        onScrollChange: onScrollChange,\n        validateEmbeddable: validateEmbeddable,\n        renderEmbeddable: renderEmbeddable,\n        renderWebview: renderWebview,\n        renderEmbeddableMenu: renderEmbeddableMenu\n      }, {\n        children: children\n      }))\n    }))\n  }));\n};\n\nconst areEqual = (prevProps, nextProps) => {\n  // short-circuit early\n  if (prevProps.children !== nextProps.children) {\n    return false;\n  }\n\n  const {\n    initialData: prevInitialData,\n    UIOptions: prevUIOptions = {}\n  } = prevProps,\n        prev = __rest(prevProps, [\"initialData\", \"UIOptions\"]);\n\n  const {\n    initialData: nextInitialData,\n    UIOptions: nextUIOptions = {}\n  } = nextProps,\n        next = __rest(nextProps, [\"initialData\", \"UIOptions\"]); // comparing UIOptions\n\n\n  const prevUIOptionsKeys = Object.keys(prevUIOptions);\n  const nextUIOptionsKeys = Object.keys(nextUIOptions);\n\n  if (prevUIOptionsKeys.length !== nextUIOptionsKeys.length) {\n    return false;\n  }\n\n  const isUIOptionsSame = prevUIOptionsKeys.every(key => {\n    if (key === \"canvasActions\") {\n      const canvasOptionKeys = Object.keys(prevUIOptions.canvasActions);\n      return canvasOptionKeys.every(key => {\n        var _a, _b, _c, _d;\n\n        if (key === \"export\" && ((_a = prevUIOptions === null || prevUIOptions === void 0 ? void 0 : prevUIOptions.canvasActions) === null || _a === void 0 ? void 0 : _a.export) && ((_b = nextUIOptions === null || nextUIOptions === void 0 ? void 0 : nextUIOptions.canvasActions) === null || _b === void 0 ? void 0 : _b.export)) {\n          return prevUIOptions.canvasActions.export.saveFileToDisk === nextUIOptions.canvasActions.export.saveFileToDisk;\n        }\n\n        return ((_c = prevUIOptions === null || prevUIOptions === void 0 ? void 0 : prevUIOptions.canvasActions) === null || _c === void 0 ? void 0 : _c[key]) === ((_d = nextUIOptions === null || nextUIOptions === void 0 ? void 0 : nextUIOptions.canvasActions) === null || _d === void 0 ? void 0 : _d[key]);\n      });\n    }\n\n    return prevUIOptions[key] === nextUIOptions[key];\n  });\n  return isUIOptionsSame && (0,_utils__WEBPACK_IMPORTED_MODULE_4__.isShallowEqual)(prev, next);\n};\n\nconst forwardedRefComp = (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((props, ref) => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ExcalidrawBase, Object.assign({}, props, {\n  excalidrawRef: ref\n})));\nconst Excalidraw = react__WEBPACK_IMPORTED_MODULE_1___default().memo(forwardedRefComp, areEqual);\nExcalidraw.displayName = \"Excalidraw\";\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n//# sourceURL=webpack://ExcalidrawLib/./index.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"Button\": () => (/* reexport safe */ _components_Button__WEBPACK_IMPORTED_MODULE_23__.Button),\n/* harmony export */   \"DefaultSidebar\": () => (/* reexport safe */ _components_DefaultSidebar__WEBPACK_IMPORTED_MODULE_24__.DefaultSidebar),\n/* harmony export */   \"Excalidraw\": () => (/* binding */ Excalidraw),\n/* harmony export */   \"FONT_FAMILY\": () => (/* reexport safe */ _constants__WEBPACK_IMPORTED_MODULE_8__.FONT_FAMILY),\n/* harmony export */   \"Footer\": () => (/* reexport safe */ _components_footer_FooterCenter__WEBPACK_IMPORTED_MODULE_10__[\"default\"]),\n/* harmony export */   \"LiveCollaborationTrigger\": () => (/* reexport safe */ _components_live_collaboration_LiveCollaborationTrigger__WEBPACK_IMPORTED_MODULE_13__[\"default\"]),\n/* harmony export */   \"MIME_TYPES\": () => (/* reexport safe */ _constants__WEBPACK_IMPORTED_MODULE_8__.MIME_TYPES),\n/* harmony export */   \"MainMenu\": () => (/* reexport safe */ _components_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_11__[\"default\"]),\n/* harmony export */   \"Sidebar\": () => (/* reexport safe */ _components_Sidebar_Sidebar__WEBPACK_IMPORTED_MODULE_22__.Sidebar),\n/* harmony export */   \"THEME\": () => (/* reexport safe */ _constants__WEBPACK_IMPORTED_MODULE_8__.THEME),\n/* harmony export */   \"WelcomeScreen\": () => (/* reexport safe */ _components_welcome_screen_WelcomeScreen__WEBPACK_IMPORTED_MODULE_12__[\"default\"]),\n/* harmony export */   \"bumpVersion\": () => (/* reexport safe */ _element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.bumpVersion),\n/* harmony export */   \"convertToExcalidrawElements\": () => (/* reexport safe */ _data_transform__WEBPACK_IMPORTED_MODULE_26__.convertToExcalidrawElements),\n/* harmony export */   \"defaultLang\": () => (/* reexport safe */ _i18n__WEBPACK_IMPORTED_MODULE_7__.defaultLang),\n/* harmony export */   \"determineFocusDistance\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.determineFocusDistance),\n/* harmony export */   \"exportToBlob\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.exportToBlob),\n/* harmony export */   \"exportToCanvas\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.exportToCanvas),\n/* harmony export */   \"exportToClipboard\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.exportToClipboard),\n/* harmony export */   \"exportToSvg\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.exportToSvg),\n/* harmony export */   \"getBoundTextMaxWidth\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.getBoundTextMaxWidth),\n/* harmony export */   \"getCommonBoundingBox\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.getCommonBoundingBox),\n/* harmony export */   \"getDefaultLineHeight\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.getDefaultLineHeight),\n/* harmony export */   \"getEmbedLink\": () => (/* reexport safe */ _element_embeddable__WEBPACK_IMPORTED_MODULE_21__.getEmbedLink),\n/* harmony export */   \"getFontString\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.getFontString),\n/* harmony export */   \"getFreeDrawSvgPath\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.getFreeDrawSvgPath),\n/* harmony export */   \"getMaximumGroups\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.getMaximumGroups),\n/* harmony export */   \"getNonDeletedElements\": () => (/* reexport safe */ _element__WEBPACK_IMPORTED_MODULE_15__.getNonDeletedElements),\n/* harmony export */   \"getSceneVersion\": () => (/* reexport safe */ _element__WEBPACK_IMPORTED_MODULE_15__.getSceneVersion),\n/* harmony export */   \"intersectElementWithLine\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.intersectElementWithLine),\n/* harmony export */   \"isInvisiblySmallElement\": () => (/* reexport safe */ _element__WEBPACK_IMPORTED_MODULE_15__.isInvisiblySmallElement),\n/* harmony export */   \"isLinearElement\": () => (/* reexport safe */ _element_typeChecks__WEBPACK_IMPORTED_MODULE_18__.isLinearElement),\n/* harmony export */   \"languages\": () => (/* reexport safe */ _i18n__WEBPACK_IMPORTED_MODULE_7__.languages),\n/* harmony export */   \"loadFromBlob\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.loadFromBlob),\n/* harmony export */   \"loadLibraryFromBlob\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.loadLibraryFromBlob),\n/* harmony export */   \"loadSceneOrLibraryFromBlob\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.loadSceneOrLibraryFromBlob),\n/* harmony export */   \"measureText\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.measureText),\n/* harmony export */   \"mergeLibraryItems\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.mergeLibraryItems),\n/* harmony export */   \"mermaidToExcalidraw\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.mermaidToExcalidraw),\n/* harmony export */   \"mutateElement\": () => (/* reexport safe */ _element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement),\n/* harmony export */   \"newElementWith\": () => (/* reexport safe */ _element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith),\n/* harmony export */   \"normalizeLink\": () => (/* reexport safe */ _data_url__WEBPACK_IMPORTED_MODULE_25__.normalizeLink),\n/* harmony export */   \"parseLibraryTokensFromUrl\": () => (/* reexport safe */ _data_library__WEBPACK_IMPORTED_MODULE_20__.parseLibraryTokensFromUrl),\n/* harmony export */   \"restore\": () => (/* reexport safe */ _data_restore__WEBPACK_IMPORTED_MODULE_16__.restore),\n/* harmony export */   \"restoreAppState\": () => (/* reexport safe */ _data_restore__WEBPACK_IMPORTED_MODULE_16__.restoreAppState),\n/* harmony export */   \"restoreElements\": () => (/* reexport safe */ _data_restore__WEBPACK_IMPORTED_MODULE_16__.restoreElements),\n/* harmony export */   \"restoreLibraryItems\": () => (/* reexport safe */ _data_restore__WEBPACK_IMPORTED_MODULE_16__.restoreLibraryItems),\n/* harmony export */   \"sceneCoordsToViewportCoords\": () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_4__.sceneCoordsToViewportCoords),\n/* harmony export */   \"serializeAsJSON\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.serializeAsJSON),\n/* harmony export */   \"serializeLibraryAsJSON\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.serializeLibraryAsJSON),\n/* harmony export */   \"useDevice\": () => (/* reexport safe */ _components_App__WEBPACK_IMPORTED_MODULE_3__.useDevice),\n/* harmony export */   \"useHandleLibrary\": () => (/* reexport safe */ _data_library__WEBPACK_IMPORTED_MODULE_20__.useHandleLibrary),\n/* harmony export */   \"useI18n\": () => (/* reexport safe */ _i18n__WEBPACK_IMPORTED_MODULE_7__.useI18n),\n/* harmony export */   \"viewportCoordsToSceneCoords\": () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_4__.viewportCoordsToSceneCoords),\n/* harmony export */   \"wrapText\": () => (/* reexport safe */ _packages_utils__WEBPACK_IMPORTED_MODULE_17__.wrapText)\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 _components_InitializeApp__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../components/InitializeApp */ \"../../components/InitializeApp.tsx\");\n/* harmony import */ var _components_App__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../components/App */ \"../../components/App.tsx\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../utils */ \"../../utils.ts\");\n/* harmony import */ var _css_app_scss__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../css/app.scss */ \"../../css/app.scss\");\n/* harmony import */ var _css_styles_scss__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../css/styles.scss */ \"../../css/styles.scss\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../i18n */ \"../../i18n.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../constants */ \"../../constants.ts\");\n/* harmony import */ var jotai__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! jotai */ \"../../../node_modules/jotai/esm/index.mjs\");\n/* harmony import */ var _jotai__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../jotai */ \"../../jotai.ts\");\n/* harmony import */ var _components_footer_FooterCenter__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../components/footer/FooterCenter */ \"../../components/footer/FooterCenter.tsx\");\n/* harmony import */ var _components_main_menu_MainMenu__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../components/main-menu/MainMenu */ \"../../components/main-menu/MainMenu.tsx\");\n/* harmony import */ var _components_welcome_screen_WelcomeScreen__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../components/welcome-screen/WelcomeScreen */ \"../../components/welcome-screen/WelcomeScreen.tsx\");\n/* harmony import */ var _components_live_collaboration_LiveCollaborationTrigger__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../../components/live-collaboration/LiveCollaborationTrigger */ \"../../components/live-collaboration/LiveCollaborationTrigger.tsx\");\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../../element */ \"../../element/index.ts\");\n/* harmony import */ var _data_restore__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../../data/restore */ \"../../data/restore.ts\");\n/* harmony import */ var _packages_utils__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../../packages/utils */ \"../utils.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../../element/typeChecks */ \"../../element/typeChecks.ts\");\n/* harmony import */ var _element_mutateElement__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../../element/mutateElement */ \"../../element/mutateElement.ts\");\n/* harmony import */ var _data_library__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ../../data/library */ \"../../data/library.ts\");\n/* harmony import */ var _element_embeddable__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ../../element/embeddable */ \"../../element/embeddable.ts\");\n/* harmony import */ var _components_Sidebar_Sidebar__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ../../components/Sidebar/Sidebar */ \"../../components/Sidebar/Sidebar.tsx\");\n/* harmony import */ var _components_Button__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ../../components/Button */ \"../../components/Button.tsx\");\n/* harmony import */ var _components_DefaultSidebar__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ../../components/DefaultSidebar */ \"../../components/DefaultSidebar.tsx\");\n/* harmony import */ var _data_url__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ../../data/url */ \"../../data/url.ts\");\n/* harmony import */ var _data_transform__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__(/*! ../../data/transform */ \"../../data/transform.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\n\n\n\n\n\nconst ExcalidrawBase = props => {\n  var _a, _b, _c;\n\n  const {\n    onChange,\n    initialData,\n    excalidrawRef,\n    isCollaborating = false,\n    onPointerUpdate,\n    renderTopRightUI,\n    langCode = _i18n__WEBPACK_IMPORTED_MODULE_7__.defaultLang.code,\n    viewModeEnabled,\n    zenModeEnabled,\n    gridModeEnabled,\n    initState,\n    //zsviczian\n    libraryReturnUrl,\n    theme,\n    name,\n    renderCustomStats,\n    onPaste,\n    onDrop,\n    //zsviczian\n    detectScroll = true,\n    handleKeyboardGlobally = false,\n    onLibraryChange,\n    autoFocus = false,\n    onBeforeTextEdit,\n    //zsviczian\n    onBeforeTextSubmit,\n    //zsviczian\n    generateIdForFile,\n    onThemeChange,\n    //zsviczian\n    onLinkOpen,\n    onLinkHover,\n    //zsviczian\n    onViewModeChange,\n    //zsviczian\n    onPointerDown,\n    onScrollChange,\n    children,\n    validateEmbeddable,\n    renderEmbeddable,\n    renderWebview,\n    //zsviczian\n    renderEmbeddableMenu,\n    //zsviczian\n    renderMermaid //zsviczian\n\n  } = props;\n  const canvasActions = (_a = props.UIOptions) === null || _a === void 0 ? void 0 : _a.canvasActions; // FIXME normalize/set defaults in parent component so that the memo resolver\n  // compares the same values\n\n  const UIOptions = Object.assign(Object.assign({}, props.UIOptions), {\n    canvasActions: Object.assign(Object.assign({}, _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_UI_OPTIONS.canvasActions), canvasActions)\n  });\n\n  if (canvasActions === null || canvasActions === void 0 ? void 0 : canvasActions.export) {\n    UIOptions.canvasActions.export.saveFileToDisk = (_c = (_b = canvasActions.export) === null || _b === void 0 ? void 0 : _b.saveFileToDisk) !== null && _c !== void 0 ? _c : _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_UI_OPTIONS.canvasActions[\"export\"].saveFileToDisk;\n  }\n\n  if (UIOptions.canvasActions.toggleTheme === null && typeof theme === \"undefined\") {\n    UIOptions.canvasActions.toggleTheme = true;\n  }\n\n  (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    // Block pinch-zooming on iOS outside of the content area\n    const handleTouchMove = event => {\n      // @ts-ignore\n      if (typeof event.scale === \"number\" && event.scale !== 1) {\n        event.preventDefault();\n      }\n    };\n\n    document.addEventListener(\"touchmove\", handleTouchMove, {\n      passive: false\n    });\n    return () => {\n      document.removeEventListener(\"touchmove\", handleTouchMove);\n    };\n  }, []);\n  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(jotai__WEBPACK_IMPORTED_MODULE_14__.Provider, Object.assign({\n    unstable_createStore: () => _jotai__WEBPACK_IMPORTED_MODULE_9__.jotaiStore,\n    scope: _jotai__WEBPACK_IMPORTED_MODULE_9__.jotaiScope\n  }, {\n    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_InitializeApp__WEBPACK_IMPORTED_MODULE_2__.InitializeApp, Object.assign({\n      langCode: langCode,\n      theme: theme\n    }, {\n      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_App__WEBPACK_IMPORTED_MODULE_3__[\"default\"], Object.assign({\n        onChange: onChange,\n        initialData: initialData,\n        excalidrawRef: excalidrawRef,\n        isCollaborating: isCollaborating,\n        onPointerUpdate: onPointerUpdate,\n        renderTopRightUI: renderTopRightUI,\n        langCode: langCode,\n        viewModeEnabled: viewModeEnabled,\n        zenModeEnabled: zenModeEnabled,\n        gridModeEnabled: gridModeEnabled,\n        initState: initState,\n        libraryReturnUrl: libraryReturnUrl,\n        theme: theme,\n        name: name,\n        renderCustomStats: renderCustomStats,\n        UIOptions: UIOptions,\n        onPaste: onPaste,\n        onDrop: onDrop,\n        detectScroll: detectScroll,\n        handleKeyboardGlobally: handleKeyboardGlobally,\n        onLibraryChange: onLibraryChange,\n        autoFocus: autoFocus,\n        onBeforeTextEdit: onBeforeTextEdit,\n        onBeforeTextSubmit: onBeforeTextSubmit,\n        generateIdForFile: generateIdForFile,\n        onThemeChange: onThemeChange,\n        onLinkOpen: onLinkOpen,\n        onLinkHover: onLinkHover,\n        onViewModeChange: onViewModeChange,\n        onPointerDown: onPointerDown,\n        onScrollChange: onScrollChange,\n        validateEmbeddable: validateEmbeddable,\n        renderEmbeddable: renderEmbeddable,\n        renderWebview: renderWebview,\n        renderEmbeddableMenu: renderEmbeddableMenu,\n        renderMermaid: renderMermaid\n      }, {\n        children: children\n      }))\n    }))\n  }));\n};\n\nconst areEqual = (prevProps, nextProps) => {\n  // short-circuit early\n  if (prevProps.children !== nextProps.children) {\n    return false;\n  }\n\n  const {\n    initialData: prevInitialData,\n    UIOptions: prevUIOptions = {}\n  } = prevProps,\n        prev = __rest(prevProps, [\"initialData\", \"UIOptions\"]);\n\n  const {\n    initialData: nextInitialData,\n    UIOptions: nextUIOptions = {}\n  } = nextProps,\n        next = __rest(nextProps, [\"initialData\", \"UIOptions\"]); // comparing UIOptions\n\n\n  const prevUIOptionsKeys = Object.keys(prevUIOptions);\n  const nextUIOptionsKeys = Object.keys(nextUIOptions);\n\n  if (prevUIOptionsKeys.length !== nextUIOptionsKeys.length) {\n    return false;\n  }\n\n  const isUIOptionsSame = prevUIOptionsKeys.every(key => {\n    if (key === \"canvasActions\") {\n      const canvasOptionKeys = Object.keys(prevUIOptions.canvasActions);\n      return canvasOptionKeys.every(key => {\n        var _a, _b, _c, _d;\n\n        if (key === \"export\" && ((_a = prevUIOptions === null || prevUIOptions === void 0 ? void 0 : prevUIOptions.canvasActions) === null || _a === void 0 ? void 0 : _a.export) && ((_b = nextUIOptions === null || nextUIOptions === void 0 ? void 0 : nextUIOptions.canvasActions) === null || _b === void 0 ? void 0 : _b.export)) {\n          return prevUIOptions.canvasActions.export.saveFileToDisk === nextUIOptions.canvasActions.export.saveFileToDisk;\n        }\n\n        return ((_c = prevUIOptions === null || prevUIOptions === void 0 ? void 0 : prevUIOptions.canvasActions) === null || _c === void 0 ? void 0 : _c[key]) === ((_d = nextUIOptions === null || nextUIOptions === void 0 ? void 0 : nextUIOptions.canvasActions) === null || _d === void 0 ? void 0 : _d[key]);\n      });\n    }\n\n    return prevUIOptions[key] === nextUIOptions[key];\n  });\n  return isUIOptionsSame && (0,_utils__WEBPACK_IMPORTED_MODULE_4__.isShallowEqual)(prev, next);\n};\n\nconst forwardedRefComp = (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((props, ref) => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ExcalidrawBase, Object.assign({}, props, {\n  excalidrawRef: ref\n})));\nconst Excalidraw = react__WEBPACK_IMPORTED_MODULE_1___default().memo(forwardedRefComp, areEqual);\nExcalidraw.displayName = \"Excalidraw\";\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n//# sourceURL=webpack://ExcalidrawLib/./index.tsx?");
 /***/ }),
@@ -4030,7 +4030,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 "use strict";
-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.16.1-obsidian-1\"}/dist/`;\n}\n\n//# sourceURL=webpack://ExcalidrawLib/./publicPath.js?");
+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.16.1-obsidian-2\"}/dist/`;\n}\n\n//# sourceURL=webpack://ExcalidrawLib/./publicPath.js?");
 /***/ }),
@@ -5222,6 +5222,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ }),
+/***/ "../../../node_modules/@zsviczian/mermaid-to-excalidraw/dist/obsidianUtil.js":
+/*!***********************************************************************************!*\
+  !*** ../../../node_modules/@zsviczian/mermaid-to-excalidraw/dist/obsidianUtil.js ***!
+  \***********************************************************************************/
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"replaceSVGStyle\": () => (/* binding */ replaceSVGStyle)\n/* harmony export */ });\nconst style = `#mermaid-to-excalidraw{font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:25px;fill:#333;}#mermaid-to-excalidraw .error-icon{fill:#552222;}#mermaid-to-excalidraw .error-text{fill:#552222;stroke:#552222;}#mermaid-to-excalidraw .edge-thickness-normal{stroke-width:2px;}#mermaid-to-excalidraw .edge-thickness-thick{stroke-width:3.5px;}#mermaid-to-excalidraw .edge-pattern-solid{stroke-dasharray:0;}#mermaid-to-excalidraw .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-to-excalidraw .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-to-excalidraw .marker{fill:#333333;stroke:#333333;}#mermaid-to-excalidraw .marker.cross{stroke:#333333;}#mermaid-to-excalidraw svg{font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:25px;}#mermaid-to-excalidraw g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:10px;}#mermaid-to-excalidraw g.classGroup text .title{font-weight:bolder;}#mermaid-to-excalidraw .nodeLabel,#mermaid-to-excalidraw .edgeLabel{color:#131300;}#mermaid-to-excalidraw .edgeLabel .label rect{fill:#ECECFF;}#mermaid-to-excalidraw .label text{fill:#131300;}#mermaid-to-excalidraw .edgeLabel .label span{background:#ECECFF;}#mermaid-to-excalidraw .classTitle{font-weight:bolder;}#mermaid-to-excalidraw .node rect,#mermaid-to-excalidraw .node circle,#mermaid-to-excalidraw .node ellipse,#mermaid-to-excalidraw .node polygon,#mermaid-to-excalidraw .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-to-excalidraw .divider{stroke:#9370DB;stroke-width:1;}#mermaid-to-excalidraw g.clickable{cursor:pointer;}#mermaid-to-excalidraw g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-to-excalidraw g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-to-excalidraw .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-to-excalidraw .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-to-excalidraw .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-to-excalidraw .dashed-line{stroke-dasharray:3;}#mermaid-to-excalidraw .dotted-line{stroke-dasharray:1 2;}#mermaid-to-excalidraw #compositionStart,#mermaid-to-excalidraw .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-to-excalidraw #compositionEnd,#mermaid-to-excalidraw .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-to-excalidraw #dependencyStart,#mermaid-to-excalidraw .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-to-excalidraw #dependencyStart,#mermaid-to-excalidraw .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-to-excalidraw #extensionStart,#mermaid-to-excalidraw .extension{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-to-excalidraw #extensionEnd,#mermaid-to-excalidraw .extension{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-to-excalidraw #aggregationStart,#mermaid-to-excalidraw .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-to-excalidraw #aggregationEnd,#mermaid-to-excalidraw .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-to-excalidraw #lollipopStart,#mermaid-to-excalidraw .lollipop{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-to-excalidraw #lollipopEnd,#mermaid-to-excalidraw .lollipop{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-to-excalidraw .edgeTerminals{font-size:11px;}#mermaid-to-excalidraw .classTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-to-excalidraw :root{--mermaid-font-family:\"trebuchet ms\",verdana,arial,sans-serif;}`;\nconst replaceSVGStyle = (svg) => {\n    const svgWithStyle = svg.replace(/<style>.*<\\/style>/i, `<style>${style}</style>`);\n    return svgWithStyle;\n};\n\n\n//# sourceURL=webpack://ExcalidrawLib/../../../node_modules/@zsviczian/mermaid-to-excalidraw/dist/obsidianUtil.js?");
+/***/ }),
 /***/ "../../../node_modules/@zsviczian/mermaid-to-excalidraw/dist/parseMermaid.js":
 /*!***********************************************************************************!*\
   !*** ../../../node_modules/@zsviczian/mermaid-to-excalidraw/dist/parseMermaid.js ***!
@@ -5229,7 +5240,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"parseMermaid\": () => (/* binding */ parseMermaid)\n/* harmony export */ });\n/* harmony import */ var _constants_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./constants.js */ \"../../../node_modules/@zsviczian/mermaid-to-excalidraw/dist/constants.js\");\n/* harmony import */ var _utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils.js */ \"../../../node_modules/@zsviczian/mermaid-to-excalidraw/dist/utils.js\");\n/* harmony import */ var _parser_flowchart_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./parser/flowchart.js */ \"../../../node_modules/@zsviczian/mermaid-to-excalidraw/dist/parser/flowchart.js\");\n\n\n\nconst mermaid = window.mermaid;\nconst processMermaidTextWithOptions = (definition, options) => {\n    const diagramInitOptions = {\n        // Add options for rendering flowchart in linear curves (for better extracting arrow path points) and custom font size\n        flowchart: {\n            curve: options?.curve || \"basis\",\n        },\n        // Increase the Mermaid's font size by multiplying with 1.25 to match the Excalidraw Virgil font\n        themeVariables: {\n            fontSize: `${(options?.fontSize || _constants_js__WEBPACK_IMPORTED_MODULE_0__.DEFAULT_FONT_SIZE) * 1.25}px`,\n        },\n    };\n    const fullDefinition = `%%{init: ${JSON.stringify(diagramInitOptions)}}%%\\n${definition}`;\n    return fullDefinition;\n};\n// Fallback to Svg\nconst convertSvgToGraphImage = (svgContainer) => {\n    // Extract SVG width and height\n    // TODO: make width and height change dynamically based on user's screen dimension\n    const svgEl = svgContainer.querySelector(\"svg\");\n    if (!svgEl) {\n        throw new Error(\"SVG element not found\");\n    }\n    const rect = svgEl.getBoundingClientRect();\n    const width = rect.width;\n    const height = rect.height;\n    // Set width and height explictly since in firefox it gets set to 0\n    // if the width and height are not expilcitly set\n    // eg in some cases like er Diagram, gnatt, width and height is set as 100%\n    // which sets the dimensions as 0 in firefox and thus the diagram isn't rendered\n    svgEl.setAttribute(\"width\", `${width}`);\n    svgEl.setAttribute(\"height\", `${height}`);\n    // Convert SVG to image\n    const mimeType = \"image/svg+xml\";\n    const decoded = unescape(encodeURIComponent(svgEl.outerHTML));\n    const base64 = btoa(decoded);\n    const dataURL = `data:image/svg+xml;base64,${base64}`;\n    const graphImage = {\n        type: \"graphImage\",\n        mimeType,\n        dataURL,\n        width,\n        height,\n    };\n    return graphImage;\n};\nconst parseMermaid = async (definition, options = {}) => {\n    //mermaid.initialize({ startOnLoad: false });\n    const fullDefinition = processMermaidTextWithOptions(definition, {\n        curve: (0,_utils_js__WEBPACK_IMPORTED_MODULE_1__.isSupportedDiagram)(definition) ? \"linear\" : \"basis\",\n        fontSize: options.fontSize,\n    });\n    // Parse the diagram\n    const diagram = await mermaid.mermaidAPI.getDiagramFromText(fullDefinition);\n    // Render the SVG diagram\n    const { svg } = await mermaid.render(\"mermaid-to-excalidraw\", fullDefinition);\n    // Append Svg to DOM\n    const svgContainer = document.createElement(\"div\");\n    svgContainer.setAttribute(\"style\", `opacity: 0; position: relative; z-index: -1;`);\n    svgContainer.innerHTML = svg;\n    svgContainer.id = \"mermaid-diagram\";\n    document.body.appendChild(svgContainer);\n    let data;\n    switch (diagram.type) {\n        case \"flowchart-v2\": {\n            data = (0,_parser_flowchart_js__WEBPACK_IMPORTED_MODULE_2__.parseMermaidFlowChartDiagram)(diagram, svgContainer);\n            break;\n        }\n        // fallback to image if diagram type not-supported\n        default: {\n            data = convertSvgToGraphImage(svgContainer);\n        }\n    }\n    svgContainer.remove();\n    return data;\n};\n\n\n//# sourceURL=webpack://ExcalidrawLib/../../../node_modules/@zsviczian/mermaid-to-excalidraw/dist/parseMermaid.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"parseMermaid\": () => (/* binding */ parseMermaid)\n/* harmony export */ });\n/* harmony import */ var _constants_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./constants.js */ \"../../../node_modules/@zsviczian/mermaid-to-excalidraw/dist/constants.js\");\n/* harmony import */ var _utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils.js */ \"../../../node_modules/@zsviczian/mermaid-to-excalidraw/dist/utils.js\");\n/* harmony import */ var _parser_flowchart_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./parser/flowchart.js */ \"../../../node_modules/@zsviczian/mermaid-to-excalidraw/dist/parser/flowchart.js\");\n/* harmony import */ var _obsidianUtil_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./obsidianUtil.js */ \"../../../node_modules/@zsviczian/mermaid-to-excalidraw/dist/obsidianUtil.js\");\n\n\n\n //zsviczian\nconst processMermaidTextWithOptions = (definition, options) => {\n    const diagramInitOptions = {\n        // Add options for rendering flowchart in linear curves (for better extracting arrow path points) and custom font size\n        flowchart: {\n            curve: options?.curve || \"basis\",\n        },\n        // Increase the Mermaid's font size by multiplying with 1.25 to match the Excalidraw Virgil font\n        themeVariables: {\n            fontSize: `${(options?.fontSize || _constants_js__WEBPACK_IMPORTED_MODULE_0__.DEFAULT_FONT_SIZE) * 1.25}px`,\n        },\n    };\n    const fullDefinition = `%%{init: ${JSON.stringify(diagramInitOptions)}}%%\\n${definition}`;\n    return fullDefinition;\n};\n// Fallback to Svg\nconst convertSvgToGraphImage = (svgContainer) => {\n    // Extract SVG width and height\n    // TODO: make width and height change dynamically based on user's screen dimension\n    const svgEl = svgContainer.querySelector(\"svg\");\n    if (!svgEl) {\n        throw new Error(\"SVG element not found\");\n    }\n    const rect = svgEl.getBoundingClientRect();\n    const width = rect.width;\n    const height = rect.height;\n    // Set width and height explictly since in firefox it gets set to 0\n    // if the width and height are not expilcitly set\n    // eg in some cases like er Diagram, gnatt, width and height is set as 100%\n    // which sets the dimensions as 0 in firefox and thus the diagram isn't rendered\n    svgEl.setAttribute(\"width\", `${width}`);\n    svgEl.setAttribute(\"height\", `${height}`);\n    // Convert SVG to image\n    const mimeType = \"image/svg+xml\";\n    const decoded = unescape(encodeURIComponent(svgEl.outerHTML));\n    const base64 = btoa(decoded);\n    const dataURL = `data:image/svg+xml;base64,${base64}`;\n    const graphImage = {\n        type: \"graphImage\",\n        mimeType,\n        dataURL,\n        width,\n        height,\n    };\n    return graphImage;\n};\nconst parseMermaid = async (definition, options = {}) => {\n    //mermaid.initialize({ startOnLoad: false });\n    const fullDefinition = processMermaidTextWithOptions(definition, {\n        curve: (0,_utils_js__WEBPACK_IMPORTED_MODULE_1__.isSupportedDiagram)(definition) ? \"linear\" : \"basis\",\n        fontSize: options.fontSize,\n    });\n    // Parse the diagram //zsviczian\n    const diagram = await window.mermaid.mermaidAPI.getDiagramFromText(fullDefinition);\n    // Render the SVG diagram //zsviczian\n    const { svg } = await window.mermaid.render(\"mermaid-to-excalidraw\", fullDefinition);\n    // Append Svg to DOM\n    const svgContainer = document.createElement(\"div\");\n    svgContainer.setAttribute(\"style\", `opacity: 0; position: relative; z-index: -1;`);\n    svgContainer.innerHTML = (0,_obsidianUtil_js__WEBPACK_IMPORTED_MODULE_3__.replaceSVGStyle)(svg); //zsviczian\n    svgContainer.id = \"mermaid-diagram\";\n    document.body.appendChild(svgContainer);\n    let data;\n    switch (diagram.type) {\n        case \"flowchart-v2\": {\n            data = (0,_parser_flowchart_js__WEBPACK_IMPORTED_MODULE_2__.parseMermaidFlowChartDiagram)(diagram, svgContainer);\n            break;\n        }\n        // fallback to image if diagram type not-supported\n        default: {\n            data = convertSvgToGraphImage(svgContainer);\n        }\n    }\n    svgContainer.remove();\n    return data;\n};\n\n\n//# sourceURL=webpack://ExcalidrawLib/../../../node_modules/@zsviczian/mermaid-to-excalidraw/dist/parseMermaid.js?");
 /***/ }),