@duxweb/dvha-pro 1.1.29 → 1.1.31

package/dist/esm/components/posterEditor/hooks/usePosterEditor.js

@@ -1,434 +1,421 @@
-import { useThrottleFn as fe } from "@vueuse/core";
-import { Canvas as be, FabricImage as pe } from "fabric";
-import { ref as f, computed as m, watch as Ie, nextTick as Y, markRaw as ke } from "vue";
-import { getElementConfig as I } from "../elements/index.js";
-function Me(k = {}) {
-  const n = f(null), P = f(null), l = f({
-    width: k.width || 750,
-    height: k.height || 1e3,
-    backgroundColor: k.backgroundColor || "#ffffff",
-    backgroundImage: k.backgroundImage || "",
-    elements: []
-  }), h = f([]), O = f(!1), B = f(1), y = f(0), A = f(0);
-  let M = null, D = () => {
-  }, F = 0;
-  const T = () => `element_${++F}`, b = () => {
-    O.value || (O.value = !0, Y(() => {
-      D(JSON.stringify(l.value)), O.value = !1;
-    }));
-  }, C = () => {
-    if (!n.value)
-      return;
-    const t = n.value.getObjects(), e = [];
-    t.forEach((o) => {
-      const a = o.elementId;
-      if (!a)
-        return;
-      const s = l.value.elements.find((i) => i.id === a);
-      if (!s)
-        return;
-      const u = I(s.type);
-      if (!u)
-        return;
-      const r = u.getPropsFromFabricObject(o);
-      e.push({
-        ...s,
-        ...r,
-        id: s.id,
-        type: s.type
-      });
-    }), l.value.elements = e;
-  }, g = fe(() => {
-    C(), b();
-  }, 100), w = () => {
-    if (!n.value)
-      return;
-    const t = n.value.getActiveObjects(), e = n.value.getActiveObject();
-    t.length > 0 ? h.value = [...t] : e ? h.value = [e] : h.value = [];
-  }, z = () => {
-    h.value = [];
-  }, L = (t) => {
-    if (!t.target)
-      return;
-    const e = t.target, o = e.elementId, s = l.value.elements.find((i) => i.id === o)?.type, u = e.scaleX || 1, r = e.scaleY || 1;
-    if (u !== 1 || r !== 1) {
-      if (s === "circle") {
-        const i = Math.max(u, r), d = Math.round((e.radius || 50) * i);
-        e.set({ radius: d, scaleX: 1, scaleY: 1 });
-      } else if (s !== "image") {
-        const i = Math.round(e.width * u), d = Math.round(e.height * r);
-        e.set({ width: i, height: d, scaleX: 1, scaleY: 1 });
-      }
-      e.setCoords();
-    }
-    g();
-  }, H = (t) => {
-    const e = t.target;
-    if (!e)
-      return;
-    const o = e.elementId;
-    if (!o)
-      return;
-    const a = l.value.elements.find((s) => s.id === o);
-    if (a) {
-      if (a.type === "circle") {
-        const s = Math.max(e.scaleX || 1, e.scaleY || 1);
-        e.set({ scaleX: s, scaleY: s }), e.setCoords();
-      }
-      if (a.type === "rect") {
-        const s = e.__corner;
-        if (s && ["tl", "tr", "bl", "br"].includes(s)) {
-          const r = Math.max(Math.abs(e.scaleX || 1), Math.abs(e.scaleY || 1));
-          e.set({
-            scaleX: e.scaleX >= 0 ? r : -r,
-            scaleY: e.scaleY >= 0 ? r : -r
-          }), e.setCoords();
-        }
-      }
-      if (a.type === "image") {
-        const s = e.__corner;
-        if (s && ["tl", "tr", "bl", "br"].includes(s)) {
-          const r = Math.max(Math.abs(e.scaleX || 1), Math.abs(e.scaleY || 1));
-          e.set({
-            scaleX: e.scaleX >= 0 ? r : -r,
-            scaleY: e.scaleY >= 0 ? r : -r
-          }), e.setCoords();
-        }
-      }
-    }
-  }, _ = () => {
-    n.value && (n.value.on("selection:created", w), n.value.on("selection:updated", w), n.value.on("selection:cleared", z), n.value.on("mouse:down", () => setTimeout(w, 10)), n.value.on("mouse:up", () => setTimeout(w, 10)), n.value.on("object:modified", L), n.value.on("object:scaling", H), n.value.on("path:created", g), n.value.on("object:moving", g), n.value.on("object:rotating", g), n.value.on("object:skewing", g), n.value.on("object:added", g), n.value.on("object:removed", g), n.value.on("custom:text:changed", (t) => {
-      t.target && t.newText !== void 0 && t.target.elementId && g();
-    }));
-  }, E = () => {
-    if (!n.value)
-      return;
-    const t = B.value || 1;
-    n.value.setZoom(t), n.value.setDimensions({
-      width: l.value.width * t,
-      height: l.value.height * t
-    }), n.value.backgroundColor = l.value.backgroundColor, n.value.renderAll(), n.value.getObjects().forEach((e) => e.setCoords());
-  }, x = () => {
-    if (!M)
-      return;
-    const t = M.getBoundingClientRect();
-    y.value = t.width - 40, A.value = t.height - 40;
-    const e = y.value / l.value.width, o = A.value / l.value.height, a = Math.min(e, o, 1);
-    B.value = a, n.value && (n.value.setZoom(a), n.value.setDimensions({
-      width: l.value.width * a,
-      height: l.value.height * a
-    }), n.value.renderAll(), n.value.getObjects().forEach((s) => s.setCoords()));
-  }, S = (t) => {
-    M = t, Y(x);
-    const e = new ResizeObserver(x);
-    return e.observe(t), () => e.disconnect();
-  }, J = (t, e) => {
-    const o = l.value.width, a = l.value.height, s = t.getBoundingRect();
-    switch (e) {
-      case "center-horizontal":
-        t.set("left", Math.round(t.left + (o / 2 - s.left - s.width / 2)));
-        break;
-      case "center-vertical":
-        t.set("top", Math.round(t.top + (a / 2 - s.top - s.height / 2)));
-        break;
-      case "center-both":
-        t.set({
-          left: Math.round(t.left + (o / 2 - s.left - s.width / 2)),
-          top: Math.round(t.top + (a / 2 - s.top - s.height / 2))
-        });
-        break;
-      case "move-up":
-        n.value?.bringObjectForward(t);
-        break;
-      case "move-down":
-        n.value?.sendObjectBackwards(t);
-        break;
-      case "move-to-front":
-        n.value?.bringObjectToFront(t);
-        break;
-      case "move-to-back":
-        n.value?.sendObjectToBack(t);
-        break;
-    }
-    t.setCoords(), n.value?.renderAll();
-  }, K = (t) => {
-    if (t.length < 3)
-      return;
-    const e = [...t].sort((d, c) => d.getBoundingRect().left - c.getBoundingRect().left), o = e[0].getBoundingRect(), a = e[e.length - 1].getBoundingRect(), s = a.left + a.width - o.left, u = e.reduce((d, c) => d + c.getBoundingRect().width, 0), r = (s - u) / (e.length - 1);
-    let i = o.left + o.width + r;
-    for (let d = 1; d < e.length - 1; d++) {
-      const c = e[d], v = c.getBoundingRect();
-      c.set("left", Math.round(c.left + (i - v.left))), i += v.width + r;
-    }
-  }, U = (t) => {
-    if (t.length < 3)
-      return;
-    const e = [...t].sort((d, c) => d.getBoundingRect().top - c.getBoundingRect().top), o = e[0].getBoundingRect(), a = e[e.length - 1].getBoundingRect(), s = a.top + a.height - o.top, u = e.reduce((d, c) => d + c.getBoundingRect().height, 0), r = (s - u) / (e.length - 1);
-    let i = o.top + o.height + r;
-    for (let d = 1; d < e.length - 1; d++) {
-      const c = e[d], v = c.getBoundingRect();
-      c.set("top", Math.round(c.top + (i - v.top))), i += v.height + r;
-    }
-  }, W = (t, e) => {
-    if (t.length < 2)
-      return;
-    const o = t.map((c) => c.getBoundingRect()), a = Math.min(...o.map((c) => c.left)), s = Math.max(...o.map((c) => c.left + c.width)), u = Math.min(...o.map((c) => c.top)), r = Math.max(...o.map((c) => c.top + c.height)), i = (a + s) / 2, d = (u + r) / 2;
-    switch (e) {
-      case "left":
-        t.forEach((c) => {
-          const v = c.getBoundingRect();
-          c.set("left", Math.round(c.left + (a - v.left)));
-        });
-        break;
-      case "right":
-        t.forEach((c) => {
-          const v = c.getBoundingRect();
-          c.set("left", Math.round(c.left + (s - v.left - v.width)));
-        });
-        break;
-      case "top":
-        t.forEach((c) => {
-          const v = c.getBoundingRect();
-          c.set("top", Math.round(c.top + (u - v.top)));
-        });
-        break;
-      case "bottom":
-        t.forEach((c) => {
-          const v = c.getBoundingRect();
-          c.set("top", Math.round(c.top + (r - v.top - v.height)));
-        });
-        break;
-      case "center-horizontal":
-        t.forEach((c) => {
-          const v = c.getBoundingRect(), j = v.left + v.width / 2;
-          c.set("left", Math.round(c.left + (i - j)));
-        });
-        break;
-      case "center-vertical":
-        t.forEach((c) => {
-          const v = c.getBoundingRect(), j = v.top + v.height / 2;
-          c.set("top", Math.round(c.top + (d - j)));
-        });
-        break;
-      case "distribute-horizontal":
-        K(t);
-        break;
-      case "distribute-vertical":
-        U(t);
-        break;
-    }
-    t.forEach((c) => c.setCoords()), n.value?.renderAll();
-  }, N = (t, e) => (P.value = t, n.value = ke(new be(t, {
-    selection: !0,
-    preserveObjectStacking: !0,
-    uniformScaling: !1,
-    uniScaleKey: "shiftKey",
-    altActionKey: "altKey"
-  })), _(), E(), e && S(e), n.value), Z = async (t, e = {}) => {
-    const o = I(t);
-    if (!o || !n.value)
-      return;
-    const a = T(), s = l.value.width / 2, u = l.value.height / 2, r = {
-      ...o.defaultProps,
-      left: Math.round(s - (o.defaultProps.width || 100) / 2),
-      top: Math.round(u - (o.defaultProps.height || 50) / 2),
-      ...e,
-      id: a
-    }, i = await o.createFabricObject(r);
-    if (!i)
-      return;
-    i.elementId = a, n.value.add(i), i.setCoords(), n.value.setActiveObject(i), n.value.renderAll();
-    const d = r;
-    return l.value.elements.push(d), a;
-  }, $ = () => {
-    if (!n.value || h.value.length === 0)
-      return;
-    n.value.getActiveObjects().forEach((e) => {
-      const o = e.elementId;
-      if (o) {
-        const a = l.value.elements.findIndex((s) => s.id === o);
-        a !== -1 && l.value.elements.splice(a, 1);
-      }
-      n.value?.remove(e);
-    }), n.value.discardActiveObject(), h.value = [], n.value.renderAll();
-  }, V = () => {
-    n.value?.discardActiveObject(), n.value?.renderAll();
-  }, q = (t, e, o) => {
-    const a = l.value.elements.findIndex((i) => i.id === t);
-    if (a === -1)
-      return;
-    const s = l.value.elements[a], u = I(s.type);
-    if (!u)
-      return;
-    l.value.elements[a] = {
-      ...s,
-      [e]: o
-    };
-    const r = n.value?.getObjects().find((i) => i.elementId === t);
-    r && u.onPropsChange && (u.onPropsChange(l.value.elements[a], r), r.setCoords(), n.value?.renderAll());
-  }, G = m(() => {
-    if (h.value.length !== 1 || l.value.elements.length <= 1)
-      return !1;
-    const e = h.value[0].elementId;
-    if (!e)
-      return !1;
-    const o = l.value.elements.findIndex((a) => a.id === e);
-    return o !== -1 && o < l.value.elements.length - 1;
-  }), Q = m(() => {
-    if (h.value.length !== 1 || l.value.elements.length <= 1)
-      return !1;
-    const e = h.value[0].elementId;
-    return e ? l.value.elements.findIndex((a) => a.id === e) > 0 : !1;
-  }), ee = m(() => {
-    if (h.value.length !== 1 || l.value.elements.length <= 1)
-      return !1;
-    const e = h.value[0].elementId;
-    if (!e)
-      return !1;
-    const o = l.value.elements.findIndex((a) => a.id === e);
-    return o !== -1 && o < l.value.elements.length - 1;
-  }), te = m(() => {
-    if (h.value.length !== 1 || l.value.elements.length <= 1)
-      return !1;
-    const e = h.value[0].elementId;
-    return e ? l.value.elements.findIndex((a) => a.id === e) > 0 : !1;
-  }), ne = (t) => {
-    const e = n.value?.getActiveObjects() || [];
-    if (e.length === 1) {
-      if (J(e[0], t), ["move-up", "move-down", "move-to-front", "move-to-back"].includes(t)) {
-        const o = e[0].elementId;
-        if (o) {
-          const a = l.value.elements.findIndex((s) => s.id === o);
-          if (a !== -1) {
-            const s = l.value.elements[a];
-            switch (l.value.elements.splice(a, 1), t) {
-              case "move-up":
-                l.value.elements.splice(Math.min(a + 1, l.value.elements.length), 0, s);
-                break;
-              case "move-down":
-                l.value.elements.splice(Math.max(a - 1, 0), 0, s);
-                break;
-              case "move-to-front":
-                l.value.elements.push(s);
-                break;
-              case "move-to-back":
-                l.value.elements.unshift(s);
-                break;
-            }
-          }
-        }
-      }
-    } else e.length > 1 && W(e, t);
-  }, ae = () => {
-    n.value && (n.value.clear(), l.value.elements = [], h.value = []);
-  }, le = async (t) => {
-    if (t)
-      try {
-        const e = JSON.parse(t);
-        if (l.value = {
-          width: e.width || 750,
-          height: e.height || 1e3,
-          backgroundColor: e.backgroundColor || "#ffffff",
-          backgroundImage: e.backgroundImage || "",
-          elements: e.elements || []
-        }, n.value) {
-          n.value.clear(), n.value.setDimensions({
-            width: l.value.width,
-            height: l.value.height
-          }), n.value.backgroundColor = l.value.backgroundColor, l.value.backgroundImage && X(l.value.backgroundImage);
-          const o = l.value.elements.map(async (a) => {
-            const s = I(a.type);
-            if (!s)
-              return;
-            const u = await s.createFabricObject(a);
-            u && (u.elementId = a.id, n.value?.add(u));
-          });
-          Promise.all(o).then(() => {
-            E(), n.value?.renderAll(), b();
-          });
-        }
-      } catch (e) {
-        console.error("Failed to load data:", e);
-      }
-  }, oe = (t) => {
-    D = t?.onDataChange || (() => {
-    });
-  }, se = () => {
-    n.value && (n.value.dispose(), n.value = null);
-  }, R = m(() => h.value.length === 1 ? h.value[0] : null), p = m(() => {
-    if (!R.value)
-      return null;
-    const t = R.value.elementId;
-    return l.value.elements.find((e) => e.id === t) || null;
-  }), ce = m(() => p.value ? I(p.value.type) : null), re = m(() => h.value.length > 1), ue = (t) => {
-    if (p.value)
-      return p.value[t];
-  }, ie = m(() => h.value.map((t) => {
-    const e = t.elementId;
-    return l.value.elements.find((o) => o.id === e);
-  }).filter((t) => !!t)), de = (t, e) => {
-    l.value.width = t, l.value.height = e, n.value && (n.value.setDimensions({ width: t, height: e }), x(), n.value.renderAll()), b();
-  }, ve = (t) => {
-    l.value.backgroundColor = t, n.value && (n.value.backgroundColor = t, n.value.renderAll()), b();
-  }, X = (t) => {
-    !n.value || !t || pe.fromURL(t, {
-      crossOrigin: "anonymous"
-    }).then((e) => {
-      n.value && (n.value.backgroundImage = e, n.value.renderAll());
-    }).catch((e) => {
-      console.error("Failed to load background image:", e);
-    });
-  }, he = (t) => {
-    l.value.backgroundImage = t, t ? X(t) : n.value && (n.value.backgroundImage = void 0, n.value.renderAll()), b();
-  }, ge = () => {
-    C(), b();
-  }, me = () => {
-    C();
-    const t = JSON.stringify(l.value, null, 2), e = new Blob([t], { type: "application/json" }), o = URL.createObjectURL(e), a = document.createElement("a");
-    a.href = o, a.download = `poster-${Date.now()}.json`, document.body.appendChild(a), a.click(), document.body.removeChild(a), URL.revokeObjectURL(o);
-  };
-  return Ie(
-    l,
-    () => {
-      g();
-    },
-    { deep: !0 }
-  ), {
-    initCanvas: N,
-    destroy: se,
-    setCallbacks: oe,
-    addElement: Z,
-    deleteSelectedElements: $,
-    updateElementProperty: q,
-    alignElements: ne,
-    canMoveUp: G,
-    canMoveDown: Q,
-    canMoveToFront: ee,
-    canMoveToBack: te,
-    clearCanvas: ae,
-    loadData: le,
-    updateData: b,
-    canvas: n,
-    canvasData: l,
-    selectedElements: h,
-    canvasScale: B,
-    currentElement: R,
-    currentElementData: p,
-    currentElementConfig: ce,
-    hasMultipleSelection: re,
-    clearSelection: V,
-    updateCanvasSize: E,
-    setupAutoResize: S,
-    getSelectedElementProperty: ue,
-    selectedElementsData: ie,
-    syncAllFabricObjectsToData: C,
-    updateCanvasSettings: de,
-    updateCanvasBackground: ve,
-    updateCanvasBackgroundImage: he,
-    saveData: ge,
-    exportJson: me
-  };
+import { getElementConfig as e } from "../elements/index.js";
+import { computed as t, markRaw as n, nextTick as r, ref as i, watch as a } from "vue";
+import { useThrottleFn as o } from "@vueuse/core";
+import { Canvas as s, FabricImage as c } from "fabric";
+function l(l = {}) {
+	let u = i(null), d = i(null), f = i({
+		width: l.width || 750,
+		height: l.height || 1e3,
+		backgroundColor: l.backgroundColor || "#ffffff",
+		backgroundImage: l.backgroundImage || "",
+		elements: []
+	}), p = i([]), m = i(!1), h = i(1), g = i(0), _ = i(0), v = null, y = () => {}, b = 0, x = () => `element_${++b}`, S = () => {
+		m.value || (m.value = !0, r(() => {
+			y(JSON.stringify(f.value)), m.value = !1;
+		}));
+	}, C = () => {
+		if (!u.value) return;
+		let t = u.value.getObjects(), n = [];
+		t.forEach((t) => {
+			let r = t.elementId;
+			if (!r) return;
+			let i = f.value.elements.find((e) => e.id === r);
+			if (!i) return;
+			let a = e(i.type);
+			if (!a) return;
+			let o = a.getPropsFromFabricObject(t);
+			n.push({
+				...i,
+				...o,
+				id: i.id,
+				type: i.type
+			});
+		}), f.value.elements = n;
+	}, w = o(() => {
+		C(), S();
+	}, 100), T = () => {
+		if (!u.value) return;
+		let e = u.value.getActiveObjects(), t = u.value.getActiveObject();
+		e.length > 0 ? p.value = [...e] : t ? p.value = [t] : p.value = [];
+	}, E = () => {
+		p.value = [];
+	}, D = (e) => {
+		if (!e.target) return;
+		let t = e.target, n = t.elementId, r = f.value.elements.find((e) => e.id === n)?.type, i = t.scaleX || 1, a = t.scaleY || 1;
+		if (i !== 1 || a !== 1) {
+			if (r === "circle") {
+				let e = Math.max(i, a), n = Math.round((t.radius || 50) * e);
+				t.set({
+					radius: n,
+					scaleX: 1,
+					scaleY: 1
+				});
+			} else if (r !== "image") {
+				let e = Math.round(t.width * i), n = Math.round(t.height * a);
+				t.set({
+					width: e,
+					height: n,
+					scaleX: 1,
+					scaleY: 1
+				});
+			}
+			t.setCoords();
+		}
+		w();
+	}, O = (e) => {
+		let t = e.target;
+		if (!t) return;
+		let n = t.elementId;
+		if (!n) return;
+		let r = f.value.elements.find((e) => e.id === n);
+		if (r) {
+			if (r.type === "circle") {
+				let e = Math.max(t.scaleX || 1, t.scaleY || 1);
+				t.set({
+					scaleX: e,
+					scaleY: e
+				}), t.setCoords();
+			}
+			if (r.type === "rect") {
+				let e = t.__corner;
+				if (e && [
+					"tl",
+					"tr",
+					"bl",
+					"br"
+				].includes(e)) {
+					let e = Math.max(Math.abs(t.scaleX || 1), Math.abs(t.scaleY || 1));
+					t.set({
+						scaleX: t.scaleX >= 0 ? e : -e,
+						scaleY: t.scaleY >= 0 ? e : -e
+					}), t.setCoords();
+				}
+			}
+			if (r.type === "image") {
+				let e = t.__corner;
+				if (e && [
+					"tl",
+					"tr",
+					"bl",
+					"br"
+				].includes(e)) {
+					let e = Math.max(Math.abs(t.scaleX || 1), Math.abs(t.scaleY || 1));
+					t.set({
+						scaleX: t.scaleX >= 0 ? e : -e,
+						scaleY: t.scaleY >= 0 ? e : -e
+					}), t.setCoords();
+				}
+			}
+		}
+	}, ee = () => {
+		u.value && (u.value.on("selection:created", T), u.value.on("selection:updated", T), u.value.on("selection:cleared", E), u.value.on("mouse:down", () => setTimeout(T, 10)), u.value.on("mouse:up", () => setTimeout(T, 10)), u.value.on("object:modified", D), u.value.on("object:scaling", O), u.value.on("path:created", w), u.value.on("object:moving", w), u.value.on("object:rotating", w), u.value.on("object:skewing", w), u.value.on("object:added", w), u.value.on("object:removed", w), u.value.on("custom:text:changed", (e) => {
+			e.target && e.newText !== void 0 && e.target.elementId && w();
+		}));
+	}, k = () => {
+		if (!u.value) return;
+		let e = h.value || 1;
+		u.value.setZoom(e), u.value.setDimensions({
+			width: f.value.width * e,
+			height: f.value.height * e
+		}), u.value.backgroundColor = f.value.backgroundColor, u.value.renderAll(), u.value.getObjects().forEach((e) => e.setCoords());
+	}, A = () => {
+		if (!v) return;
+		let e = v.getBoundingClientRect();
+		g.value = e.width - 40, _.value = e.height - 40;
+		let t = g.value / f.value.width, n = _.value / f.value.height, r = Math.min(t, n, 1);
+		h.value = r, u.value && (u.value.setZoom(r), u.value.setDimensions({
+			width: f.value.width * r,
+			height: f.value.height * r
+		}), u.value.renderAll(), u.value.getObjects().forEach((e) => e.setCoords()));
+	}, j = (e) => {
+		v = e, r(A);
+		let t = new ResizeObserver(A);
+		return t.observe(e), () => t.disconnect();
+	}, M = (e, t) => {
+		let n = f.value.width, r = f.value.height, i = e.getBoundingRect();
+		switch (t) {
+			case "center-horizontal":
+				e.set("left", Math.round(e.left + (n / 2 - i.left - i.width / 2)));
+				break;
+			case "center-vertical":
+				e.set("top", Math.round(e.top + (r / 2 - i.top - i.height / 2)));
+				break;
+			case "center-both":
+				e.set({
+					left: Math.round(e.left + (n / 2 - i.left - i.width / 2)),
+					top: Math.round(e.top + (r / 2 - i.top - i.height / 2))
+				});
+				break;
+			case "move-up":
+				u.value?.bringObjectForward(e);
+				break;
+			case "move-down":
+				u.value?.sendObjectBackwards(e);
+				break;
+			case "move-to-front":
+				u.value?.bringObjectToFront(e);
+				break;
+			case "move-to-back":
+				u.value?.sendObjectToBack(e);
+				break;
+		}
+		e.setCoords(), u.value?.renderAll();
+	}, N = (e) => {
+		if (e.length < 3) return;
+		let t = [...e].sort((e, t) => e.getBoundingRect().left - t.getBoundingRect().left), n = t[0].getBoundingRect(), r = t[t.length - 1].getBoundingRect(), i = (r.left + r.width - n.left - t.reduce((e, t) => e + t.getBoundingRect().width, 0)) / (t.length - 1), a = n.left + n.width + i;
+		for (let e = 1; e < t.length - 1; e++) {
+			let n = t[e], r = n.getBoundingRect();
+			n.set("left", Math.round(n.left + (a - r.left))), a += r.width + i;
+		}
+	}, P = (e) => {
+		if (e.length < 3) return;
+		let t = [...e].sort((e, t) => e.getBoundingRect().top - t.getBoundingRect().top), n = t[0].getBoundingRect(), r = t[t.length - 1].getBoundingRect(), i = (r.top + r.height - n.top - t.reduce((e, t) => e + t.getBoundingRect().height, 0)) / (t.length - 1), a = n.top + n.height + i;
+		for (let e = 1; e < t.length - 1; e++) {
+			let n = t[e], r = n.getBoundingRect();
+			n.set("top", Math.round(n.top + (a - r.top))), a += r.height + i;
+		}
+	}, F = (e, t) => {
+		if (e.length < 2) return;
+		let n = e.map((e) => e.getBoundingRect()), r = Math.min(...n.map((e) => e.left)), i = Math.max(...n.map((e) => e.left + e.width)), a = Math.min(...n.map((e) => e.top)), o = Math.max(...n.map((e) => e.top + e.height)), s = (r + i) / 2, c = (a + o) / 2;
+		switch (t) {
+			case "left":
+				e.forEach((e) => {
+					let t = e.getBoundingRect();
+					e.set("left", Math.round(e.left + (r - t.left)));
+				});
+				break;
+			case "right":
+				e.forEach((e) => {
+					let t = e.getBoundingRect();
+					e.set("left", Math.round(e.left + (i - t.left - t.width)));
+				});
+				break;
+			case "top":
+				e.forEach((e) => {
+					let t = e.getBoundingRect();
+					e.set("top", Math.round(e.top + (a - t.top)));
+				});
+				break;
+			case "bottom":
+				e.forEach((e) => {
+					let t = e.getBoundingRect();
+					e.set("top", Math.round(e.top + (o - t.top - t.height)));
+				});
+				break;
+			case "center-horizontal":
+				e.forEach((e) => {
+					let t = e.getBoundingRect(), n = t.left + t.width / 2;
+					e.set("left", Math.round(e.left + (s - n)));
+				});
+				break;
+			case "center-vertical":
+				e.forEach((e) => {
+					let t = e.getBoundingRect(), n = t.top + t.height / 2;
+					e.set("top", Math.round(e.top + (c - n)));
+				});
+				break;
+			case "distribute-horizontal":
+				N(e);
+				break;
+			case "distribute-vertical":
+				P(e);
+				break;
+		}
+		e.forEach((e) => e.setCoords()), u.value?.renderAll();
+	}, I = (e, t) => (d.value = e, u.value = n(new s(e, {
+		selection: !0,
+		preserveObjectStacking: !0,
+		uniformScaling: !1,
+		uniScaleKey: "shiftKey",
+		altActionKey: "altKey"
+	})), ee(), k(), t && j(t), u.value), L = async (t, n = {}) => {
+		let r = e(t);
+		if (!r || !u.value) return;
+		let i = x(), a = f.value.width / 2, o = f.value.height / 2, s = {
+			...r.defaultProps,
+			left: Math.round(a - (r.defaultProps.width || 100) / 2),
+			top: Math.round(o - (r.defaultProps.height || 50) / 2),
+			...n,
+			id: i
+		}, c = await r.createFabricObject(s);
+		if (!c) return;
+		c.elementId = i, u.value.add(c), c.setCoords(), u.value.setActiveObject(c), u.value.renderAll();
+		let l = s;
+		return f.value.elements.push(l), i;
+	}, R = () => {
+		!u.value || p.value.length === 0 || (u.value.getActiveObjects().forEach((e) => {
+			let t = e.elementId;
+			if (t) {
+				let e = f.value.elements.findIndex((e) => e.id === t);
+				e !== -1 && f.value.elements.splice(e, 1);
+			}
+			u.value?.remove(e);
+		}), u.value.discardActiveObject(), p.value = [], u.value.renderAll());
+	}, z = () => {
+		u.value?.discardActiveObject(), u.value?.renderAll();
+	}, B = (t, n, r) => {
+		let i = f.value.elements.findIndex((e) => e.id === t);
+		if (i === -1) return;
+		let a = f.value.elements[i], o = e(a.type);
+		if (!o) return;
+		f.value.elements[i] = {
+			...a,
+			[n]: r
+		};
+		let s = u.value?.getObjects().find((e) => e.elementId === t);
+		s && o.onPropsChange && (o.onPropsChange(f.value.elements[i], s), s.setCoords(), u.value?.renderAll());
+	}, V = t(() => {
+		if (p.value.length !== 1 || f.value.elements.length <= 1) return !1;
+		let e = p.value[0].elementId;
+		if (!e) return !1;
+		let t = f.value.elements.findIndex((t) => t.id === e);
+		return t !== -1 && t < f.value.elements.length - 1;
+	}), H = t(() => {
+		if (p.value.length !== 1 || f.value.elements.length <= 1) return !1;
+		let e = p.value[0].elementId;
+		return e ? f.value.elements.findIndex((t) => t.id === e) > 0 : !1;
+	}), U = t(() => {
+		if (p.value.length !== 1 || f.value.elements.length <= 1) return !1;
+		let e = p.value[0].elementId;
+		if (!e) return !1;
+		let t = f.value.elements.findIndex((t) => t.id === e);
+		return t !== -1 && t < f.value.elements.length - 1;
+	}), W = t(() => {
+		if (p.value.length !== 1 || f.value.elements.length <= 1) return !1;
+		let e = p.value[0].elementId;
+		return e ? f.value.elements.findIndex((t) => t.id === e) > 0 : !1;
+	}), G = (e) => {
+		let t = u.value?.getActiveObjects() || [];
+		if (t.length === 1) {
+			if (M(t[0], e), [
+				"move-up",
+				"move-down",
+				"move-to-front",
+				"move-to-back"
+			].includes(e)) {
+				let n = t[0].elementId;
+				if (n) {
+					let t = f.value.elements.findIndex((e) => e.id === n);
+					if (t !== -1) {
+						let n = f.value.elements[t];
+						switch (f.value.elements.splice(t, 1), e) {
+							case "move-up":
+								f.value.elements.splice(Math.min(t + 1, f.value.elements.length), 0, n);
+								break;
+							case "move-down":
+								f.value.elements.splice(Math.max(t - 1, 0), 0, n);
+								break;
+							case "move-to-front":
+								f.value.elements.push(n);
+								break;
+							case "move-to-back":
+								f.value.elements.unshift(n);
+								break;
+						}
+					}
+				}
+			}
+		} else t.length > 1 && F(t, e);
+	}, K = () => {
+		u.value && (u.value.clear(), f.value.elements = [], p.value = []);
+	}, q = async (t) => {
+		if (t) try {
+			let n = JSON.parse(t);
+			if (f.value = {
+				width: n.width || 750,
+				height: n.height || 1e3,
+				backgroundColor: n.backgroundColor || "#ffffff",
+				backgroundImage: n.backgroundImage || "",
+				elements: n.elements || []
+			}, u.value) {
+				u.value.clear(), u.value.setDimensions({
+					width: f.value.width,
+					height: f.value.height
+				}), u.value.backgroundColor = f.value.backgroundColor, f.value.backgroundImage && $(f.value.backgroundImage);
+				let t = f.value.elements.map(async (t) => {
+					let n = e(t.type);
+					if (!n) return;
+					let r = await n.createFabricObject(t);
+					r && (r.elementId = t.id, u.value?.add(r));
+				});
+				Promise.all(t).then(() => {
+					k(), u.value?.renderAll(), S();
+				});
+			}
+		} catch (e) {
+			console.error("Failed to load data:", e);
+		}
+	}, J = (e) => {
+		y = e?.onDataChange || (() => {});
+	}, Y = () => {
+		u.value &&= (u.value.dispose(), null);
+	}, X = t(() => p.value.length === 1 ? p.value[0] : null), Z = t(() => {
+		if (!X.value) return null;
+		let e = X.value.elementId;
+		return f.value.elements.find((t) => t.id === e) || null;
+	}), Q = t(() => Z.value ? e(Z.value.type) : null), te = t(() => p.value.length > 1), ne = (e) => {
+		if (Z.value) return Z.value[e];
+	}, re = t(() => p.value.map((e) => {
+		let t = e.elementId;
+		return f.value.elements.find((e) => e.id === t);
+	}).filter((e) => !!e)), ie = (e, t) => {
+		f.value.width = e, f.value.height = t, u.value && (u.value.setDimensions({
+			width: e,
+			height: t
+		}), A(), u.value.renderAll()), S();
+	}, ae = (e) => {
+		f.value.backgroundColor = e, u.value && (u.value.backgroundColor = e, u.value.renderAll()), S();
+	}, $ = (e) => {
+		!u.value || !e || c.fromURL(e, { crossOrigin: "anonymous" }).then((e) => {
+			u.value && (u.value.backgroundImage = e, u.value.renderAll());
+		}).catch((e) => {
+			console.error("Failed to load background image:", e);
+		});
+	};
+	return a(f, () => {
+		w();
+	}, { deep: !0 }), {
+		initCanvas: I,
+		destroy: Y,
+		setCallbacks: J,
+		addElement: L,
+		deleteSelectedElements: R,
+		updateElementProperty: B,
+		alignElements: G,
+		canMoveUp: V,
+		canMoveDown: H,
+		canMoveToFront: U,
+		canMoveToBack: W,
+		clearCanvas: K,
+		loadData: q,
+		updateData: S,
+		canvas: u,
+		canvasData: f,
+		selectedElements: p,
+		canvasScale: h,
+		currentElement: X,
+		currentElementData: Z,
+		currentElementConfig: Q,
+		hasMultipleSelection: te,
+		clearSelection: z,
+		updateCanvasSize: k,
+		setupAutoResize: j,
+		getSelectedElementProperty: ne,
+		selectedElementsData: re,
+		syncAllFabricObjectsToData: C,
+		updateCanvasSettings: ie,
+		updateCanvasBackground: ae,
+		updateCanvasBackgroundImage: (e) => {
+			f.value.backgroundImage = e, e ? $(e) : u.value && (u.value.backgroundImage = void 0, u.value.renderAll()), S();
+		},
+		saveData: () => {
+			C(), S();
+		},
+		exportJson: () => {
+			C();
+			let e = JSON.stringify(f.value, null, 2), t = new Blob([e], { type: "application/json" }), n = URL.createObjectURL(t), r = document.createElement("a");
+			r.href = n, r.download = `poster-${Date.now()}.json`, document.body.appendChild(r), r.click(), document.body.removeChild(r), URL.revokeObjectURL(n);
+		}
+	};
 }
-export {
-  Me as usePosterEditor
-};
+export { l as usePosterEditor };