ablok-photobooth 0.2.42 → 0.2.44

package/dist/ablok-photobooth.js

@@ -1,6 +1,6 @@
 import { _ as a } from "./chunks/photo-app.vue_vue_type_style_index_0_lang-BdQvhbLS.js";
-import { _ as e } from "./chunks/fabric-canvas.vue_vue_type_style_index_0_lang-B-D65X2t.js";
-import { _ as s } from "./chunks/creative-booth.vue_vue_type_style_index_0_lang-BHKoShl5.js";
+import { _ as e } from "./chunks/fabric-canvas.vue_vue_type_style_index_0_lang-C9fwZf_Y.js";
+import { _ as s } from "./chunks/creative-booth.vue_vue_type_style_index_0_lang-CRbsZZLr.js";
 import { _ as m } from "./chunks/face-swap.vue_vue_type_style_index_0_lang-B0EJ4Q3T.js";
 import { _ } from "./chunks/color-booth.vue_vue_type_style_index_0_lang-Cxo8ZMRt.js";
 export {

package/dist/chunks/{creative-booth.vue_vue_type_style_index_0_lang-BHKoShl5.js → creative-booth.vue_vue_type_style_index_0_lang-CRbsZZLr.js}

@@ -1,6 +1,6 @@
 import { defineComponent as x, ref as c, computed as l, watch as S, openBlock as u, createElementBlock as v, createElementVNode as h, createVNode as B, normalizeClass as M, createCommentVNode as b, createBlock as V } from "vue";
 import w from "ablok-components/components/molecules/media-thumbnails/media-thumbnails.vue";
-import { _ as A } from "./fabric-canvas.vue_vue_type_style_index_0_lang-B-D65X2t.js";
+import { _ as A } from "./fabric-canvas.vue_vue_type_style_index_0_lang-C9fwZf_Y.js";
 const C = { class: "creative-booth" }, D = { class: "media-container" }, O = ["innerHTML"], E = { class: "creative-booth__thumbnails" }, F = [
   {
     type: "background",

package/dist/chunks/fabric-canvas.vue_vue_type_style_index_0_lang-C9fwZf_Y.js

@@ -0,0 +1,316 @@
+import { defineComponent as Z, ref as j, watch as ee, onMounted as te, onUnmounted as ae, openBlock as ne, createElementBlock as oe, createElementVNode as M, renderSlot as re } from "vue";
+import { debounce as ie } from "lodash";
+function O(i) {
+  return new Promise((c, l) => {
+    i.oncomplete = i.onsuccess = () => c(i.result), i.onabort = i.onerror = () => l(i.error);
+  });
+}
+function se(i, c) {
+  const l = indexedDB.open(i);
+  l.onupgradeneeded = () => l.result.createObjectStore(c);
+  const d = O(l);
+  return (p, w) => d.then(
+    (u) => w(u.transaction(c, p).objectStore(c))
+  );
+}
+let _;
+function A() {
+  return _ || (_ = se("keyval-store", "keyval")), _;
+}
+function le(i, c = A()) {
+  return c("readonly", (l) => O(l.get(i)));
+}
+function ce(i, c, l = A()) {
+  return l("readwrite", (d) => (d.put(c, i), O(d.transaction)));
+}
+function de(i, c = A()) {
+  return c("readwrite", (l) => (l.delete(i), O(l.transaction)));
+}
+const ue = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffffCC'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='feather%20feather-rotate-cw'%3e%3cpolyline%20points='23%204%2023%2010%2017%2010'%3e%3c/polyline%3e%3cpath%20d='M20.49%2015a9%209%200%201%201-2.12-9.36L23%2010'%3e%3c/path%3e%3c/svg%3e", fe = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffffCC'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='feather%20feather-x-circle'%3e%3ccircle%20cx='12'%20cy='12'%20r='10'%20fill='none'%3e%3c/circle%3e%3cline%20x1='15'%20y1='9'%20x2='9'%20y2='15'%20fill='none'%3e%3c/line%3e%3cline%20x1='9'%20y1='9'%20x2='15'%20y2='15'%20fill='none'%3e%3c/line%3e%3c/svg%3e", ge = { class: "fabric-canvas__canvas" }, me = {
+  id: "fabricCanvas",
+  ref: "canvasRef"
+}, ye = /* @__PURE__ */ Z({
+  __name: "fabric-canvas",
+  props: {
+    modelValue: {
+      type: String,
+      default: ""
+    },
+    jsonModel: {
+      type: null,
+      default: void 0
+    },
+    exportToSvg: {
+      type: Boolean,
+      default: !1
+    },
+    resetState: {
+      type: Boolean,
+      default: !1
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    feature: {
+      type: String,
+      default: ""
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    pending: {
+      type: Boolean,
+      default: !1
+    },
+    emitPending: {
+      type: Boolean,
+      default: !1
+    },
+    animationDuration: {
+      type: Number,
+      default: 0
+    }
+  },
+  emits: ["update:modelValue", "update:jsonModel", "update:pending", "on-ready"],
+  setup(i, { expose: c, emit: l }) {
+    let d, p, w, u, F, x, R, C;
+    const b = l;
+    c({ setBackgroundImage: N, setOverlayImage: X, addCanvasObject: Y });
+    const o = i, v = j(), f = j(0), g = j(0);
+    let a, E = !1;
+    const T = j();
+    async function G(e, t) {
+      return new Promise(async (n) => {
+        const r = JSON.parse(t);
+        if (r.backgroundImage) {
+          const s = await h(r.backgroundImage.src || r.backgroundImage.filename);
+          s.set({
+            opacity: 1
+          }), e.backgroundImage = s, e.centerObject(s);
+        }
+        if (r.overlayImage) {
+          const s = await h(r.overlayImage.src || r.overlayImage.filename);
+          s.set({
+            opacity: 1
+          }), e.overlayImage = D(s), e.centerObject(s);
+        }
+        (await u.enlivenObjects(r.objects, {
+          reviver: void 0
+        })).forEach((s) => {
+          e.add(s);
+        }), n(e);
+      });
+    }
+    async function h(e) {
+      const t = await B(e);
+      e.includes("data:image") || (t.filename = e);
+      const n = u.findScaleToCover(t, a), r = t instanceof p;
+      return t.set({
+        left: 0,
+        top: 0,
+        opacity: r && o.animationDuration > 0 ? 0 : 1,
+        scaleX: n,
+        scaleY: n,
+        src: e
+      }), t;
+    }
+    async function k(e) {
+      !(e instanceof p) || o.animationDuration === 0 || (o.emitPending && b("update:pending", !0), await new Promise((n) => {
+        const r = o.animationDuration, S = Date.now(), s = () => {
+          const I = Date.now() - S, m = Math.min(I / r, 1);
+          e.set("opacity", m), a.renderAll(), m < 1 ? requestAnimationFrame(s) : (o.emitPending && b("update:pending", !1), n());
+        };
+        requestAnimationFrame(s);
+      }));
+    }
+    function U(e) {
+      const t = u.findScaleToCover(e, a);
+      return e.set({
+        scaleX: t,
+        scaleY: t
+      }), e;
+    }
+    async function N(e) {
+      const t = await h(e.src);
+      a.backgroundImage = t, a.centerObject(t), a.renderAll(), await k(t), y();
+    }
+    function D(e) {
+      return e.set({
+        scaleX: f.value / e.width,
+        scaleY: g.value / e.height
+      }), e;
+    }
+    async function P(e) {
+      const t = await h(e.src);
+      t.selectable = !1, t.assetType = "foreground", a.add(t), a.centerObject(t), a.renderAll(), await k(t), y();
+    }
+    async function X(e) {
+      const t = await h(e.src);
+      a.overlayImage = D(t), a.centerObject(t), a.renderAll(), await k(t), y();
+    }
+    async function Y(e) {
+      a.discardActiveObject();
+      const t = await B(e.src);
+      t.filename = e.src;
+      const n = f.value / 3, r = g.value / 3, S = n / t.width, s = r / t.height, I = Math.min(S, s);
+      t.set({
+        scaleX: I,
+        scaleY: I,
+        left: f.value / 2,
+        top: g.value / 2
+      }), t.id = e.id, t.padding = 8, a.add(t), a.setActiveObject(t), await k(t), a.renderAll();
+    }
+    function L(e, t) {
+      t.target.id;
+      const n = t.target;
+      return a.remove(n), a.requestRenderAll(), !0;
+    }
+    function W() {
+      if (!(!v.value || !a)) {
+        if (f.value = v.value.offsetWidth, g.value = v.value.offsetHeight, a.setDimensions({ width: f.value, height: g.value }), a.backgroundImage && (a.backgroundImage = U(a.backgroundImage), a.centerObject(a.backgroundImage)), a.overlayImage) {
+          const e = a.overlayImage;
+          a.overlayImage = D(e), a.centerObject(e);
+        }
+        a.getObjects().forEach((e) => {
+          e.assetType === "foreground" && (e = U(e), a.centerObject(e));
+        }), a.renderAll();
+      }
+    }
+    const V = ie(() => {
+      W();
+    }, 200, { trailing: !0, leading: !1 });
+    function z(e) {
+      return (t, n, r, S, s) => {
+        t.save(), t.translate(n, r), t.rotate(u.degreesToRadians(s.angle)), t.fillStyle = o.options.themeData?.colors?.primary, t.fillRect(-24 / 2, -24 / 2, 24, 24);
+        const m = 20;
+        t.drawImage(e, -m / 2, -m / 2, m, m), t.restore();
+      };
+    }
+    function q() {
+      const e = document.createElement("img");
+      e.src = ue;
+      const t = document.createElement("img");
+      t.src = fe, a.on("object:added", (n) => {
+        n.target && n.target.controls && (n.target.set({
+          transparentCorners: !1,
+          cornerSize: 16,
+          cornerStyle: "circle",
+          ...o.options.themeData?.colors?.primary ? {
+            cornerColor: o.options.themeData?.colors?.primary,
+            cornerStrokeColor: o.options.themeData?.colors?.primary,
+            borderColor: o.options.themeData?.colors?.primary
+          } : {}
+        }), n.target.controls.ml.visible = !1, n.target.controls.mr.visible = !1, n.target.controls.mb.visible = !1, n.target.controls.mt.visible = !1, n.target.controls.mtr.visible = !1, n.target.controls.rotate = new w({
+          x: 0.5,
+          y: -0.5,
+          offsetX: 32,
+          offsetY: 0,
+          cursorStyle: "pointer",
+          actionName: "rotate",
+          actionHandler: C.rotationWithSnapping,
+          cursorStyleHandler: C.rotationStyleHandler,
+          render: z(e)
+        }), n.target.controls.delete = new w({
+          x: 0.5,
+          y: -0.5,
+          offsetX: 32,
+          offsetY: 32,
+          cursorStyle: "pointer",
+          mouseUpHandler: L,
+          render: z(t)
+        }));
+      });
+    }
+    async function J() {
+      return await new Promise((e) => {
+        setTimeout(() => {
+          const t = o.exportToSvg ? a.toSVG() : a.toDataURL({ multiplier: 2 });
+          e(t);
+        }, 200);
+      });
+    }
+    function y() {
+      setTimeout(async () => {
+        const e = a.toDatalessJSON(["selectable", "assetType", "filename"]);
+        await ce("fabric-canvas", JSON.stringify(e));
+        let t = !0;
+        if (o.required)
+          switch (t = !1, o.feature) {
+            case "overlay":
+              e.overlayImage && (t = !0);
+              break;
+            case "background":
+              e.backgroundImage && (t = !0);
+              break;
+            case "stickers":
+              e.objects.length > 1 && (t = !0);
+              break;
+            default:
+              (e.objects.length > 1 || e.backgroundImage || e.overlayImage) && (t = !0);
+          }
+        if (t) {
+          E = !0;
+          const n = await J();
+          b("update:modelValue", n), b("update:jsonModel", e);
+        }
+      }, 120);
+    }
+    async function $(e) {
+      try {
+        return await p.fromURL(e);
+      } catch (t) {
+        throw console.error("Error loading image:", t), t;
+      }
+    }
+    async function K(e) {
+      const { objects: t, options: n } = await F(e);
+      return u.groupSVGElements(t, n);
+    }
+    async function Q(e) {
+      const { objects: t, options: n } = await x(e);
+      return u.groupSVGElements(t, n);
+    }
+    async function B(e) {
+      return e && typeof e == "string" && e.trim().startsWith("<") ? await Q(e) : e && new RegExp(/([\w_/-]*\.svg$)|(image\/svg\+xml)/gi).test(e) ? await K(e) : await $(e);
+    }
+    async function H(e, t) {
+      e && !t && !E && await P({ src: e });
+    }
+    return ee(() => o.modelValue, async (e, t) => {
+      a && await H(e, t);
+    }), te(async () => {
+      ({ Canvas: d, FabricImage: p, Control: w, util: u, loadSVGFromURL: F, loadSVGFromString: x, config: R, controlsUtils: C } = await import("fabric")), f.value = v.value.offsetWidth, g.value = v.value.offsetHeight, window.addEventListener("resize", V), R.NUM_FRACTION_DIGITS = 8;
+      const e = d.prototype._onTouchStart;
+      d.prototype._onTouchStart = function(t) {
+        const n = this.findTarget(t);
+        this.allowTouchScrolling && n.assetType && !this.isDrawingMode || e.call(this, t);
+      }, a = new d("fabricCanvas", {
+        width: f.value,
+        height: g.value,
+        // enableRetinaScaling: false,
+        skipOffscreen: !0,
+        // devicePixelRatio: 4,
+        allowTouchScrolling: !0
+        // backstoreOnly: true
+      }), o.resetState && await de("fabric-canvas"), T.value = await le("fabric-canvas"), T.value ? (await G(a, T.value), a.requestRenderAll(), requestAnimationFrame(() => {
+        a.renderAll();
+      })) : o.modelValue && H(o.modelValue, ""), a.on("object:added", y), a.on("object:removed", y), a.on("object:modified", y), q(), a.renderAll(), b("on-ready", a);
+    }), ae(() => {
+      window.removeEventListener("resize", V);
+    }), (e, t) => (ne(), oe("div", {
+      class: "fabric-canvas",
+      ref_key: "root",
+      ref: v
+    }, [
+      M("div", ge, [
+        M("canvas", me, null, 512)
+      ]),
+      re(e.$slots, "default")
+    ], 512));
+  }
+});
+export {
+  ye as _
+};

package/dist/creative-booth.js

@@ -1,5 +1,5 @@
-import { _ as o } from "./chunks/creative-booth.vue_vue_type_style_index_0_lang-BHKoShl5.js";
-import { D as m } from "./chunks/creative-booth.vue_vue_type_style_index_0_lang-BHKoShl5.js";
+import { _ as o } from "./chunks/creative-booth.vue_vue_type_style_index_0_lang-CRbsZZLr.js";
+import { D as m } from "./chunks/creative-booth.vue_vue_type_style_index_0_lang-CRbsZZLr.js";
 export {
   m as DEFAULT_ASSETS,
   o as default

package/dist/fabric-canvas.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./chunks/fabric-canvas.vue_vue_type_style_index_0_lang-B-D65X2t.js";
+import { _ as f } from "./chunks/fabric-canvas.vue_vue_type_style_index_0_lang-C9fwZf_Y.js";
 export {
   f as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ablok-photobooth",
   "private": false,
-  "version": "0.2.42",
+  "version": "0.2.44",
   "type": "module",
   "peerDependencies": {
     "@popperjs/core": "^2.11.6",

package/dist/chunks/fabric-canvas.vue_vue_type_style_index_0_lang-B-D65X2t.js

@@ -1,318 +0,0 @@
-import { defineComponent as Q, ref as j, watch as Z, onMounted as ee, openBlock as te, createElementBlock as ae, createElementVNode as B, renderSlot as oe } from "vue";
-import { debounce as ne } from "lodash";
-function C(s) {
-  return new Promise((c, l) => {
-    s.oncomplete = s.onsuccess = () => c(s.result), s.onabort = s.onerror = () => l(s.error);
-  });
-}
-function re(s, c) {
-  const l = indexedDB.open(s);
-  l.onupgradeneeded = () => l.result.createObjectStore(c);
-  const f = C(l);
-  return (p, y) => f.then(
-    (g) => y(g.transaction(c, p).objectStore(c))
-  );
-}
-let D;
-function _() {
-  return D || (D = re("keyval-store", "keyval")), D;
-}
-function ie(s, c = _()) {
-  return c("readonly", (l) => C(l.get(s)));
-}
-function se(s, c, l = _()) {
-  return l("readwrite", (f) => (f.put(c, s), C(f.transaction)));
-}
-function le(s, c = _()) {
-  return c("readwrite", (l) => (l.delete(s), C(l.transaction)));
-}
-const ce = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffffCC'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='feather%20feather-rotate-cw'%3e%3cpolyline%20points='23%204%2023%2010%2017%2010'%3e%3c/polyline%3e%3cpath%20d='M20.49%2015a9%209%200%201%201-2.12-9.36L23%2010'%3e%3c/path%3e%3c/svg%3e", de = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffffCC'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='feather%20feather-x-circle'%3e%3ccircle%20cx='12'%20cy='12'%20r='10'%20fill='none'%3e%3c/circle%3e%3cline%20x1='15'%20y1='9'%20x2='9'%20y2='15'%20fill='none'%3e%3c/line%3e%3cline%20x1='9'%20y1='9'%20x2='15'%20y2='15'%20fill='none'%3e%3c/line%3e%3c/svg%3e", ue = { class: "fabric-canvas__canvas" }, fe = {
-  id: "fabricCanvas",
-  ref: "canvasRef"
-}, pe = /* @__PURE__ */ Q({
-  __name: "fabric-canvas",
-  props: {
-    modelValue: {
-      type: String,
-      default: ""
-    },
-    jsonModel: {
-      type: null,
-      default: void 0
-    },
-    exportToSvg: {
-      type: Boolean,
-      default: !1
-    },
-    resetState: {
-      type: Boolean,
-      default: !1
-    },
-    options: {
-      type: Object,
-      default: () => ({})
-    },
-    feature: {
-      type: String,
-      default: ""
-    },
-    required: {
-      type: Boolean,
-      default: !1
-    },
-    pending: {
-      type: Boolean,
-      default: !1
-    },
-    emitPending: {
-      type: Boolean,
-      default: !1
-    },
-    animationDuration: {
-      type: Number,
-      default: 0
-    }
-  },
-  emits: ["update:modelValue", "update:jsonModel", "update:pending", "on-ready"],
-  setup(s, { expose: c, emit: l }) {
-    let f, p, y, g, A, F, x, O;
-    const h = l;
-    c({ setBackgroundImage: M, setOverlayImage: Y, addCanvasObject: G });
-    const n = s, w = j(), d = j(0), u = j(0);
-    let a, R = !1;
-    const T = j();
-    async function H(e, t) {
-      return new Promise(async (o) => {
-        const r = JSON.parse(t);
-        if (r.backgroundImage) {
-          const i = await b(r.backgroundImage.src || r.backgroundImage.filename);
-          i.set({
-            opacity: 1
-          }), e.backgroundImage = i, e.centerObject(i);
-        }
-        if (r.overlayImage) {
-          const i = await b(r.overlayImage.src || r.overlayImage.filename);
-          i.set({
-            opacity: 1,
-            left: d.value / 2,
-            top: u.value / 2,
-            scaleX: d.value / i.width,
-            scaleY: u.value / i.height
-          }), e.overlayImage = i;
-        }
-        (await g.enlivenObjects(r.objects, {
-          reviver: void 0
-        })).forEach((i) => {
-          e.add(i);
-        }), o(e);
-      });
-    }
-    async function b(e) {
-      const t = await U(e);
-      e.includes("data:image") || (t.filename = e);
-      const o = g.findScaleToCover(t, a), r = t instanceof p;
-      return t.set({
-        left: 0,
-        top: 0,
-        opacity: r && n.animationDuration > 0 ? 0 : 1,
-        scaleX: o,
-        scaleY: o,
-        src: e
-      }), t;
-    }
-    async function k(e) {
-      !(e instanceof p) || n.animationDuration === 0 || (n.emitPending && h("update:pending", !0), await new Promise((o) => {
-        const r = n.animationDuration, S = Date.now(), i = () => {
-          const I = Date.now() - S, m = Math.min(I / r, 1);
-          e.set("opacity", m), a.renderAll(), m < 1 ? requestAnimationFrame(i) : (n.emitPending && h("update:pending", !1), o());
-        };
-        requestAnimationFrame(i);
-      }));
-    }
-    function V(e) {
-      const t = g.findScaleToCover(e, a);
-      return e.set({
-        scaleX: t,
-        scaleY: t
-      }), e;
-    }
-    async function M(e) {
-      const t = await b(e.src);
-      a.backgroundImage = t, a.centerObject(t), a.renderAll(), await k(t), v();
-    }
-    async function X(e) {
-      const t = await b(e.src);
-      t.selectable = !1, t.assetType = "foreground", a.add(t), a.centerObject(t), a.renderAll(), await k(t), v();
-    }
-    async function Y(e) {
-      const t = await b(e.src);
-      t.set({
-        left: d.value / 2,
-        top: u.value / 2,
-        scaleX: d.value / t.width,
-        scaleY: u.value / t.height
-      }), a.overlayImage = t, a.renderAll(), await k(t), v();
-    }
-    async function G(e) {
-      a.discardActiveObject();
-      const t = await U(e.src);
-      t.filename = e.src;
-      const o = d.value / 3, r = u.value / 3, S = o / t.width, i = r / t.height, I = Math.min(S, i);
-      t.set({
-        scaleX: I,
-        scaleY: I,
-        left: d.value / 2,
-        top: u.value / 2
-      }), t.id = e.id, t.padding = 8, a.add(t), a.setActiveObject(t), await k(t), a.renderAll();
-    }
-    function N(e, t) {
-      t.target.id;
-      const o = t.target;
-      return a.remove(o), a.requestRenderAll(), !0;
-    }
-    function P() {
-      if (d.value = w.value.offsetWidth, u.value = w.value.offsetHeight, a.setDimensions({ width: d.value, height: u.value }), a.backgroundImage && (a.backgroundImage = V(a.backgroundImage), a.centerObject(a.backgroundImage)), a.overlayImage) {
-        const e = a.overlayImage;
-        e.set({
-          scaleX: d.value / e.width,
-          scaleY: u.value / e.height
-        });
-      }
-      a.getObjects().forEach((e) => {
-        e.assetType === "foreground" && (e = V(e), a.centerObject(e));
-      }), a.renderAll();
-    }
-    const L = ne(() => {
-      P();
-    }, 200, { trailing: !0, leading: !1 });
-    function E(e) {
-      return (t, o, r, S, i) => {
-        t.save(), t.translate(o, r), t.rotate(g.degreesToRadians(i.angle)), t.fillStyle = n.options.themeData?.colors?.primary, t.fillRect(-24 / 2, -24 / 2, 24, 24);
-        const m = 20;
-        t.drawImage(e, -m / 2, -m / 2, m, m), t.restore();
-      };
-    }
-    function W() {
-      const e = document.createElement("img");
-      e.src = ce;
-      const t = document.createElement("img");
-      t.src = de, a.on("object:added", (o) => {
-        o.target && o.target.controls && (o.target.set({
-          transparentCorners: !1,
-          cornerSize: 16,
-          cornerStyle: "circle",
-          ...n.options.themeData?.colors?.primary ? {
-            cornerColor: n.options.themeData?.colors?.primary,
-            cornerStrokeColor: n.options.themeData?.colors?.primary,
-            borderColor: n.options.themeData?.colors?.primary
-          } : {}
-        }), o.target.controls.ml.visible = !1, o.target.controls.mr.visible = !1, o.target.controls.mb.visible = !1, o.target.controls.mt.visible = !1, o.target.controls.mtr.visible = !1, o.target.controls.rotate = new y({
-          x: 0.5,
-          y: -0.5,
-          offsetX: 32,
-          offsetY: 0,
-          cursorStyle: "pointer",
-          actionName: "rotate",
-          actionHandler: O.rotationWithSnapping,
-          cursorStyleHandler: O.rotationStyleHandler,
-          render: E(e)
-        }), o.target.controls.delete = new y({
-          x: 0.5,
-          y: -0.5,
-          offsetX: 32,
-          offsetY: 32,
-          cursorStyle: "pointer",
-          mouseUpHandler: N,
-          render: E(t)
-        }));
-      });
-    }
-    async function q() {
-      return await new Promise((e) => {
-        setTimeout(() => {
-          const t = n.exportToSvg ? a.toSVG() : a.toDataURL({ multiplier: 2 });
-          e(t);
-        }, 200);
-      });
-    }
-    function v() {
-      setTimeout(async () => {
-        const e = a.toDatalessJSON(["selectable", "assetType", "filename"]);
-        await se("fabric-canvas", JSON.stringify(e));
-        let t = !0;
-        if (n.required)
-          switch (t = !1, n.feature) {
-            case "overlay":
-              e.overlayImage && (t = !0);
-              break;
-            case "background":
-              e.backgroundImage && (t = !0);
-              break;
-            case "stickers":
-              e.objects.length > 1 && (t = !0);
-              break;
-            default:
-              (e.objects.length > 1 || e.backgroundImage || e.overlayImage) && (t = !0);
-          }
-        if (t) {
-          R = !0;
-          const o = await q();
-          h("update:modelValue", o), h("update:jsonModel", e);
-        }
-      }, 120);
-    }
-    async function J(e) {
-      try {
-        return await p.fromURL(e);
-      } catch (t) {
-        throw console.error("Error loading image:", t), t;
-      }
-    }
-    async function $(e) {
-      const { objects: t, options: o } = await A(e);
-      return g.groupSVGElements(t, o);
-    }
-    async function K(e) {
-      const { objects: t, options: o } = await F(e);
-      return g.groupSVGElements(t, o);
-    }
-    async function U(e) {
-      return e && typeof e == "string" && e.trim().startsWith("<") ? await K(e) : e && new RegExp(/([\w_/-]*\.svg$)|(image\/svg\+xml)/gi).test(e) ? await $(e) : await J(e);
-    }
-    async function z(e, t) {
-      e && !t && !R && X({ src: e });
-    }
-    return Z(() => n.modelValue, async (e, t) => {
-      z(e, t);
-    }), ee(async () => {
-      ({ Canvas: f, FabricImage: p, Control: y, util: g, loadSVGFromURL: A, loadSVGFromString: F, config: x, controlsUtils: O } = await import("fabric")), d.value = w.value.offsetWidth, u.value = w.value.offsetHeight, window.addEventListener("resize", L), x.NUM_FRACTION_DIGITS = 8;
-      const e = f.prototype._onTouchStart;
-      f.prototype._onTouchStart = function(t) {
-        const o = this.findTarget(t);
-        this.allowTouchScrolling && o.assetType && !this.isDrawingMode || e.call(this, t);
-      }, a = new f("fabricCanvas", {
-        width: d.value,
-        height: u.value,
-        // enableRetinaScaling: false,
-        skipOffscreen: !0,
-        // devicePixelRatio: 4,
-        allowTouchScrolling: !0
-        // backstoreOnly: true
-      }), n.resetState && await le("fabric-canvas"), T.value = await ie("fabric-canvas"), T.value ? (await H(a, T.value), a.requestRenderAll(), requestAnimationFrame(() => {
-        a.renderAll();
-      })) : n.modelValue && z(n.modelValue, ""), a.on("object:added", v), a.on("object:removed", v), a.on("object:modified", v), W(), a.renderAll(), h("on-ready", a);
-    }), (e, t) => (te(), ae("div", {
-      class: "fabric-canvas",
-      ref_key: "root",
-      ref: w
-    }, [
-      B("div", ue, [
-        B("canvas", fe, null, 512)
-      ]),
-      oe(e.$slots, "default")
-    ], 512));
-  }
-});
-export {
-  pe as _
-};