@pooder/vue 4.2.7 → 4.3.0

package/dist/index.es.js

@@ -1,234 +1,91 @@
-import { defineComponent as J, ref as H, onMounted as he, onUnmounted as G, createElementBlock as $, openBlock as q, createElementVNode as fe, provide as pe, createVNode as we } from "vue";
-import { Pooder as ye } from "@pooder/core";
+import { defineComponent as O, ref as T, onMounted as j, onUnmounted as N, createElementBlock as P, openBlock as k, createElementVNode as $, provide as q, createVNode as G } from "vue";
+import { Pooder as J } from "@pooder/core";
 export * from "@pooder/core";
-import { CanvasService as ve, SceneLayoutService as be, SceneVisibilityService as xe, BackgroundTool as Se, SizeTool as Ce, ImageTool as Ne, WhiteInkTool as Ie, MirrorTool as Fe, DielineTool as Be, RulerTool as Me, FeatureTool as De } from "@pooder/kit";
+import { CanvasService as K, SceneLayoutService as Q, SceneVisibilityService as Z, BackgroundTool as ee, SizeTool as te, ImageTool as ne, WhiteInkTool as re, MirrorTool as ie, DielineTool as oe, RulerTool as ae, FeatureTool as ce } from "@pooder/kit";
 export * from "@pooder/kit";
