@unicom-cloud/ui 0.8.167 → 0.8.169

package/draw/core/components/App.js

@@ -0,0 +1,4076 @@
+/* 潘启宝 2026-06-25 08:58:50 星期四 山东省济南市 */
+import { ConfigContext as e } from "../../../config-provider/context.js";
+import { EMITTER_EVENT as t, emitter as n } from "../../../utils/emitter.js";
+import r from "../../../config-provider/index.js";
+import { clamp as i } from "../../libs/math/utils.js";
+import { applyDarkModeFilter as a, isTransparent as o } from "../../common/colors.js";
+import { APP_NAME as s, ARROW_TYPE as c, CLASSES as l, CURSOR_TYPE as u, DEFAULT_COLLISION_THRESHOLD as d, DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT as f, DEFAULT_REDUCED_GLOBAL_ALPHA as p, DEFAULT_TEXT_ALIGN as m, EVENT as h, FRAME_STYLE as g, IMAGE_MIME_TYPES as _, MAX_ALLOWED_FILE_BYTES as ee, MIME_TYPES as v, POINTER_BUTTON as y, POINTER_EVENTS as te, ROUNDNESS as ne, THEME as re, TOOL_TYPE as b, VERTICAL_ALIGN as ie, ZOOM_STEP as ae, supportsResizeObserver as oe } from "../../common/constants.js";
+import { MQ_RIGHT_SIDEBAR_MIN_WIDTH as se, createUserAgentDescriptor as ce, deriveStylesPanelMode as le, getFormFactor as ue, isBrave as de, isIOS as fe, isSafari as pe, loadDesktopUIModePreference as me, setDesktopUIMode as he } from "../../common/editorInterface.js";
+import { Emitter as ge } from "../../common/emitter.js";
+import { getLineHeight as _e } from "../../common/font-metadata.js";
+import { CODES as ve, KEYS as x, isArrowKey as ye, shouldMaintainAspectRatio as be, shouldResizeFromCenter as xe, shouldRotateWithDiscreteAngle as Se } from "../../common/keys.js";
+import { vector as Ce, vectorDot as we, vectorFromPoint as Te, vectorNormalize as Ee, vectorSubtract as De } from "../../libs/math/vector.js";
+import { pointDistance as Oe, pointFrom as S, pointRotateRads as ke } from "../../libs/math/point.js";
+import "../../libs/math/index.js";
+import { getGridPoint as C } from "../../common/points.js";
+import { addEventListener as w, arrayToMap as Ae, debounce as je, distance as Me, easeOut as Ne, easeToValuesRAF as Pe, getDateTime as Fe, getFeatureFlag as T, getFontString as Ie, getNearestScrollableContainer as Le, invariant as E, isDevEnv as Re, isInputLike as ze, isSelectionLikeTool as Be, isShallowEqual as Ve, isTestEnv as He, isToolIcon as Ue, isWritableElement as We, muteFSAbortError as Ge, normalizeEOL as Ke, sceneCoordsToViewportCoords as qe, tupleToCoors as Je, updateActiveTool as D, updateObject as Ye, updateStable as Xe, viewportCoordsToSceneCoords as O } from "../../common/utils.js";
+import { nanoid as Ze } from "../../libs/nanoid/index.js";
+import { randomInteger as Qe } from "../../common/random.js";
+import { normalizeLink as $e } from "../../common/url.js";
+import "../../common/index.js";
+import et from "../../libs/roughjs/rough.js";
+import { hasBackground as tt } from "../../element/comparisons.js";
+import { cropElement as nt, getUncroppedWidthAndHeight as rt } from "../../element/cropElement.js";
+import { hasBoundTextElement as it, isArrowElement as at, isBindableElement as ot, isBindingElement as k, isBindingElementType as st, isBoundToContainer as ct, isElbowArrow as A, isEmbeddableElement as lt, isFlowchartNodeElement as ut, isFrameLikeElement as j, isIframeElement as dt, isIframeLikeElement as ft, isImageElement as M, isInitializedImageElement as pt, isLineElement as mt, isLinearElement as N, isLinearElementType as ht, isMagicFrameElement as gt, isSimpleArrow as _t, isTextBindableContainer as vt, isTextElement as P, isUsingAdaptiveRadius as yt } from "../../element/typeChecks.js";
+import { excludeElementsInFramesFromSelection as bt, getElementsWithinSelection as xt, getSelectedElements as St, getSelectionStateForElements as Ct, isSomeElementSelected as wt, makeNextSelectedElementIds as F } from "../../element/selection.js";
+import { getApproxMinLineHeight as Tt, getApproxMinLineWidth as Et, getLineHeightInPx as Dt, getMinTextElementWidth as Ot, isMeasureTextSupported as kt, measureText as At, normalizeText as jt } from "../../element/textMeasurements.js";
+import { wrapText as Mt } from "../../element/textWrapping.js";
+import { getBoundTextElement as Nt, getContainerCenter as Pt, getContainerElement as Ft, isValidTextContainer as It, redrawTextBoundingBox as Lt } from "../../element/textElement.js";
+import { editGroupForSelectedElement as Rt, getElementsInGroup as zt, getSelectedGroupIdForElement as Bt, getSelectedGroupIds as Vt, isElementInGroup as Ht, isSelectedViaGroup as Ut, selectGroupsForSelectedElements as I } from "../../element/groups.js";
+import { mutateElement as Wt, newElementWith as L } from "../../element/mutateElement.js";
+import { addElementsToFrame as Gt, elementOverlapsWithFrame as Kt, filterElementsEligibleAsFrameChildren as qt, getContainingFrame as Jt, getElementsInNewFrame as Yt, getElementsInResizingFrame as Xt, getElementsOverlappingFrame as Zt, getFrameChildren as Qt, getFrameLikeTitle as $t, isCursorInFrame as en, isElementInFrame as tn, removeElementsFromFrame as nn, replaceAllElementsInFrame as rn, updateFrameMembershipOfSelectedElements as an } from "../../element/frame.js";
+import { getRenderOpacity as on } from "../../element/renderElement.js";
+import { ShapeCache as sn } from "../../element/shape.js";
+import { getCornerRadius as cn, isPathALoop as ln } from "../../element/utils.js";
+import { getHoveredElementForBinding as R, hitElementBoundText as un, hitElementBoundingBox as dn, hitElementBoundingBoxOnly as fn, hitElementItself as pn, isPointInElement as mn } from "../../element/collision.js";
+import { bindOrUnbindBindingElement as hn, bindOrUnbindBindingElements as gn, calculateFixedPointForNonElbowArrowBinding as _n, fixBindingsAfterDeletion as vn, isBindingEnabled as yn, maxBindingDistance_simple as bn, shouldEnableBindingForPointerEvent as xn, updateBoundElements as Sn } from "../../element/binding.js";
+import { syncInvalidIndices as Cn, syncMovedIndices as wn } from "../../element/fractionalIndex.js";
+import { LinearElementEditor as z } from "../../element/linearElementEditor.js";
+import { doBoundsIntersect as Tn, getCommonBounds as En, getElementAbsoluteCoords as Dn, getElementBounds as On, getVisibleSceneBounds as kn } from "../../element/bounds.js";
+import { getNormalizedDimensions as An, isElementCompletelyInViewport as jn, isElementInViewport as Mn, isInvisiblySmallElement as Nn } from "../../element/sizeHelpers.js";
+import { handleFocusPointDrag as Pn, handleFocusPointHover as Fn, handleFocusPointPointerDown as In, handleFocusPointPointerUp as Ln } from "../../element/arrows/focus.js";
+import { maybeHandleArrowPointlikeDrag as Rn } from "../../element/arrows/helpers.js";
+import { isNonDeletedElement as zn } from "../../element/is.js";
+import { Scene as Bn } from "../../element/Scene.js";
+import { deepCopyElement as Vn, duplicateElements as Hn } from "../../element/duplicate.js";
+import { CaptureUpdateAction as B, Store as Un, StoreDelta as Wn, getObservedAppState as Gn } from "../../element/store.js";
+import { dragNewElement as Kn, dragSelectedElements as qn, getDragOffsetXY as Jn } from "../../element/dragElements.js";
+import { isElementLink as Yn, parseElementLinkFromURL as Xn } from "../../element/elementLink.js";
+import { newArrowElement as Zn, newElement as Qn, newEmbeddableElement as $n, newFrameElement as er, newFreeDrawElement as tr, newIframeElement as nr, newImageElement as rr, newLinearElement as ir, newMagicFrameElement as ar, newTextElement as or, refreshTextDimensions as sr } from "../../element/newElement.js";
+import { createSrcDoc as cr, embeddableURLValidator as lr, maybeParseEmbedSrc as ur } from "../../element/embeddable.js";
+import { FlowChartCreator as dr, FlowChartNavigator as fr, getLinkDirectionFromKey as pr } from "../../element/flowchart.js";
+import { getInitializedImageElements as mr, normalizeSVG as hr, updateImageCache as gr } from "../../element/image.js";
+import { positionElementsOnGrid as _r } from "../../element/positionElementsOnGrid.js";
+import { getResizeArrowDirection as vr, getResizeOffsetXY as yr, transformElements as br } from "../../element/resizeElements.js";
+import { hasBoundingBox as xr } from "../../element/transformHandles.js";
+import { getCursorForResizingElement as Sr, getElementWithTransformHandleType as Cr, getTransformHandleTypeFromCoords as wr } from "../../element/resizeTest.js";
+import { convertToDrawElements as Tr } from "../../element/transform.js";
+import "../../element/index.js";
+import { trackEvent as V } from "../analytics.js";
+import { ActionManager as Er } from "../actions/manager.js";
+import { getDefaultAppState as Dr, isEraserActive as Or, isHandToolActive as kr } from "../appState.js";
+import { History as Ar } from "../history.js";
+import { AppContext as jr, AppPropsContext as Mr, DrawActionManagerContext as Nr, DrawAppStateContext as Pr, DrawContainerContext as Fr, DrawElementsContext as Ir, DrawHistoryContext as Lr, DrawSetAppStateContext as Rr, EditorInterfaceContext as zr, editorInterfaceContextInitialValue as Br } from "./context.js";
+import { editorJotaiStore as Vr } from "../editor-jotai.js";
+import { defaultLang as Hr, getLanguage as Ur, languages as Wr, setLanguage as Gr, t as H } from "../i18n.js";
+import { getNormalizedZoom as Kr } from "../scene/normalize.js";
+import { calculateScrollCenter as qr } from "../scene/scroll.js";
+import "../scene/index.js";
+import { actions as Jr } from "../actions/register.js";
+import { actionDeleteSelected as Yr } from "../actions/actionDeleteSelected.js";
+import { getShortcutKey as Xr } from "../shortcut.js";
+import { actionDuplicateSelection as Zr } from "../actions/actionDuplicateSelection.js";
+import { ImageSceneDataError as Qr } from "../errors.js";
+import { fileOpen as $r } from "../data/filesystem.js";
+import { Fonts as ei } from "../fonts/Fonts.js";
+import "../fonts/index.js";
+import { restoreAppState as ti, restoreElements as ni } from "../data/restore.js";
+import { ImageURLToFile as ri, SVGStringToFile as ii, dataURLToString as ai, generateIdFromFile as oi, getDataURL as si, getDataURL_sync as ci, isImageFileHandle as li, isSupportedImageFile as ui, loadFromBlob as di, loadSceneOrLibraryFromBlob as fi, normalizeFile as pi, parseLibraryJSON as mi, resizeImageFile as hi } from "../data/blob.js";
+import { copyTextToSystemClipboard as gi, parseClipboard as _i, parseDataTransferEvent as vi } from "../clipboard.js";
+import { MagicIcon as yi } from "./icons.js";
+import { actionSelectAll as bi } from "../actions/actionSelectAll.js";
+import { actionBringForward as xi, actionBringToFront as Si, actionSendBackward as Ci, actionSendToBack as wi } from "../actions/actionZindex.js";
+import { resetCursor as U, setCursor as W, setCursorForShape as G, setEraserCursor as Ti } from "../cursor.js";
+import { getStateForZoom as Ei } from "../scene/zoom.js";
+import { actionToggleHandTool as Di, zoomToFit as Oi } from "../actions/actionCanvas.js";
+import { actionFinalize as K } from "../actions/actionFinalize.js";
+import { exportCanvas as ki } from "../data/utils.js";
+import "../data/index.js";
+import { actionCopyStyles as Ai, actionPasteStyles as ji } from "../actions/actionStyles.js";
+import { actionGroup as Mi, actionUngroup as Ni } from "../actions/actionGroup.js";
+import { actionAddToLibrary as Pi } from "../actions/actionAddToLibrary.js";
+import { actionFlipHorizontal as Fi, actionFlipVertical as Ii } from "../actions/actionFlip.js";
+import { actionCopy as Li, actionCopyAsPng as Ri, actionCopyAsSvg as zi, actionCut as Bi, actionPaste as Vi, copyText as Hi } from "../actions/actionClipboard.js";
+import { actionToggleGridMode as Ui } from "../actions/actionToggleGridMode.js";
+import { actionToggleObjectsSnapMode as Wi } from "../actions/actionToggleObjectsSnapMode.js";
+import { actionToggleZenMode as Gi } from "../actions/actionToggleZenMode.js";
+import { actionBindText as Ki, actionUnbindText as qi, actionWrapTextInContainer as Ji } from "../actions/actionBoundText.js";
+import { actionToggleElementLock as Yi, actionUnlockAllElements as Xi } from "../actions/actionElementLock.js";
+import { actionToggleLinearEditor as Zi } from "../actions/actionLinearEditor.js";
+import { actionToggleStats as Qi } from "../actions/actionToggleStats.js";
+import { actionToggleCropEditor as $i } from "../actions/actionCropEditor.js";
+import "../actions/index.js";
+import { actionCopyElementLink as ea } from "../actions/actionElementLink.js";
+import { actionRemoveAllElementsFromFrame as ta, actionSelectAllElementsInFrame as na, actionWrapSelectionInFrame as ra } from "../actions/actionFrame.js";
+import { createRedoAction as ia, createUndoAction as aa } from "../actions/actionHistory.js";
+import { actionTextAutoResize as oa } from "../actions/actionTextAutoResize.js";
+import { actionToggleViewMode as sa } from "../actions/actionToggleViewMode.js";
+import { getShortcutFromShortcutName as ca } from "../actions/shortcuts.js";
+import { AnimationFrameHandler as la } from "../animation-frame-handler.js";
+import ua, { distributeLibraryItemsOnSquareGrid as da } from "../data/library.js";
+import { EraserTrail as fa } from "../eraser/index.js";
+import { getCenter as pa, getDistance as ma } from "../gesture.js";
+import { LaserTrails as ha } from "../laser-trails.js";
+import { LassoTrail as ga } from "../lasso/index.js";
+import { withBatchedUpdates as q, withBatchedUpdatesThrottled as _a } from "../reactUtils.js";
+import { Renderer as va } from "../scene/Renderer.js";
+import { isOverScrollBars as ya } from "../scene/scrollbars.js";
+import { SnapCache as J, getReferenceSnapPoints as ba, getSnapLinesAtPointer as xa, getVisibleGaps as Sa, isActiveToolNonLinearSnappable as Ca, isGridModeEnabled as wa, isSnappingEnabled as Ta, snapDraggedElements as Ea, snapNewElement as Da, snapResizingElements as Oa } from "../snapping.js";
+import { textWysiwyg as ka } from "../wysiwyg/textWysiwyg.js";
+import { activeConfirmDialogAtom as Aa } from "./ActiveConfirmDialog.js";
+import ja from "./BraveMeasureTextError.js";
+import { CONTEXT_MENU_SEPARATOR as Y, ContextMenu as Ma } from "./ContextMenu.js";
+import Na, { convertElementTypePopupAtom as Pa, convertElementTypes as Fa, getConversionTypeFromElements as Ia } from "./ConvertElementTypePopup.js";
+import { ElementCanvasButtons as La } from "./ElementCanvasButtons.js";
+import { activeEyeDropperAtom as Ra } from "./EyeDropper.js";
+import { findShapeByKey as za } from "./shapes.js";
+import { searchItemInFocusAtom as Ba } from "./SearchMenu.js";
+import Va from "./LayerUI.js";
+import { ElementCanvasButton as Ha } from "./MagicButton.js";
+import { SVGLayer as Ua } from "./SVGLayer.js";
+import { Toast as Wa } from "./Toast.js";
+import Ga from "./UnlockPopup.js";
+import Ka from "./canvases/InteractiveCanvas.js";
+import qa from "./canvases/StaticCanvas.js";
+import "./canvases/index.js";
+import Ja from "./canvases/NewElementCanvas.js";
+import Ya, { Component as Xa } from "react";
+import { UI_PC_PREFIX as Za } from "@unicom-cloud/utils/constants/ui";
+import { Fragment as Qa, jsx as X, jsxs as $a } from "react/jsx-runtime";
+import eo from "lodash/throttle";
+import { flushSync as Z } from "react-dom";
+import to from "@unicom-cloud/icons/IconUiCopy";
+import * as no from "@unicom-cloud/utils/ui-color";
+import ro from "@unicom-cloud/utils/class-name";
+import io from "@unicom-cloud/icons/IconUiFullscreen";
+import ao from "lodash/isUndefined";
+//#region components/pc/draw/core/components/App.tsx
+var oo = !1, so = 0, co = null, lo = !1, uo = !1, fo = !1, po = {
+	horizontal: null,
+	vertical: null
+}, Q = 0, mo = !1, ho = !1, go = 0, _o = !1, vo = null, $ = {
+	pointers: /* @__PURE__ */ new Map(),
+	lastCenter: null,
+	initialDistance: null,
+	initialScale: null
+}, yo = class yo extends Xa {
+	#e;
+	#t;
+	get rootElement() {
+		return this.getRootElement();
+	}
+	#n;
+	#r;
+	#i;
+	#a;
+	#o;
+	#s;
+	#c;
+	#l;
+	#u;
+	constructor(t) {
+		super(t), this.interactiveCanvas = null, this.unmounted = !1, this.editorInterface = Br, this.#e = le(Br), this.#t = Ya.createRef(), this.getRootElement = () => this.#t.current, this.files = {}, this.imageCache = /* @__PURE__ */ new Map(), this.#a = /* @__PURE__ */ new Map(), this.#o = /* @__PURE__ */ new Map(), this.#s = /* @__PURE__ */ new Set(), this.#c = () => {
+			this.setToast(null);
+		}, this.#l = /* @__PURE__ */ new Set(), this.flowChartCreator = new dr(), this.#u = new fr(), this.bindModeHandler = null, this.lastPointerDownEvent = null, this.lastPointerUpEvent = null, this.lastPointerMoveEvent = null, this.lastPointerMoveCoords = null, this.previousPointerMoveCoords = null, this.lastViewportPosition = {
+			x: 0,
+			y: 0
+		}, this.animationFrameHandler = new la(), this.laserTrails = new ha(this.animationFrameHandler, this), this.eraserTrail = new fa(this.animationFrameHandler, this), this.lassoTrail = new ga(this.animationFrameHandler, this), this.onChangeEmitter = new ge(), this.onPointerDownEmitter = new ge(), this.onPointerUpEmitter = new ge(), this.onScrollChangeEmitter = new ge(), this.missingPointerEventCleanupEmitter = new ge(), this.onRemoveEventListenersEmitter = new ge(), this.updateEditorAtom = (e, ...t) => {
+			let n = Vr.set(e, ...t);
+			return this.#se(), n;
+		}, this.#p = null, this.getEffectiveGridSize = () => wa(this) ? this.state.gridSize : null, this.#y = (e, t) => {
+			this.#o.set(e.id, t), sn.delete(e);
+		}, this.#b = () => {
+			let e = /* @__PURE__ */ new Set(), t = !1;
+			this.scene.getNonDeletedElements().filter((n) => {
+				if (lt(n)) {
+					if (e.add(n.id), !this.#o.has(n.id)) {
+						t = !0;
+						let e = lr(n.link, this.props.validateEmbeddable);
+						this.#y(n, e);
+					}
+				} else dt(n) && e.add(n.id);
+				return !1;
+			}), t && this.scene.triggerUpdate(), this.#a.forEach((t, n) => {
+				e.has(n) || this.#a.delete(n);
+			});
+		}, this.#S = (e) => `${this.id}-frame-name-${e.id}`, this.frameNameBoundsCache = {
+			get: (e) => {
+				let t = this.frameNameBoundsCache._cache.get(e.id);
+				if (!t || t.zoom !== this.state.zoom.value || t.versionNonce !== e.versionNonce) {
+					let n = document.getElementById(this.#S(e));
+					if (n) {
+						let r = n.getBoundingClientRect(), i = O({
+							clientX: r.x,
+							clientY: r.y
+						}, this.state), a = O({
+							clientX: r.right,
+							clientY: r.bottom
+						}, this.state);
+						return t = {
+							x: i.x,
+							y: i.y,
+							width: a.x - i.x,
+							height: a.y - i.y,
+							angle: 0,
+							zoom: this.state.zoom.value,
+							versionNonce: e.versionNonce
+						}, this.frameNameBoundsCache._cache.set(e.id, t), t;
+					}
+					return null;
+				}
+				return t;
+			},
+			_cache: /* @__PURE__ */ new Map()
+		}, this.#C = (e) => {
+			e && this.scene.mutateElement(e, { name: e.name?.trim?.() || null }), this.setState({ editingFrame: null });
+		}, this.#T = () => {
+			if (!this.state.frameRendering.enabled || !this.state.frameRendering.name) return this.state.editingFrame && this.#C(null), null;
+			let e = this.scene.getNonDeletedFramesLikes(), t = e.length > 0 && this.state.searchMatches?.focusedId && j(this.scene.getElement(this.state.searchMatches.focusedId)) ? this.state.searchMatches.matches.find((e) => e.focus) : null;
+			return e.map((e) => {
+				if (!Mn(e, this.canvas.width / window.devicePixelRatio, this.canvas.height / window.devicePixelRatio, {
+					offsetLeft: this.state.offsetLeft,
+					offsetTop: this.state.offsetTop,
+					scrollX: this.state.scrollX,
+					scrollY: this.state.scrollY,
+					zoom: this.state.zoom
+				}, this.scene.getNonDeletedElementsMap())) return this.state.editingFrame === e.id && this.#C(e), null;
+				let { x: n, y: r } = qe({
+					sceneX: e.x,
+					sceneY: e.y
+				}, this.state), i, o = $t(e);
+				if (e.id === this.state.editingFrame) {
+					let t = o;
+					i = /* @__PURE__ */ X("input", {
+						autoFocus: !0,
+						value: t,
+						onChange: (t) => {
+							this.scene.mutateElement(e, { name: t.target.value });
+						},
+						onFocus: (e) => e.target.select(),
+						onBlur: () => this.#C(e),
+						onKeyDown: (t) => {
+							(t.key === x.ESCAPE || t.key === x.ENTER) && this.#C(e);
+						},
+						style: {
+							background: this.#w ? a(this.state.viewBackgroundColor) : this.state.viewBackgroundColor,
+							zIndex: 2,
+							border: "none",
+							display: "block",
+							padding: "6px",
+							borderRadius: 4,
+							boxShadow: "inset 0 0 0 1px var(--color-primary)",
+							fontFamily: "Assistant",
+							fontSize: `${g.nameFontSize}px`,
+							transform: "translate(-6px, 6px)",
+							color: this.#w ? g.nameColorDarkTheme : g.nameColorLightTheme,
+							overflow: "hidden",
+							maxWidth: `${document.body.clientWidth - n - 6}px`
+						},
+						size: t.length + 1 || 1,
+						dir: "auto",
+						autoComplete: "off",
+						autoCapitalize: "off",
+						autoCorrect: "off"
+					});
+				} else i = o;
+				return /* @__PURE__ */ X("div", {
+					id: this.#S(e),
+					className: l.FRAME_NAME,
+					style: {
+						position: "absolute",
+						bottom: `${this.state.height + g.nameOffsetY - r + this.state.offsetTop}px`,
+						left: `${n - this.state.offsetLeft}px`,
+						zIndex: 2,
+						fontSize: g.nameFontSize,
+						color: this.#w ? g.nameColorDarkTheme : g.nameColorLightTheme,
+						lineHeight: g.nameLineHeight,
+						width: "max-content",
+						maxWidth: t?.id === e.id && t?.focus ? "none" : `${e.width * this.state.zoom.value}px`,
+						overflow: e.id === this.state.editingFrame ? "visible" : "hidden",
+						whiteSpace: "nowrap",
+						textOverflow: "ellipsis",
+						cursor: u.MOVE,
+						pointerEvents: this.state.viewModeEnabled ? te.disabled : te.enabled
+					},
+					onPointerDown: (e) => this.#Ne(e),
+					onWheel: (e) => this.#wt(e),
+					onContextMenu: this.#yt,
+					onDoubleClick: () => {
+						this.setState({ editingFrame: e.id });
+					},
+					children: i
+				}, e.id);
+			});
+		}, this.render = () => {
+			let t = this.scene.getSelectedElements(this.state), { renderTopRightUI: n, renderTopLeftUI: i, renderCustomStats: a } = this.props, o = this.scene.getSceneNonce(), { elementsMap: s, visibleElements: c } = this.renderer.getRenderableElements({
+				sceneNonce: o,
+				zoom: this.state.zoom,
+				offsetLeft: this.state.offsetLeft,
+				offsetTop: this.state.offsetTop,
+				scrollX: this.state.scrollX,
+				scrollY: this.state.scrollY,
+				height: this.state.height,
+				width: this.state.width,
+				editingTextElement: this.state.editingTextElement,
+				newElementId: this.state.newElement?.id
+			});
+			this.visibleElements = c;
+			let l = this.scene.getNonDeletedElementsMap(), u = "setPointerCapture" in HTMLElement.prototype ? !1 : this.state.selectionElement || this.state.newElement || this.state.selectedElementsAreBeingDragged || this.state.resizingElement || this.state.activeTool.type === "laser" && this.state.cursorButton === "down", d = t[0], f = Vr.get(Pa)?.type === "panel";
+			return /* @__PURE__ */ X(r, {
+				componentConfig: {
+					Trigger: { className: `${Za}-draw-trigger` },
+					Modal: { className: `${Za}-draw-modal` },
+					Drawer: { className: `${Za}-draw-drawer` },
+					Notice: { className: `${Za}-draw-notice` }
+				},
+				children: /* @__PURE__ */ X("div", {
+					translate: "no",
+					className: ro("draw draw-container notranslate", {
+						"draw--view-mode": this.state.viewModeEnabled || this.state.openDialog?.name === "elementLinkSelector",
+						"draw--mobile": this.editorInterface.formFactor === "phone"
+					}, this.props.className),
+					style: {
+						"--ui-pointerEvents": u ? te.disabled : te.enabled,
+						"--right-sidebar-width": "302px",
+						...this.props.style
+					},
+					ref: this.#t,
+					onDrop: this.#vt,
+					tabIndex: 0,
+					onKeyDown: this.props.handleKeyboardGlobally ? void 0 : this.#le,
+					onPointerEnter: this.#E,
+					onPointerLeave: this.#E,
+					children: /* @__PURE__ */ X(e.Consumer, { children: (e) => /* @__PURE__ */ X(jr.Provider, {
+						value: this,
+						children: /* @__PURE__ */ X(Mr.Provider, {
+							value: this.props,
+							children: /* @__PURE__ */ X(Fr.Provider, {
+								value: this.drawContainerValue,
+								children: /* @__PURE__ */ X(zr.Provider, {
+									value: this.editorInterface,
+									children: /* @__PURE__ */ X(Rr.Provider, {
+										value: this.setAppState,
+										children: /* @__PURE__ */ X(Pr.Provider, {
+											value: this.state,
+											children: /* @__PURE__ */ X(Ir.Provider, {
+												value: this.scene.getNonDeletedElements(),
+												children: /* @__PURE__ */ $a(Lr.Provider, {
+													value: this.#i,
+													children: [/* @__PURE__ */ $a(Nr.Provider, {
+														value: this.actionManager,
+														children: [
+															/* @__PURE__ */ X(Va, {
+																canvas: this.canvas,
+																appState: this.state,
+																files: this.files,
+																setAppState: this.setAppState,
+																actionManager: this.actionManager,
+																elements: this.scene.getNonDeletedElements(),
+																onLockToggle: this.toggleLock,
+																onPenModeToggle: this.togglePenMode,
+																onHandToolToggle: this.onHandToolToggle,
+																langCode: Ur().code,
+																renderTopLeftUI: i,
+																renderTopRightUI: n,
+																renderCustomStats: a,
+																showExitZenModeBtn: this.props?.zenModeEnabled === void 0 && this.state.zenModeEnabled,
+																UIOptions: this.props.UIOptions,
+																onExportImage: this.onExportImage,
+																renderWelcomeScreen: !this.state.isLoading && this.state.showWelcomeScreen && this.state.activeTool.type === this.state.preferredSelectionTool.type && !this.state.zenModeEnabled && !this.scene.getElementsIncludingDeleted().length,
+																app: this,
+																isCollaborating: this.props.isCollaborating,
+																generateLinkForSelection: this.props.generateLinkForSelection,
+																children: this.props.children
+															}),
+															/* @__PURE__ */ X("div", { className: "draw-textEditorContainer" }),
+															/* @__PURE__ */ X("div", { className: "draw-contextMenuContainer" }),
+															/* @__PURE__ */ X("div", { className: "draw-eye-dropper-container" }),
+															/* @__PURE__ */ X(Ua, { trails: [
+																this.laserTrails,
+																this.lassoTrail,
+																this.eraserTrail
+															] }),
+															this.props.aiEnabled !== !1 && t.length === 1 && gt(d) && /* @__PURE__ */ X(La, {
+																element: d,
+																elementsMap: s,
+																children: /* @__PURE__ */ X(Ha, {
+																	title: H("labels.convertToCode"),
+																	icon: yi,
+																	checked: !1,
+																	onChange: () => this.#k(d, "button")
+																})
+															}),
+															t.length === 1 && dt(d) && d.customData?.generationData?.status === "done" && /* @__PURE__ */ $a(La, {
+																element: d,
+																elementsMap: s,
+																children: [/* @__PURE__ */ X(Ha, {
+																	title: H("labels.copySource"),
+																	icon: /* @__PURE__ */ X(to, {}),
+																	checked: !1,
+																	onChange: () => this.#A(d)
+																}), /* @__PURE__ */ X(Ha, {
+																	title: "Enter fullscreen",
+																	icon: /* @__PURE__ */ X(io, {}),
+																	checked: !1,
+																	onChange: () => {
+																		let e = this.#g(d);
+																		if (e) try {
+																			e.requestFullscreen(), this.setState({
+																				activeEmbeddable: {
+																					element: d,
+																					state: "active"
+																				},
+																				selectedElementIds: { [d.id]: !0 },
+																				newElement: null,
+																				selectionElement: null
+																			});
+																		} catch (e) {
+																			console.warn(e), this.setState({ errorMessage: "Couldn't enter fullscreen" });
+																		}
+																	}
+																})]
+															}),
+															this.state.toast !== null && /* @__PURE__ */ X(Wa, {
+																message: this.state.toast.message,
+																duration: this.state.toast.duration,
+																closable: this.state.toast.closable,
+																onClose: this.#c
+															}),
+															this.state.contextMenu && /* @__PURE__ */ X(Ma, {
+																items: this.state.contextMenu.items,
+																top: this.state.contextMenu.top,
+																left: this.state.contextMenu.left,
+																actionManager: this.actionManager,
+																onClose: (e) => {
+																	this.setState({ contextMenu: null }, () => {
+																		this.focusContainer(), e?.();
+																	});
+																}
+															}),
+															/* @__PURE__ */ X(qa, {
+																canvas: this.canvas,
+																rc: this.rc,
+																elementsMap: s,
+																allElementsMap: l,
+																visibleElements: c,
+																sceneNonce: o,
+																selectionNonce: this.state.selectionElement?.versionNonce,
+																scale: window.devicePixelRatio,
+																appState: this.state,
+																renderConfig: {
+																	imageCache: this.imageCache,
+																	isExporting: !1,
+																	renderGrid: wa(this),
+																	canvasBackgroundColor: this.state.viewBackgroundColor,
+																	embedsValidationStatus: this.#o,
+																	elementsPendingErasure: this.#l,
+																	pendingFlowchartNodes: this.flowChartCreator.pendingNodes,
+																	theme: this.state.theme
+																}
+															}),
+															this.state.newElement && /* @__PURE__ */ X(Ja, {
+																appState: this.state,
+																scale: window.devicePixelRatio,
+																rc: this.rc,
+																elementsMap: s,
+																allElementsMap: l,
+																renderConfig: {
+																	imageCache: this.imageCache,
+																	isExporting: !1,
+																	renderGrid: !1,
+																	canvasBackgroundColor: this.state.viewBackgroundColor,
+																	embedsValidationStatus: this.#o,
+																	elementsPendingErasure: this.#l,
+																	pendingFlowchartNodes: null,
+																	theme: this.state.theme
+																}
+															}),
+															/* @__PURE__ */ X(Ka, {
+																app: this,
+																containerRef: this.#t,
+																canvas: this.interactiveCanvas,
+																elementsMap: s,
+																visibleElements: c,
+																allElementsMap: l,
+																selectedElements: t,
+																sceneNonce: o,
+																selectionNonce: this.state.selectionElement?.versionNonce,
+																scale: window.devicePixelRatio,
+																appState: this.state,
+																renderScrollbars: this.props.renderScrollbars === !0,
+																editorInterface: this.editorInterface,
+																renderInteractiveSceneCallback: this.#J,
+																handleCanvasRef: this.#gt,
+																onContextMenu: this.#yt,
+																onPointerMove: this.#Ae,
+																onPointerUp: this.#Pe,
+																onPointerCancel: this.removePointer,
+																onTouchMove: this.#Me,
+																onPointerDown: this.#Ne,
+																onDoubleClick: this.#Oe
+															}),
+															this.#T(),
+															this.state.activeLockedId && /* @__PURE__ */ X(Ga, {
+																app: this,
+																activeLockedId: this.state.activeLockedId
+															}),
+															f && /* @__PURE__ */ X(Na, { app: this })
+														]
+													}), this.#x()]
+												})
+											})
+										})
+									})
+								})
+							})
+						})
+					}) })
+				})
+			});
+		}, this.focusContainer = () => {
+			this.rootElement?.focus?.();
+		}, this.getSceneElementsIncludingDeleted = () => this.scene.getElementsIncludingDeleted(), this.getSceneElementsMapIncludingDeleted = () => this.scene.getElementsMapIncludingDeleted(), this.getSceneElements = () => this.scene.getNonDeletedElements(), this.onInsertElements = (e) => {
+			this.addElementsFromPasteOrLibrary({
+				elements: e,
+				position: "center",
+				files: null
+			});
+		}, this.onExportImage = async (e, t, n) => {
+			V("export", e, "ui");
+			let r = await ki(e, t, this.state, this.files, {
+				exportBackground: this.state.exportBackground,
+				name: this.getName(),
+				viewBackgroundColor: this.state.viewBackgroundColor,
+				exportingFrame: n.exportingFrame
+			}).catch(Ge).catch((e) => {
+				console.error(e), this.setState({ errorMessage: e.message });
+			});
+			this.state.exportEmbedScene && r && li(r) && this.setState({ fileHandle: r });
+		}, this.#D = /* @__PURE__ */ new Map(), this.#O = ({ frameElement: e, data: t }) => {
+			t.status === "pending" ? this.scene.mutateElement(e, { customData: { generationData: void 0 } }, {
+				informMutation: !1,
+				isDragging: !1
+			}) : this.scene.mutateElement(e, { customData: { generationData: t } }, {
+				informMutation: !1,
+				isDragging: !1
+			}), this.#D.set(e.id, t), this.#se();
+		}, this.plugins = {}, this.onMagicframeToolSelect = () => {
+			let e = this.scene.getSelectedElements({ selectedElementIds: this.state.selectedElementIds });
+			if (e.length === 0) this.setActiveTool({ type: b.magicframe }), V("ai", "tool-select (empty-selection)", "d2c");
+			else {
+				let t = e.length === 1 && gt(e[0]) && e[0];
+				if (!t && e.some((e) => j(e) || e.frameId)) {
+					this.setActiveTool({ type: b.magicframe });
+					return;
+				}
+				V("ai", "tool-select (existing selection)", "d2c");
+				let n;
+				if (t) n = t;
+				else {
+					let [t, r, i, a] = En(e);
+					n = ar({
+						...g,
+						x: t - 50,
+						y: r - 50,
+						width: i - t + 100,
+						height: a - r + 100,
+						opacity: 100,
+						locked: !1
+					}), this.scene.insertElement(n);
+					for (let t of e) this.scene.mutateElement(t, { frameId: n.id });
+					this.setState({ selectedElementIds: { [n.id]: !0 } });
+				}
+				this.#k(n, "upstream");
+			}
+		}, this.#j = ({ type: e }) => {
+			this.updateEditorAtom(Ra, {
+				swapPreviewOnAlt: !0,
+				colorPickerType: e === "stroke" ? "elementStroke" : "elementBackground",
+				onSelect: (t, n) => {
+					let r = e === "background" && n.altKey || e === "stroke" && !n.altKey;
+					!this.scene.getSelectedElements(this.state).length || this.state.activeTool.type !== "selection" ? r ? this.syncActionResult({
+						appState: {
+							...this.state,
+							currentItemStrokeColor: t
+						},
+						captureUpdate: B.IMMEDIATELY
+					}) : this.syncActionResult({
+						appState: {
+							...this.state,
+							currentItemBackgroundColor: t
+						},
+						captureUpdate: B.IMMEDIATELY
+					}) : this.updateScene({
+						elements: this.scene.getElementsIncludingDeleted().map((e) => this.state.selectedElementIds[e.id] ? L(e, { [r ? "strokeColor" : "backgroundColor"]: t }) : e),
+						captureUpdate: B.IMMEDIATELY
+					});
+				},
+				keepOpenOnAlt: !1
+			});
+		}, this.dismissLinearEditor = () => {
+			setTimeout(() => {
+				this.state.selectedLinearElement?.isEditing && this.setState({ selectedLinearElement: {
+					...this.state.selectedLinearElement,
+					isEditing: !1
+				} });
+			});
+		}, this.syncActionResult = q((e) => {
+			if (this.unmounted || e === !1) return;
+			this.#r.scheduleAction(e.captureUpdate);
+			let t = !1, n = null;
+			if (e.elements && (this.scene.replaceAllElements(e.elements), t = !0), e.files && (this.#oe(e.files, e.replaceFiles), this.#ft()), e.appState || n || this.state.contextMenu) {
+				let r = e?.appState?.viewModeEnabled || !1, i = e?.appState?.zenModeEnabled || !1, a = e?.appState?.theme || this.props.theme || re.LIGHT, o = e?.appState?.name ?? this.state.name, s = e?.appState?.errorMessage ?? this.state.errorMessage;
+				this.props.viewModeEnabled !== void 0 && (r = this.props.viewModeEnabled), this.props.zenModeEnabled !== void 0 && (i = this.props.zenModeEnabled), n = e.appState?.editingTextElement || null, e.elements && n && e.elements.forEach((e) => {
+					n?.id === e.id && n !== e && zn(e) && P(e) && (n = e);
+				}), n?.isDeleted && (n = null), this.setState((t) => {
+					let c = e.appState || {};
+					return {
+						...t,
+						...c,
+						contextMenu: null,
+						editingTextElement: n,
+						viewModeEnabled: r,
+						zenModeEnabled: i,
+						theme: a,
+						name: o,
+						errorMessage: s
+					};
+				}), t = !0;
+			}
+			t || this.scene.triggerUpdate();
+		}), this.#M = q(() => {
+			lo = !1, this.setState({ isBindingEnabled: !0 });
+		}), this.#N = () => {
+			this.#M();
+		}, this.#P = (e) => {
+			e.preventDefault();
+		}, this.#F = () => {
+			this.#i.clear();
+		}, this.#I = () => {
+			this.#r.clear();
+		}, this.#L = q((e) => {
+			this.scene.replaceAllElements([]), this.setState((t) => ({
+				...Dr(),
+				isLoading: e?.resetLoadingState ? !1 : t.isLoading,
+				theme: this.state.theme
+			})), this.#I(), this.#F();
+		}), this.#R = async () => {
+			"launchQueue" in window && "LaunchParams" in window && window.launchQueue.setConsumer(async (e) => {
+				if (!e.files.length) return;
+				let t = e.files[0], n = await t.getFile();
+				this.loadFileToCanvas(new File([n], n.name || "", { type: n.type }), t);
+			}), this.props.theme && this.setState({ theme: this.props.theme }), this.state.isLoading || this.setState({ isLoading: !0 });
+			let e = null;
+			try {
+				e = typeof this.props.initialData == "function" ? await this.props.initialData() || null : await this.props.initialData || null, e?.libraryItems && this.library.updateLibrary({
+					libraryItems: e.libraryItems,
+					merge: !0
+				}).catch((e) => {
+					console.error(e);
+				});
+			} catch (t) {
+				console.error(t), e = { appState: { errorMessage: t.message || "Encountered an error during importing or restoring scene data" } };
+			}
+			let t = ni(e?.elements, null, {
+				repairBindings: !0,
+				deleteInvisibleElements: !0
+			}), n = ti(e?.appState, null), r = n.activeTool;
+			n.preferredSelectionTool.initialized || (n.preferredSelectionTool = {
+				type: this.editorInterface.formFactor === "phone" ? "lasso" : "selection",
+				initialized: !0
+			}), n = {
+				...n,
+				theme: this.props.theme || n.theme,
+				openSidebar: n?.openSidebar || this.state.openSidebar,
+				activeTool: r.type === "image" || r.type === "lasso" || r.type === "selection" ? {
+					...r,
+					type: n.preferredSelectionTool.type
+				} : n.activeTool,
+				isLoading: !1,
+				toast: this.state.toast
+			}, e?.scrollToContent && (n = {
+				...n,
+				...qr(t, {
+					...n,
+					width: this.state.width,
+					height: this.state.height,
+					offsetTop: this.state.offsetTop,
+					offsetLeft: this.state.offsetLeft
+				})
+			}), this.#I(), this.#F(), this.syncActionResult({
+				elements: t,
+				appState: n,
+				files: e?.files,
+				captureUpdate: B.NEVER
+			}), this.#H(), this.fonts.loadSceneFonts().then((e) => {
+				this.fonts.onLoaded(e);
+			}), Yn(window.location.href) && this.scrollToContent(window.location.href, { animate: !1 });
+		}, this.#z = (e, t) => this.props.UIOptions.getFormFactor?.(e, t) ?? ue(e, t), this.refreshEditorInterface = () => {
+			let e = this.rootElement;
+			if (!e) return;
+			let { width: t, height: n } = e.getBoundingClientRect(), r = me(), i = ce(typeof navigator < "u" ? navigator.userAgent : ""), a = this.props.UIOptions.dockedSidebarBreakpoint == null ? se : this.props.UIOptions.dockedSidebarBreakpoint, o = Ye(this.editorInterface, {
+				desktopUIMode: r ?? this.editorInterface.desktopUIMode,
+				formFactor: this.#z(t, n),
+				userAgent: i,
+				canFitSidebar: t > a,
+				isLandscape: t > n
+			});
+			this.editorInterface = o, this.#B(o);
+		}, this.#B = (e) => {
+			let t = le(e);
+			if (t === this.#e) return;
+			let n = this.#e;
+			this.#e = t, n !== "full" && t === "full" && this.setState((e) => ({ preferredSelectionTool: {
+				type: "selection",
+				initialized: !0
+			} }));
+		}, this.#V = (e) => {
+			let t = he(e);
+			this.editorInterface = Ye(this.editorInterface, { desktopUIMode: t }), this.#B(this.editorInterface);
+		}, this.#U = (e) => {
+			let { key: t, value: n } = e ?? {};
+			t !== "draw" && (n ? this.setState({ theme: re.DARK }) : this.setState({ theme: re.LIGHT }));
+		}, this.#W = q(() => {
+			this.scene.getElementsIncludingDeleted().forEach((e) => sn.delete(e)), this.refreshEditorInterface(), this.#Ot(), this.setState({});
+		}), this.#G = () => {
+			!document.fullscreenElement && this.state.activeEmbeddable?.state === "active" && this.setState({ activeEmbeddable: null });
+		}, this.#J = ({ atLeastOneVisibleElement: e, scrollBars: t, elementsMap: n }) => {
+			t && (po = t);
+			let r = this.state.editingTextElement ? !1 : !e && n.size > 0;
+			this.state.scrolledOutside !== r && this.setState({ scrolledOutside: r }), this.#pt();
+		}, this.#Y = je(() => {
+			let { offsetTop: e, offsetLeft: t } = this.#kt();
+			this.setState((n) => n.offsetLeft === t && n.offsetTop === e ? null : {
+				offsetTop: e,
+				offsetLeft: t
+			});
+		}, 100), this.#X = q((e) => {
+			!this.rootElement?.contains?.(document.activeElement) || We(e.target) || (this.actionManager.executeAction(Bi, "keyboard", e), e.preventDefault(), e.stopPropagation());
+		}), this.#Z = q((e) => {
+			!this.rootElement?.contains?.(document.activeElement) || We(e.target) || (this.actionManager.executeAction(Li, "keyboard", e), e.preventDefault(), e.stopPropagation());
+		}), this.#$ = (e) => {
+			if (fe && e.preventDefault(), !oo) {
+				oo = !0, e.touches.length === 1 && (co = {
+					x: e.touches[0].clientX,
+					y: e.touches[0].clientY
+				}), clearTimeout(so), so = window.setTimeout(yo.#Q, 300);
+				return;
+			}
+			if (oo && e.touches.length === 1 && co) {
+				let t = e.touches[0];
+				Oe(S(t.clientX, t.clientY), S(co.x, co.y)) <= 35 && (this.lassoTrail.endPath(), this.#ye(), this.#Oe({
+					clientX: t.clientX,
+					clientY: t.clientY
+				})), oo = !1, clearTimeout(so);
+			}
+			e.touches.length === 2 && this.setState({
+				selectedElementIds: F({}, this.state),
+				activeEmbeddable: null
+			});
+		}, this.#ee = (e) => {
+			this.#Ie(), e.touches.length > 0 ? this.setState({
+				previousSelectedElementIds: {},
+				selectedElementIds: F(this.state.previousSelectedElementIds, this.state)
+			}) : $.pointers.clear();
+		}, this.pasteFromClipboard = q(async (e) => {
+			let t = !!ho, n = document.activeElement, r = this.rootElement?.contains?.(n);
+			if (e && !r) return;
+			let i = document.elementFromPoint(this.lastViewportPosition.x, this.lastViewportPosition.y);
+			if (e && (!(i instanceof HTMLCanvasElement) || We(n))) return;
+			let a = await vi(e), o = a.getFiles(), s = await _i(a, t);
+			if (this.props.onPaste) try {
+				if (await this.props.onPaste(s, e) === !1) return;
+			} catch (e) {
+				console.error(e);
+			}
+			await this.#te(s, o, t), this.setActiveTool({ type: this.state.preferredSelectionTool.type }, !0), e?.preventDefault?.();
+		}), this.addElementsFromPasteOrLibrary = (e) => {
+			let t = ni(e.elements, null, { deleteInvisibleElements: !0 }), [n, r, i, a] = En(t), o = Me(n, i) / 2, s = Me(r, a) / 2, { x: c, y: l } = O({
+				clientX: typeof e.position == "object" ? e.position.clientX : e.position === "cursor" ? this.lastViewportPosition.x : this.state.width / 2 + this.state.offsetLeft,
+				clientY: typeof e.position == "object" ? e.position.clientY : e.position === "cursor" ? this.lastViewportPosition.y : this.state.height / 2 + this.state.offsetTop
+			}, this.state), [u, d] = C(c - o, l - s, this.getEffectiveGridSize()), { duplicatedElements: f } = Hn({
+				type: "everything",
+				elements: t.map((e) => L(e, {
+					x: e.x + u - n,
+					y: e.y + d - r
+				})),
+				randomizeSeed: !e.retainSeed
+			}), p = this.scene.getElementsIncludingDeleted(), m = [...p, ...f];
+			m = this.props.onDuplicate?.(m, p) || m, wn(m, Ae(f));
+			let h = this.#ke({
+				x: c,
+				y: l
+			});
+			if (h) {
+				let e = qt(f, h);
+				Gt(m, e, h, this.state);
+			}
+			this.scene.replaceAllElements(m), f.forEach((e) => {
+				P(e) && ct(e) && Lt(e, Ft(e, this.scene.getElementsMapIncludingDeleted()), this.scene);
+			}), pe && ei.loadElementsFonts(f).then((e) => {
+				this.fonts.onLoaded(e);
+			}), e.files && this.#oe(e.files);
+			let g = bt(f);
+			this.#r.scheduleCapture(), this.setState({
+				...this.state,
+				openSidebar: this.state.openSidebar && this.editorInterface.canFitSidebar ? this.state.openSidebar : null,
+				...I({
+					editingGroupId: null,
+					selectedElementIds: g.reduce((e, t) => (ct(t) || (e[t.id] = !0), e), {})
+				}, this.scene.getNonDeletedElements(), this.state, this)
+			}, () => {
+				e.files && this.#ft();
+			}), this.setActiveTool({ type: this.state.preferredSelectionTool.type }, !0), e.fitToContent && this.scrollToContent(f, {
+				fitToContent: !0,
+				canvasOffsets: this.getEditorUIOffsets()
+			});
+		}, this.setAppState = (e, t) => {
+			this.setState(e, t);
+		}, this.removePointer = (e) => {
+			Q && this.#Ie(), $.pointers.delete(e.pointerId);
+		}, this.toggleLock = (e = "ui") => {
+			this.state.activeTool.locked || V("toolbar", "toggleLock", `${e} (${this.editorInterface.formFactor === "phone" ? "mobile" : "desktop"})`), this.setState((e) => ({ activeTool: {
+				...e.activeTool,
+				...D(this.state, e.activeTool.locked ? { type: this.state.preferredSelectionTool.type } : e.activeTool),
+				locked: !e.activeTool.locked
+			} }));
+		}, this.updateFrameRendering = (e) => {
+			this.setState((t) => {
+				let n = typeof e == "function" ? e(t.frameRendering) : e;
+				return { frameRendering: {
+					enabled: n?.enabled ?? t.frameRendering.enabled,
+					clip: n?.clip ?? t.frameRendering.clip,
+					name: n?.name ?? t.frameRendering.name,
+					outline: n?.outline ?? t.frameRendering.outline
+				} };
+			});
+		}, this.togglePenMode = (e) => {
+			this.setState((t) => ({
+				penMode: e ?? !t.penMode,
+				penDetected: !0
+			}));
+		}, this.onHandToolToggle = () => {
+			this.actionManager.executeAction(Di);
+		}, this.zoomCanvas = (e) => {
+			this.setState({ ...Ei({
+				viewportX: this.state.width / 2 + this.state.offsetLeft,
+				viewportY: this.state.height / 2 + this.state.offsetTop,
+				nextZoom: Kr(e)
+			}, this.state) });
+		}, this.#ie = null, this.scrollToContent = (e = this.scene.getNonDeletedElements(), t) => {
+			if (typeof e == "string") {
+				let n;
+				if (n = Yn(e) ? Xn(e) : e, n) {
+					let r = this.scene.getElementsFromId(n);
+					r?.length ? this.scrollToContent(r, {
+						fitToContent: t?.fitToContent ?? !0,
+						animate: t?.animate ?? !0
+					}) : Yn(e) && this.setState({ toast: {
+						message: H("elementLink.notFound"),
+						duration: 3e3,
+						closable: !0
+					} });
+				}
+				return;
+			}
+			this.#ie?.();
+			let n = Array.isArray(e) ? e : [e], r = this.state.zoom, i = this.state.scrollX, a = this.state.scrollY;
+			if (t?.fitToContent || t?.fitToViewport) {
+				let { appState: e } = Oi({
+					canvasOffsets: t.canvasOffsets,
+					targetElements: n,
+					appState: this.state,
+					fitToViewport: !!t?.fitToViewport,
+					viewportZoomFactor: t?.viewportZoomFactor,
+					minZoom: t?.minZoom,
+					maxZoom: t?.maxZoom
+				});
+				r = e.zoom, i = e.scrollX, a = e.scrollY;
+			} else {
+				let e = qr(n, this.state);
+				i = e.scrollX, a = e.scrollY;
+			}
+			if (t?.animate) {
+				let e = this.state.scrollX, n = this.state.scrollY, o = this.state.zoom.value, s = Pe({
+					fromValues: {
+						scrollX: e,
+						scrollY: n,
+						zoom: o
+					},
+					toValues: {
+						scrollX: i,
+						scrollY: a,
+						zoom: r.value
+					},
+					interpolateValue: (e, t, n, r) => {
+						if (r === "zoom") return e * (t / e) ** +Ne(n);
+					},
+					onStep: ({ scrollX: e, scrollY: t, zoom: n }) => {
+						this.setState({
+							scrollX: e,
+							scrollY: t,
+							zoom: { value: n }
+						});
+					},
+					onStart: () => {
+						this.setState({ shouldCacheIgnoreZoom: !0 });
+					},
+					onEnd: () => {
+						this.setState({ shouldCacheIgnoreZoom: !1 });
+					},
+					onCancel: () => {
+						this.setState({ shouldCacheIgnoreZoom: !1 });
+					},
+					duration: t?.duration ?? 500
+				});
+				this.#ie = () => {
+					s(), this.#ie = null;
+				};
+			} else this.setState({
+				scrollX: i,
+				scrollY: a,
+				zoom: r
+			});
+		}, this.#ae = (e) => {
+			this.#ie?.(), this.setState(e);
+		}, this.setToast = (e) => {
+			this.setState({ toast: e });
+		}, this.restoreFileFromShare = async () => {
+			try {
+				let e = await caches.open("web-share-target"), t = await e.match("shared-file");
+				if (t) {
+					let n = await t.blob(), r = new File([n], n.name || "", { type: n.type });
+					this.loadFileToCanvas(r, null), await e.delete("shared-file"), window.history.replaceState(null, s, window.location.pathname);
+				}
+			} catch (e) {
+				this.setState({ errorMessage: e.message });
+			}
+		}, this.addFiles = q((e) => {
+			let { addedFiles: t } = this.#oe(e);
+			this.#H(t), this.scene.triggerUpdate(), this.#ft();
+		}), this.#oe = (e, t = !1) => {
+			let n = t ? {} : { ...this.files }, r = {}, i = Array.isArray(e) ? e : Object.values(e);
+			for (let e of i) if (!n[e.id] && (r[e.id] = e, n[e.id] = e, e.mimeType === v.svg)) try {
+				let t = ci(hr(ai(e.dataURL)), v.svg);
+				e.dataURL !== t && (e.version = (e.version ?? 1) + 1, e.dataURL = t);
+			} catch (e) {
+				console.error(e);
+			}
+			return this.files = n, { addedFiles: r };
+		}, this.updateScene = q((e) => {
+			let { elements: t, appState: n, collaborators: r, captureUpdate: i } = e;
+			if (i) {
+				let e = t || void 0, r = n ? Gn({
+					...this.#r.snapshot.appState,
+					...n
+				}) : void 0;
+				this.#r.scheduleMicroAction({
+					action: i,
+					elements: e,
+					appState: r
+				});
+			}
+			n && this.setState(n), t && this.scene.replaceAllElements(t), r && this.setState({ collaborators: r });
+		}), this.applyDeltas = (e, t) => {
+			let n = Wn.squash(...e), r = { ...this.state }, i = new Map(this.scene.getElementsMapIncludingDeleted());
+			return Wn.applyTo(n, i, r, t);
+		}, this.mutateElement = (e, t, n = !0) => this.scene.mutateElement(e, t, {
+			informMutation: n,
+			isDragging: !1
+		}), this.#se = (e) => {
+			e === !0 ? this.scene.triggerUpdate() : this.setState({});
+		}, this.toggleSidebar = ({ name: e, tab: t, force: n }) => {
+			let r;
+			r = ao(n) ? this.state.openSidebar?.name === e && this.state.openSidebar?.tab === t ? null : e : n ? e : null;
+			let i = r ? { name: r } : null;
+			return i && t && (i.tab = t), this.setState({ openSidebar: i }), !!r;
+		}, this.#ce = q((e) => {
+			this.lastViewportPosition.x = e.clientX, this.lastViewportPosition.y = e.clientY;
+		}), this.getEditorUIOffsets = () => {
+			let e = this.rootElement?.querySelector?.(".App-toolbar")?.getBoundingClientRect?.()?.bottom ?? 0, t = this.rootElement?.querySelector?.(".sidebar")?.getBoundingClientRect?.(), n = this.rootElement?.querySelector?.(".App-menu__left")?.getBoundingClientRect?.();
+			return Ur().rtl ? {
+				top: e + 16,
+				right: Math.max(this.state.width - (n?.left ?? this.state.width), 0) + 16,
+				bottom: 16,
+				left: Math.max(t?.right ?? 0, 0) + 16
+			} : {
+				top: e + 16,
+				right: Math.max(this.state.width - (t?.left ?? this.state.width) + 16, 0),
+				bottom: 16,
+				left: Math.max(n?.right ?? 0, 0) + 16
+			};
+		}, this.#le = q((e) => {
+			if ("Proxy" in window && (!e.shiftKey && /^[A-Z]$/.test(e.key) || e.shiftKey && /^[a-z]$/.test(e.key)) && (e = new Proxy(e, { get(t, n) {
+				let r = t[n];
+				return typeof r == "function" ? r.bind(t) : n === "key" ? e.shiftKey ? t.key.toUpperCase() : t.key.toLowerCase() : r;
+			} })), !ze(e.target)) {
+				if ((e.key === x.ESCAPE || e.key === x.ENTER) && this.state.croppingElementId) {
+					this.#De();
+					return;
+				}
+				let t = St(this.scene.getNonDeletedElementsMap(), this.state);
+				if (t.length === 1 && M(t[0]) && e.key === x.ENTER) {
+					this.#Ee(t[0]);
+					return;
+				}
+				if (e.key === x.ESCAPE) this.updateEditorAtom(Pa, null);
+				else if (e.key === x.TAB && (document.activeElement === this.rootElement || document.activeElement?.classList?.contains?.(l.CONVERT_ELEMENT_TYPE_POPUP))) {
+					e.preventDefault();
+					let n = Ia(t);
+					Vr.get(Pa)?.type === "panel" && Fa(this, {
+						conversionType: n,
+						direction: e.shiftKey ? "left" : "right"
+					}) && this.#r.scheduleCapture(), n && this.updateEditorAtom(Pa, { type: "panel" });
+				}
+				if (e.key === x.ESCAPE && this.flowChartCreator.isCreatingChart) {
+					this.flowChartCreator.clear(), this.#se(!0);
+					return;
+				}
+				let n = ye(e.key);
+				if (e[x.CTRL_OR_CMD] && n && !e.shiftKey) {
+					e.preventDefault();
+					let t = St(this.scene.getNonDeletedElementsMap(), this.state);
+					t.length === 1 && ut(t[0]) && this.flowChartCreator.createNodes(t[0], this.state, pr(e.key), this.scene), this.flowChartCreator.pendingNodes?.length && !jn(this.flowChartCreator.pendingNodes, this.canvas.width / window.devicePixelRatio, this.canvas.height / window.devicePixelRatio, {
+						offsetLeft: this.state.offsetLeft,
+						offsetTop: this.state.offsetTop,
+						scrollX: this.state.scrollX,
+						scrollY: this.state.scrollY,
+						zoom: this.state.zoom
+					}, this.scene.getNonDeletedElementsMap(), this.getEditorUIOffsets()) && this.scrollToContent(this.flowChartCreator.pendingNodes, {
+						animate: !0,
+						duration: 300,
+						fitToContent: !0,
+						canvasOffsets: this.getEditorUIOffsets()
+					});
+					return;
+				}
+				if (e.altKey) {
+					let t = St(this.scene.getNonDeletedElementsMap(), this.state);
+					if (t.length === 1 && n) {
+						e.preventDefault();
+						let n = this.#u.exploreByDirection(t[0], this.scene.getNonDeletedElementsMap(), pr(e.key));
+						if (n) {
+							this.setState((e) => ({ selectedElementIds: F({ [n]: !0 }, e) }));
+							let e = this.scene.getNonDeletedElementsMap().get(n);
+							e && !jn([e], this.canvas.width / window.devicePixelRatio, this.canvas.height / window.devicePixelRatio, {
+								offsetLeft: this.state.offsetLeft,
+								offsetTop: this.state.offsetTop,
+								scrollX: this.state.scrollX,
+								scrollY: this.state.scrollY,
+								zoom: this.state.zoom
+							}, this.scene.getNonDeletedElementsMap(), this.getEditorUIOffsets()) && this.scrollToContent(e, {
+								animate: !0,
+								duration: 300,
+								canvasOffsets: this.getEditorUIOffsets()
+							});
+						}
+						return;
+					}
+				}
+			}
+			if (e[x.CTRL_OR_CMD] && e.key === x.P && !e.shiftKey && !e.altKey) {
+				this.setToast({ message: H("commandPalette.shortcutHint", { shortcut: ca("commandPalette") }) }), e.preventDefault();
+				return;
+			}
+			if (e[x.CTRL_OR_CMD] && e.key.toLowerCase() === x.V && (ho = e.shiftKey, clearTimeout(go), go = window.setTimeout(() => {
+				ho = !1;
+			}, 100)), e[x.CTRL_OR_CMD] && We(e.target) && (e.code === ve.MINUS || e.code === ve.EQUAL)) {
+				e.preventDefault();
+				return;
+			}
+			if (We(e.target) && e.key !== x.ESCAPE || ye(e.key) && ze(e.target)) return;
+			if (e.key === x.QUESTION_MARK) {
+				this.setState({ openDialog: { name: "help" } });
+				return;
+			} else if (e.key.toLowerCase() === x.E && e.shiftKey && e[x.CTRL_OR_CMD]) {
+				e.preventDefault(), this.setState({ openDialog: { name: "imageExport" } });
+				return;
+			}
+			if (e.key === x.PAGE_UP || e.key === x.PAGE_DOWN) {
+				let t = (e.shiftKey ? this.state.width : this.state.height) / this.state.zoom.value;
+				e.key === x.PAGE_DOWN && (t = -t), e.shiftKey ? this.#ae((e) => ({ scrollX: e.scrollX + t })) : this.#ae((e) => ({ scrollY: e.scrollY + t }));
+			}
+			if (this.state.openDialog?.name === "elementLinkSelector" || (e.key === x.ALT && (T("COMPLEX_BINDINGS") ? this.#d() : Rn({
+				app: this,
+				event: e
+			})), this.actionManager.handleKeyDown(e)) || this.state.viewModeEnabled) return;
+			if (e[x.CTRL_OR_CMD] && this.state.isBindingEnabled && (T("COMPLEX_BINDINGS") && this.#f(), Z(() => {
+				this.setState({ isBindingEnabled: !1 });
+			}), Rn({
+				app: this,
+				event: e
+			})), ye(e.key)) {
+				let t = this.scene.getSelectedElements({
+					selectedElementIds: this.state.selectedElementIds,
+					includeBoundTextElement: !0,
+					includeElementsInFrames: !0
+				}), n = /* @__PURE__ */ new Set();
+				t.filter((e) => k(e)).filter((e) => {
+					let n = e.startBinding && !t.some((t) => t.id === e.startBinding?.elementId), r = e.endBinding && !t.some((t) => t.id === e.endBinding?.elementId);
+					return n || r;
+				}).forEach((e) => n.add(e.id)), t = t.filter((e) => !n.has(e.id));
+				let r = this.getEffectiveGridSize() && (e.shiftKey ? 1 : this.getEffectiveGridSize()) || (e.shiftKey ? 5 : 1), i = 0, a = 0;
+				e.key === x.ARROW_LEFT ? i = -r : e.key === x.ARROW_RIGHT ? i = r : e.key === x.ARROW_UP ? a = -r : e.key === x.ARROW_DOWN && (a = r), t.forEach((e) => {
+					this.scene.mutateElement(e, {
+						x: e.x + i,
+						y: e.y + a
+					}, {
+						informMutation: !1,
+						isDragging: !1
+					}), Sn(e, this.scene, { simultaneouslyUpdated: t });
+				}), this.scene.triggerUpdate(), e.preventDefault();
+			} else if (e.key === x.ENTER) {
+				let t = this.scene.getSelectedElements(this.state);
+				if (t.length === 1) {
+					let n = t[0];
+					if (e[x.CTRL_OR_CMD] || mt(n)) N(n) && (!this.state.selectedLinearElement?.isEditing || this.state.selectedLinearElement.elementId !== n.id) && (this.#r.scheduleCapture(), A(n) || this.actionManager.executeAction(Zi));
+					else if (P(n) || It(n)) {
+						let t;
+						P(n) || (t = n);
+						let r = Pt(n, this.state, this.scene.getNonDeletedElementsMap()), i = r.x, a = r.y;
+						this.#Te({
+							sceneX: i,
+							sceneY: a,
+							container: t
+						}), e.preventDefault();
+						return;
+					} else j(n) && this.setState({ editingFrame: n.id });
+				}
+			} else if (!e.ctrlKey && !e.altKey && !e.metaKey && !this.state.newElement && !this.state.selectionElement && !this.state.selectedElementsAreBeingDragged) {
+				let t = za(e.key, this);
+				t ? (this.state.activeTool.type !== t && V("toolbar", t, `keyboard (${this.editorInterface.formFactor === "phone" ? "mobile" : "desktop"})`), t === "arrow" && this.state.activeTool.type === "arrow" && this.setState((e) => ({ currentItemArrowType: e.currentItemArrowType === c.sharp ? c.round : e.currentItemArrowType === c.round ? c.elbow : c.sharp })), this.setActiveTool({ type: t }), e.stopPropagation()) : e.key === x.Q && (this.toggleLock("keyboard"), e.stopPropagation());
+			}
+			if (e.key === x.SPACE && $.pointers.size === 0 && (lo = !0, W(this.interactiveCanvas, u.GRAB), e.preventDefault()), (e.key === x.G || e.key === x.S) && !e.altKey && !e[x.CTRL_OR_CMD]) {
+				let t = this.scene.getSelectedElements(this.state);
+				if (this.state.activeTool.type === "selection" && !t.length) return;
+				e.key === x.G && (tt(this.state.activeTool.type) || t.some((e) => tt(e.type))) && (this.setState({ openPopup: "elementBackground" }), e.stopPropagation()), e.key === x.S && (this.setState({ openPopup: "elementStroke" }), e.stopPropagation());
+			}
+			if (!e[x.CTRL_OR_CMD] && e.shiftKey && e.key.toLowerCase() === x.F) {
+				let t = this.scene.getSelectedElements(this.state);
+				if (this.state.activeTool.type === "selection" && !t.length) return;
+				(this.state.activeTool.type === "text" || t.find((e) => P(e) || Nt(e, this.scene.getNonDeletedElementsMap()))) && (e.preventDefault(), this.setState({ openPopup: "fontFamily" }));
+			}
+			if (e.key === x.K && !e.altKey && !e[x.CTRL_OR_CMD]) {
+				this.state.activeTool.type === "laser" ? this.setActiveTool({ type: this.state.preferredSelectionTool.type }) : this.setActiveTool({ type: "laser" });
+				return;
+			}
+			e[x.CTRL_OR_CMD] && (e.key === x.BACKSPACE || e.key === x.DELETE) && this.updateEditorAtom(Aa, "clearCanvas");
+			let t = e.key.toLocaleLowerCase(), n = t === x.S && e.shiftKey, r = e.key === x.I || t === x.G && e.shiftKey;
+			(n || r) && this.#j({ type: n ? "stroke" : "background" });
+		}), this.#ue = q((e) => {
+			if (e.key === x.SPACE && (this.state.viewModeEnabled || this.state.openDialog?.name === "elementLinkSelector" ? W(this.interactiveCanvas, u.GRAB) : Be(this.state.activeTool.type) ? U(this.interactiveCanvas) : (G(this.interactiveCanvas, this.state), this.setState({
+				selectedElementIds: F({}, this.state),
+				selectedGroupIds: {},
+				editingGroupId: null,
+				activeEmbeddable: null
+			})), lo = !1), e.key === x.ALT && Rn({
+				app: this,
+				event: e
+			}), (e.key === x.ALT && this.state.bindMode === "skip" || !e[x.CTRL_OR_CMD] && !yn(this.state)) && (this.setState({ bindMode: "orbit" }), this.lastPointerMoveEvent && T("COMPLEX_BINDINGS"))) {
+				let e = O({
+					clientX: this.lastPointerMoveEvent.clientX,
+					clientY: this.lastPointerMoveEvent.clientY
+				}, this.state), t = R(S(e.x, e.y), this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap());
+				if (this.state.selectedLinearElement) {
+					let e = z.getElement(this.state.selectedLinearElement.elementId, this.scene.getNonDeletedElementsMap());
+					k(e) && this.#m(e, t);
+				}
+			}
+			if (!e[x.CTRL_OR_CMD] && !this.state.isBindingEnabled && (Z(() => {
+				this.setState({ isBindingEnabled: !0 });
+			}), Rn({
+				app: this,
+				event: e
+			})), ye(e.key)) {
+				gn(this.scene.getSelectedElements(this.state).filter(at), this.scene, this.state);
+				let e = this.scene.getNonDeletedElementsMap();
+				this.scene.getSelectedElements(this.state).filter(_t).forEach((t) => {
+					t.startBinding && this.scene.mutateElement(t, { startBinding: {
+						...t.startBinding,
+						..._n(t, e.get(t.startBinding.elementId), "start", e)
+					} }), t.endBinding && this.scene.mutateElement(t, { endBinding: {
+						...t.endBinding,
+						..._n(t, e.get(t.endBinding.elementId), "end", e)
+					} });
+				}), this.setState({ suggestedBinding: null });
+			}
+			if (e.altKey || this.#u.isExploring && (this.#u.clear(), this.syncActionResult({ captureUpdate: B.IMMEDIATELY })), !e[x.CTRL_OR_CMD] && this.flowChartCreator.isCreatingChart) {
+				this.flowChartCreator.pendingNodes?.length && this.scene.insertElements(this.flowChartCreator.pendingNodes);
+				let e = this.flowChartCreator.pendingNodes?.[0];
+				e && (this.setState((t) => ({ selectedElementIds: F({ [e.id]: !0 }, t) })), jn([e], this.canvas.width / window.devicePixelRatio, this.canvas.height / window.devicePixelRatio, {
+					offsetLeft: this.state.offsetLeft,
+					offsetTop: this.state.offsetTop,
+					scrollX: this.state.scrollX,
+					scrollY: this.state.scrollY,
+					zoom: this.state.zoom
+				}, this.scene.getNonDeletedElementsMap(), this.getEditorUIOffsets()) || this.scrollToContent(e, {
+					animate: !0,
+					duration: 300,
+					canvasOffsets: this.getEditorUIOffsets()
+				})), this.flowChartCreator.clear(), this.syncActionResult({ captureUpdate: B.IMMEDIATELY });
+			}
+		}), this.#de = (e) => this.props.UIOptions.tools?.[e] !== !1, this.setActiveTool = (e, t = !1) => {
+			if (!this.#de(e.type)) {
+				console.warn(`"${e.type}" tool is disabled via "UIOptions.canvasActions.tools.${e.type}"`);
+				return;
+			}
+			let n = D(this.state, e);
+			n.type === "hand" ? W(this.interactiveCanvas, u.GRAB) : lo || G(this.interactiveCanvas, {
+				...this.state,
+				activeTool: n
+			}), Ue(document.activeElement) && this.focusContainer(), ht(n.type) || this.setState({ suggestedBinding: null }), n.type === "image" && this.#lt(), this.setState((e) => {
+				let r = {
+					snapLines: e.snapLines.length ? [] : e.snapLines,
+					originSnapOffset: null,
+					activeEmbeddable: null,
+					selectedLinearElement: Be(n.type) ? e.selectedLinearElement : null
+				};
+				return n.type === "freedraw" && this.#r.scheduleCapture(), n.type === "lasso" ? {
+					...e,
+					...r,
+					activeTool: n,
+					...t ? {} : {
+						selectedElementIds: F({}, e),
+						selectedGroupIds: F({}, e),
+						editingGroupId: null,
+						multiElement: null
+					}
+				} : n.type === "selection" ? {
+					...e,
+					...r,
+					activeTool: n
+				} : {
+					...e,
+					...r,
+					activeTool: n,
+					selectedElementIds: F({}, e),
+					selectedGroupIds: F({}, e),
+					editingGroupId: null,
+					multiElement: null
+				};
+			});
+		}, this.setOpenDialog = (e) => {
+			this.setState({ openDialog: e });
+		}, this.#fe = (e) => {
+			W(this.interactiveCanvas, e);
+		}, this.#pe = () => {
+			U(this.interactiveCanvas);
+		}, this.#me = () => $.pointers.size >= 2, this.getName = () => this.state.name || this.props.name || `${H("labels.untitled")}-${Fe()}`, this.#he = q((e) => {
+			e.preventDefault(), this.#me() && this.setState({
+				selectedElementIds: F({}, this.state),
+				activeEmbeddable: null
+			}), $.initialScale = this.state.zoom.value;
+		}), this.#ge = q((e) => {
+			if (e.preventDefault(), this.#me()) return;
+			let t = $.initialScale;
+			t && this.setState((n) => ({ ...Ei({
+				viewportX: this.lastViewportPosition.x,
+				viewportY: this.lastViewportPosition.y,
+				nextZoom: Kr(t * e.scale)
+			}, n) }));
+		}), this.#_e = q((e) => {
+			e.preventDefault(), this.#me() && this.setState({
+				previousSelectedElementIds: {},
+				selectedElementIds: F(this.state.previousSelectedElementIds, this.state)
+			}), $.initialScale = null;
+		}), this.#Te = ({ sceneX: e, sceneY: t, insertAtParentCenter: n = !0, container: r, autoEdit: i = !0 }) => {
+			let a = !1, o = n && this.#Tt(e, t, this.state, r);
+			r && o && (Nt(r, this.scene.getNonDeletedElementsMap()) || (a = !0));
+			let s = null, c = this.scene.getSelectedElements(this.state);
+			s = c.length === 1 ? P(c[0]) ? c[0] : r ? Nt(c[0], this.scene.getNonDeletedElementsMap()) : this.#be(e, t) : this.#be(e, t);
+			let l = s?.fontFamily || this.state.currentItemFontFamily, u = s?.lineHeight || _e(l), d = this.state.currentItemFontSize;
+			if (!s && a && r && !at(r)) {
+				let n = Et(Ie({
+					fontSize: d,
+					fontFamily: l
+				}), u), i = Tt(d, u), a = Math.max(r.height, i), s = Math.max(r.width, n);
+				this.scene.mutateElement(r, {
+					height: a,
+					width: s
+				}), e = r.x + s / 2, t = r.y + a / 2, o &&= this.#Tt(e, t, this.state, r);
+			}
+			let f = this.#ke({
+				x: e,
+				y: t
+			}), p = s || or({
+				x: o ? o.elementCenterX : e,
+				y: o ? o.elementCenterY : t,
+				strokeColor: this.state.currentItemStrokeColor,
+				backgroundColor: this.state.currentItemBackgroundColor,
+				fillStyle: this.state.currentItemFillStyle,
+				strokeWidth: this.state.currentItemStrokeWidth,
+				strokeStyle: this.state.currentItemStrokeStyle,
+				roughness: this.state.currentItemRoughness,
+				opacity: this.state.currentItemOpacity,
+				text: "",
+				fontSize: d,
+				fontFamily: l,
+				textAlign: o ? "center" : this.state.currentItemTextAlign,
+				verticalAlign: o ? ie.MIDDLE : "top",
+				containerId: a ? r?.id : void 0,
+				groupIds: r?.groupIds ?? [],
+				lineHeight: u,
+				angle: r ? at(r) ? 0 : r.angle : 0,
+				frameId: f ? f.id : null
+			});
+			if (!s && a && r && this.scene.mutateElement(r, { boundElements: (r.boundElements || []).concat({
+				type: "text",
+				id: p.id
+			}) }), this.setState({ editingTextElement: p }), !s) if (r && a) {
+				let e = this.scene.getElementIndex(r.id);
+				this.scene.insertElementAtIndex(p, e + 1);
+			} else this.scene.insertElement(p);
+			i || s || r ? this.#ve(p, { isExistingElement: !!s }) : this.setState({
+				newElement: p,
+				multiElement: null
+			});
+		}, this.#Ee = (e) => {
+			this.#r.scheduleCapture(), this.setState({ croppingElementId: e.id });
+		}, this.#De = () => {
+			this.state.croppingElementId && (this.#r.scheduleCapture(), this.setState({ croppingElementId: null }));
+		}, this.#Oe = (e) => {
+			if (this.state.multiElement || this.state.activeTool.type !== this.state.preferredSelectionTool.type) return;
+			let t = this.scene.getSelectedElements(this.state), { x: n, y: r } = O(e, this.state);
+			if (t.length === 1 && N(t[0])) {
+				let i = t[0];
+				if ((e[x.CTRL_OR_CMD] && _t(i) || mt(i)) && (!this.state.selectedLinearElement?.isEditing || this.state.selectedLinearElement.elementId !== i.id)) {
+					this.actionManager.executeAction(Zi);
+					return;
+				} else if (this.state.selectedLinearElement && A(t[0])) {
+					let e = z.getSegmentMidpointHitCoords(this.state.selectedLinearElement, {
+						x: n,
+						y: r
+					}, this.state, this.scene.getNonDeletedElementsMap()), i = e ? z.getSegmentMidPointIndex(this.state.selectedLinearElement, this.state, e, this.scene.getNonDeletedElementsMap()) : -1;
+					if (i && i > -1) {
+						this.#r.scheduleCapture(), z.deleteFixedSegment(t[0], this.scene, i);
+						let a = z.getSegmentMidpointHitCoords({
+							...this.state.selectedLinearElement,
+							segmentMidPointHoveredCoords: null
+						}, {
+							x: n,
+							y: r
+						}, this.state, this.scene.getNonDeletedElementsMap()), o = a ? z.getSegmentMidPointIndex(this.state.selectedLinearElement, this.state, a, this.scene.getNonDeletedElementsMap()) : null;
+						this.setState({ selectedLinearElement: {
+							...this.state.selectedLinearElement,
+							initialState: {
+								...this.state.selectedLinearElement.initialState,
+								segmentMidpoint: {
+									index: o,
+									value: e,
+									added: !1
+								}
+							},
+							segmentMidPointHoveredCoords: a
+						} });
+						return;
+					}
+				} else if (this.state.selectedLinearElement?.isEditing && this.state.selectedLinearElement.elementId === i.id && mt(i)) return;
+			}
+			if (t.length === 1 && M(t[0])) {
+				this.#Ee(t[0]);
+				return;
+			}
+			if (U(this.interactiveCanvas), Vt(this.state).length > 0) {
+				let e = this.#xe(n, r), t = e && Bt(e, this.state.selectedGroupIds);
+				if (t) {
+					this.#r.scheduleCapture(), this.setState((n) => ({
+						...n,
+						...I({
+							editingGroupId: t,
+							selectedElementIds: { [e.id]: !0 }
+						}, this.scene.getNonDeletedElements(), n, this)
+					}));
+					return;
+				}
+			}
+			if (U(this.interactiveCanvas), !e[x.CTRL_OR_CMD] && !this.state.viewModeEnabled) {
+				let t = this.#xe(n, r);
+				if (ft(t)) {
+					this.setState({ activeEmbeddable: {
+						element: t,
+						state: "active"
+					} });
+					return;
+				}
+				if (!this.state.selectedLinearElement?.isEditing) {
+					let t = this.#we(n, r);
+					if (t && (it(t) || !o(t.backgroundColor) || pn({
+						point: S(n, r),
+						element: t,
+						elementsMap: this.scene.getNonDeletedElementsMap(),
+						threshold: this.getElementHitThreshold(t)
+					}))) {
+						let e = Pt(t, this.state, this.scene.getNonDeletedElementsMap());
+						n = e.x, r = e.y;
+					}
+					this.#Te({
+						sceneX: n,
+						sceneY: r,
+						insertAtParentCenter: !e.altKey,
+						container: t
+					});
+				}
+			}
+		}, this.#ke = (e) => {
+			let t = this.scene.getNonDeletedElementsMap(), n = this.scene.getNonDeletedFramesLikes().filter((n) => !n.locked && en(e, n, t));
+			return n.length ? n[n.length - 1] : null;
+		}, this.#Ae = (e) => {
+			this.#Et(e.clientX, e.clientY, this.state.cursorButton), this.lastPointerMoveEvent = e.nativeEvent;
+			let t = O(e, this.state), { x: n, y: r } = t;
+			this.lastPointerMoveCoords = {
+				x: n,
+				y: r
+			}, $.pointers.has(e.pointerId) && $.pointers.set(e.pointerId, {
+				x: e.clientX,
+				y: e.clientY
+			});
+			let i = $.initialScale;
+			if ($.pointers.size === 2 && $.lastCenter && i && $.initialDistance) {
+				let e = pa($.pointers), t = e.x - $.lastCenter.x, n = e.y - $.lastCenter.y;
+				$.lastCenter = e;
+				let r = ma(Array.from($.pointers.values())), a = this.state.activeTool.type === "freedraw" && this.state.penMode ? 1 : r / $.initialDistance, o = a ? Kr(i * a) : this.state.zoom.value;
+				this.setState((r) => {
+					let i = Ei({
+						viewportX: e.x,
+						viewportY: e.y,
+						nextZoom: o
+					}, r);
+					return this.#ae({
+						zoom: i.zoom,
+						scrollX: i.scrollX + t / o * 2,
+						scrollY: i.scrollY + n / o * 2,
+						shouldCacheIgnoreZoom: !0
+					}), null;
+				}), this.#Dt();
+			} else $.lastCenter = $.initialDistance = $.initialScale = null;
+			if (lo || uo || fo || kr(this.state)) return;
+			let a = ya(po, e.clientX - this.state.offsetLeft, e.clientY - this.state.offsetTop).isOverEither;
+			if (!this.state.newElement && !this.state.selectionElement && !this.state.selectedElementsAreBeingDragged && !this.state.multiElement && (a ? U(this.interactiveCanvas) : G(this.interactiveCanvas, this.state)), !this.state.newElement && Ca(this.state.activeTool.type)) {
+				let { originOffset: t, snapLines: i } = xa(this.scene.getNonDeletedElements(), this, {
+					x: n,
+					y: r
+				}, e, this.scene.getNonDeletedElementsMap());
+				this.setState((e) => {
+					let n = Xe(e.snapLines, i), r = e.originSnapOffset ? Xe(e.originSnapOffset, t) : t;
+					return e.snapLines === n && e.originSnapOffset === r ? null : {
+						snapLines: n,
+						originSnapOffset: r
+					};
+				});
+			} else !this.state.newElement && !this.state.selectedElementsAreBeingDragged && !this.state.selectionElement && this.setState((e) => e.snapLines.length ? { snapLines: [] } : null);
+			if (this.state.selectedLinearElement?.isEditing && !this.state.selectedLinearElement.isDragging) {
+				let t = this.state.newElement ? null : z.handlePointerMoveInEditMode(e, n, r, this);
+				t && t !== this.state.selectedLinearElement && Z(() => {
+					this.setState({ selectedLinearElement: t });
+				});
+			}
+			if (st(this.state.activeTool.type)) {
+				let { newElement: e } = this.state;
+				if (!e && yn(this.state)) {
+					let e = R(S(n, r), this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap(), bn(this.state.zoom));
+					e ? this.setState({ suggestedBinding: e }) : this.state.suggestedBinding && this.setState({ suggestedBinding: null });
+				}
+			}
+			if (this.state.multiElement && this.state.selectedLinearElement) {
+				let { multiElement: t, selectedLinearElement: i } = this.state, { x: a, y: o, points: s } = t, c = s[s.length - 1], { lastCommittedPoint: l } = i;
+				if (G(this.interactiveCanvas, this.state), c === l) at(this.state.newElement) && yn(this.state) && R(S(n, r), this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap(), bn(this.state.zoom)) ? (this.actionManager.executeAction(K, "ui", {
+					event: e.nativeEvent,
+					sceneCoords: {
+						x: n,
+						y: r
+					}
+				}), this.setState({
+					suggestedBinding: null,
+					startBoundElement: null
+				}), this.state.activeTool.locked || (U(this.interactiveCanvas), this.setState((e) => ({
+					newElement: null,
+					activeTool: D(this.state, { type: this.state.preferredSelectionTool.type }),
+					selectedElementIds: F({
+						...e.selectedElementIds,
+						[t.id]: !0
+					}, e),
+					selectedLinearElement: new z(t, this.scene.getNonDeletedElementsMap())
+				})))) : Oe(S(n - a, r - o), c) >= 8 ? (this.scene.mutateElement(t, { points: [...s, S(n - a, r - o)] }, {
+					informMutation: !1,
+					isDragging: !1
+				}), E(this.state.selectedLinearElement?.initialState, "initialState must be set"), this.setState({ selectedLinearElement: {
+					...this.state.selectedLinearElement,
+					lastCommittedPoint: s[s.length - 1],
+					selectedPointsIndices: [t.points.length - 1],
+					initialState: {
+						...this.state.selectedLinearElement.initialState,
+						lastClickedPoint: t.points.length - 1
+					}
+				} })) : W(this.interactiveCanvas, u.POINTER);
+				else if (s.length > 2 && l && Oe(S(n - a, r - o), l) < 8) W(this.interactiveCanvas, u.POINTER), this.scene.mutateElement(t, { points: s.slice(0, -1) }, {
+					informMutation: !1,
+					isDragging: !1
+				}), this.setState({ selectedLinearElement: {
+					...i,
+					selectedPointsIndices: i.selectedPointsIndices?.includes?.(t.points.length) ? [...i.selectedPointsIndices.filter((e) => e !== t.points.length && e !== t.points.length - 1), t.points.length - 1] : i.selectedPointsIndices,
+					lastCommittedPoint: t.points[t.points.length - 1],
+					initialState: {
+						...i.initialState,
+						lastClickedPoint: t.points.length - 1
+					}
+				} });
+				else {
+					ln(s, this.state.zoom.value) && W(this.interactiveCanvas, u.POINTER);
+					let i = this.scene.getNonDeletedElementsMap();
+					if (_t(t)) {
+						let e = R(S(n, r), this.scene.getNonDeletedElements(), i);
+						T("COMPLEX_BINDINGS") && this.#m(t, e);
+					}
+					E(this.state.selectedLinearElement, "Expected selectedLinearElement to be set to operate on a linear element");
+					let a = z.handlePointerMove(e.nativeEvent, this, n, r, this.state.selectedLinearElement);
+					a && this.setState(a);
+				}
+				return;
+			}
+			if (this.state.activeTool.type === "arrow") {
+				let e = R(S(n, r), this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap(), bn(this.state.zoom));
+				e && !mn(S(n, r), e, this.scene.getNonDeletedElementsMap()) && this.setState({ suggestedBinding: e });
+			}
+			if (e.buttons || this.state.activeTool.type !== "selection" && this.state.activeTool.type !== "lasso" && this.state.activeTool.type !== "text" && this.state.activeTool.type !== "eraser") return;
+			let o = this.scene.getNonDeletedElements(), s = this.scene.getSelectedElements(this.state);
+			if (s.length === 1 && !a && !this.state.selectedLinearElement?.isEditing) {
+				if (this.state.selectedLinearElement && this.handleHoverSelectedLinearElement(this.state.selectedLinearElement, n, r), (!this.state.selectedLinearElement || this.state.selectedLinearElement.hoverPointIndex === -1) && this.state.openDialog?.name !== "elementLinkSelector" && !(s.length === 1 && A(s[0])) && !(N(s[0]) && (this.editorInterface.userAgent.isMobileDevice || s[0].points.length === 2))) {
+					let t = Cr(o, this.state, n, r, this.state.zoom, e.pointerType, this.scene.getNonDeletedElementsMap(), this.editorInterface);
+					if (t && t.transformHandleType) {
+						W(this.interactiveCanvas, Sr(t));
+						return;
+					}
+				}
+			} else if (s.length > 1 && !a && this.state.openDialog?.name !== "elementLinkSelector") {
+				let t = wr(En(s), n, r, this.state.zoom, e.pointerType, this.editorInterface);
+				if (t) {
+					W(this.interactiveCanvas, Sr({ transformHandleType: t }));
+					return;
+				}
+			}
+			let c = this.#xe(n, r, {
+				preferSelected: !0,
+				includeLockedElements: !0
+			}), l = null;
+			l = c && c.locked ? null : c, !Or(this.state) && (this.state.activeTool.type === "text" ? W(this.interactiveCanvas, P(l) ? u.TEXT : u.CROSSHAIR) : this.state.viewModeEnabled ? W(this.interactiveCanvas, u.GRAB) : this.state.openDialog?.name === "elementLinkSelector" || a || e[x.CTRL_OR_CMD] ? W(this.interactiveCanvas, u.AUTO) : (l || this.#We(t, s)) && !l?.locked && (l && ft(l) && this.#v(l, e, n, r) ? (W(this.interactiveCanvas, u.POINTER), this.setState({ activeEmbeddable: {
+				element: l,
+				state: "hover"
+			} })) : (!l || !A(l) || !(l.startBinding || l.endBinding)) && ((this.state.activeTool.type !== "lasso" || s.length > 0) && W(this.interactiveCanvas, u.MOVE), this.state.activeEmbeddable?.state === "hover" && this.setState({ activeEmbeddable: null }))), this.state.selectedLinearElement && this.handleHoverSelectedLinearElement(this.state.selectedLinearElement, n, r), this.state.openDialog?.name === "elementLinkSelector" && l ? this.setState((e) => ({ hoveredElementIds: Xe(e.hoveredElementIds, I({
+				editingGroupId: e.editingGroupId,
+				selectedElementIds: { [l.id]: !0 }
+			}, this.scene.getNonDeletedElements(), e, this).selectedElementIds) })) : this.state.openDialog?.name === "elementLinkSelector" && !l && this.setState((e) => ({ hoveredElementIds: Xe(e.hoveredElementIds, {}) })));
+		}, this.#je = (e, t) => {
+			let n = this.eraserTrail.addPointToPath(t.x, t.y, e.altKey);
+			this.#l = new Set(n), this.#se();
+		}, this.#Me = (e) => {
+			mo = !0;
+		}, this.handleHoverSelectedLinearElement = (e, t, n) => {
+			let r = this.scene.getNonDeletedElementsMap(), i = z.getElement(e.elementId, r);
+			if (i) if (this.state.selectedLinearElement) {
+				let a = -1, o = null;
+				pn({
+					point: S(t, n),
+					element: i,
+					elementsMap: r,
+					threshold: this.getElementHitThreshold(i)
+				}) ? (a = z.getPointIndexUnderCursor(i, r, this.state.zoom, t, n), o = z.getSegmentMidpointHitCoords(e, {
+					x: t,
+					y: n
+				}, this.state, this.scene.getNonDeletedElementsMap()), (A(i) ? a === 0 || a === i.points.length - 1 : a >= 0) || o ? W(this.interactiveCanvas, u.POINTER) : this.#Ce(t, n, i) && (!A(i) || !(i.startBinding || i.endBinding)) && (this.state.activeTool.type !== "lasso" || Object.keys(this.state.selectedElementIds).length > 0) && W(this.interactiveCanvas, u.MOVE)) : this.#Ce(t, n, i) && (!A(i) || !(i.startBinding || i.endBinding)) && (this.state.activeTool.type !== "lasso" || Object.keys(this.state.selectedElementIds).length > 0) && W(this.interactiveCanvas, u.MOVE), this.state.selectedLinearElement.hoverPointIndex !== a && this.setState({ selectedLinearElement: {
+					...this.state.selectedLinearElement,
+					hoverPointIndex: a
+				} }), z.arePointsEqual(this.state.selectedLinearElement.segmentMidPointHoveredCoords, o) || this.setState({ selectedLinearElement: {
+					...this.state.selectedLinearElement,
+					segmentMidPointHoveredCoords: o
+				} });
+				let s = null, c = i;
+				(c.startBinding || c.endBinding) && (s = Fn(i, t, n, this.scene, this.state)), this.state.selectedLinearElement.hoveredFocusPointBinding !== s && this.setState({ selectedLinearElement: {
+					...this.state.selectedLinearElement,
+					isDragging: !1,
+					hoveredFocusPointBinding: s
+				} }), s && W(this.interactiveCanvas, u.POINTER);
+			} else W(this.interactiveCanvas, u.AUTO);
+		}, this.#Ne = (e) => {
+			let { x: t, y: n } = O(e, this.state);
+			this.lastPointerMoveCoords = {
+				x: t,
+				y: n
+			};
+			let r = e.target;
+			if (r.setPointerCapture && r.setPointerCapture(e.pointerId), this.#Le(e.nativeEvent), this.state.searchMatches && (this.setState((e) => ({ searchMatches: e.searchMatches && {
+				focusedId: null,
+				matches: e.searchMatches.matches.map((e) => ({
+					...e,
+					focus: !1
+				}))
+			} })), this.updateEditorAtom(Ba, null)), Vr.get(Pa) && this.updateEditorAtom(Pa, null), this.state.contextMenu && this.setState({ contextMenu: null }), this.state.snapLines && this.setAppState({ snapLines: [] }), this.state.openPopup && this.setState({ openPopup: null }), this.#Re(e), e.pointerType === "touch" && this.state.newElement && this.state.newElement.type === "freedraw") {
+				let e = this.state.newElement;
+				this.updateScene({
+					...e.points.length < 10 ? { elements: this.scene.getElementsIncludingDeleted().filter((t) => t.id !== e.id) } : {},
+					appState: {
+						newElement: null,
+						editingTextElement: null,
+						startBoundElement: null,
+						suggestedBinding: null,
+						selectedElementIds: F(Object.keys(this.state.selectedElementIds).filter((t) => t !== e.id).reduce((e, t) => (e[t] = this.state.selectedElementIds[t], e), {}), this.state)
+					},
+					captureUpdate: this.state.openDialog?.name === "elementLinkSelector" ? B.EVENTUALLY : B.NEVER
+				});
+				return;
+			}
+			let i = document.getSelection();
+			if (i?.anchorNode && i.removeAllRanges(), this.#Fe(e), !this.state.penDetected && e.pointerType === "pen" && this.setState((e) => ({
+				penMode: !0,
+				penDetected: !0
+			})), !this.editorInterface.isTouchScreen && ["pen", "touch"].includes(e.pointerType) && (this.editorInterface = Ye(this.editorInterface, { isTouchScreen: !0 })), uo || (this.lastPointerDownEvent = e, this.handleCanvasPanUsingWheelOrSpaceDrag(e))) return;
+			if (this.setState({
+				lastPointerDownWith: e.pointerType,
+				cursorButton: "down"
+			}), this.#Et(e.clientX, e.clientY, "down"), e.button === y.ERASER && this.state.activeTool.type !== b.eraser) {
+				this.setState({ activeTool: D(this.state, {
+					type: b.eraser,
+					lastActiveToolBeforeEraser: this.state.activeTool
+				}) }, () => {
+					this.#Ne(e);
+					let t = () => {
+						n(), r?.(), Or(this.state) && this.setState({ activeTool: D(this.state, {
+							...this.state.activeTool.lastActiveTool || { type: b.selection },
+							lastActiveToolBeforeEraser: null
+						}) });
+					}, n = w(window, h.POINTER_UP, t, { once: !0 }), r;
+					requestAnimationFrame(() => {
+						r = this.missingPointerEventCleanupEmitter.once(t);
+					});
+				});
+				return;
+			}
+			if (e.button !== y.MAIN && e.button !== y.TOUCH && e.button !== y.ERASER || $.pointers.size > 1) return;
+			let a = this.#ze(e);
+			if (this.setState({ selectedElementsAreBeingDragged: !1 }), this.#Be(e, a) || (this.#Ve(), this.#mt(e), this.#He(e, a)) || !(!this.state.penMode || e.pointerType !== "touch" || this.state.activeTool.type === "selection" || this.state.activeTool.type === "lasso" || this.state.activeTool.type === "text" || this.state.activeTool.type === "image")) return;
+			if (this.state.activeTool.type === "lasso") {
+				let t = a.hit.element && this.#Ue(a.hit.element);
+				!a.hit.hasHitCommonBoundingBoxOfSelectedElements && !a.resize.handleType && !t && (this.lassoTrail.startPath(a.origin.x, a.origin.y, e.shiftKey), a.drag.blockDragging = this.editorInterface.formFactor === "desktop"), this.editorInterface.formFactor !== "desktop" && a.hit.element && !t && (this.setState((e) => {
+					let t = {
+						...e.selectedElementIds,
+						[a.hit.element.id]: !0
+					}, n = [];
+					Object.keys(e.selectedElementIds).forEach((e) => {
+						let t = this.scene.getElement(e);
+						t && n.push(t);
+					});
+					let r = a.hit.element;
+					if (j(r)) Qt(n, r.id).forEach((e) => {
+						delete t[e.id];
+					});
+					else if (r.frameId) t[r.frameId] && delete t[r.id];
+					else {
+						let e = r.groupIds, i = new Set(e.flatMap((e) => zt(this.scene.getNonDeletedElements(), e)).filter((e) => j(e)).map((e) => e.id));
+						i.size > 0 && n.forEach((e) => {
+							e.frameId && i.has(e.frameId) && (delete t[e.id], e.groupIds.flatMap((e) => zt(this.scene.getNonDeletedElements(), e)).forEach((e) => {
+								delete t[e.id];
+							}));
+						});
+					}
+					return { ...I({
+						editingGroupId: e.editingGroupId,
+						selectedElementIds: t
+					}, this.scene.getNonDeletedElements(), e, this) };
+				}), a.hit.wasAddedToSelection = !0);
+			} else this.state.activeTool.type === "text" ? this.#Ge(e, a) : this.state.activeTool.type === "arrow" || this.state.activeTool.type === "line" ? this.#Je(e, this.state.activeTool.type, a) : this.state.activeTool.type === "freedraw" ? this.#Ke(e, this.state.activeTool.type, a) : this.state.activeTool.type === "custom" ? G(this.interactiveCanvas, this.state) : this.state.activeTool.type === b.frame || this.state.activeTool.type === b.magicframe ? this.#Ze(a, this.state.activeTool.type) : this.state.activeTool.type === "laser" ? this.laserTrails.startPath(a.lastCoords.x, a.lastCoords.y) : this.state.activeTool.type !== "eraser" && this.state.activeTool.type !== "hand" && this.state.activeTool.type !== "image" && this.#Xe(this.state.activeTool.type, a);
+			this.props?.onPointerDown?.(this.state.activeTool, a), this.onPointerDownEmitter.trigger(this.state.activeTool, a, e), this.state.activeTool.type === "eraser" && this.eraserTrail.startPath(a.lastCoords.x, a.lastCoords.y);
+			let o = this.#nt(a), s = this.#it(a), c = this.#et(a), l = this.#tt(a);
+			this.missingPointerEventCleanupEmitter.once((t) => s(t || e.nativeEvent)), (!this.state.viewModeEnabled || this.state.activeTool.type === "laser") && (window.addEventListener(h.POINTER_MOVE, o), window.addEventListener(h.POINTER_UP, s), window.addEventListener(h.KEYDOWN, c), window.addEventListener(h.KEYUP, l), a.eventListeners.onMove = o, a.eventListeners.onUp = s, a.eventListeners.onKeyUp = l, a.eventListeners.onKeyDown = c);
+		}, this.#Pe = (e) => {
+			T("COMPLEX_BINDINGS") && this.#f(), this.removePointer(e), this.lastPointerUpEvent = e;
+			let t = O({
+				clientX: e.clientX,
+				clientY: e.clientY
+			}, this.state), { x: n, y: r } = t;
+			this.lastPointerMoveCoords = {
+				x: n,
+				y: r
+			};
+			let i = e.timeStamp - (this.lastPointerDownEvent?.timeStamp ?? 0);
+			if (this.editorInterface.formFactor === "phone" && i < 300) {
+				let n = this.#xe(t.x, t.y);
+				if (ft(n) && this.#v(n, e, t.x, t.y)) {
+					this.#_(n);
+					return;
+				}
+			}
+			this.editorInterface.isTouchScreen && this.#xe(t.x, t.y, { includeLockedElements: !0 }), this.state.viewModeEnabled && this.setState({
+				activeEmbeddable: null,
+				selectedElementIds: {}
+			});
+		}, this.#Fe = (e) => {
+			e.pointerType === "touch" && (mo = !1, Q ? mo = !0 : Q = window.setTimeout(() => {
+				Q = 0, mo || this.#yt(e);
+			}, 500));
+		}, this.#Ie = () => {
+			clearTimeout(Q), Q = 0, mo = !1;
+		}, this.#Le = (e) => {
+			vo?.(), this.missingPointerEventCleanupEmitter.trigger(e).clear();
+		}, this.handleCanvasPanUsingWheelOrSpaceDrag = (e) => {
+			if (!($.pointers.size <= 1 && (e.button === y.WHEEL || e.button === y.MAIN && lo || kr(this.state) || this.state.viewModeEnabled))) return !1;
+			uo = !0, this.focusContainer(), this.state.editingTextElement || e.preventDefault();
+			let t = !1, n = ao(window) ? !1 : /Linux/.test(window.navigator.platform);
+			W(this.interactiveCanvas, u.GRABBING);
+			let { clientX: r, clientY: i } = e, a = _a((e) => {
+				let a = r - e.clientX, o = i - e.clientY;
+				if (r = e.clientX, i = e.clientY, n && !t && (Math.abs(a) > 1 || Math.abs(o) > 1)) {
+					t = !0;
+					let e = (t) => {
+						document.body.removeEventListener(h.PASTE, e), t.stopPropagation();
+					}, n = () => {
+						setTimeout(() => {
+							document.body.removeEventListener(h.PASTE, e), window.removeEventListener(h.POINTER_UP, n);
+						}, 100);
+					};
+					document.body.addEventListener(h.PASTE, e), window.addEventListener(h.POINTER_UP, n);
+				}
+				this.#ae({
+					scrollX: this.state.scrollX - a / this.state.zoom.value,
+					scrollY: this.state.scrollY - o / this.state.zoom.value
+				});
+			}), o = q(vo = () => {
+				vo = null, uo = !1, lo || (this.state.viewModeEnabled ? W(this.interactiveCanvas, u.GRAB) : G(this.interactiveCanvas, this.state)), this.setState({ cursorButton: "up" }), this.#Et(e.clientX, e.clientY, "up"), window.removeEventListener(h.POINTER_MOVE, a), window.removeEventListener(h.POINTER_UP, o), window.removeEventListener(h.BLUR, o), a.flush();
+			});
+			return window.addEventListener(h.BLUR, o), window.addEventListener(h.POINTER_MOVE, a, { passive: !0 }), window.addEventListener(h.POINTER_UP, o), !0;
+		}, this.#Ve = () => {
+			Be(this.state.activeTool.type) || this.setState({
+				selectedElementIds: F({}, this.state),
+				selectedGroupIds: {},
+				editingGroupId: null,
+				activeEmbeddable: null
+			});
+		}, this.#He = (e, t) => {
+			if (Be(this.state.activeTool.type)) {
+				let n = this.scene.getNonDeletedElements(), r = this.scene.getNonDeletedElementsMap(), i = this.scene.getSelectedElements(this.state);
+				if (i.length === 1 && !this.state.selectedLinearElement?.isEditing && !A(i[0]) && !(N(i[0]) && (this.editorInterface.userAgent.isMobileDevice || i[0].points.length === 2)) && !(this.state.selectedLinearElement && this.state.selectedLinearElement.hoverPointIndex !== -1)) {
+					let r = Cr(n, this.state, t.origin.x, t.origin.y, this.state.zoom, e.pointerType, this.scene.getNonDeletedElementsMap(), this.editorInterface);
+					r != null && (r.transformHandleType === "rotation" ? (this.setState({ resizingElement: r.element }), t.resize.handleType = r.transformHandleType) : (this.state.croppingElementId || this.setState({ resizingElement: r.element }), t.resize.handleType = r.transformHandleType));
+				} else i.length > 1 && (t.resize.handleType = wr(En(i), t.origin.x, t.origin.y, this.state.zoom, e.pointerType, this.editorInterface));
+				if (t.resize.handleType) t.resize.isResizing = !0, t.resize.offset = Je(yr(t.resize.handleType, i, r, t.origin.x, t.origin.y)), i.length === 1 && N(i[0]) && i[0].points.length === 2 && (t.resize.arrowDirection = vr(t.resize.handleType, i[0]));
+				else {
+					if (this.state.selectedLinearElement) {
+						let n = this.state.selectedLinearElement, r = z.handlePointerDown(e, this, this.#r, t.origin, n, this.scene);
+						if (r.hitElement && (t.hit.element = r.hitElement), r.linearElementEditor && this.setState({ selectedLinearElement: r.linearElementEditor }), r.didAddPoint) return !0;
+						let i = this.scene.getNonDeletedElementsMap(), a = z.getElement(n.elementId, i);
+						if (a && k(a)) {
+							let { hitFocusPoint: e, pointerOffset: r } = In(a, t, i, this.state);
+							if (e) return this.setState({ selectedLinearElement: {
+								...n,
+								hoveredFocusPointBinding: e,
+								draggedFocusPointBinding: e,
+								pointerOffset: r
+							} }), !1;
+						}
+					}
+					let n = this.#Se(t.origin.x, t.origin.y, { includeLockedElements: !0 }), r = n.filter((e) => !e.locked), i = this.#xe(t.origin.x, t.origin.y, { allHitElements: n });
+					(!i || i.id !== this.state.activeLockedId) && this.setState({ activeLockedId: null }), i && i.locked && !r.some((e) => this.state.selectedElementIds[e.id]) ? t.hit.element = null : t.hit.element = t.hit.element ?? this.#xe(t.origin.x, t.origin.y), this.state.croppingElementId && t.hit.element?.id !== this.state.croppingElementId && this.#De(), t.hit.allHitElements = r;
+					let a = t.hit.element, o = t.hit.allHitElements.some((e) => this.#Ue(e));
+					if ((a === null || !o) && !e.shiftKey && !t.hit.hasHitCommonBoundingBoxOfSelectedElements && (!this.state.selectedLinearElement?.isEditing || a && a?.id !== this.state.selectedLinearElement?.elementId) && this.#ht(a), this.state.selectedLinearElement?.isEditing) this.setState((e) => ({
+						selectedLinearElement: e.selectedLinearElement ? {
+							...e.selectedLinearElement,
+							isEditing: !!a && a.id === this.state.selectedLinearElement?.elementId
+						} : null,
+						selectedElementIds: e.selectedLinearElement ? F({ [e.selectedLinearElement.elementId]: !0 }, this.state) : F({}, e)
+					}));
+					else if (a != null) {
+						if (e[x.CTRL_OR_CMD]) return e.altKey ? (this.state.openDialog?.name === "elementLinkSelector" && this.setOpenDialog(null), this.lassoTrail.startPath(t.origin.x, t.origin.y, e.shiftKey), this.setActiveTool({
+							type: "lasso",
+							fromSelection: !0
+						}), !1) : (this.state.selectedElementIds[a.id] || (t.hit.wasAddedToSelection = !0), this.setState((e) => ({
+							...Rt(e, a),
+							previousSelectedElementIds: this.state.selectedElementIds
+						})), !1);
+						this.state.selectedElementIds[a.id] || (this.state.editingGroupId && !Ht(a, this.state.editingGroupId) && this.setState({
+							selectedElementIds: F({}, this.state),
+							selectedGroupIds: {},
+							editingGroupId: null,
+							activeEmbeddable: null
+						}), !o && !t.hit.hasHitCommonBoundingBoxOfSelectedElements && (this.setState((e) => {
+							let t = {
+								...e.selectedElementIds,
+								[a.id]: !0
+							}, n = [];
+							if (Object.keys(e.selectedElementIds).forEach((e) => {
+								let t = this.scene.getElement(e);
+								t && n.push(t);
+							}), j(a)) Qt(n, a.id).forEach((e) => {
+								delete t[e.id];
+							});
+							else if (a.frameId) t[a.frameId] && delete t[a.id];
+							else {
+								let e = a.groupIds, r = new Set(e.flatMap((e) => zt(this.scene.getNonDeletedElements(), e)).filter((e) => j(e)).map((e) => e.id));
+								r.size > 0 && n.forEach((e) => {
+									e.frameId && r.has(e.frameId) && (delete t[e.id], e.groupIds.flatMap((e) => zt(this.scene.getNonDeletedElements(), e)).forEach((e) => {
+										delete t[e.id];
+									}));
+								});
+							}
+							return e.openDialog?.name === "elementLinkSelector" && (a.groupIds.some((t) => e.selectedGroupIds[t]) || (t = { [a.id]: !0 })), { ...I({
+								editingGroupId: e.editingGroupId,
+								selectedElementIds: t
+							}, this.scene.getNonDeletedElements(), e, this) };
+						}), t.hit.wasAddedToSelection = !0));
+					}
+					this.setState({ previousSelectedElementIds: this.state.selectedElementIds });
+				}
+			}
+			return !1;
+		}, this.#Ge = (e, t) => {
+			if (this.state.editingTextElement) return;
+			let n = t.origin.x, r = t.origin.y, i = this.#xe(n, r, { includeBoundTextElement: !0 }), a = this.#we(n, r);
+			it(i) && (a = i, n = i.x + i.width / 2, r = i.y + i.height / 2), this.#Te({
+				sceneX: n,
+				sceneY: r,
+				insertAtParentCenter: !e.altKey,
+				container: a,
+				autoEdit: !1
+			}), U(this.interactiveCanvas), this.state.activeTool.locked || this.setState({ activeTool: D(this.state, { type: this.state.preferredSelectionTool.type }) });
+		}, this.#Ke = (e, t, n) => {
+			let [r, i] = C(n.origin.x, n.origin.y, null), a = this.#ke({
+				x: r,
+				y: i
+			}), o = e.pressure === .5, s = tr({
+				type: t,
+				x: r,
+				y: i,
+				strokeColor: this.state.currentItemStrokeColor,
+				backgroundColor: this.state.currentItemBackgroundColor,
+				fillStyle: this.state.currentItemFillStyle,
+				strokeWidth: this.state.currentItemStrokeWidth,
+				strokeStyle: this.state.currentItemStrokeStyle,
+				roughness: this.state.currentItemRoughness,
+				opacity: this.state.currentItemOpacity,
+				roundness: null,
+				simulatePressure: o,
+				locked: !1,
+				frameId: a ? a.id : null,
+				points: [S(0, 0)],
+				pressures: o ? [] : [e.pressure]
+			});
+			this.scene.insertElement(s), this.setState((e) => {
+				let t = { ...e.selectedElementIds };
+				return delete t[s.id], { selectedElementIds: F(t, e) };
+			});
+			let c = R(S(n.origin.x, n.origin.y), this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap());
+			this.setState({
+				newElement: s,
+				startBoundElement: c,
+				suggestedBinding: null
+			});
+		}, this.insertIframeElement = ({ sceneX: e, sceneY: t, width: n, height: r }) => {
+			let [i, a] = C(e, t, this.lastPointerDownEvent?.[x.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()), o = nr({
+				type: "iframe",
+				x: i,
+				y: a,
+				strokeColor: "transparent",
+				backgroundColor: "transparent",
+				fillStyle: this.state.currentItemFillStyle,
+				strokeWidth: this.state.currentItemStrokeWidth,
+				strokeStyle: this.state.currentItemStrokeStyle,
+				roughness: this.state.currentItemRoughness,
+				roundness: this.#Ye("iframe"),
+				opacity: this.state.currentItemOpacity,
+				locked: !1,
+				width: n,
+				height: r
+			});
+			return this.scene.insertElement(o), o;
+		}, this.insertEmbeddableElement = ({ sceneX: e, sceneY: t, link: n }) => {
+			let [r, i] = C(e, t, this.lastPointerDownEvent?.[x.CTRL_OR_CMD] ? null : this.getEffectiveGridSize());
+			if (!n) return;
+			let a = {
+				w: 560,
+				h: 840
+			}, o = $n({
+				type: "embeddable",
+				x: r,
+				y: i,
+				strokeColor: "transparent",
+				backgroundColor: "transparent",
+				fillStyle: this.state.currentItemFillStyle,
+				strokeWidth: this.state.currentItemStrokeWidth,
+				strokeStyle: this.state.currentItemStrokeStyle,
+				roughness: this.state.currentItemRoughness,
+				roundness: this.#Ye("embeddable"),
+				opacity: this.state.currentItemOpacity,
+				locked: !1,
+				width: a.w,
+				height: a.h,
+				link: n
+			});
+			return this.scene.insertElement(o), o;
+		}, this.#qe = ({ sceneX: e, sceneY: t, addToFrameUnderCursor: n = !0 }) => {
+			let [r, i] = C(e, t, this.lastPointerDownEvent?.[x.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()), a = n ? this.#ke({
+				x: r,
+				y: i
+			}) : null, o = 100 / this.state.zoom.value;
+			return rr({
+				type: "image",
+				strokeColor: this.state.currentItemStrokeColor,
+				backgroundColor: this.state.currentItemBackgroundColor,
+				fillStyle: this.state.currentItemFillStyle,
+				strokeWidth: this.state.currentItemStrokeWidth,
+				strokeStyle: this.state.currentItemStrokeStyle,
+				roughness: this.state.currentItemRoughness,
+				roundness: null,
+				opacity: this.state.currentItemOpacity,
+				locked: !1,
+				frameId: a ? a.id : null,
+				x: r - o / 2,
+				y: i - o / 2,
+				width: o,
+				height: o
+			});
+		}, this.#Je = (e, t, n) => {
+			if (e.ctrlKey && Z(() => {
+				this.setState({ isBindingEnabled: !1 });
+			}), this.state.multiElement) {
+				let { multiElement: t, selectedLinearElement: r } = this.state;
+				if (E(r, "selectedLinearElement is expected to be set"), t.type === "line" && ln(t.points, this.state.zoom.value)) {
+					Z(() => {
+						this.setState({ selectedLinearElement: {
+							...r,
+							lastCommittedPoint: t.points[t.points.length - 1],
+							initialState: {
+								...r.initialState,
+								lastClickedPoint: -1
+							}
+						} });
+					}), this.actionManager.executeAction(K);
+					return;
+				}
+				if (A(t) && t.points.length > 1) {
+					this.actionManager.executeAction(K, "ui", {
+						event: e.nativeEvent,
+						sceneCoords: {
+							x: n.origin.x,
+							y: n.origin.y
+						}
+					});
+					return;
+				}
+				let { x: i, y: a } = t, { lastCommittedPoint: o } = r, s = yn(this.state) && R(S(this.lastPointerMoveCoords?.x ?? i + t.points[t.points.length - 1][0], this.lastPointerMoveCoords?.y ?? a + t.points[t.points.length - 1][1]), this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap());
+				if (k(t) && s || t.points.length > 1 && o && Oe(S(n.origin.x - i, n.origin.y - a), o) < 8) {
+					this.actionManager.executeAction(K, "ui", {
+						event: e.nativeEvent,
+						sceneCoords: {
+							x: n.origin.x,
+							y: n.origin.y
+						}
+					});
+					return;
+				}
+				this.setState((e) => ({ selectedElementIds: F({
+					...e.selectedElementIds,
+					[t.id]: !0
+				}, e) })), W(this.interactiveCanvas, u.POINTER);
+			} else {
+				let [r, i] = C(n.origin.x, n.origin.y, e[x.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()), a = this.#ke({
+					x: r,
+					y: i
+				}), { currentItemStartArrowhead: o, currentItemEndArrowhead: s } = this.state, [l, u] = t === "arrow" ? [o, s] : [null, null], d = t === "arrow" ? Zn({
+					type: t,
+					x: r,
+					y: i,
+					strokeColor: this.state.currentItemStrokeColor,
+					backgroundColor: this.state.currentItemBackgroundColor,
+					fillStyle: this.state.currentItemFillStyle,
+					strokeWidth: this.state.currentItemStrokeWidth,
+					strokeStyle: this.state.currentItemStrokeStyle,
+					roughness: this.state.currentItemRoughness,
+					opacity: this.state.currentItemOpacity,
+					roundness: this.state.currentItemArrowType === c.round ? { type: ne.PROPORTIONAL_RADIUS } : null,
+					startArrowhead: l,
+					endArrowhead: u,
+					locked: !1,
+					frameId: a ? a.id : null,
+					elbowed: this.state.currentItemArrowType === c.elbow,
+					fixedSegments: this.state.currentItemArrowType === c.elbow ? [] : null
+				}) : ir({
+					type: t,
+					x: r,
+					y: i,
+					strokeColor: this.state.currentItemStrokeColor,
+					backgroundColor: this.state.currentItemBackgroundColor,
+					fillStyle: this.state.currentItemFillStyle,
+					strokeWidth: this.state.currentItemStrokeWidth,
+					strokeStyle: this.state.currentItemStrokeStyle,
+					roughness: this.state.currentItemRoughness,
+					opacity: this.state.currentItemOpacity,
+					roundness: this.state.currentItemRoundness === "round" ? { type: ne.PROPORTIONAL_RADIUS } : null,
+					locked: !1,
+					frameId: a ? a.id : null
+				}), f = S(n.origin.x, n.origin.y), p = this.scene.getNonDeletedElementsMap(), m = yn(this.state) ? R(f, this.scene.getNonDeletedElements(), p) : null;
+				this.scene.mutateElement(d, { points: [S(0, 0), S(0, 0)] }), this.scene.insertElement(d), k(d) && hn(d, /* @__PURE__ */ new Map([[0, {
+					point: S(0, 0),
+					isDragging: !1
+				}]]), f[0], f[1], this.scene, this.state, {
+					newArrow: !0,
+					altKey: e.altKey,
+					initialBinding: !0,
+					angleLocked: Se(e.nativeEvent)
+				}), Z(() => {
+					this.setState((e) => {
+						let t = null, r = e.selectedElementIds;
+						if (N(d)) {
+							t = new z(d, this.scene.getNonDeletedElementsMap());
+							let e = d.points.length - 1;
+							t = {
+								...t,
+								selectedPointsIndices: [e],
+								initialState: {
+									...t.initialState,
+									lastClickedPoint: e,
+									origin: S(n.origin.x, n.origin.y)
+								}
+							};
+						}
+						return r = this.state.activeTool.locked ? e.selectedElementIds : F({ [d.id]: !0 }, e), {
+							...e,
+							bindMode: "orbit",
+							newElement: d,
+							startBoundElement: m,
+							suggestedBinding: m || null,
+							selectedElementIds: r,
+							selectedLinearElement: t
+						};
+					});
+				}), k(d) && T("COMPLEX_BINDINGS") && this.#m(d, m);
+			}
+		}, this.#Xe = (e, t) => {
+			let [n, r] = C(t.origin.x, t.origin.y, this.lastPointerDownEvent?.[x.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()), i = this.#ke({
+				x: n,
+				y: r
+			}), a = {
+				x: n,
+				y: r,
+				strokeColor: this.state.currentItemStrokeColor,
+				backgroundColor: this.state.currentItemBackgroundColor,
+				fillStyle: this.state.currentItemFillStyle,
+				strokeWidth: this.state.currentItemStrokeWidth,
+				strokeStyle: this.state.currentItemStrokeStyle,
+				roughness: this.state.currentItemRoughness,
+				opacity: this.state.currentItemOpacity,
+				roundness: this.#Ye(e),
+				locked: !1,
+				frameId: i ? i.id : null
+			}, o;
+			o = e === "embeddable" ? $n({
+				type: "embeddable",
+				...a
+			}) : Qn({
+				type: e,
+				...a
+			}), o.type === "selection" ? this.setState({ selectionElement: o }) : (this.scene.insertElement(o), this.setState({
+				multiElement: null,
+				newElement: o
+			}));
+		}, this.#Ze = (e, t) => {
+			let [n, r] = C(e.origin.x, e.origin.y, this.lastPointerDownEvent?.[x.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()), i = {
+				x: n,
+				y: r,
+				opacity: this.state.currentItemOpacity,
+				locked: !1,
+				...g
+			}, a = t === b.magicframe ? ar(i) : er(i);
+			this.scene.insertElement(a), this.setState({
+				multiElement: null,
+				newElement: a
+			});
+		}, this.#at = () => {
+			this.#l = /* @__PURE__ */ new Set(), this.#se();
+		}, this.#ot = () => {
+			let e = !1;
+			this.#l.forEach((e) => {
+				let t = this.scene.getElement(e);
+				if (k(t)) {
+					if (t.startBinding) {
+						let e = this.scene.getElement(t.startBinding.elementId);
+						Wt(e, this.scene.getElementsMapIncludingDeleted(), { boundElements: e.boundElements.filter((e) => e.id !== t.id) });
+					}
+					if (t.endBinding) {
+						let e = this.scene.getElement(t.endBinding.elementId);
+						Wt(e, this.scene.getElementsMapIncludingDeleted(), { boundElements: e.boundElements.filter((e) => e.id !== t.id) });
+					}
+				} else ot(t) && t.boundElements?.forEach?.((e) => {
+					if (e.type === "arrow") {
+						let n = this.scene.getElement(e.id);
+						n?.startBinding?.elementId === t.id && Wt(n, this.scene.getElementsMapIncludingDeleted(), { startBinding: null }), n?.endBinding?.elementId === t.id && Wt(n, this.scene.getElementsMapIncludingDeleted(), { endBinding: null });
+					}
+				});
+			});
+			let t = this.scene.getElementsIncludingDeleted().map((t) => this.#l.has(t.id) || t.frameId && this.#l.has(t.frameId) || ct(t) && this.#l.has(t.containerId) ? (e = !0, L(t, { isDeleted: !0 })) : t);
+			this.#l = /* @__PURE__ */ new Set(), e && (this.#r.scheduleCapture(), this.scene.replaceAllElements(t));
+		}, this.#st = async (e, t) => {
+			if (!ui(t)) throw Error(H("errors.unsupportedFileType"));
+			let n = t.type;
+			if (W(this.interactiveCanvas, "wait"), n === v.svg) try {
+				t = ii(hr(await t.text()), t.name);
+			} catch (e) {
+				throw console.warn(e), Error(H("errors.svgImageInsertError"));
+			}
+			let r = await (this.props.generateIdForFile?.(t) || oi(t));
+			if (!r) throw console.warn("Couldn't generate file id or the supplied `generateIdForFile` didn't resolve to one."), Error(H("errors.imageInsertError"));
+			if (!this.files[r]?.dataURL) {
+				try {
+					t = await hi(t, { maxWidthOrHeight: f });
+				} catch (e) {
+					console.error("Error trying to resizing image file on insertion", e);
+				}
+				if (t.size > 4194304) throw Error(H("errors.fileTooBig", { maxSize: `${Math.trunc(ee / 1024 / 1024)}MB` }));
+			}
+			let i = this.files[r]?.dataURL || await si(t);
+			return new Promise(async (t, a) => {
+				try {
+					let a = this.#ct(e, r);
+					if (this.#oe([{
+						mimeType: n,
+						id: r,
+						dataURL: i,
+						created: Date.now(),
+						lastRetrieved: Date.now()
+					}]), !this.imageCache.get(r)) {
+						this.#ft();
+						let { erroredFiles: e } = await this.#dt([a]);
+						if (e.size) throw Error("Image cache update resulted with an error.");
+					}
+					let o = await this.imageCache.get(r)?.image;
+					if (o && this.state.newElement?.id !== a.id) {
+						a = this.#ct(e, r);
+						let t = this.#ut(a, o);
+						Object.assign(a, t);
+					}
+					t(a);
+				} catch (e) {
+					console.error(e), a(Error(H("errors.imageInsertError")));
+				}
+			});
+		}, this.#ct = (e, t) => L(this.scene.getElement(e.id) ?? e, { fileId: t }), this.#lt = async () => {
+			try {
+				let { x: e, y: t } = O({
+					clientX: this.state.width / 2 + this.state.offsetLeft,
+					clientY: this.state.height / 2 + this.state.offsetTop
+				}, this.state), n = await $r({
+					description: "Image",
+					extensions: Object.keys(_),
+					multiple: !0
+				});
+				this.#_t(n, e, t);
+			} catch (e) {
+				e.name === "AbortError" ? console.warn(e) : console.error(e), this.setState({
+					newElement: null,
+					activeTool: D(this.state, { type: this.state.preferredSelectionTool.type })
+				}, () => {
+					this.actionManager.executeAction(K);
+				});
+			}
+		}, this.#ut = (e, t) => {
+			let n = Math.max(this.state.height - 120, 160), r = Math.min(n, Math.floor(this.state.height * .5) / this.state.zoom.value), i = Math.min(t.naturalHeight, r), a = i * (t.naturalWidth / t.naturalHeight);
+			return {
+				x: e.x + e.width / 2 - a / 2,
+				y: e.y + e.height / 2 - i / 2,
+				width: a,
+				height: i,
+				crop: null
+			};
+		}, this.#dt = async (e, t = this.files) => {
+			let { updatedFiles: n, erroredFiles: r } = await gr({
+				imageCache: this.imageCache,
+				fileIds: e.map((e) => e.fileId),
+				files: t
+			});
+			return r.size && (this.#r.scheduleAction(B.NEVER), this.scene.replaceAllElements(this.scene.getElementsIncludingDeleted().map((e) => pt(e) && r.has(e.fileId) ? L(e, { status: "error" }) : e))), {
+				updatedFiles: n,
+				erroredFiles: r
+			};
+		}, this.#ft = async (e = mr(this.scene.getNonDeletedElements()), t = this.files) => {
+			let n = e.filter((e) => !e.isDeleted && !this.imageCache.has(e.fileId));
+			if (n.length) {
+				let { updatedFiles: e } = await this.#dt(n, t);
+				if (e.size) for (let t of n) e.has(t.fileId) && sn.delete(t);
+				e.size && this.scene.triggerUpdate();
+			}
+		}, this.#pt = eo(() => {
+			this.#ft();
+		}, 500), this.#mt = (e) => {
+			let t = xn(e);
+			this.state.isBindingEnabled !== t && this.setState({ isBindingEnabled: t });
+		}, this.#gt = (e) => {
+			e === null ? (this.interactiveCanvas?.removeEventListener?.(h.TOUCH_START, this.#$), this.interactiveCanvas?.removeEventListener?.(h.TOUCH_END, this.#ee)) : (this.interactiveCanvas = e, this.interactiveCanvas.addEventListener(h.TOUCH_START, this.#$, { passive: !1 }), this.interactiveCanvas.addEventListener(h.TOUCH_END, this.#ee));
+		}, this.#_t = async (e, t, n) => {
+			let r = 50 / this.state.zoom.value, i = _r(e.map(() => this.#qe({
+				sceneX: t,
+				sceneY: n
+			})), t, n, r);
+			i.forEach((e) => this.scene.insertElement(e));
+			let a = await Promise.all(i.map(async (t, n) => {
+				try {
+					return await this.#st(t, await pi(e[n]));
+				} catch (e) {
+					return this.setState({ errorMessage: e.message || H("errors.imageInsertError") }), L(t, { isDeleted: !0 });
+				}
+			})), o = Ae(a), s = _r(a.filter((e) => !e.isDeleted), t, n, r), c = Ae(s), l = this.scene.getElementsIncludingDeleted().map((e) => c.get(e.id) ?? o.get(e.id) ?? e);
+			this.updateScene({
+				appState: { selectedElementIds: F(Object.fromEntries(s.map((e) => [e.id, !0])), this.state) },
+				elements: l,
+				captureUpdate: B.IMMEDIATELY
+			}), this.setState({}, () => {
+				this.actionManager.executeAction(K);
+			});
+		}, this.#vt = async (e) => {
+			let { x: t, y: n } = O(e, this.state), r = await vi(e), i = r.getFiles();
+			if (i.length === 1) {
+				let { file: e, fileHandle: t } = i[0];
+				if (e && (e.type === v.png || e.type === v.svg)) try {
+					let n = await di(e, this.state, this.scene.getElementsIncludingDeleted(), t);
+					this.syncActionResult({
+						...n,
+						appState: {
+							...n.appState || this.state,
+							isLoading: !1
+						},
+						replaceFiles: !0,
+						captureUpdate: B.IMMEDIATELY
+					});
+					return;
+				} catch (e) {
+					if (e.name !== "EncodingError") throw Error(H("alerts.couldNotLoadInvalidFile"), { cause: e });
+				}
+			}
+			let a = i.map((e) => e.file).filter((e) => ui(e));
+			if (a.length > 0 && this.#de("image")) return this.#_t(a, t, n);
+			let o = r.getData(v.drawlibIds), s = r.getData(v.drawlib);
+			if (o || s) {
+				try {
+					let t = null;
+					if (o) {
+						let { itemIds: e } = JSON.parse(o);
+						t = (await this.library.getLatestLibrary()).filter((t) => e.includes(t.id));
+					} else s && (t = mi(s));
+					t?.length && (t = t.map((e) => ({
+						...e,
+						elements: Hn({
+							type: "everything",
+							elements: e.elements,
+							randomizeSeed: !0
+						}).duplicatedElements
+					})), this.addElementsFromPasteOrLibrary({
+						elements: da(t),
+						position: e,
+						files: null
+					}));
+				} catch (e) {
+					this.setState({ errorMessage: e.message });
+				}
+				return;
+			}
+			if (i.length > 0) {
+				let { file: e, fileHandle: t } = i[0];
+				e && await this.loadFileToCanvas(e, t);
+			}
+			let c = r.findByType(v.text);
+			if (c) {
+				let e = c.value;
+				if (e && lr(e, this.props.validateEmbeddable) && /^(http|https):\/\/[^\s/$.?#].[^\s]*$/.test(e)) {
+					let r = this.insertEmbeddableElement({
+						sceneX: t,
+						sceneY: n,
+						link: $e(e)
+					});
+					r && (this.#r.scheduleCapture(), this.setState({ selectedElementIds: { [r.id]: !0 } }));
+				}
+			}
+		}, this.loadFileToCanvas = async (e, t) => {
+			e = await pi(e);
+			try {
+				let n = this.scene.getElementsIncludingDeleted(), r;
+				try {
+					r = await fi(e, this.state, n, t);
+				} catch (e) {
+					let t = e instanceof Qr;
+					if (t && e.code === "IMAGE_NOT_CONTAINS_SCENE_DATA" && !this.#de("image")) {
+						this.setState({
+							isLoading: !1,
+							errorMessage: H("errors.imageToolNotSupported")
+						});
+						return;
+					}
+					let n = H(t ? "alerts.cannotRestoreFromImage" : "alerts.couldNotLoadInvalidFile");
+					this.setState({
+						isLoading: !1,
+						errorMessage: n
+					});
+				}
+				if (!r) return;
+				r.type === v.draw ? (Cn(n.concat(r.data.elements)), this.#r.scheduleMicroAction({
+					action: B.NEVER,
+					elements: n,
+					appState: void 0
+				}), this.setState({ isLoading: !0 }), this.syncActionResult({
+					...r.data,
+					appState: {
+						...r.data.appState || this.state,
+						isLoading: !1
+					},
+					replaceFiles: !0,
+					captureUpdate: B.IMMEDIATELY
+				})) : r.type === v.drawlib && await this.library.updateLibrary({
+					libraryItems: e,
+					merge: !0,
+					openLibraryMenu: !0
+				}).catch((e) => {
+					console.error(e), this.setState({ errorMessage: H("errors.importLibraryError") });
+				});
+			} catch (e) {
+				this.setState({
+					isLoading: !1,
+					errorMessage: e.message
+				});
+			}
+		}, this.#yt = (e) => {
+			if (e.preventDefault(), ("pointerType" in e.nativeEvent && e.nativeEvent.pointerType === "touch" || "pointerType" in e.nativeEvent && e.nativeEvent.pointerType === "pen" && e.button !== y.SECONDARY) && this.state.activeTool.type !== this.state.preferredSelectionTool.type) return;
+			let { x: t, y: n } = O(e, this.state), r = this.#xe(t, n, {
+				preferSelected: !0,
+				includeLockedElements: !0
+			}), i = this.scene.getSelectedElements(this.state), a = this.#We({
+				x: t,
+				y: n
+			}, i), o = r || a ? "element" : "canvas", { top: s, left: c } = this.rootElement.getBoundingClientRect(), l = e.clientX - c, u = e.clientY - s;
+			V("contextMenu", "openContextMenu", o), this.setState({ ...r && !this.state.selectedElementIds[r.id] ? {
+				...this.state,
+				...I({
+					editingGroupId: this.state.editingGroupId,
+					selectedElementIds: { [r.id]: !0 }
+				}, this.scene.getNonDeletedElements(), this.state, this),
+				selectedLinearElement: N(r) ? new z(r, this.scene.getNonDeletedElementsMap()) : null
+			} : this.state }, () => {
+				this.setState({ contextMenu: {
+					top: u,
+					left: l,
+					items: this.#Ct(o)
+				} });
+			});
+		}, this.#bt = (e, t, n = !0) => {
+			let r = this.state.selectionElement, i = e.lastCoords;
+			if (r && e.boxSelection.hasOccurred && this.state.activeTool.type !== "eraser") {
+				Kn({
+					newElement: r,
+					elementType: this.state.activeTool.type,
+					originX: e.origin.x,
+					originY: e.origin.y,
+					x: i.x,
+					y: i.y,
+					width: Me(e.origin.x, i.x),
+					height: Me(e.origin.y, i.y),
+					shouldMaintainAspectRatio: be(t),
+					shouldResizeFromCenter: !1,
+					scene: this.scene,
+					zoom: this.state.zoom.value,
+					informMutation: !1
+				});
+				return;
+			}
+			let a = this.state.newElement;
+			if (!a) return;
+			let [o, s] = C(i.x, i.y, t[x.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()), c = pt(a) && this.imageCache.get(a.fileId)?.image, l = c && !(c instanceof Promise) ? c.width / c.height : null;
+			this.#Qe(t, [a]);
+			let { snapOffset: u, snapLines: d } = Da(a, this, t, {
+				x: e.originInGrid.x + (this.state.originSnapOffset?.x ?? 0),
+				y: e.originInGrid.y + (this.state.originSnapOffset?.y ?? 0)
+			}, {
+				x: o - e.originInGrid.x,
+				y: s - e.originInGrid.y
+			}, this.scene.getNonDeletedElementsMap());
+			o += u.x, s += u.y, this.setState({ snapLines: d }), k(a) || Kn({
+				newElement: a,
+				elementType: this.state.activeTool.type,
+				originX: e.originInGrid.x,
+				originY: e.originInGrid.y,
+				x: o,
+				y: s,
+				width: Me(e.originInGrid.x, o),
+				height: Me(e.originInGrid.y, s),
+				shouldMaintainAspectRatio: M(a) ? !be(t) : be(t),
+				shouldResizeFromCenter: xe(t),
+				zoom: this.state.zoom.value,
+				scene: this.scene,
+				widthAspectRatio: l,
+				originOffset: this.state.originSnapOffset,
+				informMutation: n
+			}), this.setState({ newElement: a }), (this.state.activeTool.type === b.frame || this.state.activeTool.type === b.magicframe) && this.setState({ elementsToHighlight: Xt(this.scene.getNonDeletedElements(), a, this.state, this.scene.getNonDeletedElementsMap()) });
+		}, this.#xt = (e, t) => {
+			if (!this.state.croppingElementId) return !1;
+			let n = e.resize.handleType, r = e.lastCoords, [i, a] = C(r.x - e.resize.offset.x, r.y - e.resize.offset.y, t[x.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()), o = this.scene.getNonDeletedElementsMap().get(this.state.croppingElementId);
+			if (n && o && M(o)) {
+				let s = e.originalElements.get(o.id), c = pt(o) && this.imageCache.get(o.fileId)?.image;
+				if (s && M(s) && c && !(c instanceof Promise)) {
+					let [l, u] = C(r.x, r.y, t[x.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()), d = {
+						x: l - e.originInGrid.x,
+						y: u - e.originInGrid.y
+					};
+					this.#Qe(t, [o]);
+					let { snapOffset: f, snapLines: p } = Oa([o], [s], this, t, d, n);
+					this.scene.mutateElement(o, nt(o, this.scene.getNonDeletedElementsMap(), n, c.naturalWidth, c.naturalHeight, i + f.x, a + f.y, t.shiftKey ? s.width / s.height : void 0)), Sn(o, this.scene), this.setState({
+						isCropping: n && n !== "rotation",
+						snapLines: p
+					});
+				}
+				return !0;
+			}
+			return !1;
+		}, this.#St = (e, t) => {
+			let n = this.scene.getSelectedElements(this.state), r = n.filter((e) => j(e)), i = e.resize.handleType;
+			if (r.length > 0 && i === "rotation" || n.length === 1 && A(n[0]) || this.state.croppingElementId) return !1;
+			this.setState({
+				isResizing: i && i !== "rotation",
+				isRotating: i === "rotation",
+				activeEmbeddable: null
+			});
+			let a = e.lastCoords, [o, s] = C(a.x - e.resize.offset.x, a.y - e.resize.offset.y, t[x.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()), c = /* @__PURE__ */ new Map();
+			if (r.forEach((e) => {
+				Qt(this.scene.getNonDeletedElements(), e.id).forEach((t) => {
+					c.set(e.id + t.id, {
+						x: t.x - e.x,
+						y: t.y - e.y
+					});
+				});
+			}), !this.state.selectedElementsAreBeingDragged) {
+				let [r, c] = C(a.x, a.y, t[x.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()), l = {
+					x: r - e.originInGrid.x,
+					y: c - e.originInGrid.y
+				}, u = [...e.originalElements.values()];
+				this.#Qe(t, n);
+				let { snapOffset: d, snapLines: f } = Oa(n, St(u, this.state), this, t, l, i);
+				o += d.x, s += d.y, this.setState({ snapLines: f });
+			}
+			if (br(e.originalElements, i, n, this.scene, Se(t), xe(t), n.some((e) => M(e)) ? !be(t) : be(t), o, s, e.resize.center.x, e.resize.center.y)) {
+				let e = /* @__PURE__ */ new Set();
+				return r.forEach((t) => {
+					Xt(this.scene.getNonDeletedElements(), t, this.state, this.scene.getNonDeletedElementsMap()).forEach((t) => e.add(t));
+				}), this.setState({ elementsToHighlight: [...e] }), !0;
+			}
+			return !1;
+		}, this.#Ct = (e) => {
+			let t = [];
+			if (t.push(Ri, zi), e === "canvas") return this.state.viewModeEnabled ? [
+				...t,
+				Ui,
+				Gi,
+				sa,
+				Qi
+			] : [
+				Vi,
+				Y,
+				Ri,
+				zi,
+				Hi,
+				Y,
+				bi,
+				Xi,
+				Y,
+				Ui,
+				Wi,
+				Gi,
+				sa,
+				Qi
+			];
+			if (t.push(Hi), this.state.viewModeEnabled) return [Li, ...t];
+			let n = this.editorInterface.formFactor === "desktop" ? [
+				Y,
+				Ci,
+				xi,
+				wi,
+				Si
+			] : [];
+			return [
+				Y,
+				Bi,
+				Li,
+				Vi,
+				Y,
+				na,
+				ta,
+				ra,
+				Y,
+				$i,
+				Y,
+				...t,
+				Y,
+				Ai,
+				ji,
+				Y,
+				Mi,
+				oa,
+				qi,
+				Ki,
+				Ji,
+				Ni,
+				Y,
+				Pi,
+				...n,
+				Y,
+				Fi,
+				Ii,
+				Y,
+				Zi,
+				Y,
+				ea,
+				Y,
+				Zr,
+				Yi,
+				Y,
+				Yr
+			];
+		}, this.#wt = q((e) => {
+			if (!(e.target instanceof HTMLCanvasElement || e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLIFrameElement || e.target instanceof HTMLElement && e.target.classList.contains(l.FRAME_NAME))) {
+				e[x.CTRL_OR_CMD] && e.preventDefault();
+				return;
+			}
+			if (e.preventDefault(), uo) return;
+			let { deltaX: t, deltaY: n } = e;
+			if (e.metaKey || e.ctrlKey) {
+				let e = Math.sign(n), t = ae * 100, r = Math.abs(n), i = n;
+				r > t && (i = t * e);
+				let a = this.state.zoom.value - i / 100;
+				a += Math.log10(Math.max(1, this.state.zoom.value)) * -e * Math.min(1, r / 20), this.#ae((e) => ({
+					...Ei({
+						viewportX: this.lastViewportPosition.x,
+						viewportY: this.lastViewportPosition.y,
+						nextZoom: Kr(a)
+					}, e),
+					shouldCacheIgnoreZoom: !0
+				})), this.#Dt();
+				return;
+			}
+			if (e.shiftKey) {
+				this.#ae(({ zoom: e, scrollX: r }) => ({ scrollX: r - (n || t) / e.value }));
+				return;
+			}
+			this.#ae(({ zoom: e, scrollX: r, scrollY: i }) => ({
+				scrollX: r - t / e.value,
+				scrollY: i - n / e.value
+			}));
+		}), this.#Et = (e, t, n) => {
+			if (!e || !t) return;
+			let { x: r, y: i } = O({
+				clientX: e,
+				clientY: t
+			}, this.state), a = {
+				x: r,
+				y: i,
+				tool: this.state.activeTool.type === "laser" ? "laser" : "pointer"
+			};
+			this.props.onPointerUpdate?.({
+				pointer: a,
+				button: n,
+				pointersMap: $.pointers
+			});
+		}, this.#Dt = je(() => {
+			this.unmounted || this.setState({ shouldCacheIgnoreZoom: !1 });
+		}, 300), this.#Ot = (e) => {
+			if (this.rootElement) {
+				let { width: t, height: n, left: r, top: i } = this.rootElement.getBoundingClientRect(), { width: a, height: o, offsetTop: s, offsetLeft: c } = this.state;
+				if (t === a && n === o && r === c && i === s) {
+					e && e();
+					return;
+				}
+				this.setState({
+					width: t,
+					height: n,
+					offsetLeft: r,
+					offsetTop: i
+				}, () => {
+					e && e();
+				});
+			}
+		}, this.refresh = () => {
+			this.setState({ ...this.#kt() });
+		}, this.watchState = () => {};
+		let n = Dr(), { drawAPI: i, viewModeEnabled: d = !1, zenModeEnabled: p = !1, gridModeEnabled: m = !1, objectsSnapModeEnabled: oe = !1, theme: de = n.theme, name: Ce = `${H("labels.untitled")}-${Fe()}` } = t;
+		if (this.state = {
+			...n,
+			theme: de,
+			isLoading: !0,
+			...this.#kt(),
+			viewModeEnabled: d,
+			zenModeEnabled: p,
+			objectsSnapModeEnabled: oe,
+			gridModeEnabled: m ?? n.gridModeEnabled,
+			name: Ce,
+			width: window.innerWidth,
+			height: window.innerHeight
+		}, this.refreshEditorInterface(), this.#e = le(this.editorInterface), this.id = Ze(), this.library = new ua(this), this.actionManager = new Er(this.syncActionResult, () => this.state, () => this.scene.getElementsIncludingDeleted(), this), this.scene = new Bn(), this.canvas = document.createElement("canvas"), this.rc = et.canvas(this.canvas), this.renderer = new va(this.scene), this.visibleElements = [], this.#r = new Un(this), this.fonts = new ei(this.scene), this.#i = new Ar(this.#r), i) {
+			let e = {
+				updateScene: this.updateScene,
+				applyDeltas: this.applyDeltas,
+				mutateElement: this.mutateElement,
+				updateLibrary: this.library.updateLibrary,
+				addFiles: this.addFiles,
+				resetScene: this.#L,
+				getSceneElementsIncludingDeleted: this.getSceneElementsIncludingDeleted,
+				getSceneElementsMapIncludingDeleted: this.getSceneElementsMapIncludingDeleted,
+				history: { clear: this.#F },
+				scrollToContent: this.scrollToContent,
+				getSceneElements: this.getSceneElements,
+				getAppState: () => this.state,
+				getFiles: () => this.files,
+				getName: this.getName,
+				registerAction: (e) => {
+					this.actionManager.registerAction(e);
+				},
+				refresh: this.refresh,
+				setToast: this.setToast,
+				id: this.id,
+				setActiveTool: this.setActiveTool,
+				setCursor: this.#fe,
+				resetCursor: this.#pe,
+				getEditorInterface: () => this.editorInterface,
+				updateFrameRendering: this.updateFrameRendering,
+				toggleSidebar: this.toggleSidebar,
+				onChange: (e) => this.onChangeEmitter.on(e),
+				onIncrement: (e) => this.#r.onStoreIncrementEmitter.on(e),
+				onPointerDown: (e) => this.onPointerDownEmitter.on(e),
+				onPointerUp: (e) => this.onPointerUpEmitter.on(e),
+				onScrollChange: (e) => this.onScrollChangeEmitter.on(e)
+			};
+			typeof i == "function" ? i(e) : console.error("drawAPI should be a function!");
+		}
+		this.drawContainerValue = {
+			container: this.rootElement,
+			id: this.id
+		}, this.actionManager.registerAll(Jr), this.actionManager.registerAction(aa(this.#i)), this.actionManager.registerAction(ia(this.#i));
+	}
+	#d() {
+		if (this.state.selectedLinearElement?.initialState && !this.state.selectedLinearElement.initialState.arrowStartIsInside) {
+			E(this.lastPointerMoveCoords, "Missing last pointer move coords when changing bind skip mode for arrow start");
+			let e = this.scene.getNonDeletedElementsMap(), t = R(S(this.lastPointerMoveCoords.x, this.lastPointerMoveCoords.y), this.scene.getNonDeletedElements(), e), n = z.getElement(this.state.selectedLinearElement.elementId, e);
+			n?.startBinding && t?.id === n.startBinding.elementId && this.setState({ selectedLinearElement: {
+				...this.state.selectedLinearElement,
+				initialState: {
+					...this.state.selectedLinearElement.initialState,
+					arrowStartIsInside: !0
+				}
+			} });
+		}
+		if (this.state.bindMode === "orbit" && (this.bindModeHandler &&= (clearTimeout(this.bindModeHandler), null), Z(() => {
+			this.setState({ bindMode: "skip" });
+		}), this.lastPointerMoveCoords && this.state.selectedLinearElement?.selectedPointsIndices && this.state.selectedLinearElement?.selectedPointsIndices?.length)) {
+			let { x: e, y: t } = this.lastPointerMoveCoords, n = this.lastPointerMoveEvent ?? this.lastPointerDownEvent?.nativeEvent;
+			E(n, "Last event must exist");
+			let r = e - this.state.selectedLinearElement.pointerOffset.x, i = t - this.state.selectedLinearElement.pointerOffset.y, a = this.state.multiElement ? z.handlePointerMove(n, this, r, i, this.state.selectedLinearElement) : z.handlePointDragging(n, this, r, i, this.state.selectedLinearElement);
+			a && this.setState(a);
+		}
+	}
+	#f() {
+		this.bindModeHandler &&= (clearTimeout(this.bindModeHandler), null), this.state.bindMode !== "orbit" && setTimeout(() => this.setState({ bindMode: "orbit" }));
+	}
+	#p;
+	#m(e, t) {
+		if (e.isDeleted || A(e)) return;
+		let n = () => {
+			if (this.bindModeHandler = null, E(this.lastPointerMoveCoords, "Expected lastPointerMoveCoords to be set"), !this.state.multiElement) {
+				if (!this.state.selectedLinearElement || !this.state.selectedLinearElement.selectedPointsIndices || !this.state.selectedLinearElement.selectedPointsIndices.length) return;
+				let t = this.state.selectedLinearElement.selectedPointsIndices.includes(0), n = this.state.selectedLinearElement.selectedPointsIndices.includes(e.points.length - 1);
+				if (!t && !n || t && n) return;
+			}
+			let { x: t, y: n } = this.lastPointerMoveCoords, r = R(S(t, n), this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap());
+			if (r && this.state.bindMode !== "skip") {
+				E(this.state.selectedLinearElement?.elementId === e.id, "The selectedLinearElement is expected to not change while a bind mode timeout is ticking");
+				let i = this.state.selectedLinearElement.initialState.arrowStartIsInside || e.startBinding?.elementId === r.id;
+				Z(() => {
+					E(this.state.selectedLinearElement, "this.state.selectedLinearElement must exist"), this.setState({
+						bindMode: "inside",
+						selectedLinearElement: {
+							...this.state.selectedLinearElement,
+							initialState: {
+								...this.state.selectedLinearElement.initialState,
+								arrowStartIsInside: i
+							}
+						}
+					});
+				});
+				let a = this.lastPointerMoveEvent ?? this.lastPointerDownEvent?.nativeEvent;
+				E(a, "Last event must exist");
+				let o = t - this.state.selectedLinearElement.pointerOffset.x, s = n - this.state.selectedLinearElement.pointerOffset.y, c = this.state.multiElement ? z.handlePointerMove(a, this, o, s, this.state.selectedLinearElement) : z.handlePointDragging(a, this, o, s, this.state.selectedLinearElement);
+				c && this.setState(c);
+			}
+		}, r = !1;
+		if (this.state.selectedLinearElement?.selectedPointsIndices) {
+			let n = this.scene.getNonDeletedElementsMap(), i = this.state.selectedLinearElement.selectedPointsIndices.includes(0), a = this.state.selectedLinearElement.selectedPointsIndices.includes(e.points.length - 1), o = i ? t : e.startBinding && n.get(e.startBinding.elementId), s = a ? t : e.endBinding && n.get(e.endBinding.elementId), c = o && On(o, n), l = s && On(s, n);
+			r = !!(c && l && o.id !== s.id && Tn(c, l));
+		}
+		let i = this.state.selectedLinearElement?.selectedPointsIndices?.includes?.(0), a = this.state.selectedLinearElement?.selectedPointsIndices?.includes?.(e.points.length - 1), o = i ? "startBinding" : a ? "endBinding" : null, s = i ? "endBinding" : a ? "startBinding" : null, c = s && e[s]?.mode === "inside" && e[s]?.elementId === t?.id || o && e[o]?.mode === "inside" && t?.id === e[o]?.elementId;
+		o && s && e[o]?.mode === "inside" && t?.id !== e[o]?.elementId && e[s]?.elementId !== e[o]?.elementId && this.scene.mutateElement(e, { [o]: {
+			...e[o],
+			mode: "orbit"
+		} }, {
+			informMutation: !1,
+			isDragging: !0
+		}), !t || this.#p && t.id !== this.#p.id ? (this.bindModeHandler &&= (clearTimeout(this.bindModeHandler), null), this.state.bindMode === "inside" && Z(() => {
+			this.setState({ bindMode: "orbit" });
+		}), this.#p = null) : !this.bindModeHandler && (!this.state.newElement || !e.startBinding || r) && !c && (this.bindModeHandler = setTimeout(n, 700)), this.#p = t;
+	}
+	#h(e, t) {
+		t && this.#a.set(e.id, t);
+	}
+	#g(e) {
+		return this.#a.get(e.id);
+	}
+	#_(e) {
+		this.state.activeEmbeddable?.element === e && this.state.activeEmbeddable?.state === "active" || (setTimeout(() => {
+			this.setState({
+				activeEmbeddable: {
+					element: e,
+					state: "active"
+				},
+				selectedElementIds: { [e.id]: !0 },
+				newElement: null,
+				selectionElement: null
+			});
+		}, 100), !dt(e) && this.#g(e)?.contentWindow);
+	}
+	#v(e, t, n, r) {
+		return e && !t.altKey && !t.shiftKey && !t.metaKey && !t.ctrlKey && (this.state.activeEmbeddable?.element !== e || this.state.activeEmbeddable?.state === "hover" || !this.state.activeEmbeddable) && n >= e.x + e.width / 3 && n <= e.x + 2 * e.width / 3 && r >= e.y + e.height / 3 && r <= e.y + 2 * e.height / 3;
+	}
+	#y;
+	#b;
+	#x() {
+		let e = this.state.zoom.value, t = this.state.width, n = this.state.height;
+		return /* @__PURE__ */ X(Qa, { children: this.scene.getNonDeletedElements().filter((e) => lt(e) && this.#o.get(e.id) === !0 || dt(e)).map((r) => {
+			let { x: i, y: a } = qe({
+				sceneX: r.x,
+				sceneY: r.y
+			}, this.state), o = Mn(r, t, n, this.state, this.scene.getNonDeletedElementsMap()), s = this.#s.has(r.id);
+			if (o && !s && this.#s.add(r.id), !(o || s)) return null;
+			let c;
+			if (dt(r)) {
+				c = null;
+				let e = (r.customData?.generationData ?? this.#D.get(r.id)) || {
+					status: "error",
+					message: "No generation data",
+					code: "ERR_NO_GENERATION_DATA"
+				};
+				if (e.status === "done") {
+					let t = e.html;
+					c = {
+						intrinsicSize: {
+							w: r.width,
+							h: r.height
+						},
+						type: "document",
+						srcdoc: () => t
+					};
+				} else if (e.status === "pending") c = {
+					intrinsicSize: {
+						w: r.width,
+						h: r.height
+					},
+					type: "document",
+					srcdoc: () => cr(`
+                    <style>
+                      html, body {
+                        width: 100%;
+                        height: 100%;
+                        color: ${this.#w ? "white" : "black"};
+                      }
+                      body {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        flex-direction: column;
+                        gap: 1rem;
+                      }
+
+                      .Spinner {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        margin-left: auto;
+                        margin-right: auto;
+                      }
+
+                      .Spinner svg {
+                        animation: rotate 1.6s linear infinite;
+                        transform-origin: center center;
+                        width: 40px;
+                        height: 40px;
+                      }
+
+                      .Spinner circle {
+                        stroke: currentColor;
+                        animation: dash 1.6s linear 0s infinite;
+                        stroke-linecap: round;
+                      }
+
+                      @keyframes rotate {
+                        100% {
+                          transform: rotate(360deg);
+                        }
+                      }
+
+                      @keyframes dash {
+                        0% {
+                          stroke-dasharray: 1, 300;
+                          stroke-dashoffset: 0;
+                        }
+                        50% {
+                          stroke-dasharray: 150, 300;
+                          stroke-dashoffset: -200;
+                        }
+                        100% {
+                          stroke-dasharray: 1, 300;
+                          stroke-dashoffset: -280;
+                        }
+                      }
+                    </style>
+                    <div class="Spinner">
+                      <svg
+                        viewBox="0 0 100 100"
+                      >
+                        <circle
+                          cx="50"
+                          cy="50"
+                          r="46"
+                          stroke-width="8"
+                          fill="none"
+                          stroke-miter-limit="10"
+                        />
+                      </svg>
+                    </div>
+                    <div>Generating...</div>
+                  `)
+				};
+				else {
+					let t;
+					t = e.code === "ERR_GENERATION_INTERRUPTED" ? "Generation was interrupted..." : e.message || "Generation failed", c = {
+						intrinsicSize: {
+							w: r.width,
+							h: r.height
+						},
+						type: "document",
+						srcdoc: () => cr(`
+                    <style>
+                    html, body {
+                      height: 100%;
+                    }
+                      body {
+                        display: flex;
+                        flex-direction: column;
+                        align-items: center;
+                        justify-content: center;
+                        color: ${no.red.value};
+                      }
+                      h1, h3 {
+                        margin-top: 0;
+                        margin-bottom: 0.5rem;
+                      }
+                    </style>
+                    <h1>Error!</h1>
+                    <h3>${t}</h3>
+                  `)
+					};
+				}
+			}
+			let l = this.state.activeEmbeddable?.element === r && this.state.activeEmbeddable?.state === "active", u = this.state.activeEmbeddable?.element === r && this.state.activeEmbeddable?.state === "hover";
+			return /* @__PURE__ */ X("div", {
+				className: ro("draw__embeddable-container", { "is-hovered": u }),
+				style: {
+					transform: o ? `translate(${i - this.state.offsetLeft}px, ${a - this.state.offsetTop}px) scale(${e})` : "none",
+					display: o ? "block" : "none",
+					opacity: on(r, Jt(r, this.scene.getNonDeletedElementsMap()), this.#l, null, this.state.openDialog?.name === "elementLinkSelector" ? p : 1),
+					"--embeddable-radius": `${cn(Math.min(r.width, r.height), r)}px`
+				},
+				children: /* @__PURE__ */ $a("div", {
+					className: "draw__embeddable-container__inner",
+					style: {
+						width: o ? `${r.width}px` : 0,
+						height: o ? `${r.height}px` : 0,
+						transform: o ? `rotate(${r.angle}rad)` : "none",
+						pointerEvents: l ? te.enabled : te.disabled
+					},
+					children: [u && /* @__PURE__ */ X("div", {
+						className: "draw__embeddable-hint",
+						children: H("buttons.embeddableInteractionButton")
+					}), /* @__PURE__ */ X("div", {
+						className: "draw__embeddable__outer",
+						style: { padding: `${r.strokeWidth}px` },
+						children: (lt(r) ? this.props.renderEmbeddable?.(r, this.state) : null) ?? /* @__PURE__ */ X("iframe", {
+							ref: (e) => this.#h(r, e),
+							className: "draw__embeddable",
+							srcDoc: c?.type === "document" ? c.srcdoc(this.state.theme) : void 0,
+							src: c?.type === "document" ? void 0 : c?.link ?? "",
+							scrolling: "no",
+							referrerPolicy: "no-referrer-when-downgrade",
+							title: "Draw Embedded Content",
+							allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+							allowFullScreen: !0,
+							sandbox: `${c?.sandbox?.allowSameOrigin ? "allow-same-origin" : ""} allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-downloads`
+						})
+					})]
+				})
+			}, r.id);
+		}) });
+	}
+	#S;
+	#C;
+	get #w() {
+		return this.state.theme === re.DARK;
+	}
+	#T;
+	#E(e) {
+		document.documentElement.style.overscrollBehaviorX = e.type === "pointerenter" ? "none" : "auto";
+	}
+	#D;
+	#O;
+	setPlugins(e) {
+		Object.assign(this.plugins, e);
+	}
+	async #k(e, t) {
+		let n = this.plugins.diagramToCode?.generate;
+		if (!n) {
+			this.setState({ errorMessage: "No diagram to code plugin found" });
+			return;
+		}
+		let r = Zt(this.scene.getNonDeletedElements(), e).filter((e) => !gt(e));
+		if (!r.length) {
+			t === "button" ? (this.setState({ errorMessage: "Cannot generate from an empty frame" }), V("ai", "generate (no-children)", "d2c")) : this.setActiveTool({ type: "magicframe" });
+			return;
+		}
+		let i = this.insertIframeElement({
+			sceneX: e.x + e.width + 30,
+			sceneY: e.y,
+			width: e.width,
+			height: e.height
+		});
+		if (i) {
+			this.#O({
+				frameElement: i,
+				data: { status: "pending" }
+			}), this.setState({ selectedElementIds: { [i.id]: !0 } }), V("ai", "generate (start)", "d2c");
+			try {
+				let { html: t } = await n({
+					frame: e,
+					children: r
+				});
+				if (V("ai", "generate (success)", "d2c"), !t.trim()) {
+					this.#O({
+						frameElement: i,
+						data: {
+							status: "error",
+							code: "ERR_OAI",
+							message: "Nothing genereated :("
+						}
+					});
+					return;
+				}
+				let a = t.includes("<!DOCTYPE html>") && t.includes("</html>") ? t.slice(t.indexOf("<!DOCTYPE html>"), t.indexOf("</html>") + 7) : t;
+				this.#O({
+					frameElement: i,
+					data: {
+						status: "done",
+						html: a
+					}
+				});
+			} catch (e) {
+				V("ai", "generate (failed)", "d2c"), this.#O({
+					frameElement: i,
+					data: {
+						status: "error",
+						code: "ERR_OAI",
+						message: e.message || "Unknown error during generation"
+					}
+				});
+			}
+		}
+	}
+	#A(e) {
+		e.customData?.generationData?.status === "done" && (gi(e.customData.generationData.html), this.setToast({
+			message: "copied to clipboard",
+			closable: !1,
+			duration: 1500
+		}));
+	}
+	#j;
+	#M;
+	#N;
+	#P;
+	#F;
+	#I;
+	#L;
+	#R;
+	#z;
+	#B;
+	#V;
+	#H(e) {
+		let t = e ?? this.files;
+		this.scene.getNonDeletedElements().forEach((e) => {
+			pt(e) && t[e.fileId] && (this.imageCache.delete(e.fileId), sn.delete(e));
+		});
+	}
+	async componentDidMount() {
+		this.unmounted = !1, this.drawContainerValue.container = this.rootElement, (He() || Re()) && (this.setState.bind(this), Object.defineProperties(window.h, {
+			state: {
+				configurable: !0,
+				get: () => this.state
+			},
+			setState: {
+				configurable: !0,
+				value: (...e) => this.setState(...e)
+			},
+			app: {
+				configurable: !0,
+				value: this
+			},
+			history: {
+				configurable: !0,
+				value: this.#i
+			},
+			store: {
+				configurable: !0,
+				value: this.#r
+			},
+			fonts: {
+				configurable: !0,
+				value: this.fonts
+			}
+		})), this.#r.onDurableIncrementEmitter.on((e) => {
+			this.#i.record(e.delta);
+		});
+		let { onIncrement: e } = this.props;
+		e && this.#r.onStoreIncrementEmitter.on((t) => {
+			e(t);
+		}), this.scene.onUpdate(this.#se), this.#q(), this.props.autoFocus && this.rootElement && this.focusContainer(), oe && this.rootElement && (this.#n = new ResizeObserver(() => {
+			this.refreshEditorInterface(), this.#Ot();
+		}), this.#n?.observe?.(this.rootElement)), new URLSearchParams(window.location.search.slice(1)).has("web-share-target") ? this.restoreFileFromShare() : this.#Ot(this.#R), de() && !kt() && this.setState({ errorMessage: /* @__PURE__ */ X(ja, {}) }), n.on(t.DARK_THEME, this.#U);
+	}
+	#U;
+	componentWillUnmount() {
+		window.launchQueue?.setConsumer?.(() => {}), this.renderer.destroy(), this.scene.destroy(), this.scene = new Bn(), this.fonts = new ei(this.scene), this.renderer = new va(this.scene), this.files = {}, this.imageCache.clear(), this.#n?.disconnect?.(), this.unmounted = !0, this.#K(), this.library.destroy(), this.laserTrails.stop(), this.eraserTrail.stop(), this.onChangeEmitter.clear(), this.#r.onStoreIncrementEmitter.clear(), this.#r.onDurableIncrementEmitter.clear(), sn.destroy(), J.destroy(), clearTimeout(Q), wt.clearCache(), I.clearCache(), Q = 0, document.documentElement.style.overscrollBehaviorX = "", n.off(t.DARK_THEME, this.#U);
+	}
+	#W;
+	#G;
+	#K() {
+		this.onRemoveEventListenersEmitter.trigger();
+	}
+	#q() {
+		this.#K(), this.props.handleKeyboardGlobally && this.onRemoveEventListenersEmitter.once(w(document, h.KEYDOWN, this.#le, !1)), this.onRemoveEventListenersEmitter.once(w(this.rootElement, h.WHEEL, this.#wt, { passive: !1 }), w(document, h.POINTER_UP, this.removePointer, { passive: !1 }), w(document, h.COPY, this.#Z, { passive: !1 }), w(document, h.KEYUP, this.#ue, { passive: !0 }), w(document, h.POINTER_MOVE, this.#ce, { passive: !1 }), w(document.fonts, "loadingdone", (e) => {
+			let t = e.fontfaces;
+			this.fonts.onLoaded(t);
+		}, { passive: !1 }), w(document, h.GESTURE_START, this.#he, !1), w(document, h.GESTURE_CHANGE, this.#ge, !1), w(document, h.GESTURE_END, this.#_e, !1), w(window, h.FOCUS, () => {
+			this.#Le(null), this.#se(!0);
+		}, { passive: !1 })), !this.state.viewModeEnabled && (this.onRemoveEventListenersEmitter.once(w(document, h.FULLSCREENCHANGE, this.#G, { passive: !1 }), w(document, h.PASTE, this.pasteFromClipboard, { passive: !1 }), w(document, h.CUT, this.#X, { passive: !1 }), w(window, h.RESIZE, this.#W, !1), w(window, h.UNLOAD, this.#N, !1), w(window, h.BLUR, this.#M, !1), w(this.rootElement, h.WHEEL, this.#wt, { passive: !1 }), w(this.rootElement, h.DRAG_OVER, this.#P, !1), w(this.rootElement, h.DROP, this.#P, !1)), this.props.detectScroll && this.onRemoveEventListenersEmitter.once(w(Le(this.rootElement), h.SCROLL, this.#Y, { passive: !1 })));
+	}
+	componentDidUpdate(e, r) {
+		this.#b();
+		let i = this.scene.getElementsIncludingDeleted(), a = this.scene.getElementsMapIncludingDeleted();
+		!this.state.showWelcomeScreen && !i.length && this.setState({ showWelcomeScreen: !0 }), (r.zoom.value !== this.state.zoom.value || r.scrollX !== this.state.scrollX || r.scrollY !== this.state.scrollY) && (this.props?.onScrollChange?.(this.state.scrollX, this.state.scrollY, this.state.zoom), this.onScrollChangeEmitter.trigger(this.state.scrollX, this.state.scrollY, this.state.zoom)), Object.keys(this.state.selectedElementIds).length && Or(this.state) && this.setState({ activeTool: D(this.state, { type: "selection" }) }), this.state.activeTool.type === "eraser" && r.theme !== this.state.theme && Ti(this.interactiveCanvas, this.state.theme), e.langCode !== this.props.langCode && this.#At(), Or(r) && !Or(this.state) && this.eraserTrail.endPath(), e.viewModeEnabled !== this.props.viewModeEnabled && this.setState({ viewModeEnabled: !!this.props.viewModeEnabled }), r.viewModeEnabled !== this.state.viewModeEnabled && (this.#q(), this.#ye()), (r.openDialog?.name === "elementLinkSelector" || this.state.openDialog?.name === "elementLinkSelector") && r.openDialog?.name !== this.state.openDialog?.name && (this.#ye(), this.setState({ hoveredElementIds: {} })), e.zenModeEnabled !== this.props.zenModeEnabled && this.setState({ zenModeEnabled: !!this.props.zenModeEnabled }), e.theme !== this.props.theme && this.props.theme && this.setState({ theme: this.props.theme }), this.rootElement?.classList?.toggle?.("theme--dark", this.#w), r.theme === this.state.theme || (this.#w ? n.emit(t.DARK_THEME, {
+			key: "draw",
+			value: !0
+		}) : n.emit(t.DARK_THEME, {
+			key: "draw",
+			value: !1
+		})), this.state.selectedLinearElement?.isEditing && !this.state.selectedElementIds[this.state.selectedLinearElement.elementId] && setTimeout(() => {
+			this.state.selectedLinearElement?.isEditing && this.actionManager.executeAction(K);
+		}), this.state.editingTextElement?.isDeleted && this.setState({ editingTextElement: null }), this.#r.commit(a, this.state), this.state.isLoading || (this.props.onChange?.(i, this.state, this.files), this.onChangeEmitter.trigger(i, this.state, this.files));
+	}
+	#J;
+	#Y;
+	#X;
+	#Z;
+	static #Q() {
+		oo = !1, co = null;
+	}
+	#$;
+	#ee;
+	async #te(e, t, n) {
+		let { x: r, y: i } = O({
+			clientX: this.lastViewportPosition.x,
+			clientY: this.lastViewportPosition.y
+		}, this.state);
+		if (e.errorMessage) {
+			this.setState({ errorMessage: e.errorMessage });
+			return;
+		}
+		if (t.length === 0 && !n && e.mixedContent) {
+			await this.#ne(e.mixedContent, {
+				isPlainPaste: n,
+				sceneX: r,
+				sceneY: i
+			});
+			return;
+		}
+		if (e.spreadsheet && !n) {
+			this.setState({ pasteDialog: {
+				data: e.spreadsheet,
+				shown: !0
+			} });
+			return;
+		}
+		let a = t.map((e) => e.file);
+		if (a.length === 0 && e.text && !n) {
+			let t = e.text.trim();
+			t.startsWith("<svg") && t.endsWith("</svg>") && a.push(ii(t));
+		}
+		if (a.length > 0) {
+			this.#de("image") ? await this.#_t(a, r, i) : this.setState({ errorMessage: H("errors.imageToolNotSupported") });
+			return;
+		}
+		if (e.elements) {
+			let t = e.programmaticAPI ? Tr(e.elements) : e.elements;
+			this.addElementsFromPasteOrLibrary({
+				elements: t,
+				files: e.files || null,
+				position: this.editorInterface.formFactor === "desktop" ? "cursor" : "center",
+				retainSeed: n
+			});
+			return;
+		}
+		if (!e.text) return;
+		let o = Ke(e.text).split(/\n+/).map((e) => e.trim()).filter(Boolean), s = o.map((e) => ur(e)).filter((e) => lr(e, this.props.validateEmbeddable) && /^(http|https):\/\/[^\s/$.?#].[^\s]*$/.test(e));
+		if (!n && s.length > 0 && s.length === o.length) {
+			let e = [];
+			for (let t of s) {
+				let n = e[e.length - 1], a = this.insertEmbeddableElement({
+					sceneX: n ? n.x + n.width + 20 : r,
+					sceneY: i,
+					link: $e(t)
+				});
+				a && e.push(a);
+			}
+			e.length && (this.#r.scheduleCapture(), this.setState({ selectedElementIds: Object.fromEntries(e.map((e) => [e.id, !0])) }));
+			return;
+		}
+		this.#re(e.text, n);
+	}
+	async #ne(e, { isPlainPaste: t, sceneX: n, sceneY: r }) {
+		if (!t && e.some((e) => e.type === "imageUrl") && this.#de("image")) {
+			let t = e.filter((e) => e.type === "imageUrl").map((e) => e.value), i = await Promise.all(t.map(async (e) => {
+				try {
+					return { file: await ri(e) };
+				} catch (e) {
+					let t = e.message;
+					return e.cause === "FETCH_ERROR" ? t = H("errors.failedToFetchImage") : e.cause === "UNSUPPORTED" && (t = H("errors.unsupportedFileType")), { errorMessage: t };
+				}
+			})), a = i.filter((e) => !!e.file).map((e) => e.file);
+			await this.#_t(a, n, r);
+			let o = i.find((e) => !!e.errorMessage);
+			o && o.errorMessage && this.setState({ errorMessage: o.errorMessage });
+		} else {
+			let n = e.filter((e) => e.type === "text");
+			n.length && this.#re(n.map((e) => e.value).join("\n\n"), t);
+		}
+	}
+	#re(e, t = !1) {
+		let { x: n, y: r } = O({
+			clientX: this.lastViewportPosition.x,
+			clientY: this.lastViewportPosition.y
+		}, this.state), i = {
+			x: n,
+			y: r,
+			strokeColor: this.state.currentItemStrokeColor,
+			backgroundColor: this.state.currentItemBackgroundColor,
+			fillStyle: this.state.currentItemFillStyle,
+			strokeWidth: this.state.currentItemStrokeWidth,
+			strokeStyle: this.state.currentItemStrokeStyle,
+			roundness: null,
+			roughness: this.state.currentItemRoughness,
+			opacity: this.state.currentItemOpacity,
+			text: e,
+			fontSize: this.state.currentItemFontSize,
+			fontFamily: this.state.currentItemFontFamily,
+			textAlign: m,
+			verticalAlign: "top",
+			locked: !1
+		}, a = Ie({
+			fontSize: i.fontSize,
+			fontFamily: i.fontFamily
+		}), o = _e(i.fontFamily), [s, , c] = kn(this.state), l = Math.max(Math.min((c - s) * .5, 800), 200), u = r, d = t ? [e] : e.split("\n"), f = d.reduce((e, t, r) => {
+			let s = jt(t).trim();
+			if (s.length) {
+				let t = this.#ke({
+					x: n,
+					y: u
+				}), r = At(s, a, o), c = r.width > l, d = c ? Mt(s, a, l) : s;
+				r = c ? At(d, a, o) : r;
+				let f = n - r.width / 2, p = u - r.height / 2, m = or({
+					...i,
+					x: f,
+					y: p,
+					text: d,
+					originalText: s,
+					lineHeight: o,
+					autoResize: !c,
+					frameId: t ? t.id : null
+				});
+				e.push(m), u += m.height + 10;
+			} else d[r - 1]?.trim?.() && (u += Dt(i.fontSize, o) + 10);
+			return e;
+		}, []);
+		f.length !== 0 && (this.scene.insertElements(f), this.#r.scheduleCapture(), this.setState({ selectedElementIds: F(Object.fromEntries(f.map((e) => [e.id, !0])), this.state) }), !t && f.length > 1 && _o === !1 && this.editorInterface.formFactor !== "phone" && (this.setToast({
+			message: H("toast.pasteAsSingleElement", { shortcut: Xr("CtrlOrCmd+Shift+V") }),
+			duration: 5e3
+		}), _o = !0));
+	}
+	#ie;
+	#ae;
+	#oe;
+	#se;
+	#ce;
+	#le;
+	#ue;
+	#de;
+	#fe;
+	#pe;
+	#me;
+	#he;
+	#ge;
+	#_e;
+	#ve(e, { isExistingElement: t = !1 }) {
+		let n = this.scene.getElementsMapIncludingDeleted(), r = (t, r) => {
+			this.scene.replaceAllElements([...this.scene.getElementsIncludingDeleted().map((i) => i.id === e.id && P(i) ? L(i, {
+				originalText: t,
+				isDeleted: r ?? i.isDeleted,
+				...sr(i, Ft(i, n), n, t)
+			}) : i)]);
+		};
+		ka({
+			id: e.id,
+			canvas: this.canvas,
+			getViewportCoords: (e, t) => {
+				let { x: n, y: r } = qe({
+					sceneX: e,
+					sceneY: t
+				}, this.state);
+				return [n - this.state.offsetLeft, r - this.state.offsetTop];
+			},
+			onChange: q((t) => {
+				r(t, !1), zn(e) && Sn(e, this.scene);
+			}),
+			onSubmit: q(({ viaKeyboard: n, nextOriginalText: i }) => {
+				let a = !i.trim();
+				if (r(i, a), !a && n) {
+					let t = e.containerId ? e.containerId : e.id;
+					Z(() => {
+						this.setState((e) => ({ selectedElementIds: F({
+							...e.selectedElementIds,
+							[t]: !0
+						}, e) }));
+					});
+				}
+				a && vn(this.scene.getNonDeletedElements(), [e]), (!a || t) && this.#r.scheduleCapture(), Z(() => {
+					this.setState({
+						newElement: null,
+						editingTextElement: null
+					});
+				}), this.state.activeTool.locked && G(this.interactiveCanvas, this.state), this.focusContainer();
+			}),
+			element: e,
+			drawContainer: this.rootElement,
+			app: this,
+			autoSelect: !this.editorInterface.isTouchScreen
+		}), this.#ye(), r(e.originalText, !1);
+	}
+	#ye() {
+		this.setState({
+			selectedElementIds: F({}, this.state),
+			selectedGroupIds: {},
+			editingGroupId: null,
+			activeEmbeddable: null
+		});
+	}
+	#be(e, t) {
+		let n = this.#xe(e, t, { includeBoundTextElement: !0 });
+		return n && P(n) && !n.isDeleted ? n : null;
+	}
+	#xe(e, t, n) {
+		let r = [];
+		if (r = n && "allHitElements" in n ? n?.allHitElements || [] : this.#Se(e, t, {
+			includeBoundTextElement: n?.includeBoundTextElement,
+			includeLockedElements: n?.includeLockedElements
+		}), r.length > 1) {
+			if (n?.preferSelected) {
+				for (let e = r.length - 1; e > -1; e--) if (this.state.selectedElementIds[r[e].id]) return r[e];
+			}
+			let i = r[r.length - 1];
+			return pn({
+				point: S(e, t),
+				element: i,
+				threshold: this.getElementHitThreshold(i) / 2,
+				elementsMap: this.scene.getNonDeletedElementsMap(),
+				frameNameBound: j(i) ? this.frameNameBoundsCache.get(i) : null
+			}) ? i : r[r.length - 2];
+		}
+		return r.length === 1 ? r[0] : null;
+	}
+	#Se(e, t, n) {
+		let r = [], i = this.scene.getNonDeletedElementsMap();
+		return (n?.includeBoundTextElement && n?.includeLockedElements ? this.scene.getNonDeletedElements() : this.scene.getNonDeletedElements().filter((e) => (n?.includeLockedElements || !e.locked) && (n?.includeBoundTextElement || !(P(e) && e.containerId)))).filter((n) => this.#Ce(e, t, n)).filter((n) => {
+			let r = Jt(n, i);
+			return r && this.state.frameRendering.enabled && this.state.frameRendering.clip ? en({
+				x: e,
+				y: t
+			}, r, i) : !0;
+		}).filter((e) => dt(e) ? (r.push(e), !1) : !0).concat(r);
+	}
+	getElementHitThreshold(e) {
+		return Math.max(e.strokeWidth / 2 + .1, .85 * (d / this.state.zoom.value));
+	}
+	#Ce(e, t, n, r = !0) {
+		return r && this.state.selectedElementIds[n.id] && xr([n], this.state, this.editorInterface) && dn(S(e, t), n, this.scene.getNonDeletedElementsMap(), this.getElementHitThreshold(n)) || un(S(e, t), n, this.scene.getNonDeletedElementsMap()) ? !0 : pn({
+			point: S(e, t),
+			element: n,
+			threshold: this.getElementHitThreshold(n),
+			elementsMap: this.scene.getNonDeletedElementsMap(),
+			frameNameBound: j(n) ? this.frameNameBoundsCache.get(n) : null
+		});
+	}
+	#we(e, t) {
+		let n = this.scene.getNonDeletedElements(), r = this.scene.getSelectedElements(this.state);
+		if (r.length === 1) return vt(r[0], !1) ? r[0] : null;
+		let i = null;
+		for (let r = n.length - 1; r >= 0; --r) {
+			if (n[r].isDeleted) continue;
+			let [a, o, s, c] = Dn(n[r], this.scene.getNonDeletedElementsMap());
+			if (at(n[r]) && pn({
+				point: S(e, t),
+				element: n[r],
+				elementsMap: this.scene.getNonDeletedElementsMap(),
+				threshold: this.getElementHitThreshold(n[r])
+			})) {
+				i = n[r];
+				break;
+			} else if (a < e && e < s && o < t && t < c) {
+				i = n[r];
+				break;
+			}
+		}
+		return vt(i, !1) ? i : null;
+	}
+	#Te;
+	#Ee;
+	#De;
+	#Oe;
+	#ke;
+	#Ae;
+	#je;
+	#Me;
+	#Ne;
+	#Pe;
+	#Fe;
+	#Ie;
+	#Le;
+	#Re(e) {
+		$.pointers.set(e.pointerId, {
+			x: e.clientX,
+			y: e.clientY
+		}), $.pointers.size === 2 && ($.lastCenter = pa($.pointers), $.initialScale = this.state.zoom.value, $.initialDistance = ma(Array.from($.pointers.values())));
+	}
+	#ze(e) {
+		let t = O(e, this.state), n = this.scene.getSelectedElements(this.state), [r, i, a, o] = En(n), s = n.findIndex(A) === 0;
+		return {
+			origin: t,
+			withCmdOrCtrl: e[x.CTRL_OR_CMD],
+			originInGrid: Je(C(t.x, t.y, e[x.CTRL_OR_CMD] || s ? null : this.getEffectiveGridSize())),
+			scrollbars: ya(po, e.clientX - this.state.offsetLeft, e.clientY - this.state.offsetTop),
+			lastCoords: { ...t },
+			originalElements: this.scene.getNonDeletedElements().reduce((e, t) => (e.set(t.id, Vn(t)), e), /* @__PURE__ */ new Map()),
+			resize: {
+				handleType: !1,
+				isResizing: !1,
+				offset: {
+					x: 0,
+					y: 0
+				},
+				arrowDirection: "origin",
+				center: {
+					x: (a + r) / 2,
+					y: (o + i) / 2
+				}
+			},
+			hit: {
+				element: null,
+				allHitElements: [],
+				wasAddedToSelection: !1,
+				hasBeenDuplicated: !1,
+				hasHitCommonBoundingBoxOfSelectedElements: this.#We(t, n)
+			},
+			drag: {
+				hasOccurred: !1,
+				offset: null,
+				origin: { ...t },
+				blockDragging: !1
+			},
+			eventListeners: {
+				onMove: null,
+				onUp: null,
+				onKeyUp: null,
+				onKeyDown: null
+			},
+			boxSelection: { hasOccurred: !1 }
+		};
+	}
+	#Be(e, t) {
+		if (!(t.scrollbars.isOverEither && !this.state.multiElement)) return !1;
+		fo = !0, t.lastCoords.x = e.clientX, t.lastCoords.y = e.clientY;
+		let n = _a((e) => {
+			e.target instanceof HTMLElement && this.#rt(e, t);
+		}), r = q(() => {
+			vo = null, fo = !1, G(this.interactiveCanvas, this.state), this.setState({ cursorButton: "up" }), this.#Et(e.clientX, e.clientY, "up"), window.removeEventListener(h.POINTER_MOVE, n), window.removeEventListener(h.POINTER_UP, r), n.flush();
+		});
+		return vo = r, window.addEventListener(h.POINTER_MOVE, n), window.addEventListener(h.POINTER_UP, r), !0;
+	}
+	#Ve;
+	#He;
+	#Ue(e) {
+		return e != null && this.state.selectedElementIds[e.id];
+	}
+	#We(e, t) {
+		if (t.length < 2) return !1;
+		let n = Math.max(d / this.state.zoom.value, 1), [r, i, a, o] = En(t);
+		return e.x > r - n && e.x < a + n && e.y > i - n && e.y < o + n;
+	}
+	#Ge;
+	#Ke;
+	#qe;
+	#Je;
+	#Ye(e) {
+		return this.state.currentItemRoundness === "round" ? { type: yt(e) ? ne.ADAPTIVE_RADIUS : ne.PROPORTIONAL_RADIUS } : null;
+	}
+	#Xe;
+	#Ze;
+	#Qe(e, t, n = !1) {
+		Ta({
+			event: e,
+			app: this,
+			selectedElements: t
+		}) && (n || !J.getReferenceSnapPoints()) && J.setReferenceSnapPoints(ba(this.scene.getNonDeletedElements(), t, this.state, this.scene.getNonDeletedElementsMap()));
+	}
+	#$e(e, t, n = !1) {
+		Ta({
+			event: e,
+			app: this,
+			selectedElements: t
+		}) && (n || !J.getVisibleGaps()) && J.setVisibleGaps(Sa(this.scene.getNonDeletedElements(), t, this.state, this.scene.getNonDeletedElementsMap()));
+	}
+	#et(e) {
+		return q((t) => {
+			this.#St(e, t) || this.#bt(e, t);
+		});
+	}
+	#tt(e) {
+		return q((t) => {
+			t.key === x.ALT && t.preventDefault(), !this.#St(e, t) && this.#bt(e, t);
+		});
+	}
+	#nt(e) {
+		return _a((t) => {
+			if (this.state.openDialog?.name === "elementLinkSelector") return;
+			let n = O(t, this.state);
+			if (this.state.activeLockedId && this.setState({ activeLockedId: null }), this.state.selectedLinearElement && this.state.selectedLinearElement.elbowed && this.state.selectedLinearElement.initialState.segmentMidpoint.index) {
+				let [e, r] = C(n.x, n.y, t[x.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()), i = this.state.selectedLinearElement.initialState.segmentMidpoint.index;
+				if (i < 0) {
+					let t = z.getSegmentMidpointHitCoords({
+						...this.state.selectedLinearElement,
+						segmentMidPointHoveredCoords: null
+					}, {
+						x: e,
+						y: r
+					}, this.state, this.scene.getNonDeletedElementsMap());
+					i = t ? z.getSegmentMidPointIndex(this.state.selectedLinearElement, this.state, t, this.scene.getNonDeletedElementsMap()) : -1;
+				}
+				let a = z.moveFixedSegment(this.state.selectedLinearElement, i, e, r, this.scene);
+				this.setState({ selectedLinearElement: {
+					...this.state.selectedLinearElement,
+					isDragging: !0,
+					segmentMidPointHoveredCoords: a.segmentMidPointHoveredCoords,
+					initialState: a.initialState
+				} });
+				return;
+			}
+			let r = this.previousPointerMoveCoords ?? e.origin;
+			if (this.previousPointerMoveCoords = n, e.drag.offset === null && (e.drag.offset = Je(Jn(this.scene.getSelectedElements(this.state), e.origin.x, e.origin.y))), !(t.target instanceof HTMLElement) || this.#rt(t, e)) return;
+			if (Or(this.state)) {
+				this.#je(t, n);
+				return;
+			}
+			this.state.activeTool.type === "laser" && this.laserTrails.addPointToPath(n.x, n.y);
+			let [a, o] = C(n.x, n.y, t[x.CTRL_OR_CMD] ? null : this.getEffectiveGridSize());
+			if (e.resize.isResizing && (e.lastCoords.x = n.x, e.lastCoords.y = n.y, this.#xt(e, t) || this.#St(e, t))) return !0;
+			let s = this.scene.getNonDeletedElementsMap();
+			if (this.state.selectedLinearElement) {
+				let r = this.state.selectedLinearElement;
+				if (r.draggedFocusPointBinding) {
+					Pn(r, s, n, this.scene, this.state, this.getEffectiveGridSize(), t.altKey), this.setState({ selectedLinearElement: {
+						...r,
+						isDragging: !1,
+						selectedPointsIndices: [],
+						initialState: {
+							...r.initialState,
+							lastClickedPoint: -1
+						}
+					} });
+					return;
+				}
+				if (z.shouldAddMidpoint(this.state.selectedLinearElement, n, this.state, s)) {
+					let e = z.addMidpoint(this.state.selectedLinearElement, n, this, !t[x.CTRL_OR_CMD], this.scene);
+					if (!e) return;
+					Z(() => {
+						this.state.selectedLinearElement && this.setState({ selectedLinearElement: {
+							...this.state.selectedLinearElement,
+							initialState: e.pointerDownState,
+							selectedPointsIndices: e.selectedPointsIndices,
+							segmentMidPointHoveredCoords: null
+						} });
+					});
+					return;
+				} else if (r.initialState.segmentMidpoint.value !== null && !r.initialState.segmentMidpoint.added) return;
+				else if (r.initialState.lastClickedPoint > -1) {
+					let i = z.getElement(r.elementId, s);
+					if (i?.isDeleted) return;
+					if (k(i)) {
+						let e = R(S(n.x, n.y), this.scene.getNonDeletedElements(), s);
+						T("COMPLEX_BINDINGS") && this.#m(i, e);
+					}
+					if (t.altKey && !this.state.selectedLinearElement?.initialState?.arrowStartIsInside && T("COMPLEX_BINDINGS") && this.#d(), r.initialState.lastClickedPoint === -1) return;
+					let a = z.handlePointDragging(t, this, n.x, n.y, r);
+					if (a) {
+						e.lastCoords.x = n.x, e.lastCoords.y = n.y, e.drag.hasOccurred = !0, (a.suggestedBinding !== this.state.suggestedBinding || !Ve(a.selectedLinearElement?.selectedPointsIndices ?? [], this.state.selectedLinearElement?.selectedPointsIndices ?? []) || a.selectedLinearElement?.hoverPointIndex !== this.state.selectedLinearElement?.hoverPointIndex || a.selectedLinearElement?.customLineAngle !== this.state.selectedLinearElement?.customLineAngle || this.state.selectedLinearElement.isDragging !== a.selectedLinearElement?.isDragging || this.state.selectedLinearElement?.initialState?.altFocusPoint !== a.selectedLinearElement?.initialState?.altFocusPoint) && this.setState(a);
+						return;
+					}
+				}
+			}
+			let c = e.hit.allHitElements.some((e) => this.#Ue(e)), l = this.state.selectedLinearElement?.isEditing && t.shiftKey && this.state.selectedLinearElement.elementId === e.hit.element?.id;
+			if ((c || e.hit.hasHitCommonBoundingBoxOfSelectedElements) && !l && !e.drag.blockDragging) {
+				let a = this.scene.getSelectedElements(this.state);
+				if (a.length > 0 && a.every((e) => e.locked)) return;
+				let o = a.find((e) => j(e)), c = this.#ke(n), l = c && !o ? c : null;
+				if (this.state.frameToHighlight !== l && Z(() => {
+					this.setState({ frameToHighlight: l });
+				}), e.drag.hasOccurred = !0, this.state.activeTool.type === "lasso" && this.lassoTrail.hasCurrentTrail && !(this.editorInterface.formFactor !== "desktop" && e.hit.element) && !this.state.activeTool.fromSelection) return;
+				if (this.state.activeTool.type === "lasso" && a.length > 0 && e.drag.hasOccurred && !this.state.activeTool.fromSelection && this.lassoTrail.endPath(), a.length > 0 && !e.withCmdOrCtrl && !this.state.editingTextElement && this.state.activeEmbeddable?.state !== "active") {
+					let o = {
+						x: n.x - e.drag.origin.x,
+						y: n.y - e.drag.origin.y
+					}, c = [...e.originalElements.values()], l = t.shiftKey;
+					if (l) {
+						let e = Math.abs(o.x), t = Math.abs(o.y), n = l && e < t, r = l && e > t;
+						n && (o.x = 0), r && (o.y = 0);
+					}
+					if (this.state.croppingElementId) {
+						let t = this.scene.getNonDeletedElementsMap().get(this.state.croppingElementId);
+						if (t && M(t) && t.crop !== null && e.hit.element === t) {
+							let e = t.crop, a = pt(t) && this.imageCache.get(t.fileId)?.image;
+							if (a && !(a instanceof Promise)) {
+								let o = rt(t), c = Ce(n.x - r.x, n.y - r.y);
+								c[0] *= a.naturalWidth / o.width, c[1] *= a.naturalHeight / o.height;
+								let [l, u, d, f, p, m] = Dn(t, s), h = Te(ke(S(l, u), S(p, m), t.angle)), g = Te(ke(S(d, u), S(p, m), t.angle)), _ = Te(ke(S(l, f), S(p, m), t.angle)), ee = Ee(De(g, h)), v = Ee(De(_, h)), y = Ce(we(c, ee), we(c, v)), te = {
+									...e,
+									x: i(e.x - y[0] * Math.sign(t.scale[0]), 0, a.naturalWidth - e.width),
+									y: i(e.y - y[1] * Math.sign(t.scale[1]), 0, a.naturalHeight - e.height)
+								};
+								this.scene.mutateElement(t, { crop: te });
+								return;
+							}
+						}
+					}
+					this.#$e(t, a), this.#Qe(t, a);
+					let { snapOffset: u, snapLines: d } = Ea(c, o, this, t, this.scene.getNonDeletedElementsMap());
+					if (this.setState({ snapLines: d }), this.state.editingFrame || qn(e, a, o, this.scene, u, t[x.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()), this.setState({
+						selectedElementsAreBeingDragged: !0,
+						selectionElement: null
+					}), t.altKey && !e.hit.hasBeenDuplicated) {
+						e.hit.hasBeenDuplicated = !0;
+						let n = this.scene.getElementsIncludingDeleted(), r = e.hit.element, i = this.scene.getSelectedElements({
+							selectedElementIds: this.state.selectedElementIds,
+							includeBoundTextElement: !0,
+							includeElementsInFrames: !0
+						});
+						r && e.hit.wasAddedToSelection && !i.find((e) => e.id === r.id) && i.push(r);
+						let a = new Map(i.map((e) => [e.id, e])), { duplicatedElements: o, duplicateElementsMap: s, elementsWithDuplicates: c, origIdToDuplicateId: l } = Hn({
+							type: "in-place",
+							elements: n,
+							appState: this.state,
+							randomizeSeed: !0,
+							idsOfElementsToDuplicate: a,
+							overrides: ({ duplicateElement: e, origElement: t }) => ({
+								frameId: e.frameId ?? t.frameId,
+								seed: Qe()
+							})
+						});
+						o.forEach((t) => {
+							e.originalElements.set(t.id, Vn(t));
+						});
+						let u = c.map((t) => {
+							if (a.has(t.id)) {
+								let n = e.originalElements.get(t.id);
+								if (n) return L(t, {
+									x: n.x,
+									y: n.y
+								});
+							}
+							return t;
+						}), d = this.props.onDuplicate?.(u, n), f = wn(d || u, Ae(o));
+						Z(() => {
+							if (e.hit.element) {
+								let t = l.get(e.hit.element.id), n = t && s.get(t);
+								e.hit.element = n || null;
+							}
+							e.hit.allHitElements = e.hit.allHitElements.reduce((e, t) => {
+								let n = l.get(t.id), r = n && s.get(n);
+								return r && e.push(r), e;
+							}, []), e.drag.origin = O(t, this.state), this.setState((e) => ({ ...Ct(o, this.scene.getNonDeletedElements(), e) })), this.scene.replaceAllElements(f), i.forEach((e) => {
+								ot(e) && e.boundElements?.some?.((e) => e.type === "arrow") && Sn(e, this.scene);
+							}), this.#$e(t, i, !0), this.#Qe(t, i, !0);
+						});
+					}
+					return;
+				}
+			}
+			if (this.state.selectionElement) {
+				if (e.lastCoords.x = n.x, e.lastCoords.y = n.y, t.altKey) {
+					this.setActiveTool({
+						type: "lasso",
+						fromSelection: !0
+					}, t.shiftKey), this.lassoTrail.startPath(e.origin.x, e.origin.y, t.shiftKey), this.setAppState({ selectionElement: null });
+					return;
+				}
+				this.#bt(e, t);
+			} else if (this.state.activeTool.type === "lasso") !t.altKey && this.state.activeTool.fromSelection ? (this.setActiveTool({ type: "selection" }), this.#Xe("selection", e), e.lastCoords.x = n.x, e.lastCoords.y = n.y, this.#bt(e, t), this.lassoTrail.endPath()) : this.lassoTrail.addPointToPath(n.x, n.y, t.shiftKey);
+			else {
+				let r = this.state.newElement;
+				if (!r) return;
+				if (r.type === "freedraw") {
+					let e = r.points, i = n.x - r.x, a = n.y - r.y, o = e.length > 0 && e[e.length - 1];
+					if (!(o && o[0] === i && o[1] === a)) {
+						let n = r.simulatePressure ? r.pressures : [...r.pressures, t.pressure];
+						this.scene.mutateElement(r, {
+							points: [...e, S(i, a)],
+							pressures: n
+						}, {
+							informMutation: !1,
+							isDragging: !1
+						}), this.setState({ newElement: r });
+					}
+				} else if (N(r) && !r.isDeleted) {
+					e.drag.hasOccurred = !0;
+					let n = r.points;
+					E(n.length > 1, "Do not create linear elements with less than 2 points");
+					let i = this.state.selectedLinearElement;
+					i ||= (i = new z(r, this.scene.getNonDeletedElementsMap()), {
+						...i,
+						selectedPointsIndices: [1],
+						initialState: {
+							...i.initialState,
+							lastClickedPoint: 1
+						}
+					}), this.setState({
+						newElement: r,
+						...z.handlePointDragging(t, this, a, o, i)
+					});
+				} else e.lastCoords.x = n.x, e.lastCoords.y = n.y, this.#bt(e, t, !1);
+			}
+			if (this.state.activeTool.type === "selection") {
+				e.boxSelection.hasOccurred = !0;
+				let n = this.scene.getNonDeletedElements();
+				if (this.state.selectedLinearElement?.isEditing) z.handleBoxSelection(t, this.state, this.setState.bind(this), this.scene.getNonDeletedElementsMap());
+				else {
+					let r = !0;
+					!t.shiftKey && wt(n, this.state) && (e.withCmdOrCtrl && e.hit.element ? this.setState((t) => I({
+						...t,
+						selectedElementIds: { [e.hit.element.id]: !0 }
+					}, this.scene.getNonDeletedElements(), t, this)) : r = !1);
+					let i = this.state.selectionElement ? xt(n, this.state.selectionElement, this.scene.getNonDeletedElementsMap(), !1) : [];
+					this.setState((t) => {
+						let n = {
+							...r && t.selectedElementIds,
+							...i.reduce((e, t) => (e[t.id] = !0, e), {})
+						};
+						return e.hit.element && (i.length ? delete n[e.hit.element.id] : n[e.hit.element.id] = !0), t = r ? t : {
+							...t,
+							selectedGroupIds: {},
+							editingGroupId: null
+						}, {
+							...I({
+								editingGroupId: t.editingGroupId,
+								selectedElementIds: n
+							}, this.scene.getNonDeletedElements(), t, this),
+							selectedLinearElement: i.length === 1 && N(i[0]) ? new z(i[0], this.scene.getNonDeletedElementsMap()) : null
+						};
+					});
+				}
+			}
+		});
+	}
+	#rt(e, t) {
+		if (t.scrollbars.isOverHorizontal) {
+			let n = e.clientX, r = n - t.lastCoords.x;
+			return this.#ae({ scrollX: this.state.scrollX - r * (po.horizontal?.deltaMultiplier || 1) / this.state.zoom.value }), t.lastCoords.x = n, !0;
+		}
+		if (t.scrollbars.isOverVertical) {
+			let n = e.clientY, r = n - t.lastCoords.y;
+			return this.#ae({ scrollY: this.state.scrollY - r * (po.vertical?.deltaMultiplier || 1) / this.state.zoom.value }), t.lastCoords.y = n, !0;
+		}
+		return !1;
+	}
+	#it(e) {
+		return q((t) => {
+			let n = this.scene.getNonDeletedElementsMap();
+			this.removePointer(t), e.drag.blockDragging = !1, e.eventListeners.onMove && e.eventListeners.onMove.flush();
+			let { newElement: r, resizingElement: i, croppingElementId: a, multiElement: o, activeTool: s, isResizing: c, isRotating: l, isCropping: d } = this.state;
+			this.setState((e) => ({
+				isResizing: !1,
+				isRotating: !1,
+				isCropping: !1,
+				resizingElement: null,
+				selectionElement: null,
+				frameToHighlight: null,
+				elementsToHighlight: null,
+				cursorButton: "up",
+				snapLines: Xe(e.snapLines, []),
+				originSnapOffset: null
+			})), this.lassoTrail.endPath(), this.previousPointerMoveCoords = null, J.setReferenceSnapPoints(null), J.setVisibleGaps(null), this.#Et(t.clientX, t.clientY, "up");
+			let f = e.hit.allHitElements, p = O({
+				clientX: t.clientX,
+				clientY: t.clientY
+			}, this.state);
+			if (this.state.activeTool.type === "selection" && !e.boxSelection.hasOccurred && !e.resize.isResizing && !f.some((e) => this.state.selectedElementIds[e.id])) {
+				let e = this.#xe(p.x, p.y, { includeLockedElements: !0 });
+				this.#r.scheduleCapture(), e?.locked ? this.setState({ activeLockedId: e.groupIds.length > 0 ? e.groupIds.at(-1) || "" : e.id }) : this.setState({ activeLockedId: null });
+			} else this.setState({ activeLockedId: null });
+			if (T("COMPLEX_BINDINGS") && this.#f(), this.setState({
+				selectedElementsAreBeingDragged: !1,
+				bindMode: "orbit"
+			}), e.drag.hasOccurred && e.hit?.element?.id) {
+				let t = n.get(e.hit.element.id);
+				ot(t) && t.boundElements?.filter?.((e) => e.type === "arrow").map((e) => n.get(e.id)).filter((e) => A(e)).forEach((e) => {
+					e && this.scene.mutateElement(e, {});
+				});
+			}
+			if (this.state.selectedLinearElement?.isEditing && !this.state.newElement && this.state.selectedLinearElement.draggedFocusPointBinding === null) if (!e.boxSelection.hasOccurred && e.hit?.element?.id !== this.state.selectedLinearElement.elementId && this.state.selectedLinearElement.draggedFocusPointBinding === null) this.actionManager.executeAction(K);
+			else {
+				let e = z.handlePointerUp(t, this.state.selectedLinearElement, this.state, this.scene);
+				this.actionManager.executeAction(K, "ui", {
+					event: t,
+					sceneCoords: p
+				}), e !== this.state.selectedLinearElement && this.setState({
+					selectedLinearElement: e,
+					suggestedBinding: null
+				});
+			}
+			else if (this.state.selectedLinearElement) {
+				if (this.state.selectedLinearElement.elbowed) {
+					let e = z.getElement(this.state.selectedLinearElement.elementId, this.scene.getNonDeletedElementsMap());
+					e && this.scene.mutateElement(e, {});
+				}
+				if (this.state.selectedLinearElement.draggedFocusPointBinding ? (Ln(this.state.selectedLinearElement, this.scene), this.setState({ selectedLinearElement: {
+					...this.state.selectedLinearElement,
+					draggedFocusPointBinding: null
+				} })) : e.hit?.element?.id === this.state.selectedLinearElement.elementId ? this.state.selectedLinearElement.isDragging && (this.setState({ selectedLinearElement: {
+					...this.state.selectedLinearElement,
+					isDragging: !1
+				} }), this.actionManager.executeAction(K, "ui", {
+					event: t,
+					sceneCoords: p
+				})) : this.scene.getSelectedElements(this.state).length > 1 && this.setState({ selectedLinearElement: null }), this.state.newElement && this.state.multiElement && N(this.state.newElement) && this.state.selectedLinearElement) {
+					let { multiElement: e } = this.state;
+					this.setState({ selectedLinearElement: {
+						...this.state.selectedLinearElement,
+						lastCommittedPoint: e.points[e.points.length - 1]
+					} });
+				}
+			}
+			if (this.missingPointerEventCleanupEmitter.clear(), window.removeEventListener(h.POINTER_MOVE, e.eventListeners.onMove), window.removeEventListener(h.POINTER_UP, e.eventListeners.onUp), window.removeEventListener(h.KEYDOWN, e.eventListeners.onKeyDown), window.removeEventListener(h.KEYUP, e.eventListeners.onKeyUp), this.props?.onPointerUp?.(s, e), this.onPointerUpEmitter.trigger(this.state.activeTool, e, t), r?.type === "freedraw") {
+				let e = O(t, this.state), n = r.points, i = e.x - r.x, a = e.y - r.y;
+				i === n[0][0] && a === n[0][1] && (a += 1e-4, i += 1e-4);
+				let o = r.simulatePressure ? [] : [...r.pressures, t.pressure];
+				this.scene.mutateElement(r, {
+					points: [...n, S(i, a)],
+					pressures: o
+				}), this.actionManager.executeAction(K);
+				return;
+			}
+			if (N(r)) {
+				r.points.length > 1 && r.points[1][0] !== 0 && r.points[1][1] !== 0 && this.#r.scheduleCapture();
+				let n = O(t, this.state), i = Oe(S(n.x, n.y), S(e.origin.x, e.origin.y)) * this.state.zoom.value;
+				if ((!e.drag.hasOccurred || i < 20) && r && !o) if (this.editorInterface.isTouchScreen) {
+					let e = Math.min(this.state.width * .7 / this.state.zoom.value, 100);
+					this.scene.mutateElement(r, {
+						x: r.x - e / 2,
+						points: [S(0, 0), S(e, 0)]
+					}, {
+						informMutation: !1,
+						isDragging: !1
+					}), this.actionManager.executeAction(K);
+				} else {
+					let e = n.x - r.x, t = n.y - r.y;
+					this.scene.mutateElement(r, { points: [r.points[0], S(e, t)] }, {
+						informMutation: !1,
+						isDragging: !1
+					}), this.setState({
+						multiElement: r,
+						newElement: r
+					});
+				}
+				else e.drag.hasOccurred && !o && (N(r) && this.actionManager.executeAction(K, "ui", {
+					event: t,
+					sceneCoords: p
+				}), this.setState({
+					suggestedBinding: null,
+					startBoundElement: null
+				}), s.locked ? this.setState((e) => ({ newElement: null })) : (U(this.interactiveCanvas), this.setState((e) => ({
+					newElement: null,
+					activeTool: D(this.state, { type: this.state.preferredSelectionTool.type }),
+					selectedElementIds: F({
+						...e.selectedElementIds,
+						[r.id]: !0
+					}, e),
+					selectedLinearElement: new z(r, this.scene.getNonDeletedElementsMap())
+				}))), this.scene.triggerUpdate());
+				return;
+			}
+			if (P(r)) {
+				let e = Ot(Ie({
+					fontSize: r.fontSize,
+					fontFamily: r.fontFamily
+				}), r.lineHeight);
+				r.width < e && this.scene.mutateElement(r, { autoResize: !0 }), this.#pe(), this.#ve(r, { isExistingElement: !0 });
+			}
+			if (s.type !== "selection" && r && Nn(r)) {
+				this.updateScene({
+					elements: this.scene.getElementsIncludingDeleted().filter((e) => e.id !== r.id),
+					appState: { newElement: null },
+					captureUpdate: B.NEVER
+				});
+				return;
+			}
+			if (j(r)) {
+				let e = Yt(this.scene.getElementsIncludingDeleted(), r, this.scene.getNonDeletedElementsMap());
+				this.scene.replaceAllElements(Gt(this.scene.getElementsMapIncludingDeleted(), e, r, this.state));
+			}
+			if (r && (this.scene.mutateElement(r, An(r), {
+				informMutation: !1,
+				isDragging: !1
+			}), this.scene.triggerUpdate()), e.drag.hasOccurred) {
+				let e = O(t, this.state);
+				if (this.state.selectedLinearElement && this.state.selectedLinearElement.isDragging) {
+					let e = this.scene.getElement(this.state.selectedLinearElement.elementId);
+					if (e?.frameId) {
+						let t = Jt(e, n);
+						t && e && (Kt(e, t, this.scene.getNonDeletedElementsMap()) || (this.scene.mutateElement(e, { groupIds: [] }), nn([e], this.scene.getNonDeletedElementsMap()), this.scene.triggerUpdate()));
+					}
+				} else {
+					let t = this.#ke(e), n = this.scene.getSelectedElements(this.state), r = this.scene.getElementsMapIncludingDeleted(), i = (e) => {
+						if (e.length > 0) {
+							for (let t of e) {
+								let e = t.groupIds.indexOf(this.state.editingGroupId);
+								this.scene.mutateElement(t, { groupIds: t.groupIds.slice(0, e) }, {
+									informMutation: !1,
+									isDragging: !1
+								});
+							}
+							r.forEach((e) => {
+								e.groupIds.length && zt(r, e.groupIds[e.groupIds.length - 1]).length < 2 && this.scene.mutateElement(e, { groupIds: [] }, {
+									informMutation: !1,
+									isDragging: !1
+								});
+							}), this.setState({ editingGroupId: null });
+						}
+					};
+					if (t && !this.state.selectedElementIds[t.id]) {
+						let e = n.filter((e) => e.frameId !== t.id && tn(e, r, this.state));
+						this.state.editingGroupId && i(e), r = Gt(r, e, t, this.state);
+					} else t || this.state.editingGroupId && i(n.filter((e) => e.frameId && !tn(e, r, this.state)));
+					r = an(r, this.state, this), this.scene.replaceAllElements(r);
+				}
+			}
+			if (i && this.#r.scheduleCapture(), i && Nn(i) && this.updateScene({
+				elements: this.scene.getElementsIncludingDeleted().filter((e) => e.id !== i.id),
+				captureUpdate: B.NEVER
+			}), e.resize.isResizing) {
+				let e = an(this.scene.getElementsIncludingDeleted(), this.state, this), t = this.scene.getSelectedElements(this.state).filter((e) => j(e));
+				for (let r of t) e = rn(e, Xt(this.scene.getElementsIncludingDeleted(), r, this.state, n), r, this);
+				this.scene.replaceAllElements(e);
+			}
+			let m = e.hit.element;
+			this.state.selectedLinearElement?.elementId !== m?.id && N(m) && this.scene.getSelectedElements(this.state).length === 1 && this.setState({ selectedLinearElement: new z(m, this.scene.getNonDeletedElementsMap()) }), (!a || a && (!m && !d || m && m.id !== a)) && this.#De();
+			let g = this.lastPointerDownEvent, _ = this.lastPointerUpEvent || this.lastPointerMoveEvent;
+			if (Or(this.state) && g && _) {
+				if (this.eraserTrail.endPath(), Oe(S(g.clientX, g.clientY), S(_.clientX, _.clientY)) === 0) {
+					let e = O({
+						clientX: _.clientX,
+						clientY: _.clientY
+					}, this.state);
+					this.#Se(e.x, e.y).forEach((e) => this.#l.add(e.id));
+				}
+				this.#ot();
+				return;
+			} else this.#l.size && this.#at();
+			if (m && !e.drag.hasOccurred && !e.hit.wasAddedToSelection && (!this.state.selectedLinearElement?.isEditing || !e.boxSelection.hasOccurred) && this.state.activeTool.type !== "lasso" && (t.shiftKey && !this.state.selectedLinearElement?.isEditing ? this.state.selectedElementIds[m.id] ? Ut(this.state, m) ? this.setState((e) => {
+				let t = { ...e.selectedElementIds };
+				for (let e of m.groupIds.flatMap((e) => zt(this.scene.getNonDeletedElements(), e))) delete t[e.id];
+				return {
+					selectedGroupIds: {
+						...e.selectedElementIds,
+						...m.groupIds.map((e) => ({ [e]: !1 })).reduce((e, t) => ({
+							...e,
+							...t
+						}), {})
+					},
+					selectedElementIds: F(t, e)
+				};
+			}) : this.state.selectedLinearElement?.isDragging || this.setState((e) => {
+				let t = { ...e.selectedElementIds };
+				delete t[m.id];
+				let n = St(this.scene.getNonDeletedElements(), { selectedElementIds: t });
+				return {
+					...I({
+						editingGroupId: e.editingGroupId,
+						selectedElementIds: t
+					}, this.scene.getNonDeletedElements(), e, this),
+					selectedLinearElement: n.length === 1 && N(n[0]) ? new z(n[0], this.scene.getNonDeletedElementsMap()) : e.selectedLinearElement
+				};
+			}) : m.frameId && this.state.selectedElementIds[m.frameId] ? this.setState((e) => {
+				let t = {
+					...e.selectedElementIds,
+					[m.id]: !0
+				};
+				return delete t[m.frameId], (this.scene.getElement(m.frameId)?.groupIds ?? []).flatMap((e) => zt(this.scene.getNonDeletedElements(), e)).forEach((e) => {
+					delete t[e.id];
+				}), { ...I({
+					editingGroupId: e.editingGroupId,
+					selectedElementIds: t
+				}, this.scene.getNonDeletedElements(), e, this) };
+			}) : this.setState((e) => ({ selectedElementIds: F({
+				...e.selectedElementIds,
+				[m.id]: !0
+			}, e) })) : this.setState((e) => ({
+				...I({
+					editingGroupId: e.editingGroupId,
+					selectedElementIds: { [m.id]: !0 }
+				}, this.scene.getNonDeletedElements(), e, this),
+				selectedLinearElement: N(m) && e.selectedLinearElement?.elementId !== m.id ? new z(m, this.scene.getNonDeletedElementsMap()) : e.selectedLinearElement
+			}))), this.state.activeTool.type !== "lasso" && !(m && A(m)) && !e.drag.hasOccurred && !this.state.isResizing && (m && fn({
+				point: S(e.origin.x, e.origin.y),
+				element: m,
+				elementsMap: n,
+				threshold: this.getElementHitThreshold(m),
+				frameNameBound: j(m) ? this.frameNameBoundsCache.get(m) : null
+			}, n) || !m && e.hit.hasHitCommonBoundingBoxOfSelectedElements)) {
+				this.state.selectedLinearElement?.isEditing ? this.actionManager.executeAction(Zi) : this.setState({
+					selectedElementIds: F({}, this.state),
+					selectedGroupIds: {},
+					editingGroupId: null,
+					activeEmbeddable: null
+				}), W(this.interactiveCanvas, u.AUTO);
+				return;
+			}
+			if (!s.locked && s.type !== "freedraw" && r && this.setState((e) => ({ selectedElementIds: F({
+				...e.selectedElementIds,
+				[r.id]: !0
+			}, e) })), (s.type !== "selection" || wt(this.scene.getNonDeletedElements(), this.state) || !Ve(this.state.previousSelectedElementIds, this.state.selectedElementIds)) && this.#r.scheduleCapture(), (e.drag.hasOccurred && !this.state.selectedLinearElement || c || l || d) && gn(this.scene.getSelectedElements(this.state).filter(at), this.scene, this.state), s.type === "laser") {
+				this.laserTrails.endPath();
+				return;
+			}
+			!s.locked && s.type !== "freedraw" && (s.type !== "lasso" || s.type === "lasso" && s.fromSelection) ? (U(this.interactiveCanvas), this.setState({
+				newElement: null,
+				suggestedBinding: null,
+				activeTool: D(this.state, { type: this.state.preferredSelectionTool.type })
+			})) : this.setState({
+				newElement: null,
+				suggestedBinding: null
+			}), m && this.lastPointerUpEvent && this.lastPointerDownEvent && this.lastPointerUpEvent.timeStamp - this.lastPointerDownEvent.timeStamp < 300 && $.pointers.size <= 1 && ft(m) && this.#v(m, this.lastPointerUpEvent, e.origin.x, e.origin.y) && this.#_(m);
+		});
+	}
+	#at;
+	#ot;
+	#st;
+	#ct;
+	#lt;
+	#ut;
+	#dt;
+	#ft;
+	#pt;
+	#mt;
+	#ht(e) {
+		this.setState((t) => ({
+			selectedElementIds: F({}, t),
+			activeEmbeddable: null,
+			selectedGroupIds: {},
+			editingGroupId: t.editingGroupId && e != null && Ht(e, t.editingGroupId) ? t.editingGroupId : null
+		})), this.setState({
+			selectedElementIds: F({}, this.state),
+			activeEmbeddable: null,
+			previousSelectedElementIds: this.state.selectedElementIds,
+			selectedLinearElement: null
+		});
+	}
+	#gt;
+	#_t;
+	#vt;
+	#yt;
+	#bt;
+	#xt;
+	#St;
+	#Ct;
+	#wt;
+	#Tt(e, t, n, r) {
+		if (r) {
+			let i = r.x + r.width / 2, a = r.y + r.height / 2, o = Pt(r, n, this.scene.getNonDeletedElementsMap());
+			if (o && (i = o.x, a = o.y), Math.hypot(e - i, t - a) < 30) {
+				let { x: e, y: t } = qe({
+					sceneX: i,
+					sceneY: a
+				}, n);
+				return {
+					viewportX: e,
+					viewportY: t,
+					elementCenterX: i,
+					elementCenterY: a
+				};
+			}
+		}
+	}
+	#Et;
+	#Dt;
+	#Ot;
+	#kt() {
+		if (this.rootElement) {
+			let { left: e, top: t } = this.rootElement.getBoundingClientRect();
+			return {
+				offsetLeft: e,
+				offsetTop: t
+			};
+		}
+		return {
+			offsetLeft: 0,
+			offsetTop: 0
+		};
+	}
+	async #At() {
+		await Gr(Wr.find((e) => e.code === this.props.langCode) || Hr), this.setAppState({});
+	}
+};
+(He() || Re()) && (window.h = window.h || {}, Object.defineProperties(window.h, {
+	elements: {
+		configurable: !0,
+		get() {
+			return this.app?.scene?.getElementsIncludingDeleted?.();
+		},
+		set(e) {
+			return this.app?.scene?.replaceAllElements?.(Cn(e));
+		}
+	},
+	scene: {
+		configurable: !0,
+		get() {
+			return this.app?.scene;
+		}
+	}
+}));
+//#endregion
+export { yo as default };
+/* 独立思考，明辨是非 */