ablok-photobooth 0.2.41 → 0.2.43

package/dist/ablok-photobooth.js

@@ -1,6 +1,6 @@
-import { _ as a } from "./chunks/photo-app.vue_vue_type_style_index_0_lang-CQsO0T0U.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 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-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/chunks/{photo-app.vue_vue_type_style_index_0_lang-CQsO0T0U.js → photo-app.vue_vue_type_style_index_0_lang-BdQvhbLS.js}

@@ -1,8 +1,8 @@
-import { defineComponent as gA, getCurrentInstance as sA, computed as b, ref as B, watch as F, onMounted as rA, openBlock as t, createElementBlock as s, normalizeClass as f, normalizeStyle as v, createVNode as E, createCommentVNode as r, createBlock as Q, Transition as iA, withCtx as D, createElementVNode as n, withModifiers as M, toDisplayString as i, withDirectives as U, vShow as G, Fragment as CA, renderList as cA, createTextVNode as y, renderSlot as X, unref as $ } from "vue";
+import { defineComponent as rA, getCurrentInstance as gA, computed as b, ref as B, watch as F, onMounted as sA, openBlock as t, createElementBlock as g, normalizeClass as f, normalizeStyle as v, createVNode as E, createCommentVNode as s, createBlock as Q, Transition as iA, withCtx as D, createElementVNode as n, withModifiers as M, toDisplayString as i, withDirectives as U, vShow as G, Fragment as cA, renderList as CA, createTextVNode as y, renderSlot as X, unref as $ } from "vue";
 import uA from "ablok-components/components/molecules/base-camera/base-camera.vue";
 import dA from "ablok-components/components/atoms/base-image/base-image.vue";
 import IA from "ablok-components/components/atoms/loading-spinner/loading-spinner.vue";
-import k from "ablok-components/components/atoms/base-button/base-button.vue";
+import O from "ablok-components/components/atoms/base-button/base-button.vue";
 import p from "ablok-components/components/atoms/svg-icon/svg-icon.vue";
 import BA from "ablok-components/components/atoms/input-file/input-file.vue";
 import { useCameraFilter as fA } from "ablok-components/composables/useCameraFilter";
