ablok-photobooth 0.2.38 → 0.2.40

package/dist/ablok-photobooth.js

@@ -0,0 +1,12 @@
+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-BUDOTH0K.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 {
+  _ as ColorBooth,
+  s as CreativeBooth,
+  e as FabricCanvas,
+  m as FaceSwap,
+  a as PhotoApp
+};

package/dist/chunks/color-booth.vue_vue_type_style_index_0_lang-Cxo8ZMRt.js

@@ -0,0 +1,98 @@
+import { defineComponent as g, ref as d, openBlock as p, createElementBlock as v, normalizeClass as S, createElementVNode as V, normalizeStyle as w, computed as A, onBeforeMount as b, createVNode as c, withCtx as x } from "vue";
+import B from "ablok-components/components/molecules/color-palette/color-palette.vue";
+import E from "ablok-components/components/templates/touch-wrapper/touch-wrapper.vue";
+const F = ["innerHTML"], _ = /* @__PURE__ */ g({
+  __name: "svg-canvas",
+  props: {
+    modelValue: {
+      default: 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>',
+      type: String
+    },
+    scale: {
+      type: Number,
+      default: 1
+    },
+    fillColor: String,
+    groupedFill: Boolean
+  },
+  emits: ["update:modelValue"],
+  setup(t, { emit: u }) {
+    const l = t, i = u, s = d();
+    function a(n) {
+      const e = n.target;
+      if (!e.closest(".read-only")) {
+        if (l.groupedFill && l.fillColor) {
+          const y = e.closest("[data-group-class]").dataset.groupClass, m = e.closest("svg")?.querySelectorAll(`.${y}`);
+          m && Array.from(m).forEach((f) => {
+            f.setAttribute("fill", l.fillColor), f.setAttribute("fill-opacity", "1");
+          });
+        } else l.fillColor && (e.setAttribute("fill", l.fillColor), e.setAttribute("fill-opacity", "1"));
+        const C = e.closest(".svg-canvas").querySelector("svg").outerHTML;
+        i("update:modelValue", C);
+      }
+    }
+    return (n, e) => (p(), v("div", {
+      class: S(["svg-canvas", `${t.scale > 1 ? "overflow-scroll" : ""}`])
+    }, [
+      V("div", {
+        ref_key: "svg",
+        ref: s,
+        class: "svg-wrapper",
+        innerHTML: t.modelValue,
+        style: w({ transform: `scale(${t.scale})` }),
+        onClick: e[0] || (e[0] = (o) => a(o))
+      }, null, 12, F)
+    ], 2));
+  }
+}), $ = { class: "svg-editor" }, k = { class: "svg-editor__frame" }, H = /* @__PURE__ */ g({
+  __name: "color-booth",
+  props: {
+    modelValue: String,
+    name: String,
+    src: String,
+    required: Boolean,
+    colors: Array,
+    groupedFill: Boolean
+  },
+  emits: ["update:modelValue"],
+  setup(t, { emit: u }) {
+    const l = t, i = u, s = d(""), a = d(1), n = A({
+      get() {
+        return l.modelValue;
+      },
+      set(e) {
+        i("update:modelValue", e);
+      }
+    });
+    return b(() => {
+      s.value = l.colors?.length ? l.colors[0] : "";
+    }), (e, o) => (p(), v("div", $, [
+      V("div", k, [
+        c(E, {
+          modelValue: a.value,
+          "onUpdate:modelValue": o[1] || (o[1] = (r) => a.value = r)
+        }, {
+          default: x(() => [
+            c(_, {
+              modelValue: n.value,
+              "onUpdate:modelValue": o[0] || (o[0] = (r) => n.value = r),
+              fillColor: s.value,
+              scale: a.value,
+              "grouped-fill": t.groupedFill
+            }, null, 8, ["modelValue", "fillColor", "scale", "grouped-fill"])
+          ]),
+          _: 1
+        }, 8, ["modelValue"]),
+        c(B, {
+          modelValue: s.value,
+          "onUpdate:modelValue": o[2] || (o[2] = (r) => s.value = r),
+          colors: t.colors,
+          class: "mt-2"
+        }, null, 8, ["modelValue", "colors"])
+      ])
+    ]));
+  }
+});
+export {
+  H as _
+};

package/dist/chunks/creative-booth.vue_vue_type_style_index_0_lang-BUDOTH0K.js

