vue-data-ui 2.6.50 → 2.6.52-beta.0

package/dist/{vue-ui-annotator-CSE9-lNO.js → vue-ui-annotator-Bnl6xoGx.js}

@@ -1,7 +1,7 @@
-import k from "./html2canvas.esm-DgdJBc_o.js";
-import { E as p } from "./jspdf.es.min-t_OLULUR.js";
-import { z as v, A, u as w, B as M } from "./index-BdAppyf2.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 C, vModelText as x, renderSlot as O, Fragment as L, renderList as G } from "vue";
+import { z as k, A as p, u as v, B as w } from "./index-DYjLUPYr.js";
+import { d as A } from "./dom-to-png-DFDQ3B5I.js";
+import { E as M } from "./jspdf.es.min-t_OLULUR.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: {
@@ -95,7 +95,7 @@ const m = {
       textAlign: "start",
       textFont: 20,
       transparency: 100,
-      transparencyCodes: M
+      transparencyCodes: w
     };
   },
   watch: {
@@ -107,7 +107,7 @@ const m = {
   },
   computed: {
     FINAL_CONFIG() {
-      const t = w().vue_ui_annotator;
+      const t = v().vue_ui_annotator;
       if (!Object.keys(this.config || {}).length)
         return t;
       const i = this.treeShake({
@@ -300,8 +300,8 @@ const m = {
     });
   },
   methods: {
-    treeShake: A,
-    convertConfigColors: v,
+    treeShake: p,
+    convertConfigColors: k,
     bringShapeTo(t) {
       const i = this.shapes.find(
         (o) => o.id === this.lastSelectedShape.id
@@ -475,18 +475,18 @@ const m = {
                 `;
           case t.type === "text":
             const h = Array.from(document.getElementsByTagName("text")).find(
-              (I) => I.id === t.id
+              (b) => b.id === t.id
             );
             if (!h)
               return;
-            const { x: s, y: e, width: l, height: b } = h.getBBox();
+            const { x: s, y: e, width: l, height: I } = 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}"
+                    height="${I + 40}"
                     width="${l + 40}"
                     fill="transparent"
                     stroke="grey"
@@ -661,15 +661,15 @@ const m = {
             `;
               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]}
+              const l = o.textContent.split("‎"), I = [];
+              for (let b = 0; b < l.length; b += 1)
+                I.push(`
+                ${o.isBulletTextMode ? `<tspan x="${o.x - o.fontSize}" y="${o.y + o.fontSize * b}" id="${o.id}" font-size="${o.fontSize / 2}">⬤</tspan>` : ""}
+                <tspan id="${o.id}" x="${o.x}" y="${o.y + o.fontSize * b}">
+                    ${l[b]}
                 </tspan>`);
               t.content += `
-                ${this.computeTextElement(o, b, o.isBulletTextMode)}
+                ${this.computeTextElement(o, I, o.isBulletTextMode)}
                 `;
               break;
           }
@@ -742,11 +742,11 @@ const m = {
             break;
           case i.type === "text":
             const e = i.textContent.split("‎"), l = [];
-            for (let b = 0; b < e.length; b += 1)
+            for (let I = 0; I < e.length; I += 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]}
+                ${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 * I - 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 * I - t.rectHeight / 2}">
+                    ${e[I]}
                 </tspan>`);
             t.content += `
                 ${this.computeTextElement(i, l, i.isBulletTextMode)}
@@ -911,7 +911,7 @@ const m = {
       };
       let i;
       this.shapes.length > 0 && this.currentTarget && (i = [...this.shapes].find(
-        (b) => b.id === this.currentTarget.id
+        (I) => I.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));
@@ -922,8 +922,8 @@ const m = {
             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;
+            const I = 20;
+            this.shapes.at(-1).circleRadius = this.isDrawingNewShape ? this.copy(e - l) + I : s + I;
             break;
           case this.activeShape === "line":
             this.shapes.at(
@@ -931,8 +931,8 @@ const m = {
             ).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;
+            const b = 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) : b, 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) : b;
         }
       });
     },