@@ -11,10 +11,10 @@ import { g as EA, f as j, a as vA, b as QA, c as q, M as mA } from "./media-api-
 const bA = "data:image/png;base64,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", DA = { class: "photo-app__drop-target__canvas" }, yA = { class: "flex-grow-1 text-center" }, pA = ["innerHTML"], hA = { class: "ml-2" }, PA = {
   key: 0,
   class: "d-flex flex-column align-center justify-center"
-}, MA = { key: 0 }, LA = { class: "photo-app__errors mt-2" }, HA = { class: "error--text" }, kA = {
+}, MA = { key: 0 }, LA = { class: "photo-app__errors mt-2" }, HA = { class: "error--text" }, OA = {
   key: 1,
   class: "photo-app__file-list"
-}, OA = { class: "row" }, YA = { key: 0 }, FA = { key: 1 }, UA = { key: 2 }, GA = { key: 3 }, SA = { class: "photo-app__form-input text-center" }, zA = { class: "photo-app__controls" }, RA = { class: "row" }, NA = { class: "col col-12" }, jA = ["innerHTML"], JA = {
+}, kA = { class: "row" }, YA = { key: 0 }, FA = { key: 1 }, UA = { key: 2 }, GA = { key: 3 }, SA = { class: "photo-app__form-input text-center" }, zA = { class: "photo-app__controls" }, RA = { class: "row" }, NA = { class: "col col-12" }, jA = ["innerHTML"], JA = {
   key: 0,
   class: "d-flex justify-center col-8 mx-auto"
 }, TA = { class: "col" }, ZA = {
@@ -23,7 +23,7 @@ const bA = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAQACAYAAAB/HSuDAA
 }, xA = {
   key: 1,
   class: "col"
-}, WA = ["required", "value"], oe = /* @__PURE__ */ gA({
+}, WA = ["required", "value"], oe = /* @__PURE__ */ rA({
   __name: "photo-app",
   props: {
     modelValue: {
@@ -179,79 +179,83 @@ const bA = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAQACAYAAAB/HSuDAA
     enableZoomSlider: {
       type: Boolean,
       default: !1
+    },
+    correctOrientation: {
+      type: Boolean,
+      default: !1
     }
   },
   emits: ["update:modelValue"],
   setup(A, { emit: _ }) {
-    const { tm: KA } = wA(), J = sA(), S = J && J.appContext.config.globalProperties.$config, g = A, AA = _, eA = b(() => S.baseMediaPath), aA = b(() => l.value && l.value.length && l.value.filter((e) => e.response && Object.keys(e.response).length).length === l.value.length), z = b(() => {
+    const { tm: KA } = wA(), J = gA(), S = J && J.appContext.config.globalProperties.$config, r = A, AA = _, eA = b(() => S.baseMediaPath), aA = b(() => l.value && l.value.length && l.value.filter((e) => e.response && Object.keys(e.response).length).length === l.value.length), z = b(() => {
       const e = l.value.find((a) => a.response && a.response.path);
       return e && e.response.path;
     }), T = b(() => z.value ? `${eA.value}${z.value}` : ""), u = b(() => ({
-      ...g.i18n ? g.i18n.messages : {},
-      ...g.messages
+      ...r.i18n ? r.i18n.messages : {},
+      ...r.messages
     }));
     b(() => !!(l.value && l.value.length));
-    const tA = b(() => l.value.length ? u.value.reviewTitle : u.value.captureTitle), l = B([]), L = B(), Z = B(), R = B(), O = B(!1), C = B(!1), N = B(), I = B(), w = B(!1), x = B("");
+    const tA = b(() => l.value.length ? u.value.reviewTitle : u.value.captureTitle), l = B([]), L = B(), Z = B(), R = B(), k = B(!1), c = B(!1), N = B(), I = B(), w = B(!1), x = B("");
     F(N, async (e, a) => {
       if (e) {
-        const o = e.blob && e.blob.type.split("/")[1], c = new File([e.blob], `${e.id}.${o}`), d = await EA(c), h = await j(c), H = await vA(h, d), P = await (await fetch(H)).blob();
+        const o = e.blob && e.blob.type.split("/")[1], C = new File([e.blob], `${e.id}.${o}`), d = await EA(C), h = await j(C), H = await vA(h, d), P = await (await fetch(H)).blob();
         l.value.push(new File([P], `${e.id}.${o}`, {
           type: P.type
         })), w.value = !1, lA();
       }
     }, { deep: !0 }), F(l, async (e, a) => {
-      if (g.enableInstantUpload)
+      if (r.enableInstantUpload)
         e.find((o) => !o.response.path) && (L.value.active = !0);
       else {
-        const o = await Promise.all(e.map(async (c) => {
-          let d = await j(c);
-          g.downScaleImages && Number(g.maxFileSize) && c.size > Number(g.maxFileSize) && (d = await QA(d, 800, 800));
-          const h = g.ratio.split("x");
+        const o = await Promise.all(e.map(async (C) => {
+          let d = await j(C);
+          r.downScaleImages && Number(r.maxFileSize) && C.size > Number(r.maxFileSize) && (d = await QA(d, 800, 800));
+          const h = r.ratio.split("x");
           return await q(d, Number(h[0]) / Number(h[1]));
         }));
         I.value = o[0];
       }
     }, { deep: !0 }), F(aA, async (e, a) => {
-      e && !a && (I.value = g.enableInstantUpload ? z.value : await q(T.value));
+      e && !a && (I.value = r.enableInstantUpload ? z.value : await q(T.value));
     }, { deep: !0 }), F(I, async (e, a) => {
-      g.enableAutoSave && I !== a && K();
+      r.enableAutoSave && I !== a && K();
     });
     function W() {
       I.value = "", l.value = [], w.value = !1;
     }
     function lA() {
-      C.value = !1;
+      c.value = !1;
     }
     function Y() {
-      W(), C.value = !C.value;
+      W(), c.value = !c.value;
     }
     async function oA(e) {
-      if (!g.filter) {
+      if (!r.filter) {
         l.value = e;
         return;
       }
       const { applyFilterToImageBlob: a } = fA({
-        ...g,
-        filter: g.filter ?? "none",
-        tintColor: g.tint?.color ?? "",
-        tintIntensity: g.tint?.intensity ?? 0
-      }), o = await Promise.all((e || []).map(async (c) => {
-        const d = c?.file instanceof File ? c.file : c instanceof File ? c : null;
+        ...r,
+        filter: r.filter ?? "none",
+        tintColor: r.tint?.color ?? "",
+        tintIntensity: r.tint?.intensity ?? 0
+      }), o = await Promise.all((e || []).map(async (C) => {
+        const d = C?.file instanceof File ? C.file : C instanceof File ? C : null;
         if (!d)
-          return c;
+          return C;
         const h = await j(d), H = await a(h), m = new File([H], d.name, {
           type: H.type || d.type,
           lastModified: d.lastModified
         });
-        if (c?.file instanceof File) {
+        if (C?.file instanceof File) {
           const P = window.URL || window.webkitURL;
           return {
-            ...c,
+            ...C,
             file: m,
             size: m.size,
             type: m.type,
             name: m.name,
-            blob: P && P.createObjectURL ? P.createObjectURL(m) : c.blob
+            blob: P && P.createObjectURL ? P.createObjectURL(m) : C.blob
           };
         }
         return m;
@@ -259,40 +263,40 @@ const bA = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAQACAYAAAB/HSuDAA
       l.value = o;
     }
     const K = (async () => {
-      w.value = !0, g.enableProcessImage && g.processImage && (I.value = await g.processImage.reduce(async (e, a) => {
+      w.value = !0, r.enableProcessImage && r.processImage && (I.value = await r.processImage.reduce(async (e, a) => {
         const o = await e;
         return await nA(o, a);
       }, Promise.resolve(I.value))), AA("update:modelValue", I.value);
     }), nA = (async (e, a) => `${await mA.processImage(
       `${a.endpoint}${a.search ? `?${a.search}` : ""}`,
-      { ...a.body, dataUrl: e, resolution: g.fixedResolution },
+      { ...a.body, dataUrl: e, resolution: r.fixedResolution },
       a.basePath
     )}`);
     function V() {
       w.value = !0, Z.value?.onCapture();
     }
-    return rA(() => {
+    return sA(() => {
       ["dragenter", "dragover"].forEach((e) => {
         document.body.addEventListener(e, (a) => {
-          a.preventDefault(), O.value = !0;
+          a.preventDefault(), k.value = !0;
         }, !1);
       }), ["dragleave", "drop"].forEach((e) => {
         R.value.addEventListener(e, (a) => {
-          a.preventDefault(), O.value = !1;
+          a.preventDefault(), k.value = !1;
         }, !1);
       }), ["drop"].forEach((e) => {
         R.value.addEventListener(e, (a) => {
-          a.preventDefault(), O.value = !1;
+          a.preventDefault(), k.value = !1;
           const o = a.dataTransfer;
           (o && Array.from(o.files || []))?.forEach((d) => {
             l.value.push(d);
           });
         }, !1);
       });
-    }), (e, a) => (t(), s("div", {
+    }), (e, a) => (t(), g("div", {
       class: f(["photo-app", A.variant === "dark" && "theme--dark"])
     }, [
-      A.enableCamera ? (t(), s("div", {
+      A.enableCamera ? (t(), g("div", {
         key: 0,
         class: "photo-app__canvas media-container",
         style: v({
@@ -300,7 +304,7 @@ const bA = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAQACAYAAAB/HSuDAA
           backgroundColor: A.backgroundColor
         })
       }, [
-        C.value ? (t(), s("div", {
+        c.value ? (t(), g("div", {
           key: 0,
           class: f(["photo-app__camera", `${A.ratio ? `aspect-ratio--${A.ratio}` : ""}`]),
           style: v({ borderColor: A.color })
@@ -329,10 +333,11 @@ const bA = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAQACAYAAAB/HSuDAA
             "tint-color": A.tint?.color,
             "tint-intensity": A.tint?.intensity,
             zoom: A.zoom,
-            "enable-zoom-slider": A.enableZoomSlider
-          }, null, 8, ["modelValue", "enable-toggle-play", "countdown", "enable-mirror-camera", "enable-switch-camera", "default-rear-camera", "enable-guide", "guide-src", "fixed-resolution", "enable-audio", "enable-select-device", "enable-crop-image", "text-color", "ratio", "resolutions", "filter", "tint-color", "tint-intensity", "zoom", "enable-zoom-slider"])
-        ], 6)) : r("", !0),
-        l.value && l.value.length && !C.value ? (t(), s("div", {
+            "enable-zoom-slider": A.enableZoomSlider,
+            "correct-orientation": A.correctOrientation
+          }, null, 8, ["modelValue", "enable-toggle-play", "countdown", "enable-mirror-camera", "enable-switch-camera", "default-rear-camera", "enable-guide", "guide-src", "fixed-resolution", "enable-audio", "enable-select-device", "enable-crop-image", "text-color", "ratio", "resolutions", "filter", "tint-color", "tint-intensity", "zoom", "enable-zoom-slider", "correct-orientation"])
+        ], 6)) : s("", !0),
+        l.value && l.value.length && !c.value ? (t(), g("div", {
           key: 1,
           class: "photo-app__preview",
           style: v({ borderColor: A.color })
@@ -340,17 +345,17 @@ const bA = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAQACAYAAAB/HSuDAA
           I.value ? (t(), Q(dA, {
             key: 0,
             src: T.value || I.value
-          }, null, 8, ["src"])) : r("", !0),
+          }, null, 8, ["src"])) : s("", !0),
           E(iA, {
             name: "fade",
             mode: "out-in"
           }, {
             default: D(() => [
-              w.value ? (t(), Q(IA, { key: 0 })) : r("", !0)
+              w.value ? (t(), Q(IA, { key: 0 })) : s("", !0)
             ]),
             _: 1
           })
-        ], 4)) : C.value ? r("", !0) : (t(), s("div", {
+        ], 4)) : c.value ? s("", !0) : (t(), g("div", {
           key: 2,
           class: f(["photo-app__drop-target", `${A.ratio ? `aspect-ratio--${A.ratio}` : ""}`]),
           style: v({ borderColor: A.color })
@@ -361,7 +366,7 @@ const bA = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAQACAYAAAB/HSuDAA
                 class: "headline h2 font-weight-bold",
                 innerHTML: u.value.title || e.$t("fileInput.coverTitle")
               }, null, 8, pA),
-              A.enableCamera ? (t(), Q(k, {
+              A.enableCamera ? (t(), Q(O, {
                 key: 0,
                 type: "button",
                 onClick: M(Y, ["prevent"]),
@@ -374,9 +379,9 @@ const bA = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAQACAYAAAB/HSuDAA
                   n("span", hA, i(u.value.launchCamera || e.$t("fileInput.coverLaunchCta")), 1)
                 ]),
                 _: 1
-              }, 8, ["style"])) : r("", !0)
+              }, 8, ["style"])) : s("", !0)
             ]),
-            A.enableLocalFileUpload ? (t(), s("div", PA, [
+            A.enableLocalFileUpload ? (t(), g("div", PA, [
               n("p", {
                 class: "subtitle fw-bold ma-0",
                 style: v({ color: A.color })
@@ -385,7 +390,7 @@ const bA = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAQACAYAAAB/HSuDAA
                 class: "text-body-1",
                 style: v({ color: A.color })
               }, [
-                A.enableDragDrop ? (t(), s("span", MA, i(u.value.dropTarget || e.$t("fileInput.coverDropTarget")) + " " + i(A.enableLocalFileUpload && A.enableDragDrop ? u.value.or || e.$t("common.or") : "") + " " + i(), 1)) : r("", !0),
+                A.enableDragDrop ? (t(), g("span", MA, i(u.value.dropTarget || e.$t("fileInput.coverDropTarget")) + " " + i(A.enableLocalFileUpload && A.enableDragDrop ? u.value.or || e.$t("common.or") : "") + " " + i(), 1)) : s("", !0),
                 n("label", {
                   for: "fileUpload",
                   role: "button",
@@ -393,10 +398,10 @@ const bA = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAQACAYAAAB/HSuDAA
                   style: v({ color: A.color })
                 }, i(u.value.coverSelectFileCta || e.$t("fileInput.coverLocalFileCta")), 5)
               ], 4)
-            ])) : r("", !0)
+            ])) : s("", !0)
           ])
         ], 6))
-      ], 4)) : r("", !0),
+      ], 4)) : s("", !0),
       U(n("div", {
         class: "photo-app__drop-overlay",
         ref_key: "dropArea",
@@ -404,16 +409,16 @@ const bA = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAQACAYAAAB/HSuDAA
       }, [
         n("h3", null, i(u.value.dropTarget || e.$t("fileInput.dropTargetLabel")), 1)
       ], 512), [
-        [G, A.enableLocalFileUpload && A.enableDragDrop && O.value]
+        [G, A.enableLocalFileUpload && A.enableDragDrop && k.value]
       ]),
       U(n("div", LA, [
         n("p", HA, i(x.value), 1)
       ], 512), [
         [G, x.value]
       ]),
-      A.enableFileList && l.value.length ? (t(), s("div", kA, [
-        n("div", OA, [
-          (t(!0), s(CA, null, cA(l.value, (o) => (t(), s("div", {
+      A.enableFileList && l.value.length ? (t(), g("div", OA, [
+        n("div", kA, [
+          (t(!0), g(cA, null, CA(l.value, (o) => (t(), g("div", {
             key: o.id,
             class: "col col-12"
           }, [
@@ -421,28 +426,28 @@ const bA = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAQACAYAAAB/HSuDAA
             a[2] || (a[2] = y(" - ", -1)),
             n("span", null, i(o.size), 1),
             a[3] || (a[3] = y(" - ", -1)),
-            o.error ? (t(), s("span", YA, i(o.error), 1)) : o.success ? (t(), s("span", FA, i(e.$t("common.success")), 1)) : o.active ? (t(), s("span", UA, i(e.$t("common.active")), 1)) : (t(), s("span", GA))
+            o.error ? (t(), g("span", YA, i(o.error), 1)) : o.success ? (t(), g("span", FA, i(e.$t("common.success")), 1)) : o.active ? (t(), g("span", UA, i(e.$t("common.active")), 1)) : (t(), g("span", GA))
           ]))), 128))
         ])
-      ])) : r("", !0),
+      ])) : s("", !0),
       U(n("div", SA, [
         n("div", zA, [
           n("div", RA, [
             n("div", NA, [
               X(e.$slots, "headline", {}, () => [
-                A.enableTitle && (C.value || l.value.length) ? (t(), s("p", {
+                A.enableTitle && (c.value || l.value.length) ? (t(), g("p", {
                   key: 0,
                   class: "headline",
                   innerHTML: tA.value
-                }, null, 8, jA)) : r("", !0)
+                }, null, 8, jA)) : s("", !0)
               ]),
-              !A.enableLegacyInput && (C.value || l.value.length) ? (t(), s("div", JA, [
+              !A.enableLegacyInput && (c.value || l.value.length) ? (t(), g("div", JA, [
                 n("div", TA, [
-                  C.value || l.value.length && (!L.value || !L.value.active) ? (t(), Q(k, {
+                  c.value || l.value.length && (!L.value || !L.value.active) ? (t(), Q(O, {
                     key: 0,
                     type: "button",
                     class: f(["btn btn-primary-outline rounded-circle", `theme--${A.variant}`]),
-                    onClick: a[1] || (a[1] = M((o) => C.value ? Y() : W(), ["prevent"]))
+                    onClick: a[1] || (a[1] = M((o) => c.value ? Y() : W(), ["prevent"]))
                   }, {
                     default: D(() => [
                       E(p, {
@@ -453,10 +458,10 @@ const bA = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAQACAYAAAB/HSuDAA
                       y(" " + i(A.enableButtonCaptions ? u.value.cancel || e.$t("fileInput.cancel") : ""), 1)
                     ]),
                     _: 1
-                  }, 8, ["class"])) : r("", !0)
+                  }, 8, ["class"])) : s("", !0)
                 ]),
-                C.value ? (t(), s("div", ZA, [
-                  E(k, {
+                c.value ? (t(), g("div", ZA, [
+                  E(O, {
                     type: "button",
                     class: f(["btn btn-primary rounded-circle", `theme--${A.variant}`]),
                     onClick: M(V, ["prevent"]),
@@ -471,8 +476,8 @@ const bA = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAQACAYAAAB/HSuDAA
                     ]),
                     _: 1
                   }, 8, ["class", "disabled"])
-                ])) : A.enableReview ? (t(), s("div", xA, [
-                  E(k, {
+                ])) : A.enableReview ? (t(), g("div", xA, [
+                  E(O, {
                     type: "button",
                     class: f(["btn btn-primary rounded-circle", {
                       [`theme--${A.variant}`]: A.variant,
@@ -487,11 +492,11 @@ const bA = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAQACAYAAAB/HSuDAA
                     ]),
                     _: 1
                   }, 8, ["class", "disabled"])
-                ])) : r("", !0)
-              ])) : r("", !0),
+                ])) : s("", !0)
+              ])) : s("", !0),
               U(n("div", {
                 class: f(["justify-center col-10 mx-auto", {
-                  "d-flex": A.enableLegacyInput && (C.value || l.value.length)
+                  "d-flex": A.enableLegacyInput && (c.value || l.value.length)
                 }])
               }, [
                 n("button", {
@@ -502,10 +507,10 @@ const bA = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAQACAYAAAB/HSuDAA
                   A.enableButtonIcons ? (t(), Q(p, {
                     key: 0,
                     symbol: "camera"
-                  })) : r("", !0),
-                  y(" " + i(A.enableButtonCaptions ? C.value ? u.value.cancel || e.$t("common.cancel") : u.value.camera || e.$t("fileInput.selectCameraCta") : ""), 1)
+                  })) : s("", !0),
+                  y(" " + i(A.enableButtonCaptions ? c.value ? u.value.cancel || e.$t("common.cancel") : u.value.camera || e.$t("fileInput.selectCameraCta") : ""), 1)
                 ], 2),
-                C.value && (!e.$refs.upload || L.value.active) ? (t(), Q(k, {
+                c.value && (!e.$refs.upload || L.value.active) ? (t(), Q(O, {
                   key: 0,
                   type: "button",
                   class: f(["btn btn-primary", `theme--${A.variant}`]),
@@ -516,11 +521,11 @@ const bA = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAQACAYAAAB/HSuDAA
                     A.enableButtonIcons ? (t(), Q(p, {
                       key: 0,
                       symbol: "camera"
-                    })) : r("", !0),
+                    })) : s("", !0),
                     y(" " + i(A.enableButtonCaptions ? u.value.shoot || e.$t("fileInput.shoot") : ""), 1)
                   ]),
                   _: 1
-                }, 8, ["class", "disabled"])) : r("", !0),
+                }, 8, ["class", "disabled"])) : s("", !0),
                 E(BA, {
                   ref_key: "upload",
                   ref: L,
@@ -539,27 +544,27 @@ const bA = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAQACAYAAAB/HSuDAA
                         A.enableButtonIcons ? (t(), Q(p, {
                           key: 0,
                           symbol: "camera"
-                        })) : r("", !0)
+                        })) : s("", !0)
                       ], 2)
                     ])
                   ]),
                   _: 3
                 }, 8, ["model-value"])
               ], 2), [
-                [G, A.enableLegacyInput && (C.value || l.value.length)]
+                [G, A.enableLegacyInput && (c.value || l.value.length)]
               ]),
-              A.required ? (t(), s("input", {
+              A.required ? (t(), g("input", {
                 key: 1,
                 ref: "hiddenInput",
                 required: A.required,
                 value: I.value,
                 style: { display: "none" }
-              }, null, 8, WA)) : r("", !0)
+              }, null, 8, WA)) : s("", !0)
             ])
           ])
         ])
       ], 512), [
-        [G, C.value || l.value.length]
+        [G, c.value || l.value.length]
       ])
     ], 2));
   }

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/dist/photo-app.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./chunks/photo-app.vue_vue_type_style_index_0_lang-CQsO0T0U.js";
+import { _ as f } from "./chunks/photo-app.vue_vue_type_style_index_0_lang-BdQvhbLS.js";
 export {
   f as default
 };

package/dist/types/components/photo-app.vue.d.ts

@@ -148,6 +148,10 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
         type: BooleanConstructor;
         default: boolean;
     };
+    correctOrientation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
@@ -300,6 +304,10 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
         type: BooleanConstructor;
         default: boolean;
     };
+    correctOrientation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
@@ -339,6 +347,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
     enableSelectDevice: boolean;
     enableProcessImage: boolean;
     enableZoomSlider: boolean;
+    correctOrientation: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
     camera: any;
     dropArea: HTMLDivElement;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "ablok-photobooth",
   "private": false,
-  "version": "0.2.41",
+  "version": "0.2.43",
   "type": "module",
   "peerDependencies": {
     "@popperjs/core": "^2.11.6",
-    "ablok-components": "^0.3.68",
+    "ablok-components": "^0.3.74",
     "bootstrap": "^5.3.8",
     "fabric": "^7.1.0",
     "lodash": "^4.17.23",

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 _
-};