vue-data-ui 3.17.13 → 3.18.0

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

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