@@ -1058,37 +1058,36 @@ const m = {
       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(() => {
-        const t = this.$refs.drawSvgContainer, i = {
-          height: 851.89,
-          width: 595.28
-        };
-        this.walkTheDOM(t, (o) => {
-          o && o.nodeType === 1 && (o.setAttribute("font-family", "Helvetica"), o.style.fontFamily = "Helvetica", o.replaceWith(o));
-        }), k(t).then((o) => {
-          const h = o.width, s = o.height, e = h / i.width * i.height;
-          let l = s, b = 0;
-          const I = i.width, g = 582.28 / h * s, S = o.toDataURL("image/png", 1), f = new p("", "pt", "a4");
-          if (l < e)
-            f.addImage(S, "PNG", 0, 0, I, g, "", "FAST");
-          else
-            for (; l > 0; )
-              f.addImage(
-                S,
-                "PNG",
-                0,
-                b,
-                I,
-                g,
-                "",
-                "FAST"
-              ), l -= e, b -= i.height - 24, l > 0 && f.addPage();
-          f.save(`${(/* @__PURE__ */ new Date()).toLocaleDateString()}_annotations.pdf`);
-        }).finally(() => {
-          this.isPrinting = !1, this.walkTheDOM(t, (o) => {
-            o && o.nodeType === 1 && (o.setAttribute("font-family", this.FINAL_CONFIG.style.fontFamily), o.style.fontFamily = this.FINAL_CONFIG.style.fontFamily, o.replaceWith(o));
-          });
+      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 {
+          const i = await A({
+            container: t,
+            scale: 2
+          }), o = new Image();
+          o.src = i, o.onload = () => {
+            const h = {
+              width: 595.28,
+              height: 841.89
+            }, s = o.width, e = o.height, l = s / h.width * h.height, I = h.width, b = I / s * e, f = new M("", "pt", "a4");
+            let S = 0, x = e;
+            if (x < l)
+              f.addImage(i, "PNG", 0, 0, I, b, "", "FAST");
+            else
+              for (; x > 0; )
+                f.addImage(i, "PNG", 0, S, I, b, "", "FAST"), x -= l, S -= h.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() {
@@ -1151,7 +1150,7 @@ const m = {
       });
     }
   }
-}, T = { class: "vue-ui-annotator" }, R = { "data-html2canvas-ignore": "" }, D = {
+}, 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 = {
@@ -1192,14 +1191,14 @@ const m = {
   height: "24",
   width: "24",
   style: { "margin-bottom": "-5px", "margin-top": "-10px" }
-}, bt = ["checked"], It = {
+}, It = ["checked"], bt = {
   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 }, At = { key: 10 }, wt = { key: 11 }, Mt = {
+}, 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 = {
@@ -1237,7 +1236,7 @@ function Dt(t, i, o, h, s, e) {
               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-14ebd65f><path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-14ebd65f></path><path d="M18 9l3 3l-3 3" data-v-14ebd65f></path><path d="M15 12h6" data-v-14ebd65f></path><path d="M6 9l-3 3l3 3" data-v-14ebd65f></path><path d="M3 12h6" data-v-14ebd65f></path><path d="M9 18l3 3l3 -3" data-v-14ebd65f></path><path d="M12 15v6" data-v-14ebd65f></path><path d="M15 6l-3 -3l-3 3" data-v-14ebd65f></path><path d="M12 3v6" data-v-14ebd65f></path></svg>', 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-1756cea7><path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-1756cea7></path><path d="M18 9l3 3l-3 3" data-v-1756cea7></path><path d="M15 12h6" data-v-1756cea7></path><path d="M6 9l-3 3l3 3" data-v-1756cea7></path><path d="M3 12h6" data-v-1756cea7></path><path d="M9 18l3 3l3 -3" data-v-1756cea7></path><path d="M12 15v6" data-v-1756cea7></path><path d="M15 6l-3 -3l-3 3" data-v-1756cea7></path><path d="M12 3v6" data-v-1756cea7></path></svg>', 1)),
             e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
               key: 0,
               class: "tooltiptext",
@@ -1314,7 +1313,7 @@ function Dt(t, i, o, h, s, e) {
               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-14ebd65f><path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-14ebd65f></path><path d="M4 7l16 0" data-v-14ebd65f></path><path d="M10 11l0 6" data-v-14ebd65f></path><path d="M14 11l0 6" data-v-14ebd65f></path><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" data-v-14ebd65f></path><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" data-v-14ebd65f></path></svg>', 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-1756cea7><path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-1756cea7></path><path d="M4 7l16 0" data-v-1756cea7></path><path d="M10 11l0 6" data-v-1756cea7></path><path d="M14 11l0 6" data-v-1756cea7></path><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" data-v-1756cea7></path><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" data-v-1756cea7></path></svg>', 1)),
             e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
               key: 0,
               class: "tooltiptext",
@@ -1519,7 +1518,7 @@ function Dt(t, i, o, h, s, e) {
             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-14ebd65f><path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-14ebd65f></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-14ebd65f></path><path d="M17 9v-4a2 2 0 0 0 -2 -2h-6a2 2 0 0 0 -2 2v4" data-v-14ebd65f></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-14ebd65f></path></svg>', 1)),
+            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-1756cea7><path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-1756cea7></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-1756cea7></path><path d="M17 9v-4a2 2 0 0 0 -2 -2h-6a2 2 0 0 0 -2 2v4" data-v-1756cea7></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-1756cea7></path></svg>', 1)),
             e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
               key: 0,
               class: "tooltiptext",
@@ -1543,7 +1542,7 @@ function Dt(t, i, o, h, s, e) {
             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-14ebd65f><path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-14ebd65f></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-14ebd65f></path><path d="M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" data-v-14ebd65f></path><path d="M14 4l0 4l-6 0l0 -4" data-v-14ebd65f></path></svg>', 1)),
+            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-1756cea7><path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-1756cea7></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-1756cea7></path><path d="M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" data-v-1756cea7></path><path d="M14 4l0 4l-6 0l0 -4" data-v-1756cea7></path></svg>', 1)),
             e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
               key: 0,
               class: "tooltiptext",
@@ -1603,7 +1602,7 @@ function Dt(t, i, o, h, s, e) {
               onChange: i[12] || (i[12] = (...l) => e.setFillOfSelectedCircle && e.setFillOfSelectedCircle(...l)),
               checked: s.options.circle.filled
             }, null, 40, $), [
-              [C, s.options.circle.filled]
+              [g, s.options.circle.filled]
             ])
           ])) : a("", !0),
           r("button", {
@@ -1654,7 +1653,7 @@ function Dt(t, i, o, h, s, e) {
               onChange: i[15] || (i[15] = (...l) => e.setFillOfSelectedRect && e.setFillOfSelectedRect(...l)),
               checked: s.options.rect.filled
             }, null, 40, ot), [
-              [C, s.options.rect.filled]
+              [g, s.options.rect.filled]
             ])
           ])) : a("", !0),
           r("button", {
@@ -1749,7 +1748,7 @@ function Dt(t, i, o, h, s, e) {
                 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), [
-                [x, s.strokeSize]
+                [C, s.strokeSize]
               ])
             ])
           ])) : a("", !0),
