@reffy/infinite-canvas 0.0.11 → 0.0.12

package/dist/index.js

@@ -1,4114 +0,0 @@
-var se = (s) => {
-  throw TypeError(s);
-};
-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 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 ae(s) {
-  return ne[s] ? ne[s] : s;
-}
-const Te = 8, Kt = 2, E = {
-  identity: function() {
-    return [1, 0, 0, 0, 1, 0, 0, 0, 1];
-  },
-  translation: function(s, t) {
-    return [1, 0, 0, 0, 1, 0, s, t, 1];
-  },
-  rotation: function(s) {
-    var t = Math.cos(s), e = Math.sin(s);
-    return [t, -e, 0, e, t, 0, 0, 0, 1];
-  },
-  scaling: function(s, t) {
-    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], 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 [
-      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 * l,
-      v * e + A * n + T * h,
-      v * i + A * a + T * c,
-      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], 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];
-    return e[0] = 2 / s, e[1] = 0, e[2] = 0, e[3] = 0, e[4] = -2 / t, e[5] = 0, e[6] = -1, e[7] = 1, e[8] = 1, e;
-  },
-  transformPoint(s, t) {
-    var e = t[0], i = t[1], r = e * s[2] + i * s[5] + s[8];
-    return [
-      (e * s[0] + i * s[3] + s[6]) / r,
-      (e * s[1] + i * s[4] + s[7]) / r
-    ];
-  }
-};
-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 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 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 K(s, t, e) {
-  const { gl: i, canvas: r } = e;
-  return ni(
-    s,
-    t,
-    i.canvas.width,
-    i.canvas.height,
-    r,
-    e.worldMatrix
-  );
-}
-function U(s, t, e) {
-  const i = t ?? 0, r = e ?? 0;
-  return [
-    s[0] * i + s[3] * r + s[6],
-    s[1] * i + s[4] * r + s[7]
-  ];
-}
-function ai(s) {
-  return Math.hypot(s[0], s[1]);
-}
-function oi(s) {
-  return Math.hypot(s[3], s[4]);
-}
-function tt(s) {
-  return [ai(s), oi(s)];
-}
-function he(s) {
-  return s / Math.abs(s);
-}
-function Tt(s) {
-  return [he(s[0]), he(s[4])];
-}
-const Dt = (s, t) => Math.abs(s) < t ? 0 : Math.sign(s), Bt = (s, t, e) => {
-  const i = s * t;
-  return Dt(s, e) !== Dt(i, e);
-};
-async function hi(s) {
-  return new Promise((t, e) => {
-    let i = new FileReader();
-    i.onload = (r) => {
-      t(r.target.result);
-    }, i.onerror = e, i.readAsDataURL(s);
-  });
-}
-const ci = [
-  "image/webp",
-  "image/png",
-  "image/jpeg",
-  "image/jpg",
-  "image/svg+xml",
-  "image/avif",
-  "image/gif",
-  // will be rendered as a still image
-  "image/apng"
-  // will be rendered as a still image
-];
-function di(s) {
-  return ci.includes(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 li(s) {
-  const t = /^data:([^;]+);base64,/.exec(s);
-  return t ? t[1] : void 0;
-}
-async function ui(s, t) {
-  const e = [];
-  if (s.length > 0)
-    for (let i = 0; i < s.length; i++) {
-      const r = s[i];
-      if (di(r.type))
-        try {
-          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.");
-        }
-    }
-  return e;
-}
-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 mi(s) {
-  const t = await s.text();
-  return JSON.parse(t);
-}
-function _e(s, t = 1) {
-  return new Promise((e, i) => {
-    const r = new Image();
-    r.onload = () => {
-      const n = document.createElement("canvas");
-      n.width = r.width, n.height = r.height;
-      const a = n.getContext("2d");
-      a.clearRect(0, 0, n.width, n.height), a.drawImage(r, 0, 0);
-      const o = n.toDataURL("image/png", t);
-      e(o);
-    }, r.onerror = i, r.src = s;
-  });
-}
-const ot = [0.33, 0.6, 0.95, 1], Ct = [
-  0.33,
-  0.6,
-  0.95,
-  0.6
-], gi = [
-  0.33,
-  0.6,
-  0.95,
-  0.4
-];
-function zt(s, t, e = "Add Child") {
-  return {
-    label: e,
-    do() {
-      for (const i of t)
-        s.appendChild(i);
-    },
-    undo() {
-      for (const i of t)
-        s.removeChild(i);
-    }
-  };
-}
-function pi(s, t, e = "Remove Child") {
-  let i = -1;
-  return {
-    label: e,
-    do() {
-      i = s.children.indexOf(t), i >= 0 && s.children.splice(i, 1);
-    },
-    undo() {
-      if (i < 0) {
-        s.children.push(t);
-        return;
-      }
-      s.children.splice(i, 0, t);
-    }
-  };
-}
-function xi(s, t, e = "Remove Children") {
-  let i = [];
-  return {
-    label: e,
-    do() {
-      const r = new Set(t);
-      i = [], s.children.forEach((n, a) => {
-        r.has(n) && i.push({ child: n, idx: a });
-      }), i.slice().sort((n, a) => a.idx - n.idx).forEach(({ child: n }) => {
-        s.removeChild(n);
-      });
-    },
-    undo() {
-      i.slice().sort((r, n) => r.idx - n.idx).forEach(({ child: r, idx: n }) => {
-        s.children.includes(r) || (s.children.splice(
-          Math.min(n, s.children.length),
-          0,
-          r
-        ), r.addParent(s));
-      }), s.markOrderDirty();
-    }
-  };
-}
-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) => ({
-      src: n.src,
-      x: n.x,
-      y: n.y,
-      sx: n.sx,
-      sy: n.sy
-    }))
-  }, i = JSON.stringify(e), r = new ClipboardItem({
-    "text/plain": new Blob([i], { type: "text/plain" })
-  });
-  if (wi())
-    try {
-      await navigator.clipboard.write([r]);
-      return;
-    } catch (n) {
-      console.error(n);
-    }
-  if (!vi(i))
-    throw new Error("Error copying to clipboard.");
-}
-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";
-  const i = window.pageYOffset || document.documentElement.scrollTop;
-  e.style.top = `${i}px`, e.style.fontSize = "12pt", e.setAttribute("readonly", ""), e.value = s, document.body.appendChild(e);
-  let r = !1;
-  try {
-    e.select(), e.setSelectionRange(0, e.value.length), r = document.execCommand("copy");
-  } catch (n) {
-    console.error(n);
-  }
-  return e.remove(), r;
-}
-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 (!yi.find(
-      (m) => m.endsWith("/") ? c.startsWith(m) : c === m
-    )) continue;
-    const u = await n[0].getType(c);
-    try {
-      if (c === "text/plain") {
-        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)
-          v.x < w && (w = v.x), v.y < x && (x = v.y);
-        const C = await Promise.all(
-          m.elements.map(
-            (v) => e.addImageToCanvas(
-              v.src,
-              o + v.x - w,
-              h + v.y - x,
-              v.sx,
-              v.sy
-            )
-          )
-        );
-        i.push(zt(e, C));
-        return;
-      }
-    } catch (m) {
-      console.error("Failed to parse clipboard data", m);
-      continue;
-    }
-    let g;
-    if (c.startsWith("image/svg"))
-      try {
-        const m = await u.text();
-        g = await _e(
-          `data:image/svg+xml;base64,${btoa(m)}`
-        );
-      } catch (m) {
-        console.error("SVG conversion failed", m);
-        continue;
-      }
-    else
-      try {
-        g = await new Promise((m, w) => {
-          const x = new FileReader();
-          x.onloadend = () => m(x.result), x.onerror = w, x.readAsDataURL(u);
-        });
-      } catch (m) {
-        console.error("Image read failed", m);
-        continue;
-      }
-    try {
-      const m = await e.addImageToCanvas(g, o, h);
-      i.push(zt(e, [m]));
-      return;
-    } catch (m) {
-      console.error("Failed to add image to canvas", m);
-      continue;
-    }
-  }
-}
-const H = {
-  Open: "opencontextmenu",
-  Close: "closecontextmenu"
-}, N = {
-  Save: "save",
-  Change: "statechange"
-}, it = {
-  start: "startloading",
-  done: "completeloading"
-}, st = {
-  Save: "save",
-  SaveCompleted: "savecompleted",
-  SaveFailed: "savefailed"
-}, bi = `
-attribute vec2 a_position;
-
-uniform vec2 u_resolution;
-uniform mat3 u_matrix;
-uniform float u_z;
-
-// all shaders have a main function
-void main() {
-  vec2 position = (u_matrix * vec3(a_position, 1)).xy;
-
-  vec2 zeroToOne = position / u_resolution;
-  vec2 zeroToTwo = zeroToOne * 2.0;
-  vec2 clipSpace = zeroToTwo - 1.0;
-  float z = mix(1.0, -1.0, u_z);
-
-  gl_Position = vec4(clipSpace * vec2(1, -1), z, 1);
-}
-`, Ci = `
-precision mediump float;
-uniform vec4 u_color;
-
-void main() {
-  gl_FragColor = u_color;
-}
-`, Si = (
-  /* glsl */
-  `
-#extension GL_OES_standard_derivatives : enable
-#ifdef GL_FRAGMENT_PRECISION_HIGH
-precision highp float;
-precision highp int;
-#else
-precision mediump float;
-precision mediump int;
-#endif
-
-uniform mat3 u_ViewProjectionInvMatrix;
-uniform float u_ZoomScale;
-uniform float u_CheckboardStyle;
-uniform float u_z;
-
-attribute vec2 a_Position;
-
-varying vec2 v_Position;
-
-vec2 project_clipspace_to_world(vec2 p) {
-  return (u_ViewProjectionInvMatrix * vec3(p, 1.0)).xy;
-}
-
-void main() {
-  v_Position = project_clipspace_to_world(a_Position);
-  float z = mix(1.0, -1.0, u_z);
-  gl_Position = vec4(a_Position, z, 1.0);
-}
-`
-), Mi = (
-  /* glsl */
-  `
-#extension GL_OES_standard_derivatives : enable
-#ifdef GL_FRAGMENT_PRECISION_HIGH
-precision highp float;
-precision highp int;
-#else
-precision mediump float;
-precision mediump int;
-#endif
-
-uniform mat3 u_ViewProjectionInvMatrix;
-uniform float u_ZoomScale;
-uniform float u_CheckboardStyle;
-
-varying vec2 v_Position;
-
-const vec4 GRID_COLOR = vec4(0.87, 0.87, 0.87, 1.0);
-const vec4 PAGE_COLOR = vec4(0.986, 0.986, 0.986, 1.0);
-const int CHECKERBOARD_STYLE_NONE = 0;
-const int CHECKERBOARD_STYLE_GRID = 1;
-const int CHECKERBOARD_STYLE_DOTS = 2;
-const float BASE_GRID_PIXEL_SIZE = 100.0;
-
-vec2 scale_grid_size(float zoom) {
-  if (zoom < 0.125) return vec2(BASE_GRID_PIXEL_SIZE * 125.0, 0.125);
-  else if (zoom < 0.25) return vec2(BASE_GRID_PIXEL_SIZE * 25.0, 0.25);
-  else if (zoom < 0.5) return vec2(BASE_GRID_PIXEL_SIZE * 5.0, 0.5);
-  return vec2(BASE_GRID_PIXEL_SIZE, 4.0);
-}
-
-vec4 render_grid_checkerboard(vec2 coord) {
-  float alpha = 0.0;
-
-  vec2 size = scale_grid_size(u_ZoomScale);
-  float gridSize1 = size.x;
-  float gridSize2 = gridSize1 / 10.0;
-  float zoomStep = size.y;
-  int checkboardStyle = int(floor(u_CheckboardStyle + 0.5));
-
-  if (checkboardStyle == CHECKERBOARD_STYLE_GRID) {
-    vec2 grid1 = abs(fract(coord / gridSize1 - 0.5) - 0.5) / fwidth(coord) * gridSize1 / 2.0;
-    vec2 grid2 = abs(fract(coord / gridSize2 - 0.5) - 0.5) / fwidth(coord) * gridSize2;
-    float v1 = 1.0 - min(min(grid1.x, grid1.y), 1.0);
-    float v2 = 1.0 - min(min(grid2.x, grid2.y), 1.0);
-
-    if (v1 > 0.0) {
-      alpha = v1;
-    } else {
-      alpha = v2 * clamp(u_ZoomScale / zoomStep, 0.0, 1.0);
-    }
-  }
-    
-  return mix(PAGE_COLOR, GRID_COLOR, alpha);
-}
-
-void main() {
-  gl_FragColor = render_grid_checkerboard(v_Position);
-}
-`
-), Ei = `
-attribute vec2 a_position;
-attribute vec2 a_texCoord;
-
-uniform vec2 u_resolution;
-uniform mat3 u_matrix;
-uniform float u_z;
-
-varying vec2 v_texCoord;
-
-void main() {
-  vec2 position = (u_matrix * vec3(a_position, 1)).xy;
-  vec2 zeroToOne = position / u_resolution;
-  vec2 zeroToTwo = zeroToOne * 2.0;
-  vec2 clipSpace = zeroToTwo - 1.0;
-  float z = mix(1.0, -1.0, u_z);
-
-  gl_Position = vec4(clipSpace * vec2(1, -1), z, 1);
-
-  v_texCoord = a_texCoord;
-}
-`, Ti = `
-#ifdef GL_FRAGMENT_PRECISION_HIGH
-precision highp float;
-#else
-precision mediump float;
-#endif
- 
-uniform sampler2D u_image;
- 
-varying vec2 v_texCoord;
- 
-void main() {
-  gl_FragColor = texture2D(u_image, v_texCoord);
-}
-`;
-var z = /* @__PURE__ */ ((s) => (s[s.ACTIVE = 0] = "ACTIVE", s[s.PASSIVE = 1] = "PASSIVE", s))(z || {});
-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 = 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 ? tt(e) : [1, 1], { width: n, height: a, borderSize: o } = this, [h, c] = U(e), [l, u] = Tt(e);
-    return {
-      TOP: {
-        x: l > 0 ? h : h - n * i,
-        y: c,
-        width: n * i,
-        height: o
-      },
-      BOTTOM: {
-        x: l > 0 ? h : h - n * i,
-        y: c + a * r * u,
-        width: n * i,
-        height: o
-      },
-      LEFT: {
-        x: h,
-        y: u > 0 ? c : c - a * r,
-        width: o,
-        height: a * r
-      },
-      RIGHT: {
-        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 ? tt(e) : [1, 1], { width: n, height: a, boxSize: o } = this, [h, c] = U(e), [l, u] = Tt(e);
-    return {
-      TOPLEFT: {
-        x: h - o,
-        y: c - o,
-        width: o * 2,
-        height: o * 2
-      },
-      TOPRIGHT: {
-        x: h - o + n * i * l,
-        y: c - o,
-        width: o * 2,
-        height: o * 2
-      },
-      BOTTOMLEFT: {
-        x: h - o,
-        y: c - o + a * r * u,
-        width: o * 2,
-        height: o * 2
-      },
-      BOTTOMRIGHT: {
-        x: h - o + n * i * l,
-        y: c - o + a * r * u,
-        width: o * 2,
-        height: o * 2
-      }
-    }[t];
-  }
-  setPassive() {
-    this.mode = z.PASSIVE, this.removeCorners();
-  }
-  setActive() {
-    this.mode = z.ACTIVE, this.addCorners();
-  }
-  getPositions() {
-    return this.target.getPositions();
-  }
-  /**
-   * x and y should be world position
-   */
-  hitTest(t, e, i) {
-    if (this.mode === z.PASSIVE) return;
-    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 - l && h <= S.x + S.width + l && c >= S.y - l && c <= S.y + S.height + l)
-        return T;
-    }
-    for (const T of yt) {
-      const S = this.getSidesInScreenSpace(T, this.target.worldMatrix);
-      if (h >= S.x - l && h <= S.x + S.width + l && c >= S.y - l && c <= S.y + S.height + l)
-        return T;
-    }
-    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";
-  }
-  update() {
-    this.updateSides(), this.updateCorners();
-  }
-  render(t, e) {
-    this.update();
-    for (const [i, r] of this.sides.entries())
-      r.render(t, e);
-    for (const [i, r] of this.corners.entries())
-      r.render(t, e);
-  }
-  destroy() {
-    for (const [t, e] of this.sides.entries())
-      e.destroy();
-    for (const [t, e] of this.corners.entries())
-      e.destroy();
-  }
-  move(t, e) {
-    this.target.updateTranslation(t, e);
-  }
-  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, 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") {
-        const A = n * h, T = n * this.target.sy;
-        this.target.updateTranslation(t, (A - T) / 2);
-      } else if (i === "RIGHT") {
-        const A = n * h, T = n * this.target.sy;
-        this.target.updateTranslation(0, (A - T) / 2);
-      } else if (i === "TOP") {
-        const A = r * o, T = r * this.target.sx;
-        this.target.updateTranslation((A - T) / 2, e);
-      } else if (i === "BOTTOM") {
-        const A = r * o, T = r * this.target.sx;
-        this.target.updateTranslation((A - T) / 2, 0);
-      } else i === "BOTTOMLEFT" ? this.target.updateTranslation(t, 0) : i === "TOPLEFT" ? this.target.updateTranslation(
-        t,
-        t / a * Math.sign(this.target.sx)
-      ) : i === "TOPRIGHT" && this.target.updateTranslation(
-        0,
-        -t / a * Math.sign(this.target.sx)
-      );
-    }
-  }
-  // a reset method to reset the scale
-  reset() {
-    this.target.setScale(1, 1);
-  }
-  flip(t) {
-    const { x: e, y: i, sx: r, sy: n } = this.target;
-    return t === "vertical" ? this.target.flipVertical(this.height) : this.target.flipHorizontal(this.width), {
-      ref: this.target,
-      start: { x: e, y: i, sx: r, sy: n },
-      end: {
-        x: this.target.x,
-        y: this.target.y,
-        sx: this.target.sx,
-        sy: this.target.sy
-      }
-    };
-  }
-  addCorners() {
-    for (const t of Et) {
-      const e = new Z(
-        this.getCornersInScreenSpace(t, this.target.worldMatrix)
-      );
-      e.color = this.mode === z.ACTIVE ? ot : Ct, this.corners.set(t, e);
-    }
-  }
-  removeCorners() {
-    this.corners.clear();
-  }
-  updateCorners() {
-    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 ? ot : Ct);
-    }
-  }
-  addSides() {
-    for (const t of yt) {
-      const e = new Z(
-        this.getSidesInScreenSpace(t, this.target.worldMatrix)
-      );
-      e.color = this.mode === z.ACTIVE ? ot : Ct, this.sides.set(t, e);
-    }
-  }
-  updateSides() {
-    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 ? ot : Ct);
-    }
-  }
-}
-const Nt = [
-  ...Et,
-  ...yt
-];
-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();
-  }
-  add(t) {
-    this.targets.includes(t) || this.targets.push(t);
-  }
-  remove(t) {
-    const e = this.targets.indexOf(t);
-    e != -1 && this.targets.splice(e, 1);
-  }
-  render(t, e) {
-    this.update();
-    for (const [i, r] of this.handles.entries())
-      r.render(t, e);
-  }
-  update() {
-    this.borderSize = Kt, this.boxSize = Te / 2, this.recalculateBounds(), this.updateHandles();
-  }
-  destroy() {
-    for (const [t, e] of this.handles.entries())
-      e.destroy();
-  }
-  move(t, e) {
-    for (const i of this.targets)
-      i.updateTranslation(t, e);
-  }
-  // 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"), 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 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) {
-    tt(t);
-    const r = [], [n, a] = i(this.x, this.y);
-    for (const o of this.targets) {
-      const h = {
-        ref: o,
-        start: { x: o.x, y: o.y, sx: o.sx, sy: o.sy }
-      };
-      if (e === "vertical") {
-        const c = o.height * o.sy;
-        o.setTranslation(o.x, -o.y - c), o.flipVertical(o.height);
-      } else {
-        const c = o.width * o.sx;
-        o.setTranslation(-o.x - c, o.y), o.flipHorizontal(o.width);
-      }
-      h.end = {
-        x: o.x,
-        y: o.y,
-        sx: o.sx,
-        sy: o.sy
-      }, r.push(h);
-    }
-    return r;
-  }
-  align(t) {
-    if (this.targets.length <= 1) return;
-    const e = [], i = [
-      t === "top" ? 1 : t === "bottom" ? -1 : 0,
-      t === "left" ? 1 : t === "right" ? -1 : 0
-    ];
-    let r = i[0] !== 0 ? 1 / 0 * i[0] : 1 / 0 * i[1];
-    for (const [n, a] of this.targets.entries()) {
-      const o = a.getBoundingBox();
-      r = t === "top" || t === "left" ? Math.min(t === "top" ? o.minY : o.minX, r) : Math.max(t === "bottom" ? o.maxY : o.maxX, r);
-    }
-    for (const n of this.targets) {
-      const a = {
-        ref: n,
-        start: { x: n.x, y: n.y, sx: n.sx, sy: n.sy }
-      }, o = n.getBoundingBox();
-      n.updateTranslation(
-        t === "top" || t === "bottom" ? 0 : r - (t === "left" ? o.minX : o.maxX),
-        t === "top" || t === "bottom" ? r - (t === "top" ? o.minY : o.maxY) : 0
-      ), a.end = {
-        x: n.x,
-        y: n.y,
-        sx: n.sx,
-        sy: n.sy
-      }, e.push(a);
-    }
-    return e;
-  }
-  normalize(t, e) {
-    const i = [], r = this.targets[0], n = t === "height" ? e === "first" ? r.height * r.sy : this.targets.reduce((a, o) => a + Math.abs(o.height * o.sy), 0) / this.targets.length : t === "width" ? e === "first" ? r.width * r.sx : this.targets.reduce((a, o) => a + Math.abs(o.width * o.sx), 0) / this.targets.length : t === "scale" ? e === "first" ? r.sx : this.targets.reduce((a, o) => a + Math.abs(o.sx), 0) / this.targets.length : e === "first" ? r.width * r.height * r.sx * r.sy : this.targets.reduce(
-      (a, o) => a + Math.abs(o.sx * o.width * o.height * o.sy),
-      0
-    ) / this.targets.length;
-    for (const a of this.targets) {
-      const o = {
-        ref: a,
-        start: { x: a.x, y: a.y, sx: a.sx, sy: a.sy }
-      }, h = [
-        (a.x + a.width * a.sx) / 2,
-        (a.y + a.height * a.sy) / 2
-      ];
-      if (t === "height") {
-        const l = a.height * a.sy, u = Math.abs(n / l);
-        a.updateScale(u, u);
-      } else if (t === "width") {
-        const l = a.width * a.sx, u = Math.abs(n / l);
-        a.updateScale(u, u);
-      } else if (t === "scale") {
-        const l = Math.sign(a.sx), u = Math.sign(a.sy);
-        a.setScale(n * l, n * u);
-      } else if (t === "size") {
-        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,
-        (a.y + a.height * a.sy) / 2
-      ];
-      a.updateTranslation(
-        h[0] - c[0],
-        h[1] - c[1]
-      ), o.end = {
-        x: a.x,
-        y: a.y,
-        sx: a.sx,
-        sy: a.sy
-      }, i.push(o);
-    }
-    return i;
-  }
-  getPositions() {
-    return [
-      this.x,
-      this.y,
-      // Top-left
-      this.x + this.width,
-      this.y,
-      // Top-right
-      this.x + this.width,
-      this.y + this.height,
-      // Bottom-right
-      this.x,
-      this.y + this.height
-      // Bottom-left
-    ];
-  }
-  hitTest(t, e, i) {
-    const [r, n] = U(i, t, e), a = 4;
-    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 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, l] = U(
-        a.worldMatrix,
-        a.width,
-        a.height
-      );
-      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 };
-  }
-  recalculateBounds() {
-    const { minX: t, minY: e, maxX: i, maxY: r } = this.getBounds();
-    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 Nt) {
-      const e = this.getHandleConfig(t), i = new Z(e);
-      i.color = ot, this.handles.set(t, i);
-    }
-  }
-  updateHandles() {
-    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);
-    }
-  }
-  getHandleConfig(t) {
-    let { x: e, y: i, width: r, height: n, borderSize: a, boxSize: o } = this;
-    return {
-      TOP: {
-        x: e,
-        y: i,
-        width: r,
-        height: a
-      },
-      BOTTOM: {
-        x: e,
-        y: i + n,
-        width: r,
-        height: a
-      },
-      LEFT: {
-        x: e,
-        y: i,
-        width: a,
-        height: n
-      },
-      RIGHT: {
-        x: e + r,
-        y: i,
-        width: a,
-        height: n
-      },
-      TOPLEFT: {
-        x: e - o,
-        y: i - o,
-        width: o * 2,
-        height: o * 2
-      },
-      TOPRIGHT: {
-        x: e - o + r,
-        y: i - o,
-        width: o * 2,
-        height: o * 2
-      },
-      BOTTOMLEFT: {
-        x: e - o,
-        y: i - o + n,
-        width: o * 2,
-        height: o * 2
-      },
-      BOTTOMRIGHT: {
-        x: e - o + r,
-        y: i - o + n,
-        width: o * 2,
-        height: o * 2
-      }
-    }[t];
-  }
-}
-class et {
-  // matrix: number[];
-  constructor(t, e, i, r) {
-    this.minX = t, this.minY = e, this.maxX = i, this.maxY = r;
-  }
-  getArea() {
-    return (this.maxY - this.minY) * (this.maxX - this.minX);
-  }
-  static isColliding(t, e) {
-    return t.minX <= e.maxX && t.maxX >= e.minX && t.minY <= e.maxY && t.maxY >= e.minY;
-  }
-}
-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);
-    this.x = r, this.y = n, this.addRects();
-  }
-  getRectConfig(t) {
-    let { x: e, y: i, width: r, height: n, borderSize: a } = this;
-    return {
-      TOP: {
-        x: e,
-        y: i,
-        width: r < 0 ? r : r + a,
-        height: a
-      },
-      BOTTOM: {
-        x: e,
-        y: i + n,
-        width: r < 0 ? r : r + a,
-        height: a
-      },
-      LEFT: {
-        x: n < 0 && r < 0 ? e - a : e,
-        y: i,
-        width: a,
-        height: n < 0 && r < 0 ? n : n + a
-      },
-      RIGHT: {
-        x: e + r,
-        y: i,
-        width: a,
-        height: n < 0 ? n : n + a
-      },
-      CENTER: {
-        x: e,
-        y: i,
-        width: r,
-        height: n
-      }
-    }[t];
-  }
-  render(t, e) {
-    this.update();
-    for (const [i, r] of this.rects.entries())
-      r.render(t, e);
-  }
-  update() {
-    this.borderSize = Kt, this.updateRects();
-  }
-  destroy() {
-    for (const [t, e] of this.rects.entries())
-      e.destroy();
-  }
-  /**
-   * Apply bounding box in world dimension
-   * @returns
-   */
-  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 et(a, h, o, c);
-  }
-  resize(t, e, i) {
-    const [r, n] = tt(i);
-    this.width += t * r, this.height += e * n;
-  }
-  addRects() {
-    for (const t of de) {
-      const e = this.getRectConfig(t), i = new Z(e);
-      i.color = ot, this.rects.set(t, i);
-    }
-  }
-  updateRects() {
-    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 = gi));
-    }
-  }
-}
-class Ii {
-  constructor(t = {}) {
-    const {
-      x: e = 0,
-      y: i = 0,
-      width: r = 0,
-      height: n = 0,
-      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, Ee(this, {
-      x: B,
-      y: B,
-      width: B,
-      height: B,
-      rotation: B,
-      zoom: B,
-      setX: b,
-      setY: b,
-      setPosition: b,
-      incrementPosition: b,
-      setWidth: b,
-      setHeight: b,
-      setSize: b,
-      setZoom: b,
-      setRotation: b,
-      stateVector: nt
-    });
-  }
-  // Actions
-  setX(t) {
-    this.x = t;
-  }
-  setY(t) {
-    this.y = t;
-  }
-  setPosition(t, e) {
-    this.x = t, this.y = e;
-  }
-  incrementPosition(t, e) {
-    this.x += t, this.y += e;
-  }
-  setWidth(t) {
-    this.width = t;
-  }
-  setHeight(t) {
-    this.height = t;
-  }
-  setSize(t, e) {
-    this.width = t, this.height = e;
-  }
-  setZoom(t) {
-    this.zoom = t;
-  }
-  setRotation(t) {
-    this.rotation = t;
-  }
-  get dimension() {
-    return [this.width, this.height];
-  }
-  get position() {
-    return [this.x, this.y];
-  }
-  get stateVector() {
-    return [this.x, this.y, this.width, this.height, this.rotation, this.zoom];
-  }
-  get translationMatrix() {
-    return E.translation(this.x, this.y);
-  }
-  get rotationMatrix() {
-    return E.rotation(this.rotation);
-  }
-  get scaleMatrix() {
-    return E.scaling(this.zoom, this.zoom);
-  }
-  get cameraMatrix() {
-    const t = E.multiply(this.translationMatrix, this.rotationMatrix);
-    return E.multiply(t, this.scaleMatrix);
-  }
-  get canvasMatrix() {
-    return E.inverse(this.cameraMatrix);
-  }
-}
-function le(s, t) {
-  s.setTranslation(t.x, t.y), s.setScale(t.sx, t.sy);
-}
-function ue(s, t, e) {
-  return {
-    label: "Flip",
-    do() {
-      for (const i of s) le(i.ref, i.end);
-      e && (e.scale[t === "horizontal" ? 0 : 1] *= -1);
-    },
-    undo() {
-      for (const i of s) le(i.ref, i.start);
-      e && (e.scale[t === "horizontal" ? 0 : 1] *= -1);
-    }
-  };
-}
-function fe(s, t) {
-  s.setTranslation(t.x, t.y), s.setScale(t.sx, t.sy);
-}
-function jt(s, t = "Transform") {
-  return {
-    label: t,
-    do() {
-      for (const e of s) fe(e.ref, e.end);
-    },
-    undo() {
-      for (const e of s) fe(e.ref, e.start);
-    }
-  };
-}
-class Pi {
-  // #canvas: Canvas;
-  #s;
-  #i = /* @__PURE__ */ new Set();
-  #e = /* @__PURE__ */ new Set();
-  #t;
-  #r;
-  #a;
-  get multiBoundingBox() {
-    return this.#t;
-  }
-  get boundingBoxes() {
-    return this.#e;
-  }
-  #o = !0;
-  #n;
-  #h;
-  get selected() {
-    return Array.from(this.#i);
-  }
-  set selected(t) {
-    this.#i.clear(), t.forEach((e) => {
-      this.#i.add(e), this.#e.add(new ce(e));
-    });
-  }
-  get marqueeBox() {
-    return this.#r;
-  }
-  set marqueeBox(t) {
-    this.#r = new Ri(
-      t.x,
-      t.y,
-      this.getWorldMatrix()
-    );
-  }
-  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 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 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) => {
-      if (!this.#i.has(e)) return;
-      this.#i.delete(e);
-      const i = Array.from(this.#e.values()).find(
-        (r) => r.target === e
-      );
-      i ? this.#e.delete(i) : console.error("No matching bounding box found"), this.#t && this.#t.remove(e);
-    }), this.#e.size <= 1 && (this.#e.forEach((e) => e.setActive()), this.#t = null);
-  }
-  deleteSelected(t) {
-    const e = [...this.#i];
-    this.remove(e);
-    for (const i of e)
-      i.destroy();
-    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.
-   */
-  hitTest(t, e) {
-    if (this.#t) {
-      const i = this.#t.hitTest(t, e, this.getWorldMatrix());
-      if (i) return i;
-    }
-    for (const i of this.#e.values()) {
-      const r = i.hitTest(t, e, this.getWorldMatrix());
-      if (r) return r;
-    }
-    return null;
-  }
-  isMultiBoundingBoxHit(t, e) {
-    return this.#t && this.#t.hitTest(t, e, this.getWorldMatrix());
-  }
-  isBoundingBoxHit(t, e) {
-    return this.#e.size === 1 && Array.from(this.#e)[0].hitTest(t, e, this.getWorldMatrix());
-  }
-  hitTestAdjustedCorner(t, e) {
-    if (this.#t) {
-      const i = this.#t.hitTest(t, e, this.getWorldMatrix());
-      if (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 ? ae(r) : r;
-    }
-  }
-  /**
-   * Update the existing bounding boxes
-   */
-  update() {
-    this.#e.forEach((t) => t.update()), this.#t && this.#t.update();
-  }
-  render(t) {
-    if (!this.#r && !this.#t && this.#e.size === 0)
-      return;
-    this.#n.useProgram(t);
-    const e = this.#n.getUniformLocation(t, "u_z");
-    e && this.#n.uniform1f(e, 1), this.#o && this.#e.forEach((i) => i.render(this.#n, t)), this.#t && this.#t.render(this.#n, t), this.#r && this.#r.render(this.#n, t);
-  }
-  isRectSelected(t) {
-    return this.#i.has(t);
-  }
-  clear() {
-    this.#i.clear(), this.#e.clear(), this.#t = null;
-  }
-  clearMarquee() {
-    this.#r && (this.#r = null);
-  }
-  move(t, e) {
-    if (this.#t)
-      this.#t.move(t, e);
-    else
-      for (const i of this.#e)
-        i.move(t, e);
-    this.#a.emit(N.Change);
-  }
-  /**
-   * Based on the corner you're dragging and the sign of the scaleX and scaleY values, there are only four possible sets of changes to the target's translation.
-   * 1) absolutely no change
-   * 2) x translation change only if negative delta
-   * 3) y translation change only if negative delta
-   * 4) x and y translation change if negative delta
-   * The tricky part is to consider the signs of the scale values and determine which corner is going to inhabit which behaviour.
-   * @param dx
-   * @param dy
-   * @param direction
-   */
-  resize(t, e, i) {
-    this.multiBoundingBox && this.multiBoundingBox.resize(t, e, i, this.getWorldMatrix());
-    for (const r of this.boundingBoxes)
-      this.multiBoundingBox ? r.update() : r.resize(t, e, i);
-    this.#a.emit(N.Change);
-  }
-  flip(t) {
-    if (this.multiBoundingBox) {
-      const e = this.multiBoundingBox.flip(
-        this.getWorldMatrix(),
-        t,
-        this.getWorldCoords
-      );
-      this.#s.push(
-        ue(e, t, this.multiBoundingBox)
-      );
-    } else {
-      const e = [];
-      for (const i of this.boundingBoxes)
-        e.push(i.flip(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(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(jt(i)), this.#a.emit(N.Change);
-  }
-  onPointerMove(t, e, i, r, n, a, o, h) {
-    if (a())
-      o(t, e);
-    else if (n && n !== "CENTER")
-      this.resize(i, r, n);
-    else if (this.marqueeBox) {
-      this.marqueeBox.resize(i, r, h());
-      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);
-  }
-  onSelectionPointerDown(t, e, i, r) {
-    e ? (t || this.clear(), this.add([e])) : (this.clear(), this.marqueeBox ? this.clearMarquee() : this.marqueeBox = { x: i, y: r });
-  }
-  // keep this for exporting as image in the future
-  // async copy() {
-  //     const images = this.selected as Img[];
-  //     if (images.length === 0) return;
-  //     let blob: Blob;
-  //     if (images.length === 1 && images[0].src.startsWith('data:image/png')) {
-  //         // Fast path: already a PNG data URL
-  //         const [header, base64] = images[0].src.split(',');
-  //         const binary = atob(base64);
-  //         const array = new Uint8Array(binary.length);
-  //         for (let i = 0; i < binary.length; i++) array[i] = binary.charCodeAt(i);
-  //         blob = new Blob([array], { type: 'image/png' });
-  //     } else {
-  //         // Batch draw all images to an offscreen canvas
-  //         const { mergedCanvas, width, height } = await mergeImagesToCanvas(images);
-  //         blob = await new Promise<Blob>(resolve => mergedCanvas.toBlob(b => resolve(b), 'image/png'));
-  //     }
-  //     const storedItem = new ClipboardItem({ [blob.type]: blob });
-  //     try {
-  //         await navigator.clipboard.write([storedItem]);
-  //     } catch (err) {
-  //         console.error(err);
-  //     }
-  // }
-}
-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",
-  RIGHT: "ew-resize",
-  TOPLEFT: "nwse-resize",
-  BOTTOMRIGHT: "nwse-resize",
-  TOPRIGHT: "nesw-resize",
-  BOTTOMLEFT: "nesw-resize",
-  CENTER: "grab"
-};
-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 Re(this.getSelected());
-    }), window.addEventListener("paste", async (e) => {
-      e.preventDefault(), !this.isContextMenuActive() && await t.paste(
-        this.state.lastPointerPos.x,
-        this.state.lastPointerPos.y
-      );
-    });
-  }
-  changeMode() {
-    this.state.toggleMode();
-  }
-  // Add events
-  addOnPointerDown() {
-    this.assignEventListener("pointerdown", this.onPointerDown);
-  }
-  addOnPointerMove() {
-    this.assignEventListener("pointermove", (t) => {
-      [this.state.lastPointerPos.x, this.state.lastPointerPos.y] = this.getWorldCoords(t.clientX, t.clientY);
-      let e = this.hitTestAdjustedCorner(
-        this.state.lastPointerPos.x,
-        this.state.lastPointerPos.y
-      );
-      this.setCursorStyle(Ai[e] || "default");
-    });
-  }
-  addOnWheel(t) {
-    this.assignEventListener(
-      "wheel",
-      (e) => {
-        this.isContextMenuActive() || t(e);
-      },
-      { passive: !1 }
-    );
-  }
-  onPointerDown(t) {
-    t.stopPropagation(), t.preventDefault(), this.eventHub.emit(H.Close);
-    const [e, i] = this.getWorldCoords(t.clientX, t.clientY);
-    this.state.initialize(e, i), this.currentTransform = void 0, this.state.mode === 1 ? this.handlePanPointerDown() : this.state.mode === 0 && this.handleSelectPointerDown(t, e, i), document.addEventListener("pointermove", this.onPointerMoveWhileDown), document.addEventListener("pointerup", this.onPointerUp);
-  }
-  handlePanPointerDown() {
-    this.setCanvasGlobalClick(!0), this.clearSelection();
-  }
-  handleSelectPointerDown(t, e, i) {
-    this.setCanvasGlobalClick(!1);
-    const r = this.checkCollidingChild(e, i), n = this.checkIfSelectionHit(e, i);
-    if (t.button === 2)
-      n || this.clearSelection(), r && !this.isSelection(r) && this.addSelection([r]);
-    else {
-      n ? this.state.resizingDirection = n : this.onSelectionPointerDown(t.shiftKey, r, e, i);
-      const a = this.getSelected();
-      a.length && (this.currentTransform = {
-        targets: a.map((o) => ({
-          ref: o,
-          start: { x: o.x, y: o.y, sx: o.sx, sy: o.sy }
-        }))
-      });
-    }
-  }
-  onPointerMoveWhileDown(t) {
-    if (t.buttons === 2) return;
-    const [e, i] = this.getWorldCoords(t.clientX, t.clientY), r = e - this.state.lastWorldX, n = i - this.state.lastWorldY;
-    this.selectionPointerMove(
-      this.state.startWorldX - e,
-      this.state.startWorldY - i,
-      r,
-      n,
-      this.state.resizingDirection
-    ), this.state.updateLastWorldCoord(e, i), this.setCursorStyle("grabbing");
-  }
-  onPointerUp() {
-    if (document.removeEventListener("pointermove", this.onPointerMoveWhileDown), document.removeEventListener("pointerup", this.onPointerUp), this.setCanvasGlobalClick(!0), this.setCursorStyle("default"), this.currentTransform) {
-      const t = this.currentTransform.targets.map((e) => ({
-        ref: e.ref,
-        start: e.start,
-        end: { x: e.ref.x, y: e.ref.y, sx: e.ref.sx, sy: e.ref.sy }
-      })).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(jt(t));
-    }
-    this.currentTransform = void 0, this.state.resizingDirection = null, this.closeMarquee(), this.eventHub.emit("save");
-  }
-  checkCollidingChild(t, e) {
-    const i = this.getChildren();
-    for (let r = i.length - 1; r >= 0; r--) {
-      const n = i[r];
-      if (n instanceof ut && n.hitTest && n.hitTest(t, e))
-        return n;
-    }
-    return null;
-  }
-}
-class Oi {
-  constructor(t, e, i, r) {
-    this.history = t, this.deleteSelected = i, this.save = () => e.emit(N.Save), this.assignEventListener = r, this.onKeyPressed = this.onKeyPressed.bind(this), this.addOnKeyPressed();
-  }
-  addOnKeyPressed() {
-    document.addEventListener("keydown", this.onKeyPressed);
-  }
-  onKeyPressed(t) {
-    if (this.isCtrlZ(t)) {
-      t.preventDefault(), this.history.undo();
-      return;
-    }
-    if (this.isCtrlY(t)) {
-      t.preventDefault(), this.history.redo();
-      return;
-    }
-    if (this.isDelete(t)) {
-      this.deleteSelected();
-      return;
-    }
-    if (this.isSave(t)) {
-      t.preventDefault(), this.save();
-      return;
-    }
-  }
-  isCtrlZ(t) {
-    return t.key.toLowerCase() === "z" && (t.ctrlKey || t.metaKey) && !t.shiftKey;
-  }
-  isCtrlY(t) {
-    return t.key.toLowerCase() === "y" && (t.ctrlKey || t.metaKey) && !t.shiftKey;
-  }
-  isDelete(t) {
-    return t.key === "Delete";
-  }
-  isSave(t) {
-    return t.key.toLowerCase() === "s" && t.ctrlKey;
-  }
-}
-class Di {
-  #s = !1;
-  get isActive() {
-    return this.#s;
-  }
-  constructor(t, e, i, r, n) {
-    this.customContextMenu = (a) => {
-      a.preventDefault(), a.stopPropagation();
-      const [o, h] = r(a.clientX, a.clientY);
-      e(o, h) ? t.emit(H.Open, a.clientX, a.clientY, "multi") : i(o, h) ? t.emit(H.Open, a.clientX, a.clientY) : t.emit(H.Open, a.clientX, a.clientY, "canvas");
-    }, t.on(H.Open, () => {
-      this.#s = !0;
-    }), t.on(H.Close, () => {
-      this.#s = !1;
-    }), n("contextmenu", this.customContextMenu);
-  }
-}
-function me(s, t) {
-  s.renderOrder = t.renderOrder;
-}
-function Bi(s, t = "Order") {
-  return {
-    label: t,
-    do() {
-      for (const e of s) me(e.ref, e.end);
-    },
-    undo() {
-      for (const e of s) me(e.ref, e.start);
-    }
-  };
-}
-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
-  get isResizing() {
-    return this.resizingDirection !== null;
-  }
-  get dragDXFromStart() {
-    return this.lastWorldX - this.startWorldX;
-  }
-  get dragDYFromStart() {
-    return this.lastWorldY - this.startWorldY;
-  }
-  // actions
-  setMode(t) {
-    this.mode = t;
-  }
-  toggleMode() {
-    this.mode = this.mode === mt.PAN ? mt.SELECT : mt.PAN;
-  }
-  setResizingDirection(t) {
-    this.resizingDirection = t;
-  }
-  clearResizingDirection() {
-    this.resizingDirection = null;
-  }
-  // Start an interaction at given world coords
-  initialize(t, e) {
-    this.startWorldX = t, this.startWorldY = e, this.lastWorldX = t, this.lastWorldY = e, this.resizingDirection = null;
-  }
-  updateLastWorldCoord(t, e) {
-    this.lastWorldX = t, this.lastWorldY = e;
-  }
-}
-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 = E.identity(), this.worldMatrix = E.identity(), this.children = [], this.parent = null, this.renderDirtyFlag = !0, Ee(this, {
-      translation: B.struct,
-      angleRadians: B,
-      scale: B.struct,
-      localMatrix: B.ref,
-      worldMatrix: B.ref,
-      children: B.shallow,
-      parent: B.ref,
-      renderDirtyFlag: B,
-      x: nt,
-      y: nt,
-      scaleX: nt,
-      scaleY: nt,
-      dirty: nt,
-      setTranslation: b,
-      setScale: b,
-      flipVertical: b,
-      setAngle: b,
-      getChild: b,
-      appendChild: b,
-      appendChildren: b,
-      removeChild: b,
-      clearChildren: b,
-      setParent: b,
-      markDirty: b,
-      clearDirty: b,
-      updateLocalMatrix: b,
-      updateWorldMatrix: b,
-      setWorldMatrix: b
-    }), this.updateLocalMatrix(), this.updateWorldMatrix();
-  }
-  // Computed
-  get x() {
-    return this.translation[0];
-  }
-  get y() {
-    return this.translation[1];
-  }
-  get scaleX() {
-    return this.scale[0];
-  }
-  get scaleY() {
-    return this.scale[1];
-  }
-  get dirty() {
-    return this.renderDirtyFlag;
-  }
-  // Actions
-  setTranslation(t, e) {
-    this.translation[0] = t, this.translation[1] = e, this.markDirty();
-  }
-  updateTranslation(t, e) {
-    this.translation[0] += t, this.translation[1] += e, this.markDirty();
-  }
-  setScale(t, e) {
-    t === this.scale[0] && e === this.scale[1] || (this.scale[0] = t, this.scale[1] = e, this.markDirty());
-  }
-  updateScale(t, e) {
-    this.scale[0] *= t, this.scale[1] *= e, this.markDirty();
-  }
-  flipVertical(t) {
-    this.translation[1] += this.scale[1] * t, this.scale[1] *= -1, this.markDirty();
-  }
-  flipHorizontal(t) {
-    this.translation[0] += this.scale[0] * t, this.scale[0] *= -1, this.markDirty();
-  }
-  setAngle(t) {
-    const i = (360 - t) * Math.PI / 180;
-    i !== this.angleRadians && (this.angleRadians = i, this.markDirty());
-  }
-  getChild(t) {
-    return this.children[t];
-  }
-  appendChild(t) {
-    this.children.includes(t) || (this.children.push(t), this.markDirty());
-  }
-  appendChildren(t) {
-    for (const e of t) {
-      if (this.children.includes(e)) return;
-      this.children.push(e);
-    }
-    this.markDirty();
-  }
-  removeChild(t) {
-    const e = this.children.indexOf(t);
-    if (e < 0) return;
-    const i = this.children.splice(e, 1);
-    return t.state.setParent(null), this.markDirty(), i[0];
-  }
-  clearChildren() {
-    if (this.children) {
-      for (const t of this.children)
-        t.destroy();
-      this.children = [], this.markDirty();
-    }
-  }
-  setParent(t) {
-    this.parent !== t && (this.parent = t, this.markDirty());
-  }
-  markDirty() {
-    this.renderDirtyFlag || (this.renderDirtyFlag = !0, this.updateLocalMatrix());
-  }
-  clearDirty() {
-    this.renderDirtyFlag && (this.renderDirtyFlag = !1, this.updateLocalMatrix());
-  }
-  updateLocalMatrix() {
-    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 ? E.multiply(t, this.localMatrix) : this.localMatrix.slice();
-    const e = this.worldMatrix;
-    this.children.forEach((i) => {
-      i.updateWorldMatrix(e);
-    });
-  }
-  setWorldMatrix(t) {
-    this.worldMatrix = t;
-  }
-}
-class Pe {
-  get x() {
-    return this.state.x;
-  }
-  get y() {
-    return this.state.y;
-  }
-  get sx() {
-    return this.state.scaleX;
-  }
-  get sy() {
-    return this.state.scaleY;
-  }
-  get dirty() {
-    return this.state.dirty;
-  }
-  get localMatrix() {
-    return this.state.localMatrix;
-  }
-  get worldMatrix() {
-    return this.state.worldMatrix;
-  }
-  get children() {
-    return this.state.children;
-  }
-  get parent() {
-    return this.state.parent;
-  }
-  get angleRadians() {
-    return this.state.angleRadians;
-  }
-  updateTranslation(t, e) {
-    this.state.updateTranslation(t, e);
-  }
-  setTranslation(t, e) {
-    this.state.setTranslation(t, e);
-  }
-  updateScale(t, e) {
-    this.state.updateScale(t, e);
-  }
-  setScale(t, e) {
-    this.state.setScale(t, e);
-  }
-  setAngle(t) {
-    return this.state.setAngle(t);
-  }
-  flipVertical(t) {
-    this.state.flipVertical(t);
-  }
-  flipHorizontal(t) {
-    this.state.flipHorizontal(t);
-  }
-  markDirty() {
-    this.state.markDirty();
-  }
-  clearDirty() {
-    this.state.clearDirty();
-  }
-  updateLocalMatrix() {
-    this.state.updateLocalMatrix();
-  }
-  setWorldMatrix(t) {
-    this.state.setWorldMatrix(t);
-  }
-  addChild(t) {
-    this.state.appendChild(t);
-  }
-  addParent(t) {
-    return this.state.setParent(t);
-  }
-  clearChildren() {
-    return this.state.clearChildren();
-  }
-  constructor() {
-    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;
-  }
-  setParent(t) {
-    if (this.parent) {
-      const e = this.parent.children.indexOf(this);
-      e >= 0 && this.parent.children.splice(e, 1);
-    }
-    t && t.addChild(this), this.addParent(t);
-  }
-  updateWorldMatrix(t) {
-    this.updateLocalMatrix(), this.state.updateWorldMatrix(t);
-  }
-  addEventListener(t, e, i) {
-    const r = typeof e == "function" ? e : e.handleEvent.bind(e);
-    this._emitter.on(t, r);
-  }
-  removeEventListener(t, e, i) {
-  }
-  dispatchEvent(t) {
-    return this._emitter.emit(t.type, t), !t.defaultPrevented;
-  }
-}
-class Ae extends Pe {
-  constructor() {
-    super(...arguments), this.initialized = !1;
-  }
-  updateVertexData(t) {
-    const e = this.getPositions();
-    (!this.vertexArray || this.vertexArray.length !== e.length) && (this.vertexArray = new Float32Array(e.length)), this.vertexArray.set(e), t.bindBuffer(t.ARRAY_BUFFER, this.positionBuffer), t.bufferData(t.ARRAY_BUFFER, this.vertexArray, t.STATIC_DRAW);
-  }
-  setUpVertexData(t, e) {
-    this.positionBuffer || (this.positionBuffer = t.createBuffer()), this.attributeLocation = t.getAttribLocation(e, "a_position");
-  }
-  setUpUniforms(t, e) {
-    this.resolutionLocation = t.getUniformLocation(e, "u_resolution"), this.matrixLocation = t.getUniformLocation(e, "u_matrix");
-  }
-  updateUniforms(t) {
-    t.uniform2f(this.resolutionLocation, t.canvas.width, t.canvas.height), t.uniformMatrix3fv(this.matrixLocation, !1, this.worldMatrix);
-  }
-}
-const Wt = class Wt extends Ae {
-  constructor(t, e, i = 1, r = 1) {
-    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;
-  }
-  set renderOrder(t) {
-    this._renderOrder !== t && (this._renderOrder = t, this.markDirty());
-  }
-  get seq() {
-    return this._seq;
-  }
-  getZ() {
-    const e = this.renderOrder * 1e-4 + 0.5;
-    return Math.max(0, Math.min(1, e));
-  }
-  render(t, e) {
-    this.updateWorldMatrix(this.parent ? this.parent.worldMatrix : void 0), t.useProgram(e), this.dirty && !this.culled && (this.initialized || (this.setUpVertexData(t, e), this.setUpUniforms(t, e), this.initialized = !0), this.updateVertexData(t), this.clearDirty()), this.updateUniforms(t);
-    const i = t.getUniformLocation(e, "u_color");
-    i && t.uniform4fv(i, this.color), this.culled || this.draw(t);
-  }
-  draw(t) {
-    t.bindBuffer(t.ARRAY_BUFFER, this.positionBuffer);
-    const e = 2, i = t.FLOAT;
-    t.vertexAttribPointer(
-      this.attributeLocation,
-      e,
-      i,
-      !1,
-      0,
-      0
-    ), t.enableVertexAttribArray(this.attributeLocation), t.drawArrays(t.TRIANGLES, 0, this.getVertexCount()), t.bindBuffer(t.ARRAY_BUFFER, null), t.disableVertexAttribArray(this.attributeLocation);
-  }
-  destroy() {
-    this.positionBuffer && (this.positionBuffer = void 0), this.initialized = !1;
-  }
-};
-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;
-  }
-  get width() {
-    return this._width;
-  }
-  set width(t) {
-    this._width !== t && (this._width = t, this.markDirty());
-  }
-  get height() {
-    return this._height;
-  }
-  set height(t) {
-    this._height !== t && (this._height = t, this.markDirty());
-  }
-  getVertexCount() {
-    return 6;
-  }
-  getPositions() {
-    const i = this.width, r = this.height;
-    return [
-      0,
-      0,
-      // top-left
-      0,
-      r,
-      // bottom-left
-      i,
-      0,
-      // top-right
-      i,
-      0,
-      // top-right
-      0,
-      r,
-      // bottom-left
-      i,
-      r
-      // bottom-right
-    ];
-  }
-  /**
-   *
-   * @returns A bounding box that is not adjusted for world space.
-   */
-  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 et(n, o, a, h), this.AABB;
-  }
-  getEdge() {
-    const t = this.x, e = this.y;
-    return {
-      minX: Math.min(t, t + this.width),
-      maxX: Math.max(t, t + this.width),
-      minY: Math.min(e, e + this.height),
-      maxY: Math.max(e, e + this.height)
-    };
-  }
-  hitTest(t, e) {
-    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 wt extends Z {
-  constructor(t) {
-    super(t), this.texCoordArray = new Float32Array([
-      0,
-      0,
-      // top-left
-      0,
-      1,
-      // bottom-left
-      1,
-      0,
-      // top-right
-      1,
-      0,
-      // top-right
-      0,
-      1,
-      // bottom-left
-      1,
-      1
-      // bottom-right
-    ]), this.useLowRes = !1, this.lowResNeedsRefresh = !0, this._src = t.src, this.loadImage(t.src, t.width, t.height);
-  }
-  get src() {
-    return this._src;
-  }
-  set src(t) {
-    this._src !== t && (this._src = t, this.updateImageTexture(t), this.markDirty());
-  }
-  get fileId() {
-    return this._fileId;
-  }
-  set fileId(t) {
-    this._fileId = t;
-  }
-  determineIfLowRes(t, e, i = 0.1) {
-    const r = t.getArea();
-    return this.getBoundingBox().getArea() / r < i / e;
-  }
-  async setUseLowRes(t, e) {
-    this.useLowRes === t && !this.lowResNeedsRefresh || (this.useLowRes = t, (t && e || this.lowResNeedsRefresh) && await this.ensureLowResUploaded(e), this.markDirty(), this.lowResNeedsRefresh = !1);
-  }
-  loadImage(t, e, i) {
-    this.culled || this.updateImageTexture(t, e, i);
-  }
-  updateImageTexture(t, e, i) {
-    this._image = new Image(), this._image.crossOrigin = "anonymous", this._image.onload = async () => {
-      this.width = e ?? this._image.naturalWidth, this.height = i ?? this._image.naturalHeight;
-      try {
-        if (this.bitmap) {
-          try {
-            this.bitmap.close();
-          } catch {
-          }
-          this.bitmap = void 0;
-        }
-        typeof createImageBitmap == "function" && (this.bitmap = await createImageBitmap(this._image));
-      } catch (r) {
-        console.warn(
-          "createImageBitmap failed, falling back to HTMLImageElement",
-          r
-        ), this.bitmap = void 0;
-      }
-      if (this.gl && this.program)
-        try {
-          this.texture && this.gl && (this.gl.deleteTexture(this.texture), this.texture = void 0), this.initialiseTexture(), this.initialized = !0, this.markDirty();
-        } catch (r) {
-          console.error("Failed to initialise texture on image load", r);
-        }
-      this.lowResNeedsRefresh = !0;
-    }, this._image.onerror = (r) => {
-      console.error("Failed to load image:", t, r);
-    }, this._image.src = t;
-  }
-  async ensureLowResUploaded(t) {
-    if (!(this.lowResTexture && !this.lowResNeedsRefresh) && !(!this._image || !this._image.complete))
-      try {
-        const i = this._image.naturalWidth, r = this._image.naturalHeight, n = Math.min(
-          1,
-          256 / Math.max(1, Math.max(i, r))
-        ), a = Math.max(1, Math.round(i * n)), o = Math.max(1, Math.round(r * n));
-        let h;
-        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 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);
-      }
-  }
-  setLowResTextureFromBitmap(t, e) {
-    if (this.lowResTexture) {
-      try {
-        t.deleteTexture(this.lowResTexture);
-      } catch {
-      }
-      this.lowResTexture = void 0;
-    }
-    this.lowResTexture = t.createTexture(), t.bindTexture(t.TEXTURE_2D, this.lowResTexture), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_WRAP_S, t.CLAMP_TO_EDGE), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_WRAP_T, t.CLAMP_TO_EDGE), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_MIN_FILTER, t.LINEAR), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_MAG_FILTER, t.LINEAR), t.texImage2D(t.TEXTURE_2D, 0, t.RGBA, t.RGBA, t.UNSIGNED_BYTE, e), t.bindTexture(t.TEXTURE_2D, null), this.markDirty();
-  }
-  // data upload
-  initialiseTexture() {
-    !this.gl || !this.program || !this._image || !this._image.complete || this._image.naturalWidth === 0 || (this.setUpVertexData(this.gl, this.program), this.setUpTexData(this.gl, this.program), this.setTexture(this.gl), super.setUpUniforms(this.gl, this.program), this.samplerLocation = this.gl.getUniformLocation(this.program, "u_image"), this.samplerLocation && this.gl.uniform1i(this.samplerLocation, 0));
-  }
-  setUpTexData(t, e) {
-    this.texcoordBuffer || (this.texcoordBuffer = t.createBuffer()), this.texcoordLocation = t.getAttribLocation(e, "a_texCoord");
-  }
-  setTexture(t) {
-    if (this.texture) {
-      try {
-        try {
-          t.deleteTexture(this.texture);
-        } catch {
-        }
-      } catch {
-      }
-      this.texture = void 0;
-    }
-    this.texture = t.createTexture(), t.bindTexture(t.TEXTURE_2D, this.texture), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_WRAP_S, t.CLAMP_TO_EDGE), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_WRAP_T, t.CLAMP_TO_EDGE), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_MIN_FILTER, t.NEAREST), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_MAG_FILTER, t.NEAREST), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_MIN_FILTER, t.LINEAR), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_MAG_FILTER, t.LINEAR);
-    const e = this.bitmap ?? this._image;
-    e && t.texImage2D(
-      t.TEXTURE_2D,
-      0,
-      t.RGBA,
-      t.RGBA,
-      t.UNSIGNED_BYTE,
-      e
-    ), t.bindTexture(t.TEXTURE_2D, null);
-  }
-  updateVertexData(t) {
-    super.updateVertexData(t), t.bindBuffer(t.ARRAY_BUFFER, this.texcoordBuffer), t.bufferData(t.ARRAY_BUFFER, this.texCoordArray, t.STATIC_DRAW);
-  }
-  getVertexCount() {
-    return 6;
-  }
-  render(t, e) {
-    if (this.dirty && !this.culled) {
-      if (this.updateWorldMatrix(this.parent ? this.parent.worldMatrix : void 0), !this.initialized)
-        if (this.gl = t, this.program = e, this.initialiseTexture(), this._image.complete && this._image.naturalWidth > 0)
-          this.initialized = !0;
-        else
-          return;
-      this.updateVertexData(t), this.clearDirty();
-    }
-    super.updateUniforms(t), this.culled || this.draw(t);
-  }
-  draw(t) {
-    t.bindBuffer(t.ARRAY_BUFFER, this.positionBuffer);
-    const e = 2, i = t.FLOAT, r = !1, n = 0, a = 0;
-    t.vertexAttribPointer(
-      this.attributeLocation,
-      e,
-      i,
-      r,
-      n,
-      a
-    ), t.enableVertexAttribArray(this.attributeLocation), t.bindBuffer(t.ARRAY_BUFFER, this.texcoordBuffer), t.vertexAttribPointer(
-      this.texcoordLocation,
-      e,
-      i,
-      r,
-      n,
-      a
-    ), t.enableVertexAttribArray(this.texcoordLocation), t.activeTexture(t.TEXTURE0);
-    try {
-      const o = this.useLowRes && this.lowResTexture ? this.lowResTexture : this.texture;
-      t.bindTexture(t.TEXTURE_2D, o), t.drawArrays(t.TRIANGLES, 0, this.getVertexCount()), t.bindBuffer(t.ARRAY_BUFFER, null), t.disableVertexAttribArray(this.attributeLocation), t.disableVertexAttribArray(this.texcoordLocation);
-    } catch (o) {
-      console.error(o);
-    }
-  }
-  destroy() {
-    if (this.texcoordBuffer) {
-      try {
-        this.gl.deleteBuffer(this.texcoordBuffer);
-      } catch {
-      }
-      this.texcoordBuffer = void 0;
-    }
-    if (this.texture) {
-      try {
-        this.gl.deleteTexture(this.texture);
-      } catch {
-      }
-      this.texture = void 0;
-    }
-    if (this.lowResTexture) {
-      try {
-        this.gl.deleteTexture(this.lowResTexture);
-      } catch {
-      }
-      this.lowResTexture = void 0;
-    }
-    if (this.bitmap) {
-      try {
-        this.bitmap.close();
-      } catch {
-      }
-      this.bitmap = void 0;
-    }
-    if (this.lowResBitmap) {
-      try {
-        this.lowResBitmap.close();
-      } catch {
-      }
-      this.lowResBitmap = void 0;
-    }
-    this.texcoordLocation = void 0, this.samplerLocation = void 0;
-    try {
-      super.destroy();
-    } catch {
-    }
-  }
-}
-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;
-  }
-  // Fullscreen big-triangle in clip space: covers [-1,1] without seams
-  getPositions() {
-    return new Float32Array([-1, -1, 3, -1, -1, 3]);
-  }
-  changeGridType(t) {
-    this.gridType = t;
-  }
-  render(t, e) {
-    if (this.buffer)
-      t.bindBuffer(t.ARRAY_BUFFER, this.buffer);
-    else {
-      if (this.buffer = t.createBuffer(), !this.buffer) throw new Error("Failed to create grid buffer");
-      const c = this.getPositions();
-      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 = E.inverse(E.projection(i, r)), a = E.inverse(this.worldMatrix), o = E.multiply(a, n);
-    this.viewProjectionInvLocation && t.uniformMatrix3fv(
-      this.viewProjectionInvLocation,
-      !1,
-      new Float32Array(o)
-    ), this.zoomScaleLocation && t.uniform1f(this.zoomScaleLocation, this.zoom), this.checkboardStyleLocation && t.uniform1f(this.checkboardStyleLocation, this.gridType);
-    const h = t.getAttribLocation(e, "a_Position");
-    if (h === -1)
-      throw new Error("Attribute a_Position not found in grid program");
-    t.vertexAttribPointer(h, 2, t.FLOAT, !1, 0, 0), t.enableVertexAttribArray(h), t.drawArrays(t.TRIANGLES, 0, this.vertexCount), t.bindBuffer(t.ARRAY_BUFFER, null), t.disableVertexAttribArray(h);
-  }
-  destroy() {
-    this.buffer && (this.buffer = null);
-  }
-  hitTest(t, e) {
-    return !1;
-  }
-  setUpUniforms(t, e) {
-    const i = new Float32Array([1, 0, 0, 0, 1, 0, 0, 0, 1]);
-    this.viewProjectionInvLocation = t.getUniformLocation(
-      e,
-      "u_ViewProjectionInvMatrix"
-    ), this.zoomScaleLocation = t.getUniformLocation(e, "u_ZoomScale"), this.checkboardStyleLocation = t.getUniformLocation(
-      e,
-      "u_CheckboardStyle"
-    ), t.uniformMatrix3fv(this.viewProjectionInvLocation, !1, i), t.uniform1f(this.zoomScaleLocation, this.zoom), t.uniform1f(this.checkboardStyleLocation, 1);
-  }
-}
-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 = Je(
-      () => this.state.stateVector,
-      () => this.updateViewMatrix()
-    ), this.updateViewMatrix();
-  }
-  /**
-   * Called once to update the `worldMatrix` of the attached canvas, which is the view matrix.
-   */
-  updateViewMatrix() {
-    this.setWorldMatrix(this.state.canvasMatrix), this.updateWorldMatrix();
-  }
-  setViewPortDimension(t, e) {
-    this.state.width !== t && this.state.setWidth(t), this.state.height !== e && this.state.setHeight(e);
-  }
-  getBoundingBox() {
-    const [t, e] = this.getWorldCoords(this.viewportX, this.viewportY), [i, r] = this.getWorldCoords(
-      this.state.width + this.viewportX,
-      this.state.height + this.viewportY
-    );
-    return new et(t, e, i, r);
-  }
-  onWheel(t) {
-    t.preventDefault();
-    const i = Math.exp(-t.deltaY * 3e-3);
-    this.updateZoom(t.clientX, t.clientY, i);
-  }
-  updateCameraPos(t, e) {
-    this.state.incrementPosition(t, e);
-  }
-  /**
-   * Pass in the center position to resolve the scaling around
-   */
-  updateZoom(t, e, i) {
-    const [r, n] = this.getWorldCoords(t, e);
-    this.state.setZoom(
-      Math.min(Wi, Math.max(Ui, this.state.zoom * i))
-    );
-    const [a, o] = this.getWorldCoords(t, e);
-    this.state.incrementPosition(r - a, n - o);
-  }
-  worldToCamera(t, e) {
-    const i = this.state.cameraMatrix, r = i[0] * t + i[1] * e + i[2], n = i[3] * t + i[4] * e + i[5];
-    return [r, n];
-  }
-  dispose() {
-    this.updateReaction && (this.updateReaction(), this.updateReaction = void 0);
-  }
-}
-const ge = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjYjNiM2IzIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xLjUgNmEyLjI1IDIuMjUgMCAwIDEgMi4yNS0yLjI1aDE2LjVBMi4yNSAyLjI1IDAgMCAxIDIyLjUgNnYxMmEyLjI1IDIuMjUgMCAwIDEtMi4yNSAyLjI1SDMuNzVBMi4yNSAyLjI1IDAgMCAxIDEuNSAxOHpNMyAxNi4wNlYxOGMwIC40MTQuMzM2Ljc1Ljc1Ljc1aDE2LjVBLjc1Ljc1IDAgMCAwIDIxIDE4di0xLjk0bC0yLjY5LTIuNjg5YTEuNSAxLjUgMCAwIDAtMi4xMiAwbC0uODguODc5bC45Ny45N2EuNzUuNzUgMCAxIDEtMS4wNiAxLjA2bC01LjE2LTUuMTU5YTEuNSAxLjUgMCAwIDAtMi4xMiAwem0xMC4xMjUtNy44MWExLjEyNSAxLjEyNSAwIDEgMSAyLjI1IDBhMS4xMjUgMS4xMjUgMCAwIDEtMi4yNSAwIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=", rt = 240;
-function pe(s) {
-  return {
-    x: s.x ?? 0,
-    y: s.y ?? 0,
-    sx: s.sx ?? 1,
-    sy: s.sy ?? 1
-  };
-}
-function Yt(s) {
-  return s.children.map(Oe);
-}
-function Oe(s) {
-  return s instanceof wt ? {
-    type: "Img",
-    id: s.seq,
-    renderOrder: s.renderOrder,
-    transform: pe(s),
-    width: s.width,
-    height: s.height,
-    fileId: s.fileId,
-    children: s.children?.length ? Yt(s) : void 0
-  } : s instanceof Z ? {
-    type: "Rect",
-    id: s.seq,
-    renderOrder: s.renderOrder,
-    transform: pe(s),
-    width: s.width,
-    height: s.height,
-    color: s.color,
-    children: s.children?.length ? Yt(s) : void 0
-  } : s instanceof Le ? {
-    type: "Grid",
-    style: s.gridType
-  } : {
-    type: "Renderable",
-    children: s.children?.length ? Yt(s) : void 0
-  };
-}
-function Vt(s, t) {
-  const { gl: e } = s;
-  return {
-    version: 1,
-    canvas: {
-      width: e.canvas.width,
-      height: e.canvas.height,
-      dpr: window.devicePixelRatio || 1
-    },
-    camera: {
-      x: s.camera.state.x,
-      y: s.camera.state.y,
-      zoom: s.camera.state.zoom
-    },
-    root: Oe(s),
-    files: t
-  };
-}
-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;
-    switch (n.type) {
-      case "Rect":
-        o = new Z({
-          x: n.transform.x,
-          y: n.transform.y,
-          width: n.width,
-          height: n.height
-        }), o.setScale(n.transform.sx, n.transform.sy), t.appendChild(o);
-        break;
-      case "Img":
-        let h;
-        try {
-          h = s.files && Array.isArray(s.files) ? s.files.find(
-            (m) => m.id === n.fileId
-          )?.dataURL ?? ge : ge, i && i(h);
-          const c = n.width, l = n.height, u = await Xi(
-            h,
-            c * n.transform.sx,
-            l * n.transform.sy
-          );
-          o = new wt({
-            x: n.transform.x,
-            y: n.transform.y,
-            src: u,
-            width: c,
-            height: l
-          }), e(n.fileId).then((g) => {
-            o.src = g.dataURL;
-          }).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 kt && (a.grid.gridType = n.style);
-        break;
-    }
-    if (n.children)
-      for (const h of n.children) await r(h, o);
-  }
-  return await r(s.root, t), t;
-}
-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 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 Gi(n);
-    } catch {
-    }
-    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 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 * 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);
-      l.drawImage(
-        a,
-        0,
-        0,
-        a.naturalWidth,
-        a.naturalHeight,
-        C,
-        v,
-        w,
-        x
-      );
-    }
-    return c.toDataURL("image/png");
-  } finally {
-    r && URL.revokeObjectURL(r);
-  }
-}
-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();
-    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
-    })), 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 Pi(
-      i,
-      r,
-      this.gl,
-      f(this, G),
-      () => this.worldMatrix,
-      () => this.children,
-      this.getWorldsCoordsFromCanvas,
-      h
-    ));
-    const c = new Ii({});
-    I(this, ht, new Fi(
-      c,
-      this.setWorldMatrix,
-      this.updateWorldMatrix,
-      this.getWorldsCoordsFromCanvas
-    )), I(this, Ft, new Oi(
-      i,
-      r,
-      () => this.selectionManager.deleteSelected(this),
-      this.assignEventListener
-    )), I(this, lt, new Di(
-      r,
-      this.selectionManager.isMultiBoundingBoxHit,
-      this.selectionManager.isBoundingBoxHit,
-      this.getWorldsCoordsFromCanvas,
-      this.assignEventListener
-    ));
-    const l = new zi(), u = {
-      history: i,
-      eventHub: r,
-      state: l,
-      isContextMenuActive: () => f(this, lt).isActive,
-      getSelected: () => f(this, P).selected,
-      getChildren: () => this.children,
-      getWorldMatrix: () => this.worldMatrix,
-      getCanvasGlobalClick: () => this.isGlobalClick,
-      setCanvasGlobalClick: (g) => this.isGlobalClick = g,
-      getWorldCoords: this.getWorldsCoordsFromCanvas,
-      updateCameraPos: this.camera.updateCameraPos,
-      onWheel: this.camera.onWheel,
-      setCursorStyle: (g) => e.style.cursor = g,
-      paste: (g, m) => Ie(g, m, this, i),
-      assignEventListener: this.assignEventListener,
-      closeMarquee: f(this, P).clearMarquee,
-      selectionPointerMove: (g, m, w, x, C) => f(this, P).onPointerMove(
-        g,
-        m,
-        w,
-        x,
-        C,
-        () => this.isGlobalClick,
-        this.camera.updateCameraPos,
-        () => this.worldMatrix
-      ),
-      onSelectionPointerDown: this.selectionManager.onSelectionPointerDown,
-      checkIfSelectionHit: this.selectionManager.hitTest,
-      addSelection: this.selectionManager.add,
-      clearSelection: this.selectionManager.clear,
-      isSelection: this.selectionManager.isRectSelected,
-      hitTestAdjustedCorner: this.selectionManager.hitTestAdjustedCorner
-    };
-    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 f(this, y);
-  }
-  get grid() {
-    return f(this, X);
-  }
-  get history() {
-    return f(this, Q);
-  }
-  get eventHub() {
-    return f(this, F);
-  }
-  get pointerEventManager() {
-    return f(this, dt);
-  }
-  get selectionManager() {
-    return f(this, P);
-  }
-  get contextMenuManager() {
-    return f(this, lt);
-  }
-  get canvas() {
-    return f(this, W);
-  }
-  get camera() {
-    return f(this, ht);
-  }
-  get isGlobalClick() {
-    return f(this, V);
-  }
-  set isGlobalClick(e) {
-    I(this, V, e);
-  }
-  get basicShapeProgram() {
-    return f(this, G);
-  }
-  engine() {
-    return this;
-  }
-  get totalNumberOfChildren() {
-    return this.children.length;
-  }
-  get numberOfChildrenRendered() {
-    return this.renderList.length;
-  }
-  appendChild(e) {
-    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), f(this, P) && f(this, P).remove([e]), e.destroy(), this.markOrderDirty();
-  }
-  getChild(e) {
-    return this.state.getChild(e);
-  }
-  updateWorldMatrix() {
-    f(this, X).updateWorldMatrix(this.worldMatrix), this.children.forEach((e) => {
-      e.updateWorldMatrix(this.worldMatrix);
-    }), f(this, P).update();
-  }
-  render() {
-    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
-    ), 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 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
-        );
-        l.setUseLowRes(u, this.gl);
-      }
-    });
-    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);
-    }
-    f(this, P).render(f(this, G));
-  }
-  destroy() {
-    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 f(this, W);
-  }
-  assignEventListener(e, i, r) {
-    f(this, W).addEventListener(e, i, r);
-  }
-  hitTest(e, i) {
-    return I(this, V, !0), f(this, V);
-  }
-  async addImageToCanvas(e, i, r, n = 1, a = 1, o = !1) {
-    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 _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 f(this, F).emit("save"), f(this, F).emit(N.Change), h;
-  }
-  exportState() {
-    return Vt(this);
-  }
-  async importState(e, i) {
-    return await Zt(e, this, i);
-  }
-  clearChildren() {
-    this.selectionManager.clear(), this.state.clearChildren(), f(this, Q).clear();
-  }
-  toggleGrid() {
-    f(this, X).changeGridType(
-      f(this, X).gridType === _t.GRID ? _t.NONE : _t.GRID
-    );
-  }
-  getSelected() {
-    return f(this, P).selected;
-  }
-  setShapeZOrder(e = !0) {
-    if (f(this, P).multiBoundingBox || f(this, P).boundingBoxes.size != 1)
-      return;
-    const i = Array.from(f(this, P).boundingBoxes)[0].target, r = {
-      ref: i,
-      start: {
-        renderOrder: i.renderOrder
-      }
-    }, n = this.children.map((h) => h.renderOrder);
-    if (n.length === 0)
-      throw new Error("Order unexpected missing.");
-    const a = Math.max(...n), o = Math.min(...n);
-    i.renderOrder = e ? a + 1 : o - 1, r.end = {
-      renderOrder: i.renderOrder
-    }, this.markOrderDirty(), f(this, Q).push(Bi([r])), f(this, F).emit(N.Change);
-  }
-  changeMode() {
-    f(this, dt).changeMode(), f(this, P).clear();
-  }
-  updateZoomByFixedAmount(e = 1) {
-    f(this, ht).updateZoom(
-      f(this, W).width / 2,
-      f(this, W).height / 2,
-      Math.exp(0.5 * 0.3 * e)
-    );
-  }
-  getBoundingClientRect() {
-    return f(this, W).getBoundingClientRect();
-  }
-  wrapWebGLContext(e) {
-    const i = e.createTexture.bind(e);
-    e.createTexture = () => (R.webglStats.texturesCreated++, console.log(`Textures created: ${R.webglStats.texturesCreated}`), i());
-    const r = e.deleteTexture.bind(e);
-    e.deleteTexture = (o) => (o && (R.webglStats.texturesDeleted++, console.log(`Textures deleted: ${R.webglStats.texturesDeleted}`)), r(o));
-    const n = e.createShader.bind(e);
-    e.createShader = (o) => (R.webglStats.shadersCreated++, console.log(`Shaders created: ${R.webglStats.shadersCreated}`), n(o));
-    const a = e.deleteShader.bind(e);
-    return e.deleteShader = (o) => (o && (R.webglStats.shadersDeleted++, console.log(`Shaders deleted: ${R.webglStats.shadersDeleted}`)), a(o)), e;
-  }
-  static getWebGLStats() {
-    return {
-      ...R.webglStats,
-      buffersLeaked: R.webglStats.buffersCreated - R.webglStats.buffersDeleted,
-      programsLeaked: R.webglStats.programsCreated - R.webglStats.programsDeleted,
-      texturesLeaked: R.webglStats.texturesCreated - R.webglStats.texturesDeleted,
-      shadersLeaked: R.webglStats.shadersCreated - R.webglStats.shadersDeleted
-    };
-  }
-};
-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,
-  programsDeleted: 0,
-  texturesCreated: 0,
-  texturesDeleted: 0,
-  shadersCreated: 0,
-  shadersDeleted: 0
-};
-let kt = R;
-const xe = 25;
-class Hi {
-  constructor() {
-    this._undoStack = [], this._redoStack = [], this._openGroup = null;
-  }
-  get undoStack() {
-    return this._undoStack;
-  }
-  begin(t) {
-    if (this._openGroup) throw new Error("History group already open");
-    this._openGroup = [], this._openLabel = t;
-  }
-  push(t) {
-    if (this._openGroup)
-      this._openGroup.push(t);
-    else {
-      for (; this._undoStack.length >= xe; )
-        this._undoStack.shift();
-      this._undoStack.push([t]), t.do(), this._redoStack.length = 0;
-    }
-  }
-  commit() {
-    if (!this._openGroup) return;
-    const t = this._openGroup;
-    this._openGroup = null;
-    for (const e of t) e.do();
-    for (; this._undoStack.length >= xe; )
-      this._undoStack.shift();
-    this._undoStack.push(t), this._redoStack.length = 0, this._openLabel = void 0;
-  }
-  cancel() {
-    this._openGroup = null, this._openLabel = void 0;
-  }
-  canUndo() {
-    return this._undoStack.length > 0;
-  }
-  canRedo() {
-    return this._redoStack.length > 0;
-  }
-  undo() {
-    const t = this._undoStack.pop();
-    if (t) {
-      for (let e = t.length - 1; e >= 0; e--) t[e].undo();
-      this._redoStack.push(t);
-    }
-  }
-  redo() {
-    const t = this._redoStack.pop();
-    if (t) {
-      for (const e of t) e.do();
-      this._undoStack.push(t);
-    }
-  }
-  clear() {
-    this._undoStack.length = 0, this._redoStack.length = 0, this._openGroup = null, this._openLabel = void 0;
-  }
-}
-const Ni = (s) => (t, e) => {
-  e !== void 0 ? e.addInitializer((() => {
-    customElements.define(s, t);
-  })) : customElements.define(s, t);
-};
-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 !== 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 (Jt && t === void 0) {
-      const i = e !== void 0 && e.length === 1;
-      i && (t = ye.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), i && ye.set(e, t));
-    }
-    return t;
-  }
-  toString() {
-    return this.cssText;
-  }
-};
-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 = Rt.litNonce;
-    r !== void 0 && i.setAttribute("nonce", r), i.textContent = e.cssText, s.appendChild(i);
-  }
-}, we = Jt ? (s) => s : (s) => s instanceof CSSStyleSheet ? ((t) => {
-  let e = "";
-  for (const i of t.cssRules) e += i.cssText;
-  return $i(e);
-})(s) : s;
-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 ? ts : null;
-      break;
-    case Object:
-    case Array:
-      s = s == null ? s : JSON.stringify(s);
-  }
-  return s;
-}, fromAttribute(s, t) {
-  let e = s;
-  switch (t) {
-    case Boolean:
-      e = s !== null;
-      break;
-    case Number:
-      e = s === null ? null : Number(s);
-      break;
-    case Object:
-    case Array:
-      try {
-        e = JSON.parse(s);
-      } catch {
-        e = null;
-      }
-  }
-  return e;
-} }, 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 = 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 && Zi(this.prototype, t, r);
-    }
-  }
-  static getPropertyDescriptor(t, e, i) {
-    const { get: r, set: n } = qi(this.prototype, t) ?? { get() {
-      return this[e];
-    }, set(a) {
-      this[e] = a;
-    } };
-    return { get: r, set(a) {
-      const o = r?.call(this);
-      n?.call(this, a), this.requestUpdate(t, o, i);
-    }, configurable: !0, enumerable: !0 };
-  }
-  static getPropertyOptions(t) {
-    return this.elementProperties.get(t) ?? be;
-  }
-  static _$Ei() {
-    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(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];
-    if (t !== null) {
-      const e = litPropertyMetadata.get(t);
-      if (e !== void 0) for (const [i, r] of e) this.elementProperties.set(i, r);
-    }
-    this._$Eh = /* @__PURE__ */ new Map();
-    for (const [e, i] of this.elementProperties) {
-      const r = this._$Eu(e, i);
-      r !== void 0 && this._$Eh.set(r, e);
-    }
-    this.elementStyles = this.finalizeStyles(this.styles);
-  }
-  static finalizeStyles(t) {
-    const e = [];
-    if (Array.isArray(t)) {
-      const i = new Set(t.flat(1 / 0).reverse());
-      for (const r of i) e.unshift(we(r));
-    } else t !== void 0 && e.push(we(t));
-    return e;
-  }
-  static _$Eu(t, e) {
-    const i = e.attribute;
-    return i === !1 ? void 0 : typeof i == "string" ? i : typeof t == "string" ? t.toLowerCase() : void 0;
-  }
-  constructor() {
-    super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
-  }
-  _$Ev() {
-    this._$ES = new Promise(((t) => this.enableUpdating = t)), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach(((t) => t(this)));
-  }
-  addController(t) {
-    (this._$EO ??= /* @__PURE__ */ new Set()).add(t), this.renderRoot !== void 0 && this.isConnected && t.hostConnected?.();
-  }
-  removeController(t) {
-    this._$EO?.delete(t);
-  }
-  _$E_() {
-    const t = /* @__PURE__ */ new Map(), e = this.constructor.elementProperties;
-    for (const i of e.keys()) this.hasOwnProperty(i) && (t.set(i, this[i]), delete this[i]);
-    t.size > 0 && (this._$Ep = t);
-  }
-  createRenderRoot() {
-    const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return ji(t, this.constructor.elementStyles), t;
-  }
-  connectedCallback() {
-    this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(!0), this._$EO?.forEach(((t) => t.hostConnected?.()));
-  }
-  enableUpdating(t) {
-  }
-  disconnectedCallback() {
-    this._$EO?.forEach(((t) => t.hostDisconnected?.()));
-  }
-  attributeChangedCallback(t, e, i) {
-    this._$AK(t, i);
-  }
-  _$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 : 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 : qt;
-      this._$Em = r;
-      const o = a.fromAttribute(e, n.type);
-      this[r] = o ?? this._$Ej?.get(r) ?? o, this._$Em = null;
-    }
-  }
-  requestUpdate(t, e, i) {
-    if (t !== void 0) {
-      const r = this.constructor, n = this[t];
-      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());
-  }
-  C(t, e, { useDefault: i, reflect: r, wrapped: n }, a) {
-    i && !(this._$Ej ??= /* @__PURE__ */ new Map()).has(t) && (this._$Ej.set(t, a ?? e ?? this[t]), n !== !0 || a !== void 0) || (this._$AL.has(t) || (this.hasUpdated || i || (e = void 0), this._$AL.set(t, e)), r === !0 && this._$Em !== t && (this._$Eq ??= /* @__PURE__ */ new Set()).add(t));
-  }
-  async _$EP() {
-    this.isUpdatePending = !0;
-    try {
-      await this._$ES;
-    } catch (e) {
-      Promise.reject(e);
-    }
-    const t = this.scheduleUpdate();
-    return t != null && await t, !this.isUpdatePending;
-  }
-  scheduleUpdate() {
-    return this.performUpdate();
-  }
-  performUpdate() {
-    if (!this.isUpdatePending) return;
-    if (!this.hasUpdated) {
-      if (this.renderRoot ??= this.createRenderRoot(), this._$Ep) {
-        for (const [r, n] of this._$Ep) this[r] = n;
-        this._$Ep = void 0;
-      }
-      const i = this.constructor.elementProperties;
-      if (i.size > 0) for (const [r, n] of i) {
-        const { wrapped: a } = n, o = this[r];
-        a !== !0 || this._$AL.has(r) || o === void 0 || this.C(r, void 0, n, o);
-      }
-    }
-    let t = !1;
-    const e = this._$AL;
-    try {
-      t = this.shouldUpdate(e), t ? (this.willUpdate(e), this._$EO?.forEach(((i) => i.hostUpdate?.())), this.update(e)) : this._$EM();
-    } catch (i) {
-      throw t = !1, this._$EM(), i;
-    }
-    t && this._$AE(e);
-  }
-  willUpdate(t) {
-  }
-  _$AE(t) {
-    this._$EO?.forEach(((e) => e.hostUpdated?.())), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(t)), this.updated(t);
-  }
-  _$EM() {
-    this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
-  }
-  get updateComplete() {
-    return this.getUpdateComplete();
-  }
-  getUpdateComplete() {
-    return this._$ES;
-  }
-  shouldUpdate(t) {
-    return !0;
-  }
-  update(t) {
-    this._$Eq &&= this._$Eq.forEach(((e) => this._$ET(e, this[e]))), this._$EM();
-  }
-  updated(t) {
-  }
-  firstUpdated(t) {
-  }
-}
-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();
-    }), this._el.addEventListener("contextmenu", (i) => {
-      i.preventDefault();
-    });
-  }
-  get el() {
-    return this._el;
-  }
-  attachToParent(t) {
-    t.appendChild(this.el);
-  }
-  createOptionGroup(t) {
-    const e = new is(t, this.rootNode);
-    this.options.push(e), this.el.appendChild(e.el);
-  }
-  addDivider() {
-    const t = document.createElement("hr");
-    t.classList.add("context-menu-divider"), this.el.appendChild(t);
-  }
-}
-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));
-  }
-  get el() {
-    return this._el;
-  }
-  attachToParent(t) {
-    t.appendChild(this.el);
-  }
-  createOptionElement(t) {
-    t.parent = this;
-    const e = new ss(t, this.rootNode);
-    this.childOptions.push(e);
-  }
-}
-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) => rs(i, t, this._el, this.rootNode)
-    ), this._el.addEventListener("contextmenu", (i) => {
-      i.preventDefault();
-    });
-  }
-}
-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 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, 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 St = 5;
-function Xt(s) {
-  const t = this;
-  return function(...e) {
-    const i = s.apply(t, e);
-    return t.clearContextMenu(), i;
-  };
-}
-function ns(s, t, e = "single") {
-  const i = new ze(
-    e === "single" ? this.singleImageMenuOptions : e === "multi" ? this.multiImageMenuOptions : this.canvasImageMenuOptions,
-    this.rootDiv
-  );
-  if (!this.rootDiv) {
-    console.error("Can't add to parent div");
-    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(), l = [
-    n + c.width > o ? 1 : 0,
-    a + c.height > h ? 1 : 0
-  ], 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 - 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 as() {
-  const s = this.renderRoot.querySelector(".context-menu");
-  s && (s.remove(), this.eventHub.emit(H.Close));
-}
-function os() {
-  return this.renderRoot.querySelector(".context-menu") !== null;
-}
-function hs() {
-  const s = Xt.bind(this);
-  return {
-    options: [
-      {
-        childOptions: [
-          {
-            text: "Cut",
-            onClick: async () => {
-              await this.copyImage.bind(this)(), s(this.deleteSelectedImages.bind(this))();
-            }
-          },
-          {
-            text: "Copy",
-            onClick: s(this.copyImage.bind(this))
-          },
-          {
-            text: "Paste",
-            onClick: (t) => s(this.pasteImage.bind(this))(t)
-          },
-          {
-            text: "Delete",
-            onClick: s(this.deleteSelectedImages.bind(this))
-          }
-        ]
-      },
-      {
-        childOptions: [
-          {
-            text: "Flip Horizontal",
-            onClick: s(this.flipHorizontal.bind(this))
-          },
-          {
-            text: "Flip Vertical",
-            onClick: s(this.flipVertical.bind(this))
-          }
-        ]
-      }
-    ]
-  };
-}
-function cs(s) {
-  const t = Xt.bind(this);
-  return {
-    options: [
-      ...s ?? [],
-      {
-        childOptions: [
-          {
-            text: "Send to Front",
-            onClick: () => t(this.sendShapeToNewZOrder.bind(this))(!0)
-          },
-          {
-            text: "Send to Back",
-            onClick: () => t(this.sendShapeToNewZOrder.bind(this))(!1)
-          }
-        ]
-      }
-    ]
-  };
-}
-function ds(s) {
-  const t = Xt.bind(this);
-  return {
-    options: [
-      ...s ?? [],
-      {
-        childOptions: [
-          {
-            text: "Align",
-            onHover: () => {
-            },
-            subMenu: {
-              options: [
-                {
-                  childOptions: [
-                    {
-                      text: "Align Left",
-                      onClick: () => t(this.align.bind(this))("left")
-                    },
-                    {
-                      text: "Align Right",
-                      onClick: () => t(this.align.bind(this))("right")
-                    },
-                    {
-                      text: "Align Top",
-                      onClick: () => t(this.align.bind(this))("top")
-                    },
-                    {
-                      text: "Align Bottom",
-                      onClick: () => t(this.align.bind(this))("bottom")
-                    }
-                  ]
-                }
-              ]
-            }
-          },
-          {
-            text: "Normalize by First",
-            onHover: () => {
-            },
-            subMenu: {
-              options: [
-                {
-                  childOptions: [
-                    {
-                      text: "Height",
-                      onClick: () => t(this.normalizeSelection.bind(this))(
-                        "height",
-                        "first"
-                      )
-                    },
-                    {
-                      text: "Width",
-                      onClick: () => t(this.normalizeSelection.bind(this))(
-                        "width",
-                        "first"
-                      )
-                    },
-                    {
-                      text: "Size",
-                      onClick: () => t(this.normalizeSelection.bind(this))(
-                        "size",
-                        "first"
-                      )
-                    },
-                    {
-                      text: "Scale",
-                      onClick: () => t(this.normalizeSelection.bind(this))(
-                        "scale",
-                        "first"
-                      )
-                    }
-                  ]
-                }
-              ]
-            }
-          },
-          {
-            text: "Normalize by Average",
-            onHover: () => {
-            },
-            subMenu: {
-              options: [
-                {
-                  childOptions: [
-                    {
-                      text: "Height",
-                      onClick: () => t(this.normalizeSelection.bind(this))(
-                        "height",
-                        "average"
-                      )
-                    },
-                    {
-                      text: "Width",
-                      onClick: () => t(this.normalizeSelection.bind(this))(
-                        "width",
-                        "average"
-                      )
-                    },
-                    {
-                      text: "Size",
-                      onClick: () => t(this.normalizeSelection.bind(this))(
-                        "size",
-                        "average"
-                      )
-                    },
-                    {
-                      text: "Scale",
-                      onClick: () => t(this.normalizeSelection.bind(this))(
-                        "scale",
-                        "average"
-                      )
-                    }
-                  ]
-                }
-              ]
-            }
-          }
-        ]
-      }
-    ]
-  };
-}
-function ls(s) {
-  const t = Xt.bind(this);
-  return {
-    options: [
-      ...s ?? [],
-      {
-        childOptions: [
-          {
-            text: "Change mode",
-            onClick: () => t(this.togglePointerMode.bind(this))()
-          },
-          {
-            text: "Toggle Grid",
-            onClick: () => t(this.toggleGrid.bind(this))()
-          }
-        ]
-      },
-      {
-        childOptions: [
-          {
-            text: "Save",
-            onClick: () => t(this.saveToCanvasStorage.bind(this))()
-          },
-          {
-            text: "Paste",
-            onClick: (e) => t(this.pasteImage.bind(this))(e)
-          }
-        ]
-      }
-    ]
-  };
-}
-class te {
-  _touch() {
-    this._lastRetrieved = Date.now();
-  }
-  get id() {
-    return this._touch(), this._id;
-  }
-  get dataURL() {
-    return this._touch(), this._dataURL;
-  }
-  get mimetype() {
-    return this._touch(), this._mimetype;
-  }
-  get created() {
-    return this._touch(), this._created;
-  }
-  get lastRetrieved() {
-    return this._lastRetrieved;
-  }
-  constructor(t) {
-    this._dataURL = t, this._mimetype = li(t), this._created = Date.now(), this._lastRetrieved = Date.now();
-  }
-  static async create(t) {
-    const e = new te(t);
-    return e._id = await Qt(t), e;
-  }
-}
-class us {
-}
-class fs {
-}
-function ke(s) {
-  s.Version.prototype._parseStoresSpec = Y.override(
-    s.Version.prototype._parseStoresSpec,
-    ms
-  ), s.open = Y.override(s.open, ps(s));
-}
-function ms(s) {
-  return function(t, e) {
-    s.call(this, t, e), Object.keys(e).forEach(function(i) {
-      let r = e[i];
-      r.primKey.name.indexOf("$$") === 0 && (r.primKey.uuid = !0, r.primKey.name = r.primKey.name.substr(2), r.primKey.keyPath = r.primKey.keyPath.substr(2));
-    });
-  };
-}
-function gs(s) {
-  return function(e, i) {
-    let 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 ps(s) {
-  return function(e) {
-    return function() {
-      return Object.keys(s._allTables).forEach((i) => {
-        let r = s._allTables[i];
-        r.hook("creating").subscribe(gs(r));
-      }), e.apply(this, arguments);
-    };
-  };
-}
-Y.UUIDPrimaryKey = ke;
-Y.addons.push(ke);
-Y.UUIDPrimaryKey;
-const xs = {
-  files: "$$id, mimetype, created, lastRetrieved"
-}, Ce = {
-  MAX_IMAGE_ENTRIES: 1e3
-};
-class Mt extends us {
-  constructor() {
-    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(xs), await t.open(), t;
-    });
-  }
-  async getIndexDb() {
-    return this.dbPromise;
-  }
-  /**
-   * Writes to indexedDB
-   * @param data
-   * @param mimetype
-   * @returns the file ID
-   */
-  async write(t) {
-    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 ws(r), await r.files.add({
-          id: e.id,
-          blob: i,
-          dataURL: e.dataURL,
-          mimetype: e.mimetype,
-          created: e.created,
-          lastRetrieved: e.lastRetrieved
-        }))).catch((n) => {
-          throw console.error("Failed to save image blob to local DB:", n), n;
-        });
-      })
-    );
-  }
-  async readAll() {
-    return $(async () => await (await this.getIndexDb()).files.toArray());
-  }
-  async readPage(t, e) {
-    return $(async () => await (await this.getIndexDb()).files.offset(t).limit(e).toArray());
-  }
-  async read(t) {
-    return $(async () => {
-      const e = await this.getIndexDb();
-      if (this.cache.has(t))
-        return this.cache.get(t);
-      const i = await e.files.get(t);
-      if (!i) return null;
-      if (this.dbQueue.add(async () => {
-        try {
-          await e.files.update(t, { lastRetrieved: Date.now() });
-        } catch (r) {
-          console.error("Failed to update lastRetrieved", r);
-        }
-      }).catch(() => {
-      }), this.cache.set(t, i), this.cache.size > this.CACHE_LIMIT) {
-        const r = this.cache.keys().next().value;
-        this.cache.delete(r);
-      }
-      return i;
-    });
-  }
-  async delete(t) {
-    return this.dbQueue.add(
-      () => $(async () => {
-        const e = await this.getIndexDb();
-        return await e.transaction("rw", e.files, async () => {
-          const i = await e.files.where("id").equals(t).first();
-          return await e.files.delete(i.id), i;
-        }).catch((i) => {
-          throw console.error("Failed to save image blob to local DB:", i), i;
-        });
-      })
-    );
-  }
-  async update(t) {
-    return this.dbQueue.add(
-      () => $(async () => {
-        const e = await this.getIndexDb();
-        return await e.transaction("rw", e.files, async () => {
-          await e.files.update(t.id, {
-            dataURL: t.dataURL,
-            mimetype: t.mimetype,
-            lastRetrieved: Date.now()
-          });
-        }), await e.files.where("id").equals(t.id).first();
-      })
-    );
-  }
-  async checkIfImageStored(t) {
-    return $(async () => {
-      const i = await (await this.getIndexDb()).files.where("id").equals(t).first();
-      return i ? i.id : null;
-    });
-  }
-}
-class $t extends fs {
-  constructor(t) {
-    super(), this.key = "infinite_canvas", this.key = t;
-  }
-  async write(t) {
-    return new Promise((e, i) => {
-      try {
-        localStorage.setItem(this.key, JSON.stringify(t)), e();
-      } catch (r) {
-        i(r);
-      }
-    });
-  }
-  async read() {
-    return new Promise((t, e) => {
-      try {
-        t(localStorage.getItem(this.key));
-      } catch (i) {
-        e(i);
-      }
-    });
-  }
-  async delete() {
-    return new Promise((t, e) => {
-      try {
-        localStorage.removeItem(this.key), t();
-      } catch (i) {
-        e(i);
-      }
-    });
-  }
-  async update(t) {
-    return this.write(t);
-  }
-}
-class Se extends Error {
-  constructor(t) {
-    super(t), this.name = "QuotaExceededError";
-  }
-}
-class ys extends Error {
-  constructor(t) {
-    super(t), this.name = "DatabaseLimitError";
-  }
-}
-class Me {
-  constructor() {
-    this.queue = Promise.resolve();
-  }
-  async add(t) {
-    const e = this.queue.then(() => t());
-    return this.queue = e.catch(() => {
-    }), e;
-  }
-}
-const $ = async (s) => {
-  try {
-    return await s();
-  } catch (t) {
-    throw t instanceof DOMException && t.name === "QuotaExceededError" ? new Se(
-      "Storage quota exceeded. Please free up space."
-    ) : t instanceof Y.QuotaExceededError ? new Se(
-      "Database quota exceeded. Please free up space."
-    ) : t;
-  }
-};
-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 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 bs {
-  get el() {
-    return this._el;
-  }
-  constructor(t) {
-    this.type = t.type, this.message = t.message, this._el = document.createElement("div"), this._el.classList.add("canvas-loader"), this.render();
-  }
-  render() {
-    if (this._el.innerHTML = "", this.type === "spinner") {
-      const t = document.createElement("div");
-      if (t.classList.add("canvas-loader-spinner"), this._el.appendChild(t), this.message) {
-        const e = document.createElement("div");
-        e.classList.add("canvas-loader-message"), e.textContent = this.message, this._el.appendChild(e);
-      }
-    } else if (this.type === "message") {
-      const t = document.createElement("div");
-      t.classList.add("canvas-loader-message"), t.textContent = this.message ?? "", this._el.appendChild(t);
-    }
-  }
-  setMessage(t) {
-    this.message = t, this.render();
-  }
-  setProgress(t) {
-    this.progress = t, this.render();
-  }
-  attachToParent(t) {
-    t.appendChild(this.el);
-  }
-  remove() {
-    this._el.parentNode && this._el.parentNode.removeChild(this._el);
-  }
-}
-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 Ss() {
-  const s = this.renderRoot.querySelector(".canvas-loader");
-  s && s.remove();
-}
-var Ms = Object.getOwnPropertyDescriptor, Ue = (s) => {
-  throw TypeError(s);
-}, 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;
-}, 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, 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, At);
-  }
-  get multiImageMenuOptions() {
-    return d(this, Lt);
-  }
-  get canvasImageMenuOptions() {
-    return d(this, Ot);
-  }
-  get canvas() {
-    return d(this, p);
-  }
-  get onCanvasChange() {
-    return d(this, at);
-  }
-  set onCanvasChange(s) {
-    M(this, at, s);
-  }
-  get eventHub() {
-    return d(this, _);
-  }
-  get rootDiv() {
-    return d(this, q);
-  }
-  // Lifecycle
-  connectedCallback() {
-    super.connectedCallback(), this.handleGlobalPointerDown = this.handleGlobalPointerDown.bind(this), document.addEventListener(
-      "pointerdown",
-      this.handleGlobalPointerDown,
-      !0
-    );
-  }
-  disconnectedCallback() {
-    document.removeEventListener(
-      "pointerdown",
-      this.handleGlobalPointerDown,
-      !0
-    ), window.removeEventListener("resize", d(this, xt)), d(this, It)?.disconnect(), M(this, It, void 0), d(this, p).destroy(), super.disconnectedCallback();
-  }
-  firstUpdated(s) {
-    try {
-      this.initCanvas();
-    } catch (t) {
-      throw console.error(t), t;
-    }
-  }
-  updated(s) {
-    if (!(s.has("width") || s.has("height") || s.has("displayMode"))) return;
-    const e = d(this, q), i = this.renderRoot.querySelector(
-      "canvas"
-    );
-    e && i && this.resizeCanvas(e, i);
-  }
-  async initCanvas() {
-    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), 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 = 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, _),
-      this.debounceSaveToCanvasStorage,
-      this.saveImageFileMetadata,
-      this.getContainerSize
-    ));
-    try {
-      await this.restoreStateFromCanvasStorage();
-    } catch {
-      console.error("Failed to restore canvas");
-    }
-    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
-    )), M(this, Ot, ls.bind(this)()), M(this, Lt, ds.bind(this)(
-      e.options
-    )), this.dispatchEvent(new Event("load"));
-    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);
-    };
-    r();
-  }
-  normalizeCssSize(s) {
-    if (!s) return s;
-    const t = String(s).trim();
-    return /^\d+$/.test(t) ? `${t}px` : t;
-  }
-  resizeCanvas(s, t) {
-    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 = 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(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(
-      st.SaveFailed,
-      () => console.error("Failed to Save!")
-    );
-  }
-  // need to check if this is good practice
-  async warmUpStorage() {
-    d(this, L) || M(this, L, new Mt());
-    try {
-      await d(this, L).readAll();
-    } catch (s) {
-      console.error("Storage warm-up failed", s);
-    }
-  }
-  /**
-   * @returns An array containing the width and height of the container
-   */
-  getContainerSize() {
-    if (!d(this, q)) return;
-    const s = d(this, q).getBoundingClientRect();
-    return [s.width, s.height];
-  }
-  // Storage & Persistence
-  /**
-   * @param storage Canvas storage stores the positions of all the renderables
-   * @param saveFrequency How often should auto save execute
-   */
-  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, 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) {
-    M(this, L, s);
-  }
-  /**
-   * Duplicate images will not be written to the database
-   * @param dataURL
-   * @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, L) || M(this, L, new Mt());
-    try {
-      const t = await Qt(s);
-      return await d(this, L).checkIfImageStored(t) ? t : await d(this, L).write(s);
-    } catch (t) {
-      console.error(t);
-    }
-  }
-  /**
-   * @param fileId Retrieves the file metadata
-   * @returns
-   */
-  async getImageFileMetadata(s) {
-    d(this, L) || M(this, L, new Mt());
-    try {
-      return await d(this, L).read(s);
-    } catch (t) {
-      console.error(t);
-    }
-  }
-  /**
-   * @returns All file metadata saved in connected storage
-   */
-  async getAllImageFileMetdata() {
-    d(this, L) || M(this, L, new Mt());
-    try {
-      return await d(this, L).readAll();
-    } catch (s) {
-      console.error(s);
-    }
-  }
-  /**
-   * Schedule the auto save to the canvas storage based on timer
-   */
-  debounceSaveToCanvasStorage(s = 1e3) {
-    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) || 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) || M(this, k, new $t(this.name));
-    const s = await d(this, k).read(), t = JSON.parse(s);
-    t && await Zt(t, d(this, p), this.getImageFileMetadata);
-  }
-  // Canvas API
-  togglePointerMode() {
-    d(this, p) && d(this, p).changeMode();
-  }
-  toggleGrid() {
-    d(this, p) && d(this, p).toggleGrid();
-  }
-  zoomIn() {
-    d(this, p) && d(this, p).updateZoomByFixedAmount(-1);
-  }
-  zoomOut() {
-    d(this, p) && d(this, p).updateZoomByFixedAmount();
-  }
-  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] = 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(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(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] = 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 Re(d(this, p).getSelected());
-  }
-  async pasteImage(s) {
-    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");
-  }
-  flipHorizontal() {
-    d(this, p) && d(this, p).selectionManager.flip("horizontal");
-  }
-  align(s) {
-    d(this, p) && d(this, p).selectionManager.alignSelection(s);
-  }
-  normalizeSelection(s, t) {
-    d(this, p) && d(this, p).selectionManager.normalize(s, t);
-  }
-  sendShapeToNewZOrder(s) {
-    d(this, p) && d(this, p).setShapeZOrder(s);
-  }
-  deleteSelectedImages() {
-    d(this, p) && d(this, p).selectionManager.deleteSelected(d(this, p));
-  }
-  async exportCanvas(s = "infinite-canvas.json") {
-    if (!d(this, p)) return;
-    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(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 mi(t);
-    await Zt(
-      e,
-      d(this, p),
-      this.getImageFileMetadata,
-      this.saveImageFileMetadata
-    ), d(this, _).emit(st.Save), d(this, _).emit(it.done);
-  }
-  clearCanvas() {
-    d(this, p) && d(this, p).clearChildren();
-  }
-  /**
-   * A non-reactive method that captures the number of images added to the canvas
-   */
-  getTotalNumberOfChildren() {
-    if (d(this, p))
-      return d(this, p).totalNumberOfChildren;
-  }
-  /**
-   * A non-reactive method that captures the number of images that are in camera
-   */
-  getNumberOfChildrenRendered() {
-    if (d(this, p))
-      return d(this, p).numberOfChildrenRendered;
-  }
-};
-p = /* @__PURE__ */ new WeakMap();
-_ = /* @__PURE__ */ new WeakMap();
-It = /* @__PURE__ */ new WeakMap();
-j = /* @__PURE__ */ new WeakMap();
-L = /* @__PURE__ */ new WeakMap();
-k = /* @__PURE__ */ new WeakMap();
-gt = /* @__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();
-Ut.properties = {
-  name: { type: String, reflect: !0 },
-  width: { type: String, reflect: !0 },
-  height: { type: String, reflect: !0 },
-  displayMode: { type: String, reflect: !0 }
-};
-Ut.styles = ti`
-    :host {
-      position: relative;
-      overflow: hidden;
-    }
-
-    .context-menu {
-      position: absolute;
-      background: white;
-      min-width: 180px;
-      background: var(--menu-bg, #fff);
-      border-radius: 6px;
-      border: 1px solid var(--menu-border, #9f9f9fff);
-      box-sizing: border-box;
-      padding: 6px 0;
-      display: flex;
-      gap: 2px;
-      flex-direction: column;
-      font-family: system-ui, sans-serif;
-      animation: fadeInMenu 0.13s cubic-bezier(0.4, 0, 0.2, 1);
-      overflow: scroll;
-    }
-
-    @keyframes fadeInMenu {
-      from {
-        opacity: 0;
-        transform: translateY(8px);
-      }
-      to {
-        opacity: 1;
-        transform: none;
-      }
-    }
-
-    .context-menu button {
-      all: unset;
-      display: flex;
-      align-items: center;
-      box-sizing: border-box;
-      width: 100%;
-      padding: 8px 18px;
-      font-size: 15px;
-      color: var(--menu-fg, #222);
-      background: none;
-      cursor: pointer;
-      transition:
-        background 0.1s,
-        color 0.1s;
-      user-select: none;
-      outline: none;
-    }
-
-    .context-menu button:hover,
-    .context-menu button:focus-visible {
-      background: var(--menu-hover, #c7d5eaff);
-      color: var(--menu-accent, #155290ff);
-    }
-
-    .context-menu button:active {
-      background: var(--menu-active, #e3eaf3);
-    }
-
-    .context-menu button[disabled] {
-      color: #aaa;
-      cursor: not-allowed;
-      background: none;
-    }
-
-    .context-menu-divider {
-      height: 1px;
-      background: var(--menu-divider, #c7d5eaff);
-      margin: 6px 12px;
-      border: none;
-    }
-
-    canvas {
-      width: 100%;
-      height: 100%;
-      outline: none;
-      padding: 0;
-      margin: 0;
-      touch-action: none;
-      display: block;
-    }
-
-    .canvas-loader {
-      position: absolute;
-      top: 0;
-      left: 0;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      background: rgba(255, 255, 255, 0.7);
-      z-index: 1000;
-      pointer-events: all;
-    }
-
-    .canvas-loader-spinner {
-      width: 48px;
-      height: 48px;
-      border: 6px solid #e0e0e0;
-      border-top: 6px solid #1976d2;
-      border-radius: 50%;
-      animation: canvas-loader-spin 1s linear infinite;
-      margin-bottom: 16px;
-    }
-
-    @keyframes canvas-loader-spin {
-      0% {
-        transform: rotate(0deg);
-      }
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-
-    .canvas-loader-message {
-      font-size: 1.1rem;
-      color: #333;
-      background: rgba(255, 255, 255, 0.9);
-      padding: 8px 16px;
-      border-radius: 4px;
-      margin-top: 8px;
-      text-align: center;
-      max-width: 80%;
-      word-break: break-word;
-    }
-  `;
-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);
-  }
-  static async forElement(t) {
-    let e;
-    if (typeof t == "string" ? (await customElements.whenDefined("infinite-canvas"), e = document.querySelector(
-      t
-    )) : 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 Fe(e);
-  }
-  /**
-   * Without assigning storage, the canvas will not save any data
-   * @param storage
-   * @param saveFrequency How often auto save occurs in ms
-   */
-  assignCanvasStorage(t, e = 3e3) {
-    return this.el.assignCanvasStorage(t, e), this;
-  }
-  async zoomIn() {
-    console.log("zooming"), this.el.zoomIn();
-  }
-  async zoomOut() {
-    this.el.zoomOut();
-  }
-  async toggleMode() {
-    this.el.togglePointerMode();
-  }
-  async addImageFromLocal(t) {
-    if (!(!t || t.length === 0)) {
-      for (let e = 0; e < t.length; e++) {
-        const i = t[e];
-        if (!i || !i.type || !i.type.startsWith("image/"))
-          throw new Error(
-            "Only specific image files are supported. Please select image files only."
-          );
-      }
-      await this.el.addImages(t);
-    }
-  }
-  async exportCanvas(t) {
-    this.el.exportCanvas(t);
-  }
-  async importCanvas(t) {
-    !t || t.length !== 1 || await this.el.importCanvas(t);
-  }
-  async clearCanvas() {
-    this.el.clearCanvas();
-  }
-}
-export {
-  Fi as Camera,
-  kt as Canvas,
-  Fe as InfiniteCanvasAPI,
-  Ut as InfiniteCanvasElement,
-  Wi as ZOOM_MAX,
-  Ui as ZOOM_MIN
-};
-//# sourceMappingURL=index.js.map