vue-data-ui 3.20.0 → 3.20.1

package/dist/vue-ui-annotator-DLPUAKlm.js

@@ -1,2899 +0,0 @@
-import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
-import { Bt as t, H as n, Tt as r, b as i } from "./lib-DUeYQsS0.js";
-import { t as a } from "./useConfig-DAyQk86L.js";
-import { t as o } from "./usePrinter-C1Gqt_Sp.js";
-import { t as s } from "./dom-to-png-BYtB4BF3.js";
-import { t as c } from "./_plugin-vue_export-helper-B3ysoDQm.js";
-import { t as l } from "./BaseIcon-DfLoHNUj.js";
-import { t as ee } from "./vue-ui-accordion-Dw4MHKVB.js";
-import { t as te } from "./ColorPicker-Bjwxnvfh.js";
-import { Fragment as ne, Teleport as re, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as g, nextTick as ie, normalizeClass as _, normalizeStyle as v, onBeforeUnmount as ae, onMounted as oe, openBlock as y, ref as b, renderList as se, renderSlot as ce, toDisplayString as x, unref as le, vModelCheckbox as ue, vModelText as de, watch as fe, withCtx as S, withDirectives as pe, withModifiers as me } from "vue";
-//#region src/registerAnnotatorShortcuts.js
-function he(e) {
-	let t = (t) => e.isMacLike.value ? t.metaKey : t.ctrlKey, n = (e) => {
-		let t = e;
-		if (!t) return !1;
-		let n = (t.tagName || "").toLowerCase();
-		return t.isContentEditable || n === "input" || n === "textarea" || n === "select";
-	}, r = (t) => !!(!e.isSummaryOpen.value || n(t.target) || e.isWriting.value), i = () => {
-		e.isDeleteMode.value = !1, e.isMoveMode.value = !1, e.isResizeMode.value = !1, e.isSelectMode.value = !1, e.isDrawMode.value = !1, e.isTextMode.value = !1, e.activeShape.value = void 0, e.showCaret.value = !1;
-	}, a = (t) => {
-		switch (i(), t) {
-			case "m":
-				e.isMoveMode.value = !0;
-				break;
-			case "r":
-				e.isResizeMode.value = !0;
-				break;
-			case "d":
-				e.isDeleteMode.value = !0;
-				break;
-			case "g":
-				e.isSelectMode.value = !0, e.setShapeTo("group"), e.activeShape.value = "group";
-				break;
-			case "t":
-				e.isTextMode.value = !0, e.isWriting.value = !1, e.showCaret.value = !1;
-				break;
-			default: break;
-		}
-	}, o = (t) => {
-		switch (t) {
-			case "c":
-				e.setShapeTo("circle");
-				break;
-			case "s":
-				e.setShapeTo("rect");
-				break;
-			case "a":
-				e.setShapeTo("arrow");
-				break;
-			case "l":
-				e.setShapeTo("line");
-				break;
-			default: break;
-		}
-	}, s = (t, n) => {
-		let r = e.lastSelectedShape.value;
-		if (!r) return;
-		let i = (e, t) => {
-			typeof r[e] == "number" && (r[e] += t);
-		};
-		switch (r.type) {
-			case "rect":
-			case "circle":
-			case "text":
-				i("x", t), i("y", n);
-				break;
-			case "arrow":
-				i("x", t), i("y", n), i("endX", t), i("endY", n);
-				break;
-			default: break;
-		}
-	}, c = () => {
-		let t = e.lastSelectedShape.value;
-		t && (e.shapes.value = e.shapes.value.filter((e) => e.id !== t.id), e.lastSelectedShape.value = void 0);
-	}, l = !1, ee = null, te = () => {
-		l || (l = !0, e.history?.value?.begin?.("nudge"));
-	}, ne = () => {
-		l && (clearTimeout(ee), ee = setTimeout(() => {
-			l = !1, e.history?.value?.end?.();
-		}, 160));
-	}, re = () => {
-		clearTimeout(ee), l && e.history?.value?.end?.(), l = !1;
-	}, u = (n) => {
-		if (t(n) && !n.shiftKey && n.key.toLowerCase() === "z") {
-			if (r(n)) return;
-			n.preventDefault(), e.undoLastShape?.();
-			return;
-		}
-		if (t(n) && n.shiftKey && n.key.toLowerCase() === "z" || t(n) && n.key.toLowerCase() === "y") {
-			if (r(n)) return;
-			n.preventDefault(), typeof e.redoLastShape == "function" ? e.redoLastShape() : e.history?.value?.redo?.();
-			return;
-		}
-		if (r(n)) return;
-		let l = n.key.toLowerCase();
-		if (l === "escape") {
-			n.preventDefault(), i();
-			return;
-		}
-		if (l === "delete" || l === "backspace") {
-			n.preventDefault(), c();
-			return;
-		}
-		if ([
-			"m",
-			"r",
-			"d",
-			"g",
-			"t"
-		].includes(l)) {
-			n.preventDefault(), a(l);
-			return;
-		}
-		if ([
-			"c",
-			"a",
-			"l",
-			"s"
-		].includes(l)) {
-			n.preventDefault(), o(l);
-			return;
-		}
-		if (n.key === "ArrowUp" || n.key === "ArrowDown" || n.key === "ArrowLeft" || n.key === "ArrowRight") {
-			n.preventDefault(), te();
-			let e = n.shiftKey ? 10 : 1;
-			n.key === "ArrowUp" && s(0, -e), n.key === "ArrowDown" && s(0, e), n.key === "ArrowLeft" && s(-e, 0), n.key === "ArrowRight" && s(e, 0), ne();
-		}
-	}, d = (e) => {
-		e.key.startsWith("Arrow") && ne();
-	};
-	return window.addEventListener("keydown", u), window.addEventListener("keyup", d), function() {
-		window.removeEventListener("keydown", u), window.removeEventListener("keyup", d), re();
-	};
-}
-//#endregion
-//#region src/atoms/TeleportedTooltip.vue
-var ge = { class: "teleport-tooltip__inner" }, C = /* @__PURE__ */ c({
-	__name: "TeleportedTooltip",
-	props: {
-		show: {
-			type: Boolean,
-			default: !1
-		},
-		x: {
-			type: Number,
-			required: !0
-		},
-		y: {
-			type: Number,
-			required: !0
-		},
-		placement: {
-			type: String,
-			default: "top"
-		},
-		styleObject: {
-			type: Object,
-			default() {
-				return {};
-			}
-		},
-		delay: {
-			type: Number,
-			default: 0
-		},
-		delayIn: {
-			type: Number,
-			default: 300
-		},
-		delayOut: {
-			type: Number,
-			default: 0
-		}
-	},
-	setup(e) {
-		let t = e, n = u(() => t.delayIn ?? t.delay), r = u(() => t.delayOut ?? t.delay), i = b(!1), a = null, o = null;
-		function s() {
-			a &&= (clearTimeout(a), null), o &&= (clearTimeout(o), null);
-		}
-		function c() {
-			s();
-			let e = Math.max(0, n.value || 0);
-			e === 0 ? i.value = !0 : a = setTimeout(() => {
-				i.value = !0, a = null;
-			}, e);
-		}
-		function l() {
-			s();
-			let e = Math.max(0, r.value || 0);
-			e === 0 ? i.value = !1 : o = setTimeout(() => {
-				i.value = !1, o = null;
-			}, e);
-		}
-		fe(() => t.show, (e) => {
-			e ? c() : l();
-		}, { immediate: !0 }), oe(() => {
-			t.show && c();
-		}), ae(() => {
-			s();
-		});
-		let ee = u(() => ({
-			position: "fixed",
-			zIndex: 2147483647,
-			top: `${t.y}px`,
-			left: `${t.x}px`,
-			transform: t.placement === "bottom" ? "translate(-50%, 8px)" : "translate(-50%, -100%)",
-			pointerEvents: "none",
-			...t.styleObject
-		}));
-		return (t, n) => (y(), d(re, { to: "body" }, [i.value ? (y(), p("div", {
-			key: 0,
-			class: _(["teleport-tooltip", e.placement]),
-			style: v(ee.value),
-			role: "tooltip",
-			"aria-hidden": "false"
-		}, [m("div", ge, [ce(t.$slots, "default", {}, void 0, !0)])], 6)) : f("", !0)]));
-	}
-}, [["__scopeId", "data-v-c292996f"]]), _e = /* @__PURE__ */ e({ default: () => vt }), ve = { class: "vue-data-ui-component vue-ui-annotator" }, ye = { "data-dom-to-png-ignore": "" }, be = ["disabled"], xe = ["disabled"], Se = ["disabled"], Ce = ["disabled"], we = ["disabled"], Te = ["disabled"], Ee = ["disabled"], De = ["disabled"], Oe = ["disabled"], ke = {
-	class: "tool-selection",
-	style: { "margin-top": "6px" }
-}, Ae = {
-	viewBox: "0 0 12 12",
-	style: { width: "100%" }
-}, je = ["fill"], Me = { key: 0 }, Ne = { class: "tool-input" }, Pe = ["checked"], Fe = {
-	viewBox: "0 0 12 12",
-	style: { width: "100%" }
-}, Ie = ["fill"], Le = { key: 1 }, Re = { class: "tool-input" }, ze = ["checked"], Be = {
-	viewBox: "0 0 24 24",
-	style: { width: "100%" }
-}, Ve = ["stroke"], He = { key: 2 }, Ue = { style: {
-	display: "flex",
-	"flex-direction": "column",
-	"align-items": "center",
-	"justify-content": "center"
-} }, We = { class: "tool-input" }, Ge = { key: 3 }, Ke = { style: {
-	display: "flex",
-	"flex-direction": "column",
-	"align-items": "center",
-	"justify-content": "center"
-} }, qe = { class: "tool-input" }, Je = {
-	viewBox: "0 0 24 24",
-	height: "24",
-	width: "24",
-	style: {
-		"margin-bottom": "-5px",
-		"margin-top": "-10px"
-	}
-}, Ye = ["checked"], Xe = { key: 4 }, Ze = { style: {
-	display: "flex",
-	"flex-direction": "column",
-	"align-items": "center",
-	"justify-content": "center"
-} }, Qe = { class: "tool-input" }, $e = { key: 5 }, et = { key: 6 }, tt = ["disabled"], nt = { key: 7 }, rt = ["disabled"], it = { key: 8 }, at = { key: 9 }, ot = { key: 10 }, st = { key: 11 }, ct = {
-	style: {
-		display: "flex",
-		"flex-direction": "column",
-		"align-items": "center",
-		"justify-content": "center"
-	},
-	class: "tooltip"
-}, lt = { style: {
-	display: "flex",
-	"flex-direction": "column",
-	"align-items": "start",
-	"justify-content": "center"
-} }, ut = {
-	class: "tool-input",
-	style: { "font-variant-numeric": "tabular-nums" }
-}, dt = ["id"], ft = [
-	"viewBox",
-	"width",
-	"height"
-], pt = [
-	"width",
-	"height",
-	"pointer-events"
-], mt = ["innerHTML"], ht = [
-	"height",
-	"viewBox",
-	"width"
-], gt = ["cx", "cy"], _t = "annotations", vt = /* @__PURE__ */ c({
-	__name: "vue-ui-annotator",
-	props: {
-		config: {
-			type: Object,
-			default() {
-				return {};
-			}
-		},
-		dataset: {
-			type: Object,
-			default() {
-				return {
-					shapes: [],
-					lastSelectedShape: void 0
-				};
-			}
-		}
-	},
-	emits: ["toggleOpenState", "saveAnnotations"],
-	setup(e, { emit: c }) {
-		let re = e, ge = c, _e = b(n()), { isImaging: vt, generateImage: yt } = o({
-			elementId: _e.value,
-			fileName: _t
-		}), w = b(void 0), bt = b(1), T = b({
-			start: {
-				x: 0,
-				y: 0
-			},
-			end: {
-				x: 0,
-				y: 0
-			}
-		}), E = b(void 0), D = b(void 0), xt = b(!1), O = b(!1), St = b(!1), k = b(!1), Ct = b(!1), wt = b(!0), A = b(!1), Tt = b(!1), Et = b(!1), j = b(!1), Dt = b(!1), M = b(!1), N = b(!1), Ot = b(!1), P = b(!1), kt = b(!1), F = b(!1), I = b(re.dataset?.lastSelectedShape ?? void 0), L = b({
-			x: 0,
-			y: 0
-		}), At = b(!0), R = b([]), z = b(re.dataset?.shapes || []);
-		b([]);
-		let jt = b(Math.round(Math.random()) * 1e5), Mt = b(1e3), Nt = b(1e3), B = b({
-			arrow: {
-				color: "grey",
-				filled: !0
-			},
-			circle: {
-				color: "grey",
-				filled: !1,
-				radius: 3,
-				strokeWidth: 2
-			},
-			rect: {
-				color: "grey",
-				filled: !1,
-				strokeWidth: 2,
-				height: 12,
-				width: 12
-			}
-		}), Pt = b("#1A1A1A"), V = b(!1), Ft = b(1), It = b(void 0), Lt = b(1), Rt = b(1), H = b("start"), zt = b(20), Bt = b(100), Vt = r, Ht = b(null), U = b(!1), W = b(null), G = b({
-			x: 0,
-			y: 0
-		}), Ut = b(null), K = b([]), Wt = b(!1), Gt = b(null), Kt = b({
-			undo: 0,
-			redo: 0
-		}), qt = b(null);
-		b(null), b(null);
-		let Jt = b(null), q = u(() => {
-			let e = a().vue_ui_annotator;
-			return Object.keys(re.config || {}).length ? i(t({
-				defaultConfig: e,
-				userConfig: re.config
-			})) : e;
-		}), J = u(() => q.value.useCursorPointer), Y = u(() => {
-			let e = q.value.style.tooltips;
-			return {
-				backgroundColor: e.backgroundColor,
-				color: e.color,
-				border: e.border,
-				borderRadius: `${e.borderRadius}px`,
-				boxShadow: e.boxShadow
-			};
-		}), Yt = u(() => z.value.filter((e) => !["line", "group"].includes(e.type)).length > 1), Xt = u(() => Vt[Bt.value > 98 ? 98 : Bt.value]), Zt = u(() => {
-			switch (!0) {
-				case k.value: return "default";
-				case j.value: return "move";
-				case P.value: return "text";
-				case M.value: return "se-resize";
-				default: return "";
-			}
-		}), Qt = u(() => z.value), X = b(null);
-		function $t(e) {
-			if (e) switch (!0) {
-				case e.type === "rect": return `
-                <rect
-                id="${e.id}" 
-                style="stroke-dasharray: 10; display:${D.value && D.value === e.id ? "initial" : "none"}"
-                x="${e.x - 20}"
-                y="${e.y - 20}"
-                height="${e.rectHeight + 40}"
-                width="${e.rectWidth + 40}"
-                fill="transparent"
-                stroke="grey"
-                />
-            `;
-				case e.type === "circle": return `
-                <rect
-                id="${e.id}" 
-                style="stroke-dasharray: 10; display:${D.value && D.value === e.id ? "initial" : "none"}"
-                x="${e.x - e.circleRadius - 20}"
-                y="${e.y - e.circleRadius - 20}"
-                height="${e.circleRadius * 2 + 40}"
-                width="${e.circleRadius * 2 + 40}"
-                fill="transparent"
-                stroke="grey"
-                />
-            `;
-				case e.type === "arrow":
-					let t = e.endX - e.x > 0, n = e.endY - e.y > 0;
-					return `
-                <rect
-                id="${e.id}" 
-                style="stroke-dasharray: 10; display:${D.value && D.value === e.id ? "initial" : "none"}"
-                x="${t ? e.x - 20 : e.endX - 20}"
-                y="${n ? e.y - 20 : e.endY - 20}"
-                height="${n ? e.endY - e.y + 40 : e.y - e.endY + 40}"
-                width="${t ? e.endX - e.x + 40 : e.x - e.endX + 40}"
-                fill="transparent"
-                stroke="grey"
-                />
-            `;
-				case e.type === "text":
-					let r = X.value ? Array.from(X.value.getElementsByTagName("text")).find((t) => t.id === e.id) : null;
-					if (!r) return;
-					let { x: i, y: a, width: o, height: s } = r.getBBox();
-					return `
-                <rect
-                id="${e.id}" 
-                style="stroke-dasharray: 10; display:${D.value && D.value === e.id ? "initial" : "none"}"
-                x="${i - 20}"
-                y="${a - 20}"
-                height="${s + 40}"
-                width="${o + 40}"
-                fill="transparent"
-                stroke="grey"
-                />
-            `;
-				default: return "";
-			}
-		}
-		function en(e, t = !1) {
-			switch (!0) {
-				case e.type === "circle": return `
-                <g id="${e.id}" style="display:${k.value ? "initial" : "none"};">
-                    <circle id="${e.id}" cx="${e.x}" cy="${e.y}" r="12" fill="red"/>
-                    <line stroke="white" stroke-width="2" id="${e.id}" x1="${e.x - 4}" y1="${e.y - 4}" x2="${e.x + 4}" y2="${e.y + 4}"/>
-                    <line stroke="white" stroke-width="2" id="${e.id}" x1="${e.x + 4}" y1="${e.y - 4}" x2="${e.x - 4}" y2="${e.y + 4}"/>
-                </g>
-            `;
-				case e.type === "text":
-					let n, r = [
-						-8,
-						-12,
-						-4,
-						-12,
-						-4
-					];
-					switch (!0) {
-						case e.textAlign === "start":
-							n = t ? [
-								-20,
-								-24,
-								-16,
-								-16,
-								-24
-							] : [
-								-16,
-								-20,
-								-12,
-								-12,
-								-20
-							];
-							break;
-						case e.textAlign === "middle":
-							n = [
-								0,
-								-4,
-								4,
-								4,
-								-4
-							], r = [
-								-32,
-								-36,
-								-28,
-								-36,
-								-28
-							];
-							break;
-						case e.textAlign === "end":
-							n = [
-								16,
-								20,
-								12,
-								12,
-								20
-							];
-							break;
-						default:
-							n = [
-								0,
-								0,
-								0
-							];
-							break;
-					}
-					return `
-                <g id="${e.id}" style="display:${k.value ? "initial" : "none"};">
-                    <circle id="${e.id}" cx="${e.x + n[0]}" cy="${e.y + r[0]}" r="12" fill="red"/>
-                    <line stroke="white" stroke-width="2" id="${e.id}" x1="${e.x + n[1]}" y1="${e.y + r[1]}" x2="${e.x + n[2]}" y2="${e.y + r[2]}"/>
-                    <line stroke="white" stroke-width="2" id="${e.id}" x1="${e.x + n[3]}" y1="${e.y + r[3]}" x2="${e.x + n[4]}" y2="${e.y + r[4]}"/>
-                </g>
-            `;
-				default: return `
-                <g id="${e.id}" style="display:${k.value ? "initial" : "none"};">
-                    <circle id="${e.id}" cx="${e.x - 4}" cy="${e.y - 4}" r="12" fill="red"/>
-                    <line stroke="white" stroke-width="2" id="${e.id}" x1="${e.x - 8}" y1="${e.y - 8}" x2="${e.x}" y2="${e.y}"/>
-                    <line stroke="white" stroke-width="2" id="${e.id}" x1="${e.x}" y1="${e.y - 8}" x2="${e.x - 8}" y2="${e.y}"/>
-                </g>
-            `;
-			}
-		}
-		function tn(e) {
-			switch (!0) {
-				case e.textAlign === "middle": return `<path class="vue-ui-annotator-caret" stroke="black" stroke-width="2" d="M${e.x},${e.y - e.fontSize} ${e.x},${e.y - e.fontSize - 15}" /> <path class="vue-ui-annotator-caret" stroke="black" stroke-width="2" d="M${e.x - 3},${e.y - e.fontSize - 5} ${e.x},${e.y - e.fontSize} ${e.x + 3},${e.y - e.fontSize - 5}"/>`;
-				case e.textAlign === "start":
-					let t = e.isBulletTextMode ? e.fontSize : 0;
-					return `<path class="vue-ui-annotator-caret" d="M${e.x - 20 - t},${e.y - e.fontSize / 6} ${e.x - 5 - t},${e.y - e.fontSize / 6}" stroke="black" stroke-width="2" />
-                    <path class="vue-ui-annotator-caret" d="M${e.x - 10 - t},${e.y - e.fontSize / 3} ${e.x - 5 - t},${e.y - e.fontSize / 6} ${e.x - 10 - t},${e.y}" stroke="black" stroke-width="2">`;
-				case e.textAlign === "end": return `<path class="vue-ui-annotator-caret" d="M${e.x + 20},${e.y - e.fontSize / 6} ${e.x + 5},${e.y - e.fontSize / 6}" stroke="black" stroke-width="2" />
-                    <path class="vue-ui-annotator-caret" d="M${e.x + 10},${e.y - e.fontSize / 3} ${e.x + 5},${e.y - e.fontSize / 6} ${e.x + 10},${e.y}" stroke="black" stroke-width="2">`;
-				default: return "";
-			}
-		}
-		function nn(e, t, n = !1) {
-			switch (!0) {
-				case e.textAlign === "start": return `
-            <g id="${e.id}">
-                <rect 
-                    id="${e.id}" 
-                    style="display:${I.value && I.value.id === e.id ? "initial" : "none"};" 
-                    x="${e.x}" 
-                    y="${e.y - 50}" 
-                    height="${e.lines === 0 || e.lines === 1 ? e.fontSize * 4 : e.fontSize * 2 * e.lines}"
-                    width="100" 
-                    fill="rgba(0,0,0,0)"
-                />
-                <text
-                style="user-select:none; height:100px;"
-                id="${e.id}"
-                x="${e.x}"
-                y="${e.y}"
-                text-anchor="${e.textAlign}"
-                font-size="${e.fontSize}"
-                fill="${e.color}"
-                font-weight="${e.isBold ? "bold" : "normal"}"
-                font-style="${e.isItalic ? "italic" : "normal"}"
-                text-decoration="${e.isUnderline ? "underline" : "none"}"
-                >
-                    ${t.join("")}
-                </text>
-                ${V.value && I.value && I.value.id === e.id ? tn(e) : ""}
-                ${en(e, n)}
-            </g> 
-            `;
-				case e.textAlign === "middle": return `
-                <g id="${e.id}">
-                <rect 
-                    id="${e.id}" 
-                    style="display:${I.value && I.value.id === e.id ? "initial" : "none"};" 
-                    x="${e.x - 50}" 
-                    y="${e.y - 50}" 
-                    height="${e.lines === 0 || e.lines === 1 ? e.fontSize * 4 : e.fontSize * 2 * e.lines}"
-                    width="100" 
-                    fill="rgba(0,0,0,0)"
-                />
-                <text
-                style="user-select:none; height:100px;"
-                id="${e.id}"
-                x="${e.x}"
-                y="${e.y}"
-                text-anchor="${e.textAlign}"
-                font-size="${e.fontSize}"
-                fill="${e.color}"
-                font-weight="${e.isBold ? "bold" : "normal"}"
-                font-style="${e.isItalic ? "italic" : "normal"}"
-                text-decoration="${e.isUnderline ? "underline" : "none"}"
-                >
-                    ${t.join("")}
-                </text>
-                ${V.value && I.value && I.value.id === e.id ? tn(e) : ""}
-                ${en(e)}
-                </g>
-            `;
-				case e.textAlign === "end": return `
-            <g id="${e.id}">
-                <rect 
-                    id="${e.id}" 
-                    style="display:${I.value && I.value.id === e.id ? "initial" : "none"};" 
-                    x="${e.x - 100}" 
-                    y="${e.y - 50}" 
-                    height="${e.lines === 0 || e.lines === 1 ? e.fontSize * 4 : e.fontSize * 2 * e.lines}"
-                    width="100" 
-                    fill="rgba(0,0,0,0)"
-                />
-                <text
-                style="user-select:none; height:100px;"
-                id="${e.id}"
-                x="${e.x}"
-                y="${e.y}"
-                text-anchor="${e.textAlign}"
-                font-size="${e.fontSize}"
-                fill="${e.color}"
-                font-weight="${e.isBold ? "bold" : "normal"}"
-                font-style="${e.isItalic ? "italic" : "normal"}"
-                text-decoration="${e.isUnderline ? "underline" : "none"}"
-                >
-                    ${t.join("")}
-                </text>
-                ${V.value && I.value && I.value.id === e.id ? tn(e) : ""}
-                ${en(e)}
-            </g> 
-            `;
-				default: return "";
-			}
-		}
-		let rn = u(() => Qt.value.map((e) => {
-			switch (!0) {
-				case e && e.type === "arrow":
-					let t = e.strokeWidth > 3 ? 5 : 10, n = e.strokeWidth > 3 ? 2.5 : 5;
-					return {
-						html: `
-          <defs>
-          <marker 
-              id="${e.id}" 
-              markerWidth="${t}" 
-              markerHeight="${t}" 
-              refX="0" 
-              refY="${n}" 
-              orient="auto"
-          >
-              <polygon 
-              points="0 0,${t} ${n}, 0 ${t}" 
-              fill="${e.color}"
-              />
-          </marker>
-          </defs>
-          ${$t(e)}
-          <g id="${e.id}">
-              <path 
-              style="stroke-linecap: round !important; ${e.isDash ? `stroke-dasharray: ${e.strokeWidth * 3}` : ""}" 
-              stroke="${e.color}" 
-              id="${e.id}" 
-              d="M${e.x},${e.y} ${e.endX},${e.endY}" 
-              stroke-width="${e.strokeWidth}" 
-              marker-end="url(#${e.id})"
-              />
-          </g>
-          <g id="${e.id}">
-          <rect 
-              id="${e.id}"
-              x="${e.x - 10}"
-              y="${e.y - 10}"
-              height="20"
-              width="20"
-              fill="rgba(0,0,0,0.3)"
-              style="display:${M.value || j.value ? "initial" : "none"}; rx:1 !important; ry:1 !important;"
-          />
-          </g>
-          ${en(e)}
-          </g>
-          `,
-						id: e.id
-					};
-				case e && e.type === "circle": return {
-					html: `
-          <g id="${e.id}">
-              ${$t(e)}
-              <circle 
-              id="${e.id}" 
-              cx="${e.x}" 
-              cy="${e.y}" 
-              r="${e.circleRadius ? e.circleRadius : Number.MIN_VALUE}"
-              fill="${e.isFilled ? e.color + e.alpha : "rgba(255,255,255,0.001)"}" 
-              stroke="${e.color + e.alpha}" 
-              stroke-width="${e.strokeWidth}"
-              style="${e.isDash ? `stroke-dasharray: ${e.strokeWidth * 3}` : ""}"
-              >
-              </circle>
-          </g>
-          
-          ${en(e)}`,
-					id: e.id
-				};
-				case e && e.type === "group": return {
-					html: `<g id="${e.id}">
-            <rect
-                id="${M.value ? "" : e.id}"
-                x="${e.x}"
-                y="${e.y}"
-                fill="transparent"
-                height="${e.rectHeight}"
-                width="${e.rectWidth}"
-                stroke="grey"
-                stroke-width="1"
-                style="rx:1 !important; ry:1 !important; ${e.isDash ? `stroke-dasharray: ${e.strokeWidth * 3}` : ""}; display:${N.value || k.value || D.value && D.value === e.id ? "initial" : "none"};"
-                        />
-            <g id="${e.id}">
-            ${e.content ? e.content : ""}
-            </g>
-            ${en(e)}
-            </g> `,
-					id: e.id
-				};
-				case e && e.type === "rect": return {
-					html: `<g id="${e.id}">
-            ${$t(e)}
-            <rect
-                id="${M.value ? "" : e.id}"
-                x="${e.x}"
-                y="${e.y}"
-                fill="${e.isFilled ? e.color + e.alpha : "rgba(255,255,255,0.001)"}"
-                height="${e.rectHeight}"
-                width="${e.rectWidth}"
-                stroke="${e.color + e.alpha}"
-                stroke-width="${e.strokeWidth}"
-                style="rx:1 !important; ry:1 !important; ${e.isDash ? `stroke-dasharray: ${e.strokeWidth * 3}` : ""}"
-            />
-            <rect id="${e.id}"
-                x="${e.x + e.rectWidth}"
-                y="${e.y + e.rectHeight}"
-                height="20"
-                width="20"
-                fill="rgba(0,0,0,0.3)"
-                style="display:${M.value ? "initial" : "none"}; rx:1 !important; ry:1 !important;"
-            />
-            ${en(e)}
-            </g> `,
-					id: e.id
-				};
-				case e && e.type === "line": return {
-					html: `
-                <g id="${e.id}">
-                    <path 
-                    id="${e.id}" 
-                    d="M${e.path ? e.path : ""}" 
-                    style="stroke:${e.color + e.alpha} !important; fill:none; stroke-width:${e.strokeWidth} !important; stroke-linecap: round !important; stroke-linejoin: round !important;"        
-                    />
-            ${en(e)}
-                </g>
-                `,
-					id: e.id
-				};
-				case e && e.type === "text":
-					let r = e.textContent.split("‎"), i = [];
-					for (let t = 0; t < r.length; t += 1) i.push(`
-        ${e.isBulletTextMode ? `<tspan x="${e.x - e.fontSize}" y="${e.y + e.fontSize * t}" id="${e.id}" font-size="${e.fontSize / 2}">⬤</tspan>` : ""}
-                <tspan id="${e.id}" x="${e.x}" y="${e.y + e.fontSize * t}">
-                    ${r[t]}
-                </tspan>`);
-					return {
-						html: `
-            ${$t(e)}
-            ${nn(e, i, e.isBulletTextMode)}
-            `,
-						id: e.id
-					};
-				default: break;
-			}
-		}));
-		function Z(e) {
-			if (e == null) return e;
-			try {
-				return typeof structuredClone == "function" ? structuredClone(e) : JSON.parse(JSON.stringify(e));
-			} catch {
-				return Array.isArray(e) ? e.map((e) => Z(e)) : typeof e == "object" ? Object.fromEntries(Object.entries(e).map(([e, t]) => [e, Z(t)])) : e;
-			}
-		}
-		function an(e = !1) {
-			if (!w.value || !Ct.value) return;
-			T.value.end = {
-				x: L.value.x,
-				y: L.value.y
-			};
-			let t;
-			z.value.length > 0 && E.value && (t = [...z.value].find((e) => e.id === E.value.id));
-			let n, r, i;
-			t && (n = t.x - T.value.end.x, r = t.y - T.value.end.y, i = Math.sqrt(n * n + r * r));
-			let a, o;
-			switch (e ? (a = Math.max(T.value.end.x, t.x), o = Math.min(T.value.end.x, t.x), Math.max(T.value.end.y, t.y), Math.min(T.value.end.y, t.y)) : (a = Math.max(T.value.end.x, T.value.start.x), o = Math.min(T.value.end.x, T.value.start.x), Math.max(T.value.end.y, T.value.start.y), Math.min(T.value.end.y, T.value.start.y)), !0) {
-				case w.value === "arrow":
-					z.value.at(-1).endX = T.value.end.x, z.value.at(-1).endY = T.value.end.y;
-					break;
-				case w.value === "circle":
-					z.value.at(-1).circleRadius = wt.value ? Z(a - o) + 20 : i + 20;
-					break;
-				case w.value === "line":
-					z.value.at(-1).path += ` ${L.value.x} ${L.value.y} `;
-					break;
-				case ["rect", "group"].includes(w.value): z.value.at(-1).rectWidth = Z(T.value.end.x - z.value.at(-1).x) > 0 ? Z(T.value.end.x - z.value.at(-1).x) : 20, z.value.at(-1).rectHeight = Z(T.value.end.y - z.value.at(-1).y) > 0 ? Z(T.value.end.y - z.value.at(-1).y) : 20;
-				default: break;
-			}
-		}
-		function on() {
-			if (!Ct.value) {
-				qt.value = null;
-				return;
-			}
-			an(), qt.value = requestAnimationFrame(on);
-		}
-		function sn(e) {
-			let t = z.value.findIndex((t) => t.id === e);
-			if (t > -1 && t !== z.value.length - 1) {
-				let [e] = z.value.splice(t, 1);
-				z.value.push(e);
-			}
-		}
-		function cn(e) {
-			let t = (e) => !!e && z.value.some((t) => t.id === e);
-			if (t(e?.target?.id)) return e.target.id;
-			let n = X.value?.querySelector(".annotator__glass");
-			if (!n) return null;
-			let r = n.style.pointerEvents;
-			n.style.pointerEvents = "none";
-			let i = document.elementFromPoint(e.clientX, e.clientY);
-			return n.style.pointerEvents = r || "all", t(i?.id) ? i.id : null;
-		}
-		function ln(e = {}) {
-			let { maxEntries: t = 200, maxBytes: n = 2e6 } = e, r = {
-				open: !1,
-				before: null,
-				undo: [],
-				redo: []
-			}, i = {
-				undo: 0,
-				redo: 0
-			}, a = (e) => typeof e == "string" ? e.length * 2 : 0, o = () => JSON.stringify({
-				shapes: Z(z.value),
-				lastSelectedShape: Z(I.value)
-			}), s = (e) => {
-				let t = JSON.parse(e);
-				z.value = t.shapes, I.value = t.lastSelectedShape;
-			}, c = () => {
-				Kt.value.undo = r.undo.length, Kt.value.redo = r.redo.length;
-			}, l = (e, o) => {
-				let s = r[e];
-				for (s.push(o), i[e] += a(o); s.length > t || i[e] > n;) {
-					let t = s.shift();
-					i[e] -= a(t);
-				}
-			};
-			return {
-				begin() {
-					r.open || (r.open = !0, r.before = o());
-				},
-				end() {
-					r.open && (r.open = !1, o() !== r.before && (l("undo", r.before), r.redo.length = 0, i.redo = 0), r.before = null, c());
-				},
-				undo() {
-					let e = r.undo.pop();
-					e && (i.undo -= a(e), l("redo", o()), s(e), c());
-				},
-				redo() {
-					let e = r.redo.pop();
-					e && (i.redo -= a(e), l("undo", o()), s(e), c());
-				},
-				size() {
-					return {
-						undo: r.undo.length,
-						redo: r.redo.length,
-						approxBytes: {
-							undo: i.undo,
-							redo: i.redo
-						}
-					};
-				}
-			};
-		}
-		function un() {
-			if (!Ut.value) return;
-			let e = Ut.value.getBoundingClientRect();
-			G.value = {
-				x: e.left + e.width / 2,
-				y: e.top
-			};
-		}
-		function Q(e, t, n = "top") {
-			W.value = e, Ut.value = t.currentTarget || t.target, un(), U.value = !0, window.addEventListener("scroll", un, !0), window.addEventListener("resize", un, { passive: !0 });
-		}
-		function $() {
-			U.value = !1, W.value = null, Ut.value = null, window.removeEventListener("scroll", un, !0), window.removeEventListener("resize", un);
-		}
-		function dn(e) {
-			let t = e?.target && e.target.id || E.value && E.value.id, n = z.value.find((e) => e.id === t);
-			if (!n) {
-				Ht.value = null;
-				return;
-			}
-			I.value = n;
-			let r = L.value.x, i = L.value.y;
-			switch (n.type) {
-				case "rect":
-				case "circle":
-				case "text":
-					Ht.value = {
-						dx: r - n.x,
-						dy: i - n.y
-					};
-					break;
-				case "arrow":
-					Ht.value = {
-						dx: r - n.x,
-						dy: i - n.y,
-						endDx: r - n.endX,
-						endDy: i - n.endY
-					};
-					break;
-				case "group":
-					Ht.value = {
-						dx: r - (n.x || 0),
-						dy: i - (n.y || 0)
-					};
-					break;
-				default:
-					Ht.value = {
-						dx: 0,
-						dy: 0
-					};
-					break;
-			}
-		}
-		function fn(e) {
-			let t = z.value.find((e) => e.id === I.value.id);
-			switch (!0) {
-				case e === "front":
-					z.value = z.value.filter((e) => e.id !== t.id), z.value.push(t);
-					break;
-				case e === "back":
-					z.value = z.value.filter((e) => e.id !== t.id), z.value = [t, ...z.value];
-					break;
-				default: return;
-			}
-		}
-		function pn() {
-			if (!I.value?.id) return;
-			let e = {
-				...I.value,
-				id: `${I.value.id}_copy_${n()}`,
-				x: I.value.x - 100 < 0 ? 1 : I.value.x - 100,
-				y: I.value.y - 100 < 0 ? 1 : I.value.y - 100
-			};
-			z.value.push(e);
-		}
-		function mn(e) {
-			e.preventDefault(), At.value = !1, e.target && e.target.id && (D.value = e.target.id);
-		}
-		function hn() {
-			!I.value || !I.value.id.includes("text") || I.value.textContent === "" && (z.value = z.value.filter((e) => e.id !== I.value.id), I.value = z.value.at(-1));
-		}
-		function gn(e) {
-			if (k.value) return;
-			e.preventDefault(), e.stopPropagation(), hn(), P.value ? (F.value = !0, V.value = !0) : (F.value = !1, V.value = !1, P.value = !1);
-			let t = `text_${n()}`;
-			if (F.value) {
-				K.value?.begin(), z.value.push({
-					id: t,
-					type: "text",
-					lines: 0,
-					x: L.value.x,
-					y: L.value.y,
-					textContent: "",
-					fontSize: Z(zt.value),
-					textAlign: Z(H.value),
-					isBold: Z(xt.value),
-					isItalic: Z(Tt.value),
-					isUnderline: Z(kt.value),
-					color: Z(Pt.value),
-					isBulletTextMode: Z(O.value)
-				}), E.value = z.value.at(-1), I.value = z.value.at(-1), K.value?.end();
-				return;
-			}
-			let r = () => {
-				St.value = z.value.find((t) => t.id === e.target.id).isDash;
-			}, i = () => {
-				bt.value = z.value.find((t) => t.id === e.target.id).strokeWidth;
-			};
-			if (N.value = !1, e.target.id.includes("arrow")) {
-				w.value = "arrow", r(), i();
-				return;
-			}
-			if (e.target.id.includes("circle")) {
-				w.value = "circle", B.value.circle.filled = z.value.find((t) => t.id === e.target.id).isFilled, r(), i();
-				return;
-			}
-			if (e.target.id.includes("rect")) {
-				w.value = "rect", B.value.rect.filled = z.value.find((t) => t.id === e.target.id).isFilled, r(), i();
-				return;
-			}
-			if (e.target.id.includes("line")) {
-				w.value = "line", i();
-				return;
-			}
-			if (e.target.id.includes("text")) {
-				P.value = !0, F.value = !0, V.value = !0;
-				let t = z.value.find((t) => t.id === e.target.id);
-				t && t.textAlign && (H.value = z.value.find((t) => t.id === e.target.id).textAlign), t && (O.value = z.value.find((t) => t.id === e.target.id).isBulletTextMode);
-				return;
-			}
-		}
-		function _n(e) {
-			!I.value || I.value.type !== "text" || (I.value.textAlign = e);
-		}
-		function vn() {
-			K.value?.undo?.();
-		}
-		function yn() {
-			K.value?.redo?.();
-		}
-		let bn = [
-			16,
-			17,
-			18,
-			20,
-			27,
-			33,
-			34,
-			35,
-			36,
-			37,
-			38,
-			39,
-			40,
-			45,
-			91,
-			112,
-			113,
-			114,
-			115,
-			116,
-			117,
-			118,
-			119,
-			120,
-			121,
-			122,
-			123,
-			221,
-			255,
-			"Unidentified"
-		];
-		function xn(e) {
-			if (At.value) return;
-			e.preventDefault();
-			let t = e.keyCode;
-			if (!F.value) return;
-			V.value = !0;
-			let n;
-			if (n = I.value.type === "text" ? z.value.find((e) => e.id === I.value.id) : z.value.at(-1), E.value = n, n.type === "text") switch (E.value.isBold = Z(xt.value), E.value.isItalic = Z(Tt.value), E.value.isUnderline = Z(kt.value), !0) {
-				case [8, 46].includes(t):
-					n.textContent = n.textContent.slice(0, -1);
-					break;
-				case t === 9:
-					n.textContent += "&nbsp; &nbsp; &nbsp; &nbsp;";
-					break;
-				case t === 13:
-					n.lines += 1, n.textContent += "‎";
-					return;
-				case bn.includes(t): return;
-				default: n.textContent += e.key;
-			}
-		}
-		function Sn() {
-			if (R.value = [], w.value !== "group") {
-				N.value = !1, z.value = z.value.filter((e) => e.type !== "group");
-				return;
-			}
-			let e = z.value.at(-1);
-			if (z.value.forEach((t) => {
-				if (t.type !== "group") switch (!0) {
-					case t.type === "arrow":
-						let n = t.x <= t.endX && t.y <= t.endY && e.x <= t.x && e.y <= t.y && e.x + e.rectWidth >= t.endX && e.y + e.rectHeight >= t.endY, r = t.endY < t.y && t.x < t.endX && e.x <= t.x && e.y <= t.y && e.x + e.rectWidth >= t.endX && e.y + e.rectHeight >= t.y, i = t.x > t.endX && t.y < t.endY && e.x <= t.endX && e.y <= t.endY && e.x + e.rectWidth >= t.x && e.y + e.rectHeight >= t.endY, a = t.x > t.endX && t.y > t.endY && e.x <= t.endX && e.y <= t.endY && e.x + e.rectWidth >= t.x && e.y + e.rectHeight >= t.y;
-						(n || r || i || a) && R.value.push(t);
-						break;
-					case t.type === "circle":
-						e.x <= t.x + t.circleRadius && e.y <= t.y + t.circleRadius && t.x + t.circleRadius <= e.x + e.rectWidth && t.y + t.circleRadius <= e.y + e.rectHeight && R.value.push(t);
-						break;
-					case t.type === "rect":
-						e.x <= t.x && e.y <= t.y && t.x <= e.x + e.rectWidth && t.y <= e.y + e.rectHeight && t.x + t.rectWidth <= e.x + e.rectWidth && t.y + t.rectHeight <= e.y + e.rectHeight && t.rectWidth <= e.rectWidth && t.rectHeight <= e.rectHeight && R.value.push(t);
-						break;
-					case t.type === "text":
-						e.x <= t.x && e.y <= t.y && R.value.push(t);
-						break;
-					default: break;
-				}
-			}), R.value = R.value.map((t) => ({
-				...t,
-				id: e.id,
-				oldId: t.id,
-				diffX: t.x - e.x,
-				diffY: t.y - e.y,
-				diffEndX: t.endX ? t.endX - e.x : 0,
-				diffEndY: t.endY ? t.endY - e.y : 0
-			})), e.source = R.value, R.value.length > 1) {
-				let t = Z(R.value).map((e) => e.oldId);
-				z.value = z.value.filter((e) => !t.includes(e.id)), R.value.forEach((t) => {
-					switch (!0) {
-						case t.type === "circle":
-							e.content += `
-            <circle
-            id="${t.id}"
-            cx="${t.x}"
-            cy="${t.y}"
-            r="${t.circleRadius ? t.circleRadius : Number.MIN_VALUE}"
-            fill="${t.isFilled ? t.color + t.alpha : "rgba(255,255,255,0.001)"}"
-            stroke="${t.color + t.alpha}" 
-            stroke-width="${t.strokeWidth}"
-            style="${t.isDash ? `stroke-dasharray: ${t.strokeWidth * 3}` : ""}"
-            />
-        `;
-							break;
-						case t.type === "rect":
-							e.content += `
-            <rect
-            id="${M.value ? "" : t.id}"
-            x="${t.x}"
-            y="${t.y}"
-            fill="${t.isFilled ? t.color + t.alpha : "rgba(255,255,255,0.001)"}"
-            height="${t.rectHeight}"
-            width="${t.rectWidth}"
-            stroke="${t.color + t.alpha}"
-            stroke-width="${t.strokeWidth}"
-            style="rx:1 !important; ry:1 !important; ${t.isDash ? `stroke-dasharray: ${t.strokeWidth * 3}` : ""}"
-                        />
-        `;
-							break;
-						case t.type === "arrow":
-							let r = t.strokeWidth > 3 ? 5 : 10, i = t.strokeWidth > 3 ? 2.5 : 5, a = n();
-							e.content += `
-            <g id="${t.id}">
-            <defs>
-                <marker 
-                id="${a}" 
-                markerWidth="${r}" 
-                markerHeight="${r}" 
-                refX="0" 
-                refY="${i}" 
-                orient="auto"
-                >
-                <polygon 
-                points="0 0,${r} ${i}, 0 ${r}" 
-                fill="${t.color}"
-                />
-                </marker>
-            </defs>
-
-            <path 
-                style="stroke-linecap: round !important; ${t.isDash ? `stroke-dasharray: ${t.strokeWidth * 3}` : ""}" 
-                stroke="${t.color}" 
-                id="${t.id}" 
-                d="M${t.x},${t.y} ${t.endX},${t.endY}" 
-                stroke-width="${t.strokeWidth}" 
-                marker-end="url(#${a})"
-            />
-            </g>
-        `;
-							break;
-						case t.type === "text":
-							let o = t.textContent.split("‎"), s = [];
-							for (let e = 0; e < o.length; e += 1) s.push(`
-            ${t.isBulletTextMode ? `<tspan x="${t.x - t.fontSize}" y="${t.y + t.fontSize * e}" id="${t.id}" font-size="${t.fontSize / 2}">⬤</tspan>` : ""}
-            <tspan id="${t.id}" x="${t.x}" y="${t.y + t.fontSize * e}">
-                ${o[e]}
-            </tspan>`);
-							e.content += `
-            ${nn(t, s, t.isBulletTextMode)}
-            `;
-							break;
-						default: break;
-					}
-				});
-			} else z.value = z.value.filter((t) => t.id !== e.id);
-		}
-		function Cn(e) {
-			e.content = "";
-			let t = e.x || 0, r = e.y || 0;
-			(e.source || []).forEach((i) => {
-				switch (i.type) {
-					case "circle": {
-						let n = t + i.diffX, a = r + i.diffY;
-						e.content += `
-          <circle
-            id="${i.id}"
-            cx="${n}"
-            cy="${a}"
-            r="${i.circleRadius ? i.circleRadius : Number.MIN_VALUE}"
-            fill="${i.isFilled ? i.color + i.alpha : "rgba(255,255,255,0.001)"}"
-            stroke="${i.color + i.alpha}"
-            stroke-width="${i.strokeWidth}"
-            style="${i.isDash ? `stroke-dasharray: ${i.strokeWidth * 3}` : ""}"
-          />
-        `;
-						break;
-					}
-					case "rect": {
-						let n = t + i.diffX, a = r + i.diffY;
-						e.content += `
-          <rect
-            id="${M.value ? "" : i.id}"
-            x="${n}"
-            y="${a}"
-            fill="${i.isFilled ? i.color + i.alpha : "rgba(255,255,255,0.001)"}"
-            height="${i.rectHeight}"
-            width="${i.rectWidth}"
-            stroke="${i.color + i.alpha}"
-            stroke-width="${i.strokeWidth}"
-            style="rx:1 !important; ry:1 !important; ${i.isDash ? `stroke-dasharray: ${i.strokeWidth * 3}` : ""}"
-          />
-        `;
-						break;
-					}
-					case "arrow": {
-						let a = t + i.diffX, o = r + i.diffY, s = t + i.diffEndX, c = r + i.diffEndY, l = i.strokeWidth > 3 ? 5 : 10, ee = i.strokeWidth > 3 ? 2.5 : 5, te = `m_${i.id}_${n()}`;
-						e.content += `
-          <g id="${i.id}">
-            <defs>
-              <marker 
-                id="${te}" 
-                markerWidth="${l}" 
-                markerHeight="${l}" 
-                refX="0" 
-                refY="${ee}" 
-                orient="auto">
-                <polygon points="0 0,${l} ${ee}, 0 ${l}" fill="${i.color}" />
-              </marker>
-            </defs>
-            <path
-              style="stroke-linecap: round !important; ${i.isDash ? `stroke-dasharray: ${i.strokeWidth * 3}` : ""}"
-              stroke="${i.color}"
-              id="${i.id}"
-              d="M${a},${o} ${s},${c}"
-              stroke-width="${i.strokeWidth}"
-              marker-end="url(#${te})"
-            />
-          </g>
-        `;
-						break;
-					}
-					case "text": {
-						let n = (i.textContent || "").split("‎").map((e, n) => `
-          ${i.isBulletTextMode ? `<tspan x="${t + i.diffX - i.fontSize}" y="${r + i.diffY + i.fontSize * n}" id="${i.id}" font-size="${i.fontSize / 2}">⬤</tspan>` : ""}
-          <tspan id="${i.id}" x="${t + i.diffX}" y="${r + i.diffY + i.fontSize * n}">
-            ${e}
-          </tspan>
-        `).join("");
-						e.content += `
-          <g id="${i.id}">
-            <text
-              style="user-select:none; height:100px;"
-              id="${i.id}"
-              x="${t + i.diffX}"
-              y="${r + i.diffY}"
-              text-anchor="${i.textAlign}"
-              font-size="${i.fontSize}"
-              fill="${i.color}"
-              font-weight="${i.isBold ? "bold" : "normal"}"
-              font-style="${i.isItalic ? "italic" : "normal"}"
-              text-decoration="${i.isUnderline ? "underline" : "none"}">
-              ${n}
-            </text>
-          </g>
-        `;
-						break;
-					}
-					default: break;
-				}
-			});
-		}
-		function wn(e) {
-			e.relatedTarget && X.value && X.value.contains(e.relatedTarget) || (At.value = !0, D.value = void 0);
-		}
-		function Tn() {
-			if (Ct.value = !0, !w.value && !N.value || !Ct.value) return;
-			wt.value = !0, T.value.start = {
-				x: L.value.x,
-				y: L.value.y
-			};
-			let e = `${N.value ? "group" : w.value}_${n()}`;
-			switch (!0) {
-				case w.value === "arrow":
-					z.value.push({
-						id: e,
-						x: L.value.x,
-						y: L.value.y,
-						endX: L.value.x,
-						endY: L.value.y,
-						type: w.value,
-						color: Z(Pt.value),
-						strokeWidth: Z(Math.abs(bt.value)),
-						isDash: Z(St.value)
-					}), I.value = z.value.at(-1);
-					break;
-				case w.value === "circle":
-					z.value.push({
-						alpha: B.value.circle.filled ? Xt.value : "",
-						id: e,
-						color: Z(Pt.value),
-						isFilled: Z(B.value.circle.filled),
-						circleRadius: Z(B.value.circle.radius),
-						circleStrokeWidth: Z(B.value.circle.strokeWidth),
-						type: w.value,
-						x: L.value.x,
-						y: L.value.y,
-						strokeWidth: Z(Math.abs(bt.value)),
-						isDash: Z(St.value)
-					}), I.value = z.value.at(-1);
-					break;
-				case w.value === "line":
-					z.value.push({
-						alpha: Z(Xt.value),
-						id: e,
-						x: L.value.x,
-						y: L.value.y,
-						type: w.value,
-						color: Z(Pt.value),
-						strokeWidth: Z(Math.abs(bt.value)),
-						isDash: Z(St.value),
-						path: `${L.value.x} ${L.value.y}`
-					}), I.value = z.value.at(-1);
-					break;
-				case w.value === "rect":
-					z.value.push({
-						alpha: B.value.rect.filled ? Xt.value : "",
-						id: e,
-						color: Z(Pt.value),
-						isFilled: Z(B.value.rect.filled),
-						rectStrokeWidth: Z(B.value.rect.strokeWidth),
-						rectHeight: Z(B.value.rect.height),
-						rectWidth: Z(B.value.rect.width),
-						type: w.value,
-						x: L.value.x,
-						y: L.value.y,
-						strokeWidth: Z(Math.abs(bt.value)),
-						isDash: Z(St.value)
-					}), I.value = z.value.at(-1);
-					break;
-				case w.value === "group":
-					z.value.push({
-						alpha: 1,
-						id: `group_${n()}`,
-						x: L.value.x,
-						y: L.value.y,
-						isFilled: !1,
-						rectHeight: Z(B.value.rect.height),
-						rectWidth: Z(B.value.rect.width),
-						rectStrokeWidth: 1,
-						type: "group",
-						color: "grey",
-						strokeWidth: 1,
-						isDash: !0,
-						content: ""
-					});
-					break;
-				default: break;
-			}
-			qt.value ||= requestAnimationFrame(on);
-		}
-		function En(e) {
-			if (k.value) {
-				Et.value = !1;
-				return;
-			}
-			if (e.preventDefault(), e.stopPropagation(), Et.value = !0, e.pointerId != null) {
-				try {
-					X.value?.setPointerCapture?.(e.pointerId);
-				} catch {}
-				Jt.value = e.pointerId;
-			} else Jt.value = null;
-			if ((A.value || j.value || M.value || N.value) && K.value?.begin?.(), A.value) {
-				Tn();
-				return;
-			}
-			if (j.value) {
-				let t = cn(e) || D.value || I.value?.id;
-				t && (sn(t), E.value = { id: t }), dn(e);
-			}
-		}
-		function Dn(e) {
-			if (!e || !e.id || e.type === "line" || !Ht.value && (dn({ target: { id: e.id } }), !Ht.value)) return;
-			let { dx: t, dy: n, endDx: r, endDy: i } = Ht.value, a = L.value.x, o = L.value.y;
-			switch (I.value = e, e.type) {
-				case "arrow":
-					e.x = a - t, e.y = o - n, e.endX = a - (r ?? t), e.endY = o - (i ?? n);
-					break;
-				case "circle":
-					e.x = a - t, e.y = o - n;
-					break;
-				case "rect":
-					e.x = a - t, e.y = o - n;
-					break;
-				case "text":
-					e.x = a - t, e.y = o - n;
-					break;
-				case "group":
-					e.x = a - t, e.y = o - n, Cn(e);
-					break;
-				default: break;
-			}
-		}
-		function On() {
-			let e = E.value?.id || D.value;
-			if (!e) return;
-			let t = z.value.find((t) => t.id === e);
-			t && Dn(t);
-		}
-		function kn() {
-			wt.value = !1;
-			let e = E.value.id;
-			if (!e) return;
-			Ct.value = !0;
-			let t = z.value.find((t) => t.id === e);
-			w.value = t.type, z.value = z.value.filter((t) => t.id !== e), z.value.push(t), an(!0);
-		}
-		function An(e) {
-			k.value || (e.preventDefault(), e.stopPropagation(), e.target.localName !== "svg" && (E.value = e.target), j.value && Et.value ? On() : M.value && Et.value && kn());
-		}
-		function jn(e) {
-			let t = e.target.id;
-			switch (!0) {
-				case k.value:
-					K.value?.begin(), z.value = [...z.value].filter((e) => e.id !== t), I.value = void 0, K.value?.end();
-					return;
-				default:
-					I.value = z.value.find((e) => e.id === t);
-					break;
-			}
-		}
-		let Mn = b(null);
-		function Nn(e, t) {
-			for (t(e), e = e.firstChild; e;) Nn(e, t), e = e.nextSibling;
-		}
-		function Pn() {
-			Dt.value = !0, k.value = !1, j.value = !1, M.value = !1, P.value = !1, F.value = !1, N.value = !1, w.value = void 0, V.value = !1, ie(async () => {
-				let e = Mn.value;
-				if (e) {
-					Nn(e, (e) => {
-						e && e.nodeType === 1 && (e.setAttribute("font-family", "Helvetica"), e.style.fontFamily = "Helvetica");
-					});
-					try {
-						let t;
-						try {
-							t = (await import("jspdf")).default;
-						} catch {
-							throw Error("jspdf is not installed. Run npm install jspdf");
-						}
-						let n = await s({
-							container: e,
-							scale: 2
-						}), r = new Image();
-						r.src = n, r.onload = () => {
-							let e = {
-								width: 595.28,
-								height: 841.89
-							}, i = r.width, a = r.height, o = i / e.width * e.height, s = e.width, c = s / i * a, l = new t("", "pt", "a4"), ee = 0, te = a;
-							if (te < o) l.addImage(n, "PNG", 0, 0, s, c, "", "FAST");
-							else for (; te > 0;) l.addImage(n, "PNG", 0, ee, s, c, "", "FAST"), te -= o, ee -= e.height, te > 0 && l.addPage();
-							l.save(`${(/* @__PURE__ */ new Date()).toLocaleDateString()}_annotations.pdf`);
-						};
-					} catch (e) {
-						console.error("Error generating image:", e);
-					} finally {
-						Dt.value = !1, Nn(e, (e) => {
-							e && e.nodeType === 1 && (e.setAttribute("font-family", q.value.style.fontFamily), e.style.fontFamily = q.value.style.fontFamily);
-						});
-					}
-				}
-			});
-		}
-		function Fn(e) {
-			if (!k.value && e && (e.preventDefault(), e.stopPropagation()), Ct.value = !1, Et.value = !1, Ht.value = null, Jt.value != null) {
-				try {
-					X.value?.releasePointerCapture?.(Jt.value);
-				} catch {}
-				Jt.value = null;
-			}
-			qt.value &&= (cancelAnimationFrame(qt.value), null), N.value && Sn(), K.value?.end();
-		}
-		function In() {
-			!I.value || !I.value.id.includes("rect") || (I.value.isFilled = !I.value.isFilled);
-		}
-		function Ln() {
-			!I.value || !I.value.id.includes("circle") || (I.value.isFilled = !I.value.isFilled);
-		}
-		function Rn() {
-			!I.value || I.value.type === "text" || (I.value.isDash = Z(St.value));
-		}
-		function zn() {
-			!I.value || ["arrow", "text"].includes(I.value.id) || (I.value.alpha = Z(Xt.value));
-		}
-		function Bn() {
-			!I.value || ![
-				"arrow",
-				"circle",
-				"rect",
-				"line"
-			].includes(I.value.type) || (I.value.strokeWidth = Z(Math.abs(bt.value)));
-		}
-		function Vn() {
-			!I.value || I.value.type !== "text" || (I.value.isBold = Z(xt.value), I.value.isItalic = Z(Tt.value), I.value.isUnderline = Z(kt.value), I.value.fontSize = Z(zt.value), I.value.isBulletTextMode = Z(O.value));
-		}
-		function Hn(e) {
-			if (e.preventDefault(), !X.value) return;
-			let t = X.value.getBoundingClientRect(), n, r;
-			e.touches && e.touches.length > 0 ? (n = e.touches[0].clientX, r = e.touches[0].clientY) : (n = e.clientX, r = e.clientY), L.value.x = (n - t.left) / t.width * Nt.value, L.value.y = (r - t.top) / t.height * Mt.value;
-		}
-		function Un(e) {
-			if (V.value = !1, hn(), e === w.value) {
-				w.value = void 0, A.value = !1;
-				return;
-			}
-			A.value = !0, k.value = !1, j.value = !1, M.value = !1, P.value = !1, w.value = e;
-		}
-		function Wn() {
-			Ot.value = !Ot.value, Ot.value || (j.value = !1, M.value = !1, P.value = !1, F.value = !1, w.value = void 0, V.value = !1, k.value = !1, F.value = !1), ge("toggleOpenState", { isOpen: Ot.value });
-		}
-		function Gn() {
-			ge("saveAnnotations", {
-				shapes: z.value,
-				lastSelectedShape: I.value
-			});
-		}
-		let Kn = null;
-		return oe(() => {
-			if (Mn.value) {
-				let e = !1;
-				Nn(Mn.value, (t) => {
-					if (!e && [
-						"DIV",
-						"svg",
-						"section",
-						"canvas"
-					].includes(t.tagName)) {
-						It.value = t, e = !0;
-						return;
-					}
-				});
-			}
-			Wt.value = (() => {
-				if (typeof navigator > "u") return !1;
-				let e = navigator.userAgentData?.platform ?? "";
-				if (e) return /mac|ios/i.test(e);
-				let t = navigator.userAgent ?? "";
-				return /(Mac|iPhone|iPad|iPod)/i.test(t);
-			})();
-			let e = It?.value.getBoundingClientRect();
-			if (Ft.value = e.height / e.width, Nt.value = 1e3, Mt.value = Ft.value * 1e3, Lt.value = e.width, Rt.value = e.height, new ResizeObserver((e) => {
-				e.forEach((e) => {
-					Lt.value = e.contentRect.width, Rt.value = e.contentRect.height, Ft.value = e.contentRect.height / e.contentRect.width, Mt.value = Ft.value * 1e3;
-				});
-			}).observe(It.value), Gt.value = (e) => xn(e), window.addEventListener("keydown", Gt.value), K.value = ln(), K.value.size) {
-				let e = K.value.size();
-				Kt.value.undo = e.undo, Kt.value.redo = e.redo;
-			}
-			Kn = he({
-				isMacLike: Wt,
-				isSummaryOpen: Ot,
-				isWriting: F,
-				isDeleteMode: k,
-				isMoveMode: j,
-				isResizeMode: M,
-				isSelectMode: N,
-				isDrawMode: A,
-				isTextMode: P,
-				activeShape: w,
-				showCaret: V,
-				lastSelectedShape: I,
-				shapes: z,
-				history: K,
-				setShapeTo: Un,
-				undoLastShape: vn,
-				redoLastShape: yn
-			});
-		}), ae(() => {
-			$(), qt.value && cancelAnimationFrame(qt.value), Gt.value && window.removeEventListener("keydown", Gt.value), Kn && Kn(), window.removeEventListener("keydown", xn);
-		}), fe(z, (e) => {
-			e.length === 0 && (I.value = void 0);
-		}), fe(P, (e) => {
-			V.value = e;
-		}), (e, t) => (y(), p("div", ve, [m("div", ye, [g(ee, {
-			config: {
-				maxHeight: 1e3,
-				useCursorPointer: J.value,
-				head: {
-					backgroundColor: q.value.style.backgroundColor,
-					color: q.value.style.color,
-					iconColor: q.value.style.color,
-					iconSize: 20,
-					icon: Ot.value ? "close" : "annotator",
-					padding: "6px"
-				},
-				body: {
-					backgroundColor: q.value.style.backgroundColor,
-					color: q.value.style.color
-				}
-			},
-			onToggle: Wn
-		}, {
-			title: S(({ color: e }) => [m("div", { style: v({ color: e }) }, x(q.value.translations.title), 5)]),
-			content: S(({ backgroundColor: e }) => [m("div", {
-				class: "tool-selection",
-				style: v({ backgroundColor: e })
-			}, [
-				m("button", {
-					disabled: z.value.length === 0,
-					style: v({
-						background: j.value ? q.value.style.buttons.controls.selected.backgroundColor : q.value.style.buttons.controls.backgroundColor,
-						border: j.value ? q.value.style.buttons.controls.selected.border : q.value.style.buttons.controls.border,
-						color: j.value ? q.value.style.buttons.controls.selected.color : q.value.style.buttons.controls.color,
-						borderRadius: `${q.value.style.buttons.borderRadius}px`,
-						cursor: J.value ? "pointer" : "default"
-					}),
-					class: _({
-						"button-tool": !0,
-						"button-tool--selected": j.value,
-						tooltip: !0
-					}),
-					onClick: t[0] ||= (e) => {
-						hn(), j.value = !j.value, w.value = void 0, k.value = !1, A.value = !1, M.value = !1, N.value = !1, P.value = !1, F.value = !1, V.value = !1;
-					},
-					onMouseenter: t[1] ||= (e) => q.value.style.showTooltips && Q("move", e, "top"),
-					onMouseleave: $,
-					onFocus: t[2] ||= (e) => q.value.style.showTooltips && Q("move", e, "top"),
-					onBlur: $
-				}, [g(l, {
-					name: "move",
-					stroke: j.value ? q.value.style.buttons.controls.selected.color : q.value.style.buttons.controls.color
-				}, null, 8, ["stroke"]), q.value.style.showTooltips ? (y(), d(C, {
-					key: 0,
-					show: U.value && W.value === "move",
-					x: G.value.x,
-					y: G.value.y - 6,
-					placement: "top",
-					styleObject: Y.value
-				}, {
-					default: S(() => [h(x(q.value.translations.tooltipMove) + " ", 1), t[91] ||= m("kbd", null, "M", -1)]),
-					_: 1
-				}, 8, [
-					"show",
-					"x",
-					"y",
-					"styleObject"
-				])) : f("", !0)], 46, be),
-				m("button", {
-					disabled: z.value.length === 0 || w.value === "line",
-					style: v({
-						background: M.value ? q.value.style.buttons.controls.selected.backgroundColor : q.value.style.buttons.controls.backgroundColor,
-						border: M.value ? q.value.style.buttons.controls.selected.border : q.value.style.buttons.controls.border,
-						color: M.value ? q.value.style.buttons.controls.selected.color : q.value.style.buttons.controls.color,
-						borderRadius: `${q.value.style.buttons.borderRadius}px`,
-						cursor: J.value ? "pointer" : "default"
-					}),
-					class: _({
-						"button-tool": !0,
-						"button-tool--selected": M.value,
-						tooltip: !0
-					}),
-					onClick: t[3] ||= (e) => {
-						hn(), M.value = !M.value, j.value = !1, k.value = !1, A.value = !1, N.value = !1, P.value = !1, F.value = !1, w.value = void 0, V.value = !1;
-					},
-					onMouseenter: t[4] ||= (e) => q.value.style.showTooltips && Q("resize", e, "top"),
-					onMouseleave: $,
-					onFocus: t[5] ||= (e) => q.value.style.showTooltips && Q("resize", e, "top"),
-					onBlur: $
-				}, [g(l, {
-					name: "resize",
-					stroke: M.value ? q.value.style.buttons.controls.selected.color : q.value.style.buttons.controls.color
-				}, null, 8, ["stroke"]), q.value.style.showTooltips ? (y(), d(C, {
-					key: 0,
-					show: U.value && W.value === "resize",
-					x: G.value.x,
-					y: G.value.y - 6,
-					placement: "top",
-					styleObject: Y.value
-				}, {
-					default: S(() => [h(x(q.value.translations.tooltipResize) + " ", 1), t[92] ||= m("kbd", null, "R", -1)]),
-					_: 1
-				}, 8, [
-					"show",
-					"x",
-					"y",
-					"styleObject"
-				])) : f("", !0)], 46, xe),
-				m("button", {
-					disabled: z.value.length === 0,
-					style: v({
-						background: k.value ? q.value.style.buttons.controls.selected.backgroundColor : q.value.style.buttons.controls.backgroundColor,
-						border: k.value ? q.value.style.buttons.controls.selected.border : q.value.style.buttons.controls.border,
-						color: k.value ? q.value.style.buttons.controls.selected.color : q.value.style.buttons.controls.color,
-						borderRadius: `${q.value.style.buttons.borderRadius}px`,
-						cursor: J.value ? "pointer" : "default"
-					}),
-					class: _({
-						"button-tool": !0,
-						"button-tool--selected": k.value,
-						tooltip: !0
-					}),
-					onClick: t[6] ||= (e) => {
-						hn(), k.value = !k.value, j.value = !1, M.value = !1, N.value = !1, P.value = !1, F.value = !1, w.value = void 0, V.value = !1;
-					},
-					onMouseenter: t[7] ||= (e) => q.value.style.showTooltips && Q("delete", e, "top"),
-					onMouseleave: $,
-					onFocus: t[8] ||= (e) => q.value.style.showTooltips && Q("delete", e, "top"),
-					onBlur: $
-				}, [g(l, {
-					name: "trash",
-					stroke: k.value ? q.value.style.buttons.controls.selected.color : q.value.style.buttons.controls.color
-				}, null, 8, ["stroke"]), q.value.style.showTooltips ? (y(), d(C, {
-					key: 0,
-					show: U.value && W.value === "delete",
-					x: G.value.x,
-					y: G.value.y - 6,
-					placement: "top",
-					styleObject: Y.value
-				}, {
-					default: S(() => [h(x(q.value.translations.tooltipDelete) + " ", 1), t[93] ||= m("kbd", null, "D", -1)]),
-					_: 1
-				}, 8, [
-					"show",
-					"x",
-					"y",
-					"styleObject"
-				])) : f("", !0)], 46, Se),
-				m("button", {
-					disabled: !Yt.value,
-					style: v({
-						background: N.value ? q.value.style.buttons.controls.selected.backgroundColor : q.value.style.buttons.controls.backgroundColor,
-						border: N.value ? q.value.style.buttons.controls.selected.border : q.value.style.buttons.controls.border,
-						color: N.value ? q.value.style.buttons.controls.selected.color : q.value.style.buttons.controls.color,
-						borderRadius: `${q.value.style.buttons.borderRadius}px`,
-						cursor: J.value ? "pointer" : "default"
-					}),
-					class: _({
-						"button-tool": !0,
-						"button-tool--selected": N.value,
-						tooltip: !0
-					}),
-					onClick: t[9] ||= (e) => {
-						hn(), Un("group"), N.value = !N.value, k.value = !1, j.value = !1, M.value = !1, P.value = !1, F.value = !1, w.value = "group", V.value = !1;
-					},
-					onMouseenter: t[10] ||= (e) => q.value.style.showTooltips && Q("selectAndGroup", e, "top"),
-					onMouseleave: $,
-					onFocus: t[11] ||= (e) => q.value.style.showTooltips && Q("selectAndGroup", e, "top"),
-					onBlur: $
-				}, [g(l, {
-					name: "selectAndGroup",
-					stroke: N.value ? q.value.style.buttons.controls.selected.color : q.value.style.buttons.controls.color
-				}, null, 8, ["stroke"]), q.value.style.showTooltips ? (y(), d(C, {
-					key: 0,
-					show: U.value && W.value === "selectAndGroup",
-					x: G.value.x,
-					y: G.value.y - 6,
-					placement: "top",
-					styleObject: Y.value
-				}, {
-					default: S(() => [h(x(q.value.translations.tooltipGroup) + " ", 1), t[94] ||= m("kbd", null, "G", -1)]),
-					_: 1
-				}, 8, [
-					"show",
-					"x",
-					"y",
-					"styleObject"
-				])) : f("", !0)], 46, Ce),
-				m("button", {
-					disabled: z.value.length === 0,
-					style: v({
-						background: q.value.style.buttons.controls.backgroundColor,
-						border: q.value.style.buttons.controls.border,
-						color: q.value.style.buttons.controls.color,
-						borderRadius: `${q.value.style.buttons.borderRadius}px`,
-						cursor: J.value ? "pointer" : "default"
-					}),
-					class: _({
-						"button-tool": !0,
-						tooltip: !0
-					}),
-					onClick: t[12] ||= (e) => {
-						M.value = !1, j.value = !0, k.value = !1, A.value = !1, N.value = !1, P.value = !1, F.value = !1, V.value = !1, fn("front");
-					},
-					onMouseenter: t[13] ||= (e) => q.value.style.showTooltips && Q("bringToFront", e, "top"),
-					onMouseleave: $,
-					onFocus: t[14] ||= (e) => q.value.style.showTooltips && Q("bringToFront", e, "top"),
-					onBlur: $
-				}, [g(l, {
-					name: "bringToFront",
-					stroke: q.value.style.buttons.controls.color
-				}, null, 8, ["stroke"]), q.value.style.showTooltips ? (y(), d(C, {
-					key: 0,
-					show: U.value && W.value === "bringToFront",
-					x: G.value.x,
-					y: G.value.y - 6,
-					placement: "top",
-					styleObject: Y.value
-				}, {
-					default: S(() => [h(x(q.value.translations.tooltipBringToFront), 1)]),
-					_: 1
-				}, 8, [
-					"show",
-					"x",
-					"y",
-					"styleObject"
-				])) : f("", !0)], 44, we),
-				m("button", {
-					disabled: z.value.length === 0,
-					style: v({
-						background: q.value.style.buttons.controls.backgroundColor,
-						border: q.value.style.buttons.controls.border,
-						color: q.value.style.buttons.controls.color,
-						borderRadius: `${q.value.style.buttons.borderRadius}px`,
-						cursor: J.value ? "pointer" : "default"
-					}),
-					class: _({
-						"button-tool": !0,
-						tooltip: !0
-					}),
-					onClick: t[15] ||= (e) => {
-						M.value = !1, j.value = !0, k.value = !1, A.value = !1, N.value = !1, P.value = !1, F.value = !1, V.value = !1, fn("back");
-					},
-					onMouseenter: t[16] ||= (e) => q.value.style.showTooltips && Q("bringToBack", e, "top"),
-					onMouseleave: $,
-					onFocus: t[17] ||= (e) => q.value.style.showTooltips && Q("bringToBack", e, "top"),
-					onBlur: $
-				}, [g(l, {
-					name: "bringToBack",
-					stroke: q.value.style.buttons.controls.color
-				}, null, 8, ["stroke"]), q.value.style.showTooltips ? (y(), d(C, {
-					key: 0,
-					show: U.value && W.value === "bringToBack",
-					x: G.value.x,
-					y: G.value.y - 6,
-					placement: "top",
-					styleObject: Y.value
-				}, {
-					default: S(() => [h(x(q.value.translations.tooltipBringToBack), 1)]),
-					_: 1
-				}, 8, [
-					"show",
-					"x",
-					"y",
-					"styleObject"
-				])) : f("", !0)], 44, Te),
-				m("button", {
-					disabled: z.value.length === 0 || w.value === "line",
-					style: v({
-						background: q.value.style.buttons.controls.backgroundColor,
-						border: q.value.style.buttons.controls.border,
-						color: q.value.style.buttons.controls.color,
-						borderRadius: `${q.value.style.buttons.borderRadius}px`,
-						cursor: J.value ? "pointer" : "default"
-					}),
-					class: _({
-						"button-tool": !0,
-						tooltip: !0
-					}),
-					onClick: t[18] ||= (e) => {
-						hn(), M.value = !1, j.value = !0, k.value = !1, A.value = !1, N.value = !1, P.value = !1, F.value = !1, V.value = !1, pn();
-					},
-					onMouseenter: t[19] ||= (e) => q.value.style.showTooltips && Q("duplicate", e, "top"),
-					onMouseleave: $,
-					onFocus: t[20] ||= (e) => q.value.style.showTooltips && Q("duplicate", e, "top"),
-					onBlur: $
-				}, [g(l, {
-					name: "copy",
-					stroke: q.value.style.buttons.controls.color,
-					size: 18
-				}, null, 8, ["stroke"]), q.value.style.showTooltips ? (y(), d(C, {
-					key: 0,
-					show: U.value && W.value === "duplicate",
-					x: G.value.x,
-					y: G.value.y - 6,
-					placement: "top",
-					styleObject: Y.value
-				}, {
-					default: S(() => [h(x(q.value.translations.tooltipDuplicate), 1)]),
-					_: 1
-				}, 8, [
-					"show",
-					"x",
-					"y",
-					"styleObject"
-				])) : f("", !0)], 44, Ee),
-				m("button", {
-					disabled: Kt.value.undo === 0,
-					style: v({
-						background: q.value.style.buttons.controls.backgroundColor,
-						border: q.value.style.buttons.controls.border,
-						color: q.value.style.buttons.controls.color,
-						borderRadius: `${q.value.style.buttons.borderRadius}px`,
-						cursor: J.value ? "pointer" : "default"
-					}),
-					class: _({
-						"button-tool": !0,
-						"button-tool--one-shot": !0,
-						tooltip: !0
-					}),
-					onClick: t[21] ||= (e) => {
-						M.value = !1, j.value = !1, k.value = !1, A.value = !1, N.value = !1, P.value = !1, F.value = !1, w.value = void 0, V.value = !1, vn();
-					},
-					onMouseenter: t[22] ||= (e) => q.value.style.showTooltips && Q("undoLast", e, "top"),
-					onMouseleave: $,
-					onFocus: t[23] ||= (e) => q.value.style.showTooltips && Q("undoLast", e, "top"),
-					onBlur: $
-				}, [g(l, {
-					name: "refresh",
-					stroke: q.value.style.buttons.controls.color,
-					size: 20
-				}, null, 8, ["stroke"]), q.value.style.showTooltips ? (y(), d(C, {
-					key: 0,
-					show: U.value && W.value === "undoLast",
-					x: G.value.x,
-					y: G.value.y - 6,
-					placement: "top",
-					styleObject: Y.value
-				}, {
-					default: S(() => [
-						h(x(q.value.translations.tooltipUndo) + " ", 1),
-						m("kbd", null, x(Wt.value ? "⌘" : "Ctrl"), 1),
-						t[95] ||= m("kbd", null, "Z", -1)
-					]),
-					_: 1
-				}, 8, [
-					"show",
-					"x",
-					"y",
-					"styleObject"
-				])) : f("", !0)], 44, De),
-				m("button", {
-					disabled: Kt.value.redo === 0,
-					style: v({
-						background: q.value.style.buttons.controls.backgroundColor,
-						border: q.value.style.buttons.controls.border,
-						color: q.value.style.buttons.controls.color,
-						borderRadius: `${q.value.style.buttons.borderRadius}px`,
-						cursor: J.value ? "pointer" : "default"
-					}),
-					class: _({
-						"button-tool": !0,
-						"button-tool--one-shot": !0,
-						tooltip: !0
-					}),
-					onClick: t[24] ||= (e) => {
-						M.value = !1, j.value = !1, k.value = !1, A.value = !1, N.value = !1, P.value = !1, F.value = !1, w.value = void 0, V.value = !1, yn();
-					},
-					onMouseenter: t[25] ||= (e) => q.value.style.showTooltips && Q("redoLast", e, "top"),
-					onMouseleave: $,
-					onFocus: t[26] ||= (e) => q.value.style.showTooltips && Q("redoLast", e, "top"),
-					onBlur: $
-				}, [g(l, {
-					name: "refresh",
-					stroke: q.value.style.buttons.controls.color,
-					size: 20,
-					style: { transform: "rotateX(0deg) rotateY(180deg)" }
-				}, null, 8, ["stroke"]), q.value.style.showTooltips ? (y(), d(C, {
-					key: 0,
-					show: U.value && W.value === "redoLast",
-					x: G.value.x,
-					y: G.value.y - 6,
-					placement: "top",
-					styleObject: Y.value
-				}, {
-					default: S(() => [
-						h(x(q.value.translations.tooltipRedo) + " ", 1),
-						m("kbd", null, x(Wt.value ? "⌘" : "Ctrl"), 1),
-						t[96] ||= m("kbd", null, "Y", -1)
-					]),
-					_: 1
-				}, 8, [
-					"show",
-					"x",
-					"y",
-					"styleObject"
-				])) : f("", !0)], 44, Oe),
-				q.value.style.showPrint ? (y(), p("button", {
-					key: 0,
-					style: v({
-						background: q.value.style.buttons.controls.backgroundColor,
-						border: q.value.style.buttons.controls.border,
-						color: q.value.style.buttons.controls.color,
-						borderRadius: `${q.value.style.buttons.borderRadius}px`,
-						cursor: J.value ? "pointer" : "default"
-					}),
-					class: _({
-						"button-tool": !0,
-						tooltip: !0
-					}),
-					onClick: Pn,
-					onMouseenter: t[27] ||= (e) => q.value.style.showTooltips && Q("printPdf", e, "top"),
-					onMouseleave: $,
-					onFocus: t[28] ||= (e) => q.value.style.showTooltips && Q("printPdf", e, "top"),
-					onBlur: $
-				}, [g(l, {
-					name: "printer",
-					stroke: q.value.style.buttons.controls.color
-				}, null, 8, ["stroke"]), q.value.style.showTooltips ? (y(), d(C, {
-					key: 0,
-					show: U.value && W.value === "printPdf",
-					x: G.value.x,
-					y: G.value.y - 6,
-					placement: "top",
-					styleObject: Y.value
-				}, {
-					default: S(() => [h(x(q.value.translations.tooltipPdf), 1)]),
-					_: 1
-				}, 8, [
-					"show",
-					"x",
-					"y",
-					"styleObject"
-				])) : f("", !0)], 36)) : f("", !0),
-				q.value.style.showImage ? (y(), p("button", {
-					key: 1,
-					style: v({
-						background: q.value.style.buttons.controls.backgroundColor,
-						border: q.value.style.buttons.controls.border,
-						color: q.value.style.buttons.controls.color,
-						borderRadius: `${q.value.style.buttons.borderRadius}px`,
-						cursor: J.value ? "pointer" : "default"
-					}),
-					class: _({
-						"button-tool": !0,
-						tooltip: !0
-					}),
-					onClick: t[29] ||= (...e) => le(yt) && le(yt)(...e),
-					onMouseenter: t[30] ||= (e) => q.value.style.showTooltips && Q("printImage", e, "top"),
-					onMouseleave: $,
-					onFocus: t[31] ||= (e) => q.value.style.showTooltips && Q("printImage", e, "top"),
-					onBlur: $
-				}, [g(l, {
-					name: "image",
-					stroke: q.value.style.buttons.controls.color,
-					size: 20
-				}, null, 8, ["stroke"]), q.value.style.showTooltips ? (y(), d(C, {
-					key: 0,
-					show: U.value && W.value === "printImage",
-					x: G.value.x,
-					y: G.value.y - 6,
-					placement: "top",
-					styleObject: Y.value
-				}, {
-					default: S(() => [h(x(q.value.translations.tooltipImage), 1)]),
-					_: 1
-				}, 8, [
-					"show",
-					"x",
-					"y",
-					"styleObject"
-				])) : f("", !0)], 36)) : f("", !0),
-				q.value.style.showSave ? (y(), p("button", {
-					key: 2,
-					style: v({
-						background: q.value.style.buttons.controls.backgroundColor,
-						border: q.value.style.buttons.controls.border,
-						color: q.value.style.buttons.controls.color,
-						borderRadius: `${q.value.style.buttons.borderRadius}px`,
-						cursor: J.value ? "pointer" : "default"
-					}),
-					class: _({
-						"button-tool": !0,
-						tooltip: !0
-					}),
-					onClick: Gn,
-					onMouseenter: t[32] ||= (e) => q.value.style.showTooltips && Q("saveAction", e, "top"),
-					onMouseleave: $,
-					onFocus: t[33] ||= (e) => q.value.style.showTooltips && Q("saveAction", e, "top"),
-					onBlur: $
-				}, [g(l, {
-					name: "save",
-					stroke: q.value.style.buttons.controls.color
-				}, null, 8, ["stroke"]), q.value.style.showTooltips ? (y(), d(C, {
-					key: 0,
-					show: U.value && W.value === "saveAction",
-					x: G.value.x,
-					y: G.value.y - 6,
-					placement: "top",
-					styleObject: Y.value
-				}, {
-					default: S(() => [h(x(q.value.translations.tooltipSave), 1)]),
-					_: 1
-				}, 8, [
-					"show",
-					"x",
-					"y",
-					"styleObject"
-				])) : f("", !0)], 36)) : f("", !0)
-			], 4), m("div", ke, [
-				m("button", {
-					class: _({
-						"button-tool": !0,
-						"button-tool--selected": w.value === "circle",
-						tooltip: !0
-					}),
-					style: v({
-						background: w.value === "circle" ? q.value.style.buttons.shapes.selected.backgroundColor : q.value.style.buttons.shapes.backgroundColor,
-						border: w.value === "circle" ? q.value.style.buttons.shapes.selected.border : q.value.style.buttons.shapes.border,
-						color: w.value === "circle" ? q.value.style.buttons.shapes.selected.color : q.value.style.buttons.shapes.color,
-						borderRadius: `${q.value.style.buttons.borderRadius}px`,
-						cursor: J.value ? "pointer" : "default"
-					}),
-					onClick: t[34] ||= (e) => {
-						Un("circle"), N.value = !1;
-					},
-					onMouseenter: t[35] ||= (e) => q.value.style.showTooltips && Q("setCircle", e, "top"),
-					onMouseleave: $,
-					onFocus: t[36] ||= (e) => q.value.style.showTooltips && Q("setCircle", e, "top"),
-					onBlur: $
-				}, [(y(), p("svg", Ae, [m("circle", {
-					cx: 6,
-					cy: 6,
-					r: "4",
-					fill: B.value.circle.filled ? (w.value, Pt.value + Xt.value) : "none",
-					stroke: "currentColor"
-				}, null, 8, je)])), q.value.style.showTooltips ? (y(), d(C, {
-					key: 0,
-					show: U.value && W.value === "setCircle",
-					x: G.value.x,
-					y: G.value.y - 6,
-					placement: "top",
-					styleObject: Y.value
-				}, {
-					default: S(() => [h(x(q.value.translations.tooltipShapeCircle) + " ", 1), t[97] ||= m("kbd", null, "C", -1)]),
-					_: 1
-				}, 8, [
-					"show",
-					"x",
-					"y",
-					"styleObject"
-				])) : f("", !0)], 38),
-				w.value === "circle" ? (y(), p("div", Me, [m("label", Ne, [h(x(q.value.translations.filled) + " ", 1), pe(m("input", {
-					type: "checkbox",
-					"onUpdate:modelValue": t[37] ||= (e) => B.value.circle.filled = e,
-					onChange: Ln,
-					checked: B.value.circle.filled,
-					style: v({
-						all: "revert",
-						appearance: "auto",
-						"-webkit-appearance": "auto",
-						accentColor: q.value.style.color + " !important"
-					})
-				}, null, 44, Pe), [[ue, B.value.circle.filled]])])])) : f("", !0),
-				m("button", {
-					class: _({
-						"button-tool": !0,
-						"button-tool--selected": w.value === "rect",
-						tooltip: !0
-					}),
-					style: v({
-						background: w.value === "rect" ? q.value.style.buttons.shapes.selected.backgroundColor : q.value.style.buttons.shapes.backgroundColor,
-						border: w.value === "rect" ? q.value.style.buttons.shapes.selected.border : q.value.style.buttons.shapes.border,
-						color: w.value === "rect" ? q.value.style.buttons.shapes.selected.color : q.value.style.buttons.shapes.color,
-						borderRadius: `${q.value.style.buttons.borderRadius}px`,
-						cursor: J.value ? "pointer" : "default"
-					}),
-					onClick: t[38] ||= (e) => {
-						Un("rect"), N.value = !1;
-					},
-					onMouseenter: t[39] ||= (e) => q.value.style.showTooltips && Q("setRect", e, "top"),
-					onMouseleave: $,
-					onFocus: t[40] ||= (e) => q.value.style.showTooltips && Q("setRect", e, "top"),
-					onBlur: $
-				}, [(y(), p("svg", Fe, [m("rect", {
-					x: "3",
-					y: "3",
-					style: {
-						rx: "0 !important",
-						ry: "0 !important"
-					},
-					height: "6",
-					width: "6",
-					fill: B.value.rect.filled ? (w.value, Pt.value + Xt.value) : "none",
-					stroke: "currentColor"
-				}, null, 8, Ie)])), q.value.style.showTooltips ? (y(), d(C, {
-					key: 0,
-					show: U.value && W.value === "setRect",
-					x: G.value.x,
-					y: G.value.y - 6,
-					placement: "top",
-					styleObject: Y.value
-				}, {
-					default: S(() => [h(x(q.value.translations.tooltipShapeRect) + " ", 1), t[98] ||= m("kbd", null, "S", -1)]),
-					_: 1
-				}, 8, [
-					"show",
-					"x",
-					"y",
-					"styleObject"
-				])) : f("", !0)], 38),
-				w.value === "rect" ? (y(), p("div", Le, [m("label", Re, [h(x(q.value.translations.filled) + " ", 1), pe(m("input", {
-					type: "checkbox",
-					"onUpdate:modelValue": t[41] ||= (e) => B.value.rect.filled = e,
-					onChange: In,
-					checked: B.value.rect.filled,
-					style: v({
-						all: "revert",
-						appearance: "auto",
-						"-webkit-appearance": "auto",
-						accentColor: q.value.style.color + " !important"
-					})
-				}, null, 44, ze), [[ue, B.value.rect.filled]])])])) : f("", !0),
-				m("button", {
-					class: _({
-						"button-tool": !0,
-						"button-tool--selected": w.value === "arrow",
-						tooltip: !0
-					}),
-					style: v({
-						background: w.value === "arrow" ? q.value.style.buttons.shapes.selected.backgroundColor : q.value.style.buttons.shapes.backgroundColor,
-						border: w.value === "arrow" ? q.value.style.buttons.shapes.selected.border : q.value.style.buttons.shapes.border,
-						color: w.value === "arrow" ? q.value.style.buttons.shapes.selected.color : q.value.style.buttons.shapes.color,
-						borderRadius: `${q.value.style.buttons.borderRadius}px`,
-						cursor: J.value ? "pointer" : "default"
-					}),
-					onClick: t[42] ||= (e) => {
-						Un("arrow"), N.value = !1;
-					},
-					onMouseenter: t[43] ||= (e) => q.value.style.showTooltips && Q("setArrow", e, "top"),
-					onMouseleave: $,
-					onFocus: t[44] ||= (e) => q.value.style.showTooltips && Q("setArrow", e, "top"),
-					onBlur: $
-				}, [(y(), p("svg", Be, [m("path", {
-					stroke: B.value.arrow.filled ? w.value === "arrow" ? "white" : "grey" : "none",
-					"stroke-width": "2",
-					d: "M5,19 19,5 14,5 19,10.5 19,5",
-					fill: "none",
-					"stroke-linecap": "round",
-					"stroke-linejoin": "round"
-				}, null, 8, Ve)])), q.value.style.showTooltips ? (y(), d(C, {
-					key: 0,
-					show: U.value && W.value === "setArrow",
-					x: G.value.x,
-					y: G.value.y - 6,
-					placement: "top",
-					styleObject: Y.value
-				}, {
-					default: S(() => [h(x(q.value.translations.tooltipShapeArrow) + " ", 1), t[99] ||= m("kbd", null, "A", -1)]),
-					_: 1
-				}, 8, [
-					"show",
-					"x",
-					"y",
-					"styleObject"
-				])) : f("", !0)], 38),
-				m("button", {
-					class: _({
-						"button-tool": !0,
-						"button-tool--selected": w.value === "line",
-						tooltip: !0
-					}),
-					style: v({
-						background: w.value === "line" ? q.value.style.buttons.shapes.selected.backgroundColor : q.value.style.buttons.shapes.backgroundColor,
-						border: w.value === "line" ? q.value.style.buttons.shapes.selected.border : q.value.style.buttons.shapes.border,
-						color: w.value === "line" ? q.value.style.buttons.shapes.selected.color : q.value.style.buttons.shapes.color,
-						borderRadius: `${q.value.style.buttons.borderRadius}px`,
-						cursor: J.value ? "pointer" : "default"
-					}),
-					onClick: t[45] ||= (e) => {
-						Un("line"), N.value = !1;
-					},
-					onMouseenter: t[46] ||= (e) => q.value.style.showTooltips && Q("setFreehand", e, "top"),
-					onMouseleave: $,
-					onFocus: t[47] ||= (e) => q.value.style.showTooltips && Q("setFreehand", e, "top"),
-					onBlur: $
-				}, [t[101] ||= m("svg", {
-					width: "80%",
-					viewBox: "0 0 24 24",
-					"stroke-width": "2",
-					stroke: "currentColor",
-					fill: "none",
-					"stroke-linecap": "round",
-					"stroke-linejoin": "round"
-				}, [m("path", {
-					stroke: "none",
-					d: "M0 0h24v24H0z",
-					fill: "none"
-				}), m("path", { d: "M3 15c2 3 4 4 7 4s7 -3 7 -7s-3 -7 -6 -7s-5 1.5 -5 4s2 5 6 5s8.408 -2.453 10 -5" })], -1), q.value.style.showTooltips ? (y(), d(C, {
-					key: 0,
-					show: U.value && W.value === "setFreehand",
-					x: G.value.x,
-					y: G.value.y - 6,
-					placement: "top",
-					styleObject: Y.value
-				}, {
-					default: S(() => [h(x(q.value.translations.tooltipShapeFreehand) + " ", 1), t[100] ||= m("kbd", null, "L", -1)]),
-					_: 1
-				}, 8, [
-					"show",
-					"x",
-					"y",
-					"styleObject"
-				])) : f("", !0)], 38),
-				[
-					"arrow",
-					"circle",
-					"rect",
-					"line"
-				].includes(w.value) ? (y(), p("div", He, [m("div", Ue, [m("label", We, [h(x(q.value.translations.thickness) + " ", 1), pe(m("input", {
-					type: "number",
-					"onUpdate:modelValue": t[48] ||= (e) => bt.value = e,
-					onInput: Bn,
-					min: 1,
-					style: {
-						padding: "0 4px",
-						width: "40px",
-						border: "1px solid #dadada",
-						"border-radius": "3px"
-					}
-				}, null, 544), [[de, bt.value]])])])])) : f("", !0),
-				[
-					"arrow",
-					"circle",
-					"rect"
-				].includes(w.value) ? (y(), p("div", Ge, [m("div", Ke, [m("label", qe, [
-					h(x(q.value.translations.dashedLines) + " ", 1),
-					(y(), p("svg", Je, [...t[102] ||= [m("line", {
-						x1: "0",
-						x2: "24",
-						y1: "12",
-						y2: "12",
-						"stroke-width": "2",
-						stroke: "black",
-						"stroke-dasharray": "3"
-					}, null, -1)]])),
-					pe(m("input", {
-						name: "dashStyle",
-						type: "checkbox",
-						"onUpdate:modelValue": t[49] ||= (e) => St.value = e,
-						onChange: Rn,
-						checked: St.value,
-						style: v({
-							all: "revert",
-							appearance: "auto",
-							"-webkit-appearance": "auto",
-							accentColor: q.value.style.color + " !important"
-						})
-					}, null, 44, Ye), [[ue, St.value]])
-				])])])) : f("", !0),
-				m("button", {
-					class: _({
-						"button-tool": !0,
-						"button-tool--selected": P.value,
-						tooltip: !0
-					}),
-					style: v({
-						background: P.value ? q.value.style.buttons.shapes.selected.backgroundColor : q.value.style.buttons.shapes.backgroundColor,
-						border: P.value ? q.value.style.buttons.shapes.selected.border : q.value.style.buttons.shapes.border,
-						color: P.value ? q.value.style.buttons.shapes.selected.color : q.value.style.buttons.shapes.color,
-						borderRadius: `${q.value.style.buttons.borderRadius}px`,
-						cursor: J.value ? "pointer" : "default"
-					}),
-					onClick: t[50] ||= (e) => {
-						hn(), P.value = !P.value, k.value = !1, j.value = !1, M.value = !1, N.value = !1, A.value = !1, w.value = void 0;
-					},
-					onMouseenter: t[51] ||= (e) => q.value.style.showTooltips && Q("setText", e, "top"),
-					onMouseleave: $,
-					onFocus: t[52] ||= (e) => q.value.style.showTooltips && Q("setText", e, "top"),
-					onBlur: $
-				}, [g(l, {
-					name: "text",
-					stroke: P.value ? q.value.style.buttons.shapes.selected.color : q.value.style.buttons.shapes.color
-				}, null, 8, ["stroke"]), q.value.style.showTooltips ? (y(), d(C, {
-					key: 0,
-					show: U.value && W.value === "setText",
-					x: G.value.x,
-					y: G.value.y - 6,
-					placement: "top",
-					styleObject: Y.value
-				}, {
-					default: S(() => [h(x(q.value.translations.tooltipShapeText) + " ", 1), t[103] ||= m("kbd", null, "T", -1)]),
-					_: 1
-				}, 8, [
-					"show",
-					"x",
-					"y",
-					"styleObject"
-				])) : f("", !0)], 38),
-				P.value ? (y(), p("div", Xe, [m("div", Ze, [m("label", Qe, [h(x(q.value.translations.fontSize) + " ", 1), pe(m("input", {
-					type: "number",
-					"onUpdate:modelValue": t[53] ||= (e) => zt.value = e,
-					onInput: Vn,
-					style: {
-						padding: "0 4px",
-						width: "40px",
-						border: "1px solid #dadada",
-						"border-radius": "3px"
-					}
-				}, null, 544), [[de, zt.value]])])])])) : f("", !0),
-				P.value ? (y(), p("div", $e, [m("button", {
-					class: _({
-						"button-tool": !0,
-						"button-tool--selected": H.value === "start",
-						tooltip: !0
-					}),
-					style: v({
-						background: H.value === "start" ? q.value.style.buttons.shapes.selected.backgroundColor : q.value.style.buttons.shapes.backgroundColor,
-						border: H.value === "start" ? q.value.style.buttons.shapes.selected.border : q.value.style.buttons.shapes.border,
-						color: H.value === "start" ? q.value.style.buttons.shapes.selected.color : q.value.style.buttons.shapes.color,
-						borderRadius: `${q.value.style.buttons.borderRadius}px`,
-						cursor: J.value ? "pointer" : "default"
-					}),
-					onClick: t[54] ||= (e) => {
-						k.value = !1, j.value = !1, M.value = !1, A.value = !1, N.value = !1, w.value = void 0, H.value = "start", _n("start");
-					},
-					onMouseenter: t[55] ||= (e) => q.value.style.showTooltips && Q("setAlignStart", e, "top"),
-					onMouseleave: $,
-					onFocus: t[56] ||= (e) => q.value.style.showTooltips && Q("setAlignStart", e, "top"),
-					onBlur: $
-				}, [t[104] ||= m("svg", {
-					width: "80%",
-					viewBox: "0 0 24 24",
-					"stroke-width": "2",
-					stroke: "currentColor",
-					fill: "none",
-					"stroke-linecap": "round",
-					"stroke-linejoin": "round"
-				}, [
-					m("path", {
-						stroke: "none",
-						d: "M0 0h24v24H0z",
-						fill: "none"
-					}),
-					m("path", { d: "M4 6l16 0" }),
-					m("path", { d: "M4 12l10 0" }),
-					m("path", { d: "M4 18l14 0" })
-				], -1), q.value.style.showTooltips ? (y(), d(C, {
-					key: 0,
-					show: U.value && W.value === "setAlignStart",
-					x: G.value.x,
-					y: G.value.y - 6,
-					placement: "top",
-					styleObject: Y.value
-				}, {
-					default: S(() => [h(x(q.value.translations.tooltipShapeTextLeft), 1)]),
-					_: 1
-				}, 8, [
-					"show",
-					"x",
-					"y",
-					"styleObject"
-				])) : f("", !0)], 38)])) : f("", !0),
-				P.value ? (y(), p("div", et, [m("button", {
-					class: _({
-						"button-tool": !0,
-						"button-tool--selected": H.value === "middle",
-						tooltip: !0
-					}),
-					style: v({
-						background: H.value === "middle" ? q.value.style.buttons.shapes.selected.backgroundColor : q.value.style.buttons.shapes.backgroundColor,
-						border: H.value === "middle" ? q.value.style.buttons.shapes.selected.border : q.value.style.buttons.shapes.border,
-						color: H.value === "middle" ? q.value.style.buttons.shapes.selected.color : q.value.style.buttons.shapes.color,
-						borderRadius: `${q.value.style.buttons.borderRadius}px`,
-						cursor: J.value ? "pointer" : "default"
-					}),
-					disabled: O.value,
-					onClick: t[57] ||= (e) => {
-						k.value = !1, j.value = !1, M.value = !1, A.value = !1, N.value = !1, w.value = void 0, H.value = "middle", _n("middle");
-					},
-					onMouseenter: t[58] ||= (e) => q.value.style.showTooltips && Q("setAlignMiddle", e, "top"),
-					onMouseleave: $,
-					onFocus: t[59] ||= (e) => q.value.style.showTooltips && Q("setAlignMiddle", e, "top"),
-					onBlur: $
-				}, [t[105] ||= m("svg", {
-					width: "80%",
-					viewBox: "0 0 24 24",
-					"stroke-width": "2",
-					stroke: "currentColor",
-					fill: "none",
-					"stroke-linecap": "round",
-					"stroke-linejoin": "round"
-				}, [
-					m("path", {
-						stroke: "none",
-						d: "M0 0h24v24H0z",
-						fill: "none"
-					}),
-					m("path", { d: "M4 6l16 0" }),
-					m("path", { d: "M8 12l8 0" }),
-					m("path", { d: "M6 18l12 0" })
-				], -1), q.value.style.showTooltips ? (y(), d(C, {
-					key: 0,
-					show: U.value && W.value === "setAlignMiddle",
-					x: G.value.x,
-					y: G.value.y - 6,
-					placement: "top",
-					styleObject: Y.value
-				}, {
-					default: S(() => [h(x(q.value.translations.tooltipShapeTextCenter), 1)]),
-					_: 1
-				}, 8, [
-					"show",
-					"x",
-					"y",
-					"styleObject"
-				])) : f("", !0)], 46, tt)])) : f("", !0),
-				P.value ? (y(), p("div", nt, [m("button", {
-					class: _({
-						"button-tool": !0,
-						"button-tool--selected": H.value === "end",
-						tooltip: !0
-					}),
-					style: v({
-						background: H.value === "end" ? q.value.style.buttons.shapes.selected.backgroundColor : q.value.style.buttons.shapes.backgroundColor,
-						border: H.value === "end" ? q.value.style.buttons.shapes.selected.border : q.value.style.buttons.shapes.border,
-						color: H.value === "end" ? q.value.style.buttons.shapes.selected.color : q.value.style.buttons.shapes.color,
-						borderRadius: `${q.value.style.buttons.borderRadius}px`,
-						cursor: J.value ? "pointer" : "default"
-					}),
-					disabled: O.value,
-					onClick: t[60] ||= (e) => {
-						k.value = !1, j.value = !1, M.value = !1, A.value = !1, N.value = !1, w.value = void 0, H.value = "end", _n("end");
-					},
-					onMouseenter: t[61] ||= (e) => q.value.style.showTooltips && Q("setAlignEnd", e, "top"),
-					onMouseleave: $,
-					onFocus: t[62] ||= (e) => q.value.style.showTooltips && Q("setAlignEnd", e, "top"),
-					onBlur: $
-				}, [t[106] ||= m("svg", {
-					width: "80%",
-					viewBox: "0 0 24 24",
-					"stroke-width": "2",
-					stroke: "currentColor",
-					fill: "none",
-					"stroke-linecap": "round",
-					"stroke-linejoin": "round"
-				}, [
-					m("path", {
-						stroke: "none",
-						d: "M0 0h24v24H0z",
-						fill: "none"
-					}),
-					m("path", { d: "M4 6l16 0" }),
-					m("path", { d: "M10 12l10 0" }),
-					m("path", { d: "M6 18l14 0" })
-				], -1), q.value.style.showTooltips ? (y(), d(C, {
-					key: 0,
-					show: U.value && W.value === "setAlignEnd",
-					x: G.value.x,
-					y: G.value.y - 6,
-					placement: "top",
-					styleObject: Y.value
-				}, {
-					default: S(() => [h(x(q.value.translations.tooltipShapeTextRight), 1)]),
-					_: 1
-				}, 8, [
-					"show",
-					"x",
-					"y",
-					"styleObject"
-				])) : f("", !0)], 46, rt)])) : f("", !0),
-				P.value ? (y(), p("div", it, [m("button", {
-					class: _({
-						"button-tool": !0,
-						"button-tool--selected": O.value,
-						tooltip: !0
-					}),
-					style: v({
-						background: O.value ? q.value.style.buttons.shapes.selected.backgroundColor : q.value.style.buttons.shapes.backgroundColor,
-						border: O.value ? q.value.style.buttons.shapes.selected.border : q.value.style.buttons.shapes.border,
-						color: O.value ? q.value.style.buttons.shapes.selected.color : q.value.style.buttons.shapes.color,
-						borderRadius: `${q.value.style.buttons.borderRadius}px`,
-						cursor: J.value ? "pointer" : "default"
-					}),
-					onClick: t[63] ||= (e) => {
-						k.value = !1, j.value = !1, M.value = !1, A.value = !1, N.value = !1, w.value = void 0, O.value = !O.value, H.value = "start", _n("start"), Vn();
-					},
-					onMouseenter: t[64] ||= (e) => q.value.style.showTooltips && Q("setBulletMode", e, "top"),
-					onMouseleave: $,
-					onFocus: t[65] ||= (e) => q.value.style.showTooltips && Q("setBulletMode", e, "top"),
-					onBlur: $
-				}, [t[107] ||= m("svg", {
-					width: "100%",
-					viewBox: "0 0 24 24",
-					"stroke-width": "2",
-					stroke: "currentColor",
-					fill: "none",
-					"stroke-linecap": "round",
-					"stroke-linejoin": "round"
-				}, [
-					m("path", {
-						stroke: "none",
-						d: "M0 0h24v24H0z",
-						fill: "none"
-					}),
-					m("path", { d: "M9 6l11 0" }),
-					m("path", { d: "M9 12l11 0" }),
-					m("path", { d: "M9 18l11 0" }),
-					m("path", { d: "M5 6l0 .01" }),
-					m("path", { d: "M5 12l0 .01" }),
-					m("path", { d: "M5 18l0 .01" })
-				], -1), q.value.style.showTooltips ? (y(), d(C, {
-					key: 0,
-					show: U.value && W.value === "setBulletMode",
-					x: G.value.x,
-					y: G.value.y - 6,
-					placement: "top",
-					styleObject: Y.value
-				}, {
-					default: S(() => [h(x(q.value.translations.tooltipShapeTextBullet), 1)]),
-					_: 1
-				}, 8, [
-					"show",
-					"x",
-					"y",
-					"styleObject"
-				])) : f("", !0)], 38)])) : f("", !0),
-				P.value ? (y(), p("div", at, [m("button", {
-					class: _({
-						"button-tool": !0,
-						"button-tool--selected": xt.value,
-						tooltip: !0
-					}),
-					style: v({
-						background: xt.value ? q.value.style.buttons.shapes.selected.backgroundColor : q.value.style.buttons.shapes.backgroundColor,
-						border: xt.value ? q.value.style.buttons.shapes.selected.border : q.value.style.buttons.shapes.border,
-						color: xt.value ? q.value.style.buttons.shapes.selected.color : q.value.style.buttons.shapes.color,
-						borderRadius: `${q.value.style.buttons.borderRadius}px`,
-						cursor: J.value ? "pointer" : "default"
-					}),
-					onClick: t[66] ||= (e) => {
-						k.value = !1, j.value = !1, M.value = !1, A.value = !1, N.value = !1, w.value = void 0, xt.value = !xt.value, Vn();
-					},
-					onMouseenter: t[67] ||= (e) => q.value.style.showTooltips && Q("setBold", e, "top"),
-					onMouseleave: $,
-					onFocus: t[68] ||= (e) => q.value.style.showTooltips && Q("setBold", e, "top"),
-					onBlur: $
-				}, [t[108] ||= m("svg", {
-					width: "100%",
-					viewBox: "0 0 24 24",
-					"stroke-width": "3",
-					stroke: "currentColor",
-					fill: "none",
-					"stroke-linecap": "round",
-					"stroke-linejoin": "round"
-				}, [
-					m("path", {
-						stroke: "none",
-						d: "M0 0h24v24H0z",
-						fill: "none"
-					}),
-					m("path", { d: "M7 5h6a3.5 3.5 0 0 1 0 7h-6z" }),
-					m("path", { d: "M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7" })
-				], -1), q.value.style.showTooltips ? (y(), d(C, {
-					key: 0,
-					show: U.value && W.value === "setBold",
-					x: G.value.x,
-					y: G.value.y - 6,
-					placement: "top",
-					styleObject: Y.value
-				}, {
-					default: S(() => [h(x(q.value.translations.tooltipShapeTextBold), 1)]),
-					_: 1
-				}, 8, [
-					"show",
-					"x",
-					"y",
-					"styleObject"
-				])) : f("", !0)], 38)])) : f("", !0),
-				P.value ? (y(), p("div", ot, [m("button", {
-					class: _({
-						"button-tool": !0,
-						"button-tool--selected": Tt.value,
-						tooltip: !0
-					}),
-					style: v({
-						background: Tt.value ? q.value.style.buttons.shapes.selected.backgroundColor : q.value.style.buttons.shapes.backgroundColor,
-						border: Tt.value ? q.value.style.buttons.shapes.selected.border : q.value.style.buttons.shapes.border,
-						color: Tt.value ? q.value.style.buttons.shapes.selected.color : q.value.style.buttons.shapes.color,
-						borderRadius: `${q.value.style.buttons.borderRadius}px`,
-						cursor: J.value ? "pointer" : "default"
-					}),
-					onClick: t[69] ||= (e) => {
-						k.value = !1, j.value = !1, M.value = !1, A.value = !1, N.value = !1, w.value = void 0, Tt.value = !Tt.value, Vn();
-					},
-					onMouseenter: t[70] ||= (e) => q.value.style.showTooltips && Q("setItalic", e, "top"),
-					onMouseleave: $,
-					onFocus: t[71] ||= (e) => q.value.style.showTooltips && Q("setItalic", e, "top"),
-					onBlur: $
-				}, [t[109] ||= m("svg", {
-					width: "100%",
-					height: "44",
-					viewBox: "0 0 24 24",
-					"stroke-width": "2",
-					stroke: "currentColor",
-					fill: "none",
-					"stroke-linecap": "round",
-					"stroke-linejoin": "round"
-				}, [
-					m("path", {
-						stroke: "none",
-						d: "M0 0h24v24H0z",
-						fill: "none"
-					}),
-					m("path", { d: "M11 5l6 0" }),
-					m("path", { d: "M7 19l6 0" }),
-					m("path", { d: "M14 5l-4 14" })
-				], -1), q.value.style.showTooltips ? (y(), d(C, {
-					key: 0,
-					show: U.value && W.value === "setItalic",
-					x: G.value.x,
-					y: G.value.y - 6,
-					placement: "top",
-					styleObject: Y.value
-				}, {
-					default: S(() => [h(x(q.value.translations.tooltipShapeTextItalic), 1)]),
-					_: 1
-				}, 8, [
-					"show",
-					"x",
-					"y",
-					"styleObject"
-				])) : f("", !0)], 38)])) : f("", !0),
-				P.value ? (y(), p("div", st, [m("button", {
-					class: _({
-						"button-tool": !0,
-						"button-tool--selected": kt.value,
-						tooltip: !0
-					}),
-					style: v({
-						background: kt.value ? q.value.style.buttons.shapes.selected.backgroundColor : q.value.style.buttons.shapes.backgroundColor,
-						border: kt.value ? q.value.style.buttons.shapes.selected.border : q.value.style.buttons.shapes.border,
-						color: kt.value ? q.value.style.buttons.shapes.selected.color : q.value.style.buttons.shapes.color,
-						borderRadius: `${q.value.style.buttons.borderRadius}px`,
-						cursor: J.value ? "pointer" : "default"
-					}),
-					onClick: t[72] ||= (e) => {
-						k.value = !1, j.value = !1, M.value = !1, A.value = !1, N.value = !1, w.value = void 0, kt.value = !kt.value, Vn();
-					},
-					onMouseenter: t[73] ||= (e) => q.value.style.showTooltips && Q("setUnderline", e, "top"),
-					onMouseleave: $,
-					onFocus: t[74] ||= (e) => q.value.style.showTooltips && Q("setUnderline", e, "top"),
-					onBlur: $
-				}, [t[110] ||= m("svg", {
-					width: "100%",
-					viewBox: "0 0 24 24",
-					"stroke-width": "2",
-					stroke: "currentColor",
-					fill: "none",
-					"stroke-linecap": "round",
-					"stroke-linejoin": "round"
-				}, [
-					m("path", {
-						stroke: "none",
-						d: "M0 0h24v24H0z",
-						fill: "none"
-					}),
-					m("path", { d: "M7 5v5a5 5 0 0 0 10 0v-5" }),
-					m("path", { d: "M5 19h14" })
-				], -1), q.value.style.showTooltips ? (y(), d(C, {
-					key: 0,
-					show: U.value && W.value === "setUnderline",
-					x: G.value.x,
-					y: G.value.y - 6,
-					placement: "top",
-					styleObject: Y.value
-				}, {
-					default: S(() => [h(x(q.value.translations.tooltipShapeTextUnderline), 1)]),
-					_: 1
-				}, 8, [
-					"show",
-					"x",
-					"y",
-					"styleObject"
-				])) : f("", !0)], 38)])) : f("", !0),
-				m("div", ct, [m("button", {
-					class: _({
-						"button-tool": !0,
-						tooltip: !0
-					}),
-					style: { borderRadius: "6px" },
-					onMouseenter: t[76] ||= (e) => q.value.style.showTooltips && Q("setColor", e, "top"),
-					onMouseleave: $,
-					onFocus: t[77] ||= (e) => q.value.style.showTooltips && Q("setColor", e, "top"),
-					onBlur: $
-				}, [g(te, {
-					value: Pt.value,
-					"onUpdate:value": t[75] ||= (e) => Pt.value = e,
-					backgroundColor: q.value.style.backgroundColor,
-					buttonBorderColor: q.value.style.color,
-					isCursorPointer: J.value,
-					teleported: ""
-				}, null, 8, [
-					"value",
-					"backgroundColor",
-					"buttonBorderColor",
-					"isCursorPointer"
-				])], 32), q.value.style.showTooltips ? (y(), d(C, {
-					key: 0,
-					show: U.value && W.value === "setColor",
-					x: G.value.x,
-					y: G.value.y - 6,
-					placement: "top",
-					styleObject: Y.value
-				}, {
-					default: S(() => [h(x(q.value.translations.tooltipShapeColor), 1)]),
-					_: 1
-				}, 8, [
-					"show",
-					"x",
-					"y",
-					"styleObject"
-				])) : f("", !0)]),
-				m("div", lt, [m("label", ut, [h(x(q.value.translations.colorAlpha) + ": " + x(Bt.value > 98 ? 100 : Bt.value) + " % ", 1), pe(m("input", {
-					name: "colorTransparency",
-					type: "range",
-					"onUpdate:modelValue": t[78] ||= (e) => Bt.value = e,
-					onInput: zn,
-					min: 0,
-					max: 100,
-					style: v({
-						width: "100%",
-						accentColor: q.value.style.color + " !important"
-					})
-				}, null, 36), [[de, Bt.value]])])])
-			])]),
-			_: 1
-		}, 8, ["config"])]), m("div", {
-			class: "annotator annotator__wrapper",
-			ref_key: "drawSvgContainer",
-			ref: Mn,
-			style: { position: "relative" },
-			id: _e.value,
-			"data-annotator-content": ""
-		}, [
-			m("div", {
-				class: "annotator__content-layer",
-				style: v(`${Ot.value ? "pointer-events: none;" : ""}`)
-			}, [ce(e.$slots, "default", {}, void 0, !0)], 4),
-			Ot.value || q.value.alwaysVisible ? (y(), p("svg", {
-				id: "annotatorSvg",
-				key: jt.value,
-				ref_key: "mainSvg",
-				ref: X,
-				class: _({
-					annotator__overlay: !0,
-					draw: !0,
-					"draw--free": w.value === "line"
-				}),
-				viewBox: `0 0 ${Nt.value} ${Mt.value}`,
-				width: Lt.value,
-				height: Rt.value,
-				onPointerdown: t[83] ||= (e) => En(e),
-				onPointerup: t[84] ||= (e) => Fn(e),
-				onTouchend: t[85] ||= (e) => Fn(e),
-				onTouchstart: t[86] ||= (e) => {
-					Hn(e), gn(e);
-				},
-				onPointermove: t[87] ||= (e) => {
-					Hn(e), An(e);
-				},
-				onPointerout: t[88] ||= (e) => wn(e),
-				onPointerover: t[89] ||= (e) => mn(e),
-				onClick: t[90] ||= (e) => gn(e),
-				style: v({
-					position: "absolute",
-					top: 0,
-					left: 0,
-					cursor: Zt.value,
-					fontFamily: "Helvetica",
-					zIndex: 1e8,
-					pointerEvents: Ot.value ? "all" : "none"
-				})
-			}, [m("rect", {
-				class: "annotator__glass",
-				x: "0",
-				y: "0",
-				width: Nt.value,
-				height: Mt.value,
-				fill: "transparent",
-				"pointer-events": Ot.value ? "all" : "none",
-				style: { cursor: "inherit" },
-				onPointerdown: t[79] ||= me((e) => En(e), ["stop", "prevent"]),
-				onPointermove: t[80] ||= me((e) => {
-					Hn(e), An(e);
-				}, ["stop", "prevent"]),
-				onPointerup: me(Fn, ["stop", "prevent"]),
-				onClick: t[81] ||= me(() => {}, ["stop", "prevent"])
-			}, null, 40, pt), (y(!0), p(ne, null, se(rn.value, (e) => (y(), p("g", {
-				key: e.id,
-				innerHTML: e.html,
-				onClick: t[82] ||= (e) => {
-					jn(e), j.value = !1;
-				}
-			}, null, 8, mt))), 128))], 46, ft)) : f("", !0),
-			Dt.value || le(vt) ? (y(), p("svg", {
-				key: 1,
-				style: {
-					position: "absolute",
-					top: "0",
-					left: "0"
-				},
-				height: Rt.value,
-				viewBox: `0 0 ${Nt.value} ${Mt.value}`,
-				width: Lt.value,
-				"data-dom-to-png-ignore": ""
-			}, [m("circle", {
-				class: "animated-circle-print",
-				cx: Nt.value / 2,
-				cy: Mt.value / 2,
-				r: "50",
-				stroke: "#6376DD",
-				"stroke-width": "10",
-				fill: "none"
-			}, null, 8, gt)], 8, ht)) : f("", !0)
-		], 8, dt)]));
-	}
-}, [["__scopeId", "data-v-3a11f6f4"]]);
-//#endregion
-export { _e as n, vt as t };