@@ -1774,8 +1773,8 @@ function Dt(t, i, o, h, s, e) {
                 "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), [
-                [C, s.isDash]
+              }, null, 40, It), [
+                [g, s.isDash]
               ])
             ])
           ])) : a("", !0),
@@ -1795,7 +1794,7 @@ function Dt(t, i, o, h, s, e) {
               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] = [
+            (n(), d("svg", bt, 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", {
@@ -1820,7 +1819,7 @@ function Dt(t, i, o, h, s, e) {
                 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), [
-                [x, s.textFont]
+                [C, s.textFont]
               ])
             ])
           ])) : a("", !0),
@@ -1841,7 +1840,7 @@ function Dt(t, i, o, h, s, e) {
                 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-14ebd65f><path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-14ebd65f></path><path d="M4 6l16 0" data-v-14ebd65f></path><path d="M4 12l10 0" data-v-14ebd65f></path><path d="M4 18l14 0" data-v-14ebd65f></path></svg>', 1)),
+              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-1756cea7><path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-1756cea7></path><path d="M4 6l16 0" data-v-1756cea7></path><path d="M4 12l10 0" data-v-1756cea7></path><path d="M4 18l14 0" data-v-1756cea7></path></svg>', 1)),
               e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
                 key: 0,
                 class: "tooltiptext",
@@ -1873,7 +1872,7 @@ function Dt(t, i, o, h, s, e) {
                 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-14ebd65f><path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-14ebd65f></path><path d="M4 6l16 0" data-v-14ebd65f></path><path d="M8 12l8 0" data-v-14ebd65f></path><path d="M6 18l12 0" data-v-14ebd65f></path></svg>', 1)),
+              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-1756cea7><path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-1756cea7></path><path d="M4 6l16 0" data-v-1756cea7></path><path d="M8 12l8 0" data-v-1756cea7></path><path d="M6 18l12 0" data-v-1756cea7></path></svg>', 1)),
               e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
                 key: 0,
                 class: "tooltiptext",
@@ -1905,7 +1904,7 @@ function Dt(t, i, o, h, s, e) {
                 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-14ebd65f><path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-14ebd65f></path><path d="M4 6l16 0" data-v-14ebd65f></path><path d="M10 12l10 0" data-v-14ebd65f></path><path d="M6 18l14 0" data-v-14ebd65f></path></svg>', 1)),
+              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-1756cea7><path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-1756cea7></path><path d="M4 6l16 0" data-v-1756cea7></path><path d="M10 12l10 0" data-v-1756cea7></path><path d="M6 18l14 0" data-v-1756cea7></path></svg>', 1)),
               e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
                 key: 0,
                 class: "tooltiptext",
@@ -1936,7 +1935,7 @@ function Dt(t, i, o, h, s, e) {
                 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-14ebd65f><path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-14ebd65f></path><path d="M9 6l11 0" data-v-14ebd65f></path><path d="M9 12l11 0" data-v-14ebd65f></path><path d="M9 18l11 0" data-v-14ebd65f></path><path d="M5 6l0 .01" data-v-14ebd65f></path><path d="M5 12l0 .01" data-v-14ebd65f></path><path d="M5 18l0 .01" data-v-14ebd65f></path></svg>', 1)),
+              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-1756cea7><path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-1756cea7></path><path d="M9 6l11 0" data-v-1756cea7></path><path d="M9 12l11 0" data-v-1756cea7></path><path d="M9 18l11 0" data-v-1756cea7></path><path d="M5 6l0 .01" data-v-1756cea7></path><path d="M5 12l0 .01" data-v-1756cea7></path><path d="M5 18l0 .01" data-v-1756cea7></path></svg>', 1)),
               e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
                 key: 0,
                 class: "tooltiptext",
@@ -1997,7 +1996,7 @@ function Dt(t, i, o, h, s, e) {
               }, u(e.FINAL_CONFIG.translations.tooltipShapeTextBold), 5)) : a("", !0)
             ], 6)
           ])) : a("", !0),
