jvs-draw 1.0.2 → 1.0.3

package/dist/jvs-draw.es.js

@@ -1,10 +1,10 @@
-import { defineComponent as Qe, computed as U, ref as J, watch as It, resolveComponent as it, createElementBlock as j, openBlock as V, normalizeStyle as Ke, createElementVNode as m, normalizeClass as Xe, Fragment as We, renderList as ut, createBlock as Tt, withCtx as Ae, createCommentVNode as we, toDisplayString as nt, unref as ze, createVNode as ie, nextTick as Rt, withModifiers as Mt, onMounted as nn, onUnmounted as ws, withDirectives as Vs, vModelText as js, mergeModels as Hs, useModel as Ws, createStaticVNode as Us } from "vue";
-import { defineStore as qs } from "pinia";
-import { ElMessageBox as Gs } from "element-plus";
-const Ns = (i, t, e, n, s) => [
+import { markRaw as On, defineComponent as Qe, computed as U, ref as J, watch as It, resolveComponent as it, createElementBlock as j, openBlock as V, normalizeStyle as Ke, createElementVNode as m, normalizeClass as Xe, Fragment as We, renderList as ut, createBlock as Tt, withCtx as Ae, createCommentVNode as we, toDisplayString as nt, unref as ze, createVNode as ie, nextTick as Rt, withModifiers as Mt, onMounted as nn, onUnmounted as bs, withDirectives as js, vModelText as Hs, mergeModels as Ws, useModel as Us, createStaticVNode as qs } from "vue";
+import { defineStore as Gs } from "pinia";
+import { ElMessageBox as Ns } from "element-plus";
+const Ks = (i, t, e, n, s) => [
   (i - e) * Math.cos(s) - (t - n) * Math.sin(s) + e,
   (i - e) * Math.sin(s) + (t - n) * Math.cos(s) + n
-], me = (i, t, e) => Ns(i[0], i[1], t[0], t[1], e), Ks = (i) => {
+], me = (i, t, e) => Ks(i[0], i[1], t[0], t[1], e), Js = (i) => {
   const t = i.x + i.width / 2, e = i.y + i.height / 2, s = [
     [i.x, i.y],
     [i.x + i.width, i.y],
@@ -17,10 +17,10 @@ const Ns = (i, t, e, n, s) => [
     maxX: Math.max(...a),
     maxY: Math.max(...o)
   };
-}, os = (i, t, e, n) => {
+}, as = (i, t, e, n) => {
   const s = e - i, a = n - t;
   return Math.hypot(s, a);
-}, Js = (i, t) => {
+}, Zs = (i, t) => {
   if (i.length < 3)
     return i.length === 2 ? `M ${i[0][0]} ${i[0][1]} L ${i[1][0]} ${i[1][1]}` : "";
   let e = `M ${i[0][0]} ${i[0][1]}`;
@@ -31,7 +31,7 @@ const Ns = (i, t, e, n, s) => [
   const n = i[i.length - 1];
   return e += ` L ${n[0]} ${n[1]}`, e;
 }, _t = (i, t) => {
-  if (i.length < 3) return Js(i, t);
+  if (i.length < 3) return Zs(i, t);
   let e = "";
   const n = i.length;
   for (let s = 0; s < n; s++) {
@@ -53,7 +53,7 @@ const Ns = (i, t, e, n, s) => [
 }, At = (i, t, e, n, s, a, o) => {
   const [l, r] = me([i, t], [e + s / 2, n + a / 2], -o), c = e + s / 2, f = n + a / 2, k = Math.abs(l - c) / (s / 2), d = Math.abs(r - f) / (a / 2);
   return k + d <= 1;
-}, Zs = (i, t, e, n, s, a, o, l = 5) => {
+}, Qs = (i, t, e, n, s, a, o, l = 5) => {
   const [r, c] = me([i, t], [e + s / 2, n + a / 2], -o), f = e + s / 2, k = n + a / 2, d = s / 2, v = a / 2, h = Math.abs(r - f), M = Math.abs(c - k), I = h / d + M / v, T = l / Math.max(d, v);
   return Math.abs(I - 1) <= T;
 }, Dt = (i, t, e, n, s, a) => {
@@ -63,16 +63,16 @@ const Ns = (i, t, e, n, s) => [
     f > t != d > t && i < (k - c) * (t - f) / (d - f) + c && (o = !o);
   }
   return o;
-}, Un = (i, t, e) => {
+}, qn = (i, t, e) => {
   const n = (e[0] - t[0]) ** 2 + (e[1] - t[1]) ** 2;
   if (n === 0) return (i[0] - t[0]) ** 2 + (i[1] - t[1]) ** 2;
   let s = ((i[0] - t[0]) * (e[0] - t[0]) + (i[1] - t[1]) * (e[1] - t[1])) / n;
   return s = Math.max(0, Math.min(1, s)), (i[0] - (t[0] + s * (e[0] - t[0]))) ** 2 + (i[1] - (t[1] + s * (e[1] - t[1]))) ** 2;
-}, as = (i, t, e, n, s, a, o = 5) => {
+}, ls = (i, t, e, n, s, a, o = 5) => {
   const l = o * o;
   for (let r = 0; r < e.length; r++) {
     const c = (r + 1) % e.length, f = [e[r][0] + n, e[r][1] + s], k = [e[c][0] + n, e[c][1] + s];
-    if (Un([i, t], f, k) <= l) return !0;
+    if (qn([i, t], f, k) <= l) return !0;
   }
   return !1;
 }, bt = (i, t) => {
@@ -96,36 +96,36 @@ const Ns = (i, t, e, n, s) => [
   [i, 0],
   [i * 0.75, t],
   [0, t]
-], Qs = (i, t) => [
+], ei = (i, t) => [
   [i / 2, 0],
   [i, t / 2],
   [i / 2, t],
   [0, t / 2]
-], bs = (i) => Math.min(i * 0.15, 20), ls = (i, t, e, n, s, a, o) => {
-  const [l, r] = me([i, t], [e + s / 2, n + a / 2], -o), c = bs(a), f = n + c;
+], Ss = (i) => Math.min(i * 0.15, 20), rs = (i, t, e, n, s, a, o) => {
+  const [l, r] = me([i, t], [e + s / 2, n + a / 2], -o), c = Ss(a), f = n + c;
   if ((l - (e + s / 2)) ** 2 / (s / 2) ** 2 + (r - f) ** 2 / c ** 2 <= 1) return !0;
   const d = n + a - c;
   return (l - (e + s / 2)) ** 2 / (s / 2) ** 2 + (r - d) ** 2 / c ** 2 <= 1 ? !0 : l >= e && l <= e + s && r >= n + c && r <= n + a - c;
-}, ei = (i, t, e, n, s, a, o, l = 5) => {
-  const [r, c] = me([i, t], [e + s / 2, n + a / 2], -o), f = bs(a);
-  if (qn(i, t, e, n, s, f * 2, o, l)) return !0;
+}, ti = (i, t, e, n, s, a, o, l = 5) => {
+  const [r, c] = me([i, t], [e + s / 2, n + a / 2], -o), f = Ss(a);
+  if (Gn(i, t, e, n, s, f * 2, o, l)) return !0;
   const k = n + a - f;
-  if (c >= k && qn(i, t, e, n + a - f * 2, s, f * 2, o, l)) return !0;
+  if (c >= k && Gn(i, t, e, n + a - f * 2, s, f * 2, o, l)) return !0;
   const d = [e, n + f], v = [e, n + a - f], h = [e + s, n + f], M = [e + s, n + a - f];
-  return Un([r, c], d, v) <= l * l || Un([r, c], h, M) <= l * l;
-}, ti = (i, t, e, n, s, a, o, l = 5) => {
+  return qn([r, c], d, v) <= l * l || qn([r, c], h, M) <= l * l;
+}, ni = (i, t, e, n, s, a, o, l = 5) => {
   const [r, c] = me([i, t], [e + s / 2, n + a / 2], -o), f = Math.abs(r - e) <= l, k = Math.abs(r - (e + s)) <= l, d = Math.abs(c - n) <= l, v = Math.abs(c - (n + a)) <= l, h = c >= n - l && c <= n + a + l, M = r >= e - l && r <= e + s + l;
   return (f || k) && h || (d || v) && M;
-}, qn = (i, t, e, n, s, a, o, l = 5) => {
+}, Gn = (i, t, e, n, s, a, o, l = 5) => {
   const [r, c] = me([i, t], [e + s / 2, n + a / 2], -o), f = e + s / 2, k = n + a / 2, d = s / 2, v = a / 2, h = r - f, M = c - k, I = h * h / (d + l) ** 2 + M * M / (v + l) ** 2, T = d - l > 0 && v - l > 0 ? h * h / (d - l) ** 2 + M * M / (v - l) ** 2 : 2;
   return I <= 1 && T >= 1;
-}, ni = (i) => {
+}, si = (i) => {
   if (i.type !== "arrow") return null;
   const t = i.points;
   if (t.length < 2) return null;
   const [e, n] = t[t.length - 2], [s, a] = t[t.length - 1], o = Math.atan2(a - n, s - e), l = 20, r = Math.PI / 6, c = s - l * Math.cos(o - r), f = a - l * Math.sin(o - r), k = s - l * Math.cos(o + r), d = a - l * Math.sin(o + r);
   return [[c, f], [s, a], [k, d]];
-}, rs = (i, t, e, n) => {
+}, cs = (i, t, e, n) => {
   const s = i[0], a = i[1], o = t[0], l = t[1], r = e[0], c = e[1], f = n[0], k = n[1], d = (k - c) * (o - s) - (f - r) * (l - a);
   if (d === 0) return null;
   const v = ((f - r) * (a - c) - (k - c) * (s - r)) / d, h = ((o - s) * (a - c) - (l - a) * (s - r)) / d;
@@ -142,9 +142,9 @@ const Ns = (i, t, e, n, s) => [
     ];
     let M = 1 / 0;
     for (const I of h) {
-      const T = rs(k, d, I[0], I[1]);
+      const T = cs(k, d, I[0], I[1]);
       if (T) {
-        const b = os(k[0], k[1], T[0], T[1]);
+        const b = as(k[0], k[1], T[0], T[1]);
         b < M && (M = b, v = T);
       }
     }
@@ -179,15 +179,15 @@ const Ns = (i, t, e, n, s) => [
     }
     let T = 1 / 0;
     for (const b of I) {
-      const B = rs(k, d, b[0], b[1]);
+      const B = cs(k, d, b[0], b[1]);
       if (B) {
-        const X = os(k[0], k[1], B[0], B[1]);
+        const X = as(k[0], k[1], B[0], B[1]);
         X < T && (T = X, v = B);
       }
     }
   }
   return v ? me(v, [c, f], r) : null;
-}, si = (i, t, e) => {
+}, ii = (i, t, e) => {
   const n = i[0], s = i[1], a = t[0], o = t[1], l = e[0], r = e[1], c = n - a, f = s - o, k = l - a, d = r - o, v = c * k + f * d, h = k * k + d * d;
   let M = -1;
   h !== 0 && (M = v / h);
@@ -196,10 +196,10 @@ const Ns = (i, t, e, n, s) => [
   const b = n - I, B = s - T;
   return Math.sqrt(b * b + B * B);
 };
-let On = null;
+let Ln = null;
 const Ne = (i, t, e, n, s) => {
-  On || (On = document.createElement("canvas"));
-  const a = On.getContext("2d");
+  Ln || (Ln = document.createElement("canvas"));
+  const a = Ln.getContext("2d");
   if (!a) return { width: 10, height: t };
   const o = s?.isItalic ? "italic " : "", l = s?.isBold ? "bold " : "";
   if (a.font = `${o}${l}${t}px ${e}`, n) {
@@ -232,7 +232,7 @@ const Ne = (i, t, e, n, s) => {
       k > c && (c = k);
     }), { width: Math.max(c + 8, 10), height: r.length * (t * 1.25) + 10 };
   }
-}, ii = (i, t = 0.5, e = 10) => {
+}, oi = (i, t = 0.5, e = 10) => {
   if (i.length < 2) return i;
   const n = [], s = (a) => a < 0 ? i[0] : a >= i.length ? i[i.length - 1] : i[a];
   for (let a = 0; a < i.length - 1; a++) {
@@ -248,7 +248,7 @@ const Ne = (i, t, e, n, s) => {
       }
   }
   return n;
-}, oi = (i) => {
+}, ai = (i) => {
   const { x: t, y: e, width: n, height: s, angle: a } = i;
   if (a === 0)
     return {
@@ -271,7 +271,7 @@ const Ne = (i, t, e, n, s) => {
   if (i.length === 0) return null;
   let t = 1 / 0, e = 1 / 0, n = -1 / 0, s = -1 / 0;
   return i.forEach((a) => {
-    const o = oi(a);
+    const o = ai(a);
     t = Math.min(t, o.minX), e = Math.min(e, o.minY), n = Math.max(n, o.maxX), s = Math.max(s, o.maxY);
   }), {
     x: t,
@@ -283,13 +283,13 @@ const Ne = (i, t, e, n, s) => {
     maxX: n,
     maxY: s
   };
-}, Ln = (i, t, e, n, s) => {
+}, Rn = (i, t, e, n, s) => {
   const { x: a, y: o, angle: l, points: r } = n, c = [a + n.width / 2, o + n.height / 2], [f, k] = me([t, e], c, -l), d = f - a, v = k - o;
   if (!r || r.length < 2) return !1;
   let h = r;
   if (n.type === "arrow") {
     if (n.arrowType === "round" && r.length > 2)
-      h = ii(r);
+      h = oi(r);
     else if (n.arrowType === "elbow") {
       let M, I;
       if (s && (n.startBinding || n.endBinding)) {
@@ -307,15 +307,15 @@ const Ne = (i, t, e, n, s) => {
         };
         n.startBinding && (M = T(n.startBinding)), n.endBinding && (I = T(n.endBinding));
       }
-      h = Jn(r, M, I);
+      h = Zn(r, M, I);
     }
   }
   for (let M = 0; M < h.length - 1; M++) {
     const I = h[M], T = h[M + 1];
-    if (si([d, v], I, T) <= i) return !0;
+    if (ii([d, v], I, T) <= i) return !0;
   }
   return !1;
-}, Jn = (i, t, e) => {
+}, Zn = (i, t, e) => {
   if (i.length < 2) return [...i];
   const n = i[0], s = i[i.length - 1], a = 20;
   let o = n, l = s;
@@ -323,8 +323,8 @@ const Ne = (i, t, e, n, s) => {
   t && (o = [n[0] + t[0] * a, n[1] + t[1] * a], r.push(o)), e && (l = [s[0] + e[0] * a, s[1] + e[1] * a]);
   const [c, f] = o, [k, d] = l, v = (c + k) / 2, h = (f + d) / 2, M = Math.abs(k - c), I = Math.abs(d - f);
   return M > I ? (r.push([v, f]), r.push([v, d])) : (r.push([c, h]), r.push([k, h])), e && r.push(l), r.push(s), r;
-}, ai = (i, t = 20, e, n) => {
-  const s = Jn(i, e, n), a = [];
+}, li = (i, t = 20, e, n) => {
+  const s = Zn(i, e, n), a = [];
   s.length > 0 && a.push(s[0]);
   for (let r = 1; r < s.length; r++) {
     const c = a[a.length - 1], f = s[r];
@@ -344,18 +344,18 @@ const Ne = (i, t, e, n, s) => {
   }
   const l = a[a.length - 1];
   return o += ` L ${l[0]} ${l[1]}`, o;
-}, li = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
+}, ri = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
 let St = (i = 21) => {
   let t = "", e = crypto.getRandomValues(new Uint8Array(i |= 0));
   for (; i--; )
-    t += li[e[i] & 63];
+    t += ri[e[i] & 63];
   return t;
 };
-const ot = qs("excalidraw", {
+const ot = Gs("excalidraw", {
   state: () => ({
     // State initialized correctly
     elements: [],
-    history: [[]],
+    history: On([[]]),
     historyStep: 0,
     appState: {
       lockedTool: !1,
@@ -706,7 +706,8 @@ const ot = qs("excalidraw", {
         }
     },
     recordHistory() {
-      this.history = this.history.slice(0, this.historyStep + 1), this.history.push(JSON.parse(JSON.stringify(this.elements))), this.historyStep = this.history.length - 1;
+      const i = this.history.slice(0, this.historyStep + 1);
+      i.length >= 100 && (i.shift(), this.historyStep = i.length - 1), i.push(On(JSON.parse(JSON.stringify(this.elements)))), this.history = On(i), this.historyStep = this.history.length - 1;
     },
     undo() {
       this.historyStep > 0 && (this.historyStep--, this.elements = JSON.parse(JSON.stringify(this.history[this.historyStep])), this.appState.selectedElementIds = {});
@@ -994,7 +995,7 @@ const ot = qs("excalidraw", {
       }
     }
   }
-}), Ss = () => new Promise((i) => {
+}), Is = () => new Promise((i) => {
   const t = document.createElement("input");
   t.type = "file", t.accept = "image/*";
   let e = !1;
@@ -1032,13 +1033,13 @@ const ot = qs("excalidraw", {
     }, 500);
   };
   window.addEventListener("focus", n), t.click();
-}), ri = { class: "tool-group" }, ci = { class: "svg-icon" }, di = ["xlink:href"], ui = ["title"], hi = { class: "svg-icon" }, pi = ["xlink:href"], fi = {
+}), ci = { class: "tool-group" }, di = { class: "svg-icon" }, ui = ["xlink:href"], hi = ["title"], pi = { class: "svg-icon" }, fi = ["xlink:href"], gi = {
   key: 0,
   class: "shortcut"
-}, gi = { class: "sub-tools-container" }, vi = ["onClick"], mi = { class: "svg-icon" }, yi = ["xlink:href"], xi = ["onClick", "title"], ki = { class: "svg-icon" }, wi = ["xlink:href"], bi = {
+}, vi = { class: "sub-tools-container" }, mi = ["onClick"], yi = { class: "svg-icon" }, xi = ["xlink:href"], ki = ["onClick", "title"], wi = { class: "svg-icon" }, bi = ["xlink:href"], Si = {
   key: 0,
   class: "shortcut"
-}, Si = /* @__PURE__ */ Qe({
+}, Ii = /* @__PURE__ */ Qe({
   __name: "Toolbar",
   setup(i) {
     const t = ot(), e = U(() => t.appState.activeTool), n = U(() => t.appState.activeToolType), s = J(!1);
@@ -1081,7 +1082,7 @@ const ot = qs("excalidraw", {
       if (s.value = !1, d === "image") {
         const v = t.appState.activeTool;
         t.setTool("image");
-        const h = await Ss();
+        const h = await Is();
         if (h) {
           const M = window.innerWidth / 2, I = window.innerHeight / 2;
           t.insertImage ? t.insertImage(h.dataURL, M - h.width / 2, I - h.height / 2, h.width, h.height) : (console.error("Store action insertImage not found, reloading might fix this."), location.reload()), t.setTool(v);
@@ -1106,16 +1107,16 @@ const ot = qs("excalidraw", {
         class: "toolbar glass",
         style: Ke({ pointerEvents: r.value ? "none" : "auto" })
       }, [
-        m("div", ri, [
+        m("div", ci, [
           m("div", {
             class: Xe({ "tool-item": !0, active: o.value }),
             onClick: k,
             title: "绘制后保持所选工具状态"
           }, [
-            (V(), j("svg", ci, [
+            (V(), j("svg", di, [
               m("use", {
                 "xlink:href": `${o.value ? "#icon-zujiansuoding" : "#icon-zujianjiesuo"}`
-              }, null, 8, di)
+              }, null, 8, ui)
             ]))
           ], 2),
           (V(), j(We, null, ut(a, (M) => (V(), j(We, {
@@ -1138,27 +1139,27 @@ const ot = qs("excalidraw", {
                   class: Xe({ "tool-item": !0, active: e.value === M.name }),
                   title: M.label
                 }, [
-                  (V(), j("svg", hi, [
+                  (V(), j("svg", pi, [
                     m("use", {
                       "xlink:href": `${e.value === M.name ? M.activeIcon : M.icon}`
-                    }, null, 8, pi)
+                    }, null, 8, fi)
                   ])),
-                  M.key ? (V(), j("span", fi, nt(M.key), 1)) : we("", !0)
-                ], 10, ui)
+                  M.key ? (V(), j("span", gi, nt(M.key), 1)) : we("", !0)
+                ], 10, hi)
               ]),
               default: Ae(() => [
-                m("div", gi, [
+                m("div", vi, [
                   (V(!0), j(We, null, ut(M.subTools, (I) => (V(), j("div", {
                     key: I.name,
                     class: Xe(["sub-tool-item", { active: e.value === M.name && n.value === I.name }]),
                     onClick: (T) => c(I.name, M.name)
                   }, [
-                    (V(), j("svg", mi, [
+                    (V(), j("svg", yi, [
                       m("use", {
                         "xlink:href": `${I.icon}`
-                      }, null, 8, yi)
+                      }, null, 8, xi)
                     ]))
-                  ], 10, vi))), 128))
+                  ], 10, mi))), 128))
                 ])
               ]),
               _: 2
@@ -1169,14 +1170,14 @@ const ot = qs("excalidraw", {
               title: M.label
             }, [
               M.name !== "trand" ? (V(), j(We, { key: 0 }, [
-                (V(), j("svg", ki, [
+                (V(), j("svg", wi, [
                   m("use", {
                     "xlink:href": `${e.value === M.name ? M.activeIcon : M.icon}`
-                  }, null, 8, wi)
+                  }, null, 8, bi)
                 ])),
-                M.key ? (V(), j("span", bi, nt(M.key), 1)) : we("", !0)
+                M.key ? (V(), j("span", Si, nt(M.key), 1)) : we("", !0)
               ], 64)) : we("", !0)
-            ], 10, xi))
+            ], 10, ki))
           ], 64))), 64))
         ])
       ], 4);
@@ -1187,8 +1188,8 @@ const ot = qs("excalidraw", {
   for (const [n, s] of t)
     e[n] = s;
   return e;
-}, Ii = /* @__PURE__ */ st(Si, [["__scopeId", "data-v-b6ea5f5c"]]);
-function cs(i) {
+}, Mi = /* @__PURE__ */ st(Ii, [["__scopeId", "data-v-b6ea5f5c"]]);
+function ds(i) {
   let t;
   if (i > 100 && (i = 100), i < 0 || i > 100)
     throw new Error("Input must be between 0 and 100.");
@@ -1200,7 +1201,7 @@ function pn(i) {
   const t = parseInt(i, 16);
   return isNaN(t) ? 100 : Math.round(t / 255 * 100);
 }
-const Mi = { class: "fill-style-box" }, Ei = ["onClick"], Ci = { class: "svg-icon" }, Ti = ["xlink:href"], Pi = /* @__PURE__ */ Qe({
+const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-icon" }, Pi = ["xlink:href"], Bi = /* @__PURE__ */ Qe({
   __name: "fillStyle",
   setup(i) {
     const t = ot(), e = U(() => {
@@ -1233,21 +1234,21 @@ const Mi = { class: "fill-style-box" }, Ei = ["onClick"], Ci = { class: "svg-ico
     ]), a = (o) => {
       t.updateSelectedElements({ fillStyle: o });
     };
-    return (o, l) => (V(), j("div", Mi, [
+    return (o, l) => (V(), j("div", Ei, [
       (V(!0), j(We, null, ut(s.value, (r, c) => (V(), j("div", {
         key: c,
         class: Xe(["fill-style-item", { active: e.value === r.value }]),
         onClick: (f) => a(r.value)
       }, [
-        (V(), j("svg", Ci, [
+        (V(), j("svg", Ti, [
           m("use", {
             "xlink:href": `#${e.value === r.value ? r.iconActive : r.icon}`
-          }, null, 8, Ti)
+          }, null, 8, Pi)
         ]))
-      ], 10, Ei))), 128))
+      ], 10, Ci))), 128))
     ]));
   }
-}), Is = /* @__PURE__ */ st(Pi, [["__scopeId", "data-v-9356d2e1"]]), Bi = { class: "fill-style-box" }, zi = ["onClick"], $i = { class: "svg-icon" }, _i = ["xlink:href"], Ai = /* @__PURE__ */ Qe({
+}), Ms = /* @__PURE__ */ st(Bi, [["__scopeId", "data-v-9356d2e1"]]), zi = { class: "fill-style-box" }, $i = ["onClick"], _i = { class: "svg-icon" }, Ai = ["xlink:href"], Di = /* @__PURE__ */ Qe({
   __name: "borderStyle",
   setup(i) {
     const t = ot(), e = U(() => {
@@ -1280,21 +1281,21 @@ const Mi = { class: "fill-style-box" }, Ei = ["onClick"], Ci = { class: "svg-ico
     ]), a = (o) => {
       t.updateSelectedElements({ strokeStyle: o });
     };
-    return (o, l) => (V(), j("div", Bi, [
+    return (o, l) => (V(), j("div", zi, [
       (V(!0), j(We, null, ut(s.value, (r, c) => (V(), j("div", {
         key: c,
         class: Xe(["fill-style-item", { active: e.value === r.value }]),
         onClick: (f) => a(r.value)
       }, [
-        (V(), j("svg", $i, [
+        (V(), j("svg", _i, [
           m("use", {
             "xlink:href": `#${e.value === r.value ? r.iconActive : r.icon}`
-          }, null, 8, _i)
+          }, null, 8, Ai)
         ]))
-      ], 10, zi))), 128))
+      ], 10, $i))), 128))
     ]));
   }
-}), Ms = /* @__PURE__ */ st(Ai, [["__scopeId", "data-v-dcf857c8"]]), Di = { class: "fill-style-box" }, Fi = ["onClick"], Oi = { class: "svg-icon" }, Li = ["xlink:href"], Ri = /* @__PURE__ */ Qe({
+}), Es = /* @__PURE__ */ st(Di, [["__scopeId", "data-v-dcf857c8"]]), Fi = { class: "fill-style-box" }, Oi = ["onClick"], Li = { class: "svg-icon" }, Ri = ["xlink:href"], Xi = /* @__PURE__ */ Qe({
   __name: "lineStyle",
   setup(i) {
     const t = ot(), e = U(() => {
@@ -1327,21 +1328,21 @@ const Mi = { class: "fill-style-box" }, Ei = ["onClick"], Ci = { class: "svg-ico
     ]), a = (o) => {
       t.updateSelectedElements({ roughness: o });
     };
-    return (o, l) => (V(), j("div", Di, [
+    return (o, l) => (V(), j("div", Fi, [
       (V(!0), j(We, null, ut(s.value, (r, c) => (V(), j("div", {
         key: c,
         class: Xe(["fill-style-item", { active: e.value === r.value }]),
         onClick: (f) => a(r.value)
       }, [
-        (V(), j("svg", Oi, [
+        (V(), j("svg", Li, [
           m("use", {
             "xlink:href": `#${e.value === r.value ? r.iconActive : r.icon}`
-          }, null, 8, Li)
+          }, null, 8, Ri)
         ]))
-      ], 10, Fi))), 128))
+      ], 10, Oi))), 128))
     ]));
   }
-}), Es = /* @__PURE__ */ st(Ri, [["__scopeId", "data-v-794ba895"]]), Xi = { class: "fill-style-box" }, Yi = ["onClick"], Vi = { class: "svg-icon" }, ji = ["xlink:href"], Hi = /* @__PURE__ */ Qe({
+}), Cs = /* @__PURE__ */ st(Xi, [["__scopeId", "data-v-794ba895"]]), Yi = { class: "fill-style-box" }, Vi = ["onClick"], ji = { class: "svg-icon" }, Hi = ["xlink:href"], Wi = /* @__PURE__ */ Qe({
   __name: "textStyle",
   setup(i) {
     const t = ot(), e = () => {
@@ -1393,21 +1394,21 @@ const Mi = { class: "fill-style-box" }, Ei = ["onClick"], Ci = { class: "svg-ico
         value: "strikethrough"
       }
     ]);
-    return (o, l) => (V(), j("div", Xi, [
+    return (o, l) => (V(), j("div", Yi, [
       (V(!0), j(We, null, ut(a.value, (r, c) => (V(), j("div", {
         key: c,
         class: Xe(["fill-style-item", { active: n(r.value) }]),
         onClick: (f) => s(r.value)
       }, [
-        (V(), j("svg", Vi, [
+        (V(), j("svg", ji, [
           m("use", {
             "xlink:href": `#${n(r.value) ? r.iconActive : r.icon}`
-          }, null, 8, ji)
+          }, null, 8, Hi)
         ]))
-      ], 10, Yi))), 128))
+      ], 10, Vi))), 128))
     ]));
   }
-}), Cs = /* @__PURE__ */ st(Hi, [["__scopeId", "data-v-36600f47"]]), Wi = ["onClick"], Ui = { class: "svg-icon" }, qi = ["xlink:href"], Gi = ["onClick"], Ni = { class: "svg-icon" }, Ki = ["xlink:href"], Ji = /* @__PURE__ */ Qe({
+}), Ts = /* @__PURE__ */ st(Wi, [["__scopeId", "data-v-36600f47"]]), Ui = ["onClick"], qi = { class: "svg-icon" }, Gi = ["xlink:href"], Ni = ["onClick"], Ki = { class: "svg-icon" }, Ji = ["xlink:href"], Zi = /* @__PURE__ */ Qe({
   __name: "alignStyle",
   setup(i) {
     const t = ot(), e = U(() => t.appState.activeTool), n = U(() => Object.keys(t.appState.selectedElementIds)), s = U(() => n.value.length > 0), a = () => {
@@ -1484,26 +1485,26 @@ const Mi = { class: "fill-style-box" }, Ei = ["onClick"], Ci = { class: "svg-ico
         class: Xe(["fill-style-item", { active: l.value === I.value }]),
         onClick: (b) => d(I.value)
       }, [
-        (V(), j("svg", Ui, [
+        (V(), j("svg", qi, [
           m("use", {
             "xlink:href": `#${l.value === I.value ? I.iconActive : I.icon}`
-          }, null, 8, qi)
+          }, null, 8, Gi)
         ]))
-      ], 10, Wi))), 128)),
+      ], 10, Ui))), 128)),
       o.value ? (V(!0), j(We, { key: 0 }, ut(k.value, (I, T) => (V(), j("div", {
         key: T,
         class: Xe(["fill-style-item", { active: r.value === I.value }]),
         onClick: (b) => v(I.value)
       }, [
-        (V(), j("svg", Ni, [
+        (V(), j("svg", Ki, [
           m("use", {
             "xlink:href": `#${r.value === I.value ? I.iconActive : I.icon}`
-          }, null, 8, Ki)
+          }, null, 8, Ji)
         ]))
-      ], 10, Gi))), 128)) : we("", !0)
+      ], 10, Ni))), 128)) : we("", !0)
     ], 2));
   }