-const Ee = /* @__PURE__ */ J({
+const se = /* @__PURE__ */ O({
   __name: "CanvasArea",
   emits: ["canvas-ready", "resize"],
-  setup(I, { emit: N }) {
-    const C = N, u = H(null), g = H(null);
-    let c = null;
-    return he(() => {
-      if (u.value && g.value) {
-        const { clientWidth: S, clientHeight: F } = u.value;
-        g.value.width = S, g.value.height = F, C("canvas-ready", g.value), c = new ResizeObserver((z) => {
-          for (const _ of z) {
-            const { width: Y, height: X } = _.contentRect;
-            C("resize", Y, X);
+  setup(h, { emit: l }) {
+    const m = l, r = T(null), i = T(null);
+    let o = null;
+    return j(() => {
+      if (r.value && i.value) {
+        const { clientWidth: u, clientHeight: f } = r.value;
+        i.value.width = u, i.value.height = f, m("canvas-ready", i.value), o = new ResizeObserver((v) => {
+          for (const p of v) {
+            const { width: w, height: y } = p.contentRect;
+            m("resize", w, y);
           }
-        }), c.observe(u.value);
+        }), o.observe(r.value);
       }
-    }), G(() => {
-      c && c.disconnect();
-    }), (S, F) => (q(), $("div", {
+    }), N(() => {
+      o && o.disconnect();
+    }), (u, f) => (k(), P("div", {
       ref_key: "container",
-      ref: u,
+      ref: r,
       class: "pooder-canvas-area"
     }, [
-      fe("canvas", {
+      $("canvas", {
         ref_key: "canvas",
-        ref: g
+        ref: i
       }, null, 512)
     ], 512));
   }
-}), K = (I, N) => {
-  const C = I.__vccOpts || I;
-  for (const [u, g] of N)
-    C[u] = g;
-  return C;
-}, ze = /* @__PURE__ */ K(Ee, [["__scopeId", "data-v-9668bbd7"]]), _e = { class: "pooder-editor" }, j = "SceneLayoutService", V = "SceneVisibilityService", Ye = "image.user", Xe = "pooder.kit.image", Pe = /* @__PURE__ */ J({
+}), R = (h, l) => {
+  const m = h.__vccOpts || h;
+  for (const [r, i] of l)
+    m[r] = i;
+  return m;
+}, de = /* @__PURE__ */ R(se, [["__scopeId", "data-v-9668bbd7"]]), me = { class: "pooder-editor" }, F = "SceneLayoutService", B = "SceneVisibilityService", ue = /* @__PURE__ */ O({
   __name: "PooderEditor",
   emits: ["image-change"],
-  setup(I, { expose: N, emit: C }) {
-    const u = new ye();
-    pe("pooder", u);
-    const g = u.getService("CommandService"), c = u.getService("ConfigurationService"), S = u.getService("WorkbenchService"), F = C, z = c.onAnyChange((e) => {
-      e.key === "image.items" && F("image-change", e.value);
-    }), _ = (e) => {
-      c.import(e);
-    }, Y = () => c.export(), X = () => c.get("image.items", []), Q = async (e) => {
+  setup(h, { expose: l, emit: m }) {
+    const r = new J();
+    q("pooder", r);
+    const i = r.getService("CommandService"), o = r.getService("ConfigurationService"), u = r.getService("WorkbenchService"), f = m, v = o.onAnyChange((e) => {
+      e.key === "image.items" && f("image-change", e.value);
+    }), p = (e) => {
+      o.import(e);
+    }, w = () => o.export(), y = () => o.get("image.items", []), A = async (e) => {
       try {
-        const t = await g.executeCommand(
+        const t = await i.executeCommand(
           "exportCutImage",
           e
         );
         return t || console.warn("[PooderEditor] generateCutImage returned null", {
           options: e,
-          imageCount: (c.get("image.items") || []).length,
-          hasCanvasService: !!u.getService("CanvasService")
+          imageCount: (o.get("image.items") || []).length,
+          hasCanvasService: !!r.getService("CanvasService")
         }), t;
       } catch (t) {
         throw console.error("[PooderEditor] generateCutImage failed", t), t;
       }
-    }, O = async (e, t) => await g.executeCommand("upsertImage", e, {
+    }, _ = async (e, t) => await i.executeCommand("upsertImage", e, {
       id: t?.id,
       mode: t?.mode,
       addOptions: t?.addOptions,
       fitOnAdd: t?.fitOnAdd
-    }), U = async (e, t) => (await O(e, {
+    }), b = async (e, t) => (await _(e, {
       mode: "add",
       addOptions: t,
       fitOnAdd: !0
-    })).id, Z = async (e, t) => await g.executeCommand("updateImage", e, t), ee = async () => await g.executeCommand("clearImages"), B = async (e) => await g.executeCommand(
+    })).id, U = async (e, t) => await i.executeCommand("updateImage", e, t), z = async () => await i.executeCommand("clearImages"), C = async (e) => await i.executeCommand(
       "exportUserCroppedImage",
       e
-    ), te = async (e, t) => await g.executeCommand("focusImage", e, t), M = (e) => Math.max(-1, Math.min(2, e)), k = (e) => {
-      const t = e?.cutRect;
-      if (!t) return null;
-      const i = Number(t.width), n = Number(t.height), d = Number(t.left), r = Number(t.top);
-      return !Number.isFinite(i) || !Number.isFinite(n) || !Number.isFinite(d) || !Number.isFinite(r) || i <= 0 || n <= 0 ? null : { left: d, top: r, width: i, height: n };
-    }, D = (e) => {
-      if (!e) return [];
-      const t = e.canvas.getObjects(), i = [];
-      for (const n of t) {
-        if (n?.data?.layerId !== Ye) continue;
-        const d = n?.data?.id;
-        if (typeof d != "string") continue;
-        const r = n.getCenterPoint ? n.getCenterPoint() : null, m = Number(r?.x ?? n.left), s = Number(r?.y ?? n.top), a = Number(n.scaleX), o = Number(n.width), h = Number(n.height);
-        !Number.isFinite(m) || !Number.isFinite(s) || !Number.isFinite(a) || !Number.isFinite(o) || !Number.isFinite(h) || o <= 0 || h <= 0 || i.push({
-          id: d,
-          centerX: m,
-          centerY: s,
-          objectScale: a,
-          sourceWidth: o,
-          sourceHeight: h
-        });
-      }
-      return i;
-    }, A = (e, t) => {
-      if (!t || t.length === 0) return e;
-      const i = new Set(t);
-      return e.filter((n) => i.has(n.id));
-    }, P = (e) => {
-      c.update("dieline.shape", "custom"), c.update("dieline.pathData", e.pathData), c.update("dieline.features", []), c.update("size.cutMode", "trim"), c.update("size.cutMarginMm", 0);
-    }, E = (e) => !!e && Number.isFinite(e.x) && Number.isFinite(e.y) && Number.isFinite(e.width) && Number.isFinite(e.height) && e.width > 0 && e.height > 0, ie = (e) => {
-      const t = e.baseBounds || e.rawBounds, i = e.rawBounds || e.baseBounds;
-      if (!E(t) || !E(i)) return null;
-      const n = Number(c.get("size.actualWidthMm", 0)), d = Number(c.get("size.actualHeightMm", 0)), r = Math.max(n, d), m = Math.max(t.width, t.height), s = Math.max(i.width, i.height);
-      if (!Number.isFinite(r) || !Number.isFinite(m) || !Number.isFinite(s) || r <= 0 || m <= 0 || s <= 0)
-        return null;
-      const a = r / s, o = i.width * a, h = i.height * a;
-      return !Number.isFinite(o) || !Number.isFinite(h) || o <= 0 || h <= 0 ? null : {
-        widthMm: o,
-        heightMm: h,
-        scale: a,
-        sizeLongEdgeMm: r,
-        baseLongEdge: m,
-        appliedBounds: i,
-        baseBounds: t
-      };
-    }, ne = (e, t = !1) => {
-      const i = ie(e);
-      return i ? (c.update("size.actualWidthMm", i.widthMm), c.update("size.actualHeightMm", i.heightMm), c.update(
-        "size.aspectRatio",
-        i.widthMm / Math.max(1e-3, i.heightMm)
-      ), t && console.info("[PooderEditor] detectDielineFromFrame size mapping", {
-        mappedSize: i,
-        rawBounds: e.rawBounds,
-        baseBounds: e.baseBounds
-      }), i) : null;
-    }, R = (e) => {
-      if (!e) return null;
-      const t = Number(e.left), i = Number(e.top), n = Number(e.width), d = Number(e.height), r = Number(e.centerX), m = Number(e.centerY);
-      return !Number.isFinite(t) || !Number.isFinite(i) || !Number.isFinite(n) || !Number.isFinite(d) || !Number.isFinite(r) || !Number.isFinite(m) ? null : { left: t, top: i, width: n, height: d, centerX: r, centerY: m };
-    }, W = (e) => {
-      if (!e) return null;
-      const t = Number(e.scale), i = Number(e.canvasWidth), n = Number(e.canvasHeight);
-      return !Number.isFinite(t) || !Number.isFinite(i) || !Number.isFinite(n) ? null : {
-        scale: t,
-        canvasWidth: i,
-        canvasHeight: n,
-        viewPadding: c.get("size.viewPadding"),
-        trimRect: R(e.trimRect),
-        cutRect: R(e.cutRect),
-        bleedRect: R(e.bleedRect)
-      };
-    }, re = (e, t, i) => {
-      const n = e.rawBounds || e.baseBounds;
-      return !E(n) || !Number.isFinite(t) || !Number.isFinite(i) || t <= 0 || i <= 0 ? null : {
-        bounds: n,
-        offsetX: n.x + n.width / 2 - t / 2,
-        offsetY: n.y + n.height / 2 - i / 2
-      };
-    }, L = (e) => (e || []).map((t) => ({
-      id: String(t?.id ?? ""),
-      left: Number(t?.left ?? 0),
-      top: Number(t?.top ?? 0),
-      scale: Number(t?.scale ?? 1),
-      angle: Number(t?.angle ?? 0),
-      url: typeof t?.url == "string" ? t.url : "",
-      sourceUrl: typeof t?.sourceUrl == "string" ? t.sourceUrl : "",
-      committedUrl: typeof t?.committedUrl == "string" ? t.committedUrl : ""
-    })), oe = async () => {
-      try {
-        const e = await g.executeCommand("getWorkingImages") || [], t = c.get("image.items", []) || [], i = L(e), n = L(t);
-        return JSON.stringify(i) !== JSON.stringify(n);
-      } catch {
-        return !1;
-      }
-    }, ae = async (e = !1) => {
-      const t = typeof S?.activeToolId == "string" ? String(S.activeToolId) : null;
-      if (t !== Xe)
-        return e && console.info("[PooderEditor] detectDielineFromFrame image update target", {
-          activeToolId: t,
-          target: "config",
-          reason: "image-tool-inactive"
-        }), "config";
-      const i = await oe(), n = i ? "working" : "config";
-      return e && console.info("[PooderEditor] detectDielineFromFrame image update target", {
-        activeToolId: t,
-        workingDirty: i,
-        target: n,
-        reason: i ? "working-session-dirty-follow-working" : "working-session-clean-update-config"
-      }), n;
-    }, se = async (e, t, i = !1) => {
-      const n = [...new Set(e)].filter(
-        (a) => typeof a == "string" && a.length > 0
-      );
-      if (!n.length) return [];
-      const d = /* @__PURE__ */ new Map();
-      for (const a of n) {
-        const o = await B({
-          multiplier: t?.multiplier ?? 2,
-          format: t?.format ?? "png",
-          imageIds: [a]
-        });
-        o?.url && d.set(a, {
-          url: o.url,
-          width: o.width,
-          height: o.height
-        });
-      }
-      if (!d.size) return [];
-      const m = (Array.isArray(c.get("image.items", [])) ? c.get("image.items", []) : []).map((a) => {
-        const o = typeof a?.id == "string" ? a.id : "", h = d.get(o);
-        if (!h) return a;
-        const b = typeof a?.sourceUrl == "string" && a.sourceUrl.length > 0 ? a.sourceUrl : typeof a?.url == "string" ? a.url : "";
-        return {
-          ...a,
-          url: h.url,
-          sourceUrl: b,
-          committedUrl: h.url
-        };
-      });
-      c.update("image.items", m);
-      const s = n.map((a) => {
-        const o = d.get(a);
-        return o ? {
-          id: a,
-          width: o.width,
-          height: o.height
-        } : null;
-      }).filter((a) => !!a);
-      return i && console.info("[PooderEditor] detectDieline committed image sync", {
-        imageIds: n,
-        synced: s,
-        count: s.length
-      }), s;
-    }, ce = (e, t) => {
-      const i = e.rawBounds || e.baseBounds || null;
-      if (!i)
+    ), M = async (e, t) => await i.executeCommand("focusImage", e, t), x = (e, t) => {
+      o.update("dieline.shape", "custom"), o.update("dieline.pathData", e.pathData);
+      const n = Number(e.imageWidth ?? t?.width ?? 0), a = Number(e.imageHeight ?? t?.height ?? 0);
+      o.update(
+        "dieline.customSourceWidthPx",
+        Number.isFinite(n) && n > 0 ? n : void 0
+      ), o.update(
+        "dieline.customSourceHeightPx",
+        Number.isFinite(a) && a > 0 ? a : void 0
+      ), o.update("size.cutMode", "trim"), o.update("size.cutMarginMm", 0);
+    }, D = (e) => !!e && Number.isFinite(e.x) && Number.isFinite(e.y) && Number.isFinite(e.width) && Number.isFinite(e.height) && e.width > 0 && e.height > 0, E = (e, t) => {
+      const n = e.rawBounds || e.baseBounds || null;
+      if (!n)
         return {
           sourceWidth: t.width,
           sourceHeight: t.height,
@@ -238,171 +95,81 @@ const Ee = /* @__PURE__ */ J({
           coverageX: 0,
           coverageY: 0
         };
-      const n = t.width / 2, d = t.height / 2, r = i.x + i.width / 2, m = i.y + i.height / 2;
+      const a = t.width / 2, c = t.height / 2, s = n.x + n.width / 2, d = n.y + n.height / 2;
       return {
         sourceWidth: t.width,
         sourceHeight: t.height,
-        detectedBounds: i,
-        centerOffsetX: r - n,
-        centerOffsetY: m - d,
-        coverageX: t.width > 0 ? i.width / t.width : 0,
-        coverageY: t.height > 0 ? i.height / t.height : 0
+        detectedBounds: n,
+        centerOffsetX: s - a,
+        centerOffsetY: d - c,
+        coverageX: t.width > 0 ? n.width / t.width : 0,
+        coverageY: t.height > 0 ? n.height / t.height : 0
+      };
+    }, L = (e) => {
+      if (!D(e.rawBounds) || !D(e.baseBounds))
+        return null;
+      const t = e.rawBounds, n = e.baseBounds;
+      return {
+        left: n.x - t.x,
+        top: n.y - t.y,
+        right: t.x + t.width - (n.x + n.width),
+        bottom: t.y + t.height - (n.y + n.height)
       };
-    }, de = (e, t) => {
-      const i = e.rawBounds || e.baseBounds, n = Number(e.imageWidth ?? 0), d = Number(e.imageHeight ?? 0);
-      if (!i || !Number.isFinite(i.x) || !Number.isFinite(i.y) || !Number.isFinite(i.width) || !Number.isFinite(i.height) || i.width <= 0 || i.height <= 0 || n <= 0 || d <= 0)
-        return { shiftX: 0, shiftY: 0 };
-      const r = t.width / i.width, m = t.height / i.height, s = i.x + i.width / 2, a = i.y + i.height / 2, o = n / 2, h = d / 2;
+    }, V = (e, t, n) => {
+      const a = E(e, t), c = L(e), s = c ? {
+        left: c.left - n,
+        top: c.top - n,
+        right: c.right - n,
+        bottom: c.bottom - n
+      } : null, d = c ? {
+        x: c.right - c.left,
+        y: c.bottom - c.top
+      } : null;
       return {
-        shiftX: (s - o) * r,
-        shiftY: (a - h) * m
+        frame: a,
+        margin: c,
+        expectedExpand: n,
+        marginDeltaFromExpected: s,
+        marginAsymmetry: d
       };
-    }, T = async (e, t, i = !1, n = "auto") => {
-      if (!t.length) return;
-      const d = await g.executeCommand("getSceneLayout"), r = k(d);
-      if (!r) return;
-      const { shiftX: m, shiftY: s } = de(e, r), a = e.rawBounds, o = e.baseBounds, h = Number(e.imageWidth ?? 0), b = Number(e.imageHeight ?? 0);
-      if (i) {
-        const l = (f) => {
-          if (!E(f) || h <= 0 || b <= 0)
-            return null;
-          const v = f.x + f.width / 2 - h / 2, p = f.y + f.height / 2 - b / 2;
-          return {
-            dx: v,
-            dy: p,
-            byBounds: {
-              shiftX: v * (r.width / Math.max(1, f.width)),
-              shiftY: p * (r.height / Math.max(1, f.height))
-            },
-            byImage: {
-              shiftX: v * (r.width / Math.max(1, h)),
-              shiftY: p * (r.height / Math.max(1, b))
-            }
-          };
-        }, w = l(a), y = l(o);
-        console.info("[PooderEditor] detectDieline alignment", {
-          frame: r,
-          shiftX: m,
-          shiftY: s,
-          shiftNormalized: {
-            x: r.width > 0 ? m / r.width : 0,
-            y: r.height > 0 ? s / r.height : 0
-          },
-          snapshotCount: t.length,
-          baseBounds: o,
-          rawBounds: a,
-          imageWidth: h,
-          imageHeight: b,
-          shiftCandidates: {
-            raw: w,
-            base: y
-          },
-          shiftRawByBoundsX: w?.byBounds?.shiftX,
-          shiftRawByBoundsY: w?.byBounds?.shiftY,
-          shiftRawByImageX: w?.byImage?.shiftX,
-          shiftRawByImageY: w?.byImage?.shiftY,
-          shiftBaseByBoundsX: y?.byBounds?.shiftX,
-          shiftBaseByBoundsY: y?.byBounds?.shiftY,
-          shiftBaseByImageX: y?.byImage?.shiftX,
-          shiftBaseByImageY: y?.byImage?.shiftY
+    }, W = async (e, t, n) => {
+      if (!e.length) return null;
+      const a = await C({
+        multiplier: n?.multiplier ?? 2,
+        format: n?.format ?? "png",
+        imageIds: e
+      }), c = a?.url;
+      if (!c) return null;
+      try {
+        const s = await i.executeCommand("detectEdge", c, {
+          expand: n?.detect?.expand ?? 0,
+          smoothing: n?.detect?.smoothing ?? !0,
+          simplifyTolerance: n?.detect?.simplifyTolerance ?? 2,
+          threshold: n?.detect?.threshold,
+          debug: !1
         });
-      }
-      for (const l of t) {
-        const w = Math.max(
-          r.width / Math.max(1, l.sourceWidth),
-          r.height / Math.max(1, l.sourceHeight)
-        ), y = Math.max(0.05, l.objectScale / w), f = l.centerX - m, v = l.centerY - s, p = M(
-          (f - r.left) / Math.max(1, r.width)
-        ), x = M(
-          (v - r.top) / Math.max(1, r.height)
-        );
-        i && console.info("[PooderEditor] detectDieline alignment item", {
-          id: l.id,
-          target: n,
-          frame: r,
-          sourceSize: {
-            width: l.sourceWidth,
-            height: l.sourceHeight
-          },
-          objectScale: l.objectScale,
-          coverScale: w,
-          targetScale: y,
-          centerBefore: { x: l.centerX, y: l.centerY },
-          centerAfter: { x: f, y: v },
-          normalizedAfter: { left: p, top: x }
-        }), await g.executeCommand(
-          "updateImage",
-          l.id,
-          {
-            scale: y,
-            left: p,
-            top: x
-          },
-          {
-            target: n
-          }
-        );
-      }
-    }, me = async (e, t, i, n, d, r = !1, m = "auto", s = "offset") => {
-      if (!d.length || !Number.isFinite(e) || !Number.isFinite(t) || !Number.isFinite(i) || !Number.isFinite(n) || i <= 0 || n <= 0)
-        return;
-      const a = await g.executeCommand("getSceneLayout"), o = k(a);
-      if (!o) return;
-      const h = e * o.width / i, b = t * o.height / n;
-      r && console.info("[PooderEditor] detectDieline direct compensation", {
-        label: s,
-        target: m,
-        sourceWidth: i,
-        sourceHeight: n,
-        offsetX: e,
-        offsetY: t,
-        frame: o,
-        shiftX: h,
-        shiftY: b,
-        shiftNormalized: {
-          x: o.width > 0 ? h / o.width : 0,
-          y: o.height > 0 ? b / o.height : 0
-        },
-        snapshotCount: d.length
-      });
-      for (const l of d) {
-        const w = l.centerX - h, y = l.centerY - b, f = M(
-          (w - o.left) / Math.max(1, o.width)
-        ), v = M(
-          (y - o.top) / Math.max(1, o.height)
-        );
-        r && console.info("[PooderEditor] detectDieline direct compensation item", {
-          label: s,
-          id: l.id,
-          centerBefore: { x: l.centerX, y: l.centerY },
-          centerAfter: { x: w, y },
-          normalizedAfter: { left: f, top: v }
-        }), await g.executeCommand(
-          "updateImage",
-          l.id,
-          {
-            left: f,
-            top: v
-          },
-          {
-            target: m
-          }
-        );
+        return s ? V(
+          s,
+          a,
+          t
+        ) : null;
+      } finally {
+        URL.revokeObjectURL(c);
       }
     };
-    N({
-      importConfig: _,
-      exportConfig: Y,
-      getImages: X,
-      generateCutImage: Q,
-      addImage: U,
-      upsertImage: O,
-      updateImage: Z,
-      clearImages: ee,
-      exportUserCroppedImage: B,
-      focusImage: te,
+    l({
+      importConfig: p,
+      exportConfig: w,
+      getImages: y,
+      generateCutImage: A,
+      addImage: b,
+      upsertImage: _,
+      updateImage: U,
+      clearImages: z,
+      exportUserCroppedImage: C,
+      focusImage: M,
       detectDieline: async (e) => {
-        const t = u.getService("CanvasService"), i = D(t), n = await g.executeCommand("detectEdge", e, {
+        const t = await i.executeCommand("detectEdge", e, {
           expand: 10,
           // 安全距离（像素）
           smoothing: !0,
@@ -410,226 +177,121 @@ const Ee = /* @__PURE__ */ J({
           simplifyTolerance: 2
           // 平滑度容差，值越大越圆润
         });
-        if (n) {
-          P(n);
-          const r = (c.get("image.items") || []).find((m) => m.url === e);
-          if (r?.id) {
-            const m = i.filter(
-              (s) => s.id === r.id
-            );
-            await T(n, m);
-          }
-          return n.pathData;
-        }
-        return null;
+        return t ? (x(t), t.pathData) : null;
       },
       detectDielineFromFrame: async (e) => {
-        const t = e?.detect?.debug === !0, i = e?.inspect?.includeCroppedImage === !0, n = e?.inspect?.includeDiagnostics === !0, d = u.getService("CanvasService"), r = D(d);
-        let m = null;
-        if (t)
-          try {
-            m = await g.executeCommand("getSceneLayout");
-          } catch (o) {
-            console.warn("[PooderEditor] detectDielineFromFrame layout(before) failed", {
-              error: o
-            });
-          }
-        const s = await B({
+        const t = e?.detect?.debug === !0, n = e?.inspect?.includeCroppedImage === !0, a = e?.inspect?.includeDiagnostics === !0, c = Math.max(0, Number(e?.detect?.expand ?? 0)), s = await C({
           multiplier: e?.export?.multiplier ?? 2,
           format: e?.export?.format ?? "png",
           imageIds: e?.export?.imageIds
-        }), a = s?.url;
-        if (!a) return null;
+        }), d = s?.url;
+        if (!d)
+          return console.warn("[PooderEditor] detectDielineFromFrame no source image"), null;
         try {
-          t && console.info("[PooderEditor] detectDielineFromFrame sourceImage", {
-            width: s.width,
-            height: s.height,
-            format: s.format,
-            multiplier: s.multiplier,
-            imageCount: s.imageIds.length,
-            size: {
-              actualWidthMm: c.get("size.actualWidthMm"),
-              actualHeightMm: c.get("size.actualHeightMm"),
-              viewPadding: c.get("size.viewPadding")
-            },
-            layoutBeforeCommit: W(m),
-            imageSnapshots: r.map((p) => ({
-              id: p.id,
-              centerX: p.centerX,
-              centerY: p.centerY,
-              objectScale: p.objectScale,
-              sourceWidth: p.sourceWidth,
-              sourceHeight: p.sourceHeight
-            }))
-          });
-          const o = await g.executeCommand("detectEdge", a, {
+          const g = await i.executeCommand("detectEdge", d, {
             expand: e?.detect?.expand ?? 0,
             smoothing: e?.detect?.smoothing ?? !0,
             simplifyTolerance: e?.detect?.simplifyTolerance ?? 2,
             threshold: e?.detect?.threshold,
             debug: t
           });
-          if (!o) return null;
-          const h = ce(o, s);
-          if (t && console.info(
-            "[PooderEditor] detectDielineFromFrame diagnostics",
-            h
-          ), e?.commit === !1)
+          if (!g)
+            return console.warn(
+              "[PooderEditor] detectDielineFromFrame detectEdge returned null"
+            ), null;
+          const I = E(g, s);
+          if (e?.commit === !1)
             return {
-              ...o,
-              ...i ? { sourceImage: s } : {},
-              ...n ? { diagnostics: h } : {}
+              ...g,
+              ...n ? { sourceImage: s } : {},
+              ...a ? { diagnostics: I } : {}
             };
-          P(o);
-          const b = ne(o, t), l = await ae(t);
-          let w = [];
-          const y = A(r, s.imageIds);
-          await T(
-            o,
-            y,
-            t,
-            l
-          );
-          const f = await B({
+          x(g, s);
+          const X = {
             multiplier: e?.export?.multiplier ?? 2,
             format: e?.export?.format ?? "png",
-            imageIds: s.imageIds
-          }), v = f?.url;
-          if (v)
-            try {
-              const p = await g.executeCommand("detectEdge", v, {
-                expand: e?.detect?.expand ?? 0,
-                smoothing: e?.detect?.smoothing ?? !0,
-                simplifyTolerance: e?.detect?.simplifyTolerance ?? 2,
-                threshold: e?.detect?.threshold,
-                debug: t
-              });
-              if (p) {
-                const x = re(
-                  p,
-                  f.width,
-                  f.height
-                );
-                if (t && console.info("[PooderEditor] detectDieline verify pass", {
-                  sourceWidth: f.width,
-                  sourceHeight: f.height,
-                  offset: x,
-                  imageIds: s.imageIds
-                }), x && (Math.abs(x.offsetX) > 0.01 || Math.abs(x.offsetY) > 0.01)) {
-                  const le = A(
-                    D(d),
-                    s.imageIds
-                  );
-                  await me(
-                    x.offsetX,
-                    x.offsetY,
-                    f.width,
-                    f.height,
-                    le,
-                    t,
-                    l,
-                    "verify-pass"
-                  );
-                }
-              }
-            } finally {
-              URL.revokeObjectURL(v);
+            detect: {
+              expand: e?.detect?.expand ?? 0,
+              smoothing: e?.detect?.smoothing ?? !0,
+              simplifyTolerance: e?.detect?.simplifyTolerance ?? 2,
+              threshold: e?.detect?.threshold
             }
-          if (l === "config" && s.imageIds.length > 0 && (w = await se(
+          };
+          let S = await W(
             s.imageIds,
-            {
-              multiplier: e?.export?.multiplier ?? 2,
-              format: e?.export?.format ?? "png"
-            },
-            t
-          )), t) {
-            let p = null;
-            try {
-              p = await g.executeCommand("getSceneLayout");
-            } catch (x) {
-              console.warn("[PooderEditor] detectDielineFromFrame layout(after) failed", {
-                error: x
-              });
-            }
-            console.info("[PooderEditor] detectDielineFromFrame commit result", {
-              mappedSize: b,
-              imageUpdateTarget: l,
-              committedSync: w,
-              sizeAfter: {
-                actualWidthMm: c.get("size.actualWidthMm"),
-                actualHeightMm: c.get("size.actualHeightMm"),
-                viewPadding: c.get("size.viewPadding")
-              },
-              layoutAfterCommit: W(p)
-            });
-          }
-          return {
-            ...o,
-            ...i ? { sourceImage: s } : {},
-            ...n ? { diagnostics: h } : {}
+            c,
+            X
+          );
+          return S ? console.info(
+            "[PooderEditor] detectDielineFromFrame post-commit diagnostics",
+            S
+          ) : s.imageIds.length > 0 && console.warn(
+            "[PooderEditor] detectDielineFromFrame post-commit detectEdge returned null"
+          ), {
+            ...g,
+            ...n ? { sourceImage: s } : {},
+            ...a ? { diagnostics: I, postCommitDiagnostics: S } : {}
           };
         } finally {
-          a && !i && URL.revokeObjectURL(a);
+          d && !n && URL.revokeObjectURL(d);
         }
       },
       uploadAndDetectEdge: async (e, t) => {
-        const i = u.getService("CanvasService"), n = await U(e), d = D(i).filter(
-          (m) => m.id === n
-        ), r = await g.executeCommand("detectEdge", e, {
+        const n = await b(e), a = await i.executeCommand("detectEdge", e, {
           expand: t?.expand ?? 10,
           smoothing: t?.smoothing ?? !0,
           simplifyTolerance: t?.simplifyTolerance ?? 2
         });
-        return r ? (P(r), await T(r, d), { imageId: n, url: e, pathData: r.pathData }) : null;
+        return a ? (x(a), { imageId: n, url: e, pathData: a.pathData }) : null;
       },
-      activateTool: async (e) => await S.switchTool(e),
-      deactivateTool: async () => await S.deactivate(),
-      on: (e, t) => u.eventBus.on(e, t),
-      off: (e, t) => u.eventBus.off(e, t),
-      emit: (e, t) => u.eventBus.emit(e, t),
-      executeCommand: (e, ...t) => g.executeCommand(e, ...t),
-      getConfig: (e) => c.get(e),
-      updateConfig: (e, t) => c.update(e, t),
+      activateTool: async (e) => await u.switchTool(e),
+      deactivateTool: async () => await u.deactivate(),
+      on: (e, t) => r.eventBus.on(e, t),
+      off: (e, t) => r.eventBus.off(e, t),
+      emit: (e, t) => r.eventBus.emit(e, t),
+      executeCommand: (e, ...t) => i.executeCommand(e, ...t),
+      getConfig: (e) => o.get(e),
+      updateConfig: (e, t) => o.update(e, t),
       services: {
-        workbench: S,
-        command: g,
-        config: c
+        workbench: u,
+        command: i,
+        config: o
       }
     });
-    const ue = (e) => {
-      const t = new ve(e, {
-        eventBus: u.eventBus
+    const Y = (e) => {
+      const t = new K(e, {
+        eventBus: r.eventBus
       });
-      u.registerService(t, "CanvasService"), u.registerService(new be(), j), u.registerService(
-        new xe(),
-        V
+      r.registerService(t, "CanvasService"), r.registerService(new Q(), F), r.registerService(
+        new Z(),
+        B
       ), [
-        new Se(),
-        new Ce(),
-        new Ne(),
+        new ee(),
+        new te(),
+        new ne(),
         // new FilmTool(),
-        new Ie(),
-        new Fe(),
-        new Be(),
-        new Me(),
-        new De()
-      ].forEach((n) => {
-        u.extensionManager.register(n);
+        new re(),
+        new ie(),
+        new oe(),
+        new ae(),
+        new ce()
+      ].forEach((a) => {
+        r.extensionManager.register(a);
       });
-    }, ge = (e, t) => {
-      const i = u.getService("CanvasService");
-      i && i.resize(e, t);
+    }, H = (e, t) => {
+      const n = r.getService("CanvasService");
+      n && n.resize(e, t);
     };
-    return G(() => {
-      z.dispose(), u.extensionManager.destroy(), u.unregisterService(V), u.unregisterService(j), u.unregisterService("CanvasService");
-    }), (e, t) => (q(), $("div", _e, [
-      we(ze, {
-        onCanvasReady: ue,
-        onResize: ge
+    return N(() => {
+      v.dispose(), r.extensionManager.destroy(), r.unregisterService(B), r.unregisterService(F), r.unregisterService("CanvasService");
+    }), (e, t) => (k(), P("div", me, [
+      G(de, {
+        onCanvasReady: Y,
+        onResize: H
       })
     ]));
   }
-}), We = /* @__PURE__ */ K(Pe, [["__scopeId", "data-v-7e138562"]]);
+}), we = /* @__PURE__ */ R(ue, [["__scopeId", "data-v-77a7de32"]]);
 export {
-  We as PooderEditor
+  we as PooderEditor
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(v,w){typeof exports=="object"&&typeof module<"u"?w(exports,require("vue"),require("@pooder/core"),require("@pooder/kit")):typeof define=="function"&&define.amd?define(["exports","vue","@pooder/core","@pooder/kit"],w):(v=typeof globalThis<"u"?globalThis:v||self,w(v.PooderVue={},v.Vue,v.PooderCore,v.PooderKit))})(this,(function(v,w,P,S){"use strict";const $=w.defineComponent({__name:"CanvasArea",emits:["canvas-ready","resize"],setup(y,{emit:M}){const F=M,u=w.ref(null),l=w.ref(null);let c=null;return w.onMounted(()=>{if(u.value&&l.value){const{clientWidth:B,clientHeight:D}=u.value;l.value.width=B,l.value.height=D,F("canvas-ready",l.value),c=new ResizeObserver(X=>{for(const O of X){const{width:T,height:R}=O.contentRect;F("resize",T,R)}}),c.observe(u.value)}}),w.onUnmounted(()=>{c&&c.disconnect()}),(B,D)=>(w.openBlock(),w.createElementBlock("div",{ref_key:"container",ref:u,class:"pooder-canvas-area"},[w.createElementVNode("canvas",{ref_key:"canvas",ref:l},null,512)],512))}}),W=(y,M)=>{const F=y.__vccOpts||y;for(const[u,l]of M)F[u]=l;return F},Q=W($,[["__scopeId","data-v-9668bbd7"]]),Z={class:"pooder-editor"},L="SceneLayoutService",H="SceneVisibilityService",ee="image.user",te="pooder.kit.image",ie=W(w.defineComponent({__name:"PooderEditor",emits:["image-change"],setup(y,{expose:M,emit:F}){const u=new P.Pooder;w.provide("pooder",u);const l=u.getService("CommandService"),c=u.getService("ConfigurationService"),B=u.getService("WorkbenchService"),D=F,X=c.onAnyChange(e=>{e.key==="image.items"&&D("image-change",e.value)}),O=e=>{c.import(e)},T=()=>c.export(),R=()=>c.get("image.items",[]),ne=async e=>{try{const t=await l.executeCommand("exportCutImage",e);return t||console.warn("[PooderEditor] generateCutImage returned null",{options:e,imageCount:(c.get("image.items")||[]).length,hasCanvasService:!!u.getService("CanvasService")}),t}catch(t){throw console.error("[PooderEditor] generateCutImage failed",t),t}},k=async(e,t)=>await l.executeCommand("upsertImage",e,{id:t?.id,mode:t?.mode,addOptions:t?.addOptions,fitOnAdd:t?.fitOnAdd}),V=async(e,t)=>(await k(e,{mode:"add",addOptions:t,fitOnAdd:!0})).id,oe=async(e,t)=>await l.executeCommand("updateImage",e,t),re=async()=>await l.executeCommand("clearImages"),E=async e=>await l.executeCommand("exportUserCroppedImage",e),ae=async(e,t)=>await l.executeCommand("focusImage",e,t),z=e=>Math.max(-1,Math.min(2,e)),q=e=>{const t=e?.cutRect;if(!t)return null;const i=Number(t.width),n=Number(t.height),d=Number(t.left),o=Number(t.top);return!Number.isFinite(i)||!Number.isFinite(n)||!Number.isFinite(d)||!Number.isFinite(o)||i<=0||n<=0?null:{left:d,top:o,width:i,height:n}},_=e=>{if(!e)return[];const t=e.canvas.getObjects(),i=[];for(const n of t){if(n?.data?.layerId!==ee)continue;const d=n?.data?.id;if(typeof d!="string")continue;const o=n.getCenterPoint?n.getCenterPoint():null,m=Number(o?.x??n.left),s=Number(o?.y??n.top),a=Number(n.scaleX),r=Number(n.width),h=Number(n.height);!Number.isFinite(m)||!Number.isFinite(s)||!Number.isFinite(a)||!Number.isFinite(r)||!Number.isFinite(h)||r<=0||h<=0||i.push({id:d,centerX:m,centerY:s,objectScale:a,sourceWidth:r,sourceHeight:h})}return i},J=(e,t)=>{if(!t||t.length===0)return e;const i=new Set(t);return e.filter(n=>i.has(n.id))},U=e=>{c.update("dieline.shape","custom"),c.update("dieline.pathData",e.pathData),c.update("dieline.features",[]),c.update("size.cutMode","trim"),c.update("size.cutMarginMm",0)},Y=e=>!!e&&Number.isFinite(e.x)&&Number.isFinite(e.y)&&Number.isFinite(e.width)&&Number.isFinite(e.height)&&e.width>0&&e.height>0,se=e=>{const t=e.baseBounds||e.rawBounds,i=e.rawBounds||e.baseBounds;if(!Y(t)||!Y(i))return null;const n=Number(c.get("size.actualWidthMm",0)),d=Number(c.get("size.actualHeightMm",0)),o=Math.max(n,d),m=Math.max(t.width,t.height),s=Math.max(i.width,i.height);if(!Number.isFinite(o)||!Number.isFinite(m)||!Number.isFinite(s)||o<=0||m<=0||s<=0)return null;const a=o/s,r=i.width*a,h=i.height*a;return!Number.isFinite(r)||!Number.isFinite(h)||r<=0||h<=0?null:{widthMm:r,heightMm:h,scale:a,sizeLongEdgeMm:o,baseLongEdge:m,appliedBounds:i,baseBounds:t}},ce=(e,t=!1)=>{const i=se(e);return i?(c.update("size.actualWidthMm",i.widthMm),c.update("size.actualHeightMm",i.heightMm),c.update("size.aspectRatio",i.widthMm/Math.max(.001,i.heightMm)),t&&console.info("[PooderEditor] detectDielineFromFrame size mapping",{mappedSize:i,rawBounds:e.rawBounds,baseBounds:e.baseBounds}),i):null},A=e=>{if(!e)return null;const t=Number(e.left),i=Number(e.top),n=Number(e.width),d=Number(e.height),o=Number(e.centerX),m=Number(e.centerY);return!Number.isFinite(t)||!Number.isFinite(i)||!Number.isFinite(n)||!Number.isFinite(d)||!Number.isFinite(o)||!Number.isFinite(m)?null:{left:t,top:i,width:n,height:d,centerX:o,centerY:m}},G=e=>{if(!e)return null;const t=Number(e.scale),i=Number(e.canvasWidth),n=Number(e.canvasHeight);return!Number.isFinite(t)||!Number.isFinite(i)||!Number.isFinite(n)?null:{scale:t,canvasWidth:i,canvasHeight:n,viewPadding:c.get("size.viewPadding"),trimRect:A(e.trimRect),cutRect:A(e.cutRect),bleedRect:A(e.bleedRect)}},de=(e,t,i)=>{const n=e.rawBounds||e.baseBounds;return!Y(n)||!Number.isFinite(t)||!Number.isFinite(i)||t<=0||i<=0?null:{bounds:n,offsetX:n.x+n.width/2-t/2,offsetY:n.y+n.height/2-i/2}},K=e=>(e||[]).map(t=>({id:String(t?.id??""),left:Number(t?.left??0),top:Number(t?.top??0),scale:Number(t?.scale??1),angle:Number(t?.angle??0),url:typeof t?.url=="string"?t.url:"",sourceUrl:typeof t?.sourceUrl=="string"?t.sourceUrl:"",committedUrl:typeof t?.committedUrl=="string"?t.committedUrl:""})),me=async()=>{try{const e=await l.executeCommand("getWorkingImages")||[],t=c.get("image.items",[])||[],i=K(e),n=K(t);return JSON.stringify(i)!==JSON.stringify(n)}catch{return!1}},ue=async(e=!1)=>{const t=typeof B?.activeToolId=="string"?String(B.activeToolId):null;if(t!==te)return e&&console.info("[PooderEditor] detectDielineFromFrame image update target",{activeToolId:t,target:"config",reason:"image-tool-inactive"}),"config";const i=await me(),n=i?"working":"config";return e&&console.info("[PooderEditor] detectDielineFromFrame image update target",{activeToolId:t,workingDirty:i,target:n,reason:i?"working-session-dirty-follow-working":"working-session-clean-update-config"}),n},le=async(e,t,i=!1)=>{const n=[...new Set(e)].filter(a=>typeof a=="string"&&a.length>0);if(!n.length)return[];const d=new Map;for(const a of n){const r=await E({multiplier:t?.multiplier??2,format:t?.format??"png",imageIds:[a]});r?.url&&d.set(a,{url:r.url,width:r.width,height:r.height})}if(!d.size)return[];const m=(Array.isArray(c.get("image.items",[]))?c.get("image.items",[]):[]).map(a=>{const r=typeof a?.id=="string"?a.id:"",h=d.get(r);if(!h)return a;const N=typeof a?.sourceUrl=="string"&&a.sourceUrl.length>0?a.sourceUrl:typeof a?.url=="string"?a.url:"";return{...a,url:h.url,sourceUrl:N,committedUrl:h.url}});c.update("image.items",m);const s=n.map(a=>{const r=d.get(a);return r?{id:a,width:r.width,height:r.height}:null}).filter(a=>!!a);return i&&console.info("[PooderEditor] detectDieline committed image sync",{imageIds:n,synced:s,count:s.length}),s},ge=(e,t)=>{const i=e.rawBounds||e.baseBounds||null;if(!i)return{sourceWidth:t.width,sourceHeight:t.height,detectedBounds:null,centerOffsetX:0,centerOffsetY:0,coverageX:0,coverageY:0};const n=t.width/2,d=t.height/2,o=i.x+i.width/2,m=i.y+i.height/2;return{sourceWidth:t.width,sourceHeight:t.height,detectedBounds:i,centerOffsetX:o-n,centerOffsetY:m-d,coverageX:t.width>0?i.width/t.width:0,coverageY:t.height>0?i.height/t.height:0}},he=(e,t)=>{const i=e.rawBounds||e.baseBounds,n=Number(e.imageWidth??0),d=Number(e.imageHeight??0);if(!i||!Number.isFinite(i.x)||!Number.isFinite(i.y)||!Number.isFinite(i.width)||!Number.isFinite(i.height)||i.width<=0||i.height<=0||n<=0||d<=0)return{shiftX:0,shiftY:0};const o=t.width/i.width,m=t.height/i.height,s=i.x+i.width/2,a=i.y+i.height/2,r=n/2,h=d/2;return{shiftX:(s-r)*o,shiftY:(a-h)*m}},j=async(e,t,i=!1,n="auto")=>{if(!t.length)return;const d=await l.executeCommand("getSceneLayout"),o=q(d);if(!o)return;const{shiftX:m,shiftY:s}=he(e,o),a=e.rawBounds,r=e.baseBounds,h=Number(e.imageWidth??0),N=Number(e.imageHeight??0);if(i){const g=f=>{if(!Y(f)||h<=0||N<=0)return null;const x=f.x+f.width/2-h/2,p=f.y+f.height/2-N/2;return{dx:x,dy:p,byBounds:{shiftX:x*(o.width/Math.max(1,f.width)),shiftY:p*(o.height/Math.max(1,f.height))},byImage:{shiftX:x*(o.width/Math.max(1,h)),shiftY:p*(o.height/Math.max(1,N))}}},b=g(a),C=g(r);console.info("[PooderEditor] detectDieline alignment",{frame:o,shiftX:m,shiftY:s,shiftNormalized:{x:o.width>0?m/o.width:0,y:o.height>0?s/o.height:0},snapshotCount:t.length,baseBounds:r,rawBounds:a,imageWidth:h,imageHeight:N,shiftCandidates:{raw:b,base:C},shiftRawByBoundsX:b?.byBounds?.shiftX,shiftRawByBoundsY:b?.byBounds?.shiftY,shiftRawByImageX:b?.byImage?.shiftX,shiftRawByImageY:b?.byImage?.shiftY,shiftBaseByBoundsX:C?.byBounds?.shiftX,shiftBaseByBoundsY:C?.byBounds?.shiftY,shiftBaseByImageX:C?.byImage?.shiftX,shiftBaseByImageY:C?.byImage?.shiftY})}for(const g of t){const b=Math.max(o.width/Math.max(1,g.sourceWidth),o.height/Math.max(1,g.sourceHeight)),C=Math.max(.05,g.objectScale/b),f=g.centerX-m,x=g.centerY-s,p=z((f-o.left)/Math.max(1,o.width)),I=z((x-o.top)/Math.max(1,o.height));i&&console.info("[PooderEditor] detectDieline alignment item",{id:g.id,target:n,frame:o,sourceSize:{width:g.sourceWidth,height:g.sourceHeight},objectScale:g.objectScale,coverScale:b,targetScale:C,centerBefore:{x:g.centerX,y:g.centerY},centerAfter:{x:f,y:x},normalizedAfter:{left:p,top:I}}),await l.executeCommand("updateImage",g.id,{scale:C,left:p,top:I},{target:n})}},fe=async(e,t,i,n,d,o=!1,m="auto",s="offset")=>{if(!d.length||!Number.isFinite(e)||!Number.isFinite(t)||!Number.isFinite(i)||!Number.isFinite(n)||i<=0||n<=0)return;const a=await l.executeCommand("getSceneLayout"),r=q(a);if(!r)return;const h=e*r.width/i,N=t*r.height/n;o&&console.info("[PooderEditor] detectDieline direct compensation",{label:s,target:m,sourceWidth:i,sourceHeight:n,offsetX:e,offsetY:t,frame:r,shiftX:h,shiftY:N,shiftNormalized:{x:r.width>0?h/r.width:0,y:r.height>0?N/r.height:0},snapshotCount:d.length});for(const g of d){const b=g.centerX-h,C=g.centerY-N,f=z((b-r.left)/Math.max(1,r.width)),x=z((C-r.top)/Math.max(1,r.height));o&&console.info("[PooderEditor] detectDieline direct compensation item",{label:s,id:g.id,centerBefore:{x:g.centerX,y:g.centerY},centerAfter:{x:b,y:C},normalizedAfter:{left:f,top:x}}),await l.executeCommand("updateImage",g.id,{left:f,top:x},{target:m})}};M({importConfig:O,exportConfig:T,getImages:R,generateCutImage:ne,addImage:V,upsertImage:k,updateImage:oe,clearImages:re,exportUserCroppedImage:E,focusImage:ae,detectDieline:async e=>{const t=u.getService("CanvasService"),i=_(t),n=await l.executeCommand("detectEdge",e,{expand:10,smoothing:!0,simplifyTolerance:2});if(n){U(n);const o=(c.get("image.items")||[]).find(m=>m.url===e);if(o?.id){const m=i.filter(s=>s.id===o.id);await j(n,m)}return n.pathData}return null},detectDielineFromFrame:async e=>{const t=e?.detect?.debug===!0,i=e?.inspect?.includeCroppedImage===!0,n=e?.inspect?.includeDiagnostics===!0,d=u.getService("CanvasService"),o=_(d);let m=null;if(t)try{m=await l.executeCommand("getSceneLayout")}catch(r){console.warn("[PooderEditor] detectDielineFromFrame layout(before) failed",{error:r})}const s=await E({multiplier:e?.export?.multiplier??2,format:e?.export?.format??"png",imageIds:e?.export?.imageIds}),a=s?.url;if(!a)return null;try{t&&console.info("[PooderEditor] detectDielineFromFrame sourceImage",{width:s.width,height:s.height,format:s.format,multiplier:s.multiplier,imageCount:s.imageIds.length,size:{actualWidthMm:c.get("size.actualWidthMm"),actualHeightMm:c.get("size.actualHeightMm"),viewPadding:c.get("size.viewPadding")},layoutBeforeCommit:G(m),imageSnapshots:o.map(p=>({id:p.id,centerX:p.centerX,centerY:p.centerY,objectScale:p.objectScale,sourceWidth:p.sourceWidth,sourceHeight:p.sourceHeight}))});const r=await l.executeCommand("detectEdge",a,{expand:e?.detect?.expand??0,smoothing:e?.detect?.smoothing??!0,simplifyTolerance:e?.detect?.simplifyTolerance??2,threshold:e?.detect?.threshold,debug:t});if(!r)return null;const h=ge(r,s);if(t&&console.info("[PooderEditor] detectDielineFromFrame diagnostics",h),e?.commit===!1)return{...r,...i?{sourceImage:s}:{},...n?{diagnostics:h}:{}};U(r);const N=ce(r,t),g=await ue(t);let b=[];const C=J(o,s.imageIds);await j(r,C,t,g);const f=await E({multiplier:e?.export?.multiplier??2,format:e?.export?.format??"png",imageIds:s.imageIds}),x=f?.url;if(x)try{const p=await l.executeCommand("detectEdge",x,{expand:e?.detect?.expand??0,smoothing:e?.detect?.smoothing??!0,simplifyTolerance:e?.detect?.simplifyTolerance??2,threshold:e?.detect?.threshold,debug:t});if(p){const I=de(p,f.width,f.height);if(t&&console.info("[PooderEditor] detectDieline verify pass",{sourceWidth:f.width,sourceHeight:f.height,offset:I,imageIds:s.imageIds}),I&&(Math.abs(I.offsetX)>.01||Math.abs(I.offsetY)>.01)){const ye=J(_(d),s.imageIds);await fe(I.offsetX,I.offsetY,f.width,f.height,ye,t,g,"verify-pass")}}}finally{URL.revokeObjectURL(x)}if(g==="config"&&s.imageIds.length>0&&(b=await le(s.imageIds,{multiplier:e?.export?.multiplier??2,format:e?.export?.format??"png"},t)),t){let p=null;try{p=await l.executeCommand("getSceneLayout")}catch(I){console.warn("[PooderEditor] detectDielineFromFrame layout(after) failed",{error:I})}console.info("[PooderEditor] detectDielineFromFrame commit result",{mappedSize:N,imageUpdateTarget:g,committedSync:b,sizeAfter:{actualWidthMm:c.get("size.actualWidthMm"),actualHeightMm:c.get("size.actualHeightMm"),viewPadding:c.get("size.viewPadding")},layoutAfterCommit:G(p)})}return{...r,...i?{sourceImage:s}:{},...n?{diagnostics:h}:{}}}finally{a&&!i&&URL.revokeObjectURL(a)}},uploadAndDetectEdge:async(e,t)=>{const i=u.getService("CanvasService"),n=await V(e),d=_(i).filter(m=>m.id===n),o=await l.executeCommand("detectEdge",e,{expand:t?.expand??10,smoothing:t?.smoothing??!0,simplifyTolerance:t?.simplifyTolerance??2});return o?(U(o),await j(o,d),{imageId:n,url:e,pathData:o.pathData}):null},activateTool:async e=>await B.switchTool(e),deactivateTool:async()=>await B.deactivate(),on:(e,t)=>u.eventBus.on(e,t),off:(e,t)=>u.eventBus.off(e,t),emit:(e,t)=>u.eventBus.emit(e,t),executeCommand:(e,...t)=>l.executeCommand(e,...t),getConfig:e=>c.get(e),updateConfig:(e,t)=>c.update(e,t),services:{workbench:B,command:l,config:c}});const pe=e=>{const t=new S.CanvasService(e,{eventBus:u.eventBus});u.registerService(t,"CanvasService"),u.registerService(new S.SceneLayoutService,L),u.registerService(new S.SceneVisibilityService,H),[new S.BackgroundTool,new S.SizeTool,new S.ImageTool,new S.WhiteInkTool,new S.MirrorTool,new S.DielineTool,new S.RulerTool,new S.FeatureTool].forEach(n=>{u.extensionManager.register(n)})},we=(e,t)=>{const i=u.getService("CanvasService");i&&i.resize(e,t)};return w.onUnmounted(()=>{X.dispose(),u.extensionManager.destroy(),u.unregisterService(H),u.unregisterService(L),u.unregisterService("CanvasService")}),(e,t)=>(w.openBlock(),w.createElementBlock("div",Z,[w.createVNode(Q,{onCanvasReady:pe,onResize:we})]))}}),[["__scopeId","data-v-7e138562"]]);v.PooderEditor=ie,Object.keys(P).forEach(y=>{y!=="default"&&!Object.prototype.hasOwnProperty.call(v,y)&&Object.defineProperty(v,y,{enumerable:!0,get:()=>P[y]})}),Object.keys(S).forEach(y=>{y!=="default"&&!Object.prototype.hasOwnProperty.call(v,y)&&Object.defineProperty(v,y,{enumerable:!0,get:()=>S[y]})}),Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})}));
+(function(l,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("vue"),require("@pooder/core"),require("@pooder/kit")):typeof define=="function"&&define.amd?define(["exports","vue","@pooder/core","@pooder/kit"],s):(l=typeof globalThis<"u"?globalThis:l||self,s(l.PooderVue={},l.Vue,l.PooderCore,l.PooderKit))})(this,(function(l,s,w,m){"use strict";const U=s.defineComponent({__name:"CanvasArea",emits:["canvas-ready","resize"],setup(d,{emit:p}){const h=p,r=s.ref(null),o=s.ref(null);let i=null;return s.onMounted(()=>{if(r.value&&o.value){const{clientWidth:f,clientHeight:y}=r.value;o.value.width=f,o.value.height=y,h("canvas-ready",o.value),i=new ResizeObserver(C=>{for(const S of C){const{width:b,height:x}=S.contentRect;h("resize",b,x)}}),i.observe(r.value)}}),s.onUnmounted(()=>{i&&i.disconnect()}),(f,y)=>(s.openBlock(),s.createElementBlock("div",{ref_key:"container",ref:r,class:"pooder-canvas-area"},[s.createElementVNode("canvas",{ref_key:"canvas",ref:o},null,512)],512))}}),O=(d,p)=>{const h=d.__vccOpts||d;for(const[r,o]of p)h[r]=o;return h},j=O(U,[["__scopeId","data-v-9668bbd7"]]),A={class:"pooder-editor"},I="SceneLayoutService",T="SceneVisibilityService",M=O(s.defineComponent({__name:"PooderEditor",emits:["image-change"],setup(d,{expose:p,emit:h}){const r=new w.Pooder;s.provide("pooder",r);const o=r.getService("CommandService"),i=r.getService("ConfigurationService"),f=r.getService("WorkbenchService"),y=h,C=i.onAnyChange(e=>{e.key==="image.items"&&y("image-change",e.value)}),S=e=>{i.import(e)},b=()=>i.export(),x=()=>i.get("image.items",[]),V=async e=>{try{const t=await o.executeCommand("exportCutImage",e);return t||console.warn("[PooderEditor] generateCutImage returned null",{options:e,imageCount:(i.get("image.items")||[]).length,hasCanvasService:!!r.getService("CanvasService")}),t}catch(t){throw console.error("[PooderEditor] generateCutImage failed",t),t}},P=async(e,t)=>await o.executeCommand("upsertImage",e,{id:t?.id,mode:t?.mode,addOptions:t?.addOptions,fitOnAdd:t?.fitOnAdd}),F=async(e,t)=>(await P(e,{mode:"add",addOptions:t,fitOnAdd:!0})).id,z=async(e,t)=>await o.executeCommand("updateImage",e,t),L=async()=>await o.executeCommand("clearImages"),_=async e=>await o.executeCommand("exportUserCroppedImage",e),W=async(e,t)=>await o.executeCommand("focusImage",e,t),D=(e,t)=>{i.update("dieline.shape","custom"),i.update("dieline.pathData",e.pathData);const n=Number(e.imageWidth??t?.width??0),c=Number(e.imageHeight??t?.height??0);i.update("dieline.customSourceWidthPx",Number.isFinite(n)&&n>0?n:void 0),i.update("dieline.customSourceHeightPx",Number.isFinite(c)&&c>0?c:void 0),i.update("size.cutMode","trim"),i.update("size.cutMarginMm",0)},B=e=>!!e&&Number.isFinite(e.x)&&Number.isFinite(e.y)&&Number.isFinite(e.width)&&Number.isFinite(e.height)&&e.width>0&&e.height>0,N=(e,t)=>{const n=e.rawBounds||e.baseBounds||null;if(!n)return{sourceWidth:t.width,sourceHeight:t.height,detectedBounds:null,centerOffsetX:0,centerOffsetY:0,coverageX:0,coverageY:0};const c=t.width/2,a=t.height/2,u=n.x+n.width/2,g=n.y+n.height/2;return{sourceWidth:t.width,sourceHeight:t.height,detectedBounds:n,centerOffsetX:u-c,centerOffsetY:g-a,coverageX:t.width>0?n.width/t.width:0,coverageY:t.height>0?n.height/t.height:0}},Y=e=>{if(!B(e.rawBounds)||!B(e.baseBounds))return null;const t=e.rawBounds,n=e.baseBounds;return{left:n.x-t.x,top:n.y-t.y,right:t.x+t.width-(n.x+n.width),bottom:t.y+t.height-(n.y+n.height)}},H=(e,t,n)=>{const c=N(e,t),a=Y(e),u=a?{left:a.left-n,top:a.top-n,right:a.right-n,bottom:a.bottom-n}:null,g=a?{x:a.right-a.left,y:a.bottom-a.top}:null;return{frame:c,margin:a,expectedExpand:n,marginDeltaFromExpected:u,marginAsymmetry:g}},X=async(e,t,n)=>{if(!e.length)return null;const c=await _({multiplier:n?.multiplier??2,format:n?.format??"png",imageIds:e}),a=c?.url;if(!a)return null;try{const u=await o.executeCommand("detectEdge",a,{expand:n?.detect?.expand??0,smoothing:n?.detect?.smoothing??!0,simplifyTolerance:n?.detect?.simplifyTolerance??2,threshold:n?.detect?.threshold,debug:!1});return u?H(u,c,t):null}finally{URL.revokeObjectURL(a)}};p({importConfig:S,exportConfig:b,getImages:x,generateCutImage:V,addImage:F,upsertImage:P,updateImage:z,clearImages:L,exportUserCroppedImage:_,focusImage:W,detectDieline:async e=>{const t=await o.executeCommand("detectEdge",e,{expand:10,smoothing:!0,simplifyTolerance:2});return t?(D(t),t.pathData):null},detectDielineFromFrame:async e=>{const t=e?.detect?.debug===!0,n=e?.inspect?.includeCroppedImage===!0,c=e?.inspect?.includeDiagnostics===!0,a=Math.max(0,Number(e?.detect?.expand??0)),u=await _({multiplier:e?.export?.multiplier??2,format:e?.export?.format??"png",imageIds:e?.export?.imageIds}),g=u?.url;if(!g)return console.warn("[PooderEditor] detectDielineFromFrame no source image"),null;try{const v=await o.executeCommand("detectEdge",g,{expand:e?.detect?.expand??0,smoothing:e?.detect?.smoothing??!0,simplifyTolerance:e?.detect?.simplifyTolerance??2,threshold:e?.detect?.threshold,debug:t});if(!v)return console.warn("[PooderEditor] detectDielineFromFrame detectEdge returned null"),null;const R=N(v,u);if(e?.commit===!1)return{...v,...n?{sourceImage:u}:{},...c?{diagnostics:R}:{}};D(v,u);const $={multiplier:e?.export?.multiplier??2,format:e?.export?.format??"png",detect:{expand:e?.detect?.expand??0,smoothing:e?.detect?.smoothing??!0,simplifyTolerance:e?.detect?.simplifyTolerance??2,threshold:e?.detect?.threshold}};let E=await X(u.imageIds,a,$);return E?console.info("[PooderEditor] detectDielineFromFrame post-commit diagnostics",E):u.imageIds.length>0&&console.warn("[PooderEditor] detectDielineFromFrame post-commit detectEdge returned null"),{...v,...n?{sourceImage:u}:{},...c?{diagnostics:R,postCommitDiagnostics:E}:{}}}finally{g&&!n&&URL.revokeObjectURL(g)}},uploadAndDetectEdge:async(e,t)=>{const n=await F(e),c=await o.executeCommand("detectEdge",e,{expand:t?.expand??10,smoothing:t?.smoothing??!0,simplifyTolerance:t?.simplifyTolerance??2});return c?(D(c),{imageId:n,url:e,pathData:c.pathData}):null},activateTool:async e=>await f.switchTool(e),deactivateTool:async()=>await f.deactivate(),on:(e,t)=>r.eventBus.on(e,t),off:(e,t)=>r.eventBus.off(e,t),emit:(e,t)=>r.eventBus.emit(e,t),executeCommand:(e,...t)=>o.executeCommand(e,...t),getConfig:e=>i.get(e),updateConfig:(e,t)=>i.update(e,t),services:{workbench:f,command:o,config:i}});const q=e=>{const t=new m.CanvasService(e,{eventBus:r.eventBus});r.registerService(t,"CanvasService"),r.registerService(new m.SceneLayoutService,I),r.registerService(new m.SceneVisibilityService,T),[new m.BackgroundTool,new m.SizeTool,new m.ImageTool,new m.WhiteInkTool,new m.MirrorTool,new m.DielineTool,new m.RulerTool,new m.FeatureTool].forEach(c=>{r.extensionManager.register(c)})},K=(e,t)=>{const n=r.getService("CanvasService");n&&n.resize(e,t)};return s.onUnmounted(()=>{C.dispose(),r.extensionManager.destroy(),r.unregisterService(T),r.unregisterService(I),r.unregisterService("CanvasService")}),(e,t)=>(s.openBlock(),s.createElementBlock("div",A,[s.createVNode(j,{onCanvasReady:q,onResize:K})]))}}),[["__scopeId","data-v-77a7de32"]]);l.PooderEditor=M,Object.keys(w).forEach(d=>{d!=="default"&&!Object.prototype.hasOwnProperty.call(l,d)&&Object.defineProperty(l,d,{enumerable:!0,get:()=>w[d]})}),Object.keys(m).forEach(d=>{d!=="default"&&!Object.prototype.hasOwnProperty.call(l,d)&&Object.defineProperty(l,d,{enumerable:!0,get:()=>m[d]})}),Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));

package/dist/vue/src/PooderEditor.vue.d.ts

@@ -14,6 +14,22 @@ interface DetectFrameDiagnostics {
     coverageX: number;
     coverageY: number;
 }
+interface DetectMarginDiagnostics {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+}
+interface DetectPostCommitDiagnostics {
+    frame: DetectFrameDiagnostics;
+    margin: DetectMarginDiagnostics | null;
+    expectedExpand: number;
+    marginDeltaFromExpected: DetectMarginDiagnostics | null;
+    marginAsymmetry: {
+        x: number;
+        y: number;
+    } | null;
+}
 interface ExportUserCroppedImageResult {
     url: string;
     width: number;
@@ -67,6 +83,7 @@ declare const _default: import('vue').DefineComponent<{}, {
         commit?: boolean;
     }) => Promise<{
         diagnostics?: DetectFrameDiagnostics | undefined;
+        postCommitDiagnostics?: DetectPostCommitDiagnostics | null | undefined;
         sourceImage?: ExportUserCroppedImageResult | undefined;
         pathData: string;
         rawBounds?: DetectBounds;
@@ -83,8 +100,8 @@ declare const _default: import('vue').DefineComponent<{}, {
         url: string;
         pathData: string;
     } | null>;
-    activateTool: (id: string | null) => Promise<import('../../core/src/index.ts/src/services/WorkbenchService').ToolSwitchResult>;
-    deactivateTool: () => Promise<import('../../core/src/index.ts/src/services/WorkbenchService').ToolSwitchResult>;
+    activateTool: (id: string | null) => Promise<import('../../core/src/services/WorkbenchService').ToolSwitchResult>;
+    deactivateTool: () => Promise<import('../../core/src/services/WorkbenchService').ToolSwitchResult>;
     on: (event: string, handler: any) => void;
     off: (event: string, handler: any) => void;
     emit: (event: string, data: any) => void;

package/dist/vue.css

@@ -1 +1 @@
-.pooder-canvas-area[data-v-9668bbd7]{flex:1;width:100%;height:100%;min-height:650px;min-width:650px;overflow:hidden;background:#ececec;position:relative}canvas[data-v-9668bbd7]{display:block}.pooder-editor[data-v-7e138562]{display:flex;width:100%;height:100%;overflow:hidden}
+.pooder-canvas-area[data-v-9668bbd7]{flex:1;width:100%;height:100%;min-height:650px;min-width:650px;overflow:hidden;background:#ececec;position:relative}canvas[data-v-9668bbd7]{display:block}.pooder-editor[data-v-77a7de32]{display:flex;width:100%;height:100%;overflow:hidden}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pooder/vue",
-  "version": "4.2.7",
+  "version": "4.3.0",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -19,7 +19,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@pooder/kit": "5.3.0",
+    "@pooder/kit": "5.4.0",
     "@pooder/core": "2.2.0"
   },
   "peerDependencies": {

package/dist/vue/src/components/ConfigurationPanel.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
-export default _default;

package/dist/vue/src/components/ToolPanel.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
-export default _default;