@zsviczian/excalidraw 0.17.1-obsidian-52 → 0.17.1-obsidian-55
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/excalidraw.development.js +21 -21
- package/dist/excalidraw.production.min.js +1 -1
- package/dist/styles.development.css +2 -2
- package/dist/styles.production.css +1 -1
- package/package.json +1 -1
- package/types/excalidraw/actions/actionClipboard.d.ts +1 -0
- package/types/excalidraw/actions/actionDeleteSelected.d.ts +1 -0
- package/types/excalidraw/constants.d.ts +1 -1
- package/types/excalidraw/data/encode.d.ts +1 -0
- package/types/excalidraw/element/linearElementEditor.d.ts +1 -0
- package/types/excalidraw/element/routing.d.ts +8 -6
- package/types/excalidraw/element/typeChecks.d.ts +1 -1
- package/types/excalidraw/element/types.d.ts +1 -2
- package/types/excalidraw/obsidianUtils.d.ts +0 -1
- package/types/excalidraw/scene/Scene.d.ts +1 -1
- package/types/excalidraw/scene/ShapeCache.d.ts +1 -1
- package/types/excalidraw/scene/comparisons.d.ts +477 -1
- package/types/excalidraw/visualdebug.d.ts +2 -2
|
@@ -496,7 +496,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
496
496
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
497
497
|
|
|
498
498
|
"use strict";
|
|
499
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"actionFinalize\": () => (/* binding */ actionFinalize)\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 _keys__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../keys */ \"./keys.ts\");\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _components_ToolButton__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../components/ToolButton */ \"./components/ToolButton.tsx\");\n/* harmony import */ var _components_icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../components/icons */ \"./components/icons.tsx\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../i18n */ \"./i18n.ts\");\n/* harmony import */ var _register__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./register */ \"./actions/register.ts\");\n/* harmony import */ var _element_mutateElement__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../element/mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../element/linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _element_binding__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../element/binding */ \"./element/binding.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _cursor__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../cursor */ \"./cursor.ts\");\n/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../store */ \"./store.ts\");\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../../math */ \"../math/index.ts\");\n/* harmony import */ var _shapes__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../shapes */ \"./shapes.tsx\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst actionFinalize = (0,_register__WEBPACK_IMPORTED_MODULE_7__.register)({\n name: \"finalize\",\n label: \"\",\n trackEvent: false,\n perform: (elements, appState, _, app) => {\n var _a;\n\n const {\n interactiveCanvas,\n focusContainer,\n scene\n } = app;\n const elementsMap = scene.getNonDeletedElementsMap();\n\n if (appState.editingLinearElement) {\n const {\n elementId,\n startBindingElement,\n endBindingElement\n } = appState.editingLinearElement;\n const element = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_9__.LinearElementEditor.getElement(elementId, elementsMap);\n\n if (element) {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_11__.isBindingElement)(element)) {\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_10__.bindOrUnbindLinearElement)(element, startBindingElement, endBindingElement, elementsMap, scene);\n }\n\n return {\n elements: element.points.length < 2 || (0,_element__WEBPACK_IMPORTED_MODULE_2__.isInvisiblySmallElement)(element) ? elements.filter(el => el.id !== element.id) : undefined,\n appState: Object.assign(Object.assign({}, appState), {\n cursorButton: \"up\",\n editingLinearElement: null\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_13__.StoreAction.CAPTURE\n };\n }\n }\n\n let newElements = elements;\n const pendingImageElement = appState.pendingImageElementId && scene.getElement(appState.pendingImageElementId);\n\n if (pendingImageElement) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_8__.mutateElement)(pendingImageElement, {\n isDeleted: true\n }, false);\n }\n\n if (window.document.activeElement instanceof HTMLElement) {\n focusContainer();\n }\n\n const multiPointElement = appState.multiElement ? appState.multiElement : ((_a = appState.newElement) === null || _a === void 0 ? void 0 : _a.type) === \"freedraw\" ? appState.newElement : null;\n\n if (multiPointElement) {\n // pen and mouse have hover\n if (multiPointElement.type !== \"freedraw\" && appState.lastPointerDownWith !== \"touch\") {\n const {\n points,\n lastCommittedPoint\n } = multiPointElement;\n\n if (!lastCommittedPoint || points[points.length - 1] !== lastCommittedPoint) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_8__.mutateElement)(multiPointElement, {\n points: multiPointElement.points.slice(0, -1)\n });\n }\n }\n\n if ((0,_element__WEBPACK_IMPORTED_MODULE_2__.isInvisiblySmallElement)(multiPointElement)) {\n // TODO: #7348 in theory this gets recorded by the store, so the invisible elements could be restored by the undo/redo, which might be not what we would want\n newElements = newElements.filter(el => el.id !== multiPointElement.id);\n } // If the multi point line closes the loop,\n // set the last point to first point.\n // This ensures that loop remains closed at different scales.\n\n\n const isLoop = (0,_shapes__WEBPACK_IMPORTED_MODULE_15__.isPathALoop)(multiPointElement.points, appState.zoom.value);\n\n if (multiPointElement.type === \"line\") {\n //zsviczian multiPointElement.type === \"freedraw\"\n if (isLoop) {\n const linePoints = multiPointElement.points;\n const firstPoint = linePoints[0];\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_8__.mutateElement)(multiPointElement, {\n points: linePoints.map((p, index) => index === linePoints.length - 1 ? (0,_math__WEBPACK_IMPORTED_MODULE_14__.point)(firstPoint[0], firstPoint[1]) : p)\n });\n }\n }\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_11__.isBindingElement)(multiPointElement) && !isLoop && multiPointElement.points.length > 1) {\n const [x, y] = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_9__.LinearElementEditor.getPointAtIndexGlobalCoordinates(multiPointElement, -1, (0,_utils__WEBPACK_IMPORTED_MODULE_3__.arrayToMap)(elements));\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_10__.maybeBindLinearElement)(multiPointElement, appState, {\n x,\n y\n }, elementsMap, elements);\n }\n }\n\n if (!appState.activeTool.locked && appState.activeTool.type !== \"freedraw\" || !multiPointElement) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_12__.resetCursor)(interactiveCanvas);\n }\n\n let activeTool;\n\n if (appState.activeTool.type === \"eraser\") {\n activeTool = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.updateActiveTool)(appState, Object.assign(Object.assign({}, appState.activeTool.lastActiveTool || {\n type: \"selection\"\n }), {\n lastActiveToolBeforeEraser: null\n }));\n } else {\n activeTool = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.updateActiveTool)(appState, {\n type: \"selection\"\n });\n }\n\n return {\n elements: newElements,\n appState: Object.assign(Object.assign({}, appState), {\n cursorButton: \"up\",\n activeTool: (appState.activeTool.locked || appState.activeTool.type === \"freedraw\") && multiPointElement ? appState.activeTool : activeTool,\n activeEmbeddable: null,\n newElement: null,\n selectionElement: null,\n multiElement: null,\n editingTextElement: null,\n startBoundElement: null,\n suggestedBindings: [],\n selectedElementIds: multiPointElement && !appState.activeTool.locked && appState.activeTool.type !== \"freedraw\" ? Object.assign(Object.assign({}, appState.selectedElementIds), {\n [multiPointElement.id]: true\n }) : appState.selectedElementIds,\n // To select the linear element when user has finished mutipoint editing\n selectedLinearElement: multiPointElement && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_11__.isLinearElement)(multiPointElement) ? new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_9__.LinearElementEditor(multiPointElement) : appState.selectedLinearElement,\n pendingImageElementId: null\n }),\n // TODO: #7348 we should not capture everything, but if we don't, it leads to incosistencies -> revisit\n storeAction: _store__WEBPACK_IMPORTED_MODULE_13__.StoreAction.CAPTURE\n };\n },\n keyTest: (event, appState) => event.key === _keys__WEBPACK_IMPORTED_MODULE_1__.KEYS.ESCAPE && (appState.editingLinearElement !== null || !appState.newElement && appState.multiElement === null) || (event.key === _keys__WEBPACK_IMPORTED_MODULE_1__.KEYS.ESCAPE || event.key === _keys__WEBPACK_IMPORTED_MODULE_1__.KEYS.ENTER) && appState.multiElement !== null,\n PanelComponent: ({\n appState,\n updateData,\n data\n }) => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ToolButton__WEBPACK_IMPORTED_MODULE_4__.ToolButton, {\n type: \"button\",\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_5__.done,\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_6__.t)(\"buttons.done\"),\n \"aria-label\": (0,_i18n__WEBPACK_IMPORTED_MODULE_6__.t)(\"buttons.done\"),\n onClick: updateData,\n visible: appState.multiElement != null,\n size: (data === null || data === void 0 ? void 0 : data.size) || \"medium\"\n })\n});\n\n//# sourceURL=webpack://ExcalidrawLib/./actions/actionFinalize.tsx?");
|
|
499
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"actionFinalize\": () => (/* binding */ actionFinalize)\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 _keys__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../keys */ \"./keys.ts\");\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _components_ToolButton__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../components/ToolButton */ \"./components/ToolButton.tsx\");\n/* harmony import */ var _components_icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../components/icons */ \"./components/icons.tsx\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../i18n */ \"./i18n.ts\");\n/* harmony import */ var _register__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./register */ \"./actions/register.ts\");\n/* harmony import */ var _element_mutateElement__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../element/mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../element/linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _element_binding__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../element/binding */ \"./element/binding.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _cursor__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../cursor */ \"./cursor.ts\");\n/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../store */ \"./store.ts\");\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../../math */ \"../math/index.ts\");\n/* harmony import */ var _shapes__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../shapes */ \"./shapes.tsx\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst actionFinalize = (0,_register__WEBPACK_IMPORTED_MODULE_7__.register)({\n name: \"finalize\",\n label: \"\",\n trackEvent: false,\n perform: (elements, appState, _, app) => {\n var _a;\n\n const {\n interactiveCanvas,\n focusContainer,\n scene\n } = app;\n const elementsMap = scene.getNonDeletedElementsMap();\n\n if (appState.editingLinearElement) {\n const {\n elementId,\n startBindingElement,\n endBindingElement\n } = appState.editingLinearElement;\n const element = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_9__.LinearElementEditor.getElement(elementId, elementsMap);\n\n if (element) {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_11__.isBindingElement)(element)) {\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_10__.bindOrUnbindLinearElement)(element, startBindingElement, endBindingElement, elementsMap, scene);\n }\n\n return {\n elements: element.points.length < 2 || (0,_element__WEBPACK_IMPORTED_MODULE_2__.isInvisiblySmallElement)(element) ? elements.filter(el => el.id !== element.id) : undefined,\n appState: Object.assign(Object.assign({}, appState), {\n cursorButton: \"up\",\n editingLinearElement: null\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_13__.StoreAction.CAPTURE\n };\n }\n }\n\n let newElements = elements;\n const pendingImageElement = appState.pendingImageElementId && scene.getElement(appState.pendingImageElementId);\n\n if (pendingImageElement) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_8__.mutateElement)(pendingImageElement, {\n isDeleted: true\n }, false);\n }\n\n if (window.document.activeElement instanceof HTMLElement) {\n focusContainer();\n }\n\n const multiPointElement = appState.multiElement ? appState.multiElement : ((_a = appState.newElement) === null || _a === void 0 ? void 0 : _a.type) === \"freedraw\" ? appState.newElement : null;\n\n if (multiPointElement) {\n // pen and mouse have hover\n if (multiPointElement.type !== \"freedraw\" && appState.lastPointerDownWith !== \"touch\") {\n const {\n points,\n lastCommittedPoint\n } = multiPointElement;\n\n if (!lastCommittedPoint || points[points.length - 1] !== lastCommittedPoint) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_8__.mutateElement)(multiPointElement, {\n points: multiPointElement.points.slice(0, -1)\n });\n }\n }\n\n if ((0,_element__WEBPACK_IMPORTED_MODULE_2__.isInvisiblySmallElement)(multiPointElement)) {\n // TODO: #7348 in theory this gets recorded by the store, so the invisible elements could be restored by the undo/redo, which might be not what we would want\n newElements = newElements.filter(el => el.id !== multiPointElement.id);\n } // If the multi point line closes the loop,\n // set the last point to first point.\n // This ensures that loop remains closed at different scales.\n\n\n const isLoop = (0,_shapes__WEBPACK_IMPORTED_MODULE_15__.isPathALoop)(multiPointElement.points, appState.zoom.value);\n\n if (multiPointElement.type === \"line\") {\n //zsviczian multiPointElement.type === \"freedraw\"\n if (isLoop) {\n const linePoints = multiPointElement.points;\n const firstPoint = linePoints[0];\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_8__.mutateElement)(multiPointElement, {\n points: linePoints.map((p, index) => index === linePoints.length - 1 ? (0,_math__WEBPACK_IMPORTED_MODULE_14__.point)(firstPoint[0], firstPoint[1]) : p)\n });\n }\n }\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_11__.isBindingElement)(multiPointElement) && !isLoop && multiPointElement.points.length > 1) {\n const [x, y] = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_9__.LinearElementEditor.getPointAtIndexGlobalCoordinates(multiPointElement, -1, (0,_utils__WEBPACK_IMPORTED_MODULE_3__.arrayToMap)(elements));\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_10__.maybeBindLinearElement)(multiPointElement, appState, {\n x,\n y\n }, elementsMap, elements);\n }\n }\n\n if (!appState.activeTool.locked && appState.activeTool.type !== \"freedraw\" || !multiPointElement) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_12__.resetCursor)(interactiveCanvas);\n }\n\n let activeTool;\n\n if (appState.activeTool.type === \"eraser\") {\n activeTool = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.updateActiveTool)(appState, Object.assign(Object.assign({}, appState.activeTool.lastActiveTool || {\n type: \"selection\"\n }), {\n lastActiveToolBeforeEraser: null\n }));\n } else {\n activeTool = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.updateActiveTool)(appState, {\n type: \"selection\"\n });\n }\n\n return {\n elements: newElements,\n appState: Object.assign(Object.assign({}, appState), {\n cursorButton: \"up\",\n activeTool: (appState.activeTool.locked || appState.activeTool.type === \"freedraw\") && multiPointElement ? appState.activeTool : activeTool,\n activeEmbeddable: null,\n newElement: null,\n selectionElement: null,\n multiElement: null,\n editingTextElement: null,\n startBoundElement: null,\n suggestedBindings: [],\n selectedElementIds: multiPointElement && !appState.activeTool.locked && appState.activeTool.type !== \"freedraw\" ? Object.assign(Object.assign({}, appState.selectedElementIds), {\n [multiPointElement.id]: true\n }) : appState.selectedElementIds,\n // To select the linear element when user has finished mutipoint editing\n selectedLinearElement: multiPointElement && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_11__.isLinearElement)(multiPointElement) ? new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_9__.LinearElementEditor(multiPointElement) : appState.selectedLinearElement,\n pendingImageElementId: null\n }),\n // TODO: #7348 we should not capture everything, but if we don't, it leads to incosistencies -> revisit\n storeAction: _store__WEBPACK_IMPORTED_MODULE_13__.StoreAction.CAPTURE\n };\n },\n keyTest: (event, appState) => event.key === _keys__WEBPACK_IMPORTED_MODULE_1__.KEYS.ESCAPE && (appState.editingLinearElement !== null || !appState.newElement && appState.multiElement === null) || (event.key === _keys__WEBPACK_IMPORTED_MODULE_1__.KEYS.ESCAPE || event.key === _keys__WEBPACK_IMPORTED_MODULE_1__.KEYS.ENTER) && appState.multiElement !== null,\n PanelComponent: ({\n appState,\n updateData,\n data\n }) => (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ToolButton__WEBPACK_IMPORTED_MODULE_4__.ToolButton, {\n type: \"button\",\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_5__.done,\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_6__.t)(\"buttons.done\"),\n \"aria-label\": (0,_i18n__WEBPACK_IMPORTED_MODULE_6__.t)(\"buttons.done\"),\n onClick: updateData,\n visible: appState.multiElement != null,\n size: (data === null || data === void 0 ? void 0 : data.size) || \"medium\",\n style: {\n pointerEvents: \"all\"\n }\n })\n});\n\n//# sourceURL=webpack://ExcalidrawLib/./actions/actionFinalize.tsx?");
|
|
500
500
|
|
|
501
501
|
/***/ }),
|
|
502
502
|
|
|
@@ -507,7 +507,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
507
507
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
508
508
|
|
|
509
509
|
"use strict";
|
|
510
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"actionFlipHorizontal\": () => (/* binding */ actionFlipHorizontal),\n/* harmony export */ \"actionFlipVertical\": () => (/* binding */ actionFlipVertical)\n/* harmony export */ });\n/* harmony import */ var _register__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./register */ \"./actions/register.ts\");\n/* harmony import */ var _scene__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../scene */ \"./scene/index.ts\");\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _element_resizeElements__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../element/resizeElements */ \"./element/resizeElements.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _keys__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../keys */ \"./keys.ts\");\n/* harmony import */ var _element_bounds__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../element/bounds */ \"./element/bounds.ts\");\n/* harmony import */ var _element_binding__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../element/binding */ \"./element/binding.ts\");\n/* harmony import */ var _frame__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../frame */ \"./frame.ts\");\n/* harmony import */ var _components_icons__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../components/icons */ \"./components/icons.tsx\");\n/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../store */ \"./store.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\nconst actionFlipHorizontal = (0,_register__WEBPACK_IMPORTED_MODULE_0__.register)({\n name: \"flipHorizontal\",\n label: \"labels.flipHorizontal\",\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_9__.flipHorizontal,\n trackEvent: {\n category: \"element\"\n },\n perform: (elements, appState, _, app) => {\n return {\n elements: (0,_frame__WEBPACK_IMPORTED_MODULE_8__.updateFrameMembershipOfSelectedElements)(flipSelectedElements(elements, app.scene.getNonDeletedElementsMap(), appState, \"horizontal\", app), appState, app),\n appState,\n storeAction: _store__WEBPACK_IMPORTED_MODULE_10__.StoreAction.CAPTURE\n };\n },\n keyTest: event => event.shiftKey && event.code === _keys__WEBPACK_IMPORTED_MODULE_5__.CODES.H\n});\nconst actionFlipVertical = (0,_register__WEBPACK_IMPORTED_MODULE_0__.register)({\n name: \"flipVertical\",\n label: \"labels.flipVertical\",\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_9__.flipVertical,\n trackEvent: {\n category: \"element\"\n },\n perform: (elements, appState, _, app) => {\n return {\n elements: (0,_frame__WEBPACK_IMPORTED_MODULE_8__.updateFrameMembershipOfSelectedElements)(flipSelectedElements(elements, app.scene.getNonDeletedElementsMap(), appState, \"vertical\", app), appState, app),\n appState,\n storeAction: _store__WEBPACK_IMPORTED_MODULE_10__.StoreAction.CAPTURE\n };\n },\n keyTest: event => event.shiftKey && event.code === _keys__WEBPACK_IMPORTED_MODULE_5__.CODES.V && !event[_keys__WEBPACK_IMPORTED_MODULE_5__.KEYS.CTRL_OR_CMD]\n});\n\nconst flipSelectedElements = (elements, elementsMap, appState, flipDirection, app) => {\n const selectedElements = (0,_scene__WEBPACK_IMPORTED_MODULE_1__.getSelectedElements)((0,_element__WEBPACK_IMPORTED_MODULE_2__.getNonDeletedElements)(elements), appState, {\n includeBoundTextElement: true,\n includeElementsInFrames: true\n });\n const updatedElements = flipElements(selectedElements, elementsMap, appState, flipDirection, app);\n const updatedElementsMap = (0,_utils__WEBPACK_IMPORTED_MODULE_4__.arrayToMap)(updatedElements);\n return elements.map(element => updatedElementsMap.get(element.id) || element);\n};\n\nconst flipElements = (selectedElements, elementsMap, appState, flipDirection, app) => {\n const {\n minX,\n minY,\n maxX,\n maxY\n } = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_6__.getCommonBoundingBox)(selectedElements);\n (0,_element_resizeElements__WEBPACK_IMPORTED_MODULE_3__.resizeMultipleElements)(elementsMap, selectedElements, elementsMap, \"nw\", true, true, flipDirection === \"horizontal\" ? maxX : minX, flipDirection === \"horizontal\" ? minY : maxY);\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_7__.bindOrUnbindLinearElements)(selectedElements.filter(_element_typeChecks__WEBPACK_IMPORTED_MODULE_11__.isLinearElement), elementsMap, app.scene.getNonDeletedElements(), app.scene, (0,_element_binding__WEBPACK_IMPORTED_MODULE_7__.isBindingEnabled)(appState), []);\n return selectedElements;\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./actions/actionFlip.ts?");
|
|
510
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"actionFlipHorizontal\": () => (/* binding */ actionFlipHorizontal),\n/* harmony export */ \"actionFlipVertical\": () => (/* binding */ actionFlipVertical)\n/* harmony export */ });\n/* harmony import */ var _register__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./register */ \"./actions/register.ts\");\n/* harmony import */ var _scene__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../scene */ \"./scene/index.ts\");\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _element_resizeElements__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../element/resizeElements */ \"./element/resizeElements.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _keys__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../keys */ \"./keys.ts\");\n/* harmony import */ var _element_bounds__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../element/bounds */ \"./element/bounds.ts\");\n/* harmony import */ var _element_binding__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../element/binding */ \"./element/binding.ts\");\n/* harmony import */ var _frame__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../frame */ \"./frame.ts\");\n/* harmony import */ var _components_icons__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../components/icons */ \"./components/icons.tsx\");\n/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../store */ \"./store.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _element_routing__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../element/routing */ \"./element/routing.ts\");\n/* harmony import */ var _element_mutateElement__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../element/mutateElement */ \"./element/mutateElement.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst actionFlipHorizontal = (0,_register__WEBPACK_IMPORTED_MODULE_0__.register)({\n name: \"flipHorizontal\",\n label: \"labels.flipHorizontal\",\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_9__.flipHorizontal,\n trackEvent: {\n category: \"element\"\n },\n perform: (elements, appState, _, app) => {\n return {\n elements: (0,_frame__WEBPACK_IMPORTED_MODULE_8__.updateFrameMembershipOfSelectedElements)(flipSelectedElements(elements, app.scene.getNonDeletedElementsMap(), appState, \"horizontal\", app), appState, app),\n appState,\n storeAction: _store__WEBPACK_IMPORTED_MODULE_10__.StoreAction.CAPTURE\n };\n },\n keyTest: event => event.shiftKey && event.code === _keys__WEBPACK_IMPORTED_MODULE_5__.CODES.H\n});\nconst actionFlipVertical = (0,_register__WEBPACK_IMPORTED_MODULE_0__.register)({\n name: \"flipVertical\",\n label: \"labels.flipVertical\",\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_9__.flipVertical,\n trackEvent: {\n category: \"element\"\n },\n perform: (elements, appState, _, app) => {\n return {\n elements: (0,_frame__WEBPACK_IMPORTED_MODULE_8__.updateFrameMembershipOfSelectedElements)(flipSelectedElements(elements, app.scene.getNonDeletedElementsMap(), appState, \"vertical\", app), appState, app),\n appState,\n storeAction: _store__WEBPACK_IMPORTED_MODULE_10__.StoreAction.CAPTURE\n };\n },\n keyTest: event => event.shiftKey && event.code === _keys__WEBPACK_IMPORTED_MODULE_5__.CODES.V && !event[_keys__WEBPACK_IMPORTED_MODULE_5__.KEYS.CTRL_OR_CMD]\n});\n\nconst flipSelectedElements = (elements, elementsMap, appState, flipDirection, app) => {\n const selectedElements = (0,_scene__WEBPACK_IMPORTED_MODULE_1__.getSelectedElements)((0,_element__WEBPACK_IMPORTED_MODULE_2__.getNonDeletedElements)(elements), appState, {\n includeBoundTextElement: true,\n includeElementsInFrames: true\n });\n const updatedElements = flipElements(selectedElements, elementsMap, appState, flipDirection, app);\n const updatedElementsMap = (0,_utils__WEBPACK_IMPORTED_MODULE_4__.arrayToMap)(updatedElements);\n return elements.map(element => updatedElementsMap.get(element.id) || element);\n};\n\nconst flipElements = (selectedElements, elementsMap, appState, flipDirection, app) => {\n if (selectedElements.every(element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_11__.isArrowElement)(element) && (element.startBinding || element.endBinding))) {\n return selectedElements.map(element => {\n const _element = element;\n return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_13__.newElementWith)(_element, {\n startArrowhead: _element.endArrowhead,\n endArrowhead: _element.startArrowhead\n });\n });\n }\n\n const {\n minX,\n minY,\n maxX,\n maxY,\n midX,\n midY\n } = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_6__.getCommonBoundingBox)(selectedElements);\n (0,_element_resizeElements__WEBPACK_IMPORTED_MODULE_3__.resizeMultipleElements)(elementsMap, selectedElements, elementsMap, \"nw\", true, true, flipDirection === \"horizontal\" ? maxX : minX, flipDirection === \"horizontal\" ? minY : maxY);\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_7__.bindOrUnbindLinearElements)(selectedElements.filter(_element_typeChecks__WEBPACK_IMPORTED_MODULE_11__.isLinearElement), elementsMap, app.scene.getNonDeletedElements(), app.scene, (0,_element_binding__WEBPACK_IMPORTED_MODULE_7__.isBindingEnabled)(appState), []); // ---------------------------------------------------------------------------\n // flipping arrow elements (and potentially other) makes the selection group\n // \"move\" across the canvas because of how arrows can bump against the \"wall\"\n // of the selection, so we need to center the group back to the original\n // position so that repeated flips don't accumulate the offset\n\n const {\n elbowArrows,\n otherElements\n } = selectedElements.reduce((acc, element) => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_11__.isElbowArrow)(element) ? Object.assign(Object.assign({}, acc), {\n elbowArrows: acc.elbowArrows.concat(element)\n }) : Object.assign(Object.assign({}, acc), {\n otherElements: acc.otherElements.concat(element)\n }), {\n elbowArrows: [],\n otherElements: []\n });\n const {\n midX: newMidX,\n midY: newMidY\n } = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_6__.getCommonBoundingBox)(selectedElements);\n const [diffX, diffY] = [midX - newMidX, midY - newMidY];\n otherElements.forEach(element => (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_13__.mutateElement)(element, {\n x: element.x + diffX,\n y: element.y + diffY\n }));\n elbowArrows.forEach(element => (0,_element_routing__WEBPACK_IMPORTED_MODULE_12__.mutateElbowArrow)(element, elementsMap, element.points, undefined, undefined, {\n informMutation: false\n })); // ---------------------------------------------------------------------------\n\n return selectedElements;\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./actions/actionFlip.ts?");
|
|
511
511
|
|
|
512
512
|
/***/ }),
|
|
513
513
|
|
|
@@ -595,7 +595,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
595
595
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
596
596
|
|
|
597
597
|
"use strict";
|
|
598
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"actionChangeArrowType\": () => (/* binding */ actionChangeArrowType),\n/* harmony export */ \"actionChangeArrowhead\": () => (/* binding */ actionChangeArrowhead),\n/* harmony export */ \"actionChangeBackgroundColor\": () => (/* binding */ actionChangeBackgroundColor),\n/* harmony export */ \"actionChangeFillStyle\": () => (/* binding */ actionChangeFillStyle),\n/* harmony export */ \"actionChangeFontFamily\": () => (/* binding */ actionChangeFontFamily),\n/* harmony export */ \"actionChangeFontSize\": () => (/* binding */ actionChangeFontSize),\n/* harmony export */ \"actionChangeOpacity\": () => (/* binding */ actionChangeOpacity),\n/* harmony export */ \"actionChangeRoundness\": () => (/* binding */ actionChangeRoundness),\n/* harmony export */ \"actionChangeSloppiness\": () => (/* binding */ actionChangeSloppiness),\n/* harmony export */ \"actionChangeStrokeColor\": () => (/* binding */ actionChangeStrokeColor),\n/* harmony export */ \"actionChangeStrokeStyle\": () => (/* binding */ actionChangeStrokeStyle),\n/* harmony export */ \"actionChangeStrokeWidth\": () => (/* binding */ actionChangeStrokeWidth),\n/* harmony export */ \"actionChangeTextAlign\": () => (/* binding */ actionChangeTextAlign),\n/* harmony export */ \"actionChangeVerticalAlign\": () => (/* binding */ actionChangeVerticalAlign),\n/* harmony export */ \"actionDecreaseFontSize\": () => (/* binding */ actionDecreaseFontSize),\n/* harmony export */ \"actionIncreaseFontSize\": () => (/* binding */ actionIncreaseFontSize),\n/* harmony export */ \"changeProperty\": () => (/* binding */ changeProperty),\n/* harmony export */ \"getFontSize\": () => (/* binding */ getFontSize),\n/* harmony export */ \"getFormValue\": () => (/* binding */ getFormValue)\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 _colors__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../colors */ \"./colors.ts\");\n/* harmony import */ var _analytics__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../analytics */ \"./analytics.ts\");\n/* harmony import */ var _components_ButtonIconSelect__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../components/ButtonIconSelect */ \"./components/ButtonIconSelect.tsx\");\n/* harmony import */ var _components_ColorPicker_ColorPicker__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../components/ColorPicker/ColorPicker */ \"./components/ColorPicker/ColorPicker.tsx\");\n/* harmony import */ var _components_IconPicker__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../components/IconPicker */ \"./components/IconPicker.tsx\");\n/* harmony import */ var _components_FontPicker_FontPicker__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../components/FontPicker/FontPicker */ \"./components/FontPicker/FontPicker.tsx\");\n/* harmony import */ var _components_icons__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../components/icons */ \"./components/icons.tsx\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _element_mutateElement__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../element/mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _element_textElement__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../element/textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../i18n */ \"./i18n.ts\");\n/* harmony import */ var _keys__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../keys */ \"./keys.ts\");\n/* harmony import */ var _random__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../random */ \"./random.ts\");\n/* harmony import */ var _scene__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../scene */ \"./scene/index.ts\");\n/* harmony import */ var _scene_comparisons__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../scene/comparisons */ \"./scene/comparisons.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _register__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./register */ \"./actions/register.ts\");\n/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ../store */ \"./store.ts\");\n/* harmony import */ var _fonts__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ../fonts */ \"./fonts/index.ts\");\n/* harmony import */ var _element_binding__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ../element/binding */ \"./element/binding.ts\");\n/* harmony import */ var _element_routing__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ../element/routing */ \"./element/routing.ts\");\n/* harmony import */ var _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ../element/linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__(/*! ../../math */ \"../math/index.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 // TODO barnabasmolnar/editor-redesign\n// TextAlignTopIcon, TextAlignBottomIcon,TextAlignMiddleIcon,\n// ArrowHead icons\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;\nconst changeProperty = (elements, appState, callback, includeBoundText = false) => {\n const selectedElementIds = (0,_utils__WEBPACK_IMPORTED_MODULE_19__.arrayToMap)((0,_scene__WEBPACK_IMPORTED_MODULE_17__.getSelectedElements)(elements, appState, {\n includeBoundTextElement: includeBoundText\n }));\n return elements.map(element => {\n var _a;\n\n if (selectedElementIds.get(element.id) || element.id === ((_a = appState.editingTextElement) === null || _a === void 0 ? void 0 : _a.id)) {\n return callback(element);\n }\n\n return element;\n });\n};\nconst getFormValue = function (elements, appState, getAttribute, isRelevantElement, defaultValue) {\n var _a;\n\n const editingTextElement = appState.editingTextElement;\n const nonDeletedElements = (0,_element__WEBPACK_IMPORTED_MODULE_10__.getNonDeletedElements)(elements);\n let ret = null;\n\n if (editingTextElement) {\n ret = getAttribute(editingTextElement);\n }\n\n if (!ret) {\n const hasSelection = (0,_scene__WEBPACK_IMPORTED_MODULE_17__.isSomeElementSelected)(nonDeletedElements, appState);\n\n if (hasSelection) {\n ret = (_a = (0,_scene__WEBPACK_IMPORTED_MODULE_17__.getCommonAttributeOfSelectedElements)(isRelevantElement === true ? nonDeletedElements : nonDeletedElements.filter(el => isRelevantElement(el)), appState, getAttribute)) !== null && _a !== void 0 ? _a : typeof defaultValue === \"function\" ? defaultValue(true) : defaultValue;\n } else {\n ret = typeof defaultValue === \"function\" ? defaultValue(false) : defaultValue;\n }\n }\n\n return ret;\n};\n\nconst offsetElementAfterFontResize = (prevElement, nextElement) => {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_13__.isBoundToContainer)(nextElement) || !nextElement.autoResize) {\n return nextElement;\n }\n\n return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.mutateElement)(nextElement, {\n x: prevElement.textAlign === \"left\" ? prevElement.x : prevElement.x + (prevElement.width - nextElement.width) / (prevElement.textAlign === \"center\" ? 2 : 1),\n // centering vertically is non-standard, but for Excalidraw I think\n // it makes sense\n y: prevElement.y + (prevElement.height - nextElement.height) / 2\n }, false);\n};\n\nconst changeFontSize = (elements, appState, app, getNewFontSize, fallbackValue) => {\n const newFontSizes = new Set();\n return {\n elements: changeProperty(elements, appState, oldElement => {\n if ((0,_element__WEBPACK_IMPORTED_MODULE_10__.isTextElement)(oldElement)) {\n const newFontSize = getNewFontSize(oldElement);\n newFontSizes.add(newFontSize);\n let newElement = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(oldElement, {\n fontSize: newFontSize\n });\n (0,_element__WEBPACK_IMPORTED_MODULE_10__.redrawTextBoundingBox)(newElement, app.scene.getContainerElement(oldElement), app.scene.getNonDeletedElementsMap());\n newElement = offsetElementAfterFontResize(oldElement, newElement);\n return newElement;\n }\n\n return oldElement;\n }, true),\n appState: Object.assign(Object.assign({}, appState), {\n // update state only if we've set all select text elements to\n // the same font size\n currentItemFontSize: newFontSizes.size === 1 ? [...newFontSizes][0] : fallbackValue !== null && fallbackValue !== void 0 ? fallbackValue : appState.currentItemFontSize\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.CAPTURE\n };\n}; // -----------------------------------------------------------------------------\n\n\nconst actionChangeStrokeColor = (0,_register__WEBPACK_IMPORTED_MODULE_20__.register)({\n name: \"changeStrokeColor\",\n label: \"labels.stroke\",\n trackEvent: false,\n perform: (elements, appState, value, app) => {\n //zsviczian added containers\n const containers = (0,_scene__WEBPACK_IMPORTED_MODULE_17__.getSelectedElements)(elements, appState, {\n includeBoundTextElement: false\n }).filter(el => el.boundElements).map(el => el.id);\n return Object.assign(Object.assign({}, value.currentItemStrokeColor && {\n elements: changeProperty(elements, appState, el => {\n var _a;\n\n if ( //zsviczian\n (0,_element__WEBPACK_IMPORTED_MODULE_10__.isTextElement)(el) && el.containerId && containers.includes(el.containerId) && ((_a = app.scene.getContainerElement(el)) === null || _a === void 0 ? void 0 : _a.strokeColor) !== el.strokeColor) {\n return el;\n }\n\n return (0,_scene_comparisons__WEBPACK_IMPORTED_MODULE_18__.hasStrokeColor)(el.type) ? (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(el, {\n strokeColor: value.currentItemStrokeColor\n }) : el;\n }, true)\n }), {\n appState: Object.assign(Object.assign({}, appState), value),\n storeAction: !!value.currentItemStrokeColor ? _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.CAPTURE : _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.NONE\n });\n },\n PanelComponent: ({\n elements,\n appState,\n updateData,\n appProps\n }) => {\n var _a, _b, _c, _d, _e;\n\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"h3\", Object.assign({\n \"aria-hidden\": \"true\"\n }, {\n children: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.stroke\")\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ColorPicker_ColorPicker__WEBPACK_IMPORTED_MODULE_5__.ColorPicker, {\n topPicks: //zsviczian\n (_c = (_b = (_a = appState.colorPalette) === null || _a === void 0 ? void 0 : _a.topPicks) === null || _b === void 0 ? void 0 : _b.elementStroke) !== null && _c !== void 0 ? _c : _colors__WEBPACK_IMPORTED_MODULE_2__.DEFAULT_ELEMENT_STROKE_PICKS,\n palette: //zsviczian\n (_e = (_d = appState.colorPalette) === null || _d === void 0 ? void 0 : _d.elementStroke) !== null && _e !== void 0 ? _e : _colors__WEBPACK_IMPORTED_MODULE_2__.DEFAULT_ELEMENT_STROKE_COLOR_PALETTE,\n type: \"elementStroke\",\n label: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.stroke\"),\n color: getFormValue(elements, appState, element => element.strokeColor, true, appState.currentItemStrokeColor),\n onChange: color => updateData({\n currentItemStrokeColor: color\n }),\n elements: elements,\n appState: appState,\n updateData: updateData\n })]\n });\n }\n});\nconst actionChangeBackgroundColor = (0,_register__WEBPACK_IMPORTED_MODULE_20__.register)({\n name: \"changeBackgroundColor\",\n label: \"labels.changeBackground\",\n trackEvent: false,\n perform: (elements, appState, value) => {\n return Object.assign(Object.assign({}, value.currentItemBackgroundColor && {\n elements: changeProperty(elements, appState, el => (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(el, {\n backgroundColor: value.currentItemBackgroundColor\n }))\n }), {\n appState: Object.assign(Object.assign({}, appState), value),\n storeAction: !!value.currentItemBackgroundColor ? _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.CAPTURE : _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.NONE\n });\n },\n PanelComponent: ({\n elements,\n appState,\n updateData,\n appProps\n }) => {\n var _a, _b, _c, _d, _e;\n\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"h3\", Object.assign({\n \"aria-hidden\": \"true\"\n }, {\n children: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.background\")\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ColorPicker_ColorPicker__WEBPACK_IMPORTED_MODULE_5__.ColorPicker, {\n topPicks: //zsviczian\n (_c = (_b = (_a = appState.colorPalette) === null || _a === void 0 ? void 0 : _a.topPicks) === null || _b === void 0 ? void 0 : _b.elementBackground) !== null && _c !== void 0 ? _c : _colors__WEBPACK_IMPORTED_MODULE_2__.DEFAULT_ELEMENT_BACKGROUND_PICKS,\n palette: //zsviczian\n (_e = (_d = appState.colorPalette) === null || _d === void 0 ? void 0 : _d.elementBackground) !== null && _e !== void 0 ? _e : _colors__WEBPACK_IMPORTED_MODULE_2__.DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE,\n type: \"elementBackground\",\n label: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.background\"),\n color: getFormValue(elements, appState, element => element.backgroundColor, true, appState.currentItemBackgroundColor),\n onChange: color => updateData({\n currentItemBackgroundColor: color\n }),\n elements: elements,\n appState: appState,\n updateData: updateData\n })]\n });\n }\n});\nconst actionChangeFillStyle = (0,_register__WEBPACK_IMPORTED_MODULE_20__.register)({\n name: \"changeFillStyle\",\n label: \"labels.fill\",\n trackEvent: false,\n perform: (elements, appState, value, app) => {\n (0,_analytics__WEBPACK_IMPORTED_MODULE_3__.trackEvent)(\"element\", \"changeFillStyle\", `${value} (${app.device.editor.isMobile ? \"mobile\" : \"desktop\"})`);\n return {\n elements: changeProperty(elements, appState, el => (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(el, {\n fillStyle: value\n })),\n appState: Object.assign(Object.assign({}, appState), {\n currentItemFillStyle: value\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.CAPTURE\n };\n },\n PanelComponent: ({\n elements,\n appState,\n updateData\n }) => {\n const selectedElements = (0,_scene__WEBPACK_IMPORTED_MODULE_17__.getSelectedElements)(elements, appState);\n const allElementsZigZag = selectedElements.length > 0 && selectedElements.every(el => el.fillStyle === \"zigzag\");\n return (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_14__.t)(\"labels.fill\")\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ButtonIconSelect__WEBPACK_IMPORTED_MODULE_4__.ButtonIconSelect, {\n type: \"button\",\n options: [{\n value: \"hachure\",\n text: `${allElementsZigZag ? (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.zigzag\") : (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.hachure\")} (${(0,_utils__WEBPACK_IMPORTED_MODULE_19__.getShortcutKey)(\"Alt-Click\")})`,\n icon: allElementsZigZag ? _components_icons__WEBPACK_IMPORTED_MODULE_8__.FillZigZagIcon : _components_icons__WEBPACK_IMPORTED_MODULE_8__.FillHachureIcon,\n active: allElementsZigZag ? true : undefined,\n testId: `fill-hachure`\n }, {\n value: \"cross-hatch\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.crossHatch\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.FillCrossHatchIcon,\n testId: `fill-cross-hatch`\n }, {\n value: \"solid\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.solid\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.FillSolidIcon,\n testId: `fill-solid`\n }],\n value: getFormValue(elements, appState, element => element.fillStyle, element => element.hasOwnProperty(\"fillStyle\"), hasSelection => hasSelection ? null : appState.currentItemFillStyle),\n onClick: (value, event) => {\n const nextValue = event.altKey && value === \"hachure\" && selectedElements.every(el => el.fillStyle === \"hachure\") ? \"zigzag\" : value;\n updateData(nextValue);\n }\n })]\n });\n }\n});\nconst actionChangeStrokeWidth = (0,_register__WEBPACK_IMPORTED_MODULE_20__.register)({\n name: \"changeStrokeWidth\",\n label: \"labels.strokeWidth\",\n trackEvent: false,\n perform: (elements, appState, value) => {\n return {\n elements: changeProperty(elements, appState, el => (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(el, {\n strokeWidth: value\n })),\n appState: Object.assign(Object.assign({}, appState), {\n currentItemStrokeWidth: value\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.CAPTURE\n };\n },\n PanelComponent: ({\n elements,\n appState,\n updateData\n }) => (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_14__.t)(\"labels.strokeWidth\")\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ButtonIconSelect__WEBPACK_IMPORTED_MODULE_4__.ButtonIconSelect, {\n group: \"stroke-width\",\n options: [{\n //zsviczian\n value: 0.5,\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.extraThin\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.StrokeWidthThinIcon\n }, {\n value: _constants__WEBPACK_IMPORTED_MODULE_9__.STROKE_WIDTH.thin,\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.thin\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.StrokeWidthBaseIcon,\n testId: \"strokeWidth-thin\"\n }, {\n value: _constants__WEBPACK_IMPORTED_MODULE_9__.STROKE_WIDTH.bold,\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.bold\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.StrokeWidthBoldIcon,\n testId: \"strokeWidth-bold\"\n }, {\n value: _constants__WEBPACK_IMPORTED_MODULE_9__.STROKE_WIDTH.extraBold,\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.extraBold\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.StrokeWidthExtraBoldIcon,\n testId: \"strokeWidth-extraBold\"\n }],\n value: getFormValue(elements, appState, element => element.strokeWidth, element => element.hasOwnProperty(\"strokeWidth\"), hasSelection => hasSelection ? null : appState.currentItemStrokeWidth),\n onChange: value => updateData(value)\n })]\n })\n});\nconst actionChangeSloppiness = (0,_register__WEBPACK_IMPORTED_MODULE_20__.register)({\n name: \"changeSloppiness\",\n label: \"labels.sloppiness\",\n trackEvent: false,\n perform: (elements, appState, value) => {\n return {\n elements: changeProperty(elements, appState, el => (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(el, {\n seed: (0,_random__WEBPACK_IMPORTED_MODULE_16__.randomInteger)(),\n roughness: value\n })),\n appState: Object.assign(Object.assign({}, appState), {\n currentItemRoughness: value\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.CAPTURE\n };\n },\n PanelComponent: ({\n elements,\n appState,\n updateData\n }) => (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_14__.t)(\"labels.sloppiness\")\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ButtonIconSelect__WEBPACK_IMPORTED_MODULE_4__.ButtonIconSelect, {\n group: \"sloppiness\",\n options: [{\n value: 0,\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.architect\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.SloppinessArchitectIcon\n }, {\n value: 1,\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.artist\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.SloppinessArtistIcon\n }, {\n value: 2,\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.cartoonist\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.SloppinessCartoonistIcon\n }],\n value: getFormValue(elements, appState, element => element.roughness, element => element.hasOwnProperty(\"roughness\"), hasSelection => hasSelection ? null : appState.currentItemRoughness),\n onChange: value => updateData(value)\n })]\n })\n});\nconst actionChangeStrokeStyle = (0,_register__WEBPACK_IMPORTED_MODULE_20__.register)({\n name: \"changeStrokeStyle\",\n label: \"labels.strokeStyle\",\n trackEvent: false,\n perform: (elements, appState, value) => {\n return {\n elements: changeProperty(elements, appState, el => (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(el, {\n strokeStyle: value\n })),\n appState: Object.assign(Object.assign({}, appState), {\n currentItemStrokeStyle: value\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.CAPTURE\n };\n },\n PanelComponent: ({\n elements,\n appState,\n updateData\n }) => (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_14__.t)(\"labels.strokeStyle\")\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ButtonIconSelect__WEBPACK_IMPORTED_MODULE_4__.ButtonIconSelect, {\n group: \"strokeStyle\",\n options: [{\n value: \"solid\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.strokeStyle_solid\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.StrokeWidthBaseIcon\n }, {\n value: \"dashed\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.strokeStyle_dashed\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.StrokeStyleDashedIcon\n }, {\n value: \"dotted\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.strokeStyle_dotted\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.StrokeStyleDottedIcon\n }],\n value: getFormValue(elements, appState, element => element.strokeStyle, element => element.hasOwnProperty(\"strokeStyle\"), hasSelection => hasSelection ? null : appState.currentItemStrokeStyle),\n onChange: value => updateData(value)\n })]\n })\n});\nconst actionChangeOpacity = (0,_register__WEBPACK_IMPORTED_MODULE_20__.register)({\n name: \"changeOpacity\",\n label: \"labels.opacity\",\n trackEvent: false,\n perform: (elements, appState, value) => {\n return {\n elements: changeProperty(elements, appState, el => (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(el, {\n opacity: value\n }), true),\n appState: Object.assign(Object.assign({}, appState), {\n currentItemOpacity: value\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.CAPTURE\n };\n },\n PanelComponent: ({\n elements,\n appState,\n updateData\n }) => {\n var _a;\n\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"label\", Object.assign({\n className: \"control-label\"\n }, {\n children: [(0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.opacity\"), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"input\", {\n type: \"range\",\n min: \"0\",\n max: \"100\",\n step: \"10\",\n onChange: event => updateData(+event.target.value),\n value: (_a = getFormValue(elements, appState, element => element.opacity, true, appState.currentItemOpacity)) !== null && _a !== void 0 ? _a : undefined\n })]\n }));\n }\n});\nlet scaleFontSize = false; //zsviczian\n\nlet useFibonacci = false; //zsviczian\n//zsviczian\n//with a random noise of +-0.05 to avoid duplicates\n\nconst fibonacciValues = [[177.38, 109.63, 67.75, 41.9, 25.91, 16, 9.9, 6.14, 3.83, 2.29, 1.47, 0.9, 0.57], [287.06, 177.43, 109.64, 67.73, 41.92, 26, 16.01, 9.92, 6.1, 3.75, 2.34, 1.41, 0.87], [464.44, 287.11, 177.44, 109.65, 67.76, 42, 25.9, 15.97, 9.93, 6.12, 3.82, 2.3, 1.46], [751.52, 464.45, 287.08, 177.42, 109.67, 68, 41.89, 25.93, 15.99, 9.88, 6.07, 3.77, 2.35]]; //zsviczian\n\nconst normalValues = [[182.22, 121.46, 80, 53, 35.99, 23.96, 16, 10.68, 7.1, 4.74, 3.16, 2.11, 1.45, 0.97, 0.66], [227.82, 151.88, 101.25, 67.51, 44.95, 29.98, 20, 13.31, 8.85, 5.97, 3.95, 2.68, 1.77, 1.19, 0.82], [318.96, 212.59, 141.8, 94.51, 62.98, 42.01, 28, 18.63, 12.45, 8.26, 5.52, 3.7, 2.47, 1.61, 1.07], [410.02, 273.42, 182.28, 121.5, 81, 54, 36, 24.01, 16.05, 10.69, 7.13, 4.78, 3.12, 2.07, 1.38]]; //zsviczian\n\nconst valueToIndex = {\n 16: 0,\n 20: 1,\n 28: 2,\n 36: 3\n}; //zsviczian\n\nconst getFibonacciFontSize = (zoom, buttonValue) => {\n const index = valueToIndex[buttonValue];\n\n if (typeof index !== \"number\") {\n return buttonValue;\n }\n\n const range = [[0, 0.12], [0.12, 0.19], [0.19, 0.31], [0.31, 0.5], [0.5, 0.81], [0.81, 1.31], [1.31, 2.12], [2.12, 3.43], [3.43, 5.54], [5.54, 8.97], [8.97, 14.52], [14.52, 23.49], [23.49, 100]];\n\n for (let i = 0; i < range.length; i++) {\n const [from, to] = range[i];\n\n if (zoom >= from && zoom < to) {\n return fibonacciValues[index][i];\n break;\n }\n }\n\n return buttonValue;\n}; //zsviczian\n\n\nconst getScaledFontSize = (zoom, buttonValue) => {\n const index = valueToIndex[buttonValue];\n\n if (typeof index !== \"number\") {\n return buttonValue;\n }\n\n const range = [[0, 0.11], [0.11, 0.16], [0.16, 0.25], [0.25, 0.37], [0.37, 0.56], [0.56, 0.83], [0.83, 1.25], [1.25, 1.88], [1.88, 2.81], [2.81, 4.22], [4.22, 6.33], [6.33, 9.49], [9.49, 14.24], [14.24, 21.36], [21.36, 100]];\n\n for (let i = 0; i < range.length; i++) {\n const [from, to] = range[i];\n\n if (zoom >= from && zoom < to) {\n return normalValues[index][i];\n break;\n }\n }\n\n return buttonValue;\n}; //zsviczian\n\n\nconst findIndex = (values, value) => {\n for (let i = 0; i < values.length; i++) {\n const idx = values[i].indexOf(value);\n\n if (idx !== -1) {\n return i;\n }\n }\n\n return null;\n}; //zsviczian\n\n\nconst getFontSize = (size, zoom) => {\n zoom = scaleFontSize ? zoom : 1;\n let normalizedSizeIdx = findIndex(fibonacciValues, size);\n\n if (!normalizedSizeIdx) {\n normalizedSizeIdx = findIndex(normalValues, size);\n }\n\n if (normalizedSizeIdx === null) {\n return size;\n }\n\n size = [16, 20, 28, 36][normalizedSizeIdx];\n const nextValue = useFibonacci ? getFibonacciFontSize(zoom, size) : getScaledFontSize(zoom, size);\n return nextValue !== null && nextValue !== void 0 ? nextValue : size;\n};\nconst actionChangeFontSize = (0,_register__WEBPACK_IMPORTED_MODULE_20__.register)({\n name: \"changeFontSize\",\n label: \"labels.fontSize\",\n trackEvent: false,\n perform: (elements, appState, value, app) => {\n return changeFontSize(elements, appState, app, () => value, value);\n },\n PanelComponent: ({\n elements,\n appState,\n updateData,\n app\n }) => {\n var _a; //zsviczian\n\n\n let selectedElements = (0,_scene__WEBPACK_IMPORTED_MODULE_17__.getSelectedElements)(elements, appState).filter(el => (0,_element__WEBPACK_IMPORTED_MODULE_10__.isTextElement)(el));\n\n if (selectedElements.length === 0) {\n selectedElements = appState.editingTextElement ? [appState.editingTextElement] : [];\n }\n\n const size = (_a = selectedElements[0]) === null || _a === void 0 ? void 0 : _a.fontSize;\n let idx = null;\n\n if (size && selectedElements.every(el => el.fontSize === size)) {\n idx = findIndex(normalValues, size);\n\n if (idx === null) {\n idx = findIndex(fibonacciValues, size);\n }\n }\n\n const isSmall = idx === 0;\n const isMedium = idx === 1;\n const isLarge = idx === 2;\n const isVeryLarge = idx === 3;\n return (//zsviczian\n (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_14__.t)(\"labels.fontSize\")\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ButtonIconSelect__WEBPACK_IMPORTED_MODULE_4__.ButtonIconSelect, {\n type: \"button\" //zsviczian\n ,\n //group=\"font-size\" //zsviczian\n options: [{\n value: 16,\n text: `${(0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.small\")}\\nSHIFT: zoomed, ALT/OPT: Fibonacci`,\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.FontSizeSmallIcon,\n testId: \"fontSize-small\",\n active: isSmall ? true : undefined //zsviczian\n\n }, {\n value: 20,\n text: `${(0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.medium\")}\\nSHIFT: zoomed, ALT/OPT: Fibonacci`,\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.FontSizeMediumIcon,\n testId: \"fontSize-medium\",\n active: isMedium ? true : undefined //zsviczian\n\n }, {\n value: 28,\n text: `${(0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.large\")}\\nSHIFT: zoomed, ALT/OPT: Fibonacci`,\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.FontSizeLargeIcon,\n testId: \"fontSize-large\",\n active: isLarge ? true : undefined //zsviczian\n\n }, {\n value: 36,\n text: `${(0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.veryLarge\")}\\nSHIFT: zoomed, ALT/OPT: Fibonacci`,\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.FontSizeExtraLargeIcon,\n testId: \"fontSize-veryLarge\",\n active: isVeryLarge ? true : undefined //zsviczian\n\n }],\n value: getFormValue(elements, appState, element => {\n if ((0,_element__WEBPACK_IMPORTED_MODULE_10__.isTextElement)(element)) {\n return element.fontSize;\n }\n\n const boundTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_12__.getBoundTextElement)(element, app.scene.getNonDeletedElementsMap());\n\n if (boundTextElement) {\n return boundTextElement.fontSize;\n }\n\n return null;\n }, element => (0,_element__WEBPACK_IMPORTED_MODULE_10__.isTextElement)(element) || (0,_element_textElement__WEBPACK_IMPORTED_MODULE_12__.getBoundTextElement)(element, app.scene.getNonDeletedElementsMap()) !== null, hasSelection => hasSelection ? null : appState.currentItemFontSize || _constants__WEBPACK_IMPORTED_MODULE_9__.DEFAULT_FONT_SIZE),\n //zsviczian onClick\n onClick: (value, event) => {\n scaleFontSize = event.shiftKey;\n useFibonacci = event.altKey;\n updateData(getFontSize(value, appState.zoom.value));\n }\n })]\n })\n );\n }\n});\nconst actionDecreaseFontSize = (0,_register__WEBPACK_IMPORTED_MODULE_20__.register)({\n name: \"decreaseFontSize\",\n label: \"labels.decreaseFontSize\",\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.fontSizeIcon,\n trackEvent: false,\n perform: (elements, appState, value, app) => {\n return changeFontSize(elements, appState, app, element => Math.round( // get previous value before relative increase (doesn't work fully\n // due to rounding and float precision issues)\n 1 / (1 + FONT_SIZE_RELATIVE_INCREASE_STEP) * element.fontSize));\n },\n keyTest: event => {\n return event[_keys__WEBPACK_IMPORTED_MODULE_15__.KEYS.CTRL_OR_CMD] && event.shiftKey && ( // KEYS.COMMA needed for MacOS\n event.key === _keys__WEBPACK_IMPORTED_MODULE_15__.KEYS.CHEVRON_LEFT || event.key === _keys__WEBPACK_IMPORTED_MODULE_15__.KEYS.COMMA);\n }\n});\nconst actionIncreaseFontSize = (0,_register__WEBPACK_IMPORTED_MODULE_20__.register)({\n name: \"increaseFontSize\",\n label: \"labels.increaseFontSize\",\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.fontSizeIcon,\n trackEvent: false,\n perform: (elements, appState, value, app) => {\n return changeFontSize(elements, appState, app, element => Math.round(element.fontSize * (1 + FONT_SIZE_RELATIVE_INCREASE_STEP)));\n },\n keyTest: event => {\n return event[_keys__WEBPACK_IMPORTED_MODULE_15__.KEYS.CTRL_OR_CMD] && event.shiftKey && ( // KEYS.PERIOD needed for MacOS\n event.key === _keys__WEBPACK_IMPORTED_MODULE_15__.KEYS.CHEVRON_RIGHT || event.key === _keys__WEBPACK_IMPORTED_MODULE_15__.KEYS.PERIOD);\n }\n});\nconst actionChangeFontFamily = (0,_register__WEBPACK_IMPORTED_MODULE_20__.register)({\n name: \"changeFontFamily\",\n label: \"labels.fontFamily\",\n trackEvent: false,\n perform: (elements, appState, value, app) => {\n var _a;\n\n const _b = value,\n {\n cachedElements,\n resetAll,\n resetContainers\n } = _b,\n nextAppState = __rest(_b, [\"cachedElements\", \"resetAll\", \"resetContainers\"]);\n\n if (resetAll) {\n const nextElements = changeProperty(elements, appState, element => {\n const cachedElement = cachedElements === null || cachedElements === void 0 ? void 0 : cachedElements.get(element.id);\n\n if (cachedElement) {\n const newElement = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(element, Object.assign({}, cachedElement));\n return newElement;\n }\n\n return element;\n }, true);\n return {\n elements: nextElements,\n appState: Object.assign(Object.assign({}, appState), nextAppState),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.UPDATE\n };\n }\n\n const {\n currentItemFontFamily,\n currentHoveredFontFamily\n } = value;\n let nexStoreAction = _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.NONE;\n let nextFontFamily;\n let skipOnHoverRender = false;\n\n if (currentItemFontFamily) {\n nextFontFamily = currentItemFontFamily;\n nexStoreAction = _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.CAPTURE;\n } else if (currentHoveredFontFamily) {\n nextFontFamily = currentHoveredFontFamily;\n nexStoreAction = _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.NONE;\n const selectedTextElements = (0,_scene__WEBPACK_IMPORTED_MODULE_17__.getSelectedElements)(elements, appState, {\n includeBoundTextElement: true\n }).filter(element => (0,_element__WEBPACK_IMPORTED_MODULE_10__.isTextElement)(element)); // skip on hover re-render for more than 200 text elements or for text element with more than 5000 chars combined\n\n if (selectedTextElements.length > 200) {\n skipOnHoverRender = true;\n } else {\n let i = 0;\n let textLengthAccumulator = 0;\n\n while (i < selectedTextElements.length && textLengthAccumulator < 5000) {\n const textElement = selectedTextElements[i];\n textLengthAccumulator += (textElement === null || textElement === void 0 ? void 0 : textElement.originalText.length) || 0;\n i++;\n }\n\n if (textLengthAccumulator > 5000) {\n skipOnHoverRender = true;\n }\n }\n }\n\n const result = {\n appState: Object.assign(Object.assign({}, appState), nextAppState),\n storeAction: nexStoreAction\n };\n\n if (nextFontFamily && !skipOnHoverRender) {\n const elementContainerMapping = new Map();\n let uniqueChars = new Set();\n let skipFontFaceCheck = false;\n const fontsCache = Array.from(_fonts__WEBPACK_IMPORTED_MODULE_22__.Fonts.loadedFontsCache.values());\n const fontFamily = (_a = Object.entries(_constants__WEBPACK_IMPORTED_MODULE_9__.FONT_FAMILY).find(([_, value]) => value === nextFontFamily)) === null || _a === void 0 ? void 0 : _a[0]; // skip `document.font.check` check on hover, if at least one font family has loaded as it's super slow (could result in slightly different bbox, which is fine)\n\n if (currentHoveredFontFamily && fontFamily && fontsCache.some(sig => sig.startsWith(fontFamily))) {\n skipFontFaceCheck = true;\n } // following causes re-render so make sure we changed the family\n // otherwise it could cause unexpected issues, such as preventing opening the popover when in wysiwyg\n\n\n Object.assign(result, {\n elements: changeProperty(elements, appState, oldElement => {\n if ((0,_element__WEBPACK_IMPORTED_MODULE_10__.isTextElement)(oldElement) && (oldElement.fontFamily !== nextFontFamily || currentItemFontFamily) // force update on selection\n ) {\n const newElement = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(oldElement, {\n fontFamily: nextFontFamily,\n lineHeight: (0,_fonts__WEBPACK_IMPORTED_MODULE_22__.getLineHeight)(nextFontFamily)\n });\n const cachedContainer = (cachedElements === null || cachedElements === void 0 ? void 0 : cachedElements.get(oldElement.containerId || \"\")) || {};\n const container = app.scene.getContainerElement(oldElement);\n\n if (resetContainers && container && cachedContainer) {\n // reset the container back to it's cached version\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.mutateElement)(container, Object.assign({}, cachedContainer), false);\n }\n\n if (!skipFontFaceCheck) {\n uniqueChars = new Set([...uniqueChars, ...Array.from(newElement.originalText)]);\n }\n\n elementContainerMapping.set(newElement, container);\n return newElement;\n }\n\n return oldElement;\n }, true)\n }); // size is irrelevant, but necessary\n\n const fontString = `10px ${(0,_utils__WEBPACK_IMPORTED_MODULE_19__.getFontFamilyString)({\n fontFamily: nextFontFamily\n })}`;\n const chars = Array.from(uniqueChars.values()).join();\n\n if (skipFontFaceCheck || window.document.fonts.check(fontString, chars)) {\n // we either skip the check (have at least one font face loaded) or do the check and find out all the font faces have loaded\n for (const [element, container] of elementContainerMapping) {\n // trigger synchronous redraw\n (0,_element__WEBPACK_IMPORTED_MODULE_10__.redrawTextBoundingBox)(element, container, app.scene.getNonDeletedElementsMap(), false);\n }\n } else {\n // otherwise try to load all font faces for the given chars and redraw elements once our font faces loaded\n window.document.fonts.load(fontString, chars).then(fontFaces => {\n for (const [element, container] of elementContainerMapping) {\n // use latest element state to ensure we don't have closure over an old instance in order to avoid possible race conditions (i.e. font faces load out-of-order while rapidly switching fonts)\n const latestElement = app.scene.getElement(element.id);\n const latestContainer = container ? app.scene.getElement(container.id) : null;\n\n if (latestElement) {\n // trigger async redraw\n (0,_element__WEBPACK_IMPORTED_MODULE_10__.redrawTextBoundingBox)(latestElement, latestContainer, app.scene.getNonDeletedElementsMap(), false);\n }\n } // trigger update once we've mutated all the elements, which also updates our cache\n\n\n app.fonts.onLoaded(fontFaces);\n });\n }\n }\n\n return result;\n },\n PanelComponent: ({\n elements,\n appState,\n app,\n updateData\n }) => {\n const cachedElementsRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(new Map());\n const prevSelectedFontFamilyRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null); // relying on state batching as multiple `FontPicker` handlers could be called in rapid succession and we want to combine them\n\n const [batchedData, setBatchedData] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)({});\n const isUnmounted = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(true);\n const selectedFontFamily = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => {\n var _a, _b;\n\n const getFontFamily = (elementsArray, elementsMap) => getFormValue(elementsArray, appState, element => {\n if ((0,_element__WEBPACK_IMPORTED_MODULE_10__.isTextElement)(element)) {\n return element.fontFamily;\n }\n\n const boundTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_12__.getBoundTextElement)(element, elementsMap);\n\n if (boundTextElement) {\n return boundTextElement.fontFamily;\n }\n\n return null;\n }, element => (0,_element__WEBPACK_IMPORTED_MODULE_10__.isTextElement)(element) || (0,_element_textElement__WEBPACK_IMPORTED_MODULE_12__.getBoundTextElement)(element, elementsMap) !== null, hasSelection => hasSelection ? null : appState.currentItemFontFamily || _constants__WEBPACK_IMPORTED_MODULE_9__.DEFAULT_FONT_FAMILY); // popup opened, use cached elements\n\n\n if (batchedData.openPopup === \"fontFamily\" && appState.openPopup === \"fontFamily\") {\n return getFontFamily(Array.from((_b = (_a = cachedElementsRef.current) === null || _a === void 0 ? void 0 : _a.values()) !== null && _b !== void 0 ? _b : []), cachedElementsRef.current);\n } // popup closed, use all elements\n\n\n if (!batchedData.openPopup && appState.openPopup !== \"fontFamily\") {\n return getFontFamily(elements, app.scene.getNonDeletedElementsMap());\n } // popup props are not in sync, hence we are in the middle of an update, so keeping the previous value we've had\n\n\n return prevSelectedFontFamilyRef.current;\n }, [batchedData.openPopup, appState, elements, app.scene]);\n (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n prevSelectedFontFamilyRef.current = selectedFontFamily;\n }, [selectedFontFamily]);\n (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n if (Object.keys(batchedData).length) {\n updateData(batchedData); // reset the data after we've used the data\n\n setBatchedData({});\n } // call update only on internal state changes\n // eslint-disable-next-line react-hooks/exhaustive-deps\n\n }, [batchedData]);\n (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n isUnmounted.current = false;\n return () => {\n isUnmounted.current = true;\n };\n }, []);\n return (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_14__.t)(\"labels.fontFamily\")\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_FontPicker_FontPicker__WEBPACK_IMPORTED_MODULE_7__.FontPicker, {\n isOpened: appState.openPopup === \"fontFamily\",\n selectedFontFamily: selectedFontFamily,\n hoveredFontFamily: appState.currentHoveredFontFamily,\n onSelect: fontFamily => {\n setBatchedData({\n openPopup: null,\n currentHoveredFontFamily: null,\n currentItemFontFamily: fontFamily\n }); // defensive clear so immediate close won't abuse the cached elements\n\n cachedElementsRef.current.clear();\n },\n onHover: fontFamily => {\n setBatchedData({\n currentHoveredFontFamily: fontFamily,\n cachedElements: new Map(cachedElementsRef.current),\n resetContainers: true\n });\n },\n onLeave: () => {\n setBatchedData({\n currentHoveredFontFamily: null,\n cachedElements: new Map(cachedElementsRef.current),\n resetAll: true\n });\n },\n onPopupChange: open => {\n if (open) {\n // open, populate the cache from scratch\n cachedElementsRef.current.clear();\n const {\n editingTextElement\n } = appState; // still check type to be safe\n\n if ((editingTextElement === null || editingTextElement === void 0 ? void 0 : editingTextElement.type) === \"text\") {\n // retrieve the latest version from the scene, as `editingTextElement` isn't mutated\n const latesteditingTextElement = app.scene.getElement(editingTextElement.id); // inside the wysiwyg editor\n\n cachedElementsRef.current.set(editingTextElement.id, (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(latesteditingTextElement || editingTextElement, {}, true));\n } else {\n const selectedElements = (0,_scene__WEBPACK_IMPORTED_MODULE_17__.getSelectedElements)(elements, appState, {\n includeBoundTextElement: true\n });\n\n for (const element of selectedElements) {\n cachedElementsRef.current.set(element.id, (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(element, {}, true));\n }\n }\n\n setBatchedData({\n openPopup: \"fontFamily\"\n });\n } else {\n // close, use the cache and clear it afterwards\n const data = {\n openPopup: null,\n currentHoveredFontFamily: null,\n cachedElements: new Map(cachedElementsRef.current),\n resetAll: true\n };\n\n if (isUnmounted.current) {\n // in case the component was unmounted by the parent, trigger the update directly\n updateData(Object.assign(Object.assign({}, batchedData), data));\n } else {\n setBatchedData(data);\n }\n\n cachedElementsRef.current.clear();\n }\n }\n })]\n });\n }\n});\nconst actionChangeTextAlign = (0,_register__WEBPACK_IMPORTED_MODULE_20__.register)({\n name: \"changeTextAlign\",\n label: \"Change text alignment\",\n trackEvent: false,\n perform: (elements, appState, value, app) => {\n return {\n elements: changeProperty(elements, appState, oldElement => {\n if ((0,_element__WEBPACK_IMPORTED_MODULE_10__.isTextElement)(oldElement)) {\n const newElement = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(oldElement, {\n textAlign: value\n });\n (0,_element__WEBPACK_IMPORTED_MODULE_10__.redrawTextBoundingBox)(newElement, app.scene.getContainerElement(oldElement), app.scene.getNonDeletedElementsMap());\n return newElement;\n }\n\n return oldElement;\n }, true),\n appState: Object.assign(Object.assign({}, appState), {\n currentItemTextAlign: value\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.CAPTURE\n };\n },\n PanelComponent: ({\n elements,\n appState,\n updateData,\n app\n }) => {\n const elementsMap = app.scene.getNonDeletedElementsMap();\n return (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_14__.t)(\"labels.textAlign\")\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ButtonIconSelect__WEBPACK_IMPORTED_MODULE_4__.ButtonIconSelect, {\n group: \"text-align\",\n options: [{\n value: \"left\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.left\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.TextAlignLeftIcon,\n testId: \"align-left\"\n }, {\n value: \"center\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.center\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.TextAlignCenterIcon,\n testId: \"align-horizontal-center\"\n }, {\n value: \"right\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.right\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.TextAlignRightIcon,\n testId: \"align-right\"\n }],\n value: getFormValue(elements, appState, element => {\n if ((0,_element__WEBPACK_IMPORTED_MODULE_10__.isTextElement)(element)) {\n return element.textAlign;\n }\n\n const boundTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_12__.getBoundTextElement)(element, elementsMap);\n\n if (boundTextElement) {\n return boundTextElement.textAlign;\n }\n\n return null;\n }, element => (0,_element__WEBPACK_IMPORTED_MODULE_10__.isTextElement)(element) || (0,_element_textElement__WEBPACK_IMPORTED_MODULE_12__.getBoundTextElement)(element, elementsMap) !== null, hasSelection => hasSelection ? null : appState.currentItemTextAlign),\n onChange: value => updateData(value)\n })]\n });\n }\n});\nconst actionChangeVerticalAlign = (0,_register__WEBPACK_IMPORTED_MODULE_20__.register)({\n name: \"changeVerticalAlign\",\n label: \"Change vertical alignment\",\n trackEvent: {\n category: \"element\"\n },\n perform: (elements, appState, value, app) => {\n return {\n elements: changeProperty(elements, appState, oldElement => {\n if ((0,_element__WEBPACK_IMPORTED_MODULE_10__.isTextElement)(oldElement)) {\n const newElement = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(oldElement, {\n verticalAlign: value\n });\n (0,_element__WEBPACK_IMPORTED_MODULE_10__.redrawTextBoundingBox)(newElement, app.scene.getContainerElement(oldElement), app.scene.getNonDeletedElementsMap());\n return newElement;\n }\n\n return oldElement;\n }, true),\n appState: Object.assign({}, appState),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.CAPTURE\n };\n },\n PanelComponent: ({\n elements,\n appState,\n updateData,\n app\n }) => {\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"fieldset\", {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ButtonIconSelect__WEBPACK_IMPORTED_MODULE_4__.ButtonIconSelect, {\n group: \"text-align\",\n options: [{\n value: _constants__WEBPACK_IMPORTED_MODULE_9__.VERTICAL_ALIGN.TOP,\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.alignTop\"),\n icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_icons__WEBPACK_IMPORTED_MODULE_8__.TextAlignTopIcon, {\n theme: appState.theme\n }),\n testId: \"align-top\"\n }, {\n value: _constants__WEBPACK_IMPORTED_MODULE_9__.VERTICAL_ALIGN.MIDDLE,\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.centerVertically\"),\n icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_icons__WEBPACK_IMPORTED_MODULE_8__.TextAlignMiddleIcon, {\n theme: appState.theme\n }),\n testId: \"align-middle\"\n }, {\n value: _constants__WEBPACK_IMPORTED_MODULE_9__.VERTICAL_ALIGN.BOTTOM,\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.alignBottom\"),\n icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_icons__WEBPACK_IMPORTED_MODULE_8__.TextAlignBottomIcon, {\n theme: appState.theme\n }),\n testId: \"align-bottom\"\n }],\n value: getFormValue(elements, appState, element => {\n if ((0,_element__WEBPACK_IMPORTED_MODULE_10__.isTextElement)(element) && element.containerId) {\n return element.verticalAlign;\n }\n\n const boundTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_12__.getBoundTextElement)(element, app.scene.getNonDeletedElementsMap());\n\n if (boundTextElement) {\n return boundTextElement.verticalAlign;\n }\n\n return null;\n }, element => (0,_element__WEBPACK_IMPORTED_MODULE_10__.isTextElement)(element) || (0,_element_textElement__WEBPACK_IMPORTED_MODULE_12__.getBoundTextElement)(element, app.scene.getNonDeletedElementsMap()) !== null, hasSelection => hasSelection ? null : _constants__WEBPACK_IMPORTED_MODULE_9__.VERTICAL_ALIGN.MIDDLE),\n onChange: value => updateData(value)\n })\n });\n }\n});\nconst actionChangeRoundness = (0,_register__WEBPACK_IMPORTED_MODULE_20__.register)({\n name: \"changeRoundness\",\n label: \"Change edge roundness\",\n trackEvent: false,\n perform: (elements, appState, value) => {\n return {\n elements: changeProperty(elements, appState, el => {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_13__.isElbowArrow)(el)) {\n return el;\n }\n\n return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(el, {\n roundness: value === \"round\" ? {\n type: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_13__.isUsingAdaptiveRadius)(el.type) ? _constants__WEBPACK_IMPORTED_MODULE_9__.ROUNDNESS.ADAPTIVE_RADIUS : _constants__WEBPACK_IMPORTED_MODULE_9__.ROUNDNESS.PROPORTIONAL_RADIUS\n } : null\n });\n }),\n appState: Object.assign(Object.assign({}, appState), {\n currentItemRoundness: value\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.CAPTURE\n };\n },\n PanelComponent: ({\n elements,\n appState,\n updateData\n }) => {\n const targetElements = (0,_scene__WEBPACK_IMPORTED_MODULE_17__.getTargetElements)((0,_element__WEBPACK_IMPORTED_MODULE_10__.getNonDeletedElements)(elements), appState);\n const hasLegacyRoundness = targetElements.some(el => {\n var _a;\n\n return ((_a = el.roundness) === null || _a === void 0 ? void 0 : _a.type) === _constants__WEBPACK_IMPORTED_MODULE_9__.ROUNDNESS.LEGACY;\n });\n return (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_14__.t)(\"labels.edges\")\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ButtonIconSelect__WEBPACK_IMPORTED_MODULE_4__.ButtonIconSelect, {\n group: \"edges\",\n options: [{\n value: \"sharp\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.sharp\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.EdgeSharpIcon\n }, {\n value: \"round\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.round\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.EdgeRoundIcon\n }],\n value: getFormValue(elements, appState, element => hasLegacyRoundness ? null : element.roundness ? \"round\" : \"sharp\", element => !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_13__.isArrowElement)(element) && element.hasOwnProperty(\"roundness\"), hasSelection => hasSelection ? null : appState.currentItemRoundness),\n onChange: value => updateData(value)\n })]\n });\n }\n});\n\nconst getArrowheadOptions = flip => {\n return [{\n value: null,\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.arrowhead_none\"),\n keyBinding: \"q\",\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.ArrowheadNoneIcon\n }, {\n value: \"arrow\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.arrowhead_arrow\"),\n keyBinding: \"w\",\n icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_icons__WEBPACK_IMPORTED_MODULE_8__.ArrowheadArrowIcon, {\n flip: flip\n })\n }, {\n value: \"bar\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.arrowhead_bar\"),\n keyBinding: \"e\",\n icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_icons__WEBPACK_IMPORTED_MODULE_8__.ArrowheadBarIcon, {\n flip: flip\n })\n }, {\n value: \"dot\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.arrowhead_dot\"),\n keyBinding: \"a\",\n icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_icons__WEBPACK_IMPORTED_MODULE_8__.ArrowheadCircleIcon, {\n flip: flip\n }),\n showInPicker: true //zsviczian\n\n }, {\n value: \"circle\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.arrowhead_circle\"),\n keyBinding: \"s\",\n icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_icons__WEBPACK_IMPORTED_MODULE_8__.ArrowheadCircleIcon, {\n flip: flip\n }),\n showInPicker: true //zsviczian\n\n }, {\n value: \"circle_outline\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.arrowhead_circle_outline\"),\n keyBinding: \"d\",\n icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_icons__WEBPACK_IMPORTED_MODULE_8__.ArrowheadCircleOutlineIcon, {\n flip: flip\n }),\n showInPicker: true //zsviczian\n\n }, {\n value: \"triangle\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.arrowhead_triangle\"),\n icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_icons__WEBPACK_IMPORTED_MODULE_8__.ArrowheadTriangleIcon, {\n flip: flip\n }),\n keyBinding: \"z\" //zsviczian was t\n\n }, {\n value: \"triangle_outline\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.arrowhead_triangle_outline\"),\n icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_icons__WEBPACK_IMPORTED_MODULE_8__.ArrowheadTriangleOutlineIcon, {\n flip: flip\n }),\n keyBinding: \"x\",\n showInPicker: true //zsviczian\n\n }, {\n value: \"diamond\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.arrowhead_diamond\"),\n icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_icons__WEBPACK_IMPORTED_MODULE_8__.ArrowheadDiamondIcon, {\n flip: flip\n }),\n keyBinding: \"c\",\n showInPicker: true //zsviczian\n\n }, {\n value: \"diamond_outline\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.arrowhead_diamond_outline\"),\n icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_icons__WEBPACK_IMPORTED_MODULE_8__.ArrowheadDiamondOutlineIcon, {\n flip: flip\n }),\n keyBinding: \"v\",\n showInPicker: true //zsviczian\n\n }];\n};\n\nconst actionChangeArrowhead = (0,_register__WEBPACK_IMPORTED_MODULE_20__.register)({\n name: \"changeArrowhead\",\n label: \"Change arrowheads\",\n trackEvent: false,\n perform: (elements, appState, value) => {\n return {\n elements: changeProperty(elements, appState, el => {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_13__.isLinearElement)(el)) {\n const {\n position,\n type\n } = value;\n\n if (position === \"start\") {\n const element = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(el, {\n startArrowhead: type\n });\n return element;\n } else if (position === \"end\") {\n const element = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(el, {\n endArrowhead: type\n });\n return element;\n }\n }\n\n return el;\n }),\n appState: Object.assign(Object.assign({}, appState), {\n [value.position === \"start\" ? \"currentItemStartArrowhead\" : \"currentItemEndArrowhead\"]: value.type\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.CAPTURE\n };\n },\n PanelComponent: ({\n elements,\n appState,\n updateData\n }) => {\n const isRTL = (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.getLanguage)().rtl;\n return (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_14__.t)(\"labels.arrowheads\")\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n className: \"iconSelectList buttonList\"\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_IconPicker__WEBPACK_IMPORTED_MODULE_6__.IconPicker, {\n label: \"arrowhead_start\",\n options: getArrowheadOptions(!isRTL),\n value: getFormValue(elements, appState, element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_13__.isLinearElement)(element) && (0,_scene__WEBPACK_IMPORTED_MODULE_17__.canHaveArrowheads)(element.type) ? element.startArrowhead : appState.currentItemStartArrowhead, true, appState.currentItemStartArrowhead),\n onChange: value => updateData({\n position: \"start\",\n type: value\n })\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_IconPicker__WEBPACK_IMPORTED_MODULE_6__.IconPicker, {\n label: \"arrowhead_end\",\n group: \"arrowheads\",\n options: getArrowheadOptions(!!isRTL),\n value: getFormValue(elements, appState, element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_13__.isLinearElement)(element) && (0,_scene__WEBPACK_IMPORTED_MODULE_17__.canHaveArrowheads)(element.type) ? element.endArrowhead : appState.currentItemEndArrowhead, true, appState.currentItemEndArrowhead),\n onChange: value => updateData({\n position: \"end\",\n type: value\n })\n })]\n }))]\n });\n }\n});\nconst actionChangeArrowType = (0,_register__WEBPACK_IMPORTED_MODULE_20__.register)({\n name: \"changeArrowType\",\n label: \"Change arrow types\",\n trackEvent: false,\n perform: (elements, appState, value, app) => {\n return {\n elements: changeProperty(elements, appState, el => {\n if (!(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_13__.isArrowElement)(el)) {\n return el;\n }\n\n const newElement = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(el, {\n roundness: value === _constants__WEBPACK_IMPORTED_MODULE_9__.ARROW_TYPE.round ? {\n type: _constants__WEBPACK_IMPORTED_MODULE_9__.ROUNDNESS.PROPORTIONAL_RADIUS\n } : null,\n elbowed: value === _constants__WEBPACK_IMPORTED_MODULE_9__.ARROW_TYPE.elbow,\n points: value === _constants__WEBPACK_IMPORTED_MODULE_9__.ARROW_TYPE.elbow || el.elbowed ? [el.points[0], el.points[el.points.length - 1]] : el.points\n });\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_13__.isElbowArrow)(newElement)) {\n const elementsMap = app.scene.getNonDeletedElementsMap();\n app.dismissLinearEditor();\n const startGlobalPoint = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_25__.LinearElementEditor.getPointAtIndexGlobalCoordinates(newElement, 0, elementsMap);\n const endGlobalPoint = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_25__.LinearElementEditor.getPointAtIndexGlobalCoordinates(newElement, -1, elementsMap);\n const startHoveredElement = !newElement.startBinding && (0,_element_binding__WEBPACK_IMPORTED_MODULE_23__.getHoveredElementForBinding)((0,_utils__WEBPACK_IMPORTED_MODULE_19__.tupleToCoors)(startGlobalPoint), elements, elementsMap, true);\n const endHoveredElement = !newElement.endBinding && (0,_element_binding__WEBPACK_IMPORTED_MODULE_23__.getHoveredElementForBinding)((0,_utils__WEBPACK_IMPORTED_MODULE_19__.tupleToCoors)(endGlobalPoint), elements, elementsMap, true);\n const startElement = startHoveredElement ? startHoveredElement : newElement.startBinding && elementsMap.get(newElement.startBinding.elementId);\n const endElement = endHoveredElement ? endHoveredElement : newElement.endBinding && elementsMap.get(newElement.endBinding.elementId);\n const finalStartPoint = startHoveredElement ? (0,_element_binding__WEBPACK_IMPORTED_MODULE_23__.bindPointToSnapToElementOutline)(startGlobalPoint, endGlobalPoint, startHoveredElement, elementsMap) : startGlobalPoint;\n const finalEndPoint = endHoveredElement ? (0,_element_binding__WEBPACK_IMPORTED_MODULE_23__.bindPointToSnapToElementOutline)(endGlobalPoint, startGlobalPoint, endHoveredElement, elementsMap) : endGlobalPoint;\n startHoveredElement && (0,_element_binding__WEBPACK_IMPORTED_MODULE_23__.bindLinearElement)(newElement, startHoveredElement, \"start\", elementsMap);\n endHoveredElement && (0,_element_binding__WEBPACK_IMPORTED_MODULE_23__.bindLinearElement)(newElement, endHoveredElement, \"end\", elementsMap);\n (0,_element_routing__WEBPACK_IMPORTED_MODULE_24__.mutateElbowArrow)(newElement, elementsMap, [finalStartPoint, finalEndPoint].map(p => (0,_math__WEBPACK_IMPORTED_MODULE_26__.point)(p[0] - newElement.x, p[1] - newElement.y)), (0,_math__WEBPACK_IMPORTED_MODULE_26__.vector)(0, 0), Object.assign(Object.assign({}, startElement && newElement.startBinding ? {\n startBinding: Object.assign(Object.assign({}, newElement.startBinding), (0,_element_binding__WEBPACK_IMPORTED_MODULE_23__.calculateFixedPointForElbowArrowBinding)(newElement, startElement, \"start\", elementsMap))\n } : {}), endElement && newElement.endBinding ? {\n endBinding: Object.assign(Object.assign({}, newElement.endBinding), (0,_element_binding__WEBPACK_IMPORTED_MODULE_23__.calculateFixedPointForElbowArrowBinding)(newElement, endElement, \"end\", elementsMap))\n } : {}));\n } else {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.mutateElement)(newElement, {\n startBinding: newElement.startBinding ? Object.assign(Object.assign({}, newElement.startBinding), {\n fixedPoint: null\n }) : null,\n endBinding: newElement.endBinding ? Object.assign(Object.assign({}, newElement.endBinding), {\n fixedPoint: null\n }) : null\n }, false);\n }\n\n return newElement;\n }),\n appState: Object.assign(Object.assign({}, appState), {\n currentItemArrowType: value\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.CAPTURE\n };\n },\n PanelComponent: ({\n elements,\n appState,\n updateData\n }) => {\n return (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_14__.t)(\"labels.arrowtypes\")\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ButtonIconSelect__WEBPACK_IMPORTED_MODULE_4__.ButtonIconSelect, {\n group: \"arrowtypes\",\n options: [{\n value: _constants__WEBPACK_IMPORTED_MODULE_9__.ARROW_TYPE.sharp,\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.arrowtype_sharp\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.sharpArrowIcon,\n testId: \"sharp-arrow\"\n }, {\n value: _constants__WEBPACK_IMPORTED_MODULE_9__.ARROW_TYPE.round,\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.arrowtype_round\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.roundArrowIcon,\n testId: \"round-arrow\"\n }, {\n value: _constants__WEBPACK_IMPORTED_MODULE_9__.ARROW_TYPE.elbow,\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.arrowtype_elbowed\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.elbowArrowIcon,\n testId: \"elbow-arrow\"\n }],\n value: getFormValue(elements, appState, element => {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_13__.isArrowElement)(element)) {\n return element.elbowed ? _constants__WEBPACK_IMPORTED_MODULE_9__.ARROW_TYPE.elbow : element.roundness ? _constants__WEBPACK_IMPORTED_MODULE_9__.ARROW_TYPE.round : _constants__WEBPACK_IMPORTED_MODULE_9__.ARROW_TYPE.sharp;\n }\n\n return null;\n }, element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_13__.isArrowElement)(element), hasSelection => hasSelection ? null : appState.currentItemArrowType),\n onChange: value => updateData(value)\n })]\n });\n }\n});\n\n//# sourceURL=webpack://ExcalidrawLib/./actions/actionProperties.tsx?");
|
|
598
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"actionChangeArrowType\": () => (/* binding */ actionChangeArrowType),\n/* harmony export */ \"actionChangeArrowhead\": () => (/* binding */ actionChangeArrowhead),\n/* harmony export */ \"actionChangeBackgroundColor\": () => (/* binding */ actionChangeBackgroundColor),\n/* harmony export */ \"actionChangeFillStyle\": () => (/* binding */ actionChangeFillStyle),\n/* harmony export */ \"actionChangeFontFamily\": () => (/* binding */ actionChangeFontFamily),\n/* harmony export */ \"actionChangeFontSize\": () => (/* binding */ actionChangeFontSize),\n/* harmony export */ \"actionChangeOpacity\": () => (/* binding */ actionChangeOpacity),\n/* harmony export */ \"actionChangeRoundness\": () => (/* binding */ actionChangeRoundness),\n/* harmony export */ \"actionChangeSloppiness\": () => (/* binding */ actionChangeSloppiness),\n/* harmony export */ \"actionChangeStrokeColor\": () => (/* binding */ actionChangeStrokeColor),\n/* harmony export */ \"actionChangeStrokeStyle\": () => (/* binding */ actionChangeStrokeStyle),\n/* harmony export */ \"actionChangeStrokeWidth\": () => (/* binding */ actionChangeStrokeWidth),\n/* harmony export */ \"actionChangeTextAlign\": () => (/* binding */ actionChangeTextAlign),\n/* harmony export */ \"actionChangeVerticalAlign\": () => (/* binding */ actionChangeVerticalAlign),\n/* harmony export */ \"actionDecreaseFontSize\": () => (/* binding */ actionDecreaseFontSize),\n/* harmony export */ \"actionIncreaseFontSize\": () => (/* binding */ actionIncreaseFontSize),\n/* harmony export */ \"changeProperty\": () => (/* binding */ changeProperty),\n/* harmony export */ \"getFontSize\": () => (/* binding */ getFontSize),\n/* harmony export */ \"getFormValue\": () => (/* binding */ getFormValue)\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 _colors__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../colors */ \"./colors.ts\");\n/* harmony import */ var _analytics__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../analytics */ \"./analytics.ts\");\n/* harmony import */ var _components_ButtonIconSelect__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../components/ButtonIconSelect */ \"./components/ButtonIconSelect.tsx\");\n/* harmony import */ var _components_ColorPicker_ColorPicker__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../components/ColorPicker/ColorPicker */ \"./components/ColorPicker/ColorPicker.tsx\");\n/* harmony import */ var _components_IconPicker__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../components/IconPicker */ \"./components/IconPicker.tsx\");\n/* harmony import */ var _components_FontPicker_FontPicker__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../components/FontPicker/FontPicker */ \"./components/FontPicker/FontPicker.tsx\");\n/* harmony import */ var _components_icons__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../components/icons */ \"./components/icons.tsx\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _element_mutateElement__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../element/mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _element_textElement__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../element/textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../i18n */ \"./i18n.ts\");\n/* harmony import */ var _keys__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../keys */ \"./keys.ts\");\n/* harmony import */ var _random__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../random */ \"./random.ts\");\n/* harmony import */ var _scene__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../scene */ \"./scene/index.ts\");\n/* harmony import */ var _scene_comparisons__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../scene/comparisons */ \"./scene/comparisons.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _register__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./register */ \"./actions/register.ts\");\n/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ../store */ \"./store.ts\");\n/* harmony import */ var _fonts__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ../fonts */ \"./fonts/index.ts\");\n/* harmony import */ var _element_binding__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ../element/binding */ \"./element/binding.ts\");\n/* harmony import */ var _element_routing__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ../element/routing */ \"./element/routing.ts\");\n/* harmony import */ var _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ../element/linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__(/*! ../../math */ \"../math/index.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 // TODO barnabasmolnar/editor-redesign\n// TextAlignTopIcon, TextAlignBottomIcon,TextAlignMiddleIcon,\n// ArrowHead icons\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;\nconst changeProperty = (elements, appState, callback, includeBoundText = false) => {\n const selectedElementIds = (0,_utils__WEBPACK_IMPORTED_MODULE_19__.arrayToMap)((0,_scene__WEBPACK_IMPORTED_MODULE_17__.getSelectedElements)(elements, appState, {\n includeBoundTextElement: includeBoundText\n }));\n return elements.map(element => {\n var _a;\n\n if (selectedElementIds.get(element.id) || element.id === ((_a = appState.editingTextElement) === null || _a === void 0 ? void 0 : _a.id)) {\n return callback(element);\n }\n\n return element;\n });\n};\nconst getFormValue = function (elements, appState, getAttribute, isRelevantElement, defaultValue) {\n var _a;\n\n const editingTextElement = appState.editingTextElement;\n const nonDeletedElements = (0,_element__WEBPACK_IMPORTED_MODULE_10__.getNonDeletedElements)(elements);\n let ret = null;\n\n if (editingTextElement) {\n ret = getAttribute(editingTextElement);\n }\n\n if (!ret) {\n const hasSelection = (0,_scene__WEBPACK_IMPORTED_MODULE_17__.isSomeElementSelected)(nonDeletedElements, appState);\n\n if (hasSelection) {\n ret = (_a = (0,_scene__WEBPACK_IMPORTED_MODULE_17__.getCommonAttributeOfSelectedElements)(isRelevantElement === true ? nonDeletedElements : nonDeletedElements.filter(el => isRelevantElement(el)), appState, getAttribute)) !== null && _a !== void 0 ? _a : typeof defaultValue === \"function\" ? defaultValue(true) : defaultValue;\n } else {\n ret = typeof defaultValue === \"function\" ? defaultValue(false) : defaultValue;\n }\n }\n\n return ret;\n};\n\nconst offsetElementAfterFontResize = (prevElement, nextElement) => {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_13__.isBoundToContainer)(nextElement) || !nextElement.autoResize) {\n return nextElement;\n }\n\n return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.mutateElement)(nextElement, {\n x: prevElement.textAlign === \"left\" ? prevElement.x : prevElement.x + (prevElement.width - nextElement.width) / (prevElement.textAlign === \"center\" ? 2 : 1),\n // centering vertically is non-standard, but for Excalidraw I think\n // it makes sense\n y: prevElement.y + (prevElement.height - nextElement.height) / 2\n }, false);\n};\n\nconst changeFontSize = (elements, appState, app, getNewFontSize, fallbackValue) => {\n const newFontSizes = new Set();\n return {\n elements: changeProperty(elements, appState, oldElement => {\n if ((0,_element__WEBPACK_IMPORTED_MODULE_10__.isTextElement)(oldElement)) {\n const newFontSize = getNewFontSize(oldElement);\n newFontSizes.add(newFontSize);\n let newElement = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(oldElement, {\n fontSize: newFontSize\n });\n (0,_element__WEBPACK_IMPORTED_MODULE_10__.redrawTextBoundingBox)(newElement, app.scene.getContainerElement(oldElement), app.scene.getNonDeletedElementsMap());\n newElement = offsetElementAfterFontResize(oldElement, newElement);\n return newElement;\n }\n\n return oldElement;\n }, true),\n appState: Object.assign(Object.assign({}, appState), {\n // update state only if we've set all select text elements to\n // the same font size\n currentItemFontSize: newFontSizes.size === 1 ? [...newFontSizes][0] : fallbackValue !== null && fallbackValue !== void 0 ? fallbackValue : appState.currentItemFontSize\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.CAPTURE\n };\n}; // -----------------------------------------------------------------------------\n\n\nconst actionChangeStrokeColor = (0,_register__WEBPACK_IMPORTED_MODULE_20__.register)({\n name: \"changeStrokeColor\",\n label: \"labels.stroke\",\n trackEvent: false,\n perform: (elements, appState, value, app) => {\n //zsviczian added containers\n const containers = (0,_scene__WEBPACK_IMPORTED_MODULE_17__.getSelectedElements)(elements, appState, {\n includeBoundTextElement: false\n }).filter(el => el.boundElements).map(el => el.id);\n return Object.assign(Object.assign({}, value.currentItemStrokeColor && {\n elements: changeProperty(elements, appState, el => {\n var _a;\n\n if ( //zsviczian\n (0,_element__WEBPACK_IMPORTED_MODULE_10__.isTextElement)(el) && el.containerId && containers.includes(el.containerId) && ((_a = app.scene.getContainerElement(el)) === null || _a === void 0 ? void 0 : _a.strokeColor) !== el.strokeColor) {\n return el;\n }\n\n return (0,_scene_comparisons__WEBPACK_IMPORTED_MODULE_18__.hasStrokeColor)(el.type) ? (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(el, {\n strokeColor: value.currentItemStrokeColor\n }) : el;\n }, true)\n }), {\n appState: Object.assign(Object.assign({}, appState), value),\n storeAction: !!value.currentItemStrokeColor ? _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.CAPTURE : _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.NONE\n });\n },\n PanelComponent: ({\n elements,\n appState,\n updateData,\n appProps\n }) => {\n var _a, _b, _c, _d, _e;\n\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"h3\", Object.assign({\n \"aria-hidden\": \"true\"\n }, {\n children: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.stroke\")\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ColorPicker_ColorPicker__WEBPACK_IMPORTED_MODULE_5__.ColorPicker, {\n topPicks: //zsviczian\n (_c = (_b = (_a = appState.colorPalette) === null || _a === void 0 ? void 0 : _a.topPicks) === null || _b === void 0 ? void 0 : _b.elementStroke) !== null && _c !== void 0 ? _c : _colors__WEBPACK_IMPORTED_MODULE_2__.DEFAULT_ELEMENT_STROKE_PICKS,\n palette: //zsviczian\n (_e = (_d = appState.colorPalette) === null || _d === void 0 ? void 0 : _d.elementStroke) !== null && _e !== void 0 ? _e : _colors__WEBPACK_IMPORTED_MODULE_2__.DEFAULT_ELEMENT_STROKE_COLOR_PALETTE,\n type: \"elementStroke\",\n label: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.stroke\"),\n color: getFormValue(elements, appState, element => element.strokeColor, true, appState.currentItemStrokeColor),\n onChange: color => updateData({\n currentItemStrokeColor: color\n }),\n elements: elements,\n appState: appState,\n updateData: updateData\n })]\n });\n }\n});\nconst actionChangeBackgroundColor = (0,_register__WEBPACK_IMPORTED_MODULE_20__.register)({\n name: \"changeBackgroundColor\",\n label: \"labels.changeBackground\",\n trackEvent: false,\n perform: (elements, appState, value) => {\n return Object.assign(Object.assign({}, value.currentItemBackgroundColor && {\n elements: changeProperty(elements, appState, el => (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(el, {\n backgroundColor: value.currentItemBackgroundColor\n }))\n }), {\n appState: Object.assign(Object.assign({}, appState), value),\n storeAction: !!value.currentItemBackgroundColor ? _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.CAPTURE : _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.NONE\n });\n },\n PanelComponent: ({\n elements,\n appState,\n updateData,\n appProps\n }) => {\n var _a, _b, _c, _d, _e;\n\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"h3\", Object.assign({\n \"aria-hidden\": \"true\"\n }, {\n children: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.background\")\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ColorPicker_ColorPicker__WEBPACK_IMPORTED_MODULE_5__.ColorPicker, {\n topPicks: //zsviczian\n (_c = (_b = (_a = appState.colorPalette) === null || _a === void 0 ? void 0 : _a.topPicks) === null || _b === void 0 ? void 0 : _b.elementBackground) !== null && _c !== void 0 ? _c : _colors__WEBPACK_IMPORTED_MODULE_2__.DEFAULT_ELEMENT_BACKGROUND_PICKS,\n palette: //zsviczian\n (_e = (_d = appState.colorPalette) === null || _d === void 0 ? void 0 : _d.elementBackground) !== null && _e !== void 0 ? _e : _colors__WEBPACK_IMPORTED_MODULE_2__.DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE,\n type: \"elementBackground\",\n label: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.background\"),\n color: getFormValue(elements, appState, element => element.backgroundColor, true, appState.currentItemBackgroundColor),\n onChange: color => updateData({\n currentItemBackgroundColor: color\n }),\n elements: elements,\n appState: appState,\n updateData: updateData\n })]\n });\n }\n});\nconst actionChangeFillStyle = (0,_register__WEBPACK_IMPORTED_MODULE_20__.register)({\n name: \"changeFillStyle\",\n label: \"labels.fill\",\n trackEvent: false,\n perform: (elements, appState, value, app) => {\n (0,_analytics__WEBPACK_IMPORTED_MODULE_3__.trackEvent)(\"element\", \"changeFillStyle\", `${value} (${app.device.editor.isMobile ? \"mobile\" : \"desktop\"})`);\n return {\n elements: changeProperty(elements, appState, el => (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(el, {\n fillStyle: value\n })),\n appState: Object.assign(Object.assign({}, appState), {\n currentItemFillStyle: value\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.CAPTURE\n };\n },\n PanelComponent: ({\n elements,\n appState,\n updateData\n }) => {\n const selectedElements = (0,_scene__WEBPACK_IMPORTED_MODULE_17__.getSelectedElements)(elements, appState);\n const allElementsZigZag = selectedElements.length > 0 && selectedElements.every(el => el.fillStyle === \"zigzag\");\n return (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_14__.t)(\"labels.fill\")\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ButtonIconSelect__WEBPACK_IMPORTED_MODULE_4__.ButtonIconSelect, {\n type: \"button\",\n options: [{\n value: \"hachure\",\n text: `${allElementsZigZag ? (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.zigzag\") : (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.hachure\")} (${(0,_utils__WEBPACK_IMPORTED_MODULE_19__.getShortcutKey)(\"Alt-Click\")})`,\n icon: allElementsZigZag ? _components_icons__WEBPACK_IMPORTED_MODULE_8__.FillZigZagIcon : _components_icons__WEBPACK_IMPORTED_MODULE_8__.FillHachureIcon,\n active: allElementsZigZag ? true : undefined,\n testId: `fill-hachure`\n }, {\n value: \"cross-hatch\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.crossHatch\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.FillCrossHatchIcon,\n testId: `fill-cross-hatch`\n }, {\n value: \"solid\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.solid\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.FillSolidIcon,\n testId: `fill-solid`\n }],\n value: getFormValue(elements, appState, element => element.fillStyle, element => element.hasOwnProperty(\"fillStyle\"), hasSelection => hasSelection ? null : appState.currentItemFillStyle),\n onClick: (value, event) => {\n const nextValue = event.altKey && value === \"hachure\" && selectedElements.every(el => el.fillStyle === \"hachure\") ? \"zigzag\" : value;\n updateData(nextValue);\n }\n })]\n });\n }\n});\nconst actionChangeStrokeWidth = (0,_register__WEBPACK_IMPORTED_MODULE_20__.register)({\n name: \"changeStrokeWidth\",\n label: \"labels.strokeWidth\",\n trackEvent: false,\n perform: (elements, appState, value) => {\n return {\n elements: changeProperty(elements, appState, el => (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(el, {\n strokeWidth: value\n })),\n appState: Object.assign(Object.assign({}, appState), {\n currentItemStrokeWidth: value\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.CAPTURE\n };\n },\n PanelComponent: ({\n elements,\n appState,\n updateData\n }) => (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_14__.t)(\"labels.strokeWidth\")\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ButtonIconSelect__WEBPACK_IMPORTED_MODULE_4__.ButtonIconSelect, {\n group: \"stroke-width\",\n options: [{\n //zsviczian\n value: 0.5,\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.extraThin\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.StrokeWidthThinIcon\n }, {\n value: _constants__WEBPACK_IMPORTED_MODULE_9__.STROKE_WIDTH.thin,\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.thin\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.StrokeWidthBaseIcon,\n testId: \"strokeWidth-thin\"\n }, {\n value: _constants__WEBPACK_IMPORTED_MODULE_9__.STROKE_WIDTH.bold,\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.bold\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.StrokeWidthBoldIcon,\n testId: \"strokeWidth-bold\"\n }, {\n value: _constants__WEBPACK_IMPORTED_MODULE_9__.STROKE_WIDTH.extraBold,\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.extraBold\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.StrokeWidthExtraBoldIcon,\n testId: \"strokeWidth-extraBold\"\n }],\n value: getFormValue(elements, appState, element => element.strokeWidth, element => element.hasOwnProperty(\"strokeWidth\"), hasSelection => hasSelection ? null : appState.currentItemStrokeWidth),\n onChange: value => updateData(value)\n })]\n })\n});\nconst actionChangeSloppiness = (0,_register__WEBPACK_IMPORTED_MODULE_20__.register)({\n name: \"changeSloppiness\",\n label: \"labels.sloppiness\",\n trackEvent: false,\n perform: (elements, appState, value) => {\n return {\n elements: changeProperty(elements, appState, el => (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(el, {\n seed: (0,_random__WEBPACK_IMPORTED_MODULE_16__.randomInteger)(),\n roughness: value\n })),\n appState: Object.assign(Object.assign({}, appState), {\n currentItemRoughness: value\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.CAPTURE\n };\n },\n PanelComponent: ({\n elements,\n appState,\n updateData\n }) => (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_14__.t)(\"labels.sloppiness\")\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ButtonIconSelect__WEBPACK_IMPORTED_MODULE_4__.ButtonIconSelect, {\n group: \"sloppiness\",\n options: [{\n value: 0,\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.architect\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.SloppinessArchitectIcon\n }, {\n value: 1,\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.artist\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.SloppinessArtistIcon\n }, {\n value: 2,\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.cartoonist\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.SloppinessCartoonistIcon\n }],\n value: getFormValue(elements, appState, element => element.roughness, element => element.hasOwnProperty(\"roughness\"), hasSelection => hasSelection ? null : appState.currentItemRoughness),\n onChange: value => updateData(value)\n })]\n })\n});\nconst actionChangeStrokeStyle = (0,_register__WEBPACK_IMPORTED_MODULE_20__.register)({\n name: \"changeStrokeStyle\",\n label: \"labels.strokeStyle\",\n trackEvent: false,\n perform: (elements, appState, value) => {\n return {\n elements: changeProperty(elements, appState, el => (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(el, {\n strokeStyle: value\n })),\n appState: Object.assign(Object.assign({}, appState), {\n currentItemStrokeStyle: value\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.CAPTURE\n };\n },\n PanelComponent: ({\n elements,\n appState,\n updateData\n }) => (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_14__.t)(\"labels.strokeStyle\")\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ButtonIconSelect__WEBPACK_IMPORTED_MODULE_4__.ButtonIconSelect, {\n group: \"strokeStyle\",\n options: [{\n value: \"solid\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.strokeStyle_solid\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.StrokeWidthBaseIcon\n }, {\n value: \"dashed\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.strokeStyle_dashed\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.StrokeStyleDashedIcon\n }, {\n value: \"dotted\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.strokeStyle_dotted\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.StrokeStyleDottedIcon\n }],\n value: getFormValue(elements, appState, element => element.strokeStyle, element => element.hasOwnProperty(\"strokeStyle\"), hasSelection => hasSelection ? null : appState.currentItemStrokeStyle),\n onChange: value => updateData(value)\n })]\n })\n});\nconst actionChangeOpacity = (0,_register__WEBPACK_IMPORTED_MODULE_20__.register)({\n name: \"changeOpacity\",\n label: \"labels.opacity\",\n trackEvent: false,\n perform: (elements, appState, value) => {\n return {\n elements: changeProperty(elements, appState, el => (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(el, {\n opacity: value\n }), true),\n appState: Object.assign(Object.assign({}, appState), {\n currentItemOpacity: value\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.CAPTURE\n };\n },\n PanelComponent: ({\n elements,\n appState,\n updateData\n }) => {\n var _a;\n\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"label\", Object.assign({\n className: \"control-label\"\n }, {\n children: [(0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.opacity\"), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"input\", {\n type: \"range\",\n min: \"0\",\n max: \"100\",\n step: \"10\",\n onChange: event => updateData(+event.target.value),\n value: (_a = getFormValue(elements, appState, element => element.opacity, true, appState.currentItemOpacity)) !== null && _a !== void 0 ? _a : undefined\n })]\n }));\n }\n});\nlet scaleFontSize = false; //zsviczian\n\nlet useFibonacci = false; //zsviczian\n//zsviczian\n//with a random noise of +-0.05 to avoid duplicates\n\nconst fibonacciValues = [[177.38, 109.63, 67.75, 41.9, 25.91, 16, 9.9, 6.14, 3.83, 2.29, 1.47, 0.9, 0.57], [287.06, 177.43, 109.64, 67.73, 41.92, 26, 16.01, 9.92, 6.1, 3.75, 2.34, 1.41, 0.87], [464.44, 287.11, 177.44, 109.65, 67.76, 42, 25.9, 15.97, 9.93, 6.12, 3.82, 2.3, 1.46], [751.52, 464.45, 287.08, 177.42, 109.67, 68, 41.89, 25.93, 15.99, 9.88, 6.07, 3.77, 2.35]]; //zsviczian\n\nconst normalValues = [[182.22, 121.46, 80, 53, 35.99, 23.96, 16, 10.68, 7.1, 4.74, 3.16, 2.11, 1.45, 0.97, 0.66], [227.82, 151.88, 101.25, 67.51, 44.95, 29.98, 20, 13.31, 8.85, 5.97, 3.95, 2.68, 1.77, 1.19, 0.82], [318.96, 212.59, 141.8, 94.51, 62.98, 42.01, 28, 18.63, 12.45, 8.26, 5.52, 3.7, 2.47, 1.61, 1.07], [410.02, 273.42, 182.28, 121.5, 81, 54, 36, 24.01, 16.05, 10.69, 7.13, 4.78, 3.12, 2.07, 1.38]]; //zsviczian\n\nconst valueToIndex = {\n 16: 0,\n 20: 1,\n 28: 2,\n 36: 3\n}; //zsviczian\n\nconst getFibonacciFontSize = (zoom, buttonValue) => {\n const index = valueToIndex[buttonValue];\n\n if (typeof index !== \"number\") {\n return buttonValue;\n }\n\n const range = [[0, 0.12], [0.12, 0.19], [0.19, 0.31], [0.31, 0.5], [0.5, 0.81], [0.81, 1.31], [1.31, 2.12], [2.12, 3.43], [3.43, 5.54], [5.54, 8.97], [8.97, 14.52], [14.52, 23.49], [23.49, 100]];\n\n for (let i = 0; i < range.length; i++) {\n const [from, to] = range[i];\n\n if (zoom >= from && zoom < to) {\n return fibonacciValues[index][i];\n break;\n }\n }\n\n return buttonValue;\n}; //zsviczian\n\n\nconst getScaledFontSize = (zoom, buttonValue) => {\n const index = valueToIndex[buttonValue];\n\n if (typeof index !== \"number\") {\n return buttonValue;\n }\n\n const range = [[0, 0.11], [0.11, 0.16], [0.16, 0.25], [0.25, 0.37], [0.37, 0.56], [0.56, 0.83], [0.83, 1.25], [1.25, 1.88], [1.88, 2.81], [2.81, 4.22], [4.22, 6.33], [6.33, 9.49], [9.49, 14.24], [14.24, 21.36], [21.36, 100]];\n\n for (let i = 0; i < range.length; i++) {\n const [from, to] = range[i];\n\n if (zoom >= from && zoom < to) {\n return normalValues[index][i];\n break;\n }\n }\n\n return buttonValue;\n}; //zsviczian\n\n\nconst findIndex = (values, value) => {\n for (let i = 0; i < values.length; i++) {\n const idx = values[i].indexOf(value);\n\n if (idx !== -1) {\n return i;\n }\n }\n\n return null;\n}; //zsviczian\n\n\nconst getFontSize = (size, zoom) => {\n zoom = scaleFontSize ? zoom : 1;\n let normalizedSizeIdx = findIndex(fibonacciValues, size);\n\n if (!normalizedSizeIdx) {\n normalizedSizeIdx = findIndex(normalValues, size);\n }\n\n if (normalizedSizeIdx === null) {\n return size;\n }\n\n size = [16, 20, 28, 36][normalizedSizeIdx];\n const nextValue = useFibonacci ? getFibonacciFontSize(zoom, size) : getScaledFontSize(zoom, size);\n return nextValue !== null && nextValue !== void 0 ? nextValue : size;\n};\nconst actionChangeFontSize = (0,_register__WEBPACK_IMPORTED_MODULE_20__.register)({\n name: \"changeFontSize\",\n label: \"labels.fontSize\",\n trackEvent: false,\n perform: (elements, appState, value, app) => {\n return changeFontSize(elements, appState, app, () => value, value);\n },\n PanelComponent: ({\n elements,\n appState,\n updateData,\n app\n }) => {\n var _a; //zsviczian\n\n\n let selectedElements = (0,_scene__WEBPACK_IMPORTED_MODULE_17__.getSelectedElements)(elements, appState).filter(el => (0,_element__WEBPACK_IMPORTED_MODULE_10__.isTextElement)(el));\n\n if (selectedElements.length === 0) {\n selectedElements = appState.editingTextElement ? [appState.editingTextElement] : [];\n }\n\n const size = (_a = selectedElements[0]) === null || _a === void 0 ? void 0 : _a.fontSize;\n let idx = null;\n\n if (size && selectedElements.every(el => el.fontSize === size)) {\n idx = findIndex(normalValues, size);\n\n if (idx === null) {\n idx = findIndex(fibonacciValues, size);\n }\n }\n\n const isSmall = idx === 0;\n const isMedium = idx === 1;\n const isLarge = idx === 2;\n const isVeryLarge = idx === 3;\n return (//zsviczian\n (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_14__.t)(\"labels.fontSize\")\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ButtonIconSelect__WEBPACK_IMPORTED_MODULE_4__.ButtonIconSelect, {\n type: \"button\" //zsviczian\n ,\n //group=\"font-size\" //zsviczian\n options: [{\n value: 16,\n text: `${(0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.small\")}\\nSHIFT: zoomed, ALT/OPT: Fibonacci`,\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.FontSizeSmallIcon,\n testId: \"fontSize-small\",\n active: isSmall ? true : undefined //zsviczian\n\n }, {\n value: 20,\n text: `${(0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.medium\")}\\nSHIFT: zoomed, ALT/OPT: Fibonacci`,\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.FontSizeMediumIcon,\n testId: \"fontSize-medium\",\n active: isMedium ? true : undefined //zsviczian\n\n }, {\n value: 28,\n text: `${(0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.large\")}\\nSHIFT: zoomed, ALT/OPT: Fibonacci`,\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.FontSizeLargeIcon,\n testId: \"fontSize-large\",\n active: isLarge ? true : undefined //zsviczian\n\n }, {\n value: 36,\n text: `${(0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.veryLarge\")}\\nSHIFT: zoomed, ALT/OPT: Fibonacci`,\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.FontSizeExtraLargeIcon,\n testId: \"fontSize-veryLarge\",\n active: isVeryLarge ? true : undefined //zsviczian\n\n }],\n value: getFormValue(elements, appState, element => {\n if ((0,_element__WEBPACK_IMPORTED_MODULE_10__.isTextElement)(element)) {\n return element.fontSize;\n }\n\n const boundTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_12__.getBoundTextElement)(element, app.scene.getNonDeletedElementsMap());\n\n if (boundTextElement) {\n return boundTextElement.fontSize;\n }\n\n return null;\n }, element => (0,_element__WEBPACK_IMPORTED_MODULE_10__.isTextElement)(element) || (0,_element_textElement__WEBPACK_IMPORTED_MODULE_12__.getBoundTextElement)(element, app.scene.getNonDeletedElementsMap()) !== null, hasSelection => hasSelection ? null : appState.currentItemFontSize || _constants__WEBPACK_IMPORTED_MODULE_9__.DEFAULT_FONT_SIZE),\n //zsviczian onClick\n onClick: (value, event) => {\n scaleFontSize = event.shiftKey;\n useFibonacci = event.altKey;\n updateData(getFontSize(value, appState.zoom.value));\n }\n })]\n })\n );\n }\n});\nconst actionDecreaseFontSize = (0,_register__WEBPACK_IMPORTED_MODULE_20__.register)({\n name: \"decreaseFontSize\",\n label: \"labels.decreaseFontSize\",\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.fontSizeIcon,\n trackEvent: false,\n perform: (elements, appState, value, app) => {\n return changeFontSize(elements, appState, app, element => Math.round( // get previous value before relative increase (doesn't work fully\n // due to rounding and float precision issues)\n 1 / (1 + FONT_SIZE_RELATIVE_INCREASE_STEP) * element.fontSize));\n },\n keyTest: event => {\n return event[_keys__WEBPACK_IMPORTED_MODULE_15__.KEYS.CTRL_OR_CMD] && event.shiftKey && ( // KEYS.COMMA needed for MacOS\n event.key === _keys__WEBPACK_IMPORTED_MODULE_15__.KEYS.CHEVRON_LEFT || event.key === _keys__WEBPACK_IMPORTED_MODULE_15__.KEYS.COMMA);\n }\n});\nconst actionIncreaseFontSize = (0,_register__WEBPACK_IMPORTED_MODULE_20__.register)({\n name: \"increaseFontSize\",\n label: \"labels.increaseFontSize\",\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.fontSizeIcon,\n trackEvent: false,\n perform: (elements, appState, value, app) => {\n return changeFontSize(elements, appState, app, element => Math.round(element.fontSize * (1 + FONT_SIZE_RELATIVE_INCREASE_STEP)));\n },\n keyTest: event => {\n return event[_keys__WEBPACK_IMPORTED_MODULE_15__.KEYS.CTRL_OR_CMD] && event.shiftKey && ( // KEYS.PERIOD needed for MacOS\n event.key === _keys__WEBPACK_IMPORTED_MODULE_15__.KEYS.CHEVRON_RIGHT || event.key === _keys__WEBPACK_IMPORTED_MODULE_15__.KEYS.PERIOD);\n }\n});\nconst actionChangeFontFamily = (0,_register__WEBPACK_IMPORTED_MODULE_20__.register)({\n name: \"changeFontFamily\",\n label: \"labels.fontFamily\",\n trackEvent: false,\n perform: (elements, appState, value, app) => {\n var _a;\n\n const _b = value,\n {\n cachedElements,\n resetAll,\n resetContainers\n } = _b,\n nextAppState = __rest(_b, [\"cachedElements\", \"resetAll\", \"resetContainers\"]);\n\n if (resetAll) {\n const nextElements = changeProperty(elements, appState, element => {\n const cachedElement = cachedElements === null || cachedElements === void 0 ? void 0 : cachedElements.get(element.id);\n\n if (cachedElement) {\n const newElement = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(element, Object.assign({}, cachedElement));\n return newElement;\n }\n\n return element;\n }, true);\n return {\n elements: nextElements,\n appState: Object.assign(Object.assign({}, appState), nextAppState),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.UPDATE\n };\n }\n\n const {\n currentItemFontFamily,\n currentHoveredFontFamily\n } = value;\n let nexStoreAction = _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.NONE;\n let nextFontFamily;\n let skipOnHoverRender = false;\n\n if (currentItemFontFamily) {\n nextFontFamily = currentItemFontFamily;\n nexStoreAction = _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.CAPTURE;\n } else if (currentHoveredFontFamily) {\n nextFontFamily = currentHoveredFontFamily;\n nexStoreAction = _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.NONE;\n const selectedTextElements = (0,_scene__WEBPACK_IMPORTED_MODULE_17__.getSelectedElements)(elements, appState, {\n includeBoundTextElement: true\n }).filter(element => (0,_element__WEBPACK_IMPORTED_MODULE_10__.isTextElement)(element)); // skip on hover re-render for more than 200 text elements or for text element with more than 5000 chars combined\n\n if (selectedTextElements.length > 200) {\n skipOnHoverRender = true;\n } else {\n let i = 0;\n let textLengthAccumulator = 0;\n\n while (i < selectedTextElements.length && textLengthAccumulator < 5000) {\n const textElement = selectedTextElements[i];\n textLengthAccumulator += (textElement === null || textElement === void 0 ? void 0 : textElement.originalText.length) || 0;\n i++;\n }\n\n if (textLengthAccumulator > 5000) {\n skipOnHoverRender = true;\n }\n }\n }\n\n const result = {\n appState: Object.assign(Object.assign({}, appState), nextAppState),\n storeAction: nexStoreAction\n };\n\n if (nextFontFamily && !skipOnHoverRender) {\n const elementContainerMapping = new Map();\n let uniqueChars = new Set();\n let skipFontFaceCheck = false;\n const fontsCache = Array.from(_fonts__WEBPACK_IMPORTED_MODULE_22__.Fonts.loadedFontsCache.values());\n const fontFamily = (_a = Object.entries(_constants__WEBPACK_IMPORTED_MODULE_9__.FONT_FAMILY).find(([_, value]) => value === nextFontFamily)) === null || _a === void 0 ? void 0 : _a[0]; // skip `document.font.check` check on hover, if at least one font family has loaded as it's super slow (could result in slightly different bbox, which is fine)\n\n if (currentHoveredFontFamily && fontFamily && fontsCache.some(sig => sig.startsWith(fontFamily))) {\n skipFontFaceCheck = true;\n } // following causes re-render so make sure we changed the family\n // otherwise it could cause unexpected issues, such as preventing opening the popover when in wysiwyg\n\n\n Object.assign(result, {\n elements: changeProperty(elements, appState, oldElement => {\n if ((0,_element__WEBPACK_IMPORTED_MODULE_10__.isTextElement)(oldElement) && (oldElement.fontFamily !== nextFontFamily || currentItemFontFamily) // force update on selection\n ) {\n const newElement = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(oldElement, {\n fontFamily: nextFontFamily,\n lineHeight: (0,_fonts__WEBPACK_IMPORTED_MODULE_22__.getLineHeight)(nextFontFamily)\n });\n const cachedContainer = (cachedElements === null || cachedElements === void 0 ? void 0 : cachedElements.get(oldElement.containerId || \"\")) || {};\n const container = app.scene.getContainerElement(oldElement);\n\n if (resetContainers && container && cachedContainer) {\n // reset the container back to it's cached version\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.mutateElement)(container, Object.assign({}, cachedContainer), false);\n }\n\n if (!skipFontFaceCheck) {\n uniqueChars = new Set([...uniqueChars, ...Array.from(newElement.originalText)]);\n }\n\n elementContainerMapping.set(newElement, container);\n return newElement;\n }\n\n return oldElement;\n }, true)\n }); // size is irrelevant, but necessary\n\n const fontString = `10px ${(0,_utils__WEBPACK_IMPORTED_MODULE_19__.getFontFamilyString)({\n fontFamily: nextFontFamily\n })}`;\n const chars = Array.from(uniqueChars.values()).join();\n\n if (skipFontFaceCheck || window.document.fonts.check(fontString, chars)) {\n // we either skip the check (have at least one font face loaded) or do the check and find out all the font faces have loaded\n for (const [element, container] of elementContainerMapping) {\n // trigger synchronous redraw\n (0,_element__WEBPACK_IMPORTED_MODULE_10__.redrawTextBoundingBox)(element, container, app.scene.getNonDeletedElementsMap(), false);\n }\n } else {\n // otherwise try to load all font faces for the given chars and redraw elements once our font faces loaded\n window.document.fonts.load(fontString, chars).then(fontFaces => {\n for (const [element, container] of elementContainerMapping) {\n // use latest element state to ensure we don't have closure over an old instance in order to avoid possible race conditions (i.e. font faces load out-of-order while rapidly switching fonts)\n const latestElement = app.scene.getElement(element.id);\n const latestContainer = container ? app.scene.getElement(container.id) : null;\n\n if (latestElement) {\n // trigger async redraw\n (0,_element__WEBPACK_IMPORTED_MODULE_10__.redrawTextBoundingBox)(latestElement, latestContainer, app.scene.getNonDeletedElementsMap(), false);\n }\n } // trigger update once we've mutated all the elements, which also updates our cache\n\n\n app.fonts.onLoaded(fontFaces);\n });\n }\n }\n\n return result;\n },\n PanelComponent: ({\n elements,\n appState,\n app,\n updateData\n }) => {\n const cachedElementsRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(new Map());\n const prevSelectedFontFamilyRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null); // relying on state batching as multiple `FontPicker` handlers could be called in rapid succession and we want to combine them\n\n const [batchedData, setBatchedData] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)({});\n const isUnmounted = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(true);\n const selectedFontFamily = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => {\n var _a, _b;\n\n const getFontFamily = (elementsArray, elementsMap) => getFormValue(elementsArray, appState, element => {\n if ((0,_element__WEBPACK_IMPORTED_MODULE_10__.isTextElement)(element)) {\n return element.fontFamily;\n }\n\n const boundTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_12__.getBoundTextElement)(element, elementsMap);\n\n if (boundTextElement) {\n return boundTextElement.fontFamily;\n }\n\n return null;\n }, element => (0,_element__WEBPACK_IMPORTED_MODULE_10__.isTextElement)(element) || (0,_element_textElement__WEBPACK_IMPORTED_MODULE_12__.getBoundTextElement)(element, elementsMap) !== null, hasSelection => hasSelection ? null : appState.currentItemFontFamily || _constants__WEBPACK_IMPORTED_MODULE_9__.DEFAULT_FONT_FAMILY); // popup opened, use cached elements\n\n\n if (batchedData.openPopup === \"fontFamily\" && appState.openPopup === \"fontFamily\") {\n return getFontFamily(Array.from((_b = (_a = cachedElementsRef.current) === null || _a === void 0 ? void 0 : _a.values()) !== null && _b !== void 0 ? _b : []), cachedElementsRef.current);\n } // popup closed, use all elements\n\n\n if (!batchedData.openPopup && appState.openPopup !== \"fontFamily\") {\n return getFontFamily(elements, app.scene.getNonDeletedElementsMap());\n } // popup props are not in sync, hence we are in the middle of an update, so keeping the previous value we've had\n\n\n return prevSelectedFontFamilyRef.current;\n }, [batchedData.openPopup, appState, elements, app.scene]);\n (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n prevSelectedFontFamilyRef.current = selectedFontFamily;\n }, [selectedFontFamily]);\n (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n if (Object.keys(batchedData).length) {\n updateData(batchedData); // reset the data after we've used the data\n\n setBatchedData({});\n } // call update only on internal state changes\n // eslint-disable-next-line react-hooks/exhaustive-deps\n\n }, [batchedData]);\n (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n isUnmounted.current = false;\n return () => {\n isUnmounted.current = true;\n };\n }, []);\n return (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_14__.t)(\"labels.fontFamily\")\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_FontPicker_FontPicker__WEBPACK_IMPORTED_MODULE_7__.FontPicker, {\n isOpened: appState.openPopup === \"fontFamily\",\n selectedFontFamily: selectedFontFamily,\n hoveredFontFamily: appState.currentHoveredFontFamily,\n onSelect: fontFamily => {\n setBatchedData({\n openPopup: null,\n currentHoveredFontFamily: null,\n currentItemFontFamily: fontFamily\n }); // defensive clear so immediate close won't abuse the cached elements\n\n cachedElementsRef.current.clear();\n },\n onHover: fontFamily => {\n setBatchedData({\n currentHoveredFontFamily: fontFamily,\n cachedElements: new Map(cachedElementsRef.current),\n resetContainers: true\n });\n },\n onLeave: () => {\n setBatchedData({\n currentHoveredFontFamily: null,\n cachedElements: new Map(cachedElementsRef.current),\n resetAll: true\n });\n },\n onPopupChange: open => {\n if (open) {\n // open, populate the cache from scratch\n cachedElementsRef.current.clear();\n const {\n editingTextElement\n } = appState; // still check type to be safe\n\n if ((editingTextElement === null || editingTextElement === void 0 ? void 0 : editingTextElement.type) === \"text\") {\n // retrieve the latest version from the scene, as `editingTextElement` isn't mutated\n const latesteditingTextElement = app.scene.getElement(editingTextElement.id); // inside the wysiwyg editor\n\n cachedElementsRef.current.set(editingTextElement.id, (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(latesteditingTextElement || editingTextElement, {}, true));\n } else {\n const selectedElements = (0,_scene__WEBPACK_IMPORTED_MODULE_17__.getSelectedElements)(elements, appState, {\n includeBoundTextElement: true\n });\n\n for (const element of selectedElements) {\n cachedElementsRef.current.set(element.id, (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(element, {}, true));\n }\n }\n\n setBatchedData({\n openPopup: \"fontFamily\"\n });\n } else {\n // close, use the cache and clear it afterwards\n const data = {\n openPopup: null,\n currentHoveredFontFamily: null,\n cachedElements: new Map(cachedElementsRef.current),\n resetAll: true\n };\n\n if (isUnmounted.current) {\n // in case the component was unmounted by the parent, trigger the update directly\n updateData(Object.assign(Object.assign({}, batchedData), data));\n } else {\n setBatchedData(data);\n }\n\n cachedElementsRef.current.clear();\n }\n }\n })]\n });\n }\n});\nconst actionChangeTextAlign = (0,_register__WEBPACK_IMPORTED_MODULE_20__.register)({\n name: \"changeTextAlign\",\n label: \"Change text alignment\",\n trackEvent: false,\n perform: (elements, appState, value, app) => {\n return {\n elements: changeProperty(elements, appState, oldElement => {\n if ((0,_element__WEBPACK_IMPORTED_MODULE_10__.isTextElement)(oldElement)) {\n const newElement = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(oldElement, {\n textAlign: value\n });\n (0,_element__WEBPACK_IMPORTED_MODULE_10__.redrawTextBoundingBox)(newElement, app.scene.getContainerElement(oldElement), app.scene.getNonDeletedElementsMap());\n return newElement;\n }\n\n return oldElement;\n }, true),\n appState: Object.assign(Object.assign({}, appState), {\n currentItemTextAlign: value\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.CAPTURE\n };\n },\n PanelComponent: ({\n elements,\n appState,\n updateData,\n app\n }) => {\n const elementsMap = app.scene.getNonDeletedElementsMap();\n return (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_14__.t)(\"labels.textAlign\")\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ButtonIconSelect__WEBPACK_IMPORTED_MODULE_4__.ButtonIconSelect, {\n group: \"text-align\",\n options: [{\n value: \"left\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.left\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.TextAlignLeftIcon,\n testId: \"align-left\"\n }, {\n value: \"center\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.center\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.TextAlignCenterIcon,\n testId: \"align-horizontal-center\"\n }, {\n value: \"right\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.right\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.TextAlignRightIcon,\n testId: \"align-right\"\n }],\n value: getFormValue(elements, appState, element => {\n if ((0,_element__WEBPACK_IMPORTED_MODULE_10__.isTextElement)(element)) {\n return element.textAlign;\n }\n\n const boundTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_12__.getBoundTextElement)(element, elementsMap);\n\n if (boundTextElement) {\n return boundTextElement.textAlign;\n }\n\n return null;\n }, element => (0,_element__WEBPACK_IMPORTED_MODULE_10__.isTextElement)(element) || (0,_element_textElement__WEBPACK_IMPORTED_MODULE_12__.getBoundTextElement)(element, elementsMap) !== null, hasSelection => hasSelection ? null : appState.currentItemTextAlign),\n onChange: value => updateData(value)\n })]\n });\n }\n});\nconst actionChangeVerticalAlign = (0,_register__WEBPACK_IMPORTED_MODULE_20__.register)({\n name: \"changeVerticalAlign\",\n label: \"Change vertical alignment\",\n trackEvent: {\n category: \"element\"\n },\n perform: (elements, appState, value, app) => {\n return {\n elements: changeProperty(elements, appState, oldElement => {\n if ((0,_element__WEBPACK_IMPORTED_MODULE_10__.isTextElement)(oldElement)) {\n const newElement = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(oldElement, {\n verticalAlign: value\n });\n (0,_element__WEBPACK_IMPORTED_MODULE_10__.redrawTextBoundingBox)(newElement, app.scene.getContainerElement(oldElement), app.scene.getNonDeletedElementsMap());\n return newElement;\n }\n\n return oldElement;\n }, true),\n appState: Object.assign({}, appState),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.CAPTURE\n };\n },\n PanelComponent: ({\n elements,\n appState,\n updateData,\n app\n }) => {\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"fieldset\", {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ButtonIconSelect__WEBPACK_IMPORTED_MODULE_4__.ButtonIconSelect, {\n group: \"text-align\",\n options: [{\n value: _constants__WEBPACK_IMPORTED_MODULE_9__.VERTICAL_ALIGN.TOP,\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.alignTop\"),\n icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_icons__WEBPACK_IMPORTED_MODULE_8__.TextAlignTopIcon, {\n theme: appState.theme\n }),\n testId: \"align-top\"\n }, {\n value: _constants__WEBPACK_IMPORTED_MODULE_9__.VERTICAL_ALIGN.MIDDLE,\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.centerVertically\"),\n icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_icons__WEBPACK_IMPORTED_MODULE_8__.TextAlignMiddleIcon, {\n theme: appState.theme\n }),\n testId: \"align-middle\"\n }, {\n value: _constants__WEBPACK_IMPORTED_MODULE_9__.VERTICAL_ALIGN.BOTTOM,\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.alignBottom\"),\n icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_icons__WEBPACK_IMPORTED_MODULE_8__.TextAlignBottomIcon, {\n theme: appState.theme\n }),\n testId: \"align-bottom\"\n }],\n value: getFormValue(elements, appState, element => {\n if ((0,_element__WEBPACK_IMPORTED_MODULE_10__.isTextElement)(element) && element.containerId) {\n return element.verticalAlign;\n }\n\n const boundTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_12__.getBoundTextElement)(element, app.scene.getNonDeletedElementsMap());\n\n if (boundTextElement) {\n return boundTextElement.verticalAlign;\n }\n\n return null;\n }, element => (0,_element__WEBPACK_IMPORTED_MODULE_10__.isTextElement)(element) || (0,_element_textElement__WEBPACK_IMPORTED_MODULE_12__.getBoundTextElement)(element, app.scene.getNonDeletedElementsMap()) !== null, hasSelection => hasSelection ? null : _constants__WEBPACK_IMPORTED_MODULE_9__.VERTICAL_ALIGN.MIDDLE),\n onChange: value => updateData(value)\n })\n });\n }\n});\nconst actionChangeRoundness = (0,_register__WEBPACK_IMPORTED_MODULE_20__.register)({\n name: \"changeRoundness\",\n label: \"Change edge roundness\",\n trackEvent: false,\n perform: (elements, appState, value) => {\n return {\n elements: changeProperty(elements, appState, el => {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_13__.isElbowArrow)(el)) {\n return el;\n }\n\n return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(el, {\n roundness: value === \"round\" ? {\n type: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_13__.isUsingAdaptiveRadius)(el.type) ? _constants__WEBPACK_IMPORTED_MODULE_9__.ROUNDNESS.ADAPTIVE_RADIUS : _constants__WEBPACK_IMPORTED_MODULE_9__.ROUNDNESS.PROPORTIONAL_RADIUS\n } : null\n });\n }),\n appState: Object.assign(Object.assign({}, appState), {\n currentItemRoundness: value\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.CAPTURE\n };\n },\n PanelComponent: ({\n elements,\n appState,\n updateData\n }) => {\n const targetElements = (0,_scene__WEBPACK_IMPORTED_MODULE_17__.getTargetElements)((0,_element__WEBPACK_IMPORTED_MODULE_10__.getNonDeletedElements)(elements), appState);\n const hasLegacyRoundness = targetElements.some(el => {\n var _a;\n\n return ((_a = el.roundness) === null || _a === void 0 ? void 0 : _a.type) === _constants__WEBPACK_IMPORTED_MODULE_9__.ROUNDNESS.LEGACY;\n });\n return (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_14__.t)(\"labels.edges\")\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ButtonIconSelect__WEBPACK_IMPORTED_MODULE_4__.ButtonIconSelect, {\n group: \"edges\",\n options: [{\n value: \"sharp\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.sharp\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.EdgeSharpIcon\n }, {\n value: \"round\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.round\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.EdgeRoundIcon\n }],\n value: getFormValue(elements, appState, element => hasLegacyRoundness ? null : element.roundness ? \"round\" : \"sharp\", element => !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_13__.isArrowElement)(element) && element.hasOwnProperty(\"roundness\"), hasSelection => hasSelection ? null : appState.currentItemRoundness),\n onChange: value => updateData(value)\n })]\n });\n }\n});\n\nconst getArrowheadOptions = flip => {\n return [{\n value: null,\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.arrowhead_none\"),\n keyBinding: \"q\",\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.ArrowheadNoneIcon\n }, {\n value: \"arrow\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.arrowhead_arrow\"),\n keyBinding: \"w\",\n icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_icons__WEBPACK_IMPORTED_MODULE_8__.ArrowheadArrowIcon, {\n flip: flip\n })\n }, {\n value: \"bar\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.arrowhead_bar\"),\n keyBinding: \"e\",\n icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_icons__WEBPACK_IMPORTED_MODULE_8__.ArrowheadBarIcon, {\n flip: flip\n })\n }, {\n value: \"dot\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.arrowhead_dot\"),\n keyBinding: \"a\",\n icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_icons__WEBPACK_IMPORTED_MODULE_8__.ArrowheadCircleIcon, {\n flip: flip\n }),\n showInPicker: true //zsviczian\n\n }, {\n value: \"circle\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.arrowhead_circle\"),\n keyBinding: \"s\",\n icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_icons__WEBPACK_IMPORTED_MODULE_8__.ArrowheadCircleIcon, {\n flip: flip\n }),\n showInPicker: true //zsviczian\n\n }, {\n value: \"circle_outline\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.arrowhead_circle_outline\"),\n keyBinding: \"d\",\n icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_icons__WEBPACK_IMPORTED_MODULE_8__.ArrowheadCircleOutlineIcon, {\n flip: flip\n }),\n showInPicker: true //zsviczian\n\n }, {\n value: \"triangle\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.arrowhead_triangle\"),\n icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_icons__WEBPACK_IMPORTED_MODULE_8__.ArrowheadTriangleIcon, {\n flip: flip\n }),\n keyBinding: \"z\" //zsviczian was t\n\n }, {\n value: \"triangle_outline\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.arrowhead_triangle_outline\"),\n icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_icons__WEBPACK_IMPORTED_MODULE_8__.ArrowheadTriangleOutlineIcon, {\n flip: flip\n }),\n keyBinding: \"x\",\n showInPicker: true //zsviczian\n\n }, {\n value: \"diamond\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.arrowhead_diamond\"),\n icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_icons__WEBPACK_IMPORTED_MODULE_8__.ArrowheadDiamondIcon, {\n flip: flip\n }),\n keyBinding: \"c\",\n showInPicker: true //zsviczian\n\n }, {\n value: \"diamond_outline\",\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.arrowhead_diamond_outline\"),\n icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_icons__WEBPACK_IMPORTED_MODULE_8__.ArrowheadDiamondOutlineIcon, {\n flip: flip\n }),\n keyBinding: \"v\",\n showInPicker: true //zsviczian\n\n }];\n};\n\nconst actionChangeArrowhead = (0,_register__WEBPACK_IMPORTED_MODULE_20__.register)({\n name: \"changeArrowhead\",\n label: \"Change arrowheads\",\n trackEvent: false,\n perform: (elements, appState, value) => {\n return {\n elements: changeProperty(elements, appState, el => {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_13__.isLinearElement)(el)) {\n const {\n position,\n type\n } = value;\n\n if (position === \"start\") {\n const element = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(el, {\n startArrowhead: type\n });\n return element;\n } else if (position === \"end\") {\n const element = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(el, {\n endArrowhead: type\n });\n return element;\n }\n }\n\n return el;\n }),\n appState: Object.assign(Object.assign({}, appState), {\n [value.position === \"start\" ? \"currentItemStartArrowhead\" : \"currentItemEndArrowhead\"]: value.type\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.CAPTURE\n };\n },\n PanelComponent: ({\n elements,\n appState,\n updateData\n }) => {\n const isRTL = (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.getLanguage)().rtl;\n return (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_14__.t)(\"labels.arrowheads\")\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n className: \"iconSelectList buttonList\"\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_IconPicker__WEBPACK_IMPORTED_MODULE_6__.IconPicker, {\n label: \"arrowhead_start\",\n options: getArrowheadOptions(!isRTL),\n value: getFormValue(elements, appState, element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_13__.isLinearElement)(element) && (0,_scene__WEBPACK_IMPORTED_MODULE_17__.canHaveArrowheads)(element.type) ? element.startArrowhead : appState.currentItemStartArrowhead, true, appState.currentItemStartArrowhead),\n onChange: value => updateData({\n position: \"start\",\n type: value\n })\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_IconPicker__WEBPACK_IMPORTED_MODULE_6__.IconPicker, {\n label: \"arrowhead_end\",\n group: \"arrowheads\",\n options: getArrowheadOptions(!!isRTL),\n value: getFormValue(elements, appState, element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_13__.isLinearElement)(element) && (0,_scene__WEBPACK_IMPORTED_MODULE_17__.canHaveArrowheads)(element.type) ? element.endArrowhead : appState.currentItemEndArrowhead, true, appState.currentItemEndArrowhead),\n onChange: value => updateData({\n position: \"end\",\n type: value\n })\n })]\n }))]\n });\n }\n});\nconst actionChangeArrowType = (0,_register__WEBPACK_IMPORTED_MODULE_20__.register)({\n name: \"changeArrowType\",\n label: \"Change arrow types\",\n trackEvent: false,\n perform: (elements, appState, value, app) => {\n return {\n elements: changeProperty(elements, appState, el => {\n if (!(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_13__.isArrowElement)(el)) {\n return el;\n }\n\n const newElement = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_11__.newElementWith)(el, {\n roundness: value === _constants__WEBPACK_IMPORTED_MODULE_9__.ARROW_TYPE.round ? {\n type: _constants__WEBPACK_IMPORTED_MODULE_9__.ROUNDNESS.PROPORTIONAL_RADIUS\n } : null,\n elbowed: value === _constants__WEBPACK_IMPORTED_MODULE_9__.ARROW_TYPE.elbow,\n points: value === _constants__WEBPACK_IMPORTED_MODULE_9__.ARROW_TYPE.elbow || el.elbowed ? [el.points[0], el.points[el.points.length - 1]] : el.points\n });\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_13__.isElbowArrow)(newElement)) {\n const elementsMap = app.scene.getNonDeletedElementsMap();\n app.dismissLinearEditor();\n const startGlobalPoint = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_25__.LinearElementEditor.getPointAtIndexGlobalCoordinates(newElement, 0, elementsMap);\n const endGlobalPoint = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_25__.LinearElementEditor.getPointAtIndexGlobalCoordinates(newElement, -1, elementsMap);\n const startHoveredElement = !newElement.startBinding && (0,_element_binding__WEBPACK_IMPORTED_MODULE_23__.getHoveredElementForBinding)((0,_utils__WEBPACK_IMPORTED_MODULE_19__.tupleToCoors)(startGlobalPoint), elements, elementsMap, true);\n const endHoveredElement = !newElement.endBinding && (0,_element_binding__WEBPACK_IMPORTED_MODULE_23__.getHoveredElementForBinding)((0,_utils__WEBPACK_IMPORTED_MODULE_19__.tupleToCoors)(endGlobalPoint), elements, elementsMap, true);\n const startElement = startHoveredElement ? startHoveredElement : newElement.startBinding && elementsMap.get(newElement.startBinding.elementId);\n const endElement = endHoveredElement ? endHoveredElement : newElement.endBinding && elementsMap.get(newElement.endBinding.elementId);\n const finalStartPoint = startHoveredElement ? (0,_element_binding__WEBPACK_IMPORTED_MODULE_23__.bindPointToSnapToElementOutline)(startGlobalPoint, endGlobalPoint, startHoveredElement, elementsMap) : startGlobalPoint;\n const finalEndPoint = endHoveredElement ? (0,_element_binding__WEBPACK_IMPORTED_MODULE_23__.bindPointToSnapToElementOutline)(endGlobalPoint, startGlobalPoint, endHoveredElement, elementsMap) : endGlobalPoint;\n startHoveredElement && (0,_element_binding__WEBPACK_IMPORTED_MODULE_23__.bindLinearElement)(newElement, startHoveredElement, \"start\", elementsMap);\n endHoveredElement && (0,_element_binding__WEBPACK_IMPORTED_MODULE_23__.bindLinearElement)(newElement, endHoveredElement, \"end\", elementsMap);\n (0,_element_routing__WEBPACK_IMPORTED_MODULE_24__.mutateElbowArrow)(newElement, elementsMap, [finalStartPoint, finalEndPoint].map(p => (0,_math__WEBPACK_IMPORTED_MODULE_26__.point)(p[0] - newElement.x, p[1] - newElement.y)), (0,_math__WEBPACK_IMPORTED_MODULE_26__.vector)(0, 0), Object.assign(Object.assign({}, startElement && newElement.startBinding ? {\n startBinding: Object.assign(Object.assign({}, newElement.startBinding), (0,_element_binding__WEBPACK_IMPORTED_MODULE_23__.calculateFixedPointForElbowArrowBinding)(newElement, startElement, \"start\", elementsMap))\n } : {}), endElement && newElement.endBinding ? {\n endBinding: Object.assign(Object.assign({}, newElement.endBinding), (0,_element_binding__WEBPACK_IMPORTED_MODULE_23__.calculateFixedPointForElbowArrowBinding)(newElement, endElement, \"end\", elementsMap))\n } : {}));\n }\n\n return newElement;\n }),\n appState: Object.assign(Object.assign({}, appState), {\n currentItemArrowType: value\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_21__.StoreAction.CAPTURE\n };\n },\n PanelComponent: ({\n elements,\n appState,\n updateData\n }) => {\n return (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_14__.t)(\"labels.arrowtypes\")\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ButtonIconSelect__WEBPACK_IMPORTED_MODULE_4__.ButtonIconSelect, {\n group: \"arrowtypes\",\n options: [{\n value: _constants__WEBPACK_IMPORTED_MODULE_9__.ARROW_TYPE.sharp,\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.arrowtype_sharp\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.sharpArrowIcon,\n testId: \"sharp-arrow\"\n }, {\n value: _constants__WEBPACK_IMPORTED_MODULE_9__.ARROW_TYPE.round,\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.arrowtype_round\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.roundArrowIcon,\n testId: \"round-arrow\"\n }, {\n value: _constants__WEBPACK_IMPORTED_MODULE_9__.ARROW_TYPE.elbow,\n text: (0,_i18n__WEBPACK_IMPORTED_MODULE_14__.t)(\"labels.arrowtype_elbowed\"),\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_8__.elbowArrowIcon,\n testId: \"elbow-arrow\"\n }],\n value: getFormValue(elements, appState, element => {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_13__.isArrowElement)(element)) {\n return element.elbowed ? _constants__WEBPACK_IMPORTED_MODULE_9__.ARROW_TYPE.elbow : element.roundness ? _constants__WEBPACK_IMPORTED_MODULE_9__.ARROW_TYPE.round : _constants__WEBPACK_IMPORTED_MODULE_9__.ARROW_TYPE.sharp;\n }\n\n return null;\n }, element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_13__.isArrowElement)(element), hasSelection => hasSelection ? null : appState.currentItemArrowType),\n onChange: value => updateData(value)\n })]\n });\n }\n});\n\n//# sourceURL=webpack://ExcalidrawLib/./actions/actionProperties.tsx?");
|
|
599
599
|
|
|
600
600
|
/***/ }),
|
|
601
601
|
|
|
@@ -771,7 +771,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
771
771
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
772
772
|
|
|
773
773
|
"use strict";
|
|
774
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"trackEvent\": () => (/* binding */ trackEvent)\n/* harmony export */ });\n// place here categories that you want to track. We want to track just a\n// small subset of categories at a given time.\nconst ALLOWED_CATEGORIES_TO_TRACK = new Set([\"command_palette\", \"export\"]);\nconst trackEvent = (category, action, label, value) => {\n try {\n if (typeof window === \"undefined\" || ({\"VITE_APP_BACKEND_V2_GET_URL\":\"https://json-dev.excalidraw.com/api/v2/\",\"VITE_APP_BACKEND_V2_POST_URL\":\"https://json-dev.excalidraw.com/api/v2/post/\",\"VITE_APP_LIBRARY_URL\":\"https://libraries.excalidraw.com\",\"VITE_APP_LIBRARY_BACKEND\":\"https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries\",\"VITE_APP_WS_SERVER_URL\":\"http://localhost:3002\",\"VITE_APP_PLUS_LP\":\"https://plus.excalidraw.com\",\"VITE_APP_PLUS_APP\":\"https://app.excalidraw.com\",\"VITE_APP_AI_BACKEND\":\"http://localhost:3015\",\"VITE_APP_FIREBASE_CONFIG\":\"{\\\"apiKey\\\":\\\"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8\\\",\\\"authDomain\\\":\\\"excalidraw-oss-dev.firebaseapp.com\\\",\\\"projectId\\\":\\\"excalidraw-oss-dev\\\",\\\"storageBucket\\\":\\\"excalidraw-oss-dev.appspot.com\\\",\\\"messagingSenderId\\\":\\\"664559512677\\\",\\\"appId\\\":\\\"1:664559512677:web:a385181f2928d328a7aa8c\\\"}\",\"VITE_APP_DEV_DISABLE_LIVE_RELOAD\":\"\",\"VITE_APP_ENABLE_TRACKING\":\"true\",\"FAST_REFRESH\":\"false\",\"VITE_APP_PORT\":\"3000\",\"VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX\":\"\",\"VITE_APP_COLLAPSE_OVERLAY\":\"true\",\"VITE_APP_ENABLE_ESLINT\":\"true\",\"VITE_PKG_NAME\":\"@zsviczian/excalidraw\",\"VITE_PKG_VERSION\":\"0.17.1-obsidian-
|
|
774
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"trackEvent\": () => (/* binding */ trackEvent)\n/* harmony export */ });\n// place here categories that you want to track. We want to track just a\n// small subset of categories at a given time.\nconst ALLOWED_CATEGORIES_TO_TRACK = new Set([\"command_palette\", \"export\"]);\nconst trackEvent = (category, action, label, value) => {\n try {\n if (typeof window === \"undefined\" || ({\"VITE_APP_BACKEND_V2_GET_URL\":\"https://json-dev.excalidraw.com/api/v2/\",\"VITE_APP_BACKEND_V2_POST_URL\":\"https://json-dev.excalidraw.com/api/v2/post/\",\"VITE_APP_LIBRARY_URL\":\"https://libraries.excalidraw.com\",\"VITE_APP_LIBRARY_BACKEND\":\"https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries\",\"VITE_APP_WS_SERVER_URL\":\"http://localhost:3002\",\"VITE_APP_PLUS_LP\":\"https://plus.excalidraw.com\",\"VITE_APP_PLUS_APP\":\"https://app.excalidraw.com\",\"VITE_APP_AI_BACKEND\":\"http://localhost:3015\",\"VITE_APP_FIREBASE_CONFIG\":\"{\\\"apiKey\\\":\\\"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8\\\",\\\"authDomain\\\":\\\"excalidraw-oss-dev.firebaseapp.com\\\",\\\"projectId\\\":\\\"excalidraw-oss-dev\\\",\\\"storageBucket\\\":\\\"excalidraw-oss-dev.appspot.com\\\",\\\"messagingSenderId\\\":\\\"664559512677\\\",\\\"appId\\\":\\\"1:664559512677:web:a385181f2928d328a7aa8c\\\"}\",\"VITE_APP_DEV_DISABLE_LIVE_RELOAD\":\"\",\"VITE_APP_ENABLE_TRACKING\":\"true\",\"FAST_REFRESH\":\"false\",\"VITE_APP_PORT\":\"3000\",\"VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX\":\"\",\"VITE_APP_COLLAPSE_OVERLAY\":\"true\",\"VITE_APP_ENABLE_ESLINT\":\"true\",\"VITE_PKG_NAME\":\"@zsviczian/excalidraw\",\"VITE_PKG_VERSION\":\"0.17.1-obsidian-54\",\"VITE_IS_EXCALIDRAW_NPM_PACKAGE\":true}).VITE_WORKER_ID || \"true\" !== \"true\") {\n return;\n }\n\n if (!ALLOWED_CATEGORIES_TO_TRACK.has(category)) {\n return;\n }\n\n if (true) {\n // comment out to debug in dev\n return;\n }\n\n if (true) {\n console.info(\"trackEvent\", {\n category,\n action,\n label,\n value\n });\n }\n\n if (window.sa_event) {\n window.sa_event(action, {\n category,\n label,\n value\n });\n }\n } catch (error) {\n console.error(\"error during analytics\", error);\n }\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./analytics.ts?");
|
|
775
775
|
|
|
776
776
|
/***/ }),
|
|
777
777
|
|
|
@@ -903,7 +903,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
903
903
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
904
904
|
|
|
905
905
|
"use strict";
|
|
906
|
-
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 */ \"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_99__ = __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 _scene__WEBPACK_IMPORTED_MODULE_28__ = __webpack_require__(/*! ../scene */ \"./scene/index.ts\");\n/* harmony import */ var _scene_Scene__WEBPACK_IMPORTED_MODULE_29__ = __webpack_require__(/*! ../scene/Scene */ \"./scene/Scene.ts\");\n/* harmony import */ var _scene_zoom__WEBPACK_IMPORTED_MODULE_30__ = __webpack_require__(/*! ../scene/zoom */ \"./scene/zoom.ts\");\n/* harmony import */ var _shapes__WEBPACK_IMPORTED_MODULE_31__ = __webpack_require__(/*! ../shapes */ \"./shapes.tsx\");\n/* harmony import */ var _utils_geometry_shape__WEBPACK_IMPORTED_MODULE_32__ = __webpack_require__(/*! ../../utils/geometry/shape */ \"../utils/geometry/shape.ts\");\n/* harmony import */ var _utils_collision__WEBPACK_IMPORTED_MODULE_33__ = __webpack_require__(/*! ../../utils/collision */ \"../utils/collision.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_34__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _element_embeddable__WEBPACK_IMPORTED_MODULE_35__ = __webpack_require__(/*! ../element/embeddable */ \"./element/embeddable.ts\");\n/* harmony import */ var _ContextMenu__WEBPACK_IMPORTED_MODULE_36__ = __webpack_require__(/*! ./ContextMenu */ \"./components/ContextMenu.tsx\");\n/* harmony import */ var _LayerUI__WEBPACK_IMPORTED_MODULE_37__ = __webpack_require__(/*! ./LayerUI */ \"./components/LayerUI.tsx\");\n/* harmony import */ var _Toast__WEBPACK_IMPORTED_MODULE_38__ = __webpack_require__(/*! ./Toast */ \"./components/Toast.tsx\");\n/* harmony import */ var _actions_actionToggleViewMode__WEBPACK_IMPORTED_MODULE_39__ = __webpack_require__(/*! ../actions/actionToggleViewMode */ \"./actions/actionToggleViewMode.tsx\");\n/* harmony import */ var _data_blob__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(/*! ../data/blob */ \"./data/blob.ts\");\n/* harmony import */ var _element_image__WEBPACK_IMPORTED_MODULE_41__ = __webpack_require__(/*! ../element/image */ \"./element/image.ts\");\n/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_42__ = __webpack_require__(/*! lodash.throttle */ \"../../node_modules/lodash.throttle/index.js\");\n/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_42___default = /*#__PURE__*/__webpack_require__.n(lodash_throttle__WEBPACK_IMPORTED_MODULE_42__);\n/* harmony import */ var _data_filesystem__WEBPACK_IMPORTED_MODULE_43__ = __webpack_require__(/*! ../data/filesystem */ \"./data/filesystem.ts\");\n/* harmony import */ var _element_textElement__WEBPACK_IMPORTED_MODULE_44__ = __webpack_require__(/*! ../element/textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _components_hyperlink_Hyperlink__WEBPACK_IMPORTED_MODULE_45__ = __webpack_require__(/*! ../components/hyperlink/Hyperlink */ \"./components/hyperlink/Hyperlink.tsx\");\n/* harmony import */ var _data_url__WEBPACK_IMPORTED_MODULE_46__ = __webpack_require__(/*! ../data/url */ \"./data/url.ts\");\n/* harmony import */ var _element_transformHandles__WEBPACK_IMPORTED_MODULE_47__ = __webpack_require__(/*! ../element/transformHandles */ \"./element/transformHandles.ts\");\n/* harmony import */ var _actions_actionElementLock__WEBPACK_IMPORTED_MODULE_48__ = __webpack_require__(/*! ../actions/actionElementLock */ \"./actions/actionElementLock.ts\");\n/* harmony import */ var _fonts__WEBPACK_IMPORTED_MODULE_49__ = __webpack_require__(/*! ../fonts */ \"./fonts/index.ts\");\n/* harmony import */ var _frame__WEBPACK_IMPORTED_MODULE_50__ = __webpack_require__(/*! ../frame */ \"./frame.ts\");\n/* harmony import */ var _scene_selection__WEBPACK_IMPORTED_MODULE_51__ = __webpack_require__(/*! ../scene/selection */ \"./scene/selection.ts\");\n/* harmony import */ var _actions_actionClipboard__WEBPACK_IMPORTED_MODULE_52__ = __webpack_require__(/*! ../actions/actionClipboard */ \"./actions/actionClipboard.tsx\");\n/* harmony import */ var _actions_actionFrame__WEBPACK_IMPORTED_MODULE_53__ = __webpack_require__(/*! ../actions/actionFrame */ \"./actions/actionFrame.ts\");\n/* harmony import */ var _actions_actionCanvas__WEBPACK_IMPORTED_MODULE_54__ = __webpack_require__(/*! ../actions/actionCanvas */ \"./actions/actionCanvas.tsx\");\n/* harmony import */ var _jotai__WEBPACK_IMPORTED_MODULE_55__ = __webpack_require__(/*! ../jotai */ \"./jotai.ts\");\n/* harmony import */ var _ActiveConfirmDialog__WEBPACK_IMPORTED_MODULE_56__ = __webpack_require__(/*! ./ActiveConfirmDialog */ \"./components/ActiveConfirmDialog.tsx\");\n/* harmony import */ var _errors__WEBPACK_IMPORTED_MODULE_57__ = __webpack_require__(/*! ../errors */ \"./errors.ts\");\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 _SVGLayer__WEBPACK_IMPORTED_MODULE_67__ = __webpack_require__(/*! ./SVGLayer */ \"./components/SVGLayer.tsx\");\n/* harmony import */ var _cursor__WEBPACK_IMPORTED_MODULE_68__ = __webpack_require__(/*! ../cursor */ \"./cursor.ts\");\n/* harmony import */ var _emitter__WEBPACK_IMPORTED_MODULE_69__ = __webpack_require__(/*! ../emitter */ \"./emitter.ts\");\n/* harmony import */ var _element_ElementCanvasButtons__WEBPACK_IMPORTED_MODULE_70__ = __webpack_require__(/*! ../element/ElementCanvasButtons */ \"./element/ElementCanvasButtons.tsx\");\n/* harmony import */ var _colors__WEBPACK_IMPORTED_MODULE_71__ = __webpack_require__(/*! ../colors */ \"./colors.ts\");\n/* harmony import */ var _MagicButton__WEBPACK_IMPORTED_MODULE_72__ = __webpack_require__(/*! ./MagicButton */ \"./components/MagicButton.tsx\");\n/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_73__ = __webpack_require__(/*! ./icons */ \"./components/icons.tsx\");\n/* harmony import */ var _FollowMode_FollowMode__WEBPACK_IMPORTED_MODULE_74__ = __webpack_require__(/*! ./FollowMode/FollowMode */ \"./components/FollowMode/FollowMode.tsx\");\n/* harmony import */ var _actions_actionProperties__WEBPACK_IMPORTED_MODULE_75__ = __webpack_require__(/*! ../actions/actionProperties */ \"./actions/actionProperties.tsx\");\n/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_76__ = __webpack_require__(/*! ../store */ \"./store.ts\");\n/* harmony import */ var _animation_frame_handler__WEBPACK_IMPORTED_MODULE_77__ = __webpack_require__(/*! ../animation-frame-handler */ \"./animation-frame-handler.ts\");\n/* harmony import */ var _animated_trail__WEBPACK_IMPORTED_MODULE_78__ = __webpack_require__(/*! ../animated-trail */ \"./animated-trail.ts\");\n/* harmony import */ var _laser_trails__WEBPACK_IMPORTED_MODULE_79__ = __webpack_require__(/*! ../laser-trails */ \"./laser-trails.ts\");\n/* harmony import */ var _reactUtils__WEBPACK_IMPORTED_MODULE_80__ = __webpack_require__(/*! ../reactUtils */ \"./reactUtils.ts\");\n/* harmony import */ var _renderer_renderElement__WEBPACK_IMPORTED_MODULE_81__ = __webpack_require__(/*! ../renderer/renderElement */ \"./renderer/renderElement.ts\");\n/* harmony import */ var _obsidianUtils__WEBPACK_IMPORTED_MODULE_82__ = __webpack_require__(/*! ../obsidianUtils */ \"./obsidianUtils.ts\");\n/* harmony import */ var _element_collision__WEBPACK_IMPORTED_MODULE_83__ = __webpack_require__(/*! ../element/collision */ \"./element/collision.ts\");\n/* harmony import */ var _element_textWysiwyg__WEBPACK_IMPORTED_MODULE_84__ = __webpack_require__(/*! ../element/textWysiwyg */ \"./element/textWysiwyg.tsx\");\n/* harmony import */ var _scene_scrollbars__WEBPACK_IMPORTED_MODULE_85__ = __webpack_require__(/*! ../scene/scrollbars */ \"./scene/scrollbars.ts\");\n/* harmony import */ var _fractionalIndex__WEBPACK_IMPORTED_MODULE_86__ = __webpack_require__(/*! ../fractionalIndex */ \"./fractionalIndex.ts\");\n/* harmony import */ var _hyperlink_helpers__WEBPACK_IMPORTED_MODULE_87__ = __webpack_require__(/*! ./hyperlink/helpers */ \"./components/hyperlink/helpers.ts\");\n/* harmony import */ var _actions_shortcuts__WEBPACK_IMPORTED_MODULE_88__ = __webpack_require__(/*! ../actions/shortcuts */ \"./actions/shortcuts.ts\");\n/* harmony import */ var _element_resizeElements__WEBPACK_IMPORTED_MODULE_89__ = __webpack_require__(/*! ../element/resizeElements */ \"./element/resizeElements.ts\");\n/* harmony import */ var _actions_actionTextAutoResize__WEBPACK_IMPORTED_MODULE_90__ = __webpack_require__(/*! ../actions/actionTextAutoResize */ \"./actions/actionTextAutoResize.ts\");\n/* harmony import */ var _element_bounds__WEBPACK_IMPORTED_MODULE_91__ = __webpack_require__(/*! ../element/bounds */ \"./element/bounds.ts\");\n/* harmony import */ var _mermaid__WEBPACK_IMPORTED_MODULE_92__ = __webpack_require__(/*! ../mermaid */ \"./mermaid.ts\");\n/* harmony import */ var _Tooltip__WEBPACK_IMPORTED_MODULE_93__ = __webpack_require__(/*! ./Tooltip */ \"./components/Tooltip.tsx\");\n/* harmony import */ var _canvases_NewElementCanvas__WEBPACK_IMPORTED_MODULE_94__ = __webpack_require__(/*! ./canvases/NewElementCanvas */ \"./components/canvases/NewElementCanvas.tsx\");\n/* harmony import */ var _element_routing__WEBPACK_IMPORTED_MODULE_95__ = __webpack_require__(/*! ../element/routing */ \"./element/routing.ts\");\n/* harmony import */ var _element_flowchart__WEBPACK_IMPORTED_MODULE_96__ = __webpack_require__(/*! ../element/flowchart */ \"./element/flowchart.ts\");\n/* harmony import */ var _SearchMenu__WEBPACK_IMPORTED_MODULE_97__ = __webpack_require__(/*! ./SearchMenu */ \"./components/SearchMenu.tsx\");\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_98__ = __webpack_require__(/*! ../../math */ \"../math/index.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n //zsviczian\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);\nconst deviceContextInitialValue = {\n viewport: {\n isMobile: false,\n isLandscape: false\n },\n editor: {\n isMobile: false,\n canFitSidebar: false\n },\n isTouchScreen: false\n};\nconst DeviceContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext(deviceContextInitialValue);\nDeviceContext.displayName = \"DeviceContext\";\nconst ExcalidrawContainerContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext({\n container: null,\n id: null\n});\nExcalidrawContainerContext.displayName = \"ExcalidrawContainerContext\";\nconst ExcalidrawElementsContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext([]);\nExcalidrawElementsContext.displayName = \"ExcalidrawElementsContext\";\nconst ExcalidrawAppStateContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext(Object.assign(Object.assign({}, (0,_appState__WEBPACK_IMPORTED_MODULE_10__.getDefaultAppState)()), {\n width: 0,\n height: 0,\n offsetLeft: 0,\n offsetTop: 0\n}));\nExcalidrawAppStateContext.displayName = \"ExcalidrawAppStateContext\";\nconst ExcalidrawSetAppStateContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext(() => {\n console.warn(\"Uninitialized ExcalidrawSetAppStateContext context!\");\n});\nExcalidrawSetAppStateContext.displayName = \"ExcalidrawSetAppStateContext\";\nconst ExcalidrawActionManagerContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext(null);\nExcalidrawActionManagerContext.displayName = \"ExcalidrawActionManagerContext\";\nconst useApp = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(AppContext);\nconst useAppProps = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(AppPropsContext);\nconst useDevice = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(DeviceContext);\nconst useExcalidrawContainer = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(ExcalidrawContainerContext);\nconst useExcalidrawElements = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(ExcalidrawElementsContext);\nconst useExcalidrawAppState = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(ExcalidrawAppStateContext);\nconst useExcalidrawSetAppState = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(ExcalidrawSetAppStateContext);\nconst useExcalidrawActionManager = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(ExcalidrawActionManagerContext);\nlet didTapTwice = false;\nlet tappedTwiceTimer = 0;\nlet isHoldingSpace = false;\nlet isPanning = false;\nlet isDraggingScrollBar = false;\nlet currentScrollBars = {\n horizontal: null,\n vertical: null\n};\nlet touchTimeout = 0;\nlet invalidateContextMenu = false;\n/**\n * Map of youtube embed video states\n */\n\nconst YOUTUBE_VIDEO_STATES = new Map();\nlet IS_PLAIN_PASTE = false;\nlet IS_PLAIN_PASTE_TIMER = 0;\nlet PLAIN_PASTE_TOAST_SHOWN = false;\nlet lastPointerUp = null;\nconst gesture = {\n pointers: new Map(),\n lastCenter: null,\n initialDistance: null,\n initialScale: null\n};\n\nclass App extends (react__WEBPACK_IMPORTED_MODULE_1___default().Component) {\n constructor(props) {\n super(props);\n this.interactiveCanvas = null;\n this.unmounted = false;\n this.device = deviceContextInitialValue;\n this.excalidrawContainerRef = react__WEBPACK_IMPORTED_MODULE_1___default().createRef();\n this.files = {};\n this.imageCache = new Map();\n this.iFrameRefs = new Map();\n /**\n * Indicates whether the embeddable's url has been validated for rendering.\n * If value not set, indicates that the validation is pending.\n * Initially or on url change the flag is not reset so that we can guarantee\n * the validation came from a trusted source (the editor).\n **/\n\n this.embedsValidationStatus = new Map();\n /** embeds that have been inserted to DOM (as a perf optim, we don't want to\n * insert to DOM before user initially scrolls to them) */\n\n this.initializedEmbeds = new Set();\n this.elementsPendingErasure = new Set();\n this.flowChartCreator = new _element_flowchart__WEBPACK_IMPORTED_MODULE_96__.FlowChartCreator();\n this.flowChartNavigator = new _element_flowchart__WEBPACK_IMPORTED_MODULE_96__.FlowChartNavigator();\n this.lastPointerDownEvent = null;\n this.lastPointerUpEvent = null;\n this.lastPointerMoveEvent = null;\n this.lastViewportPosition = {\n x: 0,\n y: 0\n };\n this.allowMobileMode = true; //zsviczian\n\n this.animationFrameHandler = new _animation_frame_handler__WEBPACK_IMPORTED_MODULE_77__.AnimationFrameHandler();\n this.laserTrails = new _laser_trails__WEBPACK_IMPORTED_MODULE_79__.LaserTrails(this.animationFrameHandler, this);\n this.eraserTrail = new _animated_trail__WEBPACK_IMPORTED_MODULE_78__.AnimatedTrail(this.animationFrameHandler, this, {\n streamline: 0.2,\n size: 5,\n keepHead: true,\n sizeMapping: c => {\n const DECAY_TIME = 200;\n const DECAY_LENGTH = 10;\n const t = Math.max(0, 1 - (performance.now() - c.pressure) / DECAY_TIME);\n const l = (DECAY_LENGTH - Math.min(DECAY_LENGTH, c.totalLength - c.currentIndex)) / DECAY_LENGTH;\n return Math.min((0,_utils__WEBPACK_IMPORTED_MODULE_34__.easeOut)(l), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.easeOut)(t));\n },\n fill: () => this.state.theme === _constants__WEBPACK_IMPORTED_MODULE_12__.THEME.LIGHT ? \"rgba(0, 0, 0, 0.2)\" : \"rgba(255, 255, 255, 0.2)\"\n });\n this.onChangeEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_69__.Emitter();\n this.onPointerDownEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_69__.Emitter();\n this.onPointerUpEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_69__.Emitter();\n this.onUserFollowEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_69__.Emitter();\n this.onScrollChangeEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_69__.Emitter();\n this.missingPointerEventCleanupEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_69__.Emitter();\n this.onRemoveEventListenersEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_69__.Emitter();\n /**\n * Returns gridSize taking into account `gridModeEnabled`.\n * If disabled, returns null.\n */\n\n this.getEffectiveGridSize = () => {\n return (0,_snapping__WEBPACK_IMPORTED_MODULE_58__.isGridModeEnabled)(this) ? this.state.gridSize : null;\n };\n\n this.updateEmbedValidationStatus = (element, status) => {\n this.embedsValidationStatus.set(element.id, status);\n _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_66__.ShapeCache[\"delete\"](element);\n };\n\n this.updateEmbeddables = () => {\n const iframeLikes = new Set();\n let updated = false;\n this.scene.getNonDeletedElements().filter(element => {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(element)) {\n iframeLikes.add(element.id);\n\n if (!this.embedsValidationStatus.has(element.id)) {\n updated = true;\n const validated = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_35__.embeddableURLValidator)(element.link, this.props.validateEmbeddable);\n this.updateEmbedValidationStatus(element, validated);\n }\n } else if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(element)) {\n iframeLikes.add(element.id);\n }\n\n return false;\n });\n\n if (updated) {\n this.scene.triggerUpdate();\n } // GC\n\n\n this.iFrameRefs.forEach((ref, id) => {\n if (!iframeLikes.has(id)) {\n this.iFrameRefs.delete(id);\n }\n });\n };\n\n this.getFrameNameDOMId = frameElement => {\n return `${this.id}-frame-name-${frameElement.id}`;\n };\n\n this.frameNameBoundsCache = {\n get: frameElement => {\n let bounds = this.frameNameBoundsCache._cache.get(frameElement.id);\n\n if (!bounds || bounds.zoom !== this.state.zoom.value || bounds.versionNonce !== frameElement.versionNonce) {\n const frameNameDiv = document.getElementById(this.getFrameNameDOMId(frameElement));\n\n if (frameNameDiv) {\n const box = frameNameDiv.getBoundingClientRect();\n const boxSceneTopLeft = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.viewportCoordsToSceneCoords)({\n clientX: box.x,\n clientY: box.y\n }, this.state);\n const boxSceneBottomRight = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.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 /**\n * @private\n */\n _cache: new Map()\n };\n\n this.renderFrameNames = () => {\n if (!this.state.frameRendering.enabled || !this.state.frameRendering.name) {\n return null;\n }\n\n const isDarkTheme = this.state.theme === _constants__WEBPACK_IMPORTED_MODULE_12__.THEME.DARK;\n return this.scene.getNonDeletedFramesLikes().map(f => {\n var _a, _b;\n\n if (!(0,_element_sizeHelpers__WEBPACK_IMPORTED_MODULE_27__.isElementInViewport)(f, this.canvas.width / window.devicePixelRatio, this.canvas.height / window.devicePixelRatio, {\n offsetLeft: this.state.offsetLeft,\n offsetTop: this.state.offsetTop,\n scrollX: this.state.scrollX,\n scrollY: this.state.scrollY,\n zoom: this.state.zoom\n }, this.scene.getNonDeletedElementsMap())) {\n // if frame not visible, don't render its name\n return null;\n }\n\n const {\n x: x1,\n y: y1\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.sceneCoordsToViewportCoords)({\n sceneX: f.x,\n sceneY: f.y\n }, this.state);\n const FRAME_NAME_EDIT_PADDING = 6;\n\n const reset = () => {\n var _a;\n\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(f, {\n name: ((_a = f.name) === null || _a === void 0 ? void 0 : _a.trim()) || null\n });\n this.setState({\n editingFrame: null\n });\n };\n\n let frameNameJSX;\n const frameName = (0,_frame__WEBPACK_IMPORTED_MODULE_50__.getFrameLikeTitle)(f);\n\n if (f.id === this.state.editingFrame) {\n const frameNameInEdit = frameName;\n frameNameJSX = (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"input\", {\n autoFocus: true,\n value: frameNameInEdit,\n onChange: e => {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(f, {\n name: e.target.value\n });\n },\n onFocus: e => e.target.select(),\n onBlur: () => reset(),\n onKeyDown: event => {\n // for some inexplicable reason, `onBlur` triggered on ESC\n // does not reset `state.editingFrame` despite being called,\n // and we need to reset it here as well\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ESCAPE || event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ENTER) {\n reset();\n }\n },\n style: {\n background: this.state.viewBackgroundColor,\n filter: isDarkTheme ? _constants__WEBPACK_IMPORTED_MODULE_12__.THEME_FILTER : \"none\",\n zIndex: 2,\n border: \"none\",\n display: \"block\",\n padding: `${FRAME_NAME_EDIT_PADDING}px`,\n borderRadius: 4,\n boxShadow: \"inset 0 0 0 2px var(--color-on-primary-container)\",\n fontFamily: \"Assistant\",\n fontSize: \"14px\",\n transform: `translate(-${FRAME_NAME_EDIT_PADDING}px, ${FRAME_NAME_EDIT_PADDING}px)`,\n color: \"var(--color-gray-80)\",\n overflow: \"hidden\",\n maxWidth: `${(0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_82__.getExcalidrawContentEl)().clientWidth - x1 - FRAME_NAME_EDIT_PADDING //zsviczian was document.body\n }px`\n },\n size: frameNameInEdit.length + 1 || 1,\n dir: \"auto\",\n autoComplete: \"off\",\n autoCapitalize: \"off\",\n autoCorrect: \"off\"\n });\n } else {\n frameNameJSX = frameName;\n }\n\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n id: this.getFrameNameDOMId(f),\n style: {\n position: \"absolute\",\n // Positioning from bottom so that we don't to either\n // calculate text height or adjust using transform (which)\n // messes up input position when editing the frame name.\n // This makes the positioning deterministic and we can calculate\n // the same position when rendering to canvas / svg.\n bottom: `${this.state.height + _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.nameOffsetY - y1 + this.state.offsetTop}px`,\n left: `${x1 - this.state.offsetLeft}px`,\n zIndex: 2,\n fontSize: _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.nameFontSize,\n color: (_b = (_a = this.state.frameColor) === null || _a === void 0 ? void 0 : _a.nameColor) !== null && _b !== void 0 ? _b : isDarkTheme //zsviczian\n ? _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.nameColorDarkTheme : _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.nameColorLightTheme,\n lineHeight: _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.nameLineHeight,\n width: \"max-content\",\n maxWidth: `${f.width}px`,\n overflow: f.id === this.state.editingFrame ? \"visible\" : \"hidden\",\n whiteSpace: \"nowrap\",\n textOverflow: \"ellipsis\",\n cursor: _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.MOVE,\n pointerEvents: this.state.viewModeEnabled ? _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.disabled : _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.enabled\n },\n onPointerDown: event => this.handleCanvasPointerDown(event),\n onWheel: event => this.handleWheel(event),\n onContextMenu: this.handleCanvasContextMenu,\n onDoubleClick: () => {\n this.setState({\n editingFrame: f.id\n });\n }\n }, {\n children: frameNameJSX\n }), f.id);\n });\n };\n\n this.focusContainer = () => {\n var _a;\n\n (_a = this.excalidrawContainerRef.current) === null || _a === void 0 ? void 0 : _a.focus();\n };\n\n this.getSceneElementsIncludingDeleted = () => {\n return this.scene.getElementsIncludingDeleted();\n };\n\n this.getSceneElements = () => {\n return this.scene.getNonDeletedElements();\n };\n\n this.onInsertElements = elements => {\n this.addElementsFromPasteOrLibrary({\n elements,\n position: \"center\",\n files: null\n });\n };\n\n this.onExportImage = async (type, elements, opts) => {\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"export\", type, \"ui\");\n const fileHandle = await (0,_data__WEBPACK_IMPORTED_MODULE_13__.exportCanvas)(type, elements, this.state, this.files, {\n exportBackground: this.state.exportBackground,\n name: this.getName(),\n viewBackgroundColor: this.state.viewBackgroundColor,\n exportingFrame: opts.exportingFrame\n }).catch(_utils__WEBPACK_IMPORTED_MODULE_34__.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_40__.isImageFileHandle)(fileHandle)) {\n this.setState({\n fileHandle\n });\n }\n };\n\n this.magicGenerations = new Map();\n\n this.updateMagicGeneration = ({\n frameElement,\n data\n }) => {\n if (data.status === \"pending\") {\n // We don't wanna persist pending state to storage. It should be in-app\n // state only.\n // Thus reset so that we prefer local cache (if there was some\n // generationData set previously)\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(frameElement, {\n customData: {\n generationData: undefined\n }\n }, false);\n } else {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(frameElement, {\n customData: {\n generationData: data\n }\n }, false);\n }\n\n this.magicGenerations.set(frameElement.id, data);\n this.triggerRender();\n };\n\n this.plugins = {};\n\n this.onMagicframeToolSelect = () => {\n const selectedElements = this.scene.getSelectedElements({\n selectedElementIds: this.state.selectedElementIds\n });\n\n if (selectedElements.length === 0) {\n this.setActiveTool({\n type: _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.magicframe\n });\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"tool-select (empty-selection)\", \"d2c\");\n } else {\n const selectedMagicFrame = selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isMagicFrameElement)(selectedElements[0]) && selectedElements[0]; // case: user selected elements containing frame-like(s) or are frame\n // members, we don't want to wrap into another magicframe\n // (unless the only selected element is a magic frame which we reuse)\n\n if (!selectedMagicFrame && selectedElements.some(el => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(el) || el.frameId)) {\n this.setActiveTool({\n type: _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.magicframe\n });\n return;\n }\n\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"tool-select (existing selection)\", \"d2c\");\n let frame;\n\n if (selectedMagicFrame) {\n // a single magicframe already selected -> use it\n frame = selectedMagicFrame;\n } else {\n // selected elements aren't wrapped in magic frame yet -> wrap now\n const [minX, minY, maxX, maxY] = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(selectedElements);\n const padding = 50;\n frame = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newMagicFrameElement)(Object.assign(Object.assign({}, _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE), {\n x: minX - padding,\n y: minY - padding,\n width: maxX - minX + padding * 2,\n height: maxY - minY + padding * 2,\n opacity: 100,\n locked: false\n }));\n this.scene.insertElement(frame);\n\n for (const child of selectedElements) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(child, {\n frameId: frame.id\n });\n }\n\n this.setState({\n selectedElementIds: {\n [frame.id]: true\n }\n });\n }\n\n this.onMagicFrameGenerate(frame, \"upstream\");\n }\n };\n\n this.openEyeDropper = ({\n type\n }) => {\n _jotai__WEBPACK_IMPORTED_MODULE_55__.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 storeAction: _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.CAPTURE\n });\n } else {\n this.syncActionResult({\n appState: Object.assign(Object.assign({}, this.state), {\n currentItemBackgroundColor: color\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.CAPTURE\n });\n }\n } else {\n this.updateScene({\n elements: this.scene.getElementsIncludingDeleted().map(el => {\n if (this.state.selectedElementIds[el.id]) {\n return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(el, {\n [shouldUpdateStrokeColor ? \"strokeColor\" : \"backgroundColor\"]: color\n });\n }\n\n return el;\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.CAPTURE\n });\n }\n },\n keepOpenOnAlt: false\n });\n };\n\n this.dismissLinearEditor = () => {\n setTimeout(() => {\n this.setState({\n editingLinearElement: null\n });\n });\n };\n\n this.syncActionResult = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(actionResult => {\n var _a, _b, _c, _d, _e, _f, _g, _h;\n\n if (this.unmounted || actionResult === false) {\n return;\n }\n\n if (actionResult.storeAction === _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.UPDATE) {\n this.store.shouldUpdateSnapshot();\n } else if (actionResult.storeAction === _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.CAPTURE) {\n this.store.shouldCaptureIncrement();\n }\n\n let didUpdate = false;\n let editingTextElement = null;\n\n if (actionResult.elements) {\n this.scene.replaceAllElements(actionResult.elements);\n didUpdate = true;\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 || editingTextElement || this.state.contextMenu) {\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 const theme = ((_c = actionResult === null || actionResult === void 0 ? void 0 : actionResult.appState) === null || _c === void 0 ? void 0 : _c.theme) || this.props.theme || _constants__WEBPACK_IMPORTED_MODULE_12__.THEME.LIGHT;\n const name = (_e = (_d = actionResult === null || actionResult === void 0 ? void 0 : actionResult.appState) === null || _d === void 0 ? void 0 : _d.name) !== null && _e !== void 0 ? _e : this.state.name;\n const errorMessage = (_g = (_f = actionResult === null || actionResult === void 0 ? void 0 : actionResult.appState) === null || _f === void 0 ? void 0 : _f.errorMessage) !== null && _g !== void 0 ? _g : 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 editingTextElement = ((_h = actionResult.appState) === null || _h === void 0 ? void 0 : _h.editingTextElement) || null; // make sure editingTextElement points to latest element reference\n\n if (actionResult.elements && editingTextElement) {\n actionResult.elements.forEach(element => {\n if ((editingTextElement === null || editingTextElement === void 0 ? void 0 : editingTextElement.id) === element.id && editingTextElement !== element && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isNonDeletedElement)(element) && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(element)) {\n editingTextElement = element;\n }\n });\n }\n\n if (editingTextElement === null || editingTextElement === void 0 ? void 0 : editingTextElement.isDeleted) {\n editingTextElement = 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 editingTextElement,\n viewModeEnabled,\n zenModeEnabled,\n theme,\n name,\n errorMessage\n });\n });\n didUpdate = true;\n }\n\n if (!didUpdate && actionResult.storeAction !== _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.NONE) {\n this.scene.triggerUpdate();\n }\n }); // Lifecycle\n\n this.onBlur = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(() => {\n isHoldingSpace = false;\n this.setState({\n isBindingEnabled: true\n });\n });\n\n this.onUnload = () => {\n this.onBlur();\n };\n\n this.disableEvent = event => {\n event.preventDefault();\n };\n\n this.resetHistory = () => {\n this.history.clear();\n };\n\n this.resetStore = () => {\n this.store.clear();\n };\n /**\n * Resets scene & history.\n * ! Do not use to clear scene user action !\n */\n\n\n this.resetScene = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(opts => {\n this.scene.replaceAllElements([]);\n this.setState(state => Object.assign(Object.assign({}, (0,_appState__WEBPACK_IMPORTED_MODULE_10__.getDefaultAppState)()), {\n isLoading: (opts === null || opts === void 0 ? void 0 : opts.resetLoadingState) ? false : state.isLoading,\n theme: this.state.theme\n }));\n this.resetStore();\n this.resetHistory();\n });\n\n this.initializeScene = async () => {\n var _a;\n\n if (\"launchQueue\" in window && \"LaunchParams\" in window) {\n window.launchQueue.setConsumer(async launchParams => {\n if (!launchParams.files.length) {\n return;\n }\n\n const fileHandle = launchParams.files[0];\n const blob = await fileHandle.getFile();\n this.loadFileToCanvas(new File([blob], blob.name || \"\", {\n type: blob.type\n }), fileHandle);\n });\n }\n\n if (this.props.theme) {\n this.setState({\n theme: this.props.theme\n });\n }\n\n if (!this.state.isLoading) {\n this.setState({\n isLoading: true\n });\n }\n\n let initialData = null;\n\n try {\n if (typeof this.props.initialData === \"function\") {\n initialData = (await this.props.initialData()) || null;\n } else {\n initialData = (await this.props.initialData) || null;\n }\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_28__.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 }\n\n this.resetStore();\n this.resetHistory();\n this.syncActionResult(Object.assign(Object.assign({}, scene), {\n storeAction: _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.UPDATE\n })); // clear the shape and image cache so that any images in initialData\n // can be loaded fresh\n\n this.clearImageShapeCache(); // FontFaceSet loadingdone event we listen on may not always\n // fire (looking at you Safari), so on init we manually load all\n // fonts and rerender scene text elements once done. This also\n // seems faster even in browsers that do fire the loadingdone event.\n\n this.fonts.loadSceneFonts();\n };\n\n this.isMobileBreakpoint = (width, height) => {\n return width !== 0 && //zsviczian changing tabs in Obsidian causes MobileMenu to be rendered\n this.allowMobileMode && ( //zsviczian\n width < _constants__WEBPACK_IMPORTED_MODULE_12__.MQ_MAX_WIDTH_PORTRAIT || height < _constants__WEBPACK_IMPORTED_MODULE_12__.MQ_MAX_HEIGHT_LANDSCAPE && width < _constants__WEBPACK_IMPORTED_MODULE_12__.MQ_MAX_WIDTH_LANDSCAPE);\n };\n\n this.refreshViewportBreakpoints = () => {\n const container = this.excalidrawContainerRef.current;\n\n if (!container) {\n return;\n }\n\n const {\n clientWidth: viewportWidth,\n clientHeight: viewportHeight\n } = (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_82__.getExcalidrawContentEl)(); //zsviczian was document.body;\n\n const prevViewportState = this.device.viewport;\n const nextViewportState = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.updateObject)(prevViewportState, {\n isLandscape: viewportWidth > viewportHeight,\n isMobile: this.isMobileBreakpoint(viewportWidth, viewportHeight)\n });\n\n if (prevViewportState !== nextViewportState) {\n this.device = Object.assign(Object.assign({}, this.device), {\n viewport: nextViewportState\n });\n return true;\n }\n\n return false;\n };\n\n this.refreshEditorBreakpoints = () => {\n const container = this.excalidrawContainerRef.current;\n\n if (!container) {\n return;\n }\n\n const {\n width: editorWidth,\n height: editorHeight\n } = container.getBoundingClientRect();\n const sidebarBreakpoint = this.props.UIOptions.dockedSidebarBreakpoint != null ? this.props.UIOptions.dockedSidebarBreakpoint : _constants__WEBPACK_IMPORTED_MODULE_12__.MQ_RIGHT_SIDEBAR_MIN_WIDTH;\n const prevEditorState = this.device.editor;\n const nextEditorState = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.updateObject)(prevEditorState, {\n isMobile: this.isMobileBreakpoint(editorWidth, editorHeight),\n canFitSidebar: editorWidth > sidebarBreakpoint\n });\n\n if (prevEditorState !== nextEditorState) {\n this.device = Object.assign(Object.assign({}, this.device), {\n editor: nextEditorState\n });\n return true;\n }\n\n return false;\n };\n\n this.onResize = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(() => {\n this.scene.getElementsIncludingDeleted().forEach(element => _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_66__.ShapeCache[\"delete\"](element));\n this.refreshViewportBreakpoints();\n this.updateDOMRect();\n\n if (!_constants__WEBPACK_IMPORTED_MODULE_12__.supportsResizeObserver) {\n this.refreshEditorBreakpoints();\n }\n\n this.setState({});\n });\n /** generally invoked only if fullscreen was invoked programmatically */\n\n this.onFullscreenChange = () => {\n var _a;\n\n if ( // points to the iframe element we fullscreened\n !document.fullscreenElement && ((_a = this.state.activeEmbeddable) === null || _a === void 0 ? void 0 : _a.state) === \"active\") {\n this.setState({\n activeEmbeddable: null\n });\n }\n };\n\n this.renderInteractiveSceneCallback = ({\n atLeastOneVisibleElement,\n scrollBars,\n elementsMap\n }) => {\n if (!document.querySelector(\".excalidraw\")) {\n return;\n } //zsviczian - address issue when moving excalidraw to a new window/document\n\n\n if (scrollBars) {\n currentScrollBars = scrollBars;\n }\n\n const scrolledOutside = // hide when editing text\n this.state.editingTextElement ? false : !atLeastOneVisibleElement && elementsMap.size > 0;\n\n if (this.state.scrolledOutside !== scrolledOutside) {\n this.setState({\n scrolledOutside\n });\n }\n\n this.scheduleImageRefresh();\n };\n\n this.onScroll = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.debounce)(() => {\n const {\n offsetTop,\n offsetLeft\n } = this.getCanvasOffsets();\n this.setState(state => {\n if (state.offsetLeft === offsetLeft && state.offsetTop === offsetTop) {\n return null;\n }\n\n return {\n offsetTop,\n offsetLeft\n };\n });\n }, _constants__WEBPACK_IMPORTED_MODULE_12__.SCROLL_TIMEOUT); // Copy/paste\n\n this.onCut = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.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_34__.isWritableElement)(event.target)) {\n return;\n }\n\n this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionCut, \"keyboard\", event);\n event.preventDefault();\n event.stopPropagation();\n });\n this.onCopy = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.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_34__.isWritableElement)(event.target)) {\n return;\n }\n\n this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionCopy, \"keyboard\", event);\n event.preventDefault();\n event.stopPropagation();\n });\n\n this.onTouchStart = event => {\n // fix for Apple Pencil Scribble (do not prevent for other devices)\n if (_constants__WEBPACK_IMPORTED_MODULE_12__.isIOS) {\n event.preventDefault();\n }\n\n if (!didTapTwice) {\n didTapTwice = true;\n clearTimeout(tappedTwiceTimer);\n tappedTwiceTimer = window.setTimeout(App.resetTapTwice, _constants__WEBPACK_IMPORTED_MODULE_12__.TAP_TWICE_TIMEOUT);\n return;\n } // insert text only if we tapped twice with a single finger\n // event.touches.length === 1 will also prevent inserting text when user's zooming\n\n\n if (didTapTwice && event.touches.length === 1) {\n const touch = event.touches[0]; // @ts-ignore\n\n this.handleCanvasDoubleClick({\n clientX: touch.clientX,\n clientY: touch.clientY\n });\n didTapTwice = false;\n clearTimeout(tappedTwiceTimer);\n }\n\n if (event.touches.length === 2) {\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.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_51__.makeNextSelectedElementIds)(this.state.previousSelectedElementIds, this.state)\n });\n } else {\n gesture.pointers.clear();\n }\n };\n\n this.pasteFromClipboard = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(async event => {\n var _a, _b;\n\n const isPlainPaste = !!IS_PLAIN_PASTE; // #686\n\n const target = document.activeElement;\n const isExcalidrawActive = (_a = this.excalidrawContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(target);\n\n if (event && !isExcalidrawActive) {\n return;\n }\n\n const elementUnderCursor = document.elementFromPoint(this.lastViewportPosition.x, this.lastViewportPosition.y);\n\n if (event && (!(elementUnderCursor instanceof HTMLCanvasElement) || (0,_utils__WEBPACK_IMPORTED_MODULE_34__.isWritableElement)(target))) {\n return;\n }\n\n const {\n x: sceneX,\n y: sceneY\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.viewportCoordsToSceneCoords)({\n clientX: this.lastViewportPosition.x,\n clientY: this.lastViewportPosition.y\n }, this.state); // must be called in the same frame (thus before any awaits) as the paste\n // event else some browsers (FF...) will clear the clipboardData\n // (something something security)\n\n let file = (_b = event === null || event === void 0 ? void 0 : event.clipboardData) === null || _b === void 0 ? void 0 : _b.files[0];\n const data = await (0,_clipboard__WEBPACK_IMPORTED_MODULE_11__.parseClipboard)(event, isPlainPaste);\n\n if (!file && !isPlainPaste) {\n if (data.mixedContent) {\n return this.addElementsFromMixedContentPaste(data.mixedContent, {\n isPlainPaste,\n sceneX,\n sceneY\n });\n } else if (data.text) {\n const string = data.text.trim();\n\n if (string.startsWith(\"<svg\") && string.endsWith(\"</svg>\")) {\n // ignore SVG validation/normalization which will be done during image\n // initialization\n file = (0,_data_blob__WEBPACK_IMPORTED_MODULE_40__.SVGStringToFile)(string);\n }\n }\n } // prefer spreadsheet data over image file (MS Office/Libre Office)\n\n\n if ((0,_data_blob__WEBPACK_IMPORTED_MODULE_40__.isSupportedImageFile)(file) && !data.spreadsheet) {\n if (!this.isToolSupported(\"image\")) {\n this.setState({\n errorMessage: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageToolNotSupported\")\n });\n return;\n }\n\n const imageElement = this.createImageElement({\n sceneX,\n sceneY\n });\n this.insertImageElement(imageElement, file);\n this.initializeImageDimensions(imageElement);\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.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 if (data.text && (0,_mermaid__WEBPACK_IMPORTED_MODULE_92__.isMaybeMermaidDefinition)(data.text)) {\n const api = await Promise.resolve(/*! import() */).then(__webpack_require__.bind(__webpack_require__, /*! @zsviczian/mermaid-to-excalidraw */ \"../../node_modules/@zsviczian/mermaid-to-excalidraw/dist/index.js\")); //zsviczian\n\n try {\n const {\n elements: skeletonElements,\n files\n } = await api.parseMermaidToExcalidraw(data.text, {\n //zsviczian reverting https://github.com/excalidraw/excalidraw/pull/8226\n fontSize: _constants__WEBPACK_IMPORTED_MODULE_12__.DEFAULT_FONT_SIZE\n }); //await api.parseMermaidToExcalidraw(data.text);\n\n const elements = (0,_data_transform__WEBPACK_IMPORTED_MODULE_62__.convertToExcalidrawElements)(skeletonElements, {\n regenerateIds: true\n });\n this.addElementsFromPasteOrLibrary({\n elements,\n files,\n position: \"cursor\"\n });\n return;\n } catch (err) {\n console.warn(`parsing pasted text as mermaid definition failed: ${err.message}`);\n }\n }\n\n const nonEmptyLines = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.normalizeEOL)(data.text).split(/\\n+/).map(s => s.trim()).filter(Boolean);\n const embbeddableUrls = nonEmptyLines.map(str => (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_35__.maybeParseEmbedSrc)(str)).filter(string => {\n var _a;\n\n return (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_35__.embeddableURLValidator)(string, this.props.validateEmbeddable) && (/^(http|https):\\/\\/[^\\s/$.?#].[^\\s]*$/.test(string) || ((_a = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_35__.getEmbedLink)(string)) === null || _a === void 0 ? void 0 : _a.type) === \"video\");\n });\n\n if (!IS_PLAIN_PASTE && embbeddableUrls.length > 0 && // if there were non-embeddable text (lines) mixed in with embeddable\n // urls, ignore and paste as text\n embbeddableUrls.length === nonEmptyLines.length) {\n const embeddables = [];\n\n for (const url of embbeddableUrls) {\n const prevEmbeddable = embeddables[embeddables.length - 1];\n const embeddable = this.insertEmbeddableElement({\n sceneX: prevEmbeddable ? prevEmbeddable.x + prevEmbeddable.width + 20 : sceneX,\n sceneY,\n link: (0,_data_url__WEBPACK_IMPORTED_MODULE_46__.normalizeLink)(url)\n });\n\n if (embeddable) {\n embeddables.push(embeddable);\n }\n }\n\n if (embeddables.length) {\n this.setState({\n selectedElementIds: Object.fromEntries(embeddables.map(embeddable => [embeddable.id, true]))\n });\n }\n\n return;\n }\n\n this.addTextFromPaste(data.text, isPlainPaste);\n }\n\n this.setActiveTool({\n type: \"selection\"\n });\n event === null || event === void 0 ? void 0 : event.preventDefault();\n });\n\n this.addElementsFromPasteOrLibrary = opts => {\n const elements = (0,_data_restore__WEBPACK_IMPORTED_MODULE_15__.restoreElements)(opts.elements, null, undefined);\n const [minX, minY, maxX, maxY] = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(elements);\n const elementsCenterX = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.distance)(minX, maxX) / 2;\n const elementsCenterY = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.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_34__.viewportCoordsToSceneCoords)({\n clientX,\n clientY\n }, this.state);\n const dx = x - elementsCenterX;\n const dy = y - elementsCenterY;\n const [gridX, gridY] = (0,_snapping__WEBPACK_IMPORTED_MODULE_58__.getGridPoint)(dx, dy, this.getEffectiveGridSize());\n const newElements = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.duplicateElements)(elements.map(element => {\n return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(element, {\n x: element.x + gridX - minX,\n y: element.y + gridY - minY\n });\n }), {\n randomizeSeed: !opts.retainSeed\n });\n const prevElements = this.scene.getElementsIncludingDeleted();\n const nextElements = [...prevElements, ...newElements];\n (0,_fractionalIndex__WEBPACK_IMPORTED_MODULE_86__.syncMovedIndices)(nextElements, (0,_utils__WEBPACK_IMPORTED_MODULE_34__.arrayToMap)(newElements));\n const topLayerFrame = this.getTopLayerFrameAtSceneCoords({\n x,\n y\n });\n\n if (topLayerFrame) {\n const eligibleElements = (0,_frame__WEBPACK_IMPORTED_MODULE_50__.filterElementsEligibleAsFrameChildren)(newElements, topLayerFrame);\n (0,_frame__WEBPACK_IMPORTED_MODULE_50__.addElementsToFrame)(nextElements, eligibleElements, topLayerFrame);\n }\n\n this.scene.replaceAllElements(nextElements);\n newElements.forEach(newElement => {\n if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(newElement) && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(newElement)) {\n const container = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.getContainerElement)(newElement, this.scene.getElementsMapIncludingDeleted());\n (0,_element__WEBPACK_IMPORTED_MODULE_16__.redrawTextBoundingBox)(newElement, container, this.scene.getElementsMapIncludingDeleted());\n }\n });\n\n if (opts.files) {\n this.files = Object.assign(Object.assign({}, this.files), opts.files);\n }\n\n this.store.shouldCaptureIncrement();\n const nextElementsToSelect = (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.excludeElementsInFramesFromSelection)(newElements);\n this.setState(Object.assign(Object.assign(Object.assign({}, this.state), {\n // keep sidebar (presumably the library) open if it's docked and\n // can fit.\n //\n // Note, we should close the sidebar only if we're dropping items\n // from library, not when pasting from clipboard. Alas.\n openSidebar: this.state.openSidebar && this.device.editor.canFitSidebar && _jotai__WEBPACK_IMPORTED_MODULE_55__.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 canvasOffsets: this.getEditorUIOffsets()\n });\n }\n };\n\n this.setAppState = (state, callback) => {\n this.setState(state, callback);\n };\n\n this.removePointer = event => {\n if (touchTimeout) {\n this.resetContextMenuTimer();\n }\n\n gesture.pointers.delete(event.pointerId);\n };\n\n this.toggleLock = (source = \"ui\") => {\n if (!this.state.activeTool.locked) {\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"toolbar\", \"toggleLock\", `${source} (${this.device.editor.isMobile ? \"mobile\" : \"desktop\"})`);\n }\n\n this.setState(prevState => {\n return {\n activeTool: Object.assign(Object.assign(Object.assign({}, prevState.activeTool), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.updateActiveTool)(this.state, prevState.activeTool.locked ? {\n type: \"selection\"\n } : prevState.activeTool)), {\n locked: !prevState.activeTool.locked\n })\n };\n });\n };\n\n this.updateFrameRendering = opts => {\n this.setState(prevState => {\n var _a, _b, _c, _d;\n\n const next = typeof opts === \"function\" ? opts(prevState.frameRendering) : opts;\n return {\n frameRendering: {\n enabled: (_a = next === null || next === void 0 ? void 0 : next.enabled) !== null && _a !== void 0 ? _a : prevState.frameRendering.enabled,\n clip: (_b = next === null || next === void 0 ? void 0 : next.clip) !== null && _b !== void 0 ? _b : prevState.frameRendering.clip,\n name: (_c = next === null || next === void 0 ? void 0 : next.name) !== null && _c !== void 0 ? _c : prevState.frameRendering.name,\n outline: (_d = next === null || next === void 0 ? void 0 : next.outline) !== null && _d !== void 0 ? _d : prevState.frameRendering.outline\n }\n };\n });\n };\n\n this.togglePenMode = force => {\n this.setState(prevState => {\n return {\n penMode: force !== null && force !== void 0 ? force : !prevState.penMode,\n penDetected: true\n };\n });\n };\n\n this.onHandToolToggle = () => {\n //zsviczian added timeout because button won't select otherwise\n setTimeout(() => this.actionManager.executeAction(_actions_actionCanvas__WEBPACK_IMPORTED_MODULE_54__.actionToggleHandTool));\n };\n /**\n * Zooms on canvas viewport center\n */\n\n\n this.zoomCanvas = (\n /**\n * Decimal fraction, auto-clamped between MIN_ZOOM and MAX_ZOOM.\n * 1 = 100% zoom, 2 = 200% zoom, 0.5 = 50% zoom\n */\n value) => {\n this.setState(Object.assign({}, (0,_scene_zoom__WEBPACK_IMPORTED_MODULE_30__.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_28__.getNormalizedZoom)(value)\n }, this.state)));\n };\n\n this.cancelInProgressAnimation = null;\n\n this.scrollToContent = (target = this.scene.getNonDeletedElements(), opts) => {\n var _a, _b;\n\n (_a = this.cancelInProgressAnimation) === null || _a === void 0 ? void 0 : _a.call(this); // convert provided target into ExcalidrawElement[] if necessary\n\n const targetElements = Array.isArray(target) ? target : [target];\n let zoom = this.state.zoom;\n let scrollX = this.state.scrollX;\n let scrollY = this.state.scrollY;\n\n if ((opts === null || opts === void 0 ? void 0 : opts.fitToContent) || (opts === null || opts === void 0 ? void 0 : opts.fitToViewport)) {\n const {\n appState\n } = (0,_actions_actionCanvas__WEBPACK_IMPORTED_MODULE_54__.zoomToFit)({\n canvasOffsets: opts.canvasOffsets,\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 minZoom: opts === null || opts === void 0 ? void 0 : opts.minZoom,\n maxZoom: opts === null || opts === void 0 ? void 0 : opts.maxZoom\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_28__.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_34__.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_34__.easeOut)(progress));\n } // handle using default\n\n\n return undefined;\n },\n onStep: ({\n scrollX,\n scrollY,\n zoom\n }) => {\n this.setState({\n scrollX,\n scrollY,\n zoom: {\n value: zoom\n }\n });\n },\n onStart: () => {\n this.setState({\n shouldCacheIgnoreZoom: true\n });\n },\n onEnd: () => {\n this.setState({\n shouldCacheIgnoreZoom: false\n });\n },\n onCancel: () => {\n this.setState({\n shouldCacheIgnoreZoom: false\n });\n },\n duration: (_b = opts === null || opts === void 0 ? void 0 : opts.duration) !== null && _b !== void 0 ? _b : 500\n });\n\n this.cancelInProgressAnimation = () => {\n cancel();\n this.cancelInProgressAnimation = null;\n };\n } else {\n this.setState({\n scrollX,\n scrollY,\n zoom\n });\n }\n };\n\n this.maybeUnfollowRemoteUser = () => {\n if (this.state.userToFollow) {\n this.setState({\n userToFollow: null\n });\n }\n };\n /** use when changing scrollX/scrollY/zoom based on user interaction */\n\n\n this.translateCanvas = state => {\n var _a;\n\n (_a = this.cancelInProgressAnimation) === null || _a === void 0 ? void 0 : _a.call(this);\n this.maybeUnfollowRemoteUser();\n this.setState(state);\n }; //zsviczian\n\n\n this.zoomToFit = (target = this.scene.getNonDeletedElements(), maxZoom = 1, //null will zoom to max based on viewport\n margin = 0.03) => {\n if (!target) {\n target = this.scene.getNonDeletedElements();\n }\n\n if (target.length === 0) {\n maxZoom = 1;\n }\n\n this.setState((0,_actions_actionCanvas__WEBPACK_IMPORTED_MODULE_54__.zoomToFitElements)(target, this.state, false, this, maxZoom, margin).appState);\n }; //zsviczian\n\n\n this.startLineEditor = (el, selectedPointsIndices = null) => {\n if (!el || !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(el)) {\n return;\n }\n\n const editingLinearElement = new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(el);\n this.setState({\n selectedLinearElement: editingLinearElement,\n editingLinearElement: Object.assign(Object.assign({}, editingLinearElement), {\n selectedPointsIndices\n })\n });\n }; //zsviczian\n\n\n this.updateContainerSize = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(containers => {\n containers.forEach(el => {\n const [x, y] = (0,_math__WEBPACK_IMPORTED_MODULE_98__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(el.x + el.width, el.y + el.height), (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(el.x + el.width / 2, el.y + el.height / 2), el.angle);\n (0,_element_resizeElements__WEBPACK_IMPORTED_MODULE_89__.resizeSingleElement)(new Map().set(el.id, el), false, el, this.scene.getElementsMapIncludingDeleted(), \"se\", true, x, y);\n });\n });\n\n this.setToast = toast => {\n this.setState({\n toast\n });\n };\n\n this.restoreFileFromShare = async () => {\n try {\n const webShareTargetCache = await caches.open(\"web-share-target\");\n const response = await webShareTargetCache.match(\"shared-file\");\n\n if (response) {\n const blob = await response.blob();\n const file = new File([blob], blob.name || \"\", {\n type: blob.type\n });\n this.loadFileToCanvas(file, null);\n await webShareTargetCache.delete(\"shared-file\");\n window.history.replaceState(null, _constants__WEBPACK_IMPORTED_MODULE_12__.APP_NAME, window.location.pathname);\n }\n } catch (error) {\n this.setState({\n errorMessage: error.message\n });\n }\n };\n /** adds supplied files to existing files in the appState */\n\n\n this.addFiles = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.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.clearImageShapeCache(Object.fromEntries(filesMap));\n this.scene.triggerUpdate();\n this.addNewImagesToImageCache();\n }); //zsviczian https://github.com/zsviczian/excalibrain/issues/9\n\n this.setMobileModeAllowed = allow => {\n const {\n width: editorWidth,\n height: editorHeight\n } = this.excalidrawContainerRef.current.getBoundingClientRect();\n this.allowMobileMode = allow;\n const prevEditorState = this.device.editor;\n let nextEditorState;\n\n if (allow) {\n nextEditorState = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.updateObject)(prevEditorState, {\n isMobile: this.isMobileBreakpoint(editorWidth, editorHeight)\n });\n } else {\n nextEditorState = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.updateObject)(prevEditorState, {\n isMobile: false //must test this\n\n });\n }\n\n if (prevEditorState !== nextEditorState) {\n this.device = Object.assign(Object.assign({}, this.device), {\n editor: nextEditorState\n });\n this.forceUpdate();\n }\n }; //zsviczian\n\n\n this.debounceClearHighlightSearchResults = false;\n\n this.selectElements = (elements, highlightSearchResult = false) => {\n //zsviczian\n if (highlightSearchResult) {\n this.debounceClearHighlightSearchResults = true;\n setTimeout(() => {\n this.debounceClearHighlightSearchResults = false;\n }, 500);\n }\n\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 highlightSearchResult\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.NONE,\n forceFlushSync: 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,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(sceneData => {\n var _a;\n\n const nextElements = (0,_fractionalIndex__WEBPACK_IMPORTED_MODULE_86__.syncInvalidIndices)((_a = sceneData.elements) !== null && _a !== void 0 ? _a : []);\n\n if (sceneData.storeAction && sceneData.storeAction !== _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.NONE) {\n const prevCommittedAppState = this.store.snapshot.appState;\n const prevCommittedElements = this.store.snapshot.elements;\n const nextCommittedAppState = sceneData.appState ? Object.assign({}, prevCommittedAppState, sceneData.appState) // new instance, with partial appstate applied to previously captured one, including hidden prop inside `prevCommittedAppState`\n : prevCommittedAppState;\n const nextCommittedElements = sceneData.elements ? this.store.filterUncomittedElements(this.scene.getElementsMapIncludingDeleted(), // Only used to detect uncomitted local elements\n (0,_utils__WEBPACK_IMPORTED_MODULE_34__.arrayToMap)(nextElements)) : prevCommittedElements; // WARN: store action always performs deep clone of changed elements, for ephemeral remote updates (i.e. remote dragging, resizing, drawing) we might consider doing something smarter\n // do NOT schedule store actions (execute after re-render), as it might cause unexpected concurrency issues if not handled well\n\n if (sceneData.storeAction === _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.CAPTURE) {\n this.store.captureIncrement(nextCommittedElements, nextCommittedAppState);\n } else if (sceneData.storeAction === _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.UPDATE) {\n this.store.updateSnapshot(nextCommittedElements, nextCommittedAppState);\n }\n } //zsviczian forceFlushSync is set to true in ExcalidrawView.updateScene.\n //without this e.g. text search did not select the elements\n\n\n if (sceneData.forceFlushSync === true) {\n (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.flushSync)(() => {\n if (sceneData.appState) {\n this.setState(sceneData.appState);\n }\n });\n } else if (sceneData.appState) {\n this.setState(sceneData.appState);\n }\n\n if (sceneData.elements) {\n this.scene.replaceAllElements(nextElements);\n }\n\n if (sceneData.collaborators) {\n this.setState({\n collaborators: sceneData.collaborators\n });\n }\n });\n\n this.triggerRender = (\n /** force always re-renders canvas even if no change */\n force) => {\n if (force === true) {\n this.scene.triggerUpdate();\n } else {\n this.setState({});\n }\n };\n /**\n * @returns whether the menu was toggled on or off\n */\n\n\n this.toggleSidebar = ({\n name,\n tab,\n force\n }) => {\n var _a, _b;\n\n let nextName;\n\n if (force === undefined) {\n nextName = ((_a = this.state.openSidebar) === null || _a === void 0 ? void 0 : _a.name) === name && ((_b = this.state.openSidebar) === null || _b === void 0 ? void 0 : _b.tab) === tab ? null : name;\n } else {\n nextName = force ? name : null;\n }\n\n const nextState = nextName ? {\n name: nextName\n } : null;\n\n if (nextState && tab) {\n nextState.tab = tab;\n }\n\n this.setState({\n openSidebar: nextState\n });\n return !!nextName;\n };\n\n this.updateCurrentCursorPosition = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(event => {\n this.lastViewportPosition.x = event.clientX;\n this.lastViewportPosition.y = event.clientY;\n });\n\n this.getEditorUIOffsets = () => {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;\n\n const toolbarBottom = (_e = (_d = (_c = (_b = (_a = this.excalidrawContainerRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.querySelector(\".App-toolbar\")) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect()) === null || _d === void 0 ? void 0 : _d.bottom) !== null && _e !== void 0 ? _e : 0;\n const sidebarRect = (_h = (_g = (_f = this.excalidrawContainerRef) === null || _f === void 0 ? void 0 : _f.current) === null || _g === void 0 ? void 0 : _g.querySelector(\".sidebar\")) === null || _h === void 0 ? void 0 : _h.getBoundingClientRect();\n const propertiesPanelRect = (_l = (_k = (_j = this.excalidrawContainerRef) === null || _j === void 0 ? void 0 : _j.current) === null || _k === void 0 ? void 0 : _k.querySelector(\".App-menu__left\")) === null || _l === void 0 ? void 0 : _l.getBoundingClientRect();\n const PADDING = 16;\n return (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.getLanguage)().rtl ? {\n top: toolbarBottom + PADDING,\n right: Math.max(this.state.width - ((_m = propertiesPanelRect === null || propertiesPanelRect === void 0 ? void 0 : propertiesPanelRect.left) !== null && _m !== void 0 ? _m : this.state.width), 0) + PADDING,\n bottom: PADDING,\n left: Math.max((_o = sidebarRect === null || sidebarRect === void 0 ? void 0 : sidebarRect.right) !== null && _o !== void 0 ? _o : 0, 0) + PADDING\n } : {\n top: toolbarBottom + PADDING,\n right: Math.max(this.state.width - ((_p = sidebarRect === null || sidebarRect === void 0 ? void 0 : sidebarRect.left) !== null && _p !== void 0 ? _p : this.state.width) + PADDING, 0),\n bottom: PADDING,\n left: Math.max((_q = propertiesPanelRect === null || propertiesPanelRect === void 0 ? void 0 : propertiesPanelRect.right) !== null && _q !== void 0 ? _q : 0, 0) + PADDING\n };\n }; // Input handling\n\n\n this.onKeyDown = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(event => {\n var _a;\n\n if (this.state.activeTool.type === \"selection\" && this.state.resizingElement && (event.shiftKey || event.altKey)) {\n event.stopPropagation(); //zsviczian shift fires repeatedly causing slowdown when resizing sticky notes\n\n return;\n } // normalize `event.key` when CapsLock is pressed #2372\n\n\n if (\"Proxy\" in window && (!event.shiftKey && /^[A-Z]$/.test(event.key) || event.shiftKey && /^[a-z]$/.test(event.key))) {\n event = new Proxy(event, {\n get(ev, prop) {\n const value = ev[prop];\n\n if (typeof value === \"function\") {\n // fix for Proxies hijacking `this`\n return value.bind(ev);\n }\n\n return prop === \"key\" ? // CapsLock inverts capitalization based on ShiftKey, so invert\n // it back\n event.shiftKey ? ev.key.toUpperCase() : ev.key.toLowerCase() : value;\n }\n\n });\n }\n\n if (!(0,_utils__WEBPACK_IMPORTED_MODULE_34__.isInputLike)(event.target)) {\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ESCAPE && this.flowChartCreator.isCreatingChart) {\n this.flowChartCreator.clear();\n this.triggerRender(true);\n return;\n }\n\n const arrowKeyPressed = (0,_keys__WEBPACK_IMPORTED_MODULE_26__.isArrowKey)(event.key);\n\n if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && arrowKeyPressed && !event.shiftKey) {\n event.preventDefault();\n const selectedElements = (0,_scene__WEBPACK_IMPORTED_MODULE_28__.getSelectedElements)(this.scene.getNonDeletedElementsMap(), this.state);\n\n if (selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFlowchartNodeElement)(selectedElements[0])) {\n this.flowChartCreator.createNodes(selectedElements[0], this.scene.getNonDeletedElementsMap(), this.state, (0,_element_flowchart__WEBPACK_IMPORTED_MODULE_96__.getLinkDirectionFromKey)(event.key));\n }\n\n if (((_a = this.flowChartCreator.pendingNodes) === null || _a === void 0 ? void 0 : _a.length) && !(0,_element_sizeHelpers__WEBPACK_IMPORTED_MODULE_27__.isElementCompletelyInViewport)(this.flowChartCreator.pendingNodes, this.canvas.width / window.devicePixelRatio, this.canvas.height / window.devicePixelRatio, {\n offsetLeft: this.state.offsetLeft,\n offsetTop: this.state.offsetTop,\n scrollX: this.state.scrollX,\n scrollY: this.state.scrollY,\n zoom: this.state.zoom\n }, this.scene.getNonDeletedElementsMap(), this.getEditorUIOffsets())) {\n this.scrollToContent(this.flowChartCreator.pendingNodes, {\n animate: true,\n duration: 300,\n fitToContent: true,\n canvasOffsets: this.getEditorUIOffsets()\n });\n }\n\n return;\n }\n\n if (event.altKey) {\n const selectedElements = (0,_scene__WEBPACK_IMPORTED_MODULE_28__.getSelectedElements)(this.scene.getNonDeletedElementsMap(), this.state);\n\n if (selectedElements.length === 1 && arrowKeyPressed) {\n event.preventDefault();\n const nextId = this.flowChartNavigator.exploreByDirection(selectedElements[0], this.scene.getNonDeletedElementsMap(), (0,_element_flowchart__WEBPACK_IMPORTED_MODULE_96__.getLinkDirectionFromKey)(event.key));\n\n if (nextId) {\n this.setState(prevState => ({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.makeNextSelectedElementIds)({\n [nextId]: true\n }, prevState)\n }));\n const nextNode = this.scene.getNonDeletedElementsMap().get(nextId);\n\n if (nextNode && !(0,_element_sizeHelpers__WEBPACK_IMPORTED_MODULE_27__.isElementCompletelyInViewport)([nextNode], this.canvas.width / window.devicePixelRatio, this.canvas.height / window.devicePixelRatio, {\n offsetLeft: this.state.offsetLeft,\n offsetTop: this.state.offsetTop,\n scrollX: this.state.scrollX,\n scrollY: this.state.scrollY,\n zoom: this.state.zoom\n }, this.scene.getNonDeletedElementsMap(), this.getEditorUIOffsets())) {\n this.scrollToContent(nextNode, {\n animate: true,\n duration: 300,\n canvasOffsets: this.getEditorUIOffsets()\n });\n }\n }\n\n return;\n }\n }\n }\n\n if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.P && !event.shiftKey && !event.altKey) {\n this.setToast({\n message: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"commandPalette.shortcutHint\", {\n shortcut: (0,_actions_shortcuts__WEBPACK_IMPORTED_MODULE_88__.getShortcutFromShortcutName)(\"commandPalette\")\n })\n });\n event.preventDefault();\n return;\n }\n\n if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && event.key.toLowerCase() === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.V) {\n IS_PLAIN_PASTE = event.shiftKey;\n clearTimeout(IS_PLAIN_PASTE_TIMER); // reset (100ms to be safe that we it runs after the ensuing\n // paste event). Though, technically unnecessary to reset since we\n // (re)set the flag before each paste event.\n\n IS_PLAIN_PASTE_TIMER = window.setTimeout(() => {\n IS_PLAIN_PASTE = false;\n }, 100);\n } // prevent browser zoom in input fields\n\n\n if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && (0,_utils__WEBPACK_IMPORTED_MODULE_34__.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_34__.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_34__.isInputLike)(event.target)) {\n return;\n }\n\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.QUESTION_MARK) {\n this.setState({\n openDialog: {\n name: \"help\"\n }\n });\n return;\n } else if (event.key.toLowerCase() === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.E && event.shiftKey && event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n event.preventDefault();\n this.setState({\n openDialog: {\n name: \"imageExport\"\n }\n });\n return;\n }\n\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.PAGE_UP || event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.PAGE_DOWN) {\n let offset = (event.shiftKey ? this.state.width : this.state.height) / this.state.zoom.value;\n\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.PAGE_DOWN) {\n offset = -offset;\n }\n\n if (event.shiftKey) {\n this.translateCanvas(state => ({\n scrollX: state.scrollX + offset\n }));\n } else {\n this.translateCanvas(state => ({\n scrollY: state.scrollY + offset\n }));\n }\n }\n\n if (this.actionManager.handleKeyDown(event)) {\n return;\n }\n\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.K && !event.altKey && !event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isLaserPointerActive)(this.state)) {\n this.setActiveTool({\n type: \"selection\"\n });\n } else {\n this.setActiveTool({\n type: \"laser\"\n });\n }\n\n return;\n }\n\n if (this.state.viewModeEnabled) {\n //revert to hand in case a key is pressed (K is handled above)\n if (event.key !== _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.K) {\n this.setActiveTool({\n type: \"selection\"\n });\n }\n\n return;\n }\n\n if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && this.state.isBindingEnabled) {\n this.setState({\n isBindingEnabled: false\n });\n }\n\n if ((0,_keys__WEBPACK_IMPORTED_MODULE_26__.isArrowKey)(event.key)) {\n let selectedElements = this.scene.getSelectedElements({\n selectedElementIds: this.state.selectedElementIds,\n includeBoundTextElement: true,\n includeElementsInFrames: true\n });\n const elbowArrow = selectedElements.find(_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isElbowArrow);\n const arrowIdsToRemove = new Set();\n selectedElements.filter(_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isElbowArrow).filter(arrow => {\n const startElementNotInSelection = arrow.startBinding && !selectedElements.some(el => {\n var _a;\n\n return el.id === ((_a = arrow.startBinding) === null || _a === void 0 ? void 0 : _a.elementId);\n });\n const endElementNotInSelection = arrow.endBinding && !selectedElements.some(el => {\n var _a;\n\n return el.id === ((_a = arrow.endBinding) === null || _a === void 0 ? void 0 : _a.elementId);\n });\n return startElementNotInSelection || endElementNotInSelection;\n }).forEach(arrow => arrowIdsToRemove.add(arrow.id));\n selectedElements = selectedElements.filter(el => !arrowIdsToRemove.has(el.id));\n const step = this.getEffectiveGridSize() && (event.shiftKey ? _constants__WEBPACK_IMPORTED_MODULE_12__.ELEMENT_TRANSLATE_AMOUNT : this.getEffectiveGridSize()) || (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 selectedElements.forEach(element => {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n x: element.x + offsetX,\n y: element.y + offsetY\n });\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.updateBoundElements)(element, this.scene.getNonDeletedElementsMap(), {\n simultaneouslyUpdated: selectedElements\n });\n });\n this.setState({\n suggestedBindings: (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getSuggestedBindingsForArrows)(selectedElements.filter(element => element.id !== (elbowArrow === null || elbowArrow === void 0 ? void 0 : elbowArrow.id) || step !== 0), this.scene.getNonDeletedElementsMap())\n });\n event.preventDefault();\n } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ENTER) {\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (selectedElements.length === 1) {\n const selectedElement = selectedElements[0];\n\n if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(selectedElement)) {\n if (!this.state.editingLinearElement || this.state.editingLinearElement.elementId !== selectedElements[0].id) {\n this.store.shouldCaptureIncrement();\n\n if (!(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isElbowArrow)(selectedElement)) {\n this.setState({\n editingLinearElement: new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(selectedElement)\n });\n }\n }\n }\n } else if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(selectedElement) || (0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.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_44__.getContainerCenter)(selectedElement, this.state, this.scene.getNonDeletedElementsMap());\n const sceneX = midPoint.x;\n const sceneY = midPoint.y;\n this.startTextEditing({\n sceneX,\n sceneY,\n container\n });\n event.preventDefault();\n return;\n } else if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(selectedElement)) {\n this.setState({\n editingFrame: selectedElement.id\n });\n } else if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(selectedElement)) {\n //zsviczian\n this.setState({\n activeEmbeddable: {\n element: selectedElement,\n state: \"active\"\n }\n });\n }\n }\n } else if (!event.ctrlKey && !event.altKey && !event.metaKey && !this.state.newElement && !this.state.selectionElement && !this.state.selectedElementsAreBeingDragged) {\n const shape = (0,_shapes__WEBPACK_IMPORTED_MODULE_31__.findShapeByKey)(event.key);\n\n if (shape) {\n if (this.state.activeTool.type !== shape) {\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"toolbar\", shape, `keyboard (${this.device.editor.isMobile ? \"mobile\" : \"desktop\"})`);\n }\n\n if (shape === \"arrow\" && this.state.activeTool.type === \"arrow\") {\n this.setState(prevState => ({\n currentItemArrowType: prevState.currentItemArrowType === _constants__WEBPACK_IMPORTED_MODULE_12__.ARROW_TYPE.sharp ? _constants__WEBPACK_IMPORTED_MODULE_12__.ARROW_TYPE.round : prevState.currentItemArrowType === _constants__WEBPACK_IMPORTED_MODULE_12__.ARROW_TYPE.round ? _constants__WEBPACK_IMPORTED_MODULE_12__.ARROW_TYPE.elbow : _constants__WEBPACK_IMPORTED_MODULE_12__.ARROW_TYPE.sharp\n }));\n }\n\n this.setActiveTool({\n type: shape\n });\n event.stopPropagation();\n } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.Q) {\n this.toggleLock(\"keyboard\");\n event.stopPropagation();\n }\n }\n\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.SPACE && gesture.pointers.size === 0) {\n isHoldingSpace = true;\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.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_28__.hasBackground)(this.state.activeTool.type) || selectedElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_28__.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.shiftKey && event.key.toLowerCase() === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.F) {\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (this.state.activeTool.type === \"selection\" && !selectedElements.length) {\n return;\n }\n\n if (this.state.activeTool.type === \"text\" || selectedElements.find(element => (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(element) || (0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.getBoundTextElement)(element, this.scene.getNonDeletedElementsMap()))) {\n event.preventDefault();\n this.setState({\n openPopup: \"fontFamily\"\n });\n }\n }\n\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.K && !event.altKey && !event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n if (this.state.activeTool.type === \"laser\") {\n this.setActiveTool({\n type: \"selection\"\n });\n } else {\n this.setActiveTool({\n type: \"laser\"\n });\n }\n\n return;\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_55__.jotaiStore.set(_ActiveConfirmDialog__WEBPACK_IMPORTED_MODULE_56__.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.onKeyUp = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(event => {\n var _a, _b, _c, _d;\n\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.SPACE) {\n if (this.state.viewModeEnabled) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n } else if (this.state.activeTool.type === \"selection\") {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.resetCursor)(this.interactiveCanvas);\n } else {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursorForShape)(this.interactiveCanvas, this.state);\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.makeNextSelectedElementIds)({}, this.state),\n selectedGroupIds: {},\n editingGroupId: null,\n activeEmbeddable: null\n });\n }\n\n isHoldingSpace = false;\n }\n\n if (!event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && !this.state.isBindingEnabled) {\n this.setState({\n isBindingEnabled: true\n });\n }\n\n if ((0,_keys__WEBPACK_IMPORTED_MODULE_26__.isArrowKey)(event.key)) {\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.bindOrUnbindLinearElements)(this.scene.getSelectedElements(this.state).filter(_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement), this.scene.getNonDeletedElementsMap(), this.scene.getNonDeletedElements(), this.scene, (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.isBindingEnabled)(this.state), (_b = (_a = this.state.selectedLinearElement) === null || _a === void 0 ? void 0 : _a.selectedPointsIndices) !== null && _b !== void 0 ? _b : []);\n this.setState({\n suggestedBindings: []\n });\n }\n\n if (!event.altKey) {\n if (this.flowChartNavigator.isExploring) {\n this.flowChartNavigator.clear();\n this.syncActionResult({\n storeAction: _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.CAPTURE\n });\n }\n }\n\n if (!event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n if (this.flowChartCreator.isCreatingChart) {\n if ((_c = this.flowChartCreator.pendingNodes) === null || _c === void 0 ? void 0 : _c.length) {\n this.scene.insertElements(this.flowChartCreator.pendingNodes);\n }\n\n const firstNode = (_d = this.flowChartCreator.pendingNodes) === null || _d === void 0 ? void 0 : _d[0];\n\n if (firstNode) {\n this.setState(prevState => ({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.makeNextSelectedElementIds)({\n [firstNode.id]: true\n }, prevState)\n }));\n\n if (!(0,_element_sizeHelpers__WEBPACK_IMPORTED_MODULE_27__.isElementCompletelyInViewport)([firstNode], this.canvas.width / window.devicePixelRatio, this.canvas.height / window.devicePixelRatio, {\n offsetLeft: this.state.offsetLeft,\n offsetTop: this.state.offsetTop,\n scrollX: this.state.scrollX,\n scrollY: this.state.scrollY,\n zoom: this.state.zoom\n }, this.scene.getNonDeletedElementsMap(), this.getEditorUIOffsets())) {\n this.scrollToContent(firstNode, {\n animate: true,\n duration: 300,\n canvasOffsets: this.getEditorUIOffsets()\n });\n }\n }\n\n this.flowChartCreator.clear();\n this.syncActionResult({\n storeAction: _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.CAPTURE\n });\n }\n }\n }); // We purposely widen the `tool` type so this helper can be called with\n // any tool without having to type check it\n\n this.isToolSupported = tool => {\n var _a;\n\n return ((_a = this.props.UIOptions.tools) === null || _a === void 0 ? void 0 : _a[tool]) !== false;\n };\n\n this.setActiveTool = tool => {\n var _a;\n\n if (!this.isToolSupported(tool.type)) {\n console.warn(`\"${tool.type}\" tool is disabled via \"UIOptions.canvasActions.tools.${tool.type}\"`);\n return;\n }\n\n const nextActiveTool = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.updateActiveTool)(this.state, tool);\n\n if (nextActiveTool.type === \"hand\") {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n } else if (!isHoldingSpace) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursorForShape)(this.interactiveCanvas, this.state);\n }\n\n if ((0,_utils__WEBPACK_IMPORTED_MODULE_34__.isToolIcon)(document.activeElement)) {\n this.focusContainer();\n }\n\n if (!(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElementType)(nextActiveTool.type)) {\n this.setState({\n suggestedBindings: []\n });\n }\n\n if (nextActiveTool.type === \"image\") {\n this.onImageAction({\n insertOnCanvasDirectly: (_a = tool.type === \"image\" && tool.insertOnCanvasDirectly) !== null && _a !== void 0 ? _a : false\n });\n }\n\n setTimeout(() => {\n this.setState(prevState => {\n const commonResets = {\n snapLines: prevState.snapLines.length ? [] : prevState.snapLines,\n originSnapOffset: null,\n activeEmbeddable: null\n };\n\n if (nextActiveTool.type === \"freedraw\") {\n this.store.shouldCaptureIncrement();\n }\n\n if (nextActiveTool.type !== \"selection\") {\n return Object.assign(Object.assign(Object.assign({}, prevState), {\n activeTool: nextActiveTool,\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.makeNextSelectedElementIds)(nextActiveTool.type === \"mermaid\" //zsviczian\n ? this.state.selectedElementIds : {}, prevState),\n selectedGroupIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.makeNextSelectedElementIds)({}, prevState),\n editingGroupId: null,\n multiElement: null\n }), commonResets);\n }\n\n return Object.assign(Object.assign(Object.assign({}, prevState), {\n activeTool: nextActiveTool\n }), commonResets);\n }); //zsviczian added timeout because button won't select otherwise\n });\n };\n\n this.setOpenDialog = dialogType => {\n this.setState({\n openDialog: dialogType\n });\n };\n\n this.setCursor = cursor => {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, cursor);\n };\n\n this.resetCursor = () => {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.resetCursor)(this.interactiveCanvas);\n };\n /**\n * returns whether user is making a gesture with >= 2 fingers (points)\n * on o touch screen (not on a trackpad). Currently only relates to Darwin\n * (iOS/iPadOS,MacOS), but may work on other devices in the future if\n * GestureEvent is standardized.\n */\n\n\n this.isTouchScreenMultiTouchGesture = () => {\n // we don't want to deselect when using trackpad, and multi-point gestures\n // only work on touch screens, so checking for >= pointers means we're on a\n // touchscreen\n return gesture.pointers.size >= 2;\n };\n\n this.getName = () => {\n return this.state.name || this.props.name || `${(0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"labels.untitled\")}-${(0,_utils__WEBPACK_IMPORTED_MODULE_34__.getDateTime)()}`;\n }; // fires only on Safari\n\n\n this.onGestureStart = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.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_51__.makeNextSelectedElementIds)({}, this.state),\n activeEmbeddable: null\n });\n }\n\n gesture.initialScale = this.state.zoom.value;\n }); // fires only on Safari\n\n this.onGestureChange = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.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_30__.getStateForZoom)({\n viewportX: this.lastViewportPosition.x,\n viewportY: this.lastViewportPosition.y,\n nextZoom: (0,_scene__WEBPACK_IMPORTED_MODULE_28__.getNormalizedZoom)(initialScale * event.scale)\n }, state)));\n }\n }); // fires only on Safari\n\n this.onGestureEnd = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.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_51__.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 autoEdit = true\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_44__.getBoundTextElement)(container, this.scene.getNonDeletedElementsMap());\n\n if (!boundTextElementToContainer) {\n shouldBindToContainer = true;\n }\n }\n\n let existingTextElement = null;\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (selectedElements.length === 1) {\n if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(selectedElements[0])) {\n existingTextElement = selectedElements[0];\n } else if (container) {\n existingTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.getBoundTextElement)(selectedElements[0], this.scene.getNonDeletedElementsMap());\n } else {\n existingTextElement = this.getTextElementAtPosition(sceneX, sceneY);\n }\n } else {\n existingTextElement = this.getTextElementAtPosition(sceneX, sceneY);\n }\n\n const fontFamily = (existingTextElement === null || existingTextElement === void 0 ? void 0 : existingTextElement.fontFamily) || this.state.currentItemFontFamily;\n const lineHeight = (existingTextElement === null || existingTextElement === void 0 ? void 0 : existingTextElement.lineHeight) || (0,_fonts__WEBPACK_IMPORTED_MODULE_49__.getLineHeight)(fontFamily);\n const fontSize = (0,_actions_actionProperties__WEBPACK_IMPORTED_MODULE_75__.getFontSize)(this.state.currentItemFontSize, this.state.zoom.value); //zsviczian\n\n if (!existingTextElement && shouldBindToContainer && container && !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isArrowElement)(container)) {\n const fontString = {\n fontSize,\n fontFamily\n };\n const minWidth = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.getApproxMinLineWidth)((0,_utils__WEBPACK_IMPORTED_MODULE_34__.getFontString)(fontString), lineHeight);\n const minHeight = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.getApproxMinLineHeight)(fontSize, lineHeight);\n const newHeight = Math.max(container.height, minHeight);\n const newWidth = Math.max(container.width, minWidth);\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(container, {\n height: newHeight,\n width: newWidth\n });\n sceneX = container.x + newWidth / 2;\n sceneY = container.y + newHeight / 2;\n\n if (parentCenterPosition) {\n parentCenterPosition = this.getTextWysiwygSnappedToCenterPosition(sceneX, sceneY, this.state, container);\n }\n }\n\n const topLayerFrame = this.getTopLayerFrameAtSceneCoords({\n x: sceneX,\n y: sceneY\n });\n /*const shouldWrapText = !shouldBindToContainer && //zsviczian\n this.lastPointerDownEvent?.pointerType === \"pen\";\n const [x1, , x2] = getVisibleSceneBounds(this.state); //zsviczian\n const maxTextWidth = Math.max(Math.min((x2 - x1) * 0.85, 800), 200); //zsviczian*/\n\n const element = existingTextElement ? existingTextElement : (0,_element__WEBPACK_IMPORTED_MODULE_16__.newTextElement)({\n x: parentCenterPosition ? parentCenterPosition.elementCenterX : sceneX,\n y: parentCenterPosition ? parentCenterPosition.elementCenterY : sceneY,\n strokeColor: this.state.currentItemStrokeColor,\n backgroundColor: this.state.currentItemBackgroundColor,\n fillStyle: this.state.currentItemFillStyle,\n strokeWidth: this.state.currentItemStrokeWidth,\n strokeStyle: this.state.currentItemStrokeStyle,\n roughness: this.state.currentItemRoughness,\n opacity: this.state.currentItemOpacity,\n text: \"\",\n rawText: \"\",\n fontSize,\n fontFamily,\n textAlign: parentCenterPosition ? \"center\" : this.state.currentItemTextAlign,\n verticalAlign: parentCenterPosition ? _constants__WEBPACK_IMPORTED_MODULE_12__.VERTICAL_ALIGN.MIDDLE : _constants__WEBPACK_IMPORTED_MODULE_12__.DEFAULT_VERTICAL_ALIGN,\n containerId: shouldBindToContainer ? container === null || container === void 0 ? void 0 : container.id : undefined,\n groupIds: (_a = container === null || container === void 0 ? void 0 : container.groupIds) !== null && _a !== void 0 ? _a : [],\n lineHeight,\n angle: (_b = container === null || container === void 0 ? void 0 : container.angle) !== null && _b !== void 0 ? _b : 0,\n frameId: topLayerFrame ? topLayerFrame.id : null\n /*...shouldWrapText //zsviczian\n ? {\n width: maxTextWidth,\n autoResize: false,\n }\n : {},*/\n\n });\n\n if (!existingTextElement && shouldBindToContainer && container) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(container, {\n boundElements: (container.boundElements || []).concat({\n type: \"text\",\n id: element.id\n })\n });\n }\n\n this.setState({\n editingTextElement: element\n });\n\n if (!existingTextElement) {\n if (container && shouldBindToContainer) {\n const containerIndex = this.scene.getElementIndex(container.id);\n this.scene.insertElementAtIndex(element, containerIndex + 1);\n } else {\n this.scene.insertElement(element);\n }\n }\n\n if (autoEdit || existingTextElement || container) {\n this.handleTextWysiwyg(element, {\n isExistingElement: !!existingTextElement\n });\n } else {\n this.setState({\n newElement: element,\n multiElement: null\n });\n }\n };\n\n this.debounceDoubleClickTimestamp = 0; //zsviczian\n\n this.handleCanvasDoubleClick = event => {\n var _a; // case: double-clicking with arrow/line tool selected would both create\n // text and enter multiElement mode\n\n\n if (this.state.multiElement) {\n return;\n }\n\n if ( //zsviczian - double click eraser\n this.state.penMode && (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_82__.allowDoubleTapEraser)() && ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a.pointerType) === \"touch\" && this.state.activeTool.type !== \"selection\") {\n const now = Date.now();\n\n if (now - this.debounceDoubleClickTimestamp < 200) {\n //handleCanvasDoubleClick click fires twice in case of touch.\n //Once from the onTouchStart event handler, once from the double click event handler\n return;\n }\n\n this.debounceDoubleClickTimestamp = now;\n this.updateScene(_actions_actionCanvas__WEBPACK_IMPORTED_MODULE_54__.actionToggleEraserTool.perform([], this.state));\n return;\n } // zsviczian - end\n // we should only be able to double click when mode is selection\n\n\n if (this.state.activeTool.type !== \"selection\") {\n return;\n }\n\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(selectedElements[0])) {\n if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && (!this.state.editingLinearElement || this.state.editingLinearElement.elementId !== selectedElements[0].id) && !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isElbowArrow)(selectedElements[0])) {\n this.store.shouldCaptureIncrement();\n this.setState({\n editingLinearElement: new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(selectedElements[0])\n });\n return;\n }\n }\n\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.resetCursor)(this.interactiveCanvas);\n let {\n x: sceneX,\n y: sceneY\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.viewportCoordsToSceneCoords)(event, this.state);\n const selectedGroupIds = (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getSelectedGroupIds)(this.state);\n\n if (selectedGroupIds.length > 0) {\n const hitElement = this.getElementAtPosition(sceneX, sceneY);\n const selectedGroupId = hitElement && (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getSelectedGroupIdForElement)(hitElement, this.state.selectedGroupIds);\n\n if (selectedGroupId) {\n this.store.shouldCaptureIncrement();\n this.setState(prevState => Object.assign(Object.assign({}, prevState), (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n editingGroupId: selectedGroupId,\n selectedElementIds: {\n [hitElement.id]: true\n }\n }, this.scene.getNonDeletedElements(), prevState, this)));\n return;\n }\n }\n\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.resetCursor)(this.interactiveCanvas);\n\n if (!event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && !this.state.viewModeEnabled) {\n const hitElement = this.getElementAtPosition(sceneX, sceneY);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeLikeElement)(hitElement)) {\n this.setState({\n activeEmbeddable: {\n element: hitElement,\n state: \"active\"\n }\n });\n return;\n }\n\n const container = this.getTextBindableContainerAtPosition(sceneX, sceneY);\n\n if (container) {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.hasBoundTextElement)(container) || !(0,_utils__WEBPACK_IMPORTED_MODULE_34__.isTransparent)(container.backgroundColor) || (0,_element_collision__WEBPACK_IMPORTED_MODULE_83__.hitElementItself)({\n x: sceneX,\n y: sceneY,\n element: container,\n shape: (0,_shapes__WEBPACK_IMPORTED_MODULE_31__.getElementShape)(container, this.scene.getNonDeletedElementsMap()),\n threshold: this.getElementHitThreshold()\n })) {\n const midPoint = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.getContainerCenter)(container, this.state, this.scene.getNonDeletedElementsMap());\n sceneX = midPoint.x;\n sceneY = midPoint.y;\n }\n }\n\n this.startTextEditing({\n sceneX,\n sceneY,\n insertAtParentCenter: !event.altKey,\n container\n });\n }\n };\n\n this.getElementLinkAtPosition = (scenePointer, hitElement) => {\n // Reversing so we traverse the elements in decreasing order\n // of z-index\n const elements = this.scene.getNonDeletedElements().slice().reverse();\n let hitElementIndex = Infinity;\n return elements.find((element, index) => {\n if (hitElement && element.id === hitElement.id) {\n hitElementIndex = index;\n }\n\n return element.link && index <= hitElementIndex && (0,_hyperlink_helpers__WEBPACK_IMPORTED_MODULE_87__.isPointHittingLink)(element, this.scene.getNonDeletedElementsMap(), this.state, (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(scenePointer.x, scenePointer.y), this.device.editor.isMobile);\n });\n };\n\n this.redirectToLink = (event, isTouchScreen) => {\n const draggedDistance = (0,_math__WEBPACK_IMPORTED_MODULE_98__.pointDistance)((0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(this.lastPointerDownEvent.clientX, this.lastPointerDownEvent.clientY), (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(this.lastPointerUpEvent.clientX, this.lastPointerUpEvent.clientY));\n\n if (!this.hitLinkElement || // For touch screen allow dragging threshold else strict check\n isTouchScreen && draggedDistance > _constants__WEBPACK_IMPORTED_MODULE_12__.DRAGGING_THRESHOLD || !isTouchScreen && draggedDistance !== 0) {\n return;\n }\n\n const lastPointerDownCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.viewportCoordsToSceneCoords)(this.lastPointerDownEvent, this.state);\n const elementsMap = this.scene.getNonDeletedElementsMap();\n const lastPointerDownHittingLinkIcon = (0,_hyperlink_helpers__WEBPACK_IMPORTED_MODULE_87__.isPointHittingLink)(this.hitLinkElement, elementsMap, this.state, (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(lastPointerDownCoords.x, lastPointerDownCoords.y), this.device.editor.isMobile);\n const lastPointerUpCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.viewportCoordsToSceneCoords)(this.lastPointerUpEvent, this.state);\n const lastPointerUpHittingLinkIcon = (0,_hyperlink_helpers__WEBPACK_IMPORTED_MODULE_87__.isPointHittingLink)(this.hitLinkElement, elementsMap, this.state, (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(lastPointerUpCoords.x, lastPointerUpCoords.y), this.device.editor.isMobile);\n\n if (lastPointerDownHittingLinkIcon && lastPointerUpHittingLinkIcon) {\n let url = this.hitLinkElement.link;\n\n if (url) {\n url = (0,_data_url__WEBPACK_IMPORTED_MODULE_46__.normalizeLink)(url);\n let customEvent;\n\n if (this.props.onLinkOpen) {\n customEvent = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.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_46__.isLocalLink)(url) ? \"_self\" : \"_blank\";\n const newWindow = window.open(undefined, target); // https://mathiasbynens.github.io/rel-noopener/\n\n if (newWindow) {\n newWindow.opener = null;\n newWindow.location = url;\n }\n }\n }\n }\n };\n\n this.getTopLayerFrameAtSceneCoords = sceneCoords => {\n const elementsMap = this.scene.getNonDeletedElementsMap();\n const frames = this.scene.getNonDeletedFramesLikes().filter(frame => (0,_frame__WEBPACK_IMPORTED_MODULE_50__.isCursorInFrame)(sceneCoords, frame, elementsMap));\n return frames.length ? frames[frames.length - 1] : null;\n };\n\n this.handleCanvasPointerMove = event => {\n var _a, _b;\n\n this.savePointer(event.clientX, event.clientY, this.state.cursorButton);\n this.lastPointerMoveEvent = event.nativeEvent;\n\n if (gesture.pointers.has(event.pointerId)) {\n gesture.pointers.set(event.pointerId, {\n x: event.clientX,\n y: event.clientY\n });\n }\n\n const initialScale = gesture.initialScale;\n\n if (gesture.pointers.size === 2 && gesture.lastCenter && initialScale && gesture.initialDistance) {\n const center = (0,_gesture__WEBPACK_IMPORTED_MODULE_22__.getCenter)(gesture.pointers);\n const deltaX = center.x - gesture.lastCenter.x;\n const deltaY = center.y - gesture.lastCenter.y;\n gesture.lastCenter = center;\n const distance = (0,_gesture__WEBPACK_IMPORTED_MODULE_22__.getDistance)(Array.from(gesture.pointers.values()));\n const scaleFactor = !this.state.allowPinchZoom && //zsviczian\n this.state.activeTool.type === \"freedraw\" && this.state.penMode ? 1 : distance / gesture.initialDistance;\n const nextZoom = scaleFactor ? (0,_scene__WEBPACK_IMPORTED_MODULE_28__.getNormalizedZoom)(initialScale * scaleFactor) : this.state.zoom.value;\n this.setState(state => {\n const zoomState = (0,_scene_zoom__WEBPACK_IMPORTED_MODULE_30__.getStateForZoom)({\n viewportX: center.x,\n viewportY: center.y,\n nextZoom\n }, state);\n this.translateCanvas({\n zoom: zoomState.zoom,\n // 2x multiplier is just a magic number that makes this work correctly\n // on touchscreen devices (note: if we get report that panning is slower/faster\n // than actual movement, consider swapping with devicePixelRatio)\n scrollX: zoomState.scrollX + 2 * (deltaX / nextZoom),\n scrollY: zoomState.scrollY + 2 * (deltaY / nextZoom),\n shouldCacheIgnoreZoom: true\n });\n });\n this.resetShouldCacheIgnoreZoomDebounced();\n } else {\n gesture.lastCenter = gesture.initialDistance = gesture.initialScale = null;\n }\n\n if (isHoldingSpace || isPanning || isDraggingScrollBar || (0,_appState__WEBPACK_IMPORTED_MODULE_10__.isHandToolActive)(this.state)) {\n return;\n }\n\n const isPointerOverScrollBars = (0,_scene_scrollbars__WEBPACK_IMPORTED_MODULE_85__.isOverScrollBars)(currentScrollBars, event.clientX - this.state.offsetLeft, event.clientY - this.state.offsetTop);\n const isOverScrollBar = isPointerOverScrollBars.isOverEither;\n const isPenFreedraw = this.state.activeTool.type === \"freedraw\" && event.pointerType === \"pen\"; //zsviczian\n\n if (!this.state.newElement && !this.state.selectionElement && !this.state.selectedElementsAreBeingDragged && !this.state.multiElement) {\n if (isOverScrollBar) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.resetCursor)(this.interactiveCanvas);\n } else if (isPenFreedraw && this.interactiveCanvas && (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_82__.hideFreedrawPenmodeCursor)()) {\n //zsviczian https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/1659\n this.interactiveCanvas.style.cursor = \"none\";\n } else {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursorForShape)(this.interactiveCanvas, this.state);\n }\n }\n\n const scenePointer = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.viewportCoordsToSceneCoords)(event, this.state);\n const {\n x: scenePointerX,\n y: scenePointerY\n } = scenePointer;\n\n if (!this.state.newElement && (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, {\n x: scenePointerX,\n y: scenePointerY\n }, event, this.scene.getNonDeletedElementsMap());\n this.setState(prevState => {\n const nextSnapLines = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.updateStable)(prevState.snapLines, snapLines);\n const nextOriginOffset = prevState.originSnapOffset ? (0,_utils__WEBPACK_IMPORTED_MODULE_34__.updateStable)(prevState.originSnapOffset, originOffset) : originOffset;\n\n if (prevState.snapLines === nextSnapLines && prevState.originSnapOffset === nextOriginOffset) {\n return null;\n }\n\n return {\n snapLines: nextSnapLines,\n originSnapOffset: nextOriginOffset\n };\n });\n } else if (!this.state.newElement && !this.state.selectedElementsAreBeingDragged && !this.state.selectionElement) {\n this.setState(prevState => {\n if (prevState.snapLines.length) {\n return {\n snapLines: []\n };\n }\n\n return null;\n });\n }\n\n if (this.state.editingLinearElement && !this.state.editingLinearElement.isDragging) {\n const editingLinearElement = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handlePointerMove(event, scenePointerX, scenePointerY, this, this.scene.getNonDeletedElementsMap());\n\n if (editingLinearElement && editingLinearElement !== this.state.editingLinearElement) {\n // Since we are reading from previous state which is not possible with\n // automatic batching in React 18 hence using flush sync to synchronously\n // update the state. Check https://github.com/excalidraw/excalidraw/pull/5508 for more details.\n (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.flushSync)(() => {\n this.setState({\n editingLinearElement\n });\n });\n }\n\n if ((editingLinearElement === null || editingLinearElement === void 0 ? void 0 : editingLinearElement.lastUncommittedPoint) != null) {\n this.maybeSuggestBindingAtCursor(scenePointer);\n } else {\n // causes stack overflow if not sync\n (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.flushSync)(() => {\n this.setState({\n suggestedBindings: []\n });\n });\n }\n }\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElementType)(this.state.activeTool.type)) {\n // Hovering with a selected tool or creating new linear element via click\n // and point\n const {\n newElement\n } = this.state;\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElement)(newElement, false)) {\n this.maybeSuggestBindingsForLinearElementAtCoords(newElement, [scenePointer], this.state.startBoundElement);\n } else {\n this.maybeSuggestBindingAtCursor(scenePointer);\n }\n }\n\n if (this.state.multiElement) {\n const {\n multiElement\n } = this.state;\n const {\n x: rx,\n y: ry\n } = multiElement;\n const {\n points,\n lastCommittedPoint\n } = multiElement;\n const lastPoint = points[points.length - 1];\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.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_98__.pointDistance)((0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(scenePointerX - rx, scenePointerY - ry), lastPoint) >= _constants__WEBPACK_IMPORTED_MODULE_12__.LINE_CONFIRM_THRESHOLD) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(multiElement, {\n points: [...points, (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(scenePointerX - rx, scenePointerY - ry)]\n }, false);\n } else {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.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_98__.pointDistance)((0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(scenePointerX - rx, scenePointerY - ry), lastCommittedPoint) < _constants__WEBPACK_IMPORTED_MODULE_12__.LINE_CONFIRM_THRESHOLD) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.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 }, false);\n } else {\n const [gridX, gridY] = (0,_snapping__WEBPACK_IMPORTED_MODULE_58__.getGridPoint)(scenePointerX, scenePointerY, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isElbowArrow)(multiElement) ? null : this.getEffectiveGridSize());\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,_shapes__WEBPACK_IMPORTED_MODULE_31__.isPathALoop)(points, this.state.zoom.value)) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n }\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isElbowArrow)(multiElement)) {\n (0,_element_routing__WEBPACK_IMPORTED_MODULE_95__.mutateElbowArrow)(multiElement, this.scene.getNonDeletedElementsMap(), [...points.slice(0, -1), (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(lastCommittedX + dxFromLastCommitted, lastCommittedY + dyFromLastCommitted)], undefined, undefined, {\n isDragging: true,\n informMutation: false\n });\n } else {\n // update last uncommitted point\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(multiElement, {\n points: [...points.slice(0, -1), (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(lastCommittedX + dxFromLastCommitted, lastCommittedY + dyFromLastCommitted)]\n }, false);\n } // in this path, we're mutating multiElement to reflect\n // how it will be after adding pointer position as the next point\n // trigger update here so that new element canvas renders again to reflect this\n\n\n this.triggerRender(false);\n }\n\n return;\n }\n\n const hasDeselectedButton = Boolean(event.buttons);\n\n if (hasDeselectedButton || this.state.activeTool.type !== \"selection\" && this.state.activeTool.type !== \"text\" && this.state.activeTool.type !== \"eraser\") {\n return;\n }\n\n const elements = this.scene.getNonDeletedElements();\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (selectedElements.length === 1 && !isOverScrollBar && !this.state.editingLinearElement) {\n // for linear elements, we'd like to prioritize point dragging over edge resizing\n // therefore, we update and check hovered point index first\n if (this.state.selectedLinearElement) {\n this.handleHoverSelectedLinearElement(this.state.selectedLinearElement, scenePointerX, scenePointerY);\n }\n\n if ((!this.state.selectedLinearElement || this.state.selectedLinearElement.hoverPointIndex === -1) && !(selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isElbowArrow)(selectedElements[0]))) {\n const elementWithTransformHandleType = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getElementWithTransformHandleType)(elements, this.state, scenePointerX, scenePointerY, this.state.zoom, event.pointerType, this.scene.getNonDeletedElementsMap(), this.device);\n\n if (elementWithTransformHandleType && elementWithTransformHandleType.transformHandleType) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCursorForResizingElement)(elementWithTransformHandleType));\n return;\n }\n }\n } else if (selectedElements.length > 1 && !isOverScrollBar) {\n const transformHandleType = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getTransformHandleTypeFromCoords)((0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(selectedElements), scenePointerX, scenePointerY, this.state.zoom, event.pointerType, this.device);\n\n if (transformHandleType) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCursorForResizingElement)({\n transformHandleType\n }));\n return;\n }\n }\n\n const hitElement = this.getElementAtPosition(scenePointer.x, scenePointer.y);\n this.hitLinkElement = this.getElementLinkAtPosition(scenePointer, hitElement);\n\n if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state)) {\n return;\n }\n\n if (this.hitLinkElement && !this.state.selectedElementIds[this.hitLinkElement.id]) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n (0,_components_hyperlink_Hyperlink__WEBPACK_IMPORTED_MODULE_45__.showHyperlinkTooltip)(this.hitLinkElement, this.state, this.scene.getNonDeletedElementsMap());\n\n if (this.props.onLinkHover) {\n this.props.onLinkHover(this.hitLinkElement, event);\n } //zsviczian\n\n } else {\n (0,_components_hyperlink_Hyperlink__WEBPACK_IMPORTED_MODULE_45__.hideHyperlinkToolip)();\n\n if (hitElement && (hitElement.link || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(hitElement)) && this.state.selectedElementIds[hitElement.id] && !this.state.contextMenu && !this.state.showHyperlinkPopup) {\n this.setState({\n showHyperlinkPopup: \"info\"\n });\n } else if (this.state.activeTool.type === \"text\") {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(hitElement) ? _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.TEXT : _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.CROSSHAIR);\n } else if (this.state.viewModeEnabled) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n } else if (isOverScrollBar) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.AUTO);\n } else if (this.state.selectedLinearElement) {\n this.handleHoverSelectedLinearElement(this.state.selectedLinearElement, scenePointerX, scenePointerY);\n } else if ( // if using cmd/ctrl, we're not dragging\n !event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n if ((hitElement || this.isHittingCommonBoundingBoxOfSelectedElements(scenePointer, selectedElements)) && !(hitElement === null || hitElement === void 0 ? void 0 : hitElement.locked)) {\n if (hitElement && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeLikeElement)(hitElement) && this.isIframeLikeElementCenter(hitElement, event, scenePointerX, scenePointerY)) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n this.setState({\n activeEmbeddable: {\n element: hitElement,\n state: \"hover\"\n }\n });\n } else {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.MOVE);\n\n if (((_b = this.state.activeEmbeddable) === null || _b === void 0 ? void 0 : _b.state) === \"hover\") {\n this.setState({\n activeEmbeddable: null\n });\n }\n }\n }\n } else {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.AUTO);\n }\n }\n };\n\n this.handleEraser = (event, pointerDownState, scenePointer) => {\n this.eraserTrail.addPointToPath(scenePointer.x, scenePointer.y);\n let didChange = false;\n const processedGroups = new Set();\n const nonDeletedElements = this.scene.getNonDeletedElements();\n\n const processElements = elements => {\n var _a;\n\n for (const element of elements) {\n if (element.locked) {\n return;\n }\n\n if (event.altKey) {\n if (this.elementsPendingErasure.delete(element.id)) {\n didChange = true;\n }\n } else if (!this.elementsPendingErasure.has(element.id)) {\n didChange = true;\n this.elementsPendingErasure.add(element.id);\n } // (un)erase groups atomically\n\n\n if (didChange && ((_a = element.groupIds) === null || _a === void 0 ? void 0 : _a.length)) {\n const shallowestGroupId = element.groupIds.at(-1);\n\n if (!processedGroups.has(shallowestGroupId)) {\n processedGroups.add(shallowestGroupId);\n const elems = (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(nonDeletedElements, shallowestGroupId);\n\n for (const elem of elems) {\n if (event.altKey) {\n this.elementsPendingErasure.delete(elem.id);\n } else {\n this.elementsPendingErasure.add(elem.id);\n }\n }\n }\n }\n }\n };\n\n const distance = (0,_math__WEBPACK_IMPORTED_MODULE_98__.pointDistance)((0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y), (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(scenePointer.x, scenePointer.y));\n const threshold = this.getElementHitThreshold();\n const p = Object.assign({}, pointerDownState.lastCoords);\n let samplingInterval = 0;\n\n while (samplingInterval <= distance) {\n const hitElements = this.getElementsAtPosition(p.x, p.y);\n processElements(hitElements); // Exit since we reached current point\n\n if (samplingInterval === distance) {\n break;\n } // Calculate next point in the line at a distance of sampling interval\n\n\n samplingInterval = Math.min(samplingInterval + threshold, distance);\n const distanceRatio = samplingInterval / distance;\n const nextX = (1 - distanceRatio) * p.x + distanceRatio * scenePointer.x;\n const nextY = (1 - distanceRatio) * p.y + distanceRatio * scenePointer.y;\n p.x = nextX;\n p.y = nextY;\n }\n\n pointerDownState.lastCoords.x = scenePointer.x;\n pointerDownState.lastCoords.y = scenePointer.y;\n\n if (didChange) {\n for (const element of this.scene.getNonDeletedElements()) {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(element) && (this.elementsPendingErasure.has(element.id) || this.elementsPendingErasure.has(element.containerId))) {\n if (event.altKey) {\n this.elementsPendingErasure.delete(element.id);\n this.elementsPendingErasure.delete(element.containerId);\n } else {\n this.elementsPendingErasure.add(element.id);\n this.elementsPendingErasure.add(element.containerId);\n }\n }\n }\n\n this.elementsPendingErasure = new Set(this.elementsPendingErasure);\n this.triggerRender();\n }\n }; // set touch moving for mobile context menu\n\n\n this.handleTouchMove = event => {\n invalidateContextMenu = true;\n };\n\n this.handleCanvasPointerDown = event => {\n var _a, _b;\n\n this.focusContainer(); //zsviczian\n\n this.maybeCleanupAfterMissingPointerUp(event.nativeEvent);\n this.maybeUnfollowRemoteUser();\n\n if (this.state.searchMatches) {\n this.setState(state => ({\n searchMatches: state.searchMatches.map(searchMatch => Object.assign(Object.assign({}, searchMatch), {\n focus: false\n }))\n }));\n _jotai__WEBPACK_IMPORTED_MODULE_55__.jotaiStore.set(_SearchMenu__WEBPACK_IMPORTED_MODULE_97__.searchItemInFocusAtom, null);\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\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.newElement && this.state.newElement.type === \"freedraw\") {\n const element = this.state.newElement;\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 newElement: null,\n editingTextElement: null,\n startBoundElement: null,\n suggestedBindings: [],\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.makeNextSelectedElementIds)(Object.keys(this.state.selectedElementIds).filter(key => key !== element.id).reduce((obj, key) => {\n obj[key] = this.state.selectedElementIds[key];\n return obj;\n }, {}), this.state)\n },\n storeAction: _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.UPDATE\n }));\n return;\n } // remove any active selection when we start to interact with canvas\n // (mainly, we care about removing selection outside the component which\n // would prevent our copy handling otherwise)\n\n\n const selection = document.getSelection();\n\n if (selection === null || selection === void 0 ? void 0 : selection.anchorNode) {\n selection.removeAllRanges();\n }\n\n this.maybeOpenContextMenuAfterPointerDownOnTouchDevices(event); //fires only once, if pen is detected, penMode is enabled\n //the user can disable this by toggling the penMode button\n\n if (!this.state.penDetected && event.pointerType === \"pen\") {\n this.setState(prevState => {\n return {\n penMode: true,\n penDetected: true\n };\n });\n }\n\n if (!this.device.isTouchScreen && [\"pen\", \"touch\"].includes(event.pointerType)) {\n this.device = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.updateObject)(this.device, {\n isTouchScreen: true\n });\n }\n\n if (isPanning) {\n return;\n }\n\n this.lastPointerDownEvent = event; // we must exit before we set `cursorButton` state and `savePointer`\n // else it will send pointer state & laser pointer events in collab when\n // panning\n\n /*if (this.handleCanvasPanUsingWheelOrSpaceDrag(event)) {\n return;\n }*/\n //zsviczian this broke on pointer down in onPointerUpdate\n\n this.setState({\n lastPointerDownWith: event.pointerType,\n cursorButton: \"down\"\n });\n this.savePointer(event.clientX, event.clientY, \"down\");\n\n if (this.handleCanvasPanUsingWheelOrSpaceDrag(event)) {\n return;\n } //zsviczian moved it here, because else pointer down in onPointerUpdate did not work\n\n\n if (event.button === _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.ERASER && this.state.activeTool.type !== _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.eraser) {\n this.setState({\n activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_34__.updateActiveTool)(this.state, {\n type: _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.eraser,\n lastActiveToolBeforeEraser: this.state.activeTool\n })\n }, () => {\n this.handleCanvasPointerDown(event);\n\n const onPointerUp = () => {\n unsubPointerUp();\n unsubCleanup === null || unsubCleanup === void 0 ? void 0 : unsubCleanup();\n\n if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state)) {\n this.setState({\n activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_34__.updateActiveTool)(this.state, Object.assign(Object.assign({}, this.state.activeTool.lastActiveTool || {\n type: _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.selection\n }), {\n lastActiveToolBeforeEraser: null\n }))\n });\n }\n };\n\n const unsubPointerUp = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, onPointerUp, {\n once: true\n });\n let unsubCleanup; // subscribe inside rAF lest it'd be triggered on the same pointerdown\n // if we start erasing while coming from blurred document since\n // we cleanup pointer events on focus\n\n requestAnimationFrame(() => {\n unsubCleanup = this.missingPointerEventCleanupEmitter.once(onPointerUp);\n });\n });\n return;\n } // only handle left mouse button or touch\n\n\n if (event.button !== _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.MAIN && event.button !== _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.TOUCH && event.button !== _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.ERASER) {\n return;\n } // don't select while panning\n\n\n if (gesture.pointers.size > 1) {\n return;\n } // State for the duration of a pointer interaction, which starts with a\n // pointerDown event, ends with a pointerUp event (or another pointerDown)\n\n\n const pointerDownState = this.initialPointerDownState(event);\n this.setState({\n selectedElementsAreBeingDragged: false\n });\n\n if (this.handleDraggingScrollBar(event, pointerDownState)) {\n return;\n }\n\n this.clearSelectionIfNotUsingSelection();\n this.updateBindingEnabledOnPointerMove(event);\n\n if (this.handleSelectionOnPointerDown(event, pointerDownState)) {\n return;\n }\n\n const allowOnPointerDown = !this.state.penMode || event.pointerType !== \"touch\" || this.state.activeTool.type === \"selection\" || this.state.activeTool.type === \"text\" || this.state.activeTool.type === \"image\";\n\n if (!allowOnPointerDown) {\n return;\n }\n\n if (this.state.activeTool.type === \"text\") {\n this.handleTextOnPointerDown(event, pointerDownState);\n } else if (this.state.activeTool.type === \"arrow\" || this.state.activeTool.type === \"line\") {\n this.handleLinearElementOnPointerDown(event, this.state.activeTool.type, pointerDownState);\n } else if (this.state.activeTool.type === \"image\") {\n // reset image preview on pointerdown\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.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 newElement: pendingImageElement,\n pendingImageElementId: null,\n multiElement: null\n });\n const {\n x,\n y\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.viewportCoordsToSceneCoords)(event, this.state);\n const frame = this.getTopLayerFrameAtSceneCoords({\n x,\n y\n });\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(pendingImageElement, {\n x,\n y,\n frameId: frame ? frame.id : null\n });\n } else if (this.state.activeTool.type === \"freedraw\") {\n this.handleFreeDrawElementOnPointerDown(event, this.state.activeTool.type, pointerDownState);\n } else if (this.state.activeTool.type === \"custom\") {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursorForShape)(this.interactiveCanvas, this.state);\n } else if (this.state.activeTool.type === _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.frame || this.state.activeTool.type === _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.magicframe) {\n this.createFrameElementOnPointerDown(pointerDownState, this.state.activeTool.type);\n } else if (this.state.activeTool.type === \"laser\") {\n this.laserTrails.startPath(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y);\n } else if (this.state.activeTool.type !== \"eraser\" && this.state.activeTool.type !== \"hand\" && this.state.activeTool.type !== \"mermaid\") {\n this.createGenericElementOnPointerDown(this.state.activeTool.type, pointerDownState);\n }\n\n (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.onPointerDown) === null || _b === void 0 ? void 0 : _b.call(_a, this.state.activeTool, pointerDownState);\n this.onPointerDownEmitter.trigger(this.state.activeTool, pointerDownState, event);\n\n if (this.state.activeTool.type === \"eraser\") {\n this.eraserTrail.startPath(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y);\n }\n\n const onPointerMove = this.onPointerMoveFromPointerDownHandler(pointerDownState);\n const onPointerUp = this.onPointerUpFromPointerDownHandler(pointerDownState);\n const onKeyDown = this.onKeyDownFromPointerDownHandler(pointerDownState);\n const onKeyUp = this.onKeyUpFromPointerDownHandler(pointerDownState);\n this.missingPointerEventCleanupEmitter.once(_event => onPointerUp(_event || event.nativeEvent));\n\n if (!this.state.viewModeEnabled || this.state.activeTool.type === \"laser\") {\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, onPointerMove);\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, onPointerUp);\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYDOWN, onKeyDown);\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYUP, onKeyUp);\n pointerDownState.eventListeners.onMove = onPointerMove;\n pointerDownState.eventListeners.onUp = onPointerUp;\n pointerDownState.eventListeners.onKeyUp = onKeyUp;\n pointerDownState.eventListeners.onKeyDown = onKeyDown;\n }\n };\n\n this.handleCanvasPointerUp = event => {\n var _a, _b;\n\n this.removePointer(event);\n this.lastPointerUpEvent = event;\n const scenePointer = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.viewportCoordsToSceneCoords)({\n clientX: event.clientX,\n clientY: event.clientY\n }, this.state);\n const clicklength = event.timeStamp - ((_b = (_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a.timeStamp) !== null && _b !== void 0 ? _b : 0);\n\n if (this.device.editor.isMobile && clicklength < 300) {\n const hitElement = this.getElementAtPosition(scenePointer.x, scenePointer.y);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeLikeElement)(hitElement) && this.isIframeLikeElementCenter(hitElement, event, scenePointer.x, scenePointer.y)) {\n this.handleEmbeddableCenterClick(hitElement);\n return;\n }\n }\n\n if (this.device.isTouchScreen) {\n const hitElement = this.getElementAtPosition(scenePointer.x, scenePointer.y);\n this.hitLinkElement = this.getElementLinkAtPosition(scenePointer, hitElement);\n }\n\n if (this.hitLinkElement && !this.state.selectedElementIds[this.hitLinkElement.id]) {\n if (clicklength < 300 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeLikeElement)(this.hitLinkElement) && !(0,_hyperlink_helpers__WEBPACK_IMPORTED_MODULE_87__.isPointHittingLinkIcon)(this.hitLinkElement, this.scene.getNonDeletedElementsMap(), this.state, (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(scenePointer.x, scenePointer.y))) {\n this.handleEmbeddableCenterClick(this.hitLinkElement);\n } else {\n this.redirectToLink(event, this.device.isTouchScreen);\n }\n } else if (this.state.viewModeEnabled) {\n this.setState({\n activeEmbeddable: null,\n selectedElementIds: {}\n });\n }\n };\n\n this.maybeOpenContextMenuAfterPointerDownOnTouchDevices = event => {\n // deal with opening context menu on touch devices\n if (event.pointerType === \"touch\") {\n invalidateContextMenu = false;\n\n if (touchTimeout) {\n // If there's already a touchTimeout, this means that there's another\n // touch down and we are doing another touch, so we shouldn't open the\n // context menu.\n invalidateContextMenu = true;\n } else {\n // open the context menu with the first touch's clientX and clientY\n // if the touch is not moving\n touchTimeout = window.setTimeout(() => {\n touchTimeout = 0;\n\n if (!invalidateContextMenu) {\n this.handleCanvasContextMenu(event);\n }\n }, _constants__WEBPACK_IMPORTED_MODULE_12__.TOUCH_CTX_MENU_TIMEOUT);\n }\n }\n };\n\n this.resetContextMenuTimer = () => {\n clearTimeout(touchTimeout);\n touchTimeout = 0;\n invalidateContextMenu = false;\n };\n /**\n * pointerup may not fire in certian cases (user tabs away...), so in order\n * to properly cleanup pointerdown state, we need to fire any hanging\n * pointerup handlers manually\n */\n\n\n this.maybeCleanupAfterMissingPointerUp = event => {\n lastPointerUp === null || lastPointerUp === void 0 ? void 0 : lastPointerUp();\n this.missingPointerEventCleanupEmitter.trigger(event).clear();\n }; // Returns whether the event is a panning\n\n\n this.handleCanvasPanUsingWheelOrSpaceDrag = event => {\n if (!(gesture.pointers.size <= 1 && (event.button === _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.WHEEL || event.button === _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.MAIN && isHoldingSpace || (0,_appState__WEBPACK_IMPORTED_MODULE_10__.isHandToolActive)(this.state) || //!isLastPointerActive added by zsviczian (but don't remember why....)\n this.state.viewModeEnabled && !(0,_appState__WEBPACK_IMPORTED_MODULE_10__.isLaserPointerActive)(this.state)))) {\n return false;\n }\n\n isPanning = true; // due to event.preventDefault below, container wouldn't get focus\n // automatically\n\n this.focusContainer(); // preventing defualt while text editing messes with cursor/focus\n\n if (!this.state.editingTextElement) {\n // necessary to prevent browser from scrolling the page if excalidraw\n // not full-page #4489\n //\n // as such, the above is broken when panning canvas while in wysiwyg\n event.preventDefault();\n }\n\n let nextPastePrevented = false;\n const isLinux = typeof window === undefined ? false : /Linux/.test(window.navigator.platform);\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRABBING);\n let {\n clientX: lastX,\n clientY: lastY\n } = event;\n const onPointerMove = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdatesThrottled)(event => {\n const deltaX = lastX - event.clientX;\n const deltaY = lastY - event.clientY;\n lastX = event.clientX;\n lastY = event.clientY;\n /*\n * Prevent paste event if we move while middle clicking on Linux.\n * See issue #1383.\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 /*\n * Reenable next paste in case of disabled middle click paste for\n * any reason:\n * - right click paste\n * - empty clipboard\n */\n\n\n const enableNextPaste = () => {\n setTimeout(() => {\n document.body.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.PASTE, preventNextPaste);\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, enableNextPaste);\n }, 100);\n };\n\n document.body.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.PASTE, preventNextPaste);\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, enableNextPaste);\n }\n\n this.translateCanvas({\n scrollX: this.state.scrollX - deltaX / this.state.zoom.value,\n scrollY: this.state.scrollY - deltaY / this.state.zoom.value\n });\n });\n const teardown = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(lastPointerUp = () => {\n lastPointerUp = null;\n isPanning = false;\n\n if (!isHoldingSpace) {\n if (this.state.viewModeEnabled) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n } else {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.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_51__.makeNextSelectedElementIds)({}, this.state),\n selectedGroupIds: {},\n editingGroupId: null,\n activeEmbeddable: null\n });\n }\n };\n /**\n * @returns whether the pointer event has been completely handled\n */\n\n\n this.handleSelectionOnPointerDown = (event, pointerDownState) => {\n var _a;\n\n if (this.state.activeTool.type === \"selection\") {\n const elements = this.scene.getNonDeletedElements();\n const elementsMap = this.scene.getNonDeletedElementsMap();\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (selectedElements.length === 1 && !this.state.editingLinearElement && !(this.state.selectedLinearElement && this.state.selectedLinearElement.hoverPointIndex !== -1)) {\n const elementWithTransformHandleType = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getElementWithTransformHandleType)(elements, this.state, pointerDownState.origin.x, pointerDownState.origin.y, this.state.zoom, event.pointerType, this.scene.getNonDeletedElementsMap(), this.device);\n\n if (elementWithTransformHandleType != null) {\n this.setState({\n resizingElement: elementWithTransformHandleType.element\n });\n pointerDownState.resize.handleType = elementWithTransformHandleType.transformHandleType;\n }\n } else if (selectedElements.length > 1) {\n pointerDownState.resize.handleType = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getTransformHandleTypeFromCoords)((0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(selectedElements), pointerDownState.origin.x, pointerDownState.origin.y, this.state.zoom, event.pointerType, this.device);\n }\n\n if (pointerDownState.resize.handleType) {\n pointerDownState.resize.isResizing = true;\n pointerDownState.resize.offset = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.tupleToCoors)((0,_element__WEBPACK_IMPORTED_MODULE_16__.getResizeOffsetXY)(pointerDownState.resize.handleType, selectedElements, elementsMap, pointerDownState.origin.x, pointerDownState.origin.y));\n\n if (selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(selectedElements[0]) && selectedElements[0].points.length === 2) {\n pointerDownState.resize.arrowDirection = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getResizeArrowDirection)(pointerDownState.resize.handleType, selectedElements[0]);\n }\n } else {\n if (this.state.selectedLinearElement) {\n const linearElementEditor = this.state.editingLinearElement || this.state.selectedLinearElement;\n const ret = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handlePointerDown(event, this, this.store, pointerDownState.origin, linearElementEditor, this.scene);\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_51__.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_51__.makeNextSelectedElementIds)({}, this.state),\n selectedGroupIds: {},\n editingGroupId: null,\n activeEmbeddable: null\n });\n } // Add hit element to selection. At this point if we're not holding\n // SHIFT the previously selected element(s) were deselected above\n // (make sure you use setState updater to use latest state)\n // With shift-selection, we want to make sure that frames and their containing\n // elements are not selected at the same time.\n\n\n if (!someHitElementIsSelected && !pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements) {\n this.setState(prevState => {\n const nextSelectedElementIds = Object.assign(Object.assign({}, prevState.selectedElementIds), {\n [hitElement.id]: true\n });\n const previouslySelectedElements = [];\n Object.keys(prevState.selectedElementIds).forEach(id => {\n const element = this.scene.getElement(id);\n element && previouslySelectedElements.push(element);\n }); // if hitElement is frame-like, deselect all of its elements\n // if they are selected\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(hitElement)) {\n (0,_frame__WEBPACK_IMPORTED_MODULE_50__.getFrameChildren)(previouslySelectedElements, hitElement.id).forEach(element => {\n delete nextSelectedElementIds[element.id];\n });\n } else if (hitElement.frameId) {\n // if hitElement is in a frame and its frame has been selected\n // disable selection for the given element\n if (nextSelectedElementIds[hitElement.frameId]) {\n delete nextSelectedElementIds[hitElement.id];\n }\n } else {\n // hitElement is neither a frame nor an element in a frame\n // but since hitElement could be in a group with some frames\n // this means selecting hitElement will have the frames selected as well\n // because we want to keep the invariant:\n // - frames and their elements are not selected at the same time\n // we deselect elements in those frames that were previously selected\n const groupIds = hitElement.groupIds;\n const framesInGroups = new Set(groupIds.flatMap(gid => (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(this.scene.getNonDeletedElements(), gid)).filter(element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(element)).map(frame => frame.id));\n\n if (framesInGroups.size > 0) {\n previouslySelectedElements.forEach(element => {\n if (element.frameId && framesInGroups.has(element.frameId)) {\n // deselect element and groups containing the element\n delete nextSelectedElementIds[element.id];\n element.groupIds.flatMap(gid => (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(this.scene.getNonDeletedElements(), gid)).forEach(element => {\n delete nextSelectedElementIds[element.id];\n });\n }\n });\n }\n }\n\n return Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n editingGroupId: prevState.editingGroupId,\n selectedElementIds: nextSelectedElementIds\n }, this.scene.getNonDeletedElements(), prevState, this)), {\n showHyperlinkPopup: hitElement.link || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(hitElement) ? \"info\" : false\n });\n });\n pointerDownState.hit.wasAddedToSelection = true;\n }\n }\n }\n\n this.setState({\n previousSelectedElementIds: this.state.selectedElementIds\n });\n }\n }\n\n return false;\n };\n\n this.handleTextOnPointerDown = (event, pointerDownState) => {\n // if we're currently still editing text, clicking outside\n // should only finalize it, not create another (irrespective\n // of state.activeTool.locked)\n if (this.state.editingTextElement) {\n return;\n }\n\n let sceneX = pointerDownState.origin.x;\n let sceneY = pointerDownState.origin.y;\n const element = this.getElementAtPosition(sceneX, sceneY, {\n includeBoundTextElement: true\n }); // FIXME\n\n let container = this.getTextBindableContainerAtPosition(sceneX, sceneY);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.hasBoundTextElement)(element)) {\n container = element;\n sceneX = element.x + element.width / 2;\n sceneY = element.y + element.height / 2;\n }\n\n this.startTextEditing({\n sceneX,\n sceneY,\n insertAtParentCenter: !event.altKey,\n container,\n autoEdit: false\n });\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.resetCursor)(this.interactiveCanvas);\n\n if (!this.state.activeTool.locked) {\n this.setState({\n activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_34__.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,_snapping__WEBPACK_IMPORTED_MODULE_58__.getGridPoint)(pointerDownState.origin.x, pointerDownState.origin.y, null);\n const topLayerFrame = this.getTopLayerFrameAtSceneCoords({\n x: gridX,\n y: gridY\n });\n const strokeOptions = this.state.currentStrokeOptions; //zsviczian\n\n const simulatePressure = (strokeOptions === null || strokeOptions === void 0 ? void 0 : strokeOptions.constantPressure //zsviczian\n ) ? false : event.pressure === 0.5;\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 points: [(0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(0, 0)],\n pressures: simulatePressure ? [] : [(strokeOptions === null || strokeOptions === void 0 ? void 0 : strokeOptions.constantPressure) ? 1 : event.pressure]\n })); //zsviczian\n\n if (strokeOptions === null || strokeOptions === void 0 ? void 0 : strokeOptions.highlighter) {\n this.scene.insertElement(element, 0);\n } else {\n this.scene.insertElement(element);\n }\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_51__.makeNextSelectedElementIds)(nextSelectedElementIds, prevState)\n };\n });\n const boundElement = (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getHoveredElementForBinding)(pointerDownState.origin, this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap());\n this.setState({\n newElement: element,\n startBoundElement: boundElement,\n suggestedBindings: []\n });\n };\n\n this.insertIframeElement = ({\n sceneX,\n sceneY,\n width,\n height\n }) => {\n var _a;\n\n const [gridX, gridY] = (0,_snapping__WEBPACK_IMPORTED_MODULE_58__.getGridPoint)(sceneX, sceneY, ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) ? null : this.getEffectiveGridSize());\n const element = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newIframeElement)({\n type: \"iframe\",\n x: gridX,\n y: gridY,\n strokeColor: \"transparent\",\n backgroundColor: \"transparent\",\n fillStyle: this.state.currentItemFillStyle,\n strokeWidth: this.state.currentItemStrokeWidth,\n strokeStyle: this.state.currentItemStrokeStyle,\n roughness: this.state.currentItemRoughness,\n roundness: this.getCurrentItemRoundness(\"iframe\"),\n opacity: this.state.currentItemOpacity,\n locked: false,\n width,\n height\n });\n this.scene.insertElement(element);\n return element;\n }; //create rectangle element with youtube top left on nearest grid point width / hight 640/360\n\n\n this.insertEmbeddableElement = ({\n sceneX,\n sceneY,\n link\n }) => {\n var _a;\n\n const [gridX, gridY] = (0,_snapping__WEBPACK_IMPORTED_MODULE_58__.getGridPoint)(sceneX, sceneY, ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) ? null : this.getEffectiveGridSize());\n const embedLink = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_35__.getEmbedLink)(link);\n\n if (!embedLink) {\n return;\n }\n\n if (embedLink.error instanceof URIError) {\n this.setToast({\n message: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"toast.unrecognizedLinkFormat\"),\n closable: true\n });\n }\n\n const element = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newEmbeddableElement)({\n type: \"embeddable\",\n x: gridX,\n y: gridY,\n strokeColor: \"transparent\",\n backgroundColor: \"transparent\",\n fillStyle: this.state.currentItemFillStyle,\n strokeWidth: this.state.currentItemStrokeWidth,\n strokeStyle: this.state.currentItemStrokeStyle,\n roughness: this.state.currentItemRoughness,\n roundness: this.getCurrentItemRoundness(\"embeddable\"),\n opacity: this.state.currentItemOpacity,\n locked: false,\n width: embedLink.intrinsicSize.w,\n height: embedLink.intrinsicSize.h,\n link\n });\n this.scene.insertElement(element);\n return element;\n };\n\n this.createImageElement = ({\n sceneX,\n sceneY,\n addToFrameUnderCursor = true\n }) => {\n var _a;\n\n const [gridX, gridY] = (0,_snapping__WEBPACK_IMPORTED_MODULE_58__.getGridPoint)(sceneX, sceneY, ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) ? null : this.getEffectiveGridSize());\n const topLayerFrame = addToFrameUnderCursor ? this.getTopLayerFrameAtSceneCoords({\n x: gridX,\n y: gridY\n }) : null;\n const element = (0,_element__WEBPACK_IMPORTED_MODULE_16__.newImageElement)({\n type: \"image\",\n x: gridX,\n y: gridY,\n strokeColor: this.state.currentItemStrokeColor,\n backgroundColor: this.state.currentItemBackgroundColor,\n fillStyle: this.state.currentItemFillStyle,\n strokeWidth: this.state.currentItemStrokeWidth,\n strokeStyle: this.state.currentItemStrokeStyle,\n roughness: this.state.currentItemRoughness,\n roundness: null,\n opacity: this.state.currentItemOpacity,\n locked: false,\n frameId: topLayerFrame ? topLayerFrame.id : null\n });\n return element;\n };\n\n this.handleLinearElementOnPointerDown = (event, elementType, pointerDownState) => {\n if (this.state.multiElement) {\n const {\n multiElement\n } = this.state; // finalize if completing a loop\n\n if (multiElement.type === \"line\" && (0,_shapes__WEBPACK_IMPORTED_MODULE_31__.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 } // Elbow arrows cannot be created by putting down points\n // only the start and end points can be defined\n\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isElbowArrow)(multiElement) && multiElement.points.length > 1) {\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_98__.pointDistance)((0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(pointerDownState.origin.x - rx, pointerDownState.origin.y - ry), lastCommittedPoint) < _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_51__.makeNextSelectedElementIds)(Object.assign(Object.assign({}, prevState.selectedElementIds), {\n [multiElement.id]: true\n }), prevState)\n })); // clicking outside commit zone → update reference for last committed\n // point\n\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(multiElement, {\n lastCommittedPoint: multiElement.points[multiElement.points.length - 1]\n });\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n } else {\n const [gridX, gridY] = (0,_snapping__WEBPACK_IMPORTED_MODULE_58__.getGridPoint)(pointerDownState.origin.x, pointerDownState.origin.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.getEffectiveGridSize());\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.\n If so, we want it to be null for start and \"arrow\" for end. If the linear item is not\n an arrow, we want it to be null for both. Otherwise, we want it to use the\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 = elementType === \"arrow\" ? (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newArrowElement)({\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.currentItemArrowType === _constants__WEBPACK_IMPORTED_MODULE_12__.ARROW_TYPE.round ? {\n type: _constants__WEBPACK_IMPORTED_MODULE_12__.ROUNDNESS.PROPORTIONAL_RADIUS\n } : // note, roundness doesn't have any effect for elbow arrows,\n // but it's best to set it to null as well\n null,\n startArrowhead,\n endArrowhead,\n locked: false,\n frameId: topLayerFrame ? topLayerFrame.id : null,\n elbowed: this.state.currentItemArrowType === _constants__WEBPACK_IMPORTED_MODULE_12__.ARROW_TYPE.elbow\n }) : (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 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_51__.makeNextSelectedElementIds)(nextSelectedElementIds, prevState)\n };\n });\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n points: [...element.points, (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(0, 0)]\n });\n const boundElement = (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getHoveredElementForBinding)(pointerDownState.origin, this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap(), (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isElbowArrow)(element));\n this.scene.insertElement(element);\n this.setState({\n newElement: element,\n startBoundElement: boundElement,\n suggestedBindings: []\n });\n }\n };\n\n this.createGenericElementOnPointerDown = (elementType, pointerDownState) => {\n var _a;\n\n const [gridX, gridY] = (0,_snapping__WEBPACK_IMPORTED_MODULE_58__.getGridPoint)(pointerDownState.origin.x, pointerDownState.origin.y, ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) ? null : this.getEffectiveGridSize());\n const topLayerFrame = this.getTopLayerFrameAtSceneCoords({\n x: gridX,\n y: gridY\n });\n const baseElementAttributes = {\n x: gridX,\n y: gridY,\n strokeColor: this.state.currentItemStrokeColor,\n backgroundColor: this.state.currentItemBackgroundColor,\n fillStyle: this.state.currentItemFillStyle,\n strokeWidth: this.state.currentItemStrokeWidth,\n strokeStyle: this.state.currentItemStrokeStyle,\n roughness: this.state.currentItemRoughness,\n opacity: this.state.currentItemOpacity,\n roundness: this.getCurrentItemRoundness(elementType),\n locked: false,\n frameId: topLayerFrame ? topLayerFrame.id : null\n };\n let element;\n\n if (elementType === \"embeddable\") {\n element = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newEmbeddableElement)(Object.assign({\n type: \"embeddable\"\n }, baseElementAttributes));\n } else {\n element = (0,_element__WEBPACK_IMPORTED_MODULE_16__.newElement)(Object.assign({\n type: elementType\n }, baseElementAttributes));\n }\n\n if (element.type === \"selection\") {\n this.setState({\n selectionElement: element\n });\n } else {\n this.scene.insertElement(element);\n this.setState({\n multiElement: null,\n newElement: element\n });\n }\n };\n\n this.createFrameElementOnPointerDown = (pointerDownState, type) => {\n var _a;\n\n const [gridX, gridY] = (0,_snapping__WEBPACK_IMPORTED_MODULE_58__.getGridPoint)(pointerDownState.origin.x, pointerDownState.origin.y, ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) ? null : this.getEffectiveGridSize());\n const constructorOpts = Object.assign(Object.assign({\n x: gridX,\n y: gridY,\n opacity: this.state.currentItemOpacity,\n locked: false\n }, _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE), this.state.frameColor ? {\n //zsviczian\n customData: {\n frameColor: this.state.frameColor\n }\n } : {});\n const frame = type === _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.magicframe ? (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newMagicFrameElement)(constructorOpts) : (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newFrameElement)(constructorOpts);\n this.scene.insertElement(frame);\n this.setState({\n multiElement: null,\n newElement: frame\n });\n };\n\n this.restoreReadyToEraseElements = () => {\n this.elementsPendingErasure = new Set();\n this.triggerRender();\n };\n\n this.eraseElements = () => {\n let didChange = false;\n const elements = this.scene.getElementsIncludingDeleted().map(ele => {\n if (this.elementsPendingErasure.has(ele.id) || ele.frameId && this.elementsPendingErasure.has(ele.frameId) || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(ele) && this.elementsPendingErasure.has(ele.containerId)) {\n didChange = true;\n return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(ele, {\n isDeleted: true\n });\n }\n\n return ele;\n });\n this.elementsPendingErasure = new Set();\n\n if (didChange) {\n this.store.shouldCaptureIncrement();\n this.scene.replaceAllElements(elements);\n }\n };\n\n this.initializeImage = async ({\n imageFile,\n imageElement: _imageElement,\n showCursorImagePreview = false\n }) => {\n var _a, _b, _c, _d; // at this point this should be guaranteed image file, but we do this check\n // to satisfy TS down the line\n\n\n if (!(0,_data_blob__WEBPACK_IMPORTED_MODULE_40__.isSupportedImageFile)(imageFile)) {\n throw new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.unsupportedFileType\"));\n }\n\n const mimeType = imageFile.type;\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.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_40__.SVGStringToFile)(await (0,_element_image__WEBPACK_IMPORTED_MODULE_41__.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_40__.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_40__.resizeImageFile)(imageFile, {\n maxWidthOrHeight: _constants__WEBPACK_IMPORTED_MODULE_12__.DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT\n });\n } catch (error) {\n console.error(\"Error trying to resizing image file on insertion\", error);\n }\n\n if (imageFile.size > _constants__WEBPACK_IMPORTED_MODULE_12__.MAX_ALLOWED_FILE_BYTES) {\n throw new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.fileTooBig\", {\n maxSize: `${Math.trunc(_constants__WEBPACK_IMPORTED_MODULE_12__.MAX_ALLOWED_FILE_BYTES / 1024 / 1024)}MB`\n }));\n }\n }\n\n if (showCursorImagePreview) {\n const dataURL = (_c = this.files[fileId]) === null || _c === void 0 ? void 0 : _c.dataURL; // optimization so that we don't unnecessarily resize the original\n // full-size file for cursor preview\n // (it's much faster to convert the resized dataURL to File)\n\n const resizedFile = dataURL && (0,_data_blob__WEBPACK_IMPORTED_MODULE_40__.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_40__.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.newElement) === null || _a === void 0 ? void 0 : _a.id) !== imageElement.id) {\n this.initializeImageDimensions(imageElement, true);\n }\n\n resolve(imageElement);\n } catch (error) {\n console.error(error);\n reject(new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageInsertError\")));\n } finally {\n if (!showCursorImagePreview) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.resetCursor)(this.interactiveCanvas);\n }\n }\n });\n };\n /**\n * inserts image into elements array and rerenders\n */\n\n\n this.insertImageElement = async (imageElement, imageFile, showCursorImagePreview) => {\n // we should be handling all cases upstream, but in case we forget to handle\n // a future case, let's throw here\n if (!this.isToolSupported(\"image\")) {\n this.setState({\n errorMessage: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageToolNotSupported\")\n });\n return;\n }\n\n this.scene.insertElement(imageElement);\n\n try {\n return await this.initializeImage({\n imageFile,\n imageElement,\n showCursorImagePreview\n });\n } catch (error) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(imageElement, {\n isDeleted: true\n });\n this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n this.setState({\n errorMessage: error.message || (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageInsertError\")\n });\n return null;\n }\n };\n\n this.setImagePreviewCursor = async imageFile => {\n // mustn't be larger than 128 px\n // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property\n const cursorImageSizePx = 96;\n let imagePreview;\n\n try {\n imagePreview = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_40__.resizeImageFile)(imageFile, {\n maxWidthOrHeight: cursorImageSizePx\n });\n } catch (e) {\n if (e.cause === \"UNSUPPORTED\") {\n throw new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.unsupportedFileType\"));\n }\n\n throw e;\n }\n\n let previewDataURL = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_40__.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_41__.loadHTMLImageElement)(previewDataURL);\n let height = Math.min(img.height, cursorImageSizePx);\n let width = height * (img.width / img.height);\n\n if (width > cursorImageSizePx) {\n width = cursorImageSizePx;\n height = width * (img.height / img.width);\n }\n\n const canvas = document.createElement(\"canvas\");\n canvas.height = height;\n canvas.width = width;\n const context = canvas.getContext(\"2d\");\n context.drawImage(img, 0, 0, width, height);\n previewDataURL = canvas.toDataURL(_constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.svg);\n }\n\n if (this.state.pendingImageElementId) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, `url(${previewDataURL}) 4 4, auto`);\n }\n };\n\n this.onImageAction = async ({\n insertOnCanvasDirectly\n }) => {\n try {\n const clientX = this.state.width / 2 + this.state.offsetLeft;\n const clientY = this.state.height / 2 + this.state.offsetTop;\n const {\n x,\n y\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.viewportCoordsToSceneCoords)({\n clientX,\n clientY\n }, this.state);\n const imageFile = await (0,_data_filesystem__WEBPACK_IMPORTED_MODULE_43__.fileOpen)({\n description: \"Image\",\n extensions: Object.keys(_constants__WEBPACK_IMPORTED_MODULE_12__.IMAGE_MIME_TYPES)\n });\n const imageElement = this.createImageElement({\n sceneX: x,\n sceneY: y,\n addToFrameUnderCursor: false\n });\n\n if (insertOnCanvasDirectly) {\n this.insertImageElement(imageElement, imageFile);\n this.initializeImageDimensions(imageElement);\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.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 newElement: null,\n activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_34__.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\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_41__.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_41__.getInitializedImageElements)(this.scene.getNonDeletedElements()), files = this.files) => {\n const uncachedImageElements = imageElements.filter(element => !element.isDeleted && !this.imageCache.has(element.fileId));\n\n if (uncachedImageElements.length) {\n const {\n updatedFiles\n } = await this.updateImageCache(uncachedImageElements, files);\n\n if (updatedFiles.size) {\n this.scene.triggerUpdate();\n }\n }\n };\n /** generally you should use `addNewImagesToImageCache()` directly if you need\n * to render new images. This is just a failsafe */\n\n\n this.scheduleImageRefresh = lodash_throttle__WEBPACK_IMPORTED_MODULE_42___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.getNonDeletedElements(), this.scene.getNonDeletedElementsMap());\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.getNonDeletedElements(), this.scene.getNonDeletedElementsMap(), (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isArrowElement)(linearElement) && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isElbowArrow)(linearElement));\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; // 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.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.TOUCH_START, this.onTouchStart);\n (_b = this.interactiveCanvas) === null || _b === void 0 ? void 0 : _b.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_40__.getFileFromEvent)(event);\n const {\n x: sceneX,\n y: sceneY\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.viewportCoordsToSceneCoords)(event, this.state);\n\n try {\n // if image tool not supported, don't show an error here and let it fall\n // through so we still support importing scene data from images. If no\n // scene data encoded, we'll show an error then\n if ((0,_data_blob__WEBPACK_IMPORTED_MODULE_40__.isSupportedImageFile)(file) && this.isToolSupported(\"image\")) {\n // first attempt to decode scene from the image if it's embedded\n // ---------------------------------------------------------------------\n if ((file === null || file === void 0 ? void 0 : file.type) === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.png || (file === null || file === void 0 ? void 0 : file.type) === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.svg) {\n try {\n const scene = await (0,_data__WEBPACK_IMPORTED_MODULE_13__.loadFromBlob)(file, this.state, this.scene.getElementsIncludingDeleted(), fileHandle);\n this.syncActionResult(Object.assign(Object.assign({}, scene), {\n appState: Object.assign(Object.assign({}, scene.appState || this.state), {\n isLoading: false\n }),\n replaceFiles: true,\n storeAction: _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.CAPTURE\n }));\n return;\n } catch (error) {\n // Don't throw for image scene daa\n if (error.name !== \"EncodingError\") {\n throw new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"alerts.couldNotLoadInvalidFile\"));\n }\n }\n } // if no scene is embedded or we fail for whatever reason, fall back\n // to importing as regular image\n // ---------------------------------------------------------------------\n\n\n const imageElement = this.createImageElement({\n sceneX,\n sceneY\n });\n this.insertImageElement(imageElement, file);\n this.initializeImageDimensions(imageElement);\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.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_40__.parseLibraryJSON)(libraryJSON);\n this.addElementsFromPasteOrLibrary({\n elements: (0,_data_library__WEBPACK_IMPORTED_MODULE_14__.distributeLibraryItemsOnSquareGrid)(libraryItems),\n position: event,\n files: null\n });\n } catch (error) {\n this.setState({\n errorMessage: error.message\n });\n }\n\n return;\n }\n\n if (file) {\n // Attempt to parse an excalidraw/excalidrawlib file\n await this.loadFileToCanvas(file, fileHandle);\n }\n\n if ((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) === null || _b === void 0 ? void 0 : _b.includes(\"text/plain\")) {\n const text = (_c = event.dataTransfer) === null || _c === void 0 ? void 0 : _c.getData(\"text\");\n\n if (text && (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_35__.embeddableURLValidator)(text, this.props.validateEmbeddable) && (/^(http|https):\\/\\/[^\\s/$.?#].[^\\s]*$/.test(text) || ((_d = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_35__.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_46__.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_40__.normalizeFile)(file);\n\n try {\n const elements = this.scene.getElementsIncludingDeleted();\n let ret;\n\n try {\n ret = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_40__.loadSceneOrLibraryFromBlob)(file, this.state, elements, fileHandle);\n } catch (error) {\n const imageSceneDataError = error instanceof _errors__WEBPACK_IMPORTED_MODULE_57__.ImageSceneDataError;\n\n if (imageSceneDataError && error.code === \"IMAGE_NOT_CONTAINS_SCENE_DATA\" && !this.isToolSupported(\"image\")) {\n this.setState({\n isLoading: false,\n errorMessage: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageToolNotSupported\")\n });\n return;\n }\n\n const errorMessage = imageSceneDataError ? (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"alerts.cannotRestoreFromImage\") : (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"alerts.couldNotLoadInvalidFile\");\n this.setState({\n isLoading: false,\n errorMessage\n });\n }\n\n if (!ret) {\n return;\n }\n\n if (ret.type === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.excalidraw) {\n // restore the fractional indices by mutating elements\n (0,_fractionalIndex__WEBPACK_IMPORTED_MODULE_86__.syncInvalidIndices)(elements.concat(ret.data.elements)); // update the store snapshot for old elements, otherwise we would end up with duplicated fractional indices on undo\n\n this.store.updateSnapshot((0,_utils__WEBPACK_IMPORTED_MODULE_34__.arrayToMap)(elements), this.state);\n this.setState({\n isLoading: true\n });\n this.syncActionResult(Object.assign(Object.assign({}, ret.data), {\n appState: Object.assign(Object.assign({}, ret.data.appState || this.state), {\n isLoading: false\n }),\n replaceFiles: true,\n storeAction: _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.CAPTURE\n }));\n } else if (ret.type === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.excalidrawlib) {\n await this.library.updateLibrary({\n libraryItems: file,\n merge: true,\n openLibraryMenu: true\n }).catch(error => {\n console.error(error);\n this.setState({\n errorMessage: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.importLibraryError\")\n });\n });\n }\n } catch (error) {\n this.setState({\n isLoading: false,\n errorMessage: error.message\n });\n }\n };\n\n this.handleCanvasContextMenu = event => {\n event.preventDefault();\n\n if ((\"pointerType\" in event.nativeEvent && event.nativeEvent.pointerType === \"touch\" || \"pointerType\" in event.nativeEvent && event.nativeEvent.pointerType === \"pen\" && // always allow if user uses a pen secondary button\n event.button !== _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.SECONDARY) && this.state.activeTool.type !== \"selection\") {\n return;\n }\n\n const {\n x,\n y\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.viewportCoordsToSceneCoords)(event, this.state);\n const element = this.getElementAtPosition(x, y, {\n preferSelected: true,\n includeLockedElements: true\n });\n const selectedElements = this.scene.getSelectedElements(this.state);\n const isHittingCommonBoundBox = this.isHittingCommonBoundingBoxOfSelectedElements({\n x,\n y\n }, selectedElements);\n const type = element || isHittingCommonBoundBox ? \"element\" : \"canvas\";\n const container = this.excalidrawContainerRef.current;\n const {\n top: offsetTop,\n left: offsetLeft\n } = container.getBoundingClientRect();\n const left = event.clientX - offsetLeft;\n const top = event.clientY - offsetTop;\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"contextMenu\", \"openContextMenu\", type);\n this.setState(Object.assign(Object.assign({}, element && !this.state.selectedElementIds[element.id] ? Object.assign(Object.assign(Object.assign({}, this.state), (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n editingGroupId: this.state.editingGroupId,\n selectedElementIds: {\n [element.id]: true\n }\n }, this.scene.getNonDeletedElements(), this.state, this)), {\n selectedLinearElement: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(element) ? new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(element) : null\n }) : this.state), {\n showHyperlinkPopup: false\n }), () => {\n this.setState({\n contextMenu: {\n top,\n left,\n items: this.getContextMenuItems(type)\n }\n });\n });\n };\n\n this.maybeDragNewGenericElement = (pointerDownState, event, informMutation = true) => {\n var _a, _b, _c, _d, _e;\n\n const selectionElement = this.state.selectionElement;\n const pointerCoords = pointerDownState.lastCoords;\n\n if (selectionElement && this.state.activeTool.type !== \"eraser\") {\n (0,_element__WEBPACK_IMPORTED_MODULE_16__.dragNewElement)({\n newElement: selectionElement,\n elementType: this.state.activeTool.type,\n originX: pointerDownState.origin.x,\n originY: pointerDownState.origin.y,\n x: pointerCoords.x,\n y: pointerCoords.y,\n width: (0,_utils__WEBPACK_IMPORTED_MODULE_34__.distance)(pointerDownState.origin.x, pointerCoords.x),\n height: (0,_utils__WEBPACK_IMPORTED_MODULE_34__.distance)(pointerDownState.origin.y, pointerCoords.y),\n shouldMaintainAspectRatio: (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldMaintainAspectRatio)(event),\n shouldResizeFromCenter: (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldResizeFromCenter)(event),\n zoom: this.state.zoom.value,\n informMutation\n });\n return;\n }\n\n const newElement = this.state.newElement;\n\n if (!newElement) {\n return;\n }\n\n let [gridX, gridY] = (0,_snapping__WEBPACK_IMPORTED_MODULE_58__.getGridPoint)(pointerCoords.x, pointerCoords.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.getEffectiveGridSize());\n const image = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isInitializedImageElement)(newElement) && ((_a = this.imageCache.get(newElement.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, [newElement]);\n const {\n snapOffset,\n snapLines\n } = (0,_snapping__WEBPACK_IMPORTED_MODULE_58__.snapNewElement)(newElement, this, event, {\n x: pointerDownState.originInGrid.x + ((_c = (_b = this.state.originSnapOffset) === null || _b === void 0 ? void 0 : _b.x) !== null && _c !== void 0 ? _c : 0),\n y: pointerDownState.originInGrid.y + ((_e = (_d = this.state.originSnapOffset) === null || _d === void 0 ? void 0 : _d.y) !== null && _e !== void 0 ? _e : 0)\n }, {\n x: gridX - pointerDownState.originInGrid.x,\n y: gridY - pointerDownState.originInGrid.y\n }, this.scene.getNonDeletedElementsMap());\n gridX += snapOffset.x;\n gridY += snapOffset.y;\n this.setState({\n snapLines\n });\n (0,_element__WEBPACK_IMPORTED_MODULE_16__.dragNewElement)({\n newElement,\n elementType: this.state.activeTool.type,\n originX: pointerDownState.originInGrid.x,\n originY: pointerDownState.originInGrid.y,\n x: gridX,\n y: gridY,\n width: (0,_utils__WEBPACK_IMPORTED_MODULE_34__.distance)(pointerDownState.originInGrid.x, gridX),\n height: (0,_utils__WEBPACK_IMPORTED_MODULE_34__.distance)(pointerDownState.originInGrid.y, gridY),\n shouldMaintainAspectRatio: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isImageElement)(newElement) ? !(0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldMaintainAspectRatio)(event) : (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldMaintainAspectRatio)(event),\n shouldResizeFromCenter: (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldResizeFromCenter)(event),\n zoom: this.state.zoom.value,\n widthAspectRatio: aspectRatio,\n originOffset: this.state.originSnapOffset,\n informMutation\n });\n this.setState({\n newElement\n }); // highlight elements that are to be added to frames on frames creation\n\n if (this.state.activeTool.type === _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.frame || this.state.activeTool.type === _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.magicframe) {\n this.setState({\n elementsToHighlight: (0,_frame__WEBPACK_IMPORTED_MODULE_50__.getElementsInResizingFrame)(this.scene.getNonDeletedElements(), newElement, this.state, this.scene.getNonDeletedElementsMap())\n });\n }\n };\n\n this.maybeHandleResize = (pointerDownState, event) => {\n const selectedElements = this.scene.getSelectedElements(this.state);\n const selectedFrames = selectedElements.filter(element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(element));\n const transformHandleType = pointerDownState.resize.handleType;\n\n if ( // Frames cannot be rotated.\n selectedFrames.length > 0 && transformHandleType === \"rotation\" || // Elbow arrows cannot be transformed (resized or rotated).\n selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isElbowArrow)(selectedElements[0])) {\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,_snapping__WEBPACK_IMPORTED_MODULE_58__.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.getEffectiveGridSize());\n const frameElementsOffsetsMap = new Map();\n selectedFrames.forEach(frame => {\n const elementsInFrame = (0,_frame__WEBPACK_IMPORTED_MODULE_50__.getFrameChildren)(this.scene.getNonDeletedElements(), frame.id);\n elementsInFrame.forEach(element => {\n frameElementsOffsetsMap.set(frame.id + element.id, {\n x: element.x - frame.x,\n y: element.y - frame.y\n });\n });\n }); // check needed for avoiding flickering when a key gets pressed\n // during dragging\n\n if (!this.state.selectedElementsAreBeingDragged) {\n const [gridX, gridY] = (0,_snapping__WEBPACK_IMPORTED_MODULE_58__.getGridPoint)(pointerCoords.x, pointerCoords.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.getEffectiveGridSize());\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_28__.getSelectedElements)(originalElements, this.state), this, event, dragOffset, transformHandleType);\n resizeX += snapOffset.x;\n resizeY += snapOffset.y;\n this.setState({\n snapLines\n });\n }\n\n if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.transformElements)(pointerDownState.originalElements, transformHandleType, selectedElements, this.scene.getElementsMapIncludingDeleted(), (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldRotateWithDiscreteAngle)(event), (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldResizeFromCenter)(event), selectedElements.some(element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isImageElement)(element)) ? !(0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldMaintainAspectRatio)(event) : (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldMaintainAspectRatio)(event), resizeX, resizeY, pointerDownState.resize.center.x, pointerDownState.resize.center.y)) {\n const suggestedBindings = (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getSuggestedBindingsForArrows)(selectedElements, this.scene.getNonDeletedElementsMap());\n const elementsToHighlight = new Set();\n selectedFrames.forEach(frame => {\n (0,_frame__WEBPACK_IMPORTED_MODULE_50__.getElementsInResizingFrame)(this.scene.getNonDeletedElements(), frame, this.state, this.scene.getNonDeletedElementsMap()).forEach(element => elementsToHighlight.add(element));\n });\n this.setState({\n elementsToHighlight: [...elementsToHighlight],\n suggestedBindings\n });\n return true;\n }\n\n return false;\n };\n\n this.getContextMenuItems = type => {\n const options = [];\n options.push(_actions__WEBPACK_IMPORTED_MODULE_5__.actionCopyAsPng, _actions__WEBPACK_IMPORTED_MODULE_5__.actionCopyAsSvg); // canvas contextMenu\n // -------------------------------------------------------------------------\n\n if (type === \"canvas\") {\n if (this.state.viewModeEnabled) {\n return [...options, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleGridMode, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleZenMode, _actions_actionToggleViewMode__WEBPACK_IMPORTED_MODULE_39__.actionToggleViewMode, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleStats, _actions_actionCanvas__WEBPACK_IMPORTED_MODULE_54__.actionToggleLaserPointer];\n }\n\n return [_actions_actionClipboard__WEBPACK_IMPORTED_MODULE_52__.actionPaste, _ContextMenu__WEBPACK_IMPORTED_MODULE_36__.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_36__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionSelectAll, _actions_actionElementLock__WEBPACK_IMPORTED_MODULE_48__.actionUnlockAllElements, _ContextMenu__WEBPACK_IMPORTED_MODULE_36__.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_39__.actionToggleViewMode, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleStats];\n } // element contextMenu\n // -------------------------------------------------------------------------\n\n\n options.push(_actions__WEBPACK_IMPORTED_MODULE_5__.copyText);\n\n if (this.state.viewModeEnabled) {\n return [_actions__WEBPACK_IMPORTED_MODULE_5__.actionCopy, ...options];\n }\n\n return [_ContextMenu__WEBPACK_IMPORTED_MODULE_36__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionCut, _actions__WEBPACK_IMPORTED_MODULE_5__.actionCopy, _actions_actionClipboard__WEBPACK_IMPORTED_MODULE_52__.actionPaste, _actions_actionFrame__WEBPACK_IMPORTED_MODULE_53__.actionSelectAllElementsInFrame, _actions_actionFrame__WEBPACK_IMPORTED_MODULE_53__.actionRemoveAllElementsFromFrame, _ContextMenu__WEBPACK_IMPORTED_MODULE_36__.CONTEXT_MENU_SEPARATOR, ...options, _ContextMenu__WEBPACK_IMPORTED_MODULE_36__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionCopyStyles, _actions__WEBPACK_IMPORTED_MODULE_5__.actionPasteStyles, _ContextMenu__WEBPACK_IMPORTED_MODULE_36__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionGroup, _actions_actionTextAutoResize__WEBPACK_IMPORTED_MODULE_90__.actionTextAutoResize, _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_36__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionAddToLibrary, _ContextMenu__WEBPACK_IMPORTED_MODULE_36__.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_36__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionFlipHorizontal, _actions__WEBPACK_IMPORTED_MODULE_5__.actionFlipVertical, _ContextMenu__WEBPACK_IMPORTED_MODULE_36__.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_36__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionDeleteSelected];\n };\n\n this.handleWheel = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(event => {\n // if not scrolling on canvas/wysiwyg, ignore\n if (!(event.target instanceof HTMLCanvasElement || event.target instanceof HTMLTextAreaElement || event.target instanceof HTMLIFrameElement)) {\n // prevent zooming the browser (but allow scrolling DOM)\n if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n event.preventDefault();\n }\n\n return;\n }\n\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_30__.getStateForZoom)({\n viewportX: this.lastViewportPosition.x,\n viewportY: this.lastViewportPosition.y,\n nextZoom: (0,_scene__WEBPACK_IMPORTED_MODULE_28__.getNormalizedZoom)(newZoom)\n }, state)), {\n shouldCacheIgnoreZoom: true\n }));\n this.resetShouldCacheIgnoreZoomDebounced();\n return;\n } // scroll horizontally when shift pressed\n\n\n if (event.shiftKey) {\n this.translateCanvas(({\n zoom,\n scrollX\n }) => ({\n // on Mac, shift+wheel tends to result in deltaX\n scrollX: scrollX - (deltaY || deltaX) / zoom.value\n }));\n return;\n }\n\n this.translateCanvas(({\n zoom,\n scrollX,\n scrollY\n }) => ({\n scrollX: scrollX - deltaX / zoom.value,\n scrollY: scrollY - deltaY / zoom.value\n }));\n });\n\n this.savePointer = (x, y, button) => {\n var _a, _b;\n\n if (!x || !y) {\n return;\n }\n\n const {\n x: sceneX,\n y: sceneY\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.viewportCoordsToSceneCoords)({\n clientX: x,\n clientY: y\n }, this.state);\n\n if (isNaN(sceneX) || isNaN(sceneY)) {// sometimes the pointer goes off screen\n }\n\n const pointer = {\n x: sceneX,\n y: sceneY,\n tool: this.state.activeTool.type === \"laser\" ? \"laser\" : \"pointer\"\n };\n (_b = (_a = this.props).onPointerUpdate) === null || _b === void 0 ? void 0 : _b.call(_a, {\n pointer,\n button,\n pointersMap: gesture.pointers\n });\n };\n\n this.resetShouldCacheIgnoreZoomDebounced = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.debounce)(() => {\n if (!this.unmounted) {\n this.setState({\n shouldCacheIgnoreZoom: false\n });\n }\n }, 300);\n\n this.updateDOMRect = cb => {\n var _a;\n\n if ((_a = this.excalidrawContainerRef) === null || _a === void 0 ? void 0 : _a.current) {\n const excalidrawContainer = this.excalidrawContainerRef.current;\n const {\n width,\n height,\n left: offsetLeft,\n top: offsetTop\n } = excalidrawContainer.getBoundingClientRect();\n const {\n width: currentWidth,\n height: currentHeight,\n offsetTop: currentOffsetTop,\n offsetLeft: currentOffsetLeft\n } = this.state;\n\n if (width === currentWidth && height === currentHeight && offsetLeft === currentOffsetLeft && offsetTop === currentOffsetTop) {\n if (cb) {\n cb();\n }\n\n return;\n } //zsviczian\n\n\n if (width === 0 || height === 0) {\n if (cb) {\n cb();\n }\n\n return;\n }\n\n this.setState({\n width,\n height,\n offsetLeft,\n offsetTop\n }, () => {\n cb && cb();\n });\n }\n };\n\n this.refresh = () => {\n this.setState(Object.assign({}, this.getCanvasOffsets()));\n };\n\n const defaultAppState = (0,_appState__WEBPACK_IMPORTED_MODULE_10__.getDefaultAppState)();\n const {\n excalidrawAPI,\n viewModeEnabled = false,\n zenModeEnabled = false,\n gridModeEnabled = false,\n objectsSnapModeEnabled = false,\n theme = defaultAppState.theme,\n initState,\n //zsviczian\n obsidianHostPlugin,\n //zsviczian\n name = `${(0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"labels.untitled\")}-${(0,_utils__WEBPACK_IMPORTED_MODULE_34__.getDateTime)()}`\n } = props;\n this.state = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaultAppState), {\n theme,\n isLoading: true\n }), this.getCanvasOffsets()), {\n viewModeEnabled,\n zenModeEnabled,\n objectsSnapModeEnabled,\n gridModeEnabled: gridModeEnabled !== null && gridModeEnabled !== void 0 ? gridModeEnabled : defaultAppState.gridModeEnabled,\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_99__.nanoid)();\n (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_82__.initializeObsidianUtils)(obsidianHostPlugin.deref()); //zsviczian\n\n this.library = new _data_library__WEBPACK_IMPORTED_MODULE_14__[\"default\"](this);\n this.actionManager = new _actions_manager__WEBPACK_IMPORTED_MODULE_7__.ActionManager(this.syncActionResult, () => this.state, () => this.scene.getElementsIncludingDeleted(), this);\n this.scene = new _scene_Scene__WEBPACK_IMPORTED_MODULE_29__[\"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 this.visibleElements = [];\n this.store = new _store__WEBPACK_IMPORTED_MODULE_76__.Store();\n this.history = new _history__WEBPACK_IMPORTED_MODULE_24__.History();\n\n if (excalidrawAPI) {\n const api = {\n updateScene: this.updateScene,\n updateLibrary: this.library.updateLibrary,\n addFiles: this.addFiles,\n resetScene: this.resetScene,\n getSceneElementsIncludingDeleted: this.getSceneElementsIncludingDeleted,\n history: {\n clear: this.resetHistory\n },\n scrollToContent: this.scrollToContent,\n zoomToFit: this.zoomToFit,\n startLineEditor: this.startLineEditor,\n getSceneElements: this.getSceneElements,\n getAppState: () => this.state,\n getFiles: () => this.files,\n getName: this.getName,\n registerAction: action => {\n this.actionManager.registerAction(action);\n },\n refresh: this.refresh,\n setToast: this.setToast,\n updateContainerSize: this.updateContainerSize,\n id: this.id,\n selectElements: this.selectElements,\n sendBackward: this.sendBackward,\n bringForward: this.bringForward,\n sendToBack: this.sendToBack,\n bringToFront: this.bringToFront,\n setMobileModeAllowed: this.setMobileModeAllowed,\n setActiveTool: this.setActiveTool,\n setCursor: this.setCursor,\n resetCursor: this.resetCursor,\n updateFrameRendering: this.updateFrameRendering,\n toggleSidebar: this.toggleSidebar,\n getHTMLIFrameElement: id => this.getHTMLIFrameElement(id),\n onChange: cb => this.onChangeEmitter.on(cb),\n onPointerDown: cb => this.onPointerDownEmitter.on(cb),\n onPointerUp: cb => this.onPointerUpEmitter.on(cb),\n onScrollChange: cb => this.onScrollChangeEmitter.on(cb),\n onUserFollow: cb => this.onUserFollowEmitter.on(cb)\n };\n\n if (typeof excalidrawAPI === \"function\") {\n excalidrawAPI(api);\n } else {\n console.error(\"excalidrawAPI should be a function!\");\n }\n }\n\n this.excalidrawContainerValue = {\n container: this.excalidrawContainerRef.current,\n id: this.id\n };\n this.fonts = new _fonts__WEBPACK_IMPORTED_MODULE_49__.Fonts({\n scene: this.scene\n });\n this.history = new _history__WEBPACK_IMPORTED_MODULE_24__.History();\n this.actionManager.registerAll(_actions_register__WEBPACK_IMPORTED_MODULE_8__.actions);\n this.actionManager.registerAction((0,_actions_actionHistory__WEBPACK_IMPORTED_MODULE_6__.createUndoAction)(this.history, this.store));\n this.actionManager.registerAction((0,_actions_actionHistory__WEBPACK_IMPORTED_MODULE_6__.createRedoAction)(this.history, this.store));\n }\n\n onWindowMessage(event) {\n if (event.origin !== \"https://player.vimeo.com\" && event.origin !== \"https://www.youtube.com\") {\n return;\n }\n\n let data = null;\n\n try {\n data = JSON.parse(event.data);\n } catch (e) {}\n\n if (!data) {\n return;\n }\n\n switch (event.origin) {\n case \"https://player.vimeo.com\":\n //Allowing for multiple instances of Excalidraw running in the window\n if (data.method === \"paused\") {\n let source = null;\n const iframes = document.body.querySelectorAll(\"iframe.excalidraw__embeddable\");\n\n if (!iframes) {\n break;\n }\n\n for (const iframe of iframes) {\n if (iframe.contentWindow === event.source) {\n source = iframe.contentWindow;\n }\n }\n\n source === null || source === void 0 ? void 0 : source.postMessage(JSON.stringify({\n method: data.value ? \"play\" : \"pause\",\n value: true\n }), \"*\");\n }\n\n break;\n\n case \"https://www.youtube.com\":\n if (data.event === \"infoDelivery\" && data.info && data.id && typeof data.info.playerState === \"number\") {\n const id = data.id;\n const playerState = data.info.playerState;\n\n if (Object.values(_constants__WEBPACK_IMPORTED_MODULE_12__.YOUTUBE_STATES).includes(playerState)) {\n YOUTUBE_VIDEO_STATES.set(id, playerState);\n }\n }\n\n break;\n }\n }\n\n cacheEmbeddableRef(element, ref) {\n if (ref) {\n this.iFrameRefs.set(element.id, ref);\n }\n }\n\n getHTMLIFrameElement(element) {\n //zsviczian\n if (typeof element === \"string\") {\n return this.iFrameRefs.get(element);\n }\n\n return this.iFrameRefs.get(element.id);\n }\n\n handleEmbeddableCenterClick(element) {\n var _a, _b, _c, _d;\n\n if (((_a = this.state.activeEmbeddable) === null || _a === void 0 ? void 0 : _a.element) === element && ((_b = this.state.activeEmbeddable) === null || _b === void 0 ? void 0 : _b.state) === \"active\") {\n return;\n } // The delay serves two purposes\n // 1. To prevent first click propagating to iframe on mobile,\n // else the click will immediately start and stop the video\n // 2. If the user double clicks the frame center to activate it\n // without the delay youtube will immediately open the video\n // in fullscreen mode\n\n\n setTimeout(() => {\n this.setState({\n activeEmbeddable: {\n element,\n state: \"active\"\n },\n selectedElementIds: {\n [element.id]: true\n },\n newElement: null,\n selectionElement: null\n });\n }, 100);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(element)) {\n return;\n }\n\n const iframe = this.getHTMLIFrameElement(element);\n\n if (!(iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow)) {\n return;\n }\n\n if (iframe.src.includes(\"youtube\")) {\n const state = YOUTUBE_VIDEO_STATES.get(element.id);\n\n if (!state) {\n YOUTUBE_VIDEO_STATES.set(element.id, _constants__WEBPACK_IMPORTED_MODULE_12__.YOUTUBE_STATES.UNSTARTED);\n iframe.contentWindow.postMessage(JSON.stringify({\n event: \"listening\",\n id: element.id\n }), \"*\");\n }\n\n switch (state) {\n case _constants__WEBPACK_IMPORTED_MODULE_12__.YOUTUBE_STATES.PLAYING:\n case _constants__WEBPACK_IMPORTED_MODULE_12__.YOUTUBE_STATES.BUFFERING:\n (_c = iframe.contentWindow) === null || _c === void 0 ? void 0 : _c.postMessage(JSON.stringify({\n event: \"command\",\n func: \"pauseVideo\",\n args: \"\"\n }), \"*\");\n break;\n\n default:\n (_d = iframe.contentWindow) === null || _d === void 0 ? void 0 : _d.postMessage(JSON.stringify({\n event: \"command\",\n func: \"playVideo\",\n args: \"\"\n }), \"*\");\n }\n }\n\n if (iframe.src.includes(\"player.vimeo.com\")) {\n iframe.contentWindow.postMessage(JSON.stringify({\n method: \"paused\" //video play/pause in onWindowMessage handler\n\n }), \"*\");\n }\n }\n\n isIframeLikeElementCenter(el, event, sceneX, sceneY) {\n var _a, _b;\n\n return el && !event.altKey && !event.shiftKey && !event.metaKey && !event.ctrlKey && (((_a = this.state.activeEmbeddable) === null || _a === void 0 ? void 0 : _a.element) !== el || ((_b = this.state.activeEmbeddable) === null || _b === void 0 ? void 0 : _b.state) === \"hover\" || !this.state.activeEmbeddable) && sceneX >= el.x + el.width / 3 && sceneX <= el.x + 2 * el.width / 3 && sceneY >= el.y + el.height / 3 && sceneY <= el.y + 2 * el.height / 3;\n }\n\n renderEmbeddables() {\n const scale = this.state.zoom.value;\n const normalizedWidth = this.state.width;\n const normalizedHeight = this.state.height;\n const embeddableElements = this.scene.getNonDeletedElements().filter(el => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(el) && this.embedsValidationStatus.get(el.id) === true || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(el));\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n children: embeddableElements.map(el => {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;\n\n const {\n x,\n y\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.sceneCoordsToViewportCoords)({\n sceneX: el.x,\n sceneY: el.y\n }, this.state);\n const isVisible = (0,_element_sizeHelpers__WEBPACK_IMPORTED_MODULE_27__.isElementInViewport)(el, normalizedWidth, normalizedHeight, this.state, this.scene.getNonDeletedElementsMap());\n const hasBeenInitialized = this.initializedEmbeds.has(el.id);\n\n if (isVisible && !hasBeenInitialized) {\n this.initializedEmbeds.add(el.id);\n }\n\n const shouldRender = isVisible || hasBeenInitialized;\n\n if (!shouldRender) {\n return null;\n }\n\n let src;\n const embedLink = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_35__.getEmbedLink)((0,_data_url__WEBPACK_IMPORTED_MODULE_46__.toValidURL)(el.link || \"\")); //zsviczian\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(el)) {\n src = null;\n const data = ((_b = (_a = el.customData) === null || _a === void 0 ? void 0 : _a.generationData) !== null && _b !== void 0 ? _b : this.magicGenerations.get(el.id)) || {\n status: \"error\",\n message: \"No generation data\",\n code: \"ERR_NO_GENERATION_DATA\"\n };\n\n if (data.status === \"done\") {\n const html = data.html;\n src = {\n intrinsicSize: {\n w: el.width,\n h: el.height\n },\n type: \"document\",\n srcdoc: () => {\n return html;\n }\n };\n } else if (data.status === \"pending\") {\n src = {\n intrinsicSize: {\n w: el.width,\n h: el.height\n },\n type: \"document\",\n srcdoc: () => {\n return (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_35__.createSrcDoc)(`\n <style>\n html, body {\n width: 100%;\n height: 100%;\n color: ${this.state.theme === _constants__WEBPACK_IMPORTED_MODULE_12__.THEME.DARK ? \"white\" : \"black\"};\n }\n body {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 1rem;\n }\n\n .Spinner {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: auto;\n margin-right: auto;\n }\n\n .Spinner svg {\n animation: rotate 1.6s linear infinite;\n transform-origin: center center;\n width: 40px;\n height: 40px;\n }\n\n .Spinner circle {\n stroke: currentColor;\n animation: dash 1.6s linear 0s infinite;\n stroke-linecap: round;\n }\n\n @keyframes rotate {\n 100% {\n transform: rotate(360deg);\n }\n }\n\n @keyframes dash {\n 0% {\n stroke-dasharray: 1, 300;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 150, 300;\n stroke-dashoffset: -200;\n }\n 100% {\n stroke-dasharray: 1, 300;\n stroke-dashoffset: -280;\n }\n }\n </style>\n <div class=\"Spinner\">\n <svg\n viewBox=\"0 0 100 100\"\n >\n <circle\n cx=\"50\"\n cy=\"50\"\n r=\"46\"\n stroke-width=\"8\"\n fill=\"none\"\n stroke-miter-limit=\"10\"\n />\n </svg>\n </div>\n <div>Generating...</div>\n `);\n }\n };\n } else {\n let message;\n\n if (data.code === \"ERR_GENERATION_INTERRUPTED\") {\n message = \"Generation was interrupted...\";\n } else {\n message = data.message || \"Generation failed\";\n }\n\n src = {\n intrinsicSize: {\n w: el.width,\n h: el.height\n },\n type: \"document\",\n srcdoc: () => {\n return (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_35__.createSrcDoc)(`\n <style>\n html, body {\n height: 100%;\n }\n body {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n color: ${_colors__WEBPACK_IMPORTED_MODULE_71__.COLOR_PALETTE.red[3]};\n }\n h1, h3 {\n margin-top: 0;\n margin-bottom: 0.5rem;\n }\n </style>\n <h1>Error!</h1>\n <h3>${message}</h3>\n `);\n }\n };\n }\n } else {\n src = embedLink; //zsviczian getEmbedLink(toValidURL(el.link || \"\"));\n }\n\n const isActive = ((_c = this.state.activeEmbeddable) === null || _c === void 0 ? void 0 : _c.element) === el && ((_d = this.state.activeEmbeddable) === null || _d === void 0 ? void 0 : _d.state) === \"active\";\n const isHovered = ((_e = this.state.activeEmbeddable) === null || _e === void 0 ? void 0 : _e.element) === el && ((_f = this.state.activeEmbeddable) === null || _f === void 0 ? void 0 : _f.state) === \"hover\";\n const isWebview = //zsviczian\n !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(el) && this.props.renderWebview && (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) !== \"document\" && !((_h = (_g = embedLink === null || embedLink === void 0 ? void 0 : embedLink.link) === null || _g === void 0 ? void 0 : _g.startsWith) === null || _h === void 0 ? void 0 : _h.call(_g, \"https://player.vimeo.com\")); // Modify the scale based on el.scale property\n\n const [xScale, yScale] = (_j = el.scale) !== null && _j !== void 0 ? _j : [1, 1]; //zsviczian\n\n const scaledTransform = `scale(${scale * xScale}, ${scale * yScale})`;\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(\"excalidraw__embeddable-container\", {\n \"is-hovered\": isHovered\n }),\n style: {\n transform: isVisible ? `translate(${x - this.state.offsetLeft}px, ${y - this.state.offsetTop}px) ${scaledTransform}` : \"none\",\n display: isVisible ? \"block\" : \"none\",\n opacity: (0,_renderer_renderElement__WEBPACK_IMPORTED_MODULE_81__.getRenderOpacity)(el, (0,_frame__WEBPACK_IMPORTED_MODULE_50__.getContainingFrame)(el, this.scene.getNonDeletedElementsMap()), this.elementsPendingErasure, null),\n [\"--embeddable-radius\"]: `${(0,_shapes__WEBPACK_IMPORTED_MODULE_31__.getCornerRadius)(Math.min(el.width, el.height), el) / xScale //zsviczian\n }px`\n }\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n //this is a hack that addresses isse with embedded excalidraw.com embeddable\n //https://github.com/excalidraw/excalidraw/pull/6691#issuecomment-1607383938\n\n /*ref={(ref) => {\n if (!this.excalidrawContainerRef.current) {\n return;\n }\n const container = this.excalidrawContainerRef.current;\n const sh = container.scrollHeight;\n const ch = container.clientHeight;\n if (sh !== ch) {\n container.style.height = `${sh}px`;\n setTimeout(() => {\n container.style.height = `100%`;\n });\n }\n }}*/\n className: \"excalidraw__embeddable-container__inner\",\n style: {\n width: isVisible ? `${el.width / xScale}px` : 0,\n height: isVisible ? `${el.height / yScale}px` : 0,\n transform: isVisible ? `rotate(${el.angle}rad)` : \"none\",\n pointerEvents: isActive ? _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.enabled : _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.disabled\n }\n }, {\n children: [isHovered && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: \"excalidraw__embeddable-hint\"\n }, {\n children: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"buttons.embeddableInteractionButton\")\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: \"excalidraw__embeddable__outer\",\n style: {\n padding: `${el.strokeWidth / (4 * el.scale[0])}px` //zsviczian MDEmbeddable round border cutoff issue\n\n }\n }, {\n children: (_m = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(el) ? (_l = (_k = this.props).renderEmbeddable) === null || _l === void 0 ? void 0 : _l.call(_k, el, this.state) //zsviczian\n : null) !== null && _m !== void 0 ? _m : isWebview ? //zsviczian\n (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"webview\", {\n ref: ref => this.cacheEmbeddableRef(el, ref),\n className: \"excalidraw__embeddable\",\n src: (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) === \"generic\" || (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) === \"video\" ? embedLink.link : \"\",\n title: \"Excalidraw Embedded Content\",\n allowFullScreen: true\n }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"iframe\", {\n ref: ref => this.cacheEmbeddableRef(el, ref),\n className: \"excalidraw__embeddable\",\n srcDoc: (src === null || src === void 0 ? void 0 : src.type) === \"document\" ? src.srcdoc(this.state.theme) : undefined,\n src: (src === null || src === void 0 ? void 0 : src.type) !== \"document\" ? (_o = src === null || src === void 0 ? void 0 : src.link) !== null && _o !== void 0 ? _o : \"\" : undefined,\n // https://stackoverflow.com/q/18470015\n scrolling: \"no\",\n referrerPolicy: \"no-referrer-when-downgrade\",\n title: \"Excalidraw Embedded Content\",\n allow: \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\",\n allowFullScreen: true,\n sandbox: `${((_p = src === null || src === void 0 ? void 0 : src.sandbox) === null || _p === void 0 ? void 0 : _p.allowSameOrigin) ? \"allow-same-origin\" : \"\"} allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-downloads`\n })\n }))]\n }))\n }), el.id);\n })\n });\n }\n\n toggleOverscrollBehavior(event) {\n // when pointer inside editor, disable overscroll behavior to prevent\n // panning to trigger history back/forward on MacOS Chrome\n document.documentElement.style.overscrollBehaviorX = event.type === \"pointerenter\" ? \"none\" : \"auto\";\n }\n\n render() {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;\n\n const selectedElements = this.scene.getSelectedElements(this.state);\n const {\n renderTopRightUI,\n renderCustomStats\n } = this.props;\n const sceneNonce = this.scene.getSceneNonce();\n const {\n elementsMap,\n visibleElements\n } = this.renderer.getRenderableElements({\n sceneNonce,\n zoom: this.state.zoom,\n offsetLeft: this.state.offsetLeft,\n offsetTop: this.state.offsetTop,\n scrollX: this.state.scrollX,\n scrollY: this.state.scrollY,\n height: this.state.height,\n width: this.state.width,\n editingTextElement: this.state.editingTextElement,\n newElementId: (_a = this.state.newElement) === null || _a === void 0 ? void 0 : _a.id,\n pendingImageElementId: this.state.pendingImageElementId\n });\n this.visibleElements = visibleElements;\n const allElementsMap = this.scene.getNonDeletedElementsMap();\n const isNewElementNotLinearOnTouchScreen = //zsviczian\n this.state.newElement && (!(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(this.state.newElement) || !this.device.isTouchScreen);\n const shouldBlockPointerEvents = this.state.selectionElement || isNewElementNotLinearOnTouchScreen || //zsviczian\n this.state.selectedElementsAreBeingDragged || this.state.resizingElement || this.state.activeTool.type === \"laser\" && // technically we can just test on this once we make it more safe\n this.state.cursorButton === \"down\";\n const firstSelectedElement = selectedElements[0]; //zsviczian\n\n const isHighlighter = (_d = (_c = (_b = this.state.newElement) === null || _b === void 0 ? void 0 : _b.customData) === null || _c === void 0 ? void 0 : _c.strokeOptions) === null || _d === void 0 ? void 0 : _d.highlighter;\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(\"excalidraw excalidraw-container\", {\n \"excalidraw--view-mode\": this.state.viewModeEnabled,\n \"excalidraw--mobile\": this.device.editor.isMobile || !(this.state.viewModeEnabled || this.state.zenModeEnabled) && this.state.trayModeEnabled //zsviczian\n\n }),\n style: Object.assign({\n //zsviczian\n [\"--ui-pointerEvents\"]: shouldBlockPointerEvents ? _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.disabled : _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.enabled\n }, this.state.dynamicStyle),\n ref: this.excalidrawContainerRef,\n onDrop: this.handleAppOnDrop,\n tabIndex: 0,\n onKeyDown: this.props.handleKeyboardGlobally ? undefined : this.onKeyDown,\n onPointerEnter: this.toggleOverscrollBehavior,\n onPointerLeave: this.toggleOverscrollBehavior\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(AppContext.Provider, Object.assign({\n value: this\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(AppPropsContext.Provider, Object.assign({\n value: this.props\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ExcalidrawContainerContext.Provider, Object.assign({\n value: this.excalidrawContainerValue\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(DeviceContext.Provider, Object.assign({\n value: this.device\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ExcalidrawSetAppStateContext.Provider, Object.assign({\n value: this.setAppState\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ExcalidrawAppStateContext.Provider, Object.assign({\n value: this.state\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(ExcalidrawElementsContext.Provider, Object.assign({\n value: this.scene.getNonDeletedElements()\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(ExcalidrawActionManagerContext.Provider, Object.assign({\n value: this.actionManager\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_LayerUI__WEBPACK_IMPORTED_MODULE_37__[\"default\"], Object.assign({\n canvas: this.canvas,\n appState: this.state,\n files: this.files,\n setAppState: this.setAppState,\n actionManager: this.actionManager,\n elements: this.scene.getNonDeletedElements(),\n onLockToggle: this.toggleLock,\n onPenModeToggle: this.togglePenMode,\n onHandToolToggle: this.onHandToolToggle,\n langCode: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.getLanguage)().code,\n renderTopRightUI: renderTopRightUI,\n renderCustomStats: renderCustomStats,\n showExitZenModeBtn: typeof ((_e = this.props) === null || _e === void 0 ? void 0 : _e.zenModeEnabled) === \"undefined\" && this.state.zenModeEnabled,\n UIOptions: this.props.UIOptions,\n onExportImage: this.onExportImage,\n renderWelcomeScreen: !this.state.isLoading && this.state.showWelcomeScreen && this.state.activeTool.type === \"selection\" && !this.state.zenModeEnabled && !this.scene.getElementsIncludingDeleted().length,\n app: this,\n isCollaborating: this.props.isCollaborating\n }, {\n children: this.props.children\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n className: \"excalidraw-textEditorContainer\"\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n className: \"excalidraw-contextMenuContainer\"\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n className: \"excalidraw-eye-dropper-container\"\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_SVGLayer__WEBPACK_IMPORTED_MODULE_67__.SVGLayer, {\n trails: [this.laserTrails, this.eraserTrail]\n }), selectedElements.length === 1 && this.state.showHyperlinkPopup && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_hyperlink_Hyperlink__WEBPACK_IMPORTED_MODULE_45__.Hyperlink, {\n element: firstSelectedElement,\n elementsMap: allElementsMap,\n setAppState: this.setAppState,\n onLinkOpen: this.props.onLinkOpen,\n setToast: this.setToast,\n updateEmbedValidationStatus: this.updateEmbedValidationStatus\n }, firstSelectedElement.id), this.props.aiEnabled !== false && selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isMagicFrameElement)(firstSelectedElement) && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_element_ElementCanvasButtons__WEBPACK_IMPORTED_MODULE_70__.ElementCanvasButtons, Object.assign({\n element: firstSelectedElement,\n elementsMap: elementsMap\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_MagicButton__WEBPACK_IMPORTED_MODULE_72__.ElementCanvasButton, {\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"labels.convertToCode\"),\n icon: _icons__WEBPACK_IMPORTED_MODULE_73__.MagicIcon,\n checked: false,\n onChange: () => this.onMagicFrameGenerate(firstSelectedElement, \"button\")\n })\n })), selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(firstSelectedElement) && ((_g = (_f = firstSelectedElement.customData) === null || _f === void 0 ? void 0 : _f.generationData) === null || _g === void 0 ? void 0 : _g.status) === \"done\" && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_element_ElementCanvasButtons__WEBPACK_IMPORTED_MODULE_70__.ElementCanvasButtons, Object.assign({\n element: firstSelectedElement,\n elementsMap: elementsMap\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_MagicButton__WEBPACK_IMPORTED_MODULE_72__.ElementCanvasButton, {\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"labels.copySource\"),\n icon: _icons__WEBPACK_IMPORTED_MODULE_73__.copyIcon,\n checked: false,\n onChange: () => this.onIframeSrcCopy(firstSelectedElement)\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_MagicButton__WEBPACK_IMPORTED_MODULE_72__.ElementCanvasButton, {\n title: \"Enter fullscreen\",\n icon: _icons__WEBPACK_IMPORTED_MODULE_73__.fullscreenIcon,\n checked: false,\n onChange: () => {\n const iframe = this.getHTMLIFrameElement(firstSelectedElement);\n\n if (iframe) {\n try {\n iframe.requestFullscreen();\n this.setState({\n activeEmbeddable: {\n element: firstSelectedElement,\n state: \"active\"\n },\n selectedElementIds: {\n [firstSelectedElement.id]: true\n },\n newElement: null,\n selectionElement: null\n });\n } catch (err) {\n console.warn(err);\n this.setState({\n errorMessage: \"Couldn't enter fullscreen\"\n });\n }\n }\n }\n })]\n })), this.state.toast !== null && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Toast__WEBPACK_IMPORTED_MODULE_38__.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_36__.ContextMenu, {\n items: this.state.contextMenu.items,\n top: this.state.contextMenu.top,\n left: this.state.contextMenu.left,\n actionManager: this.actionManager,\n onClose: callback => {\n this.setState({\n contextMenu: null\n }, () => {\n this.focusContainer();\n callback === null || callback === void 0 ? void 0 : callback();\n });\n }\n }), this.state.newElement && isHighlighter && //zsviczian\n (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_canvases_NewElementCanvas__WEBPACK_IMPORTED_MODULE_94__[\"default\"], {\n appState: this.state,\n scale: window.devicePixelRatio,\n rc: this.rc,\n elementsMap: elementsMap,\n allElementsMap: allElementsMap,\n renderConfig: {\n imageCache: this.imageCache,\n isExporting: false,\n renderGrid: false,\n canvasBackgroundColor: this.state.viewBackgroundColor,\n embedsValidationStatus: this.embedsValidationStatus,\n elementsPendingErasure: this.elementsPendingErasure,\n pendingFlowchartNodes: null,\n isHighlighterPenDrawing: isHighlighter //zsviczian\n\n }\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 elementsMap: elementsMap,\n allElementsMap: allElementsMap,\n visibleElements: visibleElements,\n sceneNonce: sceneNonce,\n selectionNonce: (_h = this.state.selectionElement) === null || _h === void 0 ? void 0 : _h.versionNonce,\n scale: window.devicePixelRatio,\n appState: this.state,\n renderConfig: {\n imageCache: this.imageCache,\n isExporting: false,\n renderGrid: (0,_snapping__WEBPACK_IMPORTED_MODULE_58__.isGridModeEnabled)(this),\n canvasBackgroundColor: this.state.viewBackgroundColor,\n embedsValidationStatus: this.embedsValidationStatus,\n elementsPendingErasure: this.elementsPendingErasure,\n pendingFlowchartNodes: this.flowChartCreator.pendingNodes,\n isHighlighterPenDrawing: isHighlighter //zsviczian\n\n }\n }), this.state.newElement && !isHighlighter && //zsviczian\n (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_canvases_NewElementCanvas__WEBPACK_IMPORTED_MODULE_94__[\"default\"], {\n appState: this.state,\n scale: window.devicePixelRatio,\n rc: this.rc,\n elementsMap: elementsMap,\n allElementsMap: allElementsMap,\n renderConfig: {\n imageCache: this.imageCache,\n isExporting: false,\n renderGrid: false,\n canvasBackgroundColor: this.state.viewBackgroundColor,\n embedsValidationStatus: this.embedsValidationStatus,\n elementsPendingErasure: this.elementsPendingErasure,\n pendingFlowchartNodes: null,\n isHighlighterPenDrawing: isHighlighter //zsviczian\n\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 elementsMap: elementsMap,\n visibleElements: visibleElements,\n allElementsMap: allElementsMap,\n selectedElements: selectedElements,\n sceneNonce: sceneNonce,\n selectionNonce: (_j = this.state.selectionElement) === null || _j === void 0 ? void 0 : _j.versionNonce,\n scale: window.devicePixelRatio,\n appState: this.state,\n device: this.device,\n renderInteractiveSceneCallback: this.renderInteractiveSceneCallback,\n handleCanvasRef: this.handleInteractiveCanvasRef,\n onContextMenu: this.handleCanvasContextMenu,\n onPointerMove: this.handleCanvasPointerMove,\n onPointerUp: this.handleCanvasPointerUp,\n onPointerCancel: this.removePointer,\n onTouchMove: this.handleTouchMove,\n onPointerDown: this.handleCanvasPointerDown,\n onDoubleClick: this.handleCanvasDoubleClick\n }), this.state.userToFollow && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_FollowMode_FollowMode__WEBPACK_IMPORTED_MODULE_74__[\"default\"], {\n width: this.state.width,\n height: this.state.height,\n userToFollow: this.state.userToFollow,\n onDisconnect: this.maybeUnfollowRemoteUser\n }), this.renderFrameNames(), ((_k = this.state.activeEmbeddable) === null || _k === void 0 ? void 0 : _k.state) === \"active\" && ( //zsviczian\n (_m = (_l = this.props).renderEmbeddableMenu) === null || _m === void 0 ? void 0 : _m.call(_l, this.state))]\n })), this.renderEmbeddables()]\n }))\n }))\n }))\n }))\n }))\n }))\n }))\n }));\n }\n\n setPlugins(plugins) {\n Object.assign(this.plugins, plugins);\n }\n\n async onMagicFrameGenerate(magicFrame, source) {\n var _a;\n\n const generateDiagramToCode = (_a = this.plugins.diagramToCode) === null || _a === void 0 ? void 0 : _a.generate;\n\n if (!generateDiagramToCode) {\n this.setState({\n errorMessage: \"No diagram to code plugin found\"\n });\n return;\n }\n\n const magicFrameChildren = (0,_frame__WEBPACK_IMPORTED_MODULE_50__.getElementsOverlappingFrame)(this.scene.getNonDeletedElements(), magicFrame).filter(el => !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isMagicFrameElement)(el));\n\n if (!magicFrameChildren.length) {\n if (source === \"button\") {\n this.setState({\n errorMessage: \"Cannot generate from an empty frame\"\n });\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"generate (no-children)\", \"d2c\");\n } else {\n this.setActiveTool({\n type: \"magicframe\"\n });\n }\n\n return;\n }\n\n const frameElement = this.insertIframeElement({\n sceneX: magicFrame.x + magicFrame.width + 30,\n sceneY: magicFrame.y,\n width: magicFrame.width,\n height: magicFrame.height\n });\n\n if (!frameElement) {\n return;\n }\n\n this.updateMagicGeneration({\n frameElement,\n data: {\n status: \"pending\"\n }\n });\n this.setState({\n selectedElementIds: {\n [frameElement.id]: true\n }\n });\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"generate (start)\", \"d2c\");\n\n try {\n const {\n html\n } = await generateDiagramToCode({\n frame: magicFrame,\n children: magicFrameChildren\n });\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"generate (success)\", \"d2c\");\n\n if (!html.trim()) {\n this.updateMagicGeneration({\n frameElement,\n data: {\n status: \"error\",\n code: \"ERR_OAI\",\n message: \"Nothing genereated :(\"\n }\n });\n return;\n }\n\n const parsedHtml = html.includes(\"<!DOCTYPE html>\") && html.includes(\"</html>\") ? html.slice(html.indexOf(\"<!DOCTYPE html>\"), html.indexOf(\"</html>\") + \"</html>\".length) : html;\n this.updateMagicGeneration({\n frameElement,\n data: {\n status: \"done\",\n html: parsedHtml\n }\n });\n } catch (error) {\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"generate (failed)\", \"d2c\");\n this.updateMagicGeneration({\n frameElement,\n data: {\n status: \"error\",\n code: \"ERR_OAI\",\n message: error.message || \"Unknown error during generation\"\n }\n });\n }\n }\n\n onIframeSrcCopy(element) {\n var _a, _b;\n\n if (((_b = (_a = element.customData) === null || _a === void 0 ? void 0 : _a.generationData) === null || _b === void 0 ? void 0 : _b.status) === \"done\") {\n (0,_clipboard__WEBPACK_IMPORTED_MODULE_11__.copyTextToSystemClipboard)(element.customData.generationData.html);\n this.setToast({\n message: \"copied to clipboard\",\n closable: false,\n duration: 1500\n });\n }\n }\n\n clearImageShapeCache(filesMap) {\n const files = filesMap !== null && filesMap !== void 0 ? filesMap : this.files;\n this.scene.getNonDeletedElements().forEach(element => {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isInitializedImageElement)(element) && files[element.fileId]) {\n this.imageCache.delete(element.fileId);\n _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_66__.ShapeCache[\"delete\"](element);\n }\n });\n }\n\n async componentDidMount() {\n var _a;\n\n this.unmounted = false;\n this.excalidrawContainerValue.container = this.excalidrawContainerRef.current;\n\n if (\"development\" === _constants__WEBPACK_IMPORTED_MODULE_12__.ENV.TEST || \"development\" !== \"production\") {\n const setState = this.setState.bind(this);\n Object.defineProperties(window.h, {\n state: {\n configurable: true,\n get: () => {\n return this.state;\n }\n },\n setState: {\n configurable: true,\n value: (...args) => {\n return this.setState(...args);\n }\n },\n app: {\n configurable: true,\n value: this\n },\n history: {\n configurable: true,\n value: this.history\n },\n store: {\n configurable: true,\n value: this.store\n },\n fonts: {\n configurable: true,\n value: this.fonts\n }\n });\n }\n\n this.store.onStoreIncrementEmitter.on(increment => {\n this.history.record(increment.elementsChange, increment.appStateChange);\n });\n this.scene.onUpdate(this.triggerRender);\n this.addEventListeners();\n\n if (this.props.autoFocus && this.excalidrawContainerRef.current) {\n this.focusContainer();\n }\n\n if ( // bounding rects don't work in tests so updating\n // the state on init would result in making the test enviro run\n // in mobile breakpoint (0 width/height), making everything fail\n !(0,_utils__WEBPACK_IMPORTED_MODULE_34__.isTestEnv)()) {\n this.refreshViewportBreakpoints();\n this.refreshEditorBreakpoints();\n }\n\n if (_constants__WEBPACK_IMPORTED_MODULE_12__.supportsResizeObserver && this.excalidrawContainerRef.current) {\n this.resizeObserver = new ResizeObserver(() => {\n this.refreshEditorBreakpoints();\n this.updateDOMRect();\n });\n (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.excalidrawContainerRef.current);\n }\n\n const searchParams = new URLSearchParams(window.location.search.slice(1));\n\n if (searchParams.has(\"web-share-target\")) {\n // Obtain a file that was shared via the Web Share Target API.\n this.restoreFileFromShare();\n } else {\n this.updateDOMRect(this.initializeScene);\n } // note that this check seems to always pass in localhost\n\n\n if ((0,_constants__WEBPACK_IMPORTED_MODULE_12__.isBrave)() && !(0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.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, _b;\n\n (_a = window.launchQueue) === null || _a === void 0 ? void 0 : _a.setConsumer(() => {});\n this.renderer.destroy();\n this.scene.destroy();\n this.scene = new _scene_Scene__WEBPACK_IMPORTED_MODULE_29__[\"default\"]();\n this.fonts = new _fonts__WEBPACK_IMPORTED_MODULE_49__.Fonts({\n scene: this.scene\n });\n this.renderer = new _scene_Renderer__WEBPACK_IMPORTED_MODULE_65__.Renderer(this.scene);\n this.files = {};\n this.imageCache.clear();\n (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();\n this.unmounted = true;\n this.removeEventListeners();\n this.library.destroy();\n this.laserTrails.stop();\n this.eraserTrail.stop();\n this.onChangeEmitter.clear();\n this.store.onStoreIncrementEmitter.clear();\n _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_66__.ShapeCache.destroy();\n _snapping__WEBPACK_IMPORTED_MODULE_58__.SnapCache.destroy();\n clearTimeout(touchTimeout);\n _scene__WEBPACK_IMPORTED_MODULE_28__.isSomeElementSelected.clearCache();\n _groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements.clearCache();\n touchTimeout = 0;\n document.documentElement.style.overscrollBehaviorX = \"\";\n document.body.removeChild((0,_Tooltip__WEBPACK_IMPORTED_MODULE_93__.getTooltipDiv)()); //clearRenderCache(); //zsviczian\n\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.clearEraserCanvasCache)(); //zsviczian\n\n this.interactiveCanvas = null; //zsviczian\n\n this.iFrameRefs.clear(); //zsviczian\n //@ts-ignore\n\n this.iFrameRefs = null; //zsviczian\n\n this.embedsValidationStatus.clear(); //zsviczian\n //@ts-ignore\n\n this.embedsValidationStatus = null; //zsviczian\n\n this.initializedEmbeds.clear(); //zsviczian\n //@ts-ignore\n\n this.initializedEmbeds = null; //zsviczian\n\n this.elementsPendingErasure.clear(); //zsviczian\n //@ts-ignore\n\n this.elementsPendingErasure = null; //zsviczian\n\n this.lastPointerDownEvent = null; //zsviczian\n\n this.lastPointerUpEvent = null; //zsviczian\n\n this.lastPointerMoveEvent = null; //zsviczian\n //@ts-ignore\n\n this.actionManager.app = null; //zsviczian\n\n this.actionManager.actions = {}; //zsviczian\n\n this.history.clear(); //zsviczian\n\n this.store.clear(); //zsviczian\n //@ts-ignore\n\n this.store = null; //zsviczian\n //@ts-ignore\n\n this.library = null; //zsviczian\n //@ts-ignore\n\n this.canvas = null; //zsviczian\n //@ts-ignore\n\n this.rc = null; //zsviczian\n //@ts-ignore\n\n this.excalidrawContainerRef.current = undefined; //zsviczian\n\n this.nearestScrollableContainer = undefined; //zsviczian\n\n this.excalidrawContainerValue = {\n container: null,\n id: \"unknown\"\n }; //zsviczian\n //@ts-ignore\n // this.laserTrails.terminate(); //zsviczian\n // this.eraserTrail.terminate(); //zsviczian\n\n /*\n Object.keys(this).forEach((key) => {\n //@ts-ignore\n delete this[key];\n });*/\n }\n\n removeEventListeners() {\n this.onRemoveEventListenersEmitter.trigger();\n }\n\n addEventListeners() {\n // remove first as we can add event listeners multiple times\n this.removeEventListeners(); // -------------------------------------------------------------------------\n // view+edit mode listeners\n // -------------------------------------------------------------------------\n\n if (this.props.handleKeyboardGlobally) {\n this.onRemoveEventListenersEmitter.once((0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYDOWN, this.onKeyDown, false));\n }\n\n this.onRemoveEventListenersEmitter.once((0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(this.excalidrawContainerRef.current, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.WHEEL, this.handleWheel, {\n passive: false\n }), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.MESSAGE, this.onWindowMessage, false), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, this.removePointer), // #3553\n (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.COPY, this.onCopy), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYUP, this.onKeyUp, {\n passive: true\n }), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(window, \"focus\", () => this.triggerRender(true), {\n passive: true\n }), //zsviczian\n (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, this.updateCurrentCursorPosition), // rerender text elements on font load to fix #637 && #1553\n // zsviczian In Obsidian this is not needed as I manage font load separately\n\n /*addEventListener(document.fonts, \"loadingdone\", (event) => {\n const loadedFontFaces = (event as FontFaceSetLoadEvent).fontfaces;\n this.fonts.onLoaded(loadedFontFaces);\n }),*/\n // Safari-only desktop pinch zoom\n (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.GESTURE_START, this.onGestureStart, false), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.GESTURE_CHANGE, this.onGestureChange, false), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.GESTURE_END, this.onGestureEnd, false), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.FOCUS, () => {\n this.maybeCleanupAfterMissingPointerUp(null); // browsers (chrome?) tend to free up memory a lot, which results\n // in canvas context being cleared. Thus re-render on focus.\n\n this.triggerRender(true);\n }));\n\n if (this.state.viewModeEnabled) {\n return;\n } // -------------------------------------------------------------------------\n // edit-mode listeners only\n // -------------------------------------------------------------------------\n\n\n this.onRemoveEventListenersEmitter.once((0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.FULLSCREENCHANGE, this.onFullscreenChange), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.PASTE, this.pasteFromClipboard), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.CUT, this.onCut), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.RESIZE, this.onResize, false), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.UNLOAD, this.onUnload, false), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.BLUR, this.onBlur, false), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(this.excalidrawContainerRef.current, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.WHEEL, this.handleWheel), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(this.excalidrawContainerRef.current, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.DRAG_OVER, this.disableEvent, false), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(this.excalidrawContainerRef.current, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.DROP, this.disableEvent, false));\n\n if (this.props.detectScroll) {\n this.onRemoveEventListenersEmitter.once((0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)((0,_utils__WEBPACK_IMPORTED_MODULE_34__.getNearestScrollableContainer)(this.excalidrawContainerRef.current), _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.SCROLL, this.onScroll));\n }\n }\n\n componentDidUpdate(prevProps, prevState) {\n var _a, _b, _c, _d, _e, _f;\n\n this.updateEmbeddables();\n const elements = this.scene.getElementsIncludingDeleted();\n const elementsMap = this.scene.getElementsMapIncludingDeleted();\n const nonDeletedElementsMap = this.scene.getNonDeletedElementsMap();\n\n if (!this.state.showWelcomeScreen && !elements.length) {\n this.setState({\n showWelcomeScreen: true\n });\n }\n\n if (prevProps.UIOptions.dockedSidebarBreakpoint !== this.props.UIOptions.dockedSidebarBreakpoint) {\n this.refreshEditorBreakpoints();\n }\n\n const hasFollowedPersonLeft = prevState.userToFollow && !this.state.collaborators.has(prevState.userToFollow.socketId);\n\n if (hasFollowedPersonLeft) {\n this.maybeUnfollowRemoteUser();\n }\n\n if (prevState.zoom.value !== this.state.zoom.value || prevState.scrollX !== this.state.scrollX || prevState.scrollY !== this.state.scrollY) {\n (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.onScrollChange) === null || _b === void 0 ? void 0 : _b.call(_a, this.state.scrollX, this.state.scrollY, this.state.zoom);\n this.onScrollChangeEmitter.trigger(this.state.scrollX, this.state.scrollY, this.state.zoom);\n }\n\n if (prevState.userToFollow !== this.state.userToFollow) {\n if (prevState.userToFollow) {\n this.onUserFollowEmitter.trigger({\n userToFollow: prevState.userToFollow,\n action: \"UNFOLLOW\"\n });\n }\n\n if (this.state.userToFollow) {\n this.onUserFollowEmitter.trigger({\n userToFollow: this.state.userToFollow,\n action: \"FOLLOW\"\n });\n }\n } // zsviczian\n\n\n if (this.state.highlightSearchResult && !this.debounceClearHighlightSearchResults && prevState.selectedElementIds !== this.state.selectedElementIds) {\n this.setState({\n highlightSearchResult: false\n });\n }\n\n if (Object.keys(this.state.selectedElementIds).length && (0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state)) {\n this.setState({\n activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_34__.updateActiveTool)(this.state, {\n type: \"selection\"\n })\n });\n }\n\n if (this.state.activeTool.type === \"eraser\" && prevState.theme !== this.state.theme) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setEraserCursor)(this.interactiveCanvas, this.state.theme);\n } // Hide hyperlink popup if shown when element type is not selection\n\n\n if (prevState.activeTool.type === \"selection\" && this.state.activeTool.type !== \"selection\" && this.state.showHyperlinkPopup) {\n this.setState({\n showHyperlinkPopup: false\n });\n }\n\n if (prevProps.langCode !== this.props.langCode) {\n this.updateLanguage();\n }\n\n if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(prevState) && !(0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state)) {\n this.eraserTrail.endPath();\n }\n\n if (prevProps.viewModeEnabled !== this.props.viewModeEnabled) {\n this.setState({\n viewModeEnabled: !!this.props.viewModeEnabled\n });\n }\n\n if (prevState.viewModeEnabled !== this.state.viewModeEnabled) {\n this.addEventListeners();\n this.deselectElements();\n }\n\n if (prevProps.zenModeEnabled !== this.props.zenModeEnabled) {\n this.setState({\n zenModeEnabled: !!this.props.zenModeEnabled\n });\n }\n\n if (prevProps.theme !== this.props.theme && this.props.theme) {\n this.setState({\n theme: this.props.theme\n });\n }\n\n (_c = this.excalidrawContainerRef.current) === null || _c === void 0 ? void 0 : _c.classList.toggle(\"theme--dark\", this.state.theme === _constants__WEBPACK_IMPORTED_MODULE_12__.THEME.DARK);\n\n if (this.state.editingLinearElement && !this.state.selectedElementIds[this.state.editingLinearElement.elementId]) {\n // defer so that the storeAction flag isn't reset via current update\n setTimeout(() => {\n // execute only if the condition still holds when the deferred callback\n // executes (it can be scheduled multiple times depending on how\n // many times the component renders)\n this.state.editingLinearElement && this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n });\n } // failsafe in case the state is being updated in incorrect order resulting\n // in the editingTextElement being now a deleted element\n\n\n if ((_d = this.state.editingTextElement) === null || _d === void 0 ? void 0 : _d.isDeleted) {\n this.setState({\n editingTextElement: null\n });\n }\n\n if (this.state.selectedLinearElement && !this.state.selectedElementIds[this.state.selectedLinearElement.elementId]) {\n // To make sure `selectedLinearElement` is in sync with `selectedElementIds`, however this shouldn't be needed once\n // we have a single API to update `selectedElementIds`\n this.setState({\n selectedLinearElement: null\n });\n }\n\n const {\n multiElement\n } = prevState;\n\n if (prevState.activeTool !== this.state.activeTool && multiElement != null && (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.isBindingEnabled)(this.state) && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElement)(multiElement, false)) {\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.maybeBindLinearElement)(multiElement, this.state, (0,_utils__WEBPACK_IMPORTED_MODULE_34__.tupleToCoors)(_element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.getPointAtIndexGlobalCoordinates(multiElement, -1, nonDeletedElementsMap)), this.scene.getNonDeletedElementsMap(), this.scene.getNonDeletedElements());\n }\n\n this.store.commit(elementsMap, this.state); // Do not notify consumers if we're still loading the scene. Among other\n // potential issues, this fixes a case where the tab isn't focused during\n // init, which would trigger onChange with empty elements, which would then\n // override whatever is in localStorage currently.\n\n if (!this.state.isLoading) {\n (_f = (_e = this.props).onChange) === null || _f === void 0 ? void 0 : _f.call(_e, elements, this.state, this.files);\n this.onChangeEmitter.trigger(elements, this.state, this.files);\n }\n }\n\n static resetTapTwice() {\n didTapTwice = false;\n } // TODO rewrite this to paste both text & images at the same time if\n // pasted data contains both\n\n\n async addElementsFromMixedContentPaste(mixedContent, {\n isPlainPaste,\n sceneX,\n sceneY\n }) {\n if (!isPlainPaste && mixedContent.some(node => node.type === \"imageUrl\") && this.isToolSupported(\"image\")) {\n const imageURLs = mixedContent.filter(node => node.type === \"imageUrl\").map(node => node.value);\n const responses = await Promise.all(imageURLs.map(async url => {\n try {\n return {\n file: await (0,_data_blob__WEBPACK_IMPORTED_MODULE_40__.ImageURLToFile)(url)\n };\n } catch (error) {\n let errorMessage = error.message;\n\n if (error.cause === \"FETCH_ERROR\") {\n errorMessage = (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.failedToFetchImage\");\n } else if (error.cause === \"UNSUPPORTED\") {\n errorMessage = (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.unsupportedFileType\");\n }\n\n return {\n errorMessage\n };\n }\n }));\n let y = sceneY;\n let firstImageYOffsetDone = false;\n const nextSelectedIds = {};\n\n for (const response of responses) {\n if (response.file) {\n const imageElement = this.createImageElement({\n sceneX,\n sceneY: y\n });\n const initializedImageElement = await this.insertImageElement(imageElement, response.file);\n\n if (initializedImageElement) {\n // vertically center first image in the batch\n if (!firstImageYOffsetDone) {\n firstImageYOffsetDone = true;\n y -= initializedImageElement.height / 2;\n } // hack to reset the `y` coord because we vertically center during\n // insertImageElement\n\n\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(initializedImageElement, {\n y\n }, false);\n y = imageElement.y + imageElement.height + 25;\n nextSelectedIds[imageElement.id] = true;\n }\n }\n }\n\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.makeNextSelectedElementIds)(nextSelectedIds, this.state)\n });\n const error = responses.find(response => !!response.errorMessage);\n\n if (error && error.errorMessage) {\n this.setState({\n errorMessage: error.errorMessage\n });\n }\n } else {\n const textNodes = mixedContent.filter(node => node.type === \"text\");\n\n if (textNodes.length) {\n this.addTextFromPaste(textNodes.map(node => node.value).join(\"\\n\\n\"), isPlainPaste);\n }\n }\n }\n\n addTextFromPaste(text, isPlainPaste = false) {\n const {\n x,\n y\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.viewportCoordsToSceneCoords)({\n clientX: this.lastViewportPosition.x,\n clientY: this.lastViewportPosition.y\n }, this.state);\n const textElementProps = {\n x,\n y,\n strokeColor: this.state.currentItemStrokeColor,\n backgroundColor: this.state.currentItemBackgroundColor,\n fillStyle: this.state.currentItemFillStyle,\n strokeWidth: this.state.currentItemStrokeWidth,\n strokeStyle: this.state.currentItemStrokeStyle,\n roundness: null,\n roughness: this.state.currentItemRoughness,\n opacity: this.state.currentItemOpacity,\n text,\n rawText: text,\n fontSize: (0,_actions_actionProperties__WEBPACK_IMPORTED_MODULE_75__.getFontSize)(this.state.currentItemFontSize, this.state.zoom.value),\n fontFamily: this.state.currentItemFontFamily,\n textAlign: _constants__WEBPACK_IMPORTED_MODULE_12__.DEFAULT_TEXT_ALIGN,\n verticalAlign: _constants__WEBPACK_IMPORTED_MODULE_12__.DEFAULT_VERTICAL_ALIGN,\n locked: false\n };\n const fontString = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.getFontString)({\n fontSize: textElementProps.fontSize,\n fontFamily: textElementProps.fontFamily\n });\n const lineHeight = (0,_fonts__WEBPACK_IMPORTED_MODULE_49__.getLineHeight)(textElementProps.fontFamily);\n const [x1,, x2] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_91__.getVisibleSceneBounds)(this.state); // long texts should not go beyond 800 pixels in width nor should it go below 200 px\n\n const maxTextWidth = Math.max(Math.min((x2 - x1) * 0.5, 800), 200);\n const LINE_GAP = 10;\n let currentY = y;\n const lines = isPlainPaste ? [text] : text.split(\"\\n\");\n const textElements = lines.reduce((acc, line, idx) => {\n var _a;\n\n const originalText = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.normalizeText)(line).trim();\n\n if (originalText.length) {\n const topLayerFrame = this.getTopLayerFrameAtSceneCoords({\n x,\n y: currentY\n });\n let metrics = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.measureText)(originalText, fontString, lineHeight);\n const isTextUnwrapped = metrics.width > maxTextWidth;\n const text = isTextUnwrapped ? (0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.wrapText)(originalText, fontString, maxTextWidth) : originalText;\n metrics = isTextUnwrapped ? (0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.measureText)(text, fontString, lineHeight) : metrics;\n const startX = x - metrics.width / 2;\n const startY = currentY - metrics.height / 2;\n const element = (0,_element__WEBPACK_IMPORTED_MODULE_16__.newTextElement)(Object.assign(Object.assign({}, textElementProps), {\n x: startX,\n y: startY,\n text,\n rawText: originalText,\n //zsviczian\n originalText,\n lineHeight,\n autoResize: !isTextUnwrapped,\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_44__.getLineHeightInPx)(textElementProps.fontSize, lineHeight) + LINE_GAP;\n }\n }\n\n return acc;\n }, []);\n\n if (textElements.length === 0) {\n return;\n }\n\n this.scene.insertElements(textElements);\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.makeNextSelectedElementIds)(Object.fromEntries(textElements.map(el => [el.id, true])), this.state)\n });\n\n if (!isPlainPaste && textElements.length > 1 && PLAIN_PASTE_TOAST_SHOWN === false && !this.device.editor.isMobile) {\n this.setToast({\n message: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"toast.pasteAsSingleElement\", {\n shortcut: (0,_utils__WEBPACK_IMPORTED_MODULE_34__.getShortcutKey)(\"CtrlOrCmd+Shift+V\")\n }),\n duration: 5000\n });\n PLAIN_PASTE_TOAST_SHOWN = true;\n }\n\n this.store.shouldCaptureIncrement();\n }\n\n handleTextWysiwyg(element, {\n isExistingElement = false\n }) {\n const elementsMap = this.scene.getElementsMapIncludingDeleted();\n\n const updateElement = (nextOriginalText, isDeleted, rawText, //zsviczian\n link) => {\n this.scene.replaceAllElements([// Not sure why we include deleted elements as well hence using deleted elements map\n ...this.scene.getElementsIncludingDeleted().map(_element => {\n if (_element.id === element.id && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(_element)) {\n return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(_element, Object.assign({\n originalText: nextOriginalText,\n rawText: rawText !== null && rawText !== void 0 ? rawText : nextOriginalText,\n //zsviczian\n link,\n isDeleted: isDeleted !== null && isDeleted !== void 0 ? isDeleted : _element.isDeleted\n }, (0,_element__WEBPACK_IMPORTED_MODULE_16__.refreshTextDimensions)(_element, (0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.getContainerElement)(_element, elementsMap), elementsMap, nextOriginalText)));\n }\n\n return _element;\n })]);\n }; //zsviczian\n\n\n if (isExistingElement && this.props.onBeforeTextEdit) {\n const text = this.props.onBeforeTextEdit(element);\n\n if (text && text !== element.originalText) {\n this.scene.replaceAllElements([...this.scene.getElementsIncludingDeleted().map(_element => {\n if (_element.id === element.id && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(_element)) {\n //changing the value of element so this gets edited by textWysiwyg\n element = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(_element, Object.assign({\n originalText: text,\n rawText: text,\n isDeleted: false\n }, (0,_element__WEBPACK_IMPORTED_MODULE_16__.refreshTextDimensions)(_element, (0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.getContainerElement)(_element, elementsMap), elementsMap, text)));\n return element;\n }\n\n return _element;\n })]);\n }\n }\n\n (0,_element_textWysiwyg__WEBPACK_IMPORTED_MODULE_84__.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_34__.sceneCoordsToViewportCoords)({\n sceneX: x,\n sceneY: y\n }, this.state);\n return [viewportX - this.state.offsetLeft, viewportY - this.state.offsetTop];\n },\n onChange: (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(nextOriginalText => {\n updateElement(nextOriginalText, false);\n\n if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isNonDeletedElement)(element)) {\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.updateBoundElements)(element, this.scene.getNonDeletedElementsMap());\n }\n }),\n onSubmit: (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(({\n viaKeyboard,\n nextOriginalText\n }) => {\n var _a;\n\n const isDeleted = !nextOriginalText.trim(); //zsviczian insert start\n\n const rawText = nextOriginalText; //should this be originalText??\n\n let link = undefined;\n\n if (this.props.onBeforeTextSubmit) {\n const _element = this.scene.getElementsIncludingDeleted().find(el => el.id === element.id && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(el));\n\n if (_element) {\n const dismensionsData = (0,_element__WEBPACK_IMPORTED_MODULE_16__.refreshTextDimensions)(_element, (0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.getContainerElement)(_element, elementsMap), elementsMap, nextOriginalText);\n const {\n updatedNextOriginalText,\n nextLink\n } = this.props.onBeforeTextSubmit(element, (_a = dismensionsData === null || dismensionsData === void 0 ? void 0 : dismensionsData.text) !== null && _a !== void 0 ? _a : nextOriginalText, //should never be undefined\n nextOriginalText, isDeleted);\n nextOriginalText = updatedNextOriginalText !== null && updatedNextOriginalText !== void 0 ? updatedNextOriginalText : nextOriginalText;\n link = nextLink;\n }\n } //zsviczian insert end\n\n\n updateElement(nextOriginalText, isDeleted, rawText, link); //zsviczian (added rawText, link, text)\n // select the created text element only if submitting via keyboard\n // (when submitting via click it should act as signal to deselect)\n\n if (!isDeleted && viaKeyboard) {\n const elementIdToSelect = element.containerId ? element.containerId : element.id; // needed to ensure state is updated before \"finalize\" action\n // that's invoked on keyboard-submit as well\n // TODO either move this into finalize as well, or handle all state\n // updates in one place, skipping finalize action\n\n (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.flushSync)(() => {\n this.setState(prevState => ({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.makeNextSelectedElementIds)(Object.assign(Object.assign({}, prevState.selectedElementIds), {\n [elementIdToSelect]: true\n }), prevState)\n }));\n });\n }\n\n if (isDeleted) {\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.fixBindingsAfterDeletion)(this.scene.getNonDeletedElements(), [element]);\n }\n\n if (!isDeleted || isExistingElement) {\n this.store.shouldCaptureIncrement();\n }\n\n this.setState({\n newElement: null,\n editingTextElement: null\n });\n\n if (this.state.activeTool.locked) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursorForShape)(this.interactiveCanvas, this.state);\n }\n\n this.focusContainer();\n }),\n element,\n excalidrawContainer: this.excalidrawContainerRef.current,\n app: this,\n // when text is selected, it's hard (at least on iOS) to re-position the\n // caret (i.e. deselect). There's not much use for always selecting\n // the text on edit anyway (and users can select-all from contextmenu\n // if needed)\n autoSelect: !this.device.isTouchScreen\n }); // deselect all other elements when inserting text\n\n this.deselectElements(); // do an initial update to re-initialize element position since we were\n // modifying element's x/y for sake of editor (case: syncing to remote)\n\n updateElement(element.originalText, false);\n }\n\n deselectElements() {\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.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_collision__WEBPACK_IMPORTED_MODULE_83__.hitElementItself)({\n x,\n y,\n element: elementWithHighestZIndex,\n shape: (0,_shapes__WEBPACK_IMPORTED_MODULE_31__.getElementShape)(elementWithHighestZIndex, this.scene.getNonDeletedElementsMap()),\n // when overlapping, we would like to be more precise\n // this also avoids the need to update past tests\n threshold: this.getElementHitThreshold() / 2,\n frameNameBound: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(elementWithHighestZIndex) ? this.frameNameBoundsCache.get(elementWithHighestZIndex) : null\n }) ? elementWithHighestZIndex : allHitElements[allHitElements.length - 2];\n }\n\n if (allHitElements.length === 1) {\n return allHitElements[0];\n }\n\n return null;\n }\n\n getElementsAtPosition(x, y, includeBoundTextElement = false, includeLockedElements = false) {\n const iframeLikes = [];\n const elementsMap = this.scene.getNonDeletedElementsMap();\n const elements = (includeBoundTextElement && includeLockedElements ? this.scene.getNonDeletedElements() : this.scene.getNonDeletedElements().filter(element => (includeLockedElements || !element.locked) && (includeBoundTextElement || !((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(element) && element.containerId)))).filter(el => this.hitElement(x, y, el)).filter(element => {\n // hitting a frame's element from outside the frame is not considered a hit\n const containingFrame = (0,_frame__WEBPACK_IMPORTED_MODULE_50__.getContainingFrame)(element, elementsMap);\n return containingFrame && this.state.frameRendering.enabled && this.state.frameRendering.clip ? (0,_frame__WEBPACK_IMPORTED_MODULE_50__.isCursorInFrame)({\n x,\n y\n }, containingFrame, elementsMap) : true;\n }).filter(el => {\n // The parameter elements comes ordered from lower z-index to higher.\n // We want to preserve that order on the returned array.\n // Exception being embeddables which should be on top of everything else in\n // terms of hit testing.\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(el)) {\n iframeLikes.push(el);\n return false;\n }\n\n return true;\n }).concat(iframeLikes);\n return elements;\n }\n\n getElementHitThreshold() {\n return _constants__WEBPACK_IMPORTED_MODULE_12__.DEFAULT_COLLISION_THRESHOLD / this.state.zoom.value;\n }\n\n hitElement(x, y, element, considerBoundingBox = true) {\n // if the element is selected, then hit test is done against its bounding box\n if (considerBoundingBox && this.state.selectedElementIds[element.id] && (0,_element_transformHandles__WEBPACK_IMPORTED_MODULE_47__.shouldShowBoundingBox)([element], this.state)) {\n const selectionShape = (0,_utils_geometry_shape__WEBPACK_IMPORTED_MODULE_32__.getSelectionBoxShape)(element, this.scene.getNonDeletedElementsMap(), this.getElementHitThreshold());\n return (0,_utils_collision__WEBPACK_IMPORTED_MODULE_33__.isPointInShape)((0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(x, y), selectionShape);\n } // take bound text element into consideration for hit collision as well\n\n\n const hitBoundTextOfElement = (0,_element_collision__WEBPACK_IMPORTED_MODULE_83__.hitElementBoundText)(x, y, (0,_shapes__WEBPACK_IMPORTED_MODULE_31__.getBoundTextShape)(element, this.scene.getNonDeletedElementsMap()));\n\n if (hitBoundTextOfElement) {\n return true;\n }\n\n return (0,_element_collision__WEBPACK_IMPORTED_MODULE_83__.hitElementItself)({\n x,\n y,\n element,\n shape: (0,_shapes__WEBPACK_IMPORTED_MODULE_31__.getElementShape)(element, this.scene.getNonDeletedElementsMap()),\n threshold: this.getElementHitThreshold(),\n frameNameBound: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(element) ? this.frameNameBoundsCache.get(element) : null\n });\n }\n\n getTextBindableContainerAtPosition(x, y) {\n const elements = this.scene.getNonDeletedElements();\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (selectedElements.length === 1) {\n return (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isTextBindableContainer)(selectedElements[0], false) ? selectedElements[0] : null;\n }\n\n let hitElement = null; // We need to do hit testing from front (end of the array) to back (beginning of the array)\n\n for (let index = elements.length - 1; index >= 0; --index) {\n if (elements[index].isDeleted) {\n continue;\n }\n\n const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getElementAbsoluteCoords)(elements[index], this.scene.getNonDeletedElementsMap());\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isArrowElement)(elements[index]) && (0,_element_collision__WEBPACK_IMPORTED_MODULE_83__.hitElementItself)({\n x,\n y,\n element: elements[index],\n shape: (0,_shapes__WEBPACK_IMPORTED_MODULE_31__.getElementShape)(elements[index], this.scene.getNonDeletedElementsMap()),\n threshold: this.getElementHitThreshold()\n })) {\n hitElement = elements[index];\n break;\n } else if (x1 < x && x < x2 && y1 < y && y < y2) {\n hitElement = elements[index];\n break;\n }\n }\n\n return (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isTextBindableContainer)(hitElement, false) ? hitElement : null;\n }\n\n handleHoverSelectedLinearElement(linearElementEditor, scenePointerX, scenePointerY) {\n const elementsMap = this.scene.getNonDeletedElementsMap();\n const element = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.getElement(linearElementEditor.elementId, elementsMap);\n\n if (!element) {\n return;\n }\n\n if (this.state.selectedLinearElement) {\n let hoverPointIndex = -1;\n let segmentMidPointHoveredCoords = null;\n\n if ((0,_element_collision__WEBPACK_IMPORTED_MODULE_83__.hitElementItself)({\n x: scenePointerX,\n y: scenePointerY,\n element,\n shape: (0,_shapes__WEBPACK_IMPORTED_MODULE_31__.getElementShape)(element, this.scene.getNonDeletedElementsMap())\n })) {\n hoverPointIndex = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.getPointIndexUnderCursor(element, elementsMap, this.state.zoom, scenePointerX, scenePointerY);\n segmentMidPointHoveredCoords = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.getSegmentMidpointHitCoords(linearElementEditor, {\n x: scenePointerX,\n y: scenePointerY\n }, this.state, this.scene.getNonDeletedElementsMap());\n\n if (hoverPointIndex >= 0 || segmentMidPointHoveredCoords) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n } else if (this.hitElement(scenePointerX, scenePointerY, element)) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.MOVE);\n }\n } else if (this.hitElement(scenePointerX, scenePointerY, element)) {\n if (!(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isElbowArrow)(element) || !(element.startBinding || element.endBinding)) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.MOVE);\n }\n }\n\n if (this.state.selectedLinearElement.hoverPointIndex !== hoverPointIndex) {\n this.setState({\n selectedLinearElement: Object.assign(Object.assign({}, this.state.selectedLinearElement), {\n hoverPointIndex\n })\n });\n }\n\n if (!_element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.arePointsEqual(this.state.selectedLinearElement.segmentMidPointHoveredCoords, segmentMidPointHoveredCoords)) {\n this.setState({\n selectedLinearElement: Object.assign(Object.assign({}, this.state.selectedLinearElement), {\n segmentMidPointHoveredCoords\n })\n });\n }\n } else {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.AUTO);\n }\n }\n\n updateGestureOnPointerDown(event) {\n gesture.pointers.set(event.pointerId, {\n x: event.clientX,\n y: event.clientY\n });\n\n if (gesture.pointers.size === 2) {\n gesture.lastCenter = (0,_gesture__WEBPACK_IMPORTED_MODULE_22__.getCenter)(gesture.pointers);\n gesture.initialScale = this.state.zoom.value;\n gesture.initialDistance = (0,_gesture__WEBPACK_IMPORTED_MODULE_22__.getDistance)(Array.from(gesture.pointers.values()));\n }\n }\n\n initialPointerDownState(event) {\n const origin = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.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 const isElbowArrowOnly = selectedElements.findIndex(_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isElbowArrow) === 0;\n return {\n origin,\n withCmdOrCtrl: event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD],\n originInGrid: (0,_utils__WEBPACK_IMPORTED_MODULE_34__.tupleToCoors)((0,_snapping__WEBPACK_IMPORTED_MODULE_58__.getGridPoint)(origin.x, origin.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] || isElbowArrowOnly ? null : this.getEffectiveGridSize())),\n scrollbars: (0,_scene_scrollbars__WEBPACK_IMPORTED_MODULE_85__.isOverScrollBars)(currentScrollBars, event.clientX - this.state.offsetLeft, event.clientY - this.state.offsetTop),\n // we need to duplicate because we'll be updating this state\n lastCoords: Object.assign({}, origin),\n originalElements: this.scene.getNonDeletedElements().reduce((acc, element) => {\n acc.set(element.id, (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.deepCopyElement)(element));\n return acc;\n }, new Map()),\n resize: {\n handleType: false,\n isResizing: false,\n offset: {\n x: 0,\n y: 0\n },\n arrowDirection: \"origin\",\n center: {\n x: (maxX + minX) / 2,\n y: (maxY + minY) / 2\n }\n },\n hit: {\n element: null,\n allHitElements: [],\n wasAddedToSelection: false,\n hasBeenDuplicated: false,\n hasHitCommonBoundingBoxOfSelectedElements: this.isHittingCommonBoundingBoxOfSelectedElements(origin, selectedElements)\n },\n drag: {\n hasOccurred: false,\n offset: null\n },\n eventListeners: {\n onMove: null,\n onUp: null,\n onKeyUp: null,\n onKeyDown: null\n },\n boxSelection: {\n hasOccurred: false\n }\n };\n } // Returns whether the event is a dragging a scrollbar\n\n\n handleDraggingScrollBar(event, pointerDownState) {\n if (!(pointerDownState.scrollbars.isOverEither && !this.state.multiElement)) {\n return false;\n }\n\n isDraggingScrollBar = true;\n pointerDownState.lastCoords.x = event.clientX;\n pointerDownState.lastCoords.y = event.clientY;\n const onPointerMove = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdatesThrottled)(event => {\n const target = event.target;\n\n if (!(target instanceof HTMLElement)) {\n return;\n }\n\n this.handlePointerMoveOverScrollbars(event, pointerDownState);\n });\n const onPointerUp = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(() => {\n lastPointerUp = null;\n isDraggingScrollBar = false;\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursorForShape)(this.interactiveCanvas, this.state);\n this.setState({\n cursorButton: \"up\"\n });\n this.savePointer(event.clientX, event.clientY, \"up\");\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, onPointerMove);\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, onPointerUp);\n onPointerMove.flush();\n });\n lastPointerUp = onPointerUp;\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, onPointerMove);\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, onPointerUp);\n return true;\n }\n\n isASelectedElement(hitElement) {\n return hitElement != null && this.state.selectedElementIds[hitElement.id];\n }\n\n isHittingCommonBoundingBoxOfSelectedElements(point, selectedElements) {\n if (selectedElements.length < 2) {\n return false;\n } // How many pixels off the shape boundary we still consider a hit\n\n\n const threshold = this.getElementHitThreshold();\n const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(selectedElements);\n return point.x > x1 - threshold && point.x < x2 + threshold && point.y > y1 - threshold && point.y < y2 + threshold;\n }\n\n getCurrentItemRoundness(elementType) {\n return this.state.currentItemRoundness === \"round\" ? {\n type: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isUsingAdaptiveRadius)(elementType) ? _constants__WEBPACK_IMPORTED_MODULE_12__.ROUNDNESS.ADAPTIVE_RADIUS : _constants__WEBPACK_IMPORTED_MODULE_12__.ROUNDNESS.PROPORTIONAL_RADIUS\n } : null;\n }\n\n maybeCacheReferenceSnapPoints(event, selectedElements, recomputeAnyways = false) {\n if ((0,_snapping__WEBPACK_IMPORTED_MODULE_58__.isSnappingEnabled)({\n event,\n app: this,\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, this.scene.getNonDeletedElementsMap()));\n }\n }\n\n maybeCacheVisibleGaps(event, selectedElements, recomputeAnyways = false) {\n if ((0,_snapping__WEBPACK_IMPORTED_MODULE_58__.isSnappingEnabled)({\n event,\n app: this,\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, this.scene.getNonDeletedElementsMap()));\n }\n }\n\n onKeyDownFromPointerDownHandler(pointerDownState) {\n return (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(event => {\n if (this.maybeHandleResize(pointerDownState, event)) {\n return;\n }\n\n this.maybeDragNewGenericElement(pointerDownState, event);\n });\n }\n\n onKeyUpFromPointerDownHandler(pointerDownState) {\n return (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(event => {\n // Prevents focus from escaping excalidraw tab\n event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ALT && event.preventDefault();\n\n if (this.maybeHandleResize(pointerDownState, event)) {\n return;\n }\n\n this.maybeDragNewGenericElement(pointerDownState, event);\n });\n }\n\n onPointerMoveFromPointerDownHandler(pointerDownState) {\n return (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdatesThrottled)(event => {\n var _a, _b; //To avoid pointerMove canceling the selection of locked elements on mobile //zsviczian\n\n\n if (Boolean(this.state.contextMenu)) {\n return;\n } // We need to initialize dragOffsetXY only after we've updated\n // `state.selectedElementIds` on pointerDown. Doing it here in pointerMove\n // event handler should hopefully ensure we're already working with\n // the updated state.\n\n\n if (pointerDownState.drag.offset === null) {\n pointerDownState.drag.offset = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.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_34__.viewportCoordsToSceneCoords)(event, this.state);\n\n if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state)) {\n this.handleEraser(event, pointerDownState, pointerCoords);\n return;\n }\n\n if (this.state.activeTool.type === \"laser\") {\n this.laserTrails.addPointToPath(pointerCoords.x, pointerCoords.y);\n }\n\n const [gridX, gridY] = (0,_snapping__WEBPACK_IMPORTED_MODULE_58__.getGridPoint)(pointerCoords.x, pointerCoords.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()); // 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_98__.pointDistance)((0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(pointerCoords.x, pointerCoords.y), (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(pointerDownState.origin.x, pointerDownState.origin.y)) < _constants__WEBPACK_IMPORTED_MODULE_12__.DRAGGING_THRESHOLD) {\n return;\n }\n }\n\n if (pointerDownState.resize.isResizing) {\n pointerDownState.lastCoords.x = pointerCoords.x;\n pointerDownState.lastCoords.y = pointerCoords.y;\n\n if (this.maybeHandleResize(pointerDownState, event)) {\n return true;\n }\n }\n\n const elementsMap = this.scene.getNonDeletedElementsMap();\n\n if (this.state.selectedLinearElement) {\n const linearElementEditor = this.state.editingLinearElement || this.state.selectedLinearElement;\n\n if (_element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.shouldAddMidpoint(this.state.selectedLinearElement, pointerCoords, this.state, elementsMap)) {\n const ret = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.addMidpoint(this.state.selectedLinearElement, pointerCoords, this, !event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD], elementsMap);\n\n if (!ret) {\n return;\n } // Since we are reading from previous state which is not possible with\n // automatic batching in React 18 hence using flush sync to synchronously\n // update the state. Check https://github.com/excalidraw/excalidraw/pull/5508 for more details.\n\n\n (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.flushSync)(() => {\n if (this.state.selectedLinearElement) {\n this.setState({\n selectedLinearElement: Object.assign(Object.assign({}, this.state.selectedLinearElement), {\n pointerDownState: ret.pointerDownState,\n selectedPointsIndices: ret.selectedPointsIndices\n })\n });\n }\n\n if (this.state.editingLinearElement) {\n this.setState({\n editingLinearElement: Object.assign(Object.assign({}, this.state.editingLinearElement), {\n pointerDownState: ret.pointerDownState,\n selectedPointsIndices: ret.selectedPointsIndices\n })\n });\n }\n });\n return;\n } else if (linearElementEditor.pointerDownState.segmentMidpoint.value !== null && !linearElementEditor.pointerDownState.segmentMidpoint.added) {\n return;\n }\n\n const didDrag = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handlePointDragging(event, this, pointerCoords.x, pointerCoords.y, (element, pointsSceneCoords) => {\n this.maybeSuggestBindingsForLinearElementAtCoords(element, pointsSceneCoords);\n }, linearElementEditor, this.scene);\n\n if (didDrag) {\n pointerDownState.lastCoords.x = pointerCoords.x;\n pointerDownState.lastCoords.y = pointerCoords.y;\n pointerDownState.drag.hasOccurred = true;\n\n if (this.state.editingLinearElement && !this.state.editingLinearElement.isDragging) {\n this.setState({\n editingLinearElement: Object.assign(Object.assign({}, this.state.editingLinearElement), {\n isDragging: true\n })\n });\n }\n\n if (!this.state.selectedLinearElement.isDragging) {\n this.setState({\n selectedLinearElement: Object.assign(Object.assign({}, this.state.selectedLinearElement), {\n isDragging: true\n })\n });\n }\n\n return;\n }\n }\n\n const hasHitASelectedElement = pointerDownState.hit.allHitElements.some(element => this.isASelectedElement(element));\n const isSelectingPointsInLineEditor = this.state.editingLinearElement && event.shiftKey && this.state.editingLinearElement.elementId === ((_a = pointerDownState.hit.element) === null || _a === void 0 ? void 0 : _a.id);\n\n if ((hasHitASelectedElement || pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements) && !isSelectingPointsInLineEditor) {\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (selectedElements.every(element => element.locked)) {\n return;\n }\n\n const selectedElementsHasAFrame = selectedElements.find(e => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(e));\n const topLayerFrame = this.getTopLayerFrameAtSceneCoords(pointerCoords);\n this.setState({\n frameToHighlight: topLayerFrame && !selectedElementsHasAFrame ? topLayerFrame : null\n }); // Marking that click was used for dragging to check\n // if elements should be deselected on pointerup\n\n pointerDownState.drag.hasOccurred = true; // 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 editingTextElement to avoid jump while editing on mobile #6503\n\n if (selectedElements.length > 0 && !pointerDownState.withCmdOrCtrl && !this.state.editingTextElement && ((_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)(originalElements, dragOffset, this, event, this.scene.getNonDeletedElementsMap());\n this.setState({\n snapLines\n }); // when we're editing the name of a frame, we want the user to be\n // able to select and interact with the text input\n\n !this.state.editingFrame && (0,_element__WEBPACK_IMPORTED_MODULE_16__.dragSelectedElements)(pointerDownState, selectedElements, dragOffset, this.scene, snapOffset, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.getEffectiveGridSize());\n this.setState({\n selectedElementsAreBeingDragged: true,\n // element is being dragged and selectionElement that was created on pointer down\n // should be removed\n selectionElement: null\n });\n\n if (selectedElements.length !== 1 || !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isElbowArrow)(selectedElements[0])) {\n this.setState({\n suggestedBindings: (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getSuggestedBindingsForArrows)(selectedElements, this.scene.getNonDeletedElementsMap())\n });\n } // We duplicate the selected element if alt is pressed on pointer move\n\n\n if (event.altKey && !pointerDownState.hit.hasBeenDuplicated) {\n // Move the currently selected elements to the top of the z index stack, and\n // put the duplicates where the selected elements used to be.\n // (the origin point where the dragging started)\n pointerDownState.hit.hasBeenDuplicated = true;\n const nextElements = [];\n const elementsToAppend = [];\n const groupIdMap = new Map();\n const oldIdToDuplicatedId = new Map();\n const hitElement = pointerDownState.hit.element;\n const selectedElementIds = new Set(this.scene.getSelectedElements({\n selectedElementIds: this.state.selectedElementIds,\n includeBoundTextElement: true,\n includeElementsInFrames: true\n }).map(element => element.id));\n const elements = this.scene.getElementsIncludingDeleted();\n\n for (const element of elements) {\n if (selectedElementIds.has(element.id) || // case: the state.selectedElementIds might not have been\n // updated yet by the time this mousemove event is fired\n element.id === (hitElement === null || hitElement === void 0 ? void 0 : hitElement.id) && pointerDownState.hit.wasAddedToSelection) {\n const duplicatedElement = (0,_element__WEBPACK_IMPORTED_MODULE_16__.duplicateElement)(this.state.editingGroupId, groupIdMap, element);\n const origElement = pointerDownState.originalElements.get(element.id);\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(duplicatedElement, {\n x: origElement.x,\n y: origElement.y\n }); // put duplicated element to pointerDownState.originalElements\n // so that we can snap to the duplicated element without releasing\n\n pointerDownState.originalElements.set(duplicatedElement.id, duplicatedElement);\n nextElements.push(duplicatedElement);\n elementsToAppend.push(element);\n oldIdToDuplicatedId.set(element.id, duplicatedElement.id);\n } else {\n nextElements.push(element);\n }\n }\n\n const nextSceneElements = [...nextElements, ...elementsToAppend];\n (0,_fractionalIndex__WEBPACK_IMPORTED_MODULE_86__.syncMovedIndices)(nextSceneElements, (0,_utils__WEBPACK_IMPORTED_MODULE_34__.arrayToMap)(elementsToAppend));\n (0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.bindTextToShapeAfterDuplication)(nextElements, elementsToAppend, oldIdToDuplicatedId);\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.fixBindingsAfterDuplication)(nextSceneElements, elementsToAppend, oldIdToDuplicatedId, \"duplicatesServeAsOld\");\n (0,_frame__WEBPACK_IMPORTED_MODULE_50__.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 }\n\n if (this.state.selectionElement) {\n pointerDownState.lastCoords.x = pointerCoords.x;\n pointerDownState.lastCoords.y = pointerCoords.y;\n this.maybeDragNewGenericElement(pointerDownState, event);\n } else {\n // It is very important to read this.state within each move event,\n // otherwise we would read a stale one!\n const newElement = this.state.newElement;\n\n if (!newElement) {\n return;\n }\n\n if (newElement.type === \"freedraw\") {\n const points = newElement.points;\n const dx = pointerCoords.x - newElement.x;\n const dy = pointerCoords.y - newElement.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 = newElement.simulatePressure ? newElement.pressures : [//zsviczian\n ...newElement.pressures, (strokeOptions === null || strokeOptions === void 0 ? void 0 : strokeOptions.constantPressure) ? 1 : event.pressure];\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(newElement, {\n points: [...points, (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(dx, dy)],\n pressures\n }, false);\n this.setState({\n newElement\n });\n }\n } else if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(newElement)) {\n pointerDownState.drag.hasOccurred = true;\n const points = newElement.points;\n let dx = gridX - newElement.x;\n let dy = gridY - newElement.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)(newElement.x, newElement.y, pointerCoords.x, pointerCoords.y));\n }\n\n if (points.length === 1) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(newElement, {\n points: [...points, (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(dx, dy)]\n }, false);\n } else if (points.length > 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isElbowArrow)(newElement)) {\n (0,_element_routing__WEBPACK_IMPORTED_MODULE_95__.mutateElbowArrow)(newElement, elementsMap, [...points.slice(0, -1), (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(dx, dy)], (0,_math__WEBPACK_IMPORTED_MODULE_98__.vector)(0, 0), undefined, {\n isDragging: true,\n informMutation: false\n });\n } else if (points.length === 2) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(newElement, {\n points: [...points.slice(0, -1), (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(dx, dy)]\n }, false);\n }\n\n this.setState({\n newElement\n });\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElement)(newElement, false)) {\n // When creating a linear element by dragging\n this.maybeSuggestBindingsForLinearElementAtCoords(newElement, [pointerCoords], this.state.startBoundElement);\n }\n } else {\n pointerDownState.lastCoords.x = pointerCoords.x;\n pointerDownState.lastCoords.y = pointerCoords.y;\n this.maybeDragNewGenericElement(pointerDownState, event, false);\n }\n }\n\n if (this.state.activeTool.type === \"selection\") {\n pointerDownState.boxSelection.hasOccurred = true;\n const elements = this.scene.getNonDeletedElements(); // box-select line editor points\n\n if (this.state.editingLinearElement) {\n _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handleBoxSelection(event, this.state, this.setState.bind(this), this.scene.getNonDeletedElementsMap()); // regular box-select\n } else {\n let shouldReuseSelection = true;\n\n if (!event.shiftKey && (0,_scene__WEBPACK_IMPORTED_MODULE_28__.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 = this.state.selectionElement ? (0,_scene__WEBPACK_IMPORTED_MODULE_28__.getElementsWithinSelection)(elements, this.state.selectionElement, this.scene.getNonDeletedElementsMap()) : [];\n this.setState(prevState => {\n const nextSelectedElementIds = Object.assign(Object.assign({}, shouldReuseSelection && prevState.selectedElementIds), elementsWithinSelection.reduce((acc, element) => {\n acc[element.id] = true;\n return acc;\n }, {}));\n\n if (pointerDownState.hit.element) {\n // if using ctrl/cmd, select the hitElement only if we\n // haven't box-selected anything else\n if (!elementsWithinSelection.length) {\n nextSelectedElementIds[pointerDownState.hit.element.id] = true;\n } else {\n delete nextSelectedElementIds[pointerDownState.hit.element.id];\n }\n }\n\n prevState = !shouldReuseSelection ? Object.assign(Object.assign({}, prevState), {\n selectedGroupIds: {},\n editingGroupId: null\n }) : prevState;\n return Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n editingGroupId: prevState.editingGroupId,\n selectedElementIds: nextSelectedElementIds\n }, this.scene.getNonDeletedElements(), prevState, this)), {\n // select linear element only when we haven't box-selected anything else\n selectedLinearElement: elementsWithinSelection.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(elementsWithinSelection[0]) ? new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(elementsWithinSelection[0]) : null,\n showHyperlinkPopup: elementsWithinSelection.length === 1 && (elementsWithinSelection[0].link || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(elementsWithinSelection[0])) ? \"info\" : false\n });\n });\n }\n }\n });\n } // Returns whether the pointer move happened over either scrollbar\n\n\n handlePointerMoveOverScrollbars(event, pointerDownState) {\n if (pointerDownState.scrollbars.isOverHorizontal) {\n const x = event.clientX;\n const dx = x - pointerDownState.lastCoords.x;\n this.translateCanvas({\n scrollX: this.state.scrollX - dx / this.state.zoom.value\n });\n pointerDownState.lastCoords.x = x;\n return true;\n }\n\n if (pointerDownState.scrollbars.isOverVertical) {\n const y = event.clientY;\n const dy = y - pointerDownState.lastCoords.y;\n this.translateCanvas({\n scrollY: this.state.scrollY - dy / this.state.zoom.value\n });\n pointerDownState.lastCoords.y = y;\n return true;\n }\n\n return false;\n }\n\n onPointerUpFromPointerDownHandler(pointerDownState) {\n return (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(childEvent => {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;\n\n this.removePointer(childEvent);\n\n if (pointerDownState.eventListeners.onMove) {\n pointerDownState.eventListeners.onMove.flush();\n }\n\n const {\n newElement,\n resizingElement,\n multiElement,\n activeTool,\n isResizing,\n isRotating\n } = this.state;\n this.setState(prevState => ({\n isResizing: false,\n isRotating: false,\n resizingElement: null,\n selectionElement: null,\n frameToHighlight: null,\n elementsToHighlight: null,\n cursorButton: \"up\",\n snapLines: (0,_utils__WEBPACK_IMPORTED_MODULE_34__.updateStable)(prevState.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 });\n const elementsMap = this.scene.getNonDeletedElementsMap(); // Handle end of dragging a point of a linear element, might close a loop\n // and sets binding element\n\n if (this.state.editingLinearElement) {\n if (!pointerDownState.boxSelection.hasOccurred && ((_b = (_a = pointerDownState.hit) === null || _a === void 0 ? void 0 : _a.element) === null || _b === void 0 ? void 0 : _b.id) !== this.state.editingLinearElement.elementId) {\n this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n } else {\n const editingLinearElement = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handlePointerUp(childEvent, this.state.editingLinearElement, this.state, this.scene);\n\n if (editingLinearElement !== this.state.editingLinearElement) {\n this.setState({\n editingLinearElement,\n suggestedBindings: []\n });\n }\n }\n } else if (this.state.selectedLinearElement) {\n if (((_d = (_c = pointerDownState.hit) === null || _c === void 0 ? void 0 : _c.element) === null || _d === void 0 ? void 0 : _d.id) !== this.state.selectedLinearElement.elementId) {\n const selectedELements = this.scene.getSelectedElements(this.state); // set selectedLinearElement to null if there is more than one element selected since we don't want to show linear element handles\n\n if (selectedELements.length > 1) {\n this.setState({\n selectedLinearElement: null\n });\n }\n } else {\n const linearElementEditor = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handlePointerUp(childEvent, this.state.selectedLinearElement, this.state, this.scene);\n const {\n startBindingElement,\n endBindingElement\n } = linearElementEditor;\n const element = this.scene.getElement(linearElementEditor.elementId);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElement)(element)) {\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.bindOrUnbindLinearElement)(element, startBindingElement, endBindingElement, elementsMap, this.scene);\n }\n\n if (linearElementEditor !== this.state.selectedLinearElement) {\n this.setState({\n selectedLinearElement: Object.assign(Object.assign({}, linearElementEditor), {\n selectedPointsIndices: null\n }),\n suggestedBindings: []\n });\n }\n }\n }\n\n this.missingPointerEventCleanupEmitter.clear();\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, pointerDownState.eventListeners.onMove);\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, pointerDownState.eventListeners.onUp);\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYDOWN, pointerDownState.eventListeners.onKeyDown);\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYUP, pointerDownState.eventListeners.onKeyUp);\n\n if (this.state.pendingImageElementId) {\n this.setState({\n pendingImageElementId: null\n });\n }\n\n (_f = (_e = this.props) === null || _e === void 0 ? void 0 : _e.onPointerUp) === null || _f === void 0 ? void 0 : _f.call(_e, activeTool, pointerDownState);\n this.onPointerUpEmitter.trigger(this.state.activeTool, pointerDownState, childEvent);\n\n if ((newElement === null || newElement === void 0 ? void 0 : newElement.type) === \"freedraw\") {\n const pointerCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.viewportCoordsToSceneCoords)(childEvent, this.state);\n const points = newElement.points;\n let dx = pointerCoords.x - newElement.x;\n let dy = pointerCoords.y - newElement.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 = newElement.simulatePressure ? [] : [...newElement.pressures, childEvent.pressure];\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(newElement, {\n points: [...points, (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(dx, dy)],\n pressures,\n lastCommittedPoint: (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(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)(newElement)) {\n const imageElement = newElement;\n\n try {\n this.initializeImageDimensions(imageElement);\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.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)(newElement)) {\n if (newElement.points.length > 1) {\n this.store.shouldCaptureIncrement();\n }\n\n const pointerCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.viewportCoordsToSceneCoords)(childEvent, this.state);\n\n if (!pointerDownState.drag.hasOccurred && newElement && !multiElement) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(newElement, {\n points: [...newElement.points, (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(pointerCoords.x - newElement.x, pointerCoords.y - newElement.y)]\n });\n this.setState({\n multiElement: newElement,\n newElement\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)(newElement, false)) {\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.maybeBindLinearElement)(newElement, this.state, pointerCoords, this.scene.getNonDeletedElementsMap(), this.scene.getNonDeletedElements());\n }\n\n this.setState({\n suggestedBindings: [],\n startBoundElement: null\n });\n\n if (!activeTool.locked) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.resetCursor)(this.interactiveCanvas);\n this.setState(prevState => ({\n newElement: null,\n activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_34__.updateActiveTool)(this.state, {\n type: \"selection\"\n }),\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.makeNextSelectedElementIds)(Object.assign(Object.assign({}, prevState.selectedElementIds), {\n [newElement.id]: true\n }), prevState),\n selectedLinearElement: new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(newElement)\n }));\n } else {\n this.setState(prevState => ({\n newElement: null\n }));\n } // so that the scene gets rendered again to display the newly drawn linear as well\n\n\n this.scene.triggerUpdate();\n }\n\n return;\n }\n\n if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(newElement)) {\n const minWidth = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.getMinTextElementWidth)((0,_utils__WEBPACK_IMPORTED_MODULE_34__.getFontString)({\n fontSize: newElement.fontSize,\n fontFamily: newElement.fontFamily\n }), newElement.lineHeight);\n\n if (newElement.width < minWidth) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(newElement, {\n autoResize: true\n });\n }\n\n this.resetCursor();\n this.handleTextWysiwyg(newElement, {\n isExistingElement: true\n });\n }\n\n if (activeTool.type !== \"selection\" && newElement && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isInvisiblySmallElement)(newElement)) {\n // remove invisible element which was added in onPointerDown\n // update the store snapshot, so that invisible elements are not captured by the store\n this.updateScene({\n elements: this.scene.getElementsIncludingDeleted().filter(el => el.id !== newElement.id),\n appState: {\n newElement: null\n },\n storeAction: _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.UPDATE\n });\n return;\n }\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(newElement)) {\n const elementsInsideFrame = (0,_frame__WEBPACK_IMPORTED_MODULE_50__.getElementsInNewFrame)(this.scene.getElementsIncludingDeleted(), newElement, this.scene.getNonDeletedElementsMap());\n this.scene.replaceAllElements((0,_frame__WEBPACK_IMPORTED_MODULE_50__.addElementsToFrame)(this.scene.getElementsMapIncludingDeleted(), elementsInsideFrame, newElement));\n }\n\n if (newElement) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(newElement, (0,_element__WEBPACK_IMPORTED_MODULE_16__.getNormalizedDimensions)(newElement)); // the above does not guarantee the scene to be rendered again, hence the trigger below\n\n this.scene.triggerUpdate();\n }\n\n if (pointerDownState.drag.hasOccurred) {\n const sceneCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.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_50__.getContainingFrame)(linearElement, elementsMap);\n\n if (frame && linearElement) {\n if (!(0,_frame__WEBPACK_IMPORTED_MODULE_50__.elementOverlapsWithFrame)(linearElement, frame, this.scene.getNonDeletedElementsMap())) {\n // remove the linear element from all groups\n // before removing it from the frame as well\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(linearElement, {\n groupIds: []\n });\n (0,_frame__WEBPACK_IMPORTED_MODULE_50__.removeElementsFromFrame)([linearElement], this.scene.getNonDeletedElementsMap());\n this.scene.triggerUpdate();\n }\n }\n }\n } else {\n // update the relationships between selected elements and frames\n const topLayerFrame = this.getTopLayerFrameAtSceneCoords(sceneCoords);\n const selectedElements = this.scene.getSelectedElements(this.state);\n let nextElements = this.scene.getElementsMapIncludingDeleted();\n\n const updateGroupIdsAfterEditingGroup = elements => {\n if (elements.length > 0) {\n for (const element of elements) {\n const index = element.groupIds.indexOf(this.state.editingGroupId);\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n groupIds: element.groupIds.slice(0, index)\n }, false);\n }\n\n nextElements.forEach(element => {\n if (element.groupIds.length && (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(nextElements, element.groupIds[element.groupIds.length - 1]).length < 2) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n groupIds: []\n }, false);\n }\n });\n this.setState({\n editingGroupId: null\n });\n }\n };\n\n if (topLayerFrame && !this.state.selectedElementIds[topLayerFrame.id]) {\n const elementsToAdd = selectedElements.filter(element => element.frameId !== topLayerFrame.id && (0,_frame__WEBPACK_IMPORTED_MODULE_50__.isElementInFrame)(element, nextElements, this.state));\n\n if (this.state.editingGroupId) {\n updateGroupIdsAfterEditingGroup(elementsToAdd);\n }\n\n nextElements = (0,_frame__WEBPACK_IMPORTED_MODULE_50__.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_50__.isElementInFrame)(element, nextElements, this.state));\n updateGroupIdsAfterEditingGroup(elementsToRemove);\n }\n }\n\n nextElements = (0,_frame__WEBPACK_IMPORTED_MODULE_50__.updateFrameMembershipOfSelectedElements)(nextElements, this.state, this);\n this.scene.replaceAllElements(nextElements);\n }\n }\n\n if (resizingElement) {\n this.store.shouldCaptureIncrement();\n }\n\n if (resizingElement && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isInvisiblySmallElement)(resizingElement)) {\n // update the store snapshot, so that invisible elements are not captured by the store\n this.updateScene({\n elements: this.scene.getElementsIncludingDeleted().filter(el => el.id !== resizingElement.id),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.UPDATE\n });\n } // handle frame membership for resizing frames and/or selected elements\n\n\n if (pointerDownState.resize.isResizing) {\n let nextElements = (0,_frame__WEBPACK_IMPORTED_MODULE_50__.updateFrameMembershipOfSelectedElements)(this.scene.getElementsIncludingDeleted(), this.state, this);\n const selectedFrames = this.scene.getSelectedElements(this.state).filter(element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(element));\n\n for (const frame of selectedFrames) {\n nextElements = (0,_frame__WEBPACK_IMPORTED_MODULE_50__.replaceAllElementsInFrame)(nextElements, (0,_frame__WEBPACK_IMPORTED_MODULE_50__.getElementsInResizingFrame)(this.scene.getElementsIncludingDeleted(), frame, this.state, elementsMap), frame, this);\n }\n\n this.scene.replaceAllElements(nextElements);\n } // Code below handles selection when element(s) weren't\n // drag or added to selection on pointer down phase.\n\n\n const hitElement = pointerDownState.hit.element;\n\n if (((_g = this.state.selectedLinearElement) === null || _g === void 0 ? void 0 : _g.elementId) !== (hitElement === null || hitElement === void 0 ? void 0 : hitElement.id) && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(hitElement)) {\n const selectedELements = this.scene.getSelectedElements(this.state); // set selectedLinearElement when no other element selected except\n // the one we've hit\n\n if (selectedELements.length === 1) {\n this.setState({\n selectedLinearElement: new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(hitElement)\n });\n }\n }\n\n const pointerStart = this.lastPointerDownEvent;\n const pointerEnd = this.lastPointerUpEvent || this.lastPointerMoveEvent;\n\n if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state) && pointerStart && pointerEnd) {\n this.eraserTrail.endPath();\n const draggedDistance = (0,_math__WEBPACK_IMPORTED_MODULE_98__.pointDistance)((0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(pointerStart.clientX, pointerStart.clientY), (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(pointerEnd.clientX, pointerEnd.clientY));\n\n if (draggedDistance === 0) {\n const scenePointer = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.viewportCoordsToSceneCoords)({\n clientX: pointerEnd.clientX,\n clientY: pointerEnd.clientY\n }, this.state);\n const hitElements = this.getElementsAtPosition(scenePointer.x, scenePointer.y);\n hitElements.forEach(hitElement => this.elementsPendingErasure.add(hitElement.id));\n }\n\n this.eraseElements();\n return;\n } else if (this.elementsPendingErasure.size) {\n this.restoreReadyToEraseElements();\n }\n\n if (hitElement && !pointerDownState.drag.hasOccurred && !pointerDownState.hit.wasAddedToSelection && ( // if we're editing a line, pointerup shouldn't switch selection if\n // box selected\n !this.state.editingLinearElement || !pointerDownState.boxSelection.hasOccurred)) {\n // when inside line editor, shift selects points instead\n if (childEvent.shiftKey && !this.state.editingLinearElement) {\n if (this.state.selectedElementIds[hitElement.id]) {\n if ((0,_groups__WEBPACK_IMPORTED_MODULE_23__.isSelectedViaGroup)(this.state, hitElement)) {\n this.setState(_prevState => {\n const nextSelectedElementIds = Object.assign({}, _prevState.selectedElementIds); // We want to unselect all groups hitElement is part of\n // as well as all elements that are part of the groups\n // hitElement is part of\n\n for (const groupedElement of hitElement.groupIds.flatMap(groupId => (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(this.scene.getNonDeletedElements(), groupId))) {\n delete nextSelectedElementIds[groupedElement.id];\n }\n\n return {\n selectedGroupIds: Object.assign(Object.assign({}, _prevState.selectedElementIds), hitElement.groupIds.map(gId => ({\n [gId]: false\n })).reduce((prev, acc) => Object.assign(Object.assign({}, prev), acc), {})),\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.makeNextSelectedElementIds)(nextSelectedElementIds, _prevState)\n };\n }); // if not dragging a linear element point (outside editor)\n } else if (!((_h = this.state.selectedLinearElement) === null || _h === void 0 ? void 0 : _h.isDragging)) {\n // remove element from selection while\n // keeping prev elements selected\n this.setState(prevState => {\n const newSelectedElementIds = Object.assign({}, prevState.selectedElementIds);\n delete newSelectedElementIds[hitElement.id];\n const newSelectedElements = (0,_scene__WEBPACK_IMPORTED_MODULE_28__.getSelectedElements)(this.scene.getNonDeletedElements(), {\n selectedElementIds: newSelectedElementIds\n });\n return Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n editingGroupId: prevState.editingGroupId,\n selectedElementIds: newSelectedElementIds\n }, this.scene.getNonDeletedElements(), prevState, this)), {\n // set selectedLinearElement only if thats the only element selected\n selectedLinearElement: newSelectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(newSelectedElements[0]) ? new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(newSelectedElements[0]) : prevState.selectedLinearElement\n });\n });\n }\n } else if (hitElement.frameId && this.state.selectedElementIds[hitElement.frameId]) {\n // when hitElement is part of a selected frame, deselect the frame\n // to avoid frame and containing elements selected simultaneously\n this.setState(prevState => {\n var _a, _b;\n\n const nextSelectedElementIds = Object.assign(Object.assign({}, prevState.selectedElementIds), {\n [hitElement.id]: true\n }); // deselect the frame\n\n delete nextSelectedElementIds[hitElement.frameId]; // deselect groups containing the frame\n\n ((_b = (_a = this.scene.getElement(hitElement.frameId)) === null || _a === void 0 ? void 0 : _a.groupIds) !== null && _b !== void 0 ? _b : []).flatMap(gid => (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(this.scene.getNonDeletedElements(), gid)).forEach(element => {\n delete nextSelectedElementIds[element.id];\n });\n return Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n editingGroupId: prevState.editingGroupId,\n selectedElementIds: nextSelectedElementIds\n }, this.scene.getNonDeletedElements(), prevState, this)), {\n showHyperlinkPopup: hitElement.link || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(hitElement) ? \"info\" : false\n });\n });\n } else {\n // add element to selection while keeping prev elements selected\n this.setState(_prevState => ({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.makeNextSelectedElementIds)(Object.assign(Object.assign({}, _prevState.selectedElementIds), {\n [hitElement.id]: true\n }), _prevState)\n }));\n }\n } else {\n this.setState(prevState => {\n var _a;\n\n return Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n editingGroupId: prevState.editingGroupId,\n selectedElementIds: {\n [hitElement.id]: true\n }\n }, this.scene.getNonDeletedElements(), prevState, this)), {\n selectedLinearElement: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(hitElement) && // Don't set `selectedLinearElement` if its same as the hitElement, this is mainly to prevent resetting the `hoverPointIndex` to -1.\n // Future we should update the API to take care of setting the correct `hoverPointIndex` when initialized\n ((_a = prevState.selectedLinearElement) === null || _a === void 0 ? void 0 : _a.elementId) !== hitElement.id ? new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(hitElement) : prevState.selectedLinearElement\n });\n });\n }\n }\n\n if ( // not dragged\n !pointerDownState.drag.hasOccurred && // not resized\n !this.state.isResizing && ( // only hitting the bounding box of the previous hit element\n hitElement && (0,_element_collision__WEBPACK_IMPORTED_MODULE_83__.hitElementBoundingBoxOnly)({\n x: pointerDownState.origin.x,\n y: pointerDownState.origin.y,\n element: hitElement,\n shape: (0,_shapes__WEBPACK_IMPORTED_MODULE_31__.getElementShape)(hitElement, this.scene.getNonDeletedElementsMap()),\n threshold: this.getElementHitThreshold(),\n frameNameBound: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(hitElement) ? this.frameNameBoundsCache.get(hitElement) : null\n }, elementsMap) || !hitElement && pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements)) {\n if (this.state.editingLinearElement) {\n this.setState({\n editingLinearElement: null\n });\n } else {\n // Deselect selected elements\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.makeNextSelectedElementIds)({}, this.state),\n selectedGroupIds: {},\n editingGroupId: null,\n activeEmbeddable: null\n });\n } // reset cursor\n\n\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.AUTO);\n return;\n }\n\n if (!activeTool.locked && activeTool.type !== \"freedraw\" && newElement) {\n this.setState(prevState => ({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.makeNextSelectedElementIds)(Object.assign(Object.assign({}, prevState.selectedElementIds), {\n [newElement.id]: true\n }), prevState),\n showHyperlinkPopup: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(newElement) && !newElement.link ? \"editor\" : prevState.showHyperlinkPopup\n }));\n }\n\n if (activeTool.type !== \"selection\" || (0,_scene__WEBPACK_IMPORTED_MODULE_28__.isSomeElementSelected)(this.scene.getNonDeletedElements(), this.state) || !(0,_utils__WEBPACK_IMPORTED_MODULE_34__.isShallowEqual)(this.state.previousSelectedElementIds, this.state.selectedElementIds)) {\n this.store.shouldCaptureIncrement();\n }\n\n if (pointerDownState.drag.hasOccurred || isResizing || isRotating) {\n // We only allow binding via linear elements, specifically via dragging\n // the endpoints (\"start\" or \"end\").\n const linearElements = this.scene.getSelectedElements(this.state).filter(_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement);\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.bindOrUnbindLinearElements)(linearElements, this.scene.getNonDeletedElementsMap(), this.scene.getNonDeletedElements(), this.scene, (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.isBindingEnabled)(this.state), (_k = (_j = this.state.selectedLinearElement) === null || _j === void 0 ? void 0 : _j.selectedPointsIndices) !== null && _k !== void 0 ? _k : []);\n }\n\n if (activeTool.type === \"laser\") {\n this.laserTrails.endPath();\n return;\n }\n\n if (!activeTool.locked && activeTool.type !== \"freedraw\") {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.resetCursor)(this.interactiveCanvas);\n this.setState({\n newElement: null,\n suggestedBindings: [],\n activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_34__.updateActiveTool)(this.state, {\n type: \"selection\"\n })\n });\n } else {\n this.setState({\n newElement: null,\n suggestedBindings: []\n });\n }\n\n if (hitElement && this.lastPointerUpEvent && this.lastPointerDownEvent && this.lastPointerUpEvent.timeStamp - this.lastPointerDownEvent.timeStamp < 300 && gesture.pointers.size <= 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeLikeElement)(hitElement) && this.isIframeLikeElementCenter(hitElement, this.lastPointerUpEvent, pointerDownState.origin.x, pointerDownState.origin.y)) {\n this.handleEmbeddableCenterClick(hitElement);\n }\n });\n } //zsviczian - published on API\n\n\n setSelection(elements) {\n const selectedElementIds = {};\n const selectedGroupIds = {};\n elements.forEach(ele => {\n if (ele.groupIds.length) {\n selectedElementIds[ele.id] = true;\n ele.groupIds.forEach(id => {\n selectedGroupIds[id] = true;\n });\n } // exclude bound text elements as we don't mark them as selected when\n // container is selected unless in group\n else if (!(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(ele)) {\n selectedElementIds[ele.id] = true;\n }\n });\n this.setState({\n previousSelectedElementIds: this.state.selectedElementIds,\n selectedElementIds,\n selectedGroupIds\n });\n }\n\n clearSelection(hitElement) {\n this.setState(prevState => ({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.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_51__.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_44__.getContainerCenter)(container, appState, this.scene.getNonDeletedElementsMap());\n\n if (elementCenter) {\n elementCenterX = elementCenter.x;\n elementCenterY = elementCenter.y;\n }\n\n const distanceToCenter = Math.hypot(x - elementCenterX, y - elementCenterY);\n const isSnappedToCenter = distanceToCenter < _constants__WEBPACK_IMPORTED_MODULE_12__.TEXT_TO_CENTER_SNAP_THRESHOLD;\n\n if (isSnappedToCenter) {\n const {\n x: viewportX,\n y: viewportY\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.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/* //zsviczian\nexport const createTestHook = () => {\n if (import.meta.env.MODE === ENV.TEST || import.meta.env.DEV) {\n window.h = window.h || ({} as Window[\"h\"]);\n\n Object.defineProperties(window.h, {\n elements: {\n configurable: true,\n get() {\n return this.app?.scene.getElementsIncludingDeleted();\n },\n set(elements: ExcalidrawElement[]) {\n return this.app?.scene.replaceAllElements(\n syncInvalidIndices(elements),\n );\n },\n },\n scene: {\n configurable: true,\n get() {\n return this.app?.scene;\n },\n },\n });\n }\n};\n\ncreateTestHook();*/\n\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (App);\n\n//# sourceURL=webpack://ExcalidrawLib/./components/App.tsx?");
|
|
906
|
+
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 */ \"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_99__ = __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 _scene__WEBPACK_IMPORTED_MODULE_28__ = __webpack_require__(/*! ../scene */ \"./scene/index.ts\");\n/* harmony import */ var _scene_Scene__WEBPACK_IMPORTED_MODULE_29__ = __webpack_require__(/*! ../scene/Scene */ \"./scene/Scene.ts\");\n/* harmony import */ var _scene_zoom__WEBPACK_IMPORTED_MODULE_30__ = __webpack_require__(/*! ../scene/zoom */ \"./scene/zoom.ts\");\n/* harmony import */ var _shapes__WEBPACK_IMPORTED_MODULE_31__ = __webpack_require__(/*! ../shapes */ \"./shapes.tsx\");\n/* harmony import */ var _utils_geometry_shape__WEBPACK_IMPORTED_MODULE_32__ = __webpack_require__(/*! ../../utils/geometry/shape */ \"../utils/geometry/shape.ts\");\n/* harmony import */ var _utils_collision__WEBPACK_IMPORTED_MODULE_33__ = __webpack_require__(/*! ../../utils/collision */ \"../utils/collision.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_34__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _element_embeddable__WEBPACK_IMPORTED_MODULE_35__ = __webpack_require__(/*! ../element/embeddable */ \"./element/embeddable.ts\");\n/* harmony import */ var _ContextMenu__WEBPACK_IMPORTED_MODULE_36__ = __webpack_require__(/*! ./ContextMenu */ \"./components/ContextMenu.tsx\");\n/* harmony import */ var _LayerUI__WEBPACK_IMPORTED_MODULE_37__ = __webpack_require__(/*! ./LayerUI */ \"./components/LayerUI.tsx\");\n/* harmony import */ var _Toast__WEBPACK_IMPORTED_MODULE_38__ = __webpack_require__(/*! ./Toast */ \"./components/Toast.tsx\");\n/* harmony import */ var _actions_actionToggleViewMode__WEBPACK_IMPORTED_MODULE_39__ = __webpack_require__(/*! ../actions/actionToggleViewMode */ \"./actions/actionToggleViewMode.tsx\");\n/* harmony import */ var _data_blob__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(/*! ../data/blob */ \"./data/blob.ts\");\n/* harmony import */ var _element_image__WEBPACK_IMPORTED_MODULE_41__ = __webpack_require__(/*! ../element/image */ \"./element/image.ts\");\n/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_42__ = __webpack_require__(/*! lodash.throttle */ \"../../node_modules/lodash.throttle/index.js\");\n/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_42___default = /*#__PURE__*/__webpack_require__.n(lodash_throttle__WEBPACK_IMPORTED_MODULE_42__);\n/* harmony import */ var _data_filesystem__WEBPACK_IMPORTED_MODULE_43__ = __webpack_require__(/*! ../data/filesystem */ \"./data/filesystem.ts\");\n/* harmony import */ var _element_textElement__WEBPACK_IMPORTED_MODULE_44__ = __webpack_require__(/*! ../element/textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _components_hyperlink_Hyperlink__WEBPACK_IMPORTED_MODULE_45__ = __webpack_require__(/*! ../components/hyperlink/Hyperlink */ \"./components/hyperlink/Hyperlink.tsx\");\n/* harmony import */ var _data_url__WEBPACK_IMPORTED_MODULE_46__ = __webpack_require__(/*! ../data/url */ \"./data/url.ts\");\n/* harmony import */ var _element_transformHandles__WEBPACK_IMPORTED_MODULE_47__ = __webpack_require__(/*! ../element/transformHandles */ \"./element/transformHandles.ts\");\n/* harmony import */ var _actions_actionElementLock__WEBPACK_IMPORTED_MODULE_48__ = __webpack_require__(/*! ../actions/actionElementLock */ \"./actions/actionElementLock.ts\");\n/* harmony import */ var _fonts__WEBPACK_IMPORTED_MODULE_49__ = __webpack_require__(/*! ../fonts */ \"./fonts/index.ts\");\n/* harmony import */ var _frame__WEBPACK_IMPORTED_MODULE_50__ = __webpack_require__(/*! ../frame */ \"./frame.ts\");\n/* harmony import */ var _scene_selection__WEBPACK_IMPORTED_MODULE_51__ = __webpack_require__(/*! ../scene/selection */ \"./scene/selection.ts\");\n/* harmony import */ var _actions_actionClipboard__WEBPACK_IMPORTED_MODULE_52__ = __webpack_require__(/*! ../actions/actionClipboard */ \"./actions/actionClipboard.tsx\");\n/* harmony import */ var _actions_actionFrame__WEBPACK_IMPORTED_MODULE_53__ = __webpack_require__(/*! ../actions/actionFrame */ \"./actions/actionFrame.ts\");\n/* harmony import */ var _actions_actionCanvas__WEBPACK_IMPORTED_MODULE_54__ = __webpack_require__(/*! ../actions/actionCanvas */ \"./actions/actionCanvas.tsx\");\n/* harmony import */ var _jotai__WEBPACK_IMPORTED_MODULE_55__ = __webpack_require__(/*! ../jotai */ \"./jotai.ts\");\n/* harmony import */ var _ActiveConfirmDialog__WEBPACK_IMPORTED_MODULE_56__ = __webpack_require__(/*! ./ActiveConfirmDialog */ \"./components/ActiveConfirmDialog.tsx\");\n/* harmony import */ var _errors__WEBPACK_IMPORTED_MODULE_57__ = __webpack_require__(/*! ../errors */ \"./errors.ts\");\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 _SVGLayer__WEBPACK_IMPORTED_MODULE_67__ = __webpack_require__(/*! ./SVGLayer */ \"./components/SVGLayer.tsx\");\n/* harmony import */ var _cursor__WEBPACK_IMPORTED_MODULE_68__ = __webpack_require__(/*! ../cursor */ \"./cursor.ts\");\n/* harmony import */ var _emitter__WEBPACK_IMPORTED_MODULE_69__ = __webpack_require__(/*! ../emitter */ \"./emitter.ts\");\n/* harmony import */ var _element_ElementCanvasButtons__WEBPACK_IMPORTED_MODULE_70__ = __webpack_require__(/*! ../element/ElementCanvasButtons */ \"./element/ElementCanvasButtons.tsx\");\n/* harmony import */ var _colors__WEBPACK_IMPORTED_MODULE_71__ = __webpack_require__(/*! ../colors */ \"./colors.ts\");\n/* harmony import */ var _MagicButton__WEBPACK_IMPORTED_MODULE_72__ = __webpack_require__(/*! ./MagicButton */ \"./components/MagicButton.tsx\");\n/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_73__ = __webpack_require__(/*! ./icons */ \"./components/icons.tsx\");\n/* harmony import */ var _FollowMode_FollowMode__WEBPACK_IMPORTED_MODULE_74__ = __webpack_require__(/*! ./FollowMode/FollowMode */ \"./components/FollowMode/FollowMode.tsx\");\n/* harmony import */ var _actions_actionProperties__WEBPACK_IMPORTED_MODULE_75__ = __webpack_require__(/*! ../actions/actionProperties */ \"./actions/actionProperties.tsx\");\n/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_76__ = __webpack_require__(/*! ../store */ \"./store.ts\");\n/* harmony import */ var _animation_frame_handler__WEBPACK_IMPORTED_MODULE_77__ = __webpack_require__(/*! ../animation-frame-handler */ \"./animation-frame-handler.ts\");\n/* harmony import */ var _animated_trail__WEBPACK_IMPORTED_MODULE_78__ = __webpack_require__(/*! ../animated-trail */ \"./animated-trail.ts\");\n/* harmony import */ var _laser_trails__WEBPACK_IMPORTED_MODULE_79__ = __webpack_require__(/*! ../laser-trails */ \"./laser-trails.ts\");\n/* harmony import */ var _reactUtils__WEBPACK_IMPORTED_MODULE_80__ = __webpack_require__(/*! ../reactUtils */ \"./reactUtils.ts\");\n/* harmony import */ var _renderer_renderElement__WEBPACK_IMPORTED_MODULE_81__ = __webpack_require__(/*! ../renderer/renderElement */ \"./renderer/renderElement.ts\");\n/* harmony import */ var _obsidianUtils__WEBPACK_IMPORTED_MODULE_82__ = __webpack_require__(/*! ../obsidianUtils */ \"./obsidianUtils.ts\");\n/* harmony import */ var _element_collision__WEBPACK_IMPORTED_MODULE_83__ = __webpack_require__(/*! ../element/collision */ \"./element/collision.ts\");\n/* harmony import */ var _element_textWysiwyg__WEBPACK_IMPORTED_MODULE_84__ = __webpack_require__(/*! ../element/textWysiwyg */ \"./element/textWysiwyg.tsx\");\n/* harmony import */ var _scene_scrollbars__WEBPACK_IMPORTED_MODULE_85__ = __webpack_require__(/*! ../scene/scrollbars */ \"./scene/scrollbars.ts\");\n/* harmony import */ var _fractionalIndex__WEBPACK_IMPORTED_MODULE_86__ = __webpack_require__(/*! ../fractionalIndex */ \"./fractionalIndex.ts\");\n/* harmony import */ var _hyperlink_helpers__WEBPACK_IMPORTED_MODULE_87__ = __webpack_require__(/*! ./hyperlink/helpers */ \"./components/hyperlink/helpers.ts\");\n/* harmony import */ var _actions_shortcuts__WEBPACK_IMPORTED_MODULE_88__ = __webpack_require__(/*! ../actions/shortcuts */ \"./actions/shortcuts.ts\");\n/* harmony import */ var _element_resizeElements__WEBPACK_IMPORTED_MODULE_89__ = __webpack_require__(/*! ../element/resizeElements */ \"./element/resizeElements.ts\");\n/* harmony import */ var _actions_actionTextAutoResize__WEBPACK_IMPORTED_MODULE_90__ = __webpack_require__(/*! ../actions/actionTextAutoResize */ \"./actions/actionTextAutoResize.ts\");\n/* harmony import */ var _element_bounds__WEBPACK_IMPORTED_MODULE_91__ = __webpack_require__(/*! ../element/bounds */ \"./element/bounds.ts\");\n/* harmony import */ var _mermaid__WEBPACK_IMPORTED_MODULE_92__ = __webpack_require__(/*! ../mermaid */ \"./mermaid.ts\");\n/* harmony import */ var _Tooltip__WEBPACK_IMPORTED_MODULE_93__ = __webpack_require__(/*! ./Tooltip */ \"./components/Tooltip.tsx\");\n/* harmony import */ var _canvases_NewElementCanvas__WEBPACK_IMPORTED_MODULE_94__ = __webpack_require__(/*! ./canvases/NewElementCanvas */ \"./components/canvases/NewElementCanvas.tsx\");\n/* harmony import */ var _element_routing__WEBPACK_IMPORTED_MODULE_95__ = __webpack_require__(/*! ../element/routing */ \"./element/routing.ts\");\n/* harmony import */ var _element_flowchart__WEBPACK_IMPORTED_MODULE_96__ = __webpack_require__(/*! ../element/flowchart */ \"./element/flowchart.ts\");\n/* harmony import */ var _SearchMenu__WEBPACK_IMPORTED_MODULE_97__ = __webpack_require__(/*! ./SearchMenu */ \"./components/SearchMenu.tsx\");\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_98__ = __webpack_require__(/*! ../../math */ \"../math/index.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n //zsviczian\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);\nconst deviceContextInitialValue = {\n viewport: {\n isMobile: false,\n isLandscape: false\n },\n editor: {\n isMobile: false,\n canFitSidebar: false\n },\n isTouchScreen: false\n};\nconst DeviceContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext(deviceContextInitialValue);\nDeviceContext.displayName = \"DeviceContext\";\nconst ExcalidrawContainerContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext({\n container: null,\n id: null\n});\nExcalidrawContainerContext.displayName = \"ExcalidrawContainerContext\";\nconst ExcalidrawElementsContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext([]);\nExcalidrawElementsContext.displayName = \"ExcalidrawElementsContext\";\nconst ExcalidrawAppStateContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext(Object.assign(Object.assign({}, (0,_appState__WEBPACK_IMPORTED_MODULE_10__.getDefaultAppState)()), {\n width: 0,\n height: 0,\n offsetLeft: 0,\n offsetTop: 0\n}));\nExcalidrawAppStateContext.displayName = \"ExcalidrawAppStateContext\";\nconst ExcalidrawSetAppStateContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext(() => {\n console.warn(\"Uninitialized ExcalidrawSetAppStateContext context!\");\n});\nExcalidrawSetAppStateContext.displayName = \"ExcalidrawSetAppStateContext\";\nconst ExcalidrawActionManagerContext = react__WEBPACK_IMPORTED_MODULE_1___default().createContext(null);\nExcalidrawActionManagerContext.displayName = \"ExcalidrawActionManagerContext\";\nconst useApp = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(AppContext);\nconst useAppProps = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(AppPropsContext);\nconst useDevice = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(DeviceContext);\nconst useExcalidrawContainer = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(ExcalidrawContainerContext);\nconst useExcalidrawElements = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(ExcalidrawElementsContext);\nconst useExcalidrawAppState = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(ExcalidrawAppStateContext);\nconst useExcalidrawSetAppState = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(ExcalidrawSetAppStateContext);\nconst useExcalidrawActionManager = () => (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(ExcalidrawActionManagerContext);\nlet didTapTwice = false;\nlet tappedTwiceTimer = 0;\nlet isHoldingSpace = false;\nlet isPanning = false;\nlet isDraggingScrollBar = false;\nlet currentScrollBars = {\n horizontal: null,\n vertical: null\n};\nlet touchTimeout = 0;\nlet invalidateContextMenu = false;\n/**\n * Map of youtube embed video states\n */\n\nconst YOUTUBE_VIDEO_STATES = new Map();\nlet IS_PLAIN_PASTE = false;\nlet IS_PLAIN_PASTE_TIMER = 0;\nlet PLAIN_PASTE_TOAST_SHOWN = false;\nlet lastPointerUp = null;\nconst gesture = {\n pointers: new Map(),\n lastCenter: null,\n initialDistance: null,\n initialScale: null\n};\n\nclass App extends (react__WEBPACK_IMPORTED_MODULE_1___default().Component) {\n constructor(props) {\n super(props);\n this.interactiveCanvas = null;\n this.unmounted = false;\n this.device = deviceContextInitialValue;\n this.excalidrawContainerRef = react__WEBPACK_IMPORTED_MODULE_1___default().createRef();\n this.files = {};\n this.imageCache = new Map();\n this.iFrameRefs = new Map();\n /**\n * Indicates whether the embeddable's url has been validated for rendering.\n * If value not set, indicates that the validation is pending.\n * Initially or on url change the flag is not reset so that we can guarantee\n * the validation came from a trusted source (the editor).\n **/\n\n this.embedsValidationStatus = new Map();\n /** embeds that have been inserted to DOM (as a perf optim, we don't want to\n * insert to DOM before user initially scrolls to them) */\n\n this.initializedEmbeds = new Set();\n this.elementsPendingErasure = new Set();\n this.flowChartCreator = new _element_flowchart__WEBPACK_IMPORTED_MODULE_96__.FlowChartCreator();\n this.flowChartNavigator = new _element_flowchart__WEBPACK_IMPORTED_MODULE_96__.FlowChartNavigator();\n this.lastPointerDownEvent = null;\n this.lastPointerUpEvent = null;\n this.lastPointerMoveEvent = null;\n this.lastViewportPosition = {\n x: 0,\n y: 0\n };\n this.allowMobileMode = true; //zsviczian\n\n this.animationFrameHandler = new _animation_frame_handler__WEBPACK_IMPORTED_MODULE_77__.AnimationFrameHandler();\n this.laserTrails = new _laser_trails__WEBPACK_IMPORTED_MODULE_79__.LaserTrails(this.animationFrameHandler, this);\n this.eraserTrail = new _animated_trail__WEBPACK_IMPORTED_MODULE_78__.AnimatedTrail(this.animationFrameHandler, this, {\n streamline: 0.2,\n size: 5,\n keepHead: true,\n sizeMapping: c => {\n const DECAY_TIME = 200;\n const DECAY_LENGTH = 10;\n const t = Math.max(0, 1 - (performance.now() - c.pressure) / DECAY_TIME);\n const l = (DECAY_LENGTH - Math.min(DECAY_LENGTH, c.totalLength - c.currentIndex)) / DECAY_LENGTH;\n return Math.min((0,_utils__WEBPACK_IMPORTED_MODULE_34__.easeOut)(l), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.easeOut)(t));\n },\n fill: () => this.state.theme === _constants__WEBPACK_IMPORTED_MODULE_12__.THEME.LIGHT ? \"rgba(0, 0, 0, 0.2)\" : \"rgba(255, 255, 255, 0.2)\"\n });\n this.onChangeEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_69__.Emitter();\n this.onPointerDownEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_69__.Emitter();\n this.onPointerUpEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_69__.Emitter();\n this.onUserFollowEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_69__.Emitter();\n this.onScrollChangeEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_69__.Emitter();\n this.missingPointerEventCleanupEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_69__.Emitter();\n this.onRemoveEventListenersEmitter = new _emitter__WEBPACK_IMPORTED_MODULE_69__.Emitter();\n /**\n * Returns gridSize taking into account `gridModeEnabled`.\n * If disabled, returns null.\n */\n\n this.getEffectiveGridSize = () => {\n return (0,_snapping__WEBPACK_IMPORTED_MODULE_58__.isGridModeEnabled)(this) ? this.state.gridSize : null;\n };\n\n this.updateEmbedValidationStatus = (element, status) => {\n this.embedsValidationStatus.set(element.id, status);\n _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_66__.ShapeCache[\"delete\"](element);\n };\n\n this.updateEmbeddables = () => {\n const iframeLikes = new Set();\n let updated = false;\n this.scene.getNonDeletedElements().filter(element => {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(element)) {\n iframeLikes.add(element.id);\n\n if (!this.embedsValidationStatus.has(element.id)) {\n updated = true;\n const validated = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_35__.embeddableURLValidator)(element.link, this.props.validateEmbeddable);\n this.updateEmbedValidationStatus(element, validated);\n }\n } else if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(element)) {\n iframeLikes.add(element.id);\n }\n\n return false;\n });\n\n if (updated) {\n this.scene.triggerUpdate();\n } // GC\n\n\n this.iFrameRefs.forEach((ref, id) => {\n if (!iframeLikes.has(id)) {\n this.iFrameRefs.delete(id);\n }\n });\n };\n\n this.getFrameNameDOMId = frameElement => {\n return `${this.id}-frame-name-${frameElement.id}`;\n };\n\n this.frameNameBoundsCache = {\n get: frameElement => {\n let bounds = this.frameNameBoundsCache._cache.get(frameElement.id);\n\n if (!bounds || bounds.zoom !== this.state.zoom.value || bounds.versionNonce !== frameElement.versionNonce) {\n const frameNameDiv = document.getElementById(this.getFrameNameDOMId(frameElement));\n\n if (frameNameDiv) {\n const box = frameNameDiv.getBoundingClientRect();\n const boxSceneTopLeft = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.viewportCoordsToSceneCoords)({\n clientX: box.x,\n clientY: box.y\n }, this.state);\n const boxSceneBottomRight = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.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 /**\n * @private\n */\n _cache: new Map()\n };\n\n this.renderFrameNames = () => {\n if (!this.state.frameRendering.enabled || !this.state.frameRendering.name) {\n return null;\n }\n\n const isDarkTheme = this.state.theme === _constants__WEBPACK_IMPORTED_MODULE_12__.THEME.DARK;\n return this.scene.getNonDeletedFramesLikes().map(f => {\n var _a, _b;\n\n if (!(0,_element_sizeHelpers__WEBPACK_IMPORTED_MODULE_27__.isElementInViewport)(f, this.canvas.width / window.devicePixelRatio, this.canvas.height / window.devicePixelRatio, {\n offsetLeft: this.state.offsetLeft,\n offsetTop: this.state.offsetTop,\n scrollX: this.state.scrollX,\n scrollY: this.state.scrollY,\n zoom: this.state.zoom\n }, this.scene.getNonDeletedElementsMap())) {\n // if frame not visible, don't render its name\n return null;\n }\n\n const {\n x: x1,\n y: y1\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.sceneCoordsToViewportCoords)({\n sceneX: f.x,\n sceneY: f.y\n }, this.state);\n const FRAME_NAME_EDIT_PADDING = 6;\n\n const reset = () => {\n var _a;\n\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(f, {\n name: ((_a = f.name) === null || _a === void 0 ? void 0 : _a.trim()) || null\n });\n this.setState({\n editingFrame: null\n });\n };\n\n let frameNameJSX;\n const frameName = (0,_frame__WEBPACK_IMPORTED_MODULE_50__.getFrameLikeTitle)(f);\n\n if (f.id === this.state.editingFrame) {\n const frameNameInEdit = frameName;\n frameNameJSX = (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"input\", {\n autoFocus: true,\n value: frameNameInEdit,\n onChange: e => {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(f, {\n name: e.target.value\n });\n },\n onFocus: e => e.target.select(),\n onBlur: () => reset(),\n onKeyDown: event => {\n // for some inexplicable reason, `onBlur` triggered on ESC\n // does not reset `state.editingFrame` despite being called,\n // and we need to reset it here as well\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ESCAPE || event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ENTER) {\n reset();\n }\n },\n style: {\n background: this.state.viewBackgroundColor,\n filter: isDarkTheme ? _constants__WEBPACK_IMPORTED_MODULE_12__.THEME_FILTER : \"none\",\n zIndex: 2,\n border: \"none\",\n display: \"block\",\n padding: `${FRAME_NAME_EDIT_PADDING}px`,\n borderRadius: 4,\n boxShadow: \"inset 0 0 0 2px var(--color-on-primary-container)\",\n fontFamily: \"Assistant\",\n fontSize: \"14px\",\n transform: `translate(-${FRAME_NAME_EDIT_PADDING}px, ${FRAME_NAME_EDIT_PADDING}px)`,\n color: \"var(--color-gray-80)\",\n overflow: \"hidden\",\n maxWidth: `${(0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_82__.getExcalidrawContentEl)().clientWidth - x1 - FRAME_NAME_EDIT_PADDING //zsviczian was document.body\n }px`\n },\n size: frameNameInEdit.length + 1 || 1,\n dir: \"auto\",\n autoComplete: \"off\",\n autoCapitalize: \"off\",\n autoCorrect: \"off\"\n });\n } else {\n frameNameJSX = frameName;\n }\n\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n id: this.getFrameNameDOMId(f),\n style: {\n position: \"absolute\",\n // Positioning from bottom so that we don't to either\n // calculate text height or adjust using transform (which)\n // messes up input position when editing the frame name.\n // This makes the positioning deterministic and we can calculate\n // the same position when rendering to canvas / svg.\n bottom: `${this.state.height + _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.nameOffsetY - y1 + this.state.offsetTop}px`,\n left: `${x1 - this.state.offsetLeft}px`,\n zIndex: 2,\n fontSize: _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.nameFontSize,\n color: (_b = (_a = this.state.frameColor) === null || _a === void 0 ? void 0 : _a.nameColor) !== null && _b !== void 0 ? _b : isDarkTheme //zsviczian\n ? _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.nameColorDarkTheme : _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.nameColorLightTheme,\n lineHeight: _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.nameLineHeight,\n width: \"max-content\",\n maxWidth: `${f.width}px`,\n overflow: f.id === this.state.editingFrame ? \"visible\" : \"hidden\",\n whiteSpace: \"nowrap\",\n textOverflow: \"ellipsis\",\n cursor: _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.MOVE,\n pointerEvents: this.state.viewModeEnabled ? _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.disabled : _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.enabled\n },\n onPointerDown: event => this.handleCanvasPointerDown(event),\n onWheel: event => this.handleWheel(event),\n onContextMenu: this.handleCanvasContextMenu,\n onDoubleClick: () => {\n this.setState({\n editingFrame: f.id\n });\n }\n }, {\n children: frameNameJSX\n }), f.id);\n });\n };\n\n this.focusContainer = () => {\n var _a;\n\n (_a = this.excalidrawContainerRef.current) === null || _a === void 0 ? void 0 : _a.focus();\n };\n\n this.getSceneElementsIncludingDeleted = () => {\n return this.scene.getElementsIncludingDeleted();\n };\n\n this.getSceneElements = () => {\n return this.scene.getNonDeletedElements();\n };\n\n this.onInsertElements = elements => {\n this.addElementsFromPasteOrLibrary({\n elements,\n position: \"center\",\n files: null\n });\n };\n\n this.onExportImage = async (type, elements, opts) => {\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"export\", type, \"ui\");\n const fileHandle = await (0,_data__WEBPACK_IMPORTED_MODULE_13__.exportCanvas)(type, elements, this.state, this.files, {\n exportBackground: this.state.exportBackground,\n name: this.getName(),\n viewBackgroundColor: this.state.viewBackgroundColor,\n exportingFrame: opts.exportingFrame\n }).catch(_utils__WEBPACK_IMPORTED_MODULE_34__.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_40__.isImageFileHandle)(fileHandle)) {\n this.setState({\n fileHandle\n });\n }\n };\n\n this.magicGenerations = new Map();\n\n this.updateMagicGeneration = ({\n frameElement,\n data\n }) => {\n if (data.status === \"pending\") {\n // We don't wanna persist pending state to storage. It should be in-app\n // state only.\n // Thus reset so that we prefer local cache (if there was some\n // generationData set previously)\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(frameElement, {\n customData: {\n generationData: undefined\n }\n }, false);\n } else {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(frameElement, {\n customData: {\n generationData: data\n }\n }, false);\n }\n\n this.magicGenerations.set(frameElement.id, data);\n this.triggerRender();\n };\n\n this.plugins = {};\n\n this.onMagicframeToolSelect = () => {\n const selectedElements = this.scene.getSelectedElements({\n selectedElementIds: this.state.selectedElementIds\n });\n\n if (selectedElements.length === 0) {\n this.setActiveTool({\n type: _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.magicframe\n });\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"tool-select (empty-selection)\", \"d2c\");\n } else {\n const selectedMagicFrame = selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isMagicFrameElement)(selectedElements[0]) && selectedElements[0]; // case: user selected elements containing frame-like(s) or are frame\n // members, we don't want to wrap into another magicframe\n // (unless the only selected element is a magic frame which we reuse)\n\n if (!selectedMagicFrame && selectedElements.some(el => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(el) || el.frameId)) {\n this.setActiveTool({\n type: _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.magicframe\n });\n return;\n }\n\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"tool-select (existing selection)\", \"d2c\");\n let frame;\n\n if (selectedMagicFrame) {\n // a single magicframe already selected -> use it\n frame = selectedMagicFrame;\n } else {\n // selected elements aren't wrapped in magic frame yet -> wrap now\n const [minX, minY, maxX, maxY] = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(selectedElements);\n const padding = 50;\n frame = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newMagicFrameElement)(Object.assign(Object.assign({}, _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE), {\n x: minX - padding,\n y: minY - padding,\n width: maxX - minX + padding * 2,\n height: maxY - minY + padding * 2,\n opacity: 100,\n locked: false\n }));\n this.scene.insertElement(frame);\n\n for (const child of selectedElements) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(child, {\n frameId: frame.id\n });\n }\n\n this.setState({\n selectedElementIds: {\n [frame.id]: true\n }\n });\n }\n\n this.onMagicFrameGenerate(frame, \"upstream\");\n }\n };\n\n this.openEyeDropper = ({\n type\n }) => {\n _jotai__WEBPACK_IMPORTED_MODULE_55__.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 storeAction: _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.CAPTURE\n });\n } else {\n this.syncActionResult({\n appState: Object.assign(Object.assign({}, this.state), {\n currentItemBackgroundColor: color\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.CAPTURE\n });\n }\n } else {\n this.updateScene({\n elements: this.scene.getElementsIncludingDeleted().map(el => {\n if (this.state.selectedElementIds[el.id]) {\n return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(el, {\n [shouldUpdateStrokeColor ? \"strokeColor\" : \"backgroundColor\"]: color\n });\n }\n\n return el;\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.CAPTURE\n });\n }\n },\n keepOpenOnAlt: false\n });\n };\n\n this.dismissLinearEditor = () => {\n setTimeout(() => {\n this.setState({\n editingLinearElement: null\n });\n });\n };\n\n this.syncActionResult = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(actionResult => {\n var _a, _b, _c, _d, _e, _f, _g, _h;\n\n if (this.unmounted || actionResult === false) {\n return;\n }\n\n if (actionResult.storeAction === _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.UPDATE) {\n this.store.shouldUpdateSnapshot();\n } else if (actionResult.storeAction === _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.CAPTURE) {\n this.store.shouldCaptureIncrement();\n }\n\n let didUpdate = false;\n let editingTextElement = null;\n\n if (actionResult.elements) {\n this.scene.replaceAllElements(actionResult.elements);\n didUpdate = true;\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 || editingTextElement || this.state.contextMenu) {\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 const theme = ((_c = actionResult === null || actionResult === void 0 ? void 0 : actionResult.appState) === null || _c === void 0 ? void 0 : _c.theme) || this.props.theme || _constants__WEBPACK_IMPORTED_MODULE_12__.THEME.LIGHT;\n const name = (_e = (_d = actionResult === null || actionResult === void 0 ? void 0 : actionResult.appState) === null || _d === void 0 ? void 0 : _d.name) !== null && _e !== void 0 ? _e : this.state.name;\n const errorMessage = (_g = (_f = actionResult === null || actionResult === void 0 ? void 0 : actionResult.appState) === null || _f === void 0 ? void 0 : _f.errorMessage) !== null && _g !== void 0 ? _g : 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 editingTextElement = ((_h = actionResult.appState) === null || _h === void 0 ? void 0 : _h.editingTextElement) || null; // make sure editingTextElement points to latest element reference\n\n if (actionResult.elements && editingTextElement) {\n actionResult.elements.forEach(element => {\n if ((editingTextElement === null || editingTextElement === void 0 ? void 0 : editingTextElement.id) === element.id && editingTextElement !== element && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isNonDeletedElement)(element) && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(element)) {\n editingTextElement = element;\n }\n });\n }\n\n if (editingTextElement === null || editingTextElement === void 0 ? void 0 : editingTextElement.isDeleted) {\n editingTextElement = 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 editingTextElement,\n viewModeEnabled,\n zenModeEnabled,\n theme,\n name,\n errorMessage\n });\n });\n didUpdate = true;\n }\n\n if (!didUpdate && actionResult.storeAction !== _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.NONE) {\n this.scene.triggerUpdate();\n }\n }); // Lifecycle\n\n this.onBlur = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(() => {\n isHoldingSpace = false;\n this.setState({\n isBindingEnabled: true\n });\n });\n\n this.onUnload = () => {\n this.onBlur();\n };\n\n this.disableEvent = event => {\n event.preventDefault();\n };\n\n this.resetHistory = () => {\n this.history.clear();\n };\n\n this.resetStore = () => {\n this.store.clear();\n };\n /**\n * Resets scene & history.\n * ! Do not use to clear scene user action !\n */\n\n\n this.resetScene = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(opts => {\n this.scene.replaceAllElements([]);\n this.setState(state => Object.assign(Object.assign({}, (0,_appState__WEBPACK_IMPORTED_MODULE_10__.getDefaultAppState)()), {\n isLoading: (opts === null || opts === void 0 ? void 0 : opts.resetLoadingState) ? false : state.isLoading,\n theme: this.state.theme\n }));\n this.resetStore();\n this.resetHistory();\n });\n\n this.initializeScene = async () => {\n var _a;\n\n if (\"launchQueue\" in window && \"LaunchParams\" in window) {\n window.launchQueue.setConsumer(async launchParams => {\n if (!launchParams.files.length) {\n return;\n }\n\n const fileHandle = launchParams.files[0];\n const blob = await fileHandle.getFile();\n this.loadFileToCanvas(new File([blob], blob.name || \"\", {\n type: blob.type\n }), fileHandle);\n });\n }\n\n if (this.props.theme) {\n this.setState({\n theme: this.props.theme\n });\n }\n\n if (!this.state.isLoading) {\n this.setState({\n isLoading: true\n });\n }\n\n let initialData = null;\n\n try {\n if (typeof this.props.initialData === \"function\") {\n initialData = (await this.props.initialData()) || null;\n } else {\n initialData = (await this.props.initialData) || null;\n }\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_28__.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 }\n\n this.resetStore();\n this.resetHistory();\n this.syncActionResult(Object.assign(Object.assign({}, scene), {\n storeAction: _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.UPDATE\n })); // clear the shape and image cache so that any images in initialData\n // can be loaded fresh\n\n this.clearImageShapeCache(); // FontFaceSet loadingdone event we listen on may not always\n // fire (looking at you Safari), so on init we manually load all\n // fonts and rerender scene text elements once done. This also\n // seems faster even in browsers that do fire the loadingdone event.\n\n this.fonts.loadSceneFonts();\n };\n\n this.isMobileBreakpoint = (width, height) => {\n return width !== 0 && //zsviczian changing tabs in Obsidian causes MobileMenu to be rendered\n this.allowMobileMode && ( //zsviczian\n width < _constants__WEBPACK_IMPORTED_MODULE_12__.MQ_MAX_WIDTH_PORTRAIT || height < _constants__WEBPACK_IMPORTED_MODULE_12__.MQ_MAX_HEIGHT_LANDSCAPE && width < _constants__WEBPACK_IMPORTED_MODULE_12__.MQ_MAX_WIDTH_LANDSCAPE);\n };\n\n this.refreshViewportBreakpoints = () => {\n const container = this.excalidrawContainerRef.current;\n\n if (!container) {\n return;\n }\n\n const {\n clientWidth: viewportWidth,\n clientHeight: viewportHeight\n } = (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_82__.getExcalidrawContentEl)(); //zsviczian was document.body;\n\n const prevViewportState = this.device.viewport;\n const nextViewportState = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.updateObject)(prevViewportState, {\n isLandscape: viewportWidth > viewportHeight,\n isMobile: this.isMobileBreakpoint(viewportWidth, viewportHeight)\n });\n\n if (prevViewportState !== nextViewportState) {\n this.device = Object.assign(Object.assign({}, this.device), {\n viewport: nextViewportState\n });\n return true;\n }\n\n return false;\n };\n\n this.refreshEditorBreakpoints = () => {\n const container = this.excalidrawContainerRef.current;\n\n if (!container) {\n return;\n }\n\n const {\n width: editorWidth,\n height: editorHeight\n } = container.getBoundingClientRect();\n const sidebarBreakpoint = this.props.UIOptions.dockedSidebarBreakpoint != null ? this.props.UIOptions.dockedSidebarBreakpoint : _constants__WEBPACK_IMPORTED_MODULE_12__.MQ_RIGHT_SIDEBAR_MIN_WIDTH;\n const prevEditorState = this.device.editor;\n const nextEditorState = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.updateObject)(prevEditorState, {\n isMobile: this.isMobileBreakpoint(editorWidth, editorHeight),\n canFitSidebar: editorWidth > sidebarBreakpoint\n });\n\n if (prevEditorState !== nextEditorState) {\n this.device = Object.assign(Object.assign({}, this.device), {\n editor: nextEditorState\n });\n return true;\n }\n\n return false;\n };\n\n this.onResize = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(() => {\n this.scene.getElementsIncludingDeleted().forEach(element => _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_66__.ShapeCache[\"delete\"](element));\n this.refreshViewportBreakpoints();\n this.updateDOMRect();\n\n if (!_constants__WEBPACK_IMPORTED_MODULE_12__.supportsResizeObserver) {\n this.refreshEditorBreakpoints();\n }\n\n this.setState({});\n });\n /** generally invoked only if fullscreen was invoked programmatically */\n\n this.onFullscreenChange = () => {\n var _a;\n\n if ( // points to the iframe element we fullscreened\n !document.fullscreenElement && ((_a = this.state.activeEmbeddable) === null || _a === void 0 ? void 0 : _a.state) === \"active\") {\n this.setState({\n activeEmbeddable: null\n });\n }\n };\n\n this.renderInteractiveSceneCallback = ({\n atLeastOneVisibleElement,\n scrollBars,\n elementsMap\n }) => {\n if (!document.querySelector(\".excalidraw\")) {\n return;\n } //zsviczian - address issue when moving excalidraw to a new window/document\n\n\n if (scrollBars) {\n currentScrollBars = scrollBars;\n }\n\n const scrolledOutside = // hide when editing text\n this.state.editingTextElement ? false : !atLeastOneVisibleElement && elementsMap.size > 0;\n\n if (this.state.scrolledOutside !== scrolledOutside) {\n this.setState({\n scrolledOutside\n });\n }\n\n this.scheduleImageRefresh();\n };\n\n this.onScroll = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.debounce)(() => {\n const {\n offsetTop,\n offsetLeft\n } = this.getCanvasOffsets();\n this.setState(state => {\n if (state.offsetLeft === offsetLeft && state.offsetTop === offsetTop) {\n return null;\n }\n\n return {\n offsetTop,\n offsetLeft\n };\n });\n }, _constants__WEBPACK_IMPORTED_MODULE_12__.SCROLL_TIMEOUT); // Copy/paste\n\n this.onCut = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.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_34__.isWritableElement)(event.target)) {\n return;\n }\n\n this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionCut, \"keyboard\", event);\n event.preventDefault();\n event.stopPropagation();\n });\n this.onCopy = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.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_34__.isWritableElement)(event.target)) {\n return;\n }\n\n this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionCopy, \"keyboard\", event);\n event.preventDefault();\n event.stopPropagation();\n });\n\n this.onTouchStart = event => {\n // fix for Apple Pencil Scribble (do not prevent for other devices)\n if (_constants__WEBPACK_IMPORTED_MODULE_12__.isIOS) {\n event.preventDefault();\n }\n\n if (!didTapTwice) {\n didTapTwice = true;\n clearTimeout(tappedTwiceTimer);\n tappedTwiceTimer = window.setTimeout(App.resetTapTwice, _constants__WEBPACK_IMPORTED_MODULE_12__.TAP_TWICE_TIMEOUT);\n return;\n } // insert text only if we tapped twice with a single finger\n // event.touches.length === 1 will also prevent inserting text when user's zooming\n\n\n if (didTapTwice && event.touches.length === 1) {\n const touch = event.touches[0]; // @ts-ignore\n\n this.handleCanvasDoubleClick({\n clientX: touch.clientX,\n clientY: touch.clientY\n });\n didTapTwice = false;\n clearTimeout(tappedTwiceTimer);\n }\n\n if (event.touches.length === 2) {\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.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_51__.makeNextSelectedElementIds)(this.state.previousSelectedElementIds, this.state)\n });\n } else {\n gesture.pointers.clear();\n }\n };\n\n this.pasteFromClipboard = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(async event => {\n var _a, _b;\n\n const isPlainPaste = !!IS_PLAIN_PASTE; // #686\n\n const target = document.activeElement;\n const isExcalidrawActive = (_a = this.excalidrawContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(target);\n\n if (event && !isExcalidrawActive) {\n return;\n }\n\n const elementUnderCursor = document.elementFromPoint(this.lastViewportPosition.x, this.lastViewportPosition.y);\n\n if (event && (!(elementUnderCursor instanceof HTMLCanvasElement) || (0,_utils__WEBPACK_IMPORTED_MODULE_34__.isWritableElement)(target))) {\n return;\n }\n\n const {\n x: sceneX,\n y: sceneY\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.viewportCoordsToSceneCoords)({\n clientX: this.lastViewportPosition.x,\n clientY: this.lastViewportPosition.y\n }, this.state); // must be called in the same frame (thus before any awaits) as the paste\n // event else some browsers (FF...) will clear the clipboardData\n // (something something security)\n\n let file = (_b = event === null || event === void 0 ? void 0 : event.clipboardData) === null || _b === void 0 ? void 0 : _b.files[0];\n const data = await (0,_clipboard__WEBPACK_IMPORTED_MODULE_11__.parseClipboard)(event, isPlainPaste);\n\n if (!file && !isPlainPaste) {\n if (data.mixedContent) {\n return this.addElementsFromMixedContentPaste(data.mixedContent, {\n isPlainPaste,\n sceneX,\n sceneY\n });\n } else if (data.text) {\n const string = data.text.trim();\n\n if (string.startsWith(\"<svg\") && string.endsWith(\"</svg>\")) {\n // ignore SVG validation/normalization which will be done during image\n // initialization\n file = (0,_data_blob__WEBPACK_IMPORTED_MODULE_40__.SVGStringToFile)(string);\n }\n }\n } // prefer spreadsheet data over image file (MS Office/Libre Office)\n\n\n if ((0,_data_blob__WEBPACK_IMPORTED_MODULE_40__.isSupportedImageFile)(file) && !data.spreadsheet) {\n if (!this.isToolSupported(\"image\")) {\n this.setState({\n errorMessage: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageToolNotSupported\")\n });\n return;\n }\n\n const imageElement = this.createImageElement({\n sceneX,\n sceneY\n });\n this.insertImageElement(imageElement, file);\n this.initializeImageDimensions(imageElement);\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.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 if (data.text && (0,_mermaid__WEBPACK_IMPORTED_MODULE_92__.isMaybeMermaidDefinition)(data.text)) {\n const api = await Promise.resolve(/*! import() */).then(__webpack_require__.bind(__webpack_require__, /*! @zsviczian/mermaid-to-excalidraw */ \"../../node_modules/@zsviczian/mermaid-to-excalidraw/dist/index.js\")); //zsviczian\n\n try {\n const {\n elements: skeletonElements,\n files\n } = await api.parseMermaidToExcalidraw(data.text, {\n //zsviczian reverting https://github.com/excalidraw/excalidraw/pull/8226\n fontSize: _constants__WEBPACK_IMPORTED_MODULE_12__.DEFAULT_FONT_SIZE\n }); //await api.parseMermaidToExcalidraw(data.text);\n\n const elements = (0,_data_transform__WEBPACK_IMPORTED_MODULE_62__.convertToExcalidrawElements)(skeletonElements, {\n regenerateIds: true\n });\n this.addElementsFromPasteOrLibrary({\n elements,\n files,\n position: \"cursor\"\n });\n return;\n } catch (err) {\n console.warn(`parsing pasted text as mermaid definition failed: ${err.message}`);\n }\n }\n\n const nonEmptyLines = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.normalizeEOL)(data.text).split(/\\n+/).map(s => s.trim()).filter(Boolean);\n const embbeddableUrls = nonEmptyLines.map(str => (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_35__.maybeParseEmbedSrc)(str)).filter(string => {\n var _a;\n\n return (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_35__.embeddableURLValidator)(string, this.props.validateEmbeddable) && (/^(http|https):\\/\\/[^\\s/$.?#].[^\\s]*$/.test(string) || ((_a = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_35__.getEmbedLink)(string)) === null || _a === void 0 ? void 0 : _a.type) === \"video\");\n });\n\n if (!IS_PLAIN_PASTE && embbeddableUrls.length > 0 && // if there were non-embeddable text (lines) mixed in with embeddable\n // urls, ignore and paste as text\n embbeddableUrls.length === nonEmptyLines.length) {\n const embeddables = [];\n\n for (const url of embbeddableUrls) {\n const prevEmbeddable = embeddables[embeddables.length - 1];\n const embeddable = this.insertEmbeddableElement({\n sceneX: prevEmbeddable ? prevEmbeddable.x + prevEmbeddable.width + 20 : sceneX,\n sceneY,\n link: (0,_data_url__WEBPACK_IMPORTED_MODULE_46__.normalizeLink)(url)\n });\n\n if (embeddable) {\n embeddables.push(embeddable);\n }\n }\n\n if (embeddables.length) {\n this.setState({\n selectedElementIds: Object.fromEntries(embeddables.map(embeddable => [embeddable.id, true]))\n });\n }\n\n return;\n }\n\n this.addTextFromPaste(data.text, isPlainPaste);\n }\n\n this.setActiveTool({\n type: \"selection\"\n });\n event === null || event === void 0 ? void 0 : event.preventDefault();\n });\n\n this.addElementsFromPasteOrLibrary = opts => {\n let elements = opts.elements.map((el, _, elements) => {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isElbowArrow)(el)) {\n const startEndElements = [el.startBinding && elements.find(l => {\n var _a;\n\n return l.id === ((_a = el.startBinding) === null || _a === void 0 ? void 0 : _a.elementId);\n }), el.endBinding && elements.find(l => {\n var _a;\n\n return l.id === ((_a = el.endBinding) === null || _a === void 0 ? void 0 : _a.elementId);\n })];\n const startBinding = startEndElements[0] ? el.startBinding : null;\n const endBinding = startEndElements[1] ? el.endBinding : null;\n return Object.assign(Object.assign({}, el), (0,_element_routing__WEBPACK_IMPORTED_MODULE_95__.updateElbowArrow)(Object.assign(Object.assign({}, el), {\n startBinding,\n endBinding\n }), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.toBrandedType)(new Map(startEndElements.filter(x => x != null).map(el => [el.id, el]))), [el.points[0], el.points[el.points.length - 1]]));\n }\n\n return el;\n });\n elements = (0,_data_restore__WEBPACK_IMPORTED_MODULE_15__.restoreElements)(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_34__.distance)(minX, maxX) / 2;\n const elementsCenterY = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.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_34__.viewportCoordsToSceneCoords)({\n clientX,\n clientY\n }, this.state);\n const dx = x - elementsCenterX;\n const dy = y - elementsCenterY;\n const [gridX, gridY] = (0,_snapping__WEBPACK_IMPORTED_MODULE_58__.getGridPoint)(dx, dy, this.getEffectiveGridSize());\n const newElements = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.duplicateElements)(elements.map(element => {\n return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(element, {\n x: element.x + gridX - minX,\n y: element.y + gridY - minY\n });\n }), {\n randomizeSeed: !opts.retainSeed\n });\n const prevElements = this.scene.getElementsIncludingDeleted();\n const nextElements = [...prevElements, ...newElements];\n (0,_fractionalIndex__WEBPACK_IMPORTED_MODULE_86__.syncMovedIndices)(nextElements, (0,_utils__WEBPACK_IMPORTED_MODULE_34__.arrayToMap)(newElements));\n const topLayerFrame = this.getTopLayerFrameAtSceneCoords({\n x,\n y\n });\n\n if (topLayerFrame) {\n const eligibleElements = (0,_frame__WEBPACK_IMPORTED_MODULE_50__.filterElementsEligibleAsFrameChildren)(newElements, topLayerFrame);\n (0,_frame__WEBPACK_IMPORTED_MODULE_50__.addElementsToFrame)(nextElements, eligibleElements, topLayerFrame);\n }\n\n this.scene.replaceAllElements(nextElements);\n newElements.forEach(newElement => {\n if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(newElement) && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(newElement)) {\n const container = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.getContainerElement)(newElement, this.scene.getElementsMapIncludingDeleted());\n (0,_element__WEBPACK_IMPORTED_MODULE_16__.redrawTextBoundingBox)(newElement, container, this.scene.getElementsMapIncludingDeleted());\n }\n });\n\n if (opts.files) {\n this.files = Object.assign(Object.assign({}, this.files), opts.files);\n }\n\n this.store.shouldCaptureIncrement();\n const nextElementsToSelect = (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.excludeElementsInFramesFromSelection)(newElements);\n this.setState(Object.assign(Object.assign(Object.assign({}, this.state), {\n // keep sidebar (presumably the library) open if it's docked and\n // can fit.\n //\n // Note, we should close the sidebar only if we're dropping items\n // from library, not when pasting from clipboard. Alas.\n openSidebar: this.state.openSidebar && this.device.editor.canFitSidebar && _jotai__WEBPACK_IMPORTED_MODULE_55__.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 canvasOffsets: this.getEditorUIOffsets()\n });\n }\n };\n\n this.setAppState = (state, callback) => {\n this.setState(state, callback);\n };\n\n this.removePointer = event => {\n if (touchTimeout) {\n this.resetContextMenuTimer();\n }\n\n gesture.pointers.delete(event.pointerId);\n };\n\n this.toggleLock = (source = \"ui\") => {\n if (!this.state.activeTool.locked) {\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"toolbar\", \"toggleLock\", `${source} (${this.device.editor.isMobile ? \"mobile\" : \"desktop\"})`);\n }\n\n this.setState(prevState => {\n return {\n activeTool: Object.assign(Object.assign(Object.assign({}, prevState.activeTool), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.updateActiveTool)(this.state, prevState.activeTool.locked ? {\n type: \"selection\"\n } : prevState.activeTool)), {\n locked: !prevState.activeTool.locked\n })\n };\n });\n };\n\n this.updateFrameRendering = opts => {\n this.setState(prevState => {\n var _a, _b, _c, _d;\n\n const next = typeof opts === \"function\" ? opts(prevState.frameRendering) : opts;\n return {\n frameRendering: {\n enabled: (_a = next === null || next === void 0 ? void 0 : next.enabled) !== null && _a !== void 0 ? _a : prevState.frameRendering.enabled,\n clip: (_b = next === null || next === void 0 ? void 0 : next.clip) !== null && _b !== void 0 ? _b : prevState.frameRendering.clip,\n name: (_c = next === null || next === void 0 ? void 0 : next.name) !== null && _c !== void 0 ? _c : prevState.frameRendering.name,\n outline: (_d = next === null || next === void 0 ? void 0 : next.outline) !== null && _d !== void 0 ? _d : prevState.frameRendering.outline\n }\n };\n });\n };\n\n this.togglePenMode = force => {\n this.setState(prevState => {\n return {\n penMode: force !== null && force !== void 0 ? force : !prevState.penMode,\n penDetected: true\n };\n });\n };\n\n this.onHandToolToggle = () => {\n //zsviczian added timeout because button won't select otherwise\n setTimeout(() => this.actionManager.executeAction(_actions_actionCanvas__WEBPACK_IMPORTED_MODULE_54__.actionToggleHandTool));\n };\n /**\n * Zooms on canvas viewport center\n */\n\n\n this.zoomCanvas = (\n /**\n * Decimal fraction, auto-clamped between MIN_ZOOM and MAX_ZOOM.\n * 1 = 100% zoom, 2 = 200% zoom, 0.5 = 50% zoom\n */\n value) => {\n this.setState(Object.assign({}, (0,_scene_zoom__WEBPACK_IMPORTED_MODULE_30__.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_28__.getNormalizedZoom)(value)\n }, this.state)));\n };\n\n this.cancelInProgressAnimation = null;\n\n this.scrollToContent = (target = this.scene.getNonDeletedElements(), opts) => {\n var _a, _b;\n\n (_a = this.cancelInProgressAnimation) === null || _a === void 0 ? void 0 : _a.call(this); // convert provided target into ExcalidrawElement[] if necessary\n\n const targetElements = Array.isArray(target) ? target : [target];\n let zoom = this.state.zoom;\n let scrollX = this.state.scrollX;\n let scrollY = this.state.scrollY;\n\n if ((opts === null || opts === void 0 ? void 0 : opts.fitToContent) || (opts === null || opts === void 0 ? void 0 : opts.fitToViewport)) {\n const {\n appState\n } = (0,_actions_actionCanvas__WEBPACK_IMPORTED_MODULE_54__.zoomToFit)({\n canvasOffsets: opts.canvasOffsets,\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 minZoom: opts === null || opts === void 0 ? void 0 : opts.minZoom,\n maxZoom: opts === null || opts === void 0 ? void 0 : opts.maxZoom\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_28__.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_34__.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_34__.easeOut)(progress));\n } // handle using default\n\n\n return undefined;\n },\n onStep: ({\n scrollX,\n scrollY,\n zoom\n }) => {\n this.setState({\n scrollX,\n scrollY,\n zoom: {\n value: zoom\n }\n });\n },\n onStart: () => {\n this.setState({\n shouldCacheIgnoreZoom: true\n });\n },\n onEnd: () => {\n this.setState({\n shouldCacheIgnoreZoom: false\n });\n },\n onCancel: () => {\n this.setState({\n shouldCacheIgnoreZoom: false\n });\n },\n duration: (_b = opts === null || opts === void 0 ? void 0 : opts.duration) !== null && _b !== void 0 ? _b : 500\n });\n\n this.cancelInProgressAnimation = () => {\n cancel();\n this.cancelInProgressAnimation = null;\n };\n } else {\n this.setState({\n scrollX,\n scrollY,\n zoom\n });\n }\n };\n\n this.maybeUnfollowRemoteUser = () => {\n if (this.state.userToFollow) {\n this.setState({\n userToFollow: null\n });\n }\n };\n /** use when changing scrollX/scrollY/zoom based on user interaction */\n\n\n this.translateCanvas = state => {\n var _a;\n\n (_a = this.cancelInProgressAnimation) === null || _a === void 0 ? void 0 : _a.call(this);\n this.maybeUnfollowRemoteUser();\n this.setState(state);\n }; //zsviczian\n\n\n this.zoomToFit = (target = this.scene.getNonDeletedElements(), maxZoom = 1, //null will zoom to max based on viewport\n margin = 0.03) => {\n if (!target) {\n target = this.scene.getNonDeletedElements();\n }\n\n if (target.length === 0) {\n maxZoom = 1;\n }\n\n this.setState((0,_actions_actionCanvas__WEBPACK_IMPORTED_MODULE_54__.zoomToFitElements)(target, this.state, false, this, maxZoom, margin).appState);\n }; //zsviczian\n\n\n this.startLineEditor = (el, selectedPointsIndices = null) => {\n if (!el || !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(el)) {\n return;\n }\n\n const editingLinearElement = new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(el);\n this.setState({\n selectedLinearElement: editingLinearElement,\n editingLinearElement: Object.assign(Object.assign({}, editingLinearElement), {\n selectedPointsIndices\n })\n });\n }; //zsviczian\n\n\n this.updateContainerSize = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(containers => {\n containers.forEach(el => {\n const [x, y] = (0,_math__WEBPACK_IMPORTED_MODULE_98__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(el.x + el.width, el.y + el.height), (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(el.x + el.width / 2, el.y + el.height / 2), el.angle);\n (0,_element_resizeElements__WEBPACK_IMPORTED_MODULE_89__.resizeSingleElement)(new Map().set(el.id, el), false, el, this.scene.getElementsMapIncludingDeleted(), \"se\", true, x, y);\n });\n });\n\n this.setToast = toast => {\n this.setState({\n toast\n });\n };\n\n this.restoreFileFromShare = async () => {\n try {\n const webShareTargetCache = await caches.open(\"web-share-target\");\n const response = await webShareTargetCache.match(\"shared-file\");\n\n if (response) {\n const blob = await response.blob();\n const file = new File([blob], blob.name || \"\", {\n type: blob.type\n });\n this.loadFileToCanvas(file, null);\n await webShareTargetCache.delete(\"shared-file\");\n window.history.replaceState(null, _constants__WEBPACK_IMPORTED_MODULE_12__.APP_NAME, window.location.pathname);\n }\n } catch (error) {\n this.setState({\n errorMessage: error.message\n });\n }\n };\n /** adds supplied files to existing files in the appState */\n\n\n this.addFiles = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.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.clearImageShapeCache(Object.fromEntries(filesMap));\n this.scene.triggerUpdate();\n this.addNewImagesToImageCache();\n }); //zsviczian https://github.com/zsviczian/excalibrain/issues/9\n\n this.setMobileModeAllowed = allow => {\n const {\n width: editorWidth,\n height: editorHeight\n } = this.excalidrawContainerRef.current.getBoundingClientRect();\n this.allowMobileMode = allow;\n const prevEditorState = this.device.editor;\n let nextEditorState;\n\n if (allow) {\n nextEditorState = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.updateObject)(prevEditorState, {\n isMobile: this.isMobileBreakpoint(editorWidth, editorHeight)\n });\n } else {\n nextEditorState = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.updateObject)(prevEditorState, {\n isMobile: false //must test this\n\n });\n }\n\n if (prevEditorState !== nextEditorState) {\n this.device = Object.assign(Object.assign({}, this.device), {\n editor: nextEditorState\n });\n this.forceUpdate();\n }\n }; //zsviczian\n\n\n this.debounceClearHighlightSearchResults = false;\n\n this.selectElements = (elements, highlightSearchResult = false) => {\n //zsviczian\n if (highlightSearchResult) {\n this.debounceClearHighlightSearchResults = true;\n setTimeout(() => {\n this.debounceClearHighlightSearchResults = false;\n }, 500);\n }\n\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 highlightSearchResult\n }),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.NONE,\n forceFlushSync: 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,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(sceneData => {\n var _a;\n\n const nextElements = (0,_fractionalIndex__WEBPACK_IMPORTED_MODULE_86__.syncInvalidIndices)((_a = sceneData.elements) !== null && _a !== void 0 ? _a : []);\n\n if (sceneData.storeAction && sceneData.storeAction !== _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.NONE) {\n const prevCommittedAppState = this.store.snapshot.appState;\n const prevCommittedElements = this.store.snapshot.elements;\n const nextCommittedAppState = sceneData.appState ? Object.assign({}, prevCommittedAppState, sceneData.appState) // new instance, with partial appstate applied to previously captured one, including hidden prop inside `prevCommittedAppState`\n : prevCommittedAppState;\n const nextCommittedElements = sceneData.elements ? this.store.filterUncomittedElements(this.scene.getElementsMapIncludingDeleted(), // Only used to detect uncomitted local elements\n (0,_utils__WEBPACK_IMPORTED_MODULE_34__.arrayToMap)(nextElements)) : prevCommittedElements; // WARN: store action always performs deep clone of changed elements, for ephemeral remote updates (i.e. remote dragging, resizing, drawing) we might consider doing something smarter\n // do NOT schedule store actions (execute after re-render), as it might cause unexpected concurrency issues if not handled well\n\n if (sceneData.storeAction === _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.CAPTURE) {\n this.store.captureIncrement(nextCommittedElements, nextCommittedAppState);\n } else if (sceneData.storeAction === _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.UPDATE) {\n this.store.updateSnapshot(nextCommittedElements, nextCommittedAppState);\n }\n } //zsviczian forceFlushSync is set to true in ExcalidrawView.updateScene.\n //without this e.g. text search did not select the elements\n\n\n if (sceneData.forceFlushSync === true) {\n (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.flushSync)(() => {\n if (sceneData.appState) {\n this.setState(sceneData.appState);\n }\n });\n } else if (sceneData.appState) {\n this.setState(sceneData.appState);\n }\n\n if (sceneData.elements) {\n this.scene.replaceAllElements(nextElements);\n }\n\n if (sceneData.collaborators) {\n this.setState({\n collaborators: sceneData.collaborators\n });\n }\n });\n\n this.triggerRender = (\n /** force always re-renders canvas even if no change */\n force) => {\n if (force === true) {\n this.scene.triggerUpdate();\n } else {\n this.setState({});\n }\n };\n /**\n * @returns whether the menu was toggled on or off\n */\n\n\n this.toggleSidebar = ({\n name,\n tab,\n force\n }) => {\n var _a, _b;\n\n let nextName;\n\n if (force === undefined) {\n nextName = ((_a = this.state.openSidebar) === null || _a === void 0 ? void 0 : _a.name) === name && ((_b = this.state.openSidebar) === null || _b === void 0 ? void 0 : _b.tab) === tab ? null : name;\n } else {\n nextName = force ? name : null;\n }\n\n const nextState = nextName ? {\n name: nextName\n } : null;\n\n if (nextState && tab) {\n nextState.tab = tab;\n }\n\n this.setState({\n openSidebar: nextState\n });\n return !!nextName;\n };\n\n this.updateCurrentCursorPosition = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(event => {\n this.lastViewportPosition.x = event.clientX;\n this.lastViewportPosition.y = event.clientY;\n });\n\n this.getEditorUIOffsets = () => {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;\n\n const toolbarBottom = (_e = (_d = (_c = (_b = (_a = this.excalidrawContainerRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.querySelector(\".App-toolbar\")) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect()) === null || _d === void 0 ? void 0 : _d.bottom) !== null && _e !== void 0 ? _e : 0;\n const sidebarRect = (_h = (_g = (_f = this.excalidrawContainerRef) === null || _f === void 0 ? void 0 : _f.current) === null || _g === void 0 ? void 0 : _g.querySelector(\".sidebar\")) === null || _h === void 0 ? void 0 : _h.getBoundingClientRect();\n const propertiesPanelRect = (_l = (_k = (_j = this.excalidrawContainerRef) === null || _j === void 0 ? void 0 : _j.current) === null || _k === void 0 ? void 0 : _k.querySelector(\".App-menu__left\")) === null || _l === void 0 ? void 0 : _l.getBoundingClientRect();\n const PADDING = 16;\n return (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.getLanguage)().rtl ? {\n top: toolbarBottom + PADDING,\n right: Math.max(this.state.width - ((_m = propertiesPanelRect === null || propertiesPanelRect === void 0 ? void 0 : propertiesPanelRect.left) !== null && _m !== void 0 ? _m : this.state.width), 0) + PADDING,\n bottom: PADDING,\n left: Math.max((_o = sidebarRect === null || sidebarRect === void 0 ? void 0 : sidebarRect.right) !== null && _o !== void 0 ? _o : 0, 0) + PADDING\n } : {\n top: toolbarBottom + PADDING,\n right: Math.max(this.state.width - ((_p = sidebarRect === null || sidebarRect === void 0 ? void 0 : sidebarRect.left) !== null && _p !== void 0 ? _p : this.state.width) + PADDING, 0),\n bottom: PADDING,\n left: Math.max((_q = propertiesPanelRect === null || propertiesPanelRect === void 0 ? void 0 : propertiesPanelRect.right) !== null && _q !== void 0 ? _q : 0, 0) + PADDING\n };\n }; // Input handling\n\n\n this.onKeyDown = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(event => {\n var _a;\n\n if (this.state.activeTool.type === \"selection\" && this.state.resizingElement && (event.shiftKey || event.altKey)) {\n event.stopPropagation(); //zsviczian shift fires repeatedly causing slowdown when resizing sticky notes\n\n return;\n } // normalize `event.key` when CapsLock is pressed #2372\n\n\n if (\"Proxy\" in window && (!event.shiftKey && /^[A-Z]$/.test(event.key) || event.shiftKey && /^[a-z]$/.test(event.key))) {\n event = new Proxy(event, {\n get(ev, prop) {\n const value = ev[prop];\n\n if (typeof value === \"function\") {\n // fix for Proxies hijacking `this`\n return value.bind(ev);\n }\n\n return prop === \"key\" ? // CapsLock inverts capitalization based on ShiftKey, so invert\n // it back\n event.shiftKey ? ev.key.toUpperCase() : ev.key.toLowerCase() : value;\n }\n\n });\n }\n\n if (!(0,_utils__WEBPACK_IMPORTED_MODULE_34__.isInputLike)(event.target)) {\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ESCAPE && this.flowChartCreator.isCreatingChart) {\n this.flowChartCreator.clear();\n this.triggerRender(true);\n return;\n }\n\n const arrowKeyPressed = (0,_keys__WEBPACK_IMPORTED_MODULE_26__.isArrowKey)(event.key);\n\n if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && arrowKeyPressed && !event.shiftKey) {\n event.preventDefault();\n const selectedElements = (0,_scene__WEBPACK_IMPORTED_MODULE_28__.getSelectedElements)(this.scene.getNonDeletedElementsMap(), this.state);\n\n if (selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFlowchartNodeElement)(selectedElements[0])) {\n this.flowChartCreator.createNodes(selectedElements[0], this.scene.getNonDeletedElementsMap(), this.state, (0,_element_flowchart__WEBPACK_IMPORTED_MODULE_96__.getLinkDirectionFromKey)(event.key));\n }\n\n if (((_a = this.flowChartCreator.pendingNodes) === null || _a === void 0 ? void 0 : _a.length) && !(0,_element_sizeHelpers__WEBPACK_IMPORTED_MODULE_27__.isElementCompletelyInViewport)(this.flowChartCreator.pendingNodes, this.canvas.width / window.devicePixelRatio, this.canvas.height / window.devicePixelRatio, {\n offsetLeft: this.state.offsetLeft,\n offsetTop: this.state.offsetTop,\n scrollX: this.state.scrollX,\n scrollY: this.state.scrollY,\n zoom: this.state.zoom\n }, this.scene.getNonDeletedElementsMap(), this.getEditorUIOffsets())) {\n this.scrollToContent(this.flowChartCreator.pendingNodes, {\n animate: true,\n duration: 300,\n fitToContent: true,\n canvasOffsets: this.getEditorUIOffsets()\n });\n }\n\n return;\n }\n\n if (event.altKey) {\n const selectedElements = (0,_scene__WEBPACK_IMPORTED_MODULE_28__.getSelectedElements)(this.scene.getNonDeletedElementsMap(), this.state);\n\n if (selectedElements.length === 1 && arrowKeyPressed) {\n event.preventDefault();\n const nextId = this.flowChartNavigator.exploreByDirection(selectedElements[0], this.scene.getNonDeletedElementsMap(), (0,_element_flowchart__WEBPACK_IMPORTED_MODULE_96__.getLinkDirectionFromKey)(event.key));\n\n if (nextId) {\n this.setState(prevState => ({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.makeNextSelectedElementIds)({\n [nextId]: true\n }, prevState)\n }));\n const nextNode = this.scene.getNonDeletedElementsMap().get(nextId);\n\n if (nextNode && !(0,_element_sizeHelpers__WEBPACK_IMPORTED_MODULE_27__.isElementCompletelyInViewport)([nextNode], this.canvas.width / window.devicePixelRatio, this.canvas.height / window.devicePixelRatio, {\n offsetLeft: this.state.offsetLeft,\n offsetTop: this.state.offsetTop,\n scrollX: this.state.scrollX,\n scrollY: this.state.scrollY,\n zoom: this.state.zoom\n }, this.scene.getNonDeletedElementsMap(), this.getEditorUIOffsets())) {\n this.scrollToContent(nextNode, {\n animate: true,\n duration: 300,\n canvasOffsets: this.getEditorUIOffsets()\n });\n }\n }\n\n return;\n }\n }\n }\n\n if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.P && !event.shiftKey && !event.altKey) {\n this.setToast({\n message: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"commandPalette.shortcutHint\", {\n shortcut: (0,_actions_shortcuts__WEBPACK_IMPORTED_MODULE_88__.getShortcutFromShortcutName)(\"commandPalette\")\n })\n });\n event.preventDefault();\n return;\n }\n\n if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && event.key.toLowerCase() === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.V) {\n IS_PLAIN_PASTE = event.shiftKey;\n clearTimeout(IS_PLAIN_PASTE_TIMER); // reset (100ms to be safe that we it runs after the ensuing\n // paste event). Though, technically unnecessary to reset since we\n // (re)set the flag before each paste event.\n\n IS_PLAIN_PASTE_TIMER = window.setTimeout(() => {\n IS_PLAIN_PASTE = false;\n }, 100);\n } // prevent browser zoom in input fields\n\n\n if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && (0,_utils__WEBPACK_IMPORTED_MODULE_34__.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_34__.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_34__.isInputLike)(event.target)) {\n return;\n }\n\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.QUESTION_MARK) {\n this.setState({\n openDialog: {\n name: \"help\"\n }\n });\n return;\n } else if (event.key.toLowerCase() === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.E && event.shiftKey && event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n event.preventDefault();\n this.setState({\n openDialog: {\n name: \"imageExport\"\n }\n });\n return;\n }\n\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.PAGE_UP || event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.PAGE_DOWN) {\n let offset = (event.shiftKey ? this.state.width : this.state.height) / this.state.zoom.value;\n\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.PAGE_DOWN) {\n offset = -offset;\n }\n\n if (event.shiftKey) {\n this.translateCanvas(state => ({\n scrollX: state.scrollX + offset\n }));\n } else {\n this.translateCanvas(state => ({\n scrollY: state.scrollY + offset\n }));\n }\n }\n\n if (this.actionManager.handleKeyDown(event)) {\n return;\n }\n\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.K && !event.altKey && !event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isLaserPointerActive)(this.state)) {\n this.setActiveTool({\n type: \"selection\"\n });\n } else {\n this.setActiveTool({\n type: \"laser\"\n });\n }\n\n return;\n }\n\n if (this.state.viewModeEnabled) {\n //revert to hand in case a key is pressed (K is handled above)\n if (event.key !== _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.K) {\n this.setActiveTool({\n type: \"selection\"\n });\n }\n\n return;\n }\n\n if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && this.state.isBindingEnabled) {\n this.setState({\n isBindingEnabled: false\n });\n }\n\n if ((0,_keys__WEBPACK_IMPORTED_MODULE_26__.isArrowKey)(event.key)) {\n let selectedElements = this.scene.getSelectedElements({\n selectedElementIds: this.state.selectedElementIds,\n includeBoundTextElement: true,\n includeElementsInFrames: true\n });\n const elbowArrow = selectedElements.find(_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isElbowArrow);\n const arrowIdsToRemove = new Set();\n selectedElements.filter(_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isElbowArrow).filter(arrow => {\n const startElementNotInSelection = arrow.startBinding && !selectedElements.some(el => {\n var _a;\n\n return el.id === ((_a = arrow.startBinding) === null || _a === void 0 ? void 0 : _a.elementId);\n });\n const endElementNotInSelection = arrow.endBinding && !selectedElements.some(el => {\n var _a;\n\n return el.id === ((_a = arrow.endBinding) === null || _a === void 0 ? void 0 : _a.elementId);\n });\n return startElementNotInSelection || endElementNotInSelection;\n }).forEach(arrow => arrowIdsToRemove.add(arrow.id));\n selectedElements = selectedElements.filter(el => !arrowIdsToRemove.has(el.id));\n const step = this.getEffectiveGridSize() && (event.shiftKey ? _constants__WEBPACK_IMPORTED_MODULE_12__.ELEMENT_TRANSLATE_AMOUNT : this.getEffectiveGridSize()) || (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 selectedElements.forEach(element => {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n x: element.x + offsetX,\n y: element.y + offsetY\n });\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.updateBoundElements)(element, this.scene.getNonDeletedElementsMap(), {\n simultaneouslyUpdated: selectedElements\n });\n });\n this.setState({\n suggestedBindings: (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getSuggestedBindingsForArrows)(selectedElements.filter(element => element.id !== (elbowArrow === null || elbowArrow === void 0 ? void 0 : elbowArrow.id) || step !== 0), this.scene.getNonDeletedElementsMap())\n });\n event.preventDefault();\n } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ENTER) {\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (selectedElements.length === 1) {\n const selectedElement = selectedElements[0];\n\n if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(selectedElement)) {\n if (!this.state.editingLinearElement || this.state.editingLinearElement.elementId !== selectedElements[0].id) {\n this.store.shouldCaptureIncrement();\n\n if (!(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isElbowArrow)(selectedElement)) {\n this.setState({\n editingLinearElement: new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(selectedElement)\n });\n }\n }\n }\n } else if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(selectedElement) || (0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.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_44__.getContainerCenter)(selectedElement, this.state, this.scene.getNonDeletedElementsMap());\n const sceneX = midPoint.x;\n const sceneY = midPoint.y;\n this.startTextEditing({\n sceneX,\n sceneY,\n container\n });\n event.preventDefault();\n return;\n } else if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(selectedElement)) {\n this.setState({\n editingFrame: selectedElement.id\n });\n } else if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(selectedElement)) {\n //zsviczian\n this.setState({\n activeEmbeddable: {\n element: selectedElement,\n state: \"active\"\n }\n });\n }\n }\n } else if (!event.ctrlKey && !event.altKey && !event.metaKey && !this.state.newElement && !this.state.selectionElement && !this.state.selectedElementsAreBeingDragged) {\n const shape = (0,_shapes__WEBPACK_IMPORTED_MODULE_31__.findShapeByKey)(event.key);\n\n if (shape) {\n if (this.state.activeTool.type !== shape) {\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"toolbar\", shape, `keyboard (${this.device.editor.isMobile ? \"mobile\" : \"desktop\"})`);\n }\n\n if (shape === \"arrow\" && this.state.activeTool.type === \"arrow\") {\n this.setState(prevState => ({\n currentItemArrowType: prevState.currentItemArrowType === _constants__WEBPACK_IMPORTED_MODULE_12__.ARROW_TYPE.sharp ? _constants__WEBPACK_IMPORTED_MODULE_12__.ARROW_TYPE.round : prevState.currentItemArrowType === _constants__WEBPACK_IMPORTED_MODULE_12__.ARROW_TYPE.round ? _constants__WEBPACK_IMPORTED_MODULE_12__.ARROW_TYPE.elbow : _constants__WEBPACK_IMPORTED_MODULE_12__.ARROW_TYPE.sharp\n }));\n }\n\n this.setActiveTool({\n type: shape\n });\n event.stopPropagation();\n } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.Q) {\n this.toggleLock(\"keyboard\");\n event.stopPropagation();\n }\n }\n\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.SPACE && gesture.pointers.size === 0) {\n isHoldingSpace = true;\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.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_28__.hasBackground)(this.state.activeTool.type) || selectedElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_28__.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.shiftKey && event.key.toLowerCase() === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.F) {\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (this.state.activeTool.type === \"selection\" && !selectedElements.length) {\n return;\n }\n\n if (this.state.activeTool.type === \"text\" || selectedElements.find(element => (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(element) || (0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.getBoundTextElement)(element, this.scene.getNonDeletedElementsMap()))) {\n event.preventDefault();\n this.setState({\n openPopup: \"fontFamily\"\n });\n }\n }\n\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.K && !event.altKey && !event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n if (this.state.activeTool.type === \"laser\") {\n this.setActiveTool({\n type: \"selection\"\n });\n } else {\n this.setActiveTool({\n type: \"laser\"\n });\n }\n\n return;\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_55__.jotaiStore.set(_ActiveConfirmDialog__WEBPACK_IMPORTED_MODULE_56__.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.onKeyUp = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(event => {\n var _a, _b, _c, _d;\n\n if (event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.SPACE) {\n if (this.state.viewModeEnabled) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n } else if (this.state.activeTool.type === \"selection\") {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.resetCursor)(this.interactiveCanvas);\n } else {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursorForShape)(this.interactiveCanvas, this.state);\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.makeNextSelectedElementIds)({}, this.state),\n selectedGroupIds: {},\n editingGroupId: null,\n activeEmbeddable: null\n });\n }\n\n isHoldingSpace = false;\n }\n\n if (!event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && !this.state.isBindingEnabled) {\n this.setState({\n isBindingEnabled: true\n });\n }\n\n if ((0,_keys__WEBPACK_IMPORTED_MODULE_26__.isArrowKey)(event.key)) {\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.bindOrUnbindLinearElements)(this.scene.getSelectedElements(this.state).filter(_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement), this.scene.getNonDeletedElementsMap(), this.scene.getNonDeletedElements(), this.scene, (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.isBindingEnabled)(this.state), (_b = (_a = this.state.selectedLinearElement) === null || _a === void 0 ? void 0 : _a.selectedPointsIndices) !== null && _b !== void 0 ? _b : []);\n this.setState({\n suggestedBindings: []\n });\n }\n\n if (!event.altKey) {\n if (this.flowChartNavigator.isExploring) {\n this.flowChartNavigator.clear();\n this.syncActionResult({\n storeAction: _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.CAPTURE\n });\n }\n }\n\n if (!event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n if (this.flowChartCreator.isCreatingChart) {\n if ((_c = this.flowChartCreator.pendingNodes) === null || _c === void 0 ? void 0 : _c.length) {\n this.scene.insertElements(this.flowChartCreator.pendingNodes);\n }\n\n const firstNode = (_d = this.flowChartCreator.pendingNodes) === null || _d === void 0 ? void 0 : _d[0];\n\n if (firstNode) {\n this.setState(prevState => ({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.makeNextSelectedElementIds)({\n [firstNode.id]: true\n }, prevState)\n }));\n\n if (!(0,_element_sizeHelpers__WEBPACK_IMPORTED_MODULE_27__.isElementCompletelyInViewport)([firstNode], this.canvas.width / window.devicePixelRatio, this.canvas.height / window.devicePixelRatio, {\n offsetLeft: this.state.offsetLeft,\n offsetTop: this.state.offsetTop,\n scrollX: this.state.scrollX,\n scrollY: this.state.scrollY,\n zoom: this.state.zoom\n }, this.scene.getNonDeletedElementsMap(), this.getEditorUIOffsets())) {\n this.scrollToContent(firstNode, {\n animate: true,\n duration: 300,\n canvasOffsets: this.getEditorUIOffsets()\n });\n }\n }\n\n this.flowChartCreator.clear();\n this.syncActionResult({\n storeAction: _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.CAPTURE\n });\n }\n }\n }); // We purposely widen the `tool` type so this helper can be called with\n // any tool without having to type check it\n\n this.isToolSupported = tool => {\n var _a;\n\n return ((_a = this.props.UIOptions.tools) === null || _a === void 0 ? void 0 : _a[tool]) !== false;\n };\n\n this.setActiveTool = tool => {\n var _a;\n\n if (!this.isToolSupported(tool.type)) {\n console.warn(`\"${tool.type}\" tool is disabled via \"UIOptions.canvasActions.tools.${tool.type}\"`);\n return;\n }\n\n const nextActiveTool = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.updateActiveTool)(this.state, tool);\n\n if (nextActiveTool.type === \"hand\") {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n } else if (!isHoldingSpace) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursorForShape)(this.interactiveCanvas, this.state);\n }\n\n if ((0,_utils__WEBPACK_IMPORTED_MODULE_34__.isToolIcon)(document.activeElement)) {\n this.focusContainer();\n }\n\n if (!(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElementType)(nextActiveTool.type)) {\n this.setState({\n suggestedBindings: []\n });\n }\n\n if (nextActiveTool.type === \"image\") {\n this.onImageAction({\n insertOnCanvasDirectly: (_a = tool.type === \"image\" && tool.insertOnCanvasDirectly) !== null && _a !== void 0 ? _a : false\n });\n }\n\n setTimeout(() => {\n this.setState(prevState => {\n const commonResets = {\n snapLines: prevState.snapLines.length ? [] : prevState.snapLines,\n originSnapOffset: null,\n activeEmbeddable: null\n };\n\n if (nextActiveTool.type === \"freedraw\") {\n this.store.shouldCaptureIncrement();\n }\n\n if (nextActiveTool.type !== \"selection\") {\n return Object.assign(Object.assign(Object.assign({}, prevState), {\n activeTool: nextActiveTool,\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.makeNextSelectedElementIds)(nextActiveTool.type === \"mermaid\" //zsviczian\n ? this.state.selectedElementIds : {}, prevState),\n selectedGroupIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.makeNextSelectedElementIds)({}, prevState),\n editingGroupId: null,\n multiElement: null\n }), commonResets);\n }\n\n return Object.assign(Object.assign(Object.assign({}, prevState), {\n activeTool: nextActiveTool\n }), commonResets);\n }); //zsviczian added timeout because button won't select otherwise\n });\n };\n\n this.setOpenDialog = dialogType => {\n this.setState({\n openDialog: dialogType\n });\n };\n\n this.setCursor = cursor => {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, cursor);\n };\n\n this.resetCursor = () => {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.resetCursor)(this.interactiveCanvas);\n };\n /**\n * returns whether user is making a gesture with >= 2 fingers (points)\n * on o touch screen (not on a trackpad). Currently only relates to Darwin\n * (iOS/iPadOS,MacOS), but may work on other devices in the future if\n * GestureEvent is standardized.\n */\n\n\n this.isTouchScreenMultiTouchGesture = () => {\n // we don't want to deselect when using trackpad, and multi-point gestures\n // only work on touch screens, so checking for >= pointers means we're on a\n // touchscreen\n return gesture.pointers.size >= 2;\n };\n\n this.getName = () => {\n return this.state.name || this.props.name || `${(0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"labels.untitled\")}-${(0,_utils__WEBPACK_IMPORTED_MODULE_34__.getDateTime)()}`;\n }; // fires only on Safari\n\n\n this.onGestureStart = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.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_51__.makeNextSelectedElementIds)({}, this.state),\n activeEmbeddable: null\n });\n }\n\n gesture.initialScale = this.state.zoom.value;\n }); // fires only on Safari\n\n this.onGestureChange = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.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_30__.getStateForZoom)({\n viewportX: this.lastViewportPosition.x,\n viewportY: this.lastViewportPosition.y,\n nextZoom: (0,_scene__WEBPACK_IMPORTED_MODULE_28__.getNormalizedZoom)(initialScale * event.scale)\n }, state)));\n }\n }); // fires only on Safari\n\n this.onGestureEnd = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.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_51__.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 autoEdit = true\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_44__.getBoundTextElement)(container, this.scene.getNonDeletedElementsMap());\n\n if (!boundTextElementToContainer) {\n shouldBindToContainer = true;\n }\n }\n\n let existingTextElement = null;\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (selectedElements.length === 1) {\n if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(selectedElements[0])) {\n existingTextElement = selectedElements[0];\n } else if (container) {\n existingTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.getBoundTextElement)(selectedElements[0], this.scene.getNonDeletedElementsMap());\n } else {\n existingTextElement = this.getTextElementAtPosition(sceneX, sceneY);\n }\n } else {\n existingTextElement = this.getTextElementAtPosition(sceneX, sceneY);\n }\n\n const fontFamily = (existingTextElement === null || existingTextElement === void 0 ? void 0 : existingTextElement.fontFamily) || this.state.currentItemFontFamily;\n const lineHeight = (existingTextElement === null || existingTextElement === void 0 ? void 0 : existingTextElement.lineHeight) || (0,_fonts__WEBPACK_IMPORTED_MODULE_49__.getLineHeight)(fontFamily);\n const fontSize = (0,_actions_actionProperties__WEBPACK_IMPORTED_MODULE_75__.getFontSize)(this.state.currentItemFontSize, this.state.zoom.value); //zsviczian\n\n if (!existingTextElement && shouldBindToContainer && container && !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isArrowElement)(container)) {\n const fontString = {\n fontSize,\n fontFamily\n };\n const minWidth = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.getApproxMinLineWidth)((0,_utils__WEBPACK_IMPORTED_MODULE_34__.getFontString)(fontString), lineHeight);\n const minHeight = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.getApproxMinLineHeight)(fontSize, lineHeight);\n const newHeight = Math.max(container.height, minHeight);\n const newWidth = Math.max(container.width, minWidth);\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(container, {\n height: newHeight,\n width: newWidth\n });\n sceneX = container.x + newWidth / 2;\n sceneY = container.y + newHeight / 2;\n\n if (parentCenterPosition) {\n parentCenterPosition = this.getTextWysiwygSnappedToCenterPosition(sceneX, sceneY, this.state, container);\n }\n }\n\n const topLayerFrame = this.getTopLayerFrameAtSceneCoords({\n x: sceneX,\n y: sceneY\n });\n /*const shouldWrapText = !shouldBindToContainer && //zsviczian\n this.lastPointerDownEvent?.pointerType === \"pen\";\n const [x1, , x2] = getVisibleSceneBounds(this.state); //zsviczian\n const maxTextWidth = Math.max(Math.min((x2 - x1) * 0.85, 800), 200); //zsviczian*/\n\n const element = existingTextElement ? existingTextElement : (0,_element__WEBPACK_IMPORTED_MODULE_16__.newTextElement)({\n x: parentCenterPosition ? parentCenterPosition.elementCenterX : sceneX,\n y: parentCenterPosition ? parentCenterPosition.elementCenterY : sceneY,\n strokeColor: this.state.currentItemStrokeColor,\n backgroundColor: this.state.currentItemBackgroundColor,\n fillStyle: this.state.currentItemFillStyle,\n strokeWidth: this.state.currentItemStrokeWidth,\n strokeStyle: this.state.currentItemStrokeStyle,\n roughness: this.state.currentItemRoughness,\n opacity: this.state.currentItemOpacity,\n text: \"\",\n rawText: \"\",\n fontSize,\n fontFamily,\n textAlign: parentCenterPosition ? \"center\" : this.state.currentItemTextAlign,\n verticalAlign: parentCenterPosition ? _constants__WEBPACK_IMPORTED_MODULE_12__.VERTICAL_ALIGN.MIDDLE : _constants__WEBPACK_IMPORTED_MODULE_12__.DEFAULT_VERTICAL_ALIGN,\n containerId: shouldBindToContainer ? container === null || container === void 0 ? void 0 : container.id : undefined,\n groupIds: (_a = container === null || container === void 0 ? void 0 : container.groupIds) !== null && _a !== void 0 ? _a : [],\n lineHeight,\n angle: (_b = container === null || container === void 0 ? void 0 : container.angle) !== null && _b !== void 0 ? _b : 0,\n frameId: topLayerFrame ? topLayerFrame.id : null\n /*...shouldWrapText //zsviczian\n ? {\n width: maxTextWidth,\n autoResize: false,\n }\n : {},*/\n\n });\n\n if (!existingTextElement && shouldBindToContainer && container) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(container, {\n boundElements: (container.boundElements || []).concat({\n type: \"text\",\n id: element.id\n })\n });\n }\n\n this.setState({\n editingTextElement: element\n });\n\n if (!existingTextElement) {\n if (container && shouldBindToContainer) {\n const containerIndex = this.scene.getElementIndex(container.id);\n this.scene.insertElementAtIndex(element, containerIndex + 1);\n } else {\n this.scene.insertElement(element);\n }\n }\n\n if (autoEdit || existingTextElement || container) {\n this.handleTextWysiwyg(element, {\n isExistingElement: !!existingTextElement\n });\n } else {\n this.setState({\n newElement: element,\n multiElement: null\n });\n }\n };\n\n this.debounceDoubleClickTimestamp = 0; //zsviczian\n\n this.handleCanvasDoubleClick = event => {\n var _a; // case: double-clicking with arrow/line tool selected would both create\n // text and enter multiElement mode\n\n\n if (this.state.multiElement) {\n return;\n }\n\n if ( //zsviczian - double click eraser\n this.state.penMode && (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_82__.allowDoubleTapEraser)() && ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a.pointerType) === \"touch\" && this.state.activeTool.type !== \"selection\") {\n const now = Date.now();\n\n if (now - this.debounceDoubleClickTimestamp < 200) {\n //handleCanvasDoubleClick click fires twice in case of touch.\n //Once from the onTouchStart event handler, once from the double click event handler\n return;\n }\n\n this.debounceDoubleClickTimestamp = now;\n this.updateScene(_actions_actionCanvas__WEBPACK_IMPORTED_MODULE_54__.actionToggleEraserTool.perform([], this.state));\n return;\n } // zsviczian - end\n // we should only be able to double click when mode is selection\n\n\n if (this.state.activeTool.type !== \"selection\") {\n return;\n }\n\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(selectedElements[0])) {\n if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && (!this.state.editingLinearElement || this.state.editingLinearElement.elementId !== selectedElements[0].id) && !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isElbowArrow)(selectedElements[0])) {\n this.store.shouldCaptureIncrement();\n this.setState({\n editingLinearElement: new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(selectedElements[0])\n });\n return;\n }\n }\n\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.resetCursor)(this.interactiveCanvas);\n let {\n x: sceneX,\n y: sceneY\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.viewportCoordsToSceneCoords)(event, this.state);\n const selectedGroupIds = (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getSelectedGroupIds)(this.state);\n\n if (selectedGroupIds.length > 0) {\n const hitElement = this.getElementAtPosition(sceneX, sceneY);\n const selectedGroupId = hitElement && (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getSelectedGroupIdForElement)(hitElement, this.state.selectedGroupIds);\n\n if (selectedGroupId) {\n this.store.shouldCaptureIncrement();\n this.setState(prevState => Object.assign(Object.assign({}, prevState), (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n editingGroupId: selectedGroupId,\n selectedElementIds: {\n [hitElement.id]: true\n }\n }, this.scene.getNonDeletedElements(), prevState, this)));\n return;\n }\n }\n\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.resetCursor)(this.interactiveCanvas);\n\n if (!event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] && !this.state.viewModeEnabled) {\n const hitElement = this.getElementAtPosition(sceneX, sceneY);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeLikeElement)(hitElement)) {\n this.setState({\n activeEmbeddable: {\n element: hitElement,\n state: \"active\"\n }\n });\n return;\n }\n\n const container = this.getTextBindableContainerAtPosition(sceneX, sceneY);\n\n if (container) {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.hasBoundTextElement)(container) || !(0,_utils__WEBPACK_IMPORTED_MODULE_34__.isTransparent)(container.backgroundColor) || (0,_element_collision__WEBPACK_IMPORTED_MODULE_83__.hitElementItself)({\n x: sceneX,\n y: sceneY,\n element: container,\n shape: (0,_shapes__WEBPACK_IMPORTED_MODULE_31__.getElementShape)(container, this.scene.getNonDeletedElementsMap()),\n threshold: this.getElementHitThreshold()\n })) {\n const midPoint = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.getContainerCenter)(container, this.state, this.scene.getNonDeletedElementsMap());\n sceneX = midPoint.x;\n sceneY = midPoint.y;\n }\n }\n\n this.startTextEditing({\n sceneX,\n sceneY,\n insertAtParentCenter: !event.altKey,\n container\n });\n }\n };\n\n this.getElementLinkAtPosition = (scenePointer, hitElement) => {\n // Reversing so we traverse the elements in decreasing order\n // of z-index\n const elements = this.scene.getNonDeletedElements().slice().reverse();\n let hitElementIndex = Infinity;\n return elements.find((element, index) => {\n if (hitElement && element.id === hitElement.id) {\n hitElementIndex = index;\n }\n\n return element.link && index <= hitElementIndex && (0,_hyperlink_helpers__WEBPACK_IMPORTED_MODULE_87__.isPointHittingLink)(element, this.scene.getNonDeletedElementsMap(), this.state, (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(scenePointer.x, scenePointer.y), this.device.editor.isMobile);\n });\n };\n\n this.redirectToLink = (event, isTouchScreen) => {\n const draggedDistance = (0,_math__WEBPACK_IMPORTED_MODULE_98__.pointDistance)((0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(this.lastPointerDownEvent.clientX, this.lastPointerDownEvent.clientY), (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(this.lastPointerUpEvent.clientX, this.lastPointerUpEvent.clientY));\n\n if (!this.hitLinkElement || // For touch screen allow dragging threshold else strict check\n isTouchScreen && draggedDistance > _constants__WEBPACK_IMPORTED_MODULE_12__.DRAGGING_THRESHOLD || !isTouchScreen && draggedDistance !== 0) {\n return;\n }\n\n const lastPointerDownCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.viewportCoordsToSceneCoords)(this.lastPointerDownEvent, this.state);\n const elementsMap = this.scene.getNonDeletedElementsMap();\n const lastPointerDownHittingLinkIcon = (0,_hyperlink_helpers__WEBPACK_IMPORTED_MODULE_87__.isPointHittingLink)(this.hitLinkElement, elementsMap, this.state, (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(lastPointerDownCoords.x, lastPointerDownCoords.y), this.device.editor.isMobile);\n const lastPointerUpCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.viewportCoordsToSceneCoords)(this.lastPointerUpEvent, this.state);\n const lastPointerUpHittingLinkIcon = (0,_hyperlink_helpers__WEBPACK_IMPORTED_MODULE_87__.isPointHittingLink)(this.hitLinkElement, elementsMap, this.state, (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(lastPointerUpCoords.x, lastPointerUpCoords.y), this.device.editor.isMobile);\n\n if (lastPointerDownHittingLinkIcon && lastPointerUpHittingLinkIcon) {\n let url = this.hitLinkElement.link;\n\n if (url) {\n url = (0,_data_url__WEBPACK_IMPORTED_MODULE_46__.normalizeLink)(url);\n let customEvent;\n\n if (this.props.onLinkOpen) {\n customEvent = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.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_46__.isLocalLink)(url) ? \"_self\" : \"_blank\";\n const newWindow = window.open(undefined, target); // https://mathiasbynens.github.io/rel-noopener/\n\n if (newWindow) {\n newWindow.opener = null;\n newWindow.location = url;\n }\n }\n }\n }\n };\n\n this.getTopLayerFrameAtSceneCoords = sceneCoords => {\n const elementsMap = this.scene.getNonDeletedElementsMap();\n const frames = this.scene.getNonDeletedFramesLikes().filter(frame => (0,_frame__WEBPACK_IMPORTED_MODULE_50__.isCursorInFrame)(sceneCoords, frame, elementsMap));\n return frames.length ? frames[frames.length - 1] : null;\n };\n\n this.handleCanvasPointerMove = event => {\n var _a, _b;\n\n this.savePointer(event.clientX, event.clientY, this.state.cursorButton);\n this.lastPointerMoveEvent = event.nativeEvent;\n\n if (gesture.pointers.has(event.pointerId)) {\n gesture.pointers.set(event.pointerId, {\n x: event.clientX,\n y: event.clientY\n });\n }\n\n const initialScale = gesture.initialScale;\n\n if (gesture.pointers.size === 2 && gesture.lastCenter && initialScale && gesture.initialDistance) {\n const center = (0,_gesture__WEBPACK_IMPORTED_MODULE_22__.getCenter)(gesture.pointers);\n const deltaX = center.x - gesture.lastCenter.x;\n const deltaY = center.y - gesture.lastCenter.y;\n gesture.lastCenter = center;\n const distance = (0,_gesture__WEBPACK_IMPORTED_MODULE_22__.getDistance)(Array.from(gesture.pointers.values()));\n const scaleFactor = !this.state.allowPinchZoom && //zsviczian\n this.state.activeTool.type === \"freedraw\" && this.state.penMode ? 1 : distance / gesture.initialDistance;\n const nextZoom = scaleFactor ? (0,_scene__WEBPACK_IMPORTED_MODULE_28__.getNormalizedZoom)(initialScale * scaleFactor) : this.state.zoom.value;\n this.setState(state => {\n const zoomState = (0,_scene_zoom__WEBPACK_IMPORTED_MODULE_30__.getStateForZoom)({\n viewportX: center.x,\n viewportY: center.y,\n nextZoom\n }, state);\n this.translateCanvas({\n zoom: zoomState.zoom,\n // 2x multiplier is just a magic number that makes this work correctly\n // on touchscreen devices (note: if we get report that panning is slower/faster\n // than actual movement, consider swapping with devicePixelRatio)\n scrollX: zoomState.scrollX + 2 * (deltaX / nextZoom),\n scrollY: zoomState.scrollY + 2 * (deltaY / nextZoom),\n shouldCacheIgnoreZoom: true\n });\n });\n this.resetShouldCacheIgnoreZoomDebounced();\n } else {\n gesture.lastCenter = gesture.initialDistance = gesture.initialScale = null;\n }\n\n if (isHoldingSpace || isPanning || isDraggingScrollBar || (0,_appState__WEBPACK_IMPORTED_MODULE_10__.isHandToolActive)(this.state)) {\n return;\n }\n\n const isPointerOverScrollBars = (0,_scene_scrollbars__WEBPACK_IMPORTED_MODULE_85__.isOverScrollBars)(currentScrollBars, event.clientX - this.state.offsetLeft, event.clientY - this.state.offsetTop);\n const isOverScrollBar = isPointerOverScrollBars.isOverEither;\n const isPenFreedraw = this.state.activeTool.type === \"freedraw\" && event.pointerType === \"pen\"; //zsviczian\n\n if (!this.state.newElement && !this.state.selectionElement && !this.state.selectedElementsAreBeingDragged && !this.state.multiElement) {\n if (isOverScrollBar) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.resetCursor)(this.interactiveCanvas);\n } else if (isPenFreedraw && this.interactiveCanvas && (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_82__.hideFreedrawPenmodeCursor)()) {\n //zsviczian https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/1659\n this.interactiveCanvas.style.cursor = \"none\";\n } else {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursorForShape)(this.interactiveCanvas, this.state);\n }\n }\n\n const scenePointer = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.viewportCoordsToSceneCoords)(event, this.state);\n const {\n x: scenePointerX,\n y: scenePointerY\n } = scenePointer;\n\n if (!this.state.newElement && (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, {\n x: scenePointerX,\n y: scenePointerY\n }, event, this.scene.getNonDeletedElementsMap());\n this.setState(prevState => {\n const nextSnapLines = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.updateStable)(prevState.snapLines, snapLines);\n const nextOriginOffset = prevState.originSnapOffset ? (0,_utils__WEBPACK_IMPORTED_MODULE_34__.updateStable)(prevState.originSnapOffset, originOffset) : originOffset;\n\n if (prevState.snapLines === nextSnapLines && prevState.originSnapOffset === nextOriginOffset) {\n return null;\n }\n\n return {\n snapLines: nextSnapLines,\n originSnapOffset: nextOriginOffset\n };\n });\n } else if (!this.state.newElement && !this.state.selectedElementsAreBeingDragged && !this.state.selectionElement) {\n this.setState(prevState => {\n if (prevState.snapLines.length) {\n return {\n snapLines: []\n };\n }\n\n return null;\n });\n }\n\n if (this.state.editingLinearElement && !this.state.editingLinearElement.isDragging) {\n const editingLinearElement = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handlePointerMove(event, scenePointerX, scenePointerY, this, this.scene.getNonDeletedElementsMap());\n\n if (editingLinearElement && editingLinearElement !== this.state.editingLinearElement) {\n // Since we are reading from previous state which is not possible with\n // automatic batching in React 18 hence using flush sync to synchronously\n // update the state. Check https://github.com/excalidraw/excalidraw/pull/5508 for more details.\n (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.flushSync)(() => {\n this.setState({\n editingLinearElement\n });\n });\n }\n\n if ((editingLinearElement === null || editingLinearElement === void 0 ? void 0 : editingLinearElement.lastUncommittedPoint) != null) {\n this.maybeSuggestBindingAtCursor(scenePointer);\n } else {\n // causes stack overflow if not sync\n (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.flushSync)(() => {\n this.setState({\n suggestedBindings: []\n });\n });\n }\n }\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElementType)(this.state.activeTool.type)) {\n // Hovering with a selected tool or creating new linear element via click\n // and point\n const {\n newElement\n } = this.state;\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElement)(newElement, false)) {\n this.maybeSuggestBindingsForLinearElementAtCoords(newElement, [scenePointer], this.state.startBoundElement);\n } else {\n this.maybeSuggestBindingAtCursor(scenePointer);\n }\n }\n\n if (this.state.multiElement) {\n const {\n multiElement\n } = this.state;\n const {\n x: rx,\n y: ry\n } = multiElement;\n const {\n points,\n lastCommittedPoint\n } = multiElement;\n const lastPoint = points[points.length - 1];\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.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_98__.pointDistance)((0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(scenePointerX - rx, scenePointerY - ry), lastPoint) >= _constants__WEBPACK_IMPORTED_MODULE_12__.LINE_CONFIRM_THRESHOLD) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(multiElement, {\n points: [...points, (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(scenePointerX - rx, scenePointerY - ry)]\n }, false);\n } else {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.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_98__.pointDistance)((0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(scenePointerX - rx, scenePointerY - ry), lastCommittedPoint) < _constants__WEBPACK_IMPORTED_MODULE_12__.LINE_CONFIRM_THRESHOLD) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.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 }, false);\n } else {\n const [gridX, gridY] = (0,_snapping__WEBPACK_IMPORTED_MODULE_58__.getGridPoint)(scenePointerX, scenePointerY, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isElbowArrow)(multiElement) ? null : this.getEffectiveGridSize());\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,_shapes__WEBPACK_IMPORTED_MODULE_31__.isPathALoop)(points, this.state.zoom.value)) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n }\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isElbowArrow)(multiElement)) {\n (0,_element_routing__WEBPACK_IMPORTED_MODULE_95__.mutateElbowArrow)(multiElement, this.scene.getNonDeletedElementsMap(), [...points.slice(0, -1), (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(lastCommittedX + dxFromLastCommitted, lastCommittedY + dyFromLastCommitted)], undefined, undefined, {\n isDragging: true,\n informMutation: false\n });\n } else {\n // update last uncommitted point\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(multiElement, {\n points: [...points.slice(0, -1), (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(lastCommittedX + dxFromLastCommitted, lastCommittedY + dyFromLastCommitted)]\n }, false);\n } // in this path, we're mutating multiElement to reflect\n // how it will be after adding pointer position as the next point\n // trigger update here so that new element canvas renders again to reflect this\n\n\n this.triggerRender(false);\n }\n\n return;\n }\n\n const hasDeselectedButton = Boolean(event.buttons);\n\n if (hasDeselectedButton || this.state.activeTool.type !== \"selection\" && this.state.activeTool.type !== \"text\" && this.state.activeTool.type !== \"eraser\") {\n return;\n }\n\n const elements = this.scene.getNonDeletedElements();\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (selectedElements.length === 1 && !isOverScrollBar && !this.state.editingLinearElement) {\n // for linear elements, we'd like to prioritize point dragging over edge resizing\n // therefore, we update and check hovered point index first\n if (this.state.selectedLinearElement) {\n this.handleHoverSelectedLinearElement(this.state.selectedLinearElement, scenePointerX, scenePointerY);\n }\n\n if ((!this.state.selectedLinearElement || this.state.selectedLinearElement.hoverPointIndex === -1) && !(selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isElbowArrow)(selectedElements[0]))) {\n const elementWithTransformHandleType = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getElementWithTransformHandleType)(elements, this.state, scenePointerX, scenePointerY, this.state.zoom, event.pointerType, this.scene.getNonDeletedElementsMap(), this.device);\n\n if (elementWithTransformHandleType && elementWithTransformHandleType.transformHandleType) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCursorForResizingElement)(elementWithTransformHandleType));\n return;\n }\n }\n } else if (selectedElements.length > 1 && !isOverScrollBar) {\n const transformHandleType = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getTransformHandleTypeFromCoords)((0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(selectedElements), scenePointerX, scenePointerY, this.state.zoom, event.pointerType, this.device);\n\n if (transformHandleType) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCursorForResizingElement)({\n transformHandleType\n }));\n return;\n }\n }\n\n const hitElement = this.getElementAtPosition(scenePointer.x, scenePointer.y);\n this.hitLinkElement = this.getElementLinkAtPosition(scenePointer, hitElement);\n\n if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state)) {\n return;\n }\n\n if (this.hitLinkElement && !this.state.selectedElementIds[this.hitLinkElement.id]) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n (0,_components_hyperlink_Hyperlink__WEBPACK_IMPORTED_MODULE_45__.showHyperlinkTooltip)(this.hitLinkElement, this.state, this.scene.getNonDeletedElementsMap());\n\n if (this.props.onLinkHover) {\n this.props.onLinkHover(this.hitLinkElement, event);\n } //zsviczian\n\n } else {\n (0,_components_hyperlink_Hyperlink__WEBPACK_IMPORTED_MODULE_45__.hideHyperlinkToolip)();\n\n if (hitElement && (hitElement.link || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(hitElement)) && this.state.selectedElementIds[hitElement.id] && !this.state.contextMenu && !this.state.showHyperlinkPopup) {\n this.setState({\n showHyperlinkPopup: \"info\"\n });\n } else if (this.state.activeTool.type === \"text\") {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(hitElement) ? _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.TEXT : _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.CROSSHAIR);\n } else if (this.state.viewModeEnabled) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n } else if (isOverScrollBar) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.AUTO);\n } else if (this.state.selectedLinearElement) {\n this.handleHoverSelectedLinearElement(this.state.selectedLinearElement, scenePointerX, scenePointerY);\n } else if ( // if using cmd/ctrl, we're not dragging\n !event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n if ((hitElement || this.isHittingCommonBoundingBoxOfSelectedElements(scenePointer, selectedElements)) && !(hitElement === null || hitElement === void 0 ? void 0 : hitElement.locked)) {\n if (hitElement && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeLikeElement)(hitElement) && this.isIframeLikeElementCenter(hitElement, event, scenePointerX, scenePointerY)) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n this.setState({\n activeEmbeddable: {\n element: hitElement,\n state: \"hover\"\n }\n });\n } else {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.MOVE);\n\n if (((_b = this.state.activeEmbeddable) === null || _b === void 0 ? void 0 : _b.state) === \"hover\") {\n this.setState({\n activeEmbeddable: null\n });\n }\n }\n }\n } else {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.AUTO);\n }\n }\n };\n\n this.handleEraser = (event, pointerDownState, scenePointer) => {\n this.eraserTrail.addPointToPath(scenePointer.x, scenePointer.y);\n let didChange = false;\n const processedGroups = new Set();\n const nonDeletedElements = this.scene.getNonDeletedElements();\n\n const processElements = elements => {\n var _a;\n\n for (const element of elements) {\n if (element.locked) {\n return;\n }\n\n if (event.altKey) {\n if (this.elementsPendingErasure.delete(element.id)) {\n didChange = true;\n }\n } else if (!this.elementsPendingErasure.has(element.id)) {\n didChange = true;\n this.elementsPendingErasure.add(element.id);\n } // (un)erase groups atomically\n\n\n if (didChange && ((_a = element.groupIds) === null || _a === void 0 ? void 0 : _a.length)) {\n const shallowestGroupId = element.groupIds.at(-1);\n\n if (!processedGroups.has(shallowestGroupId)) {\n processedGroups.add(shallowestGroupId);\n const elems = (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(nonDeletedElements, shallowestGroupId);\n\n for (const elem of elems) {\n if (event.altKey) {\n this.elementsPendingErasure.delete(elem.id);\n } else {\n this.elementsPendingErasure.add(elem.id);\n }\n }\n }\n }\n }\n };\n\n const distance = (0,_math__WEBPACK_IMPORTED_MODULE_98__.pointDistance)((0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y), (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(scenePointer.x, scenePointer.y));\n const threshold = this.getElementHitThreshold();\n const p = Object.assign({}, pointerDownState.lastCoords);\n let samplingInterval = 0;\n\n while (samplingInterval <= distance) {\n const hitElements = this.getElementsAtPosition(p.x, p.y);\n processElements(hitElements); // Exit since we reached current point\n\n if (samplingInterval === distance) {\n break;\n } // Calculate next point in the line at a distance of sampling interval\n\n\n samplingInterval = Math.min(samplingInterval + threshold, distance);\n const distanceRatio = samplingInterval / distance;\n const nextX = (1 - distanceRatio) * p.x + distanceRatio * scenePointer.x;\n const nextY = (1 - distanceRatio) * p.y + distanceRatio * scenePointer.y;\n p.x = nextX;\n p.y = nextY;\n }\n\n pointerDownState.lastCoords.x = scenePointer.x;\n pointerDownState.lastCoords.y = scenePointer.y;\n\n if (didChange) {\n for (const element of this.scene.getNonDeletedElements()) {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(element) && (this.elementsPendingErasure.has(element.id) || this.elementsPendingErasure.has(element.containerId))) {\n if (event.altKey) {\n this.elementsPendingErasure.delete(element.id);\n this.elementsPendingErasure.delete(element.containerId);\n } else {\n this.elementsPendingErasure.add(element.id);\n this.elementsPendingErasure.add(element.containerId);\n }\n }\n }\n\n this.elementsPendingErasure = new Set(this.elementsPendingErasure);\n this.triggerRender();\n }\n }; // set touch moving for mobile context menu\n\n\n this.handleTouchMove = event => {\n invalidateContextMenu = true;\n };\n\n this.handleCanvasPointerDown = event => {\n var _a, _b;\n\n this.focusContainer(); //zsviczian\n\n this.maybeCleanupAfterMissingPointerUp(event.nativeEvent);\n this.maybeUnfollowRemoteUser();\n\n if (this.state.searchMatches) {\n this.setState(state => ({\n searchMatches: state.searchMatches.map(searchMatch => Object.assign(Object.assign({}, searchMatch), {\n focus: false\n }))\n }));\n _jotai__WEBPACK_IMPORTED_MODULE_55__.jotaiStore.set(_SearchMenu__WEBPACK_IMPORTED_MODULE_97__.searchItemInFocusAtom, null);\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\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.newElement && this.state.newElement.type === \"freedraw\") {\n const element = this.state.newElement;\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 newElement: null,\n editingTextElement: null,\n startBoundElement: null,\n suggestedBindings: [],\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.makeNextSelectedElementIds)(Object.keys(this.state.selectedElementIds).filter(key => key !== element.id).reduce((obj, key) => {\n obj[key] = this.state.selectedElementIds[key];\n return obj;\n }, {}), this.state)\n },\n storeAction: _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.UPDATE\n }));\n return;\n } // remove any active selection when we start to interact with canvas\n // (mainly, we care about removing selection outside the component which\n // would prevent our copy handling otherwise)\n\n\n const selection = document.getSelection();\n\n if (selection === null || selection === void 0 ? void 0 : selection.anchorNode) {\n selection.removeAllRanges();\n }\n\n this.maybeOpenContextMenuAfterPointerDownOnTouchDevices(event); //fires only once, if pen is detected, penMode is enabled\n //the user can disable this by toggling the penMode button\n\n if (!this.state.penDetected && event.pointerType === \"pen\") {\n this.setState(prevState => {\n return {\n penMode: true,\n penDetected: true\n };\n });\n }\n\n if (!this.device.isTouchScreen && [\"pen\", \"touch\"].includes(event.pointerType)) {\n this.device = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.updateObject)(this.device, {\n isTouchScreen: true\n });\n }\n\n if (isPanning) {\n return;\n }\n\n this.lastPointerDownEvent = event; // we must exit before we set `cursorButton` state and `savePointer`\n // else it will send pointer state & laser pointer events in collab when\n // panning\n\n /*if (this.handleCanvasPanUsingWheelOrSpaceDrag(event)) {\n return;\n }*/\n //zsviczian this broke on pointer down in onPointerUpdate\n\n this.setState({\n lastPointerDownWith: event.pointerType,\n cursorButton: \"down\"\n });\n this.savePointer(event.clientX, event.clientY, \"down\");\n\n if (this.handleCanvasPanUsingWheelOrSpaceDrag(event)) {\n return;\n } //zsviczian moved it here, because else pointer down in onPointerUpdate did not work\n\n\n if (event.button === _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.ERASER && this.state.activeTool.type !== _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.eraser) {\n this.setState({\n activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_34__.updateActiveTool)(this.state, {\n type: _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.eraser,\n lastActiveToolBeforeEraser: this.state.activeTool\n })\n }, () => {\n this.handleCanvasPointerDown(event);\n\n const onPointerUp = () => {\n unsubPointerUp();\n unsubCleanup === null || unsubCleanup === void 0 ? void 0 : unsubCleanup();\n\n if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state)) {\n this.setState({\n activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_34__.updateActiveTool)(this.state, Object.assign(Object.assign({}, this.state.activeTool.lastActiveTool || {\n type: _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.selection\n }), {\n lastActiveToolBeforeEraser: null\n }))\n });\n }\n };\n\n const unsubPointerUp = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, onPointerUp, {\n once: true\n });\n let unsubCleanup; // subscribe inside rAF lest it'd be triggered on the same pointerdown\n // if we start erasing while coming from blurred document since\n // we cleanup pointer events on focus\n\n requestAnimationFrame(() => {\n unsubCleanup = this.missingPointerEventCleanupEmitter.once(onPointerUp);\n });\n });\n return;\n } // only handle left mouse button or touch\n\n\n if (event.button !== _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.MAIN && event.button !== _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.TOUCH && event.button !== _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.ERASER) {\n return;\n } // don't select while panning\n\n\n if (gesture.pointers.size > 1) {\n return;\n } // State for the duration of a pointer interaction, which starts with a\n // pointerDown event, ends with a pointerUp event (or another pointerDown)\n\n\n const pointerDownState = this.initialPointerDownState(event);\n this.setState({\n selectedElementsAreBeingDragged: false\n });\n\n if (this.handleDraggingScrollBar(event, pointerDownState)) {\n return;\n }\n\n this.clearSelectionIfNotUsingSelection();\n this.updateBindingEnabledOnPointerMove(event);\n\n if (this.handleSelectionOnPointerDown(event, pointerDownState)) {\n return;\n }\n\n const allowOnPointerDown = !this.state.penMode || event.pointerType !== \"touch\" || this.state.activeTool.type === \"selection\" || this.state.activeTool.type === \"text\" || this.state.activeTool.type === \"image\";\n\n if (!allowOnPointerDown) {\n return;\n }\n\n if (this.state.activeTool.type === \"text\") {\n this.handleTextOnPointerDown(event, pointerDownState);\n } else if (this.state.activeTool.type === \"arrow\" || this.state.activeTool.type === \"line\") {\n this.handleLinearElementOnPointerDown(event, this.state.activeTool.type, pointerDownState);\n } else if (this.state.activeTool.type === \"image\") {\n // reset image preview on pointerdown\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.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 newElement: pendingImageElement,\n pendingImageElementId: null,\n multiElement: null\n });\n const {\n x,\n y\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.viewportCoordsToSceneCoords)(event, this.state);\n const frame = this.getTopLayerFrameAtSceneCoords({\n x,\n y\n });\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(pendingImageElement, {\n x,\n y,\n frameId: frame ? frame.id : null\n });\n } else if (this.state.activeTool.type === \"freedraw\") {\n this.handleFreeDrawElementOnPointerDown(event, this.state.activeTool.type, pointerDownState);\n } else if (this.state.activeTool.type === \"custom\") {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursorForShape)(this.interactiveCanvas, this.state);\n } else if (this.state.activeTool.type === _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.frame || this.state.activeTool.type === _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.magicframe) {\n this.createFrameElementOnPointerDown(pointerDownState, this.state.activeTool.type);\n } else if (this.state.activeTool.type === \"laser\") {\n this.laserTrails.startPath(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y);\n } else if (this.state.activeTool.type !== \"eraser\" && this.state.activeTool.type !== \"hand\" && this.state.activeTool.type !== \"mermaid\") {\n this.createGenericElementOnPointerDown(this.state.activeTool.type, pointerDownState);\n }\n\n (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.onPointerDown) === null || _b === void 0 ? void 0 : _b.call(_a, this.state.activeTool, pointerDownState);\n this.onPointerDownEmitter.trigger(this.state.activeTool, pointerDownState, event);\n\n if (this.state.activeTool.type === \"eraser\") {\n this.eraserTrail.startPath(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y);\n }\n\n const onPointerMove = this.onPointerMoveFromPointerDownHandler(pointerDownState);\n const onPointerUp = this.onPointerUpFromPointerDownHandler(pointerDownState);\n const onKeyDown = this.onKeyDownFromPointerDownHandler(pointerDownState);\n const onKeyUp = this.onKeyUpFromPointerDownHandler(pointerDownState);\n this.missingPointerEventCleanupEmitter.once(_event => onPointerUp(_event || event.nativeEvent));\n\n if (!this.state.viewModeEnabled || this.state.activeTool.type === \"laser\") {\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, onPointerMove);\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, onPointerUp);\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYDOWN, onKeyDown);\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYUP, onKeyUp);\n pointerDownState.eventListeners.onMove = onPointerMove;\n pointerDownState.eventListeners.onUp = onPointerUp;\n pointerDownState.eventListeners.onKeyUp = onKeyUp;\n pointerDownState.eventListeners.onKeyDown = onKeyDown;\n }\n };\n\n this.handleCanvasPointerUp = event => {\n var _a, _b;\n\n this.removePointer(event);\n this.lastPointerUpEvent = event;\n const scenePointer = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.viewportCoordsToSceneCoords)({\n clientX: event.clientX,\n clientY: event.clientY\n }, this.state);\n const clicklength = event.timeStamp - ((_b = (_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a.timeStamp) !== null && _b !== void 0 ? _b : 0);\n\n if (this.device.editor.isMobile && clicklength < 300) {\n const hitElement = this.getElementAtPosition(scenePointer.x, scenePointer.y);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeLikeElement)(hitElement) && this.isIframeLikeElementCenter(hitElement, event, scenePointer.x, scenePointer.y)) {\n this.handleEmbeddableCenterClick(hitElement);\n return;\n }\n }\n\n if (this.device.isTouchScreen) {\n const hitElement = this.getElementAtPosition(scenePointer.x, scenePointer.y);\n this.hitLinkElement = this.getElementLinkAtPosition(scenePointer, hitElement);\n }\n\n if (this.hitLinkElement && !this.state.selectedElementIds[this.hitLinkElement.id]) {\n if (clicklength < 300 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeLikeElement)(this.hitLinkElement) && !(0,_hyperlink_helpers__WEBPACK_IMPORTED_MODULE_87__.isPointHittingLinkIcon)(this.hitLinkElement, this.scene.getNonDeletedElementsMap(), this.state, (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(scenePointer.x, scenePointer.y))) {\n this.handleEmbeddableCenterClick(this.hitLinkElement);\n } else {\n this.redirectToLink(event, this.device.isTouchScreen);\n }\n } else if (this.state.viewModeEnabled) {\n this.setState({\n activeEmbeddable: null,\n selectedElementIds: {}\n });\n }\n };\n\n this.maybeOpenContextMenuAfterPointerDownOnTouchDevices = event => {\n // deal with opening context menu on touch devices\n if (event.pointerType === \"touch\") {\n invalidateContextMenu = false;\n\n if (touchTimeout) {\n // If there's already a touchTimeout, this means that there's another\n // touch down and we are doing another touch, so we shouldn't open the\n // context menu.\n invalidateContextMenu = true;\n } else {\n // open the context menu with the first touch's clientX and clientY\n // if the touch is not moving\n touchTimeout = window.setTimeout(() => {\n touchTimeout = 0;\n\n if (!invalidateContextMenu) {\n this.handleCanvasContextMenu(event);\n }\n }, _constants__WEBPACK_IMPORTED_MODULE_12__.TOUCH_CTX_MENU_TIMEOUT);\n }\n }\n };\n\n this.resetContextMenuTimer = () => {\n clearTimeout(touchTimeout);\n touchTimeout = 0;\n invalidateContextMenu = false;\n };\n /**\n * pointerup may not fire in certian cases (user tabs away...), so in order\n * to properly cleanup pointerdown state, we need to fire any hanging\n * pointerup handlers manually\n */\n\n\n this.maybeCleanupAfterMissingPointerUp = event => {\n lastPointerUp === null || lastPointerUp === void 0 ? void 0 : lastPointerUp();\n this.missingPointerEventCleanupEmitter.trigger(event).clear();\n }; // Returns whether the event is a panning\n\n\n this.handleCanvasPanUsingWheelOrSpaceDrag = event => {\n if (!(gesture.pointers.size <= 1 && (event.button === _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.WHEEL || event.button === _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.MAIN && isHoldingSpace || (0,_appState__WEBPACK_IMPORTED_MODULE_10__.isHandToolActive)(this.state) || //!isLastPointerActive added by zsviczian (but don't remember why....)\n this.state.viewModeEnabled && !(0,_appState__WEBPACK_IMPORTED_MODULE_10__.isLaserPointerActive)(this.state)))) {\n return false;\n }\n\n isPanning = true; // due to event.preventDefault below, container wouldn't get focus\n // automatically\n\n this.focusContainer(); // preventing defualt while text editing messes with cursor/focus\n\n if (!this.state.editingTextElement) {\n // necessary to prevent browser from scrolling the page if excalidraw\n // not full-page #4489\n //\n // as such, the above is broken when panning canvas while in wysiwyg\n event.preventDefault();\n }\n\n let nextPastePrevented = false;\n const isLinux = typeof window === undefined ? false : /Linux/.test(window.navigator.platform);\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRABBING);\n let {\n clientX: lastX,\n clientY: lastY\n } = event;\n const onPointerMove = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdatesThrottled)(event => {\n const deltaX = lastX - event.clientX;\n const deltaY = lastY - event.clientY;\n lastX = event.clientX;\n lastY = event.clientY;\n /*\n * Prevent paste event if we move while middle clicking on Linux.\n * See issue #1383.\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 /*\n * Reenable next paste in case of disabled middle click paste for\n * any reason:\n * - right click paste\n * - empty clipboard\n */\n\n\n const enableNextPaste = () => {\n setTimeout(() => {\n document.body.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.PASTE, preventNextPaste);\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, enableNextPaste);\n }, 100);\n };\n\n document.body.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.PASTE, preventNextPaste);\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, enableNextPaste);\n }\n\n this.translateCanvas({\n scrollX: this.state.scrollX - deltaX / this.state.zoom.value,\n scrollY: this.state.scrollY - deltaY / this.state.zoom.value\n });\n });\n const teardown = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(lastPointerUp = () => {\n lastPointerUp = null;\n isPanning = false;\n\n if (!isHoldingSpace) {\n if (this.state.viewModeEnabled) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.GRAB);\n } else {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.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_51__.makeNextSelectedElementIds)({}, this.state),\n selectedGroupIds: {},\n editingGroupId: null,\n activeEmbeddable: null\n });\n }\n };\n /**\n * @returns whether the pointer event has been completely handled\n */\n\n\n this.handleSelectionOnPointerDown = (event, pointerDownState) => {\n var _a;\n\n if (this.state.activeTool.type === \"selection\") {\n const elements = this.scene.getNonDeletedElements();\n const elementsMap = this.scene.getNonDeletedElementsMap();\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (selectedElements.length === 1 && !this.state.editingLinearElement && !(this.state.selectedLinearElement && this.state.selectedLinearElement.hoverPointIndex !== -1)) {\n const elementWithTransformHandleType = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getElementWithTransformHandleType)(elements, this.state, pointerDownState.origin.x, pointerDownState.origin.y, this.state.zoom, event.pointerType, this.scene.getNonDeletedElementsMap(), this.device);\n\n if (elementWithTransformHandleType != null) {\n this.setState({\n resizingElement: elementWithTransformHandleType.element\n });\n pointerDownState.resize.handleType = elementWithTransformHandleType.transformHandleType;\n }\n } else if (selectedElements.length > 1) {\n pointerDownState.resize.handleType = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getTransformHandleTypeFromCoords)((0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(selectedElements), pointerDownState.origin.x, pointerDownState.origin.y, this.state.zoom, event.pointerType, this.device);\n }\n\n if (pointerDownState.resize.handleType) {\n pointerDownState.resize.isResizing = true;\n pointerDownState.resize.offset = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.tupleToCoors)((0,_element__WEBPACK_IMPORTED_MODULE_16__.getResizeOffsetXY)(pointerDownState.resize.handleType, selectedElements, elementsMap, pointerDownState.origin.x, pointerDownState.origin.y));\n\n if (selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(selectedElements[0]) && selectedElements[0].points.length === 2) {\n pointerDownState.resize.arrowDirection = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getResizeArrowDirection)(pointerDownState.resize.handleType, selectedElements[0]);\n }\n } else {\n if (this.state.selectedLinearElement) {\n const linearElementEditor = this.state.editingLinearElement || this.state.selectedLinearElement;\n const ret = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handlePointerDown(event, this, this.store, pointerDownState.origin, linearElementEditor, this.scene);\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_51__.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_51__.makeNextSelectedElementIds)({}, this.state),\n selectedGroupIds: {},\n editingGroupId: null,\n activeEmbeddable: null\n });\n } // Add hit element to selection. At this point if we're not holding\n // SHIFT the previously selected element(s) were deselected above\n // (make sure you use setState updater to use latest state)\n // With shift-selection, we want to make sure that frames and their containing\n // elements are not selected at the same time.\n\n\n if (!someHitElementIsSelected && !pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements) {\n this.setState(prevState => {\n const nextSelectedElementIds = Object.assign(Object.assign({}, prevState.selectedElementIds), {\n [hitElement.id]: true\n });\n const previouslySelectedElements = [];\n Object.keys(prevState.selectedElementIds).forEach(id => {\n const element = this.scene.getElement(id);\n element && previouslySelectedElements.push(element);\n }); // if hitElement is frame-like, deselect all of its elements\n // if they are selected\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(hitElement)) {\n (0,_frame__WEBPACK_IMPORTED_MODULE_50__.getFrameChildren)(previouslySelectedElements, hitElement.id).forEach(element => {\n delete nextSelectedElementIds[element.id];\n });\n } else if (hitElement.frameId) {\n // if hitElement is in a frame and its frame has been selected\n // disable selection for the given element\n if (nextSelectedElementIds[hitElement.frameId]) {\n delete nextSelectedElementIds[hitElement.id];\n }\n } else {\n // hitElement is neither a frame nor an element in a frame\n // but since hitElement could be in a group with some frames\n // this means selecting hitElement will have the frames selected as well\n // because we want to keep the invariant:\n // - frames and their elements are not selected at the same time\n // we deselect elements in those frames that were previously selected\n const groupIds = hitElement.groupIds;\n const framesInGroups = new Set(groupIds.flatMap(gid => (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(this.scene.getNonDeletedElements(), gid)).filter(element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(element)).map(frame => frame.id));\n\n if (framesInGroups.size > 0) {\n previouslySelectedElements.forEach(element => {\n if (element.frameId && framesInGroups.has(element.frameId)) {\n // deselect element and groups containing the element\n delete nextSelectedElementIds[element.id];\n element.groupIds.flatMap(gid => (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(this.scene.getNonDeletedElements(), gid)).forEach(element => {\n delete nextSelectedElementIds[element.id];\n });\n }\n });\n }\n }\n\n return Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n editingGroupId: prevState.editingGroupId,\n selectedElementIds: nextSelectedElementIds\n }, this.scene.getNonDeletedElements(), prevState, this)), {\n showHyperlinkPopup: hitElement.link || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(hitElement) ? \"info\" : false\n });\n });\n pointerDownState.hit.wasAddedToSelection = true;\n }\n }\n }\n\n this.setState({\n previousSelectedElementIds: this.state.selectedElementIds\n });\n }\n }\n\n return false;\n };\n\n this.handleTextOnPointerDown = (event, pointerDownState) => {\n // if we're currently still editing text, clicking outside\n // should only finalize it, not create another (irrespective\n // of state.activeTool.locked)\n if (this.state.editingTextElement) {\n return;\n }\n\n let sceneX = pointerDownState.origin.x;\n let sceneY = pointerDownState.origin.y;\n const element = this.getElementAtPosition(sceneX, sceneY, {\n includeBoundTextElement: true\n }); // FIXME\n\n let container = this.getTextBindableContainerAtPosition(sceneX, sceneY);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.hasBoundTextElement)(element)) {\n container = element;\n sceneX = element.x + element.width / 2;\n sceneY = element.y + element.height / 2;\n }\n\n this.startTextEditing({\n sceneX,\n sceneY,\n insertAtParentCenter: !event.altKey,\n container,\n autoEdit: false\n });\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.resetCursor)(this.interactiveCanvas);\n\n if (!this.state.activeTool.locked) {\n this.setState({\n activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_34__.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,_snapping__WEBPACK_IMPORTED_MODULE_58__.getGridPoint)(pointerDownState.origin.x, pointerDownState.origin.y, null);\n const topLayerFrame = this.getTopLayerFrameAtSceneCoords({\n x: gridX,\n y: gridY\n });\n const strokeOptions = this.state.currentStrokeOptions; //zsviczian\n\n const simulatePressure = (strokeOptions === null || strokeOptions === void 0 ? void 0 : strokeOptions.constantPressure //zsviczian\n ) ? false : event.pressure === 0.5;\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 points: [(0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(0, 0)],\n pressures: simulatePressure ? [] : [(strokeOptions === null || strokeOptions === void 0 ? void 0 : strokeOptions.constantPressure) ? 1 : event.pressure]\n })); //zsviczian\n\n if (strokeOptions === null || strokeOptions === void 0 ? void 0 : strokeOptions.highlighter) {\n this.scene.insertElement(element, 0);\n } else {\n this.scene.insertElement(element);\n }\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_51__.makeNextSelectedElementIds)(nextSelectedElementIds, prevState)\n };\n });\n const boundElement = (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getHoveredElementForBinding)(pointerDownState.origin, this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap());\n this.setState({\n newElement: element,\n startBoundElement: boundElement,\n suggestedBindings: []\n });\n };\n\n this.insertIframeElement = ({\n sceneX,\n sceneY,\n width,\n height\n }) => {\n var _a;\n\n const [gridX, gridY] = (0,_snapping__WEBPACK_IMPORTED_MODULE_58__.getGridPoint)(sceneX, sceneY, ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) ? null : this.getEffectiveGridSize());\n const element = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newIframeElement)({\n type: \"iframe\",\n x: gridX,\n y: gridY,\n strokeColor: \"transparent\",\n backgroundColor: \"transparent\",\n fillStyle: this.state.currentItemFillStyle,\n strokeWidth: this.state.currentItemStrokeWidth,\n strokeStyle: this.state.currentItemStrokeStyle,\n roughness: this.state.currentItemRoughness,\n roundness: this.getCurrentItemRoundness(\"iframe\"),\n opacity: this.state.currentItemOpacity,\n locked: false,\n width,\n height\n });\n this.scene.insertElement(element);\n return element;\n }; //create rectangle element with youtube top left on nearest grid point width / hight 640/360\n\n\n this.insertEmbeddableElement = ({\n sceneX,\n sceneY,\n link\n }) => {\n var _a;\n\n const [gridX, gridY] = (0,_snapping__WEBPACK_IMPORTED_MODULE_58__.getGridPoint)(sceneX, sceneY, ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) ? null : this.getEffectiveGridSize());\n const embedLink = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_35__.getEmbedLink)(link);\n\n if (!embedLink) {\n return;\n }\n\n if (embedLink.error instanceof URIError) {\n this.setToast({\n message: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"toast.unrecognizedLinkFormat\"),\n closable: true\n });\n }\n\n const element = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newEmbeddableElement)({\n type: \"embeddable\",\n x: gridX,\n y: gridY,\n strokeColor: \"transparent\",\n backgroundColor: \"transparent\",\n fillStyle: this.state.currentItemFillStyle,\n strokeWidth: this.state.currentItemStrokeWidth,\n strokeStyle: this.state.currentItemStrokeStyle,\n roughness: this.state.currentItemRoughness,\n roundness: this.getCurrentItemRoundness(\"embeddable\"),\n opacity: this.state.currentItemOpacity,\n locked: false,\n width: embedLink.intrinsicSize.w,\n height: embedLink.intrinsicSize.h,\n link\n });\n this.scene.insertElement(element);\n return element;\n };\n\n this.createImageElement = ({\n sceneX,\n sceneY,\n addToFrameUnderCursor = true\n }) => {\n var _a;\n\n const [gridX, gridY] = (0,_snapping__WEBPACK_IMPORTED_MODULE_58__.getGridPoint)(sceneX, sceneY, ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) ? null : this.getEffectiveGridSize());\n const topLayerFrame = addToFrameUnderCursor ? this.getTopLayerFrameAtSceneCoords({\n x: gridX,\n y: gridY\n }) : null;\n const element = (0,_element__WEBPACK_IMPORTED_MODULE_16__.newImageElement)({\n type: \"image\",\n x: gridX,\n y: gridY,\n strokeColor: this.state.currentItemStrokeColor,\n backgroundColor: this.state.currentItemBackgroundColor,\n fillStyle: this.state.currentItemFillStyle,\n strokeWidth: this.state.currentItemStrokeWidth,\n strokeStyle: this.state.currentItemStrokeStyle,\n roughness: this.state.currentItemRoughness,\n roundness: null,\n opacity: this.state.currentItemOpacity,\n locked: false,\n frameId: topLayerFrame ? topLayerFrame.id : null\n });\n return element;\n };\n\n this.handleLinearElementOnPointerDown = (event, elementType, pointerDownState) => {\n if (this.state.multiElement) {\n const {\n multiElement\n } = this.state; // finalize if completing a loop\n\n if (multiElement.type === \"line\" && (0,_shapes__WEBPACK_IMPORTED_MODULE_31__.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 } // Elbow arrows cannot be created by putting down points\n // only the start and end points can be defined\n\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isElbowArrow)(multiElement) && multiElement.points.length > 1) {\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_98__.pointDistance)((0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(pointerDownState.origin.x - rx, pointerDownState.origin.y - ry), lastCommittedPoint) < _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_51__.makeNextSelectedElementIds)(Object.assign(Object.assign({}, prevState.selectedElementIds), {\n [multiElement.id]: true\n }), prevState)\n })); // clicking outside commit zone → update reference for last committed\n // point\n\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(multiElement, {\n lastCommittedPoint: multiElement.points[multiElement.points.length - 1]\n });\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n } else {\n const [gridX, gridY] = (0,_snapping__WEBPACK_IMPORTED_MODULE_58__.getGridPoint)(pointerDownState.origin.x, pointerDownState.origin.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.getEffectiveGridSize());\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.\n If so, we want it to be null for start and \"arrow\" for end. If the linear item is not\n an arrow, we want it to be null for both. Otherwise, we want it to use the\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 = elementType === \"arrow\" ? (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newArrowElement)({\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.currentItemArrowType === _constants__WEBPACK_IMPORTED_MODULE_12__.ARROW_TYPE.round ? {\n type: _constants__WEBPACK_IMPORTED_MODULE_12__.ROUNDNESS.PROPORTIONAL_RADIUS\n } : // note, roundness doesn't have any effect for elbow arrows,\n // but it's best to set it to null as well\n null,\n startArrowhead,\n endArrowhead,\n locked: false,\n frameId: topLayerFrame ? topLayerFrame.id : null,\n elbowed: this.state.currentItemArrowType === _constants__WEBPACK_IMPORTED_MODULE_12__.ARROW_TYPE.elbow\n }) : (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 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_51__.makeNextSelectedElementIds)(nextSelectedElementIds, prevState)\n };\n });\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n points: [...element.points, (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(0, 0)]\n });\n const boundElement = (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getHoveredElementForBinding)(pointerDownState.origin, this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap(), (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isElbowArrow)(element));\n this.scene.insertElement(element);\n this.setState({\n newElement: element,\n startBoundElement: boundElement,\n suggestedBindings: []\n });\n }\n };\n\n this.createGenericElementOnPointerDown = (elementType, pointerDownState) => {\n var _a;\n\n const [gridX, gridY] = (0,_snapping__WEBPACK_IMPORTED_MODULE_58__.getGridPoint)(pointerDownState.origin.x, pointerDownState.origin.y, ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) ? null : this.getEffectiveGridSize());\n const topLayerFrame = this.getTopLayerFrameAtSceneCoords({\n x: gridX,\n y: gridY\n });\n const baseElementAttributes = {\n x: gridX,\n y: gridY,\n strokeColor: this.state.currentItemStrokeColor,\n backgroundColor: this.state.currentItemBackgroundColor,\n fillStyle: this.state.currentItemFillStyle,\n strokeWidth: this.state.currentItemStrokeWidth,\n strokeStyle: this.state.currentItemStrokeStyle,\n roughness: this.state.currentItemRoughness,\n opacity: this.state.currentItemOpacity,\n roundness: this.getCurrentItemRoundness(elementType),\n locked: false,\n frameId: topLayerFrame ? topLayerFrame.id : null\n };\n let element;\n\n if (elementType === \"embeddable\") {\n element = (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newEmbeddableElement)(Object.assign({\n type: \"embeddable\"\n }, baseElementAttributes));\n } else {\n element = (0,_element__WEBPACK_IMPORTED_MODULE_16__.newElement)(Object.assign({\n type: elementType\n }, baseElementAttributes));\n }\n\n if (element.type === \"selection\") {\n this.setState({\n selectionElement: element\n });\n } else {\n this.scene.insertElement(element);\n this.setState({\n multiElement: null,\n newElement: element\n });\n }\n };\n\n this.createFrameElementOnPointerDown = (pointerDownState, type) => {\n var _a;\n\n const [gridX, gridY] = (0,_snapping__WEBPACK_IMPORTED_MODULE_58__.getGridPoint)(pointerDownState.origin.x, pointerDownState.origin.y, ((_a = this.lastPointerDownEvent) === null || _a === void 0 ? void 0 : _a[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) ? null : this.getEffectiveGridSize());\n const constructorOpts = Object.assign(Object.assign({\n x: gridX,\n y: gridY,\n opacity: this.state.currentItemOpacity,\n locked: false\n }, _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE), this.state.frameColor ? {\n //zsviczian\n customData: {\n frameColor: this.state.frameColor\n }\n } : {});\n const frame = type === _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.magicframe ? (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newMagicFrameElement)(constructorOpts) : (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.newFrameElement)(constructorOpts);\n this.scene.insertElement(frame);\n this.setState({\n multiElement: null,\n newElement: frame\n });\n };\n\n this.restoreReadyToEraseElements = () => {\n this.elementsPendingErasure = new Set();\n this.triggerRender();\n };\n\n this.eraseElements = () => {\n let didChange = false;\n const elements = this.scene.getElementsIncludingDeleted().map(ele => {\n if (this.elementsPendingErasure.has(ele.id) || ele.frameId && this.elementsPendingErasure.has(ele.frameId) || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(ele) && this.elementsPendingErasure.has(ele.containerId)) {\n didChange = true;\n return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(ele, {\n isDeleted: true\n });\n }\n\n return ele;\n });\n this.elementsPendingErasure = new Set();\n\n if (didChange) {\n this.store.shouldCaptureIncrement();\n this.scene.replaceAllElements(elements);\n }\n };\n\n this.initializeImage = async ({\n imageFile,\n imageElement: _imageElement,\n showCursorImagePreview = false\n }) => {\n var _a, _b, _c, _d; // at this point this should be guaranteed image file, but we do this check\n // to satisfy TS down the line\n\n\n if (!(0,_data_blob__WEBPACK_IMPORTED_MODULE_40__.isSupportedImageFile)(imageFile)) {\n throw new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.unsupportedFileType\"));\n }\n\n const mimeType = imageFile.type;\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.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_40__.SVGStringToFile)(await (0,_element_image__WEBPACK_IMPORTED_MODULE_41__.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_40__.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_40__.resizeImageFile)(imageFile, {\n maxWidthOrHeight: _constants__WEBPACK_IMPORTED_MODULE_12__.DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT\n });\n } catch (error) {\n console.error(\"Error trying to resizing image file on insertion\", error);\n }\n\n if (imageFile.size > _constants__WEBPACK_IMPORTED_MODULE_12__.MAX_ALLOWED_FILE_BYTES) {\n throw new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.fileTooBig\", {\n maxSize: `${Math.trunc(_constants__WEBPACK_IMPORTED_MODULE_12__.MAX_ALLOWED_FILE_BYTES / 1024 / 1024)}MB`\n }));\n }\n }\n\n if (showCursorImagePreview) {\n const dataURL = (_c = this.files[fileId]) === null || _c === void 0 ? void 0 : _c.dataURL; // optimization so that we don't unnecessarily resize the original\n // full-size file for cursor preview\n // (it's much faster to convert the resized dataURL to File)\n\n const resizedFile = dataURL && (0,_data_blob__WEBPACK_IMPORTED_MODULE_40__.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_40__.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 //@ts-ignore\n name: imageFile === null || imageFile === void 0 ? void 0 : imageFile.name // zsviczian\n\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.newElement) === null || _a === void 0 ? void 0 : _a.id) !== imageElement.id) {\n this.initializeImageDimensions(imageElement, true);\n }\n\n resolve(imageElement);\n } catch (error) {\n console.error(error);\n reject(new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageInsertError\")));\n } finally {\n if (!showCursorImagePreview) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.resetCursor)(this.interactiveCanvas);\n }\n }\n });\n };\n /**\n * inserts image into elements array and rerenders\n */\n\n\n this.insertImageElement = async (imageElement, imageFile, showCursorImagePreview) => {\n // we should be handling all cases upstream, but in case we forget to handle\n // a future case, let's throw here\n if (!this.isToolSupported(\"image\")) {\n this.setState({\n errorMessage: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageToolNotSupported\")\n });\n return;\n }\n\n this.scene.insertElement(imageElement);\n\n try {\n return await this.initializeImage({\n imageFile,\n imageElement,\n showCursorImagePreview\n });\n } catch (error) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(imageElement, {\n isDeleted: true\n });\n this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n this.setState({\n errorMessage: error.message || (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageInsertError\")\n });\n return null;\n }\n };\n\n this.setImagePreviewCursor = async imageFile => {\n // mustn't be larger than 128 px\n // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property\n const cursorImageSizePx = 96;\n let imagePreview;\n\n try {\n imagePreview = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_40__.resizeImageFile)(imageFile, {\n maxWidthOrHeight: cursorImageSizePx\n });\n } catch (e) {\n if (e.cause === \"UNSUPPORTED\") {\n throw new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.unsupportedFileType\"));\n }\n\n throw e;\n }\n\n let previewDataURL = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_40__.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_41__.loadHTMLImageElement)(previewDataURL);\n let height = Math.min(img.height, cursorImageSizePx);\n let width = height * (img.width / img.height);\n\n if (width > cursorImageSizePx) {\n width = cursorImageSizePx;\n height = width * (img.height / img.width);\n }\n\n const canvas = document.createElement(\"canvas\");\n canvas.height = height;\n canvas.width = width;\n const context = canvas.getContext(\"2d\");\n context.drawImage(img, 0, 0, width, height);\n previewDataURL = canvas.toDataURL(_constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.svg);\n }\n\n if (this.state.pendingImageElementId) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, `url(${previewDataURL}) 4 4, auto`);\n }\n };\n\n this.onImageAction = async ({\n insertOnCanvasDirectly\n }) => {\n try {\n const clientX = this.state.width / 2 + this.state.offsetLeft;\n const clientY = this.state.height / 2 + this.state.offsetTop;\n const {\n x,\n y\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.viewportCoordsToSceneCoords)({\n clientX,\n clientY\n }, this.state);\n const imageFile = await (0,_data_filesystem__WEBPACK_IMPORTED_MODULE_43__.fileOpen)({\n description: \"Image\",\n extensions: Object.keys(_constants__WEBPACK_IMPORTED_MODULE_12__.IMAGE_MIME_TYPES)\n });\n const imageElement = this.createImageElement({\n sceneX: x,\n sceneY: y,\n addToFrameUnderCursor: false\n });\n\n if (insertOnCanvasDirectly) {\n this.insertImageElement(imageElement, imageFile);\n this.initializeImageDimensions(imageElement);\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.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 newElement: null,\n activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_34__.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\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_41__.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_41__.getInitializedImageElements)(this.scene.getNonDeletedElements()), files = this.files) => {\n const uncachedImageElements = imageElements.filter(element => !element.isDeleted && !this.imageCache.has(element.fileId));\n\n if (uncachedImageElements.length) {\n const {\n updatedFiles\n } = await this.updateImageCache(uncachedImageElements, files);\n\n if (updatedFiles.size) {\n this.scene.triggerUpdate();\n }\n }\n };\n /** generally you should use `addNewImagesToImageCache()` directly if you need\n * to render new images. This is just a failsafe */\n\n\n this.scheduleImageRefresh = lodash_throttle__WEBPACK_IMPORTED_MODULE_42___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.getNonDeletedElements(), this.scene.getNonDeletedElementsMap());\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.getNonDeletedElements(), this.scene.getNonDeletedElementsMap(), (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isArrowElement)(linearElement) && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isElbowArrow)(linearElement));\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; // 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.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.TOUCH_START, this.onTouchStart);\n (_b = this.interactiveCanvas) === null || _b === void 0 ? void 0 : _b.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_40__.getFileFromEvent)(event);\n const {\n x: sceneX,\n y: sceneY\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.viewportCoordsToSceneCoords)(event, this.state);\n\n try {\n // if image tool not supported, don't show an error here and let it fall\n // through so we still support importing scene data from images. If no\n // scene data encoded, we'll show an error then\n if ((0,_data_blob__WEBPACK_IMPORTED_MODULE_40__.isSupportedImageFile)(file) && this.isToolSupported(\"image\")) {\n // first attempt to decode scene from the image if it's embedded\n // ---------------------------------------------------------------------\n if ((file === null || file === void 0 ? void 0 : file.type) === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.png || (file === null || file === void 0 ? void 0 : file.type) === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.svg) {\n try {\n const scene = await (0,_data__WEBPACK_IMPORTED_MODULE_13__.loadFromBlob)(file, this.state, this.scene.getElementsIncludingDeleted(), fileHandle);\n this.syncActionResult(Object.assign(Object.assign({}, scene), {\n appState: Object.assign(Object.assign({}, scene.appState || this.state), {\n isLoading: false\n }),\n replaceFiles: true,\n storeAction: _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.CAPTURE\n }));\n return;\n } catch (error) {\n // Don't throw for image scene daa\n if (error.name !== \"EncodingError\") {\n throw new Error((0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"alerts.couldNotLoadInvalidFile\"));\n }\n }\n } // if no scene is embedded or we fail for whatever reason, fall back\n // to importing as regular image\n // ---------------------------------------------------------------------\n\n\n const imageElement = this.createImageElement({\n sceneX,\n sceneY\n });\n this.insertImageElement(imageElement, file);\n this.initializeImageDimensions(imageElement);\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.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_40__.parseLibraryJSON)(libraryJSON);\n this.addElementsFromPasteOrLibrary({\n elements: (0,_data_library__WEBPACK_IMPORTED_MODULE_14__.distributeLibraryItemsOnSquareGrid)(libraryItems),\n position: event,\n files: null\n });\n } catch (error) {\n this.setState({\n errorMessage: error.message\n });\n }\n\n return;\n }\n\n if (file) {\n // Attempt to parse an excalidraw/excalidrawlib file\n await this.loadFileToCanvas(file, fileHandle);\n }\n\n if ((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) === null || _b === void 0 ? void 0 : _b.includes(\"text/plain\")) {\n const text = (_c = event.dataTransfer) === null || _c === void 0 ? void 0 : _c.getData(\"text\");\n\n if (text && (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_35__.embeddableURLValidator)(text, this.props.validateEmbeddable) && (/^(http|https):\\/\\/[^\\s/$.?#].[^\\s]*$/.test(text) || ((_d = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_35__.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_46__.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_40__.normalizeFile)(file);\n\n try {\n const elements = this.scene.getElementsIncludingDeleted();\n let ret;\n\n try {\n ret = await (0,_data_blob__WEBPACK_IMPORTED_MODULE_40__.loadSceneOrLibraryFromBlob)(file, this.state, elements, fileHandle);\n } catch (error) {\n const imageSceneDataError = error instanceof _errors__WEBPACK_IMPORTED_MODULE_57__.ImageSceneDataError;\n\n if (imageSceneDataError && error.code === \"IMAGE_NOT_CONTAINS_SCENE_DATA\" && !this.isToolSupported(\"image\")) {\n this.setState({\n isLoading: false,\n errorMessage: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.imageToolNotSupported\")\n });\n return;\n }\n\n const errorMessage = imageSceneDataError ? (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"alerts.cannotRestoreFromImage\") : (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"alerts.couldNotLoadInvalidFile\");\n this.setState({\n isLoading: false,\n errorMessage\n });\n }\n\n if (!ret) {\n return;\n }\n\n if (ret.type === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.excalidraw) {\n // restore the fractional indices by mutating elements\n (0,_fractionalIndex__WEBPACK_IMPORTED_MODULE_86__.syncInvalidIndices)(elements.concat(ret.data.elements)); // update the store snapshot for old elements, otherwise we would end up with duplicated fractional indices on undo\n\n this.store.updateSnapshot((0,_utils__WEBPACK_IMPORTED_MODULE_34__.arrayToMap)(elements), this.state);\n this.setState({\n isLoading: true\n });\n this.syncActionResult(Object.assign(Object.assign({}, ret.data), {\n appState: Object.assign(Object.assign({}, ret.data.appState || this.state), {\n isLoading: false\n }),\n replaceFiles: true,\n storeAction: _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.CAPTURE\n }));\n } else if (ret.type === _constants__WEBPACK_IMPORTED_MODULE_12__.MIME_TYPES.excalidrawlib) {\n await this.library.updateLibrary({\n libraryItems: file,\n merge: true,\n openLibraryMenu: true\n }).catch(error => {\n console.error(error);\n this.setState({\n errorMessage: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.importLibraryError\")\n });\n });\n }\n } catch (error) {\n this.setState({\n isLoading: false,\n errorMessage: error.message\n });\n }\n };\n\n this.handleCanvasContextMenu = event => {\n event.preventDefault();\n\n if ((\"pointerType\" in event.nativeEvent && event.nativeEvent.pointerType === \"touch\" || \"pointerType\" in event.nativeEvent && event.nativeEvent.pointerType === \"pen\" && // always allow if user uses a pen secondary button\n event.button !== _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_BUTTON.SECONDARY) && this.state.activeTool.type !== \"selection\") {\n return;\n }\n\n const {\n x,\n y\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.viewportCoordsToSceneCoords)(event, this.state);\n const element = this.getElementAtPosition(x, y, {\n preferSelected: true,\n includeLockedElements: true\n });\n const selectedElements = this.scene.getSelectedElements(this.state);\n const isHittingCommonBoundBox = this.isHittingCommonBoundingBoxOfSelectedElements({\n x,\n y\n }, selectedElements);\n const type = element || isHittingCommonBoundBox ? \"element\" : \"canvas\";\n const container = this.excalidrawContainerRef.current;\n const {\n top: offsetTop,\n left: offsetLeft\n } = container.getBoundingClientRect();\n const left = event.clientX - offsetLeft;\n const top = event.clientY - offsetTop;\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"contextMenu\", \"openContextMenu\", type);\n this.setState(Object.assign(Object.assign({}, element && !this.state.selectedElementIds[element.id] ? Object.assign(Object.assign(Object.assign({}, this.state), (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n editingGroupId: this.state.editingGroupId,\n selectedElementIds: {\n [element.id]: true\n }\n }, this.scene.getNonDeletedElements(), this.state, this)), {\n selectedLinearElement: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(element) ? new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(element) : null\n }) : this.state), {\n showHyperlinkPopup: false\n }), () => {\n this.setState({\n contextMenu: {\n top,\n left,\n items: this.getContextMenuItems(type)\n }\n });\n });\n };\n\n this.maybeDragNewGenericElement = (pointerDownState, event, informMutation = true) => {\n var _a, _b, _c, _d, _e;\n\n const selectionElement = this.state.selectionElement;\n const pointerCoords = pointerDownState.lastCoords;\n\n if (selectionElement && this.state.activeTool.type !== \"eraser\") {\n (0,_element__WEBPACK_IMPORTED_MODULE_16__.dragNewElement)({\n newElement: selectionElement,\n elementType: this.state.activeTool.type,\n originX: pointerDownState.origin.x,\n originY: pointerDownState.origin.y,\n x: pointerCoords.x,\n y: pointerCoords.y,\n width: (0,_utils__WEBPACK_IMPORTED_MODULE_34__.distance)(pointerDownState.origin.x, pointerCoords.x),\n height: (0,_utils__WEBPACK_IMPORTED_MODULE_34__.distance)(pointerDownState.origin.y, pointerCoords.y),\n shouldMaintainAspectRatio: (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldMaintainAspectRatio)(event),\n shouldResizeFromCenter: (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldResizeFromCenter)(event),\n zoom: this.state.zoom.value,\n informMutation\n });\n return;\n }\n\n const newElement = this.state.newElement;\n\n if (!newElement) {\n return;\n }\n\n let [gridX, gridY] = (0,_snapping__WEBPACK_IMPORTED_MODULE_58__.getGridPoint)(pointerCoords.x, pointerCoords.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.getEffectiveGridSize());\n const image = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isInitializedImageElement)(newElement) && ((_a = this.imageCache.get(newElement.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, [newElement]);\n const {\n snapOffset,\n snapLines\n } = (0,_snapping__WEBPACK_IMPORTED_MODULE_58__.snapNewElement)(newElement, this, event, {\n x: pointerDownState.originInGrid.x + ((_c = (_b = this.state.originSnapOffset) === null || _b === void 0 ? void 0 : _b.x) !== null && _c !== void 0 ? _c : 0),\n y: pointerDownState.originInGrid.y + ((_e = (_d = this.state.originSnapOffset) === null || _d === void 0 ? void 0 : _d.y) !== null && _e !== void 0 ? _e : 0)\n }, {\n x: gridX - pointerDownState.originInGrid.x,\n y: gridY - pointerDownState.originInGrid.y\n }, this.scene.getNonDeletedElementsMap());\n gridX += snapOffset.x;\n gridY += snapOffset.y;\n this.setState({\n snapLines\n });\n (0,_element__WEBPACK_IMPORTED_MODULE_16__.dragNewElement)({\n newElement,\n elementType: this.state.activeTool.type,\n originX: pointerDownState.originInGrid.x,\n originY: pointerDownState.originInGrid.y,\n x: gridX,\n y: gridY,\n width: (0,_utils__WEBPACK_IMPORTED_MODULE_34__.distance)(pointerDownState.originInGrid.x, gridX),\n height: (0,_utils__WEBPACK_IMPORTED_MODULE_34__.distance)(pointerDownState.originInGrid.y, gridY),\n shouldMaintainAspectRatio: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isImageElement)(newElement) ? !(0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldMaintainAspectRatio)(event) : (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldMaintainAspectRatio)(event),\n shouldResizeFromCenter: (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldResizeFromCenter)(event),\n zoom: this.state.zoom.value,\n widthAspectRatio: aspectRatio,\n originOffset: this.state.originSnapOffset,\n informMutation\n });\n this.setState({\n newElement\n }); // highlight elements that are to be added to frames on frames creation\n\n if (this.state.activeTool.type === _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.frame || this.state.activeTool.type === _constants__WEBPACK_IMPORTED_MODULE_12__.TOOL_TYPE.magicframe) {\n this.setState({\n elementsToHighlight: (0,_frame__WEBPACK_IMPORTED_MODULE_50__.getElementsInResizingFrame)(this.scene.getNonDeletedElements(), newElement, this.state, this.scene.getNonDeletedElementsMap())\n });\n }\n };\n\n this.maybeHandleResize = (pointerDownState, event) => {\n const selectedElements = this.scene.getSelectedElements(this.state);\n const selectedFrames = selectedElements.filter(element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(element));\n const transformHandleType = pointerDownState.resize.handleType;\n\n if ( // Frames cannot be rotated.\n selectedFrames.length > 0 && transformHandleType === \"rotation\" || // Elbow arrows cannot be transformed (resized or rotated).\n selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isElbowArrow)(selectedElements[0])) {\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,_snapping__WEBPACK_IMPORTED_MODULE_58__.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.getEffectiveGridSize());\n const frameElementsOffsetsMap = new Map();\n selectedFrames.forEach(frame => {\n const elementsInFrame = (0,_frame__WEBPACK_IMPORTED_MODULE_50__.getFrameChildren)(this.scene.getNonDeletedElements(), frame.id);\n elementsInFrame.forEach(element => {\n frameElementsOffsetsMap.set(frame.id + element.id, {\n x: element.x - frame.x,\n y: element.y - frame.y\n });\n });\n }); // check needed for avoiding flickering when a key gets pressed\n // during dragging\n\n if (!this.state.selectedElementsAreBeingDragged) {\n const [gridX, gridY] = (0,_snapping__WEBPACK_IMPORTED_MODULE_58__.getGridPoint)(pointerCoords.x, pointerCoords.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.getEffectiveGridSize());\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_28__.getSelectedElements)(originalElements, this.state), this, event, dragOffset, transformHandleType);\n resizeX += snapOffset.x;\n resizeY += snapOffset.y;\n this.setState({\n snapLines\n });\n }\n\n if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.transformElements)(pointerDownState.originalElements, transformHandleType, selectedElements, this.scene.getElementsMapIncludingDeleted(), (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldRotateWithDiscreteAngle)(event), (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldResizeFromCenter)(event), selectedElements.some(element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isImageElement)(element)) ? !(0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldMaintainAspectRatio)(event) : (0,_keys__WEBPACK_IMPORTED_MODULE_26__.shouldMaintainAspectRatio)(event), resizeX, resizeY, pointerDownState.resize.center.x, pointerDownState.resize.center.y)) {\n const suggestedBindings = (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getSuggestedBindingsForArrows)(selectedElements, this.scene.getNonDeletedElementsMap());\n const elementsToHighlight = new Set();\n selectedFrames.forEach(frame => {\n (0,_frame__WEBPACK_IMPORTED_MODULE_50__.getElementsInResizingFrame)(this.scene.getNonDeletedElements(), frame, this.state, this.scene.getNonDeletedElementsMap()).forEach(element => elementsToHighlight.add(element));\n });\n this.setState({\n elementsToHighlight: [...elementsToHighlight],\n suggestedBindings\n });\n return true;\n }\n\n return false;\n };\n\n this.getContextMenuItems = type => {\n const options = [];\n options.push(_actions__WEBPACK_IMPORTED_MODULE_5__.actionCopyAsPng, _actions__WEBPACK_IMPORTED_MODULE_5__.actionCopyAsSvg); // canvas contextMenu\n // -------------------------------------------------------------------------\n\n if (type === \"canvas\") {\n if (this.state.viewModeEnabled) {\n return [...options, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleGridMode, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleZenMode, _actions_actionToggleViewMode__WEBPACK_IMPORTED_MODULE_39__.actionToggleViewMode, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleStats, _actions_actionCanvas__WEBPACK_IMPORTED_MODULE_54__.actionToggleLaserPointer];\n }\n\n return [_actions_actionClipboard__WEBPACK_IMPORTED_MODULE_52__.actionPaste, _ContextMenu__WEBPACK_IMPORTED_MODULE_36__.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_36__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionSelectAll, _actions_actionElementLock__WEBPACK_IMPORTED_MODULE_48__.actionUnlockAllElements, _ContextMenu__WEBPACK_IMPORTED_MODULE_36__.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_39__.actionToggleViewMode, _actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleStats];\n } // element contextMenu\n // -------------------------------------------------------------------------\n\n\n options.push(_actions__WEBPACK_IMPORTED_MODULE_5__.copyText);\n\n if (this.state.viewModeEnabled) {\n return [_actions__WEBPACK_IMPORTED_MODULE_5__.actionCopy, ...options];\n }\n\n return [_ContextMenu__WEBPACK_IMPORTED_MODULE_36__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionCut, _actions__WEBPACK_IMPORTED_MODULE_5__.actionCopy, _actions_actionClipboard__WEBPACK_IMPORTED_MODULE_52__.actionPaste, _actions_actionFrame__WEBPACK_IMPORTED_MODULE_53__.actionSelectAllElementsInFrame, _actions_actionFrame__WEBPACK_IMPORTED_MODULE_53__.actionRemoveAllElementsFromFrame, _ContextMenu__WEBPACK_IMPORTED_MODULE_36__.CONTEXT_MENU_SEPARATOR, ...options, _ContextMenu__WEBPACK_IMPORTED_MODULE_36__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionCopyStyles, _actions__WEBPACK_IMPORTED_MODULE_5__.actionPasteStyles, _ContextMenu__WEBPACK_IMPORTED_MODULE_36__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionGroup, _actions_actionTextAutoResize__WEBPACK_IMPORTED_MODULE_90__.actionTextAutoResize, _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_36__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionAddToLibrary, _ContextMenu__WEBPACK_IMPORTED_MODULE_36__.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_36__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionFlipHorizontal, _actions__WEBPACK_IMPORTED_MODULE_5__.actionFlipVertical, _ContextMenu__WEBPACK_IMPORTED_MODULE_36__.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_36__.CONTEXT_MENU_SEPARATOR, _actions__WEBPACK_IMPORTED_MODULE_5__.actionDeleteSelected];\n };\n\n this.handleWheel = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(event => {\n // if not scrolling on canvas/wysiwyg, ignore\n if (!(event.target instanceof HTMLCanvasElement || event.target instanceof HTMLTextAreaElement || event.target instanceof HTMLIFrameElement)) {\n // prevent zooming the browser (but allow scrolling DOM)\n if (event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD]) {\n event.preventDefault();\n }\n\n return;\n }\n\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_30__.getStateForZoom)({\n viewportX: this.lastViewportPosition.x,\n viewportY: this.lastViewportPosition.y,\n nextZoom: (0,_scene__WEBPACK_IMPORTED_MODULE_28__.getNormalizedZoom)(newZoom)\n }, state)), {\n shouldCacheIgnoreZoom: true\n }));\n this.resetShouldCacheIgnoreZoomDebounced();\n return;\n } // scroll horizontally when shift pressed\n\n\n if (event.shiftKey) {\n this.translateCanvas(({\n zoom,\n scrollX\n }) => ({\n // on Mac, shift+wheel tends to result in deltaX\n scrollX: scrollX - (deltaY || deltaX) / zoom.value\n }));\n return;\n }\n\n this.translateCanvas(({\n zoom,\n scrollX,\n scrollY\n }) => ({\n scrollX: scrollX - deltaX / zoom.value,\n scrollY: scrollY - deltaY / zoom.value\n }));\n });\n\n this.savePointer = (x, y, button) => {\n var _a, _b;\n\n if (!x || !y) {\n return;\n }\n\n const {\n x: sceneX,\n y: sceneY\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.viewportCoordsToSceneCoords)({\n clientX: x,\n clientY: y\n }, this.state);\n\n if (isNaN(sceneX) || isNaN(sceneY)) {// sometimes the pointer goes off screen\n }\n\n const pointer = {\n x: sceneX,\n y: sceneY,\n tool: this.state.activeTool.type === \"laser\" ? \"laser\" : \"pointer\"\n };\n (_b = (_a = this.props).onPointerUpdate) === null || _b === void 0 ? void 0 : _b.call(_a, {\n pointer,\n button,\n pointersMap: gesture.pointers\n });\n };\n\n this.resetShouldCacheIgnoreZoomDebounced = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.debounce)(() => {\n if (!this.unmounted) {\n this.setState({\n shouldCacheIgnoreZoom: false\n });\n }\n }, 300);\n\n this.updateDOMRect = cb => {\n var _a;\n\n if ((_a = this.excalidrawContainerRef) === null || _a === void 0 ? void 0 : _a.current) {\n const excalidrawContainer = this.excalidrawContainerRef.current;\n const {\n width,\n height,\n left: offsetLeft,\n top: offsetTop\n } = excalidrawContainer.getBoundingClientRect();\n const {\n width: currentWidth,\n height: currentHeight,\n offsetTop: currentOffsetTop,\n offsetLeft: currentOffsetLeft\n } = this.state;\n\n if (width === currentWidth && height === currentHeight && offsetLeft === currentOffsetLeft && offsetTop === currentOffsetTop) {\n if (cb) {\n cb();\n }\n\n return;\n } //zsviczian\n\n\n if (width === 0 || height === 0) {\n if (cb) {\n cb();\n }\n\n return;\n }\n\n this.setState({\n width,\n height,\n offsetLeft,\n offsetTop\n }, () => {\n cb && cb();\n });\n }\n };\n\n this.refresh = () => {\n this.setState(Object.assign({}, this.getCanvasOffsets()));\n };\n\n const defaultAppState = (0,_appState__WEBPACK_IMPORTED_MODULE_10__.getDefaultAppState)();\n const {\n excalidrawAPI,\n viewModeEnabled = false,\n zenModeEnabled = false,\n gridModeEnabled = false,\n objectsSnapModeEnabled = false,\n theme = defaultAppState.theme,\n initState,\n //zsviczian\n obsidianHostPlugin,\n //zsviczian\n name = `${(0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"labels.untitled\")}-${(0,_utils__WEBPACK_IMPORTED_MODULE_34__.getDateTime)()}`\n } = props;\n this.state = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaultAppState), {\n theme,\n isLoading: true\n }), this.getCanvasOffsets()), {\n viewModeEnabled,\n zenModeEnabled,\n objectsSnapModeEnabled,\n gridModeEnabled: gridModeEnabled !== null && gridModeEnabled !== void 0 ? gridModeEnabled : defaultAppState.gridModeEnabled,\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_99__.nanoid)();\n (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_82__.initializeObsidianUtils)(obsidianHostPlugin.deref()); //zsviczian\n\n this.library = new _data_library__WEBPACK_IMPORTED_MODULE_14__[\"default\"](this);\n this.actionManager = new _actions_manager__WEBPACK_IMPORTED_MODULE_7__.ActionManager(this.syncActionResult, () => this.state, () => this.scene.getElementsIncludingDeleted(), this);\n this.scene = new _scene_Scene__WEBPACK_IMPORTED_MODULE_29__[\"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 this.visibleElements = [];\n this.store = new _store__WEBPACK_IMPORTED_MODULE_76__.Store();\n this.history = new _history__WEBPACK_IMPORTED_MODULE_24__.History();\n\n if (excalidrawAPI) {\n const api = {\n updateScene: this.updateScene,\n updateLibrary: this.library.updateLibrary,\n addFiles: this.addFiles,\n resetScene: this.resetScene,\n getSceneElementsIncludingDeleted: this.getSceneElementsIncludingDeleted,\n history: {\n clear: this.resetHistory\n },\n scrollToContent: this.scrollToContent,\n zoomToFit: this.zoomToFit,\n startLineEditor: this.startLineEditor,\n getSceneElements: this.getSceneElements,\n getAppState: () => this.state,\n getFiles: () => this.files,\n getName: this.getName,\n registerAction: action => {\n this.actionManager.registerAction(action);\n },\n refresh: this.refresh,\n setToast: this.setToast,\n updateContainerSize: this.updateContainerSize,\n id: this.id,\n selectElements: this.selectElements,\n sendBackward: this.sendBackward,\n bringForward: this.bringForward,\n sendToBack: this.sendToBack,\n bringToFront: this.bringToFront,\n setMobileModeAllowed: this.setMobileModeAllowed,\n setActiveTool: this.setActiveTool,\n setCursor: this.setCursor,\n resetCursor: this.resetCursor,\n updateFrameRendering: this.updateFrameRendering,\n toggleSidebar: this.toggleSidebar,\n getHTMLIFrameElement: id => this.getHTMLIFrameElement(id),\n onChange: cb => this.onChangeEmitter.on(cb),\n onPointerDown: cb => this.onPointerDownEmitter.on(cb),\n onPointerUp: cb => this.onPointerUpEmitter.on(cb),\n onScrollChange: cb => this.onScrollChangeEmitter.on(cb),\n onUserFollow: cb => this.onUserFollowEmitter.on(cb)\n };\n\n if (typeof excalidrawAPI === \"function\") {\n excalidrawAPI(api);\n } else {\n console.error(\"excalidrawAPI should be a function!\");\n }\n }\n\n this.excalidrawContainerValue = {\n container: this.excalidrawContainerRef.current,\n id: this.id\n };\n this.fonts = new _fonts__WEBPACK_IMPORTED_MODULE_49__.Fonts({\n scene: this.scene\n });\n this.history = new _history__WEBPACK_IMPORTED_MODULE_24__.History();\n this.actionManager.registerAll(_actions_register__WEBPACK_IMPORTED_MODULE_8__.actions);\n this.actionManager.registerAction((0,_actions_actionHistory__WEBPACK_IMPORTED_MODULE_6__.createUndoAction)(this.history, this.store));\n this.actionManager.registerAction((0,_actions_actionHistory__WEBPACK_IMPORTED_MODULE_6__.createRedoAction)(this.history, this.store));\n }\n\n onWindowMessage(event) {\n if (event.origin !== \"https://player.vimeo.com\" && event.origin !== \"https://www.youtube.com\") {\n return;\n }\n\n let data = null;\n\n try {\n data = JSON.parse(event.data);\n } catch (e) {}\n\n if (!data) {\n return;\n }\n\n switch (event.origin) {\n case \"https://player.vimeo.com\":\n //Allowing for multiple instances of Excalidraw running in the window\n if (data.method === \"paused\") {\n let source = null;\n const iframes = document.body.querySelectorAll(\"iframe.excalidraw__embeddable\");\n\n if (!iframes) {\n break;\n }\n\n for (const iframe of iframes) {\n if (iframe.contentWindow === event.source) {\n source = iframe.contentWindow;\n }\n }\n\n source === null || source === void 0 ? void 0 : source.postMessage(JSON.stringify({\n method: data.value ? \"play\" : \"pause\",\n value: true\n }), \"*\");\n }\n\n break;\n\n case \"https://www.youtube.com\":\n if (data.event === \"infoDelivery\" && data.info && data.id && typeof data.info.playerState === \"number\") {\n const id = data.id;\n const playerState = data.info.playerState;\n\n if (Object.values(_constants__WEBPACK_IMPORTED_MODULE_12__.YOUTUBE_STATES).includes(playerState)) {\n YOUTUBE_VIDEO_STATES.set(id, playerState);\n }\n }\n\n break;\n }\n }\n\n cacheEmbeddableRef(element, ref) {\n if (ref) {\n this.iFrameRefs.set(element.id, ref);\n }\n }\n\n getHTMLIFrameElement(element) {\n //zsviczian\n if (typeof element === \"string\") {\n return this.iFrameRefs.get(element);\n }\n\n return this.iFrameRefs.get(element.id);\n }\n\n handleEmbeddableCenterClick(element) {\n var _a, _b, _c, _d;\n\n if (((_a = this.state.activeEmbeddable) === null || _a === void 0 ? void 0 : _a.element) === element && ((_b = this.state.activeEmbeddable) === null || _b === void 0 ? void 0 : _b.state) === \"active\") {\n return;\n } // The delay serves two purposes\n // 1. To prevent first click propagating to iframe on mobile,\n // else the click will immediately start and stop the video\n // 2. If the user double clicks the frame center to activate it\n // without the delay youtube will immediately open the video\n // in fullscreen mode\n\n\n setTimeout(() => {\n this.setState({\n activeEmbeddable: {\n element,\n state: \"active\"\n },\n selectedElementIds: {\n [element.id]: true\n },\n newElement: null,\n selectionElement: null\n });\n }, 100);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(element)) {\n return;\n }\n\n const iframe = this.getHTMLIFrameElement(element);\n\n if (!(iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow)) {\n return;\n }\n\n if (iframe.src.includes(\"youtube\")) {\n const state = YOUTUBE_VIDEO_STATES.get(element.id);\n\n if (!state) {\n YOUTUBE_VIDEO_STATES.set(element.id, _constants__WEBPACK_IMPORTED_MODULE_12__.YOUTUBE_STATES.UNSTARTED);\n iframe.contentWindow.postMessage(JSON.stringify({\n event: \"listening\",\n id: element.id\n }), \"*\");\n }\n\n switch (state) {\n case _constants__WEBPACK_IMPORTED_MODULE_12__.YOUTUBE_STATES.PLAYING:\n case _constants__WEBPACK_IMPORTED_MODULE_12__.YOUTUBE_STATES.BUFFERING:\n (_c = iframe.contentWindow) === null || _c === void 0 ? void 0 : _c.postMessage(JSON.stringify({\n event: \"command\",\n func: \"pauseVideo\",\n args: \"\"\n }), \"*\");\n break;\n\n default:\n (_d = iframe.contentWindow) === null || _d === void 0 ? void 0 : _d.postMessage(JSON.stringify({\n event: \"command\",\n func: \"playVideo\",\n args: \"\"\n }), \"*\");\n }\n }\n\n if (iframe.src.includes(\"player.vimeo.com\")) {\n iframe.contentWindow.postMessage(JSON.stringify({\n method: \"paused\" //video play/pause in onWindowMessage handler\n\n }), \"*\");\n }\n }\n\n isIframeLikeElementCenter(el, event, sceneX, sceneY) {\n var _a, _b;\n\n return el && !event.altKey && !event.shiftKey && !event.metaKey && !event.ctrlKey && (((_a = this.state.activeEmbeddable) === null || _a === void 0 ? void 0 : _a.element) !== el || ((_b = this.state.activeEmbeddable) === null || _b === void 0 ? void 0 : _b.state) === \"hover\" || !this.state.activeEmbeddable) && sceneX >= el.x + el.width / 3 && sceneX <= el.x + 2 * el.width / 3 && sceneY >= el.y + el.height / 3 && sceneY <= el.y + 2 * el.height / 3;\n }\n\n renderEmbeddables() {\n const scale = this.state.zoom.value;\n const normalizedWidth = this.state.width;\n const normalizedHeight = this.state.height;\n const embeddableElements = this.scene.getNonDeletedElements().filter(el => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(el) && this.embedsValidationStatus.get(el.id) === true || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(el));\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n children: embeddableElements.map(el => {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;\n\n const {\n x,\n y\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.sceneCoordsToViewportCoords)({\n sceneX: el.x,\n sceneY: el.y\n }, this.state);\n const isVisible = (0,_element_sizeHelpers__WEBPACK_IMPORTED_MODULE_27__.isElementInViewport)(el, normalizedWidth, normalizedHeight, this.state, this.scene.getNonDeletedElementsMap());\n const hasBeenInitialized = this.initializedEmbeds.has(el.id);\n\n if (isVisible && !hasBeenInitialized) {\n this.initializedEmbeds.add(el.id);\n }\n\n const shouldRender = isVisible || hasBeenInitialized;\n\n if (!shouldRender) {\n return null;\n }\n\n let src;\n const embedLink = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_35__.getEmbedLink)((0,_data_url__WEBPACK_IMPORTED_MODULE_46__.toValidURL)(el.link || \"\")); //zsviczian\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(el)) {\n src = null;\n const data = ((_b = (_a = el.customData) === null || _a === void 0 ? void 0 : _a.generationData) !== null && _b !== void 0 ? _b : this.magicGenerations.get(el.id)) || {\n status: \"error\",\n message: \"No generation data\",\n code: \"ERR_NO_GENERATION_DATA\"\n };\n\n if (data.status === \"done\") {\n const html = data.html;\n src = {\n intrinsicSize: {\n w: el.width,\n h: el.height\n },\n type: \"document\",\n srcdoc: () => {\n return html;\n }\n };\n } else if (data.status === \"pending\") {\n src = {\n intrinsicSize: {\n w: el.width,\n h: el.height\n },\n type: \"document\",\n srcdoc: () => {\n return (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_35__.createSrcDoc)(`\n <style>\n html, body {\n width: 100%;\n height: 100%;\n color: ${this.state.theme === _constants__WEBPACK_IMPORTED_MODULE_12__.THEME.DARK ? \"white\" : \"black\"};\n }\n body {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 1rem;\n }\n\n .Spinner {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: auto;\n margin-right: auto;\n }\n\n .Spinner svg {\n animation: rotate 1.6s linear infinite;\n transform-origin: center center;\n width: 40px;\n height: 40px;\n }\n\n .Spinner circle {\n stroke: currentColor;\n animation: dash 1.6s linear 0s infinite;\n stroke-linecap: round;\n }\n\n @keyframes rotate {\n 100% {\n transform: rotate(360deg);\n }\n }\n\n @keyframes dash {\n 0% {\n stroke-dasharray: 1, 300;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 150, 300;\n stroke-dashoffset: -200;\n }\n 100% {\n stroke-dasharray: 1, 300;\n stroke-dashoffset: -280;\n }\n }\n </style>\n <div class=\"Spinner\">\n <svg\n viewBox=\"0 0 100 100\"\n >\n <circle\n cx=\"50\"\n cy=\"50\"\n r=\"46\"\n stroke-width=\"8\"\n fill=\"none\"\n stroke-miter-limit=\"10\"\n />\n </svg>\n </div>\n <div>Generating...</div>\n `);\n }\n };\n } else {\n let message;\n\n if (data.code === \"ERR_GENERATION_INTERRUPTED\") {\n message = \"Generation was interrupted...\";\n } else {\n message = data.message || \"Generation failed\";\n }\n\n src = {\n intrinsicSize: {\n w: el.width,\n h: el.height\n },\n type: \"document\",\n srcdoc: () => {\n return (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_35__.createSrcDoc)(`\n <style>\n html, body {\n height: 100%;\n }\n body {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n color: ${_colors__WEBPACK_IMPORTED_MODULE_71__.COLOR_PALETTE.red[3]};\n }\n h1, h3 {\n margin-top: 0;\n margin-bottom: 0.5rem;\n }\n </style>\n <h1>Error!</h1>\n <h3>${message}</h3>\n `);\n }\n };\n }\n } else {\n src = embedLink; //zsviczian getEmbedLink(toValidURL(el.link || \"\"));\n }\n\n const isActive = ((_c = this.state.activeEmbeddable) === null || _c === void 0 ? void 0 : _c.element) === el && ((_d = this.state.activeEmbeddable) === null || _d === void 0 ? void 0 : _d.state) === \"active\";\n const isHovered = ((_e = this.state.activeEmbeddable) === null || _e === void 0 ? void 0 : _e.element) === el && ((_f = this.state.activeEmbeddable) === null || _f === void 0 ? void 0 : _f.state) === \"hover\";\n const isWebview = //zsviczian\n !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(el) && this.props.renderWebview && (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) !== \"document\" && !((_h = (_g = embedLink === null || embedLink === void 0 ? void 0 : embedLink.link) === null || _g === void 0 ? void 0 : _g.startsWith) === null || _h === void 0 ? void 0 : _h.call(_g, \"https://player.vimeo.com\")); // Modify the scale based on el.scale property\n\n const [xScale, yScale] = (_j = el.scale) !== null && _j !== void 0 ? _j : [1, 1]; //zsviczian\n\n const scaledTransform = `scale(${scale * xScale}, ${scale * yScale})`;\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(\"excalidraw__embeddable-container\", {\n \"is-hovered\": isHovered\n }),\n style: {\n transform: isVisible ? `translate(${x - this.state.offsetLeft}px, ${y - this.state.offsetTop}px) ${scaledTransform}` : \"none\",\n display: isVisible ? \"block\" : \"none\",\n opacity: (0,_renderer_renderElement__WEBPACK_IMPORTED_MODULE_81__.getRenderOpacity)(el, (0,_frame__WEBPACK_IMPORTED_MODULE_50__.getContainingFrame)(el, this.scene.getNonDeletedElementsMap()), this.elementsPendingErasure, null),\n [\"--embeddable-radius\"]: `${(0,_shapes__WEBPACK_IMPORTED_MODULE_31__.getCornerRadius)(Math.min(el.width, el.height), el) / xScale //zsviczian\n }px`\n }\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({\n //this is a hack that addresses isse with embedded excalidraw.com embeddable\n //https://github.com/excalidraw/excalidraw/pull/6691#issuecomment-1607383938\n\n /*ref={(ref) => {\n if (!this.excalidrawContainerRef.current) {\n return;\n }\n const container = this.excalidrawContainerRef.current;\n const sh = container.scrollHeight;\n const ch = container.clientHeight;\n if (sh !== ch) {\n container.style.height = `${sh}px`;\n setTimeout(() => {\n container.style.height = `100%`;\n });\n }\n }}*/\n className: \"excalidraw__embeddable-container__inner\",\n style: {\n width: isVisible ? `${el.width / xScale}px` : 0,\n height: isVisible ? `${el.height / yScale}px` : 0,\n transform: isVisible ? `rotate(${el.angle}rad)` : \"none\",\n pointerEvents: isActive ? _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.enabled : _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.disabled\n }\n }, {\n children: [isHovered && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: \"excalidraw__embeddable-hint\"\n }, {\n children: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"buttons.embeddableInteractionButton\")\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: \"excalidraw__embeddable__outer\",\n style: {\n padding: `${el.strokeWidth / (4 * el.scale[0])}px` //zsviczian MDEmbeddable round border cutoff issue\n\n }\n }, {\n children: (_m = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(el) ? (_l = (_k = this.props).renderEmbeddable) === null || _l === void 0 ? void 0 : _l.call(_k, el, this.state) //zsviczian\n : null) !== null && _m !== void 0 ? _m : isWebview ? //zsviczian\n (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"webview\", {\n ref: ref => this.cacheEmbeddableRef(el, ref),\n className: \"excalidraw__embeddable\",\n src: (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) === \"generic\" || (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) === \"video\" ? embedLink.link : \"\",\n title: \"Excalidraw Embedded Content\",\n allowFullScreen: true\n }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"iframe\", {\n ref: ref => this.cacheEmbeddableRef(el, ref),\n className: \"excalidraw__embeddable\",\n srcDoc: (src === null || src === void 0 ? void 0 : src.type) === \"document\" ? src.srcdoc(this.state.theme) : undefined,\n src: (src === null || src === void 0 ? void 0 : src.type) !== \"document\" ? (_o = src === null || src === void 0 ? void 0 : src.link) !== null && _o !== void 0 ? _o : \"\" : undefined,\n // https://stackoverflow.com/q/18470015\n scrolling: \"no\",\n referrerPolicy: \"no-referrer-when-downgrade\",\n title: \"Excalidraw Embedded Content\",\n allow: \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\",\n allowFullScreen: true,\n sandbox: `${((_p = src === null || src === void 0 ? void 0 : src.sandbox) === null || _p === void 0 ? void 0 : _p.allowSameOrigin) ? \"allow-same-origin\" : \"\"} allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-downloads`\n })\n }))]\n }))\n }), el.id);\n })\n });\n }\n\n toggleOverscrollBehavior(event) {\n // when pointer inside editor, disable overscroll behavior to prevent\n // panning to trigger history back/forward on MacOS Chrome\n document.documentElement.style.overscrollBehaviorX = event.type === \"pointerenter\" ? \"none\" : \"auto\";\n }\n\n render() {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;\n\n const selectedElements = this.scene.getSelectedElements(this.state);\n const {\n renderTopRightUI,\n renderCustomStats\n } = this.props;\n const sceneNonce = this.scene.getSceneNonce();\n const {\n elementsMap,\n visibleElements\n } = this.renderer.getRenderableElements({\n sceneNonce,\n zoom: this.state.zoom,\n offsetLeft: this.state.offsetLeft,\n offsetTop: this.state.offsetTop,\n scrollX: this.state.scrollX,\n scrollY: this.state.scrollY,\n height: this.state.height,\n width: this.state.width,\n editingTextElement: this.state.editingTextElement,\n newElementId: (_a = this.state.newElement) === null || _a === void 0 ? void 0 : _a.id,\n pendingImageElementId: this.state.pendingImageElementId\n });\n this.visibleElements = visibleElements;\n const allElementsMap = this.scene.getNonDeletedElementsMap();\n const shouldBlockPointerEvents = this.state.selectionElement || this.state.newElement || this.state.selectedElementsAreBeingDragged || this.state.resizingElement || this.state.activeTool.type === \"laser\" && // technically we can just test on this once we make it more safe\n this.state.cursorButton === \"down\";\n const firstSelectedElement = selectedElements[0]; //zsviczian\n\n const isHighlighter = (_d = (_c = (_b = this.state.newElement) === null || _b === void 0 ? void 0 : _b.customData) === null || _c === void 0 ? void 0 : _c.strokeOptions) === null || _d === void 0 ? void 0 : _d.highlighter;\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(\"excalidraw excalidraw-container\", {\n \"excalidraw--view-mode\": this.state.viewModeEnabled,\n \"excalidraw--mobile\": this.device.editor.isMobile || !(this.state.viewModeEnabled || this.state.zenModeEnabled) && this.state.trayModeEnabled //zsviczian\n\n }),\n style: Object.assign({\n //zsviczian\n [\"--ui-pointerEvents\"]: shouldBlockPointerEvents ? _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.disabled : _constants__WEBPACK_IMPORTED_MODULE_12__.POINTER_EVENTS.enabled\n }, this.state.dynamicStyle),\n ref: this.excalidrawContainerRef,\n onDrop: this.handleAppOnDrop,\n tabIndex: 0,\n onKeyDown: this.props.handleKeyboardGlobally ? undefined : this.onKeyDown,\n onPointerEnter: this.toggleOverscrollBehavior,\n onPointerLeave: this.toggleOverscrollBehavior\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(AppContext.Provider, Object.assign({\n value: this\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(AppPropsContext.Provider, Object.assign({\n value: this.props\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ExcalidrawContainerContext.Provider, Object.assign({\n value: this.excalidrawContainerValue\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(DeviceContext.Provider, Object.assign({\n value: this.device\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ExcalidrawSetAppStateContext.Provider, Object.assign({\n value: this.setAppState\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ExcalidrawAppStateContext.Provider, Object.assign({\n value: this.state\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(ExcalidrawElementsContext.Provider, Object.assign({\n value: this.scene.getNonDeletedElements()\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(ExcalidrawActionManagerContext.Provider, Object.assign({\n value: this.actionManager\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_LayerUI__WEBPACK_IMPORTED_MODULE_37__[\"default\"], Object.assign({\n canvas: this.canvas,\n appState: this.state,\n files: this.files,\n setAppState: this.setAppState,\n actionManager: this.actionManager,\n elements: this.scene.getNonDeletedElements(),\n onLockToggle: this.toggleLock,\n onPenModeToggle: this.togglePenMode,\n onHandToolToggle: this.onHandToolToggle,\n langCode: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.getLanguage)().code,\n renderTopRightUI: renderTopRightUI,\n renderCustomStats: renderCustomStats,\n showExitZenModeBtn: typeof ((_e = this.props) === null || _e === void 0 ? void 0 : _e.zenModeEnabled) === \"undefined\" && this.state.zenModeEnabled,\n UIOptions: this.props.UIOptions,\n onExportImage: this.onExportImage,\n renderWelcomeScreen: !this.state.isLoading && this.state.showWelcomeScreen && this.state.activeTool.type === \"selection\" && !this.state.zenModeEnabled && !this.scene.getElementsIncludingDeleted().length,\n app: this,\n isCollaborating: this.props.isCollaborating\n }, {\n children: this.props.children\n })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n className: \"excalidraw-textEditorContainer\"\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n className: \"excalidraw-contextMenuContainer\"\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n className: \"excalidraw-eye-dropper-container\"\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_SVGLayer__WEBPACK_IMPORTED_MODULE_67__.SVGLayer, {\n trails: [this.laserTrails, this.eraserTrail]\n }), selectedElements.length === 1 && this.state.showHyperlinkPopup && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_hyperlink_Hyperlink__WEBPACK_IMPORTED_MODULE_45__.Hyperlink, {\n element: firstSelectedElement,\n elementsMap: allElementsMap,\n setAppState: this.setAppState,\n onLinkOpen: this.props.onLinkOpen,\n setToast: this.setToast,\n updateEmbedValidationStatus: this.updateEmbedValidationStatus\n }, firstSelectedElement.id), this.props.aiEnabled !== false && selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isMagicFrameElement)(firstSelectedElement) && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_element_ElementCanvasButtons__WEBPACK_IMPORTED_MODULE_70__.ElementCanvasButtons, Object.assign({\n element: firstSelectedElement,\n elementsMap: elementsMap\n }, {\n children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_MagicButton__WEBPACK_IMPORTED_MODULE_72__.ElementCanvasButton, {\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"labels.convertToCode\"),\n icon: _icons__WEBPACK_IMPORTED_MODULE_73__.MagicIcon,\n checked: false,\n onChange: () => this.onMagicFrameGenerate(firstSelectedElement, \"button\")\n })\n })), selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(firstSelectedElement) && ((_g = (_f = firstSelectedElement.customData) === null || _f === void 0 ? void 0 : _f.generationData) === null || _g === void 0 ? void 0 : _g.status) === \"done\" && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_element_ElementCanvasButtons__WEBPACK_IMPORTED_MODULE_70__.ElementCanvasButtons, Object.assign({\n element: firstSelectedElement,\n elementsMap: elementsMap\n }, {\n children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_MagicButton__WEBPACK_IMPORTED_MODULE_72__.ElementCanvasButton, {\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"labels.copySource\"),\n icon: _icons__WEBPACK_IMPORTED_MODULE_73__.copyIcon,\n checked: false,\n onChange: () => this.onIframeSrcCopy(firstSelectedElement)\n }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_MagicButton__WEBPACK_IMPORTED_MODULE_72__.ElementCanvasButton, {\n title: \"Enter fullscreen\",\n icon: _icons__WEBPACK_IMPORTED_MODULE_73__.fullscreenIcon,\n checked: false,\n onChange: () => {\n const iframe = this.getHTMLIFrameElement(firstSelectedElement);\n\n if (iframe) {\n try {\n iframe.requestFullscreen();\n this.setState({\n activeEmbeddable: {\n element: firstSelectedElement,\n state: \"active\"\n },\n selectedElementIds: {\n [firstSelectedElement.id]: true\n },\n newElement: null,\n selectionElement: null\n });\n } catch (err) {\n console.warn(err);\n this.setState({\n errorMessage: \"Couldn't enter fullscreen\"\n });\n }\n }\n }\n })]\n })), this.state.toast !== null && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Toast__WEBPACK_IMPORTED_MODULE_38__.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_36__.ContextMenu, {\n items: this.state.contextMenu.items,\n top: this.state.contextMenu.top,\n left: this.state.contextMenu.left,\n actionManager: this.actionManager,\n onClose: callback => {\n this.setState({\n contextMenu: null\n }, () => {\n this.focusContainer();\n callback === null || callback === void 0 ? void 0 : callback();\n });\n }\n }), this.state.newElement && isHighlighter && //zsviczian\n (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_canvases_NewElementCanvas__WEBPACK_IMPORTED_MODULE_94__[\"default\"], {\n appState: this.state,\n scale: window.devicePixelRatio,\n rc: this.rc,\n elementsMap: elementsMap,\n allElementsMap: allElementsMap,\n renderConfig: {\n imageCache: this.imageCache,\n isExporting: false,\n renderGrid: false,\n canvasBackgroundColor: this.state.viewBackgroundColor,\n embedsValidationStatus: this.embedsValidationStatus,\n elementsPendingErasure: this.elementsPendingErasure,\n pendingFlowchartNodes: null,\n isHighlighterPenDrawing: isHighlighter //zsviczian\n\n }\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 elementsMap: elementsMap,\n allElementsMap: allElementsMap,\n visibleElements: visibleElements,\n sceneNonce: sceneNonce,\n selectionNonce: (_h = this.state.selectionElement) === null || _h === void 0 ? void 0 : _h.versionNonce,\n scale: window.devicePixelRatio,\n appState: this.state,\n renderConfig: {\n imageCache: this.imageCache,\n isExporting: false,\n renderGrid: (0,_snapping__WEBPACK_IMPORTED_MODULE_58__.isGridModeEnabled)(this),\n canvasBackgroundColor: this.state.viewBackgroundColor,\n embedsValidationStatus: this.embedsValidationStatus,\n elementsPendingErasure: this.elementsPendingErasure,\n pendingFlowchartNodes: this.flowChartCreator.pendingNodes,\n isHighlighterPenDrawing: isHighlighter //zsviczian\n\n }\n }), this.state.newElement && !isHighlighter && //zsviczian\n (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_canvases_NewElementCanvas__WEBPACK_IMPORTED_MODULE_94__[\"default\"], {\n appState: this.state,\n scale: window.devicePixelRatio,\n rc: this.rc,\n elementsMap: elementsMap,\n allElementsMap: allElementsMap,\n renderConfig: {\n imageCache: this.imageCache,\n isExporting: false,\n renderGrid: false,\n canvasBackgroundColor: this.state.viewBackgroundColor,\n embedsValidationStatus: this.embedsValidationStatus,\n elementsPendingErasure: this.elementsPendingErasure,\n pendingFlowchartNodes: null,\n isHighlighterPenDrawing: isHighlighter //zsviczian\n\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 elementsMap: elementsMap,\n visibleElements: visibleElements,\n allElementsMap: allElementsMap,\n selectedElements: selectedElements,\n sceneNonce: sceneNonce,\n selectionNonce: (_j = this.state.selectionElement) === null || _j === void 0 ? void 0 : _j.versionNonce,\n scale: window.devicePixelRatio,\n appState: this.state,\n device: this.device,\n renderInteractiveSceneCallback: this.renderInteractiveSceneCallback,\n handleCanvasRef: this.handleInteractiveCanvasRef,\n onContextMenu: this.handleCanvasContextMenu,\n onPointerMove: this.handleCanvasPointerMove,\n onPointerUp: this.handleCanvasPointerUp,\n onPointerCancel: this.removePointer,\n onTouchMove: this.handleTouchMove,\n onPointerDown: this.handleCanvasPointerDown,\n onDoubleClick: this.handleCanvasDoubleClick\n }), this.state.userToFollow && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_FollowMode_FollowMode__WEBPACK_IMPORTED_MODULE_74__[\"default\"], {\n width: this.state.width,\n height: this.state.height,\n userToFollow: this.state.userToFollow,\n onDisconnect: this.maybeUnfollowRemoteUser\n }), this.renderFrameNames(), ((_k = this.state.activeEmbeddable) === null || _k === void 0 ? void 0 : _k.state) === \"active\" && ( //zsviczian\n (_m = (_l = this.props).renderEmbeddableMenu) === null || _m === void 0 ? void 0 : _m.call(_l, this.state))]\n })), this.renderEmbeddables()]\n }))\n }))\n }))\n }))\n }))\n }))\n }))\n }));\n }\n\n setPlugins(plugins) {\n Object.assign(this.plugins, plugins);\n }\n\n async onMagicFrameGenerate(magicFrame, source) {\n var _a;\n\n const generateDiagramToCode = (_a = this.plugins.diagramToCode) === null || _a === void 0 ? void 0 : _a.generate;\n\n if (!generateDiagramToCode) {\n this.setState({\n errorMessage: \"No diagram to code plugin found\"\n });\n return;\n }\n\n const magicFrameChildren = (0,_frame__WEBPACK_IMPORTED_MODULE_50__.getElementsOverlappingFrame)(this.scene.getNonDeletedElements(), magicFrame).filter(el => !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isMagicFrameElement)(el));\n\n if (!magicFrameChildren.length) {\n if (source === \"button\") {\n this.setState({\n errorMessage: \"Cannot generate from an empty frame\"\n });\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"generate (no-children)\", \"d2c\");\n } else {\n this.setActiveTool({\n type: \"magicframe\"\n });\n }\n\n return;\n }\n\n const frameElement = this.insertIframeElement({\n sceneX: magicFrame.x + magicFrame.width + 30,\n sceneY: magicFrame.y,\n width: magicFrame.width,\n height: magicFrame.height\n });\n\n if (!frameElement) {\n return;\n }\n\n this.updateMagicGeneration({\n frameElement,\n data: {\n status: \"pending\"\n }\n });\n this.setState({\n selectedElementIds: {\n [frameElement.id]: true\n }\n });\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"generate (start)\", \"d2c\");\n\n try {\n const {\n html\n } = await generateDiagramToCode({\n frame: magicFrame,\n children: magicFrameChildren\n });\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"generate (success)\", \"d2c\");\n\n if (!html.trim()) {\n this.updateMagicGeneration({\n frameElement,\n data: {\n status: \"error\",\n code: \"ERR_OAI\",\n message: \"Nothing genereated :(\"\n }\n });\n return;\n }\n\n const parsedHtml = html.includes(\"<!DOCTYPE html>\") && html.includes(\"</html>\") ? html.slice(html.indexOf(\"<!DOCTYPE html>\"), html.indexOf(\"</html>\") + \"</html>\".length) : html;\n this.updateMagicGeneration({\n frameElement,\n data: {\n status: \"done\",\n html: parsedHtml\n }\n });\n } catch (error) {\n (0,_analytics__WEBPACK_IMPORTED_MODULE_9__.trackEvent)(\"ai\", \"generate (failed)\", \"d2c\");\n this.updateMagicGeneration({\n frameElement,\n data: {\n status: \"error\",\n code: \"ERR_OAI\",\n message: error.message || \"Unknown error during generation\"\n }\n });\n }\n }\n\n onIframeSrcCopy(element) {\n var _a, _b;\n\n if (((_b = (_a = element.customData) === null || _a === void 0 ? void 0 : _a.generationData) === null || _b === void 0 ? void 0 : _b.status) === \"done\") {\n (0,_clipboard__WEBPACK_IMPORTED_MODULE_11__.copyTextToSystemClipboard)(element.customData.generationData.html);\n this.setToast({\n message: \"copied to clipboard\",\n closable: false,\n duration: 1500\n });\n }\n }\n\n clearImageShapeCache(filesMap) {\n const files = filesMap !== null && filesMap !== void 0 ? filesMap : this.files;\n this.scene.getNonDeletedElements().forEach(element => {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isInitializedImageElement)(element) && files[element.fileId]) {\n this.imageCache.delete(element.fileId);\n _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_66__.ShapeCache[\"delete\"](element);\n }\n });\n }\n\n async componentDidMount() {\n var _a;\n\n this.unmounted = false;\n this.excalidrawContainerValue.container = this.excalidrawContainerRef.current;\n\n if (\"development\" === _constants__WEBPACK_IMPORTED_MODULE_12__.ENV.TEST || \"development\" !== \"production\") {\n const setState = this.setState.bind(this);\n Object.defineProperties(window.h, {\n state: {\n configurable: true,\n get: () => {\n return this.state;\n }\n },\n setState: {\n configurable: true,\n value: (...args) => {\n return this.setState(...args);\n }\n },\n app: {\n configurable: true,\n value: this\n },\n history: {\n configurable: true,\n value: this.history\n },\n store: {\n configurable: true,\n value: this.store\n },\n fonts: {\n configurable: true,\n value: this.fonts\n }\n });\n }\n\n this.store.onStoreIncrementEmitter.on(increment => {\n this.history.record(increment.elementsChange, increment.appStateChange);\n });\n this.scene.onUpdate(this.triggerRender);\n this.addEventListeners();\n\n if (this.props.autoFocus && this.excalidrawContainerRef.current) {\n this.focusContainer();\n }\n\n if ( // bounding rects don't work in tests so updating\n // the state on init would result in making the test enviro run\n // in mobile breakpoint (0 width/height), making everything fail\n !(0,_utils__WEBPACK_IMPORTED_MODULE_34__.isTestEnv)()) {\n this.refreshViewportBreakpoints();\n this.refreshEditorBreakpoints();\n }\n\n if (_constants__WEBPACK_IMPORTED_MODULE_12__.supportsResizeObserver && this.excalidrawContainerRef.current) {\n this.resizeObserver = new ResizeObserver(() => {\n this.refreshEditorBreakpoints();\n this.updateDOMRect();\n });\n (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.excalidrawContainerRef.current);\n }\n\n const searchParams = new URLSearchParams(window.location.search.slice(1));\n\n if (searchParams.has(\"web-share-target\")) {\n // Obtain a file that was shared via the Web Share Target API.\n this.restoreFileFromShare();\n } else {\n this.updateDOMRect(this.initializeScene);\n } // note that this check seems to always pass in localhost\n\n\n if ((0,_constants__WEBPACK_IMPORTED_MODULE_12__.isBrave)() && !(0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.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, _b;\n\n (_a = window.launchQueue) === null || _a === void 0 ? void 0 : _a.setConsumer(() => {});\n this.renderer.destroy();\n this.scene.destroy();\n this.scene = new _scene_Scene__WEBPACK_IMPORTED_MODULE_29__[\"default\"]();\n this.fonts = new _fonts__WEBPACK_IMPORTED_MODULE_49__.Fonts({\n scene: this.scene\n });\n this.renderer = new _scene_Renderer__WEBPACK_IMPORTED_MODULE_65__.Renderer(this.scene);\n this.files = {};\n this.imageCache.clear();\n (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();\n this.unmounted = true;\n this.removeEventListeners();\n this.library.destroy();\n this.laserTrails.stop();\n this.eraserTrail.stop();\n this.onChangeEmitter.clear();\n this.store.onStoreIncrementEmitter.clear();\n _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_66__.ShapeCache.destroy();\n _snapping__WEBPACK_IMPORTED_MODULE_58__.SnapCache.destroy();\n clearTimeout(touchTimeout);\n _scene__WEBPACK_IMPORTED_MODULE_28__.isSomeElementSelected.clearCache();\n _groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements.clearCache();\n touchTimeout = 0;\n document.documentElement.style.overscrollBehaviorX = \"\";\n document.body.removeChild((0,_Tooltip__WEBPACK_IMPORTED_MODULE_93__.getTooltipDiv)()); //clearRenderCache(); //zsviczian\n\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.clearEraserCanvasCache)(); //zsviczian\n\n this.interactiveCanvas = null; //zsviczian\n\n this.iFrameRefs.clear(); //zsviczian\n //@ts-ignore\n\n this.iFrameRefs = null; //zsviczian\n\n this.embedsValidationStatus.clear(); //zsviczian\n //@ts-ignore\n\n this.embedsValidationStatus = null; //zsviczian\n\n this.initializedEmbeds.clear(); //zsviczian\n //@ts-ignore\n\n this.initializedEmbeds = null; //zsviczian\n\n this.elementsPendingErasure.clear(); //zsviczian\n //@ts-ignore\n\n this.elementsPendingErasure = null; //zsviczian\n\n this.lastPointerDownEvent = null; //zsviczian\n\n this.lastPointerUpEvent = null; //zsviczian\n\n this.lastPointerMoveEvent = null; //zsviczian\n //@ts-ignore\n\n this.actionManager.app = null; //zsviczian\n\n this.actionManager.actions = {}; //zsviczian\n\n this.history.clear(); //zsviczian\n\n this.store.clear(); //zsviczian\n //@ts-ignore\n\n this.store = null; //zsviczian\n //@ts-ignore\n\n this.library = null; //zsviczian\n //@ts-ignore\n\n this.canvas = null; //zsviczian\n //@ts-ignore\n\n this.rc = null; //zsviczian\n //@ts-ignore\n\n this.excalidrawContainerRef.current = undefined; //zsviczian\n\n this.nearestScrollableContainer = undefined; //zsviczian\n\n this.excalidrawContainerValue = {\n container: null,\n id: \"unknown\"\n }; //zsviczian\n //@ts-ignore\n // this.laserTrails.terminate(); //zsviczian\n // this.eraserTrail.terminate(); //zsviczian\n\n /*\n Object.keys(this).forEach((key) => {\n //@ts-ignore\n delete this[key];\n });*/\n }\n\n removeEventListeners() {\n this.onRemoveEventListenersEmitter.trigger();\n }\n\n addEventListeners() {\n // remove first as we can add event listeners multiple times\n this.removeEventListeners(); // -------------------------------------------------------------------------\n // view+edit mode listeners\n // -------------------------------------------------------------------------\n\n if (this.props.handleKeyboardGlobally) {\n this.onRemoveEventListenersEmitter.once((0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYDOWN, this.onKeyDown, false));\n }\n\n this.onRemoveEventListenersEmitter.once((0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(this.excalidrawContainerRef.current, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.WHEEL, this.handleWheel, {\n passive: false\n }), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.MESSAGE, this.onWindowMessage, false), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, this.removePointer), // #3553\n (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.COPY, this.onCopy), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYUP, this.onKeyUp, {\n passive: true\n }), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(window, \"focus\", () => this.triggerRender(true), {\n passive: true\n }), //zsviczian\n (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, this.updateCurrentCursorPosition), // rerender text elements on font load to fix #637 && #1553\n // zsviczian In Obsidian this is not needed as I manage font load separately\n\n /*addEventListener(document.fonts, \"loadingdone\", (event) => {\n const loadedFontFaces = (event as FontFaceSetLoadEvent).fontfaces;\n this.fonts.onLoaded(loadedFontFaces);\n }),*/\n // Safari-only desktop pinch zoom\n (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.GESTURE_START, this.onGestureStart, false), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.GESTURE_CHANGE, this.onGestureChange, false), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.GESTURE_END, this.onGestureEnd, false), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.FOCUS, () => {\n this.maybeCleanupAfterMissingPointerUp(null); // browsers (chrome?) tend to free up memory a lot, which results\n // in canvas context being cleared. Thus re-render on focus.\n\n this.triggerRender(true);\n }));\n\n if (this.state.viewModeEnabled) {\n return;\n } // -------------------------------------------------------------------------\n // edit-mode listeners only\n // -------------------------------------------------------------------------\n\n\n this.onRemoveEventListenersEmitter.once((0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.FULLSCREENCHANGE, this.onFullscreenChange), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.PASTE, this.pasteFromClipboard), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(document, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.CUT, this.onCut), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.RESIZE, this.onResize, false), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.UNLOAD, this.onUnload, false), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(window, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.BLUR, this.onBlur, false), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(this.excalidrawContainerRef.current, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.WHEEL, this.handleWheel), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(this.excalidrawContainerRef.current, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.DRAG_OVER, this.disableEvent, false), (0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)(this.excalidrawContainerRef.current, _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.DROP, this.disableEvent, false));\n\n if (this.props.detectScroll) {\n this.onRemoveEventListenersEmitter.once((0,_utils__WEBPACK_IMPORTED_MODULE_34__.addEventListener)((0,_utils__WEBPACK_IMPORTED_MODULE_34__.getNearestScrollableContainer)(this.excalidrawContainerRef.current), _constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.SCROLL, this.onScroll));\n }\n }\n\n componentDidUpdate(prevProps, prevState) {\n var _a, _b, _c, _d, _e, _f;\n\n this.updateEmbeddables();\n const elements = this.scene.getElementsIncludingDeleted();\n const elementsMap = this.scene.getElementsMapIncludingDeleted();\n const nonDeletedElementsMap = this.scene.getNonDeletedElementsMap();\n\n if (!this.state.showWelcomeScreen && !elements.length) {\n this.setState({\n showWelcomeScreen: true\n });\n }\n\n if (prevProps.UIOptions.dockedSidebarBreakpoint !== this.props.UIOptions.dockedSidebarBreakpoint) {\n this.refreshEditorBreakpoints();\n }\n\n const hasFollowedPersonLeft = prevState.userToFollow && !this.state.collaborators.has(prevState.userToFollow.socketId);\n\n if (hasFollowedPersonLeft) {\n this.maybeUnfollowRemoteUser();\n }\n\n if (prevState.zoom.value !== this.state.zoom.value || prevState.scrollX !== this.state.scrollX || prevState.scrollY !== this.state.scrollY) {\n (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.onScrollChange) === null || _b === void 0 ? void 0 : _b.call(_a, this.state.scrollX, this.state.scrollY, this.state.zoom);\n this.onScrollChangeEmitter.trigger(this.state.scrollX, this.state.scrollY, this.state.zoom);\n }\n\n if (prevState.userToFollow !== this.state.userToFollow) {\n if (prevState.userToFollow) {\n this.onUserFollowEmitter.trigger({\n userToFollow: prevState.userToFollow,\n action: \"UNFOLLOW\"\n });\n }\n\n if (this.state.userToFollow) {\n this.onUserFollowEmitter.trigger({\n userToFollow: this.state.userToFollow,\n action: \"FOLLOW\"\n });\n }\n } // zsviczian\n\n\n if (this.state.highlightSearchResult && !this.debounceClearHighlightSearchResults && prevState.selectedElementIds !== this.state.selectedElementIds) {\n this.setState({\n highlightSearchResult: false\n });\n }\n\n if (Object.keys(this.state.selectedElementIds).length && (0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state)) {\n this.setState({\n activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_34__.updateActiveTool)(this.state, {\n type: \"selection\"\n })\n });\n }\n\n if (this.state.activeTool.type === \"eraser\" && prevState.theme !== this.state.theme) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setEraserCursor)(this.interactiveCanvas, this.state.theme);\n } // Hide hyperlink popup if shown when element type is not selection\n\n\n if (prevState.activeTool.type === \"selection\" && this.state.activeTool.type !== \"selection\" && this.state.showHyperlinkPopup) {\n this.setState({\n showHyperlinkPopup: false\n });\n }\n\n if (prevProps.langCode !== this.props.langCode) {\n this.updateLanguage();\n }\n\n if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(prevState) && !(0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state)) {\n this.eraserTrail.endPath();\n }\n\n if (prevProps.viewModeEnabled !== this.props.viewModeEnabled) {\n this.setState({\n viewModeEnabled: !!this.props.viewModeEnabled\n });\n }\n\n if (prevState.viewModeEnabled !== this.state.viewModeEnabled) {\n this.addEventListeners();\n this.deselectElements();\n }\n\n if (prevProps.zenModeEnabled !== this.props.zenModeEnabled) {\n this.setState({\n zenModeEnabled: !!this.props.zenModeEnabled\n });\n }\n\n if (prevProps.theme !== this.props.theme && this.props.theme) {\n this.setState({\n theme: this.props.theme\n });\n }\n\n (_c = this.excalidrawContainerRef.current) === null || _c === void 0 ? void 0 : _c.classList.toggle(\"theme--dark\", this.state.theme === _constants__WEBPACK_IMPORTED_MODULE_12__.THEME.DARK);\n\n if (this.state.editingLinearElement && !this.state.selectedElementIds[this.state.editingLinearElement.elementId]) {\n // defer so that the storeAction flag isn't reset via current update\n setTimeout(() => {\n // execute only if the condition still holds when the deferred callback\n // executes (it can be scheduled multiple times depending on how\n // many times the component renders)\n this.state.editingLinearElement && this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n });\n } // failsafe in case the state is being updated in incorrect order resulting\n // in the editingTextElement being now a deleted element\n\n\n if ((_d = this.state.editingTextElement) === null || _d === void 0 ? void 0 : _d.isDeleted) {\n this.setState({\n editingTextElement: null\n });\n }\n\n if (this.state.selectedLinearElement && !this.state.selectedElementIds[this.state.selectedLinearElement.elementId]) {\n // To make sure `selectedLinearElement` is in sync with `selectedElementIds`, however this shouldn't be needed once\n // we have a single API to update `selectedElementIds`\n this.setState({\n selectedLinearElement: null\n });\n }\n\n const {\n multiElement\n } = prevState;\n\n if (prevState.activeTool !== this.state.activeTool && multiElement != null && (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.isBindingEnabled)(this.state) && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElement)(multiElement, false)) {\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.maybeBindLinearElement)(multiElement, this.state, (0,_utils__WEBPACK_IMPORTED_MODULE_34__.tupleToCoors)(_element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.getPointAtIndexGlobalCoordinates(multiElement, -1, nonDeletedElementsMap)), this.scene.getNonDeletedElementsMap(), this.scene.getNonDeletedElements());\n }\n\n this.store.commit(elementsMap, this.state); // Do not notify consumers if we're still loading the scene. Among other\n // potential issues, this fixes a case where the tab isn't focused during\n // init, which would trigger onChange with empty elements, which would then\n // override whatever is in localStorage currently.\n\n if (!this.state.isLoading) {\n (_f = (_e = this.props).onChange) === null || _f === void 0 ? void 0 : _f.call(_e, elements, this.state, this.files);\n this.onChangeEmitter.trigger(elements, this.state, this.files);\n }\n }\n\n static resetTapTwice() {\n didTapTwice = false;\n } // TODO rewrite this to paste both text & images at the same time if\n // pasted data contains both\n\n\n async addElementsFromMixedContentPaste(mixedContent, {\n isPlainPaste,\n sceneX,\n sceneY\n }) {\n if (!isPlainPaste && mixedContent.some(node => node.type === \"imageUrl\") && this.isToolSupported(\"image\")) {\n const imageURLs = mixedContent.filter(node => node.type === \"imageUrl\").map(node => node.value);\n const responses = await Promise.all(imageURLs.map(async url => {\n try {\n return {\n file: await (0,_data_blob__WEBPACK_IMPORTED_MODULE_40__.ImageURLToFile)(url)\n };\n } catch (error) {\n let errorMessage = error.message;\n\n if (error.cause === \"FETCH_ERROR\") {\n errorMessage = (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.failedToFetchImage\");\n } else if (error.cause === \"UNSUPPORTED\") {\n errorMessage = (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"errors.unsupportedFileType\");\n }\n\n return {\n errorMessage\n };\n }\n }));\n let y = sceneY;\n let firstImageYOffsetDone = false;\n const nextSelectedIds = {};\n\n for (const response of responses) {\n if (response.file) {\n const imageElement = this.createImageElement({\n sceneX,\n sceneY: y\n });\n const initializedImageElement = await this.insertImageElement(imageElement, response.file);\n\n if (initializedImageElement) {\n // vertically center first image in the batch\n if (!firstImageYOffsetDone) {\n firstImageYOffsetDone = true;\n y -= initializedImageElement.height / 2;\n } // hack to reset the `y` coord because we vertically center during\n // insertImageElement\n\n\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(initializedImageElement, {\n y\n }, false);\n y = imageElement.y + imageElement.height + 25;\n nextSelectedIds[imageElement.id] = true;\n }\n }\n }\n\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.makeNextSelectedElementIds)(nextSelectedIds, this.state)\n });\n const error = responses.find(response => !!response.errorMessage);\n\n if (error && error.errorMessage) {\n this.setState({\n errorMessage: error.errorMessage\n });\n }\n } else {\n const textNodes = mixedContent.filter(node => node.type === \"text\");\n\n if (textNodes.length) {\n this.addTextFromPaste(textNodes.map(node => node.value).join(\"\\n\\n\"), isPlainPaste);\n }\n }\n }\n\n addTextFromPaste(text, isPlainPaste = false) {\n const {\n x,\n y\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.viewportCoordsToSceneCoords)({\n clientX: this.lastViewportPosition.x,\n clientY: this.lastViewportPosition.y\n }, this.state);\n const textElementProps = {\n x,\n y,\n strokeColor: this.state.currentItemStrokeColor,\n backgroundColor: this.state.currentItemBackgroundColor,\n fillStyle: this.state.currentItemFillStyle,\n strokeWidth: this.state.currentItemStrokeWidth,\n strokeStyle: this.state.currentItemStrokeStyle,\n roundness: null,\n roughness: this.state.currentItemRoughness,\n opacity: this.state.currentItemOpacity,\n text,\n rawText: text,\n fontSize: (0,_actions_actionProperties__WEBPACK_IMPORTED_MODULE_75__.getFontSize)(this.state.currentItemFontSize, this.state.zoom.value),\n fontFamily: this.state.currentItemFontFamily,\n textAlign: _constants__WEBPACK_IMPORTED_MODULE_12__.DEFAULT_TEXT_ALIGN,\n verticalAlign: _constants__WEBPACK_IMPORTED_MODULE_12__.DEFAULT_VERTICAL_ALIGN,\n locked: false\n };\n const fontString = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.getFontString)({\n fontSize: textElementProps.fontSize,\n fontFamily: textElementProps.fontFamily\n });\n const lineHeight = (0,_fonts__WEBPACK_IMPORTED_MODULE_49__.getLineHeight)(textElementProps.fontFamily);\n const [x1,, x2] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_91__.getVisibleSceneBounds)(this.state); // long texts should not go beyond 800 pixels in width nor should it go below 200 px\n\n const maxTextWidth = Math.max(Math.min((x2 - x1) * 0.5, 800), 200);\n const LINE_GAP = 10;\n let currentY = y;\n const lines = isPlainPaste ? [text] : text.split(\"\\n\");\n const textElements = lines.reduce((acc, line, idx) => {\n var _a;\n\n const originalText = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.normalizeText)(line).trim();\n\n if (originalText.length) {\n const topLayerFrame = this.getTopLayerFrameAtSceneCoords({\n x,\n y: currentY\n });\n let metrics = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.measureText)(originalText, fontString, lineHeight);\n const isTextUnwrapped = metrics.width > maxTextWidth;\n const text = isTextUnwrapped ? (0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.wrapText)(originalText, fontString, maxTextWidth) : originalText;\n metrics = isTextUnwrapped ? (0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.measureText)(text, fontString, lineHeight) : metrics;\n const startX = x - metrics.width / 2;\n const startY = currentY - metrics.height / 2;\n const element = (0,_element__WEBPACK_IMPORTED_MODULE_16__.newTextElement)(Object.assign(Object.assign({}, textElementProps), {\n x: startX,\n y: startY,\n text,\n rawText: originalText,\n //zsviczian\n originalText,\n lineHeight,\n autoResize: !isTextUnwrapped,\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_44__.getLineHeightInPx)(textElementProps.fontSize, lineHeight) + LINE_GAP;\n }\n }\n\n return acc;\n }, []);\n\n if (textElements.length === 0) {\n return;\n }\n\n this.scene.insertElements(textElements);\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.makeNextSelectedElementIds)(Object.fromEntries(textElements.map(el => [el.id, true])), this.state)\n });\n\n if (!isPlainPaste && textElements.length > 1 && PLAIN_PASTE_TOAST_SHOWN === false && !this.device.editor.isMobile) {\n this.setToast({\n message: (0,_i18n__WEBPACK_IMPORTED_MODULE_25__.t)(\"toast.pasteAsSingleElement\", {\n shortcut: (0,_utils__WEBPACK_IMPORTED_MODULE_34__.getShortcutKey)(\"CtrlOrCmd+Shift+V\")\n }),\n duration: 5000\n });\n PLAIN_PASTE_TOAST_SHOWN = true;\n }\n\n this.store.shouldCaptureIncrement();\n }\n\n handleTextWysiwyg(element, {\n isExistingElement = false\n }) {\n const elementsMap = this.scene.getElementsMapIncludingDeleted();\n\n const updateElement = (nextOriginalText, isDeleted, rawText, //zsviczian\n link) => {\n this.scene.replaceAllElements([// Not sure why we include deleted elements as well hence using deleted elements map\n ...this.scene.getElementsIncludingDeleted().map(_element => {\n if (_element.id === element.id && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(_element)) {\n return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(_element, Object.assign({\n originalText: nextOriginalText,\n rawText: rawText !== null && rawText !== void 0 ? rawText : nextOriginalText,\n //zsviczian\n link,\n isDeleted: isDeleted !== null && isDeleted !== void 0 ? isDeleted : _element.isDeleted\n }, (0,_element__WEBPACK_IMPORTED_MODULE_16__.refreshTextDimensions)(_element, (0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.getContainerElement)(_element, elementsMap), elementsMap, nextOriginalText)));\n }\n\n return _element;\n })]);\n }; //zsviczian\n\n\n if (isExistingElement && this.props.onBeforeTextEdit) {\n const text = this.props.onBeforeTextEdit(element);\n\n if (text && text !== element.originalText) {\n this.scene.replaceAllElements([...this.scene.getElementsIncludingDeleted().map(_element => {\n if (_element.id === element.id && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(_element)) {\n //changing the value of element so this gets edited by textWysiwyg\n element = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.newElementWith)(_element, Object.assign({\n originalText: text,\n rawText: text,\n isDeleted: false\n }, (0,_element__WEBPACK_IMPORTED_MODULE_16__.refreshTextDimensions)(_element, (0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.getContainerElement)(_element, elementsMap), elementsMap, text)));\n return element;\n }\n\n return _element;\n })]);\n }\n }\n\n (0,_element_textWysiwyg__WEBPACK_IMPORTED_MODULE_84__.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_34__.sceneCoordsToViewportCoords)({\n sceneX: x,\n sceneY: y\n }, this.state);\n return [viewportX - this.state.offsetLeft, viewportY - this.state.offsetTop];\n },\n onChange: (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(nextOriginalText => {\n updateElement(nextOriginalText, false);\n\n if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isNonDeletedElement)(element)) {\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.updateBoundElements)(element, this.scene.getNonDeletedElementsMap());\n }\n }),\n onSubmit: (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(({\n viaKeyboard,\n nextOriginalText\n }) => {\n var _a;\n\n const isDeleted = !nextOriginalText.trim(); //zsviczian insert start\n\n const rawText = nextOriginalText; //should this be originalText??\n\n let link = undefined;\n\n if (this.props.onBeforeTextSubmit) {\n const _element = this.scene.getElementsIncludingDeleted().find(el => el.id === element.id && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(el));\n\n if (_element) {\n const dismensionsData = (0,_element__WEBPACK_IMPORTED_MODULE_16__.refreshTextDimensions)(_element, (0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.getContainerElement)(_element, elementsMap), elementsMap, nextOriginalText);\n const {\n updatedNextOriginalText,\n nextLink\n } = this.props.onBeforeTextSubmit(element, (_a = dismensionsData === null || dismensionsData === void 0 ? void 0 : dismensionsData.text) !== null && _a !== void 0 ? _a : nextOriginalText, //should never be undefined\n nextOriginalText, isDeleted);\n nextOriginalText = updatedNextOriginalText !== null && updatedNextOriginalText !== void 0 ? updatedNextOriginalText : nextOriginalText;\n link = nextLink;\n }\n } //zsviczian insert end\n\n\n updateElement(nextOriginalText, isDeleted, rawText, link); //zsviczian (added rawText, link, text)\n // select the created text element only if submitting via keyboard\n // (when submitting via click it should act as signal to deselect)\n\n if (!isDeleted && viaKeyboard) {\n const elementIdToSelect = element.containerId ? element.containerId : element.id; // needed to ensure state is updated before \"finalize\" action\n // that's invoked on keyboard-submit as well\n // TODO either move this into finalize as well, or handle all state\n // updates in one place, skipping finalize action\n\n (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.flushSync)(() => {\n this.setState(prevState => ({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.makeNextSelectedElementIds)(Object.assign(Object.assign({}, prevState.selectedElementIds), {\n [elementIdToSelect]: true\n }), prevState)\n }));\n });\n }\n\n if (isDeleted) {\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.fixBindingsAfterDeletion)(this.scene.getNonDeletedElements(), [element]);\n }\n\n if (!isDeleted || isExistingElement) {\n this.store.shouldCaptureIncrement();\n }\n\n this.setState({\n newElement: null,\n editingTextElement: null\n });\n\n if (this.state.activeTool.locked) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursorForShape)(this.interactiveCanvas, this.state);\n }\n\n this.focusContainer();\n }),\n element,\n excalidrawContainer: this.excalidrawContainerRef.current,\n app: this,\n // when text is selected, it's hard (at least on iOS) to re-position the\n // caret (i.e. deselect). There's not much use for always selecting\n // the text on edit anyway (and users can select-all from contextmenu\n // if needed)\n autoSelect: !this.device.isTouchScreen\n }); // deselect all other elements when inserting text\n\n this.deselectElements(); // do an initial update to re-initialize element position since we were\n // modifying element's x/y for sake of editor (case: syncing to remote)\n\n updateElement(element.originalText, false);\n }\n\n deselectElements() {\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.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_collision__WEBPACK_IMPORTED_MODULE_83__.hitElementItself)({\n x,\n y,\n element: elementWithHighestZIndex,\n shape: (0,_shapes__WEBPACK_IMPORTED_MODULE_31__.getElementShape)(elementWithHighestZIndex, this.scene.getNonDeletedElementsMap()),\n // when overlapping, we would like to be more precise\n // this also avoids the need to update past tests\n threshold: this.getElementHitThreshold() / 2,\n frameNameBound: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(elementWithHighestZIndex) ? this.frameNameBoundsCache.get(elementWithHighestZIndex) : null\n }) ? elementWithHighestZIndex : allHitElements[allHitElements.length - 2];\n }\n\n if (allHitElements.length === 1) {\n return allHitElements[0];\n }\n\n return null;\n }\n\n getElementsAtPosition(x, y, includeBoundTextElement = false, includeLockedElements = false) {\n const iframeLikes = [];\n const elementsMap = this.scene.getNonDeletedElementsMap();\n const elements = (includeBoundTextElement && includeLockedElements ? this.scene.getNonDeletedElements() : this.scene.getNonDeletedElements().filter(element => (includeLockedElements || !element.locked) && (includeBoundTextElement || !((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(element) && element.containerId)))).filter(el => this.hitElement(x, y, el)).filter(element => {\n // hitting a frame's element from outside the frame is not considered a hit\n const containingFrame = (0,_frame__WEBPACK_IMPORTED_MODULE_50__.getContainingFrame)(element, elementsMap);\n return containingFrame && this.state.frameRendering.enabled && this.state.frameRendering.clip ? (0,_frame__WEBPACK_IMPORTED_MODULE_50__.isCursorInFrame)({\n x,\n y\n }, containingFrame, elementsMap) : true;\n }).filter(el => {\n // The parameter elements comes ordered from lower z-index to higher.\n // We want to preserve that order on the returned array.\n // Exception being embeddables which should be on top of everything else in\n // terms of hit testing.\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeElement)(el)) {\n iframeLikes.push(el);\n return false;\n }\n\n return true;\n }).concat(iframeLikes);\n return elements;\n }\n\n getElementHitThreshold() {\n return _constants__WEBPACK_IMPORTED_MODULE_12__.DEFAULT_COLLISION_THRESHOLD / this.state.zoom.value;\n }\n\n hitElement(x, y, element, considerBoundingBox = true) {\n // if the element is selected, then hit test is done against its bounding box\n if (considerBoundingBox && this.state.selectedElementIds[element.id] && (0,_element_transformHandles__WEBPACK_IMPORTED_MODULE_47__.shouldShowBoundingBox)([element], this.state)) {\n const selectionShape = (0,_utils_geometry_shape__WEBPACK_IMPORTED_MODULE_32__.getSelectionBoxShape)(element, this.scene.getNonDeletedElementsMap(), this.getElementHitThreshold());\n return (0,_utils_collision__WEBPACK_IMPORTED_MODULE_33__.isPointInShape)((0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(x, y), selectionShape);\n } // take bound text element into consideration for hit collision as well\n\n\n const hitBoundTextOfElement = (0,_element_collision__WEBPACK_IMPORTED_MODULE_83__.hitElementBoundText)(x, y, (0,_shapes__WEBPACK_IMPORTED_MODULE_31__.getBoundTextShape)(element, this.scene.getNonDeletedElementsMap()));\n\n if (hitBoundTextOfElement) {\n return true;\n }\n\n return (0,_element_collision__WEBPACK_IMPORTED_MODULE_83__.hitElementItself)({\n x,\n y,\n element,\n shape: (0,_shapes__WEBPACK_IMPORTED_MODULE_31__.getElementShape)(element, this.scene.getNonDeletedElementsMap()),\n threshold: this.getElementHitThreshold(),\n frameNameBound: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(element) ? this.frameNameBoundsCache.get(element) : null\n });\n }\n\n getTextBindableContainerAtPosition(x, y) {\n const elements = this.scene.getNonDeletedElements();\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (selectedElements.length === 1) {\n return (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isTextBindableContainer)(selectedElements[0], false) ? selectedElements[0] : null;\n }\n\n let hitElement = null; // We need to do hit testing from front (end of the array) to back (beginning of the array)\n\n for (let index = elements.length - 1; index >= 0; --index) {\n if (elements[index].isDeleted) {\n continue;\n }\n\n const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getElementAbsoluteCoords)(elements[index], this.scene.getNonDeletedElementsMap());\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isArrowElement)(elements[index]) && (0,_element_collision__WEBPACK_IMPORTED_MODULE_83__.hitElementItself)({\n x,\n y,\n element: elements[index],\n shape: (0,_shapes__WEBPACK_IMPORTED_MODULE_31__.getElementShape)(elements[index], this.scene.getNonDeletedElementsMap()),\n threshold: this.getElementHitThreshold()\n })) {\n hitElement = elements[index];\n break;\n } else if (x1 < x && x < x2 && y1 < y && y < y2) {\n hitElement = elements[index];\n break;\n }\n }\n\n return (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isTextBindableContainer)(hitElement, false) ? hitElement : null;\n }\n\n handleHoverSelectedLinearElement(linearElementEditor, scenePointerX, scenePointerY) {\n const elementsMap = this.scene.getNonDeletedElementsMap();\n const element = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.getElement(linearElementEditor.elementId, elementsMap);\n\n if (!element) {\n return;\n }\n\n if (this.state.selectedLinearElement) {\n let hoverPointIndex = -1;\n let segmentMidPointHoveredCoords = null;\n\n if ((0,_element_collision__WEBPACK_IMPORTED_MODULE_83__.hitElementItself)({\n x: scenePointerX,\n y: scenePointerY,\n element,\n shape: (0,_shapes__WEBPACK_IMPORTED_MODULE_31__.getElementShape)(element, this.scene.getNonDeletedElementsMap())\n })) {\n hoverPointIndex = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.getPointIndexUnderCursor(element, elementsMap, this.state.zoom, scenePointerX, scenePointerY);\n segmentMidPointHoveredCoords = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.getSegmentMidpointHitCoords(linearElementEditor, {\n x: scenePointerX,\n y: scenePointerY\n }, this.state, this.scene.getNonDeletedElementsMap());\n\n if (hoverPointIndex >= 0 || segmentMidPointHoveredCoords) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.POINTER);\n } else if (this.hitElement(scenePointerX, scenePointerY, element)) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.MOVE);\n }\n } else if (this.hitElement(scenePointerX, scenePointerY, element)) {\n if (!(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isElbowArrow)(element) || !(element.startBinding || element.endBinding)) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.MOVE);\n }\n }\n\n if (this.state.selectedLinearElement.hoverPointIndex !== hoverPointIndex) {\n this.setState({\n selectedLinearElement: Object.assign(Object.assign({}, this.state.selectedLinearElement), {\n hoverPointIndex\n })\n });\n }\n\n if (!_element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.arePointsEqual(this.state.selectedLinearElement.segmentMidPointHoveredCoords, segmentMidPointHoveredCoords)) {\n this.setState({\n selectedLinearElement: Object.assign(Object.assign({}, this.state.selectedLinearElement), {\n segmentMidPointHoveredCoords\n })\n });\n }\n } else {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.AUTO);\n }\n }\n\n updateGestureOnPointerDown(event) {\n gesture.pointers.set(event.pointerId, {\n x: event.clientX,\n y: event.clientY\n });\n\n if (gesture.pointers.size === 2) {\n gesture.lastCenter = (0,_gesture__WEBPACK_IMPORTED_MODULE_22__.getCenter)(gesture.pointers);\n gesture.initialScale = this.state.zoom.value;\n gesture.initialDistance = (0,_gesture__WEBPACK_IMPORTED_MODULE_22__.getDistance)(Array.from(gesture.pointers.values()));\n }\n }\n\n initialPointerDownState(event) {\n const origin = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.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 const isElbowArrowOnly = selectedElements.findIndex(_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isElbowArrow) === 0;\n return {\n origin,\n withCmdOrCtrl: event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD],\n originInGrid: (0,_utils__WEBPACK_IMPORTED_MODULE_34__.tupleToCoors)((0,_snapping__WEBPACK_IMPORTED_MODULE_58__.getGridPoint)(origin.x, origin.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] || isElbowArrowOnly ? null : this.getEffectiveGridSize())),\n scrollbars: (0,_scene_scrollbars__WEBPACK_IMPORTED_MODULE_85__.isOverScrollBars)(currentScrollBars, event.clientX - this.state.offsetLeft, event.clientY - this.state.offsetTop),\n // we need to duplicate because we'll be updating this state\n lastCoords: Object.assign({}, origin),\n originalElements: this.scene.getNonDeletedElements().reduce((acc, element) => {\n acc.set(element.id, (0,_element_newElement__WEBPACK_IMPORTED_MODULE_20__.deepCopyElement)(element));\n return acc;\n }, new Map()),\n resize: {\n handleType: false,\n isResizing: false,\n offset: {\n x: 0,\n y: 0\n },\n arrowDirection: \"origin\",\n center: {\n x: (maxX + minX) / 2,\n y: (maxY + minY) / 2\n }\n },\n hit: {\n element: null,\n allHitElements: [],\n wasAddedToSelection: false,\n hasBeenDuplicated: false,\n hasHitCommonBoundingBoxOfSelectedElements: this.isHittingCommonBoundingBoxOfSelectedElements(origin, selectedElements)\n },\n drag: {\n hasOccurred: false,\n offset: null\n },\n eventListeners: {\n onMove: null,\n onUp: null,\n onKeyUp: null,\n onKeyDown: null\n },\n boxSelection: {\n hasOccurred: false\n }\n };\n } // Returns whether the event is a dragging a scrollbar\n\n\n handleDraggingScrollBar(event, pointerDownState) {\n if (!(pointerDownState.scrollbars.isOverEither && !this.state.multiElement)) {\n return false;\n }\n\n isDraggingScrollBar = true;\n pointerDownState.lastCoords.x = event.clientX;\n pointerDownState.lastCoords.y = event.clientY;\n const onPointerMove = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdatesThrottled)(event => {\n const target = event.target;\n\n if (!(target instanceof HTMLElement)) {\n return;\n }\n\n this.handlePointerMoveOverScrollbars(event, pointerDownState);\n });\n const onPointerUp = (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(() => {\n lastPointerUp = null;\n isDraggingScrollBar = false;\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursorForShape)(this.interactiveCanvas, this.state);\n this.setState({\n cursorButton: \"up\"\n });\n this.savePointer(event.clientX, event.clientY, \"up\");\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, onPointerMove);\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, onPointerUp);\n onPointerMove.flush();\n });\n lastPointerUp = onPointerUp;\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, onPointerMove);\n window.addEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, onPointerUp);\n return true;\n }\n\n isASelectedElement(hitElement) {\n return hitElement != null && this.state.selectedElementIds[hitElement.id];\n }\n\n isHittingCommonBoundingBoxOfSelectedElements(point, selectedElements) {\n if (selectedElements.length < 2) {\n return false;\n } // How many pixels off the shape boundary we still consider a hit\n\n\n const threshold = this.getElementHitThreshold();\n const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_16__.getCommonBounds)(selectedElements);\n return point.x > x1 - threshold && point.x < x2 + threshold && point.y > y1 - threshold && point.y < y2 + threshold;\n }\n\n getCurrentItemRoundness(elementType) {\n return this.state.currentItemRoundness === \"round\" ? {\n type: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isUsingAdaptiveRadius)(elementType) ? _constants__WEBPACK_IMPORTED_MODULE_12__.ROUNDNESS.ADAPTIVE_RADIUS : _constants__WEBPACK_IMPORTED_MODULE_12__.ROUNDNESS.PROPORTIONAL_RADIUS\n } : null;\n }\n\n maybeCacheReferenceSnapPoints(event, selectedElements, recomputeAnyways = false) {\n if ((0,_snapping__WEBPACK_IMPORTED_MODULE_58__.isSnappingEnabled)({\n event,\n app: this,\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, this.scene.getNonDeletedElementsMap()));\n }\n }\n\n maybeCacheVisibleGaps(event, selectedElements, recomputeAnyways = false) {\n if ((0,_snapping__WEBPACK_IMPORTED_MODULE_58__.isSnappingEnabled)({\n event,\n app: this,\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, this.scene.getNonDeletedElementsMap()));\n }\n }\n\n onKeyDownFromPointerDownHandler(pointerDownState) {\n return (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(event => {\n if (this.maybeHandleResize(pointerDownState, event)) {\n return;\n }\n\n this.maybeDragNewGenericElement(pointerDownState, event);\n });\n }\n\n onKeyUpFromPointerDownHandler(pointerDownState) {\n return (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(event => {\n // Prevents focus from escaping excalidraw tab\n event.key === _keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.ALT && event.preventDefault();\n\n if (this.maybeHandleResize(pointerDownState, event)) {\n return;\n }\n\n this.maybeDragNewGenericElement(pointerDownState, event);\n });\n }\n\n onPointerMoveFromPointerDownHandler(pointerDownState) {\n return (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdatesThrottled)(event => {\n var _a, _b; //To avoid pointerMove canceling the selection of locked elements on mobile //zsviczian\n\n\n if (Boolean(this.state.contextMenu)) {\n return;\n } // We need to initialize dragOffsetXY only after we've updated\n // `state.selectedElementIds` on pointerDown. Doing it here in pointerMove\n // event handler should hopefully ensure we're already working with\n // the updated state.\n\n\n if (pointerDownState.drag.offset === null) {\n pointerDownState.drag.offset = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.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_34__.viewportCoordsToSceneCoords)(event, this.state);\n\n if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state)) {\n this.handleEraser(event, pointerDownState, pointerCoords);\n return;\n }\n\n if (this.state.activeTool.type === \"laser\") {\n this.laserTrails.addPointToPath(pointerCoords.x, pointerCoords.y);\n }\n\n const [gridX, gridY] = (0,_snapping__WEBPACK_IMPORTED_MODULE_58__.getGridPoint)(pointerCoords.x, pointerCoords.y, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()); // 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_98__.pointDistance)((0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(pointerCoords.x, pointerCoords.y), (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(pointerDownState.origin.x, pointerDownState.origin.y)) < _constants__WEBPACK_IMPORTED_MODULE_12__.DRAGGING_THRESHOLD) {\n return;\n }\n }\n\n if (pointerDownState.resize.isResizing) {\n pointerDownState.lastCoords.x = pointerCoords.x;\n pointerDownState.lastCoords.y = pointerCoords.y;\n\n if (this.maybeHandleResize(pointerDownState, event)) {\n return true;\n }\n }\n\n const elementsMap = this.scene.getNonDeletedElementsMap();\n\n if (this.state.selectedLinearElement) {\n const linearElementEditor = this.state.editingLinearElement || this.state.selectedLinearElement;\n\n if (_element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.shouldAddMidpoint(this.state.selectedLinearElement, pointerCoords, this.state, elementsMap)) {\n const ret = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.addMidpoint(this.state.selectedLinearElement, pointerCoords, this, !event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD], elementsMap);\n\n if (!ret) {\n return;\n } // Since we are reading from previous state which is not possible with\n // automatic batching in React 18 hence using flush sync to synchronously\n // update the state. Check https://github.com/excalidraw/excalidraw/pull/5508 for more details.\n\n\n (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.flushSync)(() => {\n if (this.state.selectedLinearElement) {\n this.setState({\n selectedLinearElement: Object.assign(Object.assign({}, this.state.selectedLinearElement), {\n pointerDownState: ret.pointerDownState,\n selectedPointsIndices: ret.selectedPointsIndices\n })\n });\n }\n\n if (this.state.editingLinearElement) {\n this.setState({\n editingLinearElement: Object.assign(Object.assign({}, this.state.editingLinearElement), {\n pointerDownState: ret.pointerDownState,\n selectedPointsIndices: ret.selectedPointsIndices\n })\n });\n }\n });\n return;\n } else if (linearElementEditor.pointerDownState.segmentMidpoint.value !== null && !linearElementEditor.pointerDownState.segmentMidpoint.added) {\n return;\n }\n\n const didDrag = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handlePointDragging(event, this, pointerCoords.x, pointerCoords.y, (element, pointsSceneCoords) => {\n this.maybeSuggestBindingsForLinearElementAtCoords(element, pointsSceneCoords);\n }, linearElementEditor, this.scene);\n\n if (didDrag) {\n pointerDownState.lastCoords.x = pointerCoords.x;\n pointerDownState.lastCoords.y = pointerCoords.y;\n pointerDownState.drag.hasOccurred = true;\n\n if (this.state.editingLinearElement && !this.state.editingLinearElement.isDragging) {\n this.setState({\n editingLinearElement: Object.assign(Object.assign({}, this.state.editingLinearElement), {\n isDragging: true\n })\n });\n }\n\n if (!this.state.selectedLinearElement.isDragging) {\n this.setState({\n selectedLinearElement: Object.assign(Object.assign({}, this.state.selectedLinearElement), {\n isDragging: true\n })\n });\n }\n\n return;\n }\n }\n\n const hasHitASelectedElement = pointerDownState.hit.allHitElements.some(element => this.isASelectedElement(element));\n const isSelectingPointsInLineEditor = this.state.editingLinearElement && event.shiftKey && this.state.editingLinearElement.elementId === ((_a = pointerDownState.hit.element) === null || _a === void 0 ? void 0 : _a.id);\n\n if ((hasHitASelectedElement || pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements) && !isSelectingPointsInLineEditor) {\n const selectedElements = this.scene.getSelectedElements(this.state);\n\n if (selectedElements.every(element => element.locked)) {\n return;\n }\n\n const selectedElementsHasAFrame = selectedElements.find(e => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(e));\n const topLayerFrame = this.getTopLayerFrameAtSceneCoords(pointerCoords);\n this.setState({\n frameToHighlight: topLayerFrame && !selectedElementsHasAFrame ? topLayerFrame : null\n }); // Marking that click was used for dragging to check\n // if elements should be deselected on pointerup\n\n pointerDownState.drag.hasOccurred = true; // 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 editingTextElement to avoid jump while editing on mobile #6503\n\n if (selectedElements.length > 0 && !pointerDownState.withCmdOrCtrl && !this.state.editingTextElement && ((_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)(originalElements, dragOffset, this, event, this.scene.getNonDeletedElementsMap());\n this.setState({\n snapLines\n }); // when we're editing the name of a frame, we want the user to be\n // able to select and interact with the text input\n\n !this.state.editingFrame && (0,_element__WEBPACK_IMPORTED_MODULE_16__.dragSelectedElements)(pointerDownState, selectedElements, dragOffset, this.scene, snapOffset, event[_keys__WEBPACK_IMPORTED_MODULE_26__.KEYS.CTRL_OR_CMD] ? null : this.getEffectiveGridSize());\n this.setState({\n selectedElementsAreBeingDragged: true,\n // element is being dragged and selectionElement that was created on pointer down\n // should be removed\n selectionElement: null\n });\n\n if (selectedElements.length !== 1 || !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isElbowArrow)(selectedElements[0])) {\n this.setState({\n suggestedBindings: (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.getSuggestedBindingsForArrows)(selectedElements, this.scene.getNonDeletedElementsMap())\n });\n } // We duplicate the selected element if alt is pressed on pointer move\n\n\n if (event.altKey && !pointerDownState.hit.hasBeenDuplicated) {\n // Move the currently selected elements to the top of the z index stack, and\n // put the duplicates where the selected elements used to be.\n // (the origin point where the dragging started)\n pointerDownState.hit.hasBeenDuplicated = true;\n const nextElements = [];\n const elementsToAppend = [];\n const groupIdMap = new Map();\n const oldIdToDuplicatedId = new Map();\n const hitElement = pointerDownState.hit.element;\n const selectedElementIds = new Set(this.scene.getSelectedElements({\n selectedElementIds: this.state.selectedElementIds,\n includeBoundTextElement: true,\n includeElementsInFrames: true\n }).map(element => element.id));\n const elements = this.scene.getElementsIncludingDeleted();\n\n for (const element of elements) {\n if (selectedElementIds.has(element.id) || // case: the state.selectedElementIds might not have been\n // updated yet by the time this mousemove event is fired\n element.id === (hitElement === null || hitElement === void 0 ? void 0 : hitElement.id) && pointerDownState.hit.wasAddedToSelection) {\n const duplicatedElement = (0,_element__WEBPACK_IMPORTED_MODULE_16__.duplicateElement)(this.state.editingGroupId, groupIdMap, element);\n const origElement = pointerDownState.originalElements.get(element.id);\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(duplicatedElement, {\n x: origElement.x,\n y: origElement.y\n }); // put duplicated element to pointerDownState.originalElements\n // so that we can snap to the duplicated element without releasing\n\n pointerDownState.originalElements.set(duplicatedElement.id, duplicatedElement);\n nextElements.push(duplicatedElement);\n elementsToAppend.push(element);\n oldIdToDuplicatedId.set(element.id, duplicatedElement.id);\n } else {\n nextElements.push(element);\n }\n }\n\n const nextSceneElements = [...nextElements, ...elementsToAppend];\n (0,_fractionalIndex__WEBPACK_IMPORTED_MODULE_86__.syncMovedIndices)(nextSceneElements, (0,_utils__WEBPACK_IMPORTED_MODULE_34__.arrayToMap)(elementsToAppend));\n (0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.bindTextToShapeAfterDuplication)(nextElements, elementsToAppend, oldIdToDuplicatedId);\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.fixBindingsAfterDuplication)(nextSceneElements, elementsToAppend, oldIdToDuplicatedId, \"duplicatesServeAsOld\");\n (0,_frame__WEBPACK_IMPORTED_MODULE_50__.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 }\n\n if (this.state.selectionElement) {\n pointerDownState.lastCoords.x = pointerCoords.x;\n pointerDownState.lastCoords.y = pointerCoords.y;\n this.maybeDragNewGenericElement(pointerDownState, event);\n } else {\n // It is very important to read this.state within each move event,\n // otherwise we would read a stale one!\n const newElement = this.state.newElement;\n\n if (!newElement) {\n return;\n }\n\n if (newElement.type === \"freedraw\") {\n const points = newElement.points;\n const dx = pointerCoords.x - newElement.x;\n const dy = pointerCoords.y - newElement.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 = newElement.simulatePressure ? newElement.pressures : [//zsviczian\n ...newElement.pressures, (strokeOptions === null || strokeOptions === void 0 ? void 0 : strokeOptions.constantPressure) ? 1 : event.pressure];\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(newElement, {\n points: [...points, (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(dx, dy)],\n pressures\n }, false);\n this.setState({\n newElement\n });\n }\n } else if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(newElement)) {\n pointerDownState.drag.hasOccurred = true;\n const points = newElement.points;\n let dx = gridX - newElement.x;\n let dy = gridY - newElement.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)(newElement.x, newElement.y, pointerCoords.x, pointerCoords.y));\n }\n\n if (points.length === 1) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(newElement, {\n points: [...points, (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(dx, dy)]\n }, false);\n } else if (points.length > 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isElbowArrow)(newElement)) {\n (0,_element_routing__WEBPACK_IMPORTED_MODULE_95__.mutateElbowArrow)(newElement, elementsMap, [...points.slice(0, -1), (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(dx, dy)], (0,_math__WEBPACK_IMPORTED_MODULE_98__.vector)(0, 0), undefined, {\n isDragging: true,\n informMutation: false\n });\n } else if (points.length === 2) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(newElement, {\n points: [...points.slice(0, -1), (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(dx, dy)]\n }, false);\n }\n\n this.setState({\n newElement\n });\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElement)(newElement, false)) {\n // When creating a linear element by dragging\n this.maybeSuggestBindingsForLinearElementAtCoords(newElement, [pointerCoords], this.state.startBoundElement);\n }\n } else {\n pointerDownState.lastCoords.x = pointerCoords.x;\n pointerDownState.lastCoords.y = pointerCoords.y;\n this.maybeDragNewGenericElement(pointerDownState, event, false);\n }\n }\n\n if (this.state.activeTool.type === \"selection\") {\n pointerDownState.boxSelection.hasOccurred = true;\n const elements = this.scene.getNonDeletedElements(); // box-select line editor points\n\n if (this.state.editingLinearElement) {\n _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handleBoxSelection(event, this.state, this.setState.bind(this), this.scene.getNonDeletedElementsMap()); // regular box-select\n } else {\n let shouldReuseSelection = true;\n\n if (!event.shiftKey && (0,_scene__WEBPACK_IMPORTED_MODULE_28__.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 = this.state.selectionElement ? (0,_scene__WEBPACK_IMPORTED_MODULE_28__.getElementsWithinSelection)(elements, this.state.selectionElement, this.scene.getNonDeletedElementsMap()) : [];\n this.setState(prevState => {\n const nextSelectedElementIds = Object.assign(Object.assign({}, shouldReuseSelection && prevState.selectedElementIds), elementsWithinSelection.reduce((acc, element) => {\n acc[element.id] = true;\n return acc;\n }, {}));\n\n if (pointerDownState.hit.element) {\n // if using ctrl/cmd, select the hitElement only if we\n // haven't box-selected anything else\n if (!elementsWithinSelection.length) {\n nextSelectedElementIds[pointerDownState.hit.element.id] = true;\n } else {\n delete nextSelectedElementIds[pointerDownState.hit.element.id];\n }\n }\n\n prevState = !shouldReuseSelection ? Object.assign(Object.assign({}, prevState), {\n selectedGroupIds: {},\n editingGroupId: null\n }) : prevState;\n return Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n editingGroupId: prevState.editingGroupId,\n selectedElementIds: nextSelectedElementIds\n }, this.scene.getNonDeletedElements(), prevState, this)), {\n // select linear element only when we haven't box-selected anything else\n selectedLinearElement: elementsWithinSelection.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(elementsWithinSelection[0]) ? new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(elementsWithinSelection[0]) : null,\n showHyperlinkPopup: elementsWithinSelection.length === 1 && (elementsWithinSelection[0].link || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(elementsWithinSelection[0])) ? \"info\" : false\n });\n });\n }\n }\n });\n } // Returns whether the pointer move happened over either scrollbar\n\n\n handlePointerMoveOverScrollbars(event, pointerDownState) {\n if (pointerDownState.scrollbars.isOverHorizontal) {\n const x = event.clientX;\n const dx = x - pointerDownState.lastCoords.x;\n this.translateCanvas({\n scrollX: this.state.scrollX - dx / this.state.zoom.value\n });\n pointerDownState.lastCoords.x = x;\n return true;\n }\n\n if (pointerDownState.scrollbars.isOverVertical) {\n const y = event.clientY;\n const dy = y - pointerDownState.lastCoords.y;\n this.translateCanvas({\n scrollY: this.state.scrollY - dy / this.state.zoom.value\n });\n pointerDownState.lastCoords.y = y;\n return true;\n }\n\n return false;\n }\n\n onPointerUpFromPointerDownHandler(pointerDownState) {\n return (0,_reactUtils__WEBPACK_IMPORTED_MODULE_80__.withBatchedUpdates)(childEvent => {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;\n\n this.removePointer(childEvent);\n\n if (pointerDownState.eventListeners.onMove) {\n pointerDownState.eventListeners.onMove.flush();\n }\n\n const {\n newElement,\n resizingElement,\n multiElement,\n activeTool,\n isResizing,\n isRotating\n } = this.state;\n this.setState(prevState => ({\n isResizing: false,\n isRotating: false,\n resizingElement: null,\n selectionElement: null,\n frameToHighlight: null,\n elementsToHighlight: null,\n cursorButton: \"up\",\n snapLines: (0,_utils__WEBPACK_IMPORTED_MODULE_34__.updateStable)(prevState.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 });\n const elementsMap = this.scene.getNonDeletedElementsMap(); // Handle end of dragging a point of a linear element, might close a loop\n // and sets binding element\n\n if (this.state.editingLinearElement) {\n if (!pointerDownState.boxSelection.hasOccurred && ((_b = (_a = pointerDownState.hit) === null || _a === void 0 ? void 0 : _a.element) === null || _b === void 0 ? void 0 : _b.id) !== this.state.editingLinearElement.elementId) {\n this.actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionFinalize);\n } else {\n const editingLinearElement = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handlePointerUp(childEvent, this.state.editingLinearElement, this.state, this.scene);\n\n if (editingLinearElement !== this.state.editingLinearElement) {\n this.setState({\n editingLinearElement,\n suggestedBindings: []\n });\n }\n }\n } else if (this.state.selectedLinearElement) {\n if (((_d = (_c = pointerDownState.hit) === null || _c === void 0 ? void 0 : _c.element) === null || _d === void 0 ? void 0 : _d.id) !== this.state.selectedLinearElement.elementId) {\n const selectedELements = this.scene.getSelectedElements(this.state); // set selectedLinearElement to null if there is more than one element selected since we don't want to show linear element handles\n\n if (selectedELements.length > 1) {\n this.setState({\n selectedLinearElement: null\n });\n }\n } else {\n const linearElementEditor = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor.handlePointerUp(childEvent, this.state.selectedLinearElement, this.state, this.scene);\n const {\n startBindingElement,\n endBindingElement\n } = linearElementEditor;\n const element = this.scene.getElement(linearElementEditor.elementId);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBindingElement)(element)) {\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.bindOrUnbindLinearElement)(element, startBindingElement, endBindingElement, elementsMap, this.scene);\n }\n\n if (linearElementEditor !== this.state.selectedLinearElement) {\n this.setState({\n selectedLinearElement: Object.assign(Object.assign({}, linearElementEditor), {\n selectedPointsIndices: null\n }),\n suggestedBindings: []\n });\n }\n }\n }\n\n this.missingPointerEventCleanupEmitter.clear();\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_MOVE, pointerDownState.eventListeners.onMove);\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.POINTER_UP, pointerDownState.eventListeners.onUp);\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYDOWN, pointerDownState.eventListeners.onKeyDown);\n window.removeEventListener(_constants__WEBPACK_IMPORTED_MODULE_12__.EVENT.KEYUP, pointerDownState.eventListeners.onKeyUp);\n\n if (this.state.pendingImageElementId) {\n this.setState({\n pendingImageElementId: null\n });\n }\n\n (_f = (_e = this.props) === null || _e === void 0 ? void 0 : _e.onPointerUp) === null || _f === void 0 ? void 0 : _f.call(_e, activeTool, pointerDownState);\n this.onPointerUpEmitter.trigger(this.state.activeTool, pointerDownState, childEvent);\n\n if ((newElement === null || newElement === void 0 ? void 0 : newElement.type) === \"freedraw\") {\n const pointerCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.viewportCoordsToSceneCoords)(childEvent, this.state);\n const points = newElement.points;\n let dx = pointerCoords.x - newElement.x;\n let dy = pointerCoords.y - newElement.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 = newElement.simulatePressure ? [] : [...newElement.pressures, childEvent.pressure];\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(newElement, {\n points: [...points, (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(dx, dy)],\n pressures,\n lastCommittedPoint: (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(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)(newElement)) {\n const imageElement = newElement;\n\n try {\n this.initializeImageDimensions(imageElement);\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.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)(newElement)) {\n if (newElement.points.length > 1) {\n this.store.shouldCaptureIncrement();\n }\n\n const pointerCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.viewportCoordsToSceneCoords)(childEvent, this.state);\n\n if (!pointerDownState.drag.hasOccurred && newElement && !multiElement) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(newElement, {\n points: [...newElement.points, (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(pointerCoords.x - newElement.x, pointerCoords.y - newElement.y)]\n });\n this.setState({\n multiElement: newElement,\n newElement\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)(newElement, false)) {\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.maybeBindLinearElement)(newElement, this.state, pointerCoords, this.scene.getNonDeletedElementsMap(), this.scene.getNonDeletedElements());\n }\n\n this.setState({\n suggestedBindings: [],\n startBoundElement: null\n });\n\n if (!activeTool.locked) {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.resetCursor)(this.interactiveCanvas);\n this.setState(prevState => ({\n newElement: null,\n activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_34__.updateActiveTool)(this.state, {\n type: \"selection\"\n }),\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.makeNextSelectedElementIds)(Object.assign(Object.assign({}, prevState.selectedElementIds), {\n [newElement.id]: true\n }), prevState),\n selectedLinearElement: new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(newElement)\n }));\n } else {\n this.setState(prevState => ({\n newElement: null\n }));\n } // so that the scene gets rendered again to display the newly drawn linear as well\n\n\n this.scene.triggerUpdate();\n }\n\n return;\n }\n\n if ((0,_element__WEBPACK_IMPORTED_MODULE_16__.isTextElement)(newElement)) {\n const minWidth = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_44__.getMinTextElementWidth)((0,_utils__WEBPACK_IMPORTED_MODULE_34__.getFontString)({\n fontSize: newElement.fontSize,\n fontFamily: newElement.fontFamily\n }), newElement.lineHeight);\n\n if (newElement.width < minWidth) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(newElement, {\n autoResize: true\n });\n }\n\n this.resetCursor();\n this.handleTextWysiwyg(newElement, {\n isExistingElement: true\n });\n }\n\n if (activeTool.type !== \"selection\" && newElement && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isInvisiblySmallElement)(newElement)) {\n // remove invisible element which was added in onPointerDown\n // update the store snapshot, so that invisible elements are not captured by the store\n this.updateScene({\n elements: this.scene.getElementsIncludingDeleted().filter(el => el.id !== newElement.id),\n appState: {\n newElement: null\n },\n storeAction: _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.UPDATE\n });\n return;\n }\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(newElement)) {\n const elementsInsideFrame = (0,_frame__WEBPACK_IMPORTED_MODULE_50__.getElementsInNewFrame)(this.scene.getElementsIncludingDeleted(), newElement, this.scene.getNonDeletedElementsMap());\n this.scene.replaceAllElements((0,_frame__WEBPACK_IMPORTED_MODULE_50__.addElementsToFrame)(this.scene.getElementsMapIncludingDeleted(), elementsInsideFrame, newElement));\n }\n\n if (newElement) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(newElement, (0,_element__WEBPACK_IMPORTED_MODULE_16__.getNormalizedDimensions)(newElement)); // the above does not guarantee the scene to be rendered again, hence the trigger below\n\n this.scene.triggerUpdate();\n }\n\n if (pointerDownState.drag.hasOccurred) {\n const sceneCoords = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.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_50__.getContainingFrame)(linearElement, elementsMap);\n\n if (frame && linearElement) {\n if (!(0,_frame__WEBPACK_IMPORTED_MODULE_50__.elementOverlapsWithFrame)(linearElement, frame, this.scene.getNonDeletedElementsMap())) {\n // remove the linear element from all groups\n // before removing it from the frame as well\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(linearElement, {\n groupIds: []\n });\n (0,_frame__WEBPACK_IMPORTED_MODULE_50__.removeElementsFromFrame)([linearElement], this.scene.getNonDeletedElementsMap());\n this.scene.triggerUpdate();\n }\n }\n }\n } else {\n // update the relationships between selected elements and frames\n const topLayerFrame = this.getTopLayerFrameAtSceneCoords(sceneCoords);\n const selectedElements = this.scene.getSelectedElements(this.state);\n let nextElements = this.scene.getElementsMapIncludingDeleted();\n\n const updateGroupIdsAfterEditingGroup = elements => {\n if (elements.length > 0) {\n for (const element of elements) {\n const index = element.groupIds.indexOf(this.state.editingGroupId);\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n groupIds: element.groupIds.slice(0, index)\n }, false);\n }\n\n nextElements.forEach(element => {\n if (element.groupIds.length && (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(nextElements, element.groupIds[element.groupIds.length - 1]).length < 2) {\n (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_19__.mutateElement)(element, {\n groupIds: []\n }, false);\n }\n });\n this.setState({\n editingGroupId: null\n });\n }\n };\n\n if (topLayerFrame && !this.state.selectedElementIds[topLayerFrame.id]) {\n const elementsToAdd = selectedElements.filter(element => element.frameId !== topLayerFrame.id && (0,_frame__WEBPACK_IMPORTED_MODULE_50__.isElementInFrame)(element, nextElements, this.state));\n\n if (this.state.editingGroupId) {\n updateGroupIdsAfterEditingGroup(elementsToAdd);\n }\n\n nextElements = (0,_frame__WEBPACK_IMPORTED_MODULE_50__.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_50__.isElementInFrame)(element, nextElements, this.state));\n updateGroupIdsAfterEditingGroup(elementsToRemove);\n }\n }\n\n nextElements = (0,_frame__WEBPACK_IMPORTED_MODULE_50__.updateFrameMembershipOfSelectedElements)(nextElements, this.state, this);\n this.scene.replaceAllElements(nextElements);\n }\n }\n\n if (resizingElement) {\n this.store.shouldCaptureIncrement();\n }\n\n if (resizingElement && (0,_element__WEBPACK_IMPORTED_MODULE_16__.isInvisiblySmallElement)(resizingElement)) {\n // update the store snapshot, so that invisible elements are not captured by the store\n this.updateScene({\n elements: this.scene.getElementsIncludingDeleted().filter(el => el.id !== resizingElement.id),\n storeAction: _store__WEBPACK_IMPORTED_MODULE_76__.StoreAction.UPDATE\n });\n } // handle frame membership for resizing frames and/or selected elements\n\n\n if (pointerDownState.resize.isResizing) {\n let nextElements = (0,_frame__WEBPACK_IMPORTED_MODULE_50__.updateFrameMembershipOfSelectedElements)(this.scene.getElementsIncludingDeleted(), this.state, this);\n const selectedFrames = this.scene.getSelectedElements(this.state).filter(element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(element));\n\n for (const frame of selectedFrames) {\n nextElements = (0,_frame__WEBPACK_IMPORTED_MODULE_50__.replaceAllElementsInFrame)(nextElements, (0,_frame__WEBPACK_IMPORTED_MODULE_50__.getElementsInResizingFrame)(this.scene.getElementsIncludingDeleted(), frame, this.state, elementsMap), frame, this);\n }\n\n this.scene.replaceAllElements(nextElements);\n } // Code below handles selection when element(s) weren't\n // drag or added to selection on pointer down phase.\n\n\n const hitElement = pointerDownState.hit.element;\n\n if (((_g = this.state.selectedLinearElement) === null || _g === void 0 ? void 0 : _g.elementId) !== (hitElement === null || hitElement === void 0 ? void 0 : hitElement.id) && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(hitElement)) {\n const selectedELements = this.scene.getSelectedElements(this.state); // set selectedLinearElement when no other element selected except\n // the one we've hit\n\n if (selectedELements.length === 1) {\n this.setState({\n selectedLinearElement: new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(hitElement)\n });\n }\n }\n\n const pointerStart = this.lastPointerDownEvent;\n const pointerEnd = this.lastPointerUpEvent || this.lastPointerMoveEvent;\n\n if ((0,_appState__WEBPACK_IMPORTED_MODULE_10__.isEraserActive)(this.state) && pointerStart && pointerEnd) {\n this.eraserTrail.endPath();\n const draggedDistance = (0,_math__WEBPACK_IMPORTED_MODULE_98__.pointDistance)((0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(pointerStart.clientX, pointerStart.clientY), (0,_math__WEBPACK_IMPORTED_MODULE_98__.point)(pointerEnd.clientX, pointerEnd.clientY));\n\n if (draggedDistance === 0) {\n const scenePointer = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.viewportCoordsToSceneCoords)({\n clientX: pointerEnd.clientX,\n clientY: pointerEnd.clientY\n }, this.state);\n const hitElements = this.getElementsAtPosition(scenePointer.x, scenePointer.y);\n hitElements.forEach(hitElement => this.elementsPendingErasure.add(hitElement.id));\n }\n\n this.eraseElements();\n return;\n } else if (this.elementsPendingErasure.size) {\n this.restoreReadyToEraseElements();\n }\n\n if (hitElement && !pointerDownState.drag.hasOccurred && !pointerDownState.hit.wasAddedToSelection && ( // if we're editing a line, pointerup shouldn't switch selection if\n // box selected\n !this.state.editingLinearElement || !pointerDownState.boxSelection.hasOccurred)) {\n // when inside line editor, shift selects points instead\n if (childEvent.shiftKey && !this.state.editingLinearElement) {\n if (this.state.selectedElementIds[hitElement.id]) {\n if ((0,_groups__WEBPACK_IMPORTED_MODULE_23__.isSelectedViaGroup)(this.state, hitElement)) {\n this.setState(_prevState => {\n const nextSelectedElementIds = Object.assign({}, _prevState.selectedElementIds); // We want to unselect all groups hitElement is part of\n // as well as all elements that are part of the groups\n // hitElement is part of\n\n for (const groupedElement of hitElement.groupIds.flatMap(groupId => (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(this.scene.getNonDeletedElements(), groupId))) {\n delete nextSelectedElementIds[groupedElement.id];\n }\n\n return {\n selectedGroupIds: Object.assign(Object.assign({}, _prevState.selectedElementIds), hitElement.groupIds.map(gId => ({\n [gId]: false\n })).reduce((prev, acc) => Object.assign(Object.assign({}, prev), acc), {})),\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.makeNextSelectedElementIds)(nextSelectedElementIds, _prevState)\n };\n }); // if not dragging a linear element point (outside editor)\n } else if (!((_h = this.state.selectedLinearElement) === null || _h === void 0 ? void 0 : _h.isDragging)) {\n // remove element from selection while\n // keeping prev elements selected\n this.setState(prevState => {\n const newSelectedElementIds = Object.assign({}, prevState.selectedElementIds);\n delete newSelectedElementIds[hitElement.id];\n const newSelectedElements = (0,_scene__WEBPACK_IMPORTED_MODULE_28__.getSelectedElements)(this.scene.getNonDeletedElements(), {\n selectedElementIds: newSelectedElementIds\n });\n return Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n editingGroupId: prevState.editingGroupId,\n selectedElementIds: newSelectedElementIds\n }, this.scene.getNonDeletedElements(), prevState, this)), {\n // set selectedLinearElement only if thats the only element selected\n selectedLinearElement: newSelectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(newSelectedElements[0]) ? new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(newSelectedElements[0]) : prevState.selectedLinearElement\n });\n });\n }\n } else if (hitElement.frameId && this.state.selectedElementIds[hitElement.frameId]) {\n // when hitElement is part of a selected frame, deselect the frame\n // to avoid frame and containing elements selected simultaneously\n this.setState(prevState => {\n var _a, _b;\n\n const nextSelectedElementIds = Object.assign(Object.assign({}, prevState.selectedElementIds), {\n [hitElement.id]: true\n }); // deselect the frame\n\n delete nextSelectedElementIds[hitElement.frameId]; // deselect groups containing the frame\n\n ((_b = (_a = this.scene.getElement(hitElement.frameId)) === null || _a === void 0 ? void 0 : _a.groupIds) !== null && _b !== void 0 ? _b : []).flatMap(gid => (0,_groups__WEBPACK_IMPORTED_MODULE_23__.getElementsInGroup)(this.scene.getNonDeletedElements(), gid)).forEach(element => {\n delete nextSelectedElementIds[element.id];\n });\n return Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n editingGroupId: prevState.editingGroupId,\n selectedElementIds: nextSelectedElementIds\n }, this.scene.getNonDeletedElements(), prevState, this)), {\n showHyperlinkPopup: hitElement.link || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(hitElement) ? \"info\" : false\n });\n });\n } else {\n // add element to selection while keeping prev elements selected\n this.setState(_prevState => ({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.makeNextSelectedElementIds)(Object.assign(Object.assign({}, _prevState.selectedElementIds), {\n [hitElement.id]: true\n }), _prevState)\n }));\n }\n } else {\n this.setState(prevState => {\n var _a;\n\n return Object.assign(Object.assign({}, (0,_groups__WEBPACK_IMPORTED_MODULE_23__.selectGroupsForSelectedElements)({\n editingGroupId: prevState.editingGroupId,\n selectedElementIds: {\n [hitElement.id]: true\n }\n }, this.scene.getNonDeletedElements(), prevState, this)), {\n selectedLinearElement: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement)(hitElement) && // Don't set `selectedLinearElement` if its same as the hitElement, this is mainly to prevent resetting the `hoverPointIndex` to -1.\n // Future we should update the API to take care of setting the correct `hoverPointIndex` when initialized\n ((_a = prevState.selectedLinearElement) === null || _a === void 0 ? void 0 : _a.elementId) !== hitElement.id ? new _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_18__.LinearElementEditor(hitElement) : prevState.selectedLinearElement\n });\n });\n }\n }\n\n if ( // not dragged\n !pointerDownState.drag.hasOccurred && // not resized\n !this.state.isResizing && ( // only hitting the bounding box of the previous hit element\n hitElement && (0,_element_collision__WEBPACK_IMPORTED_MODULE_83__.hitElementBoundingBoxOnly)({\n x: pointerDownState.origin.x,\n y: pointerDownState.origin.y,\n element: hitElement,\n shape: (0,_shapes__WEBPACK_IMPORTED_MODULE_31__.getElementShape)(hitElement, this.scene.getNonDeletedElementsMap()),\n threshold: this.getElementHitThreshold(),\n frameNameBound: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isFrameLikeElement)(hitElement) ? this.frameNameBoundsCache.get(hitElement) : null\n }, elementsMap) || !hitElement && pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements)) {\n if (this.state.editingLinearElement) {\n this.setState({\n editingLinearElement: null\n });\n } else {\n // Deselect selected elements\n this.setState({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.makeNextSelectedElementIds)({}, this.state),\n selectedGroupIds: {},\n editingGroupId: null,\n activeEmbeddable: null\n });\n } // reset cursor\n\n\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.setCursor)(this.interactiveCanvas, _constants__WEBPACK_IMPORTED_MODULE_12__.CURSOR_TYPE.AUTO);\n return;\n }\n\n if (!activeTool.locked && activeTool.type !== \"freedraw\" && newElement) {\n this.setState(prevState => ({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.makeNextSelectedElementIds)(Object.assign(Object.assign({}, prevState.selectedElementIds), {\n [newElement.id]: true\n }), prevState),\n showHyperlinkPopup: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isEmbeddableElement)(newElement) && !newElement.link ? \"editor\" : prevState.showHyperlinkPopup\n }));\n }\n\n if (activeTool.type !== \"selection\" || (0,_scene__WEBPACK_IMPORTED_MODULE_28__.isSomeElementSelected)(this.scene.getNonDeletedElements(), this.state) || !(0,_utils__WEBPACK_IMPORTED_MODULE_34__.isShallowEqual)(this.state.previousSelectedElementIds, this.state.selectedElementIds)) {\n this.store.shouldCaptureIncrement();\n }\n\n if (pointerDownState.drag.hasOccurred || isResizing || isRotating) {\n // We only allow binding via linear elements, specifically via dragging\n // the endpoints (\"start\" or \"end\").\n const linearElements = this.scene.getSelectedElements(this.state).filter(_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isLinearElement);\n (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.bindOrUnbindLinearElements)(linearElements, this.scene.getNonDeletedElementsMap(), this.scene.getNonDeletedElements(), this.scene, (0,_element_binding__WEBPACK_IMPORTED_MODULE_17__.isBindingEnabled)(this.state), (_k = (_j = this.state.selectedLinearElement) === null || _j === void 0 ? void 0 : _j.selectedPointsIndices) !== null && _k !== void 0 ? _k : []);\n }\n\n if (activeTool.type === \"laser\") {\n this.laserTrails.endPath();\n return;\n }\n\n if (!activeTool.locked && activeTool.type !== \"freedraw\") {\n (0,_cursor__WEBPACK_IMPORTED_MODULE_68__.resetCursor)(this.interactiveCanvas);\n this.setState({\n newElement: null,\n suggestedBindings: [],\n activeTool: (0,_utils__WEBPACK_IMPORTED_MODULE_34__.updateActiveTool)(this.state, {\n type: \"selection\"\n })\n });\n } else {\n this.setState({\n newElement: null,\n suggestedBindings: []\n });\n }\n\n if (hitElement && this.lastPointerUpEvent && this.lastPointerDownEvent && this.lastPointerUpEvent.timeStamp - this.lastPointerDownEvent.timeStamp < 300 && gesture.pointers.size <= 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isIframeLikeElement)(hitElement) && this.isIframeLikeElementCenter(hitElement, this.lastPointerUpEvent, pointerDownState.origin.x, pointerDownState.origin.y)) {\n this.handleEmbeddableCenterClick(hitElement);\n }\n });\n } //zsviczian - published on API\n\n\n setSelection(elements) {\n const selectedElementIds = {};\n const selectedGroupIds = {};\n elements.forEach(ele => {\n if (ele.groupIds.length) {\n selectedElementIds[ele.id] = true;\n ele.groupIds.forEach(id => {\n selectedGroupIds[id] = true;\n });\n } // exclude bound text elements as we don't mark them as selected when\n // container is selected unless in group\n else if (!(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_21__.isBoundToContainer)(ele)) {\n selectedElementIds[ele.id] = true;\n }\n });\n this.setState({\n previousSelectedElementIds: this.state.selectedElementIds,\n selectedElementIds,\n selectedGroupIds\n });\n }\n\n clearSelection(hitElement) {\n this.setState(prevState => ({\n selectedElementIds: (0,_scene_selection__WEBPACK_IMPORTED_MODULE_51__.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_51__.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_44__.getContainerCenter)(container, appState, this.scene.getNonDeletedElementsMap());\n\n if (elementCenter) {\n elementCenterX = elementCenter.x;\n elementCenterY = elementCenter.y;\n }\n\n const distanceToCenter = Math.hypot(x - elementCenterX, y - elementCenterY);\n const isSnappedToCenter = distanceToCenter < _constants__WEBPACK_IMPORTED_MODULE_12__.TEXT_TO_CENTER_SNAP_THRESHOLD;\n\n if (isSnappedToCenter) {\n const {\n x: viewportX,\n y: viewportY\n } = (0,_utils__WEBPACK_IMPORTED_MODULE_34__.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/* //zsviczian\nexport const createTestHook = () => {\n if (import.meta.env.MODE === ENV.TEST || import.meta.env.DEV) {\n window.h = window.h || ({} as Window[\"h\"]);\n\n Object.defineProperties(window.h, {\n elements: {\n configurable: true,\n get() {\n return this.app?.scene.getElementsIncludingDeleted();\n },\n set(elements: ExcalidrawElement[]) {\n return this.app?.scene.replaceAllElements(\n syncInvalidIndices(elements),\n );\n },\n },\n scene: {\n configurable: true,\n get() {\n return this.app?.scene;\n },\n },\n });\n }\n};\n\ncreateTestHook();*/\n\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (App);\n\n//# sourceURL=webpack://ExcalidrawLib/./components/App.tsx?");
|
|
907
907
|
|
|
908
908
|
/***/ }),
|
|
909
909
|
|
|
@@ -2553,7 +2553,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
2553
2553
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
2554
2554
|
|
|
2555
2555
|
"use strict";
|
|
2556
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"ACTIVE_THRESHOLD\": () => (/* binding */ ACTIVE_THRESHOLD),\n/* harmony export */ \"ALLOWED_PASTE_MIME_TYPES\": () => (/* binding */ ALLOWED_PASTE_MIME_TYPES),\n/* harmony export */ \"APP_NAME\": () => (/* binding */ APP_NAME),\n/* harmony export */ \"ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO\": () => (/* binding */ ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO),\n/* harmony export */ \"ARROW_LABEL_WIDTH_FRACTION\": () => (/* binding */ ARROW_LABEL_WIDTH_FRACTION),\n/* harmony export */ \"ARROW_TYPE\": () => (/* binding */ ARROW_TYPE),\n/* harmony export */ \"BOUND_TEXT_PADDING\": () => (/* binding */ BOUND_TEXT_PADDING),\n/* harmony export */ \"CANVAS_ONLY_ACTIONS\": () => (/* binding */ CANVAS_ONLY_ACTIONS),\n/* harmony export */ \"CANVAS_SEARCH_TAB\": () => (/* binding */ CANVAS_SEARCH_TAB),\n/* harmony export */ \"CLASSES\": () => (/* binding */ CLASSES),\n/* harmony export */ \"COLOR_CHARCOAL_BLACK\": () => (/* binding */ COLOR_CHARCOAL_BLACK),\n/* harmony export */ \"COLOR_NAMES\": () => (/* binding */ COLOR_NAMES),\n/* harmony export */ \"COLOR_VOICE_CALL\": () => (/* binding */ COLOR_VOICE_CALL),\n/* harmony export */ \"COLOR_WHITE\": () => (/* binding */ COLOR_WHITE),\n/* harmony export */ \"CURSOR_TYPE\": () => (/* binding */ CURSOR_TYPE),\n/* harmony export */ \"DEFAULT_ADAPTIVE_RADIUS\": () => (/* binding */ DEFAULT_ADAPTIVE_RADIUS),\n/* harmony export */ \"DEFAULT_COLLISION_THRESHOLD\": () => (/* binding */ DEFAULT_COLLISION_THRESHOLD),\n/* harmony export */ \"DEFAULT_ELEMENT_PROPS\": () => (/* binding */ DEFAULT_ELEMENT_PROPS),\n/* harmony export */ \"DEFAULT_EXPORT_PADDING\": () => (/* binding */ DEFAULT_EXPORT_PADDING),\n/* harmony export */ \"DEFAULT_FILENAME\": () => (/* binding */ DEFAULT_FILENAME),\n/* harmony export */ \"DEFAULT_FONT_FAMILY\": () => (/* binding */ DEFAULT_FONT_FAMILY),\n/* harmony export */ \"DEFAULT_FONT_SIZE\": () => (/* binding */ DEFAULT_FONT_SIZE),\n/* harmony export */ \"DEFAULT_GRID_SIZE\": () => (/* binding */ DEFAULT_GRID_SIZE),\n/* harmony export */ \"DEFAULT_GRID_STEP\": () => (/* binding */ DEFAULT_GRID_STEP),\n/* harmony export */ \"DEFAULT_LASER_COLOR\": () => (/* binding */ DEFAULT_LASER_COLOR),\n/* harmony export */ \"DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT\": () => (/* binding */ DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT),\n/* harmony export */ \"DEFAULT_PROPORTIONAL_RADIUS\": () => (/* binding */ DEFAULT_PROPORTIONAL_RADIUS),\n/* harmony export */ \"DEFAULT_SIDEBAR\": () => (/* binding */ DEFAULT_SIDEBAR),\n/* harmony export */ \"DEFAULT_TEXT_ALIGN\": () => (/* binding */ DEFAULT_TEXT_ALIGN),\n/* harmony export */ \"DEFAULT_TRANSFORM_HANDLE_SPACING\": () => (/* binding */ DEFAULT_TRANSFORM_HANDLE_SPACING),\n/* harmony export */ \"DEFAULT_UI_OPTIONS\": () => (/* binding */ DEFAULT_UI_OPTIONS),\n/* harmony export */ \"DEFAULT_VERSION\": () => (/* binding */ DEFAULT_VERSION),\n/* harmony export */ \"DEFAULT_VERTICAL_ALIGN\": () => (/* binding */ DEFAULT_VERTICAL_ALIGN),\n/* harmony export */ \"DRAGGING_THRESHOLD\": () => (/* binding */ DRAGGING_THRESHOLD),\n/* harmony export */ \"EDITOR_LS_KEYS\": () => (/* binding */ EDITOR_LS_KEYS),\n/* harmony export */ \"ELEMENT_READY_TO_ERASE_OPACITY\": () => (/* binding */ ELEMENT_READY_TO_ERASE_OPACITY),\n/* harmony export */ \"ELEMENT_SHIFT_TRANSLATE_AMOUNT\": () => (/* binding */ ELEMENT_SHIFT_TRANSLATE_AMOUNT),\n/* harmony export */ \"ELEMENT_TRANSLATE_AMOUNT\": () => (/* binding */ ELEMENT_TRANSLATE_AMOUNT),\n/* harmony export */ \"ENCRYPTION_KEY_BITS\": () => (/* binding */ ENCRYPTION_KEY_BITS),\n/* harmony export */ \"ENV\": () => (/* binding */ ENV),\n/* harmony export */ \"EVENT\": () => (/* binding */ EVENT),\n/* harmony export */ \"EXPORT_DATA_TYPES\": () => (/* binding */ EXPORT_DATA_TYPES),\n/* harmony export */ \"EXPORT_IMAGE_TYPES\": () => (/* binding */ EXPORT_IMAGE_TYPES),\n/* harmony export */ \"EXPORT_SCALES\": () => (/* binding */ EXPORT_SCALES),\n/* harmony export */ \"EXPORT_SOURCE\": () => (/* binding */ EXPORT_SOURCE),\n/* harmony export */ \"FONT_FAMILY\": () => (/* binding */ FONT_FAMILY),\n/* harmony export */ \"FRAME_STYLE\": () => (/* binding */ FRAME_STYLE),\n/* harmony export */ \"HYPERLINK_TOOLTIP_DELAY\": () => (/* binding */ HYPERLINK_TOOLTIP_DELAY),\n/* harmony export */ \"IDLE_THRESHOLD\": () => (/* binding */ IDLE_THRESHOLD),\n/* harmony export */ \"IMAGE_MIME_TYPES\": () => (/* binding */ IMAGE_MIME_TYPES),\n/* harmony export */ \"IMAGE_RENDER_TIMEOUT\": () => (/* binding */ IMAGE_RENDER_TIMEOUT),\n/* harmony export */ \"LIBRARY_DISABLED_TYPES\": () => (/* binding */ LIBRARY_DISABLED_TYPES),\n/* harmony export */ \"LIBRARY_SIDEBAR_TAB\": () => (/* binding */ LIBRARY_SIDEBAR_TAB),\n/* harmony export */ \"LIBRARY_SIDEBAR_WIDTH\": () => (/* binding */ LIBRARY_SIDEBAR_WIDTH),\n/* harmony export */ \"LINE_CONFIRM_THRESHOLD\": () => (/* binding */ LINE_CONFIRM_THRESHOLD),\n/* harmony export */ \"MAX_ALLOWED_FILE_BYTES\": () => (/* binding */ MAX_ALLOWED_FILE_BYTES),\n/* harmony export */ \"MAX_DECIMALS_FOR_SVG_EXPORT\": () => (/* binding */ MAX_DECIMALS_FOR_SVG_EXPORT),\n/* harmony export */ \"MAX_ZOOM\": () => (/* binding */ MAX_ZOOM),\n/* harmony export */ \"MIME_TYPES\": () => (/* binding */ MIME_TYPES),\n/* harmony export */ \"MIN_FONT_SIZE\": () => (/* binding */ MIN_FONT_SIZE),\n/* harmony export */ \"MIN_WIDTH_OR_HEIGHT\": () => (/* binding */ MIN_WIDTH_OR_HEIGHT),\n/* harmony export */ \"MIN_ZOOM\": () => (/* binding */ MIN_ZOOM),\n/* harmony export */ \"MQ_MAX_HEIGHT_LANDSCAPE\": () => (/* binding */ MQ_MAX_HEIGHT_LANDSCAPE),\n/* harmony export */ \"MQ_MAX_WIDTH_LANDSCAPE\": () => (/* binding */ MQ_MAX_WIDTH_LANDSCAPE),\n/* harmony export */ \"MQ_MAX_WIDTH_PORTRAIT\": () => (/* binding */ MQ_MAX_WIDTH_PORTRAIT),\n/* harmony export */ \"MQ_RIGHT_SIDEBAR_MIN_WIDTH\": () => (/* binding */ MQ_RIGHT_SIDEBAR_MIN_WIDTH),\n/* harmony export */ \"POINTER_BUTTON\": () => (/* binding */ POINTER_BUTTON),\n/* harmony export */ \"POINTER_EVENTS\": () => (/* binding */ POINTER_EVENTS),\n/* harmony export */ \"PRECEDING_ELEMENT_KEY\": () => (/* binding */ PRECEDING_ELEMENT_KEY),\n/* harmony export */ \"ROUGHNESS\": () => (/* binding */ ROUGHNESS),\n/* harmony export */ \"ROUNDNESS\": () => (/* binding */ ROUNDNESS),\n/* harmony export */ \"SCROLL_TIMEOUT\": () => (/* binding */ SCROLL_TIMEOUT),\n/* harmony export */ \"SHIFT_LOCKING_ANGLE\": () => (/* binding */ SHIFT_LOCKING_ANGLE),\n/* harmony export */ \"SIDE_RESIZING_THRESHOLD\": () => (/* binding */ SIDE_RESIZING_THRESHOLD),\n/* harmony export */ \"STATS_PANELS\": () => (/* binding */ STATS_PANELS),\n/* harmony export */ \"STROKE_WIDTH\": () => (/* binding */ STROKE_WIDTH),\n/* harmony export */ \"SVG_NS\": () => (/* binding */ SVG_NS),\n/* harmony export */ \"TAP_TWICE_TIMEOUT\": () => (/* binding */ TAP_TWICE_TIMEOUT),\n/* harmony export */ \"TEXT_ALIGN\": () => (/* binding */ TEXT_ALIGN),\n/* harmony export */ \"TEXT_AUTOWRAP_THRESHOLD\": () => (/* binding */ TEXT_AUTOWRAP_THRESHOLD),\n/* harmony export */ \"TEXT_TO_CENTER_SNAP_THRESHOLD\": () => (/* binding */ TEXT_TO_CENTER_SNAP_THRESHOLD),\n/* harmony export */ \"THEME\": () => (/* binding */ THEME),\n/* harmony export */ \"THEME_FILTER\": () => (/* binding */ THEME_FILTER),\n/* harmony export */ \"TITLE_TIMEOUT\": () => (/* binding */ TITLE_TIMEOUT),\n/* harmony export */ \"TOOL_TYPE\": () => (/* binding */ TOOL_TYPE),\n/* harmony export */ \"TOUCH_CTX_MENU_TIMEOUT\": () => (/* binding */ TOUCH_CTX_MENU_TIMEOUT),\n/* harmony export */ \"URL_HASH_KEYS\": () => (/* binding */ URL_HASH_KEYS),\n/* harmony export */ \"URL_QUERY_KEYS\": () => (/* binding */ URL_QUERY_KEYS),\n/* harmony export */ \"VERSIONS\": () => (/* binding */ VERSIONS),\n/* harmony export */ \"VERSION_TIMEOUT\": () => (/* binding */ VERSION_TIMEOUT),\n/* harmony export */ \"VERTICAL_ALIGN\": () => (/* binding */ VERTICAL_ALIGN),\n/* harmony export */ \"WINDOWS_EMOJI_FALLBACK_FONT\": () => (/* binding */ WINDOWS_EMOJI_FALLBACK_FONT),\n/* harmony export */ \"YOUTUBE_STATES\": () => (/* binding */ YOUTUBE_STATES),\n/* harmony export */ \"ZOOM_STEP\": () => (/* binding */ ZOOM_STEP),\n/* harmony export */ \"isAndroid\": () => (/* binding */ isAndroid),\n/* harmony export */ \"isBrave\": () => (/* binding */ isBrave),\n/* harmony export */ \"isChrome\": () => (/* binding */ isChrome),\n/* harmony export */ \"isDarwin\": () => (/* binding */ isDarwin),\n/* harmony export */ \"isFirefox\": () => (/* binding */ isFirefox),\n/* harmony export */ \"isIOS\": () => (/* binding */ isIOS),\n/* harmony export */ \"isSafari\": () => (/* binding */ isSafari),\n/* harmony export */ \"isWindows\": () => (/* binding */ isWindows),\n/* harmony export */ \"supportsResizeObserver\": () => (/* binding */ supportsResizeObserver)\n/* harmony export */ });\n/* harmony import */ var _css_variables_module_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./css/variables.module.scss */ \"./css/variables.module.scss\");\n/* harmony import */ var _colors__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./colors */ \"./colors.ts\");\n\n\nconst isDarwin = /Mac|iPod|iPhone|iPad/.test(navigator.platform);\nconst isWindows = /^Win/.test(navigator.platform);\nconst isAndroid = /\\b(android)\\b/i.test(navigator.userAgent);\nconst isFirefox = \"netscape\" in window && navigator.userAgent.indexOf(\"rv:\") > 1 && navigator.userAgent.indexOf(\"Gecko\") > 1;\nconst isChrome = navigator.userAgent.indexOf(\"Chrome\") !== -1;\nconst isSafari = !isChrome && navigator.userAgent.indexOf(\"Safari\") !== -1;\nconst isIOS = /iPad|iPhone/.test(navigator.platform) || // iPadOS 13+\nnavigator.userAgent.includes(\"Mac\") && \"ontouchend\" in document; // keeping function so it can be mocked in test\n\nconst isBrave = () => {\n var _a, _b;\n\n return ((_b = (_a = navigator.brave) === null || _a === void 0 ? void 0 : _a.isBrave) === null || _b === void 0 ? void 0 : _b.name) === \"isBrave\";\n};\nconst supportsResizeObserver = typeof window !== \"undefined\" && \"ResizeObserver\" in window;\nconst APP_NAME = \"Excalidraw\"; // distance when creating text before it's considered `autoResize: false`\n// we're using higher threshold so that clicks that end up being drags\n// don't unintentionally create text elements that are wrapped to a few chars\n// (happens a lot with fast clicks with the text tool)\n\nconst TEXT_AUTOWRAP_THRESHOLD = 36; // px\n\nconst DRAGGING_THRESHOLD = 10; // px\n\nconst LINE_CONFIRM_THRESHOLD = 8; // px\n\nconst ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;\nconst ELEMENT_TRANSLATE_AMOUNT = 1;\nconst TEXT_TO_CENTER_SNAP_THRESHOLD = 30;\nconst SHIFT_LOCKING_ANGLE = Math.PI / 12;\nconst DEFAULT_LASER_COLOR = \"red\";\nconst CURSOR_TYPE = {\n TEXT: \"text\",\n CROSSHAIR: \"crosshair\",\n GRABBING: \"grabbing\",\n GRAB: \"grab\",\n POINTER: \"pointer\",\n MOVE: \"move\",\n AUTO: \"\"\n};\nconst POINTER_BUTTON = {\n MAIN: 0,\n WHEEL: 1,\n SECONDARY: 2,\n TOUCH: -1,\n ERASER: 5\n};\nconst POINTER_EVENTS = {\n enabled: \"all\",\n disabled: \"none\",\n // asserted as any so it can be freely assigned to React Element\n // \"pointerEnvets\" CSS prop\n inheritFromUI: \"var(--ui-pointerEvents)\"\n};\nvar EVENT;\n\n(function (EVENT) {\n EVENT[\"COPY\"] = \"copy\";\n EVENT[\"PASTE\"] = \"paste\";\n EVENT[\"CUT\"] = \"cut\";\n EVENT[\"KEYDOWN\"] = \"keydown\";\n EVENT[\"KEYUP\"] = \"keyup\";\n EVENT[\"MOUSE_MOVE\"] = \"mousemove\";\n EVENT[\"RESIZE\"] = \"resize\";\n EVENT[\"UNLOAD\"] = \"unload\";\n EVENT[\"FOCUS\"] = \"focus\";\n EVENT[\"BLUR\"] = \"blur\";\n EVENT[\"DRAG_OVER\"] = \"dragover\";\n EVENT[\"DROP\"] = \"drop\";\n EVENT[\"GESTURE_END\"] = \"gestureend\";\n EVENT[\"BEFORE_UNLOAD\"] = \"beforeunload\";\n EVENT[\"GESTURE_START\"] = \"gesturestart\";\n EVENT[\"GESTURE_CHANGE\"] = \"gesturechange\";\n EVENT[\"POINTER_MOVE\"] = \"pointermove\";\n EVENT[\"POINTER_DOWN\"] = \"pointerdown\";\n EVENT[\"POINTER_UP\"] = \"pointerup\";\n EVENT[\"STATE_CHANGE\"] = \"statechange\";\n EVENT[\"WHEEL\"] = \"wheel\";\n EVENT[\"TOUCH_START\"] = \"touchstart\";\n EVENT[\"TOUCH_END\"] = \"touchend\";\n EVENT[\"HASHCHANGE\"] = \"hashchange\";\n EVENT[\"VISIBILITY_CHANGE\"] = \"visibilitychange\";\n EVENT[\"SCROLL\"] = \"scroll\"; // custom events\n\n EVENT[\"EXCALIDRAW_LINK\"] = \"excalidraw-link\";\n EVENT[\"MENU_ITEM_SELECT\"] = \"menu.itemSelect\";\n EVENT[\"MESSAGE\"] = \"message\";\n EVENT[\"FULLSCREENCHANGE\"] = \"fullscreenchange\";\n})(EVENT || (EVENT = {}));\n\nconst YOUTUBE_STATES = {\n UNSTARTED: -1,\n ENDED: 0,\n PLAYING: 1,\n PAUSED: 2,\n BUFFERING: 3,\n CUED: 5\n};\nconst ENV = {\n TEST: \"test\",\n DEVELOPMENT: \"development\"\n};\nconst CLASSES = {\n SHAPE_ACTIONS_MENU: \"App-menu__left\",\n SHAPE_ACTIONS_MOBILE_MENU: \"App-mobile-menu\",\n MOBILE_TOOLBAR: \"App-toolbar-content\",\n ZOOM_ACTIONS: \"zoom-actions\",\n SEARCH_MENU_INPUT_WRAPPER: \"layer-ui__search-inputWrapper\"\n};\n/**\n * // TODO: shouldn't be really `const`, likely neither have integers as values, due to value for the custom fonts, which should likely be some hash.\n *\n * Let's think this through and consider:\n * - https://developer.mozilla.org/en-US/docs/Web/CSS/generic-family\n * - https://drafts.csswg.org/css-fonts-4/#font-family-prop\n * - https://learn.microsoft.com/en-us/typography/opentype/spec/ibmfc\n */\n\nconst FONT_FAMILY = {\n Virgil: 1,\n Helvetica: 2,\n Cascadia: 3,\n \"Local Font\": 4,\n // leave 4 unused as it was historically used for Assistant (which we don't use anymore) or custom font (Obsidian)\n Excalifont: 5,\n Nunito: 6,\n \"Lilita One\": 7,\n \"Comic Shanns\": 8,\n \"Liberation Sans\": 9\n};\nconst THEME = {\n LIGHT: \"light\",\n DARK: \"dark\"\n};\nconst FRAME_STYLE = {\n strokeColor: \"#bbb\",\n strokeWidth: 2,\n strokeStyle: \"solid\",\n fillStyle: \"solid\",\n roughness: 0,\n roundness: null,\n backgroundColor: \"transparent\",\n radius: 8,\n nameOffsetY: 3,\n nameColorLightTheme: \"#999999\",\n nameColorDarkTheme: \"#7a7a7a\",\n nameFontSize: 14,\n nameLineHeight: 1.25\n};\nconst WINDOWS_EMOJI_FALLBACK_FONT = \"Segoe UI Emoji\";\nconst MIN_FONT_SIZE = 1;\nconst DEFAULT_FONT_SIZE = 20;\nconst DEFAULT_FONT_FAMILY = FONT_FAMILY.Excalifont;\nconst DEFAULT_TEXT_ALIGN = \"left\";\nconst DEFAULT_VERTICAL_ALIGN = \"top\";\nconst DEFAULT_VERSION = \"{version}\";\nconst DEFAULT_TRANSFORM_HANDLE_SPACING = 2;\nconst SIDE_RESIZING_THRESHOLD = 2 * DEFAULT_TRANSFORM_HANDLE_SPACING; // a small epsilon to make side resizing always take precedence\n// (avoids an increase in renders and changes to tests)\n\nconst EPSILON = 0.00001;\nconst DEFAULT_COLLISION_THRESHOLD = 2 * SIDE_RESIZING_THRESHOLD - EPSILON;\nconst COLOR_WHITE = \"#ffffff\";\nconst COLOR_CHARCOAL_BLACK = \"#1e1e1e\"; // keep this in sync with CSS\n\nconst COLOR_VOICE_CALL = \"#a2f1a6\";\nconst CANVAS_ONLY_ACTIONS = [\"selectAll\"];\nconst DEFAULT_GRID_SIZE = 20;\nconst DEFAULT_GRID_STEP = 5;\nconst IMAGE_MIME_TYPES = {\n svg: \"image/svg+xml\",\n png: \"image/png\",\n jpg: \"image/jpeg\",\n gif: \"image/gif\",\n webp: \"image/webp\",\n bmp: \"image/bmp\",\n ico: \"image/x-icon\",\n avif: \"image/avif\",\n jfif: \"image/jfif\"\n};\nconst ALLOWED_PASTE_MIME_TYPES = [\"text/plain\", \"text/html\"];\nconst MIME_TYPES = Object.assign({\n json: \"application/json\",\n // excalidraw data\n excalidraw: \"application/vnd.excalidraw+json\",\n excalidrawlib: \"application/vnd.excalidrawlib+json\",\n // image-encoded excalidraw data\n \"excalidraw.svg\": \"image/svg+xml\",\n \"excalidraw.png\": \"image/png\",\n // binary\n binary: \"application/octet-stream\"\n}, IMAGE_MIME_TYPES);\nconst EXPORT_IMAGE_TYPES = {\n png: \"png\",\n svg: \"svg\",\n clipboard: \"clipboard\"\n};\nconst EXPORT_DATA_TYPES = {\n excalidraw: \"excalidraw\",\n excalidrawClipboard: \"excalidraw/clipboard\",\n excalidrawLibrary: \"excalidrawlib\",\n excalidrawClipboardWithAPI: \"excalidraw-api/clipboard\"\n};\nconst EXPORT_SOURCE = window.EXCALIDRAW_EXPORT_SOURCE || window.location.origin; // time in milliseconds\n\nconst IMAGE_RENDER_TIMEOUT = 500;\nconst TAP_TWICE_TIMEOUT = 300;\nconst TOUCH_CTX_MENU_TIMEOUT = 500;\nconst TITLE_TIMEOUT = 10000;\nconst VERSION_TIMEOUT = 30000;\nconst SCROLL_TIMEOUT = 100;\nconst ZOOM_STEP = 0.05; //zsviczian\n\nconst MIN_ZOOM = 0.1;\nconst MAX_ZOOM = 30;\nconst HYPERLINK_TOOLTIP_DELAY = 300; // Report a user inactive after IDLE_THRESHOLD milliseconds\n\nconst IDLE_THRESHOLD = 60000; // Report a user active each ACTIVE_THRESHOLD milliseconds\n\nconst ACTIVE_THRESHOLD = 3000;\nconst THEME_FILTER = _css_variables_module_scss__WEBPACK_IMPORTED_MODULE_0__[\"default\"].themeFilter;\nconst URL_QUERY_KEYS = {\n addLibrary: \"addLibrary\"\n};\nconst URL_HASH_KEYS = {\n addLibrary: \"addLibrary\"\n};\nconst DEFAULT_UI_OPTIONS = {\n canvasActions: {\n changeViewBackgroundColor: true,\n clearCanvas: true,\n export: {\n saveFileToDisk: true\n },\n loadScene: true,\n saveToActiveFile: true,\n toggleTheme: null,\n saveAsImage: true\n },\n tools: {\n image: true\n }\n}; // breakpoints\n// -----------------------------------------------------------------------------\n// md screen\n\nconst MQ_MAX_WIDTH_PORTRAIT = 730;\nconst MQ_MAX_WIDTH_LANDSCAPE = 1000;\nconst MQ_MAX_HEIGHT_LANDSCAPE = 500; // sidebar\n\nconst MQ_RIGHT_SIDEBAR_MIN_WIDTH = 1229; // -----------------------------------------------------------------------------\n\nconst LIBRARY_SIDEBAR_WIDTH = parseInt(_css_variables_module_scss__WEBPACK_IMPORTED_MODULE_0__[\"default\"].rightSidebarWidth);\nconst MAX_DECIMALS_FOR_SVG_EXPORT = 2;\nconst EXPORT_SCALES = [1, 2, 3];\nconst DEFAULT_EXPORT_PADDING = 10; // px\n\nconst DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT = 1440;\nconst MAX_ALLOWED_FILE_BYTES = 20 * 1024 * 1024;\nconst SVG_NS = \"http://www.w3.org/2000/svg\";\nconst ENCRYPTION_KEY_BITS = 128;\nconst VERSIONS = {\n excalidraw: 2,\n excalidrawLibrary: 2\n};\nconst BOUND_TEXT_PADDING = 5;\nconst ARROW_LABEL_WIDTH_FRACTION = 0.7;\nconst ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO = 11;\nconst VERTICAL_ALIGN = {\n TOP: \"top\",\n MIDDLE: \"middle\",\n BOTTOM: \"bottom\"\n};\nconst TEXT_ALIGN = {\n LEFT: \"left\",\n CENTER: \"center\",\n RIGHT: \"right\"\n};\nconst ELEMENT_READY_TO_ERASE_OPACITY = 20; // Radius represented as 25% of element's largest side (width/height).\n// Used for LEGACY and PROPORTIONAL_RADIUS algorithms, or when the element is\n// below the cutoff size.\n\nconst DEFAULT_PROPORTIONAL_RADIUS = 0.25; // Fixed radius for the ADAPTIVE_RADIUS algorithm. In pixels.\n\nconst DEFAULT_ADAPTIVE_RADIUS = 32; // roundness type (algorithm)\n\nconst ROUNDNESS = {\n // Used for legacy rounding (rectangles), which currently works the same\n // as PROPORTIONAL_RADIUS, but we need to differentiate for UI purposes and\n // forwards-compat.\n LEGACY: 1,\n // Used for linear elements & diamonds\n PROPORTIONAL_RADIUS: 2,\n // Current default algorithm for rectangles, using fixed pixel radius.\n // It's working similarly to a regular border-radius, but attemps to make\n // radius visually similar across differnt element sizes, especially\n // very large and very small elements.\n //\n // NOTE right now we don't allow configuration and use a constant radius\n // (see DEFAULT_ADAPTIVE_RADIUS constant)\n ADAPTIVE_RADIUS: 3\n};\n/** key containt id of precedeing elemnt id we use in reconciliation during\n * collaboration */\n\nconst PRECEDING_ELEMENT_KEY = \"__precedingElement__\"; //zsviczian\n\nconst COLOR_NAMES = {\n aliceblue: \"#f0f8ff\",\n antiquewhite: \"#faebd7\",\n aqua: \"#00ffff\",\n aquamarine: \"#7fffd4\",\n azure: \"#f0ffff\",\n beige: \"#f5f5dc\",\n bisque: \"#ffe4c4\",\n black: \"#000000\",\n blanchedalmond: \"#ffebcd\",\n blue: \"#0000ff\",\n blueviolet: \"#8a2be2\",\n brown: \"#a52a2a\",\n burlywood: \"#deb887\",\n cadetblue: \"#5f9ea0\",\n chartreuse: \"#7fff00\",\n chocolate: \"#d2691e\",\n coral: \"#ff7f50\",\n cornflowerblue: \"#6495ed\",\n cornsilk: \"#fff8dc\",\n crimson: \"#dc143c\",\n cyan: \"#00ffff\",\n darkblue: \"#00008b\",\n darkcyan: \"#008b8b\",\n darkgoldenrod: \"#b8860b\",\n darkgray: \"#a9a9a9\",\n darkgreen: \"#006400\",\n darkkhaki: \"#bdb76b\",\n darkmagenta: \"#8b008b\",\n darkolivegreen: \"#556b2f\",\n darkorange: \"#ff8c00\",\n darkorchid: \"#9932cc\",\n darkred: \"#8b0000\",\n darksalmon: \"#e9967a\",\n darkseagreen: \"#8fbc8f\",\n darkslateblue: \"#483d8b\",\n darkslategray: \"#2f4f4f\",\n darkturquoise: \"#00ced1\",\n darkviolet: \"#9400d3\",\n deeppink: \"#ff1493\",\n deepskyblue: \"#00bfff\",\n dimgray: \"#696969\",\n dodgerblue: \"#1e90ff\",\n firebrick: \"#b22222\",\n floralwhite: \"#fffaf0\",\n forestgreen: \"#228b22\",\n fuchsia: \"#ff00ff\",\n gainsboro: \"#dcdcdc\",\n ghostwhite: \"#f8f8ff\",\n gold: \"#ffd700\",\n goldenrod: \"#daa520\",\n gray: \"#808080\",\n green: \"#008000\",\n greenyellow: \"#adff2f\",\n honeydew: \"#f0fff0\",\n hotpink: \"#ff69b4\",\n indianred: \"#cd5c5c\",\n indigo: \"#4b0082\",\n ivory: \"#fffff0\",\n khaki: \"#f0e68c\",\n lavender: \"#e6e6fa\",\n lavenderblush: \"#fff0f5\",\n lawngreen: \"#7cfc00\",\n lemonchiffon: \"#fffacd\",\n lightblue: \"#add8e6\",\n lightcoral: \"#f08080\",\n lightcyan: \"#e0ffff\",\n lightgoldenrodyellow: \"#fafad2\",\n lightgrey: \"#d3d3d3\",\n lightgreen: \"#90ee90\",\n lightpink: \"#ffb6c1\",\n lightsalmon: \"#ffa07a\",\n lightseagreen: \"#20b2aa\",\n lightskyblue: \"#87cefa\",\n lightslategray: \"#778899\",\n lightsteelblue: \"#b0c4de\",\n lightyellow: \"#ffffe0\",\n lime: \"#00ff00\",\n limegreen: \"#32cd32\",\n linen: \"#faf0e6\",\n magenta: \"#ff00ff\",\n maroon: \"#800000\",\n mediumaquamarine: \"#66cdaa\",\n mediumblue: \"#0000cd\",\n mediumorchid: \"#ba55d3\",\n mediumpurple: \"#9370d8\",\n mediumseagreen: \"#3cb371\",\n mediumslateblue: \"#7b68ee\",\n mediumspringgreen: \"#00fa9a\",\n mediumturquoise: \"#48d1cc\",\n mediumvioletred: \"#c71585\",\n midnightblue: \"#191970\",\n mintcream: \"#f5fffa\",\n mistyrose: \"#ffe4e1\",\n moccasin: \"#ffe4b5\",\n navajowhite: \"#ffdead\",\n navy: \"#000080\",\n oldlace: \"#fdf5e6\",\n olive: \"#808000\",\n olivedrab: \"#6b8e23\",\n orange: \"#ffa500\",\n orangered: \"#ff4500\",\n orchid: \"#da70d6\",\n palegoldenrod: \"#eee8aa\",\n palegreen: \"#98fb98\",\n paleturquoise: \"#afeeee\",\n palevioletred: \"#d87093\",\n papayawhip: \"#ffefd5\",\n peachpuff: \"#ffdab9\",\n peru: \"#cd853f\",\n pink: \"#ffc0cb\",\n plum: \"#dda0dd\",\n powderblue: \"#b0e0e6\",\n purple: \"#800080\",\n rebeccapurple: \"#663399\",\n red: \"#ff0000\",\n rosybrown: \"#bc8f8f\",\n royalblue: \"#4169e1\",\n saddlebrown: \"#8b4513\",\n salmon: \"#fa8072\",\n sandybrown: \"#f4a460\",\n seagreen: \"#2e8b57\",\n seashell: \"#fff5ee\",\n sienna: \"#a0522d\",\n silver: \"#c0c0c0\",\n skyblue: \"#87ceeb\",\n slateblue: \"#6a5acd\",\n slategray: \"#708090\",\n snow: \"#fffafa\",\n springgreen: \"#00ff7f\",\n steelblue: \"#4682b4\",\n tan: \"#d2b48c\",\n teal: \"#008080\",\n thistle: \"#d8bfd8\",\n tomato: \"#ff6347\",\n turquoise: \"#40e0d0\",\n violet: \"#ee82ee\",\n wheat: \"#f5deb3\",\n white: \"#ffffff\",\n whitesmoke: \"#f5f5f5\",\n yellow: \"#ffff00\",\n yellowgreen: \"#9acd32\"\n};\nconst ROUGHNESS = {\n architect: 0,\n artist: 1,\n cartoonist: 2\n};\nconst STROKE_WIDTH = {\n extraThin: 0.5,\n thin: 1,\n bold: 2,\n extraBold: 4\n};\nconst DEFAULT_ELEMENT_PROPS = {\n strokeColor: _colors__WEBPACK_IMPORTED_MODULE_1__.COLOR_PALETTE.black,\n backgroundColor: _colors__WEBPACK_IMPORTED_MODULE_1__.COLOR_PALETTE.transparent,\n fillStyle: \"solid\",\n strokeWidth: 2,\n strokeStyle: \"solid\",\n roughness: ROUGHNESS.artist,\n opacity: 100,\n locked: false\n};\nconst LIBRARY_SIDEBAR_TAB = \"library\";\nconst CANVAS_SEARCH_TAB = \"search\";\nconst DEFAULT_SIDEBAR = {\n name: \"default\",\n defaultTab: LIBRARY_SIDEBAR_TAB\n};\nconst LIBRARY_DISABLED_TYPES = new Set([\"iframe\", \"embeddable\", \"image\"]); // use these constants to easily identify reference sites\n\nconst TOOL_TYPE = {\n selection: \"selection\",\n rectangle: \"rectangle\",\n diamond: \"diamond\",\n ellipse: \"ellipse\",\n arrow: \"arrow\",\n line: \"line\",\n freedraw: \"freedraw\",\n text: \"text\",\n image: \"image\",\n eraser: \"eraser\",\n hand: \"hand\",\n frame: \"frame\",\n magicframe: \"magicframe\",\n embeddable: \"embeddable\",\n laser: \"laser\"\n};\nconst EDITOR_LS_KEYS = {\n OAI_API_KEY: \"excalidraw-oai-api-key\",\n // legacy naming (non)scheme\n MERMAID_TO_EXCALIDRAW: \"mermaid-to-excalidraw\",\n PUBLISH_LIBRARY: \"publish-library-data\"\n};\n/**\n * not translated as this is used only in public, stateless API as default value\n * where filename is optional and we can't retrieve name from app state\n */\n\nconst DEFAULT_FILENAME = \"Untitled\";\nconst STATS_PANELS = {\n generalStats: 1,\n elementProperties: 2\n};\nconst MIN_WIDTH_OR_HEIGHT = 1;\nconst ARROW_TYPE = {\n sharp: \"sharp\",\n round: \"round\",\n elbow: \"elbow\"\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./constants.ts?");
|
|
2556
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"ACTIVE_THRESHOLD\": () => (/* binding */ ACTIVE_THRESHOLD),\n/* harmony export */ \"ALLOWED_PASTE_MIME_TYPES\": () => (/* binding */ ALLOWED_PASTE_MIME_TYPES),\n/* harmony export */ \"APP_NAME\": () => (/* binding */ APP_NAME),\n/* harmony export */ \"ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO\": () => (/* binding */ ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO),\n/* harmony export */ \"ARROW_LABEL_WIDTH_FRACTION\": () => (/* binding */ ARROW_LABEL_WIDTH_FRACTION),\n/* harmony export */ \"ARROW_TYPE\": () => (/* binding */ ARROW_TYPE),\n/* harmony export */ \"BOUND_TEXT_PADDING\": () => (/* binding */ BOUND_TEXT_PADDING),\n/* harmony export */ \"CANVAS_ONLY_ACTIONS\": () => (/* binding */ CANVAS_ONLY_ACTIONS),\n/* harmony export */ \"CANVAS_SEARCH_TAB\": () => (/* binding */ CANVAS_SEARCH_TAB),\n/* harmony export */ \"CLASSES\": () => (/* binding */ CLASSES),\n/* harmony export */ \"COLOR_CHARCOAL_BLACK\": () => (/* binding */ COLOR_CHARCOAL_BLACK),\n/* harmony export */ \"COLOR_NAMES\": () => (/* binding */ COLOR_NAMES),\n/* harmony export */ \"COLOR_VOICE_CALL\": () => (/* binding */ COLOR_VOICE_CALL),\n/* harmony export */ \"COLOR_WHITE\": () => (/* binding */ COLOR_WHITE),\n/* harmony export */ \"CURSOR_TYPE\": () => (/* binding */ CURSOR_TYPE),\n/* harmony export */ \"DEFAULT_ADAPTIVE_RADIUS\": () => (/* binding */ DEFAULT_ADAPTIVE_RADIUS),\n/* harmony export */ \"DEFAULT_COLLISION_THRESHOLD\": () => (/* binding */ DEFAULT_COLLISION_THRESHOLD),\n/* harmony export */ \"DEFAULT_ELEMENT_PROPS\": () => (/* binding */ DEFAULT_ELEMENT_PROPS),\n/* harmony export */ \"DEFAULT_EXPORT_PADDING\": () => (/* binding */ DEFAULT_EXPORT_PADDING),\n/* harmony export */ \"DEFAULT_FILENAME\": () => (/* binding */ DEFAULT_FILENAME),\n/* harmony export */ \"DEFAULT_FONT_FAMILY\": () => (/* binding */ DEFAULT_FONT_FAMILY),\n/* harmony export */ \"DEFAULT_FONT_SIZE\": () => (/* binding */ DEFAULT_FONT_SIZE),\n/* harmony export */ \"DEFAULT_GRID_SIZE\": () => (/* binding */ DEFAULT_GRID_SIZE),\n/* harmony export */ \"DEFAULT_GRID_STEP\": () => (/* binding */ DEFAULT_GRID_STEP),\n/* harmony export */ \"DEFAULT_LASER_COLOR\": () => (/* binding */ DEFAULT_LASER_COLOR),\n/* harmony export */ \"DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT\": () => (/* binding */ DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT),\n/* harmony export */ \"DEFAULT_PROPORTIONAL_RADIUS\": () => (/* binding */ DEFAULT_PROPORTIONAL_RADIUS),\n/* harmony export */ \"DEFAULT_SIDEBAR\": () => (/* binding */ DEFAULT_SIDEBAR),\n/* harmony export */ \"DEFAULT_TEXT_ALIGN\": () => (/* binding */ DEFAULT_TEXT_ALIGN),\n/* harmony export */ \"DEFAULT_TRANSFORM_HANDLE_SPACING\": () => (/* binding */ DEFAULT_TRANSFORM_HANDLE_SPACING),\n/* harmony export */ \"DEFAULT_UI_OPTIONS\": () => (/* binding */ DEFAULT_UI_OPTIONS),\n/* harmony export */ \"DEFAULT_VERSION\": () => (/* binding */ DEFAULT_VERSION),\n/* harmony export */ \"DEFAULT_VERTICAL_ALIGN\": () => (/* binding */ DEFAULT_VERTICAL_ALIGN),\n/* harmony export */ \"DRAGGING_THRESHOLD\": () => (/* binding */ DRAGGING_THRESHOLD),\n/* harmony export */ \"EDITOR_LS_KEYS\": () => (/* binding */ EDITOR_LS_KEYS),\n/* harmony export */ \"ELEMENT_READY_TO_ERASE_OPACITY\": () => (/* binding */ ELEMENT_READY_TO_ERASE_OPACITY),\n/* harmony export */ \"ELEMENT_SHIFT_TRANSLATE_AMOUNT\": () => (/* binding */ ELEMENT_SHIFT_TRANSLATE_AMOUNT),\n/* harmony export */ \"ELEMENT_TRANSLATE_AMOUNT\": () => (/* binding */ ELEMENT_TRANSLATE_AMOUNT),\n/* harmony export */ \"ENCRYPTION_KEY_BITS\": () => (/* binding */ ENCRYPTION_KEY_BITS),\n/* harmony export */ \"ENV\": () => (/* binding */ ENV),\n/* harmony export */ \"EVENT\": () => (/* binding */ EVENT),\n/* harmony export */ \"EXPORT_DATA_TYPES\": () => (/* binding */ EXPORT_DATA_TYPES),\n/* harmony export */ \"EXPORT_IMAGE_TYPES\": () => (/* binding */ EXPORT_IMAGE_TYPES),\n/* harmony export */ \"EXPORT_SCALES\": () => (/* binding */ EXPORT_SCALES),\n/* harmony export */ \"EXPORT_SOURCE\": () => (/* binding */ EXPORT_SOURCE),\n/* harmony export */ \"FONT_FAMILY\": () => (/* binding */ FONT_FAMILY),\n/* harmony export */ \"FRAME_STYLE\": () => (/* binding */ FRAME_STYLE),\n/* harmony export */ \"HYPERLINK_TOOLTIP_DELAY\": () => (/* binding */ HYPERLINK_TOOLTIP_DELAY),\n/* harmony export */ \"IDLE_THRESHOLD\": () => (/* binding */ IDLE_THRESHOLD),\n/* harmony export */ \"IMAGE_MIME_TYPES\": () => (/* binding */ IMAGE_MIME_TYPES),\n/* harmony export */ \"IMAGE_RENDER_TIMEOUT\": () => (/* binding */ IMAGE_RENDER_TIMEOUT),\n/* harmony export */ \"LIBRARY_DISABLED_TYPES\": () => (/* binding */ LIBRARY_DISABLED_TYPES),\n/* harmony export */ \"LIBRARY_SIDEBAR_TAB\": () => (/* binding */ LIBRARY_SIDEBAR_TAB),\n/* harmony export */ \"LIBRARY_SIDEBAR_WIDTH\": () => (/* binding */ LIBRARY_SIDEBAR_WIDTH),\n/* harmony export */ \"LINE_CONFIRM_THRESHOLD\": () => (/* binding */ LINE_CONFIRM_THRESHOLD),\n/* harmony export */ \"MAX_ALLOWED_FILE_BYTES\": () => (/* binding */ MAX_ALLOWED_FILE_BYTES),\n/* harmony export */ \"MAX_DECIMALS_FOR_SVG_EXPORT\": () => (/* binding */ MAX_DECIMALS_FOR_SVG_EXPORT),\n/* harmony export */ \"MAX_ZOOM\": () => (/* binding */ MAX_ZOOM),\n/* harmony export */ \"MIME_TYPES\": () => (/* binding */ MIME_TYPES),\n/* harmony export */ \"MIN_FONT_SIZE\": () => (/* binding */ MIN_FONT_SIZE),\n/* harmony export */ \"MIN_WIDTH_OR_HEIGHT\": () => (/* binding */ MIN_WIDTH_OR_HEIGHT),\n/* harmony export */ \"MIN_ZOOM\": () => (/* binding */ MIN_ZOOM),\n/* harmony export */ \"MQ_MAX_HEIGHT_LANDSCAPE\": () => (/* binding */ MQ_MAX_HEIGHT_LANDSCAPE),\n/* harmony export */ \"MQ_MAX_WIDTH_LANDSCAPE\": () => (/* binding */ MQ_MAX_WIDTH_LANDSCAPE),\n/* harmony export */ \"MQ_MAX_WIDTH_PORTRAIT\": () => (/* binding */ MQ_MAX_WIDTH_PORTRAIT),\n/* harmony export */ \"MQ_RIGHT_SIDEBAR_MIN_WIDTH\": () => (/* binding */ MQ_RIGHT_SIDEBAR_MIN_WIDTH),\n/* harmony export */ \"POINTER_BUTTON\": () => (/* binding */ POINTER_BUTTON),\n/* harmony export */ \"POINTER_EVENTS\": () => (/* binding */ POINTER_EVENTS),\n/* harmony export */ \"PRECEDING_ELEMENT_KEY\": () => (/* binding */ PRECEDING_ELEMENT_KEY),\n/* harmony export */ \"ROUGHNESS\": () => (/* binding */ ROUGHNESS),\n/* harmony export */ \"ROUNDNESS\": () => (/* binding */ ROUNDNESS),\n/* harmony export */ \"SCROLL_TIMEOUT\": () => (/* binding */ SCROLL_TIMEOUT),\n/* harmony export */ \"SHIFT_LOCKING_ANGLE\": () => (/* binding */ SHIFT_LOCKING_ANGLE),\n/* harmony export */ \"SIDE_RESIZING_THRESHOLD\": () => (/* binding */ SIDE_RESIZING_THRESHOLD),\n/* harmony export */ \"STATS_PANELS\": () => (/* binding */ STATS_PANELS),\n/* harmony export */ \"STROKE_WIDTH\": () => (/* binding */ STROKE_WIDTH),\n/* harmony export */ \"SVG_NS\": () => (/* binding */ SVG_NS),\n/* harmony export */ \"TAP_TWICE_TIMEOUT\": () => (/* binding */ TAP_TWICE_TIMEOUT),\n/* harmony export */ \"TEXT_ALIGN\": () => (/* binding */ TEXT_ALIGN),\n/* harmony export */ \"TEXT_AUTOWRAP_THRESHOLD\": () => (/* binding */ TEXT_AUTOWRAP_THRESHOLD),\n/* harmony export */ \"TEXT_TO_CENTER_SNAP_THRESHOLD\": () => (/* binding */ TEXT_TO_CENTER_SNAP_THRESHOLD),\n/* harmony export */ \"THEME\": () => (/* binding */ THEME),\n/* harmony export */ \"THEME_FILTER\": () => (/* binding */ THEME_FILTER),\n/* harmony export */ \"TITLE_TIMEOUT\": () => (/* binding */ TITLE_TIMEOUT),\n/* harmony export */ \"TOOL_TYPE\": () => (/* binding */ TOOL_TYPE),\n/* harmony export */ \"TOUCH_CTX_MENU_TIMEOUT\": () => (/* binding */ TOUCH_CTX_MENU_TIMEOUT),\n/* harmony export */ \"URL_HASH_KEYS\": () => (/* binding */ URL_HASH_KEYS),\n/* harmony export */ \"URL_QUERY_KEYS\": () => (/* binding */ URL_QUERY_KEYS),\n/* harmony export */ \"VERSIONS\": () => (/* binding */ VERSIONS),\n/* harmony export */ \"VERSION_TIMEOUT\": () => (/* binding */ VERSION_TIMEOUT),\n/* harmony export */ \"VERTICAL_ALIGN\": () => (/* binding */ VERTICAL_ALIGN),\n/* harmony export */ \"WINDOWS_EMOJI_FALLBACK_FONT\": () => (/* binding */ WINDOWS_EMOJI_FALLBACK_FONT),\n/* harmony export */ \"YOUTUBE_STATES\": () => (/* binding */ YOUTUBE_STATES),\n/* harmony export */ \"ZOOM_STEP\": () => (/* binding */ ZOOM_STEP),\n/* harmony export */ \"isAndroid\": () => (/* binding */ isAndroid),\n/* harmony export */ \"isBrave\": () => (/* binding */ isBrave),\n/* harmony export */ \"isChrome\": () => (/* binding */ isChrome),\n/* harmony export */ \"isDarwin\": () => (/* binding */ isDarwin),\n/* harmony export */ \"isFirefox\": () => (/* binding */ isFirefox),\n/* harmony export */ \"isIOS\": () => (/* binding */ isIOS),\n/* harmony export */ \"isSafari\": () => (/* binding */ isSafari),\n/* harmony export */ \"isWindows\": () => (/* binding */ isWindows),\n/* harmony export */ \"supportsResizeObserver\": () => (/* binding */ supportsResizeObserver)\n/* harmony export */ });\n/* harmony import */ var _css_variables_module_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./css/variables.module.scss */ \"./css/variables.module.scss\");\n/* harmony import */ var _colors__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./colors */ \"./colors.ts\");\n\n\nconst isDarwin = /Mac|iPod|iPhone|iPad/.test(navigator.platform);\nconst isWindows = /^Win/.test(navigator.platform);\nconst isAndroid = /\\b(android)\\b/i.test(navigator.userAgent);\nconst isFirefox = \"netscape\" in window && navigator.userAgent.indexOf(\"rv:\") > 1 && navigator.userAgent.indexOf(\"Gecko\") > 1;\nconst isChrome = navigator.userAgent.indexOf(\"Chrome\") !== -1;\nconst isSafari = !isChrome && navigator.userAgent.indexOf(\"Safari\") !== -1;\nconst isIOS = /iPad|iPhone/.test(navigator.platform) || // iPadOS 13+\nnavigator.userAgent.includes(\"Mac\") && \"ontouchend\" in document; // keeping function so it can be mocked in test\n\nconst isBrave = () => {\n var _a, _b;\n\n return ((_b = (_a = navigator.brave) === null || _a === void 0 ? void 0 : _a.isBrave) === null || _b === void 0 ? void 0 : _b.name) === \"isBrave\";\n};\nconst supportsResizeObserver = typeof window !== \"undefined\" && \"ResizeObserver\" in window;\nconst APP_NAME = \"Excalidraw\"; // distance when creating text before it's considered `autoResize: false`\n// we're using higher threshold so that clicks that end up being drags\n// don't unintentionally create text elements that are wrapped to a few chars\n// (happens a lot with fast clicks with the text tool)\n\nconst TEXT_AUTOWRAP_THRESHOLD = 36; // px\n\nconst DRAGGING_THRESHOLD = 10; // px\n\nconst LINE_CONFIRM_THRESHOLD = 8; // px\n\nconst ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;\nconst ELEMENT_TRANSLATE_AMOUNT = 1;\nconst TEXT_TO_CENTER_SNAP_THRESHOLD = 30;\nconst SHIFT_LOCKING_ANGLE = Math.PI / 12;\nconst DEFAULT_LASER_COLOR = \"red\";\nconst CURSOR_TYPE = {\n TEXT: \"text\",\n CROSSHAIR: \"crosshair\",\n GRABBING: \"grabbing\",\n GRAB: \"grab\",\n POINTER: \"pointer\",\n MOVE: \"move\",\n AUTO: \"\"\n};\nconst POINTER_BUTTON = {\n MAIN: 0,\n WHEEL: 1,\n SECONDARY: 2,\n TOUCH: -1,\n ERASER: 5\n};\nconst POINTER_EVENTS = {\n enabled: \"all\",\n disabled: \"none\",\n // asserted as any so it can be freely assigned to React Element\n // \"pointerEnvets\" CSS prop\n inheritFromUI: \"var(--ui-pointerEvents)\"\n};\nvar EVENT;\n\n(function (EVENT) {\n EVENT[\"COPY\"] = \"copy\";\n EVENT[\"PASTE\"] = \"paste\";\n EVENT[\"CUT\"] = \"cut\";\n EVENT[\"KEYDOWN\"] = \"keydown\";\n EVENT[\"KEYUP\"] = \"keyup\";\n EVENT[\"MOUSE_MOVE\"] = \"mousemove\";\n EVENT[\"RESIZE\"] = \"resize\";\n EVENT[\"UNLOAD\"] = \"unload\";\n EVENT[\"FOCUS\"] = \"focus\";\n EVENT[\"BLUR\"] = \"blur\";\n EVENT[\"DRAG_OVER\"] = \"dragover\";\n EVENT[\"DROP\"] = \"drop\";\n EVENT[\"GESTURE_END\"] = \"gestureend\";\n EVENT[\"BEFORE_UNLOAD\"] = \"beforeunload\";\n EVENT[\"GESTURE_START\"] = \"gesturestart\";\n EVENT[\"GESTURE_CHANGE\"] = \"gesturechange\";\n EVENT[\"POINTER_MOVE\"] = \"pointermove\";\n EVENT[\"POINTER_DOWN\"] = \"pointerdown\";\n EVENT[\"POINTER_UP\"] = \"pointerup\";\n EVENT[\"STATE_CHANGE\"] = \"statechange\";\n EVENT[\"WHEEL\"] = \"wheel\";\n EVENT[\"TOUCH_START\"] = \"touchstart\";\n EVENT[\"TOUCH_END\"] = \"touchend\";\n EVENT[\"HASHCHANGE\"] = \"hashchange\";\n EVENT[\"VISIBILITY_CHANGE\"] = \"visibilitychange\";\n EVENT[\"SCROLL\"] = \"scroll\"; // custom events\n\n EVENT[\"EXCALIDRAW_LINK\"] = \"excalidraw-link\";\n EVENT[\"MENU_ITEM_SELECT\"] = \"menu.itemSelect\";\n EVENT[\"MESSAGE\"] = \"message\";\n EVENT[\"FULLSCREENCHANGE\"] = \"fullscreenchange\";\n})(EVENT || (EVENT = {}));\n\nconst YOUTUBE_STATES = {\n UNSTARTED: -1,\n ENDED: 0,\n PLAYING: 1,\n PAUSED: 2,\n BUFFERING: 3,\n CUED: 5\n};\nconst ENV = {\n TEST: \"test\",\n DEVELOPMENT: \"development\"\n};\nconst CLASSES = {\n SHAPE_ACTIONS_MENU: \"App-menu__left\",\n SHAPE_ACTIONS_MOBILE_MENU: \"App-mobile-menu\",\n MOBILE_TOOLBAR: \"App-toolbar-content\",\n ZOOM_ACTIONS: \"zoom-actions\",\n SEARCH_MENU_INPUT_WRAPPER: \"layer-ui__search-inputWrapper\"\n};\n/**\n * // TODO: shouldn't be really `const`, likely neither have integers as values, due to value for the custom fonts, which should likely be some hash.\n *\n * Let's think this through and consider:\n * - https://developer.mozilla.org/en-US/docs/Web/CSS/generic-family\n * - https://drafts.csswg.org/css-fonts-4/#font-family-prop\n * - https://learn.microsoft.com/en-us/typography/opentype/spec/ibmfc\n */\n\nconst FONT_FAMILY = {\n Virgil: 1,\n Helvetica: 2,\n Cascadia: 3,\n \"Local Font\": 4,\n // leave 4 unused as it was historically used for Assistant (which we don't use anymore) or custom font (Obsidian)\n Excalifont: 5,\n Nunito: 6,\n \"Lilita One\": 7,\n \"Comic Shanns\": 8,\n \"Liberation Sans\": 9\n};\nconst THEME = {\n LIGHT: \"light\",\n DARK: \"dark\"\n};\nconst FRAME_STYLE = {\n strokeColor: \"#bbb\",\n strokeWidth: 2,\n strokeStyle: \"solid\",\n fillStyle: \"solid\",\n roughness: 0,\n roundness: null,\n backgroundColor: \"transparent\",\n radius: 8,\n nameOffsetY: 3,\n nameColorLightTheme: \"#999999\",\n nameColorDarkTheme: \"#7a7a7a\",\n nameFontSize: 14,\n nameLineHeight: 1.25\n};\nconst WINDOWS_EMOJI_FALLBACK_FONT = \"Segoe UI Emoji\";\nconst MIN_FONT_SIZE = 1;\nconst DEFAULT_FONT_SIZE = 20;\nconst DEFAULT_FONT_FAMILY = FONT_FAMILY.Excalifont;\nconst DEFAULT_TEXT_ALIGN = \"left\";\nconst DEFAULT_VERTICAL_ALIGN = \"top\";\nconst DEFAULT_VERSION = \"{version}\";\nconst DEFAULT_TRANSFORM_HANDLE_SPACING = 2;\nconst SIDE_RESIZING_THRESHOLD = 2 * DEFAULT_TRANSFORM_HANDLE_SPACING; // a small epsilon to make side resizing always take precedence\n// (avoids an increase in renders and changes to tests)\n\nconst EPSILON = 0.00001;\nconst DEFAULT_COLLISION_THRESHOLD = 2 * SIDE_RESIZING_THRESHOLD - EPSILON;\nconst COLOR_WHITE = \"#ffffff\";\nconst COLOR_CHARCOAL_BLACK = \"#1e1e1e\"; // keep this in sync with CSS\n\nconst COLOR_VOICE_CALL = \"#a2f1a6\";\nconst CANVAS_ONLY_ACTIONS = [\"selectAll\"];\nconst DEFAULT_GRID_SIZE = 20;\nconst DEFAULT_GRID_STEP = 5;\nconst IMAGE_MIME_TYPES = {\n svg: \"image/svg+xml\",\n png: \"image/png\",\n jpg: \"image/jpeg\",\n gif: \"image/gif\",\n webp: \"image/webp\",\n bmp: \"image/bmp\",\n ico: \"image/x-icon\",\n avif: \"image/avif\",\n jfif: \"image/jfif\"\n};\nconst ALLOWED_PASTE_MIME_TYPES = [\"text/plain\", \"text/html\"];\nconst MIME_TYPES = Object.assign({\n json: \"application/json\",\n // excalidraw data\n excalidraw: \"application/vnd.excalidraw+json\",\n excalidrawlib: \"application/vnd.excalidrawlib+json\",\n // image-encoded excalidraw data\n \"excalidraw.svg\": \"image/svg+xml\",\n \"excalidraw.png\": \"image/png\",\n // binary\n binary: \"application/octet-stream\"\n}, IMAGE_MIME_TYPES);\nconst EXPORT_IMAGE_TYPES = {\n png: \"png\",\n svg: \"svg\",\n clipboard: \"clipboard\"\n};\nconst EXPORT_DATA_TYPES = {\n excalidraw: \"excalidraw\",\n excalidrawClipboard: \"excalidraw/clipboard\",\n excalidrawLibrary: \"excalidrawlib\",\n excalidrawClipboardWithAPI: \"excalidraw-api/clipboard\"\n};\nconst EXPORT_SOURCE = window.EXCALIDRAW_EXPORT_SOURCE || window.location.origin; // time in milliseconds\n\nconst IMAGE_RENDER_TIMEOUT = 500;\nconst TAP_TWICE_TIMEOUT = 300;\nconst TOUCH_CTX_MENU_TIMEOUT = 500;\nconst TITLE_TIMEOUT = 10000;\nconst VERSION_TIMEOUT = 30000;\nconst SCROLL_TIMEOUT = 100;\nconst ZOOM_STEP = 0.05; //zsviczian\n\nconst MIN_ZOOM = 0.1;\nconst MAX_ZOOM = 30;\nconst HYPERLINK_TOOLTIP_DELAY = 300; // Report a user inactive after IDLE_THRESHOLD milliseconds\n\nconst IDLE_THRESHOLD = 60000; // Report a user active each ACTIVE_THRESHOLD milliseconds\n\nconst ACTIVE_THRESHOLD = 3000;\nconst THEME_FILTER = _css_variables_module_scss__WEBPACK_IMPORTED_MODULE_0__[\"default\"].themeFilter;\nconst URL_QUERY_KEYS = {\n addLibrary: \"addLibrary\"\n};\nconst URL_HASH_KEYS = {\n addLibrary: \"addLibrary\"\n};\nconst DEFAULT_UI_OPTIONS = {\n canvasActions: {\n changeViewBackgroundColor: true,\n clearCanvas: true,\n export: {\n saveFileToDisk: true\n },\n loadScene: true,\n saveToActiveFile: true,\n toggleTheme: null,\n saveAsImage: true\n },\n tools: {\n image: true\n }\n}; // breakpoints\n// -----------------------------------------------------------------------------\n// md screen\n\nconst MQ_MAX_WIDTH_PORTRAIT = 730;\nconst MQ_MAX_WIDTH_LANDSCAPE = 1000;\nconst MQ_MAX_HEIGHT_LANDSCAPE = 500; // sidebar\n\nconst MQ_RIGHT_SIDEBAR_MIN_WIDTH = 1229; // -----------------------------------------------------------------------------\n\nconst LIBRARY_SIDEBAR_WIDTH = parseInt(_css_variables_module_scss__WEBPACK_IMPORTED_MODULE_0__[\"default\"].rightSidebarWidth);\nconst MAX_DECIMALS_FOR_SVG_EXPORT = 2;\nconst EXPORT_SCALES = [1, 2, 3];\nconst DEFAULT_EXPORT_PADDING = 10; // px\n\nconst DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT = 2880; //zsviczian was 1440\n\nconst MAX_ALLOWED_FILE_BYTES = 20 * 1024 * 1024;\nconst SVG_NS = \"http://www.w3.org/2000/svg\";\nconst ENCRYPTION_KEY_BITS = 128;\nconst VERSIONS = {\n excalidraw: 2,\n excalidrawLibrary: 2\n};\nconst BOUND_TEXT_PADDING = 5;\nconst ARROW_LABEL_WIDTH_FRACTION = 0.7;\nconst ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO = 11;\nconst VERTICAL_ALIGN = {\n TOP: \"top\",\n MIDDLE: \"middle\",\n BOTTOM: \"bottom\"\n};\nconst TEXT_ALIGN = {\n LEFT: \"left\",\n CENTER: \"center\",\n RIGHT: \"right\"\n};\nconst ELEMENT_READY_TO_ERASE_OPACITY = 20; // Radius represented as 25% of element's largest side (width/height).\n// Used for LEGACY and PROPORTIONAL_RADIUS algorithms, or when the element is\n// below the cutoff size.\n\nconst DEFAULT_PROPORTIONAL_RADIUS = 0.25; // Fixed radius for the ADAPTIVE_RADIUS algorithm. In pixels.\n\nconst DEFAULT_ADAPTIVE_RADIUS = 32; // roundness type (algorithm)\n\nconst ROUNDNESS = {\n // Used for legacy rounding (rectangles), which currently works the same\n // as PROPORTIONAL_RADIUS, but we need to differentiate for UI purposes and\n // forwards-compat.\n LEGACY: 1,\n // Used for linear elements & diamonds\n PROPORTIONAL_RADIUS: 2,\n // Current default algorithm for rectangles, using fixed pixel radius.\n // It's working similarly to a regular border-radius, but attemps to make\n // radius visually similar across differnt element sizes, especially\n // very large and very small elements.\n //\n // NOTE right now we don't allow configuration and use a constant radius\n // (see DEFAULT_ADAPTIVE_RADIUS constant)\n ADAPTIVE_RADIUS: 3\n};\n/** key containt id of precedeing elemnt id we use in reconciliation during\n * collaboration */\n\nconst PRECEDING_ELEMENT_KEY = \"__precedingElement__\"; //zsviczian\n\nconst COLOR_NAMES = {\n aliceblue: \"#f0f8ff\",\n antiquewhite: \"#faebd7\",\n aqua: \"#00ffff\",\n aquamarine: \"#7fffd4\",\n azure: \"#f0ffff\",\n beige: \"#f5f5dc\",\n bisque: \"#ffe4c4\",\n black: \"#000000\",\n blanchedalmond: \"#ffebcd\",\n blue: \"#0000ff\",\n blueviolet: \"#8a2be2\",\n brown: \"#a52a2a\",\n burlywood: \"#deb887\",\n cadetblue: \"#5f9ea0\",\n chartreuse: \"#7fff00\",\n chocolate: \"#d2691e\",\n coral: \"#ff7f50\",\n cornflowerblue: \"#6495ed\",\n cornsilk: \"#fff8dc\",\n crimson: \"#dc143c\",\n cyan: \"#00ffff\",\n darkblue: \"#00008b\",\n darkcyan: \"#008b8b\",\n darkgoldenrod: \"#b8860b\",\n darkgray: \"#a9a9a9\",\n darkgreen: \"#006400\",\n darkkhaki: \"#bdb76b\",\n darkmagenta: \"#8b008b\",\n darkolivegreen: \"#556b2f\",\n darkorange: \"#ff8c00\",\n darkorchid: \"#9932cc\",\n darkred: \"#8b0000\",\n darksalmon: \"#e9967a\",\n darkseagreen: \"#8fbc8f\",\n darkslateblue: \"#483d8b\",\n darkslategray: \"#2f4f4f\",\n darkturquoise: \"#00ced1\",\n darkviolet: \"#9400d3\",\n deeppink: \"#ff1493\",\n deepskyblue: \"#00bfff\",\n dimgray: \"#696969\",\n dodgerblue: \"#1e90ff\",\n firebrick: \"#b22222\",\n floralwhite: \"#fffaf0\",\n forestgreen: \"#228b22\",\n fuchsia: \"#ff00ff\",\n gainsboro: \"#dcdcdc\",\n ghostwhite: \"#f8f8ff\",\n gold: \"#ffd700\",\n goldenrod: \"#daa520\",\n gray: \"#808080\",\n green: \"#008000\",\n greenyellow: \"#adff2f\",\n honeydew: \"#f0fff0\",\n hotpink: \"#ff69b4\",\n indianred: \"#cd5c5c\",\n indigo: \"#4b0082\",\n ivory: \"#fffff0\",\n khaki: \"#f0e68c\",\n lavender: \"#e6e6fa\",\n lavenderblush: \"#fff0f5\",\n lawngreen: \"#7cfc00\",\n lemonchiffon: \"#fffacd\",\n lightblue: \"#add8e6\",\n lightcoral: \"#f08080\",\n lightcyan: \"#e0ffff\",\n lightgoldenrodyellow: \"#fafad2\",\n lightgrey: \"#d3d3d3\",\n lightgreen: \"#90ee90\",\n lightpink: \"#ffb6c1\",\n lightsalmon: \"#ffa07a\",\n lightseagreen: \"#20b2aa\",\n lightskyblue: \"#87cefa\",\n lightslategray: \"#778899\",\n lightsteelblue: \"#b0c4de\",\n lightyellow: \"#ffffe0\",\n lime: \"#00ff00\",\n limegreen: \"#32cd32\",\n linen: \"#faf0e6\",\n magenta: \"#ff00ff\",\n maroon: \"#800000\",\n mediumaquamarine: \"#66cdaa\",\n mediumblue: \"#0000cd\",\n mediumorchid: \"#ba55d3\",\n mediumpurple: \"#9370d8\",\n mediumseagreen: \"#3cb371\",\n mediumslateblue: \"#7b68ee\",\n mediumspringgreen: \"#00fa9a\",\n mediumturquoise: \"#48d1cc\",\n mediumvioletred: \"#c71585\",\n midnightblue: \"#191970\",\n mintcream: \"#f5fffa\",\n mistyrose: \"#ffe4e1\",\n moccasin: \"#ffe4b5\",\n navajowhite: \"#ffdead\",\n navy: \"#000080\",\n oldlace: \"#fdf5e6\",\n olive: \"#808000\",\n olivedrab: \"#6b8e23\",\n orange: \"#ffa500\",\n orangered: \"#ff4500\",\n orchid: \"#da70d6\",\n palegoldenrod: \"#eee8aa\",\n palegreen: \"#98fb98\",\n paleturquoise: \"#afeeee\",\n palevioletred: \"#d87093\",\n papayawhip: \"#ffefd5\",\n peachpuff: \"#ffdab9\",\n peru: \"#cd853f\",\n pink: \"#ffc0cb\",\n plum: \"#dda0dd\",\n powderblue: \"#b0e0e6\",\n purple: \"#800080\",\n rebeccapurple: \"#663399\",\n red: \"#ff0000\",\n rosybrown: \"#bc8f8f\",\n royalblue: \"#4169e1\",\n saddlebrown: \"#8b4513\",\n salmon: \"#fa8072\",\n sandybrown: \"#f4a460\",\n seagreen: \"#2e8b57\",\n seashell: \"#fff5ee\",\n sienna: \"#a0522d\",\n silver: \"#c0c0c0\",\n skyblue: \"#87ceeb\",\n slateblue: \"#6a5acd\",\n slategray: \"#708090\",\n snow: \"#fffafa\",\n springgreen: \"#00ff7f\",\n steelblue: \"#4682b4\",\n tan: \"#d2b48c\",\n teal: \"#008080\",\n thistle: \"#d8bfd8\",\n tomato: \"#ff6347\",\n turquoise: \"#40e0d0\",\n violet: \"#ee82ee\",\n wheat: \"#f5deb3\",\n white: \"#ffffff\",\n whitesmoke: \"#f5f5f5\",\n yellow: \"#ffff00\",\n yellowgreen: \"#9acd32\"\n};\nconst ROUGHNESS = {\n architect: 0,\n artist: 1,\n cartoonist: 2\n};\nconst STROKE_WIDTH = {\n extraThin: 0.5,\n thin: 1,\n bold: 2,\n extraBold: 4\n};\nconst DEFAULT_ELEMENT_PROPS = {\n strokeColor: _colors__WEBPACK_IMPORTED_MODULE_1__.COLOR_PALETTE.black,\n backgroundColor: _colors__WEBPACK_IMPORTED_MODULE_1__.COLOR_PALETTE.transparent,\n fillStyle: \"solid\",\n strokeWidth: 2,\n strokeStyle: \"solid\",\n roughness: ROUGHNESS.artist,\n opacity: 100,\n locked: false\n};\nconst LIBRARY_SIDEBAR_TAB = \"library\";\nconst CANVAS_SEARCH_TAB = \"search\";\nconst DEFAULT_SIDEBAR = {\n name: \"default\",\n defaultTab: LIBRARY_SIDEBAR_TAB\n};\nconst LIBRARY_DISABLED_TYPES = new Set([\"iframe\", \"embeddable\", \"image\"]); // use these constants to easily identify reference sites\n\nconst TOOL_TYPE = {\n selection: \"selection\",\n rectangle: \"rectangle\",\n diamond: \"diamond\",\n ellipse: \"ellipse\",\n arrow: \"arrow\",\n line: \"line\",\n freedraw: \"freedraw\",\n text: \"text\",\n image: \"image\",\n eraser: \"eraser\",\n hand: \"hand\",\n frame: \"frame\",\n magicframe: \"magicframe\",\n embeddable: \"embeddable\",\n laser: \"laser\"\n};\nconst EDITOR_LS_KEYS = {\n OAI_API_KEY: \"excalidraw-oai-api-key\",\n // legacy naming (non)scheme\n MERMAID_TO_EXCALIDRAW: \"mermaid-to-excalidraw\",\n PUBLISH_LIBRARY: \"publish-library-data\"\n};\n/**\n * not translated as this is used only in public, stateless API as default value\n * where filename is optional and we can't retrieve name from app state\n */\n\nconst DEFAULT_FILENAME = \"Untitled\";\nconst STATS_PANELS = {\n generalStats: 1,\n elementProperties: 2\n};\nconst MIN_WIDTH_OR_HEIGHT = 1;\nconst ARROW_TYPE = {\n sharp: \"sharp\",\n round: \"round\",\n elbow: \"elbow\"\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./constants.ts?");
|
|
2557
2557
|
|
|
2558
2558
|
/***/ }),
|
|
2559
2559
|
|
|
@@ -2619,7 +2619,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
2619
2619
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
2620
2620
|
|
|
2621
2621
|
"use strict";
|
|
2622
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"base64ToString\": () => (/* binding */ base64ToString),\n/* harmony export */ \"compressData\": () => (/* binding */ compressData),\n/* harmony export */ \"decode\": () => (/* binding */ decode),\n/* harmony export */ \"decompressData\": () => (/* binding */ decompressData),\n/* harmony export */ \"encode\": () => (/* binding */ encode),\n/* harmony export */ \"stringToBase64\": () => (/* binding */ stringToBase64),\n/* harmony export */ \"toByteString\": () => (/* binding */ toByteString)\n/* harmony export */ });\n/* harmony import */ var pako__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! pako */ \"../../node_modules/pako/index.js\");\n/* harmony import */ var pako__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(pako__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _encryption__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./encryption */ \"./data/encryption.ts\");\n\n // -----------------------------------------------------------------------------\n// byte (binary) strings\n// -----------------------------------------------------------------------------\n// fast, Buffer-compatible implem\n\nconst toByteString = data => {\n return new Promise((resolve, reject) => {\n const blob = typeof data === \"string\" ? new Blob([new TextEncoder().encode(data)]) : new Blob([data instanceof Uint8Array ? data : new Uint8Array(data)]);\n const reader = new FileReader();\n\n reader.onload = event => {\n if (!event.target || typeof event.target.result !== \"string\") {\n return reject(new Error(\"couldn't convert to byte string\"));\n }\n\n resolve(event.target.result);\n };\n\n reader.readAsBinaryString(blob);\n });\n};\n\nconst byteStringToArrayBuffer = byteString => {\n const buffer = new ArrayBuffer(byteString.length);\n const bufferView = new Uint8Array(buffer);\n\n for (let i = 0, len = byteString.length; i < len; i++) {\n bufferView[i] = byteString.charCodeAt(i);\n }\n\n return buffer;\n};\n\nconst byteStringToString = byteString => {\n return new TextDecoder(\"utf-8\").decode(byteStringToArrayBuffer(byteString));\n}; // -----------------------------------------------------------------------------\n// base64\n// -----------------------------------------------------------------------------\n\n/**\n * @param isByteString set to true if already byte string to prevent bloat\n * due to reencoding\n */\n\n\nconst stringToBase64 = async (str, isByteString = false) => {\n return isByteString ? window.btoa(str) : window.btoa(await toByteString(str));\n}; // async to align with stringToBase64\n\nconst base64ToString = async (base64, isByteString = false) => {\n return isByteString ? window.atob(base64) : byteStringToString(window.atob(base64));\n};\n/**\n * Encodes (and potentially compresses via zlib) text to byte string\n */\n\nconst encode = async ({\n text,\n compress\n}) => {\n let deflated;\n\n if (compress !== false) {\n try {\n deflated = await toByteString((0,pako__WEBPACK_IMPORTED_MODULE_0__.deflate)(text));\n } catch (error) {\n console.error(\"encode: cannot deflate\", error);\n }\n }\n\n return {\n version: \"1\",\n encoding: \"bstring\",\n compressed: !!deflated,\n encoded: deflated || (await toByteString(text))\n };\n};\nconst decode = async data => {\n let decoded;\n\n switch (data.encoding) {\n case \"bstring\":\n // if compressed, do not double decode the bstring\n decoded = data.compressed ? data.encoded : await byteStringToString(data.encoded);\n break;\n\n default:\n throw new Error(`decode: unknown encoding \"${data.encoding}\"`);\n }\n\n if (data.compressed) {\n return (0,pako__WEBPACK_IMPORTED_MODULE_0__.inflate)(new Uint8Array(byteStringToArrayBuffer(decoded)), {\n to: \"string\"\n });\n }\n\n return decoded;\n}; // -----------------------------------------------------------------------------\n\nconst CONCAT_BUFFERS_VERSION = 1;\n/** how many bytes we use to encode how many bytes the next chunk has.\n * Corresponds to DataView setter methods (setUint32, setUint16, etc).\n *\n * NOTE ! values must not be changed, which would be backwards incompatible !\n */\n\nconst VERSION_DATAVIEW_BYTES = 4;\nconst NEXT_CHUNK_SIZE_DATAVIEW_BYTES = 4; // -----------------------------------------------------------------------------\n\nconst DATA_VIEW_BITS_MAP = {\n 1: 8,\n 2: 16,\n 4: 32\n};\n/**\n * abstraction over DataView that serves as a typed getter/setter in case\n * you're using constants for the byte size and want to ensure there's no\n * discrepenancy in the encoding across refactors.\n *\n * DataView serves for an endian-agnostic handling of numbers in ArrayBuffers.\n */\n\nfunction dataView(buffer, bytes, offset, value) {\n if (value != null) {\n if (value > Math.pow(2, DATA_VIEW_BITS_MAP[bytes]) - 1) {\n throw new Error(`attempting to set value higher than the allocated bytes (value: ${value}, bytes: ${bytes})`);\n }\n\n const method = `setUint${DATA_VIEW_BITS_MAP[bytes]}`;\n new DataView(buffer.buffer)[method](offset, value);\n return buffer;\n }\n\n const method = `getUint${DATA_VIEW_BITS_MAP[bytes]}`;\n return new DataView(buffer.buffer)[method](offset);\n} // -----------------------------------------------------------------------------\n\n/**\n * Resulting concatenated buffer has this format:\n *\n * [\n * VERSION chunk (4 bytes)\n * LENGTH chunk 1 (4 bytes)\n * DATA chunk 1 (up to 2^32 bits)\n * LENGTH chunk 2 (4 bytes)\n * DATA chunk 2 (up to 2^32 bits)\n * ...\n * ]\n *\n * @param buffers each buffer (chunk) must be at most 2^32 bits large (~4GB)\n */\n\n\nconst concatBuffers = (...buffers) => {\n const bufferView = new Uint8Array(VERSION_DATAVIEW_BYTES + NEXT_CHUNK_SIZE_DATAVIEW_BYTES * buffers.length + buffers.reduce((acc, buffer) => acc + buffer.byteLength, 0));\n let cursor = 0; // as the first chunk we'll encode the version for backwards compatibility\n\n dataView(bufferView, VERSION_DATAVIEW_BYTES, cursor, CONCAT_BUFFERS_VERSION);\n cursor += VERSION_DATAVIEW_BYTES;\n\n for (const buffer of buffers) {\n dataView(bufferView, NEXT_CHUNK_SIZE_DATAVIEW_BYTES, cursor, buffer.byteLength);\n cursor += NEXT_CHUNK_SIZE_DATAVIEW_BYTES;\n bufferView.set(buffer, cursor);\n cursor += buffer.byteLength;\n }\n\n return bufferView;\n};\n/** can only be used on buffers created via `concatBuffers()` */\n\n\nconst splitBuffers = concatenatedBuffer => {\n const buffers = [];\n let cursor = 0; // first chunk is the version\n\n const version = dataView(concatenatedBuffer, NEXT_CHUNK_SIZE_DATAVIEW_BYTES, cursor); // If version is outside of the supported versions, throw an error.\n // This usually means the buffer wasn't encoded using this API, so we'd only\n // waste compute.\n\n if (version > CONCAT_BUFFERS_VERSION) {\n throw new Error(`invalid version ${version}`);\n }\n\n cursor += VERSION_DATAVIEW_BYTES;\n\n while (true) {\n const chunkSize = dataView(concatenatedBuffer, NEXT_CHUNK_SIZE_DATAVIEW_BYTES, cursor);\n cursor += NEXT_CHUNK_SIZE_DATAVIEW_BYTES;\n buffers.push(concatenatedBuffer.slice(cursor, cursor + chunkSize));\n cursor += chunkSize;\n\n if (cursor >= concatenatedBuffer.byteLength) {\n break;\n }\n }\n\n return buffers;\n}; // helpers for (de)compressing data with JSON metadata including encryption\n// -----------------------------------------------------------------------------\n\n/** @private */\n\n\nconst _encryptAndCompress = async (data, encryptionKey) => {\n const {\n encryptedBuffer,\n iv\n } = await (0,_encryption__WEBPACK_IMPORTED_MODULE_1__.encryptData)(encryptionKey, (0,pako__WEBPACK_IMPORTED_MODULE_0__.deflate)(data));\n return {\n iv,\n buffer: new Uint8Array(encryptedBuffer)\n };\n};\n/**\n * The returned buffer has following format:\n * `[]` refers to a buffers wrapper (see `concatBuffers`)\n *\n * [\n * encodingMetadataBuffer,\n * iv,\n * [\n * contentsMetadataBuffer\n * contentsBuffer\n * ]\n * ]\n */\n\n\nconst compressData = async (dataBuffer, options) => {\n const fileInfo = {\n version: 2,\n compression: \"pako@1\",\n encryption: \"AES-GCM\"\n };\n const encodingMetadataBuffer = new TextEncoder().encode(JSON.stringify(fileInfo));\n const contentsMetadataBuffer = new TextEncoder().encode(JSON.stringify(options.metadata || null));\n const {\n iv,\n buffer\n } = await _encryptAndCompress(concatBuffers(contentsMetadataBuffer, dataBuffer), options.encryptionKey);\n return concatBuffers(encodingMetadataBuffer, iv, buffer);\n};\n/** @private */\n\nconst _decryptAndDecompress = async (iv, decryptedBuffer, decryptionKey, isCompressed) => {\n decryptedBuffer = new Uint8Array(await (0,_encryption__WEBPACK_IMPORTED_MODULE_1__.decryptData)(iv, decryptedBuffer, decryptionKey));\n\n if (isCompressed) {\n return (0,pako__WEBPACK_IMPORTED_MODULE_0__.inflate)(decryptedBuffer);\n }\n\n return decryptedBuffer;\n};\n\nconst decompressData = async (bufferView, options) => {\n // first chunk is encoding metadata (ignored for now)\n const [encodingMetadataBuffer, iv, buffer] = splitBuffers(bufferView);\n const encodingMetadata = JSON.parse(new TextDecoder().decode(encodingMetadataBuffer));\n\n try {\n const [contentsMetadataBuffer, contentsBuffer] = splitBuffers(await _decryptAndDecompress(iv, buffer, options.decryptionKey, !!encodingMetadata.compression));\n const metadata = JSON.parse(new TextDecoder().decode(contentsMetadataBuffer));\n return {\n /** metadata source is always JSON so we can decode it here */\n metadata,\n\n /** data can be anything so the caller must decode it */\n data: contentsBuffer\n };\n } catch (error) {\n console.error(`Error during decompressing and decrypting the file.`, encodingMetadata);\n throw error;\n }\n}; // -----------------------------------------------------------------------------\n\n//# sourceURL=webpack://ExcalidrawLib/./data/encode.ts?");
|
|
2622
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"base64ToArrayBuffer\": () => (/* binding */ base64ToArrayBuffer),\n/* harmony export */ \"base64ToString\": () => (/* binding */ base64ToString),\n/* harmony export */ \"compressData\": () => (/* binding */ compressData),\n/* harmony export */ \"decode\": () => (/* binding */ decode),\n/* harmony export */ \"decompressData\": () => (/* binding */ decompressData),\n/* harmony export */ \"encode\": () => (/* binding */ encode),\n/* harmony export */ \"stringToBase64\": () => (/* binding */ stringToBase64),\n/* harmony export */ \"toByteString\": () => (/* binding */ toByteString)\n/* harmony export */ });\n/* harmony import */ var pako__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! pako */ \"../../node_modules/pako/index.js\");\n/* harmony import */ var pako__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(pako__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _encryption__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./encryption */ \"./data/encryption.ts\");\n\n // -----------------------------------------------------------------------------\n// byte (binary) strings\n// -----------------------------------------------------------------------------\n// fast, Buffer-compatible implem\n\nconst toByteString = data => {\n return new Promise((resolve, reject) => {\n const blob = typeof data === \"string\" ? new Blob([new TextEncoder().encode(data)]) : new Blob([data instanceof Uint8Array ? data : new Uint8Array(data)]);\n const reader = new FileReader();\n\n reader.onload = event => {\n if (!event.target || typeof event.target.result !== \"string\") {\n return reject(new Error(\"couldn't convert to byte string\"));\n }\n\n resolve(event.target.result);\n };\n\n reader.readAsBinaryString(blob);\n });\n};\n\nconst byteStringToArrayBuffer = byteString => {\n const buffer = new ArrayBuffer(byteString.length);\n const bufferView = new Uint8Array(buffer);\n\n for (let i = 0, len = byteString.length; i < len; i++) {\n bufferView[i] = byteString.charCodeAt(i);\n }\n\n return buffer;\n};\n\nconst byteStringToString = byteString => {\n return new TextDecoder(\"utf-8\").decode(byteStringToArrayBuffer(byteString));\n}; // -----------------------------------------------------------------------------\n// base64\n// -----------------------------------------------------------------------------\n\n/**\n * @param isByteString set to true if already byte string to prevent bloat\n * due to reencoding\n */\n\n\nconst stringToBase64 = async (str, isByteString = false) => {\n return isByteString ? window.btoa(str) : window.btoa(await toByteString(str));\n}; // async to align with stringToBase64\n\nconst base64ToString = async (base64, isByteString = false) => {\n return isByteString ? window.atob(base64) : byteStringToString(window.atob(base64));\n};\nconst base64ToArrayBuffer = base64 => {\n if (typeof Buffer !== \"undefined\") {\n // Node.js environment\n return Buffer.from(base64, \"base64\").buffer;\n } // Browser environment\n\n\n return byteStringToArrayBuffer(atob(base64));\n};\n/**\n * Encodes (and potentially compresses via zlib) text to byte string\n */\n\nconst encode = async ({\n text,\n compress\n}) => {\n let deflated;\n\n if (compress !== false) {\n try {\n deflated = await toByteString((0,pako__WEBPACK_IMPORTED_MODULE_0__.deflate)(text));\n } catch (error) {\n console.error(\"encode: cannot deflate\", error);\n }\n }\n\n return {\n version: \"1\",\n encoding: \"bstring\",\n compressed: !!deflated,\n encoded: deflated || (await toByteString(text))\n };\n};\nconst decode = async data => {\n let decoded;\n\n switch (data.encoding) {\n case \"bstring\":\n // if compressed, do not double decode the bstring\n decoded = data.compressed ? data.encoded : await byteStringToString(data.encoded);\n break;\n\n default:\n throw new Error(`decode: unknown encoding \"${data.encoding}\"`);\n }\n\n if (data.compressed) {\n return (0,pako__WEBPACK_IMPORTED_MODULE_0__.inflate)(new Uint8Array(byteStringToArrayBuffer(decoded)), {\n to: \"string\"\n });\n }\n\n return decoded;\n}; // -----------------------------------------------------------------------------\n\nconst CONCAT_BUFFERS_VERSION = 1;\n/** how many bytes we use to encode how many bytes the next chunk has.\n * Corresponds to DataView setter methods (setUint32, setUint16, etc).\n *\n * NOTE ! values must not be changed, which would be backwards incompatible !\n */\n\nconst VERSION_DATAVIEW_BYTES = 4;\nconst NEXT_CHUNK_SIZE_DATAVIEW_BYTES = 4; // -----------------------------------------------------------------------------\n\nconst DATA_VIEW_BITS_MAP = {\n 1: 8,\n 2: 16,\n 4: 32\n};\n/**\n * abstraction over DataView that serves as a typed getter/setter in case\n * you're using constants for the byte size and want to ensure there's no\n * discrepenancy in the encoding across refactors.\n *\n * DataView serves for an endian-agnostic handling of numbers in ArrayBuffers.\n */\n\nfunction dataView(buffer, bytes, offset, value) {\n if (value != null) {\n if (value > Math.pow(2, DATA_VIEW_BITS_MAP[bytes]) - 1) {\n throw new Error(`attempting to set value higher than the allocated bytes (value: ${value}, bytes: ${bytes})`);\n }\n\n const method = `setUint${DATA_VIEW_BITS_MAP[bytes]}`;\n new DataView(buffer.buffer)[method](offset, value);\n return buffer;\n }\n\n const method = `getUint${DATA_VIEW_BITS_MAP[bytes]}`;\n return new DataView(buffer.buffer)[method](offset);\n} // -----------------------------------------------------------------------------\n\n/**\n * Resulting concatenated buffer has this format:\n *\n * [\n * VERSION chunk (4 bytes)\n * LENGTH chunk 1 (4 bytes)\n * DATA chunk 1 (up to 2^32 bits)\n * LENGTH chunk 2 (4 bytes)\n * DATA chunk 2 (up to 2^32 bits)\n * ...\n * ]\n *\n * @param buffers each buffer (chunk) must be at most 2^32 bits large (~4GB)\n */\n\n\nconst concatBuffers = (...buffers) => {\n const bufferView = new Uint8Array(VERSION_DATAVIEW_BYTES + NEXT_CHUNK_SIZE_DATAVIEW_BYTES * buffers.length + buffers.reduce((acc, buffer) => acc + buffer.byteLength, 0));\n let cursor = 0; // as the first chunk we'll encode the version for backwards compatibility\n\n dataView(bufferView, VERSION_DATAVIEW_BYTES, cursor, CONCAT_BUFFERS_VERSION);\n cursor += VERSION_DATAVIEW_BYTES;\n\n for (const buffer of buffers) {\n dataView(bufferView, NEXT_CHUNK_SIZE_DATAVIEW_BYTES, cursor, buffer.byteLength);\n cursor += NEXT_CHUNK_SIZE_DATAVIEW_BYTES;\n bufferView.set(buffer, cursor);\n cursor += buffer.byteLength;\n }\n\n return bufferView;\n};\n/** can only be used on buffers created via `concatBuffers()` */\n\n\nconst splitBuffers = concatenatedBuffer => {\n const buffers = [];\n let cursor = 0; // first chunk is the version\n\n const version = dataView(concatenatedBuffer, NEXT_CHUNK_SIZE_DATAVIEW_BYTES, cursor); // If version is outside of the supported versions, throw an error.\n // This usually means the buffer wasn't encoded using this API, so we'd only\n // waste compute.\n\n if (version > CONCAT_BUFFERS_VERSION) {\n throw new Error(`invalid version ${version}`);\n }\n\n cursor += VERSION_DATAVIEW_BYTES;\n\n while (true) {\n const chunkSize = dataView(concatenatedBuffer, NEXT_CHUNK_SIZE_DATAVIEW_BYTES, cursor);\n cursor += NEXT_CHUNK_SIZE_DATAVIEW_BYTES;\n buffers.push(concatenatedBuffer.slice(cursor, cursor + chunkSize));\n cursor += chunkSize;\n\n if (cursor >= concatenatedBuffer.byteLength) {\n break;\n }\n }\n\n return buffers;\n}; // helpers for (de)compressing data with JSON metadata including encryption\n// -----------------------------------------------------------------------------\n\n/** @private */\n\n\nconst _encryptAndCompress = async (data, encryptionKey) => {\n const {\n encryptedBuffer,\n iv\n } = await (0,_encryption__WEBPACK_IMPORTED_MODULE_1__.encryptData)(encryptionKey, (0,pako__WEBPACK_IMPORTED_MODULE_0__.deflate)(data));\n return {\n iv,\n buffer: new Uint8Array(encryptedBuffer)\n };\n};\n/**\n * The returned buffer has following format:\n * `[]` refers to a buffers wrapper (see `concatBuffers`)\n *\n * [\n * encodingMetadataBuffer,\n * iv,\n * [\n * contentsMetadataBuffer\n * contentsBuffer\n * ]\n * ]\n */\n\n\nconst compressData = async (dataBuffer, options) => {\n const fileInfo = {\n version: 2,\n compression: \"pako@1\",\n encryption: \"AES-GCM\"\n };\n const encodingMetadataBuffer = new TextEncoder().encode(JSON.stringify(fileInfo));\n const contentsMetadataBuffer = new TextEncoder().encode(JSON.stringify(options.metadata || null));\n const {\n iv,\n buffer\n } = await _encryptAndCompress(concatBuffers(contentsMetadataBuffer, dataBuffer), options.encryptionKey);\n return concatBuffers(encodingMetadataBuffer, iv, buffer);\n};\n/** @private */\n\nconst _decryptAndDecompress = async (iv, decryptedBuffer, decryptionKey, isCompressed) => {\n decryptedBuffer = new Uint8Array(await (0,_encryption__WEBPACK_IMPORTED_MODULE_1__.decryptData)(iv, decryptedBuffer, decryptionKey));\n\n if (isCompressed) {\n return (0,pako__WEBPACK_IMPORTED_MODULE_0__.inflate)(decryptedBuffer);\n }\n\n return decryptedBuffer;\n};\n\nconst decompressData = async (bufferView, options) => {\n // first chunk is encoding metadata (ignored for now)\n const [encodingMetadataBuffer, iv, buffer] = splitBuffers(bufferView);\n const encodingMetadata = JSON.parse(new TextDecoder().decode(encodingMetadataBuffer));\n\n try {\n const [contentsMetadataBuffer, contentsBuffer] = splitBuffers(await _decryptAndDecompress(iv, buffer, options.decryptionKey, !!encodingMetadata.compression));\n const metadata = JSON.parse(new TextDecoder().decode(contentsMetadataBuffer));\n return {\n /** metadata source is always JSON so we can decode it here */\n metadata,\n\n /** data can be anything so the caller must decode it */\n data: contentsBuffer\n };\n } catch (error) {\n console.error(`Error during decompressing and decrypting the file.`, encodingMetadata);\n throw error;\n }\n}; // -----------------------------------------------------------------------------\n\n//# sourceURL=webpack://ExcalidrawLib/./data/encode.ts?");
|
|
2623
2623
|
|
|
2624
2624
|
/***/ }),
|
|
2625
2625
|
|
|
@@ -2718,7 +2718,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
2718
2718
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
2719
2719
|
|
|
2720
2720
|
"use strict";
|
|
2721
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"AllowedExcalidrawActiveTools\": () => (/* binding */ AllowedExcalidrawActiveTools),\n/* harmony export */ \"restore\": () => (/* binding */ restore),\n/* harmony export */ \"restoreAppState\": () => (/* binding */ restoreAppState),\n/* harmony export */ \"restoreElements\": () => (/* binding */ restoreElements),\n/* harmony export */ \"restoreLibraryItems\": () => (/* binding */ restoreLibraryItems)\n/* harmony export */ });\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _random__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../random */ \"./random.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _appState__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../appState */ \"./appState.ts\");\n/* harmony import */ var _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../element/linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _element_mutateElement__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../element/mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _element_textElement__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../element/textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _url__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./url */ \"./data/url.ts\");\n/* harmony import */ var _fractionalIndex__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../fractionalIndex */ \"./fractionalIndex.ts\");\n/* harmony import */ var _points__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../points */ \"./points.ts\");\n/* harmony import */ var _fonts__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../fonts */ \"./fonts/index.ts\");\n/* harmony import */ var _element_binding__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../element/binding */ \"./element/binding.ts\");\n/* harmony import */ var _scene__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../scene */ \"./scene/index.ts\");\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../../math */ \"../math/index.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst AllowedExcalidrawActiveTools = {\n selection: true,\n text: true,\n rectangle: true,\n diamond: true,\n ellipse: true,\n line: true,\n image: true,\n arrow: true,\n freedraw: true,\n eraser: false,\n custom: true,\n frame: true,\n embeddable: true,\n hand: true,\n mermaid: true,\n laser: false,\n magicframe: false\n};\n\nconst getFontFamilyByName = fontFamilyName => {\n if (Object.keys(_constants__WEBPACK_IMPORTED_MODULE_3__.FONT_FAMILY).includes(fontFamilyName)) {\n return _constants__WEBPACK_IMPORTED_MODULE_3__.FONT_FAMILY[fontFamilyName];\n }\n\n return _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_FONT_FAMILY;\n};\n\nconst repairBinding = (element, binding) => {\n var _a;\n\n if (!binding) {\n return null;\n }\n\n return Object.assign(Object.assign({}, binding), {\n focus: binding.focus || 0,\n fixedPoint: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_1__.isElbowArrow)(element) ? (0,_element_binding__WEBPACK_IMPORTED_MODULE_13__.normalizeFixedPoint)((_a = binding.fixedPoint) !== null && _a !== void 0 ? _a : [0, 0]) : null\n });\n};\n\nconst restoreElementWithProperties = (element, extra) => {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;\n\n const base = {\n type: extra.type || element.type,\n // all elements must have version > 0 so getSceneVersion() will pick up\n // newly added elements\n version: element.version || 1,\n versionNonce: (_a = element.versionNonce) !== null && _a !== void 0 ? _a : 0,\n index: (_b = element.index) !== null && _b !== void 0 ? _b : null,\n isDeleted: (_c = element.isDeleted) !== null && _c !== void 0 ? _c : false,\n id: element.id || (0,_random__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n fillStyle: element.fillStyle || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.fillStyle,\n strokeWidth: element.strokeWidth || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.strokeWidth,\n strokeStyle: (_d = element.strokeStyle) !== null && _d !== void 0 ? _d : _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.strokeStyle,\n roughness: (_e = element.roughness) !== null && _e !== void 0 ? _e : _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.roughness,\n opacity: element.opacity == null ? _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.opacity : element.opacity,\n angle: element.angle || 0,\n x: (_g = (_f = extra.x) !== null && _f !== void 0 ? _f : element.x) !== null && _g !== void 0 ? _g : 0,\n y: (_j = (_h = extra.y) !== null && _h !== void 0 ? _h : element.y) !== null && _j !== void 0 ? _j : 0,\n strokeColor: element.strokeColor || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.strokeColor,\n backgroundColor: element.backgroundColor || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.backgroundColor,\n width: element.width || 0,\n height: element.height || 0,\n seed: (_k = element.seed) !== null && _k !== void 0 ? _k : 1,\n groupIds: (_l = element.groupIds) !== null && _l !== void 0 ? _l : [],\n frameId: (_m = element.frameId) !== null && _m !== void 0 ? _m : null,\n roundness: element.roundness ? element.roundness : element.strokeSharpness === \"round\" && element.type !== \"image\" ? {\n // for old elements that would now use adaptive radius algo,\n // use legacy algo instead\n type: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_1__.isUsingAdaptiveRadius)(element.type) ? _constants__WEBPACK_IMPORTED_MODULE_3__.ROUNDNESS.LEGACY : _constants__WEBPACK_IMPORTED_MODULE_3__.ROUNDNESS.PROPORTIONAL_RADIUS\n } : null,\n boundElements: element.boundElementIds ? element.boundElementIds.map(id => ({\n type: \"arrow\",\n id\n })) : (_o = element.boundElements) !== null && _o !== void 0 ? _o : [],\n updated: (_p = element.updated) !== null && _p !== void 0 ? _p : (0,_utils__WEBPACK_IMPORTED_MODULE_7__.getUpdatedTimestamp)(),\n link: element.link ? (0,_url__WEBPACK_IMPORTED_MODULE_9__.normalizeLink)(element.link) : null,\n locked: (_q = element.locked) !== null && _q !== void 0 ? _q : false\n };\n\n if (\"customData\" in element || \"customData\" in extra) {\n base.customData = \"customData\" in extra ? extra.customData : element.customData;\n }\n\n return Object.assign(Object.assign(Object.assign({}, base), (0,_element__WEBPACK_IMPORTED_MODULE_0__.getNormalizedDimensions)(base)), extra);\n};\n\nconst restoreElement = element => {\n var _a, _b, _c, _d, _e;\n\n switch (element.type) {\n case \"text\":\n let fontSize = element.fontSize;\n let fontFamily = element.fontFamily;\n\n if (\"font\" in element) {\n const [fontPx, _fontFamily] = element.font.split(\" \");\n fontSize = parseFloat(fontPx);\n fontFamily = getFontFamilyByName(_fontFamily);\n }\n\n const text = typeof element.text === \"string\" && element.text || \"\"; // line-height might not be specified either when creating elements\n // programmatically, or when importing old diagrams.\n // For the latter we want to detect the original line height which\n // will likely differ from our per-font fixed line height we now use,\n // to maintain backward compatibility.\n\n const lineHeight = element.lineHeight || (element.height ? // detect line-height from current element height and font-size\n (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.detectLineHeight)(element) : // no element height likely means programmatic use, so default\n // to a fixed line height\n (0,_fonts__WEBPACK_IMPORTED_MODULE_12__.getLineHeight)(element.fontFamily));\n element = restoreElementWithProperties(element, {\n fontSize,\n fontFamily,\n text,\n rawText: (_a = element.rawText) !== null && _a !== void 0 ? _a : \"\",\n textAlign: element.textAlign || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_TEXT_ALIGN,\n verticalAlign: element.verticalAlign || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_VERTICAL_ALIGN,\n containerId: (_b = element.containerId) !== null && _b !== void 0 ? _b : null,\n originalText: element.originalText || text,\n autoResize: (_c = element.autoResize) !== null && _c !== void 0 ? _c : true,\n lineHeight\n }); // if empty text, mark as deleted. We keep in array\n // for data integrity purposes (collab etc.)\n\n if (!text && !element.isDeleted) {\n element = Object.assign(Object.assign({}, element), {\n originalText: text,\n isDeleted: true\n });\n element = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_6__.bumpVersion)(element);\n }\n\n return element;\n\n case \"freedraw\":\n {\n return restoreElementWithProperties(element, {\n points: element.points,\n lastCommittedPoint: null,\n simulatePressure: element.simulatePressure,\n pressures: element.pressures\n });\n }\n\n case \"image\":\n return restoreElementWithProperties(element, {\n status: element.status || \"pending\",\n fileId: element.fileId,\n scale: element.scale || [1, 1]\n });\n\n case \"line\": // @ts-ignore LEGACY type\n // eslint-disable-next-line no-fallthrough\n\n case \"draw\":\n const {\n startArrowhead = null,\n endArrowhead = null\n } = element;\n let x = element.x;\n let y = element.y;\n let points = // migrate old arrow model to new one\n !Array.isArray(element.points) || element.points.length < 2 ? [(0,_math__WEBPACK_IMPORTED_MODULE_15__.point)(0, 0), (0,_math__WEBPACK_IMPORTED_MODULE_15__.point)(element.width, element.height)] : element.points;\n\n if (points[0][0] !== 0 || points[0][1] !== 0) {\n ({\n points,\n x,\n y\n } = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_5__.LinearElementEditor.getNormalizedPoints(element));\n }\n\n return restoreElementWithProperties(element, Object.assign({\n type: element.type === \"draw\" ? \"line\" : element.type,\n startBinding: repairBinding(element, element.startBinding),\n endBinding: repairBinding(element, element.endBinding),\n lastCommittedPoint: null,\n startArrowhead,\n endArrowhead,\n points,\n x,\n y\n }, (0,_points__WEBPACK_IMPORTED_MODULE_11__.getSizeFromPoints)(points)));\n\n case \"arrow\":\n {\n const {\n startArrowhead = null,\n endArrowhead = \"arrow\"\n } = element;\n let x = element.x;\n let y = element.y;\n let points = // migrate old arrow model to new one\n !Array.isArray(element.points) || element.points.length < 2 ? [(0,_math__WEBPACK_IMPORTED_MODULE_15__.point)(0, 0), (0,_math__WEBPACK_IMPORTED_MODULE_15__.point)(element.width, element.height)] : element.points;\n\n if (points[0][0] !== 0 || points[0][1] !== 0) {\n ({\n points,\n x,\n y\n } = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_5__.LinearElementEditor.getNormalizedPoints(element));\n } // TODO: Separate arrow from linear element\n\n\n return restoreElementWithProperties(element, Object.assign({\n type: element.type,\n startBinding: repairBinding(element, element.startBinding),\n endBinding: repairBinding(element, element.endBinding),\n lastCommittedPoint: null,\n startArrowhead,\n endArrowhead,\n points,\n x,\n y,\n elbowed: element.elbowed\n }, (0,_points__WEBPACK_IMPORTED_MODULE_11__.getSizeFromPoints)(points)));\n }\n // generic elements\n\n case \"ellipse\":\n case \"rectangle\":\n case \"diamond\":\n return restoreElementWithProperties(element, {});\n\n case \"iframe\": //zsviczian\n\n case \"embeddable\":\n return restoreElementWithProperties(element, {\n scale: (_d = element.scale) !== null && _d !== void 0 ? _d : [1, 1] //zsviczian\n\n });\n\n case \"magicframe\":\n case \"frame\":\n return restoreElementWithProperties(element, {\n name: (_e = element.name) !== null && _e !== void 0 ? _e : null\n });\n // Don't use default case so as to catch a missing an element type case.\n // We also don't want to throw, but instead return void so we filter\n // out these unsupported elements from the restored array.\n }\n\n return null;\n};\n/**\n * Repairs container element's boundElements array by removing duplicates and\n * fixing containerId of bound elements if not present. Also removes any\n * bound elements that do not exist in the elements array.\n *\n * NOTE mutates elements.\n */\n\n\nconst repairContainerElement = (container, elementsMap) => {\n if (container.boundElements) {\n // copy because we're not cloning on restore, and we don't want to mutate upstream\n const boundElements = container.boundElements.slice(); // dedupe bindings & fix boundElement.containerId if not set already\n\n const boundIds = new Set();\n container.boundElements = boundElements.reduce((acc, binding) => {\n const boundElement = elementsMap.get(binding.id);\n\n if (boundElement && !boundIds.has(binding.id)) {\n boundIds.add(binding.id);\n\n if (boundElement.isDeleted) {\n return acc;\n }\n\n acc.push(binding);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_1__.isTextElement)(boundElement) && // being slightly conservative here, preserving existing containerId\n // if defined, lest boundElements is stale\n !boundElement.containerId) {\n boundElement.containerId = container.id;\n }\n }\n\n return acc;\n }, []);\n }\n};\n/**\n * Repairs target bound element's container's boundElements array,\n * or removes contaienrId if container does not exist.\n *\n * NOTE mutates elements.\n */\n\n\nconst repairBoundElement = (boundElement, elementsMap) => {\n const container = boundElement.containerId ? elementsMap.get(boundElement.containerId) : null;\n\n if (!container) {\n boundElement.containerId = null;\n return;\n }\n\n if (boundElement.isDeleted) {\n return;\n }\n\n if (container.boundElements && !container.boundElements.find(binding => binding.id === boundElement.id)) {\n // copy because we're not cloning on restore, and we don't want to mutate upstream\n const boundElements = (container.boundElements || (container.boundElements = [])).slice();\n boundElements.push({\n type: \"text\",\n id: boundElement.id\n });\n container.boundElements = boundElements;\n }\n};\n/**\n * Remove an element's frameId if its containing frame is non-existent\n *\n * NOTE mutates elements.\n */\n\n\nconst repairFrameMembership = (element, elementsMap) => {\n if (element.frameId) {\n const containingFrame = elementsMap.get(element.frameId);\n\n if (!containingFrame) {\n element.frameId = null;\n }\n }\n};\n\nconst restoreElements = (elements,\n/** NOTE doesn't serve for reconciliation */\nlocalElements, opts) => {\n // used to detect duplicate top-level element ids\n const existingIds = new Set();\n const localElementsMap = localElements ? (0,_utils__WEBPACK_IMPORTED_MODULE_7__.arrayToMap)(localElements) : null;\n const restoredElements = (0,_fractionalIndex__WEBPACK_IMPORTED_MODULE_10__.syncInvalidIndices)((elements || []).reduce((elements, element) => {\n // filtering out selection, which is legacy, no longer kept in elements,\n // and causing issues if retained\n if (element.type !== \"selection\" && !(0,_element__WEBPACK_IMPORTED_MODULE_0__.isInvisiblySmallElement)(element)) {\n let migratedElement = restoreElement(element);\n\n if (migratedElement) {\n const localElement = localElementsMap === null || localElementsMap === void 0 ? void 0 : localElementsMap.get(element.id);\n\n if (localElement && localElement.version > migratedElement.version) {\n migratedElement = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_6__.bumpVersion)(migratedElement, localElement.version);\n }\n\n if (existingIds.has(migratedElement.id)) {\n migratedElement = Object.assign(Object.assign({}, migratedElement), {\n id: (0,_random__WEBPACK_IMPORTED_MODULE_2__.randomId)()\n });\n }\n\n existingIds.add(migratedElement.id);\n elements.push(migratedElement);\n }\n }\n\n return elements;\n }, []));\n\n if (!(opts === null || opts === void 0 ? void 0 : opts.repairBindings)) {\n return restoredElements;\n } // repair binding. Mutates elements.\n\n\n const restoredElementsMap = (0,_utils__WEBPACK_IMPORTED_MODULE_7__.arrayToMap)(restoredElements);\n\n for (const element of restoredElements) {\n if (element.frameId) {\n repairFrameMembership(element, restoredElementsMap);\n }\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_1__.isTextElement)(element) && element.containerId) {\n repairBoundElement(element, restoredElementsMap);\n } else if (element.boundElements) {\n repairContainerElement(element, restoredElementsMap);\n }\n\n if (opts.refreshDimensions && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_1__.isTextElement)(element)) {\n Object.assign(element, (0,_element__WEBPACK_IMPORTED_MODULE_0__.refreshTextDimensions)(element, (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getContainerElement)(element, restoredElementsMap), restoredElementsMap));\n }\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_1__.isLinearElement)(element)) {\n if (element.startBinding && (!restoredElementsMap.has(element.startBinding.elementId) || !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_1__.isArrowElement)(element))) {\n element.startBinding = null;\n }\n\n if (element.endBinding && (!restoredElementsMap.has(element.endBinding.elementId) || !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_1__.isArrowElement)(element))) {\n element.endBinding = null;\n }\n }\n }\n\n return restoredElements;\n};\n\nconst coalesceAppStateValue = (key, appState, defaultAppState) => {\n const value = appState[key]; // NOTE the value! assertion is needed in TS 4.5.5 (fixed in newer versions)\n\n return value !== undefined ? value : defaultAppState[key];\n};\n\nconst LegacyAppStateMigrations = {\n isSidebarDocked: (appState, defaultAppState) => {\n var _a;\n\n return [\"defaultSidebarDockedPreference\", (_a = appState.isSidebarDocked) !== null && _a !== void 0 ? _a : coalesceAppStateValue(\"defaultSidebarDockedPreference\", appState, defaultAppState)];\n }\n};\nconst restoreAppState = (appState, localAppState) => {\n var _a, _b, _c, _d, _e;\n\n appState = appState || {};\n const defaultAppState = (0,_appState__WEBPACK_IMPORTED_MODULE_4__.getDefaultAppState)();\n const nextAppState = {}; // first, migrate all legacy AppState properties to new ones. We do it\n // in one go before migrate the rest of the properties in case the new ones\n // depend on checking any other key (i.e. they are coupled)\n\n for (const legacyKey of Object.keys(LegacyAppStateMigrations)) {\n if (legacyKey in appState) {\n const [nextKey, nextValue] = LegacyAppStateMigrations[legacyKey](appState, defaultAppState);\n nextAppState[nextKey] = nextValue;\n }\n }\n\n for (const [key, defaultValue] of Object.entries(defaultAppState)) {\n // if AppState contains a legacy key, prefer that one and migrate its\n // value to the new one\n const suppliedValue = appState[key];\n const localValue = localAppState ? localAppState[key] : undefined;\n nextAppState[key] = suppliedValue !== undefined ? suppliedValue : localValue !== undefined ? localValue : defaultValue;\n }\n\n return Object.assign(Object.assign({}, nextAppState), {\n cursorButton: (localAppState === null || localAppState === void 0 ? void 0 : localAppState.cursorButton) || \"up\",\n // reset on fresh restore so as to hide the UI button if penMode not active\n penDetected: (_a = localAppState === null || localAppState === void 0 ? void 0 : localAppState.penDetected) !== null && _a !== void 0 ? _a : appState.penMode ? (_b = appState.penDetected) !== null && _b !== void 0 ? _b : false : false,\n activeTool: Object.assign(Object.assign({}, (0,_utils__WEBPACK_IMPORTED_MODULE_7__.updateActiveTool)(defaultAppState, nextAppState.activeTool.type && AllowedExcalidrawActiveTools[nextAppState.activeTool.type] ? nextAppState.activeTool : {\n type: \"selection\"\n })), {\n lastActiveTool: null,\n locked: (_c = nextAppState.activeTool.locked) !== null && _c !== void 0 ? _c : false\n }),\n // Migrates from previous version where appState.zoom was a number\n zoom: {\n value: (0,_scene__WEBPACK_IMPORTED_MODULE_14__.getNormalizedZoom)((0,_math__WEBPACK_IMPORTED_MODULE_15__.isFiniteNumber)(appState.zoom) ? appState.zoom : (_e = (_d = appState.zoom) === null || _d === void 0 ? void 0 : _d.value) !== null && _e !== void 0 ? _e : defaultAppState.zoom.value)\n },\n openSidebar: // string (legacy)\n typeof appState.openSidebar === \"string\" ? {\n name: _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_SIDEBAR.name\n } : nextAppState.openSidebar,\n gridSize: (0,_scene__WEBPACK_IMPORTED_MODULE_14__.getNormalizedGridSize)((0,_math__WEBPACK_IMPORTED_MODULE_15__.isFiniteNumber)(appState.gridSize) ? appState.gridSize : _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_GRID_SIZE),\n gridStep: (0,_scene__WEBPACK_IMPORTED_MODULE_14__.getNormalizedGridStep)((0,_math__WEBPACK_IMPORTED_MODULE_15__.isFiniteNumber)(appState.gridStep) ? appState.gridStep : _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_GRID_STEP)\n });\n};\nconst restore = (data,\n/**\n * Local AppState (`this.state` or initial state from localStorage) so that we\n * don't overwrite local state with default values (when values not\n * explicitly specified).\n * Supply `null` if you can't get access to it.\n */\nlocalAppState, localElements, elementsConfig) => {\n return {\n elements: restoreElements(data === null || data === void 0 ? void 0 : data.elements, localElements, elementsConfig),\n appState: restoreAppState(data === null || data === void 0 ? void 0 : data.appState, localAppState || null),\n files: (data === null || data === void 0 ? void 0 : data.files) || {}\n };\n};\n\nconst restoreLibraryItem = libraryItem => {\n const elements = restoreElements((0,_element__WEBPACK_IMPORTED_MODULE_0__.getNonDeletedElements)(libraryItem.elements), null);\n return elements.length ? Object.assign(Object.assign({}, libraryItem), {\n elements\n }) : null;\n};\n\nconst restoreLibraryItems = (libraryItems = [], defaultStatus) => {\n const restoredItems = [];\n\n for (const item of libraryItems) {\n // migrate older libraries\n if (Array.isArray(item)) {\n const restoredItem = restoreLibraryItem({\n status: defaultStatus,\n elements: item,\n id: (0,_random__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n created: Date.now()\n });\n\n if (restoredItem) {\n restoredItems.push(restoredItem);\n }\n } else {\n const _item = item;\n const restoredItem = restoreLibraryItem(Object.assign(Object.assign({}, _item), {\n id: _item.id || (0,_random__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n status: _item.status || defaultStatus,\n created: _item.created || Date.now()\n }));\n\n if (restoredItem) {\n restoredItems.push(restoredItem);\n }\n }\n }\n\n return restoredItems;\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./data/restore.ts?");
|
|
2721
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"AllowedExcalidrawActiveTools\": () => (/* binding */ AllowedExcalidrawActiveTools),\n/* harmony export */ \"restore\": () => (/* binding */ restore),\n/* harmony export */ \"restoreAppState\": () => (/* binding */ restoreAppState),\n/* harmony export */ \"restoreElements\": () => (/* binding */ restoreElements),\n/* harmony export */ \"restoreLibraryItems\": () => (/* binding */ restoreLibraryItems)\n/* harmony export */ });\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _random__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../random */ \"./random.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _appState__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../appState */ \"./appState.ts\");\n/* harmony import */ var _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../element/linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _element_mutateElement__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../element/mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _element_textElement__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../element/textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _url__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./url */ \"./data/url.ts\");\n/* harmony import */ var _fractionalIndex__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../fractionalIndex */ \"./fractionalIndex.ts\");\n/* harmony import */ var _points__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../points */ \"./points.ts\");\n/* harmony import */ var _fonts__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../fonts */ \"./fonts/index.ts\");\n/* harmony import */ var _element_binding__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../element/binding */ \"./element/binding.ts\");\n/* harmony import */ var _scene__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../scene */ \"./scene/index.ts\");\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../../math */ \"../math/index.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst AllowedExcalidrawActiveTools = {\n selection: true,\n text: true,\n rectangle: true,\n diamond: true,\n ellipse: true,\n line: true,\n image: true,\n arrow: true,\n freedraw: true,\n eraser: false,\n custom: true,\n frame: true,\n embeddable: true,\n hand: true,\n mermaid: true,\n laser: false,\n magicframe: false\n};\n\nconst getFontFamilyByName = fontFamilyName => {\n if (Object.keys(_constants__WEBPACK_IMPORTED_MODULE_3__.FONT_FAMILY).includes(fontFamilyName)) {\n return _constants__WEBPACK_IMPORTED_MODULE_3__.FONT_FAMILY[fontFamilyName];\n }\n\n return _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_FONT_FAMILY;\n};\n\nconst repairBinding = (element, binding) => {\n var _a;\n\n if (!binding) {\n return null;\n }\n\n return Object.assign(Object.assign(Object.assign({}, binding), {\n focus: binding.focus || 0\n }), (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_1__.isElbowArrow)(element) && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_1__.isFixedPointBinding)(binding) ? {\n fixedPoint: (0,_element_binding__WEBPACK_IMPORTED_MODULE_13__.normalizeFixedPoint)((_a = binding.fixedPoint) !== null && _a !== void 0 ? _a : [0, 0])\n } : {});\n};\n\nconst restoreElementWithProperties = (element, extra) => {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;\n\n const base = {\n type: extra.type || element.type,\n // all elements must have version > 0 so getSceneVersion() will pick up\n // newly added elements\n version: element.version || 1,\n versionNonce: (_a = element.versionNonce) !== null && _a !== void 0 ? _a : 0,\n index: (_b = element.index) !== null && _b !== void 0 ? _b : null,\n isDeleted: (_c = element.isDeleted) !== null && _c !== void 0 ? _c : false,\n id: element.id || (0,_random__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n fillStyle: element.fillStyle || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.fillStyle,\n strokeWidth: element.strokeWidth || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.strokeWidth,\n strokeStyle: (_d = element.strokeStyle) !== null && _d !== void 0 ? _d : _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.strokeStyle,\n roughness: (_e = element.roughness) !== null && _e !== void 0 ? _e : _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.roughness,\n opacity: element.opacity == null ? _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.opacity : element.opacity,\n angle: element.angle || 0,\n x: (_g = (_f = extra.x) !== null && _f !== void 0 ? _f : element.x) !== null && _g !== void 0 ? _g : 0,\n y: (_j = (_h = extra.y) !== null && _h !== void 0 ? _h : element.y) !== null && _j !== void 0 ? _j : 0,\n strokeColor: element.strokeColor || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.strokeColor,\n backgroundColor: element.backgroundColor || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_ELEMENT_PROPS.backgroundColor,\n width: element.width || 0,\n height: element.height || 0,\n seed: (_k = element.seed) !== null && _k !== void 0 ? _k : 1,\n groupIds: (_l = element.groupIds) !== null && _l !== void 0 ? _l : [],\n frameId: (_m = element.frameId) !== null && _m !== void 0 ? _m : null,\n roundness: element.roundness ? element.roundness : element.strokeSharpness === \"round\" && element.type !== \"image\" ? {\n // for old elements that would now use adaptive radius algo,\n // use legacy algo instead\n type: (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_1__.isUsingAdaptiveRadius)(element.type) ? _constants__WEBPACK_IMPORTED_MODULE_3__.ROUNDNESS.LEGACY : _constants__WEBPACK_IMPORTED_MODULE_3__.ROUNDNESS.PROPORTIONAL_RADIUS\n } : null,\n boundElements: element.boundElementIds ? element.boundElementIds.map(id => ({\n type: \"arrow\",\n id\n })) : (_o = element.boundElements) !== null && _o !== void 0 ? _o : [],\n updated: (_p = element.updated) !== null && _p !== void 0 ? _p : (0,_utils__WEBPACK_IMPORTED_MODULE_7__.getUpdatedTimestamp)(),\n link: element.link ? (0,_url__WEBPACK_IMPORTED_MODULE_9__.normalizeLink)(element.link) : null,\n locked: (_q = element.locked) !== null && _q !== void 0 ? _q : false\n };\n\n if (\"customData\" in element || \"customData\" in extra) {\n base.customData = \"customData\" in extra ? extra.customData : element.customData;\n }\n\n return Object.assign(Object.assign(Object.assign({}, base), (0,_element__WEBPACK_IMPORTED_MODULE_0__.getNormalizedDimensions)(base)), extra);\n};\n\nconst restoreElement = element => {\n var _a, _b, _c, _d, _e;\n\n switch (element.type) {\n case \"text\":\n let fontSize = element.fontSize;\n let fontFamily = element.fontFamily;\n\n if (\"font\" in element) {\n const [fontPx, _fontFamily] = element.font.split(\" \");\n fontSize = parseFloat(fontPx);\n fontFamily = getFontFamilyByName(_fontFamily);\n }\n\n const text = typeof element.text === \"string\" && element.text || \"\"; // line-height might not be specified either when creating elements\n // programmatically, or when importing old diagrams.\n // For the latter we want to detect the original line height which\n // will likely differ from our per-font fixed line height we now use,\n // to maintain backward compatibility.\n\n const lineHeight = element.lineHeight || (element.height ? // detect line-height from current element height and font-size\n (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.detectLineHeight)(element) : // no element height likely means programmatic use, so default\n // to a fixed line height\n (0,_fonts__WEBPACK_IMPORTED_MODULE_12__.getLineHeight)(element.fontFamily));\n element = restoreElementWithProperties(element, {\n fontSize,\n fontFamily,\n text,\n rawText: (_a = element.rawText) !== null && _a !== void 0 ? _a : \"\",\n textAlign: element.textAlign || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_TEXT_ALIGN,\n verticalAlign: element.verticalAlign || _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_VERTICAL_ALIGN,\n containerId: (_b = element.containerId) !== null && _b !== void 0 ? _b : null,\n originalText: element.originalText || text,\n autoResize: (_c = element.autoResize) !== null && _c !== void 0 ? _c : true,\n lineHeight\n }); // if empty text, mark as deleted. We keep in array\n // for data integrity purposes (collab etc.)\n\n if (!text && !element.isDeleted) {\n element = Object.assign(Object.assign({}, element), {\n originalText: text,\n isDeleted: true\n });\n element = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_6__.bumpVersion)(element);\n }\n\n return element;\n\n case \"freedraw\":\n {\n return restoreElementWithProperties(element, {\n points: element.points,\n lastCommittedPoint: null,\n simulatePressure: element.simulatePressure,\n pressures: element.pressures\n });\n }\n\n case \"image\":\n return restoreElementWithProperties(element, {\n status: element.status || \"pending\",\n fileId: element.fileId,\n scale: element.scale || [1, 1]\n });\n\n case \"line\": // @ts-ignore LEGACY type\n // eslint-disable-next-line no-fallthrough\n\n case \"draw\":\n const {\n startArrowhead = null,\n endArrowhead = null\n } = element;\n let x = element.x;\n let y = element.y;\n let points = // migrate old arrow model to new one\n !Array.isArray(element.points) || element.points.length < 2 ? [(0,_math__WEBPACK_IMPORTED_MODULE_15__.point)(0, 0), (0,_math__WEBPACK_IMPORTED_MODULE_15__.point)(element.width, element.height)] : element.points;\n\n if (points[0][0] !== 0 || points[0][1] !== 0) {\n ({\n points,\n x,\n y\n } = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_5__.LinearElementEditor.getNormalizedPoints(element));\n }\n\n return restoreElementWithProperties(element, Object.assign({\n type: element.type === \"draw\" ? \"line\" : element.type,\n startBinding: repairBinding(element, element.startBinding),\n endBinding: repairBinding(element, element.endBinding),\n lastCommittedPoint: null,\n startArrowhead,\n endArrowhead,\n points,\n x,\n y\n }, (0,_points__WEBPACK_IMPORTED_MODULE_11__.getSizeFromPoints)(points)));\n\n case \"arrow\":\n {\n const {\n startArrowhead = null,\n endArrowhead = \"arrow\"\n } = element;\n let x = element.x;\n let y = element.y;\n let points = // migrate old arrow model to new one\n !Array.isArray(element.points) || element.points.length < 2 ? [(0,_math__WEBPACK_IMPORTED_MODULE_15__.point)(0, 0), (0,_math__WEBPACK_IMPORTED_MODULE_15__.point)(element.width, element.height)] : element.points;\n\n if (points[0][0] !== 0 || points[0][1] !== 0) {\n ({\n points,\n x,\n y\n } = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_5__.LinearElementEditor.getNormalizedPoints(element));\n } // TODO: Separate arrow from linear element\n\n\n return restoreElementWithProperties(element, Object.assign({\n type: element.type,\n startBinding: repairBinding(element, element.startBinding),\n endBinding: repairBinding(element, element.endBinding),\n lastCommittedPoint: null,\n startArrowhead,\n endArrowhead,\n points,\n x,\n y,\n elbowed: element.elbowed\n }, (0,_points__WEBPACK_IMPORTED_MODULE_11__.getSizeFromPoints)(points)));\n }\n // generic elements\n\n case \"ellipse\":\n case \"rectangle\":\n case \"diamond\":\n return restoreElementWithProperties(element, {});\n\n case \"iframe\": //zsviczian\n\n case \"embeddable\":\n return restoreElementWithProperties(element, {\n scale: (_d = element.scale) !== null && _d !== void 0 ? _d : [1, 1] //zsviczian\n\n });\n\n case \"magicframe\":\n case \"frame\":\n return restoreElementWithProperties(element, {\n name: (_e = element.name) !== null && _e !== void 0 ? _e : null\n });\n // Don't use default case so as to catch a missing an element type case.\n // We also don't want to throw, but instead return void so we filter\n // out these unsupported elements from the restored array.\n }\n\n return null;\n};\n/**\n * Repairs container element's boundElements array by removing duplicates and\n * fixing containerId of bound elements if not present. Also removes any\n * bound elements that do not exist in the elements array.\n *\n * NOTE mutates elements.\n */\n\n\nconst repairContainerElement = (container, elementsMap) => {\n if (container.boundElements) {\n // copy because we're not cloning on restore, and we don't want to mutate upstream\n const boundElements = container.boundElements.slice(); // dedupe bindings & fix boundElement.containerId if not set already\n\n const boundIds = new Set();\n container.boundElements = boundElements.reduce((acc, binding) => {\n const boundElement = elementsMap.get(binding.id);\n\n if (boundElement && !boundIds.has(binding.id)) {\n boundIds.add(binding.id);\n\n if (boundElement.isDeleted) {\n return acc;\n }\n\n acc.push(binding);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_1__.isTextElement)(boundElement) && // being slightly conservative here, preserving existing containerId\n // if defined, lest boundElements is stale\n !boundElement.containerId) {\n boundElement.containerId = container.id;\n }\n }\n\n return acc;\n }, []);\n }\n};\n/**\n * Repairs target bound element's container's boundElements array,\n * or removes contaienrId if container does not exist.\n *\n * NOTE mutates elements.\n */\n\n\nconst repairBoundElement = (boundElement, elementsMap) => {\n const container = boundElement.containerId ? elementsMap.get(boundElement.containerId) : null;\n\n if (!container) {\n boundElement.containerId = null;\n return;\n }\n\n if (boundElement.isDeleted) {\n return;\n }\n\n if (container.boundElements && !container.boundElements.find(binding => binding.id === boundElement.id)) {\n // copy because we're not cloning on restore, and we don't want to mutate upstream\n const boundElements = (container.boundElements || (container.boundElements = [])).slice();\n boundElements.push({\n type: \"text\",\n id: boundElement.id\n });\n container.boundElements = boundElements;\n }\n};\n/**\n * Remove an element's frameId if its containing frame is non-existent\n *\n * NOTE mutates elements.\n */\n\n\nconst repairFrameMembership = (element, elementsMap) => {\n if (element.frameId) {\n const containingFrame = elementsMap.get(element.frameId);\n\n if (!containingFrame) {\n element.frameId = null;\n }\n }\n};\n\nconst restoreElements = (elements,\n/** NOTE doesn't serve for reconciliation */\nlocalElements, opts) => {\n // used to detect duplicate top-level element ids\n const existingIds = new Set();\n const localElementsMap = localElements ? (0,_utils__WEBPACK_IMPORTED_MODULE_7__.arrayToMap)(localElements) : null;\n const restoredElements = (0,_fractionalIndex__WEBPACK_IMPORTED_MODULE_10__.syncInvalidIndices)((elements || []).reduce((elements, element) => {\n // filtering out selection, which is legacy, no longer kept in elements,\n // and causing issues if retained\n if (element.type !== \"selection\" && !(0,_element__WEBPACK_IMPORTED_MODULE_0__.isInvisiblySmallElement)(element)) {\n let migratedElement = restoreElement(element);\n\n if (migratedElement) {\n const localElement = localElementsMap === null || localElementsMap === void 0 ? void 0 : localElementsMap.get(element.id);\n\n if (localElement && localElement.version > migratedElement.version) {\n migratedElement = (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_6__.bumpVersion)(migratedElement, localElement.version);\n }\n\n if (existingIds.has(migratedElement.id)) {\n migratedElement = Object.assign(Object.assign({}, migratedElement), {\n id: (0,_random__WEBPACK_IMPORTED_MODULE_2__.randomId)()\n });\n }\n\n existingIds.add(migratedElement.id);\n elements.push(migratedElement);\n }\n }\n\n return elements;\n }, []));\n\n if (!(opts === null || opts === void 0 ? void 0 : opts.repairBindings)) {\n return restoredElements;\n } // repair binding. Mutates elements.\n\n\n const restoredElementsMap = (0,_utils__WEBPACK_IMPORTED_MODULE_7__.arrayToMap)(restoredElements);\n\n for (const element of restoredElements) {\n if (element.frameId) {\n repairFrameMembership(element, restoredElementsMap);\n }\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_1__.isTextElement)(element) && element.containerId) {\n repairBoundElement(element, restoredElementsMap);\n } else if (element.boundElements) {\n repairContainerElement(element, restoredElementsMap);\n }\n\n if (opts.refreshDimensions && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_1__.isTextElement)(element)) {\n Object.assign(element, (0,_element__WEBPACK_IMPORTED_MODULE_0__.refreshTextDimensions)(element, (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getContainerElement)(element, restoredElementsMap), restoredElementsMap));\n }\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_1__.isLinearElement)(element)) {\n if (element.startBinding && (!restoredElementsMap.has(element.startBinding.elementId) || !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_1__.isArrowElement)(element))) {\n element.startBinding = null;\n }\n\n if (element.endBinding && (!restoredElementsMap.has(element.endBinding.elementId) || !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_1__.isArrowElement)(element))) {\n element.endBinding = null;\n }\n }\n }\n\n return restoredElements;\n};\n\nconst coalesceAppStateValue = (key, appState, defaultAppState) => {\n const value = appState[key]; // NOTE the value! assertion is needed in TS 4.5.5 (fixed in newer versions)\n\n return value !== undefined ? value : defaultAppState[key];\n};\n\nconst LegacyAppStateMigrations = {\n isSidebarDocked: (appState, defaultAppState) => {\n var _a;\n\n return [\"defaultSidebarDockedPreference\", (_a = appState.isSidebarDocked) !== null && _a !== void 0 ? _a : coalesceAppStateValue(\"defaultSidebarDockedPreference\", appState, defaultAppState)];\n }\n};\nconst restoreAppState = (appState, localAppState) => {\n var _a, _b, _c, _d, _e;\n\n appState = appState || {};\n const defaultAppState = (0,_appState__WEBPACK_IMPORTED_MODULE_4__.getDefaultAppState)();\n const nextAppState = {}; // first, migrate all legacy AppState properties to new ones. We do it\n // in one go before migrate the rest of the properties in case the new ones\n // depend on checking any other key (i.e. they are coupled)\n\n for (const legacyKey of Object.keys(LegacyAppStateMigrations)) {\n if (legacyKey in appState) {\n const [nextKey, nextValue] = LegacyAppStateMigrations[legacyKey](appState, defaultAppState);\n nextAppState[nextKey] = nextValue;\n }\n }\n\n for (const [key, defaultValue] of Object.entries(defaultAppState)) {\n // if AppState contains a legacy key, prefer that one and migrate its\n // value to the new one\n const suppliedValue = appState[key];\n const localValue = localAppState ? localAppState[key] : undefined;\n nextAppState[key] = suppliedValue !== undefined ? suppliedValue : localValue !== undefined ? localValue : defaultValue;\n }\n\n return Object.assign(Object.assign({}, nextAppState), {\n cursorButton: (localAppState === null || localAppState === void 0 ? void 0 : localAppState.cursorButton) || \"up\",\n // reset on fresh restore so as to hide the UI button if penMode not active\n penDetected: (_a = localAppState === null || localAppState === void 0 ? void 0 : localAppState.penDetected) !== null && _a !== void 0 ? _a : appState.penMode ? (_b = appState.penDetected) !== null && _b !== void 0 ? _b : false : false,\n activeTool: Object.assign(Object.assign({}, (0,_utils__WEBPACK_IMPORTED_MODULE_7__.updateActiveTool)(defaultAppState, nextAppState.activeTool.type && AllowedExcalidrawActiveTools[nextAppState.activeTool.type] ? nextAppState.activeTool : {\n type: \"selection\"\n })), {\n lastActiveTool: null,\n locked: (_c = nextAppState.activeTool.locked) !== null && _c !== void 0 ? _c : false\n }),\n // Migrates from previous version where appState.zoom was a number\n zoom: {\n value: (0,_scene__WEBPACK_IMPORTED_MODULE_14__.getNormalizedZoom)((0,_math__WEBPACK_IMPORTED_MODULE_15__.isFiniteNumber)(appState.zoom) ? appState.zoom : (_e = (_d = appState.zoom) === null || _d === void 0 ? void 0 : _d.value) !== null && _e !== void 0 ? _e : defaultAppState.zoom.value)\n },\n openSidebar: // string (legacy)\n typeof appState.openSidebar === \"string\" ? {\n name: _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_SIDEBAR.name\n } : nextAppState.openSidebar,\n gridSize: (0,_scene__WEBPACK_IMPORTED_MODULE_14__.getNormalizedGridSize)((0,_math__WEBPACK_IMPORTED_MODULE_15__.isFiniteNumber)(appState.gridSize) ? appState.gridSize : _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_GRID_SIZE),\n gridStep: (0,_scene__WEBPACK_IMPORTED_MODULE_14__.getNormalizedGridStep)((0,_math__WEBPACK_IMPORTED_MODULE_15__.isFiniteNumber)(appState.gridStep) ? appState.gridStep : _constants__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_GRID_STEP)\n });\n};\nconst restore = (data,\n/**\n * Local AppState (`this.state` or initial state from localStorage) so that we\n * don't overwrite local state with default values (when values not\n * explicitly specified).\n * Supply `null` if you can't get access to it.\n */\nlocalAppState, localElements, elementsConfig) => {\n return {\n elements: restoreElements(data === null || data === void 0 ? void 0 : data.elements, localElements, elementsConfig),\n appState: restoreAppState(data === null || data === void 0 ? void 0 : data.appState, localAppState || null),\n files: (data === null || data === void 0 ? void 0 : data.files) || {}\n };\n};\n\nconst restoreLibraryItem = libraryItem => {\n const elements = restoreElements((0,_element__WEBPACK_IMPORTED_MODULE_0__.getNonDeletedElements)(libraryItem.elements), null);\n return elements.length ? Object.assign(Object.assign({}, libraryItem), {\n elements\n }) : null;\n};\n\nconst restoreLibraryItems = (libraryItems = [], defaultStatus) => {\n const restoredItems = [];\n\n for (const item of libraryItems) {\n // migrate older libraries\n if (Array.isArray(item)) {\n const restoredItem = restoreLibraryItem({\n status: defaultStatus,\n elements: item,\n id: (0,_random__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n created: Date.now()\n });\n\n if (restoredItem) {\n restoredItems.push(restoredItem);\n }\n } else {\n const _item = item;\n const restoredItem = restoreLibraryItem(Object.assign(Object.assign({}, _item), {\n id: _item.id || (0,_random__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n status: _item.status || defaultStatus,\n created: _item.created || Date.now()\n }));\n\n if (restoredItem) {\n restoredItems.push(restoredItem);\n }\n }\n }\n\n return restoredItems;\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./data/restore.ts?");
|
|
2722
2722
|
|
|
2723
2723
|
/***/ }),
|
|
2724
2724
|
|
|
@@ -2784,7 +2784,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
2784
2784
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
2785
2785
|
|
|
2786
2786
|
"use strict";
|
|
2787
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"BindableElement\": () => (/* binding */ BindableElement),\n/* harmony export */ \"BoundElement\": () => (/* binding */ BoundElement),\n/* harmony export */ \"FIXED_BINDING_DISTANCE\": () => (/* binding */ FIXED_BINDING_DISTANCE),\n/* harmony export */ \"avoidRectangularCorner\": () => (/* binding */ avoidRectangularCorner),\n/* harmony export */ \"bindLinearElement\": () => (/* binding */ bindLinearElement),\n/* harmony export */ \"bindOrUnbindLinearElement\": () => (/* binding */ bindOrUnbindLinearElement),\n/* harmony export */ \"bindOrUnbindLinearElements\": () => (/* binding */ bindOrUnbindLinearElements),\n/* harmony export */ \"bindPointToSnapToElementOutline\": () => (/* binding */ bindPointToSnapToElementOutline),\n/* harmony export */ \"bindingBorderTest\": () => (/* binding */ bindingBorderTest),\n/* harmony export */ \"bindingProperties\": () => (/* binding */ bindingProperties),\n/* harmony export */ \"calculateFixedPointForElbowArrowBinding\": () => (/* binding */ calculateFixedPointForElbowArrowBinding),\n/* harmony export */ \"determineFocusDistance\": () => (/* binding */ determineFocusDistance),\n/* harmony export */ \"distanceToBindableElement\": () => (/* binding */ distanceToBindableElement),\n/* harmony export */ \"fixBindingsAfterDeletion\": () => (/* binding */ fixBindingsAfterDeletion),\n/* harmony export */ \"fixBindingsAfterDuplication\": () => (/* binding */ fixBindingsAfterDuplication),\n/* harmony export */ \"getArrowLocalFixedPoints\": () => (/* binding */ getArrowLocalFixedPoints),\n/* harmony export */ \"getGlobalFixedPointForBindableElement\": () => (/* binding */ getGlobalFixedPointForBindableElement),\n/* harmony export */ \"getHeadingForElbowArrowSnap\": () => (/* binding */ getHeadingForElbowArrowSnap),\n/* harmony export */ \"getHoveredElementForBinding\": () => (/* binding */ getHoveredElementForBinding),\n/* harmony export */ \"getSuggestedBindingsForArrows\": () => (/* binding */ getSuggestedBindingsForArrows),\n/* harmony export */ \"intersectElementWithLine\": () => (/* binding */ intersectElementWithLine),\n/* harmony export */ \"isBindingEnabled\": () => (/* binding */ isBindingEnabled),\n/* harmony export */ \"isLinearElementSimpleAndAlreadyBound\": () => (/* binding */ isLinearElementSimpleAndAlreadyBound),\n/* harmony export */ \"maxBindingGap\": () => (/* binding */ maxBindingGap),\n/* harmony export */ \"maybeBindLinearElement\": () => (/* binding */ maybeBindLinearElement),\n/* harmony export */ \"normalizeFixedPoint\": () => (/* binding */ normalizeFixedPoint),\n/* harmony export */ \"shouldEnableBindingForPointerEvent\": () => (/* binding */ shouldEnableBindingForPointerEvent),\n/* harmony export */ \"snapToMid\": () => (/* binding */ snapToMid),\n/* harmony export */ \"updateBoundElements\": () => (/* binding */ updateBoundElements)\n/* harmony export */ });\n/* harmony import */ var _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../math/ga/ga */ \"../math/ga/ga.ts\");\n/* harmony import */ var _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../math/ga/gapoints */ \"../math/ga/gapoints.ts\");\n/* harmony import */ var _math_ga_gadirections__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../math/ga/gadirections */ \"../math/ga/gadirections.ts\");\n/* harmony import */ var _math_ga_galines__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../math/ga/galines */ \"../math/ga/galines.ts\");\n/* harmony import */ var _math_ga_gatransforms__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../math/ga/gatransforms */ \"../math/ga/gatransforms.ts\");\n/* harmony import */ var _bounds__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./bounds */ \"./element/bounds.ts\");\n/* harmony import */ var _utils_collision__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../utils/collision */ \"../utils/collision.ts\");\n/* harmony import */ var _scene__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../scene */ \"./scene/index.ts\");\n/* harmony import */ var _typeChecks__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _mutateElement__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _linearElementEditor__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _keys__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../keys */ \"./keys.ts\");\n/* harmony import */ var _textElement__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _shapes__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../shapes */ \"./shapes.tsx\");\n/* harmony import */ var _heading__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./heading */ \"./element/heading.ts\");\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../../math */ \"../math/index.ts\");\n/* harmony import */ var _utils_geometry_shape__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../../utils/geometry/shape */ \"../utils/geometry/shape.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst shouldEnableBindingForPointerEvent = event => {\n return !event[_keys__WEBPACK_IMPORTED_MODULE_12__.KEYS.CTRL_OR_CMD];\n};\nconst isBindingEnabled = appState => {\n return appState.invertBindingBehaviour //zsviczian\n ? !appState.isBindingEnabled : appState.isBindingEnabled;\n};\nconst FIXED_BINDING_DISTANCE = 5;\n\nconst getNonDeletedElements = (scene, ids) => {\n const result = [];\n ids.forEach(id => {\n const element = scene.getNonDeletedElement(id);\n\n if (element != null) {\n result.push(element);\n }\n });\n return result;\n};\n\nconst bindOrUnbindLinearElement = (linearElement, startBindingElement, endBindingElement, elementsMap, scene) => {\n const boundToElementIds = new Set();\n const unboundFromElementIds = new Set();\n bindOrUnbindLinearElementEdge(linearElement, startBindingElement, endBindingElement, \"start\", boundToElementIds, unboundFromElementIds, elementsMap);\n bindOrUnbindLinearElementEdge(linearElement, endBindingElement, startBindingElement, \"end\", boundToElementIds, unboundFromElementIds, elementsMap);\n const onlyUnbound = Array.from(unboundFromElementIds).filter(id => !boundToElementIds.has(id));\n getNonDeletedElements(scene, onlyUnbound).forEach(element => {\n var _a;\n\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_9__.mutateElement)(element, {\n boundElements: (_a = element.boundElements) === null || _a === void 0 ? void 0 : _a.filter(element => element.type !== \"arrow\" || element.id !== linearElement.id)\n });\n });\n};\n\nconst bindOrUnbindLinearElementEdge = (linearElement, bindableElement, otherEdgeBindableElement, startOrEnd, // Is mutated\nboundToElementIds, // Is mutated\nunboundFromElementIds, elementsMap) => {\n // \"keep\" is for method chaining convenience, a \"no-op\", so just bail out\n if (bindableElement === \"keep\") {\n return;\n } // null means break the bind, so nothing to consider here\n\n\n if (bindableElement === null) {\n const unbound = unbindLinearElement(linearElement, startOrEnd);\n\n if (unbound != null) {\n unboundFromElementIds.add(unbound);\n }\n\n return;\n } // While complext arrows can do anything, simple arrow with both ends trying\n // to bind to the same bindable should not be allowed, start binding takes\n // precedence\n\n\n if (isLinearElementSimple(linearElement)) {\n if (otherEdgeBindableElement == null || (otherEdgeBindableElement === \"keep\" ? // TODO: Refactor - Needlessly complex\n !isLinearElementSimpleAndAlreadyBoundOnOppositeEdge(linearElement, bindableElement, startOrEnd) : startOrEnd === \"start\" || otherEdgeBindableElement.id !== bindableElement.id)) {\n bindLinearElement(linearElement, bindableElement, startOrEnd, elementsMap);\n boundToElementIds.add(bindableElement.id);\n }\n } else {\n bindLinearElement(linearElement, bindableElement, startOrEnd, elementsMap);\n boundToElementIds.add(bindableElement.id);\n }\n};\n\nconst getOriginalBindingIfStillCloseOfLinearElementEdge = (linearElement, edge, elementsMap) => {\n var _a, _b;\n\n const coors = getLinearElementEdgeCoors(linearElement, edge, elementsMap);\n const elementId = edge === \"start\" ? (_a = linearElement.startBinding) === null || _a === void 0 ? void 0 : _a.elementId : (_b = linearElement.endBinding) === null || _b === void 0 ? void 0 : _b.elementId;\n\n if (elementId) {\n const element = elementsMap.get(elementId);\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isBindableElement)(element) && bindingBorderTest(element, coors, elementsMap)) {\n return element;\n }\n }\n\n return null;\n};\n\nconst getOriginalBindingsIfStillCloseToArrowEnds = (linearElement, elementsMap) => [\"start\", \"end\"].map(edge => getOriginalBindingIfStillCloseOfLinearElementEdge(linearElement, edge, elementsMap));\n\nconst getBindingStrategyForDraggingArrowEndpoints = (selectedElement, isBindingEnabled, draggingPoints, elementsMap, elements) => {\n const startIdx = 0;\n const endIdx = selectedElement.points.length - 1;\n const startDragged = draggingPoints.findIndex(i => i === startIdx) > -1;\n const endDragged = draggingPoints.findIndex(i => i === endIdx) > -1;\n const start = startDragged ? isBindingEnabled ? getElligibleElementForBindingElement(selectedElement, \"start\", elementsMap, elements) : null // If binding is disabled and start is dragged, break all binds\n : // We have to update the focus and gap of the binding, so let's rebind\n getElligibleElementForBindingElement(selectedElement, \"start\", elementsMap, elements);\n const end = endDragged ? isBindingEnabled ? getElligibleElementForBindingElement(selectedElement, \"end\", elementsMap, elements) : null // If binding is disabled and end is dragged, break all binds\n : // We have to update the focus and gap of the binding, so let's rebind\n getElligibleElementForBindingElement(selectedElement, \"end\", elementsMap, elements);\n return [start, end];\n};\n\nconst getBindingStrategyForDraggingArrowOrJoints = (selectedElement, elementsMap, elements, isBindingEnabled) => {\n const [startIsClose, endIsClose] = getOriginalBindingsIfStillCloseToArrowEnds(selectedElement, elementsMap);\n const start = startIsClose ? isBindingEnabled ? getElligibleElementForBindingElement(selectedElement, \"start\", elementsMap, elements) : null : null;\n const end = endIsClose ? isBindingEnabled ? getElligibleElementForBindingElement(selectedElement, \"end\", elementsMap, elements) : null : null;\n return [start, end];\n};\n\nconst bindOrUnbindLinearElements = (selectedElements, elementsMap, elements, scene, isBindingEnabled, draggingPoints) => {\n selectedElements.forEach(selectedElement => {\n const [start, end] = (draggingPoints === null || draggingPoints === void 0 ? void 0 : draggingPoints.length) ? // The arrow edge points are dragged (i.e. start, end)\n getBindingStrategyForDraggingArrowEndpoints(selectedElement, isBindingEnabled, draggingPoints !== null && draggingPoints !== void 0 ? draggingPoints : [], elementsMap, elements) : // The arrow itself (the shaft) or the inner joins are dragged\n getBindingStrategyForDraggingArrowOrJoints(selectedElement, elementsMap, elements, isBindingEnabled);\n bindOrUnbindLinearElement(selectedElement, start, end, elementsMap, scene);\n });\n};\nconst getSuggestedBindingsForArrows = (selectedElements, elementsMap) => {\n // HOT PATH: Bail out if selected elements list is too large\n if (selectedElements.length > 50) {\n return [];\n }\n\n return selectedElements.filter(_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isLinearElement).flatMap(element => getOriginalBindingsIfStillCloseToArrowEnds(element, elementsMap)).filter(element => element !== null) // Filter out bind candidates which are in the\n // same selection / group with the arrow\n //\n // TODO: Is it worth turning the list into a set to avoid dupes?\n .filter(element => selectedElements.filter(selected => selected.id === (element === null || element === void 0 ? void 0 : element.id)).length === 0);\n};\nconst maybeBindLinearElement = (linearElement, appState, pointerCoords, elementsMap, elements) => {\n if (appState.startBoundElement != null) {\n bindLinearElement(linearElement, appState.startBoundElement, \"start\", elementsMap);\n }\n\n const hoveredElement = getHoveredElementForBinding(pointerCoords, elements, elementsMap, (0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isElbowArrow)(linearElement) && (0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isElbowArrow)(linearElement));\n\n if (hoveredElement !== null) {\n if (!isLinearElementSimpleAndAlreadyBoundOnOppositeEdge(linearElement, hoveredElement, \"end\")) {\n bindLinearElement(linearElement, hoveredElement, \"end\", elementsMap);\n }\n }\n};\nconst bindLinearElement = (linearElement, hoveredElement, startOrEnd, elementsMap) => {\n if (!(0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isArrowElement)(linearElement)) {\n return;\n }\n\n const binding = Object.assign(Object.assign({\n elementId: hoveredElement.id\n }, calculateFocusAndGap(linearElement, hoveredElement, startOrEnd, elementsMap)), (0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isElbowArrow)(linearElement) ? calculateFixedPointForElbowArrowBinding(linearElement, hoveredElement, startOrEnd, elementsMap) : {\n fixedPoint: null\n });\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_9__.mutateElement)(linearElement, {\n [startOrEnd === \"start\" ? \"startBinding\" : \"endBinding\"]: binding\n });\n const boundElementsMap = (0,_utils__WEBPACK_IMPORTED_MODULE_11__.arrayToMap)(hoveredElement.boundElements || []);\n\n if (!boundElementsMap.has(linearElement.id)) {\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_9__.mutateElement)(hoveredElement, {\n boundElements: (hoveredElement.boundElements || []).concat({\n id: linearElement.id,\n type: \"arrow\"\n })\n });\n }\n}; // Don't bind both ends of a simple segment\n\nconst isLinearElementSimpleAndAlreadyBoundOnOppositeEdge = (linearElement, bindableElement, startOrEnd) => {\n const otherBinding = linearElement[startOrEnd === \"start\" ? \"endBinding\" : \"startBinding\"];\n return isLinearElementSimpleAndAlreadyBound(linearElement, otherBinding === null || otherBinding === void 0 ? void 0 : otherBinding.elementId, bindableElement);\n};\n\nconst isLinearElementSimpleAndAlreadyBound = (linearElement, alreadyBoundToId, bindableElement) => {\n return alreadyBoundToId === bindableElement.id && isLinearElementSimple(linearElement);\n};\n\nconst isLinearElementSimple = linearElement => linearElement.points.length < 3;\n\nconst unbindLinearElement = (linearElement, startOrEnd) => {\n const field = startOrEnd === \"start\" ? \"startBinding\" : \"endBinding\";\n const binding = linearElement[field];\n\n if (binding == null) {\n return null;\n }\n\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_9__.mutateElement)(linearElement, {\n [field]: null\n });\n return binding.elementId;\n};\n\nconst getHoveredElementForBinding = (pointerCoords, elements, elementsMap, fullShape) => {\n const hoveredElement = (0,_scene__WEBPACK_IMPORTED_MODULE_7__.getElementAtPosition)(elements, element => (0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isBindableElement)(element, false) && bindingBorderTest(element, pointerCoords, elementsMap, // disable fullshape snapping for frame elements so we\n // can bind to frame children\n fullShape && !(0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isFrameLikeElement)(element)));\n return hoveredElement;\n};\n\nconst calculateFocusAndGap = (linearElement, hoveredElement, startOrEnd, elementsMap) => {\n const direction = startOrEnd === \"start\" ? -1 : 1;\n const edgePointIndex = direction === -1 ? 0 : linearElement.points.length - 1;\n const adjacentPointIndex = edgePointIndex - direction;\n const edgePoint = _linearElementEditor__WEBPACK_IMPORTED_MODULE_10__.LinearElementEditor.getPointAtIndexGlobalCoordinates(linearElement, edgePointIndex, elementsMap);\n const adjacentPoint = _linearElementEditor__WEBPACK_IMPORTED_MODULE_10__.LinearElementEditor.getPointAtIndexGlobalCoordinates(linearElement, adjacentPointIndex, elementsMap);\n return {\n focus: determineFocusDistance(hoveredElement, adjacentPoint, edgePoint, elementsMap),\n gap: Math.max(1, distanceToBindableElement(hoveredElement, edgePoint, elementsMap))\n };\n}; // Supports translating, rotating and scaling `changedElement` with bound\n// linear elements.\n// Because scaling involves moving the focus points as well, it is\n// done before the `changedElement` is updated, and the `newSize` is passed\n// in explicitly.\n\n\nconst updateBoundElements = (changedElement, elementsMap, options) => {\n const {\n oldSize,\n simultaneouslyUpdated,\n changedElements\n } = options !== null && options !== void 0 ? options : {};\n const simultaneouslyUpdatedElementIds = getSimultaneouslyUpdatedElementIds(simultaneouslyUpdated);\n\n if (!(0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isBindableElement)(changedElement)) {\n return;\n }\n\n boundElementsVisitor(elementsMap, changedElement, element => {\n var _a, _b;\n\n if (!(0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isLinearElement)(element) || element.isDeleted) {\n return;\n } // In case the boundElements are stale\n\n\n if (!doesNeedUpdate(element, changedElement)) {\n return;\n }\n\n const bindings = {\n startBinding: maybeCalculateNewGapWhenScaling(changedElement, element.startBinding, oldSize),\n endBinding: maybeCalculateNewGapWhenScaling(changedElement, element.endBinding, oldSize)\n }; // `linearElement` is being moved/scaled already, just update the binding\n\n if (simultaneouslyUpdatedElementIds.has(element.id)) {\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_9__.mutateElement)(element, bindings);\n return;\n }\n\n const updates = bindableElementsVisitor(elementsMap, element, (bindableElement, bindingProp) => {\n var _a;\n\n if (bindableElement && (0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isBindableElement)(bindableElement) && (bindingProp === \"startBinding\" || bindingProp === \"endBinding\") && changedElement.id === ((_a = element[bindingProp]) === null || _a === void 0 ? void 0 : _a.elementId)) {\n const point = updateBoundPoint(element, bindingProp, bindings[bindingProp], bindableElement, elementsMap);\n\n if (point) {\n return {\n index: bindingProp === \"startBinding\" ? 0 : element.points.length - 1,\n point\n };\n }\n }\n\n return null;\n }).filter(update => update !== null);\n _linearElementEditor__WEBPACK_IMPORTED_MODULE_10__.LinearElementEditor.movePoints(element, updates, elementsMap, Object.assign(Object.assign({}, changedElement.id === ((_a = element.startBinding) === null || _a === void 0 ? void 0 : _a.elementId) ? {\n startBinding: bindings.startBinding\n } : {}), changedElement.id === ((_b = element.endBinding) === null || _b === void 0 ? void 0 : _b.elementId) ? {\n endBinding: bindings.endBinding\n } : {}), {\n changedElements\n });\n const boundText = (0,_textElement__WEBPACK_IMPORTED_MODULE_13__.getBoundTextElement)(element, elementsMap);\n\n if (boundText && !boundText.isDeleted) {\n (0,_textElement__WEBPACK_IMPORTED_MODULE_13__.handleBindTextResize)(element, elementsMap, false);\n }\n });\n};\n\nconst doesNeedUpdate = (boundElement, changedElement) => {\n var _a, _b;\n\n return ((_a = boundElement.startBinding) === null || _a === void 0 ? void 0 : _a.elementId) === changedElement.id || ((_b = boundElement.endBinding) === null || _b === void 0 ? void 0 : _b.elementId) === changedElement.id;\n};\n\nconst getSimultaneouslyUpdatedElementIds = simultaneouslyUpdated => {\n return new Set((simultaneouslyUpdated || []).map(element => element.id));\n};\n\nconst getHeadingForElbowArrowSnap = (p, otherPoint, bindableElement, aabb, elementsMap, origPoint) => {\n const otherPointHeading = (0,_heading__WEBPACK_IMPORTED_MODULE_15__.vectorToHeading)((0,_math__WEBPACK_IMPORTED_MODULE_16__.vectorFromPoint)(otherPoint, p));\n\n if (!bindableElement || !aabb) {\n return otherPointHeading;\n }\n\n const distance = getDistanceForBinding(origPoint, bindableElement, elementsMap);\n\n if (!distance) {\n return (0,_heading__WEBPACK_IMPORTED_MODULE_15__.vectorToHeading)((0,_math__WEBPACK_IMPORTED_MODULE_16__.vectorFromPoint)(p, (0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(bindableElement.x + bindableElement.width / 2, bindableElement.y + bindableElement.height / 2)));\n }\n\n const pointHeading = (0,_heading__WEBPACK_IMPORTED_MODULE_15__.headingForPointFromElement)(bindableElement, aabb, p);\n return pointHeading;\n};\n\nconst getDistanceForBinding = (point, bindableElement, elementsMap) => {\n const distance = distanceToBindableElement(bindableElement, point, elementsMap);\n const bindDistance = maxBindingGap(bindableElement, bindableElement.width, bindableElement.height);\n return distance > bindDistance ? null : distance;\n};\n\nconst bindPointToSnapToElementOutline = (p, otherPoint, bindableElement, elementsMap) => {\n var _a, _b, _c;\n\n const aabb = bindableElement && (0,_shapes__WEBPACK_IMPORTED_MODULE_14__.aabbForElement)(bindableElement);\n\n if (bindableElement && aabb) {\n // TODO: Dirty hacks until tangents are properly calculated\n const heading = (0,_heading__WEBPACK_IMPORTED_MODULE_15__.headingForPointFromElement)(bindableElement, aabb, p);\n const intersections = [...((_a = intersectElementWithLine(bindableElement, (0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(p[0], p[1] - 2 * bindableElement.height), (0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(p[0], p[1] + 2 * bindableElement.height), FIXED_BINDING_DISTANCE, elementsMap)) !== null && _a !== void 0 ? _a : []), ...((_b = intersectElementWithLine(bindableElement, (0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(p[0] - 2 * bindableElement.width, p[1]), (0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(p[0] + 2 * bindableElement.width, p[1]), FIXED_BINDING_DISTANCE, elementsMap)) !== null && _b !== void 0 ? _b : [])];\n const isVertical = (0,_heading__WEBPACK_IMPORTED_MODULE_15__.compareHeading)(heading, _heading__WEBPACK_IMPORTED_MODULE_15__.HEADING_LEFT) || (0,_heading__WEBPACK_IMPORTED_MODULE_15__.compareHeading)(heading, _heading__WEBPACK_IMPORTED_MODULE_15__.HEADING_RIGHT);\n const dist = Math.abs(distanceToBindableElement(bindableElement, p, elementsMap));\n const isInner = isVertical ? dist < bindableElement.width * -0.1 : dist < bindableElement.height * -0.1;\n intersections.sort((a, b) => (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointDistanceSq)(a, p) - (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointDistanceSq)(b, p));\n return isInner ? headingToMidBindPoint(otherPoint, bindableElement, aabb) : (_c = intersections.filter(i => isVertical ? Math.abs(p[1] - i[1]) < 0.1 : Math.abs(p[0] - i[0]) < 0.1)[0]) !== null && _c !== void 0 ? _c : _math__WEBPACK_IMPORTED_MODULE_16__.point;\n }\n\n return p;\n};\n\nconst headingToMidBindPoint = (p, bindableElement, aabb) => {\n const center = (0,_bounds__WEBPACK_IMPORTED_MODULE_5__.getCenterForBounds)(aabb);\n const heading = (0,_heading__WEBPACK_IMPORTED_MODULE_15__.vectorToHeading)((0,_math__WEBPACK_IMPORTED_MODULE_16__.vectorFromPoint)(p, center));\n\n switch (true) {\n case (0,_heading__WEBPACK_IMPORTED_MODULE_15__.compareHeading)(heading, _heading__WEBPACK_IMPORTED_MODULE_15__.HEADING_UP):\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)((aabb[0] + aabb[2]) / 2 + 0.1, aabb[1]), center, bindableElement.angle);\n\n case (0,_heading__WEBPACK_IMPORTED_MODULE_15__.compareHeading)(heading, _heading__WEBPACK_IMPORTED_MODULE_15__.HEADING_RIGHT):\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(aabb[2], (aabb[1] + aabb[3]) / 2 + 0.1), center, bindableElement.angle);\n\n case (0,_heading__WEBPACK_IMPORTED_MODULE_15__.compareHeading)(heading, _heading__WEBPACK_IMPORTED_MODULE_15__.HEADING_DOWN):\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)((aabb[0] + aabb[2]) / 2 - 0.1, aabb[3]), center, bindableElement.angle);\n\n default:\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(aabb[0], (aabb[1] + aabb[3]) / 2 - 0.1), center, bindableElement.angle);\n }\n};\n\nconst avoidRectangularCorner = (element, p) => {\n const center = (0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(element.x + element.width / 2, element.y + element.height / 2);\n const nonRotatedPoint = (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)(p, center, -element.angle);\n\n if (nonRotatedPoint[0] < element.x && nonRotatedPoint[1] < element.y) {\n // Top left\n if (nonRotatedPoint[1] - element.y > -FIXED_BINDING_DISTANCE) {\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(element.x - FIXED_BINDING_DISTANCE, element.y), center, element.angle);\n }\n\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(element.x, element.y - FIXED_BINDING_DISTANCE), center, element.angle);\n } else if (nonRotatedPoint[0] < element.x && nonRotatedPoint[1] > element.y + element.height) {\n // Bottom left\n if (nonRotatedPoint[0] - element.x > -FIXED_BINDING_DISTANCE) {\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(element.x, element.y + element.height + FIXED_BINDING_DISTANCE), center, element.angle);\n }\n\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(element.x - FIXED_BINDING_DISTANCE, element.y + element.height), center, element.angle);\n } else if (nonRotatedPoint[0] > element.x + element.width && nonRotatedPoint[1] > element.y + element.height) {\n // Bottom right\n if (nonRotatedPoint[0] - element.x < element.width + FIXED_BINDING_DISTANCE) {\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(element.x + element.width, element.y + element.height + FIXED_BINDING_DISTANCE), center, element.angle);\n }\n\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(element.x + element.width + FIXED_BINDING_DISTANCE, element.y + element.height), center, element.angle);\n } else if (nonRotatedPoint[0] > element.x + element.width && nonRotatedPoint[1] < element.y) {\n // Top right\n if (nonRotatedPoint[0] - element.x < element.width + FIXED_BINDING_DISTANCE) {\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(element.x + element.width, element.y - FIXED_BINDING_DISTANCE), center, element.angle);\n }\n\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(element.x + element.width + FIXED_BINDING_DISTANCE, element.y), center, element.angle);\n }\n\n return p;\n};\nconst snapToMid = (element, p, tolerance = 0.05) => {\n const {\n x,\n y,\n width,\n height,\n angle\n } = element;\n const center = (0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(x + width / 2 - 0.1, y + height / 2 - 0.1);\n const nonRotated = (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)(p, center, -angle); // snap-to-center point is adaptive to element size, but we don't want to go\n // above and below certain px distance\n\n const verticalThrehsold = (0,_math__WEBPACK_IMPORTED_MODULE_16__.clamp)(tolerance * height, 5, 80);\n const horizontalThrehsold = (0,_math__WEBPACK_IMPORTED_MODULE_16__.clamp)(tolerance * width, 5, 80);\n\n if (nonRotated[0] <= x + width / 2 && nonRotated[1] > center[1] - verticalThrehsold && nonRotated[1] < center[1] + verticalThrehsold) {\n // LEFT\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(x - FIXED_BINDING_DISTANCE, center[1]), center, angle);\n } else if (nonRotated[1] <= y + height / 2 && nonRotated[0] > center[0] - horizontalThrehsold && nonRotated[0] < center[0] + horizontalThrehsold) {\n // TOP\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(center[0], y - FIXED_BINDING_DISTANCE), center, angle);\n } else if (nonRotated[0] >= x + width / 2 && nonRotated[1] > center[1] - verticalThrehsold && nonRotated[1] < center[1] + verticalThrehsold) {\n // RIGHT\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(x + width + FIXED_BINDING_DISTANCE, center[1]), center, angle);\n } else if (nonRotated[1] >= y + height / 2 && nonRotated[0] > center[0] - horizontalThrehsold && nonRotated[0] < center[0] + horizontalThrehsold) {\n // DOWN\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(center[0], y + height + FIXED_BINDING_DISTANCE), center, angle);\n }\n\n return p;\n};\n\nconst updateBoundPoint = (linearElement, startOrEnd, binding, bindableElement, elementsMap) => {\n var _a;\n\n if (binding == null || // We only need to update the other end if this is a 2 point line element\n binding.elementId !== bindableElement.id && linearElement.points.length > 2) {\n return null;\n }\n\n const direction = startOrEnd === \"startBinding\" ? -1 : 1;\n const edgePointIndex = direction === -1 ? 0 : linearElement.points.length - 1;\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isElbowArrow)(linearElement)) {\n const fixedPoint = (_a = normalizeFixedPoint(binding.fixedPoint)) !== null && _a !== void 0 ? _a : calculateFixedPointForElbowArrowBinding(linearElement, bindableElement, startOrEnd === \"startBinding\" ? \"start\" : \"end\", elementsMap).fixedPoint;\n const globalMidPoint = (0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(bindableElement.x + bindableElement.width / 2, bindableElement.y + bindableElement.height / 2);\n const global = (0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(bindableElement.x + fixedPoint[0] * bindableElement.width, bindableElement.y + fixedPoint[1] * bindableElement.height);\n const rotatedGlobal = (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)(global, globalMidPoint, bindableElement.angle);\n return _linearElementEditor__WEBPACK_IMPORTED_MODULE_10__.LinearElementEditor.pointFromAbsoluteCoords(linearElement, rotatedGlobal, elementsMap);\n }\n\n const adjacentPointIndex = edgePointIndex - direction;\n const adjacentPoint = _linearElementEditor__WEBPACK_IMPORTED_MODULE_10__.LinearElementEditor.getPointAtIndexGlobalCoordinates(linearElement, adjacentPointIndex, elementsMap);\n const focusPointAbsolute = determineFocusPoint(bindableElement, binding.focus, adjacentPoint, elementsMap);\n let newEdgePoint; // The linear element was not originally pointing inside the bound shape,\n // we can point directly at the focus point\n\n if (binding.gap === 0) {\n newEdgePoint = focusPointAbsolute;\n } else {\n const intersections = intersectElementWithLine(bindableElement, adjacentPoint, focusPointAbsolute, binding.gap, elementsMap);\n\n if (!intersections || intersections.length === 0) {\n // This should never happen, since focusPoint should always be\n // inside the element, but just in case, bail out\n newEdgePoint = focusPointAbsolute;\n } else {\n // Guaranteed to intersect because focusPoint is always inside the shape\n newEdgePoint = intersections[0];\n }\n }\n\n return _linearElementEditor__WEBPACK_IMPORTED_MODULE_10__.LinearElementEditor.pointFromAbsoluteCoords(linearElement, newEdgePoint, elementsMap);\n};\n\nconst calculateFixedPointForElbowArrowBinding = (linearElement, hoveredElement, startOrEnd, elementsMap) => {\n const bounds = [hoveredElement.x, hoveredElement.y, hoveredElement.x + hoveredElement.width, hoveredElement.y + hoveredElement.height];\n const edgePointIndex = startOrEnd === \"start\" ? 0 : linearElement.points.length - 1;\n const globalPoint = _linearElementEditor__WEBPACK_IMPORTED_MODULE_10__.LinearElementEditor.getPointAtIndexGlobalCoordinates(linearElement, edgePointIndex, elementsMap);\n const otherGlobalPoint = _linearElementEditor__WEBPACK_IMPORTED_MODULE_10__.LinearElementEditor.getPointAtIndexGlobalCoordinates(linearElement, edgePointIndex, elementsMap);\n const snappedPoint = bindPointToSnapToElementOutline(globalPoint, otherGlobalPoint, hoveredElement, elementsMap);\n const globalMidPoint = (0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(bounds[0] + (bounds[2] - bounds[0]) / 2, bounds[1] + (bounds[3] - bounds[1]) / 2);\n const nonRotatedSnappedGlobalPoint = (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)(snappedPoint, globalMidPoint, -hoveredElement.angle);\n return {\n fixedPoint: normalizeFixedPoint([(nonRotatedSnappedGlobalPoint[0] - hoveredElement.x) / hoveredElement.width, (nonRotatedSnappedGlobalPoint[1] - hoveredElement.y) / hoveredElement.height])\n };\n};\n\nconst maybeCalculateNewGapWhenScaling = (changedElement, currentBinding, newSize) => {\n if (currentBinding == null || newSize == null) {\n return currentBinding;\n }\n\n const {\n width: newWidth,\n height: newHeight\n } = newSize;\n const {\n width,\n height\n } = changedElement;\n const newGap = Math.max(1, Math.min(maxBindingGap(changedElement, newWidth, newHeight), currentBinding.gap * (newWidth < newHeight ? newWidth / width : newHeight / height)));\n return Object.assign(Object.assign({}, currentBinding), {\n gap: newGap\n });\n};\n\nconst getElligibleElementForBindingElement = (linearElement, startOrEnd, elementsMap, elements) => {\n return getHoveredElementForBinding(getLinearElementEdgeCoors(linearElement, startOrEnd, elementsMap), elements, elementsMap);\n};\n\nconst getLinearElementEdgeCoors = (linearElement, startOrEnd, elementsMap) => {\n const index = startOrEnd === \"start\" ? 0 : -1;\n return (0,_utils__WEBPACK_IMPORTED_MODULE_11__.tupleToCoors)(_linearElementEditor__WEBPACK_IMPORTED_MODULE_10__.LinearElementEditor.getPointAtIndexGlobalCoordinates(linearElement, index, elementsMap));\n}; // We need to:\n// 1: Update elements not selected to point to duplicated elements\n// 2: Update duplicated elements to point to other duplicated elements\n\n\nconst fixBindingsAfterDuplication = (sceneElements, oldElements, oldIdToDuplicatedId, // There are three copying mechanisms: Copy-paste, duplication and alt-drag.\n// Only when alt-dragging the new \"duplicates\" act as the \"old\", while\n// the \"old\" elements act as the \"new copy\" - essentially working reverse\n// to the other two.\nduplicatesServeAsOld) => {\n // First collect all the binding/bindable elements, so we only update\n // each once, regardless of whether they were duplicated or not.\n const allBoundElementIds = new Set();\n const allBindableElementIds = new Set();\n const shouldReverseRoles = duplicatesServeAsOld === \"duplicatesServeAsOld\";\n const duplicateIdToOldId = new Map([...oldIdToDuplicatedId].map(([key, value]) => [value, key]));\n oldElements.forEach(oldElement => {\n const {\n boundElements\n } = oldElement;\n\n if (boundElements != null && boundElements.length > 0) {\n boundElements.forEach(boundElement => {\n if (shouldReverseRoles && !oldIdToDuplicatedId.has(boundElement.id)) {\n allBoundElementIds.add(boundElement.id);\n }\n });\n allBindableElementIds.add(oldIdToDuplicatedId.get(oldElement.id));\n }\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isBindingElement)(oldElement)) {\n if (oldElement.startBinding != null) {\n const {\n elementId\n } = oldElement.startBinding;\n\n if (shouldReverseRoles && !oldIdToDuplicatedId.has(elementId)) {\n allBindableElementIds.add(elementId);\n }\n }\n\n if (oldElement.endBinding != null) {\n const {\n elementId\n } = oldElement.endBinding;\n\n if (shouldReverseRoles && !oldIdToDuplicatedId.has(elementId)) {\n allBindableElementIds.add(elementId);\n }\n }\n\n if (oldElement.startBinding != null || oldElement.endBinding != null) {\n allBoundElementIds.add(oldIdToDuplicatedId.get(oldElement.id));\n }\n }\n }); // Update the linear elements\n\n sceneElements.filter(({\n id\n }) => allBoundElementIds.has(id)).forEach(element => {\n const {\n startBinding,\n endBinding\n } = element;\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_9__.mutateElement)(element, {\n startBinding: newBindingAfterDuplication(startBinding, oldIdToDuplicatedId),\n endBinding: newBindingAfterDuplication(endBinding, oldIdToDuplicatedId)\n });\n }); // Update the bindable shapes\n\n sceneElements.filter(({\n id\n }) => allBindableElementIds.has(id)).forEach(bindableElement => {\n var _a;\n\n const oldElementId = duplicateIdToOldId.get(bindableElement.id);\n const boundElements = (_a = sceneElements.find(({\n id\n }) => id === oldElementId)) === null || _a === void 0 ? void 0 : _a.boundElements;\n\n if (boundElements && boundElements.length > 0) {\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_9__.mutateElement)(bindableElement, {\n boundElements: boundElements.map(boundElement => oldIdToDuplicatedId.has(boundElement.id) ? {\n id: oldIdToDuplicatedId.get(boundElement.id),\n type: boundElement.type\n } : boundElement)\n });\n }\n });\n};\n\nconst newBindingAfterDuplication = (binding, oldIdToDuplicatedId) => {\n var _a;\n\n if (binding == null) {\n return null;\n }\n\n return Object.assign(Object.assign({}, binding), {\n elementId: (_a = oldIdToDuplicatedId.get(binding.elementId)) !== null && _a !== void 0 ? _a : binding.elementId\n });\n};\n\nconst fixBindingsAfterDeletion = (sceneElements, deletedElements) => {\n const elements = (0,_utils__WEBPACK_IMPORTED_MODULE_11__.arrayToMap)(sceneElements);\n\n for (const element of deletedElements) {\n BoundElement.unbindAffected(elements, element, _mutateElement__WEBPACK_IMPORTED_MODULE_9__.mutateElement);\n BindableElement.unbindAffected(elements, element, _mutateElement__WEBPACK_IMPORTED_MODULE_9__.mutateElement);\n }\n};\n\nconst newBoundElements = (boundElements, idsToRemove, elementsToAdd = []) => {\n if (!boundElements) {\n return null;\n }\n\n const nextBoundElements = boundElements.filter(boundElement => !idsToRemove.has(boundElement.id));\n nextBoundElements.push(...elementsToAdd.map(x => ({\n id: x.id,\n type: x.type\n })));\n return nextBoundElements;\n};\n\nconst bindingBorderTest = (element, {\n x,\n y\n}, elementsMap, fullShape) => {\n const threshold = maxBindingGap(element, element.width, element.height);\n const shape = (0,_shapes__WEBPACK_IMPORTED_MODULE_14__.getElementShape)(element, elementsMap);\n return (0,_utils_collision__WEBPACK_IMPORTED_MODULE_6__.isPointOnShape)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(x, y), shape, threshold) || fullShape === true && (0,_shapes__WEBPACK_IMPORTED_MODULE_14__.pointInsideBounds)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(x, y), (0,_shapes__WEBPACK_IMPORTED_MODULE_14__.aabbForElement)(element));\n};\nconst maxBindingGap = (element, elementWidth, elementHeight) => {\n // Aligns diamonds with rectangles\n const shapeRatio = element.type === \"diamond\" ? 1 / Math.sqrt(2) : 1;\n const smallerDimension = shapeRatio * Math.min(elementWidth, elementHeight); // We make the bindable boundary bigger for bigger elements\n\n return Math.max(16, Math.min(0.25 * smallerDimension, 32));\n};\nconst distanceToBindableElement = (element, point, elementsMap) => {\n switch (element.type) {\n case \"rectangle\":\n case \"image\":\n case \"text\":\n case \"iframe\":\n case \"embeddable\":\n case \"frame\":\n case \"magicframe\":\n return distanceToRectangle(element, point, elementsMap);\n\n case \"diamond\":\n return distanceToDiamond(element, point, elementsMap);\n\n case \"ellipse\":\n return distanceToEllipse(element, point, elementsMap);\n }\n};\n\nconst distanceToRectangle = (element, p, elementsMap) => {\n const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, p, elementsMap);\n return Math.max(_math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.distanceToLine(pointRel, _math_ga_galines__WEBPACK_IMPORTED_MODULE_3__.equation(0, 1, -hheight)), _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.distanceToLine(pointRel, _math_ga_galines__WEBPACK_IMPORTED_MODULE_3__.equation(1, 0, -hwidth)));\n};\n\nconst distanceToDiamond = (element, point, elementsMap) => {\n const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, point, elementsMap);\n const side = _math_ga_galines__WEBPACK_IMPORTED_MODULE_3__.equation(hheight, hwidth, -hheight * hwidth);\n return _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.distanceToLine(pointRel, side);\n};\n\nconst distanceToEllipse = (element, point, elementsMap) => {\n const [pointRel, tangent] = ellipseParamsForTest(element, point, elementsMap);\n return -_math_ga_galines__WEBPACK_IMPORTED_MODULE_3__.sign(tangent) * _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.distanceToLine(pointRel, tangent);\n};\n\nconst ellipseParamsForTest = (element, point, elementsMap) => {\n const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, point, elementsMap);\n const [px, py] = _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.toTuple(pointRel); // We're working in positive quadrant, so start with `t = 45deg`, `tx=cos(t)`\n\n let tx = 0.707;\n let ty = 0.707;\n const a = hwidth;\n const b = hheight; // This is a numerical method to find the params tx, ty at which\n // the ellipse has the closest point to the given point\n\n [0, 1, 2, 3].forEach(_ => {\n const xx = a * tx;\n const yy = b * ty;\n const ex = (a * a - b * b) * tx ** 3 / a;\n const ey = (b * b - a * a) * ty ** 3 / b;\n const rx = xx - ex;\n const ry = yy - ey;\n const qx = px - ex;\n const qy = py - ey;\n const r = Math.hypot(ry, rx);\n const q = Math.hypot(qy, qx);\n tx = Math.min(1, Math.max(0, (qx * r / q + ex) / a));\n ty = Math.min(1, Math.max(0, (qy * r / q + ey) / b));\n const t = Math.hypot(ty, tx);\n tx /= t;\n ty /= t;\n });\n const closestPoint = _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.point(a * tx, b * ty);\n const tangent = _math_ga_galines__WEBPACK_IMPORTED_MODULE_3__.orthogonalThrough(pointRel, closestPoint);\n return [pointRel, tangent];\n}; // Returns:\n// 1. the point relative to the elements (x, y) position\n// 2. the point relative to the element's center with positive (x, y)\n// 3. half element width\n// 4. half element height\n//\n// Note that for linear elements the (x, y) position is not at the\n// top right corner of their boundary.\n//\n// Rectangles, diamonds and ellipses are symmetrical over axes,\n// and other elements have a rectangular boundary,\n// so we only need to perform hit tests for the positive quadrant.\n\n\nconst pointRelativeToElement = (element, pointTuple, elementsMap) => {\n const point = _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.from(pointTuple);\n const [x1, y1, x2, y2] = (0,_bounds__WEBPACK_IMPORTED_MODULE_5__.getElementAbsoluteCoords)(element, elementsMap);\n const center = coordsCenter(x1, y1, x2, y2); // GA has angle orientation opposite to `rotate`\n\n const rotate = _math_ga_gatransforms__WEBPACK_IMPORTED_MODULE_4__.rotation(center, element.angle);\n const pointRotated = _math_ga_gatransforms__WEBPACK_IMPORTED_MODULE_4__.apply(rotate, point);\n const pointRelToCenter = _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.sub(pointRotated, _math_ga_gadirections__WEBPACK_IMPORTED_MODULE_2__.from(center));\n const pointRelToCenterAbs = _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.abs(pointRelToCenter);\n const elementPos = _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.offset(element.x, element.y);\n const pointRelToPos = _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.sub(pointRotated, elementPos);\n const halfWidth = (x2 - x1) / 2;\n const halfHeight = (y2 - y1) / 2;\n return [pointRelToPos, pointRelToCenterAbs, halfWidth, halfHeight];\n};\n\nconst relativizationToElementCenter = (element, elementsMap) => {\n const [x1, y1, x2, y2] = (0,_bounds__WEBPACK_IMPORTED_MODULE_5__.getElementAbsoluteCoords)(element, elementsMap);\n const center = coordsCenter(x1, y1, x2, y2); // GA has angle orientation opposite to `rotate`\n\n const rotate = _math_ga_gatransforms__WEBPACK_IMPORTED_MODULE_4__.rotation(center, element.angle);\n const translate = _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.reverse(_math_ga_gatransforms__WEBPACK_IMPORTED_MODULE_4__.translation(_math_ga_gadirections__WEBPACK_IMPORTED_MODULE_2__.from(center)));\n return _math_ga_gatransforms__WEBPACK_IMPORTED_MODULE_4__.compose(rotate, translate);\n};\n\nconst coordsCenter = (x1, y1, x2, y2) => {\n return _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.point((x1 + x2) / 2, (y1 + y2) / 2);\n}; // The focus distance is the oriented ratio between the size of\n// the `element` and the \"focus image\" of the element on which\n// all focus points lie, so it's a number between -1 and 1.\n// The line going through `a` and `b` is a tangent to the \"focus image\"\n// of the element.\n\n\nconst determineFocusDistance = ( //zsviczian added export\nelement, // Point on the line, in absolute coordinates\na, // Another point on the line, in absolute coordinates (closer to element)\nb, elementsMap) => {\n const relateToCenter = relativizationToElementCenter(element, elementsMap);\n const aRel = _math_ga_gatransforms__WEBPACK_IMPORTED_MODULE_4__.apply(relateToCenter, _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.from(a));\n const bRel = _math_ga_gatransforms__WEBPACK_IMPORTED_MODULE_4__.apply(relateToCenter, _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.from(b));\n const line = _math_ga_galines__WEBPACK_IMPORTED_MODULE_3__.through(aRel, bRel);\n const q = element.height / element.width;\n const hwidth = element.width / 2;\n const hheight = element.height / 2;\n const n = line[2];\n const m = line[3];\n const c = line[1];\n const mabs = Math.abs(m);\n const nabs = Math.abs(n);\n let ret;\n\n switch (element.type) {\n case \"rectangle\":\n case \"image\":\n case \"text\":\n case \"iframe\":\n case \"embeddable\":\n case \"frame\":\n case \"magicframe\":\n ret = c / (hwidth * (nabs + q * mabs));\n break;\n\n case \"diamond\":\n ret = mabs < nabs ? c / (nabs * hwidth) : c / (mabs * hheight);\n break;\n\n case \"ellipse\":\n ret = c / (hwidth * Math.sqrt(n ** 2 + q ** 2 * m ** 2));\n break;\n }\n\n return ret || 0;\n};\n\nconst determineFocusPoint = (element, // The oriented, relative distance from the center of `element` of the\n// returned focusPoint\nfocus, adjecentPoint, elementsMap) => {\n if (focus === 0) {\n const [x1, y1, x2, y2] = (0,_bounds__WEBPACK_IMPORTED_MODULE_5__.getElementAbsoluteCoords)(element, elementsMap);\n const center = coordsCenter(x1, y1, x2, y2);\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointFromPair)(_math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.toTuple(center));\n }\n\n const relateToCenter = relativizationToElementCenter(element, elementsMap);\n const adjecentPointRel = _math_ga_gatransforms__WEBPACK_IMPORTED_MODULE_4__.apply(relateToCenter, _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.from(adjecentPoint));\n const reverseRelateToCenter = _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.reverse(relateToCenter);\n let point;\n\n switch (element.type) {\n case \"rectangle\":\n case \"image\":\n case \"text\":\n case \"diamond\":\n case \"iframe\":\n case \"embeddable\":\n case \"frame\":\n case \"magicframe\":\n point = findFocusPointForRectangulars(element, focus, adjecentPointRel);\n break;\n\n case \"ellipse\":\n point = findFocusPointForEllipse(element, focus, adjecentPointRel);\n break;\n }\n\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointFromPair)(_math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.toTuple(_math_ga_gatransforms__WEBPACK_IMPORTED_MODULE_4__.apply(reverseRelateToCenter, point)));\n}; // Returns 2 or 0 intersection points between line going through `a` and `b`\n// and the `element`, in ascending order of distance from `a`.\n\n\nconst intersectElementWithLine = ( //zsviczian added export\nelement, // Point on the line, in absolute coordinates\na, // Another point on the line, in absolute coordinates\nb, // If given, the element is inflated by this value\ngap = 0, elementsMap) => {\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isRectangularElement)(element)) {\n return (0,_utils_geometry_shape__WEBPACK_IMPORTED_MODULE_17__.segmentIntersectRectangleElement)(element, (0,_math__WEBPACK_IMPORTED_MODULE_16__.lineSegment)(a, b), gap);\n }\n\n const relateToCenter = relativizationToElementCenter(element, elementsMap);\n const aRel = _math_ga_gatransforms__WEBPACK_IMPORTED_MODULE_4__.apply(relateToCenter, _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.from(a));\n const bRel = _math_ga_gatransforms__WEBPACK_IMPORTED_MODULE_4__.apply(relateToCenter, _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.from(b));\n const line = _math_ga_galines__WEBPACK_IMPORTED_MODULE_3__.through(aRel, bRel);\n const reverseRelateToCenter = _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.reverse(relateToCenter);\n const intersections = getSortedElementLineIntersections(element, line, aRel, gap);\n return intersections.map(point => (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointFromPair)(_math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.toTuple(_math_ga_gatransforms__WEBPACK_IMPORTED_MODULE_4__.apply(reverseRelateToCenter, point))));\n};\n\nconst getSortedElementLineIntersections = (element, // Relative to element center\nline, // Relative to element center\nnearPoint, gap = 0) => {\n let intersections;\n\n switch (element.type) {\n case \"rectangle\":\n case \"image\":\n case \"text\":\n case \"diamond\":\n case \"iframe\":\n case \"embeddable\":\n case \"frame\":\n case \"magicframe\":\n const corners = getCorners(element);\n intersections = corners.flatMap((point, i) => {\n const edge = [point, corners[(i + 1) % 4]];\n return intersectSegment(line, offsetSegment(edge, gap));\n }).concat(corners.flatMap(point => getCircleIntersections(point, gap, line)));\n break;\n\n case \"ellipse\":\n intersections = getEllipseIntersections(element, gap, line);\n break;\n }\n\n if (intersections.length < 2) {\n // Ignore the \"edge\" case of only intersecting with a single corner\n return [];\n }\n\n const sortedIntersections = intersections.sort((i1, i2) => _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.distance(i1, nearPoint) - _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.distance(i2, nearPoint));\n return [sortedIntersections[0], sortedIntersections[sortedIntersections.length - 1]];\n};\n\nconst getCorners = (element, scale = 1) => {\n const hx = scale * element.width / 2;\n const hy = scale * element.height / 2;\n\n switch (element.type) {\n case \"rectangle\":\n case \"image\":\n case \"text\":\n case \"iframe\":\n case \"embeddable\":\n case \"frame\":\n case \"magicframe\":\n return [_math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.point(hx, hy), _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.point(hx, -hy), _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.point(-hx, -hy), _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.point(-hx, hy)];\n\n case \"diamond\":\n return [_math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.point(0, hy), _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.point(hx, 0), _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.point(0, -hy), _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.point(-hx, 0)];\n }\n}; // Returns intersection of `line` with `segment`, with `segment` moved by\n// `gap` in its polar direction.\n// If intersection coincides with second segment point returns empty array.\n\n\nconst intersectSegment = (line, segment) => {\n const [a, b] = segment;\n const aDist = _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.distanceToLine(a, line);\n const bDist = _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.distanceToLine(b, line);\n\n if (aDist * bDist >= 0) {\n // The intersection is outside segment `(a, b)`\n return [];\n }\n\n return [_math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.intersect(line, _math_ga_galines__WEBPACK_IMPORTED_MODULE_3__.through(a, b))];\n};\n\nconst offsetSegment = (segment, distance) => {\n const [a, b] = segment;\n const offset = _math_ga_gatransforms__WEBPACK_IMPORTED_MODULE_4__.translationOrthogonal(_math_ga_gadirections__WEBPACK_IMPORTED_MODULE_2__.fromTo(a, b), distance);\n return [_math_ga_gatransforms__WEBPACK_IMPORTED_MODULE_4__.apply(offset, a), _math_ga_gatransforms__WEBPACK_IMPORTED_MODULE_4__.apply(offset, b)];\n};\n\nconst getEllipseIntersections = (element, gap, line) => {\n const a = element.width / 2 + gap;\n const b = element.height / 2 + gap;\n const m = line[2];\n const n = line[3];\n const c = line[1];\n const squares = a * a * m * m + b * b * n * n;\n const discr = squares - c * c;\n\n if (squares === 0 || discr <= 0) {\n return [];\n }\n\n const discrRoot = Math.sqrt(discr);\n const xn = -a * a * m * c;\n const yn = -b * b * n * c;\n return [_math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.point((xn + a * b * n * discrRoot) / squares, (yn - a * b * m * discrRoot) / squares), _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.point((xn - a * b * n * discrRoot) / squares, (yn + a * b * m * discrRoot) / squares)];\n};\n\nconst getCircleIntersections = (center, radius, line) => {\n if (radius === 0) {\n return _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.distanceToLine(line, center) === 0 ? [center] : [];\n }\n\n const m = line[2];\n const n = line[3];\n const c = line[1];\n const [a, b] = _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.toTuple(center);\n const r = radius;\n const squares = m * m + n * n;\n const discr = r * r * squares - (m * a + n * b + c) ** 2;\n\n if (squares === 0 || discr <= 0) {\n return [];\n }\n\n const discrRoot = Math.sqrt(discr);\n const xn = a * n * n - b * m * n - m * c;\n const yn = b * m * m - a * m * n - n * c;\n return [_math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.point((xn + n * discrRoot) / squares, (yn - m * discrRoot) / squares), _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.point((xn - n * discrRoot) / squares, (yn + m * discrRoot) / squares)];\n}; // The focus point is the tangent point of the \"focus image\" of the\n// `element`, where the tangent goes through `point`.\n\n\nconst findFocusPointForEllipse = (ellipse, // Between -1 and 1 (not 0) the relative size of the \"focus image\" of\n// the element on which the focus point lies\nrelativeDistance, // The point for which we're trying to find the focus point, relative\n// to the ellipse center.\npoint) => {\n const relativeDistanceAbs = Math.abs(relativeDistance);\n const a = ellipse.width * relativeDistanceAbs / 2;\n const b = ellipse.height * relativeDistanceAbs / 2;\n const orientation = Math.sign(relativeDistance);\n const [px, pyo] = _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.toTuple(point); // The calculation below can't handle py = 0\n\n const py = pyo === 0 ? 0.0001 : pyo;\n const squares = px ** 2 * b ** 2 + py ** 2 * a ** 2; // Tangent mx + ny + 1 = 0\n\n const m = (-px * b ** 2 + orientation * py * Math.sqrt(Math.max(0, squares - a ** 2 * b ** 2))) / squares;\n let n = (-m * px - 1) / py;\n\n if (n === 0) {\n // if zero {-0, 0}, fall back to a same-sign value in the similar range\n n = (Object.is(n, -0) ? -1 : 1) * 0.01;\n }\n\n const x = -(a ** 2 * m) / (n ** 2 * b ** 2 + m ** 2 * a ** 2);\n return _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.point(x, (-m * x - 1) / (n === 0 ? 0.0001 : n)); //zsviczian https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/1054\n};\n\nconst findFocusPointForRectangulars = (element, // Between -1 and 1 for how far away should the focus point be relative\n// to the size of the element. Sign determines orientation.\nrelativeDistance, // The point for which we're trying to find the focus point, relative\n// to the element center.\npoint) => {\n const relativeDistanceAbs = Math.abs(relativeDistance);\n const orientation = Math.sign(relativeDistance);\n const corners = getCorners(element, relativeDistanceAbs);\n let maxDistance = 0;\n let tangentPoint = null;\n corners.forEach(corner => {\n const distance = orientation * _math_ga_galines__WEBPACK_IMPORTED_MODULE_3__.through(point, corner)[1];\n\n if (distance > maxDistance) {\n maxDistance = distance;\n tangentPoint = corner;\n }\n });\n return tangentPoint;\n};\n\nconst bindingProperties = new Set([\"boundElements\", \"frameId\", \"containerId\", \"startBinding\", \"endBinding\"]);\n/**\n * Tries to visit each bound element (does not have to be found).\n */\n\nconst boundElementsVisitor = (elements, element, visit) => {\n var _a, _b;\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isBindableElement)(element)) {\n // create new instance so that possible mutations won't play a role in visiting order\n const boundElements = (_b = (_a = element.boundElements) === null || _a === void 0 ? void 0 : _a.slice()) !== null && _b !== void 0 ? _b : []; // last added text should be the one we keep (~previous are duplicates)\n\n boundElements.forEach(({\n id\n }) => {\n visit(elements.get(id), \"boundElements\", id);\n });\n }\n};\n/**\n * Tries to visit each bindable element (does not have to be found).\n */\n\n\nconst bindableElementsVisitor = (elements, element, visit) => {\n const result = [];\n\n if (element.frameId) {\n const id = element.frameId;\n result.push(visit(elements.get(id), \"frameId\", id));\n }\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isBoundToContainer)(element)) {\n const id = element.containerId;\n result.push(visit(elements.get(id), \"containerId\", id));\n }\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isArrowElement)(element)) {\n if (element.startBinding) {\n const id = element.startBinding.elementId;\n result.push(visit(elements.get(id), \"startBinding\", id));\n }\n\n if (element.endBinding) {\n const id = element.endBinding.elementId;\n result.push(visit(elements.get(id), \"endBinding\", id));\n }\n }\n\n return result;\n};\n/**\n * Bound element containing bindings to `frameId`, `containerId`, `startBinding` or `endBinding`.\n */\n\n\nclass BoundElement {\n /**\n * Unbind the affected non deleted bindable elements (removing element from `boundElements`).\n * - iterates non deleted bindable elements (`containerId` | `startBinding.elementId` | `endBinding.elementId`) of the current element\n * - prepares updates to unbind each bindable element's `boundElements` from the current element\n */\n static unbindAffected(elements, boundElement, updateElementWith) {\n if (!boundElement) {\n return;\n }\n\n bindableElementsVisitor(elements, boundElement, bindableElement => {\n // bindable element is deleted, this is fine\n if (!bindableElement || bindableElement.isDeleted) {\n return;\n }\n\n boundElementsVisitor(elements, bindableElement, (_, __, boundElementId) => {\n if (boundElementId === boundElement.id) {\n updateElementWith(bindableElement, {\n boundElements: newBoundElements(bindableElement.boundElements, new Set([boundElementId]))\n });\n }\n });\n });\n }\n\n}\n/**\n * Rebind the next affected non deleted bindable elements (adding element to `boundElements`).\n * - iterates non deleted bindable elements (`containerId` | `startBinding.elementId` | `endBinding.elementId`) of the current element\n * - prepares updates to rebind each bindable element's `boundElements` to the current element\n *\n * NOTE: rebind expects that affected elements were previously unbound with `BoundElement.unbindAffected`\n */\n\nBoundElement.rebindAffected = (elements, boundElement, updateElementWith) => {\n // don't try to rebind element that is deleted\n if (!boundElement || boundElement.isDeleted) {\n return;\n }\n\n bindableElementsVisitor(elements, boundElement, (bindableElement, bindingProp) => {\n var _a, _b; // unbind from bindable elements, as bindings from non deleted elements into deleted elements are incorrect\n\n\n if (!bindableElement || bindableElement.isDeleted) {\n updateElementWith(boundElement, {\n [bindingProp]: null\n });\n return;\n } // frame bindings are unidirectional, there is nothing to rebind\n\n\n if (bindingProp === \"frameId\") {\n return;\n }\n\n if ((_a = bindableElement.boundElements) === null || _a === void 0 ? void 0 : _a.find(x => x.id === boundElement.id)) {\n return;\n }\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isArrowElement)(boundElement)) {\n // rebind if not found!\n updateElementWith(bindableElement, {\n boundElements: newBoundElements(bindableElement.boundElements, new Set(), new Array(boundElement))\n });\n }\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isTextElement)(boundElement)) {\n if (!((_b = bindableElement.boundElements) === null || _b === void 0 ? void 0 : _b.find(x => x.type === \"text\"))) {\n // rebind only if there is no other text bound already\n updateElementWith(bindableElement, {\n boundElements: newBoundElements(bindableElement.boundElements, new Set(), new Array(boundElement))\n });\n } else {\n // unbind otherwise\n updateElementWith(boundElement, {\n [bindingProp]: null\n });\n }\n }\n });\n};\n/**\n * Bindable element containing bindings to `boundElements`.\n */\n\n\nclass BindableElement {\n /**\n * Unbind the affected non deleted bound elements (resetting `containerId`, `startBinding`, `endBinding` to `null`).\n * - iterates through non deleted `boundElements` of the current element\n * - prepares updates to unbind each bound element from the current element\n */\n static unbindAffected(elements, bindableElement, updateElementWith) {\n if (!bindableElement) {\n return;\n }\n\n boundElementsVisitor(elements, bindableElement, boundElement => {\n // bound element is deleted, this is fine\n if (!boundElement || boundElement.isDeleted) {\n return;\n }\n\n bindableElementsVisitor(elements, boundElement, (_, bindingProp, bindableElementId) => {\n // making sure there is an element to be unbound\n if (bindableElementId === bindableElement.id) {\n updateElementWith(boundElement, {\n [bindingProp]: null\n });\n }\n });\n });\n }\n\n}\n/**\n * Rebind the affected non deleted bound elements (for now setting only `containerId`, as we cannot rebind arrows atm).\n * - iterates through non deleted `boundElements` of the current element\n * - prepares updates to rebind each bound element to the current element or unbind it from `boundElements` in case of conflicts\n *\n * NOTE: rebind expects that affected elements were previously unbound with `BindaleElement.unbindAffected`\n */\n\nBindableElement.rebindAffected = (elements, bindableElement, updateElementWith) => {\n // don't try to rebind element that is deleted (i.e. updated as deleted)\n if (!bindableElement || bindableElement.isDeleted) {\n return;\n }\n\n boundElementsVisitor(elements, bindableElement, (boundElement, _, boundElementId) => {\n var _a, _b, _c; // unbind from bindable elements, as bindings from non deleted elements into deleted elements are incorrect\n\n\n if (!boundElement || boundElement.isDeleted) {\n updateElementWith(bindableElement, {\n boundElements: newBoundElements(bindableElement.boundElements, new Set([boundElementId]))\n });\n return;\n }\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isTextElement)(boundElement)) {\n const boundElements = (_b = (_a = bindableElement.boundElements) === null || _a === void 0 ? void 0 : _a.slice()) !== null && _b !== void 0 ? _b : []; // check if this is the last element in the array, if not, there is an previously bound text which should be unbound\n\n if (((_c = boundElements.reverse().find(x => x.type === \"text\")) === null || _c === void 0 ? void 0 : _c.id) === boundElement.id) {\n if (boundElement.containerId !== bindableElement.id) {\n // rebind if not bound already!\n updateElementWith(boundElement, {\n containerId: bindableElement.id\n });\n }\n } else {\n if (boundElement.containerId !== null) {\n // unbind if not unbound already\n updateElementWith(boundElement, {\n containerId: null\n });\n } // unbind from boundElements as the element got bound to some other element in the meantime\n\n\n updateElementWith(bindableElement, {\n boundElements: newBoundElements(bindableElement.boundElements, new Set([boundElement.id]))\n });\n }\n }\n });\n};\n\nconst getGlobalFixedPointForBindableElement = (fixedPointRatio, element) => {\n const [fixedX, fixedY] = normalizeFixedPoint(fixedPointRatio);\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(element.x + element.width * fixedX, element.y + element.height * fixedY), (0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(element.x + element.width / 2, element.y + element.height / 2), element.angle);\n};\n\nconst getGlobalFixedPoints = (arrow, elementsMap) => {\n const startElement = arrow.startBinding && elementsMap.get(arrow.startBinding.elementId);\n const endElement = arrow.endBinding && elementsMap.get(arrow.endBinding.elementId);\n const startPoint = startElement && arrow.startBinding ? getGlobalFixedPointForBindableElement(arrow.startBinding.fixedPoint, startElement) : (0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(arrow.x + arrow.points[0][0], arrow.y + arrow.points[0][1]);\n const endPoint = endElement && arrow.endBinding ? getGlobalFixedPointForBindableElement(arrow.endBinding.fixedPoint, endElement) : (0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(arrow.x + arrow.points[arrow.points.length - 1][0], arrow.y + arrow.points[arrow.points.length - 1][1]);\n return [startPoint, endPoint];\n};\n\nconst getArrowLocalFixedPoints = (arrow, elementsMap) => {\n const [startPoint, endPoint] = getGlobalFixedPoints(arrow, elementsMap);\n return [_linearElementEditor__WEBPACK_IMPORTED_MODULE_10__.LinearElementEditor.pointFromAbsoluteCoords(arrow, startPoint, elementsMap), _linearElementEditor__WEBPACK_IMPORTED_MODULE_10__.LinearElementEditor.pointFromAbsoluteCoords(arrow, endPoint, elementsMap)];\n};\nconst normalizeFixedPoint = fixedPoint => {\n // Do not allow a precise 0.5 for fixed point ratio\n // to avoid jumping arrow heading due to floating point imprecision\n if (fixedPoint && (fixedPoint[0] === 0.5 || fixedPoint[1] === 0.5)) {\n return fixedPoint.map(ratio => ratio === 0.5 ? 0.5001 : ratio);\n }\n\n return fixedPoint;\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./element/binding.ts?");
|
|
2787
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"BindableElement\": () => (/* binding */ BindableElement),\n/* harmony export */ \"BoundElement\": () => (/* binding */ BoundElement),\n/* harmony export */ \"FIXED_BINDING_DISTANCE\": () => (/* binding */ FIXED_BINDING_DISTANCE),\n/* harmony export */ \"avoidRectangularCorner\": () => (/* binding */ avoidRectangularCorner),\n/* harmony export */ \"bindLinearElement\": () => (/* binding */ bindLinearElement),\n/* harmony export */ \"bindOrUnbindLinearElement\": () => (/* binding */ bindOrUnbindLinearElement),\n/* harmony export */ \"bindOrUnbindLinearElements\": () => (/* binding */ bindOrUnbindLinearElements),\n/* harmony export */ \"bindPointToSnapToElementOutline\": () => (/* binding */ bindPointToSnapToElementOutline),\n/* harmony export */ \"bindingBorderTest\": () => (/* binding */ bindingBorderTest),\n/* harmony export */ \"bindingProperties\": () => (/* binding */ bindingProperties),\n/* harmony export */ \"calculateFixedPointForElbowArrowBinding\": () => (/* binding */ calculateFixedPointForElbowArrowBinding),\n/* harmony export */ \"determineFocusDistance\": () => (/* binding */ determineFocusDistance),\n/* harmony export */ \"distanceToBindableElement\": () => (/* binding */ distanceToBindableElement),\n/* harmony export */ \"fixBindingsAfterDeletion\": () => (/* binding */ fixBindingsAfterDeletion),\n/* harmony export */ \"fixBindingsAfterDuplication\": () => (/* binding */ fixBindingsAfterDuplication),\n/* harmony export */ \"getArrowLocalFixedPoints\": () => (/* binding */ getArrowLocalFixedPoints),\n/* harmony export */ \"getGlobalFixedPointForBindableElement\": () => (/* binding */ getGlobalFixedPointForBindableElement),\n/* harmony export */ \"getHeadingForElbowArrowSnap\": () => (/* binding */ getHeadingForElbowArrowSnap),\n/* harmony export */ \"getHoveredElementForBinding\": () => (/* binding */ getHoveredElementForBinding),\n/* harmony export */ \"getSuggestedBindingsForArrows\": () => (/* binding */ getSuggestedBindingsForArrows),\n/* harmony export */ \"intersectElementWithLine\": () => (/* binding */ intersectElementWithLine),\n/* harmony export */ \"isBindingEnabled\": () => (/* binding */ isBindingEnabled),\n/* harmony export */ \"isLinearElementSimpleAndAlreadyBound\": () => (/* binding */ isLinearElementSimpleAndAlreadyBound),\n/* harmony export */ \"maxBindingGap\": () => (/* binding */ maxBindingGap),\n/* harmony export */ \"maybeBindLinearElement\": () => (/* binding */ maybeBindLinearElement),\n/* harmony export */ \"normalizeFixedPoint\": () => (/* binding */ normalizeFixedPoint),\n/* harmony export */ \"shouldEnableBindingForPointerEvent\": () => (/* binding */ shouldEnableBindingForPointerEvent),\n/* harmony export */ \"snapToMid\": () => (/* binding */ snapToMid),\n/* harmony export */ \"updateBoundElements\": () => (/* binding */ updateBoundElements)\n/* harmony export */ });\n/* harmony import */ var _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../math/ga/ga */ \"../math/ga/ga.ts\");\n/* harmony import */ var _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../math/ga/gapoints */ \"../math/ga/gapoints.ts\");\n/* harmony import */ var _math_ga_gadirections__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../math/ga/gadirections */ \"../math/ga/gadirections.ts\");\n/* harmony import */ var _math_ga_galines__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../math/ga/galines */ \"../math/ga/galines.ts\");\n/* harmony import */ var _math_ga_gatransforms__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../math/ga/gatransforms */ \"../math/ga/gatransforms.ts\");\n/* harmony import */ var _bounds__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./bounds */ \"./element/bounds.ts\");\n/* harmony import */ var _utils_collision__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../utils/collision */ \"../utils/collision.ts\");\n/* harmony import */ var _scene__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../scene */ \"./scene/index.ts\");\n/* harmony import */ var _typeChecks__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _mutateElement__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _linearElementEditor__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _keys__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../keys */ \"./keys.ts\");\n/* harmony import */ var _textElement__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _shapes__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../shapes */ \"./shapes.tsx\");\n/* harmony import */ var _heading__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./heading */ \"./element/heading.ts\");\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../../math */ \"../math/index.ts\");\n/* harmony import */ var _utils_geometry_shape__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../../utils/geometry/shape */ \"../utils/geometry/shape.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst shouldEnableBindingForPointerEvent = event => {\n return !event[_keys__WEBPACK_IMPORTED_MODULE_12__.KEYS.CTRL_OR_CMD];\n};\nconst isBindingEnabled = appState => {\n return appState.invertBindingBehaviour //zsviczian\n ? !appState.isBindingEnabled : appState.isBindingEnabled;\n};\nconst FIXED_BINDING_DISTANCE = 5;\n\nconst getNonDeletedElements = (scene, ids) => {\n const result = [];\n ids.forEach(id => {\n const element = scene.getNonDeletedElement(id);\n\n if (element != null) {\n result.push(element);\n }\n });\n return result;\n};\n\nconst bindOrUnbindLinearElement = (linearElement, startBindingElement, endBindingElement, elementsMap, scene) => {\n const boundToElementIds = new Set();\n const unboundFromElementIds = new Set();\n bindOrUnbindLinearElementEdge(linearElement, startBindingElement, endBindingElement, \"start\", boundToElementIds, unboundFromElementIds, elementsMap);\n bindOrUnbindLinearElementEdge(linearElement, endBindingElement, startBindingElement, \"end\", boundToElementIds, unboundFromElementIds, elementsMap);\n const onlyUnbound = Array.from(unboundFromElementIds).filter(id => !boundToElementIds.has(id));\n getNonDeletedElements(scene, onlyUnbound).forEach(element => {\n var _a;\n\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_9__.mutateElement)(element, {\n boundElements: (_a = element.boundElements) === null || _a === void 0 ? void 0 : _a.filter(element => element.type !== \"arrow\" || element.id !== linearElement.id)\n });\n });\n};\n\nconst bindOrUnbindLinearElementEdge = (linearElement, bindableElement, otherEdgeBindableElement, startOrEnd, // Is mutated\nboundToElementIds, // Is mutated\nunboundFromElementIds, elementsMap) => {\n // \"keep\" is for method chaining convenience, a \"no-op\", so just bail out\n if (bindableElement === \"keep\") {\n return;\n } // null means break the bind, so nothing to consider here\n\n\n if (bindableElement === null) {\n const unbound = unbindLinearElement(linearElement, startOrEnd);\n\n if (unbound != null) {\n unboundFromElementIds.add(unbound);\n }\n\n return;\n } // While complext arrows can do anything, simple arrow with both ends trying\n // to bind to the same bindable should not be allowed, start binding takes\n // precedence\n\n\n if (isLinearElementSimple(linearElement)) {\n if (otherEdgeBindableElement == null || (otherEdgeBindableElement === \"keep\" ? // TODO: Refactor - Needlessly complex\n !isLinearElementSimpleAndAlreadyBoundOnOppositeEdge(linearElement, bindableElement, startOrEnd) : startOrEnd === \"start\" || otherEdgeBindableElement.id !== bindableElement.id)) {\n bindLinearElement(linearElement, bindableElement, startOrEnd, elementsMap);\n boundToElementIds.add(bindableElement.id);\n }\n } else {\n bindLinearElement(linearElement, bindableElement, startOrEnd, elementsMap);\n boundToElementIds.add(bindableElement.id);\n }\n};\n\nconst getOriginalBindingIfStillCloseOfLinearElementEdge = (linearElement, edge, elementsMap) => {\n var _a, _b;\n\n const coors = getLinearElementEdgeCoors(linearElement, edge, elementsMap);\n const elementId = edge === \"start\" ? (_a = linearElement.startBinding) === null || _a === void 0 ? void 0 : _a.elementId : (_b = linearElement.endBinding) === null || _b === void 0 ? void 0 : _b.elementId;\n\n if (elementId) {\n const element = elementsMap.get(elementId);\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isBindableElement)(element) && bindingBorderTest(element, coors, elementsMap)) {\n return element;\n }\n }\n\n return null;\n};\n\nconst getOriginalBindingsIfStillCloseToArrowEnds = (linearElement, elementsMap) => [\"start\", \"end\"].map(edge => getOriginalBindingIfStillCloseOfLinearElementEdge(linearElement, edge, elementsMap));\n\nconst getBindingStrategyForDraggingArrowEndpoints = (selectedElement, isBindingEnabled, draggingPoints, elementsMap, elements) => {\n const startIdx = 0;\n const endIdx = selectedElement.points.length - 1;\n const startDragged = draggingPoints.findIndex(i => i === startIdx) > -1;\n const endDragged = draggingPoints.findIndex(i => i === endIdx) > -1;\n const start = startDragged ? isBindingEnabled ? getElligibleElementForBindingElement(selectedElement, \"start\", elementsMap, elements) : null // If binding is disabled and start is dragged, break all binds\n : // We have to update the focus and gap of the binding, so let's rebind\n getElligibleElementForBindingElement(selectedElement, \"start\", elementsMap, elements);\n const end = endDragged ? isBindingEnabled ? getElligibleElementForBindingElement(selectedElement, \"end\", elementsMap, elements) : null // If binding is disabled and end is dragged, break all binds\n : // We have to update the focus and gap of the binding, so let's rebind\n getElligibleElementForBindingElement(selectedElement, \"end\", elementsMap, elements);\n return [start, end];\n};\n\nconst getBindingStrategyForDraggingArrowOrJoints = (selectedElement, elementsMap, elements, isBindingEnabled) => {\n const [startIsClose, endIsClose] = getOriginalBindingsIfStillCloseToArrowEnds(selectedElement, elementsMap);\n const start = startIsClose ? isBindingEnabled ? getElligibleElementForBindingElement(selectedElement, \"start\", elementsMap, elements) : null : null;\n const end = endIsClose ? isBindingEnabled ? getElligibleElementForBindingElement(selectedElement, \"end\", elementsMap, elements) : null : null;\n return [start, end];\n};\n\nconst bindOrUnbindLinearElements = (selectedElements, elementsMap, elements, scene, isBindingEnabled, draggingPoints) => {\n selectedElements.forEach(selectedElement => {\n const [start, end] = (draggingPoints === null || draggingPoints === void 0 ? void 0 : draggingPoints.length) ? // The arrow edge points are dragged (i.e. start, end)\n getBindingStrategyForDraggingArrowEndpoints(selectedElement, isBindingEnabled, draggingPoints !== null && draggingPoints !== void 0 ? draggingPoints : [], elementsMap, elements) : // The arrow itself (the shaft) or the inner joins are dragged\n getBindingStrategyForDraggingArrowOrJoints(selectedElement, elementsMap, elements, isBindingEnabled);\n bindOrUnbindLinearElement(selectedElement, start, end, elementsMap, scene);\n });\n};\nconst getSuggestedBindingsForArrows = (selectedElements, elementsMap) => {\n // HOT PATH: Bail out if selected elements list is too large\n if (selectedElements.length > 50) {\n return [];\n }\n\n return selectedElements.filter(_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isLinearElement).flatMap(element => getOriginalBindingsIfStillCloseToArrowEnds(element, elementsMap)).filter(element => element !== null) // Filter out bind candidates which are in the\n // same selection / group with the arrow\n //\n // TODO: Is it worth turning the list into a set to avoid dupes?\n .filter(element => selectedElements.filter(selected => selected.id === (element === null || element === void 0 ? void 0 : element.id)).length === 0);\n};\nconst maybeBindLinearElement = (linearElement, appState, pointerCoords, elementsMap, elements) => {\n if (appState.startBoundElement != null) {\n bindLinearElement(linearElement, appState.startBoundElement, \"start\", elementsMap);\n }\n\n const hoveredElement = getHoveredElementForBinding(pointerCoords, elements, elementsMap, (0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isElbowArrow)(linearElement) && (0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isElbowArrow)(linearElement));\n\n if (hoveredElement !== null) {\n if (!isLinearElementSimpleAndAlreadyBoundOnOppositeEdge(linearElement, hoveredElement, \"end\")) {\n bindLinearElement(linearElement, hoveredElement, \"end\", elementsMap);\n }\n }\n};\nconst bindLinearElement = (linearElement, hoveredElement, startOrEnd, elementsMap) => {\n if (!(0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isArrowElement)(linearElement)) {\n return;\n }\n\n const binding = Object.assign(Object.assign({\n elementId: hoveredElement.id\n }, calculateFocusAndGap(linearElement, hoveredElement, startOrEnd, elementsMap)), (0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isElbowArrow)(linearElement) ? calculateFixedPointForElbowArrowBinding(linearElement, hoveredElement, startOrEnd, elementsMap) : {\n fixedPoint: null\n });\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_9__.mutateElement)(linearElement, {\n [startOrEnd === \"start\" ? \"startBinding\" : \"endBinding\"]: binding\n });\n const boundElementsMap = (0,_utils__WEBPACK_IMPORTED_MODULE_11__.arrayToMap)(hoveredElement.boundElements || []);\n\n if (!boundElementsMap.has(linearElement.id)) {\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_9__.mutateElement)(hoveredElement, {\n boundElements: (hoveredElement.boundElements || []).concat({\n id: linearElement.id,\n type: \"arrow\"\n })\n });\n }\n}; // Don't bind both ends of a simple segment\n\nconst isLinearElementSimpleAndAlreadyBoundOnOppositeEdge = (linearElement, bindableElement, startOrEnd) => {\n const otherBinding = linearElement[startOrEnd === \"start\" ? \"endBinding\" : \"startBinding\"];\n return isLinearElementSimpleAndAlreadyBound(linearElement, otherBinding === null || otherBinding === void 0 ? void 0 : otherBinding.elementId, bindableElement);\n};\n\nconst isLinearElementSimpleAndAlreadyBound = (linearElement, alreadyBoundToId, bindableElement) => {\n return alreadyBoundToId === bindableElement.id && isLinearElementSimple(linearElement);\n};\n\nconst isLinearElementSimple = linearElement => linearElement.points.length < 3;\n\nconst unbindLinearElement = (linearElement, startOrEnd) => {\n const field = startOrEnd === \"start\" ? \"startBinding\" : \"endBinding\";\n const binding = linearElement[field];\n\n if (binding == null) {\n return null;\n }\n\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_9__.mutateElement)(linearElement, {\n [field]: null\n });\n return binding.elementId;\n};\n\nconst getHoveredElementForBinding = (pointerCoords, elements, elementsMap, fullShape) => {\n const hoveredElement = (0,_scene__WEBPACK_IMPORTED_MODULE_7__.getElementAtPosition)(elements, element => (0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isBindableElement)(element, false) && bindingBorderTest(element, pointerCoords, elementsMap, // disable fullshape snapping for frame elements so we\n // can bind to frame children\n fullShape && !(0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isFrameLikeElement)(element)));\n return hoveredElement;\n};\n\nconst calculateFocusAndGap = (linearElement, hoveredElement, startOrEnd, elementsMap) => {\n const direction = startOrEnd === \"start\" ? -1 : 1;\n const edgePointIndex = direction === -1 ? 0 : linearElement.points.length - 1;\n const adjacentPointIndex = edgePointIndex - direction;\n const edgePoint = _linearElementEditor__WEBPACK_IMPORTED_MODULE_10__.LinearElementEditor.getPointAtIndexGlobalCoordinates(linearElement, edgePointIndex, elementsMap);\n const adjacentPoint = _linearElementEditor__WEBPACK_IMPORTED_MODULE_10__.LinearElementEditor.getPointAtIndexGlobalCoordinates(linearElement, adjacentPointIndex, elementsMap);\n return {\n focus: determineFocusDistance(hoveredElement, adjacentPoint, edgePoint, elementsMap),\n gap: Math.max(1, distanceToBindableElement(hoveredElement, edgePoint, elementsMap))\n };\n}; // Supports translating, rotating and scaling `changedElement` with bound\n// linear elements.\n// Because scaling involves moving the focus points as well, it is\n// done before the `changedElement` is updated, and the `newSize` is passed\n// in explicitly.\n\n\nconst updateBoundElements = (changedElement, elementsMap, options) => {\n const {\n oldSize,\n simultaneouslyUpdated,\n changedElements\n } = options !== null && options !== void 0 ? options : {};\n const simultaneouslyUpdatedElementIds = getSimultaneouslyUpdatedElementIds(simultaneouslyUpdated);\n\n if (!(0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isBindableElement)(changedElement)) {\n return;\n }\n\n boundElementsVisitor(elementsMap, changedElement, element => {\n var _a, _b;\n\n if (!(0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isLinearElement)(element) || element.isDeleted) {\n return;\n } // In case the boundElements are stale\n\n\n if (!doesNeedUpdate(element, changedElement)) {\n return;\n }\n\n const bindings = {\n startBinding: maybeCalculateNewGapWhenScaling(changedElement, element.startBinding, oldSize),\n endBinding: maybeCalculateNewGapWhenScaling(changedElement, element.endBinding, oldSize)\n }; // `linearElement` is being moved/scaled already, just update the binding\n\n if (simultaneouslyUpdatedElementIds.has(element.id)) {\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_9__.mutateElement)(element, bindings);\n return;\n }\n\n const updates = bindableElementsVisitor(elementsMap, element, (bindableElement, bindingProp) => {\n var _a;\n\n if (bindableElement && (0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isBindableElement)(bindableElement) && (bindingProp === \"startBinding\" || bindingProp === \"endBinding\") && changedElement.id === ((_a = element[bindingProp]) === null || _a === void 0 ? void 0 : _a.elementId)) {\n const point = updateBoundPoint(element, bindingProp, bindings[bindingProp], bindableElement, elementsMap);\n\n if (point) {\n return {\n index: bindingProp === \"startBinding\" ? 0 : element.points.length - 1,\n point\n };\n }\n }\n\n return null;\n }).filter(update => update !== null);\n _linearElementEditor__WEBPACK_IMPORTED_MODULE_10__.LinearElementEditor.movePoints(element, updates, elementsMap, Object.assign(Object.assign({}, changedElement.id === ((_a = element.startBinding) === null || _a === void 0 ? void 0 : _a.elementId) ? {\n startBinding: bindings.startBinding\n } : {}), changedElement.id === ((_b = element.endBinding) === null || _b === void 0 ? void 0 : _b.elementId) ? {\n endBinding: bindings.endBinding\n } : {}), {\n changedElements\n });\n const boundText = (0,_textElement__WEBPACK_IMPORTED_MODULE_13__.getBoundTextElement)(element, elementsMap);\n\n if (boundText && !boundText.isDeleted) {\n (0,_textElement__WEBPACK_IMPORTED_MODULE_13__.handleBindTextResize)(element, elementsMap, false);\n }\n });\n};\n\nconst doesNeedUpdate = (boundElement, changedElement) => {\n var _a, _b;\n\n return ((_a = boundElement.startBinding) === null || _a === void 0 ? void 0 : _a.elementId) === changedElement.id || ((_b = boundElement.endBinding) === null || _b === void 0 ? void 0 : _b.elementId) === changedElement.id;\n};\n\nconst getSimultaneouslyUpdatedElementIds = simultaneouslyUpdated => {\n return new Set((simultaneouslyUpdated || []).map(element => element.id));\n};\n\nconst getHeadingForElbowArrowSnap = (p, otherPoint, bindableElement, aabb, elementsMap, origPoint) => {\n const otherPointHeading = (0,_heading__WEBPACK_IMPORTED_MODULE_15__.vectorToHeading)((0,_math__WEBPACK_IMPORTED_MODULE_16__.vectorFromPoint)(otherPoint, p));\n\n if (!bindableElement || !aabb) {\n return otherPointHeading;\n }\n\n const distance = getDistanceForBinding(origPoint, bindableElement, elementsMap);\n\n if (!distance) {\n return (0,_heading__WEBPACK_IMPORTED_MODULE_15__.vectorToHeading)((0,_math__WEBPACK_IMPORTED_MODULE_16__.vectorFromPoint)(p, (0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(bindableElement.x + bindableElement.width / 2, bindableElement.y + bindableElement.height / 2)));\n }\n\n const pointHeading = (0,_heading__WEBPACK_IMPORTED_MODULE_15__.headingForPointFromElement)(bindableElement, aabb, p);\n return pointHeading;\n};\n\nconst getDistanceForBinding = (point, bindableElement, elementsMap) => {\n const distance = distanceToBindableElement(bindableElement, point, elementsMap);\n const bindDistance = maxBindingGap(bindableElement, bindableElement.width, bindableElement.height);\n return distance > bindDistance ? null : distance;\n};\n\nconst bindPointToSnapToElementOutline = (p, otherPoint, bindableElement, elementsMap) => {\n var _a, _b, _c;\n\n const aabb = bindableElement && (0,_shapes__WEBPACK_IMPORTED_MODULE_14__.aabbForElement)(bindableElement);\n\n if (bindableElement && aabb) {\n // TODO: Dirty hacks until tangents are properly calculated\n const heading = (0,_heading__WEBPACK_IMPORTED_MODULE_15__.headingForPointFromElement)(bindableElement, aabb, p);\n const intersections = [...((_a = intersectElementWithLine(bindableElement, (0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(p[0], p[1] - 2 * bindableElement.height), (0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(p[0], p[1] + 2 * bindableElement.height), FIXED_BINDING_DISTANCE, elementsMap)) !== null && _a !== void 0 ? _a : []), ...((_b = intersectElementWithLine(bindableElement, (0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(p[0] - 2 * bindableElement.width, p[1]), (0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(p[0] + 2 * bindableElement.width, p[1]), FIXED_BINDING_DISTANCE, elementsMap)) !== null && _b !== void 0 ? _b : [])];\n const isVertical = (0,_heading__WEBPACK_IMPORTED_MODULE_15__.compareHeading)(heading, _heading__WEBPACK_IMPORTED_MODULE_15__.HEADING_LEFT) || (0,_heading__WEBPACK_IMPORTED_MODULE_15__.compareHeading)(heading, _heading__WEBPACK_IMPORTED_MODULE_15__.HEADING_RIGHT);\n const dist = Math.abs(distanceToBindableElement(bindableElement, p, elementsMap));\n const isInner = isVertical ? dist < bindableElement.width * -0.1 : dist < bindableElement.height * -0.1;\n intersections.sort((a, b) => (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointDistanceSq)(a, p) - (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointDistanceSq)(b, p));\n return isInner ? headingToMidBindPoint(otherPoint, bindableElement, aabb) : (_c = intersections.filter(i => isVertical ? Math.abs(p[1] - i[1]) < 0.1 : Math.abs(p[0] - i[0]) < 0.1)[0]) !== null && _c !== void 0 ? _c : p;\n }\n\n return p;\n};\n\nconst headingToMidBindPoint = (p, bindableElement, aabb) => {\n const center = (0,_bounds__WEBPACK_IMPORTED_MODULE_5__.getCenterForBounds)(aabb);\n const heading = (0,_heading__WEBPACK_IMPORTED_MODULE_15__.vectorToHeading)((0,_math__WEBPACK_IMPORTED_MODULE_16__.vectorFromPoint)(p, center));\n\n switch (true) {\n case (0,_heading__WEBPACK_IMPORTED_MODULE_15__.compareHeading)(heading, _heading__WEBPACK_IMPORTED_MODULE_15__.HEADING_UP):\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)((aabb[0] + aabb[2]) / 2 + 0.1, aabb[1]), center, bindableElement.angle);\n\n case (0,_heading__WEBPACK_IMPORTED_MODULE_15__.compareHeading)(heading, _heading__WEBPACK_IMPORTED_MODULE_15__.HEADING_RIGHT):\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(aabb[2], (aabb[1] + aabb[3]) / 2 + 0.1), center, bindableElement.angle);\n\n case (0,_heading__WEBPACK_IMPORTED_MODULE_15__.compareHeading)(heading, _heading__WEBPACK_IMPORTED_MODULE_15__.HEADING_DOWN):\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)((aabb[0] + aabb[2]) / 2 - 0.1, aabb[3]), center, bindableElement.angle);\n\n default:\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(aabb[0], (aabb[1] + aabb[3]) / 2 - 0.1), center, bindableElement.angle);\n }\n};\n\nconst avoidRectangularCorner = (element, p) => {\n const center = (0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(element.x + element.width / 2, element.y + element.height / 2);\n const nonRotatedPoint = (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)(p, center, -element.angle);\n\n if (nonRotatedPoint[0] < element.x && nonRotatedPoint[1] < element.y) {\n // Top left\n if (nonRotatedPoint[1] - element.y > -FIXED_BINDING_DISTANCE) {\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(element.x - FIXED_BINDING_DISTANCE, element.y), center, element.angle);\n }\n\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(element.x, element.y - FIXED_BINDING_DISTANCE), center, element.angle);\n } else if (nonRotatedPoint[0] < element.x && nonRotatedPoint[1] > element.y + element.height) {\n // Bottom left\n if (nonRotatedPoint[0] - element.x > -FIXED_BINDING_DISTANCE) {\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(element.x, element.y + element.height + FIXED_BINDING_DISTANCE), center, element.angle);\n }\n\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(element.x - FIXED_BINDING_DISTANCE, element.y + element.height), center, element.angle);\n } else if (nonRotatedPoint[0] > element.x + element.width && nonRotatedPoint[1] > element.y + element.height) {\n // Bottom right\n if (nonRotatedPoint[0] - element.x < element.width + FIXED_BINDING_DISTANCE) {\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(element.x + element.width, element.y + element.height + FIXED_BINDING_DISTANCE), center, element.angle);\n }\n\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(element.x + element.width + FIXED_BINDING_DISTANCE, element.y + element.height), center, element.angle);\n } else if (nonRotatedPoint[0] > element.x + element.width && nonRotatedPoint[1] < element.y) {\n // Top right\n if (nonRotatedPoint[0] - element.x < element.width + FIXED_BINDING_DISTANCE) {\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(element.x + element.width, element.y - FIXED_BINDING_DISTANCE), center, element.angle);\n }\n\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(element.x + element.width + FIXED_BINDING_DISTANCE, element.y), center, element.angle);\n }\n\n return p;\n};\nconst snapToMid = (element, p, tolerance = 0.05) => {\n const {\n x,\n y,\n width,\n height,\n angle\n } = element;\n const center = (0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(x + width / 2 - 0.1, y + height / 2 - 0.1);\n const nonRotated = (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)(p, center, -angle); // snap-to-center point is adaptive to element size, but we don't want to go\n // above and below certain px distance\n\n const verticalThrehsold = (0,_math__WEBPACK_IMPORTED_MODULE_16__.clamp)(tolerance * height, 5, 80);\n const horizontalThrehsold = (0,_math__WEBPACK_IMPORTED_MODULE_16__.clamp)(tolerance * width, 5, 80);\n\n if (nonRotated[0] <= x + width / 2 && nonRotated[1] > center[1] - verticalThrehsold && nonRotated[1] < center[1] + verticalThrehsold) {\n // LEFT\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(x - FIXED_BINDING_DISTANCE, center[1]), center, angle);\n } else if (nonRotated[1] <= y + height / 2 && nonRotated[0] > center[0] - horizontalThrehsold && nonRotated[0] < center[0] + horizontalThrehsold) {\n // TOP\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(center[0], y - FIXED_BINDING_DISTANCE), center, angle);\n } else if (nonRotated[0] >= x + width / 2 && nonRotated[1] > center[1] - verticalThrehsold && nonRotated[1] < center[1] + verticalThrehsold) {\n // RIGHT\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(x + width + FIXED_BINDING_DISTANCE, center[1]), center, angle);\n } else if (nonRotated[1] >= y + height / 2 && nonRotated[0] > center[0] - horizontalThrehsold && nonRotated[0] < center[0] + horizontalThrehsold) {\n // DOWN\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(center[0], y + height + FIXED_BINDING_DISTANCE), center, angle);\n }\n\n return p;\n};\n\nconst updateBoundPoint = (linearElement, startOrEnd, binding, bindableElement, elementsMap) => {\n var _a;\n\n if (binding == null || // We only need to update the other end if this is a 2 point line element\n binding.elementId !== bindableElement.id && linearElement.points.length > 2) {\n return null;\n }\n\n const direction = startOrEnd === \"startBinding\" ? -1 : 1;\n const edgePointIndex = direction === -1 ? 0 : linearElement.points.length - 1;\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isElbowArrow)(linearElement) && (0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isFixedPointBinding)(binding)) {\n const fixedPoint = (_a = normalizeFixedPoint(binding.fixedPoint)) !== null && _a !== void 0 ? _a : calculateFixedPointForElbowArrowBinding(linearElement, bindableElement, startOrEnd === \"startBinding\" ? \"start\" : \"end\", elementsMap).fixedPoint;\n const globalMidPoint = (0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(bindableElement.x + bindableElement.width / 2, bindableElement.y + bindableElement.height / 2);\n const global = (0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(bindableElement.x + fixedPoint[0] * bindableElement.width, bindableElement.y + fixedPoint[1] * bindableElement.height);\n const rotatedGlobal = (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)(global, globalMidPoint, bindableElement.angle);\n return _linearElementEditor__WEBPACK_IMPORTED_MODULE_10__.LinearElementEditor.pointFromAbsoluteCoords(linearElement, rotatedGlobal, elementsMap);\n }\n\n const adjacentPointIndex = edgePointIndex - direction;\n const adjacentPoint = _linearElementEditor__WEBPACK_IMPORTED_MODULE_10__.LinearElementEditor.getPointAtIndexGlobalCoordinates(linearElement, adjacentPointIndex, elementsMap);\n const focusPointAbsolute = determineFocusPoint(bindableElement, binding.focus, adjacentPoint, elementsMap);\n let newEdgePoint; // The linear element was not originally pointing inside the bound shape,\n // we can point directly at the focus point\n\n if (binding.gap === 0) {\n newEdgePoint = focusPointAbsolute;\n } else {\n const intersections = intersectElementWithLine(bindableElement, adjacentPoint, focusPointAbsolute, binding.gap, elementsMap);\n\n if (!intersections || intersections.length === 0) {\n // This should never happen, since focusPoint should always be\n // inside the element, but just in case, bail out\n newEdgePoint = focusPointAbsolute;\n } else {\n // Guaranteed to intersect because focusPoint is always inside the shape\n newEdgePoint = intersections[0];\n }\n }\n\n return _linearElementEditor__WEBPACK_IMPORTED_MODULE_10__.LinearElementEditor.pointFromAbsoluteCoords(linearElement, newEdgePoint, elementsMap);\n};\n\nconst calculateFixedPointForElbowArrowBinding = (linearElement, hoveredElement, startOrEnd, elementsMap) => {\n const bounds = [hoveredElement.x, hoveredElement.y, hoveredElement.x + hoveredElement.width, hoveredElement.y + hoveredElement.height];\n const edgePointIndex = startOrEnd === \"start\" ? 0 : linearElement.points.length - 1;\n const globalPoint = _linearElementEditor__WEBPACK_IMPORTED_MODULE_10__.LinearElementEditor.getPointAtIndexGlobalCoordinates(linearElement, edgePointIndex, elementsMap);\n const otherGlobalPoint = _linearElementEditor__WEBPACK_IMPORTED_MODULE_10__.LinearElementEditor.getPointAtIndexGlobalCoordinates(linearElement, edgePointIndex, elementsMap);\n const snappedPoint = bindPointToSnapToElementOutline(globalPoint, otherGlobalPoint, hoveredElement, elementsMap);\n const globalMidPoint = (0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(bounds[0] + (bounds[2] - bounds[0]) / 2, bounds[1] + (bounds[3] - bounds[1]) / 2);\n const nonRotatedSnappedGlobalPoint = (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)(snappedPoint, globalMidPoint, -hoveredElement.angle);\n return {\n fixedPoint: normalizeFixedPoint([(nonRotatedSnappedGlobalPoint[0] - hoveredElement.x) / hoveredElement.width, (nonRotatedSnappedGlobalPoint[1] - hoveredElement.y) / hoveredElement.height])\n };\n};\n\nconst maybeCalculateNewGapWhenScaling = (changedElement, currentBinding, newSize) => {\n if (currentBinding == null || newSize == null) {\n return currentBinding;\n }\n\n const {\n width: newWidth,\n height: newHeight\n } = newSize;\n const {\n width,\n height\n } = changedElement;\n const newGap = Math.max(1, Math.min(maxBindingGap(changedElement, newWidth, newHeight), currentBinding.gap * (newWidth < newHeight ? newWidth / width : newHeight / height)));\n return Object.assign(Object.assign({}, currentBinding), {\n gap: newGap\n });\n};\n\nconst getElligibleElementForBindingElement = (linearElement, startOrEnd, elementsMap, elements) => {\n return getHoveredElementForBinding(getLinearElementEdgeCoors(linearElement, startOrEnd, elementsMap), elements, elementsMap);\n};\n\nconst getLinearElementEdgeCoors = (linearElement, startOrEnd, elementsMap) => {\n const index = startOrEnd === \"start\" ? 0 : -1;\n return (0,_utils__WEBPACK_IMPORTED_MODULE_11__.tupleToCoors)(_linearElementEditor__WEBPACK_IMPORTED_MODULE_10__.LinearElementEditor.getPointAtIndexGlobalCoordinates(linearElement, index, elementsMap));\n}; // We need to:\n// 1: Update elements not selected to point to duplicated elements\n// 2: Update duplicated elements to point to other duplicated elements\n\n\nconst fixBindingsAfterDuplication = (sceneElements, oldElements, oldIdToDuplicatedId, // There are three copying mechanisms: Copy-paste, duplication and alt-drag.\n// Only when alt-dragging the new \"duplicates\" act as the \"old\", while\n// the \"old\" elements act as the \"new copy\" - essentially working reverse\n// to the other two.\nduplicatesServeAsOld) => {\n // First collect all the binding/bindable elements, so we only update\n // each once, regardless of whether they were duplicated or not.\n const allBoundElementIds = new Set();\n const allBindableElementIds = new Set();\n const shouldReverseRoles = duplicatesServeAsOld === \"duplicatesServeAsOld\";\n const duplicateIdToOldId = new Map([...oldIdToDuplicatedId].map(([key, value]) => [value, key]));\n oldElements.forEach(oldElement => {\n const {\n boundElements\n } = oldElement;\n\n if (boundElements != null && boundElements.length > 0) {\n boundElements.forEach(boundElement => {\n if (shouldReverseRoles && !oldIdToDuplicatedId.has(boundElement.id)) {\n allBoundElementIds.add(boundElement.id);\n }\n });\n allBindableElementIds.add(oldIdToDuplicatedId.get(oldElement.id));\n }\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isBindingElement)(oldElement)) {\n if (oldElement.startBinding != null) {\n const {\n elementId\n } = oldElement.startBinding;\n\n if (shouldReverseRoles && !oldIdToDuplicatedId.has(elementId)) {\n allBindableElementIds.add(elementId);\n }\n }\n\n if (oldElement.endBinding != null) {\n const {\n elementId\n } = oldElement.endBinding;\n\n if (shouldReverseRoles && !oldIdToDuplicatedId.has(elementId)) {\n allBindableElementIds.add(elementId);\n }\n }\n\n if (oldElement.startBinding != null || oldElement.endBinding != null) {\n allBoundElementIds.add(oldIdToDuplicatedId.get(oldElement.id));\n }\n }\n }); // Update the linear elements\n\n sceneElements.filter(({\n id\n }) => allBoundElementIds.has(id)).forEach(element => {\n const {\n startBinding,\n endBinding\n } = element;\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_9__.mutateElement)(element, {\n startBinding: newBindingAfterDuplication(startBinding, oldIdToDuplicatedId),\n endBinding: newBindingAfterDuplication(endBinding, oldIdToDuplicatedId)\n });\n }); // Update the bindable shapes\n\n sceneElements.filter(({\n id\n }) => allBindableElementIds.has(id)).forEach(bindableElement => {\n var _a;\n\n const oldElementId = duplicateIdToOldId.get(bindableElement.id);\n const boundElements = (_a = sceneElements.find(({\n id\n }) => id === oldElementId)) === null || _a === void 0 ? void 0 : _a.boundElements;\n\n if (boundElements && boundElements.length > 0) {\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_9__.mutateElement)(bindableElement, {\n boundElements: boundElements.map(boundElement => oldIdToDuplicatedId.has(boundElement.id) ? {\n id: oldIdToDuplicatedId.get(boundElement.id),\n type: boundElement.type\n } : boundElement)\n });\n }\n });\n};\n\nconst newBindingAfterDuplication = (binding, oldIdToDuplicatedId) => {\n var _a;\n\n if (binding == null) {\n return null;\n }\n\n return Object.assign(Object.assign({}, binding), {\n elementId: (_a = oldIdToDuplicatedId.get(binding.elementId)) !== null && _a !== void 0 ? _a : binding.elementId\n });\n};\n\nconst fixBindingsAfterDeletion = (sceneElements, deletedElements) => {\n const elements = (0,_utils__WEBPACK_IMPORTED_MODULE_11__.arrayToMap)(sceneElements);\n\n for (const element of deletedElements) {\n BoundElement.unbindAffected(elements, element, _mutateElement__WEBPACK_IMPORTED_MODULE_9__.mutateElement);\n BindableElement.unbindAffected(elements, element, _mutateElement__WEBPACK_IMPORTED_MODULE_9__.mutateElement);\n }\n};\n\nconst newBoundElements = (boundElements, idsToRemove, elementsToAdd = []) => {\n if (!boundElements) {\n return null;\n }\n\n const nextBoundElements = boundElements.filter(boundElement => !idsToRemove.has(boundElement.id));\n nextBoundElements.push(...elementsToAdd.map(x => ({\n id: x.id,\n type: x.type\n })));\n return nextBoundElements;\n};\n\nconst bindingBorderTest = (element, {\n x,\n y\n}, elementsMap, fullShape) => {\n const threshold = maxBindingGap(element, element.width, element.height);\n const shape = (0,_shapes__WEBPACK_IMPORTED_MODULE_14__.getElementShape)(element, elementsMap);\n return (0,_utils_collision__WEBPACK_IMPORTED_MODULE_6__.isPointOnShape)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(x, y), shape, threshold) || fullShape === true && (0,_shapes__WEBPACK_IMPORTED_MODULE_14__.pointInsideBounds)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(x, y), (0,_shapes__WEBPACK_IMPORTED_MODULE_14__.aabbForElement)(element));\n};\nconst maxBindingGap = (element, elementWidth, elementHeight) => {\n // Aligns diamonds with rectangles\n const shapeRatio = element.type === \"diamond\" ? 1 / Math.sqrt(2) : 1;\n const smallerDimension = shapeRatio * Math.min(elementWidth, elementHeight); // We make the bindable boundary bigger for bigger elements\n\n return Math.max(16, Math.min(0.25 * smallerDimension, 32));\n};\nconst distanceToBindableElement = (element, point, elementsMap) => {\n switch (element.type) {\n case \"rectangle\":\n case \"image\":\n case \"text\":\n case \"iframe\":\n case \"embeddable\":\n case \"frame\":\n case \"magicframe\":\n return distanceToRectangle(element, point, elementsMap);\n\n case \"diamond\":\n return distanceToDiamond(element, point, elementsMap);\n\n case \"ellipse\":\n return distanceToEllipse(element, point, elementsMap);\n }\n};\n\nconst distanceToRectangle = (element, p, elementsMap) => {\n const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, p, elementsMap);\n return Math.max(_math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.distanceToLine(pointRel, _math_ga_galines__WEBPACK_IMPORTED_MODULE_3__.equation(0, 1, -hheight)), _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.distanceToLine(pointRel, _math_ga_galines__WEBPACK_IMPORTED_MODULE_3__.equation(1, 0, -hwidth)));\n};\n\nconst distanceToDiamond = (element, point, elementsMap) => {\n const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, point, elementsMap);\n const side = _math_ga_galines__WEBPACK_IMPORTED_MODULE_3__.equation(hheight, hwidth, -hheight * hwidth);\n return _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.distanceToLine(pointRel, side);\n};\n\nconst distanceToEllipse = (element, point, elementsMap) => {\n const [pointRel, tangent] = ellipseParamsForTest(element, point, elementsMap);\n return -_math_ga_galines__WEBPACK_IMPORTED_MODULE_3__.sign(tangent) * _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.distanceToLine(pointRel, tangent);\n};\n\nconst ellipseParamsForTest = (element, point, elementsMap) => {\n const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, point, elementsMap);\n const [px, py] = _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.toTuple(pointRel); // We're working in positive quadrant, so start with `t = 45deg`, `tx=cos(t)`\n\n let tx = 0.707;\n let ty = 0.707;\n const a = hwidth;\n const b = hheight; // This is a numerical method to find the params tx, ty at which\n // the ellipse has the closest point to the given point\n\n [0, 1, 2, 3].forEach(_ => {\n const xx = a * tx;\n const yy = b * ty;\n const ex = (a * a - b * b) * tx ** 3 / a;\n const ey = (b * b - a * a) * ty ** 3 / b;\n const rx = xx - ex;\n const ry = yy - ey;\n const qx = px - ex;\n const qy = py - ey;\n const r = Math.hypot(ry, rx);\n const q = Math.hypot(qy, qx);\n tx = Math.min(1, Math.max(0, (qx * r / q + ex) / a));\n ty = Math.min(1, Math.max(0, (qy * r / q + ey) / b));\n const t = Math.hypot(ty, tx);\n tx /= t;\n ty /= t;\n });\n const closestPoint = _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.point(a * tx, b * ty);\n const tangent = _math_ga_galines__WEBPACK_IMPORTED_MODULE_3__.orthogonalThrough(pointRel, closestPoint);\n return [pointRel, tangent];\n}; // Returns:\n// 1. the point relative to the elements (x, y) position\n// 2. the point relative to the element's center with positive (x, y)\n// 3. half element width\n// 4. half element height\n//\n// Note that for linear elements the (x, y) position is not at the\n// top right corner of their boundary.\n//\n// Rectangles, diamonds and ellipses are symmetrical over axes,\n// and other elements have a rectangular boundary,\n// so we only need to perform hit tests for the positive quadrant.\n\n\nconst pointRelativeToElement = (element, pointTuple, elementsMap) => {\n const point = _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.from(pointTuple);\n const [x1, y1, x2, y2] = (0,_bounds__WEBPACK_IMPORTED_MODULE_5__.getElementAbsoluteCoords)(element, elementsMap);\n const center = coordsCenter(x1, y1, x2, y2); // GA has angle orientation opposite to `rotate`\n\n const rotate = _math_ga_gatransforms__WEBPACK_IMPORTED_MODULE_4__.rotation(center, element.angle);\n const pointRotated = _math_ga_gatransforms__WEBPACK_IMPORTED_MODULE_4__.apply(rotate, point);\n const pointRelToCenter = _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.sub(pointRotated, _math_ga_gadirections__WEBPACK_IMPORTED_MODULE_2__.from(center));\n const pointRelToCenterAbs = _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.abs(pointRelToCenter);\n const elementPos = _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.offset(element.x, element.y);\n const pointRelToPos = _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.sub(pointRotated, elementPos);\n const halfWidth = (x2 - x1) / 2;\n const halfHeight = (y2 - y1) / 2;\n return [pointRelToPos, pointRelToCenterAbs, halfWidth, halfHeight];\n};\n\nconst relativizationToElementCenter = (element, elementsMap) => {\n const [x1, y1, x2, y2] = (0,_bounds__WEBPACK_IMPORTED_MODULE_5__.getElementAbsoluteCoords)(element, elementsMap);\n const center = coordsCenter(x1, y1, x2, y2); // GA has angle orientation opposite to `rotate`\n\n const rotate = _math_ga_gatransforms__WEBPACK_IMPORTED_MODULE_4__.rotation(center, element.angle);\n const translate = _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.reverse(_math_ga_gatransforms__WEBPACK_IMPORTED_MODULE_4__.translation(_math_ga_gadirections__WEBPACK_IMPORTED_MODULE_2__.from(center)));\n return _math_ga_gatransforms__WEBPACK_IMPORTED_MODULE_4__.compose(rotate, translate);\n};\n\nconst coordsCenter = (x1, y1, x2, y2) => {\n return _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.point((x1 + x2) / 2, (y1 + y2) / 2);\n}; // The focus distance is the oriented ratio between the size of\n// the `element` and the \"focus image\" of the element on which\n// all focus points lie, so it's a number between -1 and 1.\n// The line going through `a` and `b` is a tangent to the \"focus image\"\n// of the element.\n\n\nconst determineFocusDistance = ( //zsviczian added export\nelement, // Point on the line, in absolute coordinates\na, // Another point on the line, in absolute coordinates (closer to element)\nb, elementsMap) => {\n const relateToCenter = relativizationToElementCenter(element, elementsMap);\n const aRel = _math_ga_gatransforms__WEBPACK_IMPORTED_MODULE_4__.apply(relateToCenter, _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.from(a));\n const bRel = _math_ga_gatransforms__WEBPACK_IMPORTED_MODULE_4__.apply(relateToCenter, _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.from(b));\n const line = _math_ga_galines__WEBPACK_IMPORTED_MODULE_3__.through(aRel, bRel);\n const q = element.height / element.width;\n const hwidth = element.width / 2;\n const hheight = element.height / 2;\n const n = line[2];\n const m = line[3];\n const c = line[1];\n const mabs = Math.abs(m);\n const nabs = Math.abs(n);\n let ret;\n\n switch (element.type) {\n case \"rectangle\":\n case \"image\":\n case \"text\":\n case \"iframe\":\n case \"embeddable\":\n case \"frame\":\n case \"magicframe\":\n ret = c / (hwidth * (nabs + q * mabs));\n break;\n\n case \"diamond\":\n ret = mabs < nabs ? c / (nabs * hwidth) : c / (mabs * hheight);\n break;\n\n case \"ellipse\":\n ret = c / (hwidth * Math.sqrt(n ** 2 + q ** 2 * m ** 2));\n break;\n }\n\n return ret || 0;\n};\n\nconst determineFocusPoint = (element, // The oriented, relative distance from the center of `element` of the\n// returned focusPoint\nfocus, adjecentPoint, elementsMap) => {\n if (focus === 0) {\n const [x1, y1, x2, y2] = (0,_bounds__WEBPACK_IMPORTED_MODULE_5__.getElementAbsoluteCoords)(element, elementsMap);\n const center = coordsCenter(x1, y1, x2, y2);\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointFromPair)(_math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.toTuple(center));\n }\n\n const relateToCenter = relativizationToElementCenter(element, elementsMap);\n const adjecentPointRel = _math_ga_gatransforms__WEBPACK_IMPORTED_MODULE_4__.apply(relateToCenter, _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.from(adjecentPoint));\n const reverseRelateToCenter = _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.reverse(relateToCenter);\n let point;\n\n switch (element.type) {\n case \"rectangle\":\n case \"image\":\n case \"text\":\n case \"diamond\":\n case \"iframe\":\n case \"embeddable\":\n case \"frame\":\n case \"magicframe\":\n point = findFocusPointForRectangulars(element, focus, adjecentPointRel);\n break;\n\n case \"ellipse\":\n point = findFocusPointForEllipse(element, focus, adjecentPointRel);\n break;\n }\n\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointFromPair)(_math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.toTuple(_math_ga_gatransforms__WEBPACK_IMPORTED_MODULE_4__.apply(reverseRelateToCenter, point)));\n}; // Returns 2 or 0 intersection points between line going through `a` and `b`\n// and the `element`, in ascending order of distance from `a`.\n\n\nconst intersectElementWithLine = ( //zsviczian added export\nelement, // Point on the line, in absolute coordinates\na, // Another point on the line, in absolute coordinates\nb, // If given, the element is inflated by this value\ngap = 0, elementsMap) => {\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isRectangularElement)(element)) {\n return (0,_utils_geometry_shape__WEBPACK_IMPORTED_MODULE_17__.segmentIntersectRectangleElement)(element, (0,_math__WEBPACK_IMPORTED_MODULE_16__.lineSegment)(a, b), gap);\n }\n\n const relateToCenter = relativizationToElementCenter(element, elementsMap);\n const aRel = _math_ga_gatransforms__WEBPACK_IMPORTED_MODULE_4__.apply(relateToCenter, _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.from(a));\n const bRel = _math_ga_gatransforms__WEBPACK_IMPORTED_MODULE_4__.apply(relateToCenter, _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.from(b));\n const line = _math_ga_galines__WEBPACK_IMPORTED_MODULE_3__.through(aRel, bRel);\n const reverseRelateToCenter = _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.reverse(relateToCenter);\n const intersections = getSortedElementLineIntersections(element, line, aRel, gap);\n return intersections.map(point => (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointFromPair)(_math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.toTuple(_math_ga_gatransforms__WEBPACK_IMPORTED_MODULE_4__.apply(reverseRelateToCenter, point))));\n};\n\nconst getSortedElementLineIntersections = (element, // Relative to element center\nline, // Relative to element center\nnearPoint, gap = 0) => {\n let intersections;\n\n switch (element.type) {\n case \"rectangle\":\n case \"image\":\n case \"text\":\n case \"diamond\":\n case \"iframe\":\n case \"embeddable\":\n case \"frame\":\n case \"magicframe\":\n const corners = getCorners(element);\n intersections = corners.flatMap((point, i) => {\n const edge = [point, corners[(i + 1) % 4]];\n return intersectSegment(line, offsetSegment(edge, gap));\n }).concat(corners.flatMap(point => getCircleIntersections(point, gap, line)));\n break;\n\n case \"ellipse\":\n intersections = getEllipseIntersections(element, gap, line);\n break;\n }\n\n if (intersections.length < 2) {\n // Ignore the \"edge\" case of only intersecting with a single corner\n return [];\n }\n\n const sortedIntersections = intersections.sort((i1, i2) => _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.distance(i1, nearPoint) - _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.distance(i2, nearPoint));\n return [sortedIntersections[0], sortedIntersections[sortedIntersections.length - 1]];\n};\n\nconst getCorners = (element, scale = 1) => {\n const hx = scale * element.width / 2;\n const hy = scale * element.height / 2;\n\n switch (element.type) {\n case \"rectangle\":\n case \"image\":\n case \"text\":\n case \"iframe\":\n case \"embeddable\":\n case \"frame\":\n case \"magicframe\":\n return [_math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.point(hx, hy), _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.point(hx, -hy), _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.point(-hx, -hy), _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.point(-hx, hy)];\n\n case \"diamond\":\n return [_math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.point(0, hy), _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.point(hx, 0), _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.point(0, -hy), _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.point(-hx, 0)];\n }\n}; // Returns intersection of `line` with `segment`, with `segment` moved by\n// `gap` in its polar direction.\n// If intersection coincides with second segment point returns empty array.\n\n\nconst intersectSegment = (line, segment) => {\n const [a, b] = segment;\n const aDist = _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.distanceToLine(a, line);\n const bDist = _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.distanceToLine(b, line);\n\n if (aDist * bDist >= 0) {\n // The intersection is outside segment `(a, b)`\n return [];\n }\n\n return [_math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.intersect(line, _math_ga_galines__WEBPACK_IMPORTED_MODULE_3__.through(a, b))];\n};\n\nconst offsetSegment = (segment, distance) => {\n const [a, b] = segment;\n const offset = _math_ga_gatransforms__WEBPACK_IMPORTED_MODULE_4__.translationOrthogonal(_math_ga_gadirections__WEBPACK_IMPORTED_MODULE_2__.fromTo(a, b), distance);\n return [_math_ga_gatransforms__WEBPACK_IMPORTED_MODULE_4__.apply(offset, a), _math_ga_gatransforms__WEBPACK_IMPORTED_MODULE_4__.apply(offset, b)];\n};\n\nconst getEllipseIntersections = (element, gap, line) => {\n const a = element.width / 2 + gap;\n const b = element.height / 2 + gap;\n const m = line[2];\n const n = line[3];\n const c = line[1];\n const squares = a * a * m * m + b * b * n * n;\n const discr = squares - c * c;\n\n if (squares === 0 || discr <= 0) {\n return [];\n }\n\n const discrRoot = Math.sqrt(discr);\n const xn = -a * a * m * c;\n const yn = -b * b * n * c;\n return [_math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.point((xn + a * b * n * discrRoot) / squares, (yn - a * b * m * discrRoot) / squares), _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.point((xn - a * b * n * discrRoot) / squares, (yn + a * b * m * discrRoot) / squares)];\n};\n\nconst getCircleIntersections = (center, radius, line) => {\n if (radius === 0) {\n return _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.distanceToLine(line, center) === 0 ? [center] : [];\n }\n\n const m = line[2];\n const n = line[3];\n const c = line[1];\n const [a, b] = _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.toTuple(center);\n const r = radius;\n const squares = m * m + n * n;\n const discr = r * r * squares - (m * a + n * b + c) ** 2;\n\n if (squares === 0 || discr <= 0) {\n return [];\n }\n\n const discrRoot = Math.sqrt(discr);\n const xn = a * n * n - b * m * n - m * c;\n const yn = b * m * m - a * m * n - n * c;\n return [_math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.point((xn + n * discrRoot) / squares, (yn - m * discrRoot) / squares), _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.point((xn - n * discrRoot) / squares, (yn + m * discrRoot) / squares)];\n}; // The focus point is the tangent point of the \"focus image\" of the\n// `element`, where the tangent goes through `point`.\n\n\nconst findFocusPointForEllipse = (ellipse, // Between -1 and 1 (not 0) the relative size of the \"focus image\" of\n// the element on which the focus point lies\nrelativeDistance, // The point for which we're trying to find the focus point, relative\n// to the ellipse center.\npoint) => {\n const relativeDistanceAbs = Math.abs(relativeDistance);\n const a = ellipse.width * relativeDistanceAbs / 2;\n const b = ellipse.height * relativeDistanceAbs / 2;\n const orientation = Math.sign(relativeDistance);\n const [px, pyo] = _math_ga_gapoints__WEBPACK_IMPORTED_MODULE_1__.toTuple(point); // The calculation below can't handle py = 0\n\n const py = pyo === 0 ? 0.0001 : pyo;\n const squares = px ** 2 * b ** 2 + py ** 2 * a ** 2; // Tangent mx + ny + 1 = 0\n\n const m = (-px * b ** 2 + orientation * py * Math.sqrt(Math.max(0, squares - a ** 2 * b ** 2))) / squares;\n let n = (-m * px - 1) / py;\n\n if (n === 0) {\n // if zero {-0, 0}, fall back to a same-sign value in the similar range\n n = (Object.is(n, -0) ? -1 : 1) * 0.01;\n }\n\n const x = -(a ** 2 * m) / (n ** 2 * b ** 2 + m ** 2 * a ** 2);\n return _math_ga_ga__WEBPACK_IMPORTED_MODULE_0__.point(x, (-m * x - 1) / (n === 0 ? 0.0001 : n)); //zsviczian https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/1054\n};\n\nconst findFocusPointForRectangulars = (element, // Between -1 and 1 for how far away should the focus point be relative\n// to the size of the element. Sign determines orientation.\nrelativeDistance, // The point for which we're trying to find the focus point, relative\n// to the element center.\npoint) => {\n const relativeDistanceAbs = Math.abs(relativeDistance);\n const orientation = Math.sign(relativeDistance);\n const corners = getCorners(element, relativeDistanceAbs);\n let maxDistance = 0;\n let tangentPoint = null;\n corners.forEach(corner => {\n const distance = orientation * _math_ga_galines__WEBPACK_IMPORTED_MODULE_3__.through(point, corner)[1];\n\n if (distance > maxDistance) {\n maxDistance = distance;\n tangentPoint = corner;\n }\n });\n return tangentPoint;\n};\n\nconst bindingProperties = new Set([\"boundElements\", \"frameId\", \"containerId\", \"startBinding\", \"endBinding\"]);\n/**\n * Tries to visit each bound element (does not have to be found).\n */\n\nconst boundElementsVisitor = (elements, element, visit) => {\n var _a, _b;\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isBindableElement)(element)) {\n // create new instance so that possible mutations won't play a role in visiting order\n const boundElements = (_b = (_a = element.boundElements) === null || _a === void 0 ? void 0 : _a.slice()) !== null && _b !== void 0 ? _b : []; // last added text should be the one we keep (~previous are duplicates)\n\n boundElements.forEach(({\n id\n }) => {\n visit(elements.get(id), \"boundElements\", id);\n });\n }\n};\n/**\n * Tries to visit each bindable element (does not have to be found).\n */\n\n\nconst bindableElementsVisitor = (elements, element, visit) => {\n const result = [];\n\n if (element.frameId) {\n const id = element.frameId;\n result.push(visit(elements.get(id), \"frameId\", id));\n }\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isBoundToContainer)(element)) {\n const id = element.containerId;\n result.push(visit(elements.get(id), \"containerId\", id));\n }\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isArrowElement)(element)) {\n if (element.startBinding) {\n const id = element.startBinding.elementId;\n result.push(visit(elements.get(id), \"startBinding\", id));\n }\n\n if (element.endBinding) {\n const id = element.endBinding.elementId;\n result.push(visit(elements.get(id), \"endBinding\", id));\n }\n }\n\n return result;\n};\n/**\n * Bound element containing bindings to `frameId`, `containerId`, `startBinding` or `endBinding`.\n */\n\n\nclass BoundElement {\n /**\n * Unbind the affected non deleted bindable elements (removing element from `boundElements`).\n * - iterates non deleted bindable elements (`containerId` | `startBinding.elementId` | `endBinding.elementId`) of the current element\n * - prepares updates to unbind each bindable element's `boundElements` from the current element\n */\n static unbindAffected(elements, boundElement, updateElementWith) {\n if (!boundElement) {\n return;\n }\n\n bindableElementsVisitor(elements, boundElement, bindableElement => {\n // bindable element is deleted, this is fine\n if (!bindableElement || bindableElement.isDeleted) {\n return;\n }\n\n boundElementsVisitor(elements, bindableElement, (_, __, boundElementId) => {\n if (boundElementId === boundElement.id) {\n updateElementWith(bindableElement, {\n boundElements: newBoundElements(bindableElement.boundElements, new Set([boundElementId]))\n });\n }\n });\n });\n }\n\n}\n/**\n * Rebind the next affected non deleted bindable elements (adding element to `boundElements`).\n * - iterates non deleted bindable elements (`containerId` | `startBinding.elementId` | `endBinding.elementId`) of the current element\n * - prepares updates to rebind each bindable element's `boundElements` to the current element\n *\n * NOTE: rebind expects that affected elements were previously unbound with `BoundElement.unbindAffected`\n */\n\nBoundElement.rebindAffected = (elements, boundElement, updateElementWith) => {\n // don't try to rebind element that is deleted\n if (!boundElement || boundElement.isDeleted) {\n return;\n }\n\n bindableElementsVisitor(elements, boundElement, (bindableElement, bindingProp) => {\n var _a, _b; // unbind from bindable elements, as bindings from non deleted elements into deleted elements are incorrect\n\n\n if (!bindableElement || bindableElement.isDeleted) {\n updateElementWith(boundElement, {\n [bindingProp]: null\n });\n return;\n } // frame bindings are unidirectional, there is nothing to rebind\n\n\n if (bindingProp === \"frameId\") {\n return;\n }\n\n if ((_a = bindableElement.boundElements) === null || _a === void 0 ? void 0 : _a.find(x => x.id === boundElement.id)) {\n return;\n }\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isArrowElement)(boundElement)) {\n // rebind if not found!\n updateElementWith(bindableElement, {\n boundElements: newBoundElements(bindableElement.boundElements, new Set(), new Array(boundElement))\n });\n }\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isTextElement)(boundElement)) {\n if (!((_b = bindableElement.boundElements) === null || _b === void 0 ? void 0 : _b.find(x => x.type === \"text\"))) {\n // rebind only if there is no other text bound already\n updateElementWith(bindableElement, {\n boundElements: newBoundElements(bindableElement.boundElements, new Set(), new Array(boundElement))\n });\n } else {\n // unbind otherwise\n updateElementWith(boundElement, {\n [bindingProp]: null\n });\n }\n }\n });\n};\n/**\n * Bindable element containing bindings to `boundElements`.\n */\n\n\nclass BindableElement {\n /**\n * Unbind the affected non deleted bound elements (resetting `containerId`, `startBinding`, `endBinding` to `null`).\n * - iterates through non deleted `boundElements` of the current element\n * - prepares updates to unbind each bound element from the current element\n */\n static unbindAffected(elements, bindableElement, updateElementWith) {\n if (!bindableElement) {\n return;\n }\n\n boundElementsVisitor(elements, bindableElement, boundElement => {\n // bound element is deleted, this is fine\n if (!boundElement || boundElement.isDeleted) {\n return;\n }\n\n bindableElementsVisitor(elements, boundElement, (_, bindingProp, bindableElementId) => {\n // making sure there is an element to be unbound\n if (bindableElementId === bindableElement.id) {\n updateElementWith(boundElement, {\n [bindingProp]: null\n });\n }\n });\n });\n }\n\n}\n/**\n * Rebind the affected non deleted bound elements (for now setting only `containerId`, as we cannot rebind arrows atm).\n * - iterates through non deleted `boundElements` of the current element\n * - prepares updates to rebind each bound element to the current element or unbind it from `boundElements` in case of conflicts\n *\n * NOTE: rebind expects that affected elements were previously unbound with `BindaleElement.unbindAffected`\n */\n\nBindableElement.rebindAffected = (elements, bindableElement, updateElementWith) => {\n // don't try to rebind element that is deleted (i.e. updated as deleted)\n if (!bindableElement || bindableElement.isDeleted) {\n return;\n }\n\n boundElementsVisitor(elements, bindableElement, (boundElement, _, boundElementId) => {\n var _a, _b, _c; // unbind from bindable elements, as bindings from non deleted elements into deleted elements are incorrect\n\n\n if (!boundElement || boundElement.isDeleted) {\n updateElementWith(bindableElement, {\n boundElements: newBoundElements(bindableElement.boundElements, new Set([boundElementId]))\n });\n return;\n }\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isTextElement)(boundElement)) {\n const boundElements = (_b = (_a = bindableElement.boundElements) === null || _a === void 0 ? void 0 : _a.slice()) !== null && _b !== void 0 ? _b : []; // check if this is the last element in the array, if not, there is an previously bound text which should be unbound\n\n if (((_c = boundElements.reverse().find(x => x.type === \"text\")) === null || _c === void 0 ? void 0 : _c.id) === boundElement.id) {\n if (boundElement.containerId !== bindableElement.id) {\n // rebind if not bound already!\n updateElementWith(boundElement, {\n containerId: bindableElement.id\n });\n }\n } else {\n if (boundElement.containerId !== null) {\n // unbind if not unbound already\n updateElementWith(boundElement, {\n containerId: null\n });\n } // unbind from boundElements as the element got bound to some other element in the meantime\n\n\n updateElementWith(bindableElement, {\n boundElements: newBoundElements(bindableElement.boundElements, new Set([boundElement.id]))\n });\n }\n }\n });\n};\n\nconst getGlobalFixedPointForBindableElement = (fixedPointRatio, element) => {\n const [fixedX, fixedY] = normalizeFixedPoint(fixedPointRatio);\n return (0,_math__WEBPACK_IMPORTED_MODULE_16__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(element.x + element.width * fixedX, element.y + element.height * fixedY), (0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(element.x + element.width / 2, element.y + element.height / 2), element.angle);\n};\n\nconst getGlobalFixedPoints = (arrow, elementsMap) => {\n const startElement = arrow.startBinding && elementsMap.get(arrow.startBinding.elementId);\n const endElement = arrow.endBinding && elementsMap.get(arrow.endBinding.elementId);\n const startPoint = startElement && arrow.startBinding ? getGlobalFixedPointForBindableElement(arrow.startBinding.fixedPoint, startElement) : (0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(arrow.x + arrow.points[0][0], arrow.y + arrow.points[0][1]);\n const endPoint = endElement && arrow.endBinding ? getGlobalFixedPointForBindableElement(arrow.endBinding.fixedPoint, endElement) : (0,_math__WEBPACK_IMPORTED_MODULE_16__.point)(arrow.x + arrow.points[arrow.points.length - 1][0], arrow.y + arrow.points[arrow.points.length - 1][1]);\n return [startPoint, endPoint];\n};\n\nconst getArrowLocalFixedPoints = (arrow, elementsMap) => {\n const [startPoint, endPoint] = getGlobalFixedPoints(arrow, elementsMap);\n return [_linearElementEditor__WEBPACK_IMPORTED_MODULE_10__.LinearElementEditor.pointFromAbsoluteCoords(arrow, startPoint, elementsMap), _linearElementEditor__WEBPACK_IMPORTED_MODULE_10__.LinearElementEditor.pointFromAbsoluteCoords(arrow, endPoint, elementsMap)];\n};\nconst normalizeFixedPoint = fixedPoint => {\n // Do not allow a precise 0.5 for fixed point ratio\n // to avoid jumping arrow heading due to floating point imprecision\n if (fixedPoint && (fixedPoint[0] === 0.5 || fixedPoint[1] === 0.5)) {\n return fixedPoint.map(ratio => ratio === 0.5 ? 0.5001 : ratio);\n }\n\n return fixedPoint;\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./element/binding.ts?");
|
|
2788
2788
|
|
|
2789
2789
|
/***/ }),
|
|
2790
2790
|
|
|
@@ -2828,7 +2828,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
2828
2828
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
2829
2829
|
|
|
2830
2830
|
"use strict";
|
|
2831
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"dragNewElement\": () => (/* binding */ dragNewElement),\n/* harmony export */ \"dragSelectedElements\": () => (/* binding */ dragSelectedElements),\n/* harmony export */ \"getDragOffsetXY\": () => (/* binding */ getDragOffsetXY)\n/* harmony export */ });\n/* harmony import */ var _binding__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./binding */ \"./element/binding.ts\");\n/* harmony import */ var _bounds__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./bounds */ \"./element/bounds.ts\");\n/* harmony import */ var _mutateElement__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _sizeHelpers__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./sizeHelpers */ \"./element/sizeHelpers.ts\");\n/* harmony import */ var _textElement__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _typeChecks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _snapping__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../snapping */ \"./snapping.ts\");\n\n\n\n\n\n\n\n\n\nconst dragSelectedElements = (pointerDownState, _selectedElements, offset, scene, snapOffset, gridSize) => {\n if (_selectedElements.length === 1 && (0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.
|
|
2831
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"dragNewElement\": () => (/* binding */ dragNewElement),\n/* harmony export */ \"dragSelectedElements\": () => (/* binding */ dragSelectedElements),\n/* harmony export */ \"getDragOffsetXY\": () => (/* binding */ getDragOffsetXY)\n/* harmony export */ });\n/* harmony import */ var _binding__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./binding */ \"./element/binding.ts\");\n/* harmony import */ var _bounds__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./bounds */ \"./element/bounds.ts\");\n/* harmony import */ var _mutateElement__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _sizeHelpers__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./sizeHelpers */ \"./element/sizeHelpers.ts\");\n/* harmony import */ var _textElement__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _typeChecks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _snapping__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../snapping */ \"./snapping.ts\");\n\n\n\n\n\n\n\n\n\nconst dragSelectedElements = (pointerDownState, _selectedElements, offset, scene, snapOffset, gridSize) => {\n if (_selectedElements.length === 1 && (0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isElbowArrow)(_selectedElements[0]) && (_selectedElements[0].startBinding || _selectedElements[0].endBinding)) {\n return;\n }\n\n const selectedElements = _selectedElements.filter(el => !((0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isElbowArrow)(el) && el.startBinding && el.endBinding)); // we do not want a frame and its elements to be selected at the same time\n // but when it happens (due to some bug), we want to avoid updating element\n // in the frame twice, hence the use of set\n\n\n const elementsToUpdate = new Set(selectedElements);\n const frames = selectedElements.filter(e => (0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isFrameLikeElement)(e)).map(f => f.id);\n\n if (frames.length > 0) {\n for (const element of scene.getNonDeletedElements()) {\n if (element.frameId !== null && frames.includes(element.frameId)) {\n elementsToUpdate.add(element);\n }\n }\n }\n\n const commonBounds = (0,_bounds__WEBPACK_IMPORTED_MODULE_1__.getCommonBounds)(Array.from(elementsToUpdate).map(el => {\n var _a;\n\n return (_a = pointerDownState.originalElements.get(el.id)) !== null && _a !== void 0 ? _a : el;\n }));\n const adjustedOffset = calculateOffset(commonBounds, offset, snapOffset, gridSize);\n elementsToUpdate.forEach(element => {\n updateElementCoords(pointerDownState, element, adjustedOffset);\n\n if ( // skip arrow labels since we calculate its position during render\n !(0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isArrowElement)(element)) {\n const textElement = (0,_textElement__WEBPACK_IMPORTED_MODULE_4__.getBoundTextElement)(element, scene.getNonDeletedElementsMap());\n\n if (textElement) {\n updateElementCoords(pointerDownState, textElement, adjustedOffset);\n }\n }\n\n (0,_binding__WEBPACK_IMPORTED_MODULE_0__.updateBoundElements)(element, scene.getElementsMapIncludingDeleted(), {\n simultaneouslyUpdated: Array.from(elementsToUpdate)\n });\n });\n};\n\nconst calculateOffset = (commonBounds, dragOffset, snapOffset, gridSize) => {\n const [x, y] = commonBounds;\n let nextX = x + dragOffset.x + snapOffset.x;\n let nextY = y + dragOffset.y + snapOffset.y;\n\n if (snapOffset.x === 0 || snapOffset.y === 0) {\n const [nextGridX, nextGridY] = (0,_snapping__WEBPACK_IMPORTED_MODULE_8__.getGridPoint)(x + dragOffset.x, y + dragOffset.y, gridSize);\n\n if (snapOffset.x === 0) {\n nextX = nextGridX;\n }\n\n if (snapOffset.y === 0) {\n nextY = nextGridY;\n }\n }\n\n return {\n x: nextX - x,\n y: nextY - y\n };\n};\n\nconst updateElementCoords = (pointerDownState, element, dragOffset) => {\n var _a;\n\n const originalElement = (_a = pointerDownState.originalElements.get(element.id)) !== null && _a !== void 0 ? _a : element;\n const nextX = originalElement.x + dragOffset.x;\n const nextY = originalElement.y + dragOffset.y;\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_2__.mutateElement)(element, {\n x: nextX,\n y: nextY\n });\n};\n\nconst getDragOffsetXY = (selectedElements, x, y) => {\n const [x1, y1] = (0,_bounds__WEBPACK_IMPORTED_MODULE_1__.getCommonBounds)(selectedElements);\n return [x - x1, y - y1];\n};\nconst dragNewElement = ({\n newElement,\n elementType,\n originX,\n originY,\n x,\n y,\n width,\n height,\n shouldMaintainAspectRatio,\n shouldResizeFromCenter,\n zoom,\n widthAspectRatio = null,\n originOffset = null,\n informMutation = true\n}) => {\n var _a, _b;\n\n if (shouldMaintainAspectRatio && newElement.type !== \"selection\") {\n if (widthAspectRatio) {\n height = width / widthAspectRatio;\n } else {\n // Depending on where the cursor is at (x, y) relative to where the starting point is\n // (originX, originY), we use ONLY width or height to control size increase.\n // This allows the cursor to always \"stick\" to one of the sides of the bounding box.\n if (Math.abs(y - originY) > Math.abs(x - originX)) {\n ({\n width,\n height\n } = (0,_sizeHelpers__WEBPACK_IMPORTED_MODULE_3__.getPerfectElementSize)(elementType, height, x < originX ? -width : width));\n } else {\n ({\n width,\n height\n } = (0,_sizeHelpers__WEBPACK_IMPORTED_MODULE_3__.getPerfectElementSize)(elementType, width, y < originY ? -height : height));\n }\n\n if (height < 0) {\n height = -height;\n }\n }\n }\n\n let newX = x < originX ? originX - width : originX;\n let newY = y < originY ? originY - height : originY;\n\n if (shouldResizeFromCenter) {\n width += width;\n height += height;\n newX = originX - width / 2;\n newY = originY - height / 2;\n }\n\n let textAutoResize = null;\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isTextElement)(newElement)) {\n height = newElement.height;\n const minWidth = (0,_textElement__WEBPACK_IMPORTED_MODULE_4__.getMinTextElementWidth)((0,_utils__WEBPACK_IMPORTED_MODULE_6__.getFontString)({\n fontSize: newElement.fontSize,\n fontFamily: newElement.fontFamily\n }), newElement.lineHeight);\n width = Math.max(width, minWidth);\n\n if (Math.abs(x - originX) > _constants__WEBPACK_IMPORTED_MODULE_7__.TEXT_AUTOWRAP_THRESHOLD / zoom) {\n textAutoResize = {\n autoResize: false\n };\n }\n\n newY = originY;\n\n if (shouldResizeFromCenter) {\n newX = originX - width / 2;\n }\n }\n\n if (width !== 0 && height !== 0) {\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_2__.mutateElement)(newElement, Object.assign({\n x: newX + ((_a = originOffset === null || originOffset === void 0 ? void 0 : originOffset.x) !== null && _a !== void 0 ? _a : 0),\n y: newY + ((_b = originOffset === null || originOffset === void 0 ? void 0 : originOffset.y) !== null && _b !== void 0 ? _b : 0),\n width,\n height\n }, textAutoResize), informMutation);\n }\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./element/dragElements.ts?");
|
|
2832
2832
|
|
|
2833
2833
|
/***/ }),
|
|
2834
2834
|
|
|
@@ -2894,7 +2894,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
2894
2894
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
2895
2895
|
|
|
2896
2896
|
"use strict";
|
|
2897
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"LinearElementEditor\": () => (/* binding */ LinearElementEditor)\n/* harmony export */ });\n/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! . */ \"./element/index.ts\");\n/* harmony import */ var _bounds__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./bounds */ \"./element/bounds.ts\");\n/* harmony import */ var _mutateElement__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _binding__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./binding */ \"./element/binding.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _typeChecks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _keys__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../keys */ \"./keys.ts\");\n/* harmony import */ var _textElement__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../scene/ShapeCache */ \"./scene/ShapeCache.ts\");\n/* harmony import */ var _routing__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./routing */ \"./element/routing.ts\");\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../math */ \"../math/index.ts\");\n/* harmony import */ var _shapes__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../shapes */ \"./shapes.tsx\");\n/* harmony import */ var _snapping__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../snapping */ \"./snapping.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst editorMidPointsCache = {\n version: null,\n points: [],\n zoom: null\n};\nclass LinearElementEditor {\n constructor(element) {\n this.elementId = element.id;\n\n if (!(0,_math__WEBPACK_IMPORTED_MODULE_11__.pointsEqual)(element.points[0], (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(0, 0))) {\n console.error(\"Linear element is not normalized\", Error().stack);\n }\n\n this.selectedPointsIndices = null;\n this.lastUncommittedPoint = null;\n this.isDragging = false;\n this.pointerOffset = {\n x: 0,\n y: 0\n };\n this.startBindingElement = \"keep\";\n this.endBindingElement = \"keep\";\n this.pointerDownState = {\n prevSelectedPointsIndices: null,\n lastClickedPoint: -1,\n lastClickedIsEndPoint: false,\n origin: null,\n segmentMidpoint: {\n value: null,\n index: null,\n added: false\n }\n };\n this.hoverPointIndex = -1;\n this.segmentMidPointHoveredCoords = null;\n }\n /**\n * @param id the `elementId` from the instance of this class (so that we can\n * statically guarantee this method returns an ExcalidrawLinearElement)\n */\n\n\n static getElement(id, elementsMap) {\n const element = elementsMap.get(id);\n\n if (element) {\n return element;\n }\n\n return null;\n }\n\n static handleBoxSelection(event, appState, setState, elementsMap) {\n if (!appState.editingLinearElement || !appState.selectionElement) {\n return false;\n }\n\n const {\n editingLinearElement\n } = appState;\n const {\n selectedPointsIndices,\n elementId\n } = editingLinearElement;\n const element = LinearElementEditor.getElement(elementId, elementsMap);\n\n if (!element) {\n return false;\n }\n\n const [selectionX1, selectionY1, selectionX2, selectionY2] = (0,___WEBPACK_IMPORTED_MODULE_0__.getElementAbsoluteCoords)(appState.selectionElement, elementsMap);\n const pointsSceneCoords = LinearElementEditor.getPointsGlobalCoordinates(element, elementsMap);\n const nextSelectedPoints = pointsSceneCoords.reduce((acc, point, index) => {\n if (point[0] >= selectionX1 && point[0] <= selectionX2 && point[1] >= selectionY1 && point[1] <= selectionY2 || event.shiftKey && (selectedPointsIndices === null || selectedPointsIndices === void 0 ? void 0 : selectedPointsIndices.includes(index))) {\n acc.push(index);\n }\n\n return acc;\n }, []).filter(index => {\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isElbowArrow)(element) && index !== 0 && index !== element.points.length - 1) {\n return false;\n }\n\n return true;\n });\n setState({\n editingLinearElement: Object.assign(Object.assign({}, editingLinearElement), {\n selectedPointsIndices: nextSelectedPoints.length ? nextSelectedPoints : null\n })\n });\n }\n /** @returns whether point was dragged */\n\n\n static handlePointDragging(event, app, scenePointerX, scenePointerY, maybeSuggestBinding, linearElementEditor, scene) {\n var _a;\n\n if (!linearElementEditor) {\n return false;\n }\n\n const {\n elementId\n } = linearElementEditor;\n const elementsMap = scene.getNonDeletedElementsMap();\n const element = LinearElementEditor.getElement(elementId, elementsMap);\n\n if (!element) {\n return false;\n }\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isElbowArrow)(element) && !linearElementEditor.pointerDownState.lastClickedIsEndPoint && linearElementEditor.pointerDownState.lastClickedPoint !== 0) {\n return false;\n }\n\n const selectedPointsIndices = (0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isElbowArrow)(element) ? (_a = linearElementEditor.selectedPointsIndices) === null || _a === void 0 ? void 0 : _a.reduce((startEnd, index) => index === 0 ? [0, startEnd[1]] : [startEnd[0], element.points.length - 1], [false, false]).filter(idx => typeof idx === \"number\") : linearElementEditor.selectedPointsIndices;\n const lastClickedPoint = (0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isElbowArrow)(element) ? linearElementEditor.pointerDownState.lastClickedPoint > 0 ? element.points.length - 1 : 0 : linearElementEditor.pointerDownState.lastClickedPoint; // point that's being dragged (out of all selected points)\n\n const draggingPoint = element.points[lastClickedPoint];\n\n if (selectedPointsIndices && draggingPoint) {\n if ((0,_keys__WEBPACK_IMPORTED_MODULE_6__.shouldRotateWithDiscreteAngle)(event) && selectedPointsIndices.length === 1 && element.points.length > 1) {\n const selectedIndex = selectedPointsIndices[0];\n const referencePoint = element.points[selectedIndex === 0 ? 1 : selectedIndex - 1];\n\n const [width, height] = LinearElementEditor._getShiftLockedDelta(element, elementsMap, referencePoint, (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(scenePointerX, scenePointerY), event[_keys__WEBPACK_IMPORTED_MODULE_6__.KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize());\n\n LinearElementEditor.movePoints(element, [{\n index: selectedIndex,\n point: (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(width + referencePoint[0], height + referencePoint[1]),\n isDragging: selectedIndex === lastClickedPoint\n }], elementsMap);\n } else {\n const newDraggingPointPosition = LinearElementEditor.createPointAt(element, elementsMap, scenePointerX - linearElementEditor.pointerOffset.x, scenePointerY - linearElementEditor.pointerOffset.y, event[_keys__WEBPACK_IMPORTED_MODULE_6__.KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize());\n const deltaX = newDraggingPointPosition[0] - draggingPoint[0];\n const deltaY = newDraggingPointPosition[1] - draggingPoint[1];\n LinearElementEditor.movePoints(element, selectedPointsIndices.map(pointIndex => {\n const newPointPosition = pointIndex === lastClickedPoint ? LinearElementEditor.createPointAt(element, elementsMap, scenePointerX - linearElementEditor.pointerOffset.x, scenePointerY - linearElementEditor.pointerOffset.y, event[_keys__WEBPACK_IMPORTED_MODULE_6__.KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize()) : (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(element.points[pointIndex][0] + deltaX, element.points[pointIndex][1] + deltaY);\n return {\n index: pointIndex,\n point: newPointPosition,\n isDragging: pointIndex === lastClickedPoint\n };\n }), elementsMap);\n }\n\n const boundTextElement = (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.getBoundTextElement)(element, elementsMap);\n\n if (boundTextElement) {\n (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.handleBindTextResize)(element, elementsMap, false);\n } // suggest bindings for first and last point if selected\n\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isBindingElement)(element, false)) {\n const coords = [];\n const firstSelectedIndex = selectedPointsIndices[0];\n\n if (firstSelectedIndex === 0) {\n coords.push((0,_utils__WEBPACK_IMPORTED_MODULE_4__.tupleToCoors)(LinearElementEditor.getPointGlobalCoordinates(element, element.points[0], elementsMap)));\n }\n\n const lastSelectedIndex = selectedPointsIndices[selectedPointsIndices.length - 1];\n\n if (lastSelectedIndex === element.points.length - 1) {\n coords.push((0,_utils__WEBPACK_IMPORTED_MODULE_4__.tupleToCoors)(LinearElementEditor.getPointGlobalCoordinates(element, element.points[lastSelectedIndex], elementsMap)));\n }\n\n if (coords.length) {\n maybeSuggestBinding(element, coords);\n }\n }\n\n return true;\n }\n\n return false;\n }\n\n static handlePointerUp(event, editingLinearElement, appState, scene) {\n var _a;\n\n const elementsMap = scene.getNonDeletedElementsMap();\n const elements = scene.getNonDeletedElements();\n const {\n elementId,\n selectedPointsIndices,\n isDragging,\n pointerDownState\n } = editingLinearElement;\n const element = LinearElementEditor.getElement(elementId, elementsMap);\n\n if (!element) {\n return editingLinearElement;\n }\n\n const bindings = {};\n\n if (isDragging && selectedPointsIndices) {\n for (const selectedPoint of selectedPointsIndices) {\n if (selectedPoint === 0 || selectedPoint === element.points.length - 1) {\n if ((0,_shapes__WEBPACK_IMPORTED_MODULE_12__.isPathALoop)(element.points, appState.zoom.value)) {\n LinearElementEditor.movePoints(element, [{\n index: selectedPoint,\n point: selectedPoint === 0 ? element.points[element.points.length - 1] : element.points[0]\n }], elementsMap);\n }\n\n const bindingElement = (0,_binding__WEBPACK_IMPORTED_MODULE_3__.isBindingEnabled)(appState) ? (0,_binding__WEBPACK_IMPORTED_MODULE_3__.getHoveredElementForBinding)((0,_utils__WEBPACK_IMPORTED_MODULE_4__.tupleToCoors)(LinearElementEditor.getPointAtIndexGlobalCoordinates(element, selectedPoint, elementsMap)), elements, elementsMap) : null;\n bindings[selectedPoint === 0 ? \"startBindingElement\" : \"endBindingElement\"] = bindingElement;\n }\n }\n }\n\n return Object.assign(Object.assign(Object.assign({}, editingLinearElement), bindings), {\n // if clicking without previously dragging a point(s), and not holding\n // shift, deselect all points except the one clicked. If holding shift,\n // toggle the point.\n selectedPointsIndices: isDragging || event.shiftKey ? !isDragging && event.shiftKey && ((_a = pointerDownState.prevSelectedPointsIndices) === null || _a === void 0 ? void 0 : _a.includes(pointerDownState.lastClickedPoint)) ? selectedPointsIndices && selectedPointsIndices.filter(pointIndex => pointIndex !== pointerDownState.lastClickedPoint) : selectedPointsIndices : (selectedPointsIndices === null || selectedPointsIndices === void 0 ? void 0 : selectedPointsIndices.includes(pointerDownState.lastClickedPoint)) ? [pointerDownState.lastClickedPoint] : selectedPointsIndices,\n isDragging: false,\n pointerOffset: {\n x: 0,\n y: 0\n }\n });\n }\n\n static isSegmentTooShort(element, startPoint, endPoint, zoom) {\n let distance = (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointDistance)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(startPoint[0], startPoint[1]), (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(endPoint[0], endPoint[1]));\n\n if (element.points.length > 2 && element.roundness) {\n distance = (0,_shapes__WEBPACK_IMPORTED_MODULE_12__.getBezierCurveLength)(element, endPoint);\n }\n\n return distance * zoom.value < LinearElementEditor.POINT_HANDLE_SIZE * 4;\n }\n\n static getSegmentMidPoint(element, startPoint, endPoint, endPointIndex, elementsMap) {\n let segmentMidPoint = (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointCenter)(startPoint, endPoint);\n\n if (element.points.length > 2 && element.roundness) {\n const controlPoints = (0,_shapes__WEBPACK_IMPORTED_MODULE_12__.getControlPointsForBezierCurve)(element, element.points[endPointIndex]);\n\n if (controlPoints) {\n const t = (0,_shapes__WEBPACK_IMPORTED_MODULE_12__.mapIntervalToBezierT)(element, element.points[endPointIndex], 0.5);\n segmentMidPoint = LinearElementEditor.getPointGlobalCoordinates(element, (0,_shapes__WEBPACK_IMPORTED_MODULE_12__.getBezierXY)(controlPoints[0], controlPoints[1], controlPoints[2], controlPoints[3], t), elementsMap);\n }\n }\n\n return segmentMidPoint;\n }\n\n static getSegmentMidPointIndex(linearElementEditor, appState, midPoint, elementsMap) {\n const element = LinearElementEditor.getElement(linearElementEditor.elementId, elementsMap);\n\n if (!element) {\n return -1;\n }\n\n const midPoints = LinearElementEditor.getEditorMidPoints(element, elementsMap, appState);\n let index = 0;\n\n while (index < midPoints.length) {\n if (LinearElementEditor.arePointsEqual(midPoint, midPoints[index])) {\n return index + 1;\n }\n\n index++;\n }\n\n return -1;\n }\n\n static handlePointerDown(event, app, store, scenePointer, linearElementEditor, scene) {\n var _a;\n\n const appState = app.state;\n const elementsMap = scene.getNonDeletedElementsMap();\n const elements = scene.getNonDeletedElements();\n const ret = {\n didAddPoint: false,\n hitElement: null,\n linearElementEditor: null\n };\n\n if (!linearElementEditor) {\n return ret;\n }\n\n const {\n elementId\n } = linearElementEditor;\n const element = LinearElementEditor.getElement(elementId, elementsMap);\n\n if (!element) {\n return ret;\n }\n\n const segmentMidpoint = LinearElementEditor.getSegmentMidpointHitCoords(linearElementEditor, scenePointer, appState, elementsMap);\n let segmentMidpointIndex = null;\n\n if (segmentMidpoint) {\n segmentMidpointIndex = LinearElementEditor.getSegmentMidPointIndex(linearElementEditor, appState, segmentMidpoint, elementsMap);\n }\n\n if (event.altKey && appState.editingLinearElement) {\n if (linearElementEditor.lastUncommittedPoint == null && !(0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isElbowArrow)(element)) {\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_2__.mutateElement)(element, {\n points: [...element.points, LinearElementEditor.createPointAt(element, elementsMap, scenePointer.x, scenePointer.y, event[_keys__WEBPACK_IMPORTED_MODULE_6__.KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize())]\n });\n ret.didAddPoint = true;\n }\n\n store.shouldCaptureIncrement();\n ret.linearElementEditor = Object.assign(Object.assign({}, linearElementEditor), {\n pointerDownState: {\n prevSelectedPointsIndices: linearElementEditor.selectedPointsIndices,\n lastClickedPoint: -1,\n lastClickedIsEndPoint: false,\n origin: {\n x: scenePointer.x,\n y: scenePointer.y\n },\n segmentMidpoint: {\n value: segmentMidpoint,\n index: segmentMidpointIndex,\n added: false\n }\n },\n selectedPointsIndices: [element.points.length - 1],\n lastUncommittedPoint: null,\n endBindingElement: (0,_binding__WEBPACK_IMPORTED_MODULE_3__.getHoveredElementForBinding)(scenePointer, elements, elementsMap)\n });\n ret.didAddPoint = true;\n return ret;\n }\n\n const clickedPointIndex = LinearElementEditor.getPointIndexUnderCursor(element, elementsMap, appState.zoom, scenePointer.x, scenePointer.y); // if we clicked on a point, set the element as hitElement otherwise\n // it would get deselected if the point is outside the hitbox area\n\n if (clickedPointIndex >= 0 || segmentMidpoint) {\n ret.hitElement = element;\n } else {\n // You might be wandering why we are storing the binding elements on\n // LinearElementEditor and passing them in, instead of calculating them\n // from the end points of the `linearElement` - this is to allow disabling\n // binding (which needs to happen at the point the user finishes moving\n // the point).\n const {\n startBindingElement,\n endBindingElement\n } = linearElementEditor;\n\n if ((0,_binding__WEBPACK_IMPORTED_MODULE_3__.isBindingEnabled)(appState) && (0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isBindingElement)(element)) {\n (0,_binding__WEBPACK_IMPORTED_MODULE_3__.bindOrUnbindLinearElement)(element, startBindingElement, endBindingElement, elementsMap, scene);\n }\n }\n\n const [x1, y1, x2, y2] = (0,___WEBPACK_IMPORTED_MODULE_0__.getElementAbsoluteCoords)(element, elementsMap);\n const cx = (x1 + x2) / 2;\n const cy = (y1 + y2) / 2;\n const targetPoint = clickedPointIndex > -1 && (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(element.x + element.points[clickedPointIndex][0], element.y + element.points[clickedPointIndex][1]), (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(cx, cy), element.angle);\n const nextSelectedPointsIndices = clickedPointIndex > -1 || event.shiftKey ? event.shiftKey || ((_a = linearElementEditor.selectedPointsIndices) === null || _a === void 0 ? void 0 : _a.includes(clickedPointIndex)) ? normalizeSelectedPoints([...(linearElementEditor.selectedPointsIndices || []), clickedPointIndex]) : [clickedPointIndex] : null;\n ret.linearElementEditor = Object.assign(Object.assign({}, linearElementEditor), {\n pointerDownState: {\n prevSelectedPointsIndices: linearElementEditor.selectedPointsIndices,\n lastClickedPoint: clickedPointIndex,\n lastClickedIsEndPoint: clickedPointIndex === element.points.length - 1,\n origin: {\n x: scenePointer.x,\n y: scenePointer.y\n },\n segmentMidpoint: {\n value: segmentMidpoint,\n index: segmentMidpointIndex,\n added: false\n }\n },\n selectedPointsIndices: nextSelectedPointsIndices,\n pointerOffset: targetPoint ? {\n x: scenePointer.x - targetPoint[0],\n y: scenePointer.y - targetPoint[1]\n } : {\n x: 0,\n y: 0\n }\n });\n return ret;\n }\n\n static arePointsEqual(point1, point2) {\n if (!point1 && !point2) {\n return true;\n }\n\n if (!point1 || !point2) {\n return false;\n }\n\n return (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointsEqual)(point1, point2);\n }\n\n static handlePointerMove(event, scenePointerX, scenePointerY, app, elementsMap) {\n const appState = app.state;\n\n if (!appState.editingLinearElement) {\n return null;\n }\n\n const {\n elementId,\n lastUncommittedPoint\n } = appState.editingLinearElement;\n const element = LinearElementEditor.getElement(elementId, elementsMap);\n\n if (!element) {\n return appState.editingLinearElement;\n }\n\n const {\n points\n } = element;\n const lastPoint = points[points.length - 1];\n\n if (!event.altKey) {\n if (lastPoint === lastUncommittedPoint) {\n LinearElementEditor.deletePoints(element, [points.length - 1], elementsMap);\n }\n\n return Object.assign(Object.assign({}, appState.editingLinearElement), {\n lastUncommittedPoint: null\n });\n }\n\n let newPoint;\n\n if ((0,_keys__WEBPACK_IMPORTED_MODULE_6__.shouldRotateWithDiscreteAngle)(event) && points.length >= 2) {\n const lastCommittedPoint = points[points.length - 2];\n\n const [width, height] = LinearElementEditor._getShiftLockedDelta(element, elementsMap, lastCommittedPoint, (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(scenePointerX, scenePointerY), event[_keys__WEBPACK_IMPORTED_MODULE_6__.KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize());\n\n newPoint = (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(width + lastCommittedPoint[0], height + lastCommittedPoint[1]);\n } else {\n newPoint = LinearElementEditor.createPointAt(element, elementsMap, scenePointerX - appState.editingLinearElement.pointerOffset.x, scenePointerY - appState.editingLinearElement.pointerOffset.y, event[_keys__WEBPACK_IMPORTED_MODULE_6__.KEYS.CTRL_OR_CMD] || (0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isElbowArrow)(element) ? null : app.getEffectiveGridSize());\n }\n\n if (lastPoint === lastUncommittedPoint) {\n LinearElementEditor.movePoints(element, [{\n index: element.points.length - 1,\n point: newPoint\n }], elementsMap);\n } else {\n LinearElementEditor.addPoints(element, [{\n point: newPoint\n }], elementsMap);\n }\n\n return Object.assign(Object.assign({}, appState.editingLinearElement), {\n lastUncommittedPoint: element.points[element.points.length - 1]\n });\n }\n /** scene coords */\n\n\n static getPointGlobalCoordinates(element, p, elementsMap) {\n const [x1, y1, x2, y2] = (0,___WEBPACK_IMPORTED_MODULE_0__.getElementAbsoluteCoords)(element, elementsMap);\n const cx = (x1 + x2) / 2;\n const cy = (y1 + y2) / 2;\n const {\n x,\n y\n } = element;\n return (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(x + p[0], y + p[1]), (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(cx, cy), element.angle);\n }\n /** scene coords */\n\n\n static getPointsGlobalCoordinates(element, elementsMap) {\n const [x1, y1, x2, y2] = (0,___WEBPACK_IMPORTED_MODULE_0__.getElementAbsoluteCoords)(element, elementsMap);\n const cx = (x1 + x2) / 2;\n const cy = (y1 + y2) / 2;\n return element.points.map(p => {\n const {\n x,\n y\n } = element;\n return (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(x + p[0], y + p[1]), (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(cx, cy), element.angle);\n });\n }\n\n static getPointAtIndexGlobalCoordinates(element, indexMaybeFromEnd, // -1 for last element\n elementsMap) {\n const index = indexMaybeFromEnd < 0 ? element.points.length + indexMaybeFromEnd : indexMaybeFromEnd;\n const [x1, y1, x2, y2] = (0,___WEBPACK_IMPORTED_MODULE_0__.getElementAbsoluteCoords)(element, elementsMap);\n const cx = (x1 + x2) / 2;\n const cy = (y1 + y2) / 2;\n const p = element.points[index];\n const {\n x,\n y\n } = element;\n return p ? (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(x + p[0], y + p[1]), (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(cx, cy), element.angle) : (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(x, y), (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(cx, cy), element.angle);\n }\n\n static pointFromAbsoluteCoords(element, absoluteCoords, elementsMap) {\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isElbowArrow)(element)) {\n // No rotation for elbow arrows\n return (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(absoluteCoords[0] - element.x, absoluteCoords[1] - element.y);\n }\n\n const [x1, y1, x2, y2] = (0,___WEBPACK_IMPORTED_MODULE_0__.getElementAbsoluteCoords)(element, elementsMap);\n const cx = (x1 + x2) / 2;\n const cy = (y1 + y2) / 2;\n const [x, y] = (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(absoluteCoords[0], absoluteCoords[1]), (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(cx, cy), -element.angle);\n return (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(x - element.x, y - element.y);\n }\n\n static getPointIndexUnderCursor(element, elementsMap, zoom, x, y) {\n const pointHandles = LinearElementEditor.getPointsGlobalCoordinates(element, elementsMap);\n let idx = pointHandles.length; // loop from right to left because points on the right are rendered over\n // points on the left, thus should take precedence when clicking, if they\n // overlap\n\n while (--idx > -1) {\n const p = pointHandles[idx];\n\n if ((0,_math__WEBPACK_IMPORTED_MODULE_11__.pointDistance)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(x, y), (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(p[0], p[1])) * zoom.value < // +1px to account for outline stroke\n LinearElementEditor.POINT_HANDLE_SIZE + 1) {\n return idx;\n }\n }\n\n return -1;\n }\n\n static createPointAt(element, elementsMap, scenePointerX, scenePointerY, gridSize) {\n const pointerOnGrid = (0,_snapping__WEBPACK_IMPORTED_MODULE_13__.getGridPoint)(scenePointerX, scenePointerY, gridSize);\n const [x1, y1, x2, y2] = (0,___WEBPACK_IMPORTED_MODULE_0__.getElementAbsoluteCoords)(element, elementsMap);\n const cx = (x1 + x2) / 2;\n const cy = (y1 + y2) / 2;\n const [rotatedX, rotatedY] = (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(pointerOnGrid[0], pointerOnGrid[1]), (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(cx, cy), -element.angle);\n return (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(rotatedX - element.x, rotatedY - element.y);\n }\n /**\n * Normalizes line points so that the start point is at [0,0]. This is\n * expected in various parts of the codebase. Also returns new x/y to account\n * for the potential normalization.\n */\n\n\n static getNormalizedPoints(element) {\n const {\n points\n } = element;\n const offsetX = points[0][0];\n const offsetY = points[0][1];\n return {\n points: points.map(p => {\n return (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(p[0] - offsetX, p[1] - offsetY);\n }),\n x: element.x + offsetX,\n y: element.y + offsetY\n };\n } // element-mutating methods\n // ---------------------------------------------------------------------------\n\n\n static normalizePoints(element) {\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_2__.mutateElement)(element, LinearElementEditor.getNormalizedPoints(element));\n }\n\n static duplicateSelectedPoints(appState, elementsMap) {\n (0,_utils__WEBPACK_IMPORTED_MODULE_4__.invariant)(appState.editingLinearElement, \"Not currently editing a linear element\");\n const {\n selectedPointsIndices,\n elementId\n } = appState.editingLinearElement;\n const element = LinearElementEditor.getElement(elementId, elementsMap);\n (0,_utils__WEBPACK_IMPORTED_MODULE_4__.invariant)(element, \"The linear element does not exist in the provided Scene\");\n (0,_utils__WEBPACK_IMPORTED_MODULE_4__.invariant)(selectedPointsIndices != null, \"There are no selected points to duplicate\");\n const {\n points\n } = element;\n const nextSelectedIndices = [];\n let pointAddedToEnd = false;\n let indexCursor = -1;\n const nextPoints = points.reduce((acc, p, index) => {\n ++indexCursor;\n acc.push(p);\n const isSelected = selectedPointsIndices.includes(index);\n\n if (isSelected) {\n const nextPoint = points[index + 1];\n\n if (!nextPoint) {\n pointAddedToEnd = true;\n }\n\n acc.push(nextPoint ? (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)((p[0] + nextPoint[0]) / 2, (p[1] + nextPoint[1]) / 2) : (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(p[0], p[1]));\n nextSelectedIndices.push(indexCursor + 1);\n ++indexCursor;\n }\n\n return acc;\n }, []);\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_2__.mutateElement)(element, {\n points: nextPoints\n }); // temp hack to ensure the line doesn't move when adding point to the end,\n // potentially expanding the bounding box\n\n if (pointAddedToEnd) {\n const lastPoint = element.points[element.points.length - 1];\n LinearElementEditor.movePoints(element, [{\n index: element.points.length - 1,\n point: (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(lastPoint[0] + 30, lastPoint[1] + 30)\n }], elementsMap);\n }\n\n return Object.assign(Object.assign({}, appState), {\n editingLinearElement: Object.assign(Object.assign({}, appState.editingLinearElement), {\n selectedPointsIndices: nextSelectedIndices\n })\n });\n }\n\n static deletePoints(element, pointIndices, elementsMap) {\n let offsetX = 0;\n let offsetY = 0;\n const isDeletingOriginPoint = pointIndices.includes(0); // if deleting first point, make the next to be [0,0] and recalculate\n // positions of the rest with respect to it\n\n if (isDeletingOriginPoint) {\n const firstNonDeletedPoint = element.points.find((point, idx) => {\n return !pointIndices.includes(idx);\n });\n\n if (firstNonDeletedPoint) {\n offsetX = firstNonDeletedPoint[0];\n offsetY = firstNonDeletedPoint[1];\n }\n }\n\n const nextPoints = element.points.reduce((acc, p, idx) => {\n if (!pointIndices.includes(idx)) {\n acc.push(!acc.length ? (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(0, 0) : (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(p[0] - offsetX, p[1] - offsetY));\n }\n\n return acc;\n }, []);\n\n LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY, elementsMap);\n }\n\n static addPoints(element, targetPoints, elementsMap) {\n const offsetX = 0;\n const offsetY = 0;\n const nextPoints = [...element.points, ...targetPoints.map(x => x.point)];\n\n LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY, elementsMap);\n }\n\n static movePoints(element, targetPoints, elementsMap, otherUpdates, options) {\n const {\n points\n } = element; // in case we're moving start point, instead of modifying its position\n // which would break the invariant of it being at [0,0], we move\n // all the other points in the opposite direction by delta to\n // offset it. We do the same with actual element.x/y position, so\n // this hacks are completely transparent to the user.\n\n let offsetX = 0;\n let offsetY = 0;\n const selectedOriginPoint = targetPoints.find(({\n index\n }) => index === 0);\n\n if (selectedOriginPoint) {\n offsetX = selectedOriginPoint.point[0] + points[selectedOriginPoint.index][0];\n offsetY = selectedOriginPoint.point[1] + points[selectedOriginPoint.index][1];\n }\n\n const nextPoints = points.map((p, idx) => {\n const selectedPointData = targetPoints.find(t => t.index === idx);\n\n if (selectedPointData) {\n if (selectedPointData.index === 0) {\n return p;\n }\n\n const deltaX = selectedPointData.point[0] - points[selectedPointData.index][0];\n const deltaY = selectedPointData.point[1] - points[selectedPointData.index][1];\n return (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(p[0] + deltaX - offsetX, p[1] + deltaY - offsetY);\n }\n\n return offsetX || offsetY ? (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(p[0] - offsetX, p[1] - offsetY) : p;\n });\n\n LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY, elementsMap, otherUpdates, {\n isDragging: targetPoints.reduce((dragging, targetPoint) => dragging || targetPoint.isDragging === true, false),\n changedElements: options === null || options === void 0 ? void 0 : options.changedElements\n });\n }\n\n static shouldAddMidpoint(linearElementEditor, pointerCoords, appState, elementsMap) {\n const element = LinearElementEditor.getElement(linearElementEditor.elementId, elementsMap); // Elbow arrows don't allow midpoints\n\n if (element && (0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isElbowArrow)(element)) {\n return false;\n }\n\n if (!element) {\n return false;\n }\n\n const {\n segmentMidpoint\n } = linearElementEditor.pointerDownState;\n\n if (segmentMidpoint.added || segmentMidpoint.value === null || segmentMidpoint.index === null || linearElementEditor.pointerDownState.origin === null) {\n return false;\n }\n\n const origin = linearElementEditor.pointerDownState.origin;\n const dist = (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointDistance)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(origin.x, origin.y), (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(pointerCoords.x, pointerCoords.y));\n\n if (!appState.editingLinearElement && dist < _constants__WEBPACK_IMPORTED_MODULE_8__.DRAGGING_THRESHOLD / appState.zoom.value) {\n return false;\n }\n\n return true;\n }\n\n static addMidpoint(linearElementEditor, pointerCoords, app, snapToGrid, elementsMap) {\n const element = LinearElementEditor.getElement(linearElementEditor.elementId, elementsMap);\n\n if (!element) {\n return;\n }\n\n const {\n segmentMidpoint\n } = linearElementEditor.pointerDownState;\n const ret = {\n pointerDownState: linearElementEditor.pointerDownState,\n selectedPointsIndices: linearElementEditor.selectedPointsIndices\n };\n const midpoint = LinearElementEditor.createPointAt(element, elementsMap, pointerCoords.x, pointerCoords.y, snapToGrid && !(0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isElbowArrow)(element) ? app.getEffectiveGridSize() : null);\n const points = [...element.points.slice(0, segmentMidpoint.index), midpoint, ...element.points.slice(segmentMidpoint.index)];\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_2__.mutateElement)(element, {\n points\n });\n ret.pointerDownState = Object.assign(Object.assign({}, linearElementEditor.pointerDownState), {\n segmentMidpoint: Object.assign(Object.assign({}, linearElementEditor.pointerDownState.segmentMidpoint), {\n added: true\n }),\n lastClickedPoint: segmentMidpoint.index\n });\n ret.selectedPointsIndices = [segmentMidpoint.index];\n return ret;\n }\n\n static _updatePoints(element, nextPoints, offsetX, offsetY, elementsMap, otherUpdates, options) {\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isElbowArrow)(element)) {\n const bindings = {};\n\n if ((otherUpdates === null || otherUpdates === void 0 ? void 0 : otherUpdates.startBinding) !== undefined) {\n bindings.startBinding = otherUpdates.startBinding !== null && (0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isFixedPointBinding)(otherUpdates.startBinding) ? otherUpdates.startBinding : null;\n }\n\n if ((otherUpdates === null || otherUpdates === void 0 ? void 0 : otherUpdates.endBinding) !== undefined) {\n bindings.endBinding = otherUpdates.endBinding !== null && (0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isFixedPointBinding)(otherUpdates.endBinding) ? otherUpdates.endBinding : null;\n }\n\n const mergedElementsMap = (options === null || options === void 0 ? void 0 : options.changedElements) ? (0,_utils__WEBPACK_IMPORTED_MODULE_4__.toBrandedType)(new Map([...elementsMap, ...options.changedElements])) : elementsMap;\n (0,_routing__WEBPACK_IMPORTED_MODULE_10__.mutateElbowArrow)(element, mergedElementsMap, nextPoints, (0,_math__WEBPACK_IMPORTED_MODULE_11__.vector)(offsetX, offsetY), bindings, options);\n } else {\n const nextCoords = (0,_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementPointsCoords)(element, nextPoints);\n const prevCoords = (0,_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementPointsCoords)(element, element.points);\n const nextCenterX = (nextCoords[0] + nextCoords[2]) / 2;\n const nextCenterY = (nextCoords[1] + nextCoords[3]) / 2;\n const prevCenterX = (prevCoords[0] + prevCoords[2]) / 2;\n const prevCenterY = (prevCoords[1] + prevCoords[3]) / 2;\n const dX = prevCenterX - nextCenterX;\n const dY = prevCenterY - nextCenterY;\n const rotated = (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(offsetX, offsetY), (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(dX, dY), element.angle);\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_2__.mutateElement)(element, Object.assign(Object.assign({}, otherUpdates), {\n points: nextPoints,\n x: element.x + rotated[0],\n y: element.y + rotated[1]\n }));\n }\n }\n\n static _getShiftLockedDelta(element, elementsMap, referencePoint, scenePointer, gridSize) {\n const referencePointCoords = LinearElementEditor.getPointGlobalCoordinates(element, referencePoint, elementsMap);\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isElbowArrow)(element)) {\n return [scenePointer[0] - referencePointCoords[0], scenePointer[1] - referencePointCoords[1]];\n }\n\n const [gridX, gridY] = (0,_snapping__WEBPACK_IMPORTED_MODULE_13__.getGridPoint)(scenePointer[0], scenePointer[1], gridSize);\n const {\n width,\n height\n } = (0,___WEBPACK_IMPORTED_MODULE_0__.getLockedLinearCursorAlignSize)(referencePointCoords[0], referencePointCoords[1], gridX, gridY);\n return (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(width, height), (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(0, 0), -element.angle);\n }\n\n} // ---------------------------------------------------------------------------\n// static methods\n// ---------------------------------------------------------------------------\n\nLinearElementEditor.POINT_HANDLE_SIZE = 10;\n\nLinearElementEditor.getEditorMidPoints = (element, elementsMap, appState) => {\n const boundText = (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.getBoundTextElement)(element, elementsMap); // Since its not needed outside editor unless 2 pointer lines or bound text\n\n if (!appState.editingLinearElement && element.points.length > 2 && !boundText) {\n return [];\n }\n\n if (editorMidPointsCache.version === element.version && editorMidPointsCache.zoom === appState.zoom.value) {\n return editorMidPointsCache.points;\n }\n\n LinearElementEditor.updateEditorMidPointsCache(element, elementsMap, appState);\n return editorMidPointsCache.points;\n};\n\nLinearElementEditor.updateEditorMidPointsCache = (element, elementsMap, appState) => {\n const points = LinearElementEditor.getPointsGlobalCoordinates(element, elementsMap);\n let index = 0;\n const midpoints = [];\n\n while (index < points.length - 1) {\n if (LinearElementEditor.isSegmentTooShort(element, element.points[index], element.points[index + 1], appState.zoom)) {\n midpoints.push(null);\n index++;\n continue;\n }\n\n const segmentMidPoint = LinearElementEditor.getSegmentMidPoint(element, points[index], points[index + 1], index + 1, elementsMap);\n midpoints.push(segmentMidPoint);\n index++;\n }\n\n editorMidPointsCache.points = midpoints;\n editorMidPointsCache.version = element.version;\n editorMidPointsCache.zoom = appState.zoom.value;\n};\n\nLinearElementEditor.getSegmentMidpointHitCoords = (linearElementEditor, scenePointer, appState, elementsMap) => {\n const {\n elementId\n } = linearElementEditor;\n const element = LinearElementEditor.getElement(elementId, elementsMap);\n\n if (!element) {\n return null;\n }\n\n const clickedPointIndex = LinearElementEditor.getPointIndexUnderCursor(element, elementsMap, appState.zoom, scenePointer.x, scenePointer.y);\n\n if (clickedPointIndex >= 0) {\n return null;\n }\n\n const points = LinearElementEditor.getPointsGlobalCoordinates(element, elementsMap);\n\n if (points.length >= 3 && !appState.editingLinearElement) {\n return null;\n }\n\n const threshold = LinearElementEditor.POINT_HANDLE_SIZE / appState.zoom.value;\n const existingSegmentMidpointHitCoords = linearElementEditor.segmentMidPointHoveredCoords;\n\n if (existingSegmentMidpointHitCoords) {\n const distance = (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointDistance)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(existingSegmentMidpointHitCoords[0], existingSegmentMidpointHitCoords[1]), (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(scenePointer.x, scenePointer.y));\n\n if (distance <= threshold) {\n return existingSegmentMidpointHitCoords;\n }\n }\n\n let index = 0;\n const midPoints = LinearElementEditor.getEditorMidPoints(element, elementsMap, appState);\n\n while (index < midPoints.length) {\n if (midPoints[index] !== null) {\n const distance = (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointDistance)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(midPoints[index][0], midPoints[index][1]), (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(scenePointer.x, scenePointer.y));\n\n if (distance <= threshold) {\n return midPoints[index];\n }\n }\n\n index++;\n }\n\n return null;\n};\n\nLinearElementEditor.getBoundTextElementPosition = (element, boundTextElement, elementsMap) => {\n const points = LinearElementEditor.getPointsGlobalCoordinates(element, elementsMap);\n\n if (points.length < 2) {\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_2__.mutateElement)(boundTextElement, {\n isDeleted: true\n });\n }\n\n let x = 0;\n let y = 0;\n\n if (element.points.length % 2 === 1) {\n const index = Math.floor(element.points.length / 2);\n const midPoint = LinearElementEditor.getPointGlobalCoordinates(element, element.points[index], elementsMap);\n x = midPoint[0] - boundTextElement.width / 2;\n y = midPoint[1] - boundTextElement.height / 2;\n } else {\n const index = element.points.length / 2 - 1;\n let midSegmentMidpoint = editorMidPointsCache.points[index];\n\n if (element.points.length === 2) {\n midSegmentMidpoint = (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointCenter)(points[0], points[1]);\n }\n\n if (!midSegmentMidpoint || editorMidPointsCache.version !== element.version) {\n midSegmentMidpoint = LinearElementEditor.getSegmentMidPoint(element, points[index], points[index + 1], index + 1, elementsMap);\n }\n\n x = midSegmentMidpoint[0] - boundTextElement.width / 2;\n y = midSegmentMidpoint[1] - boundTextElement.height / 2;\n }\n\n return {\n x,\n y\n };\n};\n\nLinearElementEditor.getMinMaxXYWithBoundText = (element, elementsMap, elementBounds, boundTextElement) => {\n let [x1, y1, x2, y2] = elementBounds;\n const cx = (x1 + x2) / 2;\n const cy = (y1 + y2) / 2;\n const {\n x: boundTextX1,\n y: boundTextY1\n } = LinearElementEditor.getBoundTextElementPosition(element, boundTextElement, elementsMap);\n const boundTextX2 = boundTextX1 + boundTextElement.width;\n const boundTextY2 = boundTextY1 + boundTextElement.height;\n const centerPoint = (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(cx, cy);\n const topLeftRotatedPoint = (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(x1, y1), centerPoint, element.angle);\n const topRightRotatedPoint = (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(x2, y1), centerPoint, element.angle);\n const counterRotateBoundTextTopLeft = (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(boundTextX1, boundTextY1), centerPoint, -element.angle);\n const counterRotateBoundTextTopRight = (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(boundTextX2, boundTextY1), centerPoint, -element.angle);\n const counterRotateBoundTextBottomLeft = (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(boundTextX1, boundTextY2), centerPoint, -element.angle);\n const counterRotateBoundTextBottomRight = (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(boundTextX2, boundTextY2), centerPoint, -element.angle);\n\n if (topLeftRotatedPoint[0] < topRightRotatedPoint[0] && topLeftRotatedPoint[1] >= topRightRotatedPoint[1]) {\n x1 = Math.min(x1, counterRotateBoundTextBottomLeft[0]);\n x2 = Math.max(x2, Math.max(counterRotateBoundTextTopRight[0], counterRotateBoundTextBottomRight[0]));\n y1 = Math.min(y1, counterRotateBoundTextTopLeft[1]);\n y2 = Math.max(y2, counterRotateBoundTextBottomRight[1]);\n } else if (topLeftRotatedPoint[0] >= topRightRotatedPoint[0] && topLeftRotatedPoint[1] > topRightRotatedPoint[1]) {\n x1 = Math.min(x1, counterRotateBoundTextBottomRight[0]);\n x2 = Math.max(x2, Math.max(counterRotateBoundTextTopLeft[0], counterRotateBoundTextTopRight[0]));\n y1 = Math.min(y1, counterRotateBoundTextBottomLeft[1]);\n y2 = Math.max(y2, counterRotateBoundTextTopRight[1]);\n } else if (topLeftRotatedPoint[0] >= topRightRotatedPoint[0]) {\n x1 = Math.min(x1, counterRotateBoundTextTopRight[0]);\n x2 = Math.max(x2, counterRotateBoundTextBottomLeft[0]);\n y1 = Math.min(y1, counterRotateBoundTextBottomRight[1]);\n y2 = Math.max(y2, counterRotateBoundTextTopLeft[1]);\n } else if (topLeftRotatedPoint[1] <= topRightRotatedPoint[1]) {\n x1 = Math.min(x1, Math.min(counterRotateBoundTextTopRight[0], counterRotateBoundTextTopLeft[0]));\n x2 = Math.max(x2, counterRotateBoundTextBottomRight[0]);\n y1 = Math.min(y1, counterRotateBoundTextTopRight[1]);\n y2 = Math.max(y2, counterRotateBoundTextBottomLeft[1]);\n }\n\n return [x1, y1, x2, y2, cx, cy];\n};\n\nLinearElementEditor.getElementAbsoluteCoords = (element, elementsMap, includeBoundText = false) => {\n let coords;\n let x1;\n let y1;\n let x2;\n let y2;\n\n if (element.points.length < 2 || !_scene_ShapeCache__WEBPACK_IMPORTED_MODULE_9__.ShapeCache.get(element)) {\n // XXX this is just a poor estimate and not very useful\n const {\n minX,\n minY,\n maxX,\n maxY\n } = element.points.reduce((limits, [x, y]) => {\n limits.minY = Math.min(limits.minY, y);\n limits.minX = Math.min(limits.minX, x);\n limits.maxX = Math.max(limits.maxX, x);\n limits.maxY = Math.max(limits.maxY, y);\n return limits;\n }, {\n minX: Infinity,\n minY: Infinity,\n maxX: -Infinity,\n maxY: -Infinity\n });\n x1 = minX + element.x;\n y1 = minY + element.y;\n x2 = maxX + element.x;\n y2 = maxY + element.y;\n } else {\n const shape = _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_9__.ShapeCache.generateElementShape(element, null); // first element is always the curve\n\n const ops = (0,_bounds__WEBPACK_IMPORTED_MODULE_1__.getCurvePathOps)(shape[0]);\n const [minX, minY, maxX, maxY] = (0,_bounds__WEBPACK_IMPORTED_MODULE_1__.getMinMaxXYFromCurvePathOps)(ops);\n x1 = minX + element.x;\n y1 = minY + element.y;\n x2 = maxX + element.x;\n y2 = maxY + element.y;\n }\n\n const cx = (x1 + x2) / 2;\n const cy = (y1 + y2) / 2;\n coords = [x1, y1, x2, y2, cx, cy];\n\n if (!includeBoundText) {\n return coords;\n }\n\n const boundTextElement = (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.getBoundTextElement)(element, elementsMap);\n\n if (boundTextElement) {\n coords = LinearElementEditor.getMinMaxXYWithBoundText(element, elementsMap, [x1, y1, x2, y2], boundTextElement);\n }\n\n return coords;\n};\n\nconst normalizeSelectedPoints = points => {\n let nextPoints = [...new Set(points.filter(p => p !== null && p !== -1))];\n nextPoints = nextPoints.sort((a, b) => a - b);\n return nextPoints.length ? nextPoints : null;\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./element/linearElementEditor.ts?");
|
|
2897
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"LinearElementEditor\": () => (/* binding */ LinearElementEditor)\n/* harmony export */ });\n/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! . */ \"./element/index.ts\");\n/* harmony import */ var _bounds__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./bounds */ \"./element/bounds.ts\");\n/* harmony import */ var _mutateElement__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _binding__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./binding */ \"./element/binding.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _typeChecks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _keys__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../keys */ \"./keys.ts\");\n/* harmony import */ var _textElement__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../scene/ShapeCache */ \"./scene/ShapeCache.ts\");\n/* harmony import */ var _routing__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./routing */ \"./element/routing.ts\");\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../math */ \"../math/index.ts\");\n/* harmony import */ var _shapes__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../shapes */ \"./shapes.tsx\");\n/* harmony import */ var _snapping__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../snapping */ \"./snapping.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst editorMidPointsCache = {\n version: null,\n points: [],\n zoom: null\n};\nclass LinearElementEditor {\n constructor(element) {\n this.elementId = element.id;\n\n if (!(0,_math__WEBPACK_IMPORTED_MODULE_11__.pointsEqual)(element.points[0], (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(0, 0))) {\n console.error(\"Linear element is not normalized\", Error().stack);\n }\n\n this.selectedPointsIndices = null;\n this.lastUncommittedPoint = null;\n this.isDragging = false;\n this.pointerOffset = {\n x: 0,\n y: 0\n };\n this.startBindingElement = \"keep\";\n this.endBindingElement = \"keep\";\n this.pointerDownState = {\n prevSelectedPointsIndices: null,\n lastClickedPoint: -1,\n lastClickedIsEndPoint: false,\n origin: null,\n segmentMidpoint: {\n value: null,\n index: null,\n added: false\n }\n };\n this.hoverPointIndex = -1;\n this.segmentMidPointHoveredCoords = null;\n this.elbowed = (0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isElbowArrow)(element) && element.elbowed;\n }\n /**\n * @param id the `elementId` from the instance of this class (so that we can\n * statically guarantee this method returns an ExcalidrawLinearElement)\n */\n\n\n static getElement(id, elementsMap) {\n const element = elementsMap.get(id);\n\n if (element) {\n return element;\n }\n\n return null;\n }\n\n static handleBoxSelection(event, appState, setState, elementsMap) {\n if (!appState.editingLinearElement || !appState.selectionElement) {\n return false;\n }\n\n const {\n editingLinearElement\n } = appState;\n const {\n selectedPointsIndices,\n elementId\n } = editingLinearElement;\n const element = LinearElementEditor.getElement(elementId, elementsMap);\n\n if (!element) {\n return false;\n }\n\n const [selectionX1, selectionY1, selectionX2, selectionY2] = (0,___WEBPACK_IMPORTED_MODULE_0__.getElementAbsoluteCoords)(appState.selectionElement, elementsMap);\n const pointsSceneCoords = LinearElementEditor.getPointsGlobalCoordinates(element, elementsMap);\n const nextSelectedPoints = pointsSceneCoords.reduce((acc, point, index) => {\n if (point[0] >= selectionX1 && point[0] <= selectionX2 && point[1] >= selectionY1 && point[1] <= selectionY2 || event.shiftKey && (selectedPointsIndices === null || selectedPointsIndices === void 0 ? void 0 : selectedPointsIndices.includes(index))) {\n acc.push(index);\n }\n\n return acc;\n }, []).filter(index => {\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isElbowArrow)(element) && index !== 0 && index !== element.points.length - 1) {\n return false;\n }\n\n return true;\n });\n setState({\n editingLinearElement: Object.assign(Object.assign({}, editingLinearElement), {\n selectedPointsIndices: nextSelectedPoints.length ? nextSelectedPoints : null\n })\n });\n }\n /** @returns whether point was dragged */\n\n\n static handlePointDragging(event, app, scenePointerX, scenePointerY, maybeSuggestBinding, linearElementEditor, scene) {\n var _a;\n\n if (!linearElementEditor) {\n return false;\n }\n\n const {\n elementId\n } = linearElementEditor;\n const elementsMap = scene.getNonDeletedElementsMap();\n const element = LinearElementEditor.getElement(elementId, elementsMap);\n\n if (!element) {\n return false;\n }\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isElbowArrow)(element) && !linearElementEditor.pointerDownState.lastClickedIsEndPoint && linearElementEditor.pointerDownState.lastClickedPoint !== 0) {\n return false;\n }\n\n const selectedPointsIndices = (0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isElbowArrow)(element) ? (_a = linearElementEditor.selectedPointsIndices) === null || _a === void 0 ? void 0 : _a.reduce((startEnd, index) => index === 0 ? [0, startEnd[1]] : [startEnd[0], element.points.length - 1], [false, false]).filter(idx => typeof idx === \"number\") : linearElementEditor.selectedPointsIndices;\n const lastClickedPoint = (0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isElbowArrow)(element) ? linearElementEditor.pointerDownState.lastClickedPoint > 0 ? element.points.length - 1 : 0 : linearElementEditor.pointerDownState.lastClickedPoint; // point that's being dragged (out of all selected points)\n\n const draggingPoint = element.points[lastClickedPoint];\n\n if (selectedPointsIndices && draggingPoint) {\n if ((0,_keys__WEBPACK_IMPORTED_MODULE_6__.shouldRotateWithDiscreteAngle)(event) && selectedPointsIndices.length === 1 && element.points.length > 1) {\n const selectedIndex = selectedPointsIndices[0];\n const referencePoint = element.points[selectedIndex === 0 ? 1 : selectedIndex - 1];\n\n const [width, height] = LinearElementEditor._getShiftLockedDelta(element, elementsMap, referencePoint, (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(scenePointerX, scenePointerY), event[_keys__WEBPACK_IMPORTED_MODULE_6__.KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize());\n\n LinearElementEditor.movePoints(element, [{\n index: selectedIndex,\n point: (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(width + referencePoint[0], height + referencePoint[1]),\n isDragging: selectedIndex === lastClickedPoint\n }], elementsMap);\n } else {\n const newDraggingPointPosition = LinearElementEditor.createPointAt(element, elementsMap, scenePointerX - linearElementEditor.pointerOffset.x, scenePointerY - linearElementEditor.pointerOffset.y, event[_keys__WEBPACK_IMPORTED_MODULE_6__.KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize());\n const deltaX = newDraggingPointPosition[0] - draggingPoint[0];\n const deltaY = newDraggingPointPosition[1] - draggingPoint[1];\n LinearElementEditor.movePoints(element, selectedPointsIndices.map(pointIndex => {\n const newPointPosition = pointIndex === lastClickedPoint ? LinearElementEditor.createPointAt(element, elementsMap, scenePointerX - linearElementEditor.pointerOffset.x, scenePointerY - linearElementEditor.pointerOffset.y, event[_keys__WEBPACK_IMPORTED_MODULE_6__.KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize()) : (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(element.points[pointIndex][0] + deltaX, element.points[pointIndex][1] + deltaY);\n return {\n index: pointIndex,\n point: newPointPosition,\n isDragging: pointIndex === lastClickedPoint\n };\n }), elementsMap);\n }\n\n const boundTextElement = (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.getBoundTextElement)(element, elementsMap);\n\n if (boundTextElement) {\n (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.handleBindTextResize)(element, elementsMap, false);\n } // suggest bindings for first and last point if selected\n\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isBindingElement)(element, false)) {\n const coords = [];\n const firstSelectedIndex = selectedPointsIndices[0];\n\n if (firstSelectedIndex === 0) {\n coords.push((0,_utils__WEBPACK_IMPORTED_MODULE_4__.tupleToCoors)(LinearElementEditor.getPointGlobalCoordinates(element, element.points[0], elementsMap)));\n }\n\n const lastSelectedIndex = selectedPointsIndices[selectedPointsIndices.length - 1];\n\n if (lastSelectedIndex === element.points.length - 1) {\n coords.push((0,_utils__WEBPACK_IMPORTED_MODULE_4__.tupleToCoors)(LinearElementEditor.getPointGlobalCoordinates(element, element.points[lastSelectedIndex], elementsMap)));\n }\n\n if (coords.length) {\n maybeSuggestBinding(element, coords);\n }\n }\n\n return true;\n }\n\n return false;\n }\n\n static handlePointerUp(event, editingLinearElement, appState, scene) {\n var _a;\n\n const elementsMap = scene.getNonDeletedElementsMap();\n const elements = scene.getNonDeletedElements();\n const {\n elementId,\n selectedPointsIndices,\n isDragging,\n pointerDownState\n } = editingLinearElement;\n const element = LinearElementEditor.getElement(elementId, elementsMap);\n\n if (!element) {\n return editingLinearElement;\n }\n\n const bindings = {};\n\n if (isDragging && selectedPointsIndices) {\n for (const selectedPoint of selectedPointsIndices) {\n if (selectedPoint === 0 || selectedPoint === element.points.length - 1) {\n if ((0,_shapes__WEBPACK_IMPORTED_MODULE_12__.isPathALoop)(element.points, appState.zoom.value)) {\n LinearElementEditor.movePoints(element, [{\n index: selectedPoint,\n point: selectedPoint === 0 ? element.points[element.points.length - 1] : element.points[0]\n }], elementsMap);\n }\n\n const bindingElement = (0,_binding__WEBPACK_IMPORTED_MODULE_3__.isBindingEnabled)(appState) ? (0,_binding__WEBPACK_IMPORTED_MODULE_3__.getHoveredElementForBinding)((0,_utils__WEBPACK_IMPORTED_MODULE_4__.tupleToCoors)(LinearElementEditor.getPointAtIndexGlobalCoordinates(element, selectedPoint, elementsMap)), elements, elementsMap) : null;\n bindings[selectedPoint === 0 ? \"startBindingElement\" : \"endBindingElement\"] = bindingElement;\n }\n }\n }\n\n return Object.assign(Object.assign(Object.assign({}, editingLinearElement), bindings), {\n // if clicking without previously dragging a point(s), and not holding\n // shift, deselect all points except the one clicked. If holding shift,\n // toggle the point.\n selectedPointsIndices: isDragging || event.shiftKey ? !isDragging && event.shiftKey && ((_a = pointerDownState.prevSelectedPointsIndices) === null || _a === void 0 ? void 0 : _a.includes(pointerDownState.lastClickedPoint)) ? selectedPointsIndices && selectedPointsIndices.filter(pointIndex => pointIndex !== pointerDownState.lastClickedPoint) : selectedPointsIndices : (selectedPointsIndices === null || selectedPointsIndices === void 0 ? void 0 : selectedPointsIndices.includes(pointerDownState.lastClickedPoint)) ? [pointerDownState.lastClickedPoint] : selectedPointsIndices,\n isDragging: false,\n pointerOffset: {\n x: 0,\n y: 0\n }\n });\n }\n\n static isSegmentTooShort(element, startPoint, endPoint, zoom) {\n let distance = (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointDistance)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(startPoint[0], startPoint[1]), (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(endPoint[0], endPoint[1]));\n\n if (element.points.length > 2 && element.roundness) {\n distance = (0,_shapes__WEBPACK_IMPORTED_MODULE_12__.getBezierCurveLength)(element, endPoint);\n }\n\n return distance * zoom.value < LinearElementEditor.POINT_HANDLE_SIZE * 4;\n }\n\n static getSegmentMidPoint(element, startPoint, endPoint, endPointIndex, elementsMap) {\n let segmentMidPoint = (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointCenter)(startPoint, endPoint);\n\n if (element.points.length > 2 && element.roundness) {\n const controlPoints = (0,_shapes__WEBPACK_IMPORTED_MODULE_12__.getControlPointsForBezierCurve)(element, element.points[endPointIndex]);\n\n if (controlPoints) {\n const t = (0,_shapes__WEBPACK_IMPORTED_MODULE_12__.mapIntervalToBezierT)(element, element.points[endPointIndex], 0.5);\n segmentMidPoint = LinearElementEditor.getPointGlobalCoordinates(element, (0,_shapes__WEBPACK_IMPORTED_MODULE_12__.getBezierXY)(controlPoints[0], controlPoints[1], controlPoints[2], controlPoints[3], t), elementsMap);\n }\n }\n\n return segmentMidPoint;\n }\n\n static getSegmentMidPointIndex(linearElementEditor, appState, midPoint, elementsMap) {\n const element = LinearElementEditor.getElement(linearElementEditor.elementId, elementsMap);\n\n if (!element) {\n return -1;\n }\n\n const midPoints = LinearElementEditor.getEditorMidPoints(element, elementsMap, appState);\n let index = 0;\n\n while (index < midPoints.length) {\n if (LinearElementEditor.arePointsEqual(midPoint, midPoints[index])) {\n return index + 1;\n }\n\n index++;\n }\n\n return -1;\n }\n\n static handlePointerDown(event, app, store, scenePointer, linearElementEditor, scene) {\n var _a;\n\n const appState = app.state;\n const elementsMap = scene.getNonDeletedElementsMap();\n const elements = scene.getNonDeletedElements();\n const ret = {\n didAddPoint: false,\n hitElement: null,\n linearElementEditor: null\n };\n\n if (!linearElementEditor) {\n return ret;\n }\n\n const {\n elementId\n } = linearElementEditor;\n const element = LinearElementEditor.getElement(elementId, elementsMap);\n\n if (!element) {\n return ret;\n }\n\n const segmentMidpoint = LinearElementEditor.getSegmentMidpointHitCoords(linearElementEditor, scenePointer, appState, elementsMap);\n let segmentMidpointIndex = null;\n\n if (segmentMidpoint) {\n segmentMidpointIndex = LinearElementEditor.getSegmentMidPointIndex(linearElementEditor, appState, segmentMidpoint, elementsMap);\n }\n\n if (event.altKey && appState.editingLinearElement) {\n if (linearElementEditor.lastUncommittedPoint == null && !(0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isElbowArrow)(element)) {\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_2__.mutateElement)(element, {\n points: [...element.points, LinearElementEditor.createPointAt(element, elementsMap, scenePointer.x, scenePointer.y, event[_keys__WEBPACK_IMPORTED_MODULE_6__.KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize())]\n });\n ret.didAddPoint = true;\n }\n\n store.shouldCaptureIncrement();\n ret.linearElementEditor = Object.assign(Object.assign({}, linearElementEditor), {\n pointerDownState: {\n prevSelectedPointsIndices: linearElementEditor.selectedPointsIndices,\n lastClickedPoint: -1,\n lastClickedIsEndPoint: false,\n origin: {\n x: scenePointer.x,\n y: scenePointer.y\n },\n segmentMidpoint: {\n value: segmentMidpoint,\n index: segmentMidpointIndex,\n added: false\n }\n },\n selectedPointsIndices: [element.points.length - 1],\n lastUncommittedPoint: null,\n endBindingElement: (0,_binding__WEBPACK_IMPORTED_MODULE_3__.getHoveredElementForBinding)(scenePointer, elements, elementsMap)\n });\n ret.didAddPoint = true;\n return ret;\n }\n\n const clickedPointIndex = LinearElementEditor.getPointIndexUnderCursor(element, elementsMap, appState.zoom, scenePointer.x, scenePointer.y); // if we clicked on a point, set the element as hitElement otherwise\n // it would get deselected if the point is outside the hitbox area\n\n if (clickedPointIndex >= 0 || segmentMidpoint) {\n ret.hitElement = element;\n } else {\n // You might be wandering why we are storing the binding elements on\n // LinearElementEditor and passing them in, instead of calculating them\n // from the end points of the `linearElement` - this is to allow disabling\n // binding (which needs to happen at the point the user finishes moving\n // the point).\n const {\n startBindingElement,\n endBindingElement\n } = linearElementEditor;\n\n if ((0,_binding__WEBPACK_IMPORTED_MODULE_3__.isBindingEnabled)(appState) && (0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isBindingElement)(element)) {\n (0,_binding__WEBPACK_IMPORTED_MODULE_3__.bindOrUnbindLinearElement)(element, startBindingElement, endBindingElement, elementsMap, scene);\n }\n }\n\n const [x1, y1, x2, y2] = (0,___WEBPACK_IMPORTED_MODULE_0__.getElementAbsoluteCoords)(element, elementsMap);\n const cx = (x1 + x2) / 2;\n const cy = (y1 + y2) / 2;\n const targetPoint = clickedPointIndex > -1 && (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(element.x + element.points[clickedPointIndex][0], element.y + element.points[clickedPointIndex][1]), (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(cx, cy), element.angle);\n const nextSelectedPointsIndices = clickedPointIndex > -1 || event.shiftKey ? event.shiftKey || ((_a = linearElementEditor.selectedPointsIndices) === null || _a === void 0 ? void 0 : _a.includes(clickedPointIndex)) ? normalizeSelectedPoints([...(linearElementEditor.selectedPointsIndices || []), clickedPointIndex]) : [clickedPointIndex] : null;\n ret.linearElementEditor = Object.assign(Object.assign({}, linearElementEditor), {\n pointerDownState: {\n prevSelectedPointsIndices: linearElementEditor.selectedPointsIndices,\n lastClickedPoint: clickedPointIndex,\n lastClickedIsEndPoint: clickedPointIndex === element.points.length - 1,\n origin: {\n x: scenePointer.x,\n y: scenePointer.y\n },\n segmentMidpoint: {\n value: segmentMidpoint,\n index: segmentMidpointIndex,\n added: false\n }\n },\n selectedPointsIndices: nextSelectedPointsIndices,\n pointerOffset: targetPoint ? {\n x: scenePointer.x - targetPoint[0],\n y: scenePointer.y - targetPoint[1]\n } : {\n x: 0,\n y: 0\n }\n });\n return ret;\n }\n\n static arePointsEqual(point1, point2) {\n if (!point1 && !point2) {\n return true;\n }\n\n if (!point1 || !point2) {\n return false;\n }\n\n return (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointsEqual)(point1, point2);\n }\n\n static handlePointerMove(event, scenePointerX, scenePointerY, app, elementsMap) {\n const appState = app.state;\n\n if (!appState.editingLinearElement) {\n return null;\n }\n\n const {\n elementId,\n lastUncommittedPoint\n } = appState.editingLinearElement;\n const element = LinearElementEditor.getElement(elementId, elementsMap);\n\n if (!element) {\n return appState.editingLinearElement;\n }\n\n const {\n points\n } = element;\n const lastPoint = points[points.length - 1];\n\n if (!event.altKey) {\n if (lastPoint === lastUncommittedPoint) {\n LinearElementEditor.deletePoints(element, [points.length - 1], elementsMap);\n }\n\n return Object.assign(Object.assign({}, appState.editingLinearElement), {\n lastUncommittedPoint: null\n });\n }\n\n let newPoint;\n\n if ((0,_keys__WEBPACK_IMPORTED_MODULE_6__.shouldRotateWithDiscreteAngle)(event) && points.length >= 2) {\n const lastCommittedPoint = points[points.length - 2];\n\n const [width, height] = LinearElementEditor._getShiftLockedDelta(element, elementsMap, lastCommittedPoint, (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(scenePointerX, scenePointerY), event[_keys__WEBPACK_IMPORTED_MODULE_6__.KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize());\n\n newPoint = (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(width + lastCommittedPoint[0], height + lastCommittedPoint[1]);\n } else {\n newPoint = LinearElementEditor.createPointAt(element, elementsMap, scenePointerX - appState.editingLinearElement.pointerOffset.x, scenePointerY - appState.editingLinearElement.pointerOffset.y, event[_keys__WEBPACK_IMPORTED_MODULE_6__.KEYS.CTRL_OR_CMD] || (0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isElbowArrow)(element) ? null : app.getEffectiveGridSize());\n }\n\n if (lastPoint === lastUncommittedPoint) {\n LinearElementEditor.movePoints(element, [{\n index: element.points.length - 1,\n point: newPoint\n }], elementsMap);\n } else {\n LinearElementEditor.addPoints(element, [{\n point: newPoint\n }], elementsMap);\n }\n\n return Object.assign(Object.assign({}, appState.editingLinearElement), {\n lastUncommittedPoint: element.points[element.points.length - 1]\n });\n }\n /** scene coords */\n\n\n static getPointGlobalCoordinates(element, p, elementsMap) {\n const [x1, y1, x2, y2] = (0,___WEBPACK_IMPORTED_MODULE_0__.getElementAbsoluteCoords)(element, elementsMap);\n const cx = (x1 + x2) / 2;\n const cy = (y1 + y2) / 2;\n const {\n x,\n y\n } = element;\n return (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(x + p[0], y + p[1]), (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(cx, cy), element.angle);\n }\n /** scene coords */\n\n\n static getPointsGlobalCoordinates(element, elementsMap) {\n const [x1, y1, x2, y2] = (0,___WEBPACK_IMPORTED_MODULE_0__.getElementAbsoluteCoords)(element, elementsMap);\n const cx = (x1 + x2) / 2;\n const cy = (y1 + y2) / 2;\n return element.points.map(p => {\n const {\n x,\n y\n } = element;\n return (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(x + p[0], y + p[1]), (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(cx, cy), element.angle);\n });\n }\n\n static getPointAtIndexGlobalCoordinates(element, indexMaybeFromEnd, // -1 for last element\n elementsMap) {\n const index = indexMaybeFromEnd < 0 ? element.points.length + indexMaybeFromEnd : indexMaybeFromEnd;\n const [x1, y1, x2, y2] = (0,___WEBPACK_IMPORTED_MODULE_0__.getElementAbsoluteCoords)(element, elementsMap);\n const cx = (x1 + x2) / 2;\n const cy = (y1 + y2) / 2;\n const p = element.points[index];\n const {\n x,\n y\n } = element;\n return p ? (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(x + p[0], y + p[1]), (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(cx, cy), element.angle) : (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(x, y), (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(cx, cy), element.angle);\n }\n\n static pointFromAbsoluteCoords(element, absoluteCoords, elementsMap) {\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isElbowArrow)(element)) {\n // No rotation for elbow arrows\n return (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(absoluteCoords[0] - element.x, absoluteCoords[1] - element.y);\n }\n\n const [x1, y1, x2, y2] = (0,___WEBPACK_IMPORTED_MODULE_0__.getElementAbsoluteCoords)(element, elementsMap);\n const cx = (x1 + x2) / 2;\n const cy = (y1 + y2) / 2;\n const [x, y] = (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(absoluteCoords[0], absoluteCoords[1]), (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(cx, cy), -element.angle);\n return (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(x - element.x, y - element.y);\n }\n\n static getPointIndexUnderCursor(element, elementsMap, zoom, x, y) {\n const pointHandles = LinearElementEditor.getPointsGlobalCoordinates(element, elementsMap);\n let idx = pointHandles.length; // loop from right to left because points on the right are rendered over\n // points on the left, thus should take precedence when clicking, if they\n // overlap\n\n while (--idx > -1) {\n const p = pointHandles[idx];\n\n if ((0,_math__WEBPACK_IMPORTED_MODULE_11__.pointDistance)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(x, y), (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(p[0], p[1])) * zoom.value < // +1px to account for outline stroke\n LinearElementEditor.POINT_HANDLE_SIZE + 1) {\n return idx;\n }\n }\n\n return -1;\n }\n\n static createPointAt(element, elementsMap, scenePointerX, scenePointerY, gridSize) {\n const pointerOnGrid = (0,_snapping__WEBPACK_IMPORTED_MODULE_13__.getGridPoint)(scenePointerX, scenePointerY, gridSize);\n const [x1, y1, x2, y2] = (0,___WEBPACK_IMPORTED_MODULE_0__.getElementAbsoluteCoords)(element, elementsMap);\n const cx = (x1 + x2) / 2;\n const cy = (y1 + y2) / 2;\n const [rotatedX, rotatedY] = (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(pointerOnGrid[0], pointerOnGrid[1]), (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(cx, cy), -element.angle);\n return (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(rotatedX - element.x, rotatedY - element.y);\n }\n /**\n * Normalizes line points so that the start point is at [0,0]. This is\n * expected in various parts of the codebase. Also returns new x/y to account\n * for the potential normalization.\n */\n\n\n static getNormalizedPoints(element) {\n const {\n points\n } = element;\n const offsetX = points[0][0];\n const offsetY = points[0][1];\n return {\n points: points.map(p => {\n return (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(p[0] - offsetX, p[1] - offsetY);\n }),\n x: element.x + offsetX,\n y: element.y + offsetY\n };\n } // element-mutating methods\n // ---------------------------------------------------------------------------\n\n\n static normalizePoints(element) {\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_2__.mutateElement)(element, LinearElementEditor.getNormalizedPoints(element));\n }\n\n static duplicateSelectedPoints(appState, elementsMap) {\n (0,_utils__WEBPACK_IMPORTED_MODULE_4__.invariant)(appState.editingLinearElement, \"Not currently editing a linear element\");\n const {\n selectedPointsIndices,\n elementId\n } = appState.editingLinearElement;\n const element = LinearElementEditor.getElement(elementId, elementsMap);\n (0,_utils__WEBPACK_IMPORTED_MODULE_4__.invariant)(element, \"The linear element does not exist in the provided Scene\");\n (0,_utils__WEBPACK_IMPORTED_MODULE_4__.invariant)(selectedPointsIndices != null, \"There are no selected points to duplicate\");\n const {\n points\n } = element;\n const nextSelectedIndices = [];\n let pointAddedToEnd = false;\n let indexCursor = -1;\n const nextPoints = points.reduce((acc, p, index) => {\n ++indexCursor;\n acc.push(p);\n const isSelected = selectedPointsIndices.includes(index);\n\n if (isSelected) {\n const nextPoint = points[index + 1];\n\n if (!nextPoint) {\n pointAddedToEnd = true;\n }\n\n acc.push(nextPoint ? (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)((p[0] + nextPoint[0]) / 2, (p[1] + nextPoint[1]) / 2) : (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(p[0], p[1]));\n nextSelectedIndices.push(indexCursor + 1);\n ++indexCursor;\n }\n\n return acc;\n }, []);\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_2__.mutateElement)(element, {\n points: nextPoints\n }); // temp hack to ensure the line doesn't move when adding point to the end,\n // potentially expanding the bounding box\n\n if (pointAddedToEnd) {\n const lastPoint = element.points[element.points.length - 1];\n LinearElementEditor.movePoints(element, [{\n index: element.points.length - 1,\n point: (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(lastPoint[0] + 30, lastPoint[1] + 30)\n }], elementsMap);\n }\n\n return Object.assign(Object.assign({}, appState), {\n editingLinearElement: Object.assign(Object.assign({}, appState.editingLinearElement), {\n selectedPointsIndices: nextSelectedIndices\n })\n });\n }\n\n static deletePoints(element, pointIndices, elementsMap) {\n let offsetX = 0;\n let offsetY = 0;\n const isDeletingOriginPoint = pointIndices.includes(0); // if deleting first point, make the next to be [0,0] and recalculate\n // positions of the rest with respect to it\n\n if (isDeletingOriginPoint) {\n const firstNonDeletedPoint = element.points.find((point, idx) => {\n return !pointIndices.includes(idx);\n });\n\n if (firstNonDeletedPoint) {\n offsetX = firstNonDeletedPoint[0];\n offsetY = firstNonDeletedPoint[1];\n }\n }\n\n const nextPoints = element.points.reduce((acc, p, idx) => {\n if (!pointIndices.includes(idx)) {\n acc.push(!acc.length ? (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(0, 0) : (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(p[0] - offsetX, p[1] - offsetY));\n }\n\n return acc;\n }, []);\n\n LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY, elementsMap);\n }\n\n static addPoints(element, targetPoints, elementsMap) {\n const offsetX = 0;\n const offsetY = 0;\n const nextPoints = [...element.points, ...targetPoints.map(x => x.point)];\n\n LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY, elementsMap);\n }\n\n static movePoints(element, targetPoints, elementsMap, otherUpdates, options) {\n const {\n points\n } = element; // in case we're moving start point, instead of modifying its position\n // which would break the invariant of it being at [0,0], we move\n // all the other points in the opposite direction by delta to\n // offset it. We do the same with actual element.x/y position, so\n // this hacks are completely transparent to the user.\n\n let offsetX = 0;\n let offsetY = 0;\n const selectedOriginPoint = targetPoints.find(({\n index\n }) => index === 0);\n\n if (selectedOriginPoint) {\n offsetX = selectedOriginPoint.point[0] + points[selectedOriginPoint.index][0];\n offsetY = selectedOriginPoint.point[1] + points[selectedOriginPoint.index][1];\n }\n\n const nextPoints = points.map((p, idx) => {\n const selectedPointData = targetPoints.find(t => t.index === idx);\n\n if (selectedPointData) {\n if (selectedPointData.index === 0) {\n return p;\n }\n\n const deltaX = selectedPointData.point[0] - points[selectedPointData.index][0];\n const deltaY = selectedPointData.point[1] - points[selectedPointData.index][1];\n return (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(p[0] + deltaX - offsetX, p[1] + deltaY - offsetY);\n }\n\n return offsetX || offsetY ? (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(p[0] - offsetX, p[1] - offsetY) : p;\n });\n\n LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY, elementsMap, otherUpdates, {\n isDragging: targetPoints.reduce((dragging, targetPoint) => dragging || targetPoint.isDragging === true, false),\n changedElements: options === null || options === void 0 ? void 0 : options.changedElements\n });\n }\n\n static shouldAddMidpoint(linearElementEditor, pointerCoords, appState, elementsMap) {\n const element = LinearElementEditor.getElement(linearElementEditor.elementId, elementsMap); // Elbow arrows don't allow midpoints\n\n if (element && (0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isElbowArrow)(element)) {\n return false;\n }\n\n if (!element) {\n return false;\n }\n\n const {\n segmentMidpoint\n } = linearElementEditor.pointerDownState;\n\n if (segmentMidpoint.added || segmentMidpoint.value === null || segmentMidpoint.index === null || linearElementEditor.pointerDownState.origin === null) {\n return false;\n }\n\n const origin = linearElementEditor.pointerDownState.origin;\n const dist = (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointDistance)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(origin.x, origin.y), (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(pointerCoords.x, pointerCoords.y));\n\n if (!appState.editingLinearElement && dist < _constants__WEBPACK_IMPORTED_MODULE_8__.DRAGGING_THRESHOLD / appState.zoom.value) {\n return false;\n }\n\n return true;\n }\n\n static addMidpoint(linearElementEditor, pointerCoords, app, snapToGrid, elementsMap) {\n const element = LinearElementEditor.getElement(linearElementEditor.elementId, elementsMap);\n\n if (!element) {\n return;\n }\n\n const {\n segmentMidpoint\n } = linearElementEditor.pointerDownState;\n const ret = {\n pointerDownState: linearElementEditor.pointerDownState,\n selectedPointsIndices: linearElementEditor.selectedPointsIndices\n };\n const midpoint = LinearElementEditor.createPointAt(element, elementsMap, pointerCoords.x, pointerCoords.y, snapToGrid && !(0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isElbowArrow)(element) ? app.getEffectiveGridSize() : null);\n const points = [...element.points.slice(0, segmentMidpoint.index), midpoint, ...element.points.slice(segmentMidpoint.index)];\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_2__.mutateElement)(element, {\n points\n });\n ret.pointerDownState = Object.assign(Object.assign({}, linearElementEditor.pointerDownState), {\n segmentMidpoint: Object.assign(Object.assign({}, linearElementEditor.pointerDownState.segmentMidpoint), {\n added: true\n }),\n lastClickedPoint: segmentMidpoint.index\n });\n ret.selectedPointsIndices = [segmentMidpoint.index];\n return ret;\n }\n\n static _updatePoints(element, nextPoints, offsetX, offsetY, elementsMap, otherUpdates, options) {\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isElbowArrow)(element)) {\n const bindings = {};\n\n if ((otherUpdates === null || otherUpdates === void 0 ? void 0 : otherUpdates.startBinding) !== undefined) {\n bindings.startBinding = otherUpdates.startBinding !== null && (0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isFixedPointBinding)(otherUpdates.startBinding) ? otherUpdates.startBinding : null;\n }\n\n if ((otherUpdates === null || otherUpdates === void 0 ? void 0 : otherUpdates.endBinding) !== undefined) {\n bindings.endBinding = otherUpdates.endBinding !== null && (0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isFixedPointBinding)(otherUpdates.endBinding) ? otherUpdates.endBinding : null;\n }\n\n const mergedElementsMap = (options === null || options === void 0 ? void 0 : options.changedElements) ? (0,_utils__WEBPACK_IMPORTED_MODULE_4__.toBrandedType)(new Map([...elementsMap, ...options.changedElements])) : elementsMap;\n (0,_routing__WEBPACK_IMPORTED_MODULE_10__.mutateElbowArrow)(element, mergedElementsMap, nextPoints, (0,_math__WEBPACK_IMPORTED_MODULE_11__.vector)(offsetX, offsetY), bindings, {\n isDragging: options === null || options === void 0 ? void 0 : options.isDragging\n });\n } else {\n const nextCoords = (0,_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementPointsCoords)(element, nextPoints);\n const prevCoords = (0,_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementPointsCoords)(element, element.points);\n const nextCenterX = (nextCoords[0] + nextCoords[2]) / 2;\n const nextCenterY = (nextCoords[1] + nextCoords[3]) / 2;\n const prevCenterX = (prevCoords[0] + prevCoords[2]) / 2;\n const prevCenterY = (prevCoords[1] + prevCoords[3]) / 2;\n const dX = prevCenterX - nextCenterX;\n const dY = prevCenterY - nextCenterY;\n const rotated = (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(offsetX, offsetY), (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(dX, dY), element.angle);\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_2__.mutateElement)(element, Object.assign(Object.assign({}, otherUpdates), {\n points: nextPoints,\n x: element.x + rotated[0],\n y: element.y + rotated[1]\n }));\n }\n }\n\n static _getShiftLockedDelta(element, elementsMap, referencePoint, scenePointer, gridSize) {\n const referencePointCoords = LinearElementEditor.getPointGlobalCoordinates(element, referencePoint, elementsMap);\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_5__.isElbowArrow)(element)) {\n return [scenePointer[0] - referencePointCoords[0], scenePointer[1] - referencePointCoords[1]];\n }\n\n const [gridX, gridY] = (0,_snapping__WEBPACK_IMPORTED_MODULE_13__.getGridPoint)(scenePointer[0], scenePointer[1], gridSize);\n const {\n width,\n height\n } = (0,___WEBPACK_IMPORTED_MODULE_0__.getLockedLinearCursorAlignSize)(referencePointCoords[0], referencePointCoords[1], gridX, gridY);\n return (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(width, height), (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(0, 0), -element.angle);\n }\n\n} // ---------------------------------------------------------------------------\n// static methods\n// ---------------------------------------------------------------------------\n\nLinearElementEditor.POINT_HANDLE_SIZE = 10;\n\nLinearElementEditor.getEditorMidPoints = (element, elementsMap, appState) => {\n const boundText = (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.getBoundTextElement)(element, elementsMap); // Since its not needed outside editor unless 2 pointer lines or bound text\n\n if (!appState.editingLinearElement && element.points.length > 2 && !boundText) {\n return [];\n }\n\n if (editorMidPointsCache.version === element.version && editorMidPointsCache.zoom === appState.zoom.value) {\n return editorMidPointsCache.points;\n }\n\n LinearElementEditor.updateEditorMidPointsCache(element, elementsMap, appState);\n return editorMidPointsCache.points;\n};\n\nLinearElementEditor.updateEditorMidPointsCache = (element, elementsMap, appState) => {\n const points = LinearElementEditor.getPointsGlobalCoordinates(element, elementsMap);\n let index = 0;\n const midpoints = [];\n\n while (index < points.length - 1) {\n if (LinearElementEditor.isSegmentTooShort(element, element.points[index], element.points[index + 1], appState.zoom)) {\n midpoints.push(null);\n index++;\n continue;\n }\n\n const segmentMidPoint = LinearElementEditor.getSegmentMidPoint(element, points[index], points[index + 1], index + 1, elementsMap);\n midpoints.push(segmentMidPoint);\n index++;\n }\n\n editorMidPointsCache.points = midpoints;\n editorMidPointsCache.version = element.version;\n editorMidPointsCache.zoom = appState.zoom.value;\n};\n\nLinearElementEditor.getSegmentMidpointHitCoords = (linearElementEditor, scenePointer, appState, elementsMap) => {\n const {\n elementId\n } = linearElementEditor;\n const element = LinearElementEditor.getElement(elementId, elementsMap);\n\n if (!element) {\n return null;\n }\n\n const clickedPointIndex = LinearElementEditor.getPointIndexUnderCursor(element, elementsMap, appState.zoom, scenePointer.x, scenePointer.y);\n\n if (clickedPointIndex >= 0) {\n return null;\n }\n\n const points = LinearElementEditor.getPointsGlobalCoordinates(element, elementsMap);\n\n if (points.length >= 3 && !appState.editingLinearElement) {\n return null;\n }\n\n const threshold = LinearElementEditor.POINT_HANDLE_SIZE / appState.zoom.value;\n const existingSegmentMidpointHitCoords = linearElementEditor.segmentMidPointHoveredCoords;\n\n if (existingSegmentMidpointHitCoords) {\n const distance = (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointDistance)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(existingSegmentMidpointHitCoords[0], existingSegmentMidpointHitCoords[1]), (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(scenePointer.x, scenePointer.y));\n\n if (distance <= threshold) {\n return existingSegmentMidpointHitCoords;\n }\n }\n\n let index = 0;\n const midPoints = LinearElementEditor.getEditorMidPoints(element, elementsMap, appState);\n\n while (index < midPoints.length) {\n if (midPoints[index] !== null) {\n const distance = (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointDistance)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(midPoints[index][0], midPoints[index][1]), (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(scenePointer.x, scenePointer.y));\n\n if (distance <= threshold) {\n return midPoints[index];\n }\n }\n\n index++;\n }\n\n return null;\n};\n\nLinearElementEditor.getBoundTextElementPosition = (element, boundTextElement, elementsMap) => {\n const points = LinearElementEditor.getPointsGlobalCoordinates(element, elementsMap);\n\n if (points.length < 2) {\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_2__.mutateElement)(boundTextElement, {\n isDeleted: true\n });\n }\n\n let x = 0;\n let y = 0;\n\n if (element.points.length % 2 === 1) {\n const index = Math.floor(element.points.length / 2);\n const midPoint = LinearElementEditor.getPointGlobalCoordinates(element, element.points[index], elementsMap);\n x = midPoint[0] - boundTextElement.width / 2;\n y = midPoint[1] - boundTextElement.height / 2;\n } else {\n const index = element.points.length / 2 - 1;\n let midSegmentMidpoint = editorMidPointsCache.points[index];\n\n if (element.points.length === 2) {\n midSegmentMidpoint = (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointCenter)(points[0], points[1]);\n }\n\n if (!midSegmentMidpoint || editorMidPointsCache.version !== element.version) {\n midSegmentMidpoint = LinearElementEditor.getSegmentMidPoint(element, points[index], points[index + 1], index + 1, elementsMap);\n }\n\n x = midSegmentMidpoint[0] - boundTextElement.width / 2;\n y = midSegmentMidpoint[1] - boundTextElement.height / 2;\n }\n\n return {\n x,\n y\n };\n};\n\nLinearElementEditor.getMinMaxXYWithBoundText = (element, elementsMap, elementBounds, boundTextElement) => {\n let [x1, y1, x2, y2] = elementBounds;\n const cx = (x1 + x2) / 2;\n const cy = (y1 + y2) / 2;\n const {\n x: boundTextX1,\n y: boundTextY1\n } = LinearElementEditor.getBoundTextElementPosition(element, boundTextElement, elementsMap);\n const boundTextX2 = boundTextX1 + boundTextElement.width;\n const boundTextY2 = boundTextY1 + boundTextElement.height;\n const centerPoint = (0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(cx, cy);\n const topLeftRotatedPoint = (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(x1, y1), centerPoint, element.angle);\n const topRightRotatedPoint = (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(x2, y1), centerPoint, element.angle);\n const counterRotateBoundTextTopLeft = (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(boundTextX1, boundTextY1), centerPoint, -element.angle);\n const counterRotateBoundTextTopRight = (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(boundTextX2, boundTextY1), centerPoint, -element.angle);\n const counterRotateBoundTextBottomLeft = (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(boundTextX1, boundTextY2), centerPoint, -element.angle);\n const counterRotateBoundTextBottomRight = (0,_math__WEBPACK_IMPORTED_MODULE_11__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_11__.point)(boundTextX2, boundTextY2), centerPoint, -element.angle);\n\n if (topLeftRotatedPoint[0] < topRightRotatedPoint[0] && topLeftRotatedPoint[1] >= topRightRotatedPoint[1]) {\n x1 = Math.min(x1, counterRotateBoundTextBottomLeft[0]);\n x2 = Math.max(x2, Math.max(counterRotateBoundTextTopRight[0], counterRotateBoundTextBottomRight[0]));\n y1 = Math.min(y1, counterRotateBoundTextTopLeft[1]);\n y2 = Math.max(y2, counterRotateBoundTextBottomRight[1]);\n } else if (topLeftRotatedPoint[0] >= topRightRotatedPoint[0] && topLeftRotatedPoint[1] > topRightRotatedPoint[1]) {\n x1 = Math.min(x1, counterRotateBoundTextBottomRight[0]);\n x2 = Math.max(x2, Math.max(counterRotateBoundTextTopLeft[0], counterRotateBoundTextTopRight[0]));\n y1 = Math.min(y1, counterRotateBoundTextBottomLeft[1]);\n y2 = Math.max(y2, counterRotateBoundTextTopRight[1]);\n } else if (topLeftRotatedPoint[0] >= topRightRotatedPoint[0]) {\n x1 = Math.min(x1, counterRotateBoundTextTopRight[0]);\n x2 = Math.max(x2, counterRotateBoundTextBottomLeft[0]);\n y1 = Math.min(y1, counterRotateBoundTextBottomRight[1]);\n y2 = Math.max(y2, counterRotateBoundTextTopLeft[1]);\n } else if (topLeftRotatedPoint[1] <= topRightRotatedPoint[1]) {\n x1 = Math.min(x1, Math.min(counterRotateBoundTextTopRight[0], counterRotateBoundTextTopLeft[0]));\n x2 = Math.max(x2, counterRotateBoundTextBottomRight[0]);\n y1 = Math.min(y1, counterRotateBoundTextTopRight[1]);\n y2 = Math.max(y2, counterRotateBoundTextBottomLeft[1]);\n }\n\n return [x1, y1, x2, y2, cx, cy];\n};\n\nLinearElementEditor.getElementAbsoluteCoords = (element, elementsMap, includeBoundText = false) => {\n let coords;\n let x1;\n let y1;\n let x2;\n let y2;\n\n if (element.points.length < 2 || !_scene_ShapeCache__WEBPACK_IMPORTED_MODULE_9__.ShapeCache.get(element)) {\n // XXX this is just a poor estimate and not very useful\n const {\n minX,\n minY,\n maxX,\n maxY\n } = element.points.reduce((limits, [x, y]) => {\n limits.minY = Math.min(limits.minY, y);\n limits.minX = Math.min(limits.minX, x);\n limits.maxX = Math.max(limits.maxX, x);\n limits.maxY = Math.max(limits.maxY, y);\n return limits;\n }, {\n minX: Infinity,\n minY: Infinity,\n maxX: -Infinity,\n maxY: -Infinity\n });\n x1 = minX + element.x;\n y1 = minY + element.y;\n x2 = maxX + element.x;\n y2 = maxY + element.y;\n } else {\n const shape = _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_9__.ShapeCache.generateElementShape(element, null); // first element is always the curve\n\n const ops = (0,_bounds__WEBPACK_IMPORTED_MODULE_1__.getCurvePathOps)(shape[0]);\n const [minX, minY, maxX, maxY] = (0,_bounds__WEBPACK_IMPORTED_MODULE_1__.getMinMaxXYFromCurvePathOps)(ops);\n x1 = minX + element.x;\n y1 = minY + element.y;\n x2 = maxX + element.x;\n y2 = maxY + element.y;\n }\n\n const cx = (x1 + x2) / 2;\n const cy = (y1 + y2) / 2;\n coords = [x1, y1, x2, y2, cx, cy];\n\n if (!includeBoundText) {\n return coords;\n }\n\n const boundTextElement = (0,_textElement__WEBPACK_IMPORTED_MODULE_7__.getBoundTextElement)(element, elementsMap);\n\n if (boundTextElement) {\n coords = LinearElementEditor.getMinMaxXYWithBoundText(element, elementsMap, [x1, y1, x2, y2], boundTextElement);\n }\n\n return coords;\n};\n\nconst normalizeSelectedPoints = points => {\n let nextPoints = [...new Set(points.filter(p => p !== null && p !== -1))];\n nextPoints = nextPoints.sort((a, b) => a - b);\n return nextPoints.length ? nextPoints : null;\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./element/linearElementEditor.ts?");
|
|
2898
2898
|
|
|
2899
2899
|
/***/ }),
|
|
2900
2900
|
|
|
@@ -2927,7 +2927,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
2927
2927
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
2928
2928
|
|
|
2929
2929
|
"use strict";
|
|
2930
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"getResizeArrowDirection\": () => (/* binding */ getResizeArrowDirection),\n/* harmony export */ \"getResizeOffsetXY\": () => (/* binding */ getResizeOffsetXY),\n/* harmony export */ \"measureFontSizeFromWidth\": () => (/* binding */ measureFontSizeFromWidth),\n/* harmony export */ \"rescalePointsInElement\": () => (/* binding */ rescalePointsInElement),\n/* harmony export */ \"resizeMultipleElements\": () => (/* binding */ resizeMultipleElements),\n/* harmony export */ \"resizeSingleElement\": () => (/* binding */ resizeSingleElement),\n/* harmony export */ \"transformElements\": () => (/* binding */ transformElements)\n/* harmony export */ });\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _points__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../points */ \"./points.ts\");\n/* harmony import */ var _bounds__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./bounds */ \"./element/bounds.ts\");\n/* harmony import */ var _typeChecks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _mutateElement__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _binding__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./binding */ \"./element/binding.ts\");\n/* harmony import */ var _scene_Scene__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../scene/Scene */ \"./scene/Scene.ts\");\n/* harmony import */ var _textElement__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _linearElementEditor__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _groups__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../groups */ \"./groups.ts\");\n/* harmony import */ var _routing__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./routing */ \"./element/routing.ts\");\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../math */ \"../math/index.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 // Returns true when transform (resizing/rotation) happened\n\nconst transformElements = (originalElements, transformHandleType, selectedElements, elementsMap, shouldRotateWithDiscreteAngle, shouldResizeFromCenter, shouldMaintainAspectRatio, pointerX, pointerY, centerX, centerY) => {\n if (selectedElements.length === 1) {\n const [element] = selectedElements;\n\n if (transformHandleType === \"rotation\") {\n if (!(0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isElbowArrow)(element)) {\n rotateSingleElement(element, elementsMap, pointerX, pointerY, shouldRotateWithDiscreteAngle);\n (0,_binding__WEBPACK_IMPORTED_MODULE_6__.updateBoundElements)(element, elementsMap);\n }\n } else if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isTextElement)(element) && transformHandleType) {\n resizeSingleTextElement(originalElements, element, elementsMap, transformHandleType, shouldResizeFromCenter, pointerX, pointerY);\n (0,_binding__WEBPACK_IMPORTED_MODULE_6__.updateBoundElements)(element, elementsMap);\n } else if (transformHandleType) {\n resizeSingleElement(originalElements, shouldMaintainAspectRatio, element, elementsMap, transformHandleType, shouldResizeFromCenter, pointerX, pointerY);\n }\n\n return true;\n } else if (selectedElements.length > 1) {\n if (transformHandleType === \"rotation\") {\n rotateMultipleElements(originalElements, selectedElements, elementsMap, pointerX, pointerY, shouldRotateWithDiscreteAngle, centerX, centerY);\n return true;\n } else if (transformHandleType) {\n resizeMultipleElements(originalElements, selectedElements, elementsMap, transformHandleType, shouldResizeFromCenter, shouldMaintainAspectRatio, pointerX, pointerY);\n return true;\n }\n }\n\n return false;\n};\n\nconst rotateSingleElement = (element, elementsMap, pointerX, pointerY, shouldRotateWithDiscreteAngle) => {\n var _a;\n\n const [x1, y1, x2, y2] = (0,_bounds__WEBPACK_IMPORTED_MODULE_2__.getElementAbsoluteCoords)(element, elementsMap);\n const cx = (x1 + x2) / 2;\n const cy = (y1 + y2) / 2;\n let angle;\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isFrameLikeElement)(element)) {\n angle = 0;\n } else {\n angle = 5 * Math.PI / 2 + Math.atan2(pointerY - cy, pointerX - cx);\n\n if (shouldRotateWithDiscreteAngle) {\n angle = angle + _constants__WEBPACK_IMPORTED_MODULE_0__.SHIFT_LOCKING_ANGLE / 2;\n angle = angle - angle % _constants__WEBPACK_IMPORTED_MODULE_0__.SHIFT_LOCKING_ANGLE;\n }\n\n angle = (0,_math__WEBPACK_IMPORTED_MODULE_12__.normalizeRadians)(angle);\n }\n\n const boundTextElementId = (0,_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextElementId)(element);\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_4__.mutateElement)(element, {\n angle\n });\n\n if (boundTextElementId) {\n const textElement = (_a = _scene_Scene__WEBPACK_IMPORTED_MODULE_7__[\"default\"].getScene(element)) === null || _a === void 0 ? void 0 : _a.getElement(boundTextElementId);\n\n if (textElement && !(0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isArrowElement)(element)) {\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_4__.mutateElement)(textElement, {\n angle\n });\n }\n }\n};\n\nconst rescalePointsInElement = (element, width, height, normalizePoints) => (0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isLinearElement)(element) || (0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isFreeDrawElement)(element) ? {\n points: (0,_points__WEBPACK_IMPORTED_MODULE_1__.rescalePoints)(0, width, (0,_points__WEBPACK_IMPORTED_MODULE_1__.rescalePoints)(1, height, element.points, normalizePoints), normalizePoints)\n} : {};\nconst measureFontSizeFromWidth = (element, elementsMap, nextWidth) => {\n // We only use width to scale font on resize\n let width = element.width;\n const hasContainer = (0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isBoundToContainer)(element);\n\n if (hasContainer) {\n const container = (0,_textElement__WEBPACK_IMPORTED_MODULE_8__.getContainerElement)(element, elementsMap);\n\n if (container) {\n width = (0,_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextMaxWidth)(container, element);\n }\n }\n\n const nextFontSize = element.fontSize * (nextWidth / width);\n\n if (nextFontSize < _constants__WEBPACK_IMPORTED_MODULE_0__.MIN_FONT_SIZE) {\n return null;\n }\n\n return {\n size: nextFontSize\n };\n};\n\nconst resizeSingleTextElement = (originalElements, element, elementsMap, transformHandleType, shouldResizeFromCenter, pointerX, pointerY) => {\n const [x1, y1, x2, y2, cx, cy] = (0,_bounds__WEBPACK_IMPORTED_MODULE_2__.getElementAbsoluteCoords)(element, elementsMap); // rotation pointer with reverse angle\n\n const [rotatedX, rotatedY] = (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(pointerX, pointerY), (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(cx, cy), -element.angle);\n let scaleX = 0;\n let scaleY = 0;\n\n if (transformHandleType !== \"e\" && transformHandleType !== \"w\") {\n if (transformHandleType.includes(\"e\")) {\n scaleX = (rotatedX - x1) / (x2 - x1);\n }\n\n if (transformHandleType.includes(\"w\")) {\n scaleX = (x2 - rotatedX) / (x2 - x1);\n }\n\n if (transformHandleType.includes(\"n\")) {\n scaleY = (y2 - rotatedY) / (y2 - y1);\n }\n\n if (transformHandleType.includes(\"s\")) {\n scaleY = (rotatedY - y1) / (y2 - y1);\n }\n }\n\n const scale = Math.max(scaleX, scaleY);\n\n if (scale > 0) {\n const nextWidth = element.width * scale;\n const nextHeight = element.height * scale;\n const metrics = measureFontSizeFromWidth(element, elementsMap, nextWidth);\n\n if (metrics === null) {\n return;\n }\n\n const startTopLeft = [x1, y1];\n const startBottomRight = [x2, y2];\n const startCenter = [cx, cy];\n let newTopLeft = (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(x1, y1);\n\n if ([\"n\", \"w\", \"nw\"].includes(transformHandleType)) {\n newTopLeft = (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(startBottomRight[0] - Math.abs(nextWidth), startBottomRight[1] - Math.abs(nextHeight));\n }\n\n if (transformHandleType === \"ne\") {\n const bottomLeft = [startTopLeft[0], startBottomRight[1]];\n newTopLeft = (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(bottomLeft[0], bottomLeft[1] - Math.abs(nextHeight));\n }\n\n if (transformHandleType === \"sw\") {\n const topRight = [startBottomRight[0], startTopLeft[1]];\n newTopLeft = (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(topRight[0] - Math.abs(nextWidth), topRight[1]);\n }\n\n if ([\"s\", \"n\"].includes(transformHandleType)) {\n newTopLeft[0] = startCenter[0] - nextWidth / 2;\n }\n\n if ([\"e\", \"w\"].includes(transformHandleType)) {\n newTopLeft[1] = startCenter[1] - nextHeight / 2;\n }\n\n if (shouldResizeFromCenter) {\n newTopLeft[0] = startCenter[0] - Math.abs(nextWidth) / 2;\n newTopLeft[1] = startCenter[1] - Math.abs(nextHeight) / 2;\n }\n\n const angle = element.angle;\n const rotatedTopLeft = (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)(newTopLeft, (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(cx, cy), angle);\n const newCenter = (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(newTopLeft[0] + Math.abs(nextWidth) / 2, newTopLeft[1] + Math.abs(nextHeight) / 2);\n const rotatedNewCenter = (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)(newCenter, (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(cx, cy), angle);\n newTopLeft = (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)(rotatedTopLeft, rotatedNewCenter, -angle);\n const [nextX, nextY] = newTopLeft;\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_4__.mutateElement)(element, {\n fontSize: metrics.size,\n width: nextWidth,\n height: nextHeight,\n x: nextX,\n y: nextY\n });\n }\n\n if (transformHandleType === \"e\" || transformHandleType === \"w\") {\n const stateAtResizeStart = originalElements.get(element.id);\n const [x1, y1, x2, y2] = (0,_bounds__WEBPACK_IMPORTED_MODULE_2__.getResizedElementAbsoluteCoords)(stateAtResizeStart, stateAtResizeStart.width, stateAtResizeStart.height, true);\n const startTopLeft = (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(x1, y1);\n const startBottomRight = (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(x2, y2);\n const startCenter = (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointCenter)(startTopLeft, startBottomRight);\n const rotatedPointer = (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(pointerX, pointerY), startCenter, -stateAtResizeStart.angle);\n const [esx1,, esx2] = (0,_bounds__WEBPACK_IMPORTED_MODULE_2__.getResizedElementAbsoluteCoords)(element, element.width, element.height, true);\n const boundsCurrentWidth = esx2 - esx1;\n const atStartBoundsWidth = startBottomRight[0] - startTopLeft[0];\n const minWidth = (0,_textElement__WEBPACK_IMPORTED_MODULE_8__.getMinTextElementWidth)((0,_utils__WEBPACK_IMPORTED_MODULE_5__.getFontString)({\n fontSize: element.fontSize,\n fontFamily: element.fontFamily\n }), element.lineHeight);\n let scaleX = atStartBoundsWidth / boundsCurrentWidth;\n\n if (transformHandleType.includes(\"e\")) {\n scaleX = (rotatedPointer[0] - startTopLeft[0]) / boundsCurrentWidth;\n }\n\n if (transformHandleType.includes(\"w\")) {\n scaleX = (startBottomRight[0] - rotatedPointer[0]) / boundsCurrentWidth;\n }\n\n const newWidth = element.width * scaleX < minWidth ? minWidth : element.width * scaleX;\n const text = (0,_textElement__WEBPACK_IMPORTED_MODULE_8__.wrapText)(element.originalText, (0,_utils__WEBPACK_IMPORTED_MODULE_5__.getFontString)(element), Math.abs(newWidth));\n const metrics = (0,_textElement__WEBPACK_IMPORTED_MODULE_8__.measureText)(text, (0,_utils__WEBPACK_IMPORTED_MODULE_5__.getFontString)(element), element.lineHeight);\n const eleNewHeight = metrics.height;\n const [newBoundsX1, newBoundsY1, newBoundsX2, newBoundsY2] = (0,_bounds__WEBPACK_IMPORTED_MODULE_2__.getResizedElementAbsoluteCoords)(stateAtResizeStart, newWidth, eleNewHeight, true);\n const newBoundsWidth = newBoundsX2 - newBoundsX1;\n const newBoundsHeight = newBoundsY2 - newBoundsY1;\n let newTopLeft = [...startTopLeft];\n\n if ([\"n\", \"w\", \"nw\"].includes(transformHandleType)) {\n newTopLeft = [startBottomRight[0] - Math.abs(newBoundsWidth), startTopLeft[1]];\n } // adjust topLeft to new rotation point\n\n\n const angle = stateAtResizeStart.angle;\n const rotatedTopLeft = (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_12__.pointFromPair)(newTopLeft), startCenter, angle);\n const newCenter = (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(newTopLeft[0] + Math.abs(newBoundsWidth) / 2, newTopLeft[1] + Math.abs(newBoundsHeight) / 2);\n const rotatedNewCenter = (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)(newCenter, startCenter, angle);\n newTopLeft = (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)(rotatedTopLeft, rotatedNewCenter, -angle);\n const resizedElement = {\n width: Math.abs(newWidth),\n height: Math.abs(metrics.height),\n x: newTopLeft[0],\n y: newTopLeft[1],\n text,\n autoResize: false\n };\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_4__.mutateElement)(element, resizedElement);\n }\n};\n\nconst resizeSingleElement = (originalElements, shouldMaintainAspectRatio, element, elementsMap, transformHandleDirection, shouldResizeFromCenter, pointerX, pointerY) => {\n var _a;\n\n if ((_a = element.customData) === null || _a === void 0 ? void 0 : _a.isAnchored) {\n return;\n } //zsviczian\n\n\n const stateAtResizeStart = originalElements.get(element.id); // Gets bounds corners\n\n const [x1, y1, x2, y2] = (0,_bounds__WEBPACK_IMPORTED_MODULE_2__.getResizedElementAbsoluteCoords)(stateAtResizeStart, stateAtResizeStart.width, stateAtResizeStart.height, true);\n const startTopLeft = (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(x1, y1);\n const startBottomRight = (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(x2, y2);\n const startCenter = (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointCenter)(startTopLeft, startBottomRight); // Calculate new dimensions based on cursor position\n\n const rotatedPointer = (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(pointerX, pointerY), startCenter, -stateAtResizeStart.angle); // Get bounds corners rendered on screen\n\n const [esx1, esy1, esx2, esy2] = (0,_bounds__WEBPACK_IMPORTED_MODULE_2__.getResizedElementAbsoluteCoords)(element, element.width, element.height, true);\n const boundsCurrentWidth = esx2 - esx1;\n const boundsCurrentHeight = esy2 - esy1; // It's important we set the initial scale value based on the width and height at resize start,\n // otherwise previous dimensions affected by modifiers will be taken into account.\n\n const atStartBoundsWidth = startBottomRight[0] - startTopLeft[0];\n const atStartBoundsHeight = startBottomRight[1] - startTopLeft[1];\n let scaleX = atStartBoundsWidth / boundsCurrentWidth;\n let scaleY = atStartBoundsHeight / boundsCurrentHeight;\n let boundTextFont = {};\n const boundTextElement = (0,_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextElement)(element, elementsMap);\n\n if (transformHandleDirection.includes(\"e\")) {\n scaleX = (rotatedPointer[0] - startTopLeft[0]) / boundsCurrentWidth;\n }\n\n if (transformHandleDirection.includes(\"s\")) {\n scaleY = (rotatedPointer[1] - startTopLeft[1]) / boundsCurrentHeight;\n }\n\n if (transformHandleDirection.includes(\"w\")) {\n scaleX = (startBottomRight[0] - rotatedPointer[0]) / boundsCurrentWidth;\n }\n\n if (transformHandleDirection.includes(\"n\")) {\n scaleY = (startBottomRight[1] - rotatedPointer[1]) / boundsCurrentHeight;\n } // Linear elements dimensions differ from bounds dimensions\n\n\n const eleInitialWidth = stateAtResizeStart.width;\n const eleInitialHeight = stateAtResizeStart.height; // We have to use dimensions of element on screen, otherwise the scaling of the\n // dimensions won't match the cursor for linear elements.\n\n let eleNewWidth = element.width * scaleX;\n let eleNewHeight = element.height * scaleY; // adjust dimensions for resizing from center\n\n if (shouldResizeFromCenter) {\n eleNewWidth = 2 * eleNewWidth - eleInitialWidth;\n eleNewHeight = 2 * eleNewHeight - eleInitialHeight;\n } // adjust dimensions to keep sides ratio\n\n\n if (shouldMaintainAspectRatio) {\n const widthRatio = Math.abs(eleNewWidth) / eleInitialWidth;\n const heightRatio = Math.abs(eleNewHeight) / eleInitialHeight;\n\n if (transformHandleDirection.length === 1) {\n eleNewHeight *= widthRatio;\n eleNewWidth *= heightRatio;\n }\n\n if (transformHandleDirection.length === 2) {\n const ratio = Math.max(widthRatio, heightRatio);\n eleNewWidth = eleInitialWidth * ratio * Math.sign(eleNewWidth);\n eleNewHeight = eleInitialHeight * ratio * Math.sign(eleNewHeight);\n }\n }\n\n if (boundTextElement) {\n const stateOfBoundTextElementAtResize = originalElements.get(boundTextElement.id);\n\n if (stateOfBoundTextElementAtResize) {\n boundTextFont = {\n fontSize: stateOfBoundTextElementAtResize.fontSize\n };\n }\n\n if (shouldMaintainAspectRatio) {\n const updatedElement = Object.assign(Object.assign({}, element), {\n width: eleNewWidth,\n height: eleNewHeight\n });\n const nextFont = measureFontSizeFromWidth(boundTextElement, elementsMap, (0,_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextMaxWidth)(updatedElement, boundTextElement));\n\n if (nextFont === null) {\n return;\n }\n\n boundTextFont = {\n fontSize: nextFont.size\n };\n } else {\n const minWidth = (0,_textElement__WEBPACK_IMPORTED_MODULE_8__.getApproxMinLineWidth)((0,_utils__WEBPACK_IMPORTED_MODULE_5__.getFontString)(boundTextElement), boundTextElement.lineHeight);\n const minHeight = (0,_textElement__WEBPACK_IMPORTED_MODULE_8__.getApproxMinLineHeight)(boundTextElement.fontSize, boundTextElement.lineHeight);\n eleNewWidth = Math.max(eleNewWidth, minWidth);\n eleNewHeight = Math.max(eleNewHeight, minHeight);\n }\n }\n\n const [newBoundsX1, newBoundsY1, newBoundsX2, newBoundsY2] = (0,_bounds__WEBPACK_IMPORTED_MODULE_2__.getResizedElementAbsoluteCoords)(stateAtResizeStart, eleNewWidth, eleNewHeight, true);\n const newBoundsWidth = newBoundsX2 - newBoundsX1;\n const newBoundsHeight = newBoundsY2 - newBoundsY1; // Calculate new topLeft based on fixed corner during resize\n\n let newTopLeft = [...startTopLeft];\n\n if ([\"n\", \"w\", \"nw\"].includes(transformHandleDirection)) {\n newTopLeft = [startBottomRight[0] - Math.abs(newBoundsWidth), startBottomRight[1] - Math.abs(newBoundsHeight)];\n }\n\n if (transformHandleDirection === \"ne\") {\n const bottomLeft = [startTopLeft[0], startBottomRight[1]];\n newTopLeft = [bottomLeft[0], bottomLeft[1] - Math.abs(newBoundsHeight)];\n }\n\n if (transformHandleDirection === \"sw\") {\n const topRight = [startBottomRight[0], startTopLeft[1]];\n newTopLeft = [topRight[0] - Math.abs(newBoundsWidth), topRight[1]];\n } // Keeps opposite handle fixed during resize\n\n\n if (shouldMaintainAspectRatio) {\n if ([\"s\", \"n\"].includes(transformHandleDirection)) {\n newTopLeft[0] = startCenter[0] - newBoundsWidth / 2;\n }\n\n if ([\"e\", \"w\"].includes(transformHandleDirection)) {\n newTopLeft[1] = startCenter[1] - newBoundsHeight / 2;\n }\n }\n\n const flipX = eleNewWidth < 0;\n const flipY = eleNewHeight < 0; // Flip horizontally\n\n if (flipX) {\n if (transformHandleDirection.includes(\"e\")) {\n newTopLeft[0] -= Math.abs(newBoundsWidth);\n }\n\n if (transformHandleDirection.includes(\"w\")) {\n newTopLeft[0] += Math.abs(newBoundsWidth);\n }\n } // Flip vertically\n\n\n if (flipY) {\n if (transformHandleDirection.includes(\"s\")) {\n newTopLeft[1] -= Math.abs(newBoundsHeight);\n }\n\n if (transformHandleDirection.includes(\"n\")) {\n newTopLeft[1] += Math.abs(newBoundsHeight);\n }\n }\n\n if (shouldResizeFromCenter) {\n newTopLeft[0] = startCenter[0] - Math.abs(newBoundsWidth) / 2;\n newTopLeft[1] = startCenter[1] - Math.abs(newBoundsHeight) / 2;\n } // adjust topLeft to new rotation point\n\n\n const angle = stateAtResizeStart.angle;\n const rotatedTopLeft = (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_12__.pointFromPair)(newTopLeft), startCenter, angle);\n const newCenter = (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(newTopLeft[0] + Math.abs(newBoundsWidth) / 2, newTopLeft[1] + Math.abs(newBoundsHeight) / 2);\n const rotatedNewCenter = (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)(newCenter, startCenter, angle);\n newTopLeft = (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)(rotatedTopLeft, rotatedNewCenter, -angle); // For linear elements (x,y) are the coordinates of the first drawn point not the top-left corner\n // So we need to readjust (x,y) to be where the first point should be\n\n const newOrigin = [...newTopLeft];\n const linearElementXOffset = stateAtResizeStart.x - newBoundsX1;\n const linearElementYOffset = stateAtResizeStart.y - newBoundsY1;\n newOrigin[0] += linearElementXOffset;\n newOrigin[1] += linearElementYOffset;\n const nextX = newOrigin[0];\n const nextY = newOrigin[1]; // Readjust points for linear elements\n\n let rescaledElementPointsY;\n let rescaledPoints;\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isLinearElement)(element) || (0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isFreeDrawElement)(element)) {\n rescaledElementPointsY = (0,_points__WEBPACK_IMPORTED_MODULE_1__.rescalePoints)(1, eleNewHeight, stateAtResizeStart.points, true);\n rescaledPoints = (0,_points__WEBPACK_IMPORTED_MODULE_1__.rescalePoints)(0, eleNewWidth, rescaledElementPointsY, true);\n }\n\n const resizedElement = {\n width: Math.abs(eleNewWidth),\n height: Math.abs(eleNewHeight),\n x: nextX,\n y: nextY,\n points: rescaledPoints\n };\n\n if (\"scale\" in element && \"scale\" in stateAtResizeStart) {\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isIframeLikeElement)(element)) {\n //zsviczian\n if (shouldMaintainAspectRatio) {\n const scale = [Math.abs(eleNewWidth / (stateAtResizeStart.width / stateAtResizeStart.scale[0])), Math.abs(eleNewHeight / (stateAtResizeStart.height / stateAtResizeStart.scale[1]))];\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_4__.mutateElement)(element, {\n scale\n });\n }\n } else {\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_4__.mutateElement)(element, {\n scale: [// defaulting because scaleX/Y can be 0/-0\n (Math.sign(newBoundsX2 - stateAtResizeStart.x) || stateAtResizeStart.scale[0]) * stateAtResizeStart.scale[0], (Math.sign(newBoundsY2 - stateAtResizeStart.y) || stateAtResizeStart.scale[1]) * stateAtResizeStart.scale[1]]\n });\n }\n }\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isArrowElement)(element) && boundTextElement && shouldMaintainAspectRatio) {\n const fontSize = resizedElement.width / element.width * boundTextElement.fontSize;\n\n if (fontSize < _constants__WEBPACK_IMPORTED_MODULE_0__.MIN_FONT_SIZE) {\n return;\n }\n\n boundTextFont.fontSize = fontSize;\n }\n\n if (resizedElement.width !== 0 && resizedElement.height !== 0 && Number.isFinite(resizedElement.x) && Number.isFinite(resizedElement.y)) {\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_4__.mutateElement)(element, resizedElement);\n (0,_binding__WEBPACK_IMPORTED_MODULE_6__.updateBoundElements)(element, elementsMap, {\n oldSize: {\n width: stateAtResizeStart.width,\n height: stateAtResizeStart.height\n }\n });\n\n if (boundTextElement && boundTextFont != null) {\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_4__.mutateElement)(boundTextElement, {\n fontSize: boundTextFont.fontSize\n });\n }\n\n (0,_textElement__WEBPACK_IMPORTED_MODULE_8__.handleBindTextResize)(element, elementsMap, transformHandleDirection, shouldMaintainAspectRatio);\n }\n};\nconst resizeMultipleElements = (originalElements, selectedElements, elementsMap, transformHandleType, shouldResizeFromCenter, shouldMaintainAspectRatio, pointerX, pointerY) => {\n var _a, _b, _c, _d; // map selected elements to the original elements. While it never should\n // happen that pointerDownState.originalElements won't contain the selected\n // elements during resize, this coupling isn't guaranteed, so to ensure\n // type safety we need to transform only those elements we filter.\n\n\n const targetElements = selectedElements.reduce((acc, element) => {\n const origElement = originalElements.get(element.id);\n\n if (origElement) {\n acc.push({\n orig: origElement,\n latest: element\n });\n }\n\n return acc;\n }, []); // getCommonBoundingBox() uses getBoundTextElement() which returns null for\n // original elements from pointerDownState, so we have to find and add these\n // bound text elements manually. Additionally, the coordinates of bound text\n // elements aren't always up to date.\n\n const boundTextElements = targetElements.reduce((acc, {\n orig\n }) => {\n var _a;\n\n if (!(0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isLinearElement)(orig)) {\n return acc;\n }\n\n const textId = (0,_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextElementId)(orig);\n\n if (!textId) {\n return acc;\n }\n\n const text = (_a = originalElements.get(textId)) !== null && _a !== void 0 ? _a : null;\n\n if (!(0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isBoundToContainer)(text)) {\n return acc;\n }\n\n const xy = _linearElementEditor__WEBPACK_IMPORTED_MODULE_9__.LinearElementEditor.getBoundTextElementPosition(orig, text, elementsMap);\n return [...acc, Object.assign(Object.assign({}, text), xy)];\n }, []);\n const {\n minX,\n minY,\n maxX,\n maxY,\n midX,\n midY\n } = (0,_bounds__WEBPACK_IMPORTED_MODULE_2__.getCommonBoundingBox)(targetElements.map(({\n orig\n }) => orig).concat(boundTextElements));\n const width = maxX - minX;\n const height = maxY - minY;\n const direction = transformHandleType;\n const anchorsMap = {\n ne: (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(minX, maxY),\n se: (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(minX, minY),\n sw: (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(maxX, minY),\n nw: (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(maxX, maxY),\n e: (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(minX, minY + height / 2),\n w: (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(maxX, minY + height / 2),\n n: (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(minX + width / 2, maxY),\n s: (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(minX + width / 2, minY)\n }; // anchor point must be on the opposite side of the dragged selection handle\n // or be the center of the selection if shouldResizeFromCenter\n\n const [anchorX, anchorY] = shouldResizeFromCenter ? (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(midX, midY) : anchorsMap[direction];\n const resizeFromCenterScale = shouldResizeFromCenter ? 2 : 1;\n const scale = Math.max(Math.abs(pointerX - anchorX) / width || 0, Math.abs(pointerY - anchorY) / height || 0) * resizeFromCenterScale;\n\n if (scale === 0) {\n return;\n }\n\n let scaleX = direction.includes(\"e\") || direction.includes(\"w\") ? Math.abs(pointerX - anchorX) / width * resizeFromCenterScale : 1;\n let scaleY = direction.includes(\"n\") || direction.includes(\"s\") ? Math.abs(pointerY - anchorY) / height * resizeFromCenterScale : 1;\n const keepAspectRatio = shouldMaintainAspectRatio || targetElements.some(item => item.latest.angle !== 0 || (0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isTextElement)(item.latest) || (0,_groups__WEBPACK_IMPORTED_MODULE_10__.isInGroup)(item.latest));\n\n if (keepAspectRatio) {\n scaleX = scale;\n scaleY = scale;\n }\n\n const flipConditionsMap = {\n ne: [pointerX < anchorX, pointerY > anchorY],\n se: [pointerX < anchorX, pointerY < anchorY],\n sw: [pointerX > anchorX, pointerY < anchorY],\n nw: [pointerX > anchorX, pointerY > anchorY],\n // e.g. when resizing from the \"e\" side, we do not need to consider changes in the `y` direction\n // and therefore, we do not need to flip in the `y` direction at all\n e: [pointerX < anchorX, false],\n w: [pointerX > anchorX, false],\n n: [false, pointerY > anchorY],\n s: [false, pointerY < anchorY]\n };\n /**\n * to flip an element:\n * 1. determine over which axis is the element being flipped\n * (could be x, y, or both) indicated by `flipFactorX` & `flipFactorY`\n * 2. shift element's position by the amount of width or height (or both) or\n * mirror points in the case of linear & freedraw elemenets\n * 3. adjust element angle\n */\n\n const [flipFactorX, flipFactorY] = flipConditionsMap[direction].map(condition => condition ? -1 : 1);\n const isFlippedByX = flipFactorX < 0;\n const isFlippedByY = flipFactorY < 0;\n const elementsAndUpdates = [];\n\n for (const {\n orig,\n latest\n } of targetElements) {\n // bounded text elements are updated along with their container elements\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isTextElement)(orig) && (0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isBoundToContainer)(orig)) {\n continue;\n }\n\n const width = ((_a = orig.customData) === null || _a === void 0 ? void 0 : _a.isAnchored) ? orig.width : orig.width * scaleX; //zsviczian\n\n const height = ((_b = orig.customData) === null || _b === void 0 ? void 0 : _b.isAnchored) ? orig.height : orig.height * scaleY; //zsviczian\n\n const angle = (0,_math__WEBPACK_IMPORTED_MODULE_12__.normalizeRadians)(orig.angle * flipFactorX * flipFactorY);\n const isLinearOrFreeDraw = (0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isLinearElement)(orig) || (0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isFreeDrawElement)(orig);\n const offsetX = orig.x - anchorX;\n const offsetY = orig.y - anchorY;\n const shiftX = isFlippedByX && !isLinearOrFreeDraw ? width : 0;\n const shiftY = isFlippedByY && !isLinearOrFreeDraw ? height : 0;\n const x = anchorX + flipFactorX * (offsetX * scaleX + shiftX);\n const y = anchorY + flipFactorY * (offsetY * scaleY + shiftY);\n const rescaledPoints = rescalePointsInElement(orig, width * flipFactorX, height * flipFactorY, false);\n const update = Object.assign({\n x,\n y,\n width,\n height,\n angle\n }, rescaledPoints);\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isImageElement)(orig)) {\n update.scale = [orig.scale[0] * flipFactorX, orig.scale[1] * flipFactorY];\n }\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isTextElement)(orig)) {\n const metrics = measureFontSizeFromWidth(orig, elementsMap, width);\n\n if (!metrics) {\n return;\n }\n\n update.fontSize = metrics.size;\n }\n\n const boundTextElement = originalElements.get((_c = (0,_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextElementId)(orig)) !== null && _c !== void 0 ? _c : \"\");\n\n if (boundTextElement) {\n if (keepAspectRatio) {\n const newFontSize = boundTextElement.fontSize * scale;\n\n if (newFontSize < _constants__WEBPACK_IMPORTED_MODULE_0__.MIN_FONT_SIZE) {\n return;\n }\n\n update.boundTextFontSize = newFontSize;\n } else {\n update.boundTextFontSize = boundTextElement.fontSize;\n }\n }\n\n elementsAndUpdates.push({\n element: latest,\n update\n });\n }\n\n const elementsToUpdate = elementsAndUpdates.map(({\n element\n }) => element);\n\n for (let _e of elementsAndUpdates) {\n const {\n element\n } = _e,\n _f = _e.update,\n {\n boundTextFontSize\n } = _f,\n update = __rest(_f, [\"boundTextFontSize\"]);\n\n const {\n angle\n } = update;\n const {\n width: oldWidth,\n height: oldHeight\n } = element;\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_4__.mutateElement)(element, update, false);\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isArrowElement)(element) && (0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isElbowArrow)(element)) {\n (0,_routing__WEBPACK_IMPORTED_MODULE_11__.mutateElbowArrow)(element, elementsMap, element.points, undefined, undefined, {\n informMutation: false\n });\n }\n\n (0,_binding__WEBPACK_IMPORTED_MODULE_6__.updateBoundElements)(element, elementsMap, {\n simultaneouslyUpdated: elementsToUpdate,\n oldSize: {\n width: oldWidth,\n height: oldHeight\n }\n });\n const boundTextElement = (0,_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextElement)(element, elementsMap);\n\n if (boundTextElement && boundTextFontSize) {\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_4__.mutateElement)(boundTextElement, {\n fontSize: boundTextFontSize,\n angle: (0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isLinearElement)(element) ? undefined : angle\n }, false);\n (0,_textElement__WEBPACK_IMPORTED_MODULE_8__.handleBindTextResize)(element, elementsMap, transformHandleType, true);\n }\n }\n\n (_d = _scene_Scene__WEBPACK_IMPORTED_MODULE_7__[\"default\"].getScene(elementsAndUpdates[0].element)) === null || _d === void 0 ? void 0 : _d.triggerUpdate();\n};\n\nconst rotateMultipleElements = (originalElements, elements, elementsMap, pointerX, pointerY, shouldRotateWithDiscreteAngle, centerX, centerY) => {\n var _a;\n\n let centerAngle = 5 * Math.PI / 2 + Math.atan2(pointerY - centerY, pointerX - centerX);\n\n if (shouldRotateWithDiscreteAngle) {\n centerAngle += _constants__WEBPACK_IMPORTED_MODULE_0__.SHIFT_LOCKING_ANGLE / 2;\n centerAngle -= centerAngle % _constants__WEBPACK_IMPORTED_MODULE_0__.SHIFT_LOCKING_ANGLE;\n }\n\n elements.filter(element => !(0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isFrameLikeElement)(element)).forEach(element => {\n var _a, _b;\n\n const [x1, y1, x2, y2] = (0,_bounds__WEBPACK_IMPORTED_MODULE_2__.getElementAbsoluteCoords)(element, elementsMap);\n const cx = (x1 + x2) / 2;\n const cy = (y1 + y2) / 2;\n const origAngle = (_b = (_a = originalElements.get(element.id)) === null || _a === void 0 ? void 0 : _a.angle) !== null && _b !== void 0 ? _b : element.angle;\n const [rotatedCX, rotatedCY] = (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(cx, cy), (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(centerX, centerY), centerAngle + origAngle - element.angle);\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isArrowElement)(element) && (0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isElbowArrow)(element)) {\n const points = (0,_binding__WEBPACK_IMPORTED_MODULE_6__.getArrowLocalFixedPoints)(element, elementsMap);\n (0,_routing__WEBPACK_IMPORTED_MODULE_11__.mutateElbowArrow)(element, elementsMap, points);\n } else {\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_4__.mutateElement)(element, {\n x: element.x + (rotatedCX - cx),\n y: element.y + (rotatedCY - cy),\n angle: (0,_math__WEBPACK_IMPORTED_MODULE_12__.normalizeRadians)(centerAngle + origAngle)\n }, false);\n }\n\n (0,_binding__WEBPACK_IMPORTED_MODULE_6__.updateBoundElements)(element, elementsMap, {\n simultaneouslyUpdated: elements\n });\n const boundText = (0,_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextElement)(element, elementsMap);\n\n if (boundText && !(0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isArrowElement)(element)) {\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_4__.mutateElement)(boundText, {\n x: boundText.x + (rotatedCX - cx),\n y: boundText.y + (rotatedCY - cy),\n angle: (0,_math__WEBPACK_IMPORTED_MODULE_12__.normalizeRadians)(centerAngle + origAngle)\n }, false);\n }\n });\n (_a = _scene_Scene__WEBPACK_IMPORTED_MODULE_7__[\"default\"].getScene(elements[0])) === null || _a === void 0 ? void 0 : _a.triggerUpdate();\n};\n\nconst getResizeOffsetXY = (transformHandleType, selectedElements, elementsMap, x, y) => {\n const [x1, y1, x2, y2] = selectedElements.length === 1 ? (0,_bounds__WEBPACK_IMPORTED_MODULE_2__.getElementAbsoluteCoords)(selectedElements[0], elementsMap) : (0,_bounds__WEBPACK_IMPORTED_MODULE_2__.getCommonBounds)(selectedElements);\n const cx = (x1 + x2) / 2;\n const cy = (y1 + y2) / 2;\n const angle = selectedElements.length === 1 ? selectedElements[0].angle : 0;\n [x, y] = (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(x, y), (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(cx, cy), -angle);\n\n switch (transformHandleType) {\n case \"n\":\n return (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(x - (x1 + x2) / 2, y - y1), (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(0, 0), angle);\n\n case \"s\":\n return (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(x - (x1 + x2) / 2, y - y2), (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(0, 0), angle);\n\n case \"w\":\n return (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(x - x1, y - (y1 + y2) / 2), (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(0, 0), angle);\n\n case \"e\":\n return (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(x - x2, y - (y1 + y2) / 2), (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(0, 0), angle);\n\n case \"nw\":\n return (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(x - x1, y - y1), (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(0, 0), angle);\n\n case \"ne\":\n return (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(x - x2, y - y1), (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(0, 0), angle);\n\n case \"sw\":\n return (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(x - x1, y - y2), (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(0, 0), angle);\n\n case \"se\":\n return (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(x - x2, y - y2), (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(0, 0), angle);\n\n default:\n return [0, 0];\n }\n};\nconst getResizeArrowDirection = (transformHandleType, element) => {\n const [, [px, py]] = element.points;\n const isResizeEnd = transformHandleType === \"nw\" && (px < 0 || py < 0) || transformHandleType === \"ne\" && px >= 0 || transformHandleType === \"sw\" && px <= 0 || transformHandleType === \"se\" && (px > 0 || py > 0);\n return isResizeEnd ? \"end\" : \"origin\";\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./element/resizeElements.ts?");
|
|
2930
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"getResizeArrowDirection\": () => (/* binding */ getResizeArrowDirection),\n/* harmony export */ \"getResizeOffsetXY\": () => (/* binding */ getResizeOffsetXY),\n/* harmony export */ \"measureFontSizeFromWidth\": () => (/* binding */ measureFontSizeFromWidth),\n/* harmony export */ \"rescalePointsInElement\": () => (/* binding */ rescalePointsInElement),\n/* harmony export */ \"resizeMultipleElements\": () => (/* binding */ resizeMultipleElements),\n/* harmony export */ \"resizeSingleElement\": () => (/* binding */ resizeSingleElement),\n/* harmony export */ \"transformElements\": () => (/* binding */ transformElements)\n/* harmony export */ });\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _points__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../points */ \"./points.ts\");\n/* harmony import */ var _bounds__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./bounds */ \"./element/bounds.ts\");\n/* harmony import */ var _typeChecks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _mutateElement__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _binding__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./binding */ \"./element/binding.ts\");\n/* harmony import */ var _scene_Scene__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../scene/Scene */ \"./scene/Scene.ts\");\n/* harmony import */ var _textElement__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _linearElementEditor__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _groups__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../groups */ \"./groups.ts\");\n/* harmony import */ var _routing__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./routing */ \"./element/routing.ts\");\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../math */ \"../math/index.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 // Returns true when transform (resizing/rotation) happened\n\nconst transformElements = (originalElements, transformHandleType, selectedElements, elementsMap, shouldRotateWithDiscreteAngle, shouldResizeFromCenter, shouldMaintainAspectRatio, pointerX, pointerY, centerX, centerY) => {\n if (selectedElements.length === 1) {\n const [element] = selectedElements;\n\n if (transformHandleType === \"rotation\") {\n if (!(0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isElbowArrow)(element)) {\n rotateSingleElement(element, elementsMap, pointerX, pointerY, shouldRotateWithDiscreteAngle);\n (0,_binding__WEBPACK_IMPORTED_MODULE_6__.updateBoundElements)(element, elementsMap);\n }\n } else if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isTextElement)(element) && transformHandleType) {\n resizeSingleTextElement(originalElements, element, elementsMap, transformHandleType, shouldResizeFromCenter, pointerX, pointerY);\n (0,_binding__WEBPACK_IMPORTED_MODULE_6__.updateBoundElements)(element, elementsMap);\n } else if (transformHandleType) {\n resizeSingleElement(originalElements, shouldMaintainAspectRatio, element, elementsMap, transformHandleType, shouldResizeFromCenter, pointerX, pointerY);\n }\n\n return true;\n } else if (selectedElements.length > 1) {\n if (transformHandleType === \"rotation\") {\n rotateMultipleElements(originalElements, selectedElements, elementsMap, pointerX, pointerY, shouldRotateWithDiscreteAngle, centerX, centerY);\n return true;\n } else if (transformHandleType) {\n resizeMultipleElements(originalElements, selectedElements, elementsMap, transformHandleType, shouldResizeFromCenter, shouldMaintainAspectRatio, pointerX, pointerY);\n return true;\n }\n }\n\n return false;\n};\n\nconst rotateSingleElement = (element, elementsMap, pointerX, pointerY, shouldRotateWithDiscreteAngle) => {\n var _a;\n\n const [x1, y1, x2, y2] = (0,_bounds__WEBPACK_IMPORTED_MODULE_2__.getElementAbsoluteCoords)(element, elementsMap);\n const cx = (x1 + x2) / 2;\n const cy = (y1 + y2) / 2;\n let angle;\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isFrameLikeElement)(element)) {\n angle = 0;\n } else {\n angle = 5 * Math.PI / 2 + Math.atan2(pointerY - cy, pointerX - cx);\n\n if (shouldRotateWithDiscreteAngle) {\n angle = angle + _constants__WEBPACK_IMPORTED_MODULE_0__.SHIFT_LOCKING_ANGLE / 2;\n angle = angle - angle % _constants__WEBPACK_IMPORTED_MODULE_0__.SHIFT_LOCKING_ANGLE;\n }\n\n angle = (0,_math__WEBPACK_IMPORTED_MODULE_12__.normalizeRadians)(angle);\n }\n\n const boundTextElementId = (0,_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextElementId)(element);\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_4__.mutateElement)(element, {\n angle\n });\n\n if (boundTextElementId) {\n const textElement = (_a = _scene_Scene__WEBPACK_IMPORTED_MODULE_7__[\"default\"].getScene(element)) === null || _a === void 0 ? void 0 : _a.getElement(boundTextElementId);\n\n if (textElement && !(0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isArrowElement)(element)) {\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_4__.mutateElement)(textElement, {\n angle\n });\n }\n }\n};\n\nconst rescalePointsInElement = (element, width, height, normalizePoints) => (0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isLinearElement)(element) || (0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isFreeDrawElement)(element) ? {\n points: (0,_points__WEBPACK_IMPORTED_MODULE_1__.rescalePoints)(0, width, (0,_points__WEBPACK_IMPORTED_MODULE_1__.rescalePoints)(1, height, element.points, normalizePoints), normalizePoints)\n} : {};\nconst measureFontSizeFromWidth = (element, elementsMap, nextWidth) => {\n // We only use width to scale font on resize\n let width = element.width;\n const hasContainer = (0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isBoundToContainer)(element);\n\n if (hasContainer) {\n const container = (0,_textElement__WEBPACK_IMPORTED_MODULE_8__.getContainerElement)(element, elementsMap);\n\n if (container) {\n width = (0,_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextMaxWidth)(container, element);\n }\n }\n\n const nextFontSize = element.fontSize * (nextWidth / width);\n\n if (nextFontSize < _constants__WEBPACK_IMPORTED_MODULE_0__.MIN_FONT_SIZE) {\n return null;\n }\n\n return {\n size: nextFontSize\n };\n};\n\nconst resizeSingleTextElement = (originalElements, element, elementsMap, transformHandleType, shouldResizeFromCenter, pointerX, pointerY) => {\n const [x1, y1, x2, y2, cx, cy] = (0,_bounds__WEBPACK_IMPORTED_MODULE_2__.getElementAbsoluteCoords)(element, elementsMap); // rotation pointer with reverse angle\n\n const [rotatedX, rotatedY] = (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(pointerX, pointerY), (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(cx, cy), -element.angle);\n let scaleX = 0;\n let scaleY = 0;\n\n if (transformHandleType !== \"e\" && transformHandleType !== \"w\") {\n if (transformHandleType.includes(\"e\")) {\n scaleX = (rotatedX - x1) / (x2 - x1);\n }\n\n if (transformHandleType.includes(\"w\")) {\n scaleX = (x2 - rotatedX) / (x2 - x1);\n }\n\n if (transformHandleType.includes(\"n\")) {\n scaleY = (y2 - rotatedY) / (y2 - y1);\n }\n\n if (transformHandleType.includes(\"s\")) {\n scaleY = (rotatedY - y1) / (y2 - y1);\n }\n }\n\n const scale = Math.max(scaleX, scaleY);\n\n if (scale > 0) {\n const nextWidth = element.width * scale;\n const nextHeight = element.height * scale;\n const metrics = measureFontSizeFromWidth(element, elementsMap, nextWidth);\n\n if (metrics === null) {\n return;\n }\n\n const startTopLeft = [x1, y1];\n const startBottomRight = [x2, y2];\n const startCenter = [cx, cy];\n let newTopLeft = (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(x1, y1);\n\n if ([\"n\", \"w\", \"nw\"].includes(transformHandleType)) {\n newTopLeft = (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(startBottomRight[0] - Math.abs(nextWidth), startBottomRight[1] - Math.abs(nextHeight));\n }\n\n if (transformHandleType === \"ne\") {\n const bottomLeft = [startTopLeft[0], startBottomRight[1]];\n newTopLeft = (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(bottomLeft[0], bottomLeft[1] - Math.abs(nextHeight));\n }\n\n if (transformHandleType === \"sw\") {\n const topRight = [startBottomRight[0], startTopLeft[1]];\n newTopLeft = (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(topRight[0] - Math.abs(nextWidth), topRight[1]);\n }\n\n if ([\"s\", \"n\"].includes(transformHandleType)) {\n newTopLeft[0] = startCenter[0] - nextWidth / 2;\n }\n\n if ([\"e\", \"w\"].includes(transformHandleType)) {\n newTopLeft[1] = startCenter[1] - nextHeight / 2;\n }\n\n if (shouldResizeFromCenter) {\n newTopLeft[0] = startCenter[0] - Math.abs(nextWidth) / 2;\n newTopLeft[1] = startCenter[1] - Math.abs(nextHeight) / 2;\n }\n\n const angle = element.angle;\n const rotatedTopLeft = (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)(newTopLeft, (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(cx, cy), angle);\n const newCenter = (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(newTopLeft[0] + Math.abs(nextWidth) / 2, newTopLeft[1] + Math.abs(nextHeight) / 2);\n const rotatedNewCenter = (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)(newCenter, (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(cx, cy), angle);\n newTopLeft = (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)(rotatedTopLeft, rotatedNewCenter, -angle);\n const [nextX, nextY] = newTopLeft;\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_4__.mutateElement)(element, {\n fontSize: metrics.size,\n width: nextWidth,\n height: nextHeight,\n x: nextX,\n y: nextY\n });\n }\n\n if (transformHandleType === \"e\" || transformHandleType === \"w\") {\n const stateAtResizeStart = originalElements.get(element.id);\n const [x1, y1, x2, y2] = (0,_bounds__WEBPACK_IMPORTED_MODULE_2__.getResizedElementAbsoluteCoords)(stateAtResizeStart, stateAtResizeStart.width, stateAtResizeStart.height, true);\n const startTopLeft = (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(x1, y1);\n const startBottomRight = (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(x2, y2);\n const startCenter = (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointCenter)(startTopLeft, startBottomRight);\n const rotatedPointer = (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(pointerX, pointerY), startCenter, -stateAtResizeStart.angle);\n const [esx1,, esx2] = (0,_bounds__WEBPACK_IMPORTED_MODULE_2__.getResizedElementAbsoluteCoords)(element, element.width, element.height, true);\n const boundsCurrentWidth = esx2 - esx1;\n const atStartBoundsWidth = startBottomRight[0] - startTopLeft[0];\n const minWidth = (0,_textElement__WEBPACK_IMPORTED_MODULE_8__.getMinTextElementWidth)((0,_utils__WEBPACK_IMPORTED_MODULE_5__.getFontString)({\n fontSize: element.fontSize,\n fontFamily: element.fontFamily\n }), element.lineHeight);\n let scaleX = atStartBoundsWidth / boundsCurrentWidth;\n\n if (transformHandleType.includes(\"e\")) {\n scaleX = (rotatedPointer[0] - startTopLeft[0]) / boundsCurrentWidth;\n }\n\n if (transformHandleType.includes(\"w\")) {\n scaleX = (startBottomRight[0] - rotatedPointer[0]) / boundsCurrentWidth;\n }\n\n const newWidth = element.width * scaleX < minWidth ? minWidth : element.width * scaleX;\n const text = (0,_textElement__WEBPACK_IMPORTED_MODULE_8__.wrapText)(element.originalText, (0,_utils__WEBPACK_IMPORTED_MODULE_5__.getFontString)(element), Math.abs(newWidth));\n const metrics = (0,_textElement__WEBPACK_IMPORTED_MODULE_8__.measureText)(text, (0,_utils__WEBPACK_IMPORTED_MODULE_5__.getFontString)(element), element.lineHeight);\n const eleNewHeight = metrics.height;\n const [newBoundsX1, newBoundsY1, newBoundsX2, newBoundsY2] = (0,_bounds__WEBPACK_IMPORTED_MODULE_2__.getResizedElementAbsoluteCoords)(stateAtResizeStart, newWidth, eleNewHeight, true);\n const newBoundsWidth = newBoundsX2 - newBoundsX1;\n const newBoundsHeight = newBoundsY2 - newBoundsY1;\n let newTopLeft = [...startTopLeft];\n\n if ([\"n\", \"w\", \"nw\"].includes(transformHandleType)) {\n newTopLeft = [startBottomRight[0] - Math.abs(newBoundsWidth), startTopLeft[1]];\n } // adjust topLeft to new rotation point\n\n\n const angle = stateAtResizeStart.angle;\n const rotatedTopLeft = (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_12__.pointFromPair)(newTopLeft), startCenter, angle);\n const newCenter = (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(newTopLeft[0] + Math.abs(newBoundsWidth) / 2, newTopLeft[1] + Math.abs(newBoundsHeight) / 2);\n const rotatedNewCenter = (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)(newCenter, startCenter, angle);\n newTopLeft = (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)(rotatedTopLeft, rotatedNewCenter, -angle);\n const resizedElement = {\n width: Math.abs(newWidth),\n height: Math.abs(metrics.height),\n x: newTopLeft[0],\n y: newTopLeft[1],\n text,\n autoResize: false\n };\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_4__.mutateElement)(element, resizedElement);\n }\n};\n\nconst resizeSingleElement = (originalElements, shouldMaintainAspectRatio, element, elementsMap, transformHandleDirection, shouldResizeFromCenter, pointerX, pointerY) => {\n var _a;\n\n if ((_a = element.customData) === null || _a === void 0 ? void 0 : _a.isAnchored) {\n return;\n } //zsviczian\n\n\n const stateAtResizeStart = originalElements.get(element.id); // Gets bounds corners\n\n const [x1, y1, x2, y2] = (0,_bounds__WEBPACK_IMPORTED_MODULE_2__.getResizedElementAbsoluteCoords)(stateAtResizeStart, stateAtResizeStart.width, stateAtResizeStart.height, true);\n const startTopLeft = (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(x1, y1);\n const startBottomRight = (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(x2, y2);\n const startCenter = (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointCenter)(startTopLeft, startBottomRight); // Calculate new dimensions based on cursor position\n\n const rotatedPointer = (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(pointerX, pointerY), startCenter, -stateAtResizeStart.angle); // Get bounds corners rendered on screen\n\n const [esx1, esy1, esx2, esy2] = (0,_bounds__WEBPACK_IMPORTED_MODULE_2__.getResizedElementAbsoluteCoords)(element, element.width, element.height, true);\n const boundsCurrentWidth = esx2 - esx1;\n const boundsCurrentHeight = esy2 - esy1; // It's important we set the initial scale value based on the width and height at resize start,\n // otherwise previous dimensions affected by modifiers will be taken into account.\n\n const atStartBoundsWidth = startBottomRight[0] - startTopLeft[0];\n const atStartBoundsHeight = startBottomRight[1] - startTopLeft[1];\n let scaleX = atStartBoundsWidth / boundsCurrentWidth;\n let scaleY = atStartBoundsHeight / boundsCurrentHeight;\n let boundTextFont = {};\n const boundTextElement = (0,_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextElement)(element, elementsMap);\n\n if (transformHandleDirection.includes(\"e\")) {\n scaleX = (rotatedPointer[0] - startTopLeft[0]) / boundsCurrentWidth;\n }\n\n if (transformHandleDirection.includes(\"s\")) {\n scaleY = (rotatedPointer[1] - startTopLeft[1]) / boundsCurrentHeight;\n }\n\n if (transformHandleDirection.includes(\"w\")) {\n scaleX = (startBottomRight[0] - rotatedPointer[0]) / boundsCurrentWidth;\n }\n\n if (transformHandleDirection.includes(\"n\")) {\n scaleY = (startBottomRight[1] - rotatedPointer[1]) / boundsCurrentHeight;\n } // Linear elements dimensions differ from bounds dimensions\n\n\n const eleInitialWidth = stateAtResizeStart.width;\n const eleInitialHeight = stateAtResizeStart.height; // We have to use dimensions of element on screen, otherwise the scaling of the\n // dimensions won't match the cursor for linear elements.\n\n let eleNewWidth = element.width * scaleX;\n let eleNewHeight = element.height * scaleY; // adjust dimensions for resizing from center\n\n if (shouldResizeFromCenter) {\n eleNewWidth = 2 * eleNewWidth - eleInitialWidth;\n eleNewHeight = 2 * eleNewHeight - eleInitialHeight;\n } // adjust dimensions to keep sides ratio\n\n\n if (shouldMaintainAspectRatio) {\n const widthRatio = Math.abs(eleNewWidth) / eleInitialWidth;\n const heightRatio = Math.abs(eleNewHeight) / eleInitialHeight;\n\n if (transformHandleDirection.length === 1) {\n eleNewHeight *= widthRatio;\n eleNewWidth *= heightRatio;\n }\n\n if (transformHandleDirection.length === 2) {\n const ratio = Math.max(widthRatio, heightRatio);\n eleNewWidth = eleInitialWidth * ratio * Math.sign(eleNewWidth);\n eleNewHeight = eleInitialHeight * ratio * Math.sign(eleNewHeight);\n }\n }\n\n if (boundTextElement) {\n const stateOfBoundTextElementAtResize = originalElements.get(boundTextElement.id);\n\n if (stateOfBoundTextElementAtResize) {\n boundTextFont = {\n fontSize: stateOfBoundTextElementAtResize.fontSize\n };\n }\n\n if (shouldMaintainAspectRatio) {\n const updatedElement = Object.assign(Object.assign({}, element), {\n width: eleNewWidth,\n height: eleNewHeight\n });\n const nextFont = measureFontSizeFromWidth(boundTextElement, elementsMap, (0,_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextMaxWidth)(updatedElement, boundTextElement));\n\n if (nextFont === null) {\n return;\n }\n\n boundTextFont = {\n fontSize: nextFont.size\n };\n } else {\n const minWidth = (0,_textElement__WEBPACK_IMPORTED_MODULE_8__.getApproxMinLineWidth)((0,_utils__WEBPACK_IMPORTED_MODULE_5__.getFontString)(boundTextElement), boundTextElement.lineHeight);\n const minHeight = (0,_textElement__WEBPACK_IMPORTED_MODULE_8__.getApproxMinLineHeight)(boundTextElement.fontSize, boundTextElement.lineHeight);\n eleNewWidth = Math.max(eleNewWidth, minWidth);\n eleNewHeight = Math.max(eleNewHeight, minHeight);\n }\n }\n\n const [newBoundsX1, newBoundsY1, newBoundsX2, newBoundsY2] = (0,_bounds__WEBPACK_IMPORTED_MODULE_2__.getResizedElementAbsoluteCoords)(stateAtResizeStart, eleNewWidth, eleNewHeight, true);\n const newBoundsWidth = newBoundsX2 - newBoundsX1;\n const newBoundsHeight = newBoundsY2 - newBoundsY1; // Calculate new topLeft based on fixed corner during resize\n\n let newTopLeft = [...startTopLeft];\n\n if ([\"n\", \"w\", \"nw\"].includes(transformHandleDirection)) {\n newTopLeft = [startBottomRight[0] - Math.abs(newBoundsWidth), startBottomRight[1] - Math.abs(newBoundsHeight)];\n }\n\n if (transformHandleDirection === \"ne\") {\n const bottomLeft = [startTopLeft[0], startBottomRight[1]];\n newTopLeft = [bottomLeft[0], bottomLeft[1] - Math.abs(newBoundsHeight)];\n }\n\n if (transformHandleDirection === \"sw\") {\n const topRight = [startBottomRight[0], startTopLeft[1]];\n newTopLeft = [topRight[0] - Math.abs(newBoundsWidth), topRight[1]];\n } // Keeps opposite handle fixed during resize\n\n\n if (shouldMaintainAspectRatio) {\n if ([\"s\", \"n\"].includes(transformHandleDirection)) {\n newTopLeft[0] = startCenter[0] - newBoundsWidth / 2;\n }\n\n if ([\"e\", \"w\"].includes(transformHandleDirection)) {\n newTopLeft[1] = startCenter[1] - newBoundsHeight / 2;\n }\n }\n\n const flipX = eleNewWidth < 0;\n const flipY = eleNewHeight < 0; // Flip horizontally\n\n if (flipX) {\n if (transformHandleDirection.includes(\"e\")) {\n newTopLeft[0] -= Math.abs(newBoundsWidth);\n }\n\n if (transformHandleDirection.includes(\"w\")) {\n newTopLeft[0] += Math.abs(newBoundsWidth);\n }\n } // Flip vertically\n\n\n if (flipY) {\n if (transformHandleDirection.includes(\"s\")) {\n newTopLeft[1] -= Math.abs(newBoundsHeight);\n }\n\n if (transformHandleDirection.includes(\"n\")) {\n newTopLeft[1] += Math.abs(newBoundsHeight);\n }\n }\n\n if (shouldResizeFromCenter) {\n newTopLeft[0] = startCenter[0] - Math.abs(newBoundsWidth) / 2;\n newTopLeft[1] = startCenter[1] - Math.abs(newBoundsHeight) / 2;\n } // adjust topLeft to new rotation point\n\n\n const angle = stateAtResizeStart.angle;\n const rotatedTopLeft = (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_12__.pointFromPair)(newTopLeft), startCenter, angle);\n const newCenter = (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(newTopLeft[0] + Math.abs(newBoundsWidth) / 2, newTopLeft[1] + Math.abs(newBoundsHeight) / 2);\n const rotatedNewCenter = (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)(newCenter, startCenter, angle);\n newTopLeft = (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)(rotatedTopLeft, rotatedNewCenter, -angle); // For linear elements (x,y) are the coordinates of the first drawn point not the top-left corner\n // So we need to readjust (x,y) to be where the first point should be\n\n const newOrigin = [...newTopLeft];\n const linearElementXOffset = stateAtResizeStart.x - newBoundsX1;\n const linearElementYOffset = stateAtResizeStart.y - newBoundsY1;\n newOrigin[0] += linearElementXOffset;\n newOrigin[1] += linearElementYOffset;\n const nextX = newOrigin[0];\n const nextY = newOrigin[1]; // Readjust points for linear elements\n\n let rescaledElementPointsY;\n let rescaledPoints;\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isLinearElement)(element) || (0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isFreeDrawElement)(element)) {\n rescaledElementPointsY = (0,_points__WEBPACK_IMPORTED_MODULE_1__.rescalePoints)(1, eleNewHeight, stateAtResizeStart.points, true);\n rescaledPoints = (0,_points__WEBPACK_IMPORTED_MODULE_1__.rescalePoints)(0, eleNewWidth, rescaledElementPointsY, true);\n }\n\n const resizedElement = {\n width: Math.abs(eleNewWidth),\n height: Math.abs(eleNewHeight),\n x: nextX,\n y: nextY,\n points: rescaledPoints\n };\n\n if (\"scale\" in element && \"scale\" in stateAtResizeStart) {\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isIframeLikeElement)(element)) {\n //zsviczian\n if (shouldMaintainAspectRatio) {\n const scale = [Math.abs(eleNewWidth / (stateAtResizeStart.width / stateAtResizeStart.scale[0])), Math.abs(eleNewHeight / (stateAtResizeStart.height / stateAtResizeStart.scale[1]))];\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_4__.mutateElement)(element, {\n scale\n });\n }\n } else {\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_4__.mutateElement)(element, {\n scale: [// defaulting because scaleX/Y can be 0/-0\n (Math.sign(newBoundsX2 - stateAtResizeStart.x) || stateAtResizeStart.scale[0]) * stateAtResizeStart.scale[0], (Math.sign(newBoundsY2 - stateAtResizeStart.y) || stateAtResizeStart.scale[1]) * stateAtResizeStart.scale[1]]\n });\n }\n }\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isArrowElement)(element) && boundTextElement && shouldMaintainAspectRatio) {\n const fontSize = resizedElement.width / element.width * boundTextElement.fontSize;\n\n if (fontSize < _constants__WEBPACK_IMPORTED_MODULE_0__.MIN_FONT_SIZE) {\n return;\n }\n\n boundTextFont.fontSize = fontSize;\n }\n\n if (resizedElement.width !== 0 && resizedElement.height !== 0 && Number.isFinite(resizedElement.x) && Number.isFinite(resizedElement.y)) {\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_4__.mutateElement)(element, resizedElement);\n (0,_binding__WEBPACK_IMPORTED_MODULE_6__.updateBoundElements)(element, elementsMap, {\n oldSize: {\n width: stateAtResizeStart.width,\n height: stateAtResizeStart.height\n }\n });\n\n if (boundTextElement && boundTextFont != null) {\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_4__.mutateElement)(boundTextElement, {\n fontSize: boundTextFont.fontSize\n });\n }\n\n (0,_textElement__WEBPACK_IMPORTED_MODULE_8__.handleBindTextResize)(element, elementsMap, transformHandleDirection, shouldMaintainAspectRatio);\n }\n};\nconst resizeMultipleElements = (originalElements, selectedElements, elementsMap, transformHandleType, shouldResizeFromCenter, shouldMaintainAspectRatio, pointerX, pointerY) => {\n var _a, _b, _c, _d; // map selected elements to the original elements. While it never should\n // happen that pointerDownState.originalElements won't contain the selected\n // elements during resize, this coupling isn't guaranteed, so to ensure\n // type safety we need to transform only those elements we filter.\n\n\n const targetElements = selectedElements.reduce((acc, element) => {\n const origElement = originalElements.get(element.id);\n\n if (origElement) {\n acc.push({\n orig: origElement,\n latest: element\n });\n }\n\n return acc;\n }, []); // getCommonBoundingBox() uses getBoundTextElement() which returns null for\n // original elements from pointerDownState, so we have to find and add these\n // bound text elements manually. Additionally, the coordinates of bound text\n // elements aren't always up to date.\n\n const boundTextElements = targetElements.reduce((acc, {\n orig\n }) => {\n var _a;\n\n if (!(0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isLinearElement)(orig)) {\n return acc;\n }\n\n const textId = (0,_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextElementId)(orig);\n\n if (!textId) {\n return acc;\n }\n\n const text = (_a = originalElements.get(textId)) !== null && _a !== void 0 ? _a : null;\n\n if (!(0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isBoundToContainer)(text)) {\n return acc;\n }\n\n const xy = _linearElementEditor__WEBPACK_IMPORTED_MODULE_9__.LinearElementEditor.getBoundTextElementPosition(orig, text, elementsMap);\n return [...acc, Object.assign(Object.assign({}, text), xy)];\n }, []);\n const {\n minX,\n minY,\n maxX,\n maxY,\n midX,\n midY\n } = (0,_bounds__WEBPACK_IMPORTED_MODULE_2__.getCommonBoundingBox)(targetElements.map(({\n orig\n }) => orig).concat(boundTextElements));\n const width = maxX - minX;\n const height = maxY - minY;\n const direction = transformHandleType;\n const anchorsMap = {\n ne: (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(minX, maxY),\n se: (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(minX, minY),\n sw: (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(maxX, minY),\n nw: (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(maxX, maxY),\n e: (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(minX, minY + height / 2),\n w: (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(maxX, minY + height / 2),\n n: (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(minX + width / 2, maxY),\n s: (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(minX + width / 2, minY)\n }; // anchor point must be on the opposite side of the dragged selection handle\n // or be the center of the selection if shouldResizeFromCenter\n\n const [anchorX, anchorY] = shouldResizeFromCenter ? (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(midX, midY) : anchorsMap[direction];\n const resizeFromCenterScale = shouldResizeFromCenter ? 2 : 1;\n const scale = Math.max(Math.abs(pointerX - anchorX) / width || 0, Math.abs(pointerY - anchorY) / height || 0) * resizeFromCenterScale;\n\n if (scale === 0) {\n return;\n }\n\n let scaleX = direction.includes(\"e\") || direction.includes(\"w\") ? Math.abs(pointerX - anchorX) / width * resizeFromCenterScale : 1;\n let scaleY = direction.includes(\"n\") || direction.includes(\"s\") ? Math.abs(pointerY - anchorY) / height * resizeFromCenterScale : 1;\n const keepAspectRatio = shouldMaintainAspectRatio || targetElements.some(item => item.latest.angle !== 0 || (0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isTextElement)(item.latest) || (0,_groups__WEBPACK_IMPORTED_MODULE_10__.isInGroup)(item.latest));\n\n if (keepAspectRatio) {\n scaleX = scale;\n scaleY = scale;\n }\n\n const flipConditionsMap = {\n ne: [pointerX < anchorX, pointerY > anchorY],\n se: [pointerX < anchorX, pointerY < anchorY],\n sw: [pointerX > anchorX, pointerY < anchorY],\n nw: [pointerX > anchorX, pointerY > anchorY],\n // e.g. when resizing from the \"e\" side, we do not need to consider changes in the `y` direction\n // and therefore, we do not need to flip in the `y` direction at all\n e: [pointerX < anchorX, false],\n w: [pointerX > anchorX, false],\n n: [false, pointerY > anchorY],\n s: [false, pointerY < anchorY]\n };\n /**\n * to flip an element:\n * 1. determine over which axis is the element being flipped\n * (could be x, y, or both) indicated by `flipFactorX` & `flipFactorY`\n * 2. shift element's position by the amount of width or height (or both) or\n * mirror points in the case of linear & freedraw elemenets\n * 3. adjust element angle\n */\n\n const [flipFactorX, flipFactorY] = flipConditionsMap[direction].map(condition => condition ? -1 : 1);\n const isFlippedByX = flipFactorX < 0;\n const isFlippedByY = flipFactorY < 0;\n const elementsAndUpdates = [];\n\n for (const {\n orig,\n latest\n } of targetElements) {\n // bounded text elements are updated along with their container elements\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isTextElement)(orig) && (0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isBoundToContainer)(orig)) {\n continue;\n }\n\n const width = ((_a = orig.customData) === null || _a === void 0 ? void 0 : _a.isAnchored) ? orig.width : orig.width * scaleX; //zsviczian\n\n const height = ((_b = orig.customData) === null || _b === void 0 ? void 0 : _b.isAnchored) ? orig.height : orig.height * scaleY; //zsviczian\n\n const angle = (0,_math__WEBPACK_IMPORTED_MODULE_12__.normalizeRadians)(orig.angle * flipFactorX * flipFactorY);\n const isLinearOrFreeDraw = (0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isLinearElement)(orig) || (0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isFreeDrawElement)(orig);\n const offsetX = orig.x - anchorX;\n const offsetY = orig.y - anchorY;\n const shiftX = isFlippedByX && !isLinearOrFreeDraw ? width : 0;\n const shiftY = isFlippedByY && !isLinearOrFreeDraw ? height : 0;\n const x = anchorX + flipFactorX * (offsetX * scaleX + shiftX);\n const y = anchorY + flipFactorY * (offsetY * scaleY + shiftY);\n const rescaledPoints = rescalePointsInElement(orig, width * flipFactorX, height * flipFactorY, false);\n const update = Object.assign({\n x,\n y,\n width,\n height,\n angle\n }, rescaledPoints);\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isImageElement)(orig)) {\n update.scale = [orig.scale[0] * flipFactorX, orig.scale[1] * flipFactorY];\n }\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isTextElement)(orig)) {\n const metrics = measureFontSizeFromWidth(orig, elementsMap, width);\n\n if (!metrics) {\n return;\n }\n\n update.fontSize = metrics.size;\n }\n\n const boundTextElement = originalElements.get((_c = (0,_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextElementId)(orig)) !== null && _c !== void 0 ? _c : \"\");\n\n if (boundTextElement) {\n if (keepAspectRatio) {\n const newFontSize = boundTextElement.fontSize * scale;\n\n if (newFontSize < _constants__WEBPACK_IMPORTED_MODULE_0__.MIN_FONT_SIZE) {\n return;\n }\n\n update.boundTextFontSize = newFontSize;\n } else {\n update.boundTextFontSize = boundTextElement.fontSize;\n }\n }\n\n elementsAndUpdates.push({\n element: latest,\n update\n });\n }\n\n const elementsToUpdate = elementsAndUpdates.map(({\n element\n }) => element);\n\n for (let _e of elementsAndUpdates) {\n const {\n element\n } = _e,\n _f = _e.update,\n {\n boundTextFontSize\n } = _f,\n update = __rest(_f, [\"boundTextFontSize\"]);\n\n const {\n angle\n } = update;\n const {\n width: oldWidth,\n height: oldHeight\n } = element;\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_4__.mutateElement)(element, update, false);\n (0,_binding__WEBPACK_IMPORTED_MODULE_6__.updateBoundElements)(element, elementsMap, {\n simultaneouslyUpdated: elementsToUpdate,\n oldSize: {\n width: oldWidth,\n height: oldHeight\n }\n });\n const boundTextElement = (0,_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextElement)(element, elementsMap);\n\n if (boundTextElement && boundTextFontSize) {\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_4__.mutateElement)(boundTextElement, {\n fontSize: boundTextFontSize,\n angle: (0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isLinearElement)(element) ? undefined : angle\n }, false);\n (0,_textElement__WEBPACK_IMPORTED_MODULE_8__.handleBindTextResize)(element, elementsMap, transformHandleType, true);\n }\n }\n\n (_d = _scene_Scene__WEBPACK_IMPORTED_MODULE_7__[\"default\"].getScene(elementsAndUpdates[0].element)) === null || _d === void 0 ? void 0 : _d.triggerUpdate();\n};\n\nconst rotateMultipleElements = (originalElements, elements, elementsMap, pointerX, pointerY, shouldRotateWithDiscreteAngle, centerX, centerY) => {\n var _a;\n\n let centerAngle = 5 * Math.PI / 2 + Math.atan2(pointerY - centerY, pointerX - centerX);\n\n if (shouldRotateWithDiscreteAngle) {\n centerAngle += _constants__WEBPACK_IMPORTED_MODULE_0__.SHIFT_LOCKING_ANGLE / 2;\n centerAngle -= centerAngle % _constants__WEBPACK_IMPORTED_MODULE_0__.SHIFT_LOCKING_ANGLE;\n }\n\n elements.filter(element => !(0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isFrameLikeElement)(element)).forEach(element => {\n var _a, _b;\n\n const [x1, y1, x2, y2] = (0,_bounds__WEBPACK_IMPORTED_MODULE_2__.getElementAbsoluteCoords)(element, elementsMap);\n const cx = (x1 + x2) / 2;\n const cy = (y1 + y2) / 2;\n const origAngle = (_b = (_a = originalElements.get(element.id)) === null || _a === void 0 ? void 0 : _a.angle) !== null && _b !== void 0 ? _b : element.angle;\n const [rotatedCX, rotatedCY] = (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(cx, cy), (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(centerX, centerY), centerAngle + origAngle - element.angle);\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isElbowArrow)(element)) {\n const points = (0,_binding__WEBPACK_IMPORTED_MODULE_6__.getArrowLocalFixedPoints)(element, elementsMap);\n (0,_routing__WEBPACK_IMPORTED_MODULE_11__.mutateElbowArrow)(element, elementsMap, points);\n } else {\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_4__.mutateElement)(element, {\n x: element.x + (rotatedCX - cx),\n y: element.y + (rotatedCY - cy),\n angle: (0,_math__WEBPACK_IMPORTED_MODULE_12__.normalizeRadians)(centerAngle + origAngle)\n }, false);\n }\n\n (0,_binding__WEBPACK_IMPORTED_MODULE_6__.updateBoundElements)(element, elementsMap, {\n simultaneouslyUpdated: elements\n });\n const boundText = (0,_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextElement)(element, elementsMap);\n\n if (boundText && !(0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isArrowElement)(element)) {\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_4__.mutateElement)(boundText, {\n x: boundText.x + (rotatedCX - cx),\n y: boundText.y + (rotatedCY - cy),\n angle: (0,_math__WEBPACK_IMPORTED_MODULE_12__.normalizeRadians)(centerAngle + origAngle)\n }, false);\n }\n });\n (_a = _scene_Scene__WEBPACK_IMPORTED_MODULE_7__[\"default\"].getScene(elements[0])) === null || _a === void 0 ? void 0 : _a.triggerUpdate();\n};\n\nconst getResizeOffsetXY = (transformHandleType, selectedElements, elementsMap, x, y) => {\n const [x1, y1, x2, y2] = selectedElements.length === 1 ? (0,_bounds__WEBPACK_IMPORTED_MODULE_2__.getElementAbsoluteCoords)(selectedElements[0], elementsMap) : (0,_bounds__WEBPACK_IMPORTED_MODULE_2__.getCommonBounds)(selectedElements);\n const cx = (x1 + x2) / 2;\n const cy = (y1 + y2) / 2;\n const angle = selectedElements.length === 1 ? selectedElements[0].angle : 0;\n [x, y] = (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(x, y), (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(cx, cy), -angle);\n\n switch (transformHandleType) {\n case \"n\":\n return (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(x - (x1 + x2) / 2, y - y1), (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(0, 0), angle);\n\n case \"s\":\n return (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(x - (x1 + x2) / 2, y - y2), (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(0, 0), angle);\n\n case \"w\":\n return (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(x - x1, y - (y1 + y2) / 2), (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(0, 0), angle);\n\n case \"e\":\n return (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(x - x2, y - (y1 + y2) / 2), (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(0, 0), angle);\n\n case \"nw\":\n return (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(x - x1, y - y1), (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(0, 0), angle);\n\n case \"ne\":\n return (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(x - x2, y - y1), (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(0, 0), angle);\n\n case \"sw\":\n return (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(x - x1, y - y2), (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(0, 0), angle);\n\n case \"se\":\n return (0,_math__WEBPACK_IMPORTED_MODULE_12__.pointRotateRads)((0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(x - x2, y - y2), (0,_math__WEBPACK_IMPORTED_MODULE_12__.point)(0, 0), angle);\n\n default:\n return [0, 0];\n }\n};\nconst getResizeArrowDirection = (transformHandleType, element) => {\n const [, [px, py]] = element.points;\n const isResizeEnd = transformHandleType === \"nw\" && (px < 0 || py < 0) || transformHandleType === \"ne\" && px >= 0 || transformHandleType === \"sw\" && px <= 0 || transformHandleType === \"se\" && (px > 0 || py > 0);\n return isResizeEnd ? \"end\" : \"origin\";\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./element/resizeElements.ts?");
|
|
2931
2931
|
|
|
2932
2932
|
/***/ }),
|
|
2933
2933
|
|
|
@@ -2949,7 +2949,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
2949
2949
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
2950
2950
|
|
|
2951
2951
|
"use strict";
|
|
2952
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"mutateElbowArrow\": () => (/* binding */ mutateElbowArrow)\n/* harmony export */ });\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../math */ \"../math/index.ts\");\n/* harmony import */ var _binaryheap__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../binaryheap */ \"./binaryheap.ts\");\n/* harmony import */ var _points__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../points */ \"./points.ts\");\n/* harmony import */ var _shapes__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../shapes */ \"./shapes.tsx\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _binding__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./binding */ \"./element/binding.ts\");\n/* harmony import */ var _heading__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./heading */ \"./element/heading.ts\");\n/* harmony import */ var _mutateElement__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _typeChecks__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./typeChecks */ \"./element/typeChecks.ts\");\n\n\n\n\n\n\n\n\n\nconst BASE_PADDING = 40;\nconst mutateElbowArrow = (arrow, elementsMap, nextPoints, offset, otherUpdates, options) => {\n var _a, _b;\n\n const origStartGlobalPoint = (0,_math__WEBPACK_IMPORTED_MODULE_0__.pointTranslate)((0,_math__WEBPACK_IMPORTED_MODULE_0__.pointTranslate)(nextPoints[0], (0,_math__WEBPACK_IMPORTED_MODULE_0__.vector)(arrow.x, arrow.y)), offset);\n const origEndGlobalPoint = (0,_math__WEBPACK_IMPORTED_MODULE_0__.pointTranslate)((0,_math__WEBPACK_IMPORTED_MODULE_0__.pointTranslate)(nextPoints[nextPoints.length - 1], (0,_math__WEBPACK_IMPORTED_MODULE_0__.vector)(arrow.x, arrow.y)), offset);\n const startElement = arrow.startBinding && getBindableElementForId(arrow.startBinding.elementId, elementsMap);\n const endElement = arrow.endBinding && getBindableElementForId(arrow.endBinding.elementId, elementsMap);\n const [hoveredStartElement, hoveredEndElement] = (options === null || options === void 0 ? void 0 : options.isDragging) ? getHoveredElements(origStartGlobalPoint, origEndGlobalPoint, elementsMap) : [startElement, endElement];\n const startGlobalPoint = getGlobalPoint((_a = arrow.startBinding) === null || _a === void 0 ? void 0 : _a.fixedPoint, origStartGlobalPoint, origEndGlobalPoint, elementsMap, startElement, hoveredStartElement, options === null || options === void 0 ? void 0 : options.isDragging);\n const endGlobalPoint = getGlobalPoint((_b = arrow.endBinding) === null || _b === void 0 ? void 0 : _b.fixedPoint, origEndGlobalPoint, origStartGlobalPoint, elementsMap, endElement, hoveredEndElement, options === null || options === void 0 ? void 0 : options.isDragging);\n const startHeading = getBindPointHeading(startGlobalPoint, endGlobalPoint, elementsMap, hoveredStartElement, origStartGlobalPoint);\n const endHeading = getBindPointHeading(endGlobalPoint, startGlobalPoint, elementsMap, hoveredEndElement, origEndGlobalPoint);\n const startPointBounds = [startGlobalPoint[0] - 2, startGlobalPoint[1] - 2, startGlobalPoint[0] + 2, startGlobalPoint[1] + 2];\n const endPointBounds = [endGlobalPoint[0] - 2, endGlobalPoint[1] - 2, endGlobalPoint[0] + 2, endGlobalPoint[1] + 2];\n const startElementBounds = hoveredStartElement ? (0,_shapes__WEBPACK_IMPORTED_MODULE_3__.aabbForElement)(hoveredStartElement, offsetFromHeading(startHeading, arrow.startArrowhead ? _binding__WEBPACK_IMPORTED_MODULE_5__.FIXED_BINDING_DISTANCE * 6 : _binding__WEBPACK_IMPORTED_MODULE_5__.FIXED_BINDING_DISTANCE * 2, 1)) : startPointBounds;\n const endElementBounds = hoveredEndElement ? (0,_shapes__WEBPACK_IMPORTED_MODULE_3__.aabbForElement)(hoveredEndElement, offsetFromHeading(endHeading, arrow.endArrowhead ? _binding__WEBPACK_IMPORTED_MODULE_5__.FIXED_BINDING_DISTANCE * 6 : _binding__WEBPACK_IMPORTED_MODULE_5__.FIXED_BINDING_DISTANCE * 2, 1)) : endPointBounds;\n const boundsOverlap = (0,_shapes__WEBPACK_IMPORTED_MODULE_3__.pointInsideBounds)(startGlobalPoint, hoveredEndElement ? (0,_shapes__WEBPACK_IMPORTED_MODULE_3__.aabbForElement)(hoveredEndElement, offsetFromHeading(endHeading, BASE_PADDING, BASE_PADDING)) : endPointBounds) || (0,_shapes__WEBPACK_IMPORTED_MODULE_3__.pointInsideBounds)(endGlobalPoint, hoveredStartElement ? (0,_shapes__WEBPACK_IMPORTED_MODULE_3__.aabbForElement)(hoveredStartElement, offsetFromHeading(startHeading, BASE_PADDING, BASE_PADDING)) : startPointBounds);\n const commonBounds = commonAABB(boundsOverlap ? [startPointBounds, endPointBounds] : [startElementBounds, endElementBounds]);\n const dynamicAABBs = generateDynamicAABBs(boundsOverlap ? startPointBounds : startElementBounds, boundsOverlap ? endPointBounds : endElementBounds, commonBounds, boundsOverlap ? offsetFromHeading(startHeading, !hoveredStartElement && !hoveredEndElement ? 0 : BASE_PADDING, 0) : offsetFromHeading(startHeading, !hoveredStartElement && !hoveredEndElement ? 0 : BASE_PADDING - (arrow.startArrowhead ? _binding__WEBPACK_IMPORTED_MODULE_5__.FIXED_BINDING_DISTANCE * 6 : _binding__WEBPACK_IMPORTED_MODULE_5__.FIXED_BINDING_DISTANCE * 2), BASE_PADDING), boundsOverlap ? offsetFromHeading(endHeading, !hoveredStartElement && !hoveredEndElement ? 0 : BASE_PADDING, 0) : offsetFromHeading(endHeading, !hoveredStartElement && !hoveredEndElement ? 0 : BASE_PADDING - (arrow.endArrowhead ? _binding__WEBPACK_IMPORTED_MODULE_5__.FIXED_BINDING_DISTANCE * 6 : _binding__WEBPACK_IMPORTED_MODULE_5__.FIXED_BINDING_DISTANCE * 2), BASE_PADDING), boundsOverlap);\n const startDonglePosition = getDonglePosition(dynamicAABBs[0], startHeading, startGlobalPoint);\n const endDonglePosition = getDonglePosition(dynamicAABBs[1], endHeading, endGlobalPoint); // Canculate Grid positions\n\n const grid = calculateGrid(dynamicAABBs, startDonglePosition ? startDonglePosition : startGlobalPoint, startHeading, endDonglePosition ? endDonglePosition : endGlobalPoint, endHeading, commonBounds);\n const startDongle = startDonglePosition && pointToGridNode(startDonglePosition, grid);\n const endDongle = endDonglePosition && pointToGridNode(endDonglePosition, grid); // Do not allow stepping on the true end or true start points\n\n const endNode = pointToGridNode(endGlobalPoint, grid);\n\n if (endNode && hoveredEndElement) {\n endNode.closed = true;\n }\n\n const startNode = pointToGridNode(startGlobalPoint, grid);\n\n if (startNode && arrow.startBinding) {\n startNode.closed = true;\n }\n\n const dongleOverlap = startDongle && endDongle && ((0,_shapes__WEBPACK_IMPORTED_MODULE_3__.pointInsideBounds)(startDongle.pos, dynamicAABBs[1]) || (0,_shapes__WEBPACK_IMPORTED_MODULE_3__.pointInsideBounds)(endDongle.pos, dynamicAABBs[0])); // Create path to end dongle from start dongle\n\n const path = astar(startDongle ? startDongle : startNode, endDongle ? endDongle : endNode, grid, startHeading ? startHeading : _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_RIGHT, endHeading ? endHeading : _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_RIGHT, dongleOverlap ? [] : dynamicAABBs);\n\n if (path) {\n const points = path.map(node => [node.pos[0], node.pos[1]]);\n startDongle && points.unshift(startGlobalPoint);\n endDongle && points.push(endGlobalPoint);\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_7__.mutateElement)(arrow, Object.assign(Object.assign(Object.assign({}, otherUpdates), normalizedArrowElementUpdate(simplifyElbowArrowPoints(points), 0, 0)), {\n angle: 0\n }), options === null || options === void 0 ? void 0 : options.informMutation);\n } else {\n console.error(\"Elbow arrow cannot find a route\");\n }\n};\n\nconst offsetFromHeading = (heading, head, side) => {\n switch (heading) {\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_UP:\n return [head, side, side, side];\n\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_RIGHT:\n return [side, head, side, side];\n\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_DOWN:\n return [side, side, head, side];\n }\n\n return [side, side, side, head];\n};\n/**\n * Routing algorithm based on the A* path search algorithm.\n * @see https://www.geeksforgeeks.org/a-search-algorithm/\n *\n * Binary heap is used to optimize node lookup.\n * See {@link calculateGrid} for the grid calculation details.\n *\n * Additional modifications added due to aesthetic route reasons:\n * 1) Arrow segment direction change is penalized by specific linear constant (bendMultiplier)\n * 2) Arrow segments are not allowed to go \"backwards\", overlapping with the previous segment\n */\n\n\nconst astar = (start, end, grid, startHeading, endHeading, aabbs) => {\n const bendMultiplier = m_dist(start.pos, end.pos);\n const open = new _binaryheap__WEBPACK_IMPORTED_MODULE_1__[\"default\"](node => node.f);\n open.push(start);\n\n while (open.size() > 0) {\n // Grab the lowest f(x) to process next. Heap keeps this sorted for us.\n const current = open.pop();\n\n if (!current || current.closed) {\n // Current is not passable, continue with next element\n continue;\n } // End case -- result has been found, return the traced path.\n\n\n if (current === end) {\n return pathTo(start, current);\n } // Normal case -- move current from open to closed, process each of its neighbors.\n\n\n current.closed = true; // Find all neighbors for the current node.\n\n const neighbors = getNeighbors(current.addr, grid);\n\n for (let i = 0; i < 4; i++) {\n const neighbor = neighbors[i];\n\n if (!neighbor || neighbor.closed) {\n // Not a valid node to process, skip to next neighbor.\n continue;\n } // Intersect\n\n\n const neighborHalfPoint = (0,_math__WEBPACK_IMPORTED_MODULE_0__.pointScaleFromOrigin)(neighbor.pos, current.pos, 0.5);\n\n if ((0,_utils__WEBPACK_IMPORTED_MODULE_4__.isAnyTrue)(...aabbs.map(aabb => (0,_shapes__WEBPACK_IMPORTED_MODULE_3__.pointInsideBounds)(neighborHalfPoint, aabb)))) {\n continue;\n } // The g score is the shortest distance from start to current node.\n // We need to check if the path we have arrived at this neighbor is the shortest one we have seen yet.\n\n\n const neighborHeading = neighborIndexToHeading(i);\n const previousDirection = current.parent ? (0,_heading__WEBPACK_IMPORTED_MODULE_6__.vectorToHeading)((0,_math__WEBPACK_IMPORTED_MODULE_0__.vectorFromPoint)(current.pos, current.parent.pos)) : startHeading; // Do not allow going in reverse\n\n const reverseHeading = (0,_heading__WEBPACK_IMPORTED_MODULE_6__.flipHeading)(previousDirection);\n const neighborIsReverseRoute = (0,_heading__WEBPACK_IMPORTED_MODULE_6__.compareHeading)(reverseHeading, neighborHeading) || gridAddressesEqual(start.addr, neighbor.addr) && (0,_heading__WEBPACK_IMPORTED_MODULE_6__.compareHeading)(neighborHeading, startHeading) || gridAddressesEqual(end.addr, neighbor.addr) && (0,_heading__WEBPACK_IMPORTED_MODULE_6__.compareHeading)(neighborHeading, endHeading);\n\n if (neighborIsReverseRoute) {\n continue;\n }\n\n const directionChange = previousDirection !== neighborHeading;\n const gScore = current.g + m_dist(neighbor.pos, current.pos) + (directionChange ? Math.pow(bendMultiplier, 3) : 0);\n const beenVisited = neighbor.visited;\n\n if (!beenVisited || gScore < neighbor.g) {\n const estBendCount = estimateSegmentCount(neighbor, end, neighborHeading, endHeading); // Found an optimal (so far) path to this node. Take score for node to see how good it is.\n\n neighbor.visited = true;\n neighbor.parent = current;\n neighbor.h = m_dist(end.pos, neighbor.pos) + estBendCount * Math.pow(bendMultiplier, 2);\n neighbor.g = gScore;\n neighbor.f = neighbor.g + neighbor.h;\n\n if (!beenVisited) {\n // Pushing to heap will put it in proper place based on the 'f' value.\n open.push(neighbor);\n } else {\n // Already seen the node, but since it has been rescored we need to reorder it in the heap\n open.rescoreElement(neighbor);\n }\n }\n }\n }\n\n return null;\n};\n\nconst pathTo = (start, node) => {\n let curr = node;\n const path = [];\n\n while (curr.parent) {\n path.unshift(curr);\n curr = curr.parent;\n }\n\n path.unshift(start);\n return path;\n};\n\nconst m_dist = (a, b) => Math.abs(a[0] - b[0]) + Math.abs(a[1] - b[1]);\n/**\n * Create dynamically resizing, always touching\n * bounding boxes having a minimum extent represented\n * by the given static bounds.\n */\n\n\nconst generateDynamicAABBs = (a, b, common, startDifference, endDifference, disableSideHack) => {\n const [startUp, startRight, startDown, startLeft] = startDifference !== null && startDifference !== void 0 ? startDifference : [0, 0, 0, 0];\n const [endUp, endRight, endDown, endLeft] = endDifference !== null && endDifference !== void 0 ? endDifference : [0, 0, 0, 0];\n const first = [a[0] > b[2] ? a[1] > b[3] || a[3] < b[1] ? Math.min((a[0] + b[2]) / 2, a[0] - startLeft) : (a[0] + b[2]) / 2 : a[0] > b[0] ? a[0] - startLeft : common[0] - startLeft, a[1] > b[3] ? a[0] > b[2] || a[2] < b[0] ? Math.min((a[1] + b[3]) / 2, a[1] - startUp) : (a[1] + b[3]) / 2 : a[1] > b[1] ? a[1] - startUp : common[1] - startUp, a[2] < b[0] ? a[1] > b[3] || a[3] < b[1] ? Math.max((a[2] + b[0]) / 2, a[2] + startRight) : (a[2] + b[0]) / 2 : a[2] < b[2] ? a[2] + startRight : common[2] + startRight, a[3] < b[1] ? a[0] > b[2] || a[2] < b[0] ? Math.max((a[3] + b[1]) / 2, a[3] + startDown) : (a[3] + b[1]) / 2 : a[3] < b[3] ? a[3] + startDown : common[3] + startDown];\n const second = [b[0] > a[2] ? b[1] > a[3] || b[3] < a[1] ? Math.min((b[0] + a[2]) / 2, b[0] - endLeft) : (b[0] + a[2]) / 2 : b[0] > a[0] ? b[0] - endLeft : common[0] - endLeft, b[1] > a[3] ? b[0] > a[2] || b[2] < a[0] ? Math.min((b[1] + a[3]) / 2, b[1] - endUp) : (b[1] + a[3]) / 2 : b[1] > a[1] ? b[1] - endUp : common[1] - endUp, b[2] < a[0] ? b[1] > a[3] || b[3] < a[1] ? Math.max((b[2] + a[0]) / 2, b[2] + endRight) : (b[2] + a[0]) / 2 : b[2] < a[2] ? b[2] + endRight : common[2] + endRight, b[3] < a[1] ? b[0] > a[2] || b[2] < a[0] ? Math.max((b[3] + a[1]) / 2, b[3] + endDown) : (b[3] + a[1]) / 2 : b[3] < a[3] ? b[3] + endDown : common[3] + endDown];\n const c = commonAABB([first, second]);\n\n if (!disableSideHack && first[2] - first[0] + second[2] - second[0] > c[2] - c[0] + 0.00000000001 && first[3] - first[1] + second[3] - second[1] > c[3] - c[1] + 0.00000000001) {\n const [endCenterX, endCenterY] = [(second[0] + second[2]) / 2, (second[1] + second[3]) / 2];\n\n if (b[0] > a[2] && a[1] > b[3]) {\n // BOTTOM LEFT\n const cX = first[2] + (second[0] - first[2]) / 2;\n const cY = second[3] + (first[1] - second[3]) / 2;\n\n if ((0,_math__WEBPACK_IMPORTED_MODULE_0__.vectorCross)((0,_math__WEBPACK_IMPORTED_MODULE_0__.vector)(a[2] - endCenterX, a[1] - endCenterY), (0,_math__WEBPACK_IMPORTED_MODULE_0__.vector)(a[0] - endCenterX, a[3] - endCenterY)) > 0) {\n return [[first[0], first[1], cX, first[3]], [cX, second[1], second[2], second[3]]];\n }\n\n return [[first[0], cY, first[2], first[3]], [second[0], second[1], second[2], cY]];\n } else if (a[2] < b[0] && a[3] < b[1]) {\n // TOP LEFT\n const cX = first[2] + (second[0] - first[2]) / 2;\n const cY = first[3] + (second[1] - first[3]) / 2;\n\n if ((0,_math__WEBPACK_IMPORTED_MODULE_0__.vectorCross)((0,_math__WEBPACK_IMPORTED_MODULE_0__.vector)(a[0] - endCenterX, a[1] - endCenterY), (0,_math__WEBPACK_IMPORTED_MODULE_0__.vector)(a[2] - endCenterX, a[3] - endCenterY)) > 0) {\n return [[first[0], first[1], first[2], cY], [second[0], cY, second[2], second[3]]];\n }\n\n return [[first[0], first[1], cX, first[3]], [cX, second[1], second[2], second[3]]];\n } else if (a[0] > b[2] && a[3] < b[1]) {\n // TOP RIGHT\n const cX = second[2] + (first[0] - second[2]) / 2;\n const cY = first[3] + (second[1] - first[3]) / 2;\n\n if ((0,_math__WEBPACK_IMPORTED_MODULE_0__.vectorCross)((0,_math__WEBPACK_IMPORTED_MODULE_0__.vector)(a[2] - endCenterX, a[1] - endCenterY), (0,_math__WEBPACK_IMPORTED_MODULE_0__.vector)(a[0] - endCenterX, a[3] - endCenterY)) > 0) {\n return [[cX, first[1], first[2], first[3]], [second[0], second[1], cX, second[3]]];\n }\n\n return [[first[0], first[1], first[2], cY], [second[0], cY, second[2], second[3]]];\n } else if (a[0] > b[2] && a[1] > b[3]) {\n // BOTTOM RIGHT\n const cX = second[2] + (first[0] - second[2]) / 2;\n const cY = second[3] + (first[1] - second[3]) / 2;\n\n if ((0,_math__WEBPACK_IMPORTED_MODULE_0__.vectorCross)((0,_math__WEBPACK_IMPORTED_MODULE_0__.vector)(a[0] - endCenterX, a[1] - endCenterY), (0,_math__WEBPACK_IMPORTED_MODULE_0__.vector)(a[2] - endCenterX, a[3] - endCenterY)) > 0) {\n return [[cX, first[1], first[2], first[3]], [second[0], second[1], cX, second[3]]];\n }\n\n return [[first[0], cY, first[2], first[3]], [second[0], second[1], second[2], cY]];\n }\n }\n\n return [first, second];\n};\n/**\n * Calculates the grid which is used as nodes at\n * the grid line intersections by the A* algorithm.\n *\n * NOTE: This is not a uniform grid. It is built at\n * various intersections of bounding boxes.\n */\n\n\nconst calculateGrid = (aabbs, start, startHeading, end, endHeading, common) => {\n const horizontal = new Set();\n const vertical = new Set();\n\n if (startHeading === _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_LEFT || startHeading === _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_RIGHT) {\n vertical.add(start[1]);\n } else {\n horizontal.add(start[0]);\n }\n\n if (endHeading === _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_LEFT || endHeading === _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_RIGHT) {\n vertical.add(end[1]);\n } else {\n horizontal.add(end[0]);\n }\n\n aabbs.forEach(aabb => {\n horizontal.add(aabb[0]);\n horizontal.add(aabb[2]);\n vertical.add(aabb[1]);\n vertical.add(aabb[3]);\n });\n horizontal.add(common[0]);\n horizontal.add(common[2]);\n vertical.add(common[1]);\n vertical.add(common[3]);\n\n const _vertical = Array.from(vertical).sort((a, b) => a - b);\n\n const _horizontal = Array.from(horizontal).sort((a, b) => a - b);\n\n return {\n row: _vertical.length,\n col: _horizontal.length,\n data: _vertical.flatMap((y, row) => _horizontal.map((x, col) => ({\n f: 0,\n g: 0,\n h: 0,\n closed: false,\n visited: false,\n parent: null,\n addr: [col, row],\n pos: [x, y]\n })))\n };\n};\n\nconst getDonglePosition = (bounds, heading, p) => {\n switch (heading) {\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_UP:\n return (0,_math__WEBPACK_IMPORTED_MODULE_0__.point)(p[0], bounds[1]);\n\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_RIGHT:\n return (0,_math__WEBPACK_IMPORTED_MODULE_0__.point)(bounds[2], p[1]);\n\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_DOWN:\n return (0,_math__WEBPACK_IMPORTED_MODULE_0__.point)(p[0], bounds[3]);\n }\n\n return (0,_math__WEBPACK_IMPORTED_MODULE_0__.point)(bounds[0], p[1]);\n};\n\nconst estimateSegmentCount = (start, end, startHeading, endHeading) => {\n if (endHeading === _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_RIGHT) {\n switch (startHeading) {\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_RIGHT:\n {\n if (start.pos[0] >= end.pos[0]) {\n return 4;\n }\n\n if (start.pos[1] === end.pos[1]) {\n return 0;\n }\n\n return 2;\n }\n\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_UP:\n if (start.pos[1] > end.pos[1] && start.pos[0] < end.pos[0]) {\n return 1;\n }\n\n return 3;\n\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_DOWN:\n if (start.pos[1] < end.pos[1] && start.pos[0] < end.pos[0]) {\n return 1;\n }\n\n return 3;\n\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_LEFT:\n if (start.pos[1] === end.pos[1]) {\n return 4;\n }\n\n return 2;\n }\n } else if (endHeading === _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_LEFT) {\n switch (startHeading) {\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_RIGHT:\n if (start.pos[1] === end.pos[1]) {\n return 4;\n }\n\n return 2;\n\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_UP:\n if (start.pos[1] > end.pos[1] && start.pos[0] > end.pos[0]) {\n return 1;\n }\n\n return 3;\n\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_DOWN:\n if (start.pos[1] < end.pos[1] && start.pos[0] > end.pos[0]) {\n return 1;\n }\n\n return 3;\n\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_LEFT:\n if (start.pos[0] <= end.pos[0]) {\n return 4;\n }\n\n if (start.pos[1] === end.pos[1]) {\n return 0;\n }\n\n return 2;\n }\n } else if (endHeading === _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_UP) {\n switch (startHeading) {\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_RIGHT:\n if (start.pos[1] > end.pos[1] && start.pos[0] < end.pos[0]) {\n return 1;\n }\n\n return 3;\n\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_UP:\n if (start.pos[1] >= end.pos[1]) {\n return 4;\n }\n\n if (start.pos[0] === end.pos[0]) {\n return 0;\n }\n\n return 2;\n\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_DOWN:\n if (start.pos[0] === end.pos[0]) {\n return 4;\n }\n\n return 2;\n\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_LEFT:\n if (start.pos[1] > end.pos[1] && start.pos[0] > end.pos[0]) {\n return 1;\n }\n\n return 3;\n }\n } else if (endHeading === _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_DOWN) {\n switch (startHeading) {\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_RIGHT:\n if (start.pos[1] < end.pos[1] && start.pos[0] < end.pos[0]) {\n return 1;\n }\n\n return 3;\n\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_UP:\n if (start.pos[0] === end.pos[0]) {\n return 4;\n }\n\n return 2;\n\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_DOWN:\n if (start.pos[1] <= end.pos[1]) {\n return 4;\n }\n\n if (start.pos[0] === end.pos[0]) {\n return 0;\n }\n\n return 2;\n\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_LEFT:\n if (start.pos[1] < end.pos[1] && start.pos[0] > end.pos[0]) {\n return 1;\n }\n\n return 3;\n }\n }\n\n return 0;\n};\n/**\n * Get neighboring points for a gived grid address\n */\n\n\nconst getNeighbors = ([col, row], grid) => [gridNodeFromAddr([col, row - 1], grid), gridNodeFromAddr([col + 1, row], grid), gridNodeFromAddr([col, row + 1], grid), gridNodeFromAddr([col - 1, row], grid)];\n\nconst gridNodeFromAddr = ([col, row], grid) => {\n var _a;\n\n if (col < 0 || col >= grid.col || row < 0 || row >= grid.row) {\n return null;\n }\n\n return (_a = grid.data[row * grid.col + col]) !== null && _a !== void 0 ? _a : null;\n};\n/**\n * Get node for global point on canvas (if exists)\n */\n\n\nconst pointToGridNode = (point, grid) => {\n for (let col = 0; col < grid.col; col++) {\n for (let row = 0; row < grid.row; row++) {\n const candidate = gridNodeFromAddr([col, row], grid);\n\n if (candidate && point[0] === candidate.pos[0] && point[1] === candidate.pos[1]) {\n return candidate;\n }\n }\n }\n\n return null;\n};\n\nconst commonAABB = aabbs => [Math.min(...aabbs.map(aabb => aabb[0])), Math.min(...aabbs.map(aabb => aabb[1])), Math.max(...aabbs.map(aabb => aabb[2])), Math.max(...aabbs.map(aabb => aabb[3]))]; /// #region Utils\n\n\nconst getBindableElementForId = (id, elementsMap) => {\n const element = elementsMap.get(id);\n\n if (element && (0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isBindableElement)(element)) {\n return element;\n }\n\n return null;\n};\n\nconst normalizedArrowElementUpdate = (global, externalOffsetX, externalOffsetY) => {\n const offsetX = global[0][0];\n const offsetY = global[0][1];\n const points = global.map(p => (0,_math__WEBPACK_IMPORTED_MODULE_0__.pointTranslate)(p, (0,_math__WEBPACK_IMPORTED_MODULE_0__.vectorScale)((0,_math__WEBPACK_IMPORTED_MODULE_0__.vectorFromPoint)(global[0]), -1)));\n return Object.assign({\n points,\n x: offsetX + (externalOffsetX !== null && externalOffsetX !== void 0 ? externalOffsetX : 0),\n y: offsetY + (externalOffsetY !== null && externalOffsetY !== void 0 ? externalOffsetY : 0)\n }, (0,_points__WEBPACK_IMPORTED_MODULE_2__.getSizeFromPoints)(points));\n}; /// If last and current segments have the same heading, skip the middle point\n\n\nconst simplifyElbowArrowPoints = points => {\n var _a, _b;\n\n return points.slice(2).reduce((result, p) => (0,_heading__WEBPACK_IMPORTED_MODULE_6__.compareHeading)((0,_heading__WEBPACK_IMPORTED_MODULE_6__.vectorToHeading)((0,_math__WEBPACK_IMPORTED_MODULE_0__.vectorFromPoint)(result[result.length - 1], result[result.length - 2])), (0,_heading__WEBPACK_IMPORTED_MODULE_6__.vectorToHeading)((0,_math__WEBPACK_IMPORTED_MODULE_0__.vectorFromPoint)(p, result[result.length - 1]))) ? [...result.slice(0, -1), p] : [...result, p], [(_a = points[0]) !== null && _a !== void 0 ? _a : [0, 0], (_b = points[1]) !== null && _b !== void 0 ? _b : [1, 0]]);\n};\n\nconst neighborIndexToHeading = idx => {\n switch (idx) {\n case 0:\n return _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_UP;\n\n case 1:\n return _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_RIGHT;\n\n case 2:\n return _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_DOWN;\n }\n\n return _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_LEFT;\n};\n\nconst getGlobalPoint = (fixedPointRatio, initialPoint, otherPoint, elementsMap, boundElement, hoveredElement, isDragging) => {\n if (isDragging) {\n if (hoveredElement) {\n const snapPoint = getSnapPoint(initialPoint, otherPoint, hoveredElement, elementsMap);\n return (0,_binding__WEBPACK_IMPORTED_MODULE_5__.snapToMid)(hoveredElement, snapPoint);\n }\n\n return initialPoint;\n }\n\n if (boundElement) {\n const fixedGlobalPoint = (0,_binding__WEBPACK_IMPORTED_MODULE_5__.getGlobalFixedPointForBindableElement)(fixedPointRatio || [0, 0], boundElement); // NOTE: Resize scales the binding position point too, so we need to update it\n\n return Math.abs((0,_binding__WEBPACK_IMPORTED_MODULE_5__.distanceToBindableElement)(boundElement, fixedGlobalPoint, elementsMap) - _binding__WEBPACK_IMPORTED_MODULE_5__.FIXED_BINDING_DISTANCE) > 0.01 ? getSnapPoint(initialPoint, otherPoint, boundElement, elementsMap) : fixedGlobalPoint;\n }\n\n return initialPoint;\n};\n\nconst getSnapPoint = (p, otherPoint, element, elementsMap) => (0,_binding__WEBPACK_IMPORTED_MODULE_5__.bindPointToSnapToElementOutline)((0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isRectanguloidElement)(element) ? (0,_binding__WEBPACK_IMPORTED_MODULE_5__.avoidRectangularCorner)(element, p) : p, otherPoint, element, elementsMap);\n\nconst getBindPointHeading = (p, otherPoint, elementsMap, hoveredElement, origPoint) => (0,_binding__WEBPACK_IMPORTED_MODULE_5__.getHeadingForElbowArrowSnap)(p, otherPoint, hoveredElement, hoveredElement && (0,_shapes__WEBPACK_IMPORTED_MODULE_3__.aabbForElement)(hoveredElement, Array(4).fill((0,_binding__WEBPACK_IMPORTED_MODULE_5__.distanceToBindableElement)(hoveredElement, p, elementsMap))), elementsMap, origPoint);\n\nconst getHoveredElements = (origStartGlobalPoint, origEndGlobalPoint, elementsMap) => {\n // TODO: Might be a performance bottleneck and the Map type\n // remembers the insertion order anyway...\n const nonDeletedSceneElementsMap = (0,_utils__WEBPACK_IMPORTED_MODULE_4__.toBrandedType)(new Map([...elementsMap].filter(el => !el[1].isDeleted)));\n const elements = Array.from(elementsMap.values());\n return [(0,_binding__WEBPACK_IMPORTED_MODULE_5__.getHoveredElementForBinding)((0,_utils__WEBPACK_IMPORTED_MODULE_4__.tupleToCoors)(origStartGlobalPoint), elements, nonDeletedSceneElementsMap, true), (0,_binding__WEBPACK_IMPORTED_MODULE_5__.getHoveredElementForBinding)((0,_utils__WEBPACK_IMPORTED_MODULE_4__.tupleToCoors)(origEndGlobalPoint), elements, nonDeletedSceneElementsMap, true)];\n};\n\nconst gridAddressesEqual = (a, b) => a[0] === b[0] && a[1] === b[1];\n\n//# sourceURL=webpack://ExcalidrawLib/./element/routing.ts?");
|
|
2952
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"mutateElbowArrow\": () => (/* binding */ mutateElbowArrow),\n/* harmony export */ \"updateElbowArrow\": () => (/* binding */ updateElbowArrow)\n/* harmony export */ });\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../math */ \"../math/index.ts\");\n/* harmony import */ var _binaryheap__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../binaryheap */ \"./binaryheap.ts\");\n/* harmony import */ var _points__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../points */ \"./points.ts\");\n/* harmony import */ var _shapes__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../shapes */ \"./shapes.tsx\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _binding__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./binding */ \"./element/binding.ts\");\n/* harmony import */ var _heading__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./heading */ \"./element/heading.ts\");\n/* harmony import */ var _mutateElement__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _typeChecks__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./typeChecks */ \"./element/typeChecks.ts\");\n\n\n\n\n\n\n\n\n\nconst BASE_PADDING = 40;\nconst mutateElbowArrow = (arrow, elementsMap, nextPoints, offset, otherUpdates, options) => {\n const update = updateElbowArrow(arrow, elementsMap, nextPoints, offset, options);\n\n if (update) {\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_7__.mutateElement)(arrow, Object.assign(Object.assign(Object.assign({}, otherUpdates), update), {\n angle: 0\n }), options === null || options === void 0 ? void 0 : options.informMutation);\n } else {\n console.error(\"Elbow arrow cannot find a route\");\n }\n};\nconst updateElbowArrow = (arrow, elementsMap, nextPoints, offset, options) => {\n var _a, _b;\n\n const origStartGlobalPoint = (0,_math__WEBPACK_IMPORTED_MODULE_0__.pointTranslate)((0,_math__WEBPACK_IMPORTED_MODULE_0__.pointTranslate)(nextPoints[0], (0,_math__WEBPACK_IMPORTED_MODULE_0__.vector)(arrow.x, arrow.y)), offset);\n const origEndGlobalPoint = (0,_math__WEBPACK_IMPORTED_MODULE_0__.pointTranslate)((0,_math__WEBPACK_IMPORTED_MODULE_0__.pointTranslate)(nextPoints[nextPoints.length - 1], (0,_math__WEBPACK_IMPORTED_MODULE_0__.vector)(arrow.x, arrow.y)), offset);\n const startElement = arrow.startBinding && getBindableElementForId(arrow.startBinding.elementId, elementsMap);\n const endElement = arrow.endBinding && getBindableElementForId(arrow.endBinding.elementId, elementsMap);\n const [hoveredStartElement, hoveredEndElement] = (options === null || options === void 0 ? void 0 : options.isDragging) ? getHoveredElements(origStartGlobalPoint, origEndGlobalPoint, elementsMap) : [startElement, endElement];\n const startGlobalPoint = getGlobalPoint((_a = arrow.startBinding) === null || _a === void 0 ? void 0 : _a.fixedPoint, origStartGlobalPoint, origEndGlobalPoint, elementsMap, startElement, hoveredStartElement, options === null || options === void 0 ? void 0 : options.isDragging);\n const endGlobalPoint = getGlobalPoint((_b = arrow.endBinding) === null || _b === void 0 ? void 0 : _b.fixedPoint, origEndGlobalPoint, origStartGlobalPoint, elementsMap, endElement, hoveredEndElement, options === null || options === void 0 ? void 0 : options.isDragging);\n const startHeading = getBindPointHeading(startGlobalPoint, endGlobalPoint, elementsMap, hoveredStartElement, origStartGlobalPoint);\n const endHeading = getBindPointHeading(endGlobalPoint, startGlobalPoint, elementsMap, hoveredEndElement, origEndGlobalPoint);\n const startPointBounds = [startGlobalPoint[0] - 2, startGlobalPoint[1] - 2, startGlobalPoint[0] + 2, startGlobalPoint[1] + 2];\n const endPointBounds = [endGlobalPoint[0] - 2, endGlobalPoint[1] - 2, endGlobalPoint[0] + 2, endGlobalPoint[1] + 2];\n const startElementBounds = hoveredStartElement ? (0,_shapes__WEBPACK_IMPORTED_MODULE_3__.aabbForElement)(hoveredStartElement, offsetFromHeading(startHeading, arrow.startArrowhead ? _binding__WEBPACK_IMPORTED_MODULE_5__.FIXED_BINDING_DISTANCE * 6 : _binding__WEBPACK_IMPORTED_MODULE_5__.FIXED_BINDING_DISTANCE * 2, 1)) : startPointBounds;\n const endElementBounds = hoveredEndElement ? (0,_shapes__WEBPACK_IMPORTED_MODULE_3__.aabbForElement)(hoveredEndElement, offsetFromHeading(endHeading, arrow.endArrowhead ? _binding__WEBPACK_IMPORTED_MODULE_5__.FIXED_BINDING_DISTANCE * 6 : _binding__WEBPACK_IMPORTED_MODULE_5__.FIXED_BINDING_DISTANCE * 2, 1)) : endPointBounds;\n const boundsOverlap = (0,_shapes__WEBPACK_IMPORTED_MODULE_3__.pointInsideBounds)(startGlobalPoint, hoveredEndElement ? (0,_shapes__WEBPACK_IMPORTED_MODULE_3__.aabbForElement)(hoveredEndElement, offsetFromHeading(endHeading, BASE_PADDING, BASE_PADDING)) : endPointBounds) || (0,_shapes__WEBPACK_IMPORTED_MODULE_3__.pointInsideBounds)(endGlobalPoint, hoveredStartElement ? (0,_shapes__WEBPACK_IMPORTED_MODULE_3__.aabbForElement)(hoveredStartElement, offsetFromHeading(startHeading, BASE_PADDING, BASE_PADDING)) : startPointBounds);\n const commonBounds = commonAABB(boundsOverlap ? [startPointBounds, endPointBounds] : [startElementBounds, endElementBounds]);\n const dynamicAABBs = generateDynamicAABBs(boundsOverlap ? startPointBounds : startElementBounds, boundsOverlap ? endPointBounds : endElementBounds, commonBounds, boundsOverlap ? offsetFromHeading(startHeading, !hoveredStartElement && !hoveredEndElement ? 0 : BASE_PADDING, 0) : offsetFromHeading(startHeading, !hoveredStartElement && !hoveredEndElement ? 0 : BASE_PADDING - (arrow.startArrowhead ? _binding__WEBPACK_IMPORTED_MODULE_5__.FIXED_BINDING_DISTANCE * 6 : _binding__WEBPACK_IMPORTED_MODULE_5__.FIXED_BINDING_DISTANCE * 2), BASE_PADDING), boundsOverlap ? offsetFromHeading(endHeading, !hoveredStartElement && !hoveredEndElement ? 0 : BASE_PADDING, 0) : offsetFromHeading(endHeading, !hoveredStartElement && !hoveredEndElement ? 0 : BASE_PADDING - (arrow.endArrowhead ? _binding__WEBPACK_IMPORTED_MODULE_5__.FIXED_BINDING_DISTANCE * 6 : _binding__WEBPACK_IMPORTED_MODULE_5__.FIXED_BINDING_DISTANCE * 2), BASE_PADDING), boundsOverlap, hoveredStartElement && (0,_shapes__WEBPACK_IMPORTED_MODULE_3__.aabbForElement)(hoveredStartElement), hoveredEndElement && (0,_shapes__WEBPACK_IMPORTED_MODULE_3__.aabbForElement)(hoveredEndElement));\n const startDonglePosition = getDonglePosition(dynamicAABBs[0], startHeading, startGlobalPoint);\n const endDonglePosition = getDonglePosition(dynamicAABBs[1], endHeading, endGlobalPoint); // Canculate Grid positions\n\n const grid = calculateGrid(dynamicAABBs, startDonglePosition ? startDonglePosition : startGlobalPoint, startHeading, endDonglePosition ? endDonglePosition : endGlobalPoint, endHeading, commonBounds);\n const startDongle = startDonglePosition && pointToGridNode(startDonglePosition, grid);\n const endDongle = endDonglePosition && pointToGridNode(endDonglePosition, grid); // Do not allow stepping on the true end or true start points\n\n const endNode = pointToGridNode(endGlobalPoint, grid);\n\n if (endNode && hoveredEndElement) {\n endNode.closed = true;\n }\n\n const startNode = pointToGridNode(startGlobalPoint, grid);\n\n if (startNode && arrow.startBinding) {\n startNode.closed = true;\n }\n\n const dongleOverlap = startDongle && endDongle && ((0,_shapes__WEBPACK_IMPORTED_MODULE_3__.pointInsideBounds)(startDongle.pos, dynamicAABBs[1]) || (0,_shapes__WEBPACK_IMPORTED_MODULE_3__.pointInsideBounds)(endDongle.pos, dynamicAABBs[0])); // Create path to end dongle from start dongle\n\n const path = astar(startDongle ? startDongle : startNode, endDongle ? endDongle : endNode, grid, startHeading ? startHeading : _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_RIGHT, endHeading ? endHeading : _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_RIGHT, dongleOverlap ? [] : dynamicAABBs);\n\n if (path) {\n const points = path.map(node => [node.pos[0], node.pos[1]]);\n startDongle && points.unshift(startGlobalPoint);\n endDongle && points.push(endGlobalPoint);\n return normalizedArrowElementUpdate(simplifyElbowArrowPoints(points), 0, 0);\n }\n\n return null;\n};\n\nconst offsetFromHeading = (heading, head, side) => {\n switch (heading) {\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_UP:\n return [head, side, side, side];\n\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_RIGHT:\n return [side, head, side, side];\n\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_DOWN:\n return [side, side, head, side];\n }\n\n return [side, side, side, head];\n};\n/**\n * Routing algorithm based on the A* path search algorithm.\n * @see https://www.geeksforgeeks.org/a-search-algorithm/\n *\n * Binary heap is used to optimize node lookup.\n * See {@link calculateGrid} for the grid calculation details.\n *\n * Additional modifications added due to aesthetic route reasons:\n * 1) Arrow segment direction change is penalized by specific linear constant (bendMultiplier)\n * 2) Arrow segments are not allowed to go \"backwards\", overlapping with the previous segment\n */\n\n\nconst astar = (start, end, grid, startHeading, endHeading, aabbs) => {\n const bendMultiplier = m_dist(start.pos, end.pos);\n const open = new _binaryheap__WEBPACK_IMPORTED_MODULE_1__[\"default\"](node => node.f);\n open.push(start);\n\n while (open.size() > 0) {\n // Grab the lowest f(x) to process next. Heap keeps this sorted for us.\n const current = open.pop();\n\n if (!current || current.closed) {\n // Current is not passable, continue with next element\n continue;\n } // End case -- result has been found, return the traced path.\n\n\n if (current === end) {\n return pathTo(start, current);\n } // Normal case -- move current from open to closed, process each of its neighbors.\n\n\n current.closed = true; // Find all neighbors for the current node.\n\n const neighbors = getNeighbors(current.addr, grid);\n\n for (let i = 0; i < 4; i++) {\n const neighbor = neighbors[i];\n\n if (!neighbor || neighbor.closed) {\n // Not a valid node to process, skip to next neighbor.\n continue;\n } // Intersect\n\n\n const neighborHalfPoint = (0,_math__WEBPACK_IMPORTED_MODULE_0__.pointScaleFromOrigin)(neighbor.pos, current.pos, 0.5);\n\n if ((0,_utils__WEBPACK_IMPORTED_MODULE_4__.isAnyTrue)(...aabbs.map(aabb => (0,_shapes__WEBPACK_IMPORTED_MODULE_3__.pointInsideBounds)(neighborHalfPoint, aabb)))) {\n continue;\n } // The g score is the shortest distance from start to current node.\n // We need to check if the path we have arrived at this neighbor is the shortest one we have seen yet.\n\n\n const neighborHeading = neighborIndexToHeading(i);\n const previousDirection = current.parent ? (0,_heading__WEBPACK_IMPORTED_MODULE_6__.vectorToHeading)((0,_math__WEBPACK_IMPORTED_MODULE_0__.vectorFromPoint)(current.pos, current.parent.pos)) : startHeading; // Do not allow going in reverse\n\n const reverseHeading = (0,_heading__WEBPACK_IMPORTED_MODULE_6__.flipHeading)(previousDirection);\n const neighborIsReverseRoute = (0,_heading__WEBPACK_IMPORTED_MODULE_6__.compareHeading)(reverseHeading, neighborHeading) || gridAddressesEqual(start.addr, neighbor.addr) && (0,_heading__WEBPACK_IMPORTED_MODULE_6__.compareHeading)(neighborHeading, startHeading) || gridAddressesEqual(end.addr, neighbor.addr) && (0,_heading__WEBPACK_IMPORTED_MODULE_6__.compareHeading)(neighborHeading, endHeading);\n\n if (neighborIsReverseRoute) {\n continue;\n }\n\n const directionChange = previousDirection !== neighborHeading;\n const gScore = current.g + m_dist(neighbor.pos, current.pos) + (directionChange ? Math.pow(bendMultiplier, 3) : 0);\n const beenVisited = neighbor.visited;\n\n if (!beenVisited || gScore < neighbor.g) {\n const estBendCount = estimateSegmentCount(neighbor, end, neighborHeading, endHeading); // Found an optimal (so far) path to this node. Take score for node to see how good it is.\n\n neighbor.visited = true;\n neighbor.parent = current;\n neighbor.h = m_dist(end.pos, neighbor.pos) + estBendCount * Math.pow(bendMultiplier, 2);\n neighbor.g = gScore;\n neighbor.f = neighbor.g + neighbor.h;\n\n if (!beenVisited) {\n // Pushing to heap will put it in proper place based on the 'f' value.\n open.push(neighbor);\n } else {\n // Already seen the node, but since it has been rescored we need to reorder it in the heap\n open.rescoreElement(neighbor);\n }\n }\n }\n }\n\n return null;\n};\n\nconst pathTo = (start, node) => {\n let curr = node;\n const path = [];\n\n while (curr.parent) {\n path.unshift(curr);\n curr = curr.parent;\n }\n\n path.unshift(start);\n return path;\n};\n\nconst m_dist = (a, b) => Math.abs(a[0] - b[0]) + Math.abs(a[1] - b[1]);\n/**\n * Create dynamically resizing, always touching\n * bounding boxes having a minimum extent represented\n * by the given static bounds.\n */\n\n\nconst generateDynamicAABBs = (a, b, common, startDifference, endDifference, disableSideHack, startElementBounds, endElementBounds) => {\n const startEl = startElementBounds !== null && startElementBounds !== void 0 ? startElementBounds : a;\n const endEl = endElementBounds !== null && endElementBounds !== void 0 ? endElementBounds : b;\n const [startUp, startRight, startDown, startLeft] = startDifference !== null && startDifference !== void 0 ? startDifference : [0, 0, 0, 0];\n const [endUp, endRight, endDown, endLeft] = endDifference !== null && endDifference !== void 0 ? endDifference : [0, 0, 0, 0];\n const first = [a[0] > b[2] ? a[1] > b[3] || a[3] < b[1] ? Math.min((startEl[0] + endEl[2]) / 2, a[0] - startLeft) : (startEl[0] + endEl[2]) / 2 : a[0] > b[0] ? a[0] - startLeft : common[0] - startLeft, a[1] > b[3] ? a[0] > b[2] || a[2] < b[0] ? Math.min((startEl[1] + endEl[3]) / 2, a[1] - startUp) : (startEl[1] + endEl[3]) / 2 : a[1] > b[1] ? a[1] - startUp : common[1] - startUp, a[2] < b[0] ? a[1] > b[3] || a[3] < b[1] ? Math.max((startEl[2] + endEl[0]) / 2, a[2] + startRight) : (startEl[2] + endEl[0]) / 2 : a[2] < b[2] ? a[2] + startRight : common[2] + startRight, a[3] < b[1] ? a[0] > b[2] || a[2] < b[0] ? Math.max((startEl[3] + endEl[1]) / 2, a[3] + startDown) : (startEl[3] + endEl[1]) / 2 : a[3] < b[3] ? a[3] + startDown : common[3] + startDown];\n const second = [b[0] > a[2] ? b[1] > a[3] || b[3] < a[1] ? Math.min((endEl[0] + startEl[2]) / 2, b[0] - endLeft) : (endEl[0] + startEl[2]) / 2 : b[0] > a[0] ? b[0] - endLeft : common[0] - endLeft, b[1] > a[3] ? b[0] > a[2] || b[2] < a[0] ? Math.min((endEl[1] + startEl[3]) / 2, b[1] - endUp) : (endEl[1] + startEl[3]) / 2 : b[1] > a[1] ? b[1] - endUp : common[1] - endUp, b[2] < a[0] ? b[1] > a[3] || b[3] < a[1] ? Math.max((endEl[2] + startEl[0]) / 2, b[2] + endRight) : (endEl[2] + startEl[0]) / 2 : b[2] < a[2] ? b[2] + endRight : common[2] + endRight, b[3] < a[1] ? b[0] > a[2] || b[2] < a[0] ? Math.max((endEl[3] + startEl[1]) / 2, b[3] + endDown) : (endEl[3] + startEl[1]) / 2 : b[3] < a[3] ? b[3] + endDown : common[3] + endDown];\n const c = commonAABB([first, second]);\n\n if (!disableSideHack && first[2] - first[0] + second[2] - second[0] > c[2] - c[0] + 0.00000000001 && first[3] - first[1] + second[3] - second[1] > c[3] - c[1] + 0.00000000001) {\n const [endCenterX, endCenterY] = [(second[0] + second[2]) / 2, (second[1] + second[3]) / 2];\n\n if (b[0] > a[2] && a[1] > b[3]) {\n // BOTTOM LEFT\n const cX = first[2] + (second[0] - first[2]) / 2;\n const cY = second[3] + (first[1] - second[3]) / 2;\n\n if ((0,_math__WEBPACK_IMPORTED_MODULE_0__.vectorCross)((0,_math__WEBPACK_IMPORTED_MODULE_0__.vector)(a[2] - endCenterX, a[1] - endCenterY), (0,_math__WEBPACK_IMPORTED_MODULE_0__.vector)(a[0] - endCenterX, a[3] - endCenterY)) > 0) {\n return [[first[0], first[1], cX, first[3]], [cX, second[1], second[2], second[3]]];\n }\n\n return [[first[0], cY, first[2], first[3]], [second[0], second[1], second[2], cY]];\n } else if (a[2] < b[0] && a[3] < b[1]) {\n // TOP LEFT\n const cX = first[2] + (second[0] - first[2]) / 2;\n const cY = first[3] + (second[1] - first[3]) / 2;\n\n if ((0,_math__WEBPACK_IMPORTED_MODULE_0__.vectorCross)((0,_math__WEBPACK_IMPORTED_MODULE_0__.vector)(a[0] - endCenterX, a[1] - endCenterY), (0,_math__WEBPACK_IMPORTED_MODULE_0__.vector)(a[2] - endCenterX, a[3] - endCenterY)) > 0) {\n return [[first[0], first[1], first[2], cY], [second[0], cY, second[2], second[3]]];\n }\n\n return [[first[0], first[1], cX, first[3]], [cX, second[1], second[2], second[3]]];\n } else if (a[0] > b[2] && a[3] < b[1]) {\n // TOP RIGHT\n const cX = second[2] + (first[0] - second[2]) / 2;\n const cY = first[3] + (second[1] - first[3]) / 2;\n\n if ((0,_math__WEBPACK_IMPORTED_MODULE_0__.vectorCross)((0,_math__WEBPACK_IMPORTED_MODULE_0__.vector)(a[2] - endCenterX, a[1] - endCenterY), (0,_math__WEBPACK_IMPORTED_MODULE_0__.vector)(a[0] - endCenterX, a[3] - endCenterY)) > 0) {\n return [[cX, first[1], first[2], first[3]], [second[0], second[1], cX, second[3]]];\n }\n\n return [[first[0], first[1], first[2], cY], [second[0], cY, second[2], second[3]]];\n } else if (a[0] > b[2] && a[1] > b[3]) {\n // BOTTOM RIGHT\n const cX = second[2] + (first[0] - second[2]) / 2;\n const cY = second[3] + (first[1] - second[3]) / 2;\n\n if ((0,_math__WEBPACK_IMPORTED_MODULE_0__.vectorCross)((0,_math__WEBPACK_IMPORTED_MODULE_0__.vector)(a[0] - endCenterX, a[1] - endCenterY), (0,_math__WEBPACK_IMPORTED_MODULE_0__.vector)(a[2] - endCenterX, a[3] - endCenterY)) > 0) {\n return [[cX, first[1], first[2], first[3]], [second[0], second[1], cX, second[3]]];\n }\n\n return [[first[0], cY, first[2], first[3]], [second[0], second[1], second[2], cY]];\n }\n }\n\n return [first, second];\n};\n/**\n * Calculates the grid which is used as nodes at\n * the grid line intersections by the A* algorithm.\n *\n * NOTE: This is not a uniform grid. It is built at\n * various intersections of bounding boxes.\n */\n\n\nconst calculateGrid = (aabbs, start, startHeading, end, endHeading, common) => {\n const horizontal = new Set();\n const vertical = new Set();\n\n if (startHeading === _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_LEFT || startHeading === _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_RIGHT) {\n vertical.add(start[1]);\n } else {\n horizontal.add(start[0]);\n }\n\n if (endHeading === _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_LEFT || endHeading === _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_RIGHT) {\n vertical.add(end[1]);\n } else {\n horizontal.add(end[0]);\n }\n\n aabbs.forEach(aabb => {\n horizontal.add(aabb[0]);\n horizontal.add(aabb[2]);\n vertical.add(aabb[1]);\n vertical.add(aabb[3]);\n });\n horizontal.add(common[0]);\n horizontal.add(common[2]);\n vertical.add(common[1]);\n vertical.add(common[3]);\n\n const _vertical = Array.from(vertical).sort((a, b) => a - b);\n\n const _horizontal = Array.from(horizontal).sort((a, b) => a - b);\n\n return {\n row: _vertical.length,\n col: _horizontal.length,\n data: _vertical.flatMap((y, row) => _horizontal.map((x, col) => ({\n f: 0,\n g: 0,\n h: 0,\n closed: false,\n visited: false,\n parent: null,\n addr: [col, row],\n pos: [x, y]\n })))\n };\n};\n\nconst getDonglePosition = (bounds, heading, p) => {\n switch (heading) {\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_UP:\n return (0,_math__WEBPACK_IMPORTED_MODULE_0__.point)(p[0], bounds[1]);\n\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_RIGHT:\n return (0,_math__WEBPACK_IMPORTED_MODULE_0__.point)(bounds[2], p[1]);\n\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_DOWN:\n return (0,_math__WEBPACK_IMPORTED_MODULE_0__.point)(p[0], bounds[3]);\n }\n\n return (0,_math__WEBPACK_IMPORTED_MODULE_0__.point)(bounds[0], p[1]);\n};\n\nconst estimateSegmentCount = (start, end, startHeading, endHeading) => {\n if (endHeading === _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_RIGHT) {\n switch (startHeading) {\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_RIGHT:\n {\n if (start.pos[0] >= end.pos[0]) {\n return 4;\n }\n\n if (start.pos[1] === end.pos[1]) {\n return 0;\n }\n\n return 2;\n }\n\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_UP:\n if (start.pos[1] > end.pos[1] && start.pos[0] < end.pos[0]) {\n return 1;\n }\n\n return 3;\n\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_DOWN:\n if (start.pos[1] < end.pos[1] && start.pos[0] < end.pos[0]) {\n return 1;\n }\n\n return 3;\n\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_LEFT:\n if (start.pos[1] === end.pos[1]) {\n return 4;\n }\n\n return 2;\n }\n } else if (endHeading === _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_LEFT) {\n switch (startHeading) {\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_RIGHT:\n if (start.pos[1] === end.pos[1]) {\n return 4;\n }\n\n return 2;\n\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_UP:\n if (start.pos[1] > end.pos[1] && start.pos[0] > end.pos[0]) {\n return 1;\n }\n\n return 3;\n\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_DOWN:\n if (start.pos[1] < end.pos[1] && start.pos[0] > end.pos[0]) {\n return 1;\n }\n\n return 3;\n\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_LEFT:\n if (start.pos[0] <= end.pos[0]) {\n return 4;\n }\n\n if (start.pos[1] === end.pos[1]) {\n return 0;\n }\n\n return 2;\n }\n } else if (endHeading === _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_UP) {\n switch (startHeading) {\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_RIGHT:\n if (start.pos[1] > end.pos[1] && start.pos[0] < end.pos[0]) {\n return 1;\n }\n\n return 3;\n\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_UP:\n if (start.pos[1] >= end.pos[1]) {\n return 4;\n }\n\n if (start.pos[0] === end.pos[0]) {\n return 0;\n }\n\n return 2;\n\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_DOWN:\n if (start.pos[0] === end.pos[0]) {\n return 4;\n }\n\n return 2;\n\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_LEFT:\n if (start.pos[1] > end.pos[1] && start.pos[0] > end.pos[0]) {\n return 1;\n }\n\n return 3;\n }\n } else if (endHeading === _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_DOWN) {\n switch (startHeading) {\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_RIGHT:\n if (start.pos[1] < end.pos[1] && start.pos[0] < end.pos[0]) {\n return 1;\n }\n\n return 3;\n\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_UP:\n if (start.pos[0] === end.pos[0]) {\n return 4;\n }\n\n return 2;\n\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_DOWN:\n if (start.pos[1] <= end.pos[1]) {\n return 4;\n }\n\n if (start.pos[0] === end.pos[0]) {\n return 0;\n }\n\n return 2;\n\n case _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_LEFT:\n if (start.pos[1] < end.pos[1] && start.pos[0] > end.pos[0]) {\n return 1;\n }\n\n return 3;\n }\n }\n\n return 0;\n};\n/**\n * Get neighboring points for a gived grid address\n */\n\n\nconst getNeighbors = ([col, row], grid) => [gridNodeFromAddr([col, row - 1], grid), gridNodeFromAddr([col + 1, row], grid), gridNodeFromAddr([col, row + 1], grid), gridNodeFromAddr([col - 1, row], grid)];\n\nconst gridNodeFromAddr = ([col, row], grid) => {\n var _a;\n\n if (col < 0 || col >= grid.col || row < 0 || row >= grid.row) {\n return null;\n }\n\n return (_a = grid.data[row * grid.col + col]) !== null && _a !== void 0 ? _a : null;\n};\n/**\n * Get node for global point on canvas (if exists)\n */\n\n\nconst pointToGridNode = (point, grid) => {\n for (let col = 0; col < grid.col; col++) {\n for (let row = 0; row < grid.row; row++) {\n const candidate = gridNodeFromAddr([col, row], grid);\n\n if (candidate && point[0] === candidate.pos[0] && point[1] === candidate.pos[1]) {\n return candidate;\n }\n }\n }\n\n return null;\n};\n\nconst commonAABB = aabbs => [Math.min(...aabbs.map(aabb => aabb[0])), Math.min(...aabbs.map(aabb => aabb[1])), Math.max(...aabbs.map(aabb => aabb[2])), Math.max(...aabbs.map(aabb => aabb[3]))]; /// #region Utils\n\n\nconst getBindableElementForId = (id, elementsMap) => {\n const element = elementsMap.get(id);\n\n if (element && (0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isBindableElement)(element)) {\n return element;\n }\n\n return null;\n};\n\nconst normalizedArrowElementUpdate = (global, externalOffsetX, externalOffsetY) => {\n const offsetX = global[0][0];\n const offsetY = global[0][1];\n const points = global.map(p => (0,_math__WEBPACK_IMPORTED_MODULE_0__.pointTranslate)(p, (0,_math__WEBPACK_IMPORTED_MODULE_0__.vectorScale)((0,_math__WEBPACK_IMPORTED_MODULE_0__.vectorFromPoint)(global[0]), -1)));\n return Object.assign({\n points,\n x: offsetX + (externalOffsetX !== null && externalOffsetX !== void 0 ? externalOffsetX : 0),\n y: offsetY + (externalOffsetY !== null && externalOffsetY !== void 0 ? externalOffsetY : 0)\n }, (0,_points__WEBPACK_IMPORTED_MODULE_2__.getSizeFromPoints)(points));\n}; /// If last and current segments have the same heading, skip the middle point\n\n\nconst simplifyElbowArrowPoints = points => {\n var _a, _b;\n\n return points.slice(2).reduce((result, p) => (0,_heading__WEBPACK_IMPORTED_MODULE_6__.compareHeading)((0,_heading__WEBPACK_IMPORTED_MODULE_6__.vectorToHeading)((0,_math__WEBPACK_IMPORTED_MODULE_0__.vectorFromPoint)(result[result.length - 1], result[result.length - 2])), (0,_heading__WEBPACK_IMPORTED_MODULE_6__.vectorToHeading)((0,_math__WEBPACK_IMPORTED_MODULE_0__.vectorFromPoint)(p, result[result.length - 1]))) ? [...result.slice(0, -1), p] : [...result, p], [(_a = points[0]) !== null && _a !== void 0 ? _a : [0, 0], (_b = points[1]) !== null && _b !== void 0 ? _b : [1, 0]]);\n};\n\nconst neighborIndexToHeading = idx => {\n switch (idx) {\n case 0:\n return _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_UP;\n\n case 1:\n return _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_RIGHT;\n\n case 2:\n return _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_DOWN;\n }\n\n return _heading__WEBPACK_IMPORTED_MODULE_6__.HEADING_LEFT;\n};\n\nconst getGlobalPoint = (fixedPointRatio, initialPoint, otherPoint, elementsMap, boundElement, hoveredElement, isDragging) => {\n if (isDragging) {\n if (hoveredElement) {\n const snapPoint = getSnapPoint(initialPoint, otherPoint, hoveredElement, elementsMap);\n return (0,_binding__WEBPACK_IMPORTED_MODULE_5__.snapToMid)(hoveredElement, snapPoint);\n }\n\n return initialPoint;\n }\n\n if (boundElement) {\n const fixedGlobalPoint = (0,_binding__WEBPACK_IMPORTED_MODULE_5__.getGlobalFixedPointForBindableElement)(fixedPointRatio || [0, 0], boundElement); // NOTE: Resize scales the binding position point too, so we need to update it\n\n return Math.abs((0,_binding__WEBPACK_IMPORTED_MODULE_5__.distanceToBindableElement)(boundElement, fixedGlobalPoint, elementsMap) - _binding__WEBPACK_IMPORTED_MODULE_5__.FIXED_BINDING_DISTANCE) > 0.01 ? getSnapPoint(initialPoint, otherPoint, boundElement, elementsMap) : fixedGlobalPoint;\n }\n\n return initialPoint;\n};\n\nconst getSnapPoint = (p, otherPoint, element, elementsMap) => (0,_binding__WEBPACK_IMPORTED_MODULE_5__.bindPointToSnapToElementOutline)((0,_typeChecks__WEBPACK_IMPORTED_MODULE_8__.isRectanguloidElement)(element) ? (0,_binding__WEBPACK_IMPORTED_MODULE_5__.avoidRectangularCorner)(element, p) : p, otherPoint, element, elementsMap);\n\nconst getBindPointHeading = (p, otherPoint, elementsMap, hoveredElement, origPoint) => (0,_binding__WEBPACK_IMPORTED_MODULE_5__.getHeadingForElbowArrowSnap)(p, otherPoint, hoveredElement, hoveredElement && (0,_shapes__WEBPACK_IMPORTED_MODULE_3__.aabbForElement)(hoveredElement, Array(4).fill((0,_binding__WEBPACK_IMPORTED_MODULE_5__.distanceToBindableElement)(hoveredElement, p, elementsMap))), elementsMap, origPoint);\n\nconst getHoveredElements = (origStartGlobalPoint, origEndGlobalPoint, elementsMap) => {\n // TODO: Might be a performance bottleneck and the Map type\n // remembers the insertion order anyway...\n const nonDeletedSceneElementsMap = (0,_utils__WEBPACK_IMPORTED_MODULE_4__.toBrandedType)(new Map([...elementsMap].filter(el => !el[1].isDeleted)));\n const elements = Array.from(elementsMap.values());\n return [(0,_binding__WEBPACK_IMPORTED_MODULE_5__.getHoveredElementForBinding)((0,_utils__WEBPACK_IMPORTED_MODULE_4__.tupleToCoors)(origStartGlobalPoint), elements, nonDeletedSceneElementsMap, true), (0,_binding__WEBPACK_IMPORTED_MODULE_5__.getHoveredElementForBinding)((0,_utils__WEBPACK_IMPORTED_MODULE_4__.tupleToCoors)(origEndGlobalPoint), elements, nonDeletedSceneElementsMap, true)];\n};\n\nconst gridAddressesEqual = (a, b) => a[0] === b[0] && a[1] === b[1];\n\n//# sourceURL=webpack://ExcalidrawLib/./element/routing.ts?");
|
|
2953
2953
|
|
|
2954
2954
|
/***/ }),
|
|
2955
2955
|
|
|
@@ -3004,7 +3004,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
3004
3004
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
3005
3005
|
|
|
3006
3006
|
"use strict";
|
|
3007
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"textWysiwyg\": () => (/* binding */ textWysiwyg)\n/* harmony export */ });\n/* harmony import */ var _keys__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../keys */ \"./keys.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _scene_Scene__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../scene/Scene */ \"./scene/Scene.ts\");\n/* harmony import */ var _typeChecks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _mutateElement__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _textElement__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _actions_actionProperties__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../actions/actionProperties */ \"./actions/actionProperties.tsx\");\n/* harmony import */ var _actions_actionCanvas__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../actions/actionCanvas */ \"./actions/actionCanvas.tsx\");\n/* harmony import */ var _linearElementEditor__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _clipboard__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../clipboard */ \"./clipboard.ts\");\n/* harmony import */ var _containerCache__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./containerCache */ \"./element/containerCache.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst getTransform = (width, height, angle, appState, maxWidth, maxHeight) => {\n const {\n zoom\n } = appState;\n const degree = 180 * angle / Math.PI;\n let translateX = width * (zoom.value - 1) / 2;\n let translateY = height * (zoom.value - 1) / 2;\n\n if (width > maxWidth && zoom.value !== 1) {\n translateX = maxWidth * (zoom.value - 1) / 2;\n }\n\n if (height > maxHeight && zoom.value !== 1) {\n translateY = maxHeight * (zoom.value - 1) / 2;\n }\n\n return `translate(${translateX}px, ${translateY}px) scale(${zoom.value}) rotate(${degree}deg)`;\n};\n\nconst textWysiwyg = ({\n id,\n onChange,\n onSubmit,\n getViewportCoords,\n element,\n canvas,\n excalidrawContainer,\n app,\n autoSelect = true\n}) => {\n const textPropertiesUpdated = (updatedTextElement, editable) => {\n if (!editable.style.fontFamily || !editable.style.fontSize) {\n return false;\n }\n\n const currentFont = editable.style.fontFamily.replace(/\"/g, \"\");\n\n if ((0,_utils__WEBPACK_IMPORTED_MODULE_1__.getFontFamilyString)({\n fontFamily: updatedTextElement.fontFamily\n }) !== currentFont) {\n return true;\n }\n\n if (`${updatedTextElement.fontSize}px` !== editable.style.fontSize) {\n return true;\n }\n\n return false;\n };\n\n const updateWysiwygStyle = () => {\n var _a;\n\n const appState = app.state;\n const updatedTextElement = (_a = _scene_Scene__WEBPACK_IMPORTED_MODULE_2__[\"default\"].getScene(element)) === null || _a === void 0 ? void 0 : _a.getElement(id);\n\n if (!updatedTextElement) {\n return;\n }\n\n const {\n textAlign,\n verticalAlign\n } = updatedTextElement;\n const elementsMap = app.scene.getNonDeletedElementsMap();\n\n if (updatedTextElement && (0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isTextElement)(updatedTextElement)) {\n let coordX = updatedTextElement.x;\n let coordY = updatedTextElement.y;\n const container = (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.getContainerElement)(updatedTextElement, app.scene.getNonDeletedElementsMap());\n let width = updatedTextElement.width; // set to element height by default since that's\n // what is going to be used for unbounded text\n\n let height = updatedTextElement.height;\n let maxWidth = updatedTextElement.width;\n let maxHeight = updatedTextElement.height;\n\n if (container && updatedTextElement.containerId) {\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isArrowElement)(container)) {\n const boundTextCoords = _linearElementEditor__WEBPACK_IMPORTED_MODULE_9__.LinearElementEditor.getBoundTextElementPosition(container, updatedTextElement, elementsMap);\n coordX = boundTextCoords.x;\n coordY = boundTextCoords.y;\n }\n\n const propertiesUpdated = textPropertiesUpdated(updatedTextElement, editable);\n let originalContainerData;\n\n if (propertiesUpdated) {\n originalContainerData = (0,_containerCache__WEBPACK_IMPORTED_MODULE_11__.updateOriginalContainerCache)(container.id, container.height);\n } else {\n originalContainerData = _containerCache__WEBPACK_IMPORTED_MODULE_11__.originalContainerCache[container.id];\n\n if (!originalContainerData) {\n originalContainerData = (0,_containerCache__WEBPACK_IMPORTED_MODULE_11__.updateOriginalContainerCache)(container.id, container.height);\n }\n }\n\n maxWidth = (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.getBoundTextMaxWidth)(container, updatedTextElement);\n maxHeight = (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.getBoundTextMaxHeight)(container, updatedTextElement); // autogrow container height if text exceeds\n\n if (!(0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isArrowElement)(container) && height > maxHeight) {\n const targetContainerHeight = (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.computeContainerDimensionForBoundText)(height, container.type);\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_5__.mutateElement)(container, {\n height: targetContainerHeight\n });\n return;\n } else if ( // autoshrink container height until original container height\n // is reached when text is removed\n !(0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isArrowElement)(container) && container.height > originalContainerData.height && height < maxHeight) {\n const targetContainerHeight = (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.computeContainerDimensionForBoundText)(height, container.type);\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_5__.mutateElement)(container, {\n height: targetContainerHeight\n });\n } else {\n const {\n y\n } = (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.computeBoundTextPosition)(container, updatedTextElement, elementsMap);\n coordY = y;\n }\n }\n\n const [viewportX, viewportY] = getViewportCoords(coordX, coordY);\n const initialSelectionStart = editable.selectionStart;\n const initialSelectionEnd = editable.selectionEnd;\n const initialLength = editable.value.length; // restore cursor position after value updated so it doesn't\n // go to the end of text when container auto expanded\n\n if (initialSelectionStart === initialSelectionEnd && initialSelectionEnd !== initialLength) {\n // get diff between length and selection end and shift\n // the cursor by \"diff\" times to position correctly\n const diff = initialLength - initialSelectionEnd;\n editable.selectionStart = editable.value.length - diff;\n editable.selectionEnd = editable.value.length - diff;\n }\n\n if (!container) {\n maxWidth = (appState.width - 8 - viewportX) / appState.zoom.value;\n width = Math.min(width, maxWidth);\n } else {\n width += 0.5;\n } // add 5% buffer otherwise it causes wysiwyg to jump\n\n\n height *= 1.05;\n const font = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.getFontString)(updatedTextElement); // adding left and right padding buffer, so that browser does not cut the glyphs (does not work in Safari)\n\n const padding = !_constants__WEBPACK_IMPORTED_MODULE_4__.isSafari ? Math.ceil(updatedTextElement.fontSize / appState.zoom.value / 2) //zsviczian\n : 0; // Make sure text editor height doesn't go beyond viewport\n\n const editorMaxHeight = (appState.height - viewportY) / appState.zoom.value;\n Object.assign(editable.style, {\n font,\n // must be defined *after* font ¯\\_(ツ)_/¯\n lineHeight: updatedTextElement.lineHeight,\n width: `${Math.ceil(width)}px`,\n height: `${height}px`,\n left: `${viewportX - padding}px`,\n top: `${viewportY}px`,\n transform: getTransform(width, height, (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.getTextElementAngle)(updatedTextElement, container), appState, maxWidth, editorMaxHeight),\n padding: `0 ${padding}px`,\n textAlign,\n verticalAlign,\n color: updatedTextElement.strokeColor,\n opacity: updatedTextElement.opacity / 100,\n filter: \"var(--theme-filter)\",\n maxHeight: `${editorMaxHeight}px`\n });\n editable.scrollTop = 0; // For some reason updating font attribute doesn't set font family\n // hence updating font family explicitly for test environment\n\n if ((0,_utils__WEBPACK_IMPORTED_MODULE_1__.isTestEnv)()) {\n editable.style.fontFamily = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.getFontFamilyString)(updatedTextElement);\n }\n\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_5__.mutateElement)(updatedTextElement, {\n x: coordX,\n y: coordY\n });\n }\n };\n\n const editable = document.createElement(\"textarea\");\n editable.dir = \"auto\";\n editable.tabIndex = 0;\n editable.dataset.type = \"wysiwyg\"; // prevent line wrapping on Safari\n\n editable.wrap = \"off\";\n editable.classList.add(\"excalidraw-wysiwyg\");\n let whiteSpace = \"pre\";\n let wordBreak = \"normal\";\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isBoundToContainer)(element) || !element.autoResize) {\n whiteSpace = \"pre-wrap\";\n wordBreak = \"break-word\";\n }\n\n Object.assign(editable.style, {\n position: \"absolute\",\n display: \"inline-block\",\n minHeight: \"1em\",\n backfaceVisibility: \"hidden\",\n margin: 0,\n border: 0,\n outline: 0,\n resize: \"none\",\n background: \"transparent\",\n overflow: \"hidden\",\n // must be specified because in dark mode canvas creates a stacking context\n zIndex: \"var(--zIndex-wysiwyg)\",\n wordBreak,\n // prevent line wrapping (`whitespace: nowrap` doesn't work on FF)\n whiteSpace,\n overflowWrap: \"break-word\",\n boxSizing: \"content-box\"\n });\n editable.value = element.originalText;\n updateWysiwygStyle();\n\n if (onChange) {\n editable.onpaste = async event => {\n const clipboardData = await (0,_clipboard__WEBPACK_IMPORTED_MODULE_10__.parseClipboard)(event, true);\n\n if (!clipboardData.text) {\n return;\n }\n\n const data = (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.normalizeText)(clipboardData.text);\n\n if (!data) {\n return;\n }\n\n const container = (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.getContainerElement)(element, app.scene.getNonDeletedElementsMap());\n const font = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.getFontString)({\n fontSize: app.state.currentItemFontSize,\n fontFamily: app.state.currentItemFontFamily\n });\n\n if (container) {\n const boundTextElement = (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.getBoundTextElement)(container, app.scene.getNonDeletedElementsMap());\n const wrappedText = (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.wrapText)(`${editable.value}${data}`, font, (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.getBoundTextMaxWidth)(container, boundTextElement));\n const width = (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.getTextWidth)(wrappedText, font, true);\n editable.style.width = `${Math.ceil(width)}px`; //zsviczian Obsidian app zoom !== 100% issue\n }\n };\n\n editable.oninput = () => {\n const normalized = (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.normalizeText)(editable.value);\n\n if (editable.value !== normalized) {\n const selectionStart = editable.selectionStart;\n editable.value = normalized; // put the cursor at some position close to where it was before\n // normalization (otherwise it'll end up at the end of the text)\n\n editable.selectionStart = selectionStart;\n editable.selectionEnd = selectionStart;\n }\n\n onChange(editable.value);\n };\n }\n\n editable.onkeydown = event => {\n if (!event.shiftKey && _actions_actionCanvas__WEBPACK_IMPORTED_MODULE_8__.actionZoomIn.keyTest(event)) {\n event.preventDefault();\n app.actionManager.executeAction(_actions_actionCanvas__WEBPACK_IMPORTED_MODULE_8__.actionZoomIn);\n updateWysiwygStyle();\n } else if (!event.shiftKey && _actions_actionCanvas__WEBPACK_IMPORTED_MODULE_8__.actionZoomOut.keyTest(event)) {\n event.preventDefault();\n app.actionManager.executeAction(_actions_actionCanvas__WEBPACK_IMPORTED_MODULE_8__.actionZoomOut);\n updateWysiwygStyle();\n } else if (!event.shiftKey && _actions_actionCanvas__WEBPACK_IMPORTED_MODULE_8__.actionResetZoom.keyTest(event)) {\n event.preventDefault();\n app.actionManager.executeAction(_actions_actionCanvas__WEBPACK_IMPORTED_MODULE_8__.actionResetZoom);\n updateWysiwygStyle();\n } else if (_actions_actionProperties__WEBPACK_IMPORTED_MODULE_7__.actionDecreaseFontSize.keyTest(event)) {\n app.actionManager.executeAction(_actions_actionProperties__WEBPACK_IMPORTED_MODULE_7__.actionDecreaseFontSize);\n } else if (_actions_actionProperties__WEBPACK_IMPORTED_MODULE_7__.actionIncreaseFontSize.keyTest(event)) {\n app.actionManager.executeAction(_actions_actionProperties__WEBPACK_IMPORTED_MODULE_7__.actionIncreaseFontSize);\n } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_0__.KEYS.ESCAPE) {\n event.preventDefault();\n submittedViaKeyboard = true;\n handleSubmit();\n } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_0__.KEYS.ENTER && event[_keys__WEBPACK_IMPORTED_MODULE_0__.KEYS.CTRL_OR_CMD]) {\n event.preventDefault();\n\n if (event.isComposing || event.keyCode === 229) {\n return;\n }\n\n submittedViaKeyboard = true;\n handleSubmit();\n } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_0__.KEYS.TAB || event[_keys__WEBPACK_IMPORTED_MODULE_0__.KEYS.CTRL_OR_CMD] && (event.code === _keys__WEBPACK_IMPORTED_MODULE_0__.CODES.BRACKET_LEFT || event.code === _keys__WEBPACK_IMPORTED_MODULE_0__.CODES.BRACKET_RIGHT)) {\n event.preventDefault();\n\n if (event.isComposing) {\n return;\n } else if (event.shiftKey || event.code === _keys__WEBPACK_IMPORTED_MODULE_0__.CODES.BRACKET_LEFT) {\n outdent();\n } else {\n indent();\n } // We must send an input event to resize the element\n\n\n editable.dispatchEvent(new Event(\"input\"));\n }\n };\n\n const TAB_SIZE = 4;\n const TAB = \" \".repeat(TAB_SIZE);\n const RE_LEADING_TAB = new RegExp(`^ {1,${TAB_SIZE}}`);\n\n const indent = () => {\n const {\n selectionStart,\n selectionEnd\n } = editable;\n const linesStartIndices = getSelectedLinesStartIndices();\n let value = editable.value;\n linesStartIndices.forEach(startIndex => {\n const startValue = value.slice(0, startIndex);\n const endValue = value.slice(startIndex);\n value = `${startValue}${TAB}${endValue}`;\n });\n editable.value = value;\n editable.selectionStart = selectionStart + TAB_SIZE;\n editable.selectionEnd = selectionEnd + TAB_SIZE * linesStartIndices.length;\n };\n\n const outdent = () => {\n const {\n selectionStart,\n selectionEnd\n } = editable;\n const linesStartIndices = getSelectedLinesStartIndices();\n const removedTabs = [];\n let value = editable.value;\n linesStartIndices.forEach(startIndex => {\n const tabMatch = value.slice(startIndex, startIndex + TAB_SIZE).match(RE_LEADING_TAB);\n\n if (tabMatch) {\n const startValue = value.slice(0, startIndex);\n const endValue = value.slice(startIndex + tabMatch[0].length); // Delete a tab from the line\n\n value = `${startValue}${endValue}`;\n removedTabs.push(startIndex);\n }\n });\n editable.value = value;\n\n if (removedTabs.length) {\n if (selectionStart > removedTabs[removedTabs.length - 1]) {\n editable.selectionStart = Math.max(selectionStart - TAB_SIZE, removedTabs[removedTabs.length - 1]);\n } else {\n // If the cursor is before the first tab removed, ex:\n // Line| #1\n // Line #2\n // Lin|e #3\n // we should reset the selectionStart to his initial value.\n editable.selectionStart = selectionStart;\n }\n\n editable.selectionEnd = Math.max(editable.selectionStart, selectionEnd - TAB_SIZE * removedTabs.length);\n }\n };\n /**\n * @returns indices of start positions of selected lines, in reverse order\n */\n\n\n const getSelectedLinesStartIndices = () => {\n let {\n selectionStart,\n selectionEnd,\n value\n } = editable; // chars before selectionStart on the same line\n\n const startOffset = value.slice(0, selectionStart).match(/[^\\n]*$/)[0].length; // put caret at the start of the line\n\n selectionStart = selectionStart - startOffset;\n const selected = value.slice(selectionStart, selectionEnd);\n return selected.split(\"\\n\").reduce((startIndices, line, idx, lines) => startIndices.concat(idx ? // curr line index is prev line's start + prev line's length + \\n\n startIndices[idx - 1] + lines[idx - 1].length + 1 : // first selected line\n selectionStart), []).reverse();\n };\n\n const stopEvent = event => {\n if (event.target instanceof HTMLCanvasElement) {\n event.preventDefault();\n event.stopPropagation();\n }\n }; // using a state variable instead of passing it to the handleSubmit callback\n // so that we don't need to create separate a callback for event handlers\n\n\n let submittedViaKeyboard = false;\n\n const handleSubmit = () => {\n var _a, _b; // prevent double submit\n\n\n if (isDestroyed) {\n return;\n }\n\n isDestroyed = true; // cleanup must be run before onSubmit otherwise when app blurs the wysiwyg\n // it'd get stuck in an infinite loop of blur→onSubmit after we re-focus the\n // wysiwyg on update\n\n cleanup();\n const updateElement = (_a = _scene_Scene__WEBPACK_IMPORTED_MODULE_2__[\"default\"].getScene(element)) === null || _a === void 0 ? void 0 : _a.getElement(element.id);\n\n if (!updateElement) {\n return;\n }\n\n const container = (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.getContainerElement)(updateElement, app.scene.getNonDeletedElementsMap());\n\n if (container) {\n if (editable.value.trim()) {\n const boundTextElementId = (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.getBoundTextElementId)(container);\n\n if (!boundTextElementId || boundTextElementId !== element.id) {\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_5__.mutateElement)(container, {\n boundElements: (container.boundElements || []).concat({\n type: \"text\",\n id: element.id\n })\n });\n } else if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isArrowElement)(container)) {\n // updating an arrow label may change bounds, prevent stale cache:\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_5__.bumpVersion)(container);\n }\n } else {\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_5__.mutateElement)(container, {\n boundElements: (_b = container.boundElements) === null || _b === void 0 ? void 0 : _b.filter(ele => !(0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isTextElement)(ele))\n });\n }\n\n (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.redrawTextBoundingBox)(updateElement, container, app.scene.getNonDeletedElementsMap());\n }\n\n app.setState({\n openPopup: null\n }); //zsviczian (container text color issue)\n\n onSubmit({\n viaKeyboard: submittedViaKeyboard,\n nextOriginalText: editable.value\n });\n };\n\n const cleanup = () => {\n // remove events to ensure they don't late-fire\n editable.onblur = null;\n editable.oninput = null;\n editable.onkeydown = null;\n\n if (observer) {\n observer.disconnect();\n }\n\n window.removeEventListener(\"resize\", updateWysiwygStyle);\n window.removeEventListener(\"wheel\", stopEvent, true);\n window.removeEventListener(\"pointerdown\", onPointerDown);\n window.removeEventListener(\"pointerup\", bindBlurEvent);\n window.removeEventListener(\"blur\", handleSubmit);\n window.removeEventListener(\"beforeunload\", handleSubmit);\n unbindUpdate();\n unbindOnScroll();\n editable.remove();\n };\n\n const bindBlurEvent = event => {\n window.removeEventListener(\"pointerup\", bindBlurEvent); // Deferred so that the pointerdown that initiates the wysiwyg doesn't\n // trigger the blur on ensuing pointerup.\n // Also to handle cases such as picking a color which would trigger a blur\n // in that same tick.\n\n const target = event === null || event === void 0 ? void 0 : event.target;\n const isPropertiesTrigger = target instanceof HTMLElement && target.classList.contains(\"properties-trigger\");\n setTimeout(() => {\n editable.onblur = handleSubmit; // case: clicking on the same property → no change → no update → no focus\n\n if (!isPropertiesTrigger) {\n editable.focus();\n }\n });\n };\n\n const temporarilyDisableSubmit = () => {\n editable.onblur = null;\n window.addEventListener(\"pointerup\", bindBlurEvent); // handle edge-case where pointerup doesn't fire e.g. due to user\n // alt-tabbing away\n\n window.addEventListener(\"blur\", handleSubmit);\n }; // prevent blur when changing properties from the menu\n\n\n const onPointerDown = event => {\n const target = event === null || event === void 0 ? void 0 : event.target;\n const isShapeActionsPanel = //zsviczian\n (event.target instanceof HTMLElement || event.target instanceof SVGElement) && (event.target.closest(`.${_constants__WEBPACK_IMPORTED_MODULE_4__.CLASSES.SHAPE_ACTIONS_MENU}`) || event.target.closest(`.${_constants__WEBPACK_IMPORTED_MODULE_4__.CLASSES.SHAPE_ACTIONS_MOBILE_MENU}`) || event.target.closest(`.${_constants__WEBPACK_IMPORTED_MODULE_4__.CLASSES.MOBILE_TOOLBAR}`)); // panning canvas\n\n if (event.button === _constants__WEBPACK_IMPORTED_MODULE_4__.POINTER_BUTTON.WHEEL) {\n // trying to pan by clicking inside text area itself -> handle here\n if (target instanceof HTMLTextAreaElement) {\n event.preventDefault();\n app.handleCanvasPanUsingWheelOrSpaceDrag(event);\n }\n\n temporarilyDisableSubmit();\n return;\n }\n\n const isPropertiesTrigger = target instanceof HTMLElement && target.classList.contains(\"properties-trigger\");\n\n if ((event.target instanceof HTMLElement || event.target instanceof SVGElement) && (isShapeActionsPanel || //zsviczian\n event.target.closest(`.${_constants__WEBPACK_IMPORTED_MODULE_4__.CLASSES.SHAPE_ACTIONS_MENU}, .${_constants__WEBPACK_IMPORTED_MODULE_4__.CLASSES.ZOOM_ACTIONS}`)) && !(0,_utils__WEBPACK_IMPORTED_MODULE_1__.isWritableElement)(event.target) || isPropertiesTrigger) {\n temporarilyDisableSubmit();\n } else if (event.target instanceof HTMLCanvasElement && // Vitest simply ignores stopPropagation, capture-mode, or rAF\n // so without introducing crazier hacks, nothing we can do\n !(0,_utils__WEBPACK_IMPORTED_MODULE_1__.isTestEnv)()) {\n // On mobile, blur event doesn't seem to always fire correctly,\n // so we want to also submit on pointerdown outside the wysiwyg.\n // Done in the next frame to prevent pointerdown from creating a new text\n // immediately (if tools locked) so that users on mobile have chance\n // to submit first (to hide virtual keyboard).\n // Note: revisit if we want to differ this behavior on Desktop\n requestAnimationFrame(() => {\n handleSubmit();\n });\n }\n }; // handle updates of textElement properties of editing element\n\n\n const unbindUpdate = app.scene.onUpdate(() => {\n var _a;\n\n updateWysiwygStyle();\n const isPopupOpened = !!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(\".properties-content\"));\n\n if (!isPopupOpened) {\n editable.focus();\n }\n });\n const unbindOnScroll = app.onScrollChangeEmitter.on(() => {\n updateWysiwygStyle();\n }); // ---------------------------------------------------------------------------\n\n let isDestroyed = false;\n\n if (autoSelect) {\n // select on init (focusing is done separately inside the bindBlurEvent()\n // because we need it to happen *after* the blur event from `pointerdown`)\n editable.select();\n }\n\n bindBlurEvent(); // reposition wysiwyg in case of canvas is resized. Using ResizeObserver\n // is preferred so we catch changes from host, where window may not resize.\n\n let observer = null;\n\n if (canvas && \"ResizeObserver\" in window) {\n observer = new window.ResizeObserver(() => {\n updateWysiwygStyle();\n });\n observer.observe(canvas);\n } else {\n window.addEventListener(\"resize\", updateWysiwygStyle);\n }\n\n editable.onpointerdown = event => event.stopPropagation(); // rAF (+ capture to by doubly sure) so we don't catch te pointerdown that\n // triggered the wysiwyg\n\n\n requestAnimationFrame(() => {\n window.addEventListener(\"pointerdown\", onPointerDown, {\n capture: true\n });\n });\n window.addEventListener(\"beforeunload\", handleSubmit);\n excalidrawContainer === null || excalidrawContainer === void 0 ? void 0 : excalidrawContainer.querySelector(\".excalidraw-textEditorContainer\").appendChild(editable);\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./element/textWysiwyg.tsx?");
|
|
3007
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"textWysiwyg\": () => (/* binding */ textWysiwyg)\n/* harmony export */ });\n/* harmony import */ var _keys__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../keys */ \"./keys.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _scene_Scene__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../scene/Scene */ \"./scene/Scene.ts\");\n/* harmony import */ var _typeChecks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _mutateElement__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _textElement__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _actions_actionProperties__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../actions/actionProperties */ \"./actions/actionProperties.tsx\");\n/* harmony import */ var _actions_actionCanvas__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../actions/actionCanvas */ \"./actions/actionCanvas.tsx\");\n/* harmony import */ var _linearElementEditor__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _clipboard__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../clipboard */ \"./clipboard.ts\");\n/* harmony import */ var _containerCache__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./containerCache */ \"./element/containerCache.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst getTransform = (width, height, angle, appState, maxWidth, maxHeight) => {\n const {\n zoom\n } = appState;\n const degree = 180 * angle / Math.PI;\n let translateX = width * (zoom.value - 1) / 2;\n let translateY = height * (zoom.value - 1) / 2;\n\n if (width > maxWidth && zoom.value !== 1) {\n translateX = maxWidth * (zoom.value - 1) / 2;\n }\n\n if (height > maxHeight && zoom.value !== 1) {\n translateY = maxHeight * (zoom.value - 1) / 2;\n }\n\n return `translate(${translateX}px, ${translateY}px) scale(${zoom.value}) rotate(${degree}deg)`;\n};\n\nconst textWysiwyg = ({\n id,\n onChange,\n onSubmit,\n getViewportCoords,\n element,\n canvas,\n excalidrawContainer,\n app,\n autoSelect = true\n}) => {\n const textPropertiesUpdated = (updatedTextElement, editable) => {\n if (!editable.style.fontFamily || !editable.style.fontSize) {\n return false;\n }\n\n const currentFont = editable.style.fontFamily.replace(/\"/g, \"\");\n\n if ((0,_utils__WEBPACK_IMPORTED_MODULE_1__.getFontFamilyString)({\n fontFamily: updatedTextElement.fontFamily\n }) !== currentFont) {\n return true;\n }\n\n if (`${updatedTextElement.fontSize}px` !== editable.style.fontSize) {\n return true;\n }\n\n return false;\n };\n\n const updateWysiwygStyle = () => {\n var _a;\n\n const appState = app.state;\n const updatedTextElement = (_a = _scene_Scene__WEBPACK_IMPORTED_MODULE_2__[\"default\"].getScene(element)) === null || _a === void 0 ? void 0 : _a.getElement(id);\n\n if (!updatedTextElement) {\n return;\n }\n\n const {\n textAlign,\n verticalAlign\n } = updatedTextElement;\n const elementsMap = app.scene.getNonDeletedElementsMap();\n\n if (updatedTextElement && (0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isTextElement)(updatedTextElement)) {\n let coordX = updatedTextElement.x;\n let coordY = updatedTextElement.y;\n const container = (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.getContainerElement)(updatedTextElement, app.scene.getNonDeletedElementsMap());\n let width = updatedTextElement.width; // set to element height by default since that's\n // what is going to be used for unbounded text\n\n let height = updatedTextElement.height;\n let maxWidth = updatedTextElement.width;\n let maxHeight = updatedTextElement.height;\n\n if (container && updatedTextElement.containerId) {\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isArrowElement)(container)) {\n const boundTextCoords = _linearElementEditor__WEBPACK_IMPORTED_MODULE_9__.LinearElementEditor.getBoundTextElementPosition(container, updatedTextElement, elementsMap);\n coordX = boundTextCoords.x;\n coordY = boundTextCoords.y;\n }\n\n const propertiesUpdated = textPropertiesUpdated(updatedTextElement, editable);\n let originalContainerData;\n\n if (propertiesUpdated) {\n originalContainerData = (0,_containerCache__WEBPACK_IMPORTED_MODULE_11__.updateOriginalContainerCache)(container.id, container.height);\n } else {\n originalContainerData = _containerCache__WEBPACK_IMPORTED_MODULE_11__.originalContainerCache[container.id];\n\n if (!originalContainerData) {\n originalContainerData = (0,_containerCache__WEBPACK_IMPORTED_MODULE_11__.updateOriginalContainerCache)(container.id, container.height);\n }\n }\n\n maxWidth = (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.getBoundTextMaxWidth)(container, updatedTextElement);\n maxHeight = (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.getBoundTextMaxHeight)(container, updatedTextElement); // autogrow container height if text exceeds\n\n if (!(0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isArrowElement)(container) && height > maxHeight) {\n const targetContainerHeight = (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.computeContainerDimensionForBoundText)(height, container.type);\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_5__.mutateElement)(container, {\n height: targetContainerHeight\n });\n return;\n } else if ( // autoshrink container height until original container height\n // is reached when text is removed\n !(0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isArrowElement)(container) && container.height > originalContainerData.height && height < maxHeight) {\n const targetContainerHeight = (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.computeContainerDimensionForBoundText)(height, container.type);\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_5__.mutateElement)(container, {\n height: targetContainerHeight\n });\n } else {\n const {\n y\n } = (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.computeBoundTextPosition)(container, updatedTextElement, elementsMap);\n coordY = y;\n }\n }\n\n const [viewportX, viewportY] = getViewportCoords(coordX, coordY);\n const initialSelectionStart = editable.selectionStart;\n const initialSelectionEnd = editable.selectionEnd;\n const initialLength = editable.value.length; // restore cursor position after value updated so it doesn't\n // go to the end of text when container auto expanded\n\n if (initialSelectionStart === initialSelectionEnd && initialSelectionEnd !== initialLength) {\n // get diff between length and selection end and shift\n // the cursor by \"diff\" times to position correctly\n const diff = initialLength - initialSelectionEnd;\n editable.selectionStart = editable.value.length - diff;\n editable.selectionEnd = editable.value.length - diff;\n }\n\n if (!container) {\n maxWidth = (appState.width - 8 - viewportX) / appState.zoom.value;\n width = Math.min(width, maxWidth);\n } else {\n width += 0.5;\n } // add 5% buffer otherwise it causes wysiwyg to jump\n\n\n height *= 1.05;\n const font = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.getFontString)(updatedTextElement); // adding left and right padding buffer, so that browser does not cut the glyphs (does not work in Safari)\n\n const padding = !_constants__WEBPACK_IMPORTED_MODULE_4__.isSafari ? Math.ceil(updatedTextElement.fontSize / appState.zoom.value / 2) : 0; // Make sure text editor height doesn't go beyond viewport\n\n const editorMaxHeight = (appState.height - viewportY) / appState.zoom.value;\n Object.assign(editable.style, {\n font,\n // must be defined *after* font ¯\\_(ツ)_/¯\n lineHeight: updatedTextElement.lineHeight,\n width: `${Math.ceil(width)}px`,\n height: `${height}px`,\n left: `${viewportX - padding}px`,\n top: `${viewportY}px`,\n transform: getTransform(width, height, (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.getTextElementAngle)(updatedTextElement, container), appState, maxWidth, editorMaxHeight),\n padding: `0 ${padding}px`,\n textAlign,\n verticalAlign,\n color: updatedTextElement.strokeColor,\n opacity: updatedTextElement.opacity / 100,\n filter: \"var(--theme-filter)\",\n maxHeight: `${editorMaxHeight}px`\n });\n editable.scrollTop = 0; // For some reason updating font attribute doesn't set font family\n // hence updating font family explicitly for test environment\n\n if ((0,_utils__WEBPACK_IMPORTED_MODULE_1__.isTestEnv)()) {\n editable.style.fontFamily = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.getFontFamilyString)(updatedTextElement);\n }\n\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_5__.mutateElement)(updatedTextElement, {\n x: coordX,\n y: coordY\n });\n }\n };\n\n const editable = document.createElement(\"textarea\");\n editable.dir = \"auto\";\n editable.tabIndex = 0;\n editable.dataset.type = \"wysiwyg\"; // prevent line wrapping on Safari\n\n editable.wrap = \"off\";\n editable.classList.add(\"excalidraw-wysiwyg\");\n let whiteSpace = \"pre\";\n let wordBreak = \"normal\";\n\n if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isBoundToContainer)(element) || !element.autoResize) {\n whiteSpace = \"pre-wrap\";\n wordBreak = \"break-word\";\n }\n\n Object.assign(editable.style, {\n position: \"absolute\",\n display: \"inline-block\",\n minHeight: \"1em\",\n backfaceVisibility: \"hidden\",\n margin: 0,\n border: 0,\n outline: 0,\n resize: \"none\",\n background: \"transparent\",\n overflow: \"hidden\",\n // must be specified because in dark mode canvas creates a stacking context\n zIndex: \"var(--zIndex-wysiwyg)\",\n wordBreak,\n // prevent line wrapping (`whitespace: nowrap` doesn't work on FF)\n whiteSpace,\n overflowWrap: \"break-word\",\n boxSizing: \"content-box\"\n });\n editable.value = element.originalText;\n updateWysiwygStyle();\n\n if (onChange) {\n editable.onpaste = async event => {\n const clipboardData = await (0,_clipboard__WEBPACK_IMPORTED_MODULE_10__.parseClipboard)(event, true);\n\n if (!clipboardData.text) {\n return;\n }\n\n const data = (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.normalizeText)(clipboardData.text);\n\n if (!data) {\n return;\n }\n\n const container = (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.getContainerElement)(element, app.scene.getNonDeletedElementsMap());\n const font = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.getFontString)({\n fontSize: app.state.currentItemFontSize,\n fontFamily: app.state.currentItemFontFamily\n });\n\n if (container) {\n const boundTextElement = (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.getBoundTextElement)(container, app.scene.getNonDeletedElementsMap());\n const wrappedText = (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.wrapText)(`${editable.value}${data}`, font, (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.getBoundTextMaxWidth)(container, boundTextElement));\n const width = (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.getTextWidth)(wrappedText, font, true);\n editable.style.width = `${Math.ceil(width)}px`; //zsviczian Obsidian app zoom !== 100% issue\n }\n };\n\n editable.oninput = () => {\n const normalized = (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.normalizeText)(editable.value);\n\n if (editable.value !== normalized) {\n const selectionStart = editable.selectionStart;\n editable.value = normalized; // put the cursor at some position close to where it was before\n // normalization (otherwise it'll end up at the end of the text)\n\n editable.selectionStart = selectionStart;\n editable.selectionEnd = selectionStart;\n }\n\n onChange(editable.value);\n };\n }\n\n editable.onkeydown = event => {\n if (!event.shiftKey && _actions_actionCanvas__WEBPACK_IMPORTED_MODULE_8__.actionZoomIn.keyTest(event)) {\n event.preventDefault();\n app.actionManager.executeAction(_actions_actionCanvas__WEBPACK_IMPORTED_MODULE_8__.actionZoomIn);\n updateWysiwygStyle();\n } else if (!event.shiftKey && _actions_actionCanvas__WEBPACK_IMPORTED_MODULE_8__.actionZoomOut.keyTest(event)) {\n event.preventDefault();\n app.actionManager.executeAction(_actions_actionCanvas__WEBPACK_IMPORTED_MODULE_8__.actionZoomOut);\n updateWysiwygStyle();\n } else if (!event.shiftKey && _actions_actionCanvas__WEBPACK_IMPORTED_MODULE_8__.actionResetZoom.keyTest(event)) {\n event.preventDefault();\n app.actionManager.executeAction(_actions_actionCanvas__WEBPACK_IMPORTED_MODULE_8__.actionResetZoom);\n updateWysiwygStyle();\n } else if (_actions_actionProperties__WEBPACK_IMPORTED_MODULE_7__.actionDecreaseFontSize.keyTest(event)) {\n app.actionManager.executeAction(_actions_actionProperties__WEBPACK_IMPORTED_MODULE_7__.actionDecreaseFontSize);\n } else if (_actions_actionProperties__WEBPACK_IMPORTED_MODULE_7__.actionIncreaseFontSize.keyTest(event)) {\n app.actionManager.executeAction(_actions_actionProperties__WEBPACK_IMPORTED_MODULE_7__.actionIncreaseFontSize);\n } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_0__.KEYS.ESCAPE) {\n event.preventDefault();\n submittedViaKeyboard = true;\n handleSubmit();\n } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_0__.KEYS.ENTER && event[_keys__WEBPACK_IMPORTED_MODULE_0__.KEYS.CTRL_OR_CMD]) {\n event.preventDefault();\n\n if (event.isComposing || event.keyCode === 229) {\n return;\n }\n\n submittedViaKeyboard = true;\n handleSubmit();\n } else if (event.key === _keys__WEBPACK_IMPORTED_MODULE_0__.KEYS.TAB || event[_keys__WEBPACK_IMPORTED_MODULE_0__.KEYS.CTRL_OR_CMD] && (event.code === _keys__WEBPACK_IMPORTED_MODULE_0__.CODES.BRACKET_LEFT || event.code === _keys__WEBPACK_IMPORTED_MODULE_0__.CODES.BRACKET_RIGHT)) {\n event.preventDefault();\n\n if (event.isComposing) {\n return;\n } else if (event.shiftKey || event.code === _keys__WEBPACK_IMPORTED_MODULE_0__.CODES.BRACKET_LEFT) {\n outdent();\n } else {\n indent();\n } // We must send an input event to resize the element\n\n\n editable.dispatchEvent(new Event(\"input\"));\n }\n };\n\n const TAB_SIZE = 4;\n const TAB = \" \".repeat(TAB_SIZE);\n const RE_LEADING_TAB = new RegExp(`^ {1,${TAB_SIZE}}`);\n\n const indent = () => {\n const {\n selectionStart,\n selectionEnd\n } = editable;\n const linesStartIndices = getSelectedLinesStartIndices();\n let value = editable.value;\n linesStartIndices.forEach(startIndex => {\n const startValue = value.slice(0, startIndex);\n const endValue = value.slice(startIndex);\n value = `${startValue}${TAB}${endValue}`;\n });\n editable.value = value;\n editable.selectionStart = selectionStart + TAB_SIZE;\n editable.selectionEnd = selectionEnd + TAB_SIZE * linesStartIndices.length;\n };\n\n const outdent = () => {\n const {\n selectionStart,\n selectionEnd\n } = editable;\n const linesStartIndices = getSelectedLinesStartIndices();\n const removedTabs = [];\n let value = editable.value;\n linesStartIndices.forEach(startIndex => {\n const tabMatch = value.slice(startIndex, startIndex + TAB_SIZE).match(RE_LEADING_TAB);\n\n if (tabMatch) {\n const startValue = value.slice(0, startIndex);\n const endValue = value.slice(startIndex + tabMatch[0].length); // Delete a tab from the line\n\n value = `${startValue}${endValue}`;\n removedTabs.push(startIndex);\n }\n });\n editable.value = value;\n\n if (removedTabs.length) {\n if (selectionStart > removedTabs[removedTabs.length - 1]) {\n editable.selectionStart = Math.max(selectionStart - TAB_SIZE, removedTabs[removedTabs.length - 1]);\n } else {\n // If the cursor is before the first tab removed, ex:\n // Line| #1\n // Line #2\n // Lin|e #3\n // we should reset the selectionStart to his initial value.\n editable.selectionStart = selectionStart;\n }\n\n editable.selectionEnd = Math.max(editable.selectionStart, selectionEnd - TAB_SIZE * removedTabs.length);\n }\n };\n /**\n * @returns indices of start positions of selected lines, in reverse order\n */\n\n\n const getSelectedLinesStartIndices = () => {\n let {\n selectionStart,\n selectionEnd,\n value\n } = editable; // chars before selectionStart on the same line\n\n const startOffset = value.slice(0, selectionStart).match(/[^\\n]*$/)[0].length; // put caret at the start of the line\n\n selectionStart = selectionStart - startOffset;\n const selected = value.slice(selectionStart, selectionEnd);\n return selected.split(\"\\n\").reduce((startIndices, line, idx, lines) => startIndices.concat(idx ? // curr line index is prev line's start + prev line's length + \\n\n startIndices[idx - 1] + lines[idx - 1].length + 1 : // first selected line\n selectionStart), []).reverse();\n };\n\n const stopEvent = event => {\n if (event.target instanceof HTMLCanvasElement) {\n event.preventDefault();\n event.stopPropagation();\n }\n }; // using a state variable instead of passing it to the handleSubmit callback\n // so that we don't need to create separate a callback for event handlers\n\n\n let submittedViaKeyboard = false;\n\n const handleSubmit = () => {\n var _a, _b; // prevent double submit\n\n\n if (isDestroyed) {\n return;\n }\n\n isDestroyed = true; // cleanup must be run before onSubmit otherwise when app blurs the wysiwyg\n // it'd get stuck in an infinite loop of blur→onSubmit after we re-focus the\n // wysiwyg on update\n\n cleanup();\n const updateElement = (_a = _scene_Scene__WEBPACK_IMPORTED_MODULE_2__[\"default\"].getScene(element)) === null || _a === void 0 ? void 0 : _a.getElement(element.id);\n\n if (!updateElement) {\n return;\n }\n\n const container = (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.getContainerElement)(updateElement, app.scene.getNonDeletedElementsMap());\n\n if (container) {\n if (editable.value.trim()) {\n const boundTextElementId = (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.getBoundTextElementId)(container);\n\n if (!boundTextElementId || boundTextElementId !== element.id) {\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_5__.mutateElement)(container, {\n boundElements: (container.boundElements || []).concat({\n type: \"text\",\n id: element.id\n })\n });\n } else if ((0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isArrowElement)(container)) {\n // updating an arrow label may change bounds, prevent stale cache:\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_5__.bumpVersion)(container);\n }\n } else {\n (0,_mutateElement__WEBPACK_IMPORTED_MODULE_5__.mutateElement)(container, {\n boundElements: (_b = container.boundElements) === null || _b === void 0 ? void 0 : _b.filter(ele => !(0,_typeChecks__WEBPACK_IMPORTED_MODULE_3__.isTextElement)(ele))\n });\n }\n\n (0,_textElement__WEBPACK_IMPORTED_MODULE_6__.redrawTextBoundingBox)(updateElement, container, app.scene.getNonDeletedElementsMap());\n }\n\n app.setState({\n openPopup: null\n }); //zsviczian (container text color issue)\n\n onSubmit({\n viaKeyboard: submittedViaKeyboard,\n nextOriginalText: editable.value\n });\n };\n\n const cleanup = () => {\n // remove events to ensure they don't late-fire\n editable.onblur = null;\n editable.oninput = null;\n editable.onkeydown = null;\n\n if (observer) {\n observer.disconnect();\n }\n\n window.removeEventListener(\"resize\", updateWysiwygStyle);\n window.removeEventListener(\"wheel\", stopEvent, true);\n window.removeEventListener(\"pointerdown\", onPointerDown);\n window.removeEventListener(\"pointerup\", bindBlurEvent);\n window.removeEventListener(\"blur\", handleSubmit);\n window.removeEventListener(\"beforeunload\", handleSubmit);\n unbindUpdate();\n unbindOnScroll();\n editable.remove();\n };\n\n const bindBlurEvent = event => {\n window.removeEventListener(\"pointerup\", bindBlurEvent); // Deferred so that the pointerdown that initiates the wysiwyg doesn't\n // trigger the blur on ensuing pointerup.\n // Also to handle cases such as picking a color which would trigger a blur\n // in that same tick.\n\n const target = event === null || event === void 0 ? void 0 : event.target;\n const isPropertiesTrigger = target instanceof HTMLElement && target.classList.contains(\"properties-trigger\");\n setTimeout(() => {\n editable.onblur = handleSubmit; // case: clicking on the same property → no change → no update → no focus\n\n if (!isPropertiesTrigger) {\n editable.focus();\n }\n });\n };\n\n const temporarilyDisableSubmit = () => {\n editable.onblur = null;\n window.addEventListener(\"pointerup\", bindBlurEvent); // handle edge-case where pointerup doesn't fire e.g. due to user\n // alt-tabbing away\n\n window.addEventListener(\"blur\", handleSubmit);\n }; // prevent blur when changing properties from the menu\n\n\n const onPointerDown = event => {\n const target = event === null || event === void 0 ? void 0 : event.target;\n const isShapeActionsPanel = //zsviczian\n (event.target instanceof HTMLElement || event.target instanceof SVGElement) && (event.target.closest(`.${_constants__WEBPACK_IMPORTED_MODULE_4__.CLASSES.SHAPE_ACTIONS_MENU}`) || event.target.closest(`.${_constants__WEBPACK_IMPORTED_MODULE_4__.CLASSES.SHAPE_ACTIONS_MOBILE_MENU}`) || event.target.closest(`.${_constants__WEBPACK_IMPORTED_MODULE_4__.CLASSES.MOBILE_TOOLBAR}`)); // panning canvas\n\n if (event.button === _constants__WEBPACK_IMPORTED_MODULE_4__.POINTER_BUTTON.WHEEL) {\n // trying to pan by clicking inside text area itself -> handle here\n if (target instanceof HTMLTextAreaElement) {\n event.preventDefault();\n app.handleCanvasPanUsingWheelOrSpaceDrag(event);\n }\n\n temporarilyDisableSubmit();\n return;\n }\n\n const isPropertiesTrigger = target instanceof HTMLElement && target.classList.contains(\"properties-trigger\");\n\n if ((event.target instanceof HTMLElement || event.target instanceof SVGElement) && (isShapeActionsPanel || //zsviczian\n event.target.closest(`.${_constants__WEBPACK_IMPORTED_MODULE_4__.CLASSES.SHAPE_ACTIONS_MENU}, .${_constants__WEBPACK_IMPORTED_MODULE_4__.CLASSES.ZOOM_ACTIONS}`)) && !(0,_utils__WEBPACK_IMPORTED_MODULE_1__.isWritableElement)(event.target) || isPropertiesTrigger) {\n temporarilyDisableSubmit();\n } else if (event.target instanceof HTMLCanvasElement && // Vitest simply ignores stopPropagation, capture-mode, or rAF\n // so without introducing crazier hacks, nothing we can do\n !(0,_utils__WEBPACK_IMPORTED_MODULE_1__.isTestEnv)()) {\n // On mobile, blur event doesn't seem to always fire correctly,\n // so we want to also submit on pointerdown outside the wysiwyg.\n // Done in the next frame to prevent pointerdown from creating a new text\n // immediately (if tools locked) so that users on mobile have chance\n // to submit first (to hide virtual keyboard).\n // Note: revisit if we want to differ this behavior on Desktop\n requestAnimationFrame(() => {\n handleSubmit();\n });\n }\n }; // handle updates of textElement properties of editing element\n\n\n const unbindUpdate = app.scene.onUpdate(() => {\n var _a;\n\n updateWysiwygStyle();\n const isPopupOpened = !!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(\".properties-content\"));\n\n if (!isPopupOpened) {\n editable.focus();\n }\n });\n const unbindOnScroll = app.onScrollChangeEmitter.on(() => {\n updateWysiwygStyle();\n }); // ---------------------------------------------------------------------------\n\n let isDestroyed = false;\n\n if (autoSelect) {\n // select on init (focusing is done separately inside the bindBlurEvent()\n // because we need it to happen *after* the blur event from `pointerdown`)\n editable.select();\n }\n\n bindBlurEvent(); // reposition wysiwyg in case of canvas is resized. Using ResizeObserver\n // is preferred so we catch changes from host, where window may not resize.\n\n let observer = null;\n\n if (canvas && \"ResizeObserver\" in window) {\n observer = new window.ResizeObserver(() => {\n updateWysiwygStyle();\n });\n observer.observe(canvas);\n } else {\n window.addEventListener(\"resize\", updateWysiwygStyle);\n }\n\n editable.onpointerdown = event => event.stopPropagation(); // rAF (+ capture to by doubly sure) so we don't catch te pointerdown that\n // triggered the wysiwyg\n\n\n requestAnimationFrame(() => {\n window.addEventListener(\"pointerdown\", onPointerDown, {\n capture: true\n });\n });\n window.addEventListener(\"beforeunload\", handleSubmit);\n excalidrawContainer === null || excalidrawContainer === void 0 ? void 0 : excalidrawContainer.querySelector(\".excalidraw-textEditorContainer\").appendChild(editable);\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./element/textWysiwyg.tsx?");
|
|
3008
3008
|
|
|
3009
3009
|
/***/ }),
|
|
3010
3010
|
|
|
@@ -3026,7 +3026,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
3026
3026
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
3027
3027
|
|
|
3028
3028
|
"use strict";
|
|
3029
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"canApplyRoundnessTypeToElement\": () => (/* binding */ canApplyRoundnessTypeToElement),\n/* harmony export */ \"getDefaultRoundnessTypeForElement\": () => (/* binding */ getDefaultRoundnessTypeForElement),\n/* harmony export */ \"hasBoundTextElement\": () => (/* binding */ hasBoundTextElement),\n/* harmony export */ \"isArrowElement\": () => (/* binding */ isArrowElement),\n/* harmony export */ \"isBindableElement\": () => (/* binding */ isBindableElement),\n/* harmony export */ \"isBindingElement\": () => (/* binding */ isBindingElement),\n/* harmony export */ \"isBindingElementType\": () => (/* binding */ isBindingElementType),\n/* harmony export */ \"isBoundToContainer\": () => (/* binding */ isBoundToContainer),\n/* harmony export */ \"isBounds\": () => (/* binding */ isBounds),\n/* harmony export */ \"isElbowArrow\": () => (/* binding */ isElbowArrow),\n/* harmony export */ \"isEmbeddableElement\": () => (/* binding */ isEmbeddableElement),\n/* harmony export */ \"isExcalidrawElement\": () => (/* binding */ isExcalidrawElement),\n/* harmony export */ \"isFixedPointBinding\": () => (/* binding */ isFixedPointBinding),\n/* harmony export */ \"isFlowchartNodeElement\": () => (/* binding */ isFlowchartNodeElement),\n/* harmony export */ \"isFrameElement\": () => (/* binding */ isFrameElement),\n/* harmony export */ \"isFrameLikeElement\": () => (/* binding */ isFrameLikeElement),\n/* harmony export */ \"isFreeDrawElement\": () => (/* binding */ isFreeDrawElement),\n/* harmony export */ \"isFreeDrawElementType\": () => (/* binding */ isFreeDrawElementType),\n/* harmony export */ \"isIframeElement\": () => (/* binding */ isIframeElement),\n/* harmony export */ \"isIframeLikeElement\": () => (/* binding */ isIframeLikeElement),\n/* harmony export */ \"isImageElement\": () => (/* binding */ isImageElement),\n/* harmony export */ \"isInitializedImageElement\": () => (/* binding */ isInitializedImageElement),\n/* harmony export */ \"isLinearElement\": () => (/* binding */ isLinearElement),\n/* harmony export */ \"isLinearElementType\": () => (/* binding */ isLinearElementType),\n/* harmony export */ \"isMagicFrameElement\": () => (/* binding */ isMagicFrameElement),\n/* harmony export */ \"isRectangularElement\": () => (/* binding */ isRectangularElement),\n/* harmony export */ \"isRectanguloidElement\": () => (/* binding */ isRectanguloidElement),\n/* harmony export */ \"isTextBindableContainer\": () => (/* binding */ isTextBindableContainer),\n/* harmony export */ \"isTextElement\": () => (/* binding */ isTextElement),\n/* harmony export */ \"isUsingAdaptiveRadius\": () => (/* binding */ isUsingAdaptiveRadius),\n/* harmony export */ \"isUsingProportionalRadius\": () => (/* binding */ isUsingProportionalRadius)\n/* harmony export */ });\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n\n\nconst isInitializedImageElement = element => {\n return !!element && element.type === \"image\" && !!element.fileId;\n};\nconst isImageElement = element => {\n return !!element && element.type === \"image\";\n};\nconst isEmbeddableElement = element => {\n return !!element && element.type === \"embeddable\";\n};\nconst isIframeElement = element => {\n return !!element && element.type === \"iframe\";\n};\nconst isIframeLikeElement = element => {\n return !!element && (element.type === \"iframe\" || element.type === \"embeddable\");\n};\nconst isTextElement = element => {\n return element != null && element.type === \"text\";\n};\nconst isFrameElement = element => {\n return element != null && element.type === \"frame\";\n};\nconst isMagicFrameElement = element => {\n return element != null && element.type === \"magicframe\";\n};\nconst isFrameLikeElement = element => {\n return element != null && (element.type === \"frame\" || element.type === \"magicframe\");\n};\nconst isFreeDrawElement = element => {\n return element != null && isFreeDrawElementType(element.type);\n};\nconst isFreeDrawElementType = elementType => {\n return elementType === \"freedraw\";\n};\nconst isLinearElement = element => {\n return element != null && isLinearElementType(element.type);\n};\nconst isArrowElement = element => {\n return element != null && element.type === \"arrow\";\n};\nconst isElbowArrow = element => {\n return isArrowElement(element) && element.elbowed;\n};\nconst isLinearElementType = elementType => {\n return elementType === \"arrow\" || elementType === \"line\" // || elementType === \"freedraw\"\n ;\n};\nconst isBindingElement = (element, includeLocked = true) => {\n return element != null && (!element.locked || includeLocked === true) && isBindingElementType(element.type);\n};\nconst isBindingElementType = elementType => {\n return elementType === \"arrow\";\n};\nconst isBindableElement = (element, includeLocked = true) => {\n return element != null && (!element.locked || includeLocked === true) && (element.type === \"rectangle\" || element.type === \"diamond\" || element.type === \"ellipse\" || element.type === \"image\" || element.type === \"iframe\" || element.type === \"embeddable\" || element.type === \"frame\" || element.type === \"magicframe\" || element.type === \"text\" && !element.containerId);\n};\nconst isRectanguloidElement = element => {\n return element != null && (element.type === \"rectangle\" || element.type === \"diamond\" || element.type === \"image\" || element.type === \"iframe\" || element.type === \"embeddable\" || element.type === \"frame\" || element.type === \"magicframe\" || element.type === \"text\" && !element.containerId);\n}; // TODO: Remove this when proper distance calculation is introduced\n// @see binding.ts:distanceToBindableElement()\n\nconst isRectangularElement = element => {\n return element != null && (element.type === \"rectangle\" || element.type === \"image\" || element.type === \"text\" || element.type === \"iframe\" || element.type === \"embeddable\" || element.type === \"frame\" || element.type === \"magicframe\" || element.type === \"freedraw\");\n};\nconst isTextBindableContainer = (element, includeLocked = true) => {\n return element != null && (!element.locked || includeLocked === true) && (element.type === \"rectangle\" || element.type === \"diamond\" || element.type === \"ellipse\" || isArrowElement(element));\n};\nconst isExcalidrawElement = element => {\n const type = element === null || element === void 0 ? void 0 : element.type;\n\n if (!type) {\n return false;\n }\n\n switch (type) {\n case \"text\":\n case \"diamond\":\n case \"rectangle\":\n case \"iframe\":\n case \"embeddable\":\n case \"ellipse\":\n case \"arrow\":\n case \"freedraw\":\n case \"line\":\n case \"frame\":\n case \"magicframe\":\n case \"image\":\n case \"selection\":\n {\n return true;\n }\n\n default:\n {\n (0,_utils__WEBPACK_IMPORTED_MODULE_1__.assertNever)(type, null);\n return false;\n }\n }\n};\nconst isFlowchartNodeElement = element => {\n return element.type === \"rectangle\" || element.type === \"ellipse\" || element.type === \"diamond\";\n};\nconst hasBoundTextElement = element => {\n var _a;\n\n return isTextBindableContainer(element) && !!((_a = element.boundElements) === null || _a === void 0 ? void 0 : _a.some(({\n type\n }) => type === \"text\"));\n};\nconst isBoundToContainer = element => {\n return element !== null && \"containerId\" in element && element.containerId !== null && isTextElement(element);\n};\nconst isUsingAdaptiveRadius = type => type === \"rectangle\" || type === \"embeddable\" || type === \"iframe\" || type === \"image\";\nconst isUsingProportionalRadius = type => type === \"line\" || type === \"arrow\" || type === \"diamond\";\nconst canApplyRoundnessTypeToElement = (roundnessType, element) => {\n if ((roundnessType === _constants__WEBPACK_IMPORTED_MODULE_0__.ROUNDNESS.ADAPTIVE_RADIUS || // if legacy roundness, it can be applied to elements that currently\n // use adaptive radius\n roundnessType === _constants__WEBPACK_IMPORTED_MODULE_0__.ROUNDNESS.LEGACY) && isUsingAdaptiveRadius(element.type)) {\n return true;\n }\n\n if (roundnessType === _constants__WEBPACK_IMPORTED_MODULE_0__.ROUNDNESS.PROPORTIONAL_RADIUS && isUsingProportionalRadius(element.type)) {\n return true;\n }\n\n return false;\n};\nconst getDefaultRoundnessTypeForElement = element => {\n if (isUsingProportionalRadius(element.type)) {\n return {\n type: _constants__WEBPACK_IMPORTED_MODULE_0__.ROUNDNESS.PROPORTIONAL_RADIUS\n };\n }\n\n if (isUsingAdaptiveRadius(element.type)) {\n return {\n type: _constants__WEBPACK_IMPORTED_MODULE_0__.ROUNDNESS.ADAPTIVE_RADIUS\n };\n }\n\n return null;\n};\nconst isFixedPointBinding = binding => {\n return binding.fixedPoint != null;\n}; // TODO: Move this to @excalidraw/math\n\nconst isBounds = box => Array.isArray(box) && box.length === 4 && typeof box[0] === \"number\" && typeof box[1] === \"number\" && typeof box[2] === \"number\" && typeof box[3] === \"number\";\n\n//# sourceURL=webpack://ExcalidrawLib/./element/typeChecks.ts?");
|
|
3029
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"canApplyRoundnessTypeToElement\": () => (/* binding */ canApplyRoundnessTypeToElement),\n/* harmony export */ \"getDefaultRoundnessTypeForElement\": () => (/* binding */ getDefaultRoundnessTypeForElement),\n/* harmony export */ \"hasBoundTextElement\": () => (/* binding */ hasBoundTextElement),\n/* harmony export */ \"isArrowElement\": () => (/* binding */ isArrowElement),\n/* harmony export */ \"isBindableElement\": () => (/* binding */ isBindableElement),\n/* harmony export */ \"isBindingElement\": () => (/* binding */ isBindingElement),\n/* harmony export */ \"isBindingElementType\": () => (/* binding */ isBindingElementType),\n/* harmony export */ \"isBoundToContainer\": () => (/* binding */ isBoundToContainer),\n/* harmony export */ \"isBounds\": () => (/* binding */ isBounds),\n/* harmony export */ \"isElbowArrow\": () => (/* binding */ isElbowArrow),\n/* harmony export */ \"isEmbeddableElement\": () => (/* binding */ isEmbeddableElement),\n/* harmony export */ \"isExcalidrawElement\": () => (/* binding */ isExcalidrawElement),\n/* harmony export */ \"isFixedPointBinding\": () => (/* binding */ isFixedPointBinding),\n/* harmony export */ \"isFlowchartNodeElement\": () => (/* binding */ isFlowchartNodeElement),\n/* harmony export */ \"isFrameElement\": () => (/* binding */ isFrameElement),\n/* harmony export */ \"isFrameLikeElement\": () => (/* binding */ isFrameLikeElement),\n/* harmony export */ \"isFreeDrawElement\": () => (/* binding */ isFreeDrawElement),\n/* harmony export */ \"isFreeDrawElementType\": () => (/* binding */ isFreeDrawElementType),\n/* harmony export */ \"isIframeElement\": () => (/* binding */ isIframeElement),\n/* harmony export */ \"isIframeLikeElement\": () => (/* binding */ isIframeLikeElement),\n/* harmony export */ \"isImageElement\": () => (/* binding */ isImageElement),\n/* harmony export */ \"isInitializedImageElement\": () => (/* binding */ isInitializedImageElement),\n/* harmony export */ \"isLinearElement\": () => (/* binding */ isLinearElement),\n/* harmony export */ \"isLinearElementType\": () => (/* binding */ isLinearElementType),\n/* harmony export */ \"isMagicFrameElement\": () => (/* binding */ isMagicFrameElement),\n/* harmony export */ \"isRectangularElement\": () => (/* binding */ isRectangularElement),\n/* harmony export */ \"isRectanguloidElement\": () => (/* binding */ isRectanguloidElement),\n/* harmony export */ \"isTextBindableContainer\": () => (/* binding */ isTextBindableContainer),\n/* harmony export */ \"isTextElement\": () => (/* binding */ isTextElement),\n/* harmony export */ \"isUsingAdaptiveRadius\": () => (/* binding */ isUsingAdaptiveRadius),\n/* harmony export */ \"isUsingProportionalRadius\": () => (/* binding */ isUsingProportionalRadius)\n/* harmony export */ });\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n\n\nconst isInitializedImageElement = element => {\n return !!element && element.type === \"image\" && !!element.fileId;\n};\nconst isImageElement = element => {\n return !!element && element.type === \"image\";\n};\nconst isEmbeddableElement = element => {\n return !!element && element.type === \"embeddable\";\n};\nconst isIframeElement = element => {\n return !!element && element.type === \"iframe\";\n};\nconst isIframeLikeElement = element => {\n return !!element && (element.type === \"iframe\" || element.type === \"embeddable\");\n};\nconst isTextElement = element => {\n return element != null && element.type === \"text\";\n};\nconst isFrameElement = element => {\n return element != null && element.type === \"frame\";\n};\nconst isMagicFrameElement = element => {\n return element != null && element.type === \"magicframe\";\n};\nconst isFrameLikeElement = element => {\n return element != null && (element.type === \"frame\" || element.type === \"magicframe\");\n};\nconst isFreeDrawElement = element => {\n return element != null && isFreeDrawElementType(element.type);\n};\nconst isFreeDrawElementType = elementType => {\n return elementType === \"freedraw\";\n};\nconst isLinearElement = element => {\n return element != null && isLinearElementType(element.type);\n};\nconst isArrowElement = element => {\n return element != null && element.type === \"arrow\";\n};\nconst isElbowArrow = element => {\n return isArrowElement(element) && element.elbowed;\n};\nconst isLinearElementType = elementType => {\n return elementType === \"arrow\" || elementType === \"line\" // || elementType === \"freedraw\"\n ;\n};\nconst isBindingElement = (element, includeLocked = true) => {\n return element != null && (!element.locked || includeLocked === true) && isBindingElementType(element.type);\n};\nconst isBindingElementType = elementType => {\n return elementType === \"arrow\";\n};\nconst isBindableElement = (element, includeLocked = true) => {\n return element != null && (!element.locked || includeLocked === true) && (element.type === \"rectangle\" || element.type === \"diamond\" || element.type === \"ellipse\" || element.type === \"image\" || element.type === \"iframe\" || element.type === \"embeddable\" || element.type === \"frame\" || element.type === \"magicframe\" || element.type === \"text\" && !element.containerId);\n};\nconst isRectanguloidElement = element => {\n return element != null && (element.type === \"rectangle\" || element.type === \"diamond\" || element.type === \"image\" || element.type === \"iframe\" || element.type === \"embeddable\" || element.type === \"frame\" || element.type === \"magicframe\" || element.type === \"text\" && !element.containerId);\n}; // TODO: Remove this when proper distance calculation is introduced\n// @see binding.ts:distanceToBindableElement()\n\nconst isRectangularElement = element => {\n return element != null && (element.type === \"rectangle\" || element.type === \"image\" || element.type === \"text\" || element.type === \"iframe\" || element.type === \"embeddable\" || element.type === \"frame\" || element.type === \"magicframe\" || element.type === \"freedraw\");\n};\nconst isTextBindableContainer = (element, includeLocked = true) => {\n return element != null && (!element.locked || includeLocked === true) && (element.type === \"rectangle\" || element.type === \"diamond\" || element.type === \"ellipse\" || isArrowElement(element));\n};\nconst isExcalidrawElement = element => {\n const type = element === null || element === void 0 ? void 0 : element.type;\n\n if (!type) {\n return false;\n }\n\n switch (type) {\n case \"text\":\n case \"diamond\":\n case \"rectangle\":\n case \"iframe\":\n case \"embeddable\":\n case \"ellipse\":\n case \"arrow\":\n case \"freedraw\":\n case \"line\":\n case \"frame\":\n case \"magicframe\":\n case \"image\":\n case \"selection\":\n {\n return true;\n }\n\n default:\n {\n (0,_utils__WEBPACK_IMPORTED_MODULE_1__.assertNever)(type, null);\n return false;\n }\n }\n};\nconst isFlowchartNodeElement = element => {\n return element.type === \"rectangle\" || element.type === \"ellipse\" || element.type === \"diamond\";\n};\nconst hasBoundTextElement = element => {\n var _a;\n\n return isTextBindableContainer(element) && !!((_a = element.boundElements) === null || _a === void 0 ? void 0 : _a.some(({\n type\n }) => type === \"text\"));\n};\nconst isBoundToContainer = element => {\n return element !== null && \"containerId\" in element && element.containerId !== null && isTextElement(element);\n};\nconst isUsingAdaptiveRadius = type => type === \"rectangle\" || type === \"embeddable\" || type === \"iframe\" || type === \"image\";\nconst isUsingProportionalRadius = type => type === \"line\" || type === \"arrow\" || type === \"diamond\";\nconst canApplyRoundnessTypeToElement = (roundnessType, element) => {\n if ((roundnessType === _constants__WEBPACK_IMPORTED_MODULE_0__.ROUNDNESS.ADAPTIVE_RADIUS || // if legacy roundness, it can be applied to elements that currently\n // use adaptive radius\n roundnessType === _constants__WEBPACK_IMPORTED_MODULE_0__.ROUNDNESS.LEGACY) && isUsingAdaptiveRadius(element.type)) {\n return true;\n }\n\n if (roundnessType === _constants__WEBPACK_IMPORTED_MODULE_0__.ROUNDNESS.PROPORTIONAL_RADIUS && isUsingProportionalRadius(element.type)) {\n return true;\n }\n\n return false;\n};\nconst getDefaultRoundnessTypeForElement = element => {\n if (isUsingProportionalRadius(element.type)) {\n return {\n type: _constants__WEBPACK_IMPORTED_MODULE_0__.ROUNDNESS.PROPORTIONAL_RADIUS\n };\n }\n\n if (isUsingAdaptiveRadius(element.type)) {\n return {\n type: _constants__WEBPACK_IMPORTED_MODULE_0__.ROUNDNESS.ADAPTIVE_RADIUS\n };\n }\n\n return null;\n};\nconst isFixedPointBinding = binding => {\n return Object.hasOwn(binding, \"fixedPoint\") && binding.fixedPoint != null;\n}; // TODO: Move this to @excalidraw/math\n\nconst isBounds = box => Array.isArray(box) && box.length === 4 && typeof box[0] === \"number\" && typeof box[1] === \"number\" && typeof box[2] === \"number\" && typeof box[3] === \"number\";\n\n//# sourceURL=webpack://ExcalidrawLib/./element/typeChecks.ts?");
|
|
3030
3030
|
|
|
3031
3031
|
/***/ }),
|
|
3032
3032
|
|
|
@@ -3070,7 +3070,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
3070
3070
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
3071
3071
|
|
|
3072
3072
|
"use strict";
|
|
3073
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"ExcalidrawFont\": () => (/* binding */ ExcalidrawFont),\n/* harmony export */ \"UNPKG_FALLBACK_URL\": () => (/* binding */ UNPKG_FALLBACK_URL)\n/* harmony export */ });\n/* harmony import */ var _data_encode__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../data/encode */ \"./data/encode.ts\");\n/* harmony import */ var _metadata__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./metadata */ \"./fonts/metadata.ts\");\n/* harmony import */ var _wasm_woff2_loader__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./wasm/woff2.loader */ \"./fonts/wasm/woff2.loader.ts\");\n/* harmony import */ var _wasm_hb_subset_loader__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./wasm/hb-subset.loader */ \"./fonts/wasm/hb-subset.loader.ts\");\n/* harmony import */ var _obsidianUtils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../obsidianUtils */ \"./obsidianUtils.ts\");\n\n\n\n\n\nconst UNPKG_FALLBACK_URL = `https://unpkg.com/${ true ? `${\"@zsviczian/excalidraw\"}@${({\"VITE_APP_BACKEND_V2_GET_URL\":\"https://json-dev.excalidraw.com/api/v2/\",\"VITE_APP_BACKEND_V2_POST_URL\":\"https://json-dev.excalidraw.com/api/v2/post/\",\"VITE_APP_LIBRARY_URL\":\"https://libraries.excalidraw.com\",\"VITE_APP_LIBRARY_BACKEND\":\"https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries\",\"VITE_APP_WS_SERVER_URL\":\"http://localhost:3002\",\"VITE_APP_PLUS_LP\":\"https://plus.excalidraw.com\",\"VITE_APP_PLUS_APP\":\"https://app.excalidraw.com\",\"VITE_APP_AI_BACKEND\":\"http://localhost:3015\",\"VITE_APP_FIREBASE_CONFIG\":\"{\\\"apiKey\\\":\\\"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8\\\",\\\"authDomain\\\":\\\"excalidraw-oss-dev.firebaseapp.com\\\",\\\"projectId\\\":\\\"excalidraw-oss-dev\\\",\\\"storageBucket\\\":\\\"excalidraw-oss-dev.appspot.com\\\",\\\"messagingSenderId\\\":\\\"664559512677\\\",\\\"appId\\\":\\\"1:664559512677:web:a385181f2928d328a7aa8c\\\"}\",\"VITE_APP_DEV_DISABLE_LIVE_RELOAD\":\"\",\"VITE_APP_ENABLE_TRACKING\":\"true\",\"FAST_REFRESH\":\"false\",\"VITE_APP_PORT\":\"3000\",\"VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX\":\"\",\"VITE_APP_COLLAPSE_OVERLAY\":\"true\",\"VITE_APP_ENABLE_ESLINT\":\"true\",\"VITE_PKG_NAME\":\"@zsviczian/excalidraw\",\"VITE_PKG_VERSION\":\"0.17.1-obsidian-52\",\"VITE_IS_EXCALIDRAW_NPM_PACKAGE\":true}).PKG_VERSION}` // should be provided by vite during package build\n: 0 // fallback to latest package version (i.e. for app)\n}/dist/prod/`;\nclass ExcalidrawFont {\n constructor(family, uri, descriptors) {\n this.urls = ExcalidrawFont.createUrls(uri);\n const sources = this.urls.map(url => `url(${url}) ${ExcalidrawFont.getFormat(url)}`).join(\", \");\n this.fontFace = new FontFace(family, sources, Object.assign({\n display: \"swap\",\n style: \"normal\",\n weight: \"400\"\n }, descriptors));\n }\n /**\n * Tries to fetch woff2 content, based on the registered urls (from first to last, treated as fallbacks).\n *\n * NOTE: assumes usage of `dataurl` outside the browser environment\n *\n * @returns base64 with subsetted glyphs based on the passed codepoint, last defined url otherwise\n */\n\n\n async getContent(codePoints) {\n let i = 0;\n const errorMessages = [];\n\n while (i < this.urls.length) {\n const url = this.urls[i]; // it's dataurl (server), the font is inlined as base64, no need to fetch\n\n if (url.protocol === \"data:\") {\n const arrayBuffer = (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_4__.getArrayBufferFromBase64)(url.toString());\n const base64 = await ExcalidrawFont.subsetGlyphsByCodePoints(arrayBuffer, codePoints);\n return base64;\n }\n\n try {\n const response = await fetch(url, {\n headers: {\n Accept: \"font/woff2\"\n }\n });\n\n if (response.ok) {\n const arrayBuffer = await response.arrayBuffer();\n const base64 = await ExcalidrawFont.subsetGlyphsByCodePoints(arrayBuffer, codePoints);\n return base64;\n } // response not ok, try to continue\n\n\n errorMessages.push(`\"${url.toString()}\" returned status \"${response.status}\"`);\n } catch (e) {\n errorMessages.push(`\"${url.toString()}\" returned error \"${e}\"`);\n }\n\n i++;\n }\n\n console.error(`Failed to fetch font \"${this.fontFace.family}\" from urls \"${this.urls.toString()}`, JSON.stringify(errorMessages, undefined, 2)); // in case of issues, at least return the last url as a content\n // defaults to unpkg for bundled fonts (so that we don't have to host them forever) and http url for others\n\n return this.urls.length ? this.urls[this.urls.length - 1].toString() : \"\";\n }\n /**\n * Tries to subset glyphs in a font based on the used codepoints, returning the font as daturl.\n *\n * @param arrayBuffer font data buffer, preferrably in the woff2 format, though others should work as well\n * @param codePoints codepoints used to subset the glyphs\n *\n * @returns font with subsetted glyphs (all glyphs in case of errors) converted into a dataurl\n */\n\n\n static async subsetGlyphsByCodePoints(arrayBuffer, codePoints) {\n try {\n // lazy loaded wasm modules to avoid multiple initializations in case of concurrent triggers\n const {\n compress,\n decompress\n } = await (0,_wasm_woff2_loader__WEBPACK_IMPORTED_MODULE_2__[\"default\"])();\n const {\n subset\n } = await (0,_wasm_hb_subset_loader__WEBPACK_IMPORTED_MODULE_3__[\"default\"])();\n const decompressedBinary = decompress(arrayBuffer).buffer;\n const subsetSnft = subset(decompressedBinary, codePoints);\n const compressedBinary = compress(subsetSnft.buffer);\n return ExcalidrawFont.toBase64(compressedBinary.buffer);\n } catch (e) {\n console.error(\"Skipped glyph subsetting\", e); // Fallback to encoding whole font in case of errors\n\n return ExcalidrawFont.toBase64(arrayBuffer);\n }\n }\n\n static async toBase64(arrayBuffer) {\n let base64;\n\n if (typeof Buffer !== \"undefined\") {\n // node + server-side\n base64 = Buffer.from(arrayBuffer).toString(\"base64\");\n } else {\n base64 = await (0,_data_encode__WEBPACK_IMPORTED_MODULE_0__.stringToBase64)(await (0,_data_encode__WEBPACK_IMPORTED_MODULE_0__.toByteString)(arrayBuffer), true);\n }\n\n return `data:font/woff2;base64,${base64}`;\n }\n\n static createUrls(uri) {\n if (uri.startsWith(_metadata__WEBPACK_IMPORTED_MODULE_1__.LOCAL_FONT_PROTOCOL)) {\n // no url for local fonts\n return [];\n }\n\n if (uri.startsWith(\"http\") || uri.startsWith(\"data\")) {\n // one url for http imports or data url\n return [new URL(uri)];\n } // absolute assets paths, which are found in tests and excalidraw-app build, won't work with base url, so we are stripping initial slash away\n\n\n const assetUrl = uri.replace(/^\\/+/, \"\");\n const urls = [];\n\n if (typeof window.EXCALIDRAW_ASSET_PATH === \"string\") {\n const normalizedBaseUrl = this.normalizeBaseUrl(window.EXCALIDRAW_ASSET_PATH);\n urls.push(new URL(assetUrl, normalizedBaseUrl));\n } else if (Array.isArray(window.EXCALIDRAW_ASSET_PATH)) {\n window.EXCALIDRAW_ASSET_PATH.forEach(path => {\n const normalizedBaseUrl = this.normalizeBaseUrl(path);\n urls.push(new URL(assetUrl, normalizedBaseUrl));\n });\n } // fallback url for bundled fonts\n\n\n urls.push(new URL(assetUrl, UNPKG_FALLBACK_URL));\n return urls;\n }\n\n static getFormat(url) {\n try {\n const parts = new URL(url).pathname.split(\".\");\n\n if (parts.length === 1) {\n return \"\";\n }\n\n return `format('${parts.pop()}')`;\n } catch (error) {\n return \"\";\n }\n }\n\n static normalizeBaseUrl(baseUrl) {\n var _a;\n\n let result = baseUrl; // in case user passed a root-relative url (~absolute path),\n // like \"/\" or \"/some/path\", or relative (starts with \"./\"),\n // prepend it with `location.origin`\n\n if (/^\\.?\\//.test(result)) {\n result = new URL(result.replace(/^\\.?\\/+/, \"\"), (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.origin).toString();\n } // ensure there is a trailing slash, otherwise url won't be correctly concatenated\n\n\n result = `${result.replace(/\\/+$/, \"\")}/`;\n return result;\n }\n /**\n * zsviczian https://github.com/zsviczian/excalidraw/commit/b4cfaaa4b4f46ca01f94e27fb7bf651a9da99daa\n */\n\n\n async getContentLegacy() {\n let i = 0;\n const errorMessages = [];\n\n while (i < this.urls.length) {\n const url = this.urls[i];\n\n if (url.protocol === \"data:\") {\n // it's dataurl, the font is inlined as base64, no need to fetch\n return url.toString();\n }\n\n try {\n const response = await fetch(url, {\n headers: {\n Accept: \"font/woff2\"\n }\n });\n\n if (response.ok) {\n const mimeType = await response.headers.get(\"Content-Type\");\n const buffer = await response.arrayBuffer();\n return `data:${mimeType};base64,${await (0,_data_encode__WEBPACK_IMPORTED_MODULE_0__.stringToBase64)(await (0,_data_encode__WEBPACK_IMPORTED_MODULE_0__.toByteString)(buffer), true)}`;\n } // response not ok, try to continue\n\n\n errorMessages.push(`\"${url.toString()}\" returned status \"${response.status}\"`);\n } catch (e) {\n errorMessages.push(`\"${url.toString()}\" returned error \"${e}\"`);\n }\n\n i++;\n }\n\n console.error(`Failed to fetch font \"${this.fontFace.family}\" from urls \"${this.urls.toString()}`, JSON.stringify(errorMessages, undefined, 2)); // in case of issues, at least return the last url as a content\n // defaults to unpkg for bundled fonts (so that we don't have to host them forever) and http url for others\n\n return this.urls.length ? this.urls[this.urls.length - 1].toString() : \"\";\n }\n\n}\n\n//# sourceURL=webpack://ExcalidrawLib/./fonts/ExcalidrawFont.ts?");
|
|
3073
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"ExcalidrawFont\": () => (/* binding */ ExcalidrawFont),\n/* harmony export */ \"UNPKG_FALLBACK_URL\": () => (/* binding */ UNPKG_FALLBACK_URL)\n/* harmony export */ });\n/* harmony import */ var _data_encode__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../data/encode */ \"./data/encode.ts\");\n/* harmony import */ var _metadata__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./metadata */ \"./fonts/metadata.ts\");\n/* harmony import */ var _wasm_woff2_loader__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./wasm/woff2.loader */ \"./fonts/wasm/woff2.loader.ts\");\n/* harmony import */ var _wasm_hb_subset_loader__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./wasm/hb-subset.loader */ \"./fonts/wasm/hb-subset.loader.ts\");\n\n\n\n\nconst UNPKG_FALLBACK_URL = `https://unpkg.com/${ true ? `${\"@zsviczian/excalidraw\"}@${({\"VITE_APP_BACKEND_V2_GET_URL\":\"https://json-dev.excalidraw.com/api/v2/\",\"VITE_APP_BACKEND_V2_POST_URL\":\"https://json-dev.excalidraw.com/api/v2/post/\",\"VITE_APP_LIBRARY_URL\":\"https://libraries.excalidraw.com\",\"VITE_APP_LIBRARY_BACKEND\":\"https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries\",\"VITE_APP_WS_SERVER_URL\":\"http://localhost:3002\",\"VITE_APP_PLUS_LP\":\"https://plus.excalidraw.com\",\"VITE_APP_PLUS_APP\":\"https://app.excalidraw.com\",\"VITE_APP_AI_BACKEND\":\"http://localhost:3015\",\"VITE_APP_FIREBASE_CONFIG\":\"{\\\"apiKey\\\":\\\"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8\\\",\\\"authDomain\\\":\\\"excalidraw-oss-dev.firebaseapp.com\\\",\\\"projectId\\\":\\\"excalidraw-oss-dev\\\",\\\"storageBucket\\\":\\\"excalidraw-oss-dev.appspot.com\\\",\\\"messagingSenderId\\\":\\\"664559512677\\\",\\\"appId\\\":\\\"1:664559512677:web:a385181f2928d328a7aa8c\\\"}\",\"VITE_APP_DEV_DISABLE_LIVE_RELOAD\":\"\",\"VITE_APP_ENABLE_TRACKING\":\"true\",\"FAST_REFRESH\":\"false\",\"VITE_APP_PORT\":\"3000\",\"VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX\":\"\",\"VITE_APP_COLLAPSE_OVERLAY\":\"true\",\"VITE_APP_ENABLE_ESLINT\":\"true\",\"VITE_PKG_NAME\":\"@zsviczian/excalidraw\",\"VITE_PKG_VERSION\":\"0.17.1-obsidian-54\",\"VITE_IS_EXCALIDRAW_NPM_PACKAGE\":true}).PKG_VERSION}` // should be provided by vite during package build\n: 0 // fallback to latest package version (i.e. for app)\n}/dist/prod/`;\nclass ExcalidrawFont {\n constructor(family, uri, descriptors) {\n this.urls = ExcalidrawFont.createUrls(uri);\n const sources = this.urls.map(url => `url(${url}) ${ExcalidrawFont.getFormat(url)}`).join(\", \");\n this.fontFace = new FontFace(family, sources, Object.assign({\n display: \"swap\",\n style: \"normal\",\n weight: \"400\"\n }, descriptors));\n }\n /**\n * Tries to fetch woff2 content, based on the registered urls (from first to last, treated as fallbacks).\n *\n * NOTE: assumes usage of `dataurl` outside the browser environment\n *\n * @returns base64 with subsetted glyphs based on the passed codepoint, last defined url otherwise\n */\n\n\n async getContent(codePoints) {\n let i = 0;\n const errorMessages = [];\n\n while (i < this.urls.length) {\n const url = this.urls[i]; // it's dataurl (server), the font is inlined as base64, no need to fetch\n\n if (url.protocol === \"data:\") {\n const arrayBuffer = (0,_data_encode__WEBPACK_IMPORTED_MODULE_0__.base64ToArrayBuffer)(url.toString().split(\",\")[1]);\n const base64 = await ExcalidrawFont.subsetGlyphsByCodePoints(arrayBuffer, codePoints);\n return base64;\n }\n\n try {\n const response = await fetch(url, {\n headers: {\n Accept: \"font/woff2\"\n }\n });\n\n if (response.ok) {\n const arrayBuffer = await response.arrayBuffer();\n const base64 = await ExcalidrawFont.subsetGlyphsByCodePoints(arrayBuffer, codePoints);\n return base64;\n } // response not ok, try to continue\n\n\n errorMessages.push(`\"${url.toString()}\" returned status \"${response.status}\"`);\n } catch (e) {\n errorMessages.push(`\"${url.toString()}\" returned error \"${e}\"`);\n }\n\n i++;\n }\n\n console.error(`Failed to fetch font \"${this.fontFace.family}\" from urls \"${this.urls.toString()}`, JSON.stringify(errorMessages, undefined, 2)); // in case of issues, at least return the last url as a content\n // defaults to unpkg for bundled fonts (so that we don't have to host them forever) and http url for others\n\n return this.urls.length ? this.urls[this.urls.length - 1].toString() : \"\";\n }\n /**\n * Tries to subset glyphs in a font based on the used codepoints, returning the font as daturl.\n *\n * @param arrayBuffer font data buffer, preferrably in the woff2 format, though others should work as well\n * @param codePoints codepoints used to subset the glyphs\n *\n * @returns font with subsetted glyphs (all glyphs in case of errors) converted into a dataurl\n */\n\n\n static async subsetGlyphsByCodePoints(arrayBuffer, codePoints) {\n try {\n // lazy loaded wasm modules to avoid multiple initializations in case of concurrent triggers\n const {\n compress,\n decompress\n } = await (0,_wasm_woff2_loader__WEBPACK_IMPORTED_MODULE_2__[\"default\"])();\n const {\n subset\n } = await (0,_wasm_hb_subset_loader__WEBPACK_IMPORTED_MODULE_3__[\"default\"])();\n const decompressedBinary = decompress(arrayBuffer).buffer;\n const subsetSnft = subset(decompressedBinary, codePoints);\n const compressedBinary = compress(subsetSnft.buffer);\n return ExcalidrawFont.toBase64(compressedBinary.buffer);\n } catch (e) {\n console.error(\"Skipped glyph subsetting\", e); // Fallback to encoding whole font in case of errors\n\n return ExcalidrawFont.toBase64(arrayBuffer);\n }\n }\n\n static async toBase64(arrayBuffer) {\n let base64;\n\n if (typeof Buffer !== \"undefined\") {\n // node + server-side\n base64 = Buffer.from(arrayBuffer).toString(\"base64\");\n } else {\n base64 = await (0,_data_encode__WEBPACK_IMPORTED_MODULE_0__.stringToBase64)(await (0,_data_encode__WEBPACK_IMPORTED_MODULE_0__.toByteString)(arrayBuffer), true);\n }\n\n return `data:font/woff2;base64,${base64}`;\n }\n\n static createUrls(uri) {\n if (uri.startsWith(_metadata__WEBPACK_IMPORTED_MODULE_1__.LOCAL_FONT_PROTOCOL)) {\n // no url for local fonts\n return [];\n }\n\n if (uri.startsWith(\"http\") || uri.startsWith(\"data\")) {\n // one url for http imports or data url\n return [new URL(uri)];\n } // absolute assets paths, which are found in tests and excalidraw-app build, won't work with base url, so we are stripping initial slash away\n\n\n const assetUrl = uri.replace(/^\\/+/, \"\");\n const urls = [];\n\n if (typeof window.EXCALIDRAW_ASSET_PATH === \"string\") {\n const normalizedBaseUrl = this.normalizeBaseUrl(window.EXCALIDRAW_ASSET_PATH);\n urls.push(new URL(assetUrl, normalizedBaseUrl));\n } else if (Array.isArray(window.EXCALIDRAW_ASSET_PATH)) {\n window.EXCALIDRAW_ASSET_PATH.forEach(path => {\n const normalizedBaseUrl = this.normalizeBaseUrl(path);\n urls.push(new URL(assetUrl, normalizedBaseUrl));\n });\n } // fallback url for bundled fonts\n\n\n urls.push(new URL(assetUrl, UNPKG_FALLBACK_URL));\n return urls;\n }\n\n static getFormat(url) {\n try {\n const parts = new URL(url).pathname.split(\".\");\n\n if (parts.length === 1) {\n return \"\";\n }\n\n return `format('${parts.pop()}')`;\n } catch (error) {\n return \"\";\n }\n }\n\n static normalizeBaseUrl(baseUrl) {\n var _a;\n\n let result = baseUrl; // in case user passed a root-relative url (~absolute path),\n // like \"/\" or \"/some/path\", or relative (starts with \"./\"),\n // prepend it with `location.origin`\n\n if (/^\\.?\\//.test(result)) {\n result = new URL(result.replace(/^\\.?\\/+/, \"\"), (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.origin).toString();\n } // ensure there is a trailing slash, otherwise url won't be correctly concatenated\n\n\n result = `${result.replace(/\\/+$/, \"\")}/`;\n return result;\n }\n /**\n * zsviczian https://github.com/zsviczian/excalidraw/commit/b4cfaaa4b4f46ca01f94e27fb7bf651a9da99daa\n */\n\n\n async getContentLegacy() {\n let i = 0;\n const errorMessages = [];\n\n while (i < this.urls.length) {\n const url = this.urls[i];\n\n if (url.protocol === \"data:\") {\n // it's dataurl, the font is inlined as base64, no need to fetch\n return url.toString();\n }\n\n try {\n const response = await fetch(url, {\n headers: {\n Accept: \"font/woff2\"\n }\n });\n\n if (response.ok) {\n const mimeType = await response.headers.get(\"Content-Type\");\n const buffer = await response.arrayBuffer();\n return `data:${mimeType};base64,${await (0,_data_encode__WEBPACK_IMPORTED_MODULE_0__.stringToBase64)(await (0,_data_encode__WEBPACK_IMPORTED_MODULE_0__.toByteString)(buffer), true)}`;\n } // response not ok, try to continue\n\n\n errorMessages.push(`\"${url.toString()}\" returned status \"${response.status}\"`);\n } catch (e) {\n errorMessages.push(`\"${url.toString()}\" returned error \"${e}\"`);\n }\n\n i++;\n }\n\n console.error(`Failed to fetch font \"${this.fontFace.family}\" from urls \"${this.urls.toString()}`, JSON.stringify(errorMessages, undefined, 2)); // in case of issues, at least return the last url as a content\n // defaults to unpkg for bundled fonts (so that we don't have to host them forever) and http url for others\n\n return this.urls.length ? this.urls[this.urls.length - 1].toString() : \"\";\n }\n\n}\n\n//# sourceURL=webpack://ExcalidrawLib/./fonts/ExcalidrawFont.ts?");
|
|
3074
3074
|
|
|
3075
3075
|
/***/ }),
|
|
3076
3076
|
|
|
@@ -3400,7 +3400,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
3400
3400
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
3401
3401
|
|
|
3402
3402
|
"use strict";
|
|
3403
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"allowDoubleTapEraser\": () => (/* binding */ allowDoubleTapEraser),\n/* harmony export */ \"destroyObsidianUtils\": () => (/* binding */ destroyObsidianUtils),\n/* harmony export */ \"getAreaLimit\": () => (/* binding */ getAreaLimit),\n/* harmony export */ \"
|
|
3403
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"allowDoubleTapEraser\": () => (/* binding */ allowDoubleTapEraser),\n/* harmony export */ \"destroyObsidianUtils\": () => (/* binding */ destroyObsidianUtils),\n/* harmony export */ \"getAreaLimit\": () => (/* binding */ getAreaLimit),\n/* harmony export */ \"getCSSFontDefinition\": () => (/* binding */ getCSSFontDefinition),\n/* harmony export */ \"getExcalidrawContentEl\": () => (/* binding */ getExcalidrawContentEl),\n/* harmony export */ \"getFontFamilies\": () => (/* binding */ getFontFamilies),\n/* harmony export */ \"getOpenAIDefaultVisionModel\": () => (/* binding */ getOpenAIDefaultVisionModel),\n/* harmony export */ \"getWidthHeightLimit\": () => (/* binding */ getWidthHeightLimit),\n/* harmony export */ \"hideFreedrawPenmodeCursor\": () => (/* binding */ hideFreedrawPenmodeCursor),\n/* harmony export */ \"hostPlugin\": () => (/* binding */ hostPlugin),\n/* harmony export */ \"initializeObsidianUtils\": () => (/* binding */ initializeObsidianUtils),\n/* harmony export */ \"isExcaliBrainView\": () => (/* binding */ isExcaliBrainView),\n/* harmony export */ \"registerFontsInCSS\": () => (/* binding */ registerFontsInCSS),\n/* harmony export */ \"registerLocalFont\": () => (/* binding */ registerLocalFont)\n/* harmony export */ });\n/* harmony import */ var _components_icons__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./components/icons */ \"./components/icons.tsx\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./constants */ \"./constants.ts\");\n/* harmony import */ var _fonts__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./fonts */ \"./fonts/index.ts\");\n/* harmony import */ var _fonts_metadata__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./fonts/metadata */ \"./fonts/metadata.ts\");\n\n\n\n //zsviczian, my dirty little secrets. These are hacks I am not proud of...\n\nlet hostPlugin = null;\nfunction destroyObsidianUtils() {\n hostPlugin = null;\n}\nfunction initializeObsidianUtils(obsidianPlugin) {\n hostPlugin = obsidianPlugin;\n}\nfunction getAreaLimit() {\n var _a;\n\n return (_a = hostPlugin.excalidrawConfig.areaLimit) !== null && _a !== void 0 ? _a : 16777216;\n}\nfunction getWidthHeightLimit() {\n var _a;\n\n return (_a = hostPlugin.excalidrawConfig.widthHeightLimit) !== null && _a !== void 0 ? _a : 32767;\n}\nfunction allowDoubleTapEraser() {\n return hostPlugin.settings.penModeDoubleTapEraser;\n}\nfunction isExcaliBrainView() {\n const excalidrawView = hostPlugin.activeExcalidrawView;\n\n if (!excalidrawView) {\n return false;\n }\n\n return excalidrawView.linksAlwaysOpenInANewPane && excalidrawView.allowFrameButtonsInViewMode;\n}\nfunction getExcalidrawContentEl() {\n const excalidrawView = hostPlugin.activeExcalidrawView;\n\n if (!excalidrawView) {\n return document.body;\n }\n\n return excalidrawView.contentEl;\n}\nfunction hideFreedrawPenmodeCursor() {\n return !hostPlugin.settings.penModeCrosshairVisible;\n}\nfunction getOpenAIDefaultVisionModel() {\n return hostPlugin.settings.openAIDefaultVisionModel;\n}\nfunction registerLocalFont(fontMetrics, uri) {\n const _register = _fonts__WEBPACK_IMPORTED_MODULE_2__.register.bind({\n registered: _fonts__WEBPACK_IMPORTED_MODULE_2__.Fonts.registered\n });\n\n _fonts_metadata__WEBPACK_IMPORTED_MODULE_3__.FONT_METADATA[_constants__WEBPACK_IMPORTED_MODULE_1__.FONT_FAMILY[\"Local Font\"]] = {\n metrics: fontMetrics.metrics,\n icon: _components_icons__WEBPACK_IMPORTED_MODULE_0__.FreedrawIcon\n };\n\n _register(\"Local Font\", fontMetrics, {\n uri\n });\n}\nfunction getFontFamilies() {\n const fontFamilies = new Set();\n\n for (const fontFaces of _fonts__WEBPACK_IMPORTED_MODULE_2__.Fonts.registered.values()) {\n if (fontFaces.metadata.local) {\n continue;\n }\n\n for (const font of fontFaces.fonts) {\n if (font.fontFace.family === \"Local Font\") {\n continue;\n }\n\n fontFamilies.add(font.fontFace.family);\n }\n }\n\n return Array.from(fontFamilies);\n}\nasync function registerFontsInCSS() {\n const styleId = \"ExcalidrawFonts\";\n let styleElement = document.getElementById(styleId);\n\n if (!styleElement) {\n styleElement = document.createElement(\"style\");\n styleElement.id = styleId;\n document.head.appendChild(styleElement);\n } else {\n styleElement.textContent = \"\";\n }\n\n let cssContent = \"\";\n\n for (const fontFaces of _fonts__WEBPACK_IMPORTED_MODULE_2__.Fonts.registered.values()) {\n if (fontFaces.metadata.local) {\n continue;\n }\n\n for (const font of fontFaces.fonts) {\n try {\n const content = await font.getContentLegacy();\n cssContent += `@font-face {font-family: ${font.fontFace.family}; src: url(${content});}\\n`;\n } catch (e) {\n console.error(`Skipped inlining font \"${font.toString()}\"`, e);\n }\n }\n }\n\n styleElement.textContent = cssContent;\n}\nasync function getCSSFontDefinition(fontFamily) {\n var _a;\n\n const fontFaces = (_a = _fonts__WEBPACK_IMPORTED_MODULE_2__.Fonts.registered.get(fontFamily)) === null || _a === void 0 ? void 0 : _a.fonts;\n\n if (!fontFaces) {\n return \"\";\n }\n\n const fontFace = fontFaces[0];\n\n if (!fontFace) {\n return \"\";\n }\n\n const content = await fontFace.getContentLegacy();\n return `@font-face {font-family: ${fontFaces[0].fontFace.family}; src: url(${content});}`;\n}\n\n//# sourceURL=webpack://ExcalidrawLib/./obsidianUtils.ts?");
|
|
3404
3404
|
|
|
3405
3405
|
/***/ }),
|
|
3406
3406
|
|
|
@@ -3433,7 +3433,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
3433
3433
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
3434
3434
|
|
|
3435
3435
|
"use strict";
|
|
3436
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./constants */ \"./constants.ts\");\n\n\nif (\"development\" !== _constants__WEBPACK_IMPORTED_MODULE_0__.ENV.TEST) {\n /* eslint-disable */\n\n /* global __webpack_public_path__:writable */\n __webpack_require__.p = window.EXCALIDRAW_ASSET_PATH || `https://unpkg.com/${\"@zsviczian/excalidraw\"}@${\"0.17.1-obsidian-
|
|
3436
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./constants */ \"./constants.ts\");\n\n\nif (\"development\" !== _constants__WEBPACK_IMPORTED_MODULE_0__.ENV.TEST) {\n /* eslint-disable */\n\n /* global __webpack_public_path__:writable */\n __webpack_require__.p = window.EXCALIDRAW_ASSET_PATH || `https://unpkg.com/${\"@zsviczian/excalidraw\"}@${\"0.17.1-obsidian-54\"}/dist/`;\n}\n\n//# sourceURL=webpack://ExcalidrawLib/./publicPath.js?");
|
|
3437
3437
|
|
|
3438
3438
|
/***/ }),
|
|
3439
3439
|
|
|
@@ -3499,7 +3499,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
3499
3499
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
3500
3500
|
|
|
3501
3501
|
"use strict";
|
|
3502
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"renderInteractiveScene\": () => (/* binding */ renderInteractiveScene),\n/* harmony export */ \"renderInteractiveSceneThrottled\": () => (/* binding */ renderInteractiveSceneThrottled)\n/* harmony export */ });\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _renderer_roundRect__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../renderer/roundRect */ \"./renderer/roundRect.ts\");\n/* harmony import */ var _scene_scrollbars__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../scene/scrollbars */ \"./scene/scrollbars.ts\");\n/* harmony import */ var _renderer_renderElement__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../renderer/renderElement */ \"./renderer/renderElement.ts\");\n/* harmony import */ var _clients__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../clients */ \"./clients.ts\");\n/* harmony import */ var _groups__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../groups */ \"./groups.ts\");\n/* harmony import */ var _element_transformHandles__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../element/transformHandles */ \"./element/transformHandles.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _renderer_renderSnaps__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../renderer/renderSnaps */ \"./renderer/renderSnaps.ts\");\n/* harmony import */ var _element_binding__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../element/binding */ \"./element/binding.ts\");\n/* harmony import */ var _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../element/linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./helpers */ \"./renderer/helpers.ts\");\n/* harmony import */ var open_color__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! open-color */ \"../../node_modules/open-color/open-color.json\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _shapes__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../shapes */ \"./shapes.tsx\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst renderLinearElementPointHighlight = (context, appState, elementsMap) => {\n var _a, _b;\n\n const {\n elementId,\n hoverPointIndex\n } = appState.selectedLinearElement;\n\n if ((_b = (_a = appState.editingLinearElement) === null || _a === void 0 ? void 0 : _a.selectedPointsIndices) === null || _b === void 0 ? void 0 : _b.includes(hoverPointIndex)) {\n return;\n }\n\n const element = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_11__.LinearElementEditor.getElement(elementId, elementsMap);\n\n if (!element) {\n return;\n }\n\n const point = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_11__.LinearElementEditor.getPointAtIndexGlobalCoordinates(element, hoverPointIndex, elementsMap);\n context.save();\n context.translate(appState.scrollX, appState.scrollY);\n highlightPoint(point, context, appState);\n context.restore();\n};\n\nconst highlightPoint = (point, context, appState) => {\n context.fillStyle = \"rgba(105, 101, 219, 0.4)\";\n (0,_helpers__WEBPACK_IMPORTED_MODULE_12__.fillCircle)(context, point[0], point[1], _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_11__.LinearElementEditor.POINT_HANDLE_SIZE / appState.zoom.value, false);\n};\n\nconst strokeRectWithRotation = (context, x, y, width, height, cx, cy, angle, fill = false,\n/** should account for zoom */\nradius = 0) => {\n context.save();\n context.translate(cx, cy);\n context.rotate(angle);\n\n if (fill) {\n context.fillRect(x - cx, y - cy, width, height);\n }\n\n if (radius && context.roundRect) {\n context.beginPath();\n context.roundRect(x - cx, y - cy, width, height, radius);\n context.stroke();\n context.closePath();\n } else {\n context.strokeRect(x - cx, y - cy, width, height);\n }\n\n context.restore();\n};\n\nconst strokeDiamondWithRotation = (context, width, height, cx, cy, angle) => {\n context.save();\n context.translate(cx, cy);\n context.rotate(angle);\n context.beginPath();\n context.moveTo(0, height / 2);\n context.lineTo(width / 2, 0);\n context.lineTo(0, -height / 2);\n context.lineTo(-width / 2, 0);\n context.closePath();\n context.stroke();\n context.restore();\n};\n\nconst renderSingleLinearPoint = (context, appState, point, radius, isSelected, isPhantomPoint = false) => {\n context.strokeStyle = \"#5e5ad8\";\n context.setLineDash([]);\n context.fillStyle = \"rgba(255, 255, 255, 0.9)\";\n\n if (isSelected) {\n context.fillStyle = \"rgba(134, 131, 226, 0.9)\";\n } else if (isPhantomPoint) {\n context.fillStyle = \"rgba(177, 151, 252, 0.7)\";\n }\n\n (0,_helpers__WEBPACK_IMPORTED_MODULE_12__.fillCircle)(context, point[0], point[1], radius / appState.zoom.value, !isPhantomPoint);\n};\n\nconst strokeEllipseWithRotation = (context, width, height, cx, cy, angle) => {\n context.beginPath();\n context.ellipse(cx, cy, width / 2, height / 2, angle, 0, Math.PI * 2);\n context.stroke();\n};\n\nconst renderBindingHighlightForBindableElement = (context, element, elementsMap, highlightedColor) => {\n const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_0__.getElementAbsoluteCoords)(element, elementsMap);\n const width = x2 - x1;\n const height = y2 - y1;\n const thickness = 10; // So that we don't overlap the element itself\n\n const strokeOffset = 4;\n context.strokeStyle = highlightedColor !== null && highlightedColor !== void 0 ? highlightedColor : \"rgba(128,128,128,.1)\"; //zsviczian\n\n context.lineWidth = thickness - strokeOffset;\n const padding = strokeOffset / 2 + thickness / 2;\n const radius = (0,_shapes__WEBPACK_IMPORTED_MODULE_15__.getCornerRadius)(Math.min(element.width, element.height), element);\n\n switch (element.type) {\n case \"rectangle\":\n case \"text\":\n case \"image\":\n case \"iframe\":\n case \"embeddable\":\n case \"frame\":\n case \"magicframe\":\n strokeRectWithRotation(context, x1 - padding, y1 - padding, width + padding * 2, height + padding * 2, x1 + width / 2, y1 + height / 2, element.angle, undefined, radius);\n break;\n\n case \"diamond\":\n const side = Math.hypot(width, height);\n const wPadding = padding * side / height;\n const hPadding = padding * side / width;\n strokeDiamondWithRotation(context, width + wPadding * 2, height + hPadding * 2, x1 + width / 2, y1 + height / 2, element.angle);\n break;\n\n case \"ellipse\":\n strokeEllipseWithRotation(context, width + padding * 2, height + padding * 2, x1 + width / 2, y1 + height / 2, element.angle);\n break;\n }\n};\n\nconst renderBindingHighlightForSuggestedPointBinding = (context, suggestedBinding, elementsMap, highlightedColor) => {\n const [element, startOrEnd, bindableElement] = suggestedBinding;\n const threshold = (0,_element_binding__WEBPACK_IMPORTED_MODULE_10__.maxBindingGap)(bindableElement, bindableElement.width, bindableElement.height);\n context.strokeStyle = \"rgba(0,0,0,0)\";\n context.fillStyle = highlightedColor !== null && highlightedColor !== void 0 ? highlightedColor : \"rgba(128,128,128,.1)\"; //zsviczian \"rgba(0,0,0,.05)\";\n\n const pointIndices = startOrEnd === \"both\" ? [0, -1] : startOrEnd === \"start\" ? [0] : [-1];\n pointIndices.forEach(index => {\n const [x, y] = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_11__.LinearElementEditor.getPointAtIndexGlobalCoordinates(element, index, elementsMap);\n (0,_helpers__WEBPACK_IMPORTED_MODULE_12__.fillCircle)(context, x, y, threshold);\n });\n};\n\nconst renderSelectionBorder = (context, appState, elementProperties) => {\n const {\n angle,\n elementX1,\n elementY1,\n elementX2,\n elementY2,\n selectionColors,\n cx,\n cy,\n dashed,\n activeEmbeddable\n } = elementProperties;\n const elementWidth = elementX2 - elementX1;\n const elementHeight = elementY2 - elementY1;\n const padding = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_TRANSFORM_HANDLE_SPACING * 2;\n const linePadding = padding / appState.zoom.value;\n const lineWidth = 8 / appState.zoom.value;\n const spaceWidth = 4 / appState.zoom.value;\n context.save();\n context.translate(appState.scrollX, appState.scrollY);\n const thick = activeEmbeddable || appState.highlightSearchResult; //zsviczian\n\n context.lineWidth = (thick ? 4 : 1) / appState.zoom.value; //zsviczian\n\n const count = selectionColors.length;\n\n for (let index = 0; index < count; ++index) {\n context.strokeStyle = selectionColors[index];\n\n if (dashed) {\n context.setLineDash([lineWidth, spaceWidth + (lineWidth + spaceWidth) * (count - 1)]);\n }\n\n context.lineDashOffset = (lineWidth + spaceWidth) * index;\n strokeRectWithRotation(context, elementX1 - linePadding, elementY1 - linePadding, elementWidth + linePadding * 2, elementHeight + linePadding * 2, cx, cy, angle);\n }\n\n context.restore();\n};\n\nconst renderBindingHighlight = (context, appState, suggestedBinding, elementsMap) => {\n const renderHighlight = Array.isArray(suggestedBinding) ? renderBindingHighlightForSuggestedPointBinding : renderBindingHighlightForBindableElement;\n context.save();\n context.translate(appState.scrollX, appState.scrollY);\n renderHighlight(context, suggestedBinding, elementsMap, `${appState.gridColor.Bold}`); //zsviczian\n\n context.restore();\n};\n\nconst renderFrameHighlight = (context, appState, frame, elementsMap) => {\n const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_0__.getElementAbsoluteCoords)(frame, elementsMap);\n const width = x2 - x1;\n const height = y2 - y1;\n context.strokeStyle = \"rgb(0,118,255)\";\n context.lineWidth = _constants__WEBPACK_IMPORTED_MODULE_8__.FRAME_STYLE.strokeWidth / appState.zoom.value;\n context.save();\n context.translate(appState.scrollX, appState.scrollY);\n strokeRectWithRotation(context, x1, y1, width, height, x1 + width / 2, y1 + height / 2, frame.angle, false, _constants__WEBPACK_IMPORTED_MODULE_8__.FRAME_STYLE.radius / appState.zoom.value);\n context.restore();\n};\n\nconst renderElementsBoxHighlight = (context, appState, elements) => {\n const individualElements = elements.filter(element => element.groupIds.length === 0);\n const elementsInGroups = elements.filter(element => element.groupIds.length > 0);\n\n const getSelectionFromElements = elements => {\n var _a;\n\n const [elementX1, elementY1, elementX2, elementY2] = (0,_element__WEBPACK_IMPORTED_MODULE_0__.getCommonBounds)(elements);\n return {\n angle: 0,\n elementX1,\n elementX2,\n elementY1,\n elementY2,\n selectionColors: [(_a = appState.gridColor.Bold) !== null && _a !== void 0 ? _a : \"rgb(0,118,255)\"],\n dashed: false,\n cx: elementX1 + (elementX2 - elementX1) / 2,\n cy: elementY1 + (elementY2 - elementY1) / 2,\n activeEmbeddable: false\n };\n };\n\n const getSelectionForGroupId = groupId => {\n const groupElements = (0,_groups__WEBPACK_IMPORTED_MODULE_5__.getElementsInGroup)(elements, groupId);\n return getSelectionFromElements(groupElements);\n };\n\n Object.entries((0,_groups__WEBPACK_IMPORTED_MODULE_5__.selectGroupsFromGivenElements)(elementsInGroups, appState)).filter(([id, isSelected]) => isSelected).map(([id, isSelected]) => id).map(groupId => getSelectionForGroupId(groupId)).concat(individualElements.map(element => getSelectionFromElements([element]))).forEach(selection => renderSelectionBorder(context, appState, selection));\n};\n\nconst renderLinearPointHandles = (context, appState, element, elementsMap) => {\n if (!appState.selectedLinearElement) {\n return;\n }\n\n context.save();\n context.translate(appState.scrollX, appState.scrollY);\n context.lineWidth = 1 / appState.zoom.value;\n const points = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_11__.LinearElementEditor.getPointsGlobalCoordinates(element, elementsMap);\n const {\n POINT_HANDLE_SIZE\n } = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_11__.LinearElementEditor;\n const radius = appState.editingLinearElement ? POINT_HANDLE_SIZE : POINT_HANDLE_SIZE / 2;\n points.forEach((point, idx) => {\n var _a, _b;\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_14__.isElbowArrow)(element) && idx !== 0 && idx !== points.length - 1) {\n return;\n }\n\n const isSelected = !!((_b = (_a = appState.editingLinearElement) === null || _a === void 0 ? void 0 : _a.selectedPointsIndices) === null || _b === void 0 ? void 0 : _b.includes(idx));\n renderSingleLinearPoint(context, appState, point, radius, isSelected);\n }); //Rendering segment mid points\n\n const midPoints = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_11__.LinearElementEditor.getEditorMidPoints(element, elementsMap, appState).filter(midPoint => midPoint !== null);\n midPoints.forEach(segmentMidPoint => {\n var _a;\n\n if (((_a = appState === null || appState === void 0 ? void 0 : appState.selectedLinearElement) === null || _a === void 0 ? void 0 : _a.segmentMidPointHoveredCoords) && _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_11__.LinearElementEditor.arePointsEqual(segmentMidPoint, appState.selectedLinearElement.segmentMidPointHoveredCoords)) {\n // The order of renderingSingleLinearPoint and highLight points is different\n // inside vs outside editor as hover states are different,\n // in editor when hovered the original point is not visible as hover state fully covers it whereas outside the\n // editor original point is visible and hover state is just an outer circle.\n if (appState.editingLinearElement) {\n renderSingleLinearPoint(context, appState, segmentMidPoint, radius, false);\n highlightPoint(segmentMidPoint, context, appState);\n } else {\n highlightPoint(segmentMidPoint, context, appState);\n renderSingleLinearPoint(context, appState, segmentMidPoint, radius, false);\n }\n } else if (appState.editingLinearElement || points.length === 2) {\n renderSingleLinearPoint(context, appState, segmentMidPoint, POINT_HANDLE_SIZE / 2, false, true);\n }\n });\n context.restore();\n};\n\nconst renderTransformHandles = (context, renderConfig, appState, transformHandles, angle) => {\n Object.keys(transformHandles).forEach(key => {\n const transformHandle = transformHandles[key];\n\n if (transformHandle !== undefined) {\n const [x, y, width, height] = transformHandle;\n context.save();\n context.lineWidth = 1 / appState.zoom.value;\n\n if (renderConfig.selectionColor) {\n context.strokeStyle = renderConfig.selectionColor;\n }\n\n if (key === \"rotation\") {\n (0,_helpers__WEBPACK_IMPORTED_MODULE_12__.fillCircle)(context, x + width / 2, y + height / 2, width / 2); // prefer round corners if roundRect API is available\n } else if (context.roundRect) {\n context.beginPath();\n context.roundRect(x, y, width, height, 2 / appState.zoom.value);\n context.fill();\n context.stroke();\n } else {\n strokeRectWithRotation(context, x, y, width, height, x + width / 2, y + height / 2, angle, true);\n }\n\n context.restore();\n }\n });\n};\n\nconst renderTextBox = (text, context, appState, selectionColor) => {\n context.save();\n const padding = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_TRANSFORM_HANDLE_SPACING * 2 / appState.zoom.value;\n const width = text.width + padding * 2;\n const height = text.height + padding * 2;\n const cx = text.x + width / 2;\n const cy = text.y + height / 2;\n const shiftX = -(width / 2 + padding);\n const shiftY = -(height / 2 + padding);\n context.translate(cx + appState.scrollX, cy + appState.scrollY);\n context.rotate(text.angle);\n context.lineWidth = 1 / appState.zoom.value;\n context.strokeStyle = selectionColor;\n context.strokeRect(shiftX, shiftY, width, height);\n context.restore();\n};\n\nconst _renderInteractiveScene = ({\n canvas,\n elementsMap,\n visibleElements,\n selectedElements,\n allElementsMap,\n scale,\n appState,\n renderConfig,\n device\n}) => {\n var _a, _b, _c;\n\n if (canvas === null) {\n return {\n atLeastOneVisibleElement: false,\n elementsMap\n };\n }\n\n const [normalizedWidth, normalizedHeight] = (0,_helpers__WEBPACK_IMPORTED_MODULE_12__.getNormalizedCanvasDimensions)(canvas, scale);\n const context = (0,_helpers__WEBPACK_IMPORTED_MODULE_12__.bootstrapCanvas)({\n canvas,\n scale,\n normalizedWidth,\n normalizedHeight\n }); // Apply zoom\n\n context.save();\n context.scale(appState.zoom.value, appState.zoom.value);\n let editingLinearElement = undefined;\n visibleElements.forEach(element => {\n var _a; // Getting the element using LinearElementEditor during collab mismatches version - being one head of visible elements due to\n // ShapeCache returns empty hence making sure that we get the\n // correct element from visible elements\n\n\n if (((_a = appState.editingLinearElement) === null || _a === void 0 ? void 0 : _a.elementId) === element.id) {\n if (element) {\n editingLinearElement = element;\n }\n }\n });\n\n if (editingLinearElement) {\n renderLinearPointHandles(context, appState, editingLinearElement, elementsMap);\n } // Paint selection element\n\n\n if (appState.selectionElement) {\n try {\n (0,_renderer_renderElement__WEBPACK_IMPORTED_MODULE_3__.renderSelectionElement)(appState.selectionElement, context, appState, renderConfig.selectionColor);\n } catch (error) {\n console.error(error);\n }\n }\n\n if (appState.editingTextElement && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_14__.isTextElement)(appState.editingTextElement)) {\n const textElement = allElementsMap.get(appState.editingTextElement.id);\n\n if (textElement && !textElement.autoResize) {\n renderTextBox(textElement, context, appState, renderConfig.selectionColor);\n }\n }\n\n if (appState.isBindingEnabled) {\n appState.suggestedBindings.filter(binding => binding != null).forEach(suggestedBinding => {\n renderBindingHighlight(context, appState, suggestedBinding, elementsMap);\n });\n }\n\n if (appState.frameToHighlight) {\n renderFrameHighlight(context, appState, appState.frameToHighlight, elementsMap);\n }\n\n if (appState.elementsToHighlight) {\n renderElementsBoxHighlight(context, appState, appState.elementsToHighlight);\n }\n\n const isFrameSelected = selectedElements.some(element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_14__.isFrameLikeElement)(element)); // Getting the element using LinearElementEditor during collab mismatches version - being one head of visible elements due to\n // ShapeCache returns empty hence making sure that we get the\n // correct element from visible elements\n\n if (selectedElements.length === 1 && ((_a = appState.editingLinearElement) === null || _a === void 0 ? void 0 : _a.elementId) === selectedElements[0].id) {\n renderLinearPointHandles(context, appState, selectedElements[0], elementsMap);\n }\n\n if (appState.selectedLinearElement && appState.selectedLinearElement.hoverPointIndex >= 0 && !((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_14__.isElbowArrow)(selectedElements[0]) && appState.selectedLinearElement.hoverPointIndex > 0 && appState.selectedLinearElement.hoverPointIndex < selectedElements[0].points.length - 1)) {\n renderLinearElementPointHighlight(context, appState, elementsMap);\n } // Paint selected elements\n\n\n if (!appState.multiElement && !appState.editingLinearElement) {\n const showBoundingBox = (0,_element_transformHandles__WEBPACK_IMPORTED_MODULE_6__.shouldShowBoundingBox)(selectedElements, appState);\n const isSingleLinearElementSelected = selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_14__.isLinearElement)(selectedElements[0]); // render selected linear element points\n\n if (isSingleLinearElementSelected && ((_b = appState.selectedLinearElement) === null || _b === void 0 ? void 0 : _b.elementId) === selectedElements[0].id && !selectedElements[0].locked) {\n renderLinearPointHandles(context, appState, selectedElements[0], elementsMap);\n }\n\n const selectionColor = renderConfig.selectionColor || open_color__WEBPACK_IMPORTED_MODULE_13__.black;\n\n if (showBoundingBox) {\n // Optimisation for finding quickly relevant element ids\n const locallySelectedIds = (0,_utils__WEBPACK_IMPORTED_MODULE_7__.arrayToMap)(selectedElements);\n const selections = [];\n\n for (const element of elementsMap.values()) {\n const selectionColors = [];\n const remoteClients = renderConfig.remoteSelectedElementIds.get(element.id);\n\n if (!( // Elbow arrow elements cannot be selected when bound on either end\n isSingleLinearElementSelected && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_14__.isArrowElement)(element) && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_14__.isElbowArrow)(element) && (element.startBinding || element.endBinding))) {\n // local user\n if (locallySelectedIds.has(element.id) && !(0,_groups__WEBPACK_IMPORTED_MODULE_5__.isSelectedViaGroup)(appState, element)) {\n selectionColors.push(selectionColor);\n } // remote users\n\n\n if (remoteClients) {\n selectionColors.push(...remoteClients.map(socketId => {\n const background = (0,_clients__WEBPACK_IMPORTED_MODULE_4__.getClientColor)(socketId, appState.collaborators.get(socketId));\n return background;\n }));\n }\n }\n\n if (selectionColors.length) {\n const [elementX1, elementY1, elementX2, elementY2, cx, cy] = (0,_element__WEBPACK_IMPORTED_MODULE_0__.getElementAbsoluteCoords)(element, elementsMap, true);\n selections.push({\n angle: element.angle,\n elementX1,\n elementY1,\n elementX2,\n elementY2,\n selectionColors,\n dashed: !!remoteClients,\n cx,\n cy,\n activeEmbeddable: ((_c = appState.activeEmbeddable) === null || _c === void 0 ? void 0 : _c.element) === element && appState.activeEmbeddable.state === \"active\"\n });\n }\n }\n\n const addSelectionForGroupId = groupId => {\n const groupElements = (0,_groups__WEBPACK_IMPORTED_MODULE_5__.getElementsInGroup)(elementsMap, groupId);\n const [elementX1, elementY1, elementX2, elementY2] = (0,_element__WEBPACK_IMPORTED_MODULE_0__.getCommonBounds)(groupElements);\n selections.push({\n angle: 0,\n elementX1,\n elementX2,\n elementY1,\n elementY2,\n selectionColors: [open_color__WEBPACK_IMPORTED_MODULE_13__.black],\n dashed: true,\n cx: elementX1 + (elementX2 - elementX1) / 2,\n cy: elementY1 + (elementY2 - elementY1) / 2,\n activeEmbeddable: false\n });\n };\n\n for (const groupId of (0,_groups__WEBPACK_IMPORTED_MODULE_5__.getSelectedGroupIds)(appState)) {\n // TODO: support multiplayer selected group IDs\n addSelectionForGroupId(groupId);\n }\n\n if (appState.editingGroupId) {\n addSelectionForGroupId(appState.editingGroupId);\n }\n\n selections.forEach(selection => renderSelectionBorder(context, appState, selection));\n } // Paint resize transformHandles\n\n\n context.save();\n context.translate(appState.scrollX, appState.scrollY);\n\n if (selectedElements.length === 1) {\n context.fillStyle = open_color__WEBPACK_IMPORTED_MODULE_13__.white;\n const transformHandles = (0,_element__WEBPACK_IMPORTED_MODULE_0__.getTransformHandles)(selectedElements[0], appState.zoom, elementsMap, \"mouse\", // when we render we don't know which pointer type so use mouse,\n (0,_element_transformHandles__WEBPACK_IMPORTED_MODULE_6__.getOmitSidesForDevice)(device));\n\n if (!appState.viewModeEnabled && showBoundingBox && // do not show transform handles when text is being edited\n !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_14__.isTextElement)(appState.editingTextElement)) {\n renderTransformHandles(context, renderConfig, appState, transformHandles, selectedElements[0].angle);\n }\n } else if (selectedElements.length > 1 && !appState.isRotating) {\n const dashedLinePadding = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_TRANSFORM_HANDLE_SPACING * 2 / appState.zoom.value;\n context.fillStyle = open_color__WEBPACK_IMPORTED_MODULE_13__.white;\n const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_0__.getCommonBounds)(selectedElements);\n const initialLineDash = context.getLineDash();\n context.setLineDash([2 / appState.zoom.value]);\n const lineWidth = context.lineWidth;\n context.lineWidth = 1 / appState.zoom.value;\n context.strokeStyle = selectionColor;\n strokeRectWithRotation(context, x1 - dashedLinePadding, y1 - dashedLinePadding, x2 - x1 + dashedLinePadding * 2, y2 - y1 + dashedLinePadding * 2, (x1 + x2) / 2, (y1 + y2) / 2, 0);\n context.lineWidth = lineWidth;\n context.setLineDash(initialLineDash);\n const transformHandles = (0,_element__WEBPACK_IMPORTED_MODULE_0__.getTransformHandlesFromCoords)([x1, y1, x2, y2, (x1 + x2) / 2, (y1 + y2) / 2], 0, appState.zoom, \"mouse\", isFrameSelected ? Object.assign(Object.assign({}, (0,_element_transformHandles__WEBPACK_IMPORTED_MODULE_6__.getOmitSidesForDevice)(device)), {\n rotation: true\n }) : (0,_element_transformHandles__WEBPACK_IMPORTED_MODULE_6__.getOmitSidesForDevice)(device));\n\n if (selectedElements.some(element => !element.locked)) {\n renderTransformHandles(context, renderConfig, appState, transformHandles, 0);\n }\n }\n\n context.restore();\n }\n\n appState.searchMatches.forEach(({\n id,\n focus,\n matchedLines\n }) => {\n const element = elementsMap.get(id);\n\n if (element && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_14__.isTextElement)(element)) {\n const [elementX1, elementY1,,, cx, cy] = (0,_element__WEBPACK_IMPORTED_MODULE_0__.getElementAbsoluteCoords)(element, elementsMap, true);\n context.save();\n\n if (appState.theme === _constants__WEBPACK_IMPORTED_MODULE_8__.THEME.LIGHT) {\n if (focus) {\n context.fillStyle = \"rgba(255, 124, 0, 0.4)\";\n } else {\n context.fillStyle = \"rgba(255, 226, 0, 0.4)\";\n }\n } else if (focus) {\n context.fillStyle = \"rgba(229, 82, 0, 0.4)\";\n } else {\n context.fillStyle = \"rgba(99, 52, 0, 0.4)\";\n }\n\n context.translate(appState.scrollX, appState.scrollY);\n context.translate(cx, cy);\n context.rotate(element.angle);\n matchedLines.forEach(matchedLine => {\n context.fillRect(elementX1 + matchedLine.offsetX - cx, elementY1 + matchedLine.offsetY - cy, matchedLine.width, matchedLine.height);\n });\n context.restore();\n }\n });\n (0,_renderer_renderSnaps__WEBPACK_IMPORTED_MODULE_9__.renderSnaps)(context, appState);\n context.restore();\n (0,_clients__WEBPACK_IMPORTED_MODULE_4__.renderRemoteCursors)({\n context,\n renderConfig,\n appState,\n normalizedWidth,\n normalizedHeight\n }); // Paint scrollbars\n\n let scrollBars;\n\n if (renderConfig.renderScrollbars) {\n scrollBars = (0,_scene_scrollbars__WEBPACK_IMPORTED_MODULE_2__.getScrollBars)(visibleElements, normalizedWidth, normalizedHeight, appState);\n context.save();\n context.fillStyle = _scene_scrollbars__WEBPACK_IMPORTED_MODULE_2__.SCROLLBAR_COLOR;\n context.strokeStyle = \"rgba(255,255,255,0.8)\";\n [scrollBars.horizontal, scrollBars.vertical].forEach(scrollBar => {\n if (scrollBar) {\n (0,_renderer_roundRect__WEBPACK_IMPORTED_MODULE_1__.roundRect)(context, scrollBar.x, scrollBar.y, scrollBar.width, scrollBar.height, _scene_scrollbars__WEBPACK_IMPORTED_MODULE_2__.SCROLLBAR_WIDTH / 2);\n }\n });\n context.restore();\n }\n\n return {\n scrollBars,\n atLeastOneVisibleElement: visibleElements.length > 0,\n elementsMap\n };\n};\n/** throttled to animation framerate */\n\n\nconst renderInteractiveSceneThrottled = (0,_utils__WEBPACK_IMPORTED_MODULE_7__.throttleRAF)(config => {\n var _a;\n\n const ret = _renderInteractiveScene(config);\n\n (_a = config.callback) === null || _a === void 0 ? void 0 : _a.call(config, ret);\n}, {\n trailing: true\n});\n/**\n * Interactive scene is the ui-canvas where we render bounding boxes, selections\n * and other ui stuff.\n */\n\nconst renderInteractiveScene = (renderConfig, throttle) => {\n if (throttle) {\n renderInteractiveSceneThrottled(renderConfig);\n return undefined;\n }\n\n const ret = _renderInteractiveScene(renderConfig);\n\n renderConfig.callback(ret);\n return ret;\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./renderer/interactiveScene.ts?");
|
|
3502
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"renderInteractiveScene\": () => (/* binding */ renderInteractiveScene),\n/* harmony export */ \"renderInteractiveSceneThrottled\": () => (/* binding */ renderInteractiveSceneThrottled)\n/* harmony export */ });\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _renderer_roundRect__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../renderer/roundRect */ \"./renderer/roundRect.ts\");\n/* harmony import */ var _scene_scrollbars__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../scene/scrollbars */ \"./scene/scrollbars.ts\");\n/* harmony import */ var _renderer_renderElement__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../renderer/renderElement */ \"./renderer/renderElement.ts\");\n/* harmony import */ var _clients__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../clients */ \"./clients.ts\");\n/* harmony import */ var _groups__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../groups */ \"./groups.ts\");\n/* harmony import */ var _element_transformHandles__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../element/transformHandles */ \"./element/transformHandles.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _renderer_renderSnaps__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../renderer/renderSnaps */ \"./renderer/renderSnaps.ts\");\n/* harmony import */ var _element_binding__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../element/binding */ \"./element/binding.ts\");\n/* harmony import */ var _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../element/linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./helpers */ \"./renderer/helpers.ts\");\n/* harmony import */ var open_color__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! open-color */ \"../../node_modules/open-color/open-color.json\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _shapes__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../shapes */ \"./shapes.tsx\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst renderLinearElementPointHighlight = (context, appState, elementsMap) => {\n var _a, _b;\n\n const {\n elementId,\n hoverPointIndex\n } = appState.selectedLinearElement;\n\n if ((_b = (_a = appState.editingLinearElement) === null || _a === void 0 ? void 0 : _a.selectedPointsIndices) === null || _b === void 0 ? void 0 : _b.includes(hoverPointIndex)) {\n return;\n }\n\n const element = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_11__.LinearElementEditor.getElement(elementId, elementsMap);\n\n if (!element) {\n return;\n }\n\n const point = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_11__.LinearElementEditor.getPointAtIndexGlobalCoordinates(element, hoverPointIndex, elementsMap);\n context.save();\n context.translate(appState.scrollX, appState.scrollY);\n highlightPoint(point, context, appState);\n context.restore();\n};\n\nconst highlightPoint = (point, context, appState) => {\n context.fillStyle = \"rgba(105, 101, 219, 0.4)\";\n (0,_helpers__WEBPACK_IMPORTED_MODULE_12__.fillCircle)(context, point[0], point[1], _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_11__.LinearElementEditor.POINT_HANDLE_SIZE / appState.zoom.value, false);\n};\n\nconst strokeRectWithRotation = (context, x, y, width, height, cx, cy, angle, fill = false,\n/** should account for zoom */\nradius = 0) => {\n context.save();\n context.translate(cx, cy);\n context.rotate(angle);\n\n if (fill) {\n context.fillRect(x - cx, y - cy, width, height);\n }\n\n if (radius && context.roundRect) {\n context.beginPath();\n context.roundRect(x - cx, y - cy, width, height, radius);\n context.stroke();\n context.closePath();\n } else {\n context.strokeRect(x - cx, y - cy, width, height);\n }\n\n context.restore();\n};\n\nconst strokeDiamondWithRotation = (context, width, height, cx, cy, angle) => {\n context.save();\n context.translate(cx, cy);\n context.rotate(angle);\n context.beginPath();\n context.moveTo(0, height / 2);\n context.lineTo(width / 2, 0);\n context.lineTo(0, -height / 2);\n context.lineTo(-width / 2, 0);\n context.closePath();\n context.stroke();\n context.restore();\n};\n\nconst renderSingleLinearPoint = (context, appState, point, radius, isSelected, isPhantomPoint = false) => {\n context.strokeStyle = \"#5e5ad8\";\n context.setLineDash([]);\n context.fillStyle = \"rgba(255, 255, 255, 0.9)\";\n\n if (isSelected) {\n context.fillStyle = \"rgba(134, 131, 226, 0.9)\";\n } else if (isPhantomPoint) {\n context.fillStyle = \"rgba(177, 151, 252, 0.7)\";\n }\n\n (0,_helpers__WEBPACK_IMPORTED_MODULE_12__.fillCircle)(context, point[0], point[1], radius / appState.zoom.value, !isPhantomPoint);\n};\n\nconst strokeEllipseWithRotation = (context, width, height, cx, cy, angle) => {\n context.beginPath();\n context.ellipse(cx, cy, width / 2, height / 2, angle, 0, Math.PI * 2);\n context.stroke();\n};\n\nconst renderBindingHighlightForBindableElement = (context, element, elementsMap, highlightedColor) => {\n const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_0__.getElementAbsoluteCoords)(element, elementsMap);\n const width = x2 - x1;\n const height = y2 - y1;\n const thickness = 10; // So that we don't overlap the element itself\n\n const strokeOffset = 4;\n context.strokeStyle = highlightedColor !== null && highlightedColor !== void 0 ? highlightedColor : \"rgba(128,128,128,.1)\"; //zsviczian\n\n context.lineWidth = thickness - strokeOffset;\n const padding = strokeOffset / 2 + thickness / 2;\n const radius = (0,_shapes__WEBPACK_IMPORTED_MODULE_15__.getCornerRadius)(Math.min(element.width, element.height), element);\n\n switch (element.type) {\n case \"rectangle\":\n case \"text\":\n case \"image\":\n case \"iframe\":\n case \"embeddable\":\n case \"frame\":\n case \"magicframe\":\n strokeRectWithRotation(context, x1 - padding, y1 - padding, width + padding * 2, height + padding * 2, x1 + width / 2, y1 + height / 2, element.angle, undefined, radius);\n break;\n\n case \"diamond\":\n const side = Math.hypot(width, height);\n const wPadding = padding * side / height;\n const hPadding = padding * side / width;\n strokeDiamondWithRotation(context, width + wPadding * 2, height + hPadding * 2, x1 + width / 2, y1 + height / 2, element.angle);\n break;\n\n case \"ellipse\":\n strokeEllipseWithRotation(context, width + padding * 2, height + padding * 2, x1 + width / 2, y1 + height / 2, element.angle);\n break;\n }\n};\n\nconst renderBindingHighlightForSuggestedPointBinding = (context, suggestedBinding, elementsMap, highlightedColor) => {\n const [element, startOrEnd, bindableElement] = suggestedBinding;\n const threshold = (0,_element_binding__WEBPACK_IMPORTED_MODULE_10__.maxBindingGap)(bindableElement, bindableElement.width, bindableElement.height);\n context.strokeStyle = \"rgba(0,0,0,0)\";\n context.fillStyle = highlightedColor !== null && highlightedColor !== void 0 ? highlightedColor : \"rgba(128,128,128,.1)\"; //zsviczian \"rgba(0,0,0,.05)\";\n\n const pointIndices = startOrEnd === \"both\" ? [0, -1] : startOrEnd === \"start\" ? [0] : [-1];\n pointIndices.forEach(index => {\n const [x, y] = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_11__.LinearElementEditor.getPointAtIndexGlobalCoordinates(element, index, elementsMap);\n (0,_helpers__WEBPACK_IMPORTED_MODULE_12__.fillCircle)(context, x, y, threshold);\n });\n};\n\nconst renderSelectionBorder = (context, appState, elementProperties) => {\n const {\n angle,\n elementX1,\n elementY1,\n elementX2,\n elementY2,\n selectionColors,\n cx,\n cy,\n dashed,\n activeEmbeddable\n } = elementProperties;\n const elementWidth = elementX2 - elementX1;\n const elementHeight = elementY2 - elementY1;\n const padding = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_TRANSFORM_HANDLE_SPACING * 2;\n const linePadding = padding / appState.zoom.value;\n const lineWidth = 8 / appState.zoom.value;\n const spaceWidth = 4 / appState.zoom.value;\n context.save();\n context.translate(appState.scrollX, appState.scrollY);\n const thick = activeEmbeddable || appState.highlightSearchResult; //zsviczian\n\n context.lineWidth = (thick ? 4 : 1) / appState.zoom.value; //zsviczian\n\n const count = selectionColors.length;\n\n for (let index = 0; index < count; ++index) {\n context.strokeStyle = selectionColors[index];\n\n if (dashed) {\n context.setLineDash([lineWidth, spaceWidth + (lineWidth + spaceWidth) * (count - 1)]);\n }\n\n context.lineDashOffset = (lineWidth + spaceWidth) * index;\n strokeRectWithRotation(context, elementX1 - linePadding, elementY1 - linePadding, elementWidth + linePadding * 2, elementHeight + linePadding * 2, cx, cy, angle);\n }\n\n context.restore();\n};\n\nconst renderBindingHighlight = (context, appState, suggestedBinding, elementsMap) => {\n const renderHighlight = Array.isArray(suggestedBinding) ? renderBindingHighlightForSuggestedPointBinding : renderBindingHighlightForBindableElement;\n context.save();\n context.translate(appState.scrollX, appState.scrollY);\n renderHighlight(context, suggestedBinding, elementsMap, `${appState.gridColor.Bold}`); //zsviczian\n\n context.restore();\n};\n\nconst renderFrameHighlight = (context, appState, frame, elementsMap) => {\n const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_0__.getElementAbsoluteCoords)(frame, elementsMap);\n const width = x2 - x1;\n const height = y2 - y1;\n context.strokeStyle = \"rgb(0,118,255)\";\n context.lineWidth = _constants__WEBPACK_IMPORTED_MODULE_8__.FRAME_STYLE.strokeWidth / appState.zoom.value;\n context.save();\n context.translate(appState.scrollX, appState.scrollY);\n strokeRectWithRotation(context, x1, y1, width, height, x1 + width / 2, y1 + height / 2, frame.angle, false, _constants__WEBPACK_IMPORTED_MODULE_8__.FRAME_STYLE.radius / appState.zoom.value);\n context.restore();\n};\n\nconst renderElementsBoxHighlight = (context, appState, elements) => {\n const individualElements = elements.filter(element => element.groupIds.length === 0);\n const elementsInGroups = elements.filter(element => element.groupIds.length > 0);\n\n const getSelectionFromElements = elements => {\n var _a;\n\n const [elementX1, elementY1, elementX2, elementY2] = (0,_element__WEBPACK_IMPORTED_MODULE_0__.getCommonBounds)(elements);\n return {\n angle: 0,\n elementX1,\n elementX2,\n elementY1,\n elementY2,\n selectionColors: [(_a = appState.gridColor.Bold) !== null && _a !== void 0 ? _a : \"rgb(0,118,255)\"],\n dashed: false,\n cx: elementX1 + (elementX2 - elementX1) / 2,\n cy: elementY1 + (elementY2 - elementY1) / 2,\n activeEmbeddable: false\n };\n };\n\n const getSelectionForGroupId = groupId => {\n const groupElements = (0,_groups__WEBPACK_IMPORTED_MODULE_5__.getElementsInGroup)(elements, groupId);\n return getSelectionFromElements(groupElements);\n };\n\n Object.entries((0,_groups__WEBPACK_IMPORTED_MODULE_5__.selectGroupsFromGivenElements)(elementsInGroups, appState)).filter(([id, isSelected]) => isSelected).map(([id, isSelected]) => id).map(groupId => getSelectionForGroupId(groupId)).concat(individualElements.map(element => getSelectionFromElements([element]))).forEach(selection => renderSelectionBorder(context, appState, selection));\n};\n\nconst renderLinearPointHandles = (context, appState, element, elementsMap) => {\n if (!appState.selectedLinearElement) {\n return;\n }\n\n context.save();\n context.translate(appState.scrollX, appState.scrollY);\n context.lineWidth = 1 / appState.zoom.value;\n const points = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_11__.LinearElementEditor.getPointsGlobalCoordinates(element, elementsMap);\n const {\n POINT_HANDLE_SIZE\n } = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_11__.LinearElementEditor;\n const radius = appState.editingLinearElement ? POINT_HANDLE_SIZE : POINT_HANDLE_SIZE / 2;\n points.forEach((point, idx) => {\n var _a, _b;\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_14__.isElbowArrow)(element) && idx !== 0 && idx !== points.length - 1) {\n return;\n }\n\n const isSelected = !!((_b = (_a = appState.editingLinearElement) === null || _a === void 0 ? void 0 : _a.selectedPointsIndices) === null || _b === void 0 ? void 0 : _b.includes(idx));\n renderSingleLinearPoint(context, appState, point, radius, isSelected);\n }); //Rendering segment mid points\n\n const midPoints = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_11__.LinearElementEditor.getEditorMidPoints(element, elementsMap, appState).filter(midPoint => midPoint !== null);\n midPoints.forEach(segmentMidPoint => {\n var _a;\n\n if (((_a = appState === null || appState === void 0 ? void 0 : appState.selectedLinearElement) === null || _a === void 0 ? void 0 : _a.segmentMidPointHoveredCoords) && _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_11__.LinearElementEditor.arePointsEqual(segmentMidPoint, appState.selectedLinearElement.segmentMidPointHoveredCoords)) {\n // The order of renderingSingleLinearPoint and highLight points is different\n // inside vs outside editor as hover states are different,\n // in editor when hovered the original point is not visible as hover state fully covers it whereas outside the\n // editor original point is visible and hover state is just an outer circle.\n if (appState.editingLinearElement) {\n renderSingleLinearPoint(context, appState, segmentMidPoint, radius, false);\n highlightPoint(segmentMidPoint, context, appState);\n } else {\n highlightPoint(segmentMidPoint, context, appState);\n renderSingleLinearPoint(context, appState, segmentMidPoint, radius, false);\n }\n } else if (appState.editingLinearElement || points.length === 2) {\n renderSingleLinearPoint(context, appState, segmentMidPoint, POINT_HANDLE_SIZE / 2, false, true);\n }\n });\n context.restore();\n};\n\nconst renderTransformHandles = (context, renderConfig, appState, transformHandles, angle) => {\n Object.keys(transformHandles).forEach(key => {\n const transformHandle = transformHandles[key];\n\n if (transformHandle !== undefined) {\n const [x, y, width, height] = transformHandle;\n context.save();\n context.lineWidth = 1 / appState.zoom.value;\n\n if (renderConfig.selectionColor) {\n context.strokeStyle = renderConfig.selectionColor;\n }\n\n if (key === \"rotation\") {\n (0,_helpers__WEBPACK_IMPORTED_MODULE_12__.fillCircle)(context, x + width / 2, y + height / 2, width / 2); // prefer round corners if roundRect API is available\n } else if (context.roundRect) {\n context.beginPath();\n context.roundRect(x, y, width, height, 2 / appState.zoom.value);\n context.fill();\n context.stroke();\n } else {\n strokeRectWithRotation(context, x, y, width, height, x + width / 2, y + height / 2, angle, true);\n }\n\n context.restore();\n }\n });\n};\n\nconst renderTextBox = (text, context, appState, selectionColor) => {\n context.save();\n const padding = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_TRANSFORM_HANDLE_SPACING * 2 / appState.zoom.value;\n const width = text.width + padding * 2;\n const height = text.height + padding * 2;\n const cx = text.x + width / 2;\n const cy = text.y + height / 2;\n const shiftX = -(width / 2 + padding);\n const shiftY = -(height / 2 + padding);\n context.translate(cx + appState.scrollX, cy + appState.scrollY);\n context.rotate(text.angle);\n context.lineWidth = 1 / appState.zoom.value;\n context.strokeStyle = selectionColor;\n context.strokeRect(shiftX, shiftY, width, height);\n context.restore();\n};\n\nconst _renderInteractiveScene = ({\n canvas,\n elementsMap,\n visibleElements,\n selectedElements,\n allElementsMap,\n scale,\n appState,\n renderConfig,\n device\n}) => {\n var _a, _b, _c;\n\n if (canvas === null) {\n return {\n atLeastOneVisibleElement: false,\n elementsMap\n };\n }\n\n const [normalizedWidth, normalizedHeight] = (0,_helpers__WEBPACK_IMPORTED_MODULE_12__.getNormalizedCanvasDimensions)(canvas, scale);\n const context = (0,_helpers__WEBPACK_IMPORTED_MODULE_12__.bootstrapCanvas)({\n canvas,\n scale,\n normalizedWidth,\n normalizedHeight\n }); // Apply zoom\n\n context.save();\n context.scale(appState.zoom.value, appState.zoom.value);\n let editingLinearElement = undefined;\n visibleElements.forEach(element => {\n var _a; // Getting the element using LinearElementEditor during collab mismatches version - being one head of visible elements due to\n // ShapeCache returns empty hence making sure that we get the\n // correct element from visible elements\n\n\n if (((_a = appState.editingLinearElement) === null || _a === void 0 ? void 0 : _a.elementId) === element.id) {\n if (element) {\n editingLinearElement = element;\n }\n }\n });\n\n if (editingLinearElement) {\n renderLinearPointHandles(context, appState, editingLinearElement, elementsMap);\n } // Paint selection element\n\n\n if (appState.selectionElement) {\n try {\n (0,_renderer_renderElement__WEBPACK_IMPORTED_MODULE_3__.renderSelectionElement)(appState.selectionElement, context, appState, renderConfig.selectionColor);\n } catch (error) {\n console.error(error);\n }\n }\n\n if (appState.editingTextElement && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_14__.isTextElement)(appState.editingTextElement)) {\n const textElement = allElementsMap.get(appState.editingTextElement.id);\n\n if (textElement && !textElement.autoResize) {\n renderTextBox(textElement, context, appState, renderConfig.selectionColor);\n }\n }\n\n if (appState.isBindingEnabled) {\n appState.suggestedBindings.filter(binding => binding != null).forEach(suggestedBinding => {\n renderBindingHighlight(context, appState, suggestedBinding, elementsMap);\n });\n }\n\n if (appState.frameToHighlight) {\n renderFrameHighlight(context, appState, appState.frameToHighlight, elementsMap);\n }\n\n if (appState.elementsToHighlight) {\n renderElementsBoxHighlight(context, appState, appState.elementsToHighlight);\n }\n\n const isFrameSelected = selectedElements.some(element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_14__.isFrameLikeElement)(element)); // Getting the element using LinearElementEditor during collab mismatches version - being one head of visible elements due to\n // ShapeCache returns empty hence making sure that we get the\n // correct element from visible elements\n\n if (selectedElements.length === 1 && ((_a = appState.editingLinearElement) === null || _a === void 0 ? void 0 : _a.elementId) === selectedElements[0].id) {\n renderLinearPointHandles(context, appState, selectedElements[0], elementsMap);\n }\n\n if (appState.selectedLinearElement && appState.selectedLinearElement.hoverPointIndex >= 0 && !((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_14__.isElbowArrow)(selectedElements[0]) && appState.selectedLinearElement.hoverPointIndex > 0 && appState.selectedLinearElement.hoverPointIndex < selectedElements[0].points.length - 1)) {\n renderLinearElementPointHighlight(context, appState, elementsMap);\n } // Paint selected elements\n\n\n if (!appState.multiElement && !appState.editingLinearElement) {\n const showBoundingBox = (0,_element_transformHandles__WEBPACK_IMPORTED_MODULE_6__.shouldShowBoundingBox)(selectedElements, appState);\n const isSingleLinearElementSelected = selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_14__.isLinearElement)(selectedElements[0]); // render selected linear element points\n\n if (isSingleLinearElementSelected && ((_b = appState.selectedLinearElement) === null || _b === void 0 ? void 0 : _b.elementId) === selectedElements[0].id && !selectedElements[0].locked) {\n renderLinearPointHandles(context, appState, selectedElements[0], elementsMap);\n }\n\n const selectionColor = renderConfig.selectionColor || open_color__WEBPACK_IMPORTED_MODULE_13__.black;\n\n if (showBoundingBox) {\n // Optimisation for finding quickly relevant element ids\n const locallySelectedIds = (0,_utils__WEBPACK_IMPORTED_MODULE_7__.arrayToMap)(selectedElements);\n const selections = [];\n\n for (const element of elementsMap.values()) {\n const selectionColors = [];\n const remoteClients = renderConfig.remoteSelectedElementIds.get(element.id);\n\n if (!( // Elbow arrow elements cannot be selected when bound on either end\n isSingleLinearElementSelected && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_14__.isElbowArrow)(element) && (element.startBinding || element.endBinding))) {\n // local user\n if (locallySelectedIds.has(element.id) && !(0,_groups__WEBPACK_IMPORTED_MODULE_5__.isSelectedViaGroup)(appState, element)) {\n selectionColors.push(selectionColor);\n } // remote users\n\n\n if (remoteClients) {\n selectionColors.push(...remoteClients.map(socketId => {\n const background = (0,_clients__WEBPACK_IMPORTED_MODULE_4__.getClientColor)(socketId, appState.collaborators.get(socketId));\n return background;\n }));\n }\n }\n\n if (selectionColors.length) {\n const [elementX1, elementY1, elementX2, elementY2, cx, cy] = (0,_element__WEBPACK_IMPORTED_MODULE_0__.getElementAbsoluteCoords)(element, elementsMap, true);\n selections.push({\n angle: element.angle,\n elementX1,\n elementY1,\n elementX2,\n elementY2,\n selectionColors,\n dashed: !!remoteClients,\n cx,\n cy,\n activeEmbeddable: ((_c = appState.activeEmbeddable) === null || _c === void 0 ? void 0 : _c.element) === element && appState.activeEmbeddable.state === \"active\"\n });\n }\n }\n\n const addSelectionForGroupId = groupId => {\n const groupElements = (0,_groups__WEBPACK_IMPORTED_MODULE_5__.getElementsInGroup)(elementsMap, groupId);\n const [elementX1, elementY1, elementX2, elementY2] = (0,_element__WEBPACK_IMPORTED_MODULE_0__.getCommonBounds)(groupElements);\n selections.push({\n angle: 0,\n elementX1,\n elementX2,\n elementY1,\n elementY2,\n selectionColors: [open_color__WEBPACK_IMPORTED_MODULE_13__.black],\n dashed: true,\n cx: elementX1 + (elementX2 - elementX1) / 2,\n cy: elementY1 + (elementY2 - elementY1) / 2,\n activeEmbeddable: false\n });\n };\n\n for (const groupId of (0,_groups__WEBPACK_IMPORTED_MODULE_5__.getSelectedGroupIds)(appState)) {\n // TODO: support multiplayer selected group IDs\n addSelectionForGroupId(groupId);\n }\n\n if (appState.editingGroupId) {\n addSelectionForGroupId(appState.editingGroupId);\n }\n\n selections.forEach(selection => renderSelectionBorder(context, appState, selection));\n } // Paint resize transformHandles\n\n\n context.save();\n context.translate(appState.scrollX, appState.scrollY);\n\n if (selectedElements.length === 1) {\n context.fillStyle = open_color__WEBPACK_IMPORTED_MODULE_13__.white;\n const transformHandles = (0,_element__WEBPACK_IMPORTED_MODULE_0__.getTransformHandles)(selectedElements[0], appState.zoom, elementsMap, \"mouse\", // when we render we don't know which pointer type so use mouse,\n (0,_element_transformHandles__WEBPACK_IMPORTED_MODULE_6__.getOmitSidesForDevice)(device));\n\n if (!appState.viewModeEnabled && showBoundingBox && // do not show transform handles when text is being edited\n !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_14__.isTextElement)(appState.editingTextElement)) {\n renderTransformHandles(context, renderConfig, appState, transformHandles, selectedElements[0].angle);\n }\n } else if (selectedElements.length > 1 && !appState.isRotating) {\n const dashedLinePadding = _constants__WEBPACK_IMPORTED_MODULE_8__.DEFAULT_TRANSFORM_HANDLE_SPACING * 2 / appState.zoom.value;\n context.fillStyle = open_color__WEBPACK_IMPORTED_MODULE_13__.white;\n const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_0__.getCommonBounds)(selectedElements);\n const initialLineDash = context.getLineDash();\n context.setLineDash([2 / appState.zoom.value]);\n const lineWidth = context.lineWidth;\n context.lineWidth = 1 / appState.zoom.value;\n context.strokeStyle = selectionColor;\n strokeRectWithRotation(context, x1 - dashedLinePadding, y1 - dashedLinePadding, x2 - x1 + dashedLinePadding * 2, y2 - y1 + dashedLinePadding * 2, (x1 + x2) / 2, (y1 + y2) / 2, 0);\n context.lineWidth = lineWidth;\n context.setLineDash(initialLineDash);\n const transformHandles = (0,_element__WEBPACK_IMPORTED_MODULE_0__.getTransformHandlesFromCoords)([x1, y1, x2, y2, (x1 + x2) / 2, (y1 + y2) / 2], 0, appState.zoom, \"mouse\", isFrameSelected ? Object.assign(Object.assign({}, (0,_element_transformHandles__WEBPACK_IMPORTED_MODULE_6__.getOmitSidesForDevice)(device)), {\n rotation: true\n }) : (0,_element_transformHandles__WEBPACK_IMPORTED_MODULE_6__.getOmitSidesForDevice)(device));\n\n if (selectedElements.some(element => !element.locked)) {\n renderTransformHandles(context, renderConfig, appState, transformHandles, 0);\n }\n }\n\n context.restore();\n }\n\n appState.searchMatches.forEach(({\n id,\n focus,\n matchedLines\n }) => {\n const element = elementsMap.get(id);\n\n if (element && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_14__.isTextElement)(element)) {\n const [elementX1, elementY1,,, cx, cy] = (0,_element__WEBPACK_IMPORTED_MODULE_0__.getElementAbsoluteCoords)(element, elementsMap, true);\n context.save();\n\n if (appState.theme === _constants__WEBPACK_IMPORTED_MODULE_8__.THEME.LIGHT) {\n if (focus) {\n context.fillStyle = \"rgba(255, 124, 0, 0.4)\";\n } else {\n context.fillStyle = \"rgba(255, 226, 0, 0.4)\";\n }\n } else if (focus) {\n context.fillStyle = \"rgba(229, 82, 0, 0.4)\";\n } else {\n context.fillStyle = \"rgba(99, 52, 0, 0.4)\";\n }\n\n context.translate(appState.scrollX, appState.scrollY);\n context.translate(cx, cy);\n context.rotate(element.angle);\n matchedLines.forEach(matchedLine => {\n context.fillRect(elementX1 + matchedLine.offsetX - cx, elementY1 + matchedLine.offsetY - cy, matchedLine.width, matchedLine.height);\n });\n context.restore();\n }\n });\n (0,_renderer_renderSnaps__WEBPACK_IMPORTED_MODULE_9__.renderSnaps)(context, appState);\n context.restore();\n (0,_clients__WEBPACK_IMPORTED_MODULE_4__.renderRemoteCursors)({\n context,\n renderConfig,\n appState,\n normalizedWidth,\n normalizedHeight\n }); // Paint scrollbars\n\n let scrollBars;\n\n if (renderConfig.renderScrollbars) {\n scrollBars = (0,_scene_scrollbars__WEBPACK_IMPORTED_MODULE_2__.getScrollBars)(visibleElements, normalizedWidth, normalizedHeight, appState);\n context.save();\n context.fillStyle = _scene_scrollbars__WEBPACK_IMPORTED_MODULE_2__.SCROLLBAR_COLOR;\n context.strokeStyle = \"rgba(255,255,255,0.8)\";\n [scrollBars.horizontal, scrollBars.vertical].forEach(scrollBar => {\n if (scrollBar) {\n (0,_renderer_roundRect__WEBPACK_IMPORTED_MODULE_1__.roundRect)(context, scrollBar.x, scrollBar.y, scrollBar.width, scrollBar.height, _scene_scrollbars__WEBPACK_IMPORTED_MODULE_2__.SCROLLBAR_WIDTH / 2);\n }\n });\n context.restore();\n }\n\n return {\n scrollBars,\n atLeastOneVisibleElement: visibleElements.length > 0,\n elementsMap\n };\n};\n/** throttled to animation framerate */\n\n\nconst renderInteractiveSceneThrottled = (0,_utils__WEBPACK_IMPORTED_MODULE_7__.throttleRAF)(config => {\n var _a;\n\n const ret = _renderInteractiveScene(config);\n\n (_a = config.callback) === null || _a === void 0 ? void 0 : _a.call(config, ret);\n}, {\n trailing: true\n});\n/**\n * Interactive scene is the ui-canvas where we render bounding boxes, selections\n * and other ui stuff.\n */\n\nconst renderInteractiveScene = (renderConfig, throttle) => {\n if (throttle) {\n renderInteractiveSceneThrottled(renderConfig);\n return undefined;\n }\n\n const ret = _renderInteractiveScene(renderConfig);\n\n renderConfig.callback(ret);\n return ret;\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./renderer/interactiveScene.ts?");
|
|
3503
3503
|
|
|
3504
3504
|
/***/ }),
|
|
3505
3505
|
|
|
@@ -3565,7 +3565,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
3565
3565
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
3566
3566
|
|
|
3567
3567
|
"use strict";
|
|
3568
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"renderSceneToSvg\": () => (/* binding */ renderSceneToSvg)\n/* harmony export */ });\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _data_url__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../data/url */ \"./data/url.ts\");\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _element_embeddable__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../element/embeddable */ \"./element/embeddable.ts\");\n/* harmony import */ var _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../element/linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _element_textElement__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../element/textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _frame__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../frame */ \"./frame.ts\");\n/* harmony import */ var _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../scene/ShapeCache */ \"./scene/ShapeCache.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _renderElement__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./renderElement */ \"./renderer/renderElement.ts\");\n/* harmony import */ var _fonts__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../fonts */ \"./fonts/index.ts\");\n/* harmony import */ var _shapes__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../shapes */ \"./shapes.tsx\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst roughSVGDrawWithPrecision = (rsvg, drawable, precision) => {\n if (typeof precision === \"undefined\") {\n return rsvg.draw(drawable);\n }\n\n const pshape = {\n sets: drawable.sets,\n shape: drawable.shape,\n options: Object.assign(Object.assign({}, drawable.options), {\n fixedDecimalPlaceDigits: precision\n })\n };\n return rsvg.draw(pshape);\n};\n\nconst maybeWrapNodesInFrameClipPath = (element, root, nodes, frameRendering, elementsMap) => {\n if (!frameRendering.enabled || !frameRendering.clip) {\n return null;\n }\n\n const frame = (0,_frame__WEBPACK_IMPORTED_MODULE_7__.getContainingFrame)(element, elementsMap);\n\n if (frame) {\n const g = root.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"g\");\n g.setAttributeNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"clip-path\", `url(#${frame.id})`);\n nodes.forEach(node => g.appendChild(node));\n return g;\n }\n\n return null;\n};\n\nconst renderElementToSvg = (element, elementsMap, rsvg, svgRoot, files, offsetX, offsetY, renderConfig) => {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;\n\n const offset = {\n x: offsetX,\n y: offsetY\n };\n const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_2__.getElementAbsoluteCoords)(element, elementsMap);\n let cx = (x2 - x1) / 2 - (element.x - x1);\n let cy = (y2 - y1) / 2 - (element.y - y1);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isTextElement)(element)) {\n const container = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_5__.getContainerElement)(element, elementsMap);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isArrowElement)(container)) {\n const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_2__.getElementAbsoluteCoords)(container, elementsMap);\n const boundTextCoords = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_4__.LinearElementEditor.getBoundTextElementPosition(container, element, elementsMap);\n cx = (x2 - x1) / 2 - (boundTextCoords.x - x1);\n cy = (y2 - y1) / 2 - (boundTextCoords.y - y1);\n offsetX = offsetX + boundTextCoords.x - element.x;\n offsetY = offsetY + boundTextCoords.y - element.y;\n }\n }\n\n const degree = 180 * element.angle / Math.PI; // element to append node to, most of the time svgRoot\n\n let root = svgRoot; // if the element has a link, create an anchor tag and make that the new root\n\n if (element.link) {\n const anchorTag = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"a\");\n anchorTag.setAttribute(\"href\", (0,_data_url__WEBPACK_IMPORTED_MODULE_1__.normalizeLink)(element.link));\n root.appendChild(anchorTag);\n root = anchorTag;\n }\n\n const addToRoot = (node, element) => {\n if ((0,_utils__WEBPACK_IMPORTED_MODULE_9__.isTestEnv)()) {\n node.setAttribute(\"data-id\", element.id);\n }\n\n root.appendChild(node);\n };\n\n const opacity = ((_b = (_a = (0,_frame__WEBPACK_IMPORTED_MODULE_7__.getContainingFrame)(element, elementsMap)) === null || _a === void 0 ? void 0 : _a.opacity) !== null && _b !== void 0 ? _b : 100) * element.opacity / 10000;\n\n switch (element.type) {\n case \"selection\":\n {\n // Since this is used only during editing experience, which is canvas based,\n // this should not happen\n throw new Error(\"Selection rendering is not supported for SVG\");\n }\n\n case \"rectangle\":\n case \"diamond\":\n case \"ellipse\":\n {\n const shape = _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_8__.ShapeCache.generateElementShape(element, null);\n const node = roughSVGDrawWithPrecision(rsvg, shape, _constants__WEBPACK_IMPORTED_MODULE_0__.MAX_DECIMALS_FOR_SVG_EXPORT);\n\n if (opacity !== 1) {\n node.setAttribute(\"stroke-opacity\", `${opacity}`);\n node.setAttribute(\"fill-opacity\", `${opacity}`);\n }\n\n node.setAttribute(\"stroke-linecap\", \"round\");\n node.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n const g = maybeWrapNodesInFrameClipPath(element, root, [node], renderConfig.frameRendering, elementsMap);\n addToRoot(g || node, element);\n break;\n }\n\n case \"iframe\":\n case \"embeddable\":\n {\n // render placeholder rectangle\n const shape = _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_8__.ShapeCache.generateElementShape(element, renderConfig);\n const node = roughSVGDrawWithPrecision(rsvg, shape, _constants__WEBPACK_IMPORTED_MODULE_0__.MAX_DECIMALS_FOR_SVG_EXPORT);\n const opacity = element.opacity / 100;\n\n if (opacity !== 1) {\n node.setAttribute(\"stroke-opacity\", `${opacity}`);\n node.setAttribute(\"fill-opacity\", `${opacity}`);\n }\n\n node.setAttribute(\"stroke-linecap\", \"round\");\n node.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n addToRoot(node, element);\n const label = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_3__.createPlaceholderEmbeddableLabel)(element);\n renderElementToSvg(label, elementsMap, rsvg, root, files, label.x + offset.x - element.x, label.y + offset.y - element.y, renderConfig);\n const scaleX = ((_c = element.scale) === null || _c === void 0 ? void 0 : _c[0]) || 1; //zsviczian\n\n const scaleY = ((_d = element.scale) === null || _d === void 0 ? void 0 : _d[1]) || 1; //zsviczian\n // render embeddable element + iframe\n\n const embeddableNode = roughSVGDrawWithPrecision(rsvg, shape, _constants__WEBPACK_IMPORTED_MODULE_0__.MAX_DECIMALS_FOR_SVG_EXPORT);\n embeddableNode.setAttribute(\"stroke-linecap\", \"round\");\n embeddableNode.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy}) scale(${scaleX}, ${scaleY})`);\n\n while (embeddableNode.firstChild) {\n embeddableNode.removeChild(embeddableNode.firstChild);\n }\n\n const radius = (0,_shapes__WEBPACK_IMPORTED_MODULE_12__.getCornerRadius)(Math.min(element.width, element.height), element);\n const embedLink = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_3__.getEmbedLink)((0,_data_url__WEBPACK_IMPORTED_MODULE_1__.toValidURL)(element.link || \"\")); // if rendering embeddables explicitly disabled or\n // embedding documents via srcdoc (which doesn't seem to work for SVGs)\n // replace with a link instead\n\n if (renderConfig.renderEmbeddables === false || (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) === \"document\") {\n const anchorTag = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"a\");\n anchorTag.setAttribute(\"href\", (0,_data_url__WEBPACK_IMPORTED_MODULE_1__.normalizeLink)(element.link || \"\"));\n anchorTag.setAttribute(\"target\", \"_blank\");\n anchorTag.setAttribute(\"rel\", \"noopener noreferrer\");\n anchorTag.style.borderRadius = `${radius}px`;\n embeddableNode.appendChild(anchorTag);\n } else {\n const foreignObject = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"foreignObject\");\n foreignObject.style.width = `${element.width / scaleX}px`; //zsviczian\n\n foreignObject.style.height = `${element.height / scaleY}px`; //zsviczian\n\n foreignObject.style.border = \"none\";\n const div = foreignObject.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"div\");\n div.setAttribute(\"xmlns\", \"http://www.w3.org/1999/xhtml\");\n div.style.width = \"100%\";\n div.style.height = \"100%\";\n const iframe = div.ownerDocument.createElement(\"iframe\");\n iframe.src = (_e = embedLink === null || embedLink === void 0 ? void 0 : embedLink.link) !== null && _e !== void 0 ? _e : \"\";\n iframe.style.width = \"100%\";\n iframe.style.height = \"100%\";\n iframe.style.border = \"none\";\n iframe.style.borderRadius = `${radius}px`;\n iframe.style.top = \"0\";\n iframe.style.left = \"0\";\n iframe.allowFullscreen = true;\n div.appendChild(iframe);\n foreignObject.appendChild(div);\n embeddableNode.appendChild(foreignObject);\n }\n\n addToRoot(embeddableNode, element);\n break;\n }\n\n case \"line\":\n case \"arrow\":\n {\n const boundText = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_5__.getBoundTextElement)(element, elementsMap);\n const maskPath = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"mask\");\n\n if (boundText) {\n maskPath.setAttribute(\"id\", `mask-${element.id}`);\n const maskRectVisible = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"rect\");\n offsetX = offsetX || 0;\n offsetY = offsetY || 0;\n maskRectVisible.setAttribute(\"x\", \"0\");\n maskRectVisible.setAttribute(\"y\", \"0\");\n maskRectVisible.setAttribute(\"fill\", \"#fff\");\n maskRectVisible.setAttribute(\"width\", `${element.width + 100 + offsetX}`);\n maskRectVisible.setAttribute(\"height\", `${element.height + 100 + offsetY}`);\n maskPath.appendChild(maskRectVisible);\n const maskRectInvisible = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"rect\");\n const boundTextCoords = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_4__.LinearElementEditor.getBoundTextElementPosition(element, boundText, elementsMap);\n const maskX = offsetX + boundTextCoords.x - element.x;\n const maskY = offsetY + boundTextCoords.y - element.y;\n maskRectInvisible.setAttribute(\"x\", maskX.toString());\n maskRectInvisible.setAttribute(\"y\", maskY.toString());\n maskRectInvisible.setAttribute(\"fill\", \"#000\");\n maskRectInvisible.setAttribute(\"width\", `${boundText.width}`);\n maskRectInvisible.setAttribute(\"height\", `${boundText.height}`);\n maskRectInvisible.setAttribute(\"opacity\", \"1\");\n maskPath.appendChild(maskRectInvisible);\n }\n\n const group = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"g\");\n\n if (boundText) {\n group.setAttribute(\"mask\", `url(#mask-${element.id})`);\n }\n\n group.setAttribute(\"stroke-linecap\", \"round\");\n const shapes = _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_8__.ShapeCache.generateElementShape(element, renderConfig);\n shapes.forEach(shape => {\n const node = roughSVGDrawWithPrecision(rsvg, shape, _constants__WEBPACK_IMPORTED_MODULE_0__.MAX_DECIMALS_FOR_SVG_EXPORT);\n\n if (opacity !== 1) {\n node.setAttribute(\"stroke-opacity\", `${opacity}`);\n node.setAttribute(\"fill-opacity\", `${opacity}`);\n }\n\n node.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n\n if (element.type === \"line\" && (0,_shapes__WEBPACK_IMPORTED_MODULE_12__.isPathALoop)(element.points) && element.backgroundColor !== \"transparent\") {\n node.setAttribute(\"fill-rule\", \"evenodd\");\n }\n\n group.appendChild(node);\n });\n const g = maybeWrapNodesInFrameClipPath(element, root, [group, maskPath], renderConfig.frameRendering, elementsMap);\n\n if (g) {\n addToRoot(g, element);\n root.appendChild(g);\n } else {\n addToRoot(group, element);\n root.append(maskPath);\n }\n\n break;\n }\n\n case \"freedraw\":\n {\n const backgroundFillShape = _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_8__.ShapeCache.generateElementShape(element, renderConfig);\n const node = backgroundFillShape ? roughSVGDrawWithPrecision(rsvg, backgroundFillShape, _constants__WEBPACK_IMPORTED_MODULE_0__.MAX_DECIMALS_FOR_SVG_EXPORT) : svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"g\");\n\n if (opacity !== 1) {\n node.setAttribute(\"stroke-opacity\", `${opacity}`);\n node.setAttribute(\"fill-opacity\", `${opacity}`);\n }\n\n node.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n node.setAttribute(\"stroke\", \"none\");\n const path = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"path\"); //zsviczian\n\n if ((_g = (_f = element.customData) === null || _f === void 0 ? void 0 : _f.strokeOptions) === null || _g === void 0 ? void 0 : _g.hasOutline) {\n node.setAttribute(\"stroke-width\", `${element.strokeWidth * ((_h = element.customData.strokeOptions.outlineWidth) !== null && _h !== void 0 ? _h : 1)}`);\n const outline = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"path\");\n outline.setAttribute(\"fill\", \"none\");\n outline.setAttribute(\"stroke\", element.strokeColor);\n outline.setAttribute(\"d\", (0,_renderElement__WEBPACK_IMPORTED_MODULE_10__.getFreeDrawSvgPath)(element));\n node.appendChild(outline);\n path.setAttribute(\"fill\", element.backgroundColor);\n } else {\n path.setAttribute(\"fill\", element.strokeColor);\n }\n\n path.setAttribute(\"d\", (0,_renderElement__WEBPACK_IMPORTED_MODULE_10__.getFreeDrawSvgPath)(element));\n node.appendChild(path);\n const g = maybeWrapNodesInFrameClipPath(element, root, [node], renderConfig.frameRendering, elementsMap);\n addToRoot(g || node, element);\n break;\n }\n\n case \"image\":\n {\n const width = Math.round(element.width);\n const height = Math.round(element.height);\n const fileData = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isInitializedImageElement)(element) && files[element.fileId];\n\n if (fileData) {\n const symbolId = `image-${fileData.id}`;\n let symbol = svgRoot.querySelector(`#${symbolId}`);\n\n if (!symbol) {\n symbol = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"symbol\");\n symbol.id = symbolId;\n const image = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"image\");\n image.setAttribute(\"width\", \"100%\");\n image.setAttribute(\"height\", \"100%\");\n image.setAttribute(\"href\", fileData.dataURL);\n image.setAttribute(\"preserveAspectRatio\", \"none\"); //zsviczian\n\n symbol.appendChild(image);\n root.prepend(symbol);\n }\n\n const use = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"use\");\n use.setAttribute(\"href\", `#${symbolId}`); // in dark theme, revert the image color filter\n\n if (renderConfig.exportWithDarkMode && fileData.mimeType !== _constants__WEBPACK_IMPORTED_MODULE_0__.MIME_TYPES.svg) {\n use.setAttribute(\"filter\", _renderElement__WEBPACK_IMPORTED_MODULE_10__.IMAGE_INVERT_FILTER);\n }\n\n use.setAttribute(\"width\", `${width}`);\n use.setAttribute(\"height\", `${height}`);\n use.setAttribute(\"opacity\", `${opacity}`); // We first apply `scale` transforms (horizontal/vertical mirroring)\n // on the <use> element, then apply translation and rotation\n // on the <g> element which wraps the <use>.\n // Doing this separately is a quick hack to to work around compositing\n // the transformations correctly (the transform-origin was not being\n // applied correctly).\n\n if (element.scale[0] !== 1 || element.scale[1] !== 1) {\n const translateX = element.scale[0] !== 1 ? -width : 0;\n const translateY = element.scale[1] !== 1 ? -height : 0;\n use.setAttribute(\"transform\", `scale(${element.scale[0]}, ${element.scale[1]}) translate(${translateX} ${translateY})`);\n }\n\n const g = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"g\");\n g.appendChild(use);\n g.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n\n if (element.roundness) {\n const clipPath = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"clipPath\");\n clipPath.id = `image-clipPath-${element.id}`;\n const clipRect = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"rect\");\n const radius = (0,_shapes__WEBPACK_IMPORTED_MODULE_12__.getCornerRadius)(Math.min(element.width, element.height), element);\n clipRect.setAttribute(\"width\", `${element.width}`);\n clipRect.setAttribute(\"height\", `${element.height}`);\n clipRect.setAttribute(\"rx\", `${radius}`);\n clipRect.setAttribute(\"ry\", `${radius}`);\n clipPath.appendChild(clipRect);\n addToRoot(clipPath, element);\n g.setAttributeNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"clip-path\", `url(#${clipPath.id})`);\n }\n\n const clipG = maybeWrapNodesInFrameClipPath(element, root, [g], renderConfig.frameRendering, elementsMap);\n addToRoot(clipG || g, element);\n }\n\n break;\n }\n // frames are not rendered and only acts as a container\n\n case \"frame\":\n case \"magicframe\":\n {\n if (renderConfig.frameRendering.enabled && renderConfig.frameRendering.outline) {\n const rect = document.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"rect\");\n rect.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n rect.setAttribute(\"width\", `${element.width}px`);\n rect.setAttribute(\"height\", `${element.height}px`); // Rounded corners\n\n rect.setAttribute(\"rx\", _constants__WEBPACK_IMPORTED_MODULE_0__.FRAME_STYLE.radius.toString());\n rect.setAttribute(\"ry\", _constants__WEBPACK_IMPORTED_MODULE_0__.FRAME_STYLE.radius.toString());\n rect.setAttribute(\"fill\", \"none\"); //rect.setAttribute(\"stroke\", FRAME_STYLE.strokeColor); //zsviczian\n //rect.setAttribute(\"stroke-width\", FRAME_STYLE.strokeWidth.toString()); //zsviczian\n\n rect.setAttribute(\"stroke\", (_o = (_l = (_k = (_j = element.customData) === null || _j === void 0 ? void 0 : _j.frameColor) === null || _k === void 0 ? void 0 : _k.stroke) !== null && _l !== void 0 ? _l : (_m = renderConfig.frameColor) === null || _m === void 0 ? void 0 : _m.stroke) !== null && _o !== void 0 ? _o : _constants__WEBPACK_IMPORTED_MODULE_0__.FRAME_STYLE.strokeColor); //zsviczian\n\n rect.setAttribute(\"stroke-width\", (_t = (_r = (_q = (_p = element.customData) === null || _p === void 0 ? void 0 : _p.frameColor) === null || _q === void 0 ? void 0 : _q.fill) !== null && _r !== void 0 ? _r : (_s = renderConfig.frameColor) === null || _s === void 0 ? void 0 : _s.fill) !== null && _t !== void 0 ? _t : _constants__WEBPACK_IMPORTED_MODULE_0__.FRAME_STYLE.strokeWidth.toString()); //zsviczian\n\n addToRoot(rect, element);\n }\n\n break;\n }\n\n default:\n {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isTextElement)(element)) {\n const node = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"g\");\n\n if (opacity !== 1) {\n node.setAttribute(\"stroke-opacity\", `${opacity}`);\n node.setAttribute(\"fill-opacity\", `${opacity}`);\n }\n\n node.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n const lines = element.text.replace(/\\r\\n?/g, \"\\n\").split(\"\\n\");\n const lineHeightPx = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_5__.getLineHeightInPx)(element.fontSize, element.lineHeight);\n const horizontalOffset = element.textAlign === \"center\" ? element.width / 2 : element.textAlign === \"right\" ? element.width : 0;\n const verticalOffset = (0,_fonts__WEBPACK_IMPORTED_MODULE_11__.getVerticalOffset)(element.fontFamily, element.fontSize, lineHeightPx);\n const direction = (0,_utils__WEBPACK_IMPORTED_MODULE_9__.isRTL)(element.text) ? \"rtl\" : \"ltr\";\n const textAnchor = element.textAlign === \"center\" ? \"middle\" : element.textAlign === \"right\" || direction === \"rtl\" ? \"end\" : \"start\";\n\n for (let i = 0; i < lines.length; i++) {\n const text = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"text\");\n text.textContent = lines[i];\n text.setAttribute(\"x\", `${horizontalOffset}`);\n text.setAttribute(\"y\", `${i * lineHeightPx + verticalOffset}`);\n text.setAttribute(\"font-family\", (0,_utils__WEBPACK_IMPORTED_MODULE_9__.getFontFamilyString)(element));\n text.setAttribute(\"font-size\", `${element.fontSize}px`);\n text.setAttribute(\"fill\", element.strokeColor);\n text.setAttribute(\"text-anchor\", textAnchor);\n text.setAttribute(\"style\", \"white-space: pre;\");\n text.setAttribute(\"direction\", direction);\n text.setAttribute(\"dominant-baseline\", \"alphabetic\");\n node.appendChild(text);\n }\n\n const g = maybeWrapNodesInFrameClipPath(element, root, [node], renderConfig.frameRendering, elementsMap);\n addToRoot(g || node, element);\n } else {\n // @ts-ignore\n throw new Error(`Unimplemented type ${element.type}`);\n }\n }\n }\n};\n\nconst renderSceneToSvg = (elements, elementsMap, rsvg, svgRoot, files, renderConfig) => {\n if (!svgRoot) {\n return;\n } // render elements\n\n\n elements.filter(el => !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isIframeLikeElement)(el)).forEach(element => {\n if (!element.isDeleted) {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isTextElement)(element) && element.containerId && elementsMap.has(element.containerId)) {\n // will be rendered with the container\n return;\n }\n\n try {\n renderElementToSvg(element, elementsMap, rsvg, svgRoot, files, element.x + renderConfig.offsetX, element.y + renderConfig.offsetY, renderConfig);\n const boundTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_5__.getBoundTextElement)(element, elementsMap);\n\n if (boundTextElement) {\n renderElementToSvg(boundTextElement, elementsMap, rsvg, svgRoot, files, boundTextElement.x + renderConfig.offsetX, boundTextElement.y + renderConfig.offsetY, renderConfig);\n }\n } catch (error) {\n console.error(error);\n }\n }\n }); // render embeddables on top\n\n elements.filter(el => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isIframeLikeElement)(el)).forEach(element => {\n if (!element.isDeleted) {\n try {\n renderElementToSvg(element, elementsMap, rsvg, svgRoot, files, element.x + renderConfig.offsetX, element.y + renderConfig.offsetY, renderConfig);\n } catch (error) {\n console.error(error);\n }\n }\n });\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./renderer/staticSvgScene.ts?");
|
|
3568
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"renderSceneToSvg\": () => (/* binding */ renderSceneToSvg)\n/* harmony export */ });\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _data_url__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../data/url */ \"./data/url.ts\");\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _element_embeddable__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../element/embeddable */ \"./element/embeddable.ts\");\n/* harmony import */ var _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../element/linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _element_textElement__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../element/textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _frame__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../frame */ \"./frame.ts\");\n/* harmony import */ var _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../scene/ShapeCache */ \"./scene/ShapeCache.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _renderElement__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./renderElement */ \"./renderer/renderElement.ts\");\n/* harmony import */ var _fonts__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../fonts */ \"./fonts/index.ts\");\n/* harmony import */ var _shapes__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../shapes */ \"./shapes.tsx\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst roughSVGDrawWithPrecision = (rsvg, drawable, precision) => {\n if (typeof precision === \"undefined\") {\n return rsvg.draw(drawable);\n }\n\n const pshape = {\n sets: drawable.sets,\n shape: drawable.shape,\n options: Object.assign(Object.assign({}, drawable.options), {\n fixedDecimalPlaceDigits: precision\n })\n };\n return rsvg.draw(pshape);\n};\n\nconst maybeWrapNodesInFrameClipPath = (element, root, nodes, frameRendering, elementsMap) => {\n if (!frameRendering.enabled || !frameRendering.clip) {\n return null;\n }\n\n const frame = (0,_frame__WEBPACK_IMPORTED_MODULE_7__.getContainingFrame)(element, elementsMap);\n\n if (frame) {\n const g = root.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"g\");\n g.setAttributeNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"clip-path\", `url(#${frame.id})`);\n nodes.forEach(node => g.appendChild(node));\n return g;\n }\n\n return null;\n};\n\nconst renderElementToSvg = (element, elementsMap, rsvg, svgRoot, files, offsetX, offsetY, renderConfig) => {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;\n\n const offset = {\n x: offsetX,\n y: offsetY\n };\n const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_2__.getElementAbsoluteCoords)(element, elementsMap);\n let cx = (x2 - x1) / 2 - (element.x - x1);\n let cy = (y2 - y1) / 2 - (element.y - y1);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isTextElement)(element)) {\n const container = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_5__.getContainerElement)(element, elementsMap);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isArrowElement)(container)) {\n const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_2__.getElementAbsoluteCoords)(container, elementsMap);\n const boundTextCoords = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_4__.LinearElementEditor.getBoundTextElementPosition(container, element, elementsMap);\n cx = (x2 - x1) / 2 - (boundTextCoords.x - x1);\n cy = (y2 - y1) / 2 - (boundTextCoords.y - y1);\n offsetX = offsetX + boundTextCoords.x - element.x;\n offsetY = offsetY + boundTextCoords.y - element.y;\n }\n }\n\n const degree = 180 * element.angle / Math.PI; // element to append node to, most of the time svgRoot\n\n let root = svgRoot; // if the element has a link, create an anchor tag and make that the new root\n\n if (element.link) {\n const anchorTag = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"a\");\n anchorTag.setAttribute(\"href\", (0,_data_url__WEBPACK_IMPORTED_MODULE_1__.normalizeLink)(element.link));\n root.appendChild(anchorTag);\n root = anchorTag;\n }\n\n const addToRoot = (node, element) => {\n if ((0,_utils__WEBPACK_IMPORTED_MODULE_9__.isTestEnv)()) {\n node.setAttribute(\"data-id\", element.id);\n }\n\n root.appendChild(node);\n };\n\n const opacity = ((_b = (_a = (0,_frame__WEBPACK_IMPORTED_MODULE_7__.getContainingFrame)(element, elementsMap)) === null || _a === void 0 ? void 0 : _a.opacity) !== null && _b !== void 0 ? _b : 100) * element.opacity / 10000;\n\n switch (element.type) {\n case \"selection\":\n {\n // Since this is used only during editing experience, which is canvas based,\n // this should not happen\n throw new Error(\"Selection rendering is not supported for SVG\");\n }\n\n case \"rectangle\":\n case \"diamond\":\n case \"ellipse\":\n {\n const shape = _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_8__.ShapeCache.generateElementShape(element, null);\n const node = roughSVGDrawWithPrecision(rsvg, shape, _constants__WEBPACK_IMPORTED_MODULE_0__.MAX_DECIMALS_FOR_SVG_EXPORT);\n\n if (opacity !== 1) {\n node.setAttribute(\"stroke-opacity\", `${opacity}`);\n node.setAttribute(\"fill-opacity\", `${opacity}`);\n }\n\n node.setAttribute(\"stroke-linecap\", \"round\");\n node.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n const g = maybeWrapNodesInFrameClipPath(element, root, [node], renderConfig.frameRendering, elementsMap);\n addToRoot(g || node, element);\n break;\n }\n\n case \"iframe\":\n case \"embeddable\":\n {\n // render placeholder rectangle\n const shape = _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_8__.ShapeCache.generateElementShape(element, renderConfig);\n const node = roughSVGDrawWithPrecision(rsvg, shape, _constants__WEBPACK_IMPORTED_MODULE_0__.MAX_DECIMALS_FOR_SVG_EXPORT);\n const opacity = element.opacity / 100;\n\n if (opacity !== 1) {\n node.setAttribute(\"stroke-opacity\", `${opacity}`);\n node.setAttribute(\"fill-opacity\", `${opacity}`);\n }\n\n node.setAttribute(\"stroke-linecap\", \"round\");\n node.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n addToRoot(node, element);\n const label = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_3__.createPlaceholderEmbeddableLabel)(element);\n renderElementToSvg(label, elementsMap, rsvg, root, files, label.x + offset.x - element.x, label.y + offset.y - element.y, renderConfig);\n const scaleX = ((_c = element.scale) === null || _c === void 0 ? void 0 : _c[0]) || 1; //zsviczian\n\n const scaleY = ((_d = element.scale) === null || _d === void 0 ? void 0 : _d[1]) || 1; //zsviczian\n // render embeddable element + iframe\n\n const embeddableNode = roughSVGDrawWithPrecision(rsvg, shape, _constants__WEBPACK_IMPORTED_MODULE_0__.MAX_DECIMALS_FOR_SVG_EXPORT);\n embeddableNode.setAttribute(\"stroke-linecap\", \"round\");\n embeddableNode.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy}) scale(${scaleX}, ${scaleY})`);\n\n while (embeddableNode.firstChild) {\n embeddableNode.removeChild(embeddableNode.firstChild);\n }\n\n const radius = (0,_shapes__WEBPACK_IMPORTED_MODULE_12__.getCornerRadius)(Math.min(element.width, element.height), element);\n const embedLink = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_3__.getEmbedLink)((0,_data_url__WEBPACK_IMPORTED_MODULE_1__.toValidURL)(element.link || \"\")); // if rendering embeddables explicitly disabled or\n // embedding documents via srcdoc (which doesn't seem to work for SVGs)\n // replace with a link instead\n\n if (renderConfig.renderEmbeddables === false || (embedLink === null || embedLink === void 0 ? void 0 : embedLink.type) === \"document\") {\n const anchorTag = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"a\");\n anchorTag.setAttribute(\"href\", (0,_data_url__WEBPACK_IMPORTED_MODULE_1__.normalizeLink)(element.link || \"\"));\n anchorTag.setAttribute(\"target\", \"_blank\");\n anchorTag.setAttribute(\"rel\", \"noopener noreferrer\");\n anchorTag.style.borderRadius = `${radius}px`;\n embeddableNode.appendChild(anchorTag);\n } else {\n const foreignObject = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"foreignObject\");\n foreignObject.style.width = `${element.width / scaleX}px`; //zsviczian\n\n foreignObject.style.height = `${element.height / scaleY}px`; //zsviczian\n\n foreignObject.style.border = \"none\";\n const div = foreignObject.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"div\");\n div.setAttribute(\"xmlns\", \"http://www.w3.org/1999/xhtml\");\n div.style.width = \"100%\";\n div.style.height = \"100%\";\n const iframe = div.ownerDocument.createElement(\"iframe\");\n iframe.src = (_e = embedLink === null || embedLink === void 0 ? void 0 : embedLink.link) !== null && _e !== void 0 ? _e : \"\";\n iframe.style.width = \"100%\";\n iframe.style.height = \"100%\";\n iframe.style.border = \"none\";\n iframe.style.borderRadius = `${radius}px`;\n iframe.style.top = \"0\";\n iframe.style.left = \"0\";\n iframe.allowFullscreen = true;\n div.appendChild(iframe);\n foreignObject.appendChild(div);\n embeddableNode.appendChild(foreignObject);\n }\n\n addToRoot(embeddableNode, element);\n break;\n }\n\n case \"line\":\n case \"arrow\":\n {\n const boundText = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_5__.getBoundTextElement)(element, elementsMap);\n const maskPath = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"mask\");\n\n if (boundText) {\n maskPath.setAttribute(\"id\", `mask-${element.id}`);\n const maskRectVisible = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"rect\");\n offsetX = offsetX || 0;\n offsetY = offsetY || 0;\n maskRectVisible.setAttribute(\"x\", \"0\");\n maskRectVisible.setAttribute(\"y\", \"0\");\n maskRectVisible.setAttribute(\"fill\", \"#fff\");\n maskRectVisible.setAttribute(\"width\", `${element.width + 100 + offsetX}`);\n maskRectVisible.setAttribute(\"height\", `${element.height + 100 + offsetY}`);\n maskPath.appendChild(maskRectVisible);\n const maskRectInvisible = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"rect\");\n const boundTextCoords = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_4__.LinearElementEditor.getBoundTextElementPosition(element, boundText, elementsMap);\n const maskX = offsetX + boundTextCoords.x - element.x;\n const maskY = offsetY + boundTextCoords.y - element.y;\n maskRectInvisible.setAttribute(\"x\", maskX.toString());\n maskRectInvisible.setAttribute(\"y\", maskY.toString());\n maskRectInvisible.setAttribute(\"fill\", \"#000\");\n maskRectInvisible.setAttribute(\"width\", `${boundText.width}`);\n maskRectInvisible.setAttribute(\"height\", `${boundText.height}`);\n maskRectInvisible.setAttribute(\"opacity\", \"1\");\n maskPath.appendChild(maskRectInvisible);\n }\n\n const group = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"g\");\n\n if (boundText) {\n group.setAttribute(\"mask\", `url(#mask-${element.id})`);\n }\n\n group.setAttribute(\"stroke-linecap\", \"round\");\n const shapes = _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_8__.ShapeCache.generateElementShape(element, renderConfig);\n shapes.forEach(shape => {\n const node = roughSVGDrawWithPrecision(rsvg, shape, _constants__WEBPACK_IMPORTED_MODULE_0__.MAX_DECIMALS_FOR_SVG_EXPORT);\n\n if (opacity !== 1) {\n node.setAttribute(\"stroke-opacity\", `${opacity}`);\n node.setAttribute(\"fill-opacity\", `${opacity}`);\n }\n\n node.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n\n if (element.type === \"line\" && (0,_shapes__WEBPACK_IMPORTED_MODULE_12__.isPathALoop)(element.points) && element.backgroundColor !== \"transparent\") {\n node.setAttribute(\"fill-rule\", \"evenodd\");\n }\n\n group.appendChild(node);\n });\n const g = maybeWrapNodesInFrameClipPath(element, root, [group, maskPath], renderConfig.frameRendering, elementsMap);\n\n if (g) {\n addToRoot(g, element);\n root.appendChild(g);\n } else {\n addToRoot(group, element);\n root.append(maskPath);\n }\n\n break;\n }\n\n case \"freedraw\":\n {\n const backgroundFillShape = _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_8__.ShapeCache.generateElementShape(element, renderConfig);\n const node = backgroundFillShape ? roughSVGDrawWithPrecision(rsvg, backgroundFillShape, _constants__WEBPACK_IMPORTED_MODULE_0__.MAX_DECIMALS_FOR_SVG_EXPORT) : svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"g\");\n\n if (opacity !== 1) {\n node.setAttribute(\"stroke-opacity\", `${opacity}`);\n node.setAttribute(\"fill-opacity\", `${opacity}`);\n }\n\n node.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n node.setAttribute(\"stroke\", \"none\");\n const path = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"path\"); //zsviczian\n\n if ((_g = (_f = element.customData) === null || _f === void 0 ? void 0 : _f.strokeOptions) === null || _g === void 0 ? void 0 : _g.hasOutline) {\n node.setAttribute(\"stroke-width\", `${element.strokeWidth * ((_h = element.customData.strokeOptions.outlineWidth) !== null && _h !== void 0 ? _h : 1)}`);\n const outline = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"path\");\n outline.setAttribute(\"fill\", \"none\");\n outline.setAttribute(\"stroke\", element.strokeColor);\n outline.setAttribute(\"d\", (0,_renderElement__WEBPACK_IMPORTED_MODULE_10__.getFreeDrawSvgPath)(element));\n node.appendChild(outline);\n path.setAttribute(\"fill\", element.backgroundColor);\n } else {\n path.setAttribute(\"fill\", element.strokeColor);\n }\n\n path.setAttribute(\"d\", (0,_renderElement__WEBPACK_IMPORTED_MODULE_10__.getFreeDrawSvgPath)(element));\n node.appendChild(path);\n const g = maybeWrapNodesInFrameClipPath(element, root, [node], renderConfig.frameRendering, elementsMap);\n addToRoot(g || node, element);\n break;\n }\n\n case \"image\":\n {\n const width = Math.round(element.width);\n const height = Math.round(element.height);\n const fileData = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isInitializedImageElement)(element) && files[element.fileId];\n\n if (fileData) {\n const symbolId = `image-${fileData.id}`;\n let symbol = svgRoot.querySelector(`#${symbolId}`);\n\n if (!symbol) {\n symbol = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"symbol\");\n symbol.id = symbolId;\n const image = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"image\");\n image.setAttribute(\"width\", \"100%\");\n image.setAttribute(\"height\", \"100%\");\n image.setAttribute(\"href\", fileData.dataURL);\n image.setAttribute(\"preserveAspectRatio\", \"none\");\n symbol.appendChild(image);\n root.prepend(symbol);\n }\n\n const use = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"use\");\n use.setAttribute(\"href\", `#${symbolId}`); // in dark theme, revert the image color filter\n\n if (renderConfig.exportWithDarkMode && fileData.mimeType !== _constants__WEBPACK_IMPORTED_MODULE_0__.MIME_TYPES.svg) {\n use.setAttribute(\"filter\", _renderElement__WEBPACK_IMPORTED_MODULE_10__.IMAGE_INVERT_FILTER);\n }\n\n use.setAttribute(\"width\", `${width}`);\n use.setAttribute(\"height\", `${height}`);\n use.setAttribute(\"opacity\", `${opacity}`); // We first apply `scale` transforms (horizontal/vertical mirroring)\n // on the <use> element, then apply translation and rotation\n // on the <g> element which wraps the <use>.\n // Doing this separately is a quick hack to to work around compositing\n // the transformations correctly (the transform-origin was not being\n // applied correctly).\n\n if (element.scale[0] !== 1 || element.scale[1] !== 1) {\n const translateX = element.scale[0] !== 1 ? -width : 0;\n const translateY = element.scale[1] !== 1 ? -height : 0;\n use.setAttribute(\"transform\", `scale(${element.scale[0]}, ${element.scale[1]}) translate(${translateX} ${translateY})`);\n }\n\n const g = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"g\");\n g.appendChild(use);\n g.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n\n if (element.roundness) {\n const clipPath = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"clipPath\");\n clipPath.id = `image-clipPath-${element.id}`;\n const clipRect = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"rect\");\n const radius = (0,_shapes__WEBPACK_IMPORTED_MODULE_12__.getCornerRadius)(Math.min(element.width, element.height), element);\n clipRect.setAttribute(\"width\", `${element.width}`);\n clipRect.setAttribute(\"height\", `${element.height}`);\n clipRect.setAttribute(\"rx\", `${radius}`);\n clipRect.setAttribute(\"ry\", `${radius}`);\n clipPath.appendChild(clipRect);\n addToRoot(clipPath, element);\n g.setAttributeNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"clip-path\", `url(#${clipPath.id})`);\n }\n\n const clipG = maybeWrapNodesInFrameClipPath(element, root, [g], renderConfig.frameRendering, elementsMap);\n addToRoot(clipG || g, element);\n }\n\n break;\n }\n // frames are not rendered and only acts as a container\n\n case \"frame\":\n case \"magicframe\":\n {\n if (renderConfig.frameRendering.enabled && renderConfig.frameRendering.outline) {\n const rect = document.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"rect\");\n rect.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n rect.setAttribute(\"width\", `${element.width}px`);\n rect.setAttribute(\"height\", `${element.height}px`); // Rounded corners\n\n rect.setAttribute(\"rx\", _constants__WEBPACK_IMPORTED_MODULE_0__.FRAME_STYLE.radius.toString());\n rect.setAttribute(\"ry\", _constants__WEBPACK_IMPORTED_MODULE_0__.FRAME_STYLE.radius.toString());\n rect.setAttribute(\"fill\", \"none\"); //rect.setAttribute(\"stroke\", FRAME_STYLE.strokeColor); //zsviczian\n //rect.setAttribute(\"stroke-width\", FRAME_STYLE.strokeWidth.toString()); //zsviczian\n\n rect.setAttribute(\"stroke\", (_o = (_l = (_k = (_j = element.customData) === null || _j === void 0 ? void 0 : _j.frameColor) === null || _k === void 0 ? void 0 : _k.stroke) !== null && _l !== void 0 ? _l : (_m = renderConfig.frameColor) === null || _m === void 0 ? void 0 : _m.stroke) !== null && _o !== void 0 ? _o : _constants__WEBPACK_IMPORTED_MODULE_0__.FRAME_STYLE.strokeColor); //zsviczian\n\n rect.setAttribute(\"stroke-width\", (_t = (_r = (_q = (_p = element.customData) === null || _p === void 0 ? void 0 : _p.frameColor) === null || _q === void 0 ? void 0 : _q.fill) !== null && _r !== void 0 ? _r : (_s = renderConfig.frameColor) === null || _s === void 0 ? void 0 : _s.fill) !== null && _t !== void 0 ? _t : _constants__WEBPACK_IMPORTED_MODULE_0__.FRAME_STYLE.strokeWidth.toString()); //zsviczian\n\n addToRoot(rect, element);\n }\n\n break;\n }\n\n default:\n {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isTextElement)(element)) {\n const node = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"g\");\n\n if (opacity !== 1) {\n node.setAttribute(\"stroke-opacity\", `${opacity}`);\n node.setAttribute(\"fill-opacity\", `${opacity}`);\n }\n\n node.setAttribute(\"transform\", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);\n const lines = element.text.replace(/\\r\\n?/g, \"\\n\").split(\"\\n\");\n const lineHeightPx = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_5__.getLineHeightInPx)(element.fontSize, element.lineHeight);\n const horizontalOffset = element.textAlign === \"center\" ? element.width / 2 : element.textAlign === \"right\" ? element.width : 0;\n const verticalOffset = (0,_fonts__WEBPACK_IMPORTED_MODULE_11__.getVerticalOffset)(element.fontFamily, element.fontSize, lineHeightPx);\n const direction = (0,_utils__WEBPACK_IMPORTED_MODULE_9__.isRTL)(element.text) ? \"rtl\" : \"ltr\";\n const textAnchor = element.textAlign === \"center\" ? \"middle\" : element.textAlign === \"right\" || direction === \"rtl\" ? \"end\" : \"start\";\n\n for (let i = 0; i < lines.length; i++) {\n const text = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_0__.SVG_NS, \"text\");\n text.textContent = lines[i];\n text.setAttribute(\"x\", `${horizontalOffset}`);\n text.setAttribute(\"y\", `${i * lineHeightPx + verticalOffset}`);\n text.setAttribute(\"font-family\", (0,_utils__WEBPACK_IMPORTED_MODULE_9__.getFontFamilyString)(element));\n text.setAttribute(\"font-size\", `${element.fontSize}px`);\n text.setAttribute(\"fill\", element.strokeColor);\n text.setAttribute(\"text-anchor\", textAnchor);\n text.setAttribute(\"style\", \"white-space: pre;\");\n text.setAttribute(\"direction\", direction);\n text.setAttribute(\"dominant-baseline\", \"alphabetic\");\n node.appendChild(text);\n }\n\n const g = maybeWrapNodesInFrameClipPath(element, root, [node], renderConfig.frameRendering, elementsMap);\n addToRoot(g || node, element);\n } else {\n // @ts-ignore\n throw new Error(`Unimplemented type ${element.type}`);\n }\n }\n }\n};\n\nconst renderSceneToSvg = (elements, elementsMap, rsvg, svgRoot, files, renderConfig) => {\n if (!svgRoot) {\n return;\n } // render elements\n\n\n elements.filter(el => !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isIframeLikeElement)(el)).forEach(element => {\n if (!element.isDeleted) {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isTextElement)(element) && element.containerId && elementsMap.has(element.containerId)) {\n // will be rendered with the container\n return;\n }\n\n try {\n renderElementToSvg(element, elementsMap, rsvg, svgRoot, files, element.x + renderConfig.offsetX, element.y + renderConfig.offsetY, renderConfig);\n const boundTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_5__.getBoundTextElement)(element, elementsMap);\n\n if (boundTextElement) {\n renderElementToSvg(boundTextElement, elementsMap, rsvg, svgRoot, files, boundTextElement.x + renderConfig.offsetX, boundTextElement.y + renderConfig.offsetY, renderConfig);\n }\n } catch (error) {\n console.error(error);\n }\n }\n }); // render embeddables on top\n\n elements.filter(el => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_6__.isIframeLikeElement)(el)).forEach(element => {\n if (!element.isDeleted) {\n try {\n renderElementToSvg(element, elementsMap, rsvg, svgRoot, files, element.x + renderConfig.offsetX, element.y + renderConfig.offsetY, renderConfig);\n } catch (error) {\n console.error(error);\n }\n }\n });\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./renderer/staticSvgScene.ts?");
|
|
3569
3569
|
|
|
3570
3570
|
/***/ }),
|
|
3571
3571
|
|
|
@@ -3631,7 +3631,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
3631
3631
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
3632
3632
|
|
|
3633
3633
|
"use strict";
|
|
3634
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"exportToCanvas\": () => (/* binding */ exportToCanvas),\n/* harmony export */ \"exportToSvg\": () => (/* binding */ exportToSvg),\n/* harmony export */ \"getExportSize\": () => (/* binding */ getExportSize)\n/* harmony export */ });\n/* harmony import */ var roughjs_bin_rough__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! roughjs/bin/rough */ \"../../node_modules/roughjs/bin/rough.js\");\n/* harmony import */ var _element_bounds__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../element/bounds */ \"./element/bounds.ts\");\n/* harmony import */ var _renderer_staticSvgScene__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../renderer/staticSvgScene */ \"./renderer/staticSvgScene.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _appState__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../appState */ \"./appState.ts\");\n/* harmony import */ var _data_json__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../data/json */ \"./data/json.ts\");\n/* harmony import */ var _element_image__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../element/image */ \"./element/image.ts\");\n/* harmony import */ var _frame__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../frame */ \"./frame.ts\");\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _element_mutateElement__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../element/mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _fractionalIndex__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../fractionalIndex */ \"./fractionalIndex.ts\");\n/* harmony import */ var _renderer_staticScene__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../renderer/staticScene */ \"./renderer/staticScene.ts\");\n/* harmony import */ var _fonts__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../fonts */ \"./fonts/index.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;\n\nconst truncateText = (element, maxWidth) => {\n if (element.width <= maxWidth) {\n return element;\n }\n\n const canvas = document.createElement(\"canvas\");\n const ctx = canvas.getContext(\"2d\");\n ctx.font = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.getFontString)({\n fontFamily: element.fontFamily,\n fontSize: element.fontSize\n });\n let text = element.text;\n const metrics = ctx.measureText(text);\n\n if (metrics.width > maxWidth) {\n // we iterate from the right, removing characters one by one instead\n // of bulding the string up. This assumes that it's more likely\n // your frame names will overflow by not that many characters\n // (if ever), so it sohuld be faster this way.\n for (let i = text.length; i > 0; i--) {\n const newText = `${text.slice(0, i)}...`;\n\n if (ctx.measureText(newText).width <= maxWidth) {\n text = newText;\n break;\n }\n }\n }\n\n return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_10__.newElementWith)(element, {\n text,\n width: maxWidth\n });\n};\n/**\n * When exporting frames, we need to render frame labels which are currently\n * being rendered in DOM when editing. Adding the labels as regular text\n * elements seems like a simple hack. In the future we'll want to move to\n * proper canvas rendering, even within editor (instead of DOM).\n */\n\n\nconst addFrameLabelsAsTextElements = (elements, opts) => {\n var _a, _b, _c;\n\n const nextElements = [];\n\n for (const element of elements) {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_11__.isFrameLikeElement)(element)) {\n let textElement = (0,_element__WEBPACK_IMPORTED_MODULE_9__.newTextElement)({\n x: element.x,\n y: element.y - _constants__WEBPACK_IMPORTED_MODULE_4__.FRAME_STYLE.nameOffsetY,\n fontFamily: _constants__WEBPACK_IMPORTED_MODULE_4__.FONT_FAMILY.Helvetica,\n fontSize: _constants__WEBPACK_IMPORTED_MODULE_4__.FRAME_STYLE.nameFontSize,\n lineHeight: _constants__WEBPACK_IMPORTED_MODULE_4__.FRAME_STYLE.nameLineHeight,\n strokeColor: (_c = (_b = (_a = element.customData) === null || _a === void 0 ? void 0 : _a.frameColor) === null || _b === void 0 ? void 0 : _b.nameColor) !== null && _c !== void 0 ? _c : opts.exportWithDarkMode ? _constants__WEBPACK_IMPORTED_MODULE_4__.FRAME_STYLE.nameColorDarkTheme : _constants__WEBPACK_IMPORTED_MODULE_4__.FRAME_STYLE.nameColorLightTheme,\n text: (0,_frame__WEBPACK_IMPORTED_MODULE_8__.getFrameLikeTitle)(element),\n rawText: (0,_frame__WEBPACK_IMPORTED_MODULE_8__.getFrameLikeTitle)(element) //zsviczian\n\n });\n textElement.y -= textElement.height;\n textElement = truncateText(textElement, element.width);\n nextElements.push(textElement);\n }\n\n nextElements.push(element);\n }\n\n return nextElements;\n};\n\nconst getFrameRenderingConfig = (exportingFrame, frameRendering) => {\n frameRendering = frameRendering || (0,_appState__WEBPACK_IMPORTED_MODULE_5__.getDefaultAppState)().frameRendering;\n return {\n enabled: exportingFrame ? true : frameRendering.enabled,\n outline: exportingFrame ? false : frameRendering.outline,\n name: exportingFrame ? false : frameRendering.name,\n clip: exportingFrame ? true : frameRendering.clip\n };\n};\n\nconst prepareElementsForRender = ({\n elements,\n exportingFrame,\n frameRendering,\n exportWithDarkMode\n}) => {\n let nextElements;\n\n if (exportingFrame) {\n nextElements = (0,_frame__WEBPACK_IMPORTED_MODULE_8__.getElementsOverlappingFrame)(elements, exportingFrame);\n } else if (frameRendering.enabled && frameRendering.name) {\n nextElements = addFrameLabelsAsTextElements(elements, {\n exportWithDarkMode\n });\n } else {\n nextElements = elements;\n }\n\n return nextElements;\n};\n\nconst exportToCanvas = async (elements, appState, files, {\n exportBackground,\n exportPadding = _constants__WEBPACK_IMPORTED_MODULE_4__.DEFAULT_EXPORT_PADDING,\n viewBackgroundColor,\n exportingFrame\n}, createCanvas = (width, height) => {\n const canvas = document.createElement(\"canvas\");\n canvas.width = width * appState.exportScale;\n canvas.height = height * appState.exportScale;\n return {\n canvas,\n scale: appState.exportScale\n };\n}, loadFonts = async () => {\n await _fonts__WEBPACK_IMPORTED_MODULE_14__.Fonts.loadFontsForElements(elements);\n}) => {\n var _a; // load font faces before continuing, by default leverages browsers' [FontFace API](https://developer.mozilla.org/en-US/docs/Web/API/FontFace)\n\n\n await loadFonts();\n const frameRendering = getFrameRenderingConfig(exportingFrame !== null && exportingFrame !== void 0 ? exportingFrame : null, (_a = appState.frameRendering) !== null && _a !== void 0 ? _a : null);\n const elementsForRender = prepareElementsForRender({\n elements,\n exportingFrame,\n exportWithDarkMode: appState.exportWithDarkMode,\n frameRendering\n });\n\n if (exportingFrame) {\n exportPadding = 0;\n }\n\n const [minX, minY, width, height] = getCanvasSize(exportingFrame ? [exportingFrame] : (0,_frame__WEBPACK_IMPORTED_MODULE_8__.getRootElements)(elementsForRender), exportPadding);\n const {\n canvas,\n scale = 1\n } = createCanvas(width, height);\n const defaultAppState = (0,_appState__WEBPACK_IMPORTED_MODULE_5__.getDefaultAppState)();\n const {\n imageCache\n } = await (0,_element_image__WEBPACK_IMPORTED_MODULE_7__.updateImageCache)({\n imageCache: new Map(),\n fileIds: (0,_element_image__WEBPACK_IMPORTED_MODULE_7__.getInitializedImageElements)(elementsForRender).map(element => element.fileId),\n files\n });\n (0,_renderer_staticScene__WEBPACK_IMPORTED_MODULE_13__.renderStaticScene)({\n canvas,\n rc: roughjs_bin_rough__WEBPACK_IMPORTED_MODULE_0__[\"default\"].canvas(canvas),\n elementsMap: (0,_utils__WEBPACK_IMPORTED_MODULE_3__.toBrandedType)((0,_utils__WEBPACK_IMPORTED_MODULE_3__.arrayToMap)(elementsForRender)),\n allElementsMap: (0,_utils__WEBPACK_IMPORTED_MODULE_3__.toBrandedType)((0,_utils__WEBPACK_IMPORTED_MODULE_3__.arrayToMap)((0,_fractionalIndex__WEBPACK_IMPORTED_MODULE_12__.syncInvalidIndices)(elements))),\n visibleElements: elementsForRender,\n scale,\n appState: Object.assign(Object.assign({}, appState), {\n frameRendering,\n viewBackgroundColor: exportBackground ? viewBackgroundColor : null,\n scrollX: -minX + exportPadding,\n scrollY: -minY + exportPadding,\n zoom: defaultAppState.zoom,\n shouldCacheIgnoreZoom: false,\n theme: appState.exportWithDarkMode ? _constants__WEBPACK_IMPORTED_MODULE_4__.THEME.DARK : _constants__WEBPACK_IMPORTED_MODULE_4__.THEME.LIGHT\n }),\n renderConfig: {\n canvasBackgroundColor: viewBackgroundColor,\n imageCache,\n renderGrid: false,\n isExporting: true,\n // empty disables embeddable rendering\n embedsValidationStatus: new Map(),\n elementsPendingErasure: new Set(),\n pendingFlowchartNodes: null\n }\n });\n return canvas;\n};\nconst exportToSvg = async (elements, appState, files, opts) => {\n var _a, _b, _c;\n\n const frameRendering = getFrameRenderingConfig((_a = opts === null || opts === void 0 ? void 0 : opts.exportingFrame) !== null && _a !== void 0 ? _a : null, (_b = appState.frameRendering) !== null && _b !== void 0 ? _b : null);\n let {\n exportPadding = _constants__WEBPACK_IMPORTED_MODULE_4__.DEFAULT_EXPORT_PADDING,\n exportWithDarkMode = false,\n viewBackgroundColor,\n exportScale = 1,\n exportEmbedScene\n } = appState;\n const {\n exportingFrame = null\n } = opts || {};\n const elementsForRender = prepareElementsForRender({\n elements,\n exportingFrame,\n exportWithDarkMode,\n frameRendering\n });\n\n if (exportingFrame) {\n exportPadding = 0;\n }\n\n let metadata = \"\"; // we need to serialize the \"original\" elements before we put them through\n // the tempScene hack which duplicates and regenerates ids\n\n if (exportEmbedScene) {\n try {\n metadata = await (await Promise.resolve(/*! import() */).then(__webpack_require__.bind(__webpack_require__, /*! ../data/image */ \"./data/image.ts\"))).encodeSvgMetadata({\n // when embedding scene, we want to embed the origionally supplied\n // elements which don't contain the temp frame labels.\n // But it also requires that the exportToSvg is being supplied with\n // only the elements that we're exporting, and no extra.\n text: (0,_data_json__WEBPACK_IMPORTED_MODULE_6__.serializeAsJSON)(elements, appState, files || {}, \"local\")\n });\n } catch (error) {\n console.error(error);\n }\n }\n\n const [minX, minY, width, height] = getCanvasSize(exportingFrame ? [exportingFrame] : (0,_frame__WEBPACK_IMPORTED_MODULE_8__.getRootElements)(elementsForRender), exportPadding); // initialize SVG root\n\n const svgRoot = document.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_4__.SVG_NS, \"svg\");\n svgRoot.setAttribute(\"version\", \"1.1\");\n svgRoot.setAttribute(\"xmlns\", _constants__WEBPACK_IMPORTED_MODULE_4__.SVG_NS);\n svgRoot.setAttribute(\"viewBox\", `0 0 ${width} ${height}`);\n svgRoot.setAttribute(\"width\", `${width * exportScale}`);\n svgRoot.setAttribute(\"height\", `${height * exportScale}`);\n\n if (exportWithDarkMode) {\n svgRoot.setAttribute(\"filter\", _constants__WEBPACK_IMPORTED_MODULE_4__.THEME_FILTER);\n }\n\n const offsetX = -minX + exportPadding;\n const offsetY = -minY + exportPadding;\n const frameElements = (0,_frame__WEBPACK_IMPORTED_MODULE_8__.getFrameLikeElements)(elements);\n let exportingFrameClipPath = \"\";\n const elementsMap = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.arrayToMap)(elements);\n\n for (const frame of frameElements) {\n const [x1, y1, x2, y2] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(frame, elementsMap);\n const cx = (x2 - x1) / 2 - (frame.x - x1);\n const cy = (y2 - y1) / 2 - (frame.y - y1);\n exportingFrameClipPath += `<clipPath id=${frame.id}>\n <rect transform=\"translate(${frame.x + offsetX} ${frame.y + offsetY}) rotate(${frame.angle} ${cx} ${cy})\"\n width=\"${frame.width}\"\n height=\"${frame.height}\"\n >\n </rect>\n </clipPath>`;\n }\n\n const fontFaces = (opts === null || opts === void 0 ? void 0 : opts.skipInliningFonts) ? [] : await getFontFaces(elements);\n svgRoot.innerHTML = `\n ${SVG_EXPORT_TAG}\n ${metadata}\n <defs>\n <style class=\"style-fonts\">\n ${fontFaces.join(\"\\n\")}\n </style>\n ${exportingFrameClipPath}\n </defs>\n `; // render background rect\n\n if (appState.exportBackground && viewBackgroundColor) {\n const rect = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_4__.SVG_NS, \"rect\");\n rect.setAttribute(\"x\", \"0\");\n rect.setAttribute(\"y\", \"0\");\n rect.setAttribute(\"width\", `${width}`);\n rect.setAttribute(\"height\", `${height}`);\n rect.setAttribute(\"fill\", viewBackgroundColor);\n svgRoot.appendChild(rect);\n }\n\n const rsvg = roughjs_bin_rough__WEBPACK_IMPORTED_MODULE_0__[\"default\"].svg(svgRoot);\n const renderEmbeddables = (_c = opts === null || opts === void 0 ? void 0 : opts.renderEmbeddables) !== null && _c !== void 0 ? _c : false;\n (0,_renderer_staticSvgScene__WEBPACK_IMPORTED_MODULE_2__.renderSceneToSvg)(elementsForRender, (0,_utils__WEBPACK_IMPORTED_MODULE_3__.toBrandedType)((0,_utils__WEBPACK_IMPORTED_MODULE_3__.arrayToMap)(elementsForRender)), rsvg, svgRoot, files || {}, {\n offsetX,\n offsetY,\n isExporting: true,\n exportWithDarkMode,\n renderEmbeddables,\n frameRendering,\n frameColor: appState.frameColor,\n canvasBackgroundColor: viewBackgroundColor,\n embedsValidationStatus: renderEmbeddables ? new Map(elementsForRender.filter(element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_11__.isFrameLikeElement)(element)).map(element => [element.id, true])) : new Map()\n });\n return svgRoot;\n}; // calculate smallest area to fit the contents in\n\nconst getCanvasSize = (elements, exportPadding) => {\n const [minX, minY, maxX, maxY] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getCommonBounds)(elements);\n const width = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.distance)(minX, maxX) + exportPadding * 2;\n const height = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.distance)(minY, maxY) + exportPadding * 2;\n return [minX, minY, width, height];\n};\n\nconst getExportSize = (elements, exportPadding, scale) => {\n const [,, width, height] = getCanvasSize(elements, exportPadding).map(dimension => Math.trunc(dimension * scale));\n return [width, height];\n};\n\nconst getFontFaces = async elements => {\n const fontFamilies = new Set();\n const codePoints = new Set();\n\n for (const element of elements) {\n if (!(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_11__.isTextElement)(element)) {\n continue;\n }\n\n fontFamilies.add(element.fontFamily); // gather unique codepoints only when inlining fonts\n\n for (const codePoint of Array.from(element.originalText, u => u.codePointAt(0))) {\n if (codePoint) {\n codePoints.add(codePoint);\n }\n }\n }\n\n const getSource = font => {\n var _a, _b;\n\n try {\n // retrieve font source as dataurl based on the used codepoints\n if ((_b = (_a = font.urls[0]) === null || _a === void 0 ? void 0 : _a.href) === null || _b === void 0 ? void 0 : _b.startsWith(\"data:font/woff2\")) {\n //zsviczian\n return font.getContent(codePoints);\n } //zsviczian\n\n\n return font.urls[0].toString(); //zsviczian\n //zsviczian\n } catch (_c) {\n // fallback to font source as a url\n return font.urls[0].toString();\n }\n };\n\n const fontFaces = await Promise.all(Array.from(fontFamilies).map(async x => {\n var _a;\n\n const {\n fonts,\n metadata\n } = (_a = _fonts__WEBPACK_IMPORTED_MODULE_14__.Fonts.registered.get(x)) !== null && _a !== void 0 ? _a : {};\n\n if (!Array.isArray(fonts)) {\n console.error(`Couldn't find registered fonts for font-family \"${x}\"`, _fonts__WEBPACK_IMPORTED_MODULE_14__.Fonts.registered);\n return [];\n }\n\n if (metadata === null || metadata === void 0 ? void 0 : metadata.local) {\n // don't inline local fonts\n return [];\n }\n\n return Promise.all(fonts.map(async font => `@font-face {\n font-family: ${font.fontFace.family};\n src: url(${await getSource(font)});\n }`));\n }));\n return fontFaces.flat();\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./scene/export.ts?");
|
|
3634
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"exportToCanvas\": () => (/* binding */ exportToCanvas),\n/* harmony export */ \"exportToSvg\": () => (/* binding */ exportToSvg),\n/* harmony export */ \"getExportSize\": () => (/* binding */ getExportSize)\n/* harmony export */ });\n/* harmony import */ var roughjs_bin_rough__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! roughjs/bin/rough */ \"../../node_modules/roughjs/bin/rough.js\");\n/* harmony import */ var _element_bounds__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../element/bounds */ \"./element/bounds.ts\");\n/* harmony import */ var _renderer_staticSvgScene__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../renderer/staticSvgScene */ \"./renderer/staticSvgScene.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var _appState__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../appState */ \"./appState.ts\");\n/* harmony import */ var _data_json__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../data/json */ \"./data/json.ts\");\n/* harmony import */ var _element_image__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../element/image */ \"./element/image.ts\");\n/* harmony import */ var _frame__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../frame */ \"./frame.ts\");\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../element */ \"./element/index.ts\");\n/* harmony import */ var _element_mutateElement__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../element/mutateElement */ \"./element/mutateElement.ts\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _fractionalIndex__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../fractionalIndex */ \"./fractionalIndex.ts\");\n/* harmony import */ var _renderer_staticScene__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../renderer/staticScene */ \"./renderer/staticScene.ts\");\n/* harmony import */ var _fonts__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../fonts */ \"./fonts/index.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;\n\nconst truncateText = (element, maxWidth) => {\n if (element.width <= maxWidth) {\n return element;\n }\n\n const canvas = document.createElement(\"canvas\");\n const ctx = canvas.getContext(\"2d\");\n ctx.font = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.getFontString)({\n fontFamily: element.fontFamily,\n fontSize: element.fontSize\n });\n let text = element.text;\n const metrics = ctx.measureText(text);\n\n if (metrics.width > maxWidth) {\n // we iterate from the right, removing characters one by one instead\n // of bulding the string up. This assumes that it's more likely\n // your frame names will overflow by not that many characters\n // (if ever), so it sohuld be faster this way.\n for (let i = text.length; i > 0; i--) {\n const newText = `${text.slice(0, i)}...`;\n\n if (ctx.measureText(newText).width <= maxWidth) {\n text = newText;\n break;\n }\n }\n }\n\n return (0,_element_mutateElement__WEBPACK_IMPORTED_MODULE_10__.newElementWith)(element, {\n text,\n width: maxWidth\n });\n};\n/**\n * When exporting frames, we need to render frame labels which are currently\n * being rendered in DOM when editing. Adding the labels as regular text\n * elements seems like a simple hack. In the future we'll want to move to\n * proper canvas rendering, even within editor (instead of DOM).\n */\n\n\nconst addFrameLabelsAsTextElements = (elements, opts) => {\n var _a, _b, _c;\n\n const nextElements = [];\n\n for (const element of elements) {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_11__.isFrameLikeElement)(element)) {\n let textElement = (0,_element__WEBPACK_IMPORTED_MODULE_9__.newTextElement)({\n x: element.x,\n y: element.y - _constants__WEBPACK_IMPORTED_MODULE_4__.FRAME_STYLE.nameOffsetY,\n fontFamily: _constants__WEBPACK_IMPORTED_MODULE_4__.FONT_FAMILY.Helvetica,\n fontSize: _constants__WEBPACK_IMPORTED_MODULE_4__.FRAME_STYLE.nameFontSize,\n lineHeight: _constants__WEBPACK_IMPORTED_MODULE_4__.FRAME_STYLE.nameLineHeight,\n strokeColor: (_c = (_b = (_a = element.customData) === null || _a === void 0 ? void 0 : _a.frameColor) === null || _b === void 0 ? void 0 : _b.nameColor) !== null && _c !== void 0 ? _c : opts.exportWithDarkMode ? _constants__WEBPACK_IMPORTED_MODULE_4__.FRAME_STYLE.nameColorDarkTheme : _constants__WEBPACK_IMPORTED_MODULE_4__.FRAME_STYLE.nameColorLightTheme,\n text: (0,_frame__WEBPACK_IMPORTED_MODULE_8__.getFrameLikeTitle)(element),\n rawText: (0,_frame__WEBPACK_IMPORTED_MODULE_8__.getFrameLikeTitle)(element) //zsviczian\n\n });\n textElement.y -= textElement.height;\n textElement = truncateText(textElement, element.width);\n nextElements.push(textElement);\n }\n\n nextElements.push(element);\n }\n\n return nextElements;\n};\n\nconst getFrameRenderingConfig = (exportingFrame, frameRendering) => {\n frameRendering = frameRendering || (0,_appState__WEBPACK_IMPORTED_MODULE_5__.getDefaultAppState)().frameRendering;\n return {\n enabled: exportingFrame ? true : frameRendering.enabled,\n outline: exportingFrame ? false : frameRendering.outline,\n name: exportingFrame ? false : frameRendering.name,\n clip: exportingFrame ? true : frameRendering.clip\n };\n};\n\nconst prepareElementsForRender = ({\n elements,\n exportingFrame,\n frameRendering,\n exportWithDarkMode\n}) => {\n let nextElements;\n\n if (exportingFrame) {\n nextElements = (0,_frame__WEBPACK_IMPORTED_MODULE_8__.getElementsOverlappingFrame)(elements, exportingFrame);\n } else if (frameRendering.enabled && frameRendering.name) {\n nextElements = addFrameLabelsAsTextElements(elements, {\n exportWithDarkMode\n });\n } else {\n nextElements = elements;\n }\n\n return nextElements;\n};\n\nconst exportToCanvas = async (elements, appState, files, {\n exportBackground,\n exportPadding = _constants__WEBPACK_IMPORTED_MODULE_4__.DEFAULT_EXPORT_PADDING,\n viewBackgroundColor,\n exportingFrame\n}, createCanvas = (width, height) => {\n const canvas = document.createElement(\"canvas\");\n canvas.width = width * appState.exportScale;\n canvas.height = height * appState.exportScale;\n return {\n canvas,\n scale: appState.exportScale\n };\n}, loadFonts = async () => {\n await _fonts__WEBPACK_IMPORTED_MODULE_14__.Fonts.loadFontsForElements(elements);\n}) => {\n var _a; // load font faces before continuing, by default leverages browsers' [FontFace API](https://developer.mozilla.org/en-US/docs/Web/API/FontFace)\n\n\n await loadFonts();\n const frameRendering = getFrameRenderingConfig(exportingFrame !== null && exportingFrame !== void 0 ? exportingFrame : null, (_a = appState.frameRendering) !== null && _a !== void 0 ? _a : null); // for canvas export, don't clip if exporting a specific frame as it would\n // clip the corners of the content\n\n if (exportingFrame) {\n frameRendering.clip = false;\n }\n\n const elementsForRender = prepareElementsForRender({\n elements,\n exportingFrame,\n exportWithDarkMode: appState.exportWithDarkMode,\n frameRendering\n });\n\n if (exportingFrame) {\n exportPadding = 0;\n }\n\n const [minX, minY, width, height] = getCanvasSize(exportingFrame ? [exportingFrame] : (0,_frame__WEBPACK_IMPORTED_MODULE_8__.getRootElements)(elementsForRender), exportPadding);\n const {\n canvas,\n scale = 1\n } = createCanvas(width, height);\n const defaultAppState = (0,_appState__WEBPACK_IMPORTED_MODULE_5__.getDefaultAppState)();\n const {\n imageCache\n } = await (0,_element_image__WEBPACK_IMPORTED_MODULE_7__.updateImageCache)({\n imageCache: new Map(),\n fileIds: (0,_element_image__WEBPACK_IMPORTED_MODULE_7__.getInitializedImageElements)(elementsForRender).map(element => element.fileId),\n files\n });\n (0,_renderer_staticScene__WEBPACK_IMPORTED_MODULE_13__.renderStaticScene)({\n canvas,\n rc: roughjs_bin_rough__WEBPACK_IMPORTED_MODULE_0__[\"default\"].canvas(canvas),\n elementsMap: (0,_utils__WEBPACK_IMPORTED_MODULE_3__.toBrandedType)((0,_utils__WEBPACK_IMPORTED_MODULE_3__.arrayToMap)(elementsForRender)),\n allElementsMap: (0,_utils__WEBPACK_IMPORTED_MODULE_3__.toBrandedType)((0,_utils__WEBPACK_IMPORTED_MODULE_3__.arrayToMap)((0,_fractionalIndex__WEBPACK_IMPORTED_MODULE_12__.syncInvalidIndices)(elements))),\n visibleElements: elementsForRender,\n scale,\n appState: Object.assign(Object.assign({}, appState), {\n frameRendering,\n viewBackgroundColor: exportBackground ? viewBackgroundColor : null,\n scrollX: -minX + exportPadding,\n scrollY: -minY + exportPadding,\n zoom: defaultAppState.zoom,\n shouldCacheIgnoreZoom: false,\n theme: appState.exportWithDarkMode ? _constants__WEBPACK_IMPORTED_MODULE_4__.THEME.DARK : _constants__WEBPACK_IMPORTED_MODULE_4__.THEME.LIGHT\n }),\n renderConfig: {\n canvasBackgroundColor: viewBackgroundColor,\n imageCache,\n renderGrid: false,\n isExporting: true,\n // empty disables embeddable rendering\n embedsValidationStatus: new Map(),\n elementsPendingErasure: new Set(),\n pendingFlowchartNodes: null\n }\n });\n return canvas;\n};\nconst exportToSvg = async (elements, appState, files, opts) => {\n var _a, _b, _c;\n\n const frameRendering = getFrameRenderingConfig((_a = opts === null || opts === void 0 ? void 0 : opts.exportingFrame) !== null && _a !== void 0 ? _a : null, (_b = appState.frameRendering) !== null && _b !== void 0 ? _b : null);\n let {\n exportPadding = _constants__WEBPACK_IMPORTED_MODULE_4__.DEFAULT_EXPORT_PADDING,\n exportWithDarkMode = false,\n viewBackgroundColor,\n exportScale = 1,\n exportEmbedScene\n } = appState;\n const {\n exportingFrame = null\n } = opts || {};\n const elementsForRender = prepareElementsForRender({\n elements,\n exportingFrame,\n exportWithDarkMode,\n frameRendering\n });\n\n if (exportingFrame) {\n exportPadding = 0;\n }\n\n let metadata = \"\"; // we need to serialize the \"original\" elements before we put them through\n // the tempScene hack which duplicates and regenerates ids\n\n if (exportEmbedScene) {\n try {\n metadata = await (await Promise.resolve(/*! import() */).then(__webpack_require__.bind(__webpack_require__, /*! ../data/image */ \"./data/image.ts\"))).encodeSvgMetadata({\n // when embedding scene, we want to embed the origionally supplied\n // elements which don't contain the temp frame labels.\n // But it also requires that the exportToSvg is being supplied with\n // only the elements that we're exporting, and no extra.\n text: (0,_data_json__WEBPACK_IMPORTED_MODULE_6__.serializeAsJSON)(elements, appState, files || {}, \"local\")\n });\n } catch (error) {\n console.error(error);\n }\n }\n\n const [minX, minY, width, height] = getCanvasSize(exportingFrame ? [exportingFrame] : (0,_frame__WEBPACK_IMPORTED_MODULE_8__.getRootElements)(elementsForRender), exportPadding); // initialize SVG root\n\n const svgRoot = document.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_4__.SVG_NS, \"svg\");\n svgRoot.setAttribute(\"version\", \"1.1\");\n svgRoot.setAttribute(\"xmlns\", _constants__WEBPACK_IMPORTED_MODULE_4__.SVG_NS);\n svgRoot.setAttribute(\"viewBox\", `0 0 ${width} ${height}`);\n svgRoot.setAttribute(\"width\", `${width * exportScale}`);\n svgRoot.setAttribute(\"height\", `${height * exportScale}`);\n\n if (exportWithDarkMode) {\n svgRoot.setAttribute(\"filter\", _constants__WEBPACK_IMPORTED_MODULE_4__.THEME_FILTER);\n }\n\n const offsetX = -minX + exportPadding;\n const offsetY = -minY + exportPadding;\n const frameElements = (0,_frame__WEBPACK_IMPORTED_MODULE_8__.getFrameLikeElements)(elements);\n let exportingFrameClipPath = \"\";\n const elementsMap = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.arrayToMap)(elements);\n\n for (const frame of frameElements) {\n const [x1, y1, x2, y2] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(frame, elementsMap);\n const cx = (x2 - x1) / 2 - (frame.x - x1);\n const cy = (y2 - y1) / 2 - (frame.y - y1);\n exportingFrameClipPath += `<clipPath id=${frame.id}>\n <rect transform=\"translate(${frame.x + offsetX} ${frame.y + offsetY}) rotate(${frame.angle} ${cx} ${cy})\"\n width=\"${frame.width}\"\n height=\"${frame.height}\"\n ${exportingFrame ? \"\" : `rx=${_constants__WEBPACK_IMPORTED_MODULE_4__.FRAME_STYLE.radius} ry=${_constants__WEBPACK_IMPORTED_MODULE_4__.FRAME_STYLE.radius}`}\n >\n </rect>\n </clipPath>`;\n }\n\n const fontFaces = (opts === null || opts === void 0 ? void 0 : opts.skipInliningFonts) ? [] : await getFontFaces(elements);\n svgRoot.innerHTML = `\n ${SVG_EXPORT_TAG}\n ${metadata}\n <defs>\n <style class=\"style-fonts\">\n ${fontFaces.join(\"\\n\")}\n </style>\n ${exportingFrameClipPath}\n </defs>\n `; // render background rect\n\n if (appState.exportBackground && viewBackgroundColor) {\n const rect = svgRoot.ownerDocument.createElementNS(_constants__WEBPACK_IMPORTED_MODULE_4__.SVG_NS, \"rect\");\n rect.setAttribute(\"x\", \"0\");\n rect.setAttribute(\"y\", \"0\");\n rect.setAttribute(\"width\", `${width}`);\n rect.setAttribute(\"height\", `${height}`);\n rect.setAttribute(\"fill\", viewBackgroundColor);\n svgRoot.appendChild(rect);\n }\n\n const rsvg = roughjs_bin_rough__WEBPACK_IMPORTED_MODULE_0__[\"default\"].svg(svgRoot);\n const renderEmbeddables = (_c = opts === null || opts === void 0 ? void 0 : opts.renderEmbeddables) !== null && _c !== void 0 ? _c : false;\n (0,_renderer_staticSvgScene__WEBPACK_IMPORTED_MODULE_2__.renderSceneToSvg)(elementsForRender, (0,_utils__WEBPACK_IMPORTED_MODULE_3__.toBrandedType)((0,_utils__WEBPACK_IMPORTED_MODULE_3__.arrayToMap)(elementsForRender)), rsvg, svgRoot, files || {}, {\n offsetX,\n offsetY,\n isExporting: true,\n exportWithDarkMode,\n renderEmbeddables,\n frameRendering,\n frameColor: appState.frameColor,\n canvasBackgroundColor: viewBackgroundColor,\n embedsValidationStatus: renderEmbeddables ? new Map(elementsForRender.filter(element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_11__.isFrameLikeElement)(element)).map(element => [element.id, true])) : new Map()\n });\n return svgRoot;\n}; // calculate smallest area to fit the contents in\n\nconst getCanvasSize = (elements, exportPadding) => {\n const [minX, minY, maxX, maxY] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getCommonBounds)(elements);\n const width = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.distance)(minX, maxX) + exportPadding * 2;\n const height = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.distance)(minY, maxY) + exportPadding * 2;\n return [minX, minY, width, height];\n};\n\nconst getExportSize = (elements, exportPadding, scale) => {\n const [,, width, height] = getCanvasSize(elements, exportPadding).map(dimension => Math.trunc(dimension * scale));\n return [width, height];\n};\n\nconst getFontFaces = async elements => {\n const fontFamilies = new Set();\n const codePoints = new Set();\n\n for (const element of elements) {\n if (!(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_11__.isTextElement)(element)) {\n continue;\n }\n\n fontFamilies.add(element.fontFamily); // gather unique codepoints only when inlining fonts\n\n for (const codePoint of Array.from(element.originalText, u => u.codePointAt(0))) {\n if (codePoint) {\n codePoints.add(codePoint);\n }\n }\n }\n\n const getSource = font => {\n var _a, _b;\n\n try {\n // retrieve font source as dataurl based on the used codepoints\n if ((_b = (_a = font.urls[0]) === null || _a === void 0 ? void 0 : _a.href) === null || _b === void 0 ? void 0 : _b.startsWith(\"data:font/woff2\")) {\n //zsviczian\n return font.getContent(codePoints);\n } //zsviczian\n\n\n return font.urls[0].toString(); //zsviczian\n //zsviczian\n } catch (_c) {\n // fallback to font source as a url\n return font.urls[0].toString();\n }\n };\n\n const fontFaces = await Promise.all(Array.from(fontFamilies).map(async x => {\n var _a;\n\n const {\n fonts,\n metadata\n } = (_a = _fonts__WEBPACK_IMPORTED_MODULE_14__.Fonts.registered.get(x)) !== null && _a !== void 0 ? _a : {};\n\n if (!Array.isArray(fonts)) {\n console.error(`Couldn't find registered fonts for font-family \"${x}\"`, _fonts__WEBPACK_IMPORTED_MODULE_14__.Fonts.registered);\n return [];\n }\n\n if (metadata === null || metadata === void 0 ? void 0 : metadata.local) {\n // don't inline local fonts\n return [];\n }\n\n return Promise.all(fonts.map(async font => `@font-face {\n font-family: ${font.fontFace.family};\n src: url(${await getSource(font)});\n }`));\n }));\n return fontFaces.flat();\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./scene/export.ts?");
|
|
3635
3635
|
|
|
3636
3636
|
/***/ }),
|
|
3637
3637
|
|