@@ -0,0 +1,210 @@
+import { defineComponent as S, ref as d, computed as l, watch as T, openBlock as u, createElementBlock as g, createElementVNode as v, createVNode as M, normalizeClass as V, createCommentVNode as h, createBlock as B } from "vue";
+import x from "ablok-components/components/molecules/media-thumbnails/media-thumbnails.vue";
+import { _ as D } from "./fabric-canvas.vue_vue_type_style_index_0_lang-B-D65X2t.js";
+const A = { class: "creative-booth" }, O = { class: "media-container" }, w = ["innerHTML"], C = { class: "creative-booth__thumbnails" }, F = [
+  {
+    type: "background",
+    thumbnail: "/themes/corp/backgrounds/corporate-your-background-1024x1024.jpg",
+    src: "/themes/corp/backgrounds/corporate-your-background-1024x1024.jpg",
+    mediaType: "image",
+    filters: ["asset-01", "asset-02"]
+  },
+  {
+    type: "background",
+    thumbnail: "/themes/corp/backgrounds/corp-background-09-white.jpg",
+    src: "/themes/corp/backgrounds/corp-background-09-white.jpg",
+    mediaType: "image",
+    filters: ["asset-01", "asset-02"]
+  },
+  {
+    type: "overlay",
+    src: "/themes/corp/overlays/corporate-your-overlay-1024x1024.png",
+    mediaType: "image",
+    filters: ["asset-01"]
+  },
+  {
+    type: "overlay",
+    src: "/themes/corp/overlays/corp-overlay-02-white.png",
+    mediaType: "image",
+    filters: ["asset-01"]
+  },
+  {
+    type: "object",
+    src: "/themes/corp/stickers/corporate-your-sticker-512x512.svg",
+    mediaType: "svg",
+    filters: ["asset-02"]
+  },
+  {
+    type: "object",
+    src: "/themes/corp/stickers/corp-sticker-01.svg",
+    mediaType: "svg"
+  },
+  {
+    type: "object",
+    src: "/themes/corp/stickers/corp-sticker-02.svg",
+    mediaType: "svg",
+    filters: ["asset-01", "asset-02"]
+  }
+], U = /* @__PURE__ */ S({
+  __name: "creative-booth",
+  props: {
+    modelValue: {
+      default: null
+    },
+    jsonModel: {
+      type: null,
+      default: void 0
+    },
+    config: {
+      type: Object,
+      default: null
+    },
+    feature: {
+      type: String,
+      default: ""
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    variant: {
+      type: String,
+      default: "light"
+    },
+    messages: {
+      type: Object,
+      default: {}
+    },
+    assets: {
+      type: Array,
+      default: () => F
+    },
+    assetFilters: {
+      type: Array,
+      default: () => []
+    },
+    exportToSvg: {
+      type: Boolean,
+      default: !1
+    },
+    resetState: {
+      type: Boolean,
+      default: !1
+    },
+    ratio: {
+      type: String,
+      default: "4x3"
+    },
+    themeData: {
+      type: Object,
+      default: () => ({})
+    },
+    autoSelect: Number,
+    ready: {
+      type: Boolean,
+      default: !1
+    },
+    pending: {
+      type: Boolean,
+      default: !1
+    },
+    emitPending: {
+      type: Boolean,
+      default: !1
+    },
+    animationDuration: {
+      type: Number,
+      default: 320
+    }
+  },
+  emits: ["update:modelValue", "update:jsonModel", "update:ready", "update:pending"],
+  setup(s, { emit: b }) {
+    const a = s, o = b, r = d(), k = d(), c = d(!1), i = l(
+      () => a.assetFilters && a.assetFilters.length > 0 ? a.assets.filter((e) => !e.filters || e.filters.length == 0 || a.assetFilters.some((t) => e.filters.includes(t))) : a.assets
+    ), m = l({
+      get() {
+        return a.modelValue;
+      },
+      set(e) {
+        o("update:modelValue", e);
+      }
+    }), p = l({
+      get() {
+        return a.jsonModel;
+      },
+      set(e) {
+        o("update:jsonModel", e);
+      }
+    }), f = l({
+      get() {
+        return a.pending;
+      },
+      set(e) {
+        a.ready && o("update:pending", e);
+      }
+    });
+    T(k, async (e, t) => {
+      e && e !== t && o("update:modelValue", e);
+    }, { deep: !0 });
+    function y(e) {
+      if (typeof e < "u") {
+        const t = i.value[e];
+        switch (t.type) {
+          case "background":
+            r.value?.setBackgroundImage(t);
+            break;
+          case "overlay":
+            r.value.setOverlayImage(t);
+            break;
+          default:
+            r.value.addCanvasObject(t);
+        }
+      }
+    }
+    const j = (async () => {
+      if (c.value = !0, a.autoSelect !== void 0) {
+        const e = a.autoSelect >= 0 ? a.autoSelect : Math.floor(Math.random() * i.value.length);
+        y(e);
+      }
+      o("update:ready", !0);
+    });
+    return (e, t) => (u(), g("div", A, [
+      v("div", O, [
+        M(D, {
+          modelValue: m.value,
+          "onUpdate:modelValue": t[0] || (t[0] = (n) => m.value = n),
+          "json-model": p.value,
+          "onUpdate:jsonModel": t[1] || (t[1] = (n) => p.value = n),
+          pending: f.value,
+          "onUpdate:pending": t[2] || (t[2] = (n) => f.value = n),
+          ref_key: "canvas",
+          ref: r,
+          "reset-state": s.resetState,
+          options: { themeData: s.themeData },
+          feature: s.feature,
+          required: s.required,
+          class: V(`${s.ratio ? `aspect-ratio aspect-ratio--${s.ratio}` : ""}`),
+          onOnReady: j,
+          "emit-pending": s.emitPending,
+          "animation-duration": s.animationDuration
+        }, null, 8, ["modelValue", "json-model", "pending", "reset-state", "options", "feature", "required", "class", "emit-pending", "animation-duration"])
+      ]),
+      s.messages.headline ? (u(), g("p", {
+        key: 0,
+        class: "headline",
+        innerHTML: s.messages.headline
+      }, null, 8, w)) : h("", !0),
+      v("div", C, [
+        c.value ? (u(), B(x, {
+          key: 0,
+          assets: i.value,
+          onSelect: y
+        }, null, 8, ["assets"])) : h("", !0)
+      ])
+    ]));
+  }
+});
+export {
+  F as D,
+  U as _
+};

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

@@ -0,0 +1,318 @@
+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 _
+};