-}), Ts = /* @__PURE__ */ st(Ji, [["__scopeId", "data-v-b408686c"]]), Zi = { class: "fill-style-box" }, Qi = ["onClick"], eo = { class: "svg-icon" }, to = ["xlink:href"], no = /* @__PURE__ */ Qe({
+}), Ps = /* @__PURE__ */ st(Zi, [["__scopeId", "data-v-b408686c"]]), Qi = { class: "fill-style-box" }, eo = ["onClick"], to = { class: "svg-icon" }, no = ["xlink:href"], so = /* @__PURE__ */ Qe({
   __name: "arrowStyle",
   setup(i) {
     const t = ot(), e = U(() => {
@@ -1536,51 +1537,51 @@ const Mi = { class: "fill-style-box" }, Ei = ["onClick"], Ci = { class: "svg-ico
     ]), a = (o) => {
       t.updateSelectedElements({ arrowType: o });
     };
-    return (o, l) => (V(), j("div", Zi, [
+    return (o, l) => (V(), j("div", Qi, [
       (V(!0), j(We, null, ut(s.value, (r, c) => (V(), j("div", {
         key: c,
         class: Xe(["fill-style-item", { active: e.value === r.value }]),
         onClick: (f) => a(r.value)
       }, [
-        (V(), j("svg", eo, [
+        (V(), j("svg", to, [
           m("use", {
             "xlink:href": `#${e.value === r.value ? r.iconActive : r.icon}`
-          }, null, 8, to)
+          }, null, 8, no)
         ]))
-      ], 10, Qi))), 128))
+      ], 10, eo))), 128))
     ]));
   }
-}), Ps = /* @__PURE__ */ st(no, [["__scopeId", "data-v-b56fafad"]]), so = { class: "header" }, io = { class: "content" }, oo = { class: "shape-panel-box" }, ao = { class: "input-box" }, lo = { class: "input-box" }, ro = {
+}), Bs = /* @__PURE__ */ st(so, [["__scopeId", "data-v-b56fafad"]]), io = { class: "header" }, oo = { class: "content" }, ao = { class: "shape-panel-box" }, lo = { class: "input-box" }, ro = { class: "input-box" }, co = {
   key: 0,
   class: "input-box"
-}, co = {
+}, uo = {
   key: 1,
   class: "input-box"
-}, uo = {
+}, ho = {
   key: 3,
   class: "btn-box"
-}, ho = { class: "svg-icon" }, po = ["xlink:href"], fo = {
+}, po = { class: "svg-icon" }, fo = ["xlink:href"], go = {
   key: 0,
   class: "roundness-box"
-}, go = { class: "style-item" }, vo = {
+}, vo = { class: "style-item" }, mo = {
   key: 0,
   class: "svg-icon"
-}, mo = { class: "color-text" }, yo = { class: "style-item" }, xo = { class: "style-item" }, ko = { class: "style-item" }, wo = {
+}, yo = { class: "color-text" }, xo = { class: "style-item" }, ko = { class: "style-item" }, wo = { class: "style-item" }, bo = {
   key: 0,
   class: "svg-icon"
-}, bo = { class: "color-text" }, So = { class: "style-item" }, Io = { class: "style-item" }, Mo = {
+}, So = { class: "color-text" }, Io = { class: "style-item" }, Mo = { class: "style-item" }, Eo = {
   key: 0,
   class: "style-item"
-}, Eo = { class: "style-item" }, Co = {
+}, Co = { class: "style-item" }, To = {
   key: 1,
   class: "style-item"
-}, To = { class: "title" }, Po = { class: "style-item" }, Bo = { class: "style-boxs" }, zo = { class: "style-boxs-item" }, $o = { class: "style-boxs-item" }, _o = { class: "style-item" }, Ao = {
+}, Po = { class: "title" }, Bo = { class: "style-item" }, zo = { class: "style-boxs" }, $o = { class: "style-boxs-item" }, _o = { class: "style-boxs-item" }, Ao = { class: "style-item" }, Do = {
   key: 0,
   class: "svg-icon"
-}, Do = { class: "color-text" }, Fo = { class: "style-item" }, Oo = {
+}, Fo = { class: "color-text" }, Oo = { class: "style-item" }, Lo = {
   key: 0,
   class: "svg-icon"
-}, Lo = { class: "color-text" }, Ro = /* @__PURE__ */ Qe({
+}, Ro = { class: "color-text" }, Xo = /* @__PURE__ */ Qe({
   __name: "PropertiesPanel",
   setup(i) {
     const t = ot(), e = J(), n = J(), s = J(), a = J(), o = J(), l = J(), r = J(), c = J(), f = () => {
@@ -1597,7 +1598,7 @@ const Mi = { class: "fill-style-box" }, Ei = ["onClick"], Ci = { class: "svg-ico
         return $ ? $.type : "none";
       }
       return v.value === "shapes" ? t.appState.activeToolType : v.value;
-    }, T = U(() => H.value + cs(N.value)), b = U(() => Ee.value + cs(D.value));
+    }, T = U(() => H.value + ds(N.value)), b = U(() => Ee.value + ds(D.value));
     U(() => Fe.value), U(() => Pe.value);
     const B = U(() => {
       const z = I();
@@ -1900,7 +1901,7 @@ const Mi = { class: "fill-style-box" }, Ei = ["onClick"], Ci = { class: "svg-ico
         class: "properties-panel",
         style: Ke({ pointerEvents: he.value ? "none" : "auto" })
       }, [
-        m("div", so, [
+        m("div", io, [
           $[16] || ($[16] = m("div", null, "形状", -1)),
           (V(), j("svg", { onClick: f }, [...$[15] || ($[15] = [
             m("use", { "xlink:href": "#jvs-public-danchuangguanbi1" }, null, -1)
@@ -1908,12 +1909,12 @@ const Mi = { class: "fill-style-box" }, Ei = ["onClick"], Ci = { class: "svg-ico
         ]),
         ie($n, null, {
           default: Ae(() => [
-            m("div", io, [
-              m("div", oo, [
+            m("div", oo, [
+              m("div", ao, [
                 m("div", {
                   class: Xe(["shape-panel-row", { "not-bind-width-height": q.value || !se.value }])
                 }, [
-                  m("div", ao, [
+                  m("div", lo, [
                     $[17] || ($[17] = m("div", { class: "icon" }, "X", -1)),
                     ie(ge, {
                       modelValue: ne.value,
@@ -1922,7 +1923,7 @@ const Mi = { class: "fill-style-box" }, Ei = ["onClick"], Ci = { class: "svg-ico
                       "controls-position": "right"
                     }, null, 8, ["modelValue"])
                   ]),
-                  m("div", lo, [
+                  m("div", ro, [
                     $[18] || ($[18] = m("div", { class: "icon" }, "Y", -1)),
                     ie(ge, {
                       modelValue: Ue.value,
@@ -1931,7 +1932,7 @@ const Mi = { class: "fill-style-box" }, Ei = ["onClick"], Ci = { class: "svg-ico
                       "controls-position": "right"
                     }, null, 8, ["modelValue"])
                   ]),
-                  q.value ? we("", !0) : (V(), j("div", ro, [
+                  q.value ? we("", !0) : (V(), j("div", co, [
                     $[19] || ($[19] = m("div", { class: "icon" }, "W", -1)),
                     ie(ge, {
                       modelValue: ae.value,
@@ -1940,7 +1941,7 @@ const Mi = { class: "fill-style-box" }, Ei = ["onClick"], Ci = { class: "svg-ico
                       "controls-position": "right"
                     }, null, 8, ["modelValue"])
                   ])),
-                  q.value ? we("", !0) : (V(), j("div", co, [
+                  q.value ? we("", !0) : (V(), j("div", uo, [
                     $[20] || ($[20] = m("div", { class: "icon" }, "H", -1)),
                     ie(ge, {
                       modelValue: et.value,
@@ -1970,7 +1971,7 @@ const Mi = { class: "fill-style-box" }, Ei = ["onClick"], Ci = { class: "svg-ico
                       style: Ke({ left: 32 + Oe.value * 8 + "px" })
                     }, "°", 4)
                   ], 32)) : we("", !0),
-                  le.value ? (V(), j("div", uo, [
+                  le.value ? (V(), j("div", ho, [
                     m("div", {
                       class: Xe(["btn-item", { active: xe.value }]),
                       onClick: de
@@ -1994,14 +1995,14 @@ const Mi = { class: "fill-style-box" }, Ei = ["onClick"], Ci = { class: "svg-ico
                   class: Xe(["bind-box", { active: an.value }]),
                   onClick: vt
                 }, [
-                  (V(), j("svg", ho, [
+                  (V(), j("svg", po, [
                     m("use", {
                       "xlink:href": an.value ? "#icon-suoding1" : "#icon-quxiaosuoding"
-                    }, null, 8, po)
+                    }, null, 8, fo)
                   ]))
                 ], 2))
               ]),
-              se.value ? (V(), j("div", fo, [
+              se.value ? (V(), j("div", go, [
                 $[25] || ($[25] = m("div", {
                   class: "item-label",
                   style: { "padding-right": "8px" }
@@ -2028,7 +2029,7 @@ const Mi = { class: "fill-style-box" }, Ei = ["onClick"], Ci = { class: "svg-ico
                 $[31] || ($[31] = m("div", { class: "type-item-title" }, [
                   m("div", { class: "title" }, "填充")
                 ], -1)),
-                m("div", go, [
+                m("div", vo, [
                   $[27] || ($[27] = m("div", { class: "title" }, "颜色", -1)),
                   ie(re, {
                     color: H.value,
@@ -2047,14 +2048,14 @@ const Mi = { class: "fill-style-box" }, Ei = ["onClick"], Ci = { class: "svg-ico
                         ref: e,
                         onClick: $[7] || ($[7] = (zt) => rn())
                       }, [
-                        H.value == "transparent" || !H.value || N.value == 0 ? (V(), j("svg", vo, [...$[26] || ($[26] = [
+                        H.value == "transparent" || !H.value || N.value == 0 ? (V(), j("svg", mo, [...$[26] || ($[26] = [
                           m("use", { "xlink:href": "#icon-wuyanse" }, null, -1)
                         ])])) : (V(), j("div", {
                           key: 1,
                           class: "color-box",
                           style: Ke({ background: T.value })
                         }, null, 4)),
-                        m("div", mo, nt(H.value != "transparent" ? H.value.substring(
+                        m("div", yo, nt(H.value != "transparent" ? H.value.substring(
                           0,
                           7
                         ).toUpperCase() : H.value), 1)
@@ -2063,7 +2064,7 @@ const Mi = { class: "fill-style-box" }, Ei = ["onClick"], Ci = { class: "svg-ico
                     _: 1
                   }, 8, ["color", "options"])
                 ]),
-                m("div", yo, [
+                m("div", xo, [
                   $[28] || ($[28] = m("div", { class: "title" }, "透明度", -1)),
                   ie(Ce, {
                     modelValue: N.value,
@@ -2074,9 +2075,9 @@ const Mi = { class: "fill-style-box" }, Ei = ["onClick"], Ci = { class: "svg-ico
                     max: 100
                   }, null, 8, ["modelValue"])
                 ]),
-                m("div", xo, [
+                m("div", ko, [
                   $[29] || ($[29] = m("div", { class: "title" }, "填充样式", -1)),
-                  ie(Is, { style: { width: "100%" } })
+                  ie(Ms, { style: { width: "100%" } })
                 ])
               ], 64)) : we("", !0),
               ee.value ? (V(), j(We, { key: 2 }, [
@@ -2084,7 +2085,7 @@ const Mi = { class: "fill-style-box" }, Ei = ["onClick"], Ci = { class: "svg-ico
                 $[39] || ($[39] = m("div", { class: "type-item-title" }, [
                   m("div", { class: "title" }, "描边")
                 ], -1)),
-                m("div", ko, [
+                m("div", wo, [
                   $[33] || ($[33] = m("div", { class: "title" }, "颜色", -1)),
                   ie(re, {
                     color: Ee.value,
@@ -2103,14 +2104,14 @@ const Mi = { class: "fill-style-box" }, Ei = ["onClick"], Ci = { class: "svg-ico
                         ref: s,
                         onClick: $[9] || ($[9] = (zt) => Xt())
                       }, [
-                        Ee.value == "transparent" || !Ee.value || D.value == 0 ? (V(), j("svg", wo, [...$[32] || ($[32] = [
+                        Ee.value == "transparent" || !Ee.value || D.value == 0 ? (V(), j("svg", bo, [...$[32] || ($[32] = [
                           m("use", { "xlink:href": "#icon-wuyanse" }, null, -1)
                         ])])) : (V(), j("div", {
                           key: 1,
                           class: "color-box",
                           style: Ke({ background: b.value })
                         }, null, 4)),
-                        m("div", bo, nt(Ee.value != "transparent" ? Ee.value.substring(
+                        m("div", So, nt(Ee.value != "transparent" ? Ee.value.substring(
                           0,
                           7
                         ).toUpperCase() : Ee.value), 1)
@@ -2119,7 +2120,7 @@ const Mi = { class: "fill-style-box" }, Ei = ["onClick"], Ci = { class: "svg-ico
                     _: 1
                   }, 8, ["color", "options"])
                 ]),
-                m("div", So, [
+                m("div", Io, [
                   $[34] || ($[34] = m("div", { class: "title" }, "粗细", -1)),
                   ie(Ce, {
                     modelValue: te.value,
@@ -2130,7 +2131,7 @@ const Mi = { class: "fill-style-box" }, Ei = ["onClick"], Ci = { class: "svg-ico
                     max: 10
                   }, null, 8, ["modelValue"])
                 ]),
-                m("div", Io, [
+                m("div", Mo, [
                   $[35] || ($[35] = m("div", { class: "title" }, "透明度", -1)),
                   ie(Ce, {
                     modelValue: D.value,
@@ -2141,17 +2142,17 @@ const Mi = { class: "fill-style-box" }, Ei = ["onClick"], Ci = { class: "svg-ico
                     max: 100
                   }, null, 8, ["modelValue"])
                 ]),
-                I() != "freedraw" ? (V(), j("div", Mo, [
+                I() != "freedraw" ? (V(), j("div", Eo, [
                   $[36] || ($[36] = m("div", { class: "title" }, "样式", -1)),
-                  ie(Ms, { style: { width: "100%" } })
+                  ie(Es, { style: { width: "100%" } })
                 ])) : we("", !0),
-                m("div", Eo, [
+                m("div", Co, [
                   $[37] || ($[37] = m("div", { class: "title" }, "风格", -1)),
-                  ie(Es, { style: { width: "100%" } })
+                  ie(Cs, { style: { width: "100%" } })
                 ]),
-                oe.value ? (V(), j("div", Co, [
-                  m("div", To, nt(I() == "arrow" ? "箭头" : "线条") + "类型", 1),
-                  ie(Ps, { style: { width: "100%" } })
+                oe.value ? (V(), j("div", To, [
+                  m("div", Po, nt(I() == "arrow" ? "箭头" : "线条") + "类型", 1),
+                  ie(Bs, { style: { width: "100%" } })
                 ])) : we("", !0)
               ], 64)) : we("", !0),
               X.value ? (V(), j(We, { key: 3 }, [
@@ -2159,10 +2160,10 @@ const Mi = { class: "fill-style-box" }, Ei = ["onClick"], Ci = { class: "svg-ico
                 $[46] || ($[46] = m("div", { class: "type-item-title" }, [
                   m("div", { class: "title" }, "文本设置")
                 ], -1)),
-                m("div", Po, [
+                m("div", Bo, [
                   $[40] || ($[40] = m("div", { class: "title" }, "样式", -1)),
-                  m("div", Bo, [
-                    m("div", zo, [
+                  m("div", zo, [
+                    m("div", $o, [
                       ie(ve, { style: { width: "100%" } }),
                       ie(ve, {
                         style: { width: "100%" },
@@ -2180,15 +2181,15 @@ const Mi = { class: "fill-style-box" }, Ei = ["onClick"], Ci = { class: "svg-ico
                         _: 1
                       }, 8, ["modelValue"])
                     ]),
-                    m("div", $o, [
+                    m("div", _o, [
                       ie(hn),
                       ie(hn)
                     ]),
-                    ie(Cs),
-                    ie(Ts)
+                    ie(Ts),
+                    ie(Ps)
                   ])
                 ]),
-                m("div", _o, [
+                m("div", Ao, [
                   $[42] || ($[42] = m("div", { class: "title" }, "文本颜色", -1)),
                   ie(re, {
                     color: Pe.value,
@@ -2207,14 +2208,14 @@ const Mi = { class: "fill-style-box" }, Ei = ["onClick"], Ci = { class: "svg-ico
                         ref: l,
                         onClick: $[13] || ($[13] = (zt) => Pn())
                       }, [
-                        Pe.value == "transparent" || !Pe.value ? (V(), j("svg", Ao, [...$[41] || ($[41] = [
+                        Pe.value == "transparent" || !Pe.value ? (V(), j("svg", Do, [...$[41] || ($[41] = [
                           m("use", { "xlink:href": "#icon-wuyanse" }, null, -1)
                         ])])) : (V(), j("div", {
                           key: 1,
                           class: "color-box",
                           style: Ke({ background: Pe.value })
                         }, null, 4)),
-                        m("div", Do, nt(Pe.value != "transparent" ? Pe.value.substring(
+                        m("div", Fo, nt(Pe.value != "transparent" ? Pe.value.substring(
                           0,
                           7
                         ).toUpperCase() : Pe.value), 1)
@@ -2223,7 +2224,7 @@ const Mi = { class: "fill-style-box" }, Ei = ["onClick"], Ci = { class: "svg-ico
                     _: 1
                   }, 8, ["color", "options"])
                 ]),
-                m("div", Fo, [
+                m("div", Oo, [
                   $[44] || ($[44] = m("div", { class: "title" }, "文本背景色", -1)),
                   ie(re, {
                     color: Fe.value,
@@ -2242,14 +2243,14 @@ const Mi = { class: "fill-style-box" }, Ei = ["onClick"], Ci = { class: "svg-ico
                         ref: o,
                         onClick: $[14] || ($[14] = (zt) => Tn())
                       }, [
-                        Fe.value == "transparent" || !Fe.value ? (V(), j("svg", Oo, [...$[43] || ($[43] = [
+                        Fe.value == "transparent" || !Fe.value ? (V(), j("svg", Lo, [...$[43] || ($[43] = [
                           m("use", { "xlink:href": "#icon-wuyanse" }, null, -1)
                         ])])) : (V(), j("div", {
                           key: 1,
                           class: "color-box",
                           style: Ke({ background: Fe.value })
                         }, null, 4)),
-                        m("div", Lo, nt(Fe.value != "transparent" ? Fe.value.substring(
+                        m("div", Ro, nt(Fe.value != "transparent" ? Fe.value.substring(
                           0,
                           7
                         ).toUpperCase() : Fe.value), 1)
@@ -2266,8 +2267,8 @@ const Mi = { class: "fill-style-box" }, Ei = ["onClick"], Ci = { class: "svg-ico
       ], 4)) : we("", !0);
     };
   }
-}), Xo = /* @__PURE__ */ st(Ro, [["__scopeId", "data-v-00889af3"]]);
-function Rn(i, t, e) {
+}), Yo = /* @__PURE__ */ st(Xo, [["__scopeId", "data-v-00889af3"]]);
+function Xn(i, t, e) {
   if (i && i.length) {
     const [n, s] = t, a = Math.PI / 180 * e, o = Math.cos(a), l = Math.sin(a);
     for (const r of i) {
@@ -2276,17 +2277,17 @@ function Rn(i, t, e) {
     }
   }
 }
-function Yo(i, t) {
+function Vo(i, t) {
   return i[0] === t[0] && i[1] === t[1];
 }
-function Vo(i, t, e, n = 1) {
+function jo(i, t, e, n = 1) {
   const s = e, a = Math.max(t, 0.1), o = i[0] && i[0][0] && typeof i[0][0] == "number" ? [i] : i, l = [0, 0];
-  if (s) for (const c of o) Rn(c, l, s);
+  if (s) for (const c of o) Xn(c, l, s);
   const r = (function(c, f, k) {
     const d = [];
     for (const b of c) {
       const B = [...b];
-      Yo(B[0], B[B.length - 1]) || B.push([B[0][0], B[0][1]]), B.length > 2 && d.push(B);
+      Vo(B[0], B[B.length - 1]) || B.push([B[0][0], B[0][1]]), B.length > 2 && d.push(B);
     }
     const v = [];
     f = Math.max(f, 0.1);
@@ -2321,10 +2322,10 @@ function Vo(i, t, e, n = 1) {
     return v;
   })(o, a, n);
   if (s) {
-    for (const c of o) Rn(c, l, -s);
+    for (const c of o) Xn(c, l, -s);
     (function(c, f, k) {
       const d = [];
-      c.forEach(((v) => d.push(...v))), Rn(d, f, k);
+      c.forEach(((v) => d.push(...v))), Xn(d, f, k);
     })(r, l, -s);
   }
   return r;
@@ -2335,9 +2336,9 @@ function sn(i, t) {
   let s = t.hachureGap;
   s < 0 && (s = 4 * t.strokeWidth), s = Math.round(Math.max(s, 0.1));
   let a = 1;
-  return t.roughness >= 1 && (((e = t.randomizer) === null || e === void 0 ? void 0 : e.next()) || Math.random()) > 0.7 && (a = s), Vo(i, s, n, a || 1);
+  return t.roughness >= 1 && (((e = t.randomizer) === null || e === void 0 ? void 0 : e.next()) || Math.random()) > 0.7 && (a = s), jo(i, s, n, a || 1);
 }
-class Zn {
+class Qn {
   constructor(t) {
     this.helper = t;
   }
@@ -2358,7 +2359,7 @@ function Sn(i) {
   const t = i[0], e = i[1];
   return Math.sqrt(Math.pow(t[0] - e[0], 2) + Math.pow(t[1] - e[1], 2));
 }
-class jo extends Zn {
+class Ho extends Qn {
   fillPolygons(t, e) {
     let n = e.hachureGap;
     n < 0 && (n = 4 * e.strokeWidth), n = Math.max(n, 0.1);
@@ -2367,13 +2368,13 @@ class jo extends Zn {
     return { type: "fillSketch", ops: this.renderLines(o, e) };
   }
 }
-class Ho extends Zn {
+class Wo extends Qn {
   fillPolygons(t, e) {
     const n = this._fillPolygons(t, e), s = Object.assign({}, e, { hachureAngle: e.hachureAngle + 90 }), a = this._fillPolygons(t, s);
     return n.ops = n.ops.concat(a.ops), n;
   }
 }
-class Wo {
+class Uo {
   constructor(t) {
     this.helper = t;
   }
@@ -2398,7 +2399,7 @@ class Wo {
     return { type: "fillSketch", ops: n };
   }
 }
-class Uo {
+class qo {
   constructor(t) {
     this.helper = t;
   }
@@ -2420,7 +2421,7 @@ class Uo {
     })), a;
   }
 }
-class qo {
+class Go {
   constructor(t) {
     this.helper = t;
   }
@@ -2443,7 +2444,7 @@ class qo {
   }
 }
 const dt = {};
-class Go {
+class No {
   constructor(t) {
     this.seed = t;
   }
@@ -2451,33 +2452,33 @@ class Go {
     return this.seed ? (2 ** 31 - 1 & (this.seed = Math.imul(48271, this.seed))) / 2 ** 31 : Math.random();
   }
 }
-const No = 0, Xn = 1, ds = 2, fn = { A: 7, a: 7, C: 6, c: 6, H: 1, h: 1, L: 2, l: 2, M: 2, m: 2, Q: 4, q: 4, S: 4, s: 4, T: 2, t: 2, V: 1, v: 1, Z: 0, z: 0 };
-function Yn(i, t) {
+const Ko = 0, Yn = 1, us = 2, fn = { A: 7, a: 7, C: 6, c: 6, H: 1, h: 1, L: 2, l: 2, M: 2, m: 2, Q: 4, q: 4, S: 4, s: 4, T: 2, t: 2, V: 1, v: 1, Z: 0, z: 0 };
+function Vn(i, t) {
   return i.type === t;
 }
-function Qn(i) {
+function es(i) {
   const t = [], e = (function(o) {
     const l = new Array();
     for (; o !== ""; ) if (o.match(/^([ \t\r\n,]+)/)) o = o.substr(RegExp.$1.length);
-    else if (o.match(/^([aAcChHlLmMqQsStTvVzZ])/)) l[l.length] = { type: No, text: RegExp.$1 }, o = o.substr(RegExp.$1.length);
+    else if (o.match(/^([aAcChHlLmMqQsStTvVzZ])/)) l[l.length] = { type: Ko, text: RegExp.$1 }, o = o.substr(RegExp.$1.length);
     else {
       if (!o.match(/^(([-+]?[0-9]+(\.[0-9]*)?|[-+]?\.[0-9]+)([eE][-+]?[0-9]+)?)/)) return [];
-      l[l.length] = { type: Xn, text: `${parseFloat(RegExp.$1)}` }, o = o.substr(RegExp.$1.length);
+      l[l.length] = { type: Yn, text: `${parseFloat(RegExp.$1)}` }, o = o.substr(RegExp.$1.length);
     }
-    return l[l.length] = { type: ds, text: "" }, l;
+    return l[l.length] = { type: us, text: "" }, l;
   })(i);
   let n = "BOD", s = 0, a = e[s];
-  for (; !Yn(a, ds); ) {
+  for (; !Vn(a, us); ) {
     let o = 0;
     const l = [];
     if (n === "BOD") {
-      if (a.text !== "M" && a.text !== "m") return Qn("M0,0" + i);
+      if (a.text !== "M" && a.text !== "m") return es("M0,0" + i);
       s++, o = fn[a.text], n = a.text;
-    } else Yn(a, Xn) ? o = fn[n] : (s++, o = fn[a.text], n = a.text);
+    } else Vn(a, Yn) ? o = fn[n] : (s++, o = fn[a.text], n = a.text);
     if (!(s + o < e.length)) throw new Error("Path data ended short");
     for (let r = s; r < s + o; r++) {
       const c = e[r];
-      if (!Yn(c, Xn)) throw new Error("Param not a number: " + n + "," + c.text);
+      if (!Vn(c, Yn)) throw new Error("Param not a number: " + n + "," + c.text);
       l[l.length] = +c.text;
     }
     if (typeof fn[n] != "number") throw new Error("Bad segment: " + n);
@@ -2488,7 +2489,7 @@ function Qn(i) {
   }
   return t;
 }
-function Bs(i) {
+function zs(i) {
   let t = 0, e = 0, n = 0, s = 0;
   const a = [];
   for (const { key: o, data: l } of i) switch (o) {
@@ -2558,7 +2559,7 @@ function Bs(i) {
   }
   return a;
 }
-function zs(i) {
+function $s(i) {
   const t = [];
   let e = "", n = 0, s = 0, a = 0, o = 0, l = 0, r = 0;
   for (const { key: c, data: f } of i) {
@@ -2598,7 +2599,7 @@ function zs(i) {
       }
       case "A": {
         const k = Math.abs(f[0]), d = Math.abs(f[1]), v = f[2], h = f[3], M = f[4], I = f[5], T = f[6];
-        k === 0 || d === 0 ? (t.push({ key: "C", data: [n, s, I, T, I, T] }), n = I, s = T) : (n !== I || s !== T) && ($s(n, s, I, T, k, d, v, h, M).forEach((function(b) {
+        k === 0 || d === 0 ? (t.push({ key: "C", data: [n, s, I, T, I, T] }), n = I, s = T) : (n !== I || s !== T) && (_s(n, s, I, T, k, d, v, h, M).forEach((function(b) {
           t.push({ key: "C", data: b });
         })), n = I, s = T);
         break;
@@ -2613,7 +2614,7 @@ function zs(i) {
 function Qt(i, t, e) {
   return [i * Math.cos(e) - t * Math.sin(e), i * Math.sin(e) + t * Math.cos(e)];
 }
-function $s(i, t, e, n, s, a, o, l, r, c) {
+function _s(i, t, e, n, s, a, o, l, r, c) {
   const f = (k = o, Math.PI * k / 180);
   var k;
   let d = [], v = 0, h = 0, M = 0, I = 0;
@@ -2629,7 +2630,7 @@ function $s(i, t, e, n, s, a, o, l, r, c) {
   let T = h - v;
   if (Math.abs(T) > 120 * Math.PI / 180) {
     const D = h, N = e, te = n;
-    h = r && h > v ? v + 120 * Math.PI / 180 * 1 : v + 120 * Math.PI / 180 * -1, d = $s(e = M + s * Math.cos(h), n = I + a * Math.sin(h), N, te, s, a, o, 0, r, [h, D, M, I]);
+    h = r && h > v ? v + 120 * Math.PI / 180 * 1 : v + 120 * Math.PI / 180 * -1, d = _s(e = M + s * Math.cos(h), n = I + a * Math.sin(h), N, te, s, a, o, 0, r, [h, D, M, I]);
   }
   T = h - v;
   const b = Math.cos(v), B = Math.sin(v), X = Math.cos(h), q = Math.sin(h), se = Math.tan(T / 4), le = 4 / 3 * s * se, oe = 4 / 3 * a * se, ee = [i, t], G = [i + le * B, t - oe * b], he = [e + le * q, n - oe * X], H = [e, n];
@@ -2644,17 +2645,17 @@ function $s(i, t, e, n, s, a, o, l, r, c) {
     return D;
   }
 }
-const Ko = { randOffset: function(i, t) {
+const Jo = { randOffset: function(i, t) {
   return ce(i, t);
 }, randOffsetWithRange: function(i, t, e) {
   return xn(i, t, e);
 }, ellipse: function(i, t, e, n, s) {
-  const a = As(e, n, s);
-  return Gn(i, t, s, a).opset;
+  const a = Ds(e, n, s);
+  return Nn(i, t, s, a).opset;
 }, doubleLineOps: function(i, t, e, n, s) {
   return Bt(i, t, e, n, s, !0);
 } };
-function _s(i, t, e, n, s) {
+function As(i, t, e, n, s) {
   return { type: "path", ops: Bt(i, t, e, n, s) };
 }
 function mn(i, t, e) {
@@ -2664,20 +2665,20 @@ function mn(i, t, e) {
     for (let a = 0; a < n - 1; a++) s.push(...Bt(i[a][0], i[a][1], i[a + 1][0], i[a + 1][1], e));
     return t && s.push(...Bt(i[n - 1][0], i[n - 1][1], i[0][0], i[0][1], e)), { type: "path", ops: s };
   }
-  return n === 2 ? _s(i[0][0], i[0][1], i[1][0], i[1][1], e) : { type: "path", ops: [] };
+  return n === 2 ? As(i[0][0], i[0][1], i[1][0], i[1][1], e) : { type: "path", ops: [] };
 }
-function Jo(i, t, e, n, s) {
+function Zo(i, t, e, n, s) {
   return (function(a, o) {
     return mn(a, !0, o);
   })([[i, t], [i + e, t], [i + e, t + n], [i, t + n]], s);
 }
-function us(i, t) {
+function hs(i, t) {
   if (i.length) {
-    const e = typeof i[0][0] == "number" ? [i] : i, n = gn(e[0], 1 * (1 + 0.2 * t.roughness), t), s = t.disableMultiStroke ? [] : gn(e[0], 1.5 * (1 + 0.22 * t.roughness), fs(t));
+    const e = typeof i[0][0] == "number" ? [i] : i, n = gn(e[0], 1 * (1 + 0.2 * t.roughness), t), s = t.disableMultiStroke ? [] : gn(e[0], 1.5 * (1 + 0.22 * t.roughness), gs(t));
     for (let a = 1; a < e.length; a++) {
       const o = e[a];
       if (o.length) {
-        const l = gn(o, 1 * (1 + 0.2 * t.roughness), t), r = t.disableMultiStroke ? [] : gn(o, 1.5 * (1 + 0.22 * t.roughness), fs(t));
+        const l = gn(o, 1 * (1 + 0.2 * t.roughness), t), r = t.disableMultiStroke ? [] : gn(o, 1.5 * (1 + 0.22 * t.roughness), gs(t));
         for (const c of l) c.op !== "move" && n.push(c);
         for (const c of r) c.op !== "move" && s.push(c);
       }
@@ -2686,37 +2687,37 @@ function us(i, t) {
   }
   return { type: "path", ops: [] };
 }
-function As(i, t, e) {
+function Ds(i, t, e) {
   const n = Math.sqrt(2 * Math.PI * Math.sqrt((Math.pow(i / 2, 2) + Math.pow(t / 2, 2)) / 2)), s = Math.ceil(Math.max(e.curveStepCount, e.curveStepCount / Math.sqrt(200) * n)), a = 2 * Math.PI / s;
   let o = Math.abs(i / 2), l = Math.abs(t / 2);
   const r = 1 - e.curveFitting;
   return o += ce(o * r, e), l += ce(l * r, e), { increment: a, rx: o, ry: l };
 }
-function Gn(i, t, e, n) {
-  const [s, a] = gs(n.increment, i, t, n.rx, n.ry, 1, n.increment * xn(0.1, xn(0.4, 1, e), e), e);
+function Nn(i, t, e, n) {
+  const [s, a] = vs(n.increment, i, t, n.rx, n.ry, 1, n.increment * xn(0.1, xn(0.4, 1, e), e), e);
   let o = kn(s, null, e);
   if (!e.disableMultiStroke && e.roughness !== 0) {
-    const [l] = gs(n.increment, i, t, n.rx, n.ry, 1.5, 0, e), r = kn(l, null, e);
+    const [l] = vs(n.increment, i, t, n.rx, n.ry, 1.5, 0, e), r = kn(l, null, e);
     o = o.concat(r);
   }
   return { estimatedPoints: a, opset: { type: "path", ops: o } };
 }
-function hs(i, t, e, n, s, a, o, l, r) {
+function ps(i, t, e, n, s, a, o, l, r) {
   const c = i, f = t;
   let k = Math.abs(e / 2), d = Math.abs(n / 2);
   k += ce(0.01 * k, r), d += ce(0.01 * d, r);
   let v = s, h = a;
   for (; v < 0; ) v += 2 * Math.PI, h += 2 * Math.PI;
   h - v > 2 * Math.PI && (v = 0, h = 2 * Math.PI);
-  const M = 2 * Math.PI / r.curveStepCount, I = Math.min(M / 2, (h - v) / 2), T = vs(I, c, f, k, d, v, h, 1, r);
+  const M = 2 * Math.PI / r.curveStepCount, I = Math.min(M / 2, (h - v) / 2), T = ms(I, c, f, k, d, v, h, 1, r);
   if (!r.disableMultiStroke) {
-    const b = vs(I, c, f, k, d, v, h, 1.5, r);
+    const b = ms(I, c, f, k, d, v, h, 1.5, r);
     T.push(...b);
   }
   return o && (l ? T.push(...Bt(c, f, c + k * Math.cos(v), f + d * Math.sin(v), r), ...Bt(c, f, c + k * Math.cos(h), f + d * Math.sin(h), r)) : T.push({ op: "lineTo", data: [c, f] }, { op: "lineTo", data: [c + k * Math.cos(v), f + d * Math.sin(v)] })), { type: "path", ops: T };
 }
-function ps(i, t) {
-  const e = zs(Bs(Qn(i))), n = [];
+function fs(i, t) {
+  const e = $s(zs(es(i))), n = [];
   let s = [0, 0], a = [0, 0];
   for (const { key: o, data: l } of e) switch (o) {
     case "M":
@@ -2727,7 +2728,7 @@ function ps(i, t) {
       break;
     case "C": {
       const [r, c, f, k, d, v] = l;
-      n.push(...Zo(r, c, f, k, d, v, a, t)), a = [d, v];
+      n.push(...Qo(r, c, f, k, d, v, a, t)), a = [d, v];
       break;
     }
     case "Z":
@@ -2735,7 +2736,7 @@ function ps(i, t) {
   }
   return { type: "path", ops: n };
 }
-function Vn(i, t) {
+function jn(i, t) {
   const e = [];
   for (const n of i) if (n.length) {
     const s = t.maxRandomnessOffset || 0, a = n.length;
@@ -2751,52 +2752,52 @@ function Ut(i, t) {
     let s = e.fillStyle || "hachure";
     if (!dt[s]) switch (s) {
       case "zigzag":
-        dt[s] || (dt[s] = new jo(n));
+        dt[s] || (dt[s] = new Ho(n));
         break;
       case "cross-hatch":
-        dt[s] || (dt[s] = new Ho(n));
+        dt[s] || (dt[s] = new Wo(n));
         break;
       case "dots":
-        dt[s] || (dt[s] = new Wo(n));
+        dt[s] || (dt[s] = new Uo(n));
         break;
       case "dashed":
-        dt[s] || (dt[s] = new Uo(n));
+        dt[s] || (dt[s] = new qo(n));
         break;
       case "zigzag-line":
-        dt[s] || (dt[s] = new qo(n));
+        dt[s] || (dt[s] = new Go(n));
         break;
       default:
-        s = "hachure", dt[s] || (dt[s] = new Zn(n));
+        s = "hachure", dt[s] || (dt[s] = new Qn(n));
     }
     return dt[s];
-  })(t, Ko).fillPolygons(i, t);
+  })(t, Jo).fillPolygons(i, t);
 }
-function fs(i) {
+function gs(i) {
   const t = Object.assign({}, i);
   return t.randomizer = void 0, i.seed && (t.seed = i.seed + 1), t;
 }
-function Ds(i) {
-  return i.randomizer || (i.randomizer = new Go(i.seed || 0)), i.randomizer.next();
+function Fs(i) {
+  return i.randomizer || (i.randomizer = new No(i.seed || 0)), i.randomizer.next();
 }
 function xn(i, t, e, n = 1) {
-  return e.roughness * n * (Ds(e) * (t - i) + i);
+  return e.roughness * n * (Fs(e) * (t - i) + i);
 }
 function ce(i, t, e = 1) {
   return xn(-i, i, t, e);
 }
 function Bt(i, t, e, n, s, a = !1) {
-  const o = a ? s.disableMultiStrokeFill : s.disableMultiStroke, l = Nn(i, t, e, n, s, !0, !1);
+  const o = a ? s.disableMultiStrokeFill : s.disableMultiStroke, l = Kn(i, t, e, n, s, !0, !1);
   if (o) return l;
-  const r = Nn(i, t, e, n, s, !0, !0);
+  const r = Kn(i, t, e, n, s, !0, !0);
   return l.concat(r);
 }
-function Nn(i, t, e, n, s, a, o) {
+function Kn(i, t, e, n, s, a, o) {
   const l = Math.pow(i - e, 2) + Math.pow(t - n, 2), r = Math.sqrt(l);
   let c = 1;
   c = r < 200 ? 1 : r > 500 ? 0.4 : -16668e-7 * r + 1.233334;
   let f = s.maxRandomnessOffset || 0;
   f * f * 100 > l && (f = r / 10);
-  const k = f / 2, d = 0.2 + 0.2 * Ds(s);
+  const k = f / 2, d = 0.2 + 0.2 * Fs(s);
   let v = s.bowing * s.maxRandomnessOffset * (n - t) / 200, h = s.bowing * s.maxRandomnessOffset * (i - e) / 200;
   v = ce(v, s, c), h = ce(h, s, c);
   const M = [], I = () => ce(k, s, c), T = () => ce(f, s, c), b = s.preserveVertices;
@@ -2818,10 +2819,10 @@ function kn(i, t, e) {
       const r = i[l];
       a[0] = [r[0], r[1]], a[1] = [r[0] + (o * i[l + 1][0] - o * i[l - 1][0]) / 6, r[1] + (o * i[l + 1][1] - o * i[l - 1][1]) / 6], a[2] = [i[l + 1][0] + (o * i[l][0] - o * i[l + 2][0]) / 6, i[l + 1][1] + (o * i[l][1] - o * i[l + 2][1]) / 6], a[3] = [i[l + 1][0], i[l + 1][1]], s.push({ op: "bcurveTo", data: [a[1][0], a[1][1], a[2][0], a[2][1], a[3][0], a[3][1]] });
     }
-  } else n === 3 ? (s.push({ op: "move", data: [i[1][0], i[1][1]] }), s.push({ op: "bcurveTo", data: [i[1][0], i[1][1], i[2][0], i[2][1], i[2][0], i[2][1]] })) : n === 2 && s.push(...Nn(i[0][0], i[0][1], i[1][0], i[1][1], e, !0, !0));
+  } else n === 3 ? (s.push({ op: "move", data: [i[1][0], i[1][1]] }), s.push({ op: "bcurveTo", data: [i[1][0], i[1][1], i[2][0], i[2][1], i[2][0], i[2][1]] })) : n === 2 && s.push(...Kn(i[0][0], i[0][1], i[1][0], i[1][1], e, !0, !0));
   return s;
 }
-function gs(i, t, e, n, s, a, o, l) {
+function vs(i, t, e, n, s, a, o, l) {
   const r = [], c = [];
   if (l.roughness === 0) {
     i /= 4, c.push([t + n * Math.cos(-i), e + s * Math.sin(-i)]);
@@ -2842,13 +2843,13 @@ function gs(i, t, e, n, s, a, o, l) {
   }
   return [c, r];
 }
-function vs(i, t, e, n, s, a, o, l, r) {
+function ms(i, t, e, n, s, a, o, l, r) {
   const c = a + ce(0.1, r), f = [];
   f.push([ce(l, r) + t + 0.9 * n * Math.cos(c - i), ce(l, r) + e + 0.9 * s * Math.sin(c - i)]);
   for (let k = c; k <= o; k += i) f.push([ce(l, r) + t + n * Math.cos(k), ce(l, r) + e + s * Math.sin(k)]);
   return f.push([t + n * Math.cos(o), e + s * Math.sin(o)]), f.push([t + n * Math.cos(o), e + s * Math.sin(o)]), kn(f, null, r);
 }
-function Zo(i, t, e, n, s, a, o, l) {
+function Qo(i, t, e, n, s, a, o, l) {
   const r = [], c = [l.maxRandomnessOffset || 1, (l.maxRandomnessOffset || 1) + 0.3];
   let f = [0, 0];
   const k = l.disableMultiStroke ? 1 : 2, d = l.preserveVertices;
@@ -2858,7 +2859,7 @@ function Zo(i, t, e, n, s, a, o, l) {
 function en(i) {
   return [...i];
 }
-function ms(i, t = 0) {
+function ys(i, t = 0) {
   const e = i.length;
   if (e < 3) throw new Error("A curve must have at least three points.");
   const n = [];
@@ -2879,7 +2880,7 @@ function ms(i, t = 0) {
 function yn(i, t) {
   return Math.pow(i[0] - t[0], 2) + Math.pow(i[1] - t[1], 2);
 }
-function Qo(i, t, e) {
+function ea(i, t, e) {
   const n = yn(t, e);
   if (n === 0) return yn(i, t);
   let s = ((i[0] - t[0]) * (e[0] - t[0]) + (i[1] - t[1]) * (e[1] - t[1])) / n;
@@ -2888,7 +2889,7 @@ function Qo(i, t, e) {
 function Lt(i, t, e) {
   return [i[0] + (t[0] - i[0]) * e, i[1] + (t[1] - i[1]) * e];
 }
-function Kn(i, t, e, n) {
+function Jn(i, t, e, n) {
   const s = n || [];
   if ((function(l, r) {
     const c = l[r + 0], f = l[r + 1], k = l[r + 2], d = l[r + 3];
@@ -2905,27 +2906,27 @@ function Kn(i, t, e, n) {
     s.length ? (a = s[s.length - 1], o = l, Math.sqrt(yn(a, o)) > 1 && s.push(l)) : s.push(l), s.push(i[t + 3]);
   } else {
     const r = i[t + 0], c = i[t + 1], f = i[t + 2], k = i[t + 3], d = Lt(r, c, 0.5), v = Lt(c, f, 0.5), h = Lt(f, k, 0.5), M = Lt(d, v, 0.5), I = Lt(v, h, 0.5), T = Lt(M, I, 0.5);
-    Kn([r, d, M, T], 0, e, s), Kn([T, I, h, k], 0, e, s);
+    Jn([r, d, M, T], 0, e, s), Jn([T, I, h, k], 0, e, s);
   }
   var a, o;
   return s;
 }
-function ea(i, t) {
+function ta(i, t) {
   return wn(i, 0, i.length, t);
 }
 function wn(i, t, e, n, s) {
   const a = s || [], o = i[t], l = i[e - 1];
   let r = 0, c = 1;
   for (let f = t + 1; f < e - 1; ++f) {
-    const k = Qo(i[f], o, l);
+    const k = ea(i[f], o, l);
     k > r && (r = k, c = f);
   }
   return Math.sqrt(r) > n ? (wn(i, t, c + 1, n, a), wn(i, c, e, n, a)) : (a.length || a.push(o), a.push(l)), a;
 }
-function jn(i, t = 0.15, e) {
+function Hn(i, t = 0.15, e) {
   const n = [], s = (i.length - 1) / 3;
   for (let a = 0; a < s; a++)
-    Kn(i, 3 * a, t, n);
+    Jn(i, 3 * a, t, n);
   return e && e > 0 ? wn(n, 0, n.length, e) : n;
 }
 const gt = "none";
@@ -2944,20 +2945,20 @@ class bn {
   }
   line(t, e, n, s, a) {
     const o = this._o(a);
-    return this._d("line", [_s(t, e, n, s, o)], o);
+    return this._d("line", [As(t, e, n, s, o)], o);
   }
   rectangle(t, e, n, s, a) {
-    const o = this._o(a), l = [], r = Jo(t, e, n, s, o);
+    const o = this._o(a), l = [], r = Zo(t, e, n, s, o);
     if (o.fill) {
       const c = [[t, e], [t + n, e], [t + n, e + s], [t, e + s]];
-      o.fillStyle === "solid" ? l.push(Vn([c], o)) : l.push(Ut([c], o));
+      o.fillStyle === "solid" ? l.push(jn([c], o)) : l.push(Ut([c], o));
     }
     return o.stroke !== gt && l.push(r), this._d("rectangle", l, o);
   }
   ellipse(t, e, n, s, a) {
-    const o = this._o(a), l = [], r = As(n, s, o), c = Gn(t, e, o, r);
+    const o = this._o(a), l = [], r = Ds(n, s, o), c = Nn(t, e, o, r);
     if (o.fill) if (o.fillStyle === "solid") {
-      const f = Gn(t, e, o, r).opset;
+      const f = Nn(t, e, o, r).opset;
       f.type = "fillPath", l.push(f);
     } else l.push(Ut([c.estimatedPoints], o));
     return o.stroke !== gt && l.push(c.opset), this._d("ellipse", l, o);
@@ -2971,11 +2972,11 @@ class bn {
     return this._d("linearPath", [mn(t, !1, n)], n);
   }
   arc(t, e, n, s, a, o, l = !1, r) {
-    const c = this._o(r), f = [], k = hs(t, e, n, s, a, o, l, !0, c);
+    const c = this._o(r), f = [], k = ps(t, e, n, s, a, o, l, !0, c);
     if (l && c.fill) if (c.fillStyle === "solid") {
       const d = Object.assign({}, c);
       d.disableMultiStroke = !0;
-      const v = hs(t, e, n, s, a, o, !0, !1, d);
+      const v = ps(t, e, n, s, a, o, !0, !1, d);
       v.type = "fillPath", f.push(v);
     } else f.push((function(d, v, h, M, I, T, b) {
       const B = d, X = v;
@@ -2991,15 +2992,15 @@ class bn {
     return c.stroke !== gt && f.push(k), this._d("arc", f, c);
   }
   curve(t, e) {
-    const n = this._o(e), s = [], a = us(t, n);
+    const n = this._o(e), s = [], a = hs(t, n);
     if (n.fill && n.fill !== gt) if (n.fillStyle === "solid") {
-      const o = us(t, Object.assign(Object.assign({}, n), { disableMultiStroke: !0, roughness: n.roughness ? n.roughness + n.fillShapeRoughnessGain : 0 }));
+      const o = hs(t, Object.assign(Object.assign({}, n), { disableMultiStroke: !0, roughness: n.roughness ? n.roughness + n.fillShapeRoughnessGain : 0 }));
       s.push({ type: "fillPath", ops: this._mergedShape(o.ops) });
     } else {
       const o = [], l = t;
       if (l.length) {
         const r = typeof l[0][0] == "number" ? [l] : l;
-        for (const c of r) c.length < 3 ? o.push(...c) : c.length === 3 ? o.push(...jn(ms([c[0], c[0], c[1], c[2]]), 10, (1 + n.roughness) / 2)) : o.push(...jn(ms(c), 10, (1 + n.roughness) / 2));
+        for (const c of r) c.length < 3 ? o.push(...c) : c.length === 3 ? o.push(...Hn(ys([c[0], c[0], c[1], c[2]]), 10, (1 + n.roughness) / 2)) : o.push(...Hn(ys(c), 10, (1 + n.roughness) / 2));
       }
       o.length && s.push(Ut([o], n));
     }
@@ -3007,17 +3008,17 @@ class bn {
   }
   polygon(t, e) {
     const n = this._o(e), s = [], a = mn(t, !0, n);
-    return n.fill && (n.fillStyle === "solid" ? s.push(Vn([t], n)) : s.push(Ut([t], n))), n.stroke !== gt && s.push(a), this._d("polygon", s, n);
+    return n.fill && (n.fillStyle === "solid" ? s.push(jn([t], n)) : s.push(Ut([t], n))), n.stroke !== gt && s.push(a), this._d("polygon", s, n);
   }
   path(t, e) {
     const n = this._o(e), s = [];
     if (!t) return this._d("path", s, n);
     t = (t || "").replace(/\n/g, " ").replace(/(-\s)/g, "-").replace("/(ss)/g", " ");
     const a = n.fill && n.fill !== "transparent" && n.fill !== gt, o = n.stroke !== gt, l = !!(n.simplification && n.simplification < 1), r = (function(f, k, d) {
-      const v = zs(Bs(Qn(f))), h = [];
+      const v = $s(zs(es(f))), h = [];
       let M = [], I = [0, 0], T = [];
       const b = () => {
-        T.length >= 4 && M.push(...jn(T, k)), T = [];
+        T.length >= 4 && M.push(...Hn(T, k)), T = [];
       }, B = () => {
         b(), M.length && (h.push(M), M = []);
       };
@@ -3041,15 +3042,15 @@ class bn {
       if (B(), !d) return h;
       const X = [];
       for (const q of h) {
-        const se = ea(q, d);
+        const se = ta(q, d);
         se.length && X.push(se);
       }
       return X;
-    })(t, 1, l ? 4 - 4 * (n.simplification || 1) : (1 + n.roughness) / 2), c = ps(t, n);
+    })(t, 1, l ? 4 - 4 * (n.simplification || 1) : (1 + n.roughness) / 2), c = fs(t, n);
     if (a) if (n.fillStyle === "solid") if (r.length === 1) {
-      const f = ps(t, Object.assign(Object.assign({}, n), { disableMultiStroke: !0, roughness: n.roughness ? n.roughness + n.fillShapeRoughnessGain : 0 }));
+      const f = fs(t, Object.assign(Object.assign({}, n), { disableMultiStroke: !0, roughness: n.roughness ? n.roughness + n.fillShapeRoughnessGain : 0 }));
       s.push({ type: "fillPath", ops: this._mergedShape(f.ops) });
-    } else s.push(Vn(r, n));
+    } else s.push(jn(r, n));
     else s.push(Ut(r, n));
     return o && (l ? r.forEach(((f) => {
       s.push(mn(f, !1, n));
@@ -3098,7 +3099,7 @@ class bn {
     return t.filter(((e, n) => n === 0 || e.op !== "move"));
   }
 }
-class ta {
+class na {
   constructor(t, e) {
     this.canvas = t, this.ctx = this.canvas.getContext("2d"), this.gen = new bn(e);
   }
@@ -3183,7 +3184,7 @@ class ta {
   }
 }
 const vn = "http://www.w3.org/2000/svg";
-class na {
+class sa {
   constructor(t, e) {
     this.svg = t, this.gen = new bn(e);
   }
@@ -3257,9 +3258,9 @@ class na {
     return this.draw(n);
   }
 }
-var sa = { canvas: (i, t) => new ta(i, t), svg: (i, t) => new na(i, t), generator: (i) => new bn(i), newSeed: () => bn.newSeed() };
-const ys = /* @__PURE__ */ new Map(), Hn = /* @__PURE__ */ new Map(), ia = (i) => {
-  if (Hn.has(i)) return Hn.get(i);
+var ia = { canvas: (i, t) => new na(i, t), svg: (i, t) => new sa(i, t), generator: (i) => new bn(i), newSeed: () => bn.newSeed() };
+const xs = /* @__PURE__ */ new Map(), Wn = /* @__PURE__ */ new Map(), oa = (i) => {
+  if (Wn.has(i)) return Wn.get(i);
   const t = document.createElement("canvas");
   t.width = 40, t.height = 40;
   const e = t.getContext("2d");
@@ -3269,8 +3270,8 @@ const ys = /* @__PURE__ */ new Map(), Hn = /* @__PURE__ */ new Map(), ia = (i) =
   const o = 0.024;
   e.scale(o, o), e.translate(-512, -512);
   const l = new Path2D("M771.09045312 471.64751562L252.89970312 471.64751562c-44.7575625 0-81.03670312 36.20432813-81.03670312 80.87625001l0 343.07339062c0 44.67290625 36.27914062 80.87625 81.03670312 80.87625l518.19173438 0c44.75854688 0 81.04753125-36.20334375 81.04753125-80.87625L852.13896875 552.52376563C852.13798437 507.85184375 815.849 471.64751562 771.09045312 471.64751562zM546.12434375 721.73979687l0 90.04964063c0 18.8409375-15.26864062 34.13123438-34.12926563 34.13123438-18.84979688 0-34.12926563-15.29029687-34.12926562-34.13123438l0-90.04964062c-20.37951562-11.804625-34.13025-33.80835938-34.13025-59.06348438 0-37.7015625 30.55795313-68.2605 68.25951562-68.2605s68.27034375 30.5589375 68.27034375 68.2605C580.26542188 687.9314375 566.52551562 709.93517188 546.12434375 721.73979687zM511.99507812 147.37175c-131.95251562 0-238.92946875 105.46889063-238.92946875 244.04034375l1e-8 105.98273437 477.87075 22.75284375L750.93635938 391.41209375C750.93635938 252.84064062 643.95940625 147.37175 511.99507812 147.37175zM341.36745312 491.406875L341.36745312 389.03876562c0-94.2204375 76.395375-170.627625 170.62664063-170.627625 94.24209375 0 170.627625 76.4071875 170.627625 170.627625l0 104.76309375L341.36745312 491.406875z");
-  return e.fillStyle = i, e.fill(l), e.restore(), Hn.set(i, t), t;
-}, oa = (i, t, e, n, s, a, o) => {
+  return e.fillStyle = i, e.fill(l), e.restore(), Wn.set(i, t), t;
+}, aa = (i, t, e, n, s, a, o) => {
   if (o === "none") return;
   const l = t.width / a, r = t.height / a, c = -e, f = -n, k = c + l / s, d = f + r / s, v = 20, h = Math.floor(c / v) * v, M = Math.floor(f / v) * v;
   if (i.save(), o === "dot") {
@@ -3300,13 +3301,13 @@ const ys = /* @__PURE__ */ new Map(), Hn = /* @__PURE__ */ new Map(), ia = (i) =
     i.stroke();
   }
   i.restore();
-}, aa = (i, t, e, n, s, a = {}, o = null, l = {}, r = null, c = {}, f = "none", k = null, d = "#FFFFFF") => {
+}, la = (i, t, e, n, s, a = {}, o = null, l = {}, r = null, c = {}, f = "none", k = null, d = "#FFFFFF") => {
   const v = i.getContext("2d");
   if (!v) return;
-  const h = sa.canvas(i);
+  const h = ia.canvas(i);
   v.clearRect(0, 0, i.width, i.height), v.fillStyle = d, v.fillRect(0, 0, i.width, i.height);
   const M = window.devicePixelRatio || 1;
-  v.save(), v.scale(M, M), v.scale(s, s), v.translate(e, n), oa(v, i, e, n, s, M, f);
+  v.save(), v.scale(M, M), v.scale(s, s), v.translate(e, n), aa(v, i, e, n, s, M, f);
   const I = [], T = [], b = [], B = [], X = {};
   t.forEach((D) => {
     if (D.isDeleted) return;
@@ -3331,23 +3332,23 @@ const ys = /* @__PURE__ */ new Map(), Hn = /* @__PURE__ */ new Map(), ia = (i) =
     D.type === "arrow" || D.type === "line" ? b.push(D) : a[D.id] || N && a[N] ? T.push(D) : I.push(D);
   }), I.forEach((D) => {
     const N = (r ? D.id === r : !1) || c[D.id], te = o === D.id;
-    Wn(h, v, D, t, !1, l[D.id], "dashed", N, te, k === D.id);
+    Un(h, v, D, t, !1, l[D.id], "dashed", N, te, k === D.id);
   });
   const se = b.filter((D) => a[D.id]), le = [...T, ...se], oe = le.length, ee = oe === 2 ? le.find((D) => D.type === "text" && D.containerId) : null, G = !!(ee && le.find((D) => D.id === ee.containerId)), he = oe > 1 && le[0] && !!le[0].groupIds.find((D) => le.every((N) => N.groupIds.includes(D))), H = oe > 1 && !G ? "solid" : "dashed";
   if (T.forEach((D) => {
     const N = D.frameId, te = N && a[N], ye = a[D.id], ke = oe === 1 || !he && (!!ye || !te), Ee = (r ? D.id === r : !1) || c[D.id], Pe = o === D.id;
-    Wn(h, v, D, t, ke, l[D.id], H, Ee, Pe, k === D.id);
+    Un(h, v, D, t, ke, l[D.id], H, Ee, Pe, k === D.id);
   }), b.forEach((D) => {
     let N = !!a[D.id];
     (oe === 1 && N || oe > 1 && he) && (N = !1);
     const te = (r ? D.id === r : !1) || c[D.id], ye = o === D.id;
-    Wn(h, v, D, t, N, l[D.id], H, te, ye, k === D.id);
+    Un(h, v, D, t, N, l[D.id], H, te, ye, k === D.id);
   }), oe > 1 && !G) {
     const D = Gt(le);
     D && (v.save(), v.translate(D.minX, D.minY), v.strokeStyle = "#6965db", v.lineWidth = 1, v.setLineDash([5, 5]), v.strokeRect(-4, -4, D.width + 8, D.height + 8), v.restore());
   }
   v.restore();
-}, xs = (i, t) => {
+}, ks = (i, t) => {
   if (!i || i === "transparent") return "rgba(0,0,0,0)";
   if (i.startsWith("rgb")) return i;
   let e = i.replace("#", "");
@@ -3356,9 +3357,9 @@ const ys = /* @__PURE__ */ new Map(), Hn = /* @__PURE__ */ new Map(), ia = (i) =
     return `rgba(${n}, ${s}, ${a}, ${t})`;
   }
   return i;
-}, Wn = (i, t, e, n, s = !1, a = !1, o = "dashed", l = !1, r = !1, c = !1) => {
-  const f = (e.backgroundOpacity ?? 100) / 100, k = (e.strokeOpacity ?? 100) / 100, d = e.backgroundColor === "transparent" ? void 0 : xs(e.backgroundColor, f), h = {
-    stroke: xs(e.strokeColor, k),
+}, Un = (i, t, e, n, s = !1, a = !1, o = "dashed", l = !1, r = !1, c = !1) => {
+  const f = (e.backgroundOpacity ?? 100) / 100, k = (e.strokeOpacity ?? 100) / 100, d = e.backgroundColor === "transparent" ? void 0 : ks(e.backgroundColor, f), h = {
+    stroke: ks(e.strokeColor, k),
     fill: d,
     fillStyle: e.fillStyle === "solid" ? "solid" : e.fillStyle,
     strokeWidth: e.strokeWidth,
@@ -3495,7 +3496,7 @@ const ys = /* @__PURE__ */ new Map(), Hn = /* @__PURE__ */ new Map(), ia = (i) =
             if (Ye === xe) return [0, 1];
           };
           e.startBinding && (ke = Pe(e.startBinding)), e.endBinding && (Ee = Pe(e.endBinding));
-          const Fe = ai(D, 20, ke, Ee);
+          const Fe = li(D, 20, ke, Ee);
           i.path(Fe, H);
         } else
           i.linearPath(D, H);
@@ -3514,9 +3515,9 @@ const ys = /* @__PURE__ */ new Map(), Hn = /* @__PURE__ */ new Map(), ia = (i) =
             if (xe === $e) return [0, -1];
             if (xe === De) return [0, 1];
           };
-          e.startBinding && (ke = Pe(e.startBinding)), e.endBinding && (Ee = Pe(e.endBinding)), N = Jn(e.points, ke, Ee);
+          e.startBinding && (ke = Pe(e.startBinding)), e.endBinding && (Ee = Pe(e.endBinding)), N = Zn(e.points, ke, Ee);
         }
-        const te = { ...e, points: N }, ye = ni(te);
+        const te = { ...e, points: N }, ye = si(te);
         ye && i.linearPath(ye, h);
       }
       break;
@@ -3530,7 +3531,7 @@ const ys = /* @__PURE__ */ new Map(), Hn = /* @__PURE__ */ new Map(), ia = (i) =
     case "text":
       let b = "";
       e.isItalic && (b += "italic "), e.isBold && (b += "bold "), t.font = `${b}${e.fontSize}px ${e.fontFamily}`, t.fillStyle = e.fontColor || e.strokeColor, t.textAlign = e.textAlign || "left", t.textBaseline = "top";
-      const B = Math.round(e.fontSize * 1.25), X = 4, q = Math.max(0, e.width - X * 2), se = Math.max(0, e.height - X * 2), le = (e.text || "").split(`
+      const B = Math.round(e.fontSize * 1.25), X = 4, q = Math.max(0, e.width - X * 2) + 2, se = Math.max(0, e.height - X * 2) + 2, le = (e.text || "").split(`
 `), oe = [];
       if (le.forEach((H) => {
         if (!H) {
@@ -3579,13 +3580,13 @@ const ys = /* @__PURE__ */ new Map(), Hn = /* @__PURE__ */ new Map(), ia = (i) =
       break;
     case "image":
       if (e.dataURL) {
-        let H = ys.get(e.dataURL);
-        H || (H = new Image(), H.src = e.dataURL, ys.set(e.dataURL, H)), H.complete && H.naturalWidth > 0 && t.drawImage(H, 0, 0, e.width, e.height);
+        let H = xs.get(e.dataURL);
+        H || (H = new Image(), H.src = e.dataURL, xs.set(e.dataURL, H)), H.complete && H.naturalWidth > 0 && t.drawImage(H, 0, 0, e.width, e.height);
       }
       break;
   }
   if (t.globalAlpha = 1, s && !e.containerId && (t.strokeStyle = e.locked ? "#d2e2ff" : "#1e6fff", t.lineWidth = 1, o === "dashed" && t.setLineDash([5, 5]), t.strokeRect(-4, -4, e.width + 8, e.height + 8), t.setLineDash([]), e.locked)) {
-    const se = ia(c ? "#1e6fff" : "black");
+    const se = oa(c ? "#1e6fff" : "black");
     se && t.drawImage(se, 0, -50, 40, 40);
   }
   if (l) {
@@ -3631,7 +3632,7 @@ const ys = /* @__PURE__ */ new Map(), Hn = /* @__PURE__ */ new Map(), ia = (i) =
     t.stroke();
   }
   t.restore();
-}, la = (i) => {
+}, ra = (i) => {
   if (i.length < 3) return i;
   let t = [...i];
   for (let e = 0; e < 2; e++) {
@@ -3652,7 +3653,7 @@ const ys = /* @__PURE__ */ new Map(), Hn = /* @__PURE__ */ new Map(), ia = (i) =
     n.push(t[t.length - 1]), t = n;
   }
   return t;
-}, ra = (i, t, e, n, s) => {
+}, ca = (i, t, e, n, s) => {
   const a = i.getContext("2d");
   if (!a || t.length === 0) return;
   a.save();
@@ -3661,7 +3662,7 @@ const ys = /* @__PURE__ */ new Map(), Hn = /* @__PURE__ */ new Map(), ia = (i) =
   const l = Date.now(), r = 1600;
   t.forEach((c) => {
     if (c.length < 2) return;
-    const f = la(c);
+    const f = ra(c);
     for (let k = 0; k < f.length - 1; k++) {
       const d = f[k], v = f[k + 1];
       if (!d || !v) continue;
@@ -3794,7 +3795,7 @@ const ys = /* @__PURE__ */ new Map(), Hn = /* @__PURE__ */ new Map(), ia = (i) =
   }
 };
 let Ze = null;
-const ca = {
+const da = {
   height: "0",
   visibility: "hidden",
   overflow: "hidden",
@@ -3804,14 +3805,14 @@ const ca = {
   right: "0",
   whiteSpace: "pre-wrap"
 };
-function da(i, t = 1, e = null) {
+function ua(i, t = 1, e = null) {
   if (!i) return;
   Ze || (Ze = document.createElement("textarea"), (i.parentNode ?? document.body).appendChild(Ze));
-  const { paddingSize: n, borderSize: s, boxSizing: a, contextStyle: o, lineHeight: l } = ha(i);
+  const { paddingSize: n, borderSize: s, boxSizing: a, contextStyle: o, lineHeight: l } = pa(i);
   o.forEach((I) => {
     const T = I[0], b = I[1] ?? "";
     Ze && Ze.style.setProperty(T, b);
-  }), Object.entries(ca).forEach(([I, T]) => {
+  }), Object.entries(da).forEach(([I, T]) => {
     Ze && Ze.style.setProperty(I, T, "important");
   }), Ze.style.width = window.getComputedStyle(i).getPropertyValue("width"), Ze.value = i.value || (i.placeholder ?? "");
   const r = Ze.scrollHeight;
@@ -3830,7 +3831,7 @@ function da(i, t = 1, e = null) {
   };
   return Ze && Ze.parentNode && Ze.parentNode.removeChild(Ze), Ze = null, M;
 }
-const ua = [
+const ha = [
   "letter-spacing",
   "line-height",
   "padding-top",
@@ -3848,14 +3849,14 @@ const ua = [
   "box-sizing",
   "word-break"
 ];
-function ha(i) {
-  const t = window.getComputedStyle(i), e = t.getPropertyValue("box-sizing"), n = Number.parseFloat(t.getPropertyValue("padding-bottom")) + Number.parseFloat(t.getPropertyValue("padding-top")), s = Number.parseFloat(t.getPropertyValue("border-bottom-width")) + Number.parseFloat(t.getPropertyValue("border-top-width")), a = ua.map((l) => [
+function pa(i) {
+  const t = window.getComputedStyle(i), e = t.getPropertyValue("box-sizing"), n = Number.parseFloat(t.getPropertyValue("padding-bottom")) + Number.parseFloat(t.getPropertyValue("padding-top")), s = Number.parseFloat(t.getPropertyValue("border-bottom-width")) + Number.parseFloat(t.getPropertyValue("border-top-width")), a = ha.map((l) => [
     l,
     t.getPropertyValue(l)
   ]), o = parseFloat(t.getPropertyValue("line-height"));
   return { contextStyle: a, paddingSize: n, borderSize: s, boxSizing: e, lineHeight: o };
 }
-const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
+const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
   __name: "ContextMenu",
   props: {
     visible: { type: Boolean },
@@ -3894,7 +3895,7 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
       onMousedown: c[14] || (c[14] = Mt(() => {
       }, ["stop"]))
     }, [
-      i.isElementSelected ? (V(), j("ul", pa, [
+      i.isElementSelected ? (V(), j("ul", fa, [
         m("li", {
           onClick: c[0] || (c[0] = (f) => l("cut"))
         }, [...c[15] || (c[15] = [
@@ -3953,7 +3954,7 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
           m("span", null, "删除", -1),
           m("span", { class: "shortcut" }, "Del", -1)
         ])])
-      ])) : (V(), j("ul", fa, [
+      ])) : (V(), j("ul", ga, [
         m("li", {
           onClick: c[9] || (c[9] = (f) => l("paste"))
         }, [...c[27] || (c[27] = [
@@ -3975,10 +3976,10 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
       ]))
     ], 36)) : we("", !0);
   }
-}), va = /* @__PURE__ */ st(ga, [["__scopeId", "data-v-22c72497"]]), ma = {
+}), ma = /* @__PURE__ */ st(va, [["__scopeId", "data-v-22c72497"]]), ya = {
   class: "excalidraw-container",
   ref: "container"
-}, ya = ["width", "height"], xa = `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M20 20H7L3 16C2 15 2 13 3 12L13 2L22 11L20 20Z" fill="white"/></svg>') 0 20, auto`, ka = /* @__PURE__ */ Qe({
+}, xa = ["width", "height"], ka = `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M20 20H7L3 16C2 15 2 13 3 12L13 2L22 11L20 20Z" fill="white"/></svg>') 0 20, auto`, wa = /* @__PURE__ */ Qe({
   __name: "ExcalidrawCanvas",
   props: {
     elements: {},
@@ -4115,7 +4116,7 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
       if (r.value)
         return "grabbing";
       const p = e.appState.activeTool === "shapes" ? e.appState.activeToolType : e.appState.activeTool;
-      return p === "hand" ? e.appState.viewLocked ? "not-allowed" : d.value ? "grabbing" : "grab" : p === "selection" ? T.value ? "move" : d.value ? rn(b.value) : "default" : p === "text" ? "text" : p === "eraser" ? xa : "crosshair";
+      return p === "hand" ? e.appState.viewLocked ? "not-allowed" : d.value ? "grabbing" : "grab" : p === "selection" ? T.value ? "move" : d.value ? rn(b.value) : "default" : p === "text" ? "text" : p === "eraser" ? ka : "crosshair";
     }, De = U(() => {
       if (!G.value) return {};
       const p = e.elements.find((u) => u.id === G.value);
@@ -4182,6 +4183,7 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
           width: `${_}px`,
           // Allow it to expand? Textarea handles typically fixed or auto-grow
           height: `${E}px`,
+          padding: `${4 * t.zoom}px`,
           fontSize: `${g}px`,
           color: P,
           fontFamily: S,
@@ -4234,17 +4236,17 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
           L = Se[0], A = Se[1];
         }
         if (["rectangle", "frame", "square", "process"].includes(S.type))
-          Y ? _ = ft(L, A, S.x, S.y, S.width, S.height, S.angle) : _ = ti(L, A, S.x, S.y, S.width, S.height, S.angle);
+          Y ? _ = ft(L, A, S.x, S.y, S.width, S.height, S.angle) : _ = ni(L, A, S.x, S.y, S.width, S.height, S.angle);
         else if (["ellipse", "circle"].includes(S.type))
-          Y ? _ = Ct(L, A, S.x, S.y, S.width, S.height, S.angle) : _ = qn(L, A, S.x, S.y, S.width, S.height, S.angle);
+          Y ? _ = Ct(L, A, S.x, S.y, S.width, S.height, S.angle) : _ = Gn(L, A, S.x, S.y, S.width, S.height, S.angle);
         else if (S.type === "cylinder")
-          Y ? _ = ls(L, A, S.x, S.y, S.width, S.height, S.angle) : _ = ei(L, A, S.x, S.y, S.width, S.height, S.angle);
+          Y ? _ = rs(L, A, S.x, S.y, S.width, S.height, S.angle) : _ = ti(L, A, S.x, S.y, S.width, S.height, S.angle);
         else if (["diamond", "decision"].includes(S.type))
-          Y ? _ = At(L, A, S.x, S.y, S.width, S.height, S.angle) : _ = Zs(L, A, S.x, S.y, S.width, S.height, S.angle);
+          Y ? _ = At(L, A, S.x, S.y, S.width, S.height, S.angle) : _ = Qs(L, A, S.x, S.y, S.width, S.height, S.angle);
         else if (["star", "trapezoid", "parallelogram"].includes(S.type)) {
           let w = [];
-          S.type === "star" ? w = bt(S.width, S.height) : S.type === "trapezoid" ? w = Ft(S.width, S.height) : S.type === "parallelogram" && (w = Ot(S.width, S.height)), Y ? _ = Dt(L, A, w, S.x, S.y, S.angle) : _ = as(L, A, w, S.x, S.y, S.angle);
-        } else S.type === "freedraw" ? _ = an(L, A, S) : S.type === "text" || S.type === "image" ? _ = ft(L, A, S.x, S.y, S.width, S.height, S.angle) : (S.type === "line" || S.type === "arrow") && (_ = Ln(10, L, A, S, e.elements));
+          S.type === "star" ? w = bt(S.width, S.height) : S.type === "trapezoid" ? w = Ft(S.width, S.height) : S.type === "parallelogram" && (w = Ot(S.width, S.height)), Y ? _ = Dt(L, A, w, S.x, S.y, S.angle) : _ = ls(L, A, w, S.x, S.y, S.angle);
+        } else S.type === "freedraw" ? _ = an(L, A, S) : S.type === "text" || S.type === "image" ? _ = ft(L, A, S.x, S.y, S.width, S.height, S.angle) : (S.type === "line" || S.type === "arrow") && (_ = Rn(10, L, A, S, e.elements));
         if (_)
           if (u) {
             if (e.appState.selectedElementIds[S.id])
@@ -4367,11 +4369,11 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
               else if (["ellipse", "circle"].includes(E.type))
                 Y = Ct(y, u, E.x, E.y, E.width, E.height, E.angle);
               else if (E.type === "cylinder")
-                Y = ls(y, u, E.x, E.y, E.width, E.height, E.angle);
+                Y = rs(y, u, E.x, E.y, E.width, E.height, E.angle);
               else if (["star", "trapezoid", "parallelogram", "diamond", "decision"].includes(E.type)) {
                 let L = [];
-                E.type === "star" ? L = bt(E.width, E.height) : E.type === "trapezoid" ? L = Ft(E.width, E.height) : E.type === "parallelogram" ? L = Ot(E.width, E.height) : (E.type === "diamond" || E.type === "decision") && (L = Qs(E.width, E.height)), Y = Dt(y, u, L, E.x, E.y, E.angle);
-              } else E.type === "freedraw" ? Y = ft(y, u, E.x, E.y, E.width, E.height, E.angle) : (E.type === "arrow" || E.type === "line") && (Y = Ln(10, y, u, E, e.elements));
+                E.type === "star" ? L = bt(E.width, E.height) : E.type === "trapezoid" ? L = Ft(E.width, E.height) : E.type === "parallelogram" ? L = Ot(E.width, E.height) : (E.type === "diamond" || E.type === "decision") && (L = ei(E.width, E.height)), Y = Dt(y, u, L, E.x, E.y, E.angle);
+              } else E.type === "freedraw" ? Y = ft(y, u, E.x, E.y, E.width, E.height, E.angle) : (E.type === "arrow" || E.type === "line") && (Y = Rn(10, y, u, E, e.elements));
               if (Y) {
                 g = E;
                 break;
@@ -4618,12 +4620,12 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
             const ue = qe[0], Re = qe[2];
             qe[1] = [(ue[0] + Re[0]) / 2, (ue[1] + Re[1]) / 2];
           }
-          const Jt = qe.map((ue) => ue[0]), es = qe.map((ue) => ue[1]), ts = Math.min(...Jt), Os = Math.max(...Jt), ns = Math.min(...es), Ls = Math.max(...es), ss = ts, is = ns, Rs = Os - ts, Xs = Ls - ns, Ys = qe.map((ue) => [ue[0] - ss, ue[1] - is]), Zt = {
-            x: ss,
-            y: is,
-            width: Rs,
-            height: Xs,
-            points: Ys,
+          const Jt = qe.map((ue) => ue[0]), ts = qe.map((ue) => ue[1]), ns = Math.min(...Jt), Ls = Math.max(...Jt), ss = Math.min(...ts), Rs = Math.max(...ts), is = ns, os = ss, Xs = Ls - ns, Ys = Rs - ss, Vs = qe.map((ue) => [ue[0] - is, ue[1] - os]), Zt = {
+            x: is,
+            y: os,
+            width: Xs,
+            height: Ys,
+            points: Vs,
             angle: 0
             // Reset angle for simplicity
           };
@@ -5039,7 +5041,7 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
     };
     It(() => te.value, (p) => {
       if (G.value) {
-        p && s.value ? et.value = da(s.value, 1, null).height : et.value = "23px";
+        p && s.value ? et.value = ua(s.value, 1, null).height : et.value = "23px";
         const x = e.elements.find((y) => y.id === G.value);
         if (x && x.type === "text")
           if (x.containerId) {
@@ -5074,7 +5076,7 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
     }, dn = () => {
       const p = Math.min(ne.value.x, ae.value.x), x = Math.min(ne.value.y, ae.value.y), y = Math.max(ne.value.x, ae.value.x), u = Math.max(ne.value.y, ae.value.y);
       let C = e.elements.filter((S) => !S.isDeleted && !S.locked).filter((S) => {
-        const _ = Ks(S);
+        const _ = Js(S);
         return _.minX >= p && _.maxX <= y && _.minY >= x && _.maxY <= u;
       });
       const g = new Set(C.map((S) => S.id)), P = /* @__PURE__ */ new Set();
@@ -5096,8 +5098,8 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
           C = At(p, x, u.x, u.y, u.width, u.height, u.angle);
         else if (["star", "trapezoid", "parallelogram"].includes(u.type)) {
           let g = [];
-          u.type === "star" ? g = bt(u.width, u.height) : u.type === "trapezoid" ? g = Ft(u.width, u.height) : u.type === "parallelogram" && (g = Ot(u.width, u.height)), C = Dt(p, x, g, u.x, u.y, u.angle) || as(p, x, g, u.x, u.y, u.angle);
-        } else u.type === "text" || u.type === "image" ? C = p >= u.x && p <= u.x + u.width && x >= u.y && x <= u.y + u.height : (u.type === "line" || u.type === "arrow" || u.type === "freedraw") && (C = Ln(10, p, x, u));
+          u.type === "star" ? g = bt(u.width, u.height) : u.type === "trapezoid" ? g = Ft(u.width, u.height) : u.type === "parallelogram" && (g = Ot(u.width, u.height)), C = Dt(p, x, g, u.x, u.y, u.angle) || ls(p, x, g, u.x, u.y, u.angle);
+        } else u.type === "text" || u.type === "image" ? C = p >= u.x && p <= u.x + u.width && x >= u.y && x <= u.y + u.height : (u.type === "line" || u.type === "arrow" || u.type === "freedraw") && (C = Rn(10, p, x, u));
         if (C) {
           if (u.groupIds && u.groupIds.length > 0) {
             const g = new Set(u.groupIds);
@@ -5200,7 +5202,7 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
       if ((p.key === "i" || p.key === "I") && !(p.metaKey || p.ctrlKey) && !G.value) {
         p.preventDefault();
         const g = e.appState.activeTool;
-        e.setTool("image"), Ss().then((P) => {
+        e.setTool("image"), Is().then((P) => {
           if (P) {
             const S = window.innerWidth / 2 / e.appState.zoom - e.appState.scrollX, _ = window.innerHeight / 2 / e.appState.zoom - e.appState.scrollY;
             let E = S - P.width / 2, Y = _ - P.height / 2;
@@ -5383,7 +5385,7 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
         y(new Error("文件读取失败"));
       }, u.readAsDataURL(p);
     });
-    ws(() => {
+    bs(() => {
       document.removeEventListener("paste", un), window.removeEventListener("resize", c), window.removeEventListener("keydown", $), window.removeEventListener("keyup", jt), n.value?.removeEventListener("wheel", ge), window.removeEventListener("mousedown", _e);
     });
     const _e = (p) => {
@@ -5395,7 +5397,7 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
     const Be = () => {
       zt && cancelAnimationFrame(zt), zt = requestAnimationFrame(() => {
         if (n.value) {
-          if (aa(
+          if (la(
             n.value,
             t.elements,
             t.scrollX,
@@ -5409,7 +5411,7 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
             e.appState.showGrid ? e.appState.gridType : "none",
             Pe.value,
             e.appState.viewBackgroundColor
-          ), tt.value.length > 0 && ra(
+          ), tt.value.length > 0 && ca(
             n.value,
             tt.value,
             e.appState.zoom,
@@ -5469,7 +5471,7 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
             if (x) {
               x.save();
               const y = window.devicePixelRatio || 1;
-              x.setTransform(y, 0, 0, y, 0, 0), x.strokeStyle = "rgba(204, 204, 204, 0.4)", x.fillStyle = "rgba(204, 204, 204, 0.1)", x.lineWidth = 1;
+              x.setTransform(y, 0, 0, y, 0, 0), x.strokeStyle = "rgba(30, 111, 255, 0.9)", x.fillStyle = "rgba(30, 111, 255, 0.1)", x.lineWidth = 1;
               const u = Math.min(ne.value.x + t.scrollX, ae.value.x + t.scrollX) * t.zoom, C = Math.min(ne.value.y + t.scrollY, ae.value.y + t.scrollY) * t.zoom, g = Math.abs(ne.value.x - ae.value.x) * t.zoom, P = Math.abs(ne.value.y - ae.value.y) * t.zoom;
               x.strokeRect(u, C, g, P), x.fillRect(u, C, g, P), x.restore();
             }
@@ -5599,7 +5601,7 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
         }
       });
     };
-    function Fs() {
+    function Os() {
       s.value && s.value.focus();
     }
     return It([
@@ -5618,7 +5620,7 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
         e.saveToLocalStorage();
       }, { detached: !0 });
     }), It(() => e.elements, () => {
-    }), (p, x) => (V(), j("div", ma, [
+    }), (p, x) => (V(), j("div", ya, [
       m("canvas", {
         id: "canvas-container",
         ref_key: "canvas",
@@ -5631,8 +5633,8 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
         onPointerup: Cn,
         onDblclick: Ce,
         onContextmenu: Mt(f, ["prevent"])
-      }, null, 44, ya),
-      ie(va, {
+      }, null, 44, xa),
+      ie(ma, {
         visible: Oe.value.visible,
         x: Oe.value.x,
         y: Oe.value.y,
@@ -5645,9 +5647,9 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
       m("div", {
         class: "excalidraw-textContainer",
         style: Ke({ ...De.value }),
-        onClick: Fs
+        onClick: Os
       }, [
-        G.value ? Vs((V(), j("textarea", {
+        G.value ? js((V(), j("textarea", {
           key: 0,
           ref_key: "textInput",
           ref: s,
@@ -5666,20 +5668,20 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
           onKeydown: x[2] || (x[2] = Mt(() => {
           }, ["stop"]))
         }, null, 36)), [
-          [js, te.value]
+          [Hs, te.value]
         ]) : we("", !0)
       ], 4)
     ], 512));
   }
-}), wa = /* @__PURE__ */ st(ka, [["__scopeId", "data-v-77c7eaaa"]]), ba = { class: "color-box" }, Sa = ["onClick"], Ia = /* @__PURE__ */ Qe({
+}), ba = /* @__PURE__ */ st(wa, [["__scopeId", "data-v-5aa831b1"]]), Sa = { class: "color-box" }, Ia = ["onClick"], Ma = /* @__PURE__ */ Qe({
   __name: "colorStyle",
   props: {
     modelValue: {},
     modelModifiers: {}
   },
-  emits: /* @__PURE__ */ Hs(["colorChange"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ Ws(["colorChange"], ["update:modelValue"]),
   setup(i, { emit: t }) {
-    const e = Ws(i, "modelValue"), n = t, s = J([
+    const e = Us(i, "modelValue"), n = t, s = J([
       "#FFFFFF",
       "#1E6FFF",
       "#FF194C",
@@ -5705,7 +5707,7 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
     ]), a = function(o) {
       e.value = o, n("colorChange", o);
     };
-    return (o, l) => (V(), j("div", ba, [
+    return (o, l) => (V(), j("div", Sa, [
       m("div", {
         class: Xe(["trans-icon", { active: e.value === "transparent" }]),
         onClick: l[0] || (l[0] = (r) => a("transparent"))
@@ -5719,7 +5721,7 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
         class: Xe(["color-item", { active: e.value === r }]),
         style: Ke({ background: r }),
         onClick: (f) => a(r)
-      }, null, 14, Sa))), 128)),
+      }, null, 14, Ia))), 128)),
       l[2] || (l[2] = m("div", { class: "color-item-add" }, [
         m("svg", { class: "svg-icon" }, [
           m("use", { "xlink:href": "#icon-tianjiayanse" })
@@ -5727,14 +5729,14 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
       ], -1))
     ]));
   }
-}), qt = /* @__PURE__ */ st(Ia, [["__scopeId", "data-v-9b04b94a"]]), Ma = { class: "menu-list" }, Ea = { class: "preferences-list" }, Ca = { class: "preferences-list grid-list" }, Ta = ["onClick"], Pa = { class: "svg-icon" }, Ba = ["xlink:href"], za = {
+}), qt = /* @__PURE__ */ st(Ma, [["__scopeId", "data-v-9b04b94a"]]), Ea = { class: "menu-list" }, Ca = { class: "preferences-list" }, Ta = { class: "preferences-list grid-list" }, Pa = ["onClick"], Ba = { class: "svg-icon" }, za = ["xlink:href"], $a = {
   class: "preferences-list",
   style: { padding: "12px", display: "flex", "justify-content": "center" }
-}, $a = { class: "preference-item" }, _a = { class: "preference-info" }, Aa = { class: "preference-title" }, Da = { class: "preference-item" }, Fa = { class: "preference-info" }, Oa = { class: "preference-title" }, La = {
+}, _a = { class: "preference-item" }, Aa = { class: "preference-info" }, Da = { class: "preference-title" }, Fa = { class: "preference-item" }, Oa = { class: "preference-info" }, La = { class: "preference-title" }, Ra = {
   key: 1,
   class: "board-name-input",
   style: { width: "195px", padding: "1px 23px 5px" }
-}, Ra = /* @__PURE__ */ Qe({
+}, Xa = /* @__PURE__ */ Qe({
   __name: "BoardName",
   setup(i) {
     const t = ot(), e = J(!1), n = J(), s = J("");
@@ -5809,7 +5811,7 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
             ], -1)
           ])]),
           default: Ae(() => [
-            m("div", Ma, [
+            m("div", Ea, [
               ie(M, {
                 placement: "right-start",
                 trigger: "click",
@@ -5841,7 +5843,7 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
                   ], -1)
                 ])]),
                 default: Ae(() => [
-                  m("div", Ea, [
+                  m("div", Ca, [
                     ie(M, {
                       placement: "right-start",
                       trigger: "click",
@@ -5873,19 +5875,19 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
                         ], -1)
                       ])]),
                       default: Ae(() => [
-                        m("div", Ca, [
+                        m("div", Ta, [
                           (V(!0), j(We, null, ut(l.value, (b, B) => (V(), j("div", {
                             key: B,
                             class: Xe(["grid-item", { active: b.value === r.value }]),
                             onClick: (X) => d(b)
                           }, [
-                            (V(), j("svg", Pa, [
+                            (V(), j("svg", Ba, [
                               m("use", {
                                 "xlink:href": `#${b.value === r.value ? b.activeIcon : b.icon}`
-                              }, null, 8, Ba)
+                              }, null, 8, za)
                             ])),
                             m("div", null, nt(b.label), 1)
-                          ], 10, Ta))), 128))
+                          ], 10, Pa))), 128))
                         ])
                       ]),
                       _: 1
@@ -5921,7 +5923,7 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
                         ], -1)
                       ])]),
                       default: Ae(() => [
-                        m("div", za, [
+                        m("div", $a, [
                           h[8] || (h[8] = m("div", { class: "title" }, "背景颜色", -1)),
                           ie(qt, {
                             modelValue: ze(t).appState.viewBackgroundColor,
@@ -5932,9 +5934,9 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
                       _: 1
                     }),
                     h[13] || (h[13] = m("div", { class: "line" }, null, -1)),
-                    m("div", $a, [
-                      m("div", _a, [
-                        m("div", Aa, [
+                    m("div", _a, [
+                      m("div", Aa, [
+                        m("div", Da, [
                           h[9] || (h[9] = m("div", null, "使用滚轮缩放画布", -1)),
                           ie(I, {
                             modelValue: ze(t).appState.useWheelZoom,
@@ -5945,9 +5947,9 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
                         h[10] || (h[10] = m("div", { class: "preference-desc" }, "开启后，可通过鼠标滚轮进行缩放画布", -1))
                       ])
                     ]),
-                    m("div", Da, [
-                      m("div", Fa, [
-                        m("div", Oa, [
+                    m("div", Fa, [
+                      m("div", Oa, [
+                        m("div", La, [
                           h[11] || (h[11] = m("div", null, " 右键拖拽平移画布 ", -1)),
                           ie(I, {
                             modelValue: ze(t).appState.rightClickPan,
@@ -5989,7 +5991,7 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
           class: "board-name-input",
           placeholder: "Untitled Document",
           onBlur: f
-        }, null, 8, ["modelValue"])) : (V(), j("div", La, nt(s.value), 1)),
+        }, null, 8, ["modelValue"])) : (V(), j("div", Ra, nt(s.value), 1)),
         e.value ? we("", !0) : (V(), j("div", {
           key: 2,
           class: "action-item",
@@ -6002,11 +6004,11 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
       ], 4);
     };
   }
-}), Xa = /* @__PURE__ */ st(Ra, [["__scopeId", "data-v-59262e76"]]), Ya = { class: "history-controls glass" }, Va = { class: "svg-icon" }, ja = ["xlink:href"], Ha = { class: "svg-icon" }, Wa = ["xlink:href"], Ua = { class: "zoom-controls glass" }, qa = /* @__PURE__ */ Qe({
+}), Ya = /* @__PURE__ */ st(Xa, [["__scopeId", "data-v-59262e76"]]), Va = { class: "history-controls glass" }, ja = { class: "svg-icon" }, Ha = ["xlink:href"], Wa = { class: "svg-icon" }, Ua = ["xlink:href"], qa = { class: "zoom-controls glass" }, Ga = /* @__PURE__ */ Qe({
   __name: "Footer",
   setup(i) {
     const t = ot(), e = () => {
-      Gs.confirm(
+      Ns.confirm(
         "确定要清空画布吗?",
         "提示",
         {
@@ -6033,29 +6035,29 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
         pointerEvents: n.value ? "none" : "auto"
       })
     }, [
-      m("div", Ya, [
+      m("div", Va, [
         m("div", {
           onClick: s,
           class: Xe(["tool-item", { disabled: ze(t).historyStep <= 0 }])
         }, [
-          (V(), j("svg", Va, [
+          (V(), j("svg", ja, [
             m("use", {
               "xlink:href": `${ze(t).historyStep <= 0 ? "#icon-chexiao-copy" : "#icon-chexiao"}`
-            }, null, 8, ja)
+            }, null, 8, Ha)
           ]))
         ], 2),
         m("div", {
           onClick: a,
           class: Xe(["tool-item", { disabled: ze(t).historyStep >= ze(t).history.length - 1 }])
         }, [
-          (V(), j("svg", Ha, [
+          (V(), j("svg", Wa, [
             m("use", {
               "xlink:href": `${ze(t).historyStep >= ze(t).history.length - 1 ? "#icon-huifu-copy" : "#icon-huifu"}`
-            }, null, 8, Wa)
+            }, null, 8, Ua)
           ]))
         ], 2)
       ]),
-      m("div", Ua, [
+      m("div", qa, [
         m("div", {
           class: Xe(["tool-item", { active: ze(t).appState.activeTool === "hand" }]),
           onClick: r[0] || (r[0] = (c) => o())
@@ -6106,7 +6108,7 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
       ])
     ], 4));
   }
-}), Ga = /* @__PURE__ */ st(qa, [["__scopeId", "data-v-06dd6954"]]), Na = /* @__PURE__ */ Qe({
+}), Na = /* @__PURE__ */ st(Ga, [["__scopeId", "data-v-06dd6954"]]), Ka = /* @__PURE__ */ Qe({
   __name: "HelpDialog",
   setup(i) {
     const t = ot(), e = () => {
@@ -6128,44 +6130,44 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
             m("i", { class: "ri-close-line" }, null, -1)
           ])])
         ]),
-        s[2] || (s[2] = Us('<div class="content" data-v-0caac542><div class="column" data-v-0caac542><h3 data-v-0caac542>工具</h3><div class="shortcut-list" data-v-0caac542><div class="item" data-v-0caac542><span data-v-0caac542>抓手 (平移工具)</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>H</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>选择</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>V</kbd> 或 <kbd data-v-0caac542>1</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>图形</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>R</kbd> 或 <kbd data-v-0caac542>2</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>箭头</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>A</kbd> 或 <kbd data-v-0caac542>5</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>线条</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>L</kbd> 或 <kbd data-v-0caac542>6</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>自由书写</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>P</kbd> 或 <kbd data-v-0caac542>7</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>文字</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>T</kbd> 或 <kbd data-v-0caac542>8</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>橡皮</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>E</kbd> 或 <kbd data-v-0caac542>0</kbd></span></div></div><h3 data-v-0caac542>视图</h3><div class="shortcut-list" data-v-0caac542><div class="item" data-v-0caac542><span data-v-0caac542>放大</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>Cmd</kbd><kbd data-v-0caac542>+</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>缩小</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>Cmd</kbd><kbd data-v-0caac542>-</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>重置缩放</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>Cmd</kbd><kbd data-v-0caac542>0</kbd></span></div></div></div><div class="column" data-v-0caac542><h3 data-v-0caac542>编辑器</h3><div class="shortcut-list" data-v-0caac542><div class="item" data-v-0caac542><span data-v-0caac542>全选</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>Cmd</kbd><kbd data-v-0caac542>A</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>删除</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>Delete</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>复制</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>Cmd</kbd><kbd data-v-0caac542>C</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>粘贴</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>Cmd</kbd><kbd data-v-0caac542>V</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>剪切</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>Cmd</kbd><kbd data-v-0caac542>X</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>撤销</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>Cmd</kbd><kbd data-v-0caac542>Z</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>重做</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>Cmd</kbd><kbd data-v-0caac542>Shift</kbd><kbd data-v-0caac542>Z</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>组合</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>Cmd</kbd><kbd data-v-0caac542>G</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>取消组合</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>Cmd</kbd><kbd data-v-0caac542>Shift</kbd><kbd data-v-0caac542>G</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>置于顶层</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>]</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>置于底层</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>[</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>上移一层</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>Option</kbd><kbd data-v-0caac542>]</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>下移一层</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>Option</kbd><kbd data-v-0caac542>[</kbd></span></div></div></div></div>', 1))
+        s[2] || (s[2] = qs('<div class="content" data-v-0caac542><div class="column" data-v-0caac542><h3 data-v-0caac542>工具</h3><div class="shortcut-list" data-v-0caac542><div class="item" data-v-0caac542><span data-v-0caac542>抓手 (平移工具)</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>H</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>选择</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>V</kbd> 或 <kbd data-v-0caac542>1</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>图形</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>R</kbd> 或 <kbd data-v-0caac542>2</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>箭头</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>A</kbd> 或 <kbd data-v-0caac542>5</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>线条</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>L</kbd> 或 <kbd data-v-0caac542>6</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>自由书写</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>P</kbd> 或 <kbd data-v-0caac542>7</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>文字</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>T</kbd> 或 <kbd data-v-0caac542>8</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>橡皮</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>E</kbd> 或 <kbd data-v-0caac542>0</kbd></span></div></div><h3 data-v-0caac542>视图</h3><div class="shortcut-list" data-v-0caac542><div class="item" data-v-0caac542><span data-v-0caac542>放大</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>Cmd</kbd><kbd data-v-0caac542>+</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>缩小</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>Cmd</kbd><kbd data-v-0caac542>-</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>重置缩放</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>Cmd</kbd><kbd data-v-0caac542>0</kbd></span></div></div></div><div class="column" data-v-0caac542><h3 data-v-0caac542>编辑器</h3><div class="shortcut-list" data-v-0caac542><div class="item" data-v-0caac542><span data-v-0caac542>全选</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>Cmd</kbd><kbd data-v-0caac542>A</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>删除</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>Delete</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>复制</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>Cmd</kbd><kbd data-v-0caac542>C</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>粘贴</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>Cmd</kbd><kbd data-v-0caac542>V</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>剪切</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>Cmd</kbd><kbd data-v-0caac542>X</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>撤销</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>Cmd</kbd><kbd data-v-0caac542>Z</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>重做</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>Cmd</kbd><kbd data-v-0caac542>Shift</kbd><kbd data-v-0caac542>Z</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>组合</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>Cmd</kbd><kbd data-v-0caac542>G</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>取消组合</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>Cmd</kbd><kbd data-v-0caac542>Shift</kbd><kbd data-v-0caac542>G</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>置于顶层</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>]</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>置于底层</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>[</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>上移一层</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>Option</kbd><kbd data-v-0caac542>]</kbd></span></div><div class="item" data-v-0caac542><span data-v-0caac542>下移一层</span><span class="keys" data-v-0caac542><kbd data-v-0caac542>Option</kbd><kbd data-v-0caac542>[</kbd></span></div></div></div></div>', 1))
       ])
     ], 4)) : we("", !0);
   }
-}), Ka = /* @__PURE__ */ st(Na, [["__scopeId", "data-v-0caac542"]]), Ja = { class: "popovers-container" }, Za = { class: "popover-content" }, Qa = { class: "sub-tools-container" }, el = ["onClick"], tl = { class: "svg-icon" }, nl = ["xlink:href"], sl = {
+}), Ja = /* @__PURE__ */ st(Ka, [["__scopeId", "data-v-0caac542"]]), Za = { class: "popovers-container" }, Qa = { class: "popover-content" }, el = { class: "sub-tools-container" }, tl = ["onClick"], nl = { class: "svg-icon" }, sl = ["xlink:href"], il = {
   key: 1,
   class: "divider"
-}, il = {
+}, ol = {
   class: "settings-btn",
   title: "背景颜色"
-}, ol = {
+}, al = {
   key: 0,
   class: "svg-icon"
-}, al = { class: "popover-content" }, ll = ["title"], rl = {
+}, ll = { class: "popover-content" }, rl = ["title"], cl = {
   key: 0,
   class: "svg-icon"
-}, cl = {
+}, dl = {
   key: 1,
   class: "svg-icon"
-}, dl = ["xlink:href"], ul = { class: "popover-content" }, hl = { class: "title" }, pl = { class: "title" }, fl = { class: "title" }, gl = { class: "title" }, vl = {
+}, ul = ["xlink:href"], hl = { class: "popover-content" }, pl = { class: "title" }, fl = { class: "title" }, gl = { class: "title" }, vl = { class: "title" }, ml = {
   key: 4,
   class: "divider"
-}, ml = {
+}, yl = {
   class: "settings-btn",
   title: "箭头颜色"
-}, yl = {
+}, xl = {
   key: 0,
   class: "svg-icon"
-}, xl = { class: "popover-content" }, kl = { class: "popover-content" }, wl = {
+}, kl = { class: "popover-content" }, wl = { class: "popover-content" }, bl = {
   key: 7,
   class: "divider"
-}, bl = {
+}, Sl = {
   class: "settings-btn",
   title: "文本颜色"
-}, Sl = ["fill"], Il = ["fill"], Ml = ["fill"], El = { class: "popover-content" }, Cl = {
+}, Il = ["fill"], Ml = ["fill"], El = ["fill"], Cl = { class: "popover-content" }, Tl = {
   key: 9,
   class: "font-size-select"
-}, Tl = /* @__PURE__ */ Qe({
+}, Pl = /* @__PURE__ */ Qe({
   __name: "FloatingPopovers",
   setup(i) {
     const t = ot(), e = J(!1), n = J(!1), s = J(!1), a = J(!1), o = J(!1), l = J(!1), r = J(!1), c = J(null), f = J([
@@ -6188,7 +6190,7 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
     };
     nn(() => {
       window.addEventListener("mousedown", k, !0);
-    }), ws(() => {
+    }), bs(() => {
       window.removeEventListener("mousedown", k, !0);
     });
     const d = () => {
@@ -6370,7 +6372,7 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
     };
     return (O, W) => {
       const $e = it("el-popover"), De = it("el-slider"), xe = it("el-option"), Ye = it("el-select");
-      return V(), j("div", Ja, [
+      return V(), j("div", Za, [
         T.value ? (V(), Tt($e, {
           key: 0,
           placement: "top",
@@ -6392,25 +6394,25 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
             ], -1)
           ])]),
           default: Ae(() => [
-            m("div", Za, [
-              m("div", Qa, [
+            m("div", Qa, [
+              m("div", el, [
                 (V(!0), j(We, null, ut(f.value, (de) => (V(), j("div", {
                   key: de.name,
                   class: Xe(["sub-tool-item", { active: I() === de.name }]),
                   onClick: (on) => tt(de.name)
                 }, [
-                  (V(), j("svg", tl, [
+                  (V(), j("svg", nl, [
                     m("use", {
                       "xlink:href": `${de.icon}`
-                    }, null, 8, nl)
+                    }, null, 8, sl)
                   ]))
-                ], 10, el))), 128))
+                ], 10, tl))), 128))
               ])
             ])
           ]),
           _: 1
         }, 8, ["visible"])) : we("", !0),
-        T.value ? (V(), j("div", sl)) : we("", !0),
+        T.value ? (V(), j("div", il)) : we("", !0),
         b.value ? (V(), Tt($e, {
           key: 2,
           placement: "top",
@@ -6422,8 +6424,8 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
           "onUpdate:visible": W[3] || (W[3] = (de) => e.value = de)
         }, {
           reference: Ae(() => [
-            m("div", il, [
-              G.value == "transparent" || !G.value ? (V(), j("svg", ol, [...W[16] || (W[16] = [
+            m("div", ol, [
+              G.value == "transparent" || !G.value ? (V(), j("svg", al, [...W[16] || (W[16] = [
                 m("use", { "xlink:href": "#icon-wuyanse" }, null, -1)
               ])])) : (V(), j("div", {
                 key: 1,
@@ -6433,9 +6435,9 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
             ])
           ]),
           default: Ae(() => [
-            m("div", al, [
+            m("div", ll, [
               W[17] || (W[17] = m("div", { class: "title" }, "填充样式", -1)),
-              ie(Is),
+              ie(Ms),
               W[18] || (W[18] = m("div", { class: "title" }, "透明度", -1)),
               ie(De, {
                 modelValue: D.value,
@@ -6470,29 +6472,29 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
               title: I() == "arrow" ? "箭头" : "边框"
             }, [
               I() !== "arrow" && I() !== "line" ? (V(), j(We, { key: 0 }, [
-                ee.value == "transparent" || !ee.value ? (V(), j("svg", rl, [...W[20] || (W[20] = [
+                ee.value == "transparent" || !ee.value ? (V(), j("svg", cl, [...W[20] || (W[20] = [
                   m("use", { "xlink:href": "#icon-wubiankuang" }, null, -1)
                 ])])) : (V(), j("div", {
                   key: 1,
                   class: "border-box",
                   style: Ke({ borderColor: ee.value })
                 }, null, 4))
-              ], 64)) : (V(), j("svg", cl, [
+              ], 64)) : (V(), j("svg", dl, [
                 m("use", {
                   "xlink:href": `#${I() == "line" ? "icon-zhixian" : oe.value == "sharp" ? "icon-zhixianlianjiexian" : "icon-quxian"}`
-                }, null, 8, dl)
+                }, null, 8, ul)
               ]))
-            ], 8, ll)
+            ], 8, rl)
           ]),
           default: Ae(() => [
-            m("div", ul, [
+            m("div", hl, [
               X.value ? (V(), j(We, { key: 0 }, [
-                m("div", hl, nt(["arrow", "line"].includes(I()) ? "线条" : "描边") + "样式", 1),
-                ie(Ms)
+                m("div", pl, nt(["arrow", "line"].includes(I()) ? "线条" : "描边") + "样式", 1),
+                ie(Es)
               ], 64)) : we("", !0),
               W[22] || (W[22] = m("div", { class: "title" }, "线条风格", -1)),
-              ie(Es),
-              m("div", pl, nt(["arrow", "line"].includes(I()) ? "线条" : "描边") + "粗细", 1),
+              ie(Cs),
+              m("div", fl, nt(["arrow", "line"].includes(I()) ? "线条" : "描边") + "粗细", 1),
               ie(De, {
                 modelValue: te.value,
                 "onUpdate:modelValue": W[4] || (W[4] = (de) => te.value = de),
@@ -6501,7 +6503,7 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
                 min: 1,
                 max: 10
               }, null, 8, ["modelValue"]),
-              m("div", fl, nt(["arrow", "line"].includes(I()) ? "" : "描边") + "透明度", 1),
+              m("div", gl, nt(["arrow", "line"].includes(I()) ? "" : "描边") + "透明度", 1),
               ie(De, {
                 modelValue: N.value,
                 "onUpdate:modelValue": W[5] || (W[5] = (de) => N.value = de),
@@ -6518,14 +6520,14 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
                 }, null, 8, ["modelValue"])
               ], 64)),
               le.value ? (V(), j(We, { key: 2 }, [
-                m("div", gl, nt(I() == "arrow" ? "箭头" : "线条") + "类型", 1),
-                ie(Ps)
+                m("div", vl, nt(I() == "arrow" ? "箭头" : "线条") + "类型", 1),
+                ie(Bs)
               ], 64)) : we("", !0)
             ])
           ]),
           _: 1
         }, 8, ["visible"])) : we("", !0),
-        le.value ? (V(), j("div", vl)) : we("", !0),
+        le.value ? (V(), j("div", ml)) : we("", !0),
         le.value ? (V(), Tt($e, {
           key: 5,
           placement: "top",
@@ -6537,8 +6539,8 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
           "onUpdate:visible": W[9] || (W[9] = (de) => s.value = de)
         }, {
           reference: Ae(() => [
-            m("div", ml, [
-              ee.value == "transparent" || !ee.value ? (V(), j("svg", yl, [...W[23] || (W[23] = [
+            m("div", yl, [
+              ee.value == "transparent" || !ee.value ? (V(), j("svg", xl, [...W[23] || (W[23] = [
                 m("use", { "xlink:href": "#icon-wuyanse" }, null, -1)
               ])])) : (V(), j("div", {
                 key: 1,
@@ -6548,7 +6550,7 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
             ])
           ]),
           default: Ae(() => [
-            m("div", xl, [
+            m("div", kl, [
               W[24] || (W[24] = m("div", { class: "title" }, [
                 m("span", null, "默认颜色")
               ], -1)),
@@ -6579,7 +6581,7 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
             ], -1)
           ])]),
           default: Ae(() => [
-            m("div", kl, [
+            m("div", wl, [
               W[26] || (W[26] = m("div", { class: "title" }, "圆角", -1)),
               ie(De, {
                 modelValue: ye.value,
@@ -6593,7 +6595,7 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
           ]),
           _: 1
         })) : we("", !0),
-        se.value && b.value ? (V(), j("div", wl)) : we("", !0),
+        se.value && b.value ? (V(), j("div", bl)) : we("", !0),
         se.value ? (V(), Tt($e, {
           key: 8,
           placement: "top",
@@ -6605,7 +6607,7 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
           "onUpdate:visible": W[13] || (W[13] = (de) => o.value = de)
         }, {
           reference: Ae(() => [
-            m("div", bl, [
+            m("div", Sl, [
               (V(), j("svg", {
                 class: "svg-icon",
                 viewBox: "0 0 1024 1024",
@@ -6615,30 +6617,30 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
                   d: "M772.144762 747.52L566.369524 223.817143a24.137143 24.137143 0 0 0-24.380953-16.579048H484.449524c-11.702857 0-19.992381 5.36381-24.380953 16.579048L254.293333 747.52c-6.339048 16.579048-4.87619 32.182857 5.36381 46.811429 10.24 14.628571 23.893333 21.942857 41.935238 21.942857 22.918095 0 38.521905-10.727619 47.299048-32.182857l48.761904-123.855239h232.106667l48.761905 123.855239c8.289524 21.455238 23.893333 32.182857 46.811428 32.182857 18.041905 0 31.695238-7.314286 41.935238-21.942857 10.24-14.628571 11.702857-30.232381 5.36381-46.811429h-0.487619z m-25.356191 33.645714c-5.36381 7.801905-12.190476 11.215238-21.455238 11.215238-11.702857 0-19.992381-5.36381-24.380952-16.579047l-49.737143-126.780953a18.870857 18.870857 0 0 0-18.529524-12.678095H394.727619c-9.264762 0-15.60381 4.388571-18.529524 12.678095l-49.737143 126.780953c-4.388571 11.215238-12.678095 16.579048-24.380952 16.579047-9.264762 0-16.579048-3.900952-21.942857-11.702857a24.380952 24.380952 0 0 1-2.925714-24.380952L482.986667 232.594286s0.975238-0.975238 1.950476-0.975238h57.539047s1.462857 0 1.950477 0.975238l205.775238 523.702857a24.380952 24.380952 0 0 1-2.925715 24.380952l-0.487619 0.487619z",
                   fill: he.value == "transparent" ? "#EEEFF0" : he.value,
                   "p-id": "4210"
-                }, null, 8, Sl),
+                }, null, 8, Il),
                 m("path", {
                   d: "M529.310476 338.895238c-2.925714-7.314286-8.289524-10.727619-16.091428-10.727619s-13.165714 3.413333-16.091429 10.727619l-86.79619 220.40381c-2.438095 5.36381-1.462857 10.727619 1.950476 16.091428 3.413333 4.87619 8.289524 7.314286 14.140952 7.314286h173.104762c5.851429 0 10.727619-2.438095 14.140952-7.314286 3.413333-4.87619 3.900952-10.24 1.950477-16.091428l-86.308572-220.40381z m-91.672381 219.428572l76.068572-193.097143 75.580952 193.097143H437.638095z",
                   fill: he.value == "transparent" ? "#EEEFF0" : he.value,
                   "p-id": "4211"
-                }, null, 8, Il),
+                }, null, 8, Ml),
                 m("path", {
                   d: "M700.952381 775.801905c4.388571 11.215238 12.678095 16.579048 24.380952 16.579047 9.264762 0 16.579048-3.900952 21.455238-11.215238a24.380952 24.380952 0 0 0 2.925715-24.380952L543.939048 233.081905s-0.975238-0.975238-1.950477-0.975238H484.449524s-1.462857 0-1.950476 0.975238L276.72381 756.784762a24.380952 24.380952 0 0 0 2.925714 24.380952c5.36381 7.801905 12.678095 11.702857 21.942857 11.702857 11.702857 0 19.992381-5.36381 24.380952-16.579047l49.737143-126.780953c3.413333-8.289524 9.752381-12.678095 18.529524-12.678095h237.958095c9.264762 0 15.60381 4.388571 18.529524 12.678095l49.737143 126.780953 0.487619-0.487619z m-274.529524-193.097143c-5.851429 0-10.727619-2.438095-14.140952-7.314286a17.066667 17.066667 0 0 1-1.950476-16.091428l86.79619-220.40381c2.925714-7.314286 8.289524-10.727619 16.091429-10.727619s13.165714 3.413333 16.091428 10.727619l86.308572 220.40381c2.438095 5.36381 1.462857 10.727619-1.950477 16.091428-3.413333 4.87619-8.289524 7.314286-14.140952 7.314286H426.422857z",
                   fill: he.value,
                   "p-id": "4212"
-                }, null, 8, Ml)
+                }, null, 8, El)
               ], 4))
             ])
           ]),
           default: Ae(() => [
-            m("div", El, [
+            m("div", Cl, [
               W[27] || (W[27] = m("div", { class: "title" }, [
                 m("span", null, "文本样式")
               ], -1)),
-              ie(Cs),
+              ie(Ts),
               W[28] || (W[28] = m("div", { class: "title" }, [
                 m("span", null, "对齐方式")
               ], -1)),
-              ie(Ts),
+              ie(Ps),
               W[29] || (W[29] = m("div", { class: "title" }, [
                 m("span", null, "字体颜色")
               ], -1)),
@@ -6657,7 +6659,7 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
           ]),
           _: 1
         }, 8, ["visible"])) : we("", !0),
-        se.value ? (V(), j("div", Cl, [
+        se.value ? (V(), j("div", Tl, [
           ie(Ye, {
             modelValue: ke.value,
             "onUpdate:modelValue": W[14] || (W[14] = (de) => ke.value = de),
@@ -6677,10 +6679,10 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
       ]);
     };
   }
-}), Pl = /* @__PURE__ */ st(Tl, [["__scopeId", "data-v-1fe4c384"]]), Bl = {
+}), Bl = /* @__PURE__ */ st(Pl, [["__scopeId", "data-v-1fe4c384"]]), zl = {
   key: 0,
   class: "divider"
-}, zl = ["title"], $l = { class: "svg-icon" }, _l = ["xlink:href"], Al = /* @__PURE__ */ Qe({
+}, $l = ["title"], _l = { class: "svg-icon" }, Al = ["xlink:href"], Dl = /* @__PURE__ */ Qe({
   __name: "FloatingPropertiesBar",
   props: {
     zoom: {},
@@ -6759,8 +6761,8 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
           m("use", { "xlink:href": "#icon-tuodong" })
         ], -1)
       ])], 32),
-      !c.value && !f.value ? (V(), j("div", Bl)) : we("", !0),
-      ie(Pl),
+      !c.value && !f.value ? (V(), j("div", zl)) : we("", !0),
+      ie(Bl),
       q[2] || (q[2] = m("div", { class: "divider" }, null, -1)),
       k.value ? (V(), j("div", {
         key: 1,
@@ -6768,12 +6770,12 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
         onClick: Mt(B, ["stop"]),
         title: b.value ? "解除编组" : "编组"
       }, [
-        (V(), j("svg", $l, [
+        (V(), j("svg", _l, [
           m("use", {
             "xlink:href": b.value ? "#icon-quxiaobianzu" : "#icon-bianzu"
-          }, null, 8, _l)
+          }, null, 8, Al)
         ]))
-      ], 8, zl)) : we("", !0),
+      ], 8, $l)) : we("", !0),
       m("div", {
         class: "settings-btn",
         onClick: Mt(T, ["stop"]),
@@ -6785,7 +6787,7 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
       ])])
     ], 4)) : we("", !0);
   }
-}), Dl = /* @__PURE__ */ st(Al, [["__scopeId", "data-v-206d2632"]]), Fl = { class: "app-container" }, ks = /* @__PURE__ */ Qe({
+}), Fl = /* @__PURE__ */ st(Dl, [["__scopeId", "data-v-206d2632"]]), Ol = { class: "app-container" }, ws = /* @__PURE__ */ Qe({
   __name: "App",
   setup(i) {
     const t = ot();
@@ -6794,30 +6796,30 @@ const pa = { key: 0 }, fa = { key: 1 }, ga = /* @__PURE__ */ Qe({
         const e = JSON.parse(JSON.stringify(t.elements)), n = JSON.parse(JSON.stringify(t.appState));
         return console.log("Canvas Elements:", e), console.log("Canvas Config (AppState):", n), { elements: e, appState: n };
       };
-    }), (e, n) => (V(), j("div", Fl, [
-      ie(Ii),
-      ie(Xo),
-      ie(Xa),
-      ie(wa, {
+    }), (e, n) => (V(), j("div", Ol, [
+      ie(Mi),
+      ie(Yo),
+      ie(Ya),
+      ie(ba, {
         elements: ze(t).elements,
         zoom: ze(t).appState.zoom,
         scrollX: ze(t).appState.scrollX,
         scrollY: ze(t).appState.scrollY
       }, null, 8, ["elements", "zoom", "scrollX", "scrollY"]),
-      ie(Dl, {
+      ie(Fl, {
         zoom: ze(t).appState.zoom,
         scrollX: ze(t).appState.scrollX,
         scrollY: ze(t).appState.scrollY
       }, null, 8, ["zoom", "scrollX", "scrollY"]),
-      ie(Ga),
-      ie(Ka)
+      ie(Na),
+      ie(Ja)
     ]));
   }
 });
-ks.install = function(i) {
-  i.component("JvsDraw", ks);
+ws.install = function(i) {
+  i.component("JvsDraw", ws);
 };
 export {
-  ks as JvsDraw,
-  ks as default
+  ws as JvsDraw,
+  ws as default
 };