vue-data-ui 3.2.2 → 3.2.3

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

@@ -1,2182 +0,0 @@
-import { B as p, t as v, C as w } from "./lib-CDp2KgIU.js";
-import { u as A } from "./useNestedProp-Cwtenuui.js";
-import { d as M } from "./dom-to-png-1edcjS0-.js";
-import { createElementBlock as d, openBlock as n, createElementVNode as r, normalizeStyle as c, toDisplayString as u, createCommentVNode as a, normalizeClass as y, createStaticVNode as F, withDirectives as N, vModelCheckbox as g, vModelText as C, renderSlot as O, Fragment as L, renderList as G } from "vue";
-import { _ } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const m = {
-  props: {
-    config: {
-      type: Object,
-      default() {
-        return {};
-      }
-    },
-    dataset: {
-      type: Object,
-      default() {
-        return {
-          shapes: [],
-          lastSelectedShape: void 0
-        };
-      }
-    }
-  },
-  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,
-      pointerDownId: -1,
-      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: w
-    };
-  },
-  watch: {
-    shapes: {
-      handler(t) {
-        t.length === 0 && (this.lastSelectedShape = void 0);
-      }
-    }
-  },
-  computed: {
-    FINAL_CONFIG() {
-      const t = A().vue_ui_annotator;
-      if (!Object.keys(this.config || {}).length)
-        return t;
-      const i = this.treeShake({
-        defaultConfig: t,
-        userConfig: this.config
-      });
-      return this.convertConfigColors(i);
-    },
-    canSelect() {
-      return this.shapes.filter((t) => !["line", "group"].includes(t.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((t) => {
-        switch (!0) {
-          case (t && t.type === "arrow"):
-            const i = t.strokeWidth > 3 ? 5 : 10, o = t.strokeWidth > 3 ? 2.5 : 5;
-            return `
-                        <defs>
-                        <marker 
-                            id="${t.id}" 
-                            markerWidth="${i}" 
-                            markerHeight="${i}" 
-                            refX="0" 
-                            refY="${o}" 
-                            orient="auto"
-                        >
-                            <polygon 
-                            points="0 0,${i} ${o}, 0 ${i}" 
-                            fill="${t.color}"
-                            />
-                        </marker>
-                        </defs>
-                        ${this.includeSelectionIndicator(t)}
-                        <g id="${t.id}">
-                            <path 
-                            style="stroke-linecap: round !important; ${t.isDash ? `stroke-dasharray: ${t.strokeWidth * 3}` : ""}" 
-                            stroke="${t.color}" 
-                            id="${t.id}" 
-                            d="M${t.x},${t.y} ${t.endX},${t.endY}" 
-                            stroke-width="${t.strokeWidth}" 
-                            marker-end="url(#${t.id})"
-                            />
-                        </g>
-                        <g id="${t.id}">
-                        <rect 
-                            id="${t.id}"
-                            x="${t.x - 10}"
-                            y="${t.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(t)}
-                        </g>
-                        `;
-          case (t && t.type === "circle"):
-            return `
-                            <g id="${t.id}">
-                                ${this.includeSelectionIndicator(t)}
-                                <circle 
-                                id="${t.id}" 
-                                cx="${t.x}" 
-                                cy="${t.y}" 
-                                r="${t.circleRadius ? t.circleRadius : Number.MIN_VALUE}"
-                                fill="${t.isFilled ? t.color + t.alpha : "rgba(255,255,255,0.001)"}" 
-                                stroke="${t.color + t.alpha}" 
-                                stroke-width="${t.strokeWidth}"
-                                style="${t.isDash ? `stroke-dasharray: ${t.strokeWidth * 3}` : ""}"
-                                >
-                                </circle>
-                            </g>
-                            
-                            ${this.includeDeleteButton(t)}`;
-          case (t && t.type === "group"):
-            return `<g id="${t.id}">
-                            <rect
-                                id="${this.isResizeMode ? "" : t.id}"
-                                x="${t.x}"
-                                y="${t.y}"
-                                fill="transparent"
-                                height="${t.rectHeight}"
-                                width="${t.rectWidth}"
-                                stroke="grey"
-                                stroke-width="1"
-                                style="rx:1 !important; ry:1 !important; ${t.isDash ? `stroke-dasharray: ${t.strokeWidth * 3}` : ""}; display:${this.isSelectMode || this.isDeleteMode || this.hoveredShapeId && this.hoveredShapeId === t.id ? "initial" : "none"};"
-                            />
-                <g id="${t.id}">
-                ${t.content ? t.content : ""}
-                </g>
-                            ${this.includeDeleteButton(t)}
-                            </g> `;
-          case (t && t.type === "rect"):
-            return `<g id="${t.id}">
-                            ${this.includeSelectionIndicator(t)}
-                            <rect
-                                id="${this.isResizeMode ? "" : t.id}"
-                                x="${t.x}"
-                                y="${t.y}"
-                                fill="${t.isFilled ? t.color + t.alpha : "rgba(255,255,255,0.001)"}"
-                                height="${t.rectHeight}"
-                                width="${t.rectWidth}"
-                                stroke="${t.color + t.alpha}"
-                                stroke-width="${t.strokeWidth}"
-                                style="rx:1 !important; ry:1 !important; ${t.isDash ? `stroke-dasharray: ${t.strokeWidth * 3}` : ""}"
-                            />
-                            <rect id="${t.id}"
-                                x="${t.x + t.rectWidth}"
-                                y="${t.y + t.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(t)}
-                            </g> `;
-          case (t && t.type === "line"):
-            return `
-                    <g id="${t.id}">
-                        <path 
-                        id="${t.id}" 
-                        d="M${t.path ? t.path : ""}" 
-                        style="stroke:${t.color + t.alpha} !important; fill:none; stroke-width:${t.strokeWidth} !important; stroke-linecap: round !important; stroke-linejoin: round !important;"        
-                        />
-                ${this.includeDeleteButton(t)}
-                    </g>
-                    `;
-          case (t && t.type === "text"):
-            const h = t.textContent.split("‎"), s = [];
-            for (let e = 0; e < h.length; e += 1)
-              s.push(`
-            ${t.isBulletTextMode ? `<tspan x="${t.x - t.fontSize}" y="${t.y + t.fontSize * e}" id="${t.id}" font-size="${t.fontSize / 2}">⬤</tspan>` : ""}
-                    <tspan id="${t.id}" x="${t.x}" y="${t.y + t.fontSize * e}">
-                        ${h[e]}
-                    </tspan>`);
-            return `
-                            ${this.includeSelectionIndicator(t)}
-                            ${this.computeTextElement(
-              t,
-              s,
-              t.isBulletTextMode
-            )}
-                            `;
-        }
-      });
-    }
-  },
-  mounted() {
-    const t = this.$refs.drawSvgContainer;
-    let i = !1;
-    this.walkTheDOM(t, (s) => {
-      if (!i && ["DIV", "svg", "section", "canvas"].includes(s.tagName)) {
-        this.slottedSvg = s, i = !0;
-        return;
-      }
-    });
-    const o = this.slottedSvg.getBoundingClientRect();
-    this.sizeRatio = o.height / o.width, this.svgWidth = 1e3, this.svgHeight = this.sizeRatio * 1e3, this.sourceWidth = o.width, this.sourceHeight = o.height, new ResizeObserver((s) => {
-      s.forEach((e) => {
-        this.sourceWidth = e.contentRect.width, this.sourceHeight = e.contentRect.height, this.sizeRatio = e.contentRect.height / e.contentRect.width, this.svgHeight = this.sizeRatio * 1e3;
-      });
-    }).observe(this.slottedSvg), window.addEventListener("keydown", (s) => {
-      this.write(s);
-    });
-  },
-  destroyed() {
-    window.removeEventListener("keydown", (t) => {
-      this.write(t);
-    });
-  },
-  methods: {
-    treeShake: v,
-    convertConfigColors: p,
-    bringShapeTo(t) {
-      const i = this.shapes.find(
-        (o) => o.id === this.lastSelectedShape.id
-      );
-      switch (!0) {
-        case t === "front":
-          this.shapes = this.shapes.filter((o) => o.id !== i.id), this.shapes.push(i);
-          break;
-        case t === "back":
-          this.shapes = this.shapes.filter((o) => o.id !== i.id), this.shapes = [i, ...this.shapes];
-          break;
-        default:
-          return;
-      }
-    },
-    clickSvg(t) {
-      if (this.isDeleteMode)
-        return;
-      this.deleteEmptyTextElement(), this.isTextMode ? (this.isWriting = !0, this.showCaret = !0) : (this.isWriting = !1, this.showCaret = !1, this.isTextMode = !1);
-      let i = `text_${Math.random() * 1e4}_${Math.random() * 99999}`;
-      if (this.isWriting) {
-        this.shapes.push({
-          id: i,
-          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);
-        return;
-      }
-      const o = () => {
-        this.isDash = this.shapes.find((s) => s.id === t.target.id).isDash;
-      }, h = () => {
-        this.strokeSize = this.shapes.find(
-          (s) => s.id === t.target.id
-        ).strokeWidth;
-      };
-      if (this.isSelectMode = !1, t.target.id.includes("arrow")) {
-        this.activeShape = "arrow", o(), h();
-        return;
-      }
-      if (t.target.id.includes("circle")) {
-        this.activeShape = "circle", this.options.circle.filled = this.shapes.find(
-          (s) => s.id === t.target.id
-        ).isFilled, o(), h();
-        return;
-      }
-      if (t.target.id.includes("rect")) {
-        this.activeShape = "rect", this.options.rect.filled = this.shapes.find(
-          (s) => s.id === t.target.id
-        ).isFilled, o(), h();
-        return;
-      }
-      if (t.target.id.includes("line")) {
-        this.activeShape = "line", h();
-        return;
-      }
-      if (t.target.id.includes("text")) {
-        this.isTextMode = !0, this.isWriting = !0, this.showCaret = !0;
-        const s = this.shapes.find((e) => e.id === t.target.id);
-        s && s.textAlign && (this.textAlign = this.shapes.find(
-          (e) => e.id === t.target.id
-        ).textAlign), s && (this.isBulletTextMode = this.shapes.find(
-          (e) => e.id === t.target.id
-        ).isBulletTextMode);
-        return;
-      }
-    },
-    copyPaste() {
-      const t = {
-        ...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(t);
-    },
-    includeDeleteButton(t, i = !1) {
-      switch (!0) {
-        case t.type === "circle":
-          return `
-                    <g id="${t.id}" style="display:${this.isDeleteMode ? "initial" : "none"};">
-                        <circle id="${t.id}" cx="${t.x}" cy="${t.y}" r="12" fill="red"/>
-                        <line stroke="white" stroke-width="2" id="${t.id}" x1="${t.x - 4}" y1="${t.y - 4}" x2="${t.x + 4}" y2="${t.y + 4}"/>
-                        <line stroke="white" stroke-width="2" id="${t.id}" x1="${t.x + 4}" y1="${t.y - 4}" x2="${t.x - 4}" y2="${t.y + 4}"/>
-                    </g>
-                `;
-        case t.type === "text":
-          let o, h = [-8, -12, -4, -12, -4];
-          switch (!0) {
-            case t.textAlign === "start":
-              i ? o = [-20, -24, -16, -16, -24] : o = [-16, -20, -12, -12, -20];
-              break;
-            case t.textAlign === "middle":
-              o = [0, -4, 4, 4, -4], h = [-32, -36, -28, -36, -28];
-              break;
-            case t.textAlign === "end":
-              o = [16, 20, 12, 12, 20];
-              break;
-            default:
-              o = [0, 0, 0];
-              break;
-          }
-          return `
-                    <g id="${t.id}" style="display:${this.isDeleteMode ? "initial" : "none"};">
-                        <circle id="${t.id}" cx="${t.x + o[0]}" cy="${t.y + h[0]}" r="12" fill="red"/>
-                        <line stroke="white" stroke-width="2" id="${t.id}" x1="${t.x + o[1]}" y1="${t.y + h[1]}" x2="${t.x + o[2]}" y2="${t.y + h[2]}"/>
-                        <line stroke="white" stroke-width="2" id="${t.id}" x1="${t.x + o[3]}" y1="${t.y + h[3]}" x2="${t.x + o[4]}" y2="${t.y + h[4]}"/>
-                    </g>
-                `;
-        default:
-          return `
-                    <g id="${t.id}" style="display:${this.isDeleteMode ? "initial" : "none"};">
-                        <circle id="${t.id}" cx="${t.x - 4}" cy="${t.y - 4}" r="12" fill="red"/>
-                        <line stroke="white" stroke-width="2" id="${t.id}" x1="${t.x - 8}" y1="${t.y - 8}" x2="${t.x}" y2="${t.y}"/>
-                        <line stroke="white" stroke-width="2" id="${t.id}" x1="${t.x}" y1="${t.y - 8}" x2="${t.x - 8}" y2="${t.y}"/>
-                    </g>
-                `;
-      }
-    },
-    includeSelectionIndicator(t) {
-      if (t)
-        switch (!0) {
-          case t.type === "rect":
-            return `
-                    <rect
-                    id="${t.id}" 
-                    style="stroke-dasharray: 10; display:${this.hoveredShapeId && this.hoveredShapeId === t.id ? "initial" : "none"}"
-                    x="${t.x - 20}"
-                    y="${t.y - 20}"
-                    height="${t.rectHeight + 40}"
-                    width="${t.rectWidth + 40}"
-                    fill="transparent"
-                    stroke="grey"
-                    />
-                `;
-          case t.type === "circle":
-            return `
-                    <rect
-                    id="${t.id}" 
-                    style="stroke-dasharray: 10; display:${this.hoveredShapeId && this.hoveredShapeId === t.id ? "initial" : "none"}"
-                    x="${t.x - t.circleRadius - 20}"
-                    y="${t.y - t.circleRadius - 20}"
-                    height="${t.circleRadius * 2 + 40}"
-                    width="${t.circleRadius * 2 + 40}"
-                    fill="transparent"
-                    stroke="grey"
-                    />
-                `;
-          case t.type === "arrow":
-            const i = t.endX - t.x > 0, o = t.endY - t.y > 0;
-            return `
-                    <rect
-                    id="${t.id}" 
-                    style="stroke-dasharray: 10; display:${this.hoveredShapeId && this.hoveredShapeId === t.id ? "initial" : "none"}"
-                    x="${i ? t.x - 20 : t.endX - 20}"
-                    y="${o ? t.y - 20 : t.endY - 20}"
-                    height="${o ? t.endY - t.y + 40 : t.y - t.endY + 40}"
-                    width="${i ? t.endX - t.x + 40 : t.x - t.endX + 40}"
-                    fill="transparent"
-                    stroke="grey"
-                    />
-                `;
-          case t.type === "text":
-            const h = Array.from(document.getElementsByTagName("text")).find(
-              (I) => I.id === t.id
-            );
-            if (!h)
-              return;
-            const { x: s, y: e, width: l, height: b } = h.getBBox();
-            return `
-                    <rect
-                    id="${t.id}" 
-                    style="stroke-dasharray: 10; display:${this.hoveredShapeId && this.hoveredShapeId === t.id ? "initial" : "none"}"
-                    x="${s - 20}"
-                    y="${e - 20}"
-                    height="${b + 40}"
-                    width="${l + 40}"
-                    fill="transparent"
-                    stroke="grey"
-                    />
-                `;
-          default:
-            return "";
-        }
-    },
-    allowEditAndHoverShapes(t) {
-      t.preventDefault(), this.preventEdit = !1, t.target && t.target.id && (this.hoveredShapeId = t.target.id);
-    },
-    setSelectedTextAlignTo(t) {
-      !this.lastSelectedShape || this.lastSelectedShape.type !== "text" || (this.lastSelectedShape.textAlign = t);
-    },
-    undoLastShape() {
-      this.lastSelectedShape = void 0, this.shapes = this.shapes.slice(0, -1);
-    },
-    write(t) {
-      if (this.preventEdit)
-        return;
-      t.preventDefault();
-      const i = t.keyCode;
-      if (!this.isWriting)
-        return;
-      this.showCaret = !0;
-      let o;
-      if (this.lastSelectedShape.type === "text" ? o = this.shapes.find((s) => s.id === this.lastSelectedShape.id) : o = this.shapes.at(-1), this.currentTarget = o, o.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 h = [
-        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 i === 8:
-          o.textContent = o.textContent.slice(0, -1);
-          break;
-        case i === 9:
-          o.textContent += "&nbsp; &nbsp; &nbsp; &nbsp;";
-          break;
-        case i === 13:
-          o.lines += 1, o.textContent += "‎";
-          return;
-        case h.includes(i):
-          return;
-        default:
-          o.textContent += t.key;
-      }
-    },
-    groupShapes() {
-      if (this.selectedGroup = [], this.activeShape !== "group") {
-        this.isSelectMode = !1, this.shapes = this.shapes.filter((i) => i.type !== "group");
-        return;
-      }
-      const t = this.shapes.at(-1);
-      if (this.shapes.forEach((i) => {
-        if (i.type !== "group")
-          switch (!0) {
-            case i.type === "arrow":
-              const o = i.x <= i.endX && i.y <= i.endY && t.x <= i.x && t.y <= i.y && t.x + t.rectWidth >= i.endX && t.y + t.rectHeight >= i.endY, h = i.endY < i.y && i.x < i.endX && t.x <= i.x && t.y <= i.y && t.x + t.rectWidth >= i.endX && t.y + t.rectHeight >= i.y, s = i.x > i.endX && i.y < i.endY && t.x <= i.endX && t.y <= i.endY && t.x + t.rectWidth >= i.x && t.y + t.rectHeight >= i.endY, e = i.x > i.endX && i.y > i.endY && t.x <= i.endX && t.y <= i.endY && t.x + t.rectWidth >= i.x && t.y + t.rectHeight >= i.y;
-              (o || h || s || e) && this.selectedGroup.push(i);
-              break;
-            case i.type === "circle":
-              t.x <= i.x + i.circleRadius && t.y <= i.y + i.circleRadius && i.x + i.circleRadius <= t.x + t.rectWidth && i.y + i.circleRadius <= t.y + t.rectHeight && this.selectedGroup.push(i);
-              break;
-            case i.type === "rect":
-              t.x <= i.x && t.y <= i.y && i.x <= t.x + t.rectWidth && i.y <= t.y + t.rectHeight && i.x + i.rectWidth <= t.x + t.rectWidth && i.y + i.rectHeight <= t.y + t.rectHeight && i.rectWidth <= t.rectWidth && i.rectHeight <= t.rectHeight && this.selectedGroup.push(i);
-              break;
-            case i.type === "text":
-              t.x <= i.x && t.y <= i.y && this.selectedGroup.push(i);
-              break;
-          }
-      }), this.selectedGroup = this.selectedGroup.map((i) => ({
-        ...i,
-        id: t.id,
-        oldId: i.id,
-        diffX: i.x - t.x,
-        diffY: i.y - t.y,
-        diffEndX: i.endX ? i.endX - t.x : 0,
-        diffEndY: i.endY ? i.endY - t.y : 0
-      })), t.source = this.selectedGroup, this.selectedGroup.length > 1) {
-        const i = this.copy(this.selectedGroup).map((o) => o.oldId);
-        this.shapes = this.shapes.filter((o) => !i.includes(o.id)), this.selectedGroup.forEach((o) => {
-          switch (!0) {
-            case o.type === "circle":
-              t.content += `
-                <circle
-                id="${o.id}"
-                cx="${o.x}"
-                cy="${o.y}"
-                r="${o.circleRadius ? o.circleRadius : Number.MIN_VALUE}"
-                fill="${o.isFilled ? o.color + o.alpha : "rgba(255,255,255,0.001)"}"
-                stroke="${o.color + o.alpha}" 
-                                stroke-width="${o.strokeWidth}"
-                                style="${o.isDash ? `stroke-dasharray: ${o.strokeWidth * 3}` : ""}"
-                                />
-            `;
-              break;
-            case o.type === "rect":
-              t.content += `
-                <rect
-                id="${this.isResizeMode ? "" : o.id}"
-                x="${o.x}"
-                y="${o.y}"
-                fill="${o.isFilled ? o.color + o.alpha : "rgba(255,255,255,0.001)"}"
-                height="${o.rectHeight}"
-                width="${o.rectWidth}"
-                stroke="${o.color + o.alpha}"
-                stroke-width="${o.strokeWidth}"
-                style="rx:1 !important; ry:1 !important; ${o.isDash ? `stroke-dasharray: ${o.strokeWidth * 3}` : ""}"
-                            />
-            `;
-              break;
-            case o.type === "arrow":
-              const h = o.strokeWidth > 3 ? 5 : 10, s = o.strokeWidth > 3 ? 2.5 : 5, e = Date.now();
-              t.content += `
-                <g id="${o.id}">
-                <defs>
-                    <marker 
-                    id="${e}" 
-                    markerWidth="${h}" 
-                    markerHeight="${h}" 
-                    refX="0" 
-                    refY="${s}" 
-                    orient="auto"
-                    >
-                    <polygon 
-                    points="0 0,${h} ${s}, 0 ${h}" 
-                    fill="${o.color}"
-                    />
-                    </marker>
-                </defs>
-
-                <path 
-                    style="stroke-linecap: round !important; ${o.isDash ? `stroke-dasharray: ${o.strokeWidth * 3}` : ""}" 
-                    stroke="${o.color}" 
-                    id="${o.id}" 
-                    d="M${o.x},${o.y} ${o.endX},${o.endY}" 
-                    stroke-width="${o.strokeWidth}" 
-                    marker-end="url(#${e})"
-                />
-                </g>
-            `;
-              break;
-            case o.type === "text":
-              const l = o.textContent.split("‎"), b = [];
-              for (let I = 0; I < l.length; I += 1)
-                b.push(`
-                ${o.isBulletTextMode ? `<tspan x="${o.x - o.fontSize}" y="${o.y + o.fontSize * I}" id="${o.id}" font-size="${o.fontSize / 2}">⬤</tspan>` : ""}
-                <tspan id="${o.id}" x="${o.x}" y="${o.y + o.fontSize * I}">
-                    ${l[I]}
-                </tspan>`);
-              t.content += `
-                ${this.computeTextElement(o, b, o.isBulletTextMode)}
-                `;
-              break;
-          }
-        });
-      } else
-        this.shapes = this.shapes.filter((i) => i.id !== t.id);
-    },
-    moveGroup(t) {
-      t.content = "", t.x = this.copy(this.pointerPosition.x) - t.rectWidth / 2, t.y = this.copy(this.pointerPosition.y) - t.rectHeight / 2, t.source.forEach((i) => {
-        switch (!0) {
-          case i.type === "circle":
-            t.content += `
-                <circle
-                id="${i.id}"
-                cx="${this.copy(this.pointerPosition.x) + i.diffX - t.rectWidth / 2}"
-                cy="${this.copy(this.pointerPosition.y) + i.diffY - t.rectHeight / 2}"
-                r="${i.circleRadius ? i.circleRadius : Number.MIN_VALUE}"
-                fill="${i.isFilled ? i.color + i.alpha : "rgba(255,255,255,0.001)"}"
-                stroke="${i.color + i.alpha}" 
-                                stroke-width="${i.strokeWidth}"
-                                style="${i.isDash ? `stroke-dasharray: ${i.strokeWidth * 3}` : ""}"
-                                />
-            `;
-            break;
-          case i.type === "rect":
-            t.content += `
-                <rect
-                id="${this.isResizeMode ? "" : i.id}"
-                x="${this.copy(this.pointerPosition.x) + i.diffX - t.rectWidth / 2}"
-                y="${this.copy(this.pointerPosition.y) + i.diffY - t.rectHeight / 2}"
-                fill="${i.isFilled ? i.color + i.alpha : "rgba(255,255,255,0.001)"}"
-                height="${i.rectHeight}"
-                width="${i.rectWidth}"
-                stroke="${i.color + i.alpha}"
-                stroke-width="${i.strokeWidth}"
-                style="rx:1 !important; ry:1 !important; ${i.isDash ? `stroke-dasharray: ${i.strokeWidth * 3}` : ""}"
-                            />
-            `;
-            break;
-          case i.type === "arrow":
-            const o = i.strokeWidth > 3 ? 5 : 10, h = i.strokeWidth > 3 ? 2.5 : 5, s = Date.now();
-            t.content += `
-                <g id="${i.id}">
-                <defs>
-                    <marker 
-                    id="${s}" 
-                    markerWidth="${o}" 
-                    markerHeight="${o}" 
-                    refX="0" 
-                    refY="${h}" 
-                    orient="auto"
-                    >
-                    <polygon 
-                    points="0 0,${o} ${h}, 0 ${o}" 
-                    fill="${i.color}"
-                    />
-                    </marker>
-                </defs>
-
-                <path 
-                    style="stroke-linecap: round !important; ${i.isDash ? `stroke-dasharray: ${i.strokeWidth * 3}` : ""}" 
-                    stroke="${i.color}" 
-                    id="${i.id}" 
-                    d="M${this.copy(this.pointerPosition.x) + i.diffX - t.rectWidth / 2},${this.copy(this.pointerPosition.y) + i.diffY - t.rectHeight / 2} ${this.copy(this.pointerPosition.x) + i.diffEndX - t.rectWidth / 2},${this.copy(this.pointerPosition.y) + i.diffEndY - t.rectHeight / 2}" 
-                    stroke-width="${i.strokeWidth}" 
-                    marker-end="url(#${s})"
-                />
-                </g>
-            `;
-            break;
-          case i.type === "text":
-            const e = i.textContent.split("‎"), l = [];
-            for (let b = 0; b < e.length; b += 1)
-              l.push(`
-                ${i.isBulletTextMode ? `<tspan x="${this.copy(this.pointerPosition.x) + i.diffX - i.fontSize - t.rectWidth / 2}" y="${this.copy(this.pointerPosition.y) + i.diffY + i.fontSize * b - t.rectHeight / 2}" id="${i.id}" font-size="${i.fontSize / 2}">⬤</tspan>` : ""}
-                <tspan id="${i.id}" x="${this.copy(this.pointerPosition.x) + i.diffX - t.rectWidth / 2}" y="${this.copy(this.pointerPosition.y) + i.diffY + i.fontSize * b - t.rectHeight / 2}">
-                    ${e[b]}
-                </tspan>`);
-            t.content += `
-                ${this.computeTextElement(i, l, i.isBulletTextMode)}
-                `;
-            break;
-        }
-      });
-    },
-    chooseAction(t) {
-      switch (t.preventDefault(), this.isMouseDown = !0, !0) {
-        case this.isDrawMode:
-          this.drawDown();
-          break;
-      }
-    },
-    chooseMove(t) {
-      switch (t.preventDefault(), t.target.localName !== "svg" && (this.currentTarget = t.target), !0) {
-        case (this.isMoveMode && this.isMouseDown):
-          this.moveDown();
-          break;
-        case (this.isResizeMode && this.isMouseDown):
-          this.resize();
-          break;
-      }
-    },
-    computeCaretPosition(t) {
-      switch (!0) {
-        case t.textAlign === "middle":
-          return `<path stroke="black" stroke-width="2" d="M${t.x},${t.y - t.fontSize} ${t.x},${t.y - t.fontSize - 15}" /> <path stroke="black" stroke-width="2" d="M${t.x - 3},${t.y - t.fontSize - 5} ${t.x},${t.y - t.fontSize} ${t.x + 3},${t.y - t.fontSize - 5}"/>`;
-        case t.textAlign === "start":
-          const i = t.isBulletTextMode ? t.fontSize : 0;
-          return `<path d="M${t.x - 20 - i},${t.y - t.fontSize / 6} ${t.x - 5 - i},${t.y - t.fontSize / 6}" stroke="black" stroke-width="2" />
-                        <path  d="M${t.x - 10 - i},${t.y - t.fontSize / 3} ${t.x - 5 - i},${t.y - t.fontSize / 6} ${t.x - 10 - i},${t.y}" stroke="black" stroke-width="2">`;
-        case t.textAlign === "end":
-          return `<path d="M${t.x + 20},${t.y - t.fontSize / 6} ${t.x + 5},${t.y - t.fontSize / 6}" stroke="black" stroke-width="2" />
-                        <path d="M${t.x + 10},${t.y - t.fontSize / 3} ${t.x + 5},${t.y - t.fontSize / 6} ${t.x + 10},${t.y}" stroke="black" stroke-width="2">`;
-        default:
-          return "";
-      }
-    },
-    computeTextElement(t, i, o = !1) {
-      switch (!0) {
-        case t.textAlign === "start":
-          return `
-                <g id="${t.id}">
-                    <rect 
-                        id="${t.id}" 
-                        style="display:${this.lastSelectedShape && this.lastSelectedShape.id === t.id ? "initial" : "none"};" 
-                        x="${t.x}" 
-                        y="${t.y - 50}" 
-                        height="${t.lines === 0 || t.lines === 1 ? t.fontSize * 4 : t.fontSize * 2 * t.lines}"
-                        width="100" 
-                        fill="rgba(0,0,0,0)"
-                    />
-                    <text
-                    style="user-select:none; height:100px;"
-                    id="${t.id}"
-                    x="${t.x}"
-                    y="${t.y}"
-                    text-anchor="${t.textAlign}"
-                    font-size="${t.fontSize}"
-                    fill="${t.color}"
-                    font-weight="${t.isBold ? "bold" : "normal"}"
-                    font-style="${t.isItalic ? "italic" : "normal"}"
-                    text-decoration="${t.isUnderline ? "underline" : "none"}"
-                    >
-                        ${i.join("")}
-                    </text>
-                    ${this.showCaret && this.lastSelectedShape && this.lastSelectedShape.id === t.id ? this.computeCaretPosition(t) : ""}
-                    ${this.includeDeleteButton(t, o)}
-                </g> 
-                `;
-        case t.textAlign === "middle":
-          return `
-                    <g id="${t.id}">
-                    <rect 
-                        id="${t.id}" 
-                        style="display:${this.lastSelectedShape && this.lastSelectedShape.id === t.id ? "initial" : "none"};" 
-                        x="${t.x - 50}" 
-                        y="${t.y - 50}" 
-                        height="${t.lines === 0 || t.lines === 1 ? t.fontSize * 4 : t.fontSize * 2 * t.lines}"
-                        width="100" 
-                        fill="rgba(0,0,0,0)"
-                    />
-                    <text
-                    style="user-select:none; height:100px;"
-                    id="${t.id}"
-                    x="${t.x}"
-                    y="${t.y}"
-                    text-anchor="${t.textAlign}"
-                    font-size="${t.fontSize}"
-                    fill="${t.color}"
-                    font-weight="${t.isBold ? "bold" : "normal"}"
-                    font-style="${t.isItalic ? "italic" : "normal"}"
-                    text-decoration="${t.isUnderline ? "underline" : "none"}"
-                    >
-                        ${i.join("")}
-                    </text>
-                    ${this.showCaret && this.lastSelectedShape && this.lastSelectedShape.id === t.id ? this.computeCaretPosition(t) : ""}
-                    ${this.includeDeleteButton(t)}
-                    </g>
-                `;
-        case t.textAlign === "end":
-          return `
-                <g id="${t.id}">
-                    <rect 
-                        id="${t.id}" 
-                        style="display:${this.lastSelectedShape && this.lastSelectedShape.id === t.id ? "initial" : "none"};" 
-                        x="${t.x - 100}" 
-                        y="${t.y - 50}" 
-                        height="${t.lines === 0 || t.lines === 1 ? t.fontSize * 4 : t.fontSize * 2 * t.lines}"
-                        width="100" 
-                        fill="rgba(0,0,0,0)"
-                    />
-                    <text
-                    style="user-select:none; height:100px;"
-                    id="${t.id}"
-                    x="${t.x}"
-                    y="${t.y}"
-                    text-anchor="${t.textAlign}"
-                    font-size="${t.fontSize}"
-                    fill="${t.color}"
-                    font-weight="${t.isBold ? "bold" : "normal"}"
-                    font-style="${t.isItalic ? "italic" : "normal"}"
-                    text-decoration="${t.isUnderline ? "underline" : "none"}"
-                    >
-                        ${i.join("")}
-                    </text>
-                    ${this.showCaret && this.lastSelectedShape && this.lastSelectedShape.id === t.id ? this.computeCaretPosition(t) : ""}
-                    ${this.includeDeleteButton(t)}
-                </g> 
-                `;
-        default:
-          return "";
-      }
-    },
-    copy(t) {
-      return JSON.parse(JSON.stringify(t));
-    },
-    clickShape(t) {
-      const i = t.target.id;
-      switch (!0) {
-        case this.isDeleteMode:
-          this.shapes = [...this.shapes].filter((o) => o.id !== i), this.lastSelectedShape = void 0;
-          break;
-        default:
-          this.lastSelectedShape = this.shapes.find((o) => o.id === i);
-          break;
-      }
-    },
-    deleteEmptyTextElement() {
-      !this.lastSelectedShape || !this.lastSelectedShape.id.includes("text") || this.lastSelectedShape.textContent === "" && (this.shapes = this.shapes.filter(
-        (t) => t.id !== this.lastSelectedShape.id
-      ), this.lastSelectedShape = this.shapes.at(-1));
-    },
-    drawUp(t = !1) {
-      if (!this.activeShape || !this.isDrawing)
-        return;
-      this.currentPointer.end = {
-        x: this.pointerPosition.x,
-        y: this.pointerPosition.y
-      };
-      let i;
-      this.shapes.length > 0 && this.currentTarget && (i = [...this.shapes].find(
-        (b) => b.id === this.currentTarget.id
-      ));
-      let o, h, s;
-      i && (o = i.x - this.currentPointer.end.x, h = i.y - this.currentPointer.end.y, s = Math.sqrt(o * o + h * h));
-      let e, l;
-      t ? (e = Math.max(this.currentPointer.end.x, i.x), l = Math.min(this.currentPointer.end.x, i.x), Math.max(this.currentPointer.end.y, i.y), Math.min(this.currentPointer.end.y, i.y)) : (e = Math.max(this.currentPointer.end.x, this.currentPointer.start.x), l = 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)), this.$nextTick(() => {
-        switch (!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 b = 20;
-            this.shapes.at(-1).circleRadius = this.isDrawingNewShape ? this.copy(e - l) + b : s + b;
-            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 t = `${this.isSelectMode ? "group" : this.activeShape}_${Math.random() * 1e4}_${Date.now()}`;
-      switch (!0) {
-        case this.activeShape === "arrow":
-          this.shapes.push({
-            id: t,
-            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: t,
-            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: t,
-            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: t,
-            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;
-      }
-      if ((this.pointerDownId !== -1 || !this.isDrawing) && (clearInterval(this.pointerDownId), this.pointerDownId = -1), this.pointerDownId === -1 && this.isDrawing) {
-        this.pointerDownId = setInterval(this.drawUp, 1);
-        return;
-      }
-    },
-    move(t) {
-      if (!(!t || !t.id || t.type === "line"))
-        switch (this.lastSelectedShape = t, !0) {
-          case t.type === "arrow":
-            t.x = this.copy(this.pointerPosition.x), t.y = this.copy(this.pointerPosition.y);
-            break;
-          case t.type === "circle":
-            t.x = this.copy(this.pointerPosition.x), t.y = this.copy(this.pointerPosition.y);
-            break;
-          case t.type === "group":
-            this.moveGroup(t);
-            break;
-          case t.type === "rect":
-            t.x = this.copy(this.pointerPosition.x - t.rectWidth / 2), t.y = this.copy(this.pointerPosition.y - t.rectHeight / 2);
-            break;
-          case t.type === "text":
-            const i = Array.from(document.getElementsByTagName("text")).find(
-              (l) => l.id === t.id
-            );
-            if (!i)
-              return;
-            const { x: o, y: h, width: s, height: e } = i.getBBox();
-            t.textAlign === "start" && (t.x = this.copy(this.pointerPosition.x - s / 2)), t.textAlign === "middle" && (t.x = this.copy(this.pointerPosition.x)), t.textAlign === "end" && (t.x = this.copy(this.pointerPosition.x + s / 2)), t.lines > 1 ? t.y = this.copy(this.pointerPosition.y - e / 3) : t.y = this.copy(this.pointerPosition.y + t.fontSize / 2);
-            break;
-        }
-    },
-    moveDown() {
-      if (!this.currentTarget || !this.currentTarget.id)
-        return;
-      const t = this.currentTarget.id, i = this.shapes.find((o) => o.id === t);
-      this.shapes = this.shapes.filter((o) => o.id !== t), this.shapes.push(i), this.pointerDownId === -1 && t && this.move(i);
-    },
-    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 t = this.$refs.drawSvgContainer;
-        this.walkTheDOM(t, (i) => {
-          i && i.nodeType === 1 && (i.setAttribute("font-family", "Helvetica"), i.style.fontFamily = "Helvetica");
-        });
-        try {
-          let i;
-          try {
-            i = (await import("jspdf")).default;
-          } catch {
-            throw new Error("jspdf is not installed. Run npm install jspdf");
-          }
-          const o = await M({
-            container: t,
-            scale: 2
-          }), h = new Image();
-          h.src = o, h.onload = () => {
-            const s = {
-              width: 595.28,
-              height: 841.89
-            }, e = h.width, l = h.height, b = e / s.width * s.height, I = s.width, S = I / e * l, f = new i("", "pt", "a4");
-            let k = 0, x = l;
-            if (x < b)
-              f.addImage(o, "PNG", 0, 0, I, S, "", "FAST");
-            else
-              for (; x > 0; )
-                f.addImage(o, "PNG", 0, k, I, S, "", "FAST"), x -= b, k -= s.height, x > 0 && f.addPage();
-            f.save(`${(/* @__PURE__ */ new Date()).toLocaleDateString()}_annotations.pdf`);
-          };
-        } catch (i) {
-          console.error("Error generating image:", i);
-        } finally {
-          this.isPrinting = !1, this.walkTheDOM(t, (i) => {
-            i && i.nodeType === 1 && (i.setAttribute("font-family", this.FINAL_CONFIG.style.fontFamily), i.style.fontFamily = this.FINAL_CONFIG.style.fontFamily);
-          });
-        }
-      });
-    },
-    resetDraw() {
-      this.isDrawing = !1, this.isMouseDown = !1, this.pointerDownId = -1, this.isSelectMode && this.groupShapes(), clearInterval(this.pointerDownId);
-    },
-    resize() {
-      this.isDrawingNewShape = !1;
-      const t = this.currentTarget.id;
-      if (!t)
-        return;
-      this.isDrawing = !0;
-      const i = this.shapes.find((o) => o.id === t);
-      this.activeShape = i.type, this.shapes = this.shapes.filter((o) => o.id !== t), this.shapes.push(i), 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(t) {
-      t.preventDefault();
-      const o = this.$refs.mainSvg.getBoundingClientRect();
-      let h, s;
-      t.touches && t.touches.length > 0 ? (h = t.touches[0].clientX, s = t.touches[0].clientY) : (h = t.clientX, s = t.clientY), this.pointerPosition.x = (h - o.left) / o.width * this.svgWidth, this.pointerPosition.y = (s - o.top) / o.height * this.svgHeight;
-    },
-    setShapeTo(t) {
-      if (this.showCaret = !1, this.deleteEmptyTextElement(), t === 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 = t;
-    },
-    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(t, i) {
-      for (i(t), t = t.firstChild; t; )
-        this.walkTheDOM(t, i), t = t.nextSibling;
-    },
-    save() {
-      this.$emit("saveAnnotations", {
-        shapes: this.shapes,
-        lastSelectedShape: this.lastSelectedShape
-      });
-    }
-  }
-}, T = { class: "vue-ui-annotator" }, R = { "data-dom-to-png-ignore": "" }, D = {
-  class: "tool-selection",
-  style: { "margin-top": "24px" }
-}, z = ["disabled"], H = ["disabled"], W = ["disabled"], P = ["disabled"], B = {
-  style: { width: "80%" },
-  viewBox: "0 0 24 24"
-}, V = ["disabled"], E = {
-  style: { width: "80%" },
-  viewBox: "0 0 24 24"
-}, X = ["disabled"], U = {
-  style: { width: "80%" },
-  viewBox: "0 0 24 24"
-}, Y = ["disabled"], j = ["disabled"], J = {
-  class: "tool-selection",
-  style: { "margin-top": "6px" }
-}, Z = {
-  viewBox: "0 0 12 12",
-  style: { width: "100%" }
-}, q = ["fill"], K = {
-  key: 0,
-  class: "tool-input"
-}, Q = { for: "circleFill" }, $ = ["checked"], tt = {
-  viewBox: "0 0 12 12",
-  style: { width: "100%" }
-}, et = ["fill"], it = {
-  key: 1,
-  class: "tool-input"
-}, st = { for: "rectFill" }, ot = ["checked"], lt = {
-  viewBox: "0 0 24 24",
-  style: { width: "100%" }
-}, rt = ["stroke"], dt = { key: 2 }, nt = { style: { display: "flex", "flex-direction": "column", "align-items": "center", "justify-content": "center" } }, ct = {
-  for: "textFont",
-  style: { "font-size": "0.7em" }
-}, ht = { key: 3 }, at = { style: { display: "flex", "flex-direction": "column", "align-items": "center", "justify-content": "center" } }, ut = {
-  for: "dashStyle",
-  style: { "font-size": "0.7em" }
-}, yt = {
-  viewBox: "0 0 24 24",
-  height: "24",
-  width: "24",
-  style: { "margin-bottom": "-5px", "margin-top": "-10px" }
-}, bt = ["checked"], It = {
-  style: { width: "80%" },
-  viewBox: "0 0 24 24",
-  fill: "currentColor"
-}, Ft = { key: 4 }, Nt = { style: { display: "flex", "flex-direction": "column", "align-items": "center", "justify-content": "center" } }, ft = {
-  for: "textFont",
-  style: { "font-size": "0.7em" }
-}, xt = { key: 5 }, Ct = { key: 6 }, gt = ["disabled"], St = { key: 7 }, kt = ["disabled"], pt = { key: 8 }, vt = { key: 9 }, wt = { key: 10 }, At = { key: 11 }, Mt = {
-  style: { display: "flex", "flex-direction": "column", "align-items": "center", "justify-content": "center" },
-  class: "tooltip"
-}, Ot = { style: { display: "flex", "flex-direction": "column", "align-items": "start", "justify-content": "center" } }, Lt = {
-  for: "colorTransparency",
-  style: { "font-size": "0.7em" }
-}, Gt = {
-  class: "annotator annotator__wrapper",
-  ref: "drawSvgContainer",
-  style: { position: "relative" }
-}, _t = ["viewBox", "width", "height"], mt = ["id", "innerHTML"], Tt = ["height", "viewBox", "width"], Rt = ["cx", "cy"];
-function Dt(t, i, o, h, s, e) {
-  return n(), d("div", T, [
-    r("div", R, [
-      r("details", {
-        class: "vue-ui-annotator-summary",
-        onToggle: i[36] || (i[36] = (...l) => e.toggleSummary && e.toggleSummary(...l)),
-        style: c(`${s.isSummaryOpen ? "padding-bottom: 12px" : ""}; background: ${e.FINAL_CONFIG.style.backgroundColor}; color:${e.FINAL_CONFIG.style.color}; ${e.FINAL_CONFIG.style.fixedTools && s.isSummaryOpen ? "position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 1;" : ""}`)
-      }, [
-        r("summary", null, u(e.FINAL_CONFIG.translations.title), 1),
-        r("div", D, [
-          r("button", {
-            disabled: s.shapes.length === 0,
-            style: c({
-              background: s.isMoveMode ? e.FINAL_CONFIG.style.buttons.controls.selected.backgroundColor : e.FINAL_CONFIG.style.buttons.controls.backgroundColor,
-              border: s.isMoveMode ? e.FINAL_CONFIG.style.buttons.controls.selected.border : e.FINAL_CONFIG.style.buttons.controls.border,
-              color: s.isMoveMode ? e.FINAL_CONFIG.style.buttons.controls.selected.color : e.FINAL_CONFIG.style.buttons.controls.color,
-              borderRadius: `${e.FINAL_CONFIG.style.buttons.borderRadius}px`
-            }),
-            class: y({
-              "button-tool": !0,
-              "button-tool--selected": s.isMoveMode,
-              tooltip: !0
-            }),
-            onClick: i[0] || (i[0] = (l) => {
-              e.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;
-            })
-          }, [
-            i[46] || (i[46] = F('<svg xmlns="http://www.w3.org/2000/svg" width="80%" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" data-v-633bc577><path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-633bc577></path><path d="M18 9l3 3l-3 3" data-v-633bc577></path><path d="M15 12h6" data-v-633bc577></path><path d="M6 9l-3 3l3 3" data-v-633bc577></path><path d="M3 12h6" data-v-633bc577></path><path d="M9 18l3 3l3 -3" data-v-633bc577></path><path d="M12 15v6" data-v-633bc577></path><path d="M15 6l-3 -3l-3 3" data-v-633bc577></path><path d="M12 3v6" data-v-633bc577></path></svg>', 1)),
-            e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
-              key: 0,
-              class: "tooltiptext",
-              style: c({
-                backgroundColor: e.FINAL_CONFIG.style.tooltips.backgroundColor,
-                color: e.FINAL_CONFIG.style.tooltips.color,
-                border: e.FINAL_CONFIG.style.tooltips.border,
-                borderRadius: `${e.FINAL_CONFIG.style.tooltips.borderRadius}px`,
-                boxShadow: e.FINAL_CONFIG.style.tooltips.boxShadow
-              })
-            }, u(e.FINAL_CONFIG.translations.tooltipMove), 5)) : a("", !0)
-          ], 14, z),
-          r("button", {
-            disabled: s.shapes.length === 0 || s.activeShape === "line",
-            style: c({
-              background: s.isResizeMode ? e.FINAL_CONFIG.style.buttons.controls.selected.backgroundColor : e.FINAL_CONFIG.style.buttons.controls.backgroundColor,
-              border: s.isResizeMode ? e.FINAL_CONFIG.style.buttons.controls.selected.border : e.FINAL_CONFIG.style.buttons.controls.border,
-              color: s.isResizeMode ? e.FINAL_CONFIG.style.buttons.controls.selected.color : e.FINAL_CONFIG.style.buttons.controls.color,
-              borderRadius: `${e.FINAL_CONFIG.style.buttons.borderRadius}px`
-            }),
-            class: y({
-              "button-tool": !0,
-              "button-tool--selected": s.isResizeMode,
-              tooltip: !0
-            }),
-            onClick: i[1] || (i[1] = (l) => {
-              e.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;
-            })
-          }, [
-            i[47] || (i[47] = r("svg", {
-              xmlns: "http://www.w3.org/2000/svg",
-              width: "80%",
-              viewBox: "0 0 24 24",
-              "stroke-width": "2",
-              stroke: "currentColor",
-              fill: "none",
-              "stroke-linecap": "round",
-              "stroke-linejoin": "round"
-            }, [
-              r("path", {
-                stroke: "none",
-                d: "M0 0h24v24H0z",
-                fill: "none"
-              }),
-              r("path", { d: "M4 11v8a1 1 0 0 0 1 1h8m-9 -14v-1a1 1 0 0 1 1 -1h1m5 0h2m5 0h1a1 1 0 0 1 1 1v1m0 5v2m0 5v1a1 1 0 0 1 -1 1h-1" }),
-              r("path", { d: "M4 12h7a1 1 0 0 1 1 1v7" })
-            ], -1)),
-            e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
-              key: 0,
-              class: "tooltiptext",
-              style: c({
-                backgroundColor: e.FINAL_CONFIG.style.tooltips.backgroundColor,
-                color: e.FINAL_CONFIG.style.tooltips.color,
-                border: e.FINAL_CONFIG.style.tooltips.border,
-                borderRadius: `${e.FINAL_CONFIG.style.tooltips.borderRadius}px`,
-                boxShadow: e.FINAL_CONFIG.style.tooltips.boxShadow
-              })
-            }, u(e.FINAL_CONFIG.translations.tooltipResize), 5)) : a("", !0)
-          ], 14, H),
-          r("button", {
-            disabled: s.shapes.length === 0,
-            style: c({
-              background: s.isDeleteMode ? e.FINAL_CONFIG.style.buttons.controls.selected.backgroundColor : e.FINAL_CONFIG.style.buttons.controls.backgroundColor,
-              border: s.isDeleteMode ? e.FINAL_CONFIG.style.buttons.controls.selected.border : e.FINAL_CONFIG.style.buttons.controls.border,
-              color: s.isDeleteMode ? e.FINAL_CONFIG.style.buttons.controls.selected.color : e.FINAL_CONFIG.style.buttons.controls.color,
-              borderRadius: `${e.FINAL_CONFIG.style.buttons.borderRadius}px`
-            }),
-            class: y({
-              "button-tool": !0,
-              "button-tool--selected": s.isDeleteMode,
-              tooltip: !0
-            }),
-            onClick: i[2] || (i[2] = (l) => {
-              e.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;
-            })
-          }, [
-            i[48] || (i[48] = F('<svg width="80%" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" data-v-633bc577><path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-633bc577></path><path d="M4 7l16 0" data-v-633bc577></path><path d="M10 11l0 6" data-v-633bc577></path><path d="M14 11l0 6" data-v-633bc577></path><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" data-v-633bc577></path><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" data-v-633bc577></path></svg>', 1)),
-            e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
-              key: 0,
-              class: "tooltiptext",
-              style: c({
-                backgroundColor: e.FINAL_CONFIG.style.tooltips.backgroundColor,
-                color: e.FINAL_CONFIG.style.tooltips.color,
-                border: e.FINAL_CONFIG.style.tooltips.border,
-                borderRadius: `${e.FINAL_CONFIG.style.tooltips.borderRadius}px`,
-                boxShadow: e.FINAL_CONFIG.style.tooltips.boxShadow
-              })
-            }, u(e.FINAL_CONFIG.translations.tooltipDelete), 5)) : a("", !0)
-          ], 14, W),
-          r("button", {
-            disabled: !e.canSelect,
-            style: c({
-              background: s.isSelectMode ? e.FINAL_CONFIG.style.buttons.controls.selected.backgroundColor : e.FINAL_CONFIG.style.buttons.controls.backgroundColor,
-              border: s.isSelectMode ? e.FINAL_CONFIG.style.buttons.controls.selected.border : e.FINAL_CONFIG.style.buttons.controls.border,
-              color: s.isSelectMode ? e.FINAL_CONFIG.style.buttons.controls.selected.color : e.FINAL_CONFIG.style.buttons.controls.color,
-              borderRadius: `${e.FINAL_CONFIG.style.buttons.borderRadius}px`
-            }),
-            class: y({
-              "button-tool": !0,
-              "button-tool--selected": s.isSelectMode,
-              tooltip: !0
-            }),
-            onClick: i[3] || (i[3] = (l) => {
-              e.deleteEmptyTextElement(), e.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;
-            })
-          }, [
-            (n(), d("svg", B, [...i[49] || (i[49] = [
-              r("path", {
-                fill: "currentColor",
-                d: "M1,1V5H2V19H1V23H5V22H19V23H23V19H22V5H23V1H19V2H5V1M5,4H19V5H20V19H19V20H5V19H4V5H5M6,6V14H9V18H18V9H14V6M8,8H12V12H8M14,11H16V16H11V14H14"
-              }, null, -1)
-            ])])),
-            e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
-              key: 0,
-              class: "tooltiptext",
-              style: c({
-                backgroundColor: e.FINAL_CONFIG.style.tooltips.backgroundColor,
-                color: e.FINAL_CONFIG.style.tooltips.color,
-                border: e.FINAL_CONFIG.style.tooltips.border,
-                borderRadius: `${e.FINAL_CONFIG.style.tooltips.borderRadius}px`,
-                boxShadow: e.FINAL_CONFIG.style.tooltips.boxShadow
-              })
-            }, u(e.FINAL_CONFIG.translations.tooltipGroup), 5)) : a("", !0)
-          ], 14, P),
-          r("button", {
-            disabled: s.shapes.length === 0,
-            style: c({
-              background: e.FINAL_CONFIG.style.buttons.controls.backgroundColor,
-              border: e.FINAL_CONFIG.style.buttons.controls.border,
-              color: e.FINAL_CONFIG.style.buttons.controls.color,
-              borderRadius: `${e.FINAL_CONFIG.style.buttons.borderRadius}px`
-            }),
-            class: y({ "button-tool": !0, tooltip: !0 }),
-            onClick: i[4] || (i[4] = (l) => {
-              s.isResizeMode = !1, s.isMoveMode = !0, s.isDeleteMode = !1, s.isDrawMode = !1, s.isSelectMode = !1, s.isTextMode = !1, s.isWriting = !1, s.showCaret = !1, e.bringShapeTo("front");
-            })
-          }, [
-            (n(), d("svg", E, [...i[50] || (i[50] = [
-              r("path", {
-                fill: "currentColor",
-                d: "M2,2H11V6H9V4H4V9H6V11H2V2M22,13V22H13V18H15V20H20V15H18V13H22M8,8H16V16H8V8Z"
-              }, null, -1)
-            ])])),
-            e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
-              key: 0,
-              class: "tooltiptext",
-              style: c({
-                backgroundColor: e.FINAL_CONFIG.style.tooltips.backgroundColor,
-                color: e.FINAL_CONFIG.style.tooltips.color,
-                border: e.FINAL_CONFIG.style.tooltips.border,
-                borderRadius: `${e.FINAL_CONFIG.style.tooltips.borderRadius}px`,
-                boxShadow: e.FINAL_CONFIG.style.tooltips.boxShadow
-              })
-            }, u(e.FINAL_CONFIG.translations.tooltipBringToFront), 5)) : a("", !0)
-          ], 12, V),
-          r("button", {
-            disabled: s.shapes.length === 0,
-            style: c({
-              background: e.FINAL_CONFIG.style.buttons.controls.backgroundColor,
-              border: e.FINAL_CONFIG.style.buttons.controls.border,
-              color: e.FINAL_CONFIG.style.buttons.controls.color,
-              borderRadius: `${e.FINAL_CONFIG.style.buttons.borderRadius}px`
-            }),
-            class: y({ "button-tool": !0, tooltip: !0 }),
-            onClick: i[5] || (i[5] = (l) => {
-              s.isResizeMode = !1, s.isMoveMode = !0, s.isDeleteMode = !1, s.isDrawMode = !1, s.isSelectMode = !1, s.isTextMode = !1, s.isWriting = !1, s.showCaret = !1, e.bringShapeTo("back");
-            })
-          }, [
-            (n(), d("svg", U, [...i[51] || (i[51] = [
-              r("path", {
-                fill: "currentColor",
-                d: "M2,2H11V11H2V2M9,4H4V9H9V4M22,13V22H13V13H22M15,20H20V15H15V20M16,8V11H13V8H16M11,16H8V13H11V16Z"
-              }, null, -1)
-            ])])),
-            e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
-              key: 0,
-              class: "tooltiptext",
-              style: c({
-                backgroundColor: e.FINAL_CONFIG.style.tooltips.backgroundColor,
-                color: e.FINAL_CONFIG.style.tooltips.color,
-                border: e.FINAL_CONFIG.style.tooltips.border,
-                borderRadius: `${e.FINAL_CONFIG.style.tooltips.borderRadius}px`,
-                boxShadow: e.FINAL_CONFIG.style.tooltips.boxShadow
-              })
-            }, u(e.FINAL_CONFIG.translations.tooltipBringToBack), 5)) : a("", !0)
-          ], 12, X),
-          r("button", {
-            disabled: s.shapes.length === 0 || s.activeShape === "line",
-            style: c({
-              background: e.FINAL_CONFIG.style.buttons.controls.backgroundColor,
-              border: e.FINAL_CONFIG.style.buttons.controls.border,
-              color: e.FINAL_CONFIG.style.buttons.controls.color,
-              borderRadius: `${e.FINAL_CONFIG.style.buttons.borderRadius}px`
-            }),
-            class: y({ "button-tool": !0, tooltip: !0 }),
-            onClick: i[6] || (i[6] = (l) => {
-              e.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, e.copyPaste();
-            })
-          }, [
-            i[52] || (i[52] = r("svg", {
-              width: "80%",
-              viewBox: "0 0 24 24",
-              "stroke-width": "2",
-              stroke: "currentColor",
-              fill: "none",
-              "stroke-linecap": "round",
-              "stroke-linejoin": "round"
-            }, [
-              r("path", {
-                stroke: "none",
-                d: "M0 0h24v24H0z",
-                fill: "none"
-              }),
-              r("path", { d: "M7 3m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z" }),
-              r("path", { d: "M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" })
-            ], -1)),
-            e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
-              key: 0,
-              class: "tooltiptext",
-              style: c({
-                backgroundColor: e.FINAL_CONFIG.style.tooltips.backgroundColor,
-                color: e.FINAL_CONFIG.style.tooltips.color,
-                border: e.FINAL_CONFIG.style.tooltips.border,
-                borderRadius: `${e.FINAL_CONFIG.style.tooltips.borderRadius}px`,
-                boxShadow: e.FINAL_CONFIG.style.tooltips.boxShadow
-              })
-            }, u(e.FINAL_CONFIG.translations.tooltipDuplicate), 5)) : a("", !0)
-          ], 12, Y),
-          r("button", {
-            disabled: s.shapes.length === 0,
-            style: c({
-              background: e.FINAL_CONFIG.style.buttons.controls.backgroundColor,
-              border: e.FINAL_CONFIG.style.buttons.controls.border,
-              color: e.FINAL_CONFIG.style.buttons.controls.color,
-              borderRadius: `${e.FINAL_CONFIG.style.buttons.borderRadius}px`
-            }),
-            class: y({ "button-tool": !0, "button-tool--one-shot": !0, tooltip: !0 }),
-            onClick: i[7] || (i[7] = (l) => {
-              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, e.undoLastShape();
-            })
-          }, [
-            i[53] || (i[53] = r("svg", {
-              width: "80%",
-              viewBox: "0 0 24 24",
-              "stroke-width": "2",
-              stroke: "currentColor",
-              fill: "none",
-              "stroke-linecap": "round",
-              "stroke-linejoin": "round"
-            }, [
-              r("path", {
-                stroke: "none",
-                d: "M0 0h24v24H0z",
-                fill: "none"
-              }),
-              r("path", { d: "M9 14l-4 -4l4 -4" }),
-              r("path", { d: "M5 10h11a4 4 0 1 1 0 8h-1" })
-            ], -1)),
-            e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
-              key: 0,
-              class: "tooltiptext",
-              style: c({
-                backgroundColor: e.FINAL_CONFIG.style.tooltips.backgroundColor,
-                color: e.FINAL_CONFIG.style.tooltips.color,
-                border: e.FINAL_CONFIG.style.tooltips.border,
-                borderRadius: `${e.FINAL_CONFIG.style.tooltips.borderRadius}px`,
-                boxShadow: e.FINAL_CONFIG.style.tooltips.boxShadow
-              })
-            }, u(e.FINAL_CONFIG.translations.tooltipUndo), 5)) : a("", !0)
-          ], 12, j),
-          e.FINAL_CONFIG.style.showPrint ? (n(), d("button", {
-            key: 0,
-            style: c({
-              background: e.FINAL_CONFIG.style.buttons.controls.backgroundColor,
-              border: e.FINAL_CONFIG.style.buttons.controls.border,
-              color: e.FINAL_CONFIG.style.buttons.controls.color,
-              borderRadius: `${e.FINAL_CONFIG.style.buttons.borderRadius}px`
-            }),
-            class: y({ "button-tool": !0, tooltip: !0 }),
-            onClick: i[8] || (i[8] = (...l) => e.print && e.print(...l))
-          }, [
-            i[54] || (i[54] = F('<svg width="80%" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" data-v-633bc577><path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-633bc577></path><path d="M17 17h2a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2h-14a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h2" data-v-633bc577></path><path d="M17 9v-4a2 2 0 0 0 -2 -2h-6a2 2 0 0 0 -2 2v4" data-v-633bc577></path><path d="M7 13m0 2a2 2 0 0 1 2 -2h6a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-6a2 2 0 0 1 -2 -2z" data-v-633bc577></path></svg>', 1)),
-            e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
-              key: 0,
-              class: "tooltiptext",
-              style: c({
-                backgroundColor: e.FINAL_CONFIG.style.tooltips.backgroundColor,
-                color: e.FINAL_CONFIG.style.tooltips.color,
-                border: e.FINAL_CONFIG.style.tooltips.border,
-                borderRadius: `${e.FINAL_CONFIG.style.tooltips.borderRadius}px`,
-                boxShadow: e.FINAL_CONFIG.style.tooltips.boxShadow
-              })
-            }, u(e.FINAL_CONFIG.translations.tooltipPdf), 5)) : a("", !0)
-          ], 4)) : a("", !0),
-          e.FINAL_CONFIG.style.showSave ? (n(), d("button", {
-            key: 1,
-            style: c({
-              background: e.FINAL_CONFIG.style.buttons.controls.backgroundColor,
-              border: e.FINAL_CONFIG.style.buttons.controls.border,
-              color: e.FINAL_CONFIG.style.buttons.controls.color,
-              borderRadius: `${e.FINAL_CONFIG.style.buttons.borderRadius}px`
-            }),
-            class: y({ "button-tool": !0, tooltip: !0 }),
-            onClick: i[9] || (i[9] = (...l) => e.save && e.save(...l))
-          }, [
-            i[55] || (i[55] = F('<svg width="100%" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" data-v-633bc577><path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-633bc577></path><path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2" data-v-633bc577></path><path d="M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" data-v-633bc577></path><path d="M14 4l0 4l-6 0l0 -4" data-v-633bc577></path></svg>', 1)),
-            e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
-              key: 0,
-              class: "tooltiptext",
-              style: c({
-                backgroundColor: e.FINAL_CONFIG.style.tooltips.backgroundColor,
-                color: e.FINAL_CONFIG.style.tooltips.color,
-                border: e.FINAL_CONFIG.style.tooltips.border,
-                borderRadius: `${e.FINAL_CONFIG.style.tooltips.borderRadius}px`,
-                boxShadow: e.FINAL_CONFIG.style.tooltips.boxShadow
-              })
-            }, u(e.FINAL_CONFIG.translations.tooltipSave), 5)) : a("", !0)
-          ], 4)) : a("", !0)
-        ]),
-        r("div", J, [
-          r("button", {
-            class: y({
-              "button-tool": !0,
-              "button-tool--selected": s.activeShape === "circle",
-              tooltip: !0
-            }),
-            style: c({
-              background: s.activeShape === "circle" ? e.FINAL_CONFIG.style.buttons.shapes.selected.backgroundColor : e.FINAL_CONFIG.style.buttons.shapes.backgroundColor,
-              border: s.activeShape === "circle" ? e.FINAL_CONFIG.style.buttons.shapes.selected.border : e.FINAL_CONFIG.style.buttons.shapes.border,
-              color: s.activeShape === "circle" ? e.FINAL_CONFIG.style.buttons.shapes.selected.color : e.FINAL_CONFIG.style.buttons.shapes.color,
-              borderRadius: `${e.FINAL_CONFIG.style.buttons.borderRadius}px`
-            }),
-            onClick: i[10] || (i[10] = (l) => {
-              e.setShapeTo("circle"), s.isSelectMode = !1;
-            })
-          }, [
-            (n(), d("svg", Z, [
-              r("circle", {
-                cx: 6,
-                cy: 6,
-                r: "4",
-                fill: s.options.circle.filled ? (s.activeShape === "circle", s.selectedColor + e.colorTransparency) : "none",
-                stroke: "currentColor"
-              }, null, 8, q)
-            ])),
-            e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
-              key: 0,
-              class: "tooltiptext",
-              style: c({
-                backgroundColor: e.FINAL_CONFIG.style.tooltips.backgroundColor,
-                color: e.FINAL_CONFIG.style.tooltips.color,
-                border: e.FINAL_CONFIG.style.tooltips.border,
-                borderRadius: `${e.FINAL_CONFIG.style.tooltips.borderRadius}px`,
-                boxShadow: e.FINAL_CONFIG.style.tooltips.boxShadow
-              })
-            }, u(e.FINAL_CONFIG.translations.tooltipShapeCircle), 5)) : a("", !0)
-          ], 6),
-          s.activeShape === "circle" ? (n(), d("div", K, [
-            r("label", Q, u(e.FINAL_CONFIG.translations.filled), 1),
-            N(r("input", {
-              type: "checkbox",
-              "onUpdate:modelValue": i[11] || (i[11] = (l) => s.options.circle.filled = l),
-              onChange: i[12] || (i[12] = (...l) => e.setFillOfSelectedCircle && e.setFillOfSelectedCircle(...l)),
-              checked: s.options.circle.filled
-            }, null, 40, $), [
-              [g, s.options.circle.filled]
-            ])
-          ])) : a("", !0),
-          r("button", {
-            class: y({
-              "button-tool": !0,
-              "button-tool--selected": s.activeShape === "rect",
-              tooltip: !0
-            }),
-            style: c({
-              background: s.activeShape === "rect" ? e.FINAL_CONFIG.style.buttons.shapes.selected.backgroundColor : e.FINAL_CONFIG.style.buttons.shapes.backgroundColor,
-              border: s.activeShape === "rect" ? e.FINAL_CONFIG.style.buttons.shapes.selected.border : e.FINAL_CONFIG.style.buttons.shapes.border,
-              color: s.activeShape === "rect" ? e.FINAL_CONFIG.style.buttons.shapes.selected.color : e.FINAL_CONFIG.style.buttons.shapes.color,
-              borderRadius: `${e.FINAL_CONFIG.style.buttons.borderRadius}px`
-            }),
-            onClick: i[13] || (i[13] = (l) => {
-              e.setShapeTo("rect"), s.isSelectMode = !1;
-            })
-          }, [
-            (n(), d("svg", tt, [
-              r("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 + e.colorTransparency) : "none",
-                stroke: "currentColor"
-              }, null, 8, et)
-            ])),
-            e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
-              key: 0,
-              class: "tooltiptext",
-              style: c({
-                backgroundColor: e.FINAL_CONFIG.style.tooltips.backgroundColor,
-                color: e.FINAL_CONFIG.style.tooltips.color,
-                border: e.FINAL_CONFIG.style.tooltips.border,
-                borderRadius: `${e.FINAL_CONFIG.style.tooltips.borderRadius}px`,
-                boxShadow: e.FINAL_CONFIG.style.tooltips.boxShadow
-              })
-            }, u(e.FINAL_CONFIG.translations.tooltipShapeRect), 5)) : a("", !0)
-          ], 6),
-          s.activeShape === "rect" ? (n(), d("div", it, [
-            r("label", st, u(e.FINAL_CONFIG.translations.filled), 1),
-            N(r("input", {
-              id: "rectFill",
-              type: "checkbox",
-              "onUpdate:modelValue": i[14] || (i[14] = (l) => s.options.rect.filled = l),
-              onChange: i[15] || (i[15] = (...l) => e.setFillOfSelectedRect && e.setFillOfSelectedRect(...l)),
-              checked: s.options.rect.filled
-            }, null, 40, ot), [
-              [g, s.options.rect.filled]
-            ])
-          ])) : a("", !0),
-          r("button", {
-            class: y({
-              "button-tool": !0,
-              "button-tool--selected": s.activeShape === "arrow",
-              tooltip: !0
-            }),
-            style: c({
-              background: s.activeShape === "arrow" ? e.FINAL_CONFIG.style.buttons.shapes.selected.backgroundColor : e.FINAL_CONFIG.style.buttons.shapes.backgroundColor,
-              border: s.activeShape === "arrow" ? e.FINAL_CONFIG.style.buttons.shapes.selected.border : e.FINAL_CONFIG.style.buttons.shapes.border,
-              color: s.activeShape === "arrow" ? e.FINAL_CONFIG.style.buttons.shapes.selected.color : e.FINAL_CONFIG.style.buttons.shapes.color,
-              borderRadius: `${e.FINAL_CONFIG.style.buttons.borderRadius}px`
-            }),
-            onClick: i[16] || (i[16] = (l) => {
-              e.setShapeTo("arrow"), s.isSelectMode = !1;
-            })
-          }, [
-            (n(), d("svg", lt, [
-              r("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, rt)
-            ])),
-            e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
-              key: 0,
-              class: "tooltiptext",
-              style: c({
-                backgroundColor: e.FINAL_CONFIG.style.tooltips.backgroundColor,
-                color: e.FINAL_CONFIG.style.tooltips.color,
-                border: e.FINAL_CONFIG.style.tooltips.border,
-                borderRadius: `${e.FINAL_CONFIG.style.tooltips.borderRadius}px`,
-                boxShadow: e.FINAL_CONFIG.style.tooltips.boxShadow
-              })
-            }, u(e.FINAL_CONFIG.translations.tooltipShapeArrow), 5)) : a("", !0)
-          ], 6),
-          r("button", {
-            class: y({
-              "button-tool": !0,
-              "button-tool--selected": s.activeShape === "line",
-              tooltip: !0
-            }),
-            style: c({
-              background: s.activeShape === "line" ? e.FINAL_CONFIG.style.buttons.shapes.selected.backgroundColor : e.FINAL_CONFIG.style.buttons.shapes.backgroundColor,
-              border: s.activeShape === "line" ? e.FINAL_CONFIG.style.buttons.shapes.selected.border : e.FINAL_CONFIG.style.buttons.shapes.border,
-              color: s.activeShape === "line" ? e.FINAL_CONFIG.style.buttons.shapes.selected.color : e.FINAL_CONFIG.style.buttons.shapes.color,
-              borderRadius: `${e.FINAL_CONFIG.style.buttons.borderRadius}px`
-            }),
-            onClick: i[17] || (i[17] = (l) => {
-              e.setShapeTo("line"), s.isSelectMode = !1;
-            })
-          }, [
-            i[56] || (i[56] = r("svg", {
-              width: "80%",
-              viewBox: "0 0 24 24",
-              "stroke-width": "2",
-              stroke: "currentColor",
-              fill: "none",
-              "stroke-linecap": "round",
-              "stroke-linejoin": "round"
-            }, [
-              r("path", {
-                stroke: "none",
-                d: "M0 0h24v24H0z",
-                fill: "none"
-              }),
-              r("path", { d: "M3 15c2 3 4 4 7 4s7 -3 7 -7s-3 -7 -6 -7s-5 1.5 -5 4s2 5 6 5s8.408 -2.453 10 -5" })
-            ], -1)),
-            e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
-              key: 0,
-              class: "tooltiptext",
-              style: c({
-                backgroundColor: e.FINAL_CONFIG.style.tooltips.backgroundColor,
-                color: e.FINAL_CONFIG.style.tooltips.color,
-                border: e.FINAL_CONFIG.style.tooltips.border,
-                borderRadius: `${e.FINAL_CONFIG.style.tooltips.borderRadius}px`,
-                boxShadow: e.FINAL_CONFIG.style.tooltips.boxShadow
-              })
-            }, u(e.FINAL_CONFIG.translations.tooltipShapeFreehand), 5)) : a("", !0)
-          ], 6),
-          ["arrow", "circle", "rect", "line"].includes(s.activeShape) ? (n(), d("div", dt, [
-            r("div", nt, [
-              r("label", ct, u(e.FINAL_CONFIG.translations.thickness), 1),
-              N(r("input", {
-                id: "textFont",
-                type: "number",
-                "onUpdate:modelValue": i[18] || (i[18] = (l) => s.strokeSize = l),
-                onInput: i[19] || (i[19] = (...l) => e.setStrokeWidthOfSelectedShape && e.setStrokeWidthOfSelectedShape(...l)),
-                style: { padding: "0 4px", width: "40px", border: "1px solid #dadada", "border-radius": "3px" }
-              }, null, 544), [
-                [C, s.strokeSize]
-              ])
-            ])
-          ])) : a("", !0),
-          ["arrow", "circle", "rect"].includes(s.activeShape) ? (n(), d("div", ht, [
-            r("div", at, [
-              r("label", ut, u(e.FINAL_CONFIG.translations.dashedLines), 1),
-              (n(), d("svg", yt, [...i[57] || (i[57] = [
-                r("line", {
-                  x1: "0",
-                  x2: "24",
-                  y1: "12",
-                  y2: "12",
-                  "stroke-width": "2",
-                  stroke: "black",
-                  "stroke-dasharray": "3"
-                }, null, -1)
-              ])])),
-              N(r("input", {
-                id: "dashStyle",
-                name: "dashStyle",
-                type: "checkbox",
-                "onUpdate:modelValue": i[20] || (i[20] = (l) => s.isDash = l),
-                onChange: i[21] || (i[21] = (...l) => e.setSelectedShapeToDash && e.setSelectedShapeToDash(...l)),
-                checked: s.isDash
-              }, null, 40, bt), [
-                [g, s.isDash]
-              ])
-            ])
-          ])) : a("", !0),
-          r("button", {
-            class: y({
-              "button-tool": !0,
-              "button-tool--selected": s.isTextMode,
-              tooltip: !0
-            }),
-            style: c({
-              background: s.isTextMode ? e.FINAL_CONFIG.style.buttons.shapes.selected.backgroundColor : e.FINAL_CONFIG.style.buttons.shapes.backgroundColor,
-              border: s.isTextMode ? e.FINAL_CONFIG.style.buttons.shapes.selected.border : e.FINAL_CONFIG.style.buttons.shapes.border,
-              color: s.isTextMode ? e.FINAL_CONFIG.style.buttons.shapes.selected.color : e.FINAL_CONFIG.style.buttons.shapes.color,
-              borderRadius: `${e.FINAL_CONFIG.style.buttons.borderRadius}px`
-            }),
-            onClick: i[22] || (i[22] = (l) => {
-              e.deleteEmptyTextElement(), s.isTextMode = !s.isTextMode, s.isDeleteMode = !1, s.isMoveMode = !1, s.isResizeMode = !1, s.isSelectMode = !1, s.isDrawMode = !1, s.activeShape = void 0;
-            })
-          }, [
-            (n(), d("svg", It, [...i[58] || (i[58] = [
-              r("path", { d: "M18.5,4L19.66,8.35L18.7,8.61C18.25,7.74 17.79,6.87 17.26,6.43C16.73,6 16.11,6 15.5,6H13V16.5C13,17 13,17.5 13.33,17.75C13.67,18 14.33,18 15,18V19H9V18C9.67,18 10.33,18 10.67,17.75C11,17.5 11,17 11,16.5V6H8.5C7.89,6 7.27,6 6.74,6.43C6.21,6.87 5.75,7.74 5.3,8.61L4.34,8.35L5.5,4H18.5Z" }, null, -1)
-            ])])),
-            e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
-              key: 0,
-              class: "tooltiptext",
-              style: c({
-                backgroundColor: e.FINAL_CONFIG.style.tooltips.backgroundColor,
-                color: e.FINAL_CONFIG.style.tooltips.color,
-                border: e.FINAL_CONFIG.style.tooltips.border,
-                borderRadius: `${e.FINAL_CONFIG.style.tooltips.borderRadius}px`,
-                boxShadow: e.FINAL_CONFIG.style.tooltips.boxShadow
-              })
-            }, u(e.FINAL_CONFIG.translations.tooltipShapeText), 5)) : a("", !0)
-          ], 6),
-          s.isTextMode ? (n(), d("div", Ft, [
-            r("div", Nt, [
-              r("label", ft, u(e.FINAL_CONFIG.translations.fontSize), 1),
-              N(r("input", {
-                id: "textFont",
-                type: "number",
-                "onUpdate:modelValue": i[23] || (i[23] = (l) => s.textFont = l),
-                onInput: i[24] || (i[24] = (...l) => e.setCurrentStyleOfSelectedText && e.setCurrentStyleOfSelectedText(...l)),
-                style: { padding: "0 4px", width: "40px", border: "1px solid #dadada", "border-radius": "3px" }
-              }, null, 544), [
-                [C, s.textFont]
-              ])
-            ])
-          ])) : a("", !0),
-          s.isTextMode ? (n(), d("div", xt, [
-            r("button", {
-              class: y({
-                "button-tool": !0,
-                "button-tool--selected": s.textAlign === "start",
-                tooltip: !0
-              }),
-              style: c({
-                background: s.textAlign === "start" ? e.FINAL_CONFIG.style.buttons.shapes.selected.backgroundColor : e.FINAL_CONFIG.style.buttons.shapes.backgroundColor,
-                border: s.textAlign === "start" ? e.FINAL_CONFIG.style.buttons.shapes.selected.border : e.FINAL_CONFIG.style.buttons.shapes.border,
-                color: s.textAlign === "start" ? e.FINAL_CONFIG.style.buttons.shapes.selected.color : e.FINAL_CONFIG.style.buttons.shapes.color,
-                borderRadius: `${e.FINAL_CONFIG.style.buttons.borderRadius}px`
-              }),
-              onClick: i[25] || (i[25] = (l) => {
-                s.isDeleteMode = !1, s.isMoveMode = !1, s.isResizeMode = !1, s.isDrawMode = !1, s.isSelectMode = !1, s.activeShape = void 0, s.textAlign = "start", e.setSelectedTextAlignTo("start");
-              })
-            }, [
-              i[59] || (i[59] = F('<svg width="80%" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" data-v-633bc577><path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-633bc577></path><path d="M4 6l16 0" data-v-633bc577></path><path d="M4 12l10 0" data-v-633bc577></path><path d="M4 18l14 0" data-v-633bc577></path></svg>', 1)),
-              e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
-                key: 0,
-                class: "tooltiptext",
-                style: c({
-                  backgroundColor: e.FINAL_CONFIG.style.tooltips.backgroundColor,
-                  color: e.FINAL_CONFIG.style.tooltips.color,
-                  border: e.FINAL_CONFIG.style.tooltips.border,
-                  borderRadius: `${e.FINAL_CONFIG.style.tooltips.borderRadius}px`,
-                  boxShadow: e.FINAL_CONFIG.style.tooltips.boxShadow
-                })
-              }, u(e.FINAL_CONFIG.translations.tooltipShapeTextLeft), 5)) : a("", !0)
-            ], 6)
-          ])) : a("", !0),
-          s.isTextMode ? (n(), d("div", Ct, [
-            r("button", {
-              class: y({
-                "button-tool": !0,
-                "button-tool--selected": s.textAlign === "middle",
-                tooltip: !0
-              }),
-              style: c({
-                background: s.textAlign === "middle" ? e.FINAL_CONFIG.style.buttons.shapes.selected.backgroundColor : e.FINAL_CONFIG.style.buttons.shapes.backgroundColor,
-                border: s.textAlign === "middle" ? e.FINAL_CONFIG.style.buttons.shapes.selected.border : e.FINAL_CONFIG.style.buttons.shapes.border,
-                color: s.textAlign === "middle" ? e.FINAL_CONFIG.style.buttons.shapes.selected.color : e.FINAL_CONFIG.style.buttons.shapes.color,
-                borderRadius: `${e.FINAL_CONFIG.style.buttons.borderRadius}px`
-              }),
-              disabled: s.isBulletTextMode,
-              onClick: i[26] || (i[26] = (l) => {
-                s.isDeleteMode = !1, s.isMoveMode = !1, s.isResizeMode = !1, s.isDrawMode = !1, s.isSelectMode = !1, s.activeShape = void 0, s.textAlign = "middle", e.setSelectedTextAlignTo("middle");
-              })
-            }, [
-              i[60] || (i[60] = F('<svg width="80%" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" data-v-633bc577><path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-633bc577></path><path d="M4 6l16 0" data-v-633bc577></path><path d="M8 12l8 0" data-v-633bc577></path><path d="M6 18l12 0" data-v-633bc577></path></svg>', 1)),
-              e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
-                key: 0,
-                class: "tooltiptext",
-                style: c({
-                  backgroundColor: e.FINAL_CONFIG.style.tooltips.backgroundColor,
-                  color: e.FINAL_CONFIG.style.tooltips.color,
-                  border: e.FINAL_CONFIG.style.tooltips.border,
-                  borderRadius: `${e.FINAL_CONFIG.style.tooltips.borderRadius}px`,
-                  boxShadow: e.FINAL_CONFIG.style.tooltips.boxShadow
-                })
-              }, u(e.FINAL_CONFIG.translations.tooltipShapeTextCenter), 5)) : a("", !0)
-            ], 14, gt)
-          ])) : a("", !0),
-          s.isTextMode ? (n(), d("div", St, [
-            r("button", {
-              class: y({
-                "button-tool": !0,
-                "button-tool--selected": s.textAlign === "end",
-                tooltip: !0
-              }),
-              style: c({
-                background: s.textAlign === "end" ? e.FINAL_CONFIG.style.buttons.shapes.selected.backgroundColor : e.FINAL_CONFIG.style.buttons.shapes.backgroundColor,
-                border: s.textAlign === "end" ? e.FINAL_CONFIG.style.buttons.shapes.selected.border : e.FINAL_CONFIG.style.buttons.shapes.border,
-                color: s.textAlign === "end" ? e.FINAL_CONFIG.style.buttons.shapes.selected.color : e.FINAL_CONFIG.style.buttons.shapes.color,
-                borderRadius: `${e.FINAL_CONFIG.style.buttons.borderRadius}px`
-              }),
-              disabled: s.isBulletTextMode,
-              onClick: i[27] || (i[27] = (l) => {
-                s.isDeleteMode = !1, s.isMoveMode = !1, s.isResizeMode = !1, s.isDrawMode = !1, s.isSelectMode = !1, s.activeShape = void 0, s.textAlign = "end", e.setSelectedTextAlignTo("end");
-              })
-            }, [
-              i[61] || (i[61] = F('<svg width="80%" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" data-v-633bc577><path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-633bc577></path><path d="M4 6l16 0" data-v-633bc577></path><path d="M10 12l10 0" data-v-633bc577></path><path d="M6 18l14 0" data-v-633bc577></path></svg>', 1)),
-              e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
-                key: 0,
-                class: "tooltiptext",
-                style: c({
-                  backgroundColor: e.FINAL_CONFIG.style.tooltips.backgroundColor,
-                  color: e.FINAL_CONFIG.style.tooltips.color,
-                  border: e.FINAL_CONFIG.style.tooltips.border,
-                  borderRadius: `${e.FINAL_CONFIG.style.tooltips.borderRadius}px`,
-                  boxShadow: e.FINAL_CONFIG.style.tooltips.boxShadow
-                })
-              }, u(e.FINAL_CONFIG.translations.tooltipShapeTextRight), 5)) : a("", !0)
-            ], 14, kt)
-          ])) : a("", !0),
-          s.isTextMode ? (n(), d("div", pt, [
-            r("button", {
-              class: y({
-                "button-tool": !0,
-                "button-tool--selected": s.isBulletTextMode,
-                tooltip: !0
-              }),
-              style: c({
-                background: s.isBulletTextMode ? e.FINAL_CONFIG.style.buttons.shapes.selected.backgroundColor : e.FINAL_CONFIG.style.buttons.shapes.backgroundColor,
-                border: s.isBulletTextMode ? e.FINAL_CONFIG.style.buttons.shapes.selected.border : e.FINAL_CONFIG.style.buttons.shapes.border,
-                color: s.isBulletTextMode ? e.FINAL_CONFIG.style.buttons.shapes.selected.color : e.FINAL_CONFIG.style.buttons.shapes.color,
-                borderRadius: `${e.FINAL_CONFIG.style.buttons.borderRadius}px`
-              }),
-              onClick: i[28] || (i[28] = (l) => {
-                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", e.setSelectedTextAlignTo("start"), e.setCurrentStyleOfSelectedText();
-              })
-            }, [
-              i[62] || (i[62] = F('<svg width="100%" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" data-v-633bc577><path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-633bc577></path><path d="M9 6l11 0" data-v-633bc577></path><path d="M9 12l11 0" data-v-633bc577></path><path d="M9 18l11 0" data-v-633bc577></path><path d="M5 6l0 .01" data-v-633bc577></path><path d="M5 12l0 .01" data-v-633bc577></path><path d="M5 18l0 .01" data-v-633bc577></path></svg>', 1)),
-              e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
-                key: 0,
-                class: "tooltiptext",
-                style: c({
-                  backgroundColor: e.FINAL_CONFIG.style.tooltips.backgroundColor,
-                  color: e.FINAL_CONFIG.style.tooltips.color,
-                  border: e.FINAL_CONFIG.style.tooltips.border,
-                  borderRadius: `${e.FINAL_CONFIG.style.tooltips.borderRadius}px`,
-                  boxShadow: e.FINAL_CONFIG.style.tooltips.boxShadow
-                })
-              }, u(e.FINAL_CONFIG.translations.tooltipShapeTextBullet), 5)) : a("", !0)
-            ], 6)
-          ])) : a("", !0),
-          s.isTextMode ? (n(), d("div", vt, [
-            r("button", {
-              class: y({
-                "button-tool": !0,
-                "button-tool--selected": s.isBold,
-                tooltip: !0
-              }),
-              style: c({
-                background: s.isBold ? e.FINAL_CONFIG.style.buttons.shapes.selected.backgroundColor : e.FINAL_CONFIG.style.buttons.shapes.backgroundColor,
-                border: s.isBold ? e.FINAL_CONFIG.style.buttons.shapes.selected.border : e.FINAL_CONFIG.style.buttons.shapes.border,
-                color: s.isBold ? e.FINAL_CONFIG.style.buttons.shapes.selected.color : e.FINAL_CONFIG.style.buttons.shapes.color,
-                borderRadius: `${e.FINAL_CONFIG.style.buttons.borderRadius}px`
-              }),
-              onClick: i[29] || (i[29] = (l) => {
-                s.isDeleteMode = !1, s.isMoveMode = !1, s.isResizeMode = !1, s.isDrawMode = !1, s.isSelectMode = !1, s.activeShape = void 0, s.isBold = !s.isBold, e.setCurrentStyleOfSelectedText();
-              })
-            }, [
-              i[63] || (i[63] = r("svg", {
-                width: "100%",
-                viewBox: "0 0 24 24",
-                "stroke-width": "3",
-                stroke: "currentColor",
-                fill: "none",
-                "stroke-linecap": "round",
-                "stroke-linejoin": "round"
-              }, [
-                r("path", {
-                  stroke: "none",
-                  d: "M0 0h24v24H0z",
-                  fill: "none"
-                }),
-                r("path", { d: "M7 5h6a3.5 3.5 0 0 1 0 7h-6z" }),
-                r("path", { d: "M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7" })
-              ], -1)),
-              e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
-                key: 0,
-                class: "tooltiptext",
-                style: c({
-                  backgroundColor: e.FINAL_CONFIG.style.tooltips.backgroundColor,
-                  color: e.FINAL_CONFIG.style.tooltips.color,
-                  border: e.FINAL_CONFIG.style.tooltips.border,
-                  borderRadius: `${e.FINAL_CONFIG.style.tooltips.borderRadius}px`,
-                  boxShadow: e.FINAL_CONFIG.style.tooltips.boxShadow
-                })
-              }, u(e.FINAL_CONFIG.translations.tooltipShapeTextBold), 5)) : a("", !0)
-            ], 6)
-          ])) : a("", !0),
-          s.isTextMode ? (n(), d("div", wt, [
-            r("button", {
-              class: y({
-                "button-tool": !0,
-                "button-tool--selected": s.isItalic,
-                tooltip: !0
-              }),
-              style: c({
-                background: s.isItalic ? e.FINAL_CONFIG.style.buttons.shapes.selected.backgroundColor : e.FINAL_CONFIG.style.buttons.shapes.backgroundColor,
-                border: s.isItalic ? e.FINAL_CONFIG.style.buttons.shapes.selected.border : e.FINAL_CONFIG.style.buttons.shapes.border,
-                color: s.isItalic ? e.FINAL_CONFIG.style.buttons.shapes.selected.color : e.FINAL_CONFIG.style.buttons.shapes.color,
-                borderRadius: `${e.FINAL_CONFIG.style.buttons.borderRadius}px`
-              }),
-              onClick: i[30] || (i[30] = (l) => {
-                s.isDeleteMode = !1, s.isMoveMode = !1, s.isResizeMode = !1, s.isDrawMode = !1, s.isSelectMode = !1, s.activeShape = void 0, s.isItalic = !s.isItalic, e.setCurrentStyleOfSelectedText();
-              })
-            }, [
-              i[64] || (i[64] = F('<svg width="100%" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" data-v-633bc577><path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-633bc577></path><path d="M11 5l6 0" data-v-633bc577></path><path d="M7 19l6 0" data-v-633bc577></path><path d="M14 5l-4 14" data-v-633bc577></path></svg>', 1)),
-              e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
-                key: 0,
-                class: "tooltiptext",
-                style: c({
-                  backgroundColor: e.FINAL_CONFIG.style.tooltips.backgroundColor,
-                  color: e.FINAL_CONFIG.style.tooltips.color,
-                  border: e.FINAL_CONFIG.style.tooltips.border,
-                  borderRadius: `${e.FINAL_CONFIG.style.tooltips.borderRadius}px`,
-                  boxShadow: e.FINAL_CONFIG.style.tooltips.boxShadow
-                })
-              }, u(e.FINAL_CONFIG.translations.tooltipShapeTextItalic), 5)) : a("", !0)
-            ], 6)
-          ])) : a("", !0),
-          s.isTextMode ? (n(), d("div", At, [
-            r("button", {
-              class: y({
-                "button-tool": !0,
-                "button-tool--selected": s.isUnderline,
-                tooltip: !0
-              }),
-              style: c({
-                background: s.isUnderline ? e.FINAL_CONFIG.style.buttons.shapes.selected.backgroundColor : e.FINAL_CONFIG.style.buttons.shapes.backgroundColor,
-                border: s.isUnderline ? e.FINAL_CONFIG.style.buttons.shapes.selected.border : e.FINAL_CONFIG.style.buttons.shapes.border,
-                color: s.isUnderline ? e.FINAL_CONFIG.style.buttons.shapes.selected.color : e.FINAL_CONFIG.style.buttons.shapes.color,
-                borderRadius: `${e.FINAL_CONFIG.style.buttons.borderRadius}px`
-              }),
-              onClick: i[31] || (i[31] = (l) => {
-                s.isDeleteMode = !1, s.isMoveMode = !1, s.isResizeMode = !1, s.isDrawMode = !1, s.isSelectMode = !1, s.activeShape = void 0, s.isUnderline = !s.isUnderline, e.setCurrentStyleOfSelectedText();
-              })
-            }, [
-              i[65] || (i[65] = r("svg", {
-                width: "100%",
-                viewBox: "0 0 24 24",
-                "stroke-width": "2",
-                stroke: "currentColor",
-                fill: "none",
-                "stroke-linecap": "round",
-                "stroke-linejoin": "round"
-              }, [
-                r("path", {
-                  stroke: "none",
-                  d: "M0 0h24v24H0z",
-                  fill: "none"
-                }),
-                r("path", { d: "M7 5v5a5 5 0 0 0 10 0v-5" }),
-                r("path", { d: "M5 19h14" })
-              ], -1)),
-              e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
-                key: 0,
-                class: "tooltiptext",
-                style: c({
-                  backgroundColor: e.FINAL_CONFIG.style.tooltips.backgroundColor,
-                  color: e.FINAL_CONFIG.style.tooltips.color,
-                  border: e.FINAL_CONFIG.style.tooltips.border,
-                  borderRadius: `${e.FINAL_CONFIG.style.tooltips.borderRadius}px`,
-                  boxShadow: e.FINAL_CONFIG.style.tooltips.boxShadow
-                })
-              }, u(e.FINAL_CONFIG.translations.tooltipShapeTextUnderline), 5)) : a("", !0)
-            ], 6)
-          ])) : a("", !0),
-          r("div", Mt, [
-            N(r("input", {
-              type: "color",
-              id: "colorPicker",
-              name: "colorPicker",
-              "onUpdate:modelValue": i[32] || (i[32] = (l) => s.selectedColor = l),
-              onInput: i[33] || (i[33] = (...l) => e.setColorOfSelectedShape && e.setColorOfSelectedShape(...l)),
-              style: c(`height: 30px; width: 30px; border-radius: ${e.FINAL_CONFIG.style.buttons.borderRadius}px; cursor: pointer`)
-            }, null, 36), [
-              [C, s.selectedColor]
-            ]),
-            e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
-              key: 0,
-              class: "tooltiptext",
-              style: c({
-                backgroundColor: e.FINAL_CONFIG.style.tooltips.backgroundColor,
-                color: e.FINAL_CONFIG.style.tooltips.color,
-                border: e.FINAL_CONFIG.style.tooltips.border,
-                borderRadius: `${e.FINAL_CONFIG.style.tooltips.borderRadius}px`,
-                boxShadow: e.FINAL_CONFIG.style.tooltips.boxShadow
-              })
-            }, u(e.FINAL_CONFIG.translations.tooltipShapeColor), 5)) : a("", !0)
-          ]),
-          r("div", Ot, [
-            r("label", Lt, u(e.FINAL_CONFIG.translations.colorAlpha) + ": " + u(s.transparency > 98 ? 100 : s.transparency) + " % ", 1),
-            N(r("input", {
-              id: "colorTransparency",
-              name: "colorTransparency",
-              type: "range",
-              "onUpdate:modelValue": i[34] || (i[34] = (l) => s.transparency = l),
-              onInput: i[35] || (i[35] = (...l) => e.setTransparencyOfSelectedShape && e.setTransparencyOfSelectedShape(...l)),
-              min: 0,
-              max: 100,
-              style: { width: "100px" }
-            }, null, 544), [
-              [C, s.transparency]
-            ])
-          ])
-        ])
-      ], 36)
-    ]),
-    r("div", Gt, [
-      O(t.$slots, "default", {}, void 0, !0),
-      s.isSummaryOpen ? (n(), d("svg", {
-        id: "annotatorSvg",
-        key: s.step,
-        ref: "mainSvg",
-        class: y({ draw: !0, "draw--free": s.activeShape === "line" }),
-        style: c([`cursor:${e.cursorClass}; font-family: Helvetica; z-index: 100000000;`, { position: "absolute", top: "0", left: "0" }]),
-        viewBox: `0 0 ${s.svgWidth} ${s.svgHeight}`,
-        width: s.sourceWidth,
-        height: s.sourceHeight,
-        onPointerdown: i[38] || (i[38] = (l) => e.chooseAction(l)),
-        onPointerup: i[39] || (i[39] = (...l) => e.resetDraw && e.resetDraw(...l)),
-        onTouchend: i[40] || (i[40] = (...l) => e.resetDraw && e.resetDraw(...l)),
-        onTouchstart: i[41] || (i[41] = (l) => {
-          e.setPointer(l), e.clickSvg(l);
-        }),
-        onPointermove: i[42] || (i[42] = (l) => {
-          e.setPointer(l), e.chooseMove(l);
-        }),
-        onPointerout: i[43] || (i[43] = (l) => {
-          s.preventEdit = !0, s.hoveredShapeId = void 0;
-        }),
-        onPointerover: i[44] || (i[44] = (l) => e.allowEditAndHoverShapes(l)),
-        onClick: i[45] || (i[45] = (l) => e.clickSvg(l))
-      }, [
-        (n(!0), d(L, null, G(e.userShapes, (l, b) => (n(), d("g", {
-          key: `shape_${b}`,
-          id: l.id,
-          innerHTML: l,
-          onClick: i[37] || (i[37] = (I) => {
-            e.clickShape(I), s.isMoveMode = !1;
-          })
-        }, null, 8, mt))), 128))
-      ], 46, _t)) : a("", !0),
-      s.isPrinting ? (n(), d("svg", {
-        key: 1,
-        style: { position: "absolute", top: "0", left: "0" },
-        height: s.sourceHeight,
-        viewBox: `0 0 ${s.svgWidth} ${s.svgHeight}`,
-        width: s.sourceWidth
-      }, [
-        r("circle", {
-          class: "animated-circle-print",
-          cx: s.svgWidth / 2,
-          cy: s.svgHeight / 2,
-          r: "50",
-          stroke: "#6376DD",
-          "stroke-width": "10",
-          fill: "none"
-        }, null, 8, Rt)
-      ], 8, Tt)) : a("", !0)
-    ], 512)
-  ]);
-}
-const Vt = /* @__PURE__ */ _(m, [["render", Dt], ["__scopeId", "data-v-633bc577"]]);
-export {
-  Vt as default
-};