jvs-draw 1.0.3 → 1.0.4

package/dist/jvs-draw.es.js

@@ -1,10 +1,10 @@
-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) => [
+import { markRaw as On, defineComponent as Qe, computed as U, ref as J, watch as Mt, resolveComponent as it, createElementBlock as j, openBlock as X, normalizeStyle as Ke, createElementVNode as m, normalizeClass as Xe, Fragment as We, renderList as ut, createBlock as wt, withCtx as Ae, createCommentVNode as ye, toDisplayString as nt, unref as Se, createVNode as ae, nextTick as Rt, withModifiers as Et, onMounted as nn, onUnmounted as bs, withDirectives as Hs, vModelText as Ws, mergeModels as Us, useModel as qs, createStaticVNode as Gs } from "vue";
+import { defineStore as Ns } from "pinia";
+import { ElMessageBox as Ks } from "element-plus";
+const Js = (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) => Ks(i[0], i[1], t[0], t[1], e), Js = (i) => {
+], me = (i, t, e) => Js(i[0], i[1], t[0], t[1], e), Zs = (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],
@@ -20,7 +20,7 @@ const Ks = (i, t, e, n, s) => [
 }, as = (i, t, e, n) => {
   const s = e - i, a = n - t;
   return Math.hypot(s, a);
-}, Zs = (i, t) => {
+}, Qs = (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 Ks = (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 Zs(i, t);
+  if (i.length < 3) return Qs(i, t);
   let e = "";
   const n = i.length;
   for (let s = 0; s < n; s++) {
@@ -47,13 +47,13 @@ const Ks = (i, t, e, n, s) => [
 }, ft = (i, t, e, n, s, a, o) => {
   const [l, r] = me([i, t], [e + s / 2, n + a / 2], -o);
   return l >= e && l <= e + s && r >= n && r <= n + a;
-}, Ct = (i, t, e, n, s, a, o) => {
+}, Tt = (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 = s / 2, d = a / 2;
   return (l - c) ** 2 / k ** 2 + (r - f) ** 2 / d ** 2 <= 1;
 }, 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;
-}, Qs = (i, t, e, n, s, a, o, l = 5) => {
+}, ei = (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) => {
@@ -75,7 +75,7 @@ const Ks = (i, t, e, n, s) => [
     if (qn([i, t], f, k) <= l) return !0;
   }
   return !1;
-}, bt = (i, t) => {
+}, St = (i, t) => {
   const s = [];
   for (let k = 0; k < 10; k++) {
     const d = k * Math.PI / 5 - Math.PI / 2, v = k % 2 === 0 ? 1 : 0.4;
@@ -96,7 +96,7 @@ const Ks = (i, t, e, n, s) => [
   [i, 0],
   [i * 0.75, t],
   [0, t]
-], ei = (i, t) => [
+], ti = (i, t) => [
   [i / 2, 0],
   [i, t / 2],
   [i / 2, t],
@@ -106,20 +106,20 @@ const Ks = (i, t, e, n, s) => [
   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;
-}, ti = (i, t, e, n, s, a, o, l = 5) => {
+}, ni = (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 && 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 qn([r, c], d, v) <= l * l || qn([r, c], h, M) <= l * l;
-}, ni = (i, t, e, n, s, a, o, l = 5) => {
+}, si = (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;
 }, 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;
-}, si = (i) => {
+}, ii = (i) => {
   if (i.type !== "arrow") return null;
   const t = i.points;
   if (t.length < 2) return null;
@@ -149,31 +149,31 @@ const Ks = (i, t, e, n, s) => [
       }
     }
   } else if (["ellipse", "circle", "cylinder"].includes(i.type)) {
-    const h = o / 2 + n, M = l / 2 + n, I = d[0] - k[0], T = d[1] - k[1], b = k[0] - c, B = k[1] - f, X = I * I / (h * h) + T * T / (M * M), q = 2 * b * I / (h * h) + 2 * B * T / (M * M), se = b * b / (h * h) + B * B / (M * M) - 1, le = q * q - 4 * X * se;
+    const h = o / 2 + n, M = l / 2 + n, I = d[0] - k[0], T = d[1] - k[1], b = k[0] - c, B = k[1] - f, Y = I * I / (h * h) + T * T / (M * M), q = 2 * b * I / (h * h) + 2 * B * T / (M * M), se = b * b / (h * h) + B * B / (M * M) - 1, le = q * q - 4 * Y * se;
     if (le >= 0) {
-      const oe = (-q - Math.sqrt(le)) / (2 * X), ee = (-q + Math.sqrt(le)) / (2 * X);
+      const ie = (-q - Math.sqrt(le)) / (2 * Y), ee = (-q + Math.sqrt(le)) / (2 * Y);
       let G = -1;
-      oe >= 0 && oe <= 1 ? G = oe : ee >= 0 && ee <= 1 ? G = ee : oe > 0 && oe < ee ? G = oe : ee > 0 && (G = ee), G >= 0 && G <= 1 && (v = [k[0] + G * I, k[1] + G * T]);
+      ie >= 0 && ie <= 1 ? G = ie : ee >= 0 && ee <= 1 ? G = ee : ie > 0 && ie < ee ? G = ie : ee > 0 && (G = ee), G >= 0 && G <= 1 && (v = [k[0] + G * I, k[1] + G * T]);
     }
   } else if (["diamond", "decision", "star", "trapezoid", "parallelogram"].includes(i.type)) {
     const h = s + o / 2, M = a + l / 2;
     let I = [];
     if (["diamond", "decision"].includes(i.type)) {
-      const b = [h, a - n], B = [s + o + n, M], X = [h, a + l + n], q = [s - n, M];
+      const b = [h, a - n], B = [s + o + n, M], Y = [h, a + l + n], q = [s - n, M];
       I = [
         [b, B],
-        [B, X],
-        [X, q],
+        [B, Y],
+        [Y, q],
         [q, b]
       ];
     } else if (i.type === "trapezoid") {
-      const b = [s + o * 0.2 - n, a - n], B = [s + o * 0.8 + n, a - n], X = [s + o + n, a + l + n], q = [s - n, a + l + n];
-      I = [[b, B], [B, X], [X, q], [q, b]];
+      const b = [s + o * 0.2 - n, a - n], B = [s + o * 0.8 + n, a - n], Y = [s + o + n, a + l + n], q = [s - n, a + l + n];
+      I = [[b, B], [B, Y], [Y, q], [q, b]];
     } else if (i.type === "parallelogram") {
-      const b = [s + o * 0.25 - n, a - n], B = [s + o + n, a - n], X = [s + o * 0.75 + n, a + l + n], q = [s - n, a + l + n];
-      I = [[b, B], [B, X], [X, q], [q, b]];
+      const b = [s + o * 0.25 - n, a - n], B = [s + o + n, a - n], Y = [s + o * 0.75 + n, a + l + n], q = [s - n, a + l + n];
+      I = [[b, B], [B, Y], [Y, q], [q, b]];
     } else if (i.type === "star") {
-      const b = bt(o, l).map((B) => [B[0] + s, B[1] + a]);
+      const b = St(o, l).map((B) => [B[0] + s, B[1] + a]);
       for (let B = 0; B < b.length; B++)
         I.push([b[B], b[(B + 1) % b.length]]);
     }
@@ -181,13 +181,13 @@ const Ks = (i, t, e, n, s) => [
     for (const b of I) {
       const B = cs(k, d, b[0], b[1]);
       if (B) {
-        const X = as(k[0], k[1], B[0], B[1]);
-        X < T && (T = X, v = B);
+        const Y = as(k[0], k[1], B[0], B[1]);
+        Y < T && (T = Y, v = B);
       }
     }
   }
   return v ? me(v, [c, f], r) : null;
-}, ii = (i, t, e) => {
+}, oi = (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);
@@ -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 };
   }
-}, oi = (i, t = 0.5, e = 10) => {
+}, ai = (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;
-}, ai = (i) => {
+}, li = (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 = ai(a);
+    const o = li(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,
@@ -289,17 +289,17 @@ const Ne = (i, t, e, n, s) => {
   let h = r;
   if (n.type === "arrow") {
     if (n.arrowType === "round" && r.length > 2)
-      h = oi(r);
+      h = ai(r);
     else if (n.arrowType === "elbow") {
       let M, I;
       if (s && (n.startBinding || n.endBinding)) {
         const T = (b) => {
           if (!b) return;
-          const B = s.find((ye) => ye.id === b.elementId);
+          const B = s.find((xe) => xe.id === b.elementId);
           if (!B) return;
-          const X = b.focus < 0 ? n.points[0] : n.points[n.points.length - 1];
-          if (!X) return;
-          const q = n.x + X[0], se = n.y + X[1], le = B.x, oe = B.y, ee = B.width, G = B.height, he = Math.abs(q - le), H = Math.abs(q - (le + ee)), D = Math.abs(se - oe), N = Math.abs(se - (oe + G)), te = Math.min(he, H, D, N);
+          const Y = b.focus < 0 ? n.points[0] : n.points[n.points.length - 1];
+          if (!Y) return;
+          const q = n.x + Y[0], se = n.y + Y[1], le = B.x, ie = B.y, ee = B.width, G = B.height, he = Math.abs(q - le), H = Math.abs(q - (le + ee)), D = Math.abs(se - ie), N = Math.abs(se - (ie + G)), te = Math.min(he, H, D, N);
           if (te === he) return [-1, 0];
           if (te === H) return [1, 0];
           if (te === D) return [0, -1];
@@ -312,7 +312,7 @@ const Ne = (i, t, e, n, s) => {
   }
   for (let M = 0; M < h.length - 1; M++) {
     const I = h[M], T = h[M + 1];
-    if (ii([d, v], I, T) <= i) return !0;
+    if (oi([d, v], I, T) <= i) return !0;
   }
   return !1;
 }, Zn = (i, t, e) => {
@@ -323,7 +323,7 @@ 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;
-}, li = (i, t = 20, e, n) => {
+}, ri = (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++) {
@@ -339,24 +339,34 @@ const Ne = (i, t, e, n, s) => {
       o += ` L ${f[0]} ${f[1]}`;
       continue;
     }
-    const b = Math.min(t, h / 2, T / 2), B = f[0] - d / h * b, X = f[1] - v / h * b, q = f[0] + M / T * b, se = f[1] + I / T * b;
-    o += ` L ${B} ${X}`, o += ` Q ${f[0]} ${f[1]} ${q} ${se}`;
+    const b = Math.min(t, h / 2, T / 2), B = f[0] - d / h * b, Y = f[1] - v / h * b, q = f[0] + M / T * b, se = f[1] + I / T * b;
+    o += ` L ${B} ${Y}`, o += ` Q ${f[0]} ${f[1]} ${q} ${se}`;
   }
   const l = a[a.length - 1];
   return o += ` L ${l[0]} ${l[1]}`, o;
-}, ri = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
-let St = (i = 21) => {
+}, ci = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
+let It = (i = 21) => {
   let t = "", e = crypto.getRandomValues(new Uint8Array(i |= 0));
   for (; i--; )
-    t += ri[e[i] & 63];
+    t += ci[e[i] & 63];
   return t;
 };
-const ot = Gs("excalidraw", {
+const Is = {
+  showToolbar: !0,
+  showBoardName: !0,
+  showFooter: !0,
+  showPropertiesPanel: !0
+}, di = (i) => {
+  Object.assign(Is, i);
+}, ot = Ns("excalidraw", {
   state: () => ({
     // State initialized correctly
     elements: [],
     history: On([[]]),
     historyStep: 0,
+    appConfig: {
+      ...Is
+    },
     appState: {
       lockedTool: !1,
       viewBackgroundColor: "#FFFFFF",
@@ -440,7 +450,7 @@ const ot = Gs("excalidraw", {
     },
     insertImage(i, t, e, n, s) {
       const a = {
-        id: St(),
+        id: It(),
         type: "image",
         x: t,
         y: e,
@@ -462,7 +472,7 @@ const ot = Gs("excalidraw", {
         updated: Date.now(),
         link: null,
         locked: !1,
-        fileId: St(),
+        fileId: It(),
         status: "saved",
         scale: [1, 1],
         dataURL: i
@@ -592,8 +602,8 @@ const ot = Gs("excalidraw", {
             let v = null;
             const h = a.has(o.endBinding.elementId), M = o.startBinding && a.has(o.startBinding.elementId);
             if (o.endBinding.fixedPoint && !o.endBinding.isBorder) {
-              const [I, T] = o.endBinding.fixedPoint, b = d.x + d.width / 2, B = d.y + d.height / 2, X = d.x + I * d.width, q = d.y + T * d.height;
-              v = me([X, q], [b, B], d.angle);
+              const [I, T] = o.endBinding.fixedPoint, b = d.x + d.width / 2, B = d.y + d.height / 2, Y = d.x + I * d.width, q = d.y + T * d.height;
+              v = me([Y, q], [b, B], d.angle);
             } else {
               let I = l.length > 1 ? l[l.length - 2] : l[l.length - 1];
               M && l.length === 2 && (I = [I[0] + t, I[1] + e]);
@@ -602,10 +612,10 @@ const ot = Gs("excalidraw", {
             }
             if (v) {
               l[l.length - 1] = [v[0], v[1]], r = !0;
-              const I = d.x + d.width / 2, T = d.y + d.height / 2, b = me(v, [I, T], -d.angle), B = (b[0] - d.x) / d.width, X = (b[1] - d.y) / d.height;
+              const I = d.x + d.width / 2, T = d.y + d.height / 2, b = me(v, [I, T], -d.angle), B = (b[0] - d.x) / d.width, Y = (b[1] - d.y) / d.height;
               o.endBinding && (o.endBinding = {
                 ...o.endBinding,
-                fixedPoint: [B, X]
+                fixedPoint: [B, Y]
               });
             } else {
               const I = l[l.length - 1];
@@ -772,20 +782,20 @@ const ot = Gs("excalidraw", {
         } catch {
         }
         if (!s) {
-          const b = "sans-serif", X = n.split(`
+          const b = "sans-serif", Y = n.split(`
 `);
-          let q = 10, se = X.length * 25 + 10;
-          const oe = document.createElement("canvas").getContext("2d");
-          if (oe) {
-            oe.font = `20px ${b}`;
+          let q = 10, se = Y.length * 25 + 10;
+          const ie = document.createElement("canvas").getContext("2d");
+          if (ie) {
+            ie.font = `20px ${b}`;
             let G = 0;
-            X.forEach((he) => {
-              const H = oe.measureText(he).width;
+            Y.forEach((he) => {
+              const H = ie.measureText(he).width;
               H > G && (G = H);
             }), q = G + 10;
           }
           const ee = {
-            id: St(),
+            id: It(),
             type: "text",
             x: t,
             y: e,
@@ -828,7 +838,7 @@ const ot = Gs("excalidraw", {
         });
         const f = (o + r) / 2, k = (l + c) / 2, d = t - f, v = e - k, h = {}, M = [];
         s.forEach((T) => {
-          const b = St();
+          const b = It();
           h[T.id] = b;
         }), s.forEach((T) => {
           const b = {
@@ -873,7 +883,7 @@ const ot = Gs("excalidraw", {
         });
       });
       const s = this.elements.filter((c) => e.has(c.id) || e.has(c.containerId)), a = /* @__PURE__ */ new Map(), o = s.map((c) => {
-        const f = St();
+        const f = It();
         a.set(c.id, f);
         const k = JSON.parse(JSON.stringify(c));
         return delete k.roughElement, delete k.shape, {
@@ -889,7 +899,7 @@ const ot = Gs("excalidraw", {
       }), l = /* @__PURE__ */ new Map();
       o.forEach((c) => {
         if (c.containerId && a.has(c.containerId) && (c.containerId = a.get(c.containerId)), (c.type === "arrow" || c.type === "line") && (c.startBinding && a.has(c.startBinding.elementId) && (c.startBinding = { ...c.startBinding, elementId: a.get(c.startBinding.elementId) }), c.endBinding && a.has(c.endBinding.elementId) && (c.endBinding = { ...c.endBinding, elementId: a.get(c.endBinding.elementId) })), c.groupIds && c.groupIds.length > 0) {
-          const f = c.groupIds.map((k) => (l.has(k) || l.set(k, St()), l.get(k)));
+          const f = c.groupIds.map((k) => (l.has(k) || l.set(k, It()), l.get(k)));
           c.groupIds = f;
         }
       }), this.elements = [...this.elements, ...o];
@@ -939,7 +949,7 @@ const ot = Gs("excalidraw", {
       });
       if (console.log(`Group Elements: Input ${i.length}, Allowed ${t.length}`), t.length < 2) return;
       this.recordHistory();
-      const e = St();
+      const e = It();
       this.elements = this.elements.map((n) => t.includes(n.id) ? { ...n, groupIds: [...n.groupIds, e], updated: Date.now() } : n), this.setSelectedElementIds(i);
     },
     ungroupElements(i) {
@@ -995,7 +1005,7 @@ const ot = Gs("excalidraw", {
       }
     }
   }
-}), Is = () => new Promise((i) => {
+}), Ms = () => new Promise((i) => {
   const t = document.createElement("input");
   t.type = "file", t.accept = "image/*";
   let e = !1;
@@ -1033,17 +1043,17 @@ const ot = Gs("excalidraw", {
     }, 500);
   };
   window.addEventListener("focus", n), t.click();
-}), ci = { class: "tool-group" }, di = { class: "svg-icon" }, ui = ["xlink:href"], hi = ["title"], pi = { class: "svg-icon" }, fi = ["xlink:href"], gi = {
+}), ui = { class: "tool-group" }, hi = { class: "svg-icon" }, pi = ["xlink:href"], fi = ["title"], gi = { class: "svg-icon" }, vi = ["xlink:href"], mi = {
   key: 0,
   class: "shortcut"
-}, 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 = {
+}, yi = { class: "sub-tools-container" }, xi = ["onClick"], ki = { class: "svg-icon" }, wi = ["xlink:href"], bi = ["onClick", "title"], Si = { class: "svg-icon" }, Ii = ["xlink:href"], Mi = {
   key: 0,
   class: "shortcut"
-}, Ii = /* @__PURE__ */ Qe({
+}, Ei = /* @__PURE__ */ Qe({
   __name: "Toolbar",
   setup(i) {
     const t = ot(), e = U(() => t.appState.activeTool), n = U(() => t.appState.activeToolType), s = J(!1);
-    It(() => e.value, (d) => {
+    Mt(() => e.value, (d) => {
       d === "shapes" ? s.value = !0 : s.value = !1;
     });
     const a = [
@@ -1082,7 +1092,7 @@ const ot = Gs("excalidraw", {
       if (s.value = !1, d === "image") {
         const v = t.appState.activeTool;
         t.setTool("image");
-        const h = await Is();
+        const h = await Ms();
         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);
@@ -1103,26 +1113,26 @@ const ot = Gs("excalidraw", {
     }
     return (d, v) => {
       const h = it("el-popover");
-      return V(), j("div", {
+      return X(), j("div", {
         class: "toolbar glass",
         style: Ke({ pointerEvents: r.value ? "none" : "auto" })
       }, [
-        m("div", ci, [
+        m("div", ui, [
           m("div", {
             class: Xe({ "tool-item": !0, active: o.value }),
             onClick: k,
             title: "绘制后保持所选工具状态"
           }, [
-            (V(), j("svg", di, [
+            (X(), j("svg", hi, [
               m("use", {
                 "xlink:href": `${o.value ? "#icon-zujiansuoding" : "#icon-zujianjiesuo"}`
-              }, null, 8, ui)
+              }, null, 8, pi)
             ]))
           ], 2),
-          (V(), j(We, null, ut(a, (M) => (V(), j(We, {
+          (X(), j(We, null, ut(a, (M) => (X(), j(We, {
             key: M.name
           }, [
-            M.subTools ? (V(), Tt(h, {
+            M.subTools ? (X(), wt(h, {
               key: 0,
               placement: "right-start",
               trigger: "click",
@@ -1139,45 +1149,45 @@ const ot = Gs("excalidraw", {
                   class: Xe({ "tool-item": !0, active: e.value === M.name }),
                   title: M.label
                 }, [
-                  (V(), j("svg", pi, [
+                  (X(), j("svg", gi, [
                     m("use", {
                       "xlink:href": `${e.value === M.name ? M.activeIcon : M.icon}`
-                    }, null, 8, fi)
+                    }, null, 8, vi)
                   ])),
-                  M.key ? (V(), j("span", gi, nt(M.key), 1)) : we("", !0)
-                ], 10, hi)
+                  M.key ? (X(), j("span", mi, nt(M.key), 1)) : ye("", !0)
+                ], 10, fi)
               ]),
               default: Ae(() => [
-                m("div", vi, [
-                  (V(!0), j(We, null, ut(M.subTools, (I) => (V(), j("div", {
+                m("div", yi, [
+                  (X(!0), j(We, null, ut(M.subTools, (I) => (X(), 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", yi, [
+                    (X(), j("svg", ki, [
                       m("use", {
                         "xlink:href": `${I.icon}`
-                      }, null, 8, xi)
+                      }, null, 8, wi)
                     ]))
-                  ], 10, mi))), 128))
+                  ], 10, xi))), 128))
                 ])
               ]),
               _: 2
-            }, 1032, ["visible"])) : (V(), j("div", {
+            }, 1032, ["visible"])) : (X(), j("div", {
               key: 1,
               class: Xe({ "tool-item": !0, active: e.value === M.name, "trand-line": M.name === "trand" }),
               onClick: (I) => M.name !== "trand" ? l(M.name) : null,
               title: M.label
             }, [
-              M.name !== "trand" ? (V(), j(We, { key: 0 }, [
-                (V(), j("svg", wi, [
+              M.name !== "trand" ? (X(), j(We, { key: 0 }, [
+                (X(), j("svg", Si, [
                   m("use", {
                     "xlink:href": `${e.value === M.name ? M.activeIcon : M.icon}`
-                  }, null, 8, bi)
+                  }, null, 8, Ii)
                 ])),
-                M.key ? (V(), j("span", Si, nt(M.key), 1)) : we("", !0)
-              ], 64)) : we("", !0)
-            ], 10, ki))
+                M.key ? (X(), j("span", Mi, nt(M.key), 1)) : ye("", !0)
+              ], 64)) : ye("", !0)
+            ], 10, bi))
           ], 64))), 64))
         ])
       ], 4);
@@ -1188,7 +1198,7 @@ const ot = Gs("excalidraw", {
   for (const [n, s] of t)
     e[n] = s;
   return e;
-}, Mi = /* @__PURE__ */ st(Ii, [["__scopeId", "data-v-b6ea5f5c"]]);
+}, Ci = /* @__PURE__ */ st(Ei, [["__scopeId", "data-v-b6ea5f5c"]]);
 function ds(i) {
   let t;
   if (i > 100 && (i = 100), i < 0 || i > 100)
@@ -1201,7 +1211,7 @@ function pn(i) {
   const t = parseInt(i, 16);
   return isNaN(t) ? 100 : Math.round(t / 255 * 100);
 }
-const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-icon" }, Pi = ["xlink:href"], Bi = /* @__PURE__ */ Qe({
+const Ti = { class: "fill-style-box" }, Pi = ["onClick"], Bi = { class: "svg-icon" }, zi = ["xlink:href"], $i = /* @__PURE__ */ Qe({
   __name: "fillStyle",
   setup(i) {
     const t = ot(), e = U(() => {
@@ -1234,21 +1244,21 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
     ]), a = (o) => {
       t.updateSelectedElements({ fillStyle: o });
     };
-    return (o, l) => (V(), j("div", Ei, [
-      (V(!0), j(We, null, ut(s.value, (r, c) => (V(), j("div", {
+    return (o, l) => (X(), j("div", Ti, [
+      (X(!0), j(We, null, ut(s.value, (r, c) => (X(), j("div", {
         key: c,
         class: Xe(["fill-style-item", { active: e.value === r.value }]),
         onClick: (f) => a(r.value)
       }, [
-        (V(), j("svg", Ti, [
+        (X(), j("svg", Bi, [
           m("use", {
             "xlink:href": `#${e.value === r.value ? r.iconActive : r.icon}`
-          }, null, 8, Pi)
+          }, null, 8, zi)
         ]))
-      ], 10, Ci))), 128))
+      ], 10, Pi))), 128))
     ]));
   }
-}), 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({
+}), Es = /* @__PURE__ */ st($i, [["__scopeId", "data-v-9356d2e1"]]), _i = { class: "fill-style-box" }, Ai = ["onClick"], Di = { class: "svg-icon" }, Fi = ["xlink:href"], Oi = /* @__PURE__ */ Qe({
   __name: "borderStyle",
   setup(i) {
     const t = ot(), e = U(() => {
@@ -1281,21 +1291,21 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
     ]), a = (o) => {
       t.updateSelectedElements({ strokeStyle: o });
     };
-    return (o, l) => (V(), j("div", zi, [
-      (V(!0), j(We, null, ut(s.value, (r, c) => (V(), j("div", {
+    return (o, l) => (X(), j("div", _i, [
+      (X(!0), j(We, null, ut(s.value, (r, c) => (X(), j("div", {
         key: c,
         class: Xe(["fill-style-item", { active: e.value === r.value }]),
         onClick: (f) => a(r.value)
       }, [
-        (V(), j("svg", _i, [
+        (X(), j("svg", Di, [
           m("use", {
             "xlink:href": `#${e.value === r.value ? r.iconActive : r.icon}`
-          }, null, 8, Ai)
+          }, null, 8, Fi)
         ]))
-      ], 10, $i))), 128))
+      ], 10, Ai))), 128))
     ]));
   }
-}), 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({
+}), Cs = /* @__PURE__ */ st(Oi, [["__scopeId", "data-v-dcf857c8"]]), Li = { class: "fill-style-box" }, Ri = ["onClick"], Xi = { class: "svg-icon" }, Yi = ["xlink:href"], Vi = /* @__PURE__ */ Qe({
   __name: "lineStyle",
   setup(i) {
     const t = ot(), e = U(() => {
@@ -1328,21 +1338,21 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
     ]), a = (o) => {
       t.updateSelectedElements({ roughness: o });
     };
-    return (o, l) => (V(), j("div", Fi, [
-      (V(!0), j(We, null, ut(s.value, (r, c) => (V(), j("div", {
+    return (o, l) => (X(), j("div", Li, [
+      (X(!0), j(We, null, ut(s.value, (r, c) => (X(), j("div", {
         key: c,
         class: Xe(["fill-style-item", { active: e.value === r.value }]),
         onClick: (f) => a(r.value)
       }, [
-        (V(), j("svg", Li, [
+        (X(), j("svg", Xi, [
           m("use", {
             "xlink:href": `#${e.value === r.value ? r.iconActive : r.icon}`
-          }, null, 8, Ri)
+          }, null, 8, Yi)
         ]))
-      ], 10, Oi))), 128))
+      ], 10, Ri))), 128))
     ]));
   }
-}), 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({
+}), Ts = /* @__PURE__ */ st(Vi, [["__scopeId", "data-v-794ba895"]]), ji = { class: "fill-style-box" }, Hi = ["onClick"], Wi = { class: "svg-icon" }, Ui = ["xlink:href"], qi = /* @__PURE__ */ Qe({
   __name: "textStyle",
   setup(i) {
     const t = ot(), e = () => {
@@ -1394,21 +1404,21 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
         value: "strikethrough"
       }
     ]);
-    return (o, l) => (V(), j("div", Yi, [
-      (V(!0), j(We, null, ut(a.value, (r, c) => (V(), j("div", {
+    return (o, l) => (X(), j("div", ji, [
+      (X(!0), j(We, null, ut(a.value, (r, c) => (X(), j("div", {
         key: c,
         class: Xe(["fill-style-item", { active: n(r.value) }]),
         onClick: (f) => s(r.value)
       }, [
-        (V(), j("svg", ji, [
+        (X(), j("svg", Wi, [
           m("use", {
             "xlink:href": `#${n(r.value) ? r.iconActive : r.icon}`
-          }, null, 8, Hi)
+          }, null, 8, Ui)
         ]))
-      ], 10, Vi))), 128))
+      ], 10, Hi))), 128))
     ]));
   }
-}), 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({
+}), Ps = /* @__PURE__ */ st(qi, [["__scopeId", "data-v-36600f47"]]), Gi = ["onClick"], Ni = { class: "svg-icon" }, Ki = ["xlink:href"], Ji = ["onClick"], Zi = { class: "svg-icon" }, Qi = ["xlink:href"], eo = /* @__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 = () => {
@@ -1477,34 +1487,34 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
     function v(h) {
       t.updateSelectedElements({ verticalAlign: h });
     }
-    return (h, M) => (V(), j("div", {
+    return (h, M) => (X(), j("div", {
       class: Xe(["fill-style-box", { "no-vertical-align": !o.value }])
     }, [
-      (V(!0), j(We, null, ut(f.value, (I, T) => (V(), j("div", {
+      (X(!0), j(We, null, ut(f.value, (I, T) => (X(), j("div", {
         key: T,
         class: Xe(["fill-style-item", { active: l.value === I.value }]),
         onClick: (b) => d(I.value)
       }, [
-        (V(), j("svg", qi, [
+        (X(), j("svg", Ni, [
           m("use", {
             "xlink:href": `#${l.value === I.value ? I.iconActive : I.icon}`
-          }, null, 8, Gi)
+          }, null, 8, Ki)
         ]))
-      ], 10, Ui))), 128)),
-      o.value ? (V(!0), j(We, { key: 0 }, ut(k.value, (I, T) => (V(), j("div", {
+      ], 10, Gi))), 128)),
+      o.value ? (X(!0), j(We, { key: 0 }, ut(k.value, (I, T) => (X(), j("div", {
         key: T,
         class: Xe(["fill-style-item", { active: r.value === I.value }]),
         onClick: (b) => v(I.value)
       }, [
-        (V(), j("svg", Ki, [
+        (X(), j("svg", Zi, [
           m("use", {
             "xlink:href": `#${r.value === I.value ? I.iconActive : I.icon}`
-          }, null, 8, Ji)
+          }, null, 8, Qi)
         ]))
-      ], 10, Ni))), 128)) : we("", !0)
+      ], 10, Ji))), 128)) : ye("", !0)
     ], 2));
   }
-}), 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({
+}), Bs = /* @__PURE__ */ st(eo, [["__scopeId", "data-v-b408686c"]]), to = { class: "fill-style-box" }, no = ["onClick"], so = { class: "svg-icon" }, io = ["xlink:href"], oo = /* @__PURE__ */ Qe({
   __name: "arrowStyle",
   setup(i) {
     const t = ot(), e = U(() => {
@@ -1537,51 +1547,51 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
     ]), a = (o) => {
       t.updateSelectedElements({ arrowType: o });
     };
-    return (o, l) => (V(), j("div", Qi, [
-      (V(!0), j(We, null, ut(s.value, (r, c) => (V(), j("div", {
+    return (o, l) => (X(), j("div", to, [
+      (X(!0), j(We, null, ut(s.value, (r, c) => (X(), j("div", {
         key: c,
         class: Xe(["fill-style-item", { active: e.value === r.value }]),
         onClick: (f) => a(r.value)
       }, [
-        (V(), j("svg", to, [
+        (X(), j("svg", so, [
           m("use", {
             "xlink:href": `#${e.value === r.value ? r.iconActive : r.icon}`
-          }, null, 8, no)
+          }, null, 8, io)
         ]))
-      ], 10, eo))), 128))
+      ], 10, no))), 128))
     ]));
   }
-}), 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 = {
+}), zs = /* @__PURE__ */ st(oo, [["__scopeId", "data-v-b56fafad"]]), ao = { class: "header" }, lo = { class: "content" }, ro = { class: "shape-panel-box" }, co = { class: "input-box" }, uo = { class: "input-box" }, ho = {
   key: 0,
   class: "input-box"
-}, uo = {
+}, po = {
   key: 1,
   class: "input-box"
-}, ho = {
+}, fo = {
   key: 3,
   class: "btn-box"
-}, po = { class: "svg-icon" }, fo = ["xlink:href"], go = {
+}, go = { class: "svg-icon" }, vo = ["xlink:href"], mo = {
   key: 0,
   class: "roundness-box"
-}, vo = { class: "style-item" }, mo = {
+}, yo = { class: "style-item" }, xo = {
   key: 0,
   class: "svg-icon"
-}, yo = { class: "color-text" }, xo = { class: "style-item" }, ko = { class: "style-item" }, wo = { class: "style-item" }, bo = {
+}, ko = { class: "color-text" }, wo = { class: "style-item" }, bo = { class: "style-item" }, So = { class: "style-item" }, Io = {
   key: 0,
   class: "svg-icon"
-}, So = { class: "color-text" }, Io = { class: "style-item" }, Mo = { class: "style-item" }, Eo = {
+}, Mo = { class: "color-text" }, Eo = { class: "style-item" }, Co = { class: "style-item" }, To = {
   key: 0,
   class: "style-item"
-}, Co = { class: "style-item" }, To = {
+}, Po = { class: "style-item" }, Bo = {
   key: 1,
   class: "style-item"
-}, 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 = {
+}, zo = { class: "title" }, $o = { class: "style-item" }, _o = { class: "style-boxs" }, Ao = { class: "style-boxs-item" }, Do = { class: "style-boxs-item" }, Fo = { class: "style-item" }, Oo = {
   key: 0,
   class: "svg-icon"
-}, Fo = { class: "color-text" }, Oo = { class: "style-item" }, Lo = {
+}, Lo = { class: "color-text" }, Ro = { class: "style-item" }, Xo = {
   key: 0,
   class: "svg-icon"
-}, Ro = { class: "color-text" }, Xo = /* @__PURE__ */ Qe({
+}, Yo = { class: "color-text" }, Vo = /* @__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 = () => {
@@ -1598,12 +1608,12 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
         return $ ? $.type : "none";
       }
       return v.value === "shapes" ? t.appState.activeToolType : v.value;
-    }, T = U(() => H.value + ds(N.value)), b = U(() => Ee.value + ds(D.value));
-    U(() => Fe.value), U(() => Pe.value);
+    }, T = U(() => H.value + ds(N.value)), b = U(() => Ce.value + ds(D.value));
+    U(() => Fe.value), U(() => Be.value);
     const B = U(() => {
       const z = I();
       return !["arrow", "line", "text", "freedraw", "image"].includes(z);
-    }), X = U(() => {
+    }), Y = U(() => {
       const z = I();
       return !["arrow", "line", "freedraw", "frame", "image"].includes(z);
     }), q = U(() => {
@@ -1615,7 +1625,7 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
     }), le = U(() => {
       const z = I();
       return !["arrow", "line"].includes(z);
-    }), oe = U(() => {
+    }), ie = U(() => {
       const z = I();
       return ["arrow", "line"].includes(z);
     }), ee = U(() => {
@@ -1635,7 +1645,7 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
         return z ? z.backgroundColor : t.appState.currentItemBackgroundColor;
       },
       set(z) {
-        ye(z);
+        xe(z);
       }
     }), D = U({
       get() {
@@ -1651,7 +1661,7 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
         return z ? z.backgroundOpacity ?? 100 : t.appState.currentItemBackgroundOpacity;
       },
       set(z) {
-        ke(z);
+        we(z);
       }
     }), te = U({
       get() {
@@ -1661,13 +1671,13 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
       set(z) {
         En(z);
       }
-    }), ye = (z) => {
+    }), xe = (z) => {
       const $ = z || "transparent";
       t.updateSelectedElements({ backgroundColor: $ });
-    }, ke = (z) => {
+    }, we = (z) => {
       const $ = z;
       t.updateSelectedElements({ backgroundOpacity: $ });
-    }, Ee = U(
+    }, Ce = U(
       {
         get() {
           const z = d();
@@ -1677,7 +1687,7 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
           cn(z);
         }
       }
-    ), Pe = U({
+    ), Be = U({
       get() {
         const z = d();
         return z ? z?.fontColor : t.appState.currentItemFontColor;
@@ -1709,7 +1719,7 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
       set(z) {
         ln(z);
       }
-    }), ae = U({
+    }), oe = U({
       get() {
         const z = d();
         return z ? z.width : t.appState.currentItemWidth;
@@ -1742,7 +1752,7 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
         W(z * (Math.PI / 180) % 360);
       }
     }), Oe = J(1);
-    It(() => at.value, (z) => {
+    Mt(() => at.value, (z) => {
       Oe.value = String(z || 0).length;
     }, { immediate: !0 });
     const tt = (z) => {
@@ -1754,7 +1764,7 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
     function W(z) {
       const $ = d();
       if ($) {
-        const ge = t.elements.find((Ce) => Ce.type === "text" && Ce.containerId === $.id && !Ce.isDeleted);
+        const ge = t.elements.find((Te) => Te.type === "text" && Te.containerId === $.id && !Te.isDeleted);
         ge && t.updateElement(ge.id, { angle: z });
       }
       t.updateSelectedElements({ angle: z });
@@ -1763,17 +1773,17 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
       const $ = d();
       if ($ && $.height > 0) {
         const ge = { height: z };
-        let Ce = $.width;
+        let Te = $.width;
         if ($.isAspectRatioLocked) {
           const ve = $.width / $.height;
-          Ce = z * ve, ge.width = Ce;
+          Te = z * ve, ge.width = Te;
         }
         const re = t.elements.find((ve) => ve.type === "text" && ve.containerId === $.id && !ve.isDeleted);
         if (re) {
-          const ve = Ne(re.text || "", re.fontSize || 20, re.fontFamily || "sans-serif", Ce, { isBold: re.isBold, isItalic: re.isItalic });
-          ge.height = Math.max(z, ve.height), t.updateElement(re.id, { width: Ce, height: ge.height });
+          const ve = Ne(re.text || "", re.fontSize || 20, re.fontFamily || "sans-serif", Te, { isBold: re.isBold, isItalic: re.isItalic });
+          ge.height = Math.max(z, ve.height), t.updateElement(re.id, { width: Te, height: ge.height });
         } else if ($.type === "text") {
-          const ve = Ne($.text || "", $.fontSize || 20, $.fontFamily || "sans-serif", Ce, { isBold: $.isBold, isItalic: $.isItalic });
+          const ve = Ne($.text || "", $.fontSize || 20, $.fontFamily || "sans-serif", Te, { isBold: $.isBold, isItalic: $.isItalic });
           ge.height = Math.max(z, ve.height);
         }
         t.updateSelectedElements(ge);
@@ -1783,7 +1793,7 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
       const $ = d();
       if ($ && $.width > 0) {
         const ge = { width: z };
-        let Ce = $.height;
+        let Te = $.height;
         console.log($.height);
         const re = t.elements.find((ve) => ve.type === "text" && ve.containerId === $.id && !ve.isDeleted);
         if (re || $.type === "text") {
@@ -1792,19 +1802,19 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
         }
         if ($.isAspectRatioLocked) {
           const ve = $.height / $.width;
-          Ce = ge.width * ve, ge.height = Ce;
+          Te = ge.width * ve, ge.height = Te;
         }
         if (re) {
           const ve = Ne(re.text || "", re.fontSize || 20, re.fontFamily || "sans-serif", ge.width, { isBold: re.isBold, isItalic: re.isItalic });
-          ge.height = Math.max(Ce, ve.height), t.updateElement(re.id, { width: ge.width, height: ge.height });
+          ge.height = Math.max(Te, ve.height), t.updateElement(re.id, { width: ge.width, height: ge.height });
         } else if ($.type === "text") {
           const ve = Ne($.text || "", $.fontSize || 20, $.fontFamily || "sans-serif", ge.width, { isBold: $.isBold, isItalic: $.isItalic });
-          ge.height = Math.max(Ce, ve.height);
+          ge.height = Math.max(Te, ve.height);
         }
         t.updateSelectedElements(ge);
       }
     }
-    const xe = U(() => {
+    const ke = U(() => {
       const z = d();
       return z ? !!z.isFlippedHorizontal : !1;
     }), Ye = U(() => {
@@ -1840,7 +1850,7 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
       a.value.openColorPicker(), a.value.initPickerColor(b.value);
     }
     function Mn(z) {
-      ye(z.hex.substring(0, 7)), ke(pn(z.hex.substring(7, 9)));
+      xe(z.hex.substring(0, 7)), we(pn(z.hex.substring(7, 9)));
     }
     const En = (z) => {
       t.updateSelectedElements({ strokeWidth: z });
@@ -1854,18 +1864,18 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
       t.updateSelectedElements({ strokeColor: z });
     }, Vt = (z) => {
       t.updateSelectedElements({ fontColor: z }), Object.keys(t.appState.selectedElementIds).forEach((ge) => {
-        const Ce = t.elements.find((re) => re.type === "text" && re.containerId === ge && !re.isDeleted);
-        Ce && t.updateElement(Ce.id, { fontColor: z });
+        const Te = t.elements.find((re) => re.type === "text" && re.containerId === ge && !re.isDeleted);
+        Te && t.updateElement(Te.id, { fontColor: z });
       });
     }, Nt = (z) => {
       t.updateSelectedElements({ fontBgColor: z }), Object.keys(t.appState.selectedElementIds).forEach((ge) => {
-        const Ce = t.elements.find((re) => re.type === "text" && re.containerId === ge && !re.isDeleted);
-        Ce && t.updateElement(Ce.id, { fontBgColor: z });
+        const Te = t.elements.find((re) => re.type === "text" && re.containerId === ge && !re.isDeleted);
+        Te && t.updateElement(Te.id, { fontBgColor: z });
       });
     }, Tn = () => {
       r.value.openColorPicker(), r.value.initPickerColor(Fe.value);
     }, Pn = () => {
-      c.value.openColorPicker(), c.value.initPickerColor(Pe.value);
+      c.value.openColorPicker(), c.value.initPickerColor(Be.value);
     }, Bn = (z) => {
       pn(z.hex.substring(7, 9)) == 0 ? Vt("transparent") : Vt(z.hex.substring(0, 7));
     }, zn = (z) => {
@@ -1874,14 +1884,14 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
       t.updateSelectedElements({ roundness: z });
     }, Kt = (z) => {
       Object.keys(t.appState.selectedElementIds).forEach((ge) => {
-        const Ce = t.elements.find((re) => re.id === ge);
-        if (Ce && Ce.type === "text") {
-          const re = Ce;
+        const Te = t.elements.find((re) => re.id === ge);
+        if (Te && Te.type === "text") {
+          const re = Te;
           if (re.autoResize) {
             const ve = Ne(re.text || "", z, re.fontFamily || "sans-serif", void 0, { isBold: re.isBold, isItalic: re.isItalic });
             t.updateElement(ge, { fontSize: z, width: ve.width, height: ve.height });
           } else {
-            const ve = Ne(re.text || "", z, re.fontFamily || "sans-serif", Ce.width, { isBold: re.isBold, isItalic: re.isItalic });
+            const ve = Ne(re.text || "", z, re.fontFamily || "sans-serif", Te.width, { isBold: re.isBold, isItalic: re.isItalic });
             t.updateElement(ge, { fontSize: z, height: ve.height });
           }
         } else {
@@ -1889,68 +1899,68 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
           const re = t.elements.find((ve) => ve.type === "text" && ve.containerId === ge && !ve.isDeleted);
           if (re) {
             const ve = Ne(re.text || "", z, re.fontFamily || "sans-serif", re.width);
-            t.updateElement(re.id, { fontSize: z, height: Math.max(ve.height, Ce?.height) });
+            t.updateElement(re.id, { fontSize: z, height: Math.max(ve.height, Te?.height) });
           }
         }
       });
     };
     return (z, $) => {
-      const ge = it("el-input-number"), Ce = it("el-slider"), re = it("jvs-picker-color-v3"), ve = it("el-select"), un = it("el-option"), hn = it("el-input"), $n = it("el-scrollbar");
-      return ze(t).appState.isPropertiesPanelOpen ? (V(), j("div", {
+      const ge = it("el-input-number"), Te = it("el-slider"), re = it("jvs-picker-color-v3"), ve = it("el-select"), un = it("el-option"), hn = it("el-input"), $n = it("el-scrollbar");
+      return Se(t).appState.isPropertiesPanelOpen ? (X(), j("div", {
         key: 0,
         class: "properties-panel",
         style: Ke({ pointerEvents: he.value ? "none" : "auto" })
       }, [
-        m("div", io, [
+        m("div", ao, [
           $[16] || ($[16] = m("div", null, "形状", -1)),
-          (V(), j("svg", { onClick: f }, [...$[15] || ($[15] = [
+          (X(), j("svg", { onClick: f }, [...$[15] || ($[15] = [
             m("use", { "xlink:href": "#jvs-public-danchuangguanbi1" }, null, -1)
           ])]))
         ]),
-        ie($n, null, {
+        ae($n, null, {
           default: Ae(() => [
-            m("div", oo, [
-              m("div", ao, [
+            m("div", lo, [
+              m("div", ro, [
                 m("div", {
                   class: Xe(["shape-panel-row", { "not-bind-width-height": q.value || !se.value }])
                 }, [
-                  m("div", lo, [
+                  m("div", co, [
                     $[17] || ($[17] = m("div", { class: "icon" }, "X", -1)),
-                    ie(ge, {
+                    ae(ge, {
                       modelValue: ne.value,
                       "onUpdate:modelValue": $[0] || ($[0] = (_e) => ne.value = _e),
                       precision: 2,
                       "controls-position": "right"
                     }, null, 8, ["modelValue"])
                   ]),
-                  m("div", ro, [
+                  m("div", uo, [
                     $[18] || ($[18] = m("div", { class: "icon" }, "Y", -1)),
-                    ie(ge, {
+                    ae(ge, {
                       modelValue: Ue.value,
                       "onUpdate:modelValue": $[1] || ($[1] = (_e) => Ue.value = _e),
                       precision: 2,
                       "controls-position": "right"
                     }, null, 8, ["modelValue"])
                   ]),
-                  q.value ? we("", !0) : (V(), j("div", co, [
+                  q.value ? ye("", !0) : (X(), j("div", ho, [
                     $[19] || ($[19] = m("div", { class: "icon" }, "W", -1)),
-                    ie(ge, {
-                      modelValue: ae.value,
-                      "onUpdate:modelValue": $[2] || ($[2] = (_e) => ae.value = _e),
+                    ae(ge, {
+                      modelValue: oe.value,
+                      "onUpdate:modelValue": $[2] || ($[2] = (_e) => oe.value = _e),
                       precision: 2,
                       "controls-position": "right"
                     }, null, 8, ["modelValue"])
                   ])),
-                  q.value ? we("", !0) : (V(), j("div", uo, [
+                  q.value ? ye("", !0) : (X(), j("div", po, [
                     $[20] || ($[20] = m("div", { class: "icon" }, "H", -1)),
-                    ie(ge, {
+                    ae(ge, {
                       modelValue: et.value,
                       "onUpdate:modelValue": $[3] || ($[3] = (_e) => et.value = _e),
                       precision: 2,
                       "controls-position": "right"
                     }, null, 8, ["modelValue"])
                   ])),
-                  le.value ? (V(), j("div", {
+                  le.value ? (X(), j("div", {
                     key: 2,
                     class: "input-box",
                     onInput: tt,
@@ -1961,7 +1971,7 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
                         m("use", { "xlink:href": "#icon-jiaodu" })
                       ])
                     ], -1)),
-                    ie(ge, {
+                    ae(ge, {
                       modelValue: at.value,
                       "onUpdate:modelValue": $[4] || ($[4] = (_e) => at.value = _e),
                       "controls-position": "right"
@@ -1970,10 +1980,10 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
                       class: "unit",
                       style: Ke({ left: 32 + Oe.value * 8 + "px" })
                     }, "°", 4)
-                  ], 32)) : we("", !0),
-                  le.value ? (V(), j("div", ho, [
+                  ], 32)) : ye("", !0),
+                  le.value ? (X(), j("div", fo, [
                     m("div", {
-                      class: Xe(["btn-item", { active: xe.value }]),
+                      class: Xe(["btn-item", { active: ke.value }]),
                       onClick: de
                     }, [...$[22] || ($[22] = [
                       m("svg", { class: "svg-icon" }, [
@@ -1988,26 +1998,26 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
                         m("use", { "xlink:href": "#icon-chuizhifanzhuan" })
                       ], -1)
                     ])], 2)
-                  ])) : we("", !0)
+                  ])) : ye("", !0)
                 ], 2),
-                q.value ? we("", !0) : (V(), j("div", {
+                q.value ? ye("", !0) : (X(), j("div", {
                   key: 0,
                   class: Xe(["bind-box", { active: an.value }]),
                   onClick: vt
                 }, [
-                  (V(), j("svg", po, [
+                  (X(), j("svg", go, [
                     m("use", {
                       "xlink:href": an.value ? "#icon-suoding1" : "#icon-quxiaosuoding"
-                    }, null, 8, fo)
+                    }, null, 8, vo)
                   ]))
                 ], 2))
               ]),
-              se.value ? (V(), j("div", go, [
+              se.value ? (X(), j("div", mo, [
                 $[25] || ($[25] = m("div", {
                   class: "item-label",
                   style: { "padding-right": "8px" }
                 }, "圆角", -1)),
-                ie(Ce, {
+                ae(Te, {
                   modelValue: G.value,
                   "onUpdate:modelValue": $[5] || ($[5] = (_e) => G.value = _e),
                   "show-input": "",
@@ -2023,15 +2033,15 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
                     m("use", { "xlink:href": "#icon-biankuang-yincangzhuangtai" })
                   ], -1)
                 ])])
-              ])) : we("", !0),
-              B.value ? (V(), j(We, { key: 1 }, [
+              ])) : ye("", !0),
+              B.value ? (X(), j(We, { key: 1 }, [
                 $[30] || ($[30] = m("div", { class: "divider" }, null, -1)),
                 $[31] || ($[31] = m("div", { class: "type-item-title" }, [
                   m("div", { class: "title" }, "填充")
                 ], -1)),
-                m("div", vo, [
+                m("div", yo, [
                   $[27] || ($[27] = m("div", { class: "title" }, "颜色", -1)),
-                  ie(re, {
+                  ae(re, {
                     color: H.value,
                     ref_key: "bgColorPickerRef",
                     ref: n,
@@ -2048,14 +2058,14 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
                         ref: e,
                         onClick: $[7] || ($[7] = (zt) => rn())
                       }, [
-                        H.value == "transparent" || !H.value || N.value == 0 ? (V(), j("svg", mo, [...$[26] || ($[26] = [
+                        H.value == "transparent" || !H.value || N.value == 0 ? (X(), j("svg", xo, [...$[26] || ($[26] = [
                           m("use", { "xlink:href": "#icon-wuyanse" }, null, -1)
-                        ])])) : (V(), j("div", {
+                        ])])) : (X(), j("div", {
                           key: 1,
                           class: "color-box",
                           style: Ke({ background: T.value })
                         }, null, 4)),
-                        m("div", yo, nt(H.value != "transparent" ? H.value.substring(
+                        m("div", ko, nt(H.value != "transparent" ? H.value.substring(
                           0,
                           7
                         ).toUpperCase() : H.value), 1)
@@ -2064,9 +2074,9 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
                     _: 1
                   }, 8, ["color", "options"])
                 ]),
-                m("div", xo, [
+                m("div", wo, [
                   $[28] || ($[28] = m("div", { class: "title" }, "透明度", -1)),
-                  ie(Ce, {
+                  ae(Te, {
                     modelValue: N.value,
                     "onUpdate:modelValue": $[8] || ($[8] = (_e) => N.value = _e),
                     "show-input": "",
@@ -2075,20 +2085,20 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
                     max: 100
                   }, null, 8, ["modelValue"])
                 ]),
-                m("div", ko, [
+                m("div", bo, [
                   $[29] || ($[29] = m("div", { class: "title" }, "填充样式", -1)),
-                  ie(Ms, { style: { width: "100%" } })
+                  ae(Es, { style: { width: "100%" } })
                 ])
-              ], 64)) : we("", !0),
-              ee.value ? (V(), j(We, { key: 2 }, [
+              ], 64)) : ye("", !0),
+              ee.value ? (X(), j(We, { key: 2 }, [
                 $[38] || ($[38] = m("div", { class: "divider" }, null, -1)),
                 $[39] || ($[39] = m("div", { class: "type-item-title" }, [
                   m("div", { class: "title" }, "描边")
                 ], -1)),
-                m("div", wo, [
+                m("div", So, [
                   $[33] || ($[33] = m("div", { class: "title" }, "颜色", -1)),
-                  ie(re, {
-                    color: Ee.value,
+                  ae(re, {
+                    color: Ce.value,
                     ref_key: "strokeColorPickerRef",
                     ref: a,
                     options: {
@@ -2104,25 +2114,25 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
                         ref: s,
                         onClick: $[9] || ($[9] = (zt) => Xt())
                       }, [
-                        Ee.value == "transparent" || !Ee.value || D.value == 0 ? (V(), j("svg", bo, [...$[32] || ($[32] = [
+                        Ce.value == "transparent" || !Ce.value || D.value == 0 ? (X(), j("svg", Io, [...$[32] || ($[32] = [
                           m("use", { "xlink:href": "#icon-wuyanse" }, null, -1)
-                        ])])) : (V(), j("div", {
+                        ])])) : (X(), j("div", {
                           key: 1,
                           class: "color-box",
                           style: Ke({ background: b.value })
                         }, null, 4)),
-                        m("div", So, nt(Ee.value != "transparent" ? Ee.value.substring(
+                        m("div", Mo, nt(Ce.value != "transparent" ? Ce.value.substring(
                           0,
                           7
-                        ).toUpperCase() : Ee.value), 1)
+                        ).toUpperCase() : Ce.value), 1)
                       ], 512)
                     ]),
                     _: 1
                   }, 8, ["color", "options"])
                 ]),
-                m("div", Io, [
+                m("div", Eo, [
                   $[34] || ($[34] = m("div", { class: "title" }, "粗细", -1)),
-                  ie(Ce, {
+                  ae(Te, {
                     modelValue: te.value,
                     "onUpdate:modelValue": $[10] || ($[10] = (_e) => te.value = _e),
                     "show-input": "",
@@ -2131,9 +2141,9 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
                     max: 10
                   }, null, 8, ["modelValue"])
                 ]),
-                m("div", Mo, [
+                m("div", Co, [
                   $[35] || ($[35] = m("div", { class: "title" }, "透明度", -1)),
-                  ie(Ce, {
+                  ae(Te, {
                     modelValue: D.value,
                     "onUpdate:modelValue": $[11] || ($[11] = (_e) => D.value = _e),
                     "show-input": "",
@@ -2142,37 +2152,37 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
                     max: 100
                   }, null, 8, ["modelValue"])
                 ]),
-                I() != "freedraw" ? (V(), j("div", Eo, [
+                I() != "freedraw" ? (X(), j("div", To, [
                   $[36] || ($[36] = m("div", { class: "title" }, "样式", -1)),
-                  ie(Es, { style: { width: "100%" } })
-                ])) : we("", !0),
-                m("div", Co, [
+                  ae(Cs, { style: { width: "100%" } })
+                ])) : ye("", !0),
+                m("div", Po, [
                   $[37] || ($[37] = m("div", { class: "title" }, "风格", -1)),
-                  ie(Cs, { style: { width: "100%" } })
+                  ae(Ts, { 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 }, [
+                ie.value ? (X(), j("div", Bo, [
+                  m("div", zo, nt(I() == "arrow" ? "箭头" : "线条") + "类型", 1),
+                  ae(zs, { style: { width: "100%" } })
+                ])) : ye("", !0)
+              ], 64)) : ye("", !0),
+              Y.value ? (X(), j(We, { key: 3 }, [
                 $[45] || ($[45] = m("div", { class: "divider" }, null, -1)),
                 $[46] || ($[46] = m("div", { class: "type-item-title" }, [
                   m("div", { class: "title" }, "文本设置")
                 ], -1)),
-                m("div", Bo, [
+                m("div", $o, [
                   $[40] || ($[40] = m("div", { class: "title" }, "样式", -1)),
-                  m("div", zo, [
-                    m("div", $o, [
-                      ie(ve, { style: { width: "100%" } }),
-                      ie(ve, {
+                  m("div", _o, [
+                    m("div", Ao, [
+                      ae(ve, { style: { width: "100%" } }),
+                      ae(ve, {
                         style: { width: "100%" },
                         modelValue: ht.value,
                         "onUpdate:modelValue": $[12] || ($[12] = (_e) => ht.value = _e),
                         onChange: Kt
                       }, {
                         default: Ae(() => [
-                          (V(), j(We, null, ut(k, (_e) => ie(un, {
+                          (X(), j(We, null, ut(k, (_e) => ae(un, {
                             key: _e,
                             label: _e,
                             value: _e
@@ -2181,18 +2191,18 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
                         _: 1
                       }, 8, ["modelValue"])
                     ]),
-                    m("div", _o, [
-                      ie(hn),
-                      ie(hn)
+                    m("div", Do, [
+                      ae(hn),
+                      ae(hn)
                     ]),
-                    ie(Ts),
-                    ie(Ps)
+                    ae(Ps),
+                    ae(Bs)
                   ])
                 ]),
-                m("div", Ao, [
+                m("div", Fo, [
                   $[42] || ($[42] = m("div", { class: "title" }, "文本颜色", -1)),
-                  ie(re, {
-                    color: Pe.value,
+                  ae(re, {
+                    color: Be.value,
                     ref_key: "fontColorPickerRef",
                     ref: c,
                     options: {
@@ -2208,25 +2218,25 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
                         ref: l,
                         onClick: $[13] || ($[13] = (zt) => Pn())
                       }, [
-                        Pe.value == "transparent" || !Pe.value ? (V(), j("svg", Do, [...$[41] || ($[41] = [
+                        Be.value == "transparent" || !Be.value ? (X(), j("svg", Oo, [...$[41] || ($[41] = [
                           m("use", { "xlink:href": "#icon-wuyanse" }, null, -1)
-                        ])])) : (V(), j("div", {
+                        ])])) : (X(), j("div", {
                           key: 1,
                           class: "color-box",
-                          style: Ke({ background: Pe.value })
+                          style: Ke({ background: Be.value })
                         }, null, 4)),
-                        m("div", Fo, nt(Pe.value != "transparent" ? Pe.value.substring(
+                        m("div", Lo, nt(Be.value != "transparent" ? Be.value.substring(
                           0,
                           7
-                        ).toUpperCase() : Pe.value), 1)
+                        ).toUpperCase() : Be.value), 1)
                       ], 512)
                     ]),
                     _: 1
                   }, 8, ["color", "options"])
                 ]),
-                m("div", Oo, [
+                m("div", Ro, [
                   $[44] || ($[44] = m("div", { class: "title" }, "文本背景色", -1)),
-                  ie(re, {
+                  ae(re, {
                     color: Fe.value,
                     ref_key: "fontBgColorPickerRef",
                     ref: r,
@@ -2243,14 +2253,14 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
                         ref: o,
                         onClick: $[14] || ($[14] = (zt) => Tn())
                       }, [
-                        Fe.value == "transparent" || !Fe.value ? (V(), j("svg", Lo, [...$[43] || ($[43] = [
+                        Fe.value == "transparent" || !Fe.value ? (X(), j("svg", Xo, [...$[43] || ($[43] = [
                           m("use", { "xlink:href": "#icon-wuyanse" }, null, -1)
-                        ])])) : (V(), j("div", {
+                        ])])) : (X(), j("div", {
                           key: 1,
                           class: "color-box",
                           style: Ke({ background: Fe.value })
                         }, null, 4)),
-                        m("div", Ro, nt(Fe.value != "transparent" ? Fe.value.substring(
+                        m("div", Yo, nt(Fe.value != "transparent" ? Fe.value.substring(
                           0,
                           7
                         ).toUpperCase() : Fe.value), 1)
@@ -2259,15 +2269,15 @@ const Ei = { class: "fill-style-box" }, Ci = ["onClick"], Ti = { class: "svg-ico
                     _: 1
                   }, 8, ["color", "options"])
                 ])
-              ], 64)) : we("", !0)
+              ], 64)) : ye("", !0)
             ])
           ]),
           _: 1
         })
-      ], 4)) : we("", !0);
+      ], 4)) : ye("", !0);
     };
   }
-}), Yo = /* @__PURE__ */ st(Xo, [["__scopeId", "data-v-00889af3"]]);
+}), jo = /* @__PURE__ */ st(Vo, [["__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);
@@ -2277,26 +2287,26 @@ function Xn(i, t, e) {
     }
   }
 }
-function Vo(i, t) {
+function Ho(i, t) {
   return i[0] === t[0] && i[1] === t[1];
 }
-function jo(i, t, e, n = 1) {
+function Wo(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) Xn(c, l, s);
   const r = (function(c, f, k) {
     const d = [];
     for (const b of c) {
       const B = [...b];
-      Vo(B[0], B[B.length - 1]) || B.push([B[0][0], B[0][1]]), B.length > 2 && d.push(B);
+      Ho(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);
     const h = [];
     for (const b of d) for (let B = 0; B < b.length - 1; B++) {
-      const X = b[B], q = b[B + 1];
-      if (X[1] !== q[1]) {
-        const se = Math.min(X[1], q[1]);
-        h.push({ ymin: se, ymax: Math.max(X[1], q[1]), x: se === X[1] ? X[0] : q[0], islope: (q[0] - X[0]) / (q[1] - X[1]) });
+      const Y = b[B], q = b[B + 1];
+      if (Y[1] !== q[1]) {
+        const se = Math.min(Y[1], q[1]);
+        h.push({ ymin: se, ymax: Math.max(Y[1], q[1]), x: se === Y[1] ? Y[0] : q[0], islope: (q[0] - Y[0]) / (q[1] - Y[1]) });
       }
     }
     if (h.sort(((b, B) => b.ymin < B.ymin ? -1 : b.ymin > B.ymin ? 1 : b.x < B.x ? -1 : b.x > B.x ? 1 : b.ymax === B.ymax ? 0 : (b.ymax - B.ymax) / Math.abs(b.ymax - B.ymax))), !h.length) return v;
@@ -2312,8 +2322,8 @@ function jo(i, t, e, n = 1) {
       if (M = M.filter(((b) => !(b.edge.ymax <= I))), M.sort(((b, B) => b.edge.x === B.edge.x ? 0 : (b.edge.x - B.edge.x) / Math.abs(b.edge.x - B.edge.x))), (k !== 1 || T % f == 0) && M.length > 1) for (let b = 0; b < M.length; b += 2) {
         const B = b + 1;
         if (B >= M.length) break;
-        const X = M[b].edge, q = M[B].edge;
-        v.push([[Math.round(X.x), I], [Math.round(q.x), I]]);
+        const Y = M[b].edge, q = M[B].edge;
+        v.push([[Math.round(Y.x), I], [Math.round(q.x), I]]);
       }
       I += k, M.forEach(((b) => {
         b.edge.x = b.edge.x + k * b.edge.islope;
@@ -2336,7 +2346,7 @@ 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), jo(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), Wo(i, s, n, a || 1);
 }
 class Qn {
   constructor(t) {
@@ -2359,7 +2369,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 Ho extends Qn {
+class Uo extends Qn {
   fillPolygons(t, e) {
     let n = e.hachureGap;
     n < 0 && (n = 4 * e.strokeWidth), n = Math.max(n, 0.1);
@@ -2368,13 +2378,13 @@ class Ho extends Qn {
     return { type: "fillSketch", ops: this.renderLines(o, e) };
   }
 }
-class Wo extends Qn {
+class qo 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 Uo {
+class Go {
   constructor(t) {
     this.helper = t;
   }
@@ -2399,7 +2409,7 @@ class Uo {
     return { type: "fillSketch", ops: n };
   }
 }
-class qo {
+class No {
   constructor(t) {
     this.helper = t;
   }
@@ -2421,7 +2431,7 @@ class qo {
     })), a;
   }
 }
-class Go {
+class Ko {
   constructor(t) {
     this.helper = t;
   }
@@ -2444,7 +2454,7 @@ class Go {
   }
 }
 const dt = {};
-class No {
+class Jo {
   constructor(t) {
     this.seed = t;
   }
@@ -2452,7 +2462,7 @@ class No {
     return this.seed ? (2 ** 31 - 1 & (this.seed = Math.imul(48271, this.seed))) / 2 ** 31 : Math.random();
   }
 }
-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 };
+const Zo = 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;
 }
@@ -2460,7 +2470,7 @@ 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: Ko, text: RegExp.$1 }, o = o.substr(RegExp.$1.length);
+    else if (o.match(/^([aAcChHlLmMqQsStTvVzZ])/)) l[l.length] = { type: Zo, 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: Yn, text: `${parseFloat(RegExp.$1)}` }, o = o.substr(RegExp.$1.length);
@@ -2489,7 +2499,7 @@ function es(i) {
   }
   return t;
 }
-function zs(i) {
+function $s(i) {
   let t = 0, e = 0, n = 0, s = 0;
   const a = [];
   for (const { key: o, data: l } of i) switch (o) {
@@ -2559,7 +2569,7 @@ function zs(i) {
   }
   return a;
 }
-function $s(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) {
@@ -2599,7 +2609,7 @@ function $s(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) && (As(n, s, I, T, k, d, v, h, M).forEach((function(b) {
           t.push({ key: "C", data: b });
         })), n = I, s = T);
         break;
@@ -2614,7 +2624,7 @@ function $s(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 As(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;
@@ -2624,38 +2634,38 @@ function _s(i, t, e, n, s, a, o, l, r, c) {
     const D = (i - e) / 2, N = (t - n) / 2;
     let te = D * D / (s * s) + N * N / (a * a);
     te > 1 && (te = Math.sqrt(te), s *= te, a *= te);
-    const ye = s * s, ke = a * a, Ee = ye * ke - ye * N * N - ke * D * D, Pe = ye * N * N + ke * D * D, Fe = (l === r ? -1 : 1) * Math.sqrt(Math.abs(Ee / Pe));
+    const xe = s * s, we = a * a, Ce = xe * we - xe * N * N - we * D * D, Be = xe * N * N + we * D * D, Fe = (l === r ? -1 : 1) * Math.sqrt(Math.abs(Ce / Be));
     M = Fe * s * N / a + (i + e) / 2, I = Fe * -a * D / s + (t + n) / 2, v = Math.asin(parseFloat(((t - I) / a).toFixed(9))), h = Math.asin(parseFloat(((n - I) / a).toFixed(9))), i < M && (v = Math.PI - v), e < M && (h = Math.PI - h), v < 0 && (v = 2 * Math.PI + v), h < 0 && (h = 2 * Math.PI + h), r && v > h && (v -= 2 * Math.PI), !r && h > v && (h -= 2 * Math.PI);
   }
   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 = As(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];
+  const b = Math.cos(v), B = Math.sin(v), Y = Math.cos(h), q = Math.sin(h), se = Math.tan(T / 4), le = 4 / 3 * s * se, ie = 4 / 3 * a * se, ee = [i, t], G = [i + le * B, t - ie * b], he = [e + le * q, n - ie * Y], H = [e, n];
   if (G[0] = 2 * ee[0] - G[0], G[1] = 2 * ee[1] - G[1], c) return [G, he, H].concat(d);
   {
     d = [G, he, H].concat(d);
     const D = [];
     for (let N = 0; N < d.length; N += 3) {
-      const te = Qt(d[N][0], d[N][1], f), ye = Qt(d[N + 1][0], d[N + 1][1], f), ke = Qt(d[N + 2][0], d[N + 2][1], f);
-      D.push([te[0], te[1], ye[0], ye[1], ke[0], ke[1]]);
+      const te = Qt(d[N][0], d[N][1], f), xe = Qt(d[N + 1][0], d[N + 1][1], f), we = Qt(d[N + 2][0], d[N + 2][1], f);
+      D.push([te[0], te[1], xe[0], xe[1], we[0], we[1]]);
     }
     return D;
   }
 }
-const Jo = { randOffset: function(i, t) {
+const Qo = { 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 = Ds(e, n, s);
+  const a = Fs(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 As(i, t, e, n, s) {
+function Ds(i, t, e, n, s) {
   return { type: "path", ops: Bt(i, t, e, n, s) };
 }
 function mn(i, t, e) {
@@ -2665,9 +2675,9 @@ 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 ? As(i[0][0], i[0][1], i[1][0], i[1][1], e) : { type: "path", ops: [] };
+  return n === 2 ? Ds(i[0][0], i[0][1], i[1][0], i[1][1], e) : { type: "path", ops: [] };
 }
-function Zo(i, t, e, n, s) {
+function ea(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);
@@ -2687,7 +2697,7 @@ function hs(i, t) {
   }
   return { type: "path", ops: [] };
 }
-function Ds(i, t, e) {
+function Fs(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;
@@ -2717,7 +2727,7 @@ function ps(i, t, e, n, s, a, o, l, r) {
   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 fs(i, t) {
-  const e = $s(zs(es(i))), n = [];
+  const e = _s($s(es(i))), n = [];
   let s = [0, 0], a = [0, 0];
   for (const { key: o, data: l } of e) switch (o) {
     case "M":
@@ -2728,7 +2738,7 @@ function fs(i, t) {
       break;
     case "C": {
       const [r, c, f, k, d, v] = l;
-      n.push(...Qo(r, c, f, k, d, v, a, t)), a = [d, v];
+      n.push(...ta(r, c, f, k, d, v, a, t)), a = [d, v];
       break;
     }
     case "Z":
@@ -2752,35 +2762,35 @@ function Ut(i, t) {
     let s = e.fillStyle || "hachure";
     if (!dt[s]) switch (s) {
       case "zigzag":
-        dt[s] || (dt[s] = new Ho(n));
+        dt[s] || (dt[s] = new Uo(n));
         break;
       case "cross-hatch":
-        dt[s] || (dt[s] = new Wo(n));
+        dt[s] || (dt[s] = new qo(n));
         break;
       case "dots":
-        dt[s] || (dt[s] = new Uo(n));
+        dt[s] || (dt[s] = new Go(n));
         break;
       case "dashed":
-        dt[s] || (dt[s] = new qo(n));
+        dt[s] || (dt[s] = new No(n));
         break;
       case "zigzag-line":
-        dt[s] || (dt[s] = new Go(n));
+        dt[s] || (dt[s] = new Ko(n));
         break;
       default:
         s = "hachure", dt[s] || (dt[s] = new Qn(n));
     }
     return dt[s];
-  })(t, Jo).fillPolygons(i, t);
+  })(t, Qo).fillPolygons(i, t);
 }
 function gs(i) {
   const t = Object.assign({}, i);
   return t.randomizer = void 0, i.seed && (t.seed = i.seed + 1), t;
 }
-function Fs(i) {
-  return i.randomizer || (i.randomizer = new No(i.seed || 0)), i.randomizer.next();
+function Os(i) {
+  return i.randomizer || (i.randomizer = new Jo(i.seed || 0)), i.randomizer.next();
 }
 function xn(i, t, e, n = 1) {
-  return e.roughness * n * (Fs(e) * (t - i) + i);
+  return e.roughness * n * (Os(e) * (t - i) + i);
 }
 function ce(i, t, e = 1) {
   return xn(-i, i, t, e);
@@ -2797,7 +2807,7 @@ function Kn(i, t, e, n, s, a, o) {
   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 * Fs(s);
+  const k = f / 2, d = 0.2 + 0.2 * Os(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;
@@ -2849,7 +2859,7 @@ function ms(i, t, e, n, s, a, o, l, r) {
   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 Qo(i, t, e, n, s, a, o, l) {
+function ta(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;
@@ -2880,7 +2890,7 @@ function ys(i, t = 0) {
 function yn(i, t) {
   return Math.pow(i[0] - t[0], 2) + Math.pow(i[1] - t[1], 2);
 }
-function ea(i, t, e) {
+function na(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;
@@ -2911,14 +2921,14 @@ function Jn(i, t, e, n) {
   var a, o;
   return s;
 }
-function ta(i, t) {
+function sa(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 = ea(i[f], o, l);
+    const k = na(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;
@@ -2945,10 +2955,10 @@ class bn {
   }
   line(t, e, n, s, a) {
     const o = this._o(a);
-    return this._d("line", [As(t, e, n, s, o)], o);
+    return this._d("line", [Ds(t, e, n, s, o)], o);
   }
   rectangle(t, e, n, s, a) {
-    const o = this._o(a), l = [], r = Zo(t, e, n, s, o);
+    const o = this._o(a), l = [], r = ea(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(jn([c], o)) : l.push(Ut([c], o));
@@ -2956,7 +2966,7 @@ class bn {
     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 = Ds(n, s, o), c = Nn(t, e, o, r);
+    const o = this._o(a), l = [], r = Fs(n, s, o), c = Nn(t, e, o, r);
     if (o.fill) if (o.fillStyle === "solid") {
       const f = Nn(t, e, o, r).opset;
       f.type = "fillPath", l.push(f);
@@ -2979,15 +2989,15 @@ class bn {
       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;
+      const B = d, Y = v;
       let q = Math.abs(h / 2), se = Math.abs(M / 2);
       q += ce(0.01 * q, b), se += ce(0.01 * se, b);
-      let le = I, oe = T;
-      for (; le < 0; ) le += 2 * Math.PI, oe += 2 * Math.PI;
-      oe - le > 2 * Math.PI && (le = 0, oe = 2 * Math.PI);
-      const ee = (oe - le) / b.curveStepCount, G = [];
-      for (let he = le; he <= oe; he += ee) G.push([B + q * Math.cos(he), X + se * Math.sin(he)]);
-      return G.push([B + q * Math.cos(oe), X + se * Math.sin(oe)]), G.push([B, X]), Ut([G], b);
+      let le = I, ie = T;
+      for (; le < 0; ) le += 2 * Math.PI, ie += 2 * Math.PI;
+      ie - le > 2 * Math.PI && (le = 0, ie = 2 * Math.PI);
+      const ee = (ie - le) / b.curveStepCount, G = [];
+      for (let he = le; he <= ie; he += ee) G.push([B + q * Math.cos(he), Y + se * Math.sin(he)]);
+      return G.push([B + q * Math.cos(ie), Y + se * Math.sin(ie)]), G.push([B, Y]), Ut([G], b);
     })(t, e, n, s, a, o, c));
     return c.stroke !== gt && f.push(k), this._d("arc", f, c);
   }
@@ -3015,7 +3025,7 @@ class bn {
     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 = $s(zs(es(f))), h = [];
+      const v = _s($s(es(f))), h = [];
       let M = [], I = [0, 0], T = [];
       const b = () => {
         T.length >= 4 && M.push(...Hn(T, k)), T = [];
@@ -3040,12 +3050,12 @@ class bn {
           b(), M.push([I[0], I[1]]);
       }
       if (B(), !d) return h;
-      const X = [];
+      const Y = [];
       for (const q of h) {
-        const se = ta(q, d);
-        se.length && X.push(se);
+        const se = sa(q, d);
+        se.length && Y.push(se);
       }
-      return X;
+      return Y;
     })(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 = fs(t, Object.assign(Object.assign({}, n), { disableMultiStroke: !0, roughness: n.roughness ? n.roughness + n.fillShapeRoughnessGain : 0 }));
@@ -3099,7 +3109,7 @@ class bn {
     return t.filter(((e, n) => n === 0 || e.op !== "move"));
   }
 }
-class na {
+class ia {
   constructor(t, e) {
     this.canvas = t, this.ctx = this.canvas.getContext("2d"), this.gen = new bn(e);
   }
@@ -3184,7 +3194,7 @@ class na {
   }
 }
 const vn = "http://www.w3.org/2000/svg";
-class sa {
+class oa {
   constructor(t, e) {
     this.svg = t, this.gen = new bn(e);
   }
@@ -3258,8 +3268,8 @@ class sa {
     return this.draw(n);
   }
 }
-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) => {
+var aa = { canvas: (i, t) => new ia(i, t), svg: (i, t) => new oa(i, t), generator: (i) => new bn(i), newSeed: () => bn.newSeed() };
+const xs = /* @__PURE__ */ new Map(), Wn = /* @__PURE__ */ new Map(), la = (i) => {
   if (Wn.has(i)) return Wn.get(i);
   const t = document.createElement("canvas");
   t.width = 40, t.height = 40;
@@ -3271,7 +3281,7 @@ const xs = /* @__PURE__ */ new Map(), Wn = /* @__PURE__ */ new Map(), oa = (i) =
   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(), Wn.set(i, t), t;
-}, aa = (i, t, e, n, s, a, o) => {
+}, ra = (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") {
@@ -3301,25 +3311,25 @@ const xs = /* @__PURE__ */ new Map(), Wn = /* @__PURE__ */ new Map(), oa = (i) =
     i.stroke();
   }
   i.restore();
-}, la = (i, t, e, n, s, a = {}, o = null, l = {}, r = null, c = {}, f = "none", k = null, d = "#FFFFFF") => {
+}, ca = (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 = ia.canvas(i);
+  const h = aa.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), aa(v, i, e, n, s, M, f);
-  const I = [], T = [], b = [], B = [], X = {};
+  v.save(), v.scale(M, M), v.scale(s, s), v.translate(e, n), ra(v, i, e, n, s, M, f);
+  const I = [], T = [], b = [], B = [], Y = {};
   t.forEach((D) => {
     if (D.isDeleted) return;
     const N = D.frameId;
-    N && (X[N] || (X[N] = []), X[N].push(D));
+    N && (Y[N] || (Y[N] = []), Y[N].push(D));
   });
   const q = /* @__PURE__ */ new Set();
   t.forEach((D) => {
     if (!(D.isDeleted || q.has(D.id)))
       if (D.type === "frame") {
         B.push(D), q.add(D.id);
-        const N = X[D.id];
+        const N = Y[D.id];
         N && N.forEach((te) => {
           q.has(te.id) || (B.push(te), q.add(te.id));
         });
@@ -3334,16 +3344,16 @@ const xs = /* @__PURE__ */ new Map(), Wn = /* @__PURE__ */ new Map(), oa = (i) =
     const N = (r ? D.id === r : !1) || c[D.id], te = o === 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";
+  const se = b.filter((D) => a[D.id]), le = [...T, ...se], ie = le.length, ee = ie === 2 ? le.find((D) => D.type === "text" && D.containerId) : null, G = !!(ee && le.find((D) => D.id === ee.containerId)), he = ie > 1 && le[0] && !!le[0].groupIds.find((D) => le.every((N) => N.groupIds.includes(D))), H = ie > 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;
-    Un(h, v, D, t, ke, l[D.id], H, Ee, Pe, k === D.id);
+    const N = D.frameId, te = N && a[N], xe = a[D.id], we = ie === 1 || !he && (!!xe || !te), Ce = (r ? D.id === r : !1) || c[D.id], Be = o === D.id;
+    Un(h, v, D, t, we, l[D.id], H, Ce, Be, 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;
-    Un(h, v, D, t, N, l[D.id], H, te, ye, k === D.id);
-  }), oe > 1 && !G) {
+    (ie === 1 && N || ie > 1 && he) && (N = !1);
+    const te = (r ? D.id === r : !1) || c[D.id], xe = o === D.id;
+    Un(h, v, D, t, N, l[D.id], H, te, xe, k === D.id);
+  }), ie > 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());
   }
@@ -3410,12 +3420,12 @@ const xs = /* @__PURE__ */ new Map(), Wn = /* @__PURE__ */ new Map(), oa = (i) =
         let D = e.name || "Frame";
         const N = Math.max(0, e.width - 10);
         if (t.measureText(D).width > N) {
-          let te = 0, ye = D.length, ke = "";
-          for (; te <= ye; ) {
-            const Ee = Math.floor((te + ye) / 2), Pe = D.slice(0, Ee) + "...";
-            t.measureText(Pe).width <= N ? (ke = Pe, te = Ee + 1) : ye = Ee - 1;
+          let te = 0, xe = D.length, we = "";
+          for (; te <= xe; ) {
+            const Ce = Math.floor((te + xe) / 2), Be = D.slice(0, Ce) + "...";
+            t.measureText(Be).width <= N ? (we = Be, te = Ce + 1) : xe = Ce - 1;
           }
-          D = ke;
+          D = we;
         }
         t.fillText(D, 4, -4), t.restore();
       }
@@ -3441,7 +3451,7 @@ const xs = /* @__PURE__ */ new Map(), Wn = /* @__PURE__ */ new Map(), oa = (i) =
       break;
     }
     case "star": {
-      const H = bt(e.width, e.height);
+      const H = St(e.width, e.height);
       e.roundness > 0 ? i.path(_t(H, T()), h) : i.polygon(H, h);
       break;
     }
@@ -3482,43 +3492,43 @@ const xs = /* @__PURE__ */ new Map(), Wn = /* @__PURE__ */ new Map(), oa = (i) =
         if (e.arrowType === "round")
           i.curve(D, H);
         else if (e.arrowType === "elbow") {
-          let ke, Ee;
-          const Pe = (ne) => {
+          let we, Ce;
+          const Be = (ne) => {
             if (!ne) return;
             const Ue = n.find((de) => de.id === ne.elementId);
             if (!Ue) return;
-            const ae = ne.focus < 0 ? e.points[0] : e.points[e.points.length - 1];
-            if (!ae) return;
-            const et = e.x + ae[0], ht = e.y + ae[1], at = Ue.x, Oe = Ue.y, tt = Ue.width, O = Ue.height, W = Math.abs(et - at), $e = Math.abs(et - (at + tt)), De = Math.abs(ht - Oe), xe = Math.abs(ht - (Oe + O)), Ye = Math.min(W, $e, De, xe);
+            const oe = ne.focus < 0 ? e.points[0] : e.points[e.points.length - 1];
+            if (!oe) return;
+            const et = e.x + oe[0], ht = e.y + oe[1], at = Ue.x, Oe = Ue.y, tt = Ue.width, O = Ue.height, W = Math.abs(et - at), $e = Math.abs(et - (at + tt)), De = Math.abs(ht - Oe), ke = Math.abs(ht - (Oe + O)), Ye = Math.min(W, $e, De, ke);
             if (Ye === W) return [-1, 0];
             if (Ye === $e) return [1, 0];
             if (Ye === De) return [0, -1];
-            if (Ye === xe) return [0, 1];
+            if (Ye === ke) return [0, 1];
           };
-          e.startBinding && (ke = Pe(e.startBinding)), e.endBinding && (Ee = Pe(e.endBinding));
-          const Fe = li(D, 20, ke, Ee);
+          e.startBinding && (we = Be(e.startBinding)), e.endBinding && (Ce = Be(e.endBinding));
+          const Fe = ri(D, 20, we, Ce);
           i.path(Fe, H);
         } else
           i.linearPath(D, H);
         let N = e.points;
         if (e.arrowType === "elbow") {
-          let ke, Ee;
-          const Pe = (Fe) => {
+          let we, Ce;
+          const Be = (Fe) => {
             if (!Fe) return;
             const ne = n.find((Ye) => Ye.id === Fe.elementId);
             if (!ne) return;
             const Ue = Fe.focus < 0 ? e.points[0] : e.points[e.points.length - 1];
             if (!Ue) return;
-            const ae = e.x + Ue[0], et = e.y + Ue[1], ht = ne.x, at = ne.y, Oe = ne.width, tt = ne.height, O = Math.abs(ae - ht), W = Math.abs(ae - (ht + Oe)), $e = Math.abs(et - at), De = Math.abs(et - (at + tt)), xe = Math.min(O, W, $e, De);
-            if (xe === O) return [-1, 0];
-            if (xe === W) return [1, 0];
-            if (xe === $e) return [0, -1];
-            if (xe === De) return [0, 1];
+            const oe = e.x + Ue[0], et = e.y + Ue[1], ht = ne.x, at = ne.y, Oe = ne.width, tt = ne.height, O = Math.abs(oe - ht), W = Math.abs(oe - (ht + Oe)), $e = Math.abs(et - at), De = Math.abs(et - (at + tt)), ke = Math.min(O, W, $e, De);
+            if (ke === O) return [-1, 0];
+            if (ke === W) return [1, 0];
+            if (ke === $e) return [0, -1];
+            if (ke === De) return [0, 1];
           };
-          e.startBinding && (ke = Pe(e.startBinding)), e.endBinding && (Ee = Pe(e.endBinding)), N = Zn(e.points, ke, Ee);
+          e.startBinding && (we = Be(e.startBinding)), e.endBinding && (Ce = Be(e.endBinding)), N = Zn(e.points, we, Ce);
         }
-        const te = { ...e, points: N }, ye = si(te);
-        ye && i.linearPath(ye, h);
+        const te = { ...e, points: N }, xe = ii(te);
+        xe && i.linearPath(xe, h);
       }
       break;
     case "line":
@@ -3531,48 +3541,48 @@ const xs = /* @__PURE__ */ new Map(), Wn = /* @__PURE__ */ new Map(), oa = (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) + 2, se = Math.max(0, e.height - X * 2) + 2, le = (e.text || "").split(`
-`), oe = [];
+      const B = Math.round(e.fontSize * 1.25), Y = 4, q = Math.max(0, e.width - Y * 2) + 2, se = Math.max(0, e.height - Y * 2) + 2, le = (e.text || "").split(`
+`), ie = [];
       if (le.forEach((H) => {
         if (!H) {
-          oe.push("");
+          ie.push("");
           return;
         }
         let D = "";
         for (let N = 0; N < H.length; N++) {
-          const te = H.charAt(N), ye = D + te;
-          t.measureText(ye).width > q && D !== "" ? (oe.push(D), D = te) : D = ye;
+          const te = H.charAt(N), xe = D + te;
+          t.measureText(xe).width > q && D !== "" ? (ie.push(D), D = te) : D = xe;
         }
-        D !== "" && oe.push(D);
-      }), oe.length === 0) break;
-      const ee = oe.length * B;
+        D !== "" && ie.push(D);
+      }), ie.length === 0) break;
+      const ee = ie.length * B;
       let G;
-      e.verticalAlign === "middle" ? (G = (e.height - ee) / 2, G < X && (G = X)) : e.verticalAlign === "bottom" ? (G = e.height - X - ee, G < X && (G = X)) : G = X, G += e.fontSize * 0.15;
+      e.verticalAlign === "middle" ? (G = (e.height - ee) / 2, G < Y && (G = Y)) : e.verticalAlign === "bottom" ? (G = e.height - Y - ee, G < Y && (G = Y)) : G = Y, G += e.fontSize * 0.15;
       let he;
-      if (e.textAlign === "center" ? he = e.width / 2 : e.textAlign === "right" ? he = e.width - X : he = X, e.fontBgColor && e.fontBgColor !== "transparent") {
+      if (e.textAlign === "center" ? he = e.width / 2 : e.textAlign === "right" ? he = e.width - Y : he = Y, e.fontBgColor && e.fontBgColor !== "transparent") {
         let H = 0;
-        for (let te = 0; te < oe.length; te++)
-          H = Math.max(H, t.measureText(oe[te] || "").width);
+        for (let te = 0; te < ie.length; te++)
+          H = Math.max(H, t.measureText(ie[te] || "").width);
         const D = ee;
         let N = he;
         e.textAlign === "center" ? N = he - H / 2 : e.textAlign === "right" && (N = he - H), t.fillStyle = e.fontBgColor, t.fillRect(N, G - e.fontSize * 0.15, H, D), t.fillStyle = e.fontColor || e.strokeColor;
       }
       if (!r)
-        for (let H = 0; H < oe.length; H++) {
+        for (let H = 0; H < ie.length; H++) {
           const D = G + H * B;
-          if (D + B < X) continue;
-          if (D > X + se) break;
-          const N = oe[H] || "";
+          if (D + B < Y) continue;
+          if (D > Y + se) break;
+          const N = ie[H] || "";
           if (t.fillText(N, he, D), e.isUnderline || e.isStrikethrough) {
             const te = t.measureText(N).width;
-            let ye = he;
-            if (e.textAlign === "center" ? ye -= te / 2 : e.textAlign === "right" && (ye -= te), t.strokeStyle = t.fillStyle, t.lineWidth = Math.max(1, e.fontSize * 0.08), t.beginPath(), e.isUnderline) {
-              const ke = D + e.fontSize * 1.05;
-              t.moveTo(ye, ke), t.lineTo(ye + te, ke);
+            let xe = he;
+            if (e.textAlign === "center" ? xe -= te / 2 : e.textAlign === "right" && (xe -= te), t.strokeStyle = t.fillStyle, t.lineWidth = Math.max(1, e.fontSize * 0.08), t.beginPath(), e.isUnderline) {
+              const we = D + e.fontSize * 1.05;
+              t.moveTo(xe, we), t.lineTo(xe + te, we);
             }
             if (e.isStrikethrough) {
-              const ke = D + e.fontSize * 0.55;
-              t.moveTo(ye, ke), t.lineTo(ye + te, ke);
+              const we = D + e.fontSize * 0.55;
+              t.moveTo(xe, we), t.lineTo(xe + te, we);
             }
             t.stroke();
           }
@@ -3586,7 +3596,7 @@ const xs = /* @__PURE__ */ new Map(), Wn = /* @__PURE__ */ new Map(), oa = (i) =
       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 = oa(c ? "#1e6fff" : "black");
+    const se = la(c ? "#1e6fff" : "black");
     se && t.drawImage(se, 0, -50, 40, 40);
   }
   if (l) {
@@ -3608,12 +3618,12 @@ const xs = /* @__PURE__ */ new Map(), Wn = /* @__PURE__ */ new Map(), oa = (i) =
         t.moveTo(b * 0.25, 0), t.lineTo(b, 0), t.lineTo(b * 0.75, B), t.lineTo(0, B), t.closePath();
         break;
       case "star": {
-        const X = bt(b, B);
-        if (X && X.length > 0) {
-          const q = X[0];
+        const Y = St(b, B);
+        if (Y && Y.length > 0) {
+          const q = Y[0];
           t.moveTo(q[0], q[1]);
-          for (let se = 1; se < X.length; se++) {
-            const le = X[se];
+          for (let se = 1; se < Y.length; se++) {
+            const le = Y[se];
             t.lineTo(le[0], le[1]);
           }
           t.closePath();
@@ -3621,8 +3631,8 @@ const xs = /* @__PURE__ */ new Map(), Wn = /* @__PURE__ */ new Map(), oa = (i) =
         break;
       }
       case "cylinder": {
-        const X = Math.min(B * 0.15, 20);
-        t.ellipse(b / 2, X, b / 2, X, 0, 0, 2 * Math.PI), t.moveTo(b, X), t.lineTo(b, B - X), t.ellipse(b / 2, B - X, b / 2, X, 0, 0, Math.PI, !1), t.lineTo(0, X);
+        const Y = Math.min(B * 0.15, 20);
+        t.ellipse(b / 2, Y, b / 2, Y, 0, 0, 2 * Math.PI), t.moveTo(b, Y), t.lineTo(b, B - Y), t.ellipse(b / 2, B - Y, b / 2, Y, 0, 0, Math.PI, !1), t.lineTo(0, Y);
         break;
       }
       default:
@@ -3632,7 +3642,7 @@ const xs = /* @__PURE__ */ new Map(), Wn = /* @__PURE__ */ new Map(), oa = (i) =
     t.stroke();
   }
   t.restore();
-}, ra = (i) => {
+}, da = (i) => {
   if (i.length < 3) return i;
   let t = [...i];
   for (let e = 0; e < 2; e++) {
@@ -3653,7 +3663,7 @@ const xs = /* @__PURE__ */ new Map(), Wn = /* @__PURE__ */ new Map(), oa = (i) =
     n.push(t[t.length - 1]), t = n;
   }
   return t;
-}, ca = (i, t, e, n, s) => {
+}, ua = (i, t, e, n, s) => {
   const a = i.getContext("2d");
   if (!a || t.length === 0) return;
   a.save();
@@ -3662,7 +3672,7 @@ const xs = /* @__PURE__ */ new Map(), Wn = /* @__PURE__ */ new Map(), oa = (i) =
   const l = Date.now(), r = 1600;
   t.forEach((c) => {
     if (c.length < 2) return;
-    const f = ra(c);
+    const f = da(c);
     for (let k = 0; k < f.length - 1; k++) {
       const d = f[k], v = f[k + 1];
       if (!d || !v) continue;
@@ -3676,7 +3686,7 @@ const xs = /* @__PURE__ */ new Map(), Wn = /* @__PURE__ */ new Map(), oa = (i) =
   }), a.restore();
 }, tn = (i, t, e, n = {}) => {
   const s = {
-    id: St(),
+    id: It(),
     x: t,
     y: e,
     width: 0,
@@ -3795,7 +3805,7 @@ const xs = /* @__PURE__ */ new Map(), Wn = /* @__PURE__ */ new Map(), oa = (i) =
   }
 };
 let Ze = null;
-const da = {
+const ha = {
   height: "0",
   visibility: "hidden",
   overflow: "hidden",
@@ -3805,14 +3815,14 @@ const da = {
   right: "0",
   whiteSpace: "pre-wrap"
 };
-function ua(i, t = 1, e = null) {
+function pa(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 } = pa(i);
+  const { paddingSize: n, borderSize: s, boxSizing: a, contextStyle: o, lineHeight: l } = ga(i);
   o.forEach((I) => {
     const T = I[0], b = I[1] ?? "";
     Ze && Ze.style.setProperty(T, b);
-  }), Object.entries(da).forEach(([I, T]) => {
+  }), Object.entries(ha).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;
@@ -3831,7 +3841,7 @@ function ua(i, t = 1, e = null) {
   };
   return Ze && Ze.parentNode && Ze.parentNode.removeChild(Ze), Ze = null, M;
 }
-const ha = [
+const fa = [
   "letter-spacing",
   "line-height",
   "padding-top",
@@ -3849,14 +3859,14 @@ const ha = [
   "box-sizing",
   "word-break"
 ];
-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) => [
+function ga(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 = fa.map((l) => [
     l,
     t.getPropertyValue(l)
   ]), o = parseFloat(t.getPropertyValue("line-height"));
   return { contextStyle: a, paddingSize: n, borderSize: s, boxSizing: e, lineHeight: o };
 }
-const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
+const va = { key: 0 }, ma = { key: 1 }, ya = /* @__PURE__ */ Qe({
   __name: "ContextMenu",
   props: {
     visible: { type: Boolean },
@@ -3869,7 +3879,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
   emits: ["action", "close"],
   setup(i, { emit: t }) {
     const e = i, n = t, s = J(null), a = J(0), o = J(0);
-    It(
+    Mt(
       () => [e.visible, e.x, e.y],
       async ([r]) => {
         if (r && (a.value = e.x, o.value = e.y, await Rt(), s.value)) {
@@ -3882,20 +3892,20 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
     const l = (r) => {
       n("action", r), n("close");
     };
-    return (r, c) => i.visible ? (V(), j("div", {
+    return (r, c) => i.visible ? (X(), j("div", {
       key: 0,
       ref_key: "menuRef",
       ref: s,
       class: "context-menu",
       style: Ke({ top: o.value + "px", left: a.value + "px" }),
-      onClick: c[12] || (c[12] = Mt(() => {
+      onClick: c[12] || (c[12] = Et(() => {
       }, ["stop"])),
-      onContextmenu: c[13] || (c[13] = Mt(() => {
+      onContextmenu: c[13] || (c[13] = Et(() => {
       }, ["prevent"])),
-      onMousedown: c[14] || (c[14] = Mt(() => {
+      onMousedown: c[14] || (c[14] = Et(() => {
       }, ["stop"]))
     }, [
-      i.isElementSelected ? (V(), j("ul", fa, [
+      i.isElementSelected ? (X(), j("ul", va, [
         m("li", {
           onClick: c[0] || (c[0] = (f) => l("cut"))
         }, [...c[15] || (c[15] = [
@@ -3954,7 +3964,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
           m("span", null, "删除", -1),
           m("span", { class: "shortcut" }, "Del", -1)
         ])])
-      ])) : (V(), j("ul", ga, [
+      ])) : (X(), j("ul", ma, [
         m("li", {
           onClick: c[9] || (c[9] = (f) => l("paste"))
         }, [...c[27] || (c[27] = [
@@ -3974,12 +3984,12 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
           c[29] || (c[29] = m("span", { class: "shortcut" }, "Ctrl+'", -1))
         ])
       ]))
-    ], 36)) : we("", !0);
+    ], 36)) : ye("", !0);
   }
-}), ma = /* @__PURE__ */ st(va, [["__scopeId", "data-v-22c72497"]]), ya = {
+}), xa = /* @__PURE__ */ st(ya, [["__scopeId", "data-v-22c72497"]]), ka = {
   class: "excalidraw-container",
   ref: "container"
-}, 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({
+}, wa = ["width", "height"], ba = `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`, Sa = /* @__PURE__ */ Qe({
   __name: "ExcalidrawCanvas",
   props: {
     elements: {},
@@ -3990,7 +4000,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
   setup(i) {
     const t = i, e = ot(), n = J(null), s = J(null), a = J(window.innerWidth), o = J(window.innerHeight), l = J(window.devicePixelRatio || 1), r = J(!1), c = () => {
       a.value = window.innerWidth, o.value = window.innerHeight, l.value = window.devicePixelRatio || 1, Rt(() => {
-        Be();
+        ze();
       });
     }, f = (p) => {
       p.preventDefault();
@@ -4006,8 +4016,8 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
         return;
       let E = !!_;
       _ && !_.locked && !e.appState.selectedElementIds[_.id] && e.setSelectedElementIds([_.id]);
-      const Y = Object.keys(e.appState.selectedElementIds);
-      let L = e.elements.filter((F) => Y.includes(F.id)), A = null;
+      const V = Object.keys(e.appState.selectedElementIds);
+      let L = e.elements.filter((F) => V.includes(F.id)), A = null;
       _ && _.locked && (L = [_], A = _.id), E = L.length > 0;
       const w = L.length > 0 && L.every((F) => F.locked);
       Oe.value = {
@@ -4096,7 +4106,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
       }
     }, d = J(!1), v = J(!1), h = J([]);
     let M = 0;
-    const I = J(!1), T = J(!1), b = J(null), B = J(null), X = J(null), q = J(0), se = J(0), le = J(0), oe = J(0), ee = J(null), G = J(null), he = J(null), H = J(null), D = J(null), N = J(null), te = J(""), ye = J(!1), ke = J({}), Ee = J(null), Pe = J(null), Fe = J({}), ne = J({ x: 0, y: 0 }), Ue = J({ x: 0, y: 0 }), ae = J({ x: 0, y: 0 }), et = J("26px"), ht = U(() => e.appState.showGrid), at = {
+    const I = J(!1), T = J(!1), b = J(null), B = J(null), Y = J(null), q = J(0), se = J(0), le = J(0), ie = J(0), ee = J(null), G = J(null), he = J(null), H = J(null), D = J(null), N = J(null), te = J(""), xe = J(!1), we = J({}), Ce = J(null), Be = J(null), Fe = J({}), ne = J({ x: 0, y: 0 }), Ue = J({ x: 0, y: 0 }), oe = J({ x: 0, y: 0 }), et = J("26px"), ht = U(() => e.appState.showGrid), at = {
       top: "flex-start",
       middle: "center",
       bottom: "flex-end"
@@ -4107,7 +4117,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
       isElementSelected: !1,
       isElementLocked: !1
     });
-    It(() => T.value, (p) => {
+    Mt(() => T.value, (p) => {
       e.appState.isDraggingElement = p;
     });
     const tt = J([]);
@@ -4116,7 +4126,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__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" ? ka : "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" ? ba : "crosshair";
     }, De = U(() => {
       if (!G.value) return {};
       const p = e.elements.find((u) => u.id === G.value);
@@ -4197,7 +4207,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
         };
       }
       return {};
-    }), xe = U(() => Object.keys(e.appState.selectedElementIds)), Ye = U(() => {
+    }), ke = U(() => Object.keys(e.appState.selectedElementIds)), Ye = U(() => {
       if (G.value) {
         const p = e.elements.find((x) => x.id === G.value);
         if (p)
@@ -4215,10 +4225,10 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
       let C = ((p.x - x.x) * (y.x - x.x) + (p.y - x.y) * (y.y - x.y)) / u;
       return C = Math.max(0, Math.min(1, C)), Math.hypot(p.x - (x.x + C * (y.x - x.x)), p.y - (x.y + C * (y.y - x.y)));
     }, an = (p, x, y) => {
-      const u = y.x + y.width / 2, C = y.y + y.height / 2, [g, P] = me([p, x], [u, C], -y.angle), S = g - y.x, _ = P - y.y, E = 10 / t.zoom, Y = y.points;
-      if (!Y) return !1;
-      for (let L = 0; L < Y.length - 1; L++) {
-        const A = { x: Y[L][0], y: Y[L][1] }, w = { x: Y[L + 1][0], y: Y[L + 1][1] };
+      const u = y.x + y.width / 2, C = y.y + y.height / 2, [g, P] = me([p, x], [u, C], -y.angle), S = g - y.x, _ = P - y.y, E = 10 / t.zoom, V = y.points;
+      if (!V) return !1;
+      for (let L = 0; L < V.length - 1; L++) {
+        const A = { x: V[L][0], y: V[L][1] }, w = { x: V[L + 1][0], y: V[L + 1][1] };
         if (on({ x: S, y: _ }, A, w) <= E) return !0;
       }
       return !1;
@@ -4229,23 +4239,23 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
         const S = C[P];
         if (!S || S.isDeleted || y && S.id === y) continue;
         let _ = !1;
-        const E = e.appState.selectedElementIds[S.id], Y = S.backgroundColor && S.backgroundColor !== "transparent" && S.fillStyle !== "none" || u && E;
+        const E = e.appState.selectedElementIds[S.id], V = S.backgroundColor && S.backgroundColor !== "transparent" && S.fillStyle !== "none" || u && E;
         let L = p, A = x;
         if (S.isFlippedHorizontal || S.isFlippedVertical) {
-          const w = S.x + S.width / 2, F = S.y + S.height / 2, [Q, K] = me([p, x], [w, F], -(S.angle || 0)), Z = S.isFlippedHorizontal ? w - (Q - w) : Q, pe = S.isFlippedVertical ? F - (K - F) : K, Se = me([Z, pe], [w, F], S.angle || 0);
-          L = Se[0], A = Se[1];
+          const w = S.x + S.width / 2, F = S.y + S.height / 2, [Q, K] = me([p, x], [w, F], -(S.angle || 0)), Z = S.isFlippedHorizontal ? w - (Q - w) : Q, pe = S.isFlippedVertical ? F - (K - F) : K, Ie = me([Z, pe], [w, F], S.angle || 0);
+          L = Ie[0], A = Ie[1];
         }
         if (["rectangle", "frame", "square", "process"].includes(S.type))
-          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);
+          V ? _ = ft(L, A, S.x, S.y, S.width, S.height, S.angle) : _ = si(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) : _ = Gn(L, A, S.x, S.y, S.width, S.height, S.angle);
+          V ? _ = Tt(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 ? _ = 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);
+          V ? _ = rs(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 (["diamond", "decision"].includes(S.type))
-          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);
+          V ? _ = At(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);
         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) : _ = ls(L, A, w, S.x, S.y, S.angle);
+          S.type === "star" ? w = St(S.width, S.height) : S.type === "trapezoid" ? w = Ft(S.width, S.height) : S.type === "parallelogram" && (w = Ot(S.width, S.height)), V ? _ = 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) {
@@ -4280,18 +4290,18 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
       end: "pointer"
     }[p] || "default", Xt = (p, x, y, u) => {
       if (p.locked) return null;
-      const C = (p.x + y) * x, g = (p.y + u) * x, P = p.width * x, S = p.height * x, _ = p.angle || 0, E = C + P / 2, Y = g + S / 2, L = (Q, K) => me([Q, K], [E, Y], _), A = 4, w = 8, F = {};
+      const C = (p.x + y) * x, g = (p.y + u) * x, P = p.width * x, S = p.height * x, _ = p.angle || 0, E = C + P / 2, V = g + S / 2, L = (Q, K) => me([Q, K], [E, V], _), A = 4, w = 8, F = {};
       if (p.type === "line" || p.type === "arrow") {
         if (p.points && p.points.length >= 2) {
-          const Q = p.points, K = p.x + p.width / 2, Z = p.y + p.height / 2, pe = (Se) => {
-            const be = p.x + Se[0], Ve = p.y + Se[1], [je, He] = me([be, Ve], [K, Z], _);
+          const Q = p.points, K = p.x + p.width / 2, Z = p.y + p.height / 2, pe = (Ie) => {
+            const be = p.x + Ie[0], Ve = p.y + Ie[1], [je, He] = me([be, Ve], [K, Z], _);
             return [
               (je + y) * x,
               (He + u) * x
             ];
           };
-          return Q.forEach((Se, be) => {
-            const Ve = pe(Se);
+          return Q.forEach((Ie, be) => {
+            const Ve = pe(Ie);
             F[`point-${be}`] = [Ve[0], Ve[1], w, w];
           }), F;
         }
@@ -4300,9 +4310,9 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
       return F.nw = [...L(C - A, g - A), w, w], F.ne = [...L(C + P + A, g - A), w, w], F.sw = [...L(C - A, g + S + A), w, w], F.se = [...L(C + P + A, g + S + A), w, w], F.n = [...L(C + P / 2, g - A), w, w], F.s = [...L(C + P / 2, g + S + A), w, w], F.w = [...L(C - A, g + S / 2), w, w], F.e = [...L(C + P + A, g + S / 2), w, w], F.rotation = [...L(C + P / 2, g - A * 4), w, w], F;
     }, Mn = (p) => {
       if (Oe.value.visible && (Oe.value.visible = !1), G.value) return;
-      if (Pe.value) {
-        const g = e.elements.find((P) => P.id === Pe.value);
-        g && (e.updateElement(g.id, { locked: !1 }), g.containerId && e.updateElement(g.containerId, { locked: !1 })), Pe.value = null, Be();
+      if (Be.value) {
+        const g = e.elements.find((P) => P.id === Be.value);
+        g && (e.updateElement(g.id, { locked: !1 }), g.containerId && e.updateElement(g.containerId, { locked: !1 })), Be.value = null, ze();
         return;
       }
       if (p.button === 2 && e.appState.rightClickPan) {
@@ -4313,7 +4323,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
         }
       }
       const x = e.appState.activeTool === "shapes" ? e.appState.activeToolType : e.appState.activeTool, { x: y, y: u } = de(p);
-      if (ne.value = { x: y, y: u }, Ue.value = { x: y, y: u }, ae.value = { x: y, y: u }, x === "selection") {
+      if (ne.value = { x: y, y: u }, Ue.value = { x: y, y: u }, oe.value = { x: y, y: u }, x === "selection") {
         const g = Object.keys(e.appState.selectedElementIds);
         let P = null;
         if (g.length === 1)
@@ -4332,21 +4342,21 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
           });
         }
         if (P) {
-          const S = n.value.getBoundingClientRect(), _ = p.clientX - S.left, E = p.clientY - S.top, Y = Xt(P, t.zoom, t.scrollX, t.scrollY);
-          if (Y) {
-            for (const [L, [A, w]] of Object.entries(Y))
+          const S = n.value.getBoundingClientRect(), _ = p.clientX - S.left, E = p.clientY - S.top, V = Xt(P, t.zoom, t.scrollX, t.scrollY);
+          if (V) {
+            for (const [L, [A, w]] of Object.entries(V))
               if (Math.hypot(_ - A, E - w) < 10) {
                 if (b.value = L, d.value = !0, q.value = P.angle, B.value = JSON.parse(JSON.stringify(P)), L === "rotation") {
                   const Q = P.x + P.width / 2, K = P.y + P.height / 2;
-                  se.value = Math.atan2(u - K, y - Q), le.value = 0, oe.value = 0;
+                  se.value = Math.atan2(u - K, y - Q), le.value = 0, ie.value = 0;
                 }
                 if (g.length > 1) {
                   const Q = {};
                   e.elements.forEach((K) => {
                     e.appState.selectedElementIds[K.id] && (Q[K.id] = JSON.parse(JSON.stringify(K)));
-                  }), X.value = Q;
+                  }), Y.value = Q;
                 } else
-                  X.value = null;
+                  Y.value = null;
                 return;
               }
           }
@@ -4363,18 +4373,18 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
           for (let _ = e.elements.length - 1; _ >= 0; _--) {
             const E = e.elements[_];
             if (E && e.appState.selectedElementIds[E.id] && !E.isDeleted) {
-              let Y = !1;
+              let V = !1;
               if (["rectangle", "frame", "image", "text", "square", "process"].includes(E.type))
-                Y = ft(y, u, E.x, E.y, E.width, E.height, E.angle);
+                V = ft(y, u, E.x, E.y, E.width, E.height, E.angle);
               else if (["ellipse", "circle"].includes(E.type))
-                Y = Ct(y, u, E.x, E.y, E.width, E.height, E.angle);
+                V = Tt(y, u, E.x, E.y, E.width, E.height, E.angle);
               else if (E.type === "cylinder")
-                Y = rs(y, u, E.x, E.y, E.width, E.height, E.angle);
+                V = 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 = 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) {
+                E.type === "star" ? L = St(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 = ti(E.width, E.height)), V = Dt(y, u, L, E.x, E.y, E.angle);
+              } else E.type === "freedraw" ? V = ft(y, u, E.x, E.y, E.width, E.height, E.angle) : (E.type === "arrow" || E.type === "line") && (V = Rn(10, y, u, E, e.elements));
+              if (V) {
                 g = E;
                 break;
               }
@@ -4386,7 +4396,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
         }
         let S = !1;
         if (!g && P.length > 1 && !(p.ctrlKey || p.metaKey)) {
-          const _ = e.elements.filter((Y) => e.appState.selectedElementIds[Y.id]), E = Gt(_);
+          const _ = e.elements.filter((V) => e.appState.selectedElementIds[V.id]), E = Gt(_);
           E && ft(y, u, E.x, E.y, E.width, E.height, 0) && (S = !0);
         }
         if (g || S) {
@@ -4396,10 +4406,10 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
               const w = e.elements.find((F) => F.id === g.containerId);
               w && !w.isDeleted && (E = w.id);
             }
-            const Y = e.elements.find((w) => w.id === E);
+            const V = e.elements.find((w) => w.id === E);
             let L = [E];
-            if (Y && Y.groupIds.length > 0) {
-              const w = Y.groupIds[Y.groupIds.length - 1];
+            if (V && V.groupIds.length > 0) {
+              const w = V.groupIds[V.groupIds.length - 1];
               L = e.elements.filter((F) => F.groupIds.includes(w)).map((F) => F.id);
             }
             if (p.ctrlKey || p.metaKey) {
@@ -4409,7 +4419,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
               e.appState.selectedElementIds[E] || e.setSelectedElementIds(L);
           }
           let _ = !0;
-          g && g.locked && (_ = !1), S && e.elements.filter((Y) => e.appState.selectedElementIds[Y.id]).some((Y) => Y.locked) && (_ = !1), _ && p.button === 0 && (T.value = !0);
+          g && g.locked && (_ = !1), S && e.elements.filter((V) => e.appState.selectedElementIds[V.id]).some((V) => V.locked) && (_ = !1), _ && p.button === 0 && (T.value = !0);
         } else
           p.button === 0 ? (I.value = !0, e.appState.isBoxSelecting = !0, p.ctrlKey || p.metaKey || e.setSelectedElementIds([])) : p.ctrlKey || p.metaKey || e.setSelectedElementIds([]);
         return;
@@ -4443,12 +4453,12 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
       if (x === "arrow" && H.value) {
         const g = e.elements.find((P) => P.id === H.value);
         if (g && !g.isDeleted) {
-          const P = g.x + g.width / 2, S = g.y + g.height / 2, [_, E] = me([y, u], [P, S], -g.angle), Y = (_ - g.x) / g.width, L = (E - g.y) / g.height;
+          const P = g.x + g.width / 2, S = g.y + g.height / 2, [_, E] = me([y, u], [P, S], -g.angle), V = (_ - g.x) / g.width, L = (E - g.y) / g.height;
           C.startBinding = {
             elementId: g.id,
             focus: 0,
             gap: 5,
-            fixedPoint: [Y, L]
+            fixedPoint: [V, L]
           };
         }
         D.value = H.value;
@@ -4457,7 +4467,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
     }, En = (p) => {
       if (G.value) return;
       const x = e.appState.activeTool === "shapes" ? e.appState.activeToolType : e.appState.activeTool, { x: y, y: u } = de(p);
-      if (ae.value = { x: y, y: u }, x === "laser" && d.value) {
+      if (oe.value = { x: y, y: u }, x === "laser" && d.value) {
         const A = tt.value[tt.value.length - 1];
         A && A.push({ x: y, y: u, time: Date.now() });
         return;
@@ -4467,14 +4477,14 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
       for (const A of C) {
         const w = e.elements.find((F) => F.id === A);
         if (w && w.locked && !w.isDeleted) {
-          const F = w.x + w.width / 2, Q = w.y + w.height / 2, [K, Z] = me([y, u], [F, Q], -w.angle), pe = w.x, Se = w.y - 50, be = 40;
-          if (K >= pe && K <= pe + be && Z >= Se && Z <= Se + be) {
+          const F = w.x + w.width / 2, Q = w.y + w.height / 2, [K, Z] = me([y, u], [F, Q], -w.angle), pe = w.x, Ie = w.y - 50, be = 40;
+          if (K >= pe && K <= pe + be && Z >= Ie && Z <= Ie + be) {
             g = !0, P = A;
             break;
           }
         }
       }
-      if (Pe.value !== P && (Pe.value = P, Be()), g) {
+      if (Be.value !== P && (Be.value = P, ze()), g) {
         n.value.style.cursor = "pointer";
         return;
       }
@@ -4489,9 +4499,9 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
               break;
             }
           }
-          Ee.value !== F && (Ee.value = F, Be());
-        } else Ee.value && (Ee.value = null, Be());
-      } else Ee.value && (Ee.value = null, Be());
+          Ce.value !== F && (Ce.value = F, ze());
+        } else Ce.value && (Ce.value = null, ze());
+      } else Ce.value && (Ce.value = null, ze());
       if ((x === "line" || x === "arrow") && d.value && ee.value) {
         const A = ln(y, u, ee.value);
         A !== N.value && (N.value = A);
@@ -4517,13 +4527,13 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
         if (w) {
           const Q = n.value.getBoundingClientRect(), K = p.clientX - Q.left, Z = p.clientY - Q.top, pe = Xt(w, t.zoom, t.scrollX, t.scrollY);
           if (pe) {
-            let Se = !1;
+            let Ie = !1;
             for (const [be, [Ve, je]] of Object.entries(pe))
               if (Math.hypot(K - Ve, Z - je) < 10) {
-                n.value.style.cursor = rn(be), Se = !0;
+                n.value.style.cursor = rn(be), Ie = !0;
                 break;
               }
-            if (Se) return;
+            if (Ie) return;
           }
           w.id === "selection-group" && ft(y, u, w.x, w.y, w.width, w.height, 0) && (n.value.style.cursor = "move");
         }
@@ -4533,13 +4543,13 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
             const Z = e.elements[K];
             if (!(!Z || Z.isDeleted) && e.appState.selectedElementIds[Z.id]) {
               let pe = !1;
-              if (["rectangle", "image", "text", "frame", "freedraw", "square", "process"].includes(Z.type) ? pe = ft(y, u, Z.x, Z.y, Z.width, Z.height, Z.angle) : ["diamond", "decision", "star", "trapezoid", "parallelogram"].includes(Z.type) ? pe = At(y, u, Z.x, Z.y, Z.width, Z.height, Z.angle) : ["ellipse", "circle", "cylinder"].includes(Z.type) ? pe = Ct(y, u, Z.x, Z.y, Z.width, Z.height, Z.angle) : ["arrow", "line"].includes(Z.type), pe) {
+              if (["rectangle", "image", "text", "frame", "freedraw", "square", "process"].includes(Z.type) ? pe = ft(y, u, Z.x, Z.y, Z.width, Z.height, Z.angle) : ["diamond", "decision", "star", "trapezoid", "parallelogram"].includes(Z.type) ? pe = At(y, u, Z.x, Z.y, Z.width, Z.height, Z.angle) : ["ellipse", "circle", "cylinder"].includes(Z.type) ? pe = Tt(y, u, Z.x, Z.y, Z.width, Z.height, Z.angle) : ["arrow", "line"].includes(Z.type), pe) {
                 F = Z;
                 break;
               }
             }
           }
-        F && !d.value && !F.locked ? (he.value = F.id, n.value.style.cursor = "move") : he.value = null, he.value && Be();
+        F && !d.value && !F.locked ? (he.value = F.id, n.value.style.cursor = "move") : he.value = null, he.value && ze();
       }
       if ((x === "arrow" || x === "line") && Yt(p, y, u), d.value && b.value === "rotation" && B.value) {
         const A = B.value, w = A.id, F = A.x + A.width / 2, Q = A.y + A.height / 2, K = Math.atan2(u - Q, y - F);
@@ -4547,208 +4557,208 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
         Z > Math.PI && (Z -= 2 * Math.PI), Z < -Math.PI && (Z += 2 * Math.PI), le.value += Z, se.value = K;
         let pe = le.value;
         if (p.shiftKey) {
-          const Se = Math.PI / 12;
-          pe = Math.round(le.value / Se) * Se;
+          const Ie = Math.PI / 12;
+          pe = Math.round(le.value / Ie) * Ie;
         }
-        if (oe.value = pe, X.value && w === "selection-group") {
-          const Se = pe;
-          Object.values(X.value).forEach((be) => {
+        if (ie.value = pe, Y.value && w === "selection-group") {
+          const Ie = pe;
+          Object.values(Y.value).forEach((be) => {
             const [Ve, je] = me(
               [be.x + be.width / 2, be.y + be.height / 2],
               [F, Q],
-              Se
+              Ie
             );
             e.updateElement(be.id, {
               x: Ve - be.width / 2,
               y: je - be.height / 2,
-              angle: be.angle + Se
+              angle: be.angle + Ie
             });
           });
         } else {
-          const Se = q.value + pe, be = e.elements.find((Ve) => Ve.type === "text" && Ve.containerId === A.id && !Ve.isDeleted);
-          be && e.updateElement(be.id, { angle: Se }), e.updateElement(A.id, { angle: Se });
+          const Ie = q.value + pe, be = e.elements.find((Ve) => Ve.type === "text" && Ve.containerId === A.id && !Ve.isDeleted);
+          be && e.updateElement(be.id, { angle: Ie }), e.updateElement(A.id, { angle: Ie });
         }
-        Be();
+        ze();
         return;
       }
       if (d.value && b.value && B.value) {
         const A = b.value, w = B.value;
-        if ((w.type === "line" || w.type === "arrow") && A.startsWith("point-") && !X.value) {
-          let fe = y, Me = u;
+        if ((w.type === "line" || w.type === "arrow") && A.startsWith("point-") && !Y.value) {
+          let fe = y, Ee = u;
           const rt = w.points, _n = w.x + w.width / 2, An = w.y + w.height / 2, qe = rt.map((ue) => {
             const Re = w.x + ue[0], yt = w.y + ue[1];
             return me([Re, yt], [_n, An], w.angle);
           });
           let mt = parseInt(A.split("-")[1] || "");
           if (isNaN(mt) && (mt = A === "start" ? 0 : qe.length - 1), p.shiftKey && qe.length > 1) {
-            const ue = A === "start" ? 1 : qe.length - 2, Re = qe[ue], yt = qe[mt], Te = Math.atan2(yt[1] - Re[1], yt[0] - Re[0]), Ge = Math.atan2(Me - Re[1], fe - Re[0]), xt = Math.hypot(fe - Re[0], Me - Re[1]);
+            const ue = A === "start" ? 1 : qe.length - 2, Re = qe[ue], yt = qe[mt], Pe = Math.atan2(yt[1] - Re[1], yt[0] - Re[0]), Ge = Math.atan2(Ee - Re[1], fe - Re[0]), xt = Math.hypot(fe - Re[0], Ee - Re[1]);
             let ct = Ge;
             if (Re && yt) {
-              let pt = Math.abs(Ge - Te);
+              let pt = Math.abs(Ge - Pe);
               pt > Math.PI && (pt = 2 * Math.PI - pt);
-              const kt = Te + Math.PI > Math.PI ? Te - Math.PI : Te + Math.PI;
-              let Et = Math.abs(Ge - kt);
-              if (Et > Math.PI && (Et = 2 * Math.PI - Et), pt < 0.1 || Et < 0.1)
-                ct = pt < 0.1 ? Te : kt;
+              const kt = Pe + Math.PI > Math.PI ? Pe - Math.PI : Pe + Math.PI;
+              let Ct = Math.abs(Ge - kt);
+              if (Ct > Math.PI && (Ct = 2 * Math.PI - Ct), pt < 0.1 || Ct < 0.1)
+                ct = pt < 0.1 ? Pe : kt;
               else {
                 const Wt = 15 * Math.PI / 180;
                 ct = Math.round(Ge / Wt) * Wt;
               }
-              fe = Re[0] + xt * Math.cos(ct), Me = Re[1] + xt * Math.sin(ct);
+              fe = Re[0] + xt * Math.cos(ct), Ee = Re[1] + xt * Math.sin(ct);
             }
           }
-          Yt(p, fe, Me);
-          let wt = null, R = vt(fe, Me, w.id);
+          Yt(p, fe, Ee);
+          let bt = null, R = vt(fe, Ee, w.id);
           if (R && ["rectangle", "diamond", "ellipse", "image", "text", "frame", "square", "star", "circle", "cylinder", "process", "decision", "trapezoid", "parallelogram"].includes(R.type) && !R.locked) {
             let ue = !0;
-            R.type === "frame" && fe > R.x + 10 && fe < R.x + R.width - 10 && Me > R.y + 10 && Me < R.y + R.height - 10 && (ue = !1), ue ? (wt = R.id, he.value = R.id) : (R = null, wt = null, he.value = null);
+            R.type === "frame" && fe > R.x + 10 && fe < R.x + R.width - 10 && Ee > R.y + 10 && Ee < R.y + R.height - 10 && (ue = !1), ue ? (bt = R.id, he.value = R.id) : (R = null, bt = null, he.value = null);
           } else if (H.value) {
             const ue = e.elements.find((Re) => Re.id === H.value);
             if (ue && !ue.isDeleted && ["rectangle", "diamond", "ellipse", "image", "text", "frame"].includes(ue.type) && !ue.locked) {
               let Re = !0;
-              ue.type === "frame" && fe > ue.x + 10 && fe < ue.x + ue.width - 10 && Me > ue.y + 10 && Me < ue.y + ue.height - 10 && (Re = !1), Re ? (wt = ue.id, R = ue, he.value = ue.id) : he.value = null;
+              ue.type === "frame" && fe > ue.x + 10 && fe < ue.x + ue.width - 10 && Ee > ue.y + 10 && Ee < ue.y + ue.height - 10 && (Re = !1), Re ? (bt = ue.id, R = ue, he.value = ue.id) : he.value = null;
             } else
               he.value = null;
           } else
             he.value = null;
           let Ht = !1;
           if (qe.length === 3 && (mt === 0 || mt === 2)) {
-            const ue = qe[0], Re = qe[1], yt = qe[2], Te = (ue[0] + yt[0]) / 2, Ge = (ue[1] + yt[1]) / 2;
-            Math.abs(Re[0] - Te) < 1 && Math.abs(Re[1] - Ge) < 1 && (Ht = !0);
+            const ue = qe[0], Re = qe[1], yt = qe[2], Pe = (ue[0] + yt[0]) / 2, Ge = (ue[1] + yt[1]) / 2;
+            Math.abs(Re[0] - Pe) < 1 && Math.abs(Re[1] - Ge) < 1 && (Ht = !0);
           }
-          if (qe[mt] = [fe, Me], Ht) {
+          if (qe[mt] = [fe, Ee], Ht) {
             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]), 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 = {
+          const Jt = qe.map((ue) => ue[0]), ts = qe.map((ue) => ue[1]), ns = Math.min(...Jt), Rs = Math.max(...Jt), ss = Math.min(...ts), Xs = Math.max(...ts), is = ns, os = ss, Ys = Rs - ns, Vs = Xs - ss, js = qe.map((ue) => [ue[0] - is, ue[1] - os]), Zt = {
             x: is,
             y: os,
-            width: Xs,
-            height: Ys,
-            points: Vs,
+            width: Ys,
+            height: Vs,
+            points: js,
             angle: 0
             // Reset angle for simplicity
           };
           if (mt === 0) {
-            let ue = wt ? { elementId: wt, focus: 0, gap: 5 } : null;
-            if (wt && R)
+            let ue = bt ? { elementId: bt, focus: 0, gap: 5 } : null;
+            if (bt && R)
               if ((() => {
                 if (["rectangle", "image", "text", "frame", "square", "process"].includes(R.type))
-                  return ft(fe, Me, R.x + 10, R.y + 10, R.width - 20, R.height - 20, R.angle);
+                  return ft(fe, Ee, R.x + 10, R.y + 10, R.width - 20, R.height - 20, R.angle);
                 if (["ellipse", "circle", "cylinder"].includes(R.type))
-                  return Ct(fe, Me, R.x + 10, R.y + 10, R.width - 20, R.height - 20, R.angle);
+                  return Tt(fe, Ee, R.x + 10, R.y + 10, R.width - 20, R.height - 20, R.angle);
                 if (["diamond", "decision"].includes(R.type))
-                  return At(fe, Me, R.x + 10, R.y + 10, R.width - 20, R.height - 20, R.angle);
+                  return At(fe, Ee, R.x + 10, R.y + 10, R.width - 20, R.height - 20, R.angle);
                 if (["star", "trapezoid", "parallelogram"].includes(R.type)) {
-                  let Te = [];
-                  return R.type === "star" ? Te = bt(R.width - 20, R.height - 20) : R.type === "trapezoid" ? Te = Ft(R.width - 20, R.height - 20) : R.type === "parallelogram" && (Te = Ot(R.width - 20, R.height - 20)), Dt(fe, Me, Te, R.x + 10, R.y + 10, R.angle);
+                  let Pe = [];
+                  return R.type === "star" ? Pe = St(R.width - 20, R.height - 20) : R.type === "trapezoid" ? Pe = Ft(R.width - 20, R.height - 20) : R.type === "parallelogram" && (Pe = Ot(R.width - 20, R.height - 20)), Dt(fe, Ee, Pe, R.x + 10, R.y + 10, R.angle);
                 }
                 return !1;
               })()) {
-                const Te = R.x + R.width / 2, Ge = R.y + R.height / 2, [xt, ct] = me([fe, Me], [Te, Ge], -R.angle), pt = (xt - R.x) / R.width, kt = (ct - R.y) / R.height;
+                const Pe = R.x + R.width / 2, Ge = R.y + R.height / 2, [xt, ct] = me([fe, Ee], [Pe, Ge], -R.angle), pt = (xt - R.x) / R.width, kt = (ct - R.y) / R.height;
                 ue.fixedPoint = [pt, kt], ue.isBorder = !1;
               } else {
-                const Te = R.x + R.width / 2, Ge = R.y + R.height / 2, xt = Math.atan2(Me - Ge, fe - Te), ct = Math.max(R.width, R.height) * 2, pt = [
-                  Te + Math.cos(xt) * ct,
+                const Pe = R.x + R.width / 2, Ge = R.y + R.height / 2, xt = Math.atan2(Ee - Ge, fe - Pe), ct = Math.max(R.width, R.height) * 2, pt = [
+                  Pe + Math.cos(xt) * ct,
                   Ge + Math.sin(xt) * ct
-                ], kt = Pt(R, pt, [Te, Ge]);
+                ], kt = Pt(R, pt, [Pe, Ge]);
                 if (kt) {
-                  const [Et, Wt] = me(kt, [Te, Ge], -R.angle), Dn = (Et - R.x) / R.width, Fn = (Wt - R.y) / R.height;
+                  const [Ct, Wt] = me(kt, [Pe, Ge], -R.angle), Dn = (Ct - R.x) / R.width, Fn = (Wt - R.y) / R.height;
                   ue.fixedPoint = [Dn, Fn], ue.isBorder = !0;
                 }
               }
             Zt.startBinding = ue;
           } else w.startBinding && (Zt.startBinding = w.startBinding);
           if (mt === qe.length - 1) {
-            let ue = wt ? { elementId: wt, focus: 0, gap: 5 } : null;
-            if (wt && R)
+            let ue = bt ? { elementId: bt, focus: 0, gap: 5 } : null;
+            if (bt && R)
               if ((() => {
                 if (["rectangle", "image", "text", "frame", "square", "process"].includes(R.type))
-                  return ft(fe, Me, R.x + 10, R.y + 10, R.width - 20, R.height - 20, R.angle);
+                  return ft(fe, Ee, R.x + 10, R.y + 10, R.width - 20, R.height - 20, R.angle);
                 if (["ellipse", "circle", "cylinder"].includes(R.type))
-                  return Ct(fe, Me, R.x + 10, R.y + 10, R.width - 20, R.height - 20, R.angle);
+                  return Tt(fe, Ee, R.x + 10, R.y + 10, R.width - 20, R.height - 20, R.angle);
                 if (["diamond", "decision"].includes(R.type))
-                  return At(fe, Me, R.x + 10, R.y + 10, R.width - 20, R.height - 20, R.angle);
+                  return At(fe, Ee, R.x + 10, R.y + 10, R.width - 20, R.height - 20, R.angle);
                 if (["star", "trapezoid", "parallelogram"].includes(R.type)) {
-                  let Te = [];
-                  return R.type === "star" ? Te = bt(R.width - 20, R.height - 20) : R.type === "trapezoid" ? Te = Ft(R.width - 20, R.height - 20) : R.type === "parallelogram" && (Te = Ot(R.width - 20, R.height - 20)), Dt(fe, Me, Te, R.x + 10, R.y + 10, R.angle);
+                  let Pe = [];
+                  return R.type === "star" ? Pe = St(R.width - 20, R.height - 20) : R.type === "trapezoid" ? Pe = Ft(R.width - 20, R.height - 20) : R.type === "parallelogram" && (Pe = Ot(R.width - 20, R.height - 20)), Dt(fe, Ee, Pe, R.x + 10, R.y + 10, R.angle);
                 }
                 return !1;
               })()) {
-                const Te = R.x + R.width / 2, Ge = R.y + R.height / 2, [xt, ct] = me([fe, Me], [Te, Ge], -R.angle), pt = (xt - R.x) / R.width, kt = (ct - R.y) / R.height;
+                const Pe = R.x + R.width / 2, Ge = R.y + R.height / 2, [xt, ct] = me([fe, Ee], [Pe, Ge], -R.angle), pt = (xt - R.x) / R.width, kt = (ct - R.y) / R.height;
                 ue.fixedPoint = [pt, kt], ue.isBorder = !1;
               } else {
-                const Te = R.x + R.width / 2, Ge = R.y + R.height / 2, xt = Math.atan2(Me - Ge, fe - Te), ct = Math.max(R.width, R.height) * 2, pt = [
-                  Te + Math.cos(xt) * ct,
+                const Pe = R.x + R.width / 2, Ge = R.y + R.height / 2, xt = Math.atan2(Ee - Ge, fe - Pe), ct = Math.max(R.width, R.height) * 2, pt = [
+                  Pe + Math.cos(xt) * ct,
                   Ge + Math.sin(xt) * ct
-                ], kt = Pt(R, pt, [Te, Ge]);
+                ], kt = Pt(R, pt, [Pe, Ge]);
                 if (kt) {
-                  const [Et, Wt] = me(kt, [Te, Ge], -R.angle), Dn = (Et - R.x) / R.width, Fn = (Wt - R.y) / R.height;
+                  const [Ct, Wt] = me(kt, [Pe, Ge], -R.angle), Dn = (Ct - R.x) / R.width, Fn = (Wt - R.y) / R.height;
                   ue.fixedPoint = [Dn, Fn], ue.isBorder = !0;
                 }
               }
             Zt.endBinding = ue;
           } else w.endBinding && (Zt.endBinding = w.endBinding);
-          e.updateElement(w.id, Zt), (mt === 0 || mt === qe.length - 1) && w.type === "arrow" ? Yt(p, y, u) : Be();
+          e.updateElement(w.id, Zt), (mt === 0 || mt === qe.length - 1) && w.type === "arrow" ? Yt(p, y, u) : ze();
           return;
         }
-        const F = w.x + w.width / 2, Q = w.y + w.height / 2, [K, Z] = me([y, u], [F, Q], -w.angle), [pe, Se] = me([ne.value.x, ne.value.y], [F, Q], -w.angle), be = K - pe, Ve = Z - Se;
-        let je = w.x, He = w.y, Ie = w.width, Le = w.height;
-        if (A.includes("e") && (Ie += be), A.includes("w") && (je += be, Ie -= be), A.includes("s") && (Le += Ve), A.includes("n") && (He += Ve, Le -= Ve), p.shiftKey && (["rectangle", "diamond", "ellipse", "star", "cylinder", "process", "decision", "trapezoid", "parallelogram"].includes(w.type) || w.id === "selection-group") || ["square", "circle"].includes(w.type)) {
+        const F = w.x + w.width / 2, Q = w.y + w.height / 2, [K, Z] = me([y, u], [F, Q], -w.angle), [pe, Ie] = me([ne.value.x, ne.value.y], [F, Q], -w.angle), be = K - pe, Ve = Z - Ie;
+        let je = w.x, He = w.y, Me = w.width, Le = w.height;
+        if (A.includes("e") && (Me += be), A.includes("w") && (je += be, Me -= be), A.includes("s") && (Le += Ve), A.includes("n") && (He += Ve, Le -= Ve), p.shiftKey && (["rectangle", "diamond", "ellipse", "star", "cylinder", "process", "decision", "trapezoid", "parallelogram"].includes(w.type) || w.id === "selection-group") || ["square", "circle"].includes(w.type)) {
           const fe = w.width / w.height;
-          Math.abs(Ie) / fe > Math.abs(Le) ? Le = (Le < 0 ? -1 : 1) * Math.abs(Ie / fe) : Ie = (Ie < 0 ? -1 : 1) * Math.abs(Le * fe), A.includes("w") && (je = w.x + w.width - Ie), A.includes("n") && (He = w.y + w.height - Le);
+          Math.abs(Me) / fe > Math.abs(Le) ? Le = (Le < 0 ? -1 : 1) * Math.abs(Me / fe) : Me = (Me < 0 ? -1 : 1) * Math.abs(Le * fe), A.includes("w") && (je = w.x + w.width - Me), A.includes("n") && (He = w.y + w.height - Le);
         }
-        if (Ie < 0 && (je += Ie, Ie = Math.abs(Ie)), Le < 0 && (He += Le, Le = Math.abs(Le)), X.value && w.id === "selection-group") {
-          const fe = Ie / w.width, Me = Le / w.height;
-          Object.values(X.value).forEach((rt) => {
-            const _n = rt.x - w.x, An = rt.y - w.y, qe = w.x + (je - w.x) + _n * fe, mt = w.y + (He - w.y) + An * Me, wt = rt.width * fe, R = rt.height * Me, Ht = {
+        if (Me < 0 && (je += Me, Me = Math.abs(Me)), Le < 0 && (He += Le, Le = Math.abs(Le)), Y.value && w.id === "selection-group") {
+          const fe = Me / w.width, Ee = Le / w.height;
+          Object.values(Y.value).forEach((rt) => {
+            const _n = rt.x - w.x, An = rt.y - w.y, qe = w.x + (je - w.x) + _n * fe, mt = w.y + (He - w.y) + An * Ee, bt = rt.width * fe, R = rt.height * Ee, Ht = {
               x: qe,
               y: mt,
-              width: wt,
+              width: bt,
               height: R
             };
-            rt.type === "text" && (Ht.fontSize = (rt.fontSize || 20) * fe), rt.type === "freedraw" && (Ht.points = rt.points.map((Jt) => [Jt[0] * fe, Jt[1] * Me])), e.updateElement(rt.id, Ht);
-          }), Be();
+            rt.type === "text" && (Ht.fontSize = (rt.fontSize || 20) * fe), rt.type === "freedraw" && (Ht.points = rt.points.map((Jt) => [Jt[0] * fe, Jt[1] * Ee])), e.updateElement(rt.id, Ht);
+          }), ze();
           return;
         }
-        const Je = { x: je, y: He, width: Ie, height: Le };
+        const Je = { x: je, y: He, width: Me, height: Le };
         if (w.type === "text")
           if (!w.containerId && !w.frameId)
             if (A === "n" || A === "s")
               Je.fontSize = Math.round((w.fontSize || 20) * (Le / w.height)), Je.width = w.width * (Le / w.height), Je.height = Le;
             else if (A === "e" || A === "w") {
               const fe = Ne("，", w.fontSize || 20, w.fontFamily || "sans-serif", void 0, { isBold: w.isBold, isItalic: w.isItalic }).width;
-              Ie < fe && (Ie = fe, A === "w" && (je = w.x + (w.width - fe)));
-              const Me = Ne(w.text || "", w.fontSize || 20, w.fontFamily || "sans-serif", Ie, { isBold: w.isBold, isItalic: w.isItalic });
-              Je.height = Me.height, Je.width = Ie, Je.x = je, Je.autoResize = !1;
+              Me < fe && (Me = fe, A === "w" && (je = w.x + (w.width - fe)));
+              const Ee = Ne(w.text || "", w.fontSize || 20, w.fontFamily || "sans-serif", Me, { isBold: w.isBold, isItalic: w.isItalic });
+              Je.height = Ee.height, Je.width = Me, Je.x = je, Je.autoResize = !1;
             } else
-              Je.fontSize = Math.round((w.fontSize || 20) * (Ie / w.width)), Je.height = w.height * (Ie / w.width);
+              Je.fontSize = Math.round((w.fontSize || 20) * (Me / w.width)), Je.height = w.height * (Me / w.width);
           else
             Je.autoResize = !1;
         else if (w.type === "freedraw") {
-          const fe = w.width === 0 ? 1 : Ie / w.width, Me = w.height === 0 ? 1 : Le / w.height;
-          Je.points = w.points.map((rt) => [rt[0] * fe, rt[1] * Me]);
+          const fe = w.width === 0 ? 1 : Me / w.width, Ee = w.height === 0 ? 1 : Le / w.height;
+          Je.points = w.points.map((rt) => [rt[0] * fe, rt[1] * Ee]);
         }
         const $t = e.elements.find((fe) => fe.type === "text" && fe.containerId === w.id && !fe.isDeleted);
         if ($t) {
           const fe = Ne("，", w.fontSize || 20, w.fontFamily || "sans-serif", void 0, { isBold: w.isBold, isItalic: w.isItalic }).width;
-          Ie < fe && (Ie = fe, A.includes("w") && (je = w.x + (w.width - fe), Je.x = je)), Je.width = Ie;
-          const Me = Ne($t.text || "", $t.fontSize || 20, $t.fontFamily || "sans-serif", Ie, { isBold: $t.isBold, isItalic: $t.isItalic }).height;
-          Le < Me && (A.includes("n") && (He = w.y + (w.height - Me), Je.y = He), Le = Me), Je.height = Le, e.updateElement($t.id, {
+          Me < fe && (Me = fe, A.includes("w") && (je = w.x + (w.width - fe), Je.x = je)), Je.width = Me;
+          const Ee = Ne($t.text || "", $t.fontSize || 20, $t.fontFamily || "sans-serif", Me, { isBold: $t.isBold, isItalic: $t.isItalic }).height;
+          Le < Ee && (A.includes("n") && (He = w.y + (w.height - Ee), Je.y = He), Le = Ee), Je.height = Le, e.updateElement($t.id, {
             ...Je,
-            width: Ie,
+            width: Me,
             height: Le
           });
         }
         e.updateElement(w.id, {
           ...Je,
-          width: Math.max(Ie, Je.width),
+          width: Math.max(Me, Je.width),
           height: Math.max(Le, Je.height)
-        }), Be();
+        }), ze();
         return;
       }
       if (v.value && x === "eraser") {
-        h.value.push({ x: y, y: u, timestamp: Date.now() }), h.value.length > 50 && h.value.shift(), Kt(y, u), Be();
+        h.value.push({ x: y, y: u, timestamp: Date.now() }), h.value.length > 50 && h.value.shift(), Kt(y, u), ze();
         return;
       }
       if (x === "hand" && d.value || r.value) {
@@ -4763,22 +4773,22 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
         const F = Object.keys(e.appState.selectedElementIds);
         let Q = y - Ue.value.x, K = u - Ue.value.y;
         W.value = [], e.moveElements(F, Q, K), F.forEach((Z) => {
-          const pe = e.elements.find((Se) => Se.id === Z);
+          const pe = e.elements.find((Ie) => Ie.id === Z);
           pe && pe.type === "arrow" && (pe.startBinding && !F.includes(pe.startBinding.elementId) && e.updateElement(pe.id, { startBinding: null }), pe.endBinding && !F.includes(pe.endBinding.elementId) && e.updateElement(pe.id, { endBinding: null }));
         }), Ue.value = { x: y, y: u };
         return;
       }
       if (I.value && x === "selection") {
-        dn(), Be();
+        dn(), ze();
         return;
       }
       if ((!d.value || !ee.value) && !d.value) {
-        Be();
+        ze();
         return;
       }
       let S = y - ne.value.x, _ = u - ne.value.y;
-      const E = p.shiftKey && ["rectangle", "diamond", "ellipse", "star", "cylinder", "trapezoid", "parallelogram", "process", "decision"].includes(x), Y = ["square", "circle"].includes(x);
-      if (E || Y) {
+      const E = p.shiftKey && ["rectangle", "diamond", "ellipse", "star", "cylinder", "trapezoid", "parallelogram", "process", "decision"].includes(x), V = ["square", "circle"].includes(x);
+      if (E || V) {
         const A = Math.max(Math.abs(S), Math.abs(_));
         S = S < 0 ? -A : A, _ = _ < 0 ? -A : A;
       }
@@ -4791,17 +4801,17 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
         else if (L.type === "line" || L.type === "arrow") {
           let A = S, w = _;
           if (p.shiftKey) {
-            const je = Math.hypot(A, w), He = Math.atan2(w, A), Ie = Math.round(He / (15 * Math.PI / 180)) * (15 * Math.PI / 180);
-            A = je * Math.cos(Ie), w = je * Math.sin(Ie);
+            const je = Math.hypot(A, w), He = Math.atan2(w, A), Me = Math.round(He / (15 * Math.PI / 180)) * (15 * Math.PI / 180);
+            A = je * Math.cos(Me), w = je * Math.sin(Me);
           }
-          const F = ne.value.x + A, Q = ne.value.y + w, K = A < 0 ? F : ne.value.x, Z = w < 0 ? Q : ne.value.y, pe = ne.value.x - K, Se = ne.value.y - Z, be = F - K, Ve = Q - Z;
+          const F = ne.value.x + A, Q = ne.value.y + w, K = A < 0 ? F : ne.value.x, Z = w < 0 ? Q : ne.value.y, pe = ne.value.x - K, Ie = ne.value.y - Z, be = F - K, Ve = Q - Z;
           if (ee.value) {
             let je = {
               x: K,
               y: Z,
               width: Math.abs(A),
               height: Math.abs(w),
-              points: [[pe, Se], [be, Ve]]
+              points: [[pe, Ie], [be, Ve]]
             };
             e.updateElement(ee.value, je);
           }
@@ -4816,7 +4826,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
             F.id !== L.id && !F.isDeleted && F.type !== "frame" && !F.frameId && F.x >= A.x && F.y >= A.y && F.x + F.width <= A.x + A.width && F.y + F.height <= A.y + A.height && (w[F.id] = !0);
           }), Fe.value = w;
         }
-        Be();
+        ze();
       }
     }, Yt = (p, x, y) => {
       const u = p.movementX, C = p.movementY, g = 20;
@@ -4825,19 +4835,19 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
         const _ = Math.abs(u) > Math.abs(C);
         if (e.elements.forEach((E) => {
           if (E.isDeleted || E.locked || E.type === "frame" || E.type === "line" || E.type === "arrow" || E.type === "freedraw" || E.type === "text" && E.containerId) return;
-          const Y = E.x, L = E.y, A = E.width, w = E.height;
+          const V = E.x, L = E.y, A = E.width, w = E.height;
           if (_) {
             if (y >= L - g && y <= L + w + g) {
               let F = 1 / 0;
-              if (x >= Y && x <= Y + A)
+              if (x >= V && x <= V + A)
                 F = 0;
               else {
-                const Q = Math.abs(x - Y), K = Math.abs(x - (Y + A));
+                const Q = Math.abs(x - V), K = Math.abs(x - (V + A));
                 F = Math.min(Q, K);
               }
               F <= g && F < S && (S = F, P = E);
             }
-          } else if (x >= Y - g && x <= Y + A + g) {
+          } else if (x >= V - g && x <= V + A + g) {
             let F = 1 / 0;
             if (y >= L && y <= L + w)
               F = 0;
@@ -4855,15 +4865,15 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
             const L = Object.keys(e.appState.selectedElementIds);
             L.length === 1 && (E = L[0]);
           }
-          const Y = vt(x, y, E);
-          if (Y && Y.type !== "freedraw" && !Y.locked)
-            H.value = Y.id;
+          const V = vt(x, y, E);
+          if (V && V.type !== "freedraw" && !V.locked)
+            H.value = V.id;
           else {
             const L = ln(x, y, E);
             H.value = L;
           }
         }
-        Be();
+        ze();
       }
     }, Cn = (p) => {
       if (e.appState.isPanningCanvas = !1, r.value) {
@@ -4887,20 +4897,20 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
             if (u)
               u.type === "frame" && ne.value.x > u.x + 10 && ne.value.x < u.x + u.width - 10 && ne.value.y > u.y + 10 && ne.value.y < u.y + u.height - 10 && (u = null), y = u ? u.id : null;
             else if (D.value) {
-              const E = e.elements.find((Y) => Y.id === D.value);
+              const E = e.elements.find((V) => V.id === D.value);
               E && !E.isDeleted && (E.type === "frame" && ne.value.x > E.x + 10 && ne.value.x < E.x + E.width - 10 && ne.value.y > E.y + 10 && ne.value.y < E.y + E.height - 10 || (y = E.id, u = E));
             }
             if (y && u) {
-              let Y = !1;
+              let V = !1;
               if (["rectangle", "image", "text", "frame", "square", "process"].includes(u.type))
-                Y = ft(ne.value.x, ne.value.y, u.x + 10, u.y + 10, u.width - 20, u.height - 20, u.angle);
+                V = ft(ne.value.x, ne.value.y, u.x + 10, u.y + 10, u.width - 20, u.height - 20, u.angle);
               else if (["ellipse", "circle", "cylinder"].includes(u.type))
-                Y = Ct(ne.value.x, ne.value.y, u.x + 10, u.y + 10, u.width - 20, u.height - 20, u.angle);
+                V = Tt(ne.value.x, ne.value.y, u.x + 10, u.y + 10, u.width - 20, u.height - 20, u.angle);
               else if (["diamond", "decision"].includes(u.type))
-                Y = At(ne.value.x, ne.value.y, u.x + 10, u.y + 10, u.width - 20, u.height - 20, u.angle);
+                V = At(ne.value.x, ne.value.y, u.x + 10, u.y + 10, u.width - 20, u.height - 20, u.angle);
               else if (["star", "trapezoid", "parallelogram"].includes(u.type)) {
                 let L = [];
-                u.type === "star" ? L = bt(u.width - 20, u.height - 20) : u.type === "trapezoid" ? L = Ft(u.width - 20, u.height - 20) : u.type === "parallelogram" && (L = Ot(u.width - 20, u.height - 20)), Y = Dt(ne.value.x, ne.value.y, L, u.x + 10, u.y + 10, u.angle);
+                u.type === "star" ? L = St(u.width - 20, u.height - 20) : u.type === "trapezoid" ? L = Ft(u.width - 20, u.height - 20) : u.type === "parallelogram" && (L = Ot(u.width - 20, u.height - 20)), V = Dt(ne.value.x, ne.value.y, L, u.x + 10, u.y + 10, u.angle);
               }
               {
                 const L = u.x + u.width / 2, A = u.y + u.height / 2, [w, F] = me([ne.value.x, ne.value.y], [L, A], -u.angle), Q = (w - u.x) / u.width, K = (F - u.y) / u.height;
@@ -4910,54 +4920,54 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
                     focus: 0,
                     gap: 10,
                     fixedPoint: [Q, K],
-                    isBorder: !Y
+                    isBorder: !V
                   }
                 });
               }
             }
-            let C = null, g = vt(ae.value.x, ae.value.y, x.id);
+            let C = null, g = vt(oe.value.x, oe.value.y, x.id);
             if (g)
-              g.type === "frame" && ae.value.x > g.x + 10 && ae.value.x < g.x + g.width - 10 && ae.value.y > g.y + 10 && ae.value.y < g.y + g.height - 10 && (g = null), C = g ? g.id : null;
+              g.type === "frame" && oe.value.x > g.x + 10 && oe.value.x < g.x + g.width - 10 && oe.value.y > g.y + 10 && oe.value.y < g.y + g.height - 10 && (g = null), C = g ? g.id : null;
             else if (H.value) {
-              const E = e.elements.find((Y) => Y.id === H.value);
-              E && !E.isDeleted && (E.type === "frame" && ae.value.x > E.x + 10 && ae.value.x < E.x + E.width - 10 && ae.value.y > E.y + 10 && ae.value.y < E.y + E.height - 10 || (C = E.id, g = E));
+              const E = e.elements.find((V) => V.id === H.value);
+              E && !E.isDeleted && (E.type === "frame" && oe.value.x > E.x + 10 && oe.value.x < E.x + E.width - 10 && oe.value.y > E.y + 10 && oe.value.y < E.y + E.height - 10 || (C = E.id, g = E));
             }
             if (C && g) {
-              let Y = !1;
+              let V = !1;
               if (["rectangle", "image", "text", "frame", "square", "process"].includes(g.type))
-                Y = ft(ae.value.x, ae.value.y, g.x + 10, g.y + 10, g.width - 20, g.height - 20, g.angle);
+                V = ft(oe.value.x, oe.value.y, g.x + 10, g.y + 10, g.width - 20, g.height - 20, g.angle);
               else if (["ellipse", "circle", "cylinder"].includes(g.type))
-                Y = Ct(ae.value.x, ae.value.y, g.x + 10, g.y + 10, g.width - 20, g.height - 20, g.angle);
+                V = Tt(oe.value.x, oe.value.y, g.x + 10, g.y + 10, g.width - 20, g.height - 20, g.angle);
               else if (["diamond", "decision"].includes(g.type))
-                Y = At(ae.value.x, ae.value.y, g.x + 10, g.y + 10, g.width - 20, g.height - 20, g.angle);
+                V = At(oe.value.x, oe.value.y, g.x + 10, g.y + 10, g.width - 20, g.height - 20, g.angle);
               else if (["star", "trapezoid", "parallelogram"].includes(g.type)) {
                 let L = [];
-                g.type === "star" ? L = bt(g.width - 20, g.height - 20) : g.type === "trapezoid" ? L = Ft(g.width - 20, g.height - 20) : g.type === "parallelogram" && (L = Ot(g.width - 20, g.height - 20)), Y = Dt(ae.value.x, ae.value.y, L, g.x + 10, g.y + 10, g.angle);
+                g.type === "star" ? L = St(g.width - 20, g.height - 20) : g.type === "trapezoid" ? L = Ft(g.width - 20, g.height - 20) : g.type === "parallelogram" && (L = Ot(g.width - 20, g.height - 20)), V = Dt(oe.value.x, oe.value.y, L, g.x + 10, g.y + 10, g.angle);
               }
               {
-                const L = g.x + g.width / 2, A = g.y + g.height / 2, [w, F] = me([ae.value.x, ae.value.y], [L, A], -g.angle), Q = (w - g.x) / g.width, K = (F - g.y) / g.height;
+                const L = g.x + g.width / 2, A = g.y + g.height / 2, [w, F] = me([oe.value.x, oe.value.y], [L, A], -g.angle), Q = (w - g.x) / g.width, K = (F - g.y) / g.height;
                 e.updateElement(x.id, {
                   endBinding: {
                     elementId: C,
                     focus: 0,
                     gap: 10,
                     fixedPoint: [Q, K],
-                    isBorder: !Y
+                    isBorder: !V
                   }
                 });
               }
             }
-            const P = ne.value, S = ae.value;
+            const P = ne.value, S = oe.value;
             let _ = null;
             for (const E of e.elements)
               if (E.type === "frame" && !E.isDeleted) {
-                const Y = P.x >= E.x && P.x <= E.x + E.width && P.y >= E.y && P.y <= E.y + E.height, L = S.x >= E.x && S.x <= E.x + E.width && S.y >= E.y && S.y <= E.y + E.height;
-                Y && L && (_ = E.id);
+                const V = P.x >= E.x && P.x <= E.x + E.width && P.y >= E.y && P.y <= E.y + E.height, L = S.x >= E.x && S.x <= E.x + E.width && S.y >= E.y && S.y <= E.y + E.height;
+                V && L && (_ = E.id);
               }
             if (_ && e.updateElement(x.id, { frameId: _ }), (x.type === "line" || x.type === "arrow" && x.arrowType !== "elbow") && x.points.length === 2) {
-              const E = x.points[0], Y = x.points[1];
-              if (E && Y) {
-                const L = (E[0] + Y[0]) / 2, A = (E[1] + Y[1]) / 2, F = { points: [E, [L, A], Y] };
+              const E = x.points[0], V = x.points[1];
+              if (E && V) {
+                const L = (E[0] + V[0]) / 2, A = (E[1] + V[1]) / 2, F = { points: [E, [L, A], V] };
                 x.type === "line" ? F.arrowType = "round" : x.type, e.updateElement(x.id, F);
               }
             }
@@ -4985,15 +4995,15 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
               }
             }
             if (["rectangle", "diamond", "ellipse", "frame", "square", "star", "circle", "cylinder", "process", "decision", "trapezoid", "parallelogram"].includes(x.type) && (x.width < 10 || x.height < 10)) {
-              e.deleteElement(x.id), ee.value = null, d.value = !1, Be();
+              e.deleteElement(x.id), ee.value = null, d.value = !1, ze();
               return;
             }
             x.type !== "arrow" && x.type !== "freedraw" && e.setSelectedElementIds([ee.value]), x.type !== "freedraw" && !e.appState.lockedTool && e.setTool("selection"), (ee.value || Object.keys(e.appState.selectedElementIds).length > 0) && e.recordHistory();
           }
-          xe.value.forEach((x) => {
+          ke.value.forEach((x) => {
             const y = e.elements.find((u) => u.id === x);
             if (y && y.type != "frame") {
-              const u = Ee.value;
+              const u = Ce.value;
               let C = !0;
               if (u === null && y.frameId)
                 if (e.appState.selectedElementIds[y.frameId])
@@ -5012,22 +5022,22 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
             }
           });
         }
-        v.value && Object.keys(ke.value).length > 0 && (Object.keys(ke.value).forEach((x) => {
+        v.value && Object.keys(we.value).length > 0 && (Object.keys(we.value).forEach((x) => {
           e.deleteElement(x);
-        }), ke.value = {}, e.recordHistory()), (T.value || b.value) && e.recordHistory(), d.value = !1, v.value = !1, I.value = !1, e.appState.isBoxSelecting = !1, ee.value = null, b.value = null, H.value = null, D.value = null, T.value = !1, Ee.value = null, Fe.value = {}, e.appState.activeTool === "laser" || Be();
+        }), we.value = {}, e.recordHistory()), (T.value || b.value) && e.recordHistory(), d.value = !1, v.value = !1, I.value = !1, e.appState.isBoxSelecting = !1, ee.value = null, b.value = null, H.value = null, D.value = null, T.value = !1, Ce.value = null, Fe.value = {}, e.appState.activeTool === "laser" || ze();
       }
     }, cn = () => {
       if (O) return;
       const p = () => {
         const x = Date.now(), y = 1e3;
         let u = !1;
-        tt.value = tt.value.map((C) => C.filter((g) => x - g.time < y)).filter((C) => C.length > 0), u = tt.value.length > 0, Be(), u || d.value && e.appState.activeTool === "laser" ? O = requestAnimationFrame(p) : O = null;
+        tt.value = tt.value.map((C) => C.filter((g) => x - g.time < y)).filter((C) => C.length > 0), u = tt.value.length > 0, ze(), u || d.value && e.appState.activeTool === "laser" ? O = requestAnimationFrame(p) : O = null;
       };
       p();
     };
     J("");
     const Vt = J(""), Nt = (p) => {
-      ye.value = !0, Vt.value = te.value + "";
+      xe.value = !0, Vt.value = te.value + "";
     }, Tn = (p) => {
       const x = e.elements.find((y) => y.id === G.value);
       if (x && !x.containerId && x.type === "text") {
@@ -5035,13 +5045,13 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
         e.updateElement(G.value, { width: x.autoResize !== !1 ? u.width : x.width, height: u.height });
       }
     }, Pn = (p) => {
-      ye.value = !1;
+      xe.value = !1;
     }, Bn = (p) => {
-      ye.value || (te.value = p.target.value);
+      xe.value || (te.value = p.target.value);
     };
-    It(() => te.value, (p) => {
+    Mt(() => te.value, (p) => {
       if (G.value) {
-        p && s.value ? et.value = ua(s.value, 1, null).height : et.value = "23px";
+        p && s.value ? et.value = pa(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) {
@@ -5070,13 +5080,13 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
             name: te.value
           }) : te.value.trim() ? e.updateElement(G.value, {
             text: te.value
-          }) : e.deleteElement(G.value), e.recordHistory()), G.value = null, e.setTool("selection"), Be();
+          }) : e.deleteElement(G.value), e.recordHistory()), G.value = null, e.setTool("selection"), ze();
         } else
-          e.deleteElement(G.value), G.value = null, e.setTool("selection"), Be();
+          e.deleteElement(G.value), G.value = null, e.setTool("selection"), ze();
     }, 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);
+      const p = Math.min(ne.value.x, oe.value.x), x = Math.min(ne.value.y, oe.value.y), y = Math.max(ne.value.x, oe.value.x), u = Math.max(ne.value.y, oe.value.y);
       let C = e.elements.filter((S) => !S.isDeleted && !S.locked).filter((S) => {
-        const _ = Js(S);
+        const _ = Zs(S);
         return _.minX >= p && _.maxX <= y && _.minY >= x && _.maxY <= u;
       });
       const g = new Set(C.map((S) => S.id)), P = /* @__PURE__ */ new Set();
@@ -5093,30 +5103,30 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
         if (["rectangle", "frame", "square", "process"].includes(u.type))
           C = ft(p, x, u.x, u.y, u.width, u.height, u.angle);
         else if (["ellipse", "circle", "cylinder"].includes(u.type))
-          C = Ct(p, x, u.x, u.y, u.width, u.height, u.angle);
+          C = Tt(p, x, u.x, u.y, u.width, u.height, u.angle);
         else if (["diamond", "decision"].includes(u.type))
           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) || ls(p, x, g, u.x, u.y, u.angle);
+          u.type === "star" ? g = St(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);
             t.elements.forEach((P) => {
-              !P.isDeleted && P.groupIds && P.groupIds.some((S) => g.has(S)) && (ke.value[P.id] = !0);
+              !P.isDeleted && P.groupIds && P.groupIds.some((S) => g.has(S)) && (we.value[P.id] = !0);
             });
           } else
-            ke.value[u.id] = !0;
+            we.value[u.id] = !0;
           u.type === "frame" && t.elements.forEach((g) => {
-            !g.isDeleted && g.frameId === u.id && (ke.value[g.id] = !0);
-          }), Be();
+            !g.isDeleted && g.frameId === u.id && (we.value[g.id] = !0);
+          }), ze();
         }
       }
     }, z = (p) => {
       const x = Object.keys(e.appState.selectedElementIds);
       if (x.length !== 1) return;
-      const y = e.elements.find((Ie) => Ie.id === x[0]);
+      const y = e.elements.find((Me) => Me.id === x[0]);
       if (!y || y.isDeleted || y.type === "line" || y.type === "arrow" || y.type === "freedraw")
         return;
       const u = 150;
@@ -5137,7 +5147,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
       }
       const P = {
         ...y,
-        id: St(),
+        id: It(),
         x: C,
         y: g,
         seed: Math.floor(Math.random() * 2 ** 31),
@@ -5145,19 +5155,19 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
         updated: Date.now()
       };
       P.type === "text" && (P.text = ""), e.addElement(P);
-      const S = y.x + y.width / 2, _ = y.y + y.height / 2, E = P.x + P.width / 2, Y = P.y + P.height / 2, L = [S, _], A = [E, Y], w = Pt(y, A, L, 5), F = Pt(P, L, A, 5);
-      let Q = S, K = _, Z = E, pe = Y;
+      const S = y.x + y.width / 2, _ = y.y + y.height / 2, E = P.x + P.width / 2, V = P.y + P.height / 2, L = [S, _], A = [E, V], w = Pt(y, A, L, 5), F = Pt(P, L, A, 5);
+      let Q = S, K = _, Z = E, pe = V;
       w && (Q = w[0], K = w[1]), F && (Z = F[0], pe = F[1]);
-      const Se = Math.min(Q, Z), be = Math.min(K, pe), Ve = Math.max(Q, Z), je = Math.max(K, pe), He = tn("arrow", Se, be, {
+      const Ie = Math.min(Q, Z), be = Math.min(K, pe), Ve = Math.max(Q, Z), je = Math.max(K, pe), He = tn("arrow", Ie, be, {
         strokeColor: y.strokeColor || e.appState.currentItemStrokeColor,
         backgroundColor: y.backgroundColor || e.appState.currentItemBackgroundColor,
         strokeWidth: y.strokeWidth || e.appState.currentItemStrokeWidth,
         strokeStyle: y.strokeStyle || e.appState.currentItemStrokeStyle,
         roughness: y.roughness || e.appState.currentItemRoughness
       });
-      He.width = Ve - Se, He.height = je - be, He.points = [
-        [Q - Se, K - be],
-        [Z - Se, pe - be]
+      He.width = Ve - Ie, He.height = je - be, He.points = [
+        [Q - Ie, K - be],
+        [Z - Ie, pe - be]
       ], He.startBinding = {
         elementId: y.id,
         focus: 0,
@@ -5166,7 +5176,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
         elementId: P.id,
         focus: 0,
         gap: 5
-      }, He.endArrowhead = "arrow", e.addElement(He), e.appState.selectedElementIds = { [P.id]: !0 }, Be();
+      }, He.endArrowhead = "arrow", e.addElement(He), e.appState.selectedElementIds = { [P.id]: !0 }, ze();
     }, $ = (p) => {
       if (G.value) return;
       const x = p.target;
@@ -5178,7 +5188,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
       }
       if (p.key === "Escape") {
         if (!d.value && ee.value && e.appState.activeTool !== "selection") {
-          p.preventDefault(), e.deleteElement(ee.value), ee.value = null, d.value = !1, Be();
+          p.preventDefault(), e.deleteElement(ee.value), ee.value = null, d.value = !1, ze();
           return;
         }
         if (!d.value && e.appState.activeTool !== "selection") {
@@ -5189,7 +5199,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
       }
       if ((p.ctrlKey || p.metaKey) && (p.key === "d" || p.key === "D")) {
         p.preventDefault(), e.duplicateElements(Object.keys(e.appState.selectedElementIds), (g) => {
-          e.setSelectedElementIds(g), Be();
+          e.setSelectedElementIds(g), ze();
         });
         return;
       }
@@ -5202,11 +5212,11 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__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"), Is().then((P) => {
+        e.setTool("image"), Ms().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;
-            ae.value.x !== 0 && ae.value.y !== 0 && (E = ae.value.x - P.width / 2, Y = ae.value.y - P.height / 2), e.insertImage(P.dataURL, E, Y, P.width, P.height);
+            let E = S - P.width / 2, V = _ - P.height / 2;
+            oe.value.x !== 0 && oe.value.y !== 0 && (E = oe.value.x - P.width / 2, V = oe.value.y - P.height / 2), e.insertImage(P.dataURL, E, V, P.width, P.height);
           }
           e.setTool(g);
         });
@@ -5219,7 +5229,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
           p.preventDefault(), z(p.key);
           return;
         }
-        (p.key === "a" || p.key === "A") && (p.preventDefault(), e.selectAll(), Be()), (p.key === "c" || p.key === "C") && (p.preventDefault(), e.copyElements()), (p.key === "v" || p.key === "V") && e.pasteElements(ae.value), (p.key === "x" || p.key === "X") && (p.preventDefault(), e.cutElements()), (p.key === "z" || p.key === "Z") && (p.preventDefault(), u ? e.redo() : e.undo()), (p.key === "g" || p.key === "G") && (p.preventDefault(), u ? e.ungroupElements(Object.keys(e.appState.selectedElementIds)) : e.groupElements(Object.keys(e.appState.selectedElementIds)), Be()), p.key === "'" && (p.preventDefault(), e.toggleGrid()), (p.key === "=" || p.key === "+") && (p.preventDefault(), e.zoomIn()), p.key === "-" && (p.preventDefault(), e.zoomOut()), p.key === "0" && (p.preventDefault(), e.setZoom(1));
+        (p.key === "a" || p.key === "A") && (p.preventDefault(), e.selectAll(), ze()), (p.key === "c" || p.key === "C") && (p.preventDefault(), e.copyElements()), (p.key === "v" || p.key === "V") && e.pasteElements(oe.value), (p.key === "x" || p.key === "X") && (p.preventDefault(), e.cutElements()), (p.key === "z" || p.key === "Z") && (p.preventDefault(), u ? e.redo() : e.undo()), (p.key === "g" || p.key === "G") && (p.preventDefault(), u ? e.ungroupElements(Object.keys(e.appState.selectedElementIds)) : e.groupElements(Object.keys(e.appState.selectedElementIds)), ze()), p.key === "'" && (p.preventDefault(), e.toggleGrid()), (p.key === "=" || p.key === "+") && (p.preventDefault(), e.zoomIn()), p.key === "-" && (p.preventDefault(), e.zoomOut()), p.key === "0" && (p.preventDefault(), e.setZoom(1));
       } else {
         if (G.value) return;
         if (p.key === "[") {
@@ -5236,7 +5246,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
           p.key === "ArrowUp" && (S = -g), p.key === "ArrowDown" && (S = g), p.key === "ArrowLeft" && (P = -g), p.key === "ArrowRight" && (P = g);
           const _ = Object.keys(e.appState.selectedElementIds);
           if (_.length > 0) {
-            p.preventDefault(), p.repeat || e.recordHistory(), e.moveElements(_, P, S), Be();
+            p.preventDefault(), p.repeat || e.recordHistory(), e.moveElements(_, P, S), ze();
             return;
           }
         }
@@ -5264,7 +5274,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
         g = Math.round(g * 100) / 100, g = Math.min(Math.max(0.1, g), 5);
         const P = n.value?.getBoundingClientRect();
         if (P) {
-          const S = p.clientX - P.left, _ = p.clientY - P.top, E = S / t.zoom - t.scrollX, Y = _ / t.zoom - t.scrollY, L = S / g - t.scrollX, A = _ / g - t.scrollY, w = L - E, F = A - Y;
+          const S = p.clientX - P.left, _ = p.clientY - P.top, E = S / t.zoom - t.scrollX, V = _ / t.zoom - t.scrollY, L = S / g - t.scrollX, A = _ / g - t.scrollY, w = L - E, F = A - V;
           e.setZoom(g), e.setScroll && e.setScroll(
             t.scrollX + w,
             t.scrollY + F
@@ -5278,7 +5288,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
         e.appState.scrollX - x / t.zoom,
         e.appState.scrollY - y / t.zoom
       );
-    }, Ce = (p) => {
+    }, Te = (p) => {
       if (e.appState.viewLocked) return;
       const { x, y } = de(p), u = vt(x, y, null, !0);
       if (u && !u.locked && e.appState.selectedElementIds[u.id]) {
@@ -5337,7 +5347,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
         });
         p.width = 200, p.height = 100, p.fillStyle = "solid", p.strokeWidth = 2, p.roughness = 0, e.addElement(p);
       }
-      Be();
+      ze();
     });
     const un = async (p) => {
       await hn(p);
@@ -5377,8 +5387,8 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
               const A = S / _;
               S > _ ? (S = E, _ = E / A) : (_ = E, S = E * A);
             }
-            const Y = S, L = _;
-            e.insertImage && e.insertImage(g, ae.value.x - Y / 2, ae.value.y - L / 2, Y, L);
+            const V = S, L = _;
+            e.insertImage && e.insertImage(g, oe.value.x - V / 2, oe.value.y - L / 2, V, L);
           }, P.src = g;
         }
       }, u.onerror = () => {
@@ -5394,10 +5404,10 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
       p.code === "Space" && e.appState.activeTool === "hand" && e.appState.lastActiveTool && (e.setTool(e.appState.lastActiveTool), e.appState.lastActiveTool = null);
     };
     let lt = null, zt = 0;
-    const Be = () => {
+    const ze = () => {
       zt && cancelAnimationFrame(zt), zt = requestAnimationFrame(() => {
         if (n.value) {
-          if (la(
+          if (ca(
             n.value,
             t.elements,
             t.scrollX,
@@ -5405,13 +5415,13 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
             t.zoom,
             e.appState.selectedElementIds,
             G.value,
-            ke.value,
-            Ee.value,
+            we.value,
+            Ce.value,
             Fe.value,
             e.appState.showGrid ? e.appState.gridType : "none",
-            Pe.value,
+            Be.value,
             e.appState.viewBackgroundColor
-          ), tt.value.length > 0 && ca(
+          ), tt.value.length > 0 && ua(
             n.value,
             tt.value,
             e.appState.zoom,
@@ -5432,28 +5442,28 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
                   if (S.length < 3) return S;
                   let _ = [...S];
                   for (let E = 0; E < 2; E++) {
-                    const Y = [];
-                    Y.push(_[0]);
+                    const V = [];
+                    V.push(_[0]);
                     for (let L = 0; L < _.length - 1; L++) {
                       const A = _[L], w = _[L + 1];
-                      Y.push({
+                      V.push({
                         x: 0.75 * A.x + 0.25 * w.x,
                         y: 0.75 * A.y + 0.25 * w.y,
                         timestamp: 0.75 * A.timestamp + 0.25 * w.timestamp
-                      }), Y.push({
+                      }), V.push({
                         x: 0.25 * A.x + 0.75 * w.x,
                         y: 0.25 * A.y + 0.75 * w.y,
                         timestamp: 0.25 * A.timestamp + 0.75 * w.timestamp
                       });
                     }
-                    Y.push(_[_.length - 1]), _ = Y;
+                    V.push(_[_.length - 1]), _ = V;
                   }
                   return _;
                 })(h.value);
                 for (let S = 0; S < P.length - 1; S++) {
                   const _ = P[S], E = P[S + 1];
                   if (!_ || !E) continue;
-                  const Y = x - _.timestamp, L = Math.max(0, 1 - Y / 450);
+                  const V = x - _.timestamp, L = Math.max(0, 1 - V / 450);
                   if (L <= 0) continue;
                   u.beginPath();
                   const A = (_.x + t.scrollX) * t.zoom, w = (_.y + t.scrollY) * t.zoom, F = (E.x + t.scrollX) * t.zoom, Q = (E.y + t.scrollY) * t.zoom;
@@ -5464,7 +5474,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
                 u.restore(), y.save(), y.setTransform(1, 0, 0, 1, 0, 0), y.globalAlpha = 0.6, y.drawImage(lt, 0, 0), y.restore();
               }
             }
-            h.value.length > 0 && (cancelAnimationFrame(M), M = requestAnimationFrame(Be));
+            h.value.length > 0 && (cancelAnimationFrame(M), M = requestAnimationFrame(ze));
           }
           if (I.value) {
             const x = n.value.getContext("2d");
@@ -5472,7 +5482,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
               x.save();
               const y = window.devicePixelRatio || 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;
+              const u = Math.min(ne.value.x + t.scrollX, oe.value.x + t.scrollX) * t.zoom, C = Math.min(ne.value.y + t.scrollY, oe.value.y + t.scrollY) * t.zoom, g = Math.abs(ne.value.x - oe.value.x) * t.zoom, P = Math.abs(ne.value.y - oe.value.y) * t.zoom;
               x.strokeRect(u, C, g, P), x.fillRect(u, C, g, P), x.restore();
             }
           }
@@ -5503,13 +5513,13 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
                 const C = window.devicePixelRatio || 1;
                 u.setTransform(C, 0, 0, C, 0, 0), u.fillStyle = "#ffffff", u.strokeStyle = "#6965db", u.lineWidth = 1;
                 for (const [g, P] of Object.entries(y)) {
-                  const [S, _, E] = P, Y = E;
-                  u.beginPath(), g === "rotation" || g.startsWith("point-") ? u.arc(S, _, Y / 2, 0, Math.PI * 2) : u.roundRect ? u.roundRect(S - Y / 2, _ - Y / 2, Y, Y, 2) : u.rect(S - Y / 2, _ - Y / 2, Y, Y), u.fill(), u.stroke();
+                  const [S, _, E] = P, V = E;
+                  u.beginPath(), g === "rotation" || g.startsWith("point-") ? u.arc(S, _, V / 2, 0, Math.PI * 2) : u.roundRect ? u.roundRect(S - V / 2, _ - V / 2, V, V, 2) : u.rect(S - V / 2, _ - V / 2, V, V), u.fill(), u.stroke();
                 }
                 if (b.value === "rotation" && y.rotation) {
-                  const [g, P, S] = y.rotation, _ = Math.round(oe.value * 180 / Math.PI), E = `${_ > 0 ? "+" : ""}${_}°`, Y = 8, L = 22;
+                  const [g, P, S] = y.rotation, _ = Math.round(ie.value * 180 / Math.PI), E = `${_ > 0 ? "+" : ""}${_}°`, V = 8, L = 22;
                   u.font = "12px sans-serif";
-                  const w = u.measureText(E).width + Y * 2, F = g, K = P - S / 2 - 4 - L / 2;
+                  const w = u.measureText(E).width + V * 2, F = g, K = P - S / 2 - 4 - L / 2;
                   u.save(), u.fillStyle = "#363B4C";
                   const Z = F - w / 2, pe = K - L / 2;
                   u.roundRect ? (u.beginPath(), u.roundRect(Z, pe, w, L, 4), u.fill()) : u.fillRect(Z, pe, w, L), u.textAlign = "center", u.textBaseline = "middle", u.fillStyle = "#ffffff", u.fillText(E, F, K), u.restore();
@@ -5533,17 +5543,17 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
                 g.save();
                 const P = window.devicePixelRatio || 1;
                 if (g.setTransform(P, 0, 0, P, 0, 0), b.value === "rotation" && C.rotation) {
-                  const [A, w, F] = C.rotation, Q = Math.round(oe.value * 180 / Math.PI), K = `${Q > 0 ? "+" : ""}${Q}°`, Z = 8, pe = 22;
+                  const [A, w, F] = C.rotation, Q = Math.round(ie.value * 180 / Math.PI), K = `${Q > 0 ? "+" : ""}${Q}°`, Z = 8, pe = 22;
                   g.font = "12px sans-serif";
                   const be = g.measureText(K).width + Z * 2, Ve = A, He = w - F / 2 - 2 - pe / 2;
                   g.save(), g.fillStyle = "#363B4C";
-                  const Ie = Ve - be / 2, Le = He - pe / 2;
-                  g.roundRect ? (g.beginPath(), g.roundRect(Ie, Le, be, pe, 4), g.fill()) : g.fillRect(Ie, Le, be, pe), g.textAlign = "center", g.textBaseline = "middle", g.fillStyle = "#ffffff", g.fillText(K, Ve, He), g.restore();
+                  const Me = Ve - be / 2, Le = He - pe / 2;
+                  g.roundRect ? (g.beginPath(), g.roundRect(Me, Le, be, pe, 4), g.fill()) : g.fillRect(Me, Le, be, pe), g.textAlign = "center", g.textBaseline = "middle", g.fillStyle = "#ffffff", g.fillText(K, Ve, He), g.restore();
                 }
-                const S = (u.x + t.scrollX) * t.zoom, _ = (u.y + t.scrollY) * t.zoom, E = u.width * t.zoom, Y = u.height * t.zoom;
+                const S = (u.x + t.scrollX) * t.zoom, _ = (u.y + t.scrollY) * t.zoom, E = u.width * t.zoom, V = u.height * t.zoom;
                 g.strokeStyle = "#6965db", g.lineWidth = 1, g.setLineDash([5, 5]);
                 const L = 4;
-                if (g.strokeRect(S - L, _ - L, E + L * 2, Y + L * 2), g.setLineDash([]), C) {
+                if (g.strokeRect(S - L, _ - L, E + L * 2, V + L * 2), g.setLineDash([]), C) {
                   g.fillStyle = "#ffffff", g.strokeStyle = "#6965db", g.lineWidth = 1;
                   for (const [A, w] of Object.entries(C)) {
                     const [F, Q, K] = w, Z = K;
@@ -5557,14 +5567,14 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
           if (H.value) {
             const x = H.value, y = e.elements.find((C) => C.id === x);
             let u = !0;
-            if (y && y.type === "frame" && (ae.value.x, ae.value.x > y.x + 10 && ae.value.x < y.x + y.width - 10 && ae.value.y > y.y + 10 && ae.value.y < y.y + y.height - 10 && (u = !1)), y && u && y.type !== "arrow" && y.type !== "line" && !y.locked) {
+            if (y && y.type === "frame" && (oe.value.x, oe.value.x > y.x + 10 && oe.value.x < y.x + y.width - 10 && oe.value.y > y.y + 10 && oe.value.y < y.y + y.height - 10 && (u = !1)), y && u && y.type !== "arrow" && y.type !== "line" && !y.locked) {
               const C = n.value.getContext("2d");
               if (C) {
                 C.save();
                 const g = window.devicePixelRatio || 1;
                 C.setTransform(g, 0, 0, g, 0, 0);
-                const P = (y.x + t.scrollX) * t.zoom, S = (y.y + t.scrollY) * t.zoom, _ = y.width * t.zoom, E = y.height * t.zoom, Y = y.angle, L = P + _ / 2, A = S + E / 2;
-                C.translate(L, A), C.rotate(Y), C.translate(-L, -A), C.strokeStyle = "#1e6fff", C.lineWidth = 3;
+                const P = (y.x + t.scrollX) * t.zoom, S = (y.y + t.scrollY) * t.zoom, _ = y.width * t.zoom, E = y.height * t.zoom, V = y.angle, L = P + _ / 2, A = S + E / 2;
+                C.translate(L, A), C.rotate(V), C.translate(-L, -A), C.strokeStyle = "#1e6fff", C.lineWidth = 3;
                 const w = 0;
                 if (["ellipse", "circle"].includes(y.type))
                   C.beginPath(), C.ellipse(P + _ / 2, S + E / 2, _ / 2 + w, E / 2 + w, 0, 0, 2 * Math.PI), C.stroke();
@@ -5582,7 +5592,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
                   C.beginPath(), C.moveTo(P + _ * 0.25 - w, S - w), C.lineTo(P + _ + w, S - w), C.lineTo(P + _ * 0.75 + w, S + E + w), C.lineTo(P - w, S + E + w), C.closePath(), C.stroke();
                 else if (y.type === "star") {
                   C.beginPath();
-                  const F = bt(_, E);
+                  const F = St(_, E);
                   if (F && F.length > 0) {
                     const Q = F[0];
                     C.moveTo(P + Q[0], S + Q[1]);
@@ -5601,10 +5611,10 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
         }
       });
     };
-    function Os() {
+    function Ls() {
       s.value && s.value.focus();
     }
-    return It([
+    return Mt([
       () => t.elements,
       () => t.zoom,
       () => t.scrollX,
@@ -5615,12 +5625,12 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
       () => e.appState.viewBackgroundColor,
       () => e.appState.gridType,
       () => e.appState.showGrid
-    ], Be, { deep: !0 }), nn(() => {
+    ], ze, { deep: !0 }), nn(() => {
       e.loadFromLocalStorage(), e.$subscribe(() => {
         e.saveToLocalStorage();
       }, { detached: !0 });
-    }), It(() => e.elements, () => {
-    }), (p, x) => (V(), j("div", ya, [
+    }), Mt(() => e.elements, () => {
+    }), (p, x) => (X(), j("div", ka, [
       m("canvas", {
         id: "canvas-container",
         ref_key: "canvas",
@@ -5631,10 +5641,10 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
         onPointerdown: Mn,
         onPointermove: En,
         onPointerup: Cn,
-        onDblclick: Ce,
-        onContextmenu: Mt(f, ["prevent"])
-      }, null, 44, xa),
-      ie(ma, {
+        onDblclick: Te,
+        onContextmenu: Et(f, ["prevent"])
+      }, null, 44, wa),
+      ae(xa, {
         visible: Oe.value.visible,
         x: Oe.value.x,
         y: Oe.value.y,
@@ -5647,9 +5657,9 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
       m("div", {
         class: "excalidraw-textContainer",
         style: Ke({ ...De.value }),
-        onClick: Os
+        onClick: Ls
       }, [
-        G.value ? js((V(), j("textarea", {
+        G.value ? Hs((X(), j("textarea", {
           key: 0,
           ref_key: "textInput",
           ref: s,
@@ -5665,23 +5675,23 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
             ...Ye.value ? {} : { height: `${et.value}` }
           }),
           onBlur: zn,
-          onKeydown: x[2] || (x[2] = Mt(() => {
+          onKeydown: x[2] || (x[2] = Et(() => {
           }, ["stop"]))
         }, null, 36)), [
-          [Hs, te.value]
-        ]) : we("", !0)
+          [Ws, te.value]
+        ]) : ye("", !0)
       ], 4)
     ], 512));
   }
-}), ba = /* @__PURE__ */ st(wa, [["__scopeId", "data-v-5aa831b1"]]), Sa = { class: "color-box" }, Ia = ["onClick"], Ma = /* @__PURE__ */ Qe({
+}), Ia = /* @__PURE__ */ st(Sa, [["__scopeId", "data-v-5aa831b1"]]), Ma = { class: "color-box" }, Ea = ["onClick"], Ca = /* @__PURE__ */ Qe({
   __name: "colorStyle",
   props: {
     modelValue: {},
     modelModifiers: {}
   },
-  emits: /* @__PURE__ */ Ws(["colorChange"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ Us(["colorChange"], ["update:modelValue"]),
   setup(i, { emit: t }) {
-    const e = Us(i, "modelValue"), n = t, s = J([
+    const e = qs(i, "modelValue"), n = t, s = J([
       "#FFFFFF",
       "#1E6FFF",
       "#FF194C",
@@ -5707,7 +5717,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
     ]), a = function(o) {
       e.value = o, n("colorChange", o);
     };
-    return (o, l) => (V(), j("div", Sa, [
+    return (o, l) => (X(), j("div", Ma, [
       m("div", {
         class: Xe(["trans-icon", { active: e.value === "transparent" }]),
         onClick: l[0] || (l[0] = (r) => a("transparent"))
@@ -5716,12 +5726,12 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
           m("use", { "xlink:href": "#icon-wuyanse" })
         ], -1)
       ])], 2),
-      (V(!0), j(We, null, ut(s.value, (r, c) => (V(), j("div", {
+      (X(!0), j(We, null, ut(s.value, (r, c) => (X(), j("div", {
         key: c,
         class: Xe(["color-item", { active: e.value === r }]),
         style: Ke({ background: r }),
         onClick: (f) => a(r)
-      }, null, 14, Ia))), 128)),
+      }, null, 14, Ea))), 128)),
       l[2] || (l[2] = m("div", { class: "color-item-add" }, [
         m("svg", { class: "svg-icon" }, [
           m("use", { "xlink:href": "#icon-tianjiayanse" })
@@ -5729,14 +5739,14 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
       ], -1))
     ]));
   }
-}), 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 = {
+}), qt = /* @__PURE__ */ st(Ca, [["__scopeId", "data-v-9b04b94a"]]), Ta = { class: "menu-list" }, Pa = { class: "preferences-list" }, Ba = { class: "preferences-list grid-list" }, za = ["onClick"], $a = { class: "svg-icon" }, _a = ["xlink:href"], Aa = {
   class: "preferences-list",
   style: { padding: "12px", display: "flex", "justify-content": "center" }
-}, _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 = {
+}, Da = { class: "preference-item" }, Fa = { class: "preference-info" }, Oa = { class: "preference-title" }, La = { class: "preference-item" }, Ra = { class: "preference-info" }, Xa = { class: "preference-title" }, Ya = {
   key: 1,
   class: "board-name-input",
   style: { width: "195px", padding: "1px 23px 5px" }
-}, Xa = /* @__PURE__ */ Qe({
+}, Va = /* @__PURE__ */ Qe({
   __name: "BoardName",
   setup(i) {
     const t = ot(), e = J(!1), n = J(), s = J("");
@@ -5770,7 +5780,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
     });
     nn(() => {
       s.value = t.appState.name + "";
-    }), It(() => t.appState.name, (v) => {
+    }), Mt(() => t.appState.name, (v) => {
       s.value = v + "";
     });
     const c = () => {
@@ -5789,11 +5799,11 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
     }
     return (v, h) => {
       const M = it("el-popover"), I = it("el-switch"), T = it("el-input");
-      return V(), j("div", {
+      return X(), j("div", {
         class: "board-name-container",
         style: Ke({ pointerEvents: a.value ? "none" : "auto" })
       }, [
-        ie(M, {
+        ae(M, {
           placement: "bottom-start",
           ref_key: "firstPopoverRef",
           ref: o,
@@ -5811,8 +5821,8 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
             ], -1)
           ])]),
           default: Ae(() => [
-            m("div", Ea, [
-              ie(M, {
+            m("div", Ta, [
+              ae(M, {
                 placement: "right-start",
                 trigger: "click",
                 width: 320,
@@ -5843,8 +5853,8 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
                   ], -1)
                 ])]),
                 default: Ae(() => [
-                  m("div", Ca, [
-                    ie(M, {
+                  m("div", Pa, [
+                    ae(M, {
                       placement: "right-start",
                       trigger: "click",
                       width: 176,
@@ -5875,24 +5885,24 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
                         ], -1)
                       ])]),
                       default: Ae(() => [
-                        m("div", Ta, [
-                          (V(!0), j(We, null, ut(l.value, (b, B) => (V(), j("div", {
+                        m("div", Ba, [
+                          (X(!0), j(We, null, ut(l.value, (b, B) => (X(), j("div", {
                             key: B,
                             class: Xe(["grid-item", { active: b.value === r.value }]),
-                            onClick: (X) => d(b)
+                            onClick: (Y) => d(b)
                           }, [
-                            (V(), j("svg", Ba, [
+                            (X(), j("svg", $a, [
                               m("use", {
                                 "xlink:href": `#${b.value === r.value ? b.activeIcon : b.icon}`
-                              }, null, 8, za)
+                              }, null, 8, _a)
                             ])),
                             m("div", null, nt(b.label), 1)
-                          ], 10, Pa))), 128))
+                          ], 10, za))), 128))
                         ])
                       ]),
                       _: 1
                     }),
-                    ie(M, {
+                    ae(M, {
                       placement: "right-start",
                       trigger: "click",
                       width: 260,
@@ -5923,37 +5933,37 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
                         ], -1)
                       ])]),
                       default: Ae(() => [
-                        m("div", $a, [
+                        m("div", Aa, [
                           h[8] || (h[8] = m("div", { class: "title" }, "背景颜色", -1)),
-                          ie(qt, {
-                            modelValue: ze(t).appState.viewBackgroundColor,
-                            "onUpdate:modelValue": h[0] || (h[0] = (b) => ze(t).appState.viewBackgroundColor = b)
+                          ae(qt, {
+                            modelValue: Se(t).appState.viewBackgroundColor,
+                            "onUpdate:modelValue": h[0] || (h[0] = (b) => Se(t).appState.viewBackgroundColor = b)
                           }, null, 8, ["modelValue"])
                         ])
                       ]),
                       _: 1
                     }),
                     h[13] || (h[13] = m("div", { class: "line" }, null, -1)),
-                    m("div", _a, [
-                      m("div", Aa, [
-                        m("div", Da, [
+                    m("div", Da, [
+                      m("div", Fa, [
+                        m("div", Oa, [
                           h[9] || (h[9] = m("div", null, "使用滚轮缩放画布", -1)),
-                          ie(I, {
-                            modelValue: ze(t).appState.useWheelZoom,
-                            "onUpdate:modelValue": h[1] || (h[1] = (b) => ze(t).appState.useWheelZoom = b),
+                          ae(I, {
+                            modelValue: Se(t).appState.useWheelZoom,
+                            "onUpdate:modelValue": h[1] || (h[1] = (b) => Se(t).appState.useWheelZoom = b),
                             size: "small"
                           }, null, 8, ["modelValue"])
                         ]),
                         h[10] || (h[10] = m("div", { class: "preference-desc" }, "开启后，可通过鼠标滚轮进行缩放画布", -1))
                       ])
                     ]),
-                    m("div", Fa, [
-                      m("div", Oa, [
-                        m("div", La, [
+                    m("div", La, [
+                      m("div", Ra, [
+                        m("div", Xa, [
                           h[11] || (h[11] = m("div", null, " 右键拖拽平移画布 ", -1)),
-                          ie(I, {
-                            modelValue: ze(t).appState.rightClickPan,
-                            "onUpdate:modelValue": h[2] || (h[2] = (b) => ze(t).appState.rightClickPan = b),
+                          ae(I, {
+                            modelValue: Se(t).appState.rightClickPan,
+                            "onUpdate:modelValue": h[2] || (h[2] = (b) => Se(t).appState.rightClickPan = b),
                             size: "small"
                           }, null, 8, ["modelValue"])
                         ]),
@@ -5982,7 +5992,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
           ]),
           _: 1
         }, 512),
-        e.value ? (V(), Tt(T, {
+        e.value ? (X(), wt(T, {
           key: 0,
           ref_key: "inputRef",
           ref: n,
@@ -5991,8 +6001,8 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
           class: "board-name-input",
           placeholder: "Untitled Document",
           onBlur: f
-        }, null, 8, ["modelValue"])) : (V(), j("div", Ra, nt(s.value), 1)),
-        e.value ? we("", !0) : (V(), j("div", {
+        }, null, 8, ["modelValue"])) : (X(), j("div", Ya, nt(s.value), 1)),
+        e.value ? ye("", !0) : (X(), j("div", {
           key: 2,
           class: "action-item",
           onClick: c
@@ -6004,11 +6014,11 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
       ], 4);
     };
   }
-}), 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({
+}), ja = /* @__PURE__ */ st(Va, [["__scopeId", "data-v-59262e76"]]), Ha = { class: "history-controls glass" }, Wa = { class: "svg-icon" }, Ua = ["xlink:href"], qa = { class: "svg-icon" }, Ga = ["xlink:href"], Na = { class: "zoom-controls glass" }, Ka = /* @__PURE__ */ Qe({
   __name: "Footer",
   setup(i) {
     const t = ot(), e = () => {
-      Ns.confirm(
+      Ks.confirm(
         "确定要清空画布吗?",
         "提示",
         {
@@ -6028,38 +6038,38 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
     function o() {
       t.appState.activeTool === "hand" ? t.setTool("selection") : t.setTool("hand");
     }
-    return (l, r) => (V(), j("div", {
+    return (l, r) => (X(), j("div", {
       class: "footer-controls footer",
       style: Ke({
-        right: ze(t).appState.isPropertiesPanelOpen ? "345px" : "24px",
+        right: Se(t).appState.isPropertiesPanelOpen ? "345px" : "24px",
         pointerEvents: n.value ? "none" : "auto"
       })
     }, [
-      m("div", Va, [
+      m("div", Ha, [
         m("div", {
           onClick: s,
-          class: Xe(["tool-item", { disabled: ze(t).historyStep <= 0 }])
+          class: Xe(["tool-item", { disabled: Se(t).historyStep <= 0 }])
         }, [
-          (V(), j("svg", ja, [
+          (X(), j("svg", Wa, [
             m("use", {
-              "xlink:href": `${ze(t).historyStep <= 0 ? "#icon-chexiao-copy" : "#icon-chexiao"}`
-            }, null, 8, Ha)
+              "xlink:href": `${Se(t).historyStep <= 0 ? "#icon-chexiao-copy" : "#icon-chexiao"}`
+            }, null, 8, Ua)
           ]))
         ], 2),
         m("div", {
           onClick: a,
-          class: Xe(["tool-item", { disabled: ze(t).historyStep >= ze(t).history.length - 1 }])
+          class: Xe(["tool-item", { disabled: Se(t).historyStep >= Se(t).history.length - 1 }])
         }, [
-          (V(), j("svg", Wa, [
+          (X(), j("svg", qa, [
             m("use", {
-              "xlink:href": `${ze(t).historyStep >= ze(t).history.length - 1 ? "#icon-huifu-copy" : "#icon-huifu"}`
-            }, null, 8, Ua)
+              "xlink:href": `${Se(t).historyStep >= Se(t).history.length - 1 ? "#icon-huifu-copy" : "#icon-huifu"}`
+            }, null, 8, Ga)
           ]))
         ], 2)
       ]),
-      m("div", qa, [
+      m("div", Na, [
         m("div", {
-          class: Xe(["tool-item", { active: ze(t).appState.activeTool === "hand" }]),
+          class: Xe(["tool-item", { active: Se(t).appState.activeTool === "hand" }]),
           onClick: r[0] || (r[0] = (c) => o())
         }, [...r[5] || (r[5] = [
           m("svg", { class: "svg-icon" }, [
@@ -6068,7 +6078,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
         ])], 2),
         r[10] || (r[10] = m("div", { class: "separator" }, null, -1)),
         m("div", {
-          onClick: r[1] || (r[1] = (c) => ze(t).zoomOut()),
+          onClick: r[1] || (r[1] = (c) => Se(t).zoomOut()),
           class: "tool-item"
         }, [...r[6] || (r[6] = [
           m("svg", { class: "svg-icon" }, [
@@ -6076,12 +6086,12 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
           ], -1)
         ])]),
         m("span", {
-          onClick: r[2] || (r[2] = (c) => ze(t).setZoom(1)),
+          onClick: r[2] || (r[2] = (c) => Se(t).setZoom(1)),
           title: "Reset Zoom",
           style: { cursor: "pointer" }
-        }, nt(Math.round(ze(t).appState.zoom * 100)) + "%", 1),
+        }, nt(Math.round(Se(t).appState.zoom * 100)) + "%", 1),
         m("div", {
-          onClick: r[3] || (r[3] = (c) => ze(t).zoomIn()),
+          onClick: r[3] || (r[3] = (c) => Se(t).zoomIn()),
           class: "tool-item"
         }, [...r[7] || (r[7] = [
           m("svg", { class: "svg-icon" }, [
@@ -6090,8 +6100,8 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
         ])]),
         r[11] || (r[11] = m("div", { class: "separator" }, null, -1)),
         m("div", {
-          class: Xe(["tool-item", { active: ze(t).appState.viewLocked }]),
-          onClick: r[4] || (r[4] = (c) => ze(t).toggleViewLock())
+          class: Xe(["tool-item", { active: Se(t).appState.viewLocked }]),
+          onClick: r[4] || (r[4] = (c) => Se(t).toggleViewLock())
         }, [...r[8] || (r[8] = [
           m("svg", { class: "svg-icon" }, [
             m("use", { "xlink:href": "#icon-suoding" })
@@ -6108,17 +6118,17 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
       ])
     ], 4));
   }
-}), Na = /* @__PURE__ */ st(Ga, [["__scopeId", "data-v-06dd6954"]]), Ka = /* @__PURE__ */ Qe({
+}), Ja = /* @__PURE__ */ st(Ka, [["__scopeId", "data-v-06dd6954"]]), Za = /* @__PURE__ */ Qe({
   __name: "HelpDialog",
   setup(i) {
     const t = ot(), e = () => {
       t.appState.showHelp = !1;
     };
-    return (n, s) => ze(t).appState.showHelp ? (V(), j("div", {
+    return (n, s) => Se(t).appState.showHelp ? (X(), j("div", {
       key: 0,
       class: "modal-overlay",
-      onClick: Mt(e, ["self"]),
-      style: Ke({ pointerEvents: ze(t).appState.isDraggingElement ? "none" : "auto" })
+      onClick: Et(e, ["self"]),
+      style: Ke({ pointerEvents: Se(t).appState.isDraggingElement ? "none" : "auto" })
     }, [
       m("div", { class: "help-dialog glass" }, [
         m("div", { class: "header" }, [
@@ -6130,44 +6140,44 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
             m("i", { class: "ri-close-line" }, null, -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))
+        s[2] || (s[2] = Gs('<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);
+    ], 4)) : ye("", !0);
   }
-}), 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 = {
+}), Qa = /* @__PURE__ */ st(Za, [["__scopeId", "data-v-0caac542"]]), el = { class: "popovers-container" }, tl = { class: "popover-content" }, nl = { class: "sub-tools-container" }, sl = ["onClick"], il = { class: "svg-icon" }, ol = ["xlink:href"], al = {
   key: 1,
   class: "divider"
-}, ol = {
+}, ll = {
   class: "settings-btn",
   title: "背景颜色"
-}, al = {
+}, rl = {
   key: 0,
   class: "svg-icon"
-}, ll = { class: "popover-content" }, rl = ["title"], cl = {
+}, cl = { class: "popover-content" }, dl = ["title"], ul = {
   key: 0,
   class: "svg-icon"
-}, dl = {
+}, hl = {
   key: 1,
   class: "svg-icon"
-}, ul = ["xlink:href"], hl = { class: "popover-content" }, pl = { class: "title" }, fl = { class: "title" }, gl = { class: "title" }, vl = { class: "title" }, ml = {
+}, pl = ["xlink:href"], fl = { class: "popover-content" }, gl = { class: "title" }, vl = { class: "title" }, ml = { class: "title" }, yl = { class: "title" }, xl = {
   key: 4,
   class: "divider"
-}, yl = {
+}, kl = {
   class: "settings-btn",
   title: "箭头颜色"
-}, xl = {
+}, wl = {
   key: 0,
   class: "svg-icon"
-}, kl = { class: "popover-content" }, wl = { class: "popover-content" }, bl = {
+}, bl = { class: "popover-content" }, Sl = { class: "popover-content" }, Il = {
   key: 7,
   class: "divider"
-}, Sl = {
+}, Ml = {
   class: "settings-btn",
   title: "文本颜色"
-}, Il = ["fill"], Ml = ["fill"], El = ["fill"], Cl = { class: "popover-content" }, Tl = {
+}, El = ["fill"], Cl = ["fill"], Tl = ["fill"], Pl = { class: "popover-content" }, Bl = {
   key: 9,
   class: "font-size-select"
-}, Pl = /* @__PURE__ */ Qe({
+}, zl = /* @__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([
@@ -6214,7 +6224,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
     }), B = U(() => {
       const O = I();
       return ["rectangle", "ellipse", "diamond", "square", "star", "circle", "cylinder", "process", "decision", "trapezoid", "parallelogram", "arrow", "line", "freedraw", "frame"].includes(O);
-    }), X = U(() => {
+    }), Y = U(() => {
       const O = I();
       return ["rectangle", "ellipse", "diamond", "square", "star", "circle", "cylinder", "process", "decision", "trapezoid", "parallelogram", "arrow", "line"].includes(O);
     }), q = U(() => {
@@ -6226,7 +6236,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
     }), le = U(() => {
       const O = I();
       return ["arrow", "line"].includes(O);
-    }), oe = U(() => {
+    }), ie = U(() => {
       const O = d();
       return O ? O.arrowType : t.appState.currentItemArrowType;
     }), ee = U(
@@ -6236,7 +6246,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
           return O ? O.strokeColor : t.appState.currentItemStrokeColor;
         },
         set(O) {
-          Pe(O);
+          Be(O);
         }
       }
     ), G = U({
@@ -6277,7 +6287,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
         return O ? O.strokeOpacity ?? 100 : t.appState.currentItemStrokeOpacity ?? 100;
       },
       set(O) {
-        ae(O);
+        oe(O);
       }
     }), te = U({
       get() {
@@ -6295,7 +6305,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
       const O = d();
       return O ? O.roughness : t.appState.currentItemRoughness ?? 0;
     });
-    const ye = U({
+    const xe = U({
       get() {
         const O = d();
         return O ? O.roundness ?? 0 : t.appState.currentItemRoundness;
@@ -6303,7 +6313,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
       set(O) {
         et(O);
       }
-    }), ke = U({
+    }), we = U({
       get: () => {
         const O = d();
         return O && "fontSize" in O ? O.fontSize : t.appState.currentItemFontSize;
@@ -6322,7 +6332,7 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
       const O = d();
       return O && "verticalAlign" in O ? O.verticalAlign : t.appState.currentItemVerticalAlign;
     });
-    const Ee = [12, 14, 16, 18, 20, 24, 28, 32, 36], Pe = (O) => {
+    const Ce = [12, 14, 16, 18, 20, 24, 28, 32, 36], Be = (O) => {
       t.updateSelectedElements({ strokeColor: O });
     }, Fe = (O) => {
       const W = O;
@@ -6332,48 +6342,48 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
       t.updateSelectedElements({ backgroundColor: W });
     }, Ue = (O) => {
       t.updateSelectedElements({ strokeWidth: O });
-    }, ae = (O) => {
+    }, oe = (O) => {
       t.updateSelectedElements({ strokeOpacity: O });
     }, et = (O) => {
       t.updateSelectedElements({ roundness: O });
     }, ht = (O) => {
       Object.keys(t.appState.selectedElementIds).forEach(($e) => {
-        const De = t.elements.find((xe) => xe.id === $e);
+        const De = t.elements.find((ke) => ke.id === $e);
         if (De && De.type === "text") {
-          const xe = De;
-          if (xe.autoResize) {
-            const Ye = Ne(xe.text || "", O, xe.fontFamily || "sans-serif", void 0, { isBold: xe.isBold, isItalic: xe.isItalic });
+          const ke = De;
+          if (ke.autoResize) {
+            const Ye = Ne(ke.text || "", O, ke.fontFamily || "sans-serif", void 0, { isBold: ke.isBold, isItalic: ke.isItalic });
             t.updateElement($e, { fontSize: O, width: Ye.width, height: Ye.height });
           } else {
-            const Ye = Ne(xe.text || "", O, xe.fontFamily || "sans-serif", De.width, { isBold: xe.isBold, isItalic: xe.isItalic });
+            const Ye = Ne(ke.text || "", O, ke.fontFamily || "sans-serif", De.width, { isBold: ke.isBold, isItalic: ke.isItalic });
             t.updateElement($e, { fontSize: O, height: Ye.height });
           }
         } else {
           t.updateElement($e, { fontSize: O });
-          const xe = t.elements.find((Ye) => Ye.type === "text" && Ye.containerId === $e && !Ye.isDeleted);
-          if (xe) {
-            const Ye = Ne(xe.text || "", O, xe.fontFamily || "sans-serif", xe.width);
-            t.updateElement(xe.id, { fontSize: O, height: Math.max(Ye.height, De?.height) });
+          const ke = t.elements.find((Ye) => Ye.type === "text" && Ye.containerId === $e && !Ye.isDeleted);
+          if (ke) {
+            const Ye = Ne(ke.text || "", O, ke.fontFamily || "sans-serif", ke.width);
+            t.updateElement(ke.id, { fontSize: O, height: Math.max(Ye.height, De?.height) });
           }
         }
       });
     }, at = (O) => {
       t.updateSelectedElements({ fontColor: O }), Object.keys(t.appState.selectedElementIds).forEach(($e) => {
-        const De = t.elements.find((xe) => xe.type === "text" && xe.containerId === $e && !xe.isDeleted);
+        const De = t.elements.find((ke) => ke.type === "text" && ke.containerId === $e && !ke.isDeleted);
         De && t.updateElement(De.id, { fontColor: O });
       });
     }, Oe = (O) => {
       t.updateSelectedElements({ fontBgColor: O }), Object.keys(t.appState.selectedElementIds).forEach(($e) => {
-        const De = t.elements.find((xe) => xe.type === "text" && xe.containerId === $e && !xe.isDeleted);
+        const De = t.elements.find((ke) => ke.type === "text" && ke.containerId === $e && !ke.isDeleted);
         De && t.updateElement(De.id, { fontBgColor: O });
       });
     }, tt = (O) => {
       t.updateSelectedElements({ type: O });
     };
     return (O, W) => {
-      const $e = it("el-popover"), De = it("el-slider"), xe = it("el-option"), Ye = it("el-select");
-      return V(), j("div", Za, [
-        T.value ? (V(), Tt($e, {
+      const $e = it("el-popover"), De = it("el-slider"), ke = it("el-option"), Ye = it("el-select");
+      return X(), j("div", el, [
+        T.value ? (X(), wt($e, {
           key: 0,
           placement: "top",
           width: 224,
@@ -6394,26 +6404,26 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
             ], -1)
           ])]),
           default: Ae(() => [
-            m("div", Qa, [
-              m("div", el, [
-                (V(!0), j(We, null, ut(f.value, (de) => (V(), j("div", {
+            m("div", tl, [
+              m("div", nl, [
+                (X(!0), j(We, null, ut(f.value, (de) => (X(), j("div", {
                   key: de.name,
                   class: Xe(["sub-tool-item", { active: I() === de.name }]),
                   onClick: (on) => tt(de.name)
                 }, [
-                  (V(), j("svg", nl, [
+                  (X(), j("svg", il, [
                     m("use", {
                       "xlink:href": `${de.icon}`
-                    }, null, 8, sl)
+                    }, null, 8, ol)
                   ]))
-                ], 10, tl))), 128))
+                ], 10, sl))), 128))
               ])
             ])
           ]),
           _: 1
-        }, 8, ["visible"])) : we("", !0),
-        T.value ? (V(), j("div", il)) : we("", !0),
-        b.value ? (V(), Tt($e, {
+        }, 8, ["visible"])) : ye("", !0),
+        T.value ? (X(), j("div", al)) : ye("", !0),
+        b.value ? (X(), wt($e, {
           key: 2,
           placement: "top",
           width: 248,
@@ -6424,10 +6434,10 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
           "onUpdate:visible": W[3] || (W[3] = (de) => e.value = de)
         }, {
           reference: Ae(() => [
-            m("div", ol, [
-              G.value == "transparent" || !G.value ? (V(), j("svg", al, [...W[16] || (W[16] = [
+            m("div", ll, [
+              G.value == "transparent" || !G.value ? (X(), j("svg", rl, [...W[16] || (W[16] = [
                 m("use", { "xlink:href": "#icon-wuyanse" }, null, -1)
-              ])])) : (V(), j("div", {
+              ])])) : (X(), j("div", {
                 key: 1,
                 class: "color-box",
                 style: Ke({ background: G.value })
@@ -6435,11 +6445,11 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
             ])
           ]),
           default: Ae(() => [
-            m("div", ll, [
+            m("div", cl, [
               W[17] || (W[17] = m("div", { class: "title" }, "填充样式", -1)),
-              ie(Ms),
+              ae(Es),
               W[18] || (W[18] = m("div", { class: "title" }, "透明度", -1)),
-              ie(De, {
+              ae(De, {
                 modelValue: D.value,
                 "onUpdate:modelValue": W[1] || (W[1] = (de) => D.value = de),
                 "show-input": "",
@@ -6448,15 +6458,15 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
               W[19] || (W[19] = m("div", { class: "title" }, [
                 m("span", null, "默认颜色")
               ], -1)),
-              ie(qt, {
+              ae(qt, {
                 modelValue: G.value,
                 "onUpdate:modelValue": W[2] || (W[2] = (de) => G.value = de)
               }, null, 8, ["modelValue"])
             ])
           ]),
           _: 1
-        }, 8, ["visible"])) : we("", !0),
-        B.value ? (V(), Tt($e, {
+        }, 8, ["visible"])) : ye("", !0),
+        B.value ? (X(), wt($e, {
           key: 3,
           placement: "top",
           width: 248,
@@ -6471,31 +6481,31 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
               class: "settings-btn",
               title: I() == "arrow" ? "箭头" : "边框"
             }, [
-              I() !== "arrow" && I() !== "line" ? (V(), j(We, { key: 0 }, [
-                ee.value == "transparent" || !ee.value ? (V(), j("svg", cl, [...W[20] || (W[20] = [
+              I() !== "arrow" && I() !== "line" ? (X(), j(We, { key: 0 }, [
+                ee.value == "transparent" || !ee.value ? (X(), j("svg", ul, [...W[20] || (W[20] = [
                   m("use", { "xlink:href": "#icon-wubiankuang" }, null, -1)
-                ])])) : (V(), j("div", {
+                ])])) : (X(), j("div", {
                   key: 1,
                   class: "border-box",
                   style: Ke({ borderColor: ee.value })
                 }, null, 4))
-              ], 64)) : (V(), j("svg", dl, [
+              ], 64)) : (X(), j("svg", hl, [
                 m("use", {
-                  "xlink:href": `#${I() == "line" ? "icon-zhixian" : oe.value == "sharp" ? "icon-zhixianlianjiexian" : "icon-quxian"}`
-                }, null, 8, ul)
+                  "xlink:href": `#${I() == "line" ? "icon-zhixian" : ie.value == "sharp" ? "icon-zhixianlianjiexian" : "icon-quxian"}`
+                }, null, 8, pl)
               ]))
-            ], 8, rl)
+            ], 8, dl)
           ]),
           default: Ae(() => [
-            m("div", hl, [
-              X.value ? (V(), j(We, { key: 0 }, [
-                m("div", pl, nt(["arrow", "line"].includes(I()) ? "线条" : "描边") + "样式", 1),
-                ie(Es)
-              ], 64)) : we("", !0),
+            m("div", fl, [
+              Y.value ? (X(), j(We, { key: 0 }, [
+                m("div", gl, nt(["arrow", "line"].includes(I()) ? "线条" : "描边") + "样式", 1),
+                ae(Cs)
+              ], 64)) : ye("", !0),
               W[22] || (W[22] = m("div", { class: "title" }, "线条风格", -1)),
-              ie(Cs),
-              m("div", fl, nt(["arrow", "line"].includes(I()) ? "线条" : "描边") + "粗细", 1),
-              ie(De, {
+              ae(Ts),
+              m("div", vl, nt(["arrow", "line"].includes(I()) ? "线条" : "描边") + "粗细", 1),
+              ae(De, {
                 modelValue: te.value,
                 "onUpdate:modelValue": W[4] || (W[4] = (de) => te.value = de),
                 "show-input": "",
@@ -6503,32 +6513,32 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
                 min: 1,
                 max: 10
               }, null, 8, ["modelValue"]),
-              m("div", gl, nt(["arrow", "line"].includes(I()) ? "" : "描边") + "透明度", 1),
-              ie(De, {
+              m("div", ml, nt(["arrow", "line"].includes(I()) ? "" : "描边") + "透明度", 1),
+              ae(De, {
                 modelValue: N.value,
                 "onUpdate:modelValue": W[5] || (W[5] = (de) => N.value = de),
                 "show-input": "",
                 "show-input-controls": !1
               }, null, 8, ["modelValue"]),
-              le.value ? we("", !0) : (V(), j(We, { key: 1 }, [
+              le.value ? ye("", !0) : (X(), j(We, { key: 1 }, [
                 W[21] || (W[21] = m("div", { class: "title" }, [
                   m("span", null, "默认颜色")
                 ], -1)),
-                ie(qt, {
+                ae(qt, {
                   modelValue: ee.value,
                   "onUpdate:modelValue": W[6] || (W[6] = (de) => ee.value = de)
                 }, null, 8, ["modelValue"])
               ], 64)),
-              le.value ? (V(), j(We, { key: 2 }, [
-                m("div", vl, nt(I() == "arrow" ? "箭头" : "线条") + "类型", 1),
-                ie(Bs)
-              ], 64)) : we("", !0)
+              le.value ? (X(), j(We, { key: 2 }, [
+                m("div", yl, nt(I() == "arrow" ? "箭头" : "线条") + "类型", 1),
+                ae(zs)
+              ], 64)) : ye("", !0)
             ])
           ]),
           _: 1
-        }, 8, ["visible"])) : we("", !0),
-        le.value ? (V(), j("div", ml)) : we("", !0),
-        le.value ? (V(), Tt($e, {
+        }, 8, ["visible"])) : ye("", !0),
+        le.value ? (X(), j("div", xl)) : ye("", !0),
+        le.value ? (X(), wt($e, {
           key: 5,
           placement: "top",
           width: 248,
@@ -6539,10 +6549,10 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
           "onUpdate:visible": W[9] || (W[9] = (de) => s.value = de)
         }, {
           reference: Ae(() => [
-            m("div", yl, [
-              ee.value == "transparent" || !ee.value ? (V(), j("svg", xl, [...W[23] || (W[23] = [
+            m("div", kl, [
+              ee.value == "transparent" || !ee.value ? (X(), j("svg", wl, [...W[23] || (W[23] = [
                 m("use", { "xlink:href": "#icon-wuyanse" }, null, -1)
-              ])])) : (V(), j("div", {
+              ])])) : (X(), j("div", {
                 key: 1,
                 class: "color-box",
                 style: Ke({ background: ee.value })
@@ -6550,19 +6560,19 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
             ])
           ]),
           default: Ae(() => [
-            m("div", kl, [
+            m("div", bl, [
               W[24] || (W[24] = m("div", { class: "title" }, [
                 m("span", null, "默认颜色")
               ], -1)),
-              ie(qt, {
+              ae(qt, {
                 modelValue: ee.value,
                 "onUpdate:modelValue": W[8] || (W[8] = (de) => ee.value = de)
               }, null, 8, ["modelValue"])
             ])
           ]),
           _: 1
-        }, 8, ["visible"])) : we("", !0),
-        q.value ? (V(), Tt($e, {
+        }, 8, ["visible"])) : ye("", !0),
+        q.value ? (X(), wt($e, {
           key: 6,
           placement: "top",
           width: 248,
@@ -6581,11 +6591,11 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
             ], -1)
           ])]),
           default: Ae(() => [
-            m("div", wl, [
+            m("div", Sl, [
               W[26] || (W[26] = m("div", { class: "title" }, "圆角", -1)),
-              ie(De, {
-                modelValue: ye.value,
-                "onUpdate:modelValue": W[10] || (W[10] = (de) => ye.value = de),
+              ae(De, {
+                modelValue: xe.value,
+                "onUpdate:modelValue": W[10] || (W[10] = (de) => xe.value = de),
                 "show-input": "",
                 "show-input-controls": !1,
                 min: 0,
@@ -6594,9 +6604,9 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
             ])
           ]),
           _: 1
-        })) : we("", !0),
-        se.value && b.value ? (V(), j("div", bl)) : we("", !0),
-        se.value ? (V(), Tt($e, {
+        })) : ye("", !0),
+        se.value && b.value ? (X(), j("div", Il)) : ye("", !0),
+        se.value ? (X(), wt($e, {
           key: 8,
           placement: "top",
           width: 248,
@@ -6607,8 +6617,8 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
           "onUpdate:visible": W[13] || (W[13] = (de) => o.value = de)
         }, {
           reference: Ae(() => [
-            m("div", Sl, [
-              (V(), j("svg", {
+            m("div", Ml, [
+              (X(), j("svg", {
                 class: "svg-icon",
                 viewBox: "0 0 1024 1024",
                 style: Ke({ backgroundColor: H.value })
@@ -6617,57 +6627,57 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__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, Il),
+                }, null, 8, El),
                 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, Ml),
+                }, null, 8, Cl),
                 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, El)
+                }, null, 8, Tl)
               ], 4))
             ])
           ]),
           default: Ae(() => [
-            m("div", Cl, [
+            m("div", Pl, [
               W[27] || (W[27] = m("div", { class: "title" }, [
                 m("span", null, "文本样式")
               ], -1)),
-              ie(Ts),
+              ae(Ps),
               W[28] || (W[28] = m("div", { class: "title" }, [
                 m("span", null, "对齐方式")
               ], -1)),
-              ie(Ps),
+              ae(Bs),
               W[29] || (W[29] = m("div", { class: "title" }, [
                 m("span", null, "字体颜色")
               ], -1)),
-              ie(qt, {
+              ae(qt, {
                 modelValue: he.value,
                 "onUpdate:modelValue": W[11] || (W[11] = (de) => he.value = de)
               }, null, 8, ["modelValue"]),
               W[30] || (W[30] = m("div", { class: "title" }, [
                 m("span", null, "背景颜色")
               ], -1)),
-              ie(qt, {
+              ae(qt, {
                 modelValue: H.value,
                 "onUpdate:modelValue": W[12] || (W[12] = (de) => H.value = de)
               }, null, 8, ["modelValue"])
             ])
           ]),
           _: 1
-        }, 8, ["visible"])) : we("", !0),
-        se.value ? (V(), j("div", Tl, [
-          ie(Ye, {
-            modelValue: ke.value,
-            "onUpdate:modelValue": W[14] || (W[14] = (de) => ke.value = de),
+        }, 8, ["visible"])) : ye("", !0),
+        se.value ? (X(), j("div", Bl, [
+          ae(Ye, {
+            modelValue: we.value,
+            "onUpdate:modelValue": W[14] || (W[14] = (de) => we.value = de),
             style: { width: "68px" },
             onChange: ht
           }, {
             default: Ae(() => [
-              (V(), j(We, null, ut(Ee, (de) => ie(xe, {
+              (X(), j(We, null, ut(Ce, (de) => ae(ke, {
                 key: de,
                 label: `${de}`,
                 value: de
@@ -6675,14 +6685,14 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
             ]),
             _: 1
           }, 8, ["modelValue"])
-        ])) : we("", !0)
+        ])) : ye("", !0)
       ]);
     };
   }
-}), Bl = /* @__PURE__ */ st(Pl, [["__scopeId", "data-v-1fe4c384"]]), zl = {
+}), $l = /* @__PURE__ */ st(zl, [["__scopeId", "data-v-1fe4c384"]]), _l = {
   key: 0,
   class: "divider"
-}, $l = ["title"], _l = { class: "svg-icon" }, Al = ["xlink:href"], Dl = /* @__PURE__ */ Qe({
+}, Al = ["title"], Dl = { class: "svg-icon" }, Fl = ["xlink:href"], Ol = /* @__PURE__ */ Qe({
   __name: "FloatingPropertiesBar",
   props: {
     zoom: {},
@@ -6691,28 +6701,28 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
   },
   setup(i) {
     const t = i, e = ot(), n = J(!1), s = J({ x: 0, y: 0 });
-    It(() => e.appState.selectedElementIds, () => {
+    Mt(() => e.appState.selectedElementIds, () => {
       e.appState.floatingToolbarOffset = { x: 0, y: 0 };
     }, { deep: !0 });
     const a = U(() => e.appState.activeTool), o = U(() => Object.keys(e.appState.selectedElementIds)), l = U(() => o.value.length > 0), r = () => {
       if (a.value === "selection") {
         if (!l.value) return "none";
-        const X = o.value[0], q = e.elements.find((se) => se.id === X);
+        const Y = o.value[0], q = e.elements.find((se) => se.id === Y);
         return q ? q.type : "none";
       }
       return a.value === "shapes" ? e.appState.activeToolType : a.value;
     }, c = U(() => {
-      const X = r();
-      return ["arrow", "line"].includes(X);
+      const Y = r();
+      return ["arrow", "line"].includes(Y);
     }), f = U(() => {
-      const X = r();
-      return ["rectangle", "ellipse", "diamond", "square", "star", "circle", "cylinder", "process", "decision", "trapezoid", "parallelogram"].includes(X);
+      const Y = r();
+      return ["rectangle", "ellipse", "diamond", "square", "star", "circle", "cylinder", "process", "decision", "trapezoid", "parallelogram"].includes(Y);
     }), k = U(() => o.value.length > 1), d = U(() => e.appState.isDraggingElement || e.appState.isBoxSelecting), v = U(() => {
-      const X = e.elements.filter((he) => e.appState.selectedElementIds[he.id]);
-      if (X.length === 0) return { display: "none" };
-      const q = Gt(X);
+      const Y = e.elements.filter((he) => e.appState.selectedElementIds[he.id]);
+      if (Y.length === 0) return { display: "none" };
+      const q = Gt(Y);
       if (!q) return { display: "none" };
-      const se = (q.x + t.scrollX) * t.zoom, le = (q.y + t.scrollY) * t.zoom, oe = q.width * t.zoom, ee = se + oe / 2 + e.appState.floatingToolbarOffset.x, G = le - 32 - 40 + e.appState.floatingToolbarOffset.y;
+      const se = (q.x + t.scrollX) * t.zoom, le = (q.y + t.scrollY) * t.zoom, ie = q.width * t.zoom, ee = se + ie / 2 + e.appState.floatingToolbarOffset.x, G = le - 32 - 40 + e.appState.floatingToolbarOffset.y;
       return {
         left: `${ee}px`,
         top: `${Math.max(10, G)}px`,
@@ -6720,15 +6730,15 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
         transform: "translateX(-50%)",
         pointerEvents: d.value ? "none" : "auto"
       };
-    }), h = (X) => {
+    }), h = (Y) => {
       n.value = !0, s.value = {
-        x: X.clientX - e.appState.floatingToolbarOffset.x,
-        y: X.clientY - e.appState.floatingToolbarOffset.y
+        x: Y.clientX - e.appState.floatingToolbarOffset.x,
+        y: Y.clientY - e.appState.floatingToolbarOffset.y
       }, document.addEventListener("mousemove", M), document.addEventListener("mouseup", I);
-    }, M = (X) => {
+    }, M = (Y) => {
       n.value && (e.appState.floatingToolbarOffset = {
-        x: X.clientX - s.value.x,
-        y: X.clientY - s.value.y
+        x: Y.clientX - s.value.x,
+        y: Y.clientY - s.value.y
       });
     }, I = () => {
       n.value = !1, document.removeEventListener("mousemove", M), document.removeEventListener("mouseup", I);
@@ -6736,15 +6746,15 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
       e.appState.isPropertiesPanelOpen = !0;
     }, b = U(() => {
       if (o.value.length < 2) return !1;
-      const X = e.elements.filter((le) => e.appState.selectedElementIds[le.id]), q = X[0]?.groupIds || [];
+      const Y = e.elements.filter((le) => e.appState.selectedElementIds[le.id]), q = Y[0]?.groupIds || [];
       return q.length === 0 ? !1 : q.filter(
-        (le) => X.every((oe) => oe.groupIds && oe.groupIds.includes(le))
+        (le) => Y.every((ie) => ie.groupIds && ie.groupIds.includes(le))
       ).length > 0;
     }), B = () => {
-      const X = Object.keys(e.appState.selectedElementIds);
-      b.value ? e.ungroupElements(X) : e.groupElements(X);
+      const Y = Object.keys(e.appState.selectedElementIds);
+      b.value ? e.ungroupElements(Y) : e.groupElements(Y);
     };
-    return (X, q) => ze(e).shouldShowFloatingToolbar ? (V(), j("div", {
+    return (Y, q) => Se(e).shouldShowFloatingToolbar ? (X(), j("div", {
       key: 0,
       class: "floating-toolbar",
       style: Ke({
@@ -6755,39 +6765,39 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__PURE__ */ Qe({
       m("div", {
         class: "drag-handle",
         title: "拖动",
-        onMousedown: Mt(h, ["stop"])
+        onMousedown: Et(h, ["stop"])
       }, [...q[0] || (q[0] = [
         m("svg", { class: "svg-icon" }, [
           m("use", { "xlink:href": "#icon-tuodong" })
         ], -1)
       ])], 32),
-      !c.value && !f.value ? (V(), j("div", zl)) : we("", !0),
-      ie(Bl),
+      !c.value && !f.value ? (X(), j("div", _l)) : ye("", !0),
+      ae($l),
       q[2] || (q[2] = m("div", { class: "divider" }, null, -1)),
-      k.value ? (V(), j("div", {
+      k.value ? (X(), j("div", {
         key: 1,
         class: "settings-btn",
-        onClick: Mt(B, ["stop"]),
+        onClick: Et(B, ["stop"]),
         title: b.value ? "解除编组" : "编组"
       }, [
-        (V(), j("svg", _l, [
+        (X(), j("svg", Dl, [
           m("use", {
             "xlink:href": b.value ? "#icon-quxiaobianzu" : "#icon-bianzu"
-          }, null, 8, Al)
+          }, null, 8, Fl)
         ]))
-      ], 8, $l)) : we("", !0),
+      ], 8, Al)) : ye("", !0),
       m("div", {
         class: "settings-btn",
-        onClick: Mt(T, ["stop"]),
+        onClick: Et(T, ["stop"]),
         title: "右侧面板"
       }, [...q[1] || (q[1] = [
         m("svg", { class: "svg-icon" }, [
           m("use", { "xlink:href": "#icon-youcemianban" })
         ], -1)
       ])])
-    ], 4)) : we("", !0);
+    ], 4)) : ye("", !0);
   }
-}), Fl = /* @__PURE__ */ st(Dl, [["__scopeId", "data-v-206d2632"]]), Ol = { class: "app-container" }, ws = /* @__PURE__ */ Qe({
+}), Ll = /* @__PURE__ */ st(Ol, [["__scopeId", "data-v-206d2632"]]), Rl = { class: "app-container" }, ws = /* @__PURE__ */ Qe({
   __name: "App",
   setup(i) {
     const t = ot();
@@ -6796,30 +6806,31 @@ const fa = { key: 0 }, ga = { key: 1 }, va = /* @__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", 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
+    }), (e, n) => (X(), j("div", Rl, [
+      Se(t).appConfig.showToolbar !== !1 ? (X(), wt(Ci, { key: 0 })) : ye("", !0),
+      Se(t).appConfig.showPropertiesPanel !== !1 ? (X(), wt(jo, { key: 1 })) : ye("", !0),
+      Se(t).appConfig.showBoardName !== !1 ? (X(), wt(ja, { key: 2 })) : ye("", !0),
+      ae(Ia, {
+        elements: Se(t).elements,
+        zoom: Se(t).appState.zoom,
+        scrollX: Se(t).appState.scrollX,
+        scrollY: Se(t).appState.scrollY
       }, null, 8, ["elements", "zoom", "scrollX", "scrollY"]),
-      ie(Fl, {
-        zoom: ze(t).appState.zoom,
-        scrollX: ze(t).appState.scrollX,
-        scrollY: ze(t).appState.scrollY
+      ae(Ll, {
+        zoom: Se(t).appState.zoom,
+        scrollX: Se(t).appState.scrollX,
+        scrollY: Se(t).appState.scrollY
       }, null, 8, ["zoom", "scrollX", "scrollY"]),
-      ie(Na),
-      ie(Ja)
+      Se(t).appConfig.showFooter !== !1 ? (X(), wt(Ja, { key: 3 })) : ye("", !0),
+      ae(Qa)
     ]));
   }
 });
-ws.install = function(i) {
-  i.component("JvsDraw", ws);
+ws.install = function(i, t) {
+  t && di(t), i.component("JvsDraw", ws);
 };
 export {
   ws as JvsDraw,
-  ws as default
+  ws as default,
+  di as setConfig
 };