@duxweb/dvha-pro 1.0.24 → 1.0.26

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

@@ -0,0 +1,434 @@
+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
+  };
+}
+export {
+  Me as usePosterEditor
+};

package/dist/esm/components/posterEditor/pages/LeftToolbar.js

@@ -0,0 +1,40 @@
+import { defineComponent as o, createVNode as t } from "vue";
+import { NTooltip as l, NButton as n } from "naive-ui";
+import { elementConfigs as u } from "../elements/index.js";
+const i = /* @__PURE__ */ o({
+  name: "LeftToolbar",
+  props: {
+    onAddElement: {
+      type: Function,
+      required: !0
+    },
+    canvasWidth: {
+      type: Number,
+      required: !0
+    },
+    canvasHeight: {
+      type: Number,
+      required: !0
+    }
+  },
+  setup(r) {
+    return () => t("div", {
+      class: "p-4 bg-default border-r border-default flex flex-col gap-6"
+    }, [u.map((e) => t(l, null, {
+      default: () => e.name,
+      trigger: () => t(n, {
+        key: e.type,
+        text: !0,
+        size: "large",
+        onClick: () => r.onAddElement(e.type)
+      }, {
+        icon: () => t("div", {
+          class: e.icon
+        }, null)
+      })
+    }))]);
+  }
+});
+export {
+  i as LeftToolbar
+};

package/dist/esm/components/posterEditor/pages/Panel.js

@@ -0,0 +1,31 @@
+import { defineComponent as t, createVNode as e } from "vue";
+import { NScrollbar as o } from "naive-ui";
+const a = /* @__PURE__ */ t({
+  name: "Panel",
+  props: {
+    title: {
+      type: String,
+      required: !0
+    }
+  },
+  setup(r, {
+    slots: l
+  }) {
+    return () => e("div", {
+      class: "flex flex-col h-full"
+    }, [e("div", {
+      class: "font-medium p-3 border-b border-default"
+    }, [r.title]), e("div", {
+      class: " flex-1 min-h-0"
+    }, [e(o, null, {
+      default: () => [e("div", {
+        class: "p-3 flex flex-col gap-2"
+      }, [l.default?.()])]
+    })]), e("div", {
+      class: "border-t border-default p-3 flex flex-col gap-2"
+    }, [l.footer?.()])]);
+  }
+});
+export {
+  a as Panel
+};

package/dist/esm/components/posterEditor/pages/PanelItem.js

@@ -0,0 +1,22 @@
+import { defineComponent as r, createVNode as e } from "vue";
+const i = /* @__PURE__ */ r({
+  name: "PanelItem",
+  props: {
+    title: {
+      type: String,
+      required: !0
+    }
+  },
+  setup(t, {
+    slots: l
+  }) {
+    return () => e("div", {
+      class: "flex flex-col gap-1"
+    }, [e("div", {
+      class: "text-muted text-sm"
+    }, [t.title]), e("div", null, [l.default?.()])]);
+  }
+});
+export {
+  i as PanelItem
+};