vue-data-ui 3.2.1 → 3.2.3

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

@@ -0,0 +1,2959 @@
+import { computed as L, ref as R, watch as E, onMounted as H, onBeforeUnmount as U, createBlock as x, openBlock as c, Teleport as K, createElementBlock as p, createCommentVNode as a, normalizeStyle as b, normalizeClass as g, createElementVNode as n, renderSlot as B, resolveComponent as v, createVNode as T, withCtx as N, createTextVNode as F, toDisplayString as f, withDirectives as M, vModelCheckbox as G, vModelText as D, withModifiers as A, Fragment as X, renderList as Y } from "vue";
+import { a6 as V, t as q, c as J, at as Z } from "./lib-BEpWEyMm.js";
+import { u as Q } from "./useNestedProp-CLD3Gk9S.js";
+import { d as $ } from "./dom-to-png-BgvOdfyW.js";
+import { u as ee } from "./usePrinter-w23K-ezx.js";
+import te from "./BaseIcon-Bz-1GQhu.js";
+import oe from "./vue-ui-accordion-Cv7OaVUI.js";
+import { _ as j } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import { C as se } from "./ColorPicker-B-WUqMoV.js";
+function ie(e) {
+  const o = (y) => e.isMacLike ? y.metaKey : y.ctrlKey, l = (y) => {
+    const S = y;
+    if (!S) return !1;
+    const O = (S.tagName || "").toLowerCase();
+    return S.isContentEditable || O === "input" || O === "textarea" || O === "select";
+  }, r = (y) => !!(!e.isSummaryOpen || l(y.target) || e.isWriting), s = () => {
+    e.isDeleteMode = !1, e.isMoveMode = !1, e.isResizeMode = !1, e.isSelectMode = !1, e.isDrawMode = !1, e.isTextMode = !1, e.activeShape = void 0, e.showCaret = !1;
+  }, t = (y) => {
+    switch (s(), y) {
+      case "m":
+        e.isMoveMode = !0;
+        break;
+      // Move
+      case "r":
+        e.isResizeMode = !0;
+        break;
+      // Resize
+      case "d":
+        e.isDeleteMode = !0;
+        break;
+      // Delete
+      case "g":
+        e.isSelectMode = !0, e.setShapeTo("group"), e.activeShape = "group";
+        break;
+      // Select/Group
+      case "t":
+        e.isTextMode = !0, e.isWriting = !1, e.showCaret = !1;
+        break;
+    }
+  }, h = (y) => {
+    switch (y) {
+      case "c":
+        e.setShapeTo("circle");
+        break;
+      case "s":
+        e.setShapeTo("rect");
+        break;
+      case "a":
+        e.setShapeTo("arrow");
+        break;
+      case "l":
+        e.setShapeTo("line");
+        break;
+    }
+  }, u = (y, S) => {
+    const O = e.lastSelectedShape;
+    if (!O) return;
+    const C = (z, W) => {
+      typeof O[z] == "number" && (O[z] += W);
+    };
+    switch (O.type) {
+      case "rect":
+      case "circle":
+      case "text":
+        C("x", y), C("y", S);
+        break;
+      case "arrow":
+        C("x", y), C("y", S), C("endX", y), C("endY", S);
+        break;
+    }
+  }, I = () => {
+    const y = e.lastSelectedShape;
+    y && (e.shapes = e.shapes.filter((S) => S.id !== y.id), e.lastSelectedShape = void 0);
+  };
+  let w = !1, d = null;
+  const i = () => {
+    w || (w = !0, e.history?.begin?.("nudge"));
+  }, k = () => {
+    w && (clearTimeout(d), d = setTimeout(() => {
+      w = !1, e.history?.end?.();
+    }, 160));
+  }, m = () => {
+    clearTimeout(d), w && e.history?.end?.(), w = !1;
+  }, P = (y) => {
+    if (o(y) && !y.shiftKey && y.key.toLowerCase() === "z") {
+      if (r(y)) return;
+      y.preventDefault(), e.undoLastShape?.();
+      return;
+    }
+    if (o(y) && y.shiftKey && y.key.toLowerCase() === "z" || o(y) && y.key.toLowerCase() === "y") {
+      if (r(y)) return;
+      y.preventDefault(), typeof e.redoLastShape == "function" ? e.redoLastShape() : e.history?.redo?.();
+      return;
+    }
+    if (r(y)) return;
+    const S = y.key.toLowerCase();
+    if (S === "escape") {
+      y.preventDefault(), s();
+      return;
+    }
+    if (S === "delete" || S === "backspace") {
+      y.preventDefault(), I();
+      return;
+    }
+    if (["m", "r", "d", "g", "t"].includes(S)) {
+      y.preventDefault(), t(S);
+      return;
+    }
+    if (["c", "a", "l", "s"].includes(S)) {
+      y.preventDefault(), h(S);
+      return;
+    }
+    if (y.key === "ArrowUp" || y.key === "ArrowDown" || y.key === "ArrowLeft" || y.key === "ArrowRight") {
+      y.preventDefault(), i();
+      const C = y.shiftKey ? 10 : 1;
+      y.key === "ArrowUp" && u(0, -C), y.key === "ArrowDown" && u(0, C), y.key === "ArrowLeft" && u(-C, 0), y.key === "ArrowRight" && u(C, 0), k();
+      return;
+    }
+  }, _ = (y) => {
+    y.key.startsWith("Arrow") && k();
+  };
+  return window.addEventListener("keydown", P, { passive: !1 }), window.addEventListener("keyup", _, { passive: !0 }), function() {
+    window.removeEventListener("keydown", P, { passive: !1 }), window.removeEventListener("keyup", _, { passive: !0 }), m();
+  };
+}
+const le = { class: "teleport-tooltip__inner" }, re = {
+  __name: "TeleportedTooltip",
+  props: {
+    show: {
+      type: Boolean,
+      default: !1
+    },
+    x: {
+      type: Number,
+      required: !0
+    },
+    y: {
+      type: Number,
+      required: !0
+    },
+    placement: {
+      type: String,
+      default: "top"
+    },
+    styleObject: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    delay: {
+      type: Number,
+      default: 0
+    },
+    delayIn: {
+      type: Number,
+      default: 300
+    },
+    delayOut: {
+      type: Number,
+      default: 0
+    }
+  },
+  setup(e) {
+    const o = e, l = L(() => o.delayIn ?? o.delay), r = L(() => o.delayOut ?? o.delay), s = R(!1);
+    let t = null, h = null;
+    function u() {
+      t && (clearTimeout(t), t = null), h && (clearTimeout(h), h = null);
+    }
+    function I() {
+      u();
+      const i = Math.max(0, l.value || 0);
+      i === 0 ? s.value = !0 : t = setTimeout(() => {
+        s.value = !0, t = null;
+      }, i);
+    }
+    function w() {
+      u();
+      const i = Math.max(0, r.value || 0);
+      i === 0 ? s.value = !1 : h = setTimeout(() => {
+        s.value = !1, h = null;
+      }, i);
+    }
+    E(() => o.show, (i) => {
+      i ? I() : w();
+    }, { immediate: !0 }), H(() => {
+      o.show && I();
+    }), U(() => {
+      u();
+    });
+    const d = L(() => ({
+      position: "fixed",
+      zIndex: 2147483647,
+      top: `${o.y}px`,
+      left: `${o.x}px`,
+      transform: o.placement === "bottom" ? "translate(-50%, 8px)" : "translate(-50%, -100%)",
+      pointerEvents: "none",
+      ...o.styleObject
+    }));
+    return (i, k) => (c(), x(K, { to: "body" }, [
+      s.value ? (c(), p("div", {
+        key: 0,
+        class: g(["teleport-tooltip", e.placement]),
+        style: b(d.value),
+        role: "tooltip",
+        "aria-hidden": "false"
+      }, [
+        n("div", le, [
+          B(i.$slots, "default", {}, void 0, !0)
+        ])
+      ], 6)) : a("", !0)
+    ]));
+  }
+}, ne = /* @__PURE__ */ j(re, [["__scopeId", "data-v-430dd7ad"]]), de = {
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Object,
+      default() {
+        return {
+          shapes: [],
+          lastSelectedShape: void 0
+        };
+      }
+    }
+  },
+  components: {
+    Accordion: oe,
+    BaseIcon: te,
+    ColorPicker: se,
+    TeleportedTooltip: ne
+  },
+  data() {
+    return {
+      activeShape: void 0,
+      strokeSize: 1,
+      currentPointer: {
+        start: {
+          x: 0,
+          y: 0
+        },
+        end: {
+          x: 0,
+          end: 0
+        }
+      },
+      currentTarget: void 0,
+      hoveredShapeId: void 0,
+      isBold: !1,
+      isBulletTextMode: !1,
+      isDash: !1,
+      isDeleteMode: !1,
+      isDrawing: !1,
+      isDrawingNewShape: !0,
+      isDrawMode: !1,
+      isItalic: !1,
+      isMouseDown: !1,
+      isMoveMode: !1,
+      isPrinting: !1,
+      isResizeMode: !1,
+      isSelectMode: !1,
+      isSummaryOpen: !1,
+      isTextMode: !1,
+      isUnderline: !1,
+      isWriting: !1,
+      lastSelectedShape: this.dataset.lastSelectedShape,
+      pointerPosition: {
+        x: 0,
+        y: 0
+      },
+      preventEdit: !0,
+      selectedGroup: [],
+      shapes: this.dataset.shapes ? this.dataset.shapes : [],
+      shapesOrder: [],
+      step: Math.round(Math.random()) * 1e5,
+      svgHeight: 1e3,
+      svgWidth: 1e3,
+      options: {
+        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
+        }
+      },
+      selectedColor: "#000000",
+      showCaret: !1,
+      sizeRatio: 1,
+      slottedSvg: void 0,
+      sourceWidth: 1,
+      sourceHeight: 1,
+      textAlign: "start",
+      textFont: 20,
+      transparency: 100,
+      transparencyCodes: Z,
+      dragOffset: null,
+      showTooltip: !1,
+      tooltipKey: null,
+      tooltipPos: { x: 0, y: 0 },
+      tooltipAnchor: null,
+      history: [],
+      isMacLike: !1,
+      _onKeydown: null,
+      _historySize: { undo: 0, redo: 0 },
+      _rafId: null,
+      _lastPointerId: null,
+      _captureEl: null
+    };
+  },
+  watch: {
+    shapes: {
+      handler(e) {
+        e.length === 0 && (this.lastSelectedShape = void 0);
+      }
+    },
+    isTextMode: {
+      handler(e) {
+        this.showCaret = e;
+      }
+    }
+  },
+  computed: {
+    FINAL_CONFIG() {
+      const e = Q().vue_ui_annotator;
+      if (!Object.keys(this.config || {}).length)
+        return e;
+      const o = this.treeShake({
+        defaultConfig: e,
+        userConfig: this.config
+      });
+      return this.convertConfigColors(o);
+    },
+    tooltipStyleObject() {
+      const e = this.FINAL_CONFIG.style.tooltips;
+      return {
+        backgroundColor: e.backgroundColor,
+        color: e.color,
+        border: e.border,
+        borderRadius: `${e.borderRadius}px`,
+        boxShadow: e.boxShadow
+      };
+    },
+    canSelect() {
+      return this.shapes.filter((e) => !["line", "group"].includes(e.type)).length > 1;
+    },
+    colorTransparency() {
+      return this.transparencyCodes[this.transparency > 98 ? 98 : this.transparency];
+    },
+    cursorClass() {
+      switch (!0) {
+        case this.isDeleteMode:
+          return "default";
+        case this.isMoveMode:
+          return "move";
+        case this.isTextMode:
+          return "text";
+        case this.isResizeMode:
+          return "se-resize";
+        default:
+          return "";
+      }
+    },
+    records() {
+      return this.shapes;
+    },
+    userShapes() {
+      return this.records.map((e) => {
+        switch (!0) {
+          case (e && e.type === "arrow"):
+            const o = e.strokeWidth > 3 ? 5 : 10, l = e.strokeWidth > 3 ? 2.5 : 5;
+            return {
+              html: `
+              <defs>
+              <marker 
+                  id="${e.id}" 
+                  markerWidth="${o}" 
+                  markerHeight="${o}" 
+                  refX="0" 
+                  refY="${l}" 
+                  orient="auto"
+              >
+                  <polygon 
+                  points="0 0,${o} ${l}, 0 ${o}" 
+                  fill="${e.color}"
+                  />
+              </marker>
+              </defs>
+              ${this.includeSelectionIndicator(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:${this.isResizeMode || this.isMoveMode ? "initial" : "none"}; rx:1 !important; ry:1 !important;"
+              />
+              </g>
+              ${this.includeDeleteButton(e)}
+              </g>
+              `,
+              id: e.id
+            };
+          case (e && e.type === "circle"):
+            return {
+              html: `
+              <g id="${e.id}">
+                  ${this.includeSelectionIndicator(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>
+              
+              ${this.includeDeleteButton(e)}`,
+              id: e.id
+            };
+          case (e && e.type === "group"):
+            return {
+              html: `<g id="${e.id}">
+                            <rect
+                                id="${this.isResizeMode ? "" : 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:${this.isSelectMode || this.isDeleteMode || this.hoveredShapeId && this.hoveredShapeId === e.id ? "initial" : "none"};"
+                            />
+                <g id="${e.id}">
+                ${e.content ? e.content : ""}
+                </g>
+                            ${this.includeDeleteButton(e)}
+                            </g> `,
+              id: e.id
+            };
+          case (e && e.type === "rect"):
+            return {
+              html: `<g id="${e.id}">
+                            ${this.includeSelectionIndicator(e)}
+                            <rect
+                                id="${this.isResizeMode ? "" : 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:${this.isResizeMode ? "initial" : "none"}; rx:1 !important; ry:1 !important;"
+                            />
+                            ${this.includeDeleteButton(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;"        
+                        />
+                ${this.includeDeleteButton(e)}
+                    </g>
+                    `,
+              id: e.id
+            };
+          case (e && e.type === "text"):
+            const r = e.textContent.split("‎"), s = [];
+            for (let t = 0; t < r.length; t += 1)
+              s.push(`
+            ${e.isBulletTextMode ? `<tspan x="${e.x - e.fontSize}" y="${e.y + e.fontSize * t}" id="${e.id}" font-size="${e.fontSize / 2}">⬤</tspan>` : ""}
+                    <tspan id="${e.id}" x="${e.x}" y="${e.y + e.fontSize * t}">
+                        ${r[t]}
+                    </tspan>`);
+            return {
+              html: `
+                ${this.includeSelectionIndicator(e)}
+                ${this.computeTextElement(
+                e,
+                s,
+                e.isBulletTextMode
+              )}
+                `,
+              id: e.id
+            };
+        }
+      });
+    }
+  },
+  setup() {
+    const e = "annotations", o = R(J()), { isImaging: l, generateImage: r } = ee({
+      elementId: o.value,
+      fileName: e
+    });
+    return {
+      uid: o,
+      isImaging: l,
+      generateImage: r
+    };
+  },
+  mounted() {
+    const e = this.$refs.drawSvgContainer;
+    let o = !1;
+    this.walkTheDOM(e, (s) => {
+      if (!o && ["DIV", "svg", "section", "canvas"].includes(s.tagName)) {
+        this.slottedSvg = s, o = !0;
+        return;
+      }
+    }), this.isMacLike = (() => {
+      if (typeof navigator > "u") return !1;
+      const s = navigator.userAgentData?.platform ?? "";
+      if (s) return /mac|ios/i.test(s);
+      const t = navigator.userAgent ?? "";
+      return /(Mac|iPhone|iPad|iPod)/i.test(t);
+    })();
+    const l = this.slottedSvg.getBoundingClientRect();
+    if (this.sizeRatio = l.height / l.width, this.svgWidth = 1e3, this.svgHeight = this.sizeRatio * 1e3, this.sourceWidth = l.width, this.sourceHeight = l.height, new ResizeObserver((s) => {
+      s.forEach((t) => {
+        this.sourceWidth = t.contentRect.width, this.sourceHeight = t.contentRect.height, this.sizeRatio = t.contentRect.height / t.contentRect.width, this.svgHeight = this.sizeRatio * 1e3;
+      });
+    }).observe(this.slottedSvg), this._onKeydown = (s) => this.write(s), window.addEventListener("keydown", this._onKeydown), this.history = this.makeHistory(), this.history.size) {
+      const s = this.history.size();
+      this._historySize.undo = s.undo, this._historySize.redo = s.redo;
+    }
+    this._unregisterShortcuts = ie(this);
+  },
+  beforeUnmount() {
+    this.hideTooltip(), this._rafId && cancelAnimationFrame(this._rafId), this._onKeydown && window.removeEventListener("keydown", this._onKeydown);
+  },
+  unmounted() {
+    this._unregisterShortcuts && this._unregisterShortcuts();
+  },
+  destroyed() {
+    window.removeEventListener("keydown", (e) => {
+      this.write(e);
+    });
+  },
+  methods: {
+    treeShake: q,
+    convertConfigColors: V,
+    _tickDraw() {
+      if (!this.isDrawing) {
+        this._rafId = null;
+        return;
+      }
+      this.drawUp(), this._rafId = requestAnimationFrame(() => this._tickDraw());
+    },
+    bringToFrontById(e) {
+      const o = this.shapes.findIndex((l) => l.id === e);
+      if (o > -1 && o !== this.shapes.length - 1) {
+        const [l] = this.shapes.splice(o, 1);
+        this.shapes.push(l);
+      }
+    },
+    _shapeIdUnderPointer(e) {
+      const o = (t) => !!t && this.shapes.some((h) => h.id === t);
+      if (o(e?.target?.id)) return e.target.id;
+      const l = this.$refs.mainSvg?.querySelector(".annotator__glass");
+      if (!l) return null;
+      const r = l.style.pointerEvents;
+      l.style.pointerEvents = "none";
+      const s = document.elementFromPoint(e.clientX, e.clientY);
+      return l.style.pointerEvents = r || "all", o(s?.id) ? s.id : null;
+    },
+    makeHistory(e = {}) {
+      const {
+        maxEntries: o = 200,
+        maxBytes: l = 2e6
+      } = e, r = { open: !1, before: null, undo: [], redo: [] }, s = { undo: 0, redo: 0 }, t = (d) => typeof d == "string" ? d.length * 2 : 0, h = () => JSON.stringify({
+        shapes: this.copy(this.shapes),
+        lastSelectedShape: this.copy(this.lastSelectedShape)
+      }), u = (d) => {
+        const i = JSON.parse(d);
+        this.shapes = i.shapes, this.lastSelectedShape = i.lastSelectedShape;
+      }, I = () => {
+        this._historySize.undo = r.undo.length, this._historySize.redo = r.redo.length;
+      }, w = (d, i) => {
+        const k = r[d];
+        for (k.push(i), s[d] += t(i); k.length > o || s[d] > l; ) {
+          const m = k.shift();
+          s[d] -= t(m);
+        }
+      };
+      return {
+        begin() {
+          r.open || (r.open = !0, r.before = h());
+        },
+        end() {
+          if (!r.open) return;
+          r.open = !1, h() !== r.before && (w("undo", r.before), r.redo.length = 0, s.redo = 0), r.before = null, I();
+        },
+        undo() {
+          const d = r.undo.pop();
+          if (!d) return;
+          s.undo -= t(d);
+          const i = h();
+          w("redo", i), u(d), I();
+        },
+        redo() {
+          const d = r.redo.pop();
+          if (!d) return;
+          s.redo -= t(d);
+          const i = h();
+          w("undo", i), u(d), I();
+        },
+        size() {
+          return {
+            undo: r.undo.length,
+            redo: r.redo.length,
+            approxBytes: { undo: s.undo, redo: s.redo }
+          };
+        }
+      };
+    },
+    showToolTipFor(e, o, l = "top") {
+      this.tooltipKey = e, this.tooltipAnchor = o.currentTarget || o.target, this.updateTooltipPosition(), this.showTooltip = !0, window.addEventListener("scroll", this.updateTooltipPosition, !0), window.addEventListener("resize", this.updateTooltipPosition, { passive: !0 }), this.tooltipPlacement = l;
+    },
+    hideTooltip() {
+      this.showTooltip = !1, this.tooltipKey = null, this.tooltipAnchor = null, window.removeEventListener("scroll", this.updateTooltipPosition, !0), window.removeEventListener("resize", this.updateTooltipPosition);
+    },
+    updateTooltipPosition() {
+      if (!this.tooltipAnchor) return;
+      const e = this.tooltipAnchor.getBoundingClientRect();
+      this.tooltipPos = { x: e.left + e.width / 2, y: e.top };
+    },
+    initDragOffset(e) {
+      const o = e?.target && e.target.id || this.currentTarget && this.currentTarget.id, l = this.shapes.find((t) => t.id === o);
+      if (!l) {
+        this.dragOffset = null;
+        return;
+      }
+      this.lastSelectedShape = l;
+      const r = this.pointerPosition.x, s = this.pointerPosition.y;
+      switch (l.type) {
+        case "rect":
+        case "circle":
+        case "text":
+          this.dragOffset = { dx: r - l.x, dy: s - l.y };
+          break;
+        case "arrow":
+          this.dragOffset = {
+            dx: r - l.x,
+            dy: s - l.y,
+            endDx: r - l.endX,
+            endDy: s - l.endY
+          };
+          break;
+        case "group":
+          this.dragOffset = { dx: r - (l.x || 0), dy: s - (l.y || 0) };
+          break;
+        default:
+          this.dragOffset = { dx: 0, dy: 0 };
+          break;
+      }
+    },
+    bringShapeTo(e) {
+      const o = this.shapes.find(
+        (l) => l.id === this.lastSelectedShape.id
+      );
+      switch (!0) {
+        case e === "front":
+          this.shapes = this.shapes.filter((l) => l.id !== o.id), this.shapes.push(o);
+          break;
+        case e === "back":
+          this.shapes = this.shapes.filter((l) => l.id !== o.id), this.shapes = [o, ...this.shapes];
+          break;
+        default:
+          return;
+      }
+    },
+    clickSvg(e) {
+      if (this.isDeleteMode)
+        return;
+      e.preventDefault(), e.stopPropagation(), this.deleteEmptyTextElement(), this.isTextMode ? (this.isWriting = !0, this.showCaret = !0) : (this.isWriting = !1, this.showCaret = !1, this.isTextMode = !1);
+      let o = `text_${Math.random() * 1e4}_${Math.random() * 99999}`;
+      if (this.isWriting) {
+        this.history?.begin(), this.shapes.push({
+          id: o,
+          type: "text",
+          lines: 0,
+          x: this.pointerPosition.x,
+          y: this.pointerPosition.y,
+          textContent: "",
+          fontSize: this.copy(this.textFont),
+          textAlign: this.copy(this.textAlign),
+          isBold: this.copy(this.isBold),
+          isItalic: this.copy(this.isItalic),
+          isUnderline: this.copy(this.isUnderline),
+          color: this.copy(this.selectedColor),
+          isBulletTextMode: this.copy(this.isBulletTextMode)
+        }), this.currentTarget = this.shapes.at(-1), this.lastSelectedShape = this.shapes.at(-1), this.history?.end();
+        return;
+      }
+      const l = () => {
+        this.isDash = this.shapes.find((s) => s.id === e.target.id).isDash;
+      }, r = () => {
+        this.strokeSize = this.shapes.find(
+          (s) => s.id === e.target.id
+        ).strokeWidth;
+      };
+      if (this.isSelectMode = !1, e.target.id.includes("arrow")) {
+        this.activeShape = "arrow", l(), r();
+        return;
+      }
+      if (e.target.id.includes("circle")) {
+        this.activeShape = "circle", this.options.circle.filled = this.shapes.find(
+          (s) => s.id === e.target.id
+        ).isFilled, l(), r();
+        return;
+      }
+      if (e.target.id.includes("rect")) {
+        this.activeShape = "rect", this.options.rect.filled = this.shapes.find(
+          (s) => s.id === e.target.id
+        ).isFilled, l(), r();
+        return;
+      }
+      if (e.target.id.includes("line")) {
+        this.activeShape = "line", r();
+        return;
+      }
+      if (e.target.id.includes("text")) {
+        this.isTextMode = !0, this.isWriting = !0, this.showCaret = !0;
+        const s = this.shapes.find((t) => t.id === e.target.id);
+        s && s.textAlign && (this.textAlign = this.shapes.find(
+          (t) => t.id === e.target.id
+        ).textAlign), s && (this.isBulletTextMode = this.shapes.find(
+          (t) => t.id === e.target.id
+        ).isBulletTextMode);
+        return;
+      }
+    },
+    copyPaste() {
+      const e = {
+        ...this.lastSelectedShape,
+        id: `${this.lastSelectedShape.id}_copy`,
+        x: this.lastSelectedShape.x - 100 < 0 ? 1 : this.lastSelectedShape.x - 100,
+        y: this.lastSelectedShape.y - 100 < 0 ? 1 : this.lastSelectedShape.y - 100
+      };
+      this.shapes.push(e);
+    },
+    includeDeleteButton(e, o = !1) {
+      switch (!0) {
+        case e.type === "circle":
+          return `
+                    <g id="${e.id}" style="display:${this.isDeleteMode ? "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 l, r = [-8, -12, -4, -12, -4];
+          switch (!0) {
+            case e.textAlign === "start":
+              o ? l = [-20, -24, -16, -16, -24] : l = [-16, -20, -12, -12, -20];
+              break;
+            case e.textAlign === "middle":
+              l = [0, -4, 4, 4, -4], r = [-32, -36, -28, -36, -28];
+              break;
+            case e.textAlign === "end":
+              l = [16, 20, 12, 12, 20];
+              break;
+            default:
+              l = [0, 0, 0];
+              break;
+          }
+          return `
+                    <g id="${e.id}" style="display:${this.isDeleteMode ? "initial" : "none"};">
+                        <circle id="${e.id}" cx="${e.x + l[0]}" cy="${e.y + r[0]}" r="12" fill="red"/>
+                        <line stroke="white" stroke-width="2" id="${e.id}" x1="${e.x + l[1]}" y1="${e.y + r[1]}" x2="${e.x + l[2]}" y2="${e.y + r[2]}"/>
+                        <line stroke="white" stroke-width="2" id="${e.id}" x1="${e.x + l[3]}" y1="${e.y + r[3]}" x2="${e.x + l[4]}" y2="${e.y + r[4]}"/>
+                    </g>
+                `;
+        default:
+          return `
+                    <g id="${e.id}" style="display:${this.isDeleteMode ? "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>
+                `;
+      }
+    },
+    includeSelectionIndicator(e) {
+      if (e)
+        switch (!0) {
+          case e.type === "rect":
+            return `
+                    <rect
+                    id="${e.id}" 
+                    style="stroke-dasharray: 10; display:${this.hoveredShapeId && this.hoveredShapeId === 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:${this.hoveredShapeId && this.hoveredShapeId === 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 o = e.endX - e.x > 0, l = e.endY - e.y > 0;
+            return `
+                    <rect
+                    id="${e.id}" 
+                    style="stroke-dasharray: 10; display:${this.hoveredShapeId && this.hoveredShapeId === e.id ? "initial" : "none"}"
+                    x="${o ? e.x - 20 : e.endX - 20}"
+                    y="${l ? e.y - 20 : e.endY - 20}"
+                    height="${l ? e.endY - e.y + 40 : e.y - e.endY + 40}"
+                    width="${o ? e.endX - e.x + 40 : e.x - e.endX + 40}"
+                    fill="transparent"
+                    stroke="grey"
+                    />
+                `;
+          case e.type === "text":
+            const r = this.$refs.mainSvg ? Array.from(this.$refs.mainSvg.getElementsByTagName("text")).find(
+              (I) => I.id === e.id
+            ) : null;
+            if (!r)
+              return;
+            const { x: s, y: t, width: h, height: u } = r.getBBox();
+            return `
+                    <rect
+                    id="${e.id}" 
+                    style="stroke-dasharray: 10; display:${this.hoveredShapeId && this.hoveredShapeId === e.id ? "initial" : "none"}"
+                    x="${s - 20}"
+                    y="${t - 20}"
+                    height="${u + 40}"
+                    width="${h + 40}"
+                    fill="transparent"
+                    stroke="grey"
+                    />
+                `;
+          default:
+            return "";
+        }
+    },
+    allowEditAndHoverShapes(e) {
+      e.preventDefault(), this.preventEdit = !1, e.target && e.target.id && (this.hoveredShapeId = e.target.id);
+    },
+    setSelectedTextAlignTo(e) {
+      !this.lastSelectedShape || this.lastSelectedShape.type !== "text" || (this.lastSelectedShape.textAlign = e);
+    },
+    undoLastShape() {
+      this.history?.undo?.();
+    },
+    redoLastShape() {
+      this.history?.redo?.();
+    },
+    write(e) {
+      if (this.preventEdit)
+        return;
+      e.preventDefault();
+      const o = e.keyCode;
+      if (!this.isWriting)
+        return;
+      this.showCaret = !0;
+      let l;
+      if (this.lastSelectedShape.type === "text" ? l = this.shapes.find((s) => s.id === this.lastSelectedShape.id) : l = this.shapes.at(-1), this.currentTarget = l, l.type !== "text")
+        return;
+      this.currentTarget.isBold = this.copy(this.isBold), this.currentTarget.isItalic = this.copy(this.isItalic), this.currentTarget.isUnderline = this.copy(this.isUnderline);
+      const r = [
+        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"
+      ];
+      switch (!0) {
+        case o === 8:
+          l.textContent = l.textContent.slice(0, -1);
+          break;
+        case o === 9:
+          l.textContent += "&nbsp; &nbsp; &nbsp; &nbsp;";
+          break;
+        case o === 13:
+          l.lines += 1, l.textContent += "‎";
+          return;
+        case r.includes(o):
+          return;
+        default:
+          l.textContent += e.key;
+      }
+    },
+    groupShapes() {
+      if (this.selectedGroup = [], this.activeShape !== "group") {
+        this.isSelectMode = !1, this.shapes = this.shapes.filter((o) => o.type !== "group");
+        return;
+      }
+      const e = this.shapes.at(-1);
+      if (this.shapes.forEach((o) => {
+        if (o.type !== "group")
+          switch (!0) {
+            case o.type === "arrow":
+              const l = o.x <= o.endX && o.y <= o.endY && e.x <= o.x && e.y <= o.y && e.x + e.rectWidth >= o.endX && e.y + e.rectHeight >= o.endY, r = o.endY < o.y && o.x < o.endX && e.x <= o.x && e.y <= o.y && e.x + e.rectWidth >= o.endX && e.y + e.rectHeight >= o.y, s = o.x > o.endX && o.y < o.endY && e.x <= o.endX && e.y <= o.endY && e.x + e.rectWidth >= o.x && e.y + e.rectHeight >= o.endY, t = o.x > o.endX && o.y > o.endY && e.x <= o.endX && e.y <= o.endY && e.x + e.rectWidth >= o.x && e.y + e.rectHeight >= o.y;
+              (l || r || s || t) && this.selectedGroup.push(o);
+              break;
+            case o.type === "circle":
+              e.x <= o.x + o.circleRadius && e.y <= o.y + o.circleRadius && o.x + o.circleRadius <= e.x + e.rectWidth && o.y + o.circleRadius <= e.y + e.rectHeight && this.selectedGroup.push(o);
+              break;
+            case o.type === "rect":
+              e.x <= o.x && e.y <= o.y && o.x <= e.x + e.rectWidth && o.y <= e.y + e.rectHeight && o.x + o.rectWidth <= e.x + e.rectWidth && o.y + o.rectHeight <= e.y + e.rectHeight && o.rectWidth <= e.rectWidth && o.rectHeight <= e.rectHeight && this.selectedGroup.push(o);
+              break;
+            case o.type === "text":
+              e.x <= o.x && e.y <= o.y && this.selectedGroup.push(o);
+              break;
+          }
+      }), this.selectedGroup = this.selectedGroup.map((o) => ({
+        ...o,
+        id: e.id,
+        oldId: o.id,
+        diffX: o.x - e.x,
+        diffY: o.y - e.y,
+        diffEndX: o.endX ? o.endX - e.x : 0,
+        diffEndY: o.endY ? o.endY - e.y : 0
+      })), e.source = this.selectedGroup, this.selectedGroup.length > 1) {
+        const o = this.copy(this.selectedGroup).map((l) => l.oldId);
+        this.shapes = this.shapes.filter((l) => !o.includes(l.id)), this.selectedGroup.forEach((l) => {
+          switch (!0) {
+            case l.type === "circle":
+              e.content += `
+                <circle
+                id="${l.id}"
+                cx="${l.x}"
+                cy="${l.y}"
+                r="${l.circleRadius ? l.circleRadius : Number.MIN_VALUE}"
+                fill="${l.isFilled ? l.color + l.alpha : "rgba(255,255,255,0.001)"}"
+                stroke="${l.color + l.alpha}" 
+                                stroke-width="${l.strokeWidth}"
+                                style="${l.isDash ? `stroke-dasharray: ${l.strokeWidth * 3}` : ""}"
+                                />
+            `;
+              break;
+            case l.type === "rect":
+              e.content += `
+                <rect
+                id="${this.isResizeMode ? "" : l.id}"
+                x="${l.x}"
+                y="${l.y}"
+                fill="${l.isFilled ? l.color + l.alpha : "rgba(255,255,255,0.001)"}"
+                height="${l.rectHeight}"
+                width="${l.rectWidth}"
+                stroke="${l.color + l.alpha}"
+                stroke-width="${l.strokeWidth}"
+                style="rx:1 !important; ry:1 !important; ${l.isDash ? `stroke-dasharray: ${l.strokeWidth * 3}` : ""}"
+                            />
+            `;
+              break;
+            case l.type === "arrow":
+              const r = l.strokeWidth > 3 ? 5 : 10, s = l.strokeWidth > 3 ? 2.5 : 5, t = Date.now();
+              e.content += `
+                <g id="${l.id}">
+                <defs>
+                    <marker 
+                    id="${t}" 
+                    markerWidth="${r}" 
+                    markerHeight="${r}" 
+                    refX="0" 
+                    refY="${s}" 
+                    orient="auto"
+                    >
+                    <polygon 
+                    points="0 0,${r} ${s}, 0 ${r}" 
+                    fill="${l.color}"
+                    />
+                    </marker>
+                </defs>
+
+                <path 
+                    style="stroke-linecap: round !important; ${l.isDash ? `stroke-dasharray: ${l.strokeWidth * 3}` : ""}" 
+                    stroke="${l.color}" 
+                    id="${l.id}" 
+                    d="M${l.x},${l.y} ${l.endX},${l.endY}" 
+                    stroke-width="${l.strokeWidth}" 
+                    marker-end="url(#${t})"
+                />
+                </g>
+            `;
+              break;
+            case l.type === "text":
+              const h = l.textContent.split("‎"), u = [];
+              for (let I = 0; I < h.length; I += 1)
+                u.push(`
+                ${l.isBulletTextMode ? `<tspan x="${l.x - l.fontSize}" y="${l.y + l.fontSize * I}" id="${l.id}" font-size="${l.fontSize / 2}">⬤</tspan>` : ""}
+                <tspan id="${l.id}" x="${l.x}" y="${l.y + l.fontSize * I}">
+                    ${h[I]}
+                </tspan>`);
+              e.content += `
+                ${this.computeTextElement(l, u, l.isBulletTextMode)}
+                `;
+              break;
+          }
+        });
+      } else
+        this.shapes = this.shapes.filter((o) => o.id !== e.id);
+    },
+    moveGroup(e) {
+      e.content = "";
+      const o = e.x || 0, l = e.y || 0;
+      (e.source || []).forEach((r) => {
+        switch (r.type) {
+          case "circle": {
+            const s = o + r.diffX, t = l + r.diffY;
+            e.content += `
+              <circle
+                id="${r.id}"
+                cx="${s}"
+                cy="${t}"
+                r="${r.circleRadius ? r.circleRadius : Number.MIN_VALUE}"
+                fill="${r.isFilled ? r.color + r.alpha : "rgba(255,255,255,0.001)"}"
+                stroke="${r.color + r.alpha}"
+                stroke-width="${r.strokeWidth}"
+                style="${r.isDash ? `stroke-dasharray: ${r.strokeWidth * 3}` : ""}"
+              />
+            `;
+            break;
+          }
+          case "rect": {
+            const s = o + r.diffX, t = l + r.diffY;
+            e.content += `
+              <rect
+                id="${this.isResizeMode ? "" : r.id}"
+                x="${s}"
+                y="${t}"
+                fill="${r.isFilled ? r.color + r.alpha : "rgba(255,255,255,0.001)"}"
+                height="${r.rectHeight}"
+                width="${r.rectWidth}"
+                stroke="${r.color + r.alpha}"
+                stroke-width="${r.strokeWidth}"
+                style="rx:1 !important; ry:1 !important; ${r.isDash ? `stroke-dasharray: ${r.strokeWidth * 3}` : ""}"
+              />
+            `;
+            break;
+          }
+          case "arrow": {
+            const s = o + r.diffX, t = l + r.diffY, h = o + r.diffEndX, u = l + r.diffEndY, I = r.strokeWidth > 3 ? 5 : 10, w = r.strokeWidth > 3 ? 2.5 : 5, d = `m_${r.id}_${Math.random().toString(36).slice(2)}`;
+            e.content += `
+              <g id="${r.id}">
+                <defs>
+                  <marker 
+                    id="${d}" 
+                    markerWidth="${I}" 
+                    markerHeight="${I}" 
+                    refX="0" 
+                    refY="${w}" 
+                    orient="auto">
+                    <polygon points="0 0,${I} ${w}, 0 ${I}" fill="${r.color}" />
+                  </marker>
+                </defs>
+                <path
+                  style="stroke-linecap: round !important; ${r.isDash ? `stroke-dasharray: ${r.strokeWidth * 3}` : ""}"
+                  stroke="${r.color}"
+                  id="${r.id}"
+                  d="M${s},${t} ${h},${u}"
+                  stroke-width="${r.strokeWidth}"
+                  marker-end="url(#${d})"
+                />
+              </g>
+            `;
+            break;
+          }
+          case "text": {
+            const t = (r.textContent || "").split("‎").map((h, u) => `
+              ${r.isBulletTextMode ? `<tspan x="${o + r.diffX - r.fontSize}" y="${l + r.diffY + r.fontSize * u}" id="${r.id}" font-size="${r.fontSize / 2}">⬤</tspan>` : ""}
+              <tspan id="${r.id}" x="${o + r.diffX}" y="${l + r.diffY + r.fontSize * u}">
+                ${h}
+              </tspan>
+            `).join("");
+            e.content += `
+              <g id="${r.id}">
+                <text
+                  style="user-select:none; height:100px;"
+                  id="${r.id}"
+                  x="${o + r.diffX}"
+                  y="${l + r.diffY}"
+                  text-anchor="${r.textAlign}"
+                  font-size="${r.fontSize}"
+                  fill="${r.color}"
+                  font-weight="${r.isBold ? "bold" : "normal"}"
+                  font-style="${r.isItalic ? "italic" : "normal"}"
+                  text-decoration="${r.isUnderline ? "underline" : "none"}">
+                  ${t}
+                </text>
+              </g>
+            `;
+            break;
+          }
+        }
+      });
+    },
+    onPointerOut(e) {
+      const o = this.$refs.mainSvg;
+      e.relatedTarget && o && o.contains(e.relatedTarget) || (this.preventEdit = !0, this.hoveredShapeId = void 0);
+    },
+    chooseAction(e) {
+      if (this.isDeleteMode) {
+        this.isMouseDown = !1;
+        return;
+      }
+      if (e.preventDefault(), e.stopPropagation(), this.isMouseDown = !0, e.pointerId != null) {
+        try {
+          this.$refs.mainSvg?.setPointerCapture?.(e.pointerId);
+        } catch {
+        }
+        this.lastPointerId = e.pointerId;
+      } else
+        this.lastPointerId = null;
+      if ((this.isDrawMode || this.isMoveMode || this.isResizeMode || this.isSelectMode) && this.history?.begin?.(), this.isDrawMode) {
+        this.drawDown();
+        return;
+      }
+      if (this.isMoveMode) {
+        const o = this._shapeIdUnderPointer(e) || this.hoveredShapeId || this.lastSelectedShape?.id;
+        o && (this.bringToFrontById(o), this.currentTarget = { id: o }), this.initDragOffset(e);
+      }
+    },
+    chooseMove(e) {
+      this.isDeleteMode || (e.preventDefault(), e.stopPropagation(), e.target.localName !== "svg" && (this.currentTarget = e.target), this.isMoveMode && this.isMouseDown ? this.moveDown() : this.isResizeMode && this.isMouseDown && this.resize());
+    },
+    computeCaretPosition(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 o = e.isBulletTextMode ? e.fontSize : 0;
+          return `<path class="vue-ui-annotator-caret" d="M${e.x - 20 - o},${e.y - e.fontSize / 6} ${e.x - 5 - o},${e.y - e.fontSize / 6}" stroke="black" stroke-width="2" />
+                        <path class="vue-ui-annotator-caret" d="M${e.x - 10 - o},${e.y - e.fontSize / 3} ${e.x - 5 - o},${e.y - e.fontSize / 6} ${e.x - 10 - o},${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 "";
+      }
+    },
+    computeTextElement(e, o, l = !1) {
+      switch (!0) {
+        case e.textAlign === "start":
+          return `
+                <g id="${e.id}">
+                    <rect 
+                        id="${e.id}" 
+                        style="display:${this.lastSelectedShape && this.lastSelectedShape.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"}"
+                    >
+                        ${o.join("")}
+                    </text>
+                    ${this.showCaret && this.lastSelectedShape && this.lastSelectedShape.id === e.id ? this.computeCaretPosition(e) : ""}
+                    ${this.includeDeleteButton(e, l)}
+                </g> 
+                `;
+        case e.textAlign === "middle":
+          return `
+                    <g id="${e.id}">
+                    <rect 
+                        id="${e.id}" 
+                        style="display:${this.lastSelectedShape && this.lastSelectedShape.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"}"
+                    >
+                        ${o.join("")}
+                    </text>
+                    ${this.showCaret && this.lastSelectedShape && this.lastSelectedShape.id === e.id ? this.computeCaretPosition(e) : ""}
+                    ${this.includeDeleteButton(e)}
+                    </g>
+                `;
+        case e.textAlign === "end":
+          return `
+                <g id="${e.id}">
+                    <rect 
+                        id="${e.id}" 
+                        style="display:${this.lastSelectedShape && this.lastSelectedShape.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"}"
+                    >
+                        ${o.join("")}
+                    </text>
+                    ${this.showCaret && this.lastSelectedShape && this.lastSelectedShape.id === e.id ? this.computeCaretPosition(e) : ""}
+                    ${this.includeDeleteButton(e)}
+                </g> 
+                `;
+        default:
+          return "";
+      }
+    },
+    copy(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((o) => this.copy(o)) : typeof e == "object" ? Object.fromEntries(
+          Object.entries(e).map(([o, l]) => [o, this.copy(l)])
+        ) : e;
+      }
+    },
+    clickShape(e) {
+      const o = e.target.id;
+      switch (!0) {
+        case this.isDeleteMode:
+          this.history?.begin(), this.shapes = [...this.shapes].filter((l) => l.id !== o), this.lastSelectedShape = void 0, this.history?.end();
+          return;
+        default:
+          this.lastSelectedShape = this.shapes.find((l) => l.id === o);
+          break;
+      }
+    },
+    deleteEmptyTextElement() {
+      !this.lastSelectedShape || !this.lastSelectedShape.id.includes("text") || this.lastSelectedShape.textContent === "" && (this.shapes = this.shapes.filter(
+        (e) => e.id !== this.lastSelectedShape.id
+      ), this.lastSelectedShape = this.shapes.at(-1));
+    },
+    drawUp(e = !1) {
+      if (!this.activeShape || !this.isDrawing)
+        return;
+      this.currentPointer.end = {
+        x: this.pointerPosition.x,
+        y: this.pointerPosition.y
+      };
+      let o;
+      this.shapes.length > 0 && this.currentTarget && (o = [...this.shapes].find(
+        (u) => u.id === this.currentTarget.id
+      ));
+      let l, r, s;
+      o && (l = o.x - this.currentPointer.end.x, r = o.y - this.currentPointer.end.y, s = Math.sqrt(l * l + r * r));
+      let t, h;
+      switch (e ? (t = Math.max(this.currentPointer.end.x, o.x), h = Math.min(this.currentPointer.end.x, o.x), Math.max(this.currentPointer.end.y, o.y), Math.min(this.currentPointer.end.y, o.y)) : (t = Math.max(this.currentPointer.end.x, this.currentPointer.start.x), h = Math.min(this.currentPointer.end.x, this.currentPointer.start.x), Math.max(this.currentPointer.end.y, this.currentPointer.start.y), Math.min(this.currentPointer.end.y, this.currentPointer.start.y)), !0) {
+        case this.activeShape === "arrow":
+          this.shapes.at(-1).endX = this.currentPointer.end.x, this.shapes.at(-1).endY = this.currentPointer.end.y;
+          break;
+        case this.activeShape === "circle":
+          const u = 20;
+          this.shapes.at(-1).circleRadius = this.isDrawingNewShape ? this.copy(t - h) + u : s + u;
+          break;
+        case this.activeShape === "line":
+          this.shapes.at(
+            -1
+          ).path += ` ${this.pointerPosition.x} ${this.pointerPosition.y} `;
+          break;
+        case ["rect", "group"].includes(this.activeShape):
+          const I = 20;
+          this.shapes.at(-1).rectWidth = this.copy(this.currentPointer.end.x - this.shapes.at(-1).x) > 0 ? this.copy(this.currentPointer.end.x - this.shapes.at(-1).x) : I, this.shapes.at(-1).rectHeight = this.copy(this.currentPointer.end.y - this.shapes.at(-1).y) > 0 ? this.copy(this.currentPointer.end.y - this.shapes.at(-1).y) : I;
+      }
+    },
+    drawDown() {
+      if (this.isDrawing = !0, !this.activeShape && !this.isSelectMode || !this.isDrawing)
+        return;
+      this.isDrawingNewShape = !0, this.currentPointer.start = {
+        x: this.pointerPosition.x,
+        y: this.pointerPosition.y
+      };
+      let e = `${this.isSelectMode ? "group" : this.activeShape}_${Math.random() * 1e4}_${Date.now()}`;
+      switch (!0) {
+        case this.activeShape === "arrow":
+          this.shapes.push({
+            id: e,
+            x: this.pointerPosition.x,
+            y: this.pointerPosition.y,
+            endX: this.pointerPosition.x,
+            endY: this.pointerPosition.y,
+            type: this.activeShape,
+            color: this.copy(this.selectedColor),
+            strokeWidth: this.copy(Math.abs(this.strokeSize)),
+            isDash: this.copy(this.isDash)
+          }), this.lastSelectedShape = this.shapes.at(-1);
+          break;
+        case this.activeShape === "circle":
+          this.shapes.push({
+            alpha: this.options.circle.filled ? this.colorTransparency : "",
+            id: e,
+            color: this.copy(this.selectedColor),
+            isFilled: this.copy(this.options.circle.filled),
+            circleRadius: this.copy(this.options.circle.radius),
+            circleStrokeWidth: this.copy(this.options.circle.strokeWidth),
+            type: this.activeShape,
+            x: this.pointerPosition.x,
+            y: this.pointerPosition.y,
+            strokeWidth: this.copy(Math.abs(this.strokeSize)),
+            isDash: this.copy(this.isDash)
+          }), this.lastSelectedShape = this.shapes.at(-1);
+          break;
+        case this.activeShape === "line":
+          this.shapes.push({
+            alpha: this.copy(this.colorTransparency),
+            id: e,
+            x: this.pointerPosition.x,
+            y: this.pointerPosition.y,
+            type: this.activeShape,
+            color: this.copy(this.selectedColor),
+            strokeWidth: this.copy(Math.abs(this.strokeSize)),
+            isDash: this.copy(this.isDash),
+            path: `${this.pointerPosition.x} ${this.pointerPosition.y}`
+          }), this.lastSelectedShape = this.shapes.at(-1);
+          break;
+        case this.activeShape === "rect":
+          this.shapes.push({
+            alpha: this.options.rect.filled ? this.colorTransparency : "",
+            id: e,
+            color: this.copy(this.selectedColor),
+            isFilled: this.copy(this.options.rect.filled),
+            rectStrokeWidth: this.copy(this.options.rect.strokeWidth),
+            rectHeight: this.copy(this.options.rect.height),
+            rectWidth: this.copy(this.options.rect.width),
+            type: this.activeShape,
+            x: this.pointerPosition.x,
+            y: this.pointerPosition.y,
+            strokeWidth: this.copy(Math.abs(this.strokeSize)),
+            isDash: this.copy(this.isDash)
+          }), this.lastSelectedShape = this.shapes.at(-1);
+          break;
+        case this.activeShape === "group":
+          this.shapes.push({
+            alpha: 1,
+            id: `group_${Math.random() * 1e4}_${Date.now()}`,
+            x: this.pointerPosition.x,
+            y: this.pointerPosition.y,
+            isFilled: !1,
+            rectHeight: this.copy(this.options.rect.height),
+            rectWidth: this.copy(this.options.rect.width),
+            rectStrokeWidth: 1,
+            type: "group",
+            color: "grey",
+            strokeWidth: 1,
+            isDash: !0,
+            content: ""
+          });
+          break;
+      }
+      this._rafId || (this._rafId = requestAnimationFrame(() => this._tickDraw()));
+    },
+    move(e) {
+      if (!e || !e.id || e.type === "line" || !this.dragOffset && (this.initDragOffset({ target: { id: e.id } }), !this.dragOffset))
+        return;
+      const { dx: o, dy: l, endDx: r, endDy: s } = this.dragOffset, t = this.pointerPosition.x, h = this.pointerPosition.y;
+      switch (this.lastSelectedShape = e, e.type) {
+        case "arrow":
+          e.x = t - o, e.y = h - l, e.endX = t - (r ?? o), e.endY = h - (s ?? l);
+          break;
+        case "circle":
+          e.x = t - o, e.y = h - l;
+          break;
+        case "rect":
+          e.x = t - o, e.y = h - l;
+          break;
+        case "text":
+          e.x = t - o, e.y = h - l;
+          break;
+        case "group":
+          e.x = t - o, e.y = h - l, this.moveGroup(e);
+          break;
+      }
+    },
+    moveDown() {
+      const e = this.currentTarget?.id || this.hoveredShapeId;
+      if (!e) return;
+      const o = this.shapes.find((l) => l.id === e);
+      o && this.move(o);
+    },
+    print() {
+      this.isPrinting = !0, this.isDeleteMode = !1, this.isMoveMode = !1, this.isResizeMode = !1, this.isTextMode = !1, this.isWriting = !1, this.isSelectMode = !1, this.activeShape = void 0, this.showCaret = !1, this.$nextTick(async () => {
+        const e = this.$refs.drawSvgContainer;
+        this.walkTheDOM(e, (o) => {
+          o && o.nodeType === 1 && (o.setAttribute("font-family", "Helvetica"), o.style.fontFamily = "Helvetica");
+        });
+        try {
+          let o;
+          try {
+            o = (await import("jspdf")).default;
+          } catch {
+            throw new Error("jspdf is not installed. Run npm install jspdf");
+          }
+          const l = await $({
+            container: e,
+            scale: 2
+          }), r = new Image();
+          r.src = l, r.onload = () => {
+            const s = {
+              width: 595.28,
+              height: 841.89
+            }, t = r.width, h = r.height, u = t / s.width * s.height, I = s.width, w = I / t * h, d = new o("", "pt", "a4");
+            let i = 0, k = h;
+            if (k < u)
+              d.addImage(l, "PNG", 0, 0, I, w, "", "FAST");
+            else
+              for (; k > 0; )
+                d.addImage(l, "PNG", 0, i, I, w, "", "FAST"), k -= u, i -= s.height, k > 0 && d.addPage();
+            d.save(`${(/* @__PURE__ */ new Date()).toLocaleDateString()}_annotations.pdf`);
+          };
+        } catch (o) {
+          console.error("Error generating image:", o);
+        } finally {
+          this.isPrinting = !1, this.walkTheDOM(e, (o) => {
+            o && o.nodeType === 1 && (o.setAttribute("font-family", this.FINAL_CONFIG.style.fontFamily), o.style.fontFamily = this.FINAL_CONFIG.style.fontFamily);
+          });
+        }
+      });
+    },
+    resetDraw(e) {
+      if (!this.isDeleteMode && e && (e.preventDefault(), e.stopPropagation()), this.isDrawing = !1, this.isMouseDown = !1, this.dragOffset = null, this.lastPointerId != null) {
+        try {
+          this.$refs.mainSvg?.releasePointerCapture?.(this.lastPointerId);
+        } catch {
+        }
+        this.lastPointerId = null;
+      }
+      this._rafId && (cancelAnimationFrame(this._rafId), this._rafId = null), this.isSelectMode && this.groupShapes(), this.history?.end();
+    },
+    resize() {
+      this.isDrawingNewShape = !1;
+      const e = this.currentTarget.id;
+      if (!e)
+        return;
+      this.isDrawing = !0;
+      const o = this.shapes.find((l) => l.id === e);
+      this.activeShape = o.type, this.shapes = this.shapes.filter((l) => l.id !== e), this.shapes.push(o), this.drawUp(!0);
+    },
+    setFillOfSelectedRect() {
+      !this.lastSelectedShape || !this.lastSelectedShape.id.includes("rect") || (this.lastSelectedShape.isFilled = !this.lastSelectedShape.isFilled);
+    },
+    setFillOfSelectedCircle() {
+      !this.lastSelectedShape || !this.lastSelectedShape.id.includes("circle") || (this.lastSelectedShape.isFilled = !this.lastSelectedShape.isFilled);
+    },
+    setColorOfSelectedShape() {
+      this.lastSelectedShape && (this.lastSelectedShape.color = this.copy(this.selectedColor), !["arrow", "text"].includes(this.lastSelectedShape.id) && (this.lastSelectedShape.alpha = this.copy(this.colorTransparency)));
+    },
+    setSelectedShapeToDash() {
+      !this.lastSelectedShape || this.lastSelectedShape.type === "text" || (this.lastSelectedShape.isDash = this.copy(this.isDash));
+    },
+    setTransparencyOfSelectedShape() {
+      !this.lastSelectedShape || ["arrow", "text"].includes(this.lastSelectedShape.id) || (this.lastSelectedShape.alpha = this.copy(this.colorTransparency));
+    },
+    setStrokeWidthOfSelectedShape() {
+      !this.lastSelectedShape || !["arrow", "circle", "rect", "line"].includes(this.lastSelectedShape.type) || (this.lastSelectedShape.strokeWidth = this.copy(Math.abs(this.strokeSize)));
+    },
+    setCurrentStyleOfSelectedText() {
+      !this.lastSelectedShape || this.lastSelectedShape.type !== "text" || (this.lastSelectedShape.isBold = this.copy(this.isBold), this.lastSelectedShape.isItalic = this.copy(this.isItalic), this.lastSelectedShape.isUnderline = this.copy(this.isUnderline), this.lastSelectedShape.fontSize = this.copy(this.textFont), this.lastSelectedShape.isBulletTextMode = this.copy(this.isBulletTextMode));
+    },
+    setPointer(e) {
+      e.preventDefault();
+      const l = this.$refs.mainSvg.getBoundingClientRect();
+      let r, s;
+      e.touches && e.touches.length > 0 ? (r = e.touches[0].clientX, s = e.touches[0].clientY) : (r = e.clientX, s = e.clientY), this.pointerPosition.x = (r - l.left) / l.width * this.svgWidth, this.pointerPosition.y = (s - l.top) / l.height * this.svgHeight;
+    },
+    setShapeTo(e) {
+      if (this.showCaret = !1, this.deleteEmptyTextElement(), e === this.activeShape) {
+        this.activeShape = void 0, this.isDrawMode = !1;
+        return;
+      }
+      this.isDrawMode = !0, this.isDeleteMode = !1, this.isMoveMode = !1, this.isResizeMode = !1, this.isTextMode = !1, this.activeShape = e;
+    },
+    toggleSummary() {
+      this.isSummaryOpen = !this.isSummaryOpen, this.isSummaryOpen || (this.isMoveMode = !1, this.isResizeMode = !1, this.isTextMode = !1, this.isWriting = !1, this.activeShape = void 0, this.showCaret = !1, this.isDeleteMode = !1, this.isWriting = !1), this.$emit("toggleOpenState", { isOpen: this.isSummaryOpen });
+    },
+    walkTheDOM(e, o) {
+      for (o(e), e = e.firstChild; e; )
+        this.walkTheDOM(e, o), e = e.nextSibling;
+    },
+    save() {
+      this.$emit("saveAnnotations", {
+        shapes: this.shapes,
+        lastSelectedShape: this.lastSelectedShape
+      });
+    }
+  }
+}, ue = { class: "vue-ui-annotator" }, he = { "data-dom-to-png-ignore": "" }, ce = ["disabled"], ye = ["disabled"], ae = ["disabled"], fe = ["disabled"], be = ["disabled"], Fe = ["disabled"], Ie = ["disabled"], Ne = ["disabled"], ge = ["disabled"], xe = {
+  class: "tool-selection",
+  style: { "margin-top": "6px" }
+}, pe = {
+  viewBox: "0 0 12 12",
+  style: { width: "100%" }
+}, we = ["fill"], Se = { key: 0 }, Te = { class: "tool-input" }, ke = ["checked"], Ce = {
+  viewBox: "0 0 12 12",
+  style: { width: "100%" }
+}, Oe = ["fill"], Me = { key: 1 }, ve = { class: "tool-input" }, Ae = ["checked"], me = {
+  viewBox: "0 0 24 24",
+  style: { width: "100%" }
+}, Le = ["stroke"], Ge = { key: 2 }, De = { style: { display: "flex", "flex-direction": "column", "align-items": "center", "justify-content": "center" } }, Pe = { class: "tool-input" }, _e = { key: 3 }, ze = { style: { display: "flex", "flex-direction": "column", "align-items": "center", "justify-content": "center" } }, Re = { class: "tool-input" }, Be = {
+  viewBox: "0 0 24 24",
+  height: "24",
+  width: "24",
+  style: { "margin-bottom": "-5px", "margin-top": "-10px" }
+}, je = ["checked"], We = { key: 4 }, Ee = { style: { display: "flex", "flex-direction": "column", "align-items": "center", "justify-content": "center" } }, He = { class: "tool-input" }, Ue = { key: 5 }, Ke = { key: 6 }, Xe = ["disabled"], Ye = { key: 7 }, Ve = ["disabled"], qe = { key: 8 }, Je = { key: 9 }, Ze = { key: 10 }, Qe = { key: 11 }, $e = {
+  style: { display: "flex", "flex-direction": "column", "align-items": "center", "justify-content": "center" },
+  class: "tooltip"
+}, et = { style: { display: "flex", "flex-direction": "column", "align-items": "start", "justify-content": "center" } }, tt = {
+  class: "tool-input",
+  style: { "font-variant-numeric": "tabular-nums" }
+}, ot = ["id"], st = ["viewBox", "width", "height"], it = ["width", "height", "pointer-events"], lt = ["innerHTML"], rt = ["height", "viewBox", "width"], nt = ["cx", "cy"];
+function dt(e, o, l, r, s, t) {
+  const h = v("BaseIcon"), u = v("TeleportedTooltip"), I = v("ColorPicker"), w = v("Accordion");
+  return c(), p("div", ue, [
+    n("div", he, [
+      T(w, {
+        config: {
+          maxHeight: 1e3,
+          head: {
+            backgroundColor: t.FINAL_CONFIG.style.backgroundColor,
+            color: t.FINAL_CONFIG.style.color,
+            iconColor: t.FINAL_CONFIG.style.color,
+            iconSize: 20,
+            icon: s.isSummaryOpen ? "close" : "annotator",
+            padding: "6px"
+          },
+          body: {
+            backgroundColor: t.FINAL_CONFIG.style.backgroundColor,
+            color: t.FINAL_CONFIG.style.color
+          }
+        },
+        onToggle: t.toggleSummary
+      }, {
+        title: N(({ color: d }) => [
+          n("div", {
+            style: b({ color: d })
+          }, f(t.FINAL_CONFIG.translations.title), 5)
+        ]),
+        content: N(({ backgroundColor: d }) => [
+          n("div", {
+            class: "tool-selection",
+            style: b({
+              backgroundColor: d
+            })
+          }, [
+            n("button", {
+              disabled: s.shapes.length === 0,
+              style: b({
+                background: s.isMoveMode ? t.FINAL_CONFIG.style.buttons.controls.selected.backgroundColor : t.FINAL_CONFIG.style.buttons.controls.backgroundColor,
+                border: s.isMoveMode ? t.FINAL_CONFIG.style.buttons.controls.selected.border : t.FINAL_CONFIG.style.buttons.controls.border,
+                color: s.isMoveMode ? t.FINAL_CONFIG.style.buttons.controls.selected.color : t.FINAL_CONFIG.style.buttons.controls.color,
+                borderRadius: `${t.FINAL_CONFIG.style.buttons.borderRadius}px`
+              }),
+              class: g({
+                "button-tool": !0,
+                "button-tool--selected": s.isMoveMode,
+                tooltip: !0
+              }),
+              onClick: o[0] || (o[0] = (i) => {
+                t.deleteEmptyTextElement(), s.isMoveMode = !s.isMoveMode, s.activeShape = void 0, s.isDeleteMode = !1, s.isDrawMode = !1, s.isResizeMode = !1, s.isSelectMode = !1, s.isTextMode = !1, s.isWriting = !1, s.showCaret = !1;
+              }),
+              onMouseenter: o[1] || (o[1] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("move", i, "top")),
+              onMouseleave: o[2] || (o[2] = (...i) => t.hideTooltip && t.hideTooltip(...i)),
+              onFocus: o[3] || (o[3] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("move", i, "top")),
+              onBlur: o[4] || (o[4] = (...i) => t.hideTooltip && t.hideTooltip(...i))
+            }, [
+              T(h, {
+                name: "move",
+                stroke: s.isMoveMode ? t.FINAL_CONFIG.style.buttons.controls.selected.color : t.FINAL_CONFIG.style.buttons.controls.color
+              }, null, 8, ["stroke"]),
+              t.FINAL_CONFIG.style.showTooltips ? (c(), x(u, {
+                key: 0,
+                show: s.showTooltip && s.tooltipKey === "move",
+                x: s.tooltipPos.x,
+                y: s.tooltipPos.y - 6,
+                placement: "top",
+                styleObject: t.tooltipStyleObject
+              }, {
+                default: N(() => [
+                  F(f(t.FINAL_CONFIG.translations.tooltipMove) + " ", 1),
+                  o[150] || (o[150] = n("kbd", null, "M", -1))
+                ]),
+                _: 1
+              }, 8, ["show", "x", "y", "styleObject"])) : a("", !0)
+            ], 46, ce),
+            n("button", {
+              disabled: s.shapes.length === 0 || s.activeShape === "line",
+              style: b({
+                background: s.isResizeMode ? t.FINAL_CONFIG.style.buttons.controls.selected.backgroundColor : t.FINAL_CONFIG.style.buttons.controls.backgroundColor,
+                border: s.isResizeMode ? t.FINAL_CONFIG.style.buttons.controls.selected.border : t.FINAL_CONFIG.style.buttons.controls.border,
+                color: s.isResizeMode ? t.FINAL_CONFIG.style.buttons.controls.selected.color : t.FINAL_CONFIG.style.buttons.controls.color,
+                borderRadius: `${t.FINAL_CONFIG.style.buttons.borderRadius}px`
+              }),
+              class: g({
+                "button-tool": !0,
+                "button-tool--selected": s.isResizeMode,
+                tooltip: !0
+              }),
+              onClick: o[5] || (o[5] = (i) => {
+                t.deleteEmptyTextElement(), s.isResizeMode = !s.isResizeMode, s.isMoveMode = !1, s.isDeleteMode = !1, s.isDrawMode = !1, s.isSelectMode = !1, s.isTextMode = !1, s.isWriting = !1, s.activeShape = void 0, s.showCaret = !1;
+              }),
+              onMouseenter: o[6] || (o[6] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("resize", i, "top")),
+              onMouseleave: o[7] || (o[7] = (...i) => t.hideTooltip && t.hideTooltip(...i)),
+              onFocus: o[8] || (o[8] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("resize", i, "top")),
+              onBlur: o[9] || (o[9] = (...i) => t.hideTooltip && t.hideTooltip(...i))
+            }, [
+              T(h, {
+                name: "resize",
+                stroke: s.isResizeMode ? t.FINAL_CONFIG.style.buttons.controls.selected.color : t.FINAL_CONFIG.style.buttons.controls.color
+              }, null, 8, ["stroke"]),
+              t.FINAL_CONFIG.style.showTooltips ? (c(), x(u, {
+                key: 0,
+                show: s.showTooltip && s.tooltipKey === "resize",
+                x: s.tooltipPos.x,
+                y: s.tooltipPos.y - 6,
+                placement: "top",
+                styleObject: t.tooltipStyleObject
+              }, {
+                default: N(() => [
+                  F(f(t.FINAL_CONFIG.translations.tooltipResize) + " ", 1),
+                  o[151] || (o[151] = n("kbd", null, "R", -1))
+                ]),
+                _: 1
+              }, 8, ["show", "x", "y", "styleObject"])) : a("", !0)
+            ], 46, ye),
+            n("button", {
+              disabled: s.shapes.length === 0,
+              style: b({
+                background: s.isDeleteMode ? t.FINAL_CONFIG.style.buttons.controls.selected.backgroundColor : t.FINAL_CONFIG.style.buttons.controls.backgroundColor,
+                border: s.isDeleteMode ? t.FINAL_CONFIG.style.buttons.controls.selected.border : t.FINAL_CONFIG.style.buttons.controls.border,
+                color: s.isDeleteMode ? t.FINAL_CONFIG.style.buttons.controls.selected.color : t.FINAL_CONFIG.style.buttons.controls.color,
+                borderRadius: `${t.FINAL_CONFIG.style.buttons.borderRadius}px`
+              }),
+              class: g({
+                "button-tool": !0,
+                "button-tool--selected": s.isDeleteMode,
+                tooltip: !0
+              }),
+              onClick: o[10] || (o[10] = (i) => {
+                t.deleteEmptyTextElement(), s.isDeleteMode = !s.isDeleteMode, s.isMoveMode = !1, s.isResizeMode = !1, s.isSelectMode = !1, s.isTextMode = !1, s.isWriting = !1, s.activeShape = void 0, s.showCaret = !1;
+              }),
+              onMouseenter: o[11] || (o[11] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("delete", i, "top")),
+              onMouseleave: o[12] || (o[12] = (...i) => t.hideTooltip && t.hideTooltip(...i)),
+              onFocus: o[13] || (o[13] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("delete", i, "top")),
+              onBlur: o[14] || (o[14] = (...i) => t.hideTooltip && t.hideTooltip(...i))
+            }, [
+              T(h, {
+                name: "trash",
+                stroke: s.isDeleteMode ? t.FINAL_CONFIG.style.buttons.controls.selected.color : t.FINAL_CONFIG.style.buttons.controls.color
+              }, null, 8, ["stroke"]),
+              t.FINAL_CONFIG.style.showTooltips ? (c(), x(u, {
+                key: 0,
+                show: s.showTooltip && s.tooltipKey === "delete",
+                x: s.tooltipPos.x,
+                y: s.tooltipPos.y - 6,
+                placement: "top",
+                styleObject: t.tooltipStyleObject
+              }, {
+                default: N(() => [
+                  F(f(t.FINAL_CONFIG.translations.tooltipDelete) + " ", 1),
+                  o[152] || (o[152] = n("kbd", null, "D", -1))
+                ]),
+                _: 1
+              }, 8, ["show", "x", "y", "styleObject"])) : a("", !0)
+            ], 46, ae),
+            n("button", {
+              disabled: !t.canSelect,
+              style: b({
+                background: s.isSelectMode ? t.FINAL_CONFIG.style.buttons.controls.selected.backgroundColor : t.FINAL_CONFIG.style.buttons.controls.backgroundColor,
+                border: s.isSelectMode ? t.FINAL_CONFIG.style.buttons.controls.selected.border : t.FINAL_CONFIG.style.buttons.controls.border,
+                color: s.isSelectMode ? t.FINAL_CONFIG.style.buttons.controls.selected.color : t.FINAL_CONFIG.style.buttons.controls.color,
+                borderRadius: `${t.FINAL_CONFIG.style.buttons.borderRadius}px`
+              }),
+              class: g({
+                "button-tool": !0,
+                "button-tool--selected": s.isSelectMode,
+                tooltip: !0
+              }),
+              onClick: o[15] || (o[15] = (i) => {
+                t.deleteEmptyTextElement(), t.setShapeTo("group"), s.isSelectMode = !s.isSelectMode, s.isDeleteMode = !1, s.isMoveMode = !1, s.isResizeMode = !1, s.isTextMode = !1, s.isWriting = !1, s.activeShape = "group", s.showCaret = !1;
+              }),
+              onMouseenter: o[16] || (o[16] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("selectAndGroup", i, "top")),
+              onMouseleave: o[17] || (o[17] = (...i) => t.hideTooltip && t.hideTooltip(...i)),
+              onFocus: o[18] || (o[18] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("selectAndGroup", i, "top")),
+              onBlur: o[19] || (o[19] = (...i) => t.hideTooltip && t.hideTooltip(...i))
+            }, [
+              T(h, {
+                name: "selectAndGroup",
+                stroke: s.isSelectMode ? t.FINAL_CONFIG.style.buttons.controls.selected.color : t.FINAL_CONFIG.style.buttons.controls.color
+              }, null, 8, ["stroke"]),
+              t.FINAL_CONFIG.style.showTooltips ? (c(), x(u, {
+                key: 0,
+                show: s.showTooltip && s.tooltipKey === "selectAndGroup",
+                x: s.tooltipPos.x,
+                y: s.tooltipPos.y - 6,
+                placement: "top",
+                styleObject: t.tooltipStyleObject
+              }, {
+                default: N(() => [
+                  F(f(t.FINAL_CONFIG.translations.tooltipGroup) + " ", 1),
+                  o[153] || (o[153] = n("kbd", null, "G", -1))
+                ]),
+                _: 1
+              }, 8, ["show", "x", "y", "styleObject"])) : a("", !0)
+            ], 46, fe),
+            n("button", {
+              disabled: s.shapes.length === 0,
+              style: b({
+                background: t.FINAL_CONFIG.style.buttons.controls.backgroundColor,
+                border: t.FINAL_CONFIG.style.buttons.controls.border,
+                color: t.FINAL_CONFIG.style.buttons.controls.color,
+                borderRadius: `${t.FINAL_CONFIG.style.buttons.borderRadius}px`
+              }),
+              class: g({ "button-tool": !0, tooltip: !0 }),
+              onClick: o[20] || (o[20] = (i) => {
+                s.isResizeMode = !1, s.isMoveMode = !0, s.isDeleteMode = !1, s.isDrawMode = !1, s.isSelectMode = !1, s.isTextMode = !1, s.isWriting = !1, s.showCaret = !1, t.bringShapeTo("front");
+              }),
+              onMouseenter: o[21] || (o[21] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("bringToFront", i, "top")),
+              onMouseleave: o[22] || (o[22] = (...i) => t.hideTooltip && t.hideTooltip(...i)),
+              onFocus: o[23] || (o[23] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("bringToFront", i, "top")),
+              onBlur: o[24] || (o[24] = (...i) => t.hideTooltip && t.hideTooltip(...i))
+            }, [
+              T(h, {
+                name: "bringToFront",
+                stroke: t.FINAL_CONFIG.style.buttons.controls.color
+              }, null, 8, ["stroke"]),
+              t.FINAL_CONFIG.style.showTooltips ? (c(), x(u, {
+                key: 0,
+                show: s.showTooltip && s.tooltipKey === "bringToFront",
+                x: s.tooltipPos.x,
+                y: s.tooltipPos.y - 6,
+                placement: "top",
+                styleObject: t.tooltipStyleObject
+              }, {
+                default: N(() => [
+                  F(f(t.FINAL_CONFIG.translations.tooltipBringToFront), 1)
+                ]),
+                _: 1
+              }, 8, ["show", "x", "y", "styleObject"])) : a("", !0)
+            ], 44, be),
+            n("button", {
+              disabled: s.shapes.length === 0,
+              style: b({
+                background: t.FINAL_CONFIG.style.buttons.controls.backgroundColor,
+                border: t.FINAL_CONFIG.style.buttons.controls.border,
+                color: t.FINAL_CONFIG.style.buttons.controls.color,
+                borderRadius: `${t.FINAL_CONFIG.style.buttons.borderRadius}px`
+              }),
+              class: g({ "button-tool": !0, tooltip: !0 }),
+              onClick: o[25] || (o[25] = (i) => {
+                s.isResizeMode = !1, s.isMoveMode = !0, s.isDeleteMode = !1, s.isDrawMode = !1, s.isSelectMode = !1, s.isTextMode = !1, s.isWriting = !1, s.showCaret = !1, t.bringShapeTo("back");
+              }),
+              onMouseenter: o[26] || (o[26] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("bringToBack", i, "top")),
+              onMouseleave: o[27] || (o[27] = (...i) => t.hideTooltip && t.hideTooltip(...i)),
+              onFocus: o[28] || (o[28] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("bringToBack", i, "top")),
+              onBlur: o[29] || (o[29] = (...i) => t.hideTooltip && t.hideTooltip(...i))
+            }, [
+              T(h, {
+                name: "bringToBack",
+                stroke: t.FINAL_CONFIG.style.buttons.controls.color
+              }, null, 8, ["stroke"]),
+              t.FINAL_CONFIG.style.showTooltips ? (c(), x(u, {
+                key: 0,
+                show: s.showTooltip && s.tooltipKey === "bringToBack",
+                x: s.tooltipPos.x,
+                y: s.tooltipPos.y - 6,
+                placement: "top",
+                styleObject: t.tooltipStyleObject
+              }, {
+                default: N(() => [
+                  F(f(t.FINAL_CONFIG.translations.tooltipBringToBack), 1)
+                ]),
+                _: 1
+              }, 8, ["show", "x", "y", "styleObject"])) : a("", !0)
+            ], 44, Fe),
+            n("button", {
+              disabled: s.shapes.length === 0 || s.activeShape === "line",
+              style: b({
+                background: t.FINAL_CONFIG.style.buttons.controls.backgroundColor,
+                border: t.FINAL_CONFIG.style.buttons.controls.border,
+                color: t.FINAL_CONFIG.style.buttons.controls.color,
+                borderRadius: `${t.FINAL_CONFIG.style.buttons.borderRadius}px`
+              }),
+              class: g({ "button-tool": !0, tooltip: !0 }),
+              onClick: o[30] || (o[30] = (i) => {
+                t.deleteEmptyTextElement(), s.isResizeMode = !1, s.isMoveMode = !0, s.isDeleteMode = !1, s.isDrawMode = !1, s.isSelectMode = !1, s.isTextMode = !1, s.isWriting = !1, s.showCaret = !1, t.copyPaste();
+              }),
+              onMouseenter: o[31] || (o[31] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("duplicate", i, "top")),
+              onMouseleave: o[32] || (o[32] = (...i) => t.hideTooltip && t.hideTooltip(...i)),
+              onFocus: o[33] || (o[33] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("duplicate", i, "top")),
+              onBlur: o[34] || (o[34] = (...i) => t.hideTooltip && t.hideTooltip(...i))
+            }, [
+              T(h, {
+                name: "copy",
+                stroke: t.FINAL_CONFIG.style.buttons.controls.color,
+                size: 18
+              }, null, 8, ["stroke"]),
+              t.FINAL_CONFIG.style.showTooltips ? (c(), x(u, {
+                key: 0,
+                show: s.showTooltip && s.tooltipKey === "duplicate",
+                x: s.tooltipPos.x,
+                y: s.tooltipPos.y - 6,
+                placement: "top",
+                styleObject: t.tooltipStyleObject
+              }, {
+                default: N(() => [
+                  F(f(t.FINAL_CONFIG.translations.tooltipDuplicate), 1)
+                ]),
+                _: 1
+              }, 8, ["show", "x", "y", "styleObject"])) : a("", !0)
+            ], 44, Ie),
+            n("button", {
+              disabled: s._historySize.undo === 0,
+              style: b({
+                background: t.FINAL_CONFIG.style.buttons.controls.backgroundColor,
+                border: t.FINAL_CONFIG.style.buttons.controls.border,
+                color: t.FINAL_CONFIG.style.buttons.controls.color,
+                borderRadius: `${t.FINAL_CONFIG.style.buttons.borderRadius}px`
+              }),
+              class: g({ "button-tool": !0, "button-tool--one-shot": !0, tooltip: !0 }),
+              onClick: o[35] || (o[35] = (i) => {
+                s.isResizeMode = !1, s.isMoveMode = !1, s.isDeleteMode = !1, s.isDrawMode = !1, s.isSelectMode = !1, s.isTextMode = !1, s.isWriting = !1, s.activeShape = void 0, s.showCaret = !1, t.undoLastShape();
+              }),
+              onMouseenter: o[36] || (o[36] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("undoLast", i, "top")),
+              onMouseleave: o[37] || (o[37] = (...i) => t.hideTooltip && t.hideTooltip(...i)),
+              onFocus: o[38] || (o[38] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("undoLast", i, "top")),
+              onBlur: o[39] || (o[39] = (...i) => t.hideTooltip && t.hideTooltip(...i))
+            }, [
+              T(h, {
+                name: "refresh",
+                stroke: t.FINAL_CONFIG.style.buttons.controls.color,
+                size: 20
+              }, null, 8, ["stroke"]),
+              t.FINAL_CONFIG.style.showTooltips ? (c(), x(u, {
+                key: 0,
+                show: s.showTooltip && s.tooltipKey === "undoLast",
+                x: s.tooltipPos.x,
+                y: s.tooltipPos.y - 6,
+                placement: "top",
+                styleObject: t.tooltipStyleObject
+              }, {
+                default: N(() => [
+                  F(f(t.FINAL_CONFIG.translations.tooltipUndo) + " ", 1),
+                  n("kbd", null, f(s.isMacLike ? "⌘" : "Ctrl"), 1),
+                  o[154] || (o[154] = n("kbd", null, "Z", -1))
+                ]),
+                _: 1
+              }, 8, ["show", "x", "y", "styleObject"])) : a("", !0)
+            ], 44, Ne),
+            n("button", {
+              disabled: s._historySize.redo === 0,
+              style: b({
+                background: t.FINAL_CONFIG.style.buttons.controls.backgroundColor,
+                border: t.FINAL_CONFIG.style.buttons.controls.border,
+                color: t.FINAL_CONFIG.style.buttons.controls.color,
+                borderRadius: `${t.FINAL_CONFIG.style.buttons.borderRadius}px`
+              }),
+              class: g({ "button-tool": !0, "button-tool--one-shot": !0, tooltip: !0 }),
+              onClick: o[40] || (o[40] = (i) => {
+                s.isResizeMode = !1, s.isMoveMode = !1, s.isDeleteMode = !1, s.isDrawMode = !1, s.isSelectMode = !1, s.isTextMode = !1, s.isWriting = !1, s.activeShape = void 0, s.showCaret = !1, t.redoLastShape();
+              }),
+              onMouseenter: o[41] || (o[41] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("redoLast", i, "top")),
+              onMouseleave: o[42] || (o[42] = (...i) => t.hideTooltip && t.hideTooltip(...i)),
+              onFocus: o[43] || (o[43] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("redoLast", i, "top")),
+              onBlur: o[44] || (o[44] = (...i) => t.hideTooltip && t.hideTooltip(...i))
+            }, [
+              T(h, {
+                name: "refresh",
+                stroke: t.FINAL_CONFIG.style.buttons.controls.color,
+                size: 20,
+                style: {
+                  transform: "rotateX(0deg) rotateY(180deg)"
+                }
+              }, null, 8, ["stroke"]),
+              t.FINAL_CONFIG.style.showTooltips ? (c(), x(u, {
+                key: 0,
+                show: s.showTooltip && s.tooltipKey === "redoLast",
+                x: s.tooltipPos.x,
+                y: s.tooltipPos.y - 6,
+                placement: "top",
+                styleObject: t.tooltipStyleObject
+              }, {
+                default: N(() => [
+                  F(f(t.FINAL_CONFIG.translations.tooltipRedo) + " ", 1),
+                  n("kbd", null, f(s.isMacLike ? "⌘" : "Ctrl"), 1),
+                  o[155] || (o[155] = n("kbd", null, "Y", -1))
+                ]),
+                _: 1
+              }, 8, ["show", "x", "y", "styleObject"])) : a("", !0)
+            ], 44, ge),
+            t.FINAL_CONFIG.style.showPrint ? (c(), p("button", {
+              key: 0,
+              style: b({
+                background: t.FINAL_CONFIG.style.buttons.controls.backgroundColor,
+                border: t.FINAL_CONFIG.style.buttons.controls.border,
+                color: t.FINAL_CONFIG.style.buttons.controls.color,
+                borderRadius: `${t.FINAL_CONFIG.style.buttons.borderRadius}px`
+              }),
+              class: g({ "button-tool": !0, tooltip: !0 }),
+              onClick: o[45] || (o[45] = (...i) => t.print && t.print(...i)),
+              onMouseenter: o[46] || (o[46] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("printPdf", i, "top")),
+              onMouseleave: o[47] || (o[47] = (...i) => t.hideTooltip && t.hideTooltip(...i)),
+              onFocus: o[48] || (o[48] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("printPdf", i, "top")),
+              onBlur: o[49] || (o[49] = (...i) => t.hideTooltip && t.hideTooltip(...i))
+            }, [
+              T(h, {
+                name: "printer",
+                stroke: t.FINAL_CONFIG.style.buttons.controls.color
+              }, null, 8, ["stroke"]),
+              t.FINAL_CONFIG.style.showTooltips ? (c(), x(u, {
+                key: 0,
+                show: s.showTooltip && s.tooltipKey === "printPdf",
+                x: s.tooltipPos.x,
+                y: s.tooltipPos.y - 6,
+                placement: "top",
+                styleObject: t.tooltipStyleObject
+              }, {
+                default: N(() => [
+                  F(f(t.FINAL_CONFIG.translations.tooltipPdf), 1)
+                ]),
+                _: 1
+              }, 8, ["show", "x", "y", "styleObject"])) : a("", !0)
+            ], 36)) : a("", !0),
+            t.FINAL_CONFIG.style.showImage ? (c(), p("button", {
+              key: 1,
+              style: b({
+                background: t.FINAL_CONFIG.style.buttons.controls.backgroundColor,
+                border: t.FINAL_CONFIG.style.buttons.controls.border,
+                color: t.FINAL_CONFIG.style.buttons.controls.color,
+                borderRadius: `${t.FINAL_CONFIG.style.buttons.borderRadius}px`
+              }),
+              class: g({ "button-tool": !0, tooltip: !0 }),
+              onClick: o[50] || (o[50] = (...i) => r.generateImage && r.generateImage(...i)),
+              onMouseenter: o[51] || (o[51] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("printImage", i, "top")),
+              onMouseleave: o[52] || (o[52] = (...i) => t.hideTooltip && t.hideTooltip(...i)),
+              onFocus: o[53] || (o[53] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("printImage", i, "top")),
+              onBlur: o[54] || (o[54] = (...i) => t.hideTooltip && t.hideTooltip(...i))
+            }, [
+              T(h, {
+                name: "image",
+                stroke: t.FINAL_CONFIG.style.buttons.controls.color,
+                size: 20
+              }, null, 8, ["stroke"]),
+              t.FINAL_CONFIG.style.showTooltips ? (c(), x(u, {
+                key: 0,
+                show: s.showTooltip && s.tooltipKey === "printImage",
+                x: s.tooltipPos.x,
+                y: s.tooltipPos.y - 6,
+                placement: "top",
+                styleObject: t.tooltipStyleObject
+              }, {
+                default: N(() => [
+                  F(f(t.FINAL_CONFIG.translations.tooltipImage), 1)
+                ]),
+                _: 1
+              }, 8, ["show", "x", "y", "styleObject"])) : a("", !0)
+            ], 36)) : a("", !0),
+            t.FINAL_CONFIG.style.showSave && e.$attrs.onSaveAnnotations ? (c(), p("button", {
+              key: 2,
+              style: b({
+                background: t.FINAL_CONFIG.style.buttons.controls.backgroundColor,
+                border: t.FINAL_CONFIG.style.buttons.controls.border,
+                color: t.FINAL_CONFIG.style.buttons.controls.color,
+                borderRadius: `${t.FINAL_CONFIG.style.buttons.borderRadius}px`
+              }),
+              class: g({ "button-tool": !0, tooltip: !0 }),
+              onClick: o[55] || (o[55] = (...i) => t.save && t.save(...i)),
+              onMouseenter: o[56] || (o[56] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("saveAction", i, "top")),
+              onMouseleave: o[57] || (o[57] = (...i) => t.hideTooltip && t.hideTooltip(...i)),
+              onFocus: o[58] || (o[58] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("saveAction", i, "top")),
+              onBlur: o[59] || (o[59] = (...i) => t.hideTooltip && t.hideTooltip(...i))
+            }, [
+              T(h, {
+                name: "save",
+                stroke: t.FINAL_CONFIG.style.buttons.controls.color
+              }, null, 8, ["stroke"]),
+              t.FINAL_CONFIG.style.showTooltips ? (c(), x(u, {
+                key: 0,
+                show: s.showTooltip && s.tooltipKey === "saveAction",
+                x: s.tooltipPos.x,
+                y: s.tooltipPos.y - 6,
+                placement: "top",
+                styleObject: t.tooltipStyleObject
+              }, {
+                default: N(() => [
+                  F(f(t.FINAL_CONFIG.translations.tooltipSave), 1)
+                ]),
+                _: 1
+              }, 8, ["show", "x", "y", "styleObject"])) : a("", !0)
+            ], 36)) : a("", !0)
+          ], 4),
+          n("div", xe, [
+            n("button", {
+              class: g({
+                "button-tool": !0,
+                "button-tool--selected": s.activeShape === "circle",
+                tooltip: !0
+              }),
+              style: b({
+                background: s.activeShape === "circle" ? t.FINAL_CONFIG.style.buttons.shapes.selected.backgroundColor : t.FINAL_CONFIG.style.buttons.shapes.backgroundColor,
+                border: s.activeShape === "circle" ? t.FINAL_CONFIG.style.buttons.shapes.selected.border : t.FINAL_CONFIG.style.buttons.shapes.border,
+                color: s.activeShape === "circle" ? t.FINAL_CONFIG.style.buttons.shapes.selected.color : t.FINAL_CONFIG.style.buttons.shapes.color,
+                borderRadius: `${t.FINAL_CONFIG.style.buttons.borderRadius}px`
+              }),
+              onClick: o[60] || (o[60] = (i) => {
+                t.setShapeTo("circle"), s.isSelectMode = !1;
+              }),
+              onMouseenter: o[61] || (o[61] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("setCircle", i, "top")),
+              onMouseleave: o[62] || (o[62] = (...i) => t.hideTooltip && t.hideTooltip(...i)),
+              onFocus: o[63] || (o[63] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("setCircle", i, "top")),
+              onBlur: o[64] || (o[64] = (...i) => t.hideTooltip && t.hideTooltip(...i))
+            }, [
+              (c(), p("svg", pe, [
+                n("circle", {
+                  cx: 6,
+                  cy: 6,
+                  r: "4",
+                  fill: s.options.circle.filled ? (s.activeShape === "circle", s.selectedColor + t.colorTransparency) : "none",
+                  stroke: "currentColor"
+                }, null, 8, we)
+              ])),
+              t.FINAL_CONFIG.style.showTooltips ? (c(), x(u, {
+                key: 0,
+                show: s.showTooltip && s.tooltipKey === "setCircle",
+                x: s.tooltipPos.x,
+                y: s.tooltipPos.y - 6,
+                placement: "top",
+                styleObject: t.tooltipStyleObject
+              }, {
+                default: N(() => [
+                  F(f(t.FINAL_CONFIG.translations.tooltipShapeCircle) + " ", 1),
+                  o[156] || (o[156] = n("kbd", null, "C", -1))
+                ]),
+                _: 1
+              }, 8, ["show", "x", "y", "styleObject"])) : a("", !0)
+            ], 38),
+            s.activeShape === "circle" ? (c(), p("div", Se, [
+              n("label", Te, [
+                F(f(t.FINAL_CONFIG.translations.filled) + " ", 1),
+                M(n("input", {
+                  type: "checkbox",
+                  "onUpdate:modelValue": o[65] || (o[65] = (i) => s.options.circle.filled = i),
+                  onChange: o[66] || (o[66] = (...i) => t.setFillOfSelectedCircle && t.setFillOfSelectedCircle(...i)),
+                  checked: s.options.circle.filled,
+                  style: b({
+                    all: "revert",
+                    appearance: "auto",
+                    "-webkit-appearance": "auto",
+                    accentColor: t.FINAL_CONFIG.style.color + " !important"
+                  })
+                }, null, 44, ke), [
+                  [G, s.options.circle.filled]
+                ])
+              ])
+            ])) : a("", !0),
+            n("button", {
+              class: g({
+                "button-tool": !0,
+                "button-tool--selected": s.activeShape === "rect",
+                tooltip: !0
+              }),
+              style: b({
+                background: s.activeShape === "rect" ? t.FINAL_CONFIG.style.buttons.shapes.selected.backgroundColor : t.FINAL_CONFIG.style.buttons.shapes.backgroundColor,
+                border: s.activeShape === "rect" ? t.FINAL_CONFIG.style.buttons.shapes.selected.border : t.FINAL_CONFIG.style.buttons.shapes.border,
+                color: s.activeShape === "rect" ? t.FINAL_CONFIG.style.buttons.shapes.selected.color : t.FINAL_CONFIG.style.buttons.shapes.color,
+                borderRadius: `${t.FINAL_CONFIG.style.buttons.borderRadius}px`
+              }),
+              onClick: o[67] || (o[67] = (i) => {
+                t.setShapeTo("rect"), s.isSelectMode = !1;
+              }),
+              onMouseenter: o[68] || (o[68] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("setRect", i, "top")),
+              onMouseleave: o[69] || (o[69] = (...i) => t.hideTooltip && t.hideTooltip(...i)),
+              onFocus: o[70] || (o[70] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("setRect", i, "top")),
+              onBlur: o[71] || (o[71] = (...i) => t.hideTooltip && t.hideTooltip(...i))
+            }, [
+              (c(), p("svg", Ce, [
+                n("rect", {
+                  x: "3",
+                  y: "3",
+                  style: { rx: "0 !important", ry: "0 !important" },
+                  height: "6",
+                  width: "6",
+                  fill: s.options.rect.filled ? (s.activeShape === "rect", s.selectedColor + t.colorTransparency) : "none",
+                  stroke: "currentColor"
+                }, null, 8, Oe)
+              ])),
+              t.FINAL_CONFIG.style.showTooltips ? (c(), x(u, {
+                key: 0,
+                show: s.showTooltip && s.tooltipKey === "setRect",
+                x: s.tooltipPos.x,
+                y: s.tooltipPos.y - 6,
+                placement: "top",
+                styleObject: t.tooltipStyleObject
+              }, {
+                default: N(() => [
+                  F(f(t.FINAL_CONFIG.translations.tooltipShapeRect) + " ", 1),
+                  o[157] || (o[157] = n("kbd", null, "S", -1))
+                ]),
+                _: 1
+              }, 8, ["show", "x", "y", "styleObject"])) : a("", !0)
+            ], 38),
+            s.activeShape === "rect" ? (c(), p("div", Me, [
+              n("label", ve, [
+                F(f(t.FINAL_CONFIG.translations.filled) + " ", 1),
+                M(n("input", {
+                  type: "checkbox",
+                  "onUpdate:modelValue": o[72] || (o[72] = (i) => s.options.rect.filled = i),
+                  onChange: o[73] || (o[73] = (...i) => t.setFillOfSelectedRect && t.setFillOfSelectedRect(...i)),
+                  checked: s.options.rect.filled,
+                  style: b({
+                    all: "revert",
+                    appearance: "auto",
+                    "-webkit-appearance": "auto",
+                    accentColor: t.FINAL_CONFIG.style.color + " !important"
+                  })
+                }, null, 44, Ae), [
+                  [G, s.options.rect.filled]
+                ])
+              ])
+            ])) : a("", !0),
+            n("button", {
+              class: g({
+                "button-tool": !0,
+                "button-tool--selected": s.activeShape === "arrow",
+                tooltip: !0
+              }),
+              style: b({
+                background: s.activeShape === "arrow" ? t.FINAL_CONFIG.style.buttons.shapes.selected.backgroundColor : t.FINAL_CONFIG.style.buttons.shapes.backgroundColor,
+                border: s.activeShape === "arrow" ? t.FINAL_CONFIG.style.buttons.shapes.selected.border : t.FINAL_CONFIG.style.buttons.shapes.border,
+                color: s.activeShape === "arrow" ? t.FINAL_CONFIG.style.buttons.shapes.selected.color : t.FINAL_CONFIG.style.buttons.shapes.color,
+                borderRadius: `${t.FINAL_CONFIG.style.buttons.borderRadius}px`
+              }),
+              onClick: o[74] || (o[74] = (i) => {
+                t.setShapeTo("arrow"), s.isSelectMode = !1;
+              }),
+              onMouseenter: o[75] || (o[75] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("setArrow", i, "top")),
+              onMouseleave: o[76] || (o[76] = (...i) => t.hideTooltip && t.hideTooltip(...i)),
+              onFocus: o[77] || (o[77] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("setArrow", i, "top")),
+              onBlur: o[78] || (o[78] = (...i) => t.hideTooltip && t.hideTooltip(...i))
+            }, [
+              (c(), p("svg", me, [
+                n("path", {
+                  stroke: s.options.arrow.filled ? s.activeShape === "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, Le)
+              ])),
+              t.FINAL_CONFIG.style.showTooltips ? (c(), x(u, {
+                key: 0,
+                show: s.showTooltip && s.tooltipKey === "setArrow",
+                x: s.tooltipPos.x,
+                y: s.tooltipPos.y - 6,
+                placement: "top",
+                styleObject: t.tooltipStyleObject
+              }, {
+                default: N(() => [
+                  F(f(t.FINAL_CONFIG.translations.tooltipShapeArrow) + " ", 1),
+                  o[158] || (o[158] = n("kbd", null, "A", -1))
+                ]),
+                _: 1
+              }, 8, ["show", "x", "y", "styleObject"])) : a("", !0)
+            ], 38),
+            n("button", {
+              class: g({
+                "button-tool": !0,
+                "button-tool--selected": s.activeShape === "line",
+                tooltip: !0
+              }),
+              style: b({
+                background: s.activeShape === "line" ? t.FINAL_CONFIG.style.buttons.shapes.selected.backgroundColor : t.FINAL_CONFIG.style.buttons.shapes.backgroundColor,
+                border: s.activeShape === "line" ? t.FINAL_CONFIG.style.buttons.shapes.selected.border : t.FINAL_CONFIG.style.buttons.shapes.border,
+                color: s.activeShape === "line" ? t.FINAL_CONFIG.style.buttons.shapes.selected.color : t.FINAL_CONFIG.style.buttons.shapes.color,
+                borderRadius: `${t.FINAL_CONFIG.style.buttons.borderRadius}px`
+              }),
+              onClick: o[79] || (o[79] = (i) => {
+                t.setShapeTo("line"), s.isSelectMode = !1;
+              }),
+              onMouseenter: o[80] || (o[80] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("setFreehand", i, "top")),
+              onMouseleave: o[81] || (o[81] = (...i) => t.hideTooltip && t.hideTooltip(...i)),
+              onFocus: o[82] || (o[82] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("setFreehand", i, "top")),
+              onBlur: o[83] || (o[83] = (...i) => t.hideTooltip && t.hideTooltip(...i))
+            }, [
+              o[160] || (o[160] = n("svg", {
+                width: "80%",
+                viewBox: "0 0 24 24",
+                "stroke-width": "2",
+                stroke: "currentColor",
+                fill: "none",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
+              }, [
+                n("path", {
+                  stroke: "none",
+                  d: "M0 0h24v24H0z",
+                  fill: "none"
+                }),
+                n("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)),
+              t.FINAL_CONFIG.style.showTooltips ? (c(), x(u, {
+                key: 0,
+                show: s.showTooltip && s.tooltipKey === "setFreehand",
+                x: s.tooltipPos.x,
+                y: s.tooltipPos.y - 6,
+                placement: "top",
+                styleObject: t.tooltipStyleObject
+              }, {
+                default: N(() => [
+                  F(f(t.FINAL_CONFIG.translations.tooltipShapeFreehand) + " ", 1),
+                  o[159] || (o[159] = n("kbd", null, "L", -1))
+                ]),
+                _: 1
+              }, 8, ["show", "x", "y", "styleObject"])) : a("", !0)
+            ], 38),
+            ["arrow", "circle", "rect", "line"].includes(s.activeShape) ? (c(), p("div", Ge, [
+              n("div", De, [
+                n("label", Pe, [
+                  F(f(t.FINAL_CONFIG.translations.thickness) + " ", 1),
+                  M(n("input", {
+                    type: "number",
+                    "onUpdate:modelValue": o[84] || (o[84] = (i) => s.strokeSize = i),
+                    onInput: o[85] || (o[85] = (...i) => t.setStrokeWidthOfSelectedShape && t.setStrokeWidthOfSelectedShape(...i)),
+                    min: 1,
+                    style: { padding: "0 4px", width: "40px", border: "1px solid #dadada", "border-radius": "3px" }
+                  }, null, 544), [
+                    [D, s.strokeSize]
+                  ])
+                ])
+              ])
+            ])) : a("", !0),
+            ["arrow", "circle", "rect"].includes(s.activeShape) ? (c(), p("div", _e, [
+              n("div", ze, [
+                n("label", Re, [
+                  F(f(t.FINAL_CONFIG.translations.dashedLines) + " ", 1),
+                  (c(), p("svg", Be, [...o[161] || (o[161] = [
+                    n("line", {
+                      x1: "0",
+                      x2: "24",
+                      y1: "12",
+                      y2: "12",
+                      "stroke-width": "2",
+                      stroke: "black",
+                      "stroke-dasharray": "3"
+                    }, null, -1)
+                  ])])),
+                  M(n("input", {
+                    name: "dashStyle",
+                    type: "checkbox",
+                    "onUpdate:modelValue": o[86] || (o[86] = (i) => s.isDash = i),
+                    onChange: o[87] || (o[87] = (...i) => t.setSelectedShapeToDash && t.setSelectedShapeToDash(...i)),
+                    checked: s.isDash,
+                    style: b({
+                      all: "revert",
+                      appearance: "auto",
+                      "-webkit-appearance": "auto",
+                      accentColor: t.FINAL_CONFIG.style.color + " !important"
+                    })
+                  }, null, 44, je), [
+                    [G, s.isDash]
+                  ])
+                ])
+              ])
+            ])) : a("", !0),
+            n("button", {
+              class: g({
+                "button-tool": !0,
+                "button-tool--selected": s.isTextMode,
+                tooltip: !0
+              }),
+              style: b({
+                background: s.isTextMode ? t.FINAL_CONFIG.style.buttons.shapes.selected.backgroundColor : t.FINAL_CONFIG.style.buttons.shapes.backgroundColor,
+                border: s.isTextMode ? t.FINAL_CONFIG.style.buttons.shapes.selected.border : t.FINAL_CONFIG.style.buttons.shapes.border,
+                color: s.isTextMode ? t.FINAL_CONFIG.style.buttons.shapes.selected.color : t.FINAL_CONFIG.style.buttons.shapes.color,
+                borderRadius: `${t.FINAL_CONFIG.style.buttons.borderRadius}px`
+              }),
+              onClick: o[88] || (o[88] = (i) => {
+                t.deleteEmptyTextElement(), s.isTextMode = !s.isTextMode, s.isDeleteMode = !1, s.isMoveMode = !1, s.isResizeMode = !1, s.isSelectMode = !1, s.isDrawMode = !1, s.activeShape = void 0;
+              }),
+              onMouseenter: o[89] || (o[89] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("setText", i, "top")),
+              onMouseleave: o[90] || (o[90] = (...i) => t.hideTooltip && t.hideTooltip(...i)),
+              onFocus: o[91] || (o[91] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("setText", i, "top")),
+              onBlur: o[92] || (o[92] = (...i) => t.hideTooltip && t.hideTooltip(...i))
+            }, [
+              T(h, {
+                name: "text",
+                stroke: s.isTextMode ? t.FINAL_CONFIG.style.buttons.shapes.selected.color : t.FINAL_CONFIG.style.buttons.shapes.color
+              }, null, 8, ["stroke"]),
+              t.FINAL_CONFIG.style.showTooltips ? (c(), x(u, {
+                key: 0,
+                show: s.showTooltip && s.tooltipKey === "setText",
+                x: s.tooltipPos.x,
+                y: s.tooltipPos.y - 6,
+                placement: "top",
+                styleObject: t.tooltipStyleObject
+              }, {
+                default: N(() => [
+                  F(f(t.FINAL_CONFIG.translations.tooltipShapeText) + " ", 1),
+                  o[162] || (o[162] = n("kbd", null, "T", -1))
+                ]),
+                _: 1
+              }, 8, ["show", "x", "y", "styleObject"])) : a("", !0)
+            ], 38),
+            s.isTextMode ? (c(), p("div", We, [
+              n("div", Ee, [
+                n("label", He, [
+                  F(f(t.FINAL_CONFIG.translations.fontSize) + " ", 1),
+                  M(n("input", {
+                    type: "number",
+                    "onUpdate:modelValue": o[93] || (o[93] = (i) => s.textFont = i),
+                    onInput: o[94] || (o[94] = (...i) => t.setCurrentStyleOfSelectedText && t.setCurrentStyleOfSelectedText(...i)),
+                    style: { padding: "0 4px", width: "40px", border: "1px solid #dadada", "border-radius": "3px" }
+                  }, null, 544), [
+                    [D, s.textFont]
+                  ])
+                ])
+              ])
+            ])) : a("", !0),
+            s.isTextMode ? (c(), p("div", Ue, [
+              n("button", {
+                class: g({
+                  "button-tool": !0,
+                  "button-tool--selected": s.textAlign === "start",
+                  tooltip: !0
+                }),
+                style: b({
+                  background: s.textAlign === "start" ? t.FINAL_CONFIG.style.buttons.shapes.selected.backgroundColor : t.FINAL_CONFIG.style.buttons.shapes.backgroundColor,
+                  border: s.textAlign === "start" ? t.FINAL_CONFIG.style.buttons.shapes.selected.border : t.FINAL_CONFIG.style.buttons.shapes.border,
+                  color: s.textAlign === "start" ? t.FINAL_CONFIG.style.buttons.shapes.selected.color : t.FINAL_CONFIG.style.buttons.shapes.color,
+                  borderRadius: `${t.FINAL_CONFIG.style.buttons.borderRadius}px`
+                }),
+                onClick: o[95] || (o[95] = (i) => {
+                  s.isDeleteMode = !1, s.isMoveMode = !1, s.isResizeMode = !1, s.isDrawMode = !1, s.isSelectMode = !1, s.activeShape = void 0, s.textAlign = "start", t.setSelectedTextAlignTo("start");
+                }),
+                onMouseenter: o[96] || (o[96] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("setAlignStart", i, "top")),
+                onMouseleave: o[97] || (o[97] = (...i) => t.hideTooltip && t.hideTooltip(...i)),
+                onFocus: o[98] || (o[98] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("setAlignStart", i, "top")),
+                onBlur: o[99] || (o[99] = (...i) => t.hideTooltip && t.hideTooltip(...i))
+              }, [
+                o[163] || (o[163] = n("svg", {
+                  width: "80%",
+                  viewBox: "0 0 24 24",
+                  "stroke-width": "2",
+                  stroke: "currentColor",
+                  fill: "none",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round"
+                }, [
+                  n("path", {
+                    stroke: "none",
+                    d: "M0 0h24v24H0z",
+                    fill: "none"
+                  }),
+                  n("path", { d: "M4 6l16 0" }),
+                  n("path", { d: "M4 12l10 0" }),
+                  n("path", { d: "M4 18l14 0" })
+                ], -1)),
+                t.FINAL_CONFIG.style.showTooltips ? (c(), x(u, {
+                  key: 0,
+                  show: s.showTooltip && s.tooltipKey === "setAlignStart",
+                  x: s.tooltipPos.x,
+                  y: s.tooltipPos.y - 6,
+                  placement: "top",
+                  styleObject: t.tooltipStyleObject
+                }, {
+                  default: N(() => [
+                    F(f(t.FINAL_CONFIG.translations.tooltipShapeTextLeft), 1)
+                  ]),
+                  _: 1
+                }, 8, ["show", "x", "y", "styleObject"])) : a("", !0)
+              ], 38)
+            ])) : a("", !0),
+            s.isTextMode ? (c(), p("div", Ke, [
+              n("button", {
+                class: g({
+                  "button-tool": !0,
+                  "button-tool--selected": s.textAlign === "middle",
+                  tooltip: !0
+                }),
+                style: b({
+                  background: s.textAlign === "middle" ? t.FINAL_CONFIG.style.buttons.shapes.selected.backgroundColor : t.FINAL_CONFIG.style.buttons.shapes.backgroundColor,
+                  border: s.textAlign === "middle" ? t.FINAL_CONFIG.style.buttons.shapes.selected.border : t.FINAL_CONFIG.style.buttons.shapes.border,
+                  color: s.textAlign === "middle" ? t.FINAL_CONFIG.style.buttons.shapes.selected.color : t.FINAL_CONFIG.style.buttons.shapes.color,
+                  borderRadius: `${t.FINAL_CONFIG.style.buttons.borderRadius}px`
+                }),
+                disabled: s.isBulletTextMode,
+                onClick: o[100] || (o[100] = (i) => {
+                  s.isDeleteMode = !1, s.isMoveMode = !1, s.isResizeMode = !1, s.isDrawMode = !1, s.isSelectMode = !1, s.activeShape = void 0, s.textAlign = "middle", t.setSelectedTextAlignTo("middle");
+                }),
+                onMouseenter: o[101] || (o[101] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("setAlignMiddle", i, "top")),
+                onMouseleave: o[102] || (o[102] = (...i) => t.hideTooltip && t.hideTooltip(...i)),
+                onFocus: o[103] || (o[103] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("setAlignMiddle", i, "top")),
+                onBlur: o[104] || (o[104] = (...i) => t.hideTooltip && t.hideTooltip(...i))
+              }, [
+                o[164] || (o[164] = n("svg", {
+                  width: "80%",
+                  viewBox: "0 0 24 24",
+                  "stroke-width": "2",
+                  stroke: "currentColor",
+                  fill: "none",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round"
+                }, [
+                  n("path", {
+                    stroke: "none",
+                    d: "M0 0h24v24H0z",
+                    fill: "none"
+                  }),
+                  n("path", { d: "M4 6l16 0" }),
+                  n("path", { d: "M8 12l8 0" }),
+                  n("path", { d: "M6 18l12 0" })
+                ], -1)),
+                t.FINAL_CONFIG.style.showTooltips ? (c(), x(u, {
+                  key: 0,
+                  show: s.showTooltip && s.tooltipKey === "setAlignMiddle",
+                  x: s.tooltipPos.x,
+                  y: s.tooltipPos.y - 6,
+                  placement: "top",
+                  styleObject: t.tooltipStyleObject
+                }, {
+                  default: N(() => [
+                    F(f(t.FINAL_CONFIG.translations.tooltipShapeTextCenter), 1)
+                  ]),
+                  _: 1
+                }, 8, ["show", "x", "y", "styleObject"])) : a("", !0)
+              ], 46, Xe)
+            ])) : a("", !0),
+            s.isTextMode ? (c(), p("div", Ye, [
+              n("button", {
+                class: g({
+                  "button-tool": !0,
+                  "button-tool--selected": s.textAlign === "end",
+                  tooltip: !0
+                }),
+                style: b({
+                  background: s.textAlign === "end" ? t.FINAL_CONFIG.style.buttons.shapes.selected.backgroundColor : t.FINAL_CONFIG.style.buttons.shapes.backgroundColor,
+                  border: s.textAlign === "end" ? t.FINAL_CONFIG.style.buttons.shapes.selected.border : t.FINAL_CONFIG.style.buttons.shapes.border,
+                  color: s.textAlign === "end" ? t.FINAL_CONFIG.style.buttons.shapes.selected.color : t.FINAL_CONFIG.style.buttons.shapes.color,
+                  borderRadius: `${t.FINAL_CONFIG.style.buttons.borderRadius}px`
+                }),
+                disabled: s.isBulletTextMode,
+                onClick: o[105] || (o[105] = (i) => {
+                  s.isDeleteMode = !1, s.isMoveMode = !1, s.isResizeMode = !1, s.isDrawMode = !1, s.isSelectMode = !1, s.activeShape = void 0, s.textAlign = "end", t.setSelectedTextAlignTo("end");
+                }),
+                onMouseenter: o[106] || (o[106] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("setAlignEnd", i, "top")),
+                onMouseleave: o[107] || (o[107] = (...i) => t.hideTooltip && t.hideTooltip(...i)),
+                onFocus: o[108] || (o[108] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("setAlignEnd", i, "top")),
+                onBlur: o[109] || (o[109] = (...i) => t.hideTooltip && t.hideTooltip(...i))
+              }, [
+                o[165] || (o[165] = n("svg", {
+                  width: "80%",
+                  viewBox: "0 0 24 24",
+                  "stroke-width": "2",
+                  stroke: "currentColor",
+                  fill: "none",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round"
+                }, [
+                  n("path", {
+                    stroke: "none",
+                    d: "M0 0h24v24H0z",
+                    fill: "none"
+                  }),
+                  n("path", { d: "M4 6l16 0" }),
+                  n("path", { d: "M10 12l10 0" }),
+                  n("path", { d: "M6 18l14 0" })
+                ], -1)),
+                t.FINAL_CONFIG.style.showTooltips ? (c(), x(u, {
+                  key: 0,
+                  show: s.showTooltip && s.tooltipKey === "setAlignEnd",
+                  x: s.tooltipPos.x,
+                  y: s.tooltipPos.y - 6,
+                  placement: "top",
+                  styleObject: t.tooltipStyleObject
+                }, {
+                  default: N(() => [
+                    F(f(t.FINAL_CONFIG.translations.tooltipShapeTextRight), 1)
+                  ]),
+                  _: 1
+                }, 8, ["show", "x", "y", "styleObject"])) : a("", !0)
+              ], 46, Ve)
+            ])) : a("", !0),
+            s.isTextMode ? (c(), p("div", qe, [
+              n("button", {
+                class: g({
+                  "button-tool": !0,
+                  "button-tool--selected": s.isBulletTextMode,
+                  tooltip: !0
+                }),
+                style: b({
+                  background: s.isBulletTextMode ? t.FINAL_CONFIG.style.buttons.shapes.selected.backgroundColor : t.FINAL_CONFIG.style.buttons.shapes.backgroundColor,
+                  border: s.isBulletTextMode ? t.FINAL_CONFIG.style.buttons.shapes.selected.border : t.FINAL_CONFIG.style.buttons.shapes.border,
+                  color: s.isBulletTextMode ? t.FINAL_CONFIG.style.buttons.shapes.selected.color : t.FINAL_CONFIG.style.buttons.shapes.color,
+                  borderRadius: `${t.FINAL_CONFIG.style.buttons.borderRadius}px`
+                }),
+                onClick: o[110] || (o[110] = (i) => {
+                  s.isDeleteMode = !1, s.isMoveMode = !1, s.isResizeMode = !1, s.isDrawMode = !1, s.isSelectMode = !1, s.activeShape = void 0, s.isBulletTextMode = !s.isBulletTextMode, s.textAlign = "start", t.setSelectedTextAlignTo("start"), t.setCurrentStyleOfSelectedText();
+                }),
+                onMouseenter: o[111] || (o[111] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("setBulletMode", i, "top")),
+                onMouseleave: o[112] || (o[112] = (...i) => t.hideTooltip && t.hideTooltip(...i)),
+                onFocus: o[113] || (o[113] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("setBulletMode", i, "top")),
+                onBlur: o[114] || (o[114] = (...i) => t.hideTooltip && t.hideTooltip(...i))
+              }, [
+                o[166] || (o[166] = n("svg", {
+                  width: "100%",
+                  viewBox: "0 0 24 24",
+                  "stroke-width": "2",
+                  stroke: "currentColor",
+                  fill: "none",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round"
+                }, [
+                  n("path", {
+                    stroke: "none",
+                    d: "M0 0h24v24H0z",
+                    fill: "none"
+                  }),
+                  n("path", { d: "M9 6l11 0" }),
+                  n("path", { d: "M9 12l11 0" }),
+                  n("path", { d: "M9 18l11 0" }),
+                  n("path", { d: "M5 6l0 .01" }),
+                  n("path", { d: "M5 12l0 .01" }),
+                  n("path", { d: "M5 18l0 .01" })
+                ], -1)),
+                t.FINAL_CONFIG.style.showTooltips ? (c(), x(u, {
+                  key: 0,
+                  show: s.showTooltip && s.tooltipKey === "setBulletMode",
+                  x: s.tooltipPos.x,
+                  y: s.tooltipPos.y - 6,
+                  placement: "top",
+                  styleObject: t.tooltipStyleObject
+                }, {
+                  default: N(() => [
+                    F(f(t.FINAL_CONFIG.translations.tooltipShapeTextBullet), 1)
+                  ]),
+                  _: 1
+                }, 8, ["show", "x", "y", "styleObject"])) : a("", !0)
+              ], 38)
+            ])) : a("", !0),
+            s.isTextMode ? (c(), p("div", Je, [
+              n("button", {
+                class: g({
+                  "button-tool": !0,
+                  "button-tool--selected": s.isBold,
+                  tooltip: !0
+                }),
+                style: b({
+                  background: s.isBold ? t.FINAL_CONFIG.style.buttons.shapes.selected.backgroundColor : t.FINAL_CONFIG.style.buttons.shapes.backgroundColor,
+                  border: s.isBold ? t.FINAL_CONFIG.style.buttons.shapes.selected.border : t.FINAL_CONFIG.style.buttons.shapes.border,
+                  color: s.isBold ? t.FINAL_CONFIG.style.buttons.shapes.selected.color : t.FINAL_CONFIG.style.buttons.shapes.color,
+                  borderRadius: `${t.FINAL_CONFIG.style.buttons.borderRadius}px`
+                }),
+                onClick: o[115] || (o[115] = (i) => {
+                  s.isDeleteMode = !1, s.isMoveMode = !1, s.isResizeMode = !1, s.isDrawMode = !1, s.isSelectMode = !1, s.activeShape = void 0, s.isBold = !s.isBold, t.setCurrentStyleOfSelectedText();
+                }),
+                onMouseenter: o[116] || (o[116] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("setBold", i, "top")),
+                onMouseleave: o[117] || (o[117] = (...i) => t.hideTooltip && t.hideTooltip(...i)),
+                onFocus: o[118] || (o[118] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("setBold", i, "top")),
+                onBlur: o[119] || (o[119] = (...i) => t.hideTooltip && t.hideTooltip(...i))
+              }, [
+                o[167] || (o[167] = n("svg", {
+                  width: "100%",
+                  viewBox: "0 0 24 24",
+                  "stroke-width": "3",
+                  stroke: "currentColor",
+                  fill: "none",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round"
+                }, [
+                  n("path", {
+                    stroke: "none",
+                    d: "M0 0h24v24H0z",
+                    fill: "none"
+                  }),
+                  n("path", { d: "M7 5h6a3.5 3.5 0 0 1 0 7h-6z" }),
+                  n("path", { d: "M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7" })
+                ], -1)),
+                t.FINAL_CONFIG.style.showTooltips ? (c(), x(u, {
+                  key: 0,
+                  show: s.showTooltip && s.tooltipKey === "setBold",
+                  x: s.tooltipPos.x,
+                  y: s.tooltipPos.y - 6,
+                  placement: "top",
+                  styleObject: t.tooltipStyleObject
+                }, {
+                  default: N(() => [
+                    F(f(t.FINAL_CONFIG.translations.tooltipShapeTextBold), 1)
+                  ]),
+                  _: 1
+                }, 8, ["show", "x", "y", "styleObject"])) : a("", !0)
+              ], 38)
+            ])) : a("", !0),
+            s.isTextMode ? (c(), p("div", Ze, [
+              n("button", {
+                class: g({
+                  "button-tool": !0,
+                  "button-tool--selected": s.isItalic,
+                  tooltip: !0
+                }),
+                style: b({
+                  background: s.isItalic ? t.FINAL_CONFIG.style.buttons.shapes.selected.backgroundColor : t.FINAL_CONFIG.style.buttons.shapes.backgroundColor,
+                  border: s.isItalic ? t.FINAL_CONFIG.style.buttons.shapes.selected.border : t.FINAL_CONFIG.style.buttons.shapes.border,
+                  color: s.isItalic ? t.FINAL_CONFIG.style.buttons.shapes.selected.color : t.FINAL_CONFIG.style.buttons.shapes.color,
+                  borderRadius: `${t.FINAL_CONFIG.style.buttons.borderRadius}px`
+                }),
+                onClick: o[120] || (o[120] = (i) => {
+                  s.isDeleteMode = !1, s.isMoveMode = !1, s.isResizeMode = !1, s.isDrawMode = !1, s.isSelectMode = !1, s.activeShape = void 0, s.isItalic = !s.isItalic, t.setCurrentStyleOfSelectedText();
+                }),
+                onMouseenter: o[121] || (o[121] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("setItalic", i, "top")),
+                onMouseleave: o[122] || (o[122] = (...i) => t.hideTooltip && t.hideTooltip(...i)),
+                onFocus: o[123] || (o[123] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("setItalic", i, "top")),
+                onBlur: o[124] || (o[124] = (...i) => t.hideTooltip && t.hideTooltip(...i))
+              }, [
+                o[168] || (o[168] = n("svg", {
+                  width: "100%",
+                  height: "44",
+                  viewBox: "0 0 24 24",
+                  "stroke-width": "2",
+                  stroke: "currentColor",
+                  fill: "none",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round"
+                }, [
+                  n("path", {
+                    stroke: "none",
+                    d: "M0 0h24v24H0z",
+                    fill: "none"
+                  }),
+                  n("path", { d: "M11 5l6 0" }),
+                  n("path", { d: "M7 19l6 0" }),
+                  n("path", { d: "M14 5l-4 14" })
+                ], -1)),
+                t.FINAL_CONFIG.style.showTooltips ? (c(), x(u, {
+                  key: 0,
+                  show: s.showTooltip && s.tooltipKey === "setItalic",
+                  x: s.tooltipPos.x,
+                  y: s.tooltipPos.y - 6,
+                  placement: "top",
+                  styleObject: t.tooltipStyleObject
+                }, {
+                  default: N(() => [
+                    F(f(t.FINAL_CONFIG.translations.tooltipShapeTextItalic), 1)
+                  ]),
+                  _: 1
+                }, 8, ["show", "x", "y", "styleObject"])) : a("", !0)
+              ], 38)
+            ])) : a("", !0),
+            s.isTextMode ? (c(), p("div", Qe, [
+              n("button", {
+                class: g({
+                  "button-tool": !0,
+                  "button-tool--selected": s.isUnderline,
+                  tooltip: !0
+                }),
+                style: b({
+                  background: s.isUnderline ? t.FINAL_CONFIG.style.buttons.shapes.selected.backgroundColor : t.FINAL_CONFIG.style.buttons.shapes.backgroundColor,
+                  border: s.isUnderline ? t.FINAL_CONFIG.style.buttons.shapes.selected.border : t.FINAL_CONFIG.style.buttons.shapes.border,
+                  color: s.isUnderline ? t.FINAL_CONFIG.style.buttons.shapes.selected.color : t.FINAL_CONFIG.style.buttons.shapes.color,
+                  borderRadius: `${t.FINAL_CONFIG.style.buttons.borderRadius}px`
+                }),
+                onClick: o[125] || (o[125] = (i) => {
+                  s.isDeleteMode = !1, s.isMoveMode = !1, s.isResizeMode = !1, s.isDrawMode = !1, s.isSelectMode = !1, s.activeShape = void 0, s.isUnderline = !s.isUnderline, t.setCurrentStyleOfSelectedText();
+                }),
+                onMouseenter: o[126] || (o[126] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("setUnderline", i, "top")),
+                onMouseleave: o[127] || (o[127] = (...i) => t.hideTooltip && t.hideTooltip(...i)),
+                onFocus: o[128] || (o[128] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("setUnderline", i, "top")),
+                onBlur: o[129] || (o[129] = (...i) => t.hideTooltip && t.hideTooltip(...i))
+              }, [
+                o[169] || (o[169] = n("svg", {
+                  width: "100%",
+                  viewBox: "0 0 24 24",
+                  "stroke-width": "2",
+                  stroke: "currentColor",
+                  fill: "none",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round"
+                }, [
+                  n("path", {
+                    stroke: "none",
+                    d: "M0 0h24v24H0z",
+                    fill: "none"
+                  }),
+                  n("path", { d: "M7 5v5a5 5 0 0 0 10 0v-5" }),
+                  n("path", { d: "M5 19h14" })
+                ], -1)),
+                t.FINAL_CONFIG.style.showTooltips ? (c(), x(u, {
+                  key: 0,
+                  show: s.showTooltip && s.tooltipKey === "setUnderline",
+                  x: s.tooltipPos.x,
+                  y: s.tooltipPos.y - 6,
+                  placement: "top",
+                  styleObject: t.tooltipStyleObject
+                }, {
+                  default: N(() => [
+                    F(f(t.FINAL_CONFIG.translations.tooltipShapeTextUnderline), 1)
+                  ]),
+                  _: 1
+                }, 8, ["show", "x", "y", "styleObject"])) : a("", !0)
+              ], 38)
+            ])) : a("", !0),
+            n("div", $e, [
+              n("button", {
+                class: g({
+                  "button-tool": !0,
+                  tooltip: !0
+                }),
+                style: {
+                  borderRadius: "6px"
+                },
+                onMouseenter: o[131] || (o[131] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("setColor", i, "top")),
+                onMouseleave: o[132] || (o[132] = (...i) => t.hideTooltip && t.hideTooltip(...i)),
+                onFocus: o[133] || (o[133] = (i) => t.FINAL_CONFIG.style.showTooltips && t.showToolTipFor("setColor", i, "top")),
+                onBlur: o[134] || (o[134] = (...i) => t.hideTooltip && t.hideTooltip(...i))
+              }, [
+                T(I, {
+                  value: s.selectedColor,
+                  "onUpdate:value": o[130] || (o[130] = (i) => s.selectedColor = i),
+                  backgroundColor: t.FINAL_CONFIG.style.backgroundColor,
+                  buttonBorderColor: t.FINAL_CONFIG.style.color,
+                  teleported: ""
+                }, null, 8, ["value", "backgroundColor", "buttonBorderColor"])
+              ], 32),
+              t.FINAL_CONFIG.style.showTooltips ? (c(), x(u, {
+                key: 0,
+                show: s.showTooltip && s.tooltipKey === "setColor",
+                x: s.tooltipPos.x,
+                y: s.tooltipPos.y - 6,
+                placement: "top",
+                styleObject: t.tooltipStyleObject
+              }, {
+                default: N(() => [
+                  F(f(t.FINAL_CONFIG.translations.tooltipShapeColor), 1)
+                ]),
+                _: 1
+              }, 8, ["show", "x", "y", "styleObject"])) : a("", !0)
+            ]),
+            n("div", et, [
+              n("label", tt, [
+                F(f(t.FINAL_CONFIG.translations.colorAlpha) + ": " + f(s.transparency > 98 ? 100 : s.transparency) + " % ", 1),
+                M(n("input", {
+                  name: "colorTransparency",
+                  type: "range",
+                  "onUpdate:modelValue": o[135] || (o[135] = (i) => s.transparency = i),
+                  onInput: o[136] || (o[136] = (...i) => t.setTransparencyOfSelectedShape && t.setTransparencyOfSelectedShape(...i)),
+                  min: 0,
+                  max: 100,
+                  style: b({
+                    width: "100%",
+                    accentColor: t.FINAL_CONFIG.style.color + " !important"
+                  })
+                }, null, 36), [
+                  [D, s.transparency]
+                ])
+              ])
+            ])
+          ])
+        ]),
+        _: 1
+      }, 8, ["config", "onToggle"])
+    ]),
+    n("div", {
+      class: "annotator annotator__wrapper",
+      ref: "drawSvgContainer",
+      style: { position: "relative" },
+      id: r.uid,
+      "data-annotator-content": ""
+    }, [
+      n("div", {
+        class: "annotator__content-layer",
+        style: b(`${s.isSummaryOpen ? "pointer-events: none;" : ""}`)
+      }, [
+        B(e.$slots, "default", {}, void 0, !0)
+      ], 4),
+      s.isSummaryOpen || t.FINAL_CONFIG.alwaysVisible ? (c(), p("svg", {
+        id: "annotatorSvg",
+        key: s.step,
+        ref: "mainSvg",
+        class: g({ annotator__overlay: !0, draw: !0, "draw--free": s.activeShape === "line" }),
+        viewBox: `0 0 ${s.svgWidth} ${s.svgHeight}`,
+        width: s.sourceWidth,
+        height: s.sourceHeight,
+        onPointerdown: o[142] || (o[142] = (d) => t.chooseAction(d)),
+        onPointerup: o[143] || (o[143] = (d) => t.resetDraw(d)),
+        onTouchend: o[144] || (o[144] = (d) => t.resetDraw(d)),
+        onTouchstart: o[145] || (o[145] = (d) => {
+          t.setPointer(d), t.clickSvg(d);
+        }),
+        onPointermove: o[146] || (o[146] = (d) => {
+          t.setPointer(d), t.chooseMove(d);
+        }),
+        onPointerout: o[147] || (o[147] = (d) => t.onPointerOut(d)),
+        onPointerover: o[148] || (o[148] = (d) => t.allowEditAndHoverShapes(d)),
+        onClick: o[149] || (o[149] = (d) => t.clickSvg(d)),
+        style: b({
+          position: "absolute",
+          top: 0,
+          left: 0,
+          cursor: t.cursorClass,
+          fontFamily: "Helvetica",
+          zIndex: 1e8,
+          pointerEvents: s.isSummaryOpen ? "all" : "none"
+        })
+      }, [
+        n("rect", {
+          class: "annotator__glass",
+          x: "0",
+          y: "0",
+          width: s.svgWidth,
+          height: s.svgHeight,
+          fill: "transparent",
+          "pointer-events": s.isSummaryOpen ? "all" : "none",
+          style: { cursor: "inherit" },
+          onPointerdown: o[137] || (o[137] = A((d) => t.chooseAction(d), ["stop", "prevent"])),
+          onPointermove: o[138] || (o[138] = A((d) => {
+            t.setPointer(d), t.chooseMove(d);
+          }, ["stop", "prevent"])),
+          onPointerup: o[139] || (o[139] = A((...d) => t.resetDraw && t.resetDraw(...d), ["stop", "prevent"])),
+          onClick: o[140] || (o[140] = A(() => {
+          }, ["stop", "prevent"]))
+        }, null, 40, it),
+        (c(!0), p(X, null, Y(t.userShapes, (d) => (c(), p("g", {
+          key: d.id,
+          innerHTML: d.html,
+          onClick: o[141] || (o[141] = (i) => {
+            t.clickShape(i), s.isMoveMode = !1;
+          })
+        }, null, 8, lt))), 128))
+      ], 46, st)) : a("", !0),
+      s.isPrinting || r.isImaging ? (c(), p("svg", {
+        key: 1,
+        style: { position: "absolute", top: "0", left: "0" },
+        height: s.sourceHeight,
+        viewBox: `0 0 ${s.svgWidth} ${s.svgHeight}`,
+        width: s.sourceWidth,
+        "data-dom-to-png-ignore": ""
+      }, [
+        n("circle", {
+          class: "animated-circle-print",
+          cx: s.svgWidth / 2,
+          cy: s.svgHeight / 2,
+          r: "50",
+          stroke: "#6376DD",
+          "stroke-width": "10",
+          fill: "none"
+        }, null, 8, nt)
+      ], 8, rt)) : a("", !0)
+    ], 8, ot)
+  ]);
+}
+const Nt = /* @__PURE__ */ j(de, [["render", dt], ["__scopeId", "data-v-06580658"]]);
+export {
+  Nt as default
+};