-          s.isTextMode ? (n(), d("div", At, [
+          s.isTextMode ? (n(), d("div", wt, [
             r("button", {
               class: y({
                 "button-tool": !0,
@@ -2014,7 +2013,7 @@ function Dt(t, i, o, h, s, e) {
                 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-14ebd65f><path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-14ebd65f></path><path d="M11 5l6 0" data-v-14ebd65f></path><path d="M7 19l6 0" data-v-14ebd65f></path><path d="M14 5l-4 14" data-v-14ebd65f></path></svg>', 1)),
+              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-1756cea7><path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-1756cea7></path><path d="M11 5l6 0" data-v-1756cea7></path><path d="M7 19l6 0" data-v-1756cea7></path><path d="M14 5l-4 14" data-v-1756cea7></path></svg>', 1)),
               e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
                 key: 0,
                 class: "tooltiptext",
@@ -2028,7 +2027,7 @@ function Dt(t, i, o, h, s, e) {
               }, u(e.FINAL_CONFIG.translations.tooltipShapeTextItalic), 5)) : a("", !0)
             ], 6)
           ])) : a("", !0),
-          s.isTextMode ? (n(), d("div", wt, [
+          s.isTextMode ? (n(), d("div", At, [
             r("button", {
               class: y({
                 "button-tool": !0,
@@ -2084,7 +2083,7 @@ function Dt(t, i, o, h, s, e) {
               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), [
-              [x, s.selectedColor]
+              [C, s.selectedColor]
             ]),
             e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
               key: 0,
@@ -2110,7 +2109,7 @@ function Dt(t, i, o, h, s, e) {
               max: 100,
               style: { width: "100px" }
             }, null, 544), [
-              [x, s.transparency]
+              [C, s.transparency]
             ])
           ])
         ])
@@ -2142,12 +2141,12 @@ function Dt(t, i, o, h, s, e) {
         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}`,
+        (n(!0), d(L, null, G(e.userShapes, (l, I) => (n(), d("g", {
+          key: `shape_${I}`,
           id: l.id,
           innerHTML: l,
-          onClick: i[37] || (i[37] = (I) => {
-            e.clickShape(I), s.isMoveMode = !1;
+          onClick: i[37] || (i[37] = (b) => {
+            e.clickShape(b), s.isMoveMode = !1;
           })
         }, null, 8, mt))), 128))
       ], 46, _t)) : a("", !0),
@@ -2171,7 +2170,7 @@ function Dt(t, i, o, h, s, e) {
     ], 512)
   ]);
 }
-const Vt = /* @__PURE__ */ _(m, [["render", Dt], ["__scopeId", "data-v-14ebd65f"]]);
+const Vt = /* @__PURE__ */ _(m, [["render", Dt], ["__scopeId", "data-v-1756cea7"]]);
 export {
   Vt as default
 };