@reffy/infinite-canvas 0.0.10 → 0.0.11

package/dist/index.js

@@ -1,24 +1,24 @@
-var ie = (s) => {
+var se = (s) => {
   throw TypeError(s);
 };
-var se = (s, t, e) => t.has(s) || ie("Cannot " + e);
-var l = (s, t, e) => (se(s, t, "read from private field"), e ? e.call(s) : t.get(s)), L = (s, t, e) => t.has(s) ? ie("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(s) : t.set(s, e), I = (s, t, e, i) => (se(s, t, "write to private field"), i ? i.call(s, e) : t.set(s, e), e);
-import { makeObservable as Me, computed as st, action as b, observable as B, reaction as Qe } from "mobx";
-import { css as Je, LitElement as ti } from "lit";
+var re = (s, t, e) => t.has(s) || se("Cannot " + e);
+var f = (s, t, e) => (re(s, t, "read from private field"), e ? e.call(s) : t.get(s)), O = (s, t, e) => t.has(s) ? se("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(s) : t.set(s, e), I = (s, t, e, i) => (re(s, t, "write to private field"), i ? i.call(s, e) : t.set(s, e), e);
+import { makeObservable as Ee, computed as nt, action as b, observable as B, reaction as Je } from "mobx";
+import { css as ti, LitElement as ei } from "lit";
 import Y from "dexie";
-import { v4 as ei } from "uuid";
-import ii from "eventemitter3";
-import si from "stats.js";
-const pt = ["TOP", "BOTTOM", "LEFT", "RIGHT"], Mt = ["TOPLEFT", "TOPRIGHT", "BOTTOMLEFT", "BOTTOMRIGHT"], re = {
+import { v4 as ii } from "uuid";
+import si from "eventemitter3";
+import ri from "stats.js";
+const yt = ["TOP", "BOTTOM", "LEFT", "RIGHT"], Et = ["TOPLEFT", "TOPRIGHT", "BOTTOMLEFT", "BOTTOMRIGHT"], ne = {
   TOPLEFT: "TOPRIGHT",
   TOPRIGHT: "TOPLEFT",
   BOTTOMLEFT: "BOTTOMRIGHT",
   BOTTOMRIGHT: "BOTTOMLEFT"
 };
-function ne(s) {
-  return re[s] ? re[s] : s;
+function ae(s) {
+  return ne[s] ? ne[s] : s;
 }
-const Ee = 8, qt = 2, M = {
+const Te = 8, Kt = 2, E = {
   identity: function() {
     return [1, 0, 0, 0, 1, 0, 0, 0, 1];
   },
@@ -33,22 +33,22 @@ const Ee = 8, qt = 2, M = {
     return [s, 0, 0, 0, t, 0, 0, 0, 1];
   },
   multiply: function(s, t) {
-    var e = s[0], i = s[1], r = s[2], n = s[3], a = s[4], o = s[5], h = s[6], c = s[7], u = s[8], f = t[0], g = t[1], m = t[2], w = t[3], x = t[4], C = t[5], v = t[6], A = t[7], T = t[8];
+    var e = s[0], i = s[1], r = s[2], n = s[3], a = s[4], o = s[5], h = s[6], c = s[7], l = s[8], u = t[0], g = t[1], m = t[2], w = t[3], x = t[4], C = t[5], v = t[6], A = t[7], T = t[8];
     return [
-      f * e + g * n + m * h,
-      f * i + g * a + m * c,
-      f * r + g * o + m * u,
+      u * e + g * n + m * h,
+      u * i + g * a + m * c,
+      u * r + g * o + m * l,
       w * e + x * n + C * h,
       w * i + x * a + C * c,
-      w * r + x * o + C * u,
+      w * r + x * o + C * l,
       v * e + A * n + T * h,
       v * i + A * a + T * c,
-      v * r + A * o + T * u
+      v * r + A * o + T * l
     ];
   },
   inverse(s) {
-    const t = [9], e = s[0], i = s[1], r = s[2], n = s[3], a = s[4], o = s[5], h = s[6], c = s[7], u = s[8], f = u * a - o * c, g = -u * n + o * h, m = c * n - a * h, x = 1 / (e * f + i * g + r * m);
-    return t[0] = f * x, t[1] = (-u * i + r * c) * x, t[2] = (o * i - r * a) * x, t[3] = g * x, t[4] = (u * e - r * h) * x, t[5] = (-o * e + r * n) * x, t[6] = m * x, t[7] = (-c * e + i * h) * x, t[8] = (a * e - i * n) * x, t;
+    const t = [9], e = s[0], i = s[1], r = s[2], n = s[3], a = s[4], o = s[5], h = s[6], c = s[7], l = s[8], u = l * a - o * c, g = -l * n + o * h, m = c * n - a * h, x = 1 / (e * u + i * g + r * m);
+    return t[0] = u * x, t[1] = (-l * i + r * c) * x, t[2] = (o * i - r * a) * x, t[3] = g * x, t[4] = (l * e - r * h) * x, t[5] = (-o * e + r * n) * x, t[6] = m * x, t[7] = (-c * e + i * h) * x, t[8] = (a * e - i * n) * x, t;
   },
   projection(s, t) {
     const e = [9];
@@ -62,27 +62,27 @@ const Ee = 8, qt = 2, M = {
     ];
   }
 };
-function Xt(s, t, e) {
-  const i = ae(s, s.VERTEX_SHADER, t), r = ae(s, s.FRAGMENT_SHADER, e), n = s.createProgram();
+function Ht(s, t, e) {
+  const i = oe(s, s.VERTEX_SHADER, t), r = oe(s, s.FRAGMENT_SHADER, e), n = s.createProgram();
   if (s.attachShader(n, i), s.attachShader(n, r), s.linkProgram(n), !s.getProgramParameter(n, s.LINK_STATUS))
     throw s.deleteProgram(n), s.deleteShader(i), s.deleteShader(r), new Error(
       "Program was not created or the link to shaders was not successful."
     );
   return s.detachShader(n, i), s.detachShader(n, r), n;
 }
-function ae(s, t, e) {
+function oe(s, t, e) {
   const i = s.createShader(t);
   if (s.shaderSource(i, e), s.compileShader(i), s.getShaderParameter(i, s.COMPILE_STATUS))
     return i;
   throw s.deleteShader(i), new Error("Shader was not created.");
 }
-function ri(s, t, e, i, r, n) {
-  const a = r.getBoundingClientRect(), o = window.devicePixelRatio || 1, h = (s - a.left) * o, c = (t - a.top) * o, u = h / e * 2 - 1, f = c / i * -2 + 1, g = M.projection(e, i), m = M.multiply(g, n), w = M.inverse(m), [x, C] = M.transformPoint(w, [u, f]);
+function ni(s, t, e, i, r, n) {
+  const a = r.getBoundingClientRect(), o = window.devicePixelRatio || 1, h = (s - a.left) * o, c = (t - a.top) * o, l = h / e * 2 - 1, u = c / i * -2 + 1, g = E.projection(e, i), m = E.multiply(g, n), w = E.inverse(m), [x, C] = E.transformPoint(w, [l, u]);
   return [x, C];
 }
-function wt(s, t, e) {
+function K(s, t, e) {
   const { gl: i, canvas: r } = e;
-  return ri(
+  return ni(
     s,
     t,
     i.canvas.width,
@@ -98,26 +98,26 @@ function U(s, t, e) {
     s[1] * i + s[4] * r + s[7]
   ];
 }
-function ni(s) {
+function ai(s) {
   return Math.hypot(s[0], s[1]);
 }
-function ai(s) {
+function oi(s) {
   return Math.hypot(s[3], s[4]);
 }
-function J(s) {
-  return [ni(s), ai(s)];
+function tt(s) {
+  return [ai(s), oi(s)];
 }
-function oe(s) {
+function he(s) {
   return s / Math.abs(s);
 }
-function Et(s) {
-  return [oe(s[0]), oe(s[4])];
+function Tt(s) {
+  return [he(s[0]), he(s[4])];
 }
-const Lt = (s, t) => Math.abs(s) < t ? 0 : Math.sign(s), Dt = (s, t, e) => {
+const Dt = (s, t) => Math.abs(s) < t ? 0 : Math.sign(s), Bt = (s, t, e) => {
   const i = s * t;
-  return Lt(s, e) !== Lt(i, e);
+  return Dt(s, e) !== Dt(i, e);
 };
-async function oi(s) {
+async function hi(s) {
   return new Promise((t, e) => {
     let i = new FileReader();
     i.onload = (r) => {
@@ -125,7 +125,7 @@ async function oi(s) {
     }, i.onerror = e, i.readAsDataURL(s);
   });
 }
-const hi = [
+const ci = [
   "image/webp",
   "image/png",
   "image/jpeg",
@@ -137,25 +137,25 @@ const hi = [
   "image/apng"
   // will be rendered as a still image
 ];
-function ci(s) {
-  return hi.includes(s);
+function di(s) {
+  return ci.includes(s);
 }
-async function Kt(s) {
+async function Qt(s) {
   const e = new TextEncoder().encode(s), i = await crypto.subtle.digest("SHA-256", e);
   return Array.from(new Uint8Array(i)).map((n) => n.toString(16).padStart(2, "0")).join("");
 }
-function di(s) {
+function li(s) {
   const t = /^data:([^;]+);base64,/.exec(s);
   return t ? t[1] : void 0;
 }
-async function li(s, t) {
+async function ui(s, t) {
   const e = [];
   if (s.length > 0)
     for (let i = 0; i < s.length; i++) {
       const r = s[i];
-      if (ci(r.type))
+      if (di(r.type))
         try {
-          const n = await oi(r);
+          const n = await hi(r);
           typeof n == "string" ? e.push(await t(n)) : console.error("Image not added");
         } catch {
           console.error("Failed to copy image.");
@@ -163,15 +163,15 @@ async function li(s, t) {
     }
   return e;
 }
-function ui(s, t) {
+function fi(s, t) {
   const e = JSON.stringify(t, null, 2), i = new Blob([e], { type: "application/json" }), r = URL.createObjectURL(i), n = document.createElement("a");
   n.href = r, n.download = s, document.body.appendChild(n), n.click(), n.remove(), URL.revokeObjectURL(r);
 }
-async function fi(s) {
+async function mi(s) {
   const t = await s.text();
   return JSON.parse(t);
 }
-function Te(s, t = 1) {
+function _e(s, t = 1) {
   return new Promise((e, i) => {
     const r = new Image();
     r.onload = () => {
@@ -184,18 +184,18 @@ function Te(s, t = 1) {
     }, r.onerror = i, r.src = s;
   });
 }
-const nt = [0.33, 0.6, 0.95, 1], bt = [
+const ot = [0.33, 0.6, 0.95, 1], Ct = [
   0.33,
   0.6,
   0.95,
   0.6
-], mi = [
+], gi = [
   0.33,
   0.6,
   0.95,
   0.4
 ];
-function Bt(s, t, e = "Add Child") {
+function zt(s, t, e = "Add Child") {
   return {
     label: e,
     do() {
@@ -208,7 +208,7 @@ function Bt(s, t, e = "Add Child") {
     }
   };
 }
-function gi(s, t, e = "Remove Child") {
+function pi(s, t, e = "Remove Child") {
   let i = -1;
   return {
     label: e,
@@ -224,7 +224,7 @@ function gi(s, t, e = "Remove Child") {
     }
   };
 }
-function pi(s, t, e = "Remove Children") {
+function xi(s, t, e = "Remove Children") {
   let i = [];
   return {
     label: e,
@@ -247,8 +247,8 @@ function pi(s, t, e = "Remove Children") {
     }
   };
 }
-const xi = ["image/", "text/plain"], yi = () => "clipboard" in navigator && "writeText" in navigator.clipboard;
-async function _e(s, t) {
+const yi = ["image/", "text/plain"], wi = () => "clipboard" in navigator && "writeText" in navigator.clipboard;
+async function Re(s, t) {
   const e = {
     type: "infinite_canvas",
     elements: s.map((n) => ({
@@ -261,17 +261,17 @@ async function _e(s, t) {
   }, i = JSON.stringify(e), r = new ClipboardItem({
     "text/plain": new Blob([i], { type: "text/plain" })
   });
-  if (yi())
+  if (wi())
     try {
       await navigator.clipboard.write([r]);
       return;
     } catch (n) {
       console.error(n);
     }
-  if (!wi(i))
+  if (!vi(i))
     throw new Error("Error copying to clipboard.");
 }
-function wi(s) {
+function vi(s) {
   s || (s = " ");
   const t = document.documentElement.getAttribute("dir") === "rtl", e = document.createElement("textarea");
   e.style.border = "0", e.style.padding = "0", e.style.margin = "0", e.style.position = "absolute", e.style[t ? "right" : "left"] = "-9999px";
@@ -285,16 +285,16 @@ function wi(s) {
   }
   return e.remove(), r;
 }
-async function Re(s, t, e, i, r = !0) {
-  const n = await navigator.clipboard.read(), a = n[0].types, [o, h] = r ? [s, t] : wt(s, t, e);
+async function Ie(s, t, e, i, r = !0) {
+  const n = await navigator.clipboard.read(), a = n[0].types, [o, h] = r ? [s, t] : K(s, t, e);
   for (const c of a) {
-    if (!xi.find(
+    if (!yi.find(
       (m) => m.endsWith("/") ? c.startsWith(m) : c === m
     )) continue;
-    const f = await n[0].getType(c);
+    const u = await n[0].getType(c);
     try {
       if (c === "text/plain") {
-        const m = JSON.parse(await f.text());
+        const m = JSON.parse(await u.text());
         if (m.elements.length === 0) return;
         let w = 1 / 0, x = 1 / 0;
         for (const v of m.elements)
@@ -310,7 +310,7 @@ async function Re(s, t, e, i, r = !0) {
             )
           )
         );
-        i.push(Bt(e, C));
+        i.push(zt(e, C));
         return;
       }
     } catch (m) {
@@ -320,8 +320,8 @@ async function Re(s, t, e, i, r = !0) {
     let g;
     if (c.startsWith("image/svg"))
       try {
-        const m = await f.text();
-        g = await Te(
+        const m = await u.text();
+        g = await _e(
           `data:image/svg+xml;base64,${btoa(m)}`
         );
       } catch (m) {
@@ -332,7 +332,7 @@ async function Re(s, t, e, i, r = !0) {
       try {
         g = await new Promise((m, w) => {
           const x = new FileReader();
-          x.onloadend = () => m(x.result), x.onerror = w, x.readAsDataURL(f);
+          x.onloadend = () => m(x.result), x.onerror = w, x.readAsDataURL(u);
         });
       } catch (m) {
         console.error("Image read failed", m);
@@ -340,7 +340,7 @@ async function Re(s, t, e, i, r = !0) {
       }
     try {
       const m = await e.addImageToCanvas(g, o, h);
-      i.push(Bt(e, [m]));
+      i.push(zt(e, [m]));
       return;
     } catch (m) {
       console.error("Failed to add image to canvas", m);
@@ -354,14 +354,14 @@ const H = {
 }, N = {
   Save: "save",
   Change: "statechange"
-}, tt = {
+}, it = {
   start: "startloading",
   done: "completeloading"
-}, et = {
+}, st = {
   Save: "save",
   SaveCompleted: "savecompleted",
   SaveFailed: "savefailed"
-}, vi = `
+}, bi = `
 attribute vec2 a_position;
 
 uniform vec2 u_resolution;
@@ -379,14 +379,14 @@ void main() {
 
   gl_Position = vec4(clipSpace * vec2(1, -1), z, 1);
 }
-`, bi = `
+`, Ci = `
 precision mediump float;
 uniform vec4 u_color;
 
 void main() {
   gl_FragColor = u_color;
 }
-`, Ci = (
+`, Si = (
   /* glsl */
   `
 #extension GL_OES_standard_derivatives : enable
@@ -417,7 +417,7 @@ void main() {
   gl_Position = vec4(a_Position, z, 1.0);
 }
 `
-), Si = (
+), Mi = (
   /* glsl */
   `
 #extension GL_OES_standard_derivatives : enable
@@ -478,7 +478,7 @@ void main() {
   gl_FragColor = render_grid_checkerboard(v_Position);
 }
 `
-), Mi = `
+), Ei = `
 attribute vec2 a_position;
 attribute vec2 a_texCoord;
 
@@ -499,7 +499,7 @@ void main() {
 
   v_texCoord = a_texCoord;
 }
-`, Ei = `
+`, Ti = `
 #ifdef GL_FRAGMENT_PRECISION_HIGH
 precision highp float;
 #else
@@ -515,45 +515,45 @@ void main() {
 }
 `;
 var z = /* @__PURE__ */ ((s) => (s[s.ACTIVE = 0] = "ACTIVE", s[s.PASSIVE = 1] = "PASSIVE", s))(z || {});
-class he {
+class ce {
   constructor(t, e) {
-    this.sides = /* @__PURE__ */ new Map(), this.corners = /* @__PURE__ */ new Map(), this.borderSize = 0, this.boxSize = 0, this.mode = z.ACTIVE, this.target = t, this.setDimension(), this.mode = e ?? z.ACTIVE, this.borderSize = qt, this.boxSize = Ee / 2, this.addSides(), this.mode === z.ACTIVE && this.addCorners();
+    this.sides = /* @__PURE__ */ new Map(), this.corners = /* @__PURE__ */ new Map(), this.borderSize = 0, this.boxSize = 0, this.mode = z.ACTIVE, this.target = t, this.setDimension(), this.mode = e ?? z.ACTIVE, this.borderSize = Kt, this.boxSize = Te / 2, this.addSides(), this.mode === z.ACTIVE && this.addCorners();
   }
   setDimension() {
     const t = this.target.getEdge();
     this.width = t.maxX - t.minX, this.height = t.maxY - t.minY;
   }
   getSidesInScreenSpace(t, e) {
-    const [i, r] = e ? J(e) : [1, 1], { width: n, height: a, borderSize: o } = this, [h, c] = U(e), [u, f] = Et(e);
+    const [i, r] = e ? tt(e) : [1, 1], { width: n, height: a, borderSize: o } = this, [h, c] = U(e), [l, u] = Tt(e);
     return {
       TOP: {
-        x: u > 0 ? h : h - n * i,
+        x: l > 0 ? h : h - n * i,
         y: c,
         width: n * i,
         height: o
       },
       BOTTOM: {
-        x: u > 0 ? h : h - n * i,
-        y: c + a * r * f,
+        x: l > 0 ? h : h - n * i,
+        y: c + a * r * u,
         width: n * i,
         height: o
       },
       LEFT: {
         x: h,
-        y: f > 0 ? c : c - a * r,
+        y: u > 0 ? c : c - a * r,
         width: o,
         height: a * r
       },
       RIGHT: {
-        x: h + n * i * u,
-        y: f > 0 ? c : c - a * r,
+        x: h + n * i * l,
+        y: u > 0 ? c : c - a * r,
         width: o,
         height: a * r
       }
     }[t];
   }
   getCornersInScreenSpace(t, e) {
-    const [i, r] = e ? J(e) : [1, 1], { width: n, height: a, boxSize: o } = this, [h, c] = U(e), [u, f] = Et(e);
+    const [i, r] = e ? tt(e) : [1, 1], { width: n, height: a, boxSize: o } = this, [h, c] = U(e), [l, u] = Tt(e);
     return {
       TOPLEFT: {
         x: h - o,
@@ -562,20 +562,20 @@ class he {
         height: o * 2
       },
       TOPRIGHT: {
-        x: h - o + n * i * u,
+        x: h - o + n * i * l,
         y: c - o,
         width: o * 2,
         height: o * 2
       },
       BOTTOMLEFT: {
         x: h - o,
-        y: c - o + a * r * f,
+        y: c - o + a * r * u,
         width: o * 2,
         height: o * 2
       },
       BOTTOMRIGHT: {
-        x: h - o + n * i * u,
-        y: c - o + a * r * f,
+        x: h - o + n * i * l,
+        y: c - o + a * r * u,
         width: o * 2,
         height: o * 2
       }
@@ -595,21 +595,21 @@ class he {
    */
   hitTest(t, e, i) {
     if (this.mode === z.PASSIVE) return;
-    const [r, n] = J(this.target.worldMatrix), [a, o] = Et(this.target.worldMatrix), [h, c] = U(i, t, e), u = 4;
-    for (const T of Mt) {
+    const [r, n] = tt(this.target.worldMatrix), [a, o] = Tt(this.target.worldMatrix), [h, c] = U(i, t, e), l = 4;
+    for (const T of Et) {
       const S = this.getCornersInScreenSpace(
         T,
         this.target.worldMatrix
       );
-      if (h >= S.x - u && h <= S.x + S.width + u && c >= S.y - u && c <= S.y + S.height + u)
+      if (h >= S.x - l && h <= S.x + S.width + l && c >= S.y - l && c <= S.y + S.height + l)
         return T;
     }
-    for (const T of pt) {
+    for (const T of yt) {
       const S = this.getSidesInScreenSpace(T, this.target.worldMatrix);
-      if (h >= S.x - u && h <= S.x + S.width + u && c >= S.y - u && c <= S.y + S.height + u)
+      if (h >= S.x - l && h <= S.x + S.width + l && c >= S.y - l && c <= S.y + S.height + l)
         return T;
     }
-    const [f, g] = U(this.target.worldMatrix), m = this.width * r * a, w = this.height * n * o, x = Math.min(f, f + m), C = Math.max(f, f + m), v = Math.min(g, g + w), A = Math.max(g, g + w);
+    const [u, g] = U(this.target.worldMatrix), m = this.width * r * a, w = this.height * n * o, x = Math.min(u, u + m), C = Math.max(u, u + m), v = Math.min(g, g + w), A = Math.max(g, g + w);
     if (h >= x && h <= C && c >= v && c <= A)
       return "CENTER";
   }
@@ -634,8 +634,8 @@ class he {
   }
   resize(t, e, i) {
     if (this.target instanceof Z) {
-      const r = Math.abs(this.width), n = Math.abs(this.height), a = r / n, o = this.target.sx, h = this.target.sy, c = 1e-6, u = Math.abs(r * o) < c ? c * Lt(r * o || 1, c) : r * o, f = Math.abs(n * h) < c ? c * Lt(n * h || 1, c) : n * h, g = t / u, m = e / f, w = c, x = i === "LEFT" || i === "BOTTOMLEFT" || i === "TOPLEFT" ? 1 - g : i === "RIGHT" || i === "BOTTOMRIGHT" || i === "TOPRIGHT" ? 1 + g : i === "TOP" ? 1 - m : 1 + m;
-      if (Dt(o, x, w) || Dt(h, x, w)) return;
+      const r = Math.abs(this.width), n = Math.abs(this.height), a = r / n, o = this.target.sx, h = this.target.sy, c = 1e-6, l = Math.abs(r * o) < c ? c * Dt(r * o || 1, c) : r * o, u = Math.abs(n * h) < c ? c * Dt(n * h || 1, c) : n * h, g = t / l, m = e / u, w = c, x = i === "LEFT" || i === "BOTTOMLEFT" || i === "TOPLEFT" ? 1 - g : i === "RIGHT" || i === "BOTTOMRIGHT" || i === "TOPRIGHT" ? 1 + g : i === "TOP" ? 1 - m : 1 + m;
+      if (Bt(o, x, w) || Bt(h, x, w)) return;
       const C = r * o * x, v = n * h * x;
       if (Math.abs(C) < w || Math.abs(v) < w) return;
       if (this.target.updateScale(x, x), i === "LEFT") {
@@ -677,45 +677,45 @@ class he {
     };
   }
   addCorners() {
-    for (const t of Mt) {
+    for (const t of Et) {
       const e = new Z(
         this.getCornersInScreenSpace(t, this.target.worldMatrix)
       );
-      e.color = this.mode === z.ACTIVE ? nt : bt, this.corners.set(t, e);
+      e.color = this.mode === z.ACTIVE ? ot : Ct, this.corners.set(t, e);
     }
   }
   removeCorners() {
     this.corners.clear();
   }
   updateCorners() {
-    for (const t of Mt) {
+    for (const t of Et) {
       const e = this.getCornersInScreenSpace(
         t,
         this.target.worldMatrix
       ), i = this.corners.get(t);
-      i && (i.setTranslation(e.x, e.y), i.width = e.width, i.height = e.height, i.color = this.mode === z.ACTIVE ? nt : bt);
+      i && (i.setTranslation(e.x, e.y), i.width = e.width, i.height = e.height, i.color = this.mode === z.ACTIVE ? ot : Ct);
     }
   }
   addSides() {
-    for (const t of pt) {
+    for (const t of yt) {
       const e = new Z(
         this.getSidesInScreenSpace(t, this.target.worldMatrix)
       );
-      e.color = this.mode === z.ACTIVE ? nt : bt, this.sides.set(t, e);
+      e.color = this.mode === z.ACTIVE ? ot : Ct, this.sides.set(t, e);
     }
   }
   updateSides() {
-    for (const t of pt) {
+    for (const t of yt) {
       const e = this.getSidesInScreenSpace(t, this.target.worldMatrix), i = this.sides.get(t);
-      i && (i.setTranslation(e.x, e.y), i.width = e.width, i.height = e.height, i.color = this.mode === z.ACTIVE ? nt : bt);
+      i && (i.setTranslation(e.x, e.y), i.width = e.width, i.height = e.height, i.color = this.mode === z.ACTIVE ? ot : Ct);
     }
   }
 }
-const Ht = [
-  ...Mt,
-  ...pt
+const Nt = [
+  ...Et,
+  ...yt
 ];
-class Ti {
+class _i {
   constructor(t) {
     this.targets = [], this.handles = /* @__PURE__ */ new Map(), this.borderSize = 0, this.boxSize = 0, this.scale = [1, 1], t && t.forEach((e) => this.add(e)), this.addHandles();
   }
@@ -732,7 +732,7 @@ class Ti {
       r.render(t, e);
   }
   update() {
-    this.borderSize = qt, this.boxSize = Ee / 2, this.recalculateBounds(), this.updateHandles();
+    this.borderSize = Kt, this.boxSize = Te / 2, this.recalculateBounds(), this.updateHandles();
   }
   destroy() {
     for (const [t, e] of this.handles.entries())
@@ -744,18 +744,18 @@ class Ti {
   }
   // dx and dy are in world units
   resize(t, e, i, r) {
-    const n = this.width, a = this.height, o = i.includes("TOP"), h = i.includes("BOTTOM"), c = i.includes("LEFT"), u = i.includes("RIGHT"), f = c ? this.x + n : u ? this.x : this.x + n / 2, g = o ? this.y + a : h ? this.y : this.y + a / 2, m = 1e-6, w = Math.abs(n) < m ? n < 0 ? -m : m : n, x = Math.abs(a) < m ? a < 0 ? -m : m : a, [C, v] = J(r), A = t * C / w, T = e * v / x, S = i.includes("LEFT") ? 1 - A : i.includes("RIGHT") ? 1 + A : i === "TOP" ? 1 - T : 1 + T;
-    if (Dt(this.scale[0], S, m) || Dt(this.scale[1], S, m))
+    const n = this.width, a = this.height, o = i.includes("TOP"), h = i.includes("BOTTOM"), c = i.includes("LEFT"), l = i.includes("RIGHT"), u = c ? this.x + n : l ? this.x : this.x + n / 2, g = o ? this.y + a : h ? this.y : this.y + a / 2, m = 1e-6, w = Math.abs(n) < m ? n < 0 ? -m : m : n, x = Math.abs(a) < m ? a < 0 ? -m : m : a, [C, v] = tt(r), A = t * C / w, T = e * v / x, S = i.includes("LEFT") ? 1 - A : i.includes("RIGHT") ? 1 + A : i === "TOP" ? 1 - T : 1 + T;
+    if (Bt(this.scale[0], S, m) || Bt(this.scale[1], S, m))
       return;
-    const Fe = n * S, Ge = a * S;
-    if (!(Math.abs(Fe) < m || Math.abs(Ge) < m))
-      for (const vt of this.targets) {
-        const Xe = vt.x, He = vt.y, [te, ee] = U(r, Xe, He), Ne = f + (te - f) * S, Ye = g + (ee - g) * S, $e = Ne - te, je = Ye - ee, Ve = Math.abs(C) < m ? C < 0 ? -m : m : C, Ze = Math.abs(v) < m ? v < 0 ? -m : m : v, qe = $e / Ve, Ke = je / Ze;
-        vt.updateScale(S, S), vt.updateTranslation(qe, Ke);
+    const Ge = n * S, Xe = a * S;
+    if (!(Math.abs(Ge) < m || Math.abs(Xe) < m))
+      for (const bt of this.targets) {
+        const He = bt.x, Ne = bt.y, [ee, ie] = U(r, He, Ne), Ye = u + (ee - u) * S, $e = g + (ie - g) * S, je = Ye - ee, Ve = $e - ie, Ze = Math.abs(C) < m ? C < 0 ? -m : m : C, qe = Math.abs(v) < m ? v < 0 ? -m : m : v, Ke = je / Ze, Qe = Ve / qe;
+        bt.updateScale(S, S), bt.updateTranslation(Ke, Qe);
       }
   }
   flip(t, e, i) {
-    J(t);
+    tt(t);
     const r = [], [n, a] = i(this.x, this.y);
     for (const o of this.targets) {
       const h = {
@@ -820,17 +820,17 @@ class Ti {
         (a.y + a.height * a.sy) / 2
       ];
       if (t === "height") {
-        const u = a.height * a.sy, f = Math.abs(n / u);
-        a.updateScale(f, f);
+        const l = a.height * a.sy, u = Math.abs(n / l);
+        a.updateScale(u, u);
       } else if (t === "width") {
-        const u = a.width * a.sx, f = Math.abs(n / u);
-        a.updateScale(f, f);
+        const l = a.width * a.sx, u = Math.abs(n / l);
+        a.updateScale(u, u);
       } else if (t === "scale") {
-        const u = Math.sign(a.sx), f = Math.sign(a.sy);
-        a.setScale(n * u, n * f);
+        const l = Math.sign(a.sx), u = Math.sign(a.sy);
+        a.setScale(n * l, n * u);
       } else if (t === "size") {
-        const u = a.width * a.height * a.sx * a.sy, f = Math.sqrt(Math.abs(n / u));
-        a.updateScale(f, f);
+        const l = a.width * a.height * a.sx * a.sy, u = Math.sqrt(Math.abs(n / l));
+        a.updateScale(u, u);
       }
       const c = [
         (a.x + a.width * a.sx) / 2,
@@ -866,25 +866,25 @@ class Ti {
   }
   hitTest(t, e, i) {
     const [r, n] = U(i, t, e), a = 4;
-    for (const f of Ht) {
-      const g = this.getHandleConfig(f);
+    for (const u of Nt) {
+      const g = this.getHandleConfig(u);
       if (r >= g.x - a && r <= g.x + g.width + a && n >= g.y - a && n <= g.y + g.height + a)
-        return f;
+        return u;
     }
-    const o = Math.min(this.x, this.x + this.width), h = Math.max(this.x, this.x + this.width), c = Math.min(this.y, this.y + this.height), u = Math.max(this.y, this.y + this.height);
-    if (r >= o && r <= h && n >= c && n <= u)
+    const o = Math.min(this.x, this.x + this.width), h = Math.max(this.x, this.x + this.width), c = Math.min(this.y, this.y + this.height), l = Math.max(this.y, this.y + this.height);
+    if (r >= o && r <= h && n >= c && n <= l)
       return "CENTER";
   }
   getBounds() {
     const t = Array.from(this.targets);
     let e = 1 / 0, i = 1 / 0, r = -1 / 0, n = -1 / 0;
     for (const a of t) {
-      const [o, h] = U(a.worldMatrix), [c, u] = U(
+      const [o, h] = U(a.worldMatrix), [c, l] = U(
         a.worldMatrix,
         a.width,
         a.height
       );
-      e = Math.min(e, a.sx < 0 ? c : o), i = Math.min(i, a.sy < 0 ? u : h), r = Math.max(r, a.sx < 0 ? o : c), n = Math.max(n, a.sy < 0 ? h : u);
+      e = Math.min(e, a.sx < 0 ? c : o), i = Math.min(i, a.sy < 0 ? l : h), r = Math.max(r, a.sx < 0 ? o : c), n = Math.max(n, a.sy < 0 ? h : l);
     }
     return { minX: e, minY: i, maxX: r, maxY: n };
   }
@@ -893,13 +893,13 @@ class Ti {
     this.x = this.scale[0] < 0 ? i : t, this.y = this.scale[1] < 0 ? r : e, this.width = this.scale[0] * (i - t), this.height = this.scale[1] * (r - e);
   }
   addHandles() {
-    for (const t of Ht) {
+    for (const t of Nt) {
       const e = this.getHandleConfig(t), i = new Z(e);
-      i.color = nt, this.handles.set(t, i);
+      i.color = ot, this.handles.set(t, i);
     }
   }
   updateHandles() {
-    for (const t of Ht) {
+    for (const t of Nt) {
       const e = this.handles.get(t), i = this.getHandleConfig(t);
       e && (e.setTranslation(i.x, i.y), e.width = i.width, e.height = i.height);
     }
@@ -958,7 +958,7 @@ class Ti {
     }[t];
   }
 }
-class dt {
+class et {
   // matrix: number[];
   constructor(t, e, i, r) {
     this.minX = t, this.minY = e, this.maxX = i, this.maxY = r;
@@ -970,8 +970,8 @@ class dt {
     return t.minX <= e.maxX && t.maxX >= e.minX && t.minY <= e.maxY && t.maxY >= e.minY;
   }
 }
-const ce = ["CENTER", ...pt];
-class _i {
+const de = ["CENTER", ...yt];
+class Ri {
   constructor(t, e, i) {
     this.width = 0, this.height = 0, this.rects = /* @__PURE__ */ new Map(), this.borderSize = 0;
     const [r, n] = U(i, t, e);
@@ -1018,7 +1018,7 @@ class _i {
       r.render(t, e);
   }
   update() {
-    this.borderSize = qt, this.updateRects();
+    this.borderSize = Kt, this.updateRects();
   }
   destroy() {
     for (const [t, e] of this.rects.entries())
@@ -1030,26 +1030,26 @@ class _i {
    */
   getBoundingBox(t) {
     const [e, i] = t(this.x, this.y), [r, n] = t(this.x + this.width, this.y + this.height), a = Math.min(e, r), o = Math.max(e, r), h = Math.min(i, n), c = Math.max(i, n);
-    return new dt(a, h, o, c);
+    return new et(a, h, o, c);
   }
   resize(t, e, i) {
-    const [r, n] = J(i);
+    const [r, n] = tt(i);
     this.width += t * r, this.height += e * n;
   }
   addRects() {
-    for (const t of ce) {
+    for (const t of de) {
       const e = this.getRectConfig(t), i = new Z(e);
-      i.color = nt, this.rects.set(t, i);
+      i.color = ot, this.rects.set(t, i);
     }
   }
   updateRects() {
-    for (const t of ce) {
+    for (const t of de) {
       const e = this.rects.get(t), i = this.getRectConfig(t);
-      e && (e.setTranslation(i.x, i.y), e.width = i.width, e.height = i.height, t === "CENTER" && (e.color = mi));
+      e && (e.setTranslation(i.x, i.y), e.width = i.width, e.height = i.height, t === "CENTER" && (e.color = gi));
     }
   }
 }
-class Ri {
+class Ii {
   constructor(t = {}) {
     const {
       x: e = 0,
@@ -1059,7 +1059,7 @@ class Ri {
       rotation: a = 0,
       zoom: o = 1
     } = t;
-    this.x = e, this.y = i, this.width = r, this.height = n, this.rotation = a, this.zoom = o, Me(this, {
+    this.x = e, this.y = i, this.width = r, this.height = n, this.rotation = a, this.zoom = o, Ee(this, {
       x: B,
       y: B,
       width: B,
@@ -1075,7 +1075,7 @@ class Ri {
       setSize: b,
       setZoom: b,
       setRotation: b,
-      stateVector: st
+      stateVector: nt
     });
   }
   // Actions
@@ -1116,53 +1116,53 @@ class Ri {
     return [this.x, this.y, this.width, this.height, this.rotation, this.zoom];
   }
   get translationMatrix() {
-    return M.translation(this.x, this.y);
+    return E.translation(this.x, this.y);
   }
   get rotationMatrix() {
-    return M.rotation(this.rotation);
+    return E.rotation(this.rotation);
   }
   get scaleMatrix() {
-    return M.scaling(this.zoom, this.zoom);
+    return E.scaling(this.zoom, this.zoom);
   }
   get cameraMatrix() {
-    const t = M.multiply(this.translationMatrix, this.rotationMatrix);
-    return M.multiply(t, this.scaleMatrix);
+    const t = E.multiply(this.translationMatrix, this.rotationMatrix);
+    return E.multiply(t, this.scaleMatrix);
   }
   get canvasMatrix() {
-    return M.inverse(this.cameraMatrix);
+    return E.inverse(this.cameraMatrix);
   }
 }
-function de(s, t) {
+function le(s, t) {
   s.setTranslation(t.x, t.y), s.setScale(t.sx, t.sy);
 }
-function le(s, t, e) {
+function ue(s, t, e) {
   return {
     label: "Flip",
     do() {
-      for (const i of s) de(i.ref, i.end);
+      for (const i of s) le(i.ref, i.end);
       e && (e.scale[t === "horizontal" ? 0 : 1] *= -1);
     },
     undo() {
-      for (const i of s) de(i.ref, i.start);
+      for (const i of s) le(i.ref, i.start);
       e && (e.scale[t === "horizontal" ? 0 : 1] *= -1);
     }
   };
 }
-function ue(s, t) {
+function fe(s, t) {
   s.setTranslation(t.x, t.y), s.setScale(t.sx, t.sy);
 }
-function $t(s, t = "Transform") {
+function jt(s, t = "Transform") {
   return {
     label: t,
     do() {
-      for (const e of s) ue(e.ref, e.end);
+      for (const e of s) fe(e.ref, e.end);
     },
     undo() {
-      for (const e of s) ue(e.ref, e.start);
+      for (const e of s) fe(e.ref, e.start);
     }
   };
 }
-class Ii {
+class Pi {
   // #canvas: Canvas;
   #s;
   #i = /* @__PURE__ */ new Set();
@@ -1184,14 +1184,14 @@ class Ii {
   }
   set selected(t) {
     this.#i.clear(), t.forEach((e) => {
-      this.#i.add(e), this.#e.add(new he(e));
+      this.#i.add(e), this.#e.add(new ce(e));
     });
   }
   get marqueeBox() {
     return this.#r;
   }
   set marqueeBox(t) {
-    this.#r = new _i(
+    this.#r = new Ri(
       t.x,
       t.y,
       this.getWorldMatrix()
@@ -1200,16 +1200,16 @@ class Ii {
   constructor(t, e, i, r, n, a, o, h) {
     this.#n = i, this.#h = r, this.#s = t, this.#a = e, this.getWorldMatrix = n, this.getCanvasChildren = a, this.getWorldCoords = o, this.getMarqueeCoords = h;
     const c = Object.getPrototypeOf(this);
-    for (const u of Object.getOwnPropertyNames(c)) {
-      const f = this[u];
-      typeof f == "function" && u !== "constructor" && (this[u] = f.bind(this));
+    for (const l of Object.getOwnPropertyNames(c)) {
+      const u = this[l];
+      typeof u == "function" && l !== "constructor" && (this[l] = u.bind(this));
     }
   }
   // add, remove selected
   add(t) {
     t.forEach((e) => {
-      this.#i.has(e) || (this.#i.add(e), this.#e.add(new he(e)));
-    }), this.#e.size > 1 && (this.#e.forEach((e) => e.setPassive()), this.#t || (this.#t = new Ti([])), this.selected.forEach((e) => this.#t.add(e)));
+      this.#i.has(e) || (this.#i.add(e), this.#e.add(new ce(e)));
+    }), this.#e.size > 1 && (this.#e.forEach((e) => e.setPassive()), this.#t || (this.#t = new _i([])), this.selected.forEach((e) => this.#t.add(e)));
   }
   remove(t) {
     t.forEach((e) => {
@@ -1226,7 +1226,7 @@ class Ii {
     this.remove(e);
     for (const i of e)
       i.destroy();
-    this.#s.push(pi(t, e));
+    this.#s.push(xi(t, e));
   }
   /**
    * Checks first if there is a hit in a multibounding and its handles. If not, check the one bounding box that is active.
@@ -1252,12 +1252,12 @@ class Ii {
     if (this.#t) {
       const i = this.#t.hitTest(t, e, this.getWorldMatrix());
       if (i)
-        return this.#t.scale[0] * this.#t.scale[1] < 0 ? ne(i) : i;
+        return this.#t.scale[0] * this.#t.scale[1] < 0 ? ae(i) : i;
     }
     for (const i of this.#e.values()) {
       const r = i.hitTest(t, e, this.getWorldMatrix());
       if (r)
-        return i.target.sx * i.target.sy < 0 ? ne(r) : r;
+        return i.target.sx * i.target.sy < 0 ? ae(r) : r;
     }
   }
   /**
@@ -1315,25 +1315,25 @@ class Ii {
         this.getWorldCoords
       );
       this.#s.push(
-        le(e, t, this.multiBoundingBox)
+        ue(e, t, this.multiBoundingBox)
       );
     } else {
       const e = [];
       for (const i of this.boundingBoxes)
         e.push(i.flip(t));
-      this.#s.push(le(e, t));
+      this.#s.push(ue(e, t));
     }
     this.#a.emit(N.Change);
   }
   alignSelection(t) {
     if (!this.multiBoundingBox) return;
     const e = this.multiBoundingBox.align(t);
-    this.#s.push($t(e)), this.#a.emit(N.Change);
+    this.#s.push(jt(e)), this.#a.emit(N.Change);
   }
   normalize(t, e = "first") {
     if (!this.multiBoundingBox) return;
     const i = this.multiBoundingBox.normalize(t, e);
-    this.#s.push($t(i)), this.#a.emit(N.Change);
+    this.#s.push(jt(i)), this.#a.emit(N.Change);
   }
   onPointerMove(t, e, i, r, n, a, o, h) {
     if (a())
@@ -1342,10 +1342,10 @@ class Ii {
       this.resize(i, r, n);
     else if (this.marqueeBox) {
       this.marqueeBox.resize(i, r, h());
-      const c = this.getCanvasChildren(), u = this.marqueeBox.getBoundingBox(this.getMarqueeCoords);
-      for (const f of c) {
-        const g = f.getBoundingBox();
-        dt.isColliding(g, u) && !this.#i.has(f) ? this.add([f]) : !dt.isColliding(g, u) && this.#i.has(f) && this.remove([f]);
+      const c = this.getCanvasChildren(), l = this.marqueeBox.getBoundingBox(this.getMarqueeCoords);
+      for (const u of c) {
+        const g = u.getBoundingBox();
+        et.isColliding(g, l) && !this.#i.has(u) ? this.add([u]) : !et.isColliding(g, l) && this.#i.has(u) && this.remove([u]);
       }
     } else
       this.move(i, r);
@@ -1378,8 +1378,8 @@ class Ii {
   //     }
   // }
 }
-var ft = /* @__PURE__ */ ((s) => (s[s.SELECT = 0] = "SELECT", s[s.PAN = 1] = "PAN", s))(ft || {});
-const Pi = {
+var mt = /* @__PURE__ */ ((s) => (s[s.SELECT = 0] = "SELECT", s[s.PAN = 1] = "PAN", s))(mt || {});
+const Ai = {
   TOP: "ns-resize",
   BOTTOM: "ns-resize",
   LEFT: "ew-resize",
@@ -1390,12 +1390,12 @@ const Pi = {
   BOTTOMLEFT: "nesw-resize",
   CENTER: "grab"
 };
-class Ai {
+class Li {
   constructor(t) {
     for (const e in t)
       e in t && t[e] !== void 0 && (this[e] = t[e]);
     this.onPointerDown = this.onPointerDown.bind(this), this.onPointerMoveWhileDown = this.onPointerMoveWhileDown.bind(this), this.onPointerUp = this.onPointerUp.bind(this), this.addOnPointerMove(), this.addOnWheel(t.onWheel), this.addOnPointerDown(), window.addEventListener("copy", async (e) => {
-      e.preventDefault(), !this.isContextMenuActive() && await _e(this.getSelected());
+      e.preventDefault(), !this.isContextMenuActive() && await Re(this.getSelected());
     }), window.addEventListener("paste", async (e) => {
       e.preventDefault(), !this.isContextMenuActive() && await t.paste(
         this.state.lastPointerPos.x,
@@ -1417,7 +1417,7 @@ class Ai {
         this.state.lastPointerPos.x,
         this.state.lastPointerPos.y
       );
-      this.setCursorStyle(Pi[e] || "default");
+      this.setCursorStyle(Ai[e] || "default");
     });
   }
   addOnWheel(t) {
@@ -1473,7 +1473,7 @@ class Ai {
       })).filter(
         (e) => e.start.x !== e.end.x || e.start.y !== e.end.y || e.start.sx !== e.end.sx || e.start.sy !== e.end.sy
       );
-      t.length && this.history.push($t(t));
+      t.length && this.history.push(jt(t));
     }
     this.currentTransform = void 0, this.state.resizingDirection = null, this.closeMarquee(), this.eventHub.emit("save");
   }
@@ -1481,7 +1481,7 @@ class Ai {
     const i = this.getChildren();
     for (let r = i.length - 1; r >= 0; r--) {
       const n = i[r];
-      if (n instanceof lt && n.hitTest && n.hitTest(t, e))
+      if (n instanceof ut && n.hitTest && n.hitTest(t, e))
         return n;
     }
     return null;
@@ -1525,7 +1525,7 @@ class Oi {
     return t.key.toLowerCase() === "s" && t.ctrlKey;
   }
 }
-class Li {
+class Di {
   #s = !1;
   get isActive() {
     return this.#s;
@@ -1542,22 +1542,22 @@ class Li {
     }), n("contextmenu", this.customContextMenu);
   }
 }
-function fe(s, t) {
+function me(s, t) {
   s.renderOrder = t.renderOrder;
 }
-function Di(s, t = "Order") {
+function Bi(s, t = "Order") {
   return {
     label: t,
     do() {
-      for (const e of s) fe(e.ref, e.end);
+      for (const e of s) me(e.ref, e.end);
     },
     undo() {
-      for (const e of s) fe(e.ref, e.start);
+      for (const e of s) me(e.ref, e.start);
     }
   };
 }
-class Bi {
-  constructor(t = ft.SELECT) {
+class zi {
+  constructor(t = mt.SELECT) {
     this.lastPointerPos = { x: 0, y: 0 }, this.startWorldX = 0, this.startWorldY = 0, this.lastWorldX = 0, this.lastWorldY = 0, this.resizingDirection = null, this.mode = t;
   }
   // computed
@@ -1575,7 +1575,7 @@ class Bi {
     this.mode = t;
   }
   toggleMode() {
-    this.mode = this.mode === ft.PAN ? ft.SELECT : ft.PAN;
+    this.mode = this.mode === mt.PAN ? mt.SELECT : mt.PAN;
   }
   setResizingDirection(t) {
     this.resizingDirection = t;
@@ -1591,10 +1591,10 @@ class Bi {
     this.lastWorldX = t, this.lastWorldY = e;
   }
 }
-class zi {
+class ki {
   // reduces constant work to re-render if there are no changes
   constructor() {
-    this.translation = [0, 0], this.angleRadians = 0, this.scale = [1, 1], this.localMatrix = M.identity(), this.worldMatrix = M.identity(), this.children = [], this.parent = null, this.renderDirtyFlag = !0, Me(this, {
+    this.translation = [0, 0], this.angleRadians = 0, this.scale = [1, 1], this.localMatrix = E.identity(), this.worldMatrix = E.identity(), this.children = [], this.parent = null, this.renderDirtyFlag = !0, Ee(this, {
       translation: B.struct,
       angleRadians: B,
       scale: B.struct,
@@ -1603,11 +1603,11 @@ class zi {
       children: B.shallow,
       parent: B.ref,
       renderDirtyFlag: B,
-      x: st,
-      y: st,
-      scaleX: st,
-      scaleY: st,
-      dirty: st,
+      x: nt,
+      y: nt,
+      scaleX: nt,
+      scaleY: nt,
+      dirty: nt,
       setTranslation: b,
       setScale: b,
       flipVertical: b,
@@ -1700,11 +1700,11 @@ class zi {
     this.renderDirtyFlag && (this.renderDirtyFlag = !1, this.updateLocalMatrix());
   }
   updateLocalMatrix() {
-    const t = M.translation(this.translation[0], this.translation[1]), e = M.rotation(this.angleRadians), i = M.scaling(this.scale[0], this.scale[1]);
-    this.localMatrix = M.multiply(M.multiply(t, e), i);
+    const t = E.translation(this.translation[0], this.translation[1]), e = E.rotation(this.angleRadians), i = E.scaling(this.scale[0], this.scale[1]);
+    this.localMatrix = E.multiply(E.multiply(t, e), i);
   }
   updateWorldMatrix(t) {
-    this.worldMatrix = t ? M.multiply(t, this.localMatrix) : this.localMatrix.slice();
+    this.worldMatrix = t ? E.multiply(t, this.localMatrix) : this.localMatrix.slice();
     const e = this.worldMatrix;
     this.children.forEach((i) => {
       i.updateWorldMatrix(e);
@@ -1714,7 +1714,7 @@ class zi {
     this.worldMatrix = t;
   }
 }
-class Ie {
+class Pe {
   get x() {
     return this.state.x;
   }
@@ -1788,7 +1788,7 @@ class Ie {
     return this.state.clearChildren();
   }
   constructor() {
-    this.state = new zi(), this.setWorldMatrix = this.setWorldMatrix.bind(this), this.updateWorldMatrix = this.updateWorldMatrix.bind(this);
+    this.state = new ki(), this.setWorldMatrix = this.setWorldMatrix.bind(this), this.updateWorldMatrix = this.updateWorldMatrix.bind(this);
   }
   appendChild(t) {
     return t.setParent(this), !t._emitter && this._emitter && (t._emitter = this._emitter), t;
@@ -1813,7 +1813,7 @@ class Ie {
     return this._emitter.emit(t.type, t), !t.defaultPrevented;
   }
 }
-class Pe extends Ie {
+class Ae extends Pe {
   constructor() {
     super(...arguments), this.initialized = !1;
   }
@@ -1831,9 +1831,9 @@ class Pe extends Ie {
     t.uniform2f(this.resolutionLocation, t.canvas.width, t.canvas.height), t.uniformMatrix3fv(this.matrixLocation, !1, this.worldMatrix);
   }
 }
-const Ut = class Ut extends Pe {
+const Wt = class Wt extends Ae {
   constructor(t, e, i = 1, r = 1) {
-    super(), this._seq = Ut._seqCounter++, this.culled = !1, this._renderOrder = 0, this.color = [1, 0, 0.5, 1], this.setTranslation(t, e), this.setScale(i, r);
+    super(), this._seq = Wt._seqCounter++, this.culled = !1, this._renderOrder = 0, this.color = [1, 0, 0.5, 1], this.setTranslation(t, e), this.setScale(i, r);
   }
   get renderOrder() {
     return this._renderOrder;
@@ -1869,9 +1869,9 @@ const Ut = class Ut extends Pe {
     this.positionBuffer && (this.positionBuffer = void 0), this.initialized = !1;
   }
 };
-Ut._seqCounter = 0;
-let lt = Ut;
-class Z extends lt {
+Wt._seqCounter = 0;
+let ut = Wt;
+class Z extends ut {
   constructor(t) {
     super(t.x, t.y, t.sx, t.sy), this._width = t.width ?? 100, this._height = t.height ?? 100;
   }
@@ -1919,7 +1919,7 @@ class Z extends lt {
    */
   getBoundingBox() {
     const t = this.state.translation[0], e = t + this.width * this.state.scaleX, i = this.state.translation[1], r = i + this.height * this.state.scaleY, n = Math.min(t, e), a = Math.max(t, e), o = Math.min(i, r), h = Math.max(i, r);
-    return this.AABB = new dt(n, o, a, h), this.AABB;
+    return this.AABB = new et(n, o, a, h), this.AABB;
   }
   getEdge() {
     const t = this.x, e = this.y;
@@ -1931,11 +1931,11 @@ class Z extends lt {
     };
   }
   hitTest(t, e) {
-    const [i, r] = J(this.worldMatrix), [n, a] = Et(this.worldMatrix), [o, h] = U(this.parent.worldMatrix, t, e), [c, u] = U(this.worldMatrix), f = this.width * i * n, g = this.height * r * a, m = Math.min(c, c + f), w = Math.max(c, c + f), x = Math.min(u, u + g), C = Math.max(u, u + g);
+    const [i, r] = tt(this.worldMatrix), [n, a] = Tt(this.worldMatrix), [o, h] = U(this.parent.worldMatrix, t, e), [c, l] = U(this.worldMatrix), u = this.width * i * n, g = this.height * r * a, m = Math.min(c, c + u), w = Math.max(c, c + u), x = Math.min(l, l + g), C = Math.max(l, l + g);
     return o >= m && o <= w && h >= x && h <= C;
   }
 }
-class xt extends Z {
+class wt extends Z {
   constructor(t) {
     super(t), this.texCoordArray = new Float32Array([
       0,
@@ -2020,8 +2020,8 @@ class xt extends Z {
         typeof OffscreenCanvas < "u" ? h = new OffscreenCanvas(a, o) : (h = document.createElement("canvas"), h.width = a, h.height = o);
         const c = h.getContext("2d");
         c.clearRect(0, 0, a, o);
-        const u = Math.min(a / i, o / r), f = Math.round(i * u), g = Math.round(r * u), m = Math.round((a - f) / 2), w = Math.round((o - g) / 2);
-        c.drawImage(this._image, 0, 0, i, r, m, w, f, g), this.lowResBitmap = await createImageBitmap(h), this.setLowResTextureFromBitmap(t, this.lowResBitmap);
+        const l = Math.min(a / i, o / r), u = Math.round(i * l), g = Math.round(r * l), m = Math.round((a - u) / 2), w = Math.round((o - g) / 2);
+        c.drawImage(this._image, 0, 0, i, r, m, w, u, g), this.lowResBitmap = await createImageBitmap(h), this.setLowResTextureFromBitmap(t, this.lowResBitmap);
       } catch (e) {
         console.error("Failed to create/upload low-res image", e);
       }
@@ -2150,8 +2150,8 @@ class xt extends Z {
     }
   }
 }
-var Tt = /* @__PURE__ */ ((s) => (s[s.NONE = 0] = "NONE", s[s.GRID = 1] = "GRID", s))(Tt || {});
-class Ae extends Pe {
+var _t = /* @__PURE__ */ ((s) => (s[s.NONE = 0] = "NONE", s[s.GRID = 1] = "GRID", s))(_t || {});
+class Le extends Ae {
   constructor() {
     super(...arguments), this.buffer = null, this.vertexCount = 0, this.gridType = 1, this.zoom = 1;
   }
@@ -2171,7 +2171,7 @@ class Ae extends Pe {
       this.vertexCount = c.length / 2, t.bindBuffer(t.ARRAY_BUFFER, this.buffer), t.bufferData(t.ARRAY_BUFFER, c, t.STATIC_DRAW);
     }
     this.initialized || (this.setUpVertexData(t, e), this.setUpUniforms(t, e), this.initialized = !0);
-    const i = t.drawingBufferWidth, r = t.drawingBufferHeight, n = M.inverse(M.projection(i, r)), a = M.inverse(this.worldMatrix), o = M.multiply(a, n);
+    const i = t.drawingBufferWidth, r = t.drawingBufferHeight, n = E.inverse(E.projection(i, r)), a = E.inverse(this.worldMatrix), o = E.multiply(a, n);
     this.viewProjectionInvLocation && t.uniformMatrix3fv(
       this.viewProjectionInvLocation,
       !1,
@@ -2199,10 +2199,10 @@ class Ae extends Pe {
     ), t.uniformMatrix3fv(this.viewProjectionInvLocation, !1, i), t.uniform1f(this.zoomScaleLocation, this.zoom), t.uniform1f(this.checkboardStyleLocation, 1);
   }
 }
-const ki = 0.02, Ui = 20;
-class Wi {
+const Ui = 0.02, Wi = 20;
+class Fi {
   constructor(t, e, i, r) {
-    this.viewportX = 0, this.viewportY = 0, this.state = t, this.updateCameraPos = this.updateCameraPos.bind(this), this.updateZoom = this.updateZoom.bind(this), this.onWheel = this.onWheel.bind(this), this.worldToCamera = this.worldToCamera.bind(this), this.getWorldCoords = r, this.setWorldMatrix = e, this.updateWorldMatrix = i, this.updateReaction = Qe(
+    this.viewportX = 0, this.viewportY = 0, this.state = t, this.updateCameraPos = this.updateCameraPos.bind(this), this.updateZoom = this.updateZoom.bind(this), this.onWheel = this.onWheel.bind(this), this.worldToCamera = this.worldToCamera.bind(this), this.getWorldCoords = r, this.setWorldMatrix = e, this.updateWorldMatrix = i, this.updateReaction = Je(
       () => this.state.stateVector,
       () => this.updateViewMatrix()
     ), this.updateViewMatrix();
@@ -2221,7 +2221,7 @@ class Wi {
       this.state.width + this.viewportX,
       this.state.height + this.viewportY
     );
-    return new dt(t, e, i, r);
+    return new et(t, e, i, r);
   }
   onWheel(t) {
     t.preventDefault();
@@ -2237,7 +2237,7 @@ class Wi {
   updateZoom(t, e, i) {
     const [r, n] = this.getWorldCoords(t, e);
     this.state.setZoom(
-      Math.min(Ui, Math.max(ki, this.state.zoom * i))
+      Math.min(Wi, Math.max(Ui, this.state.zoom * i))
     );
     const [a, o] = this.getWorldCoords(t, e);
     this.state.incrementPosition(r - a, n - o);
@@ -2250,8 +2250,8 @@ class Wi {
     this.updateReaction && (this.updateReaction(), this.updateReaction = void 0);
   }
 }
-const me = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjYjNiM2IzIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xLjUgNmEyLjI1IDIuMjUgMCAwIDEgMi4yNS0yLjI1aDE2LjVBMi4yNSAyLjI1IDAgMCAxIDIyLjUgNnYxMmEyLjI1IDIuMjUgMCAwIDEtMi4yNSAyLjI1SDMuNzVBMi4yNSAyLjI1IDAgMCAxIDEuNSAxOHpNMyAxNi4wNlYxOGMwIC40MTQuMzM2Ljc1Ljc1Ljc1aDE2LjVBLjc1Ljc1IDAgMCAwIDIxIDE4di0xLjk0bC0yLjY5LTIuNjg5YTEuNSAxLjUgMCAwIDAtMi4xMiAwbC0uODguODc5bC45Ny45N2EuNzUuNzUgMCAxIDEtMS4wNiAxLjA2bC01LjE2LTUuMTU5YTEuNSAxLjUgMCAwIDAtMi4xMiAwem0xMC4xMjUtNy44MWExLjEyNSAxLjEyNSAwIDEgMSAyLjI1IDBhMS4xMjUgMS4xMjUgMCAwIDEtMi4yNSAwIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=", it = 240;
-function ge(s) {
+const ge = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjYjNiM2IzIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xLjUgNmEyLjI1IDIuMjUgMCAwIDEgMi4yNS0yLjI1aDE2LjVBMi4yNSAyLjI1IDAgMCAxIDIyLjUgNnYxMmEyLjI1IDIuMjUgMCAwIDEtMi4yNSAyLjI1SDMuNzVBMi4yNSAyLjI1IDAgMCAxIDEuNSAxOHpNMyAxNi4wNlYxOGMwIC40MTQuMzM2Ljc1Ljc1Ljc1aDE2LjVBLjc1Ljc1IDAgMCAwIDIxIDE4di0xLjk0bC0yLjY5LTIuNjg5YTEuNSAxLjUgMCAwIDAtMi4xMiAwbC0uODguODc5bC45Ny45N2EuNzUuNzUgMCAxIDEtMS4wNiAxLjA2bC01LjE2LTUuMTU5YTEuNSAxLjUgMCAwIDAtMi4xMiAwem0xMC4xMjUtNy44MWExLjEyNSAxLjEyNSAwIDEgMSAyLjI1IDBhMS4xMjUgMS4xMjUgMCAwIDEtMi4yNSAwIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=", rt = 240;
+function pe(s) {
   return {
     x: s.x ?? 0,
     y: s.y ?? 0,
@@ -2259,37 +2259,37 @@ function ge(s) {
     sy: s.sy ?? 1
   };
 }
-function Nt(s) {
+function Yt(s) {
   return s.children.map(Oe);
 }
 function Oe(s) {
-  return s instanceof xt ? {
+  return s instanceof wt ? {
     type: "Img",
     id: s.seq,
     renderOrder: s.renderOrder,
-    transform: ge(s),
+    transform: pe(s),
     width: s.width,
     height: s.height,
     fileId: s.fileId,
-    children: s.children?.length ? Nt(s) : void 0
+    children: s.children?.length ? Yt(s) : void 0
   } : s instanceof Z ? {
     type: "Rect",
     id: s.seq,
     renderOrder: s.renderOrder,
-    transform: ge(s),
+    transform: pe(s),
     width: s.width,
     height: s.height,
     color: s.color,
-    children: s.children?.length ? Nt(s) : void 0
-  } : s instanceof Ae ? {
+    children: s.children?.length ? Yt(s) : void 0
+  } : s instanceof Le ? {
     type: "Grid",
     style: s.gridType
   } : {
     type: "Renderable",
-    children: s.children?.length ? Nt(s) : void 0
+    children: s.children?.length ? Yt(s) : void 0
   };
 }
-function jt(s, t) {
+function Vt(s, t) {
   const { gl: e } = s;
   return {
     version: 1,
@@ -2307,7 +2307,7 @@ function jt(s, t) {
     files: t
   };
 }
-async function Vt(s, t, e, i) {
+async function Zt(s, t, e, i) {
   t.children.length = 0, s.camera && (t.camera.state.setZoom(s.camera.zoom), t.camera.state.setX(s.camera.x), t.camera.state.setY(s.camera.y));
   async function r(n, a) {
     let o;
@@ -2325,28 +2325,28 @@ async function Vt(s, t, e, i) {
         try {
           h = s.files && Array.isArray(s.files) ? s.files.find(
             (m) => m.id === n.fileId
-          )?.dataURL ?? me : me, i && i(h);
-          const c = n.width, u = n.height, f = await Gi(
+          )?.dataURL ?? ge : ge, i && i(h);
+          const c = n.width, l = n.height, u = await Xi(
             h,
             c * n.transform.sx,
-            u * n.transform.sy
+            l * n.transform.sy
           );
-          o = new xt({
+          o = new wt({
             x: n.transform.x,
             y: n.transform.y,
-            src: f,
+            src: u,
             width: c,
-            height: u
+            height: l
           }), e(n.fileId).then((g) => {
             o.src = g.dataURL;
-          }).catch((g) => console.error("Image not loaded", g)), o.fileId = n.fileId ?? await Kt(h), o.setScale(n.transform.sx, n.transform.sy), t.appendChild(o), typeof n.renderOrder == "number" && (o.renderOrder = n.renderOrder);
+          }).catch((g) => console.error("Image not loaded", g)), o.fileId = n.fileId ?? await Qt(h), o.setScale(n.transform.sx, n.transform.sy), t.appendChild(o), typeof n.renderOrder == "number" && (o.renderOrder = n.renderOrder);
         } catch {
           console.error(`Failed to match image to restore with source: ${h}`);
         } finally {
           break;
         }
       case "Grid":
-        a instanceof zt && (a.grid.gridType = n.style);
+        a instanceof kt && (a.grid.gridType = n.style);
         break;
     }
     if (n.children)
@@ -2354,33 +2354,33 @@ async function Vt(s, t, e, i) {
   }
   return await r(s.root, t), t;
 }
-async function Fi(s) {
+async function Gi(s) {
   const t = new Image();
   return t.crossOrigin = "anonymous", new Promise((e, i) => {
     t.onload = () => e(t), t.onerror = (r) => i(r), t.src = s;
   });
 }
-async function Gi(s, t, e, i = "#d6d6d6ff") {
+async function Xi(s, t, e, i = "#d6d6d6ff") {
   let r = null, n;
   s instanceof Blob ? (r = URL.createObjectURL(s), n = r) : n = s;
   try {
     let a = null;
     try {
-      a = await Fi(n);
+      a = await Gi(n);
     } catch {
     }
-    const o = t && t > 0 ? t : a?.naturalWidth ?? it, h = e && e > 0 ? e : a?.naturalHeight ?? it, c = document.createElement("canvas");
+    const o = t && t > 0 ? t : a?.naturalWidth ?? rt, h = e && e > 0 ? e : a?.naturalHeight ?? rt, c = document.createElement("canvas");
     c.width = o, c.height = h;
-    const u = c.getContext("2d");
-    if (u.fillStyle = i, u.fillRect(0, 0, o, h), a) {
-      const f = Math.min(
+    const l = c.getContext("2d");
+    if (l.fillStyle = i, l.fillRect(0, 0, o, h), a) {
+      const u = Math.min(
         o / a.naturalWidth,
         h / a.naturalHeight
-      ), g = a.naturalHeight * f, m = a.naturalWidth * f;
-      let w = it, x = it;
-      (it > g || it > m) && (w = m, x = g);
+      ), g = a.naturalHeight * u, m = a.naturalWidth * u;
+      let w = rt, x = rt;
+      (rt > g || rt > m) && (w = m, x = g);
       const C = Math.round((o - w) / 2), v = Math.round((h - x) / 2);
-      u.drawImage(
+      l.drawImage(
         a,
         0,
         0,
@@ -2397,67 +2397,67 @@ async function Gi(s, t, e, i = "#d6d6d6ff") {
     r && URL.revokeObjectURL(r);
   }
 }
-var W, F, K, at, y, G, ot, Q, X, V, P, ht, Wt, ct;
-const R = class R extends Ie {
+var W, F, Q, ht, y, G, ct, J, X, V, P, dt, Ft, lt;
+const R = class R extends Pe {
   constructor(e, i, r, n, a, o) {
     super();
-    L(this, W);
-    L(this, F);
-    L(this, K);
-    L(this, at);
-    L(this, y);
-    L(this, G);
-    L(this, ot);
-    L(this, Q);
-    L(this, X);
-    L(this, V);
-    L(this, P);
-    L(this, ht);
-    L(this, Wt);
-    L(this, ct);
-    I(this, V, !0), this.orderDirty = !0, this.renderList = [], I(this, W, e), I(this, F, r), I(this, K, i), I(this, X, new Ae()), I(this, y, e.getContext("webgl", {
+    O(this, W);
+    O(this, F);
+    O(this, Q);
+    O(this, ht);
+    O(this, y);
+    O(this, G);
+    O(this, ct);
+    O(this, J);
+    O(this, X);
+    O(this, V);
+    O(this, P);
+    O(this, dt);
+    O(this, Ft);
+    O(this, lt);
+    I(this, V, !0), this.orderDirty = !0, this.renderList = [], I(this, W, e), I(this, F, r), I(this, Q, i), I(this, X, new Le()), I(this, y, e.getContext("webgl", {
       alpha: !0,
       premultipliedAlpha: !1
-    })), l(this, y).enable(l(this, y).BLEND), l(this, y).blendFunc(l(this, y).SRC_ALPHA, l(this, y).ONE_MINUS_SRC_ALPHA), l(this, y).getExtension("OES_standard_derivatives"), l(this, y).enable(l(this, y).DEPTH_TEST), l(this, y).depthFunc(l(this, y).LEQUAL), I(this, G, Xt(l(this, y), vi, bi)), I(this, ot, Xt(l(this, y), Mi, Ei)), I(this, Q, Xt(l(this, y), Ci, Si)), this.writeToStorage = n, this.saveImgFileToStorage = a, this.getContainerDimension = o, this.engine = this.engine.bind(this), this.getBoundingClientRect = this.getBoundingClientRect.bind(this), this.appendChild = this.appendChild.bind(this), this.addImageToCanvas = this.addImageToCanvas.bind(this), this.setShapeZOrder = this.setShapeZOrder.bind(this), this.toggleGrid = this.toggleGrid.bind(this), this.changeMode = this.changeMode.bind(this), this.getSelected = this.getSelected.bind(this), this.updateZoomByFixedAmount = this.updateZoomByFixedAmount.bind(this), this.assignEventListener = this.assignEventListener.bind(this), this.getWorldsCoordsFromCanvas = (g, m) => wt(g, m, this);
-    const h = (g, m) => wt(
+    })), f(this, y).enable(f(this, y).BLEND), f(this, y).blendFunc(f(this, y).SRC_ALPHA, f(this, y).ONE_MINUS_SRC_ALPHA), f(this, y).getExtension("OES_standard_derivatives"), f(this, y).enable(f(this, y).DEPTH_TEST), f(this, y).depthFunc(f(this, y).LEQUAL), I(this, G, Ht(f(this, y), bi, Ci)), I(this, ct, Ht(f(this, y), Ei, Ti)), I(this, J, Ht(f(this, y), Si, Mi)), this.writeToStorage = n, this.saveImgFileToStorage = a, this.getContainerDimension = o, this.engine = this.engine.bind(this), this.getBoundingClientRect = this.getBoundingClientRect.bind(this), this.appendChild = this.appendChild.bind(this), this.addImageToCanvas = this.addImageToCanvas.bind(this), this.setShapeZOrder = this.setShapeZOrder.bind(this), this.toggleGrid = this.toggleGrid.bind(this), this.changeMode = this.changeMode.bind(this), this.getSelected = this.getSelected.bind(this), this.updateZoomByFixedAmount = this.updateZoomByFixedAmount.bind(this), this.assignEventListener = this.assignEventListener.bind(this), this.getWorldsCoordsFromCanvas = (g, m) => K(g, m, this);
+    const h = (g, m) => K(
       g + this.camera.viewportX,
       m + this.camera.viewportY,
       this
     );
-    this.exportState = this.exportState.bind(this), this.importState = this.importState.bind(this), this.clearChildren = this.clearChildren.bind(this), I(this, P, new Ii(
+    this.exportState = this.exportState.bind(this), this.importState = this.importState.bind(this), this.clearChildren = this.clearChildren.bind(this), I(this, P, new Pi(
       i,
       r,
       this.gl,
-      l(this, G),
+      f(this, G),
       () => this.worldMatrix,
       () => this.children,
       this.getWorldsCoordsFromCanvas,
       h
     ));
-    const c = new Ri({});
-    I(this, at, new Wi(
+    const c = new Ii({});
+    I(this, ht, new Fi(
       c,
       this.setWorldMatrix,
       this.updateWorldMatrix,
       this.getWorldsCoordsFromCanvas
-    )), I(this, Wt, new Oi(
+    )), I(this, Ft, new Oi(
       i,
       r,
       () => this.selectionManager.deleteSelected(this),
       this.assignEventListener
-    )), I(this, ct, new Li(
+    )), I(this, lt, new Di(
       r,
       this.selectionManager.isMultiBoundingBoxHit,
       this.selectionManager.isBoundingBoxHit,
       this.getWorldsCoordsFromCanvas,
       this.assignEventListener
     ));
-    const u = new Bi(), f = {
+    const l = new zi(), u = {
       history: i,
       eventHub: r,
-      state: u,
-      isContextMenuActive: () => l(this, ct).isActive,
-      getSelected: () => l(this, P).selected,
+      state: l,
+      isContextMenuActive: () => f(this, lt).isActive,
+      getSelected: () => f(this, P).selected,
       getChildren: () => this.children,
       getWorldMatrix: () => this.worldMatrix,
       getCanvasGlobalClick: () => this.isGlobalClick,
@@ -2466,10 +2466,10 @@ const R = class R extends Ie {
       updateCameraPos: this.camera.updateCameraPos,
       onWheel: this.camera.onWheel,
       setCursorStyle: (g) => e.style.cursor = g,
-      paste: (g, m) => Re(g, m, this, i),
+      paste: (g, m) => Ie(g, m, this, i),
       assignEventListener: this.assignEventListener,
-      closeMarquee: l(this, P).clearMarquee,
-      selectionPointerMove: (g, m, w, x, C) => l(this, P).onPointerMove(
+      closeMarquee: f(this, P).clearMarquee,
+      selectionPointerMove: (g, m, w, x, C) => f(this, P).onPointerMove(
         g,
         m,
         w,
@@ -2486,47 +2486,47 @@ const R = class R extends Ie {
       isSelection: this.selectionManager.isRectSelected,
       hitTestAdjustedCorner: this.selectionManager.hitTestAdjustedCorner
     };
-    I(this, ht, new Ai(f)), l(this, F).on("save", this.writeToStorage);
+    I(this, dt, new Li(u)), f(this, F).on("save", this.writeToStorage);
   }
   // Call this whenever children/layers/z-order change
   markOrderDirty() {
     this.orderDirty = !0;
   }
   get gl() {
-    return l(this, y);
+    return f(this, y);
   }
   get grid() {
-    return l(this, X);
+    return f(this, X);
   }
   get history() {
-    return l(this, K);
+    return f(this, Q);
   }
   get eventHub() {
-    return l(this, F);
+    return f(this, F);
   }
   get pointerEventManager() {
-    return l(this, ht);
+    return f(this, dt);
   }
   get selectionManager() {
-    return l(this, P);
+    return f(this, P);
   }
   get contextMenuManager() {
-    return l(this, ct);
+    return f(this, lt);
   }
   get canvas() {
-    return l(this, W);
+    return f(this, W);
   }
   get camera() {
-    return l(this, at);
+    return f(this, ht);
   }
   get isGlobalClick() {
-    return l(this, V);
+    return f(this, V);
   }
   set isGlobalClick(e) {
     I(this, V, e);
   }
   get basicShapeProgram() {
-    return l(this, G);
+    return f(this, G);
   }
   engine() {
     return this;
@@ -2538,99 +2538,104 @@ const R = class R extends Ie {
     return this.renderList.length;
   }
   appendChild(e) {
-    if (super.appendChild(e), e instanceof lt) {
+    if (super.appendChild(e), e instanceof ut) {
       const i = this.children.map((n) => n.renderOrder), r = i.length ? Math.max(...i) : 0;
       e.renderOrder = r + 1;
     }
     return this.markOrderDirty(), e;
   }
   removeChild(e) {
-    this.state.removeChild(e), l(this, P) && l(this, P).remove([e]), e.destroy(), this.markOrderDirty();
+    this.state.removeChild(e), f(this, P) && f(this, P).remove([e]), e.destroy(), this.markOrderDirty();
   }
   getChild(e) {
     return this.state.getChild(e);
   }
   updateWorldMatrix() {
-    l(this, X).updateWorldMatrix(this.worldMatrix), this.children.forEach((e) => {
+    f(this, X).updateWorldMatrix(this.worldMatrix), this.children.forEach((e) => {
       e.updateWorldMatrix(this.worldMatrix);
-    }), l(this, P).update();
+    }), f(this, P).update();
   }
   render() {
-    l(this, y).clearColor(0, 0, 0, 0), l(this, y).clear(l(this, y).COLOR_BUFFER_BIT | l(this, y).DEPTH_BUFFER_BIT), l(this, y).viewport(0, 0, l(this, y).canvas.width, l(this, y).canvas.height);
+    f(this, y).clearColor(0, 0, 0, 0), f(this, y).clear(f(this, y).COLOR_BUFFER_BIT | f(this, y).DEPTH_BUFFER_BIT), f(this, y).viewport(0, 0, f(this, y).canvas.width, f(this, y).canvas.height);
     const e = this.canvas.parentElement.getBoundingClientRect();
     this.camera.setViewPortDimension(
       e.width,
       e.height
-    ), l(this, y).useProgram(l(this, Q));
-    const i = l(this, y).getUniformLocation(l(this, Q), "u_z");
-    l(this, y).uniform1f(i, 0), l(this, X).render(l(this, y), l(this, Q));
+    ), f(this, y).useProgram(f(this, J));
+    const i = f(this, y).getUniformLocation(f(this, J), "u_z");
+    f(this, y).uniform1f(i, 0), f(this, X).render(f(this, y), f(this, J));
     const r = this.camera.getBoundingBox();
     this.renderList = [];
-    for (const n of this.children)
-      dt.isColliding(r, n.getBoundingBox()) ? (this.renderList.push(n), n.culled = !1) : n.culled = !0;
-    this.renderList.forEach((n) => {
-      if (n instanceof xt) {
-        const a = n.determineIfLowRes(
-          r,
+    for (const l of this.children)
+      et.isColliding(r, l.getBoundingBox()) ? (this.renderList.push(l), l.culled = !1) : l.culled = !0;
+    const [n, a] = K(0, 0, this), [o, h] = K(
+      window.screen.width,
+      window.screen.height,
+      this
+    ), c = new et(n, a, o, h);
+    this.renderList.forEach((l) => {
+      if (l instanceof wt) {
+        const u = l.determineIfLowRes(
+          c,
           this.camera.state.zoom
         );
-        n.setUseLowRes(a, this.gl);
+        l.setUseLowRes(u, this.gl);
       }
     });
-    for (const n of this.renderList) {
-      let a;
-      n instanceof xt ? a = l(this, ot) : n instanceof lt && (a = l(this, G)), l(this, y).useProgram(a);
-      const o = l(this, y).getUniformLocation(a, "u_z");
-      l(this, y).uniform1f(o, n.getZ()), n.render(l(this, y), a);
+    for (const l of this.renderList) {
+      let u;
+      l instanceof wt ? u = f(this, ct) : l instanceof ut && (u = f(this, G)), f(this, y).useProgram(u);
+      const g = f(this, y).getUniformLocation(u, "u_z");
+      f(this, y).uniform1f(g, l.getZ()), l.render(f(this, y), u);
     }
-    l(this, P).render(l(this, G));
+    f(this, P).render(f(this, G));
   }
   destroy() {
-    l(this, y).deleteProgram(l(this, G)), l(this, y).deleteProgram(l(this, ot)), this.children.forEach((e) => {
+    f(this, y).deleteProgram(f(this, G)), f(this, y).deleteProgram(f(this, ct)), this.children.forEach((e) => {
       "destroy" in e && e.destroy();
     }), this.clearChildren();
   }
   getDOM() {
-    return l(this, W);
+    return f(this, W);
   }
   assignEventListener(e, i, r) {
-    l(this, W).addEventListener(e, i, r);
+    f(this, W).addEventListener(e, i, r);
   }
   hitTest(e, i) {
-    return I(this, V, !0), l(this, V);
+    return I(this, V, !0), f(this, V);
   }
   async addImageToCanvas(e, i, r, n = 1, a = 1, o = !1) {
-    const h = new xt({ x: i, y: r, src: e, sx: n, sy: a });
+    const h = new wt({ x: i, y: r, src: e, sx: n, sy: a });
     if (this.saveImgFileToStorage(e).then((c) => h.fileId = c), o) {
       const c = new Image();
-      c.src = e.startsWith("data:image/png") ? e : await Te(e), c.onload = () => {
-        const u = c.naturalWidth || c.width || 0, f = c.naturalHeight || c.height || 0;
-        (u || f) && h.updateTranslation(-u / 2, -f / 2), h.src = c.src, this.appendChild(h);
+      c.src = e.startsWith("data:image/png") ? e : await _e(e), c.onload = () => {
+        const l = c.naturalWidth || c.width || 0, u = c.naturalHeight || c.height || 0;
+        (l || u) && h.updateTranslation(-l / 2, -u / 2), h.src = c.src, this.appendChild(h);
       };
     }
-    return l(this, F).emit("save"), l(this, F).emit(N.Change), h;
+    return f(this, F).emit("save"), f(this, F).emit(N.Change), h;
   }
   exportState() {
-    return jt(this);
+    return Vt(this);
   }
   async importState(e, i) {
-    return await Vt(e, this, i);
+    return await Zt(e, this, i);
   }
   clearChildren() {
-    this.selectionManager.clear(), this.state.clearChildren(), l(this, K).clear();
+    this.selectionManager.clear(), this.state.clearChildren(), f(this, Q).clear();
   }
   toggleGrid() {
-    l(this, X).changeGridType(
-      l(this, X).gridType === Tt.GRID ? Tt.NONE : Tt.GRID
+    f(this, X).changeGridType(
+      f(this, X).gridType === _t.GRID ? _t.NONE : _t.GRID
     );
   }
   getSelected() {
-    return l(this, P).selected;
+    return f(this, P).selected;
   }
   setShapeZOrder(e = !0) {
-    if (l(this, P).multiBoundingBox || l(this, P).boundingBoxes.size != 1)
+    if (f(this, P).multiBoundingBox || f(this, P).boundingBoxes.size != 1)
       return;
-    const i = Array.from(l(this, P).boundingBoxes)[0].target, r = {
+    const i = Array.from(f(this, P).boundingBoxes)[0].target, r = {
       ref: i,
       start: {
         renderOrder: i.renderOrder
@@ -2641,20 +2646,20 @@ const R = class R extends Ie {
     const a = Math.max(...n), o = Math.min(...n);
     i.renderOrder = e ? a + 1 : o - 1, r.end = {
       renderOrder: i.renderOrder
-    }, this.markOrderDirty(), l(this, K).push(Di([r])), l(this, F).emit(N.Change);
+    }, this.markOrderDirty(), f(this, Q).push(Bi([r])), f(this, F).emit(N.Change);
   }
   changeMode() {
-    l(this, ht).changeMode(), l(this, P).clear();
+    f(this, dt).changeMode(), f(this, P).clear();
   }
   updateZoomByFixedAmount(e = 1) {
-    l(this, at).updateZoom(
-      l(this, W).width / 2,
-      l(this, W).height / 2,
+    f(this, ht).updateZoom(
+      f(this, W).width / 2,
+      f(this, W).height / 2,
       Math.exp(0.5 * 0.3 * e)
     );
   }
   getBoundingClientRect() {
-    return l(this, W).getBoundingClientRect();
+    return f(this, W).getBoundingClientRect();
   }
   wrapWebGLContext(e) {
     const i = e.createTexture.bind(e);
@@ -2676,7 +2681,7 @@ const R = class R extends Ie {
     };
   }
 };
-W = new WeakMap(), F = new WeakMap(), K = new WeakMap(), at = new WeakMap(), y = new WeakMap(), G = new WeakMap(), ot = new WeakMap(), Q = new WeakMap(), X = new WeakMap(), V = new WeakMap(), P = new WeakMap(), ht = new WeakMap(), Wt = new WeakMap(), ct = new WeakMap(), R.webglStats = {
+W = new WeakMap(), F = new WeakMap(), Q = new WeakMap(), ht = new WeakMap(), y = new WeakMap(), G = new WeakMap(), ct = new WeakMap(), J = new WeakMap(), X = new WeakMap(), V = new WeakMap(), P = new WeakMap(), dt = new WeakMap(), Ft = new WeakMap(), lt = new WeakMap(), R.webglStats = {
   buffersCreated: 0,
   buffersDeleted: 0,
   programsCreated: 0,
@@ -2686,9 +2691,9 @@ W = new WeakMap(), F = new WeakMap(), K = new WeakMap(), at = new WeakMap(), y =
   shadersCreated: 0,
   shadersDeleted: 0
 };
-let zt = R;
-const pe = 25;
-class Xi {
+let kt = R;
+const xe = 25;
+class Hi {
   constructor() {
     this._undoStack = [], this._redoStack = [], this._openGroup = null;
   }
@@ -2703,7 +2708,7 @@ class Xi {
     if (this._openGroup)
       this._openGroup.push(t);
     else {
-      for (; this._undoStack.length >= pe; )
+      for (; this._undoStack.length >= xe; )
         this._undoStack.shift();
       this._undoStack.push([t]), t.do(), this._redoStack.length = 0;
     }
@@ -2713,7 +2718,7 @@ class Xi {
     const t = this._openGroup;
     this._openGroup = null;
     for (const e of t) e.do();
-    for (; this._undoStack.length >= pe; )
+    for (; this._undoStack.length >= xe; )
       this._undoStack.shift();
     this._undoStack.push(t), this._redoStack.length = 0, this._openLabel = void 0;
   }
@@ -2744,23 +2749,23 @@ class Xi {
     this._undoStack.length = 0, this._redoStack.length = 0, this._openGroup = null, this._openLabel = void 0;
   }
 }
-const Hi = (s) => (t, e) => {
+const Ni = (s) => (t, e) => {
   e !== void 0 ? e.addInitializer((() => {
     customElements.define(s, t);
   })) : customElements.define(s, t);
 };
-const _t = globalThis, Qt = _t.ShadowRoot && (_t.ShadyCSS === void 0 || _t.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Le = Symbol(), xe = /* @__PURE__ */ new WeakMap();
-let Ni = class {
+const Rt = globalThis, Jt = Rt.ShadowRoot && (Rt.ShadyCSS === void 0 || Rt.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, De = Symbol(), ye = /* @__PURE__ */ new WeakMap();
+let Yi = class {
   constructor(t, e, i) {
-    if (this._$cssResult$ = !0, i !== Le) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    if (this._$cssResult$ = !0, i !== De) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
     this.cssText = t, this.t = e;
   }
   get styleSheet() {
     let t = this.o;
     const e = this.t;
-    if (Qt && t === void 0) {
+    if (Jt && t === void 0) {
       const i = e !== void 0 && e.length === 1;
-      i && (t = xe.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), i && xe.set(e, t));
+      i && (t = ye.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), i && ye.set(e, t));
     }
     return t;
   }
@@ -2768,21 +2773,21 @@ let Ni = class {
     return this.cssText;
   }
 };
-const Yi = (s) => new Ni(typeof s == "string" ? s : s + "", void 0, Le), $i = (s, t) => {
-  if (Qt) s.adoptedStyleSheets = t.map(((e) => e instanceof CSSStyleSheet ? e : e.styleSheet));
+const $i = (s) => new Yi(typeof s == "string" ? s : s + "", void 0, De), ji = (s, t) => {
+  if (Jt) s.adoptedStyleSheets = t.map(((e) => e instanceof CSSStyleSheet ? e : e.styleSheet));
   else for (const e of t) {
-    const i = document.createElement("style"), r = _t.litNonce;
+    const i = document.createElement("style"), r = Rt.litNonce;
     r !== void 0 && i.setAttribute("nonce", r), i.textContent = e.cssText, s.appendChild(i);
   }
-}, ye = Qt ? (s) => s : (s) => s instanceof CSSStyleSheet ? ((t) => {
+}, we = Jt ? (s) => s : (s) => s instanceof CSSStyleSheet ? ((t) => {
   let e = "";
   for (const i of t.cssRules) e += i.cssText;
-  return Yi(e);
+  return $i(e);
 })(s) : s;
-const { is: ji, defineProperty: Vi, getOwnPropertyDescriptor: Zi, getOwnPropertyNames: qi, getOwnPropertySymbols: Ki, getPrototypeOf: Qi } = Object, Ft = globalThis, we = Ft.trustedTypes, Ji = we ? we.emptyScript : "", ts = Ft.reactiveElementPolyfillSupport, yt = (s, t) => s, Zt = { toAttribute(s, t) {
+const { is: Vi, defineProperty: Zi, getOwnPropertyDescriptor: qi, getOwnPropertyNames: Ki, getOwnPropertySymbols: Qi, getPrototypeOf: Ji } = Object, Gt = globalThis, ve = Gt.trustedTypes, ts = ve ? ve.emptyScript : "", es = Gt.reactiveElementPolyfillSupport, vt = (s, t) => s, qt = { toAttribute(s, t) {
   switch (t) {
     case Boolean:
-      s = s ? Ji : null;
+      s = s ? ts : null;
       break;
     case Object:
     case Array:
@@ -2807,23 +2812,23 @@ const { is: ji, defineProperty: Vi, getOwnPropertyDescriptor: Zi, getOwnProperty
       }
   }
   return e;
-} }, De = (s, t) => !ji(s, t), ve = { attribute: !0, type: String, converter: Zt, reflect: !1, useDefault: !1, hasChanged: De };
-Symbol.metadata ??= Symbol("metadata"), Ft.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
-class ut extends HTMLElement {
+} }, Be = (s, t) => !Vi(s, t), be = { attribute: !0, type: String, converter: qt, reflect: !1, useDefault: !1, hasChanged: Be };
+Symbol.metadata ??= Symbol("metadata"), Gt.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
+class ft extends HTMLElement {
   static addInitializer(t) {
     this._$Ei(), (this.l ??= []).push(t);
   }
   static get observedAttributes() {
     return this.finalize(), this._$Eh && [...this._$Eh.keys()];
   }
-  static createProperty(t, e = ve) {
+  static createProperty(t, e = be) {
     if (e.state && (e.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(t) && ((e = Object.create(e)).wrapped = !0), this.elementProperties.set(t, e), !e.noAccessor) {
       const i = Symbol(), r = this.getPropertyDescriptor(t, i, e);
-      r !== void 0 && Vi(this.prototype, t, r);
+      r !== void 0 && Zi(this.prototype, t, r);
     }
   }
   static getPropertyDescriptor(t, e, i) {
-    const { get: r, set: n } = Zi(this.prototype, t) ?? { get() {
+    const { get: r, set: n } = qi(this.prototype, t) ?? { get() {
       return this[e];
     }, set(a) {
       this[e] = a;
@@ -2834,17 +2839,17 @@ class ut extends HTMLElement {
     }, configurable: !0, enumerable: !0 };
   }
   static getPropertyOptions(t) {
-    return this.elementProperties.get(t) ?? ve;
+    return this.elementProperties.get(t) ?? be;
   }
   static _$Ei() {
-    if (this.hasOwnProperty(yt("elementProperties"))) return;
-    const t = Qi(this);
+    if (this.hasOwnProperty(vt("elementProperties"))) return;
+    const t = Ji(this);
     t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
   }
   static finalize() {
-    if (this.hasOwnProperty(yt("finalized"))) return;
-    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(yt("properties"))) {
-      const e = this.properties, i = [...qi(e), ...Ki(e)];
+    if (this.hasOwnProperty(vt("finalized"))) return;
+    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(vt("properties"))) {
+      const e = this.properties, i = [...Ki(e), ...Qi(e)];
       for (const r of i) this.createProperty(r, e[r]);
     }
     const t = this[Symbol.metadata];
@@ -2863,8 +2868,8 @@ class ut extends HTMLElement {
     const e = [];
     if (Array.isArray(t)) {
       const i = new Set(t.flat(1 / 0).reverse());
-      for (const r of i) e.unshift(ye(r));
-    } else t !== void 0 && e.push(ye(t));
+      for (const r of i) e.unshift(we(r));
+    } else t !== void 0 && e.push(we(t));
     return e;
   }
   static _$Eu(t, e) {
@@ -2890,7 +2895,7 @@ class ut extends HTMLElement {
   }
   createRenderRoot() {
     const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return $i(t, this.constructor.elementStyles), t;
+    return ji(t, this.constructor.elementStyles), t;
   }
   connectedCallback() {
     this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(!0), this._$EO?.forEach(((t) => t.hostConnected?.()));
@@ -2906,14 +2911,14 @@ class ut extends HTMLElement {
   _$ET(t, e) {
     const i = this.constructor.elementProperties.get(t), r = this.constructor._$Eu(t, i);
     if (r !== void 0 && i.reflect === !0) {
-      const n = (i.converter?.toAttribute !== void 0 ? i.converter : Zt).toAttribute(e, i.type);
+      const n = (i.converter?.toAttribute !== void 0 ? i.converter : qt).toAttribute(e, i.type);
       this._$Em = t, n == null ? this.removeAttribute(r) : this.setAttribute(r, n), this._$Em = null;
     }
   }
   _$AK(t, e) {
     const i = this.constructor, r = i._$Eh.get(t);
     if (r !== void 0 && this._$Em !== r) {
-      const n = i.getPropertyOptions(r), a = typeof n.converter == "function" ? { fromAttribute: n.converter } : n.converter?.fromAttribute !== void 0 ? n.converter : Zt;
+      const n = i.getPropertyOptions(r), a = typeof n.converter == "function" ? { fromAttribute: n.converter } : n.converter?.fromAttribute !== void 0 ? n.converter : qt;
       this._$Em = r;
       const o = a.fromAttribute(e, n.type);
       this[r] = o ?? this._$Ej?.get(r) ?? o, this._$Em = null;
@@ -2922,7 +2927,7 @@ class ut extends HTMLElement {
   requestUpdate(t, e, i) {
     if (t !== void 0) {
       const r = this.constructor, n = this[t];
-      if (i ??= r.getPropertyOptions(t), !((i.hasChanged ?? De)(n, e) || i.useDefault && i.reflect && n === this._$Ej?.get(t) && !this.hasAttribute(r._$Eu(t, i)))) return;
+      if (i ??= r.getPropertyOptions(t), !((i.hasChanged ?? Be)(n, e) || i.useDefault && i.reflect && n === this._$Ej?.get(t) && !this.hasAttribute(r._$Eu(t, i)))) return;
       this.C(t, e, i);
     }
     this.isUpdatePending === !1 && (this._$ES = this._$EP());
@@ -2990,8 +2995,8 @@ class ut extends HTMLElement {
   firstUpdated(t) {
   }
 }
-ut.elementStyles = [], ut.shadowRootOptions = { mode: "open" }, ut[yt("elementProperties")] = /* @__PURE__ */ new Map(), ut[yt("finalized")] = /* @__PURE__ */ new Map(), ts?.({ ReactiveElement: ut }), (Ft.reactiveElementVersions ??= []).push("2.1.1");
-class Be {
+ft.elementStyles = [], ft.shadowRootOptions = { mode: "open" }, ft[vt("elementProperties")] = /* @__PURE__ */ new Map(), ft[vt("finalized")] = /* @__PURE__ */ new Map(), es?.({ ReactiveElement: ft }), (Gt.reactiveElementVersions ??= []).push("2.1.1");
+class ze {
   constructor(t, e) {
     this.options = [], this.rootNode = e, this._el = document.createElement("div"), this._el.classList.add("context-menu"), t.options.forEach((i, r) => {
       this.createOptionGroup(i), r !== t.options.length - 1 && this.addDivider();
@@ -3006,7 +3011,7 @@ class Be {
     t.appendChild(this.el);
   }
   createOptionGroup(t) {
-    const e = new es(t, this.rootNode);
+    const e = new is(t, this.rootNode);
     this.options.push(e), this.el.appendChild(e.el);
   }
   addDivider() {
@@ -3014,7 +3019,7 @@ class Be {
     t.classList.add("context-menu-divider"), this.el.appendChild(t);
   }
 }
-class es {
+class is {
   constructor(t, e) {
     this.childOptions = [], this.rootNode = e, this._el = document.createElement("div"), this.createOptionElement = this.createOptionElement.bind(this), t.childOptions.forEach((i) => this.createOptionElement(i));
   }
@@ -3026,43 +3031,43 @@ class es {
   }
   createOptionElement(t) {
     t.parent = this;
-    const e = new is(t, this.rootNode);
+    const e = new ss(t, this.rootNode);
     this.childOptions.push(e);
   }
 }
-class is {
+class ss {
   get el() {
     return this._el;
   }
   constructor(t, e) {
     this.displayText = t.text, this.rootNode = e, this.parent = t.parent, this._el = document.createElement("button"), this._el.textContent = t.text, this._el.classList.add("context-menu-option"), this.parent.el.appendChild(this._el), "onClick" in t && this._el.addEventListener("click", t.onClick), this._el.addEventListener(
       "pointerenter",
-      (i) => ss(i, t, this._el, this.rootNode)
+      (i) => rs(i, t, this._el, this.rootNode)
     ), this._el.addEventListener("contextmenu", (i) => {
       i.preventDefault();
     });
   }
 }
-function ss(s, t, e, i) {
+function rs(s, t, e, i) {
   if (!i) return;
   const r = i.querySelector(".sub-context-menu");
   if (r && r.remove(), t.subMenu) {
-    const n = new Be(t.subMenu, this);
+    const n = new ze(t.subMenu, this);
     i.appendChild(n.el), n.el.id = `${t.text}-context-menu`, n.el.classList.add("sub-context-menu");
-    const a = i.getBoundingClientRect(), o = e.getBoundingClientRect(), h = n.el.getBoundingClientRect(), c = a.right - a.left, u = a.bottom - a.top, f = o.right + h.width;
-    o.top + h.height > u ? n._el.style.top = `${o.bottom - h.height}px` : n._el.style.top = `${o.top}px`, f > c ? n._el.style.left = `${o.left - h.width}px` : n._el.style.left = `${o.right}px`;
+    const a = i.getBoundingClientRect(), o = e.getBoundingClientRect(), h = n.el.getBoundingClientRect(), c = a.right - a.left, l = a.bottom - a.top, u = o.right + h.width;
+    o.top + h.height > l ? n._el.style.top = `${o.bottom - h.height}px` : n._el.style.top = `${o.top}px`, u > c ? n._el.style.left = `${o.left - h.width}px` : n._el.style.left = `${o.right}px`;
   }
 }
-const Ct = 5;
-function Gt(s) {
+const St = 5;
+function Xt(s) {
   const t = this;
   return function(...e) {
     const i = s.apply(t, e);
     return t.clearContextMenu(), i;
   };
 }
-function rs(s, t, e = "single") {
-  const i = new Be(
+function ns(s, t, e = "single") {
+  const i = new ze(
     e === "single" ? this.singleImageMenuOptions : e === "multi" ? this.multiImageMenuOptions : this.canvasImageMenuOptions,
     this.rootDiv
   );
@@ -3071,26 +3076,26 @@ function rs(s, t, e = "single") {
     return;
   }
   i.attachToParent(this.rootDiv);
-  const r = this.getBoundingClientRect(), n = s - r.left, a = t - r.top, o = r.right - r.left, h = r.bottom - r.top, c = i.el.getBoundingClientRect(), u = [
+  const r = this.getBoundingClientRect(), n = s - r.left, a = t - r.top, o = r.right - r.left, h = r.bottom - r.top, c = i.el.getBoundingClientRect(), l = [
     n + c.width > o ? 1 : 0,
     a + c.height > h ? 1 : 0
-  ], f = c.height * u[1], g = c.width * u[0];
-  if (f > h) {
-    const m = h - 2 * Ct;
-    i._el.style.height = `${m}px`, i._el.style.top = `${Ct}px`;
+  ], u = c.height * l[1], g = c.width * l[0];
+  if (u > h) {
+    const m = h - 2 * St;
+    i._el.style.height = `${m}px`, i._el.style.top = `${St}px`;
   } else
-    i._el.style.top = `${a - f}px`;
-  g > o ? (i._el.style.width = `${o - 2 * Ct}px`, i._el.style.left = `${Ct}px`) : i._el.style.left = `${n - g}px`;
+    i._el.style.top = `${a - u}px`;
+  g > o ? (i._el.style.width = `${o - 2 * St}px`, i._el.style.left = `${St}px`) : i._el.style.left = `${n - g}px`;
 }
-function ns() {
+function as() {
   const s = this.renderRoot.querySelector(".context-menu");
   s && (s.remove(), this.eventHub.emit(H.Close));
 }
-function as() {
+function os() {
   return this.renderRoot.querySelector(".context-menu") !== null;
 }
-function os() {
-  const s = Gt.bind(this);
+function hs() {
+  const s = Xt.bind(this);
   return {
     options: [
       {
@@ -3130,8 +3135,8 @@ function os() {
     ]
   };
 }
-function hs(s) {
-  const t = Gt.bind(this);
+function cs(s) {
+  const t = Xt.bind(this);
   return {
     options: [
       ...s ?? [],
@@ -3150,8 +3155,8 @@ function hs(s) {
     ]
   };
 }
-function cs(s) {
-  const t = Gt.bind(this);
+function ds(s) {
+  const t = Xt.bind(this);
   return {
     options: [
       ...s ?? [],
@@ -3273,8 +3278,8 @@ function cs(s) {
     ]
   };
 }
-function ds(s) {
-  const t = Gt.bind(this);
+function ls(s) {
+  const t = Xt.bind(this);
   return {
     options: [
       ...s ?? [],
@@ -3305,7 +3310,7 @@ function ds(s) {
     ]
   };
 }
-class Jt {
+class te {
   _touch() {
     this._lastRetrieved = Date.now();
   }
@@ -3325,24 +3330,24 @@ class Jt {
     return this._lastRetrieved;
   }
   constructor(t) {
-    this._dataURL = t, this._mimetype = di(t), this._created = Date.now(), this._lastRetrieved = Date.now();
+    this._dataURL = t, this._mimetype = li(t), this._created = Date.now(), this._lastRetrieved = Date.now();
   }
   static async create(t) {
-    const e = new Jt(t);
-    return e._id = await Kt(t), e;
+    const e = new te(t);
+    return e._id = await Qt(t), e;
   }
 }
-class ls {
-}
 class us {
 }
-function ze(s) {
+class fs {
+}
+function ke(s) {
   s.Version.prototype._parseStoresSpec = Y.override(
     s.Version.prototype._parseStoresSpec,
-    fs
-  ), s.open = Y.override(s.open, gs(s));
+    ms
+  ), s.open = Y.override(s.open, ps(s));
 }
-function fs(s) {
+function ms(s) {
   return function(t, e) {
     s.call(this, t, e), Object.keys(e).forEach(function(i) {
       let r = e[i];
@@ -3350,38 +3355,38 @@ function fs(s) {
     });
   };
 }
-function ms(s) {
+function gs(s) {
   return function(e, i) {
     let r;
-    return e === void 0 && s.schema.primKey.uuid && (e = r = ei(), s.schema.primKey.keyPath && Y.setByKeyPath(i, s.schema.primKey.keyPath, e)), r;
+    return e === void 0 && s.schema.primKey.uuid && (e = r = ii(), s.schema.primKey.keyPath && Y.setByKeyPath(i, s.schema.primKey.keyPath, e)), r;
   };
 }
-function gs(s) {
+function ps(s) {
   return function(e) {
     return function() {
       return Object.keys(s._allTables).forEach((i) => {
         let r = s._allTables[i];
-        r.hook("creating").subscribe(ms(r));
+        r.hook("creating").subscribe(gs(r));
       }), e.apply(this, arguments);
     };
   };
 }
-Y.UUIDPrimaryKey = ze;
-Y.addons.push(ze);
+Y.UUIDPrimaryKey = ke;
+Y.addons.push(ke);
 Y.UUIDPrimaryKey;
-const ps = {
+const xs = {
   files: "$$id, mimetype, created, lastRetrieved"
-}, be = {
+}, Ce = {
   MAX_IMAGE_ENTRIES: 1e3
 };
-class St extends ls {
+class Mt extends us {
   constructor() {
-    super(), this.dbQueue = new Se(), this.cache = /* @__PURE__ */ new Map(), this.CACHE_LIMIT = 500, this.dbQueue = new Se(), this.dbPromise = this.initDb();
+    super(), this.dbQueue = new Me(), this.cache = /* @__PURE__ */ new Map(), this.CACHE_LIMIT = 500, this.dbQueue = new Me(), this.dbPromise = this.initDb();
   }
   async initDb() {
     return $(async () => {
       let t = new Y("InfiniteCanvas");
-      return Y.UUIDPrimaryKey(t), t.version(1).stores(ps), await t.open(), t;
+      return Y.UUIDPrimaryKey(t), t.version(1).stores(xs), await t.open(), t;
     });
   }
   async getIndexDb() {
@@ -3394,11 +3399,11 @@ class St extends ls {
    * @returns the file ID
    */
   async write(t) {
-    const e = await Jt.create(t), i = ws(e.dataURL);
+    const e = await te.create(t), i = vs(e.dataURL);
     return this.dbQueue.add(
       () => $(async () => {
         const r = await this.getIndexDb();
-        return await r.transaction("rw", r.files, async () => (await ys(r), await r.files.add({
+        return await r.transaction("rw", r.files, async () => (await ws(r), await r.files.add({
           id: e.id,
           blob: i,
           dataURL: e.dataURL,
@@ -3472,7 +3477,7 @@ class St extends ls {
     });
   }
 }
-class Yt extends us {
+class $t extends fs {
   constructor(t) {
     super(), this.key = "infinite_canvas", this.key = t;
   }
@@ -3507,17 +3512,17 @@ class Yt extends us {
     return this.write(t);
   }
 }
-class Ce extends Error {
+class Se extends Error {
   constructor(t) {
     super(t), this.name = "QuotaExceededError";
   }
 }
-class xs extends Error {
+class ys extends Error {
   constructor(t) {
     super(t), this.name = "DatabaseLimitError";
   }
 }
-class Se {
+class Me {
   constructor() {
     this.queue = Promise.resolve();
   }
@@ -3531,26 +3536,26 @@ const $ = async (s) => {
   try {
     return await s();
   } catch (t) {
-    throw t instanceof DOMException && t.name === "QuotaExceededError" ? new Ce(
+    throw t instanceof DOMException && t.name === "QuotaExceededError" ? new Se(
       "Storage quota exceeded. Please free up space."
-    ) : t instanceof Y.QuotaExceededError ? new Ce(
+    ) : t instanceof Y.QuotaExceededError ? new Se(
       "Database quota exceeded. Please free up space."
     ) : t;
   }
 };
-async function ys(s) {
-  if (await s.files.count() >= be.MAX_IMAGE_ENTRIES)
-    throw new xs(
-      `Cannot save image: limit of ${be.MAX_IMAGE_ENTRIES} reached`
+async function ws(s) {
+  if (await s.files.count() >= Ce.MAX_IMAGE_ENTRIES)
+    throw new ys(
+      `Cannot save image: limit of ${Ce.MAX_IMAGE_ENTRIES} reached`
     );
 }
-function ws(s) {
+function vs(s) {
   const t = s.split(","), e = t[0], i = t[1], r = e.match(/:(.*?);/), n = r ? r[1] : "application/octet-stream", a = atob(i), o = a.length, h = new Uint8Array(o);
   for (let c = 0; c < o; c++)
     h[c] = a.charCodeAt(c);
   return new Blob([h], { type: n });
 }
-class vs {
+class bs {
   get el() {
     return this._el;
   }
@@ -3582,34 +3587,34 @@ class vs {
     this._el.parentNode && this._el.parentNode.removeChild(this._el);
   }
 }
-function bs(s, t) {
-  const e = new vs({ type: s, message: t });
+function Cs(s, t) {
+  const e = new bs({ type: s, message: t });
   e.attachToParent(this.renderRoot);
   const i = this.getBoundingClientRect();
   return e.el.style.width = `${i.right}px`, e.el.style.height = `${i.bottom}px`, e._el.style.top = `${-i.bottom}px`, e;
 }
-function Cs() {
+function Ss() {
   const s = this.renderRoot.querySelector(".canvas-loader");
   s && s.remove();
 }
-var Ss = Object.getOwnPropertyDescriptor, ke = (s) => {
+var Ms = Object.getOwnPropertyDescriptor, Ue = (s) => {
   throw TypeError(s);
-}, Ms = (s, t, e, i) => {
-  for (var r = i > 1 ? void 0 : i ? Ss(t, e) : t, n = s.length - 1, a; n >= 0; n--)
+}, Es = (s, t, e, i) => {
+  for (var r = i > 1 ? void 0 : i ? Ms(t, e) : t, n = s.length - 1, a; n >= 0; n--)
     (a = s[n]) && (r = a(r) || r);
   return r;
-}, Ue = (s, t, e) => t.has(s) || ke("Cannot " + e), d = (s, t, e) => (Ue(s, t, "read from private field"), e ? e.call(s) : t.get(s)), D = (s, t, e) => t.has(s) ? ke("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(s) : t.set(s, e), E = (s, t, e, i) => (Ue(s, t, "write to private field"), t.set(s, e), e), p, _, Rt, j, O, k, mt, It, gt, q, rt, Pt, At, Ot;
-let kt = class extends ti {
+}, We = (s, t, e) => t.has(s) || Ue("Cannot " + e), d = (s, t, e) => (We(s, t, "read from private field"), e ? e.call(s) : t.get(s)), D = (s, t, e) => t.has(s) ? Ue("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(s) : t.set(s, e), M = (s, t, e, i) => (We(s, t, "write to private field"), t.set(s, e), e), p, _, It, j, L, k, gt, Pt, pt, xt, q, at, At, Lt, Ot;
+let Ut = class extends ei {
   constructor() {
-    super(...arguments), this.name = "Reffy", this.displayMode = "fullscreen", D(this, p), D(this, _), D(this, Rt), D(this, j), D(this, O), D(this, k), D(this, mt, 3e5), D(this, It), D(this, gt), D(this, q), D(this, rt), D(this, Pt), D(this, At), D(this, Ot), this.handleGlobalPointerDown = (s) => {
+    super(...arguments), this.name = "Reffy", this.displayMode = "fullscreen", D(this, p), D(this, _), D(this, It), D(this, j), D(this, L), D(this, k), D(this, gt, 3e5), D(this, Pt), D(this, pt), D(this, xt), D(this, q), D(this, at), D(this, At), D(this, Lt), D(this, Ot), this.handleGlobalPointerDown = (s) => {
       !this.contains(s.target) && !this.renderRoot.contains(s.target) && this.clearContextMenu();
     };
   }
   get singleImageMenuOptions() {
-    return d(this, Pt);
+    return d(this, At);
   }
   get multiImageMenuOptions() {
-    return d(this, At);
+    return d(this, Lt);
   }
   get canvasImageMenuOptions() {
     return d(this, Ot);
@@ -3618,10 +3623,10 @@ let kt = class extends ti {
     return d(this, p);
   }
   get onCanvasChange() {
-    return d(this, rt);
+    return d(this, at);
   }
   set onCanvasChange(s) {
-    E(this, rt, s);
+    M(this, at, s);
   }
   get eventHub() {
     return d(this, _);
@@ -3642,7 +3647,7 @@ let kt = class extends ti {
       "pointerdown",
       this.handleGlobalPointerDown,
       !0
-    ), d(this, Rt)?.disconnect(), E(this, Rt, void 0), d(this, p).destroy(), super.disconnectedCallback();
+    ), window.removeEventListener("resize", d(this, xt)), d(this, It)?.disconnect(), M(this, It, void 0), d(this, p).destroy(), super.disconnectedCallback();
   }
   firstUpdated(s) {
     try {
@@ -3659,11 +3664,11 @@ let kt = class extends ti {
     e && i && this.resizeCanvas(e, i);
   }
   async initCanvas() {
-    await this.warmUpStorage(), E(this, j, new Xi()), E(this, _, new ii());
+    await this.warmUpStorage(), M(this, j, new Hi()), M(this, _, new si());
     const s = document.createElement("div");
-    s.style.overflow = "hidden", this.renderRoot.appendChild(s), E(this, q, s);
+    s.style.overflow = "hidden", this.renderRoot.appendChild(s), M(this, q, s);
     const t = document.createElement("canvas");
-    this.assignFileStorage = this.assignFileStorage.bind(this), this.getImageFileMetadata = this.getImageFileMetadata.bind(this), this.getAllImageFileMetdata = this.getAllImageFileMetdata.bind(this), this.saveImageFileMetadata = this.saveImageFileMetadata.bind(this), this.restoreStateFromCanvasStorage = this.restoreStateFromCanvasStorage.bind(this), this.assignCanvasStorage = this.assignCanvasStorage.bind(this), this.saveToCanvasStorage = this.saveToCanvasStorage.bind(this), this.debounceSaveToCanvasStorage = this.debounceSaveToCanvasStorage.bind(this), this.importCanvas = this.importCanvas.bind(this), this.exportCanvas = this.exportCanvas.bind(this), this.addContextMenu = rs.bind(this), this.clearContextMenu = ns.bind(this), this.isContextMenuActive = as.bind(this), this.getContainerSize = this.getContainerSize.bind(this), s.contains(t) || s.appendChild(t), this.registerSignal(), E(this, p, new zt(
+    this.assignFileStorage = this.assignFileStorage.bind(this), this.getImageFileMetadata = this.getImageFileMetadata.bind(this), this.getAllImageFileMetdata = this.getAllImageFileMetdata.bind(this), this.saveImageFileMetadata = this.saveImageFileMetadata.bind(this), this.restoreStateFromCanvasStorage = this.restoreStateFromCanvasStorage.bind(this), this.assignCanvasStorage = this.assignCanvasStorage.bind(this), this.saveToCanvasStorage = this.saveToCanvasStorage.bind(this), this.debounceSaveToCanvasStorage = this.debounceSaveToCanvasStorage.bind(this), this.importCanvas = this.importCanvas.bind(this), this.exportCanvas = this.exportCanvas.bind(this), this.addContextMenu = ns.bind(this), this.clearContextMenu = as.bind(this), this.isContextMenuActive = os.bind(this), this.getContainerSize = this.getContainerSize.bind(this), s.contains(t) || s.appendChild(t), this.registerSignal(), M(this, p, new kt(
       t,
       d(this, j),
       d(this, _),
@@ -3676,14 +3681,14 @@ let kt = class extends ti {
     } catch {
       console.error("Failed to restore canvas");
     }
-    this.resizeCanvas(s, t);
-    const e = os.bind(this)();
-    E(this, Pt, hs.bind(this)(
+    this.resizeCanvas(s, t), M(this, xt, () => this.resizeCanvas(s, t)), window.addEventListener("resize", d(this, xt));
+    const e = hs.bind(this)();
+    M(this, At, cs.bind(this)(
       e.options
-    )), E(this, Ot, ds.bind(this)()), E(this, At, cs.bind(this)(
+    )), M(this, Ot, ls.bind(this)()), M(this, Lt, ds.bind(this)(
       e.options
     )), this.dispatchEvent(new Event("load"));
-    const i = new si();
+    const i = new ri();
     i.showPanel(0), this.renderRoot.contains(i.dom) || this.renderRoot.appendChild(i.dom);
     const r = () => {
       i && i.update(), d(this, p).render(), requestAnimationFrame(r);
@@ -3699,26 +3704,24 @@ let kt = class extends ti {
     s.style.width = this.displayMode === "fullscreen" ? "100vw" : this.normalizeCssSize(this.width), s.style.height = this.displayMode === "fullscreen" ? "100vh" : this.normalizeCssSize(this.height), s.style.overflow = "hidden";
     const e = window.devicePixelRatio || 1;
     let i = window.screen.width, r = window.screen.height;
-    const n = Math.round(i * e), a = Math.round(r * e);
-    (t.width !== n || t.height !== a) && (t.width = n, t.height = a), t.style.width = `${i}px`, t.style.height = `${r}px`;
-    const o = s.getBoundingClientRect();
-    this.canvas.camera.viewportX = o.x, this.canvas.camera.viewportY = o.y, this.canvas.camera.state.setHeight(o.height), this.canvas.camera.state.setWidth(o.width);
+    const n = s.getBoundingClientRect(), a = Math.round(i * e), o = Math.round(r * e);
+    (t.width !== a || t.height !== o) && (t.width = a, t.height = o), t.style.width = `${i}px`, t.style.height = `${r}px`, this.canvas.camera.viewportX = n.x, this.canvas.camera.viewportY = n.y, this.canvas.camera.state.setHeight(n.height), this.canvas.camera.state.setWidth(n.width);
   }
   // Register signal
   registerSignal() {
-    d(this, _).on(tt.start, bs.bind(this), "spinner"), d(this, _).on(tt.done, Cs.bind(this)), d(this, _).on(H.Open, this.addContextMenu), d(this, _).on(H.Close, this.clearContextMenu), d(this, _).on(N.Change, () => {
-      d(this, rt) && d(this, rt).call(this);
-    }), d(this, _).on(et.Save, this.saveToCanvasStorage), d(this, _).on(et.SaveCompleted, () => {
+    d(this, _).on(it.start, Cs.bind(this), "spinner"), d(this, _).on(it.done, Ss.bind(this)), d(this, _).on(H.Open, this.addContextMenu), d(this, _).on(H.Close, this.clearContextMenu), d(this, _).on(N.Change, () => {
+      d(this, at) && d(this, at).call(this);
+    }), d(this, _).on(st.Save, this.saveToCanvasStorage), d(this, _).on(st.SaveCompleted, () => {
     }), d(this, _).on(
-      et.SaveFailed,
+      st.SaveFailed,
       () => console.error("Failed to Save!")
     );
   }
   // need to check if this is good practice
   async warmUpStorage() {
-    d(this, O) || E(this, O, new St());
+    d(this, L) || M(this, L, new Mt());
     try {
-      await d(this, O).readAll();
+      await d(this, L).readAll();
     } catch (s) {
       console.error("Storage warm-up failed", s);
     }
@@ -3736,17 +3739,17 @@ let kt = class extends ti {
    * @param storage Canvas storage stores the positions of all the renderables
    * @param saveFrequency How often should auto save execute
    */
-  assignCanvasStorage(s, t = d(this, mt)) {
-    E(this, k, s), E(this, mt, t), d(this, gt) && clearInterval(d(this, gt)), E(this, gt, setInterval(
+  assignCanvasStorage(s, t = d(this, gt)) {
+    M(this, k, s), M(this, gt, t), d(this, pt) && clearInterval(d(this, pt)), M(this, pt, setInterval(
       this.saveToCanvasStorage,
-      d(this, mt)
+      d(this, gt)
     ));
   }
   /**
    * @param storage File storage captures the information about the image data that has previously been added. Made more efficient by using SHA of the image data for storage.
    */
   assignFileStorage(s) {
-    E(this, O, s);
+    M(this, L, s);
   }
   /**
    * Duplicate images will not be written to the database
@@ -3754,10 +3757,10 @@ let kt = class extends ti {
    * @returns The unique ID that the image has been logged with. This is a hashed version of the image data URL
    */
   async saveImageFileMetadata(s) {
-    d(this, O) || E(this, O, new St());
+    d(this, L) || M(this, L, new Mt());
     try {
-      const t = await Kt(s);
-      return await d(this, O).checkIfImageStored(t) ? t : await d(this, O).write(s);
+      const t = await Qt(s);
+      return await d(this, L).checkIfImageStored(t) ? t : await d(this, L).write(s);
     } catch (t) {
       console.error(t);
     }
@@ -3767,9 +3770,9 @@ let kt = class extends ti {
    * @returns
    */
   async getImageFileMetadata(s) {
-    d(this, O) || E(this, O, new St());
+    d(this, L) || M(this, L, new Mt());
     try {
-      return await d(this, O).read(s);
+      return await d(this, L).read(s);
     } catch (t) {
       console.error(t);
     }
@@ -3778,9 +3781,9 @@ let kt = class extends ti {
    * @returns All file metadata saved in connected storage
    */
   async getAllImageFileMetdata() {
-    d(this, O) || E(this, O, new St());
+    d(this, L) || M(this, L, new Mt());
     try {
-      return await d(this, O).readAll();
+      return await d(this, L).readAll();
     } catch (s) {
       console.error(s);
     }
@@ -3789,15 +3792,15 @@ let kt = class extends ti {
    * Schedule the auto save to the canvas storage based on timer
    */
   debounceSaveToCanvasStorage(s = 1e3) {
-    d(this, k) || E(this, k, new Yt(this.name)), clearTimeout(d(this, It)), E(this, It, setTimeout(this.saveToCanvasStorage, s));
+    d(this, k) || M(this, k, new $t(this.name)), clearTimeout(d(this, Pt)), M(this, Pt, setTimeout(this.saveToCanvasStorage, s));
   }
   async saveToCanvasStorage() {
-    d(this, k) || E(this, k, new Yt(this.name)), d(this, k).write(jt(d(this, p))).then(() => d(this, _).emit(et.SaveCompleted)).catch(() => d(this, _).emit(et.SaveFailed));
+    d(this, k) || M(this, k, new $t(this.name)), d(this, k).write(Vt(d(this, p))).then(() => d(this, _).emit(st.SaveCompleted)).catch(() => d(this, _).emit(st.SaveFailed));
   }
   async restoreStateFromCanvasStorage() {
-    d(this, k) || E(this, k, new Yt(this.name));
+    d(this, k) || M(this, k, new $t(this.name));
     const s = await d(this, k).read(), t = JSON.parse(s);
-    t && await Vt(t, d(this, p), this.getImageFileMetadata);
+    t && await Zt(t, d(this, p), this.getImageFileMetadata);
   }
   // Canvas API
   togglePointerMode() {
@@ -3814,30 +3817,30 @@ let kt = class extends ti {
   }
   async addImages(s) {
     if (!d(this, p)) return;
-    const t = d(this, p).getBoundingClientRect(), e = t.left + t.width / 2, i = t.top + t.height / 2, [r, n] = wt(e, i, d(this, p)), a = await li(
+    const t = d(this, p).getBoundingClientRect(), e = t.left + t.width / 2, i = t.top + t.height / 2, [r, n] = K(e, i, d(this, p)), a = await ui(
       s,
       (o) => d(this, p).addImageToCanvas(o, r, n, 1, 1, !0)
     );
-    d(this, j).push(Bt(d(this, p), a));
+    d(this, j).push(zt(d(this, p), a));
   }
   async removeImage(s) {
     if (!d(this, p)) return;
     const t = d(this, p).getChild(s);
-    d(this, p).removeChild(t), d(this, j).push(gi(d(this, p), t));
+    d(this, p).removeChild(t), d(this, j).push(pi(d(this, p), t));
   }
   /**
    * @param url Currently only accept base64 url and the image is automatically added to screen center
    */
   async addImageFromUrl(s) {
     if (!d(this, p)) return;
-    const t = d(this, p).getBoundingClientRect(), e = t.left + t.width / 2, i = t.top + t.height / 2, [r, n] = wt(e, i, d(this, p)), a = await d(this, p).addImageToCanvas(s, r, n, 1, 1, !0);
-    d(this, j).push(Bt(d(this, p), [a]));
+    const t = d(this, p).getBoundingClientRect(), e = t.left + t.width / 2, i = t.top + t.height / 2, [r, n] = K(e, i, d(this, p)), a = await d(this, p).addImageToCanvas(s, r, n, 1, 1, !0);
+    d(this, j).push(zt(d(this, p), [a]));
   }
   async copyImage() {
-    d(this, p) && await _e(d(this, p).getSelected());
+    d(this, p) && await Re(d(this, p).getSelected());
   }
   async pasteImage(s) {
-    d(this, p) && await Re(s.clientX, s.clientY, d(this, p), d(this, j), !1);
+    d(this, p) && await Ie(s.clientX, s.clientY, d(this, p), d(this, j), !1);
   }
   flipVertical() {
     d(this, p) && d(this, p).selectionManager.flip("vertical");
@@ -3859,22 +3862,22 @@ let kt = class extends ti {
   }
   async exportCanvas(s = "infinite-canvas.json") {
     if (!d(this, p)) return;
-    d(this, _).emit(tt.start, "spinner");
-    const t = await this.getAllImageFileMetdata(), e = jt(d(this, p), t);
-    ui(s, e), d(this, _).emit(tt.done);
+    d(this, _).emit(it.start, "spinner");
+    const t = await this.getAllImageFileMetdata(), e = Vt(d(this, p), t);
+    fi(s, e), d(this, _).emit(it.done);
   }
   async importCanvas(s) {
-    if (d(this, _).emit(tt.start, "spinner"), !d(this, p) || !s || s.length !== 1) return;
+    if (d(this, _).emit(it.start, "spinner"), !d(this, p) || !s || s.length !== 1) return;
     const t = s[0];
     if (!t.type || !t.type.includes("json") && !t.name.toLowerCase().endsWith(".json"))
       return;
-    const e = await fi(t);
-    await Vt(
+    const e = await mi(t);
+    await Zt(
       e,
       d(this, p),
       this.getImageFileMetadata,
       this.saveImageFileMetadata
-    ), d(this, _).emit(et.Save), d(this, _).emit(tt.done);
+    ), d(this, _).emit(st.Save), d(this, _).emit(it.done);
   }
   clearCanvas() {
     d(this, p) && d(this, p).clearChildren();
@@ -3896,25 +3899,26 @@ let kt = class extends ti {
 };
 p = /* @__PURE__ */ new WeakMap();
 _ = /* @__PURE__ */ new WeakMap();
-Rt = /* @__PURE__ */ new WeakMap();
+It = /* @__PURE__ */ new WeakMap();
 j = /* @__PURE__ */ new WeakMap();
-O = /* @__PURE__ */ new WeakMap();
+L = /* @__PURE__ */ new WeakMap();
 k = /* @__PURE__ */ new WeakMap();
-mt = /* @__PURE__ */ new WeakMap();
-It = /* @__PURE__ */ new WeakMap();
 gt = /* @__PURE__ */ new WeakMap();
-q = /* @__PURE__ */ new WeakMap();
-rt = /* @__PURE__ */ new WeakMap();
 Pt = /* @__PURE__ */ new WeakMap();
+pt = /* @__PURE__ */ new WeakMap();
+xt = /* @__PURE__ */ new WeakMap();
+q = /* @__PURE__ */ new WeakMap();
+at = /* @__PURE__ */ new WeakMap();
 At = /* @__PURE__ */ new WeakMap();
+Lt = /* @__PURE__ */ new WeakMap();
 Ot = /* @__PURE__ */ new WeakMap();
-kt.properties = {
+Ut.properties = {
   name: { type: String, reflect: !0 },
   width: { type: String, reflect: !0 },
   height: { type: String, reflect: !0 },
   displayMode: { type: String, reflect: !0 }
 };
-kt.styles = Je`
+Ut.styles = ti`
     :host {
       position: relative;
       overflow: hidden;
@@ -4043,10 +4047,10 @@ kt.styles = Je`
       word-break: break-word;
     }
   `;
-kt = Ms([
-  Hi("infinite-canvas")
-], kt);
-class We {
+Ut = Es([
+  Ni("infinite-canvas")
+], Ut);
+class Fe {
   constructor(t) {
     if (!t) throw new Error("InfiniteCanvasElement is required");
     this.el = t, this.assignCanvasStorage = this.assignCanvasStorage.bind(this), this.zoomIn = this.zoomIn.bind(this), this.zoomOut = this.zoomOut.bind(this), this.toggleMode = this.toggleMode.bind(this), this.addImageFromLocal = this.addImageFromLocal.bind(this), this.exportCanvas = this.exportCanvas.bind(this), this.importCanvas = this.importCanvas.bind(this), this.clearCanvas = this.clearCanvas.bind(this);
@@ -4058,7 +4062,7 @@ class We {
     )) : e = t, !e) throw new Error("infinite-canvas element not found");
     return e.canvas || await new Promise(
       (i) => e.addEventListener("load", () => i(), { once: !0 })
-    ), new We(e);
+    ), new Fe(e);
   }
   /**
    * Without assigning storage, the canvas will not save any data
@@ -4100,11 +4104,11 @@ class We {
   }
 }
 export {
-  Wi as Camera,
-  zt as Canvas,
-  We as InfiniteCanvasAPI,
-  kt as InfiniteCanvasElement,
-  Ui as ZOOM_MAX,
-  ki as ZOOM_MIN
+  Fi as Camera,
+  kt as Canvas,
+  Fe as InfiniteCanvasAPI,
+  Ut as InfiniteCanvasElement,
+  Wi as ZOOM_MAX,
+  Ui as ZOOM_MIN
 };
 //# sourceMappingURL=index.js.map